/* Layout: single column tote-board app — sticky header with LED balance, live ticker, stacked "boards", fixed bottom tabs */
:root{
  color-scheme: dark;
  --bg:#0b0b0a; --panel:#121210; --panel-2:#191916; --line:#2b2a25; --line-2:#3a3830;
  --ink:#ece8dc; --muted:#8f8a7b; --led:#ffb21e; --led-dim:#4a3710; --led-glow:rgba(255,178,30,.35);
  --go:#3fd77f; --hit:#ff4b3a; --hit-soft:#3a1512; --down:#58a6ff;
  --font-dot:"DotGothic16","Hiragino Sans",monospace;
  --font-body:"M PLUS 1","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --font-num:"Share Tech Mono","DotGothic16",ui-monospace,monospace;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.55;padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
img{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
:focus-visible{outline:2px solid var(--led);outline-offset:2px}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.led{color:var(--led);text-shadow:0 0 8px var(--led-glow)}
.wrap{max-width:760px;margin:0 auto;padding-inline:16px;padding-block:12px 24px;display:flex;flex-direction:column;gap:14px}

/* header */
.top{position:sticky;top:0;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;background:var(--bg);border-bottom:1px solid var(--line)}
.logo{font-family:var(--font-dot);font-size:20px;text-decoration:none;letter-spacing:.06em;color:var(--ink)}
.logo span{color:var(--led)}
.wallet{display:flex;align-items:baseline;gap:4px;border:1px solid var(--line-2);padding:3px 10px;background:#000}
.wallet .led{font-size:22px}
.wallet small{color:var(--muted);font-family:var(--font-num)}

/* ticker */
.ticker{overflow:hidden;border-bottom:1px solid var(--line);background:#000;height:30px;position:relative}
.ticker-in{display:flex;gap:28px;white-space:nowrap;align-items:center;height:30px;padding-left:100%;animation:tick 40s linear infinite;font-family:var(--font-dot);font-size:13px;color:var(--led)}
.ticker-in.idle{animation:none;padding-left:16px}
.ticker-in b{color:var(--ink);font-weight:400}
.tk-empty{color:var(--muted)}
@keyframes tick{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.ticker-in{animation:none;padding-left:16px}}

/* boards */
.board{background:var(--panel);border:1px solid var(--line);min-width:0}
.board-h{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.board-h h2{margin:0;font-family:var(--font-dot);font-size:16px;font-weight:400;letter-spacing:.08em}
.sub{font-size:12px;color:var(--muted)}
.pad{padding:8px 14px;margin:0}
.fine{font-size:12px;color:var(--muted);margin:0;max-width:68ch}
.empty{padding:18px 14px;color:var(--muted);font-size:14px}
.back{display:inline-block;color:var(--muted);text-decoration:none;font-size:13px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line-2);background:var(--panel-2);padding:7px 12px;font-size:13px;text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--muted)}
.led-btn{border-color:var(--led);color:var(--led);background:transparent}
.led-btn:hover{background:var(--led-dim)}
.buy{border:0;background:var(--led);color:#1a1200;font-weight:800;font-size:16px;padding:13px;letter-spacing:.06em;width:100%}
.buy:hover{filter:brightness(1.08)}
.msg{font-size:13px;min-height:20px;margin:0}
.msg.err{color:var(--hit)} .msg.ok{color:var(--go)}

/* race list rows */
.rrow{display:grid;grid-template-columns:64px 1fr auto;gap:2px 12px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line);text-decoration:none}
.rrow:last-child{border-bottom:0}
.rrow:hover{background:var(--panel-2)}
.rrow .t{font-family:var(--font-num);font-size:20px;color:var(--led)}
.rrow .t.past{color:var(--muted);text-shadow:none}
.rrow .n{font-weight:800;font-size:16px}
.rrow .d{grid-column:2;font-size:12px;color:var(--muted)}
.rrow .s{grid-row:1 / span 2;grid-column:3;text-align:right;font-size:12px}
.tag{display:inline-block;font-family:var(--font-dot);font-size:12px;padding:1px 7px;border:1px solid currentColor;white-space:nowrap}
.tag.go{color:var(--go)} .tag.hot{color:var(--hit)} .tag.wait{color:var(--led)} .tag.done{color:var(--muted)} .tag.void{color:var(--muted)}
.dayhead{padding:6px 14px;font-family:var(--font-dot);font-size:12px;color:var(--muted);background:#000;border-bottom:1px solid var(--line)}

.hit{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);text-decoration:none}
.hit:last-child{border-bottom:0}
.hit .o{margin-left:auto;font-family:var(--font-num);font-size:20px}
.hit .o.big{color:var(--hit);text-shadow:0 0 8px rgba(255,75,58,.4)}

.howto{border:1px dashed var(--line-2);padding:14px 16px}
.howto h3{margin:0 0 6px;font-family:var(--font-dot);font-weight:400;font-size:15px;color:var(--led)}
.howto ol{margin:0 0 10px;padding-left:20px;font-size:14px;max-width:68ch}
.howto li{margin-bottom:4px}

/* race page */
.race-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.race-venue{font-family:var(--font-dot);font-size:30px;line-height:1.1;letter-spacing:.04em}
.race-meta{color:var(--muted);font-size:13px;display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.race-clock{text-align:right}
.race-clock span{display:block;font-size:11px;color:var(--muted);letter-spacing:.1em}
.race-clock b{font-size:34px;font-weight:400}
.race-clock b.hot{color:var(--hit);text-shadow:0 0 10px rgba(255,75,58,.45)}
.linkrow{display:flex;gap:8px;flex-wrap:wrap}

.tote{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.cell{all:unset;box-sizing:border-box;cursor:pointer;background:#000;padding:8px 10px 9px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;gap:3px 8px;align-items:center;position:relative}
.cell:focus-visible{outline:2px solid var(--led);outline-offset:-2px}
.cell .o{font-family:var(--font-num);font-size:22px;text-align:right;color:var(--led);text-shadow:0 0 8px var(--led-glow)}
.cell .o.none{color:var(--muted);text-shadow:none;font-size:15px}
.cell .bar{grid-column:1 / -1;height:3px;background:var(--panel-2)}
.cell .bar i{display:block;height:100%;background:var(--led)}
.cell[aria-pressed="true"]{background:var(--led-dim)}
.cell .pk{position:absolute;top:4px;right:6px;font-family:var(--font-dot);font-size:11px;color:#1a1200;background:var(--led);padding:0 4px}
.cell.win1{box-shadow:inset 0 0 0 2px var(--hit)}
.uma{display:inline-grid;place-items:center;width:28px;height:28px;font-family:var(--font-num);font-weight:700;font-size:15px;border:1px solid transparent;flex:none}
.chartbox{position:relative;height:190px;border-bottom:1px solid var(--line)}
.chartbox canvas{position:absolute;inset:0;width:100%;height:100%}

.kinds{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line)}
.kinds button{border:0;border-right:1px solid var(--line);background:transparent;padding:11px 0;font-weight:800;color:var(--muted)}
.kinds button:last-child{border-right:0}
.kinds button[aria-pressed="true"]{color:var(--led);background:#000;box-shadow:inset 0 -2px 0 var(--led)}
#ticket > .hint,#ticket > .pick,#ticket > .boxt,#ticket > .amount,#ticket > .est,#ticket > .buy,#ticket > .msg{margin:0 14px}
#ticket{display:flex;flex-direction:column;gap:10px;padding-bottom:14px}
#ticket > .buy{width:auto}
.hint{font-size:13px;color:var(--muted);margin:0}
.pick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:30px;font-size:13px}
.pick .ord{font-size:11px;color:var(--muted);margin-right:2px}
.boxt{display:flex;gap:8px;align-items:center;font-size:14px}
.amount{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border:1px solid var(--line-2);background:#000;padding:6px 10px}
.amount label{font-size:12px;color:var(--muted)}
.amount input{width:110px;border:0;background:transparent;color:var(--led);font-family:var(--font-num);font-size:24px;text-align:right}
.amount input:focus{outline:none}
.amount span{color:var(--muted);font-family:var(--font-num)}
.chips{display:flex;gap:4px;margin-left:auto}
.chips button{border:1px solid var(--line-2);background:var(--panel);padding:3px 8px;font-family:var(--font-num);font-size:13px}
.est{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:13px;color:var(--muted)}
.est b{text-align:right;color:var(--ink);font-family:var(--font-num);font-weight:400;font-size:15px}

.popular{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media (max-width:520px){.popular{grid-template-columns:1fr}}
.popular > div{padding:8px 14px;border-right:1px solid var(--line)}
.popular > div:last-child{border-right:0}
.popular h3{margin:0 0 4px;font-size:12px;color:var(--muted);font-weight:600}
.prow{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px dotted var(--line);font-family:var(--font-num)}
.prow:last-child{border-bottom:0}

.result{border:1px solid var(--hit);background:var(--hit-soft);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.result h3{margin:0;font-family:var(--font-dot);font-weight:400;color:var(--hit);letter-spacing:.1em}
.result .ord{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;align-items:center}
.result .pays{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--font-num)}
.report{border:1px solid var(--led);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.report h3{margin:0;font-size:15px;color:var(--led);font-family:var(--font-dot);font-weight:400}
.report .sels{display:flex;gap:8px;flex-wrap:wrap}
.report select{background:#000;color:var(--ink);border:1px solid var(--line-2);padding:7px;font:inherit}

.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{font-size:11px;color:var(--muted);font-weight:400;text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl .r{text-align:right}
.tbl tr.me td{background:var(--led-dim)}
.scroll{overflow-x:auto}
.plus{color:var(--hit)} .minus{color:var(--down)}
.rank-n{font-family:var(--font-dot);font-size:16px}
.rank-n.top{color:var(--led)}

.comments{max-height:320px;overflow-y:auto}
.cm{padding:9px 14px;border-bottom:1px solid var(--line);font-size:14px}
.cm .who{font-size:12px;color:var(--muted);display:flex;gap:8px}
.cm .who b{color:var(--led);font-weight:400;font-family:var(--font-dot)}
.cm p{margin:2px 0 0;overflow-wrap:anywhere;max-width:68ch}
.compose,.inline{display:flex;gap:8px;padding:10px 14px}
.compose input,.inline input,.form input,.form select,.rk-scope select{flex:1;min-width:0;background:#000;color:var(--ink);border:1px solid var(--line-2);padding:9px 10px;font:inherit}

.form{display:flex;flex-direction:column;gap:12px;padding:14px}
.form .row{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:center}
.form .row label{font-size:13px;color:var(--muted)}
.seg{display:flex;border:1px solid var(--line-2)}
.seg button{border:0;background:transparent;padding:5px 10px;font-size:12px;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--led);color:#1a1200;font-weight:800}
.rk-scope{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.rk-scope label{font-size:12px;color:var(--muted)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line)}
.stats div{background:var(--panel);padding:10px 14px}
.stats span{display:block;font-size:11px;color:var(--muted);letter-spacing:.06em}
.stats b{font-family:var(--font-num);font-size:22px;font-weight:400}
.lg{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.lg .nm{font-weight:800;flex:1;min-width:0}
.lg code{font-family:var(--font-num);color:var(--led);font-size:15px}

/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:7;display:grid;grid-template-columns:repeat(4,1fr);background:#000;border-top:1px solid var(--line-2);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabs a{text-align:center;padding:13px 2px;text-decoration:none;font-size:12px;color:var(--muted);font-weight:600;border-top:2px solid transparent}
.tabs a[aria-current="page"]{color:var(--led);border-top-color:var(--led)}

.sheet{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.82);display:grid;place-items:center;padding:16px}
.sheet-in{max-width:420px;width:100%;display:flex;flex-direction:column;gap:10px}
.sheet-in img{width:100%;border:1px solid var(--line-2)}
.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sheet-actions .buy{grid-column:1 / -1}
.ioshint{position:fixed;left:16px;right:16px;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:9;display:flex;gap:10px;align-items:center;justify-content:space-between;background:var(--panel-2);border:1px solid var(--led);padding:10px 14px;font-size:13px}
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;z-index:30;width:max-content;max-width:calc(100% - 32px)}
.toast{background:#000;border:1px solid var(--led);color:var(--led);font-family:var(--font-dot);padding:10px 16px;font-size:14px}