.toolbar-actions { flex-wrap:wrap; justify-content:flex-end; }
@media(min-width:601px) {
  .page-shell { zoom:1.35; }
  .category-card, #account-button, #archive-button, #help-button { border:3px solid var(--edge); }
}
.page-shell { -webkit-user-select:none; user-select:none; padding-bottom:52px; }
.page-shell input, .page-shell textarea { -webkit-user-select:text; user-select:text; }
.sync-status { position:fixed; right:16px; bottom:16px; z-index:3; max-width:min(30rem,calc(100vw - 32px)); margin:0; padding:10px 14px; border:2px solid var(--edge); background:var(--paper); font-size:12px; line-height:1.6; color:#645c47; }
.sync-status:empty { display:none; }
.game-title .game-tagline { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 12px; }
.share-game-link { border:0; background:transparent; padding:6px 0; min-width:12ch; color:var(--muted); font-size:inherit; text-decoration:underline; text-underline-offset:3px; }
.share-game-link:hover { color:var(--ink); }
.game-card:not(.round-finished) .current-clue { min-height:94px; display:grid; place-items:center; padding:12px 0; }
.clue-history { font-size:clamp(12px,2.58vw,17px); line-height:1.5; }
.game-card:not(.round-finished) .clue-history { min-height:58px; height:auto; align-content:center; margin-bottom:14px; }
.clue-history span { overflow-wrap:anywhere; }
.clue-history span + span::before { content:none; margin:0; }
.guess-feedback { min-height:0; margin:6px 0 0; }
.guess-feedback:empty { display:none; }
.guess-row .primary-button { min-width:104px; }
.game-card:not(.round-finished) .card-bottom { padding-top:6px; }
.developer-credit { position:fixed; left:14px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); margin:0; font-size:12px; max-width:calc(100vw - 28px); }
#account-dialog { max-width:min(28rem,calc(100vw - 2rem)); }
#account-dialog .text-button { display:block; margin:.8rem auto; }
#account-dialog [hidden] { display:none; }
#account-feedback { font-size:.75rem; line-height:1.6; overflow-wrap:anywhere; }
#account-feedback:empty { display:none; }
#account-dialog .account-policies { display:flex; align-items:center; justify-content:center; gap:0; margin:12px 0 0; }
.account-policies a { color:inherit; text-underline-offset:3px; }
#account-status { font-size:.8rem; line-height:1.6; }
#billing-status { font-size:.7rem; line-height:1.6; color:#645c47; }
.daily-meta { flex-wrap:wrap; gap:.4rem; }
.hint-0 { color:#b44747; }.hint-1 { color:#b36727; }.hint-2 { color:#998018; }.hint-3 { color:#417544; }.hint-4 { color:#3768a1; }
/* On narrow screens, anchor to the page bottom so the credit cannot cover play. */
@media(max-width:1400px) { body { position:relative; } .developer-credit { position:absolute; } }
@media(max-width:420px) { .toolbar { gap:.5rem; align-items:flex-start; } .toolbar-actions { gap:.3rem; } #account-button { font-size:.55rem; } }
@media(max-width:600px) {
  .page-shell { padding-bottom:24px; }
  .keiko-scene { height:118px; }
  .keiko-scene img { width:96px; height:96px; }
  .game-card:not(.round-finished) { min-height:320px; display:flex; flex-direction:column; }
  .game-card:not(.round-finished) .current-clue { min-height:64px; padding:10px 0; }
  .game-card:not(.round-finished) .clue-history { min-height:0; height:auto; display:flex; align-content:start; gap:6px 12px; margin:0 0 12px; font-size:12px; line-height:1.5; }
  .game-card:not(.round-finished) .clue-history:empty { margin:0; }
  .game-card:not(.round-finished) #guess-form { margin-top:auto; }
  .game-card:not(.round-finished) .clue-history span + span::before { content:none; }
  .developer-credit { position:relative; left:auto; bottom:auto; margin:24px 8px calc(10px + env(safe-area-inset-bottom,0px)); max-width:calc(100vw - 16px); font-size:12px; }
  .toolbar { align-items:center; flex-wrap:wrap; height:auto; min-height:52px; gap:.3rem; }
  .toolbar-actions { flex-wrap:wrap; min-width:0; max-width:100%; margin-left:auto; }
  .toolbar-actions .archive-button { font-size:.55rem; padding:.35rem .45rem; white-space:nowrap; flex-shrink:0; }
  .toolbar-actions .help-button { width:1.75rem; height:1.75rem; flex-shrink:0; }
  #puzzle-number { font-size:.5rem; white-space:nowrap; }
}
/* Player feedback and compact account controls. */
.word-status.solved, .result-heading.solved, .results-stamps .solved { color:#397444; }
.word-status.missed, .result-heading.missed, .results-stamps .missed { color:#b13f45; }
.word-status { font-size:1.1em; }
#account-button { max-width:14ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#account-title { padding-right:20px; overflow-wrap:anywhere; font-size:18px; margin-bottom:12px; }
#account-dialog { width:min(340px,calc((100vw - 24px)/1.5)); padding:24px 20px 18px; }
#account-status { font-size:11px; margin:10px 0 14px; }
#account-dialog .text-button { display:flex; align-items:center; gap:10px; margin:4px 0; width:100%; text-align:left; padding:8px 5px; font-size:10px; }
.account-icon { display:grid; place-items:center; box-sizing:border-box; width:22px; height:22px; aspect-ratio:1; flex:0 0 22px; line-height:1; padding:0; border:1px solid #c4c6ab; background:#f2efd9; }
.account-icon svg { display:block; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:square; stroke-linejoin:miter; }
#account-dialog .text-button small { display:block; font-size:8px; color:var(--muted); line-height:1.5; margin-top:4px; }
#account-dialog [hidden] { display:none; }
#account-dialog #delete-account { color:#ae3e44; border-top:1px solid #ddc5b6; margin-top:8px; padding-top:12px; }
#delete-account .account-icon { color:#ae3e44; border-color:#d4a29d; }
#account-dialog .primary-button { margin:10px 0; font-size:11px; line-height:1.5; }
#account-dialog .google-button { background:#fffdf7; color:#3c403b; border-color:#a4a58e; box-shadow:0 2px 0 #b5b7a0; }
.google-button img { image-rendering:auto; flex-shrink:0; }
#account-notice { font-size:8px; line-height:1.6; margin:12px 0; }
.archive-locked { color:#7b7f76; background:#e7e6db; border-color:#b7b9ae; }
.archive-locked .archive-status { color:#777d72; display:flex; align-items:center; gap:5px; }
.chain-icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.5; }
.archive-locked:hover { background:#dedfd5; border-color:#8e9586; }
.archive-locked:active .chain-icon { transform:rotate(-12deg); }
.game-card:not(.round-finished) .card-bottom { display:flex; align-items:center; justify-content:space-between; gap:5px; margin-top:4px; padding-top:7px; }
.guesses-left { color:var(--muted); font-size:10px; white-space:nowrap; }
.previous-guesses { min-height:32px; margin:8px 0 0; padding-top:8px; align-content:start; justify-content:flex-start; }
.previous-guesses:empty { border-color:transparent; }
.guess-chip { font-size:11px; color:#9a5559; }
.guess-chip.correct { color:#397444; text-decoration:none; }
#share-dialog { width:min(310px,calc((100vw - 24px)/1.5)); padding:22px 18px 16px; }
#share-dialog h2 { font-size:18px; margin:4px 0 8px; }
#share-dialog .copy-feedback:empty { display:none; }
#results-preview { text-align:center; }
#results-preview img { width:76px; height:76px; object-fit:contain; margin:0 auto; }
#results-preview p { font-size:10px; color:var(--muted); margin:0 0 14px; }
.results-stamps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-bottom:18px; }
.results-stamps > div { border:2px solid #c3c7a5; background:#f0efd8; padding:10px 3px; }
.results-stamps span, .results-stamps small { display:block; font-size:9px; white-space:nowrap; }
.results-stamps strong { display:block; font-size:26px; font-weight:400; margin:8px 0; }
#native-share-results { margin-bottom:10px; }
#next-word, #share-results, #native-share-results { background:#e8a1b8; color:#513442; border-color:#92566e; box-shadow:inset 2px 2px 0 #f1bbc2, inset -2px -2px 0 #d78ca6, 0 3px 0 #92566e; }
#next-word:hover, #share-results:hover, #native-share-results:hover { background:#f1bbc2; }
#next-word:active, #share-results:active, #native-share-results:active { box-shadow:none; }
#share-text { height:auto; min-height:170px; max-height:none; font-size:10px; }
#share-text[hidden], #results-preview[hidden], #native-share-results[hidden] { display:none; }
@media(max-width:600px) {
  .game-card:not(.round-finished) .clue-history span + span::before { content:none; margin:0; }
  .game-card:not(.round-finished) .clue-history { gap:6px 9px; }
  .guesses-left { font-size:9px; }
  .game-card:not(.round-finished) { min-height:350px; }
  #account-dialog { padding:23px 14px 15px; }
  #account-title { font-size:16px; }
  #account-dialog .text-button { font-size:9px; }
  #account-dialog .text-button small { font-size:7px; }
}
@media(prefers-reduced-motion:reduce) { #results-preview img { content:url('./assets/keiko-256.png?v=pink-tongue'); } }
@media(max-width:350px) {
  #share-dialog h2 { font-size:16px; padding-right:22px; }
  .results-stamps span, .results-stamps small { font-size:7px; }
  #next-clue { font-size:8px; padding:7px 4px; }
  .guesses-left { font-size:8px; }
}
@media(max-height:740px) {
  #results-preview img { width:48px; height:48px; }
  .results-stamps { margin-bottom:10px; }
  #share-dialog .primary-button { min-height:36px; padding:8px; }
}

/* Archive sits after the game, with a compact calendar and personal progress. */
.archive-launch { display:flex; justify-content:center; margin:20px 0 8px; }
.archive-launch .archive-button { height:auto; min-height:40px; min-width:180px; padding:10px 16px; font-size:12px; }
#account-title, #account-status, #account-notice, #billing-status { text-align:center; }
#account-title { padding-left:20px; }
#account-dialog .text-button { flex-direction:row; justify-content:flex-start; align-items:center; gap:10px; text-align:left; padding-left:8px; padding-right:8px; }
#account-dialog .text-button .account-icon { position:static; }
#account-dialog .text-button > span:last-child { width:auto; text-align:left; }
#account-dialog .primary-button { justify-content:center; margin-left:auto; margin-right:auto; }
#archive-dialog { width:min(370px,calc((100vw - 24px)/1.5)); padding:24px 14px 18px; }
#archive-dialog h2 { margin-bottom:12px; }
.calendar-heading { display:flex; align-items:center; justify-content:space-between; gap:4px; margin:0 0 12px; }
.calendar-heading h3 { font-weight:400; font-size:12px; text-align:center; margin:0; }
.calendar-heading button { width:28px; height:28px; font-size:20px; padding:0; }
.calendar-weekdays, .calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; text-align:center; }
.calendar-weekdays { font-size:9px; color:var(--muted); margin-bottom:7px; }
.calendar-day, .calendar-unavailable { min-width:0; min-height:37px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:4px 0; font-size:11px; }
.calendar-day { border:1px solid #a9b192; background:#f4efd9; color:var(--ink); }
.calendar-day:hover { border-color:var(--edge); background:#dce6c5; }
.calendar-unavailable { color:#adb09c; }
.calendar-day small { display:flex; align-items:center; justify-content:center; gap:2px; height:9px; font-size:9px; line-height:1; }
.calendar-day .chain-icon { width:12px; height:12px; color:#777d72; }
.calendar-day.completed small { color:#397444; }
.calendar-day.playing small { color:#916c37; }
.calendar-day.playing { border-color:#ac844a; }
.calendar-day[aria-current="date"], .calendar-today-key { background:#d3dfb7; border-color:var(--edge); box-shadow:inset 0 0 0 1px var(--edge); }
.calendar-today-key { display:inline-block; border:1px solid var(--edge); padding:3px 5px; color:var(--ink); }
.calendar-day.archive-locked { background:#e7e6db; color:#7b7f76; border-color:#b7b9ae; }
.calendar-day[aria-pressed="true"], .calendar-selected-key { background:#f1bbc2; color:#513442; border-color:#92566e; box-shadow:inset 0 0 0 2px #92566e; }
.calendar-day[aria-current="date"] > span { text-decoration:underline; text-underline-offset:3px; }
.calendar-selected-key { display:inline-block; border:1px solid #92566e; padding:3px 5px; }
.archive-legend { text-align:center; font-size:8px; color:var(--muted); margin:14px 0 0; line-height:1.7; }
.archive-legend span { margin:0 5px; }
@media(max-height:700px) {
  #archive-dialog { padding-top:20px; padding-bottom:14px; }
  #archive-dialog h2 { font-size:17px; margin-bottom:8px; }
  .calendar-heading { margin-bottom:8px; }
  .calendar-heading h3 { font-size:10px; white-space:nowrap; }
  .calendar-day, .calendar-unavailable { min-height:28px; font-size:10px; }
  .archive-legend { margin-top:8px; }
}
.seo-about { margin:44px auto 0; max-width:30rem; font-size:10px; line-height:1.7; color:var(--muted); text-align:center; -webkit-user-select:text; user-select:text; }
.seo-about h2, .seo-about h3 { font-size:11px; margin:14px 0 4px; color:inherit; }
.seo-about p { margin:0 0 8px; }
.seo-about nav { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 12px; margin-top:12px; }
.seo-about a { color:inherit; }