:root {
  --ink: #2f2419;
  --ink-soft: #5b4a39;
  --paper: #f6efe1;
  --paper-2: #ebe0c9;
  --line: rgba(60, 40, 20, .28);
  --wood: #6b4a2f;
  --wood-dark: #47301d;
  --wood-light: #8a6544;
  --green: #5f8f3a;
  --green-dark: #47702a;
  --amber: #c08a2e;
  --amber-dark: #9a6c1f;
  --red: #b5432f;
  --shadow: 0 6px 18px rgba(30, 20, 10, .25);
  --font: 'Nunito Sans', 'Segoe UI', sans-serif;
  --font-title: 'Bitter', Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: #2e3b2c;
}

button { font-family: inherit; color: inherit; }
[hidden] { display: none !important; }
svg { display: block; }

/* ------------------------------------------------------------ piezas comunes */

.panel {
  background: linear-gradient(#faf5ea, var(--paper));
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .7);
}

.wood {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 23px),
    linear-gradient(var(--wood-light), var(--wood) 45%, var(--wood-dark));
  border: 1px solid #2c1d10;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.btn {
  border: 1px solid rgba(0, 0, 0, .3);
  border-radius: 7px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
  cursor: pointer;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 4px rgba(0, 0, 0, .2);
  transition: transform .1s, filter .1s;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn.sm { padding: 5px 10px; font-size: 12.5px; border-radius: 6px; }
