:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}#arena,#arena *{touch-action:manipulation}#arena canvas{touch-action:none}#arena button:active{transform:translateY(1px)}.allgames{text-align:left;margin:10px auto 18px;max-width:1100px;background:var(--paper,#FFFDF6);border:3px solid #1D1A2F;border-radius:14px;padding:10px 16px;color:var(--tx)}.allgames summary{cursor:pointer;font-weight:800}.allcols{columns:4 200px;column-gap:24px}.allcols div{break-inside:avoid;margin-bottom:10px}.allcols h4{margin:10px 0 4px}.allcols ul{margin:0;padding-left:18px;font-size:14px}

:root{
  --sun:#FFD23F; --sun2:#FFE27A; --ink:#1D1A2F; --paper:#FFFDF6; --muted:#5A5470;
  --red:#F2352A; --red-d:#B81E16; --sky:#7FC8F8; --mint:#6EE7B7; --pink:#FF8FB1;
  --lilac:#B9A7FF; --orange:#FF9F43; --green:#2BB673;
  --display:"Bagel Fat One","Arial Rounded MT Bold",system-ui,sans-serif;
  --body:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
  --line:var(--ink); --onbg:var(--ink); --onfg:var(--sun); --bg:var(--sun); --tx:var(--ink);
}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.45}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--line);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:16px;padding-block:20px 72px}

