:root { color-scheme: dark; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; user-select: none;
  font-family: "Baloo 2", system-ui, -apple-system, sans-serif; color: #f2f6ea; background: #14251a; }
body { display: flex; flex-direction: column; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

#menu { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: linear-gradient(160deg, #4a8f56, #2c5e3a 60%, #16341f); }
#menu[hidden], #play[hidden] { display: none; }
.menu-box { width: min(560px,100%); text-align: center; background: rgba(0,0,0,.3);
  border: 3px solid rgba(255,255,255,.16); border-radius: 24px; padding: clamp(20px,5vw,38px); }
.logo { font-size: clamp(34px,9.5vw,60px); font-weight: 800; line-height: 1.05; }
.tagline { font-size: clamp(14px,3.6vw,18px); line-height: 1.6; opacity: .93; }
.how { font-size: clamp(12px,3vw,15px); opacity: .8; background: rgba(255,255,255,.08); border-radius: 12px; padding: 9px; }
.big { display: inline-block; margin-top: 8px; background: #f0b429; color: #2a1f00; font-weight: 800;
  font-size: clamp(18px,4.6vw,22px); padding: 14px 32px; border-radius: 999px; box-shadow: 0 6px 0 #c8920f; }
.big:active { transform: translateY(4px); box-shadow: 0 2px 0 #c8920f; }
.linky { margin-top: 10px; font-size: 14px; opacity: .65; text-decoration: underline; }

#play { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px;
  padding: max(6px, env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)); }
#hud { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chip { background: #21402a; border: 2px solid #3d6b48; border-radius: 999px; padding: 4px 11px;
  font-size: clamp(10.5px,2.7vw,13px); font-weight: 800; }
.hp { font-size: clamp(15px,3.6vw,20px); }
#place { margin-right: auto; }

#stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
#world { position: relative; width: 100%; aspect-ratio: 20 / 13; max-height: 100%;
  border: 4px solid #3d6b48; border-radius: 10px; overflow: hidden; }
#grid { position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(var(--tw), 1fr); grid-template-rows: repeat(var(--th), 1fr); }
.t { display: flex; align-items: center; justify-content: center; font-size: clamp(9px,2.2vw,17px); }
.grass { background: #4f8c46; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.path  { background: #b39b6a; }
.rock  { background: #6f7076; box-shadow: inset -3px -3px 0 rgba(0,0,0,.25); }
.tree  { background: #2f6134; box-shadow: inset 0 0 0 2px #24512a; }
.tree::after { content: '🌲'; font-size: clamp(10px,2.4vw,18px); }
.water { background: #3b74c4; box-shadow: inset 0 0 0 2px #2f5fa5; }
.flowers { background: #4f8c46; }
.flowers::after { content: '🌼'; font-size: clamp(8px,2vw,15px); }
.bush { background: #4f8c46; }
.bush::after { content: '🌳'; font-size: clamp(10px,2.4vw,18px); }
.door { background: #6b4b2a; }
.chest { background: #4f8c46; }
.key { background: #4f8c46; }
.stairs { background: #55565c; }

#actors { position: absolute; inset: 0; pointer-events: none; }
.hero, .foe { position: absolute; transform: translate(-50%,-50%); font-size: clamp(13px,3vw,22px); line-height: 1; }
.hero { z-index: 6; }
.hero .sword { position: absolute; font-size: .8em; opacity: 0; transition: opacity .06s; }
.hero.swinging .sword { opacity: 1; }
.hero[data-dir=up] .sword { left: 50%; top: -85%; transform: translateX(-50%) rotate(-45deg); }
.hero[data-dir=down] .sword { left: 50%; top: 70%; transform: translateX(-50%) rotate(135deg); }
.hero[data-dir=left] .sword { left: -85%; top: 10%; transform: rotate(-135deg); }
.hero[data-dir=right] .sword { left: 75%; top: 10%; transform: rotate(45deg); }
.hero.hurt { animation: blink .18s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25 } }
.foe { z-index: 5; }

.say { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 20;
  background: rgba(10,25,15,.9); border: 2px solid #3d6b48; border-radius: 999px;
  padding: 5px 14px; font-weight: 800; font-size: clamp(11px,2.8vw,14px);
  opacity: 0; transition: opacity .2s; white-space: nowrap; max-width: 92%; }
.say.on { opacity: 1; }

#controls { flex: none; display: flex; align-items: center; justify-content: space-between; }
#dpad { display: grid; grid-template-columns: repeat(3,44px); grid-template-rows: repeat(3,44px); gap: 3px; }
#dpad button { background: #2c5e3a; border: 3px solid #4f8c46; border-radius: 10px; font-size: 15px; }
#dpad button:active { background: #4f8c46; }
#dpad [data-d=up] { grid-area: 1/2; } #dpad [data-d=left] { grid-area: 2/1; }
#dpad [data-d=right] { grid-area: 2/3; } #dpad [data-d=down] { grid-area: 3/2; }
#buttons { display: flex; gap: 10px; }
#buttons button { width: 62px; height: 62px; border-radius: 50%; font-size: 26px;
  background: #2c5e3a; border: 3px solid #4f8c46; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
#btn-sword { background: #7a3030; border-color: #c85454; }
#buttons button:active { transform: translateY(3px); box-shadow: none; }

.card-screen { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(6,16,10,.82); }
.card-box { width: min(460px,100%); text-align: center; background: #1d3a26;
  border: 4px solid #4f8c46; border-radius: 22px; padding: clamp(20px,5vw,32px); }
.card-screen.bad .card-box { border-color: #c85454; }
.card-box h2 { margin: 0 0 10px; font-size: clamp(21px,5.6vw,29px); }
.card-box p { margin: 7px 0; font-size: clamp(13px,3.4vw,16px); line-height: 1.55; opacity: .92; }