/* หน้าห้องเกม (#/play/...) — prefix .pl- (ห้องรอ/แถบผู้เล่น/สรุปผล) + ตัววาดแต่ละเกม
 *   .c4- เรียงสี่ · .cc- ไพ่สี · .sn- งูแย่งขนม · .g2k- 2048 · .gm- ของใช้ร่วม
 * UI รอบเกมใช้โทเคนธีม · สีเหรียญ/ไพ่/งู/ไพ่ตัวเลขเป็นศิลป์ของเกม (THEME-SPEC อนุญาต)
 * v5: ตัวหนังสือ ≥ 12px · ปุ่ม ≥ 44px */
/* คลาสที่ตั้ง display เองจะทับแอตทริบิวต์ hidden — บังคับให้ hidden ซ่อนจริงทุกจุดในหน้านี้ */
.pl-body [hidden],.pl-result[hidden]{display:none !important}
.pl-body{flex:1;display:flex;flex-direction:column;padding:4px 16px 24px;overflow-y:auto;overscroll-behavior:contain}
.pl-loading{padding:40px 0;text-align:center;color:var(--ink-dim);font-size:14px}

/* ปุ่มกลาง */
.pl-btn{min-height:48px;padding:0 18px;border-radius:var(--r-md);font-size:14.5px;font-weight:700;width:100%;
  color:var(--ink);background:var(--grad-surface);border:1px solid var(--card-brd);
  box-shadow:inset 0 1px 1px var(--hi), 0 3px 7px rgba(var(--shadow-rgb),.08);
  display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .12s var(--ease-out),opacity .2s}
