:root {
  color-scheme: dark;
  --bg: #061014;
  --surface: #0b171b;
  --surface-strong: #102126;
  --line: #26383e;
  --muted: #91a4aa;
  --cyan: #31d7e7;
  --cyan-soft: #8debf3;
  --green: #66df77;
  --pink: #ff5f83;
  --white: #f5f9fa;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 76% 0%, rgba(49, 215, 231, .13), transparent 30%),
    linear-gradient(180deg, #081317, var(--bg) 55%);
  color: var(--white);
}
button, input, select { font: inherit; }
button, summary { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.shell { width: min(100% - 32px, 960px); margin: auto; padding: 18px 0 34px; }
.topbar { display: flex; min-height: 52px; margin-bottom: 28px; align-items: center; justify-content: space-between; gap: 18px; }
.account-link { padding: 10px 0; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-decoration: none; }
.account-link:hover { color: var(--cyan); }
.timelo-page-links { display: flex; align-items: center; gap: 18px; }
.timelo-page-links a { padding: 10px 0; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-decoration: none; }
.timelo-page-links a:hover { color: var(--cyan); }

.universe-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(76px, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #050b0e;
}
.game-product {
  display: flex;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #aeb9bd;
  font-size: .78rem;
  font-weight: 950;
  letter-spacing: 0;
  text-decoration: none;
}
.game-product:hover { color: #fff; background: #111b1f; }
.game-product img { width: 88px; max-width: 100%; height: auto; }
.movielo-product span { color: var(--pink); }
.timelo-product span { color: var(--cyan); }
.timelo-product.is-current { border-color: rgba(49, 215, 231, .6); background: rgba(49, 215, 231, .11); color: #fff; }

.game-card {
  width: min(100%, 660px);
  margin: 0 auto;
  padding: 38px clamp(22px, 6vw, 56px) 34px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(16, 33, 38, .98), rgba(8, 19, 23, .98) 70%);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .34);
}
.eyebrow { margin: 0; color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.game-card > .eyebrow { text-align: center; }
.game-card h1 { margin: 9px 0 0; text-align: center; font-size: clamp(32px, 7vw, 53px); line-height: 1.03; letter-spacing: 0; }
.game-card h1 span { color: var(--cyan); }
.intro { max-width: 500px; margin: 14px auto 20px; color: var(--muted); font-size: 14px; line-height: 1.55; text-align: center; }

.quick-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  color: #cbd4d7;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.quick-steps li { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; }
.quick-steps li + li::before { content: ""; position: absolute; left: 0; width: 1px; height: 18px; background: var(--line); }
.quick-steps span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: rgba(49, 215, 231, .14); color: var(--cyan); font-size: 9px; }

.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: #060d10; }
.mode-tabs button { min-height: 60px; padding: 10px; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; }
.mode-tabs strong, .mode-tabs small { display: block; }
.mode-tabs strong { font-size: 12px; }
.mode-tabs small { margin-top: 4px; font-size: 9px; line-height: 1.25; }
.mode-tabs button[aria-selected="true"] { border-color: rgba(49, 215, 231, .38); background: rgba(49, 215, 231, .11); color: var(--cyan-soft); }

.setup { padding-top: 22px; }
.setup-grid { display: grid; grid-template-columns: 1fr; }
.field-label, .target > span, .result-grid span { display: block; color: var(--muted); font-size: 9px; font-weight: 900; letter-spacing: .13em; }
.player-name { width: 100%; height: 46px; margin-top: 7px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: #071115; color: var(--white); }
.daily-choice { display: flex; gap: 9px; align-items: center; width: fit-content; margin: 16px auto 0; color: #c5d0d3; font-size: 12px; cursor: pointer; }
.daily-choice input { width: 17px; height: 17px; accent-color: var(--cyan); }
.target { margin: 18px 0 14px; padding: 19px 12px; border-block: 1px solid var(--line); text-align: center; }
.target strong { display: block; margin-top: 7px; font-size: clamp(25px, 6vw, 34px); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.target strong small { color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.mode-description { min-height: 20px; margin: 0 0 13px; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: center; }

.primary, .secondary { width: 100%; min-height: 50px; border: 0; border-radius: 8px; background: var(--cyan); color: #041316; font-size: 13px; font-weight: 900; letter-spacing: .08em; cursor: pointer; transition: filter .15s, transform .15s; }
.primary:hover, .secondary:hover { filter: brightness(1.07); }
.primary:active, .secondary:active { transform: scale(.99); }
.primary:disabled, .secondary:disabled { cursor: not-allowed; opacity: .48; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.privacy-note { margin: 12px 0 0; color: var(--muted); font-size: 10px; text-align: center; }

.round { padding-top: 24px; text-align: center; }
.status { min-height: 24px; margin: 0 0 12px; color: var(--cyan); font-size: 13px; font-weight: 900; letter-spacing: .05em; }
.status.is-countdown { display: grid; min-height: 74px; margin-bottom: 16px; place-items: center; }
.countdown-value { display: block; font-size: 56px; line-height: 1; letter-spacing: 0; text-shadow: 0 0 24px rgba(49, 215, 231, .38); animation: countdown-tick .76s cubic-bezier(.2, .8, .2, 1) both; }
.countdown-value.is-go { font-size: 34px; }
.status.is-running, .room-status.is-running { display: flex; align-items: center; justify-content: center; gap: 9px; }
.timing-dots { display: inline-flex; width: 30px; align-items: center; justify-content: space-between; }
.timing-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; animation: timing-pulse 1.2s ease-in-out infinite; }
.timing-dots i:nth-child(2) { animation-delay: .18s; }
.timing-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes countdown-tick { 0% { opacity: 0; transform: scale(.55); } 35% { opacity: 1; transform: scale(1); } 100% { opacity: .2; transform: scale(.92); } }
@keyframes timing-pulse { 0%, 60%, 100% { opacity: .22; transform: translateY(0) scale(.72); } 30% { opacity: 1; transform: translateY(-3px) scale(1); } }
.small-target { margin: 0; padding: 4px 0 20px; border: 0; }
.small-target strong { font-size: 27px; }
.stop-button { min-height: 72px; margin-top: 5px; font-size: 17px; }
.round form { text-align: left; }
.round form > label, .room-panel form > label { font-size: 10px; font-weight: 900; letter-spacing: .12em; }
.guess-row { display: flex; gap: 9px; margin-top: 10px; }
.guess-row input { min-width: 0; flex: 1; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: #071115; color: var(--white); font-size: 20px; font-variant-numeric: tabular-nums; }
.guess-row .primary { width: 124px; }
.round form small { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; }

.result { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.result-kicker { color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .16em; text-align: center; }
.result h2 { margin: 8px 0 18px; font-size: 23px; text-align: center; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-bottom: 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--line); }
.result-grid > div { padding: 13px; background: #0a171b; }
.result-grid strong { display: block; margin-top: 5px; font-size: 17px; font-variant-numeric: tabular-nums; }
.secondary { border: 1px solid #34545b; background: #13272d; color: var(--cyan-soft); }
.personal-best { margin: 0 0 14px; color: var(--muted); font-size: 10px; text-align: center; }
.challenge-button { margin-top: 8px; }

.room-entry { margin-top: 22px; border-top: 1px solid var(--line); }
.room-entry > summary { display: flex; padding: 17px 2px 4px; align-items: center; justify-content: space-between; color: var(--white); cursor: pointer; list-style: none; }
.room-entry > summary::-webkit-details-marker { display: none; }
.room-entry summary b, .room-entry summary small { display: block; }
.room-entry summary b { font-size: 12px; }
.room-entry summary small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; }
.room-entry summary i { color: var(--cyan); font-size: 19px; font-style: normal; }
.room-entry[open] summary i { transform: rotate(45deg); }
.room-entry-body { padding-top: 12px; }
.room-entry-body label { display: block; color: var(--muted); font-size: 10px; }
.room-entry-body label input, .join-row input { width: 100%; height: 42px; padding: 0 11px; border: 1px solid var(--line); border-radius: 7px; background: #071115; color: var(--white); }
.room-entry .secondary { min-height: 42px; margin-top: 8px; font-size: 10px; }
.join-row { display: flex; gap: 8px; margin-top: 8px; }
.join-row .secondary { width: 104px; margin: 0; }
.room-entry-body > small { display: block; margin-top: 9px; color: var(--muted); font-size: 9px; line-height: 1.5; }

.room-panel { padding-top: 22px; }
.room-heading { display: flex; align-items: center; justify-content: space-between; }
.room-heading h2 { margin: 6px 0; font-size: 21px; }
.room-heading > strong { color: var(--cyan); font-size: 11px; }
.room-status { min-height: 22px; margin: 17px 0; color: var(--cyan); font-size: 12px; font-weight: 900; text-align: center; }
.room-invite { display: flex; gap: 14px; margin: 11px 0; padding: 12px; align-items: center; justify-content: space-between; border-radius: 7px; background: #071115; }
.room-code-display span, .room-code-display strong { display: block; }
.room-code-display span { color: var(--muted); font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.room-code-display strong { margin-top: 4px; color: var(--white); font-size: 23px; letter-spacing: .14em; user-select: all; }
.room-invite-actions { display: flex; gap: 7px; }
.room-invite-actions button { width: 104px; min-height: 38px; flex-shrink: 0; padding-inline: 8px; font-size: 8px; }
.room-target { margin: 17px 0; font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }
.room-players { margin: 18px 0; padding: 0; list-style: none; }
.room-players li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 9px 3px; border-bottom: 1px solid var(--line); font-size: 11px; }
.room-players strong { color: var(--cyan); }
.room-players small { align-self: center; color: var(--muted); font-size: 8px; }
.room-results { padding-top: 11px; border-top: 1px solid var(--line); }
.room-results h3 { font-size: 14px; }
.room-results p { color: var(--muted); font-size: 10px; line-height: 1.5; }
.room-results button { margin-top: 7px; }

.leaderboard { display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px; width: min(100%, 660px); margin: 22px auto 0; padding: 22px; border-top: 1px solid var(--line); }
.leaderboard h2 { margin: 6px 0; font-size: 19px; }
.leaderboard p:not(.eyebrow) { color: var(--muted); font-size: 11px; line-height: 1.5; }
.board-filters { display: flex; gap: 7px; margin-top: 14px; }
.board-filters select { min-width: 0; width: 100%; padding: 9px 8px; border: 1px solid var(--line); border-radius: 7px; background: #071115; color: var(--white); font-size: 10px; }
.leaderboard ol { margin: 0; padding: 0; list-style: none; }
.leaderboard li { display: grid; grid-template-columns: 27px 1fr auto; gap: 8px; padding: 9px 0; border-bottom: 1px solid #203239; color: var(--muted); font-size: 11px; }
.leaderboard li.empty { display: block; color: var(--muted); line-height: 1.5; }
.leaderboard li:last-child { border-bottom: 0; }
.leaderboard li b { color: var(--white); }
.leaderboard li strong { color: var(--cyan); font-variant-numeric: tabular-nums; }
.leaderboard li > span small { display: block; margin-top: 3px; color: #71858b; font-size: 7px; letter-spacing: .08em; }

footer { width: min(100%, 660px); margin: 15px auto 0; color: #71858b; font-size: 9px; line-height: 1.55; text-align: center; }
footer details { display: inline-block; }
footer summary { cursor: pointer; }
footer p { max-width: 560px; margin: 8px auto 0; }
.timelo-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-bottom: 12px; }
.timelo-footer-links a { color: #91a4aa; font-size: 10px; font-weight: 750; text-decoration: none; }
.timelo-footer-links a:hover { color: var(--cyan); }

@media (max-width: 620px) {
  .shell { width: min(100% - 20px, 960px); padding-top: 10px; }
  .topbar { min-height: auto; margin-bottom: 16px; flex-wrap: wrap; }
  .universe-switch { grid-template-columns: repeat(3, minmax(68px, 1fr)); width: 100%; }
  .game-product { height: 36px; padding-inline: 7px; font-size: .69rem; }
  .game-product img { width: 72px; }
  .account-link { margin-left: auto; padding: 0 2px; }
  .timelo-page-links { width: 100%; justify-content: flex-end; gap: 16px; }
  .game-card { padding: 28px 17px 24px; border-radius: 11px; }
  .game-card h1 { font-size: clamp(31px, 10vw, 43px); }
  .intro { font-size: 12px; }
  .quick-steps { font-size: 9px; }
  .quick-steps span { width: 18px; height: 18px; }
  .mode-tabs button { min-height: 58px; padding-inline: 5px; }
  .leaderboard { grid-template-columns: 1fr; gap: 10px; padding: 19px 4px; }
  .guess-row .primary { width: 106px; }
  .room-invite { align-items: stretch; flex-direction: column; }
  .room-invite-actions button { width: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .countdown-value, .timing-dots i { animation: none !important; }
}