:root {
      color-scheme: dark;
      --bg: #11131a;
      --panel: rgba(25, 28, 39, 0.86);
      --panel-strong: #1c202d;
      --line: rgba(255,255,255,0.11);
      --text: #f5f1e9;
      --muted: #a9adbc;
      --gold: #f2bf57;
      --orange: #ff8a4c;
      --red: #ff5b65;
      --green: #57d68d;
      --blue: #65a8ff;
      --shadow: 0 24px 70px rgba(0,0,0,0.38);
      --radius: 24px;
      --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --canvas-height: clamp(430px, 58vh, 720px);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font);
      color: var(--text);
      background:
        radial-gradient(circle at 12% 10%, rgba(242,191,87,0.16), transparent 30%),
        radial-gradient(circle at 88% 15%, rgba(101,168,255,0.16), transparent 28%),
        radial-gradient(circle at 50% 90%, rgba(255,91,101,0.12), transparent 35%),
        linear-gradient(140deg, #0c0e13 0%, #121520 55%, #0b0d12 100%);
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.21;
      background-image:
        linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: radial-gradient(circle at center, black, transparent 83%);
    }

    .app {
      width: min(1560px, calc(100vw - 32px));
      margin: 0 auto;
      padding: 22px 0 34px;
      display: grid;
      grid-template-columns: 320px minmax(560px, 1fr) 330px;
      gap: 18px;
    }

    header {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 18px 20px;
      border: 1px solid var(--line);
      background: rgba(20, 23, 31, 0.72);
      backdrop-filter: blur(18px);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .logo {
      width: 54px;
      height: 54px;
      display: grid;
      place-items: center;
      border-radius: 18px;
      background: linear-gradient(135deg, #f2bf57, #ff7a59 55%, #b85cff);
      box-shadow: 0 12px 28px rgba(255,138,76,0.22);
      font-size: 28px;
      transform: rotate(-5deg);
    }

    h1 {
      margin: 0;
      font-size: clamp(24px, 3vw, 38px);
      line-height: 1;
      letter-spacing: -0.055em;
    }

    .subtitle {
      margin-top: 6px;
      color: var(--muted);
      font-size: 14px;
    }

    .round-pill {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .pill {
      padding: 10px 13px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      color: var(--muted);
      font-size: 14px;
      white-space: nowrap;
    }

    .pill strong {
      color: var(--text);
      font-weight: 800;
    }

    .card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .card-inner { padding: 18px; }

    .section-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
      gap: 12px;
    }

    h2, h3 {
      margin: 0;
      letter-spacing: -0.035em;
    }

    h2 { font-size: 19px; }
    h3 { font-size: 16px; }

    .muted {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.4;
    }

    .sidebar {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    label {
      display: block;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin: 12px 0 7px;
    }

    input:not([type="checkbox"]), select, textarea {
      width: 100%;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.07);
      color: var(--text);
      border-radius: 15px;
      padding: 12px 13px;
      outline: none;
      font: inherit;
    }

    textarea { min-height: 115px; resize: vertical; }

    input:not([type="checkbox"]):focus, select:focus, textarea:focus {
      border-color: rgba(242,191,87,0.75);
      box-shadow: 0 0 0 4px rgba(242,191,87,0.12);
    }

    input[type="checkbox"] {
      width: 18px;
      height: 18px;
      margin: 0;
      flex: 0 0 auto;
      accent-color: var(--gold);
      cursor: pointer;
    }

    .public-room-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      margin: 12px 0 7px;
      text-transform: none;
      letter-spacing: 0;
      color: var(--text);
      font-size: 13px;
      font-weight: 800;
    }

    .public-rooms {
      margin-top: 10px;
      padding: 11px;
      border-radius: 14px;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--line);
    }
    .public-rooms-head {
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 8px;
    }
    .public-rooms-items { display: grid; gap: 6px; max-height: 180px; overflow-y: auto; }
    .public-rooms-empty { font-size: 13px; padding: 4px 2px; }
    .public-room-row {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 9px 11px;
      border-radius: 12px;
      background: rgba(255,255,255,0.08);
      border: 1px solid var(--line);
      color: var(--text);
      font-weight: 700;
      text-align: left;
      cursor: pointer;
    }
    .public-room-row:hover {
      border-color: rgba(242,191,87,.55);
      background: rgba(242,191,87,.1);
    }
    .public-room-row span { color: var(--muted); font-size: 13px; font-weight: 700; }
    .public-room-count { color: var(--gold) !important; }

    button {
      border: 0;
      border-radius: 16px;
      padding: 12px 14px;
      color: #16120a;
      background: linear-gradient(135deg, var(--gold), #ff9e57);
      font-weight: 900;
      cursor: pointer;
      box-shadow: 0 12px 22px rgba(255,138,76,0.18);
      transition: transform .16s ease, filter .16s ease, opacity .16s ease;
      font: inherit;
    }

    button:hover { transform: translateY(-1px); filter: brightness(1.04); }
    button:active { transform: translateY(1px) scale(0.99); }
    button.secondary {
      color: var(--text);
      background: rgba(255,255,255,0.08);
      border: 1px solid var(--line);
      box-shadow: none;
    }
    button.danger {
      color: white;
      background: linear-gradient(135deg, #ff5b65, #cc3348);
    }
    button.good {
      color: #07180f;
      background: linear-gradient(135deg, #57d68d, #9cf06d);
    }
    button:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
    }

    .button-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 12px;
    }

    .button-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    .game-table {
      display: grid;
      grid-template-rows: auto 1fr auto;
      min-height: 760px;
    }

    .table-top {
      padding: 16px 18px;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 14px;
      align-items: center;
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,0.035);
    }

    .current-team {
      display: flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
    }

    .team-dot {
      width: 16px;
      height: 16px;
      border-radius: 999px;
      background: var(--team-color, var(--gold));
      box-shadow: 0 0 0 6px color-mix(in srgb, var(--team-color, var(--gold)) 18%, transparent);
      flex: 0 0 auto;
    }

    .current-team strong {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 18px;
    }

    .timer-wrap {
      display: grid;
      place-items: center;
      position: relative;
    }

    .timer {
      width: 132px;
      height: 132px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: conic-gradient(var(--gold) var(--timer-deg, 360deg), rgba(255,255,255,0.1) 0deg);
      box-shadow: inset 0 0 0 1px var(--line), 0 16px 40px rgba(0,0,0,0.3);
    }

    .timer::before {
      content: "";
      position: absolute;
      width: 104px;
      height: 104px;
      border-radius: inherit;
      background: #151824;
      border: 1px solid var(--line);
    }

    .timer span {
      position: relative;
      font-size: 35px;
      font-weight: 950;
      letter-spacing: -0.06em;
    }

    .word-card {
      justify-self: end;
      width: min(100%, 260px);
      padding: 14px;
      border-radius: 20px;
      background: linear-gradient(135deg, rgba(242,191,87,0.17), rgba(255,255,255,0.06));
      border: 1px solid rgba(242,191,87,0.27);
      text-align: right;
      cursor: pointer;
      user-select: none;
    }

    .word-card .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 900; }
    .word-card .word { font-size: clamp(20px, 2vw, 30px); font-weight: 950; letter-spacing: -0.04em; margin-top: 4px; }
    .word-card.hidden .word { filter: blur(9px); opacity: 0.75; }

    .word-options {
      display: grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin: 18px 0 6px;
    }

    .word-option {
      width: 100%;
      padding: 18px 16px;
      border-radius: 20px;
      color: var(--text);
      background: rgba(255,255,255,0.075);
      border: 1px solid var(--line);
      box-shadow: none;
      font-size: clamp(22px, 3vw, 34px);
      font-weight: 1000;
      letter-spacing: -0.055em;
      text-align: center;
    }

    .word-option:hover {
      background: rgba(242,191,87,0.13);
      border-color: rgba(242,191,87,0.38);
    }

    .word-option.active {
      color: #160f05;
      background: linear-gradient(135deg, var(--gold), #ff9e57);
      border-color: rgba(255,255,255,0.26);
      box-shadow: 0 15px 35px rgba(255,138,76,0.2);
    }

    .canvas-stage {
      position: relative;
      padding: 18px;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 14px;
      align-items: stretch;
      background:
        linear-gradient(45deg, rgba(255,255,255,0.018) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255,255,255,0.018) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.018) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.018) 75%);
      background-size: 28px 28px;
      background-position: 0 0, 0 14px, 14px -14px, -14px 0px;
    }


    .round-guesses {
      min-height: 260px;
      height: clamp(260px, 38vh, 520px);
      border-radius: 24px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.055);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    }


    .guesses-card-inner {
      padding: 0;
    }

    .guesses-card .round-guesses {
      border: 0;
      border-radius: var(--radius);
      background: transparent;
      box-shadow: none;
    }

    .guesses-card .round-guesses-head {
      padding: 18px 18px 12px;
    }

    .guesses-card .round-guesses-list {
      padding: 12px 18px 18px;
    }

    .round-guesses-head {
      padding: 14px 14px 10px;
      border-bottom: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .round-guesses-head strong {
      font-size: 15px;
      letter-spacing: -0.02em;
    }

    .round-guesses-list {
      padding: 10px;
      overflow: auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 0;
    }

    .round-guess-entry {
      display: grid;
      grid-template-columns: minmax(0, .78fr) auto minmax(0, 1fr);
      gap: 6px;
      align-items: baseline;
      padding: 9px 10px;
      border-radius: 14px;
      background: rgba(255,255,255,0.065);
      border: 1px solid rgba(255,255,255,0.08);
      font-size: 13px;
      line-height: 1.25;
    }

    .round-guess-entry strong,
    .round-guess-entry em {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .round-guess-entry strong { color: var(--text); font-style: normal; }
    .round-guess-entry span { color: var(--muted); }
    .round-guess-entry em { color: var(--gold); font-style: normal; font-weight: 850; }

    .round-guess-empty {
      color: var(--muted);
      font-size: 13px;
      padding: 10px;
      text-align: center;
    }

    .canvas-shell {
      position: relative;
      height: var(--canvas-height);
      min-height: 360px;
      border-radius: 28px;
      overflow: hidden;
      background: #fbf7ec;
      border: 12px solid #2c2032;
      box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35), 0 28px 60px rgba(0,0,0,0.34);
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
      min-height: 0;
      touch-action: none;
      cursor: crosshair;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,236,170,0.12), transparent 34%),
        #fbf7ec;
    }

    .hint-overlay {
      position: absolute;
      left: 22px;
      bottom: 18px;
      pointer-events: none;
      color: rgba(30, 24, 22, 0.32);
      font-weight: 900;
      letter-spacing: -0.04em;
      font-size: clamp(22px, 4vw, 58px);
      transform: rotate(-2deg);
    }

    .toolbar {
      padding: 14px 18px 18px;
      border-top: 1px solid var(--line);
      display: grid;
      grid-template-columns: minmax(220px, 1fr) auto auto auto;
      gap: 12px;
      align-items: center;
      background: rgba(255,255,255,0.035);
    }

    .tool-group {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }

    .swatch {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      border: 2px solid rgba(255,255,255,0.22);
      cursor: pointer;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12);
    }

    .swatch.active {
      outline: 3px solid var(--gold);
      outline-offset: 2px;
    }

    .brush-size {
      display: flex;
      gap: 10px;
      align-items: center;
      min-width: 190px;
    }

    input[type="range"] { padding: 0; accent-color: var(--gold); }

    .team-list { display: flex; flex-direction: column; gap: 10px; }

    .team-card {
      display: grid;
      grid-template-columns: 13px 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 12px;
      border-radius: 17px;
      background: rgba(255,255,255,0.06);
      border: 1px solid var(--line);
    }

    .team-card.active {
      background: color-mix(in srgb, var(--team-color) 18%, rgba(255,255,255,0.07));
      border-color: color-mix(in srgb, var(--team-color) 45%, rgba(255,255,255,0.16));
    }

    .team-color-dot {
      width: 13px;
      height: 42px;
      border-radius: 999px;
      background: var(--team-color);
    }

    .team-name {
      font-weight: 900;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .score {
      min-width: 42px;
      text-align: center;
      padding: 9px 11px;
      background: rgba(0,0,0,0.22);
      border-radius: 13px;
      font-size: 22px;
      font-weight: 950;
      letter-spacing: -0.05em;
    }

    .mini-actions {
      display: flex;
      gap: 7px;
      margin-top: 8px;
    }

    .mini-actions button {
      padding: 7px 9px;
      font-size: 12px;
      border-radius: 11px;
      box-shadow: none;
    }

    .log {
      display: flex;
      flex-direction: column;
      gap: 9px;
      max-height: 270px;
      overflow: auto;
      padding-right: 4px;
    }

    .log-entry {
      padding: 10px 11px;
      border-radius: 14px;
      background: rgba(255,255,255,0.055);
      border: 1px solid rgba(255,255,255,0.08);
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .log-entry strong { color: var(--text); }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      display: none;
      place-items: center;
      padding: 20px;
      background: rgba(0,0,0,0.64);
      backdrop-filter: blur(8px);
      z-index: 20;
    }

    .modal-backdrop.open { display: grid; }

    .modal {
      width: min(560px, 100%);
      border-radius: 28px;
      border: 1px solid var(--line);
      background: #191d28;
      box-shadow: 0 40px 120px rgba(0,0,0,0.55);
      padding: 24px;
      text-align: center;
      animation: pop .26s ease both;
    }

    @keyframes pop {
      from { opacity: 0; transform: scale(.94) translateY(16px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }

    .modal .big {
      font-size: clamp(34px, 6vw, 72px);
      font-weight: 1000;
      letter-spacing: -0.07em;
      margin: 10px 0 4px;
    }

    .category-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 11px;
      border-radius: 999px;
      color: #140f06;
      background: var(--gold);
      font-weight: 950;
      font-size: 13px;
      margin-bottom: 12px;
    }

    .rules-list {
      margin: 12px 0 0;
      padding-left: 19px;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.52;
    }

    .rules-list li { margin: 6px 0; }

    .confetti {
      pointer-events: none;
      position: fixed;
      inset: 0;
      overflow: hidden;
      z-index: 30;
    }

    .confetti i {
      position: absolute;
      width: 10px;
      height: 16px;
      border-radius: 3px;
      background: var(--c);
      top: -20px;
      left: var(--x);
      animation: fall var(--d) linear forwards;
      transform: rotate(var(--r));
    }

    @keyframes fall {
      to { transform: translateY(110vh) rotate(calc(var(--r) + 580deg)); opacity: .2; }
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 26px;
      transform: translateX(-50%) translateY(20px);
      padding: 12px 16px;
      background: rgba(17,19,26,0.94);
      border: 1px solid var(--line);
      color: var(--text);
      border-radius: 999px;
      box-shadow: var(--shadow);
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
      z-index: 40;
      font-weight: 800;
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .kbd {
      padding: 2px 7px;
      border-radius: 7px;
      background: rgba(255,255,255,0.09);
      border: 1px solid var(--line);
      color: var(--text);
      font-size: 12px;
      font-weight: 900;
    }

    @media (max-width: 1200px) {
      :root { --canvas-height: clamp(420px, 56vh, 640px); }
      .app { grid-template-columns: 280px minmax(520px, 1fr); }
      .rightbar { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .toolbar { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 860px) {
      :root { --canvas-height: clamp(360px, 55vh, 520px); }
      .app { width: min(100vw - 18px, 760px); grid-template-columns: 1fr; padding-top: 9px; }
      header { flex-direction: column; align-items: stretch; }
      .round-pill { justify-content: flex-start; }
      .table-top { grid-template-columns: 1fr; text-align: left; }
      .timer-wrap { justify-content: start; place-items: start; }
      .word-card { justify-self: stretch; text-align: left; }
      .toolbar { grid-template-columns: 1fr; }
      .rightbar { grid-template-columns: 1fr; }
    }

/* brettspiele.fun shell */

.site-return {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-radius: 999px;
  color: #f8fafc;
  text-decoration: none;
  font: 800 13px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: rgba(15, 23, 42, 0.76);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 12px 34px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
}
.site-return:hover { transform: translateY(-1px); }
@media (max-width: 720px) {
  .site-return { font-size: 12px; padding: 9px 11px; }
}

/* Shared visual identity with brettspiele.fun */
.brand-emblem {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  flex: 0 0 auto;
  filter: drop-shadow(0 16px 20px rgba(0,0,0,.32));
  transform: rotate(-5deg);
}
.site-return span {
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #f2bf57, #ff8a4c);
  color: #16120a;
}

/* Light / dark theme toggle for the standalone game page */
.game-theme-toggle {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(176px, calc(env(safe-area-inset-right) + 176px));
  z-index: 121;
  min-height: 0;
  padding: 10px 13px;
  border-radius: 999px;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.76);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 12px 34px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
  font: 800 13px/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #fbf6ec;
  --panel: rgba(255, 251, 243, 0.84);
  --panel-strong: #fff7e8;
  --line: rgba(21,20,15,0.13);
  --text: #17140f;
  --muted: #6f6253;
  --shadow: 0 24px 70px rgba(84, 58, 24, 0.16);
}

html[data-theme="light"] body {
  background:
    radial-gradient(circle at 12% 10%, rgba(242,191,87,0.25), transparent 30%),
    radial-gradient(circle at 88% 15%, rgba(101,168,255,0.18), transparent 28%),
    radial-gradient(circle at 50% 90%, rgba(255,91,101,0.12), transparent 35%),
    linear-gradient(140deg, #fbf6ec 0%, #efe3d0 55%, #f7efe3 100%);
}

html[data-theme="light"] body::before {
  opacity: .18;
  background-image:
    linear-gradient(rgba(21,20,15,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,20,15,0.035) 1px, transparent 1px);
}

html[data-theme="light"] header,
html[data-theme="light"] .card,
html[data-theme="light"] .modal {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: var(--shadow);
}

html[data-theme="light"] input:not([type="checkbox"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  color: var(--text);
  background: rgba(255,255,255,.7);
  border-color: var(--line);
}
html[data-theme="light"] .public-rooms,
html[data-theme="light"] .public-room-row { background: rgba(0,0,0,.04); }

html[data-theme="light"] .pill,
html[data-theme="light"] button.secondary,
html[data-theme="light"] .team-card,
html[data-theme="light"] .log-entry,
html[data-theme="light"] .kbd,
html[data-theme="light"] .word-option {
  color: var(--text);
  background: rgba(255,255,255,.52);
  border-color: var(--line);
}

html[data-theme="light"] .table-top,
html[data-theme="light"] .toolbar,
html[data-theme="light"] .canvas-stage {
  background: rgba(255,255,255,.22);
  border-color: var(--line);
}

html[data-theme="light"] .timer::before {
  background: #fff7e8;
  border-color: var(--line);
}

html[data-theme="light"] .word-card {
  background: linear-gradient(135deg, rgba(242,191,87,0.24), rgba(255,255,255,0.48));
  border-color: rgba(196,126,42,.32);
}

html[data-theme="light"] .canvas-shell {
  background: #fffaf0;
  border-color: #6b4566;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 28px 60px rgba(84,58,24,.18);
}

html[data-theme="light"] canvas {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,236,170,0.16), transparent 34%),
    #fffaf0;
}

html[data-theme="light"] .score {
  color: #17140f;
  background: rgba(21,20,15,.08);
}

html[data-theme="light"] .modal-backdrop {
  background: rgba(247,239,227,.7);
}

html[data-theme="light"] .toast,
html[data-theme="light"] .site-return,
html[data-theme="light"] .game-theme-toggle {
  color: #17140f;
  background: rgba(255,251,243,.82);
  border-color: var(--line);
  box-shadow: 0 12px 34px rgba(84,58,24,.14);
}

html[data-theme="light"] button.danger {
  color: #991b1b;
  background: linear-gradient(135deg, rgba(255,91,101,.18), rgba(220,38,38,.16));
  border: 1px solid rgba(220,38,38,.24);
}

html[data-theme="light"] button.good {
  color: #052e16;
}

@media (max-width: 720px) {
  .game-theme-toggle {
    right: max(142px, calc(env(safe-area-inset-right) + 142px));
    font-size: 12px;
    padding: 9px 11px;
  }
}

.room-code-field[readonly] {
  color: var(--gold);
  background: rgba(242,191,87,0.12);
  border-color: rgba(242,191,87,0.32);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

html[data-theme="light"] .room-code-field[readonly] {
  color: #8a4f0e;
  background: rgba(212,169,58,0.16);
  border-color: rgba(196,126,42,0.36);
}


.game-top-actions {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  z-index: 80;
  display: flex;
  gap: 8px;
  align-items: center;
}
.game-top-actions .game-theme-toggle {
  white-space: nowrap;
  position: static;
  top: auto;
  right: auto;
}
.game-language-select {
  min-height: 40px;
  min-width: 176px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(15,23,42,.76);
  color: #f8fafc;
  padding: 0 34px 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  appearance: none;
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
html[data-theme="light"] .game-language-select {
  background-color: rgba(255,255,255,.82);
  color: #111827;
  border-color: rgba(17,24,39,.14);
}
@media (max-width: 680px) {
  .game-top-actions { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); }
  .game-language-select { min-height: 36px; max-width: 190px; min-width: 150px; font-size: 12px; }
}

/* Multiplayer lobby / role locks */
.ld-lobby-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(0,0,0,.68);
  backdrop-filter: blur(12px);
}
.ld-lobby-backdrop.open { display: grid; }
.ld-lobby-card {
  width: min(760px, 100%);
  max-height: calc(100dvh - 36px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: var(--panel-strong);
  box-shadow: 0 42px 140px rgba(0,0,0,.58);
  padding: 24px;
}
.ld-lobby-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:18px; }
.ld-lobby-head h2 { font-size: clamp(34px, 6vw, 60px); margin: 8px 0 4px; letter-spacing: -.07em; }
.ld-lobby-head p { margin:0; }
.ld-lobby-choice { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.ld-mode-card {
  min-height: 160px;
  text-align:left;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  color: var(--text);
  background: rgba(255,255,255,.075);
  border: 1px solid var(--line);
  box-shadow: none;
}
.ld-mode-card strong { font-size: 20px; }
.ld-mode-card span { color: var(--muted); line-height: 1.35; font-weight: 700; font-size: 13px; }
.ld-lobby-form { display:block; }
.ld-lobby-form.hidden, .ld-lobby-choice.hidden, .ld-lobby-room.hidden { display:none; }
.ld-lobby-form input, .ld-lobby-form select, .ld-lobby-room input { margin-bottom: 10px; }
.ld-lobby-back { margin-bottom: 12px; }
.lobby-tabs { display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-bottom: 14px; }
.lobby-tab.active { background: linear-gradient(135deg, var(--gold), #ffd479); color:#1c1306; border-color:transparent; }
.ld-room-top { display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-bottom:12px; }
.ld-room-top > div { padding:14px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid var(--line); }
.ld-room-top strong { font-size: 22px; letter-spacing: -.04em; }
.ld-lobby-players { display:flex; flex-direction:column; gap:8px; margin: 10px 0 16px; }
.ld-player-row { display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; padding:11px 12px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid var(--line); }
.ld-player-row small { color: var(--muted); }
.ld-player-row .badge { padding:5px 9px; border-radius:999px; background:rgba(242,191,87,.18); color:var(--gold); font-weight:900; font-size:12px; }
.canvas-shell.locked canvas { cursor: not-allowed; }
.canvas-shell.locked::after {
  content: attr(data-lock-message);
  position:absolute; inset:auto 18px 18px 18px;
  padding: 10px 12px;
  border-radius: 999px;
  text-align:center;
  background: rgba(17,19,26,.76);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 900;
  pointer-events:none;
}
.team-players { margin-top:4px; color:var(--muted); font-size:12px; line-height:1.35; }
.role-note { margin-top:10px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.06); color:var(--muted); border:1px solid var(--line); font-size:13px; }
html[data-theme="light"] .ld-lobby-card { background: #f7efe1; }
html[data-theme="light"] .ld-mode-card,
html[data-theme="light"] .ld-room-top > div,
html[data-theme="light"] .ld-player-row { background: rgba(0,0,0,.045); }
html[data-theme="light"] .canvas-shell.locked::after { background: rgba(255,255,255,.82); color:#241b12; }
@media (max-width: 760px) {
  .ld-lobby-choice { grid-template-columns: 1fr; }
  .ld-mode-card { min-height: 120px; }
  .ld-room-top { grid-template-columns: 1fr; }
}


/* menu-only backlink patch */
.site-return { display: none; }
.site-return.menu-visible { display: inline-flex; }
.site-return.menu-visible {
  left: max(12px, env(safe-area-inset-left));
  right: auto;
}

/* ── animated end ranking ─────────────────────────────────────────────── */
.ranking-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 16% 10%, rgba(242,191,87,.30), transparent 28rem),
    radial-gradient(circle at 82% 18%, rgba(101,168,255,.23), transparent 30rem),
    radial-gradient(circle at 50% 90%, rgba(255,91,101,.20), transparent 34rem),
    rgba(0,0,0,.66);
  backdrop-filter: blur(16px);
}
.ranking-overlay.hidden { display: none; }
.ranking-card {
  width: min(860px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border-radius: 34px;
  padding: clamp(20px, 4vw, 34px);
  background: #191d28;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: 0 40px 130px rgba(0,0,0,.58);
  animation: ranking-card-in .42s cubic-bezier(.16, 1, .3, 1) both;
}
.ranking-kicker {
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ranking-card h2 {
  margin: 0;
  font-size: clamp(2.2rem, 6vw, 5rem);
  line-height: .9;
  letter-spacing: -.075em;
}
.ranking-subtitle {
  margin: 12px 0 0;
  max-width: 62ch;
  color: var(--muted);
  line-height: 1.45;
}
.ranking-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
  margin: 30px 0 18px;
}
.ranking-place {
  position: relative;
  min-height: 172px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px;
  border-radius: 26px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line);
  overflow: hidden;
  animation: ranking-pop .56s cubic-bezier(.16,1,.3,1) both;
  animation-delay: var(--delay, 0ms);
}
.ranking-place::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto;
  height: 110px;
  background: radial-gradient(circle, var(--medal, var(--gold)), transparent 70%);
  opacity: .22;
}
.ranking-place.first { min-height: 226px; --medal: var(--gold); border-color: rgba(242,191,87,.48); }
.ranking-place.second { min-height: 194px; --medal: #d1d5db; }
.ranking-place.third { min-height: 166px; --medal: var(--orange); }
.ranking-medal { font-size: 38px; line-height: 1; filter: drop-shadow(0 10px 20px rgba(0,0,0,.25)); }
.ranking-rank { font-size: 12px; color: var(--muted); font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.ranking-name { font-size: clamp(20px, 3vw, 30px); line-height: .95; font-weight: 1000; letter-spacing: -.055em; overflow-wrap: anywhere; }
.ranking-points { color: var(--gold); font-size: 28px; font-weight: 1000; letter-spacing: -.05em; }
.ranking-list { display: grid; gap: 8px; margin-top: 12px; }
.ranking-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  animation: ranking-slide .42s ease both;
  animation-delay: var(--delay, 0ms);
}
.ranking-row .num { color: var(--muted); font-weight: 950; }
.ranking-row .name { font-weight: 900; overflow-wrap: anywhere; }
.ranking-row .pts { color: var(--gold); font-weight: 1000; }
.ranking-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 24px; }
.ranking-spark {
  position: fixed;
  width: 8px;
  height: 14px;
  border-radius: 3px;
  background: var(--c, var(--gold));
  top: -20px;
  left: var(--x, 50%);
  z-index: 95;
  pointer-events: none;
  animation: ranking-spark-fall var(--d, 2.4s) linear forwards;
}
@keyframes ranking-card-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ranking-pop { from { opacity: 0; transform: translateY(28px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ranking-slide { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes ranking-spark-fall { to { transform: translateY(110vh) rotate(720deg); opacity: .1; } }
html[data-theme="light"] .ranking-overlay { background: rgba(241,236,226,.75); }
html[data-theme="light"] .ranking-card { background: #fff8ea; color: #16120a; border-color: rgba(22,18,10,.14); }
html[data-theme="light"] .ranking-place, html[data-theme="light"] .ranking-row { background: rgba(22,18,10,.055); border-color: rgba(22,18,10,.1); }
@media (max-width: 760px) {
  .ranking-podium { grid-template-columns: 1fr; }
  .ranking-place, .ranking-place.first, .ranking-place.second, .ranking-place.third { min-height: 142px; }
  .ranking-actions { display: grid; grid-template-columns: 1fr; }
}

.ld-lobby-choice.online-only { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 860px) { .ld-lobby-choice.online-only { grid-template-columns: 1fr; } }

/* Lobby player list grouped by team */
.ld-team-group {
  border: 1px solid color-mix(in srgb, var(--team-color, var(--gold)) 36%, var(--line));
  border-radius: 18px;
  overflow: hidden;
  background: color-mix(in srgb, var(--team-color, var(--gold)) 10%, rgba(255,255,255,.045));
}
.ld-team-group-head {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.ld-team-group-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--team-color, var(--gold));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--team-color, var(--gold)) 18%, transparent);
}
.ld-team-group-head small {
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}
.ld-team-group-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px;
}
.ld-player-row.is-you {
  border-color: color-mix(in srgb, var(--gold) 48%, var(--line));
  background: color-mix(in srgb, var(--gold) 14%, rgba(255,255,255,.07));
}
.ld-player-row.is-host .badge {
  background: color-mix(in srgb, var(--green) 24%, rgba(255,255,255,.06));
  color: var(--green);
}
.ld-player-empty {
  opacity: .72;
  border-style: dashed;
}
.ld-lobby-empty {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  border: 1px dashed var(--line);
  color: var(--muted);
  font-weight: 800;
}
html[data-theme="light"] .ld-team-group {
  background: color-mix(in srgb, var(--team-color, var(--gold)) 10%, rgba(0,0,0,.025));
}
html[data-theme="light"] .ld-lobby-empty {
  background: rgba(0,0,0,.035);
}

/* Lobby profile / late team selection */
.ld-profile-panel {
  margin: 14px 0 16px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.065);
  border: 1px solid var(--line);
}
.ld-profile-panel h3 {
  margin: 0 0 6px;
  font-size: 18px;
}
.ld-profile-panel.hidden {
  display: none;
}
.ld-profile-panel.is-joined {
  border-color: color-mix(in srgb, var(--green) 46%, var(--line));
  background: color-mix(in srgb, var(--green) 11%, rgba(255,255,255,.06));
}
html[data-theme="light"] .ld-profile-panel {
  background: rgba(0,0,0,.04);
}


/* Engine-only controls: kept in DOM for game logic, hidden from players. */
.engine-only-section { display: none !important; }

.guess-panel {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.2fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,0.045);
}
.guess-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.guess-copy strong { font-size: 15px; letter-spacing: -0.02em; }
#guessInput { min-height: 46px; }
#guessSubmitBtn { min-width: 110px; }
.guess-panel.disabled { opacity: .55; }
.guess-panel.disabled input, .guess-panel.disabled button { pointer-events: none; }
.ld-host-settings.hidden { display: none !important; }
@media (max-width: 860px) {
  .guess-panel { grid-template-columns: 1fr; }
  #guessSubmitBtn { width: 100%; }
}

/* Multiplayer permissions: guests see host settings, but cannot change them. */
.ld-profile-panel.read-only {
  opacity: .82;
}
.ld-profile-panel.read-only input,
.ld-profile-panel.read-only select,
.ld-profile-panel.read-only button {
  cursor: not-allowed;
}
html[data-letsdraw-role="guest"] #addTeamBtn,
html[data-letsdraw-role="guest"] #saveCustomWordsBtn {
  opacity: .45;
}

/* Lobby team management */
.ld-team-manager {
  margin: 14px 0;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.055);
}
.ld-team-manager.hidden { display: none !important; }
.ld-team-manager-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.ld-team-manager-head strong {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.ld-team-manager-list {
  display: grid;
  gap: 8px;
}
.ld-team-manager-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 38px;
  gap: 9px;
  align-items: center;
}
.ld-team-manager-row .ld-team-dot {
  width: 12px;
  height: 32px;
  border-radius: 999px;
  background: var(--team-color, var(--gold));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--team-color, var(--gold)) 16%, transparent);
}
.ld-team-manager-row input {
  margin: 0;
}
.ld-team-manager-row button {
  min-height: 38px;
  padding: 0;
  border-radius: 12px;
}
html[data-theme="light"] .ld-team-manager {
  background: rgba(21,20,15,.035);
}