.pl-btn:active{transform:scale(.97)}
.pl-btn.primary{color:var(--on-accent);background:var(--grad-primary);border-color:transparent;box-shadow:var(--primary-shadow)}
.pl-btn svg{width:24px;height:24px}
.pl-btn.primary svg{filter:brightness(0) invert(1)}
.pl-chip-txt b svg,.pl-rank-name svg{width:18px;height:18px;vertical-align:-4px;margin-right:2px}
.pl-btn:disabled{opacity:.45;pointer-events:none}
.pl-link{min-height:var(--tap);font-size:13.5px;font-weight:600;color:var(--ink-dim);text-decoration:underline;text-underline-offset:3px}
.pl-note{font-size:12.5px;color:var(--ink-dim);text-align:center;line-height:1.5}
.pl-fine{font-size:12px;color:var(--ink-faint);text-align:center;margin-top:14px}
.pl-wait{display:flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);font-size:14px;font-weight:600;color:var(--ink-dim)}
.pl-dots{display:inline-flex;gap:4px}
.pl-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-dim);animation:plDot 1.2s infinite}
.pl-dots i:nth-child(2){animation-delay:.15s}.pl-dots i:nth-child(3){animation-delay:.3s}
@keyframes plDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* ---------- ห้องรอ ---------- */
.pl-lobby{display:flex;flex-direction:column;gap:14px}
.pl-hero{display:flex;gap:14px;align-items:center;padding:14px;border-radius:24px;
  background:var(--grad-surface);border:1px solid var(--vb-d3e8ff);box-shadow:inset 0 1px 1px #fff, 0 3px 7px rgba(var(--vbr-327bc0),.08)}
.pl-hero-art{width:76px;height:76px;flex:none;border-radius:18px;overflow:hidden;box-shadow:var(--elev-2)}
.pl-hero-art svg{width:100%;height:100%;display:block}
.pl-hero-info{flex:1;min-width:0}
.pl-hero-name{font-size:19px;font-weight:800;color:var(--ink)}
.pl-hero-sub{font-size:13px;font-weight:600;color:var(--ink-dim);margin-top:2px}
.pl-hero-desc{font-size:12.5px;color:var(--ink-dim);margin-top:4px;line-height:1.45}
.pl-h3{font-size:14px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;padding:0 2px}
.pl-h3 span{color:var(--ink-dim)}
.pl-seats{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.pl-seat{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px 10px;border-radius:var(--r-md);
  background:var(--grad-surface);border:1px solid var(--vb-d3e8ff);text-align:center;min-width:0;animation:plIn .35s var(--ease-spring)}
.pl-seat.me{border-color:rgba(var(--accent-rgb),.5);box-shadow:var(--glow)}
.pl-seat.off{opacity:.55}
.pl-seat.empty{background:transparent;border:1.5px dashed rgba(var(--accent-rgb),.3)}
.pl-seat-hole{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--accent);background:var(--tint)}
.pl-seat-hole svg{width:32px;height:32px}
.pl-seat-tag{display:flex;align-items:center;justify-content:center;gap:2px}
.pl-seat-tag svg{width:18px;height:18px}
html[data-wtheme="dark"] .pl-hero,html[data-wtheme="dark"] .pl-seat{border-color:var(--vd-3c6091);box-shadow:0 3px 8px rgba(0,0,0,.25)}
.pl-seat-name{font-size:12.5px;font-weight:700;color:var(--ink);max-width:100%}
.pl-seat.empty .pl-seat-name{font-weight:600;color:var(--ink-dim)}
.pl-seat-tag{font-size:12px;color:var(--ink-dim);min-height:16px}
@keyframes plIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.pl-config{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--grad-surface);border:1px solid var(--vb-d3e8ff)}
html[data-wtheme="dark"] .pl-config{border-color:var(--vd-3c6091)}
.pl-cfg-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 14px;font-size:14px;font-weight:600;color:var(--ink)}
.pl-cfg-row + .pl-cfg-row{border-top:1px solid var(--hairline)}
.pl-cfg-row small{display:block;font-size:12px;font-weight:500;color:var(--ink-dim);margin-top:2px}
.pl-stepper{display:flex;align-items:center;gap:6px}
.pl-stepper button{width:var(--tap);height:var(--tap);border-radius:50%;font-size:20px;font-weight:700;color:var(--ink);background:var(--tint)}
.pl-stepper button:disabled{opacity:.35}
.pl-stepper b{min-width:28px;text-align:center;font-size:17px}
.pl-toggle{cursor:pointer}
.pl-toggle input{position:absolute;opacity:0;pointer-events:none}
.pl-toggle i{flex:none;width:50px;height:30px;border-radius:var(--r-pill);background:rgba(var(--accent-rgb),.2);position:relative;transition:background .2s}
.pl-toggle i::after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:var(--surface);
  box-shadow:var(--elev-1);transition:transform .25s var(--ease-spring)}
.pl-toggle input:checked + i{background:var(--grad-primary);box-shadow:var(--primary-shadow)}
.pl-toggle input:checked + i::after{transform:translateX(20px)}
.pl-toggle input:focus-visible + i{box-shadow:var(--glow)}
.pl-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:4px}
.pl-gone{display:flex;flex-direction:column;align-items:center;gap:14px;padding:60px 20px;text-align:center;color:var(--ink-dim);font-size:15px}
.pl-gone-ico .v-plate{width:72px;height:72px;border-radius:24px}
.pl-gone-ico .v-plate svg{width:52px;height:52px}

/* ---------- ระหว่างเกม ---------- */
.pl-game{display:flex;flex-direction:column;gap:8px;flex:1}
.pl-players{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none;flex:none}
.pl-players::-webkit-scrollbar{display:none}
.pl-chip{flex:none;display:flex;align-items:center;gap:7px;padding:5px 12px 5px 5px;border-radius:var(--r-pill);
  background:var(--grad-surface);border:1px solid var(--vb-d3e8ff);max-width:170px;transition:transform .25s var(--ease-spring),box-shadow .25s}
