/* ============================================================
   RIVAL ARCHERS — UI / Presentation
   Original work by Tawajo. Copyright © 2026 Tawajo. All rights reserved.
   Publisher: Tawajo — www.tawajo.com
   ============================================================ */
:root{
  --gold:#e8b45c;
  --gold-bright:#ffd98a;
  --gold-deep:#a9742e;
  --cream:#f6edd9;
  --muted:#b9afc5;
  --ink:#09080f;
  --panel:#16121f;
  --panel-2:#0e0b15;
  --blue:#6ab9f2;
  --blue-deep:#2f6f9e;
  --red:#ef7070;
  --red-deep:#9b3339;
  --green:#8fd17b;
  --display:'Cinzel', Georgia, 'Times New Roman', serif;
  --ui:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
html{background:#060509;}
body{
  margin:0; background:radial-gradient(1200px 800px at 50% 40%, #141021 0%, #060509 70%);
  font-family:var(--ui); color:var(--cream); overflow:hidden; overscroll-behavior:none;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button{font-family:inherit; color:inherit; border:0; background:none; padding:0; cursor:pointer;}
button:focus-visible{outline:2px solid var(--gold-bright); outline-offset:3px;}
svg{display:block;}

#app{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:#050409;
}
#stage{
  position:relative; width:min(100vw, 177.7778vh); height:min(56.25vw, 100vh);
  overflow:hidden; background:#0b0914; isolation:isolate;
  container-type:size; box-shadow:0 0 120px rgba(0,0,0,.9);
}
#app:fullscreen #stage{width:min(100vw, 177.7778vh); height:min(56.25vw, 100vh);}
canvas#game{
  position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none;
}
canvas#game.hide-cursor{cursor:none;}
.layer{position:absolute; inset:0;}
.hidden{display:none !important;}

/* ---------------------------- overlays ---------------------------- */
.vignette{
  position:absolute; inset:0; pointer-events:none; z-index:4;
  background:
    radial-gradient(120% 95% at 50% 48%, transparent 46%, rgba(4,3,8,.38) 84%, rgba(2,2,5,.78) 100%),
    linear-gradient(180deg, rgba(3,2,8,.32) 0%, transparent 18%, transparent 82%, rgba(3,2,8,.58) 100%);
}
.grain{
  position:absolute; inset:-40%; pointer-events:none; z-index:5; opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation:grainShift 1.2s steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-1%)} 100%{transform:translate(0,0)}
}
#flash{
  position:absolute; inset:0; pointer-events:none; z-index:12; opacity:0;
  background:radial-gradient(90% 90% at 50% 50%, rgba(255,60,60,.0) 30%, rgba(255,40,40,.38) 100%);
}
#flash.hit{animation:flashHit .42s ease-out;}
#flash.gold{background:radial-gradient(90% 90% at 50% 50%, rgba(255,220,140,.05) 20%, rgba(255,190,80,.32) 100%); animation:flashGold .5s ease-out;}
#flash.death{background:radial-gradient(100% 100% at 50% 50%, rgba(120,0,10,.06) 30%, rgba(160,10,20,.5) 100%); animation:flashDeath .8s ease-out;}
@keyframes flashHit{0%{opacity:1}100%{opacity:0}}
@keyframes flashGold{0%{opacity:1}100%{opacity:0}}
@keyframes flashDeath{0%{opacity:1}100%{opacity:0}}
.ambient-glow{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background:
    radial-gradient(46% 42% at 50% 46%, rgba(255,177,92,.075), transparent 70%),
    radial-gradient(38% 34% at 50% 100%, rgba(255,140,70,.1), transparent 72%);
  mix-blend-mode:screen;
}
#stage.low-hp .vignette{animation:lowEdge 1.25s ease-in-out infinite;}
@keyframes lowEdge{
  0%,100%{box-shadow:inset 0 0 70px rgba(190,28,38,.16)}
  50%{box-shadow:inset 0 0 150px rgba(215,35,42,.4)}
}

