:root {
  color-scheme: dark;
  --bg: #0b0b0a;
  --panel: #171715;
  --panel-2: #20201d;
  --line: rgba(238, 207, 126, .18);
  --gold: #e7c568;
  --gold-2: #f7e2a3;
  --cream: #f4efe2;
  --muted: #aaa69b;
  --danger: #6b1f19;
  --shadow: 0 18px 50px rgba(0, 0, 0, .32);
  --radius: 26px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at 75% -20%, #373327 0, transparent 36rem), var(--bg); color: var(--cream); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); line-height: 1.5; }
.eyebrow { margin: 0 0 .35rem; color: var(--gold); font-weight: 900; font-size: .76rem; letter-spacing: .19em; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(2.35rem, 7vw, 5rem); letter-spacing: -.055em; line-height: .96; }
h2 { margin: 0 0 .45rem; font-size: clamp(1.3rem, 3vw, 2rem); }
h3 { margin: 0 0 .65rem; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: max(1.25rem, env(safe-area-inset-top)) 1rem max(1.25rem, env(safe-area-inset-bottom)); }
.login-card { width: min(100%, 34rem); padding: clamp(1.5rem, 5vw, 3rem); border: 1px solid var(--line); border-radius: 34px; background: linear-gradient(145deg, rgba(36, 35, 31, .96), rgba(16, 16, 15, .98)); box-shadow: var(--shadow); }
.login-card > .muted { margin: 1rem 0 2rem; }
.stack { display: grid; gap: 1rem; }
label { display: grid; gap: .45rem; color: var(--cream); font-weight: 750; }
input, select { width: 100%; min-height: 3.15rem; border: 1px solid rgba(238, 207, 126, .22); border-radius: 15px; padding: .8rem 1rem; background: #11110f; color: var(--cream); outline: none; }
input:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(231, 197, 104, .12); }
button { min-height: 3rem; border: 0; border-radius: 15px; padding: .75rem 1rem; font-weight: 850; color: var(--cream); background: #292824; }
button:hover { filter: brightness(1.09); }
button:disabled { opacity: .55; cursor: wait; }
.primary { color: #17130a; background: linear-gradient(135deg, var(--gold-2), var(--gold)); }
.secondary { border: 1px solid var(--line); background: linear-gradient(180deg, #292824, #1b1b19); color: var(--gold-2); }
.danger { background: linear-gradient(180deg, #74251e, #4f1713); color: #fff4ec; }

.site-header { width: min(100%, 94rem); margin: 0 auto; padding: max(2rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 4rem) 2rem; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.account-button { flex: 0 0 auto; min-width: 3.2rem; border: 1px solid var(--line); border-radius: 999px; color: #17130a; background: var(--gold-2); }
.content { width: min(100%, 94rem); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 4rem) 6rem; display: grid; gap: 1rem; }
.weather-card { position: relative; min-height: 11rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1rem, 3vw, 2rem); align-items: center; padding: clamp(1.3rem, 4vw, 2.4rem); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(145deg, rgba(48, 45, 37, .98), rgba(22, 22, 20, .98)); box-shadow: var(--shadow); }
.weather-icon { width: clamp(4.5rem, 10vw, 6.5rem); aspect-ratio: 1; display: grid; place-items: center; border-radius: 24px; color: #17130a; background: linear-gradient(145deg, var(--gold-2), var(--gold)); font-size: clamp(2rem, 5vw, 3.25rem); }
.weather-copy .eyebrow { margin-bottom: .55rem; }
.weather-current { display: flex; flex-wrap: wrap; gap: .45rem 1rem; align-items: baseline; }
.weather-current strong { font-size: clamp(2.4rem, 7vw, 4.75rem); line-height: 1; letter-spacing: -.05em; }
.weather-current span { color: var(--gold-2); font-size: clamp(1.15rem, 3vw, 1.8rem); font-weight: 850; }
.weather-meta { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; color: var(--muted); }
.weather-meta strong { color: var(--cream); }
.weather-refresh { width: 3rem; height: 3rem; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--gold); background: rgba(0, 0, 0, .22); font-size: 1.35rem; }
.weather-refresh.loading { animation: weather-spin .8s linear infinite; }
.weather-error .weather-icon { color: var(--cream); background: #3b3933; }
.weather-forecast { margin-top: 1.15rem; display: grid; grid-template-columns: repeat(3, minmax(8rem, 1fr)); gap: .55rem; }
.forecast-day { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .55rem; align-items: center; padding: .7rem .8rem; border: 1px solid rgba(238, 207, 126, .13); border-radius: 15px; background: rgba(0,0,0,.18); }
.forecast-day strong, .forecast-day small { display: block; }
.forecast-day small { color: var(--muted); font-size: .72rem; }
.forecast-icon { color: var(--gold); font-size: 1.35rem; }
.forecast-values { text-align: right; }
.forecast-values > strong { color: var(--cream); }
.forecast-values > span { color: var(--muted); }
.forecast-values > small { color: var(--gold-2); white-space: nowrap; }
@keyframes weather-spin { to { transform: rotate(360deg); } }
.area { border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(150deg, rgba(35, 34, 31, .98), rgba(19, 19, 18, .98)); overflow: clip; box-shadow: var(--shadow); }
.area > summary { min-height: 7rem; padding: 1.25rem clamp(1.1rem, 3vw, 2rem); display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; list-style: none; cursor: pointer; }
.area > summary::-webkit-details-marker { display: none; }
.area summary small { display: block; margin-bottom: .3rem; color: var(--gold); font-weight: 900; font-size: .7rem; letter-spacing: .18em; }
.area summary span:nth-child(2) { font-size: clamp(1.45rem, 4vw, 2.25rem); font-weight: 900; letter-spacing: -.025em; }
.area-icon { width: 3.4rem; height: 3.4rem; display: grid; place-items: center; border-radius: 17px; background: var(--gold-2); color: #17130a; font-size: 1.45rem; font-weight: 950; }
.chevron { color: var(--gold); font-size: 2rem; transition: transform .2s ease; }
.area[open] .chevron { transform: rotate(180deg); }
.area-body { border-top: 1px solid var(--line); padding: clamp(1rem, 3vw, 2rem); }

.row-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(7rem, .28fr) auto; gap: .75rem; align-items: end; }
.item-list { margin-top: 1.25rem; display: grid; gap: .65rem; }
.shopping-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .85rem; align-items: center; padding: .8rem; border: 1px solid rgba(255,255,255,.06); border-radius: 18px; background: rgba(255,255,255,.025); }
.shopping-item.done .item-title { text-decoration: line-through; color: var(--muted); }
.check { width: 2.4rem; height: 2.4rem; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--gold); background: #10100f; }
.item-title { font-weight: 850; }
.item-meta { margin-top: .2rem; color: var(--muted); font-size: .82rem; }
.item-actions { display: flex; gap: .4rem; }
.item-actions button { min-height: 2.4rem; padding: .4rem .65rem; }
.empty { padding: 2rem 1rem; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 18px; }

.wishlist-toolbar { width: min(100%, 24rem); margin-bottom: 1rem; }
.wishlist-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: .75rem; align-items: end; }
.wishlist-list { margin-top: 1rem; display: grid; gap: .65rem; }
.wishlist-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .8rem; align-items: center; padding: .9rem 1rem; border: 1px solid rgba(255,255,255,.06); border-radius: 18px; background: rgba(255,255,255,.025); }
.wishlist-item p { margin: .25rem 0 0; color: var(--muted); }

.tabs { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .85rem; scrollbar-width: thin; }
.tabs button { flex: 0 0 auto; min-height: 2.65rem; color: var(--muted); }
.tabs button.active { color: #17130a; background: var(--gold); }
.game-panel { margin-top: .35rem; padding: clamp(1rem, 3vw, 1.6rem); border: 1px solid rgba(255,255,255,.06); border-radius: 22px; background: rgba(0,0,0,.18); }
.panel-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.panel-head p { margin: 0; color: var(--muted); }
.status-line { min-height: 1.5rem; color: var(--gold-2); font-weight: 750; }
.memory-board { max-width: 38rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem; }
.memory-card { aspect-ratio: 1; min-height: 0; padding: 0; font-size: clamp(1.35rem, 6vw, 2.5rem); color: transparent; background: linear-gradient(145deg, #37352f, #1c1c1a); border: 1px solid var(--line); }
.memory-card.open, .memory-card.matched { color: #17130a; background: var(--gold-2); }
.memory-card.matched { opacity: .68; }
.tic-tac-toe-board { width: min(100%, 24rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.tic-cell { aspect-ratio: 1; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, #302f2a, #171715); font-size: clamp(2rem, 10vw, 4.5rem); }
.tic-cell.mark-x { color: var(--gold); }
.tic-cell.mark-o { color: var(--cream); }
.connect-four-board { width: min(100%, 38rem); display: grid; grid-template-columns: repeat(7, 1fr); gap: clamp(.25rem, 1vw, .5rem); padding: clamp(.5rem, 2vw, .85rem); border: 1px solid var(--line); border-radius: 20px; background: #24231f; }
.connect-cell { aspect-ratio: 1; min-height: 0; padding: 9%; border-radius: 50%; background: transparent; }
.connect-cell span { width: 100%; height: 100%; display: block; border-radius: 50%; border: 1px solid rgba(238,207,126,.14); background: #0f0f0e; box-shadow: inset 0 4px 10px rgba(0,0,0,.45); }
.connect-cell.player-1 span { border-color: var(--gold); background: linear-gradient(145deg, var(--gold-2), var(--gold)); }
.connect-cell.player-2 span { border-color: #d8d3c7; background: linear-gradient(145deg, #f3eee2, #9e9a90); }
.guess-form { display: grid; grid-template-columns: minmax(7rem, 12rem) auto; gap: .65rem; align-items: center; }
.question-form { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.span-2 { grid-column: 1 / -1; }
.quiz-question, .question-row, .score-card { padding: 1rem; margin-top: .75rem; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; background: rgba(255,255,255,.025); }
.quiz-question fieldset { border: 0; padding: 0; margin: .8rem 0 0; display: grid; gap: .45rem; }
.quiz-question label { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: 12px; background: #11110f; }
.quiz-question input { width: auto; min-height: 0; accent-color: var(--gold); }
.question-row { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: center; }
.question-row p { margin: 0; }
.leaderboard { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.score-card ol { margin: .65rem 0 0; padding-left: 1.5rem; }
.score-card li { margin: .35rem 0; }
.records { margin-top: .8rem; }

.station-list { display: grid; gap: .7rem; }
.station { min-height: 5rem; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid rgba(255,255,255,.07); border-radius: 20px; background: rgba(255,255,255,.03); }
.station strong { display: block; font-size: 1.15rem; }
.station-status { margin-top: .25rem; color: var(--gold); font-size: .88rem; }
.station button { width: 3.5rem; height: 3.5rem; min-height: 0; padding: 0; border-radius: 50%; color: var(--gold); font-size: 1.25rem; }
.station.playing { border-color: rgba(231,197,104,.65); background: rgba(231,197,104,.08); }

footer { width: min(100%, 94rem); margin: -4rem auto 0; padding: 0 clamp(1rem, 4vw, 4rem) max(2rem, env(safe-area-inset-bottom)); display: flex; gap: .55rem; align-items: center; color: var(--gold-2); font-weight: 750; }
.online-dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--gold); box-shadow: 0 0 14px var(--gold); }
.toast { position: fixed; z-index: 50; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); translate: -50% 1rem; width: min(calc(100% - 2rem), 34rem); padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: #23221f; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; translate: -50% 0; }
.toast.error { border-color: rgba(255,115,101,.55); }

dialog { width: min(calc(100% - 2rem), 42rem); max-height: calc(100dvh - 2rem); overflow: auto; border: 1px solid var(--line); border-radius: 28px; padding: 1.25rem; background: #171715; color: var(--cream); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(5px); }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.2rem; }
.icon-button { width: 2.7rem; height: 2.7rem; min-height: 0; padding: 0; border-radius: 50%; font-size: 1.5rem; }
.inline-card { padding: 1rem; border: 1px solid rgba(255,255,255,.07); border-radius: 18px; background: rgba(255,255,255,.025); }
.inline-card form, .admin-user { display: grid; gap: .55rem; }
.admin-user { grid-template-columns: minmax(0, 1fr) minmax(6rem, 9rem) auto; align-items: center; padding: .65rem 0; border-top: 1px solid rgba(255,255,255,.06); }
.admin-user:first-child { border-top: 0; }
.admin-user input { min-height: 2.65rem; }
.passkey-row { display: flex; gap: .5rem; justify-content: space-between; align-items: center; margin: .45rem 0; }
.passkey-row button { min-height: 2.35rem; }
.notification-form { margin-top: .85rem; }
.notification-list { margin-top: 1rem; display: grid; gap: .55rem; }
.notification-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .8rem 0; border-top: 1px solid rgba(255,255,255,.06); }
.notification-item p { margin: .25rem 0; color: var(--muted); }
.notification-item small { color: var(--gold-2); }
.notification-item button { min-height: 2.35rem; }
.notification-sent { color: var(--gold); font-weight: 800; white-space: nowrap; }

@media (max-width: 680px) {
  .site-header { align-items: center; }
  .weather-card { grid-template-columns: auto minmax(0, 1fr); }
  .weather-forecast { grid-column: 1 / -1; overflow-x: auto; grid-template-columns: repeat(3, minmax(9.5rem, 1fr)); padding-bottom: .2rem; }
  .weather-refresh { position: absolute; top: 1rem; right: 1rem; }
  .weather-meta { display: grid; gap: .25rem; }
  .row-form { grid-template-columns: 1fr 7rem; }
  .row-form button { grid-column: 1 / -1; }
  .panel-head { display: grid; }
  .question-form, .leaderboard { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .admin-user { grid-template-columns: 1fr auto; }
  .admin-user input { grid-column: 1 / -1; }
  .shopping-item { grid-template-columns: auto minmax(0, 1fr); }
  .item-actions { grid-column: 2; }
  .wishlist-form { grid-template-columns: 1fr; }
  .wishlist-item { grid-template-columns: 1fr; }
  .wishlist-item .item-actions { grid-column: auto; }
  .connect-four-board { gap: .2rem; padding: .4rem; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }