/* PON! — pop × thick outline。トークンは docs のデザインボードと同じ */
:root{
  --ink:#17151F; --felt:#1F1B33; --tile:#2A2640; --line:#3A3558; --k:#000;
  --yel:#FFC83D; --yel-d:#B58A12; --vio:#6A4DFF; --vio-l:#8E7BFF; --vio-d:#4B33C9;
  --red:#E5303F; --coral:#FF4D5E; --mint:#2ED3A0; --paper:#FFFFFF; --cream:#FFFBF0; --mute:#B9B4D6;
  --disp:'Noto Sans JP',system-ui,sans-serif;
  --body:'Noto Sans JP',system-ui,sans-serif;
  --snap:cubic-bezier(.2,.8,.2,1); --pop:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);font-weight:500;-webkit-text-size-adjust:100%}
body{min-height:100dvh;background-image:radial-gradient(#FFFFFF10 2px,transparent 2px);background-size:26px 26px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--yel);outline-offset:3px}
.disp{font-family:var(--disp);font-weight:900;letter-spacing:0}
.screen{max-width:1080px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));min-height:100dvh;display:flex;flex-direction:column;gap:18px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* ロゴ（2つの円が入れ替わる） */
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit;font-family:var(--disp);font-size:28px;line-height:1}
.logo svg{width:52px;height:32px;overflow:visible;flex:none}
.logo .wm{height:1.2em;width:auto;display:block;flex:none}
.logo .c1{animation:swapA 3.6s cubic-bezier(.6,0,.4,1) infinite}
.logo .c2{animation:swapB 3.6s cubic-bezier(.6,0,.4,1) infinite}
@keyframes swapA{0%,28%{transform:translateX(0)}50%,78%{transform:translateX(20px)}100%{transform:translateX(0)}}
@keyframes swapB{0%,28%{transform:translateX(0)}50%,78%{transform:translateX(-20px)}100%{transform:translateX(0)}}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;padding:0 28px;border:3px solid var(--k);border-radius:18px;background:var(--yel);color:var(--ink);font-weight:900;font-size:18px;text-decoration:none;cursor:pointer;box-shadow:0 6px 0 var(--yel-d),0 6px 0 3px var(--k);transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--yel-d),0 1px 0 3px var(--k)}
.btn.vio{background:var(--vio);color:#fff;box-shadow:0 6px 0 var(--vio-d),0 6px 0 3px var(--k)}
.btn.ghost{background:var(--tile);color:var(--paper);box-shadow:0 6px 0 #0E0C16,0 6px 0 3px var(--k)}
.btn.small{min-height:44px;padding:0 18px;font-size:15px;border-radius:14px;box-shadow:0 4px 0 var(--yel-d),0 4px 0 3px var(--k)}
.btn.small.vio{box-shadow:0 4px 0 var(--vio-d),0 4px 0 3px var(--k)}
.btn.small.ghost{box-shadow:0 4px 0 #0E0C16,0 4px 0 3px var(--k)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:0 0 0 3px var(--k)}
.sub{color:var(--mute);line-height:1.7;margin:0}
.err{color:#FF8E91;min-height:1.4em;margin:0;font-weight:700}

/* 入力・参加 */
.field{display:grid;gap:10px;max-width:440px}
.field label{font-weight:900}
.input{height:60px;border-radius:16px;border:3px solid var(--line);background:var(--felt);color:var(--paper);padding:0 18px;font:inherit;font-size:19px;font-weight:700;width:100%}
.input:focus{border-color:var(--yel);outline:none}
.note-box{background:var(--felt);border:3px solid var(--line);border-radius:18px;padding:14px 16px}
.screen.simple{justify-content:center;gap:22px}
.screen.simple h1{font-size:clamp(30px,7vw,48px);line-height:1.2;margin:0}

/* ステータス帯 */
.room{gap:14px}
.status{min-height:54px;display:flex;align-items:center;gap:10px;padding:8px 18px;border-radius:16px;background:var(--felt);border:3px solid var(--line);font-weight:900}
.status.mine{background:var(--yel);color:var(--ink);border-color:var(--k);animation:glow 1.6s ease-in-out infinite}
.status.warn{background:#3B2A1B;border-color:#8A5A1F;color:#FFD9A0}
.status.slide{animation:slidein .48s var(--pop) both}
.status.mine.slide{animation:slidein .48s var(--pop) both,glow 1.6s ease-in-out .5s infinite}
@keyframes slidein{0%{transform:translateX(-110%)}100%{transform:translateX(0)}}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(255,200,61,.55)}50%{box-shadow:0 0 0 7px rgba(255,200,61,0)}}

/* タイル */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:760px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.tile{position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--tile);border:3px solid var(--k);transition:box-shadow .2s}
.tile.turn{box-shadow:0 0 0 4px var(--yel);animation:ringpulse 1.8s ease-in-out infinite}
.tile.target{box-shadow:0 0 0 4px var(--vio-l)}
.tile.done{opacity:.8}
@keyframes ringpulse{0%,100%{box-shadow:0 0 0 4px var(--yel)}50%{box-shadow:0 0 0 7px rgba(255,200,61,.35)}}
.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--tile)}
.tile.mirror video{transform:scaleX(-1)}
.avatar{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:25%;aspect-ratio:1;min-width:48px;border-radius:50%;border:3px solid var(--k);display:grid;place-items:center;font-family:var(--disp);font-size:clamp(22px,4vw,34px)}
.tile.has-video .avatar{display:none}
.nm{position:absolute;left:8px;top:8px;display:flex;gap:6px;align-items:center;max-width:calc(100% - 92px);padding:3px 11px;border-radius:99px;background:var(--k);font-size:13px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{position:absolute;right:8px;top:8px;padding:3px 11px;border-radius:99px;background:var(--yel);color:var(--ink);border:2px solid var(--k);font-size:12px;font-weight:900}
.badge.out{background:var(--paper)}
.badge.warn{background:#FF8E91}
.conn{position:absolute;inset:0;display:grid;place-items:center;background:rgba(23,21,31,.7);font-weight:900}

/* カード */
.fan{position:absolute;left:6px;right:6px;bottom:6px;display:flex;justify-content:center;align-items:flex-end;pointer-events:none;--cw:30px;--ch:44px}
.fan.mine{--cw:46px;--ch:66px}
.fan .card{flex:0 1 var(--cw);min-width:12px;height:var(--ch);pointer-events:auto}
.fan .card + .card{margin-left:-2px}
.card{position:relative;overflow:hidden;border-radius:8px;background:var(--paper);color:var(--ink);box-shadow:0 2px 0 var(--k);border:2.5px solid var(--k);padding:0;font:inherit;text-align:left}
.card.red{color:var(--red)}
.card .rk{position:absolute;left:5px;top:3px;font-family:var(--disp);font-size:15px;line-height:1}
.card .st{position:absolute;left:5px;top:19px;font-size:14px;line-height:1;font-variant-emoji:text}
.fan:not(.mine) .card .rk{font-size:11px}
.card.joker{background:var(--yel)}
.card.joker .rk{font-size:10px;writing-mode:vertical-rl;top:4px}
.card.back{background:repeating-linear-gradient(45deg,var(--vio) 0 5px,var(--vio-d) 5px 10px)}
.card.back::after{content:'';position:absolute;inset:3px;border:1.5px solid #fff;border-radius:4px}
button.card.back{cursor:pointer}
button.card.back:hover,button.card.back:focus-visible{transform:translateY(-8px);z-index:2}
.fan .card{transition:transform .12s}
.card.enter{animation:cardin .55s var(--snap) backwards;animation-delay:calc(var(--d,0) * 60ms)}
@keyframes cardin{0%{transform:translateY(-80px) scale(.7) rotate(-10deg);opacity:0}60%{transform:translateY(4px) scale(1.08);opacity:1}100%{transform:none}}

/* 操作バー */
.dock{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.dock .grp{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;padding:0 16px;min-height:44px;border-radius:99px;background:var(--mint);color:var(--ink);border:3px solid var(--k);font-weight:900;cursor:pointer;transition:transform .1s}
.chip:hover{transform:translateY(-2px)}
.chip[aria-pressed="false"]{background:var(--tile);border-color:var(--line);color:var(--mute)}

/* ロビー */
.panel{display:grid;gap:16px}
.share{display:grid;gap:10px;background:var(--yel);color:var(--ink);border:3px solid var(--k);border-radius:22px;padding:16px 18px;box-shadow:0 6px 0 var(--k)}
.share .lbl{font-weight:900;font-size:14px}
.invite{display:flex;gap:8px;flex-wrap:wrap}
.invite input{flex:1 1 220px;min-width:0;height:48px;border-radius:12px;border:3px solid var(--k);background:#fff;color:var(--ink);padding:0 12px;font:inherit;font-weight:900}
.share .btn.small{background:var(--ink);color:#fff;box-shadow:0 3px 0 var(--k)}
.seats{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.seats-head{display:flex;justify-content:space-between;align-items:baseline;font-weight:900}
.seat{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 14px 6px 8px;border:3px solid var(--line);border-radius:18px;background:var(--tile);font-weight:900}
.seat .av{width:40px;height:40px;border-radius:50%;border:3px solid var(--k);display:grid;place-items:center;font-family:var(--disp);flex:none}
.seat .nmx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat .tag{font-size:12px;padding:3px 10px;border-radius:99px;background:var(--yel);color:var(--ink)}
.seat.empty{border-style:dashed;background:transparent;color:#8E88B0;font-weight:700}
.seat.empty .av{border:3px dashed #6B6590}
.games{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.gamebtn{text-align:left;padding:14px 16px;border-radius:18px;border:3px solid var(--line);background:var(--tile);cursor:pointer;display:grid;gap:4px;transition:transform .1s}
.gamebtn:hover{transform:translateY(-2px)}
.gamebtn b{font-family:var(--disp);font-weight:900;font-size:19px}
.gamebtn span{color:var(--mute);font-size:13px}
.gamebtn[aria-pressed="true"]{border-color:var(--yel);background:#3B3170;box-shadow:0 0 0 3px rgba(255,200,61,.25)}

/* 結果 */
.result{position:fixed;inset:0;background:rgba(23,21,31,.9);display:grid;place-items:center;padding:20px;z-index:10;overflow:hidden}
.result .box{position:relative;width:min(440px,100%);background:var(--felt);border:3px solid var(--k);border-radius:28px;padding:44px 24px 24px;display:grid;gap:16px;box-shadow:0 8px 0 var(--k);animation:popin .5s var(--pop) both}
.result .crown{position:absolute;top:-34px;left:calc(50% - 42px);width:84px;animation:crown .8s cubic-bezier(.34,1.2,.64,1) .2s both}
.result h2{margin:0;font-size:28px;text-align:center}
.rank{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rank li{display:flex;justify-content:space-between;padding:12px 16px;border-radius:16px;background:var(--tile);border:3px solid var(--line);font-weight:900}
.rank li:first-child{background:var(--yel);color:var(--ink);border-color:var(--k)}
.rank li.lose{background:#3B1F28;border-color:var(--coral);color:#FFB1BA}
.result .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.cf{position:absolute;top:0;border:2px solid var(--k);animation:conf linear both;pointer-events:none}
@keyframes conf{0%{transform:translateY(-40px) rotate(0)}100%{transform:translateY(110vh) rotate(540deg)}}
@keyframes popin{0%{transform:scale(.7);opacity:0}100%{transform:none;opacity:1}}
@keyframes crown{0%{transform:translateY(-300px) rotate(-20deg)}60%{transform:translateY(12px) rotate(-6deg)}75%{transform:translateY(-12px) rotate(-6deg)}100%{transform:translateY(0) rotate(-6deg)}}

#toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom));transform:translate(-50%,20px);opacity:0;background:var(--paper);color:var(--ink);border:3px solid var(--k);padding:12px 18px;border-radius:14px;font-weight:900;pointer-events:none;transition:opacity .2s,transform .2s;z-index:30}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* 七並べの場 */
.board{display:grid;gap:4px;padding:10px;border-radius:18px;background:var(--felt);border:3px solid var(--line)}
.brow{display:grid;grid-template-columns:22px repeat(13,minmax(0,34px));gap:3px;align-items:center;justify-content:center}
.brow .bs{font-size:18px;text-align:center;line-height:1;font-variant-emoji:text}
.brow.red{color:var(--red)}
.cell{aspect-ratio:3/4;border-radius:5px;border:1.5px dashed var(--line);display:grid;place-items:center;font-size:clamp(9px,1.6vw,14px);font-weight:900;line-height:1}
.cell.on{background:var(--paper);border:2px solid var(--k);color:inherit;animation:place .4s var(--pop) backwards}
.brow:not(.red) .cell.on{color:var(--ink)}
.cell.hint{border:2px solid var(--yel);background:rgba(255,200,61,.22)}
@keyframes place{0%{transform:scale(1.8) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
.card.dim{opacity:.4;filter:saturate(.6)}
button.card:not(.back){cursor:pointer;pointer-events:auto}
button.card:not(.back):not(.dim):hover,button.card:not(.back):not(.dim):focus-visible{transform:translateY(-10px);z-index:2}

/* ダウトの場 */
.pile{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.stack{position:relative;width:64px;height:76px}
.stack .card{position:absolute;left:calc(var(--i) * 6px);top:calc(var(--i) * -3px);width:46px;height:68px}
.stack b{position:absolute;right:-2px;bottom:-4px;min-width:28px;height:28px;border-radius:99px;background:var(--yel);color:var(--ink);border:2px solid var(--k);display:grid;place-items:center;font-size:14px}
.declare{display:grid;gap:2px}
.declare span{color:var(--mute);font-size:13px;font-weight:700}
.declare b{font-size:44px;line-height:1;color:var(--yel)}
.pile-line{margin:8px 0 0;font-weight:700}
.pile-line.call{color:#FFD9A0}
.pile-line.call.lie{color:#9FE8D2}
.revealed{display:flex;gap:6px;margin-top:8px}
.revealed .card{position:relative;width:44px;height:62px;flex:none}
.card.sel{transform:translateY(-12px);box-shadow:0 0 0 3px var(--yel),0 2px 0 var(--k)}

.tray{display:flex;flex-wrap:wrap;gap:6px 4px;justify-content:center;padding:14px 10px 10px;border-radius:18px;background:var(--felt);border:3px solid var(--line)}
.tray .card{position:relative;flex:none;width:44px;height:64px}

/* ゲーム中の演出（fx.js） */
#app.shake{animation:shake .5s linear}
@keyframes shake{0%,100%{transform:translate(0)}10%{transform:translate(-10px,4px)}20%{transform:translate(9px,-5px)}30%{transform:translate(-8px,-3px)}45%{transform:translate(6px,5px)}60%{transform:translate(-4px,2px)}80%{transform:translate(2px,-1px)}}
.fx{position:fixed;inset:0;pointer-events:none;z-index:40;display:grid;place-items:center;overflow:hidden}
.fx-flash{position:absolute;inset:0;background:var(--coral);animation:flashr .8s ease-out both}
@keyframes flashr{0%{opacity:0}20%{opacity:.55}100%{opacity:0}}
.fx-stamp{position:relative;padding:8px 30px;background:var(--coral);color:var(--ink);border:4px solid var(--k);border-radius:18px;font-size:clamp(40px,12vw,76px);box-shadow:0 8px 0 var(--k);animation:stamp .6s var(--pop) .15s both}
@keyframes stamp{0%{transform:translateY(-240px) scale(2) rotate(-14deg);opacity:0}60%{transform:translateY(0) scale(.9) rotate(-8deg);opacity:1}78%{transform:scale(1.1) rotate(-8deg)}100%{transform:scale(1) rotate(-8deg);opacity:1}}
.fx-rays{position:absolute;width:min(90vw,560px);aspect-ratio:1;border-radius:50%;background:repeating-conic-gradient(var(--yel) 0 10deg,transparent 10deg 20deg);animation:rays .7s ease-out both}
@keyframes rays{0%{transform:scale(.2) rotate(0);opacity:.9}100%{transform:scale(1.7) rotate(20deg);opacity:0}}
.fx-slam{position:relative;font-size:clamp(52px,16vw,112px);line-height:1;color:var(--coral);-webkit-text-stroke:3px var(--k);paint-order:stroke fill;text-shadow:0 8px 0 var(--k);animation:slam .6s var(--pop) both}
@keyframes slam{0%{transform:scale(3.2) rotate(-10deg);opacity:0}35%{transform:scale(.92) rotate(-6deg);opacity:1}55%{transform:scale(1.06) rotate(-6deg)}100%{transform:scale(1) rotate(-6deg);opacity:1}}
.fx-pop{position:absolute;left:50%;top:46%;z-index:3;padding:4px 14px;background:#fff;color:var(--vio);border:3px solid var(--k);border-radius:12px;font-family:var(--disp);font-size:clamp(16px,3.4vw,24px);box-shadow:0 3px 0 var(--k);pointer-events:none;animation:popt 1.3s var(--pop) both}
@keyframes popt{0%{transform:translate(-50%,-50%) scale(0) rotate(-12deg)}25%{transform:translate(-50%,-50%) scale(1.2) rotate(-6deg)}40%{transform:translate(-50%,-50%) scale(1) rotate(-6deg)}85%{opacity:1}100%{transform:translate(-50%,-90%) scale(1) rotate(-6deg);opacity:0}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* 書体: 見出し系は Noto Sans JP の極太 */
.logo,.avatar,.card .rk,.seat .av,.fx-pop,.declare b{font-weight:900}

/* 大富豪 */
.rule-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.rule-chip{padding:3px 10px;border-radius:99px;border:2px solid var(--line);font-size:12px;font-weight:900}
.rule-chip.hot{background:var(--yel);color:var(--ink);border-color:var(--yel)}
.pile-line.dim{color:var(--mute);font-weight:500;font-size:13px}
.opts{display:grid;gap:8px;padding:12px 14px;border-radius:16px;background:var(--felt);border:2px solid var(--line)}
.opt{display:flex;align-items:center;gap:10px;font-weight:700;cursor:pointer}
.opt input{width:20px;height:20px;accent-color:var(--yel)}
.opt.choice{flex-wrap:wrap;justify-content:space-between}
.opt.choice .grp{display:flex;gap:6px}
.opt.choice .chip[aria-pressed="true"]{background:var(--yel);color:var(--ink);border-color:var(--yel)}
.opt.choice .chip[aria-pressed="false"]{background:var(--felt);border-color:var(--line);color:var(--paper)}
.status .btn{flex:none;white-space:nowrap}
.status>span{min-width:0}
.status{flex-wrap:wrap}
.status>span{flex:1 1 180px;min-width:0}

/* ---- 映像が画面いっぱいに広がるレイアウト ---- */
/* 映像の左右反転: 全員の映像を、自撮りと同じ向き（反転）にそろえる。自分から見ても他人から見ても同じ */
.tile video{transform:scaleX(-1)}

/* ロビー: 画面幅に合わせて列数が変わる */
.screen.room{max-width:none;padding:max(8px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));gap:10px}
.screen.room .grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:10px}
.tile{container-type:inline-size}

/* ゲーム中: 画面の高さいっぱいを映像のタイルで埋める */
.screen.room.playing{height:100dvh;min-height:0;overflow:hidden;gap:8px}
.screen.room.playing .table{flex:1 1 0;min-height:0;display:flex;flex-direction:column;gap:8px}
.screen.room.playing .grid{flex:1 1 0;min-height:0;grid-auto-rows:minmax(0,1fr);gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
.screen.room.playing .tile{aspect-ratio:auto;width:100%;height:100%;min-height:0}
.screen.room.playing .tray{max-height:34dvh;overflow:auto}
/* 縦長の画面（スマホ）: 少人数は縦に積み、4人以上は2列 */
.screen.room.playing .grid[data-n="1"],.screen.room.playing .grid[data-n="2"],.screen.room.playing .grid[data-n="3"]{grid-template-columns:minmax(0,1fr)}
/* 横長の画面（PC・タブレット横）: 人数に合わせて横に並べる */
@media (min-aspect-ratio:1/1){
  .screen.room.playing .grid[data-n="1"]{grid-template-columns:minmax(0,1fr)}
  .screen.room.playing .grid[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .screen.room.playing .grid[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .screen.room.playing .grid[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .screen.room.playing .grid[data-n="5"],.screen.room.playing .grid[data-n="6"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 大きなタイルでは、手札の札も大きくする */
@container (min-width:420px){ .fan{--cw:38px;--ch:56px} .fan.mine{--cw:58px;--ch:84px} }
@container (min-width:640px){ .fan{--cw:44px;--ch:64px} .fan.mine{--cw:68px;--ch:98px} }

/* 手札: 札は縮めず、必要なときだけ重ねる（重ね幅は JS が --ov で指定） */
.fan .card{flex:0 0 var(--cw);min-width:0}
.fan .card + .card{margin-left:var(--ov,-2px)}
.fan.wrap{flex-wrap:wrap;row-gap:4px;pointer-events:none}
.fan.wrap .card + .card{margin-left:var(--ov,4px)}
.fan .cnt{margin-left:6px;align-self:center;padding:3px 9px;border-radius:99px;background:var(--yel);color:var(--ink);font-size:13px;font-weight:900;pointer-events:none}
/* 画面が低い・狭いとき: 映像を押しつぶさないよう、ほかの部品を小さくし、足りなければスクロールできるようにする */
.screen.room.playing{overflow-y:auto}
.screen.room.playing .grid{min-height:min(36dvh,240px)}
@media (max-width:520px){
  .bar{gap:8px;min-width:0}
  .bar .logo{font-size:22px;gap:6px}
  .bar .logo svg{width:40px;height:25px}
  .bar .sub{font-size:13px;white-space:nowrap}
  .bar .bug-link{margin-left:auto}
  .tray .card{width:40px;height:58px}
  .dock .chip{min-height:34px;padding:0 10px;font-size:13px}
  .dock .btn.small{min-height:34px}
}

/* 引く人が選んでいる札（持ち主の表向きの札にも、ほかの人から見える裏向きの札にも付く） */
.card.pointed{transform:translateY(-14px);box-shadow:0 0 0 3px var(--yel),0 5px 12px rgba(0,0,0,.55);z-index:4}

/* ---- オバケチェス ---- */
.geister-wrap{--tilt:24deg;display:flex;flex-direction:column;align-items:center;gap:4px;padding:2px 4px;overflow:hidden}
.screen.room.playing .board.geister-wrap{flex:1 1 0;min-height:0}
.gslot{flex:1 1 0;min-height:0;width:100%;display:grid;place-items:center;perspective:1000px;perspective-origin:50% 110%;container-type:size}
.gboard{display:grid;grid-template-columns:repeat(6,1fr);gap:0;padding:7px;border-radius:16px;background:var(--vio-d,#4B33C9);border:3px solid var(--ink);box-shadow:0 10px 0 var(--ink),0 20px 26px rgba(0,0,0,.45);width:min(100cqw,100cqh);height:auto;aspect-ratio:1/1;box-sizing:border-box;transform:rotateX(var(--tilt));transform-origin:50% 85%;transform-style:preserve-3d}
.gcell{position:relative;aspect-ratio:1/1;min-width:0;min-height:0;border:0;border-radius:0;display:grid;place-items:end center;padding:0;cursor:pointer;color:inherit;transform-style:preserve-3d;background:#3a3466;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.gcell.alt{background:#2c2751}
.gcell.zone{box-shadow:inset 0 0 0 3px rgba(255,200,61,.75)}
.gcell.exit{background:#5a4a1d}
.gcell.exit::after{content:'⬆';position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(18px,5vw,40px);font-weight:900;color:var(--yel);pointer-events:none;animation:gexit 1.2s ease-in-out infinite}
.gcell.can{background:#6d5a1c;box-shadow:inset 0 0 0 3px var(--yel);animation:gcan .9s ease-in-out infinite}
.gcell.capture{background:#6b2530;box-shadow:inset 0 0 0 3px var(--coral,#FF4D5E)}
.gcell.sel{box-shadow:inset 0 0 0 3px #fff;background:#5a4bb0}
.gcell.last::before{content:'';position:absolute;inset:8%;border:2px dashed rgba(255,255,255,.45);pointer-events:none}
.gcell.arrive::after{content:'';position:absolute;inset:10%;border-radius:50%;border:3px solid var(--yel);pointer-events:none;animation:gring .5s ease-out forwards}
.gcell.exit.arrive::after{content:'⬆';border:0;border-radius:0}
.gcell.boom::after{border-color:var(--coral,#FF4D5E)}
.obake{position:relative;display:block;height:92%;aspect-ratio:5/6;margin-bottom:4%;transform:rotateX(calc(var(--tilt) * -1));transform-origin:50% 100%;filter:drop-shadow(0 3px 0 rgba(0,0,0,.3));animation:gbob 2.6s ease-in-out infinite}
.obake svg{display:block;width:100%;height:100%;overflow:visible}
.gcell:nth-child(3n) .obake{animation-delay:-.8s}.gcell:nth-child(3n+1) .obake{animation-delay:-1.6s}
.obake .ob{fill:#fff;stroke:var(--ink);stroke-width:5;stroke-linejoin:round}
.obake.opp .ob{fill:#E4DEF8}
.obake .oe{fill:var(--ink)}.obake .oc{fill:#FFB3C1;opacity:.9}
.gcell.sel .obake{animation:gjump .5s ease-in-out infinite}
.gcell.arrive .obake{animation:gland .45s cubic-bezier(.3,1.6,.5,1)}
/* 自分のコマだけ、お腹に小さな色の丸（相手からは見えない） */
.obake .od{stroke:var(--ink);stroke-width:4}
.obake.blue .od{fill:#2f8cff}.obake.red .od{fill:#ff3b4e}
.obake.small{height:30px;margin:0;flex:none;transform:none;animation:none}
.gcap{display:flex;align-items:center;gap:8px;min-height:30px;padding:2px 12px;border-radius:999px;background:var(--tile);border:2px solid var(--line);font-size:12px;font-weight:700;color:var(--mute)}
.gcap em{font-style:normal;color:var(--mute);opacity:.7}
.gcap .obake.small{animation:gpop .35s cubic-bezier(.3,1.6,.5,1) both}
@keyframes gbob{0%,100%{transform:rotateX(calc(var(--tilt) * -1)) translateY(0)}50%{transform:rotateX(calc(var(--tilt) * -1)) translateY(-5%)}}
@keyframes gjump{0%,100%{transform:rotateX(calc(var(--tilt) * -1)) translateY(-6%) scale(1.04)}50%{transform:rotateX(calc(var(--tilt) * -1)) translateY(-22%) scale(1.06)}}
@keyframes gland{0%{transform:rotateX(calc(var(--tilt) * -1)) translateY(-70%) scale(1.15,.85)}60%{transform:rotateX(calc(var(--tilt) * -1)) translateY(0) scale(1.12,.88)}100%{transform:rotateX(calc(var(--tilt) * -1)) translateY(0) scale(1)}}
@keyframes gring{from{transform:scale(.3);opacity:1}to{transform:scale(1.5);opacity:0}}
@keyframes gcan{50%{filter:brightness(1.35)}}
@keyframes gexit{50%{transform:translateY(-12%)}}
@keyframes gpop{from{transform:scale(0)}}
/* 盤の脇に、2人の映像を小さく置く */
/* 映像: スマホは盤の上に2つ並べて大きめに、PCは卓の両サイドに大きく置く */
.screen.room.playing .grid[data-game="geister"]{flex:0 0 auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;min-height:0;gap:6px}
.screen.room.playing .grid[data-game="geister"] .tile{aspect-ratio:4/3;height:auto;max-height:24dvh}
@media (min-width:820px) and (min-aspect-ratio:1/1){
  .screen.room.playing .table:has(.grid[data-game="geister"]){display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2.4fr) minmax(200px,1fr);grid-template-rows:auto minmax(0,1fr);gap:8px 16px}
  .screen.room.playing .table:has(.grid[data-game="geister"]) .status{grid-column:2;grid-row:1}
  .screen.room.playing .table:has(.grid[data-game="geister"]) .board{grid-column:2;grid-row:2;min-height:0}
  .screen.room.playing .grid[data-game="geister"]{display:contents}
  .screen.room.playing .grid[data-game="geister"] .tile{grid-row:1/3;align-self:center;max-height:none;width:100%}
  .screen.room.playing .grid[data-game="geister"] .tile:nth-child(1){grid-column:1}
  .screen.room.playing .grid[data-game="geister"] .tile:nth-child(2){grid-column:3}
}

/* オバケチェス: 対戦が終わって .playing が外れても、盤が潰れないようにする（振り返れる大きさにする） */
.screen.room:not(.playing) .geister-wrap .gslot{flex:none;height:min(94vw,62dvh)}

/* ログイン表示（任意機能） */
.acct{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;font-weight:700}
.acct .who{opacity:.85}
.acct .lk-btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;text-decoration:none;font:inherit;line-height:1;font-weight:800;cursor:pointer;min-height:40px;padding:0 14px;border-radius:12px;border:2px solid currentColor;background:transparent;color:inherit}
.acct .lk-btn:hover{background:rgba(255,255,255,.12)}
.acct.in-panel{justify-content:flex-end;color:var(--paper,#FFFBF0)}
.acct .lk-btn:focus-visible{outline:3px solid var(--yel,#FFC83D);outline-offset:2px}

/* ポーカー */
.board.pk-board{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 10px}
.pk-head{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;color:var(--mute);font-size:13px;font-weight:800}
.pk-cards{display:flex;gap:6px;justify-content:center}
.pk-cards .card{flex:none;width:clamp(36px,9vw,54px);height:clamp(52px,13vw,78px)}
.pk-cards .card .rk{font-size:clamp(13px,3.2vw,18px)}
.pk-cards .card.slot{background:transparent;border:2px dashed var(--line);box-shadow:none}
.pk-pot{font-weight:900;font-size:16px}
.pk-pot b{color:var(--yel);font-size:24px;font-family:var(--disp)}
.pk-raise{display:grid;gap:8px;justify-items:center;width:100%}
.pk-quick{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.pk-step{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.pk-step output{min-width:64px;text-align:center;font-family:var(--disp);font-weight:900;font-size:22px;color:var(--yel)}
.pkinfo{position:absolute;left:8px;top:36px;display:flex;flex-direction:column;align-items:flex-start;gap:3px;z-index:1;pointer-events:none}
.pkinfo span,.pkinfo b{padding:2px 9px;border-radius:99px;background:var(--k);font-size:12px;font-weight:900;line-height:1.5}
.pkinfo b{background:var(--yel);color:var(--ink);border:2px solid var(--k)}

/* ポーカーの演出 */
.pkchip{position:fixed;z-index:40;width:18px;height:18px;border-radius:50%;background:var(--yel);border:3px solid var(--k);box-shadow:inset 0 0 0 2px #fff6;pointer-events:none}
.tile.win-glow{animation:pkwin 1.1s ease-in-out 2}
@keyframes pkwin{0%,100%{box-shadow:0 0 0 4px var(--mint)}50%{box-shadow:0 0 0 9px rgba(46,211,160,.35),0 0 28px 6px rgba(46,211,160,.5)}}
@media (prefers-reduced-motion:reduce){.tile.win-glow{animation:none;box-shadow:0 0 0 4px var(--mint)}}

/* コヨーテ */
.board.cy-board{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 10px}
.cy-total{display:grid;justify-items:center;gap:2px}
.cy-total b{font-family:var(--disp);font-weight:900;font-size:clamp(40px,10vw,64px);line-height:1;color:var(--yel)}
.cy-total span{color:var(--mute);font-size:13px;font-weight:800}
.cy-notes{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px;font-weight:700;color:var(--paper)}
.cy-card{position:absolute;left:50%;top:34px;transform:translateX(-50%);z-index:1;width:clamp(40px,24%,64px);aspect-ratio:3/4;display:grid;place-content:center;justify-items:center;gap:2px;
  border-radius:9px;border:3px solid var(--k);background:var(--paper);color:var(--ink);box-shadow:0 3px 0 var(--k);pointer-events:none;text-align:center;line-height:1.1}
.cy-card b{font-family:var(--disp);font-weight:900;font-size:clamp(16px,3.4vw,24px)}
.cy-card small{font-size:10px;font-weight:800}
.cy-card.neg{background:#FFE0E3;color:var(--red)}
.cy-card.sp{background:var(--vio);color:#fff}
.cy-card.sp.fox{background:#FF9A4D;color:var(--ink)}
.cy-card.sp.chief{background:var(--yel);color:var(--ink)}
.cy-card.hid{background:repeating-linear-gradient(45deg,var(--vio) 0 5px,var(--vio-d) 5px 10px);color:#fff}
.cy-card.hid b{font-size:clamp(22px,4.4vw,34px)}
.cy-card.drawn{outline:3px dashed var(--mint);outline-offset:2px}
.cy-card.rev{animation:cyflip .5s var(--snap) both}
@keyframes cyflip{from{transform:translateX(-50%) perspective(400px) rotateY(90deg);opacity:.2}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.cy-card.rev{animation:none}}

/* ---- 人狼 ---- */
.tile.pickable{cursor:pointer;box-shadow:0 0 0 3px var(--vio-l)}
.tile.pickable:hover,.tile.pickable:focus-visible{box-shadow:0 0 0 5px var(--yel)}
.tile.picked{box-shadow:0 0 0 5px var(--yel),0 0 20px rgba(255,200,61,.65)}
.ww-board{display:grid;gap:10px;padding:14px 16px}
.ww-comp{margin:0;font-size:13px;color:var(--mute);font-weight:700}
.ww-me{display:grid;gap:4px;padding:10px 12px;border:2px solid var(--vio-l);border-radius:14px;background:rgba(106,77,255,.18);font-size:14px;line-height:1.7}
.ww-me b{font-size:15px}
.ww-me .ww-note{color:var(--yel);font-weight:800}
.ww-line{margin:0;font-size:13.5px;color:var(--paper)}
.ww-log{display:grid;gap:3px;padding:9px 12px;border-radius:12px;background:var(--tile);font-size:14px}
.ww-log b{font-size:12.5px;color:var(--mute)}
.ww-log .ww-res{font-weight:900}
.ww-log small{color:var(--mute);line-height:1.7}