:root{
  --ink:#132522; --deep:#0c2224; --panel:#16302f; --panel2:#1d3d3b; --line:rgba(255,217,134,.28);
  --moss:#5fa548; --mossL:#9fd36a; --amber:#ffb347; --amberL:#ffd986; --cream:#f4f0dc; --muted:#b8c8bc; --red:#ff7a5a; --cyan:#7fe8f0;
  --font:'Rubik',system-ui,-apple-system,'Segoe UI','PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif;
  --safeT:env(safe-area-inset-top,0px); --safeB:env(safe-area-inset-bottom,0px); --safeL:env(safe-area-inset-left,0px); --safeR:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0c2224;color:var(--cream);font-family:var(--font);
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
canvas#c{position:fixed;inset:0;display:block;width:100%;height:100%}
.hidden{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
kbd{display:inline-block;min-width:1.5em;padding:1px 6px;margin:0 2px;border-radius:6px;background:var(--amberL);color:#1a2a2a;font:700 .85em/1.4 var(--font);text-align:center;box-shadow:0 2px 0 #b8893a}

/* ---------- HUD */
#hud{position:fixed;inset:0;pointer-events:none;z-index:5}
#hudL{position:absolute;left:calc(10px + var(--safeL));top:calc(10px + var(--safeT));display:flex;gap:8px;align-items:flex-start}
#lvBadge{width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe7a8,#e8962f);border:3px solid var(--ink);display:grid;place-items:center;box-shadow:0 3px 0 rgba(0,0,0,.35)}
#lvN{font:800 19px/1 var(--font);color:#2a1a0a}
#bars{display:flex;flex-direction:column;gap:4px;padding-top:3px}
#hpbar{position:relative;width:clamp(120px,22vw,190px);height:17px;border-radius:9px;background:#2a1414;border:2.5px solid var(--ink);overflow:hidden}
#hpfill{position:absolute;inset:0;width:100%;background:linear-gradient(#ff8a6a,#e0523f);transition:width .15s}
#hpfill.low{animation:lowhp .6s infinite alternate}
@keyframes lowhp{to{filter:brightness(1.5)}}
#hptxt{position:absolute;inset:0;font:700 11px/13px var(--font);text-align:center;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.6)}
#xpbar{position:relative;width:clamp(120px,22vw,190px);height:7px;border-radius:4px;background:#14262a;border:2px solid var(--ink);overflow:hidden}
#mpbar{position:relative;width:clamp(120px,22vw,190px);height:10px;margin-top:1px;border-radius:6px;background:#1c1a30;border:2px solid var(--ink);overflow:hidden}
#mpfill{height:100%;width:100%;background:linear-gradient(90deg,#6a4fd8,#a78bfa 60%,#c8b4ff);box-shadow:0 0 8px rgba(167,139,250,.6);transition:width .12s}
#mptxt{position:absolute;inset:0;font:700 8px/10px var(--font);color:#f0e8ff;text-align:center;text-shadow:0 1px 0 var(--ink)}
.abslot.spell{border-color:#5a3f8c;background:rgba(40,30,70,.9)} .abslot.spell kbd{background:#c8b4ff;color:#2a1a4a}
#abBar .gap{width:6px;display:none} #abBar .spell{display:none} #abBar.magic .gap{display:block} #abBar.magic .spell{display:grid}
#xpfill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,var(--cyan),#c8fff8);transition:width .25s}
#goldRow{display:flex;align-items:center;gap:5px;font:700 14px/1 var(--font);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.coin{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff2a8,#ffcf4a 60%,#c8901a);border:2px solid var(--ink)}
#gemChip{display:inline-flex;align-items:center;gap:4px;margin-left:8px}
.gemico{width:11px;height:14px;background:#5ee8b0;clip-path:polygon(50% 0,100% 40%,50% 100%,0 40%);border:0}
#tracker{position:absolute;left:calc(10px + var(--safeL));top:calc(72px + var(--safeT));max-width:min(270px,58vw);padding:7px 10px;border-radius:10px;background:rgba(12,34,36,.72);border-left:3px solid var(--amber);font-size:12px;line-height:1.35}
body.magic #tracker{top:calc(90px + var(--safeT))}
#tracker b{display:block;color:var(--amberL);font-size:12px;margin-bottom:2px}
#tracker .g{color:var(--cream)} #tracker .g.done{color:var(--mossL)} #tracker .g.done::before{content:'✓ '}
#tracker.ready{border-left-color:var(--mossL);animation:pulse 1.2s infinite}
@keyframes pulse{50%{background:rgba(40,80,50,.8)}}
#hudR{position:absolute;right:calc(10px + var(--safeR));top:calc(10px + var(--safeT));display:flex;gap:8px;pointer-events:auto}
.hudbtn{position:relative;width:46px;height:46px;border-radius:14px;border:2.5px solid var(--ink);background:rgba(22,48,47,.9);display:grid;place-items:center;box-shadow:0 3px 0 rgba(0,0,0,.35);padding:0}
.hudbtn:active{transform:translateY(2px)}
.hudbtn img{width:30px;height:30px}
.hudbtn b{position:absolute;right:-4px;bottom:-4px;min-width:18px;height:18px;border-radius:9px;background:var(--amberL);color:#1a2a2a;font:800 11px/18px var(--font);border:2px solid var(--ink)}
.bookico{width:24px;height:20px;border-radius:3px 6px 6px 3px;background:linear-gradient(90deg,#7b3f2e 0 22%,#a85a3a 22%);border:2px solid var(--ink);position:relative}
.bookico::after{content:'';position:absolute;left:8px;top:5px;width:9px;height:3px;background:var(--amberL);border-radius:2px;box-shadow:0 5px 0 var(--amberL)}
#journalBtn.ping::before{content:'';position:absolute;right:-3px;top:-3px;width:12px;height:12px;border-radius:50%;background:var(--red);border:2px solid var(--ink)}
#abBar{position:absolute;left:50%;bottom:calc(12px + var(--safeB));transform:translateX(-50%);display:flex;gap:8px}
body.touch #abBar{display:none}
.abslot{position:relative;width:46px;height:46px;border-radius:12px;border:2.5px solid var(--ink);background:rgba(22,48,47,.88);display:grid;place-items:center;overflow:hidden}
.abslot img{width:32px;height:32px}
.abslot.locked img{opacity:.25;filter:grayscale(1)}
.abslot .cd{position:absolute;inset:0;background:conic-gradient(rgba(0,0,0,.65) var(--p,0%),transparent 0)}
.abslot kbd{position:absolute;left:2px;bottom:2px;font-size:9px;min-width:0;padding:0 3px;line-height:13px;box-shadow:none}
.abslot .lk{position:absolute;inset:auto 0 2px 0;text-align:center;font:700 9px var(--font);color:var(--amberL)}
#bossbar{position:absolute;left:50%;bottom:calc(72px + var(--safeB));transform:translateX(-50%);width:min(520px,80vw);text-align:center}
body.touch #bossbar{bottom:auto;top:calc(82px + var(--safeT))}
body.boss2 #bossname{color:#c8d8ff}
#bossname{font:800 15px var(--font);color:#ffb0c0;text-shadow:0 2px 0 rgba(0,0,0,.6);letter-spacing:.04em;margin-bottom:4px}
#bosshp{height:14px;border-radius:7px;border:2.5px solid var(--ink);background:#2a1418;overflow:hidden}
#bossfill{height:100%;width:100%;background:linear-gradient(#ff7aa0,#c0305a);transition:width .12s}
body.boss2 #bossfill{background:linear-gradient(#b8d0ff,#5a6ad8)}
#hint{position:absolute;left:50%;bottom:calc(70px + var(--safeB));transform:translateX(-50%);padding:8px 14px;border-radius:999px;background:rgba(12,34,36,.85);border:1.5px solid var(--line);font:500 14px/1.4 var(--font);white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis}
body.touch #hint{bottom:auto;top:calc(128px + var(--safeT));white-space:normal;text-align:center;border-radius:14px;max-width:80vw;font-size:13px}
body.boss #tracker,body.boss #hint{display:none}

/* ---------- touch controls */
#touch{position:fixed;inset:0;pointer-events:none;z-index:6}
#stickBase{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.22);opacity:0;transition:opacity .15s}
#stickBase.on{opacity:1}
#stickKnob{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(255,217,134,.55);border:2px solid rgba(19,37,34,.6)}
#tbtns{position:absolute;right:calc(14px + var(--safeR));bottom:calc(16px + var(--safeB));width:220px;height:200px;pointer-events:none}
.tb{position:absolute;pointer-events:auto;width:58px;height:58px;border-radius:50%;border:3px solid var(--ink);background:rgba(22,48,47,.78);box-shadow:0 3px 0 rgba(0,0,0,.35);padding:0;display:grid;place-items:center;touch-action:none}
.tb.down{transform:translateY(2px);background:rgba(255,217,134,.55)}
.tb::before{content:'';width:34px;height:34px;background-image:var(--ico);background-size:contain;background-repeat:no-repeat;background-position:center}
.tb.big::before{width:52px;height:52px}
.tb.big{width:82px;height:82px;right:0;bottom:0}
#tAtk{right:4px;bottom:6px}
#tJump{right:100px;bottom:0}
#tRoll{right:16px;bottom:100px}
#tInt{right:96px;bottom:74px;width:54px;height:54px;background:rgba(255,179,71,.8);display:none}
#tInt.show{display:grid}
#tInt span{font:800 11px var(--font);color:#1a2a2a;text-align:center;line-height:1;padding:2px}
#tInt::before{display:none}
.tb.ab{width:46px;height:46px;overflow:hidden}
#tA1{right:162px;bottom:96px} #tA2{right:110px;bottom:140px} #tA3{right:60px;bottom:158px}
.tb.sp{width:42px;height:42px;overflow:hidden;border-color:#5a3f8c;background:rgba(50,34,92,.82);display:none}
body.magic .tb.sp{display:grid}
#tS1{right:176px;bottom:150px} #tS2{right:150px;bottom:196px} #tS3{right:104px;bottom:206px}
.tb.sp i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(0,0,0,.65) var(--p,0%),transparent 0)}
.tb.sp.locked{opacity:.35} .tb.sp.dry{filter:saturate(.3)}
.tb.ab i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(0,0,0,.65) var(--p,0%),transparent 0)}
.tb.ab.locked{opacity:.35}
@media (orientation:portrait) and (max-width:359px){ #tbtns{transform:scale(.9);transform-origin:100% 100%} }

/* ---------- banner, toasts */
#banner{position:fixed;left:50%;top:calc(18% + var(--safeT));transform:translateX(-50%);z-index:7;text-align:center;pointer-events:none;animation:banIn .35s ease-out;width:min(92vw,620px)}
#bannerT{font:800 clamp(24px,4.4vw,38px)/1.1 var(--font);color:var(--amberL);text-shadow:0 3px 0 var(--ink),0 0 24px rgba(255,180,80,.5);letter-spacing:.01em}
#bannerS{margin-top:6px;font:500 clamp(13px,1.8vw,16px)/1.35 var(--font);color:var(--cream);text-shadow:0 2px 0 var(--ink)}
#banner.skill #bannerT{color:#bdf0ff} #banner.gem #bannerT{color:#a6ffd8} #banner.region #bannerT{color:var(--cream);font-weight:700;letter-spacing:.06em} #banner.secret #bannerT{color:#c8ffb0}
#banner.out{animation:banOut .4s forwards}
@keyframes banIn{from{opacity:0;transform:translate(-50%,-14px) scale(.92)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes banOut{to{opacity:0;transform:translate(-50%,-10px)}}
#toasts{position:fixed;right:calc(10px + var(--safeR));top:calc(66px + var(--safeT));z-index:7;display:flex;flex-direction:column;gap:5px;align-items:flex-end;pointer-events:none}
.toast{display:flex;align-items:center;gap:7px;padding:4px 10px 4px 5px;border-radius:999px;background:rgba(12,34,36,.86);border:1.5px solid var(--line);font:600 13px var(--font);animation:toastIn .25s ease-out}
.toast img{width:24px;height:24px}
.toast.out{animation:toastOut .3s forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}}
@keyframes toastOut{to{opacity:0;transform:translateX(20px)}}
#deathMsg{position:fixed;inset:0;z-index:8;display:grid;place-content:center;text-align:center;pointer-events:none}
#deathT{font:800 clamp(22px,4vw,34px) var(--font);color:var(--cream);text-shadow:0 3px 0 var(--ink)}
#deathS{margin-top:8px;font:700 18px var(--font);color:#ffcf4a;text-shadow:0 2px 0 var(--ink)}
#deathMsg .fell{background:linear-gradient(rgba(12,32,34,0),rgba(12,32,34,.88) 18%,rgba(12,32,34,.88) 82%,rgba(12,32,34,0));padding:18px 48px;min-width:min(560px,92vw);animation:fellIn .35s ease-out both}
#deathMsg #deathS{color:#f4f0dc;font-size:17px} #deathK{margin-top:14px;font:800 15px var(--font);color:var(--amberL);opacity:0;transition:opacity .25s;text-shadow:0 2px 0 var(--ink)}
#deathMsg.ready{pointer-events:auto;cursor:pointer} #deathMsg.ready #deathK{opacity:1;animation:fellK 1.2s ease-in-out infinite}
@keyframes fellIn{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}} @keyframes fellK{50%{opacity:.55}}

/* ---------- screens */
#screens{position:fixed;inset:0;z-index:10;pointer-events:none}
.screen{position:absolute;inset:0;pointer-events:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(12px + var(--safeT)) calc(12px + var(--safeR)) calc(12px + var(--safeB)) calc(12px + var(--safeL))}
.screen.dim{background:rgba(6,20,22,.62);backdrop-filter:blur(2px)}
.panel{position:relative;background:
    radial-gradient(ellipse 80% 50% at 50% -10%,rgba(95,165,72,.22),transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 110%,rgba(167,139,250,.14),transparent 60%),
    repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 2px,transparent 2px 7px),
    linear-gradient(var(--panel2),var(--panel));
  border:3px solid var(--ink);border-radius:22px;
  box-shadow:0 0 0 2px var(--line) inset,0 0 0 6px rgba(95,165,72,.16) inset,0 2px 0 rgba(255,255,255,.06) inset,0 18px 40px rgba(0,0,0,.5),0 0 0 2px rgba(95,165,72,.35);
  padding:18px 20px;width:min(560px,100%);max-height:100%;display:flex;flex-direction:column;gap:8px}
.panel::before,.panel::after{content:'';position:absolute;width:38px;height:38px;pointer-events:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><path d='M4 36 C 6 18, 18 6, 36 4' fill='none' stroke='%2310231f' stroke-width='6' stroke-linecap='round'/><path d='M4 36 C 6 18, 18 6, 36 4' fill='none' stroke='%234f9a42' stroke-width='3' stroke-linecap='round'/><path d='M12 26 c -2 -8 4 -12 10 -10 c -1 7 -5 10 -10 10 z' fill='%238fcf5a' stroke='%2310231f' stroke-width='1.6'/><path d='M22 14 c 0 -7 5 -9 10 -8 c 0 6 -4 9 -10 8 z' fill='%234f9a42' stroke='%2310231f' stroke-width='1.6'/></svg>") no-repeat center/contain;opacity:.9}
.panel::before{left:-6px;top:-6px}
.panel::after{right:-6px;bottom:-6px;transform:rotate(180deg)}
.panel.wide{width:min(760px,100%);height:min(560px,100%)}
.panel.small{width:min(420px,100%)}
.panel h2{margin:0;font:800 22px/1.15 var(--font);color:var(--amberL);text-align:center;text-shadow:0 2px 0 var(--ink),0 0 18px rgba(255,180,80,.25);letter-spacing:.01em}
.panel h2::after{content:'';display:block;width:72px;height:3px;margin:7px auto 0;border-radius:2px;background:linear-gradient(90deg,transparent,var(--moss) 30%,var(--mossL) 50%,var(--moss) 70%,transparent)}
.panel .sub{margin:0;text-align:center;color:var(--muted);font-size:13px}
.list,.tabbody{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-right:2px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row.center{justify-content:center}
.foot{padding-top:4px}
.btn{min-height:42px;padding:0 18px;border-radius:13px;border:2.5px solid var(--ink);background:#2c524e;color:var(--cream);font:700 15px var(--font);box-shadow:0 3px 0 rgba(0,0,0,.4)}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.4)}
.btn.primary{background:linear-gradient(#ffd986,#ffb347);color:#2a1a0a}
.btn.big{min-height:52px;font-size:18px;padding:0 28px}
.btn.small{min-height:34px;font-size:13px;padding:0 12px;border-radius:10px}
.btn:disabled{opacity:.45;filter:grayscale(.6);cursor:default}
.tabs{display:flex;gap:4px;overflow-x:auto;flex:none;scrollbar-width:none}
.tabs button{flex:1;min-width:max-content;padding:8px 12px;border:2px solid var(--ink);border-radius:10px;background:#1a3634;color:var(--muted);font:700 14px var(--font);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.tabs button.on{box-shadow:0 2px 0 #b8893a}
.tabs button.on{background:var(--amberL);color:#2a1a0a}

/* title */
#title{background:radial-gradient(ellipse 60% 55% at 50% 42%,rgba(8,24,26,.62) 0,rgba(8,24,26,.38) 55%,rgba(6,20,22,0) 100%),linear-gradient(rgba(6,20,22,.25),rgba(6,20,22,0) 30%,rgba(6,20,22,0) 70%,rgba(6,20,22,.45))}
.titlewrap{text-align:center;margin-bottom:clamp(8px,3vh,22px)}
@media (max-height:520px){#emblem{width:84px;height:84px;margin-bottom:-8px}.titlewrap{margin-bottom:6px}#tagline{margin-top:4px}.menucol{gap:6px}.menucol .btn{min-height:38px}.menucol .btn.big{min-height:44px}}
#emblem{display:block;margin:0 auto -14px;width:clamp(96px,22vh,170px);height:clamp(96px,22vh,170px);filter:drop-shadow(0 6px 0 rgba(0,0,0,.35))}
#logo{margin:0;display:flex;flex-direction:column;align-items:center;line-height:.84;font-weight:800;letter-spacing:.01em}
#logo .w1{font-size:clamp(40px,min(9vw,11vh),92px);color:#ffd986}
#logo .w2{font-size:clamp(54px,min(13vw,15vh),132px);color:#a8e070}
#logo .ch{display:inline-block;animation:drop .75s cubic-bezier(.2,1.5,.4,1) both,bob 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * 55ms),calc(.9s + var(--i) * 110ms);
  text-shadow:0 3px 0 #132522,0 -3px 0 #132522,3px 0 0 #132522,-3px 0 0 #132522,2px 2px 0 #132522,-2px 2px 0 #132522,2px -2px 0 #132522,-2px -2px 0 #132522,0 8px 0 #132522,0 12px 18px rgba(0,0,0,.45),0 0 34px rgba(170,255,120,.25)}
#logo .w1 .ch{text-shadow:0 3px 0 #132522,0 -3px 0 #132522,3px 0 0 #132522,-3px 0 0 #132522,2px 2px 0 #132522,-2px 2px 0 #132522,2px -2px 0 #132522,-2px -2px 0 #132522,0 7px 0 #8a4a1a,0 12px 18px rgba(0,0,0,.45),0 0 34px rgba(255,200,110,.3)}
@keyframes drop{from{opacity:0;transform:translateY(-60px) scale(1.3)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px) rotate(-1.5deg)}}
.menucol .btn.primary{animation:glowb 2.4s ease-in-out infinite}
@keyframes glowb{50%{box-shadow:0 3px 0 rgba(0,0,0,.4),0 0 22px rgba(255,200,110,.55)}}
#vicLoot{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:4px 0}
#vicLoot .chipbtn{animation:drop .5s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--i) * 140ms)}
#tagline{margin:10px 0 0;font:500 clamp(14px,2vw,18px) var(--font);color:var(--cream);text-shadow:0 2px 0 var(--ink)}
.menucol{display:flex;flex-direction:column;gap:10px;align-items:stretch;width:min(300px,86vw)}
#contInfo{text-align:center;color:var(--cream);font:600 12px var(--font);margin-top:-4px;text-shadow:0 1px 0 var(--ink),0 0 8px rgba(6,20,22,.9)}
#credit{position:absolute;bottom:calc(10px + var(--safeB));margin:0;font:600 12px var(--font);color:rgba(244,240,220,.6)}

/* journal */
.jgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:620px){.jgrid{grid-template-columns:1fr}}
.card{background:linear-gradient(rgba(10,30,30,.62),rgba(10,30,30,.48));border:2px solid rgba(0,0,0,.35);border-radius:14px;padding:10px 12px;box-shadow:0 1px 0 rgba(255,255,255,.05) inset}
.card h3{margin:0 0 6px;font:800 14px var(--font);color:var(--amberL);letter-spacing:.03em;text-transform:uppercase}
.card.story p{margin:0 0 8px;font-size:14px;line-height:1.55;color:#efe6cc} .card.story p.note{text-align:left;font-size:13px;color:var(--amberL);margin-top:4px}
.stat{display:flex;justify-content:space-between;font-size:14px;padding:2px 0;border-bottom:1px dashed rgba(255,255,255,.08)}
.stat b{color:var(--cream)}
.slotrow{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 8px}
.chipbtn{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:12px;border:2px solid var(--ink);background:#1a3634;font:600 13px var(--font);color:var(--cream)}
.chipbtn img{width:28px;height:28px}
.chipbtn.on{background:#3d6a3a;box-shadow:0 0 0 2px var(--mossL) inset}
.chipbtn.dis{opacity:.4}
.slotlab{font:700 12px var(--font);color:var(--muted);margin-top:4px}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.item{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border-radius:10px;background:rgba(10,30,30,.55);font-size:13px}
.item img{width:30px;height:30px;flex:none}
.item b{margin-left:auto;color:var(--amberL)}
.skill{margin-bottom:10px}
.skill .top{display:flex;align-items:baseline;justify-content:space-between}
.skill .nm{font:800 16px var(--font)}
.skill .lv{font:700 14px var(--font);color:var(--cyan)}
.pbar{height:9px;border-radius:5px;background:#14262a;border:2px solid var(--ink);overflow:hidden;margin:4px 0}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),#c8fff8)}
.unl{font-size:12px;color:var(--muted);line-height:1.5}
.unl .u{display:flex;gap:6px}
.unl .u.got{color:var(--mossL)}
.unl .u.next{color:var(--amberL)}
.unl .u span:first-child{min-width:2.4em;font-weight:700}
.quest{margin-bottom:8px}
.quest .nm{font:800 15px var(--font);color:var(--amberL)}
.quest p{margin:3px 0;font-size:13px;color:var(--cream)}
.quest .g{font-size:13px;color:var(--muted)} .quest .g.done{color:var(--mossL)}
.quest.done .nm{color:var(--mossL)}
#mapCv{width:100%;border-radius:12px;border:2px solid var(--ink);background:#0c2224;display:block;box-shadow:0 0 0 2px rgba(95,165,72,.25),0 6px 14px rgba(0,0,0,.35)}
.legend{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--muted);margin-top:6px}
.legend span::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;background:var(--c)}

/* bench / shop rows */
.rrow{display:flex;align-items:center;gap:10px;padding:8px;border-radius:12px;background:linear-gradient(rgba(10,30,30,.62),rgba(10,30,30,.48));border:2px solid rgba(0,0,0,.3);box-shadow:0 1px 0 rgba(255,255,255,.05) inset;margin-bottom:6px}
.rrow > img{filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.rrow > img{width:40px;height:40px;flex:none}
.rrow .mid{flex:1;min-width:0}
.rrow .nm{font:700 14px var(--font)}
.rrow .ds{font-size:12px;color:var(--muted)}
.need{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.need span{display:inline-flex;align-items:center;gap:2px;font:600 12px var(--font);padding:1px 6px 1px 2px;border-radius:8px;background:rgba(0,0,0,.25)}
.need span img{width:18px;height:18px}
.need span.ok{color:var(--mossL)} .need span.no{color:#ff9a8a}
.rrow.locked{opacity:.5}
.rrow .price{display:inline-flex;align-items:center;gap:4px;font:700 14px var(--font);color:#ffcf4a}

/* dialog */
#dialog{justify-content:flex-end;background:linear-gradient(transparent 50%,rgba(6,20,22,.55))}
#dlgBox{display:flex;align-items:center;gap:12px;width:min(720px,100%);padding:12px 14px;border-radius:18px;background:rgba(248,242,222,.97);border:3px solid var(--ink);color:#20302c;box-shadow:0 12px 30px rgba(0,0,0,.45);margin-bottom:8px}
#dlgFace{width:72px;height:72px;flex:none;border-radius:14px;background:#cfe0c0;border:2px solid var(--ink)}
#dlgMain{flex:1;min-width:0}
#dlgName{font:800 14px var(--font);color:#7b3f2e}
#dlgText{margin:3px 0 0;font:500 15px/1.4 var(--font)}
#dlgNext{align-self:flex-end}

/* settings, victory */
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;font-size:15px}
.setrow input[type=range]{width:50%;accent-color:var(--amber)}
.setrow input[type=checkbox]{width:22px;height:22px;accent-color:var(--amber)}
.setrow select{font:600 14px var(--font);padding:4px 8px;border-radius:8px;border:2px solid var(--ink);background:#1a3634;color:var(--cream)}
.note{font-size:12px;color:var(--muted);margin:2px 0;text-align:center;line-height:1.5}
#vicStats{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin:6px 0}
#vicStats .stat{font-size:14px}

/* ---------- upgrades and enchants */
.ench{font-style:normal;font-weight:700;font-size:11px;padding:1px 6px;border-radius:8px;margin-left:4px;vertical-align:middle}
.ench.fire{background:#ff9a3a;color:#3a1a0a} .ench.frost{background:#bfe8ff;color:#0a2a4a} .ench.spark{background:#c8a8ff;color:#2a0a4a}
.benchH3{margin:12px 0 4px;font:800 14px var(--font);color:var(--amberL);letter-spacing:.04em;text-transform:uppercase}
.rrow.sub{padding-top:2px;padding-bottom:6px;opacity:.95;flex-wrap:wrap;gap:6px}
.rrow.sub .btn img{width:20px;height:20px;vertical-align:middle;margin-right:4px}
.need .coin{display:inline-block;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe7a8,#e8962f);border:1.5px solid var(--ink);vertical-align:middle;margin-right:3px}
#dlgChoices{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}#dlgChoices.hidden{display:none}#dlgChoices .btn{min-height:44px}

/* ---- update 1: readable on a phone (reviews: mobile-ux, kid-phone, spanish-mobile, junior-qa) ---- */
.hidden.abslot,.abslot.hidden{display:none!important}
.tb.gone{display:none!important}
#hptxt{font-size:13px;line-height:15px} #hpbar{height:19px}
#mptxt{font-size:10px;line-height:12px} #mpbar{height:13px}
#tracker{font-size:14px} #tracker b{font-size:14px}
#hint{font-size:15px} body.touch #hint{font-size:15px}
#hint.in{animation:hintIn .3s ease-out}
@keyframes hintIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.legend{font-size:13px}
.hudbtn{width:52px;height:52px} #hudR{gap:10px}
.abslot{width:56px;height:56px;place-items:start center;padding-top:5px}
.abslot img{width:28px;height:28px}
.abslot .nm{position:absolute;left:0;right:0;bottom:3px;text-align:center;font:700 10px/1 var(--font);color:var(--cream);text-shadow:0 1px 0 var(--ink);white-space:nowrap;overflow:hidden}
.abslot kbd{left:auto;right:2px;top:2px;bottom:auto;font-size:10px}
body.touch kbd{display:none!important}
body.touch .btn{min-height:48px} body.touch .btn.small{min-height:44px} body.touch .setrow{min-height:48px}
/* the touch cluster: Attack 82, Jump 68, Roll 56, abilities 56, spells 52, at least 10 px apart */
#tbtns{width:300px;height:280px}
#tJump{width:68px;height:68px;right:104px;bottom:4px}
#tRoll{width:56px;height:56px;right:16px;bottom:100px}
#tInt{right:100px;bottom:84px}
.tb.ab{width:56px;height:56px}
#tA1{right:176px;bottom:100px} #tA2{right:122px;bottom:150px} #tA3{right:58px;bottom:180px} #tA4{right:242px;bottom:68px}
.tb.sp{width:52px;height:52px}
#tS1{right:232px;bottom:152px} #tS2{right:184px;bottom:200px} #tS3{right:124px;bottom:222px}
.tb.lab::before{margin-top:-10px;width:28px;height:28px}
#tJump.lab::before{width:36px;height:36px;margin-top:-12px}
.tb b{position:absolute;left:0;right:0;bottom:7px;text-align:center;font:800 10px/1 var(--font);color:var(--cream);text-shadow:0 1px 0 var(--ink);pointer-events:none;white-space:nowrap;overflow:hidden}
.tb.down{transform:translateY(2px) scale(.94)}
.tb i{z-index:0} .tb b{z-index:1}
/* left-thumb move strip: lights the side you walk toward */
#moveStrip{position:absolute;left:calc(18px + var(--safeL));bottom:calc(24px + var(--safeB));display:flex;gap:46px;pointer-events:none;opacity:.55}
#moveStrip button{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;padding:0;appearance:none;-webkit-appearance:none}
#moveStrip .mh{position:absolute;left:0;right:0;top:100%;margin-top:6px;width:auto;height:auto;border:0;background:none;box-shadow:none;border-radius:0;font:600 11px/1.2 var(--font);color:rgba(255,243,200,.85);text-shadow:0 1px 2px rgba(0,0,0,.6);white-space:nowrap;text-align:center;animation:mhFade .6s 9s forwards;pointer-events:none}
@keyframes mhFade{to{opacity:0;visibility:hidden}}
#moveStrip button{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:800 18px/1 var(--font);color:var(--cream);background:rgba(12,34,36,.5);border:2px solid rgba(255,255,255,.25);transition:background .1s,transform .1s}
#moveStrip.l .ml,#moveStrip.r .mr{background:rgba(255,217,134,.75);color:#1a2a2a;transform:scale(1.12)}
#moveStrip.l,#moveStrip.r{opacity:.95}
/* toasts in the open, under the HUD, not against the Bag and Journal buttons */
body.touch #toasts{right:auto;left:50%;transform:translateX(-50%);top:calc(120px + var(--safeT));align-items:center}
@media (max-height:420px){
  #tbtns{transform:scale(.8);transform-origin:100% 100%}
  #tracker{top:calc(64px + var(--safeT))}
  body.touch #toasts{top:calc(58px + var(--safeT))}
  body.touch #hint{top:calc(58px + var(--safeT))}
}

/* boss fights: banners small and high, out of the fight */
/* a fade at the bottom of a scrolling journal page says there is more below */
.tabbody{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),transparent);padding-bottom:26px}

/* update 1: world tier chip, the next-unlock line, threads, gear */
#tierChip{display:inline-block;margin-left:8px;padding:0 7px;border-radius:8px;background:#4a3a8a;border:2px solid var(--ink);font:800 11px/16px var(--font);color:#f0e8ff}
#tierChip.hidden,#nextUp.hidden{display:none}
#nextUp{position:relative;margin-top:3px;width:clamp(120px,22vw,190px);height:15px;border-radius:8px;background:rgba(12,34,36,.75);border:1.5px solid rgba(255,255,255,.15);overflow:hidden}
#nextUp i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#4f9a42,#9fe38a);opacity:.55;width:var(--p,0%);transition:width .3s}
#nextUp span{position:absolute;inset:0;font:700 10px/13px var(--font);color:var(--cream);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;text-shadow:0 1px 0 var(--ink)}
#tracker{top:calc(92px + var(--safeT))} body.magic #tracker{top:calc(108px + var(--safeT))}
@media (max-height:420px){#tracker{top:calc(84px + var(--safeT))} body.magic #tracker{top:calc(100px + var(--safeT))}}
.thread .steps{display:flex;gap:4px;margin:6px 0}.thread .steps i{flex:1;height:6px;border-radius:3px;background:#14262a;border:1px solid rgba(255,255,255,.12)}.thread .steps i.on{background:var(--mossL)}.thread .steps i.cur{background:var(--amberL)}
.gearrow{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:10px;background:rgba(0,0,0,.18);margin-bottom:5px;border-left:4px solid var(--rc,#d8dccb)}
.gearrow img{width:30px;height:30px}.gearrow .gn{font:700 13px var(--font);color:var(--rc)}.gearrow .gs{font:500 12px var(--font);color:var(--muted)}.gearrow .btn{margin-left:auto}
.ascbox{margin-top:8px;padding:10px;border-radius:12px;background:linear-gradient(135deg,rgba(90,60,160,.5),rgba(30,40,70,.6));border:2px solid #8a6ad8}
body.boss #nextUp{display:none}

/* ---- fix pass: banners are small and live in the top band, between the HUD corners, out of the play area.
   About 60% of their old size; ui.js holds them 0.8 s and fades them in 0.35 s. */
#banner{top:calc(8px + var(--safeT));width:auto;max-width:min(46vw,430px);padding:5px 14px 6px;border-radius:12px;
  background:linear-gradient(rgba(10,28,30,.86),rgba(10,28,30,.72));border:1.5px solid var(--line);box-shadow:0 4px 12px rgba(0,0,0,.35);animation:banIn .2s ease-out}
#bannerT{font:800 clamp(15px,2.6vw,22px)/1.15 var(--font);text-shadow:0 2px 0 var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bannerS{margin-top:2px;font:500 clamp(11px,1.3vw,12.5px)/1.3 var(--font);color:var(--muted);text-shadow:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bannerS:empty{display:none}
#banner.out{animation:banOut .35s forwards}
@keyframes banIn{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes banOut{to{opacity:0;transform:translate(-50%,-6px)}}
#banner.region #bannerT{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(13px,2vw,17px)}
#banner.card #bannerT{color:var(--amberL)} #banner.card.legend #bannerT{color:#ffcf4a} #banner.card.asc #bannerT{color:#c8a8ff} #banner.card.thread #bannerT{color:#a8e070}
#banner.card{border-color:rgba(255,217,134,.55)} #banner.card.asc{border-color:rgba(200,168,255,.6)}
#banner.rage #bannerT{color:#ff7aa0} #banner.rage.two #bannerT{color:#9ab8ff} #banner.rage{border-color:rgba(255,122,160,.55)} #banner.rage.two{border-color:rgba(154,184,255,.6)}
/* on a phone the top corners are full, so the banner sits just under the HUD stack (ui.js sets --hudB), still clear of the fight */
body.touch #banner{top:calc(var(--hudB,64px) + 6px);max-width:min(92vw,430px)}
body.touch #bannerS{white-space:normal}

/* ---- fix pass: a compact HUD stack. Level, health, mana and gold tight together; the quest tracker is one line with a thin
   progress bar, laid out under the bars (no fixed offsets), so nothing overlaps whatever is shown. */
#hudL{flex-direction:column;gap:5px;align-items:flex-start;max-width:min(300px,66vw)}
#hudTop{display:flex;gap:7px;align-items:flex-start}
#lvBadge{width:36px;height:36px;border-width:2.5px}
#lvN{font-size:16px}
#bars{gap:2px;padding-top:1px}
#hpbar{height:16px;border-width:2px}
#hptxt{font-size:11.5px;line-height:12px}
#xpbar{height:5px;border-width:1.5px;margin-top:-1px}
#mpbar{height:11px;border-width:2px;margin-top:0}
#mptxt{font-size:9px;line-height:8px}
#goldRow{font-size:13px;gap:4px;margin-top:1px}
.coin{width:12px;height:12px}
#nextUp{height:13px;margin-top:1px}
#nextUp span{font-size:9.5px;line-height:11px}
#tracker,body.magic #tracker{position:static;top:auto;left:auto;max-width:100%;min-width:180px;padding:4px 9px 5px;border-radius:9px;font-size:13px;line-height:1.3;border-left-width:3px}
#trLine{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tracker #trTitle{display:inline;font-size:12px;margin:0;color:var(--amberL)}
#trTitle::after{content:' · ';color:var(--muted);font-weight:400}
#trGoal{color:var(--cream);font-weight:600} #trGoal.done{color:var(--mossL)} #trGoal.done::before{content:'✓ '}
#trBar{height:3px;margin-top:3px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
#trBar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--amber),var(--amberL));transition:width .3s}
#tracker.ready #trBar i{background:var(--mossL)}
#trGoals{display:none}
/* the hint sits under the HUD stack on a phone, never over the quest line */
body.touch #hint{top:calc(var(--hudB,120px) + 6px);max-width:min(86vw,360px);font-size:14px;padding:6px 12px}
body.touch #bossbar{top:calc(var(--hudB,80px) + 4px)}
@media (max-height:420px){ body.touch #hint{top:calc(var(--hudB,58px) + 4px)} }

/* ---- fix pass: the ability bar keeps its slots. Learned: lit. One step from learning: dim with a lock. The heal slot stays
   once it has appeared and shows its count (0 when empty). */
.abslot.locked{opacity:.5;filter:saturate(.3)}
.abslot.locked .cd{display:none}
.abslot.locked::after{content:'';position:absolute;right:4px;top:4px;width:9px;height:7px;border-radius:2px;background:var(--muted);box-shadow:0 -4px 0 -1px transparent;border:1.5px solid var(--ink)}
.abslot.locked::before{content:'';position:absolute;right:5.5px;top:-0.5px;width:5px;height:6px;border:1.6px solid var(--muted);border-bottom:0;border-radius:4px 4px 0 0}
.abslot.locked kbd{display:none}
.abslot.heal .cnt{position:absolute;left:3px;top:3px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:var(--amberL);color:#1a2a2a;font:800 10px/16px var(--font);text-align:center;border:1.5px solid var(--ink)}
.abslot.heal.empty{opacity:.5} .abslot.heal.empty img{filter:grayscale(1)} .abslot.heal.empty .cnt{background:#5a6a66;color:var(--cream)}

/* ---- fix pass: journal pages that scroll show it: a slim amber scrollbar and a bouncing chevron at the bottom */
.panel.wide{position:relative}
.tabbody.scrolls{scrollbar-width:thin;scrollbar-color:rgba(255,217,134,.65) rgba(0,0,0,.2)}
.tabbody::-webkit-scrollbar{width:7px} .tabbody::-webkit-scrollbar-thumb{background:rgba(255,217,134,.6);border-radius:4px} .tabbody::-webkit-scrollbar-track{background:rgba(0,0,0,.2);border-radius:4px}
#jMore{position:absolute;left:50%;bottom:66px;transform:translateX(-50%);width:44px;height:30px;border-radius:15px;border:2px solid var(--ink);background:var(--amberL);box-shadow:0 3px 0 rgba(0,0,0,.35),0 0 14px rgba(255,200,110,.45);display:grid;place-items:center;padding:0;z-index:2;animation:moreBob 1.1s ease-in-out infinite}
#jMore span{width:10px;height:10px;border-right:3px solid #2a1a0a;border-bottom:3px solid #2a1a0a;transform:translateY(-3px) rotate(45deg)}
@keyframes moreBob{50%{transform:translate(-50%,4px)}}
body.touch #jMore{bottom:74px;width:52px;height:34px}

/* ---- fix pass: phone controls. The big button always says what it does; the move strip is visible at rest and lights hard when pressed */
#tAtk.lab::before{width:44px;height:44px;margin-top:-14px}
#tAtk b{bottom:9px;font-size:11.5px}
#moveStrip{opacity:1;gap:40px}
#moveStrip button{width:56px;height:56px;font-size:20px;background:rgba(22,48,47,.78);border:2.5px solid rgba(255,217,134,.55);box-shadow:0 3px 0 rgba(0,0,0,.35);color:var(--amberL)}
#moveStrip.l .ml,#moveStrip.r .mr,#moveStrip .ml.down,#moveStrip .mr.down{background:var(--amberL);color:#1a2a2a;border-color:#fff3c8;transform:translateY(2px) scale(1.12);box-shadow:0 0 0 4px rgba(255,217,134,.35),0 0 18px rgba(255,217,134,.7)}
#moveStrip.l,#moveStrip.r{opacity:1}
body.touch.boss #banner{top:calc(var(--hudB,80px) + 62px)} /* (submit polish: clear of the boss bar) */
body.touch #toasts{top:calc(var(--hudB,120px) + 48px)}
/* narrow screens: the goal (with its count) wins the one line; the quest title stays in the journal and the tooltip */
@media (max-width:480px){ #tracker #trTitle{display:none} }

/* ==== art pass 3: the interface in the world's style. Carved wood with moss caps and ink edges, lantern-amber health, violet
   magic, green growth, parchment for pages and titles, buttons with a cel highlight band. Visual only: every rule below restyles an
   existing element; nothing moves or changes size where the layout depends on it. */
:root{
  --inkB:#1a0f07; --parchInk:#3a2414;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='40'><g fill='none' stroke='%23000' stroke-opacity='.17' stroke-width='1'><path d='M0 6 C30 3 60 9 120 5'/><path d='M0 15 C40 18 70 12 120 16'/><path d='M0 25 C25 22 80 29 120 24'/><path d='M0 34 C50 37 90 31 120 35'/></g><ellipse cx='84' cy='20' rx='6' ry='2.4' fill='none' stroke='%23000' stroke-opacity='.25'/><path d='M0 11 C40 9 80 13 120 10' fill='none' stroke='%23fff' stroke-opacity='.06'/></svg>");
  --mosscap:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'><path d='M0 0H100V5C95 9 90 6 85 8C80 11 74 6 68 8C62 10 57 6 50 8C44 11 38 6 32 8C26 10 20 6 14 8C9 10 4 6 0 8Z' fill='%234f9a42' stroke='%2310231f' stroke-width='1.2'/><path d='M0 0H100V2.6H0Z' fill='%238fcf5a'/><path d='M6 1.2H40' stroke='%23cdee8a' stroke-width='.8'/></svg>");
  --wood:var(--grain) 0 0/120px 40px,linear-gradient(#86603e,#5e3f26 70%,#4a301c);
  --woodV:var(--grain) 0 0/120px 40px,linear-gradient(#4a3666,#2e2048 70%,#22162f);
  --parchBg:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.35),transparent 60%),radial-gradient(ellipse at 80% 90%,rgba(150,110,60,.22),transparent 55%),linear-gradient(#f4e8c8,#e6d3a8);
}
/* bars: a carved wooden trough; the fill glossy, with a cel highlight band on top */
#hpbar,#mpbar,#xpbar,#nextUp,#bosshp{background:linear-gradient(#24160c,#3a2414);border-color:var(--inkB);box-shadow:0 0 0 1.5px #9a6f45,0 0 0 3px var(--inkB),0 3px 0 2px rgba(0,0,0,.3);border-radius:7px}
#xpbar{border-radius:4px;box-shadow:0 0 0 1px #9a6f45,0 0 0 2.2px var(--inkB)}
#hpfill{background:linear-gradient(#fff0b0 0,#ffc65a 22%,#f39a2e 62%,#c96a1c 100%);box-shadow:inset 0 -2px 0 rgba(120,50,0,.35)}
#hpfill::after{content:'';position:absolute;left:3px;right:3px;top:2px;height:3px;border-radius:2px;background:rgba(255,255,240,.55)}
#hpfill.low{background:linear-gradient(#ffc0a0 0,#ff7a4a 30%,#d8402a 100%)}
#hptxt{color:#2a1406;text-shadow:0 1px 0 rgba(255,240,200,.6);font-weight:800}
#mpfill{background:linear-gradient(#efe4ff 0,#b598ff 26%,#7d5ae0 70%,#5a3cb8 100%);box-shadow:inset 0 -2px 0 rgba(30,10,80,.35)}
#mptxt{color:#fff;text-shadow:0 1px 0 #2a1a4a}
#xpfill{background:linear-gradient(#e8ffc0 0,#9fe36a 40%,#4f9a42 100%)}
#nextUp i{background:linear-gradient(#cdee8a,#4f9a42);opacity:.7}
#bossfill{background:linear-gradient(#ffd0e0 0,#ff6a96 30%,#b8284e 100%);box-shadow:inset 0 -2px 0 rgba(60,0,20,.4)}
body.boss2 #bossfill{background:linear-gradient(#f0f6ff 0,#a8c4ff 30%,#4a5ad0 100%)}
#bossname{text-shadow:0 2px 0 var(--inkB),0 0 10px rgba(0,0,0,.6)}
/* the level badge: an amber lantern-glass disc in a carved wooden ring, a leaf on top */
#lvBadge{position:relative;background:radial-gradient(circle at 36% 30%,#fff6c8,#ffc65a 45%,#d9822b);border-color:var(--inkB);box-shadow:0 0 0 2.5px #9a6f45,0 0 0 4.5px var(--inkB),0 4px 0 3px rgba(0,0,0,.35)}
#lvBadge::after{content:'';position:absolute;right:-8px;top:-9px;width:20px;height:16px;transform:rotate(18deg);background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 16'><path d='M2 14 C3 6 9 2 18 2 C17 9 11 14 2 14Z' fill='%238fcf5a' stroke='%2310231f' stroke-width='1.6'/><path d='M3 13 C8 9 12 6 16 4' fill='none' stroke='%234f9a42' stroke-width='1.2'/></svg>") no-repeat center/contain}
#lvN{color:#3a1a06;text-shadow:0 1px 0 rgba(255,250,220,.7)}
/* the corner buttons and the ability slots: wooden plaques with a moss cap and a cel highlight */
.hudbtn,.abslot{background:var(--mosscap) top/100% 9px no-repeat,var(--wood);border-color:var(--inkB);box-shadow:inset 0 2px 0 rgba(255,220,160,.28),inset 0 -3px 0 rgba(0,0,0,.32),0 3px 0 rgba(0,0,0,.4)}
.abslot.spell{background:var(--mosscap) top/100% 9px no-repeat,var(--woodV);border-color:#1a0f2a;box-shadow:inset 0 2px 0 rgba(220,200,255,.28),inset 0 -3px 0 rgba(0,0,0,.35),0 3px 0 rgba(0,0,0,.4)}
.abslot img,.hudbtn img{filter:drop-shadow(0 1.5px 0 rgba(0,0,0,.5))}
.abslot .nm{color:#fff3d8;text-shadow:0 1px 0 var(--inkB),0 0 3px var(--inkB)}
.hudbtn b,.abslot.heal .cnt{background:radial-gradient(circle at 40% 30%,#fff6c8,#ffc65a);border-color:var(--inkB)}
.bookico{background:linear-gradient(90deg,#5a2a1e 0 22%,#9a4a2e 22%);box-shadow:inset 0 2px 0 rgba(255,200,160,.35)}
/* the quest line, the hint, toasts and banners: dark bark strips with an ink edge and a lantern-amber or moss accent */
#tracker,#hint,.toast,#banner{background:var(--grain) 0 0/120px 40px,linear-gradient(rgba(58,36,20,.92),rgba(36,22,12,.9));border:1.5px solid var(--inkB);box-shadow:inset 0 1px 0 rgba(255,220,160,.2),0 3px 8px rgba(0,0,0,.35)}
#tracker{border-left:4px solid var(--amber)} #tracker.ready{border-left-color:var(--mossL)}
#banner{border-top:3px solid #4f9a42}
#banner.rage{border-top-color:#ff7aa0} #banner.rage.two{border-top-color:#9ab8ff}
/* buttons: wood with a cel highlight band; the main one is lantern amber */
.btn{background:linear-gradient(rgba(255,230,180,.22),rgba(255,230,180,0) 45%),var(--wood);border-color:var(--inkB);color:#fff3d8;text-shadow:0 1px 0 var(--inkB);box-shadow:inset 0 2px 0 rgba(255,220,160,.3),inset 0 -3px 0 rgba(0,0,0,.3),0 3px 0 rgba(0,0,0,.45)}
.btn.primary{background:linear-gradient(#fff4c8 0,#ffd986 18%,#ffb347 55%,#e0882e 100%);color:#2a1406;text-shadow:0 1px 0 rgba(255,250,220,.6);box-shadow:inset 0 2px 0 rgba(255,255,240,.7),inset 0 -3px 0 rgba(150,70,0,.35),0 3px 0 rgba(0,0,0,.45)}
.btn:active{box-shadow:inset 0 2px 4px rgba(0,0,0,.4),0 1px 0 rgba(0,0,0,.4)}
/* panels: a bark frame (grain, ink edge, a pale inner bevel), a darker page inside, a parchment ribbon for the title */
.panel{background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(95,165,72,.16),transparent 60%),var(--grain) 0 0/120px 40px,linear-gradient(#2c2218,#1e1810);
  border:3px solid var(--inkB);box-shadow:0 0 0 5px #6b4a2f,0 0 0 7px #9a6f45,0 0 0 9.5px var(--inkB),inset 0 0 0 2px rgba(241,228,194,.18),inset 0 0 30px rgba(0,0,0,.5),0 18px 40px rgba(0,0,0,.55)}
.panel h2{align-self:center;padding:4px 26px 6px;margin-top:-4px;background:var(--parchBg);color:var(--parchInk);border:2px solid var(--inkB);border-radius:6px 6px 14px 14px / 6px 6px 10px 10px;box-shadow:0 3px 0 rgba(0,0,0,.35),inset 0 -2px 0 rgba(150,110,60,.3);text-shadow:0 1px 0 rgba(255,255,255,.5)}
.panel h2::after{display:none}
.card,.rrow{background:linear-gradient(rgba(241,228,194,.07),rgba(241,228,194,.03));border:1.5px solid rgba(241,228,194,.16);box-shadow:inset 0 1px 0 rgba(255,240,210,.06),0 2px 0 rgba(0,0,0,.3)}
.card h3,.benchH3{color:#ffd986;text-shadow:0 1px 0 var(--inkB)}
.tabs button{background:var(--wood);border-color:var(--inkB);color:#e8d8b8;box-shadow:inset 0 2px 0 rgba(255,220,160,.22),0 2px 0 rgba(0,0,0,.4)}
.tabs button.on{background:var(--parchBg);color:var(--parchInk);box-shadow:inset 0 -2px 0 rgba(150,110,60,.3),0 2px 0 rgba(0,0,0,.4)}
.chipbtn{background:var(--wood);border-color:var(--inkB)}
.chipbtn.on{background:linear-gradient(#5fa548,#3d6a3a);box-shadow:0 0 0 2px var(--mossL) inset}
#mapCv{border-color:var(--inkB);box-shadow:0 0 0 3px #6b4a2f,0 0 0 5px var(--inkB),0 6px 14px rgba(0,0,0,.4)}
/* dialogue: a parchment page in a bark frame, the portrait in a carved window */
#dlgBox{background:var(--parchBg);border:3px solid var(--inkB);box-shadow:0 0 0 4px #6b4a2f,0 0 0 6px var(--inkB),0 12px 30px rgba(0,0,0,.5)}
#dlgFace{border:2.5px solid var(--inkB);box-shadow:0 0 0 3px #9a6f45,0 0 0 4.5px var(--inkB)}
#dlgName{color:#7b3f2e} #dlgText{color:var(--parchInk)}
/* phone controls: round carved-wood buttons with a moss cap; the attack button wears a lantern-amber ring; spells in violet wood */
.tb{background:radial-gradient(circle at 40% 30%,#9a6f45,#6b4a2f 55%,#4a301c);border-color:var(--inkB);box-shadow:inset 0 3px 0 rgba(255,220,160,.3),inset 0 -4px 0 rgba(0,0,0,.35),0 0 0 2px rgba(255,217,134,.25),0 4px 0 rgba(0,0,0,.4)}
.tb.big{box-shadow:inset 0 3px 0 rgba(255,220,160,.3),inset 0 -4px 0 rgba(0,0,0,.35),0 0 0 3px #ffb347,0 0 0 5px var(--inkB),0 4px 0 rgba(0,0,0,.4)}
.tb.sp{background:radial-gradient(circle at 40% 30%,#6a4f9a,#3e2c6a 60%,#2a1e4a);border-color:#140a24;box-shadow:inset 0 3px 0 rgba(220,200,255,.3),inset 0 -4px 0 rgba(0,0,0,.35),0 4px 0 rgba(0,0,0,.4)}
.tb.down{background:radial-gradient(circle at 40% 30%,#fff4c8,#ffc65a 55%,#d9822b);box-shadow:inset 0 2px 5px rgba(0,0,0,.35),0 0 18px rgba(255,200,110,.7)}
#tInt{background:radial-gradient(circle at 40% 30%,#fff4c8,#ffc65a 50%,#d9822b);box-shadow:inset 0 2px 0 rgba(255,255,240,.6),0 0 0 2.5px var(--inkB),0 0 16px rgba(255,190,90,.6)}
.tb b{color:#fff3d8;text-shadow:0 1px 0 var(--inkB),0 0 4px var(--inkB)}
#moveStrip button{background:radial-gradient(circle at 40% 30%,#9a6f45,#6b4a2f 55%,#4a301c);border-color:var(--inkB);color:#ffd986;box-shadow:inset 0 2px 0 rgba(255,220,160,.3),0 0 0 2px rgba(255,217,134,.3),0 3px 0 rgba(0,0,0,.4)}
#moveStrip.l .ml,#moveStrip.r .mr,#moveStrip .ml.down,#moveStrip .mr.down{background:radial-gradient(circle at 40% 30%,#fff4c8,#ffc65a 55%,#d9822b);color:#2a1406}
.setrow select{background:var(--wood);border-color:var(--inkB)}
/* hero select: seven cards (locked ones are black silhouettes), the picked hero's name and line, one button */
.panel.hsel{width:min(640px,100%);max-height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
#hsGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
@media (max-width:560px){#hsGrid{grid-template-columns:repeat(4,1fr)}}
.hcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px 6px;min-width:0;border-radius:12px;border:2.5px solid var(--ink);background:#1a3634;color:var(--cream);font:700 12px var(--font);box-shadow:0 2px 0 rgba(0,0,0,.35);touch-action:manipulation}
.hcard canvas{width:100%;max-width:84px;aspect-ratio:1;display:block}
.hcard.on{background:#2c524e;border-color:var(--amberL);box-shadow:0 0 0 2px var(--amber),0 3px 0 rgba(0,0,0,.4)}
.hcard.lock{background:#2a4744;color:var(--muted)}
.hcard .hn{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hsInfo{min-height:52px;text-align:center}
#hsName{display:block;font:800 18px var(--font);color:var(--amberL)}
#hsBlurb{margin:4px 0 0;font:500 13px/1.35 var(--font);color:var(--cream)}
#hsInfo.lock #hsName{color:var(--muted)}
#hsGo:disabled{opacity:.45;filter:grayscale(.6)}
.herorow{display:flex;align-items:center;gap:10px;margin-bottom:8px;padding:4px 8px;border-radius:12px;background:rgba(0,0,0,.18)}
.herorow img{width:48px;height:48px}
.herorow b{flex:1;color:var(--cream);font:700 14px var(--font)}

/* ==== art pass 4: the last generic pills in the world's style. The hint and the toasts are parchment slips with an ink edge and a
   bark shadow; the key caps in the hint are little wooden plaques; banners keep the bark strip with a moss top. On a phone, while a
   banner shows, the hint and the toasts step down below it so their text never collides (body.banOn, set by ui.js). */
#hint,.toast{background:var(--parchBg);color:var(--parchInk);border:2px solid var(--inkB);box-shadow:inset 0 -2px 0 rgba(150,110,60,.3),0 3px 0 rgba(0,0,0,.35),0 4px 10px rgba(0,0,0,.3);text-shadow:0 1px 0 rgba(255,255,255,.45);font-weight:700}
#hint{border-radius:10px 14px 10px 14px/14px 10px 14px 10px}
#hint kbd{background:var(--wood);color:#fff3d8;border:1.5px solid var(--inkB);box-shadow:inset 0 1px 0 rgba(255,220,160,.35),0 2px 0 rgba(0,0,0,.4);text-shadow:0 1px 0 var(--inkB);border-radius:6px;padding:0 6px}
.toast{border-radius:999px;padding:3px 12px 3px 5px}
.toast img{filter:drop-shadow(0 1px 0 rgba(0,0,0,.35))}
body.touch.banOn #hint,body.touch.banOn #toasts{top:calc(var(--hudB,64px) + 68px);transition:top .2s}
@media (max-height:420px){ body.touch.banOn #hint,body.touch.banOn #toasts{top:calc(var(--hudB,64px) + 56px)} }

/* ==== art pass 4: the hero select. A carved-wood frame (the panel), each hero a lantern-lit pedestal card with a parchment name
   tag; the picked one lifts and glows in its own accent colour (--acc, set per card by ui.js); the info line is a parchment slip. */
#hsGrid{gap:10px}
.hcard{background:radial-gradient(ellipse 90% 70% at 50% 85%,rgba(255,190,110,.16),transparent 70%),linear-gradient(#1e2a26,#141c1a);border:2.5px solid var(--inkB);box-shadow:0 0 0 2px #6b4a2f,0 0 0 3.5px var(--inkB),0 4px 0 rgba(0,0,0,.45);padding:2px 2px 0;transition:transform .15s,box-shadow .15s}
.hcard .hn{display:block;width:calc(100% + 4px);margin:2px -2px 0;padding:3px 2px 4px;background:var(--parchBg);color:var(--parchInk);border-top:2px solid var(--inkB);border-radius:0 0 9px 9px;font:800 12px/1.1 var(--font);text-shadow:0 1px 0 rgba(255,255,255,.5)}
.hcard.on{transform:translateY(-4px);background:radial-gradient(ellipse 90% 70% at 50% 80%,color-mix(in srgb,var(--acc,#ffd986) 30%,transparent),transparent 70%),linear-gradient(#24342f,#18221f);box-shadow:0 0 0 2px var(--acc,#ffd986),0 0 0 3.5px var(--inkB),0 0 18px color-mix(in srgb,var(--acc,#ffd986) 55%,transparent),0 6px 0 rgba(0,0,0,.45)}
.hcard.on .hn{background:linear-gradient(#fff4d8,#f0dca8);color:#2a1406}
.hcard.lock{filter:saturate(.4) brightness(.8)}
.hcard.lock .hn{background:linear-gradient(#bdb3a0,#a49880);color:#4a3a2a}
#hsInfo{padding:6px 12px 8px;background:var(--parchBg);color:var(--parchInk);border:2px solid var(--inkB);border-radius:10px 14px 10px 14px/14px 10px 14px 10px;box-shadow:inset 0 -2px 0 rgba(150,110,60,.3),0 3px 0 rgba(0,0,0,.35)}
#hsName{color:#7b3f2e;text-shadow:0 1px 0 rgba(255,255,255,.5)}
#hsBlurb{color:var(--parchInk)}
#hsInfo.lock #hsName{color:#6a5a4a}

/* ==== heroes pass 2: the hero select on one quick screen. The stage (the picked hero's signature move on a loop) sits beside the
   parchment info slip (name, signature in the hero's accent, one line on how it plays); under them nine slots in one row (two on a
   phone): seven heroes, the Convergence's "?" and the shell-shaped shadow. Play at the bottom. */
.panel.hsel{width:min(780px,100%);gap:8px}
.hstop{display:flex;gap:10px;align-items:stretch}
#hsStage{flex:0 0 auto;width:min(300px,48%);aspect-ratio:480/260;height:auto;border-radius:12px;border:2.5px solid var(--inkB);box-shadow:0 0 0 2px #6b4a2f,0 0 0 3.5px var(--inkB),inset 0 0 30px rgba(0,0,0,.5);background:radial-gradient(ellipse 80% 70% at 50% 40%,#22322c,#101815)}
.hstop #hsInfo{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;text-align:left;min-height:0}
#hsSig{display:block;margin-top:2px;font:800 13px/1.2 var(--font);font-style:normal;color:color-mix(in srgb,var(--acc,#ffd986) 55%,#3a1e10);text-transform:uppercase;letter-spacing:.04em}
#hsBlurb{margin-top:4px}
#hsTr{margin:6px 0 0;font:700 12px/1.25 var(--font);color:#7b5a3e}
#hsGrid{grid-template-columns:repeat(9,1fr);gap:7px}
.hcard{border-radius:10px}
.hcard canvas{max-width:72px}
.hcard .hn{font-size:11px;padding:2px 1px 3px}
.hcard .hnew{position:absolute;top:3px;right:3px;z-index:2;padding:1px 5px;border-radius:999px;background:var(--red,#e0503a);color:#fff;border:2px solid var(--inkB);font:800 9px/1.3 var(--font);font-style:normal;text-transform:uppercase}
.hcard.conv,.hcard.shell{pointer-events:none;filter:none}
.hcard.conv{justify-content:flex-end}
.hcard.conv .hq{flex:1;display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;max-width:72px;font:900 34px var(--font);color:#5d6e66;text-shadow:0 2px 0 #05090a}
.hcard.conv .hn,.hcard.shell .hn{background:linear-gradient(#3a3428,#2a251c)}
@media (max-width:640px){
  .hstop{flex-direction:column;align-items:center}
  #hsStage{width:min(320px,100%)}
  .hstop #hsInfo{text-align:center;width:100%}
  #hsGrid{grid-template-columns:repeat(5,1fr)}
}
@media (max-height:470px){ #hsStage{width:min(240px,40%)} .hcard canvas{max-width:56px} .panel.hsel{gap:5px} }
/* the journal's roster: the hero of this run, the seven (locked as shadows), the shell, the next unlock */
.roster{margin-bottom:8px}
.roster .herorow{margin-bottom:6px}
.roster .rinfo{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.roster .rtraits{font:600 12px/1.25 var(--font);color:var(--amberL,#ffd986)}
.rstrip{display:flex;flex-wrap:wrap;gap:6px}
.rh{display:flex;flex-direction:column;align-items:center;width:52px;font:700 10px/1.1 var(--font);color:var(--cream);text-align:center}
.rh img{width:44px;height:44px;border-radius:8px;background:rgba(0,0,0,.25)}
.rh.cur img{box-shadow:0 0 0 2px var(--amberL,#ffd986)}
.rh.lock{color:var(--muted)}
.rh span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rnext{margin:6px 0 0}

/* ==== heroes pass 3: the hero select presentation (HEROES.md "Hero select presentation"). No paper card: every slot and the stage
   are a deep teal-black gradient (tealD to ink) with a slight vignette; the hero's own accent glows behind it on the canvas (ui.js),
   pulsing on the picked one, over a soft ground ellipse. Border and name plate only on the picked slot; the rest carry a small cream
   name with no plate. "?" and the shell: no glow, a dim silhouette. Locked heroes: the same glow, greyed. */
.hcard{background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 55%,rgba(0,0,0,.5)),linear-gradient(#0b2326,#10231f 70%,#08140f);
  border:2px solid transparent;box-shadow:0 3px 0 rgba(0,0,0,.35);padding:2px 2px 3px;transition:transform .15s,box-shadow .15s,border-color .15s}
.hcard .hn{display:block;width:auto;margin:1px 0 0;padding:1px 2px 2px;background:none;border:0;border-radius:0;color:var(--cream);opacity:.82;font:700 11px/1.1 var(--font);text-shadow:0 1px 0 #05090a}
.hcard.on{transform:translateY(-3px);background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 55%,rgba(0,0,0,.45)),linear-gradient(#0e2b2d,#10231f 70%,#08140f);
  border-color:var(--acc,#ffd986);box-shadow:0 0 0 1.5px #05090a,0 0 16px color-mix(in srgb,var(--acc,#ffd986) 45%,transparent),0 5px 0 rgba(0,0,0,.4)}
.hcard.on .hn{width:calc(100% + 4px);margin:1px -2px -3px;padding:3px 2px 4px;border-radius:0 0 8px 8px;opacity:1;color:#fff8e6;font-weight:800;
  background:linear-gradient(color-mix(in srgb,var(--acc,#ffd986) 55%,#0b2326),color-mix(in srgb,var(--acc,#ffd986) 30%,#05090a));border-top:1.5px solid color-mix(in srgb,var(--acc,#ffd986) 70%,#fff)}
.hcard.lock,.hcard.lock.on{filter:none;background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 55%,rgba(0,0,0,.5)),linear-gradient(#0b2326,#10231f 70%,#08140f)}
.hcard.lock.on{border-color:#7f8c88}
.hcard.lock .hn{background:none;color:var(--muted);opacity:.6}
.hcard.lock.on .hn{background:linear-gradient(#3a4644,#1c2624);color:#c8d4ce;opacity:1}
.hcard.conv,.hcard.shell{opacity:.72}
.hcard.conv .hn,.hcard.shell .hn{background:none}
.hcard.conv .hq{color:#3c4c48;text-shadow:none}
#hsInfo{background:radial-gradient(ellipse 90% 80% at 30% 40%,color-mix(in srgb,var(--acc,#ffd986) 14%,transparent),transparent 70%),linear-gradient(#0b2326,#10231f 70%,#08140f);
  color:var(--cream);border:1.5px solid color-mix(in srgb,var(--acc,#ffd986) 40%,#05090a);border-radius:12px;box-shadow:inset 0 0 24px rgba(0,0,0,.45),0 3px 0 rgba(0,0,0,.35)}
#hsName{color:var(--amberL);text-shadow:0 2px 0 #05090a}
#hsSig{color:color-mix(in srgb,var(--acc,#ffd986) 75%,#fff)}
#hsBlurb{color:var(--cream)}
#hsTr{color:var(--muted)}
#hsInfo.lock #hsName{color:var(--muted)}
#hsStage{border:1.5px solid color-mix(in srgb,var(--acc,#ffd986) 40%,#05090a);box-shadow:0 0 0 1.5px #05090a,inset 0 0 40px rgba(0,0,0,.55),0 3px 0 rgba(0,0,0,.35);
  background:radial-gradient(ellipse 70% 75% at 50% 45%,transparent 50%,rgba(0,0,0,.55)),linear-gradient(#0b2326,#10231f 70%,#08140f)}
/* heroes pass 3: the form and the weapon under the hero's line (hero select and journal) */
#hsWear,.roster .rwear{display:flex;align-items:center;gap:6px;margin:5px 0 0;font:700 12px/1.2 var(--font);color:color-mix(in srgb,var(--acc,#ffd986) 60%,#fff)}
#hsWear img,.roster .rwear img{width:26px;height:26px;flex:0 0 auto;filter:drop-shadow(0 1px 0 #05090a)}
.roster .rwear{margin:2px 0 0;color:var(--amberL,#ffd986)}
@media (max-width:640px){ #hsWear{justify-content:center} }
/* heroes pass 4: the forms row in the journal (the fourth a locked "?" until found), the secret slots, the reveal */
.fstrip{display:flex;gap:6px;margin:6px 0 2px}
.fs{display:flex;flex-direction:column;align-items:center;width:56px;font:700 10px/1.1 var(--font);color:var(--cream);text-align:center}
.fs img{width:48px;height:48px;border-radius:8px;background:rgba(0,0,0,.25)}
.fs.cur img{box-shadow:0 0 0 2px var(--amberL,#ffd986)}
.fs.lock{color:var(--muted)} .fs.lock img{opacity:.75}
.fs.f4 b,.rh.conv b{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:8px;background:rgba(0,0,0,.35);border:1.5px dashed rgba(200,190,160,.35);font:900 24px var(--font);color:#5d6e66;text-shadow:0 2px 0 #05090a}
.rh.conv b{width:44px;height:44px}
.fs span,.rh span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hcard.secret{filter:none;pointer-events:auto}
.hcard.secret.conv{justify-content:flex-start}
.hcard.reveal{animation:ggReveal 2.4s ease-out both}
@keyframes ggReveal{0%{transform:scale(.9);box-shadow:0 0 0 2px var(--acc,#ffe9a8),0 0 0 rgba(255,233,168,0)}40%{transform:scale(1.08);box-shadow:0 0 0 3px #fff6d8,0 0 34px rgba(255,233,168,.9)}100%{transform:scale(1);box-shadow:0 0 0 2px var(--acc,#ffe9a8),0 0 14px rgba(255,233,168,.4)}}

/* ---- streamer build (?stream=gimble) */
#streamer{position:fixed;left:calc(10px + var(--safeL));bottom:calc(96px + var(--safeB));z-index:7;font:600 13px/1.2 var(--font);color:var(--cream)}
body.touch #streamer{bottom:calc(150px + var(--safeB))}
#stTog{padding:7px 12px;border-radius:999px;border:2px solid rgba(255,217,134,.6);background:rgba(22,48,47,.85);color:#ffd986;font:inherit;cursor:pointer}
#stBox{position:absolute;left:0;bottom:calc(100% + 8px);width:240px;padding:10px;border-radius:14px;background:rgba(12,34,36,.94);border:2px solid rgba(255,217,134,.45);display:flex;flex-direction:column;gap:6px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
#stBox.hidden{display:none}
#stBox b{color:#ffd986;margin-bottom:2px}
#stBox button{padding:7px 10px;border-radius:9px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:var(--cream);font:inherit;text-align:left;cursor:pointer}
#stBox button:active{background:rgba(255,217,134,.35)}
#stBox .stRow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
#stBox .stRow button{text-align:center;padding:6px 4px;font-size:12px}
#stBox small{color:rgba(255,243,200,.7);font-weight:500;font-size:11px}

/* art pass 14 (anti-mash): a slot cooling down is dimmed under its sweep with the seconds left; a press while it cools shakes it */
.abslot .cds{position:absolute;left:0;right:0;top:50%;transform:translateY(-58%);text-align:center;font:800 17px/1 var(--font);color:#fff;text-shadow:0 0 3px #000,0 1px 0 #000,0 0 6px rgba(0,0,0,.8);pointer-events:none}
.abslot.cool img{filter:grayscale(.65) brightness(.6)}
.tb.cool{filter:grayscale(.5) brightness(.75)}
.abslot.nope,.tb.nope{animation:gqNope .26s ease-out}
@keyframes gqNope{0%,100%{translate:0 0}25%{translate:-3px 0}50%{translate:3px 0}75%{translate:-2px 0}}