* { margin:0; padding:0; box-sizing:border-box; }
  body {
    background:#0a0f1a; color:#c8d2dc;
    font-family:'Segoe UI', system-ui, sans-serif;
    display:flex; flex-direction:column; align-items:center;
    min-height:100vh; padding:16.8px 14.4px;
  }
  h1 { font-size:20.4px; font-weight:600; letter-spacing:.6px; color:#e8eef4; margin-bottom:2.4px; }
  .game-heading { display:grid; grid-template-columns:38px minmax(0,1fr) 38px; align-items:center; width:100%; max-width:1056px; }
  .game-heading { gap:12px; margin-bottom:12px; }
  .game-brand { grid-column:2; text-align:center; }
  .game-brand p { font-size:12px; letter-spacing:1px; color:#c8d2dc; }
  @media (max-width:560px) {
    .game-heading { grid-template-columns:38px minmax(0,1fr) 38px; gap:8px; }
    .game-brand p { font-size:9px; letter-spacing:.3px; }
  }
  .marketing-home { grid-column:3; display:inline-flex; align-items:center; justify-content:center; width:38px; min-height:44px; color:#fff; background:transparent; border:0; }
  .marketing-home:hover, .marketing-home:focus-visible { color:#fff; background:transparent; outline:none; }
  .marketing-home svg { width:21px; height:21px; max-height:none; }
  .sub { font-size:14.4px; color:#7a8694; margin-bottom:12px; }
  .sub b { color:#4de8e0; font-weight:600; }
  .controls { display:flex; gap:9.6px; flex-wrap:wrap; justify-content:center; margin-bottom:12px; }
  .controls button {
    background:#141c2a; color:#c8d2dc; border:1px solid #2a3648;
    padding:7.2px 14.4px; border-radius:9.6px; font-size:14.4px; cursor:pointer;
    transition:all .18s ease;
  }
  .controls button:hover { border-color:#4de8e0; color:#fff; }
  .controls button.on { background:#0e3a3c; border-color:#4de8e0; color:#4de8e0; }
  .main { display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; min-width:0; }
  .board-wrap { width:100%; min-width:0; overflow:auto; overscroll-behavior:contain; }
  #svg { width:var(--board-size, min(90vw, 70vh)); height:var(--board-size, min(90vw, 70vh)); max-height:none; max-width:none; margin-inline:auto; }
  .board-zoom { display:flex; gap:6px; flex:none; }
  .board-zoom button { width:36px; height:32px; background:#141c2a; color:#c8d2dc; border:1px solid #2a3648; border-radius:8px; font:22px/1 system-ui,sans-serif; cursor:pointer; }
  .board-zoom button:hover { border-color:#4de8e0; }
  .board-zoom button:focus-visible { outline:2px solid #4de8e0; outline-offset:2px; }
  .board-zoom button:disabled { opacity:.4; cursor:default; }
  svg { width:100%; height:auto; display:block; max-height:calc(100vh - 230px); }
  #board { transition: transform .6s ease; }
  .sq { cursor:pointer; transition: filter .12s ease; }
  .sq:hover { filter:brightness(1.35); }
  .sq.sel { stroke:#4de8e0 !important; stroke-width:3.5; }
  .sqtext { pointer-events:none; font-size:10.5px; font-family:'Consolas',monospace; opacity:.42; }
  .piece { cursor:grab; }
  .piece .hit { fill:transparent; stroke:none; }
  .piece .ring { fill:none; stroke:#4de8e0; stroke-width:2.5; opacity:0; }
  .piece.sel .ring { opacity:1; }
  .tray {
    flex:0 0 177.6px; background:#101826; border:1px solid #24324a; border-radius:12px;
    padding:12px 12px 14.4px; display:flex; flex-direction:column; gap:9.6px;
  }
  #tray[hidden] { display:none; }
  .tray h3 { font-size:13.2px; color:#7a8694; font-weight:600; text-transform:uppercase; letter-spacing:1.2px; }
  .tray .grp { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .tray button {
    background:#182438; border:1.8px solid #2a3648; border-radius:9.6px; cursor:pointer;
    padding:2.4px 0 0; display:flex; align-items:center; justify-content:center; transition:all .15s ease;
  }
  .tray button:hover { border-color:#4de8e0; }
  .tray button.armed { border-color:#4de8e0; background:#0e3a3c; box-shadow:0 0 8px rgba(77,232,224,.35); }
  .tray button svg { display:block; }
  .tray .rowlbl { font-size:12px; color:#5c6b7d; margin:2.4px 0 -2.4px; }
  .tray .clr {
    background:#2a1520; border:1px solid #5c2a3a; color:#e890a4; border-radius:8.4px;
    font-size:13.2px; padding:6px 0; cursor:pointer; width:100%;
  }
  .tray .clr:hover { border-color:#ff6384; color:#ffc2d0; }
  .tray .cnt { font-size:12.6px; color:#7a8694; text-align:center; }
  .tray .cnt b { color:#4de8e0; }
  .hint { font-size:12px; color:#5c6b7d; line-height:1.5; }
  .status {
    margin-top:12px; background:#141c2a; border:1px solid #2a3648; border-radius:9.6px;
    padding:10.8px 19.2px; font-size:15px; width:100%; max-width:1056px;
    display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  }
  .status .selinfo { color:#4de8e0; font-weight:600; }
  .status { display:none; }
  .legend {
    margin-top:9.6px; display:flex; gap:14.4px; flex-wrap:wrap; justify-content:center;
    font-size:13.2px; color:#7a8694;
  }
  .legend span { display:inline-flex; align-items:center; gap:6px; }
  .legend .dot { width:12px; height:12px; border-radius:2.4px; display:inline-block; }
  .zoneC { background:rgba(77,232,224,.45); }
  .zoneN { background:rgba(255,159,67,.55); }
  .zoneS { background:rgba(255,99,132,.55); }
  .zoneE { background:rgba(139,195,74,.55); }
  .zoneW { background:rgba(104,162,235,.55); }
  .legal-dot { fill:#ff3b3b; pointer-events:none; opacity:0; }
  .legal-dot.on { opacity:1; }
  .sq.dimwing { filter:brightness(.55); }
  .piece.front-a-white .art { filter:url(#front-a-white-contour); }
  .piece.front-a-black .art { filter:url(#front-a-black-contour); }
  .piece.front-b-white .art { filter:url(#front-b-white-contour); }
  .piece.front-b-black .art { filter:url(#front-b-black-contour); }
  .piece.livefront .art-shell { filter:url(#active-piece-contour); }
  .piece.presentation-ghost { pointer-events:none; }
  .piece.move-ghost { pointer-events:none; }
  body.move-presenting #svg { cursor:wait; }
  .piece.elimination-fall .art-shell {
    animation:front-collapse 180ms cubic-bezier(.42,0,.78,.2) forwards;
    transform-box:fill-box; transform-origin:center;
  }
  @keyframes front-collapse {
    0% { opacity:1; transform:scale(1); }
    55% { opacity:.68; transform:scale(.84) rotate(4deg); }
    100% { opacity:0; transform:scale(.36) translateY(5px); }
  }
  .front-indicator {
    fill:rgba(255,59,59,.10); stroke:#ff3b3b; stroke-width:6; stroke-linejoin:round;
    opacity:0; pointer-events:none; vector-effect:non-scaling-stroke;
    filter:drop-shadow(0 0 5px rgba(255,59,59,.75));
  }
  .front-indicator.active { opacity:1; }
  body.friend-game .front-indicator.active { animation:front-turn-blink 1s steps(2,end) infinite; }
  @keyframes front-turn-blink { 0%,49% { opacity:1; } 50%,100% { opacity:.18; } }
  #teachbar {
    width:100%; max-width:1056px; background:#0e3a3c; border:1px solid #4de8e0;
    color:#e8eef4; border-radius:9.6px; padding:12px 16.8px; font-size:16.2px;
    margin-bottom:12px; line-height:1.45;
  }
  #onboard {
    width:100%; max-width:1056px; color:#9aa6b4; font-size:15.6px; line-height:1.5; margin-bottom:9.6px; text-align:center;
  }
  #toast {
    position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
    background:#182438; border:1px solid #4de8e0; color:#e8eef4; padding:10px 16px;
    border-radius:8px; opacity:0; pointer-events:none; transition:all .25s; z-index:20;
  }
  #toast.on { opacity:1; transform:translateX(-50%) translateY(0); }
  #sharebox {
    display:none; width:100%; max-width:1056px; background:#101826; border:1px solid #2a3648;
    border-radius:9.6px; padding:9.6px 12px; margin-bottom:9.6px; gap:9.6px; align-items:center; flex-wrap:wrap;
  }
  #sharebox.on { display:flex; }
  #sharebox [data-whatsapp] { display:inline-flex; align-items:center; min-height:40px; padding:8px 12px; border-radius:6px; background:#0e3a3c; color:#fff; border:1px solid #4de8e0; text-decoration:none; font-weight:600; }
  .legend { display:none; }
  #sharebox input { flex:1 1 220px; min-width:0; background:#0a0f1a; border:1px solid #2a3648; color:#c8d2dc; padding:6px 8px; border-radius:6px; }
  #sharebox button { background:#141c2a; border:1px solid #4de8e0; color:#4de8e0; padding:6px 10px; border-radius:6px; cursor:pointer; }
  #endoverlay {
    display:none; position:fixed; inset:0; background:rgba(3,7,13,.62); align-items:center; justify-content:center; z-index:30;
  }
  #endoverlay.on { display:flex; }
  #endoverlay .card {
    min-width:min(390px,calc(100vw - 32px)); background:#101826; border:1px solid #4de8e0;
    border-radius:14px; padding:26px; text-align:center; box-shadow:0 18px 55px rgba(0,0,0,.46);
  }
  #endoverlay.white-win .card { background:#e8e4d9; border-color:#fff; color:#111722; }
  #endoverlay.black-win .card { background:#0b1018; border-color:#8293a8; color:#f2f5f8; }
  #endoverlay .endmsg { font-size:25px; font-weight:750; letter-spacing:1.4px; }
  #endoverlay .endactions { display:flex; flex-direction:column; gap:10px; align-items:stretch; margin-top:20px; }
  #endoverlay button { border-radius:8px; cursor:pointer; font-weight:700; }
  #endoverlay .endprimary {
    min-width:125px; padding:11px 16px; border:1px solid #4de8e0; background:#0e3a3c; color:#f5ffff;
  }
  #endoverlay.white-win .endprimary { background:#192536; border-color:#192536; color:#fff; }
  #endoverlay .endhome {
    min-width:125px; padding:9px 16px; border:1px solid #526174; background:transparent;
    color:#aab6c5; font-weight:600;
  }
  #endoverlay.white-win .endhome { border-color:#748195; color:#344255; }
  #chooser {
    display:none; position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
    background:#101826; border:1px solid #4de8e0; border-radius:10px; padding:10px; z-index:25; gap:8px;
  }
  #chooser.on { display:flex; flex-direction:column; }
  #chooser button { background:#182438; border:1px solid #2a3648; color:#e8eef4; padding:8px 12px; border-radius:6px; cursor:pointer; }
  #deadbanner {
    display:none; width:100%; max-width:1056px; background:#2a1520; border:1px solid #ff6384;
    color:#ffc2d0; border-radius:9.6px; padding:12px 16.8px; margin-bottom:9.6px;
  }
  #deadbanner.on { display:block; }
  #deadbanner a { color:#4de8e0; }
  .actions { display:flex; gap:9.6px; flex-wrap:wrap; justify-content:center; margin-top:9.6px; }
  .actions button {
    background:#141c2a; color:#c8d2dc; border:1px solid #2a3648;
    padding:7.2px 14.4px; border-radius:9.6px; font-size:14.4px; cursor:pointer;
  }
  .actions .home-control { border-color:#526174; color:#aab6c5; }
  .actions .home-control:hover { border-color:#4de8e0; color:#fff; }
  body.room-loading .main, body.room-loading .actions,
  body.pregame .main, body.pregame .actions { display:none; }
  body.pregame #sharebox { margin-top:32px; max-width:620px; padding:24px; }
  #friend-status { flex-basis:100%; font-size:18px; line-height:1.5; }
  body:not(.pregame) #sharebox { display:none; }