html[data-wtheme="dark"] .pl-chip{border-color:var(--vd-3c6091)}
.pl-chip.turn{border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.25);transform:translateY(-1px)}
.pl-chip.me{background:var(--accent-soft)}
.pl-chip.off{opacity:.5}
.pl-chip-av{position:relative;flex:none;display:flex}
.pl-ring{position:absolute;inset:-3px;width:40px;height:40px;transform:rotate(-90deg);pointer-events:none}
.pl-ring circle{fill:none;stroke:var(--accent);stroke-width:3;stroke-dasharray:113;stroke-dashoffset:0;stroke-linecap:round}
.pl-chip-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.pl-chip-txt b{font-size:13px;color:var(--ink)}
.pl-chip-txt small{font-size:12px;color:var(--ink-dim);white-space:nowrap}
.pl-turnrow{display:flex;align-items:center;gap:10px;min-height:24px;flex:none}
.pl-turn{font-size:14px;font-weight:700;color:var(--ink-dim);white-space:nowrap}
.pl-turn.mine{color:var(--accent);animation:plPop .4s var(--ease-spring)}
@keyframes plPop{from{transform:scale(.8);opacity:0}}
.pl-timebar{flex:1;height:5px;border-radius:var(--r-pill);background:var(--tint);overflow:hidden}
.pl-timebar i{display:block;height:100%;background:var(--grad-primary);transform-origin:left;transform:scaleX(0);transition:background .3s}
.pl-timebar i.low{background:var(--amber)}
.pl-stage{flex:1;display:flex;flex-direction:column;min-height:0}
.pl-stage.solo{padding-top:4px}

/* ---------- สรุปผล ---------- */
.pl-result{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(var(--shadow-rgb),.55);opacity:0;transition:opacity .25s}
.pl-result.show{opacity:1}
.pl-res-card{width:100%;max-width:380px;max-height:86vh;overflow-y:auto;padding:22px 18px 18px;border-radius:var(--r-lg);
  background:var(--grad-surface);border:1px solid var(--vb-d3e8ff);box-shadow:var(--elev-3);text-align:center;transform:scale(.9) translateY(14px);transition:transform .45s var(--ease-spring)}
.pl-result.show .pl-res-card{transform:none}
.pl-res-badge{display:flex;justify-content:center;line-height:1;animation:plTrophy 1.2s var(--ease-spring)}
.pl-res-badge .v-plate{width:84px;height:84px;border-radius:28px}
.pl-res-badge .v-plate svg{width:62px;height:62px}
@keyframes plTrophy{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.2) rotate(8deg)}100%{transform:none}}
.pl-res-h{font-size:21px;font-weight:800;color:var(--ink);margin-top:8px}
.pl-res-pts{display:inline-block;margin-top:6px;padding:3px 12px;border-radius:var(--r-pill);font-size:13px;font-weight:700;
  color:var(--accent);background:rgba(var(--accent-rgb),.12)}
.pl-rank{list-style:none;margin:14px 0 4px;padding:0;display:flex;flex-direction:column;gap:6px;text-align:left}
.pl-rank li{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-sm);background:var(--tint);font-size:14px;color:var(--ink)}
.pl-rank li.me{background:var(--accent-soft);font-weight:700}
.pl-rank-n{width:20px;text-align:center;font-weight:800;color:var(--ink-dim)}
.pl-rank-name{flex:1;min-width:0}
.pl-rank-sc{font-size:13px;font-weight:700;color:var(--ink-dim);white-space:nowrap}
.pl-res-act{display:flex;flex-direction:column;gap:8px;margin-top:14px}

/* แผ่นเลือกแชท */
.gm-chatrow .gm-sent{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:var(--on-accent);transform:scale(0);transition:transform .3s var(--ease-spring)}
.gm-chatrow .gm-sent svg{width:24px;height:24px}
.gm-chatrow.done .gm-sent{transform:scale(1)}
.gm-chatrow.busy{opacity:.6}

