: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}
#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}}