*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{min-height:100%}
body{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#d8f3ff;background:#020611;display:flex;justify-content:center;padding:16px 10px}
.sea{background:linear-gradient(180deg,#1b8fb8 0%,#0b4f78 14%,#062a4a 36%,#03152b 65%,#01060f 100%)}
.app{width:100%;max-width:460px;min-height:calc(100vh - 32px);border-radius:18px;overflow:hidden;position:relative}
.bub{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bub span{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.35);animation:rise linear infinite}
@keyframes rise{from{transform:translateY(0);opacity:.8}to{transform:translateY(-420px);opacity:0}}
@keyframes bob{50%{transform:translateY(-6px) rotate(-6deg)}}
@media (prefers-reduced-motion:reduce){.bub{display:none}.krill{animation:none!important}}
.view{position:relative;padding:26px 20px 22px;min-height:calc(100vh - 32px);display:flex;flex-direction:column}
.grow{flex:1;min-height:16px}
button{font:inherit}
input,select,textarea{font:inherit}

/* onboarding */
.logo{text-align:center}
.krill{font-size:34px;display:inline-block;animation:bob 2.4s ease-in-out infinite}
h1{font-size:26px;letter-spacing:.35em;font-weight:800;color:#fff;text-shadow:0 2px 0 #0a3d5c}
.sub{font-size:10px;letter-spacing:.3em;color:#9fe3ff;margin-top:6px}
.sub.wel{font-size:11px;color:#fff;letter-spacing:.2em}
.box{margin-top:22px;padding:16px;border-radius:16px;background:rgba(0,0,0,.3);border:1px solid rgba(160,230,255,.18)}
.box h2{font-size:13px;color:#fff;margin-bottom:4px}
.box p{font-size:10px;color:#9fd6ef;line-height:1.6;margin-bottom:10px}
.box p.mt8,.mt8{margin:8px 0 0}
label{display:block;font-size:9px;letter-spacing:.15em;color:#84bcd6;margin:10px 0 4px}
input{width:100%;border-radius:10px;border:1px solid rgba(160,230,255,.3);background:#020b18;color:#fff;font-size:15px;padding:10px;letter-spacing:.08em}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid #5ee0ff;outline-offset:1px}
input.code{text-align:center;font-size:19px;letter-spacing:.18em;text-transform:uppercase}
.pin{display:flex;gap:8px}.pin input{text-align:center;font-size:18px;padding:10px 0}
.btn{margin-top:14px;width:100%;border:0;border-radius:12px;padding:12px;font-weight:800;letter-spacing:.12em;background:#ff8a5b;color:#1a0b05;cursor:pointer}
.btn:disabled,.go:disabled{opacity:.6;cursor:progress}
.ghost{margin-top:8px;width:100%;border:1px solid rgba(160,230,255,.3);border-radius:12px;padding:10px;font-size:11px;background:transparent;color:#bff2ff;cursor:pointer}
.hint{font-size:9px;color:#5d93ad;text-align:center;margin-top:10px;line-height:1.6}
.err{font-size:11px;color:#ffb199;margin-top:8px;line-height:1.5}
.err:empty,.okmsg:empty{display:none}
.okmsg{font-size:11px;color:#a8ffcf;margin-top:8px;line-height:1.5}
.room{display:flex;align-items:center;gap:8px;padding:10px;border-radius:12px;background:rgba(94,224,255,.08);border:1px solid rgba(94,224,255,.25);font-size:11px}
.room-ic{font-size:20px}
.room b{color:#fff;font-size:12px;display:block}
.room small{color:#84bcd6;font-size:9px}
.seg{display:flex;background:rgba(0,0,0,.35);border-radius:999px;padding:3px;margin-top:12px}
.seg button{flex:1;border:0;background:transparent;color:#84bcd6;font-size:10px;padding:7px 0;border-radius:999px;cursor:pointer}
.seg button.on{background:#5ee0ff;color:#03152b;font-weight:700}
#v-who .box{margin-top:12px}
.names{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.names button{font-size:11px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(160,230,255,.15);color:#d8f3ff;cursor:pointer}
.names button.on{border-color:#ff8a5b;color:#fff;background:rgba(255,138,91,.15)}
.ok{font-size:40px;text-align:center;margin-top:10px}
.howto{list-style:none;counter-reset:s;margin-top:4px}
.howto li{counter-increment:s;font-size:11px;color:#cfeefc;padding:8px 0 8px 30px;position:relative;border-bottom:1px dashed rgba(120,190,220,.18);line-height:1.5}
.howto li:before{content:counter(s);position:absolute;left:0;top:7px;width:20px;height:20px;border-radius:50%;background:#5ee0ff;color:#03152b;font-weight:800;font-size:11px;text-align:center;line-height:20px}
.howto b{color:#fff}
.invite{display:flex;gap:6px;align-items:center;margin-top:4px}
.invite code{flex:1;min-width:0;font-size:10px;color:#ffe3a3;background:#020b18;border:1px solid rgba(160,230,255,.2);border-radius:8px;padding:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini{border:1px solid #5ee0ff;border-radius:8px;padding:6px 8px;font-size:10px;background:rgba(94,224,255,.12);color:#bff2ff;cursor:pointer;white-space:nowrap}

/* board */
.view.board{padding:0 0 4px}
.bhead{padding:20px 20px 8px;text-align:center}
.bhead .bl{display:block}
.bhead .bl>div:last-child{margin-top:2px}
.bhead .sub{letter-spacing:.25em}
.dive{font-size:11px;color:#7cc8e8;margin-top:6px}
.badge-wrap{position:relative;display:inline-block;margin-top:6px}
.badge{font-size:10px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(160,230,255,.25);color:#fff;cursor:pointer}
.menu{position:absolute;right:50%;transform:translateX(50%);top:calc(100% + 4px);z-index:5;background:#03152b;border:1px solid rgba(160,230,255,.3);border-radius:10px;padding:4px;min-width:140px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.menu button{display:block;width:100%;text-align:left;border:0;background:transparent;color:#ffb199;padding:8px 10px;border-radius:8px;font-size:11px;cursor:pointer}
.menu button:hover{background:rgba(255,255,255,.06)}
.tabs{display:flex;margin:12px 14px 0;background:rgba(0,0,0,.25);border-radius:999px;padding:4px}
.tabs button{flex:1;border:0;background:transparent;color:#9fd6ef;font-size:11px;letter-spacing:.12em;padding:9px 0;border-radius:999px;cursor:pointer}
.tabs button.on{background:#ff8a5b;color:#1a0b05;font-weight:700}
.banner{margin:8px 14px 0}
.grid{display:block}
.col-board,.col-stats{padding:12px 14px 4px}
.pane{display:none}
.board[data-tab=today] #p-today,.board[data-tab=season] #p-season,.board[data-tab=all] #p-all{display:block}
.board[data-tab=stats] .col-board{display:none}
.board:not([data-tab=stats]) .col-stats{display:none}
.row{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:7px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(160,230,255,.12)}
.row.me{border-color:#ff8a5b}
.rank{width:22px;font-weight:800;color:#ffcf6b;text-align:center}
.name{flex:1;font-size:14px;color:#fff;min-width:0;overflow-wrap:anywhere}
.name small{display:block;font-size:10px;color:#84bcd6;margin-top:2px}
.pts{text-align:right;font-weight:800;font-size:16px;color:#fff}
.pts small{display:block;font-weight:400;font-size:10px;color:#84bcd6}
.tiers,.tbar{display:flex;height:6px;border-radius:3px;overflow:hidden;margin-top:5px;background:rgba(255,255,255,.08)}
.tiers i,.tbar i{display:block;height:100%}
.k{background:#ffcf6b}.d{background:#b48cff}.r{background:#5ee0ff}.s{background:#4f8fb0}.c{background:#ff7eb6}.p{background:#2c4f63}.x{background:#0b0f16}
.pending{opacity:.55}
.sep{font-size:10px;color:#5d93ad;letter-spacing:.2em;padding:6px 0 4px;display:flex;align-items:center;gap:8px}
.sep:before,.sep:after{content:"";flex:1;border-top:1px dashed rgba(120,190,220,.25)}
.season{font-size:10px;color:#9fd6ef;text-align:center;margin-bottom:8px}
.champs{display:flex;gap:6px;margin-top:6px}
.champ{flex:1;text-align:center;padding:8px 4px;border-radius:10px;background:rgba(255,207,107,.08);border:1px solid rgba(255,207,107,.25);font-size:10px;color:#ffe3a3;min-width:0}
.champ b{display:block;font-size:12px;color:#fff;margin-top:2px;overflow-wrap:anywhere}
.empty{font-size:11px;color:#84bcd6;text-align:center;padding:14px 6px}
.card{padding:12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(160,230,255,.12);margin-bottom:10px}
.card h3{font-size:10px;letter-spacing:.18em;color:#9fd6ef;font-weight:700;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:6px}
.seg2{display:flex;background:rgba(0,0,0,.3);border-radius:999px;padding:2px}
.seg2 button{border:0;background:transparent;color:#84bcd6;font-size:9px;letter-spacing:.1em;padding:4px 8px;border-radius:999px;cursor:pointer}
.seg2 button.on{background:#5ee0ff;color:#03152b;font-weight:700}
.thead,.trow{display:grid;grid-template-columns:70px repeat(7,1fr);align-items:center;text-align:center;gap:2px}
.thead{font-size:13px;padding-bottom:4px;border-bottom:1px dashed rgba(120,190,220,.25)}
.thead button{border:0;background:transparent;font-size:13px;cursor:pointer;border-radius:6px;padding:3px 0;color:inherit}
.thead button.on{background:rgba(255,138,91,.25);outline:1px solid #ff8a5b}
.thead span{font-size:9px;color:#84bcd6;text-align:left;letter-spacing:.1em}
.trow{font-size:12px;color:#cfeefc;padding:6px 0 0}
.trow .nm{text-align:left;color:#fff;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow.me .nm{color:#ff8a5b}
.trow b{color:#fff}.trow .lead b{color:#ffcf6b}
.trow .tbar{grid-column:1/-1;height:5px;margin:4px 0 2px}
.legend{font-size:9px;color:#84bcd6;margin-top:8px;line-height:1.6}
.pick{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pick select{flex:1;min-width:0;font-size:13px;color:#fff;background:#020b18;border:1px solid rgba(160,230,255,.3);border-radius:10px;padding:8px;appearance:none;text-align:center;cursor:pointer}
.pick .vs{font-size:11px;font-weight:800;color:#ff8a5b;letter-spacing:.1em}
.score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;text-align:center;margin:4px 0 10px}
.score .n{font-size:30px;font-weight:800;color:#fff}.score .n.win{color:#ffcf6b}
.score .mid{font-size:9px;color:#84bcd6;letter-spacing:.15em;line-height:1.5}
.recs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px}
.rec{background:rgba(0,0,0,.25);border-radius:10px;padding:8px 4px;text-align:center;min-width:0}
.rec small{display:block;font-size:9px;color:#84bcd6;letter-spacing:.1em;margin-bottom:3px}
.rec b{font-size:13px;color:#fff;overflow-wrap:anywhere}
.dives{display:flex;gap:3px;flex-wrap:wrap}
.dives i{width:12px;height:12px;border-radius:3px;display:block}
.wa{background:#ffcf6b}.wb{background:#5ee0ff}.wt{background:#4f8fb0}
.cap{font-size:9px;color:#84bcd6;margin-top:4px}
.cap i{display:inline-block;width:8px;height:8px;border-radius:2px;margin:0 3px 0 6px}
.duel{border-top:1px dashed rgba(120,190,220,.25);padding-top:8px;margin-top:10px}
.duel .hd{font-size:9px;color:#84bcd6;letter-spacing:.15em;margin-bottom:6px;display:flex;justify-content:space-between}
.slot,.tot{display:grid;grid-template-columns:28px 1fr 28px 1fr;align-items:center;gap:6px;font-size:11px;margin:3px 0}
.slot .q{color:#5d93ad;font-size:10px}
.cell{display:flex;align-items:center;justify-content:space-between;padding:4px 8px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid transparent}
.cell.w{border-color:#ffcf6b;background:rgba(255,207,107,.1)}
.cell em{font-style:normal;color:#84bcd6;font-size:10px}.cell.w em{color:#ffe3a3}
.slot .x{text-align:center;color:#5d93ad;font-size:10px}
.tot{font-size:12px;margin-top:6px;font-weight:800;color:#fff}.tot div{text-align:right;padding-right:8px}
.col-paste{padding:0 14px 18px}
.submit{margin-top:10px;padding:14px;border-radius:14px;background:rgba(0,0,0,.35);border:1px dashed rgba(160,230,255,.3)}
.submit p{font-size:11px;color:#9fd6ef;margin-bottom:8px}
textarea{width:100%;height:64px;border-radius:8px;border:1px solid rgba(160,230,255,.25);background:#020b18;color:#d8f3ff;font-size:11px;padding:8px;resize:vertical}
.go{margin-top:8px;width:100%;border:1px solid #5ee0ff;border-radius:10px;padding:10px;font-weight:700;letter-spacing:.12em;background:rgba(94,224,255,.12);color:#bff2ff;cursor:pointer}
.note{font-size:10px;color:#5d93ad;margin-top:6px;text-align:center}
.roomcard{margin-top:12px}
.reset select{width:100%;font-size:13px;color:#fff;background:#020b18;border:1px solid rgba(160,230,255,.3);border-radius:10px;padding:8px;margin-bottom:8px}

/* desktop: board | stats | paste box */
@media (min-width:1000px){
  body{padding:20px}
  .app{max-width:1180px}
  .view.board{min-height:calc(100vh - 40px)}
  .bhead{display:flex;align-items:center;justify-content:space-between;padding:18px 28px 6px;text-align:left}
  .bhead .bl{display:flex;align-items:center;gap:12px}
  .bhead .bl .krill{font-size:30px}
  .bhead h1{font-size:22px;letter-spacing:.3em}
  .bhead .meta{text-align:right}
  .dive{margin-top:0;color:#9fd6ef}
  .menu{right:0;transform:none}
  .tabs{display:none}
  .grid{display:grid;grid-template-columns:1fr 1fr 300px;gap:16px;padding:12px 28px 24px;align-items:start}
  .col-board,.col-stats,.col-paste{padding:0}
  .board .col-board,.board .col-stats{display:block!important}
  .board[data-tab=stats] #p-today{display:block}
  .col-board .dtabs{display:flex}
  .submit{margin-top:0}
  textarea{height:110px}
}
.dtabs{display:none;gap:4px;margin-bottom:8px}
.dtabs button{font-size:10px;letter-spacing:.1em;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.3);color:#9fd6ef;border:0;cursor:pointer}
.dtabs button.on{background:#ff8a5b;color:#1a0b05;font-weight:700}