@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=DM+Mono:wght@400;500&family=Outfit:wght@400;500;600;700&display=swap");

:root {
  color-scheme: dark;
  --ink: #071923; --text: #eff5ed; --muted: #b5c9c6; --dim: #a0b6b7;
  --mint: #b3edda; --gold: #e4c387; --cyan: #a8ded7;
  --font: "Outfit", system-ui, sans-serif; --mono: "DM Mono", monospace;
  --display: "Cormorant Garamond", Georgia, serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); }
body { min-height: 100vh; margin: 0; color: var(--text); font-family: var(--font); }
button, select { font: inherit; }
button, a, summary, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible { outline: 2px solid #f5dda4; outline-offset: 4px; }
button { cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.observatory-world { position: fixed; inset: 0; z-index: -2; background: linear-gradient(90deg, #05182140, #0518210d 70%), linear-gradient(0deg, #06192399, transparent 45%), url("/cozy-search/assets/enchanted-observatory-v1.jpg") center / cover no-repeat; pointer-events: none; }
/* Small, independently timed light changes, aligned to details in the painting. */
.world-lights { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.world-lights > i { position: absolute; display: block; transform: translate(-50%,-50%); border-radius: 50%; mix-blend-mode: screen; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.world-twinkle { background: radial-gradient(circle, #fff8e5 0 9%, #ecf6ffbc 18%, #c7e6ef30 42%, transparent 73%); animation-name: background-star-twinkle; }
.world-window { background: radial-gradient(ellipse, #ffcf79ed 0%, #ffb74d66 38%, #f6a4471c 60%, transparent 76%); animation-name: background-window-flicker; }
.world-lights[data-paused="true"] > i { animation-play-state: paused; }
@keyframes background-star-twinkle { 0%,100% { opacity: calc(var(--light-strength)*.18); } 24% { opacity: calc(var(--light-strength)*.4); } 48% { opacity: var(--light-strength); } 69% { opacity: calc(var(--light-strength)*.3); } 83% { opacity: calc(var(--light-strength)*.5); } }
@keyframes background-window-flicker { 0%,100% { opacity: calc(var(--light-strength)*.72); } 8% { opacity: calc(var(--light-strength)*.85); } 19% { opacity: calc(var(--light-strength)*.76); } 31% { opacity: calc(var(--light-strength)*.96); } 40% { opacity: calc(var(--light-strength)*.85); } 53% { opacity: var(--light-strength); } 62% { opacity: calc(var(--light-strength)*.79); } 74% { opacity: calc(var(--light-strength)*.92); } 87% { opacity: calc(var(--light-strength)*.75); } }
@media (prefers-reduced-motion:reduce) { .world-lights { display: none; } }
.world-mist { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 20% 82%, #95dccc14, transparent 46%),radial-gradient(ellipse at 70% 72%,#97cac713,transparent 34%); animation: mist-drift 24s ease-in-out infinite alternate; }
.site-nav { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; width: min(1200px, calc(100% - 48px)); margin: 14px auto 0; padding: 8px 0; border-bottom: 1px solid #cce6dc26; }
.brand { color: #eee8d4; font-size: 13px; font-weight: 500; letter-spacing: .025em; text-decoration: none; }
.brand::before { content: "✦"; color: var(--gold); margin-right: 9px; }
.nav-links { display: flex; align-items: center; gap: 5px; }
.nav-links > a, .games-menu > summary { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 8px; color: #d3ded4; font-size: 12px; text-decoration: none; cursor: pointer; list-style: none; }
.nav-links > a:hover, .games-menu > summary:hover { background: #e1eeda16; color: #fff5d8; }
.games-menu { position: relative; }
.games-menu > summary::-webkit-details-marker { display: none; }
.games-menu > summary::after { content: ""; width: 5px; height: 5px; border-bottom: 1px solid; border-right: 1px solid; transform: rotate(45deg); margin: -3px 0 0 8px; }
.games-panel { position: absolute; right: 0; top: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 5px; width: min(360px, calc(100vw - 40px)); padding: 14px; border: 1px solid #ccb78366; border-radius: 14px; background: #0b242c; box-shadow: 0 20px 60px #0008; }
.games-heading { grid-column: 1/-1; padding: 0 7px 10px; border-bottom: 1px solid #ccb78333; }
.games-heading span { display: block; color: var(--gold); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.games-heading strong { display: block; margin-top: 4px; font-family: var(--display); font-size: 23px; font-weight: 500; }
.games-panel a { padding: 9px; color: var(--text); font-size: 12px; text-decoration: none; border-radius: 7px; }
.games-panel a:hover, .games-panel a.current { background: #d5dfc412; }
.games-panel small { display: block; margin-top: 4px; font-size: 10px; color: var(--muted); }
.game-shell { width: min(1200px, calc(100% - 48px)); margin: 0 auto; padding: 25px 0 50px; }
.game-intro { display: flex; align-items: end; justify-content: space-between; gap: 22px; max-width: 966px; margin-bottom: 23px; }
.eyebrow { color: var(--gold); font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.intro-eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 7px; text-shadow: 0 2px 8px #000; }
.intro-eyebrow i { width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.game-intro h1 { margin: 0; font: 500 clamp(42px,5vw,64px)/.96 var(--display); letter-spacing: -.035em; color: #fff0d5; text-shadow: 0 3px 18px #04212c; }
.game-intro h1 span { display: inline-block; color: var(--gold); font: 400 .42em var(--display); vertical-align: middle; margin: 0 0 8px 4px; text-shadow: 0 0 22px #edc77f88; }
.lede { margin: 8px 0 0; color: #d8e5dc; font-size: 14px; text-shadow: 0 2px 5px #051822; }
.game-status { display: flex; align-items: center; gap: 9px; max-width: 310px; padding: 11px 15px; color: #d4e6dc; border: 1px solid #a9cbbb35; border-radius: 12px; background: #071c27b8; backdrop-filter: blur(12px); font-size: 11px; line-height: 1.4; }
.status-dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: #c9e7b9; box-shadow: 0 0 10px #c4eca6; }
.search-card { position: relative; width: min(966px,100%); --world-a: #afdcd0; --world-b: #e5c589; --world-c: #bac7ef; }
.game-toolbar { display: flex; align-items: stretch; gap: 7px; max-width: 636px; padding: 0 4px 12px; }
.stat-chip { display: grid; min-width: 80px; padding: 7px 12px; border-left: 1px solid #d6bf8344; background: linear-gradient(90deg,#08222ab8,#08222a00); }
.stat-chip span { color: #c4d5cf; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.stat-chip strong { margin-top: 3px; font: 500 18px var(--mono); color: #f0e3c6; }
.stat-chip i { display: none; }
.primary-button { min-height: 48px; margin-left: auto; padding: 0 17px; border: 1px solid #f2dca6; border-radius: 10px; color: #25332a; background: linear-gradient(135deg,#f7e1b0,#cba769); box-shadow: inset 0 1px #fff5d9,0 5px 18px #001d2677; font-size: 12px; font-weight: 600; }
.primary-button span { font-size: 20px; margin-right: 4px; vertical-align: -2px; }
.primary-button:hover { filter: brightness(1.08); }
.game-layout { display: grid; grid-template-columns: minmax(0,636px) minmax(0,262px); gap: 26px; align-items: start; }
.board-stage { position: relative; isolation: isolate; min-width: 0; padding: 18px 20px 12px; border: 1px solid #c4ac7377; border-radius: 25px; background: radial-gradient(ellipse at 50% 0,#34605e66,transparent 65%),linear-gradient(140deg,#14353be8,#0b202be8 60%,#09202cfa); box-shadow: 0 24px 65px #0010198c,inset 0 1px #e4d6a449,inset 0 -2px #0a1519,0 0 0 4px #071a215e; backdrop-filter: blur(12px); }
.board-stage::before { content: ""; position: absolute; inset: 6px; border: 1px solid #ccb58522; border-radius: 20px; pointer-events: none; }
.stage-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 3; }
.stage-heading strong { display: block; margin-top: 3px; color: #f4ead5; font: 500 25px/.96 var(--display); }
.stage-readout { display: grid; justify-items: end; gap: 7px; }
.stage-readout > span { color: #c8d7d0; font-size: 10px; }
.field-meter { display: flex; align-items: center; gap: 8px; }
.field-meter > span { width: 66px; height: 3px; border-radius: 3px; overflow: hidden; background: #d6e3cf22; }
.field-meter i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#b2ddc9,#ecd094); transform: scaleX(0); transform-origin: left; transition: transform .6s ease; }
.field-meter b { color: #d3c7a6; font: 400 8px var(--mono); text-transform: uppercase; }
.sky-map { position: relative; height: 91px; margin: 7px 0 2px; }
.sky-map-label { position: absolute; top: 8px; left: 2px; z-index: 1; color: #acbeb9; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
.sky-map-label b { margin-left: 6px; color: #edcc8c; font-weight: 500; }
#observatory-sky { width: 100%; height: 100%; display: block; }
.grid-wrap { position: relative; isolation: isolate; width: min(100%, 56vh); max-width: 566px; margin: 0 auto; }
.word-grid { --grid-size: 8; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--grid-size),minmax(0,1fr)); gap: clamp(3px,.55vw,6px); padding: clamp(10px,1vw,14px); width: 100%; border: 1px solid #ddc186a8; border-radius: 15px; background: linear-gradient(135deg,#8d82634a,transparent 25%,#22474c40 70%,#bba06d30),#0b2329; box-shadow: inset 0 0 0 3px #101e22,inset 0 0 0 4px #bea77455,0 0 0 3px #c6ac722e,0 9px 22px #00131999; touch-action: none; user-select: none; }
.word-grid::before, .word-grid::after { content: ""; position: absolute; width: 36px; height: 36px; border: 1px solid #e8ca8799; pointer-events: none; }
.word-grid::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; border-radius: 18px 0 0; }
.word-grid::after { right: -5px; bottom: -5px; border-left: 0; border-top: 0; border-radius: 0 0 18px; }
.grid-cell { position: relative; min-width: 0; aspect-ratio: 1; padding: 0; border: 1px solid #8eafa962; border-bottom: 3px solid #0e2d37; border-radius: clamp(5px,.7vw,9px); color: #f0f6e9; background: radial-gradient(ellipse at 30% 0,#96bab32b,transparent 65%),linear-gradient(145deg,#3a5d63,#26444f 55%,#1b3543); box-shadow: inset 0 1px #c3dcc252,inset 1px 0 #aec7b21f,inset 0 -5px 10px #031d2526,0 3px 5px #00111c77; text-shadow: 0 2px 2px #09222a99; font: 500 clamp(13px,2.1vw,27px)/1 var(--font); cursor: crosshair; transition: color .12s,background .14s,box-shadow .14s; }
.grid-cell::before { content: ""; position: absolute; inset: 2px; border-radius: inherit; background: linear-gradient(135deg,#e3f3da12,transparent 45%); pointer-events: none; }
.grid-cell:focus-visible { z-index: 5; outline-offset: 1px; }
.grid-cell.is-preview,.grid-cell.is-anchor { color: #fbf3d3; border-color: #f3dba6; background: linear-gradient(145deg,#749d88,#3b7169); box-shadow: inset 0 1px #f7e6b6,0 0 15px #e7c18144; }
.grid-cell.is-found { color: #143d39; border-color: color-mix(in srgb,var(--found-color) 72%,#c5ddc1); border-bottom-color: #587c63; background: radial-gradient(ellipse at 24% 5%,#fff7dc9e,transparent 65%),linear-gradient(140deg,color-mix(in srgb,var(--found-color) 72%,#f8f0c6),color-mix(in srgb,var(--found-color) 85%,#8ac5a9)); box-shadow: inset 0 1px #fffee2bd,inset 0 -4px 8px #0d665325,0 0 12px color-mix(in srgb,var(--found-color) 18%,transparent); text-shadow: 0 1px #efffe855; }
.grid-cell.is-wrong { animation: wrong-nudge .32s ease; border-color: #e4a38f; }
.grid-cell.is-revealed { outline: 1px solid #f8e5b7; outline-offset: -3px; }
.grid-cell.is-blooming { z-index: 4; animation: moonstone-bloom .7s var(--bloom-delay,0ms) cubic-bezier(.2,.75,.3,1) both; }
#bloom-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; pointer-events: none; }
.bloom-caption { position: absolute; top: 83px; left: 20px; right: 20px; z-index: 9; display: grid; justify-items: center; pointer-events: none; opacity: 0; transition: opacity .24s,transform .3s; transform: translateY(5px); text-align: center; }
.bloom-caption.is-visible { opacity: 1; transform: translateY(0); }
.bloom-caption span { color: #e4d7b7; font-size: 8px; letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 1px 6px #05232a; }
.bloom-caption strong { margin-top: 1px; color: #fff0c7; font: 600 clamp(23px,3vw,35px)/1.1 var(--display); letter-spacing: .13em; text-shadow: 0 0 13px #dfb56a88,0 2px 6px #092b2d; }
.board-stage.has-bloom .sky-map-label { opacity: .4; }
.board-stage.has-finale { box-shadow: 0 24px 65px #0010198c,0 0 55px #e4bf7650,inset 0 1px #f9e4a87d; }
.stage-footer { display: flex; justify-content: space-between; gap: 12px; margin: 16px 2px 0; color: #b3c4b7; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.stage-footer i { display: inline-block; width: 4px; height: 4px; margin-right: 6px; border-radius: 50%; background: #e5c886; box-shadow: 0 0 7px #e8cd8b; vertical-align: 1px; }
.side-panel { display: grid; gap: 15px; min-width: 0; padding-top: 11px; }
.panel-card { padding: 19px; border: 1px solid #c8b28354; border-radius: 17px; background: linear-gradient(140deg,#193b40e6,#0b2530ed); box-shadow: inset 0 1px #d6dbc82a,0 12px 35px #00192144; backdrop-filter: blur(15px); }
.panel-heading { position: relative; }
.panel-heading .eyebrow { display: block; font-size: 9px; }
.panel-heading strong { display: block; color: #f2e7d0; margin-top: 5px; font: 500 25px/1 var(--display); }
.panel-count { display: inline-block; margin-top: 10px; color: #d6ccad; font: 400 10px var(--mono); }
.panel-count[data-complete="true"] { color: var(--mint); }
.panel-toggle { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; margin-top: 14px; min-height: 42px; padding: 9px 12px; border: 1px solid #b9c6aa50; border-radius: 8px; color: #e2e9d6; background: #accaa913; font-size: 11px; }
.toggle-icon { color: var(--gold); font-size: 18px; }
.panel-toggle:hover { background: #b8d0b420; }
.word-list-content { margin-top: 18px; }
.list-progress-heading { display: flex; align-items: center; justify-content: space-between; }
.list-progress-heading strong { font: 400 10px var(--mono); color: var(--gold); }
.list-progress-heading .eyebrow { color: var(--muted); font-size: 8px; }
.progress-track { height: 3px; margin: 8px 0 12px; background: #bed0bb22; border-radius: 3px; overflow: hidden; }
.progress-track span { display: block; height: 100%; width: 0; background: linear-gradient(90deg,var(--mint),var(--gold)); transition: width .4s; }
.word-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }
.word-reveal { width: 100%; min-height: 36px; padding: 6px 3px; border: 1px solid #bed0b529; border-radius: 7px; color: #dbe6d4; background: #bbd1b908; font: 500 10px var(--mono); letter-spacing: .025em; }
.word-reveal:hover:enabled { background: #c9dabc18; border-color: #ddc99480; }
.word-list .is-found .word-reveal { color: #b5d7c2; background: #b5d7bd13; border-color: #a4c8a22b; text-decoration: line-through; text-decoration-color: #d2c59b; }
.panel-copy { margin: 13px 0 0; color: #b4c9c5; font-size: 11px; line-height: 1.65; }
.difficulty-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin-top: 15px; }
.difficulty-controls button { position: relative; display: grid; justify-items: start; gap: 4px; min-height: 51px; padding: 9px 10px; border: 1px solid #b8c8af30; border-radius: 8px; color: #e3e8d8; background: #bfd6bd06; text-align: left; }
.difficulty-controls button b { font-weight: 500; font-size: 11px; }
.difficulty-controls button small { color: #b5c7bd; font: 400 8px var(--mono); }
.difficulty-controls button[data-difficulty="very-hard"] { grid-column: 1/-1; }
.difficulty-controls button[aria-pressed="true"] { border-color: #dbc58cbd; background: linear-gradient(130deg,#c7c89a2b,#c7c89a0d); color: #fff0c8; box-shadow: inset 0 1px #dfd9b72b; }
.difficulty-controls button[aria-pressed="true"]::after { content: ""; width: 4px; height: 4px; position: absolute; right: 8px; top: 11px; border-radius: 50%; background: #edcd89; box-shadow: 0 0 7px #ebc885; }
.select-wrap { display: block; margin-top: 15px; }
.select-wrap select { width: 100%; min-height: 42px; border: 1px solid #c3c3a73b; border-radius: 8px; padding: 8px; background: #122f38; color: #e3e9d7; font-size: 11px; }
.music-button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 42px; padding: 8px 12px; margin-top: 8px; border: 1px solid #afcbb94d; border-radius: 8px; color: #e0ebd8; background: linear-gradient(135deg,#345952,#204249); font-size: 11px; }
.music-bars { display: flex; align-items: center; gap: 3px; height: 16px; }
.music-bars i { height: 5px; width: 2px; border-radius: 2px; background: #d7c58f; }
.music-bars i:nth-child(2),.music-bars i:nth-child(4) { height: 11px; }
.music-bars i:nth-child(3) { height: 16px; }
.music-button.is-playing .music-bars i { animation: music-pulse .9s ease-in-out infinite alternate; }
.music-button.is-playing .music-bars i:nth-child(2n) { animation-delay: -.6s; }
.mobile-instruction { display: none; }
@keyframes mist-drift { from { transform: translateX(-2%); opacity: .45; } to { transform: translateX(2%); opacity: 1; } }
.is-backgrounded .world-mist,.is-backgrounded .music-bars i { animation-play-state: paused; }
@keyframes moonstone-bloom { 0%,100% { transform: translateY(0); } 35% { transform: translateY(-3px); box-shadow: 0 0 22px #e9ce8b88,inset 0 1px #ffffe9; filter: brightness(1.14); } }
@keyframes wrong-nudge { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
@keyframes music-pulse { to { transform: scaleY(.45); } }
@media (hover:hover) and (pointer:fine) { .grid-cell:hover { color: #fff8df; border-color: #cfcf9f; box-shadow: inset 0 1px #dcebd7,0 0 14px #caebc427; } .grid-cell.is-found:hover { color: #113d36; } }
@media (min-width:1500px) { .game-shell,.site-nav { width: min(1320px,calc(100% - 80px)); } .search-card,.game-intro { max-width: 1000px; width: 100%; } .game-layout { grid-template-columns: minmax(0,686px) 268px; } .game-toolbar { max-width: 686px; } }
@media (max-width:1000px) { .game-layout { grid-template-columns: minmax(0,1fr) 226px; gap: 16px; } .panel-card { padding: 16px; } .game-toolbar { max-width: none; } .game-intro { max-width: none; } .observatory-world { background-position: 60% center; } .board-stage { padding: 16px 14px 12px; } }
@media (max-width:820px) { .site-nav,.game-shell { width: calc(100% - 32px); } .game-layout { grid-template-columns: minmax(0,1fr); gap: 20px; } .game-intro { align-items: start; } .game-status { max-width: 245px; margin-top: 13px; } .grid-wrap { width: 100%; max-width: 570px; } .side-panel { grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; padding-top: 0; } .music-card { grid-column: 2; } .words-card { grid-row: span 2; } .board-stage,.panel-card { backdrop-filter: none; } .observatory-world { background-position: 68% top; } }
@media (max-width:560px) { .site-nav { width: calc(100% - 28px); margin-top: 6px; } .site-nav .brand { font-size: 11px; } .nav-links>a,.games-menu>summary { min-height: 40px; padding: 0 9px; font-size: 11px; } .game-shell { width: calc(100% - 22px); padding: 24px 0 calc(25px + env(safe-area-inset-bottom)); } .game-intro { display: block; margin: 0 5px 16px; } .intro-eyebrow { font-size: 9px; } .game-intro h1 { font-size: 49px; } .lede { font-size: 13px; margin-top: 6px; } .game-status { max-width: none; margin-top: 14px; min-height: 40px; padding: 9px 12px; font-size: 11px; } .observatory-world { background-position: 74% center; } .world-mist { background: linear-gradient(0deg,#061b29a3,#061b2930 80%); } .stat-chip { min-width: 60px; padding: 7px 8px; } .stat-chip strong { font-size: 16px; } .stat-chip span { font-size: 8px; } .game-toolbar { gap: 4px; padding: 0 3px 12px; } .primary-button { min-height: 46px; padding: 0 12px; font-size: 11px; } .primary-button span { font-size: 17px; } .board-stage { padding: 15px 10px 12px; border-radius: 20px; } .stage-heading { margin: 0 3px; gap: 6px; } .stage-heading strong { font-size: 24px; } .stage-heading .eyebrow { font-size: 9px; } .stage-readout>span { max-width: 145px; font-size: 9px; text-align: right; } .field-meter { gap: 5px; } .field-meter>span { width: 44px; } .field-meter b { font-size: 7px; } .sky-map { height: 85px; } .sky-map-label { top: 7px; font-size: 8px; } .word-grid { padding: 9px; gap: 4px; } .grid-cell { font-size: clamp(14px,4.5vw,21px); border-bottom-width: 2px; } .search-card[data-difficulty="tricky"] .grid-cell { font-size: 15px; } .search-card[data-difficulty="hard"] .grid-cell,.search-card[data-difficulty="very-hard"] .grid-cell { font-size: 13px; } .bloom-caption { top: 83px; left: 10px; right: 10px; } .bloom-caption strong { font-size: 25px; } .stage-footer { margin-top: 15px; font-size: 7px; gap: 7px; } .side-panel { grid-template-columns: minmax(0,1fr); gap: 12px; } .words-card,.music-card { grid-column: auto; grid-row: auto; } .panel-card { padding: 17px; border-radius: 16px; } .panel-heading strong { font-size: 27px; } .panel-toggle { min-height: 44px; } .word-reveal { min-height: 44px; font-size: 12px; } .difficulty-controls { grid-template-columns: repeat(3,minmax(0,1fr)); } .difficulty-controls button { min-height: 55px; } .difficulty-controls button[data-difficulty="very-hard"] { grid-column: span 2; } .difficulty-controls button b { font-size: 12px; } .select-wrap select,.music-button { min-height: 46px; font-size: 13px; } .panel-copy { font-size: 12px; } .mobile-instruction { display: block; margin: 16px 8px 0; text-align: center; color: #cddcd3; font-size: 11px; } .mobile-instruction span { color: var(--gold); margin-right: 4px; } }
@media (max-width:360px) { .stat-chip { min-width: 51px; padding: 7px 6px; } .stat-chip strong { font-size: 15px; } .primary-button { padding: 0 9px; } .grid-cell { font-size: 16px; } .word-grid { gap: 3px; padding: 8px; } .stage-footer { letter-spacing: .02em; } .stage-readout>span { max-width: 124px; } .game-intro h1 { font-size: 44px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .grid-cell.is-blooming { outline: 1px solid #fff0be; outline-offset: -3px; } }