*{box-sizing:border-box}
:root{
  font-family:"Trebuchet MS",Arial,sans-serif;
  color:#1f2729;
  background:#15191b;
  font-synthesis:none;
  --ink:#171d1f;
  --glass:#171d1fde;
  --teal:#25d2cd;
  --teal-dark:#087d7d;
  --gold:#e6b34b;
  --paper:#fffdf8;
  --line:#dce2df;
}
html,body{margin:0;min-height:100%;overflow:hidden}
body{min-height:100dvh;display:grid;place-items:center;background:radial-gradient(circle at 50% 12%,#435055 0,#20282b 42%,#111517 100%)}
button,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.5}
button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid #ffd36b;outline-offset:3px}

.shell{position:relative;width:min(100vw,480px);height:min(100dvh,850px);overflow:hidden;border-radius:18px;background:#879797;box-shadow:0 28px 80px #0009;isolation:isolate}
.arena{position:absolute;inset:0;overflow:hidden;background:#879797}
canvas{display:block;width:100%;height:100%;touch-action:none;background:#879797 url("art/medieval-village.webp") center/cover no-repeat}

.masthead{position:absolute;z-index:5;top:10px;left:10px;right:10px;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 10px 0 14px;border:1px solid #ffffff24;border-radius:15px;background:var(--glass);box-shadow:0 8px 24px #0003;backdrop-filter:blur(12px);pointer-events:none}
.brand{display:flex;align-items:baseline;gap:3px;width:92px;color:#fff;font-weight:900;font-style:italic;line-height:.9;letter-spacing:-.8px;text-shadow:0 1px 2px #0008}
.brand span{font-size:11px;letter-spacing:.1px}.brand strong{font-size:17px}
.masthead-actions{display:flex;gap:5px;pointer-events:auto}
.icon,.icon#mute{width:36px;height:36px;display:grid;place-items:center;padding:0;border:1px solid #ffffff2e;border-radius:10px;background:#ffffff12;color:#fff;font-size:15px;font-weight:800;line-height:1;letter-spacing:-.5px;box-shadow:none}
.icon#mute{width:44px;font-size:11px}
.icon:hover:not(:disabled){background:#ffffff20}.icon:active{transform:translateY(1px)}

.hud{position:absolute;z-index:6;top:16px;left:108px;right:92px;height:44px;pointer-events:none;color:#fff}
.wave-chip,.power{position:absolute;top:3px;min-width:48px;padding:4px 5px;background:transparent;color:#fff;box-shadow:none;text-align:left}
.wave-chip{left:0}.power{right:0;text-align:right}
.wave-chip span,.power span,.squad-chip span,.ammo-chip span{display:block;font-size:7px;line-height:1;letter-spacing:1px;font-weight:800;color:#d5dddc}
.wave-chip strong,.power strong{display:block;margin-top:4px;font-size:12px;line-height:1;font-weight:800}
.power.boost,.power.boost strong{background:transparent;color:#ffe18b}.power.boost strong{color:#ffe18b}
.squad-chip{position:absolute;top:-2px;left:50%;min-width:64px;transform:translateX(-50%);padding:2px 8px 3px;border:0;border-left:1px solid #ffffff26;border-right:1px solid #ffffff26;border-radius:0;background:transparent;color:#fff;box-shadow:none;text-align:center}
.squad-chip span{color:#9faeac}
.squad-chip strong{display:block;margin-top:0;font-size:27px;line-height:1;font-weight:900;color:var(--teal);text-shadow:0 1px 4px #000}

.objective{position:absolute;z-index:3;top:77px;left:50%;width:max-content;max-width:calc(100% - 44px);transform:translateX(-50%);padding:6px 11px;border:1px solid #ffffff24;border-radius:7px;background:#1a2123ad;color:#fff;font-size:9px;font-weight:800;letter-spacing:.7px;text-align:center;box-shadow:0 4px 14px #0002;backdrop-filter:blur(7px);pointer-events:none}
.ammo-chip{position:absolute;z-index:3;left:13px;bottom:55px;min-width:60px;padding:6px 9px;border:1px solid #ffffff2e;border-radius:10px;background:#172022c7;color:#fff;text-align:left;box-shadow:0 5px 16px #0003;backdrop-filter:blur(8px);pointer-events:none}
.ammo-chip span{color:#bcc9c7}.ammo-chip strong{display:block;margin-top:2px;font-size:18px;line-height:1;color:var(--teal)}
.court-hint{position:absolute;z-index:3;bottom:16px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:4px 8px;color:#fff;font-size:10px;font-weight:900;letter-spacing:1.5px;text-align:center;text-shadow:0 2px 5px #000,0 0 12px #000;pointer-events:none}
.court-hint[hidden]{display:none}
.legacy-status{display:none!important}

.toast{position:absolute;z-index:8;top:38%;left:50%;transform:translate(-50%,-50%) translateY(6px);max-width:calc(100% - 44px);padding:10px 15px;border:1px solid #ffffff38;border-radius:10px;background:#161d1eed;color:#fff;font-size:17px;line-height:1.1;font-weight:900;text-align:center;box-shadow:0 12px 32px #0005;opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;backdrop-filter:blur(10px)}
.toast.show{opacity:1;transform:translate(-50%,-50%)}

.overlay{position:absolute;z-index:10;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden;overscroll-behavior:contain;background:#111719a6;backdrop-filter:blur(8px)}
.overlay[hidden]{display:none}
.panel{width:100%;max-height:min(91%,720px);overflow-y:auto;overscroll-behavior:contain;padding:25px 23px 23px;border:1px solid #fff;border-radius:18px;background:var(--paper);color:#1f282a;box-shadow:0 20px 60px #0006;scrollbar-color:#9aa7a4 transparent}
.tag{color:var(--teal-dark);font-size:9px;font-weight:900;letter-spacing:1.3px;text-transform:uppercase}
.panel h2{margin:8px 0 11px;font-size:30px;line-height:1.04;letter-spacing:-1px;font-weight:900;color:#172023;white-space:pre-line}
.panel p{margin:9px 0 15px;font-size:14px;line-height:1.45;color:#596668}
.panel .large-number{margin:14px 0 4px;font-size:60px;line-height:1;font-weight:900;letter-spacing:-3px;color:#088f8e}

/* Intro keeps the city in view and uses a short, dark glass bottom sheet. */
.overlay.intro{align-items:flex-end;padding:0 12px max(12px,env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent 0 58%,#10161745 72%,#101617d9 100%);backdrop-filter:none;pointer-events:none}
.overlay.intro .panel,.intro-panel{max-height:30%;padding:16px 18px 15px;border:1px solid #ffffff2c;border-radius:17px;background:#171d1fed;color:#fff;box-shadow:0 14px 40px #0007;backdrop-filter:blur(14px);pointer-events:auto}
.overlay.intro .tag,.intro-panel .tag{color:#81e8e1}
.overlay.intro .panel h2,.intro-panel h2{margin:4px 0 6px;color:#fff;font-size:23px;letter-spacing:-.55px}
.overlay.intro .panel p,.intro-panel p{margin:5px 0 10px;color:#d2d9d7;font-size:12px;line-height:1.35}
.overlay.intro .steps,.intro-panel .steps{margin:8px 0}
.overlay.win{align-items:center;background:#111719bd;backdrop-filter:blur(5px)}
.overlay.win .panel{max-width:420px;text-align:center}

.primary,.secondary{min-height:44px;padding:10px 15px;border-radius:10px;font-weight:900;letter-spacing:.1px}
.primary{width:100%;border:1px solid #f5d27c;background:var(--gold);color:#2d291f;box-shadow:0 3px 0 #a87b28}
.primary:hover:not(:disabled){background:#f0c763}.primary:active{transform:translateY(1px);box-shadow:0 2px 0 #a87b28}
.secondary{width:100%;margin-top:8px;border:1px solid #b9c2bf;background:#fff;color:#263133;box-shadow:none}
.overlay.intro .secondary,.intro-panel .secondary{border-color:#ffffff38;background:#ffffff0d;color:#fff}
.steps{display:flex;gap:6px;margin:14px 0}.steps div{flex:1;min-width:0;padding:8px 4px;border:1px solid #dfe5e2;border-radius:9px;background:#f1f4f2;color:#485456;font-size:9px;font-weight:800;text-align:center}.steps b{display:block;margin-bottom:2px;color:#078c8c;font-size:18px;line-height:1}
.overlay.intro .steps div,.intro-panel .steps div{border-color:#ffffff1f;background:#ffffff0c;color:#e8edeb}.overlay.intro .steps b,.intro-panel .steps b{color:#52d8d0}

.question-panel{max-width:450px;padding-top:23px}.question-panel h2{font-size:23px;line-height:1.22;letter-spacing:-.45px}.question-panel .instruction{margin:6px 0 11px;font-size:12px;line-height:1.35;color:#667274}
.options{display:grid;gap:8px;margin:13px 0 16px}
.option{min-height:49px;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #cfd8d5;border-radius:10px;background:#fff;color:#253032;font-size:14px;line-height:1.3;font-weight:700;text-align:left;box-shadow:0 2px 0 #d3dbd8}
.option:hover:not(:disabled){border-color:#72aaa7}.option.selected{border-color:#0b9a96;background:#e6f7f5;box-shadow:0 2px 0 #0b7774}.option.correct{border-color:#238967;background:#e9f8f0;box-shadow:0 2px 0 #238967}.option.wrong{border-color:#c85b5b;background:#fff1ef;box-shadow:0 2px 0 #c85b5b}.option.neutral{opacity:.66}.option:disabled{opacity:1}
.option b{min-width:25px;height:25px;display:grid;place-items:center;border-radius:6px;background:#edf1ef;color:#405052;font-size:10px}
.feedback{margin:14px 0;padding:13px;border:1px solid #cbd8d4;border-radius:10px;background:#eef6f3;font-size:13px;line-height:1.4}.feedback strong{display:block;margin-bottom:4px;color:#19745e;font-size:14px}.feedback p{margin:5px 0;font-size:13px;line-height:1.38;color:#4f5d5f}
.match-row{display:grid;gap:6px;padding:6px 0;color:#283436;font-size:13px;font-weight:800}.match-row select{width:100%;max-width:100%;min-height:44px;padding:9px 32px 9px 10px;border:1px solid #cbd5d2;border-radius:9px;background:#fff;color:#263234;font-weight:700}.match-row select:disabled{opacity:1;color:#263234}
.subtle{margin-bottom:0!important;color:#7a8685!important;font-size:11px!important}.reward{margin:10px 0 15px;padding:10px;border:1px solid #dfc576;border-radius:9px;background:#fff7d8;color:#6c5420;font-size:13px;font-weight:800}.loading{padding:23px}.panel h2:focus{outline:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

@media(max-width:520px){.shell{width:100vw;height:100dvh;border-radius:0;box-shadow:none}.masthead{top:max(7px,env(safe-area-inset-top));left:7px;right:7px}.hud{top:max(13px,calc(env(safe-area-inset-top) + 6px));left:104px;right:88px}.objective{top:max(72px,calc(env(safe-area-inset-top) + 65px))}.ammo-chip{bottom:max(49px,calc(env(safe-area-inset-bottom) + 43px))}.court-hint{bottom:max(11px,env(safe-area-inset-bottom))}.overlay{padding:13px}.panel{padding:21px 18px 19px}.panel h2{font-size:27px}.question-panel h2{font-size:21px}}
@media(max-width:380px){.brand{width:78px}.brand span{font-size:9px}.brand strong{font-size:15px}.hud{left:91px;right:82px}.wave-chip strong,.power strong{font-size:10px}.squad-chip{min-width:55px}.squad-chip strong{font-size:24px}.icon,.icon#mute{width:33px}.icon#mute{width:39px;font-size:10px}}
@media(max-height:650px){.masthead{height:50px}.hud{height:38px}.objective{top:66px}.overlay.intro .panel,.intro-panel{max-height:30%}.panel h2{font-size:25px}.intro-panel h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Keep wordmark, wave count, crew and controls in separate readable columns. */
.brand{display:grid;gap:1px;width:65px;letter-spacing:0}.brand span{font-size:10px}.brand strong{font-size:18px}
.hud{left:99px;right:111px}.wave-chip strong,.power strong{font-size:11px}.power{max-width:57px;min-width:45px}.squad-chip{min-width:55px;padding-left:5px;padding-right:5px}
@media(max-width:420px){.hud{left:91px;right:106px}.squad-chip{left:52%;min-width:42px}.squad-chip strong{font-size:23px}.power{display:none}.wave-chip{left:0}.brand strong{font-size:17px}}
.engine-chip{position:absolute;z-index:2;right:14px;bottom:50px;min-width:76px;background:#182123df;border:1px solid #e9c37566;border-radius:10px;padding:8px 11px;color:#fff;text-align:right;pointer-events:none}.engine-chip span{display:block;font-size:8px;letter-spacing:.6px;color:#e9c375}.engine-chip strong{font-size:19px}.owned-upgrades{position:absolute;z-index:2;left:0;right:0;bottom:17px;text-align:center;font-size:10px;font-weight:bold;color:#ffdfa3;text-shadow:0 2px 5px #000;pointer-events:none}
.upgrade-card{position:relative;display:grid;grid-template-columns:86px 1fr;grid-template-rows:auto auto;gap:6px 13px;width:100%;text-align:left;padding:14px;margin:12px 0;border:2px solid #d0b277;border-radius:15px;background:#fff9e9;color:#392b1a;min-height:113px}.upgrade-card:hover{background:#fff0cb;border-color:#a87822}.upgrade-card strong{font-size:18px;align-self:end}.upgrade-card span{font-size:13px;line-height:1.4}.upgrade-art{grid-row:1/3;width:86px;height:86px;background-repeat:no-repeat;background-position:center;background-size:contain}.upgrade-art.doubleShot{background-image:url('art/ballista.webp')}.upgrade-art.champion{background-image:url('art/medieval-soldiers.webp');background-size:200% 200%;background-position:100% 0}.panel h2{font-family:Georgia,serif}.overlay.intro .panel{max-height:36%}.brand strong{color:#f1d59b}.ammo-chip span{font-size:8px}
/* Phone controls stay thumb-sized; sheets remain scrollable on short screens. */
button,a,select{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.icon,.icon#mute{width:44px;height:44px;flex-shrink:0}
.masthead-actions{gap:5px}.hud{right:117px}
.panel{overflow-wrap:anywhere;-webkit-overflow-scrolling:touch}
.match-row select{font-size:16px}
.followup-links{display:grid;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.followup-links a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:9px 12px;color:#087d7d;font-size:14px;font-weight:800;text-align:center;border:1px solid #b9d3cb;border-radius:9px;text-decoration:none}
.followup-links a:focus-visible{outline:3px solid #e6b34b;outline-offset:2px}
@media(max-width:520px){.hud{right:117px}.overlay{padding-top:max(13px,env(safe-area-inset-top));padding-bottom:max(13px,env(safe-area-inset-bottom))}.engine-chip{bottom:max(50px,calc(env(safe-area-inset-bottom) + 43px))}.owned-upgrades{bottom:max(17px,env(safe-area-inset-bottom))}.overlay.intro .panel{max-height:min(58%,300px)}}
@media(max-width:360px){.masthead{padding-left:10px;padding-right:7px}.brand{width:52px}.brand strong{font-size:15px}.hud{left:76px;right:111px}.squad-chip{left:auto;right:0;transform:none;min-width:38px}.wave-chip strong{font-size:10px}.upgrade-card{grid-template-columns:62px 1fr;padding:11px;gap:5px 10px}.upgrade-art{width:62px;height:72px}.upgrade-card strong{font-size:16px}.upgrade-card span{font-size:12px}}
@media(orientation:landscape) and (max-height:520px){.shell{width:min(100vw,480px);height:100dvh;border-radius:0}.overlay.intro .panel{max-height:76%}.panel{max-height:100%}.objective{font-size:8px}.upgrade-card{min-height:80px;margin:8px 0;padding:8px}.upgrade-art{height:60px}.panel h2{font-size:23px}}