/* Quiet garden paving: texture and foliage stay beneath the letters. */
:root{--paver-ink:#24392f;--paver-edge:#819077;--paver-top:#c8c6b7;--paver-bottom:#a7ae98}
.night-scene{opacity:calc(.34 + var(--garden-light)*.035)}
.game-layout{gap:42px;padding-top:24px}
.play-panel{max-width:480px}
.board-surround{background:linear-gradient(150deg,#263a2eea,#13261eea);border-color:#82936b70;box-shadow:0 14px 38px #010a0a55,inset 0 1px 0 #d7dfb71c}
.board-heading{font-size:14px;letter-spacing:1.3px}
.board-heading>span:last-child{font-size:14px}
.tile{background:var(--paver-edge);filter:none!important}
.tile::before{inset:2px 2px 4px;background:radial-gradient(ellipse at 7% 80%,#74875c35,transparent 46%),linear-gradient(145deg,var(--paver-top),var(--paver-bottom));box-shadow:inset 0 2px 1px #f3f3db88,inset 0 -2px 3px #64765528}
.tile .letter{color:var(--paver-ink);text-shadow:0 1px 0 #ffffff45;font-weight:500}
.tile .tile-value{color:#344c39;text-shadow:none;font-size:12px}
.tile:not(:disabled):hover::before{filter:brightness(1.08)}
.tile:focus-visible{outline:3px solid #f9df92;outline-offset:3px;z-index:4}
.tile:is(.bonus2,.bonus3):not(.weeds){background:#779f9e}
.tile:is(.bonus2,.bonus3):not(.weeds)::before{background:linear-gradient(145deg,#b5d1c9,#8fbdb8 58%,#73a6a6);box-shadow:inset 0 2px 2px #e0f2e399,inset 0 -8px 14px #528e9330}
.tile.bonus3:not(.weeds)::before{background:linear-gradient(145deg,#a7d5d0,#71b5b4 58%,#4b969f)}
.tile:is(.bonus2,.bonus3) .letter{color:#153f40;text-shadow:0 1px 0 #e8faf044}
.tile:is(.bonus2,.bonus3) .tile-value{color:#123f43;text-shadow:none;font-weight:700}
.tile:is(.bonus2,.bonus3) .tile-flame{display:none!important}
.tile-water{position:absolute;inset:0;display:none;overflow:hidden;pointer-events:none;z-index:1}
.tile:is(.bonus2,.bonus3):not(.weeds) .tile-water{display:block}
.tile-water>span{position:absolute;width:165%;height:60%;left:-35%;bottom:-15%;border-radius:48% 50% 0 0;background:#367e862b;border-top:2px solid #d9f6edaa;transform:rotate(-8deg);animation:water-drift 11s ease-in-out infinite alternate;animation-delay:var(--motion-delay)}
.tile-water>span:last-child{bottom:-28%;left:-15%;transform:rotate(9deg);background:#2b727c1f;animation-duration:14s;animation-direction:alternate-reverse;opacity:.75}
.tile.lantern-target:not(.weeds){background:#c7ab6f}
.tile.lantern-target:not(.weeds)::before{background:radial-gradient(ellipse at 50% 60%,#e8ce91,#c5bd98 75%);box-shadow:inset 0 2px 2px #fff1c377,inset 0 0 12px #ffe4a230}
.tile.lantern-target .letter{color:#443d28;text-shadow:0 1px 0 #fff0cd77}
.tile.lantern-target .tile-value{color:#58492a;text-shadow:none}
.tile.lantern-target .tile-flame{width:76%;height:83%;filter:none;animation-name:paver-flame;opacity:.45}
.tile.weeds{background:#6c8053}
.tile.weeds::before{background:radial-gradient(ellipse at 5% 65%,#647b4e77,transparent 60%),linear-gradient(145deg,#bac2a4,#95a286);box-shadow:inset 0 2px 1px #e7edd266}
.tile.weeds .letter{color:#253c27;text-shadow:0 1px 0 #f1f1d766}
.tile.weeds .tile-value{color:#314c2c;font-size:13px;text-shadow:none}
.tile-weeds img{opacity:.7;left:-47%;width:100%;height:168%;top:-26%}
.tile-weeds img:last-child{left:41%;opacity:.4}
.tile.weeds.bottom-weeds{background:#d8bd75}
.tile.weeds.bottom-weeds::before{animation:weed-warning 3s ease-in-out infinite}
.tile:is(.selected,.blast-zone){background:#f1d28a}
.tile:is(.selected,.blast-zone)::before{background:linear-gradient(145deg,#f7e4af,#dbba78)!important}
.tile:is(.selected,.blast-zone) .letter,.tile:is(.selected,.blast-zone) .tile-value{color:#2b3a2c;text-shadow:none}
.tile:is(.selected,.blast-zone) .tile-water{opacity:.25}
.tile:is(.selected,.blast-zone) .tile-flame{opacity:.15;animation:none}
.tile.lantern-target.selected::after{color:#584625}
.bottom-line{background:#b8a274}
.recent-block{border-top:1px solid #a7bf9633;margin-top:12px}
.pace-note{padding-top:22px}
.message,.board-instructions,#lantern-next{font-size:14px}
.bloom-button{color:#f6e6b6}
.water-mark{background:#a5cecb;color:#163c3e}
.rule p+p{margin-top:8px}
.board.overgrown .tile{filter:brightness(.7)!important}
@keyframes water-drift{from{transform:translateX(-5%) rotate(-8deg)}to{transform:translateX(9%) rotate(6deg)}}
@keyframes paver-flame{0%,100%{transform:scale(.94,1) skewX(-2deg);opacity:.38}40%{transform:scale(1.02,.97) skewX(2deg);opacity:.5}72%{transform:scale(.95,1.06);opacity:.44}}
@media(max-width:900px) and (min-width:621px){.game-layout{gap:24px}.play-panel{max-width:460px}}
@media(max-width:620px){.game-layout{gap:12px;padding-top:12px}.score-panel{grid-template-columns:1fr 1fr}.score-block{grid-row:1}.level-block{grid-column:2;grid-row:1;align-self:center}.lantern-progress{grid-row:2;grid-template-columns:minmax(0,1fr) 122px}.play-panel{max-width:460px}.board-heading,.board-heading>span:last-child{font-size:12px}.tile .tile-value{font-size:11px;bottom:10%}.tile.weeds .tile-value{font-size:12px}.message,.board-instructions{font-size:13px}.tile .letter{font-size:clamp(22px,6.1vw,28px)}#lantern-next{font-size:12px}.recent-block{margin-top:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* The phone play surface uses the visible viewport, including Safari's bars. */
@media(max-width:620px) and (orientation:portrait){
  body{min-height:100svh}
  .app{height:100svh;height:100dvh;max-width:460px;box-sizing:border-box;display:grid;grid-template-rows:44px minmax(0,1fr) 44px;gap:6px;padding:max(6px,env(safe-area-inset-top)) 10px max(6px,env(safe-area-inset-bottom));margin:0 auto}
  .masthead{padding:0;border-bottom:0;min-width:0}
  .wordmark{font-size:27px;letter-spacing:-1px}
  .wordmark i{font-size:13px;padding-left:3px}
  .top-actions{gap:5px}
  .icon-button{width:34px;height:40px;border-radius:9px}
  .quiet-button{padding:9px;font-size:12px}
  .game-layout{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:66px minmax(0,1fr);min-height:0;gap:6px;padding:0}
  .score-panel{display:grid;grid-template-columns:85px minmax(0,1fr);grid-template-rows:23px 25px;align-self:stretch;gap:0 12px;padding:8px 10px;min-width:0}
  .score-block{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;justify-content:center}
  .score-block .eyebrow{display:none}
  .score{font-size:31px;line-height:1;margin:0 0 3px}
  .best{font-size:11px;white-space:nowrap}
  .best>span:first-child{margin-left:3px}
  .level-block{grid-column:2;grid-row:1;align-self:center;margin:0}
  .level-heading{font-size:12px}
  progress{margin:3px 0 0;height:3px}
  .lantern-progress{grid-column:2;grid-row:2;display:flex;align-items:center;gap:4px;margin:0;padding:0;border:0;min-width:0}
  .lanterns{flex:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;margin:0;min-width:0}
  .lantern{height:25px;min-width:0}
  .lantern img{width:25px;height:25px;max-width:100%}
  .lantern-heading{display:block;order:2;flex-shrink:0}
  .lantern-heading .eyebrow,#lantern-next{display:none}
  #lantern-count{font-size:11px}
  .play-panel{display:grid;grid-template-rows:18px minmax(0,1fr) 42px 32px 44px;gap:4px;min-height:0;width:100%;max-width:none;align-self:stretch}
  .board-heading{margin:0;font-size:12px;line-height:18px}
  .board-heading>span:last-child{font-size:12px}
  .board-surround{display:flex;align-items:center;justify-content:center;min-height:0;padding:5px 7px;border-radius:12px;overflow:clip}
  .board{height:100%;width:auto;max-width:100%;aspect-ratio:5.6/7.16;flex:none}
  .bottom-line{display:none}
  .tile .letter{font-size:clamp(19px,5.7vw,25px)}
  .tile .tile-value{font-size:10px;bottom:9%}
  .tile.weeds .tile-value{font-size:11px}
  .word-tray{min-height:0;margin:0;padding:5px 8px 5px 12px;gap:6px}
  .selected-word{font-size:21px;letter-spacing:.5px;max-height:32px;overflow:auto}
  .selected-word.placeholder{font-size:13px}
  #word-points{font-size:13px}
  .clear-button{width:30px;height:30px}
  .message{font-size:12px;line-height:15px;margin:0;min-height:0;align-self:center}
  .play-actions{gap:7px;min-height:0}
  .play-actions button{min-height:44px;padding:7px;font-size:14px;gap:6px}
  .bloom-icon{width:20px;height:20px}
  .board-instructions{display:none}
  footer{margin:0;padding:0;border:0;gap:8px;align-items:center;flex-direction:row;justify-content:space-between;min-height:0}
  .collection-link{font-size:12px;padding:4px 0}
  #save-status{font-size:10px;text-align:right;max-width:44%}
  .modal{max-height:calc(100dvh - 24px);overflow:auto}
}
@media(max-width:620px) and (max-height:620px) and (orientation:portrait){
  .app{grid-template-rows:40px minmax(0,1fr) 44px;gap:4px;padding-top:max(4px,env(safe-area-inset-top));padding-bottom:max(4px,env(safe-area-inset-bottom))}
  .game-layout{grid-template-rows:50px minmax(0,1fr);gap:4px}
  .score-panel{grid-template-rows:20px 22px;padding:3px 10px}
  .score{font-size:28px}
  .lantern,.lantern img{height:22px}
  .play-panel{grid-template-rows:minmax(0,1fr) 38px 28px 44px;gap:4px}
  .board-heading{display:none}
  .tile .letter{font-size:18px;margin-top:0}
  .tile:not(.bonus2):not(.bonus3):not(.lantern-target):not(.weeds) .tile-value{display:none}
  .tile.weeds .tile-value{display:none}
  .tile:is(.bonus2,.bonus3,.lantern-target) .letter{margin-top:-4px}
  .tile:is(.bonus2,.bonus3,.lantern-target) .tile-value{font-size:10px;bottom:6%}
  .selected-word{font-size:19px}
}