:root {
  --bg: #f4efe6;
  --ink: #18202b;
  --muted: #677488;
  --surface: rgba(255, 251, 245, 0.72);
  --surface-strong: rgba(255, 248, 239, 0.92);
  --line: rgba(24, 32, 43, 0.1);
  --accent: #d0562d;
  --accent-strong: #b63f18;
  --teal: #1f7c72;
  --gold: #a97b1f;
  --danger: #b44646;
  --shadow: 0 24px 60px rgba(24, 32, 43, 0.12);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--ink); background: linear-gradient(135deg, #f7f1e8 0%, #e9decc 100%); }
button, input, select { font: inherit; }
pre { margin: 0; white-space: pre-wrap; }
.app-bg { position: fixed; inset: 0; background: radial-gradient(circle at top left, rgba(208,86,45,.18), transparent 28%), radial-gradient(circle at 85% 20%, rgba(31,124,114,.18), transparent 24%), radial-gradient(circle at bottom right, rgba(169,123,31,.14), transparent 22%); pointer-events: none; }
.layout { position: relative; width: min(1360px, calc(100% - 32px)); margin: 0 auto; padding: 24px 0 40px; }
.hero, .card { backdrop-filter: blur(18px); border: 1px solid var(--line); box-shadow: var(--shadow); }
.hero { display: flex; justify-content: space-between; gap: 24px; padding: 28px 30px; border-radius: 28px; background: linear-gradient(135deg, rgba(255,251,245,.82), rgba(255,247,235,.74)); }
.eyebrow, .meta-label, .muted, .tip, .stats-grid dt, .history-meta, .preview-note { color: var(--muted); }
.eyebrow { margin: 0 0 10px; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; }
h1,h2,h3,p,dl,dt,dd { margin: 0; }
h1 { font-size: clamp(34px, 6vw, 64px); line-height: .95; margin-bottom: 12px; }
.hero-copy { max-width: 720px; line-height: 1.7; }
.hero-status { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.dashboard { margin-top: 24px; display: grid; grid-template-columns: 340px minmax(0, 1.2fr) minmax(340px, .8fr); gap: 24px; }
.card { padding: 24px; border-radius: 28px; background: var(--surface); }
.setup-card { grid-column: 1; grid-row: span 2; }
.arena-card { grid-column: 2; }
.players-card { grid-column: 3; grid-row: 1; }
.history-card { grid-column: 2 / span 2; }
.card-head, .inline-actions, .player-topline, .arena-top, .preview-head { display: flex; justify-content: space-between; gap: 12px; }
.card-head, .arena-top, .preview-head { align-items: flex-start; }
.field { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.join-grid { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 16px; align-items: end; }
.room-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.meta-tile, .player-panel, .history-item, .preview-card { border: 1px solid rgba(24,32,43,.08); background: var(--surface-strong); }
.meta-tile { border-radius: 20px; padding: 16px; }
input, .select { width: 100%; min-width: 0; padding: 14px 16px; border: 1px solid rgba(24,32,43,.12); border-radius: 18px; background: rgba(255,255,255,.9); color: var(--ink); }
.button { border: 1px solid rgba(24,32,43,.12); background: rgba(255,250,244,.94); color: var(--ink); border-radius: 18px; padding: 14px 18px; cursor: pointer; }
.button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-strong)); color: #fff; border-color: transparent; }
.button.danger { color: #fff; border-color: transparent; background: linear-gradient(135deg, #d25d5d, var(--danger)); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.pill, .host-mark { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; font-size: 13px; }
.pill.disconnected { background: rgba(180,70,70,.12); color: var(--danger); }
.pill.connected { background: rgba(31,124,114,.14); color: var(--teal); }
.pill.neutral, .pill.subtle, .host-mark { background: rgba(24,32,43,.06); color: var(--ink); }
.arena-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.scramble { margin-top: 10px; font-size: clamp(18px, 2.1vw, 28px); font-weight: 800; line-height: 1.5; word-break: break-word; }
.arena-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) 320px; gap: 18px; margin-top: 20px; }
.timer-stage { min-height: 290px; border-radius: 32px; border: 1px solid rgba(24,32,43,.08); display: grid; place-items: center; text-align: center; padding: 28px; background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,245,232,.92)), repeating-linear-gradient(135deg, transparent, transparent 14px, rgba(24,32,43,.025) 14px, rgba(24,32,43,.025) 28px); }
.timer-stage.armed { background: linear-gradient(145deg, rgba(169,123,31,.16), rgba(255,243,209,.96)); }
.timer-stage.running { background: linear-gradient(145deg, rgba(31,124,114,.18), rgba(229,250,246,.98)); }
.timer-stage.finished { background: linear-gradient(145deg, rgba(208,86,45,.16), rgba(255,237,227,.96)); }
.timer-value { font-size: clamp(72px, 11vw, 148px); font-weight: 900; line-height: .95; font-variant-numeric: tabular-nums; }
.timer-caption { margin-top: 10px; font-size: 16px; color: var(--muted); }
.preview-card { border-radius: 24px; padding: 16px; }
.scramble-preview { margin-top: 12px; display: grid; place-items: center; min-height: 260px; }
.preview-cube { display: grid; gap: 8px; transform: scale(.95); transform-origin: top center; }
.preview-row { display: flex; gap: 8px; justify-content: center; }
.preview-face { display: grid; gap: 2px; padding: 10px; border-radius: 16px; background: rgba(24,32,43,.05); }
.preview-grid { display: grid; gap: 2px; }
.preview-sticker { border-radius: 3px; border: 1px solid rgba(24,32,43,.08); }
.preview-pyra { width: 220px; aspect-ratio: 1; display: grid; place-items: center; }
.preview-pyra svg { width: 100%; height: auto; }
.preview-special { width: 100%; display: grid; place-items: center; gap: 12px; }
.clock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 210px; }
.clock-dial { display: grid; place-items: center; aspect-ratio: 1; border-radius: 999px; background: rgba(24,32,43,.06); border: 2px solid rgba(24,32,43,.1); font-weight: 800; }
.mega-preview { grid-template-columns: repeat(4, 48px); gap: 10px; }
.mega-cell { width: 48px; height: 48px; clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%); background: linear-gradient(135deg, #db5a35, #f0d14b); }
.sq1-preview { width: 180px; gap: 10px; }
.sq1-top, .sq1-bottom { width: 140px; height: 60px; border-radius: 999px; background: linear-gradient(90deg, #305fc9 0 50%, #db5a35 50% 100%); transition: transform .2s ease; }
.sq1-middle { width: 24px; height: 24px; background: #2d9b58; transform: skewX(-18deg); }
.skewb-preview { gap: 8px; }
.skewb-middle { display: flex; align-items: center; gap: 8px; }
.skewb-diamond { width: 56px; height: 56px; transform: rotate(45deg); background: linear-gradient(135deg, #ffffff, #f0d14b); border: 1px solid rgba(24,32,43,.1); display: grid; place-items: center; }
.skewb-diamond.center { background: linear-gradient(135deg, #db5a35, #305fc9); color: #fff; font-weight: 800; }
.blind-preview { gap: 10px; }
.blind-tag { padding: 8px 12px; border-radius: 999px; background: rgba(24,32,43,.08); font-weight: 700; }
.blind-cube-wrap .preview-cube { transform: scale(.78); }
.tip { margin-top: 14px; line-height: 1.6; }
.player-panels { display: grid; gap: 16px; margin-top: 16px; }
.player-panel { border-radius: 24px; padding: 20px; }
.result { margin-top: 18px; font-size: clamp(26px, 3vw, 42px); font-weight: 900; font-variant-numeric: tabular-nums; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.stats-grid div { padding: 14px; border-radius: 18px; background: rgba(24,32,43,.04); }
.stats-grid dd { margin-top: 8px; font-weight: 800; font-variant-numeric: tabular-nums; }
.inline-actions { margin-top: 18px; flex-wrap: wrap; }
.inline-actions.right { justify-content: flex-end; }
.history-list { margin-top: 16px; display: grid; gap: 12px; }
.history-item { border-radius: 20px; padding: 16px 18px; }
.history-head, .history-results { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.history-results { margin-top: 12px; }
.history-score { font-weight: 800; font-variant-numeric: tabular-nums; }
.history-empty { padding: 18px; border-radius: 18px; background: rgba(24,32,43,.04); color: var(--muted); }
@media (max-width: 1180px) { .dashboard { grid-template-columns: 1fr; } .setup-card, .arena-card, .players-card, .history-card { grid-column: auto; grid-row: auto; } .arena-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .layout { width: min(100% - 20px, 1360px); padding-top: 12px; } .hero, .card, .join-grid, .history-head, .history-results, .player-topline, .arena-top, .preview-head { display: block; } .hero-status, .join-grid .button, .stats-grid, .room-meta-grid { margin-top: 14px; } .stats-grid { grid-template-columns: 1fr; } }