:root {
  color-scheme: dark;
  --ink: #07101d;
  --panel: #101c2d;
  --panel-2: #16253a;
  --line: #314662;
  --cream: #f8f1d3;
  --muted: #aebed1;
  --cyan: #50d9ff;
  --yellow: #ffe06b;
  --red: #ff4d6d;
  --orange: #ff9b43;
  --green: #52e3a2;
  --shadow: 0 16px 50px rgba(0, 0, 0, .34);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Noto Sans KR", sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 50% -20%, rgba(80, 217, 255, .18), transparent 38rem),
    linear-gradient(145deg, #0c1727 0%, #050b14 68%);
  color: var(--cream);
  overflow: hidden;
}

button { font: inherit; }

.loading-screen {
  position: fixed;
  z-index: 999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 45%, rgba(80, 217, 255, .16), transparent 26rem),
    #050b14;
  transition: opacity .28s ease, visibility .28s ease;
}

.loading-screen.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-card { width: min(430px, 100%); padding: 24px; border: 1px solid #395a78; background: #0c192a; box-shadow: 12px 14px 0 #02050a, inset 4px 0 0 var(--cyan); }
.loading-kicker { display: block; color: var(--cyan); font-size: .76rem; letter-spacing: .22em; }
.loading-card strong { display: block; margin-top: 7px; color: var(--cream); font-size: clamp(1.55rem, 5vw, 2.25rem); }
.loading-track { height: 16px; margin-top: 18px; padding: 3px; border: 1px solid #39506b; background: #040912; }
.loading-fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--red), var(--orange), var(--yellow)); transition: width .16s ease; }
.loading-text { display: block; margin-top: 9px; color: var(--muted); font: 800 .78rem/1.3 "Noto Sans KR", sans-serif; }

.game-shell {
  width: 100%;
  max-width: none;
  height: 100dvh;
  min-height: 560px;
  margin: auto;
  padding: 10px clamp(10px, 1.5vw, 22px);
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 2px 10px;
  border-bottom: 2px solid var(--line);
}

.brand-kicker,
.eyebrow {
  color: var(--cyan);
  font-size: .8rem;
  letter-spacing: .2em;
}

h1, h2, p { margin: 0; }

h1 {
  color: var(--yellow);
  font-size: clamp(1.7rem, 2.8vw, 2.8rem);
  line-height: .95;
  letter-spacing: -.04em;
  text-shadow: 4px 4px 0 #7d2139;
}

.top-stats { display: flex; gap: 8px; }

.stat-card {
  min-width: 92px;
  padding: 6px 10px;
  background: rgba(16, 28, 45, .88);
  border: 1px solid var(--line);
  box-shadow: 4px 4px 0 #030711;
}

