:root{--ink:#1b1b33;--gold:#ffd400;--glass:rgba(27,27,51,.78);--dim:rgba(255,255,255,.7)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#8fd3ff;font-family:'Nunito',system-ui,sans-serif;color:#fff}
body>canvas{position:fixed;inset:0;display:block}
.lf{font-family:'Lilita One',system-ui,sans-serif;font-weight:400}
.ink{text-shadow:0 4px 0 var(--ink),3px 0 0 var(--ink),-3px 0 0 var(--ink),0 -3px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink)}
#hud{position:fixed;inset:0;pointer-events:none}
#hud button,#hud input,#hud .panel{pointer-events:auto}
.panel{background:var(--glass);border:3px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 rgba(0,0,0,.35);padding:10px 14px}
.ph{display:flex;justify-content:space-between;align-items:center;font-family:'Lilita One';font-size:13px;letter-spacing:.06em;color:var(--dim);margin-bottom:6px}
.hide{display:none!important}

/* ---- arriba izquierda: potencia ---- */
#pw{position:absolute;top:16px;left:16px;width:250px;padding:8px 14px 10px}
.pw-main{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;line-height:1}
.pw-main b{font-size:66px}
.pw-main i{font-style:normal;font-size:22px;opacity:.85}
#zoneBar{display:flex;gap:3px;margin:6px 0 8px}
#zoneBar span{flex:1;height:7px;border-radius:4px;opacity:.28;transition:opacity .2s}
#zoneBar span.on{opacity:1;box-shadow:0 0 8px currentColor}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;text-align:center}
.grid2 b{display:block;font-size:26px;line-height:1.05}
.grid2 small{font-size:10px;font-weight:900;letter-spacing:.05em;color:var(--dim)}

#badge{position:absolute;top:24px;left:280px;width:76px;height:76px;border-radius:50%;border:4px solid var(--ink);background:rgba(27,27,51,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:.45;transition:all .25s;box-shadow:0 5px 0 rgba(0,0,0,.35)}
#badge span{font-size:30px;line-height:1}
#badge small{font-size:10px;letter-spacing:.05em}
#badge.on{opacity:1;background:radial-gradient(circle at 40% 35%,#9ff3ff,#1fb8e0);transform:scale(1.08)}

