/* =========================================================
   薯条大战海鸥 — pixel arcade shell
   ========================================================= */
:root {
  --ink: #06111f;
  --ink-2: #0b2033;
  --panel: #0a1c2e;
  --panel-2: #102b42;
  --line: #23465e;
  --line-soft: #18364b;
  --cream: #fff4d2;
  --paper: #f4e7c5;
  --gold: #ffc93c;
  --gold-2: #ff9f1a;
  --gold-deep: #a85800;
  --red: #ef4b5f;
  --red-2: #b4233e;
  --teal: #36d0c0;
  --sky: #7adbe8;
  --muted: #8ba5b5;
  --font-ui: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "SimHei", sans-serif;
  --font-pixel: "Lucida Console", "Courier New", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cream);
  font-family: var(--font-ui);
  background:
    radial-gradient(ellipse at 50% 12%, rgba(37, 113, 137, .26), transparent 48%),
    radial-gradient(ellipse at 50% 110%, rgba(255, 159, 26, .10), transparent 52%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px),
    linear-gradient(160deg, #030b14 0%, #071523 48%, #02080f 100%);
  -webkit-font-smoothing: none;
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

body::before {
  inset: 0;
  background-image: radial-gradient(rgba(122, 219, 232, .13) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .4;
  mask-image: radial-gradient(ellipse at center, black, transparent 78%);
}

body::after {
  width: min(90vw, 1150px);
  height: min(60vh, 520px);
  top: 5vh;
  border-radius: 50%;
  background: rgba(54, 208, 192, .05);
  filter: blur(70px);
}

#arcade {
  position: relative;
  z-index: 1;
  width: min(94vw, calc(91vh * 16 / 9), 1320px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .55));
}

#stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  container-type: size;
  background: #071523;
  border: .22cqw solid #2a4d5f;
  outline: .13cqw solid #c89537;
  outline-offset: -.36cqw;
  box-shadow:
    0 0 0 .5cqw #06111d,
    0 0 0 .62cqw #1a4054,
    0 0 0 1.5cqw #030a12,
    inset 0 0 3cqw rgba(0, 0, 0, .6);
}

#game {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  cursor: crosshair;
  touch-action: none;
}

.crt {
  position: absolute;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(2, 8, 16, .11) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 48%, rgba(2, 7, 13, .34) 100%);
  mix-blend-mode: multiply;
  opacity: .72;
}

.stage-shine {
  position: absolute;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.055), transparent 22% 70%, rgba(255,255,255,.025)),
    radial-gradient(ellipse at 50% 0%, rgba(255, 238, 180, .08), transparent 40%);
}

.hidden { display: none !important; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
  outline: .18cqw solid var(--cream);
  outline-offset: .22cqw;
}

kbd {
  font-family: var(--font-pixel);
  background: #07131f;
  border: 1px solid var(--line);
  padding: .08em .36em;
  color: var(--gold);
}

/* =========================================================
   Shared tiny controls
   ========================================================= */
.icon-btn {
  width: 2.8cqw;
  height: 2.8cqw;
  min-width: 34px;
  min-height: 34px;
  display: grid;
  place-items: center;
  border: .18cqw solid #34596d;
  background: rgba(5, 20, 33, .78);
  box-shadow: .2cqw .2cqw 0 rgba(1, 5, 9, .8);
  color: var(--gold);
  font-family: var(--font-pixel);
  font-size: 1.2cqw;
  transition: transform .08s ease, background .15s ease;
}

