@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

body { font-family: 'DotGothic16', sans-serif; background-color: #5c6b53; color: #fff; text-align: center; margin-top: 10px; transition: background-color 0.1s, filter 0.1s; user-select: none; }
.crit-flash-bg { filter: invert(1) brightness(1.5) contrast(2) !important; background-color: #fff !important; }
.damage-flash-bg { filter: brightness(0.5) sepia(1) hue-rotate(-50deg) saturate(5) !important; background-color: #800000 !important; }
.heal-flash-bg { filter: hue-rotate(90deg) brightness(1.2) !important; background-color: #4CAF50 !important; }

#game-container { display: inline-block; max-width: 450px; width: 95%; background-color: #222; padding: 10px; border-radius: 10px; box-shadow: 0 0 15px rgba(0,0,0,0.8); }
.retro-title { font-size: 28px; color: #ffeb3b; text-shadow: 2px 2px #000; margin-bottom: 10px; }
.retro-window { background-color: #000; border: 3px solid #fff; border-radius: 5px; padding: 10px; margin-bottom: 10px; text-align: left; position: relative; }

.status-row { display: flex; justify-content: space-between; font-size: 16px; margin-bottom: 2px; }

.facility-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px; margin-top: 10px; }
.facility { background-color: #111; border: 1px solid #555; border-radius: 5px; padding: 5px; text-align: center; }
.facility p { font-size: 14px; margin-bottom: 5px; font-weight: bold; }
.facility button { width: 100%; font-size: 12px; padding: 5px 0; margin: 2px 0; }

#dungeon-list { max-height: 250px; overflow-y: auto; padding-right: 5px; }
#dungeon-list::-webkit-scrollbar { width: 8px; }
#dungeon-list::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }

.unit-box { border: 1px dashed #555; padding: 8px; margin-bottom: 10px; border-radius: 4px; background-color: #0a0a0a; }
.unit-title { font-size: 14px; margin-bottom: 6px; font-weight: bold; color: #ffeb3b; border-bottom: 1px solid #333; padding-bottom: 3px; }

.stage-buttons { display: flex; flex-wrap: wrap; gap: 5px; }
.stage-buttons button { font-size: 13px; padding: 6px 2px; flex-grow: 1; min-width: 30%; }

#mini-map { 
  display: grid; grid-template-columns: repeat(7, 34px); grid-template-rows: repeat(7, 34px); gap: 1px; 
  justify-content: center; background-color: #111; padding: 5px; border: 3px solid #444; border-radius: 5px; 
  margin: 0 auto; width: fit-content; 
}
.map-cell { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 20px; }

.fog { background-color: #000 !important; color: #000 !important; text-shadow: none !important; }
.fog * { display: none !important; }

.theme-grass { background-color: #1b5e20 !important; border-color: #2e7d32 !important; }
.theme-grass .map-cell { background-color: #388e3c; }
.theme-cave { background-color: #111 !important; border-color: #444 !important; }
.theme-cave .map-cell { background-color: #5a5a5a; }
.theme-lava { background-color: #4a0000 !important; border-color: #8e0000 !important; }
.theme-lava .map-cell { background-color: #b71c1c; }
.theme-boss { background-color: #1a0033 !important; border-color: #4a0088 !important; }
.theme-boss .map-cell { background-color: #311b92; }
.theme-star { background-color: #000033 !important; border-color: #3f51b5 !important; }
.theme-star .map-cell { background-color: #1a237e; }
.star-entity { color: #fff59d; text-shadow: 0 0 8px #fff; animation: twinkle 1s infinite alternate; }
@keyframes twinkle { from { opacity: 0.5; } to { opacity: 1; } }

.map-entity { font-size: 24px; text-shadow: 1px 1px 0 #000; }
.wall-entity { font-size: 24px; font-weight: bold; filter: brightness(0.8); }

.d-pad-layout {
  display: grid; grid-template-columns: 60px 60px 60px; grid-template-rows: 60px 60px;
  gap: 5px; justify-content: center; margin-top: 10px;
}
.d-pad-layout button { font-size: 24px; background-color: #444; border: 2px solid #fff; border-radius: 10px; padding: 0; }
.d-pad-layout button:active { background-color: #fff; }
.up-btn { grid-column: 2; grid-row: 1; }
.left-btn { grid-column: 1; grid-row: 2; }
.down-btn { grid-column: 2; grid-row: 2; }
.right-btn { grid-column: 3; grid-row: 2; }

button { font-family: 'DotGothic16', sans-serif; background-color: #000; color: #fff; border: 2px solid #fff; border-radius: 4px; cursor: pointer; }
button:hover { background-color: #fff; color: #000; }
.locked { color: #333 !important; border-color: #333 !important; background-color: #000 !important; cursor: not-allowed; }

.hissan-input { font-family: 'DotGothic16', sans-serif; font-size: 20px; background-color: #111; color: #fff; border: 1px solid #777; border-radius: 4px; padding: 2px 5px; }
.hissan-input:focus { outline: none; border-color: #ffeb3b; background-color: #222; }

.memo-input {
  width: 22px; height: 22px; font-size: 14px; text-align: center;
  background-color: transparent; color: #03a9f4; border: 1px dashed #777;
  border-radius: 2px; padding: 0; font-family: 'DotGothic16', sans-serif;
}
.memo-input:focus { outline: none; border: 1px solid #ffeb3b; background-color: #222; }

/* テンキーボタンのデザイン */
#numpad-container button {
  height: 45px; font-size: 20px; background: #111; border: 2px solid #fff;
  color: #fff; border-radius: 4px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; padding: 0;
}
#numpad-container button:active { background: #fff; color: #000; transform: scale(0.95); }

.shake-effect { animation: shake 0.3s; }
@keyframes shake { 0%{transform:translate(4px,4px)} 25%{transform:translate(-4px,0)} 50%{transform:translate(4px,4px)} 75%{transform:translate(-4px,0)} 100%{transform:translate(0,0)} }

.hit-anim { animation: hitShake 0.3s; filter: brightness(2) contrast(2); }
@keyframes hitShake { 0%{transform:scale(1) rotate(0deg)} 25%{transform:scale(1.2) rotate(-15deg)} 50%{transform:scale(1.2) rotate(15deg)} 75%{transform:scale(1.2) rotate(-15deg)} 100%{transform:scale(1) rotate(0deg)} }
.player-anim { animation: hop 0.15s; }
@keyframes hop { 0%{transform:translateY(0)} 50%{transform:translateY(-8px)} 100%{transform:translateY(0)} }

.effect-slash { position: absolute; width: 0; height: 12px; background: #fff; border-radius: 10px; box-shadow: 0 0 10px #0ff, 0 0 20px #0ff; animation: slashAnim 0.25s ease-out forwards; }
@keyframes slashAnim { 0% { width: 0; opacity: 1; margin-left: -50px; } 50% { width: 120px; opacity: 1; margin-left: 0; } 100% { width: 120px; opacity: 0; filter: brightness(2); margin-left: 20px; } }
.effect-boom { position: absolute; font-size: 90px; line-height: 1; text-shadow: 0 0 20px #ff0000; animation: boomAnim 0.3s ease-out forwards; opacity: 0; }
@keyframes boomAnim { 0% { transform: scale(0.2); opacity: 1; } 50% { transform: scale(1.3) rotate(15deg); opacity: 1; filter: brightness(1.5); } 100% { transform: scale(1.5) rotate(30deg); opacity: 0; } }

#companions-list img, 
#companions-list .map-entity {
  position: static !important; width: auto !important; height: 1.2em !important; 
  font-size: 1em !important; vertical-align: text-bottom !important;
  display: inline-block !important; margin-right: 5px !important;
  animation: none !important; filter: none !important;
}