:root {
  color-scheme: light;
  --background: #f7f4ee;
  --paper: #fffdf9;
  --ink: #282922;
  --muted: #615e55;
  --line: #dbd4c7;
  --orange: #a33e17;
  --orange-hover: #843212;
  --peach: #f9e7d9;
  --green: #21493b;
  --light-green: #e7f0e4;
  --cell-border: #849086;
  --gold: #744905;
  --gold-bg: #fff0cb;
  font: 400 17px/1.48 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--background);
  color: var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
button, input, select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; }
button, a, input, select, summary { touch-action: manipulation; }
:focus-visible { outline: 3px solid #b54b1d; outline-offset: 3px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.1; letter-spacing: -.045em; }
h2 { font-size: 1.38rem; line-height: 1.18; letter-spacing: -.022em; }
.bar { background: var(--paper); border-bottom: 1px solid var(--line); }
.bar-inner { max-width: 1050px; margin: auto; min-height: 64px; padding: 6px clamp(14px, 4vw, 34px); display: flex; gap: 12px; justify-content: space-between; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0; background: none; border: 0; color: var(--ink); font-size: 1.34rem; font-weight: 800; letter-spacing: -.04em; }
.logo { display: grid; grid-template-columns: repeat(2, 11px); gap: 2px; padding: 4px; border-radius: 7px; background: var(--orange); }
.logo b { display: grid; place-items: center; width: 11px; height: 11px; border-radius: 2px; background: #ffe5d2; color: #7f2c0c; font-size: 8px; }
.logo b:nth-child(3) { background: #cc815e; }
.wallet, .result-earn { display: flex; align-items: center; gap: 7px; padding: 6px 10px; color: var(--gold); background: var(--gold-bg); border-radius: 9px; }
.coin { font-weight: 750; line-height: 1; }
.wallet strong, .word-progress strong, .rank-score { font-variant-numeric: tabular-nums; }
.content { max-width: 1050px; min-height: calc(100dvh - 137px); margin: auto; padding: 25px clamp(14px, 4vw, 34px) 28px; }
.page-title { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.page-title > span, .intro { color: var(--muted); }
.intro { margin: 8px 0 16px; }
.notice, .empty { color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.notice { margin-bottom: 13px; }
.empty { margin-top: 12px; }
.button, .text-button { min-height: 49px; padding: 9px 14px; border: 1px solid transparent; border-radius: 10px; font-weight: 680; line-height: 1.2; }
.primary { color: #fff; background: var(--orange); }
.primary:hover { background: var(--orange-hover); }
.secondary { color: var(--ink); border-color: var(--line); background: var(--paper); }
.secondary:hover { background: #f4ede3; }
.light { color: #203427; background: #d4edb4; }
.light:hover { background: #e0f6c3; }
.text-button { border: 0; color: var(--ink); background: transparent; }
.text-button:hover { background: var(--peach); }
.button:disabled { opacity: .55; }
.wide { width: 100%; }
.daily { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0,.88fr); min-height: 220px; margin: 14px 0 20px; border-radius: 17px; background: #244a3b; color: #f8fbf0; }
.daily-copy { align-self: center; z-index: 1; padding: 22px 0 22px clamp(15px, 4vw, 30px); }
.daily-label { color: #e0efd7; font-size: .88rem; font-weight: 700; }
.daily h2 { margin: 7px 0; font-size: clamp(1.7rem,4.7vw,2.5rem); letter-spacing: -.035em; overflow-wrap: anywhere; }
#daily-meta { color: #e2ecdf; font-size: .88rem; }
.daily button { margin-top: 14px; }
.daily-art { position: absolute; right: clamp(-91px, -10vw, -12px); top: 50%; display: grid; grid-template-columns: repeat(8, clamp(25px,5vw,43px)); grid-auto-rows: clamp(25px,5vw,43px); gap: 2px; transform: translateY(-50%) rotate(-11deg); mask-image: linear-gradient(90deg, transparent, #000 24%); }
.daily-tile { display: grid; place-items: center; border: 1px solid #58806c; border-radius: 4px; background: #2a5342; font-weight: 780; }
.daily-tile.mark { color: #183225; background: #bcdf9e; }
.section-heading { margin: 19px 0 9px; }
.continue { margin-bottom: 11px; }
.all-levels, .questions { border: 1px solid var(--line); border-radius: 12px; background: var(--paper); padding: 0 13px; }
summary { display: list-item; min-height: 49px; align-content: center; font-weight: 700; cursor: pointer; }
.all-levels[open], .questions[open] { padding-bottom: 13px; }
.field { display: block; margin: 10px 0 5px; font-weight: 680; }
select, input { min-height: 50px; width: 100%; color: var(--ink); background: var(--paper); border: 1px solid #8a857a; border-radius: 9px; padding: 8px 12px; }
.puzzle-list { display: grid; gap: 8px; margin-top: 10px; }
.puzzle-card { display: grid; grid-template-columns: minmax(0,1fr) auto; width: 100%; align-items: center; min-height: 72px; padding: 11px 13px; gap: 8px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--paper); text-align: left; }
.puzzle-card:hover:not(:disabled) { border-color: var(--orange); }
.puzzle-card:disabled { color: var(--muted); background: #f2eee6; }
.puzzle-card .label, .puzzle-card .meta { display: block; color: var(--muted); font-size: .82rem; }
.puzzle-card strong { display: block; font-size: 1.05rem; line-height: 1.24; margin: 3px 0; }
.puzzle-card .puzzle-arrow { color: var(--orange); font-weight: 760; }
.puzzle-card:disabled .puzzle-arrow { color: var(--muted); }
.puzzle-card.featured { border-color: #b86543; background: var(--peach); }
.theme-banner { padding: 17px; border: 1px solid #e0bca1; border-radius: 13px; background: var(--peach); }
.theme-banner p { color: var(--muted); margin-top: 5px; }
.nav { position: sticky; bottom: 0; z-index: 4; border-top: 1px solid var(--line); background: var(--paper); padding-bottom: env(safe-area-inset-bottom); }
.nav > div { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); max-width: 700px; margin: auto; gap: 4px; padding: 5px 8px; }
.nav button { min-height: 53px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: .82rem; font-weight: 700; }
.nav button span { display: block; font-size: 1.13rem; line-height: 1.2; }
.nav button[aria-current] { background: var(--peach); color: #762d10; }
.own-rank { margin-bottom: 10px; padding: 10px 13px; border-radius: 9px; background: var(--light-green); }
.top-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; }
.top-list:empty { display: none; }
.top-list li + li { border-top: 1px solid var(--line); }
.top-list a { display: grid; grid-template-columns: 26px 42px minmax(0,1fr) auto; gap: 9px; align-items: center; min-height: 65px; padding: 8px 12px; color: var(--ink); text-decoration: none; }
.top-list a:hover, .top-list li.self { background: var(--light-green); }
.rank-photo { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; background: #ebe1d3; }
span.rank-photo { display: grid; place-items: center; }
.rank-name { font-weight: 700; overflow-wrap: anywhere; }
.rank-score { color: var(--gold); font-weight: 740; }
.progress-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.progress-stats > div { padding: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; }
.progress-stats strong, .progress-stats span { display: block; }
.progress-stats strong { font-size: 1.4rem; }
.progress-stats span { color: var(--muted); }
.game-title { display: flex; gap: 8px; align-items: end; justify-content: space-between; }
.game-title h1 { font-size: clamp(1.65rem,5vw,2.45rem); }
.eyebrow { color: var(--muted); font-weight: 680; font-size: .82rem; }
.back { margin: -12px 0 4px -10px; }
.word-progress { display: grid; justify-items: end; flex: none; color: var(--muted); font-size: .76rem; }
.word-progress strong { font-size: 1.03rem; color: var(--ink); }
.meter { display: block; width: 100%; height: 8px; margin: 10px 0 15px; appearance: none; overflow: hidden; border: 0; border-radius: 8px; background: #e5ded2; accent-color: #448050; }
.meter::-webkit-progress-bar { background: #e5ded2; }
.meter::-webkit-progress-value, .meter::-moz-progress-bar { background: #448050; }
.game-layout { display: grid; gap: 15px; align-items: start; }
.board-wrap { position: relative; display: grid; justify-items: center; }
.board { display: grid; width: min(100%,var(--board-width)); grid-template-columns: repeat(var(--cols),minmax(0,1fr)); padding: 1px; }
.cell { display: grid; position: relative; place-items: center; aspect-ratio: 1; min-width: 0; padding: 1px 0 0; border: 0; border-radius: 0; box-shadow: 0 0 0 .5px var(--cell-border); background: #fffdf9; color: var(--ink); font-size: clamp(.9rem, 4.1vw, 1.32rem); font-weight: 750; }
.gap { visibility: hidden; }
.cell.active { background: #f8d9ba; }
.cell.solved { background: #e3efd9; }
.cell.active.solved { background: #d4e4c3; }
.cell.pending { color: #8f391b; }
.cell b { position: absolute; top: 1px; left: 2px; font: 650 .55rem/1 system-ui; }
.cell.wave { z-index: 1; animation: wave 440ms ease-out var(--delay) both; }
@keyframes wave { 46% { background: #b8db8f; transform: scale(1.09); } }
.word-reward { position: absolute; top: 0; right: 1px; z-index: 2; padding: 5px 10px; background: var(--gold-bg); color: var(--gold); border-radius: 9px; font-weight: 760; animation: rise 1.05s ease both; pointer-events: none; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } 25%,75% { opacity: 1; } to { transform: translateY(-10px); opacity: 0; } }
.clue-panel { padding: 3px 8px 11px; border-radius: 11px; background: var(--light-green); }
.clue-nav { display: grid; grid-template-columns: 46px 1fr 46px; align-items: center; gap: 4px; text-align: center; }
.arrow { min-width: 45px; padding: 3px 8px; font-size: 1.6rem; }
.clue-text { font-size: 1.08rem; font-weight: 660; padding: 1px 6px; }
#answer { font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.game-buttons { display: grid; grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: 7px; margin-top: 9px; }
.game-buttons .button { padding-inline: 6px; }
.game-feedback { min-height: 24px; margin: 6px 0 7px; color: var(--muted); }
.game-feedback.error { color: #933418; }
.questions h3 { font-size: .9rem; margin: 7px 0; }
.question { width: 100%; min-height: 44px; display: block; text-align: left; padding: 7px 9px; border: 0; border-radius: 7px; background: none; color: var(--ink); }
.question:hover, .question[aria-pressed="true"] { background: var(--light-green); }
.result-panel { max-width: 490px; margin: auto; text-align: center; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); padding: clamp(16px,4vw,27px); }
.trophy { display: grid; place-items: center; width: 90px; height: 90px; margin: 0 auto 13px; border-radius: 50%; background: var(--gold-bg); color: var(--gold); font-size: 2.6rem; }
.celebrate .trophy { animation: celebrate 680ms ease both; }
@keyframes celebrate { 0% { opacity: 0; transform: scale(.65) rotate(-15deg); } 65% { transform: scale(1.1) rotate(7deg); } }
.result-panel h1 { margin: 6px 0; font-size: clamp(1.8rem,5vw,2.4rem); }
#result-name { color: var(--muted); }
.result-earn { justify-content: center; width: fit-content; margin: 15px auto; }
.result-panel button + button, dialog button.wide + button.wide { margin-top: 7px; }
#share-feedback, #hint-feedback { color: var(--muted); margin-top: 6px; }
dialog { width: min(420px,calc(100% - 24px)); border: 1px solid var(--line); border-radius: 15px; padding: 14px; color: var(--ink); background: var(--paper); }
dialog::backdrop { background: #23291c80; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
dialog p { margin: 6px 0 11px; }
@media (min-width: 690px) {
  .game-layout { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: 23px; }
  .puzzle-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .daily-art { right: clamp(5px,8vw,90px); }
}
@media (max-width: 360px) {
  .daily { grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); }
  .daily h2 { font-size: 1.62rem; }
  .nav button { font-size: .77rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cell.wave, .word-reward, .celebrate .trophy { animation: none; }
}
@media (max-width: 480px) {
  .daily { grid-template-columns: minmax(0,1.65fr) minmax(0,.35fr); }
  .daily h2 { overflow-wrap: normal; text-wrap: balance; }
  .daily-art { right: -67px; mask-image: linear-gradient(90deg, transparent, #000 45%); }
}