/* Shared layout for the game and the generated daily page. */
body[data-decor] {
  --ui-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display-font: "Courier New", ui-monospace, monospace;
  --ui-accent: #bd9aff;
  --ui-surface: #101225;
  --ui-border: #45415f;
  font-family: var(--ui-font);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0;
}

body[data-decor="future"] {
  --display-font: var(--ui-font);
  --ui-accent: #64ddf4;
  --ui-surface: #06171e;
  --ui-border: #245261;
}

body[data-decor] :is(.logo-wordmark, .mark, .future-mark, .local-setup h2, .daily-heading strong, .typing-word) {
  font-family: var(--display-font);
}

body[data-decor] :is(button, select, input, .text-button, .daily-heading time, .daily-note, .daily-streak, .daily-result p) {
  font-family: var(--ui-font);
  letter-spacing: 0;
}

body[data-decor] :is(.text-button, .actions .text-button, .language-select, .translation-field select, .mode-tabs button, .length-tabs button, .competitive-skip, .edit-pseudo) {
  min-height: 44px;
  height: auto;
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.3;
  text-transform: none;
  text-shadow: none;
}

body[data-decor] .text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

body[data-decor] :is(.topbar, .game, .side) {
  border-width: 1px;
  box-shadow: none;
}

body[data-decor] .topbar { padding: 12px 16px; gap: 16px; }
body[data-decor] .actions {
  position: relative;
  border: 0;
  padding: 0;
  gap: 8px;
  background: transparent;
  box-shadow: none;
}

body[data-decor] .actions .text-button {
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  box-shadow: none;
  color: var(--ink);
  transform: none;
}

body[data-decor] .actions .text-button::before { content: none; }
body[data-decor] .actions .text-button:hover { border-color: var(--ui-accent); }
body[data-decor] .nav-menu > summary { gap: 6px; padding: 10px 12px; }
body[data-decor] .nav-menu-panel { min-width: 240px; border-color: var(--ui-border); }
body[data-decor] .nav-menu-panel .text-button { justify-content: flex-start; text-align: left; }
body[data-decor] :is(.nav-menu[open], .nav-menu.mode-active) > summary {
  border-color: var(--ui-accent);
  background: var(--ui-surface);
  color: #fff;
}
body[data-decor] .actions #dailyToggle.active { background: #143c2c; border-color: #3ac780; color: #ebfff4; }
body[data-decor] .actions .text-button.active { border-color: var(--ui-accent); }
body[data-decor] .actions #reveal { color: #f2b9c3; }

body[data-decor] :is(button, summary, a, select, input):focus-visible {
  outline: 2px solid var(--ui-accent);
  outline-offset: 3px;
}

body[data-decor] .mode-tabs {
  width: 100%;
  min-width: 0;
  margin: 0 auto 12px;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid var(--ui-border);
  background: transparent;
  box-shadow: none;
}
body[data-decor] .mode-tabs button { padding: 10px 8px; min-width: 0; }
body[data-decor] .mode-tabs button.active { box-shadow: none; }
body[data-decor] .mode-tabs button.active::after { background: currentColor; box-shadow: none; height: 2px; }

