/* Lobby "game stage" (2026-10-06). Layered on top of the existing lobby: every
   original control (#set-game, #set-rounds, #set-teams...) is still in the DOM
   and still the source of truth. This file only restyles and adds the
   interactive layer driven by lobby-stage.js. Ink-on-paper surface throughout. */

.lobby-card{width:min(760px,94vw);}

/* The native game <select> stays as state, but the strip replaces it visually. */
#row-game{display:none;}
.ls-sr{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- game strip ---------- */
.ls-stripwrap{position:relative;}
.ls-strip{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x proximity; padding:6px 4px 12px; scrollbar-width:none; overscroll-behavior-x:contain;}
.ls-strip::-webkit-scrollbar{display:none;}
.ls-tile{scroll-snap-align:center; flex:0 0 112px; border:3px solid var(--ink); border-radius:14px; background:#fff; padding:10px 6px 9px; text-align:center; font-weight:900; font-size:12.5px; line-height:1.15; color:var(--ink); box-shadow:3px 3px 0 var(--ink); transition:transform .15s, background .15s; cursor:pointer; font-family:inherit;}
.ls-tile .e{font-size:27px; display:block; margin-bottom:4px; line-height:1;}
.ls-tile small{display:block; font-size:10.5px; color:var(--muted); font-weight:800; margin-top:3px;}
.ls-tile:hover{transform:translateY(-3px); box-shadow:3px 6px 0 var(--ink);}
.ls-tile.on{background:var(--yellow); transform:translateY(-4px) scale(1.04);}
.ls-tile.on small{color:#6b5600;}
.ls-arrow{position:absolute; top:36px; z-index:2; width:34px; height:34px; padding:0; border-radius:50%; border:3px solid var(--ink); background:#fff; color:var(--ink); font-weight:900; font-size:18px; line-height:1; box-shadow:2px 2px 0 var(--ink);}
.ls-arrow.l{left:-12px;} .ls-arrow.r{right:-12px;}
.ls-chosen{font-size:12px; font-weight:800; color:var(--muted); text-align:center;}

/* ---------- stage ---------- */
.ls-stage{display:grid; grid-template-columns:220px 1fr; gap:18px; background:var(--panel-2); border:3px solid var(--ink); border-radius:16px; padding:16px;}
.ls-demo{height:172px; background:#fff; border:3px solid var(--ink); border-radius:12px; display:grid; place-items:center; overflow:hidden; position:relative;}
.ls-info h3{font-size:22px; font-weight:900; letter-spacing:-.3px; color:var(--ink); line-height:1.1;}
.ls-meta{font-size:11.5px; font-weight:900; color:var(--muted); letter-spacing:.08em; margin:4px 0 10px;}
.ls-steps{list-style:none; display:flex; flex-direction:column; gap:7px; font-size:13.5px; font-weight:700; color:var(--ink);}
.ls-steps li{display:flex; gap:8px; align-items:flex-start; line-height:1.3;}
.ls-steps li b{flex:0 0 22px; height:22px; border-radius:50%; background:var(--ink); color:#fff; font-size:12px; display:grid; place-items:center;}
.ls-hint{margin-top:10px; font-size:12.5px; font-weight:800; color:#2b53a5;}
.ls-hint.warn{color:#9b2a1e;}

/* ---------- seats (restyles #lob-grid) ---------- */
.ls-seatlab{font-size:11px; font-weight:900; letter-spacing:.12em; color:var(--muted); margin-bottom:-4px;}
.lobby-grid.ls-seats{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:flex-start; background:transparent; border:none; padding:2px 0; min-height:0;}
.ls-seat{position:relative; width:104px; min-height:112px; border:3px solid var(--ink); border-radius:14px; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:8px 4px; font-weight:900; font-size:12.5px; color:var(--ink); box-shadow:3px 3px 0 var(--ink); text-align:center;}
.ls-seat canvas{width:54px; height:54px;}
.ls-seat .nm{max-width:94px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ls-seat .tag{font-size:10px; color:#2b53a5; letter-spacing:.06em;}
.ls-seat.me{background:#eef4ff;}
.ls-seat.open{border-style:dashed; box-shadow:none; background:transparent; color:var(--muted); cursor:pointer; font-family:inherit;}
.ls-seat.open:hover{background:#fff; color:var(--ink);}
.ls-seat.open .plus{font-size:26px; line-height:1;}
.ls-seat.open small{font-size:10.5px; font-weight:800;}
.ls-vs{font-weight:900; color:var(--muted); font-size:15px;}
.ls-seat.pop{animation:lsPop .45s cubic-bezier(.3,1.6,.5,1) both;}
@keyframes lsPop{from{transform:scale(.3) translateY(18px); opacity:0;}}
.ls-seat canvas.bob{animation:lsBob 2.6s ease-in-out infinite;}
@keyframes lsBob{50%{transform:translateY(-3px);}}
.ls-watch{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12px; font-weight:800; color:var(--muted); width:100%;}
.ls-watch canvas{width:26px; height:26px;}

/* ---------- seats as the participant manager (old #hostpanel folded in) ----------
   The panel stays in the DOM, hidden: its preset buttons are clicked from the
   bench and its #hp-warn text is mirrored into .ls-warn. */
#hostpanel{display:none!important;}
.ls-warn{font-size:12.5px; font-weight:800; color:#9b2a1e; min-height:0;}
.ls-warn:empty{display:none;}
.ls-seat.tap{cursor:pointer; font-family:inherit; transition:transform .12s;}
.ls-seat.tap:hover{transform:translateY(-2px); box-shadow:3px 5px 0 var(--ink);}
.ls-seat.tap:focus-visible{outline:3px solid var(--blue); outline-offset:2px;}
.ls-seat.tm{border-top:8px solid var(--tc);}
.ls-menu{position:absolute; top:calc(100% - 6px); left:50%; transform:translateX(-50%); z-index:6; min-width:170px; background:#fff; border:3px solid var(--ink); border-radius:12px; box-shadow:4px 4px 0 var(--ink); padding:5px; display:flex; flex-direction:column; gap:2px; text-align:left; animation:lsMenu .14s ease-out;}
@keyframes lsMenu{from{opacity:0; transform:translateX(-50%) translateY(-6px);}}
.ls-mi{border:none; border-radius:8px; box-shadow:none; background:#fff; padding:9px 10px; font:inherit; font-size:13px; font-weight:800; color:var(--ink); text-align:left; cursor:pointer;}
.ls-mi:hover,.ls-mi:focus-visible{background:#eef3ff; transform:none; box-shadow:none; outline:none;}
.ls-mi.danger{color:#9b2a1e;}
.ls-mi.danger:hover{background:#ffe9e5;}
.ls-mnote{padding:8px 10px; font-size:12.5px; font-weight:700; color:var(--muted);}
.ls-empty{font-size:13px; font-weight:800; color:var(--muted); padding:14px 4px;}
.ls-bench{width:100%; border:3px dashed #c9d1e6; border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; gap:8px; margin-top:4px;}
.ls-benchhead{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.ls-benchhead .lab{font-size:11px; font-weight:900; letter-spacing:.12em; color:var(--muted);}
.ls-benchhead .hint{font-size:12px; font-weight:800; color:#2b53a5;}
.ls-tools{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.ls-tools input{flex:1 1 160px; min-width:0; padding:8px 10px; border:2px solid #d5dcef; border-radius:10px; font:inherit; font-size:13px; font-weight:700; color:var(--ink);}
.ls-tool{border:2px solid var(--ink); border-radius:10px; box-shadow:2px 2px 0 var(--ink); background:#fff; padding:6px 10px; font:inherit; font-size:12px; font-weight:900; color:var(--ink);}
.ls-benchrow{display:flex; flex-wrap:wrap; gap:6px;}
.ls-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 4px; border:2px solid #d5dcef; border-radius:20px; background:#fff; font:inherit; font-size:12.5px; font-weight:800; color:var(--ink); box-shadow:none; position:relative;}
.ls-chip canvas{width:24px; height:24px;}
button.ls-chip{cursor:pointer;}
button.ls-chip:hover{border-color:var(--ink); background:#eef3ff; transform:none; box-shadow:none;}
.ls-chip.me{border-color:#9db8ef;}
.ls-more{font-size:12px; font-weight:800; color:var(--muted); align-self:center;}

/* reaction bubble over a seat */
.ls-bub{position:absolute; top:-16px; right:-4px; background:#fff; border:2px solid var(--ink); border-radius:14px; padding:1px 7px; font-size:19px; line-height:1.4; pointer-events:none; z-index:3; animation:lsBubble 1.9s ease-out both;}
@keyframes lsBubble{0%{transform:scale(.3) translateY(10px); opacity:0;}14%{transform:scale(1.12); opacity:1;}24%{transform:scale(1);}80%{opacity:1;}100%{transform:translateY(-16px); opacity:0;}}
.ls-react{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.ls-react .lab{font-size:11px; font-weight:900; letter-spacing:.12em; color:var(--muted); margin-right:2px;}
.ls-em{width:42px; height:42px; padding:0; border-radius:12px; border:3px solid var(--ink); background:#fff; font-size:20px; line-height:1; box-shadow:2px 2px 0 var(--ink);}
.ls-em:disabled{opacity:.5;}

/* ---------- controls row: steppers + switches ---------- */
.set-grid label{color:var(--muted);}
.ls-step{display:inline-flex; align-items:center; border:3px solid var(--ink); border-radius:12px; overflow:hidden; box-shadow:3px 3px 0 var(--ink); background:#fff; align-self:flex-start; margin-top:3px;}
.ls-step button{border:none; border-radius:0; box-shadow:none; background:#fff; width:40px; height:40px; padding:0; font-size:20px; font-weight:900; color:var(--ink);}
.ls-step button:hover{background:#eef3ff; transform:none; box-shadow:none;}
.ls-step button:active{background:#dfe8ff; transform:none; box-shadow:none;}
.ls-step button:disabled{opacity:.35; cursor:default; background:#fff;}
.ls-step .v{min-width:70px; text-align:center; font-weight:900; font-size:19px; color:var(--ink); line-height:1;}
.ls-step .v small{display:block; font-size:9.5px; color:var(--muted); letter-spacing:.08em; margin-top:2px;}
.ls-step .v.bump{animation:lsBump .25s ease-out;}
@keyframes lsBump{40%{transform:scale(1.25);}}

/* Checkboxes in the settings become switches. The input is unchanged, so
   every existing handler and the server protocol are untouched. */
.mode-row .chk,.set-grid .chk{display:flex; align-items:center; gap:10px; cursor:pointer;}
.mode-row .chk input[type=checkbox],.set-grid .chk input[type=checkbox]{-webkit-appearance:none; appearance:none; flex:0 0 auto; width:50px; height:28px; margin:0; border-radius:20px; background:#d5dcef; border:3px solid var(--ink); position:relative; cursor:pointer; transition:background .2s;}
.mode-row .chk input[type=checkbox]::after,.set-grid .chk input[type=checkbox]::after{content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--ink); transition:transform .2s cubic-bezier(.3,1.5,.6,1);}
.mode-row .chk input[type=checkbox]:checked,.set-grid .chk input[type=checkbox]:checked{background:var(--green);}
.mode-row .chk input[type=checkbox]:checked::after,.set-grid .chk input[type=checkbox]:checked::after{transform:translateX(22px);}
.mode-row .chk input[type=checkbox]:focus-visible,.set-grid .chk input[type=checkbox]:focus-visible{outline:3px solid var(--blue); outline-offset:2px;}
.mode-row .chk input[type=checkbox]:disabled,.set-grid .chk input[type=checkbox]:disabled{opacity:.5; cursor:default;}

/* Start: a little life on hover, nothing on press-and-hold. */
#btn-start:not(:disabled):hover{animation:lsWob .5s ease-in-out;}
@keyframes lsWob{25%{transform:rotate(-1deg);}75%{transform:rotate(1deg);}}

/* ---------- mini demos ---------- */
.lsd-ttt{display:grid; grid-template-columns:repeat(3,38px); gap:4px;}
.lsd-ttt i{width:38px; height:38px; background:var(--panel-2); border:2px solid #d5dcef; border-radius:6px; display:grid; place-items:center; font-style:normal;}
.lsd-ttt b{font-weight:900; font-size:22px; opacity:0; animation:6s infinite both;}
.lsd-ttt b.x{color:var(--blue);} .lsd-ttt b.o{color:var(--red);}
.lsd-c4{display:grid; grid-template-columns:repeat(5,24px); gap:3px; background:#3b6fd6; padding:5px; border-radius:8px;}
.lsd-c4 i{width:24px; height:24px; border-radius:50%; background:#1f3f86; position:relative;}
.lsd-c4 i b{position:absolute; inset:0; border-radius:50%; animation:lsDrop 5s infinite both;}
@keyframes lsDrop{0%{transform:translateY(-140px); opacity:0;}8%{opacity:1;}18%,85%{transform:translateY(0); opacity:1;}100%{opacity:0;}}
.lsd-hand{font-size:50px; display:inline-block; animation:lsShake 1.6s infinite;}
.lsd-hand.f{animation-name:lsShakeF;}
@keyframes lsShake{0%,60%{transform:none;}10%,30%,50%{transform:translateY(-14px) rotate(-12deg);}20%,40%{transform:none;}}
@keyframes lsShakeF{0%,60%{transform:scaleX(-1);}10%,30%,50%{transform:scaleX(-1) translateY(-14px) rotate(-12deg);}20%,40%{transform:scaleX(-1);}}
.lsd-draw path{stroke-dasharray:420; stroke-dashoffset:420; animation:lsDraw 3.5s ease-in-out infinite;}
@keyframes lsDraw{60%,100%{stroke-dashoffset:0;}}
.lsd-bars{display:flex; gap:7px; align-items:flex-end; height:90px;}
.lsd-bars i{width:28px; border:2px solid var(--ink); border-radius:5px 5px 0 0; animation:lsGrow 3s ease-in-out infinite alternate;}
@keyframes lsGrow{from{height:8px;}}
.lsd-wave{width:170px;}
.lsd-wave .track{height:14px; border-radius:8px; border:2px solid var(--ink); background:linear-gradient(90deg,#4a9bf2,#f7d63c,#e64539);}
.lsd-wave .knob{width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--ink); margin-top:-18px; animation:lsSlide 3.2s ease-in-out infinite alternate;}
@keyframes lsSlide{from{transform:translateX(0);}to{transform:translateX(148px);}}
.lsd-wave .lbl{display:flex; justify-content:space-between; font-size:11px; font-weight:900; color:var(--muted); margin-top:10px;}
.lsd-cards{position:relative; width:150px; height:110px;}
.lsd-cards span{position:absolute; width:120px; padding:8px 10px; border:2px solid var(--ink); border-radius:10px; background:#fff; font-size:12px; font-weight:800; color:var(--ink); box-shadow:2px 2px 0 var(--ink); animation:lsCard 4.5s infinite both;}
@keyframes lsCard{0%{opacity:0; transform:translateY(16px);}12%,85%{opacity:1; transform:none;}100%{opacity:0;}}
.lsd-big{font-size:62px; animation:lsBob 2.2s ease-in-out infinite;}
.lsd-dice{display:flex; gap:12px;}
.lsd-dice i{width:46px; height:46px; border:3px solid var(--ink); border-radius:10px; background:#fff; font-style:normal; font-size:26px; display:grid; place-items:center; animation:lsRoll 2.4s ease-in-out infinite;}
.lsd-dice i:nth-child(2){animation-delay:.3s;}
@keyframes lsRoll{0%,70%{transform:none;}80%{transform:rotate(180deg) translateY(-8px);}90%{transform:rotate(360deg);}}

@media (max-width:600px){
  .ls-stage{grid-template-columns:1fr; padding:12px; gap:12px;}
  .ls-demo{height:136px;}
  .ls-demo > *{transform:scale(.82);}
  .ls-info h3{font-size:19px;}
  .ls-tile{flex-basis:96px; font-size:11.5px;}
  .ls-arrow{display:none;}
  .ls-seat{width:calc(50% - 30px); min-height:100px;}
  .lobby-grid.ls-seats.big .ls-seat{width:calc(33.3% - 8px);}
}
@media (prefers-reduced-motion:reduce){
  .ls-tile,.ls-seat.pop,.ls-seat canvas.bob,.ls-bub,#btn-start:hover,.ls-step .v.bump,
  .lsd-ttt b,.lsd-c4 i b,.lsd-hand,.lsd-draw path,.lsd-bars i,.lsd-wave .knob,.lsd-cards span,.lsd-big,.lsd-dice i{animation:none!important; transition:none!important;}
  .lsd-ttt b,.lsd-cards span{opacity:1;}
  .lsd-draw path{stroke-dashoffset:0;}
}