:root {
  color-scheme: dark;
  --ink: #16101d;
  --panel: #3d304c;
  --panel-2: #5b466c;
  --edge: #17131e;
  --paper: #d8c89f;
  --gold: #f2a62c;
  --gold-hi: #ffd76a;
  --cyan: #39c5c8;
  --green: #2fc78f;
  --red: #ca3e55;
  --purple: #6d3b80;
  --muted: #a898b2;
  --safe-top: 26px;
  font-family: "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  image-rendering: pixelated;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #08080d;
  user-select: none;
}

button,
input {
  font: inherit;
}

button {
  color: #fff;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.8) brightness(0.65);
}

#app {
  position: relative;
  width: min(100vw, calc(100vh * 750 / 1334));
  height: min(100vh, calc(100vw * 1334 / 750));
  margin: auto;
  overflow: hidden;
  background: #11101d;
  box-shadow: 0 0 0 2px #2b2433, 0 0 42px #000;
  transform: translateZ(0);
}

#legal-strip {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  height: var(--safe-top);
  padding: 5px 12px;
  color: #c4b8c9;
  background: rgb(8 6 12 / 86%);
  border-bottom: 1px solid #3a2f44;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: center;
  pointer-events: none;
}

.screen {
  display: none;
  position: absolute;
  inset: 0;
}

.screen.active {
  display: block;
}

.panel {
  border: 4px solid var(--edge);
  border-radius: 12px;
  background: linear-gradient(#5b4969, #34293f);
  box-shadow: inset 0 0 0 3px #8a7197, 0 7px 0 #100d15, 0 16px 32px #0008;
}

.button {
  min-height: 58px;
  padding: 10px 20px;
  border: 4px solid #211727;
  border-radius: 10px;
  box-shadow: inset 0 0 0 3px #ffffff40, 0 5px 0 #17101d;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 0 #0008;
  transition: transform 70ms ease, filter 120ms ease;
}

.button:active,
.roll-button:active,
.potion-button:active {
  transform: translateY(4px) scale(0.97);
}

.button.primary {
  color: #2a1c10;
  background: linear-gradient(#ffc354, #ee941f);
}

.button.secondary {
  background: linear-gradient(#28b9c2, #137c91);
}

.button.ghost {
  background: #332a3c;
  color: #d9cfe0;
}

#start-screen {
  padding-top: var(--safe-top);
  background:
    linear-gradient(180deg, #0b0b15aa 0%, #14121f33 45%, #09080ed9 100%),
    url("../analysis/visual-study/unity-samples/scene/sharedassets4__chapter_select_back_grass.png") center / cover,
    #171a1f;
}

.start-art {
  position: absolute;
  inset: 9% -8% 31%;
  background:
    url("../analysis/visual-study/unity-samples/character_boss/sharedassets3__001_boss_idle_2.png") center 68% / 72% auto no-repeat,
    url("../analysis/visual-study/unity-samples/scene/sharedassets4__chapter_select_front_grass.png") center bottom / 112% auto no-repeat;
  filter: drop-shadow(0 12px 0 #0008);
  opacity: 0.94;
}

.title-mark {
  position: relative;
  z-index: 1;
  margin-top: 12%;
  text-align: center;
  text-shadow: 0 5px 0 #17101d, 0 0 18px #8c58b4;
}

.title-mark small {
  color: #d6c6a3;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.title-mark h1 {
  margin: 8px 0 -4px;
  color: #f4e8c4;
  font-size: clamp(58px, 11vw, 88px);
  line-height: 0.95;
  letter-spacing: 0.05em;
}

.title-mark p {
  margin: 8px 0;
  color: var(--gold-hi);
  font-size: 24px;
  font-weight: 900;
}

.start-actions {
  position: absolute;
  z-index: 2;
  left: 7%;
  right: 7%;
  bottom: 6%;
  display: grid;
  gap: 12px;
  padding: 22px;
}

.seed-field {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #e6d9ec;
  font-weight: 700;
}

.seed-field input {
  min-width: 0;
  flex: 1;
  padding: 10px 12px;
  border: 2px solid #1d1723;
  border-radius: 7px;
  color: #fff;
  background: #18131f;
  user-select: text;
}

.scope-note {
  margin: 2px 4px 0;
  color: #c3b6c9;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

#game-screen {
  padding-top: var(--safe-top);
  background: #0a0b12;
}

#top-hud {
  position: absolute;
  z-index: 26;
  top: calc(var(--safe-top) + 10px);
  left: 12px;
  right: 9px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  height: 58px;
  pointer-events: none;
}

.resource-chip {
  display: flex;
  align-items: center;
  width: 178px;
  height: 49px;
  padding: 3px 14px 3px 42px;
  border: 4px solid #11131c;
  clip-path: polygon(10% 0, 100% 0, 100% 80%, 92% 100%, 7% 100%, 0 75%, 0 23%);
  background: linear-gradient(90deg, #3d384d, #292635 75%, #1e1d29);
  box-shadow: inset 0 0 0 3px #5d596b, 0 4px 0 #080910;
}

.resource-chip strong {
  margin-left: auto;
  color: #f2eff2;
  font-size: 25px;
  font-weight: 500;
  text-shadow: 2px 2px 0 #11131a;
}

.point-gem {
  position: absolute;
  left: 4px;
  top: 7px;
  color: #ff627b;
  font-size: 38px;
  line-height: 1;
  filter: drop-shadow(0 3px 0 #5f1830) drop-shadow(0 0 2px #fff);
}

#auto-indicator {
  width: 120px;
  height: 50px;
  margin-left: auto;
  padding: 9px 12px;
  border: 4px solid #11131c;
  color: #cbc9ce;
  background: #403f43;
  box-shadow: inset 0 0 0 2px #58575e, 0 3px 0 #080910;
  font-size: 22px;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 2px 2px 0 #19191d;
}

.icon-button {
  width: 52px;
  height: 52px;
  border: 4px solid #11131c;
  border-radius: 3px;
  background: linear-gradient(90deg, #4e4d53, #2e2d35);
  box-shadow: inset 0 0 0 2px #68676d, 0 3px 0 #080910;
  font-weight: 900;
  pointer-events: auto;
}

.play-view {
  display: none;
  position: absolute;
  z-index: 1;
  top: var(--safe-top);
  left: 0;
  right: 0;
  bottom: 350px;
  overflow: hidden;
}

.play-view.active {
  display: block;
}

#board-view {
  background: #11151a;
}

.scene-back {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#0c111927, #08100a35 63%, #05070bcf),
    url("../analysis/visual-study/unity-samples/scene/sharedassets4__chapter_select_front_grass.png") center bottom / 118% auto no-repeat,
    url("../analysis/visual-study/unity-samples/scene/sharedassets4__chapter_select_back_grass.png") center / cover;
  filter: saturate(.78) brightness(.78);
}

#boss-figure {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 48%;
  width: 49%;
  aspect-ratio: 192 / 137;
  transform: translate(-50%, -53%) scale(1.55);
  background: url("../analysis/visual-study/unity-samples/character_boss/sharedassets3__001_boss_idle_2.png") center / contain no-repeat;
  opacity: .76;
  filter: brightness(.64) saturate(1.4) drop-shadow(0 0 1px #ff244a) drop-shadow(0 9px 8px #000b);
}

#boss-figure::after {
  content: "";
  position: absolute;
  inset: 20% -26% 3%;
  z-index: -1;
  background: repeating-linear-gradient(90deg, transparent 0 19px, #30333b 20px 26px, transparent 27px 43px);
  clip-path: polygon(0 44%, 100% 44%, 100% 58%, 0 58%);
  opacity: .62;
}

#board-view.boss-acting #boss-figure {
  animation: boss-board-action 820ms steps(2, end);
}

#board-view.boss-acting #board-ring {
  animation: boss-board-shock 420ms ease-out;
}

.board-tile.boss-converting {
  z-index: 9;
  animation: boss-tile-convert 340ms steps(3, end);
}

@keyframes boss-board-action {
  0% { transform: translate(-50%, -53%) scale(1.55); filter: brightness(.64) saturate(1.4) drop-shadow(0 0 1px #ff244a) drop-shadow(0 9px 8px #000b); }
  35% { transform: translate(-50%, -53%) scale(1.78); filter: brightness(1.35) saturate(2.2) drop-shadow(0 0 18px #ff244a) drop-shadow(0 9px 8px #000b); }
  100% { transform: translate(-50%, -53%) scale(1.55); filter: brightness(.64) saturate(1.4) drop-shadow(0 0 1px #ff244a) drop-shadow(0 9px 8px #000b); }
}

@keyframes boss-board-shock {
  0%, 100% { translate: 0 0; }
  25% { translate: -7px 2px; }
  50% { translate: 6px -2px; }
  75% { translate: -3px 1px; }
}

@keyframes boss-tile-convert {
  0% { scale: 1; filter: brightness(1); }
  35% { scale: 1.45; filter: brightness(2.2) sepia(1) saturate(5) hue-rotate(315deg); }
  70% { scale: .8; filter: brightness(.45) saturate(2); }
  100% { scale: 1; filter: brightness(1); }
}

#board-ring {
  position: absolute;
  z-index: 3;
  inset: 8% 2% 1%;
  transform: none;
}

.board-path {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 72%;
  aspect-ratio: 1;
  border: 59px solid #262833;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: inset 0 0 0 7px #15161d, 0 0 0 7px #13141b, 0 0 34px #000c;
  opacity: .94;
}

.board-path::after {
  content: "";
  position: absolute;
  inset: -38px;
  border: 6px dashed #393c49;
  opacity: .45;
}

.board-tile {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: -22px;
  border: 0;
  background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__tile_normal.png") center / 100% 100% no-repeat;
  filter: hue-rotate(292deg) saturate(.86) brightness(.9) drop-shadow(0 2px 0 #0c0c12);
  transform: rotate(45deg);
  transition: filter 150ms ease, transform 150ms ease;
}

.board-tile.purple:not(.good):not(.merchant):not(.start) {
  filter: sepia(.65) saturate(1.8) hue-rotate(222deg) brightness(.83) drop-shadow(0 2px 0 #0c0c12);
}

.board-tile.stone:not(.good):not(.merchant):not(.start) {
  filter: grayscale(.88) brightness(1.08) drop-shadow(0 2px 0 #0c0c12);
}

.board-tile.current {
  transform: rotate(45deg) scale(1.08);
  filter: hue-rotate(292deg) brightness(1.65) drop-shadow(0 0 8px #fff39b);
}

.board-tile.good,
.board-tile.merchant {
  background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__tile_goodEvent.png") center / 100% 100% no-repeat;
  filter: brightness(1.08) drop-shadow(0 2px 0 #07140f);
}

.board-tile.battle {
  background: url("../design/ue-ui/assets/original/board/923b2b5e8d06c8548a5ab01a28352030__tile_battle.png") center / 100% 100% no-repeat;
  filter: hue-rotate(335deg) saturate(1.45) brightness(.9) drop-shadow(0 2px 0 #14070b);
}

.board-tile.miniboss {
  background: url("../design/ue-ui/assets/original/board/2aa332480a841f045a6a77325d1a5237__tile_battle_hard.png") center / 100% 100% no-repeat;
  filter: brightness(1.08) saturate(1.25) drop-shadow(0 0 5px #ff553f) drop-shadow(0 2px 0 #14070b);
}

.board-tile.infected_boss {
  background: url("../design/ue-ui/assets/original/board/413152916e05bb744a3153d113e8ba81__tile_battle_infected.png") center / 100% 100% no-repeat;
  filter: brightness(1.12) saturate(1.4) drop-shadow(0 0 6px #77b73c) drop-shadow(0 2px 0 #0b1307);
}

.board-tile.polluted {
  box-shadow: 0 0 0 2px #79a844, 0 0 9px #77b73c;
}

.board-tile.start {
  background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__tile_normal_white.png") center / 100% 100% no-repeat;
  filter: sepia(.72) brightness(1.08) drop-shadow(0 2px 0 #261a0b);
}

.board-tile .tile-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: #f1e7d9;
  font-size: 15px;
  font-weight: 900;
  text-shadow: 0 3px 0 #000;
  transform: rotate(-45deg);
}

.board-tile .tile-art {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 #101018) drop-shadow(0 0 2px #fff8);
}

.board-tile.merchant .tile-art {
  width: 38px;
  height: 38px;
}

.board-tile .tile-index {
  position: absolute;
  right: 22px;
  bottom: -14px;
  color: #79b5e8;
  font-size: 8px;
  font-weight: 900;
  transform: rotate(-45deg);
}

#hero-marker {
  position: absolute;
  z-index: 8;
  width: 48px;
  height: 58px;
  margin: -46px -24px;
  background: url("../analysis/visual-study/unity-samples/character_player/ae84db1b203207e43a50cdb606a4f489__knight_m_idle_anim_f0.png") center bottom / 32px 56px no-repeat;
  filter: drop-shadow(0 3px 0 #111) drop-shadow(0 0 5px #ffed9b);
  transition: left 170ms linear, top 170ms linear;
  animation: knight-idle 680ms steps(1) infinite;
  transform: rotate(var(--hero-counter-rotation, 0deg));
}

#game-screen.animating-move #hero-marker {
  transition-duration: 56ms;
  filter: drop-shadow(0 5px 0 #111) drop-shadow(0 0 8px #ffe993);
}

#hero-marker.running {
  animation: knight-run 232ms steps(1) infinite;
}

#hero-marker.landing {
  animation: hero-land 280ms ease-out;
}

@keyframes knight-run {
  0% { background-image: url("../analysis/visual-study/unity-samples/character_player/066f2d8aea4b254408f0d3be3a340137__knight_m_run_anim_f0.png"); }
  25% { background-image: url("../analysis/visual-study/unity-samples/character_player/000edfb39ceebe545909ea197165bb9b__knight_m_run_anim_f1.png"); }
  50% { background-image: url("../analysis/visual-study/unity-samples/character_player/6a7c4fa5e8ffe2c478701dadf43e44ea__knight_m_run_anim_f2.png"); }
  75% { background-image: url("../analysis/visual-study/unity-samples/character_player/883cd9c5cac93ec4e94820b2fd548ec0__knight_m_run_anim_f3.png"); }
}

@keyframes hero-land {
  0% { transform: rotate(var(--hero-counter-rotation, 0deg)) translateY(-10px) scale(1.12); }
  55% { transform: rotate(var(--hero-counter-rotation, 0deg)) translateY(3px) scale(.94); }
  100% { transform: rotate(var(--hero-counter-rotation, 0deg)) translateY(0) scale(1); }
}

#hero-marker::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: -1px;
  height: 13px;
  border-radius: 50%;
  background: #ffeaa373;
  filter: blur(3px);
}

#dice-result {
  position: absolute;
  z-index: 45;
  left: 50%;
  top: 34%;
  display: flex;
  gap: 7px;
  width: 184px;
  height: 184px;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%) rotate(45deg);
  pointer-events: none;
}

#dice-result:not(:empty) {
  background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__dice_roll_bg.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 7px 0 #0c0912) drop-shadow(0 0 18px #000);
  animation: dice-platform-in 180ms ease-out;
}

#game-screen.showing-dice #board-view { display: block !important; }
#game-screen.showing-dice #battle-view { display: none !important; }
#app:has(#game-screen.showing-dice) #modal-layer,
#app:has(#game-screen.showing-dice) #tutorial-layer { visibility: hidden; }

@keyframes dice-platform-in {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(.62); }
}

.die-face {
  width: 76px;
  height: 76px;
  background: var(--die-image) center / contain no-repeat;
  filter: drop-shadow(4px 5px 0 #17131b);
  transform: rotate(-45deg);
  animation: die-tumble 420ms cubic-bezier(.2,.8,.2,1);
}

.dice-sum {
  position: absolute;
  left: 50%;
  bottom: 10px;
  min-width: 42px;
  translate: -50% 0;
  color: #fff4bf;
  font-size: 25px;
  line-height: 1;
  text-align: center;
  text-shadow: 0 3px 0 #18101d, 0 0 4px #000;
  transform: rotate(-45deg);
}

@keyframes die-tumble {
  from { transform: rotate(-225deg) scale(.45); }
  70% { transform: rotate(-31deg) scale(1.12); }
  to { transform: rotate(-45deg) scale(1); }
}

#floor-meter {
  position: absolute;
  z-index: 22;
  top: 9%;
  right: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50px;
  color: #fff;
  text-shadow: 2px 2px 0 #080910;
}

.boss-meter-icon {
  width: 42px;
  height: 32px;
  background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__ingame_boss_icon.png") center / contain no-repeat;
}

.meter-rail {
  position: relative;
  width: 19px;
  height: 257px;
  border: 4px solid #090a10;
  background: #1a1b23;
  box-shadow: inset 0 0 0 2px #4b4e5a;
}

.meter-rail i {
  position: absolute;
  left: 3px;
  right: 3px;
  bottom: 3px;
  height: 10%;
  background: linear-gradient(#48a5ed, #2876cf);
  transition: height 300ms ease;
}

#floor-meter[data-mode="COUNTDOWN"] .meter-rail i {
  background: linear-gradient(#ff6b55, #a70e29);
  box-shadow: 0 0 10px #ff284d;
}

#floor-meter.meter-pulse {
  animation: boss-meter-pulse 360ms ease-out;
}

@keyframes boss-meter-pulse {
  0%, 100% { scale: 1; }
  45% { scale: 1.16; filter: brightness(1.7); }
}

.floor-step-icon {
  width: 38px;
  height: 27px;
  margin-top: -2px;
  background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__ingame_dice_icon.png") center / contain no-repeat;
}

#floor-meter strong {
  margin-top: 2px;
  font-size: 15px;
}

#floor-banner {
  position: absolute;
  z-index: 14;
  left: 50%;
  top: 18%;
  min-width: 240px;
  padding: 12px 22px;
  border: 4px solid #25172b;
  border-radius: 8px;
  transform: translateX(-50%);
  color: #ffecaf;
  background: #5c3a6ee8;
  box-shadow: 0 5px 0 #120d17;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

#floor-banner.show {
  animation: banner 900ms ease;
}

@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, -10px) scale(0.8); }
  20%, 75% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 8px) scale(1); }
}

#battle-view {
  background:
    linear-gradient(#0c101585, #262b2685 54%, #12150f 55% 100%),
    url("../analysis/visual-study/unity-samples/scene/sharedassets4__chapter_select_front_grass.png") center bottom / cover,
    url("../analysis/visual-study/unity-samples/scene/sharedassets4__chapter_select_back_grass.png") center / cover;
}

#battle-view.active {
  animation: battle-view-in 360ms ease-out both;
}

