/* Mapa interactivo de Tireo: el plano a lápiz del juego, con capas y fichas. */
.mapgrid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start;padding-bottom:60px}
@media (max-width:980px){.mapgrid{grid-template-columns:1fr}}
.viewport{position:relative;height:min(78vh,860px);min-height:420px;border-radius:16px;overflow:hidden;background:#e8e3fd;border:1px solid var(--line);box-shadow:var(--shadow);touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.viewport.drag{cursor:grabbing}
.layer{position:absolute;left:0;top:0;width:1024px;height:1024px;transform-origin:0 0;will-change:transform}
.layer>img{width:1024px;height:1024px;max-width:none;pointer-events:none}
.mk{position:absolute;left:0;top:0;transform:translate(-50%,-50%) scale(var(--iz,1));transform-origin:center;border:0;padding:0;background:none;cursor:pointer;line-height:0}
.mk img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(48,36,76,.35))}
.mk.res img{width:24px;height:24px}
.mk.lugar{width:22px;height:22px;border-radius:50%;border:3px solid #ad4f7e;background:radial-gradient(circle,#ad4f7e 0 3px,rgba(251,250,253,.85) 4px)}
.mk.lugar.home{width:28px;height:28px;border-color:#264b47;background:radial-gradient(circle,#264b47 0 4px,rgba(251,250,253,.9) 5px)}
.mk .lbl{position:absolute;left:50%;top:100%;translate:-50% 4px;white-space:nowrap;font:400 15px/1.1 var(--hand);color:#2b2836;background:rgba(240,237,253,.78);padding:2px 6px;border-radius:6px;pointer-events:none;opacity:0;transition:opacity .2s}
.show-labels .mk .lbl{opacity:1}
.mk.sel{z-index:5}
.mk.sel img,.mk.sel.lugar{outline:3px solid var(--river);outline-offset:3px;border-radius:50%}
.zone{position:absolute;left:0;top:0;border-radius:50%;transform:translate(-50%,-50%);background:rgba(173,79,126,.14);border:2px dashed rgba(173,79,126,.55);pointer-events:none}
.fog{position:absolute;left:0;top:0;width:1024px;height:1024px;pointer-events:none}
.mapctl{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:8px;z-index:6}
.mapctl button{all:unset;cursor:pointer;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(248,246,255,.94);color:#272332;border:1px solid #c9c1e8;font:600 1.3rem/1 var(--display);box-shadow:0 4px 10px -6px rgba(0,0,0,.4)}
.compass{position:absolute;left:14px;top:12px;z-index:6;font:400 15px/1 var(--hand);color:#464255;text-align:center;background:rgba(248,246,255,.85);border-radius:50%;width:46px;height:46px;display:grid;place-items:center;border:1px solid #c9c1e8}
.scalebar{position:absolute;left:14px;bottom:12px;z-index:6;font:400 14px/1 var(--hand);color:#464255;background:rgba(248,246,255,.85);padding:6px 8px;border-radius:8px;display:flex;flex-direction:column;gap:4px}
.scalebar i{display:block;height:4px;background:#464255;border-radius:2px}
.panel{display:flex;flex-direction:column;gap:16px;min-width:0}
.box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.box h2{font-size:1.25rem}
.layers{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.layers label{display:flex;align-items:center;gap:8px;font-size:.98rem;cursor:pointer;padding:6px 8px;border-radius:10px;border:1px solid var(--line);background:var(--paper)}
.layers label:has(input:checked){border-color:var(--ink)}
.layers img{width:24px;height:24px;object-fit:contain}
.layers input{accent-color:var(--terra)}
.switch{display:flex;align-items:center;gap:10px;font-size:.98rem;cursor:pointer}
.card-empty{color:var(--soft);font-family:var(--hand)}
.sel-card{display:flex;flex-direction:column;gap:10px}
.sel-card .head{display:flex;gap:12px;align-items:center}
.sel-card .head img{width:54px;height:54px;object-fit:contain}
.sel-card h3{font-size:1.4rem}
.sel-card .thought{font-family:var(--hand);color:var(--graphite);font-size:1.08rem}
.sel-card .note{background:url(/constanza/media/arte/nota-papel.webp) center/cover;color:#2b2836;font-family:var(--hand);padding:14px 16px;border-radius:6px;rotate:-.6deg;box-shadow:var(--shadow)}
.sel-card .sketch{width:100%;max-height:220px;object-fit:contain;background:#f8f6ff;border-radius:10px;border:1px solid var(--line)}
.plist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-height:320px;overflow:auto}
.plist button{all:unset;cursor:pointer;display:flex;gap:10px;align-items:center;width:100%;box-sizing:border-box;padding:8px;border-radius:8px;font-size:1rem}
.plist button:hover,.plist button[aria-current="true"]{background:var(--paper-2)}
.plist img{width:26px;height:26px;object-fit:contain}
.plist .dot{width:14px;height:14px;border-radius:50%;border:3px solid #ad4f7e;flex:none;margin-inline:6px}
.journey{padding-block:20px 90px}
.journey figure{margin:0}
@media (max-width:980px){.viewport{height:auto;aspect-ratio:1/1;min-height:0;max-height:none}}
body.desk .box{color:#342e46;background:#fbfafd;border-color:#d4c9fe}
body.desk .layers label{background:#f1edfe;border-color:#d4c9fe}
body.desk .plist button:hover,body.desk .plist button[aria-current="true"]{background:#e7e1fe}
body.desk .viewport{border:10px solid #fbfafd;box-shadow:0 24px 40px -20px rgba(21,14,38,.7);rotate:-.4deg}
body.desk .journey{background:#e7e1fe;color:#342e46}
body.desk .journey .lede{color:#524b69}

/* ---------- pestañas: plano / 3D ---------- */
.maptabs{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 22px}
.maptabs button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:10px 20px 10px 14px;border-radius:4px 16px 16px 4px;background:rgba(251,250,253,.78);color:#342e46;font:400 1.2rem/1 var(--hand);border-left:7px solid #b2a2e4;box-shadow:0 8px 18px -12px rgba(21,14,38,.7);transition:transform .2s}
.maptabs button img{width:30px;height:30px;object-fit:contain}
.maptabs button:hover{transform:translateY(-2px)}
.maptabs button[aria-selected="true"]{background:#fbfafd;border-left-color:#bb587e;transform:translateY(-3px) rotate(-.6deg)}

/* ---------- el camino en 3D ---------- */
.world-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;padding-bottom:70px}
@media (max-width:980px){.world-grid{grid-template-columns:1fr}}
.world-frame{position:relative;border:10px solid #fbfafd;border-radius:16px;box-shadow:0 24px 40px -20px rgba(21,14,38,.7);overflow:hidden;
  background:linear-gradient(180deg,#dcd3fe 0%,#d1c5fb 45%,#cfc4e2 100%)}
.world{position:relative;height:min(76vh,820px);min-height:440px}
@media (max-width:980px){.world{height:72vh;min-height:380px}}
.world #view{position:absolute;inset:0}
.world #view canvas{display:block;touch-action:none;cursor:grab}
.world #view canvas:active{cursor:grabbing}
.world #labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.world .lbl{position:absolute;transform:translate(-50%,-120%);white-space:nowrap;font:400 13px/1.15 var(--hand);color:#342e46;background:rgba(251,250,253,.92);border-radius:4px;padding:2px 7px;box-shadow:0 2px 4px rgba(42,29,72,.18)}
.world .lbl.t{border-left:3px solid #bb587e}
.world .lbl.rep{background:#cfe4ec;color:#24485a}
.world .lbl.cat{background:rgba(247,246,253,.9)}
.world .lbl.m{background:#fcdfa2}
.world .lbl.reg{font:600 italic 20px/1 var(--display);font-variation-settings:"SOFT" 100,"WONK" 1;background:none;box-shadow:none;color:#342e46;text-shadow:0 0 6px #f8f6ff,0 0 12px #f8f6ff}
.world-hint{position:absolute;left:12px;bottom:10px;margin:0;font:400 .95rem/1.2 var(--hand);color:#524b69;background:rgba(251,250,253,.82);padding:5px 10px;border-radius:8px;pointer-events:none}
@media (max-width:620px){.world-hint{font-size:.82rem;right:12px}}
.panel .soft-p{color:#524b69;font-size:1rem}
.zlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.zlist button{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:7px 10px;border-radius:10px;font:400 1.12rem/1.2 var(--hand);color:#342e46}
.zlist button:hover{background:#e7e1fe}
.zlist button[aria-pressed="true"]{background:#ffc1ae}
.zlist .n{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;font:700 .8rem/1 var(--body);background:#fbfafd;border:2px solid #bb587e;color:#bb587e}
.zcard h3{font-size:1.5rem}
.zcard .alt{color:#7c7499;font-size:.95rem}
.zcard ul{margin:0;padding-left:1.1em;display:flex;flex-direction:column;gap:4px;font-family:var(--hand);font-size:1.08rem;color:#342e46}
.zcard .hint{color:#524b69;font-size:.95rem}
body.desk .zcard{color:#342e46}

/* pantalla de carga */
.loader{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:linear-gradient(180deg,#dcd3fe,#d1c5fb 45%,#cfc4e2);transition:opacity .6s}
.loader.done{opacity:0}
.loader-card{background:#fbfafd;color:#342e46;border-radius:6px;padding:26px 30px 22px;box-shadow:0 20px 40px -20px rgba(42,29,72,.6);rotate:-1.2deg;width:min(380px,86%);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;position:relative}
.loader-card::before{content:"";position:absolute;top:-13px;left:50%;width:100px;height:26px;translate:-50% 0;rotate:-3deg;background:rgba(218,209,253,.8)}
.loader .big{font-size:1.6rem;margin:4px 0 2px}
.loader .step{color:#524b69;min-height:1.4em;margin:0}
.loader .pct{font:700 .85rem/1 var(--body);color:#7c7499;margin:0;font-variant-numeric:tabular-nums}
.crayon-bar{width:100%;height:14px;border-radius:8px;background:repeating-linear-gradient(-45deg,#e7e1fe 0 6px,#dbd1ff 6px 12px);overflow:hidden;box-shadow:inset 0 1px 2px rgba(42,29,72,.2)}
.crayon-bar i{display:block;height:100%;width:0;border-radius:8px;transition:width .35s;background:linear-gradient(90deg,#f7999a,#bb587e);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14' preserveAspectRatio='none'%3E%3Cpath d='M0 3c6-2 10 2 20 0s14 2 20 0v8c-6 2-10-2-20 0S6 9 0 11z'/%3E%3C/svg%3E") 0 0/40px 100% repeat-x;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14' preserveAspectRatio='none'%3E%3Cpath d='M0 3c6-2 10 2 20 0s14 2 20 0v8c-6 2-10-2-20 0S6 9 0 11z'/%3E%3C/svg%3E") 0 0/40px 100% repeat-x}
.loader .retry{display:none;margin-top:6px}
.loader.err .retry{display:inline-flex}
.loader.err .paws{opacity:.3;animation:none}
.paws{position:relative;width:240px;height:46px}
.paws i{position:absolute;width:22px;height:22px;opacity:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23524b69'%3E%3Cellipse cx='12' cy='15.5' rx='5' ry='4.3'/%3E%3Ccircle cx='6' cy='9.5' r='2.2'/%3E%3Ccircle cx='10' cy='6.2' r='2.2'/%3E%3Ccircle cx='14.6' cy='6.2' r='2.2'/%3E%3Ccircle cx='18.4' cy='9.6' r='2.2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;rotate:90deg;animation:paw 2.4s infinite}
.paws i:nth-child(1){left:0;top:20px;animation-delay:0s}.paws i:nth-child(2){left:36px;top:4px;animation-delay:.3s}.paws i:nth-child(3){left:76px;top:20px;animation-delay:.6s}
.paws i:nth-child(4){left:116px;top:4px;animation-delay:.9s}.paws i:nth-child(5){left:156px;top:20px;animation-delay:1.2s}.paws i:nth-child(6){left:196px;top:4px;animation-delay:1.5s}
@keyframes paw{0%{opacity:0;transform:scale(.6)}12%{opacity:.9;transform:scale(1)}55%{opacity:.9}80%,100%{opacity:0}}
.zcard:empty{display:none}
.world,.world #view{touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:contain}
.loader.done{pointer-events:none}
/* planos de todas las zonas (10-oct) */
.viewport:not(.near) .mk.small{display:none}
.zonepick{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.zonepick button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:99px;background:rgba(251,250,253,.7);color:#342e46;font:400 1.08rem/1 var(--hand);border:1px solid #d4c9fe;transition:transform .15s}
.zonepick button b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid #bb587e;color:#bb587e;font:700 .78rem/1 var(--display)}
.zonepick button:hover{transform:translateY(-1px)}
.zonepick button[aria-selected="true"]{background:#f8c692;border-color:#f19c7e}
.zonepick button:focus-visible{outline:3px solid var(--river);outline-offset:2px}
body.desk .sel-card .thought{color:#433d54}
.show-labels .mk .lbl.off{opacity:0}
.mk img.own{width:46px;height:46px;border-radius:50%;background:rgba(251,250,253,.92);border:2px solid #bb587e;padding:3px;box-sizing:border-box;object-fit:contain}