:root{--g:#ff2fd6;--y:#22e4ff;--x:#2a2a40;--t:56px;--gap:5px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;overflow:hidden}
body{color:#fff;font-family:'Bungee',system-ui,sans-serif;display:flex;flex-direction:column;height:100vh;height:100dvh;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;touch-action:manipulation;cursor:pointer}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
#flash{position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;mix-blend-mode:screen}
#flash.go{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.8;background:radial-gradient(circle,#fff,#f0f 40%,#0ff 70%,transparent)}100%{opacity:0}}
header,main,footer{position:relative;z-index:2}

/* HUD */
#hud{display:flex;align-items:center;gap:8px;padding:10px 10px 4px;font-family:'Press Start 2P',monospace;font-size:10px;max-width:520px;width:100%;margin:0 auto}
#pips{display:flex;gap:6px;min-width:58px}
.pip{width:13px;height:13px;transform:rotate(45deg);border:2px solid #666}
.pip.now{border-color:#fff;animation:pipPulse .45s ease-in-out infinite alternate;background:#f0f}
.pip.won{background:var(--g);border-color:var(--g);box-shadow:0 0 8px var(--g)}
.pip.lost{background:#ff2a4d;border-color:#ff2a4d}
@keyframes pipPulse{to{background:#0ff;box-shadow:0 0 10px #0ff}}
#score{flex:1;text-align:center;font-size:17px;letter-spacing:1px;white-space:nowrap}
#score small{font-size:9px;opacity:.75;-webkit-text-fill-color:#fff}
.cycle{background:linear-gradient(90deg,#ff3df2,#3dfcff,#fff83d,#7dff3d,#ff3df2);background-size:400% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:slide 2.5s linear infinite}
@keyframes slide{to{background-position:400% 0}}
#spare{display:flex;gap:3px;align-items:center;min-width:44px;justify-content:flex-end}
#spare i{width:16px;height:6px;border:1.5px dashed #3dfcff;border-radius:2px;box-shadow:0 0 6px #3dfcff}
#spare.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.7)}}
#mute{background:rgba(255,47,214,.2);border:2px solid #fff;color:#fff;border-radius:999px;font-size:18px;line-height:1;padding:6px 10px;min-width:46px;font-family:system-ui,sans-serif;box-shadow:0 0 12px #ff2fd6,inset 0 0 4px rgba(255,255,255,.5)}
#mute:active{transform:scale(.9)}
#mute.off{background:rgba(255,255,255,.08);border-color:#fff83d;box-shadow:0 0 12px #fff83d;animation:nudge 2.4s ease-in-out infinite}

/* Board */
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:0}
#label{font-family:'Press Start 2P',monospace;font-size:9px;letter-spacing:1px;margin-bottom:6px;height:12px;text-align:center}
#clock{font-family:'Press Start 2P',monospace;font-size:8px;letter-spacing:1px;margin-bottom:8px;height:12px;text-align:center;color:#9fe}
#clock.late{color:#ff4d6d;text-shadow:0 0 6px #ff2a4d;animation:tick 1s steps(2) infinite}
@keyframes tick{50%{opacity:.7}}
#grid{display:flex;flex-direction:column;gap:var(--gap);perspective:600px}
#grid.warpout{transition:transform .7s ease-in,opacity .7s,filter .7s;transform:scale(3.2) rotate(35deg);opacity:0;filter:blur(6px) hue-rotate(200deg)}
#grid.warpin{animation:warpin .8s cubic-bezier(.2,1.5,.4,1)}
@keyframes warpin{0%{transform:scale(.02) rotate(-260deg);opacity:0;filter:hue-rotate(180deg) blur(4px)}60%{opacity:1}100%{transform:none;filter:none}}
#grid.party{animation:party .35s linear infinite}
@keyframes party{0%{filter:hue-rotate(0) drop-shadow(0 0 12px #f0f)}50%{transform:scale(1.04)}100%{filter:hue-rotate(360deg) drop-shadow(0 0 12px #0ff)}}
#grid.dim{filter:grayscale(.85) brightness(.65);transition:filter .8s}
.row{display:flex;gap:var(--gap);position:relative}
.row.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.bot-ico{position:absolute;left:calc(-1 * var(--t) * .62 - 6px);top:50%;width:calc(var(--t) * .62);height:calc(var(--t) * .62);transform:translateY(-50%)}
.chain-ico{position:absolute;right:calc(-1 * var(--t) * .5 - 6px);top:50%;transform:translateY(-50%);font-family:'Press Start 2P',monospace;font-size:8px;color:#3dfcff;text-shadow:0 0 6px #3dfcff;writing-mode:vertical-rl}
.row.bot .tile{opacity:.88}
.row.bot .tile::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 2px,transparent 2px 4px);pointer-events:none;border-radius:3px}
.tile{position:relative;width:var(--t);height:var(--t);display:flex;align-items:center;justify-content:center;font-size:calc(var(--t) * .52);line-height:1;text-transform:uppercase;border:2px solid rgba(255,255,255,.28);background:rgba(8,8,22,.78);color:#fff;border-radius:5px;transition:box-shadow .2s,border-color .2s}
.tile.filled{border-color:#fff;animation:pop .12s;box-shadow:0 0 10px rgba(255,255,255,.45)}
@keyframes pop{50%{transform:scale(1.14)}}
.tile.g{background:var(--g);border-color:#ffd0f6;color:#2a0020;box-shadow:0 0 16px var(--g),inset 0 -4px 0 rgba(0,0,0,.18)}
.tile.y{background-color:var(--y);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0 5px,transparent 5px 11px);border-color:#c9f8ff;color:#002a33;box-shadow:0 0 16px var(--y),inset 0 -4px 0 rgba(0,0,0,.18)}
.tile.x{background:var(--x);border-color:#4a4a66;color:#c9cae0}
.row.spare .tile:not(.g):not(.y):not(.x):not(.filled){border:2px dashed #b07cff;box-shadow:0 0 10px rgba(176,124,255,.55)}
.row.current .tile:not(.filled){border-color:rgba(255,255,255,.55);animation:breathe 1.2s ease-in-out infinite}
@keyframes breathe{50%{border-color:#b07cff;box-shadow:0 0 8px #b07cff}}
/* fits / clash while typing */
.row.fits .tile.filled{border-color:#fff;animation:fits .5s linear infinite}
@keyframes fits{0%{box-shadow:0 0 14px #ff3df2,0 0 2px #fff inset}33%{box-shadow:0 0 18px #3dfcff,0 0 2px #fff inset}66%{box-shadow:0 0 14px #fff83d,0 0 2px #fff inset}100%{box-shadow:0 0 14px #ff3df2,0 0 2px #fff inset}}
.tile.clash{border-color:#ff2a4d!important;color:#ff9aaa;box-shadow:0 0 12px #ff2a4d!important;animation:sour .28s steps(2) infinite!important}
@keyframes sour{50%{transform:translateY(1px) skewX(-4deg);opacity:.75}}
.flip{animation:flip var(--fd,320ms) ease-in-out!important}
@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}100%{transform:rotateX(0)}}

#how{position:relative;font-family:'Press Start 2P',monospace;font-size:8px;color:#9aa;text-align:center;line-height:1.7;padding-top:7px}
#how summary{cursor:pointer;list-style:none;opacity:.75}
#how summary::-webkit-details-marker{display:none}
#how p{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);width:min(320px,88vw);z-index:6;background:rgba(0,0,0,.92);padding:10px;border-radius:8px;border:1px solid #444;text-align:left;margin:0}

/* Keyboard */
#kb{padding:4px 4px 10px;max-width:520px;width:100%;margin:0 auto}
.kr{display:flex;justify-content:center}
.key{flex:1;height:52px;margin:3px 2.5px;border-radius:7px;background:rgba(38,38,72,.88);color:#fff;font-size:17px;border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;text-transform:uppercase;padding:0;transition:transform .06s}
.key.wide{flex:1.55;font-size:10px;font-family:'Press Start 2P',monospace}
.key:active,.key.hit{transform:scale(.9);background:#ff3df2;color:#000}
.key.g{background:var(--g);color:#2a0020;border-color:var(--g)}
.key.y{background-color:var(--y);background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0 5px,transparent 5px 11px);color:#002a33;border-color:var(--y)}
.key.x{background:#15151f;color:#55556a;border-color:#222}
.half{flex:.5}

/* Floating text */
#floats{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.fl{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;text-align:center;font-family:'Bungee',sans-serif}
.fl .tx{position:relative;display:inline-block;color:#fff;-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:3px 3px 0 #ff3df2,-3px -3px 0 #3dfcff,0 0 22px #fff;animation:hue .5s linear infinite}
.fl .sub{display:block;font-family:'Press Start 2P',monospace;font-size:11px;margin-top:8px;color:#fff83d;text-shadow:0 0 8px #f0f}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.fl.burst{animation:burstIn 1.7s ease-out forwards}
@keyframes burstIn{0%{transform:translate(-50%,-50%) scale(0) rotate(-40deg);opacity:0}14%{transform:translate(-50%,-50%) scale(1.4) rotate(8deg);opacity:1}28%{transform:translate(-50%,-50%) scale(1) rotate(-4deg)}78%{opacity:1;transform:translate(-50%,-62%) scale(1.04) rotate(0)}100%{opacity:0;transform:translate(-50%,-95%) scale(1.25)}}
.fl.drift{animation:drift 1.5s ease-out forwards}
@keyframes drift{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-170%) scale(1)}}
.fl.wave .tx span{display:inline-block;animation:wobble .6s ease-in-out infinite alternate}
@keyframes wobble{from{transform:translateY(-6px) rotate(-6deg)}to{transform:translateY(6px) rotate(6deg)}}
.star{position:absolute;left:50%;top:50%;z-index:-1;background:conic-gradient(#ff0040,#ffd400,#1dff6a,#3dfcff,#3d5bff,#ff3df2,#ff0040);animation:spin 1.1s linear infinite;opacity:.95;filter:drop-shadow(0 0 10px #fff)}
@keyframes spin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.rain{position:absolute;top:-90px;animation:rain linear forwards}
@keyframes rain{to{transform:translateY(115vh) rotate(720deg)}}

/* Overlay screens */
#ov{position:fixed;inset:0;z-index:6;display:none;flex-direction:column;align-items:center;justify-content:safe center;overflow-y:auto;text-align:center;padding:20px;background:radial-gradient(circle at 50% 40%,rgba(30,0,50,.8),rgba(0,0,0,.92));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);touch-action:manipulation}
#ov.show{display:flex}
.logo{font-size:min(15vw,72px);line-height:.95;letter-spacing:1px;background:linear-gradient(180deg,#fff 0%,#aef 28%,#ff3df2 49%,#2a0030 50%,#ffd400 72%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px #ff3df2) drop-shadow(3px 4px 0 #000);animation:hue 5s linear infinite}
.n3k{position:relative;display:inline-block;font-size:min(24vw,120px);line-height:1;margin:8px 0 6px;color:#fff;-webkit-text-stroke:3px #000;paint-order:stroke fill;text-shadow:5px 5px 0 #ff3df2,-5px -5px 0 #3dfcff;animation:throb .9s ease-in-out infinite}
@keyframes throb{50%{transform:scale(1.08) rotate(-2deg)}}
.small{font-family:'Press Start 2P',monospace;font-size:10px;line-height:1.8;color:#cfe;max-width:330px;margin:6px auto}
.blink{animation:blink .8s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.btn{font-size:18px;padding:14px 26px;border-radius:999px;border:3px solid #fff;background:linear-gradient(90deg,#ff3df2,#3dfcff);color:#000;margin:7px;box-shadow:0 0 18px #ff3df2,4px 4px 0 #000;animation:bob 1.2s ease-in-out infinite}
.btn:active{transform:scale(.94)}
.btn.alt{background:linear-gradient(90deg,#1dff6a,#fff83d);font-size:14px;padding:10px 20px;animation:none}
.btn.gold{background:#ffcc00;font-size:14px;padding:10px 20px;animation:none;display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:#000}
.btn.gold img{width:26px;height:26px}
.btn.ghost{background:transparent;color:#fff;font-size:11px;padding:8px 16px;border-width:2px;box-shadow:none;animation:none;font-family:'Press Start 2P',monospace}
@keyframes bob{50%{transform:translateY(-4px)}}
.bigbot{width:84px;height:84px;animation:botbob 1.4s ease-in-out infinite}
@keyframes botbob{50%{transform:translateY(-8px) rotate(6deg)}}
.final{font-size:min(14vw,64px);margin:4px 0;line-height:1}
.final small{font-size:.35em}
.recap{font-family:'Press Start 2P',monospace;font-size:10px;line-height:2.1;margin:8px 0;color:#fff}
.recap .mini{display:inline-flex;gap:2px;vertical-align:middle;margin:0 6px}
.recap .mini i{width:12px;height:12px;border-radius:2px;display:inline-block}
.btns{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:8px}
#copied{font-family:'Press Start 2P',monospace;font-size:9px;color:#1dff6a;height:14px}
#sharebox{display:none;width:280px;height:110px;font-size:12px;margin-top:6px}

/* sound prompt */
.speaker{position:relative;width:110px;height:110px;display:flex;align-items:center;justify-content:center;font-size:56px;flex:none}
.speaker span{animation:throb .5s ease-in-out infinite}
.speaker i{position:absolute;inset:0;border:3px solid #3dfcff;border-radius:50%;animation:ring 1.5s ease-out infinite;opacity:0}
.speaker i:nth-of-type(2){animation-delay:.5s;border-color:#ff3df2}
.speaker i:nth-of-type(3){animation-delay:1s;border-color:#fff83d}
@keyframes ring{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.9);opacity:0}}
#sndt.nudge{animation:nudge 1.8s ease-in-out infinite;border-color:#fff83d;color:#fff83d}
@keyframes nudge{0%,100%{transform:none}8%{transform:rotate(-4deg) scale(1.06)}16%{transform:rotate(4deg) scale(1.06)}24%{transform:none}}
#ov>*{flex:none}
@media (prefers-reduced-motion:reduce){.fl .tx,.logo,.n3k,.btn,.star,#grid.party{animation-duration:3s!important}}

/* tap to update */
.upd{position:fixed;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.updcard{text-align:center;padding:22px 18px 16px;border-radius:22px;max-width:340px;background:radial-gradient(circle at 50% 0%,rgba(80,0,110,.95),rgba(10,0,25,.96));border:3px solid #fff;box-shadow:0 0 26px #ff3df2,6px 6px 0 #3dfcff;animation:updIn .7s cubic-bezier(.2,1.5,.4,1)}
@keyframes updIn{from{transform:scale(.1) rotate(-200deg);opacity:0}to{transform:none;opacity:1}}
.updbot{position:relative;width:96px;height:96px;margin:0 auto 6px;animation:botbob 1.4s ease-in-out infinite}
.updbot img{width:96px;height:96px}
.updbot span{position:absolute;right:-14px;bottom:2px;font-size:40px;transform-origin:20% 80%;animation:spanner .5s ease-in-out infinite alternate}
@keyframes spanner{from{transform:rotate(-25deg)}to{transform:rotate(20deg)}}

/* raver GuffBot */
.raver{position:relative;display:inline-block;width:calc(var(--s) * 1.8);height:calc(var(--s) * 1.55);flex:none;animation:rvbob .46875s ease-in-out infinite alternate}
@keyframes rvbob{to{transform:translateY(-4%)}}
.rv-back,.rv-front{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rv-back{filter:drop-shadow(0 0 5px #ff2fd6) drop-shadow(0 0 5px #8cff3d)}
.rv-head{position:absolute;left:22.22%;top:29.03%;width:55.56%;height:auto}
.rv-arm path{fill:none;stroke:#c9d0dc;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
.rv-arm circle{fill:#c9d0dc}
.rv-l{transform-box:view-box;transform-origin:54px 104px;animation:armL .9375s ease-in-out infinite alternate}
.rv-r{transform-box:view-box;transform-origin:126px 104px;animation:armR .9375s ease-in-out infinite alternate}
@keyframes armL{from{transform:rotate(-14deg)}to{transform:rotate(9deg)}}
@keyframes armR{from{transform:rotate(14deg)}to{transform:rotate(-9deg)}}
.rv-flash{mix-blend-mode:screen;animation:siren .46875s ease-out infinite}
@keyframes siren{0%{opacity:1}60%{opacity:.15}100%{opacity:.05}}
.xmas .rv-hat{display:none}
.bigraver{margin-bottom:-6px}
.dancer{position:fixed;left:4px;bottom:calc(var(--kbh,190px) + 4px);z-index:5;pointer-events:none;animation:dancerIn 2.5s ease-out forwards}
@keyframes dancerIn{0%{transform:translateY(130%) rotate(-20deg)}14%{transform:translateY(-6%) rotate(4deg)}22%{transform:none}84%{transform:none;opacity:1}100%{transform:translateY(130%);opacity:0}}
@media (prefers-reduced-motion:reduce){.raver,.rv-l,.rv-r,.rv-flash{animation-duration:2s!important}}

/* hint and bonus chance */
#tools{display:flex;align-items:flex-start;justify-content:center;gap:14px;margin-top:10px}
#hint{font-family:'Press Start 2P',monospace;font-size:8px;color:#fff83d;background:rgba(255,248,61,.08);border:2px solid #fff83d;border-radius:999px;padding:6px 10px;box-shadow:0 0 8px rgba(255,248,61,.45)}
#hint small{font-size:7px;opacity:.8}
#hint:disabled{opacity:.3;box-shadow:none}
#hint:not(:disabled):active{transform:scale(.92)}
.tile[data-ghost]:not(.filled)::before{content:attr(data-ghost);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--g);opacity:.5;text-shadow:0 0 12px var(--g)}
.tile.hintflash{animation:hintflash .9s ease-out}
@keyframes hintflash{30%{border-color:var(--g);box-shadow:0 0 26px var(--g)}}
.bonusbot{position:fixed;left:50%;top:56%;z-index:5;pointer-events:none;animation:bonusIn 2.3s ease-out forwards}
@keyframes bonusIn{0%{transform:translate(-50%,-50%) scale(0) rotate(-30deg);opacity:0}18%{transform:translate(-50%,-50%) scale(1.15) rotate(6deg);opacity:1}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{transform:translate(-50%,-80%) scale(.9);opacity:0}}

/* first-play prompt */
.coach{position:fixed;inset:0;z-index:7;display:flex;align-items:flex-end;justify-content:center;padding:18px 18px max(18px,env(safe-area-inset-bottom));background:linear-gradient(transparent 30%,rgba(0,0,0,.6));animation:coachin .35s ease-out}
.coach-card{width:min(340px,92vw);background:rgba(12,0,24,.94);border:3px solid #fff;border-radius:18px;padding:18px 16px 10px;text-align:center;box-shadow:0 0 26px #ff3df2,0 0 60px rgba(34,228,255,.35);color:#fff;font-family:'Press Start 2P',monospace}
.coach-h{font-size:20px;line-height:1.35;background:linear-gradient(90deg,#ff3df2,#3dfcff,#fff83d,#ff3df2);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:coachcycle 3s linear infinite;margin-bottom:12px}
.coach-card p{font-family:system-ui,sans-serif;font-size:15px;line-height:1.45;margin:8px 0;color:#e8e8ff}
.coach-key{display:grid;gap:8px;margin:12px auto;text-align:left;width:max-content;max-width:100%}
.coach-key>div{display:flex;align-items:center;gap:10px;font-family:system-ui,sans-serif;font-size:14px}
.coach-key .tile{width:34px;height:34px;font-size:16px;flex:none;display:flex;align-items:center;justify-content:center;border:2px solid;border-radius:6px;font-family:'Press Start 2P',monospace}
@keyframes coachin{from{opacity:0;transform:scale(.92)}}
@keyframes coachcycle{to{background-position:300% 0}}
/* The guff bar (5 Nov 2026). Its gold "all games" footer would push the playfield about, and the title and
   final score already carry ALL GAMES, so it stays hidden here; the home-screen tab and the bar itself still show. */
#guff-foot{display:none!important}
.guffbar-slot{width:min(460px,100%);margin:6px auto 0;text-align:left}
/* Home-screen app (5 Nov 2026 rule: every game's home-screen version has a visible way to all the games).
   The bar's corner tab would land on the keyboard here, so GuffBot's gold button sits in the top bar instead. */
#hubtab{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;flex:none;border-radius:50%;background:#ffd23f;border:2px solid #fff;box-shadow:0 0 10px #ffd23f}
#hubtab[hidden]{display:none}
#hubtab img{width:26px;height:26px;display:block}
.homeapp .gxb-tab{display:none!important}