@keyframes battle-view-in {
  from { opacity: 0; filter: brightness(2); transform: scale(1.035); }
  to { opacity: 1; filter: brightness(1); transform: scale(1); }
}

.battle-sky {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent 66%, #0007 100%),
    radial-gradient(circle at 50% 34%, #8fc49435, transparent 44%);
}

#battle-versus {
  position: absolute;
  z-index: 8;
  top: 75px;
  left: 14%;
  right: 14%;
  display: grid;
  grid-template-columns: 1fr 34px 1fr;
  align-items: center;
  height: 17px;
  border: 4px solid #0c0d12;
  background: #252630;
  box-shadow: inset 0 0 0 2px #5d6069, 0 3px 0 #090a0e;
}

#battle-versus i {
  display: block;
  height: 7px;
  transition: width 180ms linear;
}

#battle-versus .versus-player {
  justify-self: end;
  background: #55b279;
}

#battle-versus .versus-enemy { background: #c94b5b; }

#battle-versus strong {
  color: #f0eef0;
  font-size: 11px;
  text-align: center;
  text-shadow: 1px 1px 0 #000;
}

.combatant {
  position: absolute;
  z-index: 5;
  width: 116px;
  text-align: center;
}

.combatant.player {
  left: 11%;
  bottom: 31%;
}

