:root{
  --bg:#B7FF72; --bg2:#a6f05e; --card:#ffffff; --line:rgba(24,37,29,.15);
  --txt:#18251D; --mut:#4a5a50; --pri:#18251D; --pri2:#2a3a30;
  --accent:#18251D; --danger:#c0392b; --radius:16px; --field:#f4faee;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body {
    background: radial-gradient(1200px 600px at 50% -10%, f4faee 0, f4faee 60%), var(--bg);
    color: #51871d;
    font-family: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
}
#app{max-width:440px;margin:0 auto;min-height:100%;padding:24px 18px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column}

.screen{display:none;flex-direction:column;gap:14px;animation:fade .35s ease}
.screen.is-active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.brand {
    font-weight: 800;
    letter-spacing: .5px;
    color: #90e938;
    font-size: 15px
}
h1{font-size:26px;line-height:1.15;margin:4px 0 0}
.lead{color:var(--mut);margin:0;font-size:15px}
.lead.center,.hint.center{text-align:center}
.legal{color:var(--mut);font-size:12px;text-align:center;margin-top:6px}
.legal a{color:var(--accent);text-decoration:underline}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 30px rgba(24,37,29,.12)}
label{font-size:13px;color:var(--mut);font-weight:600}
input[type=tel],input[type=text],input[type=email],input:not([type]){
  width:100%;background:var(--field);border:1px solid var(--line);border-radius:12px;
  color:var(--txt);font-size:17px;padding:14px 14px;outline:none;transition:border .2s
}
input:focus{border-color:var(--accent)}

.canal{display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--mut)}
.segmented{display:flex;background:var(--field);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.seg{flex:1;border:0;background:transparent;color:var(--mut);padding:10px;border-radius:9px;font-size:14px;font-weight:700}
.seg.is-on{background:var(--accent);color:#B7FF72}

.btn{border:0;border-radius:12px;padding:15px;font-size:16px;font-weight:800;cursor:pointer}
.btn-primary{background:linear-gradient(180deg,var(--pri),var(--pri2));color:#B7FF72}
.btn-primary:disabled{opacity:.5}
.btn-link{background:0;border:0;color:var(--accent);font-size:13px;padding:6px;cursor:pointer;text-decoration:underline}
.btn-link:disabled{color:var(--mut);opacity:.6}
.hint{min-height:18px;font-size:13px;color:var(--mut);margin:0}
.hint.err{color:var(--danger)}
.hint.ok{color:#1f7a33}

/* OTP */
.otp-inputs{display:flex;gap:8px;justify-content:center}
.otp-inputs input{text-align:center;font-size:24px;font-weight:800;padding:14px 0;letter-spacing:0}

/* JUEGO */
#screen-game{gap:10px}
.game-hud{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--mut)}
.game-hud b{color:var(--txt)}
.hud-item{background:var(--card);border:1px solid var(--line);padding:8px 12px;border-radius:10px}
.canvas-wrap{position:relative;width:100%;aspect-ratio:1/1;background:#eafddb;border:1px solid var(--line);border-radius:14px;overflow:hidden}
#game-canvas{width:100%;height:100%;display:block;touch-action:none}
.game-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:rgba(255,255,255,.86);color:var(--txt);text-align:center;padding:20px;font-weight:800;font-size:20px}
.game-overlay.show{display:flex}
.game-overlay .sub{font-size:14px;color:var(--mut);font-weight:500}

.dpad{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,56px);justify-content:center;gap:8px;margin-top:4px}
.dbtn{background:var(--card);border:1px solid var(--line);color:var(--txt);border-radius:12px;font-size:22px;cursor:pointer;touch-action:manipulation;user-select:none}
.btn,.seg,.chip{touch-action:manipulation}
.dbtn:active{background:var(--accent);color:#B7FF72}
.dbtn.up{grid-column:2;grid-row:1}
.dbtn.left{grid-column:1;grid-row:2}
.dbtn.down{grid-column:2;grid-row:2}
.dbtn.right{grid-column:3;grid-row:2}

/* REGISTRO */
.win-badge{align-self:center;background:#18251D;border:1px solid #18251D;color:#B7FF72;padding:10px 16px;border-radius:999px;font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--field);color:var(--txt);padding:9px 13px;border-radius:999px;font-size:14px;cursor:pointer;user-select:none;display:flex;align-items:center;gap:6px}
.chip.on{background:var(--accent);border-color:var(--accent);color:#B7FF72}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:500;color:var(--mut);font-size:13px}
.check input{width:20px;height:20px;margin-top:2px;flex:0 0 auto}

/* BOLETO */
.ticket{background:linear-gradient(160deg,#20332a,#18251D);border:1px solid #18251D;border-radius:20px;padding:26px;text-align:center;box-shadow:0 16px 40px rgba(24,37,29,.25)}
.ticket-top{display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.7);font-size:12px}
.ticket .brand{color:#B7FF72}
.ticket-label{text-transform:uppercase;letter-spacing:1px}
.ticket-num{font-size:64px;font-weight:900;color:#B7FF72;margin:14px 0 2px;letter-spacing:1px}
.ticket-name{font-size:18px;font-weight:700;color:#fff}
.ticket-foot{color:rgba(255,255,255,.6);font-size:12px;margin-top:16px}