/* ================= เรียงสี่ ================= */
.c4{--c4-board:var(--vb-1d5fe0);--c4-hole:var(--vb-0a2f9c);--c4-p1:#ef7a5a;--c4-p2:#f6b93b;display:flex;flex-direction:column;gap:10px;align-items:center}
.c4-hint{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;font-size:12.5px;color:var(--ink-dim);text-align:center}
.c4-me{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink)}
.c4-dot{width:16px;height:16px;border-radius:50%;display:inline-block}
.c4-dot.p1{background:var(--c4-p1)}.c4-dot.p2{background:var(--c4-p2)}
.c4-wrap{position:relative;width:100%;max-width:420px}
.c4-board{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;padding:8px;border-radius:18px;background:var(--c4-board);
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),var(--elev-2);overflow:hidden}
.c4-cell{aspect-ratio:1;border-radius:50%;background:var(--c4-hole);box-shadow:inset 0 3px 6px rgba(0,0,0,.35);position:relative}
.c4-disc{position:absolute;inset:6%;border-radius:50%;transform:scale(0)}
.c4-disc.p1,.c4-disc.p2{transform:none;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18),inset 0 3px 0 rgba(255,255,255,.3)}
.c4-disc.p1{background:var(--c4-p1)}
.c4-disc.p2{background:var(--c4-p2)}
.c4-disc.drop{animation:c4Drop calc(.16s + var(--rows) * .045s) cubic-bezier(.45,0,.9,.6) both, c4Bounce .22s calc(.16s + var(--rows) * .045s) ease-out}
@keyframes c4Drop{from{transform:translateY(calc(var(--rows) * -118%))}to{transform:translateY(0)}}
@keyframes c4Bounce{40%{transform:translateY(-9%)}100%{transform:none}}
.c4-cell.win .c4-disc{animation:c4Win .7s ease-in-out infinite alternate}
@keyframes c4Win{to{transform:scale(.82);box-shadow:0 0 0 4px rgba(255,255,255,.9)}}
.c4-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);padding:0 4px}
.c4-col{height:100%;min-height:var(--tap);border-radius:12px;background:transparent;transition:background .15s}
.c4.my-turn .c4-col:not(:disabled):hover,.c4.my-turn .c4-col:not(:disabled):active{background:rgba(255,255,255,.12)}
.c4-col:disabled{cursor:default}
.c4-note{min-height:18px;font-size:13px;font-weight:600;color:var(--ink-dim)}

/* ================= ไพ่สี ================= */
.cc{--cc-r:#ef7a5a;--cc-y:#f2c14e;--cc-g:#4fb477;--cc-b:var(--vb-4aa3df);--cc-w:var(--vb-0b1f5c);
  position:relative;display:flex;flex-direction:column;gap:8px;flex:1;align-items:stretch}
.cc-table{display:flex;align-items:center;justify-content:center;gap:22px;padding:14px 8px 6px;min-height:170px;
  border-radius:var(--r-lg);background:radial-gradient(circle at 50% 40%,var(--vb-2e7bff),var(--vb-0b3aa8));box-shadow:inset 0 0 40px rgba(var(--vbr-000028),.35)}
