:root{
  --bg:#0b0d13; --panel:#141824; --line:#2a3145; --txt:#e8ecf5; --dim:#8b95ad; --gold:#ffc857;
  --c0:#ff5d73; --c1:#4ea3ff; --c2:#3ddc97; --c3:#b57bff;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 700px at 50% -10%,#1b2133,#0b0d13 70%);
  color:var(--txt);font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex;flex-direction:column;align-items:center;padding:12px 10px 32px;min-height:100vh;
  -webkit-text-size-adjust:100%}
h1{margin:0 0 2px;font-size:21px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.sub{color:var(--dim);font-size:11.5px;margin-bottom:12px;text-align:center}
.wrap{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  width:100%;max-width:560px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 13px}
.panel.board{padding:6px;width:100%;background:#070a10}
#board{touch-action:manipulation;width:100%;height:auto;display:block}

/* home link */
.home{align-self:flex-start;color:var(--dim);text-decoration:none;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:6px;padding:4px 2px}
.home:hover{color:var(--txt)}

/* ---- shared board pieces (SVG) ---- */
.hole{stroke-width:3;transition:stroke .15s,stroke-width .15s;filter:url(#drop)}
.hole.empty{fill:url(#gEmpty);stroke:#6b7a9e;stroke-width:2}
.hole.playable{cursor:pointer}
.hole.playable:hover{stroke:var(--gold);stroke-width:4}
.hole.halo{stroke:var(--gold)!important;stroke-width:4}
.gloss{pointer-events:none}
.lbl{font-weight:800;text-anchor:middle;dominant-baseline:central;pointer-events:none;
  paint-order:stroke;stroke:rgba(0,0,0,.45);stroke-width:3px;stroke-linejoin:round;fill:#fff}
.edge{stroke:#222b3d;stroke-width:2}

/* ---- side panels ---- */
.side{width:100%;display:flex;flex-direction:column;gap:10px}
.score{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px 8px 12px;
  border-radius:10px;border:1px solid var(--line);background:#101522;margin-bottom:8px}
.score:last-child{margin-bottom:0}
.score.active{box-shadow:0 0 0 2px currentColor inset}
.score b{font-size:20px}
.name{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase}
.status{font-size:13px;line-height:1.45;color:var(--dim);padding:0 2px 10px;margin-bottom:10px;
  border-bottom:1px solid var(--line)}
.status strong{color:var(--txt)}
.big{font-size:14px;color:var(--txt)}
label{font-size:12px;color:var(--dim);display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.07em}
button{font:inherit;color:var(--txt);background:#1a2032;border:1px solid var(--line);
  border-radius:9px;padding:8px 10px;width:100%;cursor:pointer}
button:hover{border-color:#3d4866}
button:disabled{opacity:.4;cursor:default}
button.primary{background:linear-gradient(180deg,#2d64c7,#24509e);border-color:#3b74d6}
#players.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#players.grid2 .score{margin-bottom:0;padding:8px 8px 8px 10px;gap:5px}
#players.grid2 .name{font-size:11.5px;letter-spacing:.03em}
#players.grid2 .turn{font-size:9.5px;letter-spacing:.05em}
#players.grid2 .rt{gap:5px}
#players.grid2 .next{min-width:26px;height:26px;font-size:14px;padding:0 5px}
.rt{display:flex;align-items:center;gap:8px;flex-shrink:0}
.turn{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.opener{font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:5px;padding:1px 4px;margin-left:6px;vertical-align:middle}
.next{min-width:30px;height:30px;padding:0 7px;border-radius:8px;border:1.5px solid;background:#0f1420;
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;opacity:.45}
.next.now{opacity:1;box-shadow:0 0 0 2px var(--gold)}

/* ---- top bar ---- */
.topbar{display:flex;align-items:center;gap:8px;margin-bottom:14px;width:100%;max-width:560px;
  justify-content:space-between;flex-wrap:nowrap}
.navgrp{display:flex;gap:6px;flex-shrink:0}
.nav{width:auto;white-space:nowrap;padding:8px 11px;font-size:13px;border-radius:11px}
.sm{display:inline}
.lg{display:none}
#record{display:flex;align-items:center;gap:7px;flex-shrink:1;min-width:0;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:5px 7px 5px 9px}
.chips{display:flex;align-items:center;gap:9px;min-width:0}
.chip{display:flex;align-items:center;gap:4px;font-size:14px;font-weight:800;line-height:1}
.chip i{width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
.chip.gm{color:var(--dim);font-weight:600;font-size:11px;opacity:.75;
  border-left:1px solid var(--line);padding-left:9px;margin-left:1px}
.mini{width:auto;padding:2px 7px;font-size:14px;line-height:1.2;background:transparent;color:var(--dim)}

/* ---- setup overlay ---- */
#overlay{position:fixed;inset:0;background:rgba(6,8,14,.9);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;z-index:50;padding:20px;overflow:auto}
#overlay.hide{display:none}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px;
  width:100%;max-width:410px;text-align:center}
.card h2{margin:0 0 4px;font-size:22px;letter-spacing:.12em;text-transform:uppercase}
.card .sub2{color:var(--dim);font-size:13px;margin-bottom:18px}
.segs{display:flex;gap:8px;margin:4px 0 16px}
.seg{flex:1;padding:9px 6px;border-radius:10px;border:1px solid var(--line);background:#161c2c;
  font-size:13px;cursor:pointer;text-align:center}
.seg:hover{border-color:#3d4866}
.seg.sel{border-color:var(--gold);color:var(--gold)}
.seg small{display:block;font-size:10px;color:var(--dim);letter-spacing:.03em}
.seg.sel small{color:var(--gold);opacity:.75}
.fieldset.off{display:none}
.cardfoot{display:flex;align-items:stretch;gap:8px;margin-top:10px}
.cardfoot .foot{flex:1;display:flex;align-items:center;justify-content:center;
  color:var(--txt);font-size:13.5px;text-decoration:none;background:#1a2032;
  border:1px solid var(--line);border-radius:10px;padding:11px 10px;cursor:pointer;width:auto}
.cardfoot .foot:hover{border-color:#3d4866;background:#202840}
.cardfoot [hidden]{display:none}

/* ---- rules ---- */
details{font-size:13px;color:var(--dim);max-width:600px;margin-top:18px}
details p{line-height:1.65}
summary{cursor:pointer;color:var(--txt)}
table{border-collapse:collapse;font-size:12.5px;margin-top:8px}
td,th{border:1px solid var(--line);padding:5px 10px;text-align:left}
th{color:var(--txt);font-weight:600}

@media(min-width:620px){
  body{padding:18px 14px 40px}
  h1{font-size:26px} .sub{font-size:13px;margin-bottom:14px}
  .wrap{gap:22px;max-width:none}
  .panel{padding:14px 16px} .panel.board{padding:10px;width:auto;background:#070a10}
  #board{width:auto}
  .side{width:270px;gap:12px}
  .sm{display:none} .lg{display:inline}
  .nav{padding:9px 16px;font-size:14px}
  .chip{font-size:16px} .chips{gap:12px}
  #record{padding:7px 10px 7px 13px;gap:9px}
}

/* ---- remote play lobby ---- */
#netbox{position:fixed;inset:0;background:rgba(6,8,14,.92);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;z-index:60;padding:20px;overflow:auto}
.netcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px 22px;
  width:100%;max-width:380px;text-align:center}
.netttl{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.1em}
.netcode{font-size:30px;font-weight:800;letter-spacing:.06em;margin:8px 0 4px;color:var(--gold)}
.nethint{font-size:13px;color:var(--dim);line-height:1.5;margin:6px 0 14px}
.netbtn{padding:13px;font-size:15px}
.netnote{font-size:11.5px;color:var(--dim);margin-top:8px;word-break:break-all}
.netwait{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;
  font-size:13px;color:var(--dim)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--gold);animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
.knock{margin-top:16px;padding:14px;border:1px solid var(--gold);border-radius:12px;background:#241d0d}
.knocktxt{font-size:14px;font-weight:700;color:var(--gold);margin-bottom:10px}
.knockrow{display:flex;gap:8px}
.knockrow button{padding:10px}
.netlink{background:none;border:none;color:var(--dim);font-size:12.5px;margin-top:14px;
  width:auto;padding:6px}
.netlink:hover{color:var(--txt)}
.friend{display:block;width:100%;margin-top:10px;padding:11px;font-size:14px;border-radius:11px;
  background:linear-gradient(180deg,#2d8a5a,#1f6b44);border-color:#39a06b}
.remotebar{display:flex;align-items:center;justify-content:center;gap:8px;font-size:11.5px;
  color:var(--dim);margin-bottom:10px}
.remotebar b{color:var(--gold);letter-spacing:.05em}
.netalt{background:#1a2032;border:1px solid var(--line);margin-top:8px}
.netalt:hover{border-color:#3d4866}
#joincode{display:block;width:100%;max-width:260px;margin:0 auto;padding:12px;border-radius:10px;
  border:1px solid var(--line);background:#0f1420;color:var(--txt);
  font:700 17px ui-monospace,monospace;letter-spacing:.12em;text-align:center;text-transform:uppercase}
#joincode:focus{outline:none;border-color:var(--gold)}
.netexit{display:block;margin-top:10px;color:var(--dim);font-size:12.5px;text-decoration:none}
.netexit:hover{color:var(--txt)}
.netcard .err{margin:10px 0 2px}
.actbtn{margin-bottom:8px}
.actbtn:last-child{margin-bottom:0}

/* ---- share ----
   Deliberately quiet: a gold outline, not a shouting banner. It appears once,
   after a finished game or a finished lesson, and then stays put. */
#sharebox{width:100%;max-width:560px}
.sharecard{margin-top:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:11px 13px;display:flex;flex-wrap:wrap;gap:8px;
  align-items:center;justify-content:space-between}
.sharemsg{font-size:12.5px;color:var(--dim)}
.sharerow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:10px}
.sharebtn{border-color:var(--gold);color:var(--gold);background:#1a1a14}
.sharebtn:hover{border-color:var(--gold);background:#231f15}
.sharenote{font-size:11.5px;color:var(--dim);opacity:0;transition:opacity .2s}
.sharenote.on{opacity:1}
.shareurl{font:inherit;font-size:11.5px;color:var(--txt);background:#0d1220;
  border:1px solid var(--line);border-radius:8px;padding:5px 7px;width:230px;max-width:60vw}
@media (max-width:420px){
  .sharecard{flex-direction:column;align-items:stretch}
  .sharerow{margin-top:0}
  .sharebtn{width:100%}
}

/* ---- large folding displays (iPhone Duo and friends) ----------------------
 *
 * Unfolded, Safari hands a page roughly 939 x 1335 points — the 620px rule
 * above already fires, so the layout is not broken, it is just the LAPTOP
 * layout. On a laptop height is the scarce dimension and width is cheap. Here
 * both are generous and the board stays the size it was on a phone, floating
 * in the middle of a screen that cost two thousand dollars.
 *
 * So: grow the board until it runs out of height rather than width. Each game
 * publishes its own --board-ar where it already computes its viewBox, because
 * a 7x6 Connect Four board and a square Tic-Tac-Toe board run out of height at
 * different widths and the stylesheet has no business knowing which is which.
 */
@media (min-width:700px) and (min-height:860px){
  body{padding:22px 18px 48px}
  h1{font-size:30px}
  .sub{font-size:14px;margin-bottom:20px}
  .wrap{max-width:1180px;gap:30px;align-items:center}
  .panel.board{padding:14px;
    width:min(100%, calc((100vh - 300px) * var(--board-ar, 1)))}
  #board{width:100%;height:auto}
  .side{width:320px;gap:14px}
  .topbar{max-width:1180px}
}

/* Keep anything that must be read or tapped away from the crease. The segment
 * variables are a developer preview behind a flag in Safari 27.1, so this is a
 * bonus when it is switched on and costs nothing when it is not — the layout
 * above never depended on it. */
@supports (width: env(viewport-segment-width 0 0)){
  @media (min-width:700px){
    .wrap{gap:max(30px, calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0)))}
  }
}