/* Cipherdrop base styles. Colors come from skins.css (every color here is a skin variable). */
/* Layout: one-screen app. Home = cover-flow shelf of topic cards over a live neon grid; Game = board left, question card right (stacks on narrow screens).
   Look: "black ice" cyberpunk glass. Near-black ground, frosted glass HUD panels with corner ticks,
   cyan = the player, magenta = the computer, lime = correct, hot pink = miss. Motion is all gated by prefers-reduced-motion. */

[hidden]{display:none!important}
html,body{height:100%}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.4;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
*{box-sizing:border-box}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.flow:focus-visible{outline:1px dashed rgba(var(--c1),.3);outline-offset:-4px}
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;letter-spacing:.02em;line-height:1.02}
.app{position:relative;z-index:1;min-height:100%;display:flex;flex-direction:column}
.muted{color:var(--muted)}

/* ---------- atmosphere ---------- */
#bgfx{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.scan{position:fixed;inset:0;z-index:70;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.vig{position:fixed;inset:0;z-index:69;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%)}
#flash{position:fixed;inset:0;z-index:68;pointer-events:none;opacity:0;background:linear-gradient(100deg,transparent 20%,rgba(var(--c1),.35) 45%,rgba(var(--c2),.3) 55%,transparent 80%);background-size:250% 100%}
#flash.go{animation:sweep .6s ease-out}
#flash.red{background:radial-gradient(ellipse at center,rgba(var(--c4),.35),transparent 70%);background-size:100% 100%}
#flash.red.go{animation:redflash .45s ease-out}
@keyframes sweep{0%{opacity:1;background-position:120% 0}100%{opacity:0;background-position:-40% 0}}
@keyframes redflash{0%{opacity:1}100%{opacity:0}}
.app.shake{animation:shake2 .38s}
@keyframes shake2{10%{transform:translate(-6px,2px)}30%{transform:translate(6px,-3px)}50%{transform:translate(-4px,3px)}70%{transform:translate(3px,-2px)}90%{transform:translate(-1px,1px)}}
.glitching{animation:glitch .42s steps(2,end)}
@keyframes glitch{
  0%{transform:none;filter:none}
  15%{transform:translate(-4px,0) skewX(-6deg);filter:drop-shadow(4px 0 0 rgba(var(--c2),.8)) drop-shadow(-4px 0 0 rgba(var(--c1),.8))}
  30%{transform:translate(5px,-1px);clip-path:inset(12% 0 30% 0)}
  45%{transform:translate(-2px,1px) skewX(4deg);clip-path:inset(50% 0 8% 0);filter:hue-rotate(60deg)}
  60%{transform:translate(3px,0);clip-path:inset(0 0 60% 0)}
  80%{transform:translate(-1px,0);clip-path:none;filter:drop-shadow(2px 0 0 rgba(var(--c2),.6))}
  100%{transform:none;filter:none;clip-path:none}}

/* glass HUD panel: frosted fill, hairline edge, cyan corner ticks */
.hud,.qcard,.mine,.endcard,.sheet .in,.strow,.ststeps,.promptbox .in{
  background:
    linear-gradient(var(--gold),var(--gold)) left top/14px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left top/2px 14px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom/14px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom/2px 14px no-repeat,
    linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,0) 40%),
    var(--panel);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--line);border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.55);
}

/* ---------- home ---------- */
#home{flex:1;display:flex;flex-direction:column;align-items:center;padding:12px 16px 16px;gap:6px;overflow:hidden;position:relative}
.audiobar{position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:16px;display:flex;gap:8px;z-index:5}
.brand{text-align:center;display:flex;flex-direction:column;gap:4px;align-items:center;margin-top:2px}
.glitchlogo{position:relative;font-size:clamp(40px,min(8vw,9vh),80px);text-transform:uppercase;letter-spacing:.06em;color:var(--c1hi);
  text-shadow:0 0 6px rgba(var(--c1),.9),0 0 22px rgba(var(--c1),.5),0 0 60px rgba(var(--c1),.25)}
.glitchlogo::before,.glitchlogo::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;text-shadow:none;background:none;opacity:0}
.glitchlogo::before{color:var(--mag);transform:translate(2px,0);clip-path:inset(0 0 62% 0);animation:gl1 3.2s infinite steps(1)}
.glitchlogo::after{color:var(--gold);transform:translate(-2px,0);clip-path:inset(58% 0 0 0);animation:gl2 2.7s infinite steps(1)}
@keyframes gl1{0%,86%,100%{opacity:0;transform:translate(2px,0);clip-path:inset(0 0 62% 0)}88%{opacity:.9;transform:translate(-7px,0);clip-path:inset(18% 0 48% 0)}91%{opacity:.9;transform:translate(6px,0);clip-path:inset(60% 0 8% 0)}94%{opacity:.9;transform:translate(-3px,0);clip-path:inset(30% 0 40% 0)}}
@keyframes gl2{0%,80%,100%{opacity:0;transform:translate(-2px,0);clip-path:inset(58% 0 0 0)}82%{opacity:.9;transform:translate(7px,0);clip-path:inset(8% 0 70% 0)}86%{opacity:.9;transform:translate(-5px,0);clip-path:inset(44% 0 30% 0)}}
.brand p{margin:0;color:var(--muted);font-family:var(--display);font-size:clamp(14px,2vw,17px);letter-spacing:.22em;text-transform:uppercase}
.brand p b{color:var(--gold);font-weight:600}
.glitchlogo .slash{color:var(--mag);text-shadow:0 0 10px rgba(var(--c2),.9),0 0 30px rgba(var(--c2),.5);margin:0 .02em}
.flow{position:relative;width:100%;max-width:1200px;height:clamp(250px,38vh,420px);perspective:1100px;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;outline:none}
.flow.dragging{cursor:grabbing}
.card{position:absolute;left:50%;top:50%;width:clamp(190px,min(calc(20vw + 150px),32vh),300px);aspect-ratio:1;transform-style:preserve-3d;will-change:transform}
.card .art{position:absolute;inset:0;border-radius:12px;overflow:hidden;border:1px solid var(--edge);box-shadow:0 18px 44px rgba(0,0,0,.6);-webkit-box-reflect:below 8px linear-gradient(transparent 70%,rgba(var(--c1),.16))}
.card:not(.on) .art{filter:brightness(.5) saturate(.7) hue-rotate(-10deg)}
.card.on .art{border-color:var(--gold);box-shadow:var(--glowc),0 26px 60px rgba(0,0,0,.6);animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.card.on .art::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.22) 48%,rgba(var(--c1),.18) 52%,transparent 58%);animation:sheen 3.6s ease-in-out infinite;pointer-events:none}
@keyframes sheen{0%,55%{transform:translateX(-60%)}85%,100%{transform:translateX(60%)}}
.art{background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.18),transparent 45%),linear-gradient(150deg,var(--a),var(--b));display:grid;place-items:center}
.art::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(var(--c1),.10) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--c1),.10) 1px,transparent 1px);background-size:22px 22px;opacity:.8}
.art .glyph{position:relative;font-size:clamp(120px,17vw,200px);line-height:1;transform:translateY(-6%);opacity:.5;filter:saturate(.5) brightness(.75) drop-shadow(0 0 22px rgba(var(--c1),.35));transition:opacity .35s,filter .35s,transform .35s}
.art .shade{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 42%,rgba(var(--bgr),0) 0%,rgba(var(--bgr),.55) 75%),linear-gradient(180deg,rgba(var(--bgr),.15),rgba(var(--bgr),.55));transition:opacity .35s}
@media (hover:hover){.card:hover .art .glyph,.flow:focus-visible .card.on .art .glyph{opacity:1;filter:saturate(1.1) brightness(1.05) drop-shadow(0 0 26px rgba(var(--c1),.65));transform:translateY(-6%) scale(1.06)}.card:hover .art .shade{opacity:.35}}
@media (hover:none){.card.on .art .glyph{opacity:1;filter:saturate(1.05) drop-shadow(0 0 24px rgba(var(--c1),.55))}.card.on .art .shade{opacity:.4}}
.art .ttl{position:absolute;left:12px;right:12px;bottom:10px;font-family:var(--display);font-weight:700;font-size:clamp(16px,2vw,20px);line-height:1.05;text-transform:uppercase;letter-spacing:.04em;text-shadow:0 0 10px rgba(0,0,0,.9);transition:opacity .2s}
.card:not(.on) .ttl{opacity:0}
.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.art img ~ .ttl{display:none}
.art .noise{position:absolute;inset:0;pointer-events:none;background-image:var(--noise);background-size:160px 160px;opacity:.2;mix-blend-mode:overlay;animation:grain .45s steps(5) infinite}
.art .noise::after{content:"";position:absolute;left:0;right:0;height:18%;top:-20%;background:linear-gradient(180deg,transparent,rgba(var(--c1),.16) 45%,rgba(255,255,255,.22) 50%,rgba(var(--c2),.12) 55%,transparent);animation:band 3.8s linear infinite}
.card:not(.on) .art .noise{opacity:.32}
.art img ~ .noise{opacity:.1}
.card:not(.on) .art img ~ .noise{opacity:.22}
.art img + .shade{opacity:.55}
.card.on .art img + .shade{opacity:.2}
@media (hover:hover){.card.on .art img + .shade{opacity:.4}.card:hover .art img + .shade{opacity:0}}
@keyframes grain{0%{background-position:0 0}20%{background-position:-40px 30px}40%{background-position:60px -20px}60%{background-position:-20px -60px}80%{background-position:30px 50px}100%{background-position:0 0}}
@keyframes band{0%{top:-20%}100%{top:110%}}
.card.tear .art{animation:tear .34s steps(3) 1}
.card.on.tear .art{animation:tear .34s steps(3) 1,bob 4s ease-in-out infinite}
@keyframes tear{
  0%{translate:0 0;filter:none;clip-path:none}
  20%{translate:-8px 0;clip-path:polygon(0 0,100% 0,100% 34%,0 34%,0 40%,100% 40%,100% 100%,0 100%);filter:drop-shadow(5px 0 0 rgba(var(--c2),.85)) drop-shadow(-5px 0 0 rgba(var(--c1),.85)) contrast(1.3)}
  45%{translate:7px 0;clip-path:polygon(0 0,100% 0,100% 62%,0 62%,0 70%,100% 70%,100% 100%,0 100%);filter:hue-rotate(70deg) saturate(1.6)}
  70%{translate:-3px 0;clip-path:polygon(0 12%,100% 12%,100% 100%,0 100%);filter:drop-shadow(3px 0 0 rgba(var(--c2),.7)) brightness(1.3)}
  100%{translate:0 0;filter:none;clip-path:none}}
