:root{
  --bg:#f4f1e8; --panel:#fffdf6; --panel2:#efe9da; --ink:#26221a; --ink2:#5c5546;
  --line:#d8cfb8; --accent:#b3392e; --accent2:#1f5fa8; --gold:#c9920e;
  --felt:#2e6b4f; --felt2:#276048; --cardbg:#ffffff; --cardink:#22242a; --red:#c22f2f;
  --shadow:0 2px 10px rgba(40,32,10,.14);
  --frame:#2e6b4f;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#17181c; --panel:#23252c; --panel2:#2b2e36; --ink:#ece7da; --ink2:#b6b0a0;
    --line:#3d414c; --accent:#e0685c; --accent2:#6fa8e8; --gold:#e0aa2e;
    --felt:#1d4a36; --felt2:#183d2c; --cardbg:#f4f1e6; --cardink:#22242a;
    --shadow:0 2px 10px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{overflow-anchor:none;background:var(--bg);color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Noto Sans JP",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
button{font-family:inherit;cursor:pointer}
h1,h2,h3{margin:0}
.wrap{max-width:1060px;margin:0 auto;padding:10px 12px 28px}
.topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 10px}
.topbar .ttl{font-size:22px;font-weight:800;letter-spacing:.04em}
.topbar .ttl .bolt{color:var(--gold)}
.savechip{margin-left:auto;font-size:12.5px;color:var(--ink2);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.navrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.navbtn{border:1.5px solid var(--line);background:var(--panel);color:var(--ink);border-radius:10px;padding:9px 16px;font-size:14.5px;font-weight:700}
.navbtn.on{background:var(--accent);border-color:var(--accent);color:#fff}
.view{display:none}
.view.on{display:block}
.card-panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px}
.sec-ttl{font-size:17px;font-weight:800;margin-bottom:4px}
.sec-sub{font-size:13px;color:var(--ink2);line-height:1.6;margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}
.optgroup{margin-bottom:18px}
.optgroup>h3{font-size:13px;color:var(--ink2);letter-spacing:.08em;margin-bottom:8px}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{border:2px solid var(--line);background:var(--panel);color:var(--ink);border-radius:12px;padding:10px 13px;font-size:14px;text-align:left;min-width:120px;flex:1}
.opt small{display:block;font-size:12px;color:var(--ink2);margin-top:3px;line-height:1.45}
.opt.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,var(--panel))}
.opt:disabled{opacity:.45;cursor:not-allowed}
.opt .lock{font-size:11.5px;color:var(--gold);font-weight:700}
.bigbtn{display:block;width:100%;border:none;border-radius:14px;background:var(--accent);color:#fff;font-size:19px;font-weight:800;padding:16px;margin-top:6px;box-shadow:var(--shadow)}
.bigbtn:active{transform:translateY(1px)}
.subbtn{border:1.5px solid var(--line);background:var(--panel);color:var(--ink);border-radius:10px;padding:9px 14px;font-size:14px;font-weight:700}
.stat-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.stat{background:var(--panel2);border-radius:10px;padding:9px 13px;font-size:13px}
.stat b{font-size:17px}
.rankbar{height:10px;background:var(--panel2);border-radius:99px;overflow:hidden;margin:6px 0 4px}
.rankbar>i{display:block;height:100%;background:var(--gold)}
.ninpo-row{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;background:var(--panel);flex-wrap:wrap}
.ninpo-row .nm{font-weight:800;font-size:15px;white-space:nowrap}
.ninpo-row .ds{font-size:12.5px;color:var(--ink2);line-height:1.5;flex:1;min-width:160px}
.ninpo-row .lv{font-weight:800;color:var(--accent2);white-space:nowrap}
.pillbtn{border:1.5px solid var(--accent2);color:var(--accent2);background:transparent;border-radius:9px;padding:7px 12px;font-weight:700;font-size:13px;white-space:nowrap}
.pillbtn:disabled{opacity:.4;cursor:not-allowed}
.pillbtn.eq{border-color:var(--accent);color:var(--accent)}
/* ===== game board ===== */
.decl-banner{display:flex;gap:10px;align-items:center;background:var(--panel);border:2px solid var(--gold);border-radius:12px;padding:9px 13px;margin-bottom:10px;box-shadow:var(--shadow)}
.decl-banner .who{font-size:12px;color:var(--ink2);white-space:nowrap;font-weight:700}
.decl-banner .what{font-size:16.5px;font-weight:800;flex:1;min-width:0;line-height:1.55}
.board{border:6px solid var(--frame);border-radius:20px;background:linear-gradient(160deg,var(--felt),var(--felt2));padding:12px;box-shadow:var(--shadow)}
.cpus{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:10px}
@media (max-width:560px){.cpus{grid-template-columns:repeat(3,1fr);gap:6px}}
.cpu{background:rgba(0,0,0,.28);border:2px solid transparent;border-radius:14px;padding:8px;display:flex;gap:8px;align-items:center;color:#f2eee1;min-width:0}
.cpu.turn{border-color:#ffd94d;box-shadow:0 0 0 2px rgba(255,217,77,.35)}
.cpu.fin{opacity:.75}
.cpu img{width:52px;height:52px;border-radius:10px;object-fit:cover;background:#fff;flex:none}
@media (max-width:560px){.cpu img{width:40px;height:40px}.cpu{flex-direction:column;text-align:center;gap:4px;padding:6px 4px}}
.cpu .nm{font-weight:800;font-size:14px;white-space:nowrap}
.cpu .inf{font-size:11.5px;line-height:1.5;color:#ddd6c2}
.cpu .inf b{color:#ffd94d}
.catface{width:52px;height:52px;border-radius:10px;background:#2b2b30;flex:none;display:flex;align-items:center;justify-content:center}
@media (max-width:560px){.catface{width:40px;height:40px}}
.fieldzone{background:rgba(0,0,0,.22);border-radius:14px;height:214px;overflow:hidden;padding:10px 12px;color:#f2eee1}
.fieldzone .flabel{font-size:12px;color:#cfc8ae;letter-spacing:.06em;margin-bottom:6px;display:flex;gap:10px;flex-wrap:wrap}
.fieldcards{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:64px}
.fieldempty{color:#bdb59a;font-size:13.5px}
.pcard{width:52px;height:72px;border-radius:8px;background:var(--cardbg);color:var(--cardink);border:1px solid #b9b2a0;box-shadow:0 2px 5px rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:flex-start;padding:4px 6px;font-weight:800;position:relative;user-select:none}
.pcard .rk{font-size:17px;line-height:1}
.pcard .st{font-size:15px;line-height:1.1}
.pcard.red{color:var(--red)}
.pcard.joker{background:linear-gradient(150deg,#ffe9a8,#ffc4d6);color:#7a1f5c}
.pcard.joker .rk{font-size:11px}
.pcard.small{width:42px;height:58px;padding:3px 5px}
.pcard.small .rk{font-size:14px}
.pcard.small .st{font-size:12px}
.pcard.pickable{cursor:pointer;outline:3px solid #ffd94d}
.fieldhist{font-size:12px;color:#cfc8ae;margin-top:6px;line-height:1.6}
/* dialogue strip: OUTSIDE the board frame */
.talkstrip{display:flex;gap:10px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-top:10px;box-shadow:var(--shadow);min-height:64px}
.talkstrip img,.talkstrip .catface{width:46px;height:46px;border-radius:9px;object-fit:cover;background:#eee;flex:none}
.talkstrip .who{font-size:12px;font-weight:800;color:var(--accent)}
.talkstrip .line{font-size:14.5px;line-height:1.55}
.logbox{margin-top:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 12px;height:96px;overflow-y:auto;font-size:12.5px;line-height:1.75;color:var(--ink2)}
.logbox b{color:var(--ink)}
/* player area */
.playerzone{margin-top:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.pstatus{display:flex;gap:8px;flex-wrap:nowrap;align-items:center;font-size:13px;margin-bottom:10px;height:32px;overflow:hidden}
.pstatus .chip{background:var(--panel2);border-radius:99px;padding:4px 11px}
.pstatus .chip b{color:var(--accent)}
.hand{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:78px}
.hand .pcard{width:56px;height:78px;cursor:pointer;transition:transform .08s}
.hand .pcard.sel{transform:translateY(-12px);outline:3px solid var(--accent)}
.hand .pcard.dim{opacity:.45}
@media (max-width:560px){.hand .pcard{width:47px;height:68px}.hand .pcard .rk{font-size:15px}}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:stretch}
.playbtn{flex:1;min-width:130px;border:none;border-radius:12px;background:var(--accent);color:#fff;font-size:17px;font-weight:800;padding:13px}
.playbtn:disabled{background:#a49a83;cursor:not-allowed}
.passbtn{border:2px solid var(--line);background:var(--panel);color:var(--ink);border-radius:12px;font-size:15px;font-weight:800;padding:13px 20px}
.passbtn:disabled{opacity:.4;cursor:not-allowed}
.ninpobtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ninbtn{flex:1;min-width:104px;border:2px solid var(--accent2);color:var(--accent2);background:var(--panel);border-radius:12px;padding:9px 8px;font-weight:800;font-size:14px;line-height:1.35}
.ninbtn small{display:block;font-size:11.5px;font-weight:600;color:var(--ink2)}
.ninbtn:disabled{opacity:.42;cursor:not-allowed}
.ninbtn.armed{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 16%,var(--panel));color:var(--ink)}
.msgline{font-size:13.5px;min-height:44px;margin-top:9px;color:var(--accent);font-weight:700}
.msgline.ok{color:var(--accent2)}
/* overlays */
.overlay{position:fixed;inset:0;background:rgba(12,10,6,.66);display:none;align-items:center;justify-content:center;padding:16px;z-index:50}
.overlay.on{display:flex}
.sheet{background:var(--panel);color:var(--ink);border-radius:18px;max-width:520px;width:100%;padding:24px 22px;box-shadow:0 12px 40px rgba(0,0,0,.4);max-height:88vh;overflow-y:auto}
.sheet h2{font-size:20px;margin-bottom:8px}
.sheet p{font-size:14px;line-height:1.7;color:var(--ink2)}
.decl-big{font-size:25px;font-weight:900;text-align:center;line-height:1.5;padding:16px 6px;color:var(--accent)}
.decl-desc{text-align:center;font-size:14px;color:var(--ink2);line-height:1.7;margin-bottom:14px}
.ranklist{font-size:16px;line-height:2.1}
.ranklist .me{font-weight:900;color:var(--accent)}
.peekcards{display:flex;gap:5px;flex-wrap:wrap;margin:10px 0}
.backpreview{display:inline-block;width:44px;height:60px;border-radius:7px;vertical-align:middle;margin-right:6px;border:1px solid rgba(0,0,0,.25)}
.rulesbox{font-size:13.5px;line-height:1.85;color:var(--ink2)}
.rulesbox b{color:var(--ink)}
footer{font-size:12px;color:var(--ink2);text-align:center;margin-top:18px;line-height:1.7}
/* ===== rich look / fan hand / players row upgrades ===== */
body{background-image:radial-gradient(circle at 15% 0%,rgba(201,146,14,.10),transparent 42%),radial-gradient(circle at 90% 10%,rgba(179,57,46,.07),transparent 40%)}
.topbar .ttl{text-shadow:0 1px 0 rgba(255,255,255,.45);border-bottom:3px solid var(--gold);padding-bottom:2px}
.board{position:relative;background:radial-gradient(ellipse at 50% 28%,rgba(255,255,255,.12),transparent 62%),repeating-linear-gradient(45deg,rgba(0,0,0,.035) 0 6px,transparent 6px 12px),linear-gradient(160deg,var(--felt),var(--felt2));box-shadow:inset 0 0 0 2px rgba(217,169,44,.55),inset 0 0 34px rgba(0,0,0,.28),var(--shadow)}
.pcard{background:linear-gradient(155deg,#ffffff 0%,#f7f2e2 70%,#ece4cd 100%);box-shadow:0 3px 7px rgba(0,0,0,.35),inset 0 1px 0 #fff}
.bigbtn,.playbtn{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 80%,#ffb199),var(--accent));box-shadow:0 4px 12px rgba(120,30,20,.32),inset 0 1px 0 rgba(255,255,255,.35)}
.decl-banner{background:repeating-linear-gradient(0deg,rgba(201,146,14,.06) 0 3px,transparent 3px 6px),var(--panel)}
.playerzone{background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel2) 55%,var(--panel)))}
.cpus{grid-template-columns:repeat(4,1fr)}
@media (max-width:560px){.cpus{grid-template-columns:repeat(4,1fr);gap:5px}.cpu .nm{font-size:12px}.cpu .inf{font-size:10.5px}}
.cpu{position:relative;overflow:visible}
.cpu.turn{border-color:#ffd94d;box-shadow:0 0 0 2px rgba(255,217,77,.4),0 0 18px rgba(255,217,77,.35)}
.turnbadge{display:inline-block;background:#ffd94d;color:#3a2c00;font-size:10.5px;font-weight:900;border-radius:99px;padding:1px 7px;margin-left:5px;vertical-align:2px;white-space:nowrap}
.ninpo-tag{position:absolute;top:-11px;right:-3px;background:linear-gradient(180deg,#ffe066,#f5b921);color:#3a2400;font-size:11.5px;font-weight:900;border-radius:99px;padding:3px 9px;box-shadow:0 3px 8px rgba(0,0,0,.35);white-space:nowrap;z-index:5}
.dobontag{color:#ff9d8a;font-weight:900}
.ninpo-banner{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.85);background:rgba(20,16,8,.93);color:#ffe9a8;border:2px solid var(--gold);border-radius:14px;padding:12px 20px;font-size:17px;font-weight:900;text-align:center;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:20;max-width:92%;box-shadow:0 10px 30px rgba(0,0,0,.5);line-height:1.5}
.ninpo-banner.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.talkstrip{height:58px;min-height:0;overflow:hidden;align-items:center}
.talkstrip .who{margin-right:8px}
.hand{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;min-height:0;padding:30px 12px 26px;overflow:visible}
.hwrap{display:inline-block;margin-left:-21px;transform-origin:50% 100%;cursor:pointer;flex:none;transition:transform .1s}
.hwrap:first-child{margin-left:0}
.hand .pcard{box-shadow:0 4px 9px rgba(0,0,0,.3)}
.hand .pcard.sel{transform:none;outline:3px solid var(--accent)}
@media (max-width:560px){.hwrap{margin-left:-28px}.hand{padding:26px 8px 22px}}
.ninbtn{text-align:left}
.ninbtn .nico{font-size:16px;margin-right:4px}
.ninbtn small{line-height:1.45}
.ninbtn .lack{color:var(--accent);font-weight:800}
.logbox{height:120px}
@media (prefers-reduced-motion: reduce){.ninpo-banner,.hwrap{transition:none}}
/* ===== deal / sort animation, rank table, points table, pt float ===== */
.deal-layer{position:absolute;inset:0;display:none;z-index:30;border-radius:14px;background:rgba(10,14,10,.28)}
.deal-layer.on{display:block}
.deckpile{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:58px;height:80px;border-radius:8px;border:2px solid rgba(255,255,255,.75);box-shadow:0 6px 16px rgba(0,0,0,.45),4px 4px 0 rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:900;letter-spacing:.08em}
.deal-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:rgba(15,12,5,.88);color:#ffe9a8;font-size:13px;font-weight:800;border-radius:99px;padding:6px 16px;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis}
.flycard{position:absolute;width:40px;height:56px;border-radius:7px;border:1.5px solid rgba(255,255,255,.8);box-shadow:0 4px 10px rgba(0,0,0,.4);pointer-events:none;z-index:40}
.pt-float{position:absolute;top:-14px;left:6px;background:var(--accent2);color:#fff;font-size:13px;font-weight:900;border-radius:99px;padding:2px 9px;box-shadow:0 3px 8px rgba(0,0,0,.35);animation:ptFloatUp 1.4s ease-out forwards;z-index:6;pointer-events:none}
@keyframes ptFloatUp{0%{opacity:0;transform:translateY(8px) scale(.8)}18%{opacity:1;transform:translateY(0) scale(1.12)}70%{opacity:1}100%{opacity:0;transform:translateY(-20px) scale(1)}}
.pt-hl{animation:ptPulse 1.2s ease-out}
@keyframes ptPulse{0%{color:#ffd94d;text-shadow:0 0 10px rgba(255,217,77,.95)}100%{}}
.ranktable,.pttable{width:100%;border-collapse:collapse;font-size:13.5px;margin:8px 0 4px}
.ranktable th,.pttable th{background:var(--panel2);text-align:left;padding:7px 9px;border:1px solid var(--line);font-size:12.5px}
.ranktable td,.pttable td{padding:7px 9px;border:1px solid var(--line);vertical-align:top;line-height:1.5}
.ranktable tr.cur td{background:color-mix(in srgb,var(--gold) 16%,var(--panel));font-weight:700}
.ranktable .curbadge{background:var(--accent);color:#fff;font-size:11px;font-weight:900;border-radius:99px;padding:2px 8px;white-space:nowrap}
.ranktable .donebadge{color:var(--ink2);font-size:11.5px;white-space:nowrap}
.ranktable .nextbadge{color:var(--accent2);font-weight:800;font-size:11.5px;white-space:nowrap}
.ptnote{font-size:13px;line-height:1.75;color:var(--ink2);margin-top:6px}
.ptnote b{color:var(--ink)}
@media (prefers-reduced-motion: reduce){.pt-float,.pt-hl{animation:none}}
.exch-cards{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:12px 0 6px}
.exch-card{cursor:pointer;border-radius:9px;padding:2px;border:2px solid transparent;background:transparent;line-height:0}
.exch-card .pcard{transition:transform .08s}
.exch-card.sel{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.exch-card.sel .pcard{outline:3px solid var(--accent);transform:translateY(-7px)}
.exch-count{font-size:15px;font-weight:800;text-align:center;margin:6px 0 2px}
.exch-count .short{color:var(--accent)}
.bigbtn:disabled{background:#a49a83;cursor:not-allowed;box-shadow:none}
/* ===== BIG revolution production ===== */
.revfx{position:fixed;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;z-index:80;pointer-events:none;background:radial-gradient(ellipse at center,rgba(20,8,0,.38),rgba(20,8,0,.62))}
.revfx.on{display:flex}
.revfx .revfx-main{font-size:min(26vw,150px);font-weight:900;letter-spacing:.06em;color:#ffe9a8;text-shadow:0 0 18px rgba(255,160,30,.95),0 0 60px rgba(255,90,20,.75),0 6px 0 #8a2b12,0 12px 34px rgba(0,0,0,.6);line-height:1.05;text-align:center;animation:revPop .55s cubic-bezier(.2,1.6,.4,1) both}
.revfx .revfx-sub{margin-top:14px;font-size:min(5.4vw,24px);font-weight:900;color:#fff;background:var(--accent);border:2px solid #ffd94d;border-radius:99px;padding:8px 22px;box-shadow:0 8px 24px rgba(0,0,0,.45);animation:revPop .55s .08s cubic-bezier(.2,1.6,.4,1) both;text-align:center;max-width:92vw}
.revfx.ret .revfx-main{color:#cfe8ff;text-shadow:0 0 18px rgba(90,170,255,.95),0 0 60px rgba(40,110,255,.7),0 6px 0 #173a6e,0 12px 34px rgba(0,0,0,.6)}
.revfx.ret .revfx-sub{background:var(--accent2)}
@keyframes revPop{0%{opacity:0;transform:scale(.3) rotate(-4deg)}60%{opacity:1;transform:scale(1.14) rotate(1deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@media (prefers-reduced-motion: reduce){.revfx .revfx-main,.revfx .revfx-sub{animation:none}}
/* ===== persistent revolution state (visible next to the field AND by the hand) ===== */
.revchip2{display:none;background:linear-gradient(180deg,#d84a35,#b3392e);color:#fff;font-weight:900;border-radius:99px;padding:3px 12px;font-size:13px;letter-spacing:.05em;box-shadow:0 2px 8px rgba(160,30,10,.5);white-space:nowrap}
.revchip2.on{display:inline-block;animation:revChipPulse 1.5s ease-in-out infinite}
@keyframes revChipPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.revchip2.shibari{background:linear-gradient(180deg,#2f6fb3,#1f5fa8);box-shadow:0 2px 8px rgba(20,70,140,.5)}
.pstatus .revchip{background:#b3392e;color:#fff;font-weight:900}
.pstatus .revchip b{color:#ffe9a8}
.board.revmode{box-shadow:0 0 0 3px rgba(255,84,40,.9),0 0 30px rgba(255,60,20,.55),inset 0 0 0 2px rgba(255,150,60,.8),inset 0 0 34px rgba(120,20,0,.35)}
@media (prefers-reduced-motion: reduce){.revchip2.on{animation:none}}
/* ===== layout compaction: side-by-side card history, head speech bubbles, status chip wrap fix ===== */
/* field zone: current field cards (left) and the 流れた札 history (right) share
   one shorter zone instead of stacking vertically */
.fieldzone{height:184px;display:flex;gap:12px}
.fcol{display:flex;flex-direction:column;min-width:0}
.fcol-main{flex:1.25}
.fcol-pile{flex:1;border-left:1px dashed rgba(255,255,255,.25);padding-left:12px}
.fcol-main .fieldcards{flex:1;min-height:0;overflow-y:auto;align-content:flex-start}
.fcol-main .fieldhist{margin-top:auto;padding-top:4px}
.pilecards{display:flex;gap:5px;flex-wrap:wrap;overflow-y:auto;align-content:flex-start;flex:1;min-height:0}
/* speech bubble ABOVE the speaking character's chip in the top row (owner
   request 2026-11-10: 吹き出しはキャラの上側に表示). It floats over the top
   edge of the speaker's own chip, tail pointing DOWN at their head, so it
   reads as speech coming from the character. It is an overlay (position
   absolute, pointer-events none), so showing or changing a line never
   shifts the layout, and it never covers the field cards below the row */
.cpus{position:relative;z-index:8}
.bubble{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);width:max-content;max-width:170px;background:var(--panel);color:var(--ink);font-size:12.5px;font-weight:700;line-height:1.5;padding:7px 10px;border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.4);z-index:30;pointer-events:none;text-align:left}
.bubble::after{content:"";position:absolute;bottom:-6px;left:50%;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:var(--panel)}
.cpu:first-child .bubble{left:-2px;transform:none}
.cpu:first-child .bubble::after{left:26px;margin-left:0}
.cpu:last-child .bubble{left:auto;right:-2px;transform:none}
.cpu:last-child .bubble::after{left:auto;right:26px;margin-left:0}
@media (max-width:560px){.bubble{max-width:155px;font-size:11.5px;padding:6px 8px}}
/* ===== shibari at-a-glance (owner 2026-11-10: 縛り中はパッと見で分かるように) =====
   While a suit lock is active the whole board gets a blue glowing frame, the
   field zone tints blue, a big banner sits across the top of the field zone
   naming the locked suits, and the player status row carries a matching
   chip. The field zone is fixed-height, so the banner + extra top padding
   only shift content inside the zone — the page layout never moves. */
.fieldzone{position:relative}
.shibari-banner{display:none;position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:12;align-items:center;gap:9px;background:linear-gradient(180deg,#3a7cc4,#1f5fa8);color:#fff;border:2px solid #ffd94d;border-radius:12px;padding:6px 16px;box-shadow:0 4px 16px rgba(10,50,110,.65);white-space:nowrap;pointer-events:none}
.board.shibarimode .shibari-banner{display:flex;animation:shibariPulse 1.6s ease-in-out infinite}
.shibari-banner .sb-lock{font-size:17px}
.shibari-banner .sb-suits{font-size:22px;font-weight:900;letter-spacing:.04em;line-height:1}
.shibari-banner .sb-main{font-size:17px;font-weight:900;letter-spacing:.06em}
.shibari-banner .sb-sub{font-size:11px;font-weight:700;opacity:.92}
@keyframes shibariPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.045)}}
.board.shibarimode{box-shadow:0 0 0 3px rgba(70,150,255,.95),0 0 30px rgba(40,110,255,.6),inset 0 0 0 2px rgba(140,190,255,.85),inset 0 0 34px rgba(0,30,110,.4)}
.board.revmode.shibarimode{box-shadow:0 0 0 3px rgba(255,84,40,.9),0 0 0 7px rgba(70,150,255,.85),0 0 34px rgba(120,80,255,.65),inset 0 0 0 2px rgba(255,150,60,.8),inset 0 0 34px rgba(60,10,80,.4)}
.board.shibarimode .fieldzone{padding-top:52px;background:rgba(20,60,140,.38)}
.pstatus .revchip.shibari{background:#1f5fa8}
.pstatus .revchip.shibari b{color:#ffe9a8}
@media (prefers-reduced-motion: reduce){.board.shibarimode .shibari-banner{animation:none}}
/* player status chips: never break mid-word — a chip wraps to the next line whole */
.pstatus{flex-wrap:wrap;height:auto;min-height:30px;overflow:visible;gap:6px;font-size:12.5px}
.pstatus .chip{white-space:nowrap;flex:none}
/* players row: names/badges stay inside their chip instead of spilling over */
.cpu .nm{white-space:normal;line-height:1.35}
.turnbadge{margin-left:2px}
/* shorter log + message line */
.logbox{height:88px}
.msgline{min-height:34px}