/* THE FELT - 09-online.css
   The online game (29-online.js): a lobby to host or join, then the table.
   The table itself reuses the live log's pieces - .live-felt, .livepad, the
   .abtn/.szbtn pad and the keypad from 06-v4.css - so an online hand looks
   and presses exactly like a logged one. What is here is the lobby, the
   host's form, the rail, and the online-only marks on the felt: the timer
   ring, the second board, the side pots and the host's star. */

#view-online{--on-gap:14px;}
.on-wrap{max-width:1180px;margin:0 auto;padding:6px 0 40px;}
.on-card{border-radius:22px;padding:20px 22px;background:linear-gradient(165deg,rgba(255,236,220,.04),rgba(255,236,220,0) 40%),var(--g-surface);
  border:1px solid var(--border2);box-shadow:var(--shadow);}
.on-center{text-align:center;padding:40px;}
.on-kicker{font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-hi);margin-bottom:8px;}
.on-h{margin:0 0 6px;font:800 22px/1.1 var(--disp);letter-spacing:-.01em;}
.on-hero{margin:8px 0 18px;}
.on-hero .on-h1{margin:0;font:800 clamp(30px,4.6vw,52px)/.95 var(--disp);letter-spacing:-.03em;
  text-shadow:0 1px 0 #4B3C47,0 2px 0 #3A2E37,0 3px 0 #2A2127,0 4px 0 #1B1519,0 12px 24px rgba(0,0,0,.6);}
.on-hero .on-h1 em{font-style:normal;background:var(--g-ember);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;
  filter:drop-shadow(0 3px 0 #6A2A14);}
.on-hero p{max-width:620px;color:var(--text2);font-size:14.5px;line-height:1.55;margin:12px 0 0;}
.on-offline{max-width:720px;margin:24px auto;}
.on-offline p{color:var(--text2);line-height:1.6;}
.on-offline code{font:600 12px var(--mono);padding:2px 6px;border-radius:6px;background:var(--g-well);color:var(--accent-hi);}
.on-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:11px 14px;border-radius:14px;margin-bottom:14px;
  background:var(--accent-dim);border:1px solid var(--accent-line);font-size:13.5px;}
.on-note.warn{background:rgba(229,72,77,.1);border-color:rgba(255,126,130,.35);}
.on-lobby{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:start;}
.on-join{position:sticky;top:78px;}
.on-go{width:100%;margin-top:16px;}
.on-err{margin-top:10px;padding:8px 11px;border-radius:10px;font-size:13px;color:var(--raise-hi);background:rgba(229,72,77,.1);border:1px solid rgba(255,126,130,.25);}

/* fields */
.on-f{display:flex;flex-direction:column;gap:6px;margin-top:12px;min-width:0;}
.on-f>span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);font-weight:700;}
.on-f input[type=text],.on-f input[type=number],.on-f select{width:100%;min-height:44px;font-size:15px;}
#onJCode{font:800 26px var(--disp);letter-spacing:.2em;text-transform:uppercase;text-align:center;}
.on-f.sm input,.on-f.sm select{min-height:40px;font-size:14px;}
.on-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;}
.on-form .chipset .chip{min-height:38px;}
.on-sec{padding:14px 0 4px;border-top:1px solid var(--border);margin-top:14px;}
.on-sec:first-child{border-top:0;margin-top:4px;padding-top:0;}
.on-sec-h{font:800 15px var(--disp);color:var(--text);}
.on-sched{margin-top:12px;max-height:230px;overflow:auto;border-radius:12px;background:var(--g-well);padding:6px 10px;}
.on-sched tr.cut td{border-top:1px dashed var(--raise-hi);}

