:root {
  color-scheme: dark;
  --page: #212121;
  --page-glow: rgba(16, 163, 127, .08);
  --surface: #2f2f2f;
  --surface-strong: #363636;
  --border: #454545;
  --text: #ececec;
}

html[data-theme="light"] {
  color-scheme: light;
  --page: #f7f7f8;
  --page-glow: rgba(16, 163, 127, .07);
  --surface: #ffffff;
  --surface-strong: #f0f0f0;
  --border: #d9d9df;
  --text: #2f2f2f;
}
html[data-theme="light"] body.bg-slate-950 { background-color: var(--page) !important; }

html, body { min-height: 100%; background: var(--page); }
body {
  min-height: 100dvh;
  overflow-x: hidden;
  background-color: var(--page) !important;
  background-image: radial-gradient(ellipse 70% 40% at 50% -10%, var(--page-glow), transparent 70%) !important;
  color: var(--text) !important;
  transition: background-color .2s ease, color .2s ease;
}
header {
  background: color-mix(in srgb, var(--page) 88%, transparent) !important;
  border-color: var(--border) !important;
}
.mode-panel,
#post-game,
#account-dropdown,
[id^="modal-"]:not(#modal-backdrop) > div {
  background: color-mix(in srgb, var(--surface) 95%, transparent) !important;
  border-color: var(--border) !important;
}
input {
  background: color-mix(in srgb, var(--surface-strong) 88%, transparent) !important;
  border-color: var(--border) !important;
}
#btn-theme { min-width: 38px; font-size: 18px; line-height: 1; }
#btn-account { border: 1px solid transparent; }
.mobile-guess-input,
.mobile-input-help { display: none; }

html[data-theme="light"] .text-slate-50,
html[data-theme="light"] .text-slate-100,
html[data-theme="light"] .text-slate-200 { color: #2f2f2f !important; }
html[data-theme="light"] .text-slate-300,
html[data-theme="light"] .text-slate-400 { color: #555b63 !important; }
html[data-theme="light"] .text-slate-500,
html[data-theme="light"] .text-slate-600 { color: #70757d !important; }
html[data-theme="light"] .bg-slate-950,
html[data-theme="light"] .bg-slate-900,
html[data-theme="light"] .bg-slate-900\/70,
html[data-theme="light"] .bg-slate-900\/90,
html[data-theme="light"] .bg-slate-800\/90 { background-color: #fff !important; }
html[data-theme="light"] .bg-slate-800,
html[data-theme="light"] .bg-slate-700 { background-color: #ececf1 !important; }
html[data-theme="light"] .border-slate-600,
html[data-theme="light"] .border-slate-700,
html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .border-white\/10,
html[data-theme="light"] .border-white\/\[0\.06\] { border-color: #d9d9df !important; }
html[data-theme="light"] #btn-signin { background: #2f2f2f !important; color: #fff !important; }
html[data-theme="light"] #btn-account,
html[data-theme="light"] #btn-share { background: #e9e9ee !important; color: #2f2f2f !important; }
html[data-theme="light"] #modal-backdrop { background: rgba(31, 31, 31, .28) !important; }
html[data-theme="light"] #grid .bg-slate-800,
html[data-theme="light"] #keyboard .bg-slate-800,
html[data-theme="light"] #keyboard .bg-slate-900 { background-color: #e7e7ec !important; }
html[data-theme="light"] #grid .border-slate-600,
html[data-theme="light"] #grid .border-slate-700 { border-color: #b8bbc2 !important; }
html[data-theme="light"] #keyboard button { color: #303238 !important; }
html[data-theme="light"] #keyboard .bg-brand-500,
html[data-theme="light"] #keyboard .bg-yellow-400 { color: #111 !important; }

@media (max-width: 480px) {
  header > div { padding: .75rem; }
  header nav { gap: 0; }
  header nav > button { padding: .4rem !important; }
  #btn-theme { min-width: 31px; }
  #btn-signin { margin-left: .25rem; padding: .45rem .75rem; }
  #btn-signin, #guess-counter, #btn-hint { white-space: nowrap; flex-shrink: 0; }
  #account-menu-wrap { margin-left: .25rem; }
  #btn-account { gap: .35rem; padding: .35rem .45rem .35rem .65rem; }
  #account-username { max-width: 72px; }
  main { gap: 1.15rem !important; padding: 1.25rem .75rem !important; }
  .mode-panel { padding: .7rem .8rem; }
  #grid, #sidebar { gap: 6px !important; }
  #grid > div { gap: 6px !important; }
  #grid > div > div {
    width: clamp(36px, 11.3vw, 44px) !important;
    height: clamp(36px, 11.2vw, 44px) !important;
    border-radius: 12px !important;
    font-size: 20px !important;
  }
  #sidebar > div {
    min-width: 50px !important;
    height: clamp(36px, 11.2vw, 44px) !important;
    border-radius: 12px !important;
    padding-left: .35rem;
    padding-right: .35rem;
  }
  #grid + #sidebar { margin-left: -2px; }
  #keyboard { gap: 6px !important; }
  #keyboard > div { gap: 3px !important; }
  #keyboard button {
    width: clamp(25px, calc((100vw - 60px) / 10), 36px) !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 9px !important;
    font-size: 13px !important;
  }
  #keyboard button[data-key="ENTER"],
  #keyboard button[data-key="BACK"] {
    width: clamp(42px, 14vw, 62px) !important;
    font-size: 11px !important;
  }
  #post-game { padding: 1.1rem; border-radius: 20px; }
  [id^="modal-"]:not(#modal-backdrop) { align-items: flex-end !important; padding: 0 !important; }
  [id^="modal-"]:not(#modal-backdrop) > div {
    max-width: none !important;
    max-height: 92dvh;
    overflow-y: auto;
    border-radius: 22px 22px 0 0 !important;
    padding: 1.25rem !important;
  }
}

@media (max-width: 768px) and (pointer: coarse) {
  #keyboard { display: none !important; }
  .mobile-input-help { display: block; margin-top: -.25rem; }
  .mobile-guess-input {
    display: block;
    position: fixed;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: .01;
    font-size: 16px;
    caret-color: transparent;
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 360px) {
  main > div:first-child { flex-wrap: wrap; row-gap: .35rem; }
  main > div:first-child > span:last-child { width: 100%; justify-content: flex-end; }
}