/* ============================================================
   OpsArena — Khalifa University theme
   Palette per KU Brand Guidelines 2020:
   KU Blue #0057B8 (Pantone 2935) · Cool Gray 2 #D0D0CE ·
   Cool Gray 9 #75787B · Orange #FF8F1C · Cyan #00A9CE ·
   Green #78D64B · Red #F8485E
   Typeface: Barlow (web substitute for licensed DIN Next)
   ============================================================ */
:root{
  --ku-blue:#0057B8; --ku-blue-deep:#00408A;
  --gray2:#D0D0CE; --gray9:#75787B;
  --orange:#FF8F1C; --cyan:#00A9CE; --green:#78D64B; --red:#F8485E;
  --ink:#1A1A1A; --paper:#FFFFFF; --bg:#F6F6F5; --line:#E3E3E1;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:'Barlow',sans-serif;font-size:15px;line-height:1.5}
button{font-family:inherit}
a{color:var(--ku-blue)}
.mono{font-family:'IBM Plex Mono',monospace}
.pos{color:#3E8F1D}.neg{color:var(--red)}
#app{min-height:100%;display:flex;flex-direction:column;max-width:1100px;margin:0 auto;background:var(--paper);box-shadow:0 0 30px rgba(0,87,184,.06)}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ku-blue);color:#fff;
  padding:10px 18px;border-radius:4px;font-weight:500;z-index:99;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.toast.bad{background:var(--red)}
.demo-banner{background:#FFF6EB;border-bottom:1px solid #F5DEC0;color:#8A5A17;font-size:12.5px;padding:7px 20px;text-align:center}
.demo-banner code{font-family:'IBM Plex Mono';font-size:11.5px}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 24px;border-bottom:3px solid var(--ku-blue);background:var(--paper)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.ku-mark{width:34px;height:34px;background:var(--ku-blue);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed';font-weight:700;font-size:15px;border-radius:3px;flex:none}
.ku-mark.big{width:52px;height:52px;font-size:22px}
.brand .name{font-family:'Barlow Condensed';font-weight:700;font-size:23px;color:var(--ku-blue);line-height:1.05}
.brand .name b{color:var(--ink)}
.brand .sub{font-size:10.5px;letter-spacing:.09em;color:var(--gray9);text-transform:uppercase;font-weight:500}
.topnav{display:flex;gap:18px;align-items:center}
.topnav a{font-size:13.5px;font-weight:500;color:var(--gray9);text-decoration:none}
.topnav a.active{color:var(--ku-blue);border-bottom:2.5px solid var(--orange);padding-bottom:2px;font-weight:600}
.pillcode{font-family:'IBM Plex Mono';font-size:12px;background:var(--ku-blue);color:#fff;padding:6px 12px;letter-spacing:.08em;border-radius:3px;white-space:nowrap}
.pillcode a{color:#BBD4F1;text-decoration:none;margin-left:6px}

/* ---------- landing ---------- */
.hero{display:grid;grid-template-columns:1.15fr .85fr;min-height:430px}
.hero-left{padding:52px 44px;display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ku-blue);font-weight:600;margin-bottom:14px}
h1.hero-h{font-family:'Barlow Condensed';font-weight:700;font-size:58px;line-height:1;margin-bottom:18px}
h1.hero-h em{font-style:normal;color:var(--ku-blue)}
.hero-left .lede{color:var(--gray9);max-width:46ch;margin-bottom:28px}
.join-row{display:flex;max-width:430px}
.join-row input{flex:1;min-width:0;border:2px solid var(--ku-blue);border-right:none;padding:13px 15px;border-radius:3px 0 0 3px;
  font-family:'IBM Plex Mono';font-size:15px;letter-spacing:.18em;text-transform:uppercase;outline:none}
.join-row input::placeholder{color:#B9BBB8;letter-spacing:.12em}
.btn{display:inline-block;border:2px solid var(--ku-blue);background:var(--ku-blue);color:#fff;border-radius:0 3px 3px 0;
  font-family:'Barlow Condensed';font-weight:700;font-size:18px;letter-spacing:.06em;text-transform:uppercase;
  padding:13px 26px;cursor:pointer;white-space:nowrap;text-decoration:none;text-align:center}
.btn.orange{background:var(--orange);border-color:var(--orange);border-radius:3px}
.btn.ghost{background:#fff;color:var(--ku-blue);border-radius:3px}
.btn.small{font-size:14px;padding:7px 16px;border-radius:3px;margin-left:10px}
.btn:disabled{background:var(--gray2);border-color:var(--gray2);color:var(--gray9);cursor:not-allowed}
.under-join{margin-top:14px;font-size:13px;color:var(--gray9)}
.under-join a{font-weight:600;text-decoration:none}

.hero-right{background:var(--ku-blue);color:#fff;position:relative;padding:38px 34px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.hero-right::before{content:"";position:absolute;inset:0;opacity:.14;
  background-image:radial-gradient(circle at 12px 12px,#fff 5px,transparent 5.5px);background-size:44px 44px}
.manifest-mini{position:relative}
.manifest-mini .mh{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.18em;color:#BBD4F1;text-transform:uppercase;margin-bottom:10px}
.manifest-mini .row{display:flex;justify-content:space-between;gap:10px;font-family:'IBM Plex Mono';font-size:13px;padding:8px 0;border-bottom:1px dashed rgba(255,255,255,.3)}
.manifest-mini .row .pos{color:var(--orange)}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-right:7px;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.live-dot{animation:none}}
.hero-right .foot{position:relative;font-size:11.5px;letter-spacing:.08em;color:#BBD4F1;text-transform:uppercase;font-weight:500}
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.strip .cell{padding:16px 22px;border-right:1px solid var(--line)}
.strip .cell:last-child{border-right:none}
.strip .k{font-family:'Barlow Condensed';font-weight:700;font-size:26px;color:var(--ku-blue)}
.strip .v{font-size:11.5px;color:var(--gray9);text-transform:uppercase;letter-spacing:.08em;font-weight:500}

/* ---------- library ---------- */
.lib{padding:32px 28px 44px;background:var(--bg);flex:1}
.lib-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.lib-head h2{font-family:'Barlow Condensed';font-weight:700;font-size:33px}
.lib-head .class-chip{font-size:13px;color:var(--gray9)}
.lib-head .class-chip b{color:#fff;background:var(--ku-blue);padding:4px 10px;letter-spacing:.1em;font-family:'IBM Plex Mono';font-size:11.5px;border-radius:3px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.waybill{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--ku-blue);border-radius:4px;display:flex;flex-direction:column;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.waybill.locked-card{border-top-color:var(--gray2)}
.wb-top{display:flex;justify-content:space-between;align-items:flex-start;padding:15px 17px 6px}
.route{font-family:'IBM Plex Mono';font-weight:600;font-size:12px;letter-spacing:.1em;background:var(--ku-blue);color:#fff;padding:4px 9px;border-radius:3px}
.locked-card .route{background:var(--gray9)}
.status{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--green);color:#3E8F1D;padding:3px 8px;border-radius:3px}
.status.locked{border-color:var(--gray2);color:var(--gray9)}
.wb-body{padding:4px 17px 12px;flex:1}
.wb-body h3{font-family:'Barlow Condensed';font-weight:700;font-size:25px}
.wb-body .teach{font-size:12px;color:var(--ku-blue);font-weight:600;margin:2px 0 7px}
.wb-body p{font-size:13.5px;color:var(--gray9)}
.wb-meta{display:flex;gap:15px;padding:9px 17px;border-top:1px solid var(--line);font-size:12px;color:var(--gray9)}
.wb-meta span b{color:var(--ink)}
.wb-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:9px 17px;background:#FAFBFC;border-radius:0 0 4px 4px}
.barcode{display:flex;align-items:flex-end;gap:2px;height:20px;opacity:.8}
.barcode i{display:block;background:var(--ku-blue);width:2px;height:100%}
.locked-card .barcode i{background:var(--gray2)}
.barcode i:nth-child(3n){width:4px}.barcode i:nth-child(4n){height:70%}.barcode i:nth-child(5n){width:1.5px;height:85%}
.play{font-family:'Barlow Condensed';font-weight:700;font-size:15.5px;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--orange);border:none;padding:9px 20px;cursor:pointer;border-radius:3px;text-decoration:none}
.play.dim{background:var(--gray2);color:var(--gray9);cursor:default}

/* ---------- game screen ---------- */
.game{display:grid;grid-template-columns:1fr 290px;flex:1;min-height:0}
.game-main{padding:26px 30px}
.round-line{display:flex;align-items:center;gap:14px;margin-bottom:6px;flex-wrap:wrap}
.round-line .rt{font-family:'Barlow Condensed';font-weight:700;font-size:29px}
.round-pips{display:flex;gap:5px}
.round-pips i{width:15px;height:8px;background:var(--gray2);display:block;border-radius:2px}
.round-pips i.done{background:var(--ku-blue)}
.round-pips i.now{background:var(--orange)}
.timer{margin-left:auto;font-family:'IBM Plex Mono';font-weight:600;font-size:19px;color:var(--ku-blue)}
.scenario{font-size:14px;color:var(--gray9);max-width:62ch;margin-bottom:18px}
.scenario b{color:var(--ink)}
.chart{border:1px solid var(--line);border-left:4px solid var(--cyan);background:#FAFBFC;padding:15px 17px 10px;margin-bottom:20px;border-radius:3px}
.ch-title{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--gray9);font-weight:600;margin-bottom:12px}
.bars{display:flex;align-items:flex-end;gap:10px;height:110px}
.bars .b{flex:1;background:var(--ku-blue);position:relative;border-radius:2px 2px 0 0;opacity:.85;min-height:6px}
.bars .b span{position:absolute;top:-20px;left:0;right:0;text-align:center;font-family:'IBM Plex Mono';font-size:11px}
.bars .b.today{background:repeating-linear-gradient(-45deg,var(--orange) 0 6px,#fff 6px 10px);border:1.5px dashed var(--orange);opacity:1}
.bar-x{display:flex;gap:10px;margin-top:6px}
.bar-x span{flex:1;text-align:center;font-family:'IBM Plex Mono';font-size:10px;color:var(--gray9)}
.decision{border:1px solid var(--line);border-left:4px solid var(--ku-blue);padding:17px;border-radius:3px}
.decision .dq{font-family:'Barlow Condensed';font-weight:700;font-size:20px;margin-bottom:12px}
.slider-row{display:flex;align-items:center;gap:18px}
.ku-range{flex:1;accent-color:var(--ku-blue);height:26px}
.qty{font-family:'IBM Plex Mono';font-weight:600;font-size:29px;min-width:86px;text-align:right;color:var(--ku-blue)}
.qty small{font-size:12px;color:var(--gray9);display:block;font-weight:400}
.econ{display:flex;gap:20px;margin-top:12px;font-family:'IBM Plex Mono';font-size:12px;color:var(--gray9);flex-wrap:wrap}
.econ b{color:var(--ink)}
.lockin{margin-top:16px;width:100%;border-radius:3px}
.result-line{margin-top:14px;font-size:14px}
.result-line b{font-family:'IBM Plex Mono'}
.kpi-row{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.kpi{border:1px solid var(--line);border-radius:3px;padding:8px 14px;background:#FAFBFC}
.kpi small{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray9)}
.kpi b{font-family:'IBM Plex Mono';font-size:19px;color:var(--ku-blue)}
.brief{border:1px solid var(--line);border-left:4px solid var(--ku-blue);border-radius:3px;padding:18px 20px;background:#FAFBFC}
.brief h3{font-family:'Barlow Condensed';font-weight:700;font-size:20px;color:var(--ku-blue);margin:14px 0 6px}
.brief h3:first-child{margin-top:0}
.brief p{font-size:14px;color:#3d4247;margin-bottom:4px}
.brief ul{margin:4px 0 4px 20px}
.brief li{font-size:13.5px;color:#3d4247;margin-bottom:5px}
.brief b{color:var(--ink)}
.debrief{border:1px solid var(--line);border-left:4px solid var(--green);border-radius:3px;padding:16px 18px;margin-top:18px;background:#FAFDF9}
.debrief h3{font-family:'Barlow Condensed';font-weight:700;font-size:21px;margin-bottom:8px}
.debrief p{font-size:13.5px;color:#3d4247;margin-bottom:8px}
.debrief p:last-child{margin-bottom:0}

.game-side{background:var(--ku-blue);color:#fff;padding:22px 20px;display:flex;flex-direction:column;gap:18px}
.side-h{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#BBD4F1}
.big-score{font-family:'IBM Plex Mono';font-weight:600;font-size:31px}
.big-score small{display:block;font-size:11px;color:#BBD4F1;font-weight:400;letter-spacing:.08em;margin-top:2px}
.side-board .row{display:flex;justify-content:space-between;gap:8px;font-family:'IBM Plex Mono';font-size:12px;padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.3)}
.side-board .row.me{color:var(--orange);font-weight:600}
.side-back{margin-top:auto;color:#BBD4F1;font-size:13px;text-decoration:none}

/* ---------- Queue Commander ---------- */
.qc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.qc-col{border:1px solid var(--line);border-radius:3px;padding:8px 4px;text-align:center;background:#FAFBFC;display:flex;flex-direction:column;align-items:center;gap:5px}
.qc-arr{height:74px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px}
.qc-bar{width:18px;background:var(--cyan);border-radius:2px 2px 0 0;opacity:.8}
.qc-arr small{font-size:10px;color:var(--gray9);font-family:'IBM Plex Mono'}
.qc-hour{font-family:'IBM Plex Mono';font-size:11px;font-weight:600}
.qc-staff{display:flex;align-items:center;gap:6px}
.qc-staff b{font-family:'IBM Plex Mono';font-size:18px;color:var(--ku-blue);min-width:16px}
.qc-btn{width:26px;height:26px;border:1.5px solid var(--ku-blue);background:#fff;color:var(--ku-blue);border-radius:3px;font-size:15px;cursor:pointer;line-height:1}
.qc-btn:disabled{border-color:var(--gray2);color:var(--gray2)}
.qc-cap{font-size:10px;color:var(--gray9)}
.qc-col small.pos,.qc-col small.neg{font-size:10.5px;font-family:'IBM Plex Mono'}

/* ---------- Line Balancer ---------- */
.lb-pool{border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:3px;padding:12px 14px;margin-bottom:14px;background:#FFFBF5}
.lb-chip{display:inline-flex;align-items:baseline;gap:5px;border:1.5px solid var(--ku-blue);background:#fff;color:var(--ink);
  border-radius:3px;padding:6px 10px;margin:3px 4px 3px 0;cursor:pointer;font-size:13px}
.lb-chip b{font-family:'IBM Plex Mono';color:var(--ku-blue)}
.lb-chip small{color:var(--gray9);font-size:10.5px}
.lb-chip.picked{background:var(--orange);border-color:var(--orange);color:#fff}
.lb-chip.picked b,.lb-chip.picked small{color:#fff}
.lb-chip.in{border-style:dashed}
.lb-line{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.lb-station{border:1px solid var(--line);border-top:4px solid var(--ku-blue);border-radius:3px;background:#FAFBFC;min-height:120px;cursor:pointer}
.lb-station.droppable{outline:2px dashed var(--orange);outline-offset:-4px}
.lb-shead{display:flex;justify-content:space-between;padding:8px 10px;font-size:12px;font-weight:600;border-bottom:1px solid var(--line)}
.lb-shead b{font-family:'IBM Plex Mono';color:var(--ku-blue)}
.lb-slots{padding:8px}
.lb-slots small{color:var(--gray9);font-size:11px}
.lb-viol{margin-top:10px;color:#8A5A17;background:#FFF6EB;border:1px solid #F5DEC0;border-radius:3px;padding:8px 12px;font-size:13px}

/* ---------- instructor ---------- */
.inst{display:grid;grid-template-columns:320px 1fr;flex:1}
.inst-left{border-right:1px solid var(--line);padding:24px 22px;background:#FAFBFC}
.inst-left h3{font-family:'Barlow Condensed';font-weight:700;font-size:24px;margin-bottom:14px}
.tourney{border:1px solid var(--line);background:#fff;margin-bottom:10px;border-radius:4px;cursor:pointer}
.tourney .t-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.tourney .t-top b{font-size:14px}
.tourney .t-top .mono{font-size:11px;background:var(--ku-blue);color:#fff;padding:2px 7px;letter-spacing:.1em;border-radius:3px}
.tourney .t-meta{padding:7px 12px;font-size:12px;color:var(--gray9);display:flex;gap:14px}
.tourney.activeT{border-color:var(--ku-blue);box-shadow:0 0 0 2px rgba(0,87,184,.18)}
.newclass{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.newclass input,.openclass input{border:1.5px solid var(--gray2);border-radius:3px;padding:10px 12px;font-size:14px;font-family:'Barlow'}
.newclass input:focus,.openclass input:focus{border-color:var(--ku-blue);outline:none}
.newt{width:100%;font-size:16px;padding:11px;border-radius:3px}
.openclass{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.openclass input{flex:1;min-width:70px}
.openclass .ch-title{width:100%}
.hint{color:var(--gray9);font-size:13.5px}
.hint.big{padding:60px 40px;text-align:center;font-size:15px}
.inst-right{padding:24px 26px}
.ir-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px}
.ir-head h3{font-family:'Barlow Condensed';font-weight:700;font-size:26px}
.codechip{font-size:12px;background:var(--ku-blue);color:#fff;padding:3px 9px;border-radius:3px;letter-spacing:.1em;vertical-align:middle}
.ir-actions{display:flex;gap:10px;flex-wrap:wrap}
.chipbtn{font-size:12.5px;font-weight:500;border:1.5px solid var(--ku-blue);color:var(--ku-blue);background:#fff;padding:7px 12px;cursor:pointer;border-radius:3px;text-decoration:none;display:inline-block}
.unlock-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.unlock{border:1.5px solid var(--gray2);border-radius:3px;padding:7px 12px;font-size:12.5px;cursor:pointer;background:#fff;display:flex;gap:7px;align-items:center}
.unlock.on{border-color:var(--green);background:#FAFDF9}
.unlock input{accent-color:var(--ku-blue)}
.statline{font-size:12px;color:var(--gray9);margin-bottom:10px}
.manifest{border:1px solid var(--line);border-radius:4px;overflow:hidden}
.manifest.mini{margin-top:16px;max-width:520px}
.m-head,.m-row{display:grid;grid-template-columns:48px 1fr repeat(4,86px) 80px;align-items:center;padding:9px 13px;font-family:'IBM Plex Mono';font-size:12px}
.manifest.mini .m-head,.manifest.mini .m-row{grid-template-columns:44px 1fr 1fr 1fr 1fr}
.m-head{background:var(--ku-blue);color:#fff;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.m-row{border-top:1px solid var(--line)}
.m-row:nth-child(even){background:#FAFBFC}
.m-row .pos{font-weight:600;color:var(--ku-blue)}
.m-row.p1{background:#FFF6EB}
.m-row.p1 .pos{color:var(--orange)}
.projector-note{margin-top:12px;font-size:12.5px;color:var(--gray9);border-left:3px solid var(--cyan);padding-left:10px}

/* ---------- projector board ---------- */
.board{min-height:100vh;background:var(--ku-blue);color:#fff;padding:40px 50px;display:flex;flex-direction:column}
.board-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.board-title{font-family:'Barlow Condensed';font-weight:700;font-size:52px;line-height:1}
.board-sub{font-family:'IBM Plex Mono';font-size:14px;color:#BBD4F1;margin-top:8px;letter-spacing:.06em}
.board .ku-mark.big{background:#fff;color:var(--ku-blue)}
.board-rows{display:flex;flex-direction:column;gap:8px;max-width:820px}
.board-row{display:grid;grid-template-columns:64px 1fr 130px;align-items:center;background:rgba(255,255,255,.08);
  border-radius:4px;padding:12px 20px;font-family:'IBM Plex Mono'}
.board-row.gold{background:var(--orange);color:#1A1A1A}
.b-pos{font-weight:600;font-size:22px}
.b-name{font-size:20px}
.b-pts{font-size:26px;font-weight:600;text-align:right}
.b-pts small{font-size:12px;margin-left:4px;opacity:.7}

/* ---------- responsive ---------- */
/* ---------- v2: parameter forms, waiting room, QR ---------- */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.pfield{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--gray9)}
.pfield input{border:1.5px solid var(--gray2);border-radius:3px;padding:8px 10px;font-size:14px;font-family:'IBM Plex Mono'}
.pfield input:focus{border-color:var(--ku-blue);outline:none}
.newclass select{border:1.5px solid var(--gray2);border-radius:3px;padding:10px 12px;font-size:14px;font-family:'Barlow';background:#fff}
.newclass select:focus{border-color:var(--ku-blue);outline:none}
.pbox{border:1px solid var(--line);border-radius:3px;margin:14px 0;background:#FAFBFC}
.pbox summary{padding:11px 14px;cursor:pointer;font-weight:600;font-size:13.5px;color:var(--ku-blue)}
.pbox .pgrid{padding:0 14px}
.pbox .hint{display:block;padding:0 14px 12px}
.waiting{flex:1;display:flex;align-items:center;justify-content:center;background:var(--bg);padding:40px 20px}
.waiting-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--ku-blue);border-radius:4px;
  padding:28px 30px;max-width:480px;display:flex;flex-direction:column;gap:8px;box-shadow:0 2px 10px rgba(0,87,184,.08)}
.waiting-card h2{font-family:'Barlow Condensed';font-weight:700;font-size:32px}
.waiting-card .teach{color:var(--ku-blue);font-weight:600;font-size:13px}
.waiting-card p{color:var(--gray9);font-size:14px}
.wait-pulse{margin-top:10px;padding:11px 14px;background:#FFF6EB;border:1px solid #F5DEC0;border-radius:3px;
  font-size:13.5px;font-weight:500;color:#8A5A17}
.dash-grid{display:grid;grid-template-columns:auto 1fr;gap:18px;margin-bottom:16px;align-items:start}
.dash-qr{border:1px solid var(--line);border-radius:4px;padding:12px;text-align:center;background:#fff}
.dash-qr img,.dash-qr canvas{margin:6px auto}
.qr-url{font-size:10px;color:var(--gray9);max-width:180px;word-break:break-all;margin-top:6px}
.dash-info p{font-size:14px;margin-bottom:6px}
.pset{font-size:11.5px;color:var(--gray9);line-height:1.9;margin-bottom:8px}
.pset b{color:var(--ku-blue)}
.chipbtn.go{border-color:#3E8F1D;color:#3E8F1D}
.chipbtn.warn{border-color:var(--orange);color:#B36006}
.m-head.lb2,.m-row.lb2{grid-template-columns:52px 1fr 150px}
.board-join{text-align:center;background:#fff;border-radius:6px;padding:10px 12px}
.board-join img,.board-join canvas{display:block;margin:0 auto}
.board-scan{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ku-blue);margin-top:6px}
@media (max-width:860px){
  .dash-grid{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .m-head.lb2,.m-row.lb2{grid-template-columns:38px 1fr 100px}
  .board-join{display:none}
}

@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero-right{min-height:230px}
  h1.hero-h{font-size:42px}
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip .cell:nth-child(2){border-right:none}
  .cards{grid-template-columns:1fr}
  .game{grid-template-columns:1fr}
  .game-side{order:-1;flex-direction:row;flex-wrap:wrap;gap:14px;align-items:center}
  .game-side .side-board{flex:1;min-width:180px}
  .side-back{margin:0;width:100%}
  .inst{grid-template-columns:1fr}
  .inst-left{border-right:none;border-bottom:1px solid var(--line)}
  .m-head,.m-row{grid-template-columns:38px 1fr 74px 64px}
  .col-g{display:none}
  .m-head .col-g:first-of-type,.m-row .col-g:first-of-type{display:block}
  .qc-grid{grid-template-columns:repeat(3,1fr)}
  .lb-line{grid-template-columns:repeat(2,1fr)}
  .topnav{gap:12px}
  .board{padding:24px 18px}
  .board-title{font-size:32px}
  .b-name{font-size:15px}.b-pos{font-size:16px}.b-pts{font-size:19px}
}
:focus-visible{outline:2.5px solid var(--orange);outline-offset:2px}