/* joining: the table you found, and its seats */
.on-found{margin-top:14px;padding:12px;border-radius:14px;background:var(--g-well);border:1px solid var(--border2);}
.on-found-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.on-found-h b{font:800 18px var(--disp);margin-right:4px;}
.on-seatpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:8px;}
.on-sp{min-height:52px;border-radius:12px;border:1px solid var(--border3);background:var(--g-surface2);color:var(--text);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-shadow:var(--hair),0 3px 0 #0A0709;touch-action:manipulation;}
.on-sp b{font:800 16px var(--disp);}
.on-sp span{font:600 10.5px var(--mono);color:var(--text3);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px;}
.on-sp.on{background:var(--g-accent);border-color:#5F3FD2;color:#fff;box-shadow:var(--hair-strong),0 3px 0 #4A2DB0;}
.on-sp.on span{color:rgba(255,255,255,.85);}
.on-sp.taken{opacity:.55;cursor:default;box-shadow:none;border-style:dashed;}
.on-sp.taken b{color:var(--c,var(--text2));}
.on-sp:active:not(.taken){transform:translateY(3px);box-shadow:none;}

/* ================= THE GAME ================= */
.on-game{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"top top" "main side";gap:var(--on-gap);align-items:start;}
.on-top{grid-area:top;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.on-top .live-title h2{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.on-code{border-color:var(--accent-line);}
.on-code b{letter-spacing:.14em;color:var(--accent-hi);}
.on-copy{font:600 10px var(--mono);color:var(--text3);text-transform:uppercase;letter-spacing:.08em;}
.on-coachon b{color:var(--gold-hi);}
/* On a laptop the felt takes the whole left column and the pad sits on top of
   the rail: stacked under the table, a 720px screen had room for a table the
   size of a postcard. The stage's own padding (room for the seats hanging off
   the oval) is about 150px of height, hence the 330. */
.on-main{grid-area:main;display:flex;flex-direction:column;gap:12px;min-width:0;}
.on-felt{padding:8px 20px 16px;}
.on-felt .table-stage{max-width:min(100%,calc((100vh - 330px) * 2.05));min-width:380px;}
.on-right{grid-area:side;display:flex;flex-direction:column;gap:12px;position:sticky;top:74px;max-height:calc(100vh - 86px);min-height:0;}
.on-right .livepad{flex:none;max-height:58vh;overflow:auto;}
.on-right .lp-main{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));}
.on-side{padding:12px;display:flex;flex-direction:column;flex:1 1 auto;min-height:180px;}
.on-side .railtabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--g-well);margin-bottom:10px;}
.on-side .railtabs button{flex:1;border:0;background:transparent;color:var(--text2);font:600 12.5px var(--ui);padding:9px 6px;border-radius:9px;cursor:pointer;position:relative;min-height:38px;}
.on-side .railtabs button.on{background:var(--g-accent);color:#fff;box-shadow:var(--hair-strong);}
.on-badge{position:absolute;top:2px;right:4px;min-width:16px;height:16px;border-radius:99px;background:var(--ember-2);color:#fff;font:700 10px/16px var(--mono);font-style:normal;padding:0 4px;}
.on-sidebody{overflow:auto;min-height:120px;flex:1;padding:0 2px;}
.on-sub{font:700 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin:14px 0 6px;}
.on-sub:first-child{margin-top:2px;}

/* players */
.on-prow{display:grid;grid-template-columns:12px minmax(0,1fr) auto;gap:4px 9px;align-items:center;padding:8px 6px;border-radius:10px;border-bottom:1px solid var(--border);}
.on-prow.me{background:var(--accent-dim);}
.on-prow.gone{opacity:.6;}
.on-dot{width:10px;height:10px;border-radius:50%;display:inline-block;box-shadow:0 0 0 2px rgba(0,0,0,.35);margin-right:6px;vertical-align:middle;}
.on-prow .on-dot{margin:0;}
.on-pn{min-width:0;}
.on-pn b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.on-pn small{display:block;font-size:11px;color:var(--text3);}
.on-pstk{font:600 13px var(--mono);color:var(--gold-hi);}
.on-hctl{grid-column:2/-1;display:flex;gap:4px;flex-wrap:wrap;align-items:center;}
.on-hctl .lbtn.sm{min-height:32px;}
.lbtn.warn{border-color:rgba(255,126,130,.6);color:var(--raise-hi);}
.on-stkin{width:110px;min-height:34px;padding:5px 8px;}
.on-hostbar,.on-mybar{display:flex;gap:6px;flex-wrap:wrap;}
.on-hostbar .lbtn,.on-mybar .lbtn{min-height:40px;}
.on-req{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px;border-radius:10px;background:var(--g-well);margin-bottom:6px;font-size:12.5px;}
.on-req span{flex:1 1 160px;}
.gold{color:var(--gold-hi);}
.on-ev{font-size:11.5px;color:var(--text3);line-height:1.45;padding:3px 0;}

/* chat */
.on-msg{padding:5px 0;font-size:13px;line-height:1.45;word-wrap:break-word;}
.on-msg b{margin-right:6px;font-size:12px;}
.on-msg.me{padding-left:10px;border-left:2px solid var(--accent-line);}
.on-emote{font-size:20px;vertical-align:middle;margin-right:4px;}
.on-chatbar{border-top:1px solid var(--border);padding-top:8px;margin-top:8px;}
.on-emotes{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px;}
.on-emotes button{min-width:36px;height:36px;border-radius:10px;border:1px solid var(--border2);background:var(--g-surface2);color:var(--text);cursor:pointer;font:600 14px var(--ui);touch-action:manipulation;}
.on-emotes button:active{transform:translateY(2px);}
.on-say{display:flex;gap:6px;}
.on-say input{flex:1;min-width:0;min-height:44px;}

/* hands */
.on-hand{border-bottom:1px solid var(--border);}
.on-hand summary{display:grid;grid-template-columns:34px auto minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 2px;cursor:pointer;list-style:none;font-size:12px;}
.on-hand summary::-webkit-details-marker{display:none;}
.on-hand .no{font:700 11px var(--mono);color:var(--text3);}
.on-hand .cards{display:flex;gap:2px;}
.on-hand .cards .pcard.sm{width:24px;height:33px;padding:2px 3px;}
.on-hand .cards .pcard.sm .r{font-size:11px;} .on-hand .cards .pcard.sm .s{font-size:8px;}
.on-hand .bd{font:500 11px var(--mono);color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.on-hand .net{font:600 12px var(--mono);}
.on-hd{padding:4px 4px 10px;font-size:12px;color:var(--text2);line-height:1.5;}
.on-hd ol{margin:6px 0 0;padding-left:20px;}
.on-hd small{color:var(--text3);font-family:var(--mono);}

/* rules */
.on-live select{width:100%;}
.on-live .lbtn{margin-top:12px;width:100%;}
.on-side table.tt tr.cur td{color:var(--gold-hi);}

/* ---------- the pad ---------- */
.on-pad.myturn{border-color:var(--gold);box-shadow:var(--shadow),0 0 0 1px var(--gold),0 0 36px -7px rgba(232,180,76,.52);}
/* a steady glow, not a pulsing box-shadow: that repainted every frame for as
   long as it was your turn, on top of 1s server polling */
.on-pad.busy{opacity:.7;pointer-events:none;}
.on-clockline{margin-left:auto;font:600 12px var(--mono);color:var(--text3);}
.on-clockline b{font:800 20px var(--disp);color:var(--text);margin-right:4px;}
.on-clockline b.bank{color:var(--gold-hi);}
.on-mine{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text2);}
.on-mine .nm{font-weight:600;color:var(--text);margin-left:4px;}
.on-mine .k{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--text3);}
.on-status{padding:10px 12px;border-radius:12px;background:var(--g-well);border:1px solid var(--border2);font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.on-wins{display:flex;flex-direction:column;gap:4px;}
.on-win{font-size:15px;}
.on-grades{display:flex;flex-direction:column;gap:6px;}
.on-gr{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:start;font-size:12.5px;color:var(--text2);line-height:1.45;}
.on-gr .grade{font-size:18px;}
.on-results .tt td,.on-results .tt th{font-size:12px;}
.on-results .tt td:first-child,.on-results .tt td:nth-child(2){white-space:nowrap;}
.on-endrow{display:flex;justify-content:flex-end;}

/* ---------- on the felt ---------- */
/* The timer is a ring round the pod of whoever is to act: it drains from
   full, turns red for the last five seconds and gold once the time bank is
   burning. --p is set four times a second from 29-online.js. */
.seat .on-ring{position:absolute;inset:-6px;border-radius:16px;pointer-events:none;padding:3px;z-index:3;
  background:conic-gradient(var(--gold) calc(var(--p,1)*360deg),rgba(255,255,255,.06) 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);}
.seat .on-ring.low{background:conic-gradient(var(--raise-hi) calc(var(--p,1)*360deg),rgba(255,255,255,.06) 0);}
.seat .on-ring.bank{background:conic-gradient(#FFE08A calc(var(--p,1)*360deg),rgba(255,255,255,.06) 0);}
.seat.toact .pod:has(.on-ring)::after{display:none;}
.seat .on-hostmark{position:absolute;left:-6px;top:-8px;font-style:normal;font-size:11px;color:var(--gold-hi);text-shadow:0 1px 2px #000;}
.seat .avatar.custom{padding:0;overflow:hidden;background:none;border:0;}
.ptable.on-still .pcard,.ptable.on-still .betspot,.ptable.on-still .board .pcard{animation:none;}
.ptable.twice .board{top:34%;}
.ptable .on-board2{top:55%;transform:translate(-50%,-50%) scale(.82);opacity:.95;}
.ptable.twice .potline{top:71%;}
.ptable.twice .on-sidepots{top:calc(71% + 28px);}
.on-sidepots{position:absolute;left:50%;top:calc(69% + 28px);transform:translateX(-50%);z-index:3;display:flex;gap:8px;white-space:nowrap;
  font:600 10px var(--mono);color:rgba(246,211,145,.75);}
.on-sidepots span{padding:2px 8px;border-radius:99px;background:rgba(0,0,0,.45);}
.on-sidepots b{color:var(--gold-hi);}

@media(max-width:1100px){
  .on-game{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "main" "side";}
  .on-right{position:static;max-height:none;}
  .on-right .livepad{max-height:none;}
  .on-felt{padding:14px 30px 40px;}
  .on-sidebody{max-height:420px;}
  .on-felt .table-stage{max-width:760px;}
  .on-lobby{grid-template-columns:minmax(0,1fr);}
  .on-join{position:static;}
}
@media(max-width:700px){
  .on-card{padding:16px 14px;border-radius:18px;}
  .on-felt .table-stage{min-width:0;max-width:100%;}
  .on-top .live-title h2{max-width:60vw;}
  .on-top .live-game{order:3;flex:none;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  .on-top .live-game::-webkit-scrollbar{display:none;}
  .on-hand summary{grid-template-columns:30px auto minmax(0,1fr) auto;}
  .on-sidepots{font-size:9px;}
  .on-mine .k{display:none;}
  .on-side .railtabs button{font-size:12px;padding:8px 4px;}
}