/* =========================================================
   Roobazi — Phase 2 styles. Uses the Phase 1 tokens on :root.
   ========================================================= */
:root{
  --team-evil:#B4233C; --team-good:#14707F; --team-solo:#5B3CB8;
  --night-muted:#C9C8E3; --night-line:rgba(255,255,255,.14);
}

/* ---------- shared ---------- */
.narrow{max-width:760px}
.back-link{display:inline-flex;align-items:center;gap:4px;justify-self:start;text-decoration:none}
.back-link .od-icon{--od-icon-size:20px}
.plain-link{color:inherit;text-decoration:none}
@media (hover:hover){.plain-link:hover{text-decoration:underline;text-decoration-color:var(--orange-500)}}
.inline-link{font-weight:700;color:inherit;text-decoration:underline;text-decoration-color:var(--orange-500);text-underline-offset:3px}
.fs{border:0;padding:0;margin:0;min-width:0;display:grid;gap:var(--s-2)}
.fs > legend{padding:0;margin-bottom:var(--s-2)}
.form-actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.form-2.tight{gap:var(--s-3);grid-template-columns:repeat(2,minmax(0,1fr))}
.banner .od-field{--od-gap:2px}
.req-tag,.opt-tag{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:var(--r-pill);font-size:var(--fs-12);font-weight:700;vertical-align:middle;margin-inline-start:6px}
.req-tag{background:#FDECEC;color:var(--danger-ink)}
.opt-tag{background:var(--navy-100);color:var(--navy-700)}
.count-pill{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;margin-inline-start:6px;border-radius:var(--r-pill);background:var(--orange-500);color:var(--navy-900);font-size:var(--fs-14);vertical-align:middle}
.stat-row{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.emblem{display:grid;place-items:center;flex:none;width:var(--size);height:calc(var(--size) * 1.06);background:var(--navy-900);color:var(--orange-400)}
.emblem .od-icon{--od-icon-size:calc(var(--size) * .52)}
.role-thumb{display:block;flex:none;width:var(--w);height:auto;aspect-ratio:2/3;border-radius:6px;background:var(--navy-900)}
.role-thumb-empty{display:grid;place-items:center;background:color-mix(in srgb,var(--rc,#2E2C5C) 16%,#fff);color:var(--rc,#2E2C5C)}
.role-thumb-empty .od-icon{--od-icon-size:50%}
.badge .od-icon{--od-icon-size:12px}
.av-stack{display:inline-flex;align-items:center;flex:none;padding-inline-start:6px}
.av-stack > .avatar{margin-inline-start:-6px}
.av-more{color:var(--navy-700);font-size:calc(var(--size) * .34)}
.group-line{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.pen-line{display:flex;align-items:center;gap:6px;font-size:var(--fs-12);font-weight:700;color:var(--danger-ink)}
.pen-line .od-icon{--od-icon-size:14px}
.row-btn.static{cursor:default}
@media (hover:hover){.row-btn.static:hover{background:var(--white)}}
.deck-row{align-items:flex-start;text-decoration:none;color:inherit}
.deck-row .badges{margin-top:2px}
.notice-card{display:flex;align-items:center;gap:var(--s-4);text-decoration:none;color:inherit;transition:border-color var(--dur-fast) var(--ease-out)}
@media (hover:hover){.notice-card:hover{border-color:var(--navy-700)}}
.month-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.month-nav .icon-btn[disabled]{opacity:.35;cursor:not-allowed}
.more-list .row-btn{text-decoration:none;color:inherit}
.more-list .row-btn[aria-current="page"]{background:var(--orange-50)}
.more-ic{--od-icon-size:22px;color:var(--navy-700)}
.bn-more{border:0;background:none;font:inherit;font-size:var(--fs-12);font-weight:700}
.load-more{display:flex;align-items:center;justify-content:center;gap:var(--s-4);padding:var(--s-4) 0}

/* filters */
.filters-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(2,minmax(0,1fr))}
.filters-grid .fg-search{grid-column:1 / -1}
@media (min-width:1024px){
  .filters-grid{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));align-items:start}
  .filters-grid .fg-search{grid-column:auto}
  .decks-filters{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* people picker */
.picker{position:relative;display:grid;gap:var(--s-2)}
.picker-list{display:grid;border:1px solid var(--line);border-radius:var(--r);background:var(--white);max-height:320px;overflow-y:auto;overscroll-behavior:contain;box-shadow:var(--shadow-2)}
.picker-list[hidden]{display:none}
.picker-list li + li{border-top:1px solid var(--line)}
.pick-item{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:56px;padding:var(--s-2) var(--s-3);border:0;background:var(--white);text-align:start}
.pick-item .chev{--od-icon-size:20px;color:var(--orange-600)}
@media (hover:hover){.pick-item:hover{background:var(--gray-50)}}
.pick-new{color:var(--navy-900)}
.pick-new > .od-icon{--od-icon-size:24px;color:var(--orange-600);margin-inline:8px}
.pick-empty{padding:var(--s-3) var(--s-4);font-size:var(--fs-14);color:var(--gray-500)}
.pick-rows{display:grid;gap:var(--s-1);border:1px solid var(--line);border-radius:var(--r)}
.pick-rows li + li{border-top:1px solid var(--line)}

/* seat number hex */
.seat-no{display:grid;place-items:center;flex:none;width:30px;height:32px;background:var(--navy-100);color:var(--navy-900);font-size:var(--fs-12);font-weight:800}

/* ---------- players ---------- */
.player-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.player-card{display:grid;gap:var(--s-3);height:100%;padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:inherit;text-decoration:none;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
@media (hover:hover){.player-card:hover{border-color:var(--navy-700);box-shadow:var(--shadow-1)}}
.pc-head{display:flex;align-items:center;gap:var(--s-3)}
.pc-stats{display:flex;gap:var(--s-6);padding-top:var(--s-3);border-top:1px solid var(--line);align-self:end}
.pc-stats strong{font-size:var(--fs-20);font-weight:800;color:var(--orange-600);line-height:1.2}
.pc-stats span span{font-size:var(--fs-12);color:var(--gray-500)}
.profile-head{display:flex;align-items:center;gap:var(--s-5);flex-wrap:wrap}
.ph-text{flex:1 1 220px;--od-gap:6px}
.ph-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:var(--fs-14);color:var(--gray-500)}
.ph-actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.member-list{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.member{display:flex;align-items:center;gap:var(--s-2);min-height:48px;padding:4px 14px 4px 4px;border:1px solid var(--line);border-radius:var(--r-pill);color:inherit;text-decoration:none;font-weight:600;max-width:240px}
.member[aria-current="true"]{background:var(--orange-50);border-color:var(--orange-400)}
@media (hover:hover){.member:hover{background:var(--gray-50)}}
.bg-thumb{display:block;flex:none;width:56px;height:auto;border-radius:8px}
.bg-thumb-empty{display:grid;place-items:center;width:56px;aspect-ratio:3/2;border-radius:8px;background:var(--navy-100);color:var(--navy-700)}
.bg-thumb-empty .od-icon{--od-icon-size:24px}
.chain{display:grid;justify-items:center;gap:var(--s-4);text-align:center;padding:var(--s-4) 0}
.chain-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2)}
.approve-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.approve-card{display:grid;gap:var(--s-3)}
.approve-actions{display:flex;gap:var(--s-2)}

/* ---------- mafia hub ---------- */
.live-card{display:grid;gap:var(--s-4);padding:var(--s-5);border-radius:var(--r-lg);background:var(--navy-900);color:var(--white)}
.live-card .od-field span{color:var(--night-muted);font-size:var(--fs-14)}
.live-card .od-field strong{font-size:var(--fs-20)}
.live-actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.btn-ghost-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.45)}
@media (hover:hover){.btn-ghost-light:hover:not([disabled]){background:var(--navy-700);border-color:var(--white)}}
.mode-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.mode-card{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-4);min-height:96px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--white);color:inherit;text-decoration:none;transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.mode-card .od-field span{font-size:var(--fs-14);color:var(--gray-500)}
.mode-card.is-disabled{opacity:.5;cursor:not-allowed}
@media (hover:hover){.mode-card:not(.is-disabled):hover{border-color:var(--orange-500)}}
.mode-card:not(.is-disabled):active{transform:scale(.99)}
.mode-ic{display:grid;place-items:center;flex:none;width:44px;height:47px;background:var(--orange-500);color:var(--navy-900)}
.mode-ic .od-icon{--od-icon-size:22px}

/* library */
.scen-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.scen-card{position:relative;display:grid;gap:var(--s-3);height:100%;padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:inherit;text-decoration:none;transition:border-color var(--dur-fast) var(--ease-out)}
@media (hover:hover){.scen-card:hover{border-color:var(--navy-700)}}
.scen-arts{display:flex;gap:6px;justify-content:center;padding:var(--s-3);border-radius:8px;background:var(--navy-900);min-height:108px;align-items:center}
.scen-body{display:flex;align-items:center;gap:var(--s-3)}
.scen-default{position:absolute;top:var(--s-4);inset-inline-start:var(--s-4)}
.scen-head{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.role-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.role-cell{display:grid;justify-items:center;gap:4px;padding:var(--s-2);border:1px solid var(--line);border-radius:var(--r);background:var(--white);text-align:center;font-size:var(--fs-14)}
.scen-pick{display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:72px;padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r);background:var(--white);text-align:start}
.scen-pick.is-default{border-color:var(--orange-400)}
.scen-pick .chev{--od-icon-size:20px;color:var(--gray-500)}
@media (hover:hover){.scen-pick:hover{border-color:var(--navy-700)}}

/* setup */
.stepper{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4)}
.stepper li{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-14);font-weight:600;color:var(--gray-500)}
.stepper .hex{display:grid;place-items:center;width:28px;height:30px;background:var(--navy-100);color:var(--navy-700);font-size:var(--fs-12);font-weight:800}
.stepper .hex .od-icon{--od-icon-size:14px}
.stepper li.current{color:var(--navy-900);font-weight:800}
.stepper li.current .hex{background:var(--orange-500);color:var(--navy-900)}
.stepper li.done .hex{background:var(--navy-900);color:var(--white)}
.count-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.count-btn{display:grid;justify-items:center;gap:2px;min-height:88px;padding:var(--s-3);border:1.5px solid var(--line-strong);border-radius:var(--r);background:var(--white)}
.count-btn strong{font-size:var(--fs-32);font-weight:800;line-height:1.1}
.count-btn span{font-size:var(--fs-12);color:var(--gray-500)}
.count-btn[aria-pressed="true"]{border-color:var(--navy-900);background:var(--navy-100)}
@media (hover:hover){.count-btn:hover{border-color:var(--orange-500)}}
.seat-progress{display:grid;gap:6px;font-size:var(--fs-14)}
.bar{display:block;height:8px;border-radius:8px;background:var(--navy-100);overflow:hidden}
.bar > span{display:block;height:100%;background:var(--orange-500);transform-origin:right;transition:transform var(--dur) var(--ease-out)}
.seat-list{display:grid;border:1px solid var(--line);border-radius:var(--r)}
.seat-item{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3);min-height:60px}
.seat-item + .seat-item{border-top:1px solid var(--line)}
.seat-item .btn-sm[aria-pressed="true"]{background:var(--navy-100)}
.seat-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s-2)}
.draw-card{display:grid;justify-items:center;gap:var(--s-3);text-align:center;padding:var(--s-8) var(--s-5)}
.draw-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2);margin-top:var(--s-3)}