body[data-decor] .daily-banner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  padding: 0 0 8px;
  margin: 0;
  border: 0;
  text-align: center;
}
.daily-heading { justify-content: center; gap: 6px 12px; }
body[data-decor] .daily-heading strong { font-size: 1.125rem; color: var(--ink); }
body[data-decor] .daily-heading time { font-size: .875rem; }
body[data-decor] .daily-streak { display: flex; justify-content: center; align-items: baseline; gap: 5px; font-size: .875rem; text-align: center; }
body[data-decor] .daily-streak strong { display: inline; font-size: 1rem; color: #5cdda0; }
body[data-decor] .daily-streak > span:first-child { margin-right: 5px; color: var(--muted); }
body[data-decor] .daily-storage-note { margin: 12px 0 0; font-size: .8125rem; text-align: center; color: #bcc3ce; }
body[data-decor] .status-row { gap: 8px; margin-bottom: 12px; padding-bottom: 8px; min-height: 36px; }
body[data-decor] .status { font-size: .875rem; min-height: 28px; line-height: 1.4; }
.game.daily-mode .status { justify-content: center; width: 100%; }
.game.daily-mode .status-row { justify-content: center; }

body[data-decor] .board-wrap { container-type: inline-size; min-height: 0; padding: 0 0 16px; }
body[data-decor] .board {
  --tile-size: min(56px, calc((100cqw - (var(--letters) - 1) * 6px) / var(--letters)));
  gap: 6px;
}
body[data-decor] .row { gap: 6px; }
body[data-decor] .tile { font-size: min(1.75rem, calc(var(--tile-size) * .6)); text-shadow: none; }
body[data-decor] .keyboard { width: min(100%, 620px); margin: 0 auto; gap: 6px; }
body[data-decor] .key-row { display: flex; justify-content: center; gap: 6px; }
.key-row > span { display: none; }
body[data-decor] .key { flex: 0 1 56px; min-width: 0; height: 44px; font-size: 1rem; font-weight: 650; text-shadow: none; }
body[data-decor] .key.wide { flex-basis: 76px; font-size: 1.25rem; }

body[data-decor] .panel { padding: 16px; box-shadow: none; }
body[data-decor] .panel h2 { font-family: var(--ui-font); font-size: .875rem; line-height: 1.4; text-transform: none; color: var(--ink); }
body[data-decor] .stat { border-radius: 0; }
body[data-decor] .stat strong { font-size: 1.5rem; text-shadow: none; }
body[data-decor] .stat span { font-size: .875rem; line-height: 1.3; text-transform: none; overflow-wrap: normal; }
body[data-decor] .rule-goal { padding: 0; border: 0; background: none; box-shadow: none; font-size: 1rem; text-transform: none; text-shadow: none; }
body[data-decor] .rule-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
body[data-decor] .rule-meta span { border: 0; background: transparent; padding: 0; font-size: .8125rem; line-height: 1.4; color: var(--muted); text-transform: none; text-align: left; }
body[data-decor] :is(.quick-rule, .quick-rule span, .rule-competitive, .leaderboard-empty, .leaderboard-player, .leaderboard-scope, .leaderboard-list) { font-size: .875rem; line-height: 1.5; text-transform: none; }
body[data-decor] .quick-rule { align-items: center; }
body[data-decor] .quick-rule b { width: 18px; height: 18px; }
body[data-decor] :is(.menu-field, .translation-field, .control-label, .clue-label, .competitive-metric span, .typing-label) { font-size: .875rem; line-height: 1.4; text-transform: none; }
body[data-decor] :is(.local-instruction, .typing-hint, .share-note, .hint, .profile-dialog p, .loss-dialog p) { font-size: 1rem; line-height: 1.5; text-transform: none; }
body[data-decor] :is(.daily-note, .rule-meta span, .quick-rule span, .stat span, .local-instruction, .typing-hint, .share-note, .hint) { font-weight: 500; }
body[data-decor] .menu-field select { min-height: 44px; font-size: 1rem; }
body[data-decor] .length-tabs { display: flex; flex-wrap: wrap; justify-content: center; }
body[data-decor] .length-tabs button { width: 44px; min-width: 44px; padding: 0; }
body[data-decor] .legal-footer { gap: 4px 10px; font-size: .8125rem; line-height: 1.5; text-transform: none; }
.legal-footer a { display: inline-flex; align-items: center; min-height: 36px; }

@media (min-width: 681px) {
  body[data-decor] .layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; }
  body[data-decor] .status-row { flex-wrap: wrap; }
  body[data-decor] .length-control { flex-wrap: wrap; }
}

/* Anchor every narrow-screen dropdown to the whole navigation, not its button. */
@media (max-width: 1000px) {
  body[data-decor] .topbar { flex-wrap: wrap; }
  body[data-decor] .brand { width: 100%; justify-content: center; }
  body[data-decor] .actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
  body[data-decor] .nav-menu { position: static; }
  body[data-decor] .nav-menu-panel { left: 0; right: 0; top: calc(100% + 8px); width: 100%; min-width: 0; max-height: min(60dvh, 380px); overflow-y: auto; }
  body[data-decor] .nav-menu > summary { width: 100%; }
  body[data-decor] .layout { grid-template-columns: minmax(0, 1fr); }
  body[data-decor] .mode-tabs.language-modes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  body[data-decor] .topbar { padding: 8px; gap: 8px; }
  body[data-decor] .brand { min-height: 32px; }
  body[data-decor] .actions { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  body[data-decor] .actions > :is(#dailyToggle, .guess-menu) { grid-column: span 3; }
  body[data-decor] .actions > :is(.speed-menu, .friends-menu, .options-menu) { grid-column: span 2; }
  body[data-decor] .actions > #dailyToggle,
  body[data-decor] .nav-menu > summary { padding: 6px 4px; min-height: 48px; height: 100%; font-size: .875rem; }
  body[data-decor] .nav-menu-panel .text-button { padding: 10px 12px; overflow: visible; }
  body[data-decor] .game { padding: 10px; }
  body[data-decor] .mode-tabs { padding-bottom: 6px; margin-bottom: 10px; scrollbar-width: thin; }
  body[data-decor] .mode-tabs::-webkit-scrollbar { display: block; height: 3px; }
  body[data-decor] .mode-tabs::-webkit-scrollbar-thumb { background: var(--ui-border); }
  body[data-decor] .mode-tabs button { min-width: 90px; padding: 10px; }
  body[data-decor] .daily-heading strong { font-size: 1.125rem; }
  body[data-decor] .daily-heading time { font-size: .8125rem; }
  body[data-decor] .daily-streak { font-size: .8125rem; }
  body[data-decor] .status-row { padding-bottom: 6px; margin-bottom: 8px; }
  body[data-decor] .board-wrap { padding-bottom: 10px; }
  body[data-decor] .board { --tile-size: min(46px, calc((100cqw - (var(--letters) - 1) * 4px) / var(--letters))); gap: 4px; }
  body[data-decor] .row { gap: 4px; }
  body[data-decor] .length-control { display: grid; grid-template-columns: 1fr; }
  body[data-decor] .length-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; }
  body[data-decor] .length-tabs button { width: 100%; }
  body[data-decor] :is(.mobile-guess-input, #mobileGuessSubmit) { min-height: 46px; }
  body[data-decor] #mobileGuessSubmit { display: flex; font-size: 0; line-height: 0; }
  body[data-decor] .translation-route { font-size: 2rem; }
  body[data-decor] .local-versus { font-size: 2rem; }
  body[data-decor] .local-setup h2 { font-size: 1.5rem; overflow-wrap: anywhere; }
  body[data-decor] .translation-controls { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 6px; }
  body[data-decor] .translation-field select { padding-left: 6px; padding-right: 16px; }
  body[data-decor] .legal-footer > span[aria-hidden] { display: none; }
  .legal-footer a { min-height: 44px; }
  body[data-decor] .mobile-focus-status { font-size: .8125rem; text-transform: none; white-space: normal; }
  body[data-decor] .mobile-focus-close { min-height: 44px; width: 44px; }
  body[data-decor].mobile-input-active .mobile-focus-bar { grid-template-columns: auto minmax(0, 1fr) 44px; }
  body.mobile-input-active .daily-storage-note { display: none; }
  body[data-decor].mobile-input-active .board {
    --tile-size: min(44px, calc((100cqw - (var(--letters) - 1) * 3px) / var(--letters)), calc((var(--mobile-viewport-height, 100svh) - 160px) / 6));
    gap: 3px;
  }
  body[data-decor].mobile-input-active .row { gap: 3px; }
  body[data-decor].mobile-input-active:has(.clue-panel:not([hidden])) .board {
    --tile-size: min(42px, calc((100cqw - (var(--letters) - 1) * 3px) / var(--letters)), calc((var(--mobile-viewport-height, 100svh) - 214px) / 6));
  }
  body[data-decor].mobile-input-active:has(.competitive-hud:not([hidden])) .board {
    --tile-size: min(38px, calc((100cqw - (var(--letters) - 1) * 3px) / var(--letters)), calc((var(--mobile-viewport-height, 100svh) - 244px) / 6));
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-decor] :is(button, .text-button, .tile) { transition: none; animation: none; }
}