.stat-card span { display: block; color: var(--muted); font: 700 .7rem/1.2 "Noto Sans KR", sans-serif; }
.stat-card strong { display: block; margin-top: 2px; color: white; font-size: 1.15rem; letter-spacing: .02em; }
.coin-card strong { color: var(--yellow); }
.rebirth-card { border-color: #8e6ac8; background: linear-gradient(145deg, rgba(79, 43, 126, .78), rgba(16, 28, 45, .92)); }
.rebirth-card strong { color: #d9b7ff; }

.game-layout {
  flex: 1;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  min-height: 0;
  padding: 10px 0 0;
}

.panel,
.arena {
  border: 1px solid var(--line);
  background: rgba(16, 28, 45, .92);
  box-shadow: var(--shadow);
}

.panel { min-height: 0; padding: 12px; }
.shop-panel { overflow: hidden; display: flex; flex-direction: column; }
.shop-drawer {
  position: absolute;
  z-index: 20;
  top: 10px;
  bottom: 0;
  left: 0;
  width: min(380px, calc(100% - 62px));
  min-height: 0;
  border-color: #a92e47;
  background: rgba(16, 28, 45, .985);
  box-shadow: 16px 0 45px rgba(0, 0, 0, .46);
  transform: translateX(-100%);
  transition: transform .22s cubic-bezier(.2, .75, .25, 1);
  overflow: visible;
}
.shop-drawer.open { transform: translateX(0); }
.shop-drawer:not(.open) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}
.shop-drawer:not(.open) > :not(.shop-drawer-toggle) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.shop-drawer > :not(.shop-drawer-toggle) { transition: opacity .14s ease, visibility .14s ease; }
.shop-drawer-toggle {
  position: absolute;
  top: 50%;
  right: -48px;
  translate: 0 -50%;
  width: 48px;
  min-height: 142px;
  padding: 12px 8px;
  border: 1px solid #ff7790;
  border-left: 0;
  background: linear-gradient(#ed3156, #a91235);
  color: white;
  cursor: pointer;
  font-size: .95rem;
  letter-spacing: .12em;
  writing-mode: vertical-rl;
  box-shadow: 7px 8px 18px rgba(0, 0, 0, .32);
  pointer-events: auto;
}
.shop-drawer-toggle:hover { background: linear-gradient(#ff4d6d, #c51942); }
.shop-drawer-toggle:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.record-panel { overflow-y: auto; scrollbar-color: #405878 #0a1423; }
.record-drawer {
  position: absolute;
  z-index: 19;
  top: 10px;
  right: 68px;
  bottom: 0;
  width: min(350px, calc(100% - 90px));
  border-color: #4d6686;
  background: rgba(16, 28, 45, .985);
  box-shadow: -16px 0 42px rgba(0, 0, 0, .48);
  transform: translateX(calc(100% + 86px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .22s cubic-bezier(.2, .75, .25, 1), opacity .16s ease, visibility .16s ease;
}
.record-drawer.open { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; }
.panel-close { margin-left: auto; width: 32px; height: 32px; border: 1px solid var(--line); background: #1b2a40; color: white; cursor: pointer; font-size: 1.1rem; }
.panel-close:hover { border-color: var(--cyan); }

.utility-rail {
  position: absolute;
  z-index: 21;
  top: 50%;
  right: 10px;
  display: grid;
  gap: 7px;
  translate: 0 -50%;
}
.utility-button {
  display: grid;
  width: 50px;
  min-height: 58px;
  padding: 7px 4px;
  place-items: center;
  gap: 3px;
  border: 1px solid #4f6683;
  background: rgba(12, 23, 39, .92);
  color: var(--cream);
  cursor: pointer;
  font-size: .72rem;
  box-shadow: 4px 5px 14px rgba(0, 0, 0, .32);
}
.utility-button span { color: var(--cyan); font-size: 1rem; }
.utility-button:hover,
.utility-button[aria-expanded="true"] { border-color: var(--cyan); background: #1b3852; }
.utility-button.skin-toggle { border-color: #8e68bd; background: rgba(53, 34, 78, .94); }
.utility-button.skin-toggle span { color: #d5aaff; }
.utility-button.character-toggle { border-color: #3e9da8; background: rgba(18, 56, 67, .94); }
.utility-button.character-toggle span { color: #73efff; }

.panel-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.panel-heading h2 { font-size: 1.1rem; }

.shop-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 8px;
}

.shop-tab {
  min-height: 34px;
  border: 1px solid var(--line);
  background: #0b1626;
  color: var(--muted);
  cursor: pointer;
  font-size: .83rem;
}

.shop-tab.active { border-color: var(--cyan); background: #1a344d; color: white; box-shadow: inset 0 -3px 0 var(--cyan); }
.shop-tab:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.shop-page { display: none; min-height: 0; overflow-y: auto; padding-right: 3px; scrollbar-color: #405878 #0a1423; }
.shop-page.active { display: block; flex: 1; }

.weapon-list,
.upgrade-list,
.automation-list,
.skin-list,
.prestige-list { display: grid; gap: 7px; margin-top: 8px; }

.weapon-card,
.upgrade-card,
.automation-card {
  width: 100%;
  min-height: 64px;
  padding: 9px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel-2);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.weapon-card:hover,
.upgrade-card:hover,
.automation-card:hover { transform: translateY(-2px); border-color: var(--cyan); }
.weapon-card:focus-visible,
.upgrade-card:focus-visible,
.automation-card:focus-visible,
.prestige-card:focus-visible,
.skin-actions button:focus-visible,
.skin-toggle:focus-visible,
.utility-button:focus-visible,
.panel-close:focus-visible,
.skin-menu-heading button:focus-visible,
.small-button:focus-visible,
#rageButton:focus-visible,
#loopButton:focus-visible,
.hit-stage:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.weapon-card.selected { border-color: var(--yellow); background: #28334a; box-shadow: inset 4px 0 0 var(--yellow); }
.weapon-card.locked { filter: saturate(.7); }

.weapon-icon,
.upgrade-icon,
.automation-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  background: #0a1423;
  border: 1px solid #3a506f;
  font-family: "Segoe UI Emoji", sans-serif;
  font-size: 1.25rem;
}

.weapon-copy,
.upgrade-copy,
.automation-copy { min-width: 0; }
.weapon-copy strong,
.upgrade-copy strong,
.automation-copy strong { display: block; font-size: .9rem; }
.weapon-copy small,
.upgrade-copy small,
.automation-copy small { color: var(--muted); font: 700 .72rem/1.3 "Noto Sans KR", sans-serif; }
.weapon-copy strong b { color: #ffe06b; font: 1000 .68rem/1 var(--number-font, "Arial Black"), sans-serif; white-space: nowrap; }
.weapon-copy em { display: block; margin-top: 3px; color: #73e6ff; font: 900 .63rem/1.2 "Noto Sans KR", sans-serif; font-style: normal; }
.price { color: var(--yellow); font-size: .8rem; white-space: nowrap; }
.price small { display: block; margin-bottom: 3px; color: #98a9ba; font: 900 .52rem/1 "Noto Sans KR", sans-serif; letter-spacing: .04em; }
.weapon-card { cursor: default; }
.weapon-actions { display: grid; min-width: 78px; gap: 4px; }
.weapon-action {
  min-height: 29px;
  padding: 5px 7px;
  border: 1px solid #80663a;
  background: linear-gradient(180deg, #342915, #18120a);
  color: #ffe06b;
  cursor: pointer;
  font: 1000 .7rem/1 var(--number-font, "Arial Black"), "Noto Sans KR", sans-serif;
  text-shadow: 1px 1px 0 #05070b;
}
.weapon-action small { display: block; margin-bottom: 3px; color: #aeb9c7; font: 900 .48rem/1 "Noto Sans KR", sans-serif; }
.weapon-equip { border-color: #4a7788; background: linear-gradient(180deg, #173747, #0c202b); color: #8beaff; }
.weapon-level-up { border-color: #b6882e; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .35); }
.weapon-action:hover { border-color: #ffe06b; filter: brightness(1.14); }
.weapon-action:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.upgrade-card { border-color: #675c34; background: #2c2a28; }
.automation-card { border-color: #385b66; background: #132d39; }
.upgrade-card:disabled { opacity: .72; cursor: default; }
.shop-summary-row { display: grid; gap: 6px; }
.auto-summary { display: flex; justify-content: space-between; margin-top: 8px; padding: 8px; background: #0a1423; border-left: 4px solid var(--green); font-size: .78rem; }
.auto-summary span { color: var(--muted); }
.auto-summary em { color: #86f7d0; font: 900 .68rem/1.2 "Noto Sans KR", sans-serif; font-style: normal; }
.auto-summary em b { color: #ffe06b; font-family: var(--number-font, "Arial Black"), sans-serif; }
.auto-summary strong { color: var(--green); }
.bulk-buy-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 5px 6px 5px 9px;
  border: 2px solid #5d4f39;
  background: linear-gradient(180deg, #171d29, #090d14);
  box-shadow: 3px 3px 0 #030509;
  color: #aab8c6;
  font: 900 .66rem/1 "Noto Sans KR", sans-serif;
}
.bulk-buy-bar > div { display: grid; grid-template-columns: repeat(2, 52px); gap: 4px; }
.bulk-buy-bar button {
  min-height: 30px;
  border: 2px solid #50493d;
  background: #111925;
  color: #aeb9c7;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 #05070a;
  font: 1000 .78rem/1 "Noto Sans KR", sans-serif;
}
.bulk-buy-bar button:hover { border-color: #7bdbe6; color: white; }
.bulk-buy-bar button.active {
  border-color: #ffe06b;
  background: linear-gradient(180deg, #c33a55, #6d1d32);
  color: #fff4bd;
  box-shadow: inset 0 -3px 0 #2b0911, 0 0 0 1px rgba(255, 224, 107, .15);
}
.bulk-buy-bar button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
.prestige-summary { display: flex; justify-content: space-between; margin-top: 8px; padding: 9px; background: #171126; border-left: 4px solid #b879ff; font: 800 .78rem/1.2 "Noto Sans KR", sans-serif; }
.prestige-summary span { color: #cfc0e8; }
.prestige-summary strong { color: #ddbaff; }
.prestige-card {
  width: 100%;
  min-height: 64px;
  padding: 9px;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #6f5298;
  background: linear-gradient(135deg, #2d1d46, #171c32);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
}
.prestige-card:hover:not(:disabled) { border-color: #d5aaff; transform: translateY(-2px); }
.prestige-card:disabled { opacity: .68; cursor: default; }
.prestige-icon { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid #8b65bd; background: #110c1c; color: #d7acff; font-size: 1.2rem; }
.prestige-copy { min-width: 0; }
.prestige-copy strong { display: block; font-size: .9rem; }
.prestige-copy small { color: #c7b4df; font: 700 .72rem/1.3 "Noto Sans KR", sans-serif; }
.prestige-price { color: #ddbaff; font-size: .8rem; white-space: nowrap; }
.rebirth-tab.active { border-color: #b879ff; background: #34204d; box-shadow: inset 0 -3px 0 #b879ff; }
.arena {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(#152c46 0 58%, #0b1727 58%);
}

.arena::before {
  content: "";
  position: absolute;
  inset: 58% 0 auto;
  height: 5px;
  background: var(--cyan);
  box-shadow: 0 0 20px var(--cyan);
  opacity: .55;
}

.arena-grid {
  position: absolute;
  inset: 58% 0 0;
  background-image:
    linear-gradient(rgba(80, 217, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(80, 217, 255, .12) 1px, transparent 1px);
  background-size: 42px 42px;
  transform: perspective(320px) rotateX(55deg) scale(1.35);
  transform-origin: top;
}

.boss-header {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: auto minmax(320px, 900px) auto;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 34px);
  padding: 9px 74px 8px 16px;
  background: linear-gradient(180deg, rgba(7, 16, 29, .74), rgba(7, 16, 29, .18));
}

.boss-header h2 { margin-top: 2px; font-size: clamp(1.25rem, 1.7vw, 1.75rem); }
.boss-header b { color: var(--yellow); }
.boss-status { display: flex; flex-direction: column; align-items: end; gap: 5px; }
.mood-badge { padding: 4px 9px; background: var(--yellow); color: var(--ink); font: 900 .72rem/1 "Noto Sans KR", sans-serif; transform: skew(-5deg); }
.damage-readout { padding: 7px 10px; border: 1px solid var(--line); color: var(--yellow); background: #0c1727; font-size: .9rem; }

.skin-menu {
  position: absolute;
  z-index: 18;
  top: 74px;
  right: 68px;
  width: min(370px, calc(100% - 28px));
  max-height: calc(100% - 128px);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid #9b70cf;
  background: rgba(17, 20, 38, .97);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .52), inset 4px 0 0 #9d61eb;
  scrollbar-color: #7854a5 #130e20;
}
.skin-menu[hidden] { display: none; }
.skin-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 9px; border-bottom: 1px solid #5f487c; }
.skin-menu-heading strong { display: block; color: #eddcff; font-size: 1.05rem; }
.skin-menu-heading small { display: block; margin-top: 3px; color: #bba9ce; font: 700 .7rem/1.2 "Noto Sans KR", sans-serif; }
.skin-menu-heading button { width: 32px; height: 32px; border: 1px solid #74599b; background: #2b203b; color: white; cursor: pointer; font-size: 1.15rem; }
.skin-menu .skin-list { grid-template-columns: 1fr; }
.skin-menu .skin-card {
  display: grid;
  grid-template-columns: 66px 1fr;
  align-items: center;
  gap: 8px;
  min-height: 82px;
  padding: 9px;
  border: 1px solid #5f4b7d;
  background: linear-gradient(135deg, #211d35, #172439);
}
.skin-menu .skin-card.selected { border-color: var(--yellow); box-shadow: inset 4px 0 0 var(--yellow); }
.skin-menu .skin-card.locked { filter: saturate(.78); }
.character-menu { border-color: #42b9c7; box-shadow: 0 18px 44px rgba(0, 0, 0, .52), inset 4px 0 0 #3ec3d0; }
.character-menu .skin-menu-heading { border-bottom-color: #386d78; }
.character-menu .skin-menu-heading strong { color: #baf8ff; }
.character-card { min-height: 104px !important; }
.character-icon { height: 82px; border-color: #408b99; }
.skin-icon {
  position: relative;
  display: block;
  width: 64px;
  height: 68px;
  overflow: hidden;
  border: 1px solid #715a92;
  background-color: #100d1b;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 400% auto;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .04), 3px 4px 0 rgba(0, 0, 0, .32);
}
.skin-icon i { position: absolute; right: 2px; bottom: 2px; display: grid; width: 23px; height: 23px; place-items: center; background: #111527; border: 1px solid #8b70a8; font: 1rem/1 "Segoe UI Emoji", sans-serif; font-style: normal; }
.skin-copy { min-width: 0; }
.skin-copy strong { display: block; font-size: .9rem; }
.skin-copy small { display: block; color: #bba9ce; font: 700 .7rem/1.25 "Noto Sans KR", sans-serif; }
.skin-copy em { display: block; margin-top: 4px; color: #ffe58a; font: 900 .68rem/1.25 "Noto Sans KR", sans-serif; font-style: normal; }
.skin-rarity { display: inline-block; margin-bottom: 3px; color: #aeb9cc; font: 900 .62rem/1 "Noto Sans KR", sans-serif; letter-spacing: .08em; }
.skin-card.rarity-고급 .skin-rarity { color: #72e5ad; }
.skin-card.rarity-괴짜 .skin-rarity { color: #ff8db5; }
.skin-card.rarity-희귀 .skin-rarity { color: #69d9ff; }
.skin-card.rarity-영웅 .skin-rarity { color: #c18bff; }
.skin-card.rarity-전설 .skin-rarity { color: #ffd95d; text-shadow: 0 0 8px rgba(255, 198, 56, .55); }
.skin-card.rarity-전설 { background: linear-gradient(135deg, #342514, #231b32); border-color: #a37b2a; }
.skin-card.rarity-신화 { background: linear-gradient(135deg, #4b2a08, #3b1539 55%, #111c37); border-color: #ffcf45; box-shadow: inset 0 0 24px rgba(255, 184, 44, .1); }
.skin-card.rarity-신화 .skin-rarity { color: #fff09a; text-shadow: 0 0 5px #ff9d00, 0 0 12px #ff4f9a; }
.skin-card.rarity-초월 { background: linear-gradient(135deg, #082d38, #19234b 52%, #3b174b); border-color: #4ce9ff; box-shadow: inset 0 0 28px rgba(76, 233, 255, .13); }
.skin-card.rarity-초월 .skin-rarity { color: #8cf6ff; text-shadow: 0 0 6px #20bce8, 0 0 14px #8157ff; }
.skin-card.rarity-절대 { background: linear-gradient(135deg, #55250b, #722514 46%, #32134f); border-color: #ff8a32; box-shadow: inset 0 0 30px rgba(255, 116, 35, .18), 0 0 14px rgba(255, 126, 38, .16); }
.skin-card.rarity-절대 .skin-rarity { color: #fff0a4; text-shadow: 0 0 5px #ff8a1e, 0 0 13px #ff3b8d; }
.skin-menu-heading small b { color: #ffe264; }
.skin-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.skin-actions button { min-height: 34px; border: 1px solid #66527e; color: white; cursor: pointer; font-size: .75rem; }
.skin-actions button:disabled { cursor: default; opacity: .7; }
.skin-equip { grid-column: 1 / -1; background: #44305e; }
.skin-buy.coin-buy { background: #64511c; border-color: #a98a2e; color: #fff2ad; }
.skin-buy.rebirth-buy { background: #603696; border-color: #b37bed; color: #f0dcff; }

.health-wrap { position: relative; z-index: 3; width: 100%; max-width: 900px; padding: 0; }
.health-meta,
.rage-meta { display: flex; justify-content: space-between; margin-bottom: 5px; font: 800 .78rem/1.2 "Noto Sans KR", sans-serif; }
.health-meta span,
.rage-meta span { color: var(--muted); }
.health-track,
.rage-track { height: 18px; padding: 3px; background: #070d17; border: 1px solid #3b4d67; }
.health-fill,
.rage-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #e9345a, var(--red), var(--orange)); transition: width .14s ease; }

.hit-stage {
  position: absolute;
  z-index: 2;
  inset: 78px 0 92px;
  overflow: hidden;
  cursor: crosshair;
  touch-action: manipulation;
  user-select: none;
}

.hit-stage.slap-mode { cursor: grabbing; }
.hit-stage.slap-mode::after {
  content: "싸대기 모드 · 계속 흔드세요!";
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 18px;
  translate: -50% 0;
  padding: 8px 13px;
  border: 2px solid #ffe06b;
  background: rgba(126, 19, 45, .94);
  color: #fff4b8;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .45);
  font: 1000 .82rem/1 "Noto Sans KR", sans-serif;
  letter-spacing: .04em;
  pointer-events: none;
  animation: slap-mode-pulse .45s steps(2, end) infinite;
}

.target-ring {
  position: absolute;
  width: min(58vw, 520px);
  aspect-ratio: 1;
  left: 50%;
  bottom: -24%;
  translate: -50% 0;
  border: 2px solid rgba(80, 217, 255, .28);
  border-radius: 50%;
  box-shadow: 0 0 0 22px rgba(80, 217, 255, .04), 0 0 0 60px rgba(80, 217, 255, .025);
}

.boss-sprite {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: auto;
  height: min(100%, 680px);
  aspect-ratio: var(--health-ratio, 1962 / 3204);
  translate: -50% 0;
  background-image: var(--health-sprite, url("./assets/sam-boss-health-sprites.png"));
  background-repeat: no-repeat;
  background-size: 400% auto;
  background-position: left center;
  image-rendering: auto;
  filter: drop-shadow(0 22px 20px rgba(0, 0, 0, .46));
  transform-origin: 50% 75%;
  transition: filter .08s ease;
  pointer-events: none;
}

.boss-sprite.health-calm { background-position: 0 center; }
.boss-sprite.health-annoyed { background-position: 33.333% center; }
.boss-sprite.health-frazzled { background-position: 66.667% center; }
.boss-sprite.health-meltdown { background-position: 100% center; }
.boss-sprite.react-left,
.boss-sprite.react-right,
.boss-sprite.react-up,
.boss-sprite.react-ko {
  aspect-ratio: var(--reaction-ratio, 1942 / 3236);
  background-image: var(--reaction-sprite, url("./assets/sam-boss-reaction-sprites.png"));
  background-size: 400% auto;
}
.boss-sprite.react-left { background-position: 0 center; animation: bonk-left .18s ease-out; }
.boss-sprite.react-right { background-position: 33.333% center; animation: bonk-right .18s ease-out; }
.boss-sprite.react-up { background-position: 66.667% center; animation: bounce-hit .28s ease-out; }
.boss-sprite.react-ko { background-position: 100% center; animation: dizzy .62s ease-in-out; }
.boss-sprite.raging { filter: drop-shadow(0 0 22px rgba(255, 77, 109, .85)) saturate(1.35); }

.paint-splash {
  position: absolute;
  z-index: 8;
  left: var(--paint-x);
  top: var(--paint-y);
  width: 72px;
  height: 72px;
  translate: -50% -50%;
  border-radius: 45% 55% 38% 62% / 58% 38% 62% 42%;
  background: currentColor;
  box-shadow: -42px 5px 0 -25px currentColor, 38px -18px 0 -27px currentColor, 28px 34px 0 -29px currentColor, -25px -34px 0 -30px currentColor;
  filter: drop-shadow(3px 4px 0 #10172a);
  animation: paint-pop .52s ease-out forwards;
  pointer-events: none;
}
.paint-splash.magenta { color: #ff16c9; }
.paint-splash.cyan { color: #10d8ff; }

.weapon-fx-layer {
  position: absolute;
  z-index: 7;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.weapon-fx {
  position: absolute;
  left: var(--fx-x, 50%);
  top: var(--fx-y, 46%);
  display: grid;
  place-items: center;
  width: 240px;
  height: 240px;
  translate: -50% -50%;
  font: 10rem/1 "Segoe UI Emoji", sans-serif;
  filter: drop-shadow(12px 16px 0 rgba(0, 0, 0, .32));
  transform-origin: 50% 80%;
}

.fx-fist { animation: fx-jab .25s cubic-bezier(.1, .8, .2, 1) forwards; }
.fx-slap { animation: fx-hand-right .25s cubic-bezier(.12, .86, .22, 1) forwards; }
.fx-slap.slap-left { animation-name: fx-hand-left; }
.fx-slipper { animation: fx-slap .34s ease-out forwards; }
.fx-hammer { animation: fx-hammer .38s cubic-bezier(.15, .8, .35, 1) forwards; }
.fx-keyboard { animation: fx-keyboard .4s ease-in forwards; }
.fx-chicken { animation: fx-chicken .48s ease-out forwards; }
.fx-pan { animation: fx-pan .44s ease-out forwards; }
.fx-chair { animation: fx-chair .48s cubic-bezier(.2, .9, .2, 1) forwards; }
.fx-foam { animation: fx-foam .35s ease-out forwards; }
.fx-cursor { animation: fx-cursor .32s ease-out forwards; }
.fx-laser { width: 560px; color: var(--cyan); font-size: 7rem; animation: fx-laser .28s ease-out forwards; }
.fx-pie { animation: fx-pie .46s ease-out forwards; }
.fx-meteor { font-size: 12rem; animation: fx-meteor .62s cubic-bezier(.25, .9, .3, 1) forwards; }
.fx-megaphone { animation: fx-megaphone .46s ease-out forwards; }
.fx-printer { animation: fx-printer .5s cubic-bezier(.2, .85, .25, 1) forwards; }
.fx-briefcase { animation: fx-briefcase .48s cubic-bezier(.15, .8, .3, 1) forwards; }
.fx-server { animation: fx-server .52s cubic-bezier(.12, .82, .22, 1) forwards; }
.fx-satellite { animation: fx-satellite .62s ease-out forwards; }
.fx-blackhole { font-size: 12rem; animation: fx-blackhole .68s cubic-bezier(.18, .75, .25, 1) forwards; }
.weapon-fx.fx-auto {
  z-index: 10;
  width: 150px;
  height: 150px;
  font-size: 6rem;
  opacity: .96;
  filter: drop-shadow(8px 10px 0 rgba(0, 0, 0, .42)) drop-shadow(0 0 18px var(--auto-color));
  animation: fx-auto-heavy .62s cubic-bezier(.12, .82, .22, 1) forwards;
}
.auto-impact-ring {
  position: absolute;
  z-index: 9;
  left: var(--fx-x, 50%);
  top: var(--fx-y, 46%);
  width: 58px;
  height: 58px;
  translate: -50% -50%;
  border: 7px solid var(--auto-color, #56dfff);
  border-radius: 50%;
  box-shadow: 0 0 20px var(--auto-color, #56dfff), inset 0 0 16px var(--auto-color, #56dfff);
  pointer-events: none;
  animation: auto-ring .58s ease-out forwards;
}
.auto-spark {
  position: absolute;
  z-index: 11;
  left: var(--spark-x, 50%);
  top: var(--spark-y, 46%);
  min-width: 22px;
  padding: 3px 5px;
  border: 1px solid color-mix(in srgb, var(--auto-color) 80%, white);
  background: #08111f;
  color: var(--auto-color, #56dfff);
  box-shadow: 0 0 10px color-mix(in srgb, var(--auto-color) 70%, transparent);
  font: 1000 .74rem/1 "Noto Sans KR", monospace;
  text-align: center;
  pointer-events: none;
  animation: auto-spark-fly .7s cubic-bezier(.12, .72, .22, 1) forwards;
}

.weapon-debris {
  position: absolute;
  z-index: 8;
  left: var(--debris-x, 50%);
  top: var(--debris-y, 46%);
  display: grid;
  place-items: center;
  min-width: 18px;
  min-height: 18px;
  color: var(--yellow);
  font: 1000 1.35rem/1 "Noto Sans KR", sans-serif;
  text-shadow: 2px 2px 0 #121827;
  pointer-events: none;
  animation: debris-fly var(--debris-duration, 620ms) cubic-bezier(.12, .7, .22, 1) var(--debris-delay, 0ms) forwards;
}

.debris-fist { color: #fff0a3; font-size: 1.65rem; }
.debris-slap { color: #fff0a3; font-size: 1.4rem; filter: drop-shadow(0 0 6px #ff5577); }
.debris-slipper { color: #d9c59d; filter: drop-shadow(0 0 5px rgba(255, 243, 195, .45)); }
.debris-hammer { color: #ff66c4; font-size: 1.75rem; }
.debris-keyboard {
  min-width: 29px;
  min-height: 27px;
  padding: 4px 6px;
  border: 2px solid #e9edf5;
  border-radius: 5px;
  background: #202838;
  color: #fff;
  box-shadow: inset 0 -4px 0 #080d16, 3px 5px 0 rgba(0, 0, 0, .35);
  font: 1000 .72rem/1 monospace;
  text-shadow: none;
}
.debris-chicken { color: #fff8d6; font-size: 1.8rem; filter: drop-shadow(2px 3px 0 #e5a132); }
.debris-pan { color: #ffe566; font-size: 1.75rem; filter: drop-shadow(0 0 7px #ff8a3d); }
.debris-chair { color: #b9c7d9; filter: drop-shadow(2px 3px 0 #38465b); }
.debris-foam { color: #55f3ff; font-size: 1.8rem; filter: drop-shadow(0 0 7px #8a5cff); }
.debris-cursor { color: #fff; padding: 2px; background: #192238; border: 1px solid #6df3ff; font-size: .9rem; }
.debris-laser { color: #56f7ff; font-size: 1.7rem; filter: drop-shadow(0 0 8px #29c8ff); }
.debris-pie { color: #fff3dc; font-size: 1.8rem; filter: drop-shadow(2px 3px 0 #ff69ae); }
.debris-meteor { color: #ff8b3d; font-size: 1.65rem; filter: drop-shadow(0 0 8px #ff3b30); }
.debris-megaphone { color: #ffe066; font-size: 1.4rem; filter: drop-shadow(0 0 8px #ff4d6d); }
.debris-printer { min-width: 28px; padding: 4px; background: #f1f4f8; color: #1b263b; border: 1px solid #9fb2c9; font: 1000 .65rem/1 monospace; text-shadow: none; }
.debris-briefcase { color: #d6ad62; padding: 3px; background: #352619; border: 1px solid #c4964b; font-size: .9rem; }
.debris-server { color: #6df3ff; padding: 3px; background: #0a1423; border: 1px solid #426985; font: 1000 .68rem/1 monospace; text-shadow: 0 0 6px #19cfe5; }
.debris-satellite { color: #eaf6ff; font-size: 1.7rem; filter: drop-shadow(0 0 8px #6da7ff); }
.debris-blackhole { color: #bb7bff; font-size: 1.8rem; filter: drop-shadow(0 0 10px #6d28d9); }

@keyframes fx-jab { 0% { opacity: 0; transform: translate(140px, 80px) scale(1.5); } 55% { opacity: 1; transform: translate(0, 0) scale(.88); } 100% { opacity: 0; transform: translate(22px, 15px) scale(1.18); } }
@keyframes fx-hand-right { 0% { opacity: 0; transform: translate(-190px, 30px) rotate(-58deg) scale(1.2); } 58% { opacity: 1; transform: translate(0, 0) rotate(16deg) scale(.95); } 100% { opacity: 0; transform: translate(75px, 6px) rotate(42deg) scale(1.08); } }
@keyframes fx-hand-left { 0% { opacity: 0; transform: translate(190px, 30px) rotate(58deg) scale(-1.2, 1.2); } 58% { opacity: 1; transform: translate(0, 0) rotate(-16deg) scale(-.95, .95); } 100% { opacity: 0; transform: translate(-75px, 6px) rotate(-42deg) scale(-1.08, 1.08); } }
@keyframes fx-slap { 0% { opacity: 0; transform: translate(-180px, -20px) rotate(-65deg); } 52% { opacity: 1; transform: translate(0, 0) rotate(18deg); } 100% { opacity: 0; transform: translate(70px, 12px) rotate(56deg); } }
@keyframes fx-hammer { 0% { opacity: 0; transform: translate(80px, -180px) rotate(75deg) scale(1.25); } 65% { opacity: 1; transform: translate(0, 0) rotate(-35deg) scale(.95); } 100% { opacity: 0; transform: translate(-12px, 20px) rotate(-22deg); } }
@keyframes fx-keyboard { 0% { opacity: 0; transform: translateY(-220px) rotate(-20deg) scale(1.3); } 70% { opacity: 1; transform: translateY(0) rotate(8deg) scale(1); } 100% { opacity: 0; transform: translateY(40px) rotate(14deg) scale(.9); } }
@keyframes fx-chicken { 0% { opacity: 0; transform: translate(-180px, 90px) rotate(-28deg); } 45% { opacity: 1; transform: translate(0, 0) rotate(8deg); } 70% { transform: translate(-28px, -12px) rotate(-9deg); } 100% { opacity: 0; transform: translate(55px, -5px) rotate(20deg); } }
@keyframes fx-pan { 0% { opacity: 0; transform: translate(170px, -90px) rotate(0) scale(1.2); } 65% { opacity: 1; transform: translate(0, 0) rotate(-380deg) scale(.95); } 100% { opacity: 0; transform: translate(-35px, 20px) rotate(-430deg) scale(.8); } }
@keyframes fx-chair { 0% { opacity: 0; transform: translate(-250px, 50px) rotate(-16deg) scale(1.35); } 64% { opacity: 1; transform: translate(0, 0) rotate(7deg) scale(1); } 100% { opacity: 0; transform: translate(45px, 30px) rotate(13deg) scale(.85); } }
@keyframes fx-foam { 0% { opacity: 0; transform: translate(120px, 120px) rotate(58deg) scale(1.25); } 55% { opacity: 1; transform: translate(0, 0) rotate(-52deg) scale(1); } 100% { opacity: 0; transform: translate(-90px, -80px) rotate(-70deg) scale(.8); } }
@keyframes fx-cursor { 0% { opacity: 0; transform: translate(140px, 100px) scale(2); } 60% { opacity: 1; transform: translate(0, 0) scale(.8); } 76% { transform: scale(1.3); } 100% { opacity: 0; transform: scale(.9); } }
@keyframes fx-laser { 0% { opacity: 0; transform: translateX(-380px) scaleX(.1); } 45% { opacity: 1; transform: translateX(-35px) scaleX(1.35); } 100% { opacity: 0; transform: translateX(120px) scaleX(.5); } }
@keyframes fx-pie { 0% { opacity: 0; transform: translate(210px, -140px) rotate(220deg) scale(.5); } 66% { opacity: 1; transform: translate(0, 0) rotate(360deg) scale(1.3); } 100% { opacity: 0; transform: scale(1.8); filter: blur(3px); } }
@keyframes fx-meteor { 0% { opacity: 0; transform: translate(180px, -350px) rotate(25deg) scale(1.8); } 70% { opacity: 1; transform: translate(0, 0) rotate(-8deg) scale(.9); } 100% { opacity: 0; transform: translateY(70px) scale(1.6); filter: brightness(1.8); } }
@keyframes fx-megaphone { 0% { opacity: 0; transform: translate(-220px, 50px) rotate(-28deg) scale(1.25); } 48% { opacity: 1; transform: translate(0, 0) rotate(8deg) scale(.92); } 68% { transform: translate(-12px, 0) rotate(-5deg) scale(1.08); } 100% { opacity: 0; transform: translate(45px, 0) rotate(12deg) scale(.9); } }
@keyframes fx-printer { 0% { opacity: 0; transform: translateY(-280px) rotate(-8deg) scale(1.3); } 66% { opacity: 1; transform: translateY(0) rotate(5deg) scale(.96); } 82% { transform: translateY(-18px) rotate(-3deg) scale(1.05); } 100% { opacity: 0; transform: translateY(45px) rotate(6deg) scale(.88); } }
@keyframes fx-briefcase { 0% { opacity: 0; transform: translate(210px, 150px) rotate(85deg) scale(1.35); } 62% { opacity: 1; transform: translate(0, 0) rotate(-28deg) scale(.95); } 100% { opacity: 0; transform: translate(-55px, 30px) rotate(-52deg) scale(.82); } }
@keyframes fx-server { 0% { opacity: 0; transform: translate(260px, -80px) rotate(16deg) scale(1.2); } 65% { opacity: 1; transform: translate(0, 0) rotate(-4deg) scale(.96); } 82% { transform: translate(12px, -8px) rotate(3deg) scale(1.04); } 100% { opacity: 0; transform: translateY(55px) scale(.88); } }
@keyframes fx-satellite { 0% { opacity: 0; transform: translate(-260px, -270px) rotate(-90deg) scale(.7); } 58% { opacity: 1; transform: translate(0, 0) rotate(28deg) scale(1); } 76% { transform: translate(35px, -22px) rotate(65deg) scale(1.12); } 100% { opacity: 0; transform: translate(180px, 90px) rotate(125deg) scale(.7); } }
@keyframes fx-blackhole { 0% { opacity: 0; transform: rotate(-220deg) scale(.05); filter: blur(10px) drop-shadow(0 0 40px #8b5cf6); } 52% { opacity: 1; transform: rotate(15deg) scale(1.05); filter: blur(0) drop-shadow(0 0 25px #8b5cf6); } 78% { opacity: .9; transform: rotate(80deg) scale(.72); } 100% { opacity: 0; transform: rotate(210deg) scale(2.1); filter: blur(5px) drop-shadow(0 0 50px #5b21b6); } }
@keyframes fx-auto { 0% { opacity: 0; transform: translate(80px, -50px) scale(.5); } 45% { opacity: .9; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(-20px, 20px) scale(.75); } }
@keyframes fx-auto-heavy {
  0% { opacity: 0; transform: translate(150px, -105px) rotate(26deg) scale(.55); }
  58% { opacity: 1; transform: translate(0, 0) rotate(-11deg) scale(1.12); }
  74% { transform: translate(-8px, 7px) rotate(6deg) scale(.94); }
  100% { opacity: 0; transform: translate(-48px, 34px) rotate(-18deg) scale(.78); }
}
@keyframes auto-ring {
  0% { opacity: .95; transform: scale(.25); }
  75% { opacity: .62; }
  100% { opacity: 0; transform: scale(4.2); border-width: 2px; }
}
@keyframes auto-spark-fly {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.4); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--spark-dx)), calc(-50% + var(--spark-dy))) rotate(var(--spark-spin)) scale(1.05); }
}
@keyframes debris-fly {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.3); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--debris-dx)), calc(-50% + var(--debris-dy))) rotate(var(--debris-spin)) scale(var(--debris-scale)); }
}
@keyframes paint-pop { 0% { opacity: 0; transform: scale(.15) rotate(-20deg); } 35% { opacity: .95; transform: scale(1.15) rotate(9deg); } 100% { opacity: 0; transform: scale(1.55) rotate(16deg); filter: blur(1px); } }
@keyframes bounce-hit { 45% { transform: translateY(-24px) scale(1.04); } 100% { transform: translateY(0); } }
@keyframes slap-mode-pulse { 50% { filter: brightness(1.24); } }

.tap-prompt {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 10px;
  translate: -50% 0;
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
  padding: 6px 10px;
  color: var(--muted);
  background: rgba(7, 16, 29, .78);
  border: 1px solid var(--line);
  font: 800 .76rem/1 "Noto Sans KR", sans-serif;
  pointer-events: none;
}

kbd { padding: 4px 7px; background: var(--cream); color: var(--ink); box-shadow: 0 3px 0 #908b76; font: 900 .7rem/1 monospace; }

.hit-pop {
  position: absolute;
  z-index: 9;
  translate: -50% -50%;
  color: var(--yellow);
  font-size: clamp(1.15rem, 2.8vw, 2.4rem);
  text-shadow: 2px 2px 0 #9a1739, -1px -1px 0 #111;
  animation: pop-away .58s ease-out forwards;
  pointer-events: none;
}

.coin-pop {
  position: absolute;
  z-index: 8;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--yellow);
  border: 3px solid #be7b19;
  box-shadow: inset 0 0 0 2px #fff3ad;
  animation: coin-fly .65s ease-out forwards;
  pointer-events: none;
}

.skin-bonus-particle {
  position: absolute;
  z-index: 11;
  translate: -50% -50%;
  color: #ffe36b;
  font: 1000 1.05rem/1 "Arial Black", "Noto Sans KR", sans-serif;
  text-shadow: 2px 2px 0 #6f3510, 0 0 9px currentColor;
  animation: skin-bonus-fly .82s cubic-bezier(.12,.74,.22,1) forwards;
  pointer-events: none;
}
.skin-bonus-sun { color: #fff08a; }
.skin-bonus-roar { color: #8cff72; text-shadow: 2px 2px 0 #16451f, 0 0 10px #72ff8f; }
.skin-bonus-gold { color: #ffd83d; font-size: 1.18rem; }
.skin-bonus-coffee { color: #ffb968; text-shadow: 2px 2px 0 #4f2815, 0 0 10px #ff8a3d; }
.skin-bonus-cleanroom { color: #d6ff43; text-shadow: 2px 2px 0 #30440b, 0 0 11px #8cff28; }
.skin-bonus-neural { color: #63efff; text-shadow: 2px 2px 0 #132b73, 0 0 12px #4b8cff; }

.amodei-impact-ring,
.amodei-impact-core,
.amodei-glass-shard,
.amodei-impact-word,
.amodei-overload-flash {
  position: absolute;
  pointer-events: none;
}
.amodei-impact-ring {
  z-index: 13;
  left: var(--impact-x);
  top: var(--impact-y);
  width: 72px;
  height: 72px;
  translate: -50% -50%;
  border: 5px solid #5cf4ff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #17294b, 0 0 25px rgba(66, 235, 255, .92), inset 0 0 16px rgba(91, 244, 255, .7);
  animation: amodei-ring-pop .38s cubic-bezier(.1,.72,.2,1) forwards;
}
.amodei-impact-ring::before,
.amodei-impact-ring::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 3px dashed #ff9d42;
  border-radius: 50%;
  rotate: 18deg;
}
.amodei-impact-ring::after { inset: -17px; border-color: rgba(102, 236, 255, .62); rotate: -24deg; }
.amodei-impact-ring.critical { width: 112px; height: 112px; border-width: 8px; box-shadow: 0 0 0 5px #ff8636, 0 0 46px #44eaff, inset 0 0 28px #ff9d42; }
.amodei-impact-ring.ko { width: 154px; height: 154px; border-width: 10px; box-shadow: 0 0 0 7px #ff4d6d, 0 0 70px #50efff, inset 0 0 38px #ff813f; }
.amodei-impact-core {
  z-index: 14;
  left: var(--impact-x);
  top: var(--impact-y);
  width: 66px;
  height: 66px;
  translate: -50% -50%;
  background: conic-gradient(from 45deg, transparent 0 9%, #fff 10% 14%, transparent 15% 24%, #ff8d40 25% 31%, transparent 32% 45%, #5cf4ff 46% 53%, transparent 54% 72%, #fff 73% 78%, transparent 79%);
  clip-path: polygon(50% 0, 61% 35%, 100% 23%, 69% 50%, 100% 76%, 62% 65%, 50% 100%, 39% 65%, 0 78%, 31% 50%, 0 23%, 39% 35%);
  filter: drop-shadow(0 0 10px #68f5ff);
  animation: amodei-core-pop .3s steps(3, end) forwards;
}
.amodei-impact-core.critical { width: 102px; height: 102px; }
.amodei-impact-core.ko { width: 138px; height: 138px; }
.amodei-glass-shard {
  z-index: 15;
  left: var(--impact-x);
  top: var(--impact-y);
  min-width: 20px;
  padding: 2px 4px;
  translate: -50% -50%;
  border: 1px solid rgba(172, 248, 255, .9);
  background: rgba(7, 27, 48, .86);
  color: #8cf7ff;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .42), 0 0 9px rgba(79, 231, 255, .8);
  font: 1000 .72rem/1 "Arial Black", monospace;
  text-align: center;
  animation: amodei-shard-fly .68s cubic-bezier(.12,.7,.22,1) var(--amodei-delay, 0ms) forwards;
}
.amodei-glass-shard:nth-of-type(3n) { border-color: #ffad60; color: #ffd184; box-shadow: 2px 3px 0 rgba(0, 0, 0, .42), 0 0 10px rgba(255, 132, 58, .78); }
.amodei-glass-shard.critical,
.amodei-glass-shard.ko { min-width: 24px; padding: 3px 5px; border-width: 2px; font-size: .86rem; }
.amodei-impact-word {
  z-index: 17;
  left: var(--impact-x);
  top: var(--impact-y);
  translate: -50% -50%;
  padding: 6px 10px 7px;
  rotate: -5deg;
  border: 3px solid #091321;
  background: #63efff;
  color: #07111f;
  box-shadow: 4px 5px 0 #ff7f42, 0 0 18px rgba(91, 239, 255, .7);
  font: 1000 clamp(.9rem, 2vw, 1.35rem)/1 "Arial Black", "Noto Sans KR", sans-serif;
  letter-spacing: -.03em;
  white-space: nowrap;
  animation: amodei-word-slam .62s cubic-bezier(.12,.82,.18,1) forwards;
}
.amodei-impact-word.critical { padding: 8px 14px; background: #fff084; color: #54132b; font-size: clamp(1.2rem, 3vw, 2rem); box-shadow: 6px 7px 0 #ff426d, 0 0 30px #5cf4ff; }
.amodei-impact-word.ko { background: #ff426d; color: #fff5c4; font-size: clamp(1.45rem, 3.8vw, 2.6rem); box-shadow: 7px 8px 0 #10233f, 0 0 42px #62f4ff; }
.amodei-overload-flash {
  z-index: 12;
  inset: 0;
  background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.76) 0 4%, rgba(87,238,255,.42) 12%, rgba(255,118,63,.26) 27%, transparent 56%);
  mix-blend-mode: screen;
  animation: amodei-overload-flash .36s steps(3, end) forwards;
}
.amodei-overload-flash.ko { background: radial-gradient(circle at 50% 48%, #fff 0 5%, rgba(84,240,255,.65) 14%, rgba(255,64,105,.42) 31%, transparent 66%); }

@keyframes skin-bonus-fly {
  0% { opacity: 0; transform: translate(0, 0) scale(.55) rotate(0); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--skin-fx-x), var(--skin-fx-y)) scale(1.15) rotate(var(--skin-fx-spin)); }
}

.rage-box {
  position: absolute;
  z-index: 4;
  left: 50%;
  right: auto;
  bottom: 12px;
  width: min(820px, calc(100% - 170px));
  translate: -50% 0;
  display: grid;
  grid-template-columns: minmax(120px, 150px) minmax(260px, 1fr) auto minmax(120px, 150px);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(80, 217, 255, .28);
  background: rgba(7, 16, 29, .86);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .34);
}

.rage-core { min-width: 0; }
.rage-meta { margin: 0 0 5px; }
.rage-track { height: 15px; }
.rage-fill { width: 0; background: linear-gradient(90deg, var(--orange), var(--yellow)); }
.rage-status {
  display: grid;
  min-width: 104px;
  min-height: 42px;
  padding: 0 10px;
  place-items: center;
  border: 1px solid var(--line);
  background: #202e43;
  color: #aebed1;
  font-size: .72rem;
}
.combat-chip { min-width: 0; }
.combat-chip span { display: block; color: var(--muted); font: 700 .68rem/1.2 "Noto Sans KR", sans-serif; }
.combat-chip strong { display: block; overflow: hidden; margin-top: 4px; color: var(--yellow); font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.auto-chip { text-align: right; }
.auto-chip strong { color: var(--green); }

.records { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 10px 0 0; background: var(--line); }
.records div { min-width: 0; padding: 8px; background: var(--panel); }
.records dt { color: var(--muted); font: 700 .78rem/1.2 "Noto Sans KR", sans-serif; }
.records dd { overflow: hidden; margin: 4px 0 0; color: var(--yellow); font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }

.loop-box {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #7957b8;
  background: linear-gradient(145deg, rgba(62, 38, 99, .82), rgba(17, 25, 45, .95));
  box-shadow: inset 4px 0 0 #a970ff;
}
.loop-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.loop-heading strong { color: white; font-size: 1rem; }
.loop-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 0; }
.loop-stats div { padding: 6px; background: rgba(5, 10, 22, .55); border: 1px solid rgba(199, 156, 255, .25); }
.loop-stats dt { color: #a9b6c8; font: 700 .7rem/1.2 "Noto Sans KR", sans-serif; }
.loop-stats dd { margin: 4px 0 0; color: var(--yellow); font-size: .92rem; }
#loopBonus { margin-top: 7px; color: #e5d5ff; font: 800 .72rem/1.3 "Noto Sans KR", sans-serif; }
#loopButton { width: 100%; min-height: 36px; margin-top: 7px; border: 1px solid #c79cff; background: #6f3fc4; color: white; cursor: pointer; font-size: .8rem; font-weight: 900; }
#loopButton:hover:not(:disabled) { background: #8455d8; box-shadow: 0 0 18px rgba(169, 112, 255, .28); }
#loopButton:disabled { border-color: #46536a; background: #202b3c; color: #8490a2; cursor: not-allowed; }

.settings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.small-button { min-height: 34px; border: 1px solid var(--line); background: #18283e; color: var(--cream); cursor: pointer; font-size: .78rem; }
.small-button:hover { border-color: var(--cyan); }
.small-button.danger { color: #ff9eb0; }

dialog { width: min(420px, calc(100% - 30px)); padding: 0; border: 1px solid var(--line); background: var(--panel); color: var(--cream); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(2, 5, 10, .78); }
dialog form { padding: 24px; }
dialog strong { font-size: 1.3rem; }
dialog p { margin-top: 8px; color: var(--muted); font: 700 .9rem/1.5 "Noto Sans KR", sans-serif; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.dialog-actions button { padding: 9px 14px; border: 1px solid var(--line); background: #1c2c43; color: white; cursor: pointer; }
.dialog-actions .confirm-danger { background: var(--red); border-color: var(--red); }
.dialog-actions .confirm-loop { background: #6f3fc4; border-color: #c79cff; }

.test-mode-badge {
  display: inline-flex;
  margin-top: 4px;
  padding: 4px 8px;
  border: 1px solid #ffcf40;
  background: #8d1736;
  color: #fff1a6;
  box-shadow: 3px 3px 0 #10050a;
  font: 1000 .62rem/1 "Arial Black", "Noto Sans KR", sans-serif;
  letter-spacing: .05em;
}
.test-mode-badge[hidden] { display: none; }
.test-mode-active .topbar { box-shadow: inset 0 -2px 0 #ffcf40, 0 0 22px rgba(255, 64, 104, .42); }

dialog.test-console {
  width: min(570px, calc(100% - 24px));
  border: 3px solid #ffcf40;
  background: #07101d;
  box-shadow: 10px 10px 0 #8d1736, 18px 18px 0 rgba(0, 0, 0, .55);
}
.test-console::backdrop { background: rgba(1, 4, 9, .84); backdrop-filter: blur(3px); }
.test-console > section { padding: 18px; }
.test-console-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid #8d2940; }
.test-console-heading div { display: grid; gap: 4px; }
.test-console-heading span { color: #ff5e7d; font: 1000 .62rem/1 "Arial Black", sans-serif; letter-spacing: .16em; }
.test-console-heading strong { color: #fff1b2; font-size: 1.35rem; }
.test-console-heading button { width: 38px; height: 38px; border: 2px solid #6e5360; background: #172337; color: white; cursor: pointer; font-size: 1.35rem; font-weight: 1000; }
.test-console > section > p { margin: 12px 0; color: #bdcce0; font: 700 .86rem/1.5 "Noto Sans KR", sans-serif; }
.test-console form { display: grid; gap: 6px; padding: 0; }
.test-console form label { color: #ffcf40; font: 900 .74rem/1 "Noto Sans KR", sans-serif; }
.test-console form > div { display: grid; grid-template-columns: minmax(0, 1fr) 74px; gap: 7px; }
.test-console input { min-width: 0; height: 42px; padding: 0 12px; border: 2px solid #48647f; background: #020810; color: #8ff3ff; outline: 0; font: 900 .9rem/1 monospace; }
.test-console input:focus { border-color: #5eeaff; box-shadow: 0 0 12px rgba(94, 234, 255, .3); }
.test-console form button { border: 2px solid #ffcf40; background: linear-gradient(#b3264e, #6f142f); color: #fff4bd; cursor: pointer; font-weight: 1000; }
.test-console output { display: block; min-height: 42px; margin-top: 10px; padding: 10px 12px; border-left: 4px solid #5eeaff; background: #111d2c; color: #dcecff; font: 800 .78rem/1.4 "Noto Sans KR", sans-serif; }
.test-command-grid { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 1px; margin-top: 10px; overflow: hidden; border: 1px solid #344c65; background: #344c65; }
.test-command-grid code,
.test-command-grid span { padding: 7px 9px; background: #0c1726; font-size: .72rem; }
.test-command-grid code { color: #7ff3ff; font-weight: 900; }
.test-command-grid span { color: #aebdd0; font-family: "Noto Sans KR", sans-serif; }

@media (max-width: 520px) {
  .test-mode-badge { font-size: .52rem; }
  .test-console > section { padding: 14px; }
  .test-command-grid { grid-template-columns: 128px minmax(0, 1fr); }
  .test-command-grid code,
  .test-command-grid span { padding: 6px 7px; font-size: .66rem; }
}

.arena.shake { animation: arena-shake .16s linear; }
.arena.amodei-shake { animation: amodei-arena-hit .24s steps(5, end); }
.arena.amodei-critical-shake { animation: amodei-arena-critical .36s steps(7, end); }
.arena.amodei-ko-shake { animation: amodei-arena-ko .62s steps(9, end); }
.rage-active .arena { box-shadow: 0 0 55px rgba(255, 77, 109, .25), var(--shadow); }

@keyframes bonk-left { 45% { transform: translate(-18px, 4px) rotate(-7deg) scale(.98); } }
@keyframes bonk-right { 45% { transform: translate(18px, 4px) rotate(7deg) scale(.98); } }
@keyframes dizzy { 25% { transform: rotate(-8deg) scale(.96); } 70% { transform: rotate(7deg) scale(.98); } }
@keyframes pop-away { 0% { opacity: 0; transform: scale(.45) rotate(-8deg); } 25% { opacity: 1; transform: scale(1.14) rotate(3deg); } 100% { opacity: 0; transform: translateY(-80px) scale(.85) rotate(-6deg); } }
@keyframes coin-fly { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--coin-x), -120px) scale(1); } }
@keyframes arena-shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
@keyframes amodei-ring-pop { 0% { opacity: 0; scale: .16; rotate: -30deg; } 38% { opacity: 1; scale: 1.05; } 100% { opacity: 0; scale: 2.15; rotate: 24deg; } }
@keyframes amodei-core-pop { 0% { opacity: 0; scale: .25; rotate: 0; } 42% { opacity: 1; scale: 1.2; rotate: 32deg; } 100% { opacity: 0; scale: 1.72; rotate: 88deg; } }
@keyframes amodei-shard-fly { 0% { opacity: 0; transform: translate(0, 0) scale(.45) rotate(0); } 16% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--amodei-dx), var(--amodei-dy)) scale(1.16) rotate(var(--amodei-spin)); } }
@keyframes amodei-word-slam { 0% { opacity: 0; transform: translateY(24px) scale(2.1) skew(-12deg); } 22% { opacity: 1; transform: translateY(0) scale(.92) skew(4deg); } 43% { transform: scale(1.08) skew(-2deg); } 100% { opacity: 0; transform: translateY(-54px) scale(.94) skew(0); } }
@keyframes amodei-overload-flash { 0%, 100% { opacity: 0; } 24% { opacity: 1; } 48% { opacity: .24; } 68% { opacity: .8; } }
@keyframes amodei-arena-hit { 20% { transform: translate(-8px, 3px) rotate(-.18deg); filter: brightness(1.12); } 40% { transform: translate(7px, -3px) rotate(.14deg); } 65% { transform: translate(-4px, 2px); } 82% { transform: translate(2px, -1px); } }
@keyframes amodei-arena-critical { 14% { transform: translate(-15px, 6px) rotate(-.36deg); filter: brightness(1.28) saturate(1.24); } 29% { transform: translate(13px, -7px) rotate(.3deg); } 44% { transform: translate(-10px, 5px); } 58% { transform: translate(8px, -3px); } 74% { transform: translate(-5px, 2px); } 88% { transform: translate(2px, -1px); } }
@keyframes amodei-arena-ko { 11% { transform: translate(-20px, 8px) rotate(-.5deg); filter: brightness(1.42) saturate(1.35); } 22% { transform: translate(18px, -9px) rotate(.46deg); } 35% { transform: translate(-14px, 7px); } 49% { transform: translate(12px, -5px); } 63% { transform: translate(-8px, 4px); } 77% { transform: translate(6px, -2px); } 90% { transform: translate(-3px, 1px); } }

@media (max-width: 900px) {
  body { overflow: hidden; }
  .game-shell { height: 100dvh; min-height: 560px; }
  .game-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .shop-drawer { top: 10px; bottom: 0; height: auto; }
  .arena { grid-column: 1; grid-row: 1; min-height: 0; }
  .record-drawer { top: 10px; bottom: 0; height: auto; }
  .boss-header { grid-template-columns: auto minmax(220px, 1fr) auto; }
  .rage-box { width: min(760px, calc(100% - 150px)); }
}

@media (max-width: 720px) {
  .game-shell { padding: 10px 8px; }
  .topbar { align-items: center; }
  h1 { font-size: 1.75rem; }
  .top-stats { display: grid; grid-template-columns: repeat(2, minmax(76px, 1fr)); width: auto; }
  .stat-card { min-width: 0; padding: 7px; }
  .stat-card strong { font-size: 1rem; }
  .stat-card span { font-size: .68rem; }
  .topbar { flex-direction: row; }
  .game-layout { display: grid; padding-top: 10px; }
  .arena { min-height: 0; }
  .shop-drawer { top: 10px; bottom: 0; width: min(360px, calc(100% - 58px)); height: auto; min-height: 0; }
  .record-drawer { top: 10px; right: 60px; bottom: 0; width: min(340px, calc(100% - 72px)); height: auto; }
  .utility-rail { top: 145px; right: 8px; translate: 0 0; }
  .utility-button { width: 46px; min-height: 52px; }
  .boss-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 8px 64px 8px 12px; }
  .boss-identity { min-width: 0; }
  .boss-status { grid-column: 2; grid-row: 1; }
  .health-wrap { grid-column: 1 / -1; grid-row: 2; max-width: none; }
  .skin-menu { top: 104px; right: 60px; width: min(360px, calc(100% - 72px)); max-height: calc(100% - 120px); }
  .hit-stage { top: 104px; bottom: 86px; }
  .weapon-list { grid-template-columns: 1fr; }
  .weapon-fx { width: 210px; height: 210px; font-size: 8.4rem; }
  .boss-sprite { width: auto; height: min(100%, 470px); bottom: 4px; }
  .tap-prompt { bottom: 6px; }
  .rage-box { left: 50%; right: auto; width: calc(100% - 20px); grid-template-columns: minmax(0, 1fr) 120px; gap: 8px; padding: 7px 8px; }
  .combat-chip { display: none; }
  #rageButton { font-size: .72rem; }
}

@media (max-width: 430px) {
  .arena { min-height: 0; }
  h1 { font-size: 1.5rem; }
  .top-stats { gap: 5px; }
  .stat-card { padding: 6px; }
  .boss-header { padding: 8px 60px 8px 10px; }
  .hit-stage { top: 102px; bottom: 84px; }
  .rage-box { bottom: 10px; }
  .boss-sprite { width: auto; height: min(100%, 420px); bottom: 6px; }
  .weapon-list { grid-template-columns: 1fr; }
  .shop-drawer { width: calc(100% - 54px); }
  .shop-drawer-toggle { right: -44px; width: 44px; min-height: 126px; }
  .record-drawer { right: 54px; width: calc(100% - 66px); }
  .utility-rail { right: 6px; }
  .utility-button { width: 42px; min-height: 48px; font-size: .66rem; }
  .skin-menu { top: 102px; right: 54px; width: calc(100% - 66px); max-height: calc(100% - 118px); }
  .records { grid-template-columns: 1fr 1fr; }
}

/* 2026 command-deck layout */
.game-shell {
  padding: 8px clamp(8px, 1vw, 16px);
}

.topbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  min-height: 62px;
  gap: 16px;
  padding: 0 2px 8px;
  border-bottom: 1px solid #3c5875;
}

.brand-block { align-self: center; }

.utility-rail {
  position: static;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 6px;
  translate: none;
}

.utility-button {
  display: flex;
  width: auto;
  min-width: 78px;
  min-height: 42px;
  padding: 7px 12px;
  place-items: center;
  justify-content: center;
  gap: 7px;
  border-color: #3e5b78;
  background: linear-gradient(180deg, rgba(25, 45, 68, .98), rgba(9, 20, 35, .98));
  font-size: .82rem;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .28), 4px 5px 12px rgba(0, 0, 0, .22);
}

.utility-button b { font-weight: 900; }
.utility-button span { font-size: .95rem; }
.utility-button.shop-toggle { border-color: #bd3956; }
.utility-button.shop-toggle span { color: #ff718b; }
.utility-button.skin-toggle { background: linear-gradient(180deg, #3b2858, #191629); }
.utility-button.rebirth-toggle { border-color: #9e6bd7; background: linear-gradient(180deg, #432762, #1c142b); }
.utility-button.rebirth-toggle span { color: #d9adff; font-size: 1.1rem; }
.utility-button[aria-expanded="true"] { border-color: var(--yellow); color: var(--yellow); box-shadow: inset 0 -3px 0 var(--yellow), 0 0 18px rgba(255, 224, 107, .12); }

.top-stats { gap: 6px; }
.stat-card { min-width: 100px; padding: 7px 10px; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .32); }

.game-layout { padding-top: 8px; }

.arena {
  border-color: #3a5875;
  background:
    radial-gradient(circle at 50% 45%, rgba(62, 160, 215, .12), transparent 34%),
    linear-gradient(#142d49 0 57%, #081421 57%);
  box-shadow: inset 0 0 0 1px rgba(80, 217, 255, .05), var(--shadow);
}

.arena::before { inset: 57% 0 auto; }
.arena-grid { inset: 57% 0 0; background-size: 54px 54px; }

.boss-header {
  position: absolute;
  z-index: 12;
  top: 12px;
  left: 50%;
  right: auto;
  width: min(1180px, calc(100% - 24px));
  translate: -50% 0;
  grid-template-columns: minmax(180px, 1fr) minmax(320px, 720px) minmax(150px, 1fr);
  min-height: 68px;
  gap: clamp(16px, 2vw, 36px);
  padding: 9px 14px;
  border: 1px solid rgba(80, 217, 255, .28);
  background: linear-gradient(180deg, rgba(9, 24, 41, .98), rgba(7, 16, 29, .92));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .3), inset 4px 0 0 var(--cyan);
}

.boss-header h2 { font-size: clamp(1.2rem, 1.5vw, 1.7rem); }
.health-wrap { width: min(100%, 720px); max-width: 720px; justify-self: center; }
.health-track { height: 16px; }
.boss-status { min-width: 132px; }

.battle-stats {
  position: absolute;
  z-index: 11;
  top: 94px;
  right: 16px;
  width: 270px;
  padding: 10px;
  border: 1px solid rgba(80, 217, 255, .34);
  background: rgba(7, 18, 31, .9);
  box-shadow: 8px 10px 24px rgba(0, 0, 0, .32), inset 3px 0 0 var(--cyan);
  pointer-events: none;
  transition: opacity .16s ease, visibility .16s ease;
}
.arena.stats-obscured .battle-stats { opacity: 0; visibility: hidden; }

.battle-stats > strong { display: block; padding: 0 3px 8px; color: var(--cream); font-size: .9rem; letter-spacing: .04em; }
.battle-stats dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: rgba(65, 91, 119, .7); }
.battle-stats dl div { min-width: 0; padding: 7px 8px; background: rgba(12, 28, 47, .98); }
.battle-stats dt { color: var(--muted); font: 700 .67rem/1.2 "Noto Sans KR", sans-serif; }
.battle-stats dd { overflow: hidden; margin: 3px 0 0; color: var(--yellow); font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.battle-stats dl div:nth-child(3) dd { color: var(--green); }

.hit-stage { inset: 88px 0 96px; }
.boss-sprite { height: min(118%, 960px); bottom: -7%; cursor: crosshair; pointer-events: auto; }
.boss-sprite:focus-visible { outline: 3px solid var(--yellow); outline-offset: 8px; }
.target-ring { width: min(62vw, 650px); bottom: -31%; }
.tap-prompt { bottom: 3px; }

.rage-box {
  left: 16px;
  right: 16px;
  bottom: 12px;
  width: auto;
  translate: none;
  grid-template-columns: minmax(130px, 180px) minmax(300px, 1fr) 126px minmax(130px, 180px);
  min-height: 70px;
  padding: 9px 14px;
  border-color: #3b5875;
  background: linear-gradient(180deg, rgba(12, 28, 47, .97), rgba(5, 13, 24, .97));
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .25), inset 0 3px 0 rgba(80, 217, 255, .08);
}

.rage-track { height: 17px; }
.combat-chip { padding: 0 6px; }
.combat-chip strong { font-size: 1rem; }
.rage-status { min-height: 46px; }

.shop-drawer {
  top: 8px;
  bottom: 0;
  left: 0;
  width: min(420px, calc(100% - 20px));
  transform: translateX(calc(-100% - 18px));
  border-color: #b83250;
  box-shadow: 18px 0 52px rgba(0, 0, 0, .55);
}

.shop-drawer:not(.open) { transform: translateX(calc(-100% - 18px)); }
.shop-drawer.open { transform: translateX(0); }

.record-drawer {
  top: 8px;
  right: 0;
  bottom: auto;
  width: min(360px, calc(100% - 20px));
  max-height: calc(100% - 16px);
  transform: translateX(calc(100% + 18px));
  box-shadow: -18px 0 52px rgba(0, 0, 0, .55);
}

.record-drawer.open { transform: translateX(0); }
.panel-heading h2 { font-size: 1.2rem; }
.panel-close { margin-left: auto; }

.rebirth-panel {
  position: absolute;
  z-index: 23;
  top: 8px;
  right: 0;
  width: min(390px, calc(100% - 20px));
  padding: 12px;
  border-color: #9164c5;
  background: rgba(23, 17, 39, .985);
  box-shadow: -18px 18px 52px rgba(0, 0, 0, .55), inset 4px 0 0 #a66bf0;
}
.rebirth-panel[hidden] { display: none; }
.rebirth-box { margin-top: 10px; }

.skin-menu {
  top: 92px;
  right: 14px;
  width: min(410px, calc(100% - 28px));
  max-height: calc(100% - 186px);
}

@media (max-width: 900px) {
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 7px 10px;
  }
  .brand-block { grid-column: 1; grid-row: 1; }
  .top-stats { grid-column: 2; grid-row: 1; }
  .utility-rail { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(4, 1fr); }
  .utility-button { min-width: 0; min-height: 38px; }
  .game-layout { grid-template-rows: minmax(0, 1fr); }
  .shop-drawer,
  .record-drawer { top: 8px; bottom: auto; height: auto; max-height: calc(100% - 16px); }
  .rebirth-panel { top: 8px; right: 0; }
  .boss-header { grid-template-columns: minmax(150px, .7fr) minmax(220px, 2fr) minmax(125px, .7fr); }
  .rage-box { width: auto; }
}

@media (max-width: 720px) {
  .game-shell { padding: 7px; min-height: 600px; }
  .topbar { min-height: 96px; padding-bottom: 7px; }
  h1 { font-size: clamp(1.45rem, 6.5vw, 1.85rem); }
  .stat-card { min-width: 74px; padding: 6px 7px; }
  .stat-card span { font-size: .62rem; }
  .stat-card strong { font-size: .95rem; }
  .utility-button { min-height: 36px; padding: 5px 8px; font-size: .76rem; }
  .utility-button span { font-size: .82rem; }
  .boss-header {
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    translate: none;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 94px;
    gap: 6px 10px;
    padding: 8px 10px;
  }
  .boss-status { min-width: 0; }
  .health-wrap { grid-column: 1 / -1; width: 100%; max-width: none; }
  .hit-stage { top: 110px; bottom: 86px; }
  .boss-sprite { height: min(116%, 590px); bottom: -8%; }
  .target-ring { width: min(104vw, 540px); bottom: -20%; }
  .rage-box {
    left: 8px;
    right: 8px;
    bottom: 8px;
    grid-template-columns: minmax(0, 1fr) 114px;
    min-height: 68px;
    padding: 7px 9px;
  }
  .combat-chip { display: none; }
  .shop-drawer { top: 8px; bottom: 0; width: min(390px, 100%); }
  .record-drawer { top: 8px; right: 0; bottom: auto; width: min(360px, 100%); max-height: calc(100% - 16px); }
  .rebirth-panel { top: 8px; right: 0; width: min(380px, 100%); }
  .skin-menu { top: 110px; right: 8px; width: calc(100% - 16px); max-height: calc(100% - 204px); }
  .battle-stats {
    top: 110px;
    left: 8px;
    right: 8px;
    width: auto;
    padding: 6px;
  }
  .battle-stats > strong { display: none; }
  .battle-stats dl { grid-template-columns: repeat(3, 1fr); }
  .battle-stats dl div { padding: 5px 6px; }
  .battle-stats dl div:nth-child(2),
  .battle-stats dl div:nth-child(5),
  .battle-stats dl div:nth-child(6) { display: none; }
  .hit-stage { top: 170px; }
}

@media (max-width: 430px) {
  .game-shell { min-height: 600px; }
  .topbar { gap: 6px 8px; }
  .top-stats { gap: 4px; }
  .utility-rail { gap: 4px; }
  .boss-header { padding: 7px 9px; }
  .boss-header h2 { font-size: 1.15rem; }
  .mood-badge { font-size: .65rem; }
  .damage-readout { padding: 6px 8px; font-size: .78rem; }
  .hit-stage { top: 170px; bottom: 84px; }
  .boss-sprite { height: min(118%, 560px); bottom: -9%; }
  .rage-box { bottom: 7px; }
  .shop-drawer,
  .record-drawer { width: 100%; }
  .rebirth-panel { width: 100%; }
}

/* Arcade cabinet pass: chunky controls, warm hierarchy, quiet utility data. */
body {
  background:
    radial-gradient(circle at 50% -10%, rgba(255, 77, 109, .12), transparent 34rem),
    linear-gradient(145deg, #111725 0%, #05080f 72%);
}

.loading-card {
  border: 3px solid #f2c94c;
  background: linear-gradient(145deg, #141c2b, #090f19);
  box-shadow: 10px 10px 0 #6f1730, 16px 16px 0 #02050a;
}
.loading-kicker { color: #ff5a78; }

.topbar {
  min-height: 68px;
  padding: 4px 8px 9px;
  border: 2px solid #3d2930;
  border-bottom: 4px solid #9b2942;
  background: linear-gradient(180deg, rgba(17, 27, 42, .97), rgba(7, 14, 24, .97));
  box-shadow: inset 0 -2px 0 #f2c94c, 0 6px 0 rgba(0, 0, 0, .32);
}

h1 { text-shadow: 3px 3px 0 #a92445, 6px 6px 0 #28101b; }

.utility-rail {
  gap: 3px;
  padding: 5px;
  border: 2px solid #51323b;
  background: #070d17;
  box-shadow: 5px 5px 0 #02050a, inset 0 0 0 1px #aa2c49;
}

.utility-button {
  min-width: 82px;
  min-height: 42px;
  border: 2px solid #665343;
  background: linear-gradient(180deg, #2c3543, #111722 75%);
  color: #f8f1d3;
  box-shadow: inset 0 -4px 0 #070a10, 0 3px 0 #02040a;
  transition: transform .08s ease, filter .08s ease, border-color .08s ease;
}
.utility-button span { color: #f2c94c; }
.utility-button.shop-toggle { border-color: #cf3a58; background: linear-gradient(180deg, #5f2033, #24101b 75%); }
.utility-button.skin-toggle { border-color: #8568a8; background: linear-gradient(180deg, #3d2c52, #181421 75%); }
.utility-button.character-toggle { border-color: #397f89; background: linear-gradient(180deg, #1c5260, #0d2028 75%); }
.utility-button.rebirth-toggle {
  border-color: #554561;
  background: linear-gradient(180deg, #292235, #12101a 75%);
  color: #9a8aa8;
  filter: saturate(.62);
}
.utility-button.rebirth-toggle span { color: #8e77a4; }
.utility-button:hover { border-color: #f2c94c; filter: brightness(1.12); }
.utility-button:active {
  transform: translateY(3px);
  box-shadow: inset 0 -1px 0 #070a10, 0 0 0 #02040a;
}
.utility-button[aria-expanded="true"] {
  border-color: #f2c94c;
  background: linear-gradient(180deg, #8d2940, #361420 75%);
  color: #fff2ae;
  box-shadow: inset 0 -4px 0 #18070c, 0 3px 0 #02040a;
}
.utility-button.rebirth-toggle.ready {
  border-color: #ffe36e;
  background: linear-gradient(180deg, #8b3fc0, #3f1f60 75%);
  color: white;
  filter: none;
  box-shadow: inset 0 -4px 0 #1e0b31, 0 3px 0 #02040a, 0 0 18px rgba(255, 224, 107, .45);
  animation: rebirth-ready 1.25s steps(2, end) infinite;
}
.utility-button.rebirth-toggle.ready span { color: #ffe36e; }

@keyframes rebirth-ready {
  50% { box-shadow: inset 0 -4px 0 #1e0b31, 0 3px 0 #02040a, 0 0 28px rgba(255, 224, 107, .72); }
}

.stat-card {
  border: 2px solid #5c4b38;
  background: #111a28;
  box-shadow: inset 0 -4px 0 #060910, 4px 4px 0 #02040a;
}
.coin-card { border-color: #a7792a; }
.rebirth-card { border-color: #704c91; background: linear-gradient(180deg, #342246, #151220); }

.arena {
  border: 2px solid #44343a;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 187, 72, .06), transparent 32%),
    linear-gradient(#152c46 0 57%, #081421 57%);
  box-shadow: inset 0 0 0 1px rgba(242, 201, 76, .09), 8px 10px 0 rgba(0, 0, 0, .28);
}
.arena::before { height: 4px; background: linear-gradient(90deg, #8d2840, #f2c94c 50%, #8d2840); }

.boss-header {
  border: 2px solid #6b4a3a;
  background: linear-gradient(180deg, rgba(20, 27, 39, .98), rgba(7, 12, 20, .96));
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .38), inset 6px 0 0 #d13250;
}
.boss-header .eyebrow { color: #f2c94c; }
.health-track {
  height: 18px;
  border: 2px solid #765440;
  box-shadow: inset 0 0 0 2px #05080d, 3px 3px 0 rgba(0, 0, 0, .45);
}
.mood-badge { border: 2px solid #dfbb49; color: #16100a; background: #f2c94c; }
.damage-readout { border: 2px solid #8d6a33; background: #12100f; box-shadow: 3px 3px 0 #02040a; }

.battle-stats {
  top: 96px;
  right: 18px;
  width: 230px;
  padding: 0;
  border: 3px solid #a92e47;
  background: #0a111c;
  box-shadow: 6px 6px 0 #03050a, inset 0 0 0 1px #f2c94c;
}
.battle-stats > strong {
  padding: 7px 10px 6px;
  border-bottom: 2px solid #a92e47;
  background: linear-gradient(90deg, #a51f3d, #551526);
  color: #fff2ae;
  font-size: .72rem;
  letter-spacing: .16em;
}
.battle-stats dl { grid-template-columns: 1fr; gap: 2px; background: #3d2730; }
.battle-stats dl div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  padding: 7px 10px;
  background: #111a28;
}
.battle-stats dt { color: #c4af9f; }
.battle-stats dd { margin: 0; color: #ffe06b; text-align: right; }
.battle-stats dl div:nth-child(2) dd { color: #52e3a2; }

.tap-prompt {
  border: 2px solid #6d5232;
  background: rgba(7, 10, 15, .9);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .5);
}
.tap-prompt kbd { border: 2px solid #9c803d; box-shadow: inset 0 -3px 0 #6c5728; }
.hit-pop { font-size: clamp(1.5rem, 3vw, 2.65rem); text-shadow: 3px 3px 0 #8f1f37, -2px 0 #06090e, 0 2px #06090e; }

.rage-box {
  border: 2px solid #6b4a3a;
  background: linear-gradient(180deg, rgba(20, 25, 34, .98), rgba(7, 11, 18, .98));
  box-shadow: 0 -6px 0 rgba(0, 0, 0, .28), inset 0 3px 0 rgba(242, 201, 76, .11);
}
.rage-track { border: 2px solid #6d5339; }
.rage-status { border: 2px solid #4f473a; box-shadow: inset 0 -3px 0 #090b10; }

.panel,
.skin-menu {
  border-width: 3px;
  box-shadow: 9px 9px 0 rgba(0, 0, 0, .48);
}
.shop-drawer { border-color: #bd3452; box-shadow: 10px 0 0 rgba(0, 0, 0, .45), inset -2px 0 0 #f2c94c; }
.record-drawer { border-color: #8f6b35; box-shadow: -9px 9px 0 rgba(0, 0, 0, .48); }
.panel-heading { border-bottom: 3px solid #774031; }
.panel-heading h2 { color: #fff0aa; text-shadow: 2px 2px 0 #8d2940; }
.panel-close { border: 2px solid #83603e; background: #27171c; box-shadow: inset 0 -3px 0 #080608; }

.shop-tabs { gap: 3px; padding: 3px; border: 2px solid #51323b; background: #070b12; }
.shop-tab {
  min-height: 38px;
  border: 2px solid #4f4639;
  background: linear-gradient(180deg, #242a34, #10141b);
  box-shadow: inset 0 -3px 0 #06080d;
}
.shop-tab.active {
  border-color: #f2c94c;
  background: linear-gradient(180deg, #b42c49, #591628);
  color: #fff3b6;
  box-shadow: inset 0 -3px 0 #210810;
}

.weapon-list,
.upgrade-list,
.automation-list,
.prestige-list { gap: 10px; margin-top: 11px; padding: 1px 6px 10px 1px; }

.weapon-card,
.upgrade-card,
.automation-card,
.prestige-card {
  min-height: 78px;
  padding: 10px;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  border-width: 2px;
  box-shadow: 4px 4px 0 #05070b;
}
.weapon-card:hover,
.upgrade-card:hover,
.automation-card:hover,
.prestige-card:hover:not(:disabled) { transform: translate(-2px, -2px); border-color: #f2c94c; box-shadow: 6px 6px 0 #05070b; }
.weapon-card:active,
.upgrade-card:active,
.automation-card:active,
.prestige-card:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #05070b; }
.weapon-card.selected { border: 3px solid #f2c94c; background: linear-gradient(90deg, #582031, #222939); box-shadow: 4px 4px 0 #05070b, inset 5px 0 0 #ff4d6d; }
.upgrade-card { background: linear-gradient(135deg, #393023, #1c1c20); }
.automation-card { background: linear-gradient(135deg, #173744, #111c26); }
.automation-card::before { background: linear-gradient(var(--machine-color, #45d8d2), #173b4a); }
.automation-card .automation-icon { border-color: var(--machine-color, #45d8d2); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .55), 0 0 12px color-mix(in srgb, var(--machine-color, #45d8d2) 28%, transparent); }
.weapon-icon,
.upgrade-icon,
.automation-icon,
.prestige-icon {
  width: 50px;
  height: 50px;
  border: 2px solid #795d37;
  background: #090d14;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .5);
  font-size: 1.65rem;
}
.weapon-copy strong,
.upgrade-copy strong,
.automation-copy strong,
.prestige-copy strong { font-size: 1rem; color: #fff2c0; }
.price,
.prestige-price { color: #ffe06b; font-size: .95rem; text-shadow: 2px 2px 0 #5d3114; }
.auto-summary,
.prestige-summary { border: 2px solid #6d5134; border-left-width: 6px; box-shadow: 4px 4px 0 #05070b; }

.records { gap: 2px; border: 2px solid #5f4934; background: #5f4934; }
.records div { background: #111a28; }
.records div:nth-last-child(1) { grid-column: 1 / -1; }

.rebirth-panel { border-color: #8e5ab8; box-shadow: -9px 9px 0 rgba(0, 0, 0, .5), inset 4px 0 0 #f2c94c; }
#loopButton:not(:disabled) { border: 2px solid #ffe06b; box-shadow: 4px 4px 0 #08040d, 0 0 20px rgba(181, 98, 255, .3); }

@media (max-width: 900px) {
  .topbar { padding: 5px 7px 8px; }
  .utility-rail { gap: 3px; }
  .utility-button { min-width: 0; }
}

@media (max-width: 720px) {
  .topbar { min-height: 106px; }
  .utility-rail { padding: 3px; }
  .utility-button { min-height: 38px; padding: 5px 6px; }
  .battle-stats { top: 110px; left: 8px; right: 8px; width: auto; }
  .battle-stats > strong { display: none; }
  .battle-stats dl { grid-template-columns: repeat(3, 1fr); gap: 2px; }
  .battle-stats dl div,
  .battle-stats dl div:nth-child(2),
  .battle-stats dl div:nth-child(3) { display: block; padding: 6px 7px; }
  .battle-stats dd { margin-top: 3px; text-align: left; }
  .hit-stage { top: 170px; }
  .weapon-card,
  .upgrade-card,
  .automation-card,
  .prestige-card { min-height: 72px; grid-template-columns: 46px 1fr auto; }
  .weapon-icon,
  .upgrade-icon,
  .automation-icon,
  .prestige-icon { width: 44px; height: 44px; font-size: 1.4rem; }
}

@media (max-width: 430px) {
  .utility-button { gap: 4px; font-size: .7rem; }
  .utility-button span { display: none; }
  .battle-stats { border-width: 2px; }
}

/* Permanent gear cabinet: the shop is part of the playfield, not a drawer. */
.shop-toggle[hidden] { display: none !important; }

.game-layout {
  grid-template-columns: clamp(320px, 23vw, 390px) minmax(0, 1fr);
  gap: 10px;
}

.shop-drawer,
.shop-drawer:not(.open),
.shop-drawer.open {
  position: relative;
  z-index: 14;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: auto;
  height: 100%;
  max-height: none;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(180deg, #141c29, #0b111b);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, .45), inset -3px 0 0 #f2c94c;
}

.shop-drawer:not(.open) > :not(.shop-drawer-toggle) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.shop-drawer .panel-close { display: none; }
.shop-title { min-width: 0; }
.panel-kicker {
  display: block;
  margin-bottom: 3px;
  color: #ff5c79;
  font-size: .68rem;
  letter-spacing: .18em;
}
.shop-title h2 { font-size: 1.35rem; }

.shop-tabs {
  margin-top: 10px;
  padding: 4px;
  border-color: #70513a;
  background: linear-gradient(180deg, #0a0d13, #15100f);
  box-shadow: 0 4px 0 #040609;
}

.shop-tab {
  position: relative;
  min-height: 42px;
  overflow: hidden;
  border-color: #685b49;
  letter-spacing: .03em;
}
.shop-tab::before {
  content: "";
  position: absolute;
  inset: 2px 3px auto;
  height: 2px;
  background: rgba(255, 255, 255, .12);
}

.shop-page.active { padding: 2px 2px 4px; }

.weapon-card,
.upgrade-card,
.automation-card,
.prestige-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 86px;
  padding: 11px 9px 11px 12px;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  border: 2px solid #574d42;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .055), transparent 35%),
    linear-gradient(180deg, #222d3e, #141b27);
  box-shadow: 5px 5px 0 #030509, inset 0 0 0 1px rgba(255, 224, 107, .06);
}
.weapon-card::before,
.upgrade-card::before,
.automation-card::before,
.prestige-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 7px;
  height: 100%;
  background: linear-gradient(#ef4565, #8c1d38);
}
.upgrade-card::before { background: linear-gradient(#f1c84a, #8b661c); }
.automation-card::before { background: linear-gradient(#45d8d2, #1d6f80); }
.prestige-card::before { background: linear-gradient(#c67bff, #633091); }

.weapon-icon,
.upgrade-icon,
.automation-icon,
.prestige-icon {
  width: 54px;
  height: 54px;
  border: 2px solid #9b7841;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 238, 164, .18), transparent 34%),
    #090d14;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .55), 3px 3px 0 #050609;
  transform: rotate(-2deg);
}

.weapon-copy small,
.upgrade-copy small,
.automation-copy small,
.prestige-copy small { display: block; margin-top: 4px; }

.price,
.prestige-price {
  min-width: 66px;
  padding: 7px 8px 6px 12px;
  border: 1px solid #a07b31;
  background: linear-gradient(180deg, #3b2f16, #1f180d);
  box-shadow: 3px 3px 0 #050609;
  clip-path: polygon(9px 0, 100% 0, 100% 100%, 9px 100%, 0 50%);
  text-align: center;
}

.weapon-card.selected {
  border-color: #ffe06b;
  background:
    linear-gradient(115deg, rgba(255, 224, 107, .12), transparent 38%),
    linear-gradient(180deg, #5a2333, #231927);
  box-shadow: 5px 5px 0 #030509, inset 0 0 0 2px rgba(255, 224, 107, .16);
}
.weapon-card.selected::after {
  content: "EQUIPPED";
  position: absolute;
  top: 5px;
  right: -24px;
  width: 92px;
  padding: 2px 0;
  background: #ffe06b;
  color: #221307;
  font-size: .55rem;
  letter-spacing: .08em;
  text-align: center;
  transform: rotate(35deg);
}

@media (max-width: 1180px) {
  .game-layout { grid-template-columns: 300px minmax(0, 1fr); }
  .shop-drawer { padding: 10px; }
  .weapon-card,
  .upgrade-card,
  .automation-card,
  .prestige-card { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 7px; padding-left: 9px; }
  .weapon-icon,
  .upgrade-icon,
  .automation-icon,
  .prestige-icon { width: 46px; height: 46px; font-size: 1.4rem; }
  .price,
  .prestige-price { min-width: 56px; padding-inline: 10px 6px; font-size: .8rem; }
  .weapon-actions { min-width: 68px; }
  .weapon-action { padding-inline: 5px; font-size: .62rem; }
}

@media (max-width: 860px) {
  .game-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 224px;
    gap: 8px;
  }
  .arena { grid-row: 1; }
  .shop-drawer,
  .shop-drawer:not(.open),
  .shop-drawer.open {
    grid-row: 2;
    width: 100%;
    height: 224px;
    padding: 8px 9px;
    box-shadow: 0 -5px 0 rgba(0, 0, 0, .4), inset 0 3px 0 #f2c94c;
  }
  .shop-drawer .panel-heading { min-height: 26px; padding-bottom: 5px; }
  .panel-kicker { display: none; }
  .shop-title h2 { font-size: 1rem; }
  .shop-tabs { position: absolute; top: 7px; right: 8px; width: min(410px, 62%); margin: 0; }
  .shop-tab { min-height: 32px; }
  .shop-page { margin-top: 4px; }
  .shop-page.active { overflow-x: auto; overflow-y: hidden; padding: 1px 4px 9px 1px; }
  .weapon-list,
  .upgrade-list,
  .automation-list,
  .prestige-list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 42vw);
    gap: 10px;
    margin-top: 6px;
    padding-bottom: 5px;
  }
  .weapon-card,
  .upgrade-card,
  .automation-card,
  .prestige-card { min-height: 76px; }
  .auto-summary,
  .prestige-summary { display: none; }
  .shop-summary-row { display: block; }
  .bulk-buy-bar {
    position: sticky;
    left: 0;
    z-index: 3;
    width: min(310px, 78vw);
    margin-top: 5px;
    padding-block: 3px;
  }
  .bulk-buy-bar > div { grid-template-columns: repeat(2, 48px); }
  .bulk-buy-bar button { min-height: 27px; }
  .weapon-fx.fx-auto { width: 112px; height: 112px; font-size: 4.7rem; }
}

@media (max-width: 720px) {
  .game-layout { grid-template-rows: minmax(0, 1fr) 214px; }
  .shop-drawer,
  .shop-drawer:not(.open),
  .shop-drawer.open { height: 214px; }
  .shop-tabs { width: 64%; }
  .shop-tab { min-height: 30px; font-size: .72rem; }
  .weapon-list,
  .upgrade-list,
  .automation-list,
  .prestige-list { grid-auto-columns: minmax(245px, 78vw); }
  .weapon-card,
  .upgrade-card,
  .automation-card,
  .prestige-card { min-height: 72px; }
}

@media (max-width: 430px) {
  .game-layout { grid-template-rows: minmax(0, 1fr) 205px; }
  .shop-drawer,
  .shop-drawer:not(.open),
  .shop-drawer.open { height: 205px; padding: 7px; }
  .shop-title h2 { font-size: .88rem; }
  .shop-tabs { width: 68%; right: 6px; top: 6px; padding: 2px; }
  .shop-tab { min-height: 28px; font-size: .66rem; }
  .weapon-list,
  .upgrade-list,
  .automation-list,
  .prestige-list { grid-auto-columns: 82vw; }
  .bulk-buy-bar { width: 82vw; }
  .weapon-fx.fx-auto { width: 94px; height: 94px; font-size: 4rem; }
}

/* Global leaderboard */
.utility-button.ranking-toggle {
  border-color: #a7792a;
  background: linear-gradient(180deg, #4b3517, #1e170c 75%);
}
.utility-button.ranking-toggle span { color: #ffe06b; }

.account-control { position: relative; z-index: 42; display: flex; }
.account-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 92px;
  min-height: 47px;
  padding: 6px 10px;
  border: 2px solid #397a72;
  background: linear-gradient(180deg, #173d42, #0b1d25 76%);
  color: #dffcf4;
  cursor: pointer;
  box-shadow: inset 0 -4px 0 #040c10, 4px 4px 0 #02040a;
  font: 900 .75rem/1 "Noto Sans KR", sans-serif;
  text-decoration: none;
}
.account-control .account-button[hidden] { display: none; }
.account-button:hover { border-color: #61e0bd; filter: brightness(1.1); }
.account-button span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #6ce1c1;
  background: #08141b;
  color: #6ce1c1;
  font-size: .76rem;
}
.account-profile b { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 8px);
  right: 0;
  width: 238px;
  padding: 12px;
  border: 3px solid #3e917f;
  background: linear-gradient(180deg, #12242b, #080f17);
  box-shadow: 7px 7px 0 rgba(0, 0, 0, .55), inset 4px 0 0 #f2c94c;
}
.account-menu[hidden] { display: none; }
.account-menu strong { display: block; overflow: hidden; color: #e8fff8; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.account-menu small { display: block; margin: 6px 0 10px; color: #9eb7b4; font: 700 .68rem/1.45 "Noto Sans KR", sans-serif; }
.account-menu a {
  display: block;
  margin-top: 7px;
  padding: 8px 10px;
  border: 1px solid #6a4a46;
  background: #25161a;
  color: #ff9aa9;
  font: 800 .72rem/1 "Noto Sans KR", sans-serif;
  text-align: center;
  text-decoration: none;
}

.ranking-panel {
  position: absolute;
  z-index: 32;
  top: 96px;
  right: 78px;
  width: min(390px, calc(100% - 100px));
  max-height: calc(100% - 184px);
  padding: 13px;
  overflow: hidden;
  border: 3px solid #c89535;
  background:
    linear-gradient(90deg, rgba(255, 224, 107, .035) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(180deg, #171e2b, #090e17);
  box-shadow: 9px 9px 0 rgba(0, 0, 0, .52), inset 4px 0 0 #d63353;
}
.ranking-panel[hidden] { display: none; }
.ranking-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 9px 6px;
  border-bottom: 3px solid #75492d;
}
.ranking-kicker {
  display: block;
  color: #ff6480;
  font-size: .65rem;
  letter-spacing: .18em;
}
.ranking-heading strong {
  display: block;
  margin-top: 2px;
  color: #fff0a8;
  font-size: 1.18rem;
  text-shadow: 2px 2px 0 #7d2139;
}
.ranking-heading button {
  width: 32px;
  height: 32px;
  border: 2px solid #8c6638;
  background: #2a181b;
  color: white;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 #080608;
  font-size: 1.12rem;
}
.ranking-name-form { padding: 10px 2px 0; }
.ranking-name-form label {
  display: block;
  margin-bottom: 5px;
  color: #c6b9a7;
  font: 800 .68rem/1.2 "Noto Sans KR", sans-serif;
}
.ranking-name-form > div { display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 6px; }
.ranking-name-form input {
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 2px solid #51493e;
  border-radius: 0;
  outline: 0;
  background: #080d15;
  color: white;
  font: 800 .78rem/1 "Noto Sans KR", sans-serif;
}
.ranking-name-form input:focus { border-color: #ffe06b; box-shadow: 0 0 0 2px rgba(255, 224, 107, .13); }
.ranking-name-form button {
  border: 2px solid #c89535;
  background: linear-gradient(180deg, #c33a55, #6d1d32);
  color: #fff4bd;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 #2b0911;
  font-size: .78rem;
}
.ranking-status {
  min-height: 28px;
  padding: 7px 3px 5px;
  color: #9fb0c4;
  font: 700 .67rem/1.35 "Noto Sans KR", sans-serif;
}
.ranking-status.error { color: #ff8fa3; }
.ranking-status.success { color: #67e7ad; }
.ranking-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  border: 2px solid #4c4031;
  background: #060a10;
}
.ranking-tab {
  min-height: 34px;
  border: 2px solid #443e36;
  background: linear-gradient(180deg, #242b37, #10141b);
  color: #b9c3ce;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 #05070a;
  font-size: .72rem;
}
.ranking-tab.active {
  border-color: #ffe06b;
  background: linear-gradient(180deg, #b42c49, #591628);
  color: #fff4bd;
}
.ranking-list {
  max-height: min(47vh, 420px);
  margin: 8px 0 0;
  padding: 0 4px 6px 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-color: #9a7130 #080d15;
}
.ranking-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 39px;
  margin-bottom: 4px;
  padding: 6px 9px;
  border: 1px solid #39485c;
  border-left: 4px solid #5a6879;
  background: #111a28;
  color: #dce5ee;
}
.ranking-row.is-you { border-color: #e1ba49; border-left-color: #ff4d6d; background: linear-gradient(90deg, #4e2030, #182030); }
.ranking-rank { color: #94a8bc; font-size: .82rem; text-align: center; }
.ranking-row:nth-child(1) .ranking-rank { color: #ffe06b; font-size: 1.02rem; }
.ranking-row:nth-child(2) .ranking-rank { color: #d5e0ec; }
.ranking-row:nth-child(3) .ranking-rank { color: #e8a56f; }
.ranking-player { min-width: 0; }
.ranking-player strong { display: block; overflow: hidden; color: #fff3c1; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }
.ranking-player small { display: block; margin-top: 2px; color: #8192a6; font: 700 .61rem/1 "Noto Sans KR", sans-serif; }
.ranking-score { color: #ffe06b; font-size: .82rem; text-align: right; }
.ranking-empty { padding: 28px 8px; color: #8292a4; font: 700 .75rem/1.5 "Noto Sans KR", sans-serif; text-align: center; }
.ranking-own-score {
  min-height: 32px;
  padding: 8px 10px;
  border: 1px solid #5b4b35;
  background: #0a1019;
  color: #b7c5d5;
  font: 800 .7rem/1.3 "Noto Sans KR", sans-serif;
}
.ranking-own-score b { color: #ffe06b; }

@media (max-width: 900px) {
  .utility-rail { grid-template-columns: repeat(5, 1fr); }
  .ranking-panel { top: 8px; right: 0; max-height: calc(100% - 16px); }
}

@media (max-width: 720px) {
  .account-button { min-width: 40px; padding-inline: 6px; }
  .account-button b { display: none; }
  .account-menu { right: -160px; }
  .ranking-panel { top: 110px; right: 8px; width: calc(100% - 16px); max-height: calc(100% - 204px); }
  .ranking-list { max-height: min(34vh, 270px); }
}

@media (max-width: 430px) {
  .ranking-panel { right: 0; width: 100%; padding: 9px; }
  .ranking-list { max-height: min(31vh, 225px); }
  .ranking-heading strong { font-size: 1rem; }
}

/* Mobile play pass: thumb-sized controls, a larger target, and a true landscape layout. */
button,
[role="button"],
.hit-stage { touch-action: manipulation; }

.hit-stage {
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: contain;
}

@media (max-width: 600px) and (orientation: portrait) {
  .game-shell {
    height: 100dvh;
    min-height: 0;
    padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) 170px;
    grid-template-rows: 48px 42px;
    min-height: 96px;
    gap: 5px 7px;
    padding: 2px 4px 6px;
  }

  .brand-block { min-width: 0; }
  h1 {
    overflow: hidden;
    font-size: clamp(1.15rem, 5.6vw, 1.35rem);
    letter-spacing: -.06em;
    line-height: 1;
    text-overflow: clip;
    white-space: nowrap;
  }

  .top-stats {
    display: grid;
    grid-template-columns: 40px repeat(2, minmax(0, 1fr));
    width: 170px;
    gap: 4px;
  }
  .account-control { min-width: 0; }
  .account-button { width: 40px; min-width: 40px; height: 44px; min-height: 44px; padding: 3px; }
  .account-button b { display: none; }
  .stat-card { min-width: 0; height: 44px; padding: 4px 5px; }
  .stat-card span { font-size: .56rem; }
  .stat-card strong { margin-top: 1px; font-size: .82rem; }

  .utility-rail {
    grid-template-columns: repeat(5, 1fr);
    min-width: 0;
    height: 42px;
    padding: 2px;
    gap: 3px;
  }
  .utility-button {
    min-width: 0;
    min-height: 36px;
    padding: 4px 3px;
    font-size: .68rem;
  }
  .utility-button span { display: none; }

  .game-layout {
    grid-template-rows: minmax(0, 1fr) 190px;
    gap: 6px;
    padding-top: 6px;
  }

  .boss-header {
    top: 6px;
    left: 6px;
    right: 6px;
    min-height: 96px;
    padding: 7px 9px;
  }
  .boss-header h2 { font-size: 1.08rem; }
  .health-track { height: 15px; }
  .mood-badge { padding: 4px 7px; }
  .damage-readout { padding: 5px 7px; }

  .battle-stats {
    top: 112px;
    left: 6px;
    right: 6px;
    padding: 3px;
  }
  .battle-stats dl div,
  .battle-stats dl div:nth-child(2),
  .battle-stats dl div:nth-child(3) { min-height: 38px; padding: 4px 7px; }
  .battle-stats dt { font-size: .6rem; }
  .battle-stats dd { margin-top: 2px; font-size: .72rem; }

  .hit-stage { top: 154px; bottom: 67px; }
  .boss-sprite { height: min(130%, 610px); bottom: -7%; }
  .target-ring { width: min(118vw, 560px); bottom: -25%; }
  .tap-prompt { bottom: 2px; max-width: calc(100% - 16px); padding: 5px 8px; }
  .tap-prompt kbd { display: none; }
  .tap-prompt span { font-size: 0; }
  .tap-prompt span::after { content: "화면을 탭해서 공격"; font-size: .72rem; }

  .rage-box {
    left: 6px;
    right: 6px;
    bottom: 5px;
    min-height: 58px;
    grid-template-columns: minmax(0, 1fr) 108px;
    padding: 5px 7px;
  }
  .rage-status { min-height: 42px; font-size: .66rem; }

  .shop-drawer,
  .shop-drawer:not(.open),
  .shop-drawer.open { height: 190px; padding: 6px; }
  .shop-drawer .panel-heading { min-height: 24px; padding-bottom: 4px; }
  .shop-title h2 { font-size: .82rem; }
  .shop-tabs { top: 5px; right: 5px; width: 69%; }
  .shop-tab { min-height: 30px; font-size: .68rem; }
  .shop-page { margin-top: 2px; }
  .shop-page.active { padding-bottom: 6px; scroll-snap-type: x proximity; }
  .weapon-list,
  .upgrade-list,
  .automation-list,
  .prestige-list { grid-auto-columns: minmax(250px, 84vw); gap: 8px; margin-top: 5px; }
  .weapon-card,
  .upgrade-card,
  .automation-card,
  .prestige-card { min-height: 70px; scroll-snap-align: start; }
  .bulk-buy-bar { width: 84vw; min-height: 34px; margin-top: 3px; }
  .bulk-buy-bar button { min-height: 30px; }

  .skin-menu,
  .ranking-panel {
    top: 104px;
    right: 4px;
    width: calc(100% - 8px);
    max-height: calc(100% - 110px);
  }
  .record-drawer,
  .rebirth-panel { top: 4px; max-height: calc(100% - 8px); }
  .ranking-list { max-height: min(42vh, 320px); }
}

@media (max-width: 600px) and (max-height: 650px) and (orientation: portrait) {
  .topbar {
    grid-template-rows: 42px 34px;
    min-height: 80px;
    padding-bottom: 4px;
  }
  h1 { font-size: 1.05rem; }
  .top-stats { height: 40px; }
  .account-button,
  .stat-card { height: 38px; min-height: 38px; }
  .utility-rail { height: 34px; }
  .utility-button { min-height: 30px; padding-block: 2px; font-size: .62rem; }

  .game-layout { grid-template-rows: minmax(0, 1fr) 150px; gap: 4px; padding-top: 4px; }
  .boss-header { top: 4px; left: 4px; right: 4px; min-height: 76px; gap: 3px 7px; padding: 4px 7px; }
  .boss-header h2 { font-size: .92rem; }
  .eyebrow { font-size: .58rem; }
  .health-meta { font-size: .58rem; }
  .health-track { height: 12px; }
  .mood-badge { padding: 2px 5px; font-size: .55rem; }
  .damage-readout { padding: 3px 5px; font-size: .62rem; }
  .battle-stats { display: none; }
  .hit-stage { top: 84px; bottom: 51px; }
  .boss-sprite { height: min(142%, 430px); bottom: -13%; }
  .target-ring { bottom: -38%; }
  .tap-prompt { padding: 3px 6px; }
  .tap-prompt span::after { font-size: .61rem; }
  .rage-box { left: 4px; right: 4px; bottom: 4px; min-height: 44px; padding: 3px 5px; grid-template-columns: minmax(0, 1fr) 96px; }
  .rage-track { height: 12px; }
  .rage-status { min-height: 34px; font-size: .56rem; }

  .shop-drawer,
  .shop-drawer:not(.open),
  .shop-drawer.open { height: 150px; padding: 4px; }
  .shop-drawer .panel-heading { min-height: 20px; padding-bottom: 2px; }
  .shop-title h2 { font-size: .72rem; }
  .shop-tabs { top: 3px; right: 3px; padding: 1px; }
  .shop-tab { min-height: 25px; font-size: .6rem; }
  .weapon-list,
  .upgrade-list,
  .automation-list,
  .prestige-list { margin-top: 3px; }
  .weapon-card,
  .upgrade-card,
  .automation-card,
  .prestige-card { min-height: 62px; }
  .bulk-buy-bar { min-height: 30px; margin-top: 2px; padding-block: 1px; }
  .bulk-buy-bar button { min-height: 26px; }
}

@media (max-width: 350px) and (orientation: portrait) {
  h1 { font-size: 0; }
  h1::after { content: "보스 브레이커"; font-size: 1.04rem; }
  .topbar { grid-template-columns: minmax(0, 1fr) 166px; }
  .top-stats { width: 166px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .game-shell {
    height: 100dvh;
    min-height: 0;
    padding: max(3px, env(safe-area-inset-top)) max(3px, env(safe-area-inset-right)) max(3px, env(safe-area-inset-bottom)) max(3px, env(safe-area-inset-left));
  }

  .topbar {
    grid-template-columns: minmax(130px, 1fr) auto auto;
    grid-template-rows: 40px;
    min-height: 40px;
    height: 40px;
    gap: 5px;
    padding: 1px 4px 4px;
  }
  .brand-block { grid-column: 1; grid-row: 1; min-width: 0; }
  h1 { overflow: hidden; font-size: clamp(.9rem, 2.6vw, 1.15rem); white-space: nowrap; }

  .utility-rail {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    height: 35px;
    padding: 2px;
    gap: 2px;
  }
  .utility-button { min-width: 48px; min-height: 30px; padding: 3px 5px; font-size: .6rem; }
  .utility-button span { display: none; }

  .top-stats {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    width: auto;
    gap: 3px;
  }
  .account-button { width: 36px; min-width: 36px; min-height: 34px; padding: 2px; }
  .account-button b { display: none; }
  .stat-card { min-width: 62px; height: 34px; padding: 3px 6px; }
  .stat-card span { font-size: .52rem; }
  .stat-card strong { margin-top: 0; font-size: .74rem; }

  .game-layout {
    grid-template-columns: clamp(210px, 29vw, 245px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 5px;
    padding-top: 5px;
  }
  .arena { grid-column: 2; grid-row: 1; }
  .shop-drawer,
  .shop-drawer:not(.open),
  .shop-drawer.open {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 100%;
    padding: 5px;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, .42), inset -2px 0 0 #f2c94c;
  }
  .shop-drawer .panel-heading { min-height: 22px; padding-bottom: 3px; }
  .panel-kicker { display: none; }
  .shop-title h2 { font-size: .78rem; }
  .shop-tabs { position: static; width: 100%; margin-top: 4px; padding: 2px; }
  .shop-tab { min-height: 28px; font-size: .62rem; }
  .shop-page { min-height: 0; margin-top: 2px; overflow-x: hidden; overflow-y: auto; }
  .shop-page.active { overflow-x: hidden; overflow-y: auto; padding: 1px 3px 5px 1px; }
  .weapon-list,
  .upgrade-list,
  .automation-list,
  .prestige-list {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 5px;
    margin-top: 4px;
    padding: 0 3px 5px 0;
  }
  .weapon-card,
  .upgrade-card,
  .automation-card,
  .prestige-card {
    min-height: 56px;
    padding: 5px 5px 5px 8px;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 5px;
    box-shadow: 3px 3px 0 #030509;
  }
  .weapon-icon,
  .upgrade-icon,
  .automation-icon,
  .prestige-icon { width: 32px; height: 32px; font-size: 1rem; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .55); }
  .weapon-copy strong,
  .upgrade-copy strong,
  .automation-copy strong,
  .prestige-copy strong { font-size: .72rem; }
  .weapon-copy small,
  .upgrade-copy small,
  .automation-copy small,
  .prestige-copy small { margin-top: 2px; font-size: .56rem; }
  .price,
  .prestige-price { min-width: 44px; padding: 5px 5px 4px 8px; font-size: .65rem; }
  .price small { font-size: .45rem; }
  .weapon-actions { min-width: 58px; gap: 3px; }
  .weapon-action { min-height: 24px; padding: 3px 4px; font-size: .54rem; }
  .weapon-action small { margin-bottom: 2px; font-size: .42rem; }
  .bulk-buy-bar { position: static; width: 100%; min-height: 31px; margin-top: 3px; padding: 2px 3px 2px 6px; font-size: .56rem; }
  .bulk-buy-bar > div { grid-template-columns: repeat(2, 42px); }
  .bulk-buy-bar button { min-height: 26px; font-size: .65rem; }

  .boss-header {
    top: 4px;
    left: 4px;
    right: 4px;
    width: auto;
    translate: none;
    grid-template-columns: minmax(92px, .65fr) minmax(160px, 2fr) minmax(84px, .7fr);
    min-height: 50px;
    gap: 7px;
    padding: 4px 7px;
  }
  .eyebrow { font-size: .55rem; }
  .boss-header h2 { font-size: .82rem; }
  .health-meta { font-size: .55rem; }
  .health-track { height: 11px; border-width: 1px; }
  .boss-status { min-width: 0; gap: 2px; }
  .mood-badge { padding: 2px 4px; border-width: 1px; font-size: .5rem; }
  .damage-readout { padding: 3px 4px; border-width: 1px; font-size: .58rem; }
  .battle-stats { display: none; }

  .hit-stage { inset: 58px 0 52px; }
  .boss-sprite { height: min(138%, 480px); bottom: -12%; }
  .target-ring { width: min(66vw, 430px); bottom: -42%; }
  .tap-prompt { bottom: 0; padding: 3px 6px; }
  .tap-prompt kbd { display: none; }
  .tap-prompt span { font-size: 0; }
  .tap-prompt span::after { content: "탭해서 공격"; font-size: .58rem; }

  .rage-box {
    left: 4px;
    right: 4px;
    bottom: 4px;
    min-height: 44px;
    grid-template-columns: minmax(0, 1fr) 92px;
    padding: 3px 5px;
  }
  .combat-chip { display: none; }
  .rage-meta { font-size: .58rem; }
  .rage-track { height: 11px; }
  .rage-status { min-height: 34px; font-size: .56rem; }

  .skin-menu,
  .ranking-panel,
  .record-drawer,
  .rebirth-panel { top: 4px; right: 4px; width: min(370px, calc(100% - 8px)); max-height: calc(100% - 8px); }
  .ranking-list { max-height: 54vh; }
}

/* Mobile HUD v2: a game-first layout instead of a compressed desktop dashboard. */
.hit-stage { touch-action: none; }
.hit-stage.slap-ready { cursor: grab; }

@media (max-width: 600px) and (orientation: portrait) {
  html,
  body,
  .game-shell,
  .game-layout { max-width: 100vw; overflow-x: hidden; }
  .game-layout,
  .arena,
  .shop-drawer,
  .shop-page { min-width: 0; }
  .shop-drawer,
  .shop-page.active { width: 100%; max-width: 100%; }
  body { background: #03070d; }

  .game-shell {
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    background:
      radial-gradient(circle at 50% 18%, rgba(38, 194, 255, .1), transparent 46%),
      #040912;
  }

  .topbar {
    position: relative;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 52px 44px;
    min-height: 102px;
    gap: 5px;
    padding: 5px 7px 6px;
    border: 0;
    background: linear-gradient(180deg, #0c1b2b 0%, #07111e 100%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .42), inset 0 -1px 0 rgba(80, 217, 255, .18);
  }

  .brand-block { display: none; }

  .top-stats {
    grid-column: 1;
    grid-row: 1;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    height: 52px;
    gap: 6px;
  }
  .account-control { min-width: 0; }
  .account-button {
    width: 44px;
    min-width: 44px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border: 1px solid rgba(80, 217, 255, .34);
    border-radius: 14px;
    background: linear-gradient(145deg, #18334b, #0b1828);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  }
  .account-button b { display: none; }
  .account-button span { font-size: 1rem; }

  .stat-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    height: 46px;
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(24, 44, 66, .96), rgba(10, 22, 37, .98));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  }
  .rebirth-card {
    border-color: rgba(185, 121, 255, .3);
    background: linear-gradient(145deg, rgba(74, 43, 111, .9), rgba(22, 20, 48, .98));
  }
  .stat-card span { font-size: .64rem; line-height: 1.15; }
  .stat-card strong { overflow: hidden; margin: 0; font-size: .98rem; text-align: right; text-overflow: ellipsis; }

  .utility-rail {
    position: static;
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: 44px;
    min-width: 0;
    padding: 3px;
    gap: 3px;
    translate: none;
    border: 1px solid rgba(80, 217, 255, .14);
    border-radius: 14px;
    background: rgba(3, 10, 18, .76);
  }
  .utility-button {
    display: flex;
    width: auto;
    min-width: 0;
    min-height: 36px;
    padding: 3px 5px;
    justify-content: center;
    gap: 5px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    color: #c9d8e8;
    font: 800 .72rem/1 "Noto Sans KR", sans-serif;
  }
  .utility-button span { display: inline; color: var(--cyan); font-size: .78rem; }
  .utility-button:hover,
  .utility-button[aria-expanded="true"] { background: linear-gradient(145deg, #1b4964, #142b42); }
  .utility-button.skin-toggle { border: 0; background: transparent; }
  .utility-button.skin-toggle[aria-expanded="true"] { background: linear-gradient(145deg, #583d7a, #31264c); }
  .utility-button.character-toggle { border: 0; background: transparent; }
  .utility-button.character-toggle[aria-expanded="true"] { background: linear-gradient(145deg, #23616d, #163640); }

  .game-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 204px;
    gap: 0;
    padding: 0;
  }
  .arena {
    grid-column: 1;
    grid-row: 1;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .boss-header {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    min-height: 84px;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 6px 9px;
    padding: 8px 9px;
    translate: none;
    border: 1px solid rgba(83, 211, 255, .28);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(10, 27, 44, .96), rgba(5, 14, 25, .94));
    box-shadow: 0 9px 24px rgba(0, 0, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .06);
    backdrop-filter: blur(8px);
  }
  .boss-identity {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 8px;
    border-right: 1px solid rgba(80, 217, 255, .18);
  }
  .eyebrow { color: #5ee0ff; font-size: .62rem; letter-spacing: .09em; }
  .boss-header h2 { margin-top: 5px; font-size: .9rem; line-height: 1.05; }
  .health-wrap { grid-column: 2; grid-row: 1; align-self: end; max-width: none; }
  .health-meta { margin-bottom: 4px; font-size: .64rem; }
  .health-meta span { font-size: 0; }
  .health-meta span::after { content: "BOSS HP"; color: #7f98ad; font-size: .58rem; letter-spacing: .08em; }
  .health-track {
    height: 16px;
    padding: 2px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #02070d;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  }
  .health-fill { border-radius: 999px; box-shadow: 0 0 10px rgba(255, 77, 109, .42); }
  .boss-status {
    grid-column: 2;
    grid-row: 2;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
  }
  .mood-badge,
  .damage-readout {
    min-width: 0;
    padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    box-shadow: none;
    font-size: .6rem;
    transform: none;
  }
  .mood-badge { background: #f0c84d; }
  .damage-readout { overflow: hidden; background: rgba(23, 38, 57, .9); text-overflow: ellipsis; white-space: nowrap; }
  .battle-stats { display: none; }

  .hit-stage { inset: 100px 0 68px; }
  .boss-sprite { height: min(134%, 610px); bottom: -8%; }
  .target-ring { width: min(118vw, 560px); bottom: -28%; }
  .tap-prompt {
    bottom: 4px;
    max-width: calc(100% - 20px);
    padding: 5px 9px;
    border-color: rgba(80, 217, 255, .22);
    border-radius: 999px;
    background: rgba(2, 8, 15, .72);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .24);
  }
  .tap-prompt kbd { display: none; }
  .tap-prompt span { font-size: 0; }
  .tap-prompt span::after { content: "탭 공격 · 누른 채 흔들면 싸대기"; font-size: .68rem; }
  .hit-stage.slap-mode::after {
    top: 6px;
    padding: 6px 10px;
    border-width: 1px;
    border-radius: 999px;
    box-shadow: 0 5px 16px rgba(0, 0, 0, .35);
    font-size: .68rem;
  }

  .rage-box {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    min-height: 52px;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 8px;
    padding: 6px 8px;
    translate: none;
    border: 1px solid rgba(255, 196, 76, .22);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(21, 25, 34, .96), rgba(8, 13, 22, .94));
    box-shadow: 0 8px 20px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  .combat-chip { display: none; }
  .rage-meta { margin-bottom: 4px; font-size: .64rem; }
  .rage-track { height: 12px; padding: 2px; overflow: hidden; border: 0; border-radius: 999px; }
  .rage-fill { border-radius: 999px; }
  .rage-status {
    min-width: 0;
    min-height: 38px;
    padding: 0 6px;
    border: 0;
    border-radius: 11px;
    background: #1c2c40;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    font-size: .6rem;
  }

  .shop-drawer,
  .shop-drawer:not(.open),
  .shop-drawer.open {
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-rows: 28px 34px minmax(0, 1fr);
    width: 100%;
    height: 204px;
    padding: 7px 8px 8px;
    gap: 4px;
    border: 0;
    border-top: 1px solid rgba(255, 224, 107, .42);
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, #151d29, #080d15);
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .46), inset 0 2px 0 rgba(255, 224, 107, .12);
  }
  .shop-drawer .panel-heading { min-height: 28px; padding: 0; }
  .panel-kicker { display: none; }
  .shop-title h2 { font-size: .86rem; letter-spacing: .03em; }
  .shop-tabs {
    position: static;
    width: 100%;
    height: 34px;
    margin: 0;
    padding: 3px;
    gap: 3px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 11px;
    background: #070b11;
    box-shadow: none;
  }
  .shop-tab {
    min-height: 26px;
    border: 0;
    border-radius: 8px;
    font: 800 .66rem/1 "Noto Sans KR", sans-serif;
  }
  .shop-tab::before { display: none; }
  .shop-page { min-height: 0; margin: 0; }
  .shop-page.active { overflow-x: auto; overflow-y: hidden; padding: 1px 2px 5px; scroll-snap-type: x proximity; }
  .weapon-list,
  .upgrade-list,
  .automation-list,
  .prestige-list { grid-auto-columns: minmax(252px, 82vw); gap: 8px; margin-top: 3px; }
  .weapon-card,
  .upgrade-card,
  .automation-card,
  .prestige-card { min-height: 70px; border-width: 1px; border-radius: 12px; box-shadow: 0 5px 12px rgba(0, 0, 0, .34); }
  .weapon-card::before,
  .upgrade-card::before,
  .automation-card::before,
  .prestige-card::before { width: 5px; }
  .bulk-buy-bar { width: 82vw; min-height: 32px; margin-top: 2px; border-radius: 10px; }
  .skin-menu,
  .ranking-panel,
  .record-drawer,
  .rebirth-panel { border-radius: 16px; }
}

@media (max-width: 600px) and (max-height: 650px) and (orientation: portrait) {
  .topbar { grid-template-rows: 44px 36px; min-height: 85px; padding-block: 3px 5px; }
  .top-stats { height: 44px; }
  .account-button,
  .stat-card { height: 40px; min-height: 40px; }
  .utility-rail { height: 36px; padding: 2px; }
  .utility-button { min-height: 30px; font-size: .64rem; }
  .game-layout { grid-template-rows: minmax(0, 1fr) 150px; }
  .boss-header { top: 5px; min-height: 72px; padding: 6px 8px; }
  .boss-header h2 { font-size: .78rem; }
  .health-track { height: 13px; }
  .hit-stage { inset: 82px 0 56px; }
  .rage-box { bottom: 5px; min-height: 46px; }
  .shop-drawer,
  .shop-drawer:not(.open),
  .shop-drawer.open { height: 150px; grid-template-rows: 24px 30px minmax(0, 1fr); padding: 4px 6px 5px; }
  .shop-drawer .panel-heading { min-height: 24px; }
  .shop-tabs { height: 30px; }
  .shop-tab { min-height: 24px; }
  .weapon-card,
  .upgrade-card,
  .automation-card,
  .prestige-card { min-height: 61px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .topbar {
    grid-template-columns: minmax(180px, 1fr) auto;
    grid-template-rows: 42px;
    min-height: 42px;
    height: 42px;
    padding: 3px 5px;
    border: 0;
    background: linear-gradient(90deg, #0b1c2d, #07111e);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .35);
  }
  .brand-block { display: none; }
  .utility-rail {
    grid-column: 1;
    grid-row: 1;
    position: static;
    display: grid;
    grid-template-columns: repeat(5, minmax(38px, 62px));
    width: fit-content;
    height: 36px;
    padding: 2px;
    gap: 2px;
    translate: none;
    border-radius: 11px;
    background: rgba(3, 9, 16, .7);
  }
  .utility-button { width: auto; min-width: 0; min-height: 32px; padding: 3px 6px; border: 0; border-radius: 8px; box-shadow: none; }
  .top-stats { grid-column: 2; grid-row: 1; height: 36px; }
  .account-button,
  .stat-card { height: 36px; min-height: 36px; border-radius: 10px; box-shadow: none; }
  .boss-header {
    top: 5px;
    left: 5px;
    right: 5px;
    min-height: 54px;
    grid-template-columns: 78px minmax(150px, 1fr) auto;
    gap: 6px;
    padding: 5px 7px;
    border: 1px solid rgba(80, 217, 255, .24);
    border-radius: 12px;
    background: rgba(7, 20, 34, .94);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .32);
  }
  .boss-header h2 { font-size: .76rem; }
  .health-track { height: 12px; border: 0; border-radius: 999px; overflow: hidden; }
  .health-fill { border-radius: 999px; }
  .boss-status { flex-direction: row; align-items: center; }
  .mood-badge,
  .damage-readout { padding: 3px 5px; border-radius: 999px; box-shadow: none; transform: none; }
  .hit-stage { inset: 64px 0 50px; }
  .tap-prompt span::after { content: "탭 공격 · 누른 채 흔들기"; }
  .rage-box { border-radius: 12px; }
  .shop-drawer,
  .shop-drawer:not(.open),
  .shop-drawer.open { border-radius: 14px 0 0 14px; }
}

/* Keep compact K/M/B values crisp across desktop and mobile displays. */
:root {
  --number-font: "Arial Black", "Segoe UI Black", "Segoe UI", "Noto Sans KR", sans-serif;
}

.stat-card strong,
.price,
.prestige-price,
.health-meta b,
.damage-readout,
.battle-stats dd,
.records dd,
.ranking-score,
.ranking-own-score,
.skin-actions strong,
.auto-summary strong,
.prestige-summary strong,
.rage-meta strong,
.combat-chip strong,
#loopBonus,
#loopRewardText {
  font-family: var(--number-font);
  font-weight: 900;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: .025em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke: .42px rgba(2, 4, 9, .96);
  text-shadow:
    1px 0 0 rgba(2, 4, 9, .96),
    -1px 0 0 rgba(2, 4, 9, .96),
    0 1px 0 rgba(2, 4, 9, .96),
    0 -1px 0 rgba(2, 4, 9, .96),
    1px 1px 0 rgba(2, 4, 9, .72);
}

@media (max-width: 600px) and (orientation: portrait) {
  .price,
  .prestige-price { font-size: .86rem; }
  .stat-card strong { font-size: .86rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .price,
  .prestige-price {
    font-size: .72rem;
    -webkit-text-stroke-width: .3px;
  }
}

/* Boss phase gates and the hold-to-slap combo HUD. */
.health-track { position: relative; overflow: hidden; }
.health-fill { position: relative; z-index: 1; }
.health-gate {
  position: absolute;
  z-index: 2;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: rgba(255, 246, 202, .72);
  box-shadow: 0 0 0 1px rgba(4, 9, 16, .45), 0 0 7px rgba(255, 224, 107, .5);
  pointer-events: none;
}
.gate-75 { left: 25%; }
.gate-50 { left: 50%; }
.gate-25 { left: 75%; }
.phase-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding: 2px 6px;
  border: 1px solid rgba(90, 222, 255, .42);
  border-radius: 999px;
  background: rgba(20, 65, 91, .72);
  color: #80e9ff;
  font: 900 .58rem/1 "Arial Black", "Noto Sans KR", sans-serif;
  font-style: normal;
  letter-spacing: .06em;
  vertical-align: 1px;
}
.phase-badge[data-phase="2"] { border-color: rgba(255, 215, 88, .6); background: rgba(104, 72, 10, .78); color: #ffe26b; }
.phase-badge[data-phase="3"] { border-color: rgba(255, 139, 66, .62); background: rgba(119, 52, 10, .8); color: #ffab61; }
.phase-badge[data-phase="4"] { border-color: rgba(255, 67, 108, .72); background: rgba(126, 18, 50, .86); color: #ff87a3; animation: final-phase-pulse .55s steps(2, end) infinite; }
.boss-phase-2 .health-fill { background: linear-gradient(90deg, #ff6c45, #ff9f43); }
.boss-phase-3 .health-fill { background: linear-gradient(90deg, #ff3b67, #ff6b35); }
.boss-phase-4 .health-fill { background: linear-gradient(90deg, #bb2250, #ff315e, #ff7a31); box-shadow: 0 0 12px rgba(255, 46, 91, .72); }

.phase-banner {
  position: absolute;
  z-index: 18;
  top: 20px;
  left: 50%;
  display: grid;
  min-width: 240px;
  padding: 10px 24px 12px;
  translate: -50% -24px;
  scale: .86;
  border: 2px solid #ffe06b;
  background: linear-gradient(135deg, rgba(138, 19, 53, .97), rgba(36, 12, 34, .97));
  color: #fff4c5;
  opacity: 0;
  box-shadow: 7px 8px 0 rgba(0, 0, 0, .46), inset 0 0 18px rgba(255, 104, 119, .28);
  text-align: center;
  pointer-events: none;
}
.phase-banner span { color: #ffb0bf; font: 900 .57rem/1 "Arial Black", sans-serif; letter-spacing: .18em; }
.phase-banner strong { margin-top: 5px; font: 1000 1.12rem/1 "Noto Sans KR", sans-serif; }
.phase-banner.active { animation: phase-banner-in 1.1s cubic-bezier(.18,.82,.22,1) both; }
.arena.phase-flash { animation: phase-arena-flash .42s steps(2, end) 2; }

.slap-combo-hud {
  position: absolute;
  z-index: 16;
  top: 18px;
  left: 18px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  width: 190px;
  padding: 9px 10px 10px;
  translate: -12px 0;
  border: 1px solid rgba(255, 224, 107, .56);
  border-left: 5px solid #ff416c;
  background: linear-gradient(135deg, rgba(13, 18, 31, .94), rgba(73, 13, 43, .9));
  color: #fff6c7;
  opacity: 0;
  box-shadow: 5px 6px 0 rgba(0, 0, 0, .34);
  pointer-events: none;
  transition: opacity .16s ease, translate .16s ease, border-color .16s ease;
}
.slap-combo-hud.active { translate: 0 0; opacity: 1; }
.slap-combo-hud > span { color: #ff97af; font: 900 .57rem/1 "Arial Black", sans-serif; letter-spacing: .1em; }
.slap-combo-hud > strong { justify-self: end; color: #ffe36b; font: 1000 1.42rem/.85 "Arial Black", sans-serif; text-shadow: 2px 2px 0 #7c153b; }
.slap-combo-track { grid-column: 1 / -1; height: 6px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: #080b12; }
.slap-combo-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff3f70, #ff9b43, #ffe36b); box-shadow: 0 0 8px #ff5b73; transition: width .12s ease; }
.slap-combo-hud small { grid-column: 1 / -1; margin-top: 5px; color: #ffd6df; font: 800 .62rem/1 "Noto Sans KR", sans-serif; }
.slap-combo-hud[data-tier="2"],
.slap-combo-hud[data-tier="3"],
.slap-combo-hud[data-tier="4"] { border-color: #ffe36b; filter: saturate(1.18); }
.hit-stage.slap-tier-3,
.hit-stage.slap-tier-4 { background: radial-gradient(circle at 50% 58%, rgba(255, 55, 104, .12), transparent 43%); }
.hit-stage.slap-tier-4 .slap-combo-hud { animation: slap-hud-max .28s steps(2, end) infinite; }

@keyframes phase-banner-in {
  0% { opacity: 0; translate: -50% -26px; scale: .78; }
  14%, 72% { opacity: 1; translate: -50% 0; scale: 1; }
  100% { opacity: 0; translate: -50% 10px; scale: 1.04; }
}
@keyframes phase-arena-flash { 50% { box-shadow: inset 0 0 70px rgba(255, 45, 91, .42); } }
@keyframes final-phase-pulse { 50% { filter: brightness(1.45); } }
@keyframes slap-hud-max { 50% { filter: brightness(1.32) saturate(1.35); } }

/* 자동 장비마다 고유 색을 유지하고, 환생 강화가 적용된 치명타를 더 선명하게 표시한다. */
.automation-card::before {
  background: linear-gradient(var(--machine-color, #45d8d2), color-mix(in srgb, var(--machine-color, #45d8d2) 42%, #061523));
}
.automation-card .automation-icon {
  border-color: color-mix(in srgb, var(--machine-color, #45d8d2) 72%, #ffffff);
  box-shadow: 0 0 16px color-mix(in srgb, var(--machine-color, #45d8d2) 48%, transparent);
}
.auto-impact-ring.auto-critical {
  width: 88px;
  height: 88px;
  border-width: 10px;
  filter: brightness(1.45) saturate(1.35);
  box-shadow: 0 0 28px var(--auto-color, #ffe36b);
}
.auto-spark.auto-critical {
  padding: 3px 7px;
  border-width: 2px;
  background: #fff3b0;
  color: #210b10;
  font-size: .9rem;
  box-shadow: 0 0 18px var(--auto-color, #ffe36b);
}

@media (max-width: 600px) and (orientation: portrait) {
  .phase-badge { display: none; }
  .health-gate { top: 1px; bottom: 1px; width: 1px; }
  .phase-banner { top: 8px; min-width: 190px; padding: 8px 16px 9px; }
  .phase-banner strong { font-size: .9rem; }
  .slap-combo-hud {
    top: 8px;
    left: 7px;
    width: 142px;
    padding: 6px 7px 7px;
    border-left-width: 4px;
    border-radius: 9px;
    box-shadow: 3px 4px 0 rgba(0, 0, 0, .3);
  }
  .slap-combo-hud > span { font-size: .48rem; }
  .slap-combo-hud > strong { font-size: 1.08rem; }
  .slap-combo-track { height: 4px; margin-top: 5px; }
  .slap-combo-hud small { margin-top: 4px; font-size: .52rem; }
  .tap-prompt span::after { content: "탭 공격 · 누른 채 왕복하면 콤보"; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .phase-badge { display: none; }
  .phase-banner { top: 5px; min-width: 178px; padding: 6px 14px 7px; }
  .phase-banner strong { font-size: .78rem; }
  .slap-combo-hud { top: 5px; left: 5px; width: 128px; padding: 5px 6px; border-left-width: 3px; }
  .slap-combo-hud > span { font-size: .42rem; }
  .slap-combo-hud > strong { font-size: .92rem; }
  .slap-combo-track { height: 3px; margin-top: 4px; }
  .slap-combo-hud small { margin-top: 3px; font-size: .46rem; }
  .tap-prompt span::after { content: "탭 · 누른 채 왕복"; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}

/* Account save status */
.account-menu #accountSyncStatus[data-tone="success"] { color: #72ebbd; }
.account-menu #accountSyncStatus[data-tone="syncing"] { color: #ffe06b; }
.account-menu #accountSyncStatus[data-tone="error"] { color: #ff91a6; }

/* Mobile cockpit v3: top resources, full combat stage, store sheet, thumb dock. */
@media (max-width: 720px) and (orientation: portrait) {
  html,
  body,
  .game-shell { width: 100%; height: 100dvh; min-height: 0; overflow: hidden; }

  .game-shell {
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
    background: linear-gradient(180deg, #07121f, #02060c 72%);
  }

  .topbar {
    position: relative;
    z-index: 45;
    display: block;
    flex: 0 0 58px;
    width: 100%;
    min-height: 58px;
    height: 58px;
    padding: 6px 7px 5px;
    border: 0;
    border-bottom: 1px solid rgba(89, 220, 255, .2);
    background: linear-gradient(180deg, rgba(15, 33, 51, .99), rgba(7, 17, 29, .99));
    box-shadow: 0 7px 18px rgba(0, 0, 0, .42);
  }
  .brand-block { display: none; }
  .top-stats {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
    height: 46px;
    gap: 6px;
  }
  .account-control { min-width: 0; }
  .account-button {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border: 1px solid rgba(82, 222, 255, .38);
    border-radius: 14px;
    background: linear-gradient(145deg, #1b4660, #0a1b2b);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  }
  .account-button b { display: none; }
  .account-button span { font-size: 1.05rem; }
  .account-menu {
    position: fixed;
    z-index: 90;
    top: calc(env(safe-area-inset-top) + 56px);
    left: 7px;
    right: auto;
    width: min(310px, calc(100vw - 14px));
    border-radius: 14px;
  }
  .stat-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    min-width: 0;
    height: 46px;
    min-height: 46px;
    padding: 5px 9px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(27, 49, 72, .98), rgba(8, 19, 32, .99));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  .rebirth-card { border-color: rgba(187, 119, 255, .35); background: linear-gradient(145deg, #412964, #15152d); }
  .stat-card span { font-size: .62rem; line-height: 1.1; }
  .stat-card strong { overflow: hidden; margin: 0; font-size: .92rem; text-align: right; text-overflow: ellipsis; white-space: nowrap; }

  .utility-rail {
    position: fixed;
    z-index: 70;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    height: calc(58px + env(safe-area-inset-bottom));
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom));
    gap: 3px;
    translate: none;
    border: 0;
    border-top: 1px solid rgba(255, 224, 107, .3);
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, rgba(18, 28, 42, .99), rgba(4, 9, 16, .995));
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .54);
  }
  .utility-button,
  .utility-button.skin-toggle,
  .utility-button.character-toggle,
  .utility-button.rebirth-toggle {
    display: grid;
    width: auto;
    min-width: 0;
    min-height: 46px;
    padding: 4px 2px;
    place-items: center;
    gap: 2px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    box-shadow: none;
    color: #b8c9dc;
    font: 800 .65rem/1 "Noto Sans KR", sans-serif;
  }
  .utility-button span,
  .utility-button.skin-toggle span,
  .utility-button.character-toggle span,
  .utility-button.rebirth-toggle span { display: block; color: #69e3ff; font-size: .9rem; }
  .utility-button[aria-expanded="true"] {
    background: linear-gradient(145deg, #31506d, #19283d);
    color: white;
    box-shadow: inset 0 0 0 1px rgba(255, 224, 107, .38);
  }

  .game-layout {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 196px;
    min-height: 0;
    padding: 0 0 58px;
    gap: 0;
  }
  .arena {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .arena::before { top: 58%; }
  .arena-grid { top: 58%; }

  .boss-header {
    position: absolute;
    z-index: 22;
    top: 6px;
    right: 7px;
    left: 7px;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    grid-template-rows: 34px 24px;
    min-height: 68px;
    width: auto;
    padding: 5px 7px;
    gap: 2px 7px;
    translate: none;
    border: 1px solid rgba(82, 222, 255, .26);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(11, 29, 46, .97), rgba(4, 12, 22, .95));
    box-shadow: 0 7px 18px rgba(0, 0, 0, .38);
    backdrop-filter: blur(9px);
  }
  .boss-identity {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: stretch;
    justify-content: center;
    padding-right: 6px;
    border-right: 1px solid rgba(82, 222, 255, .16);
  }
  .eyebrow { font-size: .54rem; letter-spacing: .07em; }
  .boss-header h2 { margin-top: 4px; font-size: .78rem; line-height: 1; }
  .health-wrap { grid-column: 2; grid-row: 1; align-self: center; max-width: none; }
  .health-meta { margin-bottom: 3px; font-size: .58rem; }
  .health-meta span { font-size: 0; }
  .health-meta span::after { content: "BOSS HP"; color: #8ba3ba; font-size: .52rem; letter-spacing: .08em; }
  .health-track { height: 14px; padding: 2px; border: 0; border-radius: 999px; background: #01050a; }
  .health-fill { border-radius: 999px; }
  .boss-status { grid-column: 2; grid-row: 2; flex-direction: row; align-items: center; justify-content: space-between; gap: 4px; }
  .mood-badge,
  .damage-readout { min-width: 0; padding: 3px 6px; border: 0; border-radius: 999px; box-shadow: none; font-size: .54rem; transform: none; }
  .damage-readout { overflow: hidden; background: rgba(28, 43, 62, .94); text-overflow: ellipsis; white-space: nowrap; }
  .battle-stats { display: none; }

  .hit-stage { inset: 78px 0 56px; }
  .boss-sprite { height: min(136%, 620px); bottom: -10%; }
  .target-ring { width: min(116vw, 540px); bottom: -31%; }
  .tap-prompt { bottom: 2px; max-width: calc(100% - 14px); padding: 4px 8px; border: 0; border-radius: 999px; background: rgba(2, 7, 13, .7); box-shadow: none; }
  .tap-prompt kbd { display: none; }
  .tap-prompt span { font-size: 0; }
  .tap-prompt span::after { content: "탭 공격 · 누른 채 왕복하면 싸대기"; font-size: .62rem; }

  .rage-box {
    right: 7px;
    bottom: 5px;
    left: 7px;
    width: auto;
    min-height: 46px;
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 6px;
    padding: 5px 7px;
    translate: none;
    border: 1px solid rgba(255, 211, 94, .2);
    border-radius: 13px;
    background: rgba(8, 15, 24, .94);
    box-shadow: 0 7px 16px rgba(0, 0, 0, .34);
  }
  .combat-chip { display: none; }
  .rage-meta { margin-bottom: 3px; font-size: .58rem; }
  .rage-track { height: 10px; padding: 2px; border: 0; border-radius: 999px; }
  .rage-fill { border-radius: 999px; }
  .rage-status { min-height: 34px; padding: 0 5px; border: 0; border-radius: 9px; box-shadow: none; font-size: .53rem; }

  .shop-drawer,
  .shop-drawer:not(.open),
  .shop-drawer.open {
    position: relative;
    z-index: 25;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    grid-column: 1;
    grid-row: 2;
    display: grid;
    grid-template-rows: 26px 34px minmax(0, 1fr);
    width: 100%;
    height: 196px;
    min-height: 0;
    padding: 6px 7px 7px;
    gap: 3px;
    transform: none;
    overflow: hidden;
    border: 0;
    border-top: 1px solid rgba(255, 224, 107, .36);
    border-radius: 16px 16px 0 0;
    background: linear-gradient(180deg, #182230, #080d15);
    box-shadow: 0 -10px 24px rgba(0, 0, 0, .46);
    pointer-events: auto;
  }
  .shop-drawer:not(.open) > :not(.shop-drawer-toggle) { opacity: 1; visibility: visible; pointer-events: auto; }
  .shop-drawer .panel-heading { min-height: 26px; padding: 0; border: 0; }
  .shop-drawer .panel-close,
  .panel-kicker { display: none; }
  .shop-title h2 { font-size: .78rem; letter-spacing: .02em; }
  .shop-tabs { position: static; width: 100%; height: 34px; margin: 0; padding: 3px; gap: 3px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; background: #060a10; box-shadow: none; }
  .shop-tab { min-height: 26px; border: 0; border-radius: 7px; font: 800 .64rem/1 "Noto Sans KR", sans-serif; }
  .shop-tab::before { display: none; }
  .shop-page { min-width: 0; min-height: 0; margin: 0; }
  .shop-page.active { overflow-x: auto; overflow-y: hidden; padding: 1px 2px 4px; scroll-snap-type: x mandatory; }
  .weapon-list,
  .upgrade-list,
  .automation-list,
  .prestige-list { grid-auto-columns: minmax(246px, 82vw); gap: 7px; margin-top: 2px; }
  .weapon-card,
  .upgrade-card,
  .automation-card,
  .prestige-card { min-height: 68px; border-width: 1px; border-radius: 11px; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); scroll-snap-align: center; }
  .bulk-buy-bar { width: 82vw; min-height: 30px; margin-top: 1px; border-radius: 9px; }

  .skin-menu,
  .character-menu,
  .ranking-panel,
  .record-drawer,
  .rebirth-panel {
    position: fixed;
    z-index: 80;
    top: calc(env(safe-area-inset-top) + 64px);
    right: 7px;
    bottom: calc(env(safe-area-inset-bottom) + 64px);
    left: 7px;
    width: auto;
    height: auto;
    max-height: none;
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .62);
  }
  .record-drawer.open { transform: none; }
  .ranking-list { max-height: none; }
}

@media (max-width: 720px) and (max-height: 700px) and (orientation: portrait) {
  .topbar { flex-basis: 52px; min-height: 52px; height: 52px; padding-block: 3px; }
  .top-stats,
  .account-button,
  .stat-card { height: 44px; min-height: 44px; }
  .game-layout { grid-template-rows: minmax(0, 1fr) 154px; }
  .shop-drawer,
  .shop-drawer:not(.open),
  .shop-drawer.open { height: 154px; grid-template-rows: 23px 30px minmax(0, 1fr); padding: 4px 6px 5px; }
  .shop-tabs { height: 30px; }
  .shop-tab { min-height: 23px; }
  .boss-header { min-height: 62px; grid-template-rows: 30px 22px; }
  .hit-stage { inset: 70px 0 50px; }
  .rage-box { min-height: 42px; }
}

@media (max-width: 900px) and (max-height: 700px) and (orientation: landscape) {
  html,
  body,
  .game-shell { height: 100dvh; min-height: 0; overflow: hidden; }
  .game-shell { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  .topbar { flex: 0 0 46px; min-height: 46px; height: 46px; padding: 3px 5px; border: 0; }
  .brand-block { display: none; }
  .top-stats { position: absolute; top: 3px; right: 5px; display: grid; grid-template-columns: 40px 110px 110px; height: 40px; gap: 4px; }
  .account-button,
  .stat-card { height: 40px; min-height: 40px; border-radius: 9px; }
  .account-button { width: 40px; min-width: 40px; }
  .account-button b { display: none; }
  .stat-card { padding: 3px 6px; }
  .stat-card span { font-size: .53rem; }
  .stat-card strong { font-size: .72rem; }
  .utility-rail {
    position: fixed;
    z-index: 70;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    height: calc(46px + env(safe-area-inset-bottom));
    padding: 3px 7px calc(3px + env(safe-area-inset-bottom));
    gap: 4px;
    translate: none;
    border: 0;
    border-top: 1px solid rgba(255, 224, 107, .26);
    border-radius: 0;
    background: rgba(5, 10, 17, .98);
  }
  .utility-button,
  .utility-button.skin-toggle,
  .utility-button.character-toggle,
  .utility-button.rebirth-toggle { display: flex; width: auto; min-width: 0; min-height: 36px; padding: 2px 5px; justify-content: center; gap: 4px; border: 0; border-radius: 8px; background: transparent; box-shadow: none; font-size: .58rem; }
  .utility-button span { display: inline; font-size: .7rem; }
  .game-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 34vw); grid-template-rows: minmax(0, 1fr); padding: 0 0 46px; gap: 0; }
  .arena { grid-column: 1; grid-row: 1; border: 0; box-shadow: none; }
  .shop-drawer,
  .shop-drawer:not(.open),
  .shop-drawer.open { position: relative; top: auto; right: auto; bottom: auto; left: auto; grid-column: 2; grid-row: 1; display: grid; grid-template-rows: 24px 30px minmax(0, 1fr); width: 100%; height: 100%; padding: 5px; gap: 3px; transform: none; overflow: hidden; border: 0; border-left: 1px solid rgba(255, 224, 107, .3); border-radius: 14px 0 0 14px; background: linear-gradient(180deg, #17212e, #080d15); pointer-events: auto; }
  .shop-drawer:not(.open) > :not(.shop-drawer-toggle) { opacity: 1; visibility: visible; pointer-events: auto; }
  .shop-drawer .panel-close,
  .panel-kicker { display: none; }
  .shop-tabs { position: static; width: 100%; height: 30px; margin: 0; }
  .shop-tab { min-height: 24px; font-size: .56rem; }
  .shop-page { min-height: 0; margin: 0; }
  .shop-page.active { height: auto; align-self: stretch; overflow-y: auto; overflow-x: hidden; }
  .weapon-list,
  .upgrade-list,
  .automation-list,
  .prestige-list { display: grid; grid-auto-flow: row; grid-template-columns: 1fr; gap: 5px; }
  .weapon-card,
  .upgrade-card,
  .automation-card,
  .prestige-card { min-height: 58px; }
  .bulk-buy-bar { width: 100%; }
  .boss-header { top: 5px; right: 5px; left: 5px; width: auto; min-height: 58px; grid-template-columns: 70px minmax(0, 1fr); grid-template-rows: 30px 20px; gap: 2px 7px; padding: 4px 6px; translate: none; }
  .boss-identity { grid-column: 1; grid-row: 1 / 3; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-right: 6px; border-right: 1px solid rgba(82, 222, 255, .16); }
  .eyebrow { font-size: .58rem; line-height: 1; letter-spacing: .06em; white-space: nowrap; }
  .boss-header h2 { margin-top: 4px; font-size: .82rem; line-height: 1; white-space: nowrap; }
  .health-wrap { grid-column: 2; grid-row: 1; align-self: center; width: 100%; max-width: none; }
  .boss-status { grid-column: 2; grid-row: 2; min-width: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 4px; }
  .mood-badge,
  .damage-readout { min-width: 0; padding: 3px 5px; border: 0; border-radius: 999px; box-shadow: none; font-size: .58rem; transform: none; }
  .damage-readout { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .battle-stats { display: none; }
  .hit-stage { inset: 66px 0 47px; }
  .rage-box { right: 5px; bottom: 4px; left: 5px; width: auto; min-height: 40px; grid-template-columns: minmax(0, 1fr) 92px; gap: 5px; padding: 4px 6px; translate: none; }
  .combat-chip { display: none; }
  .skin-menu,
  .character-menu,
  .ranking-panel,
  .record-drawer,
  .rebirth-panel { position: fixed; z-index: 80; top: 50px; right: 6px; bottom: 50px; left: 6px; width: auto; height: auto; max-height: none; }
}

/* Foldable/mobile legibility pass: crisp type without the muddy number outline. */
@media (max-width: 900px) {
  .price,
  .stat-card strong,
  .health-meta b,
  .damage-readout,
  .battle-stats dd,
  .records dd,
  .ranking-score,
  .ranking-own-score,
  .skin-actions strong,
  .auto-summary strong,
  .prestige-summary strong,
  .rage-meta strong,
  .combat-chip strong,
  #loopBonus,
  #loopRewardText {
    font-family: "Arial Black", "Noto Sans KR", Arial, sans-serif;
    font-weight: 900;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke: 0 transparent;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .86);
  }
}

/* Galaxy Z Fold8 cover display: prioritize readable controls over decoration. */
@media (min-width: 351px) and (max-width: 480px) and (orientation: portrait) {
  .stat-card span { font-size: .68rem; }
  .stat-card strong { font-size: .96rem; }
  .eyebrow,
  .health-meta,
  .mood-badge,
  .damage-readout,
  .rage-meta,
  .rage-status { font-size: .66rem; }
  .health-meta span::after { font-size: .62rem; }
  .boss-header h2 { font-size: .88rem; }
  .shop-title h2 { font-size: .86rem; }
  .shop-tab { font-size: .7rem; }
  .utility-button,
  .utility-button.skin-toggle,
  .utility-button.character-toggle,
  .utility-button.rebirth-toggle { font-size: .7rem; }
  .tap-prompt span::after { font-size: .68rem; }
}

/* Galaxy Z Fold8 main display in portrait: use the added width instead of phone-sized cards. */
@media (min-width: 520px) and (max-width: 720px) and (orientation: portrait) {
  .weapon-list,
  .upgrade-list,
  .automation-list,
  .prestige-list { grid-auto-columns: minmax(238px, 47vw); }
  .bulk-buy-bar { width: min(360px, 58vw); }
  .shop-tab { font-size: .72rem; }
  .utility-button,
  .utility-button.skin-toggle,
  .utility-button.character-toggle,
  .utility-button.rebirth-toggle { font-size: .72rem; }
}

/* Galaxy Z Fold8 main display in landscape: two-pane combat cockpit. */
@media (min-width: 700px) and (max-width: 900px) and (min-height: 541px) and (max-height: 700px) and (orientation: landscape) {
  .topbar { flex-basis: 50px; min-height: 50px; height: 50px; }
  .top-stats { top: 4px; grid-template-columns: 42px 116px 116px; height: 42px; }
  .account-button,
  .stat-card { height: 42px; min-height: 42px; }
  .stat-card span { font-size: .62rem; }
  .stat-card strong { font-size: .84rem; }
  .game-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .boss-header { min-height: 64px; grid-template-rows: 32px 22px; }
  .hit-stage { inset: 72px 0 50px; }
  .boss-sprite { height: min(132%, 540px); bottom: -12%; }
  .shop-tab { font-size: .66rem; }
  .utility-button,
  .utility-button.skin-toggle,
  .utility-button.character-toggle,
  .utility-button.rebirth-toggle { font-size: .66rem; }
}

/* Collectible static arenas: cosmetic only, with a calm overlay for HUD contrast. */
.arena {
  background-color: #0a1522;
  background-image:
    linear-gradient(180deg, rgba(4, 12, 22, .2), rgba(4, 12, 22, .05) 48%, rgba(3, 9, 17, .25)),
    var(--arena-background, url("./assets/background-boardroom-night.png"));
  background-position: center, var(--arena-background-position, center);
  background-repeat: no-repeat;
  background-size: cover;
}
.arena::before,
.arena-grid { display: none; }

.utility-button.background-toggle {
  border-color: #d19a45;
  background: linear-gradient(180deg, #5b3e1d, #21160e 75%);
}
.background-menu {
  border-color: #d19a45;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .52), inset 4px 0 0 #d19a45;
}
.background-menu .skin-menu-heading { border-bottom-color: #76572f; }
.background-menu .skin-menu-heading strong { color: #ffe2a6; }
.background-card {
  grid-template-columns: 126px minmax(0, 1fr) !important;
  min-height: 132px !important;
}
.background-preview {
  position: relative;
  display: block;
  width: 124px;
  height: 76px;
  overflow: hidden;
  border: 1px solid #8f6a39;
  border-radius: 4px;
  background-color: #0b1420;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .04), 4px 5px 0 rgba(0, 0, 0, .3);
}
.background-preview i {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #c99b51;
  background: rgba(10, 16, 25, .9);
  color: #ffe7ad;
  font-style: normal;
}
.background-card .skin-actions { grid-template-columns: 1fr; }
.background-buy { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; }

@media (max-width: 900px) {
  .utility-rail { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .utility-button.background-toggle { background: transparent; }
  .background-card { grid-template-columns: 112px minmax(0, 1fr) !important; }
  .background-preview { width: 110px; height: 68px; }
}

@media (max-width: 480px) and (orientation: portrait) {
  .background-card { grid-template-columns: 98px minmax(0, 1fr) !important; }
  .background-preview { width: 96px; height: 62px; }
  .background-card .skin-copy small { display: none; }
}

@media (max-width: 900px) and (max-height: 700px) and (orientation: landscape) {
  .utility-rail { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}