/* Menú: el asentamiento */
#screen-select { flex-direction: column; align-items: stretch; padding: 40px 0 0; height: 100vh; min-height: 520px; overflow: hidden; position: relative; }
.set-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 16px 6px; position: relative; z-index: 3; flex-wrap: wrap; }
.set-title { font-family: var(--font-cin, 'Cinzel', serif); font-weight: 900; font-size: clamp(22px, 3.4vw, 34px); letter-spacing: 6px; color: #fff6d8; text-shadow: 0 3px 0 #2a1604, 0 0 14px rgba(0,0,0,.45); line-height: 1; }
.set-sub { font-family: var(--font-cin, 'Cinzel', serif); font-size: 11px; letter-spacing: 3px; font-weight: 700; color: #fff6d8; text-shadow: 0 2px 0 #2a1604; margin-top: 4px; }
.set-stock { display: flex; gap: 8px; flex-wrap: wrap; }
.stk { display: flex; align-items: center; gap: 6px; background: linear-gradient(#f6e6b4, #d8bc78); border: 3px solid #6a4a1c; border-radius: 22px; padding: 2px 12px 2px 4px; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.stk img { width: 30px; height: 30px; object-fit: contain; }
.stk b { font-family: var(--font-cin, 'Cinzel', serif); font-size: 18px; color: #2a1604; min-width: 1ch; }
.stk i { font-style: normal; font-family: var(--font-cin, 'Cinzel', serif); font-size: 9px; letter-spacing: 1.5px; font-weight: 700; color: #5a3a10; }
.set-scroll { position: absolute; left: 0; right: 0; top: 34px; bottom: 0; background: #3a8ad8; overflow-x: auto; overflow-y: hidden; z-index: 1; -webkit-overflow-scrolling: touch; }
.set-map { height: 100%; aspect-ratio: 16 / 9; min-width: 100%; margin: 0 auto; background: #5e9a48; }
.set-map svg { width: 100%; height: 100%; display: block; }
.plot { cursor: pointer; outline: none; }
.plot .w-art { transition: transform .15s, filter .15s; transform-box: fill-box; transform-origin: 50% 100%; }
.plot:hover .w-art, .plot:focus-visible .w-art { transform: scale(1.05); filter: drop-shadow(0 0 10px #fff3b0) brightness(1.06); }
.plot.locked { cursor: not-allowed; }
.plot.locked .w-art { filter: grayscale(.9) brightness(.8); opacity: .65; }
.plot.locked:hover .w-art { transform: none; filter: grayscale(.9) brightness(.8); }
.pulse { animation: pulse-up 1.1s ease-in-out infinite alternate; }
@keyframes pulse-up { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.wonder-plot .st.ghost * { stroke-dasharray: 4 3; }
.set-panel { position: fixed; left: 50%; top: 100px; transform: translate(-50%, -160%); width: min(560px, calc(100vw - 24px)); background: linear-gradient(#f6e8bc, #dcc080); border: 4px solid #6a4a1c; border-radius: 16px; box-shadow: 0 12px 30px rgba(0,0,0,.55), inset 0 0 0 3px #f2d27a; padding: 16px 20px 18px; z-index: 50; transition: transform .22s ease-out, opacity .22s; visibility: hidden; opacity: 0; pointer-events: none; text-align: center; color: #2a1604; }
.set-panel.show { transform: translate(-50%, 0); visibility: visible; opacity: 1; pointer-events: auto; }
@media (max-width: 900px) { .set-panel { top: 150px; } }
.sp-x { position: absolute; top: 6px; right: 10px; background: none; border: 0; font-size: 20px; cursor: pointer; color: #5a3a10; }
.sp-eyebrow { font-family: var(--font-cin, 'Cinzel', serif); font-size: 10px; letter-spacing: 2px; font-weight: 700; color: #6a4a1c; }
.sp-title { font-family: var(--font-cin, 'Cinzel', serif); font-size: 22px; font-weight: 900; letter-spacing: 2px; margin: 4px 0 6px; }
.sp-desc { font-size: 13px; line-height: 1.4; margin: 0 0 8px; }
.sp-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; }
.sp-stars { font-size: 26px; color: #8a7448; margin-bottom: 8px; } .sp-stars .on { color: #e0a020; text-shadow: 0 0 8px #ffd84a; }
.sp-cost { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-cin, 'Cinzel', serif); font-weight: 700; font-size: 14px; margin-bottom: 10px; } .sp-cost img { width: 30px; height: 30px; } .sp-cost.no { color: #a02818; }
.sp-max { font-family: var(--font-cin, 'Cinzel', serif); font-weight: 900; letter-spacing: 3px; color: #b07a10; }
.sp-hint { font-size: 12px; opacity: .8; margin: 8px 0 0; }
.set-panel .btn:disabled { opacity: .45; cursor: not-allowed; }
.set-panel .wc-tag { background: rgba(255,246,214,.7); color: #2a1604; border-color: #8a6a3a; }
@media (max-width: 900px) { .set-scroll { display: flex; align-items: flex-end; } .set-map { height: auto; width: 1000px; min-width: 1000px; flex: none; margin: 0; } .set-head { padding: 4px 10px 6px; } .stk i { display: none; } .stk { padding: 0 8px 0 2px; border-width: 2px; } .stk img { width: 22px; height: 22px; } .stk b { font-size: 14px; } .set-stock { gap: 4px; } }
@media (prefers-reduced-motion: reduce) { .pulse, .plot .w-art, .set-panel, .cloud, .bird, .flap, .shim, .smk circle, .walker, .sprs, .flag, .glint, .star { animation: none !important; transition: none !important; } .glint { opacity: 0; } .smk circle { opacity: .35; } }

/* ── Vida en el mapa ── */
.set-prog { margin-top: 6px; display: inline-block; padding: 2px 12px; background: rgba(20,40,106,.75); border: 2px solid #f2d27a; border-radius: 14px; font: 700 11px var(--font-cin, serif); letter-spacing: 2px; color: #fff6d8; }
.cloud { animation: cloud-drift linear infinite; }
@keyframes cloud-drift { from { transform: translateX(-420px); } to { transform: translateX(1900px); } }
.bird { transform: translate(-60px, var(--y)); animation: bird-fly linear infinite; }
@keyframes bird-fly { from { transform: translate(-60px, var(--y)); } 50% { transform: translate(800px, calc(var(--y) - 30px)); } to { transform: translate(1700px, var(--y)); } }
.flap { transform-box: fill-box; transform-origin: 50% 100%; animation: flap .5s ease-in-out infinite alternate; }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
.shim { animation: shim 6s linear infinite; }
@keyframes shim { to { stroke-dashoffset: -152; } }
.smk circle { transform-box: fill-box; transform-origin: center; animation: smoke 3.2s ease-out infinite; animation-delay: calc(var(--i) * 1.05s); opacity: 0; }
@keyframes smoke { 0% { transform: translate(0, 0) scale(.5); opacity: .85; } 100% { transform: translate(10px, -38px) scale(1.7); opacity: 0; } }
.walker { transform: translate(var(--x0), var(--y)); animation: walk-x linear infinite; }
@keyframes walk-x {
  0% { transform: translate(var(--x0), var(--y)) scaleX(1); } 49.9% { transform: translate(var(--x1), var(--y)) scaleX(1); }
  50% { transform: translate(var(--x1), var(--y)) scaleX(-1); } 99.9% { transform: translate(var(--x0), var(--y)) scaleX(-1); } 100% { transform: translate(var(--x0), var(--y)) scaleX(1); }
}
.sprs { animation: spr-svg .85s steps(8) infinite; }
@keyframes spr-svg { to { transform: translateX(var(--end)); } }
.flag { transform-box: fill-box; transform-origin: 0 50%; animation: wave 1.2s ease-in-out infinite alternate; }
@keyframes wave { from { transform: skewY(-6deg) scaleX(1); } to { transform: skewY(6deg) scaleX(.88); } }
.glint { animation: glint 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes glint { 0%, 70%, 100% { transform: scale(0); opacity: 0; } 85% { transform: scale(1.3); opacity: 1; } }
.star { animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.build-plot.up .w-art { animation: up-bounce .8s cubic-bezier(.2,.9,.3,1.4); }
@keyframes up-bounce { 0% { transform: scale(1); } 30% { transform: scale(1.18, .88); } 60% { transform: scale(.94, 1.1); } 100% { transform: scale(1); } }
body.reduce-motion .cloud, body.reduce-motion .bird, body.reduce-motion .flap, body.reduce-motion .shim, body.reduce-motion .smk circle, body.reduce-motion .walker, body.reduce-motion .sprs, body.reduce-motion .flag, body.reduce-motion .glint, body.reduce-motion .star { animation: none !important; }
body.reduce-motion .smk circle { opacity: .35; }
body.reduce-motion .glint { opacity: 0; }

/* ── Maravillas ilustradas ── */
.plot.todo .w-art { filter: grayscale(.65) brightness(.9); opacity: .88; }
.plot.todo:hover .w-art, .plot.todo:focus-visible .w-art { filter: drop-shadow(0 0 10px #fff3b0) brightness(1.04); opacity: 1; }
.plot.done .w-art { filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.plot.locked .w-art { filter: grayscale(1) brightness(.7); opacity: .6; }
.ov-scene { background-size: cover; background-position: center; display: grid; place-items: end center; }
.ov-wonder { max-width: 94%; max-height: 96%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); animation: stage-in .8s ease-out both; }
@keyframes stage-in { from { transform: translateY(14px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }

/* Panel de una maravilla: abajo, para no tapar las obras de arriba */
.set-panel.at-bottom { top: auto; bottom: 14px; transform: translate(-50%, 160%); }
.set-panel.at-bottom.show { transform: translate(-50%, 0); }
@media (max-width: 900px) { .set-panel.at-bottom { top: auto; bottom: 10px; } }