:root { color-scheme: light; font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #79c9d0; }
button { font: inherit; }
#app { position: relative; width: 100%; height: 100%; overflow: hidden; }
#game { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.glass { border: 2px solid rgba(255,255,255,.58); background: rgba(255,250,230,.83); box-shadow: 0 8px 28px rgba(28,73,74,.16), inset 0 1px rgba(255,255,255,.8); backdrop-filter: blur(8px); }
.hud { position: absolute; top: max(18px, env(safe-area-inset-top)); left: 20px; min-width: 190px; padding: 11px 16px; border-radius: 18px; color: #385657; }
.hud > div:first-child { display: flex; gap: 9px; align-items: center; }
.hud strong { font-size: 15px; }
.sun { color: #efb83d; font-size: 20px; }
.weather { margin-top: 2px; padding-left: 29px; font-size: 12px; color: #668182; }
.seed-pill { position: absolute; top: max(18px, env(safe-area-inset-top)); right: 20px; display: flex; align-items: center; gap: 10px; min-width: 128px; padding: 10px 14px; border-radius: 18px; color: #476057; }
.seed-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; color: #f7e2a0; background: #708c67; }
.seed-pill div { display: grid; }
.seed-pill small { font-size: 10px; color: #70807a; }
.seed-pill strong { font-size: 17px; }
.welcome { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); width: min(560px, calc(100% - 36px)); padding: 20px 22px; text-align: center; border-radius: 24px; color: #405e5b; transition: .35s ease; }
.welcome.hidden { opacity: 0; transform: translate(-50%, 18px); pointer-events: none; }
.welcome p { margin: 0 0 13px; font: 700 18px/1.45 Georgia, serif; letter-spacing: -.2px; }
.welcome button { border: 0; padding: 10px 18px; border-radius: 999px; color: #fffdf2; font-weight: 800; cursor: pointer; background: #6b9478; box-shadow: 0 5px 0 #4d735a; }
.welcome button:active { transform: translateY(3px); box-shadow: 0 2px 0 #4d735a; }
.toast { position: absolute; left: 50%; top: 90px; transform: translate(-50%, -10px); padding: 10px 16px; border-radius: 15px; color: #476057; font-size: 13px; opacity: 0; pointer-events: none; transition: .25s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.hint { position: absolute; left: 20px; bottom: 20px; padding: 9px 13px; border-radius: 14px; color: #57706d; font-size: 12px; transition: opacity .3s; }
kbd { padding: 2px 5px; border: 1px solid #b9c4b7; border-radius: 5px; background: #fffdf3; box-shadow: 0 2px #cdd6ca; font: inherit; font-weight: 800; }
.touch-controls { display: none; }
@media (pointer: coarse), (max-width: 700px) {
  .hint { display: none; }
  .touch-controls { position: absolute; inset: auto 16px max(18px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: end; pointer-events: none; }
  .touch-controls button { pointer-events: auto; border: 2px solid rgba(255,255,255,.55); color: #fff; background: rgba(59,92,84,.62); box-shadow: 0 4px 12px rgba(20,54,56,.18); touch-action: none; }
  .dpad { display: grid; grid-template: 45px 45px 45px / 45px 45px 45px; gap: 3px; }
  .dpad button { border-radius: 14px; }
  .dpad button:nth-child(1) { grid-area: 1/2; }.dpad button:nth-child(2) { grid-area: 2/1; }.dpad button:nth-child(3) { grid-area: 2/2; }.dpad button:nth-child(4) { grid-area: 2/3; }
  .action { width: 68px; height: 68px; border-radius: 50%; font-weight: 900; font-size: 22px; }
  .action small { display: block; font-size: 9px; }
  .welcome { bottom: 115px; }
}