:root {
  color-scheme: light;
  font-family: "DM Sans", Arial, sans-serif;
  color: #25332d;
  background: #f4f4ee;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --green: #4c7c60;
  --green-dark: #345c46;
  --yellow: #d1a744;
  --key-bg: #35413b;
  --key-absent: #a6aca4;
  --ink: #27352f;
  --muted: #81877f;
  --line: #e0e3dc;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-padding-bottom: 180px; }
body { min-width: 320px; min-height: 100vh; min-height: 100dvh; margin: 0; background: radial-gradient(ellipse at 50% -10%, #fffef8 0, transparent 53%), #f4f4ee; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }
.app-shell { display: flex; flex-direction: column; width: min(100%, 960px); min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding: 0 38px; }
.topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 72px; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; justify-self: start; gap: 9px; font-size: 13px; font-weight: 800; letter-spacing: .17em; }
.brand-mark { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; background: #e2eadf; color: var(--green-dark); font-size: 15px; letter-spacing: -.08em; }
.main-nav { display: flex; align-items: center; gap: 5px; padding: 4px; border: 1px solid #e4e5df; border-radius: 10px; background: #eeefe9; }
.nav-link { min-height: 34px; padding: 8px 16px; border-radius: 7px; color: #737a72; font-size: 12px; font-weight: 700; transition: color .18s, background .18s, box-shadow .18s; }
.nav-link:hover { color: var(--ink); }
.nav-link.active { background: #fffefa; color: var(--ink); box-shadow: 0 1px 4px #20282012; }
.header-actions { display: flex; justify-self: end; gap: 4px; }
.header-spacer { justify-self: end; width: 76px; }
.icon-button { display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #657168; cursor: pointer; }
.icon-button:hover { background: #e9ece5; }
.icon-button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.game-main { display: flex; flex: 1; flex-direction: column; align-items: center; width: 100%; }
.intro { margin: 23px 0 17px; text-align: center; }
.eyebrow { margin: 0 0 8px; color: var(--green); font-size: 9px; font-weight: 800; letter-spacing: .19em; }
.intro h1 { margin: 0; color: #202c26; font-size: clamp(26px, 4vw, 33px); font-weight: 700; letter-spacing: -.05em; line-height: 1.12; }
.subtitle { margin: 8px 0 0; color: #757b73; font-size: 13px; }
.play-area { display: flex; flex-direction: column; align-items: center; width: 100%; }
.game-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; width: min(100%, 700px); min-height: 38px; margin: 0 0 8px; color: #898e85; font-size: 10px; letter-spacing: .03em; }
#attempt-counter { color: #59645b; font-weight: 700; }
#game-status { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.surrender-row { display: flex; justify-content: flex-end; width: min(100%, 700px); margin: -3px 0 7px; }
.surrender-button, .secondary-button, .danger-button { min-height: 34px; padding: 7px 13px; border: 1px solid #e1e4dc; border-radius: 7px; cursor: pointer; font-size: 11px; font-weight: 700; transition: background .15s, border-color .15s, opacity .15s; }
.surrender-button { background: #fffefa; color: #8c5d53; }
.surrender-button:hover:not(:disabled) { border-color: #d7b9b2; background: #fbf2ef; }
.surrender-button:disabled { cursor: default; opacity: .5; }
.surrender-button[hidden] { display: none; }
.game-timer { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 10px; border: 1px solid #e1e5dc; border-radius: 999px; background: #fffefa; color: #59645b; box-shadow: 0 3px 12px #26342e08; white-space: nowrap; transition: border-color .2s, background .2s, box-shadow .2s; }
.timer-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.timer-label { color: #888f86; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.game-timer time { min-width: 42px; color: var(--ink); font-family: var(--mono); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.timer-state { color: #999f96; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.game-timer[data-state="running"] { border-color: #bdd0bd; background: #f6faf4; box-shadow: 0 3px 14px #4c7c6016; }
.game-timer[data-state="running"] .timer-icon { color: var(--green); animation: timer-tick 2s ease-in-out infinite; }
.game-timer[data-state="running"] .timer-state { color: var(--green-dark); }
.game-timer[data-state="finished"] { border-color: #d9e4d8; background: #edf4eb; color: var(--green-dark); }
.game-timer[data-state="finished"] .timer-state { color: var(--green-dark); }
.game-timer[data-state="lost"] { border-color: #e7c2bd; background: #fcf1ef; color: #914d43; box-shadow: 0 3px 14px #914d4316; }
.game-timer[data-state="lost"] time, .game-timer[data-state="lost"] .timer-state { color: #914d43; }
.toast { position: fixed; z-index: 5; top: 88px; left: 50%; max-width: calc(100vw - 28px); padding: 11px 16px; transform: translate(-50%, -10px); border-radius: 8px; background: #26342e; color: #fff; box-shadow: 0 8px 24px #19251f28; font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; text-align: center; transition: opacity .18s, transform .18s; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.reveal-panel { width: min(100%, 700px); max-height: 150px; overflow-y: auto; margin: 0 0 9px; padding: 10px 12px; border: 1px solid #e5c9c2; border-radius: 8px; background: #fbf2ef; color: #754a43; font-size: 11px; font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
.reveal-panel[hidden] { display: none; }
.boards { display: flex; justify-content: center; width: min(100%, 700px); }
.board-card { min-width: 0; flex: 1; }
.board-label { display: flex; justify-content: center; align-items: center; min-height: 18px; margin: 0 0 5px; color: #838b82; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.board-card.solved .board-label { color: var(--green-dark); }
.solved-label { margin-left: 5px; color: var(--green); font-size: 8px; letter-spacing: .08em; }
.board { display: flex; flex-direction: column; gap: 5px; width: min(100%, 300px); margin: 0 auto; }
.board-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.tile { display: grid; aspect-ratio: 1; min-width: 0; place-items: center; border: 1.5px solid #d2d7cf; border-radius: 6px; background: #eeefe9; color: #27352f; font-family: var(--mono); font-size: clamp(19px, 3vw, 25px); font-weight: 500; text-transform: uppercase; transition: transform .1s, border-color .15s, background .18s, color .18s; }
.tile.active-row { border-width: 2px; border-color: #849184; background: #f7f7f1; cursor: pointer; }
.tile.cursor-target { outline: 3px solid #75a77e; outline-offset: 2px; z-index: 1; }
.tile.filled { border-color: #9ba89a; animation: pop .11s ease-out; }
.tile.submitted { border-color: transparent; color: white; }
.tile.correct { border-color: var(--green); background: var(--green); }
.tile.present { border-color: var(--yellow); background: var(--yellow); color: #fff; }
.tile.absent { border-color: #a6aca4; background: #a6aca4; color: #fff; }
.boards.duet { gap: clamp(12px, 3vw, 28px); }
.boards.duet .board-card { max-width: 330px; }
.boards.duet .board { width: 100%; }
.boards.duet .board-row { gap: clamp(3px, .7vw, 5px); }
.boards.duet .tile { border-radius: 5px; font-size: clamp(16px, 3vw, 23px); }
.boards.quartet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 14px); width: 100%; }
.boards.quartet .board-card { width: 100%; min-width: 0; }
.boards.quartet .board { width: 100%; }
.boards.quartet .board-row { gap: clamp(2px, .35vw, 4px); }
.boards.quartet .tile { border-radius: 5px; font-size: clamp(12px, 1.8vw, 20px); }
.boards.octet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1vw, 12px); width: 100%; }
.boards.octet .board-card { width: 100%; min-width: 0; }
.boards.octet .board { width: 100%; gap: 2px; }
.boards.octet .board-label { min-height: 15px; margin-bottom: 3px; font-size: 8px; }
.boards.octet .board-row { gap: clamp(1px, .25vw, 3px); }
.boards.octet .tile { border-radius: 3px; font-size: clamp(10px, 1.6vw, 16px); }
.boards.dodecet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(7px, .8vw, 10px); width: 100%; }
.boards.dodecet .board-card { width: 100%; min-width: 0; }
.boards.dodecet .board { width: 100%; gap: 2px; }
.boards.dodecet .board-label { min-height: 15px; margin-bottom: 3px; font-size: 8px; }
.boards.dodecet .board-row { gap: clamp(1px, .2vw, 2px); }
.boards.dodecet .tile { border-radius: 3px; font-size: clamp(9px, 1.4vw, 14px); }
.boards.thirtytwo, .boards.sixtyfour { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.3vw, 14px); width: 100%; }
.boards.thirtytwo .board-card { width: 100%; min-width: 0; }
.boards.sixtyfour .board-card { width: 100%; min-width: 0; }
.boards.thirtytwo .board, .boards.sixtyfour .board { width: 100%; gap: 3px; }
.boards.thirtytwo .board-label, .boards.sixtyfour .board-label { min-height: 16px; margin-bottom: 3px; font-size: 8px; letter-spacing: .06em; }
.boards.thirtytwo .board-row, .boards.sixtyfour .board-row { gap: 3px; }
.boards.thirtytwo .tile, .boards.sixtyfour .tile { border-radius: 3px; font-size: clamp(12px, 1.7vw, 17px); }
.keyboard { display: flex; flex-direction: column; gap: 6px; width: min(100%, 700px); margin-top: 21px; }
.key-row { display: flex; justify-content: center; gap: 5px; }
.key { display: flex; flex: 1 1 0; align-items: center; justify-content: center; max-width: 62px; min-width: 0; height: 48px; padding: 0 3px; border: 0; border-radius: 6px; background: var(--key-bg); color: #fff; cursor: pointer; font-family: var(--mono); font-size: 18px; font-weight: 700; user-select: none; touch-action: manipulation; transition: transform .1s, background .15s, opacity .15s; }
.key:hover:not(:disabled) { background: #43524a; }
.key:active:not(:disabled) { transform: translateY(1px); }
.key:focus-visible, .nav-link:focus-visible, .mode-card:focus-visible, .icon-button:focus-visible { outline: 3px solid #80ad88; outline-offset: 3px; }
.key:disabled { cursor: default; opacity: .58; }
.key.correct { background: var(--green); }
.key.present { background: var(--yellow); }
.key.absent { background: var(--key-absent); color: #fff; }
.key.duet-key { background: linear-gradient(90deg, var(--key-left) 0 50%, var(--key-right) 50% 100%); }
.key.duet-key:hover:not(:disabled) { filter: brightness(1.08); }
.key.quartet-key { background: conic-gradient(var(--key-top-right) 0 25%, var(--key-bottom-right) 25% 50%, var(--key-bottom-left) 50% 75%, var(--key-top-left) 75% 100%); }
.key.quartet-key:hover:not(:disabled) { filter: brightness(1.08); }
.key.octet-key { background: conic-gradient(var(--key-board-1) 0 12.5%, var(--key-board-2) 12.5% 25%, var(--key-board-3) 25% 37.5%, var(--key-board-4) 37.5% 50%, var(--key-board-5) 50% 62.5%, var(--key-board-6) 62.5% 75%, var(--key-board-7) 75% 87.5%, var(--key-board-8) 87.5% 100%); }
.key.octet-key:hover:not(:disabled) { filter: brightness(1.08); }
.key.dodecet-key { background: conic-gradient(var(--key-board-1) 0 8.3333%, var(--key-board-2) 8.3333% 16.6667%, var(--key-board-3) 16.6667% 25%, var(--key-board-4) 25% 33.3333%, var(--key-board-5) 33.3333% 41.6667%, var(--key-board-6) 41.6667% 50%, var(--key-board-7) 50% 58.3333%, var(--key-board-8) 58.3333% 66.6667%, var(--key-board-9) 66.6667% 75%, var(--key-board-10) 75% 83.3333%, var(--key-board-11) 83.3333% 91.6667%, var(--key-board-12) 91.6667% 100%); }
.key.dodecet-key:hover:not(:disabled) { filter: brightness(1.08); }
.key.thirtytwo-key:hover:not(:disabled) { filter: brightness(1.08); }
.key.sixtyfour-key:hover:not(:disabled) { filter: brightness(1.08); }
.key.utility-key { max-width: 72px; font-family: "DM Sans", sans-serif; font-size: 15px; }
.key.enter-key { max-width: 105px; font-family: "DM Sans", sans-serif; font-size: 11px; letter-spacing: .04em; }
.footer { display: flex; min-height: 38px; align-items: center; justify-content: center; gap: 9px; color: #9a9e96; font-size: 8px; font-weight: 700; letter-spacing: .09em; }
.footer a { color: #858d83; letter-spacing: .04em; }
.footer a:hover { color: var(--green-dark); }
.footer-dot { color: var(--green); font-size: 12px; }
.home-main { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 56px 0 68px; text-align: center; }
.home-main>.eyebrow { margin-bottom: 15px; }
.home-main h1 { margin: 0; color: #202c26; font-size: clamp(40px, 7vw, 66px); font-weight: 700; letter-spacing: -.07em; line-height: .99; }
.home-copy { max-width: 450px; margin: 19px 0 35px; color: #70786f; font-size: 15px; line-height: 1.65; }
.home-section-heading { display: flex; align-items: baseline; justify-content: space-between; width: min(100%, 860px); margin: 0 0 11px; text-align: left; }
.home-section-heading h2 { margin: 0; color: #35433b; font-size: 16px; letter-spacing: -.03em; }
.home-section-heading span { color: #92988f; font-size: 10px; font-weight: 700; }
.mode-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; width: min(100%, 860px); text-align: left; }
.mode-card { display: flex; min-height: 255px; flex-direction: column; padding: 24px 25px 21px; border: 1px solid #e1e4dc; border-radius: 16px; background: #fffefa; box-shadow: 0 7px 26px #26342e08; transition: transform .18s, box-shadow .18s, border-color .18s; }
.mode-card:hover { transform: translateY(-3px); border-color: #c8d3c5; box-shadow: 0 13px 30px #26342e12; }
.card-icon { display: grid; width: 39px; height: 39px; place-items: center; margin-bottom: 22px; border-radius: 12px; background: #e5eddf; color: var(--green-dark); font-size: 23px; }
.duet-icon { background: #f1ead9; color: #987a32; }
.card-tag { margin-bottom: 6px; color: #8b9289; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.mode-card strong { color: #25332d; font-size: 25px; letter-spacing: -.04em; }
.card-copy { max-width: 260px; margin: 8px 0 21px; color: #7d847b; font-size: 12px; line-height: 1.55; }
.card-action { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid #eceee8; color: var(--green-dark); font-size: 11px; font-weight: 800; }
.duet-card .card-action { color: #826a2d; }
.quartet-card .card-action { color: #675b8b; }
.quartet-icon { background: #e9e5f1; color: #675b8b; }
.octet-card .card-action { color: #3f7180; }
.octet-icon { background: #deedf0; color: #3f7180; }
.dodecet-card .card-action { color: #825c42; }
.dodecet-icon { background: #f0e5dc; color: #825c42; }
.dodecet-card { min-height: 255px; }
.thirtytwo-card .card-action { color: #4d6685; }
.thirtytwo-icon { background: #e2e9f1; color: #4d6685; }
.sixtyfour-card .card-action { color: #765c85; }
.sixtyfour-icon { background: #eee4f1; color: #765c85; }
.home-note { margin: 22px 0 0; color: #959a91; font-size: 10px; }
.home-note span { margin-right: 5px; color: var(--green); }
.dialog { position: fixed; width: min(calc(100% - 32px), 420px); max-height: min(88vh, 700px); overflow-y: auto; padding: 29px; border: 1px solid #e1e4dc; border-radius: 16px; background: #fffefa; color: var(--ink); box-shadow: 0 24px 80px #18231f35; }
.dialog::backdrop { background: #18231f70; backdrop-filter: blur(3px); }
.dialog h2 { margin: 0 0 9px; font-size: 24px; letter-spacing: -.05em; }
.dialog>p:not(.eyebrow) { color: #71796f; font-size: 13px; line-height: 1.55; }
.dialog-close { position: absolute; top: 10px; right: 13px; border: 0; background: transparent; color: #72796f; cursor: pointer; font-size: 26px; }
.example-row { display: flex; align-items: center; gap: 4px; margin: 12px 0; }
.example-tile { display: grid; width: 33px; height: 33px; flex: 0 0 auto; place-items: center; border: 1px solid #d2d7cf; border-radius: 5px; font-family: var(--mono); font-size: 15px; }
.example-tile.correct, .example-tile.present, .example-tile.absent { border-color: transparent; color: white; }
.example-tile.correct { background: var(--green); }
.example-tile.present { background: var(--yellow); }
.example-tile.absent { background: #a6aca4; }
.example-copy { margin-left: 5px; color: #70776e; font-size: 10px; white-space: nowrap; }
.dialog-note { margin-top: 19px; padding-top: 14px; border-top: 1px solid var(--line); }
.stats-dialog { width: min(calc(100% - 32px), 560px); max-height: min(88vh, 820px); text-align: center; }
.surrender-dialog { width: min(calc(100% - 32px), 430px); }
.surrender-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 22px; }
.secondary-button { background: #f2f3ed; color: #58645b; }
.secondary-button:hover { background: #e9ece5; }
.danger-button { border-color: #a9574b; background: #a9574b; color: white; }
.danger-button:hover { border-color: #8e453c; background: #8e453c; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 15px 0 18px; }
.stats-grid div { display: flex; flex-direction: column; gap: 4px; }
.stats-grid strong { font-size: 24px; font-weight: 700; letter-spacing: -.05em; }
.stats-grid span { color: #858b82; font-size: 9px; }
.stats-highlights { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; padding: 12px 0 19px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-highlights div { display: flex; flex-direction: column; gap: 4px; }
.stats-highlights strong { color: var(--green-dark); font-size: 18px; }
.stats-highlights span { color: #858b82; font-size: 8px; }
.stats-section { margin-top: 18px; text-align: left; }
.stats-dialog h3 { margin: 0 0 9px; font-size: 12px; }
.distribution { display: flex; flex-direction: column; gap: 4px; margin-bottom: 17px; }
.compact-distribution { max-height: 170px; overflow-y: auto; padding-right: 4px; }
.dist-row { display: flex; align-items: center; gap: 8px; min-height: 18px; font-family: var(--mono); font-size: 10px; }
.dist-row>span { flex: 0 0 92px; color: #70776e; }
.dist-bar { min-width: 22px; height: 18px; padding: 3px 6px; background: #adb2aa; color: white; text-align: right; font-size: 10px; }
.dist-bar.has-count { background: var(--green); }
.recent-games { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.recent-games li { display: grid; grid-template-columns: 1fr 1.4fr auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; background: #f3f4ee; font-size: 10px; }
.recent-games strong { color: var(--green-dark); }
.recent-games span, .recent-games time, .recent-empty { color: #858b82; }
.recent-games time { font-size: 9px; }
.recent-games .recent-empty { display: block; text-align: center; }
.stats-actions { display: flex; align-items: center; gap: 9px; }
.stats-actions form { flex: 1; }
.primary-button { width: 100%; height: 42px; border: 0; border-radius: 7px; background: var(--green); color: white; cursor: pointer; font-weight: 700; }
@keyframes pop { 50% { transform: scale(1.06); } }
@keyframes timer-tick { 50% { transform: scale(.88); opacity: .65; } }

@media (max-width: 760px) {
  .topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand actions" "nav nav"; row-gap: 7px; min-height: auto; padding: 10px 0 8px; }
  .brand { grid-area: brand; min-width: 0; }
  .header-actions { grid-area: actions; }
  .header-spacer { display: none; }
  .main-nav { grid-area: nav; justify-self: stretch; flex-wrap: wrap; justify-content: center; min-width: 0; }
  .nav-link { flex: 0 1 auto; text-align: center; white-space: nowrap; }
  .boards.quartet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2vw, 16px); }
  .boards.quartet .tile { font-size: clamp(13px, 2.8vw, 19px); }
  .boards.octet .tile { font-size: clamp(10px, 1.8vw, 14px); }
  .boards.dodecet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .boards.dodecet .tile { font-size: clamp(10px, 2vw, 14px); }
  .boards.thirtytwo, .boards.sixtyfour { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mode-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 720px); }
}

@media (max-width: 600px) {
  .app-shell { padding-right: 17px; padding-left: 17px; }
  .topbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand actions" "nav nav"; column-gap: 4px; row-gap: 7px; min-height: 0; padding: 9px 0 8px; }
  .brand { gap: 7px; font-size: 11px; }
  .brand-mark { width: 26px; height: 26px; }
  .main-nav { gap: 2px; padding: 3px; }
  .nav-link { min-height: 34px; padding: 7px clamp(5px, 1.8vw, 10px); font-size: clamp(9px, 2.5vw, 10px); }
  .icon-button { width: 32px; height: 34px; }
  .icon-button svg { width: 19px; height: 19px; }
  .intro { margin: 12px 0 10px; }
  .intro h1 { font-size: 25px; }
  .subtitle { margin-top: 6px; font-size: 11px; }
  .game-meta { margin-bottom: 6px; font-size: 9px; }
  .boards.duet { gap: 10px; }
  .boards.duet .board-row { gap: 3px; }
  .boards.duet .tile { border-radius: 4px; font-size: clamp(13px, 4vw, 20px); }
  .boards.quartet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 9px; width: 100%; }
  .boards.quartet .board-label { min-height: 15px; margin-bottom: 3px; font-size: 8px; }
  .boards.quartet .board { width: 100%; gap: 3px; }
  .boards.quartet .board-row { gap: 3px; }
  .boards.quartet .tile { border-radius: 3px; font-size: clamp(10px, 3.4vw, 18px); }
  .boards.octet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 9px; }
  .boards.octet .board-label { min-height: 14px; font-size: 8px; }
  .boards.octet .board-row { gap: 2px; }
  .boards.octet .tile { border-radius: 3px; font-size: clamp(10px, 3.2vw, 16px); }
  .boards.dodecet { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 7px; }
  .boards.dodecet .board-label { min-height: 14px; font-size: 8px; }
  .boards.dodecet .board-row { gap: 2px; }
  .boards.dodecet .tile { border-radius: 3px; font-size: clamp(9px, 2.8vw, 13px); }
  .boards.thirtytwo, .boards.sixtyfour { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 7px; }
  .boards.thirtytwo .board-label, .boards.sixtyfour .board-label { min-height: 14px; margin-bottom: 3px; font-size: 7px; }
  .boards.thirtytwo .board, .boards.sixtyfour .board { gap: 3px; }
  .boards.thirtytwo .board-row, .boards.sixtyfour .board-row { gap: 3px; }
  .boards.thirtytwo .tile, .boards.sixtyfour .tile { border-radius: 3px; font-size: clamp(11px, 3.3vw, 15px); }
  .board-row { gap: 4px; }
  .board { gap: 4px; }
  .boards:not(.duet):not(.quartet):not(.octet):not(.dodecet):not(.thirtytwo):not(.sixtyfour) .board { width: min(100%, clamp(240px, 70vw, 300px)); }
  .tile { border-radius: 5px; font-size: clamp(18px, 7vw, 24px); }
  .keyboard { gap: 5px; margin-top: 16px; }
  .key-row { gap: 3px; }
  .key { height: 44px; max-width: none; border-radius: 5px; font-size: clamp(12px, 4vw, 16px); }
  .key.utility-key { max-width: 39px; font-size: 14px; }
  .key.enter-key { max-width: 67px; font-size: 9px; }
  body:not(.home-page) .game-main { padding-bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
  body:not(.home-page) .keyboard { position: fixed; z-index: 4; right: auto; bottom: 0; left: 50%; width: min(calc(100vw - 16px), 700px); margin: 0; padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); border: 1px solid #e0e3dc; border-bottom: 0; border-radius: 12px 12px 0 0; background: #f4f4eef2; box-shadow: 0 -6px 22px #18231f12; backdrop-filter: blur(8px); }
  .footer { min-height: 30px; gap: 6px; font-size: 7px; letter-spacing: .05em; }
  body:not(.home-page) .footer { display: none; }
  .mode-cards { grid-template-columns: 1fr; max-width: 430px; }
  .home-main { justify-content: flex-start; padding: 58px 0 38px; }
  .home-main h1 { font-size: clamp(41px, 12vw, 58px); }
  .home-copy { margin: 15px 0 25px; font-size: 13px; }
  .mode-card { min-height: 220px; padding: 20px; }
  .card-icon { margin-bottom: 15px; }
  .home-note { line-height: 1.5; }
  .stats-dialog { padding: 24px 18px 18px; }
  .dialog:not(.stats-dialog) { padding: 24px 18px 18px; }
  .surrender-actions { flex-direction: column-reverse; }
  .surrender-actions button { width: 100%; }
  .example-row { flex-wrap: wrap; row-gap: 5px; }
  .example-copy { flex: 1 1 100%; margin: 0; white-space: normal; line-height: 1.4; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
  .stats-highlights { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
  .game-meta { grid-template-columns: 1fr auto; row-gap: 3px; }
  .surrender-row { margin: 0 0 6px; }
  .surrender-button { min-height: 30px; padding: 5px 10px; font-size: 10px; }
  #game-status { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .game-timer { grid-column: 2; grid-row: 1; justify-self: end; }
  .recent-games li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 5px; padding: 8px 6px; font-size: 9px; }
  .recent-games li > * { min-width: 0; overflow-wrap: anywhere; }
  .stats-actions form { width: 100%; }
}

@media (max-width: 375px) {
  .app-shell { padding-right: 13px; padding-left: 13px; }
  .brand > span:last-child { display: none; }
  .main-nav { gap: 0; padding: 2px; }
  .nav-link { padding-right: 3px; padding-left: 3px; font-size: 8px; }
  .header-actions { gap: 0; }
  .boards.duet { gap: 7px; }
  .boards.duet .tile { font-size: 12px; }
  .boards.quartet { gap: 9px 6px; }
  .boards.quartet .board-label { font-size: 7px; letter-spacing: .1em; }
  .boards.quartet .tile { font-size: 10px; }
  .boards.octet { gap: 9px 6px; }
  .boards.octet .tile { font-size: 10px; }
  .boards.dodecet { gap: 9px 6px; }
  .boards.dodecet .tile { font-size: 9px; }
  .key.utility-key { max-width: 32px; }
  .key.enter-key { max-width: 56px; font-size: 8px; }
  .game-timer { gap: 4px; padding: 4px 7px; }
  .timer-label, .timer-state { font-size: 6px; }
  .game-timer time { min-width: 37px; font-size: 12px; }
}

@media (max-height: 680px) and (min-width: 601px) {
  .topbar { min-height: 60px; }
  .intro { margin: 12px 0 10px; }
  .intro h1 { font-size: 27px; }
  .game-meta { margin-bottom: 5px; }
  .board, .boards.duet .board, .boards.quartet .board { gap: 4px; }
  .boards.octet .board { gap: 2px; }
  .boards.dodecet .board { gap: 2px; }
  .board-row, .boards.duet .board-row, .boards.quartet .board-row { gap: 4px; }
  body:not(.home-page) .game-main { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  body:not(.home-page) .keyboard { position: fixed; z-index: 4; bottom: 0; left: 50%; width: min(calc(100vw - 24px), 700px); margin: 0; padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); border: 1px solid #e0e3dc; border-bottom: 0; border-radius: 12px 12px 0 0; background: #f4f4eef2; box-shadow: 0 -6px 22px #18231f12; backdrop-filter: blur(8px); }
  .keyboard { gap: 4px; }
  .key { height: 42px; }
  .footer { min-height: 32px; }
}

@media (min-width: 601px) {
  body[data-mode="octet"] .game-main,
  body[data-mode="dodecet"] .game-main,
  body[data-mode="thirtytwo"] .game-main { padding-bottom: calc(172px + env(safe-area-inset-bottom, 0px)); }
  body[data-mode="sixtyfour"] .game-main { padding-bottom: calc(172px + env(safe-area-inset-bottom, 0px)); }
  body[data-mode="octet"] .keyboard,
  body[data-mode="dodecet"] .keyboard,
  body[data-mode="thirtytwo"] .keyboard { position: fixed; z-index: 4; right: auto; bottom: 0; left: 50%; width: min(calc(100vw - 24px), 700px); margin: 0; padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); border: 1px solid #e0e3dc; border-bottom: 0; border-radius: 12px 12px 0 0; background: #f4f4eef2; box-shadow: 0 -6px 22px #18231f12; backdrop-filter: blur(8px); }
  body[data-mode="sixtyfour"] .keyboard { position: fixed; z-index: 4; right: auto; bottom: 0; left: 50%; width: min(calc(100vw - 24px), 700px); margin: 0; padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); border: 1px solid #e0e3dc; border-bottom: 0; border-radius: 12px 12px 0 0; background: #f4f4eef2; box-shadow: 0 -6px 22px #18231f12; backdrop-filter: blur(8px); }
}

@media (max-height: 680px) and (min-width: 601px) {
  body[data-mode="octet"] .game-main,
  body[data-mode="dodecet"] .game-main,
  body[data-mode="thirtytwo"] .game-main { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  body[data-mode="sixtyfour"] .game-main { padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 760px) and (max-height: 500px) {
  body:not(.home-page) .game-main { padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }
  body:not(.home-page) .keyboard { gap: 3px; padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
  body:not(.home-page) .key { height: 36px; }
}

@media (min-width: 761px) {
  .app-shell { width: min(100%, 1200px); padding-right: 32px; padding-left: 32px; }
  .topbar { min-height: 62px; }
  .nav-link { min-height: 30px; padding: 7px 12px; font-size: 11px; }
  .intro { margin: 11px 0 8px; }
  .eyebrow { margin-bottom: 5px; font-size: 8px; }
  .intro h1 { font-size: 28px; }
  .subtitle { margin-top: 5px; font-size: 11px; }
  .game-meta { width: min(100%, 900px); min-height: 30px; margin-bottom: 4px; }
  .surrender-row { width: min(100%, 900px); margin: -2px 0 4px; }
  .surrender-button { min-height: 29px; padding: 5px 10px; font-size: 10px; }
  .boards { width: min(100%, 900px); }
  .board { width: min(100%, 260px); gap: 3px; }
  .board-row { gap: 3px; }
  .tile { font-size: clamp(16px, 1.7vw, 20px); }
  .boards.duet { gap: 20px; }
  .boards.duet .board-card { max-width: 280px; }
  .boards.duet .tile { font-size: clamp(15px, 1.7vw, 20px); }
  .boards.quartet { width: min(100%, 760px); gap: 9px; }
  .boards.quartet .board { gap: 3px; }
  .boards.quartet .board-row { gap: 3px; }
  .boards.quartet .tile { font-size: clamp(11px, 1.3vw, 16px); }
  .boards.octet { width: min(100%, 800px); }
  .boards.octet .tile { font-size: clamp(9px, 1.25vw, 13px); }
  .boards.dodecet { width: min(100%, 900px); grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .boards.dodecet .tile { font-size: clamp(8px, 1vw, 12px); }
  .boards.thirtytwo, .boards.sixtyfour { width: min(100%, 1120px); grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .boards.thirtytwo .board, .boards.sixtyfour .board { gap: 2px; }
  .boards.thirtytwo .board-row, .boards.sixtyfour .board-row { gap: 2px; }
  .boards.thirtytwo .board-label, .boards.sixtyfour .board-label { min-height: 14px; margin-bottom: 2px; font-size: 7px; }
  .boards.thirtytwo .tile, .boards.sixtyfour .tile { border-radius: 2px; font-size: clamp(8px, .9vw, 11px); }
  .keyboard { width: min(100%, 560px); gap: 4px; margin-top: 12px; }
  .key-row { gap: 4px; }
  .key { height: 36px; font-size: 15px; }
  .key.utility-key { max-width: 58px; font-size: 13px; }
  .key.enter-key { max-width: 84px; font-size: 10px; }
  .footer { min-height: 30px; font-size: 7px; }
  body[data-mode="octet"] .game-main,
  body[data-mode="dodecet"] .game-main,
  body[data-mode="thirtytwo"] .game-main,
  body[data-mode="sixtyfour"] .game-main { padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px)); }
  body[data-mode="octet"] .keyboard,
  body[data-mode="dodecet"] .keyboard,
  body[data-mode="thirtytwo"] .keyboard,
  body[data-mode="sixtyfour"] .keyboard { width: min(calc(100vw - 24px), 560px); padding: 6px 7px calc(6px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 761px) and (max-height: 760px) {
  .topbar { min-height: 54px; }
  .intro { margin: 7px 0 5px; }
  .intro h1 { font-size: 25px; }
  .subtitle { margin-top: 3px; }
  .board, .boards.duet .board, .boards.quartet .board { gap: 2px; }
  .board-row, .boards.duet .board-row, .boards.quartet .board-row { gap: 2px; }
  .tile, .boards.duet .tile { font-size: clamp(14px, 1.5vw, 18px); }
  .boards.quartet .tile { font-size: clamp(10px, 1.1vw, 14px); }
  .boards.octet .tile { font-size: clamp(8px, 1vw, 11px); }
  .boards.dodecet .tile { font-size: clamp(7px, .85vw, 10px); }
  .keyboard { gap: 3px; margin-top: 8px; }
  .key { height: 32px; }
  .footer { min-height: 24px; }
  body[data-mode="octet"] .game-main,
  body[data-mode="dodecet"] .game-main,
  body[data-mode="thirtytwo"] .game-main,
  body[data-mode="sixtyfour"] .game-main { padding-bottom: calc(118px + env(safe-area-inset-bottom, 0px)); }
}

/* Quiz de bandeiras */
.home-game-section { width: min(100%, 860px); margin-top: 34px; }
.home-game-section .home-section-heading { width: 100%; }
.flags-mode-cards { grid-template-columns: minmax(0, 1fr); }
.flags-card { max-width: 440px; min-height: 220px; border-color: #d8e3d7; background: linear-gradient(145deg, #fffefa 35%, #f2f6ed); }
.flags-card:hover { border-color: #a9c1aa; }
.flags-card-icon { background: #e4eee3; color: #3f704f; }
.flags-card .card-action { color: #3f704f; }

@media (min-width: 761px) {
  .home-main > .mode-cards > .mode-card:last-child:nth-child(3n + 1) { grid-column: 2; }
}

.flags-main { padding: 8px 0 28px; }
.flags-intro { margin: 16px 0 20px; }
.flags-intro .eyebrow { margin-bottom: 8px; }
.flags-intro h1 { font-size: clamp(27px, 4vw, 36px); }
.flags-layout { width: min(100%, 640px); }
.flags-difficulty-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(100%, 430px); margin: 0 auto 6px; padding: 4px; border: 1px solid #e0e5dc; border-radius: 12px; background: #eeefe9; }
.flags-difficulty { min-height: 38px; border: 0; border-radius: 8px; background: transparent; color: #727a71; cursor: pointer; font-size: 12px; font-weight: 800; transition: color .15s, background .15s, box-shadow .15s; }
.flags-difficulty[aria-pressed="true"] { background: #fffefa; color: #345c46; box-shadow: 0 1px 5px #20282012; }
.flags-difficulty:disabled { cursor: wait; opacity: .7; }
.flags-difficulty:focus-visible { outline: 3px solid #80ad88; outline-offset: 2px; }
.flags-difficulty-description { min-height: 17px; margin: 0 0 14px; color: #818980; font-size: 10px; line-height: 1.5; text-align: center; }
.flags-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.flags-stat { display: flex; min-height: 68px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid #e0e5dc; border-radius: 12px; background: #fffefa; box-shadow: 0 4px 16px #26342e06; }
.flags-stat span { color: #828a80; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.flags-stat strong { color: #29372f; font-family: var(--mono); font-size: 21px; line-height: 1; }
.flags-round { display: flex; justify-content: space-between; gap: 10px; margin: 0 2px 8px; color: #818980; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.flags-round span:first-child { color: #4c7c60; }
.flags-stage { padding: 19px; border: 1px solid #e1e5dd; border-radius: 18px; background: #fffefa; box-shadow: 0 10px 32px #26342e0b; }
.flags-image-frame { display: grid; box-sizing: border-box; width: min(100%, 430px); aspect-ratio: 1.6; place-items: center; overflow: hidden; margin: 0 auto 18px; padding: 12px; border: 1px solid #e7e9e3; border-radius: 12px; background: #f7f8f4; }
.flags-image-frame img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.flags-image-frame img[hidden] { display: none; }
.flags-image-frame.has-error { padding: 18px; border-style: dashed; background: #f5f6f1; }
.flags-image-frame p { max-width: 220px; margin: 0; color: #777f75; font-size: 13px; line-height: 1.5; text-align: center; }
.flags-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.flags-option { display: flex; min-width: 0; min-height: 54px; align-items: center; gap: 11px; padding: 8px 12px; border: 1px solid #e0e4dc; border-radius: 10px; background: #fbfcf8; color: #334139; cursor: pointer; text-align: left; transition: transform .14s, border-color .14s, background .14s, box-shadow .14s; }
.flags-option:not(:disabled):hover { transform: translateY(-1px); border-color: #aebfae; background: #f4f8f1; box-shadow: 0 4px 12px #26342e0b; }
.flags-option:focus-visible, .flags-next:focus-visible { outline: 3px solid #80ad88; outline-offset: 3px; }
.flags-option:disabled { cursor: default; }
.option-index { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border-radius: 7px; background: #edf0e9; color: #738075; font-family: var(--mono); font-size: 11px; font-weight: 700; }
.option-name { min-width: 0; overflow-wrap: anywhere; font-size: 12px; font-weight: 700; line-height: 1.35; }
.flags-option.is-correct { border-color: #90b394; background: #edf5eb; color: #345c46; }
.flags-option.is-correct .option-index { background: #4c7c60; color: white; }
.flags-option.is-wrong { border-color: #dfa9a0; background: #fbefed; color: #914d43; }
.flags-option.is-wrong .option-index { background: #b76b5d; color: white; }
.flags-feedback { min-height: 22px; margin: 13px 2px 0; color: #717a71; font-size: 12px; font-weight: 600; line-height: 1.5; text-align: center; }
.flags-feedback[data-state="correct"] { color: #3f704f; }
.flags-feedback[data-state="wrong"], .flags-feedback[data-state="error"] { color: #a2564a; }
.flags-next { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; border: 0; border-radius: 9px; background: #4c7c60; color: #fff; cursor: pointer; font-size: 12px; font-weight: 800; transition: background .15s, transform .15s; }
.flags-next:hover { transform: translateY(-1px); background: #3e6b51; }
.flags-next span { font-size: 17px; }
.flags-next[hidden] { display: none; }
.flags-footnote { margin: 12px 4px 0; color: #92988f; font-size: 10px; line-height: 1.5; text-align: center; }

@media (max-width: 760px) {
  .flags-mode-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 720px); }
}

@media (max-width: 600px) {
  .home-game-section { width: 100%; margin-top: 28px; }
  .flags-mode-cards { grid-template-columns: 1fr; max-width: 430px; }
  .flags-main { padding-top: 0; }
  .flags-intro { margin: 13px 0 15px; }
  .flags-intro h1 { font-size: 27px; }
  .flags-difficulty-picker { gap: 5px; border-radius: 10px; }
  .flags-difficulty { min-height: 37px; font-size: 11px; }
  .flags-difficulty-description { margin-bottom: 11px; font-size: 9px; }
  .flags-stats { gap: 7px; margin-bottom: 12px; }
  .flags-stat { min-height: 60px; border-radius: 10px; }
  .flags-stat span { font-size: 7px; }
  .flags-stat strong { font-size: 19px; }
  .flags-stage { padding: 12px; border-radius: 14px; }
  .flags-image-frame { margin-bottom: 13px; padding: 8px; border-radius: 9px; }
  .flags-options { gap: 7px; }
  .flags-option { min-height: 50px; gap: 7px; padding: 7px; border-radius: 8px; }
  .option-index { width: 23px; height: 23px; font-size: 10px; }
  .option-name { font-size: 11px; }
  .flags-feedback { margin-top: 11px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .flags-option, .flags-next { transition: none; }
  .flags-option:not(:disabled):hover, .flags-next:hover { transform: none; }
}