:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-synthesis: none;
  --cream: #fff8e9;
  --dark: #273646;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #263645; }
button { font: inherit; -webkit-tap-highlight-color: transparent; }
.game { width:100%; height:100%; height:100svh; display:grid; place-items:center; overflow:hidden; position:relative; isolation:isolate; }
.ambient { position:absolute; inset:-16%; background: url("./assets/market-day.webp") center/cover; filter:blur(55px) brightness(.47) saturate(.67); transform:scale(1.07); }
.game[data-time="night"] .ambient { background-image:url("./assets/market-night.webp"); filter:blur(55px) brightness(.64) saturate(.8); }
.view { position:relative; width:min(100%, 68.43svh); height:100%; overflow:hidden; background:#a1b1ac; box-shadow:0 0 0 1px #121a2040,0 18px 95px #0c172468; }
#world { display:block; width:100%; height:100%; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#world .backdrop { pointer-events:none; }
.time-layer { opacity:0; transition:opacity 950ms ease; }
.game[data-time="dusk"] .dusk { opacity:1; }
.game[data-time="night"] .night { opacity:1; }
.night-wash { pointer-events:none; transition:opacity 900ms ease; }
.game[data-time="night"] .night-wash { opacity:.13; }
.game[data-time="night"] #mio,
.game[data-time="night"] #toto,
.game[data-time="night"] #baker,
.game[data-time="night"] #keeper { filter:brightness(.72) saturate(.79); }
#baker, #mio, #toto, #keeper { pointer-events:none; transform-box:fill-box; transform-origin:center bottom; }
#mio { animation:breathe 3.1s ease-in-out infinite alternate; }
#toto { animation:catIdle 3.6s ease-in-out infinite alternate; }
#baker { transform-origin: center bottom; transition:transform .25s ease; }
#keeper-body { transform-origin:0px -22px; transition:transform .32s ease; }
#glyph { cursor:grab; outline:none; touch-action:none; }
#glyph:focus-visible .glyph-text { stroke:#fce3ad; stroke-width:6px; }
#glyph:active { cursor:grabbing; }
#glyph-position { transition:transform 450ms cubic-bezier(.2, .8, .3, 1); }
.game.is-dragging #glyph-position { transition:none; }
#glyph-ink { animation:glyphFloat 2.5s ease-in-out infinite alternate; transform-origin:0 0; }
.game.is-dragging #glyph-ink { animation:none; transform:scale(1.08) translateY(-15px); }
.glyph-text {
  fill:#fff9ed; stroke:#293d4d; stroke-width:7; stroke-linejoin:round; paint-order:stroke fill;
  font-family:"Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-size:63px; font-weight:800; letter-spacing:-6px;
}
.game.is-dragging .glyph-text { stroke:#98643f; }
#drop-hints { pointer-events:none; }
.hint-circle { fill:#fff2d6; fill-opacity:.09; stroke:#fff3d8; stroke-width:5; stroke-opacity:.72; stroke-dasharray:4 16; opacity:0; transition:opacity .2s; }
.game.is-dragging .hint-circle { opacity:.8; animation:hintPulse 1.25s ease-in-out infinite alternate; }
.game.is-dragging .hint-circle.nearest { fill-opacity:.22; stroke-dasharray:none; stroke-width:8; }
#bake-steam, #bell-sound, #field-effect { pointer-events:none; opacity:0; }
#bake-steam { transform:translateY(8px); }
.game[data-outcome="bakery"] #bake-steam { opacity:1; animation:steamUp 2.5s ease-out infinite; }
.game[data-outcome="bakery"] #baker { animation:bakerReact 950ms ease-in-out 2; }
.bakery-light { opacity:0; transition:opacity .4s; }
.game[data-outcome="bakery"] .bakery-light { opacity:1; }
#bell-physical { transform-origin: 0 -29px; }
.game[data-outcome="tower"] #bell-physical { animation:bellSwing 950ms ease-in-out 2; }
.game[data-outcome="tower"] #keeper-body { animation:keeperTurn 1.5s ease-in-out 1; }
.game[data-outcome="tower"] #bell-sound { opacity:1; animation:bellWave 1.2s ease-out 2; transform-origin:center; }
.game[data-outcome="field"] #field-effect { opacity:1; }
.game[data-outcome="field"] .ripple { transform-origin:0 0; animation:ripple 1.4s ease-out 2 both; }
.game[data-outcome="field"] .ripple-two { animation-delay:.18s; }
.game[data-outcome="field"] .ripple-three { animation-delay:.4s; }
.game[data-outcome="field"] #toto { animation:catSurprise 1s ease-out 2; }
.game[data-outcome="field"] #mio { animation:mioLean 1.15s ease-in-out 2; }
#screen-flash { pointer-events:none; opacity:0; }
.game[data-outcome="tower"] #screen-flash { opacity:.65; animation:screenFlash 1.15s ease-out 1; }
.ui-header, .ui-footer { position:absolute; z-index:4; left:0; right:0; display:flex; align-items:flex-start; justify-content:space-between; pointer-events:none; color:var(--cream); }
.ui-header { top:0; padding:calc(env(safe-area-inset-top, 0px) + 22px) 19px 22px; background:linear-gradient(#142f46aa, transparent); }
.brand, .controls { pointer-events:auto; }
.brand { display:flex; flex-direction:column; gap:5px; filter:drop-shadow(0 2px 4px #0e203b99); }
.brand-name { font-size:19px; font-weight:750; letter-spacing:.1em; }
.location { font-size:12px; font-weight:550; letter-spacing:.1em; color:#f9f2e8ee; }
.controls { display:flex; gap:8px; }
.control, .undo { display:inline-flex; justify-content:center; align-items:center; gap:5px; background:#172b38bb; border:1px solid #f8f1db55; border-radius:999px; padding:10px 13px; color:var(--cream); font-size:13px; font-weight:600; white-space:nowrap; min-height:39px; cursor:pointer; transition:background .15s, transform .15s; }
.control:active, .undo:active { transform:scale(.95); background:#1b394a; }
.control:focus-visible, .undo:focus-visible { outline:3px solid #ffdda1; outline-offset:3px; }
#sound-toggle { width:40px; padding:0; font-size:21px; }
#sound-toggle[aria-pressed="false"] { opacity:.53; }
.ui-footer { align-items:flex-end; bottom:0; padding:55px 18px calc(env(safe-area-inset-bottom,0px) + 20px); background:linear-gradient(transparent,#122435c0 66%,#122435dc); gap:15px; }
.instruction { margin:0; pointer-events:auto; max-width:74%; font-size:14px; line-height:1.55; letter-spacing:.025em; font-weight:650; text-shadow:0 2px 7px #142d42a8; transition:opacity .2s; }
.undo { pointer-events:auto; padding-inline:13px; background:#152c3cb8; }
.build-label { position:absolute; z-index:4; bottom:calc(env(safe-area-inset-bottom,0px) + 5px); right:18px; pointer-events:none; font-size:8px; letter-spacing:.13em; color:#eef1e96e; }
@keyframes breathe { from{translate:0 0} to{translate:0 -5px} }
@keyframes catIdle { from{rotate:-1deg} to{rotate:1.5deg} }
@keyframes glyphFloat { from{transform:translateY(-3px)} to{transform:translateY(6px)} }
@keyframes hintPulse { from{stroke-opacity:.45} to{stroke-opacity:.95} }
@keyframes steamUp { from{transform:translateY(15px); opacity:0} 35%{opacity:.85} to{transform:translateY(-25px);opacity:0} }
@keyframes bakerReact {0%,100%{transform:translateY(0)}30%{transform:translateY(-18px) rotate(-3deg)}55%{transform:translateY(-5px) rotate(2deg)}}
@keyframes bellSwing {0%,100%{rotate:0deg} 24%{rotate:15deg} 52%{rotate:-13deg} 76%{rotate:9deg}}
@keyframes bellWave {from{transform:scale(.5);opacity:.86}to{transform:scale(1.7);opacity:0}}
@keyframes keeperTurn {0%,100%{rotate:0deg} 35%{rotate:-17deg} 72%{rotate:7deg}}
@keyframes ripple {from{transform:scale(.3);opacity:.7}to{transform:scale(1.65);opacity:0}}
@keyframes catSurprise {0%,100%{translate:0 0;rotate:0}40%{translate:0 -24px;rotate:8deg}}
@keyframes mioLean {0%,100%{rotate:0deg}40%{rotate:8deg}}
@keyframes screenFlash {from{opacity:.65;transform:scale(1)}to{opacity:0;transform:scale(10)}}
@media(max-width:680px) {
  .view { width:100%; height:100%; }
  .ui-header { padding-left:17px; padding-right:17px; }
}
@media (orientation:landscape) and (max-height:520px) {
  .view { width:min(100%, 92.44svh); height:100%; }
  .ui-header { padding-top:12px; }
  .ui-footer { padding-top:22px; padding-bottom:12px; }
  .brand-name { font-size:16px; }
  .location { font-size:10px; }
  .instruction { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) {
  #mio,#toto,#glyph-ink { animation:none; }
  .time-layer, #glyph-position { transition:none; }
}