:root {
  --ink: #173848;
  --muted: #58717d;
  --cream: #fff8e8;
  --cream-2: #f4e8ca;
  --orange: #f59d3e;
  --orange-dark: #bc5d2d;
  --green: #3d9655;
  --green-dark: #237345;
  --sky: #81c9df;
  --tile-w: 68px;
  --tile-h: 32px;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }

body {
  font-family: "Baloo 2", system-ui, sans-serif;
  color: var(--ink);
  background: #163b4b;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; touch-action:manipulation; -webkit-user-select:none; user-select:none; }
img { -webkit-user-drag:none; user-select:none; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.material-symbols-rounded { font-variation-settings: "FILL" 1, "wght" 500; }

.opening-screen { position:fixed; z-index:5000; inset:0; width:100%; height:100dvh; overflow:hidden; display:grid; place-items:center; padding:calc(18px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left)); background:#69c8f4 url("assets/opening-landscape.png") center/cover no-repeat; isolation:isolate; transition:opacity .55s ease,filter .55s ease; }
.opening-screen[hidden] { display:none; }
.opening-screen.is-entering { opacity:0; filter:brightness(1.35) blur(8px); pointer-events:none; }
.opening-screen.restart-animations .opening-logo,.opening-screen.restart-animations .opening-menu,.opening-screen.restart-animations .opening-leaf { animation:none!important; }
.opening-light { position:absolute; z-index:-1; inset:-20%; background:radial-gradient(circle at 50% 36%,#fff9 0 7%,#baf0ff44 20%,transparent 48%); animation:opening-light 5s ease-in-out infinite alternate; }
.opening-content { position:relative; z-index:3; width:min(680px,95vw); display:grid; justify-items:center; align-content:center; gap:4px; }
.opening-logo { --logo-intro-x:0px; --logo-intro-y:29dvh; --logo-intro-scale:1.35; width:min(557px,80vw); max-height:38dvh; object-fit:contain; filter:drop-shadow(0 18px 16px #276f9166); opacity:0; transform:translate(var(--logo-intro-x),var(--logo-intro-y)) scale(var(--logo-intro-scale)); animation:opening-logo-in 3.2s cubic-bezier(.18,.76,.22,1) .15s forwards,opening-logo-float 4s ease-in-out 3.55s infinite; }
.opening-menu { width:min(430px,92vw); display:grid; grid-template-columns:1fr; gap:2px; opacity:0; transform:translateY(34px); animation:opening-menu-in .85s cubic-bezier(.2,.8,.2,1) 3.28s forwards; }
.opening-menu button { position:relative; width:100%; aspect-ratio:2172/724; min-height:0; padding:0; display:block; overflow:visible; border:0; background:none; cursor:pointer; filter:drop-shadow(0 8px 9px #255d7160); transition:transform .16s ease,filter .16s ease; }
.opening-menu button + button { margin-top:-18px; }
.opening-menu button:hover,.opening-menu button:focus-visible { transform:scale(1.015); filter:brightness(1.08) drop-shadow(0 9px 10px #255d7168); }
.opening-menu button:active { transform:translateY(3px) scale(.985); filter:brightness(.94) drop-shadow(0 4px 5px #255d7158); }
.opening-menu-art { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.opening-menu-icon { position:absolute; z-index:1; left:19.8%; top:50.4%; width:15.8%; height:56%; object-fit:contain; transform:translate(-50%,-50%); transform-origin:center; filter:drop-shadow(0 3px 2px #30201270); pointer-events:none; }
.opening-menu button[data-main-menu="battle"] .opening-menu-icon { width:13%; height:47%; }
.opening-menu button[data-main-menu="market"] .opening-menu-icon { width:13.2%; height:47%; }
.opening-menu button[data-main-menu="settings"] .opening-menu-icon { width:12%; height:43%; }
.opening-menu b { position:absolute; z-index:2; inset:0 7% 0 34%; display:flex; align-items:center; justify-content:flex-start; text-align:left; font-family:"Fredoka","Baloo 2","Nunito",sans-serif; font-size:clamp(20px,5vw,29px); font-weight:700; line-height:1; color:#fff1d4; -webkit-text-stroke:2.5px #6b3a15; paint-order:stroke fill; text-shadow:0 3px 0 #4a2a1299,0 6px 10px #321b0a38; pointer-events:none; }
.opening-notice { min-height:24px; margin:7px 0 0; padding:3px 12px; border-radius:999px; background:#17384899; color:white; font-size:12px; font-weight:700; opacity:0; }.opening-notice:empty { visibility:hidden; min-height:0; margin:0; padding:0; }.opening-notice:not(:empty) { opacity:1; }.opening-notice.pulse { animation:opening-notice-pulse .45s ease; }
.opening-version { position:absolute; z-index:6; bottom:calc(8px + env(safe-area-inset-bottom)); color:#fff1d4; font-weight:800; text-shadow:0 2px 2px #173848cc; }
.opening-cloud { position:absolute; z-index:-1; width:360px; opacity:.6; pointer-events:none; filter:drop-shadow(0 15px 12px #3f91aa33); }.opening-cloud-one { left:-170px; top:12%; animation:opening-cloud-one 18s ease-in-out infinite alternate; }.opening-cloud-two { right:-190px; bottom:6%; animation:opening-cloud-two 23s ease-in-out -8s infinite alternate; }
.opening-leaf { position:absolute; z-index:2; width:18px; height:10px; border-radius:100% 0 100% 0; background:#74b51c; filter:drop-shadow(0 2px 1px #245b26aa); animation:opening-leaf 8s linear infinite; animation-fill-mode:backwards; }.leaf-one { left:12%; top:-4%; animation-delay:4.2s; }.leaf-two { left:63%; top:-8%; animation-delay:5.3s; scale:.7; }.leaf-three { left:86%; top:-6%; animation-delay:4.7s; scale:1.2; }
.opening-foreground { position:absolute; z-index:5; display:block; pointer-events:none; user-select:none; }
.opening-foreground-canopy { top:-2%; left:-2%; width:min(48vw,540px); height:auto; filter:drop-shadow(8px 14px 13px #17472d35); transform-origin:0 0; animation:opening-canopy 6s ease-in-out infinite alternate; }
.opening-foreground-bottom { left:50%; bottom:-10px; width:max(100vw,900px); height:auto; transform:translateX(-50%) scaleY(1.025); transform-origin:50% 100%; filter:drop-shadow(0 -10px 16px #17472d20); }
@keyframes opening-logo-in { 0% { opacity:0; transform:translate(var(--logo-intro-x),var(--logo-intro-y)) scale(.65); filter:drop-shadow(0 0 0 #fff0); } 20% { opacity:1; transform:translate(var(--logo-intro-x),var(--logo-intro-y)) scale(var(--logo-intro-scale)); filter:drop-shadow(0 18px 25px #dff8ffcc); } 58% { opacity:1; transform:translate(var(--logo-intro-x),var(--logo-intro-y)) scale(var(--logo-intro-scale)); filter:drop-shadow(0 20px 28px #dff8ffee); } 100% { opacity:1; transform:translate(0,0) scale(1); filter:drop-shadow(0 18px 16px #276f9166); } }
@keyframes opening-logo-float { 50% { translate:0 -8px; rotate:.4deg; } }
@keyframes opening-menu-in { to { opacity:1; transform:translateY(0); } }
@keyframes opening-light { to { scale:1.12; opacity:.72; } }
@keyframes opening-cloud-one { to { translate:180px 22px; } }
@keyframes opening-cloud-two { to { translate:-210px -18px; } }
@keyframes opening-leaf { 0% { opacity:0; translate:0 -30px; rotate:0; } 3% { opacity:1; } 45% { opacity:1; translate:55px 48dvh; rotate:260deg; } 100% { opacity:1; translate:-25px 110dvh; rotate:620deg; } }
@keyframes opening-canopy { to { transform:rotate(.7deg) translate(3px,-2px); } }
@keyframes opening-notice-pulse { 50% { scale:1.08; background:#b45f32dd; } }

@media (orientation:portrait) {
  .opening-screen { background-image:url("assets/opening-portrait.png"); }
  .opening-content { align-self:center; transform:translateY(-1dvh); }
  .opening-logo { width:min(82vw,527px); max-height:31.5dvh; }
  .opening-menu { width:min(410px,94vw); grid-template-columns:1fr; gap:1px; }
  .opening-foreground-canopy { width:min(63vw,430px); top:-1%; left:-5%; }
  .opening-foreground-bottom { width:max(145vw,760px); bottom:-10px; }
}

@media (orientation:portrait) and (max-height:760px) {
  .opening-content { transform:translateY(-1.5dvh); }
  .opening-logo { width:min(76.5vw,421px); max-height:26.5dvh; }
  .opening-menu { width:min(320px,78vw); gap:0; }
  .opening-menu b { font-size:clamp(18px,4.3vw,24px); -webkit-text-stroke:2px #6b3a15; }
}

@media (orientation:landscape) and (max-height:620px) {
  .opening-content { width:min(900px,96vw); grid-template-columns:minmax(260px,1fr) minmax(330px,430px); column-gap:18px; }
  .opening-logo { --logo-intro-x:27vw; --logo-intro-y:0px; --logo-intro-scale:1.28; width:85%; max-height:59.5dvh; }
  .opening-menu { width:100%; }
  .opening-menu b { font-size:clamp(18px,3.4vh,27px); }
  .opening-notice { grid-column:2; }
}

.app-shell {
  width: 100%;
  height: 100dvh;
  position: relative;
  overflow: hidden;
  background: var(--sky);
}

.island-transition { position:absolute; z-index:4000; inset:0; overflow:hidden; display:grid; place-items:center; background:#81c9df; pointer-events:auto; }
.island-transition[hidden] { display:none; }
.island-transition-cloud { position:absolute; top:50%; width:max(92vw,650px); height:auto; object-fit:contain; filter:drop-shadow(0 22px 18px #317d9630); transition:transform 1.05s cubic-bezier(.4,0,.15,1),opacity .8s ease .18s; }
.transition-cloud-left { right:42%; transform:translateY(-50%) scale(1.5); }
.transition-cloud-right { left:42%; transform:translateY(-50%) scale(1.5) scaleX(-1); }
.island-transition.is-revealing { pointer-events:none; }
.island-transition.is-revealing .transition-cloud-left { transform:translate(-78%,-50%) scale(1.35); opacity:0; }
.island-transition.is-revealing .transition-cloud-right { transform:translate(78%,-50%) scale(1.35) scaleX(-1); opacity:0; }

.hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 800;
  min-height: 64px;
  padding: calc(7px + env(safe-area-inset-top)) 12px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 248, 232, .94);
  border-bottom: 3px solid rgba(122, 79, 42, .25);
  box-shadow: 0 7px 0 rgba(33, 67, 69, .12);
}

.brand-block { display: grid; line-height: 1; }
.brand-block strong { font-size: 20px; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--orange-dark); }

.resources { display: flex; gap: 6px; }
.resources > span {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 8px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid #e7d9b7;
  box-shadow: 0 3px 0 #d5c49b;
}
.resources i { font-size: 19px; color: var(--green); }
.resources span:nth-child(3) i { color: #55aee0; }
.resources span:nth-child(4) i { color: #e5a82f; }
.resources b { font-size: 14px; }
.resources .gold-pill i { color:#e5a82f; }
.island-menu-trigger { width:38px; height:38px; display:grid; place-items:center; border:2px solid #e7d9b7; border-radius:12px; background:#fff; box-shadow:0 3px 0 #d5c49b; }.island-menu-trigger span { font-size:23px; }
.island-menu { position:fixed; z-index:1800; inset:0; width:100%; height:100dvh; padding:calc(30px + env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left)); display:grid; grid-template-rows:auto repeat(7,minmax(48px,60px)); align-content:center; gap:9px; overflow-y:auto; border:0; border-radius:0; background:#fff8e8; box-shadow:none; }.island-menu[hidden] { display:none; }.island-menu-heading { width:min(100%,440px); justify-self:center; padding:0 4px 12px; }.island-menu-heading h2 { margin:0; font-size:30px; }.island-menu>button { width:min(100%,440px); justify-self:center; min-height:48px; padding:8px 15px; display:grid; grid-template-columns:42px 1fr; align-items:center; border:2px solid #eadfc6; border-radius:15px; background:#fff; box-shadow:0 3px 0 #dfcfaa; text-align:left; }.island-menu>button span { color:#3e9254; }.island-menu>button b { font-size:17px; }.island-menu>button.island-menu-home { margin-top:4px; border-color:#e2c882; background:#fff8df; }.island-menu>button.island-menu-home span { color:#d89431; }.island-menu>button.island-menu-exit { background:#f0e5cb; }.island-menu>button.island-menu-exit span { color:#a76545; }

.game-stage, .world-viewport { position: absolute; inset: 0; }
.world-viewport { overflow: hidden; touch-action: none; cursor: grab; background: #81c9df; }
.world-viewport.dragging { cursor: grabbing; }
.world-viewport.interacting .world-camera * { animation-play-state: paused!important; }

.island-base, .island-front { position: absolute; width: 1180px; height: 900px; left: 0; top: 42px; pointer-events: none; object-fit: fill; }
.island-base { z-index: 2; filter: drop-shadow(0 28px 22px rgba(34,79,91,.28)); }
.island-front { z-index: 210; }
.sky-cloud-back { position: absolute; z-index: 1; pointer-events: none; object-fit: contain; opacity: .58; filter: drop-shadow(0 18px 12px rgba(55,112,137,.12)); }
.cloud-back-one { width: 520px; left: 40px; top: -35px; animation: back-cloud-right 42s ease-in-out -18s infinite alternate; }
.cloud-back-two { width: 610px; left: 610px; top: 285px; opacity: .48; animation: back-cloud-left 55s ease-in-out -37s infinite alternate; }
@keyframes back-cloud-right { from { translate: -210px 8px; } to { translate: 350px -18px; } }
@keyframes back-cloud-left { from { translate: 260px -8px; } to { translate: -360px 24px; } }
.island-water-shimmer {
  position: absolute;
  z-index: 226;
  width: 1180px;
  height: 900px;
  left: 0;
  top: 42px;
  object-fit: fill;
  pointer-events: none;
  clip-path: polygon(58% 38%, 81% 38%, 79% 100%, 57% 100%);
  opacity: .14;
  mix-blend-mode: screen;
  animation: water-flow 2.35s ease-in-out -.8s infinite alternate;
}
@keyframes water-flow {
  from { opacity: .08; filter: brightness(.96) saturate(.96); }
  to { opacity: .3; filter: brightness(1.22) saturate(1.12); }
}
.waterfall-particles {
  position: absolute;
  z-index: 227;
  width: 92px;
  height: 265px;
  left: 715px;
  top: 515px;
  overflow: hidden;
  pointer-events: none;
}
.waterfall-particles i {
  position: absolute;
  top: -18px;
  left: var(--particle-x);
  width: var(--particle-size);
  height: calc(var(--particle-size) * 1.8);
  opacity: 0;
  background: #8ef2f4;
  clip-path: polygon(50% 0, 100% 38%, 72% 100%, 18% 82%, 0 32%);
  filter: drop-shadow(0 2px 1px rgba(255,255,255,.45));
  animation: polygon-water-drop var(--particle-speed) linear var(--particle-delay) infinite;
}
.waterfall-particles i:nth-child(1)  { --particle-x: 12px; --particle-size: 7px;  --particle-speed: 2.1s; --particle-delay: -1.2s; }
.waterfall-particles i:nth-child(2)  { --particle-x: 34px; --particle-size: 5px;  --particle-speed: 1.65s; --particle-delay: -.35s; }
.waterfall-particles i:nth-child(3)  { --particle-x: 61px; --particle-size: 8px;  --particle-speed: 2.45s; --particle-delay: -1.8s; }
.waterfall-particles i:nth-child(4)  { --particle-x: 76px; --particle-size: 4px;  --particle-speed: 1.8s; --particle-delay: -.9s; }
.waterfall-particles i:nth-child(5)  { --particle-x: 24px; --particle-size: 6px;  --particle-speed: 2.7s; --particle-delay: -2.25s; }
.waterfall-particles i:nth-child(6)  { --particle-x: 49px; --particle-size: 9px;  --particle-speed: 2.25s; --particle-delay: -.7s; }
.waterfall-particles i:nth-child(7)  { --particle-x: 6px;  --particle-size: 4px;  --particle-speed: 1.9s; --particle-delay: -1.5s; }
.waterfall-particles i:nth-child(8)  { --particle-x: 68px; --particle-size: 6px;  --particle-speed: 2.6s; --particle-delay: -.2s; }
.waterfall-particles i:nth-child(9)  { --particle-x: 42px; --particle-size: 5px;  --particle-speed: 2s; --particle-delay: -1.05s; }
.waterfall-particles i:nth-child(10) { --particle-x: 83px; --particle-size: 7px;  --particle-speed: 2.85s; --particle-delay: -2.4s; }
@keyframes polygon-water-drop {
  0% { translate: 0 -20px; scale: .7; opacity: 0; }
  12% { opacity: .78; }
  72% { opacity: .66; }
  100% { translate: -5px 285px; scale: 1.08; opacity: 0; }
}
.floating-stones { position: absolute; z-index: 4; object-fit: contain; pointer-events: none; filter: drop-shadow(0 15px 9px rgba(36,75,82,.28)); }
.stones-left { width: 300px; height: 350px; left: 245px; top: 520px; animation: stones-float-left 6.7s cubic-bezier(.45,.05,.55,.95) -1.8s infinite alternate; }
.stones-right { width: 250px; height: 300px; left: 930px; top: 505px; animation: stones-float-right 4.9s cubic-bezier(.37,.08,.63,.92) -3.6s infinite alternate; }
@keyframes stones-float-left { from { translate: -2px 10px; rotate: -.25deg; } to { translate: 2px -7px; rotate: .35deg; } }
@keyframes stones-float-right { from { translate: 3px -5px; rotate: .3deg; } to { translate: -2px 9px; rotate: -.4deg; } }
.sky-cloud { position: absolute; z-index: 360; pointer-events: none; object-fit: contain; opacity: .9; filter: drop-shadow(0 10px 8px rgba(55,112,137,.16)); }
.cloud-one { width: 210px; left: -235px; top: 205px; animation: cloud-cross-right 64s linear -22s infinite; }
.cloud-two { width: 235px; left: 1180px; top: 315px; opacity: .72; animation: cloud-cross-left 78s linear -54s infinite; }
@keyframes cloud-cross-right { from { translate: 0 0; } 48% { translate: 720px -10px; } to { translate: 1530px 5px; } }
@keyframes cloud-cross-left { from { translate: 0 0; } 52% { translate: -760px 8px; } to { translate: -1535px -5px; } }

@media (prefers-reduced-motion: reduce) {
  .floating-stones, .sky-cloud, .sky-cloud-back, .island-water-shimmer, .waterfall-particles i { animation: none; }
}

.world-camera {
  position: absolute;
  isolation: isolate;
  width: 1180px;
  height: 760px;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
  contain: layout style;
}

.grid-world {
  position: absolute;
  z-index: 10;
  inset: 0;
  transform: translateY(-25px) scale(.82);
  transform-origin: 590px 363px;
}

.tile-layer, .decoration-layer, .object-layer, .dragon-layer { position: absolute; inset: 0; }
.tile-layer { z-index: 10; }
.decoration-layer { z-index: 55; pointer-events: none; }
.object-layer { z-index: 80; }
.dragon-layer { z-index: 120; }
.object-layer, .dragon-layer { pointer-events: none; }

.iso-tile {
  position: absolute;
  width: var(--tile-w);
  height: var(--tile-h);
  padding: 0;
  border: 0;
  background: transparent var(--tile-image, url("assets/tile-grass-v3-small.png")) center / 100% 100% no-repeat;
  transform: translate(-50%, -50%);
  cursor: pointer;
  filter: drop-shadow(0 3px 2px rgba(22, 67, 63, .12));
}
.iso-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  transform: rotate(30deg) skewX(-30deg) scaleY(.86);
  pointer-events: none;
}
.iso-tile.grass { --tile-image: url("assets/tile-grass-v3-small.png"); }
.iso-tile.grass-alt { --tile-image: url("assets/tile-grass-v3-small.png"); filter: hue-rotate(7deg) brightness(.96); }
.iso-tile.grass-soft { --tile-image: url("assets/tile-grass-v3-small.png"); filter: saturate(.84) brightness(1.04); }
.iso-tile.path-v { --tile-image: url("assets/path-wide-v-small.png"); }
.iso-tile.path-h { --tile-image: url("assets/path-wide-h-small.png"); }
.iso-tile.path-corner { --tile-image: url("assets/path-wide-corner-small.png"); }
.iso-tile.path-t { --tile-image: url("assets/path-wide-t-small.png"); }
.iso-tile.path-cross { --tile-image: url("assets/path-wide-cross-small.png"); }
.iso-tile.flip-x { transform: translate(-50%, -50%) scaleX(-1); }
.iso-tile.flip-y { transform: translate(-50%, -50%) scaleY(-1); }
.iso-tile.flip-xy { transform: translate(-50%, -50%) scale(-1); }
.iso-tile.water { --tile-image: url("assets/tile-water-v2-small.png"); animation: water-glint 2.8s ease-in-out infinite alternate; }
@keyframes water-glint { from { filter: saturate(.9) brightness(.96); } to { filter: saturate(1.08) brightness(1.08); } }
.show-grid .iso-tile::after, .iso-tile.selected::after { border-color: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1px rgba(28,108,74,.32); }
.iso-tile.selected { filter: drop-shadow(0 0 6px #fff7ae) brightness(1.08); }
.iso-tile.blocked { filter: grayscale(.15) brightness(.9); }

.world-object {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  cursor: pointer;
  transform: translate(-50%, -77%);
  filter: drop-shadow(0 11px 5px rgba(30, 57, 49, .24));
}
.world-object img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.world-object:hover, .world-object.selected { filter: drop-shadow(0 0 8px #fff6b5) drop-shadow(0 11px 5px rgba(30, 57, 49, .24)); }
.world-object.forest { width: 82px; height: 76px; }
.world-object.farm { width: 118px; height: 91px; }
.world-object.sanctuary { width: 138px; height: 125px; }
.world-object.cave { width: 124px; height: 108px; transform: translate(-50%, -74%); }
.world-object.waterfall { width: 165px; height: 205px; transform: translate(-50%, -32%); pointer-events: none; filter: drop-shadow(0 10px 8px rgba(30,79,91,.24)); }
.world-object.rock { width: 82px; height: 84px; }
.flower-prop { position: absolute; width: 28px; height: 28px; object-fit: contain; transform: translate(-50%,-75%); filter: drop-shadow(0 3px 2px rgba(54,77,42,.22)); animation: flower-sway 3.2s ease-in-out infinite alternate; }
@keyframes flower-sway { from { rotate: -2deg; } to { rotate: 3deg; } }

.building-particles { position: absolute; inset: -10px; pointer-events: none; overflow: visible; }
.building-particles i { position: absolute; font-size: 15px; color: #fff4a9; filter: drop-shadow(0 2px 2px rgba(50,67,50,.3)); animation: particle-rise 2.7s ease-in-out infinite; }
.building-particles i:nth-child(1) { left: 18%; bottom: 22%; }
.building-particles i:nth-child(2) { right: 17%; bottom: 30%; animation-delay: -.9s; }
.building-particles i:nth-child(3) { left: 49%; bottom: 48%; animation-delay: -1.7s; }
.world-object.farm .building-particles i { color: #fff8b7; }
.world-object.cave .building-particles i { color: #ffb168; }
.world-object.rock .building-particles i { color: #70ddff; }
@keyframes particle-rise { 0% { translate: 0 8px; opacity: 0; scale: .65; } 35% { opacity: .95; } 100% { translate: 0 -18px; opacity: 0; scale: 1.05; } }

.object-badge {
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(255,248,232,.94);
  border: 2px solid rgba(72,72,45,.28);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 800;
}

.dragon-entity {
  position: absolute;
  width: 78px;
  height: 78px;
  pointer-events: none;
  transform: translate(-50%, -68%);
  filter: drop-shadow(0 7px 4px rgba(59,47,41,.28));
}
.dragon-entity img { width: 100%; height: 100%; object-fit: contain; }
.dragon-entity.training { animation: train-bob 1.15s ease-in-out infinite; }
.dragon-status {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 27px;
  height: 27px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff8e8;
  border: 2px solid #e4bb62;
  font-size: 12px;
  font-weight: 800;
}

/* Incursión: recupera el efecto de profundidad en túnel y el combate de Brasa. */
.expedition-dialog { width: min(100%, 520px); height: 100dvh; max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: #0d1815; color: #f8f5de; }
.expedition-dialog::backdrop { background: rgba(4,12,13,.82); backdrop-filter: blur(7px); }
.expedition-shell { min-height: 100%; display: flex; flex-direction: column; background: #0d1815; }
.expedition-topbar { height: 72px; padding: 10px 16px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; background: #13231f; border-bottom: 2px solid rgba(157,229,189,.16); }
.expedition-topbar div { display: grid; line-height: 1.05; }.expedition-topbar strong { font-size: 16px; }.expedition-back { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #ffffff25; border-radius: 13px; background: #ffffff0c; color: white; }
.expedition-crystals { display: flex; align-items: center; gap: 4px; padding: 7px 10px; border-radius: 12px; background: #20362f; color: #8cead1; }
.expedition-view { display: none; flex: 1; flex-direction: column; }.expedition-view.active { display: flex; }
.tunnel-scene { position: relative; min-height: 410px; overflow: hidden; perspective: 580px; background: radial-gradient(circle at 50% 42%, #718b54 0 6%, #304535 18%, #15271d 43%, #060b08 78%); }
.tunnel-scene::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, transparent 20%, rgba(0,0,0,.78) 92%); pointer-events: none; }
.tunnel-core { position: absolute; z-index: 1; left: 50%; top: 41%; translate: -50% -50%; width: 62px; height: 86px; display: grid; place-items: center; border-radius: 50%; background: #06100b; box-shadow: 0 0 35px rgba(140,234,209,.35); color: #8cead1; }
.tunnel-ring { position: absolute; left: 50%; top: 43%; translate: -50% -50%; border: 18px solid #1b3023; border-bottom-width: 35px; border-radius: 48% 48% 38% 38%; box-shadow: inset 0 0 18px #000, 0 0 18px #0008; transition: .55s ease; }
.ring-far { z-index: 2; width: 155px; height: 185px; }.ring-mid { z-index: 3; width: 285px; height: 310px; border-width: 30px; }.ring-near { z-index: 4; width: 470px; height: 465px; border-width: 55px; }
.tunnel-ground { position: absolute; z-index: 5; left: 4%; right: 4%; bottom: -72px; height: 230px; background: linear-gradient(#31422f,#09100b); clip-path: polygon(42% 0,58% 0,100% 100%,0 100%); }
.crystal-node { position: absolute; z-index: 8; left: 58%; top: 48%; display: grid; justify-items: center; border: 0; background: none; color: #8cead1; filter: drop-shadow(0 0 8px #8cead1); animation: pulse-crystal 1.3s ease-in-out infinite; }.crystal-node span { font-size: 34px; }.crystal-node small { padding: 2px 7px; border-radius: 8px; background: #07120fcc; color: white; }
.tunnel-dragon { position: absolute; z-index: 7; width: 92px; height: 92px; left: 28px; bottom: 22px; object-fit: contain; filter: drop-shadow(0 9px 6px #0008); }
.tunnel-scene.moving .ring-near { scale: 1.7; opacity: 0; }.tunnel-scene.moving .ring-mid { scale: 2; opacity: 0; }.tunnel-scene.moving .ring-far { scale: 2.4; opacity: 0; }
@keyframes pulse-crystal { 50% { scale: 1.15; } }
.expedition-copy { padding: 16px 18px 8px; }.expedition-copy h2 { margin: 3px 0; font-size: 19px; }.expedition-copy p { margin: 0; color: #a9beb4; font-size: 13px; }
.expedition-primary, .expedition-secondary { margin: 12px 16px 18px; min-height: 48px; border: 0; border-radius: 15px; font-weight: 800; }.expedition-primary { display: flex; align-items: center; justify-content: center; gap: 7px; background: #cbe75d; color: #173024; }.expedition-primary:disabled { opacity: .35; }.expedition-secondary { background: #ffffff0b; color: white; border: 1px solid #ffffff1c; }
.battle-arena-grid { position: relative; min-height: 420px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #63523a, #1a2a20 48%, #080d0a 84%); }
.enemy-panel { position: absolute; top: 50px; left: 50%; translate: -50%; text-align: center; }.battle-name { width: 220px; display: flex; justify-content: space-between; font-size: 12px; }.battle-health { width: 220px; height: 8px; margin-top: 5px; overflow: hidden; border-radius: 9px; background: #1f0c0b; }.battle-health i { display: block; width: 100%; height: 100%; background: #e26755; transition: width .3s; }.enemy-creature { margin-top: 28px; font-size: 118px; color: #9f7453; filter: drop-shadow(0 18px 8px #0009); }
.battle-dragon { position: absolute; left: 20px; bottom: 8px; width: 135px; height: 135px; object-fit: contain; filter: drop-shadow(0 12px 7px #0009); }.damage-number { position: absolute; z-index: 4; left: 50%; top: 45%; color: white; font-size: 30px; font-weight: 800; opacity: 0; }.damage-number.show { animation: damage-rise .7s ease; } @keyframes damage-rise { 30% { opacity: 1; } 100% { translate: 0 -65px; opacity: 0; } }
.battle-controls { padding: 14px; background: #101a16; }.battle-status { display: flex; justify-content: space-between; font-size: 12px; color: #c5d3cc; }.battle-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin: 13px 0; }.battle-cards button { min-height: 112px; position: relative; display: grid; place-items: center; align-content: center; gap: 2px; border: 1px solid #ffffff20; border-radius: 13px; background: #263d31; color: white; }.battle-cards button>span { position: absolute; left: -4px; top: -7px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #8cead1; color: #153027; font-weight: 800; }.battle-cards i { font-size: 35px; color: #f2b56d; }.battle-cards small { color: #a7bdb2; }.battle-cards button:disabled { opacity: .35; filter: grayscale(.8); }
.result-view { align-items: center; justify-content: center; padding: 30px 20px; text-align: center; }.result-view>img { width: 190px; height: 190px; object-fit: contain; }.result-view h2 { font-size: 26px; margin: 8px 0; }.result-view p { color: #a9beb4; max-width: 330px; }.expedition-loot { width: 100%; display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin: 22px 0; }.expedition-loot span { padding: 15px; display: grid; justify-items: center; border: 1px solid #ffffff1c; border-radius: 14px; background: #ffffff08; }.expedition-loot i { color: #8cead1; }.expedition-loot b { font-size: 19px; }.expedition-loot small { color: #a9beb4; }

/* Mini mazmorra caminable: una cuadrícula real separada del territorio. */
.dungeon-view { min-height: 0; overflow: hidden; background: radial-gradient(circle at 48% 34%, #263c35, #0a1514 72%); }
.dungeon-layout { position:relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dungeon-board-wrap { flex: 1; min-height: 250px; display: grid; place-items: center; padding: 12px; overflow: hidden; }
.dungeon-board { position: relative; width: min(100%, 570px); aspect-ratio: 8 / 6; overflow: hidden; border: 7px solid #41514c; border-radius: 22px; background: #0a1110; box-shadow: 0 16px 36px #0008, inset 0 0 28px #0008; }
.dungeon-world { position:absolute; left:0; top:0; width:225%; height:200%; transform:translate(calc(var(--cam-x,0) * -5.5556%),calc(var(--cam-y,0) * -8.3333%)); transition:transform .22s ease; }
.dungeon-tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(18,1fr); grid-template-rows: repeat(12,1fr); }
.dungeon-tile { position: relative; min-width: 0; min-height: 0; }
.dungeon-tile.floor { background: linear-gradient(145deg,#394c3e,#263a31); box-shadow: inset 0 0 0 1px #9ec17e12; }
.dungeon-tile.floor:nth-child(5n) { background: linear-gradient(145deg,#405140,#2b3b32); }
.dungeon-tile.wall { z-index: 1; background: linear-gradient(145deg,#776552 4%,#493f38 62%,#2a2928); box-shadow: inset -3px -4px 0 #26232188, inset 2px 2px 0 #99806566; }
.dungeon-tile.wall::after { content:""; position:absolute; inset:17% 10%; border-radius:42% 28% 46% 25%; background:#8b755d33; }
.dungeon-tile.unseen { background:#07100e!important; box-shadow:inset 0 0 10px #000!important; }.dungeon-tile.unseen::after { opacity:0; }.dungeon-tile.revealed { animation:discover-tile .28s ease both; }
@keyframes discover-tile { from { filter:brightness(.15); } to { filter:brightness(1); } }
.dungeon-entities { position: absolute; inset: 0; pointer-events: none; }
.dungeon-entity,.dungeon-player,.dungeon-follower { position:absolute; z-index:5; left:calc(var(--dx) * 100% / 18); top:calc(var(--dy) * 100% / 12); width:calc(100% / 18); height:calc(100% / 12); display:grid; place-items:center; transition:left .16s ease,top .16s ease; }
.dungeon-entity .material-symbols-rounded { font-size:clamp(18px,4vw,32px); filter:drop-shadow(0 3px 2px #0008); }
.dungeon-entity small { position:absolute; bottom:78%; padding:1px 5px; border-radius:8px; color:white; background:#0b1412d9; font-size:7px; white-space:nowrap; }
.dungeon-crystal { color:#7ff5e6; animation:dungeon-glow 1.5s ease-in-out infinite; }.dungeon-chest { color:#f2ba52; }.dungeon-enemy { color:#cf785d; animation:dungeon-bob 1.4s ease-in-out infinite; }.dungeon-boss { color:#f06b54; animation:dungeon-glow 1.1s ease-in-out infinite; }.dungeon-gate { z-index:4; color:#e6c98e; background:#493d33cc; }.dungeon-stairs { color:#b5e0d4; background:#233b35; }
.dungeon-player,.dungeon-follower { z-index:8; object-fit:contain; pointer-events:none; filter:drop-shadow(0 3px 2px #0008); transform:scale(1.65) translateY(-9%); transform-origin:center bottom; }
.dungeon-follower { z-index:7; transform:scale(1.45) translateY(-6%); }
.dungeon-vignette { position:absolute; z-index:20; inset:0; pointer-events:none; box-shadow:inset 0 0 60px 22px #020807c4; border-radius:14px; }
@keyframes dungeon-glow { 50% { transform:translateY(-5px); filter:drop-shadow(0 0 8px currentColor); } }
@keyframes dungeon-bob { 50% { transform:translateY(-3px) rotate(-5deg); } }
.dungeon-sidebar { position:relative; flex:0 0 auto; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); text-align:center; background:#13231f; border-top:1px solid #ffffff16; }
.dungeon-objective { display:inline-flex; align-items:center; gap:5px; margin-bottom:7px; padding:5px 10px; border-radius:12px; background:#20362f; color:#8cead1; }.dungeon-objective small { color:#b7c9be; }
.gameboy-controls { display:flex; align-items:center; justify-content:center; gap:clamp(34px,12vw,76px); }
.dungeon-dpad { width:132px; height:104px; display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); gap:2px; touch-action:none; -webkit-user-select:none; user-select:none; }.dungeon-dpad button { border:0; border-radius:7px; background:#293833; color:white; box-shadow:0 4px 0 #08110f; -webkit-touch-callout:none; }.dungeon-dpad button:active,.dungeon-dpad button.is-held { translate:0 3px; box-shadow:0 1px 0 #08110f; background:#354b43; }.dungeon-dpad [data-move="up"] { grid-column:2; }.dungeon-dpad [data-move="left"] { grid-row:2;grid-column:1; }.dungeon-dpad .dpad-center { grid-row:2;grid-column:2;color:#8cead1;border-radius:3px; }.dungeon-dpad [data-move="right"] { grid-row:2;grid-column:3; }.dungeon-dpad [data-move="down"] { grid-row:3;grid-column:2; }
.dungeon-actions { display:flex; gap:12px; align-items:center; transform:rotate(-12deg); }.dungeon-actions button { width:58px; height:58px; border:0; border-radius:50%; display:grid; place-items:center; align-content:center; background:#b7555f; color:white; box-shadow:0 5px 0 #6d2934,0 7px 14px #0006; }.dungeon-actions button:first-child { margin-top:26px; }.dungeon-actions button:active { translate:0 3px; box-shadow:0 2px 0 #6d2934; }.dungeon-actions b { font-size:22px; line-height:18px; }.dungeon-actions small { font-size:8px;text-transform:uppercase; }.keyboard-tip { display:none; color:#7f998d; }
.dungeon-options-button { margin:8px auto 0; padding:5px 12px; display:flex; align-items:center; gap:5px; border:1px solid #ffffff1a; border-radius:999px; background:#ffffff0b; color:#b7c9be; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; }.dungeon-options-button span { font-size:15px; }
.dungeon-options-panel { position:absolute; z-index:40; inset:12px; padding:18px; display:grid; align-content:center; gap:9px; border:2px solid #61736b; border-radius:20px; background:#13231ff2; box-shadow:0 20px 60px #000b; backdrop-filter:blur(7px); }.dungeon-options-panel[hidden] { display:none; }.dungeon-options-panel h3 { margin:2px 0 10px; font-size:24px; }.dungeon-options-panel>button:not(.dungeon-options-close) { min-height:58px; padding:8px 12px; display:grid; grid-template-columns:38px 1fr; grid-template-rows:1fr 1fr; align-items:center; text-align:left; border:1px solid #ffffff17; border-radius:13px; background:#263b34; color:white; }.dungeon-options-panel>button span { grid-row:1/3; color:#8cead1; }.dungeon-options-panel>button small { color:#8ba097; }.dungeon-options-close { min-height:40px; border:0; border-radius:12px; background:#cbe75d; color:#173024; font-weight:800; }
@keyframes train-bob { 0%,100% { transform: translate(-50%,-68%) rotate(-2deg); } 50% { transform: translate(-50%,-76%) rotate(2deg); } }

.map-label, .hint {
  position: absolute;
  z-index: 500;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: white;
  text-shadow: 0 2px 2px rgba(21,62,74,.5);
  font-weight: 800;
}
.map-label { top: calc(87px + env(safe-area-inset-top)); font-size: 13px; }
.live-dot { width: 9px; height: 9px; background: #8ff083; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 4px rgba(73,190,97,.25); }
.hint { bottom: calc(88px + env(safe-area-inset-bottom)); right: 14px; justify-content: center; font-size: 12px; padding: 7px 10px; border-radius: 999px; background: rgba(26,74,84,.62); }
.hint .material-symbols-rounded { font-size: 17px; }

.camera-tools {
  position: absolute;
  z-index: 600;
  right: 12px;
  top: calc(88px + env(safe-area-inset-top));
  display: grid;
  gap: 7px;
}
.pwa-install { position: absolute; z-index: 650; right: 12px; top: calc(220px + env(safe-area-inset-top)); min-height: 38px; padding: 5px 10px; display: flex; align-items: center; gap: 4px; border: 2px solid #eadbb8; border-radius: 13px; background: var(--cream); box-shadow: 0 4px 0 rgba(64,68,52,.25); }.pwa-install[hidden] { display: none; }.pwa-install span { font-size: 20px; }.pwa-install b { font-size: 11px; }
.camera-tools button, .round-close, .sheet-close {
  width: 39px;
  height: 39px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid #eadbb8;
  border-radius: 13px;
  background: var(--cream);
  box-shadow: 0 4px 0 rgba(64,68,52,.25);
  cursor: pointer;
}

.tool-dock {
  position: absolute;
  z-index: 700;
  left: 10px;
  right: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  height: 70px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  padding: 6px;
  border: 3px solid rgba(255,255,255,.58);
  border-radius: 22px;
  background: rgba(32,73,80,.84);
  box-shadow: 0 9px 0 rgba(18,51,59,.28);
  backdrop-filter: blur(8px);
}
.tool-button { border: 0; border-radius: 15px; color: #e8f2ec; background: transparent; display: grid; place-items: center; align-content: center; gap: 0; cursor: pointer; }
.tool-button .material-symbols-rounded { font-size: 25px; }
.tool-button small { font-size: 10px; font-weight: 800; }
.tool-button.active { color: var(--ink); background: var(--cream); box-shadow: 0 3px 0 #d8c492; }

.context-sheet {
  position: absolute;
  z-index: 1000;
  left: 10px;
  right: 10px;
  bottom: calc(89px + env(safe-area-inset-bottom));
  min-height: 154px;
  padding: 17px 48px 17px 16px;
  display: flex;
  gap: 13px;
  background: var(--cream);
  border: 3px solid #fff;
  border-radius: 24px;
  box-shadow: 0 9px 0 rgba(30,68,72,.24), 0 16px 34px rgba(31,69,77,.22);
}
.context-sheet[hidden] { display: none; }
.sheet-close { position: absolute; right: 9px; top: 9px; width: 32px; height: 32px; box-shadow: none; }
.sheet-icon { flex: 0 0 47px; width: 47px; height: 47px; display: grid; place-items: center; border-radius: 15px; background: #d8edbc; color: var(--green-dark); }
.sheet-copy { min-width: 0; flex: 1; }
.sheet-copy h2 { margin: 0; font-size: 22px; line-height: 1.05; }
.sheet-copy p { margin: 3px 0 10px; color: var(--muted); font-size: 13px; line-height: 1.15; }
.sheet-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.action-button { border: 0; border-radius: 12px; min-height: 34px; padding: 6px 12px; font-size: 13px; font-weight: 800; cursor: pointer; background: var(--green); color: white; box-shadow: 0 3px 0 var(--green-dark); }
.action-button.secondary { background: #ecd39a; color: #62451d; box-shadow: 0 3px 0 #c8a666; }

.game-dialog { max-width: none; max-height: none; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: rgba(22,59,71,.56); }
.game-dialog::backdrop { background: rgba(22,59,71,.56); }
.game-dialog[open] { display: grid; align-items: end; }
.dialog-card { width: 100%; max-height: 86dvh; overflow: auto; padding: 18px 16px calc(22px + env(safe-area-inset-bottom)); background: var(--cream); border-radius: 27px 27px 0 0; border-top: 4px solid white; }
.dialog-header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.dialog-header h2 { margin: 0; font-size: 27px; line-height: 1; }
.dialog-header p { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.seed-picker { display: flex; gap: 8px; margin: 15px 0 8px; }
.seed-option { flex: 1; border: 2px solid #decba2; border-radius: 13px; padding: 8px; background: white; font-weight: 700; cursor: pointer; }
.seed-option.active { border-color: var(--green); background: #e2f4cf; }

.farm-board { position: relative; width: 320px; height: 225px; margin: 8px auto 5px; }
.farm-plot {
  position: absolute;
  width: 92px;
  height: 67px;
  border: 0;
  padding: 0;
  background: transparent url("assets/grass-tile.png") center / contain no-repeat;
  transform: translate(-50%,-30%);
  cursor: pointer;
  filter: sepia(.18) drop-shadow(0 4px 2px rgba(62,49,31,.18));
}
.crop-icon { position: absolute; left: 50%; top: 43%; transform: translate(-50%,-50%); font-size: 29px; filter: drop-shadow(0 3px 1px rgba(32,51,25,.25)); }
.plot-time { position: absolute; left: 50%; top: 72%; transform: translateX(-50%); padding: 0 5px; border-radius: 8px; background: rgba(255,248,232,.9); font-size: 9px; font-weight: 800; white-space: nowrap; }
.farm-tip { display: flex; align-items: center; gap: 7px; max-width: 390px; margin: 0 auto; padding: 9px 11px; border-radius: 13px; background: #e9dfc4; color: #56634e; font-size: 13px; }
.farm-tip .material-symbols-rounded { color: var(--green); }

.build-list { display: grid; gap: 10px; margin-top: 16px; }
.build-card { width: 100%; min-height: 94px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 2px solid #decba2; border-radius: 17px; background: white; text-align: left; cursor: pointer; }
.build-card img { width: 88px; height: 76px; object-fit: contain; }
.build-card span { display: grid; }
.build-card strong { font-size: 18px; }
.build-card small { color: var(--muted); }

.toast {
  position: absolute;
  z-index: 1500;
  left: 50%;
  top: calc(88px + env(safe-area-inset-top));
  transform: translate(-50%,-18px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  padding: 8px 13px;
  border-radius: 999px;
  background: #173848;
  color: white;
  font-size: 13px;
  font-weight: 800;
  transition: .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%,0); }

.economy-dialog { width:100%; height:100dvh; }
.economy-dialog[open] { align-items:stretch; }
.economy-card { position:relative; width:100%; max-width:none; min-height:100dvh; max-height:none; padding:calc(20px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); border:0; border-radius:0; }
.economy-header { padding-right:72px; }.economy-header h2 { margin: 2px 0; }
.economy-header .round-close { position:absolute; z-index:3; top:calc(18px + env(safe-area-inset-top)); right:max(18px,env(safe-area-inset-right)); }
.economy-balance { margin: 12px 0; display: flex; align-items: center; gap: 6px; padding: 11px 13px; border: 2px solid #ead7aa; border-radius: 15px; background: #fff8df; color: #7b5720; }.economy-balance .material-symbols-rounded { color: #e5a82f; }.economy-balance b { font-size: 20px; }.economy-balance small { margin-left: auto; font-weight: 700; }
.economy-tabs { display: grid; grid-template-columns: repeat(2,1fr); gap: 5px; margin-bottom: 12px; padding: 4px; border-radius: 14px; background: #e9dfc5; }.economy-tabs button { min-height: 38px; border: 0; border-radius: 11px; background: transparent; font-weight: 800; font-size: 12px; }.economy-tabs button.active { background: white; box-shadow: 0 3px 0 #d1c29b; }
.economy-panel { display: none; }.economy-panel.active { display: block; }.economy-list { display: grid; gap: 8px; max-height: 430px; overflow-y: auto; padding: 2px; }
.economy-item { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px; min-height: 70px; padding: 9px; border: 2px solid #e8ddc1; border-radius: 15px; background: #fffdf5; }.economy-item>i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #e7f2cf; color: #47854b; font-size: 25px; }.economy-item strong,.economy-item small { display: block; }.economy-item small { color: var(--muted); }.economy-item button { min-width: 78px; min-height: 38px; padding: 5px 9px; border: 0; border-radius: 11px; background: #3e9254; color: white; font-weight: 800; }.economy-item button.buy { background: #d89431; }.economy-item button:disabled { opacity: .38; }
.market-preview { padding: 36px 16px; text-align: center; }.market-preview>span { font-size: 58px; color: #d89431; }.market-preview h3 { margin: 5px 0; }.market-preview p { color: var(--muted); }.market-preview div { display: flex; justify-content: space-between; margin-top: 8px; padding: 11px; border-radius: 11px; background: #f1ead8; }
.install-dialog { width: min(calc(100% - 30px), 390px); padding: 28px 24px; border: 0; border-radius: 24px; background: #fff8e8; color: var(--ink); box-shadow: 0 25px 80px #17384888; }.install-dialog::backdrop { background: #173848aa; backdrop-filter: blur(5px); }.install-dialog>button { position: absolute; right: 13px; top: 13px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 12px; background: #eee2c6; }.install-dialog img { width: 92px; height: 92px; display: block; margin: 0 auto 12px; object-fit: contain; }.install-dialog h2 { margin: 4px 0 12px; text-align: center; }.install-dialog>.eyebrow { display: block; text-align: center; }.install-dialog ol { padding-left: 24px; }.install-dialog li { margin: 9px 0; }.install-dialog p { padding: 10px; border-radius: 12px; background: #e6f0d5; color: var(--muted); font-size: 12px; }

@media (max-width: 460px) {
  .resources { gap: 3px; }.resources > span { padding: 0 5px; }.resources i { font-size: 16px; }
  .tool-button small { font-size: 9px; }
}

@media (min-width: 720px) {
  body { display: grid; place-items: center; background: #173848; }
  .app-shell { width: min(100vw, 980px); height: min(100dvh, 820px); border-radius: 25px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
  .hud { border-radius: 25px 25px 0 0; }
  .tool-dock { width: 430px; left: 50%; right: auto; transform: translateX(-50%); }
  .context-sheet { width: 440px; left: 50%; right: auto; transform: translateX(-50%); }
  .dialog-card { max-width: 540px; justify-self: center; border-radius: 27px 27px 0 0; }
}

/* La experiencia principal se organiza en horizontal para móvil, tablet y PWA. */
@media (orientation: landscape) {
  .app-shell { width: 100vw; height: 100dvh; max-width: none; border-radius: 0; }
  .hud { min-height: 62px; padding: calc(6px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 6px calc(14px + env(safe-area-inset-left)); border-radius: 0; }
  .brand-block strong { font-size: 19px; }.brand-block .eyebrow { font-size: 10px; }
  .resources > span { height: 31px; }.resources b { font-size: 13px; }
  .map-label { top: calc(72px + env(safe-area-inset-top)); left: calc(14px + env(safe-area-inset-left)); }
  .camera-tools { right: calc(14px + env(safe-area-inset-right)); top: calc(76px + env(safe-area-inset-top)); }
  .pwa-install { right: calc(14px + env(safe-area-inset-right)); top: calc(213px + env(safe-area-inset-top)); }
  .tool-dock { left: auto; right: calc(10px + env(safe-area-inset-right)); top: calc(74px + env(safe-area-inset-top)); bottom: calc(12px + env(safe-area-inset-bottom)); width: 72px; height: auto; transform: none; grid-template-columns: 1fr; grid-template-rows: repeat(5,1fr); border-radius: 21px; }
  .tool-button { min-height: 54px; }.tool-button .material-symbols-rounded { font-size: 23px; }.tool-button small { font-size: 9px; }
  .hint { left: calc(170px + env(safe-area-inset-left)); right: calc(100px + env(safe-area-inset-right)); bottom: calc(13px + env(safe-area-inset-bottom)); }
  .context-sheet { width: min(370px,42vw); top: 62px; right: calc(12px + env(safe-area-inset-right)); bottom: 0; left: auto; transform: none; border-radius: 24px 0 0 0; align-content: center; }
  .game-dialog { align-items: center; }.dialog-card { width: min(760px,86vw); max-width: none; max-height: 88dvh; border-radius: 26px; margin: auto; overflow-y: auto; }
  .farm-dialog .dialog-card { display: grid; grid-template-columns: minmax(300px,1fr) minmax(320px,1fr); column-gap: 22px; }.farm-dialog .dialog-header { grid-column: 1 / -1; }.farm-dialog .farm-board { align-self: center; }
  .economy-dialog { width:100%; height:100dvh; }.economy-dialog .economy-card { width:100%; max-width:none; min-height:100dvh; max-height:none; margin:0; border-radius:0; }
  .expedition-dialog { width: 100vw; height: 100dvh; }.expedition-shell { height: 100dvh; }
  #tunnel-view.active { display: grid; grid-template-columns: minmax(0,1fr) 330px; grid-template-rows: 1fr auto; }.tunnel-scene { grid-row: 1 / 3; min-height: 0; height: calc(100dvh - 62px); }.expedition-copy { align-self: end; padding: 24px 22px 8px; }.expedition-primary { align-self: start; }
  #dungeon-view.active { display:flex; }.dungeon-layout { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 330px; }.dungeon-board-wrap { padding:10px; }.dungeon-board { width:min(100%,calc((100dvh - 94px) * 1.333)); }.dungeon-sidebar { display:flex; flex-direction:column; justify-content:center; padding:18px 24px; border-top:0; border-left:1px solid #ffffff16; }.gameboy-controls { gap:28px; }.dungeon-dpad { width:138px; height:108px; }.keyboard-tip { display:block; margin-top:12px; }.dungeon-options-panel { left:auto; width:300px; }
  #battle-view.active { display: grid; grid-template-columns: minmax(0,1fr) 390px; }.battle-arena-grid { min-height: 0; height: calc(100dvh - 72px); }.battle-controls { display: flex; flex-direction: column; justify-content: center; }.battle-cards { grid-template-columns: 1fr; }.battle-cards button { min-height: 82px; grid-template-columns: 40px 1fr; justify-items: start; padding-left: 52px; }.battle-cards button>span { left: 10px; top: 50%; translate: 0 -50%; }.battle-cards i { position: absolute; left: 46px; }.battle-cards b,.battle-cards small { margin-left: 36px; }
  .result-view { min-height: calc(100dvh - 72px); }.result-view>img { width: 150px; height: 150px; }.expedition-loot { max-width: 430px; }
}