.combatant.enemy {
  right: 14%;
  width: 190px;
}

.pixel-fighter {
  position: relative;
  width: 88px;
  height: 108px;
  margin: auto;
  background: center bottom / contain no-repeat;
  filter: drop-shadow(0 6px 0 #12131a) drop-shadow(0 0 6px #000);
}

.player-silhouette {
  width: 64px;
  height: 112px;
  background-image: url("../analysis/visual-study/unity-samples/character_player/ae84db1b203207e43a50cdb606a4f489__knight_m_idle_anim_f0.png");
  image-rendering: pixelated;
  animation: knight-idle 680ms steps(1) infinite;
}

@keyframes knight-idle {
  0% { background-image: url("../analysis/visual-study/unity-samples/character_player/ae84db1b203207e43a50cdb606a4f489__knight_m_idle_anim_f0.png"); }
  25% { background-image: url("../analysis/visual-study/unity-samples/character_player/5106094c8edff3a4bb33e3884f6d69f2__knight_m_idle_anim_f1.png"); }
  50% { background-image: url("../analysis/visual-study/unity-samples/character_player/179334d6c9c17c247b247573dd1c8a70__knight_m_idle_anim_f2.png"); }
  75% { background-image: url("../analysis/visual-study/unity-samples/character_player/13bc99c5d69998e42bacd5e6a78ff573__knight_m_idle_anim_f3.png"); }
}

.player-silhouette.attack::after {
  content: "";
  position: absolute;
  left: 35px;
  top: 15px;
  width: 105px;
  height: 105px;
  background: url("../analysis/visual-study/unity-samples/vfx/sharedassets3__Fx_T_Sword01.png") center / contain no-repeat;
  filter: brightness(1.6) drop-shadow(0 0 8px #fff);
}

.pixel-fighter.attack {
  animation: attack 240ms ease;
}

.pixel-fighter.hit {
  animation: hit 180ms ease;
}

.combatant.enemy.defeated {
  animation: enemy-defeated 520ms ease forwards;
}

@keyframes attack {
  0% { transform: translateX(0) rotate(0); }
  45% { transform: translateX(16px) rotate(8deg); filter: brightness(1.6); }
  100% { transform: translateX(0) rotate(0); }
}

@keyframes hit {
  0%, 100% { filter: none; }
  40% { filter: brightness(2) sepia(1) saturate(6) hue-rotate(310deg); transform: translateX(-8px); }
}

@keyframes enemy-defeated {
  0% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
  32% { opacity: 1; transform: translateY(-8px) scale(1.08); filter: brightness(2.2); }
  100% { opacity: 0; transform: translateY(26px) scale(.72); filter: brightness(.35) grayscale(1); }
}

.enemy.sword .pixel-fighter {
  width: 124px;
  height: 80px;
  background-image: url("../analysis/visual-study/unity-samples/character_enemy/6dd9bb0cc96b7ec40b4e8d88c1d0ff44__m_004.png");
}

.enemy.straight .pixel-fighter {
  width: 76px;
  height: 90px;
  background-image: url("../analysis/visual-study/unity-samples/character_enemy/79d5d1971bbed5643b81db0325dc2c7e__m_002.png");
}

.enemy.curved .pixel-fighter {
  width: 189px;
  height: 96px;
  background-image: url("../analysis/visual-study/unity-samples/character_enemy/fbe7c787bc7cfa54a8e32a7532e5503d__m_010.png");
}

.enemy.rush .pixel-fighter {
  width: 116px;
  height: 100px;
  background-image: url("../analysis/visual-study/unity-samples/character_enemy/68b5e6d6a65fa4b4c99b243ae5a540b3__m_005.png");
}
.enemy.boss .pixel-fighter {
  width: 150px;
  height: 128px;
  background: url("../analysis/visual-study/unity-samples/character_boss/sharedassets3__001_boss_attack_2.png") center / contain no-repeat;
  border: 0;
  filter: drop-shadow(0 0 8px #e6264d);
}

.entity-name {
  margin-top: 5px;
  color: #f1e9db;
  font-size: 13px;
  font-weight: 900;
  text-shadow: 0 2px 0 #000;
}

.entity-hp {
  height: 12px;
  margin-top: 4px;
  border: 2px solid #160f19;
  border-radius: 5px;
  background: #241a26;
  overflow: hidden;
}

.entity-hp i {
  display: block;
  height: 100%;
  background: linear-gradient(#ef5d67, #a6263a);
}

#battle-log {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 112px;
  width: 74%;
  transform: translateX(-50%);
  color: #fff1b0;
  font-weight: 900;
  text-align: center;
  text-shadow: 0 2px 0 #000;
}

.damage-number {
  position: absolute;
  z-index: 12;
  color: #fff1bc;
  font-size: 22px;
  font-weight: 900;
  text-shadow: 2px 2px 0 #6b142b;
  animation: damage-number 667ms ease forwards;
  pointer-events: none;
}

.damage-number.critical {
  color: #ffd84f;
  font-size: 28px;
  text-shadow: 2px 2px 0 #9b211d, 0 0 8px #ffed76;
}

@keyframes damage-number {
  from { opacity: 1; transform: translateY(0) scale(0.7); }
  30% { transform: translateY(-18px) scale(1.2); }
  to { opacity: 0; transform: translateY(-54px) scale(1); }
}

#battle-speed {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #13101ad9;
  font-weight: 900;
}

#battle-announcer {
  position: absolute;
  z-index: 24;
  left: 0;
  right: 0;
  top: 31%;
  color: #fff2b5;
  font-size: 52px;
  font-weight: 1000;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: 4px 4px 0 #591b35, 0 0 18px #ffec8c;
  opacity: 0;
  pointer-events: none;
}

#battle-announcer.show {
  animation: battle-announcement 760ms cubic-bezier(.18,.78,.25,1) both;
}

