@font-face { font-family: "Lilita One"; src: url(LilitaOne.woff2) format("woff2"); font-display: block; }
@font-face { font-family: "Fredoka"; src: url(Fredoka.woff2) format("woff2"); font-weight: 300 700; font-display: swap; }
:root { --st: env(safe-area-inset-top, 0px); --sr: env(safe-area-inset-right, 0px); --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px);
  --cs: 1; --acc: #29e7ff; --acc2: #ff3ea5; --yel: #ffd23f; --pan: #17113a; --pan2: #231a55; --txt: #f4efff; --mut: #b9b0e6;
  --bs: calc(clamp(76px, 17vmin, 124px) * var(--cs)); --sr0: calc(var(--bs) * .5); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0d0a24; color: var(--txt); font-family: Fredoka, system-ui, "Segoe UI", Roboto, sans-serif; overscroll-behavior: none; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#cv { position: fixed; inset: 0; width: 100vw; height: 100vh; width: 100dvw; height: 100dvh; display: block; }
#sa { position: fixed; visibility: hidden; padding: var(--st) var(--sr) var(--sb) var(--sl); pointer-events: none; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--yel); outline-offset: 2px; }
/* ---- táctil ---- */
#tz { position: fixed; inset: 0; z-index: 5; touch-action: none; display: none; }
body.playing #tz { display: block; }
#stick { position: fixed; inset: 0; z-index: 6; pointer-events: none; display: none; }
body.touch.playing #stick { display: block; }
#stickBase { position: absolute; width: calc(clamp(120px, 26vmin, 190px) * var(--cs)); aspect-ratio: 1; border-radius: 50%; left: calc(var(--sl) + 4vmin); bottom: calc(var(--sb) + 5vmin); background: radial-gradient(circle, rgba(255,255,255,.10), rgba(255,255,255,.04) 70%); border: 3px solid rgba(255,255,255,.28); opacity: .55; transition: opacity .15s; }
body.lefty #stickBase { left: auto; right: calc(var(--sr) + 4vmin); }
#stick.on #stickBase { left: 0; top: 0; bottom: auto; right: auto; opacity: .95; background: radial-gradient(circle, rgba(41,231,255,.22), rgba(41,231,255,.06) 70%); border-color: rgba(41,231,255,.7); }
#stickKnob { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; margin: -23% 0 0 -23%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #8fe9ff 55%, #1fa4d6); box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.ar { position: absolute; width: 0; height: 0; border: 9px solid transparent; opacity: .55; }
.ar.u { left: calc(50% - 9px); top: 5px; border-bottom: 13px solid #fff; border-top: 0; } .ar.d { left: calc(50% - 9px); bottom: 5px; border-top: 13px solid #fff; border-bottom: 0; }
.ar.l { top: calc(50% - 9px); left: 5px; border-right: 13px solid #fff; border-left: 0; } .ar.r { top: calc(50% - 9px); right: 5px; border-left: 13px solid #fff; border-right: 0; }
#stick[data-dir=u] .ar.u, #stick[data-dir=d] .ar.d, #stick[data-dir=l] .ar.l, #stick[data-dir=r] .ar.r { opacity: 1; filter: drop-shadow(0 0 6px #29e7ff); }
.tbtn { position: fixed; z-index: 7; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: var(--bs); height: var(--bs); border-radius: 50%; border: 4px solid rgba(255,255,255,.75); color: #fff; font: 400 calc(var(--bs) * .17)/1 "Lilita One", system-ui; letter-spacing: .5px; padding: 0; touch-action: none; box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.4); text-shadow: 0 2px 0 rgba(0,0,0,.4); transition: transform .06s, filter .06s; }
.tbtn svg { width: 46%; height: 46%; filter: drop-shadow(0 2px 0 rgba(0,0,0,.35)); }
body.touch.playing .tbtn { display: flex; }
#bNitro { right: calc(var(--sr) + 3.2vmin); bottom: calc(var(--sb) + 4vmin); background: radial-gradient(circle at 35% 28%, #7fefff, #1c9be0 55%, #0b4f9c); }
#bSmoke { right: calc(var(--sr) + 3.2vmin + var(--bs) * 1.08); bottom: calc(var(--sb) + 4vmin + var(--bs) * .62); width: calc(var(--bs) * .88); height: calc(var(--bs) * .88); background: radial-gradient(circle at 35% 28%, #d7dce9, #8c93a8 55%, #4e5570); }
body.lefty #bNitro { right: auto; left: calc(var(--sl) + 3.2vmin); } body.lefty #bSmoke { right: auto; left: calc(var(--sl) + 3.2vmin + var(--bs) * 1.08); }
.tbtn.down { transform: scale(.92) translateY(3px); filter: brightness(1.25); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
/* ---- botones superiores ---- */
#topbtns { position: fixed; z-index: 9; top: calc(var(--st) + 6px); right: calc(var(--sr) + 8px); display: none; gap: 8px; }
body.playing #topbtns { display: flex; }
.ibtn { width: 46px; height: 46px; border-radius: 14px; border: 2px solid rgba(255,255,255,.5); background: rgba(14,9,40,.66); display: flex; align-items: center; justify-content: center; padding: 0; font-size: 20px; backdrop-filter: blur(3px); }
.ibtn svg { width: 24px; height: 24px; fill: #fff; } .ibtn:active { transform: scale(.92); } .ibtn.on { border-color: var(--acc); }
/* ---- banner de nivel ---- */
#banner { position: fixed; z-index: 8; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; opacity: 0; transform: scale(.8); transition: opacity .25s, transform .35s cubic-bezier(.2,1.4,.4,1); padding: 0 16px; }
#banner.on { opacity: 1; transform: scale(1); }
.bn1 { font: 400 clamp(36px, 9vmin, 84px)/1 "Lilita One"; color: #ffe066; -webkit-text-stroke: 3px #2b1055; paint-order: stroke fill; text-shadow: 0 6px 0 #2b1055, 0 10px 24px rgba(0,0,0,.5); }
.bn2 { font: 400 clamp(18px, 4.2vmin, 34px)/1.2 "Lilita One"; color: #fff; text-shadow: 0 3px 0 #2b1055, 0 0 14px rgba(0,0,0,.7); margin-top: 6px; }
.bn3 { font: 500 clamp(14px, 3vmin, 22px)/1.3 Fredoka; color: #d8f6ff; margin-top: 8px; text-shadow: 0 2px 6px #000; }
#toast { position: fixed; z-index: 30; left: 50%; bottom: calc(var(--sb) + 18px); transform: translate(-50%, 20px); background: rgba(20,12,50,.92); border: 2px solid var(--acc); padding: 10px 16px; border-radius: 14px; opacity: 0; transition: .25s; pointer-events: none; max-width: 90vw; text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#fs-aviso { position: fixed; z-index: 40; left: 50%; top: calc(var(--st) + 10px); transform: translate(-50%, -140%); display: flex; gap: 10px; align-items: center; background: rgba(20,12,50,.96); border: 2px solid var(--yel); border-radius: 14px; padding: 8px 10px 8px 14px; transition: transform .3s; max-width: 94vw; }
#fs-aviso.show { transform: translate(-50%, 0); }
#fs-aviso .x { background: none; border: 0; color: var(--mut); font-size: 18px; padding: 6px; }
/* ---- pantallas ---- */
#ui { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.scr { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(var(--st) + 10px) calc(var(--sr) + 10px) calc(var(--sb) + 10px) calc(var(--sl) + 10px); pointer-events: auto; overflow: auto; touch-action: pan-y; background: rgba(8,5,26,.55); animation: fade .25s; }
.scr[hidden] { display: none; }
#sMenu { background: radial-gradient(ellipse at 50% 30%, rgba(8,5,26,.15), rgba(8,5,26,.72)); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.card { width: min(100%, 460px); max-height: 100%; overflow: auto; background: linear-gradient(180deg, var(--pan2), var(--pan)); border: 2px solid #5b49b8; border-radius: 22px; padding: clamp(14px, 3vmin, 24px); box-shadow: 0 14px 50px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.12); touch-action: pan-y; }
.card.wide { width: min(100%, 640px); }
h2 { margin: 0 0 12px; font: 400 clamp(24px, 5vmin, 34px)/1.1 "Lilita One"; text-align: center; color: var(--yel); text-shadow: 0 3px 0 #2b1055; }
.menu { display: grid; gap: clamp(10px, 3vmin, 26px); width: min(100%, 520px); justify-items: center; }
.brand { text-align: center; }
h1 { margin: 0; line-height: .92; font-family: "Lilita One"; font-weight: 400; display: flex; flex-direction: column; align-items: center; }
.t1 { font-size: clamp(54px, 15vmin, 120px); color: #ffe066; -webkit-text-stroke: 4px #2b1055; paint-order: stroke fill; text-shadow: 0 7px 0 #b3380f, 0 10px 0 #2b1055, 0 16px 30px rgba(0,0,0,.5); letter-spacing: 2px; background: linear-gradient(#fff6b0, #ffb800); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 0 #2b1055); }
.t2 { font-size: clamp(30px, 8.6vmin, 68px); color: #29e7ff; background: linear-gradient(#b9f6ff, #19b8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 4px 0 #2b1055) drop-shadow(0 0 12px rgba(41,231,255,.5)); letter-spacing: 3px; margin-top: 2px; }
.by { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: clamp(4px, 1.4vmin, 12px); }
.by img { height: clamp(24px, 5vmin, 34px); width: auto; border-radius: 6px; } .by b { font: 400 clamp(15px, 3.2vmin, 22px) "Lilita One"; letter-spacing: 3px; color: #e6e1ff; }
.best { margin: 6px 0 0; color: var(--mut); font-size: clamp(13px, 2.6vmin, 17px); }
.btns { display: grid; gap: clamp(7px, 1.6vmin, 12px); width: min(100%, 360px); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 18px; border-radius: 16px; border: 2px solid #6a58d1; background: linear-gradient(180deg, #4a3a9c, #35288a); color: #fff; font: 400 clamp(17px, 3.2vmin, 21px) "Lilita One"; letter-spacing: .5px; box-shadow: 0 5px 0 #1d1458, 0 8px 16px rgba(0,0,0,.35); transition: transform .08s; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #1d1458; }
.btn.pri { background: linear-gradient(180deg, #ffd23f, #ff9a1f); border-color: #ffe9a0; color: #3b1c00; text-shadow: 0 1px 0 rgba(255,255,255,.4); box-shadow: 0 5px 0 #a8560a, 0 8px 18px rgba(0,0,0,.4); }
.btn.pri:active { box-shadow: 0 2px 0 #a8560a; }
.btn.big { min-height: 62px; font-size: clamp(22px, 4.4vmin, 30px); }
.btn.sec { background: linear-gradient(180deg, #3a3560, #2a2550); border-color: #55508a; }
.btn.sq { min-height: 46px; padding: 6px 8px; font-size: clamp(13px, 2.4vmin, 16px); flex: 1; flex-direction: column; gap: 0; line-height: 1.1; text-align: center; }
.row3 { display: flex; gap: 8px; } .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; } .row .btn { flex: 1 1 130px; }
.stack { display: grid; gap: 10px; }
.how { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: clamp(14px, 2.5vmin, 17px); line-height: 1.35; }
.how b { color: var(--yel); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; font-size: 14px; margin: 6px 0; } .legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 6px; vertical-align: -2px; border: 2px solid #fff; }
.ctl { font-size: 13px; color: var(--mut); line-height: 1.5; margin: 8px 0 0; }
.form { display: grid; gap: 12px; } .form label { display: grid; gap: 4px; font-size: 15px; color: var(--mut); }
.form input[type=text], .form select { width: 100%; min-height: 44px; border-radius: 12px; border: 2px solid #5b49b8; background: #0f0a2a; color: #fff; padding: 6px 12px; font: 500 17px Fredoka; -webkit-user-select: text; user-select: text; }
.form input[type=range] { width: 100%; height: 32px; accent-color: var(--acc); } .form .chk { display: flex; align-items: center; gap: 10px; color: var(--txt); min-height: 40px; } .form .chk input { width: 24px; height: 24px; accent-color: var(--acc); }
.form.inl { grid-template-columns: 1fr auto; align-items: end; margin-top: 12px; } .form.inl .btn { min-height: 44px; }
.tabs { display: flex; gap: 6px; margin-bottom: 10px; } .tabs button { flex: 1; min-height: 40px; border-radius: 12px; border: 2px solid #4a3c96; background: #1d1650; font: 400 15px "Lilita One"; padding: 4px; } .tabs button.on { background: var(--yel); color: #3b1c00; border-color: #fff2b8; }
.rbody { min-height: 150px; max-height: 46vh; overflow: auto; touch-action: pan-y; } .rbody ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rbody li { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; background: rgba(255,255,255,.06); border-radius: 10px; padding: 6px 12px; font-size: 17px; } .rbody li b { color: var(--yel); font-family: "Lilita One"; font-weight: 400; } .rbody li i { font-style: normal; font-family: "Lilita One"; color: #9fe9ff; } .rbody li.me { background: rgba(255,210,63,.2); outline: 2px solid var(--yel); } .rbody li small { color: var(--mut); display: block; font-size: 12px; }
.rbody li:nth-child(1) b::after { content: " 🥇"; } .rbody li:nth-child(2) b::after { content: " 🥈"; } .rbody li:nth-child(3) b::after { content: " 🥉"; }
.mut { color: var(--mut); text-align: center; margin: 24px 8px; }
.sumry { display: grid; gap: 6px; font-size: clamp(16px, 3vmin, 20px); } .sumry div { display: flex; justify-content: space-between; gap: 12px; background: rgba(255,255,255,.06); padding: 8px 12px; border-radius: 10px; } .sumry b { color: #9fe9ff; font-family: "Lilita One"; font-weight: 400; } .sumry .tot { background: rgba(255,210,63,.18); } .sumry .tot b { color: var(--yel); font-size: 1.3em; }
.bigscore { text-align: center; font: 400 clamp(46px, 11vmin, 84px)/1 "Lilita One"; color: #fff; text-shadow: 0 5px 0 #2b1055, 0 0 24px rgba(41,231,255,.5); }
.tag { text-align: center; margin: 4px 0 8px; color: var(--yel); font: 400 18px "Lilita One"; min-height: 22px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; font-size: 14px; text-align: center; } .stats div { background: rgba(255,255,255,.07); border-radius: 10px; padding: 6px 4px; } .stats b { display: block; font: 400 22px "Lilita One"; color: #9fe9ff; }
.msg { min-height: 22px; text-align: center; margin: 8px 0 0; font-size: 15px; color: var(--mut); } .msg.ok { color: #7cfc9a; } .msg.err { color: #ff8a8a; }
/* ---- pantallas bajas (teléfono horizontal) ---- */
@media (max-height: 520px) and (orientation: landscape) {
  .menu { grid-template-columns: 1fr 1fr; width: min(100%, 860px); align-items: center; gap: 18px; } .btns { width: 100%; gap: 6px; } .btn { min-height: 42px; padding: 4px 14px; } .btn.big { min-height: 52px; } .btn.sq { min-height: 40px; }
  .t1 { font-size: clamp(48px, 17vh, 90px); } .t2 { font-size: clamp(26px, 9vh, 50px); }
  .card { padding: 12px 16px; border-radius: 16px; } h2 { margin-bottom: 6px; font-size: 24px; } .how { gap: 4px; font-size: 13px; line-height: 1.25; } .ctl { font-size: 12px; margin-top: 4px; } .row { margin-top: 8px; } .legend { font-size: 12px; margin: 2px 0; }
  .rbody { max-height: 38vh; min-height: 80px; } .bigscore { font-size: 44px; } .stats { font-size: 12px; } .stats b { font-size: 18px; } .stats div { padding: 3px; } .form { gap: 6px; }
  #banner { top: 20%; } .sumry { gap: 3px; font-size: 15px; } .sumry div { padding: 5px 10px; } .form.inl { margin-top: 6px; }
  .card.wide#sOverC, #sOver .card { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; align-items: start; } #sOver h2, #sOver .row { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .ibtn { width: 40px; height: 40px; border-radius: 12px; } #topbtns { gap: 5px; right: calc(var(--sr) + 6px); } }
@media (max-width: 380px) { .row3 { flex-wrap: wrap; } .tabs button { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }