:root {
  color-scheme: light;
  --pink: #f1609a;
  --pink-hi: #ff8db9;
  --pink-lo: #d43683;
  --wine: #8b2458;
  --wine-dk: #5d1440;
  --gold: #ffd36b;
  --gold-lo: #e9a93a;
  --cream: #fff5ea;
  --lilac: #7452c2;
  --ui: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script: 'Dancing Script', 'Brush Script MT', cursive;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #f8b3d7; font-family: var(--ui); touch-action: none; overscroll-behavior: none; }
#app { position: relative; width: 100%; height: 100vh; height: 100dvh; max-width: 560px; margin: auto; overflow: hidden; background: linear-gradient(#b5a1f6, #ffd2ed); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
canvas#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
[hidden] { display: none !important; }

/* ---------- botones ---------- */
button { font-family: var(--ui); border: 2px solid #ffeab3; border-radius: 20px; padding: 12px 20px; min-height: 48px; color: #fff; font-size: 18px; font-weight: 700; letter-spacing: .3px; cursor: pointer; background: linear-gradient(180deg, var(--pink-hi), var(--pink-lo)); box-shadow: 0 5px 0 #a22868, 0 9px 18px #5d1c5955; text-shadow: 0 1px 2px #8b245888; touch-action: manipulation; }
button:active { transform: translateY(3px); box-shadow: 0 2px 0 #a22868, 0 4px 10px #5d1c5955; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
button:disabled { filter: grayscale(.4) brightness(.95); opacity: .8; }
button.secondary { background: linear-gradient(180deg, #b899f1, var(--lilac)); box-shadow: 0 5px 0 #5337a0, 0 9px 16px #5d1c5955; }
button.secondary:active { box-shadow: 0 2px 0 #5337a0; }
button.big { font-size: 21px; min-height: 56px; padding: 12px 28px; }
button.small { font-size: 15px; min-height: 42px; padding: 8px 16px; border-radius: 16px; }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- overlays ---------- */
.overlay { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 20px 16px max(22px, env(safe-area-inset-bottom)); isolation: isolate; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.overlay > .card { margin-top: auto; flex: none; }
#intro { background: #5d1440; }
.overlay .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: -2; }
/* En teléfonos más altos que la ilustración (Android 19.5:9 y 20:9) «cover» recortaba los costados y el engranaje dibujado
   arriba a la derecha quedaba cortado. Ahí la portada se ajusta al ancho, anclada arriba; el resto lo cubre el degradado. */
@media (max-aspect-ratio: 941/1672) { .overlay .art { object-fit: contain; object-position: center top; } }
#intro::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 56%, rgba(93, 20, 64, .8) 65%, #5d1440 72%); }
.card { width: 100%; max-width: 420px; text-align: center; color: #fff; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.card h1 { margin: 0; font-family: var(--script); font-size: clamp(44px, 13vw, 62px); line-height: .95; color: var(--gold); text-shadow: 0 3px 0 var(--wine), 0 6px 14px #3b0a2a; }
.card h1 small { display: block; font-size: .5em; color: #fff; }
.card h2 { margin: 0; font-size: 34px; color: var(--gold); text-shadow: 0 3px 0 var(--wine); }
.card p { margin: 0; line-height: 1.38; font-size: 16px; font-weight: 500; text-shadow: 0 2px 4px #5d1440; }
.card p b { color: var(--gold); }
#how { margin: 0; padding: 12px 14px 12px 30px; text-align: left; background: #fff5eaee; color: var(--wine); border: 2px solid var(--gold); border-radius: 16px; font-size: 14px; line-height: 1.4; }
#how li + li { margin-top: 4px; }
.load-error { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 12px 14px; background: #fff5eaee; border: 2px solid var(--gold); border-radius: 16px; }
.card .load-error p { color: var(--wine); text-shadow: none; font-size: 15px; font-weight: 600; }
.overlay.dim > .card { margin: auto 0; }
.overlay.dim { background: rgba(69, 17, 71, .55); backdrop-filter: blur(3px); }
.overlay.dim .card { background: linear-gradient(180deg, #ff9cc5, #c93b80); border: 3px solid var(--gold); border-radius: 26px; padding: 24px 18px; box-shadow: 0 12px 30px #3b0a2a88; max-width: 320px; }

/* ---------- HUD ---------- */
#hud { position: absolute; z-index: 4; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; pointer-events: none; }
.hud-left { display: flex; align-items: center; gap: 0; min-width: 0; }
.avatar { width: 54px; height: 54px; border-radius: 50%; border: 3px solid var(--gold); box-shadow: 0 3px 8px #62134e55; position: relative; z-index: 1; flex: none; object-fit: cover; }
.hud-bills { flex: none; margin-left: -10px; padding: 4px 10px 6px 16px; background: linear-gradient(180deg, #ff9cc5ee, #d0418aee); border: 2px solid var(--gold); border-radius: 0 18px 18px 0; box-shadow: 0 3px 8px #62134e40; min-width: 0; }
.hud-name { color: #fff; font-family: var(--script); font-size: 17px; line-height: 1; white-space: nowrap; text-shadow: 0 1px 2px var(--wine); }
.hud-name .lv { font-family: var(--ui); font-size: 11px; font-weight: 700; color: var(--gold); margin-left: 2px; }
.bar { position: relative; margin-top: 3px; width: clamp(104px, 30vw, 150px); height: 20px; border-radius: 12px; background: #fff1dcdd; border: 2px solid #fff; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(180deg, #8fdc7c, #3f9d4f); transition: width .35s cubic-bezier(.3, 1.6, .5, 1); }
.bar span { position: relative; display: block; text-align: center; font-size: 12px; line-height: 16px; font-weight: 700; color: var(--wine); white-space: nowrap; }
.hud-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.hud-row { display: flex; gap: 5px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 3px; height: 30px; padding: 0 8px 0 3px; border-radius: 18px; background: #ad3a7fe6; border: 2px solid var(--gold); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 3px 8px #62134e40; }
.pill img { width: 22px; height: 22px; object-fit: contain; }
.magnet { display: inline-flex; gap: 2px; margin-left: 3px; }
.magnet u { width: 6px; height: 6px; border-radius: 50%; background: #ffffff55; border: 1px solid #fff9; }
.magnet u.on { background: var(--gold); border-color: #fff; }
#bananaPill.active { background: linear-gradient(90deg, #f0a02a, #ffd36b, #f0a02a); background-size: 200% 100%; animation: shine 1s linear infinite; color: var(--wine); }
@keyframes shine { to { background-position: -200% 0; } }
.icon-btn { flex: none; pointer-events: auto; width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%; font-size: 13px; box-shadow: 0 3px 0 #a22868; }
.hearts { font-size: 17px; letter-spacing: 1px; white-space: nowrap; filter: drop-shadow(0 1px 1px #8b2458); }
.bump { animation: bump .35s ease; }
@keyframes bump { 40% { transform: scale(1.18); } }

/* z-index sobre las pantallas (portada, victoria) para que sus avisos también se vean */
#toast { position: absolute; z-index: 20; top: calc(max(10px, env(safe-area-inset-top)) + 92px); left: 50%; transform: translateX(-50%); max-width: 90%; padding: 0 14px; text-align: center; color: #fff; font-size: 18px; font-weight: 700; text-shadow: 0 2px 0 var(--wine), 0 3px 8px #5d1440; pointer-events: none; opacity: 0; transition: opacity .25s; }
#toast.show { opacity: 1; }

/* ---------- controles táctiles ---------- */
#controls { position: absolute; z-index: 6; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: flex-end; padding: 0 14px; pointer-events: none; }
.dpad { display: flex; gap: 12px; }
.ctl { pointer-events: auto; width: 74px; height: 74px; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; opacity: .92; touch-action: none; background: radial-gradient(circle at 50% 35%, #ffb0d0, #d43683 75%); }
.ctl svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 1px #8b2458); }
.ctl.held { transform: translateY(3px) scale(.96); box-shadow: 0 2px 0 #a22868; filter: brightness(1.1); }
.ctl.jump { width: 92px; height: 92px; background: radial-gradient(circle at 50% 35%, #ffe7a3, #f0a02a 75%); border-color: #fff; box-shadow: 0 5px 0 #b06d12, 0 9px 18px #5d1c5955; display: flex; flex-direction: column; gap: 0; }
.ctl.jump span { font-size: 13px; font-weight: 700; color: var(--wine); text-shadow: none; margin-top: -4px; }
.ctl.jump svg { stroke: var(--wine); filter: none; }

/* ---------- victoria ---------- */
.overlay.win { justify-content: center; background: radial-gradient(circle at 50% 30%, #ffd9ec, #f48fbf 60%, #b8467f); padding-top: max(16px, env(safe-area-inset-top)); }
.win-inner { width: 100%; max-width: 440px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.win-inner h2 { margin: 0; font-size: clamp(30px, 9vw, 40px); color: var(--gold); text-shadow: 0 3px 0 var(--wine), 0 6px 14px #5d1440; }
.win-inner .sub, .win-inner .gift { margin: 0; color: #fff; font-weight: 600; text-shadow: 0 2px 3px var(--wine); }
.win-inner .gift { font-size: 15px; }
.postcard-wrap { flex: 0 1 auto; min-height: 0; height: min(58vh, 58dvh); aspect-ratio: 9 / 16; border-radius: 16px; border: 4px solid var(--gold); box-shadow: 0 10px 28px #5d144088; overflow: hidden; background: #fbd3e6; animation: pop .6s cubic-bezier(.3, 1.6, .5, 1); }
.postcard-wrap { position: relative; }
.postcard-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; }
.postcard-wrap:not([data-state="ready"]) img { visibility: hidden; }
.postcard-status { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; padding: 12px; text-align: center; background: linear-gradient(180deg, #ffd9ec, #f7a8cc); }
.postcard-status p { margin: 0; color: var(--wine); font-weight: 600; font-size: 15px; }
@keyframes pop { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }

@media (min-width: 600px) { body { background: #613267; } #app { box-shadow: 0 0 60px #270e37; } }
/* H02: en teléfonos de menos de 360 px las píldoras de monedas y bananas se apilan para no invadir el panel de billetes */
@media (max-width: 359px) { .hud-right > .hud-row:first-child { flex-direction: column; align-items: flex-end; gap: 4px; } }
/* H05: en horizontal la ayuda ocupa casi todo el alto; se oscurece el arte entero para que el texto se lea al desplazarse */
@media (max-height: 500px) { #intro::after { background: rgba(93, 20, 64, .82); } }
@media (max-height: 560px) { .postcard-wrap { height: 46vh; } .card h1 { font-size: 40px; } .ctl { width: 62px; height: 62px; } .ctl.jump { width: 76px; height: 76px; } }