:root {
  --panel: rgba(18, 20, 24, 0.82);
  --line: rgba(255, 255, 255, 0.12);
  --text: #eef0f3;
  --muted: #9aa3ad;
  --accent: #ff3d7f;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a2230; color: var(--text);
  font: 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; user-select: none; -webkit-user-select: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#crosshair { position: fixed; left: 50%; top: 50%; pointer-events: none; z-index: 3; }
#dot { position: absolute; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 2px #000; }
#ring { position: absolute; border: 1.5px solid rgba(255,255,255,.75); border-radius: 50%; box-shadow: 0 0 2px rgba(0,0,0,.6); transition: opacity .15s; }
#ring.far { opacity: .25; border-style: dashed; }

#topbar { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 12px; z-index: 4; display: flex; gap: 10px; align-items: baseline; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
#topbar .brand { font-weight: 800; letter-spacing: .08em; }
#topbar .sub { color: #cfd6de; }
#fps { color: var(--muted); font-variant-numeric: tabular-nums; }

#panel { position: fixed; right: 12px; top: max(10px, env(safe-area-inset-top)); z-index: 5; width: 232px; }
#panelToggle { display: none; }
#panelBody { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; backdrop-filter: blur(6px); }
#palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.sw { aspect-ratio: 1; border-radius: 7px; border: 2px solid rgba(255,255,255,.18); cursor: pointer; padding: 0; }
.sw.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.custom { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; color: var(--muted); }
.custom input { width: 44px; height: 28px; border: none; background: none; padding: 0; cursor: pointer; }
.slider { display: grid; grid-template-columns: 70px 1fr 34px; align-items: center; gap: 6px; margin-top: 8px; color: var(--muted); }
.slider input { width: 100%; accent-color: var(--accent); }
.slider span { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
#hardPresets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
#hardPresets button { padding: 6px 0; border-radius: 7px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; }
#hardPresets button.sel { color: var(--text); border-color: var(--accent); background: rgba(255,255,255,.14); }
#dripBtn { margin-top: 8px; width: 100%; padding: 7px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; }
#dripBtn.on { color: var(--text); border-color: var(--accent); background: rgba(255,255,255,.14); }
#clearMine { margin-top: 10px; width: 100%; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); cursor: pointer; font: inherit; }
#clearMine:hover { background: rgba(255,61,127,.25); }
#help { margin-top: 10px; color: var(--muted); font-size: 12px; }
#help b { color: var(--text); font-weight: 600; }

#overlay { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(10,14,20,.55), rgba(10,14,20,.88)); }
#overlay.hidden { display: none; }
.card { width: min(420px, calc(100% - 32px)); text-align: center; padding: 26px 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; }
.card h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: .1em; }
.card .map { margin: 0 0 16px; color: var(--muted); }
#loadBar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
#loadFill { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
#loadText { color: var(--muted); font-size: 13px; margin: 8px 0 14px; }
#playBtn { font: inherit; font-weight: 700; font-size: 16px; padding: 12px 22px; border-radius: 10px; border: none; background: var(--accent); color: #fff; cursor: pointer; }
#playBtn:disabled { opacity: .4; cursor: default; }
.hint { color: var(--muted); font-size: 12.5px; margin: 14px 0 0; }

#unlockHint { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 4; padding: 8px 14px; border-radius: 8px; background: var(--panel); color: var(--text); pointer-events: none; display: none; }
#unlockHint.show { display: block; }

#touchUI { display: none; }
.touch-only { display: none; }

/* ---------- tactil ---------- */
body.touch .desktop-only { display: none; }
body.touch .touch-only { display: block; }
body.touch #touchUI { display: block; }
body.touch #casaHint.show, body.touch #misHint.show { pointer-events: auto; padding: 12px 18px; border: 1px solid rgba(255,255,255,.35); touch-action: none; user-select: none; -webkit-user-select: none; }
body.touch #panel { width: auto; max-width: 250px; right: max(10px, env(safe-area-inset-right)); }
body.touch #panelToggle { display: block; margin-left: auto; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 22px; }
body.touch #panelBody { display: none; margin-top: 8px; }
body.touch #panel.open #panelBody { display: block; }
#stickZone { position: fixed; left: 0; bottom: 0; width: 45%; height: 55%; z-index: 2; touch-action: none; }
#stickBase { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.25); left: 90px; top: calc(100% - 110px); }
#stickKnob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255,255,255,.45); }
.tbtn { position: fixed; z-index: 3; border: 1px solid rgba(255,255,255,.3); background: rgba(18,20,24,.6); color: #fff; font: 700 14px system-ui, sans-serif; border-radius: 14px; touch-action: none; }
#jumpBtn { right: 124px; bottom: 30px; width: 60px; height: 60px; border-radius: 50%; font-size: 24px; }
#modeBtn { right: max(18px, env(safe-area-inset-right)); bottom: 36px; width: 92px; height: 92px; border-radius: 50%; padding: 0; font-size: 15px; line-height: 1.2; background: rgba(18,20,24,.6); }
#modeBtn.paint { background: rgba(255,61,127,.75); }
/* mando del vehiculo: sustituye al joystick y a los botones de a pie mientras se conduce */
#carPad { display: none; }
#carPad .tbtn { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; padding: 0; border-radius: 50%; font-size: 30px; line-height: 1; }
#carPad small { display: block; margin-top: 2px; font-size: 10px; letter-spacing: .06em; opacity: .85; }
#carPad .tbtn.on { background: rgba(255,255,255,.55); color: #111; }
body.touch.inCar #carPad { display: block; }
body.touch.inCar #stickZone, body.touch.inCar #modeBtn, body.touch.inCar #jumpBtn, body.touch.inCar #crouchBtn, body.touch.inCar #undoBtn, body.touch.inCar #eraserTBtn { display: none !important; }
#cLeft { left: max(12px, env(safe-area-inset-left)); bottom: 40px; width: 72px; height: 72px; }
#cRight { left: calc(max(12px, env(safe-area-inset-left)) + 82px); bottom: 40px; width: 72px; height: 72px; }
#cGas { right: max(14px, env(safe-area-inset-right)); bottom: 36px; width: 96px; height: 96px; background: rgba(61,220,132,.55); }
#cGas.on { background: rgba(61,220,132,.9); }
#cBrake { right: calc(max(14px, env(safe-area-inset-right)) + 106px); bottom: 40px; width: 70px; height: 70px; background: rgba(255,61,61,.5); }
#cBrake.on { background: rgba(255,61,61,.9); }
#cHand { right: calc(max(14px, env(safe-area-inset-right)) + 114px); bottom: 120px; width: 54px; height: 54px; font-size: 24px !important; }
#cExit { left: max(12px, env(safe-area-inset-left)); bottom: 126px; width: auto; height: 46px; padding: 0 16px !important; border-radius: 14px !important; font-size: 15px !important; background: rgba(224,112,31,.85); }
body.touch.paintmode #crosshair { display: none; }

/* ---------- multijugador ---------- */
#topbar .sub.online::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 6px #3ddc84; vertical-align: 1px; }
#playerList { position: fixed; left: 12px; top: calc(max(10px, env(safe-area-inset-top)) + 26px); z-index: 4; margin: 0; padding: 0; list-style: none; pointer-events: none; font-size: 12.5px; text-shadow: 0 1px 3px rgba(0,0,0,.8); max-height: 40vh; overflow: hidden; }
#playerList li { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
#playerList li i { width: 9px; height: 9px; border-radius: 3px; flex: none; border: 1px solid rgba(255,255,255,.4); }
#playerList li em { color: var(--muted); font-style: normal; font-size: 11px; }
#playerList li.me { font-weight: 600; }
.check { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.nameRow { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 14px; color: var(--muted); }
.nameRow input { width: 170px; font: inherit; font-size: 15px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.08); color: var(--text); user-select: text; -webkit-user-select: text; }
.nameRow input:focus { outline: none; border-color: var(--accent); }
body.touch #playerList { font-size: 11.5px; }

/* ---------- viajar (cartel de itinerario) ---------- */
#travelHint { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); z-index: 4; padding: 8px 14px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--text); pointer-events: none; display: none; }
#travelHint b { display: inline-block; min-width: 18px; padding: 1px 6px; margin-right: 6px; border-radius: 5px; background: #1f5fe0; color: #fff; text-align: center; }
#travelHint.show { display: block; }
#travelBtn { display: none; left: 50%; top: 58%; transform: translateX(-50%); padding: 12px 18px; background: rgba(31,95,224,.8); }
#travelBtn.show { display: block; }
#travelMenu { position: fixed; inset: 0; z-index: 12; display: none; place-items: center; background: rgba(10,14,20,.6); }
#travelMenu.show { display: grid; }
.card.travel { text-align: left; padding: 18px; }
.travel .line { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.travel .line h2 { margin: 0; font-size: 18px; flex: 1; }
.travel .dot { width: 14px; height: 14px; border-radius: 50%; background: #1f5fe0; box-shadow: 0 0 0 3px rgba(31,95,224,.35); }
#travelClose { border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font: inherit; }
#travelList { list-style: none; margin: 0; padding: 0 0 0 6px; border-left: 4px solid #1f5fe0; }
#travelList li { margin: 0 0 8px; }
#travelList button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
#travelList button:not(:disabled):hover { border-color: #1f5fe0; background: rgba(31,95,224,.25); }
#travelList button:disabled { cursor: default; opacity: .75; }
#travelList .n { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #1f5fe0; color: #fff; font-weight: 700; font-size: 13px; }
#travelList .t { flex: 1; display: flex; flex-direction: column; }
#travelList .t em { font-style: normal; color: var(--muted); font-size: 12.5px; }
#travelList .here { font-size: 12px; color: #fff; background: var(--accent); padding: 2px 8px; border-radius: 99px; }

/* ---------- salas privadas e invitaciones ---------- */
#roomBtn { position: fixed; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 5; padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font: 600 13px system-ui, sans-serif; cursor: pointer; }
#roomBtn.priv { border-color: var(--accent); }
#roomMenu { position: fixed; inset: 0; z-index: 12; display: none; place-items: center; background: rgba(10,14,20,.6); }
#roomMenu.show { display: grid; }
.card.rooms { text-align: left; padding: 18px; max-height: calc(100% - 32px); overflow: auto; }
.rooms .line { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rooms .line h2 { margin: 0; font-size: 18px; flex: 1; }
.rooms #roomState { margin: 0 0 12px; color: #cfd6de; font-size: 14px; }
.rooms .code { letter-spacing: .12em; color: #fff; background: rgba(255,61,127,.25); padding: 1px 6px; border-radius: 5px; }
.rooms button { border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); border-radius: 8px; padding: 8px 12px; cursor: pointer; font: inherit; font-size: 14px; }
.rooms button:hover:not(:disabled) { border-color: var(--accent); }
.rooms button:disabled { opacity: .55; cursor: default; }
.rooms button.wide { width: 100%; margin-bottom: 10px; }
.rooms button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
#roomClose { width: 34px; height: 34px; padding: 0; }
.rooms .row { display: flex; gap: 6px; margin-bottom: 10px; }
.rooms input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.08); color: var(--text); user-select: text; -webkit-user-select: text; }
.rooms input:focus { outline: none; border-color: var(--accent); }
#roomCode { text-transform: uppercase; letter-spacing: .1em; }
#roomLinkRow label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
[hidden] { display: none !important; }
.rooms .whoHead { display: flex; align-items: center; margin-top: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.rooms .whoHead h3 { flex: 1; margin: 0; font-size: 15px; }
#roomRefresh { width: 32px; height: 32px; padding: 0; }
#roomWho { list-style: none; margin: 8px 0 0; padding: 0; max-height: 34vh; overflow: auto; }
#roomWho li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
#roomWho li.empty { color: var(--muted); font-size: 13px; border: none; }
#roomWho .t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#roomWho .t em { font-style: normal; color: var(--muted); font-size: 12px; }
#inviteToast { position: fixed; left: 50%; top: 56px; transform: translateX(-50%); z-index: 13; display: none; align-items: center; gap: 8px; max-width: calc(100% - 24px); padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--accent); box-shadow: 0 6px 24px rgba(0,0,0,.4); color: var(--text); font-size: 14px; }
#inviteToast.show { display: flex; }
#inviteToast .msg { flex: 1; }
#inviteToast button { border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); border-radius: 8px; padding: 7px 10px; cursor: pointer; font: inherit; white-space: nowrap; }
#inviteToast .yes { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
#inviteToast kbd { font: 11px system-ui; opacity: .8; margin-left: 4px; }
body.touch #roomBtn { top: max(10px, env(safe-area-inset-top)); left: auto; right: 70px; transform: none; padding: 10px 12px; }

/* ---------- favoritos y paletas por tonalidad ---------- */
#panelBody { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
body.touch #panelBody { max-height: calc(100dvh - 84px); }
.palHead { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; color: var(--muted); }
.palHead button, .palHead select { padding: 4px 8px; border-radius: 7px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); cursor: pointer; font: inherit; font-size: 12px; }
.palHead select { max-width: 130px; }
.palHead select option { background: #1a1d22; color: #fff; }
.palHead button:disabled { opacity: .45; cursor: default; }
.swGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 6px; }
.swGrid .empty { grid-column: 1 / -1; color: var(--muted); font-size: 12px; line-height: 1.35; }
#favs .sw { position: relative; }
#favs .sw .del { position: absolute; right: -6px; top: -6px; width: 16px; height: 16px; border-radius: 50%; background: #16181c; color: #fff; border: 1px solid rgba(255,255,255,.5); font: 700 11px/14px system-ui, sans-serif; text-align: center; display: none; }
#favs .sw:hover .del, body.touch #favs .sw.sel .del { display: block; }

/* ---------- skate e inventario ---------- */
#skateHint { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); z-index: 4; padding: 8px 14px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--text); pointer-events: none; display: none; }
#skateHint b { display: inline-block; padding: 1px 7px; margin-right: 6px; border-radius: 5px; background: #e0701f; color: #fff; }
#skateHint.show { display: block; }
#skateBtn { display: none; left: 50%; top: 58%; transform: translateX(-50%); padding: 12px 18px; background: rgba(224,112,31,.85); }
#skateBtn.show { display: block; }
#invBtn { position: fixed; right: 12px; bottom: 12px; z-index: 5; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 20px; cursor: pointer; }
#invBtn.on { border-color: #e0701f; box-shadow: 0 0 0 2px rgba(224,112,31,.35); }
body.touch #invBtn { right: 12px; bottom: auto; top: 58px; }
/* movil: volver al home (Crack House) */
#lobbyBtn { display: none; }
body.touch #lobbyBtn { display: block; position: fixed; right: 64px; top: 58px; z-index: 5; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 13px; font-weight: 800; letter-spacing: .04em; cursor: pointer; }
body.touch.home #lobbyBtn { display: none; }
/* home sin pintura: fuera los controles de spray */
body.nopaint #panel, body.nopaint #modeBtn, body.nopaint #undoBtn, body.nopaint #eraserTBtn { display: none !important; }
/* sin el spray equipado (el unico objeto de pintura) no se ve el panel de pintura */
body:not(.hasSpray):not(.markerOn):not(.rollerOn) #panel { display: none !important; }
/* solid marker en la mano (markers.js): el panel enseña los marcadores comprados en vez de los colores del spray */
#markerPal { display: none; }
body.markerOn #markerPal { display: block; }
body.markerOn #panelBody > :not(#markerPal):not(#undoStroke) { display: none !important; }
#markerPal .palHead { margin-top: 0; }
.mkGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 6px; }
.mkSw { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 4px; border-radius: 9px; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: inherit; opacity: .75; cursor: pointer; font: inherit; font-size: 11px; }
.mkSw i { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 3px #e9e9e4; }
.mkSw.sel { border-color: #fff; opacity: 1; }
.mkEmpty { margin: 6px 0 0; opacity: .7; font-size: 12px; }
/* rodillo en la mano (rodillo.js): colores y dureza del spray, mas los anchos y el palo; sin grosor, opacidad, chorreo ni cromado */
#rollerPal { display: none; }
body.rollerOn #rollerPal { display: block; }
body.rollerOn #size, body.rollerOn #opacity { display: none; }
body.rollerOn label.slider:has(#size), body.rollerOn label.slider:has(#opacity), body.rollerOn #chromeBtn { display: none !important; }
.rlGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 6px; }
.rlSw { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 10px 4px 7px; border-radius: 9px; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: inherit; opacity: .75; cursor: pointer; font: inherit; font-size: 11px; line-height: 1.2; }
.rlSw i { display: block; max-width: 100%; height: 12px; border-radius: 6px; background: repeating-linear-gradient(90deg, #e9e9e4 0 2px, #c9c9c2 2px 4px); box-shadow: 0 0 0 2px #f2c014; }
.rlSw.sel { border-color: #fff; opacity: 1; }
.rlLen { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.rlLen span { flex: 1; text-align: center; font-weight: 700; font-size: 13px; }
.rlLen button { width: 40px; height: 34px; border-radius: 9px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: inherit; font-size: 18px; cursor: pointer; }
.rlHint { margin: 6px 0 2px; opacity: .65; font-size: 11px; text-align: center; }
body.touch .rlHint { display: none; }
#trickBtn { display: none; right: 116px; bottom: 100px; padding: 10px 14px; border-radius: 22px; background: rgba(224,112,31,.85); }
body.touch.skating #trickBtn { display: block; }
#trickToast { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); z-index: 4; display: none; text-align: center; pointer-events: none; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.75); max-width: calc(100% - 24px); }
#trickToast.show { display: block; }
#trickToast b { display: block; font-size: 24px; letter-spacing: .5px; }
#trickToast span { display: block; margin-top: 2px; font-size: 14px; opacity: .9; }
#skateSpeed { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; display: none; padding: 3px 10px; border-radius: 10px; background: rgba(10,14,20,.45); color: #fff; font-size: 12px; pointer-events: none; }
body.skating #skateSpeed { display: block; }
body.touch #skateSpeed { bottom: auto; top: 58px; }
#invMenu { position: fixed; inset: 0; z-index: 12; display: none; place-items: center; background: rgba(10,14,20,.6); }
#invMenu.show { display: grid; }
.card.inv { text-align: left; padding: 18px; width: min(460px, calc(100% - 24px)); }
.card.inv .line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card.inv .line h2 { margin: 0; font-size: 18px; }
.card.inv .line button { border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); border-radius: 8px; padding: 5px 9px; cursor: pointer; }
#invGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
#invGrid .slot { min-height: 96px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 6px; text-align: center; }
#invGrid .slot.empty { opacity: .45; }
#invGrid .slot.on { border-color: #e0701f; background: rgba(224,112,31,.14); }
#invGrid .slot .ico { font-size: 30px; line-height: 1; }
#invGrid .slot em { display: none; }
#invGrid .slot button { border: 0; border-radius: 7px; padding: 5px 10px; background: #e0701f; color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }

/* Menú de pausa */
#pauseMenu { position: fixed; inset: 0; z-index: 14; display: none; place-items: center; background: rgba(10,14,20,.72); overflow-y: auto; }
#pauseMenu.show { display: grid; }
.pmCard { display: flex; flex-direction: column; gap: 12px; width: min(340px, 86vw); padding: 18px 0; }
.pmCard button { padding: 15px 10px; border: 0; border-radius: 4px; background: #d9d9d9; color: #111; font: 600 17px/1 inherit; letter-spacing: .04em; cursor: pointer; }
.pmCard button:hover { background: #f4f0b4; }
.pmPage { width: min(460px, 90vw); padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; color: var(--text); }
.pmPage h2 { margin: 0 0 4px; text-align: center; letter-spacing: .08em; }
.pmSub { margin: 6px 0 0; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.pmRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.pmRow select { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: #1b222c; color: var(--text); }
.pmSoon { text-align: center; color: var(--muted); }
#pmControls #help { display: block; margin: 0; font-size: 13px; line-height: 1.6; }
#pauseBtn { position: fixed; left: 12px; bottom: 12px; z-index: 6; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 18px; cursor: pointer; }
body.touch #pauseBtn { bottom: auto; top: 30vh; }

/* ---------- panel compacto: rueda de color, ocultar/mostrar en escritorio, cromado ---------- */
#palette { display: none; }
#colorWheel { display: block; margin: 0 auto; width: 172px; height: 172px; cursor: crosshair; touch-action: none; }
#panelBody { max-height: calc(100vh - 70px); overflow-y: auto; scrollbar-width: thin; }
body:not(.touch) #panel { width: 212px; }
body:not(.touch) #panelBody { padding: 10px; margin-top: 6px; }
body:not(.touch) #panelToggle { display: block; margin-left: auto; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); font-size: 17px; cursor: pointer; }
body:not(.touch) #panel.closed #panelBody { display: none; }
#chromeBtn { margin-top: 8px; width: 100%; padding: 7px; border-radius: 8px; border: 1px solid rgba(255,255,255,.35); cursor: pointer; font: inherit; font-weight: 700; letter-spacing: .06em; color: #20242a;
  background: linear-gradient(180deg, #fdfdfd 0%, #b9c0c9 38%, #6f7782 52%, #c9d0d8 70%, #f2f4f6 100%); }
#chromeBtn.sel { box-shadow: 0 0 0 2px var(--accent); border-color: #fff; }

/* ---------- agacharse (boton tactil) ---------- */
#crouchBtn { right: 124px; bottom: 100px; width: 60px; height: 60px; border-radius: 50%; font-size: 24px; }
#crouchBtn.on { background: rgba(255,210,31,.75); color: #111; }

/* ---------- creditos y tienda ---------- */
#credits { position: fixed; left: 60px; bottom: 12px; z-index: 6; height: 40px; padding: 0 12px; display: flex; align-items: center; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: #ffe27a; font-weight: 700; font-size: 14px; pointer-events: none; }
body.touch #credits { bottom: auto; top: 30vh; }
.pmPage.pmWide { width: min(760px, 94vw); }
.shopHead { display: flex; align-items: baseline; justify-content: space-between; }
.shopHead h2 { margin: 0; }
.shopCredits { color: #ffe27a; font-weight: 700; }
.shopBody { display: grid; grid-template-columns: 150px 1fr; gap: 14px; height: min(52vh, 430px); }
.shopCats { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.pmCard .shopCats button { padding: 11px 8px; font-size: 14px; text-align: left; }
.pmCard .shopCats button.sel { background: #f4f0b4; }
.shopGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-content: start; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.shopItem { cursor: pointer; }
.shopThumb { aspect-ratio: 1; border-radius: 6px; background: #d9d9d9; display: grid; place-items: center; border: 3px solid transparent; }
.shopThumb canvas { width: 100%; height: 100%; display: block; }
.shopItem:hover .shopThumb { background: #ececec; }
.shopItem.sel .shopThumb { border-color: #f4f0b4; background: #f7f5d8; }
.shopItem.owned .shopName { color: #8fe3a8; }
.shopName { margin-top: 5px; font-size: 12px; font-weight: 600; letter-spacing: .03em; text-align: center; line-height: 1.25; }
.shopFoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; font-size: 13px; color: var(--muted); }
.pmCard .shopBuy { padding: 10px 16px; font-size: 14px; background: #ffd21f; white-space: nowrap; }
.pmCard .shopBuy:disabled { background: #6b6f76; color: #2a2d31; cursor: default; }
@media (max-width: 560px) { .shopBody { grid-template-columns: 96px 1fr; gap: 8px; } .pmCard .shopCats button { font-size: 12px; padding: 9px 6px; } .shopGrid { gap: 8px; } }

/* ---------- personalizar ---------- */
.cuTabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pmCard .cuTabs button { padding: 10px 8px; font-size: 14px; }
.pmCard .cuTabs button.sel { background: #f4f0b4; }
.cuBody { height: min(54vh, 450px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.cuBody.player { display: grid; grid-template-columns: 130px 1fr; gap: 14px; align-items: start; }
.cuSide { position: sticky; top: 0; }
.cuPreview { width: 100%; border-radius: 8px; background: #d9d9d9; display: block; }
.cuRows { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cuRow { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; }
.cuRow > label { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--muted); }
.cuList { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cuSw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); cursor: pointer; }
.cuSw.sel { border-color: #f4f0b4; box-shadow: 0 0 0 2px #f4f0b4; }
.pmCard .cuChip { padding: 7px 10px; font-size: 12px; }
.pmCard .cuChip.sel { background: #f4f0b4; }
.cuTile { width: 62px; cursor: pointer; text-align: center; }
.cuTile canvas, .cuTile img { width: 62px; height: 62px; object-fit: cover; border-radius: 6px; background: #d9d9d9; border: 3px solid transparent; display: block; box-sizing: border-box; }
.cuTile.sel canvas, .cuTile.sel img { border-color: #f4f0b4; background: #f7f5d8; }
.cuTile span { display: block; font-size: 9px; font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuHint { margin: 0; font-size: 12px; color: var(--muted); }
.cuEditor { display: flex; flex-direction: column; gap: 8px; }
.cuNose { font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.cuBoard { width: 100%; aspect-ratio: 4 / 1; border-radius: 999px; background: #d9d9d9; touch-action: none; cursor: crosshair; display: block; }
.cuTools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cuTools input[type=color] { width: 30px; height: 30px; padding: 0; border: 0; background: none; }
.cuTools input[type=range] { width: 110px; }
@media (max-width: 560px) { .cuBody.player { grid-template-columns: 84px 1fr; gap: 8px; } .cuRow { grid-template-columns: 1fr; gap: 3px; } }

/* ---------- lobby / login ---------- */
#lobbyBg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
#lobbyBg > div { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 2.2s ease; }
#lobbyBg > div.on { opacity: 1; animation: lobbyZoom 20s linear forwards; }
#lobbyBg > div.on.out { opacity: 0; }
#lobbyBg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(10,14,20,.35), rgba(10,14,20,.82)); }
@keyframes lobbyZoom { from { transform: scale(1); } to { transform: scale(1.22); } }
#overlay > .card { position: relative; z-index: 1; }
#overlay.hasBg > .card { background: rgba(16,20,27,.86); backdrop-filter: blur(6px); }
#lobby { margin: 0 0 12px; }
.lbTabs { display: flex; gap: 6px; margin-bottom: 10px; }
.lbTabs button { flex: 1; padding: 8px 4px; font: 600 12px/1 inherit; letter-spacing: .04em; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.06); color: var(--muted); cursor: pointer; }
.lbTabs button.sel { background: #f4f0b4; color: #111; border-color: #f4f0b4; }
.lbForm { display: grid; gap: 8px; margin-bottom: 8px; }
.lbForm[hidden], .lbUserRow[hidden], .lbTabs[hidden], .nameRow[hidden] { display: none; }
.lbForm input { font: inherit; font-size: 15px; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.08); color: var(--text); user-select: text; -webkit-user-select: text; }
.lbForm input:focus { outline: none; border-color: var(--accent); }
.lbForm button { padding: 9px; font: 600 14px/1 inherit; border: 0; border-radius: 8px; background: #d9d9d9; color: #111; cursor: pointer; }
.lbUserRow { margin-bottom: 8px; color: var(--muted); }
.lbUserRow b { color: var(--text); }
.lbUserRow button { margin-left: 8px; padding: 4px 8px; font: inherit; font-size: 12px; border: 1px solid var(--line); border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.lbMsg { min-height: 18px; font-size: 13px; color: var(--muted); }
.lbMsg.bad, .coMsg.bad { color: #ff8a7a; }

/* ---------- comunidad ---------- */
.coBody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; max-height: 56vh; overflow: auto; color: #e8e8e8; text-align: left; }
.coBody h3 { margin: 0 0 8px; font-size: 15px; letter-spacing: .06em; color: #f4f0b4; }
.coBody h4 { margin: 14px 0 6px; font-size: 12px; font-weight: 600; color: #9aa0a8; text-transform: uppercase; }
.coRow { display: flex; gap: 6px; margin-bottom: 8px; }
.coRow input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 8px; border-radius: 4px; border: 1px solid #555; background: rgba(255,255,255,.08); color: #fff; user-select: text; -webkit-user-select: text; }
.coRow input.coTag { flex: 0 0 64px; text-transform: uppercase; }
.pmCard .coBody button { padding: 8px 10px; font-size: 12px; }
.coList { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.coList li { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: rgba(255,255,255,.06); border-radius: 4px; font-size: 14px; }
.coList li > span:not(.coDot) { margin-left: auto; display: flex; gap: 4px; }
.coList i { font-style: normal; font-size: 12px; color: #9aa0a8; }
.coList li.coEmpty, p.coEmpty { color: #9aa0a8; font-size: 13px; background: none; }
p.coEmpty { grid-column: 1 / -1; line-height: 1.5; }
.coDot { width: 8px; height: 8px; border-radius: 50%; background: #555; flex: none; }
.coDot.on { background: #4ade80; }
.coCrew { display: grid; gap: 2px; margin-bottom: 8px; }
.coCrew span { font-size: 12px; color: #9aa0a8; }
.pmCard .coBody .coSmall { margin-top: 8px; }
.coMsg { min-height: 18px; font-size: 13px; color: #c9ccd1; }
@media (max-width: 560px) { .coBody { grid-template-columns: 1fr; } }

/* camara de fotos: visor y flash */
#photoView { position: fixed; inset: 8% 10%; z-index: 4; pointer-events: none; display: none; }
#photoView.show { display: block; }
#photoView i { position: absolute; width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.85); }
#photoView i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
#photoView i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
#photoView i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
#photoView i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
#photoFlash { position: fixed; inset: 0; z-index: 30; background: #fff; opacity: 0; pointer-events: none; }
#photoFlash.go { animation: photoFlash .35s ease-out; }
@keyframes photoFlash { from { opacity: .85; } to { opacity: 0; } }

/* galeria */
#galleryMenu { position: fixed; inset: 0; z-index: 40; display: none; place-items: center; background: rgba(10,14,20,.6); }
#galleryMenu.show { display: grid; }
#galleryMenu .card.gallery { width: min(760px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; }
#galleryMenu .line { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#galleryMenu .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }
#galleryMenu .grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; cursor: pointer; border: 1px solid var(--line); }
#galleryMenu .grid img:hover { outline: 2px solid #fff; }
#galleryMenu .big img { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 8px; margin-top: 10px; }
#galleryMenu .big .row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }

/* movil: en skate no hay agacharse; con el spray el joystick queda fijo en la esquina */
body.skating #crouchBtn { display: none; }
body.hasSpray #stickZone { width: 200px; height: 200px; left: env(safe-area-inset-left); }
body.hasSpray #stickBase { left: 100px !important; top: 100px !important; }

/* camara de video con tripode */
#galleryMenu .grid video.vid { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid #e03030; background: #000; }
#galleryMenu .big video { width: 100%; max-height: 60vh; border-radius: 8px; background: #000; }
#tripodHint { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); z-index: 4; padding: 8px 14px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--text); pointer-events: none; display: none; }
#tripodHint b { display: inline-block; padding: 1px 7px; margin-right: 6px; border-radius: 5px; background: #e03030; color: #fff; }
#tripodHint.show { display: block; }
#tripodBtn { display: none; left: 50%; top: 58%; transform: translateX(-50%); padding: 12px 18px; background: rgba(224,48,48,.85); }
#tripodBtn.show { display: block; }
#tripodMenu { position: fixed; inset: 0; z-index: 40; display: none; place-items: center; background: rgba(10,14,20,.6); }
#tripodMenu.show { display: grid; }
#tripodMenu .card.tripod { width: min(380px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 8px; }
#tripodMenu .line { display: flex; align-items: center; justify-content: space-between; }
#tripodMenu .line h2 { margin: 0; font-size: 18px; }
#tripodMenu .st { margin: 0; opacity: .8; }
#tripodMenu .row { display: flex; gap: 8px; }
#tripodMenu .row button { flex: 1; }
#tripodMenu button.recording { background: #e03030; color: #fff; }

/* galeria: pestañas y envio a jugadores */
#galleryMenu .tabs { display: flex; gap: 6px; margin-top: 8px; }
#galleryMenu .tab { flex: 1; opacity: .6; }
#galleryMenu .tab.on { opacity: 1; outline: 2px solid #fff; }
#galleryMenu .peers { margin-top: 10px; }
#galleryMenu .plist { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow: auto; }


/* =====================================================================
   REDISEÑO DE INTERFACES (v23): tipografía, plano de metro, menú de pausa,
   paneles, polaroids de la galería y pestaña TAG. Solo se añaden reglas que
   sobrescriben a las anteriores.
   ===================================================================== */
:root {
  --ui-bg: rgba(14, 16, 22, .9);
  --ui-bg2: rgba(255, 255, 255, .055);
  --ui-bg3: rgba(255, 255, 255, .1);
  --ui-line: rgba(255, 255, 255, .1);
  --ui-radius: 14px;
  --metro: #1f5fe0;
  --gold: #ffd21f;
  --paper: #fbfaf6;
}
html, body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.card { border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.card h1, .card h2 { font-weight: 800; }

/* ---------- plano de metro (Línea 1 · Viajar) ---------- */
#travelMenu { background: radial-gradient(ellipse at center, rgba(10,14,20,.45), rgba(10,14,20,.8)); backdrop-filter: blur(3px); }
#travelMenu .card.travel.metro { width: min(720px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: hidden auto; padding: 0; background: #f4f2ec; color: #16181d; border: 0; border-radius: 16px; text-align: left; }
.metro .mHead { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 18px; background: var(--metro); color: #fff; }
.metro .mBadge { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--metro); font: 800 24px/1 Inter, sans-serif; box-shadow: inset 0 0 0 3px rgba(31,95,224,.18); }
.metro .mTitle { flex: none; }
.metro .mTitle small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.metro .mTitle h2 { margin: 0; font-size: 22px; letter-spacing: .01em; }
.metro .mDir { flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; opacity: .9; min-width: 0; }
.metro .mDir span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metro .mDir i { font-style: normal; opacity: .7; }
#travelMenu #travelClose { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 15px; }
#travelMenu #travelClose:hover { background: rgba(255,255,255,.32); }
.metro .mMap { padding: 34px 22px 18px; overflow-x: auto; scrollbar-width: thin;
  background-image: radial-gradient(rgba(0,0,0,.06) 1px, transparent 1px); background-size: 14px 14px; }
#travelMenu #travelList { display: flex; list-style: none; margin: 0; padding: 0; border-left: none; }
#travelMenu #travelList li { flex: 1; min-width: 92px; position: relative; margin: 0; }
#travelMenu #travelList li::before { content: ''; position: absolute; left: 0; right: 0; top: 40px; height: 10px; margin-top: -5px; background: var(--metro); }
#travelMenu #travelList li:first-child::before { left: 50%; border-radius: 5px 0 0 5px; }
#travelMenu #travelList li.soon::before { right: 50%; background: repeating-linear-gradient(90deg, var(--metro) 0 10px, transparent 10px 18px); }
#travelMenu #travelList li:only-child::before { display: none; }
#travelMenu #travelList button { width: auto; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 4px 4px; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; position: relative; }
#travelMenu #travelList button:not(:disabled):hover { background: none; border: 0; }
#travelMenu #travelList button:disabled { opacity: 1; cursor: default; }
#travelMenu #travelList button:focus-visible { outline: 2px solid var(--metro); outline-offset: 4px; border-radius: 8px; }
#travelMenu #travelList .k { height: 18px; min-width: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 4px; background: #e2dfd6; color: #555; font-size: 10.5px; font-weight: 700; margin-bottom: 10px; }
#travelMenu #travelList .o { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 6px solid var(--metro); transition: transform .15s ease; }
#travelMenu #travelList .nm { margin-top: 10px; font-size: 13px; font-weight: 700; line-height: 1.2; max-width: 120px; color: #16181d; }
/* el antiguo .here era una píldora rosa: ahora la clase está en el <li> */
#travelMenu #travelList li.here { font-size: inherit; color: inherit; background: none; padding: 0; border-radius: 0; }
#travelMenu #travelList li.here .o { background: var(--metro); border-color: #fff; box-shadow: 0 0 0 3px var(--metro); animation: mPulse 1.8s ease-out infinite; }
@keyframes mPulse { 0% { box-shadow: 0 0 0 3px var(--metro), 0 0 0 3px rgba(31,95,224,.45); } 100% { box-shadow: 0 0 0 3px var(--metro), 0 0 0 16px rgba(31,95,224,0); } }
#travelMenu #travelList .pin { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 8px; border-radius: 99px; background: #e8262c; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 3px 8px rgba(232,38,44,.35); }
#travelMenu #travelList .pin::after { content: ''; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: #e8262c; }
#travelMenu #travelList li.st:not(.here) button:hover .o, #travelMenu #travelList li.sel .o { transform: scale(1.25); }
#travelMenu #travelList li.sel .nm { color: var(--metro); }
#travelMenu #travelList li.sel .k { background: var(--metro); color: #fff; }
#travelMenu #travelList li.soon { opacity: .55; }
#travelMenu #travelList li.soon .o { border-style: dashed; border-width: 4px; }
#travelMenu #travelList li.soon .nm { font-weight: 600; font-style: italic; }
.metro .mInfo { display: grid; grid-template-columns: 168px 1fr auto; gap: 16px; align-items: center; margin: 0 18px 16px; padding: 12px; background: #fff; border-radius: 12px; border-left: 6px solid var(--metro); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.metro .mPic { width: 168px; height: 94px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #c9d3e6, #8c9bb8); }
.metro .mPic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.metro .mPic.none img { display: none; }
.metro .mTxt { min-width: 0; }
.metro .mStop { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--metro); }
.metro .mTxt h3 { margin: 2px 0 4px; font-size: 19px; font-weight: 800; }
.metro .mTxt p { margin: 0; font-size: 13px; color: #555b66; line-height: 1.4; }
/* gente en linea en cada mapa (menus de tren y bus) */
.metro .mOnline { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 700; color: #8a909b; }
.metro .mOnline i { width: 8px; height: 8px; border-radius: 50%; background: #b9bec7; }
.metro .mOnline.on { color: #1f9d55; }
.metro .mOnline.on i { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.22); }
.metro .mMap .cnt { display: block; margin-top: 3px; min-height: 14px; font-size: 11px; font-weight: 800; color: #1f9d55; }
.metro .mGo { padding: 12px 18px; border: 0; border-radius: 10px; background: var(--metro); color: #fff; font: 700 14px/1 Inter, sans-serif; cursor: pointer; white-space: nowrap; box-shadow: 0 6px 14px rgba(31,95,224,.3); transition: transform .12s, background .12s; }
.metro .mGo:hover:not(:disabled) { background: #174bb6; transform: translateY(-1px); }
.metro .mGo:disabled { background: #d8d6cf; color: #777; box-shadow: none; cursor: default; }
.metro .hint { margin: 0; padding: 0 18px 14px; color: #6d717a; }
.metro .hint b { display: inline-block; padding: 0 5px; border-radius: 4px; background: #e2dfd6; color: #333; font-size: 11px; }
@media (max-width: 560px) {
  .metro .mDir { display: none; }
  .metro .mHead { justify-content: space-between; }
  .metro .mInfo { grid-template-columns: 1fr; gap: 10px; }
  .metro .mPic { width: 100%; height: 120px; }
  .metro .mGo { width: 100%; }
  .metro .mMap { padding: 34px 10px 14px; }
  #travelMenu #travelList li { min-width: 84px; }
}

/* ---------- menú de pausa ---------- */
#pauseMenu { background:
  radial-gradient(600px 400px at 12% 15%, rgba(255,61,127,.22), transparent 70%),
  radial-gradient(520px 380px at 88% 90%, rgba(255,210,31,.14), transparent 70%),
  linear-gradient(160deg, rgba(8,10,16,.78), rgba(8,10,16,.9));
  backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); padding: 16px 0; }
#pauseMenu.show .pmCard:not([hidden]) { animation: pmIn .22s ease-out; }
@keyframes pmIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.pmCard.pmMain { width: min(420px, calc(100vw - 28px)); gap: 0; padding: 22px; border-radius: 20px; background: linear-gradient(180deg, rgba(26,28,36,.92), rgba(16,18,24,.94)); border: 1px solid var(--ui-line); box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06); }
.pmBrand { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 2px 10px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 1px solid var(--ui-line); }
.pmLogo { font: 34px/1 "Permanent Marker", cursive; color: #fff; letter-spacing: .01em; transform: rotate(-2deg); transform-origin: left; text-shadow: 3px 3px 0 var(--accent); }
.pmLogo span { display: inline-block; margin-left: 8px; padding: 3px 7px 2px; font: 800 11px/1 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #111; background: var(--gold); border-radius: 4px; vertical-align: 8px; text-shadow: none; transform: rotate(2deg); }
.pmMeta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.pmMeta span:empty { display: none; }
.pmMapName::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2.5px var(--metro); vertical-align: -1px; }
.pmWho { color: var(--text); font-weight: 600; }
.pmWho::before { content: '●'; color: #3ddc84; font-size: 9px; margin-right: 6px; vertical-align: 2px; }
.pmPaused { grid-column: 2; grid-row: 1; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid var(--ui-line); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pmNav { display: flex; flex-direction: column; gap: 6px; }
body.home .pmNav [data-act="lobby"] { display: none; }   /* ya en el lobby */
.pmCard .pmNav button { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; text-align: left; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--text); font: 600 15px/1.2 Inter, sans-serif; letter-spacing: 0; transition: background .12s, border-color .12s, transform .12s; }
.pmCard .pmNav button:hover, .pmCard .pmNav button:focus-visible { background: var(--ui-bg3); border-color: var(--ui-line); outline: none; transform: translateX(2px); }
.pmNav i { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.07); color: #dfe3ea; transition: background .12s, color .12s; }
.pmNav i svg { width: 20px; height: 20px; }
.pmCard .pmNav button:hover i { background: rgba(255,61,127,.18); color: var(--accent); }
.pmNav span { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pmNav b { font-weight: 700; font-size: 15px; }
.pmNav em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--muted); }
.pmNav kbd { padding: 3px 7px; border-radius: 6px; border: 1px solid var(--ui-line); border-bottom-width: 2px; font: 600 11px/1 Inter, sans-serif; color: var(--muted); }
.pmNav s { text-decoration: none; font-size: 22px; line-height: 1; color: #5d636d; transition: color .12s, transform .12s; }
.pmCard .pmNav button:hover s { color: var(--text); transform: translateX(2px); }
.pmCard .pmNav button.pmPrimary { margin-bottom: 6px; padding: 13px 14px; background: linear-gradient(135deg, #ff3d7f, #ff6a4d); color: #fff; box-shadow: 0 10px 24px rgba(255,61,127,.32); }
.pmCard .pmNav button.pmPrimary:hover { background: linear-gradient(135deg, #ff5590, #ff7a5e); border-color: transparent; }
.pmNav .pmPrimary i, .pmCard .pmNav button.pmPrimary:hover i { background: rgba(255,255,255,.22); color: #fff; }
.pmNav .pmPrimary em { color: rgba(255,255,255,.82); }
.pmNav .pmPrimary kbd { color: #fff; border-color: rgba(255,255,255,.4); }
.pmCard .pmNav button[data-act=exit] b { color: #ff9b9b; }
.pmCard .pmNav button[data-act=exit]:hover i { background: rgba(255,90,90,.16); color: #ff7b7b; }
.pmTip { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(255,210,31,.07); border: 1px dashed rgba(255,210,31,.25); font-size: 12.5px; line-height: 1.45; color: #cfd3da; }
.pmTip > b:first-child { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 4px; background: var(--gold); color: #111; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.pmTip b { color: #fff; }

/* ---------- botones y páginas de la pausa (tienda, personalizar, ajustes...) ---------- */
.pmCard button { padding: 12px 14px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-bg2); color: var(--text); font: 600 14px/1.1 Inter, sans-serif; letter-spacing: .02em; transition: background .12s, border-color .12s, color .12s; }
.pmCard button:hover { background: var(--ui-bg3); border-color: rgba(255,255,255,.2); }
.pmCard button.sel { background: rgba(255,61,127,.16); border-color: var(--accent); color: #fff; }
.pmCard button[data-act=back] { align-self: flex-start; padding: 9px 14px; background: transparent; color: var(--muted); }
.pmCard button[data-act=back]::before { content: '← '; }
.pmCard button[data-act=back]:hover { color: var(--text); background: var(--ui-bg2); }
.pmPage { width: min(480px, calc(100vw - 28px)); padding: 20px 22px; border-radius: 20px; background: linear-gradient(180deg, rgba(26,28,36,.94), rgba(16,18,24,.96)); border: 1px solid var(--ui-line); box-shadow: 0 30px 80px rgba(0,0,0,.55); }
.pmPage.pmWide { width: min(800px, calc(100vw - 28px)); }
.pmPage h2 { text-align: left; font-size: 20px; letter-spacing: .04em; }
.shopHead { align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ui-line); }
.shopHead h2 { font-size: 20px; font-weight: 800; letter-spacing: .04em; }
.shopHead h2::before { content: ''; display: inline-block; width: 6px; height: 18px; margin-right: 10px; border-radius: 3px; background: var(--accent); vertical-align: -2px; }
.shopCredits { padding: 5px 10px; border-radius: 99px; background: rgba(255,210,31,.1); border: 1px solid rgba(255,210,31,.3); font-size: 13px; }
.pmSub { font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.pmRow { padding: 10px 12px; border-radius: 10px; background: var(--ui-bg2); }
.pmRow select { padding: 7px 10px; border-radius: 8px; border-color: var(--ui-line); background: #1c2029; font: 500 13px Inter, sans-serif; }
#pmControls #help { padding: 10px 12px; border-radius: 10px; background: var(--ui-bg2); }
.pmCard .shopCats button { border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.pmCard .shopCats button.sel { background: rgba(255,61,127,.16); }
/* pestañas de la tienda: slider horizontal arriba (se desliza si no caben) */
.shopTabs { display: flex; gap: 6px; margin: 12px -6px; padding: 6px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-x; --fl: 0px; --fr: 0px; mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); }
.shopTabs.moreL { --fl: 34px; }
.shopTabs.moreR { --fr: 46px; }
.shopTabs::-webkit-scrollbar { display: none; }
.shopTabs.drag { cursor: grabbing; scroll-behavior: auto; }
.shopTabs.drag button { pointer-events: none; }
.pmCard .shopTabs button { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 9px 20px 9px 16px; border-radius: 99px; border: 2px solid transparent; background: none; color: #b9bec8; font-size: 15px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; transition: color .15s, border-color .15s, box-shadow .15s, background .15s; }
.pmCard .shopTabs button svg { width: 24px; height: 24px; flex: none; }
.pmCard .shopTabs button:hover { color: #eef0f4; background: rgba(255,255,255,.04); }
.pmCard .shopTabs button.sel { color: #fff; border-color: #ff4f8b; background: rgba(255,61,127,.08); box-shadow: 0 0 14px rgba(255,61,127,.55), inset 0 0 10px rgba(255,61,127,.28); }
.pmCard .shopTabs button.sel svg { color: #ff8fb4; filter: drop-shadow(0 0 3px rgba(255,61,127,.6)); }
.shopOne .shopBody { grid-template-columns: 1fr; }
.shopOne .shopCats { display: none; }
.shopSoon { grid-column: 1 / -1; margin: 30px 0; text-align: center; color: var(--muted); font-weight: 700; letter-spacing: .08em; }
.shopThumb { border-radius: 12px; background: linear-gradient(160deg, #e9e7e1, #cfccc4); border: 2px solid transparent; transition: transform .12s, border-color .12s; }
.shopItem:hover .shopThumb { background: linear-gradient(160deg, #f4f2ec, #dcd9d1); transform: translateY(-2px); }
.shopItem.sel .shopThumb { border-color: var(--accent); background: linear-gradient(160deg, #fff, #ece9e1); box-shadow: 0 0 0 3px rgba(255,61,127,.25); }
.shopName { font-weight: 600; color: #d8dce3; }
.shopFoot { padding-top: 10px; border-top: 1px solid var(--ui-line); }
.pmCard .shopBuy { padding: 11px 18px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #ffd21f, #ffb11f); color: #1a1406; font-weight: 800; box-shadow: 0 6px 16px rgba(255,190,31,.25); }
.pmCard .shopBuy:hover:not(:disabled) { background: linear-gradient(135deg, #ffe04f, #ffc04f); }
.pmCard .shopBuy:disabled { background: rgba(255,255,255,.08); color: #6b707a; box-shadow: none; }
.cuTabs { grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 12px; background: rgba(0,0,0,.25); gap: 4px; }
.cuTabs.cuSides { grid-template-columns: 1fr 1fr; }
.cuTabs:not(.cuSides):has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
.pmCard .cuTabs:has(> :nth-child(4)) button { padding: 9px 2px; letter-spacing: .04em; }
.pmCard .cuTabs button { padding: 9px 8px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.pmCard .cuTabs button:hover { color: var(--text); background: rgba(255,255,255,.05); }
.pmCard .cuTabs button.sel { background: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(255,61,127,.3); }
.cuPreview { border-radius: 12px; background: linear-gradient(160deg, #e9e7e1, #cfccc4); }
.cuSw.sel { border-color: #fff; box-shadow: 0 0 0 2px var(--accent); }
.pmCard .cuChip { padding: 7px 11px; border-radius: 8px; font-size: 12px; }
.pmCard .cuChip.sel { background: rgba(255,61,127,.16); }
.cuTile canvas, .cuTile img { border-radius: 10px; border-width: 2px; }
.cuTile.sel canvas, .cuTile.sel img { border-color: var(--accent); background: #fff; }
.cuBoard { background: #e9e7e1; }

/* ---------- inventario, salas y otras ventanas ---------- */
#invMenu, #roomMenu, #galleryMenu, #tripodMenu { background: radial-gradient(ellipse at center, rgba(10,14,20,.5), rgba(10,14,20,.82)); backdrop-filter: blur(4px); }
.card.inv, .card.rooms, #galleryMenu .card.gallery, #tripodMenu .card.tripod { background: linear-gradient(180deg, rgba(26,28,36,.95), rgba(16,18,24,.97)); border-color: var(--ui-line); border-radius: 20px; padding: 20px; }
.card.inv .line h2, .rooms .line h2, #galleryMenu .line h2, #tripodMenu .line h2 { font-size: 19px; font-weight: 800; letter-spacing: .02em; }
.card.inv .line button, .rooms button, #galleryMenu button, #tripodMenu button { border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-bg2); color: var(--text); font: 600 13.5px/1.1 Inter, sans-serif; padding: 9px 13px; cursor: pointer; transition: background .12s, border-color .12s; }
.card.inv .line button:hover, .rooms button:hover:not(:disabled), #galleryMenu button:hover, #tripodMenu button:hover { background: var(--ui-bg3); border-color: rgba(255,255,255,.2); }
#roomClose, #galleryMenu .x { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
.rooms button.primary { background: linear-gradient(135deg, #ff3d7f, #ff6a4d); border-color: transparent; }
.rooms input { border-radius: 10px; border-color: var(--ui-line); background: rgba(255,255,255,.06); }
#invGrid .slot { border-radius: 14px; border-color: var(--ui-line); background: var(--ui-bg2); transition: transform .12s, border-color .12s; }
#invGrid .slot:not(.empty):hover { transform: translateY(-2px); border-color: rgba(255,255,255,.22); }
#invGrid .slot.on { border-color: var(--accent); background: rgba(255,61,127,.12); box-shadow: 0 0 0 3px rgba(255,61,127,.18); }
#invGrid .slot button { border: 0; border-radius: 8px; background: var(--accent); }
#tripodMenu button.recording { background: #e03030; border-color: #e03030; }

/* ---------- HUD ---------- */
#pauseBtn, #credits, #roomBtn { background: rgba(16,18,24,.78); border-color: var(--ui-line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0,0,0,.3); }
#pauseBtn { border-radius: 12px; transition: background .12s, transform .12s; }
#pauseBtn:hover { background: rgba(40,44,54,.9); transform: translateY(-1px); }
#credits { border-radius: 12px; gap: 6px; font-family: Inter, sans-serif; letter-spacing: .02em; }
#roomBtn { font-family: Inter, sans-serif; }
#travelHint, #tripodHint, #unlockHint { border-radius: 10px; background: rgba(16,18,24,.85); border-color: var(--ui-line); backdrop-filter: blur(6px); box-shadow: 0 8px 20px rgba(0,0,0,.35); font-weight: 500; }

/* ---------- galería: polaroids ---------- */
#galleryMenu .card.gallery { width: min(820px, calc(100% - 24px)); }
#galleryMenu .tabs { padding: 4px; border-radius: 12px; background: rgba(0,0,0,.25); gap: 4px; margin-top: 12px; }
#galleryMenu .tab { opacity: 1; border: 0; background: transparent; color: var(--muted); }
#galleryMenu .tab.on { outline: none; background: var(--accent); color: #fff; }
#galleryMenu .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px 14px; margin-top: 16px; padding: 4px 4px 10px; }
.pol { margin: 0; padding: 6% 6% 0; background: var(--paper); border-radius: 3px; box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 8px 18px rgba(0,0,0,.35); transform: rotate(var(--rot, 0deg)); transition: transform .18s ease, box-shadow .18s ease; color: #1b1d22; }
#galleryMenu .grid .pol { cursor: pointer; }
#galleryMenu .grid .pol:hover { transform: rotate(0deg) translateY(-4px) scale(1.03); box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 16px 30px rgba(0,0,0,.45); z-index: 1; position: relative; }
.pol .polPh { position: relative; overflow: hidden; background: #111; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
#galleryMenu .grid .pol .polPh img, #galleryMenu .grid .pol .polPh video, .pol .polPh img, .pol .polPh video, .pol .polPh canvas { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 0; border-radius: 0; outline: 0; background: #111; margin: 0; }
#galleryMenu .grid .pol .polPh img:hover { outline: 0; }
.pol figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 2.9em; padding: 4% 2% 5%; }
.pol .polTag { display: block; max-height: 34px; max-width: 70%; object-fit: contain; }
.pol .polName { font: 15px/1 "Permanent Marker", cursive; color: #1b1d22; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pol time { flex: none; margin-left: auto; font: 11.5px/1 "Permanent Marker", cursive; color: #6b6e75; }
.pol.isVid .polPh::after { content: '▶'; position: absolute; left: 8px; top: 8px; padding: 3px 7px; border-radius: 4px; background: #e03030; color: #fff; font: 700 10px/1 Inter, sans-serif; pointer-events: none; }
.pol.isVid { box-shadow: 0 0 0 2px rgba(224,48,48,.6), 0 8px 18px rgba(0,0,0,.35); }
#galleryMenu .big { margin-top: 14px; }
.pol.polBig { --rot: 0deg; max-width: 640px; margin: 0 auto; padding: 18px 18px 0; }
.pol.polBig .polPh img, #galleryMenu .big .pol .polPh img { width: 100%; height: auto; aspect-ratio: auto; max-height: 60vh; object-fit: contain; margin: 0; border-radius: 0; }
#galleryMenu .big .pol .polPh video { width: 100%; height: auto; aspect-ratio: auto; max-height: 60vh; object-fit: contain; border-radius: 0; }
.pol.polBig figcaption { padding: 14px 4px 18px; min-height: 64px; }
.pol.polBig .polTag { max-height: 48px; }
.pol.polBig .polName { font-size: 22px; }
.pol.polBig time { font-size: 15px; }
#galleryMenu .big .row { margin-top: 16px; }
#galleryMenu .big .row .share { background: var(--accent); border-color: transparent; color: #fff; }
#galleryMenu .big .row .rm:hover { border-color: #ff6b6b; color: #ff9b9b; }

/* ---------- personalizar: pestaña TAG ---------- */
.tgWrap { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 18px; align-items: start; }
.tgEdit { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tgPad { position: relative; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 8px 20px rgba(0,0,0,.25); overflow: hidden;
  background-image: linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size: 100% 22px; }
.tgCanvas { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 3 / 1; touch-action: none; cursor: crosshair; }
.tgLine { position: absolute; left: 7%; right: 7%; top: 74%; border-top: 2px dashed rgba(0,0,0,.2); pointer-events: none; }
.tgX { position: absolute; left: 3.5%; top: 74%; transform: translateY(-80%); font-size: 16px; font-weight: 700; color: rgba(0,0,0,.3); pointer-events: none; }
.tgEdit .cuTools input[type=range] { accent-color: var(--accent); }
.tgSide { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 0; }
.tgLbl { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
.pol.tgPreview { --rot: -2deg; padding: 7% 7% 0; }
.pol.tgPreview .polTag { max-height: 38px; }
@media (max-width: 640px) {
  .tgWrap { grid-template-columns: 1fr; }
  .tgSide { position: static; max-width: 260px; margin: 0 auto; width: 100%; }
}
@media (max-width: 560px) {
  .pmCard.pmMain { padding: 18px 16px; }
  .pmLogo { font-size: 28px; }
  .pmCard .pmNav button { padding: 8px 10px; }
  .pmNav i { width: 34px; height: 34px; }
  .pmNav em { display: none; }
  #galleryMenu .grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  .pol figcaption { min-height: 2.4em; }
  .pol .polName { font-size: 12px; }
  .pol time { font-size: 10px; }
  .pol .polTag { max-height: 24px; }
}

/* centrado seguro: si la ventana es baja, la tarjeta no se corta por arriba y se puede desplazar */
#pauseMenu.show { display: flex; flex-direction: column; align-items: center; }
#pauseMenu .pmCard { margin: auto; flex: none; }
#travelMenu.show { overflow-y: auto; padding: 12px 0; }
#travelMenu .card.travel.metro { margin: auto; max-height: none; }
/* pantalla de inicio */
.lbTabs { padding: 4px; border-radius: 12px; background: rgba(0,0,0,.28); gap: 4px; }
.lbTabs button { border: 0; border-radius: 9px; background: transparent; font-family: Inter, sans-serif; font-weight: 700; transition: background .12s, color .12s; }
.lbTabs button:hover { color: var(--text); background: rgba(255,255,255,.05); }
.lbTabs button.sel { background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(255,61,127,.3); }
/* vista ampliada: la firma no debe heredar el tamaño de la foto (#galleryMenu .big img) y la foto sin bandas negras */
#galleryMenu .big .pol .polTag { width: auto; height: auto; max-width: 70%; max-height: 48px; margin: 0; border: 0; border-radius: 0; background: none; object-fit: contain; }
#galleryMenu .big .pol.polBig { width: fit-content; max-width: 100%; }
#galleryMenu .big .pol .polPh { background: transparent; display: flex; justify-content: center; }
#galleryMenu .big .pol .polPh img, #galleryMenu .big .pol .polPh video { width: auto; max-width: 100%; max-height: min(60vh, 520px); background: transparent; }
@media (max-width: 560px) { #travelMenu #travelList li { min-width: 76px; } #travelMenu #travelList .nm { font-size: 12px; } }

/* ---- Selector de color en pestañas RUEDA / PALETA / HISTORIAL (mismo hueco) ---- */
.cTabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 3px; margin-bottom: 8px; border-radius: 10px; background: var(--ui-bg2, rgba(255,255,255,.06)); border: 1px solid var(--ui-line, rgba(255,255,255,.1)); }
.cTabs button { padding: 6px 0; border: 0; border-radius: 7px; background: transparent; color: var(--muted, #9aa0a9); font: 700 10.5px/1 Inter, system-ui, sans-serif; letter-spacing: .06em; cursor: pointer; transition: background .12s, color .12s; }
.cTabs button:hover { color: #fff; }
.cTabs button.sel { background: var(--metro, #1f5fe0); color: #fff; box-shadow: 0 2px 8px rgba(31,95,224,.35); }
.cSecs { min-height: 172px; }
.cSec[hidden] { display: none !important; }
.cSec .palHead:first-child { margin-top: 0; }
#recent .sw { position: relative; }

/* ---------- deshacer trazo (24) ---------- */
#undoStroke { margin-top: 10px; width: 100%; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); cursor: pointer; font: inherit; display: flex; align-items: center; justify-content: center; gap: 8px; }
#undoStroke:hover:not(:disabled) { background: rgba(31,95,224,.3); }
#undoStroke:disabled, #undoBtn:disabled { opacity: .45; cursor: default; }
#undoStroke .n:not(:empty), #undoBtn .n:not(:empty) { min-width: 18px; padding: 1px 6px; border-radius: 9px; background: var(--metro, #1f5fe0); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; }
#undoStroke + #clearMine { margin-top: 6px; }
#undoBtn { display: none; right: max(18px, env(safe-area-inset-right)); bottom: 196px; padding: 10px 14px; font-size: 18px; align-items: center; gap: 6px; }
body.touch.paintmode #undoBtn { display: flex; }

/* ---------- goma de borrar, ocultar grafitis de otros, votar expulsion y chat ---------- */
#eraserBtn, #hideOthersBtn { margin-top: 8px; width: 100%; padding: 7px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; }
#eraserBtn.on, #hideOthersBtn.on, #eraserTBtn.on { color: var(--text); border-color: var(--accent); background: rgba(255,61,127,.22); }
#hideOthersBtn .n:not(:empty) { min-width: 18px; padding: 1px 6px; border-radius: 9px; background: rgba(255,255,255,.16); color: var(--text); font-size: 11px; font-weight: 700; line-height: 16px; }
#hideBox { display: none; margin-top: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.18); }
#hideBox.show { display: block; }
#hideBox .check { margin: 0 0 6px; font-size: 12px; }
#painterList { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow-y: auto; scrollbar-width: thin; }
#painterList.off { opacity: .5; }
#painterList li { border-top: 1px solid rgba(255,255,255,.06); }
#painterList li.empty { color: var(--muted); font-size: 12px; padding: 4px 0; border: none; }
#painterList label { display: flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 12px; cursor: pointer; }
#painterList input { accent-color: var(--accent); margin: 0; }
#painterList i { width: 7px; height: 7px; border-radius: 50%; background: #5b626b; flex: none; }
#painterList i.on { background: #3ddc84; box-shadow: 0 0 6px #3ddc84; }
#painterList b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
#painterList em { font-style: normal; color: var(--muted); font-size: 10px; }
body.erasing #ring { border-color: #fff; border-style: dashed; }
#eraserTBtn { display: none; right: max(18px, env(safe-area-inset-right)); bottom: 252px; padding: 10px 14px; font-size: 18px; }
body.touch.paintmode #eraserTBtn { display: flex; }

#roomKick { list-style: none; margin: 8px 0 0; padding: 0; max-height: 26vh; overflow: auto; }
#roomKick li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
#roomKick li.empty { color: var(--muted); font-size: 13px; border: none; }
#roomKick .t { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#roomKick .t em { font-style: normal; color: var(--muted); font-size: 12px; }
#roomKick button { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; }
#roomKick button:hover { background: rgba(255,61,127,.25); }
#roomKick button.on { border-color: var(--accent); background: rgba(255,61,127,.3); }

#chatBox { position: fixed; left: 12px; bottom: 62px; z-index: 6; width: min(340px, calc(100vw - 24px)); font-family: Inter, sans-serif; font-size: 12px; color: var(--text); pointer-events: none; }
#chatBox > * { pointer-events: auto; }
#chatBox .tabs { display: flex; gap: 4px; }
#chatBox .tabs button { padding: 4px 9px; border-radius: 8px 8px 0 0; border: 1px solid var(--ui-line, var(--line)); border-bottom: none; background: rgba(16,18,24,.7); color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; display: flex; align-items: center; gap: 4px; }
#chatBox .tabs button.sel { color: var(--text); background: rgba(16,18,24,.88); border-color: var(--accent); }
#chatBox .tabs .n:not(:empty) { min-width: 15px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; text-align: center; }
#chatMin { margin-left: auto; }
#chatLog { height: clamp(60px, calc(100vh - 230px), 150px); overflow-y: auto; padding: 6px 8px; background: rgba(16,18,24,.62); border: 1px solid var(--ui-line, var(--line)); border-radius: 0 8px 0 0; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); scrollbar-width: thin; overflow-wrap: anywhere; }
#chatLog p { margin: 0 0 3px; line-height: 1.35; }
#chatLog p.sys { color: var(--muted); font-style: italic; }
#chatLog p.mine .who { color: var(--accent); }
#chatLog .ts { color: var(--muted); font-size: 10px; margin-right: 5px; }
#chatLog .map { color: #8fb4ff; font-size: 10px; margin-right: 5px; }
#chatLog .map::before { content: '['; } #chatLog .map::after { content: ']'; }
#chatLog .who { cursor: pointer; font-weight: 700; }
#chatLog .who:hover { text-decoration: underline; }
#chatLog .to { color: var(--muted); }
#chatForm { display: flex; gap: 4px; padding: 4px; background: rgba(16,18,24,.85); border: 1px solid var(--ui-line, var(--line)); border-top: none; border-radius: 0 0 8px 8px; }
#chatTo { display: none; max-width: 110px; border-radius: 6px; border: 1px solid var(--line); background: #1a1d24; color: var(--text); font: inherit; font-size: 12px; }
#chatBox.priv #chatTo { display: block; }
#chatIn { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: rgba(255,255,255,.07); color: var(--text); font: inherit; font-size: 12px; outline: none; }
#chatIn:focus { border-color: var(--accent); background: rgba(255,255,255,.12); }
#chatBox .hint { margin: 3px 0 0 2px; font-size: 10px; color: var(--muted); opacity: 0; transition: opacity .15s; }
#chatBox.typing .hint { opacity: 1; }
#chatBox:not(.open) #chatLog, #chatBox:not(.open) #chatForm, #chatBox:not(.open) .hint { display: none; }
#chatBox:not(.open) #chatMin { transform: rotate(180deg); }
/* mientras no escribes el chat se aparta un poco para no tapar la escena */
body:not(.touch) #chatBox:not(.typing):not(:hover) #chatLog { background: rgba(16,18,24,.38); }
#chatBtn { position: fixed; left: 12px; top: calc(30vh + 50px); z-index: 6; height: 40px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--ui-line, var(--line)); background: rgba(16,18,24,.78); color: var(--text); font-size: 17px; cursor: pointer; display: none; align-items: center; gap: 4px; }
body.touch #chatBtn { display: flex; }
#chatBtn .n:not(:empty) { min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; }
body.touch #chatBox { display: none; bottom: auto; top: calc(30vh + 98px); width: min(320px, calc(100vw - 120px)); }
body.touch #chatBox.open { display: block; }
body.touch #chatLog { height: 130px; }


/* ---------- parada de bus (Línea B1 · Viajar en bus): mismo plano que el metro, en verde ---------- */
#busHint { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); z-index: 4; padding: 8px 14px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--text); pointer-events: none; display: none; }
#busHint b { display: inline-block; min-width: 18px; padding: 1px 6px; margin-right: 6px; border-radius: 5px; background: #1f5fe0; color: #fff; text-align: center; }
#busHint.show { display: block; }
#busBtn { display: none; left: 50%; top: 58%; transform: translateX(-50%); padding: 12px 18px; background: rgba(31,95,224,.8); }
#busBtn.show { display: block; }
#busMenu { position: fixed; inset: 0; z-index: 12; display: none; place-items: center; background: rgba(10,14,20,.6); }
#busMenu.show { display: grid; }
#busClose { border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font: inherit; }
#busList { list-style: none; margin: 0; padding: 0 0 0 6px; border-left: 4px solid #1f5fe0; }
#busList li { margin: 0 0 8px; }
#busList button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
#busList button:not(:disabled):hover { border-color: #1f5fe0; background: rgba(31,95,224,.25); }
#busList button:disabled { cursor: default; opacity: .75; }
#busList .n { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #1f5fe0; color: #fff; font-weight: 700; font-size: 13px; }
#busList .t { flex: 1; display: flex; flex-direction: column; }
#busList .t em { font-style: normal; color: var(--muted); font-size: 12.5px; }
#busList .here { font-size: 12px; color: #fff; background: var(--accent); padding: 2px 8px; border-radius: 99px; }
#busMenu { background: radial-gradient(ellipse at center, rgba(10,14,20,.45), rgba(10,14,20,.8)); backdrop-filter: blur(3px); }
#busMenu .card.travel.metro { width: min(720px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: hidden auto; padding: 0; background: #f4f2ec; color: #16181d; border: 0; border-radius: 16px; text-align: left; }
#busMenu #busClose { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.18); color: #fff; font-size: 15px; }
#busMenu #busClose:hover { background: rgba(255,255,255,.32); }
#busMenu #busList { display: flex; list-style: none; margin: 0; padding: 0; border-left: none; }
#busMenu #busList li { flex: 1; min-width: 92px; position: relative; margin: 0; }
#busMenu #busList li::before { content: ''; position: absolute; left: 0; right: 0; top: 40px; height: 10px; margin-top: -5px; background: var(--metro); }
#busMenu #busList li:first-child::before { left: 50%; border-radius: 5px 0 0 5px; }
#busMenu #busList li.soon::before { right: 50%; background: repeating-linear-gradient(90deg, var(--metro) 0 10px, transparent 10px 18px); }
#busMenu #busList li:only-child::before { display: none; }
#busMenu #busList button { width: auto; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 4px 4px; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; position: relative; }
#busMenu #busList button:not(:disabled):hover { background: none; border: 0; }
#busMenu #busList button:disabled { opacity: 1; cursor: default; }
#busMenu #busList button:focus-visible { outline: 2px solid var(--metro); outline-offset: 4px; border-radius: 8px; }
#busMenu #busList .k { height: 18px; min-width: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 4px; background: #e2dfd6; color: #555; font-size: 10.5px; font-weight: 700; margin-bottom: 10px; }
#busMenu #busList .o { position: relative; z-index: 1; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 6px solid var(--metro); transition: transform .15s ease; }
#busMenu #busList .nm { margin-top: 10px; font-size: 13px; font-weight: 700; line-height: 1.2; max-width: 120px; color: #16181d; }
#busMenu #busList li.here { font-size: inherit; color: inherit; background: none; padding: 0; border-radius: 0; }
#busMenu #busList li.here .o { background: var(--metro); border-color: #fff; box-shadow: 0 0 0 3px var(--metro); animation: mPulse 1.8s ease-out infinite; }
#busMenu #busList .pin { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 8px; border-radius: 99px; background: #e8262c; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 3px 8px rgba(232,38,44,.35); }
#busMenu #busList .pin::after { content: ''; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: #e8262c; }
#busMenu #busList li.st:not(.here) button:hover .o, #busMenu #busList li.sel .o { transform: scale(1.25); }
#busMenu #busList li.sel .nm { color: var(--metro); }
#busMenu #busList li.sel .k { background: var(--metro); color: #fff; }
#busMenu #busList li.soon { opacity: .55; }
#busMenu #busList li.soon .o { border-style: dashed; border-width: 4px; }
#busMenu #busList li.soon .nm { font-weight: 600; font-style: italic; }
@media (max-width: 560px) {
  #busMenu #busList li { min-width: 84px; }
}
.bus { --metro: #14864a; }
#busHint b { background: #14864a; }
#busBtn { background: rgba(20,134,74,.85); }
.bus .mBadge { font-size: 17px; box-shadow: inset 0 0 0 3px rgba(20,134,74,.18); }
.bus .mGo { box-shadow: 0 6px 14px rgba(20,134,74,.3); }
.bus .mGo:hover:not(:disabled) { background: #0f6b3a; }
.bus .mPic { background: linear-gradient(135deg, #cfe3d4, #86a890); }
#busMenu #busList li.here .o { animation-name: bPulse; }
@keyframes bPulse { 0% { box-shadow: 0 0 0 3px var(--metro), 0 0 0 3px rgba(20,134,74,.45); } 100% { box-shadow: 0 0 0 3px var(--metro), 0 0 0 16px rgba(20,134,74,0); } }

/* ---- boxeo (boxing.js): vida, destello al recibir y botones tactiles */
#boxHud { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 4; display: none; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 99px; background: rgba(18,20,24,.6); border: 1px solid rgba(255,255,255,.18); pointer-events: none; }
#boxHud.show { display: flex; }
#boxHud .lbl { font-size: 15px; }
#boxHud .bar { width: 150px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.15); overflow: hidden; }
#boxHud .bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #3ddc84, #b5f05a); transition: width .15s; }
#boxHud.low .bar i { background: linear-gradient(90deg, #ff3d3d, #ff8a3d); }
#boxHud.ko { animation: boxKo .5s infinite alternate; }
@keyframes boxKo { to { background: rgba(200,30,30,.65); } }
#boxFlash { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,0,0,0) 45%, rgba(220,0,0,.55) 100%); }
#boxFlash.on { animation: boxFlash .45s ease-out; }
@keyframes boxFlash { from { opacity: 1; } to { opacity: 0; } }
#punchBtn, #guardBtn { display: none; }
body.touch.boxing #modeBtn { display: none; }
body.touch.boxing #punchBtn { display: block; right: max(18px, env(safe-area-inset-right)); bottom: 36px; width: 92px; height: 92px; border-radius: 50%; font-size: 38px; background: rgba(224,48,48,.6); }
body.touch.boxing #guardBtn { display: block; right: 196px; bottom: 30px; width: 60px; height: 60px; border-radius: 50%; font-size: 24px; }
#guardBtn.on { background: rgba(61,140,255,.75); }
/* carga del golpe fuerte: barrita bajo la mira */
#boxCharge { position: fixed; left: 50%; top: calc(50% + 22px); width: 46px; height: 4px; margin-left: -23px; border-radius: 99px; background: rgba(0,0,0,.35); overflow: hidden; z-index: 4; pointer-events: none; display: none; }
#boxCharge.show { display: block; }
#boxCharge i { display: block; height: 100%; width: 0; background: #fff; }
#boxCharge.full i { background: #ffc531; box-shadow: 0 0 6px #ffc531; }
#boxCharge.full { animation: boxChg .18s infinite alternate; }
@keyframes boxChg { to { opacity: .55; } }

/* ---------- instalar como app (PWA, solo movil/tablet) ---------- */
#installRow { margin: 10px 0 2px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
#installRow[hidden] { display: none; }
#installBtn { font: inherit; font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--accent); background: rgba(255,61,127,.14); color: #fff; cursor: pointer; }
#installBtn[hidden] { display: none; }
#installHint { margin: 0; font-size: 12px; opacity: .8; text-align: center; max-width: 300px; }

/* ---------- poses y animaciones (Q, emotes.js) ---------- */
#emoteMenu { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96); z-index: 7; width: min(300px, calc(100vw - 32px)); padding: 14px; border-radius: 16px; border: 1px solid var(--ui-line, var(--line)); background: rgba(16,18,24,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 14px 40px rgba(0,0,0,.45); color: var(--text); opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; }
#emoteMenu.show { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
#emoteMenu h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .12em; text-align: center; color: var(--muted); }
#emoteMenu .sec { margin: 10px 2px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
#emoteMenu button { display: flex; align-items: center; gap: 10px; width: 100%; margin: 4px 0; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: rgba(255,255,255,.05); color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
#emoteMenu button:hover { background: rgba(255,255,255,.1); }
#emoteMenu button b { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,.14); text-align: center; font-size: 12px; }
#emoteMenu button .ico { font-size: 20px; line-height: 1; }
#emoteMenu button.on { border-color: var(--accent); background: rgba(255,61,127,.16); }
#emoteMenu button.stop { margin-top: 10px; color: var(--muted); }
#emoteMenu p { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); text-align: center; }
#emoteBtn { display: none; right: 196px; bottom: 100px; width: 56px; height: 56px; border-radius: 50%; font-size: 24px; }
body.touch #emoteBtn { display: block; }
body.touch.boxing #emoteBtn { bottom: 100px; }
#emoteBtn.on { background: rgba(255,61,127,.75); }

/* ---------- maquinas expendedoras (vending.js) ---------- */
#vendHint { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); z-index: 4; padding: 8px 14px; border-radius: 10px; background: rgba(16,18,24,.85); border: 1px solid var(--ui-line, var(--line)); color: var(--text); pointer-events: none; display: none; backdrop-filter: blur(6px); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
#vendHint b { display: inline-block; min-width: 18px; padding: 1px 6px; margin-right: 6px; border-radius: 5px; background: #d9262f; color: #fff; text-align: center; }
#vendHint.show { display: block; }
#vendBtn { display: none; left: 50%; top: 58%; transform: translateX(-50%); padding: 12px 18px; background: rgba(217,38,47,.85); }
#vendBtn.show { display: block; }
/* ---------- paintball: armero (paintball.js) ---------- */
#pbHint { position: fixed; left: 50%; top: 58%; transform: translateX(-50%); z-index: 4; padding: 8px 14px; border-radius: 10px; background: rgba(16,18,24,.85); border: 1px solid var(--ui-line, var(--line)); color: var(--text); pointer-events: none; display: none; backdrop-filter: blur(6px); box-shadow: 0 8px 20px rgba(0,0,0,.35); }
#pbHint b { display: inline-block; min-width: 18px; padding: 1px 6px; margin-right: 6px; border-radius: 5px; background: #d9262f; color: #fff; text-align: center; }
#pbHint.show { display: block; }
#pbBtn { display: none; left: 50%; top: 58%; transform: translateX(-50%); padding: 12px 18px; background: rgba(217,38,47,.85); }
#pbBtn.show { display: block; }
#vendMenu { position: fixed; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.45); }
#vendMenu.show { display: flex; }
#vendMenu .vCard { position: relative; width: min(380px, 100%); padding: 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, #2a0d10 0%, #15161c 38%); box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); color: var(--text); }
#vendMenu .vX { position: absolute; right: 10px; top: 10px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: rgba(255,255,255,.08); color: var(--text); font-size: 15px; cursor: pointer; }
#vendMenu .vHead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#vendMenu .vIco { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #d9262f; font-size: 26px; box-shadow: 0 0 18px rgba(217,38,47,.5); }
#vendMenu .vHead small { font-size: 10.5px; letter-spacing: .14em; color: var(--muted); }
#vendMenu .vHead h3 { margin: 2px 0 0; font-size: 20px; letter-spacing: .04em; }
#vendMenu .vList button { display: flex; align-items: center; gap: 10px; width: 100%; margin: 6px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.05); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform .1s, background .1s, border-color .1s; }
#vendMenu .vList button:hover { background: rgba(255,255,255,.1); transform: translateY(-1px); }
#vendMenu .vList button b { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,.14); text-align: center; font-size: 12px; }
#vendMenu .vList button .ico { font-size: 26px; line-height: 1; }
#vendMenu .vList button .nm { flex: 1; display: flex; flex-direction: column; font-weight: 600; font-size: 14.5px; }
#vendMenu .vList button .nm em { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--muted); }
#vendMenu .vList button .pr { padding: 4px 10px; border-radius: 99px; background: #ffe27a; color: #1a1400; font-weight: 800; font-size: 13px; }
#vendMenu .vList button.poor .pr { background: rgba(255,255,255,.15); color: var(--muted); }
#vendMenu .vList button.ok { border-color: #3ddc84; background: rgba(61,220,132,.12); }
#vendMenu .vList button.no { animation: vendNo .35s; border-color: #e04848; }
@keyframes vendNo { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
#vendMenu .vFoot { margin: 10px 0 0; font-size: 12px; color: var(--muted); text-align: center; line-height: 1.6; }
#vendMenu .vFoot b { color: #ffe27a; }

/* cantidad de los consumibles en el inventario */
#invGrid .slot { position: relative; }
#invGrid .slot .qty { position: absolute; right: 7px; top: 6px; padding: 1px 6px; border-radius: 99px; background: rgba(0,0,0,.5); color: #ffe27a; font-style: normal; font-weight: 800; font-size: 11.5px; }
/* ---------- teléfono (sustituye al menú de pausa; el juego sigue detrás) ---------- */
#pauseMenu.phone { position: fixed; inset: auto; right: 26px; top: 50%; transform: translateY(-50%); width: 392px; height: min(830px, calc(100vh - 32px)); padding: 0; z-index: 14; display: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }
#pauseMenu.phone.show { display: block; animation: phIn .28s cubic-bezier(.2,.9,.3,1.1); }
@keyframes phIn { from { opacity: 0; transform: translate(40px, -50%) rotate(2deg); } to { opacity: 1; transform: translateY(-50%); } }
body.phoneOpen #unlockHint { display: none; }
.phFrame { position: relative; height: 100%; padding: 11px; border-radius: 58px; background: linear-gradient(145deg, #5d6068, #2b2d33 30%, #1a1b1f 60%, #44474e); box-shadow: 0 40px 90px rgba(0,0,0,.6), inset 0 0 0 1.5px rgba(255,255,255,.18), inset 0 0 0 4px #0b0b0d; }
.phFrame::before, .phFrame::after { content: ""; position: absolute; left: -3px; width: 3px; border-radius: 2px 0 0 2px; background: #3a3c42; }
.phFrame::before { top: 150px; height: 56px; }
.phFrame::after { top: 220px; height: 56px; }
.phX { position: absolute; top: -12px; right: -12px; z-index: 3; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #fff; color: #111; font: 700 16px/1 Inter, sans-serif; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.45); transition: transform .12s, background .12s; }
.phX:hover { transform: scale(1.08); background: #ffe1ea; }
.phGlass { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 47px; color: #fff; font-family: Inter, -apple-system, sans-serif;
  background: radial-gradient(420px 360px at 15% 8%, rgba(255,61,127,.55), transparent 70%), radial-gradient(380px 340px at 95% 70%, rgba(255,140,40,.4), transparent 70%), linear-gradient(170deg, #2a1240, #120a22 55%, #0a0812); }
.phGlass.inApp { background: #000; }
.phIsland { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 112px; height: 32px; border-radius: 20px; background: #000; z-index: 2; }
.phStatus { flex: none; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 34px; font: 600 15px/1 Inter, sans-serif; }
.phStatus span { display: flex; align-items: center; gap: 6px; }
.phStatus svg { height: 12px; width: auto; }
.phBar { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 4px 12px 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.phBar[hidden] { display: none; }
.phBack { justify-self: start; padding: 6px 4px; border: 0; background: none; color: #3d9bff; font: 500 16px/1 Inter, sans-serif; cursor: pointer; }
.phTitle { font-size: 16px; font-weight: 700; }
.phScreen { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.phScreen::-webkit-scrollbar { display: none; }
.phHomeBar { flex: none; align-self: center; width: 134px; height: 5px; margin: 8px 0 9px; padding: 0; border: 0; border-radius: 3px; background: rgba(255,255,255,.85); cursor: pointer; }

/* pantalla de inicio */
#pauseMenu.phone .pmCard { margin: 0; animation: none; }
#pauseMenu.phone .pmCard.pmMain { width: 100%; padding: 6px 20px 16px; gap: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.phWidget { margin: 4px 0 22px; text-align: center; }
.phBig { font: 200 76px/1 Inter, sans-serif; letter-spacing: -.02em; text-shadow: 0 2px 20px rgba(0,0,0,.3); }
.phDate { margin-top: 4px; font-size: 15px; font-weight: 600; text-transform: capitalize; opacity: .9; }
.phWidget .pmMeta { justify-content: center; margin-top: 12px; color: rgba(255,255,255,.75); }
#pauseMenu.phone .pmNav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 8px; }
#pauseMenu.phone .pmCard .pmNav button { flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; text-align: center; transform: none; }
#pauseMenu.phone .pmCard .pmNav button:hover { background: none; transform: none; }
#pauseMenu.phone .pmCard .pmNav button:hover i { filter: brightness(1.12); transform: scale(1.05); }
#pauseMenu.phone .pmNav i { width: 60px; height: 60px; border-radius: 15px; color: #fff; background: linear-gradient(160deg, #6f7680, #3c424b); box-shadow: 0 6px 14px rgba(0,0,0,.35); transition: transform .12s, filter .12s; }
#pauseMenu.phone .pmNav i svg { width: 32px; height: 32px; }
#pauseMenu.phone .pmNav span { align-items: center; }
#pauseMenu.phone .pmNav b { font-size: 11.5px; font-weight: 500; white-space: nowrap; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
#pauseMenu.phone .pmNav em, #pauseMenu.phone .pmNav s, #pauseMenu.phone .pmNav kbd { display: none; }
#pauseMenu.phone .pmNav [data-act=casa] i { background: linear-gradient(160deg, #5ee08a, #1f9e52); }
#pauseMenu.phone .pmNav [data-act=shop] i { background: linear-gradient(160deg, #ffb340, #ff6a1f); }
#pauseMenu.phone .pmNav [data-act=custom] i { background: linear-gradient(160deg, #ff6ec4, #7b3cff); }
#pauseMenu.phone .pmNav [data-act=community] i { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
#pauseMenu.phone .pmNav [data-act=gallery] i { background: linear-gradient(160deg, #5ac8fa, #1e6fff); }
#pauseMenu.phone .pmNav [data-act=settings] i { background: linear-gradient(160deg, #9aa1ab, #565c66); }
#pauseMenu.phone .pmNav [data-act=respawn] i { background: linear-gradient(160deg, #ff6b6b, #d92b3a); }
#pauseMenu.phone .pmNav [data-act=friends] i { background: linear-gradient(160deg, #3fe0cf, #0b8a86); }
#pauseMenu.phone .pmNav [data-act=graffitis] i { background: linear-gradient(160deg, #c8f53a, #4f9c0c); }
#pauseMenu.phone .pmNav [data-act=mobjs] i { background: linear-gradient(160deg, #e0aa6e, #8a5226); }
#pauseMenu.phone .pmNav [data-act=missions] i { background: linear-gradient(160deg, #ffd84a, #d98f00); }
#pauseMenu.phone .pmNav [data-act=camera] i { background: linear-gradient(160deg, #6b7a8f, #2b3442); }
#pauseMenu.phone .pmNav [data-act=circ] i { background: linear-gradient(160deg, #6d7cff, #3640c9); }
#pauseMenu.phone .pmTip { margin-top: 26px; border-radius: 18px; border: 0; background: rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: rgba(255,255,255,.88); }

/* apps (páginas de los demás módulos) dentro de la pantalla */
#pauseMenu.phone .pmPage, #pauseMenu.phone .pmPage.pmWide { width: 100%; padding: 4px 16px 18px; background: none; border: 0; border-radius: 0; box-shadow: none; }
#pauseMenu.phone .phScreen button[data-act=back] { display: none; }
#pauseMenu.phone .shopHead h2 { display: none; }
#pauseMenu.phone .shopHead { border-bottom: 0; padding-bottom: 4px; }
/* tienda en el teléfono: categorías en columna a la izquierda (fija al bajar) y productos a la derecha */
#pauseMenu.phone .shopBody { grid-template-columns: 104px 1fr; height: auto; gap: 10px; align-items: start; }
#pauseMenu.phone .shopCats { flex-direction: column; gap: 5px; position: sticky; top: 0; z-index: 1; max-height: min(600px, calc(100vh - 270px)); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
#pauseMenu.phone .shopCats::-webkit-scrollbar { display: none; }
#pauseMenu.phone .pmCard .shopCats button { flex: none; width: 100%; padding: 9px 6px; border-radius: 10px; font-size: 11px; letter-spacing: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pauseMenu.phone .shopGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; padding-right: 0; min-width: 0; }
#pauseMenu.phone .shopName { font-size: 11px; overflow-wrap: anywhere; }
#pauseMenu.phone .shopTabs::-webkit-scrollbar { display: none; }
#pauseMenu.phone .shopTabs { scrollbar-width: none; margin: 0 -16px 6px; padding: 6px 16px; gap: 4px; scroll-padding: 0 16px; }
#pauseMenu.phone .pmCard .shopTabs button { gap: 7px; padding: 7px 14px 7px 11px; font-size: 13px; }
#pauseMenu.phone .pmCard .shopTabs button svg { width: 20px; height: 20px; }
#pauseMenu.phone .shopOne .shopBody { grid-template-columns: 1fr; }
#pauseMenu.phone .shopFoot { position: sticky; bottom: -18px; margin: 0 -16px -18px; padding: 10px 16px 14px; background: rgba(0,0,0,.92); }
#pauseMenu.phone .cuBody { height: auto; overflow: visible; padding-right: 0; }
#pauseMenu.phone .cuBody.player { grid-template-columns: 1fr; }
#pauseMenu.phone .cuSide { position: static; max-width: 160px; margin: 0 auto; }
#pauseMenu.phone .cuRow { grid-template-columns: 1fr; gap: 4px; }
#pauseMenu.phone .tgWrap { grid-template-columns: 1fr; }
#pauseMenu.phone .coBody { grid-template-columns: 1fr; max-height: none; overflow: visible; }
#pauseBtn { font-size: 20px; }
@media (max-width: 560px), (max-height: 520px) {
  #pauseMenu.phone { inset: 0; right: 0; top: 0; transform: none; width: auto; height: auto; }
  #pauseMenu.phone.show { animation: none; }
  .phFrame { padding: 0; border-radius: 0; box-shadow: none; }
  .phFrame::before, .phFrame::after, .phIsland { display: none; }
  .phGlass { border-radius: 0; }
  .phX { top: 8px; right: 8px; width: 34px; height: 34px; }
  .phStatus { height: 40px; padding: 0 56px 0 20px; }
}
/* ---------- Instagram (app del teléfono, Web/js/insta.js) ---------- */
#pauseMenu .pmPage.igApp, #pauseMenu.phone .pmPage.igApp { position: relative; display: flex; flex-direction: column; gap: 0; width: 100%; min-height: 100%; padding: 0; background: #000; border: 0; border-radius: 0; box-shadow: none; color: #f5f5f5; font: 400 14px/1.35 Inter, -apple-system, sans-serif; }
#pauseMenu:not(.phone) .pmPage.igApp { width: min(420px, calc(100vw - 28px)); height: min(760px, calc(100vh - 40px)); min-height: 0; overflow-y: auto; border-radius: 20px; }
.igApp button { font: inherit; color: inherit; cursor: pointer; }
#pauseMenu .igApp button, #pauseMenu.phone .igApp button { padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; letter-spacing: 0; transform: none; }
#pauseMenu .igApp button:hover { background: none; border-color: transparent; }
.igApp a { cursor: pointer; color: inherit; text-decoration: none; }
.igApp svg { width: 25px; height: 25px; display: block; }
.igTop { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: #000; border-bottom: 1px solid #1d1d1d; }
.igTop > span { display: flex; gap: 18px; }
.igTop button { position: relative; }
.igLogo { font: italic 700 25px/1.1 "Brush Script MT", "Segoe Script", "Lobster", cursive; letter-spacing: .01em; background: linear-gradient(90deg, #feda75, #fa7e1e 25%, #d62976 55%, #962fbf 80%, #4f5bd5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.igDot { position: absolute; top: -1px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #ff3040; border: 1.5px solid #000; }
.igDot[hidden] { display: none; }
.igView { flex: 1; padding-bottom: 6px; }
.igTabs { position: sticky; bottom: 0; z-index: 3; display: flex; justify-content: space-around; align-items: center; padding: 9px 6px 10px; background: #000; border-top: 1px solid #1d1d1d; }
.igTabs button { opacity: .75; padding: 4px 8px !important; }
.igTabs button.on { opacity: 1; }
.igTabs button.on svg { stroke-width: 2.8; }
.igTabs button.on .igAv { box-shadow: 0 0 0 2px #000, 0 0 0 3.5px #fff; }
.igMsg { position: sticky; bottom: 58px; z-index: 4; margin: 0 14px; padding: 10px 14px; border-radius: 10px; background: #262626; color: #fff; font-size: 13px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.6); }
.igMsg.bad { background: #4a1418; }
.igMsg[hidden] { display: none; }
.igLoad { display: grid; place-items: center; padding: 60px 0; }
.igLoad i { width: 26px; height: 26px; border: 2.5px solid #333; border-top-color: #fff; border-radius: 50%; animation: igSpin .8s linear infinite; }
@keyframes igSpin { to { transform: rotate(360deg); } }
.igEmpty { display: grid; gap: 8px; padding: 50px 30px; text-align: center; color: #a8a8a8; font-size: 13.5px; }
.igEmpty b { color: #fff; font-size: 18px; }
.igEnd { padding: 22px 0 10px; text-align: center; color: #a8a8a8; font-size: 13px; }
.igNote { padding: 10px 14px; color: #a8a8a8; font-size: 13px; text-align: center; }

/* avatar con inicial (color sacado del nombre) */
.igAv { --h: 200; flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, hsl(var(--h) 70% 55%), hsl(calc(var(--h) + 40) 70% 35%)); color: #fff; font: 700 14px/1 Inter, sans-serif; text-transform: uppercase; }
.igAv.sm { width: 26px; height: 26px; font-size: 11px; }
.igAv.big { width: 84px; height: 84px; font-size: 34px; }
.igAv.crew { border-radius: 22%; font-size: 12px; letter-spacing: .02em; }
.igAv.big.crew { font-size: 26px; }
.igAv.ring { box-shadow: 0 0 0 2px #000, 0 0 0 4px #d62976; }
.igAv.ring.on { box-shadow: 0 0 0 2px #000, 0 0 0 4px #2fd158; }
/* foto de perfil */
.igAv.pic { overflow: hidden; background: #222; }
.igAv.pic img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.igUser { font-weight: 700; }
.igUser:hover { text-decoration: underline; }
.igCrew { color: #a8a8a8 !important; font-weight: 600; }
.igCrew:hover { color: #fff !important; }

/* publicación */
.igPost { padding-bottom: 14px; border-bottom: 1px solid #121212; }
.igPost > header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.igPost > header > div { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; }
.igPost > header small { color: #a8a8a8; font-size: 11.5px; }
.igMore svg { width: 20px; height: 20px; }
.igMedia { position: relative; background: #0d0d0d; user-select: none; }
.igMedia img, .igMedia video { display: block; width: 100%; max-height: 470px; object-fit: contain; background: #0d0d0d; }
.igPlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; cursor: pointer; }
.igPlay svg { width: 26px; height: 26px; }
.igPlay.sm { left: auto; top: 6px; right: 6px; transform: none; width: auto; height: auto; background: none; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.igPlay.sm svg { width: 18px; height: 18px; }
.igPop { position: absolute; left: 50%; top: 50%; color: #fff; opacity: 0; transform: translate(-50%, -50%) scale(0); pointer-events: none; filter: drop-shadow(0 4px 14px rgba(0,0,0,.4)); }
.igPop svg { width: 96px; height: 96px; fill: #fff; stroke: none; }
.igPop.go { animation: igPop .9s ease-out; }
@keyframes igPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 30% { transform: translate(-50%, -50%) scale(.95); } 45%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
.igActs { display: flex; gap: 16px; padding: 10px 12px 6px; }
.igActs button:hover { opacity: .65; }
.igLike.on { color: #ff3040; }
.igLike.on svg { fill: #ff3040; }
.igLike.beat { animation: igBeat .35s; }
@keyframes igBeat { 40% { transform: scale(1.25); } }
.igLikes { display: block; padding: 0 12px; font-size: 13.5px; }
.igCap, .igC { padding: 3px 12px 0; font-size: 13.5px; overflow-wrap: anywhere; }
.igC small { margin-left: 4px; color: #a8a8a8; font-size: 11.5px; }
.igApp .igX { margin-left: 4px; color: #a8a8a8; font-size: 11px; }
.igApp .igX:hover { color: #ff3040; }
.igApp .igLink { display: block; padding: 4px 12px 0; color: #a8a8a8; font-size: 13.5px; }
.igApp .igPage { width: calc(100% - 24px); margin: 14px 12px 4px; padding: 10px 0; border-radius: 8px; background: #121212; color: #fff; font-weight: 600; text-align: center; }
.igPost time { display: block; padding: 6px 12px 0; color: #a8a8a8; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.igSend { display: flex; align-items: center; gap: 10px; margin: 12px 12px 0; padding-top: 12px; border-top: 1px solid #1d1d1d; }
.igSend input { flex: 1; min-width: 0; padding: 8px 0; border: 0; background: none; color: #fff; font: 400 14px Inter, sans-serif; outline: none; }
.igApp .igSend button, .igApp .igForm button.pri, .igApp .igBtns button.pri, .igApp .igGo.pri { color: #4cb5f9; font-weight: 700; }
.igApp .igSend button:hover { color: #fff; }

/* perfil y crew */
.igProf { padding: 14px 14px 10px; }
.igHead { display: flex; align-items: center; gap: 20px; }
.igStats { flex: 1; display: flex; justify-content: space-around; text-align: center; }
.igStats span { display: flex; flex-direction: column; font-size: 12.5px; color: #e0e0e0; }
.igStats b { font-size: 17px; color: #fff; }
.igBio { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; font-size: 14px; }
.igBio small { color: #a8a8a8; font-size: 12.5px; }
.igBio small.on { color: #2fd158; }
.igBtns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.igApp .igBtns > button { flex: 1 1 40%; padding: 8px 10px; border-radius: 8px; background: #262626; color: #fff; font-weight: 600; font-size: 13.5px; text-align: center; }
.igApp .igBtns > button.pri { background: #0095f6; color: #fff; }
.igApp .igBtns > button:hover { filter: brightness(1.15); }
.igApp .igBtns > button:disabled { opacity: .6; cursor: default; filter: none; }
.igBtns .igForm { flex: 1 1 100%; }
.igForm { display: flex; gap: 6px; }
.igForm[hidden] { display: none; }
.igForm input, .igForm textarea { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid #262626; border-radius: 8px; background: #121212; color: #fff; font: 400 14px Inter, sans-serif; outline: none; resize: none; }
.igForm input:focus, .igForm textarea:focus { border-color: #555; }
.igForm input.tag { flex: 0 0 74px; text-transform: uppercase; }
.igApp .igForm > button { flex: none; padding: 0 12px; border-radius: 8px; background: #0095f6; color: #fff !important; font-weight: 700; }
.igApp .igForm > button:disabled { opacity: .6; }
.igMembers { display: flex; gap: 14px; margin-top: 14px; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; }
.igApp .igMembers button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 62px; font-size: 11.5px; }
.igMembers .igAv { width: 52px; height: 52px; font-size: 20px; }
.igMembers span:last-child { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* cuadrícula de miniaturas */
.igGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border-top: 1px solid #1d1d1d; padding-top: 2px; }
.igApp .igGrid > button { position: relative; aspect-ratio: 1; overflow: hidden; background: #121212; }
.igGrid .th { width: 100%; height: 100%; object-fit: cover; display: block; }
.igGrid button > span { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); font-weight: 700; font-size: 12.5px; opacity: 0; transition: opacity .12s; }
.igGrid button:hover > span { opacity: 1; }
.igGrid.sel button.on { outline: 3px solid #0095f6; outline-offset: -3px; }
.igGrid.sel button.on::after { content: "✓"; position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #0095f6; font-size: 12px; font-weight: 700; }

/* buscar / actividad */
.igApp h4 { margin: 16px 14px 6px; font-size: 15px; font-weight: 700; }
.igFind { margin: 10px 14px 0; }
.igList { list-style: none; margin: 0; padding: 0 14px; }
.igList li { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.igApp .igList li > button:first-child { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; }
.igList li span { display: flex; flex-direction: column; min-width: 0; font-weight: 600; font-size: 13.5px; }
.igList small { color: #a8a8a8; font-weight: 400; font-size: 12px; }
.igList li.igNote { display: block; }
.igApp .igList li.ev > button:first-child { flex: none; }
.igEv { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.igEv small { color: #a8a8a8; }
.igApp .igGo { flex: none; padding: 6px 12px; border-radius: 8px; background: #262626; font-weight: 700; font-size: 12.5px; }
.igApp .igGo.pri { background: #0095f6; color: #fff; }
.igApp .igMini { flex: none; width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 4px; background: #121212; }
.igMini img { width: 100%; height: 100%; object-fit: cover; }
.igMini svg { width: 18px; height: 18px; }
.igChips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px; }
.igApp .igChips button { padding: 6px 12px; border-radius: 99px; background: #262626; font-size: 12.5px; }
.igChips b { margin-right: 6px; color: #4cb5f9; }
.igChips small { margin-left: 4px; color: #a8a8a8; }

/* publicar */
.igUpPrev { display: grid; place-items: center; background: #0d0d0d; }
.igUpPrev img, .igUpPrev video { display: block; width: 100%; max-height: 300px; object-fit: contain; }
.igUpForm { flex-wrap: wrap; margin: 10px 14px 0; }
.igApp .igUpForm > button { padding: 9px 16px; }
.igBar { flex: 1 1 100%; height: 4px; border-radius: 2px; background: #262626; overflow: hidden; }
.igBar[hidden] { display: none; }
/* etiquetar jugadores */
.igTagBox h4 small { color: #a8a8a8; font-weight: 400; }
.igTagBox .igNote { padding: 0; }
.igApp .igTagChips button.on { background: #0095f6; color: #fff; }
.igTagAdd { margin: 8px 14px 0; }
.igTags { margin: 2px 14px 0; color: #a8a8a8; font-size: 13px; }
.igTags .igLink { display: inline; padding: 0 0 0 6px; }
.igBar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #fa7e1e, #d62976, #4f5bd5); transition: width .15s; }
/* camara unificada: menu lateral (foto/video, tripode, cuenta atras, zoom) */
body.camOn #panel { display: none; }
#camPanel { position: fixed; right: 12px; top: max(10px, env(safe-area-inset-top)); z-index: 5; width: 232px; display: none; }
body.camOn #camPanel { display: block; }
#camPanel .camToggle { display: none; }
#camPanel .camBody { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; backdrop-filter: blur(6px); max-height: calc(100vh - 24px); overflow: auto; }
#camPanel .camTitle { font-weight: 700; margin-bottom: 8px; }
#camPanel .lbl { margin-top: 10px; color: var(--muted); font-size: 12px; }
#camPanel .seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 5px; }
#camPanel .seg.c3 { grid-template-columns: repeat(3, 1fr); }
#camPanel .seg.c4 { grid-template-columns: repeat(4, 1fr); }
#camPanel .seg button, #camPanel .row button { padding: 6px 0; border-radius: 7px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; }
#camPanel .seg button.sel { color: var(--text); border-color: var(--accent); background: rgba(255,255,255,.14); }
#camPanel .seg button:disabled, #camPanel .shot:disabled { opacity: .4; cursor: default; }
#camPanel .slider { grid-template-columns: 78px 1fr 38px; margin-top: 12px; }
#camPanel .prev { display: block; width: 100%; aspect-ratio: 16 / 9; margin-top: 10px; border-radius: 8px; background: #000; border: 1px solid var(--line); }
#camPanel .row { display: grid; grid-template-columns: 40px 40px 1fr; gap: 6px; margin-top: 6px; }
#camPanel .shot { margin-top: 12px; width: 100%; padding: 10px; border-radius: 9px; border: 1px solid var(--accent); background: rgba(255,255,255,.12); color: var(--text); cursor: pointer; font: inherit; font-weight: 700; }
#camPanel .shot.recording { background: rgba(224,48,48,.85); border-color: #ff6060; }
#camPanel .help { margin: 8px 0 0; font-size: 11px; color: var(--muted); line-height: 1.5; }
#camPanel .help b { color: var(--text); }
#camPanel [hidden] { display: none !important; }
body.touch #camPanel { width: auto; max-width: 250px; right: max(10px, env(safe-area-inset-right)); }
body.touch #camPanel .camToggle { display: block; margin-left: auto; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 22px; }
body.touch #camPanel .camBody { display: none; margin-top: 8px; max-height: calc(100vh - 80px); }
body.touch #camPanel.open .camBody { display: block; }
#camCount { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 6; font: 700 120px/1 'Permanent Marker', system-ui, sans-serif; color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.6); pointer-events: none; display: none; }
#camCount.show { display: block; animation: camPulse 1s ease-out infinite; }
@keyframes camPulse { from { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } to { opacity: .55; transform: translate(-50%, -50%) scale(.9); } }
#camRec { position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 6; padding: 5px 12px; border-radius: 8px; background: rgba(224,48,48,.88); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; display: none; }
#camRec.show { display: block; }

#camPanel.shut { display: none !important; }
#camPanel .camTitle { display: flex; align-items: center; }
#camPanel .camX { margin-left: auto; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); cursor: pointer; font: inherit; font-size: 13px; line-height: 1; }
#camPanel .camX:hover { background: rgba(255,255,255,.16); }
/* colores de un producto (tienda) */
.shopSw { display: flex; gap: 8px; flex-wrap: wrap; }
.shopSw:empty { display: none; }
.shopSwatch { width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 4px; border: 2px solid rgba(255,255,255,.25); cursor: pointer; }
.shopSwatch.sel { border-color: #fff; box-shadow: 0 0 0 2px #5fd3a0; }
.shopSwatch.owned::after { content: '✓'; color: #fff; font-size: 14px; text-shadow: 0 0 3px #000; }
/* teléfono: mismo ancho y alto en todas las apps (sin esto el marco se encogía al contenido en Amigos, Música...) */
#pauseMenu.phone .phFrame, #pauseMenu.phone .phGlass { width: 100%; }
/* CREA TU PERSONAJE (primera vez, custom.js) */
#creator { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8,9,12,.82); backdrop-filter: blur(4px); }
#creator .crCard { width: min(860px, 100%); max-height: 100%; overflow: auto; background: #16181d; color: #eee; border-radius: 14px; padding: 18px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 12px; }
#creator h2 { margin: 0; font-size: 22px; letter-spacing: .06em; }
#creator .crBody { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
#creator .cuRow { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
#creator .cuRow > label { font-size: 11px; font-weight: 700; letter-spacing: .08em; opacity: .7; }
#creator .cuList { display: flex; flex-wrap: wrap; gap: 6px; }
#creator .cuChip { padding: 7px 11px; border-radius: 8px; font-size: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #eee; cursor: pointer; }
#creator .cuChip.sel { background: rgba(255,61,127,.22); border-color: #ff3d7f; }
#creator .cuHint { font-size: 12px; opacity: .65; margin: 4px 0 0; }
#creator .crGo { align-self: flex-end; padding: 12px 28px; font-size: 15px; font-weight: 800; border: 0; border-radius: 10px; background: #ff3d7f; color: #fff; cursor: pointer; }
@media (max-width: 600px) { #creator .crBody { grid-template-columns: 1fr; } #creator .cuSide { width: 150px; margin: 0 auto; } }

/* ------------------------------------------------ barra de acceso rapido (skate.js) */
#hotbar { position: fixed; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 5; display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(10,12,18,.55); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); user-select: none; -webkit-user-select: none; }
#hotbar .hs { position: relative; width: 50px; height: 50px; border-radius: 10px; border: 2px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .1s, border-color .1s, background .1s; }
#hotbar .hs .ico { font-size: 26px; line-height: 1; pointer-events: none; }
#hotbar .hs .k { position: absolute; left: 4px; top: 2px; font-style: normal; font-size: 10px; font-weight: 800; color: rgba(255,255,255,.7); pointer-events: none; }
#hotbar .hs .qty { position: absolute; right: 3px; bottom: 1px; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px #000; pointer-events: none; }
#hotbar .hs.empty { cursor: default; }
#hotbar .hs.on { border-color: var(--accent); background: rgba(255,61,127,.2); box-shadow: 0 0 0 3px rgba(255,61,127,.22); transform: translateY(-3px); }
#hotbar .hs.over, #hotbar.picking .hs:hover { border-color: #fff; background: rgba(255,255,255,.16); }
#hotbar.picking .hs { border-style: dashed; cursor: copy; }
body.invOpen #hotbar { z-index: 13; }
/* con el inventario cerrado solo se ven los huecos con algo (y nada si estan todos vacios) */
body:not(.invOpen) #hotbar .hs.empty { display: none; }
body:not(.invOpen) #hotbar:not(:has(.hs:not(.empty))) { display: none; }
/* iconos dibujados (icons.js) */
.svgIco { display: block; width: 1em; height: 1em; }
.rlTitle { display: inline-flex; align-items: center; gap: 6px; }
.rlTitle .svgIco { width: 18px; height: 18px; }
body.phoneOpen #hotbar { display: none; }
body.touch #hotbar { gap: 3px; padding: 3px; }
body.touch #hotbar .hs { width: 40px; height: 40px; }
body.touch #hotbar .hs .ico { font-size: 21px; }
/* lo que estaba abajo en el centro sube por encima de la barra */
#unlockHint { bottom: 86px; }
body:not(.touch) #skateSpeed, body #boxHud { bottom: 80px; }
body #carHud, body #casaBuild, body #mobjBuild, body #grafPick { bottom: 80px; }
body.touch #boxHud, body.touch #carHud, body.touch #casaBuild, body.touch #mobjBuild, body.touch #grafPick { bottom: 62px; }
/* inventario: arrastrar a la barra, tocar para elegir y tecla del hueco */
#invGrid .slot { position: relative; }
#invGrid .slot:not(.empty) { cursor: grab; }
#invGrid .slot.picked { border-color: #fff; border-style: dashed; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
#invGrid .slot .hk { position: absolute; left: 6px; top: 5px; min-width: 18px; padding: 1px 5px; border-radius: 6px; background: var(--accent); color: #fff; font-style: normal; font-size: 11px; font-weight: 800; }
/* ajustes: controles redefinibles (menu.js) */
.kbList { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.kbList .pmNote { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.kbList h4 { margin: 8px 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kbRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 10px; border-radius: 9px; background: var(--ui-bg2); font-size: 13px; }
.kbRow button { min-width: 74px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--ui-line); background: rgba(255,255,255,.06); color: var(--text); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.kbRow button:hover { border-color: rgba(255,255,255,.3); }
.kbRow button.chg { border-color: var(--accent); color: var(--accent); }
.kbRow button.wait { border-color: #fff; background: rgba(255,255,255,.16); animation: kbBlink 1s infinite; }
@keyframes kbBlink { 50% { opacity: .55; } }
.kbList .kbReset { margin-top: 8px; align-self: flex-start; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--ui-line); background: transparent; color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
/* ventana estrecha: el chat (abajo a la izquierda) llegaria a pisar la barra */
@media (max-width: 1120px) { body:not(.touch) #chatBox { bottom: 82px; } }

/* ---------- menu de pausa (Esc) y aviso de la C ---------- */
#escMenu { position: fixed; inset: 0; z-index: 15; display: none; place-items: center; background: rgba(10,14,20,.62); backdrop-filter: blur(3px); }
#escMenu.show { display: grid; }
#escMenu .escBox { width: min(300px, calc(100vw - 32px)); padding: 22px 20px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 10px; text-align: center; }
#escMenu h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
#escMenu button { font: inherit; font-weight: 700; font-size: 15px; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--text); cursor: pointer; }
#escMenu button:hover { background: rgba(255,255,255,.12); }
#escMenu button.escMain { background: var(--accent); border-color: transparent; color: #fff; }
#escMenu button.escMain:hover { filter: brightness(1.1); }
#escMenu button:disabled { opacity: .5; cursor: default; }
#escMenu .hint { margin: 4px 0 0; font-size: 12px; }
body.paused #unlockHint { display: none; }
#mouseHint { position: fixed; left: 50%; top: 46px; transform: translateX(-50%); z-index: 4; display: none; padding: 3px 9px; border-radius: 999px; background: rgba(10,12,18,.45); color: rgba(255,255,255,.62); font: 12px Inter, sans-serif; pointer-events: none; }
#mouseHint b { display: inline-block; min-width: 16px; margin-right: 4px; padding: 0 4px; border-radius: 4px; background: rgba(255,255,255,.16); color: #fff; text-align: center; }
#mouseHint.show { display: block; }
body.touch #mouseHint { display: none; }

/* ------------------------------------------------ inicio de sesión (#overlay, lobby.js) */
#overlay { display: block; background: #07090d url(../img/login-bg.jpg) center / cover no-repeat; }
#overlay::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,7,11,.15) 0%, rgba(5,7,11,.35) 55%, rgba(5,7,11,.7) 100%); pointer-events: none; }
html.travelling #overlay { background: #07090d; }
html.travelling #overlay > * { visibility: hidden; }
#overlay .lgLoad { display: none; }
.lgLogo { position: absolute; left: 3.2vw; top: 3.5vh; width: min(22vw, 40vh, 420px); height: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.55)); pointer-events: none; user-select: none; }
.lgPanel { position: absolute; top: 0; right: 0; bottom: 0; width: max(340px, 27vw); box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 40px clamp(26px, 3.4vw, 64px); overflow-y: auto; background: rgba(8,10,14,.9); border-left: 2px solid #4aa3df; font-family: Montserrat, Inter, sans-serif; color: #fff; }
.lgBadge { width: 100%; max-width: min(300px, 34vh); height: auto; margin-bottom: 18px; }
.lgFields { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 12px; }
.lgFields[hidden], .lgPanel [hidden] { display: none !important; }
.lgIn { position: relative; display: block; }
.lgIn svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: #c9ccd2; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.lgIn input { width: 100%; box-sizing: border-box; padding: 13px 14px 13px 44px; border: 1.5px solid #b9bcc3; border-radius: 10px; background: rgba(255,255,255,.04); color: #fff; font: 400 15px Montserrat, Inter, sans-serif; outline: none; transition: border-color .15s, background .15s; }
.lgIn input::placeholder { color: #a9adb5; font-weight: 300; }
.lgIn input:focus { border-color: #4aa3df; background: rgba(74,163,223,.08); }
#overlay #playBtn { width: 100%; max-width: 330px; margin-top: 6px; padding: 14px 18px; border-radius: 10px; background: #1a6fb5; font: 700 16px Montserrat, Inter, sans-serif; letter-spacing: .06em; color: #fff; transition: background .15s, transform .1s; }
#overlay #playBtn:hover { background: #2380cc; }
#overlay #playBtn:active { transform: translateY(1px); }
.lgPanel.busy #playBtn, .lgPanel.busy .lgNew { opacity: .6; pointer-events: none; }
.lgNew { border: none; background: none; padding: 2px 4px; color: #fff; font: 600 14px Montserrat, Inter, sans-serif; letter-spacing: .05em; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.lgNew:hover { color: #9fd0f1; }
.lgRemember { display: flex; align-items: center; gap: 8px; color: #d5d7dc; font: 400 13.5px Montserrat, Inter, sans-serif; cursor: pointer; user-select: none; }
.lgRemember input { width: 16px; height: 16px; margin: 0; accent-color: #1a6fb5; cursor: pointer; }
.lgHello { margin: 0; color: #d5d7dc; font-size: 15px; text-align: center; }
.lgHello b { color: #fff; }
.lgOut { border: none; background: none; padding: 0; color: #9fd0f1; font: inherit; text-decoration: underline; cursor: pointer; }
.lgMsg { min-height: 18px; max-width: 330px; margin: 0; color: #c9ccd2; font-size: 13px; text-align: center; }
.lgMsg.bad { color: #ff8a8a; }
.lgPanel #installRow { max-width: 330px; text-align: center; }
@media (max-width: 760px) {
  #overlay { background-position: 30% center; }
  .lgLogo { left: 50%; top: 18px; width: min(42vw, 180px); transform: translateX(-50%); }
  .lgPanel { top: auto; left: 0; width: 100%; max-height: calc(100% - 90px); justify-content: flex-start; gap: 12px; padding: 22px 16px 28px; border-left: none; border-top: 2px solid #4aa3df; }
  .lgBadge { max-width: 200px; margin-bottom: 6px; }
}
@media (max-height: 520px) and (min-width: 761px) {
  .lgPanel { justify-content: flex-start; gap: 10px; padding-top: 22px; }
  .lgBadge { max-width: 180px; margin-bottom: 4px; }
}