/* ---------------------------- shared chrome ---------------------------- */
.icon-btn{
  width:clamp(30px, 3.25cqw, 46px); height:clamp(30px, 3.25cqw, 46px);
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  border:1px solid rgba(232,180,92,.28); border-radius:50%;
  background:rgba(12,10,18,.55); color:var(--cream);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:color .2s, border-color .2s, background .2s, transform .15s;
}
.icon-btn svg{width:52%; height:52%; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.icon-btn svg path[fill], .icon-btn svg circle[fill]{fill:currentColor; stroke:none;}
.icon-btn:hover{color:var(--gold-bright); border-color:rgba(255,217,138,.7); background:rgba(38,29,22,.75); transform:translateY(-1px);}
.icon-btn:active{transform:translateY(0) scale(.96);}
.icon-btn .ic-off{display:none;}
.icon-btn.off .ic-on{display:none;}
.icon-btn.off .ic-off{display:block;}

.coin{
  width:1.15em; height:1.15em; border-radius:50%; display:inline-block; flex:0 0 auto;
  background:radial-gradient(circle at 34% 30%, #ffe9a8 0%, #f0bf5c 35%, #b97d26 72%, #7a4e13 100%);
  box-shadow:inset 0 0 0 .09em rgba(255,238,180,.65), 0 .12em .25em rgba(0,0,0,.6);
  position:relative;
}
.coin::after{
  content:''; position:absolute; inset:.28em; border-radius:50%;
  border:.075em solid rgba(92,57,10,.55);
}
.coin-chip{
  display:flex; align-items:center; gap:.5em; font-family:var(--display); font-weight:700;
  font-size:clamp(12px, 1.3cqw, 20px); color:var(--gold-bright);
  background:rgba(10,8,15,.62); border:1px solid rgba(232,180,92,.3);
  border-radius:999px; padding:.46em .9em .46em .62em;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  box-shadow:inset 0 1px rgba(255,255,255,.06), 0 4px 14px rgba(0,0,0,.35);
}
.coin-chip.large{font-size:clamp(14px, 1.5cqw, 22px);}
.coin-chip.bump{animation:coinBump .45s cubic-bezier(.2,.9,.3,1.4);}
@keyframes coinBump{0%{transform:scale(1)}35%{transform:scale(1.14)}100%{transform:scale(1)}}

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.7em;
  padding:.95em 1.5em; border-radius:4px; border:1px solid rgba(232,180,92,.32);
  background:linear-gradient(180deg, rgba(34,28,42,.9), rgba(17,14,24,.92));
  color:var(--cream); font-size:clamp(11px, 1.02cqw, 16px); font-weight:600; letter-spacing:.04em;
  overflow:hidden; transition:transform .16s, border-color .2s, box-shadow .2s, color .2s;
  box-shadow:inset 0 1px rgba(255,255,255,.06), 0 6px 20px rgba(0,0,0,.28);
}
.btn::after{
  content:''; position:absolute; inset:1px; border-radius:3px; pointer-events:none;
  border:1px solid rgba(255,255,255,.035);
}
.btn::before{
  content:''; position:absolute; top:0; left:-80%; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,232,180,.16), transparent);
  transform:skewX(-18deg); transition:left .55s ease;
}
.btn:hover::before{left:130%;}
.btn:hover{border-color:rgba(255,217,138,.72); transform:translateY(-1px); box-shadow:inset 0 1px rgba(255,255,255,.1), 0 10px 26px rgba(0,0,0,.4);}
.btn:active{transform:translateY(0);}
.btn-primary{
  color:#241708; border-color:#f4d28d;
  background:linear-gradient(180deg, #ffe3a2 0%, #eab75d 45%, #c48a36 100%);
  box-shadow:inset 0 1px rgba(255,255,255,.7), inset 0 -1px rgba(92,58,15,.5), 0 8px 26px rgba(196,138,54,.28);
}
.btn-primary::after{border-color:rgba(255,255,255,.25);}
.btn-primary::before{background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);}
.btn-primary:hover{color:#1b1003; border-color:#fff0c2; box-shadow:inset 0 1px rgba(255,255,255,.8), 0 10px 32px rgba(232,180,92,.42);}
.btn-ghost{background:linear-gradient(180deg, rgba(31,27,40,.82), rgba(13,11,20,.86));}
.btn-quiet{border-color:rgba(255,255,255,.13); color:var(--muted); background:rgba(10,8,15,.4);}
.btn-quiet:hover{color:var(--cream);}
.btn.danger{border-color:rgba(239,112,112,.5); color:#ffb4b4;}
.btn .btn-ic{width:1.55em; height:1.55em; display:flex; align-items:center; justify-content:center; flex:0 0 auto; opacity:.95; line-height:1;}
.btn .btn-ic svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round;}
.btn-primary .btn-ic svg{stroke-width:1.75;}
.btn .btn-txt{display:flex; flex-direction:column; align-items:flex-start; gap:.1em; line-height:1.1;}
.btn .btn-txt b{font-size:1.08em; font-weight:700; letter-spacing:.05em;}
.btn .btn-txt small{font-size:.72em; letter-spacing:.14em; text-transform:uppercase; opacity:.55; font-weight:500;}

/* ---------------------------- HUD ---------------------------- */
#hud{z-index:8; pointer-events:none;}
.hud-top{
  position:absolute; top:1.6cqw; left:2.3cqw; right:2.3cqw;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.4cqw;
}
.fighter{
  display:flex; align-items:flex-start; gap:.75cqw; width:37cqw; max-width:500px;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.45));
}
.fighter.right{flex-direction:row; justify-content:flex-end;}
.fighter-main{flex:1 1 auto; min-width:0; padding-top:.1cqw;}
.fighter.right .fighter-main{display:flex; flex-direction:column; align-items:flex-end;}
.portrait{
  width:clamp(38px, 4.5cqw, 66px); height:clamp(38px, 4.5cqw, 66px); flex:0 0 auto;
  border-radius:50%; border:1px solid rgba(232,180,92,.55);
  background:radial-gradient(circle at 40% 30%, #2a2438, #0c0a12 72%);
  box-shadow:0 0 0 3px rgba(8,6,12,.55), 0 0 24px rgba(0,0,0,.5), inset 0 0 18px rgba(0,0,0,.6);
  position:relative; overflow:hidden;
}
.portrait::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(180deg, rgba(255,255,255,.12), transparent 45%);
}
.portrait svg{width:100%; height:100%; padding:0;}
.fighter.active .portrait{box-shadow:0 0 0 3px rgba(8,6,12,.55), 0 0 32px rgba(255,214,140,.55); border-color:rgba(255,220,150,.9);}
.fighter.active .hp-shell{border-color:rgba(255,220,150,.4);}
.fighter.active .fighter-name{color:var(--gold-bright);}
.p1 .portrait{border-color:rgba(106,185,242,.65); box-shadow:0 0 0 3px rgba(8,6,12,.55), 0 0 26px rgba(60,150,230,.22);}
.p2 .portrait{border-color:rgba(239,112,112,.65); box-shadow:0 0 0 3px rgba(8,6,12,.55), 0 0 26px rgba(230,60,60,.22);}
.portrait .p-rim{fill:none; stroke:rgba(255,220,160,.22); stroke-width:1.2;}
.portrait .p-bg{fill:#101a28;}
.p2 .portrait .p-bg{fill:#221018;}
.portrait .p-body{fill:#1d3b57;}
.p2 .portrait .p-body{fill:#5c2029;}
.portrait .p-face{fill:#e3ae86;}
.portrait .p-helm{fill:#c3d4e2;}
.p2 .portrait .p-helm{fill:#dcc6c6;}
.portrait .p-plume{fill:#6fc8ff;}
.p2 .portrait .p-plume{fill:#ff8590;}
.portrait .p-bow{fill:none; stroke:rgba(232,180,92,.32); stroke-width:1.2; stroke-linecap:round;}
.p1 .portrait .p-bow{stroke:rgba(140,205,255,.4);}
.p2 .portrait .p-bow{stroke:rgba(255,150,150,.4);}
.fighter-name{
  display:flex; align-items:center; gap:.7em; width:100%;
  font-size:clamp(9px, .95cqw, 14px); font-weight:700; letter-spacing:.19em; color:var(--cream);
  text-transform:uppercase; text-shadow:0 1px 6px rgba(0,0,0,.8); white-space:nowrap;
}
.fighter.right .fighter-name{flex-direction:row; justify-content:flex-end;}
.p1 .fighter-name{color:#d8efff;}
.p2 .fighter-name{color:#ffe2e2;}
.pips{display:flex; gap:.42em; margin-left:.1em;}
.fighter.right .pips{margin-left:0; margin-right:.1em;}
.pips i{
  width:.62em; height:.62em; transform:rotate(45deg); border-radius:3px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
  transition:background .35s, box-shadow .35s, border-color .35s;
}
.p1 .pips i.on{background:var(--blue); border-color:#bfe6ff; box-shadow:0 0 8px rgba(106,185,242,.9);}
.p2 .pips i.on{background:var(--red); border-color:#ffd0d0; box-shadow:0 0 8px rgba(239,112,112,.9);}
.hp-shell{
  position:relative; width:100%; height:clamp(9px, 1.35cqw, 19px); margin-top:.45em;
  border-radius:4px; border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(5,4,8,.92), rgba(24,19,30,.9));
  box-shadow:inset 0 2px 6px rgba(0,0,0,.9), 0 1px rgba(255,255,255,.05);
  overflow:hidden;
}
.hp-fill,.hp-ghost{position:absolute; inset:0; transform-origin:left center; width:100%;}
.fighter.right .hp-fill,.fighter.right .hp-ghost{transform-origin:right center;}
.hp-ghost{background:rgba(255,235,220,.22); transition:width .5s cubic-bezier(.3,.8,.3,1) .22s;}
.hp-fill{
  background:linear-gradient(180deg, #a9dcff 0%, #59a8dd 42%, #2e6e9b 100%);
  box-shadow:0 0 14px rgba(90,170,230,.45);
  transition:width .32s cubic-bezier(.2,.85,.3,1), opacity .25s;
}
.p2 .hp-fill{background:linear-gradient(180deg, #ffb3b3 0%, #dd6161 42%, #8f2a30 100%); box-shadow:0 0 14px rgba(240,80,80,.45);}
.hp-fill.low{background:linear-gradient(180deg,#ffb08a,#e2503f 55%,#8f1f1f) !important; animation:lowPulse .9s ease-in-out infinite;}
@keyframes lowPulse{50%{filter:brightness(1.35)}}
.hp-shine{position:absolute; inset:0 0 50% 0; background:linear-gradient(180deg, rgba(255,255,255,.25), transparent); pointer-events:none;}
.hp-value{
  position:absolute; top:50%; right:.45em; transform:translateY(-50%);
  font-size:clamp(7px,.66cqw,10px); font-weight:800; letter-spacing:.06em; color:rgba(255,255,255,.82);
  text-shadow:0 1px 2px rgba(0,0,0,.9);
}
.fighter.right .hp-value{right:auto; left:.45em;}
.hud-center{display:flex; flex-direction:column; align-items:center; gap:.5cqw; padding-top:.15cqw; flex:0 0 auto;}
.round-chip{
  font-family:var(--display); font-size:clamp(10px, 1.05cqw, 16px); letter-spacing:.16em;
  color:var(--muted); background:rgba(8,6,13,.55); border:1px solid rgba(255,255,255,.1);
  padding:.35em .9em; border-radius:4px; backdrop-filter:blur(6px); white-space:nowrap;
}
.round-chip b{color:var(--gold-bright); font-size:1.25em;}
.round-chip span{opacity:.55; font-size:.8em;}
.wind{
  display:flex; align-items:center; gap:.42em; padding:.3em .75em;
  background:rgba(8,6,13,.5); border:1px solid rgba(255,255,255,.08); border-radius:999px;
  font-size:clamp(8px,.8cqw,12px); letter-spacing:.14em; color:var(--muted);
  backdrop-filter:blur(6px); transition:border-color .3s;
}
.wind-word{font-weight:700; opacity:.65; font-size:.85em;}
.wind-icon{font-size:1.25em; color:var(--gold-bright); line-height:1; transition:transform .4s;}
.wind-val{font-weight:700; color:var(--cream); min-width:2.1em; text-align:right; font-variant-numeric:tabular-nums;}
.wind.strong{border-color:rgba(239,112,112,.4);}
.wind.strong .wind-icon{color:#ff9f8e;}
.wind.calm .wind-icon{color:rgba(185,175,197,.7);}
.wind.calm .wind-val{color:rgba(185,175,197,.7);}

.hud-tools{
  position:absolute; right:2.2cqw; bottom:2.2cqw; display:flex; gap:.55cqw;
  pointer-events:auto; z-index:2;
}
.turn-pill{
  position:absolute; left:50%; top:9.4cqw; transform:translateX(-50%);
  display:flex; align-items:center; gap:.6em;
  padding:.52em 1.15em; border-radius:999px;
  background:rgba(8,6,13,.66); border:1px solid rgba(232,180,92,.28);
  backdrop-filter:blur(8px); font-size:clamp(9px,.9cqw,14px); font-weight:700;
  letter-spacing:.2em; color:var(--gold-bright); white-space:nowrap;
  transition:opacity .35s, transform .35s; box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.turn-pill .dot{width:.5em; height:.5em; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; animation:turnPulse 1.6s infinite;}
.turn-pill.p2{color:var(--red); border-color:rgba(239,112,112,.32);}
.turn-pill.hide{opacity:0; transform:translate(-50%,-8px);}
@keyframes turnPulse{50%{opacity:.35; transform:scale(.8)}}

.power-hud{
  position:absolute; left:50%; bottom:2.2cqw; transform:translateX(-50%);
  width:clamp(190px, 24cqw, 380px); opacity:0; transition:opacity .22s;
}
.power-hud.show{opacity:1;}
.power-top{
  display:flex; justify-content:space-between; margin-bottom:.4em;
  font-size:clamp(8px,.78cqw,12px); font-weight:700; letter-spacing:.22em; color:var(--gold-bright);
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.power-top span:last-child{font-variant-numeric:tabular-nums;}
.power-bar{
  position:relative; height:clamp(7px, .9cqw, 13px); border-radius:999px; overflow:hidden;
  background:rgba(6,5,10,.85); border:1px solid rgba(232,180,92,.35);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.8), 0 0 20px rgba(232,180,92,.08);
}
.power-fill{
  position:absolute; inset:0; width:0%;
  background:linear-gradient(90deg,#8b5a1e,#e8b45c 58%,#ffe9a8 88%,#fff5d8);
  box-shadow:0 0 12px rgba(255,200,90,.75);
}
.power-fill.full{animation:powerFull .5s infinite alternate;}
@keyframes powerFull{to{filter:brightness(1.28)}}
.power-notch{position:absolute; left:82%; top:0; bottom:0; width:1px; background:rgba(255,255,255,.24);}
.power-gloss{position:absolute; inset:0 0 50% 0; background:linear-gradient(180deg, rgba(255,255,255,.26), transparent); pointer-events:none;}
.hint{
  position:absolute; left:50%; bottom:6.1cqw; transform:translateX(-50%);
  font-size:clamp(9px,.82cqw,13px); font-weight:500; letter-spacing:.12em; color:rgba(246,237,217,.72);
  background:rgba(7,5,11,.55); border:1px solid rgba(255,255,255,.07);
  padding:.45em 1em; border-radius:999px; white-space:nowrap; backdrop-filter:blur(6px);
  transition:opacity .4s, transform .4s; text-transform:uppercase;
}
.hint.hide{opacity:0; transform:translate(-50%,8px);}
.hint b{color:var(--gold-bright); font-weight:700;}

/* ---------------------------- menu ---------------------------- */
.menu-screen{z-index:20; display:block;}
.menu-rays{
  position:absolute; inset:-20%; pointer-events:none; z-index:0; opacity:.5;
  background:repeating-conic-gradient(from 0deg at 78% 46%,
    rgba(255,200,130,.05) 0deg 2.2deg,
    transparent 2.2deg 13deg);
  -webkit-mask-image:radial-gradient(52% 62% at 78% 46%, #000 0%, transparent 72%);
  mask-image:radial-gradient(52% 62% at 78% 46%, #000 0%, transparent 72%);
  animation:menuRays 70s linear infinite;
}
@keyframes menuRays{to{transform:rotate(360deg)}}
.menu-scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(6,5,11,.97) 0%, rgba(6,5,11,.9) 28%, rgba(7,5,13,.64) 52%, rgba(7,5,13,.12) 74%, rgba(7,5,13,.28) 100%),
    radial-gradient(80% 100% at 30% 50%, transparent 0%, rgba(4,3,8,.22) 100%);
}
.menu-top{
  position:absolute; top:3cqw; left:4.2cqw; right:4.2cqw; display:flex; justify-content:space-between; align-items:center;
}
.menu-top-right{display:flex; align-items:center; gap:.6em;}
.brand{
  display:flex; align-items:center; gap:.75em; font-family:var(--display); font-weight:700;
  letter-spacing:.3em; font-size:clamp(9px, .9cqw, 14px); color:rgba(246,237,217,.78);
}
.brand-bow{width:clamp(20px,1.9cqw,30px); height:auto; fill:none; stroke:var(--gold); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
@keyframes menuRise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@keyframes menuFade{from{opacity:0}to{opacity:1}}
.menu-top{animation:menuFade .9s ease-out both;}
.menu-content > *{animation:menuRise .7s cubic-bezier(.2,.85,.3,1) both;}
.menu-content > *:nth-child(2){animation-delay:.05s}
.menu-content > *:nth-child(3){animation-delay:.1s}
.menu-content > *:nth-child(4){animation-delay:.15s}
.menu-content > *:nth-child(5){animation-delay:.2s}
.menu-content > *:nth-child(6){animation-delay:.25s}
.menu-content > *:nth-child(7){animation-delay:.3s}
.menu-foot{animation:menuFade .9s ease-out .3s both;}
.menu-content{
  position:absolute; left:6.2cqw; top:50%; transform:translateY(-51%);
  width:48cqw; max-width:640px; z-index:2;
}
.eyebrow{
  display:flex; align-items:center; gap:.9em; margin:0;
  font-size:clamp(8px, .78cqw, 12px); font-weight:700; letter-spacing:.42em; color:var(--gold);
  text-transform:uppercase;
}
.eyebrow span{display:inline-block; width:2.2em; height:1px; background:linear-gradient(90deg, transparent, rgba(232,180,92,.75));}
.eyebrow span:last-child{background:linear-gradient(90deg, rgba(232,180,92,.75), transparent);}
.game-title{
  font-family:var(--display); font-weight:800; line-height:.82; letter-spacing:.015em;
  font-size:clamp(42px, 8.2cqw, 132px); margin:.28em 0 .12em; color:var(--cream);
  text-shadow:0 4px 30px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.14);
}
.game-title em{
  font-style:normal; display:inline-block; letter-spacing:.06em;
  background:linear-gradient(180deg, #fff0c8 0%, #f2c977 32%, #c48a36 66%, #8d5a1e 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 5px 18px rgba(232,180,92,.22));
}
.ornament{display:flex; align-items:center; gap:.75em; width:min(22cqw, 300px); margin:.5em 0 1em;}
.ornament i{flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(232,180,92,.55));}
.ornament i:last-child{background:linear-gradient(90deg, rgba(232,180,92,.55), transparent);}
.ornament svg{width:1.05em; height:1.05em; fill:var(--gold); font-size:clamp(10px,1cqw,15px); filter:drop-shadow(0 0 6px rgba(232,180,92,.5));}
.tagline{
  margin:0 0 2.1cqw; color:var(--muted); font-size:clamp(10px, 1.02cqw, 16px); letter-spacing:.05em; max-width:34em; line-height:1.6;
}
.mode-row{display:grid; grid-template-columns:1fr 1fr; gap:.7cqw; width:min(39cqw, 500px);}
.mode-row .btn{justify-content:flex-start; padding:1.05em 1.2em;}
.difficulty-row{display:flex; align-items:center; gap:1.1em; margin-top:1.5cqw; flex-wrap:wrap;}
.diff-label{font-size:clamp(7px,.66cqw,10px); font-weight:700; letter-spacing:.28em; color:rgba(185,175,197,.66);}
.segmented{
  position:relative; display:flex; gap:.2em; padding:.25em; border-radius:4px;
  border:1px solid rgba(255,255,255,.11); background:rgba(8,6,13,.55);
}
.segmented button{
  position:relative; z-index:1; padding:.48em 1.1em; border-radius:3px;
  font-size:clamp(8px,.78cqw,12px); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(185,175,197,.72); transition:color .22s, background .22s;
}
.segmented button:hover{color:var(--cream);}
.segmented button.active{color:#20140a; background:linear-gradient(180deg,#f3d59a,#d6a655); box-shadow:0 2px 10px rgba(232,180,92,.22);}
.menu-links{display:flex; align-items:center; gap:.9em; margin-top:1.6cqw; flex-wrap:wrap;}
.text-link{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:clamp(9px,.82cqw,13px); font-weight:600; letter-spacing:.1em; color:rgba(246,237,217,.66);
  transition:color .2s; position:relative;
}
.text-link::after{
  content:''; position:absolute; left:1.7em; right:0; bottom:-.35em; height:1px;
  background:linear-gradient(90deg, rgba(255,217,138,.6), transparent);
  transform:scaleX(0); transform-origin:left; transition:transform .25s;
}
.text-link:hover::after{transform:scaleX(1);}
.text-link:hover{color:var(--gold-bright);}
.text-link.is-new{color:var(--gold-bright);}
.text-link.is-new .mini-ic{filter:drop-shadow(0 0 7px rgba(232,180,92,.6)); animation:newGlow 2.4s ease-in-out infinite;}
@keyframes newGlow{50%{filter:drop-shadow(0 0 13px rgba(255,220,150,.9))}}
.mini-ic{width:1.15em; height:1.15em; display:inline-flex; align-items:center; justify-content:center; opacity:.9;}
.mini-ic svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.dot-sep{color:rgba(255,255,255,.18);}
.menu-foot{
  position:absolute; left:4.2cqw; right:4.2cqw; bottom:3cqw;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:2em;
}
.foot-credit{display:flex; flex-direction:column; gap:.28em; min-width:0;}
.credit-line{font-size:clamp(9px,.88cqw,14px); letter-spacing:.15em; color:rgba(246,237,217,.82); white-space:nowrap;}
.credit-line::before{content:''; display:inline-block; width:.42em; height:.42em; margin-right:.7em; vertical-align:middle; transform:rotate(45deg); background:var(--gold); box-shadow:0 0 8px rgba(232,180,92,.55);}
.credit-line b{color:var(--gold-bright); font-weight:800; letter-spacing:.2em;}
.credit-sub{font-size:clamp(6px,.58cqw,9px); letter-spacing:.14em; color:rgba(185,175,197,.4); padding-left:1.55em; text-transform:uppercase;}
.foot-tip{justify-self:center; font-size:clamp(7px,.68cqw,11px); letter-spacing:.14em; text-transform:uppercase; color:rgba(185,175,197,.48); white-space:nowrap;}
.foot-tip i{display:inline-block; width:3px; height:3px; border-radius:50%; background:var(--gold); opacity:.6; margin:0 .9em; vertical-align:middle;}
.menu-tools{display:flex; gap:.5em; justify-self:end;}

/* ---------------------------- screens / panels ---------------------------- */
.overlay-screen{
  z-index:30; display:flex; align-items:center; justify-content:center; padding:3cqw;
  background:
    radial-gradient(90% 90% at 50% 45%, rgba(15,11,22,.62), rgba(4,3,8,.9)),
    rgba(4,3,8,.45);
  backdrop-filter:blur(7px) saturate(.9); -webkit-backdrop-filter:blur(7px) saturate(.9);
  animation:screenIn .28s ease-out;
}
@keyframes screenIn{from{opacity:0}to{opacity:1}}
.panel{
  position:relative; width:min(76cqw, 1000px); max-height:92cqh; overflow:auto;
  padding:2.6cqw 3cqw; border-radius:6px;
  background:
    linear-gradient(160deg, rgba(32,26,44,.95), rgba(12,9,18,.97) 62%),
    var(--panel);
  border:1px solid rgba(232,180,92,.32);
  box-shadow:0 30px 90px rgba(0,0,0,.7), inset 0 1px rgba(255,255,255,.07), inset 0 0 80px rgba(232,180,92,.035);
  animation:panelIn .4s cubic-bezier(.2,.9,.25,1.05);
  scrollbar-width:thin; scrollbar-color:rgba(232,180,92,.35) transparent;
}
.panel::-webkit-scrollbar{width:6px;}
.panel::-webkit-scrollbar-thumb{background:rgba(232,180,92,.3); border-radius:99px;}
.panel::before,.panel::after{
  content:''; position:absolute; width:1.2cqw; height:1.2cqw; pointer-events:none;
  border-color:rgba(232,180,92,.8); border-style:solid;
}
.panel::before{top:.55cqw; left:.55cqw; border-width:1px 0 0 1px;}
.panel::after{bottom:.55cqw; right:.55cqw; border-width:0 1px 1px 0;}
@keyframes panelIn{from{opacity:0; transform:translateY(14px) scale(.985)}to{opacity:1; transform:none}}
.panel-head{display:flex; align-items:flex-start; gap:1.5em; margin-bottom:.9em;}
.panel-head > div:first-child{flex:1;}
.panel h2{
  font-family:var(--display); font-weight:700; margin:.12em 0 .1em;
  font-size:clamp(24px, 3.2cqw, 52px); letter-spacing:.03em; color:var(--cream);
  text-shadow:0 3px 18px rgba(0,0,0,.6);
}
.panel .eyebrow{font-size:clamp(7px,.64cqw,10px); letter-spacing:.34em;}
.close-btn{pointer-events:auto; margin-left:auto;}
.panel-sub{margin:.4em 0 1.6em; color:var(--muted); font-size:clamp(10px,.88cqw,14px); line-height:1.6;}
.panel-sub b{color:var(--gold-bright);}
.panel-actions{display:flex; align-items:center; justify-content:center; gap:.8em; margin-top:1.8em; flex-wrap:wrap;}
.panel-actions.stack{flex-direction:column; align-items:stretch; margin-top:1.6em;}
.panel-actions.stack .btn{justify-content:center;}
.panel-actions.split{justify-content:space-between; width:100%;}
.panel-credit{
  margin:1.5em 0 0; text-align:center; font-size:clamp(6px,.6cqw,9px);
  letter-spacing:.2em; text-transform:uppercase; color:rgba(185,175,197,.3);
}
.panel-credit b{color:rgba(232,180,92,.6); font-weight:700;}

/* ---------------------------- welcome / first run ---------------------------- */
.welcome-screen{z-index:32;}
.welcome-panel{
  width:min(48cqw, 640px); text-align:center; padding:2.2cqw 3.2cqw 1.8cqw;
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(232,180,92,.1), transparent 70%),
    linear-gradient(160deg, rgba(36,29,49,.97), rgba(11,8,17,.98) 66%);
}
.welcome-panel .eyebrow{justify-content:center; margin-top:-.4em;}
.welcome-panel h2{font-size:clamp(28px,3.6cqw,58px); margin:.12em 0 .06em;}
.welcome-crest{
  width:clamp(64px,6.2cqw,96px); height:clamp(64px,6.2cqw,96px); margin:0 auto .2em;
  filter:drop-shadow(0 6px 24px rgba(232,180,92,.25));
}
.welcome-crest svg{width:100%; height:100%; fill:none; stroke-linecap:round; stroke-linejoin:round;}
.welcome-crest .crest-ring{stroke:rgba(232,180,92,.3); stroke-width:1.3;}
.welcome-crest .crest-ring.inner{stroke:rgba(232,180,92,.16); stroke-dasharray:2 5;}
.welcome-crest .crest-bow{stroke:rgba(232,180,92,.85); stroke-width:3.2;}
.welcome-crest .crest-string{stroke:rgba(246,237,217,.6); stroke-width:1.2;}
.welcome-crest .crest-arrow{stroke:rgba(255,225,160,.8); stroke-width:2.2;}
.welcome-crest .crest-star{fill:rgba(232,180,92,.9); stroke:none;}
.welcome-sub{
  margin:.5em auto 1.2em; max-width:34em; color:var(--muted);
  font-size:clamp(9px,.84cqw,13px); line-height:1.7;
}
.welcome-list{
  list-style:none; margin:0 0 .4em; padding:0; display:grid; gap:.5em; text-align:left;
}
.welcome-list li{
  display:flex; align-items:flex-start; gap:.9em; padding:.62em .85em;
  border:1px solid rgba(255,255,255,.07); border-radius:4px;
  background:linear-gradient(120deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}
.welcome-num{
  font-family:var(--display); font-size:clamp(10px,.95cqw,15px); font-weight:700;
  color:var(--gold); letter-spacing:.08em; padding-top:.15em; flex:0 0 auto;
}
.welcome-list b{display:block; font-size:clamp(9px,.82cqw,13px); letter-spacing:.08em; color:var(--cream);}
.welcome-list small{display:block; margin-top:.2em; font-size:clamp(8px,.72cqw,11px); color:rgba(185,175,197,.72); line-height:1.5;}
.welcome-credit{
  margin:1.1em 0 0; font-size:clamp(7px,.64cqw,10px); letter-spacing:.22em;
  text-transform:uppercase; color:rgba(185,175,197,.42);
}
.welcome-credit b{color:var(--gold-bright);}

/* ---------------------------- interactive tutorial ---------------------------- */
.tutorial{
  position:absolute; inset:0; z-index:11; pointer-events:none;
}
.tut-card{
  position:absolute; left:2.4cqw; top:2.8cqw; width:min(33cqw,440px);
  padding:1.15cqw 1.35cqw 1.05cqw; border-radius:5px; pointer-events:auto;
  background:
    linear-gradient(155deg, rgba(37,30,50,.96), rgba(10,8,16,.97) 72%),
    var(--panel);
  border:1px solid rgba(232,180,92,.34);
  box-shadow:0 22px 60px rgba(0,0,0,.6), inset 0 1px rgba(255,255,255,.06), inset 0 0 50px rgba(232,180,92,.035);
  animation:tutIn .45s cubic-bezier(.2,.9,.25,1.05);
}
.tut-card::before{
  content:''; position:absolute; left:.55cqw; top:.55cqw; width:1.1cqw; height:1.1cqw;
  border:1px solid rgba(232,180,92,.7); border-width:1px 0 0 1px; pointer-events:none;
}
@keyframes tutIn{from{opacity:0; transform:translateY(-10px) scale(.985)}to{opacity:1; transform:none}}
.tut-topline{display:flex; align-items:center; justify-content:space-between; gap:1em;}
.tut-badge{
  display:inline-flex; align-items:center; gap:.55em;
  font-size:clamp(7px,.66cqw,10px); font-weight:800; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold);
}
.tut-badge i{width:.45em; height:.45em; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; animation:turnPulse 1.6s infinite;}
.tut-step{font-size:clamp(8px,.72cqw,11px); font-weight:700; letter-spacing:.14em; color:rgba(185,175,197,.6); font-variant-numeric:tabular-nums;}
.tut-dots{display:flex; gap:.35em; margin:.7em 0 .85em;}
.tut-dots i{height:3px; flex:1; border-radius:99px; background:rgba(255,255,255,.1); transition:background .35s, box-shadow .35s;}
.tut-dots i.done{background:rgba(232,180,92,.55);}
.tut-dots i.on{background:linear-gradient(90deg,#c48a36,#ffe0a0); box-shadow:0 0 8px rgba(232,180,92,.55);}
.tut-kicker{margin:0 0 .22em; font-size:clamp(7px,.62cqw,9px); font-weight:800; letter-spacing:.32em; color:rgba(185,175,197,.5); text-transform:uppercase;}
.tut-title{margin:0 0 .32em; font-family:var(--display); font-size:clamp(17px,1.8cqw,29px); letter-spacing:.03em; color:var(--cream);}
.tut-body{margin:0 0 .9em; font-size:clamp(9px,.78cqw,12px); line-height:1.62; color:var(--muted);}
.tut-body b{color:var(--gold-bright);}
.tut-keys{display:flex; flex-wrap:wrap; gap:.4em; margin-bottom:.85em;}
.tut-keys .key{
  display:inline-flex; align-items:center; gap:.35em; padding:.3em .65em; border-radius:3px;
  border:1px solid rgba(232,180,92,.28); background:rgba(232,180,92,.07);
  font-size:clamp(7px,.64cqw,10px); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-bright);
}
.tut-keys .key.hot{border-color:rgba(255,217,138,.6); background:rgba(232,180,92,.16); animation:tutKeyPulse 1.2s ease-in-out infinite;}
@keyframes tutKeyPulse{50%{box-shadow:0 0 16px rgba(232,180,92,.35)}}
.tut-status{
  display:flex; align-items:center; gap:.55em; padding-top:.7em;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:clamp(8px,.7cqw,11px); font-weight:600; letter-spacing:.04em; color:rgba(246,237,217,.7);
}
.tut-pulse{
  width:.5em; height:.5em; border-radius:50%; background:var(--gold-bright);
  box-shadow:0 0 10px rgba(255,217,138,.8); animation:turnPulse 1.4s infinite; flex:0 0 auto;
}
.tut-status.success{color:var(--green);}
.tut-status.success .tut-pulse{background:var(--green); box-shadow:0 0 12px rgba(143,209,123,.8);}
.tut-status.warn{color:#ffc08a;}
.tut-status.warn .tut-pulse{background:#ffc08a; box-shadow:0 0 12px rgba(255,192,138,.8);}
.tut-actions{display:flex; gap:.55em; margin-top:.9em;}
.tut-actions .btn{flex:1; padding:.8em .6em; font-size:clamp(9px,.78cqw,12px);}
.tut-skip{
  position:absolute; right:2.6cqw; top:2.6cqw; pointer-events:auto;
  display:inline-flex; align-items:center; gap:.55em; padding:.55em .9em;
  border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background:rgba(8,6,13,.55); color:rgba(185,175,197,.66);
  font-size:clamp(8px,.7cqw,11px); font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  backdrop-filter:blur(6px); transition:color .2s, border-color .2s;
}
.tut-skip span{font-size:.85em; opacity:.5; border:1px solid rgba(255,255,255,.16); padding:.1em .35em; border-radius:4px;}
.tut-skip:hover{color:var(--cream); border-color:rgba(232,180,92,.4);}
.tut-skip.hidden{display:none !important;}
.tutorial-mode .hud-top,
.tutorial-mode .hud-center,
.tutorial-mode .turn-pill,
.tutorial-mode .hud-tools,
.tutorial-mode .hint{display:none !important;}
.tutorial-mode .power-hud{bottom:3.4cqw;}

/* how to */
.how-panel{width:min(70cqw, 940px); display:flex; flex-direction:column; overflow:hidden;}
.how-panel .panel-head,.how-panel .panel-actions{flex:0 0 auto;}
.how-body{
  flex:1 1 auto; min-height:0; overflow:auto; padding-right:.45em; margin-right:-.15em;
  scrollbar-width:thin; scrollbar-color:rgba(232,180,92,.35) transparent;
}
.how-body::-webkit-scrollbar{width:6px;}
.how-body::-webkit-scrollbar-thumb{background:rgba(232,180,92,.3); border-radius:99px;}
.how-grid{display:grid; grid-template-columns:1fr 1fr; gap:.9cqw; margin:1.4em 0;}
.how-card{
  position:relative; padding:1.2em 1.3em 1.1em; border-radius:4px;
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  border:1px solid rgba(255,255,255,.09); overflow:hidden;
}
.how-card.lethal{border-color:rgba(239,112,112,.28); background:linear-gradient(160deg, rgba(120,30,40,.16), rgba(255,255,255,.012));}
.how-num{
  position:absolute; top:.35em; right:.6em; font-family:var(--display); font-weight:700;
  font-size:2.4em; color:rgba(232,180,92,.13); line-height:1;
}
.how-card h3{font-family:var(--display); font-size:clamp(13px,1.25cqw,20px); margin:0 0 .4em; letter-spacing:.08em; color:var(--gold-bright);}
.how-card.lethal h3{color:#ff9c9c;}
.how-card p{margin:0; font-size:clamp(9px,.82cqw,13px); line-height:1.65; color:var(--muted);}
.how-card p b{color:var(--cream);}
.how-subhead{
  display:flex; align-items:center; gap:.9em; margin:1.1em 0 .55em;
  font-family:var(--display); font-size:clamp(9px,.8cqw,13px); letter-spacing:.24em;
  color:rgba(232,180,92,.85); text-transform:uppercase;
}
.how-subhead i{flex:1; height:1px; background:linear-gradient(90deg, rgba(232,180,92,.3), transparent);}
.how-controls{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:.5em .9em; padding:1em 1.1em;
  border:1px solid rgba(255,255,255,.07); background:rgba(0,0,0,.2); border-radius:4px;
  font-size:clamp(8px,.76cqw,12px); color:var(--muted);
}
.how-controls div{display:flex; align-items:center; gap:.4em; min-height:2.1em; flex-wrap:wrap;}
kbd{
  display:inline-flex; align-items:center; justify-content:center; min-width:1.8em; height:1.8em; padding:0 .45em;
  border-radius:3px; border:1px solid rgba(255,255,255,.16); border-bottom-color:rgba(0,0,0,.6);
  background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
  color:var(--cream); font-family:var(--ui); font-size:.92em; font-weight:600;
  box-shadow:0 2px 0 rgba(0,0,0,.5); white-space:nowrap;
}
kbd.wide{min-width:3em; padding:0 .55em; font-size:.82em; letter-spacing:.04em;}

/* shop */
.shop-panel{width:min(78cqw, 1060px); display:flex; flex-direction:column; overflow:hidden;}
.shop-panel .panel-head,.shop-panel .panel-sub,.shop-panel .panel-actions{flex:0 0 auto;}
.shop-body{
  flex:1 1 auto; min-height:0; overflow:auto; padding-right:.55em; margin-right:-.2em;
  scrollbar-width:thin; scrollbar-color:rgba(232,180,92,.35) transparent;
}
.shop-body::-webkit-scrollbar{width:6px;}
.shop-body::-webkit-scrollbar-thumb{background:rgba(232,180,92,.3); border-radius:99px;}
.shop-body::-webkit-scrollbar-track{background:rgba(255,255,255,.03); border-radius:99px;}
.shop-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:.9cqw; padding-bottom:.4em;}
.shop-card{
  position:relative; display:flex; flex-direction:column; gap:.55em; padding:1.3em 1.25em 1.2em;
  border-radius:4px; background:linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 62%);
  border:1px solid rgba(255,255,255,.1); overflow:hidden; transition:border-color .25s, transform .25s;
}
.shop-card:hover{border-color:rgba(232,180,92,.4); transform:translateY(-2px);}
.shop-card.maxed{border-color:rgba(232,180,92,.55); background:linear-gradient(165deg, rgba(232,180,92,.11), rgba(255,255,255,.012));}
.shop-ic{
  width:3.2em; height:3.2em; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:clamp(14px,1.35cqw,22px); background:radial-gradient(circle at 38% 32%, rgba(232,180,92,.3), rgba(232,180,92,.05));
  border:1px solid rgba(232,180,92,.35); color:var(--gold-bright); margin-bottom:.2em;
}
.shop-ic svg{width:52%; height:52%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));}
.shop-card .coin{width:1.1em; height:1.1em;}
.shop-card h3{font-family:var(--display); font-size:clamp(12px,1.12cqw,18px); letter-spacing:.05em; margin:0; color:var(--cream);}
.shop-card p{margin:0; color:var(--muted); font-size:clamp(8px,.76cqw,12px); line-height:1.55; min-height:3.4em;}
.shop-lvl{display:flex; gap:.35em; margin:.15em 0 .3em;}
.shop-lvl i{height:4px; flex:1; border-radius:99px; background:rgba(255,255,255,.1); transition:background .3s, box-shadow .3s;}
.shop-lvl i.on{background:linear-gradient(90deg,#c48a36,#ffe0a0); box-shadow:0 0 8px rgba(232,180,92,.45);}
.shop-buy{justify-content:center; padding:.7em 1em; margin-top:auto;}
.shop-buy .coin{width:1em; height:1em;}
.shop-buy:disabled{opacity:.4; cursor:not-allowed; transform:none;}
.shop-buy:disabled::before{display:none;}
.shop-buy.max{color:var(--gold-bright); border-color:rgba(232,180,92,.3); background:rgba(232,180,92,.08);}
.shop-buy.owned{color:var(--gold-bright); border-color:rgba(232,180,92,.42); background:rgba(232,180,92,.06);}
.shop-section{
  grid-column:1/-1; display:flex; align-items:center; gap:.9em;
  margin:.45em 0 -.05em; font-family:var(--display); font-size:clamp(11px,1.02cqw,16px);
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-bright);
}
.shop-section:first-child{margin-top:0;}
.shop-section i{flex:1; height:1px; background:linear-gradient(90deg, rgba(232,180,92,.38), transparent);}
.shop-ic.look{background:radial-gradient(circle at 36% 30%, var(--sw-a), var(--sw-b) 74%); border-color:var(--sw-c); color:var(--sw-c);}
.shop-ic.bow-skin{background:radial-gradient(circle at 36% 30%, rgba(255,255,255,.16), var(--sw-b) 74%); border-color:var(--sw-c); color:var(--sw-a);}
.shop-lvl.look i{box-shadow:none; border:1px solid rgba(0,0,0,.35);}
.shop-card.owned{border-color:rgba(232,180,92,.22);}

/* pause */
.pause-panel{width:min(42cqw, 560px); text-align:center;}
.pause-panel h2{font-size:clamp(28px,3.6cqw,58px); margin:.18em 0 .1em;}
.pause-panel .eyebrow{justify-content:center;}
.pause-score{
  display:flex; align-items:center; justify-content:center; gap:1.2em; margin:.6em 0 1.4em;
  font-size:clamp(9px,.82cqw,13px); letter-spacing:.14em; color:var(--muted); text-transform:uppercase; font-weight:600;
}
.pause-score b{font-family:var(--display); font-size:2.1em; color:var(--gold-bright); letter-spacing:.06em;}
.pause-score b i{font-style:normal;}
.quick-tools{display:flex; justify-content:center; gap:.55em; margin-top:1.4em;}

/* end */
.end-panel{width:min(50cqw, 660px); text-align:center;}
.end-panel .eyebrow{justify-content:center;}
.end-panel h2{font-size:clamp(34px,4.6cqw,74px); letter-spacing:.05em; margin:.15em 0 .1em;}
.end-panel h2.victory{
  background:linear-gradient(180deg,#fff4ce,#f0c56e 45%,#b97d26);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 26px rgba(232,180,92,.3));
}
.end-panel h2.defeat{color:#e99090; text-shadow:0 6px 30px rgba(180,30,30,.3);}
.end-score{display:flex; align-items:center; justify-content:center; gap:1.4em; margin:.6em 0 .3em;}
.end-side{display:flex; flex-direction:column; gap:.25em; font-size:clamp(8px,.78cqw,12px); letter-spacing:.16em; color:var(--muted); text-transform:uppercase;}
.end-side b{font-family:var(--display); font-size:clamp(30px,3.6cqw,56px); line-height:1; color:var(--cream);}
.end-side:first-child b{color:var(--blue);}
.end-side:last-child b{color:var(--red);}
.end-dash{font-family:var(--display); font-size:2em; color:rgba(255,255,255,.2);}
.end-sub{margin:.25em 0 1.3em; color:var(--muted); font-size:clamp(9px,.85cqw,13px); letter-spacing:.04em;}
.end-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.7em; margin:1.2em 0;
  border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); padding:1em 0;
}
.end-stats div{display:flex; flex-direction:column; gap:.35em;}
.end-stats span{font-size:clamp(7px,.63cqw,10px); letter-spacing:.2em; color:rgba(185,175,197,.6); font-weight:700; text-transform:uppercase;}
.end-stats b{font-family:var(--display); font-size:clamp(16px,1.75cqw,28px); color:var(--cream);}
.reward{
  display:inline-flex; align-items:center; gap:.5em; padding:.55em 1.1em; border-radius:999px;
  background:rgba(232,180,92,.1); border:1px solid rgba(232,180,92,.3); color:var(--gold-bright);
  font-size:clamp(10px,.9cqw,14px); font-weight:700; letter-spacing:.06em;
}

/* ---------------------------- announcer / toast ---------------------------- */
.announce{
  position:absolute; inset:0; z-index:14; display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0;
}
.announce.show{opacity:1;}
.announce-inner{
  display:flex; flex-direction:column; align-items:center; gap:.28em; text-align:center;
  transform:translateY(-2cqw);
}
.announce.show .announce-inner{animation:annIn .55s cubic-bezier(.16,.9,.28,1.2);}
.announce-title{
  font-family:var(--display); font-weight:800; letter-spacing:.12em; margin:0;
  font-size:clamp(30px, 5.4cqw, 86px); line-height:1; color:var(--cream);
  text-shadow:0 4px 26px rgba(0,0,0,.8), 0 0 60px rgba(232,180,92,.22);
}
.announce-kicker{
  font-size:clamp(8px,.75cqw,12px); font-weight:700; letter-spacing:.48em; color:var(--gold);
  text-transform:uppercase; text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.announce-sub{
  font-size:clamp(9px,.85cqw,14px); font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(246,237,217,.72); text-shadow:0 2px 8px rgba(0,0,0,.9); margin-top:.35em;
}
.announce.gold .announce-title{
  background:linear-gradient(180deg,#fff7dc 0%,#ffd98a 45%,#d29a41 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 28px rgba(232,180,92,.35));
}
.announce.red .announce-title{
  background:linear-gradient(180deg,#ffe6e0 0%,#ff9d8f 42%,#b83232 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 30px rgba(210,45,45,.4));
}
.announce.round .announce-title{font-size:clamp(36px, 6.6cqw, 104px); letter-spacing:.16em;}
@keyframes annIn{
  0%{opacity:0; transform:translateY(2.6cqw) scale(.86); filter:blur(6px);}
  55%{opacity:1; filter:blur(0);}
  100%{opacity:1; transform:translateY(-2cqw) scale(1);}
}
.announce.out .announce-inner{animation:annOut .4s ease-in forwards;}
@keyframes annOut{to{opacity:0; transform:translateY(-4.6cqw) scale(1.03); filter:blur(3px);}}

.toast{
  position:absolute; left:50%; top:15.5cqw; z-index:35; transform:translate(-50%,-10px);
  padding:.6em 1.15em; border-radius:999px; background:rgba(8,6,13,.92);
  border:1px solid rgba(232,180,92,.4); color:var(--gold-bright);
  font-size:clamp(9px,.8cqw,13px); font-weight:700; letter-spacing:.08em; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  box-shadow:0 12px 34px rgba(0,0,0,.55);
}
.toast.show{opacity:1; transform:translate(-50%,0);}

.rotate-hint{display:none;}

/* ---------------------------- responsive / short screens ---------------------------- */
@container (max-width: 900px){
  .menu-content{width:56cqw; left:5cqw;}
  .menu-foot{grid-template-columns:1fr auto; }
  .menu-foot .foot-tip{display:none;}
  .game-title{font-size:clamp(34px, 8cqw, 72px);}
  .mode-row{width:100%;}
  .how-panel{width:84cqw;}
  .shop-panel{width:92cqw;}
  .end-panel{width:64cqw;}
  .pause-panel{width:56cqw;}
  .announce-title{font-size:clamp(26px,5.6cqw,54px);}
  .welcome-panel{width:58cqw;}
  .tut-card{width:40cqw;}
  .how-controls{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@container (max-width: 620px){
  .menu-content{width:64cqw; left:5cqw;}
  .menu-top{top:3.4cqw;}
  .brand span{display:none;}
  .tagline{font-size:8px; margin-bottom:2.2cqw;}
  .difficulty-row{margin-top:1.8cqw;}
  .segmented button{padding:.4em .7em; font-size:7px; letter-spacing:.06em;}
  .btn .btn-txt small{display:none;}
  .menu-links{margin-top:1.8cqw; gap:.6em;}
  .menu-links .dot-sep{display:none;}
  .how-grid{grid-template-columns:1fr;}
  .shop-grid{grid-template-columns:1fr;}
  .shop-panel,.how-panel{width:90cqw;}
  .hud-top{top:1.4cqw; left:1.6cqw; right:1.6cqw;}
  .fighter{width:41cqw;}
  .portrait{width:8cqw; height:8cqw;}
  .turn-pill{top:11cqw;}
  .hint{display:none;}
  .welcome-panel{width:74cqw; padding:1.8cqw 2.5cqw;}
  .welcome-list{grid-template-columns:1fr;}
  .tut-card{width:48cqw; left:1.6cqw; top:1.6cqw;}
  .how-controls{grid-template-columns:1fr;}
}
@container (max-height: 430px){
  .game-title{margin-top:.2em; font-size:clamp(30px,7cqw,60px);}
  .tagline{margin-bottom:1.2cqw;}
  .menu-content{transform:translateY(-50%);}
  .menu-links{margin-top:1cqw;}
  .mode-row .btn{padding:.8em 1em;}
  .menu-foot{bottom:1.8cqw;}
  .how-grid{margin:.7em 0; gap:.55cqw;}
  .how-card{padding:.8em .9em .7em;}
  .how-card p{font-size:8px; line-height:1.5;}
  .how-num{font-size:1.8em;}
  .how-controls{padding:.65em .8em; gap:.4em 1em;}
  .panel{padding:1.8cqw 2.4cqw;}
  .panel-head{margin-bottom:.5em;}
  .panel-sub{margin:.2em 0 .8em;}
  .panel-actions{margin-top:1em;}
  .shop-grid{gap:.6cqw;}
  .shop-card{padding:.85em .9em .75em; gap:.3em;}
  .shop-card p{min-height:0; font-size:7.5px; line-height:1.45;}
  .shop-ic{width:2.5em; height:2.5em; font-size:12px; margin-bottom:0;}
  .shop-lvl{margin:.05em 0 .15em;}
  .shop-buy{padding:.5em .7em;}
  .end-stats{padding:.7em 0; margin:.8em 0;}
  .reward{padding:.4em .9em;}
  .welcome-panel{padding:1.4cqw 2.2cqw;}
  .welcome-crest{display:none;}
  .welcome-sub{margin:.3em auto .7em;}
  .welcome-list{gap:.35em;}
  .welcome-list li{padding:.45em .7em;}
  .welcome-credit{display:none;}
  .tut-card{padding:.85em 1em .8em;}
  .tut-body{margin-bottom:.6em; line-height:1.48;}
  .tut-dots{margin:.5em 0 .6em;}
  .tut-keys{margin-bottom:.6em;}
}
@media (orientation:portrait) and (max-width: 1024px){
  #stage{width:100vw; height:100vh;}
  .rotate-hint{
    display:flex; position:absolute; inset:0; z-index:80; flex-direction:column; gap:1.1em;
    align-items:center; justify-content:center; text-align:center; padding:2em;
    background:
      radial-gradient(circle at 50% 38%, #211a33, #06050a 72%),
      #06050a;
  }
  .rotate-icon{
    width:4.6em; height:4.6em; color:var(--gold);
    filter:drop-shadow(0 0 22px rgba(232,180,92,.4));
    animation:rotateNudge 2.2s ease-in-out infinite;
  }
  .rotate-hint p{font-size:1.18em; letter-spacing:.08em; color:var(--cream); max-width:18em; line-height:1.6; margin:0; font-weight:600;}
  .rotate-hint small{font-size:.78em; letter-spacing:.16em; text-transform:uppercase; color:rgba(185,175,197,.55);}
}
@keyframes rotateNudge{0%,60%,100%{transform:rotate(0)}80%{transform:rotate(90deg)}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}