:root {
  color-scheme: light;
  --bg: #f5efe4; --surface: #fffdf8; --surface-2: #eee4d4; --text: #3c352e; --strong: #17130f;
  --muted: #746a60; --border: #d8cbbb; --accent: #bf5508; --accent-dark: #873800; --accent-soft: #fff0db;
  --teal: #17766f; --teal-soft: #dff3ef; --danger: #ad2e24; --danger-soft: #fde8e5; --eliminated-bg: #b9382e; --eliminated-text: #fff; --confirmed-bg: #238443; --confirmed-text: #fff; --shadow: 0 16px 45px rgba(79,52,29,.10);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171411; --surface: #24201c; --surface-2: #332d27; --text: #e4d9cf; --strong: #fffaf4;
  --muted: #b9ada1; --border: #5b5046; --accent: #ed852d; --accent-dark: #ffad67; --accent-soft: #492b16;
  --teal: #74d4c8; --teal-soft: #173b37; --danger: #ff928a; --danger-soft: #47211e; --eliminated-bg: #a9322b; --eliminated-text: #fff; --confirmed-bg: #237a43; --confirmed-text: #fff; --shadow: 0 18px 50px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { min-height: 100vh; min-height: 100dvh; margin: 0; color: var(--text); background: radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 33rem), var(--bg); font-family: ui-rounded, "Nunito", system-ui, sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.chat-log{height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.chat-message{padding:8px 10px;border-radius:10px;background:var(--surface-2);font-size:.82rem;overflow-wrap:anywhere}.chat-message strong{display:block;color:var(--accent-dark);font-size:.72rem}.chat-message span{display:block;margin-top:2px}.chat-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px}.chat-form input{min-width:0;padding:10px 11px;border:1px solid var(--border);border-radius:9px;color:var(--strong);background:var(--surface)}.chat-float-layer{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:80;display:flex;flex-direction:column;gap:8px;pointer-events:none}.chat-float-message{width:min(330px,calc(100vw - 32px));padding:10px 12px;border:1px solid var(--border);border-radius:13px;color:var(--text);background:color-mix(in srgb,var(--surface) 95%,transparent);box-shadow:var(--shadow);animation:chat-float 9s ease both;overflow-wrap:anywhere}.chat-float-message strong{display:block;color:var(--accent-dark);font-size:.72rem}.chat-float-message span{font-size:.84rem}@keyframes chat-float{0%{opacity:0;transform:translateY(10px)}8%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px)}}
.site-header { min-height: 64px; padding: 9px max(16px, env(safe-area-inset-left)); display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(16px); }
.brand { color: var(--accent-dark); text-decoration: none; font: 900 clamp(1.05rem,3vw,1.4rem)/1 ui-monospace, monospace; letter-spacing: -.04em; }
.brand span { color: var(--teal); }
.header-actions { display: flex; align-items: center; gap: 7px; }
.connection { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .75rem; font-weight: 800; }
.connection i { width: 8px; height: 8px; border-radius: 50%; background: #d69a29; }.connection.online i { background: #2a9b55; }.connection.offline i { background: var(--danger); }
.lobby-shell, .game-shell { width: min(1120px, calc(100% - 28px)); margin: 0 auto; padding: clamp(34px,6vw,72px) 0 50px; }
.hero { max-width: 850px; margin-bottom: 34px; }.hero h1 { margin: 4px 0 12px; color: var(--strong); font-size: clamp(2.5rem,8vw,5.8rem); line-height: .94; letter-spacing: -.07em; }.hero > p:last-of-type { max-width: 700px; font-size: clamp(1rem,2vw,1.2rem); line-height: 1.55; }
.eyebrow { margin: 0 0 5px; color: var(--accent-dark); font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.rule-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }.rule-chips > span { padding: 8px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: .82rem; }.rule-chips b { color: var(--accent-dark); }
.lobby-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; }.panel { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }.lobby-panel, .section-card { padding: clamp(16px,3vw,22px); }
.title-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }.title-row h2, .section-card h2 { margin: 0; color: var(--strong); font-size: 1.05rem; }.count, .privacy-label, .mode-pill, #rolePill { padding: 4px 9px; border-radius: 999px; color: var(--accent-dark); background: var(--accent-soft); font: 800 .7rem ui-monospace, monospace; white-space: nowrap; }.privacy-label { color: var(--teal); background: var(--teal-soft); }
.room-list { display: grid; gap: 9px; }.room-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface) 80%, var(--surface-2)); }.room-card h3 { margin: 0 0 3px; color: var(--strong); font-size: .98rem; }.room-card p, .empty { margin: 0; color: var(--muted); font-size: .78rem; }.empty { padding: 28px 10px; text-align: center; }
.form-stack { display: grid; gap: 12px; }.form-stack label, .notes-heading, .secret-box > label, .admin-box label { display: grid; gap: 6px; color: var(--strong); font-size: .78rem; font-weight: 800; }input, select, textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px 11px; color: var(--strong); background: var(--surface); outline: none; }input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }.helper { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.4; }.error { min-height: 1.1em; margin: 0; color: var(--danger); font-size: .78rem; font-weight: 800; }
.btn { min-height: 42px; border: 1px solid transparent; border-radius: 10px; padding: 9px 14px; font-weight: 900; transition: transform .08s, filter .08s; }.btn:hover { filter: brightness(1.04); }.btn:active { transform: translateY(1px); }.btn:disabled { cursor: not-allowed; opacity: .48; }.btn.primary { color: white; background: var(--accent); }.btn.secondary { color: var(--strong); border-color: var(--border); background: var(--surface); }.btn.ghost { color: var(--text); border-color: var(--border); background: transparent; }.btn.danger { color: var(--danger); border-color: color-mix(in srgb,var(--danger) 40%,var(--border)); background: var(--danger-soft); }.btn.compact { min-height: 34px; padding: 6px 9px; font-size: .74rem; }
.game-shell { padding-top: 18px; }.room-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 18px; margin-bottom: 12px; }.room-bar h1 { margin: 0; color: var(--strong); font-size: 1.25rem; }.room-meta { display: flex; gap: 7px; }
.turn-card { padding: clamp(18px,3vw,28px); margin-bottom: 12px; background: linear-gradient(125deg, var(--surface), color-mix(in srgb,var(--accent-soft) 70%,var(--surface))); }.turn-card h2 { margin: 0; color: var(--strong); font-size: clamp(1.4rem,4vw,2.4rem); }.turn-card > p:last-child { margin: 6px 0 0; color: var(--muted); }.turn-card.yours { border-color: var(--accent); box-shadow: 0 16px 48px color-mix(in srgb,var(--accent) 18%,transparent); }
.game-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(290px,.7fr); gap: 12px; }.main-column, .side-column { display: grid; align-content: start; gap: 12px; }.setup-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 12px; }.secret-box, .ready-box { padding: 13px; border-radius: 12px; background: var(--surface-2); }.code-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 7px; }.code-input { font: 900 1.55rem ui-monospace, monospace; letter-spacing: .25em; text-align: center; }.code-input.large { min-height: 66px; font-size: clamp(1.8rem,6vw,3rem); }.ready-box { display: grid; align-content: center; gap: 7px; }.admin-box { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }.guess-card { border-color: var(--accent); }.guess-card h2 { margin: 0 0 14px; font-size: clamp(1.15rem,3vw,1.55rem); }.guess-form { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.history-wrap { overflow-x: auto; }table { width: 100%; border-collapse: collapse; }th, td { padding: 9px 7px; border-bottom: 1px solid var(--border); text-align: left; font-size: .78rem; }th { color: var(--muted); font-size: .66rem; text-transform: uppercase; }.guess-code { color: var(--strong); font: 900 1.05rem ui-monospace, monospace; letter-spacing: .12em; }.score-chip { display: inline-block; min-width: 28px; padding: 3px 6px; border-radius: 7px; text-align: center; font-weight: 900; }.score-chip.fijo { color: var(--accent-dark); background: var(--accent-soft); }.score-chip.movil { color: var(--teal); background: var(--teal-soft); }.incoming-item { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .78rem; }.incoming-item:last-child { border: 0; }
.public-results-help { margin-bottom: 11px; }.round-results { display: grid; gap: 7px; }.round-result { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 10px; background: var(--surface-2); }.round-result-main { min-width: 0; }.round-result-main strong { display: block; overflow: hidden; color: var(--strong); font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }.round-result-main small { color: var(--muted); font-size: .66rem; }.round-result-score { display: flex; gap: 5px; white-space: nowrap; }.round-result-score .score-chip { min-width: auto; }
.players-list { display: grid; gap: 7px; }.player-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: var(--surface-2); }.player-row strong { color: var(--strong); font-size: .84rem; }.player-row small { display: block; color: var(--muted); font-size: .66rem; }.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }.status-dot.ready { background: #2a9b55; }.status-dot.offline { background: var(--danger); }.status-dot.waiting { background: #c99b28; }
.digit-pad { display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; margin: 14px 0; }.digit { aspect-ratio: 1; border: 1px solid var(--border); border-radius: 11px; color: var(--strong); background: var(--surface); font: 900 1.35rem ui-monospace, monospace; }.digit.possible { color: var(--teal); border-color: var(--teal); background: var(--teal-soft); }.digit.eliminated { color: var(--eliminated-text); border-color: var(--eliminated-bg); background: var(--eliminated-bg); opacity: 1; }.legend { display: flex; gap: 15px; margin-bottom: 14px; color: var(--muted); font-size: .68rem; }.legend span { display: flex; align-items: center; gap: 5px; }.legend i { width: 9px; height: 9px; border-radius: 50%; }.legend i.possible { background: var(--teal); }.legend i.eliminated { background: var(--eliminated-bg); }
.solution-notes { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }.notes-heading { color: var(--strong); font-size: .78rem; font-weight: 800; }.answer-slots { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }.answer-slot { min-width: 0; height: 58px; padding: 4px; border-width: 0 0 3px; border-radius: 8px 8px 3px 3px; font: 900 2rem/1 ui-monospace, monospace; text-align: center; }.answer-slot::placeholder { color: var(--muted); opacity: .75; }.answer-help { text-align: center; }.candidate-block { display: grid; gap: 6px; }.candidate-label { color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }.candidate-digits { display: grid; gap: 5px; }.candidate-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }.candidate-digit { display: grid; place-items: center; min-width: 0; min-height: 38px; border: 1px solid var(--border); border-radius: 8px; color: var(--strong); background: var(--surface-2); font: 900 1rem/1 ui-monospace, monospace; }.candidate-digit.crossed { color: var(--eliminated-text); border-color: var(--eliminated-bg); background: var(--eliminated-bg); opacity: 1; }.candidate-digit.definitive { color: var(--confirmed-text); border-color: var(--confirmed-bg); background: var(--confirmed-bg); box-shadow: 0 0 0 2px color-mix(in srgb,var(--confirmed-bg) 22%,transparent); }.local-note { margin: 7px 0 0; color: var(--muted); font-size: .66rem; text-align: right; }
.dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px; background: rgba(22,17,13,.68); backdrop-filter: blur(6px); }.dialog { width: min(430px,100%); padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 28px 80px rgba(0,0,0,.3); }.dialog h2 { margin: 0; color: var(--strong); }.dialog form { margin-top: 17px; }.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.results-dialog { width: min(560px,100%); }.reveals { display: grid; gap: 7px; margin: 17px 0; }.reveal { display: flex; justify-content: space-between; padding: 11px; border-radius: 10px; background: var(--surface-2); }.reveal code { color: var(--accent-dark); font: 900 1.15rem ui-monospace, monospace; letter-spacing: .12em; }
.toast { position: fixed; z-index: 150; left: 50%; bottom: max(18px,env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: min(92vw,520px); padding: 10px 14px; border-radius: 10px; color: var(--surface); background: var(--strong); box-shadow: var(--shadow); font-size: .8rem; }.celebration { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle,rgba(255,218,130,.26),transparent 58%); }.winner { position: relative; padding: clamp(25px,7vw,60px); border: 2px solid #efad35; border-radius: 28px; text-align: center; background: color-mix(in srgb,var(--surface) 94%,transparent); box-shadow: 0 30px 100px rgba(0,0,0,.3); animation: pop .5s cubic-bezier(.2,.9,.25,1.2); }.winner p { margin: 0; color: var(--accent-dark); font-weight: 900; text-transform: uppercase; letter-spacing: .16em; }.winner h2 { margin: 7px 0 0; color: var(--strong); font-size: clamp(2.5rem,11vw,7rem); line-height: .9; }.confetti { position: absolute; inset: 0; overflow: hidden; }.confetti i { position: absolute; left: var(--x); top: -8%; width: 9px; height: 18px; background: var(--color); animation: fall var(--duration) var(--delay) forwards; }
@keyframes fall { to { transform: translate(var(--drift),115vh) rotate(900deg); } }@keyframes pop { from { opacity: 0; transform: scale(.7); } }
@media (max-width: 820px) { .lobby-grid, .game-grid { grid-template-columns: 1fr; }.side-column { grid-template-columns: 1fr 1fr; }.lobby-shell { padding-top: 38px; } }
@media (max-width: 600px) { .site-header { min-height: 57px; }.theme-label, .connection { display: none; }.lobby-shell,.game-shell { width: min(100% - 16px,1120px); }.hero h1 { font-size: clamp(2.5rem,15vw,4rem); }.room-card, .room-bar { align-items: stretch; flex-direction: column; }.setup-grid,.admin-box,.guess-form,.side-column { grid-template-columns: 1fr; }.admin-box .btn { width: 100%; }.code-row { grid-template-columns: 1fr; }.code-row .btn { width: 100%; }.turn-card { padding: 17px; }.section-card { padding: 14px; }.round-result { grid-template-columns: 1fr; }.round-result-score { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }