/* ============================================================
   RICK & MORTY — Portal de Aventuras
   Estilos principales
   ============================================================ */

:root {
  --g: #39FF14; --g2: #00c85a; --b: #00B5CC; --b2: #0077a8;
  --y: #FFE135; --o: #FF6B00; --pu: #9B59B6; --re: #E74C3C;
  --bg: #08100a; --bg2: #0d1a0d; --bg3: #121f12; --card: #0c1f0c; --card2: #102210;
  --brd: #1a3a1a; --tx: #c8f0c8; --tx2: #e8ffe8; --mu: #4a7a4a;
  --F: 'Nunito', sans-serif; --FP: 'Press Start 2P', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: var(--F); background: var(--bg); color: var(--tx2); min-height: 100vh; overflow-x: hidden; }

/* ── BACKGROUND ── */
#bg-base { position: fixed; inset: 0; z-index: 0; background: var(--bg); }
#bg-img  { position: fixed; inset: 0; z-index: 1; background-size: cover; background-position: center; opacity: .2; transition: opacity .5s, background-image .8s; }
#bg-ov   { position: fixed; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(8,16,10,.75) 0%, rgba(8,16,10,.35) 50%, rgba(8,16,10,.9) 100%); pointer-events: none; }

.pfx { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.bbl { position: absolute; border-radius: 50%; animation: bup linear infinite; }
@keyframes bup {
  0%   { transform: translateY(110vh); opacity: 0; }
  10%  { opacity: .25; }
  90%  { opacity: .1; }
  100% { transform: translateY(-60px); opacity: 0; }
}

/* ── LAYOUT ── */
#app { position: relative; z-index: 10; min-height: 100vh; }

/* ── MUSIC BAR ── */
#mbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 500; background: rgba(8,16,10,.97); border-top: 1px solid var(--brd); padding: .4rem 1rem; display: flex; align-items: center; gap: .7rem; backdrop-filter: blur(12px); transform: translateY(100%); transition: transform .3s; }
#mbar.show { transform: none; }
.mbar-ico   { font-size: 1rem; animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mbar-info  { flex: 1; min-width: 0; }
.mbar-title { font-size: .65rem; font-weight: 800; color: var(--g); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbar-sub   { font-size: .55rem; color: var(--mu); }
.mbar-prog  { flex: 1; height: 4px; background: var(--bg3); border-radius: 2px; cursor: pointer; max-width: 180px; }
.mbar-fill  { height: 100%; background: linear-gradient(90deg, var(--g), var(--b)); border-radius: 2px; transition: width .4s linear; }
.mctrl { background: transparent; border: 1px solid var(--brd); color: var(--tx); padding: .22rem .5rem; border-radius: 5px; cursor: pointer; font-size: .65rem; transition: all .2s; }
.mctrl:hover { border-color: var(--g); color: var(--g); }
input[type=range].mvol { width: 65px; height: 3px; accent-color: var(--g); cursor: pointer; }

/* ── DIALOG OVERLAY ── */
#dlgov { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); z-index: 9000; width: min(700px, 96vw); opacity: 0; pointer-events: none; transition: opacity .3s; }
#dlgov.show { opacity: 1; pointer-events: auto; }
.dlg-bubble  { background: rgba(8,16,10,.95); border: 2px solid var(--g); border-radius: 14px; padding: .8rem 1rem 1rem; box-shadow: 0 0 30px rgba(57,255,20,.12); backdrop-filter: blur(12px); }
.dlg-row     { display: flex; align-items: flex-end; gap: .8rem; }
.dlg-av      { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--g); object-fit: cover; flex-shrink: 0; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; overflow: hidden; }
.dlg-av img  { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dlg-img-wrap { width: 100%; overflow: hidden; border-radius: 8px; margin-bottom: .5rem; display: none; transition: max-height .2s; }
.dlg-img-wrap img { width: 100%; border-radius: 8px; }
.dlg-body    { flex: 1; }
.dlg-name    { font-size: .6rem; font-weight: 900; color: var(--g); letter-spacing: 2px; margin-bottom: .25rem; }
.dlg-text    { font-size: .82rem; color: var(--tx2); line-height: 1.55; font-style: italic; }
.dlg-close   { position: absolute; top: .4rem; right: .6rem; background: transparent; border: none; color: var(--mu); cursor: pointer; font-size: .9rem; transition: color .2s; }
.dlg-close:hover { color: var(--tx2); }
.dlg-playbtn { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .55rem; border: 1px solid var(--g); background: transparent; color: var(--g); border-radius: 20px; cursor: pointer; font-size: .6rem; font-weight: 800; transition: all .2s; }
.dlg-playbtn:hover { background: rgba(57,255,20,.1); }
.dlg-playbtn.on { animation: pglow 1s ease infinite; }
@keyframes pglow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(57,255,20,.4); }
  50%       { box-shadow: 0 0 0 6px rgba(57,255,20,0); }
}
.dlg-foot    { display: flex; align-items: center; gap: .5rem; margin-top: .45rem; flex-wrap: wrap; }
.dlg-counter { font-size: .58rem; color: var(--mu); font-weight: 800; background: var(--bg3); border: 1px solid var(--brd); border-radius: 20px; padding: .1rem .38rem; }
.dlg-nextbtn { display: inline-flex; align-items: center; gap: .25rem; padding: .22rem .6rem; border: 1px solid var(--b); background: transparent; color: var(--b); border-radius: 20px; cursor: pointer; font-size: .6rem; font-weight: 800; transition: all .2s; }
.dlg-nextbtn:hover { background: rgba(0,181,204,.12); }

/* ── Dialog Admin cards ── */
.dlg-card          { background: var(--bg3); border: 1px solid var(--brd); border-radius: 10px; margin-bottom: .55rem; overflow: hidden; transition: border-color .2s, box-shadow .2s; cursor: default; }
.dlg-card:hover    { border-color: rgba(155,89,182,.35); }
.dlg-card.drag-over { border-color: var(--pu); box-shadow: 0 0 0 2px rgba(155,89,182,.35); }
.dlg-card-head     { display: flex; align-items: center; gap: .45rem; padding: .5rem .7rem; background: var(--card); border-bottom: 1px solid var(--brd); flex-wrap: wrap; }
.dlg-drag-handle   { color: var(--mu); font-size: 1rem; cursor: grab; padding: 0 .1rem; user-select: none; flex-shrink: 0; }
.dlg-drag-handle:active { cursor: grabbing; }
.dlg-order         { font-family: var(--FP); font-size: .5rem; color: var(--pu); background: rgba(155,89,182,.12); border: 1px solid rgba(155,89,182,.28); border-radius: 20px; padding: .12rem .4rem; flex-shrink: 0; }
.dlg-card-char     { font-size: .72rem; font-weight: 800; color: var(--tx2); }
.dlg-card-screen   { font-size: .6rem; color: var(--mu); background: var(--bg); border: 1px solid var(--brd); border-radius: 4px; padding: .06rem .28rem; }
.dlg-has-audio     { font-size: .75rem; color: var(--g); }
.dlg-no-audio      { font-size: .75rem; color: var(--brd); }
.dlg-card-actions  { margin-left: auto; display: flex; gap: .22rem; align-items: center; }
/* ── Effect cards ── */
.dlg-effect-card         { border-color: #FF980055 !important; }
.dlg-effect-card:hover   { border-color: #FF9800aa !important; }
.dlg-effect-card .dlg-card-head { background: rgba(255,152,0,.08); }
.dlg-effect-badge        { font-size: .52rem; font-weight: 900; letter-spacing: 1.5px; color: #FF9800; background: rgba(255,152,0,.15); border: 1px solid #FF980055; border-radius: 20px; padding: .1rem .45rem; }
/* ── FX Overlay ── */
#fx-overlay { position: fixed; inset: 0; z-index: 700; pointer-events: none; opacity: 0; }
.fx-flash   { animation: fxFlash var(--fx-dur, .6s) ease-out  forwards; }
.fx-fade    { animation: fxFade  var(--fx-dur, 1.2s) ease-in-out forwards; }
.fx-shake   { animation: fxShake var(--fx-dur, .8s) ease-in-out forwards; }
@keyframes fxFlash { 0%,100%{opacity:0} 12%,28%{opacity:.88} }
@keyframes fxFade  { 0%,100%{opacity:0} 30%,70%{opacity:1} }
@keyframes fxShake { 0%,100%{opacity:0;transform:none} 8%,92%{opacity:.18} 15%,45%,75%{transform:translateX(-14px)} 30%,60%,90%{transform:translateX(14px)} }
.dlg-card-body     { padding: .65rem .7rem; }
.dlg-form-row      { display: flex; gap: .5rem; }
.dlg-form-col      { flex: 1; min-width: 0; }
.dlg-select        { width: 100%; padding: .42rem .6rem; background: var(--bg3); border: 1px solid var(--brd); border-radius: 7px; color: var(--tx2); font-family: var(--F); font-size: .72rem; outline: none; transition: border-color .2s; }
.dlg-select:focus  { border-color: var(--pu); }
.dlg-textarea      { width: 100%; padding: .42rem .6rem; background: var(--bg3); border: 1px solid var(--brd); border-radius: 7px; color: var(--tx2); font-family: var(--F); font-size: .75rem; resize: vertical; outline: none; transition: border-color .2s; }
.dlg-textarea:focus { border-color: var(--pu); }

/* ── Volume rows (admin) ── */
.vol-row       { background: rgba(0,181,204,.05); border: 1px solid rgba(0,181,204,.15); border-radius: 8px; padding: .45rem .7rem !important; margin-bottom: .65rem !important; }
.vol-row label { color: var(--b) !important; }
.vol-row input[type=range] { accent-color: var(--b); }

/* ── Media preview + quitar ── */
.media-prev-wrap   { display: flex; align-items: flex-start; gap: .4rem; flex-wrap: wrap; }
.media-clr         { display: inline-flex; align-items: center; gap: .2rem; padding: .2rem .45rem; background: rgba(231,76,60,.12); border: 1px solid rgba(231,76,60,.35); color: var(--re); border-radius: 6px; cursor: pointer; font-size: .62rem; font-weight: 800; transition: all .2s; white-space: nowrap; flex-shrink: 0; }
.media-clr:hover   { background: rgba(231,76,60,.25); border-color: var(--re); }

/* ── LOGIN ── */
#lscr { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.lbox { background: rgba(12,31,12,.98); border: 2px solid var(--g); border-radius: 18px; padding: 2.2rem 1.8rem; max-width: 400px; width: 100%; text-align: center; box-shadow: 0 0 60px rgba(57,255,20,.1); }
.l-logo-wrap  { margin-bottom: .5rem; }
.l-logo-img   { width: 80px; height: 80px; object-fit: cover; border-radius: 50%; border: 3px solid var(--g); display: none; }
.l-logo-emoji { font-size: 3.5rem; animation: bounce 2.5s ease infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.l-title { font-size: 1.5rem; font-weight: 900; color: var(--g); text-shadow: 0 0 20px rgba(57,255,20,.35); margin-bottom: .2rem; line-height: 1.2; }
.l-title span { color: var(--b); }
.l-sub  { font-size: .7rem; color: var(--mu); margin-bottom: 1.3rem; letter-spacing: 2px; }
.tabrow { display: flex; gap: .4rem; margin-bottom: 1.2rem; }
.tbtn   { flex: 1; padding: .45rem; border: 1px solid var(--brd); background: transparent; color: var(--mu); border-radius: 8px; cursor: pointer; font-family: var(--F); font-size: .75rem; font-weight: 800; transition: all .2s; }
.tbtn.on { background: var(--g); color: #000; border-color: var(--g); }
.fg       { margin-bottom: .8rem; text-align: left; }
.fg label { font-size: .6rem; color: var(--mu); display: block; margin-bottom: .25rem; letter-spacing: 1px; font-weight: 800; text-transform: uppercase; }
.fg input { width: 100%; padding: .6rem .9rem; background: var(--bg3); border: 1px solid var(--brd); border-radius: 8px; color: var(--tx2); font-family: var(--F); font-size: .85rem; outline: none; transition: border-color .2s; }
.fg input:focus { border-color: var(--g); }
.lbtn  { width: 100%; padding: .75rem; background: var(--g); color: #000; border: none; border-radius: 10px; font-family: var(--F); font-size: .95rem; font-weight: 900; cursor: pointer; letter-spacing: 1px; transition: all .2s; }
.lbtn:hover { background: var(--g2); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(57,255,20,.25); }
.lerr  { color: var(--re); font-size: .7rem; margin-top: .4rem; min-height: .9rem; }
.lhint { font-size: .6rem; color: var(--mu); margin-top: .8rem; background: rgba(255,255,255,.03); border-radius: 8px; padding: .4rem; line-height: 1.7; }
.l-remember { display: flex; align-items: center; gap: .45rem; font-size: .72rem; color: var(--mu); margin-bottom: .6rem; cursor: pointer; }
.l-remember input[type=checkbox] { accent-color: var(--g); width: 14px; height: 14px; cursor: pointer; color-scheme: dark; }

/* ── GAME SCREEN ── */
#gscr { display: none; min-height: 100vh; flex-direction: column; padding-bottom: 62px; }
#gscr.show { display: flex; }
.topbar { background: rgba(8,16,10,.93); border-bottom: 1px solid var(--brd); padding: .5rem 1rem; display: flex; align-items: center; gap: .7rem; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); }
.tb-logo      { font-size: 1rem; font-weight: 900; color: var(--g); white-space: nowrap; text-shadow: 0 0 8px rgba(57,255,20,.3); }
.tb-logo span { color: var(--b); }
.xpw  { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xpr  { display: flex; justify-content: space-between; font-size: .55rem; color: var(--mu); font-weight: 800; }
.xpt  { height: 7px; background: var(--bg3); border-radius: 4px; overflow: hidden; border: 1px solid var(--brd); }
.xpf  { height: 100%; background: linear-gradient(90deg, var(--g), var(--b)); border-radius: 4px; transition: width .6s; }
.tbu  { font-size: .65rem; color: var(--g); font-weight: 800; white-space: nowrap; }
.ibtn { padding: .25rem .55rem; border: 1px solid var(--brd); background: transparent; color: var(--mu); border-radius: 6px; cursor: pointer; font-size: .6rem; font-family: var(--F); font-weight: 700; transition: all .2s; }
.ibtn:hover     { border-color: var(--g); color: var(--g); }
.ibtn.red:hover { border-color: var(--re); color: var(--re); }
.gnav { display: flex; gap: .3rem; padding: .5rem 1rem; background: rgba(8,16,10,.82); border-bottom: 1px solid var(--brd); overflow-x: auto; scrollbar-width: none; backdrop-filter: blur(8px); }
.gnav::-webkit-scrollbar { display: none; }
.gnb { padding: .38rem .8rem; border: 1px solid var(--brd); background: transparent; color: var(--mu); border-radius: 20px; cursor: pointer; font-family: var(--F); font-size: .65rem; font-weight: 800; white-space: nowrap; transition: all .2s; flex-shrink: 0; }
.gnb.on, .gnb:hover { background: var(--g); color: #000; border-color: var(--g); }
.cnt { flex: 1; padding: 1rem; max-width: 1100px; margin: 0 auto; width: 100%; }
.sec { display: none; animation: fi .3s ease; }
.sec.on { display: block; }
@keyframes fi { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── HOME ── */
.hero { background: linear-gradient(135deg, rgba(0,181,204,.07), rgba(57,255,20,.07)); border: 1px solid rgba(57,255,20,.18); border-radius: 16px; padding: 1.8rem; margin-bottom: 1.2rem; text-align: center; position: relative; overflow: hidden; }
.hero-emoji-wrap { margin-bottom: .6rem; }
.hero-emoji { font-size: 3.5rem; animation: bounce 2.5s ease infinite; display: inline-block; }
.hero-img   { width: 90px; height: 90px; object-fit: cover; border-radius: 50%; border: 3px solid var(--g); animation: bounce 2.5s ease infinite; display: none; }
.htitle     { font-size: 1.7rem; font-weight: 900; color: var(--tx2); line-height: 1.2; margin-bottom: .4rem; }
.htitle span { color: var(--g); text-shadow: 0 0 18px rgba(57,255,20,.4); }
.hsub   { font-size: .82rem; color: var(--mu); line-height: 1.6; }
.stitle { font-size: .95rem; font-weight: 900; color: var(--g); margin-bottom: .8rem; }
.g3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.gcard { background: var(--card); border: 1px solid var(--brd); border-radius: 12px; padding: 1rem; cursor: pointer; transition: all .25s; text-align: center; }
.gcard:hover { border-color: var(--g); transform: translateY(-3px); box-shadow: 0 8px 28px rgba(57,255,20,.1); }
.gci { font-size: 2.3rem; display: block; margin-bottom: .4rem; }
.gcn { font-size: .82rem; font-weight: 900; color: var(--tx2); margin-bottom: .2rem; }
.gcd { font-size: .68rem; color: var(--mu); line-height: 1.5; margin-bottom: .45rem; }
.xpp { display: inline-block; background: rgba(255,225,53,.1); border: 1px solid rgba(255,225,53,.28); color: var(--y); border-radius: 20px; padding: .18rem .55rem; font-size: .6rem; font-weight: 800; }
.pbtn { width: 100%; margin-top: .55rem; padding: .42rem; border: 1px solid var(--g); background: transparent; color: var(--g); border-radius: 8px; cursor: pointer; font-family: var(--F); font-size: .68rem; font-weight: 800; transition: all .2s; }
.pbtn:hover { background: var(--g); color: #000; }

/* ── ARENA (game wrapper) ── */
.arena  { background: rgba(12,31,12,.88); border: 1px solid var(--brd); border-radius: 16px; padding: 1.4rem; backdrop-filter: blur(6px); }
.atop   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: .4rem; }
.atitle { font-size: .95rem; font-weight: 900; color: var(--tx2); }
.ascore { font-size: .7rem; font-weight: 800; color: var(--y); }
.bk     { padding: .28rem .65rem; border: 1px solid var(--brd); background: transparent; color: var(--mu); border-radius: 8px; cursor: pointer; font-size: .6rem; font-family: var(--F); font-weight: 700; transition: all .2s; }
.bk:hover { border-color: var(--tx2); color: var(--tx2); }
.rp    { text-align: center; padding: 1.4rem; background: linear-gradient(135deg, rgba(57,255,20,.04), rgba(0,181,204,.04)); border: 1px solid var(--g); border-radius: 12px; margin-top: 1rem; }
.rxp   { font-size: 2rem; font-weight: 900; color: var(--g); text-shadow: 0 0 18px rgba(57,255,20,.4); }
.rmsg  { font-size: .75rem; color: var(--mu); margin: .3rem 0 .9rem; }
.brow  { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.btn   { padding: .45rem 1.1rem; border-radius: 8px; cursor: pointer; font-family: var(--F); font-size: .72rem; font-weight: 800; transition: all .2s; border: 1px solid; }
.bg    { background: var(--g);  color: #000; border-color: var(--g);  } .bg:hover  { background: var(--g2); transform: translateY(-1px); }
.bb    { background: var(--b);  color: #000; border-color: var(--b);  } .bb:hover  { background: var(--b2); }
.bo    { background: transparent; color: var(--tx2); border-color: var(--brd); } .bo:hover { border-color: var(--tx2); }

/* ── MEMORY ── */
.minfo { display: flex; justify-content: space-between; font-size: .68rem; color: var(--mu); font-weight: 800; margin-bottom: .4rem; }
.mem-countdown { text-align: center; font-size: 3rem; font-weight: 900; color: var(--g); letter-spacing: 2px; line-height: 1; margin: .2rem 0 .6rem; text-shadow: 0 0 24px rgba(57,255,20,.45); transition: color .3s; font-family: var(--FP); }
.mem-countdown-s { font-size: 1.4rem; vertical-align: middle; opacity: .7; }
.mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; max-width: 480px; margin: 0 auto; }
.mc    { aspect-ratio: 1; background: var(--bg3); border: 2px solid var(--brd); border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; transition: all .3s; user-select: none; overflow: hidden; position: relative; }
.mc.fd::after { content: '?'; font-size: 1.5rem; color: var(--mu); position: absolute; }
.mc.fd > * { display: none; }
.mc.fl { background: var(--card2); border-color: var(--b); transform: scale(1.04); }
.mc.ma { background: rgba(57,255,20,.07); border-color: var(--g); cursor: default; }
.mc img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

/* ── INVADERS ── */
#sic { display: block; border: 2px solid var(--g); border-radius: 8px; margin: 0 auto; background: #000; cursor: crosshair; width: min(900px, 100%); box-shadow: 0 0 20px rgba(57,255,20,.18); }
.sihud { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; font-family: var(--FP); font-size: .6rem; color: var(--g); flex-wrap: wrap; gap: .3rem; }
.boss-bar-wrap  { margin-bottom: .5rem; display: none; }
.boss-bar-label { font-family: var(--FP); font-size: .55rem; color: var(--re); margin-bottom: .2rem; }
.boss-bar       { height: 12px; background: var(--bg3); border-radius: 4px; overflow: hidden; border: 1px solid var(--re); }
.boss-bar-fill  { height: 100%; background: linear-gradient(90deg, #E74C3C, #C0392B); border-radius: 4px; transition: width .3s; }
.sictrl { display: flex; gap: .4rem; justify-content: center; margin-top: .7rem; flex-wrap: wrap; }
.sib    { padding: .45rem .9rem; border: 1px solid var(--g); background: rgba(57,255,20,.07); color: var(--g); border-radius: 8px; cursor: pointer; font-size: .75rem; font-weight: 800; font-family: var(--F); transition: all .2s; user-select: none; }
.sib:active { background: rgba(57,255,20,.2); transform: scale(.95); }

/* ── SUPER ALIS BROS ── */
#mbc { display: block; border: 2px solid var(--b); border-radius: 8px; margin: 0 auto; background: #5C94FC; cursor: none; width: min(960px, 100%); box-shadow: 0 0 20px rgba(0,181,204,.2); }
.mbhud  { display: flex; justify-content: space-between; margin-bottom: .3rem; font-family: var(--FP); font-size: .6rem; color: var(--tx2); flex-wrap: wrap; gap: .3rem; }
.mb-ctrl-bar { display: flex; align-items: center; justify-content: center; gap: .8rem; font-size: .56rem; color: var(--mu); letter-spacing: .04em; margin-bottom: .3rem; opacity: .7; flex-wrap: wrap; }
.mb-vol-bar { display: flex; align-items: center; gap: .35rem; }
.mb-vol-bar input[type=range] { width: 72px; accent-color: var(--g); cursor: pointer; }
.mb-game-wrap { position: relative; line-height: 0; width: fit-content; margin: 0 auto; }
.mb-lives-overlay { position: absolute; top: 14px; left: 60px; font-size: 2.6rem; font-weight: 900; color: #fff; text-shadow: 0 0 8px rgba(0,0,0,1), 2px 2px 0 rgba(0,0,0,.8); pointer-events: none; z-index: 5; line-height: 1; white-space: nowrap; }
.mb-lives-overlay img { height: 1.4em; vertical-align: middle; filter: drop-shadow(1px 1px 3px rgba(0,0,0,.9)); }
.mbctrl        { display: flex; justify-content: space-between; align-items: center; margin-top: .5rem; padding: 0 .4rem; opacity: .4; transition: opacity .2s; }
.mbctrl:hover  { opacity: .85; }
.mbctrl-left   { display: flex; gap: .6rem; }
.mbctrl-right  { display: flex; gap: .6rem; }
.mbb           { border-radius: 10px; cursor: pointer; font-weight: 900; font-family: var(--F); transition: all .15s; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mbb-move      { padding: .35rem 1.1rem; border: 1px solid var(--b); background: rgba(0,181,204,.07); color: var(--b); font-size: .8rem; }
.mbb-move:active { background: rgba(0,181,204,.25); transform: scale(.92); }
.mbb-action    { width: 2.6rem; height: 2.6rem; font-size: 1rem; display: flex; align-items: center; justify-content: center; border: 2px solid; }
.mbb-jump      { border-color: #39FF14; background: rgba(57,255,20,.1); color: #39FF14; }
.mbb-jump:active  { background: rgba(57,255,20,.3); transform: scale(.92); }
.mbb-fire      { border-color: #FF6B00; background: rgba(255,107,0,.1); color: #FF6B00; }
.mbb-fire:active  { background: rgba(255,107,0,.3); transform: scale(.92); }

/* ── SILHOUETTE ── */
#silc      { display: block; border: 1px solid var(--brd); border-radius: 12px; background: #000; margin: 0 auto; width: min(380px, 100%); }
.sil-prog  { display: flex; gap: .28rem; justify-content: center; margin-bottom: .7rem; }
.sil-dot   { width: 10px; height: 10px; border-radius: 50%; background: var(--brd); transition: all .3s; }
.sil-dot.d { background: var(--g); }
.sil-dot.c { background: var(--y); box-shadow: 0 0 7px rgba(255,225,53,.6); }
.sil-dot.w { background: var(--re); }
.sil-opts  { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; max-width: 400px; margin: .6rem auto 0; }
.silo      { padding: .65rem; border: 1px solid var(--brd); background: var(--card); border-radius: 10px; cursor: pointer; font-size: .78rem; font-weight: 800; color: var(--tx2); transition: all .2s; text-align: center; }
.silo:hover    { border-color: var(--g); background: var(--card2); }
.silo.ok       { border-color: var(--g);  background: rgba(57,255,20,.1); color: var(--g);  pointer-events: none; }
.silo.ng       { border-color: var(--re); background: rgba(231,76,60,.09); color: var(--re); pointer-events: none; }
.silo.rv       { pointer-events: none; opacity: .45; }
.silfb { font-size: .9rem; font-weight: 900; text-align: center; min-height: 1.4rem; }
.silrn { font-size: 1.2rem; font-weight: 900; color: var(--g); text-align: center; display: none; }

/* ── SHOP ── */
.shopxpb  { background: linear-gradient(90deg, rgba(255,225,53,.07), rgba(255,107,0,.07)); border: 1px solid rgba(255,225,53,.2); border-radius: 10px; padding: .65rem 1rem; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; }
.shopxpv  { font-size: 1.2rem; font-weight: 900; color: var(--y); }
.shopxpl  { font-size: .6rem; color: var(--mu); font-weight: 800; }
.rwcard   { background: var(--card); border: 1px solid var(--brd); border-radius: 12px; overflow: hidden; transition: all .2s; }
.rwcard.aff { border-color: rgba(57,255,20,.35); }
.rwcard.red { opacity: .6; }
.rwimgw   { width: 100%; height: 115px; background: var(--bg3); display: flex; align-items: center; justify-content: center; font-size: 2.8rem; overflow: hidden; }
.rwimgw img { width: 100%; height: 100%; object-fit: cover; }
.rwbody   { padding: .8rem; }
.rwname   { font-size: .82rem; font-weight: 900; color: var(--tx2); margin-bottom: .18rem; }
.rwdesc   { font-size: .67rem; color: var(--mu); line-height: 1.5; margin-bottom: .45rem; }
.rwcost   { font-size: .72rem; font-weight: 800; color: var(--y); }
.rwbtn    { width: 100%; margin-top: .45rem; padding: .42rem; border-radius: 8px; cursor: pointer; font-family: var(--F); font-size: .67rem; font-weight: 800; transition: all .2s; border: 1px solid var(--g); background: transparent; color: var(--g); }
.rwbtn:hover:not(:disabled) { background: var(--g); color: #000; }
.rwbtn:disabled { border-color: var(--brd); color: var(--mu); cursor: default; }
.rdbadge  { display: inline-block; background: rgba(57,255,20,.1); border: 1px solid rgba(57,255,20,.25); color: var(--g); border-radius: 20px; padding: .1rem .4rem; font-size: .57rem; font-weight: 800; }
.rw-req   { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .4rem; }
.rq-tag   { font-size: .58rem; font-weight: 700; border-radius: 20px; padding: .1rem .4rem; border: 1px solid; }
.rq-ok    { color: var(--g); border-color: rgba(57,255,20,.4); background: rgba(57,255,20,.08); }
.rq-no    { color: #ff6b6b; border-color: rgba(255,107,107,.4); background: rgba(255,107,107,.08); }

/* ── Pokémon — layout sin scroll ── */
#sec-pokemon.on { height: calc(100dvh - 108px); display: flex; flex-direction: column; }
#sec-pokemon .arena { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: .7rem 1rem; }
#sec-pokemon .atop { margin-bottom: .4rem; flex-shrink: 0; }
#pok-ejs-container { flex: 1; min-height: 0; }

/* ── Pokémon leyenda de controles ── */
.pok-legend { display:flex;flex-direction:column;gap:.35rem;min-width:90px; }
.pok-leg-title { font-size:.55rem;font-weight:800;color:var(--mu);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.1rem; }
.pok-leg-row { display:flex;align-items:center;gap:.4rem;font-size:.6rem;color:var(--tx2); }
.pok-leg-row kbd { background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:4px;padding:.1rem .3rem;font-family:monospace;font-size:.6rem;color:#fff;white-space:nowrap; }

/* ── Credits ── */
#sec-credits { display:none; }
#sec-credits.on { display:block;position:fixed;inset:0;z-index:600;background:#000;overflow:hidden; }
#credits-scene { position:absolute;inset:0;overflow:hidden; }
#credits-scroll-wrap { position:absolute;inset:0;overflow:hidden; }
#credits-content {
  position:absolute;top:0;left:50%;
  transform:translateX(-50%);
  width:min(680px,90vw);
  text-align:center;
  padding-bottom:40vh;
  will-change:transform;
}
@keyframes creditsScroll {
  from { transform:translateX(-50%) translateY(100vh); }
  to   { transform:translateX(-50%) translateY(-100%); }
}
.cr-logo { font-family:var(--FP);font-size:clamp(2.2rem,7vw,4rem);color:#FFE135;letter-spacing:8px;margin-bottom:.3rem;text-shadow:0 0 60px rgba(255,225,53,.5); }
.cr-logo-sub { font-size:.65rem;color:var(--mu);letter-spacing:6px;text-transform:uppercase;margin-bottom:3rem; }
.cr-name-big { font-family:var(--FP);font-size:clamp(1.4rem,4vw,2.2rem);color:#fff;letter-spacing:4px;margin-bottom:3.5rem;text-shadow:0 0 30px rgba(255,255,255,.25); }
.cr-section { font-size:.58rem;font-weight:900;color:var(--g);letter-spacing:6px;text-transform:uppercase;margin:3rem 0 1.4rem;opacity:.85; }
.cr-divider { color:var(--g);opacity:.2;margin:1.5rem 0;font-size:.75rem;letter-spacing:2px; }
.cr-role { font-size:.72rem;color:rgba(180,210,255,.75);margin-bottom:.3rem;letter-spacing:2px;text-transform:uppercase;font-style:italic; }
.cr-name { font-size:1.15rem;font-weight:900;color:#fff;letter-spacing:3px;margin-bottom:1.8rem;text-shadow:0 0 20px rgba(255,255,255,.15); }
.cr-game-title { font-size:.9rem;font-weight:900;color:#FFE135;letter-spacing:3px;margin:2.2rem 0 1.1rem; }
.cr-thanks-txt { font-size:.72rem;color:rgba(255,255,255,.6);line-height:2.2;margin-bottom:.8rem; }
.cr-heart { font-size:1.8rem;margin:1.5rem 0 .6rem; }
.cr-year { font-size:.62rem;color:var(--mu);letter-spacing:3px; }
#credits-end-fade { position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:2; }
#credits-thanks {
  position:absolute;inset:0;z-index:3;
  display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:1rem;text-align:center;
}
.ct-main { font-family:var(--FP);font-size:clamp(1.8rem,6vw,3.8rem);color:#FFE135;letter-spacing:6px;text-shadow:0 0 80px rgba(255,225,53,.7); }
.ct-sub { font-size:.72rem;color:rgba(255,255,255,.4);letter-spacing:4px; }
#credits-skip-btn {
  position:absolute;top:1rem;right:1rem;z-index:10;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);
  color:rgba(255,255,255,.45);font-family:var(--F);font-size:.62rem;
  padding:.28rem .65rem;border-radius:20px;cursor:pointer;transition:all .2s;
}
#credits-skip-btn:hover { background:rgba(255,255,255,.15);color:#fff; }

/* ── Gift Opening Modal ── */
#rw-open-box { position:relative;width:130px;height:140px;margin-top:1rem; }
#rw-open-lid {
  position:absolute;top:0;left:0;width:130px;height:44px;
  background:linear-gradient(135deg,#c0392b,#e74c3c);
  border-radius:6px 6px 0 0;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.2);
}
.rw-bow { position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:50px;height:40px; }
.rw-bow::before,.rw-bow::after {
  content:'';position:absolute;
  width:20px;height:22px;background:#fff;border-radius:50% 0;
}
.rw-bow::before { left:0;transform:rotate(-35deg); }
.rw-bow::after  { right:0;transform:rotate(215deg); }
#rw-open-body {
  position:absolute;bottom:0;left:0;width:130px;height:100px;
  background:linear-gradient(135deg,#e74c3c,#c0392b);
  border-radius:0 0 6px 6px;overflow:hidden;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.2);
}
.rw-ribbon-h { position:absolute;top:50%;left:0;width:100%;height:18px;background:rgba(255,255,255,.22);transform:translateY(-50%); }
.rw-ribbon-v { position:absolute;top:0;left:50%;width:18px;height:100%;background:rgba(255,255,255,.22);transform:translateX(-50%); }
#rw-open-rays { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none; }
.rw-ray { position:absolute;top:0;left:-2px;width:4px;height:0;background:linear-gradient(to top,transparent,#FFD700);border-radius:2px;transform-origin:2px 0;opacity:0; }
#rw-open-prize { display:flex;flex-direction:column;align-items:center;gap:.45rem;text-align:center; }
#rw-open-prize-icon { font-size:3.5rem;line-height:1; }
#rw-open-prize-name { font-size:1.4rem;font-weight:800;color:#fff; }
#rw-open-prize-desc { font-size:.82rem;color:rgba(255,255,255,.7);max-width:260px;line-height:1.4; }
@keyframes rwBoxBounceIn {
  0%   { transform:scale(0) translateY(30px);opacity:0; }
  60%  { transform:scale(1.12) translateY(-8px);opacity:1; }
  80%  { transform:scale(.96); }
  100% { transform:scale(1) translateY(0);opacity:1; }
}
@keyframes rwBoxShake {
  0%,100% { transform:rotate(0); }
  14% { transform:rotate(-7deg); } 28% { transform:rotate(7deg); }
  42% { transform:rotate(-5deg); } 56% { transform:rotate(5deg); }
  70% { transform:rotate(-3deg); } 85% { transform:rotate(3deg); }
}
@keyframes rwLidFly {
  0%   { transform:translateY(0) rotate(0deg);opacity:1; }
  100% { transform:translateY(-190px) rotate(-25deg);opacity:0; }
}
@keyframes rwRayExpand {
  0% { height:0;opacity:0; } 25% { opacity:1; } 100% { height:160px;opacity:0; }
}
@keyframes rwPrizeReveal {
  0%   { transform:scale(.3) translateY(15px);opacity:0; }
  100% { transform:scale(1) translateY(0);opacity:1; }
}
.rwbtn-open { border-color:var(--g)!important;background:rgba(57,255,20,.12)!important;color:var(--g)!important; }
.rwbtn-open:hover { background:var(--g)!important;color:#000!important; }

/* ── BIRTHDAY OVERLAY ── */
.bday-como {
  font-family: var(--FP);
  font-size: clamp(2.5rem, 12vw, 6rem);
  color: #fff;
  text-align: center;
  letter-spacing: 4px;
  text-shadow: 0 0 40px rgba(255,255,255,.6), 0 0 80px rgba(180,100,255,.4);
  opacity: 0;
}
@keyframes bdayComoIn {
  0%   { opacity:0; transform:scale(2.2) rotate(-3deg); filter:blur(16px); }
  55%  { opacity:1; transform:scale(.97) rotate(.5deg); filter:blur(0); }
  75%  { transform:scale(1.03) rotate(-.5deg); }
  100% { opacity:1; transform:scale(1) rotate(0); }
}
@keyframes bdayBoxPulse {
  0%,100% { transform:scale(1); filter:drop-shadow(0 0 10px rgba(255,200,0,.4)); }
  50%     { transform:scale(1.12); filter:drop-shadow(0 0 24px rgba(255,200,0,.9)); }
}
@keyframes bdayBoxBurst {
  0%   { transform:scale(1); opacity:1; }
  40%  { transform:scale(1.5); opacity:.7; }
  100% { transform:scale(0); opacity:0; }
}
.bday-box-emoji {
  font-size: clamp(4rem, 16vw, 9rem);
  animation: bdayBoxPulse 1.8s ease-in-out infinite;
  cursor: default;
  line-height: 1;
}
.bday-open-btn {
  padding: .65rem 2rem;
  background: rgba(255,215,0,.12);
  border: 2px solid #FFD700;
  border-radius: 40px;
  color: #FFD700;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.bday-open-btn:hover { background: rgba(255,215,0,.28); transform: scale(1.06); }
@keyframes bdayTitleIn {
  0%   { opacity:0; transform:translateY(55px); filter:blur(6px); }
  60%  { opacity:.9; filter:blur(1px); }
  100% { opacity:1; transform:translateY(0); filter:blur(0); }
}
@keyframes bdayTitleGlow {
  0%,100% { text-shadow:0 0 20px rgba(255,150,200,.5),0 0 50px rgba(200,80,255,.3),0 0 3px rgba(255,255,255,.2); }
  50%     { text-shadow:0 0 50px rgba(255,150,200,.9),0 0 100px rgba(200,80,255,.6),0 0 8px #fff; }
}
@keyframes bdayBackBtnIn {
  0%   { opacity:0; transform:translateY(12px); }
  100% { opacity:1; transform:translateY(0); }
}
.bday-title {
  font-family: var(--FP);
  font-size: clamp(2.2rem, 9vw, 5.5rem);
  text-align: center;
  line-height: 1.2;
  color: #fff;
  letter-spacing: 5px;
  position: relative;
  z-index: 1;
}
.bday-title span {
  background: linear-gradient(90deg,#ff6ec7,#a855f7,#38bdf8,#ff6ec7);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: bdayRainbow 3s linear infinite;
}
@keyframes bdayRainbow {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.bday-back-btn {
  padding: .6rem 2rem;
  border: 2px solid rgba(255,255,255,.4);
  border-radius: 40px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.85);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: background .2s, border-color .2s;
}
.bday-back-btn:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.8); }

/* ── ADMIN ── */
#ascr { display: none; min-height: 100vh; padding-bottom: 70px; }
#ascr.show { display: block; }
.atopbar   { background: rgba(155,89,182,.08); border-bottom: 2px solid var(--pu); padding: .6rem 1rem; display: flex; align-items: center; gap: .7rem; position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); }
.atopbar-t { font-size: .85rem; font-weight: 900; color: var(--pu); }
.acnt  { max-width: 980px; margin: 0 auto; padding: 1rem; }
.atabs { display: flex; gap: .3rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.atab  { padding: .38rem .85rem; border: 1px solid var(--brd); background: transparent; color: var(--mu); border-radius: 8px; cursor: pointer; font-size: .7rem; font-weight: 800; font-family: var(--F); transition: all .2s; }
.atab.on { background: var(--pu); color: #fff; border-color: var(--pu); }
.asec    { display: none; }
.asec.on { display: block; }
.acard   { background: var(--card); border: 1px solid var(--brd); border-radius: 12px; padding: 1.1rem; margin-bottom: .9rem; }
.acard h3 { font-size: .72rem; font-weight: 900; color: var(--pu); margin-bottom: .75rem; letter-spacing: 2px; text-transform: uppercase; }
.fr { margin-bottom: .75rem; }
.fr label { display: block; font-size: .6rem; color: var(--mu); font-weight: 800; margin-bottom: .25rem; letter-spacing: 1px; text-transform: uppercase; }
.fr input[type=text],
.fr input[type=number],
.fr textarea,
.fr select { width: 100%; padding: .52rem .75rem; background: var(--bg3); border: 1px solid var(--brd); border-radius: 8px; color: var(--tx2); font-family: var(--F); font-size: .78rem; outline: none; transition: border-color .2s; resize: vertical; }
.fr input:focus,
.fr textarea:focus,
.fr select:focus { border-color: var(--pu); }
.fr input[type=file]  { color: var(--tx); font-size: .7rem; background: var(--bg3); border: 1px dashed var(--brd); padding: .38rem; border-radius: 8px; width: 100%; cursor: pointer; }
.fr input[type=range] { width: 100%; accent-color: var(--g); cursor: pointer; }
.abtn     { padding: .42rem .9rem; border-radius: 8px; cursor: pointer; font-family: var(--F); font-size: .7rem; font-weight: 800; transition: all .2s; border: 1px solid var(--pu); background: var(--pu); color: #fff; margin: .15rem; }
.abtn:hover           { background: #8e44ad; transform: translateY(-1px); }
.abtn.dng             { background: var(--re); border-color: var(--re); }
.abtn.dng:hover       { background: #c0392b; }
.abtn.sec             { background: transparent; color: var(--mu); border-color: var(--brd); }
.abtn.sec:hover       { border-color: var(--tx2); color: var(--tx2); }
.abtn.grn             { background: var(--g); border-color: var(--g); color: #000; }
.abtn.grn:hover       { background: var(--g2); }
.prev { max-width: 85px; max-height: 65px; object-fit: cover; border-radius: 6px; border: 1px solid var(--brd); margin-top: .28rem; display: block; }
.g2   { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .75rem; }
.arow { background: var(--bg3); border: 1px solid var(--brd); border-radius: 10px; padding: .75rem; margin-bottom: .55rem; }
.arh  { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.arname   { font-size: .78rem; font-weight: 800; color: var(--tx2); }
.char-row { display: flex; gap: .75rem; align-items: flex-start; flex-wrap: wrap; }
.char-av  { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--brd); background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; overflow: hidden; flex-shrink: 0; }
.char-av img   { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.char-fields   { flex: 1; min-width: 180px; }
.utbl  { width: 100%; border-collapse: collapse; font-size: .72rem; }
.utbl th { padding: .45rem .75rem; background: var(--bg3); color: var(--mu); text-align: left; font-weight: 800; font-size: .6rem; letter-spacing: 1px; text-transform: uppercase; }
.utbl td { padding: .45rem .75rem; border-top: 1px solid var(--brd); color: var(--tx2); vertical-align: top; }
.rtag { display: inline-block; background: rgba(57,255,20,.07); border: 1px solid rgba(57,255,20,.2); color: var(--g); border-radius: 4px; padding: .08rem .35rem; font-size: .57rem; margin: .08rem; font-weight: 700; }
.audio-block   { background: var(--bg3); border: 1px solid var(--brd); border-radius: 10px; padding: .75rem; margin-bottom: .5rem; }
.audio-block h4 { font-size: .7rem; font-weight: 800; color: var(--tx2); margin-bottom: .45rem; }
audio { width: 100%; height: 26px; margin-top: .25rem; filter: invert(.55) hue-rotate(80deg); }
.bg-thumb-wrap { position: relative; display: inline-block; margin: .25rem; }
.bg-thumb { width: 110px; height: 70px; object-fit: cover; border-radius: 8px; border: 1px solid var(--brd); display: block; }
.bg-thumb-btns { position: absolute; top: 2px; right: 2px; display: flex; gap: 3px; }
.bg-edit  { background: rgba(57,255,20,.85); border: none; color: #000; border-radius: 50%; width: 18px; height: 18px; cursor: pointer; font-size: .62rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.bg-rm    { background: rgba(231,76,60,.9);  border: none; color: #fff; border-radius: 50%; width: 18px; height: 18px; cursor: pointer; font-size: .6rem;  line-height: 1; display: flex; align-items: center; justify-content: center; }

/* ── LEVEL UP ── */
.lvlup-wrap { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; pointer-events: none; animation: lvlbg .4s ease forwards; }
@keyframes lvlbg { from { background: rgba(57,255,20,0); } to { background: rgba(57,255,20,.06); } }
.lvlup-box   { text-align: center; animation: lvlpop .5s cubic-bezier(.17,.67,.3,1.4) forwards; }
@keyframes lvlpop {
  0%   { transform: scale(0.4) translateY(30px); opacity: 0; }
  60%  { transform: scale(1.08) translateY(-6px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.lvlup-star  { font-size: 3.5rem; animation: lvspin 1s ease infinite; display: block; margin-bottom: .3rem; }
@keyframes lvspin { 0%,100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.2) rotate(10deg); } }
.lvlup-title { font-family: var(--FP); font-size: 2rem; color: var(--g); text-shadow: 0 0 40px rgba(57,255,20,.8), 0 0 80px rgba(57,255,20,.4); letter-spacing: 4px; }
.lvlup-sub   { font-size: .8rem; color: var(--mu); margin-top: .3rem; font-style: italic; }

/* ── GAME OVER ── */
.gameover-wrap  { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; pointer-events: none; animation: gobg .4s ease forwards; }
@keyframes gobg { from { background: rgba(231,76,60,0); } to { background: rgba(231,76,60,.1); } }
.gameover-box   { text-align: center; animation: lvlpop .5s cubic-bezier(.17,.67,.3,1.4) forwards; }
.gameover-icon  { font-size: 3.5rem; animation: lvspin 1s ease infinite; display: block; margin-bottom: .3rem; }
.gameover-title { font-family: var(--FP); font-size: 2rem; color: #e74c3c; text-shadow: 0 0 40px rgba(231,76,60,.8), 0 0 80px rgba(231,76,60,.4); letter-spacing: 4px; }
.gameover-sub   { font-size: .8rem; color: var(--mu); margin-top: .3rem; font-style: italic; }

/* ── GAME WIN ── */
.gamewin-wrap  { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; pointer-events: none; animation: gwbg .4s ease forwards; }
@keyframes gwbg { from { background: rgba(255,193,7,0); } to { background: rgba(255,193,7,.08); } }
.gamewin-box   { text-align: center; animation: lvlpop .5s cubic-bezier(.17,.67,.3,1.4) forwards; }
.gamewin-icon  { font-size: 4rem; animation: lvspin 1s ease infinite; display: block; margin-bottom: .3rem; }
.gamewin-title { font-family: var(--FP); font-size: 2rem; color: #FFE135; text-shadow: 0 0 40px rgba(255,193,7,.9), 0 0 80px rgba(255,193,7,.5); letter-spacing: 4px; }
.gamewin-sub   { font-size: .8rem; color: var(--mu); margin-top: .3rem; font-style: italic; }

/* ── TOAST ── */
.toast { position: fixed; bottom: 72px; right: 1rem; background: rgba(12,31,12,.98); border: 1px solid var(--g); color: var(--tx2); font-size: .72rem; font-weight: 800; padding: .55rem .9rem; border-radius: 10px; z-index: 999; animation: tin .3s, tout .3s 2.3s forwards; max-width: 250px; box-shadow: 0 8px 25px rgba(0,0,0,.5); }
@keyframes tin  { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tout { to { transform: translateY(-5px); opacity: 0; } }

/* ── PTS BADGE (topbar) ── */
.ptsb { display: flex; align-items: center; gap: .25rem; background: rgba(90,63,160,.25); border: 1px solid rgba(90,63,160,.5); border-radius: 20px; padding: .18rem .55rem; font-size: .68rem; font-weight: 900; color: #FFE135; white-space: nowrap; }

/* ── PTS GAIN floating badge ── */
.pts-gain { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.8); background: rgba(90,63,160,.95); border: 2px solid #FFE135; color: #FFE135; font-size: 1.1rem; font-weight: 900; padding: .55rem 1.1rem; border-radius: 16px; z-index: 1200; pointer-events: none; animation: ptsgain .9s ease forwards; }
@keyframes ptsgain {
  0%   { transform: translate(-50%, -60%) scale(.7); opacity: 0; }
  25%  { transform: translate(-50%, -50%) scale(1.1); opacity: 1; }
  70%  { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -70%) scale(.9); opacity: 0; }
}

/* ── RANKING ── */
.rank-card { display: flex; align-items: center; gap: .7rem; background: var(--bg2); border: 1px solid var(--brd); border-radius: 14px; padding: .65rem .9rem; margin-bottom: .5rem; transition: all .2s; }
.rank-card:hover { border-color: var(--b); background: var(--bg3); }
.rank-pos { font-family: var(--FP); font-size: 1rem; min-width: 2rem; text-align: center; color: var(--mu); }
.rank-gold   { color: #FFD700 !important; text-shadow: 0 0 12px rgba(255,215,0,.6); }
.rank-silver { color: #C0C0C0 !important; }
.rank-bronze { color: #CD7F32 !important; }
.rank-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brd); flex-shrink: 0; }
.rank-avatar-em { width: 44px; height: 44px; border-radius: 50%; background: var(--bg3); border: 2px solid var(--brd); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-size: .78rem; font-weight: 900; color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: .3rem; }
.rank-sub  { font-size: .6rem; color: var(--mu); margin-top: .1rem; }
.rank-right { text-align: right; flex-shrink: 0; }
.rank-pts { font-size: .7rem; color: #FFE135; font-weight: 900; }
.rank-bar-wrap { background: var(--bg3); border-radius: 20px; height: 5px; margin-top: .25rem; overflow: hidden; }
.rank-bar { height: 100%; border-radius: 20px; background: linear-gradient(90deg, var(--g), var(--b)); transition: width .6s ease; }
.rank-me { border-color: var(--b) !important; background: rgba(0,181,204,.07) !important; box-shadow: 0 0 0 2px rgba(0,181,204,.25); }
.rank-you { display: inline-block; background: var(--b); color: #000; font-size: .5rem; font-weight: 900; padding: .05rem .28rem; border-radius: 6px; vertical-align: middle; }
.rank-empty { text-align: center; color: var(--mu); font-size: .75rem; padding: 2rem 0; }

/* ── MEMORY CARD SLOTS (admin) ── */
.mem-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .5rem; margin-top: .35rem; }
.mem-slot  { background: var(--bg3); border: 1px solid var(--brd); border-radius: 10px; padding: .4rem; text-align: center; }
.mem-slot-lbl   { font-size: .55rem; font-weight: 800; color: var(--mu); text-transform: uppercase; letter-spacing: .5px; margin-bottom: .25rem; }
.mem-slot-img   { width: 56px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--brd); display: block; margin: 0 auto .25rem; }
.mem-slot-empty { font-size: 1.6rem; margin: .2rem 0 .35rem; }

/* ── TOPBAR AVATAR ── */
.topbar-av  { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--b); display: block; }
#tbu        { min-width: 30px; min-height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; overflow: hidden; background: var(--bg3); border: 2px solid var(--brd); font-size: .72rem; font-weight: 900; color: var(--b); }
#tbu:hover  { border-color: var(--b); }

/* ── AVATAR CROP MODAL ── */
.avmodal        { position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,.88); display: none; align-items: center; justify-content: center; }
.avmodal.show   { display: flex; }
.avmodal-box    { background: var(--bg2); border: 1px solid var(--brd); border-radius: 18px; padding: 1.4rem 1.2rem; width: min(340px,95vw); box-shadow: 0 20px 60px rgba(0,0,0,.7); }
.avmodal-title  { font-size: .9rem; font-weight: 900; color: var(--tx2); text-align: center; margin-bottom: .4rem; }
.av-circle-wrap { display: flex; justify-content: center; }
.av-circle-mask { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; position: relative; cursor: grab; background: #111; border: 3px solid var(--b); box-shadow: 0 0 0 4px rgba(0,181,204,.15), 0 0 30px rgba(0,181,204,.1); user-select: none; }
.av-circle-mask img { position: absolute; top: 0; left: 0; transform-origin: 0 0; pointer-events: none; max-width: none; }

/* ── GAME OVER SETS ADMIN ── */
.go-game-tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .4rem; }
.go-game-btn  { padding: .22rem .6rem; border: 1px solid var(--brd); background: var(--bg3); color: var(--mu); border-radius: 20px; cursor: pointer; font-size: .62rem; font-weight: 800; transition: all .2s; }
.go-game-btn.on   { background: rgba(0,181,204,.15); border-color: var(--b); color: var(--b); }
.go-game-btn:hover { border-color: var(--b); color: var(--b); }
.go-set-card { background: var(--bg3); border: 1px solid var(--brd); border-radius: 12px; padding: .6rem .7rem; margin-bottom: .6rem; }
.go-set-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; flex-wrap: wrap; }
.go-set-name { background: var(--bg); border: 1px solid var(--brd); color: var(--tx); border-radius: 6px; padding: .2rem .5rem; font-size: .65rem; font-weight: 800; flex: 1; min-width: 100px; }
.go-items    { display: flex; flex-direction: column; gap: .4rem; }
.go-item     { display: flex; gap: .4rem; background: var(--bg2); border: 1px solid var(--brd); border-radius: 8px; padding: .45rem; align-items: flex-start; }
.go-item-num { background: var(--bg3); border: 1px solid var(--brd); border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: .58rem; font-weight: 900; color: var(--mu); flex-shrink: 0; }
.go-item-body { flex: 1; min-width: 0; }

/* ── SPRITE EDITOR MODAL ── */
.spr-edit-box       { width: min(380px, 97vw) !important; }
.spr-edit-controls  { margin-top: .75rem; display: flex; flex-direction: column; gap: .35rem; }
.spr-ctrl-row       { display: flex; align-items: center; gap: .5rem; }
.spr-ctrl-row label { font-size: .6rem; font-weight: 700; color: var(--mu); width: 38px; flex-shrink: 0; }
.spr-ctrl-row input[type=range] { flex: 1; }
.spr-val            { font-size: .65rem; font-weight: 800; color: var(--b); width: 36px; text-align: right; font-family: monospace; }
.spr-ctrl-info      { font-size: .62rem; color: var(--mu); text-align: center; margin-top: .2rem; line-height: 1.6; }

/* ── MEM-IMG ADJUSTER MODAL ── */
.mimg-adj-box     { width: min(340px, 96vw) !important; }
.mimg-adj-cv-wrap { display: flex; justify-content: center; margin-bottom: .65rem; }
#mimg-adj-cv      { border: 2px solid var(--b); border-radius: 12px; cursor: grab; display: block;
                    box-shadow: 0 0 0 3px rgba(0,181,204,.18), 0 0 22px rgba(0,181,204,.1); }
#mimg-adj-cv:active { cursor: grabbing; }
.mimg-adj-zoom-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.mimg-adj-zoom-row span { font-size: .95rem; line-height: 1; }
.mimg-adj-zoom-row input[type=range] { flex: 1; }
.mimg-adj-btns    { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }
.mimg-adj-reset   { font-size: .62rem; background: var(--bg3); border: 1px solid var(--brd); color: var(--tx2);
                    border-radius: 6px; padding: .25rem .6rem; cursor: pointer; }
.mimg-adj-reset:hover { background: var(--brd); }

/* ── LEVEL EDITOR ── */
.le-modal-ov  { z-index: 2100 !important; }
.le-modal-box { width: min(920px, 98vw) !important; max-height: 96vh; overflow-y: auto; }
.le-tools     { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .4rem; }
.le-tb        { padding: .28rem .6rem; border: 1px solid var(--brd); background: var(--bg3); color: var(--mu); border-radius: 6px; cursor: pointer; font-size: .62rem; font-weight: 800; transition: all .18s; white-space: nowrap; }
.le-tb.on     { background: rgba(0,181,204,.18); border-color: var(--b); color: var(--b); }
.le-tb:hover  { border-color: var(--b); color: var(--b); }
.le-props     { background: var(--bg3); border: 1px solid var(--brd); border-radius: 8px; padding: .45rem .7rem; min-height: 2.2rem; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.le-inp       { width: 56px; background: var(--bg); border: 1px solid var(--brd); color: var(--tx); border-radius: 4px; padding: .12rem .3rem; font-size: .62rem; font-family: monospace; }

/* ── RESPONSIVE ── */
@media (max-width: 480px) {
  .htitle { font-size: 1.3rem; }
  .cnt    { padding: .6rem; }
  .arena  { padding: 1rem; }
  .hero   { padding: 1.2rem; }
}