/* すぴーど数独 — styles (loaded after app.css) */
/* すぴーど = blue buttons (まいにち数独's すうどく mode stays orange) */
body[data-th=spd]{--acc:#3b8beb;--acc2:#c4dcfb;--soft:#edf5ff;--peer:#f2f7fe;--same:#d9e8fd;--sel:#bcd6fb}
/* game selector inside the home tabs (まいにち数独) */
.gsel{position:relative;flex:1;display:flex}
.gsel[hidden]{display:none}
.gmbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 8px;border-radius:15px;font-weight:900;font-size:15px;white-space:nowrap;color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,var(--surface));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--acc) 45%,transparent)}
.gmbtn .gmi{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--acc);font-style:normal}
.gmbtn .gmi svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.gsel[data-gm=sp] .gmbtn .gmi svg{fill:#fff;stroke:none}
.gmbtn .car{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.gsel.open .gmbtn .car{transform:rotate(180deg)}
.gmenu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:max(100%,160px);z-index:30;background:var(--sheet);border-radius:16px;box-shadow:0 12px 30px rgba(60,40,90,.25);padding:6px;display:none;flex-direction:column;gap:4px}
.gsel.open .gmenu{display:flex;animation:pop .2s}
:is(.htabs,.gselm) .gmenu button{flex:none;flex-direction:row;gap:10px;font-size:15px;padding:10px 14px;justify-content:flex-start;box-shadow:none;background:none;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;font-weight:900;font-size:15px;color:var(--ink);white-space:nowrap;text-align:start}
:is(.htabs,.gselm) .gmenu button svg{width:22px;height:22px;padding:4px;border-radius:8px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;background:#ef7c52;flex:none}
:is(.htabs,.gselm) .gmenu button[data-gm=sp] svg{background:#3b8beb;fill:#fff;stroke:none}
:is(.htabs,.gselm) .gmenu button.on{background:var(--surface2);color:var(--ink)}
:is(.htabs,.gselm) .gmenu button:hover{background:var(--surface2)}
.gtip{position:absolute;top:calc(100% + 12px);inset-inline-end:0;z-index:29;max-width:min(260px,80vw);width:max-content;white-space:normal;background:var(--acc);color:#fff;font-weight:800;font-size:13px;line-height:1.45;padding:8px 12px;border-radius:14px;box-shadow:0 8px 20px color-mix(in srgb,var(--acc) 35%,transparent);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s,transform .25s}
.gtip::before{content:"";position:absolute;top:-6px;inset-inline-end:22px;border:7px solid transparent;border-top:0;border-bottom-color:var(--acc)}
.gtip.on{opacity:1;transform:none}
.gsel.open .gtip{display:none}
.smixd{margin:-4px 0 10px}
@media (max-width:420px){.gmbtn{flex-direction:column;gap:2px;font-size:12px;padding:5px 4px}.gmbtn .gmi{width:24px;height:24px}.gmbtn .car{position:absolute;top:6px;inset-inline-end:6px;width:12px;height:12px}}
.ttl-ico.bolt{width:24px;height:24px}

/* ---------- home: today's speed card ---------- */
.sdbtn .md,.sdbtn > svg{width:46px;height:46px;flex:none}
.sdbtn{--bdc:#f2cfb8;--bgc:#fff4ec}
.sdbtn[data-sd="60"]{--bdc:#c8d3e2;--bgc:#f1f5fb}
.sdbtn[data-sd="90"]{--bdc:#f2d47a;--bgc:#fff9e0}
body.night .sdbtn{--bgc:#4a3428}body.night .sdbtn[data-sd="60"]{--bgc:#2f3a50}body.night .sdbtn[data-sd="90"]{--bgc:#4a4026}
.sdbtn:not(.done) > svg{filter:none}
.sdbtn .tries{display:flex;gap:4px;justify-content:center}
.sdbtn .tries i{width:8px;height:8px;border-radius:50%;background:var(--acc);opacity:.85}
.sdbtn .tries i.used{background:color-mix(in srgb,var(--ink3) 45%,transparent);opacity:.6}
.sdbtn .smed{position:absolute;top:6px;inset-inline-start:6px;width:20px;height:20px}
.sdbtn .smed svg{width:20px;height:20px}
.sopen{font-size:12.5px!important;color:var(--acc)!important;text-decoration:none;font-weight:900!important;white-space:nowrap}
.sopen:hover{text-decoration:underline}
.sgh{font-size:12.5px;font-weight:900;color:var(--ink2);margin:14px 0 6px;display:flex;align-items:center;gap:6px}
.sgl{display:flex;flex-direction:column;gap:6px}
.sgline{display:flex;align-items:center;gap:10px;background:var(--surface2);border-radius:14px;padding:7px 10px;text-align:start}
.sgline span{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.sgline b{font-size:13.5px;font-weight:900}
.sgline small{font-size:12px;color:var(--ink2)}
.sgline em{font-style:normal;font-family:var(--num);font-size:11.5px;font-weight:700;color:var(--ink2);white-space:nowrap;background:var(--surface);border-radius:99px;padding:2px 8px}
.sgline.new{box-shadow:inset 0 0 0 2px #ffcd4d}
.newt{font-style:normal;font-family:var(--num);font-size:10px;background:#ff4d6a;color:#fff;border-radius:99px;padding:1px 6px;vertical-align:2px}
.gi{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:11px;background:color-mix(in srgb,var(--gc) 16%,var(--surface));font-style:normal}
.gi svg{width:26px;height:26px}
.sgl.mini .sgline{background:var(--surface)}
.sbtnrow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
#home .sgline b{font-size:14.5px}#home .sgline small{font-size:13px}
@media (min-width:861px){#home .sgline b{font-size:15.5px}#home .sgline small{font-size:14px}}
.rwchip{font-size:12px}
.scal .day{cursor:default}
.scal .day.fut{opacity:.35}

/* collection tiers & categories */
.stier{margin-top:16px}
.stier .sth{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;padding:6px 12px;border-radius:14px;background:color-mix(in srgb,var(--tc) 14%,var(--surface2));flex-wrap:wrap}
.stier .sth b{font-size:16px;font-weight:900;color:var(--tc)}
.stier .sth small{font-size:12px;color:var(--ink2);flex:1;min-width:120px}
.stier .sth em{font-style:normal;font-family:var(--num);font-weight:700;font-size:13px;color:var(--ink2);display:inline-flex;align-items:center;gap:4px}
.stier .sth em.lk{font-family:var(--font);font-size:12px}
.stier .sth em svg{width:14px;height:14px}
.spic{display:grid;place-items:center;background:linear-gradient(135deg,var(--b1),var(--b2))!important}
body.night .spic{filter:brightness(.82) saturate(.9)}
.spic .cg{display:flex;align-items:center;justify-content:center;gap:2px}
.spic .cg svg{position:static!important;width:auto!important;height:auto!important}
.spic .cg.one svg{width:46%!important;max-width:84px;filter:drop-shadow(0 4px 6px rgba(60,40,90,.18))}
.spic .cg.one{width:100%;height:100%}
.spic .cg.shoe svg{width:52%!important;max-width:100px}
.spic .cg.shoe{width:100%;height:100%}
.spic .cg.many{flex-wrap:wrap;width:72%}
.spic .cg.many svg{width:40%!important}
.spic .cno{position:absolute;bottom:8px;inset-inline-end:10px;font-family:var(--num);font-weight:700;font-size:13px;background:rgba(255,255,255,.85);color:#7a6f8f;border-radius:99px;padding:1px 8px}
.scard.locked{opacity:.55}
.scard.locked .pic{filter:grayscale(.7)}
.gchip{display:inline-flex;font-size:10.5px;font-weight:700;padding:1px 8px;border-radius:99px;color:#fff;background:var(--gc);white-space:nowrap;line-height:1.5}
.gchip.std{background:#9a8fb8}
.scats{grid-template-columns:repeat(2,1fr)}
@container (min-width:600px){.scats{grid-template-columns:repeat(5,1fr)}}
.scatbox .spic{border-radius:16px;aspect-ratio:16/10;position:relative;overflow:hidden}
.scatbox{align-items:start}
.scatbox .sgl{grid-column:1/-1;margin-top:0}
@container (min-width:600px){.scatbox .sgl{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}
/* tier jump bar (sticks under the tabs) */
.stjump{overflow-x:auto;scrollbar-width:none;position:sticky;top:calc(var(--hh) + env(safe-area-inset-top) + var(--htH,0px) + 8px);z-index:9;display:flex;gap:6px;margin:12px -6px 0;padding:6px;border-radius:16px;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 12px rgba(90,60,120,.08)}
.stjump button{flex:1 0 auto;min-width:50px;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border-radius:12px;background:color-mix(in srgb,var(--tc) 14%,var(--surface2));color:var(--tc);line-height:1.2}
.stjump button b{font-size:13.5px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.stjump button small{font-size:10.5px;font-weight:700;color:var(--ink2)}
.stjump button.done small{color:var(--tc)}
.stier{scroll-margin-top:160px}
@media (max-width:599px){
  .scatbox .sgl.many{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .scatbox .sgl.many .sgline{padding:6px 8px;gap:8px}
  .scatbox .sgl.many .sgline small{display:none}
  .scatbox .sgl.many .sgline b{font-size:13px}
  .scatbox .sgl.many .gi{width:30px;height:30px}.scatbox .sgl.many .gi svg{width:22px;height:22px}
  .stjump button b{font-size:12.5px}
}
/* phones: compact course cards (small picture beside the name) */
@container (max-width:599px){
  .scats{gap:8px}
  .scard{flex-direction:row;align-items:center;border-radius:16px;min-height:66px}
  .scard .pic{width:58px;aspect-ratio:1;flex-shrink:0;margin:6px 0 6px 6px;border-radius:12px}
  [dir=rtl] .scard .pic{margin:6px 6px 6px 0}
  .scard .spic .cg.one svg{width:72%!important}
  .scard .spic .cg.shoe svg{width:74%!important}
  .scard .spic .cg.many{width:86%}.scard .spic .cg.many svg{width:44%!important}
  .scard .spic .cno{bottom:2px;inset-inline-end:2px;font-size:10px;padding:0 5px}
  .scard .tx{flex:1;min-width:0;padding:6px 8px 6px 9px;gap:3px}
  #home .scard .tx .nm,.scard .tx .nm{font-size:13.5px;line-height:1.25}
  #home .scard .pg{font-size:11.5px}
  .scard .tx .lv{display:none}
  .scard .crown{width:20px;height:20px;top:3px;inset-inline-end:4px}
  /* まいにち数独's コレクション / 変わり種 cards get the same compact rows on phones */
  .themes:not(.scats){gap:8px}
  .themes:not(.scats) .tcard{flex-direction:row;align-items:center;border-radius:16px;min-height:66px}
  .themes:not(.scats) .tcard .pic{width:58px;aspect-ratio:1;flex-shrink:0;margin:6px 0 6px 6px;border-radius:12px}
  [dir=rtl] .themes:not(.scats) .tcard .pic{margin:6px 6px 6px 0}
  .themes:not(.scats) .tcard:not(.vcard) .pic svg{width:auto;height:100%;left:50%;right:auto;transform:translateX(-50%)}
  .themes:not(.scats) .vcard .pic svg{width:74%}
  .themes:not(.scats) .tcard .no{top:auto;bottom:2px;inset-inline-start:auto;inset-inline-end:2px;font-size:10px;padding:0 5px}
  .themes:not(.scats) .tcard .tx{flex:1;min-width:0;padding:6px 8px 6px 9px;gap:3px}
  #home .themes:not(.scats) .tcard .tx .nm{font-size:13.5px;line-height:1.25}
  #home .themes:not(.scats) .tcard .pg{font-size:11.5px}
  .themes:not(.scats) .tcard .tx .lv{display:none}
  .themes:not(.scats) .tcard .crown{width:20px;height:20px;top:3px;inset-inline-end:4px}
}
.sstages .sst{gap:2px;padding:6px 2px}
.sst .kt{font-family:var(--num);font-size:clamp(9px,1.25vw,11.5px);font-weight:600;color:var(--ink2);white-space:nowrap}
.sst.next{box-shadow:0 3px 0 color-mix(in srgb,var(--tc) 60%,#000),0 0 0 3px var(--tc)}
.sst.cleared{background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--tc) 18%,var(--surface)))}
.sst.cleared .n{color:var(--tc)}
.sst.locked{opacity:.45}
.sst .stars{color:var(--ink3)}
.sst .stars > svg:only-child{width:13px;height:13px}
.sst .sgdot{position:absolute;top:5px;inset-inline-end:5px;display:flex;gap:2px}
.sst .sgdot i{width:6px;height:6px;border-radius:50%}

/* ---------- game screen ---------- */
#spd.on{display:grid;grid-template-columns:var(--sbs) minmax(260px,320px);grid-template-areas:"bar side" "tm side" "board side";gap:12px 28px;justify-content:center;align-items:start;align-content:center;min-height:calc(100dvh - var(--hh) - env(safe-area-inset-top) - 40px)}
.sgbar{grid-area:bar;display:flex;align-items:center;gap:6px;min-width:0}
.sgbar .ib{background:var(--chip);box-shadow:0 2px 8px rgba(90,60,120,.08)}
.sgbar .gt .tchip{font-size:10.5px;font-weight:700;color:#fff;border-radius:99px;padding:1px 8px;flex:none}
.scount{gap:3px}.scount b{font-size:16px}.scount small{font-size:11px;color:var(--ink3)}
.stimer{grid-area:tm;position:relative;display:flex;align-items:center;gap:10px}
.sbar{flex:1;height:16px;border-radius:99px;background:var(--chip);box-shadow:inset 0 2px 4px rgba(60,40,90,.12),0 2px 8px rgba(90,60,120,.08);overflow:hidden}
.sbar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ffb84d,#ff7a3d 60%,#ff5a7a);transition:width .1s linear}
.stimer.low .sbar i{background:linear-gradient(90deg,#ff4d6a,#ff2d55);animation:lowp .5s ease-in-out infinite alternate}
@keyframes lowp{to{opacity:.55}}
.sclock{font-size:30px;font-weight:700;min-width:72px;text-align:end;color:var(--ink);text-shadow:0 2px 0 rgba(255,255,255,.6)}
body.night .sclock{text-shadow:none}
.stimer.low .sclock{color:var(--err);animation:tick .5s ease-in-out infinite alternate}
@keyframes tick{to{transform:scale(1.08)}}
.spen{position:absolute;inset-inline-end:0;top:-6px;font-family:var(--num);font-weight:700;font-size:20px;color:var(--err);opacity:0;pointer-events:none}
.spen.on{animation:pen .9s ease-out}
@keyframes pen{0%{opacity:1;transform:translateY(0) scale(1.3)}100%{opacity:0;transform:translateY(-26px) scale(1)}}
.sbw{grid-area:board;position:relative;width:var(--sbs);height:var(--sbs)}
.sboard{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);border-radius:calc(var(--sbs) * .06);overflow:hidden;background:var(--cellbg);box-shadow:var(--shadow),0 0 0 6px rgba(255,255,255,.8);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;direction:ltr;transition:filter .25s,box-shadow .3s;transform-origin:50% 50%}
body.night .sboard{box-shadow:var(--shadow),0 0 0 6px rgba(255,255,255,.12)}
.sboard.spinning{overflow:visible}
.sboard.spinning .scell:nth-child(1){border-top-left-radius:calc(var(--sbs) * .06)}.sboard.spinning .scell:nth-child(4){border-top-right-radius:calc(var(--sbs) * .06)}.sboard.spinning .scell:nth-child(13){border-bottom-left-radius:calc(var(--sbs) * .06)}.sboard.spinning .scell:nth-child(16){border-bottom-right-radius:calc(var(--sbs) * .06)}
.sboard.hide{filter:blur(14px) saturate(.6)}
.sboard.cleared{box-shadow:var(--shadow),0 0 0 6px #fff,0 0 50px color-mix(in srgb,var(--acc) 70%,transparent)}
.sboard.cleared .scell{animation:sclr .38s ease-out}
@keyframes sclr{40%{background:color-mix(in srgb,var(--acc) 30%,var(--cellbg))}}
.scell{position:relative;display:grid;place-items:center;background:var(--cellbg);cursor:pointer;min-width:0;min-height:0}
.scell .v{font-family:var(--num);font-weight:600;font-size:calc(var(--sbs) * .14);line-height:1;color:var(--vmix);position:relative;z-index:1;transition:opacity .45s,filter .2s;display:grid;place-items:center}
.scell.given .v{color:var(--ink);font-weight:500}
.scell.hl{background:var(--same)}
.scell .fr{display:block;width:calc(var(--sbs) * .16);height:calc(var(--sbs) * .16)}
.scell .fr svg,.skey .fr svg,.sflick .fr svg{width:100%;height:100%;display:block}
.scell.mine .fr{filter:drop-shadow(0 0 0 transparent)}
.scell.mine::before{content:"";position:absolute;inset:14%;border-radius:22%;background:color-mix(in srgb,var(--acc) 9%,transparent);pointer-events:none}
.scell.pop .v{animation:cpop .28s cubic-bezier(.3,1.6,.5,1)}
.scell.bad{animation:shake .32s;background:var(--errbg)}
.scell.bad .v{color:var(--err)}
.scell.eaten::after{content:"";position:absolute;inset:20%;background:radial-gradient(circle,#c9a073 0 8%,transparent 9%) 10% 20%/30% 30%,radial-gradient(circle,#c9a073 0 7%,transparent 8%) 60% 70%/26% 26%;animation:crumb .6s ease-out forwards;pointer-events:none}
@keyframes crumb{from{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.3) translateY(10px)}}
.sgrid{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}
.sgrid path{fill:none}
.sgrid .thin{stroke:color-mix(in srgb,var(--acc) 22%,#e6dfee);stroke-width:3}
.sgrid .thick{stroke:color-mix(in srgb,var(--acc) 55%,#5a4a70);stroke-width:7;stroke-linecap:round}
body.night .sgrid .thin{stroke:rgba(200,190,255,.2)}
body.night .sgrid .thick{stroke:color-mix(in srgb,var(--acc) 55%,#cfc6ff)}
.ssel{position:absolute;width:25%;height:25%;left:0;top:0;z-index:5;pointer-events:none;border-radius:16%;box-shadow:inset 0 0 0 4px var(--acc),0 0 0 2px rgba(255,255,255,.6);transition:left .12s ease-out,top .12s ease-out;opacity:0}
.ssel.on{opacity:1}
.sboard.spot .ssel{box-shadow:inset 0 0 0 4px #ffd36b,0 0 16px rgba(255,211,107,.6)}
/* spotlight */
.sspot{position:absolute;inset:0;z-index:3;pointer-events:none;display:none;background:radial-gradient(var(--sr,30%) var(--sr,30%) at var(--sx,50%) var(--sy,50%),transparent 72%,rgba(18,14,46,.86) 100%)}
.sboard.spot .sspot{display:block}
.sboard.spot .sgrid .thin{stroke:rgba(255,255,255,.32)}
.sboard.spot .sgrid .thick{stroke:rgba(255,236,170,.75)}
/* mosaic */
.scell.mz .v{filter:blur(calc(var(--sbs) * .02))}
.scell.mz::after{content:"";position:absolute;inset:8%;border-radius:14%;z-index:2;background:conic-gradient(#d9c9ff 0 25%,#ffd6e6 0 50%,#c3b0f5 0 75%,#ffe9f2 0) 0 0/34% 34%;opacity:.92;animation:mzin .25s ease-out}
@keyframes mzin{from{transform:scale(.4);opacity:0}}
body.night .scell.mz::after{background:conic-gradient(#5a4a9a 0 25%,#7a4a7a 0 50%,#4a3a8a 0 75%,#6a5aaa 0) 0 0/34% 34%}
/* ghost ink */
.scell.gh .v{opacity:0}
.scell.gh::before{background:color-mix(in srgb,#8a93c8 12%,transparent);border:2px dashed color-mix(in srgb,#8a93c8 45%,transparent)}
/* ice */
.scell .ice{display:none;position:absolute;inset:6%;border-radius:18%;z-index:2;pointer-events:none;background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(190,226,255,.92) 45%,rgba(140,196,240,.92));box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),inset -4px -6px 10px rgba(90,150,210,.35),0 3px 8px rgba(70,120,190,.25)}
.scell .ice::before{content:"";position:absolute;left:14%;top:12%;width:30%;height:12%;border-radius:99px;background:#fff;opacity:.9;transform:rotate(-24deg)}
.scell.frozen .ice{display:block}
.scell.crack .ice::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 46%,rgba(70,130,200,.85) 47%,rgba(70,130,200,.85) 49%,transparent 50%),linear-gradient(35deg,transparent 52%,rgba(70,130,200,.7) 53%,rgba(70,130,200,.7) 55%,transparent 56%)}
.scell.hit .ice{animation:wob .25s}
@keyframes wob{30%{transform:rotate(-6deg) scale(.94)}70%{transform:rotate(5deg)}}
.scell.shatter::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle,#dff1ff 0 6%,transparent 7%) 10% 10%/40% 40%,radial-gradient(circle,#bfe2ff 0 6%,transparent 7%) 70% 30%/36% 36%,radial-gradient(circle,#fff 0 5%,transparent 6%) 40% 80%/30% 30%;animation:crumb .5s ease-out forwards}
/* bug */
.sbugs{position:absolute;inset:0;z-index:2;pointer-events:none}
.sbug{position:absolute;width:25%;height:25%;display:grid;place-items:center;pointer-events:auto;cursor:pointer;touch-action:none}
.sbug svg{width:78%;height:78%;transition:transform .2s;filter:drop-shadow(0 3px 3px rgba(60,40,90,.25))}
.sbug .legs{animation:legs .32s steps(2) infinite}
@keyframes legs{50%{transform:translateY(1.5px)}}
.sbug.flip svg{transform:scaleX(-1)}
.sbug.munch svg{animation:munch .22s ease-in-out infinite alternate}
@keyframes munch{to{transform:scale(1.08) rotate(5deg)}}
.sbug.hop svg{animation:bhop .45s ease-out}
@keyframes bhop{40%{transform:translateY(-30%) rotate(-20deg) scale(1.15)}}
body.still .sbug .legs{animation:none}
/* cloud */
.sclouds{position:absolute;inset:0;z-index:4;pointer-events:none}
.scloud{position:absolute;pointer-events:none;filter:drop-shadow(0 5px 7px rgba(70,95,150,.28))}
.scloud svg{width:100%;height:auto;display:block}
body.night .scloud{filter:brightness(.82) drop-shadow(0 5px 7px rgba(0,0,0,.35))}
/* calc */
.scell .cx{font-size:calc(var(--sbs) * .088);font-weight:700;white-space:nowrap;letter-spacing:-.02em;color:#b8740c}
.scell .cx.l{font-size:calc(var(--sbs) * .074)}
body.night .scell .cx{color:#ffcf6a}
/* upside */
.scell .v{transition:opacity .45s,filter .2s,transform .35s cubic-bezier(.3,1.3,.5,1)}
/* face-down cards */
.scell.fdown .v,.scell.fpeek .v{width:76%;height:76%;border-radius:16%}
.scell.fdown .v{background:repeating-linear-gradient(45deg,#26a69a 0 5px,#33b8aa 5px 10px);box-shadow:inset 0 0 0 3px rgba(255,255,255,.85),0 3px 6px rgba(30,90,80,.25);animation:cflip .22s ease-out}
.scell.fdown .v > *,.scell.fdown .v{color:transparent}
.scell.fdown .v > *{visibility:hidden}
.scell.fpeek .v{background:#e4f6f3;box-shadow:inset 0 0 0 2px #26a69a;animation:cflip .22s ease-out}
body.night .scell.fpeek .v{background:#1f4a46}
@keyframes cflip{from{transform:rotateY(90deg)}}
/* mole */
.scell .ml{display:none;position:absolute;inset:4% 8% 6%;z-index:3;pointer-events:none}
.scell .ml svg{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 3px rgba(80,50,30,.25))}
.scell.mole .ml{display:block;animation:mup .3s cubic-bezier(.3,1.5,.5,1)}
.scell.mole .v{opacity:0}
.scell.bonk .ml{display:block;animation:mdown .45s ease-in forwards}
@keyframes mup{from{transform:translateY(55%) scaleY(.3);opacity:0}}
@keyframes mdown{20%{transform:scale(1.15,.75)}100%{transform:translateY(55%) scaleY(.2);opacity:0}}
/* balloons & shooting stars (tappable) */
.sfloat{position:absolute;inset:0;z-index:4;pointer-events:none}
.sballoon{position:absolute;width:24%;pointer-events:auto;cursor:pointer;touch-action:none;filter:drop-shadow(0 4px 5px rgba(60,40,90,.22))}
.sballoon svg{width:100%;height:auto;display:block}
.sballoon.pop{animation:bpop .26s ease-out forwards}
@keyframes bpop{40%{transform:scale(1.25)}100%{transform:scale(1.6);opacity:0}}
.sstar{position:absolute;width:22%;aspect-ratio:1;pointer-events:auto;cursor:pointer;touch-action:none;filter:drop-shadow(0 0 8px rgba(255,214,90,.9))}
.sstar svg{width:100%;height:100%;display:block;animation:stw .5s linear infinite alternate}
.sstar.rtl svg{transform:scaleX(-1)}
.sstar.got{animation:sgot .38s ease-out forwards}
@keyframes stw{to{filter:brightness(1.25)}}
@keyframes sgot{to{transform:scale(1.8) rotate(40deg);opacity:0}}
.smiss{position:absolute;width:34%;display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:6;animation:smiss 1.3s ease-out forwards}
.smiss i{width:42%;aspect-ratio:1;filter:grayscale(1) brightness(.85);opacity:.8;animation:sfall 1.3s ease-in forwards}
.smiss i svg{width:100%;height:100%;display:block}
.smiss b{font-family:var(--num);font-weight:700;font-size:calc(var(--sbs) * .1);line-height:1.2;color:#fff;background:#ff4d6d;border-radius:99px;padding:.08em .5em;box-shadow:0 0 0 3px #fff,0 6px 14px rgba(180,30,60,.35);white-space:nowrap}
@keyframes smiss{0%{transform:scale(.4);opacity:0}15%{transform:scale(1.25);opacity:1}30%{transform:scale(1)}75%{opacity:1}100%{transform:translateY(-30%);opacity:0}}
@keyframes sfall{to{transform:translateY(60%) rotate(140deg);opacity:0}}
.stimer.hurt{animation:shake .4s}
.stimer.hurt .sclock{color:#ff4d6d}
/* power cut */
.sdark{position:absolute;inset:0;z-index:4;pointer-events:none;background:#14112b;opacity:0;transition:opacity .25s}
.sdark.on{opacity:.97;animation:flick .5s steps(1)}
@keyframes flick{0%{opacity:.9}15%{opacity:.2}30%{opacity:.95}45%{opacity:.4}60%{opacity:.97}}
/* sleepy */
.ssleep{position:absolute;inset:0;z-index:4;pointer-events:none;background:#16122e;opacity:0;transition:opacity .15s;display:grid;place-items:start end;padding:6%}
.ssleep b{font-family:var(--num);font-size:calc(var(--sbs) * .1);color:#cfc3ff;opacity:0;transition:opacity .3s}
.ssleep.z b{opacity:1;animation:zzz 1.6s ease-in-out infinite}
@keyframes zzz{50%{transform:translateY(-12%) rotate(-6deg)}}
/* paint */
.scell .pt{display:none;position:absolute;inset:3%;z-index:3;pointer-events:none;background:var(--pc,#c35bd6);border-radius:46% 54% 42% 58% / 55% 40% 60% 45%;box-shadow:calc(var(--sbs) * .03) calc(var(--sbs) * -.02) 0 calc(var(--sbs) * -.025) var(--pc,#c35bd6),calc(var(--sbs) * -.03) calc(var(--sbs) * .025) 0 calc(var(--sbs) * -.028) var(--pc,#c35bd6);animation:splat .25s cubic-bezier(.3,1.6,.5,1)}
.scell.paint .pt{display:block}
.scell.wipe .pt{display:block;animation:pwipe .3s ease-in forwards}
@keyframes splat{from{transform:scale(.2)}}
@keyframes pwipe{to{transform:scale(.3) rotate(30deg);opacity:0}}
/* order */
.scell .ot{position:absolute;top:7%;inset-inline-start:7%;z-index:2;font-family:var(--num);font-weight:700;font-size:calc(var(--sbs) * .05);min-width:1.6em;height:1.6em;border-radius:99px;display:grid;place-items:center;pointer-events:none}
.scell .ot:empty{display:none}
.scell.ordw .ot{background:#dfe9f7;color:#5a7bb0}
.scell.ordw{background:color-mix(in srgb,#3f8ee0 6%,var(--cellbg))}
.scell.ordn .ot{background:#3f8ee0;color:#fff;animation:onext 1s ease-in-out infinite alternate}
@keyframes onext{to{transform:scale(1.15)}}
.scell.nope{animation:shake .3s}
/* peep window: only cells near the selection can be seen */
.scell.pout .v,.scell.pout .ot{opacity:0;transition:opacity .15s}
.scell.pout{background:color-mix(in srgb,#2c2a4a 78%,var(--cellbg));transition:background .15s}
body.night .scell.pout{background:#141226}
/* contrary cells (あまのじゃく) */
.scell.revc{background:color-mix(in srgb,#e0566b 20%,var(--cellbg))}
.scell.revc::after{content:"⇄";position:absolute;top:6%;inset-inline-end:8%;font-size:calc(var(--sbs) * .05);font-weight:900;color:#e0566b;pointer-events:none}
/* dice */
.scell .dc,.skey .dc,.sflick .dc{display:block}
.scell .fr.dc{width:calc(var(--sbs) * .15);height:calc(var(--sbs) * .15)}
/* overlay: briefing / countdown / pause */
.scov{position:absolute;inset:-6px;z-index:7;display:none;align-items:center;justify-content:center;padding:10px}
.scov.on{display:flex}
.sbrief{width:100%;max-height:100%;overflow:auto;background:var(--sheet);border-radius:24px;box-shadow:0 18px 50px rgba(60,40,90,.28);padding:16px 18px 18px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;animation:pop .3s cubic-bezier(.2,.9,.3,1.2)}
.sbrief .sbig svg{width:64px;height:64px}
.sbrief > b{font-size:19px;font-weight:900;line-height:1.35}
.sbrief > small{font-size:13px;color:var(--ink2);font-weight:700}
.sbrief .sgl{width:100%}
.sbrief .sstd,.sbrief .srule{margin:0;font-size:12.5px;color:var(--ink2);line-height:1.6}
.sbrief .btn{margin-top:4px;position:sticky;bottom:0;flex-shrink:0;box-shadow:0 -10px 14px var(--sheet),0 5px 0 rgba(0,0,0,.12)}
@media (max-height:760px),(max-width:480px){.sbrief{padding:12px 14px 14px;gap:6px}.sbrief .sbig svg{width:44px;height:44px}.sbrief > b{font-size:17px}.sbrief .sgline small{font-size:11.5px}.sbrief .srule{font-size:11.5px}}
.scov.count{background:none}
.scd{font-family:var(--num);font-weight:700;font-size:calc(var(--sbs) * .34);color:#fff;-webkit-text-stroke:6px var(--acc);paint-order:stroke;text-shadow:0 8px 0 color-mix(in srgb,var(--acc) 50%,#000),0 14px 30px rgba(60,40,90,.35);animation:cd .62s cubic-bezier(.2,1.4,.4,1)}
.scd.go{font-size:calc(var(--sbs) * .24);-webkit-text-stroke-color:#3fbf7a;text-shadow:0 8px 0 #2a8a55,0 14px 30px rgba(60,40,90,.35)}
.scd.up{font-size:calc(var(--sbs) * .14);-webkit-text-stroke:5px #ff5a7a;text-shadow:0 6px 0 #b0304a,0 14px 30px rgba(60,40,90,.35);white-space:nowrap}
@keyframes cd{from{transform:scale(2.2);opacity:0}}
/* gimmick banner */
.sgban{position:absolute;left:50%;top:0;transform:translate(-50%,-50%) scale(.6);opacity:0;z-index:6;pointer-events:none;display:flex;gap:6px;transition:transform .35s cubic-bezier(.3,1.4,.5,1),opacity .25s,left .35s,top .35s;width:max-content;max-width:calc(100% + 20px);flex-wrap:wrap;justify-content:center}
.sgban.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.sgban.on.min{left:0;transform:translate(-14%,-62%) scale(.72);transform-origin:0 50%}
.sbn{display:flex;align-items:center;gap:8px;background:var(--sheet);border-radius:16px;padding:6px 12px 6px 6px;box-shadow:0 8px 22px rgba(60,40,90,.25),0 0 0 3px var(--gc)}
.sbn span{display:flex;flex-direction:column;line-height:1.3;text-align:start}
.sbn b{font-size:14px;font-weight:900}
.sbn b em{font-style:normal;color:#e8a20f;font-size:11px}
.sbn small{font-size:11.5px;color:var(--ink2);max-width:240px}
.sgban.min .sbn small{display:none}
/* combo popup */
.scombo{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:8;pointer-events:none;display:flex;flex-direction:column;align-items:center;opacity:0}
.scombo b{font-family:var(--num);font-size:calc(var(--sbs) * .1);color:#fff;-webkit-text-stroke:4px var(--acc);paint-order:stroke}
.scombo span{font-weight:900;font-size:15px;color:var(--acc);background:var(--sheet);border-radius:99px;padding:2px 10px;box-shadow:0 4px 10px rgba(60,40,90,.15)}
.scombo.on{animation:combo .7s ease-out}
@keyframes combo{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-90%) scale(1)}}
/* keys & side */
.sside{grid-area:side;display:flex;flex-direction:column;gap:14px;align-self:center}
.skeys{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;direction:ltr}
.skey{aspect-ratio:1.15;border-radius:22px}
.skey .n{font-size:44px;display:grid;place-items:center}
.skey .fr{width:56px;height:56px;display:block}
.sinfo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sinfo div{background:var(--chip);border-radius:14px;padding:8px 6px;text-align:center;box-shadow:0 2px 8px rgba(90,60,120,.08)}
.sinfo small{display:block;font-size:11px;color:var(--ink2);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sinfo b{font-size:20px;font-weight:600}
.sflick i{width:54px!important;height:54px!important;margin:-27px 0 0 -27px!important;font-size:24px}
.sflick .fr{width:34px;height:34px;display:block}
body.scompact main.gm{padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
body.scompact #spd.on{grid-template-columns:var(--sbs);grid-template-areas:"bar" "tm" "board" "side";gap:10px;min-height:calc(100dvh - var(--hh) - env(safe-area-inset-top) - 16px - env(safe-area-inset-bottom))}
body.scompact .sside{align-self:stretch;gap:8px}
body.scompact .skeys{grid-template-columns:repeat(4,1fr);gap:8px}
body.scompact .skey{aspect-ratio:auto;height:clamp(58px,9vh,78px);border-radius:16px}
body.scompact .skey .n{font-size:34px}
body.scompact .skey .fr{width:42px;height:42px}
body.scompact .shelp{display:none}
body.scompact .sinfo b{font-size:17px}
body.scompact .sinfo div{padding:5px 4px}
body.scompact .sgbar .gt{font-size:14px}
body.scompact .sclock{font-size:26px}
.sgbar .gt{min-width:0;flex:0 1 auto}
.sgbar .gstat{flex:none}

/* ---------- result / achievements / rewards ---------- */
.sresbig svg{width:110px;height:110px;display:block;margin:0 auto;animation:medal 1s cubic-bezier(.2,1.4,.4,1) both}
.sbig2{background:linear-gradient(135deg,#fff2df,#ffe6ef 60%,#e6efff)}
body.night .sbig2{background:linear-gradient(135deg,#4a3824,#4a2a3e 60%,#283a5a)}
.sbig2 svg{width:56px!important;height:56px!important}
.ach{position:relative}
.ach .rwb{position:absolute;top:4px;inset-inline-end:4px;width:26px;height:26px;border-radius:8px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.2);background:var(--surface)}
.ach .rwb svg{width:100%!important;height:100%!important;display:block}
.ach.lock .rwb{filter:grayscale(1) opacity(.5)}
.srw{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.srw.ic{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.srwi{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;background:var(--surface2);border-radius:16px;padding:8px}
.srwi .th{width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden;position:relative;background:var(--surface)}
.srw.ic .srwi .th{aspect-ratio:1}
.srwi .th svg{position:absolute;inset:0;width:100%;height:100%}
.srwi .th svg *{animation:none!important}
.srwi.lock .th > svg{filter:grayscale(1) opacity(.45)}
.srwi .th i{position:absolute;inset:0;display:grid;place-items:center;color:#fff}
.srwi .th i svg{position:static;width:26px;height:26px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.srwi b{font-size:12.5px;line-height:1.3}
.srwi small{font-size:10.5px;color:var(--ink2);line-height:1.3}
.rwt{width:64px;height:40px;border-radius:10px;overflow:hidden;flex:none;position:relative}
.rwt svg{position:absolute;inset:0;width:100%!important;height:100%!important}
.rwt.ic{width:44px;height:44px}
.rar.SP{background:linear-gradient(135deg,#ffb84d,#ff6b6b 50%,#a77be0);box-shadow:0 0 8px rgba(255,140,80,.5)}
@media (min-width:861px){.sbrief > b{font-size:22px}.sgline b{font-size:15px}.sgline small{font-size:13.5px}.srwi b{font-size:14px}.srwi small{font-size:12px}}
.spdcol{grid-column:1/-1}
.hpanel.spdpanel .dcol{min-width:0}
.spdapp .logo b.spdlogo{background:linear-gradient(90deg,#ff7a3d,#ff5a7a 50%,#a77be0);-webkit-background-clip:text;background-clip:text;color:transparent}
.sibling{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;padding:14px 16px;transition:transform .15s}
.sibling:hover{transform:translateY(-2px)}
.sibling .sibi svg{width:44px;height:44px;display:block}
.sibling span{display:flex;flex-direction:column;flex:1;min-width:0}
.sibling b{font-size:15.5px;font-weight:900}
.sibling small{font-size:12.5px;color:var(--ink2)}
.sibling i{font-style:normal;font-size:24px;color:var(--ink3)}

/* ---------- tutorial (すうぴょん) ---------- */
.sheet.tut .sh h3{font-size:17px}
.tdots{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:45%}
.tdots i{width:8px;height:8px;border-radius:99px;background:color-mix(in srgb,var(--ink3) 35%,transparent);transition:width .25s,background .25s}
.tdots i.past{background:color-mix(in srgb,var(--acc) 50%,transparent)}
.tdots i.on{width:22px;background:var(--acc)}
.tsay{display:flex;gap:10px;align-items:flex-start}
.tsay .tm{width:92px;flex:none}
.tmas{width:92px;height:92px;display:block;animation:bob 1.6s ease-in-out infinite alternate}
.tmas.yay{animation:tyay .5s ease-in-out infinite alternate}
@keyframes tyay{from{transform:translateY(0)}to{transform:translateY(-8px) rotate(-3deg)}}
.tmwave{transform-box:fill-box;transform-origin:20% 90%;animation:twave .5s ease-in-out infinite alternate}
@keyframes twave{to{transform:rotate(-24deg)}}
.tmears{transform-box:fill-box;transform-origin:50% 100%;animation:tear 2.4s ease-in-out infinite}
@keyframes tear{0%,80%,100%{transform:none}88%{transform:rotate(4deg)}94%{transform:rotate(-3deg)}}
body.still .tmas,body.still .tmwave,body.still .tmears{animation:none}
.tbub{position:relative;flex:1;min-width:0;background:var(--surface);border-radius:20px;padding:12px 14px;box-shadow:0 4px 14px rgba(90,60,120,.1);border:2px solid color-mix(in srgb,var(--acc) 22%,var(--line))}
.tbub::before{content:"";position:absolute;inset-inline-start:-11px;top:26px;border:9px solid transparent;border-inline-end-color:color-mix(in srgb,var(--acc) 22%,var(--line));border-inline-start:0}
.tbub::after{content:"";position:absolute;inset-inline-start:-7px;top:28px;border:7px solid transparent;border-inline-end-color:var(--surface);border-inline-start:0}
.tbub p{margin:0;font-size:15px;line-height:1.75;font-weight:700}
.ttask{margin-top:8px;font-size:13.5px;font-weight:900;color:#b0602a;background:#fff3dc;border-radius:12px;padding:6px 10px;display:inline-block}
body.night .ttask{background:#4a3824;color:#ffd28a}
.ttask.none{display:none}
.ttask.ok{color:#2f8a55;background:#e3f8ea}
body.night .ttask.ok{background:#24452f;color:#9fe6b8}
.ttask.miss{color:#c0405a;background:#ffe6ec}
body.night .ttask.miss{background:#4a2433;color:#ffb3c4}
.ttask.nudge{animation:shake .35s}
.tbd{display:grid;grid-template-columns:repeat(var(--n),1fr);background:var(--cellbg);border-radius:14px;overflow:hidden;box-shadow:var(--shadow),0 0 0 4px rgba(255,255,255,.7);direction:ltr}
.tbd .tc{display:grid;place-items:center;font-family:var(--num);font-weight:600;border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink);transition:background .15s}
.tbd .tc:nth-child(9n),.tbd.n4 .tc:nth-child(4n){border-right:0}
.tbd .tc.br{border-right:3px solid color-mix(in srgb,var(--acc) 55%,#5a4a70)}
.tbd .tc.bb{border-bottom:3px solid color-mix(in srgb,var(--acc) 55%,#5a4a70)}
.tbd .tc.u{color:var(--acc)}
.tbd .tc.h{background:color-mix(in srgb,#ffd84a 32%,var(--cellbg))}
.tbd .tc.h2{background:color-mix(in srgb,var(--acc) 12%,var(--cellbg))}
.tbd .tc.b{color:var(--acc);cursor:pointer;font-weight:700}
.tbd .tc.s{box-shadow:inset 0 0 0 3px var(--acc);background:var(--sel)}
.tbd .tc.no{color:var(--err);background:var(--errbg);animation:shake .3s}
.tbd .tc.pop{animation:cpop .3s}
.tbd.win{box-shadow:var(--shadow),0 0 0 4px #fff,0 0 30px color-mix(in srgb,var(--acc) 60%,transparent)}
.tbd.mini .tc{width:28px;height:28px;font-size:15px}
.tpad.n9{grid-template-columns:repeat(9,1fr)}
.tpad.off{visibility:hidden;pointer-events:none}
.tpad button:active{transform:translateY(3px);box-shadow:0 0 0 var(--keyedge)}
.tpair{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:center}
.tpic.sq{width:130px;height:130px;flex:none}
.tfinger{animation:tfing 1.6s ease-in-out infinite}
@keyframes tfing{0%,20%{transform:none}60%,80%{transform:translate(30px,-30px)}100%{transform:none}}
.ttools{display:flex;flex-direction:column;gap:6px;width:100%;max-width:460px}
.ttool{display:flex;align-items:center;gap:10px;background:var(--surface2);border-radius:14px;padding:8px 10px}
.ttool i{width:36px;height:36px;border-radius:12px;background:var(--surface);display:grid;place-items:center;flex:none;color:var(--acc);font-style:normal;font-weight:900;font-size:12px}
.ttool i svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ttool span{display:flex;flex-direction:column;min-width:0;line-height:1.4}
.ttool b{font-size:14px}
.ttool small{font-size:12.5px;color:var(--ink2)}
.tmedals{display:flex;gap:16px;justify-content:center}
.tmedals span{display:flex;flex-direction:column;align-items:center;gap:2px}
.tmedals svg{width:56px;height:56px}
.tmedals b{font-size:13px}
.tmedals small{font-size:11.5px;color:var(--ink2)}
.tcover{position:relative;width:100%;max-width:440px;aspect-ratio:16/9.5;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.tcover > svg{position:absolute;inset:0;width:100%;height:100%}
.tcover .tbig{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);width:44%}
.tcover .tbig svg{width:100%;height:auto}
.tspeedad{display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,#fff2df,#ffe6ef);border-radius:18px;padding:14px;max-width:460px;color:#43385a}
body.night .tspeedad{background:linear-gradient(135deg,#4a3824,#4a2a3e);color:var(--ink)}
.tspeedad p{margin:4px 0 10px;font-size:13px;line-height:1.6}
.tbarpic{display:flex;align-items:center;gap:10px;width:100%;max-width:420px}
.tbarpic b{font-size:24px;font-weight:700}
.tstages{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.tstages span{display:flex;flex-direction:column;align-items:center;background:var(--surface2);border-radius:14px;padding:8px 10px;min-width:64px}
.tstages span.hard{box-shadow:0 0 0 2px var(--acc)}
.tstages b{font-family:var(--num);font-size:18px}
.tstages small{font-size:11px;color:var(--ink2);font-family:var(--num);white-space:nowrap}
.tstages i{font-style:normal;color:var(--ink3);font-weight:900}
.tgims{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%}
@media (max-width:560px){.tgims{grid-template-columns:1fr}}
.trw{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.trw .th{width:120px;aspect-ratio:16/10;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 3px 10px rgba(60,40,90,.15)}
.trw .th svg{position:absolute;inset:0;width:100%;height:100%}
.trw .th svg *{animation:none!important}
.trw.ic span{width:64px;height:64px;border-radius:18px;overflow:hidden}
.trw.ic svg{width:100%;height:100%;display:block}
#tuNext.wait{opacity:.6}
#tuNext.glow{animation:tglow 1.2s ease-in-out infinite alternate}
@keyframes tglow{to{box-shadow:0 4px 0 color-mix(in srgb,var(--acc) 68%,#000),0 0 0 6px color-mix(in srgb,var(--acc) 25%,transparent)}}
@media (max-width:560px){.tsay .tm,.tmas{width:70px;height:70px}.tbub p{font-size:14px}}
#spd .skey .n{font-size:46px}
body.scompact #spd .skey .n{font-size:34px}
.shelp{font-size:12px;color:var(--ink2);line-height:1.7;background:var(--chip);border-radius:14px;padding:8px 12px}
.shelp kbd{font-family:var(--num);background:var(--surface);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 4px;font-size:11px}
.sibling span{text-align:start;align-items:flex-start}
@media (max-width:560px){.sheet.tut .sh h3{font-size:15px}.tdots{gap:3px}.tdots i{width:6px;height:6px}.tdots i.on{width:14px}}
.ract.smain .btn{width:min(100%,380px);font-size:20px;padding:16px 24px}
.ract.ssub{margin-top:12px}
.ract.ssub .btn{flex:1;max-width:182px}
.tflick{z-index:60}
.tbd .tc.b{touch-action:none}
.tpad button.press{transform:translateY(3px);box-shadow:0 0 0 var(--keyedge)}
.spen.sbon{color:#2fa860;inset-inline-end:auto;inset-inline-start:calc(100% - 150px)}
/* tutorial layout v2: picture / board on top, mascot + speech bubble below, no empty space */
.sheet.tut{height:auto;max-height:calc(100dvh - 32px)}
.sheet.tut .tbody{gap:16px;padding-top:6px}
.sheet.tut .tstage{min-height:0;justify-content:center}
.sheet.tut .tsay{align-items:center}
@media (min-width:861px){
  .sheet.tut{width:min(1040px,92vw)}
  .sheet.tut .sh h3{font-size:23px}
  .sheet.tut .tbody{padding:6px 32px 20px;gap:20px}
  .tsay .tm,.tmas{width:132px;height:132px}
  .tbub{padding:16px 22px;border-radius:24px}
  .tbub::before{top:50%;margin-top:-9px}.tbub::after{top:50%;margin-top:-7px}
  .tbub p{font-size:21px;line-height:1.7}
  .ttask{font-size:17px;padding:8px 14px;margin-top:10px}
  .tbd.n9 .tc{width:44px;height:44px;font-size:23px}
  .tbd.n4 .tc{width:88px;height:88px;font-size:44px}
  .tbd.mini .tc{width:40px;height:40px;font-size:20px}
  .tpad{width:min(100%,600px);gap:8px}
  .tpad button{height:56px;font-size:26px;border-radius:14px}
  .tpad.n4{width:min(100%,420px)}.tpad.n4 button{height:72px;font-size:34px}
  .ttools{max-width:640px;gap:8px}
  .ttool{padding:10px 14px}.ttool i{width:44px;height:44px}.ttool i svg{width:26px;height:26px}
  .ttool b{font-size:18px}.ttool small{font-size:15px}
  .tpic.sq{width:180px;height:180px}
  .tcover{max-width:620px}
  .tmedals svg{width:76px;height:76px}.tmedals b{font-size:16px}.tmedals small{font-size:14px}
  .tgims .sgline b{font-size:16.5px}.tgims .sgline small{font-size:14.5px}
  .tspeedad{max-width:640px;padding:18px}.tspeedad b{font-size:20px}.tspeedad p{font-size:16px}
  .tstages span{min-width:84px;padding:10px 14px}.tstages b{font-size:22px}.tstages small{font-size:13.5px}
  .tbarpic{max-width:560px}.tbarpic b{font-size:30px}
  .trw .th{width:170px}.trw.ic span{width:84px;height:84px}
  .sheet.tut .sf .btn{font-size:17px;padding:12px 28px}
}

.sboard.turning{z-index:6}
/* fruit keys: big fruit, its number small in the top-left corner */
#spd .skey.fk .n{width:100%;height:100%;display:grid;place-items:center}
#spd .skey.fk .fr{width:72%;height:72%;max-width:120px;max-height:120px}
body.scompact #spd .skey.fk .fr{width:78%;height:78%}
.skey .kd{position:absolute;top:8px;inset-inline-start:10px;font-style:normal;font-family:var(--num);font-weight:700;font-size:15px;line-height:1;color:var(--ink2);background:var(--surface2);border-radius:8px;padding:3px 6px}
body.scompact .skey .kd{top:4px;inset-inline-start:5px;font-size:11px;padding:2px 4px}
.sgban.on.min.many{flex-wrap:nowrap;gap:3px}
.sgban.min.many .sbn{padding:4px;gap:0}
.sgban.min.many .sbn span{display:none}
.skeys.nudge{animation:shake .35s}
/* bomb */
.scell.bomb::after{content:"";position:absolute;inset:6%;border-radius:20%;z-index:2;pointer-events:none;background:conic-gradient(#ff8a3d calc(var(--fuse,1) * 360deg),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px))}
.scell.bomb .v::before{content:"";display:block;width:calc(var(--sbs) * .1);height:calc(var(--sbs) * .1);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='14' cy='19' r='10' fill='%2343385a'/%3E%3Cpath d='M20 11l3-3' stroke='%2343385a' stroke-width='3.2' stroke-linecap='round'/%3E%3Cpath d='M23 8q2-3 5-2' fill='none' stroke='%23c9a073' stroke-width='1.8'/%3E%3Ccircle cx='27' cy='5' r='2.2' fill='%23ffcd3c'/%3E%3Ccircle cx='11' cy='20' r='1.4' fill='%23fff'/%3E%3Ccircle cx='17' cy='20' r='1.4' fill='%23fff'/%3E%3C/svg%3E") center/contain no-repeat;animation:bombp .5s ease-in-out infinite alternate}
@keyframes bombp{to{transform:scale(1.15)}}
.scell.boom{animation:boom .5s ease-out}
@keyframes boom{0%{background:#ffd36b}40%{background:#ff8a3d;transform:scale(1.08)}100%{}}
/* swap */
.scell.swp{transition:transform .4s cubic-bezier(.4,1.3,.5,1);z-index:2;box-shadow:0 6px 16px rgba(60,40,90,.2)}
/* tutorial on phones: never squeeze the board or let the bubble overlap it */
.sheet.tut .tstage,.sheet.tut .tsay{flex-shrink:0}
.sheet.tut .tbody{overflow-y:auto}
@media (max-width:560px){
  .tgims{grid-template-columns:repeat(2,1fr);gap:6px}
  .tgims .sgline{padding:6px 8px;gap:8px}
  .tgims .sgline small{display:none}
  .tgims .sgline b{font-size:13px}
  .tgims .gi{width:30px;height:30px}.tgims .gi svg{width:22px;height:22px}
  .sheet.tut .tbody{gap:12px}
}


/* ---------- tutorial layout (fixed box · big text · big board) ---------- */
#mTut .sheet.tut{width:min(640px,100%);height:min(92dvh,800px)!important;max-height:none!important;display:flex;flex-direction:column}
#mTut .sheet.tut .sh h3{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:560px){#mTut .sheet.tut .sh h3{font-size:16px}}
#mTut .tbody{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;overflow:hidden;padding-bottom:12px}
/* the stage takes all the room left; boards size themselves from it (container units) */
#mTut .tstage{flex:1;min-height:0;container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden}
#mTut .tstage > *{--t9:min(calc((100cqw - 10px) / 9), calc((100cqh - 74px) / 9), 66px);--t4:min(calc((100cqw - 10px) / 4), calc((100cqh - 92px) / 4), 116px)}
#mTut .tbd.n9 .tc{width:var(--t9);height:var(--t9);font-size:calc(var(--t9) * .56)}
#mTut .tbd.n4 .tc{width:var(--t4);height:var(--t4);font-size:calc(var(--t4) * .5)}
#mTut .tbd.mini .tc{width:28px!important;height:28px!important;font-size:15px!important}
#mTut .tpad{display:grid;gap:6px;direction:ltr;flex:none}
#mTut .tpad.n9{width:calc(var(--t9) * 9);grid-template-columns:repeat(9,1fr)}
#mTut .tpad.n4{width:calc(var(--t4) * 4);grid-template-columns:repeat(4,1fr)}
#mTut .tpad button{height:min(54px,max(40px,calc(var(--t9) * 1.05)));border-radius:12px;background:var(--surface);box-shadow:0 3px 0 var(--keyedge),0 4px 10px rgba(90,60,120,.08);font-family:var(--num);font-weight:600;font-size:22px;color:var(--vmix)}
#mTut .tpad.n4 button{height:60px;font-size:28px}
/* pictures / lists scroll inside the stage if they ever need more room */
#mTut .tstage:not(:has(.tbd:not(.mini))){overflow-y:auto;justify-content:safe center}
#mTut .tsay{flex:none}
#mTut .tbub{flex:1;min-width:0}
#mTut .tbub p{font-size:16.5px;line-height:1.75}
#mTut .ttask{font-size:14.5px}
/* PC: board on the left, すうぴょん and the speech bubble on the right */
@media (hover:hover) and (pointer:fine) and (min-width:820px){
  #mTut .sheet.tut{width:min(1080px,94vw);height:min(92dvh,860px)!important}
  #mTut .sheet.tut .sh h3{font-size:22px}
  #mTut .tbody{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:28px;align-items:stretch;padding:8px 28px 16px}
  #mTut .tstage > *{--t9:min(calc((100cqw - 10px) / 9), calc((100cqh - 82px) / 9), 68px)}
  #mTut .tsay{flex-direction:column;align-items:center;justify-content:center;gap:6px}
  #mTut .tsay .tm,#mTut .tmas{width:150px;height:150px}
  #mTut .tbub{flex:none;width:100%;padding:18px 20px}
  #mTut .tbub::before{inset-inline-start:calc(50% - 10px);top:-12px;border:10px solid transparent;border-bottom-color:color-mix(in srgb,var(--acc) 22%,var(--line));border-top:0}
  #mTut .tbub::after{inset-inline-start:calc(50% - 8px);top:-8px;border:8px solid transparent;border-bottom-color:var(--surface);border-top:0}
  #mTut .tbub p{font-size:20px;line-height:1.8}
  #mTut .ttask{font-size:16.5px;margin-top:12px;padding:8px 12px}
  #mTut .ttool b{font-size:16px}#mTut .ttool small{font-size:14px}
  #mTut .tpad button{font-size:26px}
  #mTut .tmedals svg{width:84px;height:84px}#mTut .tmedals b{font-size:16px}#mTut .tmedals small{font-size:13.5px}
  #mTut .ttools{max-width:560px}#mTut .ttool{padding:11px 14px}#mTut .ttool i{width:44px;height:44px}
  #mTut .tpic.sq{width:170px;height:170px}
}

/* phones: the すうどく daily tab skips the 今日のすぴーど数独 card (too much at once; it stays on PC) */
@media (max-width:860px){.hpanel[data-m=su] #spdToday{display:none}}

/* daily result: partial-progress bonus */
.spart{margin:6px auto 0;width:fit-content;font-weight:800;font-size:13.5px;color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,var(--surface));border-radius:99px;padding:4px 14px}
/* phones: the game selector sits above the home content (the tab row is the bottom bar there) */
.gselm .gsel{margin:0 0 12px}
.gselm .gmbtn{flex-direction:row;gap:8px;font-size:15px;padding:8px 12px;background:color-mix(in srgb,var(--acc) 8%,var(--paper));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--acc) 45%,transparent),var(--shadow)}
.gselm .gmbtn .gmi{width:28px;height:28px}
.gselm .gmbtn .car{position:static;width:16px;height:16px}
.gselm .gmenu{inset-inline:0;min-width:0}
.gselm .gtip{inset-inline-end:auto;inset-inline-start:50%;transform:translate(-50%,-6px)}
.gselm .gtip.on{transform:translateX(-50%)}
.gselm .gtip::before{inset-inline-end:auto;left:calc(50% - 7px)}
/* phones: the tier jump bar sticks to the top of the home area (it scrolls by itself there) */
@media (max-width:760px){ body.scr-home #home .stjump{top:-6px} }