/* Tour de Shop (JCbike) - estilos del juego. Todo va dentro de .jcbtd para no chocar con el tema. */
.jcbtd{--bg:#F3F5F2;--card:#FFFFFF;--ink:#1B2A33;--mut:#5F6F77;--line:#DDE3E0;--field:#F4F7F5;--brand:#3DDC2B;--brand-ink:#0B2208;--warn:#D93A2B;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--ink);line-height:1.45;box-sizing:border-box}
.jcbtd *,.jcbtd *::before,.jcbtd *::after{box-sizing:inherit}
.jcbtd [hidden]{display:none !important}
.jcbtd button{font-family:inherit}
.jcbtd h1,.jcbtd h2,.jcbtd h3,.jcbtd p,.jcbtd small,.jcbtd b,.jcbtd label,.jcbtd span{color:inherit}
.jcbtd a.cta{display:inline-block;text-decoration:none}
.jcbtd .mcard a.cta{color:var(--brand-ink)}
.jcbtd .mcard a.cta.alt{color:inherit}
.jcbtd .game{position:relative;container-type:inline-size;border-radius:18px;overflow:hidden;background:#78b9e8;aspect-ratio:16/9;width:100%}
.jcbtd .game canvas{display:block;width:100%;height:100%;touch-action:manipulation}
.jcbtd .hud{position:absolute;top:1.6cqw;left:1.6cqw;right:1.6cqw;display:flex;gap:1cqw;align-items:flex-start;pointer-events:none;font-size:clamp(9px,1.65cqw,17px)}
.jcbtd .chip{background:rgba(27,42,51,.93);color:#fff;border-radius:1.1em;padding:.6em .9em}
.jcbtd .lvl{display:flex;gap:.8em;align-items:center}
.jcbtd .badge{width:2.7em;height:2.7em;border-radius:50%;background:#3DDC2B;color:#0B2208;display:grid;place-items:center;font-weight:700;font-size:1.3em;border:.15em solid #fff;flex:none}
.jcbtd .lvl b{display:block;font-size:1.15em;line-height:1.15}
.jcbtd .lvl small{display:block;color:#C9D3D8;font-size:.85em}
.jcbtd .bar{height:.5em;background:#3C4D57;border-radius:9px;overflow:hidden;margin-top:.45em;width:15em;max-width:100%}
.jcbtd .bar i{display:block;height:100%;background:#3DDC2B;width:0;transition:width .25s}
.jcbtd .mid{margin:0 auto;background:#fff;color:#1B2A33;text-align:center}
.jcbtd .mid b{display:block;font-size:1.1em}
.jcbtd .mid small{color:#5F6F77}
.jcbtd .right{display:flex;flex-direction:column;gap:.5em;align-items:flex-end}
.jcbtd .right .chip{display:flex;gap:.6em;align-items:center;font-weight:600}
.jcbtd .dot{width:1.5em;height:1.5em;border-radius:50%;display:inline-block;background:#F6CF1D;border:.12em solid #fff}
.jcbtd .dot.red{background:#D93A2B}
.jcbtd .hudlogo{position:absolute;left:1.6cqw;top:14cqw;background:#000;border:.2em solid #3DDC2B;border-radius:1em;padding:.35em .9em;font-size:clamp(9px,1.65cqw,17px);pointer-events:none}
.jcbtd .hudlogo img{height:2.3em;display:block}
.jcbtd .nextp{position:absolute;left:1.6cqw;top:9.6cqw;background:#fff;color:#1B2A33;border-radius:1em;padding:.4em .8em;font-size:clamp(9px,1.5cqw,15px);pointer-events:none;font-weight:600}
.jcbtd .toast{position:absolute;left:50%;bottom:3cqw;transform:translateX(-50%);background:#fff;color:#1B2A33;border-radius:999px;padding:.55em 1.2em;font-weight:600;font-size:clamp(11px,1.8cqw,18px);opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
.jcbtd .toast.on{opacity:1}
.jcbtd .start{position:absolute;inset:0;display:grid;place-items:center;background:rgba(14,21,25,.45);text-align:center;color:#fff;padding:16px}
.jcbtd .start[hidden]{display:none}
.jcbtd .start>div{max-width:34em;font-size:clamp(11px,2cqw,18px)}
.jcbtd .start h2{margin:0 0 .3em;font-size:2.2em}
.jcbtd .start p{margin:.3em 0 1em}
.jcbtd .cta{font:inherit;font-weight:700;border:0;border-radius:999px;padding:.7em 1.8em;background:var(--brand);color:var(--brand-ink);cursor:pointer;font-size:1.1em}
.jcbtd .cta.alt{background:none;border:2px solid currentColor;color:inherit}
.jcbtd .controls{display:flex;gap:10px;margin-top:10px}
.jcbtd .controls button{font:inherit;font-weight:700;font-size:1.1rem;border:0;border-radius:999px;padding:16px 10px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.jcbtd #bLeft,
.jcbtd #bRight{flex:1 1 0;background:#1B2A33;color:#fff}
.jcbtd #bJump{flex:2 1 0;background:#1B2A33;color:#3DDC2B}
.jcbtd #bTurbo{flex:1 1 0;background:linear-gradient(90deg,#D93A2B var(--t,0%),#6b2a24 var(--t,0%));color:#fff}
.jcbtd #bSound,
.jcbtd #bMusic,
.jcbtd #bFull{flex:0 0 56px;background:var(--card);color:var(--ink);border:2px solid var(--line)}
.jcbtd .mid small{display:block}
.jcbtd .banner{position:absolute;left:50%;top:12.6cqw;transform:translateX(-50%);background:rgba(255,255,255,.96);color:#1B2A33;border-radius:1.2em;padding:.6em 1.3em;text-align:center;font-size:clamp(10px,1.8cqw,18px);pointer-events:none;box-shadow:0 .3em 1em rgba(0,0,0,.2);max-width:92%}
.jcbtd .banner b{display:block;font-size:1.15em}
.jcbtd .banner span{color:#5F6F77;font-size:.9em}
.jcbtd .route{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:8px}
.jcbtd .rs{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:9px 12px;display:flex;gap:10px;align-items:center}
.jcbtd .rs .nn{flex:none;width:2.1em;height:2.1em;border-radius:50%;display:grid;place-items:center;background:var(--field);font-weight:700;font-size:.85rem}
.jcbtd .rs b{display:block;font-size:.92rem;line-height:1.25}
.jcbtd .rs small{color:var(--mut);font-size:.78rem;display:block;line-height:1.3}
.jcbtd .rs.done .nn{background:var(--brand);color:var(--brand-ink)}
.jcbtd .rs.cur{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 35%,transparent)}
.jcbtd .rs.cur .nn{background:var(--ink);color:var(--bg)}
@media (max-width:640px){
  .jcbtd .controls{flex-wrap:wrap}
  .jcbtd #bLeft,
.jcbtd #bRight{flex:1 1 40%}
  .jcbtd #bJump{flex:2 1 60%}
  .jcbtd #bTurbo{flex:1 1 40%}
}
.jcbtd .hint{color:var(--mut);font-size:.85rem;margin:8px 2px 0}
.jcbtd h2.sec{font-size:1.25rem;margin:26px 0 10px}
.jcbtd .spots{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.jcbtd .spot{font-size:.8rem;padding:4px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--mut)}
.jcbtd .spot.on{background:#E3F8DF;color:#12420B;border-color:#9BE08F}
.jcbtd .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.jcbtd .pc{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:6px}
.jcbtd .pc.won{border-color:var(--brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 35%,transparent)}
.jcbtd .pc h3{margin:0;font-size:1rem}
.jcbtd .pc .d{color:var(--mut);font-size:.9rem}
.jcbtd .pc .ic{font-size:1.6rem}
.jcbtd .mini{height:8px;background:var(--field);border-radius:9px;overflow:hidden}
.jcbtd .mini i{display:block;height:100%;background:var(--brand)}
.jcbtd .code{display:flex;gap:8px;align-items:center;background:var(--field);border:2px dashed var(--ink);border-radius:12px;padding:8px 10px;font-weight:700;letter-spacing:.04em}
.jcbtd .code button,
.jcbtd .sm{font:inherit;font-size:.85rem;font-weight:600;border:0;border-radius:999px;padding:6px 12px;background:var(--brand);color:var(--brand-ink);cursor:pointer;margin-left:auto}
.jcbtd .tag{font-size:.8rem;font-weight:600;color:var(--mut)}
.jcbtd .modal{position:absolute;inset:0;background:rgba(8,12,15,.7);display:grid;place-items:center;padding:12px;overflow:auto}
.jcbtd .modal[hidden]{display:none}
.jcbtd .mcard{background:var(--card);color:var(--ink);border-radius:20px;padding:18px;display:flex;gap:18px;max-width:46em;width:100%;font-size:clamp(11px,1.7cqw,16px);max-height:100%;overflow:auto}
.jcbtd .mcard .pic{flex:0 0 32%;border-radius:16px;background:radial-gradient(circle at 50% 38%,rgba(61,220,43,.28),rgba(61,220,43,0) 70%),linear-gradient(180deg,#1E2A31,#10171B);padding:.5em .5em 0}
.jcbtd .mcard .pic img{display:block;width:100%;filter:drop-shadow(0 .4em .5em rgba(0,0,0,.45))}
.jcbtd .mcard .pic .lg{background:#000;border:.2em solid #3DDC2B;border-radius:1em;padding:.5em;margin:.6em -.5em 0 -.5em}
.jcbtd .mcard .pic .lg img{border-radius:0;height:2.6em;width:auto;margin:0 auto;filter:none}
.jcbtd .mcard .tx{flex:1;min-width:0}
.jcbtd .mcard h2{margin:0;font-size:1.9em;line-height:1.1}
.jcbtd .mcard .big{font-size:2.4em;font-weight:700;color:#2F7D5C;line-height:1.1}
.jcbtd .mcard label{display:block;font-weight:600;margin:.6em 0 .2em}
.jcbtd .mcard input[type=text],
.jcbtd .mcard input[type=email]{width:100%;font:inherit;padding:.6em .8em;border-radius:.7em;border:2px solid var(--line);background:var(--field);color:var(--ink)}
.jcbtd .mcard .row{display:flex;gap:.6em;flex-wrap:wrap;margin-top:.9em}
.jcbtd .mcard .chk{display:flex;gap:.5em;align-items:flex-start;font-weight:400;font-size:.9em}
.jcbtd .mcard .note{color:var(--mut);font-size:.85em;margin-top:.6em}
.jcbtd .err{color:var(--warn);font-size:.85em;min-height:1.2em}
@media (max-width:560px){
  .jcbtd .mcard .pic{display:none}
}
@media (prefers-reduced-motion:reduce){
  .jcbtd .bar i,
.jcbtd .toast{transition:none}
}

.jcbtd .startmascot{position:absolute;right:2.5cqw;bottom:0;height:84%;width:auto;filter:drop-shadow(0 .6em .8em rgba(0,0,0,.5));pointer-events:none}
@container (min-width:821px){.jcbtd .start{padding-right:27cqw}}
@container (max-width:820px){.jcbtd .startmascot{display:none}}

/* pantalla completa (movil) */
.jcbtd .cgrp{display:contents}
.jcbtd .fsbar,
.jcbtd .rothint{display:none}
.jcbtd #bFull{flex:0 0 56px}
.jcbtd .fsroot.fs{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;height:100vh;height:100dvh;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:#0B1115;color:#fff;overflow:hidden;overscroll-behavior:contain;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.jcbtd .fsroot.fs .fsbar{display:flex;align-items:center;gap:8px;flex:none;height:46px;padding:0 10px}
.jcbtd .fsroot.fs .fsbar b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:600;color:#fff}
.jcbtd .fsroot.fs .fsbar button{flex:none;height:34px;min-width:34px;padding:0 12px;border:0;border-radius:999px;background:#1E2A31;color:#fff;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.jcbtd .fsroot.fs .fsbar #bMusic,
.jcbtd .fsroot.fs .fsbar #bSound{width:36px;padding:0;background:#1E2A31;color:#fff;border:0}
.jcbtd .fsroot.fs .fsbar #bClose{background:#D93A2B;font-size:16px}
.jcbtd .fsroot.fs .stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center}
.jcbtd .fsroot.fs .game{width:100%;flex:none;border-radius:0}
.jcbtd .fsroot.fs .rothint{display:block;flex:none;padding:6px 12px 0;text-align:center;font-size:12px;color:#9AABB4}
.jcbtd .fsroot.fs .controls{flex:1;min-height:0;width:100%;margin:0;padding:10px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1.5fr 1fr;grid-template-areas:"l r" "j j" "t t";gap:10px}
.jcbtd .fsroot.fs .controls button{height:auto;min-height:0;padding:0;font-size:1.25rem}
.jcbtd .fsroot.fs #bLeft{grid-area:l}
.jcbtd .fsroot.fs #bRight{grid-area:r}
.jcbtd .fsroot.fs #bJump{grid-area:j;font-size:1.6rem}
.jcbtd .fsroot.fs #bTurbo{grid-area:t}
.jcbtd .fsroot.fs #bFull{display:none}
@media (orientation:landscape){
.jcbtd .fsroot.fs .stage{position:relative;justify-content:center}
.jcbtd .fsroot.fs .game{width:min(100%,calc((100vh - 46px) * 16 / 9));width:min(100%,calc((100dvh - 46px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * 16 / 9))}
.jcbtd .fsroot.fs .rothint{display:none}
.jcbtd .fsroot.fs .controls{position:absolute;left:0;right:0;bottom:0;flex:none;width:auto;display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding:0 10px 10px;pointer-events:none}
.jcbtd .fsroot.fs .cgrp{display:flex;align-items:flex-end;gap:10px}
.jcbtd .fsroot.fs .cr{flex-direction:row-reverse}
.jcbtd .fsroot.fs .controls button{pointer-events:auto;opacity:.8;height:62px;font-size:1.05rem}
.jcbtd .fsroot.fs #bLeft,
.jcbtd .fsroot.fs #bRight{flex:none;width:62px;border-radius:50%;font-size:1.3rem}
.jcbtd .fsroot.fs #bLeft .tx,
.jcbtd .fsroot.fs #bRight .tx{display:none}
.jcbtd .fsroot.fs #bJump{flex:none;width:130px;height:74px;font-size:1.25rem}
.jcbtd .fsroot.fs #bTurbo{flex:none;width:78px}
}