/* ---- arriba centro ---- */
#top{position:absolute;top:16px;left:50%;transform:translateX(-50%);width:clamp(380px,40vw,560px);padding:8px 16px 8px}
.tv{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.tv>div{text-align:center;flex:1}
.tv b{font-size:30px;line-height:1}
.tv i{display:block;font-style:normal;font-family:'Lilita One';font-size:11px;letter-spacing:.06em;color:var(--dim)}
.grade[data-level="0"] b{color:#7fd8ff}
.grade[data-level="2"] b{color:#ffe14d}
.grade[data-level="3"] b{color:#ffa53d}
.grade[data-level="4"] b{color:#ff5a5a}
.grade{position:relative}.gcap{position:absolute;right:-4px;top:-8px;font-style:normal;font-size:10px;font-weight:900;background:#ff5a5a;color:#fff;border:2px solid #1b1b33;border-radius:999px;padding:0 5px;line-height:14px}
#lapBar{height:8px;background:rgba(255,255,255,.18);border-radius:4px;margin:7px 0 5px;overflow:hidden}
#lapFill{display:block;height:100%;width:0;background:linear-gradient(90deg,#3b8bff,#7fd8ff);border-radius:4px}
.tsub{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:900;color:var(--dim)}
.tsub b{color:#fff;font-size:16px}
#coins{display:flex;align-items:center;gap:6px}
.coin{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6a8,#ffc400 45%,#d98f00);border:2px solid var(--ink);display:inline-block}
#coins.pop b{animation:bump .25s;display:inline-block}
@keyframes bump{50%{transform:scale(1.5)}}

/* ---- derecha ---- */
#right{position:absolute;top:16px;right:16px;width:250px;display:flex;flex-direction:column;gap:10px}
#mapPanel{padding:8px}
#minimap{width:100%;height:140px;display:block}
.maprow{display:flex;justify-content:space-between;align-items:baseline;margin:4px 2px 4px;font-size:13px}
.maprow b{font-size:16px}
#profile{width:100%;height:52px;display:block}
#board{padding:8px 10px}
#board .ph b{color:#fff;font-size:22px}
#boardList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
#boardList li{display:grid;grid-template-columns:18px 12px 1fr auto;grid-template-rows:auto auto;column-gap:6px;align-items:center;padding:4px 6px;border-radius:9px;background:rgba(255,255,255,.07);font-size:13px}
#boardList li.me{background:linear-gradient(90deg,#2f80ff,#1f5fd0);box-shadow:0 0 0 2px #fff inset}
#boardList .pos{grid-row:span 2;font-family:'Lilita One';font-size:16px;text-align:center}
#boardList .dot{grid-row:span 2;width:12px;height:12px;border-radius:50%;border:2px solid var(--ink)}
#boardList .nm{font-weight:900}
#boardList .gap{font-family:'Lilita One';text-align:right}
#boardList .sub{grid-column:3/5;display:flex;justify-content:space-between;font-size:11px;color:var(--dim)}
#boardList li.me .sub{color:#e6efff}

/* ---- izquierda ---- */
#left{position:absolute;top:240px;left:16px;width:250px;display:flex;flex-direction:column;gap:10px}
#splits,#bests{padding:8px 10px}
#splitList{display:flex;flex-direction:column;gap:4px}
.split{display:grid;grid-template-columns:auto 1fr;gap:0 8px;padding:4px 8px;border-radius:9px;background:rgba(255,255,255,.07);font-size:12px}
.split:first-child{box-shadow:0 0 0 2px #fff inset}
.split .n{grid-row:span 2;font-family:'Lilita One';font-size:18px;align-self:center}
.split .tt{font-family:'Lilita One';font-size:16px;text-align:right}
.split .sub{display:flex;justify-content:space-between;color:var(--dim)}
.empty{font-size:12px;color:var(--dim);padding:2px 4px}
.br{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:900;padding:2px 2px}
.br b{font-size:16px}

/* ---- abajo ---- */
#dock{transition:transform .35s ease,opacity .35s ease}
#dock.tucked{transform:translate(-50%,140%);opacity:0;pointer-events:none}
#dock{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.pill{font-size:12px;font-weight:900;padding:4px 12px;border-radius:999px;background:var(--glass);border:2px solid var(--ink)}
.bar{display:flex;gap:8px;padding:8px}
.ib{font-family:'Lilita One',sans-serif;font-size:20px;min-width:48px;height:48px;padding:0 10px;color:#fff;border:3px solid var(--ink);border-radius:12px;cursor:pointer;background:linear-gradient(#3b9bff,#1f6fd8);box-shadow:0 4px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.ib:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.ib.wide{font-size:16px}
.ib.finish{background:linear-gradient(#ff85bb,#ff3d8b)}
#summary{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));padding:18px 22px;z-index:4;text-align:center}
#summary h2{margin:0 0 12px;font-size:34px;color:var(--gold);font-weight:400}
.sumGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.sumGrid div{background:rgba(255,255,255,.08);border-radius:12px;padding:8px}
.sumGrid b{display:block;font-family:'Lilita One';font-size:26px}
.sumGrid small{font-size:11px;font-weight:900;color:var(--dim)}
.sumBtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sumBtns .btn{font-size:17px}
.sumBtns .btn:not(.green):not(.orange){background:linear-gradient(#5a5a8c,#3d3d6a)}
.sumHelp{font-size:12px;color:var(--dim);margin:10px 0 0}
.ib.on{background:linear-gradient(#6ff07a,#1fb84a)}
#demo{position:absolute;left:16px;bottom:16px;display:flex;flex-direction:column;gap:4px;font-size:13px;width:190px}
#demo b{font-family:'Lilita One';font-weight:400;font-size:22px}
#settings{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);width:300px;display:flex;flex-direction:column;gap:8px;font-size:14px}
#settings label{display:flex;align-items:center;gap:8px;justify-content:space-between}
.botColors{display:flex;gap:6px;flex-wrap:wrap}
.botColors label{display:flex!important;flex-direction:column;align-items:center!important;gap:2px;font-size:11px;font-weight:900}
.botColors input{width:40px;height:26px;border:2px solid var(--ink);border-radius:6px;padding:0;background:none}
#settings select{font:inherit;border-radius:8px;border:2px solid var(--ink);padding:2px 6px}
#settings input[type=number]{width:70px;font:inherit;border-radius:8px;border:2px solid var(--ink);padding:2px 6px}
#settings small{color:var(--dim);font-size:11px}
#settings .ib{min-width:32px;height:32px;font-size:14px}
.seg{display:flex;gap:6px}
.seg .ib{background:linear-gradient(#5a5a8c,#3d3d6a)}
.seg .ib.finish{background:linear-gradient(#ff85bb,#ff3d8b)}
#summary{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));padding:18px 22px;z-index:4;text-align:center}
#summary h2{margin:0 0 12px;font-size:34px;color:var(--gold);font-weight:400}
.sumGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.sumGrid div{background:rgba(255,255,255,.08);border-radius:12px;padding:8px}
.sumGrid b{display:block;font-family:'Lilita One';font-size:26px}
.sumGrid small{font-size:11px;font-weight:900;color:var(--dim)}
.sumBtns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sumBtns .btn{font-size:17px}
.sumBtns .btn:not(.green):not(.orange){background:linear-gradient(#5a5a8c,#3d3d6a)}
.sumHelp{font-size:12px;color:var(--dim);margin:10px 0 0}
.ib.on{background:linear-gradient(#ffb23f,#ff7a00)}
/* Tamaño de datos: escala todo el HUD de forma proporcional (paneles, textos y márgenes) */
#hud[data-size="s"]{zoom:.85}
#hud[data-size="l"]{zoom:1.2}
#hud[data-size="l"] #badge{top:128px;left:276px}

/* ---- avisos ---- */
#big{position:absolute;top:36%;left:50%;transform:translate(-50%,-50%);font-size:150px;color:var(--gold);opacity:0;white-space:nowrap}
#big.show{animation:pop .95s ease-out}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}25%{transform:translate(-50%,-50%) scale(1.15);opacity:1}70%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
#segBar{position:absolute;top:140px;left:50%;transform:translateX(-50%);display:flex;align-items:baseline;gap:10px;padding:6px 14px;border-color:#ff8a00}
#segBar span{color:#ffb23f;font-size:16px}#segBar b{font-size:26px}#segBar small{font-size:12px;font-weight:900;color:var(--dim)}
#toast{position:absolute;top:22%;left:50%;transform:translateX(-50%);font-size:34px;opacity:0;transition:opacity .35s;white-space:nowrap}
#toast.show{opacity:1}

/* ---- portada ---- */
.btn{font-family:'Lilita One',sans-serif;font-size:18px;color:#fff;border:3px solid var(--ink);border-radius:14px;padding:8px 14px;cursor:pointer;box-shadow:0 5px 0 var(--ink);transition:transform .08s,box-shadow .08s;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
.orange{background:linear-gradient(#ffb23f,#ff7a00)}
.green{background:linear-gradient(#6ff07a,#1fb84a)}
.pink{background:linear-gradient(#ff85bb,#ff3d8b)}
.btn.on{background:linear-gradient(#6ff07a,#1fb84a)}
#overlay{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.15),rgba(27,27,51,.65));padding:16px;z-index:5}
#overlay.hide{display:none}
.card{max-height:calc(100vh - 32px);overflow-y:auto;max-width:600px;width:100%;background:linear-gradient(#4a3fd1,#2b2380);border:4px solid var(--ink);border-radius:26px;box-shadow:0 10px 0 var(--ink);padding:26px 28px;text-align:center}
.card h1{margin:0;font-size:44px;line-height:1;color:var(--gold)}
.card p{font-size:17px;margin:12px 0 18px}
.card ol{text-align:left;font-size:15px;line-height:1.55;margin:0 0 18px;padding-left:22px}
.card .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.card .btn{font-size:24px;padding:12px 22px}
.pick{display:flex;align-items:center;gap:10px;margin:0 0 10px;justify-content:center;flex-wrap:wrap}
.pick>span{font-size:15px;min-width:90px;text-align:right;color:var(--gold)}
.pickRow{display:flex;gap:8px;flex-wrap:wrap}
.pickRow button{font-family:'Lilita One',sans-serif;font-size:18px;color:#fff;border:3px solid var(--ink);border-radius:12px;padding:6px 14px;cursor:pointer;background:linear-gradient(#5a5a8c,#3d3d6a);box-shadow:0 4px 0 var(--ink);border-bottom:6px solid var(--c,var(--ink))}
.pickRow button small{display:block;font-family:'Nunito';font-weight:900;font-size:11px;opacity:.85}
.worldLabel{font-size:15px}.worldLabel small{opacity:.8;font-weight:900}
.nameIn{font:inherit;font-size:16px;font-weight:900;padding:6px 12px;border-radius:12px;border:3px solid var(--ink);width:240px}
.pickRow button.on{background:linear-gradient(#ffb23f,#ff7a00)}
.btn:disabled{opacity:.5;cursor:wait}
.liveRead{display:flex;gap:10px;justify-content:center;margin:10px 0}
.liveRead>div{display:flex;align-items:baseline;gap:4px;background:rgba(0,0,0,.25);border-radius:12px;padding:6px 12px;opacity:.45}
.liveRead>div.on{opacity:1;box-shadow:0 0 0 2px #6ff07a inset}
.liveRead small{font-size:11px;font-weight:900;color:var(--dim);margin-right:4px}
.liveRead b{font-family:'Lilita One';font-size:24px}
.liveRead i{font-style:normal;font-size:12px;font-weight:900;opacity:.8;margin-right:6px}
.keys{font-size:13px;opacity:.85;margin-top:14px}
kbd{background:#fff;color:var(--ink);border-radius:6px;padding:1px 6px;font-family:inherit;font-weight:900}

/* ---- pantallas medianas y chicas ---- */
@media (max-width:1100px){#left{display:none}#top{width:clamp(300px,44vw,480px)}.tv b{font-size:24px}}
@media (max-width:760px){
  #pw{width:170px}.pw-main b{font-size:44px}.grid2 b{font-size:18px}
  #badge{left:192px;top:18px;width:48px;height:48px;border-width:3px}#badge span{font-size:20px}#badge small{display:none}
  #top{top:auto;bottom:122px;width:calc(100vw - 32px)}
  #right{width:130px}#minimap{height:80px}#profile,.maprow,#board{display:none}
  #demo{display:none}
  .ib{min-width:40px;height:40px;font-size:16px}.ib.wide{font-size:13px}
}

.card .intro{font-size:14px;margin:8px 0 12px}
.card{padding:18px 22px}
.pick{margin:0 0 8px}
@media (max-height:760px){.card h1{font-size:32px}.card h1 br{display:none}}

/* ---- entrenamiento ---- */
#wkBox,#warmBox{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);width:min(460px,calc(100vw - 32px));padding:8px 12px 8px;transition:bottom .35s ease}
#wkBox.up,#warmBox.up{bottom:112px}
.wkHead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wkHead b{font-size:15px;color:var(--gold);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#wkMode{font-family:'Lilita One';font-size:13px;padding:3px 10px;min-width:0;height:auto}
#wkMode.erg{background:linear-gradient(#6ff07a,#1fb84a)}
.wkMain{display:grid;grid-template-columns:1.3fr 1fr 1fr;text-align:center;margin:2px 0}
.wkMain b{display:block;font-size:30px;line-height:1.05}
#wkTgt{font-size:38px}
.wkMain small{font-size:10px;font-weight:900;letter-spacing:.04em;color:var(--dim)}
.wkStep{font-size:13px;font-weight:900;text-align:center;margin:2px 0 4px}
#wkChart,#warmChart{display:block;width:100%;height:54px;border-radius:8px;background:rgba(0,0,0,.25)}
.wkFoot{display:flex;justify-content:space-between;font-size:11px;font-weight:900;color:var(--dim);margin-top:4px}
.wkEdit{color:#fff;font-weight:900;font-size:14px;text-decoration:none;background:rgba(255,255,255,.12);border-radius:10px;padding:6px 10px}
#wkPick{width:240px}
#summary{max-height:calc(100vh - 32px);overflow-y:auto}
#sumWk{margin-bottom:12px;text-align:left}
#sumWkChart{display:block;width:100%;height:70px;border-radius:8px;background:rgba(0,0,0,.25);margin-bottom:6px}
.sumWkTable{max-height:180px;overflow-y:auto}
#sumWkTable{width:100%;border-collapse:collapse;font-size:12px}
#sumWkTable th{color:var(--dim);font-weight:900;text-align:right;padding:2px 6px}
#sumWkTable td{text-align:right;padding:2px 6px;border-top:1px solid rgba(255,255,255,.08)}
#sumWkTable th:first-child,#sumWkTable td:first-child{text-align:left}
@media (max-width:760px){#wkBox{bottom:8px}.wkMain b{font-size:24px}#wkTgt{font-size:30px}}

/* ---- preloader (main.js lo avanza con loading() y lo quita con loaded()) ---- */
#loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,#bfe8ff,#8fd3ff 60%,#5fb8f0);transition:opacity .6s}
#loader.out{opacity:0;pointer-events:none}
.ld-box{width:min(420px,86vw);text-align:center;background:var(--glass);border:3px solid var(--ink);border-radius:20px;box-shadow:0 6px 0 rgba(0,0,0,.35);padding:22px 24px 18px}
.ld-title{font-size:38px;line-height:1;text-shadow:0 4px 0 var(--ink)}
/* logo keepup.fit (assets/logo): letras blancas y verdes con contorno oscuro, como los títulos; alto en em = sigue al font-size del h1 */
img.logo{display:block;height:1.45em;width:auto;margin:0 auto;filter:drop-shadow(0 3px 0 var(--ink)) drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink))}
.ld-road{position:relative;height:46px;margin:14px 0 6px;border-bottom:4px dashed rgba(255,255,255,.35);overflow:hidden}
.ld-bike{position:absolute;bottom:2px;left:-40px;font-size:34px;transform:scaleX(-1);animation:ld-ride 2.2s linear infinite}
@keyframes ld-ride{0%{left:-40px}100%{left:calc(100% + 10px)}}
.ld-bar{height:14px;border:3px solid var(--ink);border-radius:10px;background:rgba(255,255,255,.18);overflow:hidden}
#ldFill{display:block;height:100%;width:8%;background:linear-gradient(90deg,var(--gold),#ffae00);border-radius:6px;transition:width .5s ease}
#ldMsg{margin-top:10px;font-weight:900;font-size:15px;color:var(--dim);min-height:1.3em}
#loader.err .ld-bike{animation:none;left:calc(50% - 17px)}
#loader.err #ldMsg{color:#fff}
@media (prefers-reduced-motion:reduce){.ld-bike{animation:none;left:calc(50% - 17px)}}

/* ---- color de la bici (portada) ---- */
.paintRow{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.paintRow button{width:30px;height:30px;border-radius:50%;border:3px solid var(--ink);background:var(--c);cursor:pointer;box-shadow:0 3px 0 var(--ink);padding:0}
.paintRow button.orig{width:auto;border-radius:12px;padding:0 10px;font-family:'Lilita One';font-size:13px;color:#fff;background:linear-gradient(#5a5a8c,#3d3d6a)}
.paintRow button.on{outline:3px solid #ffd400;outline-offset:2px}
.paintRow label{position:relative;width:30px;height:30px;border-radius:50%;border:3px solid var(--ink);background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red);cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.paintRow label.on{outline:3px solid #ffd400;outline-offset:2px}
.paintRow input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

/* ---- portada en dos columnas (2026-09-30): más ancha, el nombre es lo principal, sin scroll en pantallas bajas ---- */
.card.portada{max-width:1040px;padding:18px 26px 14px;text-align:left}
.portada .pHead{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.portada h1{font-size:34px}
.portada h1 br{display:none}
.portada .intro{margin:0;font-size:14px;opacity:.85}
.pName{display:flex;flex-direction:column;align-items:center;gap:4px;margin:12px auto 14px;max-width:460px}
.pName span{font-size:16px;color:var(--gold);letter-spacing:.05em}
.pName .nameIn{width:100%;font-size:26px;padding:10px 18px;text-align:center;border-radius:16px;box-shadow:0 5px 0 var(--ink)}
.pCols{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px}
.pCol{display:flex;flex-direction:column;gap:10px;min-width:0}
.portada .pick{flex-direction:column;align-items:stretch;gap:5px;margin:0}
.portada .pick>span{text-align:left;min-width:0;font-size:14px;letter-spacing:.04em}
.portada .pickRow{gap:6px}
.portada .pickRow button{font-size:15px;padding:4px 11px;border-radius:10px;box-shadow:0 3px 0 var(--ink);border-bottom-width:5px}
.portada .pickRow button small{font-size:10px}
.portada .wkRow{display:flex;gap:8px;align-items:center}
.portada #wkPick{flex:1;width:auto;min-width:0;font-size:15px}
.portada .paintRow button,.portada .paintRow label{width:28px;height:28px}
.portada .paintRow button.orig{width:auto;height:28px}
.pFoot{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:10px;padding-top:12px;border-top:2px solid rgba(255,255,255,.12)}
.pConn{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.portada .pConn .btn{font-size:17px;padding:9px 14px}
.portada .liveRead{margin:0}
.portada .liveRead b{font-size:20px}
.portada #btnStart{font-size:26px;padding:10px 30px}
.portada #pickMsg{text-align:center;margin-top:8px;min-height:0}
.portada #pickMsg:empty{display:none}
.portada .keys{text-align:center;margin-top:10px;font-size:12px}
@media (max-width:820px){.pCols{grid-template-columns:1fr}.card.portada{padding:16px 16px 12px}.portada h1{font-size:28px}}
@media (max-height:760px){.portada h1{font-size:28px}.pName{margin:8px auto 10px}.pName .nameIn{font-size:22px;padding:7px 14px}.portada .hotkeys{display:none}}

/* ajustes: viven fuera del HUD para poder abrirse también sobre la portada (2026-10-01) */
body>#settings{position:fixed;z-index:8;max-height:calc(100vh - 140px);overflow-y:auto}
body>#settings.onCover{top:50%;bottom:auto;transform:translate(-50%,-50%);max-height:calc(100vh - 32px)}
#pSettings{font-size:17px;padding:9px 14px;background:linear-gradient(#5a5a8c,#3d3d6a)}

/* dar la vuelta (mundos de ida y vuelta): siempre a la mano mientras ruedas */
#bTurn{position:absolute;right:16px;bottom:16px;width:84px;height:84px;border-radius:50%;border:4px solid var(--ink);background:radial-gradient(circle at 40% 35%,#ffd36b,#ff8a00);color:#fff;font-size:34px;line-height:1;cursor:pointer;box-shadow:0 5px 0 var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-shadow:0 2px 0 var(--ink);pointer-events:auto}
#bTurn small{font-size:9px;letter-spacing:.03em;margin-top:2px}
#bTurn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ink)}
/* logo mientras ruedas: abajo a la derecha (el botón «dar la vuelta» sube para dejarle lugar) */
#hudLogo{position:absolute;right:16px;bottom:14px;height:26px;margin:0;opacity:.9;pointer-events:none}
#bTurn{bottom:50px}
@media (max-width:760px){#hudLogo{height:20px;bottom:10px}#bTurn{bottom:40px}}
@media (max-width:760px){#bTurn{width:64px;height:64px;font-size:26px}}

/* indicador de subida (como el de Zwift) y rampas fuertes */
#climbBox{position:absolute;top:132px;left:50%;transform:translateX(-50%);width:clamp(340px,40vw,560px);padding:6px 12px 8px}
.clHead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;font-weight:900}
.clHead b{font-size:15px;color:var(--gold)}
#climbCv{display:block;width:100%;height:78px;margin:4px 0;border-radius:8px;background:rgba(0,0,0,.3)}
.clFoot{display:flex;justify-content:space-between;gap:8px;font-size:13px;font-weight:900;min-height:18px}
.clFoot b{color:#ff8a8a}
#climbBox.heavy{border-color:#ff3b3b;animation:heavyPulse .8s ease-in-out infinite alternate}
@keyframes heavyPulse{from{box-shadow:0 5px 0 rgba(0,0,0,.35),0 0 0 0 rgba(255,59,59,.0)}to{box-shadow:0 5px 0 rgba(0,0,0,.35),0 0 22px 4px rgba(255,59,59,.75)}}
.grade.heavy{background:#ff3b3b;border-radius:10px;animation:heavyPulse .8s ease-in-out infinite alternate}
.grade.heavy b,.grade.heavy i{color:#fff!important}
body.onClimb #segBar{top:250px}
@media (max-width:760px){#climbBox{top:auto;bottom:232px;width:calc(100vw - 32px)}#climbCv{height:56px}}

/* modo espectador */
#spectBar{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:14px;font-weight:900}
#spectBar>span:first-child{color:var(--gold);font-size:16px}
#spectBar #spectName{font-size:18px}
#pSpect{font-size:17px;padding:9px 14px;background:linear-gradient(#3b9bff,#1f6fd8)}
body.spect #dock,body.spect #demo,body.spect #left,body.spect #wkBox,body.spect #bTurn{display:none!important}
body.spect .tv>div:nth-child(2),body.spect .tv>div:nth-child(3),body.spect .tv>div:nth-child(5),body.spect .tsub{display:none}
body.spect #mAvg,body.spect #mAvg+small{visibility:hidden}

/* ajustes también dentro de la portada (2026-10-01): mismo panel, en su columna; mientras ruedas sale flotante con ⚙️ */
.card.portada{max-width:1380px}
@media (min-width:1181px){.pCols{grid-template-columns:1fr 1fr 0.9fr}}
#settings.inline{position:static;transform:none;width:auto;max-height:none;overflow:visible;background:rgba(0,0,0,.18);border:0;box-shadow:none;border-radius:12px;padding:8px 10px;gap:6px;font-size:13px;z-index:auto}
#settings.inline .ph,#settings.inline>small{display:none}
#settings.inline label{min-height:30px}
@media (max-width:1180px){#pSetCol{grid-column:1/-1}#settings.inline{display:grid;grid-template-columns:1fr 1fr;gap:6px 22px}}
@media (max-width:820px){#settings.inline{grid-template-columns:1fr}}
@media (max-height:760px){#settings.inline{gap:2px;padding:6px 10px;font-size:12px}#settings.inline label{min-height:26px}#settings.inline .ib{min-width:28px;height:28px}.portada .pCol{gap:6px}.pFoot{margin-top:6px;padding-top:8px}}
@media (max-height:740px){.portada h1{font-size:24px}.portada .intro{font-size:12px}.pName{margin:4px auto 8px}.pName span{font-size:13px}.pName .nameIn{font-size:19px;padding:5px 12px}.card.portada{padding-top:12px;padding-bottom:10px}}
@media (max-height:740px){.card.portada{padding-bottom:4px}.pFoot{margin-top:4px;padding-top:6px}}

/* portada en pestañas (2026-10-01): RODAR · CICLISTA · AJUSTES, con resumen de lo elegido en cada pestaña */
.card.portada{max-width:1040px}
.pTabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 10px}
.pTabs button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;border:3px solid var(--ink);border-radius:14px;cursor:pointer;color:#fff;background:linear-gradient(#5a5a8c,#3d3d6a);box-shadow:0 4px 0 var(--ink);min-width:0}
.pTabs button b{font-size:17px;letter-spacing:.03em}
.pTabs button small{font-size:11px;font-weight:900;opacity:.85;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pTabs button.on{background:linear-gradient(#ffb23f,#ff7a00);transform:translateY(2px);box-shadow:0 2px 0 var(--ink)}
.pPanes{min-height:300px}
.pPane{display:none;flex-direction:column;gap:12px}
.pPane.on{display:flex}
.pPane[data-p=ajustes] #settings.inline{display:grid;grid-template-columns:1fr 1fr;gap:6px 26px}
@media (max-width:700px){.pPane[data-p=ajustes] #settings.inline{grid-template-columns:1fr}.pTabs button b{font-size:14px}}
.portada .pFoot{gap:8px;flex-wrap:nowrap}
.portada .liveRead{gap:6px}.portada .liveRead>div{padding:5px 8px}.portada .liveRead small{display:none}
.portada .pConn .btn{padding:9px 12px}
@media (max-width:1000px){.portada .pFoot{flex-wrap:wrap}}

.pTabHint{margin:-2px 0 10px;text-align:center;font-size:13px;font-weight:700;color:var(--dim);min-height:18px}
@media (max-height:740px){.pTabHint{font-size:12px;margin:-4px 0 6px}}
@media (max-height:820px){.pName{margin:6px auto 10px}.pName .nameIn{font-size:22px;padding:7px 14px}.portada h1{font-size:30px}.pTabs button{padding:6px}.portada .pPane{gap:9px}.portada .hotkeys{margin-top:6px}}

/* prueba de FTP guiada */
.wkCoach{font-size:14px;font-weight:900;text-align:center;background:rgba(255,212,0,.15);border:2px solid rgba(255,212,0,.5);border-radius:10px;padding:5px 8px;margin:2px 0 6px;line-height:1.3}
.wkCoach.warn{background:rgba(255,59,59,.22);border-color:#ff3b3b}
#wkStop{width:100%;margin-top:6px;font-size:16px;padding:6px;background:linear-gradient(#ff7a7a,#d83b3b)}
.ftpBox{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow-y:auto;padding:18px 22px;z-index:9;font-size:14px}
.ftpBox h2{margin:0 0 10px;font-size:26px;color:var(--gold);font-weight:400;text-align:center}
.ftpBox ol{padding-left:20px;line-height:1.5}.ftpBox li{margin-bottom:6px}
.ftpTips{font-size:13px;color:var(--dim)}
.ftpBig{text-align:center;margin:4px 0 8px}.ftpBig b{font-size:72px;color:#6ff07a}.ftpBig span{font-size:24px;margin-left:6px}
.ftpInfo{text-align:center;font-size:15px;line-height:1.6}
.ftpBox{background:linear-gradient(#4a3fd1,#2b2380);border:4px solid var(--ink);box-shadow:0 10px 0 var(--ink),0 0 0 100vmax rgba(10,10,30,.45)}

/* colores del ciclista (portada) */
#ropaRow.hide{display:none}
.ropaPick{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.ropaPick button.orig{border-radius:12px;padding:4px 10px;font-family:'Lilita One';font-size:13px;color:#fff;border:3px solid var(--ink);background:linear-gradient(#5a5a8c,#3d3d6a);cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.ropaSlot{display:flex;flex-direction:column;align-items:center;gap:1px;cursor:pointer;font-size:10px;font-weight:900;color:#fff}
.ropaSlot input{width:34px;height:28px;border:3px solid var(--ink);border-radius:9px;padding:0;cursor:pointer;background:none}
.ropaSlot span{max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 🎨 COLOR de la portada: qué pintar (iconos grandes de bici / jersey del color elegido) + una paleta */
#bikeRow.hide{display:none}
.colorTargets{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.colorTargets button{display:flex;flex-direction:column;align-items:center;gap:2px;font-family:'Lilita One';font-size:13px;color:#fff;border:3px solid var(--ink);border-radius:14px;padding:6px 12px 4px;cursor:pointer;background:linear-gradient(#5a5a8c,#3d3d6a);box-shadow:0 3px 0 var(--ink)}
.colorTargets button svg{filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.colorTargets button.on{background:linear-gradient(#6a6aa8,#4a4a80);outline:3px solid #ffd400;outline-offset:2px}

/* pestaña CICLISTA en dos columnas: personaje y bici a la izquierda, color (más grande) a la derecha */
.cicCols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.cicR{background:rgba(255,255,255,.06);border-radius:16px;padding:10px 12px}
.cicR .colorTargets{gap:14px;justify-content:center}
.cicR .colorTargets button{padding:8px 18px 6px;font-size:16px;border-radius:18px}
.cicR .paintRow{justify-content:center}
@media (max-width:820px){.cicCols{grid-template-columns:1fr}}
/* versión, abajo a la derecha (debajo del botón «dar la vuelta») */
#ver{position:fixed;right:6px;bottom:2px;z-index:9999;font:700 10px/1 Nunito,sans-serif;color:#fff;opacity:.55;text-shadow:0 1px 2px #000;pointer-events:none;user-select:none}
/* 🔥 calentamiento */
#warmMode{font-family:'Lilita One';font-size:13px;padding:3px 10px;min-width:0;height:auto}
#warmMode.erg{background:linear-gradient(#6ff07a,#1fb84a)}
#warmBox .wkHead b{color:#ffb23f}
.warmBtns{display:flex;gap:8px;margin-top:6px}.warmBtns .btn{flex:1;font-size:15px;padding:5px 8px}#warmMore{flex:0 0 auto;background:linear-gradient(#5a5a8c,#3d3d6a)}
.sumWarm{font-size:14px;font-weight:900;text-align:center;background:rgba(255,138,0,.15);border:2px solid rgba(255,138,0,.5);border-radius:10px;padding:6px 8px;margin:-4px 0 12px}
@media (max-width:760px){#warmBox{bottom:8px}}
.pickPair{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}.pickPair>.pick:first-child{flex:1 1 220px;min-width:0}.pickPair>.pick:not(:first-child){flex:0 0 auto}
#ghostPick button{padding:3px 9px;font-size:15px}.pickPair .wkRow{width:100%}.pickPair #wkPick{width:0;flex:1 1 0}.pickPair .wkEdit{flex:none;padding:6px 8px}#ghostPick button small{font-size:10px}#ghostPick button[disabled]{opacity:.45;cursor:default}

/* 🔑 llave personal e historial */
.keyBtn{font:700 13px Nunito;border-radius:8px;border:2px solid var(--ink);padding:3px 10px;background:linear-gradient(#ffd84a,#f0a92a);color:var(--ink);cursor:pointer}
/* (z 25: se abren también desde ⚙️ Ajustes, que está en 20) */
#keyBox,#ghostBox,#histBox,#planBox,#coinBox,#iosBox{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(500px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow-y:auto;z-index:25;pointer-events:auto;background:rgba(27,27,51,.97);display:flex;flex-direction:column;gap:10px;font-size:14px}
#keyBox.hide,#ghostBox.hide,#histBox.hide,#planBox.hide,#coinBox.hide,#iosBox.hide{display:none}
#iosBox{z-index:10000} /* encima del preloader: se lee mientras carga */
.keyTxt{margin:0;color:var(--dim);font-size:12.5px;line-height:1.4}
.keyCode{display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,.25);border-radius:12px;padding:10px}
.keyCode b{font-size:clamp(18px,5vw,26px);letter-spacing:2px;color:var(--gold);font-weight:400;user-select:all}
.keyBtns{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.keyBtns .btn{font-size:14px;padding:6px 12px;background:linear-gradient(#5a5a8c,#3d3d6a)}
.keyQrBox{align-self:center;background:#fff;border-radius:10px;padding:6px;width:200px}
.keyQrBox svg{display:block;width:100%;height:auto}
.keyCount{text-align:center;font-size:13px}
.keyUse{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.15);padding-top:10px;font-size:13px}
.keyUse input{flex:1;min-width:170px;font:700 14px Nunito;letter-spacing:1px;text-transform:uppercase;border-radius:8px;border:2px solid var(--ink);padding:4px 8px}
.keyUse .btn{font-size:14px;padding:5px 14px}
.keyPrev{font-size:12px;color:var(--dim)}
.keyWho{display:flex;flex-direction:column;gap:6px;border-top:1px solid rgba(255,255,255,.15);padding-top:10px}
.keyWho .btn{font-size:14px;padding:5px 14px;align-self:flex-start}
.keyList{display:flex;flex-direction:column;gap:4px}
.keyList .kw{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.07);border-radius:10px;padding:5px 8px;font-size:13.5px}
.keyList .kw.on{background:rgba(255,216,74,.18);outline:2px solid var(--gold)}
.keyList .kw b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.keyList .kw small{color:var(--dim);font-weight:700;letter-spacing:1px}
.keyList .kw button{font:800 12px Nunito;border-radius:6px;border:2px solid var(--ink);cursor:pointer;padding:2px 8px}
.keyList .kw .kDel{background:transparent;color:var(--dim);border-color:transparent}
.keyList .kw .kDel.sure{background:#e5484d;color:#fff;border-color:var(--ink)}
.keyPrev button{font:700 12px Nunito;margin-left:6px;border-radius:6px;border:2px solid var(--ink);cursor:pointer}
.keyMsg{font-size:13px;text-align:center;min-height:1em}
.keyMsg.err{color:#ff8a8a}.keyMsg.ok{color:#6ff07a}
.keyAsk{background:rgba(255,216,74,.15);border:2px solid var(--gold);border-radius:12px;padding:10px;font-size:13.5px;text-align:center}
.keyAsk .btn{font-size:14px;padding:5px 14px;margin:8px 4px 0}
.sumSave{font-size:13px;margin:10px 0 0}
.sumSave button{font:700 12px Nunito;margin-left:6px;border-radius:6px;border:2px solid var(--ink);cursor:pointer;background:var(--gold)}
/* 👻 fantasmas */
.ghostList{display:flex;flex-direction:column;gap:6px;max-height:min(50vh,380px);overflow-y:auto}
.ghostList label{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border-radius:10px;padding:7px 10px;cursor:pointer;font-size:13px}
.ghostList label.on{background:rgba(255,216,74,.2);outline:2px solid var(--gold)}
.ghostList label.off{opacity:.45;cursor:default}
.ghostList input{width:18px;height:18px;accent-color:#ffd400}
.ghostList .gInfo{flex:1;display:flex;flex-direction:column;gap:1px}
.ghostList .gInfo small{color:var(--dim)}
.ghostList .gDel{font-size:13px;border-radius:8px;border:2px solid var(--ink);cursor:pointer;background:#5a5a8c;color:#fff;padding:2px 7px}
.ghostList .gDel.sure{background:#e5484d}
.ghostEmpty{text-align:center;color:var(--dim);font-size:13px;padding:14px}
.sumGhost{margin:0 0 12px;font-size:14px;display:flex;flex-direction:column;gap:3px}
.sumGhost .w{color:#6ff07a}.sumGhost .l{color:#ff8a8a}
.sumGhost small{display:block;font-size:12px;opacity:.85;margin:1px 0 0 22px}

/* ---- portada en una sola pantalla (2026-10-04): ficha «TÚ» arriba (nombre, peso/FTP, llave, ciclista), luego mundo,
   salida y MODO (libre / entrenar / contra mí) + calentar; personaje y ajustes en ventanas ---- */
.card.portada{max-width:1060px}
.pMe{background:rgba(0,0,0,.2);border-radius:18px;padding:10px 14px;margin:10px 0 12px;display:flex;flex-direction:column;gap:8px}
.meRow1{display:flex;align-items:flex-end;gap:14px;justify-content:center;flex-wrap:wrap}
.pMe .pName{margin:0;flex:0 1 420px;min-width:220px}
.pMe .pName .nameIn{font-size:24px;padding:7px 16px}
.meNum{display:flex;flex-direction:column;align-items:center;gap:4px}
.meNum>span:first-child{font-size:14px;color:var(--gold);letter-spacing:.05em}
.meNum input{width:78px;font:900 20px Nunito;text-align:center;border-radius:12px;border:3px solid var(--ink);padding:6px 4px;box-shadow:0 4px 0 var(--ink)}
.meNum>span:last-child{font-weight:900;font-size:15px}
.meRow2{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.meKey,.meCic{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.meChip{font:900 14px Nunito;color:var(--ink);background:linear-gradient(#ffe066,#ffb92e);border:3px solid var(--ink);border-radius:12px;padding:5px 12px;cursor:pointer;box-shadow:0 3px 0 var(--ink);display:flex;align-items:center;gap:6px}
.meChip b{letter-spacing:1px}
.meChip span:not(.ic){font-weight:800;opacity:.85}
.meMini{font:900 13px Nunito;color:#fff;background:linear-gradient(#5a5a8c,#3d3d6a);border:3px solid var(--ink);border-radius:10px;padding:4px 10px;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.meCic>span{font-weight:900;font-size:14px}
.pMain{display:flex;flex-direction:column;gap:10px}
.modeRow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#modePick button.on{background:linear-gradient(#ffb23f,#ff7a00)}
#modeOpts{flex:1;min-width:260px}
#modeOpts .mo{display:none}#modeOpts .mo.on{display:block}
.moTxt{font-size:13px;opacity:.8;font-weight:700}
#modeOpts .wkRow{width:100%}#modeOpts #wkPick{width:0;flex:1 1 0}
#cicBox{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow-y:auto;z-index:20;pointer-events:auto;background:rgba(27,27,51,.97);display:flex;flex-direction:column;gap:10px}
#cicBox.hide{display:none}
#cicBox .pick{flex-direction:column;align-items:stretch;gap:5px;margin:0 0 10px}
#cicBox .pick>span{text-align:left;min-width:0;font-size:14px;color:var(--gold)}
#cicBox .pickRow button{font-size:15px;padding:4px 11px;border-radius:10px;box-shadow:0 3px 0 var(--ink);border-bottom-width:5px}
.portada .pFoot #pSet{font-size:22px;padding:6px 12px;background:linear-gradient(#5a5a8c,#3d3d6a);color:#fff}
.portada .pFoot .btn{white-space:nowrap}.portada .pConn{display:flex;gap:8px;flex-wrap:nowrap}
body>#settings.onCover:not(.hide){width:min(640px,calc(100vw - 32px));background:rgba(27,27,51,.97);display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;z-index:20}
body>#settings.onCover>.ph,body>#settings.onCover>small{grid-column:1/-1}
@media (max-width:640px){body>#settings.onCover:not(.hide){grid-template-columns:1fr}}
@media (max-width:820px){.cicCols{grid-template-columns:1fr}.meRow2{justify-content:center}}
@media (max-height:800px){.pMe{margin:6px 0 8px;padding:8px 12px;gap:6px}.pMe .pName .nameIn{font-size:21px;padding:5px 14px}.meNum input{font-size:18px;padding:4px}.pMain{gap:7px}}

/* ---- portada en dos columnas (2026-10-04, elegida por el usuario): TÚ (nombre, peso/FTP, llave, caras, bici y las
   dos paletas siempre a la vista) · RODAR (mundo, salida, modo, calentar) ---- */
.card.portada{max-width:1180px}
.pCols2{display:grid;grid-template-columns:minmax(0,510px) minmax(0,1fr);gap:16px;margin-top:10px;align-items:start}
.pYou,.pRide{background:rgba(0,0,0,.2);border-radius:18px;padding:10px 14px;display:flex;flex-direction:column;gap:9px;min-width:0}
.pYou .meRow1{justify-content:flex-start;gap:10px;flex-wrap:nowrap}
.pYou .pName{margin:0;flex:1 1 auto;min-width:0;max-width:none}
.pYou .pName .nameIn{font-size:21px;padding:6px 12px}
.pYou .meNum input{width:64px;font-size:18px;padding:5px 3px}
.pYou .meKey{justify-content:flex-start}
.faces{gap:6px}
.portada .faces button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 4px 3px;width:66px;font-size:12px;border-bottom-width:5px}
.faces button img,.faces button b{width:52px;height:52px;border-radius:50%;object-fit:cover;border:3px solid var(--ink);background:#fff;display:block}
.faces button b{display:grid;place-items:center;background:var(--c);color:#fff;font-size:24px;text-shadow:0 2px 0 var(--ink)}
.faces button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.faces button.on img,.faces button.on b{border-color:#fff;box-shadow:0 0 0 3px #ffd400}
.palRow{display:flex;align-items:center;gap:8px}
.palRow{gap:10px}.palRow>i{flex:none;width:48px;height:48px;display:grid;place-items:center;border:3px solid var(--ink);border-radius:12px;background:linear-gradient(#5a5a8c,#3d3d6a);box-shadow:0 3px 0 var(--ink)}
.palRow>i svg{width:38px;height:38px;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
.pRide #modeOpts{margin-top:6px;min-width:0}
.pRide #modeOpts .wkRow{width:100%}.pRide #wkPick{width:0;flex:1 1 0}
@media (max-width:900px){.pCols2{grid-template-columns:1fr}}
@media (max-height:800px){.pYou,.pRide{gap:6px;padding:8px 12px}.faces button img,.faces button b{width:46px;height:46px}.portada .faces button{width:60px}}
.pYou .meNum>span:last-child{white-space:nowrap}
.pYou .paintRow{gap:4px;flex-wrap:nowrap}
.portada .pYou .paintRow button,.portada .pYou .paintRow label{width:25px;height:25px;flex:none;border-width:2px;box-shadow:0 2px 0 var(--ink)}
.portada .pYou .paintRow button.orig{width:auto;height:25px;padding:0 7px;font-size:11px}

/* 📚 historial y progreso */
#histBox{width:min(720px,calc(100vw - 32px))}
.hCards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hCard{background:rgba(255,255,255,.08);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hCard b{font-family:'Lilita One';font-size:22px;color:var(--gold)}.hCard small{font-size:11px;letter-spacing:.5px;color:var(--dim)}.hCard i{font-style:normal;font-size:12px}
.hSec{font-family:'Lilita One';font-size:14px;color:var(--gold);display:flex;align-items:center;gap:8px;margin-top:4px}
.hSec small{font-family:Nunito,sans-serif;color:var(--dim);font-size:12px}
.hSec select{margin-left:auto;font:inherit;font-family:Nunito,sans-serif;font-size:13px;border-radius:8px;padding:2px 6px}
.hBars{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;height:120px;align-items:end}
.hBars>div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px;cursor:default}
.hBars span{font-size:10px;color:var(--dim)}.hBars small{font-size:10px;color:var(--dim)}
.hBars i{width:100%;min-height:2px;border-radius:5px 5px 0 0;background:linear-gradient(#7aa8ff,#4a6cd0)}.hBars i.now{background:linear-gradient(#ffe066,#ff9f1a)}
.hBest{width:100%;border-collapse:collapse;font-size:13px;text-align:center}
.hBest th{font-size:12px;color:var(--dim);font-weight:700}.hBest td{padding:4px;background:rgba(255,255,255,.05)}.hBest td:first-child{text-align:left;color:var(--dim)}
.hBest td small{display:block;font-size:11px;color:var(--dim)}.hBest small.up{display:inline;color:#6ff07a}.hBest small.dn{display:inline;color:#ff8a8a}
.hList{max-height:min(36vh,300px)}.hList label{cursor:default}
@media (max-width:600px){.hCards{grid-template-columns:repeat(2,1fr)}}

/* 📅 planes */
#planBox{width:min(780px,calc(100vw - 32px))}
.planLine{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;flex-wrap:wrap}
.plNow{background:rgba(255,216,74,.1);border:2px solid rgba(255,216,74,.4);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.plGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:6px}
.plWeek{display:flex;flex-direction:column;gap:3px;background:rgba(255,255,255,.05);border-radius:10px;padding:6px}
.plWeek>small{color:var(--dim);font-weight:800}
.plWeek button{text-align:left;font:inherit;font-size:12px;color:#fff;background:rgba(255,255,255,.08);border:0;border-radius:7px;padding:4px 6px;cursor:pointer;display:flex;gap:4px;align-items:baseline}
.plWeek button i{margin-left:auto;font-style:normal;color:var(--dim);font-size:11px}
.plWeek button.done{opacity:.6}.plWeek button.next{outline:2px solid var(--gold);background:rgba(255,216,74,.18)}
.plWeek button:hover{background:rgba(255,255,255,.18)}
.plCard{display:flex;gap:10px;align-items:center;background:rgba(255,255,255,.07);border-radius:12px;padding:8px 10px}
.plCard>div{flex:1}.plCard small{color:var(--dim)}.plCard p{margin:3px 0 0;font-size:13px}

/* ⚡ TURBO (js/turbo.js): líneas de velocidad y el número de potencia brillando */
#turbo{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
body.turbo #mPower{color:#ffe14d;text-shadow:0 0 12px #ff9f1a,0 0 24px #ff5a00,0 3px 0 var(--ink);animation:turboPulse .5s ease-in-out infinite alternate}
@keyframes turboPulse{to{transform:scale(1.06)}}

/* 💡 FTP sugerido en el resumen */
.sumFtp{margin:0 0 12px;padding:8px 10px;border-radius:10px;background:rgba(111,240,122,.12);border:2px solid rgba(111,240,122,.45);font-size:14px;line-height:1.5}
.sumFtp .btn{font-size:13px;padding:3px 10px;margin-left:6px}

/* entrenamiento: medidores de potencia y cadencia, color del panel según cómo vas y aviso de cambio de bloque */
#wkBox{transition:bottom .35s ease,border-color .3s,box-shadow .3s}
#wkBox.st-ok{border-color:#3ddc6a;box-shadow:0 0 18px rgba(61,220,106,.45)}
#wkBox.st-lo{border-color:#4aa8ff;box-shadow:0 0 18px rgba(74,168,255,.5)}
#wkBox.st-hi{border-color:#ff8a3d;box-shadow:0 0 18px rgba(255,138,61,.5)}
#wkYou{font-size:38px}#wkYou.ok{color:#6ff07a}#wkYou.lo{color:#7fc4ff}#wkYou.hi{color:#ffad6b}
.wkMeters{display:flex;flex-direction:column;gap:5px;margin:4px 0 6px}
.wkM{display:grid;grid-template-columns:34px 1fr 142px;align-items:center;gap:8px}
.wkM>span{font-size:12px;color:var(--dim);text-align:right}
.wkBar{position:relative;height:16px;border-radius:9px;background:linear-gradient(90deg,rgba(74,168,255,.45),rgba(255,255,255,.08) 40%,rgba(255,255,255,.08) 60%,rgba(255,138,61,.45));border:2px solid rgba(0,0,0,.4)}
.wkBar .band{position:absolute;top:-2px;bottom:-2px;left:42%;width:16%;background:rgba(61,220,106,.55);border:2px solid #3ddc6a;border-radius:6px}
.wkBar .mark{position:absolute;top:-5px;bottom:-5px;width:8px;margin-left:-4px;left:50%;background:#fff;border:2px solid var(--ink);border-radius:4px;transition:left .25s ease-out}
.wkBar.off .band,.wkBar.off .mark{display:none}
.wkCue{font:900 13.5px Nunito;text-align:center;border-radius:8px;padding:2px 4px;white-space:nowrap}
.wkCue.ok{background:#1fb84a;color:#fff}.wkCue.lo{background:#2f8cf0;color:#fff}.wkCue.hi{background:#f07a2f;color:#fff}.wkCue.free{color:var(--dim);font-size:13px}
.wkCue.lo,.wkCue.hi{animation:wkCue 1s ease-in-out infinite}
@keyframes wkCue{50%{transform:scale(1.08)}}
.wkBanner{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);min-width:300px;text-align:center;border-radius:16px;border:3px solid var(--ink);padding:6px 18px 8px;color:#fff;box-shadow:0 4px 0 var(--ink),0 0 30px rgba(0,0,0,.4);pointer-events:none}
.wkBanner.hide{display:none}
.wkBanner small{display:block;font:900 13px Nunito;letter-spacing:.06em;opacity:.95}
.wkBanner b{display:block;font:400 30px 'Lilita One';line-height:1.1;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.wkBanner em{font-style:normal;font:400 44px 'Lilita One';margin-right:10px;vertical-align:middle;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.wkBanner.now{animation:wkNow .6s ease-out}
@keyframes wkNow{0%{transform:translateX(-50%) scale(.6)}60%{transform:translateX(-50%) scale(1.12)}100%{transform:translateX(-50%) scale(1)}}
#wkBox.flash{animation:wkFlash .9s ease-out}
@keyframes wkFlash{0%,40%{box-shadow:0 0 0 6px var(--fc),0 0 40px var(--fc)}}
@media (max-width:760px){#wkYou{font-size:30px}.wkM{grid-template-columns:30px 1fr 104px}.wkCue{font-size:12px}}

/* 🔑 llave: explicación en 3 pasos y respaldo (WhatsApp / correo / compartir) */
.keyHow{display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,.06);border-radius:10px;padding:8px 10px}
.keyHow p{margin:0;font-size:13px;line-height:1.4}
.keySave .btn{background:linear-gradient(#5fd068,#2e9e3d)}
/* 🪙 monedas: botón en la ficha y ventana de la tienda (js/tienda.js) */
.meCoins{background:linear-gradient(#ffe066,#e8a21e);color:var(--ink)}
.meCoins.warn{outline:3px solid #ff8a8a;outline-offset:1px}
#coinBox{width:min(560px,calc(100vw - 32px))}
#coinBox h4{margin:6px 0 0;font-size:15px;font-weight:400;letter-spacing:.5px}
.cjSaldo{display:flex;align-items:center;justify-content:center;gap:10px}
.cjSaldo .coin{position:static;display:inline-block;width:34px;height:34px}
.cjSaldo b{font-size:40px;color:var(--gold)}
.cjSaldo small{color:var(--dim);font-weight:800}
.cjWarn{background:rgba(255,138,138,.15);border:2px solid #ff8a8a;border-radius:10px;padding:8px 10px;font-size:13px;line-height:1.4}
.cjWarn .btn{font-size:13px;padding:4px 10px;margin-top:6px;display:block}
.cjList{display:flex;flex-direction:column;gap:8px}
.cjP,.cjC{background:rgba(255,255,255,.07);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:4px}
.cjP.off{opacity:.7}
.cjP p{margin:0;font-size:13px;color:var(--dim);line-height:1.35}
.cjTop,.cjBot{display:flex;align-items:center;gap:8px;justify-content:space-between}
.cjTop b{font-size:15px}
.cjCost{font-weight:900;color:var(--gold);white-space:nowrap}
.cjPat,.cjBot small,.cjC small{color:var(--dim);font-size:12px;font-weight:700}
.cjBot .btn{font-size:13px;padding:4px 12px}
.cjEst{font-size:12px;font-weight:800;color:var(--dim)}
.cjConf{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border-top:1px solid rgba(255,255,255,.15);padding-top:6px}
.cjConf small{flex-basis:100%;color:var(--dim);font-size:12px}
.cjConf input{flex:1;min-width:200px;font:700 14px Nunito;border-radius:8px;border:2px solid var(--ink);padding:4px 8px}
.cjConf .btn{font-size:13px;padding:4px 12px}
.cjC.listo{outline:2px solid #6ff07a}
.cjCode{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cjCode code{font:900 16px ui-monospace,Menlo,monospace;letter-spacing:1px;background:#fff;color:#1b1b33;border-radius:6px;padding:3px 8px;user-select:all}
.cjCode .btn{font-size:12px;padding:3px 10px}
.cjMovs{display:flex;flex-direction:column;gap:2px;font-size:13px}
.cjM{display:flex;gap:8px;align-items:baseline}
.cjM span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cjM small{color:var(--dim)}
.cjM b{color:#6ff07a;min-width:54px;text-align:right}.cjM b.neg{color:#ff8a8a}
.sumCoins{font-size:13.5px;margin:6px 0 0}
.sumCoins button{font:700 12px Nunito;margin-left:6px;border-radius:6px;border:2px solid var(--ink);cursor:pointer;background:var(--gold)}