/* ApuTrivia · tema «Manta de noche»
   Idea: un tejido andino bajo cielo de Apurímac. Una sola cosa llamativa: las esquinas escalonadas (chakana)
   y la franja tejida. Lo demás se mantiene quieto. */
:root{
  --bg:#150a22;--card:#251038;--card2:#341a4d;--line:#4a2a66;
  --tx:#f7ecd6;--mut:#c2aed6;
  --acc:#f6b73c;--acc2:#1bbfae;--fucsia:#e8317f;--bad:#ff5a7a;--ok:#2bd9a0;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --tejido:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='14'%3E%3Crect width='32' height='14' fill='%23251038'/%3E%3Crect width='32' height='2' fill='%23e8317f'/%3E%3Crect y='12' width='32' height='2' fill='%23e8317f'/%3E%3Cpath d='M16 3L22 7L16 11L10 7Z' fill='%23f6b73c'/%3E%3Cpath d='M0 7L4 3L8 7L4 11Z' fill='%231bbfae'/%3E%3Cpath d='M24 7L28 3L32 7L28 11Z' fill='%231bbfae'/%3E%3C/svg%3E");
  /* esquina escalonada: dos peldaños, arriba a la derecha y abajo a la izquierda */
  --paso:polygon(0 0,calc(100% - 14px) 0,calc(100% - 14px) 7px,calc(100% - 7px) 7px,calc(100% - 7px) 14px,100% 14px,100% 100%,14px 100%,14px calc(100% - 7px),7px calc(100% - 7px),7px calc(100% - 14px),0 calc(100% - 14px));
  --paso-s:polygon(0 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
}
body{font-family:var(--body);background:var(--bg);background-image:radial-gradient(900px 400px at 85% -120px,#4a1f6d55,transparent 70%)}
h1,h2,h3,.pozo,.kpi b,.logo{font-family:var(--display);font-stretch:85%;letter-spacing:-.01em}
h1{font-weight:800;font-size:1.9rem}
h2{font-weight:800}
a{color:var(--acc2)}

/* cabecera */
.top{background:#0f0618;border-bottom:0;position:sticky;padding-bottom:calc(.7rem + 14px)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;background:var(--tejido) repeat-x;background-size:32px 14px}
.logo{display:inline-flex;align-items:center;gap:.5rem;color:var(--acc);font-size:1.3rem;font-weight:800}
.logo svg{width:1.7rem;height:1.7rem;flex:none}
.saldo{background:var(--card2);color:var(--acc)!important;border:1px solid var(--line);border-radius:0;clip-path:var(--paso-s)}

/* botones y tarjetas con esquinas escalonadas */
.btn{border-radius:0;clip-path:var(--paso-s);background:linear-gradient(180deg,#ffd06b,var(--acc));color:#2a1500;font-family:var(--display);font-weight:800;letter-spacing:.01em;padding:.75rem 1.3rem;transition:filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn.sec{background:var(--card2);color:var(--tx);box-shadow:inset 0 0 0 2px var(--line)}
.btn.mal{background:var(--bad);color:#2a0010}
.btn.ok{background:var(--ok);color:#00241b}
.btn.chico{padding:.35rem .8rem}
.card{background:linear-gradient(180deg,var(--card),#200e31);border:0;border-radius:0;clip-path:var(--paso);padding:1.1rem 1.2rem 1.1rem}
.card::before{content:none}
.tcard{position:relative;padding-top:1.5rem}
.tcard::after{content:"";position:absolute;left:0;top:0;right:14px;height:8px;background:var(--tejido) repeat-x;background-size:32px 14px;background-position:0 -3px}
.tcard:hover{background:linear-gradient(180deg,#2f1648,#26113a)}
.badge{border-radius:0;clip-path:var(--paso-s);padding:.15rem .7rem;background:var(--card2)}
.b-abierto{background:#0f6d63;color:#c9fff6}
.b-en_juego{background:#8a5a00;color:#ffe7ae}
.b-finalizado{background:#463357}
.pozo{color:var(--acc)}
.kpi b{color:var(--acc)}
input,select,textarea{background:#0f0618;border:2px solid var(--line);border-radius:0;color:var(--tx);font-family:var(--body)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc2)}
.copiable{background:#0f0618;border-color:var(--line);border-radius:0}
.subnav a{border-radius:0;clip-path:var(--paso-s);background:var(--card2)}
.subnav a.on{background:var(--acc);color:#2a1500}
th{color:var(--mut)}
th,td{border-bottom-color:var(--line)}
.flash{border-radius:0;clip-path:var(--paso-s)}
.flash.ok{background:#0b5a4a}
.flash.error{background:#6e1a3a}

/* héroe: cordillera + sol */
.hero{position:relative;padding:0;margin:.6rem 0 1rem;overflow:hidden;background:linear-gradient(180deg,#2a0f46 0%,#4b1670 38%,#b0287a 72%,#f6b73c 100%);clip-path:var(--paso)}
.hero .escena{display:block;width:100%;height:auto;min-height:120px;margin-top:-1px}
.hero .texto{position:relative;z-index:1;padding:1.6rem 1.3rem .8rem}
.hero h1{font-size:clamp(1.8rem,6.4vw,2.9rem);line-height:1.05;margin:0 0 .6rem;max-width:18ch}
.hero p{max-width:52ch;margin:.2rem 0 1rem;color:#eadcf5}
.hero .row{gap:.7rem}
.tejido{height:14px;background:var(--tejido) repeat-x;background-size:32px 14px;margin:1.4rem 0 .2rem}

/* partida: la barra de tiempo es una cinta tejida que se acorta */
.barra{height:14px;background:#0f0618;border-radius:0;overflow:hidden}
.barra i,.barra>i{background:var(--tejido) repeat-x;background-size:32px 14px;height:100%;transition:width .2s linear}
.opt{background:var(--card2);border:0;border-radius:0;clip-path:var(--paso-s);box-shadow:inset 4px 0 0 var(--fucsia);padding:.95rem 1.1rem;font-family:var(--body);font-weight:600}
.opt:hover:not([disabled]){background:#43236100;background:#432161;box-shadow:inset 4px 0 0 var(--acc)}
.opt.sel{background:#432161;box-shadow:inset 4px 0 0 var(--acc)}
.opt.ok{background:#0b5a4a;box-shadow:inset 4px 0 0 var(--ok)}
.opt.no{background:#6e1a3a;box-shadow:inset 4px 0 0 var(--bad)}
#texto{font-size:1.35rem;line-height:1.25}

footer{border-top:0;position:relative;padding-top:2.4rem}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:var(--tejido) repeat-x;background-size:32px 14px}
footer a{color:var(--acc2)}
.logo-by{margin-top:.8rem}

@media (prefers-reduced-motion:no-preference){
  .hero .sol{transform-origin:50% 50%;animation:respira 6s ease-in-out infinite}
  @keyframes respira{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
}
@media (prefers-reduced-motion:reduce){.barra i{transition:none}}

/* pestañas de juegos del portal */
.juegos{display:flex;gap:.5rem;padding:.6rem 1rem;overflow-x:auto;background:#0f0618;border-bottom:1px solid var(--line);scrollbar-width:none}
.juegos::-webkit-scrollbar{display:none}
.juego-tag{flex:none;color:var(--mut);text-decoration:none;font-family:var(--display);font-weight:800;padding:.4rem 1rem;background:var(--card2);clip-path:var(--paso-s);transition:color .15s}
.juego-tag:hover{color:var(--tx)}
.juego-tag.on{background:linear-gradient(180deg,#ffd06b,var(--acc));color:#2a1500}
.juegos-grid .card b{font-family:var(--display);font-size:1.15rem}