:root { color-scheme:light; font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif; background:#09131e; color:#e4edf4; -webkit-text-size-adjust:100%; }
* { box-sizing:border-box; }
body { margin:0; }
button { font:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:3px solid #72dfff; outline-offset:3px; }
button:disabled { cursor:default; }
.defense-shell { width:100%; max-width:450px; margin:auto; padding:4px 4px max(8px,env(safe-area-inset-bottom)); background:linear-gradient(#101f2c,#09131e); }
.hud { position:absolute; top:0; left:0; right:0; height:17px; z-index:2; pointer-events:none; display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 8px; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }
.hud > span { display:inline-flex; align-items:center; justify-content:center; min-height:17px; padding:1px 6px; border-radius:8px; line-height:1; }
.life { color:#ff7b99; letter-spacing:1px; font-size:12px; background:#341f32; box-shadow:inset 0 1px #fff8; }
.wave { color:#9be9ff; background:#182f42; letter-spacing:.04em; }
.coins { color:#ffda80; min-width:69px; background:#3b3020; box-shadow:inset 0 1px #fff8; }
.arena { position:relative; border-radius:23px; overflow:hidden; background:#142832; isolation:isolate; box-shadow:inset 0 0 0 1px #cda86690,0 0 0 1px #cda86690,0 5px 0 #050d16,0 0 22px #47c7e514; }
canvas { display:block; width:100%; height:auto; aspect-ratio:420/540; }
.slots { position:absolute; inset:0; pointer-events:none; }
.slot { position:absolute; transform:translate(-50%,-50%); width:15%; aspect-ratio:1; padding:0; border:2px dashed #77a8b4; border-radius:50%; background:#142936cc; color:#b2e3eb; font-size:26px; font-weight:400; line-height:1; pointer-events:auto; box-shadow:0 3px 0 #020d1850,inset 0 0 0 4px #8deaff12; }
.slot.unaffordable:not(.occupied) { border-color:#4c6676; color:#6e8a9b; background:#13243070; box-shadow:none; }
/* Top portraits and badges stay below the in-field HUD, including at 320px. */
.slot:nth-child(-n+2) img { top:0; height:100%; }
.slot:nth-child(-n+2) .upgrade { top:9px; }
.slot .role { position:absolute; left:-7px; bottom:-5px; z-index:1; display:grid; place-items:center; width:20px; height:20px; border:1px solid var(--cast-color); border-radius:50%; background:#102332; color:var(--cast-color); font-size:13px; line-height:1; }
.slot:disabled { cursor:default; }
.slot.occupied { background:radial-gradient(circle at 50% 30%,#334657,#142132); border:2px solid var(--cast-color); box-shadow:0 4px 0 #030e1e,0 0 12px color-mix(in srgb,var(--cast-color) 35%,transparent),inset 0 0 14px #ffffff0d; }
.slot img { width:118%; height:118%; object-fit:contain; position:absolute; left:-9%; top:-18%; pointer-events:none; filter:drop-shadow(0 2px 1px #37492b24); }
.slot .level { position:absolute; bottom:-5px; left:10%; right:10%; padding:3px 0; border-radius:8px; background:#182638; font-size:9px; letter-spacing:1px; color:#ffdd88; box-shadow:0 2px 3px #0008; }
.slot .upgrade { position:absolute; top:-9px; right:-9px; border:1px solid #ffe3a0; border-radius:9px; background:#273544; padding:3px 4px; font-size:12px; color:#bac5cc; box-shadow:0 2px 5px #0008; }
.field-tools { display:flex; gap:6px; position:absolute; right:10px; top:26px; }
.field-tools button { min-width:44px; height:44px; padding:0 8px; border:1px solid #b7a16c; border-radius:13px; background:#182c40f2; color:#e1d3ac; font-size:14px; font-weight:800; box-shadow:0 3px 0 #020b16; }
.field-tools button[aria-pressed="true"] { background:#a4782c; border-color:#a4782c; color:#fff2c7; }
.field-tools button:disabled { opacity:.45; box-shadow:none; }
.wave-notice { position:absolute; top:44%; left:50%; transform:translate(-50%,-50%); color:#fff2c7; background:#152c43f5; border:1px solid #e7c571a0; border-radius:24px; padding:9px 18px; box-shadow:0 4px 12px #0008; font-weight:750; font-size:13px; letter-spacing:.06em; pointer-events:none; white-space:nowrap; }
.wave-notice:empty { display:none; }
.overlay { position:absolute; inset:0; z-index:5; display:grid; place-items:center; padding:12px; background:#020b16b8; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.overlay[hidden] { display:none; }
.panel { position:relative; width:94%; text-align:center; padding:25px 16px 23px; border:1px solid #d9b775; border-radius:28px; background:radial-gradient(ellipse at 50% 0,#2e4158,#101b2b 75%); box-shadow:0 6px 0 #050c18,0 0 28px #edb95920,0 20px 45px #0009; }
.panel::before { content:""; position:absolute; inset:7px; border:1px solid #e0b96938; border-radius:21px; pointer-events:none; }
.panel-icon { display:grid; place-items:center; width:54px; height:54px; margin:auto; border:1px solid #b89952; border-radius:18px; background:#26394c; font-size:34px; line-height:1; color:#ffe29e; box-shadow:inset 0 2px #fff7; }
h1 { font-size:22px; letter-spacing:-.06em; margin:15px 0 8px; color:#ffdfa0; }
.panel p { font-size:11px; color:#b5c5d3; line-height:1.6; margin:8px 0 10px; }
.panel p:empty { display:none; }
.preview-team { display:flex; align-items:flex-end; justify-content:center; height:112px; margin:0 0 17px; }
.preview-team img { width:31%; height:100px; object-fit:contain; filter:drop-shadow(0 5px 2px #0008); }
.preview-team img:nth-child(2) { height:114px; margin:0 -4px; z-index:1; }
.primary { position:relative; width:90%; min-height:49px; padding:12px 20px; border:1px solid #ffffff30; border-radius:16px; background:linear-gradient(#f5db91,#c58a32 55%,#e4b959); color:#291b13; font-size:15px; font-weight:750; letter-spacing:.04em; box-shadow:0 4px 0 #624315,0 8px 15px #f3bc4b2b,inset 0 1px #ffffff30; }
.primary:active { transform:translateY(2px); box-shadow:0 2px 0 #624315; }
.roster { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:9px 4px 0; }
.cast { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:80px; border:2px solid #3f5369; border-radius:18px; background:linear-gradient(145deg,#24384d,#101c2b); color:#c3d5e1; padding:6px; box-shadow:0 3px 0 #030b17; }
.cast[aria-pressed="true"] { border-color:var(--cast-color); background:linear-gradient(145deg,#3d4150,#1d2b40); box-shadow:0 3px 0 #030b17,0 0 12px color-mix(in srgb,var(--cast-color) 30%,transparent),inset 0 0 15px color-mix(in srgb,var(--cast-color) 10%,transparent); }
.cast[aria-pressed="true"]::after { content:"✓"; position:absolute; right:5px; top:5px; display:grid; place-items:center; width:17px; height:17px; border-radius:50%; background:#a4782c; color:#fff; font-size:11px; font-weight:800; }
.cast.unaffordable img { filter:grayscale(.45); opacity:.6; }
.cast.unaffordable .cast-cost { color:#94a2ad; background:#273544; }
.cast img { width:80%; max-width:80px; height:48px; object-fit:contain; filter:drop-shadow(0 3px 1px #0008); }
.cast-stats { display:flex; align-items:center; justify-content:space-between; width:100%; gap:3px; font-size:12px; font-weight:800; }
.cast-stats small { font-size:10px; font-weight:650; white-space:nowrap; }
.cast-stats b { position:absolute; top:7px; left:7px; color:var(--cast-color); font-size:16px; line-height:1; }
.cast-cost { padding:4px 5px; border-radius:7px; color:#ffda80; background:#49391e; font-size:11px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.hint { text-align:center; font-size:10px; color:#97aabb; min-height:17px; margin:8px 0 2px; letter-spacing:.02em; }
.preview-team[hidden] { display:none; }
@media (max-width:360px) { .defense-shell { padding-left:4px; padding-right:4px; }.hud { gap:5px; }.hud > span { padding:1px 6px; }.life { font-size:12px; }.cast { min-height:78px; padding:5px 4px; }.cast img { height:45px; }.cast-cost { font-size:10px; padding:4px; }.panel { padding-left:12px; padding-right:12px; } }
@media (hover:hover) { .slot:not(:disabled):hover { border-style:solid; background:#2b4153; }.cast:not(:disabled):hover { border-color:var(--cast-color); }.field-tools button:not(:disabled):hover { filter:brightness(1.05); } }
@media (prefers-reduced-motion:no-preference) { .slot,.cast { transition:background .15s,border-color .15s,box-shadow .15s; } }
@media (max-width:360px) {
    .panel { padding:16px 12px; }
    .panel-icon { width:36px; height:36px; border-radius:12px; font-size:24px; }
    .panel h1 { font-size:20px; margin:10px 0 6px; }
    .panel p { font-size:10px; margin:6px 0 8px; }
    .preview-team { height:70px; margin-bottom:10px; }
    .preview-team img { height:65px; }
    .preview-team img:nth-child(2) { height:75px; }
    .primary { min-height:44px; padding:10px 16px; }
}

/* Gold metal and cool light share the existing layout; decoration takes no space. */
.hud { background:linear-gradient(100deg,#172b3d,#213c4a,#172b3d); box-shadow:inset 0 -1px #e3be6e40; }
.hud > span { border:1px solid #dbc18038; text-shadow:0 0 7px currentColor; }
.slot.occupied[data-level="3"] { border-color:#ffe398; box-shadow:0 0 0 2px #715027,0 0 15px #eebd5d66,inset 0 0 14px #f6d88718; }
.slot.occupied[data-level="3"] .level { color:#fff0ba; background:linear-gradient(#967231,#5c421d); border:1px solid #d5b66b; }
.slot.can-upgrade .upgrade { background:linear-gradient(#f1d383,#af7724); color:#251c13; box-shadow:0 0 9px #ffc85c55; }
.cast[aria-pressed="true"]::after { background:linear-gradient(#ffe8a7,#d3a341); color:#302313; box-shadow:0 0 8px #ffd16d80; }
.cast-stats b { text-shadow:0 0 8px currentColor; }
.field-tools button[aria-pressed="true"] { background:linear-gradient(#d6b365,#9c6e29); border-color:#f4d78b; color:#201c18; box-shadow:0 0 12px #f2ca5a45; }
.wave-notice.boss-notice { color:#ffe09b; border-color:#ffd26a; background:linear-gradient(110deg,#301c32,#633b35,#301c32); box-shadow:0 0 18px #f2b9564d; letter-spacing:.12em; }
.overlay[data-result="won"] .panel { border-color:#ffe39c; background:radial-gradient(ellipse at 50% 0,#5e5035,#18263b 70%); box-shadow:0 0 24px #f5c36145,0 20px 45px #0009; }
.overlay[data-result="won"] .panel-icon { color:#fff0b9; border-color:#f8d98b; box-shadow:0 0 20px #f4bd4a55,inset 0 0 15px #ffdf8530; }
@media (prefers-reduced-motion:no-preference) {
    .boss-notice { animation:boss-arrive .4s ease-out both; }
    .overlay[data-result="won"] .panel-icon { animation:crown-arrive .5s ease-out both; }
}
@keyframes boss-arrive { from { opacity:0; transform:translate(-50%,-50%) scale(.9); } to { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes crown-arrive { from { transform:translateY(5px) scale(.9); } to { transform:translateY(0) scale(1); } }