/* ---------- night surface (vote / deal / God) ---------- */
.night{min-height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);background:var(--navy-900);color:var(--white)}
.night-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s-2);padding:calc(env(safe-area-inset-top) + 8px) var(--s-3) var(--s-2);background:var(--navy-900);border-bottom:1px solid var(--night-line)}
.night-title{flex:1 1 0;min-width:0;text-align:center;font-size:var(--fs-20);font-weight:800}
.night-main{width:100%;max-width:1120px;margin:0 auto;padding:var(--s-5) var(--s-4) calc(env(safe-area-inset-bottom) + 112px);display:grid;gap:var(--s-5);align-content:start}
.night-main > *{min-width:0}
.night-muted{color:var(--night-muted)}
.night .h-sec,.night .h-sub{color:var(--white)}
.night .help{color:var(--night-muted)}
.night .icon-btn{color:var(--white)}
@media (hover:hover){.night .icon-btn:hover{background:var(--navy-700)}}
.btn-lg{min-height:52px;padding:0 var(--s-8);font-size:var(--fs-16)}
.handoff{display:grid;justify-items:center;gap:var(--s-4);text-align:center;padding:var(--s-6) 0}
.handoff-name{font-size:clamp(24px,6vw,32px);font-weight:800;line-height:1.35}
.night-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-3)}
.vote-pick{display:grid;gap:var(--s-4);max-width:640px;width:100%;margin:0 auto}
.vote-list{display:grid;gap:var(--s-2)}
.vote-opt{position:relative;display:flex;align-items:center;gap:var(--s-3);width:100%;min-height:64px;padding:var(--s-3);border:1.5px solid var(--night-line);border-radius:var(--r);background:var(--navy-700);color:var(--white);text-align:start;cursor:pointer}
.vote-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.vote-opt .emblem{background:var(--navy-900)}
.vote-check{--od-icon-size:22px;color:var(--orange-400);opacity:0}
.vote-opt:has(input:checked){border-color:var(--orange-400);background:#3A3772}
.vote-opt:has(input:checked) .vote-check{opacity:1}
.vote-opt:has(input:focus-visible){outline:3px solid var(--orange-400);outline-offset:2px}
@media (hover:hover){.vote-opt:hover{border-color:rgba(255,255,255,.4)}}
.vote-results{display:grid;gap:var(--s-4);max-width:640px;width:100%;margin:0 auto}
.bars{display:grid;gap:var(--s-3)}
.bars li{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr) auto;align-items:center;gap:var(--s-3);font-size:var(--fs-14)}
.bar-track{display:block;height:12px;border-radius:12px;background:var(--navy-700);overflow:hidden}
.bar-track > span{display:block;height:100%;background:var(--night-muted);transform-origin:right}
.bars li.top .bar-track > span{background:var(--orange-500)}
.bars li.top{font-weight:800}
.role-card{display:grid;justify-items:center;gap:var(--s-3);margin:0;cursor:default}
.role-card img{display:block;width:min(280px,64vw,calc((100dvh - 330px) / 1.5));min-width:160px;height:auto;border-radius:var(--r-lg);box-shadow:0 0 0 3px var(--rc,var(--orange-500)),var(--shadow-3);animation:card-in var(--dur) var(--ease-out)}
.role-card.is-mask{cursor:pointer}
.role-card.is-mask img{box-shadow:0 0 0 3px var(--navy-700),var(--shadow-3)}
.role-card figcaption{display:grid;justify-items:center;gap:6px;font-size:var(--fs-20)}
.role-card-empty{display:grid;place-items:center;width:min(240px,60vw);aspect-ratio:2/3;border-radius:var(--r-lg);background:color-mix(in srgb,var(--rc) 30%,#1C1A3A);color:var(--white)}
.role-card-empty .od-icon{--od-icon-size:72px}
@keyframes card-in{from{opacity:0;transform:scale(.96)}}

/* God dashboard */
.god-top{display:grid;gap:var(--s-3)}
.clock,.cd{display:grid;gap:4px;justify-items:center;padding:var(--s-3);border-radius:var(--r);background:var(--navy-700)}
.clock{grid-template-columns:auto 1fr auto;align-items:center;justify-items:start;gap:var(--s-3);padding:var(--s-3) var(--s-4)}
.clock strong{font-size:clamp(28px,7vw,40px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;justify-self:center}
.cd-label{font-size:var(--fs-12);font-weight:700;color:var(--night-muted)}
.cd-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;gap:var(--s-3);align-items:stretch}
.cd-time{font-size:var(--fs-24);font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.cd-btns{display:flex;gap:var(--s-1)}
.cd.over{background:#5A1E2B}
.cd.over .cd-time{color:#FFB3B8}
.cd-gear{align-self:center}
.music{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-3);border-radius:var(--r);background:var(--navy-700)}
.music-ic{--od-icon-size:24px;color:var(--orange-400);margin-inline:var(--s-1)}
.music-play{background:var(--orange-500);color:var(--navy-900) !important}
@media (hover:hover){.music-play:hover{background:var(--orange-400) !important}}
.vol{display:none;align-items:center;gap:var(--s-2);color:var(--night-muted)}
.vol .od-icon{--od-icon-size:20px}
.vol input{width:96px;accent-color:var(--orange-500)}
@media (min-width:768px){.vol{display:flex}}
.tally-row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.tally{display:grid;gap:2px;padding:var(--s-2) var(--s-4);border-radius:var(--r);background:var(--navy-700);border-inline-start:4px solid var(--rc)}
.tally strong{font-size:var(--fs-14)}
.tally span{font-size:var(--fs-12);color:var(--night-muted)}
.god-seats{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.god-seat{display:grid;gap:var(--s-2);padding:var(--s-3);border-radius:var(--r);background:var(--navy-700);border:1.5px solid transparent;transition:opacity var(--dur) var(--ease-out)}
.god-seat .seat-no{background:var(--navy-900);color:var(--white)}
.god-seat.is-out{opacity:.55;border-color:var(--night-line);background:transparent}
.gs-head{display:flex;align-items:center;gap:var(--s-2)}
.gs-head .row-title{font-size:var(--fs-14)}
.gs-role{display:flex;align-items:center;gap:var(--s-2);min-height:72px}
.gs-role strong{font-size:var(--fs-14)}
.gs-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.gs-actions .btn{padding:0 var(--s-2)}
.god-pens{display:grid;gap:var(--s-2);padding:var(--s-3) var(--s-4);border-radius:var(--r);background:#3B1D2E}
.god-pens li{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-14)}
.god-pens .od-icon{--od-icon-size:16px;color:#FFB3B8}
.god-bar{position:fixed;inset-inline:0;bottom:0;z-index:30;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2);padding:var(--s-3) var(--s-4) calc(env(safe-area-inset-bottom) + 12px);background:rgba(28,26,58,.96);border-top:1px solid var(--night-line);backdrop-filter:blur(8px)}
.god-bar .btn{flex:1 1 120px;max-width:200px}
.lm-list{display:grid;gap:var(--s-2)}
.lm-card{display:grid;gap:var(--s-2);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r)}
.lm-card.is-drawn{border-color:var(--orange-500);background:var(--orange-50)}
.lm-card.is-burned{opacity:.55}
#lm{display:grid;gap:var(--s-3)}
.fix-list{display:grid;gap:var(--s-2)}
.fix-opt{display:flex;align-items:flex-start;gap:var(--s-3);width:100%;padding:var(--s-4);border:1.5px solid var(--line);border-radius:var(--r);background:var(--white);text-align:start}
.fix-opt .od-field span{font-size:var(--fs-14);color:var(--gray-500)}
.fix-opt.danger .mode-ic{background:var(--danger-ink);color:var(--white)}
@media (hover:hover){.fix-opt:hover{border-color:var(--navy-700)}.fix-opt.danger:hover{border-color:var(--danger-ink)}}
.pen-players{display:grid;gap:var(--s-1);grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.pen-player{position:relative;display:flex;align-items:center;gap:var(--s-2);min-height:48px;padding:var(--s-1) var(--s-3);border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer;font-size:var(--fs-14);font-weight:600}
.pen-player input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pen-player:has(input:checked){border-color:var(--navy-900);background:var(--navy-100)}
.pen-player:has(input:focus-visible){outline:3px solid var(--navy-700);outline-offset:2px}
.pen-type{align-items:flex-start}
.pen-type input{margin-top:3px}
.pen-type:has(input:disabled){opacity:.5;cursor:not-allowed}
#flame-hint[hidden]{display:none}

/* end game */
.team-pick{display:grid;gap:var(--s-2);grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.team-opt{position:relative}
.team-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.team-opt span{display:flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:56px;padding:0 var(--s-4);border:2px solid var(--line-strong);border-radius:var(--r);font-weight:800;color:var(--rc)}
.team-opt input:checked + span{background:var(--rc);border-color:var(--rc);color:var(--white)}
.team-opt input:focus-visible + span{outline:3px solid var(--navy-700);outline-offset:2px}
.pts-list{display:grid;border:1px solid var(--line);border-radius:var(--r)}
.pts-row{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3);min-height:60px}
.pts-row + .pts-row{border-top:1px solid var(--line)}
.pts-row .od-field{cursor:pointer}
.pts-select{width:84px;flex:none;text-align:center}
.score-in{width:84px;flex:none;text-align:center;padding:0 var(--s-2)}
.best-grid{display:grid;gap:var(--s-2);grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.best-opt{position:relative;display:flex;align-items:center;gap:var(--s-2);min-height:56px;padding:var(--s-2) var(--s-3);border:1.5px solid var(--line);border-radius:var(--r);cursor:pointer}
.best-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.best-opt.is-top{border-color:var(--orange-400);background:var(--orange-50)}
.best-star{--od-icon-size:20px;color:var(--line-strong)}
.best-opt:has(input:checked){border-color:var(--navy-900);background:var(--navy-100)}
.best-opt:has(input:checked) .best-star{color:var(--orange-600);fill:var(--orange-500)}
.best-opt:has(input:focus-visible){outline:3px solid var(--navy-700);outline-offset:2px}
.end-bar{margin-inline:0;border:1px solid var(--line);border-radius:var(--r);bottom:var(--s-3)}
.end-bar .msg{font-weight:600}

/* summary + story card */
.summary{justify-items:center}
.story{display:grid;gap:var(--s-4);width:min(360px,100%);margin:0 auto;padding:var(--s-5);border-radius:24px;background:var(--navy-900);color:var(--white);box-shadow:var(--shadow-3);border:3px solid var(--orange-500)}
.story-top{display:flex;align-items:center;gap:var(--s-3)}
.story-top img{width:28px;height:auto}
.story-top span span{font-size:var(--fs-12);color:var(--night-muted)}
.story-art{display:grid;place-items:center}
.story-art img{display:block;width:62%;height:auto;border-radius:var(--r-lg);box-shadow:0 0 0 3px var(--orange-500)}
.story-body{display:grid;gap:var(--s-2);justify-items:center;text-align:center}
.story-scen{font-size:var(--fs-14);color:var(--night-muted)}
.story-win{font-size:var(--fs-24);font-weight:800;color:var(--orange-400)}
.story-best{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-4);border-radius:var(--r-pill);background:var(--navy-700);text-align:start}
.story-best .t-12{color:var(--night-muted)}
.summary-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-2)}

/* ---------- board-game tables ---------- */
.live-timer{font-weight:800;font-variant-numeric:tabular-nums;color:var(--orange-600)}
.table-grid{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.table-card{display:grid;gap:var(--s-3);height:100%;padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:inherit;text-decoration:none;transition:border-color var(--dur-fast) var(--ease-out)}
.table-card.is-open{border-color:var(--orange-400);box-shadow:inset 0 3px 0 var(--orange-500)}
@media (hover:hover){.table-card:hover{border-color:var(--navy-700)}}
.table-ic{display:grid;place-items:center;flex:none;width:40px;height:42px;background:var(--navy-900);color:var(--orange-400)}
.table-ic .od-icon{--od-icon-size:20px}
.table-ic.lg{width:56px;height:59px}
.table-ic.lg .od-icon{--od-icon-size:28px}
.table-head{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.big-timer{justify-items:end}
.big-timer .live-timer,.big-timer strong{font-size:var(--fs-24);font-weight:800}
.tp-row{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap;padding:var(--s-3) var(--s-4)}
.tp-row .row-body{flex:1 1 160px}
.tp-row.is-left{background:var(--gray-50)}
.tp-row.is-left .row-title{color:var(--gray-500)}
.game-list{display:grid;gap:var(--s-3);grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.game-card{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3)}
.bg-cover{display:block;flex:none;width:96px;height:auto;border-radius:8px}
.game-card .bg-thumb-empty{width:96px}
.bg-pick{display:grid;gap:var(--s-2);grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.bg-opt{position:relative;display:grid;gap:4px;align-content:start;padding:6px;border:2px solid var(--line);border-radius:var(--r);cursor:pointer;font-size:var(--fs-14);font-weight:700;text-align:center}
.bg-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.bg-opt img{display:block;width:100%;height:auto;border-radius:6px}
.bg-opt .bg-thumb-empty{width:100%}
.bg-opt:has(input:checked){border-color:var(--navy-900);background:var(--navy-100)}
.bg-opt:has(input:focus-visible){outline:3px solid var(--navy-700);outline-offset:2px}
#gs .chip[data-win][aria-pressed="true"]{background:var(--success-ink);border-color:var(--success-ink)}
.sheet-foot .btn[aria-disabled="true"]{opacity:.5}

/* ---------- history ---------- */
.deck-head{display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap}
.deck-head .od-field{flex:1 1 240px;--od-gap:6px}
.seat-detail{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3) var(--s-4)}
.seat-detail .row-meta{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.seat-detail .row-meta .od-icon{--od-icon-size:14px}
.timeline{display:grid;gap:var(--s-3);padding:var(--s-4);border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.timeline li{display:flex;align-items:flex-start;gap:var(--s-3)}
.timeline li > .od-icon{--od-icon-size:20px;color:var(--orange-600);margin-top:2px}
.timeline .od-field span{font-size:var(--fs-14)}

@media (prefers-reduced-motion:reduce){
  .role-card img{animation:none}
}

/* ============ Laravel / Livewire additions (phase 2) ============ */
.picker-list li > button{font:inherit}
.night .toasts{bottom:calc(env(safe-area-inset-bottom) + 96px)}
.picker{z-index:2}
a.row-btn{text-decoration:none;color:inherit}