:root{
    --bg:#f6f6f2;
    --grid:rgba(23,23,28,.035);
    --card:#ffffff;
    --card-2:#f2f2ec;
    --ink:#17171c;
    --muted:#75757c;
    --line:#e6e6e0;
    --blue:#2b4be6;
    --green:#0f8a3d;
    --red:#e23d3d;
    --red-dark:#c22f2f;
    --ui:"Outfit",system-ui,-apple-system,sans-serif;
    --sh-sm:0 1px 2px rgba(23,23,28,.05), 0 4px 12px rgba(23,23,28,.05);
    --sh:0 1px 2px rgba(23,23,28,.04), 0 12px 32px rgba(23,23,28,.08);
    --sh-lg:0 2px 4px rgba(23,23,28,.05), 0 20px 48px rgba(23,23,28,.12);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{color-scheme:light}
  body{
    background:
      linear-gradient(var(--grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--grid) 1px, transparent 1px),
      var(--bg);
    background-size:32px 32px, 32px 32px, auto;
    color:var(--ink);
    font-family:var(--ui);
    font-size:16px;
    line-height:1.5;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:28px 16px 64px;
    -webkit-font-smoothing:antialiased;
  }
  [hidden]{display:none !important}

  /* ===== header HUD ===== */
  .hud{
    width:min(520px,100%);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--sh-sm);
    padding:12px 18px;
    margin-bottom:32px;
  }
  .counter{text-align:center}
  .led{
    font-family:var(--ui);
    font-weight:700;
    font-variant-numeric:tabular-nums;
    font-size:20px;
    line-height:1.3;
    color:#fff;
    background:var(--ink);
    border-radius:10px;
    padding:4px 12px;
    min-width:58px;
    letter-spacing:.06em;
  }
  .led-label{
    display:block;
    font-size:10px;
    font-weight:600;
    color:var(--muted);
    margin-top:5px;
    text-transform:uppercase;
    letter-spacing:.14em;
  }
  #smiley{
    width:50px;height:50px;
    border:1px solid var(--line);
    border-radius:50%;
    background:var(--card-2);
    font-size:26px;line-height:1;
    cursor:pointer;
    box-shadow:var(--sh-sm);
    transition:transform .12s ease, box-shadow .12s ease;
  }
  #smiley:hover{transform:translateY(-2px) scale(1.05);box-shadow:var(--sh)}
  #smiley:active{transform:scale(.94);box-shadow:none}

  /* ===== screens ===== */
  .screen{
    width:min(520px,100%);
    display:none;
    flex-direction:column;
    align-items:center;
  }
  .screen.on{display:flex}

  .eyebrow{
    font-size:12px;
    font-weight:700;
    color:var(--red);
    letter-spacing:.2em;
    text-transform:uppercase;
    text-align:center;
  }
  h1.big{
    font-weight:800;
    font-size:clamp(42px,11vw,58px);
    line-height:1.05;
    letter-spacing:-.03em;
    text-align:center;
    margin:8px 0 6px;
  }
  h1.big em{font-style:normal;color:var(--red)}
  h2.head{
    font-weight:700;
    font-size:clamp(24px,6.5vw,30px);
    letter-spacing:-.02em;
    text-align:center;
    text-wrap:balance;
    margin-top:8px;
  }
  .sub{color:var(--muted);text-align:center;max-width:44ch;text-wrap:balance;margin-top:8px}

  .panel{
    width:100%;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:var(--sh);
    padding:20px;
    margin-top:22px;
  }
  .rule{display:flex;gap:14px;align-items:baseline;padding:9px 2px}
  .rule + .rule{border-top:1px solid var(--card-2)}
  .rule b{
    font-weight:800;font-size:15px;min-width:22px;text-align:center;
    font-variant-numeric:tabular-nums;
  }
  .rule:nth-child(1) b{color:var(--blue)}
  .rule:nth-child(2) b{color:var(--green)}
  .rule:nth-child(3) b{color:var(--red)}
  .rule span{color:#3a3a40;font-size:15px}

  /* buttons */
  .btn{
    font-family:var(--ui);
    font-size:16px;
    font-weight:600;
    color:var(--ink);
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:var(--sh-sm);
    padding:13px 28px;
    cursor:pointer;
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  }
  .btn:hover{transform:translateY(-2px);box-shadow:var(--sh)}
  .btn:active{transform:scale(.97);box-shadow:none}
  .btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
  .btn:disabled{color:#b9b9bd;background:var(--card-2);box-shadow:none;cursor:not-allowed;transform:none}
  .btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}
  .btn.danger{background:var(--red);border-color:var(--red-dark);color:#fff}
  .btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}
  .btn.ghost:hover{transform:none;color:var(--ink);background:var(--card)}
  .actions{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center}

  /* setup */
  .players-wrap{width:100%;display:flex;flex-direction:column;gap:8px}
  .player-row{display:flex;align-items:center;gap:10px}
  .player-row .num{
    font-weight:800;font-size:13px;min-width:22px;text-align:center;color:var(--blue);
    font-variant-numeric:tabular-nums;
  }
  .player-row input{
    flex:1;min-width:0;
    font-family:var(--ui);font-size:16px;font-weight:500;
    padding:12px 14px;
    background:var(--card-2);color:var(--ink);
    border:1px solid transparent;
    border-radius:12px;
    outline:none;
    transition:border-color .12s, background .12s;
  }
  .player-row input:focus{background:#fff;border-color:var(--blue)}
  .player-row input::placeholder{color:#b9b9bd}
  .player-row .rm{
    width:34px;height:34px;flex:0 0 auto;
    border:0;border-radius:10px;
    background:transparent;font-size:17px;font-weight:600;
    cursor:pointer;line-height:1;color:var(--muted);
    transition:background .12s, color .12s;
  }
  .player-row .rm:hover{background:#fdeceb;color:var(--red)}
  .opt-row{width:100%;margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
  .opt-row .lbl{font-weight:700}
  .opt-row .hint{display:block;font-weight:400;font-size:13px;color:var(--muted)}
  .seg{display:flex;gap:6px}
  .seg button{
    width:44px;height:38px;
    font-family:var(--ui);font-size:15px;font-weight:700;
    background:var(--card-2);color:var(--ink);
    border:1px solid transparent;border-radius:11px;
    cursor:pointer;
    transition:background .12s, color .12s;
  }
  .seg button.sel{background:var(--ink);color:#fff}
  .seg button:disabled{color:#b9b9bd;cursor:not-allowed}
  .err{min-height:20px;margin-top:12px;font-size:14px;font-weight:600;color:var(--red);text-align:center}

  /* pass */
  .counter-line{
    font-weight:600;font-size:14px;color:var(--muted);
    font-variant-numeric:tabular-nums;letter-spacing:.08em;
  }
  .pass-name{
    font-weight:800;
    font-size:clamp(36px,11vw,54px);
    letter-spacing:-.03em;
    text-align:center;
    margin:10px 0 2px;
    word-break:break-word;
  }

  /* tile */
  .tile-zone{margin:24px 0 4px;user-select:none;-webkit-user-select:none}
  .tile{
    width:min(320px,82vw);
    height:200px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:var(--sh-lg);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  }
  .tile .q{
    font-weight:800;
    font-size:64px;color:#d9d9d3;
  }
  .tile .hint{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
  .tile.open{
    transform:scale(.985);
    box-shadow:inset 0 2px 10px rgba(23,23,28,.08);
    background:var(--card-2);
  }
  .tile.open .q,.tile.open .hint{display:none}
  .tile .word{
    display:none;
    font-weight:800;
    font-size:clamp(24px,7vw,32px);
    letter-spacing:-.02em;
    color:var(--ink);
    text-align:center;
    padding:0 18px;
    text-wrap:balance;
    line-height:1.25;
  }
  .tile .word-label{
    display:none;
    font-size:11px;font-weight:700;color:var(--red);
    text-transform:uppercase;letter-spacing:.16em;
  }
  .tile.open .word,.tile.open .word-label{display:block}
  .after-tile{margin-top:22px;visibility:hidden}
  .after-tile.show{visibility:visible}

  /* starter */
  .q-text{
    font-size:22px;font-weight:700;
    letter-spacing:-.01em;
    text-align:center;text-wrap:balance;
    margin-top:12px;max-width:30ch;
    line-height:1.3;
  }
  .led-answer{
    font-weight:800;
    font-variant-numeric:tabular-nums;
    font-size:clamp(40px,11vw,60px);
    letter-spacing:-.02em;
    line-height:1;
    color:#fff;
    background:var(--ink);
    border-radius:18px;
    box-shadow:var(--sh);
    padding:18px 30px;
    margin-top:20px;
  }

  /* pick grids */
  .pick-grid{
    width:100%;
    margin-top:18px;
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
    gap:12px;
  }
  .cell{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:var(--sh-sm);
    padding:15px 8px;
    text-align:center;
    font-family:var(--ui);font-size:15px;font-weight:600;color:var(--ink);
    cursor:pointer;
    overflow-wrap:anywhere;
    transition:transform .12s ease, box-shadow .12s ease, background .12s, border-color .12s;
  }
  .cell:hover{transform:translateY(-2px);box-shadow:var(--sh)}
  .cell:active{transform:scale(.97);box-shadow:none}
  .cell .ico{display:block;font-size:20px;margin-bottom:6px}
  .cell.sel{
    background:#fdeceb;
    border-color:var(--red);
    box-shadow:none;
    color:var(--red-dark);
  }

  /* debate order */
  .order-list{
    width:100%;margin-top:18px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--sh);
    padding:6px 18px;
  }
  .order-item{display:flex;align-items:center;gap:14px;padding:12px 2px}
  .order-item + .order-item{border-top:1px solid var(--card-2)}
  .order-item .pos{
    font-weight:800;font-size:15px;min-width:22px;text-align:center;
    font-variant-numeric:tabular-nums;
  }
  .pos.c1{color:#2b4be6}.pos.c2{color:#0f8a3d}.pos.c3{color:#e23d3d}.pos.c4{color:#5b2ab5}
  .pos.c5{color:#a05a00}.pos.c6{color:#0b7e7e}.pos.c7{color:#17171c}.pos.c8{color:#75757c}
  .order-item .nm{font-weight:600;font-size:17px}
  .order-item .tag{
    margin-left:auto;
    font-size:11px;font-weight:700;
    color:#fff;background:var(--red);
    border-radius:99px;padding:3px 11px;
    text-transform:uppercase;letter-spacing:.1em;
  }

  /* verdict */
  .verdict-word{
    font-weight:800;
    font-size:clamp(34px,9vw,48px);
    letter-spacing:-.02em;
    text-align:center;
    margin:14px 0 4px;
  }
  .verdict-word.bad{color:var(--red)}
  .verdict-word.good{color:var(--green)}
  .boom{font-size:44px;margin-top:4px}
  .shake{animation:shakeX .4s}
  @keyframes shakeX{
    20%{transform:translateX(-6px)}40%{transform:translateX(6px)}
    60%{transform:translateX(-4px)}80%{transform:translateX(4px)}
  }

  /* end */
  .word-reveal{width:100%;margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .wr{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--sh-sm);
    padding:16px 12px;
    text-align:center;
  }
  .wr .t{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em}
  .wr .w{font-weight:800;font-size:21px;letter-spacing:-.01em;display:block;margin-top:6px}
  .wr.civ .t{color:var(--green)}
  .wr.civ .w{color:var(--green)}
  .wr.imp .t{color:var(--red)}
  .wr.imp .w{color:var(--red)}
  .imp-names{margin-top:14px;text-align:center;color:var(--muted)}
  .imp-names strong{color:var(--red)}

  @media (max-width:440px){
    .word-reveal{grid-template-columns:1fr}
    .led{font-size:17px;min-width:52px}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation-duration:.001s !important;transition-duration:.001s !important}
  }

/* ===== extras multi ===== */
.join-url{
  font-variant-numeric:tabular-nums;
  font-weight:700;font-size:clamp(19px,4.5vw,24px);
  background:var(--ink);color:#fff;
  border-radius:14px;padding:12px 20px;
  margin-top:16px;letter-spacing:.02em;
  user-select:all;-webkit-user-select:all;
}
.roster{width:100%;margin-top:18px;display:flex;flex-direction:column;gap:8px}
.roster-item{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--sh-sm);
  padding:12px 16px;font-weight:600;
}
.roster-item .st{margin-left:auto;font-size:13px;font-weight:600;color:var(--muted)}
.roster-item.ok .st{color:var(--green)}
.est-table{width:100%;margin-top:18px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--sh);padding:6px 18px}
.est-row{display:flex;align-items:center;gap:12px;padding:10px 2px}
.est-row + .est-row{border-top:1px solid var(--card-2)}
.est-row .nm{font-weight:600}
.est-row .val{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.est-row.far{color:var(--red)}
.est-row.far .val{color:var(--red)}
.big-input{
  width:100%;margin-top:18px;
  font-family:var(--ui);font-size:26px;font-weight:700;text-align:center;
  font-variant-numeric:tabular-nums;
  padding:16px;background:#fff;color:var(--ink);
  border:2px solid var(--ink);border-radius:16px;outline:none;
}
.pulse-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--green);
  margin-right:7px;animation:pulseDot 1.4s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:.4}50%{opacity:1}}