.info{display:flex;align-items:center;gap:14px;width:100%;max-width:640px;justify-content:space-between;margin-top:0}
.info .mid{text-align:center;flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;align-items:center}
.info h2{font-size:clamp(24px,min(4vw,4.4vh),36px);text-transform:uppercase;text-shadow:0 0 18px rgba(var(--c1),.35)}
.info p{margin:0;color:var(--muted);font-size:15px}
.hook{color:var(--ink)!important;opacity:.92;font-size:16px!important}
.arrow{width:52px;height:52px;border-radius:10px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;flex:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:box-shadow .2s}
.arrow:hover:not(:disabled){box-shadow:var(--glowc);border-color:var(--gold)}
.arrow:disabled{opacity:.3}
.arrow svg{width:22px;height:22px}
.stars{display:flex;gap:3px}
.stars svg{width:20px;height:20px}
.play{position:relative;margin-top:0;font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:.3em;text-transform:uppercase;padding:10px 52px 10px 62px;color:var(--gold-ink);background:var(--gold);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);filter:drop-shadow(0 0 14px rgba(var(--c1),.7));animation:pulse 2.2s ease-in-out infinite;transition:transform .08s}
.play:active{transform:scale(.97)}
@keyframes pulse{50%{filter:drop-shadow(0 0 26px rgba(var(--c1),.95))}}

/* audio + icon buttons */
.icon{width:46px;height:46px;border-radius:10px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;flex:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:box-shadow .2s,border-color .2s,color .2s}
.icon svg{width:22px;height:22px}
.icon.on{color:var(--gold);border-color:var(--gold);box-shadow:var(--glowc)}
.icon.off{color:var(--muted)}

/* ---------- sheet ---------- */
.sheet{position:fixed;inset:0;z-index:30;background:rgba(var(--bgr),.72);display:flex;align-items:flex-end;justify-content:center;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.sheet .in{width:100%;max-width:560px;padding:22px;display:flex;flex-direction:column;gap:14px;animation:up .28s cubic-bezier(.2,.9,.3,1.2)}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet .top{display:flex;gap:14px;align-items:center}
.sheet .thumb{width:84px;height:84px;flex:none;position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--edge)}
.sheet .thumb .glyph{font-size:62px;opacity:1;filter:none;transform:none}
.sheet h3{font-size:28px;text-transform:uppercase}
.sheet .sub{margin:2px 0 0;color:var(--muted);font-size:15px}
.sizes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sizes button{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:transform .08s,box-shadow .2s,border-color .2s}
.sizes button:hover,.sizes button:focus-visible{border-color:var(--gold);box-shadow:var(--glowc)}
.sizes button:active{transform:scale(.97)}
.sizes b{font-family:var(--display);font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.06em}
.sizes small{color:var(--muted);font-size:14px}
.mini-grid{display:grid;gap:2px}
.mini-grid i{display:block;width:9px;height:9px;border-radius:1px;background:rgba(var(--pl),.35)}
.mini-grid i.w{background:var(--gold);box-shadow:0 0 6px rgba(var(--c1),.8)}
.ghost{color:var(--muted);font-weight:700;padding:10px;align-self:center;letter-spacing:.08em;text-transform:uppercase;font-size:14px}

/* ---------- game ---------- */
#game{flex:1;display:flex;flex-direction:column;padding:12px 16px 16px;gap:12px;min-height:100%}
.gbar{display:flex;align-items:center;gap:10px}
.gtitle{flex:1;min-width:0;font-family:var(--display);font-weight:700;font-size:clamp(18px,2.8vw,26px);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 0 14px rgba(var(--c1),.35)}
.chipbar{display:flex;gap:8px;align-items:center}
.pill{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pill svg{width:18px;height:18px}
.pill.hot{border-color:var(--mag);color:var(--mag);box-shadow:var(--glowm);animation:flick 1.2s infinite}
@keyframes flick{50%{opacity:.75}}
.gmain{flex:1;display:grid;gap:16px;align-items:start}
@media (min-width:860px){.gmain{grid-template-columns:minmax(0,1fr) minmax(320px,400px)}}
.gmain > *{min-width:0}
.boardcol{display:flex;flex-direction:column;gap:12px;align-items:center;position:relative;z-index:2}
.board{--n:7;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:clamp(3px,.6vw,6px);width:min(100%,calc(100vh - 230px),640px);width:min(100%,calc(100dvh - 230px),640px);padding:clamp(8px,1.2vw,14px);
  background:linear-gradient(160deg,rgba(255,255,255,.05),transparent 40%),var(--bg2);border:1px solid var(--line);border-radius:12px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.6);position:relative;transition:box-shadow .3s,border-color .3s}
