/* PICO PARK CUP 共通スタイル(全ページで読み込む)。モックのデザイントークンを踏襲 */
:root{
  --ground:#F4F1E7; --panel:#FFFFFF; --ink:#2A2618; --ink-soft:#77704F;
  --line:#E3DDC8; --line-soft:#EFEBDA;
  --gold:#C9880F; --gold-soft:#F6E8C8;
  --red:#CE3E44; --red-soft:#FAE7E5;
  --blue:#3671B8; --blue-soft:#E3EDF7;
  --green:#3E8A50; --green-soft:#E2F0E1;
  --chip-ink:#FFFFFF; --shadow:0 2px 10px rgba(60,50,10,.08);
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#191711; --panel:#242116; --ink:#EFE9D5; --ink-soft:#A79F80;
    --line:#3B3624; --line-soft:#2E2A1B;
    --gold:#E3B04A; --gold-soft:#3A3117;
    --red:#E36E72; --red-soft:#3D2422;
    --blue:#6FA3DC; --blue-soft:#203041;
    --green:#6FBA80; --green-soft:#22351F;
    --chip-ink:#191711; --shadow:0 2px 10px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --ground:#191711; --panel:#242116; --ink:#EFE9D5; --ink-soft:#A79F80;
  --line:#3B3624; --line-soft:#2E2A1B;
  --gold:#E3B04A; --gold-soft:#3A3117;
  --red:#E36E72; --red-soft:#3D2422;
  --blue:#6FA3DC; --blue-soft:#203041;
  --green:#6FBA80; --green-soft:#22351F;
  --chip-ink:#191711; --shadow:0 2px 10px rgba(0,0,0,.4);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground); color:var(--ink);
  font-family:'M PLUS Rounded 1c','Hiragino Kaku Gothic ProN',sans-serif; font-size:14.5px; line-height:1.6;
  -webkit-tap-highlight-color:transparent}