html[data-theme="light"] .round-guesses {
  background: rgba(255,255,255,.7);
  border-color: rgba(21,20,15,.11);
}
html[data-theme="light"] .round-guess-entry {
  background: rgba(0,0,0,.045);
  border-color: rgba(21,20,15,.08);
}
html[data-theme="light"] .round-guess-entry strong { color: var(--text); }

@media (max-width: 860px) {
  .canvas-stage { grid-template-columns: 1fr; }
  .round-guesses { min-height: 220px; height: clamp(220px, 36vh, 480px); }
  .canvas-shell { order: 1; }
}


/* Fixed shared drawing board: all clients draw on the same logical 16:9 board. */
.modal-cancel-hidden { display: none !important; }
.modal-start-only { grid-template-columns: 1fr !important; }
.canvas-stage {
  display: grid;
  place-items: center;
  min-height: 0;
}
.canvas-shell {
  aspect-ratio: 16 / 9;
  width: min(100%, calc(max(320px, 100dvh - 315px) * 16 / 9));
  height: auto !important;
  min-height: 0 !important;
  max-height: max(320px, calc(100dvh - 315px));
}
.canvas-shell canvas {
  width: 100%;
  height: 100%;
}
.toolbar .tool-group:last-child {
  justify-content: flex-end;
}
@media (max-width: 1200px) {
  .canvas-shell {
    width: min(100%, calc(max(300px, 100dvh - 360px) * 16 / 9));
    max-height: max(300px, calc(100dvh - 360px));
  }
}
@media (max-width: 860px) {
  .canvas-shell {
    width: 100%;
    max-height: none;
  }
}
@media (max-height: 760px) and (min-width: 861px) {
  .app { align-items: start; }
  .canvas-shell {
    width: min(100%, calc(max(260px, 100dvh - 285px) * 16 / 9));
    max-height: max(260px, calc(100dvh - 285px));
  }
  .table-top { padding-block: 10px; }
  .guess-panel { padding-block: 10px; }
  .toolbar { padding-block: 10px; }
}


