/* WeedCoin: tokens y componentes comunes */
@font-face { font-family: 'Lilita One'; src: url(../assets/fonts/lilita-latin.woff2) format('woff2'); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Lilita One'; src: url(../assets/fonts/lilita-latin-ext.woff2) format('woff2'); font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Fredoka'; src: url(../assets/fonts/fredoka-latin.woff2) format('woff2'); font-weight: 300 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Fredoka'; src: url(../assets/fonts/fredoka-latin-ext.woff2) format('woff2'); font-weight: 300 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ber-950: #170D21; --ber-900: #1F1230; --ber-850: #27183A; --ber-800: #2F1E46; --ber-700: #3B2757; --ber-600: #4C3470; --ber-500: #65488F;
  --out: #1A1024;
  --txt: #F7F1FF; --txt2: #CBBDE0; --txt3: #A08FBB;
  --hoja: #8BE32B; --hoja-d: #4E9E12; --hoja-l: #C4F56B; --hoja-t: #152606;
  --wc: #FFC93C; --wc-d: #B97A09; --cash: #46E0B4; --cash-d: #148A68;
  --agua: #4DB8FF; --agua-d: #1F6FB0; --led: #FF5CC8; --peligro: #FF5A6E; --peligro-d: #B02438;
  --papel: #FFF3CC; --papel2: #F2DFA6; --tinta: #33241A; --tinta2: #6E5A42;
  --f-d: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  --f-u: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-s: 10px; --r: 16px; --r-l: 22px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
  --hud-h: 66px; --dock-h: 72px;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--ber-950); color: var(--txt); font-family: var(--f-u); font-size: 16px; line-height: 1.4; font-weight: 500; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
.chico a, p a, .portada__pie a, a.chico { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--f-d); font-weight: 400; margin: 0; line-height: 1.12; letter-spacing: .005em; }
p { margin: 0; }
svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--hoja-l); outline-offset: 2px; border-radius: 6px; }
@media (hover: none) { ::-webkit-scrollbar { display: none; } }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--ber-600); border-radius: 8px; border: 2px solid var(--ber-900); } ::-webkit-scrollbar-track { background: transparent; }

.g { width: 1em; height: 1em; }
.ico { width: 100%; height: 100%; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Botones ---------- */
.btn { --c: var(--ber-600); --e: var(--ber-800); --t: var(--txt);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 8px 18px;
  background: var(--c); color: var(--t); border: 3px solid var(--out); border-radius: 14px; box-shadow: 0 4px 0 var(--out), inset 0 -4px 0 var(--e), inset 0 2px 0 rgba(255,255,255,.25);
  font-family: var(--f-d); font-size: 17px; line-height: 1; transition: transform .12s var(--ease), box-shadow .12s var(--ease), filter .15s; user-select: none; text-decoration: none; white-space: nowrap;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--out), inset 0 -3px 0 var(--e), inset 0 2px 0 rgba(255,255,255,.25); }
.btn--hoja { --c: var(--hoja); --e: var(--hoja-d); --t: var(--hoja-t); }
.btn--oro { --c: var(--wc); --e: var(--wc-d); --t: #2E1E02; }
.btn--cash { --c: var(--cash); --e: var(--cash-d); --t: #06281E; }
.btn--agua { --c: var(--agua); --e: var(--agua-d); --t: #06233A; }
.btn--rojo { --c: var(--peligro); --e: var(--peligro-d); --t: #2C0408; }
.btn--papel { --c: var(--papel); --e: var(--papel2); --t: var(--tinta); }
.btn--chico { min-height: 38px; padding: 6px 12px; font-size: 15px; border-radius: 11px; }
.btn--ancho { width: 100%; }
.btn[disabled], .btn.is-off { filter: grayscale(.75) brightness(.72); cursor: not-allowed; }
.btn[disabled]:active { transform: none; }
.btn .moneda-svg { width: 20px; height: 20px; }

/* ---------- Chips de plata ---------- */
.plata { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plata .moneda-svg { width: 1.3em; height: 1.3em; flex: none; }

/* ---------- Tarjetas y estructura ---------- */
.pagina { padding: calc(var(--hud-h) + var(--safe-t) + 12px) 14px calc(var(--dock-h) + var(--safe-b) + 24px); max-width: 980px; margin: 0 auto; }
.tarjeta { background: var(--ber-800); border: 3px solid var(--out); border-radius: var(--r); box-shadow: 0 4px 0 var(--out); padding: 14px; }
.titulo { font-size: 26px; }
.sub { color: var(--txt2); font-size: 15px; }
.chico { font-size: 13.5px; color: var(--txt2); }
.fila { display: flex; align-items: center; gap: 10px; }
.fila--sp { justify-content: space-between; }
.pila { display: flex; flex-direction: column; gap: 12px; }
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }

/* ---------- Pestañas ---------- */
.pestanias { display: flex; gap: 6px; margin: 0 0 14px; overflow-x: auto; scrollbar-width: none; padding: 3px 2px 6px; }
.pestanias::-webkit-scrollbar { display: none; }
.pestania { flex: 1 1 auto; min-height: 42px; padding: 6px 9px; background: var(--ber-850); border: 3px solid var(--out); border-radius: 12px; color: var(--txt2); font-family: var(--f-d); font-size: 15px; display: inline-flex; gap: 6px; align-items: center; justify-content: center; white-space: nowrap; }
.pestania.is-on { background: var(--papel); color: var(--tinta); box-shadow: 0 3px 0 var(--out); transform: translateY(-1px); }
.punto { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--peligro); color: #fff; font: 700 12.5px/17px var(--f-u); border: 2px solid var(--out); display: inline-block; text-align: center; }

/* ---------- Barras ---------- */
.barra { height: 14px; background: var(--ber-950); border: 2.5px solid var(--out); border-radius: 8px; overflow: hidden; position: relative; }
.barra > b { display: block; height: 100%; background: var(--hoja); transition: width .4s var(--ease); box-shadow: inset 0 2px 0 rgba(255,255,255,.35); }
.barra--agua > b { background: var(--agua); }
.barra--oro > b { background: var(--wc); }
.barra--papel { background: #D9C48E; }

/* ---------- Pasos de cantidad ---------- */
.pasos { display: inline-flex; align-items: center; border: 3px solid var(--out); border-radius: 12px; overflow: hidden; background: var(--ber-950); }
.pasos button { width: 34px; height: 36px; flex: none; display: grid; place-items: center; background: var(--ber-600); font-size: 15px; }
.pasos button:active { background: var(--ber-500); }
.pasos input { width: 42px; height: 36px; text-align: center; background: none; border: 0; font-weight: 700; font-size: 16px; -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
.pasos input::-webkit-outer-spin-button, .pasos input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* ---------- Campos ---------- */
.campo { display: flex; flex-direction: column; gap: 5px; font-size: 14.5px; color: var(--txt2); }
.campo input, .campo select { min-height: 46px; padding: 8px 12px; background: var(--ber-950); border: 3px solid var(--out); border-radius: 12px; color: var(--txt); font-size: 16px; font-weight: 500; width: 100%; }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--hoja); }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-d); font-size: 28px; line-height: 1; }
.logo .moneda-svg { width: 1.45em; height: 1.45em; }
.logo__txt { color: var(--hoja-l); -webkit-text-stroke: 0; text-shadow: 0 3px 0 var(--out); }
.logo__txt span { color: var(--wc); }
.logo--chico { font-size: 20px; }

/* ---------- Hoja modal ---------- */
.velo { position: fixed; inset: 0; background: rgba(15, 7, 24, .72); z-index: 200; display: flex; align-items: flex-end; justify-content: center; animation: fadeIn .18s ease; }
.hoja { width: 100%; max-width: 520px; max-height: 88vh; overflow: auto; background: var(--ber-800); border: 3px solid var(--out); border-bottom: 0; border-radius: 24px 24px 0 0; padding: 18px 16px calc(18px + var(--safe-b)); animation: subir .28s var(--ease); position: relative; }
.hoja__cerrar { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; display: grid; place-items: center; background: var(--ber-600); border: 3px solid var(--out); border-radius: 11px; font-size: 16px; z-index: 2; }
.hoja__titulo { font-size: 23px; margin-right: 44px; margin-bottom: 12px; }
@media (min-width: 640px) { .velo { align-items: center; } .hoja { border-radius: 24px; border-bottom: 3px solid var(--out); box-shadow: 0 8px 0 var(--out); padding-bottom: 18px; } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }

/* ---------- Charla de personaje ---------- */
.charla { display: flex; gap: 12px; align-items: flex-start; }
.cara { width: 58px; height: 58px; flex: none; border-radius: 50%; border: 3px solid var(--out); overflow: hidden; background: var(--ber-600); }
.cara svg { width: 100%; height: 100%; }
.cara--chica { width: 40px; height: 40px; border-width: 2.5px; }
.cara--grande { width: 84px; height: 84px; }
.globo { position: relative; background: var(--papel); color: var(--tinta); border: 3px solid var(--out); border-radius: 14px; padding: 10px 13px; font-size: 15.5px; line-height: 1.35; flex: 1; box-shadow: 0 3px 0 var(--out); }
.globo::before { content: ''; position: absolute; left: -10px; top: 16px; width: 14px; height: 14px; background: var(--papel); border-left: 3px solid var(--out); border-bottom: 3px solid var(--out); transform: rotate(45deg); }
.globo b { font-family: var(--f-d); font-weight: 400; display: block; font-size: 15px; color: var(--tinta2); margin-bottom: 1px; }

/* ---------- Carta de capítulo ---------- */
.carta { background: var(--papel); color: var(--tinta); border: 3px solid var(--out); border-radius: 8px; padding: 22px 20px; box-shadow: 0 6px 0 var(--out), 0 0 60px rgba(255,92,200,.2); max-width: 460px; width: calc(100% - 28px); background-image: repeating-linear-gradient(transparent, transparent 29px, rgba(110,90,66,.2) 29px, rgba(110,90,66,.2) 30px); animation: cartaEntra .5s var(--rebote); transform: rotate(-1deg); }
.carta h3 { font-size: 25px; margin-bottom: 2px; }
.carta__sub { color: var(--tinta2); font-size: 14px; margin-bottom: 12px; }
.carta p { font-size: 16.5px; line-height: 30px; }
.carta__pie { display: flex; align-items: center; gap: 10px; margin-top: 14px; justify-content: space-between; }
.velo--centro { align-items: center; }
@keyframes cartaEntra { from { transform: rotate(-6deg) translateY(30px) scale(.9); opacity: 0; } }

/* ---------- Toasts ---------- */
#toasts { position: fixed; left: 0; right: 0; top: calc(var(--hud-h) + var(--safe-t) + 6px); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 300; pointer-events: none; padding: 0 12px; }
.toast { background: var(--ber-900); border: 3px solid var(--out); border-radius: 14px; padding: 8px 14px; font-weight: 600; font-size: 15px; box-shadow: 0 4px 0 var(--out); animation: toastIn .3s var(--rebote); display: flex; align-items: center; gap: 8px; max-width: 460px; color: var(--txt); }
.toast--ok { background: #1F4A2A; }
.toast--mal { background: #5A1E2C; }
.toast .ico, .toast .moneda-svg { width: 24px; height: 24px; flex: none; }
.toast.sale { opacity: 0; transform: translateY(-10px); transition: all .25s ease; }
@keyframes toastIn { from { transform: translateY(-18px) scale(.9); opacity: 0; } }

/* ---------- Efectos ---------- */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 260; overflow: hidden; }
.fx-vuela { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; }
.fx-vuela svg { width: 100%; height: 100%; }
.fx-flota { position: absolute; font-family: var(--f-d); font-size: 19px; color: var(--hoja-l); text-shadow: 0 2px 0 var(--out), 2px 0 0 var(--out), -2px 0 0 var(--out), 0 -2px 0 var(--out); transform: translate(-50%, -50%); animation: flota 1s var(--ease) forwards; white-space: nowrap; }
.fx-flota--oro { color: var(--wc); } .fx-flota--agua { color: #A8E0FF; } .fx-flota--cash { color: var(--cash); }
@keyframes flota { from { opacity: 0; margin-top: 10px; } 20% { opacity: 1; } to { opacity: 0; margin-top: -44px; } }
.fx-hoja { position: absolute; top: -40px; width: 30px; height: 30px; animation: cae linear forwards; }
.fx-hoja svg { width: 100%; height: 100%; overflow: visible; }
@keyframes cae { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); } }
.fx-gota { position: absolute; width: 7px; height: 11px; border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%; background: var(--agua); border: 1.5px solid var(--out); animation: gota .5s ease-in forwards; }
@keyframes gota { from { transform: translateY(-6px); opacity: 1; } to { transform: translateY(46px); opacity: .2; } }
.fx-lata { position: absolute; width: 64px; height: 64px; margin: -32px 0 0 -8px; animation: lata .85s var(--ease) forwards; transform-origin: 70% 70%; }
.fx-lata svg { width: 100%; height: 100%; }
@keyframes lata { 0% { opacity: 0; transform: translateY(-14px) rotate(14deg); } 22% { opacity: 1; transform: translateY(0) rotate(-22deg); } 78% { opacity: 1; transform: translateY(0) rotate(-26deg); } 100% { opacity: 0; transform: translateY(-14px) rotate(6deg); } }

/* ---------- Tutorial ---------- */
.tuto-bloq { position: fixed; background: rgba(15, 7, 24, .72); z-index: 400; }
.tuto-marco { position: fixed; z-index: 401; border: 3px solid var(--hoja-l); border-radius: 16px; box-shadow: 0 0 0 3px var(--out), 0 0 24px var(--hoja); pointer-events: none; transition: all .25s var(--ease); animation: tutoLatido 1.3s ease-in-out infinite; }
@keyframes tutoLatido { 50% { box-shadow: 0 0 0 3px var(--out), 0 0 40px var(--hoja); } }
.tuto-globo { position: fixed; z-index: 402; left: 12px; right: 12px; max-width: 460px; margin: 0 auto; animation: tutoEntra .35s var(--rebote); }
.tuto-globo .globo { font-size: 16px; }
.tuto-globo .btn { margin-top: 10px; }
.tuto-saltar { position: fixed; z-index: 403; right: 12px; top: calc(10px + var(--safe-t)); font-size: 13.5px; background: var(--ber-900); border: 2px solid var(--out); border-radius: 9px; padding: 5px 10px; color: var(--txt2); }
@keyframes tutoEntra { from { transform: translateY(14px) scale(.96); opacity: 0; } }

/* ---------- Panel de pruebas ---------- */
.prueba-btn { position: fixed; right: 0; top: 34%; z-index: 44; width: 30px; height: 40px; opacity: .8; border-right: 0 !important; border-radius: 10px 0 0 10px !important; display: grid; place-items: center; background: #26324F; color: #9FD6F7; border: 3px solid var(--out); border-radius: 10px; font-size: 15px; }
.prueba { position: fixed; right: 10px; top: calc(34% + 46px); max-height: 58vh; overflow: auto; width: min(340px, calc(100vw - 20px)); z-index: 151; background: #17233C; border: 3px solid var(--out); border-radius: 14px; padding: 12px; box-shadow: 0 5px 0 var(--out); font-size: 14px; }
.prueba h4 { font-size: 16px; margin-bottom: 8px; }
.prueba__fila { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; align-items: center; }
.prueba__fila b { width: 100%; font-weight: 600; font-size: 12.5px; color: #9FB6D9; }
.prueba button { padding: 4px 9px; border: 2px solid var(--out); background: #2B3F66; border-radius: 8px; font-weight: 600; font-size: 13.5px; }
.prueba button.is-on { background: var(--hoja); color: var(--hoja-t); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (min-width: 1000px) { .prueba-btn { top: 20%; } .prueba { top: calc(20% + 46px); } }