.wrap{max-width:520px; margin:0 auto; padding:0 12px 60px; position:relative; min-height:100vh}
.appbar{display:flex; align-items:center; gap:8px; padding:12px 4px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--ground); z-index:3}
.appbar .back{border:0; background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:3px 10px; font:inherit; font-weight:700; cursor:pointer}
.appbar h1{font-size:16px; margin:0; font-weight:800; flex:1}
.appbar .role{font-size:11px; color:var(--ink-soft); font-weight:700}
.dots{display:inline-flex; gap:4px; vertical-align:1px; margin-right:6px}
.dots i{width:8px;height:8px;border-radius:2.5px}
.dots i:nth-child(1){background:var(--red)}.dots i:nth-child(2){background:var(--blue)}
.dots i:nth-child(3){background:var(--green)}.dots i:nth-child(4){background:var(--gold)}
h3{font-size:13px; margin:18px 0 8px; color:var(--ink-soft); letter-spacing:.08em}
.chip{display:inline-block; font-size:11px; font-weight:800; border-radius:6px; padding:1px 8px; letter-spacing:.03em}
.chip.open{background:var(--line-soft); color:var(--ink-soft)}
.chip.wait{background:var(--blue); color:var(--chip-ink)}
.chip.ready{background:var(--green); color:var(--chip-ink)}
.chip.run{background:var(--red); color:var(--chip-ink)}
.chip.done{background:var(--gold); color:var(--chip-ink)}
.slotgrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.slotcard{border:1px solid var(--line); border-radius:14px; padding:12px; background:var(--panel); cursor:pointer; text-align:left; font:inherit; color:var(--ink)}
.slotcard:hover,.slotcard:focus-visible{border-color:var(--gold); outline:none}
.slotcard .t{font-family:var(--mono); font-size:12px; color:var(--ink-soft)}
.slotcard .u{font-weight:800; font-size:15px; margin:2px 0}
.cnt{font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums}
.qr{display:flex; gap:14px; align-items:center; background:var(--line-soft); border-radius:14px; padding:14px; margin:10px 0}
.qr .qbox{background:#fff; border-radius:8px; flex:none; padding:6px; line-height:0}
.qr .cap{font-size:12px; color:var(--ink-soft)}
.qrfull{background:#FFFFFF; color:#26241E; border:1px solid var(--line); border-radius:18px; text-align:center; padding:30px 16px 22px; cursor:pointer}
.qrfull .big{font-size:21px; font-weight:800}
.qrfull .sub{font-size:13.5px; color:#6B6552; margin-top:4px}
.qrfull .qbox{display:inline-block; background:#fff; padding:8px; line-height:0; margin:14px 0 4px}
.qrfull .remain{display:inline-block; background:#F3E5C0; color:#7A5A00; border-radius:999px; padding:5px 18px; font-weight:800; margin:12px 0 2px; font-size:15px}
.qrfull .close{font-size:11.5px; color:#9A937D; margin-top:14px}
.party{border:1px solid var(--line); border-radius:12px; padding:10px 12px; margin:8px 0; display:flex; align-items:center; gap:10px}
.party .nm{flex:1; min-width:0}
.party .nm b{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.party .nm span{font-size:11.5px; color:var(--ink-soft)}
.step{display:flex; align-items:center; gap:6px}
.step button{width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--ink); font-weight:800; cursor:pointer; font:inherit}
.step .n{font-family:var(--mono); font-weight:600; width:34px; text-align:center}
.ghost{border:1px solid var(--line); background:transparent; color:var(--ink-soft); border-radius:8px; padding:6px 10px; font:inherit; font-size:12px; font-weight:700; cursor:pointer}
.ghost.red{color:var(--red); border-color:var(--red)}
.tally{display:flex; align-items:center; gap:10px; border-radius:12px; padding:10px 14px; margin:12px 0; font-weight:800; background:var(--blue-soft); flex-wrap:wrap}
.tally.ok{background:var(--green-soft)}
.tally .big{font-family:var(--mono); font-size:20px}
.btn{display:block; width:100%; border:0; border-radius:14px; padding:14px; font:inherit; font-weight:800; font-size:16px; cursor:pointer; margin:10px 0; color:var(--chip-ink)}
.btn.gold{background:var(--gold)} .btn.green{background:var(--green)} .btn.red{background:var(--red)} .btn.blue{background:var(--blue)}
.btn.line{background:var(--line-soft); color:var(--ink)}
.btn:disabled{opacity:.4; cursor:default}
.btn:focus-visible,.ghost:focus-visible,.step button:focus-visible,.appbar .back:focus-visible{outline:2px solid var(--blue); outline-offset:1px}
.timer{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:center; font-size:56px; font-weight:600; letter-spacing:.02em; padding:14px 0 4px}
.timer.run{color:var(--red)}
.cdown{text-align:center; font-family:var(--mono); font-size:72px; font-weight:600; color:var(--gold); padding:24px 0}
input[type=text],input[type=email],input[type=tel],select{width:100%; border:1.5px solid var(--line); background:var(--panel); color:var(--ink); border-radius:10px; padding:11px 12px; font:inherit; margin:4px 0 10px}
input:focus-visible,select:focus-visible{outline:none; border-color:var(--gold)}
label{font-size:12.5px; font-weight:700; color:var(--ink-soft)}
label .req{color:var(--red)}
.sizebtns{display:flex; gap:8px; margin:6px 0 12px}
.sizebtns button{flex:1; border:1.5px solid var(--line); background:var(--panel); color:var(--ink); border-radius:12px; padding:12px 0; font:inherit; font-size:17px; font-weight:800; cursor:pointer}
.sizebtns button.on{background:var(--gold); border-color:var(--gold); color:var(--chip-ink)}
.sizebtns button:disabled{opacity:.3; cursor:default}
.check{display:flex; gap:10px; align-items:flex-start; margin:10px 0; font-size:12.5px}
.check input{width:20px; height:20px; margin-top:1px; accent-color:var(--gold); flex:none}
.note{background:var(--blue-soft); border-radius:10px; padding:9px 12px; font-size:12px; margin:10px 0}
.warn{background:var(--red-soft); border-radius:10px; padding:9px 12px; font-size:12px; margin:10px 0; color:var(--red); font-weight:700}
.confirm-big{text-align:center; font-size:26px; font-weight:800; padding:26px 0; text-wrap:balance}
.confirm-big .num2{font-size:56px; color:var(--gold); font-family:var(--mono)}
.cert{text-align:center; padding:16px 0}
.cert .tn{font-size:24px; font-weight:800; margin:6px 0}
.cert .tm{font-family:var(--mono); font-size:48px; font-weight:600; color:var(--gold)}
.cert .sub{font-size:12.5px; color:var(--ink-soft)}
table{width:100%; border-collapse:collapse; font-size:13.5px}
td,th{padding:8px 10px; border-bottom:1px solid var(--line-soft); text-align:left}
th{font-size:11px; color:var(--ink-soft); letter-spacing:.06em}
td.tm{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; font-weight:600}
td.rk{font-family:var(--mono); color:var(--gold); font-weight:600; width:2em}
.rowline{display:flex; gap:8px; flex-wrap:wrap}
.rowline>*{flex:1}
.manual{display:flex; gap:6px; align-items:center}
.manual input{width:70px; text-align:center; font-family:var(--mono); margin:0}
.foot{margin-top:14px; text-align:center; font-size:11.5px; color:var(--ink-soft); padding-bottom:20px}
.overlay{position:fixed; inset:0; background:rgba(22,17,4,.5); display:none; align-items:center; justify-content:center; padding:20px; z-index:50}
.dialog{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; width:100%; max-width:360px; box-shadow:var(--shadow)}
.dialog .dmsg{font-weight:800; font-size:15.5px; text-wrap:balance}
.dialog .dsub{font-size:12.5px; color:var(--ink-soft); margin-top:6px}
.dialog input{margin-top:10px}
.dialog .dbtns{display:flex; gap:8px; margin-top:16px}
.dialog .dbtns button{flex:1; border:0; border-radius:10px; padding:11px; font:inherit; font-weight:800; cursor:pointer}
.d-yes{background:var(--gold); color:var(--chip-ink)} .d-yes.danger{background:var(--red)}
.d-no{background:var(--line-soft); color:var(--ink)}
.offline-badge{position:fixed; bottom:10px; right:10px; background:var(--red); color:var(--chip-ink); border-radius:999px; padding:4px 12px; font-size:11.5px; font-weight:800; z-index:60; display:none}
/* 外向き大画面(board.html ?mode=screen) */
body.screen{font-size:22px}
body.screen .wrap{max-width:1100px}
body.screen td,body.screen th{padding:14px 18px; font-size:26px}
body.screen td.rk{font-size:30px}
body.screen .cert .tm{font-size:80px}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }