/* ===== Capa "juego": íconos, tarjetas de juego, informe de fin de mes, tutorial, salas ===== */
.ico{width:28px;height:28px;image-rendering:pixelated;flex-shrink:0;vertical-align:middle}
.tchip,.mchip{display:inline-flex;align-items:center;gap:4px;font:700 13px var(--f-mono,monospace);padding:2px 8px 2px 4px;border:2px solid var(--ink);background:var(--surface);white-space:nowrap;line-height:1.4}
.tchip .ico,.mchip .ico{width:18px;height:18px}
.tchip b{letter-spacing:1px;color:var(--accent)}
.mchip{background:color-mix(in srgb,#e9b949 22%,var(--surface))}
.mchip.pos{background:color-mix(in srgb,#5aa36f 22%,var(--surface))}

/* Tarjeta de juego: ícono grande + texto + chips + acción */
.gcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.gcard{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--surface);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--line);padding:12px 12px 12px}
.gcard .gtop{display:flex;gap:10px;align-items:flex-start}
.gcard .gtop .ico{width:44px;height:44px;background:var(--paper);border:2px solid var(--ink);padding:3px}
.gcard h3{font-size:17px;margin:0;line-height:1.25}
.gcard p{margin:0}
.gcard .gchips{display:flex;flex-wrap:wrap;gap:6px}
.gcard .gfoot{margin-top:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gcard .gfoot button{flex:1}
.gcard.done{border-color:var(--good,#2f6b47);background:color-mix(in srgb,#5aa36f 12%,var(--surface))}
.gcard.lock{opacity:.72;border-style:dashed}
.gcard .ribbon{position:absolute;top:-10px;right:10px;font:700 12px var(--f-display);background:var(--ink);color:var(--surface);padding:2px 8px;text-transform:uppercase;letter-spacing:.04em}
.gcard.done .ribbon{background:#2f6b47}
.sect-title{display:flex;align-items:center;gap:10px;margin:4px 0 0}
.sect-title .ico{width:32px;height:32px}
.sect-title h2,.sect-title h3{margin:0}

/* Escena del lugar: personaje con globo de diálogo */
.npc-scene{display:flex;gap:14px;align-items:flex-end;background:var(--paper);border:3px solid var(--ink);padding:12px;box-shadow:4px 4px 0 var(--line)}
.npc-scene .npc-big{width:84px;height:84px;image-rendering:pixelated;flex-shrink:0;background:var(--surface);border:2px solid var(--ink)}
.npc-scene .bubble{position:relative;flex:1;background:var(--surface);border:3px solid var(--ink);padding:10px 12px;font-size:16px}
.npc-scene .bubble::before{content:'';position:absolute;left:-12px;bottom:14px;border:6px solid transparent;border-right-color:var(--ink);border-width:6px 9px}
.npc-scene .bubble strong{font-family:var(--f-display)}

/* Bóveda del banco */
.vault{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.vault .slot{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:12px 8px;background:var(--surface);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--line)}
.vault .slot .ico{width:48px;height:48px}
.vault .slot .amt{font:700 19px var(--f-mono,monospace)}
.vault .slot.zero{opacity:.6}
.vault .slot .plan{font-size:12px;color:var(--accent);font-weight:700}
details.expert{border:2px dashed var(--line);padding:8px 12px;background:var(--paper)}
details.expert>summary{cursor:pointer;min-height:36px;display:flex;align-items:center;font-weight:700;color:var(--muted)}

/* Historial como álbum de meses */
.months{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.mcard{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border:3px solid var(--ink);background:var(--surface);text-align:center}
.mcard .pixel-face{width:40px;height:44px}
.mcard b{font:700 18px var(--f-display)}
.mcard.s2{background:color-mix(in srgb,#5aa36f 18%,var(--surface))}
.mcard.s1{background:color-mix(in srgb,#e9b949 20%,var(--surface))}
.mcard.s0{background:color-mix(in srgb,#c8503f 16%,var(--surface))}
.mcard.next{border-style:dashed;opacity:.55}
.mcard .small{font-size:12px}

/* ===== Informe de fin de mes (estilo Papers, Please) ===== */
.pp-modal{align-items:flex-start;overflow:auto}
.pp-doc{position:relative;width:min(620px,100%);margin:24px auto;background:#f3ead0;color:#2a2a22;border:4px solid #25393c;box-shadow:0 0 0 4px #f3ead0,0 0 0 7px #25393c,10px 12px 0 4px rgba(0,0,0,.35);padding:18px 18px 16px;cursor:pointer;
  background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(37,57,60,.07) 27px 28px)}
.pp-doc button{cursor:pointer}
.pp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:3px double #25393c;padding-bottom:10px;margin-bottom:8px}
.pp-head h2{margin:2px 0 0;font-size:28px}
.pp-kicker{font:700 12px var(--f-mono,monospace);letter-spacing:.08em;text-transform:uppercase;color:#5d5a47}
.pp-cal{display:flex;flex-direction:column;align-items:center;background:#25393c;color:#f3ead0;padding:4px 10px;min-width:64px;font-family:var(--f-mono,monospace)}
.pp-cal b{font:700 30px var(--f-display);line-height:1}
.pp-cal small{font-size:10px;letter-spacing:.08em}
.pp-paper{font-family:var(--f-mono,'IBM Plex Mono',monospace);font-size:15px}
.pp-row{display:flex;align-items:baseline;gap:6px;padding:2px 0}
.pp-row>span:first-child{white-space:pre-wrap;min-width:0}
.pp-dots{flex:1;border-bottom:2px dotted rgba(37,57,60,.35);min-width:16px;transform:translateY(-4px)}
.pp-v{white-space:nowrap;font-weight:700}
.pp-v.pos{color:#2f6b47}.pp-v.neg{color:#a5362a}.pp-v.save{color:#2f5f8a}
.pp-row.big,.pp-v.big{font-size:17px}
.pp-v.small{font-size:13px;font-weight:600}
.pp-sec{display:flex;align-items:center;gap:6px;font:700 13px var(--f-mono,monospace);letter-spacing:.08em;text-transform:uppercase;margin-top:10px;color:#4a473a}
.pp-sec .ico{width:20px;height:20px}
.pp-cut{border-top:3px dashed #25393c;margin:10px 0 6px}
.pp-note{padding-left:12px;color:#5d5a47}
.pp-block{border-top:2px solid rgba(37,57,60,.25);margin-top:10px;padding-top:8px}
.pp-fam{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.pp-p{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;width:68px}
.pp-p .pp-sprite{width:52px;height:52px;image-rendering:pixelated;background:#fff9e9;border:2px solid #25393c}
.pp-p small{font-size:12px;font-weight:700;max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-bubble{position:absolute;top:-8px;right:0;min-width:22px;height:22px;display:grid;place-items:center;font:700 13px var(--f-display);background:#fff9e9;border:2px solid #25393c}
.pp-p.emo-contento .pp-bubble{color:#c8503f}
.pp-p.emo-hambre .pp-bubble,.pp-p.emo-estresado .pp-bubble,.pp-p.emo-enfermo .pp-bubble{background:#c8503f;color:#fff}
.pp-pct{font:700 26px var(--f-display)}
.pp-pct.ok{color:#2f6b47}.pp-pct.warn{color:#8a5a14}.pp-pct.bad{color:#a5362a}
.pp-meter{position:relative;height:14px;border:2px solid #25393c;background:#fff9e9;margin:4px 0 8px}
.pp-meter i{display:block;height:100%;background:#5aa36f}.pp-meter i.warn{background:#e9b949}.pp-meter i.bad{background:#c8503f}
.pp-meter span{position:absolute;top:-5px;bottom:-5px;width:3px;background:#25393c}
.pp-dims{display:flex;flex-wrap:wrap;gap:6px}
.pp-dim{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;padding:2px 8px 2px 2px;border:2px solid #25393c;background:#fff9e9}
.pp-dim b{display:grid;place-items:center;width:20px;height:20px;color:#fff;font-size:12px}
.pp-dim.s2 b{background:#2f6b47}.pp-dim.s1 b{background:#b8862a}.pp-dim.s0 b{background:#a5362a}
.pp-score{display:flex;gap:10px;align-items:center}.pp-score .ico{width:40px;height:40px}
.pp-sala{display:flex;gap:10px;align-items:center}.pp-sala .ico{width:36px;height:36px}
.goal{height:10px;border:2px solid currentColor;background:transparent;margin:4px 0 2px}
.goal i{display:block;height:100%;background:#e9b949}
.pp-stamp{position:absolute;right:18px;top:120px;transform:rotate(-12deg);border:5px solid currentColor;padding:6px 14px;text-align:center;font:800 26px var(--f-display);letter-spacing:.04em;background:rgba(243,234,208,.75);pointer-events:none;max-width:70%}
.pp-stamp small{display:block;font:700 12px var(--f-body,sans-serif);letter-spacing:0;text-transform:none}
.pp-stamp.ok{color:#2f6b47}.pp-stamp.warn{color:#9a6a12}.pp-stamp.bad{color:#a5362a}
.pp-go{margin-top:14px}
.pp-skip-hint{text-align:center;margin:8px 0 0}
.pp-all .pp-skip-hint{display:none}
@media(prefers-reduced-motion:no-preference){
  .pp-doc:not(.pp-all) .pp-ln{opacity:0;animation:pp-print .22s steps(3) forwards;animation-delay:calc(var(--d) * 170ms)}
  .pp-doc:not(.pp-all) .pp-stamp{opacity:0;animation:pp-stamp .35s cubic-bezier(.2,1.6,.4,1) forwards;animation-delay:calc(var(--d) * 170ms + 120ms)}
  @keyframes pp-print{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  @keyframes pp-stamp{0%{opacity:0;transform:rotate(-12deg) scale(2.4)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}
}
@media(max-width:640px){
  .pp-doc{margin:8px auto;padding:12px;box-shadow:0 0 0 3px #f3ead0,0 0 0 5px #25393c}
  .pp-head h2{font-size:22px}
  .pp-paper{font-size:13px}
  .pp-stamp{position:relative;right:auto;top:auto;display:block;margin:14px auto 0;font-size:20px;width:max-content;max-width:100%}
  .pp-p{width:58px}.pp-p .pp-sprite{width:44px;height:44px}
}

/* ===== Tutorial ===== */
.tour-spot{position:fixed;z-index:1;pointer-events:none;box-shadow:0 0 0 4px #e9b949,0 0 0 8px #25393c,0 0 0 9999px rgba(21,32,36,.62)}
@media(prefers-reduced-motion:no-preference){.tour-spot{animation:spot-pulse 1s steps(2) infinite}@keyframes spot-pulse{50%{box-shadow:0 0 0 6px #e9b949,0 0 0 10px #25393c,0 0 0 9999px rgba(21,32,36,.62)}}}
.dlg-scrim.clear{background:transparent}
.dlg-layer.arriba{align-items:flex-start}
.dlg-layer.arriba .dlg{flex-direction:column-reverse}
.dlg-layer .dlg{z-index:2}
.tour-step{font:700 12px var(--f-mono,monospace);background:#e9b949;color:#25393c;padding:1px 6px;margin-right:auto}
body.tour-on .music-btn{display:none}

/* ===== Inicio con aspecto de menú de juego ===== */
.title-screen{position:relative;border:4px solid var(--ink);box-shadow:6px 6px 0 var(--line);overflow:hidden;background:var(--sea)}
.title-screen .citymini{display:block;width:100%;height:auto;image-rendering:pixelated}
.title-screen .ts-text{position:absolute;left:16px;bottom:12px;right:16px;display:flex;align-items:flex-end;gap:12px}
.title-screen .ts-text h1{margin:0;color:var(--surface);text-shadow:3px 3px 0 var(--ink);font-size:clamp(24px,5vw,40px)}
.title-screen .ts-text .eyebrow{color:var(--surface);text-shadow:2px 2px 0 var(--ink)}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.menu-btn{display:flex;align-items:center;gap:12px;text-align:left;padding:14px;border:3px solid var(--ink);background:var(--surface);box-shadow:4px 4px 0 var(--ink);min-height:84px;font-weight:400}
.menu-btn .ico{width:44px;height:44px}
.menu-btn strong{display:block;font:700 19px var(--f-display)}
.menu-btn.primary{background:var(--accent);color:var(--accent-ink)}
.menu-btn.primary .small{color:inherit;opacity:.9}
.menu-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.slot-card{display:flex;gap:12px;align-items:center;padding:12px;border:3px solid var(--ink);background:var(--surface);box-shadow:4px 4px 0 var(--line);flex-wrap:wrap}
.slot-card .faces{display:flex}
.slot-card .faces svg{width:40px;height:40px;image-rendering:pixelated;background:var(--paper);border:2px solid var(--ink);margin-right:-6px}
.slot-card .info{flex:1;min-width:180px}
.slot-card .pips12{display:flex;gap:2px;margin:6px 0 2px}
.slot-card .pips12 i{flex:1;height:8px;background:var(--line)}
.slot-card .pips12 i.on{background:var(--accent)}
.join-box{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.join-box input{font:700 22px var(--f-mono,monospace);letter-spacing:.3em;text-transform:uppercase;max-width:200px;text-align:center}

/* ===== Salas: ranking con podio ===== */
.podium{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:end;gap:8px;margin:8px 0 4px}
.podium .pod{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0}
.podium .pod .who{font-weight:700;font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podium .pod svg.av{width:56px;height:56px;image-rendering:pixelated;background:var(--surface);border:2px solid var(--ink)}
.podium .step{width:100%;border:3px solid var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:6px;font:700 22px var(--f-display);color:#25393c}
.podium .p1 .step{height:96px;background:#e9b949}.podium .p2 .step{height:70px;background:#c9ccc6}.podium .p3 .step{height:52px;background:#cf8e5b}
.podium .step small{font:700 13px var(--f-mono,monospace)}
.rank-list{display:flex;flex-direction:column;gap:6px}
.rank-row{display:grid;grid-template-columns:34px 40px 1fr auto;gap:8px;align-items:center;padding:6px 8px;border:2px solid var(--line);background:var(--surface)}
.rank-row.me{border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent)}
.rank-row .pos{font:700 18px var(--f-display);text-align:center}
.rank-row svg{width:36px;height:36px;image-rendering:pixelated}
.rank-row .goal{color:var(--ink);margin:3px 0 0}
.rank-row .pts{font:700 18px var(--f-mono,monospace);text-align:right}
.rank-row .pts small{display:block;font-size:11px;color:var(--muted);font-weight:600}
.badge-meta{display:inline-block;font-size:11px;font-weight:700;background:#2f6b47;color:#fff;padding:0 6px;margin-left:4px}
.hud-goal{height:5px;background:var(--line);margin-top:3px}.hud-goal i{display:block;height:100%;background:#e9b949}
.hud-mini{min-height:36px;padding:2px 10px;font-weight:700}
body:has(.hud) #music-btn{display:none}
@media(max-width:520px){.rank-row{grid-template-columns:28px 34px 1fr auto;gap:6px}.podium .pod svg.av{width:44px;height:44px}}
.event-scene{border-color:var(--accent);box-shadow:4px 4px 0 var(--accent)}
.event-scene .bubble{font-size:15px}
.big-go{min-height:56px;font:700 20px var(--f-display)}
.npc-scene svg.npc-big{background:var(--surface)}
.sorteo .faces{display:flex;justify-content:center;gap:4px}.sorteo .faces svg{width:44px;height:44px;image-rendering:pixelated;background:var(--surface);border:2px solid var(--ink)}
.sorteo .dado-roll{width:56px;height:56px}
@media(prefers-reduced-motion:no-preference){.dado-roll{animation:dado .4s steps(4) infinite}@keyframes dado{25%{transform:rotate(90deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}}
.menu-btn[disabled]{opacity:.5}
@media(max-width:640px){.npc-scene{padding:8px;gap:8px}.npc-scene .npc-big{width:60px;height:60px}.npc-scene .bubble{font-size:15px;padding:8px}.well-toolbar .sound-toggle{margin-left:0;flex:1}.gcards{grid-template-columns:1fr}}
.title-screen{background:#f2b880}
.title-screen .title-art{display:block;width:100%;height:200px}
.title-screen .ts-text{top:16px;bottom:auto;flex-direction:column;align-items:flex-start;gap:8px}
.ts-logo{font:700 clamp(26px,5.5vw,44px)/1 'Pixelify Sans',var(--f-display);color:#fff4c2;text-shadow:3px 0 0 #25393c,-3px 0 0 #25393c,0 3px 0 #25393c,0 -3px 0 #25393c,5px 5px 0 #25393c;letter-spacing:.02em}
.ts-hello{background:#fff9e9;border:3px solid #25393c;padding:4px 10px;box-shadow:3px 3px 0 #25393c;color:#25393c}
.ts-hello .eyebrow{display:block;color:#526060;text-shadow:none}
.ts-hello strong{font:700 20px var(--f-display)}
.pp-scorewrap{position:relative}
.pp-stamp{top:auto;bottom:-6px;right:0;font-size:22px;max-width:62%}
@media(max-width:640px){.pp-stamp{bottom:auto}}
.pp-stamp{bottom:auto;top:0}
.pp-stamp{top:4px;font-size:18px;padding:4px 10px;transform:rotate(-8deg);max-width:55%}
@media(prefers-reduced-motion:no-preference){@keyframes pp-stamp{0%{opacity:0;transform:rotate(-8deg) scale(2.4)}100%{opacity:1;transform:rotate(-8deg) scale(1)}}}
.podium .p1 .step{height:112px}.podium .p2 .step{height:88px}.podium .p3 .step{height:72px}
.music-btn{min-height:44px;min-width:44px;padding:4px 10px;font-size:18px}
.music-btn .mlabel{font-size:14px}
@media(max-width:640px){.music-btn .mlabel{display:none}.music-btn{left:auto;right:10px;bottom:10px;border-radius:50%;width:48px;height:48px;padding:0}
 .logro-toast{padding:6px 10px;gap:8px;top:8px}.logro-toast strong{font-size:15px}.logro-toast span>span{display:none}.logro-toast .trofeo svg{width:30px;height:30px}}
.fin-banner{position:relative;overflow:hidden}
.fin-banner.win{border-color:#b8862a;box-shadow:0 0 0 3px #e9b949,6px 6px 0 3px var(--line)}
.fin-top{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.fin-top>.ico{width:64px;height:64px}
.fin-stamp{position:static;transform:rotate(-6deg);margin-left:auto;font-size:20px}
.npc-scene{align-items:flex-start}
.dlg-layer.tour .dlg-more{display:none}
@media(max-width:640px){.dlg-hint{gap:6px}.dlg-hint .dlg-x{order:3}}