/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;gap:8px}
.logo svg{width:58px;height:58px}
.wordmark{font:900 40px/1 'Arial Black','Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:-.06em;color:#161616}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--paper);border:3px solid var(--line);border-radius:10px;box-shadow:3px 3px 0 var(--line);padding:8px 14px;font-weight:800;cursor:pointer;transition:transform .06s,box-shadow .06s;white-space:nowrap;color:var(--tx)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--line)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--line)}
.btn.primary{background:var(--red);color:#fff}
.btn.on{background:var(--onbg);color:var(--onfg)}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:24px;padding-block:28px 36px}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,6.4vw,80px);line-height:.92;margin:0 0 16px;text-wrap:balance}
.hero p{font-size:19px;max-width:34ch;margin:0 0 8px}
.hero small{color:var(--muted);font-weight:600}
.press{display:flex;flex-direction:column;align-items:center;gap:14px}
#rndMode button{font-size:13px}
.big{width:min(440px,72vw);background:none;border:0;padding:0;cursor:pointer;transform:translateY(-6px) rotate(-2deg);transition:transform .08s;-webkit-tap-highlight-color:transparent}
/* the sign's shadow is drawn inside the SVG (.bigsh): a CSS drop-shadow on a rotating element left a seam in Safari after hover */
.big .bigsh{fill:#1D1A2F;transition:transform .08s}
.big svg{display:block;width:100%;height:auto}
.big:hover{transform:translateY(-9px) rotate(-3deg)}
.big:active,.big.down{transform:translateY(4px) rotate(-3deg)}.big:active .bigsh,.big.down .bigsh{transform:translateY(2px)}
.big.squish{animation:squish .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes squish{0%{transform:translateY(-6px) rotate(-3deg)}25%{transform:translateY(6px) rotate(-3deg) scale(1.1,.8);filter:drop-shadow(0 1px 0 #1D1A2F)}55%{transform:translateY(-12px) rotate(-5deg) scale(.94,1.08)}80%{transform:translateY(-4px) rotate(-2deg) scale(1.02,.98)}100%{transform:translateY(-6px) rotate(-3deg)}}
.dcount{font-weight:800;font-size:14px}
.spin{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(29,26,47,.55);animation:spinin .15s}
.spin.out{opacity:0;transition:opacity .17s}
@keyframes spinin{from{opacity:0}}
.spinbox{background:var(--sun,#FFD23F);border:4px solid #1D1A2F;border-radius:18px;box-shadow:8px 8px 0 #1D1A2F;padding:16px 18px 14px;width:min(320px,86vw);text-align:center;color:var(--tx)}
.spinlbl{font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:12px}
.reel{position:relative;margin:10px 0 8px;border:4px solid #1D1A2F;border-radius:12px;background:#1D1A2F;overflow:hidden;height:210px}
.reel .pin{position:absolute;left:50%;top:-2px;width:0;height:0;border:12px solid transparent;border-top:16px solid #F2352A;transform:translateX(-50%);z-index:2}
.rcard{position:absolute;inset:0;display:flex;flex-direction:column}
.rcard svg{flex:1;width:100%;display:block}
.rcard b{display:block;background:#FFFDF6;border-top:3px solid #1D1A2F;padding:8px;font-size:18px;color:var(--tx)}
.rcard.tick{animation:tick .08s ease-out}
@keyframes tick{from{transform:translateY(-36%)}to{transform:none}}
.rcard.land{animation:land .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes land{0%{transform:translateY(-30%)}60%{transform:scale(1.06)}100%{transform:none}}
.spin.landed .spinbox{animation:pop .4s cubic-bezier(.3,1.8,.5,1)}
@keyframes pop{50%{transform:scale(1.06) rotate(-1deg)}}
.spinsub{font-weight:900;font-size:18px}
@media (prefers-reduced-motion:reduce){.big.squish,.rcard.tick,.rcard.land,.spin.landed .spinbox{animation:none}}
.plate{font-family:Overpass,var(--mono);font-weight:900;font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:var(--onbg);color:var(--onfg);padding:6px 12px;border-radius:6px}

/* filters + grid */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.mobtog{border:3px solid var(--line);border-radius:10px;background:var(--paper);padding:5px 12px 5px 8px;font-weight:800;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;box-shadow:2px 2px 0 var(--line);color:var(--tx)}.mobtog i{width:30px;height:18px;border-radius:99px;background:#cfcabb;position:relative;transition:background .15s;color:var(--tx)}.mobtog i::after{content:'';position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s;color:var(--tx)}.mobtog.on i{background:#2BB673;color:var(--tx)}.mobtog.on i::after{transform:translateX(12px)}.mobnote{grid-column:1/-1;font-size:14px;opacity:.75;margin:-4px 0 4px}.mobnote button{all:unset;cursor:pointer;text-decoration:underline;font-weight:700}.pcbadge{position:absolute;right:8px;bottom:8px;background:rgba(29,26,47,.85);color:#fff;font:800 11px/1 system-ui,sans-serif;padding:4px 7px;border-radius:99px;pointer-events:none}.presspc{margin-top:8px}
.filters h2{font-family:var(--display);font-weight:400;font-size:30px;margin:0 12px 0 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.tile{display:flex;flex-direction:column;text-align:left;background:var(--paper);border:3px solid var(--line);border-radius:14px;box-shadow:5px 5px 0 var(--line);padding:0;cursor:pointer;overflow:hidden;transition:transform .08s,box-shadow .08s;color:var(--tx)}
.tile:hover{transform:translate(-2px,-2px) rotate(-.4deg);box-shadow:7px 7px 0 var(--line)}
.tile:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--line)}
.tile .art{height:104px;border-bottom:3px solid var(--line);display:grid;place-items:center}
.tile .art svg{width:120px;height:72px}
.tile .txt{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.tile b{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.05}
.tile span{color:var(--muted);font-size:14px}
.tile .meta{margin-top:auto;padding-top:8px;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.tile .meta em{font-style:normal;background:var(--sun2);border:2px solid var(--line);border-radius:6px;padding:1px 8px;color:var(--tx)}
footer{margin-top:48px;color:var(--muted);font-size:14px;text-align:center}

/* stage */
#stage{position:fixed;inset:0;z-index:20;background:var(--bg);overflow:auto;padding-bottom:env(safe-area-inset-bottom,0px)}
.sbar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;background:var(--bg);border-bottom:3px solid var(--line)}
.sbar h3{font-family:var(--display);font-weight:400;font-size:26px;margin:0;flex:1;min-width:120px}
.stat{font-family:var(--mono);font-weight:700;font-size:14px;background:var(--onbg);color:var(--onfg);padding:6px 12px;border-radius:8px;font-variant-numeric:tabular-nums}
.stat:empty{display:none}
.arena{max-width:600px;margin:0 auto;padding-inline:16px;padding-block:20px 40px;display:flex;flex-direction:column;align-items:center;gap:14px}
.hint{color:var(--muted);font-size:14px;text-align:center;margin:0;max-width:44ch}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.board{display:block;max-width:100%;height:auto;border:3px solid var(--line);border-radius:12px;background:var(--paper);touch-action:none;box-shadow:5px 5px 0 var(--line);color:var(--tx)}

.dpad{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,48px);gap:6px}
.dpad button{border:3px solid var(--line);border-radius:10px;background:var(--paper);font-weight:800;font-size:18px;cursor:pointer;touch-action:manipulation;color:var(--tx)}
.dpad button:active{background:var(--ink);color:var(--paper)}
@media (hover:hover) and (pointer:fine){.dpad{display:none}}
.g2048 div.pop{animation:pop .15s}
@keyframes pop{50%{transform:scale(1.12)}}

/* mines */
.mines{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;width:min(100%,430px)}
.mines button{aspect-ratio:1;border:2px solid var(--line);border-radius:6px;background:var(--sky);font:700 clamp(14px,4.5vw,20px) var(--mono);cursor:pointer;padding:0;touch-action:manipulation;color:var(--tx)}
.mines button.open{background:var(--paper);cursor:default;color:var(--tx)}
.mines button.boom{background:var(--red);color:#fff}

/* memory */
.memo{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(100%,430px)}
.mcard .in{position:relative;display:block;width:100%;height:100%;transition:transform .35s;transform-style:preserve-3d}
.mcard.up .in{transform:rotateY(180deg)}
.mcard .f,.mcard .b{position:absolute;inset:0;border:3px solid var(--line);border-radius:10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;font-size:clamp(26px,8vw,44px)}
.mcard .b{background:var(--lilac) repeating-linear-gradient(45deg,transparent 0 8px,rgba(29,26,47,.12) 8px 11px);color:var(--tx)}
.mcard .f{background:var(--paper);transform:rotateY(180deg);color:var(--tx)}
.mcard.done .f{background:var(--mint);color:var(--tx)}

/* reaction */
.pad{width:100%;min-height:320px;border:3px solid var(--line);border-radius:16px;box-shadow:5px 5px 0 var(--line);display:grid;place-items:center;text-align:center;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;padding:20px}
.pad strong{display:block;font-family:var(--display);font-weight:400;font-size:clamp(36px,9vw,60px);line-height:1}
.pad small{font-size:16px}

/* ttt */
.ttt{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(100%,360px);background:var(--ink);padding:8px;border-radius:14px}
.ttt button{aspect-ratio:1;border:0;border-radius:8px;background:var(--paper);font-family:var(--display);font-size:clamp(40px,14vw,72px);cursor:pointer;padding:0;color:var(--tx)}
.ttt button.x{color:var(--red)} .ttt button.o{color:#2d6fd6}
.ttt button.win{background:var(--sun2);color:var(--tx)}

/* whack */
.holes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:min(100%,420px)}
.hole{aspect-ratio:1;border-radius:50%;background:radial-gradient(ellipse at 50% 70%,#3b2a1f 0 45%,#6b4a2f 46% 60%,var(--green) 61%);border:3px solid var(--line);position:relative;overflow:hidden;cursor:pointer;padding:0;touch-action:manipulation}
.mole{position:absolute;left:18%;right:18%;bottom:-70%;height:70%;border-radius:50% 50% 20% 20%;background:#9b6b43;border:3px solid var(--line);transition:bottom .12s}
.mole::before{content:"";position:absolute;left:24%;top:28%;width:10%;height:12%;background:var(--ink);border-radius:50%;box-shadow:calc(var(--s,40px)*.9) 0 0 var(--line)}
.mole::after{content:"";position:absolute;left:38%;top:48%;width:24%;height:16%;background:var(--pink);border-radius:50%;color:var(--tx)}
.hole.up .mole{bottom:8%}
.hole.hit .mole{background:#c9a07a;color:var(--tx)}

/* typing */
.passage{font:500 clamp(16px,4vw,21px)/1.6 var(--mono);background:var(--paper);border:3px solid var(--line);border-radius:12px;padding:16px;width:100%;word-break:break-word;color:var(--tx)}
.passage .ok{color:var(--green)} .passage .bad{background:var(--red);color:#fff;border-radius:2px} .passage .cur{border-bottom:3px solid var(--red)}
.passage .todo{color:var(--muted)}
.typein{width:100%;font:500 18px var(--mono);padding:12px;border:3px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}

/* simon */
.simon{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,360px);aspect-ratio:1}
.simon button{border:4px solid var(--line);cursor:pointer;opacity:.55;transition:opacity .1s,transform .1s;touch-action:manipulation}
.simon button.lit{opacity:1;transform:scale(.97)}
.simon button:nth-child(1){border-radius:100% 10px 10px 10px;background:var(--red)}
.simon button:nth-child(2){border-radius:10px 100% 10px 10px;background:#2d6fd6}
.simon button:nth-child(3){border-radius:10px 10px 10px 100%;background:var(--green)}
.simon button:nth-child(4){border-radius:10px 10px 100% 10px;background:var(--orange);color:var(--tx)}
.g{background:var(--green)!important;color:#fff} .y{background:var(--orange)!important;color:var(--ink)} .n{background:#8c86a3!important;color:#fff}
.kb{display:flex;flex-direction:column;gap:6px;width:100%;max-width:520px}
.kb div{display:flex;gap:5px;justify-content:center}
.kb button{flex:1;max-width:44px;height:52px;border:2px solid var(--line);border-radius:8px;background:var(--paper);font:700 15px var(--mono);text-transform:uppercase;cursor:pointer;padding:0;touch-action:manipulation;color:var(--tx)}
.kb button.wide{max-width:74px;flex:1.6;font-size:12px}
.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.bub{aspect-ratio:1;border-radius:50%;border:2px solid rgba(29,26,47,.35);background:radial-gradient(circle at 32% 30%,#fff 0 18%,#e6f5ff 30%,#b8e0fb 100%);cursor:pointer;padding:0;touch-action:manipulation;transition:transform .08s}
.bub:active{transform:scale(.9)}
.bub.popped{background:radial-gradient(circle,#d7ecf8 0 40%,#c3e0f2 100%);border-style:dashed;transform:scale(.86);cursor:default}

/* card-style content */
.card{width:100%;background:var(--paper);border:3px solid var(--line);border-radius:16px;box-shadow:5px 5px 0 var(--line);padding:24px;color:var(--tx)}
.card .big-text{font-family:var(--display);font-weight:400;font-size:clamp(24px,6vw,36px);line-height:1.12;margin:0;text-wrap:balance}
.card .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.wyr{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.wyr button{min-height:170px;border:3px solid var(--line);border-radius:16px;box-shadow:5px 5px 0 var(--line);font-weight:800;font-size:clamp(16px,4vw,20px);padding:16px;cursor:pointer;line-height:1.3}
.wyr button:nth-child(1){background:var(--sky);color:var(--tx)} .wyr button:nth-child(2){background:var(--pink);color:var(--tx)}
.wyr button.chosen{outline:5px solid var(--line);outline-offset:-10px}
.swatches{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sw{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);cursor:pointer;padding:0}
.sw.sel{box-shadow:0 0 0 3px var(--sun),0 0 0 6px var(--line)}
.arena.wide{max-width:900px}
.tile.top{position:relative;border-color:#1D1A2F;background:#FFF3C4;box-shadow:0 0 0 4px #FFD23F,6px 6px 0 4px #1D1A2F;color:var(--tx)}.tile.top .topb{position:absolute;top:8px;left:8px;z-index:2;background:#F2352A;color:#fff;font:800 11px/1 var(--mono,monospace);letter-spacing:.04em;padding:5px 9px;border-radius:6px;border:2px solid #1D1A2F;transform:rotate(-3deg);font-style:normal}.sec.topsec h3{color:#B3122E}.sec.fysec h3{color:#6a2c91}.tile .why{display:block;color:#6a2c91;font-weight:800;font-size:12px;margin-bottom:2px}[data-f=foryou]{background:#E9E0FF;color:var(--tx)}
.qsec h3{color:#c25400}.qsec .qshuf{margin-left:auto;padding:4px 12px}[data-f=foryou].on{background:#6a2c91;color:#fff}
[data-f=ideas]{background:#FFF1B8;color:var(--tx)}[data-f=ideas].on{background:#FF7A00;color:#fff}
.ideasec h3{color:#c25400}
.ideaform{grid-column:1/-1;background:var(--paper,#FFFDF6);border:3px solid var(--line);border-radius:14px;box-shadow:5px 5px 0 var(--line);padding:14px;display:grid;gap:10px;max-width:760px;color:var(--tx)}
.ideaform textarea{font:600 16px/1.4 inherit;font-family:inherit;border:3px solid var(--line);border-radius:10px;padding:10px;resize:vertical;width:100%;box-sizing:border-box;background:#fff;color:var(--tx)}
.ideaform select{font:inherit;font-weight:700;border:3px solid var(--line);border-radius:10px;padding:8px;background:#fff;max-width:100%;color:var(--tx)}
.ideabar{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ideamsg{margin:0;font-weight:700;color:#1f7a4a}.ideamsg.bad{color:#c0271c}.ideamsg:empty{display:none}
.ideahd{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;max-width:760px}
.idealist{grid-column:1/-1;display:grid;gap:10px;max-width:760px}
.idea{display:flex;gap:12px;align-items:flex-start;background:var(--paper,#FFFDF6);border:3px solid var(--line);border-radius:12px;padding:10px 12px;color:var(--tx)}
.idea p{margin:0 0 4px;font-weight:700;overflow-wrap:anywhere}.idea small{opacity:.7}
.ideav{flex:none;display:flex;flex-direction:column;align-items:center;min-width:48px;border:3px solid var(--line);border-radius:10px;background:#fff;padding:4px 6px;cursor:pointer;font:inherit;color:var(--tx)}
.ideav.on{background:#FFD23F;color:var(--tx)}.ideav b{font-size:15px}
@media (max-width:1250px){#fs .t,#lbBtn .t{display:none}}
#lbPanel{position:fixed;right:12px;top:78px;bottom:12px;width:min(360px,calc(100vw - 24px));z-index:60;background:#FFFDF6;border:3px solid #1D1A2F;border-radius:16px;box-shadow:6px 6px 0 #1D1A2F;padding:14px;overflow:auto;color:#1D1A2F;font:600 14px/1.35 Figtree,sans-serif}#lbPanel[hidden]{display:none}.lbhead{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:17px}.lbx{padding:4px 10px}.lblive{color:#2BB673;font-size:12px;margin:4px 0 8px}.lbyou{background:#FFF3C4;border:2px solid #1D1A2F;border-radius:10px;padding:8px 10px;margin-bottom:8px;color:var(--tx)}#lbPanel ol{list-style:none;margin:0;padding:0}#lbPanel li{display:grid;grid-template-columns:34px 1fr auto;grid-template-rows:auto auto;column-gap:6px;padding:6px 4px;border-bottom:1px dashed #d8d4e4}#lbPanel li small{grid-column:2/4;color:#8c86a3;font-size:11px}#lbPanel li .lbn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#lbPanel li .lbs{font-weight:900}#lbPanel li.me{background:#E8F7EE;border-radius:8px;color:var(--tx)}.lbmuted{color:#8c86a3;font-size:12px}.lbname{margin-top:12px;border-top:2px solid #1D1A2F;padding-top:10px}.lbname label{display:block;font-weight:800}.lbname input{display:block;box-sizing:border-box;width:100%;margin-top:4px;padding:8px;border:2px solid #1D1A2F;border-radius:8px;font:inherit}.lbsave{margin-top:8px}.lbshare{width:100%;margin-bottom:10px}#lbToast{position:fixed;left:50%;top:84px;transform:translate(-50%,-20px);opacity:0;pointer-events:none;z-index:70;background:#1D1A2F;color:#FFD23F;font:800 15px Figtree,sans-serif;padding:10px 16px;border-radius:12px;box-shadow:4px 4px 0 #F2352A;transition:all .25s;max-width:92vw;text-align:center}#lbToast.on{opacity:1;transform:translate(-50%,0)}
#stage.fs .arena{max-width:none;padding:8px 10px}#stage.fs .hint{display:none}
#stage.pfs{overflow:hidden}
@media (pointer:coarse){#stage.fs .sbar{position:absolute;top:0;left:0;right:auto;z-index:30;background:transparent;border:0;padding:calc(4px + env(safe-area-inset-top,0px)) 6px 4px calc(6px + env(safe-area-inset-left,0px));gap:6px;flex-wrap:nowrap;pointer-events:none}#stage.fs .sbar>*{display:none}#stage.fs .sbar #back,#stage.fs .sbar #fs,#stage.fs .sbar #again{display:inline-flex;pointer-events:auto;opacity:.85;padding:4px 9px;font-size:13px;box-shadow:2px 2px 0 var(--line)}#stage.fs3 .arena{height:100vh!important;height:100dvh!important;padding:0!important}#stage.fs3 .g3{border-radius:0;border:0}#stage.fs .arena{padding:0}}
.rotq{position:fixed;inset:0;z-index:60;background:rgba(29,26,47,.93);color:#fff;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px}.rotq.on{display:flex}.rotq .ph{font-size:64px;animation:rotph 1.6s ease-in-out infinite}@keyframes rotph{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}.rotq b{font:900 24px var(--display,system-ui)}.rotq p{margin:0;opacity:.85;max-width:320px}.rotq .btn{background:var(--sun);color:var(--ink)}.rotq .lnk{all:unset;cursor:pointer;opacity:.75;text-decoration:underline;font-size:14px}
#stage.fs3{overflow:hidden}#stage.fs3 .arena{height:calc(100vh - var(--sbh,64px));justify-content:center}#stage.fs3 .g3{flex:1 1 auto;min-height:0;max-height:none;aspect-ratio:auto;border-radius:8px;box-shadow:none}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;cursor:pointer}
#about{position:fixed;inset:0;z-index:40;background:rgba(29,26,47,.55);overflow:auto;padding:calc(20px + env(safe-area-inset-top,0px)) 16px 40px}
.aboutcard{max-width:680px;margin:0 auto;background:var(--paper);border:3px solid var(--line);border-radius:16px;box-shadow:6px 6px 0 var(--line);padding:22px 24px;line-height:1.55;color:var(--tx)}
.aboutcard h2{font-family:var(--display);font-weight:400;font-size:34px;margin:6px 0 8px}
.aboutcard h3{margin:18px 0 4px;font-size:17px}
.aboutcard #aboutClose{float:right}
.aboutcard li{margin-bottom:6px}
#imgList{font-size:12px;columns:2;column-gap:20px;margin-top:10px}
#imgList p{margin:0 0 6px;break-inside:avoid}
@media (max-width:560px){#imgList{columns:1}}
.seg{display:inline-flex;border:3px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:3px 3px 0 var(--line)}
.seg button{border:0;border-left:2px solid var(--line);background:var(--paper);padding:6px 11px;font-weight:800;font-size:14px;cursor:pointer;color:var(--tx)}
.seg button:first-child{border-left:0}
.seg button.on{background:var(--onbg);color:var(--onfg)}
.tile .meta .lv{font-size:10px;background:var(--onbg);color:var(--onfg);border:0}
.search{flex:1;min-width:180px;max-width:280px;margin-left:auto;font:600 15px var(--body);padding:9px 14px;border:3px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
.sec{grid-column:1/-1;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:18px;border-bottom:3px solid var(--line);padding-bottom:6px}.sec h3{font-family:var(--display);font-weight:400;font-size:28px;margin:0}.sec span{color:var(--muted);font-weight:600;font-size:14px}.sec:first-child{margin-top:0}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);font-weight:600;padding:30px 0}
.lo{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:min(100%,380px)}
.lo button{aspect-ratio:1;border:3px solid var(--line);border-radius:10px;background:#3a3552;cursor:pointer;padding:0;transition:background .12s}
.lo button.on{background:var(--sun2);box-shadow:inset 0 0 18px #fff;color:var(--tx)}
.fifteen{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px;background:var(--ink);border-radius:14px;width:min(100%,400px)}
.fifteen button{aspect-ratio:1;border:0;border-radius:8px;background:var(--sky);font:700 clamp(18px,6vw,30px) var(--mono);cursor:pointer;padding:0;color:var(--ink)}
.fifteen button.home{background:var(--mint);color:var(--tx)} .fifteen button.blank{background:transparent;cursor:default}
.c4{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:8px;background:#2d6fd6;border:3px solid var(--line);border-radius:14px;width:min(100%,460px)}
.c4 div{aspect-ratio:1;border-radius:50%;background:var(--paper);border:2px solid var(--line);cursor:pointer;color:var(--tx)}
.c4 div.r{background:var(--red)} .c4 div.y{background:var(--sun);color:var(--tx)}
.field{position:relative;width:100%;height:min(60vh,420px);background:var(--paper);border:3px solid var(--line);border-radius:14px;box-shadow:5px 5px 0 var(--line);overflow:hidden;touch-action:manipulation;cursor:crosshair;color:var(--tx)}
.target{position:absolute;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,var(--red) 19% 40%,#fff 41% 60%,var(--red) 61%);border:3px solid var(--line);padding:0;cursor:pointer}
.pcard.flip{animation:flip .3s} @keyframes flip{0%{transform:rotateY(90deg)}}
.hand{font-size:clamp(56px,16vw,90px);line-height:1;text-align:center}
.vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;width:100%;text-align:center}
.vs small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hanoi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.hanoi .peg{width:auto;box-shadow:none;height:220px;position:relative;display:flex;flex-direction:column-reverse;align-items:center;padding:0 0 4px;background:none;border:0;border-bottom:6px solid var(--line);cursor:pointer;border-radius:10px 10px 0 0}
.hanoi .peg::before{content:"";position:absolute;bottom:0;top:24px;width:8px;background:var(--ink);border-radius:4px;left:50%;transform:translateX(-50%)}
.hanoi .peg.sel{background:rgba(255,255,255,.45)}
.disk{height:24px;border:3px solid var(--line);border-radius:8px;position:relative;z-index:1;margin-top:3px;transition:transform .1s}
.odd{display:grid;gap:6px;width:min(100%,420px);aspect-ratio:1}
.odd button{border:0;border-radius:8px;cursor:pointer;padding:0}
.piano{position:relative;display:flex;width:100%;height:210px;user-select:none;-webkit-user-select:none;touch-action:none}
.bk{position:absolute;top:0;height:60%;width:calc(100% / 14 * .62);background:var(--ink);border-radius:0 0 6px 6px;z-index:2;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;color:#b0aac4;font:600 10px var(--mono);padding-bottom:6px}
.wk.down{background:var(--sun2);color:var(--tx)} .bk.down{background:var(--red)}
.seq{display:grid;grid-template-columns:54px repeat(16,1fr);gap:3px;width:100%}
.seq span{font:700 11px var(--mono);align-self:center}
.seq button{aspect-ratio:1;border:2px solid var(--line);border-radius:4px;background:var(--paper);padding:0;cursor:pointer;color:var(--tx)}
.seq button.q{background:#efe4bf;color:var(--tx)} .seq button.on{background:var(--red)} .seq button.now{box-shadow:0 0 0 2px var(--sun),0 0 0 4px var(--line)}
@keyframes shake8{20%{transform:translate(-10px,4px) rotate(-6deg)}40%{transform:translate(10px,-4px) rotate(6deg)}60%{transform:translate(-8px,2px)}80%{transform:translate(6px,0)}}
.coin{width:150px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe98a,#e0a100);border:4px solid var(--line);display:grid;place-items:center;font-family:var(--display);font-size:64px;color:var(--ink)}
.coin.spin{animation:spin .6s} @keyframes spin{to{transform:rotateY(1080deg)}}
.die{font-size:92px;line-height:1}
.die.roll{animation:shake .15s 3}
.cookie.cracked{transform:scale(.9) rotate(8deg);opacity:.5}
.slip{background:#fff;border:2px solid var(--line);padding:16px 22px;font:600 19px/1.4 var(--body);text-align:center;max-width:460px;box-shadow:4px 4px 0 var(--line);transform:rotate(-1.5deg);color:var(--tx)}
.slip small{display:block;margin-top:8px;font:500 13px var(--mono);color:var(--muted)}
.breath{width:min(300px,70vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#bfe6ff,#4DA3E0);border:4px solid var(--line);display:grid;place-items:center;text-align:center;transform:scale(.55);transition:transform 4s ease-in-out;font-family:var(--display);font-size:26px;line-height:1.1}
.slider{display:flex;align-items:center;gap:10px;font-weight:700}
.wyr button{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.wyr button::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:rgba(29,26,47,.16);transition:width .6s ease-out}
.wyr button .wt,.wyr button .wp{position:relative}
.wyr button .wp{font-family:var(--display);font-weight:400;font-size:44px;line-height:1}
.hl{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;width:100%}
.hlc.r{background:var(--pink);color:var(--tx)} .hlc.good{background:var(--mint);color:var(--tx)} .hlc.bad{background:var(--red);color:#fff}.hpic.none{display:grid;place-items:center;font-family:var(--display);font-size:44px;color:var(--ink);background:repeating-linear-gradient(45deg,var(--sun2) 0 10px,var(--sun) 10px 20px)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.choices .btn{white-space:normal;min-height:58px;text-align:center}
.btn.right{background:var(--mint);color:var(--tx)} .btn.wrong{background:var(--red);color:#fff}
.vinyl.spin{animation:rot 1.4s linear infinite} @keyframes rot{to{transform:rotate(360deg)}}
.pdots{display:flex;gap:28px}
.pdots i{width:70px;height:70px;border-radius:50%;border:4px solid var(--line);background:var(--paper);transition:background .1s,transform .1s;color:var(--tx)}
.pdots.one i:first-child,.pdots.two i:last-child{background:var(--sky);transform:scale(1.12);color:var(--tx)}
.xylo{display:flex;gap:8px;align-items:center;height:230px;width:100%}
.xylo button{flex:1;border:3px solid var(--line);border-radius:10px;font:700 16px var(--mono);cursor:pointer;touch-action:manipulation;transition:transform .08s,filter .08s;box-shadow:3px 3px 0 var(--line);padding:0;color:var(--ink)}
.xylo button.lit{transform:scale(1.08);filter:brightness(1.25)}
.cpad,.dpads{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}
.cpad button,.dpads button{aspect-ratio:1.2;border:3px solid var(--line);border-radius:14px;box-shadow:4px 4px 0 var(--line);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:manipulation;color:var(--ink);padding:4px;transition:transform .06s}
.cpad small,.dpads small{font:600 11px var(--mono);opacity:.7}
.cpad button.lit,.dpads button.lit{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--line);filter:brightness(1.2)}
.bcard{display:grid;grid-template-columns:repeat(10,1fr);width:100%;border:3px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper);color:var(--tx)}
.bcard div{border-left:2px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:4px 0;font-family:var(--mono);font-variant-numeric:tabular-nums}
.bcard div:first-child{border-left:0} .bcard div.cur{background:var(--sun2);color:var(--tx)}
.bcard span{font-size:11px;min-height:1.3em} .bcard b{font-size:14px;min-height:1.3em}
.sc{aspect-ratio:1;border:0;background:var(--paper);font:700 clamp(15px,5vw,25px) var(--mono);color:#2d6fd6;cursor:pointer;padding:0;position:relative}
.sc.br{margin-right:2px}.sc.bb{margin-bottom:2px}.sc.given{color:var(--ink)}.sc.peer{background:#f1ead2;color:var(--tx)}.sc.same{background:#cfe9fb;color:var(--tx)}.sc.sel{background:var(--sun);color:var(--tx)}.sc.bad{color:var(--red);background:#ffd9d6}
.notes{position:absolute;inset:2px;display:grid;grid-template-columns:repeat(3,1fr);font:600 clamp(7px,2vw,10px) var(--mono);color:var(--muted)}.notes i{font-style:normal;display:grid;place-items:center}
.numpad{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;width:min(100%,470px)}.numpad .btn{padding:10px 0;font:700 18px var(--mono)}.numpad .btn:disabled{opacity:.3}.jpiece.lift{cursor:grabbing;filter:drop-shadow(6px 10px 6px rgba(0,0,0,.4))}.jpiece.placed{filter:none;cursor:default}
.ws{display:grid;width:min(100%,470px);background:var(--paper);border:3px solid var(--line);border-radius:12px;padding:6px;touch-action:none;user-select:none;-webkit-user-select:none;color:var(--tx)}
.wc{aspect-ratio:1;display:grid;place-items:center;font:700 clamp(12px,3.6vw,20px) var(--mono);border-radius:6px;transition:background .15s}.wc.sel{background:var(--sun)!important;color:var(--tx)}.wslist span.got{text-decoration:line-through;opacity:.45}
.pipes{display:grid;width:min(100%,470px);background:#3a3552;border:3px solid var(--line);border-radius:12px;padding:4px;gap:2px}
.pt{aspect-ratio:1;border:0;background:#4a4466;border-radius:6px;padding:0;cursor:pointer;transition:background .2s}.pt.on{background:#5c7fbf}.pt svg{width:100%;height:100%;display:block;transition:transform .12s}
.cb{display:flex;flex-direction:column;gap:6px;background:#8a5a2b;border:3px solid var(--line);border-radius:14px;padding:10px}.cbrow.cur{background:rgba(255,255,255,.25)}.cbrow.secret{background:#1D1A2F;margin-bottom:4px}
.cbrow .fb{display:grid;grid-template-columns:repeat(3,10px);gap:3px;margin-left:8px;min-width:36px}.fb b,.fb u{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--line)}.fb b{background:#1D1A2F}.fb u{background:#fff;text-decoration:none;color:var(--tx)}
.peg{width:40px;height:40px;border-radius:50%;border:3px solid var(--line);cursor:pointer;box-shadow:2px 2px 0 var(--line)}
.ph{aspect-ratio:1;border-radius:50%;border:0;background:#8a5a2b;box-shadow:inset 2px 3px 4px rgba(0,0,0,.4);cursor:pointer;padding:0}.ph.void{visibility:hidden}
.ph.peg{background:radial-gradient(circle at 35% 30%,#ff8a7f,var(--red) 55%,#9a1a12);box-shadow:1px 3px 3px rgba(0,0,0,.4);width:auto;height:auto;border:0}.ph.sel{outline:4px solid var(--sun)}.ph.tgt{box-shadow:inset 0 0 0 4px var(--sun)}
.cw{display:flex;gap:3px}.cp{font:700 22px var(--mono);align-self:flex-start}
.cl{display:flex;flex-direction:column;align-items:center;border:0;background:none;padding:0;cursor:pointer;width:26px}.cl b{font:700 22px var(--mono);border-bottom:3px solid var(--line);width:100%;text-align:center;min-height:30px;color:#2d6fd6}.cl small{font:600 12px var(--mono);color:var(--muted);margin-top:3px}.cl.sel b{background:var(--sun);color:var(--tx)}.cl.dup b{color:var(--red)}
.spot{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}.spot canvas{width:100%;cursor:crosshair}@media (max-width:600px){.spot{grid-template-columns:1fr}}.rung.ghost span{border-style:dashed;color:var(--muted);background:transparent}.rung.goal span{background:var(--mint);color:var(--tx)}.fc{width:100%;aspect-ratio:1;border:3px solid var(--line);border-radius:8px;background:var(--paper);font:700 clamp(18px,6vw,28px) var(--mono);color:#2d6fd6;cursor:pointer;padding:0}
.fc.given{color:var(--ink);background:#f1ead2}.fc.sel{background:var(--sun);color:var(--tx)}.fc.bad{color:var(--red)}.fs{font:800 20px var(--mono);color:var(--ink)}
.g3{position:relative;width:100%;aspect-ratio:16/9;max-height:74vh;background:#1D1A2F;border:3px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:5px 5px 0 var(--line);touch-action:none;user-select:none;-webkit-user-select:none}
.g3.tall{aspect-ratio:4/3}
@media (max-width:700px){.g3{aspect-ratio:3/4;max-height:78vh}.g3.tall{aspect-ratio:3/4}}
.g3 canvas{display:block;width:100%;height:100%;outline:none}
.g3load{display:grid;place-items:center;gap:6px;text-align:center;width:100%;aspect-ratio:16/9;max-height:70vh;background:#1D1A2F;color:#FFFDF6;border-radius:14px;border:3px solid var(--line);padding:20px}.g3load b{font-family:var(--display);font-weight:400;font-size:28px}.g3load small{opacity:.8}
.hud{position:absolute;inset:0;pointer-events:none;font-family:var(--body);color:#fff}
.h-x{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;background:linear-gradient(#fff,#fff) center/2px 8px no-repeat,linear-gradient(#fff,#fff) center/8px 2px no-repeat;border:2px solid rgba(255,255,255,.8);border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.h-hit{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;opacity:0;background:linear-gradient(45deg,transparent 45%,#FFD23F 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,#FFD23F 45% 55%,transparent 55%)}.h-hit.on{animation:hitm .2s}@keyframes hitm{0%{opacity:1;transform:scale(1.3)}100%{opacity:0}}
.h-vig{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(242,53,42,.75));transition:opacity .15s}
.h-hp{position:absolute;left:14px;bottom:14px;width:min(40%,240px);height:22px;background:rgba(29,26,47,.7);border:2px solid #fff;border-radius:99px;overflow:hidden}.h-hp b{display:block;height:100%;background:#2BB673;transition:width .2s;color:var(--tx)}.h-hp.low b{background:#F2352A}.h-hp span{position:absolute;inset:0;display:grid;place-items:center;font:800 12px var(--mono);text-shadow:0 1px 2px #000}
.h-am{position:absolute;right:14px;bottom:12px;text-align:right;text-shadow:0 2px 3px rgba(0,0,0,.7)}.h-am b{display:block;font:800 13px var(--body);opacity:.9}.h-am span{font:700 28px var(--mono)}
.h-obj{position:absolute;left:14px;top:12px;max-width:55%;text-shadow:0 2px 3px rgba(0,0,0,.8)}.h-obj small{display:block;font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.8}.h-obj b{font:800 15px var(--body)}
.h-msg{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);font-family:var(--display);font-size:clamp(18px,3.2vw,30px);text-align:center;color:#FFD23F;text-shadow:0 3px 0 #1D1A2F,0 0 12px rgba(0,0,0,.6);opacity:0;transition:opacity .25s;width:90%}.h-msg.on{opacity:1}
.h-boss{position:absolute;left:50%;top:14px;transform:translateX(-50%);width:min(60%,420px);text-align:center}.h-boss span{font:800 13px var(--body);text-shadow:0 2px 2px #000}.h-boss b{display:block;height:12px;margin-top:4px;background:#F2352A;border:2px solid #fff;border-radius:99px;transition:width .2s}
.g3 canvas.h-map{position:absolute;right:12px;top:12px;width:min(22%,130px);height:auto;border:2px solid rgba(255,255,255,.7);border-radius:8px;opacity:.9}
.h-talk{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);width:min(80%,520px);background:rgba(29,26,47,.88);border:2px solid #FFD23F;border-radius:12px;padding:8px 14px;font-size:15px}.h-talk b{display:block;color:#FFD23F;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.ov3{position:absolute;inset:0;display:grid;place-items:center;background:rgba(20,16,40,.72);padding:14px;overflow:auto;z-index:5}
.ovc{max-width:560px;width:100%;background:var(--paper);color:var(--ink);border:3px solid var(--line);border-radius:16px;box-shadow:6px 6px 0 #000;padding:18px 22px;max-height:100%;overflow:auto}
.ovc h2{font-family:var(--display);font-weight:400;font-size:clamp(24px,4vw,36px);margin:4px 0 8px;line-height:1.05}.ovc p{margin:0 0 10px;line-height:1.5}.ovc .kick{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.ovc .ctl{font-size:13px;color:var(--muted)}
.stats3{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 14px}.stats3 span{background:var(--sun2);border:2px solid var(--line);border-radius:10px;padding:6px;text-align:center;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--tx)}.stats3 b{display:block;font:800 20px var(--mono)}
.tctl{position:absolute;inset:0;pointer-events:none;display:none}.g3.touch .tctl{display:block}.g3.paused .tctl{display:none}
.joy{position:absolute;width:100px;height:100px;border-radius:50%;border:3px solid rgba(255,255,255,.5);background:rgba(255,255,255,.1);display:none}.joy.on{display:block}.joy i{position:absolute;left:30px;top:30px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.7);color:var(--tx)}
.tbtn{position:absolute;pointer-events:auto;border:3px solid #fff;border-radius:50%;background:rgba(242,53,42,.7);color:#fff;font:800 12px var(--body);width:74px;height:74px;touch-action:none}.tbtn.fire{right:16px;bottom:60px;width:86px;height:86px}.tbtn.alt{right:112px;bottom:40px;width:56px;height:56px;background:rgba(45,111,214,.7)}.tbtn.jump{right:30px;bottom:160px;width:56px;height:56px;background:rgba(43,182,115,.7);color:var(--tx)}
.g3.touch canvas.h-map{width:90px}
.ret3{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border:3px solid #FFD23F;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.5);background:radial-gradient(circle,#FFD23F 0 3px,transparent 4px)}.ret3.small{width:18px;height:18px;margin:-9px 0 0 -9px;border-width:2px}.pen3 i.g{background:#2BB673;color:var(--tx)}.pen3 i.m{background:#F2352A}
.meter3{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:24px;height:46%;border:3px solid #fff;border-radius:8px;background:rgba(29,26,47,.6);overflow:hidden}.meter3 i{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(#F2352A,#FFD23F)}.meter3 u{position:absolute;left:0;right:0;background:rgba(255,255,255,.35);border-top:2px solid #fff;border-bottom:2px solid #fff}.meter3 span{position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);font:800 10px var(--body)}.bcard3 div.cur{background:#FFE27A;color:var(--tx)}@media (max-width:600px){.sbar{gap:6px;padding-inline:10px}.sbar h3{font-size:20px;min-width:0;flex:1 1 40%}.sbar .btn{padding:6px 10px;font-size:14px}.stat{font-size:12px;padding:4px 8px}.seg button{padding:5px 8px;font-size:12px}#back{order:-2}#again{order:-1;margin-left:auto;padding:6px 12px}}.popb.flip{background:#FF8FB1;color:var(--tx)}
.popb .void{aspect-ratio:1}.pop{aspect-ratio:1;border-radius:50%;border:2px solid rgba(29,26,47,.5);padding:0;cursor:pointer;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.7) 0 18%,var(--c) 40%,color-mix(in srgb,var(--c) 70%,#000) 100%);box-shadow:0 4px 0 color-mix(in srgb,var(--c) 60%,#000);transition:transform .06s,box-shadow .06s;touch-action:none}.pop.in{transform:translateY(3px) scale(.92);box-shadow:inset 0 5px 8px rgba(0,0,0,.35);background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c) 70%,#000),var(--c))}@media (max-width:600px){.pwrap{grid-template-columns:1fr}}.pencilbtn.bump{animation:bump .12s}@keyframes bump{50%{transform:scale(.94)}}@keyframes rise{to{transform:translateY(-80px);opacity:0}}.pup{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;text-align:left;gap:0 8px;background:var(--paper);border:3px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer;box-shadow:3px 3px 0 var(--line);color:var(--tx)}.pup:disabled{opacity:.55;cursor:default}.pup b{font-size:15px}.pup small{grid-column:1;color:var(--muted);font-size:12px}.pup .own{grid-column:2;grid-row:1;font:700 13px var(--mono);text-align:right}.pup .cost{grid-column:2;grid-row:2;font:700 13px var(--mono);text-align:right;color:#2d6fd6}
.fb{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;width:100%}
.fsw{width:44px;height:76px;border-radius:22px;border:3px solid var(--line);background:#3a3552;position:relative;cursor:pointer;padding:0}.fsw i{position:absolute;left:4px;right:4px;height:32px;border-radius:14px;background:#d8d4e4;bottom:4px;transition:bottom .12s,background .12s;color:var(--tx)}.fsw.on i{bottom:34px;background:#FFD23F;color:var(--tx)}.fbeads i.r{transform:translateX(34px)}.frock:not(.on) i:last-child,.frock.on i:first-child{background:#F2352A}
.fridge{position:relative;width:100%;height:min(62vh,480px);background:linear-gradient(90deg,#e6f2ef,#d4e6e1);border:4px solid var(--line);border-radius:18px;box-shadow:6px 6px 0 var(--line);overflow:hidden;touch-action:none}.mag{position:absolute;background:#fff;border:1px solid #1D1A2F;box-shadow:2px 3px 3px rgba(0,0,0,.25);padding:3px 8px;font:500 17px Georgia,serif;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none;white-space:nowrap;color:var(--tx)}.mag.small{padding:3px 6px}.mag.lift{box-shadow:5px 8px 8px rgba(0,0,0,.3);cursor:grabbing}
.knob{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d8d4e4);border:3px solid var(--line);box-shadow:0 4px 0 #7a120c;touch-action:none;cursor:grab;position:relative}.knob::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:16px;margin-left:-2px;background:#8c86a3;border-radius:2px}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;text-align:center;justify-items:center;padding-block:12px 28px}
  .hero p{margin-inline:auto}
  .wyr{grid-template-columns:1fr}
  .wyr button{min-height:110px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* superheroes: comic HUD */
.cx-cap{position:absolute;left:12px;top:12px;max-width:min(58%,360px);background:#FFE27A;color:#1D1A2F;border:3px solid #1D1A2F;box-shadow:4px 4px 0 #1D1A2F;padding:6px 12px;transform:skew(-5deg);font:800 14px/1.25 var(--body)}
.cx-cap small{display:block;font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.cx-bars{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;gap:7px;width:min(44%,240px)}
.cx-bar{position:relative;height:18px;background:#3a3552;border:3px solid #1D1A2F;border-radius:3px;transform:skew(-12deg);box-shadow:3px 3px 0 rgba(0,0,0,.4);overflow:hidden}
.cx-bar b{display:block;height:100%;width:0;background:var(--c,#2BB673);transition:width .12s}
.cx-bar span{position:absolute;inset:0;display:flex;align-items:center;padding-left:8px;font:800 11px var(--mono);color:#fff;text-shadow:1px 1px 0 #000;letter-spacing:.06em;white-space:nowrap}
.cx-bar.full b{animation:cxglow .45s infinite alternate}@keyframes cxglow{to{filter:brightness(1.45)}}
.cx-score{position:absolute;right:14px;bottom:10px;text-align:right;font-family:var(--display);color:#FFD23F;font-size:clamp(24px,4vw,36px);line-height:1;-webkit-text-stroke:2px #1D1A2F;text-shadow:3px 3px 0 #1D1A2F;pointer-events:none}
.cx-score small{display:block;font:800 12px var(--body);color:#fff;-webkit-text-stroke:0;text-shadow:1px 1px 0 #000;letter-spacing:.08em;text-transform:uppercase}
.cx-pow{position:absolute;font-family:var(--display);font-size:clamp(20px,3.6vw,38px);color:#FFD23F;-webkit-text-stroke:2px #1D1A2F;text-shadow:3px 3px 0 #F2352A;pointer-events:none;white-space:nowrap;animation:cxpow .8s ease-out forwards;z-index:2}
@keyframes cxpow{0%{transform:translate(-50%,-50%) scale(.2) rotate(var(--r))}20%{transform:translate(-50%,-50%) scale(1.15) rotate(var(--r))}75%{opacity:1}100%{transform:translate(-50%,-110%) scale(1) rotate(var(--r));opacity:0}}
.cx-lines{position:absolute;inset:-20%;pointer-events:none;opacity:0;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.6) 0 1deg,transparent 1deg 6deg);-webkit-mask:radial-gradient(circle,transparent 38%,#000 70%);mask:radial-gradient(circle,transparent 38%,#000 70%)}
.cx-tint{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s}
.cx-boss{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:min(50%,360px);text-align:center;font:900 13px var(--body);color:#fff;text-shadow:2px 2px 0 #1D1A2F;letter-spacing:.06em;text-transform:uppercase}
.cx-boss .cx-bar{margin-top:4px}
.cx-say{position:absolute;left:50%;top:24%;transform:translate(-50%,-50%) rotate(-2deg);background:#fff;color:#1D1A2F;border:3px solid #1D1A2F;border-radius:18px;padding:8px 16px;font:900 clamp(15px,2.4vw,22px) var(--body);box-shadow:4px 4px 0 #1D1A2F;opacity:0;transition:opacity .2s;max-width:80%;text-align:center;pointer-events:none}
.cx-say.on{opacity:1}
.g3 canvas.cx-mini{position:absolute;right:12px;top:12px;width:min(24%,130px);height:auto;border-radius:50%;box-shadow:3px 3px 0 #1D1A2F;pointer-events:none}
.ov3.cx{background:rgba(29,26,47,.6) radial-gradient(rgba(255,210,63,.25) 1.2px,transparent 1.8px) 0 0/9px 9px}
.ov3.cx .ovc{border-width:4px;border-radius:4px;box-shadow:8px 8px 0 #F2352A,8px 8px 0 3px #1D1A2F;transform:rotate(-.6deg)}
.ov3.cx .ovc h2{display:inline-block;background:#F2352A;color:#fff;padding:4px 14px;transform:skew(-6deg);text-shadow:3px 3px 0 #1D1A2F;border:3px solid #1D1A2F}
.ov3.cx .kick{display:table;background:#FFD23F;color:#1D1A2F;padding:2px 8px;border:2px solid #1D1A2F;margin-bottom:6px}
@media (max-width:600px){.cx-cap{font-size:12px;padding:4px 8px;max-width:62%}.cx-bars{width:46%;gap:5px}.cx-bar{height:15px}.g3 canvas.cx-mini{width:84px}}

/* geography */
.geobar{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;flex-wrap:wrap;background:var(--paper);border:3px solid var(--line);border-radius:12px;padding:8px 14px;box-shadow:4px 4px 0 var(--line);min-height:62px;color:var(--tx)}
.geoq{font-size:17px}.geoq small{display:block;font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.geoq b{font-family:var(--display);font-weight:400;font-size:24px}.geoq em{font-style:normal;font-weight:800}em.ok{color:#1f9a5c}em.no{color:#c8271e}
.geoinfo{font:700 14px var(--mono)}
.geosplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:16px;width:100%;align-items:start}@media (max-width:700px){.geosplit{grid-template-columns:1fr}}
.geoleft{display:flex;flex-direction:column;gap:12px}.geoleft .geoq{font:700 14px var(--mono)}
.geocard{background:var(--paper);border:3px solid var(--line);border-radius:14px;box-shadow:5px 5px 0 var(--line);padding:16px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:190px;justify-content:center;text-align:center;color:var(--tx)}
.geoflag{width:100%;max-width:280px;aspect-ratio:4/3;object-fit:cover;border:3px solid var(--line);border-radius:6px;background:#fff;color:var(--tx)}
.geobig small{display:block;color:var(--muted);font-weight:700}.geobig b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(24px,5vw,34px);line-height:1.1}

/* stress toys */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%}
.tool{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:76px;padding:6px 8px;background:var(--paper);border:3px solid var(--line);border-radius:10px;box-shadow:3px 3px 0 var(--line);cursor:pointer;font-weight:700;touch-action:manipulation;color:var(--tx)}
.tool .ti{font-size:24px;line-height:1.1}.tool small{font-size:11px;white-space:nowrap}.tool.on{background:var(--onbg);color:var(--onfg)}.tool.locked{opacity:.65}.tool.locked .ti{filter:grayscale(1)}

/* cool info */
.bdform{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;width:100%}.bdform label{font-weight:800}.bdform .typein{max-width:220px}
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;width:100%}
.icard{background:var(--paper);border:3px solid var(--line);border-top:10px solid var(--c,#FFD23F);border-radius:14px;box-shadow:5px 5px 0 var(--line);padding:12px 16px;color:var(--tx)}.icard h4{margin:0 0 6px;font-size:16px}.icard p{margin:0 0 6px;line-height:1.4}
.icard.mini{display:flex;flex-direction:column;gap:2px;padding:8px 12px}.icard.mini small{color:var(--muted)}
.ibig{font-family:var(--display);font-size:clamp(24px,5vw,34px);line-height:1.1;margin-bottom:4px}.ibig.mono,.mono{font-family:var(--mono);font-weight:700}.ibig.mono{font-size:clamp(20px,4vw,28px)}
.isub{color:var(--muted);font-size:14px}

.cx-arrow{position:absolute;pointer-events:none;transform:translate(-50%,-50%);text-align:center;z-index:3}.cx-arrow i{display:block;margin:0 auto 2px;width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-bottom:24px solid #FF9F43;filter:drop-shadow(2px 2px 0 #1D1A2F)}.cx-arrow span{display:inline-block;background:#1D1A2F;color:#FFD23F;font:900 12px var(--body);padding:2px 8px;border-radius:99px;white-space:nowrap}
.perks{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:640px}
.perks li{background:#fffdf6;border:3px solid var(--line);border-radius:12px;padding:8px 10px;font-size:13px;line-height:1.3;box-shadow:3px 3px 0 var(--line);color:var(--tx)}
.perks b{display:block;font-size:14px;margin-bottom:2px}
@media (max-width:760px){.perks{grid-template-columns:1fr}}

a.tile{text-decoration:none;color:inherit;text-align:left;font:inherit}
/* game pages: the description section under each game (search engines read it; the game covers it while playing) */
.seo{background:var(--bg);color:var(--ink);font:600 17px/1.5 Figtree,system-ui,sans-serif;min-height:100vh}
.seo *{box-sizing:border-box}.seo a{color:inherit}.seo .wrap{max-width:880px;margin:0 auto;padding:18px 16px 40px}
.seo .top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.seo .brand{display:flex;align-items:center;gap:8px;text-decoration:none;font:900 28px/1 'Arial Black','Helvetica Neue',Arial,sans-serif;letter-spacing:-.06em;color:#161616}.seo .brand svg{width:40px;height:40px}
.seo .pill{background:var(--paper);border:3px solid var(--line);border-radius:10px;padding:6px 14px;box-shadow:3px 3px 0 var(--line);text-decoration:none;font-weight:800;color:var(--tx)}
.seo .card{background:var(--paper);border:3px solid var(--line);border-radius:18px;box-shadow:6px 6px 0 var(--line);overflow:hidden;color:var(--tx)}
.seo .hero{display:block;aspect-ratio:120/72;max-height:340px;width:100%;border-bottom:3px solid var(--line)}.seo .hero svg{width:100%;height:100%;display:block}
.seo .body{padding:18px 22px 24px}.seo h1{font:400 44px/1.05 'Bagel Fat One',system-ui;margin:4px 0 8px}
.seo .chip{display:inline-block;background:var(--paper);border:2px solid var(--line);border-radius:6px;padding:2px 10px;font-size:13px;font-weight:800;color:var(--tx)}
.seo .play{display:inline-block;margin:14px 0 6px;background:var(--red);color:#fff;border:3px solid var(--line);border-radius:14px;padding:12px 26px;font:900 22px Figtree,system-ui;text-decoration:none;box-shadow:4px 4px 0 var(--line)}
.seo ul.f{padding-left:20px;margin:10px 0}.seo h2{font:400 26px 'Bagel Fat One',system-ui;margin:28px 0 10px}
.seo .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.seo .rg{display:block;background:var(--paper);border:3px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;box-shadow:3px 3px 0 var(--line);color:var(--tx)}
.seo .rg .ra{display:block;aspect-ratio:120/72;border-bottom:2px solid var(--line)}.seo .rg svg{width:100%;height:100%;display:block}.seo .rg b{display:block;padding:6px 8px;font-size:14px}
.seo footer{margin-top:30px;font-size:14px}

/* full screen on computers: the game area's height already excludes the top bar, so its padding must fit inside it too */
#stage.fs3 .arena{box-sizing:border-box}
#stage.fs3 .g3{max-height:100%}
/* ---- quick time picks, modes, daily challenge and streak (homepage) ---- */
.qtime{display:grid;grid-template-columns:repeat(4,auto);gap:8px}
.qtime button,.modes button{border:3px solid var(--line);border-radius:12px;background:var(--paper);font:800 15px Figtree,system-ui,sans-serif;padding:8px 12px;cursor:pointer;box-shadow:3px 3px 0 var(--line);color:var(--ink)}
.qtime button:hover,.modes button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--line)}
.qtime button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
.qtime button[data-d=any]{background:var(--sun);color:var(--tx)}
.modes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:440px}
.modes button{font-size:13px;padding:5px 10px;border-radius:10px;box-shadow:2px 2px 0 var(--line)}
.modes button.on{background:var(--onbg);color:var(--onfg)}
.daily{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-top:14px}
.daily .dc{display:flex;align-items:center;gap:8px;background:#fffdf6;border:2px solid var(--line);border-radius:10px;padding:5px 10px;box-shadow:2px 2px 0 var(--line);text-decoration:none;color:var(--ink);font-weight:700;font-size:12px;line-height:1.25;text-align:left}
.daily .dc b{display:block;font-size:13px}
.daily .dc .ic{font-size:18px}
.daily .dc.done{background:#e3f7e9;color:var(--tx)}
.daily .dc.streak{cursor:default}
.tile .meta .dur{font-style:normal;background:transparent;border:0;padding:0;opacity:.8}
.modenote{grid-column:1/-1;font-size:14px;opacity:.8;margin:-4px 0 4px}
.modenote button{all:unset;cursor:pointer;text-decoration:underline;font-weight:700}
.beatpill{background:#ff5a3a;color:#fff;font:800 13px Figtree,system-ui,sans-serif;border-radius:8px;padding:4px 10px;white-space:nowrap}
.beatpill.won{background:#2BB673;color:var(--tx)}
@media (max-width:560px){.qtime{grid-template-columns:repeat(2,1fr)}.daily{justify-content:center}}
.press .daily{justify-content:center;margin-top:4px}
@media (max-width:560px){.hero small{display:none}.hero p{font-size:16px}}
.dnarrow{display:none}
@media (max-width:860px){.dwide{display:none}.dnarrow{display:flex}}
/* today's board, badges, end-of-round strip, compact filters */
.daily .dboard{font-size:12px}
.daily details.badges{display:block;padding:0}
.daily details.badges summary{display:flex;align-items:center;gap:8px;padding:5px 10px;cursor:pointer;list-style:none}
.daily details.badges summary::-webkit-details-marker{display:none}
.daily details.badges ul{list-style:none;margin:0;padding:4px 12px 10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-width:440px}
.daily details.badges li{display:grid;grid-template-columns:24px 1fr;column-gap:6px;font-size:12.5px;line-height:1.25;opacity:.45;filter:grayscale(1)}
.daily details.badges li.on{opacity:1;filter:none}
.daily details.badges li span{grid-row:span 2;font-size:18px}
.daily details.badges li small{font-weight:600;opacity:.8}
.endstrip{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:8px;background:var(--paper);border:3px solid var(--line);border-radius:16px;padding:8px 10px 8px 14px;box-shadow:4px 4px 0 var(--line);font:700 15px Figtree,system-ui,sans-serif;color:var(--ink);max-width:calc(100vw - 24px);animation:stripin .25s ease-out}
.endstrip .btn{font-size:14px;padding:6px 10px}
@keyframes stripin{from{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@media (prefers-reduced-motion:reduce){.endstrip{animation:none}}
.filters .fmore{display:none}
.filters.open .fmore{display:inline-flex}
.filters .moretog{font-weight:800}
/* hero: never wider than the window; one column once the two columns get cramped */
.wrap{overflow-x:clip}
.hero>*{min-width:0}
.qcap{margin:2px 0 -4px;font-weight:700;font-size:14px;text-align:center;max-width:36ch}
.qtime{grid-template-columns:repeat(3,auto)}
@media (max-width:1000px){.hero{grid-template-columns:1fr;text-align:center;justify-items:center}
.big{width:min(330px,70vw)}.hero p{margin-inline:auto}.dwide{display:none}.dnarrow{display:flex}}
@media (max-width:560px){.qtime{grid-template-columns:repeat(3,1fr)}.qtime button{padding:8px 6px;font-size:14px}}

/* line icons (core.js ico) */
.ico{width:1.15em;height:1.15em;vertical-align:-.2em;flex:none;display:inline-block}
.icw{display:inline-flex;align-items:center;justify-content:center}
.dc .ic .ico,.badges li .icw .ico{width:17px;height:17px}
.rotq .ph .ico{width:56px;height:56px}
.lbm{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);font:900 12px/1 var(--mono,monospace);font-style:normal;color:var(--ink)}
.lbm1{background:#FFD23F;color:var(--tx)}.lbm2{background:#d8d4e4;color:var(--tx)}.lbm3{background:#e8a06a;color:var(--tx)}

/* ===== dark site theme (default). The Dark/Light button sets <html data-theme="light"> to go back to the original yellow look.
   Game areas (#arena and the random plate) restore the original light palette so every game looks as designed. ===== */
:root:not([data-theme=light]){
  --bg:#121019; --paper:#1d1a27; --ink:#e9e6f2; --muted:#a39db8; --line:#3a3450;
  --onbg:#7a68e8; --onfg:#fff; --sun2:#2a2540; --tx:#e9e6f2; color-scheme:dark;
}
#arena,.arena,#rndPlate,.big{
  --ink:#1D1A2F; --paper:#FFFDF6; --muted:#5A5470; --line:#1D1A2F; --onbg:#1D1A2F; --onfg:#FFD23F; --sun2:#FFE27A; --tx:#1D1A2F; color-scheme:light;
}
html:not([data-theme=light]) .arena{color:#e9e6f2}
html:not([data-theme=light]) #arena,html:not([data-theme=light]) .arena{--muted:#8f89a8}
html:not([data-theme=light]){background:#121019}
/* dark theme: chrome pieces that used fixed light colours */
html:not([data-theme=light]) body{background:var(--bg)}
html:not([data-theme=light]) .wordmark,html:not([data-theme=light]) .seo .brand{color:var(--ink)}
html:not([data-theme=light]) .allgames,html:not([data-theme=light]) .ideaform,html:not([data-theme=light]) .idea{background:var(--paper);border-color:var(--line);color:var(--tx)}
html:not([data-theme=light]) .rcard b{background:var(--paper);color:var(--ink);border-top-color:var(--line)}
html:not([data-theme=light]) .tile.top{border-color:#8a6d1a;background:#231f14;box-shadow:0 0 0 3px #6b5418,5px 5px 0 3px #000}
html:not([data-theme=light]) #lbPanel{background:var(--paper);border-color:var(--line);box-shadow:6px 6px 0 #000;color:var(--ink)}
html:not([data-theme=light]) .lbyou{background:#2a2540;border-color:var(--line)}
html:not([data-theme=light]) .perks li,html:not([data-theme=light]) .daily .dc{background:var(--paper);color:var(--tx)}
html:not([data-theme=light]) [data-f=foryou]{background:#2a2540}
html:not([data-theme=light]) [data-f=ideas]{background:#2e2716}
html:not([data-theme=light]) .big .bigsh{fill:#000}
/* dark theme: game boxes given a light background inline keep dark text (matches the browser's serialised style attribute) */
.arena [style*="background: rgb(255, 253, 246)"],.arena [style*="background: rgb(255, 255, 255)"],.arena [style*="background: var(--pink)"],.arena [style*="background: var(--orange)"],.arena [style*="background: var(--paper)"],.arena [style*="background: var(--sun"],.arena [style*="background: var(--sky)"],.arena [style*="background: var(--mint)"],.arena [style*="background: var(--lilac)"],.arena [style*="background: rgb(127, 200, 248)"],.arena [style*="background: rgb(255, 210, 63)"],.arena [style*="background: rgb(255, 159, 67)"],.arena [style*="background: rgb(110, 231, 183)"],.arena [style*="background: rgba(255, 253, 246"],.arena [style*="background: rgba(127, 200, 248"],.arena [style*="background: rgba(255, 159, 67"]{color:#1D1A2F}
/* hint lines coloured with the dark ink inline sit straight on the dark page */
html:not([data-theme=light]) .arena p.hint[style*="color: var(--ink)"]{color:#e9e6f2!important}
.daily .recent .rlist{display:grid;gap:2px;margin-top:2px}.daily .recent .rlist a{color:inherit;text-decoration:none;font-weight:600}.daily .recent .rlist a:hover{text-decoration:underline}.daily .recent .rlist small{opacity:.65}
html:not([data-theme=light]) .daily .dc.done{background:#15301f}
.daily .recent .rlist b{display:inline;font-size:inherit}
/* mobile: no double-tap zoom on buttons, no zoom when focusing a text box, no text blow-up on rotate */
html{touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (pointer:coarse){input,select,textarea{font-size:16px!important}}
/* the "turn your phone sideways" tip is a small bar at the bottom, not a full-screen block */
.rotq{inset:auto 10px calc(10px + env(safe-area-inset-bottom,0px)) 10px;flex-direction:row;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(29,26,47,.96);justify-content:flex-start;text-align:left;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.rotq .ph{font-size:0;animation:none}.rotq .ph .ico{width:26px;height:26px;animation:rotph 1.6s ease-in-out infinite}
.rotq p{flex:1;font-size:14px;max-width:none}.rotq .btn{padding:6px 10px;font-size:13px}.rotq .lnk{opacity:.8;display:grid;place-items:center;width:32px;height:32px}.rotq .lnk .ico{width:18px;height:18px}
/* ===== phones ===== */
.sbmore{display:none}
.rotq p b{font:inherit;font-weight:800}
@media (max-width:640px){
  /* top bars: icons only, one row */
  .bar .btn .t,.sbar .btn .t{display:none}
  .bar .btn,.sbar .btn{padding:7px 10px}
  .wordmark{font-size:32px}.logo svg{width:44px;height:44px}
  #stage:not(.fs) .sbar{flex-wrap:nowrap}
  #stage:not(.fs) .sbar:not(.open) .sbopt{display:none!important}
  #stage:not(.fs) .sbar.open{flex-wrap:wrap}
  #stage:not(.fs) .sbmore{display:inline-flex;order:5}
  .sbar h3{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:18px}
  .sbar .stat{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
  /* homepage: smaller sign and hero, one swipeable row of filters, two cards per row */
  .big{width:min(270px,70vw)}
  .hero:not(a){padding-block:12px 20px;gap:14px}
  .hero h1{font-size:clamp(34px,11vw,52px)}
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:6px;margin-inline:-16px;padding-inline:16px}
  .filters::-webkit-scrollbar{display:none}
  .filters>*{flex:0 0 auto}
  .filters h2{font-size:24px}
  .filters .search{min-width:150px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{box-shadow:3px 3px 0 var(--line);border-width:2px}
  .tile .art{height:78px;border-bottom-width:2px}
  .tile .art svg{max-height:70px}
  .tile .txt{padding:8px 10px 10px}
  .tile b{font-size:17px}
  .tile .txt>span:not(.why){display:none}
  .tile .meta{font-size:9px;letter-spacing:.03em;flex-wrap:wrap;gap:2px}
  /* end-of-round strip: one small line */
  .endstrip{font-size:13px;padding:6px 8px;gap:6px;flex-wrap:nowrap;border-width:2px}
  .endstrip .btn{padding:5px 8px;font-size:12px}
  .endstrip .btn .t{display:none}
}
.rotq .btn{color:#1D1A2F}

/* homepage first screen: Continue playing + Top games picture cards under the headline; headline and sign a bit smaller so they fit */
.hero h1{font-size:clamp(36px,4.6vw,60px)}
.big{width:min(340px,62vw)}
.heroGames{margin-top:14px;display:grid;gap:6px;max-width:560px}
.heroGames .hgh{font:800 13px/1.2 var(--body);text-transform:uppercase;letter-spacing:.08em;margin:6px 0 0;color:var(--muted)}
.heroGames .hgr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hgc{display:flex;flex-direction:column;text-decoration:none;color:var(--tx);background:var(--paper);border:3px solid var(--line);border-radius:12px;box-shadow:4px 4px 0 var(--line);overflow:hidden;transition:transform .08s,box-shadow .08s}
.hgc:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--line)}
.hgc:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--line)}
.hgc .art{aspect-ratio:120/72;border-bottom:3px solid var(--line);display:grid;place-items:center}
.hgc .art svg{width:100%;height:100%;display:block}
.hgc b{font-size:14px;line-height:1.2;padding:6px 8px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1000px){.heroGames{margin-inline:auto;width:100%}.heroGames .hgh{text-align:left}}
@media (max-width:560px){.heroGames .hgr{gap:8px}.hgc b{font-size:12.5px;padding:5px 6px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.4em}.big{width:min(260px,64vw)}}

/* ratings and reviews */
.rstar{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;vertical-align:-3px}
.rstar.on{fill:#FFD23F;stroke:#a8740f}
.rbtn{background:none;border:0;padding:2px;cursor:pointer;color:var(--muted);line-height:0}
.rbtn:focus-visible{outline:3px solid var(--line);outline-offset:1px;border-radius:6px}
.rrow{display:inline-flex;gap:2px}
.ratebar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:10px auto 0;padding:8px 14px;max-width:640px;background:var(--paper);color:var(--tx);border:3px solid var(--line);border-radius:12px;box-shadow:3px 3px 0 var(--line);font-size:14px}
.ratebar .rinfo{color:var(--muted);font-weight:600}
.tile .meta .rt{display:inline-flex;align-items:center;gap:2px;font-weight:800;font-size:12.5px;opacity:1}
.reviews{margin:36px 0 10px}
.reviews h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,38px);margin:0 0 14px}
.rtop{display:grid;grid-template-columns:auto 1fr minmax(260px,1.3fr);gap:18px;align-items:start}
.ravg{display:grid;justify-items:center;gap:4px;background:var(--paper);color:var(--tx);border:3px solid var(--line);border-radius:14px;box-shadow:4px 4px 0 var(--line);padding:14px 18px}
.ravg b{font:900 44px/1 var(--body)}.ravg small{font-weight:700;color:var(--muted)}
.rdist{display:grid;gap:5px;align-self:center}
.rd{display:grid;grid-template-columns:14px 1fr 34px;align-items:center;gap:8px;font-weight:700;font-size:13px}
.rd i{display:block;height:10px;border:2px solid var(--line);border-radius:4px;background:var(--paper);overflow:hidden}
.rd u{display:block;height:100%;background:#FFD23F;text-decoration:none}
.rd em{font-style:normal;color:var(--muted)}
.rnone{grid-column:1/3;font-weight:700;color:var(--muted)}
.rform{display:grid;gap:8px;background:var(--paper);color:var(--tx);border:3px solid var(--line);border-radius:14px;box-shadow:4px 4px 0 var(--line);padding:12px 14px}
.rform textarea,.rform input{font:inherit;font-size:14px;color:var(--tx);background:transparent;border:2px solid var(--line);border-radius:8px;padding:7px 9px;min-width:0;resize:vertical}
.rfrow{display:flex;gap:8px}.rfrow input{flex:1}
.rmsg{margin:0;font-weight:700;font-size:13px;color:#1f7a3a}.rmsg.bad{color:#c62f22}
.rlist{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.rlist li{background:var(--paper);color:var(--tx);border:3px solid var(--line);border-radius:12px;padding:10px 12px;display:grid;gap:4px}
.rlist p{margin:0;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.rlist small{color:var(--muted);font-weight:700}
@media (max-width:860px){.rtop{grid-template-columns:1fr 1fr}.rform{grid-column:1/-1}}
@media (max-width:520px){.rtop{grid-template-columns:1fr}.ravg{justify-self:stretch}}
/* rewards (RW in js/app.js): homepage card, the shop dialog, jerseys next to leaderboard names */
.daily .dc.rwdc{cursor:pointer;font:inherit;font-weight:700;font-size:12px}
.daily .dc.rwdc .ic{width:26px;height:26px;flex:none;display:grid;place-items:center}
.rwj{display:block;width:100%;height:100%}
#rewards{position:fixed;inset:0;z-index:40;background:rgba(29,26,47,.55);overflow:auto;padding:calc(20px + env(safe-area-inset-top,0px)) 16px 40px}
.rwcard{max-width:760px;margin:0 auto;background:var(--paper);border:3px solid var(--line);border-radius:16px;box-shadow:6px 6px 0 var(--line);padding:22px 24px;line-height:1.5;color:var(--tx)}
.rwcard>.btn:first-child{float:right}
.rwcard h2{font-family:var(--display);font-weight:400;font-size:34px;margin:6px 0 12px}
.rwcard h3{margin:22px 0 8px;font-size:18px}
.rwcard h4{margin:14px 0 6px;font-size:14px;opacity:.85}
.rwlock{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;border:2px solid var(--line);border-radius:12px;padding:12px 16px}
.rwbig{width:150px;height:150px}
.rwpts{font-size:15px}.rwpts b{font-family:var(--display);font-weight:400;font-size:42px;line-height:1;margin-right:4px}
.rwlock p{margin:6px 0}
.rwbar{height:10px;border:2px solid var(--line);border-radius:6px;overflow:hidden;margin:6px 0 8px}
.rwbar i{display:block;height:100%;background:#ff7a1a}
.rwnum{font-weight:700;font-size:13px}.rwnum input{width:64px;margin-left:6px;font:inherit;padding:4px 6px;border:2px solid var(--line);border-radius:8px;background:var(--paper);color:var(--tx)}
.rwhow,.rwmuted{font-size:13px;opacity:.8}
.rwgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.rwi{border:2px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}
.rwi .rwa{width:72px;height:72px;margin-bottom:4px}
.rwi b{font-size:14px}.rwi small{font-size:11.5px;opacity:.75;flex:1}
.rwi .btn{margin-top:6px;font-size:12.5px;padding:6px 10px;width:100%}
.rwi .btn:disabled{opacity:.6;cursor:default}
.lbj{display:inline-block;width:18px;height:18px;vertical-align:-4px;margin-right:4px}
.lbj:empty{display:none}
@media (max-width:560px){.rwcard{padding:16px}.rwlock{grid-template-columns:96px 1fr;gap:12px}.rwbig{width:96px;height:96px}.rwgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rwo{stroke:#1d1a2f}
html:not([data-theme=light]) .rwo{stroke:#cfc9e6}
/* age notice before games with an age field (ageGate in js/app.js) */
.agegate{max-width:460px;margin:40px auto;padding:24px;border:3px solid var(--line);border-radius:14px;background:var(--paper);color:var(--tx);text-align:center;box-shadow:5px 5px 0 var(--line)}
.agegate h2{font-family:var(--display);font-weight:400;font-size:30px;margin:0 0 8px}
.agegate p{margin:0 0 16px;line-height:1.5}
.agebtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}