:root {
  color-scheme: dark;
  --deep: #0b262c; --teal: #173f43; --gold: #e4bb72; --paper: #ffe9b6;
  --mint: #abddc7; --ink: #4b382a; --blue: #29c9ff; --red: #f8766d;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  background: #102d31; color: #fff0cd; font-weight: 600;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at center, #2b5753, #102c31 70%); }
button, input { font: inherit; }
button { touch-action: manipulation; cursor: pointer; color: inherit; border: 0; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 3px solid #ffe091; outline-offset: 2px; }
button:disabled { cursor: default; }
button:active:not(:disabled) { filter: brightness(1.08); }
img { display: block; max-width: 100%; user-select: none; -webkit-user-drag: none; }
h1,h2,h3,p { margin: 0; }
h1,h2,h3,.display { font-family: Georgia, "Times New Roman", serif; font-weight: 900; }
body, #app { min-height: 100svh; }
#app {
  position: relative; isolation: isolate; margin: auto; width: min(100%, 510px);
  height: 100vh; height: 100dvh; max-height: 1100px; overflow: hidden;
  box-shadow: 0 0 58px #041518a8; background: #173d40;
}
@media(min-width:640px){#app{width:min(510px,64dvh); min-width:350px;}}
.screen { position: relative; min-height: 100%; width: 100%; }
.menu {
  display: flex; flex-direction: column; isolation: isolate; overflow-y: auto;
  height: 100%; padding: max(20px,env(safe-area-inset-top)) clamp(18px,6%,34px) max(22px,env(safe-area-inset-bottom));
}
.menu::before { content:""; position:absolute; inset:0; z-index:-2; background: #376259 url("./assets/arena.webp") center/cover; }
.menu::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg,#12323560,#153e3c21 35%,#113034db 65%,#102c31 96%); }
.home::before { background-image:url("./assets/cover.webp"); background-position:center; }
.home::after { background:linear-gradient(180deg,#112d314d,transparent 32%,transparent 58%,#123135df 83%,#132f33); }
.home .menu-main { justify-content:flex-start; padding-top:clamp(4px,2.7dvh,32px); }
.home-spacer { flex:1; }
.lobby::after,.waiting::after,.result::after { background: linear-gradient(180deg,#0d3133ba,#102e32eb 58%,#102c31); }
.topline { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.topline .tag { margin-left:auto; }
.tag,.subhead,.muted { color: #bedbd4; font-size:.76rem; font-weight:700; }
.tag,.subhead { letter-spacing:.1em; text-transform:uppercase; }
.tag { text-shadow:0 1px 3px #142d30; }
.button,.mode,.back,.small,.room-code,.ready,.help {
  border-radius:12px; font-weight:800; transition:filter .12s, transform .12s; line-height:1.15;
}
.button,.mode { min-height:50px; padding:12px 16px; text-align:center; }
.button.green,.ready,.mode.green { color:#fbffdd; background:linear-gradient(#9bd03f,#4b9629); border:2px solid #c9e986; box-shadow:inset 0 -3px 0 #397725,0 3px 0 #315a28,0 4px 12px #1028206e; text-shadow:0 1.5px 1px #315a27; }
.button.gold { color:#503b1d; background:linear-gradient(#ffdf91,#edb55c); border:2px solid #f5d896; box-shadow:inset 0 -2px 0 #c58b43,0 3px 0 #835f35; }
.button.pale,.small,.back,.help { background:#285257; border:1px solid #71938b; color:#ffefcc; }
.button.ghost { background:#112f34b0; border:1px solid #557c78; color:#dce6d9; }
.button:disabled,.ready:disabled { opacity:.58; filter:saturate(.5); }
.back,.help { min-width:40px; min-height:40px; padding:7px 10px; font-size:1.1rem; }
.small { min-height:36px; padding:6px 11px; font-size:.78rem; }
.button:active:not(:disabled),.mode:active:not(:disabled),.small:active:not(:disabled) { transform:translateY(1px); }
.menu-main { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:clamp(6px,1.3dvh,15px); }
.lockup { text-align:center; filter:drop-shadow(0 3px 2px #392a1cc2); }
.lockup h1 { font-size:clamp(2.25rem,8.3vw,3.55rem); line-height:.98; text-transform:uppercase; letter-spacing:-.04em; color:#fff1c4; -webkit-text-stroke:1px #6d4b29; paint-order:stroke fill; text-shadow:0 3px #936634,0 5px #503622; }
.ribbon { display:inline-block; background:linear-gradient(#facb73,#e4a547); color:#40301e; padding:3px 23px 4px; margin-top:7px; clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%,4% 50%); letter-spacing:.12em; font-size:.82rem; font-weight:900; text-transform:uppercase; }
.hero-model { height:clamp(90px,27dvh,245px); width:auto; max-width:85%; object-fit:contain; filter:drop-shadow(0 9px 5px #2b26165c); animation:idle 3.2s ease-in-out infinite; }
.mode-list { width:100%; display:grid; gap:12px; margin:7px 0; }
.mode { display:flex; align-items:center; justify-content:flex-start; gap:14px; min-height:74px; text-align:left; }
.mode .mode-icon { display:grid; place-items:center; width:40px; height:40px; font-size:1.45rem; background:#24442a40; border-radius:11px; }
.mode strong { display:block; font:900 1.38rem/1.2 Georgia,serif; }
.mode small { display:block; font-size:.78rem; line-height:1.35; margin-top:3px; }
.mode .chevron { margin-left:auto; font-size:1.5rem; }
.mode.locked { background:linear-gradient(#345051,#253f42); color:#bbccc1; border:1px solid #60746c; }
.menu-foot { padding:10px 0 0; min-height:28px; text-align:center; color:#c7dbcc; font-size:.76rem; }
.menu-content { margin:auto 0; display:grid; gap:16px; padding:18px 0; }
.section-title { font-size:clamp(2.1rem,8vw,3.2rem); line-height:1.02; letter-spacing:-.045em; color:var(--paper); }
.map-card { display:flex; align-items:center; gap:12px; padding:11px; border:1px solid #82947b; border-radius:14px; background:#183f42dc; }
.map-card img { width:76px; height:61px; object-fit:cover; border-radius:8px; }
.map-card h3 { font-size:1.15rem; }
.map-card p,.guide { margin-top:4px; font-size:.82rem; color:#c5ddd1; line-height:1.45; }
.panel { padding:15px; border-radius:15px; border:1px solid #658579; background:#163c40f0; box-shadow:0 3px 12px #112b3029; }
.panel h3 { font-size:1.1rem; margin-bottom:10px; }
.field-label { display:grid; gap:6px; font-size:.8rem; color:#cfe4d5; }
input { width:100%; min-height:43px; border:1px solid #729486; border-radius:8px; padding:8px 11px; color:#fff5d7; background:#112e33; }
input::placeholder { color:#9eb6aa; }
input.room-input { letter-spacing:.13em; text-transform:uppercase; }
.join-row { display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:8px; }
.join-row .button { min-height:43px; padding:8px 13px; }
.lobby-actions { display:grid; gap:9px; }
.wait-icon { height:110px; width:110px; object-fit:contain; margin:0 auto; animation:idle 3s ease infinite; }
.waiting .menu-content,.result .menu-content { text-align:center; }
.room-code { display:block; margin:8px auto; font-family:monospace; font-size:clamp(1.8rem,9vw,2.6rem); letter-spacing:.12em; background:transparent; color:#ffe5a7; padding:6px 12px; }
.waiting-status { font-size:.85rem; color:#cae7d4; }
.battle { height:100%; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); display:grid; grid-template-rows:auto minmax(120px,1fr) auto auto; background: #193e42; overflow:hidden; }
.hud { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:46px; padding:4px 9px; background:linear-gradient(#245156,#153a3e); border-bottom:3px solid #bb8f53; z-index:4; gap:4px; }
.hud-side { display:flex; align-items:center; gap:7px; }
.hud-side:last-child { justify-content:flex-end; }
.hud .help { min-width:30px; min-height:32px; padding:2px; font-size:.85rem; }
.hud-label { font-size:.6rem; line-height:1; letter-spacing:.08em; color:#c8ddd0; text-transform:uppercase; display:block; }
.hud-number { font-family:Georgia,serif; font-size:1.25rem; font-weight:900; color:#fff0c8; font-variant-numeric:tabular-nums; }
.phase-name { background:#1e4242; box-shadow:0 2px 0 #bb9051; padding:5px 14px 8px; border-radius:0 0 11px 11px; font:900 1.14rem Georgia,serif; color:#fff0ce; align-self:start; text-align:center; }
.clock { color:#ffd27e; font-variant-numeric:tabular-nums; }
.arena { position:relative; overflow:hidden; isolation:isolate; background:#809e74 url("./assets/arena.webp") center/100% 100% no-repeat; }
.arena::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 18px #54432e2e; }
.arena .layer { position:absolute; inset:0; pointer-events:none; }
.map-pin { position:absolute; transform:translate(-50%,-50%); }
.crystal-hp { z-index:4; background:#15383ed9; padding:2px 6px; border:1px solid #d9c691; border-radius:8px; font-size:.62rem; white-space:nowrap; color:#fff0cb; }
.crystal-hp.enemy { background:#622f32dd; }
.build-site { position:absolute; width:clamp(34px,10.7%,58px); aspect-ratio:1; transform:translate(-50%,-62%); pointer-events:auto; padding:0; border:0; background:transparent; }
.build-site .pad { position:absolute; left:5%; bottom:12%; width:90%; height:37%; border-radius:50%; background:#c9bfa485; border:3px double #76c8ed; box-shadow:0 2px 1px #766d58; }
.build-site.rival .pad { border-color:#eb9185; }
.build-site .hammer { position:absolute; left:0; right:0; bottom:8%; font-size:clamp(.9rem,4vw,1.2rem); line-height:1; color:#fff8db; text-shadow:0 1px 3px #4d4837; }
.build-site.rival { pointer-events:none; }
.stronghold { position:absolute; width:66%; height:77%; left:17%; bottom:16%; display:grid; place-items:center; border:2px solid #604e42; background:linear-gradient(90deg,#bda88a,#ead4a8 60%,#b19a7d); border-radius:20% 20% 10% 10%; box-shadow:1px 3px 2px #5440247d; }
.stronghold::before { content:""; position:absolute; top:-13%; left:-12%; width:124%; height:25%; border:2px solid #314e55; background:linear-gradient(#7bd6ef,#3382ac); clip-path:polygon(0 0,22% 0,22% 35%,38% 35%,38% 0,63% 0,63% 35%,78% 35%,78% 0,100% 0,100% 100%,0 100%); }
.rival .stronghold::before { background:linear-gradient(#ffaba1,#ba4845); border-color:#813d37; }
.stronghold .tower-glyph { font-size:clamp(.75rem,3vw,1.05rem); line-height:1; }
.tower-level { position:absolute; right:-8%; bottom:7%; min-width:13px; text-align:center; background:#244951; color:#fff3cd; border:1px solid #c6a76c; border-radius:8px; font-size:.57rem; }
.hp { --remaining:100%; --fill:#8bd431; position:relative; width:28px; max-width:90%; height:5px; overflow:hidden; border:1px solid #342c28; border-radius:4px; background:#f7edda; box-shadow:0 1px 1px #17222640; }
.hp::before { content:""; display:block; height:100%; width:var(--remaining); background:var(--fill); }
.hp::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0,transparent calc(12.5% - 1px),#4a3e325c calc(12.5% - 1px),#4a3e325c 12.5%); }
.structure-hp { position:absolute; bottom:0; left:10%; width:80%; max-width:none; }
.fighter { position:absolute; width:clamp(26px,10.5%,58px); transform:translate(-50%,-85%); aspect-ratio:.88; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; will-change:left,top; }
.fighter img { width:100%; height:88%; object-fit:contain; position:relative; z-index:1; filter:drop-shadow(0 2px 1px #2a251d64); }
.fighter .base-ring { position:absolute; bottom:4%; left:16%; right:16%; height:20%; border-radius:50%; border:2px solid #2fadf2; background:#4dbbd358; }
.fighter.rival img { transform:scaleX(-1); }
.fighter.rival .base-ring { border-color:#d5604e; background:#da6b5358; }
.fighter .rank { position:absolute; bottom:91%; }
.fighter .hp { position:absolute; top:-28%; }
.rank { display:inline-flex; align-items:center; justify-content:center; height:12px; padding:0 3px; background:#26383c; color:#e5a16e; border-radius:7px; font:bold 10px/1 Arial,sans-serif; letter-spacing:.01em; white-space:nowrap; }
.rank.s2 { color:#dae9ef; }.rank.s3 { color:#ffd652; }
.combatant img { animation:combat-step .42s ease-in-out infinite alternate; }
.effects { z-index:4; }
.bolt { position:absolute; left:0;top:0; width:11px; height:4px; border-radius:50%; background:#fff5b9; box-shadow:0 0 4px #ffc459; }
.bolt.arrow { width:13px;height:3px;background:linear-gradient(90deg,#bc7330,#ffdb8b 70%,white); }
.bolt.magic,.bolt.heal,.bolt.cannon { width:7px;height:7px;background:#cf8cfa;box-shadow:0 0 5px 2px #d798fb; }
.bolt.heal { background:#dcffbb;box-shadow:0 0 6px 3px #8ddc72; }
.bolt.cannon { background:#69605b;box-shadow:0 0 4px 2px #ffa54c; }
.bolt.melee { width:12px;height:9px; border-left:3px solid #ffe4a2; background:transparent; box-shadow:none; }
.range-indicator { z-index:5;pointer-events:none; border-radius:50%;border:2px dashed #fff0a5; background:#ecf49635; }
@keyframes combat-step { from{translate:0 0;}to{translate:0 -2px;} }
.marker { pointer-events:auto; position:absolute; transform:translate(-50%,-50%); min-width:31px; min-height:28px; width:10%; height:7.2%; max-height:40px; background:transparent; }
.marker::before { content:""; position:absolute; inset:33% 16%; transform:rotate(-15deg); border-radius:45%; border:2px dashed #fff6ce; background:#3eaaa873; box-shadow:0 0 0 1px #216a6c; }
.marker:hover::before,.marker.drag-over::before { background:#8bddbee8; border-style:solid; }
.snap-preview { display:none; position:absolute; bottom:46%; left:6%; width:88%; height:100%; object-fit:contain; opacity:.65; }
.marker.drag-over .snap-preview { display:block; }
.match-meta { position:absolute; pointer-events:none; left:8px; top:7px; z-index:3; }
.foe-name { max-width:145px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:#17373ddc; color:#fff3ce; border:1px solid #cfb885; border-radius:7px; padding:3px 6px; font-size:.65rem; }
.tower-wheel { position:absolute; width:min(84%,250px); transform:translate(-50%,-100%); background:#193e42; border:2px solid #d2ac72; border-radius:12px; z-index:12; padding:7px; box-shadow:0 4px 10px #172a267a; }
.tower-wheel::after { content:""; position:absolute; left:calc(50% - 5px); bottom:-7px; width:10px;height:10px;transform:rotate(45deg);background:#193e42;border-right:2px solid #d2ac72;border-bottom:2px solid #d2ac72; }
.wheel-head { display:flex; justify-content:space-between; align-items:center; font-size:.81rem; padding:0 2px 5px; }
.wheel-head button { width:24px;height:24px;border-radius:7px;background:#355b5b; }
.wheel-options { display:flex; gap:4px; }
.wheel-choice { flex:1; padding:6px 2px 4px; min-height:47px; border-radius:7px; color:#4d392a; background:linear-gradient(#fff1cd,#e2bc8a); border:1px solid #b79868; font-size:.72rem; font-weight:800; }
.wheel-choice .cost { display:block; color:#6c2d83; }
.wheel-choice:disabled { opacity:.55; }
.bench-area { padding:3px 5px 4px; position:relative; z-index:3; background:linear-gradient(#244e4c,#183c40); }
.bench-head { display:flex; justify-content:space-between; align-items:center; min-height:25px; gap:6px; padding:0 3px; font-size:.73rem; color:#f8e6ba; }
.bench-head .selection-actions { display:flex; align-items:center; gap:4px; }
.bench-head button { min-height:24px; border-radius:5px; padding:2px 5px; font-size:.64rem; background:#2e5657; border:1px solid #557a70; }
.bench-head button.danger { color:#ffcd9e; }
.roster-wrap { display:flex; gap:5px; align-items:stretch; }
.roster { flex:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:4px 5px; padding:7px; min-width:0; border-radius:13px; border:2px solid #cfad7f; background:linear-gradient(#fff0c7,#ecd19e 80%,#c59f72); box-shadow:inset 0 2px #fff8de,0 2px #a67c53; }
.slot { position:relative; min-width:0; height:clamp(39px,7.6dvh,77px); border:1px solid #c6a680; border-radius:7px; background:linear-gradient(145deg,#f7e1b6,#e4c290); box-shadow:inset 1px 2px 0 #d6b58b,0 2px 0 #ab8965; padding:1px 2px; touch-action:none; }
.slot.empty { background:#d6b78d73; cursor:default; box-shadow:inset 1px 2px 0 #c8a67e; }
.slot img { width:100%;height:100%;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 1px 1px #5b462d70); }
.slot .rank { position:absolute;top:1px;left:2px;z-index:2; height:11px;font-size:9px; }
.slot.deployed::before { content:"";position:absolute;bottom:4%;left:13%;width:74%;height:30%;background:#31a7c851;border:3px solid #38c8fa;border-radius:50%;box-shadow:0 1px 0 #2f809b; }
.slot.selected { outline:3px solid #ffd646;outline-offset:-2px; }
.slot.can-merge { outline:2px dashed #ae661e; outline-offset:-4px; }
.slot.can-merge.drag-over,.slot.merge-flash { animation:mergeflash .42s ease-out; }
@keyframes mergeflash{0%{filter:brightness(1.75);box-shadow:0 0 12px 5px #ffe965;}100%{filter:brightness(1);}}
.slot.rejoice img{animation:cheer .48s ease-in-out 2;}
.slot.worried img { animation:worry 1.4s ease-in-out infinite; }
.slot.recovering img { opacity:.58; filter:saturate(.55); }
.slot.recovering::after { content:"Recovering"; position:absolute; bottom:1px; left:1px; right:1px; z-index:3; font:bold .52rem/1.25 var(--sans, sans-serif); border-radius:4px; background:#29444ce8; color:#f7ead1; }
@keyframes worry { 45% {transform:rotate(-5deg);} 65% {transform:rotate(4deg);} }
@keyframes cheer{50%{transform:translateY(-6px) rotate(-8deg)}}
.waiting-slot { flex:0 0 19%; border-radius:10px; border:2px solid #c89d58; background:#294a46; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:.62rem; color:#ffe39c; line-height:1.2; text-align:center; }
.waiting-slot img { width:80%;height:42%;object-fit:contain; }.waiting-slot b{font-family:Georgia,serif;font-size:.95rem;}
.bench-dim { opacity:.64; }
.commands { background:linear-gradient(#244c50,#173b40); padding:5px 8px 8px; border-top:1px solid #80917b; }
.command-row { display:flex; gap:5px; align-items:stretch; }
.draft-cards { flex:1; min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px; }
.draft-card { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-width:0; height:clamp(54px,9.5dvh,88px); border-radius:7px; background:radial-gradient(at 50% 20%,#9abbb1,#4a786e 70%); border:2px solid #ddbd86; box-shadow:inset 0 0 0 1px #325949,0 2px 0 #755d42; padding:1px 2px 0; }
.draft-card img { width:100%; height:75%; object-fit:contain; }.draft-card .card-name { width:100%; line-height:1.15; font-size:.57rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#fff3cc; background:#183d3bdc; border-radius:3px; }
.draft-card .price { position:absolute; top:0; left:0; background:#773d92; border-radius:3px 0 6px 0; padding:1px 3px; font-weight:800; font-size:.7rem; color:#ffdcff; }
.draft-card .card-rank {position:absolute;right:1px;top:0;font-size:.58rem;color:#ffe887;text-shadow:0 1px 2px #272c20;}
.draft-card:disabled{opacity:.48;filter:saturate(.5);}
.ready-wrap { display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:86px; max-width:32%; align-items:stretch; }
.mana { text-align:center; font-size:.72rem;font-weight:800;color:#f4c8ff; white-space:nowrap; }
.ready { font-family:Georgia,serif; font-size:1.18rem; min-height:38px; padding:5px 9px; }
.command-note { flex:1;display:flex;align-items:center;justify-content:center; min-height:56px; text-align:center;font-size:.79rem;color:#e7e6c9; }
.combat-note { width:100%; font:900 1rem Georgia,serif; gap:8px; }
.drag-ghost { position:fixed; z-index:20; pointer-events:none; width:48px;height:48px; opacity:.86; transform:translate(-50%,-70%); }
.burn-card {
  position:absolute; z-index:14; right:6%; bottom:27%; width:clamp(46px,15%,74px);
  aspect-ratio:4/5; pointer-events:none; filter:drop-shadow(0 2px 6px #5e3015);
  animation:burn-lift 1.35s ease-out forwards;
}
.burning-face {
  position:absolute; inset:0; overflow:hidden; border:3px solid #edbd6f; border-radius:8px;
  background:linear-gradient(#ffe9af,#ad7645); animation:burn-away 1.3s ease-in forwards;
}
.burning-face img { width:100%; height:100%; object-fit:contain; }
.burning-face::after {
  content:""; position:absolute; inset:-8% -10% auto; height:105%;
  background:linear-gradient(170deg,transparent 48%,#8b2509 58%,#ff6416 66%,#ffda5c 74%,transparent 79%);
  animation:burn-edge 1.3s ease-in forwards;
}
@keyframes burn-lift { to { transform:translateY(-20px) rotate(-8deg); } }
@keyframes burn-edge { from { transform:translateY(80%); } to { transform:translateY(-82%); } }
@keyframes burn-away {
  0%,20% { clip-path:polygon(0 0,100% 0,100% 100%,70% 100%,48% 100%,24% 100%,0 100%); }
  65% { clip-path:polygon(0 0,100% 0,100% 53%,70% 65%,48% 46%,24% 59%,0 51%); }
  100% { clip-path:polygon(0 0,100% 0,100% 0,70% 0,48% 0,24% 0,0 0); opacity:0; }
}
@media(prefers-reduced-motion:reduce){ .burn-card,.burning-face,.burning-face::after { animation:none; } }
.result .result-icon { width:auto;height:clamp(88px,17dvh,165px);object-fit:contain;margin:auto; }
.result .score { display:flex;justify-content:space-around;gap:10px;padding:12px 5px;margin-top:10px;border-top:1px solid #557370; }
.score strong { display:block; font:900 1.45rem Georgia,serif; }
dialog { background:transparent; border:0; padding:14px; color:#fff0d1; max-width:min(420px,96vw); width:100%; }
dialog::backdrop { background:#081f24b8; }
#dialog-content { background:linear-gradient(#264d50,#16393e); border:2px solid #c8a368; padding:20px; border-radius:16px; box-shadow:0 9px 28px #10252b91; }
#dialog-content h2 { font-size:1.5rem;margin-bottom:10px; }
#dialog-content p,#dialog-content li { font-size:.91rem;line-height:1.46;color:#e0e7d7; }
#dialog-content ul { padding-left:20px; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; margin-top:16px; }
.modal-actions .button { min-height:42px; padding:8px 12px; }
#notice { position:fixed; left:50%; bottom:max(15px,env(safe-area-inset-bottom)); transform:translate(-50%,15px); opacity:0; z-index:50; width:max-content; max-width:min(90vw,435px); text-align:center; background:#16383ef2; border:1px solid #dfb574; color:#fff1cb; padding:9px 14px; border-radius:10px;font-size:.85rem; pointer-events:none; transition:opacity .18s,transform .18s; }
#notice.show {opacity:1;transform:translate(-50%,0);}
@keyframes idle { 50%{transform:translateY(-4px) rotate(1deg);} }
@media(max-height:670px) { .menu-content{gap:10px;padding:8px 0}.menu-main{gap:2px}.mode{min-height:54px}.mode-list{gap:8px}.panel{padding:11px}.map-card img{height:42px;width:58px}.slot{height:clamp(36px,7.3dvh,51px)}.bench-head{min-height:21px}.hero-model{height:20dvh}.hud{min-height:36px}.hud-number{font-size:1.05rem}.roster{gap:2px 4px;padding:4px}.commands{padding:3px 7px 6px}.draft-card{height:clamp(44px,8.5dvh,58px)}.wait-icon{height:70px} }
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important;transition-duration:.01ms!important;}}