.btn-big { width: 100%; padding: 12px; font-size: 16px; }
.btn-green { background: linear-gradient(#6f9f45, var(--green-dark)); }
.btn-orange { background: linear-gradient(#cf9a3c, var(--amber-dark)); }
.btn-gray { background: linear-gradient(#9b8b77, #75664f); }
.btn svg { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; }

.avatar { display: inline-block; width: 48px; height: 48px; flex: none; border-radius: 50%; }
.avatar svg { width: 100%; height: 100%; }
.avatar.sm { width: 34px; height: 34px; }

.center { text-align: center; }
.empty { text-align: center; color: var(--ink-soft); margin: 18px 0; }
.small { font-size: 13px; color: var(--ink-soft); }

/* ------------------------------------------------------------ portada */

body.landing {
  background: transparent;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
#landing-bg { position: fixed; inset: 0; z-index: -1; }
#landing-bg svg { width: 100%; height: 100%; }
#landing-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(transparent 40%, rgba(20, 15, 5, .45)); }

.landing-card { width: 100%; max-width: 420px; padding: 28px 30px; }
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-title);
  font-size: 40px;
  font-weight: 700;
  color: var(--green-dark);
  letter-spacing: .5px;
}
.logo span { width: 46px; height: 54px; }
.logo svg { width: 100%; height: 100%; }
.tagline { text-align: center; margin: 6px 0 20px; color: var(--ink-soft); }

.tabs { display: flex; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.tab {
  flex: 1;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 700;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.tab.active { color: var(--green-dark); border-bottom-color: var(--green); }

.form label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.form input:not([type=radio]) {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font: inherit;
  background: #fff;
}
.form input:focus { outline: 2px solid rgba(95, 143, 58, .45); border-color: var(--green); }
.alert {
  background: #f6dcd4;
  border: 1px solid rgba(181, 67, 47, .5);
  border-radius: 7px;
  padding: 9px 12px;
  margin-bottom: 14px;
  font-size: 14px;
}
.hint { text-align: center; font-size: 13px; color: var(--ink-soft); margin: 16px 0 0; }

.avatar-pick { border: 0; padding: 0; margin: 0 0 16px; }
.avatar-pick legend { font-weight: 700; font-size: 14px; margin-bottom: 8px; }
.form .avatar-opt { display: inline-block; margin: 0 5px 5px 0 !important; cursor: pointer; }
.avatar-opt input { position: absolute; opacity: 0; }
.avatar-opt .avatar { width: 52px; height: 52px; border: 2px solid transparent; transition: transform .15s; }
.avatar-opt input:checked + .avatar { border-color: var(--green); transform: scale(1.06); box-shadow: 0 0 0 3px rgba(95, 143, 58, .25); }
.avatar-opt input:focus-visible + .avatar { outline: 2px dashed var(--ink); }

/* ------------------------------------------------------------ juego */

body.game { background: radial-gradient(ellipse at top, #46583f, #1f281d); min-height: 100vh; }
#app { max-width: 960px; margin: 0 auto; padding: 12px 0 16px; }
#stage-wrap { position: relative; width: 100%; overflow: hidden; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 960px;
  height: 600px;
  transform-origin: 0 0;
  overflow: hidden;
  user-select: none;
}
#scene, #scene svg { position: absolute; inset: 0; width: 960px; height: 600px; }

/* Ambiente animado de la escena */
.cloud { animation: drift 80s linear infinite; }
.cloud.c2 { animation-duration: 110s; animation-delay: -40s; }
.cloud.c3 { animation-duration: 140s; animation-delay: -70s; }
.cloud.c4 { animation-duration: 95s; animation-delay: -20s; }
@keyframes drift { from { transform: translateX(-320px); } to { transform: translateX(1120px); } }
.rays { transform-box: view-box; transform-origin: 872px 70px; animation: spin 90s linear infinite; }
.bird { animation: fly 38s linear infinite; }
.bird.b2 { animation-duration: 46s; animation-delay: -18s; }
@keyframes fly { from { transform: translate(-60px, 130px); } 50% { transform: translate(500px, 90px); } to { transform: translate(1040px, 120px); } }
.smoke circle { animation: smoke 4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.smoke circle:nth-child(2) { animation-delay: -1.3s; }
.smoke circle:nth-child(3) { animation-delay: -2.6s; }
@keyframes smoke { 0% { opacity: 0; transform: translate(0, 10px) scale(.5); } 30% { opacity: .7; } 100% { opacity: 0; transform: translate(12px, -16px) scale(1.4); } }
.tree-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: treesway 6s ease-in-out infinite alternate; }
@keyframes treesway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
.shimmer { animation: shimmer 3s ease-in-out infinite; }
@keyframes shimmer { 0%, 100% { opacity: .25; transform: translateX(-4px); } 50% { opacity: .9; transform: translateX(4px); } }
.duck { animation: duck 26s ease-in-out infinite; }
@keyframes duck {
  0% { transform: translate(800px, 500px) scaleX(1); }
  45% { transform: translate(890px, 508px) scaleX(1); }
  50% { transform: translate(890px, 508px) scaleX(-1); }
  95% { transform: translate(800px, 500px) scaleX(-1); }
  100% { transform: translate(800px, 500px) scaleX(1); }
}
.butterfly .flap { transform-box: fill-box; transform-origin: center; animation: flap .25s ease-in-out infinite alternate; }
@keyframes flap { from { transform: scaleX(1); } to { transform: scaleX(.25); } }
.butterfly.m1 { animation: bfly1 24s ease-in-out infinite; }
.butterfly.m2 { animation: bfly2 30s ease-in-out infinite; }
@keyframes bfly1 { 0% { transform: translate(120px, 480px); } 25% { transform: translate(260px, 430px); } 50% { transform: translate(200px, 560px); } 75% { transform: translate(60px, 500px); } 100% { transform: translate(120px, 480px); } }
@keyframes bfly2 { 0% { transform: translate(760px, 420px); } 30% { transform: translate(900px, 380px); } 60% { transform: translate(820px, 460px); } 100% { transform: translate(760px, 420px); } }
.night-only { display: none; }
.star-tw { animation: twinkle 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* Día y noche */
#daylight { position: absolute; inset: 0; pointer-events: none; z-index: 50; mix-blend-mode: multiply; transition: background 2s; }
#vignette { position: absolute; inset: 0; pointer-events: none; z-index: 51; background: radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(20, 14, 6, .35)); }
#fireflies { position: absolute; inset: 0; pointer-events: none; z-index: 52; display: none; }
#fireflies i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff4a8;
  box-shadow: 0 0 6px 2px rgba(255, 236, 120, .8);
  animation: firefly 7s ease-in-out infinite;
}
@keyframes firefly { 0%, 100% { opacity: 0; transform: translate(0, 0); } 30% { opacity: 1; } 50% { transform: translate(18px, -14px); } 70% { opacity: .8; } 85% { transform: translate(-10px, 6px); } }
.tod-dawn #daylight { background: linear-gradient(rgba(255, 200, 160, .55), rgba(255, 228, 200, .35)); }
.tod-dusk #daylight { background: linear-gradient(rgba(255, 150, 90, .55), rgba(190, 120, 150, .4)); }
.tod-night #daylight { background: linear-gradient(rgba(40, 50, 110, .82), rgba(70, 80, 140, .7)); }
.tod-night .night-only { display: inline; }
.tod-night .day-only { display: none; }
.tod-night #fireflies { display: block; }
.tod-night .win { fill: #ffd76a; }

#plots { position: absolute; inset: 0; }
.plot { position: absolute; width: 128px; height: 128px; pointer-events: none; }
.plot svg { width: 128px; height: 128px; overflow: visible; }
.plot svg * { pointer-events: none; }
.plot svg .hit { pointer-events: all; cursor: pointer; }
.plot .hl { opacity: 0; transition: opacity .15s; }
.plot:hover .hl { opacity: 1; }

.sway { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 3.2s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }
.glow { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: .35; } 50% { opacity: .75; } }

.bug { animation: crawl 1.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.bug.b1 { animation-delay: -.4s; }
.bug.b2 { animation-delay: -.8s; }
@keyframes crawl { from { transform: rotate(-10deg) translateX(-1.5px); } to { transform: rotate(10deg) translateX(1.5px); } }
.bug .wing { animation: buzz .12s linear infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; opacity: .6; }
@keyframes buzz { from { transform: scaleY(1); } to { transform: scaleY(.6); } }

.sparkle { animation: twinkle 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sparkle.s2 { animation-delay: -.6s; }
.sparkle.s3 { animation-delay: -1.2s; }
@keyframes twinkle { 0%, 100% { transform: scale(.3); opacity: .15; } 50% { transform: scale(1); opacity: .9; } }

.sign {
  position: absolute;
  left: 92px;
  top: 440px;
  width: 116px;
  min-height: 42px;
  padding: 6px 7px;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 8px),
    linear-gradient(#b8875a, #8f633d);
  border: 1px solid #3b2716;
  border-radius: 5px;
  color: #fbf2df;
  text-align: center;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.15;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-wrap: anywhere;
  z-index: 20;
}

.hud { position: absolute; display: flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; z-index: 70; }
#hud-me { left: 12px; top: 12px; }
#hud-me .avatar { width: 46px; height: 46px; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--line); }
#hud-me .name { font-family: var(--font-title); font-weight: 700; font-size: 16px; }
.lvl { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.star { position: relative; width: 28px; height: 28px; }
.star svg { width: 28px; height: 28px; }
.star b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; padding-top: 3px; color: #5a3a00; }
.xpbar {
  position: relative;
  width: 140px;
  height: 14px;
  border-radius: 7px;
  background: rgba(60, 40, 20, .15);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
  overflow: hidden;
}
.xpbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#a7cf6e, var(--green)); border-radius: 7px; transition: width .6s; }
.xpbar span { position: relative; display: block; text-align: center; font-size: 10px; font-weight: 800; line-height: 14px; color: var(--ink); }

#hud-right { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; z-index: 70; }
#hud-coins { position: static; font-family: var(--font-title); font-size: 19px; font-weight: 700; padding: 5px 16px 5px 6px; }
#hud-coins svg { width: 28px; height: 28px; }
.hud-buttons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 620px; }
.round-btn {
  position: relative;
  width: 64px;
  padding: 5px 0 4px;
  border-radius: 9px;
  cursor: pointer;
  text-decoration: none;
  color: #f6ecd8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transition: transform .12s;
}
.round-btn:hover { transform: translateY(-2px); filter: brightness(1.1); }
.round-btn span svg { width: 32px; height: 32px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.round-btn em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .2px; }
.badge {
  position: absolute;
  top: -7px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  border: 2px solid #f6efe1;
  font-style: normal;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
}

#visit-banner {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 8px;
  font-size: 14px;
}
#visit-banner > span:nth-child(2) { flex: 1; }

#toolbar {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  padding: 6px;
  z-index: 70;
  border-radius: 12px;
}
.tool {
  position: relative;
  width: 66px;
  padding: 5px 0 4px;
  border: 1px solid rgba(0, 0, 0, .35);
  border-radius: 9px;
  background: linear-gradient(#f9f3e6, #e6d9bd);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: inset 0 1px 0 #fff;
  transition: transform .12s;
}
.tool svg { width: 34px; height: 34px; }
.tool em { font-style: normal; font-size: 10.5px; font-weight: 700; white-space: nowrap; color: var(--ink-soft); }
.tool:hover { transform: translateY(-2px); }
.tool.active { background: linear-gradient(#fff6d8, #efd58f); box-shadow: 0 0 0 2px #f3d27a, 0 0 14px rgba(243, 210, 122, .8); transform: translateY(-3px); }
.tool.naughty { background: linear-gradient(#f1e6ee, #dccbd8); }
.tool.naughty.active { background: linear-gradient(#f7e6f1, #d8b3cc); box-shadow: 0 0 0 2px #c58fb4, 0 0 14px rgba(197, 143, 180, .7); }
.tool-seed { position: absolute; right: 2px; top: 0; width: 22px; height: 26px; }
.tool-seed svg { width: 22px; height: 26px; }
.tool-count {
  position: absolute;
  right: 3px;
  top: 3px;
  background: var(--wood-dark);
  color: #f6ecd8;
  border-radius: 7px;
  font-size: 9.5px;
  font-weight: 800;
  padding: 0 5px;
}
.tb-msg { display: flex; align-items: center; gap: 12px; padding: 6px 10px; color: #f6ecd8; font-weight: 600; }

#tooltip {
  position: absolute;
  z-index: 80;
  min-width: 180px;
  max-width: 240px;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.4;
  pointer-events: none;
}
#tooltip b:first-child { font-family: var(--font-title); font-size: 14px; }
#tooltip .ok { color: var(--green-dark); font-weight: 700; }
#tooltip .bad { color: var(--red); font-weight: 600; }
#tooltip .wet { color: #2f6f9a; font-weight: 600; }
#tooltip .muted { color: var(--ink-soft); }
.hbar { height: 6px; border-radius: 4px; background: rgba(60, 40, 20, .15); margin: 6px 0 1px; overflow: hidden; }
.hbar i { display: block; height: 100%; border-radius: 4px; }

#cursor-tool { position: absolute; z-index: 90; width: 38px; height: 38px; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }
#cursor-tool svg { width: 38px; height: 38px; }

#fx { position: absolute; inset: 0; pointer-events: none; z-index: 85; }
.float {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 0 6px rgba(0, 0, 0, .45);
  animation: floatUp 1.7s ease-out forwards;
}
.float svg { width: 20px; height: 20px; }
.float.xp { color: #ffe9a0; }
.float.coin { color: #ffd76a; }
.float.item { color: #d9f5b8; }
.float.bad { color: #f2c6e4; }
@keyframes floatUp { 0% { opacity: 0; margin-top: 10px; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -54px; } }
.pt { position: absolute; left: 0; top: 0; pointer-events: none; }
.pt svg { width: 100%; height: 100%; }
.big-text {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  font-family: var(--font-title);
  font-size: 54px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .45), 0 0 18px rgba(0, 0, 0, .35);
  animation: bigText 1.4s ease-out forwards;
}
@keyframes bigText { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -70%) scale(1); opacity: 0; } }
#stage.shake { animation: shake .4s; }
@keyframes shake { 0%, 100% { translate: 0 0; } 20% { translate: -6px 2px; } 40% { translate: 5px -2px; } 60% { translate: -4px 1px; } 80% { translate: 3px 0; } }

#neighbor-bar {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  padding: 9px;
  overflow-x: auto;
  border-radius: 12px;
}
.nb-card {
  position: relative;
  flex: none;
  width: 84px;
  padding: 7px 4px 5px;
  border: 1px solid rgba(0, 0, 0, .35);
  border-radius: 9px;
  background: linear-gradient(#f9f3e6, #e6d9bd);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transition: transform .12s;
}
.nb-card:hover { transform: translateY(-2px); }
.nb-card.active { background: linear-gradient(#fff6d8, #efd58f); box-shadow: 0 0 0 2px #f3d27a; }
.nb-name { font-size: 11.5px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-lvl {
  position: absolute;
  top: 4px;
  right: 6px;
  background: linear-gradient(#f2d27c, #d6a73a);
  border: 1px solid rgba(0, 0, 0, .3);
  border-radius: 50%;
  width: 21px;
  height: 21px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 19px;
  color: #4a3200;
}
.avatar.plus {
  border: 2px dashed var(--wood-light);
  font-size: 26px;
  line-height: 42px;
  color: var(--wood-light);
}

/* ------------------------------------------------------------ modales */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(20, 14, 6, .55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal { width: 100%; max-width: 660px; max-height: 88vh; display: flex; flex-direction: column; animation: modalIn .22s ease-out; overflow: hidden; }
@keyframes modalIn { from { transform: translateY(12px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 10px 18px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 7px),
    linear-gradient(var(--wood-light), var(--wood-dark));
  border-bottom: 1px solid #2c1d10;
}
.modal-head h2 { margin: 0; font-family: var(--font-title); font-size: 19px; font-weight: 700; color: #fbf2df; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); }
.close {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(0, 0, 0, .4);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fbf2df;
  font-size: 20px;
  line-height: 26px;
  cursor: pointer;
}
.close:hover { background: rgba(255, 255, 255, .25); }
.modal-body { padding: 16px 18px 18px; overflow-y: auto; }
.modal-body h3 { margin: 16px 0 8px; font-family: var(--font-title); font-size: 16px; }
.modal-body h3:first-child { margin-top: 0; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.cards.small { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.card {
  position: relative;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px;
  text-align: center;
  font: inherit;
  transition: transform .12s, box-shadow .12s;
}
.card:hover { box-shadow: 0 4px 12px rgba(60, 40, 20, .18); }
.card.pick { cursor: pointer; }
.card.pick:hover { transform: translateY(-2px); }
.card-art { height: 72px; display: flex; justify-content: center; align-items: flex-end; background: radial-gradient(ellipse at 50% 85%, #e3ead2 45%, transparent 70%); }
.card-art svg { height: 72px; width: 72px; }
.card-name { font-family: var(--font-title); font-weight: 700; font-size: 14.5px; margin-top: 4px; }
.card-stats { display: flex; justify-content: center; gap: 10px; font-size: 12.5px; align-items: center; color: var(--ink-soft); }
.card-stats span { display: inline-flex; align-items: center; gap: 3px; }
.card-stats svg { width: 15px; height: 15px; }
.card-sub { font-size: 11px; color: var(--ink-soft); margin: 3px 0 7px; }
.card .buy { display: flex; gap: 4px; justify-content: center; }
.owned { font-size: 11.5px; margin-top: 6px; color: var(--ink-soft); }
.card.locked .card-art, .card.locked .card-name, .card.locked .card-stats { filter: grayscale(1); opacity: .5; }
.lock { display: inline-block; background: var(--wood-dark); color: #f6ecd8; border-radius: 6px; padding: 3px 10px; font-size: 12px; font-weight: 700; }

.subtabs { display: flex; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.subtab {
  padding: 8px 16px;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: none;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}
.subtab.active { color: var(--green-dark); border-bottom-color: var(--green); }

.rows { display: flex; flex-direction: column; gap: 6px; }
.row {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 7px 9px;
  margin-bottom: 6px;
}
.rows .row { margin: 0; }
.row-art { width: 42px; height: 44px; flex: none; }
.row-art svg { width: 42px; height: 44px; }
.row-name { flex: 1; min-width: 0; font-size: 14px; }
.row-name small { display: block; color: var(--ink-soft); }
.row-name a { color: var(--amber-dark); font-weight: 800; text-decoration: none; }
.row-price { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; white-space: nowrap; color: var(--ink-soft); }
.row-price svg { width: 15px; height: 15px; }
.row.total { justify-content: center; background: transparent; border: 0; }
.row.new { background: #fbf3d9; }
.row.bad .row-name { color: #7a2f5c; }
.row.good .row-name { color: var(--green-dark); }
.tag { background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }

.search { display: flex; gap: 6px; margin-bottom: 10px; }
.search input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; font: inherit; }

.levelup { text-align: center; }
.big-star { position: relative; width: 110px; height: 110px; margin: 0 auto; animation: pop .6s ease-out; }
.big-star svg { width: 110px; height: 110px; }
.big-star b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-size: 32px; padding-top: 8px; color: #5a3a00; }
.card.mini .card-art, .card.mini .card-art svg { height: 54px; }
@keyframes pop { 0% { transform: scale(.2) rotate(-30deg); } 70% { transform: scale(1.12) rotate(5deg); } 100% { transform: scale(1); } }

#toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 300;
  transform: translate(-50%, 140px);
  max-width: calc(100% - 32px);
  padding: 11px 20px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 14px;
  color: #fbf2df;
  background: linear-gradient(var(--wood-light), var(--wood-dark));
  border: 1px solid #2c1d10;
  box-shadow: var(--shadow);
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.3);
}
#toast.show { transform: translate(-50%, 0); }
#toast.bad { background: linear-gradient(#b5523d, #7f2c1d); }

/* ------------------------------------------------------------ perro, decoraciones, regalos */

#decor { position: absolute; inset: 0; pointer-events: none; }
.decor { position: absolute; pointer-events: auto; }
.decor svg { width: 100%; height: 100%; overflow: visible; }
.decor.mine { cursor: grab; }
.decor.mine:hover svg { filter: brightness(1.08) drop-shadow(0 0 4px rgba(255, 240, 180, .9)); }

#dog { position: absolute; left: 205px; top: 420px; width: 130px; height: 80px; z-index: 30; cursor: pointer; }
#dog svg { width: 130px; height: 80px; overflow: visible; }
#dog:hover svg { filter: drop-shadow(0 0 4px rgba(255, 240, 180, .9)); }

.tail { transform-box: fill-box; transform-origin: 0% 100%; }
.tail.wag { animation: wag .35s ease-in-out infinite alternate; }
@keyframes wag { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.dog-head.sleepy { transform: translateY(3px); }
.zzz { animation: zzz 2.4s ease-in-out infinite; }
@keyframes zzz { 0% { opacity: 0; transform: translateY(6px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
.peck { transform-box: fill-box; transform-origin: 30% 90%; animation: peck 2.6s ease-in-out infinite; }
@keyframes peck { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(38deg); } 86% { transform: rotate(0); } 92% { transform: rotate(32deg); } }
.spin { transform-box: view-box; transform-origin: 48px 50px; animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.plot.pop svg { animation: plotpop .35s ease-out; transform-origin: 50% 70%; }
@keyframes plotpop { 0% { transform: scale(1); } 40% { transform: scale(1.06, .95); } 100% { transform: scale(1); } }

#place-hint {
  position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translateX(-50%);
  padding: 7px 16px;
  z-index: 70;
  font-weight: 700;
  font-size: 13.5px;
  white-space: nowrap;
}
#cursor-tool.ghost { opacity: .85; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
#cursor-tool.ghost svg { width: 100%; height: 100%; }
#cursor-tool.ghost.invalid { opacity: .5; filter: grayscale(1) drop-shadow(0 0 3px var(--red)); }

.warn { color: var(--red); font-weight: 700; }
.effect { color: var(--green-dark); }
.card-art.decor-art { padding: 4px; }
.card-art.decor-art svg { width: 70px; height: 62px; }
.dog-modal-art { width: 220px; height: 136px; margin: 0 auto 6px; }
.dog-modal-art svg { width: 100%; height: 100%; }

@media (max-width: 980px) {
  #app { padding: 0 0 12px; }
  #stage-wrap { border-radius: 0; }
  #neighbor-bar { margin: 10px 16px 0; }
  #visit-banner { margin: 10px 16px 0; flex-wrap: wrap; }
}

/* ------------------------------------------------------------ animales */

.building { position: absolute; pointer-events: auto; cursor: pointer; }
.building > svg { width: 100%; height: 100%; overflow: visible; }
.building:hover > svg { filter: brightness(1.06) drop-shadow(0 0 5px rgba(255, 240, 180, .9)); }
.animal {
  position: absolute;
  pointer-events: none;
  animation-name: wander;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.animal svg { width: 100%; height: 100%; overflow: visible; }
@keyframes wander {
  0% { transform: translateX(-7px) scaleX(1); }
  44% { transform: translateX(7px) scaleX(1); }
  50% { transform: translateX(7px) scaleX(-1); }
  94% { transform: translateX(-7px) scaleX(-1); }
  100% { transform: translateX(-7px) scaleX(1); }
}
.bubble {
  position: absolute;
  left: 50%;
  top: -34px;
  width: 38px;
  height: 38px;
  margin-left: -19px;
  padding: 4px;
  border-radius: 50%;
  background: #fbf7ee;
  border: 1px solid var(--line);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
  animation: bob 1.6s ease-in-out infinite;
  pointer-events: none;
}
.bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  margin-left: -6px;
  border: 6px solid transparent;
  border-top-color: #fbf7ee;
  border-bottom: 0;
}
.bubble svg { width: 100%; height: 100%; }
.bubble b {
  position: absolute;
  right: -6px;
  top: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: var(--green);
  color: #fff;
  font-size: 10.5px;
  line-height: 18px;
  text-align: center;
}
.bubble.hungry { background: #fbeee6; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.card-art.building-art { height: 84px; padding: 2px; }
.card-art.building-art svg { width: 110px; height: 84px; }
.kinds { display: flex; justify-content: center; gap: 4px; margin: 4px 0 2px; }
.kinds span { width: 34px; height: 30px; }
.kinds svg { width: 100%; height: 100%; }
.intro { margin: 0 0 12px; }
.bld-head { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.bld-art { width: 130px; height: 110px; flex: none; }
.bld-art svg { width: 100%; height: 100%; }
.bld-head p { margin: 4px 0 10px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; filter: grayscale(.4); }
.building-modal .row-art svg { width: 44px; height: 38px; }

/* ------------------------------------------------------------ fase 4: clima */

#weather { position: static; padding: 4px 12px 4px 6px; gap: 6px; font-size: 12px; line-height: 1.15; }
#weather svg { width: 28px; height: 28px; }
#weather b { display: block; font-size: 13px; }
#weather small { color: var(--ink-soft); }
#rain { position: absolute; inset: 0; pointer-events: none; z-index: 49; display: none; }
.wx-lluvia #rain, .wx-nublado #rain, .wx-calor #rain { display: block; }
.wx-nublado #rain { background: rgba(90, 105, 120, .22); mix-blend-mode: multiply; }
.wx-calor #rain { background: linear-gradient(rgba(255, 170, 80, .22), rgba(255, 210, 140, .12)); mix-blend-mode: multiply; }
.wx-lluvia #rain {
  background:
    repeating-linear-gradient(105deg, transparent 0 14px, rgba(220, 235, 250, .45) 14px 15px, transparent 15px 31px),
    rgba(70, 90, 110, .28);
  background-size: 120px 120px, auto;
  animation: rainfall .45s linear infinite;
}
@keyframes rainfall { to { background-position: -30px 120px, 0 0; } }
.wx-nublado .day-only, .wx-lluvia .day-only { opacity: .25; }

/* ------------------------------------------------------------ pestañas de grupo */

.group-tabs { display: flex; gap: 4px; margin: -4px 0 14px; padding: 4px; background: var(--paper-2); border-radius: 9px; }
.gtab { flex: 1; padding: 7px 10px; border: 0; border-radius: 7px; background: none; font-weight: 800; color: var(--ink-soft); cursor: pointer; }
.gtab.active { background: #fffdf8; color: var(--green-dark); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }

/* ------------------------------------------------------------ árboles y talleres en la escena */

.tree { position: absolute; cursor: pointer; }
.tree > svg { width: 100%; height: 100%; overflow: visible; }
.tree:hover > svg { filter: brightness(1.06) drop-shadow(0 0 5px rgba(255, 240, 180, .9)); }
.bubble.small { width: 30px; height: 30px; margin-left: -15px; top: -20px; padding: 3px; }
.progress {
  position: absolute; left: 50%; top: -14px; width: 60px; margin-left: -30px; height: 8px;
  border-radius: 5px; background: rgba(40, 30, 20, .55); border: 1px solid rgba(255, 255, 255, .5); overflow: hidden;
}
.progress i { display: block; height: 100%; background: linear-gradient(#b5e07a, var(--green)); }
.workshop .ws-smoke { display: none; }
.workshop.working .ws-smoke { display: inline; }
.workshop .ws-wheel { transform-box: view-box; transform-origin: 70px 78px; }
.workshop.working .ws-wheel { animation: spin 6s linear infinite; }
.workshop .ws-fire { opacity: .25; }
.workshop.working .ws-fire { animation: fire .8s ease-in-out infinite alternate; }
@keyframes fire { from { opacity: .55; } to { opacity: 1; } }
.workshop.working .ws-shuttle { animation: shuttle 1.2s ease-in-out infinite alternate; }
@keyframes shuttle { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
.card-art.tree-art svg { width: 64px; height: 84px; }

/* ------------------------------------------------------------ talleres, pedidos, mercado */

.need { display: inline-flex; align-items: center; gap: 2px; margin: 3px 6px 0 0; font-size: 12px; }
.need svg { width: 24px; height: 24px; }
.need.ok b { color: var(--green-dark); }
.need.miss b { color: var(--red); }
.needs { display: flex; flex-wrap: wrap; }
.row.recipe { align-items: flex-start; }
.times { display: flex; gap: 3px; flex-wrap: wrap; justify-content: flex-end; max-width: 150px; }
.job { display: flex; align-items: center; gap: 10px; }
.job-info { flex: 1; }
.job-info .hbar { width: 160px; }
.ok { color: var(--green-dark); font-weight: 800; }

.orders { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.order {
  display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 9px;
  background: #fffdf8; border: 1px solid var(--line);
}
.order.ready { border-color: var(--green); box-shadow: 0 0 0 2px rgba(95, 143, 58, .25); }
.order.done { opacity: .6; }
.order-who { display: flex; align-items: center; gap: 8px; font-family: var(--font-title); }
.order-items { display: flex; flex-wrap: wrap; }
.order-items .need svg { width: 30px; height: 30px; }
.order-reward { display: flex; gap: 12px; font-weight: 800; font-size: 13px; }
.order-reward span { display: inline-flex; align-items: center; gap: 3px; }
.order-reward svg { width: 18px; height: 18px; }
.order-actions { display: flex; gap: 6px; }

.list-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-bottom: 8px; }
.list-form select, .list-form input {
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; font: inherit; background: #fff;
}
.list-form label { display: flex; flex-direction: column; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.list-form input { width: 100px; }
.price-hint { width: 100%; color: var(--ink-soft); }

/* ------------------------------------------------------------ muro, menú, logros, ranking */

.wall-form { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 12px; }
.wall-form textarea { flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; font: inherit; resize: vertical; }
.post .post-body { display: block; margin-top: 3px; white-space: pre-wrap; overflow-wrap: anywhere; }
small.inline { display: inline !important; }

.menu-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.menu-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; text-align: left; cursor: pointer;
  background: #fffdf8; border: 1px solid var(--line); border-radius: 9px; text-decoration: none; color: var(--ink); font: inherit;
}
.menu-item:hover { background: #fbf3d9; }
.menu-item svg { width: 34px; height: 34px; flex: none; }
.menu-item b { display: block; font-family: var(--font-title); }
.menu-item small { color: var(--ink-soft); }

.medal { width: 40px; height: 40px; flex: none; filter: grayscale(1) opacity(.45); }
.medal svg { width: 100%; height: 100%; }
.ach.tier-1 .medal { filter: sepia(.6) hue-rotate(-20deg) saturate(.9); }
.ach.tier-2 .medal { filter: grayscale(1) brightness(1.25); }
.ach.tier-3 .medal { filter: none; }
.rank .pos { width: 24px; text-align: center; font-family: var(--font-title); font-weight: 800; color: var(--ink-soft); }
.rank.me { background: #fbf3d9; }

.ach-toast {
  position: fixed; left: 50%; top: 18px; z-index: 400; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px;
  animation: achIn .45s cubic-bezier(.2, .9, .3, 1.3), achOut .4s ease-in 3.8s forwards;
}
.ach-toast svg { width: 40px; height: 40px; }
.ach-toast small { display: block; color: var(--ink-soft); }
.ach-toast b { display: block; font-family: var(--font-title); }
@keyframes achIn { from { transform: translate(-50%, -80px); } to { transform: translate(-50%, 0); } }
@keyframes achOut { to { transform: translate(-50%, -100px); opacity: 0; } }

/* ------------------------------------------------------------ administración */

.admin-wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }
.admin-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 18px; border-radius: 12px; margin-bottom: 14px; }
.admin-head h1 { margin: 0; font-family: var(--font-title); color: #fbf2df; font-size: 22px; }
.admin-head nav { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-head nav a { color: #fbf2df; text-decoration: none; font-weight: 700; padding: 6px 12px; border-radius: 7px; }
.admin-head nav a.active, .admin-head nav a:hover { background: rgba(255, 255, 255, .15); }
.admin-body { padding: 16px; }
.alert-ok { background: #e3efd6; border-color: rgba(95, 143, 58, .5); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.stat { background: #fffdf8; border: 1px solid var(--line); border-radius: 9px; padding: 12px; }
.stat b { display: block; font-family: var(--font-title); font-size: 24px; }
.stat span { color: var(--ink-soft); font-size: 13px; }
.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { padding: 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.admin-table th { font-family: var(--font-title); }
.admin-table tr.banned { background: #f6e3dc; }
.admin-table .actions { display: flex; flex-wrap: wrap; gap: 6px; }
.admin-table .actions form { display: flex; gap: 4px; }
input.mini { width: 80px; padding: 5px 7px; border: 1px solid var(--line); border-radius: 6px; font: inherit; }
.tag.bad { background: #f6dcd4; color: var(--red); }
.need-txt { display: inline-flex; flex-direction: column; line-height: 1.1; }
.need-txt small { font-size: 10.5px; color: var(--ink-soft); font-weight: 600; }
.order-items .need { margin-right: 10px; }

/* ------------------------------------------------------------ pantalla completa y celular */

html:has(body.game), body.game { height: 100%; overflow: hidden; overscroll-behavior: none; }
body.game { touch-action: manipulation; -webkit-tap-highlight-color: transparent; background: #1f281d; }
#app { position: fixed; inset: 0; max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
#main { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#backdrop { position: absolute; inset: 0; overflow: hidden; }
#backdrop svg { width: 100%; height: 100%; filter: blur(10px) brightness(.8) saturate(.85); transform: scale(1.08); }
#backdrop * { animation: none !important; }
#stage-wrap {
  position: absolute; inset: 0; width: auto; height: auto !important;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 0; box-shadow: none;
}
#stage-wrap.scroll { display: block; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
#stage-wrap.scroll::-webkit-scrollbar { display: none; }
#stage-sizer { position: relative; flex: none; overflow: hidden; border-radius: 10px; box-shadow: 0 10px 50px rgba(0, 0, 0, .5); }
#stage-wrap.scroll #stage-sizer { border-radius: 0; box-shadow: none; }

#topbar {
  position: absolute; left: 0; right: 0; top: 0; z-index: 70;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  pointer-events: none;
}
#topbar > * { pointer-events: auto; }
#topbar .hud, #topbar #hud-me { position: static; }
#hud-right { position: static; flex-direction: row; align-items: center; gap: 8px; }
.icon-btn { width: 42px; height: 42px; padding: 0 !important; justify-content: center; cursor: pointer; color: var(--ink); }
.icon-btn svg { width: 22px; height: 22px; }
.is-fullscreen #fs-btn svg { transform: rotate(180deg); }
@media (display-mode: fullscreen), (display-mode: standalone) { #fs-btn { display: none; } }

#menubar { position: absolute; top: 68px; right: 12px; z-index: 70; max-width: 620px; }
#toolbar { z-index: 70; max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; bottom: max(12px, env(safe-area-inset-bottom)); }
#toolbar::-webkit-scrollbar, #menubar::-webkit-scrollbar { display: none; }
#visit-banner {
  position: absolute; z-index: 70; top: 66px; left: 50%; transform: translateX(-50%);
  margin: 0; max-width: calc(100% - 24px); white-space: nowrap;
}
#tooltip { z-index: 80; }
#place-hint { z-index: 75; display: flex; align-items: center; gap: 10px; }
#neighbor-bar { margin: 0; border-radius: 0; flex: none; padding: 8px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)); }

/* En pantallas medianas el menú no cabe junto al HUD: baja debajo del clima. */
@media (max-width: 1100px) and (min-width: 761px) and (min-height: 521px) {
  #menubar { top: 112px; max-width: 300px; }
  #visit-banner { top: auto; bottom: 96px; }
}

/* Celulares (vertical u horizontal) y tabletas pequeñas */
@media (max-width: 760px), (max-height: 520px) {
  #neighbor-bar { display: none; }
  #menubar {
    position: static; max-width: none; flex: none; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    gap: 4px; padding: 6px max(6px, env(safe-area-inset-left)) calc(6px + env(safe-area-inset-bottom));
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 7px), linear-gradient(var(--wood-light), var(--wood-dark));
    border-top: 1px solid #2c1d10; scrollbar-width: none;
  }
  #menubar .round-btn { width: 62px; flex: none; box-shadow: none; }
  .round-btn span svg { width: 26px; height: 26px; }
  .round-btn em { font-size: 10px; }
  #topbar { gap: 6px; padding-top: max(6px, env(safe-area-inset-top)); padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
  #hud-me { padding: 4px 8px 4px 4px; gap: 6px; }
  #hud-me .avatar { width: 34px; height: 34px; }
  #hud-me .name { font-size: 13px; }
  .star, .star svg { width: 22px; height: 22px; }
  .star b { font-size: 9.5px; }
  .xpbar { width: 80px; height: 12px; }
  .xpbar span { font-size: 8.5px; line-height: 12px; }
  #hud-right { gap: 5px; }
  #hud-coins { font-size: 15px; padding: 3px 10px 3px 4px; }
  #hud-coins svg { width: 22px; height: 22px; }
  #weather { padding: 4px !important; }
  #weather span { display: none; }
  #weather svg { width: 24px; height: 24px; }
  .icon-btn { width: 34px; height: 34px; }
  #toolbar { bottom: 6px; gap: 4px; padding: 4px; justify-content: flex-start; }
  .tool { width: 56px; flex: none; padding: 3px 0 2px; }
  .tool svg { width: 28px; height: 28px; }
  .tool em { font-size: 9.5px; }
  #visit-banner { top: 52px; gap: 6px; padding: 4px 6px; font-size: 12px; white-space: normal; width: max-content; }
  #visit-banner .avatar.sm { width: 28px; height: 28px; }
  #visit-banner .btn { padding: 5px 8px; font-size: 11.5px; }
  #place-hint { bottom: 76px; white-space: normal; text-align: center; width: calc(100% - 24px); font-size: 12.5px; justify-content: center; }
  #tooltip { max-width: 210px; font-size: 12px; }
  .overlay { padding: 0; align-items: flex-end; }
  .modal { max-width: none; max-height: 90dvh; border-radius: 14px 14px 0 0; }
  .modal-body { padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .modal-head h2 { font-size: 17px; }
  .row { flex-wrap: wrap; }
  .row .row-name { min-width: 50%; }
  .bld-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .bld-art { width: 110px; height: 90px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
  .orders { grid-template-columns: 1fr; }
  .menu-list { grid-template-columns: 1fr; }
  .times { max-width: none; justify-content: flex-start; }
  #toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .ach-toast { top: max(10px, env(safe-area-inset-top)); width: max-content; max-width: calc(100% - 20px); }
}

/* Celular horizontal: la barra del menú pasa al costado derecho para no robar altura. */
@media (max-height: 520px) and (orientation: landscape) {
  #app { flex-direction: row; }
  #menubar {
    flex-direction: column; overflow-x: hidden; overflow-y: auto; width: 74px;
    padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) 6px 6px;
    border-top: 0; border-left: 1px solid #2c1d10;
  }
  #menubar .round-btn { width: 60px; }
}

/* Zoom en celular vertical */
#stage-wrap.scroll { overflow: auto; }
#zoom-ctl { display: none; position: absolute; right: 8px; bottom: 76px; z-index: 70; flex-direction: column; gap: 6px; }
#zoom-ctl .icon-btn { width: 38px; height: 38px; font-size: 22px; font-weight: 800; line-height: 1; }
body.portrait #zoom-ctl { display: flex; }

/* ------------------------------------------------------------ premios diarios */

#menubar { max-width: 700px; }
.daily-block + .daily-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.daily-block h3 { margin: 0 0 4px; }
.daily-block > .small { margin: 0 0 10px; }
.streak { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 12px; }
.streak-day {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
  padding: 7px 3px; border-radius: 9px; background: #fffdf8; border: 1px solid var(--line); font-size: 10.5px;
}
.streak-day small { color: var(--ink-soft); font-weight: 700; }
.streak-day b { line-height: 1.15; }
.streak-icons { display: flex; gap: 1px; }
.streak-icons span { width: 24px; height: 24px; }
.streak-icons svg { width: 100%; height: 100%; }
.streak-day.done { opacity: .55; }
.streak-day.today { border-color: var(--green); box-shadow: 0 0 0 2px rgba(95, 143, 58, .3); background: #f3f8e8; }
.streak-day .check {
  position: absolute; top: -6px; right: -4px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--green); color: #fff; font-style: normal; font-size: 11px; line-height: 18px;
}
.wheel-wrap { position: relative; width: min(280px, 78vw); aspect-ratio: 1; margin: 6px auto 12px; }
.wheel-wrap::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 8px 22px rgba(30, 20, 10, .3); pointer-events: none; }
#wheel { width: 100%; height: 100%; }
#wheel svg { width: 100%; height: 100%; }
.wheel-pointer {
  position: absolute; left: 50%; top: -10px; z-index: 2; transform: translateX(-50%);
  width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent;
  border-top: 24px solid var(--red); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
}
.btn-spin { font-size: 17px; padding: 10px 34px; }
@media (max-width: 760px), (max-height: 520px) {
  .streak { grid-template-columns: repeat(4, 1fr); }
}