:root{
  --ink:#203453; --sky:#c2e4f6; --green:#b9da98; --paper:#fffdf5; --yellow:#ffce55;
  --orange:#e9a928; --leaf:#4b9c62; --coral:#de7564; --blue:#81b6ce; --mint:#6da98d;
  --warm:#e58980; --gold:#f6ce5a; --muted:#627087; --line:#e3e3da;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);background:var(--paper);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,"Noto Sans JP",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #c34532;outline-offset:4px}
h1,h2,h3{margin:0}
p{line-height:1.8}
.wrap{max-width:1200px;margin:auto;padding:0 40px}
.muted{color:var(--muted);font-size:14px}
.sm{font-size:12px}

/* ---------- header ---------- */
header{background:var(--sky)}
nav{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #20345322}
.logo{font-size:27px;font-weight:950;letter-spacing:-1.5px;white-space:nowrap}
.logo .o1{color:var(--orange)}
.logo .o2{color:var(--leaf)}
.logo .dot{color:var(--leaf);font-size:34px}
.logo.sm{font-size:21px}
.logo.sm .dot{font-size:26px}
.navlinks{display:flex;gap:34px;align-items:center;font-size:14px;font-weight:700}
.small-btn{background:var(--ink);color:#fff;padding:12px 22px;border:0;border-radius:50px;font-weight:700}
.small-btn:hover{background:#152742}
.ghost-btn{background:transparent;border:1px solid #20345355;border-radius:50px;padding:11px 20px;font-weight:700;font-size:13px}
.ghost-btn:hover{border-color:var(--ink)}

/* ---------- hero ---------- */
.hero{background:var(--sky);position:relative;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1fr 1.05fr;align-items:center;min-height:580px;padding-top:34px;padding-bottom:70px;gap:30px}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:2px;display:flex;gap:10px;align-items:center}
.eyebrow:before{content:"";width:8px;height:8px;border-radius:50%;background:#53976a}
h1{font-size:52px;line-height:1.17;letter-spacing:-3px;margin:27px 0 22px;font-weight:900}
h1 em{font-style:normal;position:relative;z-index:0}
h1 em:before{content:"";position:absolute;background:var(--yellow);height:25px;bottom:3px;left:-7px;right:-7px;z-index:-1;border-radius:50%}
.intro{font-size:16px;line-height:1.9;max-width:420px;color:#455a73;margin:0}
.actions{display:flex;gap:22px;align-items:center;margin:28px 0 20px;flex-wrap:wrap}
.primary{
  display:inline-flex;gap:14px;align-items:center;justify-content:center;
  background:var(--ink);color:#fff;border:0;border-radius:12px;padding:18px 25px;
  font-weight:700;box-shadow:0 5px 0 #122238;font-size:15px;transition:transform .06s,box-shadow .06s;
}
.primary:hover{background:#1a2e4c}
.primary:active{transform:translateY(4px);box-shadow:0 1px 0 #122238}
.primary.sm{padding:13px 20px;font-size:13.5px;box-shadow:0 4px 0 #122238}
.primary[disabled]{opacity:.4;cursor:not-allowed;box-shadow:0 4px 0 #122238}
.text-link{font-size:14px;border-bottom:1px solid;padding-bottom:3px}
.sub{font-size:12px;color:#5c7691;margin-top:4px}
.art svg{width:100%;height:auto;display:block}

/* ---------- benefits ---------- */
.benefits{background:var(--green);padding:26px 0}
.benefits .wrap{display:flex;justify-content:center;gap:70px;font-size:14px;font-weight:700}
.benefits span b{margin-right:10px}

/* ---------- sections ---------- */
.section{padding:74px 40px}
.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:34px}
.section-label{font-size:11px;font-weight:800;letter-spacing:3px;color:#68745c;margin-bottom:15px}
.section-head h2{font-size:36px;letter-spacing:-1px;font-weight:900;margin-bottom:12px}

/* ---------- game cards ---------- */
.games{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.game{border-radius:17px;border:1px solid var(--line);padding:13px;background:#fff;cursor:pointer;transition:transform .12s,box-shadow .12s;display:flex;flex-direction:column}
.game:hover{transform:translateY(-4px);box-shadow:0 12px 0 -6px #2034531a}
.game-art{height:180px;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.game h3{font-size:19px;margin:20px 8px 7px;font-weight:900}
.game h3 span{font-size:11px;font-weight:400;color:var(--muted)}
.game p{font-size:13px;color:var(--muted);margin:0 8px 17px}
.game-footer{display:flex;justify-content:space-between;border-top:1px solid #eee;padding:13px 8px 4px;font-size:11px;color:var(--muted);margin-top:auto}

.tile-board{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;transform:rotate(-12deg);width:135px}
.tile-board span{
  aspect-ratio:1;background:var(--paper);border-radius:6px;box-shadow:0 4px 0 #20345320;
  display:grid;place-content:center;font-weight:bold;font-size:20px;
}
.color-orbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;transform:rotate(10deg)}
.color-orbs i{width:29px;height:29px;border-radius:50%;background:var(--warm);box-shadow:inset -3px -4px 0 #0001}
.color-orbs i:nth-child(3n){background:var(--gold)}
.color-orbs i:nth-child(2n){background:var(--mint)}
.color-orbs i:nth-child(4n){background:var(--blue)}
.stars{width:160px;height:120px;position:relative;font-size:19px;color:#fff}
.stars svg{position:absolute;width:100%;height:100%;left:0;top:0;fill:none}
.stars span{position:absolute;border:1px solid #fff9;border-radius:50%;width:33px;height:33px;display:grid;place-content:center;font-weight:700}

/* ---------- join ---------- */
.join-section{background:#f2f6ea;border-top:1px solid #dde5cd;border-bottom:1px solid #dde5cd}
.join-in{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.join-in h2{font-size:30px;letter-spacing:-1px;font-weight:900}
.join-form{display:flex;gap:12px;align-items:center}
.join-form input{
  width:160px;padding:16px 18px;border:1px solid #b9c3d2;border-radius:12px;background:#fff;
  font:inherit;font-weight:900;font-size:20px;letter-spacing:6px;text-align:center;text-transform:uppercase;color:var(--ink);
}
.join-form input::placeholder{color:#b9c3d2;letter-spacing:4px}

footer{background:var(--ink);color:var(--paper);padding:40px 0}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px}
footer p{font-size:11px;color:#b7c6da;margin:0;text-align:right;line-height:1.8}

/* ---------- room ---------- */
.room-top{background:var(--sky);border-bottom:1px solid #20345322;position:sticky;top:0;z-index:20}
.room-top-in{height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.room-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.room-code{font-size:11px;letter-spacing:2px;font-weight:800;color:#3c5570}
.room-code b{font-size:20px;letter-spacing:4px;color:var(--ink)}

.room-grid{display:grid;grid-template-columns:264px 1fr;gap:26px;padding-top:26px;padding-bottom:60px;align-items:start}
.room-side{display:flex;flex-direction:column;gap:22px;position:sticky;top:96px}
.side-block{background:#fff;border:1px solid var(--line);border-radius:17px;padding:16px}
.side-block .section-label{margin-bottom:12px}
.members{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.members li{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700}
.members .dotc{width:12px;height:12px;border-radius:50%;flex:0 0 auto;box-shadow:inset -2px -2px 0 #0002}
.members .tag{margin-left:auto;font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.4px}
.members .tag.win{color:#2e7d4f}
.members li.off{opacity:.42}

.picker{display:flex;flex-direction:column;gap:8px}
.pick{
  display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;background:#fff;text-align:left;font-size:12.5px;font-weight:800;letter-spacing:.4px;
}
.pick i{width:26px;height:26px;border-radius:8px;display:grid;place-content:center;font-style:normal;font-size:14px;background:#f2efe8}
.pick[disabled]{cursor:default;opacity:.55}
.pick.on{border-color:var(--ink);box-shadow:0 3px 0 #20345322;opacity:1}
.pick.on i{background:var(--yellow)}

.room-main{min-height:60vh}
.stage-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.stage-titles h2{font-size:23px;letter-spacing:-.6px;font-weight:900;max-width:520px}
.stage-actions{display:flex;align-items:center;gap:14px}
.timer{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.5px;min-width:74px;text-align:right}
.timer.warn{color:#c34532}

.stage{background:#fff;border:1px solid var(--line);border-radius:17px;padding:20px;min-height:420px;position:relative}
.stage-empty{min-height:376px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center}
.empty-mark{font-size:34px;color:var(--yellow)}
.stage-empty p{font-size:13px;margin:0}

/* ---------- result ---------- */
.result{
  position:fixed;inset:0;background:#203453d9;display:flex;align-items:center;justify-content:center;
  padding:24px;z-index:60;backdrop-filter:blur(2px);
}
.result-card{background:var(--paper);border-radius:22px;padding:30px 28px;width:min(420px,100%);text-align:center;box-shadow:0 18px 0 -8px #0e1b2e}
.result-card h3{font-size:24px;font-weight:900;letter-spacing:-.5px;margin-bottom:6px}
.result-card .win{font-size:13px;color:var(--muted);margin-bottom:18px}
.rank{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:8px}
.rank li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 13px;font-size:13.5px;font-weight:700}
.rank .no{width:22px;height:22px;border-radius:50%;background:#f2efe8;display:grid;place-content:center;font-size:11px;font-weight:900}
.rank li.first .no{background:var(--yellow)}
.rank .dotc{width:11px;height:11px;border-radius:50%}
.rank .meta{margin-left:auto;font-size:11px;color:var(--muted);font-weight:600}
.result-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- games in stage ---------- */
/* MICHIAKE */
.mich-wrap{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;justify-content:center}
.mich-board-box{background:#f5d996;border-radius:14px;padding:14px;position:relative}
.mich-board{position:relative;touch-action:none;border-radius:8px}
.mich-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr)}
.mich-cell{background:var(--paper);border-radius:5px;margin:3px;box-shadow:0 3px 0 #2034531a}
.mich-car{
  position:absolute;border-radius:9px;cursor:grab;touch-action:none;
  box-shadow:0 4px 0 #2034532e, inset -3px -4px 0 #00000014;
  transition:left .05s linear,top .05s linear;
}
.mich-car:active{cursor:grabbing}
.mich-car.red{background:var(--coral)}
.mich-car.c0{background:var(--ink)}
.mich-car.c1{background:var(--blue)}
.mich-car.c2{background:var(--mint)}
.mich-car.c3{background:var(--yellow)}
.mich-car.c4{background:#c9a7e0}
.mich-exit{position:absolute;right:-10px;top:0;width:10px;border-radius:4px;
  background:repeating-linear-gradient(45deg,var(--coral),var(--coral) 5px,#ffd9c9 5px,#ffd9c9 10px)}
.mich-side{min-width:180px;display:flex;flex-direction:column;gap:10px}
.mich-side h4{margin:0 0 2px;font-size:12px;letter-spacing:2px;color:var(--muted);font-weight:800}
.mich-stat{background:#f7f6f1;border-radius:11px;padding:11px 13px;font-size:12.5px;display:flex;justify-content:space-between;font-weight:700}
.mich-stat b{font-variant-numeric:tabular-nums}
.mich-banner{
  position:absolute;inset:0;border-radius:14px;background:#fffdf5ee;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;padding:16px;
}
.mich-banner b{font-size:20px;letter-spacing:2px}

/* TSUNAGI */
.tsu-wrap{display:flex;gap:22px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.tsu-side{display:flex;flex-direction:column;gap:8px;align-items:center}
.tsu-name{font-size:11px;letter-spacing:1.6px;font-weight:800;color:var(--muted);display:flex;align-items:center;gap:6px}
.tsu-name .dotc{width:9px;height:9px;border-radius:50%}
.tsu-name .you{color:var(--ink)}
.tsu-name .score{margin-left:6px;color:var(--ink);font-variant-numeric:tabular-nums;font-size:13px}
.tsu-grid{display:grid;grid-template-columns:repeat(6,34px);grid-auto-rows:34px;gap:4px;background:#cfe5d1;border-radius:13px;padding:8px}
.tsu-cell{border-radius:50%;background:#ffffff99;transition:transform .07s}
.tsu-grid.mine .tsu-cell.empty:hover{transform:scale(.86);background:#fff}
.tsu-cell.k0{background:var(--warm);box-shadow:inset -2px -3px 0 #00000018}
.tsu-cell.k1{background:var(--gold);box-shadow:inset -2px -3px 0 #00000018}
.tsu-cell.k2{background:var(--mint);box-shadow:inset -2px -3px 0 #00000018}
.tsu-cell.k3{background:var(--blue);box-shadow:inset -2px -3px 0 #00000018}
.tsu-cell.junk{background:var(--ink);border-radius:7px;box-shadow:none}
.tsu-cell.pop{animation:pop .2s ease-out}
@keyframes pop{from{transform:scale(1.2)}to{transform:scale(1)}}
.tsu-next{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:1.5px;font-weight:800;color:var(--muted)}
.tsu-next i{width:17px;height:17px;border-radius:50%;background:#e2e7ee;box-shadow:inset -2px -2px 0 #00000018}
.tsu-next i.q0{background:var(--warm)}
.tsu-next i.q1{background:var(--gold)}
.tsu-next i.q2{background:var(--mint)}
.tsu-next i.q3{background:var(--blue)}
.tsu-note{width:100%;text-align:center;font-size:11.5px;color:var(--muted);margin-top:6px}

/* SEIZA */
.sei-wrap{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;justify-content:center}
.sei-svg{width:min(100%,520px);height:auto;background:#899bbc;border-radius:13px;touch-action:manipulation}
.sei-star{cursor:pointer}
.sei-bad{animation:shake .24s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.sei-side{min-width:170px;display:flex;flex-direction:column;gap:9px}
.sei-row{background:#f7f6f1;border-radius:10px;padding:9px 11px;font-size:12px;font-weight:700;display:flex;align-items:center;gap:7px}
.sei-row .bar{flex:1;height:6px;border-radius:99px;background:#e2e7ee;overflow:hidden}
.sei-row .bar i{display:block;height:100%;background:var(--mint);border-radius:99px;transition:width .2s}
.sei-row .dotc{width:9px;height:9px;border-radius:50%}
.sei-row.done .bar i{background:var(--leaf)}

/* countdown */
.count{position:absolute;inset:0;display:grid;place-content:center;background:#fffdf5e8;border-radius:17px;z-index:30}
.count b{font-size:64px;font-weight:900;letter-spacing:-3px;color:var(--ink)}

/* ---------- modal / toast ---------- */
.modal{position:fixed;inset:0;background:#203453b3;display:flex;align-items:center;justify-content:center;padding:24px;z-index:80}
.modal-card{background:var(--paper);border-radius:20px;padding:28px;width:min(380px,100%);box-shadow:0 18px 0 -8px #0e1b2e}
.modal-card h3{font-size:20px;font-weight:900;margin-bottom:16px;letter-spacing:-.4px}
.modal-card input{
  width:100%;padding:14px 16px;border:1px solid #b9c3d2;border-radius:11px;background:#fff;
  font:inherit;font-size:15px;color:var(--ink);
}
.modal-row{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.modal-note{margin:12px 0 0;min-height:16px}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:#fff;
  font-size:13px;font-weight:700;padding:11px 20px;border-radius:99px;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;z-index:90;max-width:86vw;text-align:center;
  border:1px solid #ffffff2e;box-shadow:0 8px 22px -10px #0b1626b3;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(-4px)}

/* ---------- 邀请链接兜底面板 ---------- */
.invite-bar{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);width:min(440px,92vw);z-index:95}
.invite-panel{
  background:var(--paper);border:1px solid #d9d3c4;border-radius:16px;padding:16px 18px;
  box-shadow:0 14px 30px -14px #20345380;
}
.invite-note{margin:6px 0 10px;line-height:1.5}
.invite-bar input{
  width:100%;padding:10px 12px;border:1px solid #b9c3d2;border-radius:10px;background:#fff;
  font:inherit;font-size:12.5px;color:var(--ink);letter-spacing:.2px;
}
.invite-bar input:focus-visible{outline:2px solid var(--leaf);outline-offset:1px}
.invite-row{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.small-btn.is-copied{background:var(--leaf);color:#fff;border-color:var(--leaf)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .wrap{padding:0 22px}
  .section{padding:56px 22px}
  .hero-in{grid-template-columns:1fr;min-height:0;padding-bottom:48px}
  .art{order:-1;max-width:420px;margin:0 auto}
  h1{font-size:40px;letter-spacing:-2px}
  .section-head h2{font-size:28px}
  .games{grid-template-columns:1fr}
  .game{display:grid;grid-template-columns:132px 1fr;column-gap:12px}
  .game-art{grid-row:1/4;height:150px}
  .game h3{margin-top:14px;font-size:17px}
  .navlinks a{display:none}
  .benefits .wrap{gap:24px;flex-wrap:wrap;font-size:12px}
  .room-grid{grid-template-columns:1fr;gap:16px}
  .room-side{position:static;order:2;flex-direction:row;flex-wrap:wrap}
  .room-side .side-block{flex:1;min-width:220px}
  .stage-titles h2{font-size:19px}
  .tsu-grid{grid-template-columns:repeat(6,29px);grid-auto-rows:29px;gap:3px;padding:6px}
  .footer-inner{display:block;text-align:left}
  footer p{text-align:left;margin-top:10px}
}
@media (max-width:520px){
  h1{font-size:33px}
  .join-form{width:100%}
  .join-form input{flex:1;width:auto}
  .small-btn{padding:10px 16px;font-size:13px}
  .room-top-in{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;gap:10px}
  .mich-side{flex-direction:row;flex-wrap:wrap}
  .stage{padding:14px}
  .tsu-grid{grid-template-columns:repeat(6,25px);grid-auto-rows:25px}
}

/* =========================================================
   GOMOKU / RENREN / SNAKE
   ========================================================= */
/* ---------- GOMOKU ---------- */
.gom-wrap{display:flex;gap:24px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.gom-board-box{line-height:0;border-radius:14px;box-shadow:0 8px 0 -3px #20345322}
.gom-cv{display:block;border-radius:12px;cursor:pointer;touch-action:manipulation}
.gom-side{flex:0 0 190px;width:190px;display:flex;flex-direction:column;gap:9px}
.gom-turn{
  background:var(--ink);color:#fff;border-radius:11px;padding:11px 14px;font-size:13px;
  font-weight:800;text-align:center;letter-spacing:1.6px;
}
.gom-turn.you{background:var(--leaf)}
.gom-p{display:flex;align-items:center;gap:8px;background:#f7f6f1;border-radius:10px;
  padding:9px 11px;font-size:12.5px;font-weight:700;border:1px solid transparent}
.gom-p.on{border-color:var(--yellow);background:#fff9e4}
.gom-stone{width:13px;height:13px;border-radius:50%;flex:0 0 auto;box-shadow:inset -2px -2px 0 #0002}
.gom-stone.b{background:#22303f}
.gom-stone.w{background:#fffdf5;border:1px solid #c9c2b1}
.gom-count{font-size:11px;font-weight:800;letter-spacing:1.2px;color:var(--muted);padding:2px}
.gom-hint{line-height:1.7}

/* ---------- RENREN ---------- */
.ren-wrap{display:flex;gap:24px;align-items:flex-start;justify-content:center;flex-wrap:wrap}
.ren-board-box{position:relative;background:#e7edf3;border-radius:14px;padding:6px;box-shadow:0 8px 0 -3px #20345322}
.ren-board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(10,1fr);position:relative}
.ren-tile{
  display:grid;place-content:center;background:#fffdf5;border-radius:8px;cursor:pointer;
  box-shadow:0 2px 0 #c3ccd6;line-height:1;transition:transform .08s,background .1s;user-select:none;
}
.ren-tile.gone{background:transparent;box-shadow:none;cursor:default;transform:none}
.ren-tile.sel{background:var(--yellow);transform:scale(.9);box-shadow:0 0 0 3px #20345366}
.ren-tile.hint{background:#cfe9d8;box-shadow:0 0 0 3px var(--leaf)}
.ren-board.bad{animation:shake .22s}
.ren-path{position:absolute;left:6px;top:6px;width:calc(100% - 12px);height:calc(100% - 12px);
  overflow:visible;pointer-events:none}
.ren-line{fill:none;stroke:#c34532;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  animation:renLine .42s ease-out forwards}
@keyframes renLine{0%{opacity:0;stroke-width:6}30%{opacity:1}100%{opacity:0;stroke-width:2}}
.ren-side{flex:0 0 190px;width:190px;display:flex;flex-direction:column;gap:10px}
.ren-hint{align-self:flex-start}
.ren-hint:disabled{opacity:.4}
.ren-row{background:#f7f6f1;border-radius:11px;padding:10px 12px}
.ren-nm{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;margin-bottom:7px}
.ren-nm .dotc{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.ren-nm b{margin-left:auto;font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted)}
.ren-bar{height:6px;border-radius:99px;background:#e2e7ee;overflow:hidden}
.ren-bar i{display:block;height:100%;border-radius:99px;transition:width .2s}
.ren-tip{line-height:1.7}

/* ---------- SNAKE ---------- */
.snk-wrap{display:flex;gap:24px;align-items:center;justify-content:center;flex-wrap:wrap}
.snk-box{border-radius:14px;overflow:hidden;box-shadow:0 8px 0 -3px #20345322;line-height:0}
.snk-cv{display:block;touch-action:none;background:#eef3ec}
.snk-side{flex:0 0 194px;width:194px;display:flex;flex-direction:column;gap:9px}
.snk-row{display:flex;align-items:center;gap:7px;background:#f7f6f1;border-radius:10px;padding:9px 11px;font-size:12px;font-weight:700}
.snk-row.mine{background:#fff9e4;box-shadow:inset 0 0 0 1px var(--yellow)}
.snk-row .dotc{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.snk-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:86px}
.snk-row b{margin-left:auto;font-variant-numeric:tabular-nums;font-size:11.5px}
.snk-st{font-style:normal;font-size:10px;font-weight:800;color:var(--leaf);letter-spacing:.4px}
.snk-st.dead{color:var(--coral)}
.snk-pad{display:flex;justify-content:center;padding:2px 0}
.snk-dpad{display:grid;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,46px);gap:6px}
.snk-key{
  border:1px solid var(--line);background:#fff;border-radius:12px;font-size:15px;
  display:grid;place-content:center;box-shadow:0 3px 0 #dfe5ec;touch-action:none;
}
.snk-key:active{transform:translateY(2px);box-shadow:0 1px 0 #dfe5ec}
.snk-key[disabled]{opacity:.35}
.snk-key.k2{grid-column:2;grid-row:1}
.snk-key.k4{grid-column:1;grid-row:2}
.snk-key.k5{grid-column:2;grid-row:2}
.snk-key.k6{grid-column:3;grid-row:2}
.snk-tip{line-height:1.7}

@media (max-width:720px){
  .gom-side,.ren-side,.snk-side{width:auto;min-width:0;flex:1 1 100%;flex-direction:row;flex-wrap:wrap;align-items:center}
  .gom-side{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .gom-turn{grid-column:1/-1}
  .gom-hint,.ren-tip,.snk-tip{flex:1 1 100%}
  .ren-side{justify-content:space-between}
  .ren-row{flex:1 1 100%}
  .snk-dpad{grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,42px)}
}

/* 首页卡片的小插图 */
.go-mini{display:grid;grid-template-columns:repeat(3,30px);grid-auto-rows:30px;
  background:#e8c48a;border:1px solid #96733f66;transform:rotate(-8deg);border-radius:4px}
.go-mini i{display:grid;place-content:center;border-right:1px solid #96733f44;border-bottom:1px solid #96733f44}
.go-mini i:before{content:"";width:20px;height:20px;border-radius:50%;display:none}
.go-mini i.b:before{display:block;background:#22303f;box-shadow:inset -2px -2px 0 #0003}
.go-mini i.w:before{display:block;background:#fffdf5;border:1px solid #cfc7b4}
.rr-mini{display:grid;grid-template-columns:repeat(3,30px);grid-auto-rows:30px;gap:5px;
  transform:rotate(8deg);font-size:17px;line-height:1}
.rr-mini span{background:#fffdf5;border-radius:6px;display:grid;place-content:center;box-shadow:0 2px 0 #20345322}
.sn-mini{position:relative;width:132px;height:88px;transform:rotate(-5deg)}
.sn-mini i{position:absolute;width:17px;height:17px;border-radius:5px;background:var(--leaf);
  box-shadow:inset -2px -2px 0 #0002}
.sn-mini i.apple{border-radius:50%;background:var(--coral)}