/* ═══ 19r-arcade.css ═══ ひまつぶし（2048・マインスイーパー・ソリティア・ブロックパズル・星あわせ）の見た目 */

/* ── 入れもの ── */
/* 切り替えの札：6 つあるので、狭い画面では横に送る帯にする（コミュニティの札は幅いっぱいに等分するが、ここでそうすると
   「💣 マインスイーパー」が札からはみ出して、頁ごと横に揺れた） */
#arctabs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
#arctabs[hidden]{display:none}
#arctabs .arcnow{font-size:15px;font-weight:800}
#arcsel{margin-left:auto;background:var(--sur);color:var(--tx);border:1px solid var(--line2);border-radius:10px;font:inherit;font-size:13px;font-weight:700;padding:7px 10px;cursor:pointer;max-width:100%}
.arclaunch .gl .arcbest{display:block;font-style:normal;font-size:11.5px;color:var(--irm);margin-top:5px;font-weight:700}
.arcnote{font-size:12px;color:var(--dim);margin:12px 0 0}
.arcgame{position:relative}
.arcbar{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;margin-bottom:10px}
.arcstat{background:var(--sur);border:1px solid var(--line);border-radius:12px;padding:5px 12px;min-width:78px;display:flex;flex-direction:column;line-height:1.25}
.arcstat span{font-size:11px;color:var(--dim)}
.arcstat b{font-size:19px}
.arcbtns{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:auto}
.arcbtns .btn.on{background:var(--irm);border-color:var(--irm);color:var(--bg)}
.archelp{font-size:12px;color:var(--dim);margin:10px 0 0}
.arcov{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,10,16,.6);backdrop-filter:blur(2px);border-radius:inherit;z-index:50;animation:arcfade .25s}
.arcovin{background:var(--sur);border:1px solid var(--line2);border-radius:14px;padding:16px 22px;text-align:center;max-width:90%;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.arcovin>b{display:block;font-size:20px;font-family:var(--disp);margin-bottom:4px}
.arcovin p{margin:4px 0;font-size:13px;color:var(--dim)}
.arcovin .arcgot{color:var(--irm);font-weight:800;font-size:15px}
.arcovin .row{display:flex;gap:8px;justify-content:center;margin-top:10px}
@keyframes arcfade{from{opacity:0}to{opacity:1}}

/* ── 2048 ── */
.mgwrap{display:flex;justify-content:center}
.mgboard{--gap:10px;position:relative;width:min(100%,440px,calc(var(--fitH) - 90px));aspect-ratio:1;background:#2a2f3d;border-radius:14px;padding:var(--gap);display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:var(--gap);touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.mgboard:focus-visible{box-shadow:0 0 0 2px var(--irm)}
.mgboard>i{background:rgba(255,255,255,.06);border-radius:8px}
body.light .mgboard{background:#bbada0}
body.light .mgboard>i{background:rgba(238,228,218,.38)}
.mgtiles{position:absolute;inset:var(--gap)}
.mgt{position:absolute;left:0;top:0;width:calc((100% - 3 * var(--gap)) / 4);height:calc((100% - 3 * var(--gap)) / 4);z-index:2;
  transform:translate(calc(var(--c) * (100% + var(--gap))),calc(var(--r) * (100% + var(--gap))));transition:transform .11s ease-in-out;
  display:grid;place-items:center;border-radius:8px;font-weight:800;font-family:var(--num);font-size:min(36px,8.6vw);background:#eee4da;color:#776e65}
.mgt[data-d="3"]{font-size:min(30px,7.2vw)}.mgt[data-d="4"]{font-size:min(24px,5.8vw)}.mgt[data-d="5"],.mgt[data-d="6"]{font-size:min(19px,4.6vw)}
.mgt[data-v="4"]{background:#ede0c8}
.mgt[data-v="8"]{background:#f2b179;color:#fff}
.mgt[data-v="16"]{background:#f59563;color:#fff}
.mgt[data-v="32"]{background:#f67c5f;color:#fff}
.mgt[data-v="64"]{background:#f65e3b;color:#fff}
.mgt[data-v="128"]{background:#edcf72;color:#fff;box-shadow:0 0 14px rgba(243,215,116,.35)}
.mgt[data-v="256"]{background:#edcc61;color:#fff;box-shadow:0 0 18px rgba(243,215,116,.45)}
.mgt[data-v="512"]{background:#edc850;color:#fff;box-shadow:0 0 22px rgba(243,215,116,.55)}
.mgt[data-v="1024"]{background:#edc53f;color:#fff;box-shadow:0 0 26px rgba(243,215,116,.65)}
.mgt[data-v="2048"]{background:#edc22e;color:#fff;box-shadow:0 0 32px rgba(243,215,116,.8)}
.mgt[data-v="big"]{background:#3c3a32;color:#fff;box-shadow:0 0 20px rgba(255,194,71,.5)}
.mgt.gone{z-index:1}
.mgt.born{animation:mgborn .18s ease .09s both}
.mgt.pop{animation:mgpop .2s ease .08s}
@keyframes mgborn{from{scale:0}to{scale:1}}
@keyframes mgpop{0%{scale:1}50%{scale:1.18}100%{scale:1}}
.mgboard.nope{animation:arcnope .25s}
@keyframes arcnope{25%{translate:-5px 0}75%{translate:5px 0}}

/* ── マインスイーパー ── */
.mswrap{position:relative;overflow-x:auto;display:flex;justify-content:center;padding-bottom:4px}
.msgrid{display:grid;grid-template-columns:repeat(var(--w),var(--cs));gap:2px;background:var(--line);padding:2px;border-radius:8px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;outline:none;margin:0 auto}
.msc{width:var(--cs);height:var(--cs);display:grid;place-items:center;background:linear-gradient(180deg,#3d4764,#2c3450);border-radius:3px;font-weight:800;font-family:var(--num);font-size:calc(var(--cs) * .58);cursor:pointer;line-height:1}
.msc:hover{filter:brightness(1.18)}
.msc.o{background:#171b26;cursor:default;filter:none}
.msc.f,.msc.m{font-size:calc(var(--cs) * .5)}
.msc.x{background:#8b1a2b}
.msc.bad{color:#ff5a7a}
.msc.n1{color:#5fb0ff}.msc.n2{color:#7bec9c}.msc.n3{color:#ff6b6b}.msc.n4{color:#b39bff}.msc.n5{color:#ffb347}.msc.n6{color:#4fe0d0}.msc.n7{color:#eeeeee}.msc.n8{color:#9aa3b5}
body.light .msc{background:linear-gradient(180deg,#d3d9e8,#b9c2d6)}
body.light .msc.o{background:#f3f5f9}
body.light .msc.x{background:#ffb3bf}
body.light .msc.n1{color:#1565c0}body.light .msc.n2{color:#2e7d32}body.light .msc.n3{color:#c62828}body.light .msc.n4{color:#4527a0}body.light .msc.n5{color:#8d4a00}body.light .msc.n6{color:#00838f}body.light .msc.n7{color:#333}body.light .msc.n8{color:#777}
.msgrid:focus-visible .msc.cur{outline:2px solid var(--irm);outline-offset:-2px}
.mslv{display:inline-flex;gap:4px}

/* ── ソリティア ── */
.sowrap{display:flex;justify-content:center}
.soboard{position:relative;user-select:none;-webkit-user-select:none;min-height:200px;border-radius:12px}
.soslot{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border:2px dashed rgba(255,255,255,.14);border-radius:calc(var(--cw) * .09);display:grid;place-items:center;color:rgba(255,255,255,.18);font-weight:800;font-size:calc(var(--cw) * .36)}
.soslot.stk{cursor:pointer;border-style:solid}
.soslot.stk.again::after{content:"↻";color:rgba(255,255,255,.55);font-size:calc(var(--cw) * .5)}
body.light .soslot{border-color:rgba(0,0,0,.15);color:rgba(0,0,0,.22)}
body.light .soslot.stk.again::after{color:rgba(0,0,0,.45)}
.sc{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);border-radius:calc(var(--cw) * .09);background:#fdfdfb;border:1px solid #c5c9d2;box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:transform .18s ease;cursor:pointer;touch-action:none;color:#1b1f28;overflow:hidden;will-change:transform}
.sc.r{color:#d0263a}
.sc .tl,.sc .br{position:absolute;font-weight:800;font-family:var(--num);font-size:calc(var(--cw) * .28);line-height:1;display:flex;flex-direction:column;align-items:center;letter-spacing:-.04em}
.sc .tl{left:6%;top:4%}.sc .br{right:6%;bottom:4%;rotate:180deg}
.sc .tl i,.sc .br i{font-style:normal;font-size:calc(var(--cw) * .24)}
.sc .md{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--cw) * .5);padding-top:6%}
.sc.dn{background:repeating-linear-gradient(45deg,#2f5fb3 0 5px,#274f98 5px 10px);border-color:#1d3f7a}
.sc.dn::after{content:"";position:absolute;inset:8%;border:1.5px solid rgba(255,255,255,.35);border-radius:calc(var(--cw) * .06)}
.sc.dn>*{display:none}
.sc.drag{transition:none;box-shadow:0 12px 26px rgba(0,0,0,.5);cursor:grabbing}
.sc.shake{animation:arcnope .3s}
.sc.hint,.soslot.hint{animation:sohint 1.2s}
@keyframes sohint{0%,100%{box-shadow:0 1px 3px rgba(0,0,0,.35)}30%,70%{box-shadow:0 0 0 3px var(--irm),0 0 18px var(--irm)}}
.soboard.won .sc{box-shadow:0 0 12px rgba(255,194,71,.55)}

/* ── ブロックパズル ── */
/* 盤と、下の 3 つの置き場（盤の 0.35 倍の高さ）が画面の高さに収まる大きさ（--bks） */
.bkwrap{--bks:min(calc(100vw / var(--z) - 40px),400px,calc((var(--fitH) - 130px) / 1.35));display:flex;flex-direction:column;align-items:center;gap:12px}
.bkboard{position:relative;width:min(100%,var(--bks));aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:3px;padding:6px;background:#161b27;border:1px solid var(--line2);border-radius:12px;user-select:none;-webkit-user-select:none}
body.light .bkboard{background:#dfe4ee}
.bkc{border-radius:5px;background:rgba(255,255,255,.05);transition:background-color .12s}
body.light .bkc{background:rgba(0,0,0,.06)}
.bkc.k1,.bkp .k1{background:linear-gradient(145deg,#ff8a8a,#d94848)}
.bkc.k2,.bkp .k2{background:linear-gradient(145deg,#ffc56e,#e8891f)}
.bkc.k3,.bkp .k3{background:linear-gradient(145deg,#ffe36b,#e0b21d)}
.bkc.k4,.bkp .k4{background:linear-gradient(145deg,#86e8a0,#35b35d)}
.bkc.k5,.bkp .k5{background:linear-gradient(145deg,#7fd6fb,#2a9fd6)}
.bkc.k6,.bkp .k6{background:linear-gradient(145deg,#9aa6ff,#5061e0)}
.bkc.k7,.bkp .k7{background:linear-gradient(145deg,#a0ccff,#4f8ed6)}
.bkc[class*=" k"],.bkp i{box-shadow:inset 0 -3px 0 rgba(0,0,0,.22),inset 0 2px 0 rgba(255,255,255,.35)}
.bkc.gh{opacity:.5}
.bkc.bad{background:rgba(255,61,127,.28)}
.bkc.clr{box-shadow:inset 0 0 0 2px #fff,0 0 12px rgba(255,255,255,.55)}
.bkc.boom{animation:bkboom .32s forwards}
@keyframes bkboom{0%{scale:1}40%{scale:1.15;filter:brightness(1.8)}100%{scale:0;opacity:0}}
.bkpop{position:absolute;left:0;right:0;top:38%;text-align:center;font-weight:800;font-size:22px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7);pointer-events:none;opacity:0;white-space:nowrap;z-index:5}
.bkpop.on{animation:bkpop 1.1s ease-out}
@keyframes bkpop{0%{opacity:0;translate:0 10px;scale:.85}15%{opacity:1;translate:0 0;scale:1.05}70%{opacity:1}100%{opacity:0;translate:0 -30px}}
.bktray{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,var(--bks))}
.bkslot{--u:calc(var(--bks) / 16);height:calc(var(--u) * 5.6);display:grid;place-items:center;background:var(--sur);border:1px solid var(--line);border-radius:12px;touch-action:none;cursor:grab}
.bkslot.sel{border-color:var(--irm);box-shadow:0 0 0 1px var(--irm) inset}
.bkp{display:grid;gap:2px;grid-template-columns:repeat(var(--w),var(--u));grid-template-rows:repeat(var(--h),var(--u))}
.bkp i{border-radius:4px}
.bkp b{visibility:hidden}
.bkp.nofit{opacity:.32;filter:grayscale(.6)}
#bkfloat{position:fixed;left:0;top:0;z-index:300;pointer-events:none;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}
#bkfloat .bkp{gap:3px}
#bkfloat .bkp i{border-radius:5px}

/* ── 星あわせ ── */
.dpwrap{position:relative;display:flex;justify-content:center}
#dpcv{border-radius:14px;border:1px solid var(--line2);touch-action:none;cursor:crosshair;display:block;max-width:100%}
.dpnext b{display:flex;align-items:center;min-height:24px}
.dpball{display:inline-block;border-radius:50%;vertical-align:middle;box-shadow:inset -2px -2px 4px rgba(0,0,0,.25)}
.dpball.sun{width:24px;height:24px;background:radial-gradient(circle at 40% 35%,#fffbe0,#ffcc33 55%,#ff8a00);box-shadow:0 0 10px #ffb300}
.dpchain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px;margin:10px 0 0;font-size:10.5px;color:var(--dim)}
.dpchain span{display:inline-flex;flex-direction:column;align-items:center;gap:2px}
.dpchain em{font-style:normal;color:var(--faint)}

@media(max-width:560px){
  .arcstat{min-width:64px;padding:4px 9px}
  .arcstat b{font-size:17px}
  .arcbtns{margin-left:0;width:100%}
  .mgboard{--gap:7px}
}

/* ── ブロックくずし（19wa-brick.js） ── */
.bqwrap{position:relative;display:flex;justify-content:center}
#bqcv{width:min(100%,420px,calc((var(--fitH) - 110px) * .75));margin:0 auto;aspect-ratio:3/4;height:auto;display:block;border-radius:14px;background:#141824;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
/* ── ナンプレ（19wb-numpl.js） ── */
/* .npc は .npgrid の中だけ（TRPG 卓の敵の駒 .pc.npc に白い箱が付いていた。2026-09-26） */
.npwrap{position:relative;display:flex;justify-content:center}
.npgrid{display:grid;grid-template-columns:repeat(9,1fr);width:min(100%,450px,calc(var(--fitH) - 235px));aspect-ratio:1;background:var(--sur);border:2px solid var(--tx);border-radius:8px;overflow:hidden;-webkit-user-select:none;user-select:none}
.npgrid .npc{border:0;border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);background:var(--sur);color:var(--irm);font:inherit;font-size:clamp(15px,4.6vw,24px);font-weight:700;padding:0;cursor:pointer;display:grid;place-items:center;min-width:0;min-height:0}
.npgrid .npc.giv{color:var(--tx);font-weight:900}
.npgrid .npc.rb{border-right:2px solid var(--tx)}
.npgrid .npc.bb{border-bottom:2px solid var(--tx)}
.npgrid .npc.peer{background:var(--sur2)}
.npgrid .npc.same{background:#ffc24733}
.npgrid .npc.sel{background:#ffc24766;box-shadow:inset 0 0 0 2px var(--irm)}
.npgrid .npc.bad{color:#ff5a5a}
.npn{display:grid;grid-template-columns:repeat(3,1fr);width:100%;height:100%;font-size:clamp(7px,1.9vw,10px);color:var(--dim);font-weight:700}
.npn i{font-style:normal;display:grid;place-items:center;line-height:1}
.nppad{display:grid;grid-template-columns:repeat(9,1fr);gap:5px;width:min(100%,450px,max(calc(var(--fitH) - 200px),300px));margin:10px auto 0}
.npd{display:flex;flex-direction:column;align-items:center;padding:6px 0 3px;border-radius:9px;border:1px solid var(--line2);background:var(--sur2);color:var(--tx);font:inherit;cursor:pointer;min-height:48px}
.npd b{font-size:20px;line-height:1.1}
.npd small{font-size:10px;color:var(--dim)}
.npd.done{opacity:.4}
.npk{grid-column:span 2;padding:9px 4px;border-radius:9px;border:1px solid var(--line2);background:var(--sur);color:var(--tx);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.npk:nth-of-type(13){grid-column:span 3}
.npk.on{border-color:var(--irm);color:var(--irm);box-shadow:0 0 0 1px var(--irm) inset}
/* ── いろあつめ（19wc-same.js） ── */
.sgwrap{display:flex;justify-content:center}
.sgboard{position:relative;width:min(100%,400px,calc((var(--fitH) - 90px) * 10 / 12));aspect-ratio:10/12;background:#1d2130;border-radius:12px;overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.sgboard.nope{animation:arcnope .25s}
.sgt{position:absolute;left:calc(var(--x) * 10%);top:calc(var(--y) * 100% / 12);width:10%;height:calc(100% / 12);border:0;padding:0;margin:0;background:transparent;cursor:pointer;
 display:grid;place-items:center;font-size:clamp(12px,3.6vw,18px);color:#ffffffd0;transition:left .18s ease,top .18s ease,transform .15s,opacity .15s}
.sgt::before{content:"";position:absolute;inset:6%;border-radius:22%;background:var(--sgc);box-shadow:inset 0 -3px 0 #00000030;z-index:-1}
.sgt{z-index:1}
.sgt[data-v="1"]{--sgc:#ff6b6b}.sgt[data-v="2"]{--sgc:#4dabf7}.sgt[data-v="3"]{--sgc:#51cf66}.sgt[data-v="4"]{--sgc:#fcc419}.sgt[data-v="5"]{--sgc:#97c6fc}
.sgt.hi::before{box-shadow:0 0 0 3px #fff inset}
.sgt.cur{outline:2px solid #fff;outline-offset:-2px}
.sgt.gone{transform:scale(0);opacity:0}
.sgtip{position:absolute;top:6px;left:50%;translate:-50% 0;background:#000a;color:#fff;font-size:12.5px;font-weight:800;padding:3px 10px;border-radius:999px;z-index:5;pointer-events:none}
.sgtip[hidden]{display:none}
@media (max-width:420px){.nppad{gap:3px}.npd b{font-size:18px}}

/* リバーシ（19wd-reversi.js） */
.rvmsg{font-size:13px;color:var(--dim);margin:0 0 8px;min-height:1.5em;text-align:center;font-weight:700}
.rvwrap{display:flex;justify-content:center}
.rvbd{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:min(100%,440px,calc(var(--fitH) - 150px));aspect-ratio:1;background:#1c5234;padding:6px;border-radius:12px;box-shadow:0 8px 24px #0004;touch-action:manipulation;outline:none}
.rvbd.nope{animation:arcnope .25s}
.rvc{position:relative;border:0;padding:0;margin:0;background:#2c7a4c;border-radius:3px;cursor:pointer}
.rvc:hover{filter:brightness(1.08)}
.rvc i{position:absolute;inset:11%;border-radius:50%;transition:background .3s,box-shadow .3s}
.rvc[data-v="1"] i{background:radial-gradient(circle at 35% 30%,#5a5a5a,#111 70%);box-shadow:0 2px 3px #0007}
.rvc[data-v="2"] i{background:radial-gradient(circle at 35% 30%,#ffffff,#d6d6d6 70%);box-shadow:0 2px 3px #0005}
.rvc.can::after{content:"";position:absolute;left:50%;top:50%;width:20%;height:20%;translate:-50% -50%;border-radius:50%;background:#ffffff66}
.rvc.last{box-shadow:inset 0 0 0 2px #ffd54f}
.rvbd:focus-visible .rvc.cur{outline:2px solid #fff;outline-offset:-2px}
/* ピクロス（19we-picross.js） */
.pcwrap{position:relative;display:flex;justify-content:center;overflow-x:auto;padding-bottom:4px}
.pcgrid{display:grid;grid-template-columns:var(--rw) repeat(var(--n),var(--cs));grid-template-rows:var(--ch) repeat(var(--n),var(--cs));gap:1px;background:#9aa2b4;border-radius:8px;padding:1px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;outline:none}
.pccorner,.pcc,.pcr{background:var(--sur)}
.pcc{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:2px 0;font-size:calc(var(--cs) * .5);font-family:var(--num);line-height:1.2;font-weight:800}
.pcr{display:flex;justify-content:flex-end;align-items:center;gap:calc(var(--cs) * .25);padding:0 5px;font-size:calc(var(--cs) * .5);font-family:var(--num);font-weight:800}
.pcc.done b,.pcr.done b{opacity:.3}
.pcx{position:relative;border:0;padding:0;margin:0;background:#f5f2ea;cursor:pointer;width:var(--cs);height:var(--cs)}
.pcx.vr{box-shadow:1px 0 0 #3f475c}
.pcx.hr{box-shadow:0 1px 0 #3f475c}
.pcx.vr.hr{box-shadow:1px 0 0 #3f475c,0 1px 0 #3f475c}
.pcx[data-v="1"]{background:#273047}
.pcx[data-v="2"]::after,.pcx[data-v="3"]::after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--cs) * .55);color:#8a92a6}
.pcx[data-v="3"]::after{color:#e0463c;font-weight:900}
.pcgrid.solved .pcx[data-v="2"]::after{content:""}
.pcgrid.solved .pcx[data-v="1"]{background:#2f6fb0}
.pcgrid:focus-visible .pcx.cur{outline:2px solid var(--irm);outline-offset:-2px;z-index:1}
.pcmode{display:inline-flex;gap:4px}
/* ヒット＆ブロー（19wf-hitblow.js） */
.hbwrap{position:relative;max-width:420px;margin:0 auto}
.hblog{list-style:none;margin:0 0 10px;padding:6px;max-height:280px;overflow-y:auto;background:var(--sur2);border-radius:12px;display:flex;flex-direction:column;gap:4px}
.hblog li{display:flex;align-items:center;gap:10px;background:var(--sur);border-radius:8px;padding:5px 10px}
.hblog li.hbempty{color:var(--dim);font-size:13px;justify-content:center;background:transparent}
.hbno{font-size:11px;color:var(--dim);min-width:18px;font-variant-numeric:tabular-nums}
.hbg{display:flex;gap:4px}
.hbg i{font-style:normal;font-family:var(--num);font-weight:800;font-size:18px;width:26px;height:30px;display:grid;place-items:center;background:var(--sur2);border-radius:6px}
.hbr{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.hbr b{font-size:12px;padding:2px 9px;border-radius:999px;white-space:nowrap}
.hbh{background:#2f8f5b;color:#fff}
.hbb{background:#b87a14;color:#fff}
.hbin{display:flex;justify-content:center;gap:8px;margin:6px 0 10px}
.hbin i{font-style:normal;width:46px;height:54px;display:grid;place-items:center;font-family:var(--num);font-size:28px;font-weight:800;border-radius:10px;background:var(--sur);border:2px solid var(--line2)}
.hbin i.on{border-color:var(--irm)}
.hbpad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.hbk{min-height:48px;border-radius:10px;border:1px solid var(--line2);background:var(--sur2);color:var(--tx);font:inherit;font-size:20px;font-weight:800;cursor:pointer;font-family:var(--num)}
.hbk.go{background:var(--irm);color:#fff;border-color:var(--irm);font-size:16px}
.hbk:disabled{opacity:.35;cursor:default}
.hbcand.off b{opacity:.4}

/* ── 五目並べ（19wg-gomoku.js、2026-09-26）── 木の盤。線は升ごとの ::before（横）・::after（縦）で描き、端の升は真ん中で止める */
.gmwrap{display:flex;justify-content:center}
.gmbd{position:relative;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);width:min(100%,560px,calc(var(--fitH) - 150px));aspect-ratio:1;padding:1.6%;box-sizing:border-box;background:linear-gradient(135deg,#e2c08a,#d3a863);border-radius:10px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),0 8px 22px #0004;outline:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.gmc{position:relative;border:0;padding:0;margin:0;background:none;cursor:pointer;min-width:0;min-height:0}
.gmc::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#5b4526;opacity:.75}
.gmc::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:#5b4526;opacity:.75}
.gmc.l::before{left:50%}.gmc.r::before{right:50%}.gmc.t::after{top:50%}.gmc.b::after{bottom:50%}
.gmc i{position:absolute;inset:7%;border-radius:50%;z-index:1;display:block;pointer-events:none}
.gmc.st[data-v="0"] i{inset:41%;background:#5b4526}
.gmc[data-v="0"]:hover i{background:rgba(0,0,0,.16)}
.gmc[data-v="1"] i{background:radial-gradient(circle at 35% 30%,#6a6a6a,#111 62%);box-shadow:1px 2px 3px #0007}
.gmc[data-v="2"] i{background:radial-gradient(circle at 35% 30%,#fff,#d6d6d6 66%);box-shadow:1px 2px 3px #0006}
.gmc.last i::after{content:"";position:absolute;inset:36%;border-radius:50%;background:#e0403a}
.gmc.win i{box-shadow:0 0 0 2px #ffcf40,0 0 12px #ffcf40}
.gmbd:focus-visible .gmc.cur{outline:2px solid var(--irm);outline-offset:-2px;border-radius:4px}

/* ── 上海（19wh-shanghai.js、2026-09-26）── 牌は --u（幅）× 1.3。上の段ほど左上へずらして厚みを見せる */
.shwrap{display:flex;justify-content:center;overflow:hidden}
.shbd{position:relative;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.sht{position:absolute;width:var(--u);height:calc(var(--u) * 1.3);padding:0;border-radius:calc(var(--u) * .12);background:linear-gradient(160deg,#fffdf6,#efe5cc);border:1px solid #a88f5f;
  box-shadow:calc(var(--u) * .05) calc(var(--u) * .07) 0 #c2a46c,calc(var(--u) * .07) calc(var(--u) * .1) 0 #7d6338,0 3px 8px #0003;cursor:pointer;display:grid;place-items:center;transition:opacity .22s,transform .22s,filter .15s}
.sht svg{width:86%;height:86%;display:block}
.sht.blk{filter:brightness(.8) saturate(.75)}
.sht.sel{background:linear-gradient(160deg,#fff6c9,#ffe07a);border-color:#d49a00}
.sht.hint{animation:sohint 1.3s}
.sht.shake{animation:arcnope .3s}
.sht.gone{opacity:0;transform:translateY(-8px) scale(.85);pointer-events:none}
.shm{display:flex;flex-direction:column;align-items:center;line-height:1.02;font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;font-weight:800}
.shm b{font-size:calc(var(--u) * .42);color:#1c1c1c}
.shm i{font-style:normal;font-size:calc(var(--u) * .4);color:#c3261f}
.shz{font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;font-weight:900;font-size:calc(var(--u) * .66);color:#1c1c1c;line-height:1}
.shz.z5{color:#1a7f3c}.shz.z6{color:#c3261f}
.shz.z4{width:58%;height:66%;border:calc(var(--u) * .06) solid #2f6cc0;border-radius:calc(var(--u) * .06);box-sizing:border-box}
#shhelpb[aria-pressed="true"]{border-color:var(--irm);color:var(--tx)}

/* ── フリーセル（19wi-freecell.js、2026-09-26）── 札はソリティアの .sc をそのまま使う */
.fcboard .soslot.fcc{border-style:solid;border-color:rgba(255,255,255,.2)}
body.light .fcboard .soslot.fcc{border-color:rgba(0,0,0,.18)}
.fcboard .soslot.fnd{font-size:calc(var(--cw) * .42)}

/* ═══ 2048：暗い盤とネオンの札（2026-10-02 のリニューアル） ═══ */
.mgboard,body.light .mgboard{background:radial-gradient(120% 120% at 30% 0%,#232a40,#11141f);box-shadow:inset 0 0 0 1px #ffffff14,0 16px 40px #0007}
.mgboard>i,body.light .mgboard>i{background:#ffffff0a;box-shadow:inset 0 0 0 1px #ffffff0d;border-radius:10px}
.mgt{border-radius:10px;font-family:var(--disp);font-weight:900;color:#eef3ff;text-shadow:0 2px 0 #0004;
  background:linear-gradient(160deg,var(--ta,#3b4a6b),var(--tb,#2c3752));box-shadow:inset 0 2px 0 #ffffff33,inset 0 -4px 0 #00000040,0 4px 10px #0006}
.mgt[data-v="2"]{--ta:#3e4c70;--tb:#2b3553;background:linear-gradient(160deg,var(--ta),var(--tb));color:#dfe7ff}
.mgt[data-v="4"]{--ta:#53609a;--tb:#383f6e;background:linear-gradient(160deg,var(--ta),var(--tb));color:#e8ecff}
.mgt[data-v="8"]{--ta:#33c3b5;--tb:#1d7d75;background:linear-gradient(160deg,var(--ta),var(--tb))}
.mgt[data-v="16"]{--ta:#38d39a;--tb:#1d8a60;background:linear-gradient(160deg,var(--ta),var(--tb))}
.mgt[data-v="32"]{--ta:#f5b852;--tb:#c47a1a;background:linear-gradient(160deg,var(--ta),var(--tb))}
.mgt[data-v="64"]{--ta:#f5814f;--tb:#c4441a;background:linear-gradient(160deg,var(--ta),var(--tb))}
.mgt[data-v="128"]{--ta:#ff6690;--tb:#c42858;background:linear-gradient(160deg,var(--ta),var(--tb));box-shadow:inset 0 2px 0 #ffffff40,inset 0 -4px 0 #0004,0 0 16px #ff669066}
.mgt[data-v="256"]{--ta:#7bb9ff;--tb:#2f7bd1;background:linear-gradient(160deg,var(--ta),var(--tb));box-shadow:inset 0 2px 0 #ffffff40,inset 0 -4px 0 #0004,0 0 20px #7bb9ff77}
.mgt[data-v="512"]{--ta:#7f9bff;--tb:#3a55d1;background:linear-gradient(160deg,var(--ta),var(--tb));box-shadow:inset 0 2px 0 #ffffff40,inset 0 -4px 0 #0004,0 0 24px #7f9bff88}
.mgt[data-v="1024"]{--ta:#ffe08a;--tb:#e0a020;background:linear-gradient(160deg,var(--ta),var(--tb));color:#3a2400;text-shadow:0 1px 0 #fff6;box-shadow:inset 0 2px 0 #fff8,inset 0 -4px 0 #0003,0 0 28px #ffd76a99}
.mgt[data-v="2048"]{--ta:#fff6c2;--tb:#ffc93a;background:linear-gradient(160deg,var(--ta),var(--tb));color:#3a2400;text-shadow:0 1px 0 #fff8;box-shadow:inset 0 2px 0 #fff,inset 0 -4px 0 #0003,0 0 36px #ffd76acc;animation:mgglow 1.6s ease-in-out infinite}
.mgt[data-v="big"]{--ta:#ffffff;--tb:#8ff0ff;background:linear-gradient(160deg,var(--ta),var(--tb));color:#063040;text-shadow:none;box-shadow:inset 0 2px 0 #fff,inset 0 -4px 0 #0003,0 0 40px #8ff0ffcc;animation:mgglow 1.2s ease-in-out infinite}
@keyframes mgglow{50%{filter:brightness(1.12)}}
@media (prefers-reduced-motion: reduce){.mgt[data-v="2048"],.mgt[data-v="big"]{animation:none}}

/* ═══ ブロックパズル：宝石のブロックと、波のように弾ける列（2026-10-02 のリニューアル） ═══ */
.bkboard,body.light .bkboard{background:radial-gradient(120% 120% at 30% 0%,#222a40,#0f121c);border-color:#ffffff1a;box-shadow:0 16px 40px #0007,inset 0 0 30px #0006}
.bkc,body.light .bkc{background:#ffffff0b;box-shadow:inset 0 0 0 1px #ffffff0a}
.bkc[class*=" k"],.bkp i{box-shadow:inset 0 2px 0 #ffffff66,inset 0 -3px 0 #00000045,inset 2px 0 0 #ffffff22,0 2px 6px #0005;position:relative}
.bkc[class*=" k"]::after,.bkp i::after{content:"";position:absolute;left:18%;top:14%;width:34%;height:22%;border-radius:40%;background:#ffffff55;filter:blur(.5px);pointer-events:none}
.bkp i{display:block}
.bkc.gh{opacity:.42}
.bkc.clr{box-shadow:inset 0 0 0 2px #fff,0 0 14px #ffffffaa;animation:bkclr .6s ease-in-out infinite alternate}
@keyframes bkclr{to{filter:brightness(1.35)}}
.bkc.boom{animation:bkboom2 .36s cubic-bezier(.3,.6,.4,1) var(--d,0ms) forwards}
@keyframes bkboom2{0%{scale:1;filter:brightness(1)}35%{scale:1.22;filter:brightness(2.2)}100%{scale:.2;opacity:0;filter:brightness(2.5)}}
.bkc.drop{animation:bkdrop .24s cubic-bezier(.3,1.6,.5,1)}
@keyframes bkdrop{from{scale:1.2;filter:brightness(1.5)}to{scale:1;filter:brightness(1)}}
.bkslot{background:linear-gradient(160deg,var(--sur2),var(--sur));transition:transform .12s,border-color .12s}
.bkslot:hover{transform:translateY(-2px)}
.bkslot.deal .bkp{animation:bkdeal .38s cubic-bezier(.2,.9,.3,1.2) both}
.bkslot.deal:nth-child(2) .bkp{animation-delay:.06s}.bkslot.deal:nth-child(3) .bkp{animation-delay:.12s}
@keyframes bkdeal{from{translate:0 40px;opacity:0;scale:.7}to{translate:0 0;opacity:1;scale:1}}
#bkfloat{filter:drop-shadow(0 12px 18px #0008)}
@media (prefers-reduced-motion: reduce){.bkc.clr,.bkc.drop,.bkslot.deal .bkp{animation:none}}

/* ブロックの色は盤の中に限って強く書く（明るい配色の body.light .bkc が色を消していた。2026-10-02 に発見） */
.bkboard .bkc.k1{background:linear-gradient(145deg,#ff8a8a,#d94848)}
.bkboard .bkc.k2{background:linear-gradient(145deg,#ffc56e,#e8891f)}
.bkboard .bkc.k3{background:linear-gradient(145deg,#ffe36b,#e0b21d)}
.bkboard .bkc.k4{background:linear-gradient(145deg,#86e8a0,#35b35d)}
.bkboard .bkc.k5{background:linear-gradient(145deg,#7fd6fb,#2a9fd6)}
.bkboard .bkc.k6{background:linear-gradient(145deg,#9aa6ff,#5061e0)}
.bkboard .bkc.k7{background:linear-gradient(145deg,#a0ccff,#4f8ed6)}
.bkboard .bkc.bad{background:#ff3d7f47}

/* ═══ いろあつめ：ゼリーの玉と、波のように弾ける消え方（2026-10-02 のリニューアル） ═══ */
.sgboard{background:radial-gradient(120% 120% at 30% 0%,#222a40,#0f121c);box-shadow:0 16px 40px #0007,inset 0 0 30px #0006}
.sgt{color:#ffffffe0;text-shadow:0 1px 2px #0006;transition:left .26s cubic-bezier(.3,1.25,.5,1),top .3s cubic-bezier(.3,1.35,.5,1),transform .15s,opacity .15s}
.sgt::before{inset:7%;border-radius:32%;background:radial-gradient(circle at 32% 26%,#ffffffa0,#ffffff00 40%),radial-gradient(circle at 50% 85%,#00000038,#00000000 60%),var(--sgc);
  box-shadow:inset 0 -3px 5px #00000040,inset 0 2px 3px #ffffff60,0 2px 5px #0005}
.sgt.hi{transform:translateY(-2px) scale(1.04);z-index:2}
.sgt.hi::before{box-shadow:0 0 0 2px #ffffffd0,0 0 14px var(--sgc),inset 0 -3px 5px #00000040,inset 0 2px 3px #ffffff60;filter:brightness(1.12)}
.sgt.cur{outline:2px dashed #ffffffb0;outline-offset:-3px}
.sgt.gone{transform:none;opacity:1;animation:sgpop2 .26s cubic-bezier(.3,.6,.4,1) var(--d,0ms) forwards;pointer-events:none}
@keyframes sgpop2{0%{scale:1}40%{scale:1.3;filter:brightness(1.8)}100%{scale:0;opacity:0}}
.sgtip{background:linear-gradient(90deg,#ffd76a,#ffb547);color:#181203;box-shadow:0 4px 12px #0006}
@media (prefers-reduced-motion: reduce){.sgt{transition:left .12s,top .12s}.sgt.hi{transform:none}}

/* ═══ マインスイーパー：盛り上がった升・沈んだ升・光る数字（2026-10-02 のリニューアル。明るい配色の上書きより強く書く） ═══ */
.mswrap .msgrid{background:#0a101d;padding:3px;gap:2px;border-radius:10px;box-shadow:0 14px 34px #0007,inset 0 0 0 1px #5fd6ff22}
.mswrap .msgrid .msc{background:linear-gradient(155deg,#4a5c84,#2b3758);border-radius:4px;color:#fff;box-shadow:inset 2px 2px 0 #ffffff2e,inset -2px -2px 0 #00000059;transition:filter .1s}
.mswrap .msgrid .msc:hover{filter:brightness(1.25);box-shadow:inset 2px 2px 0 #ffffff2e,inset -2px -2px 0 #00000059,0 0 0 1px #5fd6ff88}
.mswrap .msgrid .msc.o{background:#111a2b;box-shadow:inset 0 1px 3px #000c;filter:none;cursor:default}
.mswrap .msgrid .msc.n1{color:#5fb0ff;text-shadow:0 0 8px #5fb0ff88}.mswrap .msgrid .msc.n2{color:#7bec9c;text-shadow:0 0 8px #7bec9c88}
.mswrap .msgrid .msc.n3{color:#ff6b6b;text-shadow:0 0 8px #ff6b6b88}.mswrap .msgrid .msc.n4{color:#b39bff;text-shadow:0 0 8px #b39bff88}
.mswrap .msgrid .msc.n5{color:#ffb347;text-shadow:0 0 8px #ffb34788}.mswrap .msgrid .msc.n6{color:#4fe0d0;text-shadow:0 0 8px #4fe0d088}
.mswrap .msgrid .msc.n7{color:#f2f2f2}.mswrap .msgrid .msc.n8{color:#9aa3b5}
.mswrap .msgrid .msc.fnew{animation:msflag .32s cubic-bezier(.3,1.6,.5,1)}
@keyframes msflag{from{scale:.3;rotate:-25deg}to{scale:1;rotate:0deg}}
.mswrap .msgrid .msc.x{background:radial-gradient(circle,#ff6a3a,#8b1a2b 70%);box-shadow:0 0 18px #ff4a3aaa;animation:msboom .6s ease-out}
@keyframes msboom{0%{scale:1.5;filter:brightness(2.4)}100%{scale:1;filter:brightness(1)}}
.mswrap .msgrid .msc.m{background:linear-gradient(155deg,#8a3446,#45182a)}
.mswrap .msgrid .msc.rev{animation:msrev .24s ease-out var(--d,0ms) both}
@keyframes msrev{from{scale:.55;filter:brightness(2.2);background:#5fd6ff}to{scale:1;filter:brightness(1)}}
.mswrap .msgrid .msc.show{animation:msshow .3s cubic-bezier(.3,1.6,.5,1) var(--d,0ms) both}
@keyframes msshow{from{scale:0;opacity:0}to{scale:1;opacity:1}}
.mswrap .msgrid .msc.bad{color:#ff5a7a}
@media (prefers-reduced-motion: reduce){.mswrap .msgrid .msc.rev,.mswrap .msgrid .msc.show,.mswrap .msgrid .msc.fnew,.mswrap .msgrid .msc.x{animation:none}}

/* ═══ ナンプレ：暗い石板と金の枠、そろうと光が走る（2026-10-02 のリニューアル） ═══ */
.npgrid{background:#121826;border:2px solid #d6b36a;box-shadow:0 14px 34px #0007,0 0 0 1px #d6b36a33}
.npgrid .npc{background:#161d2e;color:#7fd6ff;border-right-color:#ffffff14;border-bottom-color:#ffffff14;text-shadow:0 0 10px #7fd6ff55;transition:background-color .12s}
.npgrid .npc.giv{color:#eef2ff;text-shadow:none}
.npgrid .npc.rb{border-right:2px solid #d6b36a99}
.npgrid .npc.bb{border-bottom:2px solid #d6b36a99}
.npgrid .npc.peer{background:#1b2440}
.npgrid .npc.same{background:#26386a;box-shadow:inset 0 0 0 1px #7fd6ff55}
.npgrid .npc.sel{background:#33477a;box-shadow:inset 0 0 0 2px #ffd76a}
.npgrid .npc.bad{color:#ff6b7a;text-shadow:0 0 10px #ff6b7a88}
.npgrid .npn{color:#8a96b8}
.npgrid .npc.put{animation:npput .26s cubic-bezier(.3,1.7,.5,1)}
@keyframes npput{from{scale:1.45;filter:brightness(1.8)}to{scale:1;filter:brightness(1)}}
.npgrid .npc.shk{animation:npshk .3s}
@keyframes npshk{20%{translate:-3px 0}40%{translate:3px 0}60%{translate:-2px 0}80%{translate:2px 0}}
.npgrid .npc.unit{animation:npunit .55s ease-out var(--d,0ms)}
@keyframes npunit{0%{background:#161d2e}30%{background:#d6b36a;color:#1a1306;text-shadow:none}100%{background:#161d2e}}
.npgrid .npc.wave{animation:npwave .6s ease-out var(--d,0ms)}
@keyframes npwave{0%{filter:brightness(1)}35%{background:#ffd76a;color:#1a1306;filter:brightness(1.3);text-shadow:none}100%{filter:brightness(1)}}
.npd{background:linear-gradient(160deg,var(--sur2),var(--sur));box-shadow:inset 0 1px 0 #ffffff14,0 2px 0 #0003;transition:transform .08s}
.npd:active{transform:translateY(1px)}
.npd.fin{animation:npfin .9s ease-out}
@keyframes npfin{0%{box-shadow:0 0 0 0 #ffd76a}30%{box-shadow:0 0 0 4px #ffd76a,0 0 18px #ffd76acc;background:#ffd76a33}100%{box-shadow:0 0 0 0 #ffd76a00}}
@media (prefers-reduced-motion: reduce){.npgrid .npc.put,.npgrid .npc.unit,.npgrid .npc.wave,.npgrid .npc.shk,.npd.fin{animation:none}}

/* ═══ ピクロス：暗い盤に光るインク、完成すると絵が色づく（2026-10-02 のリニューアル） ═══ */
.pcgrid{background:#0a101c;box-shadow:0 14px 34px #0007}
.pccorner,.pcc,.pcr{background:#131a2b;color:#c8d2ea;transition:background-color .12s,color .12s}
.pcc.xh,.pcr.xh{background:#22305a;color:#ffffff}
.pcc.done b,.pcr.done b{opacity:.28}
.pcc.fin,.pcr.fin{animation:pcfin .8s ease-out}
@keyframes pcfin{0%{background:#131a2b}25%{background:#d6b36a;color:#1a1306}100%{background:#131a2b}}
.pcx{background:#1a2236;transition:background-color .1s}
.pcx:hover{background:#26324f}
.pcx.vr{box-shadow:1px 0 0 #7f8aa6}.pcx.hr{box-shadow:0 1px 0 #7f8aa6}.pcx.vr.hr{box-shadow:1px 0 0 #7f8aa6,0 1px 0 #7f8aa6}
.pcx[data-v="1"]{background:linear-gradient(160deg,#a8f2ff,#3fb6e0)}
.pcx[data-v="2"]::after{color:#5a6688}
.pcx[data-v="3"]{background:#3a1a24}
.pcx[data-v="3"]::after{color:#ff5a5a}
.pcx.pop{animation:pcpop .22s cubic-bezier(.3,1.7,.5,1);z-index:1}
@keyframes pcpop{from{scale:1.35;filter:brightness(1.6)}to{scale:1;filter:brightness(1)}}
.pcx.lin{animation:pclin .5s ease-out var(--d,0ms)}
@keyframes pclin{0%{filter:brightness(1)}30%{filter:brightness(1.9);background:#ffffff}100%{filter:brightness(1)}}
.pcgrid.solved .pcx[data-v="1"]{background:hsl(var(--h,200) 78% 62%)}
.pcgrid.solved .pcx:not([data-v="1"]){background:#0f1626}
.pcx.win{animation:pcwin .55s cubic-bezier(.3,1.5,.5,1) var(--d,0ms) both}
@keyframes pcwin{from{scale:.5;filter:brightness(2.2)}to{scale:1;filter:brightness(1)}}
@media (prefers-reduced-motion: reduce){.pcx.pop,.pcx.lin,.pcx.win,.pcc.fin,.pcr.fin{animation:none}}

/* ═══ ヒット＆ブロー：金庫の暗号盤（2026-10-02 のリニューアル） ═══ */
.hbwrap{background:linear-gradient(170deg,#262c3a,#141821);border:1px solid #ffffff1f;border-radius:18px;padding:12px;box-shadow:0 16px 40px #0007,inset 0 1px 0 #ffffff1a}
.hblog{background:#0d1018;box-shadow:inset 0 2px 8px #000a}
.hblog li{background:#171c28;color:#dfe6f5}
.hblog li.new{animation:hbrow .3s ease-out}
@keyframes hbrow{from{translate:0 8px;opacity:0}to{translate:0 0;opacity:1}}
.hbg i{background:#0b0e15;color:#ffc070;text-shadow:0 0 8px #ff9a3a99;border:1px solid #ffffff10}
.hbpegs{display:flex;gap:4px;margin-left:auto}
.hbpegs i{width:13px;height:13px;border-radius:50%;background:#0b0e15;box-shadow:inset 0 1px 2px #000c,0 0 0 1px #ffffff1a}
.hbpegs i.ph{background:radial-gradient(circle at 35% 30%,#fff3b0,#e0a020);box-shadow:0 0 8px #ffd76acc}
.hbpegs i.pb{background:radial-gradient(circle at 35% 30%,#d8f8ff,#3fb6e0);box-shadow:0 0 8px #7fd6ffcc}
.hblog li.new .hbpegs i.ph,.hblog li.new .hbpegs i.pb{animation:hbpeg .32s cubic-bezier(.3,1.7,.5,1) var(--d,0ms) both}
@keyframes hbpeg{from{scale:0;filter:brightness(2.5)}to{scale:1;filter:brightness(1)}}
.hbr{margin-left:8px}
.hbr b{font-size:11px;padding:2px 7px}
.hbh{background:#7a5a10;color:#ffe9a6}.hbb{background:#155a72;color:#d8f8ff}
.hbin i{background:radial-gradient(ellipse at 50% 30%,#2a1508,#120804);color:#ffb547;text-shadow:0 0 10px #ff8a1acc,0 0 22px #ff6a0066;border:2px solid #3a2a1a;box-shadow:inset 0 2px 10px #000c}
.hbin i.on{border-color:#ffb547;box-shadow:inset 0 2px 10px #000c,0 0 12px #ffb54766}
.hbin i.pop{animation:hbpop .2s cubic-bezier(.3,1.7,.5,1)}
@keyframes hbpop{from{scale:1.25;filter:brightness(1.8)}to{scale:1;filter:brightness(1)}}
.hbin.open i{color:#8affb0;text-shadow:0 0 10px #4aff8acc,0 0 24px #4aff8a66;border-color:#2a6a3a;animation:hbopen .6s ease-out}
@keyframes hbopen{0%{filter:brightness(1)}40%{filter:brightness(2)}100%{filter:brightness(1)}}
.hbmemo{display:flex;align-items:center;gap:4px;justify-content:center;flex-wrap:wrap;margin:0 0 10px}
.hbmemo span{font-size:11px;color:#8a96b8;margin-right:4px;letter-spacing:.1em}
.hbm{width:28px;height:30px;border-radius:7px;border:1px solid #ffffff1f;background:#171c28;color:#c8d2ea;font:inherit;font-family:var(--num);font-weight:800;font-size:14px;cursor:pointer;position:relative}
.hbm.m1{color:#ff7a8a;background:#2a2515;text-decoration:line-through}
.hbm.m2{color:#181203;background:#ffd76a;box-shadow:0 0 10px #ffd76a88}
.hbk{background:linear-gradient(160deg,#2a3142,#1a1f2b);color:#e6ecf8;border-color:#ffffff1a;box-shadow:inset 0 1px 0 #ffffff1a,0 2px 0 #0006;transition:transform .06s}
.hbk:active:not(:disabled){transform:translateY(1px)}
.hbk.go{background:linear-gradient(160deg,#ffc56e,#e0891f);color:#1a1306;border-color:#ffc56e}
.hbk.mx{opacity:.35}
.hbk.mo{box-shadow:inset 0 0 0 2px #ffd76a,0 2px 0 #0006}
@media (prefers-reduced-motion: reduce){.hblog li.new,.hblog li.new .hbpegs i,.hbin i.pop,.hbin.open i{animation:none}}

/* ═══ ソリティアとフリーセル：緑のフェルト・紙の札・模様の裏面（2026-10-02 のリニューアル） ═══ */
#soboard,#fcboard{background:radial-gradient(ellipse at 50% 25%,#2f7d52,#17502f 62%,#0e3520);box-shadow:inset 0 0 40px #0008,0 14px 34px #0006;border-radius:14px}
#soboard .soslot,#fcboard .soslot{border-color:#ffffff38;color:#ffffff3a}
#soboard .soslot.stk.again::after{color:#ffffffa0}
.sc{background:linear-gradient(165deg,#fffdf7,#f1ece0);border-color:#c9c1ad;box-shadow:0 1px 2px #0006,0 3px 8px #0003}
.sc.r{color:#c81f36}.sc.b{color:#161a24}
.sc.dn{background:radial-gradient(circle at 50% 50%,#ffd76a40 0 16%,#ffd76a00 18%) 0 0/12px 12px,repeating-linear-gradient(45deg,#203f86 0 5px,#19346f 5px 10px);border-color:#0f2552}
.sc.dn::after{border:1.5px solid #ffd76a8c;inset:7%}
.sc.flip{animation:soflip .3s ease-out}
@keyframes soflip{0%{scale:1 1}45%{scale:.05 1}100%{scale:1 1}}
.sc.drag{box-shadow:0 18px 30px #0009;scale:1.05}
.sc.tgt,.soslot.tgt{box-shadow:0 0 0 3px #ffd76a,0 0 20px #ffd76acc}
.socasc{position:absolute;left:0;top:0;z-index:950;cursor:pointer}
@media (prefers-reduced-motion: reduce){.sc.flip{animation:none}.sc.drag{scale:1}}

/* ═══ リバーシ：立体の石とくるりと返る動き（2026-10-02 のリニューアル） ═══ */
.rvbd{background:radial-gradient(ellipse at 50% 30%,#2f7d52,#164a2f 70%);box-shadow:0 14px 34px #0007,inset 0 0 0 2px #0c2a1a}
.rvc{background:#24683f;box-shadow:inset 0 0 0 1px #0d3a22}
.rvc:hover{filter:brightness(1.12)}
.rvc[data-v="1"] i{background:radial-gradient(circle at 35% 28%,#6a6a6a,#1a1a1a 55%,#050505);box-shadow:0 3px 4px #000a,inset 0 -2px 3px #0008}
.rvc[data-v="2"] i{background:radial-gradient(circle at 35% 28%,#ffffff,#e8e8e8 55%,#b9b9b9);box-shadow:0 3px 4px #0007,inset 0 -2px 3px #0003}
.rvc.can::after{background:#ffffff55;width:18%;height:18%}
.rvc.can:hover::after{width:78%;height:78%;opacity:.35;background:var(--gh,#111)}
.rvc.can[data-my="1"]{--gh:#111}.rvc.can[data-my="2"]{--gh:#fff}
.rvc.last{box-shadow:inset 0 0 0 2px #ffd76a,inset 0 0 0 1px #0d3a22}
.rvc i.drop{animation:rvdrop .3s cubic-bezier(.3,1.5,.5,1)}
@keyframes rvdrop{from{scale:1.5;opacity:.4;translate:0 -6px}to{scale:1;opacity:1;translate:0 0}}
.rvc i.flip{animation:rvflip .34s ease-in-out var(--d,0ms) both}
@keyframes rvflip{0%{scale:1 1}50%{scale:.06 1;filter:brightness(1.6)}100%{scale:1 1}}
.rvmsg.myturn{color:var(--irm)}
/* 友だちと対戦の帯（19wk-duel.js。リバーシと五目並べ） */
.duelbar{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;background:var(--sur2);border:1px solid var(--line2);border-radius:12px;padding:8px 10px;margin:0 0 8px;font-size:13px}
.duelbar .dp{display:inline-flex;align-items:center;gap:6px;font-weight:800;padding:3px 8px;border-radius:999px}
.duelbar .dp.on{background:#ffd76a33;box-shadow:0 0 0 1px #ffd76a}
.duelbar .dp small{color:var(--dim);font-weight:700}
.duelbar .dp i{width:14px;height:14px;border-radius:50%;display:inline-block}
.duelbar .dc0{background:radial-gradient(circle at 35% 30%,#666,#111)}.duelbar .dc1{background:radial-gradient(circle at 35% 30%,#fff,#bbb);box-shadow:0 0 0 1px #0003}
.duelbar em{font-style:normal;color:var(--dim);font-weight:800;font-size:11px}
.duelbar .dw{font-size:12px;color:var(--dim)}.duelbar .dw.warn{color:#ff7a8a;font-weight:800}
.duelbar .db{margin-left:auto;display:flex;gap:6px}
.duelinv{display:flex;gap:12px;align-items:center;background:var(--sur);border:1px dashed var(--irm);border-radius:12px;padding:10px 12px;margin:0 0 10px}
.duelinvt{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.duelinvt b{font-size:14px}.duelinvt span{font-size:12px;color:var(--dim)}
.duelinvt input{width:100%;font-size:12px}
.duelqr{width:104px;flex:0 0 104px;background:#fff;border-radius:8px;padding:4px}
.duelqr svg{display:block;width:100%;height:auto}
@media (max-width:520px){.duelqr{display:none}.duelbar .db{margin-left:0}}
@media (prefers-reduced-motion: reduce){.rvc i.drop,.rvc i.flip{animation:none}}

/* ═══ 五目並べ：木目の碁盤と、那智黒・蛤の石（2026-10-02 のリニューアル） ═══ */
.gmbd{background:repeating-linear-gradient(92deg,#ffffff0a 0 3px,#0000 3px 9px),repeating-linear-gradient(88deg,#8a5a2014 0 2px,#0000 2px 14px),linear-gradient(135deg,#e8c58e,#d2a25c 60%,#c48f48);
  box-shadow:0 16px 36px #0007,inset 0 0 0 2px #7a5326,inset 0 2px 0 #fff6}
.gmc[data-v="1"] i{background:radial-gradient(circle at 34% 28%,#8a8a8a,#2a2a2a 38%,#0b0b0b 70%);box-shadow:1px 3px 4px #0009,inset 0 -2px 3px #000a}
.gmc[data-v="2"] i{background:radial-gradient(circle at 34% 28%,#ffffff,#f1efe8 45%,#cfcac0 80%),repeating-linear-gradient(170deg,#0000 0 3px,#00000008 3px 4px);box-shadow:1px 3px 4px #0007,inset 0 -2px 3px #0002}
.gmbd[data-my="1"] .gmc[data-v="0"]:hover i{inset:7%;background:#111;opacity:.35}
.gmbd[data-my="2"] .gmc[data-v="0"]:hover i{inset:7%;background:#fff;opacity:.55}
.gmc i.drop{animation:gmdrop .26s cubic-bezier(.3,1.5,.5,1)}
@keyframes gmdrop{from{scale:1.45;opacity:.3;translate:0 -5px}to{scale:1;opacity:1;translate:0 0}}
.gmc.win i{box-shadow:0 0 0 2px #ffcf40,0 0 16px #ffcf40cc;animation:gmwin 1s ease-in-out infinite alternate}
@keyframes gmwin{to{filter:brightness(1.35)}}
@media (prefers-reduced-motion: reduce){.gmc i.drop,.gmc.win i{animation:none}}

/* ═══ スネークアリーナ（19wl-snake.js、2026-10-02） ═══ */
.snwrap{position:relative;display:flex;justify-content:center}
#sncv{display:block;border-radius:16px;background:#0a0e18;box-shadow:0 16px 40px #0008,inset 0 0 0 1px #ffffff14;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none}
.snui{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.snmenu{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:18px 22px;border-radius:18px;max-width:min(420px,90%);
  background:linear-gradient(165deg,#1c2236ee,#0f1422ee);border:1px solid #ffffff22;box-shadow:0 20px 50px #000a;color:#e6ecf8}
.snmenu .sntitle{font-family:var(--disp);font-size:28px;letter-spacing:.04em;background:linear-gradient(90deg,#8af7a8,#7fdcff,#a8d1ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.snmenu span{font-size:13px;color:#aab2c8}
.snmenu em{font-style:normal;font-size:12px;color:#ffd76a;font-weight:800}
.snskins{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.snsk{width:34px;height:34px;border-radius:50%;border:2px solid #ffffff33;background:radial-gradient(circle at 35% 30%,var(--a),var(--b));cursor:pointer;transition:transform .12s}
.snsk:hover{transform:scale(1.1)}
.snsk.on{border-color:#ffd76a;box-shadow:0 0 0 2px #ffd76a66,0 0 14px var(--a)}
.snplay{min-width:180px;font-size:16px}

/* ── もじスネーク（19wm-mojisnake.js、2026-10-04）：ワープロの画面の形。頁は黒、文字は緑（msn-g）か白（msn-w） ── */
.msn{--msnfs:20px;--ink:#3cff6a;--ink2:#1e9c43;border:1px solid #9aa3b5;border-radius:8px;overflow:hidden;background:#dfe3ea;color:#1b1f27;font-family:"Yu Gothic UI","Meiryo",system-ui,sans-serif;max-width:100%;-webkit-user-select:none;user-select:none}
.msn.msn-w{--ink:#f2f2f2;--ink2:#9a9a9a}
.msn-ttl{display:flex;justify-content:space-between;align-items:center;background:#2b579a;color:#fff;font-size:12px;padding:4px 10px}
.msn-ttl i{font-style:normal;letter-spacing:8px;opacity:.85}
.msn-menu{display:flex;flex-wrap:wrap;gap:4px 14px;background:#f3f4f7;font-size:12px;padding:3px 10px;border-bottom:1px solid #c9ced8;color:#333}
.msn-tool{display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:#f8f9fb;padding:5px 8px;border-bottom:1px solid #c9ced8;font-size:12px;color:#333}
.msn-font{border:1px solid #b7bdc9;background:#fff;padding:1px 8px;border-radius:3px}
.msn-fb{width:22px;text-align:center;font-weight:700}
.msn-tool .btn{background:#fff;color:#222;border-color:#b7bdc9}
.msn-odai{margin-left:auto}.msn-odai b{font-size:15px;letter-spacing:2px}.msn-odai .dn{color:#8a8a8a;text-decoration:line-through}.msn-odai .nx{background:#ffe066;border-radius:2px}
.msn-ruler{display:grid;grid-template-columns:repeat(var(--msnw,28),var(--msnfs));justify-content:center;background:#eef0f4;border-bottom:1px solid #c9ced8;font-size:9px;color:#666;height:14px;line-height:14px;overflow:hidden}
.msn-ruler span{border-left:1px solid #c3c8d2;padding-left:1px}
.msn-desk{background:#8b93a3;padding:14px 8px;display:flex;justify-content:center;overflow:hidden}
.msn-page{position:relative;background:#000;padding:calc(var(--msnfs)*.6) calc(var(--msnfs)*.7);box-shadow:0 4px 16px rgba(0,0,0,.45);font-family:"MS Gothic","Osaka-Mono","Noto Sans Mono CJK JP","Noto Sans JP",monospace;color:var(--ink);touch-action:none}
.msn-doc{font-size:calc(var(--msnfs)*.8);min-height:1.5em;line-height:1.5;border-bottom:1px dashed var(--ink2);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(var(--msnfs)*var(--msnw,28))}
.msn-now{text-decoration:underline}
.msn-caret{animation:msncar 1s steps(1) infinite}@keyframes msncar{50%{opacity:0}}
.msn-grid{margin:0;font:inherit;font-size:var(--msnfs);line-height:1.05;letter-spacing:0;white-space:pre;color:var(--ink)}
.msn-grid .msn-h{text-shadow:0 0 6px var(--ink)}
.msn-grid .msn-bt{text-decoration:underline wavy #ff4a4a;text-underline-offset:2px}
.msn-grid .msn-ft{color:#000;background:var(--ink)}
.msn-grid .msn-fd{color:var(--ink2)}
.msn-stat{display:flex;flex-wrap:wrap;gap:4px 16px;background:#2b579a;color:#fff;font-size:11.5px;padding:3px 10px}.msn-stat .msn-ty{color:#ffb3b3}
#msnov:empty{display:none}
.msn-pad{display:none}
@media (pointer:coarse){.msn-pad{display:grid;grid-template-columns:repeat(3,56px);grid-template-areas:". u ." "l d r";gap:6px;justify-content:center;padding:8px;background:#dfe3ea}
  .msn-pad button{height:46px;font-size:18px;border-radius:10px;border:1px solid #9aa3b5;background:#fff;color:#222}
  .msn-pad [data-msnd=u]{grid-area:u}.msn-pad [data-msnd=l]{grid-area:l}.msn-pad [data-msnd=d]{grid-area:d}.msn-pad [data-msnd=r]{grid-area:r}}
@media (prefers-reduced-motion:reduce){.msn-caret{animation:none}}
/* 狭い画面では、飾りのメニューと書体の欄を隠して盤を大きく（前はツールバーが 3 段になり、頁が 216px しかなかった） */
@media (max-width:560px){.msn-menu,.msn-font,.msn-fb{display:none}.msn-tool{gap:4px}}
@media (max-width:560px) and (pointer:coarse){.msn-desk{padding:6px 4px}.msn-pad{padding:6px}.msn-pad button{height:42px}}
/* もじスネークの 2 回目（2026-10-04）：行番号・遊び方の札・むしくいのインク */
.msn-body{display:flex;align-items:flex-start}
.msn-ln{margin:0 calc(var(--msnfs)*.3) 0 0;width:calc(var(--msnfs)*1.2);font:inherit;font-size:calc(var(--msnfs)*.48);line-height:calc(var(--msnfs)*1.05);text-align:right;color:var(--ink2);opacity:.55;white-space:pre;flex:none}
.msn-ruler{grid-template-columns:calc(var(--msnfs)*1.5) repeat(var(--msnw,28),var(--msnfs))}
.msn-rl0{border-left:0!important}
@media (max-width:560px){.msn-ln,.msn-rl0{display:none}.msn-ruler{grid-template-columns:repeat(var(--msnw,28),var(--msnfs))}}
.msn-i1{--c:#ff6262}.msn-i2{--c:#5aa9ff}.msn-i0{--c:var(--ink)}
.msn-grid .msn-p{color:var(--c);opacity:.62}
.msn-grid .msn-p.msn-i1,.msn-grid .msn-p.msn-i2{opacity:.9;font-weight:700}
.msn-grid .msn-pot{color:var(--c);font-weight:900;text-shadow:0 0 8px var(--c);animation:msnpot 1s ease-in-out infinite alternate}
@keyframes msnpot{to{opacity:.55}}
.msn-grid .msn-mb{color:#000;background:var(--c);border-radius:2px}
.msn-grid .msn-mh{color:var(--c);font-weight:900;text-shadow:0 0 8px var(--c),0 0 2px var(--c)}
.msn-grid .msn-fx{color:#ffd166;font-weight:900;text-shadow:0 0 6px #ffd16699}
.msn-left{color:var(--ink2)}.msn-mut{font-weight:700;color:var(--c)}
.msn-inkb{color:var(--c);text-shadow:0 0 4px #0006}
.msn-odai .msn-inkb{background:#111;padding:1px 8px;border-radius:999px}
.msn-combo{display:inline-block;margin-right:8px;background:#ffd166;color:#4a3000;font-weight:900;font-size:12px;border-radius:999px;padding:1px 8px}
.msn-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 2px;text-align:left}
.msn-mode{display:flex;flex-direction:column;gap:3px;border:1px solid #ffffff33;background:#ffffff10;color:inherit;border-radius:10px;padding:10px 12px;font:inherit;cursor:pointer}
.msn-mode b{font-size:15px}.msn-mode span{font-size:12px;opacity:.8;line-height:1.5}
.msn-mode:hover,.msn-mode.on{border-color:var(--ink);background:#ffffff1c}
.msn-hint{font-size:12px;opacity:.75;margin:4px 0 0}
@media (max-width:420px){.msn-modes{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.msn-grid .msn-pot{animation:none}}
/* ── クラシックスネーク（19wn-csnake.js、2026-10-04）── */
.csn{display:flex;flex-direction:column;align-items:center;gap:8px}
.csnhud{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;font-size:13px;color:var(--dim);min-height:30px}
.csnhud b{color:var(--tx);font-size:15px}
.csnhm{background:var(--sur2);border-radius:999px;padding:2px 10px;color:var(--tx);font-weight:700}
.csnfx{font-style:normal;background:#ffd76a22;border:1px solid #ffd76a66;border-radius:999px;padding:1px 8px;color:var(--tx)}
.csnstage{position:relative;max-width:100%;border-radius:12px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.35);touch-action:none;line-height:0}
.csnstage canvas{display:block;max-width:100%}
.csnstage #csnov{line-height:normal}
.csnmenu{max-width:560px}
.csnrow{display:grid;grid-template-columns:52px 1fr;gap:8px;align-items:start;text-align:left;margin:8px 0}
.csnrow>span{font-size:12px;opacity:.8;padding-top:7px}
.csnrow>div{display:flex;flex-wrap:wrap;gap:6px}
.csnchip{display:flex;flex-direction:column;align-items:flex-start;border:1px solid #ffffff33;background:#ffffff10;color:inherit;border-radius:9px;padding:6px 10px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.csnchip small{font-size:10.5px;font-weight:400;opacity:.75}
.csnchip.on{border-color:#ffd76a;background:#ffd76a26}
.csnsk{width:30px;height:30px;border-radius:50%;border:2px solid #ffffff44;background:radial-gradient(circle at 35% 35%,var(--a),var(--b));cursor:pointer}
.csnsk.on{border-color:#fff;box-shadow:0 0 0 2px #ffd76a}
.csnitems{font-size:12px;opacity:.85;margin:6px 0 10px}
.csnpad{display:none}
@media (pointer:coarse){.csnpad{display:grid;grid-template-columns:repeat(3,54px);grid-template-areas:". u ." "l d r";gap:6px;justify-content:center}
  .csnpad button{height:44px;font-size:18px;border-radius:10px;border:1px solid var(--line2);background:var(--sur);color:var(--tx)}
  .csnpad [data-csnd=u]{grid-area:u}.csnpad [data-csnd=l]{grid-area:l}.csnpad [data-csnd=d]{grid-area:d}.csnpad [data-csnd=r]{grid-area:r}}
@media (max-width:480px){.csnrow{grid-template-columns:1fr}.csnrow>span{padding-top:0}}
.csnstage .arcov{overflow:auto}
.csnstage{min-height:260px;min-width:min(100%,320px)}
.csnrow>div.csnmodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}

/* ── フェーズ 4（2026-10-12）：つみあげ（19wp-stack.js）。ペット育成と猫に見られるなは退役 ── */
/* つみあげ */
.stk{display:flex;flex-direction:column;align-items:center;gap:8px}
.stkhud{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 14px;font-size:13px;color:var(--dim);min-height:30px}
.stkhud b{color:var(--tx);font-size:15px}
.stkhm{background:var(--sur2);border-radius:999px;padding:2px 10px;color:var(--tx);font-weight:700}
.stklives i{font-style:normal;margin-left:3px;color:#8a8f9a55}
.stklives i.on{color:#e0674f}
.stkwind{background:#6fb6e822;border:1px solid #6fb6e866;border-radius:999px;padding:1px 10px;color:var(--tx)}
.stkstage{position:relative;max-width:100%;border-radius:12px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.35);touch-action:none;line-height:0;cursor:pointer;min-height:300px;min-width:min(100%,260px)}
.stkstage canvas{display:block;max-width:100%}
.stkstage #stkov{line-height:normal}
.stkstage .arcov{overflow:auto}
.stkpad{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.stkmenu{max-width:560px}
.stkmodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0}
.stkchip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:1px solid #ffffff33;background:#ffffff10;color:inherit;border-radius:9px;padding:7px 10px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-align:left}
.stkchip small{font-size:10.5px;font-weight:400;opacity:.75;line-height:1.35}
.stkchip.on{border-color:#ffd76a;background:#ffd76a26}
@media (max-width:480px){.stkmodes{grid-template-columns:1fr}}

/* ═══ BARIT（19wr-barit.js、2026-10-18）：ポーカーの役で得点を作る 1 人用ローグライク。青・黄・緑の盤 ═══ */
.barwrap{position:relative;display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;border:1px solid var(--line2);background:radial-gradient(120% 90% at 50% 0%,#12304a 0%,#0b1624 60%,#080e17 100%);color:#e6f3ff;overflow:hidden}
.barhd{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.barhd>div{flex:1 1 90px;min-width:0;padding:6px 10px;border-radius:10px;background:#0a1a2a;border:1px solid #1d3b57}
.barhd span{display:block;font-size:11px;color:#8fb1cc}
.barhd b{font-family:var(--num);font-size:20px;font-weight:800;color:#fff}
.barstage b{font-family:var(--disp);font-size:17px}.bartgt b{color:#ffd24a}.barmoney b{color:#7bec9c}
.barhd .btn{align-self:center}
.barboss{padding:6px 10px;border-radius:10px;border:1px solid #ffd24a55;background:#2a2410;color:#ffd24a;font-size:13px;font-weight:700}
.barjk{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.barj{position:relative;min-height:64px;padding:6px 7px 6px;border-radius:10px;border:1px solid #2b6ea0;background:linear-gradient(160deg,#10324f,#0a1d30);display:flex;flex-direction:column;gap:2px;transition:transform .15s}
.barj b{font-size:13px;color:#7fe0ff;line-height:1.2}.barj span{font-size:10.5px;line-height:1.35;color:#b8d2e6}
.barj.empty{border-style:dashed;border-color:#27405a;background:transparent;align-items:center;justify-content:center}.barj.empty span{color:#4f6b85}
.barj.pop{transform:translateY(-6px) scale(1.06);box-shadow:0 0 16px #46e0ff88}
.barsell{margin-top:auto;font:inherit;font-size:11px;padding:2px 6px;border-radius:7px;border:1px solid #ffd24a88;background:#2a2410;color:#ffd24a;cursor:pointer}
.barprog{position:relative;height:22px;border-radius:999px;background:#0a1a2a;border:1px solid #1d3b57;overflow:hidden}
.barprog i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#1f8a5c,#7bec9c);transition:width .4s}
.barprog span{position:relative;display:block;text-align:center;font-family:var(--num);font-size:12px;line-height:22px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000a}
.barprev{display:flex;align-items:baseline;justify-content:center;gap:12px;min-height:30px;flex-wrap:wrap}
.barprev b{font-family:var(--disp);font-size:18px;color:#ffd24a}.barprev span{font-family:var(--num);font-size:14px;color:#b8d2e6}
.barhand{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;min-height:96px;padding-top:14px}
.barhand.out{opacity:.35;pointer-events:none}
.barc{position:relative;width:58px;height:84px;border-radius:9px;border:1px solid #c7d4e0;background:linear-gradient(180deg,#fdfefe,#dfe9f2);color:#0f1b2e;font:inherit;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:6px 7px;cursor:pointer;box-shadow:0 3px 8px #0006;transition:transform .12s,box-shadow .12s}
.barc b{font-family:Georgia,serif;font-size:21px;line-height:1}.barc i{font-style:normal;font-size:26px;line-height:1;align-self:flex-end}
.barc.s1,.barc.s2{color:#d6304f}
.barc:hover{transform:translateY(-4px)}
.barc.sel{transform:translateY(-16px);border-color:#ffd24a;box-shadow:0 0 0 2px #ffd24a,0 10px 18px #0008}
.barc.mini{width:46px;height:66px;cursor:default}.barc.mini b{font-size:17px}.barc.mini i{font-size:20px}.barc.mini:hover{transform:none}
.barc.mini.hit{transform:translateY(-10px);box-shadow:0 0 0 2px #46e0ff,0 0 16px #46e0ffaa}
.barbtns{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.barbtns .btn.go{min-width:96px}
.barcnt{font-size:13px;color:#b8d2e6;margin-left:6px}.barcnt b{font-family:var(--num);color:#fff;font-size:15px}
.bartable{min-height:0}
.barplayed{display:flex;justify-content:center;gap:6px;margin-bottom:6px}
.barlive{display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap}
.barlive b{font-family:var(--disp);font-size:17px;color:#ffd24a}
.barlive span{font-family:var(--num);font-size:24px;font-weight:800}.barlive span i{font-style:normal;padding:2px 10px;border-radius:7px}
.barlive span i:first-child{background:#0f3a63;color:#7fe0ff}.barlive span i:last-child{background:#3a1d2a;color:#ff8aa6}
.barlive em{font-style:normal;font-family:var(--num);font-size:22px;font-weight:800;color:#7bec9c}
.barlog{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;margin-top:4px;font-size:12px}
.barlog .c{color:#7fe0ff}.barlog .m{color:#ff8aa6}.barlog .x{color:#ffd24a;font-weight:800}
.barshop h4{margin:4px 0 8px;font-family:var(--disp);font-size:16px;color:#ffd24a}
.barshopl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.barshopi{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:11px;border:1px solid #2b6ea0;background:linear-gradient(160deg,#10324f,#0a1d30)}
.barshopi i{font-style:normal;font-size:10.5px;letter-spacing:.1em;color:#7bec9c}.barshopi b{font-size:15px;color:#fff}.barshopi span{font-size:12px;line-height:1.45;color:#b8d2e6;flex:1}
.barshopi.sold{opacity:.4}.barshopi .btn{margin-top:4px}
.barlvs{display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:center;margin-top:10px;font-size:12px;color:#b8d2e6}.barlvs i{font-style:normal;color:#8fb1cc;margin-right:4px}
@media (max-width:560px){.barjk{grid-template-columns:repeat(3,1fr)}.barshopl{grid-template-columns:1fr}.barc{width:44px;height:66px;padding:4px 5px}.barc b{font-size:16px}.barc i{font-size:19px}.barhand{gap:4px}.barc.mini{width:38px;height:56px}}
.barhand.out .barc.sel{visibility:hidden}
.barwrap .barshop h4{font-size:17px;margin:2px 0 8px}
@media (max-width:420px){.barwrap{padding:10px 8px}.barhand{gap:3px}.barhand .barc{width:36px;height:56px;padding:3px 4px}.barhand .barc b{font-size:14px}.barhand .barc i{font-size:17px}}

/* ランキング（2026-10-25、B9。19r-arcade.js の rankOpen） */
.rankov{position:fixed;inset:0;z-index:900;background:rgba(5,8,14,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.rankov[hidden]{display:none}
.rankin{width:100%;max-width:440px;max-height:calc(100vh - 32px);overflow:auto;background:var(--sur);color:var(--tx);border:1px solid var(--line2);border-radius:14px;padding:14px 14px 10px}
.rankhd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.rankhd b{font-size:16px}
.rankbar{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.rankbar select{width:100%;padding:7px 9px;border-radius:9px;border:1px solid var(--line2);background:var(--sur2);color:var(--tx);font:inherit}
.ranktabs{display:flex;gap:6px}.ranktabs .rptab{flex:1}
.ranklist{list-style:none;margin:0;padding:0;counter-reset:none}
.ranklist li{display:flex;align-items:center;gap:10px;padding:7px 8px;border-bottom:1px solid var(--line2);font-size:13.5px}
.ranklist li.me{background:var(--sur2);border-radius:8px}
.ranklist .rkn{width:26px;text-align:right;font-weight:800;color:var(--dim)}
.ranklist li:nth-child(-n+3) .rkn{color:var(--gold, #d8a416)}
.ranklist .rknm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranklist .rknm em{font-style:normal;font-size:11px;color:var(--good)}
.ranklist .rksc{font-weight:700;white-space:nowrap}
.rankme{margin:10px 2px 4px;font-size:13.5px}.rankme small{color:var(--dim)}
.rankempty,.rankwait{color:var(--dim);font-size:13px;margin:12px 2px}
.ranknote{color:var(--faint);font-size:11px;margin:8px 2px 2px}
.ahstat .ahrank{margin-top:6px}