#battle-announcer[data-tone="defeat"] {
  color: #e4d6dc;
  text-shadow: 4px 4px 0 #3e1720, 0 0 16px #a6334d;
}

@keyframes battle-announcement {
  0% { opacity: 0; transform: translateX(-18%) scale(1.6); }
  18%, 70% { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(12%) scale(.88); }
}

.value-gain { animation: value-gain 360ms ease-out; }
.value-loss { animation: value-loss 360ms ease-out; }

@keyframes value-gain {
  35% { color: #fff3a0; transform: translateY(-3px) scale(1.24); text-shadow: 0 0 10px #ffd85f; }
}

@keyframes value-loss {
  35% { color: #ff9b9b; transform: translateX(-2px) scale(1.12); text-shadow: 0 0 9px #e64d5b; }
  55% { transform: translateX(2px) scale(1.08); }
}

#bottom-hud {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  bottom: 0;
  height: 350px;
  padding: 4px 20px 7px;
  border-top: 0;
  background: linear-gradient(#0e1015f2, #090b10 73%, #08090d);
  box-shadow: 0 -12px 24px #0008;
}

.hp-row {
  position: absolute;
  top: 4px;
  left: 20px;
  right: 20px;
  display: grid;
  grid-template-columns: 52px 1fr 91px;
  gap: 9px;
  align-items: center;
}

.battle-mode-lock {
  display: grid;
  place-items: center;
  height: 40px;
  border: 4px solid #0b0c11;
  color: #b8bbc6;
  background: linear-gradient(#41434e, #282a34);
  box-shadow: inset 0 0 0 2px #5c5f6b;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .08em;
}

.level-diamond {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border: 4px solid #0c0d12;
  background: linear-gradient(135deg, #44434b, #262832);
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 2px #5c5c66;
  font-weight: 900;
}

.level-diamond::first-line {
  transform: rotate(-45deg);
}

.bar {
  position: relative;
  height: 29px;
  border: 4px solid #090a0f;
  border-radius: 0;
  background: #24252d;
  box-shadow: inset 0 0 0 2px #5f626b;
  overflow: hidden;
}

.bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(#54b178, #397e5a);
  transition: width 180ms ease;
}

.bar strong {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 15px;
  text-shadow: 0 2px 0 #000;
}

#gear-slots {
  position: absolute;
  top: 52px;
  left: 15.5%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  width: 69%;
  height: 99px;
  margin: 0;
  padding: 12px 11px;
  border: 6px solid #090a0e;
  border-radius: 0;
  background: linear-gradient(#292b32, #17191e);
  box-shadow: inset 0 0 0 3px #45474e, 0 5px 0 #050609;
}

#gear-slots button {
  position: relative;
  height: 68px;
  border: 4px solid #090a0e;
  border-radius: 0;
  color: #4c4e59;
  background: linear-gradient(#191b22, #101116);
  box-shadow: inset 0 0 0 3px #353740;
  font-size: 31px;
}

#gear-slots button.equipped {
  color: #fff;
  border-color: var(--quality, #8eb9df);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--quality) 50%, #111);
}

#gear-slots button small {
  position: absolute;
  right: 2px;
  bottom: 0;
  color: #fff;
  font-size: 9px;
}

.action-row {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 7px;
  display: grid;
  grid-template-columns: 74px 1fr 79px;
  gap: 13px;
  align-items: end;
}

.roll-button {
  height: 89px;
  border: 0;
  border-radius: 0;
  color: #f8f0d7;
  background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__dice_btn.png") center / 100% 100% no-repeat;
  filter: grayscale(.95) brightness(.97) drop-shadow(0 7px 0 #08090d);
  font-size: 31px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow: 2px 3px 0 #34343a;
}

.roll-button.ready {
  color: #f9f6ee;
  filter: grayscale(.92) brightness(1.16) drop-shadow(0 7px 0 #08090d) drop-shadow(0 0 7px #fff3);
}

.potion-button,
.map-button {
  position: relative;
  height: 76px;
  border: 0;
  border-radius: 0;
  background: transparent;
  filter: drop-shadow(0 4px 0 #07080c);
  font-weight: 900;
}

.potion-button span {
  display: block;
  position: absolute;
  inset: 0;
  background:
    url("../analysis/visual-study/unity-samples/ui/sharedassets3__potion_image.png") center 42% / 36% auto no-repeat,
    url("../analysis/visual-study/unity-samples/ui/sharedassets3__potion_bg.png") center / contain no-repeat;
}

.potion-button strong {
  position: absolute;
  right: 7px;
  bottom: 5px;
  font-size: 14px;
  text-shadow: 2px 2px 0 #000;
}

.map-button {
  align-self: end;
}

.map-button span {
  display: block;
  position: absolute;
  inset: 2px;
  background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__map_2.png") center / 540% no-repeat;
  filter: grayscale(.35) brightness(1.25);
}

#modal-layer {
  position: absolute;
  z-index: 60;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(var(--safe-top) + 38px) 28px 36px;
  pointer-events: none;
}

#modal-layer:has(.modal) {
  background: #05040bb5;
  pointer-events: auto;
}

.modal {
  width: 100%;
  max-height: 92%;
  padding: 20px;
  overflow: auto;
  border: 5px solid #18111d;
  border-radius: 14px;
  color: #2b211e;
  background: linear-gradient(#dfd0a9, #b89e71);
  box-shadow: inset 0 0 0 4px #f6e8c1, 0 8px 0 #100b13, 0 20px 40px #000c;
  animation: modal-in 220ms cubic-bezier(.2, 1.4, .4, 1);
}

.shop-modal {
  width: 78%;
  min-height: 76%;
  max-height: 88%;
  padding: 92px 28px 22px;
  border: 0;
  border-radius: 0;
  color: #efe5dc;
  background:
    url("../analysis/visual-study/unity-samples/ui/sharedassets3__ingame_shop_bg.png") center top / 100% 100% no-repeat,
    #3a2925;
  box-shadow: 0 12px 0 #07070b, 0 20px 50px #000;
}

.shop-modal > h2 { display: none; }

.shop-master {
  position: relative;
  height: 70px;
  margin: -56px 3px 15px;
  padding: 15px 76px 10px 18px;
  color: #4c4141;
  background: linear-gradient(#f0ede7, #c9c9c7);
  border: 3px solid #17141a;
  font-size: 16px;
  text-align: center;
}

.shop-master::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 0;
  width: 72px;
  height: 60px;
  background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__ingame_shop_master.png") center bottom / contain no-repeat;
}

.shop-section-title {
  margin: 9px 0 8px;
  padding: 7px;
  border: 3px solid #18121d;
  color: #f4eff5;
  background: linear-gradient(#5d466a, #3e304b);
  box-shadow: inset 0 0 0 2px #725a7b;
  font-size: 18px;
  text-align: center;
}

.shop-modal .modal-actions {
  margin-top: 11px;
}

.event-modal {
  color: #332823;
}

.chest-modal {
  color: #e8e1d5;
  background: #14131a;
}

.chest-modal h2,
.bubble-modal h2,
.claw-modal h2,
.smith-modal h2,
.campfire-modal h2 {
  background: linear-gradient(#685071, #473650);
}

.chest-scene {
  position: relative;
  height: 360px;
  margin: 8px -20px;
  background: radial-gradient(ellipse at 50% 57%, #fff1b087, #f3c03922 27%, transparent 58%);
}

.chest-scene::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 48%;
  width: 264px;
  height: 150px;
  transform: translate(-50%, -50%);
  background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__treasure_box_1.png") center / contain no-repeat;
  filter: drop-shadow(0 10px 0 #07070b) drop-shadow(0 0 20px #ffe77d);
  animation: chest-breathe 1.2s steps(2) infinite;
}

@keyframes chest-breathe {
  50% { transform: translate(-50%, -54%) scale(1.04); filter: drop-shadow(0 12px 0 #07070b) drop-shadow(0 0 32px #fff3a5); }
}

.campfire-scene {
  height: 250px;
  margin: -4px -8px 10px;
  background:
    url("../analysis/visual-study/unity-samples/ui/sharedassets3__bonfire.png") center 66% / 110px auto no-repeat,
    radial-gradient(circle at 50% 68%, #ee903b8a, transparent 38%),
    #24232b;
}

.smith-scene {
  height: 255px;
  margin: -4px -8px 10px;
  background:
    url("../analysis/visual-study/unity-samples/event/sharedassets4__equipment_merge_blacksmith_idle_1.png") center 62% / 240px auto no-repeat,
    url("../analysis/visual-study/unity-samples/ui/sharedassets3__smithy_bg.png") center / cover,
    #26232a;
  animation: smith-idle 720ms steps(1) infinite;
}

@keyframes smith-idle {
  0% { background-image: url("../analysis/visual-study/unity-samples/event/sharedassets4__equipment_merge_blacksmith_idle_1.png"), url("../analysis/visual-study/unity-samples/ui/sharedassets3__smithy_bg.png"); }
  25% { background-image: url("../analysis/visual-study/unity-samples/event/sharedassets4__equipment_merge_blacksmith_idle_2.png"), url("../analysis/visual-study/unity-samples/ui/sharedassets3__smithy_bg.png"); }
  50% { background-image: url("../analysis/visual-study/unity-samples/event/sharedassets4__equipment_merge_blacksmith_idle_3.png"), url("../analysis/visual-study/unity-samples/ui/sharedassets3__smithy_bg.png"); }
  75% { background-image: url("../analysis/visual-study/unity-samples/event/sharedassets4__equipment_merge_blacksmith_idle_4.png"), url("../analysis/visual-study/unity-samples/ui/sharedassets3__smithy_bg.png"); }
}

.claw-scene {
  height: 380px;
  margin: 8px 0;
  background:
    url("../analysis/visual-study/unity-samples/ui/sharedassets3__claw_arm.png") center top / 78px auto no-repeat,
    url("../analysis/visual-study/unity-samples/ui/sharedassets3__claw_machine.png") center / contain no-repeat,
    url("../analysis/visual-study/unity-samples/ui/sharedassets3__claw_bg.png") center / cover;
}

.bubble-modal {
  background: #15191d;
  color: #efece5;
}

.bubble-shooter-scene {
  position: relative;
  height: 520px;
  margin: 8px -20px;
  overflow: hidden;
  background: url("../analysis/visual-study/unity-samples/ui/sharedassets3__bubble_shooter_bg.png") center / cover no-repeat;
}

.bubble-shooter-scene .bubble-grid {
  width: 72%;
  margin-top: 76px;
}

.bubble-cannon {
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 190px;
  height: 170px;
  transform: translateX(-50%);
  background:
    url("../analysis/visual-study/unity-samples/ui/sharedassets3__bubble_shooter_cannon.png") center 25% / 82px auto no-repeat,
    url("../analysis/visual-study/unity-samples/ui/sharedassets3__bubble_shooter_cannon_floor.png") center bottom / contain no-repeat;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(20px) scale(0.86); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal h2 {
  margin: -20px -20px 16px;
  padding: 12px 18px;
  border-bottom: 5px solid #25172b;
  color: #fff4d9;
  background: linear-gradient(#765987, #503b62);
  font-size: 24px;
  text-align: center;
  text-shadow: 0 3px 0 #25172b;
}

.modal p {
  line-height: 1.55;
}

.result-modal {
  display: flex;
  flex-direction: column;
  min-height: 76%;
  overflow: hidden;
  color: #fff0bd;
  background:
    linear-gradient(#15172ae8, #17596ee8),
    url("../design/ue-ui/assets/original/battle/sharedassets3__victory_bg.png") center / cover no-repeat;
  box-shadow: inset 0 0 0 4px #e0a75c, 0 8px 0 #090913, 0 22px 50px #000e;
}

.result-modal .modal-actions {
  margin-top: auto;
  padding-top: 22px;
}

.result-modal h2 {
  margin-bottom: 0;
  border: 0;
  color: #fff0a8;
  background: transparent;
  font-size: 42px;
  letter-spacing: 1px;
  text-shadow: 5px 5px 0 #8f2c3d, 0 0 10px #ffe584;
  animation: result-title 620ms cubic-bezier(.18,1.45,.32,1) both;
}

.result-hero {
  height: 330px;
  margin: -8px -20px -36px;
  background: url("../design/ue-ui/assets/original/battle/sharedassets3__victory_knight.png") center / contain no-repeat;
  filter: drop-shadow(0 12px 0 #0b1017) drop-shadow(0 0 18px #ffe88a);
  animation: result-hero-in 720ms 120ms cubic-bezier(.2,1.2,.35,1) both;
}

.result-hero.defeat {
  background-image: url("../design/ue-ui/assets/original/battle/sharedassets3__fail_shield.png");
  filter: grayscale(.35) drop-shadow(0 12px 0 #0b1017) drop-shadow(0 0 16px #c44a5b);
}

.result-copy,
.result-seed {
  display: block;
  text-align: center;
}

.result-rewards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 16px 0;
}

.result-rewards span {
  display: grid;
  min-height: 78px;
  place-items: center;
  padding: 9px 5px;
  border: 4px solid #131527;
  border-radius: 10px;
  color: #ffe96e;
  background: #474158e8;
  box-shadow: inset 0 0 0 2px #756a83, 0 5px 0 #0b0d18;
  font-size: 16px;
  animation: reward-card-in 420ms 420ms ease-out both;
}

.result-rewards strong {
  font-size: 24px;
}

@keyframes result-title {
  from { opacity: 0; transform: translateY(-34px) scale(1.4); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes result-hero-in {
  from { opacity: 0; transform: translateY(38px) scale(.72); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes reward-card-in {
  from { opacity: 0; transform: translateY(22px) scale(.82); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.modal-actions button,
.choice-card,
.shop-offer,
.debug-grid button {
  min-height: 50px;
  border: 3px solid #251a29;
  border-radius: 8px;
  background: linear-gradient(#31b4bd, #19798c);
  box-shadow: inset 0 0 0 2px #7ee1dc, 0 4px 0 #18111b;
  font-weight: 900;
}

.modal-actions button.secondary {
  background: linear-gradient(#6e5a78, #493b51);
  box-shadow: inset 0 0 0 2px #9b849f, 0 4px 0 #18111b;
}

.modal-actions button.danger {
  background: linear-gradient(#d6545c, #8f2b3c);
  box-shadow: inset 0 0 0 2px #ef8b85, 0 4px 0 #281018;
}

.gear-card,
.blessing-card {
  position: relative;
  padding: 16px;
  border: 5px solid var(--quality, #777);
  border-radius: 12px;
  background: #f1e3b9;
  box-shadow: inset 0 0 0 3px #fff8d9, 0 5px 0 #3a2b30;
}

.gear-card .gear-icon,
.blessing-card .blessing-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 4px auto 12px;
  border: 4px solid #2a1d2b;
  border-radius: 10px;
  background: #44344e;
  color: #fff;
  font-size: 38px;
}

.stat-delta.positive { color: #14794f; }
.stat-delta.negative { color: #a6243c; }

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.shop-offer {
  position: relative;
  min-height: 126px;
  padding: 11px 5px 35px;
  border: 3px solid #1a1417;
  border-radius: 0;
  color: #3b2f2b;
  background: #eee8d9;
  box-shadow: inset 0 0 0 2px #fff, 0 4px 0 #20171a;
}

.shop-offer strong,
.shop-offer small {
  display: block;
}

.shop-offer strong { font-size: 12px; }
.shop-offer small { margin-top: 7px; font-size: 9px; }

.shop-offer .price {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  padding: 4px;
  border: 2px solid #a56c16;
  color: #3a2b22;
  background: #f3be3f;
  font-size: 14px;
}

.dig-grid,
.bubble-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin: 12px auto;
}

.dig-cell,
.bubble {
  aspect-ratio: 1;
  border: 3px solid #2e2131;
  border-radius: 5px;
  color: transparent;
  background: #6e6254;
}

.dig-cell.revealed {
  color: #fff0a5;
  background: #423751;
}

.bubble {
  border-radius: 50%;
  color: #fff;
  background: var(--bubble, #5d9ee7);
}

.claw-grid,
.carriage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.capsule,
.carriage {
  min-height: 62px;
  border: 3px solid #2f2331;
  border-radius: 50% 50% 9px 9px;
  color: #2a1d27;
  background: linear-gradient(#6dd6d1 0 48%, #f2d26d 49%);
  font-weight: 900;
}

.third-dice-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0;
}

.third-die {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 5px solid #2a1d2c;
  border-radius: 10px;
  color: #fff;
  background: #614271;
  font-size: 36px;
  font-weight: 900;
}

.third-die.legend {
  color: #3b2510;
  background: linear-gradient(#ffe073, #e99a24);
}

#toast-layer {
  position: absolute;
  z-index: 90;
  top: 14%;
  left: 8%;
  right: 8%;
  pointer-events: none;
}

.toast {
  margin-bottom: 7px;
  padding: 11px 16px;
  border: 3px solid #151019;
  border-radius: 8px;
  color: #fff2ce;
  background: #34283fe8;
  box-shadow: inset 0 0 0 2px #725c80, 0 4px 10px #0007;
  font-weight: 800;
  text-align: center;
  animation: toast 1740ms ease forwards;
}

@keyframes toast {
  0% { opacity: 0; transform: translateY(-10px); }
  12%, 82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

#tutorial-layer {
  position: absolute;
  z-index: 80;
  inset: 0;
  pointer-events: none;
}

.tutorial-bubble {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 368px;
  padding: 16px 18px;
  border: 4px solid #211625;
  border-radius: 12px;
  color: #2e2220;
  background:
    linear-gradient(#f2e2b7dd, #c8a978dd),
    url("../analysis/visual-study/unity-samples/ui/sharedassets3__tutorial_bubble_bg.png") center / cover;
  box-shadow: 0 6px 0 #110d15;
  font-weight: 800;
  text-align: center;
  animation: modal-in 220ms ease;
}

#debug-panel {
  position: absolute;
  z-index: 95;
  top: calc(var(--safe-top) + 44px);
  right: 14px;
  width: min(390px, 88%);
  max-height: calc(100% - 90px);
  padding: 14px;
  overflow: auto;
  color: #eee4f2;
  font-size: 12px;
}

.debug-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 16px;
}

.debug-title button {
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 24px;
}

#debug-panel label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 7px 0;
}

#debug-panel input,
#debug-panel output {
  width: 62%;
  padding: 5px 7px;
  border: 2px solid #17121b;
  border-radius: 4px;
  color: #fff;
  background: #18131d;
  user-select: text;
}

.debug-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
}

.debug-grid button {
  min-height: 38px;
  padding: 4px;
  font-size: 11px;
}

@media (max-height: 700px) {
  #bottom-hud { height: 230px; }
  .play-view { bottom: 230px; }
  #gear-slots { margin: 5px auto; }
  #gear-slots button { height: 43px; }
  .roll-button { height: 62px; }
  .action-row { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 140ms !important;
    transition-duration: 120ms !important;
  }
}