:root {
  --club-max: 980px;
  --game-max: 720px;
  --content-max: 620px;
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: hidden; }
.club-shell { width: min(100%, var(--club-max)); min-height: 100svh; padding-bottom: calc(94px + env(safe-area-inset-bottom)); }
.club-nav { width: min(100%, var(--club-max)); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); align-items: stretch; justify-content: initial; }
.club-nav a, .club-nav button { width: 100%; min-width: 0; max-width: 120px; margin-inline: auto; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; white-space: nowrap; }
.club-nav span { flex: 0 0 auto; }
.game-shell, .app-shell { width: min(100%, var(--game-max)); min-height: 100svh; }
.game-main, .app-shell > main { width: min(100%, var(--content-max)); margin-inline: auto; }
.game-topbar, .topbar { width: min(100%, var(--content-max)); margin-inline: auto; }
.game-topbar { grid-template-columns: 40px 1fr auto; }
.header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.text-size-button { min-width: 36px; height: 34px; padding: 0 9px; border: 1px solid #e1ddd5; border-radius: 999px; color: var(--ink); background: #fffdfa; font-weight: 800; font-size: 11px; line-height: 1; }
.text-size-button[aria-pressed="true"] { color: #fff; border-color: var(--accent, var(--mint-dark)); background: var(--accent, var(--mint-dark)); }
.club-nav [data-text-size][aria-pressed="true"] { color: var(--mint-dark); }
.header-tools .club-streak { min-width: 44px; padding-inline: 8px; }
.board-card, .crossword-card, .ladder-card, .bloom-card { max-width: 100%; }
.flower { width: min(240px, 78vw); }
.cross-art { display: flex; align-items: center; justify-content: center; background: #dfecef; }
.cross-art .cross-logo { width: 64px; height: 64px; display: grid; grid-template-columns: repeat(3,18px); grid-template-rows: repeat(3,18px); gap: 5px; }
.cross-art .cross-logo i { position: relative; display: block; border: 1px solid #87a7ae; border-radius: 5px; background: #fff; box-shadow: 0 4px 8px rgba(53,89,96,.15); }
.cross-art .cross-logo i:nth-child(1), .cross-art .cross-logo i:nth-child(5), .cross-art .cross-logo i:nth-child(9) { border-color: #527984; background: #527984; }
.cross-art .cross-logo i:nth-child(2)::before, .cross-art .cross-logo i:nth-child(4)::before, .cross-art .cross-logo i:nth-child(6)::before, .cross-art .cross-logo i:nth-child(8)::before { position: absolute; left: 3px; top: 2px; color: #668892; font: 800 5px/1 var(--display); }
.cross-art .cross-logo i:nth-child(2)::before { content: "1"; }
.cross-art .cross-logo i:nth-child(4)::before { content: "2"; }
.cross-art .cross-logo i:nth-child(6)::before { content: "3"; }
.cross-art .cross-logo i:nth-child(8)::before { content: "4"; }
.tabbar { position: fixed; left: 50%; right: auto; bottom: 0; width: min(100%, var(--game-max)); display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); align-items: stretch; justify-content: initial; transform: translateX(-50%); }
.tabbar .tab { width: 100%; min-width: 0; max-width: 120px; margin-inline: auto; overflow: hidden; justify-content: center; white-space: nowrap; }
.tabbar .tab svg, .tabbar .pro-gem { flex: 0 0 auto; }

.install-guide { display: none; }
.install-guide[hidden] { display: none; }

html.large-text { font-size: 21px; }
html.large-text .welcome h1 { font-size: clamp(40px, 8vw, 50px); }
html.large-text .section-head h2, html.large-text .plus-banner h2 { font-size: 28px; }
html.large-text .tile-copy b { font-size: 24px; }
html.large-text .tile-copy em, html.large-text .club-summary small, html.large-text .plus-banner small { font-size: 13px; line-height: 1.5; }
html.large-text .game-tile { min-height: 250px; }
html.large-text .game-grid { gap: 15px; }
html.large-text .club-shell { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
html.large-text .club-nav { height: calc(88px + env(safe-area-inset-bottom)); }
html.large-text .club-nav a, html.large-text .club-nav button { width: 100%; font-size: 11px; }
html.large-text .game-main h1, html.large-text .puzzle-heading h1 { font-size: 39px; }
html.large-text .subtitle, html.large-text .progress-copy { font-size: 16px; }
html.large-text .status-line, html.large-text .section-label, html.large-text .found-head { font-size: 13px; }
html.large-text .game-brand, html.large-text .brand { font-size: 23px; }
html.large-text button, html.large-text input { min-height: 48px; }
html.large-text .text-size-button { min-width: 42px; height: 40px; font-size: 14px; }
html.large-text .word, html.large-text .current-clue b, html.large-text .complete-card p { font-size: 15px; }
html.large-text .current-word { font-size: 22px; }
html.large-text .found-words span { font-size: 12px; }
html.large-text .cell { font-size: clamp(18px, 5.7vw, 26px); }
html.large-text .letter { font-size: 21px; }
html.large-text .petal { font-size: 22px; }
html.large-text .square input { font-size: clamp(28px, 9vw, 39px); }
html.large-text .difficulty-button, html.large-text .actions button, html.large-text .secondary-button, html.large-text .primary-button { font-size: 14px; }
html.large-text .plus-list { font-size: 14px; }
html.large-text .how-to-play h2 { font-size: 24px; }
html.large-text .how-to-play ol { font-size: 16px; line-height: 1.6; }
html.large-text .clues li { font-size: 14px; line-height: 1.45; }
html.large-text .word-entry { grid-template-columns: minmax(0,1fr) minmax(102px,auto); }
html.large-text .word-entry input { min-width: 0; letter-spacing: 3px; }
html.large-text .ladder-example span { font-size: 14px; }
html.large-text .install-guide-head h2 { font-size: 25px; }
html.large-text .install-guide-head small, html.large-text .install-platforms li { font-size: 14px; }
html.large-text .install-platforms summary { font-size: 15px; }
html.large-text .tabbar { height: calc(88px + env(safe-area-inset-bottom)); }
html.large-text .tab { font-size: 11px; }
html.large-text .app-shell { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }

@media (min-width: 720px) {
  .club-shell { padding-inline: 28px; }
  .club-topbar, .welcome, .game-section, .plus-banner { max-width: 900px; margin-inline: auto; }
  .game-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .game-tile { min-width: 0; }
  .club-nav { bottom: 16px; padding-inline: 22px; }
  .tabbar { bottom: 16px; border-radius: 0 0 28px 28px; }
}

/* Desktop pages have a 16px outer gutter. Keep fixed bars aligned to the
   inset page surface instead of sizing them against the full viewport. */
@media (min-width: 481px) {
  .club-nav { width: min(calc(100% - 32px), var(--club-max)); }
}

@media (min-width: 431px) {
  .tabbar { bottom: 16px; width: min(calc(100% - 32px), var(--game-max)); }
}

@media (max-width: 370px) {
  .club-logo > span:last-child { font-size: 14px; }
  .game-grid { grid-template-columns: 1fr; }
  .game-tile { min-height: 176px; }
  .game-art { height: 64px; }
  .word-entry { grid-template-columns: minmax(0,1fr) 84px; }
  .actions { grid-template-columns: 1fr; }
  .header-tools { gap: 3px; }
  .text-size-button { min-width: 33px; padding-inline: 7px; }
  html.large-text .word-section .word-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .install-guide { width: calc(100% - 44px); margin: 24px auto 0; padding: 19px; display: block; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 13px 30px rgba(50,64,60,.07); }
  .install-guide-head { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 13px; }
  .install-app-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; background: var(--mint-soft,#dcefe9); }
  .install-app-icon .tile-logo { width: 44px; height: 44px; margin: 0; }
  .install-guide-head p { margin: 0 0 3px; color: var(--mint-dark); font-size: 8px; font-weight: 800; letter-spacing: 1.3px; }
  .install-guide-head h2 { margin: 0; font: 800 20px/1.1 var(--display); letter-spacing: -.5px; }
  .install-guide-head small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.4; }
  .install-now { width: 100%; min-height: 45px; margin-top: 15px; border: 0; border-radius: 13px; color: #fff; background: var(--ink); font-size: 11px; font-weight: 800; }
  .install-now[hidden] { display: none; }
  .install-platforms { display: grid; gap: 8px; margin-top: 15px; }
  .install-platforms details { border: 1px solid var(--line); border-radius: 13px; background: #fbfaf6; overflow: hidden; }
  .install-platforms summary { min-height: 43px; padding: 0 13px; display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; font-size: 11px; font-weight: 800; }
  .install-platforms summary::-webkit-details-marker { display: none; }
  .install-platforms summary b { margin-left: auto; padding: 4px 7px; border-radius: 99px; color: var(--mint-dark); background: var(--mint-soft,#dcefe9); font-size: 8px; letter-spacing: .5px; }
  .install-platforms summary::after { content: "+"; color: var(--muted); font-size: 18px; font-weight: 400; }
  .install-platforms details[open] summary::after { content: "−"; }
  .install-platforms ol { margin: 0; padding: 2px 17px 14px 34px; color: var(--muted); font-size: 11px; line-height: 1.5; }
  .install-platforms li + li { margin-top: 5px; }
  .install-platforms strong { color: var(--ink); }
}

@media (max-height: 560px) and (orientation: landscape) {
  .game-shell, .app-shell { min-height: auto; }
  .game-topbar, .topbar { position: static; }
  .club-shell { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
  .club-nav, .tabbar { height: calc(58px + env(safe-area-inset-bottom)); padding: 4px 10px env(safe-area-inset-bottom); column-gap: 0; }
  .club-nav a, .club-nav button, .tabbar .tab,
  html.large-text .club-nav a, html.large-text .club-nav button, html.large-text .tabbar .tab { width: 100%; max-width: none; min-height: 0; gap: 1px; font-size: 8px; line-height: 1; }
  .club-nav span { margin-bottom: 1px; font-size: 17px; line-height: 1; }
  .tabbar .tab svg { width: 18px; height: 18px; }
  .tabbar .pro-gem { width: 19px; height: 19px; font-size: 12px; }
  html.large-text .app-shell { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

/* Endless catalog: a cooler, more playful companion to the daily table. */
body.catalog-endless { background: #e4e7ef; }
.catalog-endless .club-shell { background: #f5f4f8; }
.catalog-endless .welcome { width: calc(100% - 44px); margin: 10px auto 18px; padding: 28px 24px; position: relative; overflow: hidden; border: 1px solid #d9dcea; border-radius: 25px; color: #293149; background: radial-gradient(circle at 92% 12%, rgba(231,184,112,.28) 0 52px, transparent 53px), radial-gradient(circle at 85% 28%, rgba(123,139,187,.16) 0 112px, transparent 113px), linear-gradient(145deg,#f0eff8,#e8ebf5); box-shadow: 0 16px 34px rgba(67,76,112,.1); }
.catalog-endless .date-line, .catalog-endless .welcome h1 em, .catalog-endless .section-head p { color: #6478aa; }
.catalog-endless .club-summary { position: relative; z-index: 1; border-color: #d9dcea; background: rgba(255,255,255,.7); box-shadow: 0 8px 22px rgba(70,80,120,.07); }
.catalog-endless .daily-ring { color: #fff; background: radial-gradient(circle,#7183b1 58%,transparent 60%),conic-gradient(#7183b1 var(--progress),#dfe2ed 0); }
.catalog-endless .daily-ring small { color: #e9ecf7; }
.catalog-endless .game-section { padding-top: 14px; }
.catalog-endless .game-tile { border-color: #dcddea; background: #fdfcff; box-shadow: 0 13px 30px rgba(61,70,108,.08); }
.catalog-endless .game-tile:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(61,70,108,.13); }
.catalog-endless .daily-state { color: #6478aa; }
.catalog-endless .club-nav { border-color: #d9dce8; background: rgba(246,245,249,.95); }
.catalog-endless .club-nav .active { color: #596fa8; }
.catalog-endless .install-guide { display: none; }

/* Voluntary support, with no ad reservations or gated game features. */
.support-banner{margin:24px 22px 0;padding:24px;border:1px solid #cbded5;border-radius:22px;background:#e7efe7;color:#243331}
.support-banner .support-eyebrow{margin:0 0 10px;font-size:.75rem;font-weight:800;letter-spacing:.1em;color:#386f60}
.support-banner h2{margin:0;font-size:1.65rem;line-height:1.15;letter-spacing:-.035em}
.support-banner>p:not(.support-eyebrow){max-width:42rem;margin:14px 0 18px;font-size:1rem;line-height:1.6}
.support-banner>a{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:12px 16px;border-radius:12px;background:#386f60;color:#fff;text-decoration:none;font-size:.95rem;font-weight:700}
.support-banner a:focus-visible,.game-support a:focus-visible,.support-tab:focus-visible{outline:3px solid #d3a950;outline-offset:4px}
.game-support{margin:22px 0 12px;text-align:center;font-size:.875rem;line-height:1.6;color:#526560}
.game-support a{color:#386f60;text-underline-offset:3px}
.support-tab{text-decoration:none}

/* Calm, accessible completion actions shared by every game. */
.club-completion{margin-top:20px;padding-top:16px;border-top:1px solid #d6ded8;display:grid;gap:12px}
.club-completion p{margin:0;color:#465c53;font-size:1rem;line-height:1.5}
.club-completion .club-next,.club-completion .club-share{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;height:auto;padding:12px 16px;border:1px solid #386f60;border-radius:14px;font:700 1rem/1.4 var(--font-ui);text-align:center;text-decoration:none;white-space:normal}
.club-completion .club-next{color:#fff;background:#386f60}
.club-completion .club-share{color:#285346;background:#fffdfa;cursor:pointer}
.club-completion :focus-visible{outline:3px solid #9b7626;outline-offset:3px}
.club-completion .club-share:disabled{opacity:.65;cursor:wait}
.club-completion .club-share-status{font-size:.875rem}
.club-completion .club-share-status:empty{display:none}
.club-completion textarea{width:100%;min-width:0;padding:12px;border:1px solid #386f60;border-radius:10px;font:1rem/1.5 var(--font-ui);color:#243331;background:#fffdfa;resize:vertical}
.celebration-card{max-height:calc(100dvh - 40px);overflow-y:auto}

#completeAction[hidden],.club-completion [hidden]{display:none}

/* The club mascot shares the welcome row without displacing the daily table. */
.welcome-intro{display:grid;grid-template-columns:minmax(0,1fr) clamp(100px,26vw,180px);align-items:center;gap:12px}
.welcome-copy{min-width:0}
.club-mascot{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:480px){.welcome-intro .welcome-copy h1{font-size:clamp(28px,7.5vw,36px)}html.large-text .welcome-intro{grid-template-columns:minmax(0,1fr) 80px}html.large-text .welcome-intro .welcome-copy h1{font-size:40px}}
@media(max-width:350px){.welcome-intro{grid-template-columns:minmax(0,1fr) 80px;gap:8px}}

/* Quill's four game companions. */
.quill-game-intro{display:grid;grid-template-columns:minmax(0,1fr) 104px;align-items:center;gap:14px}
.quill-game-copy{min-width:0}
.quill-game-mascot{display:block;width:100%;height:auto;max-height:122px;object-fit:contain;border-radius:10px}
.quill-game-intro .subtitle{max-width:34rem}
.quill-woven-intro .puzzle-heading{min-width:0;flex-wrap:wrap;gap:10px}
@media(max-width:380px){.quill-game-intro{grid-template-columns:minmax(0,1fr) 78px;gap:8px}}
@media(min-width:720px){.quill-game-intro{grid-template-columns:minmax(0,1fr) 126px}.quill-game-mascot{max-height:138px}}
@media(max-height:560px) and (orientation:landscape){.quill-game-intro{grid-template-columns:minmax(0,1fr) 68px}.quill-game-mascot{max-height:70px}}

/* Quill's optional post-puzzle invitation. */
.quill-support{display:grid;justify-items:center;gap:12px;margin-top:6px;padding:18px 14px;border:1px solid #d6ded8;border-radius:16px;background:#f7f4ed;text-align:center}
.quill-support img{display:block;width:80px;height:80px;object-fit:contain}
.club-completion .quill-support-title{font-weight:800;color:#285346}
.club-completion .quill-support p{font-size:1rem;line-height:1.5}
.quill-support-link{display:block;max-width:100%;padding:12px 14px;border-radius:12px;color:white;background:#386f60;text-decoration:none;font:700 1rem/1.4 var(--font-ui,var(--ui));overflow-wrap:anywhere}
.quill-support-dismiss{min-height:44px;padding:8px 18px;border:0;background:transparent;color:#465c53;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* Small, one-shot responses keep the club calm while playing. */
.petal, .bloom-actions button { touch-action: manipulation; }
.game-tile { transition: transform 180ms ease-out, box-shadow 180ms ease-out; }
@media (hover: hover) and (pointer: fine) {
  .game-tile:hover { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(50,64,60,.11); }
}
.game-tile:active { transform: scale(.985); }
.game-tile:focus-visible { outline: 3px solid var(--mint-dark); outline-offset: 3px; }
.answer-input.correct { border-color: #5d9b78; background: #eef8f1; color: #397054; }
.answer-input.correct, .echo-input.correct { animation: club-confirm 200ms ease-out; }
.rung.new .letter { animation: club-settle 240ms ease-out; }
.found-words span { animation: none; }
.found-words span.new { animation: club-settle 240ms ease-out; }
.cell.pop { animation: club-confirm 240ms ease-out; }
.complete-card { animation: club-settle 280ms ease-out; }
@keyframes club-settle {
  from { opacity: .65; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes club-confirm {
  from { box-shadow: inset 0 0 0 2px rgba(93,155,120,.4); }
  to { box-shadow: inset 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .game-tile:hover, .game-tile:active, .primary-button:active { transform: none; }
  .cell.hinted::before { background: #f5dca6; transform: scale(1); }
}

/* A dated keepsake, earned only when the whole daily table is complete. */
.daily-postcard-home:empty{display:none}
.daily-postcard-home{margin:4px 22px 24px}
.daily-postcard{padding:20px;border:1px solid #b8cec2;border-radius:18px;background:#fffdfa;color:#243331;text-align:center;box-shadow:inset 0 0 0 6px #edf3ed}
.postcard-top{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}
.daily-postcard .postcard-date{margin:0;color:#465c53;font:700 .875rem/1.4 var(--font-ui,var(--ui))}
.postcard-stamp{flex-shrink:0;border:2px dashed #438d7b;padding:10px 7px;color:#285346;font:800 .75rem/1.4 var(--font-ui,var(--ui));transform:rotate(3deg)}
.daily-postcard>img{display:block;width:140px;height:140px;object-fit:contain;margin:12px auto 4px}
.daily-postcard h2{margin:4px 0 12px;font:700 clamp(1.6rem,5vw,2.15rem)/1.15 Georgia,serif;color:#285346;letter-spacing:-.5px}
.daily-postcard .postcard-note{margin:0 auto;max-width:34ch;font-size:1rem;line-height:1.6;color:#465c53}
.daily-postcard .postcard-signature{margin:12px 0 20px;font:italic 1rem/1.5 Georgia,serif;color:#285346}
.postcard-games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 18px;padding:0;list-style:none}
.postcard-games li{padding:10px 6px;border-radius:8px;font:700 .875rem/1.4 var(--font-ui,var(--ui));overflow-wrap:anywhere}
.postcard-games li:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 4px);justify-self:center}
.postcard-woven{background:#dceee8}.postcard-trellis{background:#e5e8f1}.postcard-bloom{background:#f5e8d5}.postcard-crosswind{background:#e4edf0}.postcard-joinery{background:#f5ebe2}.postcard-echo{background:#eee8f6}
.postcard-save{width:100%;min-height:48px;padding:12px;border:1px solid #386f60;border-radius:12px;background:#386f60;color:#fff;font:700 1rem/1.4 var(--font-ui,var(--ui));cursor:pointer;touch-action:manipulation}
.postcard-save:focus-visible{outline:3px solid #9b7626;outline-offset:3px}.postcard-save:disabled{opacity:.65;cursor:wait}
.daily-postcard .postcard-feedback{margin:10px 0 0;font-size:.875rem;line-height:1.5}.postcard-feedback:empty{display:none}