.cc-deck{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:var(--tap)}
.cc-deck small{font-size:12px;font-weight:700;color:rgba(255,255,255,.85)}
.cc-back{width:68px;height:100px;border-radius:11px;background:repeating-linear-gradient(45deg,var(--vb-0b2f9c) 0 6px,var(--vb-1747c9) 6px 12px);
  border:3px solid #fff;display:flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 var(--vb-cfe3ff),6px 6px 0 rgba(var(--vbr-000028),.2)}
.cc-back span{font-weight:900;font-size:22px;color:#f2c14e;transform:rotate(-18deg)}
.cc-deck:disabled{opacity:.75}
.cc-deck.pulse .cc-back{animation:ccPulse 1s ease-in-out infinite}
@keyframes ccPulse{50%{transform:translateY(-5px);box-shadow:3px 3px 0 var(--vb-cfe3ff),0 0 0 6px rgba(242,193,78,.55)}}
.cc-pile{position:relative;width:84px;height:122px}
.cc-pile .cc-card{position:absolute;inset:0;transform:rotate(var(--tilt,0deg))}
.cc-pile .cc-card.in{animation:ccIn .35s var(--ease-spring)}
@keyframes ccIn{from{transform:translateY(60px) scale(.6) rotate(-30deg);opacity:0}}
.cc-state{display:flex;flex-direction:column;align-items:center;gap:8px}
.cc-color{min-width:62px;padding:5px 10px;border-radius:var(--r-pill);font-size:12.5px;font-weight:800;text-align:center;color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.85);transition:background .3s}
.cc-color.c-r{background:var(--cc-r)}.cc-color.c-y{background:var(--cc-y);color:#3a2c05}.cc-color.c-g{background:var(--cc-g)}.cc-color.c-b{background:var(--cc-b)}
.cc-dir{font-size:26px;color:#fff;animation:ccSpin 3s linear infinite}
@keyframes ccSpin{to{transform:rotate(360deg)}}
.cc-event{min-height:20px;font-size:13px;font-weight:600;text-align:center;color:var(--ink-dim);line-height:1.4}
.cc-event.alert{color:var(--danger)}
.cc-hint{min-height:18px;font-size:13px;font-weight:700;text-align:center;color:var(--accent)}
.cc-actions{display:flex;justify-content:center;gap:10px;min-height:0}
.cc-last,.cc-pass{min-height:var(--tap);padding:0 20px;border-radius:var(--r-pill);font-size:14.5px;font-weight:800}
.cc-last{color:#3a2c05;background:#f2c14e;box-shadow:0 4px 0 #c99a22;animation:ccWiggle 1.2s ease-in-out infinite}
.cc-last.on{color:#fff;background:var(--accent);box-shadow:0 4px 0 var(--vb-0a3fb8);animation:none}
@keyframes ccWiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg) scale(1.05)}40%{transform:rotate(4deg) scale(1.05)}60%{transform:none}}
.cc-pass{color:var(--ink);background:var(--surface);border:1.5px solid var(--glass-brd)}
.cc-hand{display:flex;gap:6px;overflow-x:auto;padding:22px 10px 12px;scrollbar-width:none;justify-content:safe center;min-height:150px;align-items:flex-end}
.cc-hand::-webkit-scrollbar{display:none}
.cc-hand.many .cc-card{margin-left:-18px}
.cc-hand.many .cc-card:first-child{margin-left:0}
.cc-card{flex:none;width:64px;height:94px;border-radius:10px;border:3px solid #fff;position:relative;color:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;font-weight:900;
  transition:transform .2s var(--ease-spring),filter .2s,opacity .2s;user-select:none;-webkit-user-select:none}
.cc-card.big{width:84px;height:122px;font-size:1.25em}
.cc-card.c-r{background:var(--cc-r)}.cc-card.c-y{background:var(--cc-y);color:#3a2c05}.cc-card.c-g{background:var(--cc-g)}.cc-card.c-b{background:var(--cc-b)}
.cc-card.c-w{background:conic-gradient(var(--cc-r) 0 25%,var(--cc-y) 0 50%,var(--cc-g) 0 75%,var(--cc-b) 0)}
.cc-mid{width:78%;height:60%;border-radius:50%;background:rgba(255,255,255,.92);transform:rotate(-24deg);
  display:flex;align-items:center;justify-content:center}
.cc-mid span{transform:rotate(24deg);font-size:22px;color:#2b2233}
.cc-card.big .cc-mid span{font-size:28px}
.cc-card.c-w .cc-mid{background:#2b2233}
.cc-card.c-w .cc-mid span{color:#fff}
.cc-tl,.cc-br{position:absolute;font-size:12px;line-height:1;text-shadow:0 1px 0 rgba(0,0,0,.2)}
.cc-tl{top:5px;left:6px}.cc-br{bottom:5px;right:6px;transform:rotate(180deg)}
.cc-hand .cc-card.ok{transform:translateY(-14px);cursor:pointer;box-shadow:0 8px 16px rgba(0,0,0,.28),0 0 0 2px var(--amber)}
.cc-hand .cc-card.ok:active{transform:translateY(-20px) scale(1.05)}
.cc-hand .cc-card.dim{filter:saturate(.45) brightness(.92);opacity:.8}
.cc-hand .cc-card.new{animation:ccDeal .4s var(--ease-spring)}
@keyframes ccDeal{from{transform:translateY(-80px) scale(.5);opacity:0}}
.cc-hand .cc-card.leaving{transform:translateY(-120px) scale(.7);opacity:0}
.cc-hand .cc-card.nope{animation:ccNope .3s}
@keyframes ccNope{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.cc-picker{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(var(--shadow-rgb),.45);border-radius:var(--r-lg)}
.cc-picker-card{padding:18px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--elev-3);text-align:center;animation:plIn .3s var(--ease-spring)}
.cc-picker-card p{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:12px}
.cc-picker-row{display:grid;grid-template-columns:repeat(4,56px);gap:10px}
.cc-pick{width:56px;height:56px;border-radius:16px;border:3px solid #fff;box-shadow:var(--elev-1)}
.cc-pick.c-r{background:var(--cc-r)}.cc-pick.c-y{background:var(--cc-y)}.cc-pick.c-g{background:var(--cc-g)}.cc-pick.c-b{background:var(--cc-b)}
.cc-pick:active{transform:scale(.9)}
.cc-picker-x{margin-top:12px;min-height:var(--tap);padding:0 18px;font-size:14px;font-weight:600;color:var(--ink-dim)}

/* ================= งูแย่งขนม ================= */
.sn{display:flex;flex-direction:column;align-items:center;gap:8px}
.sn-hud{width:100%;max-width:460px;display:flex;justify-content:space-between;font-size:14px;font-weight:800;color:var(--ink)}
.sn-arena{position:relative;width:100%;max-width:460px;display:flex;justify-content:center;touch-action:none;
  border-radius:16px;overflow:hidden;box-shadow:var(--elev-2)}
.sn-arena canvas{display:block;touch-action:none}
.sn-banner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);padding:10px 18px;border-radius:var(--r-pill);
  font-size:16px;font-weight:800;color:#fff;background:rgba(0,0,0,.55);white-space:nowrap;animation:plPop .35s var(--ease-spring)}
.sn-hint{font-size:12.5px;color:var(--ink-dim);text-align:center}
.sn-pad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,58px);gap:6px;
  grid-template-areas:". u ." "l d r";margin-top:2px}
.sn-btn{border-radius:18px;background:var(--grad-surface);border:1px solid var(--vb-d3e8ff);color:var(--ink);box-shadow:var(--elev-1);
  display:flex;align-items:center;justify-content:center;touch-action:none;transition:transform .08s}
.sn-btn:active{transform:scale(.9);background:var(--tint)}
.sn-btn svg{width:36px;height:36px}
.sn-u{grid-area:u}.sn-d{grid-area:d}.sn-l{grid-area:l}.sn-r{grid-area:r}
.sn-u svg{transform:rotate(-90deg)}.sn-d svg{transform:rotate(90deg)}.sn-l svg{transform:rotate(180deg)}

/* ================= 2048 ================= */
.g2k{--g2k-gap:10px;display:flex;flex-direction:column;gap:12px;align-items:center;width:100%;max-width:440px;margin:0 auto}
.g2k-ch{width:100%;padding:10px 14px;border-radius:var(--r-md);font-size:13.5px;font-weight:700;text-align:center;
  color:var(--ink);background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.28)}
.g2k-top{width:100%;display:flex;gap:8px;align-items:stretch}
.g2k-box{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 4px;border-radius:12px;
  background:linear-gradient(145deg,var(--vb-2fa8ff),var(--vb-0a5af5));color:#fff;min-height:54px}
.g2k-box small{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--vb-ddf0ff)}
.g2k-box b{font-size:20px;font-weight:800}
.g2k-plus{position:absolute;top:4px;right:8px;font-style:normal;font-size:14px;font-weight:800;color:#fff;opacity:0}
.g2k-plus.go{animation:g2kPlus .7s ease-out}
@keyframes g2kPlus{0%{opacity:1;transform:translateY(8px)}100%{opacity:0;transform:translateY(-22px)}}
.g2k-new{flex:none;min-height:var(--tap);padding:0 14px;border-radius:12px;font-size:13.5px;font-weight:800;color:#fff;background:var(--grad-primary);box-shadow:var(--primary-shadow);
  display:inline-flex;align-items:center;justify-content:center;gap:4px}
.g2k-new svg{width:22px;height:22px;filter:brightness(0) invert(1)}
.g2k-board{position:relative;width:100%;aspect-ratio:1;padding:var(--g2k-gap);border-radius:14px;background:linear-gradient(145deg,var(--vb-2fa8ff),var(--vb-0a5af5));touch-action:none;
}
.g2k-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--g2k-gap);width:100%;height:100%}
.g2k-grid span{border-radius:8px;background:rgba(255,255,255,.28)}
.g2k-tiles{position:absolute;inset:var(--g2k-gap)}
/* ตำแหน่งไพ่: translate เป็น % ของขนาดไพ่เอง → 1 ช่อง = 100% + ช่องว่าง (ไม่ต้องใช้ container query — iOS เก่ายังได้) */
.g2k-tile{position:absolute;left:0;top:0;width:calc((100% - 3 * var(--g2k-gap)) / 4);height:calc((100% - 3 * var(--g2k-gap)) / 4);
  transform:translate(calc(var(--x) * (100% + var(--g2k-gap))),calc(var(--y) * (100% + var(--g2k-gap))));
  transition:transform .11s ease-in-out;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:clamp(20px,8vw,38px);background:var(--vb-eaf4ff);color:var(--vb-12307a);z-index:1}
.g2k-tile.new{animation:g2kNew .2s .1s ease-out backwards}
.g2k-tile.pop{z-index:2;animation:g2kPop .2s ease-out}
@keyframes g2kNew{from{opacity:0;scale:0}}
@keyframes g2kPop{50%{scale:1.18}}
.g2k-tile.v4{background:var(--vb-cfe5ff);color:var(--vb-12307a)}
.g2k-tile.v8{background:var(--vb-8ec8ff);color:var(--vb-0b2a6b)}
.g2k-tile.v16{background:var(--vb-5bb0ff);color:var(--vb-06235f)}
.g2k-tile.v32{background:var(--vb-2e92ff);color:#fff}
.g2k-tile.v64{background:var(--vb-0a6cff);color:#fff}
.g2k-tile.v128{background:#edcf72;color:#f9f6f2;font-size:clamp(18px,6.6vw,32px)}
.g2k-tile.v256{background:#edcc61;color:#f9f6f2;font-size:clamp(18px,6.6vw,32px)}
.g2k-tile.v512{background:#edc850;color:#f9f6f2;font-size:clamp(18px,6.6vw,32px)}
.g2k-tile.v1024{background:#edc53f;color:#f9f6f2;font-size:clamp(14px,5.2vw,26px)}
.g2k-tile.v2048{background:#edc22e;color:#f9f6f2;font-size:clamp(14px,5.2vw,26px);box-shadow:0 0 24px 6px rgba(237,194,46,.5)}
.g2k-tile.vbig{background:#3c3a32;color:#f9f6f2;font-size:clamp(12px,4.4vw,22px)}
.g2k-over{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;border-radius:14px;
  background:rgba(var(--vbr-e2f0ff),.82);animation:plPop .4s ease-out}
.g2k-over-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px;width:86%;border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--elev-3);text-align:center;color:var(--ink)}
.g2k-over-card h3{font-size:20px;font-weight:800}
.g2k-big{font-size:36px;font-weight:900;color:var(--accent)}
.g2k-res{font-size:13.5px;font-weight:700;color:var(--ink)}
.g2k-over-acts{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:6px}
.g2k-hint{font-size:12.5px;color:var(--ink-dim);text-align:center;line-height:1.45}
.g2k-acts{width:100%}

@media (prefers-reduced-motion: reduce){
  .pl-hero-art,.cc-dir,.cc-last,.gc-pulse,.c4-cell.win .c4-disc{animation:none}
  .g2k-tile{transition:none}
}