/* Lo común del juego y los paneles (tienda, renacer, opciones). Lo que está siempre en pantalla va en hud.css.
   La regla: que parezca un simulador de Roblox y no una página web. Colores vivos, todo con borde de tinta grueso y una
   sombra dura abajo, letras gordas con borde, y los paneles claros y alegres en vez de cajas azul oscuro. */
@font-face { font-family: 'Juego'; font-weight: 800; font-display: block; src: url(../fonts/mplus-rounded-800.woff2) format('woff2'); }
:root {
  --ink: #1b1740; --gold: #ffd23a; --bad: #ff4b5e; --good: #4dff88; --sky: #4fc3ff; --pink: #ff5fa8; --violet: #b07bff;
  /* Los colores de los botones: de arriba hacia abajo. */
  --naranja: linear-gradient(#ffb23e, #f2701c); --azul: linear-gradient(#56c2ff, #1f86e6); --violeta: linear-gradient(#c38cff, #8448e0);
  --verde: linear-gradient(#8fe65a, #35b53a); --amarillo: linear-gradient(#ffe45c, #f7b21e); --rojo: linear-gradient(#ff7a7a, #e3324a);
  --rosa: linear-gradient(#ff8fd0, #e0509f); --noche: linear-gradient(#3f3780, #241d52); --gris: linear-gradient(#b9b3d6, #8780ad);
  --barra: linear-gradient(#ffe45c, #f7a81e);
  /* El papel de los paneles y lo que se escribe encima. */
  --papel: #fff6dc; --papel2: #ffe9b0; --texto: #3a2f5a; --suave: #8d7fb0;
  --stroke: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 -2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink), 0 3px 0 var(--ink);
}
/* El color de cada panel y de cada pestaña: el claro de arriba y el fuerte de abajo. Sin clase, queda el azul. */
:root, .c-azul { --c1: #56c2ff; --c2: #1f86e6; } .c-violeta { --c1: #c38cff; --c2: #8448e0; } .c-naranja { --c1: #ffb23e; --c2: #f2701c; }
.c-rosa { --c1: #ff8fd0; --c2: #e0509f; } .c-verde { --c1: #8fe65a; --c2: #35b53a; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #bfe6ff; color: #fff; font: 800 15px 'Juego', system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-user-select: none; user-select: none; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; letter-spacing: inherit; }
/* Los dibujos: toman el tamaño de la letra que tienen al lado. */
.ic { width: 1.2em; height: 1.2em; vertical-align: -0.26em; display: inline-block; overflow: visible; flex: none; }
/* Letra con borde de tinta: el borde va por detrás del relleno, así no la adelgaza. */
.t { -webkit-text-stroke: 0.3em var(--ink); paint-order: stroke fill; text-shadow: none; }

#hud { position: fixed; inset: 0; pointer-events: none; }

/* Rayas de velocidad: aparecen en los bordes cuando se corre rápido. */
#lines { position: absolute; inset: -10%; opacity: 0; background: repeating-conic-gradient(from 0deg at 50% 46%, rgba(255, 255, 255, 0) 0deg 5deg, rgba(255, 255, 255, .5) 5.4deg 5.9deg, rgba(255, 255, 255, 0) 6.3deg 11deg); -webkit-mask-image: radial-gradient(circle at 50% 46%, transparent 0 38%, #000 82%); mask-image: radial-gradient(circle at 50% 46%, transparent 0 38%, #000 82%); animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(11deg); } }
/* Borde rojo: algo te corre de atrás. */
#vignette { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; box-shadow: inset 0 0 120px 30px rgba(255, 30, 60, .75); }
#vignette.on { opacity: 1; animation: throb .5s ease-in-out infinite alternate; }
@keyframes throb { from { opacity: .55; } to { opacity: 1; } }
/* Destello blanco al reaparecer o viajar: tapa el salto de la cámara. */
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
#flash.on { animation: flash .45s ease-out; }
@keyframes flash { from { opacity: .9; } to { opacity: 0; } }

@keyframes pop { from { transform: scale(.85); } to { transform: scale(1.15); } }
@keyframes nudge { 0%, 70%, 100% { transform: rotate(-4deg); } 78% { transform: rotate(-13deg) scale(1.1); } 86% { transform: rotate(6deg) scale(1.1); } 94% { transform: rotate(-8deg); } }
@keyframes bump { from { transform: scale(1.3); } to { transform: scale(1); } }
@keyframes feed { from { opacity: 0; transform: translateX(-10px); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } to { opacity: 0; } }

/* Arriba al centro: el cartel grande. */
#top { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: min(92vw, 860px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
/* Va más abajo que la meta de la guía (arriba al centro), para que nunca se pisen. */
#banner { display: flex; flex-direction: column; align-items: center; opacity: 0; transition: opacity .35s; margin-top: 17vh; }
#banner.on { opacity: 1; }
#banner b { font-size: clamp(34px, 7.6vw, 84px); font-style: italic; letter-spacing: .02em; line-height: 1; text-shadow: -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink), 0 -3px 0 var(--ink), -3px 0 0 var(--ink), 3px 0 0 var(--ink), 0 7px 0 var(--ink); }
#banner span { font-size: clamp(14px, 2.3vw, 24px); text-shadow: var(--stroke); margin-top: 6px; }
#banner span:empty { display: none; }
#banner.on b { animation: slam .32s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes slam { from { transform: scale(2.2) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
#banner.gold b { color: var(--gold); } #banner.good b { color: var(--good); } #banner.bad b { color: #ff8a96; } #banner.pink b { color: #ff9fd0; }
#banner.small { margin-top: 15vh; } #banner.small b { font-size: clamp(22px, 4vw, 44px); }

/* Números que flotan al ganar velocidad. */
#floaters { position: absolute; inset: 0; overflow: hidden; }
.fl { position: absolute; white-space: nowrap; animation: floatUp .8s ease-out forwards; }
.fl.gold { color: var(--gold); }
@keyframes floatUp { from { transform: translate(-50%, 0) scale(.7); opacity: 0; } 15% { transform: translate(-50%, -10px) scale(1.1); opacity: 1; } to { transform: translate(-50%, -70px) scale(1); opacity: 0; } }
.cf { position: absolute; top: 26vh; width: 10px; height: 15px; border-radius: 2px; animation: cf 1.5s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes cf { from { transform: translate(0, 0) rotate(0); opacity: 1; } 70% { opacity: 1; } to { transform: translate(var(--dx), 58vh) rotate(760deg); opacity: 0; } }

/* Avisos cortos: letras con borde, sin caja. */
/* 2.1: más arriba, para no pisar los números que suben de la cabeza del muñeco. */
#toasts { position: absolute; left: 50%; top: 29vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.toast { animation: toast 2.4s ease-out forwards; white-space: nowrap; }
.toast.good { color: #9dffb4; } .toast.bad { color: #ff9aa5; } .toast.gold { color: #ffe27a; }
@keyframes toast { from { transform: translateY(12px) scale(.8); opacity: 0; } 8% { transform: translateY(0) scale(1.08); opacity: 1; } 14% { transform: scale(1); } 85% { opacity: 1; } to { opacity: 0; } }

/* Carga. */
#loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: linear-gradient(#7a4cff, #ff5fb0); z-index: 20; transition: opacity .4s; }
#loading.out { opacity: 0; pointer-events: none; }
#loading b { font-size: clamp(34px, 7vw, 68px); font-style: italic; text-shadow: -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink), 0 7px 0 var(--ink); }
#loading .bar { width: min(70vw, 380px); height: 22px; border-radius: 999px; background: #2b2350; border: 4px solid var(--ink); overflow: hidden; }
#loading .bar i { display: block; height: 100%; width: 0; background: linear-gradient(#ffd45a, #ffa41f); transition: width .15s; }
#loading span { font-size: 15px; text-shadow: var(--stroke); }

/* ============ Paneles: tienda, renacer y opciones ============
   Todo se mide en em contra la letra de #overlay, que sigue el alto de la pantalla: en un celular se achica entero.
   La tienda va a la derecha, para que se vea el muñeco con lo que se va poniendo; los otros dos, al centro. */
/* Toda ventana se cierra tocando afuera: la tienda deja ver al muñeco (sin el fondo oscuro) pero también recibe el toque. */
#overlay { position: fixed; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: flex-end; padding: 1.2em 1.3em 1.6em; pointer-events: auto; font-size: clamp(10px, min(1.9vh, 1.15vw), 22px); letter-spacing: .02em; color: var(--texto); }
#overlay.center { justify-content: center; background: rgba(24, 16, 60, .5); pointer-events: auto; }
#card {
  position: relative; pointer-events: auto; width: min(35em, 94vw); max-height: 100%; display: flex; flex-direction: column; border-radius: 1.7em;
  background: radial-gradient(circle at .8em .8em, var(--papel2) .17em, transparent .2em) 0 0 / 1.6em 1.6em, var(--papel);
  border: .3em solid var(--ink); box-shadow: 0 .55em 0 var(--ink), 0 1.4em 2.6em rgba(10, 8, 30, .4); animation: cardIn .22s cubic-bezier(.2, 1.4, .4, 1);
}
#card.shop { width: min(47em, 50vw); height: 100%; }
@keyframes cardIn { from { transform: scale(.85) translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }

/* La cabecera: una franja del color del panel con rayas, el dibujo asomando por la esquina y el título con borde. */
#card header {
  position: relative; flex: none; display: flex; align-items: center; gap: .7em; padding: .5em .65em .58em 5em; border-radius: 1.4em 1.4em 0 0;
  background: repeating-linear-gradient(-55deg, #ffffff24 0 .8em, #fff0 .8em 1.7em), linear-gradient(var(--c1), var(--c2)); border-bottom: .3em solid var(--ink); box-shadow: inset 0 .24em 0 #ffffff70;
}
#card header > .ic { position: absolute; left: -.9em; top: -1.15em; width: 5.4em; height: 5.4em; transform: rotate(-9deg); filter: drop-shadow(0 .22em 0 #1b174059); }
#card header h2 { margin: 0; flex: 1; font-size: 2.15em; line-height: 1.1; letter-spacing: .05em; color: #fff; -webkit-text-stroke: .25em var(--ink); paint-order: stroke fill; white-space: nowrap; }
/* El contador de victorias de la cabecera: oscuro, para que se lea sobre cualquier color. */
.pill { position: relative; display: inline-flex; align-items: center; height: 1.9em; padding: 0 .85em .06em 2.15em; border-radius: 1em; background: var(--noche); border: .2em solid var(--ink); box-shadow: 0 .2em 0 var(--ink), inset 0 .16em 0 #ffffff33; font-size: 1.35em; color: var(--gold); -webkit-text-stroke: .24em var(--ink); paint-order: stroke fill; }
.pill .ic { position: absolute; left: -.5em; top: 50%; width: 2.5em; height: 2.5em; transform: translateY(-54%) rotate(-8deg); filter: drop-shadow(0 .1em 0 #1b174059); }
.x { flex: none; width: 3.3em; height: 3.3em; animation: xLate 1.6s ease-in-out infinite; border-radius: .85em; background: var(--rojo); border: .24em solid var(--ink); box-shadow: 0 .24em 0 var(--ink), inset 0 .2em 0 #ffffff66, inset 0 -.2em 0 #0000002a; display: grid; place-items: center; transition: transform .1s; }
/* 2.1: al pasar el mouse solo se agranda ("solamente debería hacer zoom", video del 23/10). */
.x:hover { transform: scale(1.12); animation: none; }
.x svg { width: 2.2em; height: 2.2em; }
@keyframes xLate { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); box-shadow: 0 .24em 0 var(--ink), 0 0 0 .3em #ffffff88; } }

/* Las pestañas de la tienda: cuelgan del costado izquierdo, cada una de su color, con su dibujo. La elegida sale más. */
.tabs { position: absolute; right: calc(100% + .3em); top: 5.9em; display: flex; flex-direction: column; align-items: flex-end; gap: .5em; }
.tabs button {
  position: relative; width: 6.3em; padding: .3em .1em .35em .2em; border-radius: 1.1em 0 0 1.1em; border: .26em solid var(--ink); border-right: 0;
  background: linear-gradient(var(--c1), var(--c2)); box-shadow: 0 .3em 0 var(--ink), inset 0 .22em 0 #ffffff66, inset 0 -.22em 0 #0000002a;
  display: flex; flex-direction: column; align-items: center; color: #fff; filter: saturate(.8) brightness(.84); transform-origin: right center; transform: scale(.88); transition: transform .1s, filter .1s;
}
.tabs button:hover { filter: none; }
.tabs button.on { filter: none; transform: none; width: 7.1em; }
.tabs button i { display: block; width: 3.1em; height: 3.1em; filter: drop-shadow(0 .14em 0 #1b174059); }
.tabs button i svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tabs button.on i { transform: rotate(-6deg) scale(1.08); }
.tabs button b { font-size: 1em; line-height: 1.15; white-space: nowrap; }
/* El aviso de que en esa pestaña hay algo para comprar. */
.tabs button u { position: absolute; left: -.55em; top: -.5em; min-width: 1.5em; height: 1.5em; padding: 0 .1em; border-radius: .8em; background: #ff3d3d; border: .18em solid var(--ink); display: grid; place-items: center; font-size: .9em; text-decoration: none; -webkit-text-stroke-width: .22em; animation: pop .5s ease-in-out infinite alternate; }

/* Qué hace lo que se vende en esta pestaña. */
.info { flex: none; margin: .7em 1em 0; padding: .28em .9em .36em; border-radius: .9em; background: #fff; border: .18em solid var(--ink); color: var(--texto); font-size: .98em; text-align: center; }
.info .ic { width: 1.25em; height: 1.25em; }

/* La grilla de fichas. */
.list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: .95em 1em 1.1em; display: grid; grid-template-columns: repeat(auto-fill, minmax(11.2em, 1fr)); gap: 1em .85em; align-content: start; scrollbar-width: thin; scrollbar-color: var(--c2) transparent; }
.list::-webkit-scrollbar, .body::-webkit-scrollbar { width: .85em; }
.list::-webkit-scrollbar-thumb, .body::-webkit-scrollbar-thumb { background: var(--c2); border-radius: .5em; border: .2em solid var(--papel); }
/* El título de cada grupo de aspectos: una cinta. */
.list h5 { grid-column: 1 / -1; justify-self: start; margin: .1em 0 -.2em -.2em; padding: .08em .9em .16em; border-radius: .8em; background: linear-gradient(var(--c1), var(--c2)); border: .2em solid var(--ink); box-shadow: 0 .2em 0 var(--ink); font-size: 1.1em; color: #fff; -webkit-text-stroke: .26em var(--ink); paint-order: stroke fill; letter-spacing: .06em; text-transform: uppercase; transform: rotate(-1.5deg); }

/* Una ficha: la foto grande sobre el color de su rareza, la chapita del multiplicador, el nombre y el botón. */
.item { --r1: #dfe8f7; --r2: #a9b8d8; position: relative; display: flex; flex-direction: column; gap: .28em; padding: .3em .3em .38em; border-radius: 1.2em; background: #fff; border: .24em solid var(--ink); box-shadow: 0 .32em 0 var(--ink); cursor: pointer; transition: transform .08s; }
.item:hover { transform: translateY(-.16em); }
.item:active { transform: translateY(.1em); }
.item.r1 { --r1: #c9f59a; --r2: #6fc93f; } .item.r2 { --r1: #a5e4ff; --r2: #3aa0ff; } .item.r3 { --r1: #dcb8ff; --r2: #9060f0; }
.item.r4 { --r1: #ffe98a; --r2: #ff9f1c; } .item.r5 { --r1: #ffb3d1; --r2: #f0457f; }
/* La foto de cada cosa: su dibujo si es una estela o un aura, la foto del modelo si lo tiene. Detrás, rayos de sol. */
.item .sw { position: relative; height: 8.3em; border-radius: .9em; overflow: hidden; display: grid; place-items: center; background: repeating-conic-gradient(from 8deg at 50% 58%, #ffffff3d 0 11deg, #fff0 11deg 22deg), radial-gradient(circle at 50% 50%, var(--r1), var(--r2)); box-shadow: inset 0 0 0 .14em #1b174038, inset 0 .3em 0 #ffffff47; }
.item .sw img, .item .sw .arte { position: absolute; left: 50%; top: 50%; width: 112%; height: 112%; transform: translate(-50%, -50%); object-fit: contain; filter: drop-shadow(0 .26em 0 #1b17404d); transition: transform .12s; }
.item .sw .arte { width: 96%; height: 96%; overflow: visible; }
/* Los muñecos se muestran de la cintura para arriba: enteros quedaban chicos. */
.item .sw.cuerpo img { width: 152%; height: 152%; top: 68%; }
.item:hover .sw img, .item:hover .sw .arte { transform: translate(-50%, -50%) scale(1.08) rotate(-3deg); }
/* 2.1: la chapita del multiplicador, grande y con letra oscura sobre amarillo ("este ×1.5 no se lee", video del 23/10). */
.item .chapa { position: absolute; left: -.5em; top: -.6em; z-index: 1; padding: .02em .5em .1em; border-radius: .7em; background: #ffd21f; border: .2em solid var(--ink); box-shadow: 0 .18em 0 var(--ink); font-size: 1.55em; line-height: 1.2; color: var(--ink); -webkit-text-stroke: 0; transform: rotate(-6deg); }
.item .sello { position: absolute; right: -.5em; top: -.55em; z-index: 1; width: 2.2em; height: 2.2em; border-radius: 50%; background: #fff; border: .2em solid var(--ink); box-shadow: 0 .16em 0 var(--ink); display: grid; place-items: center; transform: rotate(8deg); }
.item .sello .ic { width: 1.55em; height: 1.55em; vertical-align: 0; }
.item .sello.candado { background: none; border: 0; box-shadow: none; width: 2em; height: 2em; filter: drop-shadow(0 .14em 0 #1b174059); }
.item .sello.candado .ic { width: 2em; height: 2em; }
.item .nm { padding: 0 .15em; text-align: center; font-size: 1.04em; line-height: 1.2; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .btn { width: 100%; min-width: 0; }
/* Los estados: puesto (aro verde), no alcanza (apagado). */
.item.eq { background: #e6ffd9; box-shadow: 0 0 0 .24em #46d44f, 0 .32em 0 .24em var(--ink); }
.item.poor { background: #ece7f6; }
.item.poor .nm { color: var(--suave); }

/* Botones. El verde compra, el azul pone, el rosa saca, el gris no alcanza. */
.btn { position: relative; min-width: 6.4em; padding: .22em .6em .32em; border-radius: .8em; border: .22em solid var(--ink); background: var(--verde); box-shadow: 0 .24em 0 var(--ink), inset 0 .2em 0 #ffffff66, inset 0 -.2em 0 #0000002a; display: inline-flex; align-items: center; justify-content: center; gap: .28em; font-size: 1.12em; line-height: 1.3; color: #fff; -webkit-text-stroke: .26em var(--ink); paint-order: stroke fill; white-space: nowrap; transition: transform .08s; }
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(.16em); box-shadow: 0 .08em 0 var(--ink), inset 0 .2em 0 #ffffff66; }
.btn .ic { width: 1.4em; height: 1.4em; vertical-align: 0; filter: drop-shadow(0 .08em 0 #1b174059); }
.btn.buy { background: var(--verde); }
.btn.use { background: var(--azul); }
.btn.off { background: var(--rosa); }
.btn.set { background: linear-gradient(#c9f59a, #8fd65a); color: #f4ffe9; }
.btn.no { background: var(--gris); color: #ffd9de; }
.btn.big { width: 100%; padding: .32em .6em .42em; border-radius: .7em; font-size: 1.75em; letter-spacing: .04em; box-shadow: 0 .22em 0 var(--ink), inset 0 .16em 0 #ffffff66, inset 0 -.16em 0 #0000002a; }

/* El cuerpo de renacer y de opciones. */
.body { flex: 1; min-height: 0; padding: 1.1em 1.2em 1.2em; display: flex; flex-direction: column; gap: .7em; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--c2) transparent; }
/* Renacer: el multiplicador de ahora, la flecha y el que viene. */
.vs { display: flex; align-items: center; gap: .5em; margin-top: .3em; }
.vs > div { flex: 1; padding: .35em .4em .5em; border-radius: 1.1em; background: #fff; border: .24em solid var(--ink); box-shadow: 0 .3em 0 var(--ink); text-align: center; }
.vs small { display: block; font-size: .95em; letter-spacing: .1em; color: var(--suave); }
.vs b { display: block; font-size: 2.9em; line-height: 1.05; color: #fff; -webkit-text-stroke: .2em var(--ink); paint-order: stroke fill; }
.vs .next { background: repeating-conic-gradient(from 8deg at 50% 60%, #ffffff4d 0 11deg, #fff0 11deg 22deg), var(--amarillo); transform: rotate(2deg) scale(1.06); }
.vs .next small { color: #8a4b00; }
.vs .next b { color: #fff8c9; }
.vs > .ic { width: 3.2em; height: 3.2em; animation: empuja .7s ease-in-out infinite alternate; filter: drop-shadow(0 .16em 0 #1b174059); }
@keyframes empuja { from { transform: translateX(-.2em); } to { transform: translateX(.25em); } }
.que { text-align: center; font-size: 1.02em; color: var(--texto); }
.que .ic { width: 1.5em; height: 1.5em; }
/* Cuánto falta para poder renacer: una barra con el nivel de ahora y el que pide. */
.meta { position: relative; height: 2.3em; border-radius: 1.2em; background: var(--noche); border: .22em solid var(--ink); box-shadow: 0 .24em 0 var(--ink); overflow: hidden; }
.meta i { position: absolute; inset: 0; }
.meta i u { display: block; height: 100%; background: var(--barra); box-shadow: inset 0 .26em 0 #ffffff59; border-right: .16em solid var(--ink); }
.meta span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.1em; color: #fff; }
.warn { padding: .3em .8em .4em; border-radius: .9em; background: #ffe1e6; border: .16em dashed #e0607a; text-align: center; font-size: .95em; color: #b3264a; }
.need { padding: .45em .8em .55em; border-radius: .8em; background: var(--gris); border: .22em solid var(--ink); box-shadow: 0 .24em 0 var(--ink), inset 0 .2em 0 #ffffff59; text-align: center; font-size: 1.2em; color: #fff; -webkit-text-stroke: .24em var(--ink); paint-order: stroke fill; }
.need .ic { width: 1.5em; height: 1.5em; }

/* Opciones: arriba el jugador, con su nombre y sus números; abajo los ajustes. */
#card .me { display: flex; align-items: center; gap: .9em; }
#card .me .face { flex: none; width: 5.4em; height: 5.4em; border-radius: 1.2em; border: .24em solid var(--ink); box-shadow: 0 .28em 0 var(--ink); background: repeating-conic-gradient(from 8deg at 50% 60%, #ffffff3d 0 11deg, #fff0 11deg 22deg), radial-gradient(circle at 50% 45%, #a5e4ff, #3aa0ff); overflow: hidden; display: grid; place-items: center; transform: rotate(-3deg); }
#card .me .face { position: relative; }
/* La foto es del muñeco entero: se agranda y se sube para que en el cuadro quede la cabeza. */
#card .me .face img { position: absolute; left: -62%; top: -10%; width: 224%; height: 224%; object-fit: contain; }
#card .me .face .ic { width: 3.6em; height: 3.6em; }
#card .me .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25em; }
#card .me label, .sub { font-size: .92em; letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
#card .me .nameBox { display: flex; align-items: center; gap: .5em; }
#card .me input { flex: 1; min-width: 0; font: inherit; font-size: 1.5em; color: var(--ink); padding: .12em .55em .2em; border-radius: .6em; border: .16em solid var(--ink); background: #fff; box-shadow: inset 0 .16em 0 #1b17401f; outline: none; -webkit-user-select: text; user-select: text; }
#card .me input:focus { background: #fffbe0; box-shadow: 0 0 0 .14em var(--gold); }
#card .me .nameBox .ic { width: 2.1em; height: 2.1em; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.stats div { position: relative; padding: .28em .5em .36em 2.9em; border-radius: .9em; background: #fff; border: .18em solid var(--ink); box-shadow: 0 .2em 0 var(--ink); display: flex; flex-direction: column; min-width: 0; }
.stats div > .ic { position: absolute; left: .4em; top: 50%; width: 2.1em; height: 2.1em; transform: translateY(-50%) rotate(-6deg); }
.stats small { font-size: .76em; line-height: 1.15; letter-spacing: .03em; text-transform: uppercase; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats b { font-size: 1.3em; line-height: 1.15; color: var(--ink); white-space: nowrap; }
.ajustes { display: flex; flex-direction: column; gap: .6em; }
.sub { margin: .1em 0 -.25em; }
.row { display: flex; align-items: center; justify-content: space-between; gap: .9em; font-size: 1.15em; color: var(--texto); }
.row > span { display: flex; align-items: center; gap: .5em; }
.row > span .ic { width: 1.9em; height: 1.9em; }
.row .btn { min-width: 4.6em; font-size: 1em; }
.slide { display: flex; align-items: center; gap: .6em; }
.slide input { -webkit-appearance: none; appearance: none; font-size: 1em; width: 9.5em; height: .95em; margin: 0; border-radius: .6em; background: var(--noche); border: .16em solid var(--ink); outline: none; cursor: pointer; }
.slide input::-webkit-slider-thumb { -webkit-appearance: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--amarillo); border: .2em solid var(--ink); box-shadow: 0 .14em 0 var(--ink); }
.slide input::-moz-range-thumb { width: 1.4em; height: 1.4em; border-radius: 50%; background: #ffd23a; border: .2em solid var(--ink); }
.slide b { min-width: 2.6em; text-align: right; color: #c96a00; }
.seg { display: flex; gap: .35em; }
.seg button { padding: .14em .7em .24em; border-radius: .7em; background: #fff; border: .2em solid var(--ink); box-shadow: 0 .2em 0 var(--ink); color: var(--suave); }
.seg button.on { background: var(--azul); color: #fff; -webkit-text-stroke: .26em var(--ink); paint-order: stroke fill; box-shadow: 0 .2em 0 var(--ink), inset 0 .2em 0 #ffffff66; }

/* La flechita del mouse, con el aspecto del juego: gorda, de color, con borde blanco y oscuro, como las calcomanías
   de los botones. Amarilla en general y rosa con una estrellita sobre lo que se puede tocar.
   Aparece al soltar el mouse con ALT (o al abrir un panel). */
:root {
  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M6 4v22.5l5.8-5.3 3.9 8.9 5-2.2-3.9-8.8H25z' fill='%23231b2e' stroke='%23231b2e' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M6 4v22.5l5.8-5.3 3.9 8.9 5-2.2-3.9-8.8H25z' fill='%23ffd23a' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 10.5v8.5' stroke='%23fff' stroke-width='2' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E") 6 4;
  --mano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M6 4v22.5l5.8-5.3 3.9 8.9 5-2.2-3.9-8.8H25z' fill='%23231b2e' stroke='%23231b2e' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M6 4v22.5l5.8-5.3 3.9 8.9 5-2.2-3.9-8.8H25z' fill='%23ff5fb0' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M26.5 3.5l1.3 2.9 3.1.4-2.3 2.1.6 3.1-2.7-1.6-2.7 1.6.6-3.1-2.3-2.1 3.1-.4z' fill='%23ffd23a' stroke='%23231b2e' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4;
}
html, body, canvas, #hud, #panel { cursor: var(--flecha), auto; }
button, .item, .slide input, [data-act], #prompt, select, label, a { cursor: var(--mano), pointer; }
input[type="text"] { cursor: text; }