/* Back-to-home button */
.game-top-left-ld {
  position: fixed;
  top: max(18px, env(safe-area-inset-top));
  left: max(18px, env(safe-area-inset-left));
  z-index: 90;
}
.ld-back-btn {
  padding: 10px 13px;
  border-radius: 999px;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.76);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 12px 34px rgba(0,0,0,.25);
  backdrop-filter: blur(12px);
  font: 800 13px/1 system-ui, -apple-system, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: filter .15s;
}
.ld-back-btn:hover { filter: brightness(1.12); }
html[data-theme="light"] .ld-back-btn {
  color: #18140f;
  background: rgba(255, 251, 243, .82);
  border-color: rgba(21,20,15,.16);
  box-shadow: 0 12px 34px rgba(84,58,24,.14);
}
@media (max-width: 680px) {
  .game-top-left-ld {
    top: auto;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: max(12px, env(safe-area-inset-left));
  }
}

/* Hide team selection completely in free-for-all mode, including the brief moment before JS finishes updating the lobby. */
html[data-letsdraw-mode="solo"] label[for="lobbyPlayerTeam"],
html[data-letsdraw-mode="solo"] #lobbyPlayerTeam {
  display: none !important;
}

/* Lobby close is intentionally hidden; returning from a running game uses the confirmed game button. */
#lobbyCloseBtn { display: none !important; }
.game-lobby-return {
  align-self: center;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.game-lobby-return.hidden { display: none !important; }
@media (max-width: 860px) {
  .game-lobby-return { width: 100%; justify-content: center; }
}

/* Privacy, visitor counter and ratings */
.consent-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;display:grid;grid-template-columns:minmax(220px,1fr) auto auto;gap:16px;align-items:center;padding:18px;border:1px solid var(--hairline,rgba(255,255,255,.16));border-radius:22px;background:color-mix(in srgb,var(--paper,#111827) 94%,transparent);color:var(--ink,#f8fafc);box-shadow:0 24px 80px rgba(0,0,0,.32);backdrop-filter:blur(18px)}
.consent-copy strong{display:block;font-size:18px;margin-bottom:4px}.consent-copy p{margin:0;color:var(--muted,#9ca3af);line-height:1.45}.consent-options{display:flex;gap:12px;flex-wrap:wrap}.consent-options label{display:flex;gap:6px;align-items:center;font-weight:800;color:var(--ink,#f8fafc);white-space:nowrap}.consent-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.consent-actions button,.community-card button,.rating-form button{border:0;border-radius:999px;padding:10px 14px;font-weight:900;cursor:pointer;background:var(--paper-2,rgba(255,255,255,.1));color:var(--ink,#f8fafc);border:1px solid var(--hairline,rgba(255,255,255,.16))}.consent-actions button.primary,.rating-form button{background:var(--accent,#f59e0b);color:#111827;border-color:transparent}.privacy-floating-button{position:fixed;right:14px;bottom:14px;z-index:9998;border:1px solid var(--hairline,rgba(255,255,255,.16));border-radius:999px;padding:8px 11px;background:color-mix(in srgb,var(--paper,#111827) 88%,transparent);color:var(--muted,#9ca3af);backdrop-filter:blur(12px);font:700 12px/1 system-ui,sans-serif;cursor:pointer}.consent-banner+.privacy-floating-button{display:none}
.community-panel{width:min(1180px,calc(100vw - 32px));margin:26px auto}.community-card{border:1px solid var(--hairline,rgba(255,255,255,.14));border-radius:24px;background:var(--paper,#111827);color:var(--ink,#f8fafc);box-shadow:0 18px 60px rgba(0,0,0,.16);padding:22px}.community-card h2{margin:0 0 8px;font-size:clamp(22px,3vw,34px);letter-spacing:-.04em}.community-card p{color:var(--muted,#9ca3af);line-height:1.5}.community-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap}.rating-big{text-align:right}.rating-big strong{display:block;font-size:42px;line-height:1}.rating-big span{display:block;color:var(--accent,#f59e0b);letter-spacing:.04em}.rating-big small{color:var(--muted,#9ca3af)}.rating-form{display:grid;grid-template-columns:120px 1fr 1.4fr auto;gap:10px;align-items:end;margin:18px 0}.rating-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#9ca3af)}.rating-form input,.rating-form select,.rating-form textarea{width:100%;border:1px solid var(--hairline,rgba(255,255,255,.16));border-radius:14px;padding:10px 12px;background:var(--paper-2,rgba(255,255,255,.08));color:var(--ink,#f8fafc);font:inherit}.rating-form textarea{min-height:42px;resize:vertical}.rating-list{display:grid;gap:10px}.rating-list article{border-top:1px solid var(--hairline,rgba(255,255,255,.12));padding-top:10px}.rating-list article strong{color:var(--accent,#f59e0b);margin-right:8px}.rating-list article b{font-weight:900}.rating-list article p{margin:6px 0 0}
@media (max-width:800px){.consent-banner{grid-template-columns:1fr}.consent-actions{justify-content:flex-start}.rating-form{grid-template-columns:1fr}.rating-big{text-align:left}}

/* In-game confirm dialog (return-to-lobby etc.) — replaces native confirm() */
.gc-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}
.gc-overlay[hidden]{display:none!important}
.gc-modal{background:var(--paper,#111827);border:1px solid var(--hairline,rgba(255,255,255,.16));border-radius:18px;padding:24px 24px 18px;min-width:280px;max-width:400px;width:90%;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.gc-msg{font-size:15px;color:var(--ink,#f8fafc);line-height:1.55;margin-bottom:20px;text-align:center}
.gc-actions{display:flex;gap:10px;justify-content:flex-end}
.gc-actions button{width:auto;padding:10px 20px}

/* Lobby: make it obvious the tabs only switch the section (still need the button below). */
.tab-hint{font-size:12.5px;line-height:1.4;margin:2px 0 12px;opacity:.85}

/* No accidental left/right page scrolling on mobile (clip keeps sticky working,
   hidden is the fallback). Wide content should scroll inside its own container. */
@media (max-width: 768px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
  }
}