.cell{aspect-ratio:1;border-radius:6px;background:var(--cell);border:1px solid rgba(var(--c1),.10);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:clamp(16px,3.4vw,34px);color:var(--gold-ink);position:relative;padding:0;transition:transform .1s,background .2s,box-shadow .2s}
.board.aim{border-color:var(--gold);box-shadow:var(--glowc),0 24px 60px rgba(0,0,0,.6);animation:aimpulse 1.6s ease-in-out infinite}
@keyframes aimpulse{50%{box-shadow:0 0 26px rgba(var(--c1),.7),0 0 70px rgba(var(--c1),.25),0 24px 60px rgba(0,0,0,.6)}}
.board.aim .cell:not(.hit):not(.miss){cursor:crosshair}
.board.aim .cell:not(.hit):not(.miss):hover{background:rgba(var(--c1),.18);border-color:var(--gold);box-shadow:inset 0 0 12px rgba(var(--c1),.4);transform:translateY(-2px)}
.cell.miss{background:rgba(var(--bgr),.7);border-color:rgba(var(--c2),.15)}
.cell.miss::after{content:"";width:28%;height:28%;border-radius:50%;border:2px solid rgba(var(--c2),.55)}
.cell.hit{background:var(--gold);border-color:var(--c1hi);box-shadow:0 0 14px rgba(var(--c1),.8),inset 0 0 10px rgba(255,255,255,.5);animation:ignite .45s ease-out}
.cell.done{background:var(--good);border-color:#D8FFDE;box-shadow:0 0 16px rgba(var(--c3),.8),inset 0 0 10px rgba(255,255,255,.5);color:#062A0C}
@keyframes ignite{0%{transform:scale(.6);filter:brightness(3)}60%{transform:scale(1.12)}100%{transform:none;filter:none}}
.cell.drop::before{content:"";position:absolute;inset:-40%;pointer-events:none;z-index:-1;border-radius:50%;border:2px solid var(--gold);box-shadow:var(--glowc);animation:ring .55s ease-out forwards;pointer-events:none}
@keyframes ring{from{transform:scale(.15);opacity:1}to{transform:scale(1.3);opacity:0}}
.cell.last{outline:2px solid var(--mag);outline-offset:-1px;box-shadow:var(--glowm)}
.rack{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:center;max-width:640px}
.rack .w{display:flex;gap:4px}
.rack .t{width:clamp(26px,3.6vw,36px);height:clamp(30px,4vw,40px);border-radius:5px;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:clamp(16px,2.4vw,22px);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.rack .t.on{background:var(--gold);color:var(--gold-ink);border-color:var(--c1hi);box-shadow:0 0 10px rgba(var(--c1),.7)}
.rack .w.done .t{background:var(--good);color:#062A0C;border-color:#D8FFDE;box-shadow:0 0 10px rgba(var(--c3),.7)}
.side{display:flex;flex-direction:column;gap:14px}
.qcard{padding:20px;display:flex;flex-direction:column;gap:14px;min-height:240px;transition:border-color .2s,box-shadow .2s}
.qcard.right{border-color:var(--good);box-shadow:0 0 22px rgba(var(--c3),.45),0 24px 60px rgba(0,0,0,.55)}
.qcard.wrong{border-color:var(--bad);box-shadow:0 0 22px rgba(var(--c4),.5),0 24px 60px rgba(0,0,0,.55)}
.qhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.qnum{font:700 13px var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.qnum::before{content:"// ";color:var(--mag)}
.hintbtn{display:flex;align-items:center;gap:6px;background:rgba(var(--c2),.10);border:1px solid var(--mag);border-radius:8px;padding:8px 14px;font-family:var(--display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:14px;color:var(--mag);transition:box-shadow .2s}
.hintbtn:hover:not(:disabled){box-shadow:var(--glowm)}
.hintbtn svg{width:18px;height:18px}
.hintbtn:disabled{opacity:.35;cursor:not-allowed;border-color:var(--line);color:var(--muted)}
.qtext{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.7vw,28px);line-height:1.18;margin:0;min-height:2.3em}
.qhint{background:rgba(var(--c2),.10);border:1px solid rgba(var(--c2),.4);color:var(--c2hi);border-radius:8px;padding:10px 12px;font-family:var(--display);font-weight:700;letter-spacing:.12em;word-break:break-word}
.choices{display:grid;gap:10px}
.choices button{position:relative;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:14px 16px 14px 40px;text-align:left;font-weight:700;font-size:18px;min-height:56px;transition:transform .08s,box-shadow .15s,border-color .15s;animation:slidein .35s backwards}
.choices button::before{content:attr(data-k);position:absolute;left:14px;top:50%;transform:translateY(-50%);font-family:var(--display);font-size:14px;color:var(--gold);opacity:.8}
.choices button:nth-child(2){animation-delay:.05s}.choices button:nth-child(3){animation-delay:.1s}.choices button:nth-child(4){animation-delay:.15s}
@keyframes slidein{from{transform:translateX(18px);opacity:0}to{transform:none;opacity:1}}
.choices button:hover{border-color:var(--gold);box-shadow:var(--glowc)}
.choices button:active{transform:scale(.98)}
.choices button.good{background:var(--good);color:#062A0C;border-color:#D8FFDE;box-shadow:0 0 18px rgba(var(--c3),.7)}
.choices button.good::before{color:#062A0C}
.choices button.bad{background:var(--bad);color:#2A0010;border-color:var(--c2hi);box-shadow:0 0 18px rgba(var(--c4),.7)}
.choices button.bad::before{color:#2A0010}
.choices button.gone{display:none}
.typed{display:flex;gap:10px}
.typed input{flex:1;min-width:0;font:700 22px var(--display);letter-spacing:.06em;padding:12px 14px;border-radius:8px;border:1px solid var(--line);background:rgba(var(--bgr),.7);color:var(--ink);caret-color:var(--gold)}
.typed input:focus{border-color:var(--gold);box-shadow:var(--glowc);outline:none}
.typed button{background:var(--gold);color:var(--gold-ink);font-family:var(--display);font-weight:700;letter-spacing:.14em;font-size:20px;border-radius:8px;padding:0 22px;min-height:54px;box-shadow:var(--glowc)}
.status{display:flex;flex-direction:column;gap:8px;align-items:flex-start;animation:up .25s ease-out}
.status .big{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.4vw,34px);line-height:1.05;text-transform:uppercase;letter-spacing:.03em}
.status .big.good{color:var(--good);text-shadow:0 0 18px rgba(var(--c3),.6)}
.status .big.bad{color:var(--bad);text-shadow:0 0 18px rgba(var(--c4),.6)}
.status .big.gold{color:var(--gold);text-shadow:0 0 18px rgba(var(--c1),.6)}
.status p{margin:0;color:var(--muted)}
.drops{display:flex;gap:8px}
.drops i{width:16px;height:16px;transform:rotate(45deg);background:var(--gold);box-shadow:0 0 12px rgba(var(--c1),.9);animation:flick 1s infinite}
.mine{padding:12px 14px;display:flex;gap:14px;align-items:center;contain:layout;position:relative;z-index:0}
.mine .lab{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.mine .lab b{font-family:var(--display);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.06em}
.mine .lab span{color:var(--muted);font-size:14px}
.board.mini{width:132px!important;height:132px;flex:none;padding:5px;gap:2px;border-radius:6px;box-shadow:none;animation:none;contain:strict;overflow:hidden;pointer-events:none}
.board.mini .cell{border-radius:1px;font-size:0;line-height:0;box-shadow:none;animation:none;border:0;background:rgba(var(--pm),.45);outline-offset:0;min-width:0;min-height:0}
.board.mini .cell.mine-w{background:rgba(var(--c1),.35)}
.board.mini .cell.hit{background:var(--mag);box-shadow:0 0 6px rgba(var(--c2),.9)}
.board.mini .cell.miss{background:rgba(var(--bgr),.8)}
.board.mini .cell.miss::after{width:30%;height:30%;border-width:1px}

/* ---------- end ---------- */
#end{flex:1;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.endcard{width:100%;max-width:520px;padding:28px 24px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.endcard h2{font-size:clamp(42px,8vw,66px);text-transform:uppercase;color:var(--c1hi);text-shadow:0 0 8px rgba(var(--c1),.9),0 0 30px rgba(var(--c1),.5)}
.endcard.lost h2{text-shadow:0 0 8px rgba(var(--c2),.9),0 0 30px rgba(var(--c2),.5)}
.endcard .bigstars{display:flex;gap:10px}
.endcard .bigstars svg{width:58px;height:58px}
.endcard .bigstars svg.on{animation:pop .45s ease-out backwards;filter:drop-shadow(0 0 10px rgba(var(--c1),.9))}
.endcard .bigstars svg:nth-child(2){animation-delay:.18s}
.endcard .bigstars svg:nth-child(3){animation-delay:.36s}
@keyframes pop{0%{transform:scale(0) rotate(-40deg)}80%{transform:scale(1.2)}100%{transform:none}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.stats div{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:12px 6px}
.stats b{display:block;font-family:var(--display);font-weight:700;font-size:30px;font-variant-numeric:tabular-nums;color:var(--gold)}
.stats span{color:var(--muted);font-size:13px}
.endbtns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}
.endbtns .play{font-size:20px;padding:12px 30px 12px 38px;margin:0;letter-spacing:.18em}
.endbtns .alt{background:var(--panel2);border:1px solid var(--line);font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.14em;text-transform:uppercase;padding:12px 26px;border-radius:8px;transition:box-shadow .2s,border-color .2s}
.endbtns .alt:hover{border-color:var(--gold);box-shadow:var(--glowc)}

/* ---------- card art studio ---------- */
.sthead{display:flex;align-items:center;gap:12px}
.sthead h2{font-size:clamp(28px,5vw,40px);flex:1;text-transform:uppercase}
.stlist{display:flex;flex-direction:column;gap:10px}
.strow{display:flex;align-items:center;gap:14px;padding:10px 12px;flex-wrap:wrap}
.strow.has{border-color:rgba(var(--c3),.55)}
.stthumb{width:72px;height:72px;border-radius:8px;position:relative;overflow:hidden;flex:none;border:1px solid var(--edge)}
.stthumb .glyph{font-size:52px;opacity:1;filter:none;transform:none}
.stname{flex:1;min-width:140px;display:flex;flex-direction:column;gap:2px}
.stname b{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.1;text-transform:uppercase;letter-spacing:.03em}
.stname span{color:var(--muted);font-size:14px}
.strow.has .stname span{color:var(--good)}
.stbtns{display:flex;gap:8px;flex-wrap:wrap}
.stbtns button{border-radius:8px;padding:12px 16px;font-weight:700;background:var(--panel2);border:1px solid var(--line);min-height:48px}
.stbtns button.primary{background:var(--gold);color:var(--gold-ink);border-color:var(--gold);box-shadow:var(--glowc)}
.stbtns button.ok{background:var(--good);color:#062A0C;border-color:var(--good)}
.stbtns button.x{background:none;border-color:transparent;color:var(--muted);padding:12px 10px}
.stnote{color:var(--muted);font-size:14px;margin:0}

/* ---------- confetti + toast ---------- */
.bits{position:fixed;inset:0;pointer-events:none!important;z-index:66;overflow:hidden}
.bits i{position:absolute;width:4px;height:16px;border-radius:1px;animation:fly 1s ease-out forwards}
@keyframes fly{to{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0}}
.toast{pointer-events:none;position:fixed;left:50%;top:calc(16px + env(safe-area-inset-top,0px));transform:translateX(-50%);background:rgba(var(--bgr),.85);border:1px solid var(--gold);color:var(--gold);font-family:var(--display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:20px;padding:10px 22px;border-radius:8px;z-index:67;box-shadow:var(--glowc);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:up .25s ease-out;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis}

/* ---------- home HUD dressing ---------- */
.hudbar{width:100%;max-width:1100px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;border-bottom:1px solid var(--line);padding-bottom:8px}
.hudbar .readout{display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hudbar .dim{color:var(--muted)}
.hudbar .audio{display:flex;gap:8px;flex:none}
.led{width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 8px var(--good);animation:blink 1.6s steps(2,end) infinite;flex:none}
@keyframes blink{50%{opacity:.25}}
.logoframe{position:relative;padding:18px 34px 16px}
.logoframe::before,.logoframe::after{content:"";position:absolute;width:26px;height:26px;border:2px solid var(--gold);filter:drop-shadow(0 0 6px rgba(var(--c1),.7))}
.logoframe::before{left:0;top:0;border-right:0;border-bottom:0}
.logoframe::after{right:0;bottom:0;border-left:0;border-top:0}
.micro{position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--muted);white-space:nowrap}
.micro.tl{left:32px;top:2px}.micro.tr{right:4px;top:2px;color:var(--mag)}
.micro.bl{left:4px;bottom:0}.micro.br{right:32px;bottom:0;color:var(--good)}
.glitchlogo{background:linear-gradient(180deg,#FFFFFF 0%,var(--c1hi) 45%,var(--c1hi) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px rgba(var(--c1),.65)) drop-shadow(-2px 0 0 rgba(var(--c2),.55)) drop-shadow(2px 0 0 rgba(var(--c1),.55));text-shadow:none}
.glitchlogo .slash{-webkit-text-fill-color:var(--mag);color:var(--mag)}
.glitchlogo::before,.glitchlogo::after{-webkit-text-fill-color:currentColor}
.brand .tagline{font-family:var(--mono);font-size:clamp(13px,1.8vw,16px);letter-spacing:.24em;color:var(--muted);white-space:nowrap}
.tagline b{color:var(--mag);font-weight:400}
.cursor{color:var(--gold);animation:blink 1s steps(2,end) infinite}
.filenum{font-family:var(--mono);font-size:13px;letter-spacing:.24em;color:var(--gold);opacity:.9}
.filenum::before{content:"\25B8 ";color:var(--mag)}
.tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.tags span{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(var(--c1),.35);background:rgba(var(--c1),.06);padding:3px 9px;border-radius:2px}
.tags span:nth-child(2){color:var(--mag);border-color:rgba(var(--c2),.4);background:rgba(var(--c2),.06)}
.playwrap{position:relative;padding:7px 12px;margin-top:2px}
.playwrap::before,.playwrap::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--mag);filter:drop-shadow(0 0 6px rgba(var(--c2),.7))}
.playwrap::before{left:0;top:0;border-right:0;border-bottom:0}
.playwrap::after{right:0;bottom:0;border-left:0;border-top:0}
.play{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:0;overflow:hidden}
.play .pl{line-height:1}
.play .ps{font-family:var(--mono);font-size:12px;letter-spacing:.3em;opacity:.7}
.play::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:playsheen 2.8s ease-in-out infinite}
@keyframes playsheen{0%,55%{left:-60%}90%,100%{left:130%}}
.arrow{clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);border-radius:0;color:var(--gold)}
@media (max-width:520px){
  .hudbar{font-size:11px;letter-spacing:.08em}
  .hudbar .dim{display:none}
  .logoframe{padding:16px 22px 14px}
  .micro{font-size:9px;letter-spacing:.12em}
  .micro.tl{left:24px}.micro.br{right:24px}
  .brand .tagline{letter-spacing:.14em}
}
@media (max-height:720px){.flow{height:clamp(220px,34vh,300px)}.brand .tagline,.micro{display:none}.logoframe{padding:10px 20px}.hook{font-size:15px!important}.playwrap{margin-top:0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:520px){.play{font-size:24px;padding:12px 40px 12px 50px}.arrow{width:44px;height:44px}.audiobar{top:10px;right:10px}.audiobar .icon{width:40px;height:40px}}
@media (max-width:859px){
  #game{padding-top:10px;gap:10px}
  .board{width:min(100%,max(240px,calc(100vh - 500px)));width:min(100%,max(240px,calc(100svh - 500px)))}
  .gmain{gap:12px}
  .qcard{min-height:0;padding:16px}
  .choices button{min-height:50px;padding:12px 14px 12px 38px;font-size:17px}
  .rack{gap:8px 14px}
}

/* ---------- v7: brighter board, matrix layer, settings, maker ---------- */
#flow .art .glyph.lit,.art .glyph.lit{opacity:.95;filter:saturate(1.1) drop-shadow(0 0 24px rgba(var(--c1),.55))}
#mx{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.board{background:linear-gradient(160deg,rgba(255,255,255,.06),transparent 40%),rgba(var(--bgr),.86);border-color:rgba(var(--c1),.45);box-shadow:0 0 0 1px rgba(var(--c1),.08),0 0 34px rgba(var(--c1),.16),0 24px 60px rgba(0,0,0,.6)}
.cell{border:1px solid rgba(var(--c1),.30);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 12px rgba(var(--c1),.07)}
.board.aim .cell:not(.hit):not(.miss){border-color:rgba(var(--c1),.6);background:rgba(var(--c1),.11)}
.cell.miss{background:rgba(var(--bgr),.9);border-color:rgba(var(--c2),.4)}
.cell.miss::after{border-color:rgba(var(--c2),.85)}
.rack .t{background:rgba(var(--pm),.8);border-color:rgba(var(--c1),.38)}
.board.mini .cell{background:rgba(var(--pl),.5)}
.board.mini .cell.mine-w{background:rgba(var(--c1),.55)}
.icon.gear{color:var(--gold);border-color:rgba(var(--c1),.5)}
.icon.gear svg{transition:transform .6s}
.icon.gear:hover svg,.icon.gear:focus-visible svg{transform:rotate(90deg)}
.icon.gear.playing{box-shadow:var(--glowc)}
#settings .in{max-height:calc(100dvh - 32px);overflow:auto;gap:18px}
.sethead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sethead h3{font-family:var(--mono);font-weight:400;font-size:18px;letter-spacing:.24em;color:var(--gold);text-shadow:var(--glowc)}
.setgrp{display:flex;flex-direction:column;gap:8px}
.setlab{font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--mag);text-transform:uppercase}
.setrow{display:flex;align-items:center;gap:14px;min-height:48px}
.setrow>span{flex:1;font-weight:700;font-size:17px}
.setrow output{font-family:var(--mono);color:var(--gold);width:3ch;text-align:right}
.switch{width:60px;height:34px;border-radius:17px;background:var(--panel2);border:1px solid var(--line);position:relative;flex:none;transition:border-color .2s,box-shadow .2s}
.switch::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:var(--muted);transition:transform .2s,background .2s}
.switch[aria-checked="true"]{border-color:var(--gold);box-shadow:var(--glowc)}
.switch[aria-checked="true"]::after{transform:translateX(26px);background:var(--gold)}
input.vol{-webkit-appearance:none;appearance:none;background:transparent;flex:1;height:34px;margin:0;--p:60%}
input.vol::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--gold) var(--p),rgba(var(--c1),.16) var(--p))}
input.vol::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:4px;background:var(--gold);box-shadow:var(--glowc);transform:rotate(45deg)}
input.vol::-moz-range-track{height:6px;border-radius:3px;background:rgba(var(--c1),.16)}
input.vol::-moz-range-progress{height:6px;border-radius:3px;background:var(--gold)}
input.vol::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:4px;background:var(--gold);box-shadow:var(--glowc);transform:rotate(45deg)}
input.vol:disabled{opacity:.4}
.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.styles button{padding:12px 4px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);display:flex;flex-direction:column;gap:3px;align-items:center;transition:border-color .2s,box-shadow .2s,color .2s}
.styles button b{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:15px}
.styles button small{color:var(--muted);font-size:10px;font-family:var(--mono);letter-spacing:.14em}
.styles button[aria-pressed="true"]{border-color:var(--gold);box-shadow:var(--glowc);color:var(--gold)}
.bigbtn{display:flex;align-items:center;gap:14px;padding:16px;border-radius:10px;background:linear-gradient(120deg,rgba(var(--c2),.2),rgba(var(--c1),.1));border:1px solid var(--mag);box-shadow:var(--glowm);text-align:left;width:100%;transition:transform .08s}
.bigbtn:active{transform:scale(.98)}
.bigbtn b{font-family:var(--display);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.05em;display:block;line-height:1.1}
.bigbtn small{color:var(--muted);font-size:14px}
.bigbtn svg{width:30px;height:30px;flex:none;color:var(--mag)}
.sheet .printbtn{font-family:var(--mono);color:var(--muted);font-size:13px;letter-spacing:.16em;align-self:center;padding:6px 10px}
#maker{flex:1;padding:12px 16px 40px;display:flex;flex-direction:column;gap:14px;max-width:760px;width:100%;margin:0 auto}
#maker .sthead h2{font-size:clamp(24px,5vw,34px)}
#maker .sthead h2 b{color:var(--mag)}
.mklab{font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase}
.mkpanel{padding:14px;display:flex;flex-direction:column;gap:10px}
.mk input[type=text],.mk textarea{width:100%;font:17px/1.35 var(--body);color:var(--ink);background:rgba(var(--bgr),.78);border:1px solid var(--line);border-radius:8px;padding:12px;resize:vertical}
.mk input[type=text]:focus,.mk textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 16px rgba(var(--c1),.3)}
.mk ::placeholder{color:var(--muted)}
.mktop{display:flex;gap:14px;align-items:stretch}
.mkprev{width:110px;flex:none;aspect-ratio:1;border-radius:10px;overflow:hidden;position:relative;border:1px solid var(--edge)}
.mkprev .glyph{font-size:70px;opacity:1;filter:drop-shadow(0 0 16px rgba(var(--c1),.5));transform:none}
.mkfields{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.mkicons{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px;max-height:172px;overflow:auto;padding:2px}
.mkicons button{aspect-ratio:1;font-size:26px;border-radius:8px;background:var(--panel2);border:1px solid var(--line)}
.mkicons button[aria-pressed="true"]{border-color:var(--gold);box-shadow:var(--glowc);background:rgba(var(--c1),.16)}
.mkcolors{display:flex;gap:10px;flex-wrap:wrap}
.mkcolors button{width:44px;height:44px;border-radius:8px;border:2px solid transparent;background:linear-gradient(150deg,var(--a),var(--b))}
.mkcolors button[aria-pressed="true"]{border-color:#fff;box-shadow:0 0 14px var(--a)}
.mkq{padding:14px;display:flex;flex-direction:column;gap:8px}
.mkq.bad{border-color:rgba(var(--c4),.6)}
.mkq .qh{display:flex;justify-content:space-between;align-items:center}
.mkq .x{color:var(--muted);font-size:14px;padding:8px 4px}
.mk2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mk details summary{cursor:pointer;color:var(--muted);font-size:15px;padding:6px 0;list-style:none}
.mk details summary::before{content:"+ ";color:var(--gold)}
.mk details[open] summary::before{content:"\2212  "}
.mk details .mk2{margin-top:6px}
.mkadd{border:1px dashed rgba(var(--c1),.5);border-radius:10px;padding:16px;color:var(--gold);font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.1em;text-transform:uppercase;background:rgba(var(--c1),.04)}
.mkbar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:10px;padding:12px 14px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));background:rgba(var(--bgr),.92);border:1px solid var(--line);border-radius:10px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.mkbar .msg{flex:1;font-size:14px;color:var(--muted);min-width:0}
.mkbar .msg.bad{color:var(--bad)}
.mkbar .play{font-size:18px;padding:12px 26px;letter-spacing:.2em}
.mkbar .play::after{display:none}
.mkrows{display:flex;flex-direction:column;gap:10px}
.mkempty{color:var(--muted);text-align:center;padding:18px;font-size:15px}
.mknote{color:var(--muted);font-size:14px;margin:0}
@media (max-width:520px){.mk2{grid-template-columns:1fr}.mkprev{width:84px}.mkprev .glyph{font-size:52px}}
#printout{display:none}
@media print{
  body{background:#fff!important}
  body > *:not(#printout){display:none!important}
  #printout{display:block!important;color:#000;font:14pt/1.45 Georgia,serif;padding:0 8mm}
  #printout h1{font:700 22pt Arial,sans-serif;margin:0 0 4px}
  #printout .meta{font:11pt Arial,sans-serif;margin-bottom:14px}
  #printout ol{padding-left:22px}
  #printout li{margin:0 0 16px;break-inside:avoid}
  #printout .line{border-bottom:1px solid #000;height:26px;margin-top:4px}
  #printout .ch{font-size:12pt;margin-top:4px}
  #printout .key{break-before:page}
  #printout .key li{margin-bottom:6px}
}

/* Boot screen: once per session, tap to skip */
#boot{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .35s}
#boot.out{opacity:0;pointer-events:none}
#boot .bx{width:min(420px,86vw);font-family:var(--mono);color:var(--gold);font-size:14px;line-height:1.7;text-shadow:var(--glowc)}
#boot .bl{opacity:0;white-space:nowrap;overflow:hidden}
#boot .bl.on{opacity:1}
#boot .bl.ok{color:var(--good);text-shadow:0 0 12px rgba(var(--c3),.6)}
#boot .bar{margin-top:14px;height:4px;background:rgba(var(--c1),.12);border:1px solid var(--line)}
#boot .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--mag));box-shadow:var(--glowc);transition:width .2s linear}
#boot .sk{margin-top:18px;font-size:11px;color:var(--muted);letter-spacing:.2em}

/* ---------- v8: filter chips, cloud light, skins, public note ---------- */
.chips{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:2px 0 0;position:relative;z-index:3}
.chips button{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:7px 12px;border:1px solid var(--line);border-radius:4px;background:rgba(var(--pd),.5);transition:color .2s,border-color .2s,box-shadow .2s}
.chips button.on{color:var(--gold);border-color:var(--gold);box-shadow:var(--glowc);background:rgba(var(--c1),.1)}
.hudbar .led{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.hudbar .led.on{background:var(--good);box-shadow:0 0 8px rgba(var(--c3),.9)}
.hudbar .led.connecting{background:var(--gold);animation:blink .8s steps(2) infinite}
.hudbar .led.failed,.hudbar .led.off{background:var(--bad);box-shadow:0 0 8px rgba(var(--c4),.7)}
@keyframes blink{50%{opacity:.2}}
.skins{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:8px}
.skins button{padding:10px 4px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);display:flex;flex-direction:column;gap:6px;align-items:center}
.skins button i{display:block;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--sa) 0 50%,var(--sb) 50% 100%);box-shadow:0 0 12px var(--sa)}
.skins button b{font-family:var(--display);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.skins button[aria-pressed="true"]{border-color:var(--gold);box-shadow:var(--glowc)}
.setfoot{margin:0;text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted)}
.sheetlinks{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.pubnote{margin:0;padding:10px 12px;border:1px solid rgba(var(--c2),.5);border-radius:8px;background:rgba(var(--c2),.08);font-size:14px;color:var(--ink)}
.pubnote b{font-family:var(--mono);font-weight:400;color:var(--mag);letter-spacing:.16em;margin-right:6px}
@media (max-height:720px){.chips button{padding:5px 10px;font-size:11px}}
.retry{margin-top:10px;font-family:var(--mono);letter-spacing:.18em;color:var(--bad);text-shadow:0 0 10px rgba(var(--c4),.6);font-size:15px}

/* ---------- duels ---------- */
#duel{flex:1;padding:12px 16px 40px;width:100%;max-width:1100px;margin:0 auto}
#duel .dview{display:flex;flex-direction:column;gap:14px}
#dLobby,#dPick,#dWait{max-width:640px;margin:0 auto;width:100%}
#duel .sthead h2 b{color:var(--mag)}
.duelbtn{margin-top:4px;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;letter-spacing:.18em;color:var(--mag);padding:10px 16px;border-radius:6px;text-shadow:0 0 10px rgba(var(--c2),.5)}
.duelbtn .badge{min-width:22px;height:22px;border-radius:11px;background:var(--mag);color:#fff;font:700 13px/22px var(--display);text-align:center;padding:0 6px;box-shadow:var(--glowm);letter-spacing:0}
.djoin{display:flex;gap:10px}
.djoin input{flex:1;font-family:var(--mono)!important;font-size:24px!important;letter-spacing:.3em;text-transform:uppercase}
.djoin .play{font-size:18px;padding:10px 24px;letter-spacing:.2em}
.djoin .play::after{display:none}
.dsizes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dsizes button{padding:12px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.dsizes button[aria-pressed="true"]{border-color:var(--gold);box-shadow:var(--glowc);color:var(--gold)}
.dpicklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.dpick{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--edge);text-align:left}
.dpick .art{position:absolute;inset:0}
.dpick .art .glyph{font-size:64px}
.dpick .art .ttl{font-size:15px}
.dpick:focus-visible,.dpick:hover{box-shadow:var(--glowc);border-color:var(--gold)}
.dcodebox{padding:22px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.dbig{font-family:var(--mono);font-size:clamp(40px,12vw,64px);letter-spacing:.25em;color:var(--gold);text-shadow:var(--glowc);padding-left:.25em}
.dturn{font-family:var(--mono);font-size:12px;letter-spacing:.14em;white-space:nowrap}
.dturn.me{color:var(--good);border-color:var(--good)}
.dturn.them{color:var(--mag);border-color:var(--mag)}
.dfound{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--muted)}
.dfound b{color:#062A0C;background:var(--good);padding:4px 8px;border-radius:4px;letter-spacing:.1em;box-shadow:0 0 10px rgba(var(--c3),.6)}
.drow .stname span.me{color:var(--good)}
.drow .stname span.them{color:var(--mag)}
#dForfeit{font-size:12px;opacity:.7}
.dpick .art img ~ .ttl{display:block;background:linear-gradient(transparent,rgba(var(--bgr),.85));left:0;right:0;bottom:0;padding:18px 10px 8px}

/* ---------- v8.3: home actions + help ---------- */
.actions{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:420px}
.actions .playwrap{margin-top:0}
.act2{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.act{position:relative;display:flex;align-items:center;gap:10px;padding:10px 14px;min-height:56px;border-radius:10px;text-align:left;background:linear-gradient(135deg,rgba(var(--c2),.18),rgba(var(--pd),.6));border:1px solid var(--mag);box-shadow:var(--glowm);transition:transform .08s}
.act:active{transform:scale(.97)}
.act svg{width:26px;height:26px;flex:none;color:var(--mag)}
.act b{display:block;font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.12em;text-transform:uppercase;line-height:1}
.act small{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-top:3px}
.act.build{background:linear-gradient(135deg,rgba(var(--c3),.14),rgba(var(--pd),.6));border-color:rgba(var(--c3),.7);box-shadow:0 0 14px rgba(var(--c3),.35)}
.act.build svg{color:var(--good)}
.act .badge{position:absolute;top:-8px;right:-8px;min-width:24px;height:24px;border-radius:12px;background:var(--mag);color:#fff;font:700 14px/24px var(--display);text-align:center;padding:0 6px;box-shadow:var(--glowm);font-style:normal;animation:blink 1.2s steps(2) infinite}
.helpbtn{font-family:var(--display);font-weight:700;font-size:22px;color:var(--gold)}
.hsteps{display:flex;flex-direction:column;gap:12px}
.hstep{display:flex;gap:12px;align-items:flex-start}
.hstep i{flex:none;width:30px;height:30px;border-radius:6px;background:var(--gold);color:var(--gold-ink);display:grid;place-items:center;font:700 16px var(--display);font-style:normal}
.hstep.duel i{background:var(--mag);color:#fff}
.hstep.build i{background:var(--good);color:#062A0C}
.hstep b{display:block;font-family:var(--display);font-size:19px;text-transform:uppercase;letter-spacing:.06em}
.hstep span{color:var(--muted);font-size:15px;line-height:1.35}
.hnote{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--gold);text-transform:uppercase}
.hbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}
.hbtns .act{justify-content:center}
.hbtns .play{padding:10px;letter-spacing:.2em}
.hbtns .play::after{display:none}
@media (max-height:720px){.act{min-height:48px;padding:8px 12px}.act b{font-size:17px}.act small{display:none}.play .ps{display:none}}
@media (max-height:640px){.chips{display:none}}
.stbtns button.duelgo{border-color:var(--mag);color:var(--mag);box-shadow:var(--glowm)}
@media (min-width:860px) and (max-height:920px){.flow{height:clamp(230px,31vh,360px)}.logoframe{padding:8px 24px}}
.mkpic{display:flex;gap:10px;align-items:center}
.mkpicbtn{border:1px dashed rgba(var(--c1),.6);border-radius:8px;padding:12px 16px;color:var(--gold);font-weight:700;background:rgba(var(--c1),.05)}
.mkpic .x{color:var(--muted);font-size:14px}
.mknote.bad{color:var(--bad)}
.mkprev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mkprev{align-self:flex-start;cursor:pointer}.mkprev::after{content:"+ PICTURE";position:absolute;left:0;right:0;bottom:0;padding:4px 0;text-align:center;font:11px var(--mono);letter-spacing:.14em;color:var(--gold);background:rgba(var(--bgr),.7)}

/* ---------- Echo the parrot ---------- */
.echo{display:flex;align-items:center;gap:10px;width:100%;max-width:640px;min-height:52px}
.echo-av{flex:none;width:52px;height:52px;border-radius:50%;background:rgba(var(--pd),.8);border:1px solid rgba(var(--c2),.6);box-shadow:var(--glowm);display:grid;place-items:center;overflow:hidden}
.echo-av svg{width:44px;height:44px}
.echo-av img{width:100%;height:100%;object-fit:cover}
.echo-say{position:relative;flex:1;min-width:0;padding:9px 12px;border-radius:12px;background:rgba(var(--pd),.75);border:1px solid rgba(var(--c2),.45);font-size:15px;line-height:1.3;color:var(--ink);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.echo-say:empty{display:none}
.echo-say::before{content:"";position:absolute;left:-7px;top:50%;width:12px;height:12px;background:inherit;border-left:1px solid rgba(var(--c2),.45);border-bottom:1px solid rgba(var(--c2),.45);transform:translateY(-50%) rotate(45deg)}
.echo.pop .echo-say{animation:echopop .35s cubic-bezier(.2,1.4,.4,1)}
.echo.pop .echo-av{animation:echobob .5s ease-out}
@keyframes echopop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes echobob{30%{transform:rotate(-10deg) translateY(-3px)}60%{transform:rotate(6deg)}}
.echo-end{margin:0;font-style:italic;color:var(--mag)}
[data-skin="study"] .echo-av{background:#fff;border-color:var(--line);box-shadow:none}
[data-skin="study"] .echo-say{background:#fff;border-color:var(--line)}
[data-skin="study"] .echo-say::before{border-color:var(--line)}
.dlive{color:var(--good);letter-spacing:.1em}
.dopenrow span{display:flex;flex-direction:column}
.dopenrow small{font-weight:400;color:var(--muted);font-size:13px}
.drow.dopen{border-color:rgba(var(--c3),.45)}

/* ---------- Echo helper (Clippy-style) ---------- */
.helpbtn.echohead{padding:0;overflow:hidden;border-color:rgba(var(--c2),.7);box-shadow:var(--glowm);animation:echoidle 4s ease-in-out infinite}
.helpbtn.echohead svg{width:40px;height:40px}
@keyframes echoidle{0%,88%,100%{transform:none}92%{transform:rotate(-8deg)}96%{transform:rotate(6deg)}}
.echofab{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:25}
.echofab.lift{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.echobtn{width:62px;height:62px;border-radius:50%;padding:0;background:rgba(var(--pd),.92);border:2px solid var(--mag);box-shadow:var(--glowm),0 8px 24px rgba(0,0,0,.45);display:grid;place-items:center;animation:echoidle 4s ease-in-out infinite}
.echobtn .echo-av{width:56px;height:56px;border:0;box-shadow:none;background:none}
.echobtn .echo-av svg{width:50px;height:50px}
.echo-av{cursor:pointer}
.echotip{position:fixed;z-index:60;width:min(320px,calc(100vw - 24px));padding:14px 14px 12px;border-radius:14px;background:rgba(var(--pd),.97);border:1px solid var(--mag);box-shadow:var(--glowm),0 14px 40px rgba(0,0,0,.5);color:var(--ink);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.echotip.pop{animation:echopop .3s cubic-bezier(.2,1.4,.4,1)}
.echotip .x{position:absolute;top:6px;right:8px;font-size:22px;line-height:1;color:var(--muted);padding:4px 8px}
.echotip-name{display:block;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.2em;color:var(--mag);text-transform:uppercase;margin-bottom:4px}
.echotip p{margin:0 0 10px;font-size:16px;line-height:1.4;padding-right:18px}
.echotip-btns{display:flex;gap:6px;flex-wrap:wrap}
.echotip-btns button{padding:8px 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);font-weight:700;font-size:14px}
.echotip-btns button[data-t=close]{background:var(--gold);color:var(--gold-ink);border-color:var(--gold);margin-left:auto}
.echointro .in{align-items:stretch}
.ei-row{display:flex;gap:14px;align-items:center}
.ei-av{flex:none;width:96px;height:96px;border-radius:50%;border:2px solid var(--mag);box-shadow:var(--glowm);display:grid;place-items:center;background:rgba(var(--pd),.8);animation:echoidle 3s ease-in-out infinite}
.ei-av svg{width:84px;height:84px}
.ei-bubble{position:relative;flex:1;padding:14px;border-radius:14px;border:1px solid rgba(var(--c2),.55);background:rgba(var(--pd),.7)}
.ei-bubble.pop{animation:echopop .3s cubic-bezier(.2,1.4,.4,1)}
.ei-bubble h3{font-size:22px;margin-bottom:6px;text-transform:none}
.ei-bubble p{margin:0;font-size:16px;line-height:1.4}
.ei-dots{display:flex;gap:6px;justify-content:center}
.ei-dots i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.ei-dots i.on{background:var(--mag);box-shadow:var(--glowm)}
@media (max-width:420px){.ei-row{flex-direction:column;text-align:center}.ei-av{width:84px;height:84px}}
[data-skin="study"] .echobtn,[data-skin="study"] .echotip,[data-skin="study"] .ei-av,[data-skin="study"] .ei-bubble{background:#fff;border-color:var(--line);box-shadow:0 4px 14px rgba(15,23,42,.15)}
[data-skin="study"] .echotip-name{color:var(--gold)}
.rpbtns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rpbtns button{padding:14px 10px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);font-weight:700}
.rpbtns button:hover{border-color:var(--bad);color:var(--bad)}
#sReport{color:var(--bad)}
.mkaddrow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mkadd.paste{border-color:rgba(var(--c3),.6);color:var(--good)}
.mkex{margin:0;padding:10px;border-radius:8px;background:rgba(var(--bgr),.6);border:1px solid var(--line);font:13px/1.5 var(--mono);color:var(--muted);white-space:pre-wrap}
[data-skin="study"] .mkex{background:#F1F5F9}
.dendbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.dendbtns .play{padding:12px;letter-spacing:.14em}
.dendbtns .play::after{display:none}
.dendbtns .alt,.endbtns .alt.share{background:var(--panel2);border:1px solid var(--mag);color:var(--mag);font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.12em;text-transform:uppercase;border-radius:8px;padding:12px}
.drow.dopen.forme{border-color:var(--mag);box-shadow:var(--glowm)}
.drow.dopen.forme b{color:var(--mag)}

/* ---------- phone: one thing at a time (question, then board, then your words) ---------- */
@media (max-width:859px){
  #game .gmain,#dPlay .gmain{display:flex;flex-direction:column}
  #game .side,#dPlay .side{display:contents}
  #game .echo{order:1}
  #game .qcard,#dPlay .qcard{order:2}
  #game .boardcol,#dPlay .boardcol{order:3}
  #game .mine,#dPlay .mine{order:4}
  #dForfeit{order:5}
  /* question time: big question, board out of the way */
  #game[data-phase=q] .boardcol,#game[data-phase=q] .mine,
  #dPlay[data-phase=q] .boardcol,#dPlay[data-phase=q] .mine{display:none}
  #game[data-phase=q] .qtext,#dPlay[data-phase=q] .qtext{font-size:clamp(22px,6vw,28px);line-height:1.25}
  #game[data-phase=q] .qcard,#dPlay[data-phase=q] .qcard{padding:18px}
  /* drop time: short status strip on top, board as big as it fits */
  #game[data-phase=aim] .mine,#dPlay[data-phase=aim] .mine{display:none}
  #game[data-phase=aim] .qcard,#dPlay[data-phase=aim] .qcard{padding:10px 14px;gap:6px}
  #game[data-phase=aim] .status .big,#dPlay[data-phase=aim] .status .big{font-size:22px}
  #game[data-phase=aim] .status p,#dPlay[data-phase=aim] .status p{margin:2px 0 0;font-size:14px}
  #game[data-phase=aim] .board,#dPlay[data-phase=aim] .board{width:min(100%,calc(100svh - 290px))}
  #game[data-phase=aim] .echo{display:none}
  /* computer's / friend's turn: your words big so you can watch */
  #game[data-phase=cpu] .boardcol,#dPlay[data-phase=wait] .boardcol{display:none}
  #game[data-phase=cpu] .mine,#dPlay[data-phase=wait] .mine{flex-direction:column;align-items:stretch}
  #game[data-phase=cpu] .board.mini,#dPlay[data-phase=wait] .board.mini{width:min(82vw,330px)!important;height:min(82vw,330px);align-self:center;gap:3px;padding:6px}
  .echo-av{width:44px;height:44px}
  .echo-av svg{width:38px;height:38px}
  .echo-say{font-size:14px;padding:7px 10px}
}

/* ---------- v8.7 home: Play now + tap-to-play grid ---------- */
#home{overflow:visible;gap:10px;padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
.hero{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:4px}
.hero .playwrap{align-self:stretch}
.hero .play{width:100%;padding:14px 20px;font-size:30px}
.shelfhead{width:100%;max-width:1100px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;border-top:1px solid var(--line);padding-top:14px}
.shelfhead h2{font-size:clamp(18px,4.6vw,24px);text-transform:uppercase;letter-spacing:.06em;margin:0}
.sizetog{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex:none;background:var(--panel)}
.sizetog button{min-height:44px;padding:0 16px;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sizetog button[aria-pressed=true]{background:var(--gold);color:var(--gold-ink)}
.shelf{width:100%;max-width:1100px;display:flex;flex-direction:column;gap:18px}
.shsec h3{font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 8px;font-weight:400}
.shsec h3 span{color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.tile{position:relative}
.tgo{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;padding:0;transition:transform .08s}
.tgo:active{transform:scale(.97)}
.tgo .art{position:relative;display:grid;width:100%;aspect-ratio:1;border-radius:12px;overflow:hidden;border:1px solid var(--edge);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.tgo .art .glyph{font-size:clamp(64px,18vw,96px);opacity:1;filter:saturate(1.05) drop-shadow(0 0 18px rgba(var(--c1),.5));transform:none}
.tgo .art .shade{opacity:.35}
.tgo .art img + .shade{opacity:.15}
@media (hover:hover){.tgo:hover .art{border-color:var(--gold);box-shadow:var(--glowc)}}
.tgo:focus-visible .art{outline:3px solid var(--gold);outline-offset:2px}
.tname{font-family:var(--display);font-weight:700;font-size:16px;line-height:1.15;text-transform:uppercase;letter-spacing:.03em;padding:0 2px;overflow-wrap:anywhere}
.tstars{padding:0 2px}.tstars svg{width:16px;height:16px}
.tlast{position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;background:var(--gold);color:var(--gold-ink);padding:3px 6px;border-radius:4px}
.tmore{position:absolute;top:6px;right:6px;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(var(--bgr),.72);border:1px solid var(--line);color:var(--ink);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tmore svg{width:20px;height:20px}
.tile.flash .art{animation:tflash 1.4s ease-out 1}
@keyframes tflash{0%,40%{box-shadow:0 0 0 4px var(--gold),var(--glowc)}100%{box-shadow:0 10px 26px rgba(0,0,0,.45)}}
.tile.tear .art{animation:tear .34s steps(3) 1}
.shsec .more{margin-top:10px;width:100%}
@media (max-width:520px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .logoframe{padding:8px 22px}.micro{display:none}
  .brand .tagline{font-size:12px}
  .hero .play{font-size:26px}
}
[data-skin=study] .tgo .art{box-shadow:none}
@media (max-width:420px){.shelfhead h2{font-size:17px;white-space:nowrap}.sizetog button{padding:0 12px}}
.dmove{width:100%;margin-top:6px;font-size:14px;letter-spacing:.06em;text-transform:none}
.mvstep{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--line);border-radius:10px;background:rgba(var(--pd),.35)}
.mvstep b{font-family:var(--display);font-size:17px;text-transform:uppercase;letter-spacing:.08em}
.mvstep span{color:var(--muted);font-size:15px}
.mvbig{font-family:var(--mono);font-size:40px;letter-spacing:.3em;text-align:center;color:var(--gold);padding:6px 0}
.mvstep .djoin{display:flex;gap:8px;width:100%}
.mvstep .djoin input{flex:1;min-width:0;width:auto}
.mvstep .djoin .play{flex:none;font-size:16px;letter-spacing:.1em;padding:10px 16px 10px 20px;animation:none}