.icon-btn:hover { background: #143449; transform: translateY(-.12cqw); }
.icon-btn:active { transform: translate(.13cqw, .13cqw); box-shadow: none; }
.icon-btn.muted { color: #62798a; }
.icon-btn.muted .sound-on::after {
  content: "/";
  position: absolute;
  margin-left: -.48cqw;
  margin-top: -.22cqw;
  color: var(--red);
  font-size: 1.35em;
}
.icon-btn .sound-on { position: relative; }

.coin {
  display: inline-block;
  width: 1.25cqw;
  height: 1.25cqw;
  min-width: 12px;
  min-height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff6bf 0 15%, #ffd95c 16% 50%, #e8920d 51% 75%, #8c4d00 76%);
  box-shadow: inset 0 0 0 .16cqw rgba(122, 64, 0, .45), 0 .12cqw 0 rgba(0, 0, 0, .5);
  position: relative;
}
.coin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38%;
  height: 38%;
  transform: translate(-50%, -50%);
  background: rgba(255, 249, 195, .9);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.coin-pill {
  display: flex;
  align-items: center;
  gap: .55cqw;
  height: 2.55cqw;
  min-height: 30px;
  padding: 0 .9cqw;
  background: rgba(3, 14, 24, .82);
  border: .18cqw solid #3b5b6d;
  box-shadow: inset 0 0 0 .12cqw rgba(255, 233, 157, .08), .2cqw .2cqw 0 rgba(0,0,0,.55);
  font-family: var(--font-pixel);
  font-weight: 700;
  font-size: 1.15cqw;
  letter-spacing: .04em;
  color: #ffeaa4;
}

/* =========================================================
   Start screen
   ========================================================= */
.screen {
  position: absolute;
  inset: 0;
  z-index: 30;
}

.menu-screen {
  display: flex;
  flex-direction: column;
  padding: 1.55cqw 3cqw 1.15cqw;
  background:
    linear-gradient(180deg, rgba(3, 14, 26, .32) 0%, rgba(3, 14, 26, .05) 32%, rgba(3, 14, 26, .30) 67%, rgba(2, 8, 15, .86) 100%),
    radial-gradient(ellipse at 50% 40%, transparent 22%, rgba(2, 9, 16, .28) 100%);
}

.menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.2cqw;
  flex: 0 0 auto;
  z-index: 2;
}

.brand-stamp {
  display: flex;
  align-items: center;
  gap: .6cqw;
  font-family: var(--font-pixel);
  font-size: .74cqw;
  letter-spacing: .12em;
  color: #d9cda9;
  opacity: .86;
  border: .13cqw solid rgba(207, 194, 160, .38);
  padding: .32cqw .58cqw;
  transform: rotate(-1deg);
}
.brand-stamp b { color: var(--gold); font-weight: 400; }
.stamp-fry {
  width: .55cqw;
  height: 1.25cqw;
  display: inline-block;
  background: repeating-linear-gradient(90deg, #ffd75a 0 33%, #e99a12 34% 66%, #ffed9a 67% 100%);
  transform: rotate(9deg);
  box-shadow: 0 .12cqw 0 #7d3f00;
}

.menu-tools { display: flex; align-items: center; gap: .65cqw; }
.wallet-pill { background: rgba(3, 14, 24, .9); }

.logo-block {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  text-align: center;
  padding: .1cqw 0 .15cqw;
}

.logo-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8cqw;
  font-size: .83cqw;
  font-weight: 700;
  letter-spacing: .38em;
  color: #e7dcb8;
  text-shadow: 0 .13cqw 0 #06111f;
  margin-bottom: .18cqw;
}
.logo-kicker span {
  width: 4.5cqw;
  height: .14cqw;
  background: linear-gradient(90deg, transparent, #d5a53d);
}
.logo-kicker span:last-child { transform: scaleX(-1); }

.logo {
  position: relative;
  display: inline-block;
  font-size: 6.2cqw;
  line-height: .98;
  letter-spacing: -.055em;
  transform: rotate(-.7deg);
  filter: drop-shadow(0 .65cqw .55cqw rgba(0, 0, 0, .45));
}
.logo-line {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .16em;
}
.logo-line b {
  position: relative;
  font-weight: 900;
  -webkit-text-stroke: .18cqw #08131f;
  paint-order: stroke fill;
  filter:
    drop-shadow(0 .14cqw 0 #08131f)
    drop-shadow(0 .3cqw 0 #08131f)
    drop-shadow(0 .46cqw 0 #6d3c05)
    drop-shadow(0 .64cqw 0 #04101b);
}
.logo-line .gold {
  background: linear-gradient(180deg, #fff7c4 0%, #ffd74e 38%, #ffb31f 62%, #ff8b0a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-line .white {
  background: linear-gradient(180deg, #ffffff 0%, #eaf9ff 43%, #a8dce8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-line i {
  position: relative;
  z-index: 1;
  font-style: normal;
  font-size: .46em;
  letter-spacing: -.03em;
  font-weight: 900;
  color: #ff6b62;
  -webkit-text-stroke: .16cqw #08131f;
  paint-order: stroke fill;
  filter:
    drop-shadow(0 .1cqw 0 #08131f)
    drop-shadow(0 .24cqw 0 #08131f)
    drop-shadow(0 .38cqw 0 #6d3c05)
    drop-shadow(0 .5cqw 0 #04101b);
  transform: rotate(-5deg) translateY(-.03em);
}

.logo-sub {
  position: relative;
  z-index: 2;
  margin-top: .38cqw;
  font-family: var(--font-pixel);
  font-size: .86cqw;
  letter-spacing: .24em;
  color: #dce9ec;
  text-shadow: 0 .15cqw 0 #06111f;
}
.logo-sub span { color: var(--gold); margin: 0 .25em; }

.fry-cards {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.35cqw;
  align-items: stretch;
  padding: .45cqw .1cqw .55cqw;
}

.fry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: .8cqw 1cqw .85cqw;
  background:
    linear-gradient(145deg, rgba(20, 47, 66, .94), rgba(5, 21, 35, .96) 62%),
    var(--panel);
  border: .17cqw solid #2c5065;
  box-shadow: .32cqw .36cqw 0 rgba(2, 7, 12, .8), inset 0 0 0 .1cqw rgba(255, 245, 206, .045);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
  overflow: hidden;
}
.fry-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 1.4cqw 1.4cqw,
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 1.4cqw 1.4cqw;
  opacity: .3;
}
.fry-card:hover {
  transform: translateY(-.3cqw);
  border-color: #568096;
  background: linear-gradient(145deg, rgba(27, 61, 82, .97), rgba(7, 26, 42, .97) 62%);
}
.fry-card.selected {
  border-color: var(--gold);
  background:
    linear-gradient(145deg, rgba(52, 55, 45, .96), rgba(17, 30, 36, .97) 60%),
    var(--panel);
  box-shadow:
    .32cqw .36cqw 0 rgba(2, 7, 12, .9),
    0 0 0 .16cqw #6e4d0f,
    0 0 2.2cqw rgba(255, 190, 47, .2),
    inset 0 0 1.8cqw rgba(255, 195, 60, .07);
  transform: translateY(-.36cqw);
}
.fry-card.selected::after {
  content: "出战中";
  position: absolute;
  top: .55cqw;
  left: 50%;
  right: auto;
  z-index: 4;
  transform: translateX(-50%);
  background: var(--gold);
  color: #2d1a00;
  font-size: .68cqw;
  font-weight: 900;
  letter-spacing: .08em;
  padding: .2cqw .62cqw .2cqw .7cqw;
  clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%, 0 30%);
  box-shadow: 0 .16cqw 0 #744700;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 0 0 auto;
  height: 1.5cqw;
  font-family: var(--font-pixel);
  font-size: .68cqw;
  letter-spacing: .06em;
  color: #89afc0;
}
.card-type {
  border: .11cqw solid #31566d;
  background: rgba(6, 21, 34, .6);
  padding: .1cqw .38cqw;
}
.card-level {
  font-family: var(--font-ui);
  font-size: .76cqw;
  color: #cfdfe3;
  letter-spacing: 0;
}
.card-level b {
  color: var(--gold);
  font-family: var(--font-pixel);
  font-size: 1.3em;
}
.card-level i { font-style: normal; color: #5f7d8d; }

.portrait-wrap {
  position: relative;
  flex: 0 1 auto;
  height: 13.2cqw;
  min-height: 0;
  margin: .25cqw 0 .1cqw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.portrait-wrap::before {
  content: "";
  position: absolute;
  width: 10.4cqw;
  height: 10.4cqw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 198, 55, .16), transparent 64%);
  filter: blur(.2cqw);
}
.card-watermark {
  position: absolute;
  right: .2cqw;
  bottom: -1.3cqw;
  z-index: 0;
  font-family: var(--font-pixel);
  font-size: 5.6cqw;
  line-height: 1;
  letter-spacing: -.09em;
  color: transparent;
  -webkit-text-stroke: .1cqw rgba(255, 205, 90, .14);
  pointer-events: none;
  user-select: none;
}
.portrait {
  position: relative;
  z-index: 1;
  height: 100%;
  width: auto;
  max-width: 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 .35cqw .28cqw rgba(0, 0, 0, .36));
  animation: card-bob 2.6s steps(2, end) infinite;
  pointer-events: none;
}
.fry-card:nth-child(2) .portrait { animation-delay: -.6s; }
.fry-card:nth-child(3) .portrait { animation-delay: -1.2s; }
@keyframes card-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-.32cqw); }
}

.card-name {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .48cqw;
  line-height: 1.15;
}
.card-name h3 {
  font-size: 1.48cqw;
  font-weight: 900;
  letter-spacing: .04em;
  color: #fff2cc;
  text-shadow: 0 .18cqw 0 #4a2c06, 0 .26cqw 0 #08131f;
}
.card-name span {
  font-family: var(--font-pixel);
  font-size: .64cqw;
  letter-spacing: .03em;
  color: #89a7b6;
}
.card-blurb {
  flex: 0 0 auto;
  text-align: center;
  font-size: .72cqw;
  line-height: 1.5;
  color: #a9bcc4;
  margin-top: .15cqw;
  margin-bottom: .3cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-blurb b { color: #ffd05a; font-weight: 700; }

.stats {
  flex: 0 0 auto;
  display: grid;
  gap: .22cqw;
  margin-bottom: .18cqw;
}
.stat-row {
  display: grid;
  grid-template-columns: 2.55cqw 1fr 1.5cqw;
  align-items: center;
  gap: .4cqw;
  font-size: .63cqw;
  color: #93adba;
  line-height: 1;
}
.stat-row .stat-val {
  font-family: var(--font-pixel);
  font-size: .62cqw;
  text-align: right;
  color: #d7e6e9;
}
.segments { display: flex; gap: .15cqw; }
.segments i {
  display: block;
  flex: 1;
  height: .38cqw;
  background: #183447;
  border-top: .08cqw solid rgba(255,255,255,.05);
}
.segments i.on { background: linear-gradient(180deg, #ffe474, #f2a414); box-shadow: 0 .08cqw 0 #7d4300; }

.card-tags {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: .32cqw;
  margin-top: auto;
  padding-top: .55cqw;
  border-top: .1cqw dashed rgba(126, 169, 188, .24);
}
.card-tag {
  display: inline-flex;
  align-items: center;
  gap: .22cqw;
  padding: .14cqw .42cqw;
  border: .1cqw solid #31566d;
  background: rgba(4, 18, 30, .7);
  font-size: .64cqw;
  line-height: 1.2;
  color: #9bb7c3;
  white-space: nowrap;
}
.card-tag b {
  font-family: var(--font-pixel);
  font-size: .66cqw;
  color: #ffe084;
}
.card-tag.accent {
  border-color: #6c531d;
  color: #f0ca79;
  background: rgba(81, 55, 10, .28);
}
.card-next {
  flex: 0 0 auto;
  min-height: 1.1cqw;
  margin: .25cqw 0 .42cqw;
  font-size: .62cqw;
  line-height: 1.3;
  color: #7093a2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.upgrade-btn {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  width: 100%;
  height: 2.35cqw;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .48cqw;
  border: .14cqw solid #8a5f13;
  background: linear-gradient(180deg, #ffd85b 0%, #ffc037 45%, #e99413 100%);
  box-shadow: 0 .24cqw 0 #6f3e00, inset 0 .14cqw 0 rgba(255, 255, 255, .4);
  color: #3b2400;
  font-size: .76cqw;
  font-weight: 900;
  letter-spacing: .03em;
  transition: transform .08s ease, filter .15s ease;
}
.upgrade-btn:hover { filter: brightness(1.08) saturate(1.06); transform: translateY(-.08cqw); }
.upgrade-btn:active { transform: translateY(.18cqw); box-shadow: 0 0 0 #6f3e00; }
.upgrade-btn .coin { width: .9cqw; height: .9cqw; min-width: 9px; min-height: 9px; }
.upgrade-btn .up-cost { font-family: var(--font-pixel); font-size: 1.03em; }
.upgrade-btn.maxed {
  background: linear-gradient(180deg, #36546a, #1d374b);
  border-color: #55768b;
  box-shadow: 0 .24cqw 0 #07131f;
  color: #b9d9e2;
  cursor: default;
}
.upgrade-btn.poor { filter: grayscale(.4) brightness(.88); }
.upgrade-btn.poor .up-cost { color: #73320c; }
.fry-card.upgraded { animation: card-pop .35s steps(3, end); }
@keyframes card-pop {
  0% { transform: translateY(-.36cqw) scale(1); }
  45% { transform: translateY(-.6cqw) scale(1.018); }
  100% { transform: translateY(-.36cqw) scale(1); }
}
.evolve-mark {
  display: inline-flex;
  align-items: center;
  gap: .22cqw;
  color: #73dfd1;
  font-size: .58cqw;
}
.evolve-mark::before { content: "◆"; color: var(--teal); }

.launch-row {
  flex: 0 0 auto;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2cqw;
  padding: .15cqw 0 .25cqw;
}
.start-btn {
  position: relative;
  width: 25.5cqw;
  height: 5.15cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.05cqw;
  border: .2cqw solid #754a08;
  background: linear-gradient(180deg, #ffe36e 0%, #ffc936 32%, #ffab1c 72%, #e9870a 100%);
  box-shadow:
    0 .48cqw 0 #7b4400,
    0 .66cqw 0 #07131f,
    inset 0 .18cqw 0 rgba(255, 255, 255, .5),
    inset 0 -.2cqw 0 rgba(143, 74, 0, .22);
  color: #382100;
  transition: transform .08s ease, filter .16s ease;
  animation: launch-breathe 2.8s ease-in-out infinite;
}
.start-btn::before,
.start-btn::after {
  content: "";
  position: absolute;
  width: .55cqw;
  height: .55cqw;
  background: #fff4b0;
  border: .12cqw solid #8d5708;
  top: .48cqw;
}
.start-btn::before { left: .55cqw; }
.start-btn::after { right: .55cqw; }
.start-btn:hover { filter: brightness(1.07) saturate(1.04); transform: translateY(-.18cqw); }
.start-btn:active { transform: translateY(.3cqw); box-shadow: 0 .18cqw 0 #7b4400, 0 .28cqw 0 #07131f, inset 0 .1cqw 0 rgba(255,255,255,.35); }
@keyframes launch-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}
.start-play {
  width: 0;
  height: 0;
  border-top: .72cqw solid transparent;
  border-bottom: .72cqw solid transparent;
  border-left: 1.05cqw solid #5d3400;
  filter: drop-shadow(.1cqw .14cqw 0 rgba(255,255,255,.5));
}
.start-copy { text-align: left; line-height: 1; }
.start-copy b {
  display: block;
  font-size: 1.75cqw;
  font-weight: 900;
  letter-spacing: .12em;
  text-shadow: 0 .18cqw 0 rgba(255, 243, 170, .55);
}
.start-copy small {
  display: block;
  margin-top: .22cqw;
  font-family: var(--font-pixel);
  font-size: .65cqw;
  letter-spacing: .18em;
  color: #6c4708;
}
.start-arrow {
  font-size: 1.15cqw;
  color: #71480b;
  animation: arrow-nudge .8s steps(2, end) infinite;
}
@keyframes arrow-nudge {
  50% { transform: translateX(.25cqw); }
}
.launch-tip {
  font-size: .72cqw;
  line-height: 1.65;
  color: #b7c8cd;
  text-shadow: 0 .13cqw 0 #06111f;
}
.launch-tip b { color: var(--gold); font-weight: 700; }

.menu-footer {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.15cqw;
  height: 1.55cqw;
  border-top: .1cqw solid rgba(190, 209, 211, .16);
  padding-top: .42cqw;
  font-family: var(--font-pixel);
  font-size: .58cqw;
  letter-spacing: .04em;
  color: #758f9d;
}
.menu-footer span::before {
  content: "·";
  color: #b28a32;
  margin-right: 1.05cqw;
}
.menu-footer span:first-child::before { content: none; }
.menu-footer .best-record {
  color: #e8c35f;
  letter-spacing: .06em;
}
.menu-footer .best-record::before { color: #b28a32; }
.text-btn {
  margin-left: auto;
  color: #5f7b8b;
  font-family: var(--font-ui);
  font-size: .65cqw;
  letter-spacing: .06em;
  border-bottom: .09cqw dotted #4b6473;
  padding-bottom: .05cqw;
}
.text-btn:hover { color: #ffb8a8; }
.text-btn.confirming { color: #ff8c7a; }

/* =========================================================
   HUD
   ========================================================= */
.hud {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.hud-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1cqw;
  padding: 1.35cqw 1.7cqw 0;
  background: linear-gradient(180deg, rgba(3, 12, 22, .78), rgba(3, 12, 22, .2) 72%, transparent);
}
.hp-cluster { width: 28%; min-width: 0; }
.hud-kicker {
  font-family: var(--font-pixel);
  font-size: .62cqw;
  letter-spacing: .12em;
  color: #d9e7e5;
  text-shadow: 0 .12cqw 0 #000;
  margin-bottom: .3cqw;
  display: flex;
  justify-content: space-between;
}
.hud-kicker b { color: #fff5c8; font-size: 1.15em; }
.hp-track {
  position: relative;
  height: .68cqw;
  background: #07131f;
  border: .12cqw solid #d8c58d;
  box-shadow: .14cqw .14cqw 0 rgba(0,0,0,.7);
  overflow: hidden;
}
.hp-lag {
  position: absolute;
  inset: 0;
  width: 100%;
  background: #f7e8b5;
  transform-origin: left;
  transition: transform .55s ease .15s;
}
.hp-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  transform-origin: left;
  background: linear-gradient(180deg, #ffdf6e 0%, #ffb31f 42%, #ee6c22 100%);
  box-shadow: inset 0 .13cqw 0 rgba(255,255,255,.38);
  transition: transform .16s ease;
}
.hp-fill.low {
  background: linear-gradient(180deg, #ff9a8b 0%, #ef4b5f 46%, #a5162d 100%);
  animation: hp-alert .55s steps(2, end) infinite;
}
@keyframes hp-alert { 50% { filter: brightness(1.45); } }
.hp-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 4.5%, rgba(4, 13, 20, .42) 4.5% 5.7%);
}
.weapon-tag {
  display: inline-block;
  margin-top: .38cqw;
  padding: .16cqw .45cqw;
  background: rgba(4, 16, 27, .72);
  border-left: .16cqw solid var(--gold);
  font-size: .61cqw;
  letter-spacing: .04em;
  color: #d8e2df;
}

.wave-cluster { text-align: center; padding-top: .02cqw; }
.wave-label {
  font-family: var(--font-pixel);
  font-size: 1.12cqw;
  font-weight: 700;
  letter-spacing: .16em;
  color: #fff2c3;
  text-shadow: .12cqw .12cqw 0 #07131f;
}
.score-label {
  margin-top: .2cqw;
  font-family: var(--font-pixel);
  font-size: .6cqw;
  letter-spacing: .14em;
  color: #bca569;
  text-shadow: .1cqw .1cqw 0 #07131f;
}
.score-label b {
  margin-left: .18cqw;
  color: #fff0ad;
  font-size: 1.28em;
  letter-spacing: .06em;
}
.wave-dots { display: flex; gap: .22cqw; justify-content: center; margin-top: .26cqw; }
.wave-dots i {
  width: .32cqw;
  height: .32cqw;
  background: #315367;
  border: .06cqw solid #0a1c2a;
}
.wave-dots i.done { background: #f8bb2f; }
.wave-dots i.boss { background: #ef4b5f; transform: rotate(45deg); }

.hud-actions { display: flex; align-items: center; gap: .65cqw; }
.hud-icon { pointer-events: auto; min-width: 26px; min-height: 26px; width: 2.25cqw; height: 2.25cqw; font-size: .9cqw; }
.pause-bars {
  width: .9cqw;
  height: 1.05cqw;
  border-left: .28cqw solid var(--gold);
  border-right: .28cqw solid var(--gold);
}

.boss-hud {
  position: absolute;
  top: 5.45cqw;
  left: 50%;
  transform: translateX(-50%);
  width: 47%;
  padding: .38cqw .6cqw .45cqw;
  background: rgba(5, 13, 22, .78);
  border: .12cqw solid #5a2a31;
  box-shadow: 0 .2cqw 0 rgba(0,0,0,.5);
}
.boss-title {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-pixel);
  font-size: .63cqw;
  letter-spacing: .12em;
  color: #ffd7ce;
  margin-bottom: .22cqw;
}
.boss-title b { color: #ffb59d; }
.boss-track {
  height: .45cqw;
  background: #160b12;
  border: .08cqw solid #7b3b40;
}
.boss-fill {
  height: 100%;
  width: 100%;
  transform-origin: left;
  background: repeating-linear-gradient(90deg, #ef4b5f 0 .5cqw, #b4233e .5cqw 1cqw);
  transition: transform .14s linear;
}

.wave-banner {
  position: absolute;
  left: 50%;
  top: 46%;
  min-width: 20cqw;
  transform: translate(-50%, -50%) scale(.88);
  text-align: center;
  padding: .65cqw 2.3cqw .75cqw;
  background: linear-gradient(90deg, transparent, rgba(4, 14, 24, .86) 14% 86%, transparent);
  opacity: 0;
  visibility: hidden;
  filter: drop-shadow(0 .3cqw 0 rgba(0,0,0,.5));
}
.wave-banner::before,
.wave-banner::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 2.8cqw;
  height: .14cqw;
  background: var(--gold);
}
.wave-banner::before { left: 0; }
.wave-banner::after { right: 0; }
.wave-banner.show { animation: banner-show 2.4s steps(8, end) both; }
@keyframes banner-show {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  9% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  16% { transform: translate(-50%, -50%) scale(1); }
  76% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -58%) scale(1); }
}
.wave-banner span {
  display: block;
  font-family: var(--font-pixel);
  font-size: .62cqw;
  letter-spacing: .3em;
  color: var(--gold);
}
.wave-banner strong {
  display: block;
  margin: .2cqw 0 .1cqw;
  font-size: 2cqw;
  letter-spacing: .12em;
  color: #fff4cf;
  text-shadow: 0 .2cqw 0 #5d3c09, .12cqw .12cqw 0 #07131f;
}
.wave-banner em {
  display: block;
  font-style: normal;
  font-size: .64cqw;
  letter-spacing: .16em;
  color: #a9c2c9;
}
.wave-banner.boss strong { color: #ffb49a; text-shadow: 0 .2cqw 0 #54121c; }
.wave-banner.boss span { color: #ff7f86; }

.hud-bottom {
  position: absolute;
  left: 1.7cqw;
  right: 1.7cqw;
  bottom: 1.25cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-pixel);
  font-size: .55cqw;
  letter-spacing: .06em;
  color: rgba(218, 231, 227, .55);
  text-shadow: 0 .1cqw 0 #000;
}
.hint-chip { display: flex; align-items: center; gap: .3cqw; }
.mouse-icon {
  display: inline-block;
  width: .55cqw;
  height: .75cqw;
  border: .08cqw solid currentColor;
  border-radius: .3cqw .3cqw .22cqw .22cqw;
}
.esc-hint { opacity: .75; }

/* Touch devices get a compact virtual WASD pad: the movement model stays
   keyboard-only, but an iPhone has no physical WASD keys. */
.touch-pad { display: none; }
.touch-mode .touch-pad {
  display: grid;
  position: absolute;
  z-index: 8;
  left: 2.2cqw;
  bottom: 2.2cqw;
  grid-template-columns: repeat(3, 6.4cqw);
  grid-template-rows: repeat(2, 6.4cqw);
  gap: .55cqw;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.touch-mode .touch-pad [data-key="KeyW"] { grid-column: 2; grid-row: 1; }
.touch-mode .touch-pad [data-key="KeyA"] { grid-column: 1; grid-row: 2; }
.touch-mode .touch-pad [data-key="KeyS"] { grid-column: 2; grid-row: 2; }
.touch-mode .touch-pad [data-key="KeyD"] { grid-column: 3; grid-row: 2; }
.touch-key {
  appearance: none;
  padding: 0;
  border: .16cqw solid rgba(255, 210, 111, .72);
  background: linear-gradient(180deg, rgba(12, 32, 48, .82), rgba(4, 15, 26, .9));
  color: #ffe6a3;
  font-family: var(--font-pixel);
  font-size: 1.55cqw;
  line-height: 1;
  text-shadow: 0 .12cqw 0 #000;
  box-shadow: inset 0 0 0 .16cqw rgba(0, 0, 0, .25), 0 .25cqw 0 rgba(0, 0, 0, .45);
  touch-action: none;
  cursor: pointer;
}
.touch-key.active,
.touch-key:active {
  background: linear-gradient(180deg, #ffd86a, #d6962e);
  color: #2b1604;
  border-color: #fff1b8;
  transform: translateY(.12cqw);
}
.touch-mode .hud-bottom .hint-chip,
.touch-mode .hud-bottom .esc-hint { display: none; }

/* =========================================================
   Modals
   ========================================================= */
.modal-screen {
  display: grid;
  place-items: center;
  z-index: 40;
  background:
    radial-gradient(ellipse at center, rgba(7, 24, 36, .52), rgba(1, 6, 11, .88)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 3px);
  backdrop-filter: blur(.2cqw);
  animation: modal-fade .22s steps(4, end) both;
}
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  position: relative;
  width: 41cqw;
  padding: 2cqw 2.5cqw 2.2cqw;
  background:
    linear-gradient(135deg, rgba(24, 48, 66, .98), rgba(5, 18, 31, .99) 60%),
    #071523;
  border: .2cqw solid #c79a3f;
  box-shadow:
    .55cqw .6cqw 0 rgba(0, 0, 0, .72),
    0 0 0 .18cqw #07131f,
    inset 0 0 2.5cqw rgba(255, 188, 48, .04);
  text-align: center;
}
.modal-card::before,
.modal-card::after {
  content: "";
  position: absolute;
  width: 1.05cqw;
  height: 1.05cqw;
  border: .16cqw solid #f8d273;
  background: #071523;
}
.modal-card::before { top: -.42cqw; left: -.42cqw; }
.modal-card::after { bottom: -.42cqw; right: -.42cqw; }
.modal-kicker {
  font-family: var(--font-pixel);
  font-size: .64cqw;
  letter-spacing: .28em;
  color: var(--gold);
  margin-bottom: .35cqw;
}
.modal-card h2 {
  font-size: 2.1cqw;
  letter-spacing: .12em;
  color: #fff2c8;
  text-shadow: 0 .22cqw 0 #4c2f07, .12cqw .12cqw 0 #07131f;
}
.modal-card > p {
  margin: .5cqw auto 1.35cqw;
  max-width: 30cqw;
  font-size: .77cqw;
  line-height: 1.75;
  color: #a9bdc4;
}
.modal-buttons { display: flex; flex-direction: column; gap: .58cqw; }
.modal-buttons.row { flex-direction: row; }
.modal-buttons.row .pixel-btn { flex: 1; }
.modal-foot {
  margin-top: 1.1cqw;
  font-family: var(--font-pixel);
  font-size: .58cqw;
  color: #708b99;
}

.pixel-btn {
  height: 3.15cqw;
  padding: 0 1.4cqw;
  border: .15cqw solid #47687b;
  background: linear-gradient(180deg, #1e4056, #102a3d);
  box-shadow: 0 .27cqw 0 #07131f, inset 0 .12cqw 0 rgba(255,255,255,.08);
  color: #dfeaeb;
  font-size: .88cqw;
  font-weight: 700;
  letter-spacing: .08em;
  transition: transform .08s ease, filter .14s ease;
}
.pixel-btn:hover { filter: brightness(1.16); transform: translateY(-.08cqw); }
.pixel-btn:active { transform: translateY(.2cqw); box-shadow: 0 0 0 #07131f; }
.pixel-btn.primary {
  border-color: #8d5d0e;
  background: linear-gradient(180deg, #ffdb61, #f5a91d 65%, #dd8107);
  color: #3a2300;
  box-shadow: 0 .27cqw 0 #6c3e00, inset 0 .14cqw 0 rgba(255,255,255,.4);
  text-shadow: 0 .1cqw 0 rgba(255,255,255,.3);
}
.pixel-btn.ghost {
  background: rgba(3, 12, 21, .35);
  border-color: #2a4557;
  color: #8fa8b4;
}

.pause-card { width: 32cqw; }
.pause-card .modal-buttons { margin-top: 1.4cqw; }

.result-card { width: 47cqw; padding-top: 2.3cqw; }
.result-stamp {
  position: absolute;
  top: -1.15cqw;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  padding: .4cqw 1.2cqw;
  background: #ef4b5f;
  border: .16cqw solid #ffc4b9;
  box-shadow: .2cqw .2cqw 0 #4f0e1b;
  color: #2d050a;
  font-family: var(--font-pixel);
  font-size: .63cqw;
  font-weight: 700;
  letter-spacing: .2em;
}
.result-card h2 { font-size: 2.2cqw; }
.result-score {
  display: flex;
  align-items: stretch;
  margin: .9cqw 0 .2cqw;
  background: rgba(4, 15, 25, .62);
  border: .1cqw solid #5d4a1f;
  box-shadow: inset 0 0 0 .08cqw rgba(255, 216, 114, .06);
}
.result-score-main,
.result-score-best {
  padding: .55cqw .8cqw .45cqw;
  text-align: left;
}
.result-score-main {
  flex: 1.55;
  border-right: .1cqw solid #3b3524;
  background: linear-gradient(90deg, rgba(92, 63, 9, .26), transparent);
}
.result-score-best { flex: 1; }
.result-score small {
  display: block;
  margin-bottom: .08cqw;
  font-size: .62cqw;
  letter-spacing: .14em;
  color: #8fa4a9;
}
.result-score b {
  display: block;
  font-family: var(--font-pixel);
  font-size: 2.45cqw;
  line-height: 1.05;
  color: #ffe28a;
  text-shadow: .12cqw .12cqw 0 #261a04;
}
.result-score-best b {
  margin-top: .35cqw;
  font-size: 1.5cqw;
  color: #b9cbd0;
  text-shadow: none;
}
.result-stats {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: .55cqw;
  margin: 1.1cqw 0 .8cqw;
}
.result-stat {
  position: relative;
  padding: .75cqw .35cqw .6cqw;
  background: rgba(4, 15, 25, .58);
  border: .1cqw solid #234153;
}
.result-stat b {
  display: block;
  font-family: var(--font-pixel);
  font-size: 1.8cqw;
  line-height: 1.15;
  color: #fff0b0;
}
.result-stat small {
  display: block;
  font-size: .62cqw;
  letter-spacing: .1em;
  color: #8099a6;
}
.result-stat.coins { border-color: #725211; background: rgba(54, 37, 8, .34); }
.result-stat.coins b { color: #ffd45e; }
.result-stat .coin {
  position: absolute;
  top: .65cqw;
  left: .55cqw;
  width: 1.1cqw;
  height: 1.1cqw;
  opacity: .7;
}
.record-badge {
  display: inline-block;
  margin-bottom: .55cqw;
  padding: .2cqw .8cqw;
  border: .1cqw solid #f2c04a;
  color: #ffe38a;
  font-size: .65cqw;
  letter-spacing: .16em;
  background: rgba(64, 43, 3, .42);
  animation: record-glow 1.2s steps(2, end) infinite;
}
@keyframes record-glow { 50% { filter: brightness(1.4); } }
.result-wallet {
  font-size: .65cqw;
  color: #90a6af;
  margin-bottom: 1.2cqw;
}
.result-wallet b { color: #ffe18c; font-family: var(--font-pixel); }
.mini-coin {
  display: inline-block;
  width: .75cqw;
  height: .75cqw;
  border-radius: 50%;
  background: #ffc93c;
  vertical-align: -.06cqw;
  margin-right: .2cqw;
  box-shadow: inset 0 0 0 .09cqw #995700;
}

/* =========================================================
   Toast / rotate / footer
   ========================================================= */
.toast {
  position: absolute;
  z-index: 70;
  left: 50%;
  bottom: 14%;
  transform: translate(-50%, .8cqw);
  padding: .55cqw 1.2cqw;
  background: rgba(3, 13, 23, .94);
  border: .12cqw solid #caa04a;
  box-shadow: .22cqw .22cqw 0 rgba(0,0,0,.6);
  color: #ffeaac;
  font-size: .73cqw;
  letter-spacing: .05em;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { border-color: #d25c55; color: #ffb5aa; }

.rotate-hint { display: none; }

.cabinet-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1vw;
  padding: .65vh 0 .1vh;
  font-family: var(--font-pixel);
  font-size: clamp(6px, .55vw, 9px);
  letter-spacing: .22em;
  color: #516b78;
  text-shadow: 0 1px 0 #000;
}
.cabinet-foot i { width: 3.2vw; max-width: 46px; height: 1px; background: #293f4b; }
.cabinet-foot span:nth-child(3) { color: #8b6e32; }

@media (max-width: 900px) {
  #arcade { width: min(98vw, calc(91vh * 16 / 9), 1320px); }
  .brand-stamp { font-size: max(5px, .74cqw); }
  .menu-footer { font-size: clamp(6px, .58cqw, 8px); }
  .logo { font-size: 6.4cqw; }
  .card-name h3 { font-size: clamp(11px, 1.48cqw, 18px); }
  .card-name span { font-size: clamp(6px, .64cqw, 8px); }
  .card-blurb { font-size: clamp(7px, .72cqw, 9px); }
  .card-type { font-size: clamp(6px, .68cqw, 8px); }
  .card-level { font-size: clamp(8px, .76cqw, 10px); }
  .stat-row { font-size: clamp(7px, .63cqw, 8px); }
  .stat-row .stat-val { font-size: clamp(6px, .62cqw, 8px); }
  .card-tag { font-size: clamp(6px, .64cqw, 8px); }
  .card-tag b { font-size: clamp(6px, .66cqw, 8px); }
  .card-next { font-size: clamp(6px, .62cqw, 8px); }
  .upgrade-btn { font-size: clamp(8px, .76cqw, 10px); }
  .start-copy b { font-size: clamp(14px, 1.75cqw, 20px); }
  .start-copy small { font-size: clamp(6px, .65cqw, 8px); }
  .launch-tip { font-size: clamp(7px, .72cqw, 9px); }
  .hud-kicker { font-size: clamp(7px, .62cqw, 9px); }
  .weapon-tag { font-size: clamp(7px, .61cqw, 9px); }
  .wave-label { font-size: clamp(11px, 1.12cqw, 16px); }
  .score-label { font-size: clamp(6px, .6cqw, 8px); }
  .hud-bottom { font-size: clamp(6px, .55cqw, 8px); }
  .boss-title { font-size: clamp(8px, .63cqw, 10px); }
}

@media (orientation: portrait) and (max-width: 820px) {
  #arcade { display: none; }
  .rotate-hint {
    display: block;
    position: fixed;
    z-index: 100;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 78vw;
    padding: 22px 18px;
    text-align: center;
    color: #ffe7a1;
    background: #081a2a;
    border: 3px solid #c99b3d;
    box-shadow: 8px 8px 0 #02080f;
    font-size: 15px;
    line-height: 1.8;
    letter-spacing: .12em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .portrait, .start-btn, .start-arrow, .record-badge, .hp-fill.low { animation: none !important; }
}