:root { --bg:#0b1220; --panel:#131c30; --panel2:#1b2742; --ink:#e8edf7; --mut:#8fa0c0; --acc:#22c55e; --warn:#f59e0b; --bad:#ef4444; --blue:#3b82f6; --gold:#fbbf24; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--ink); font-family:"Segoe UI",Roboto,system-ui,sans-serif; overflow:hidden; overscroll-behavior:none; user-select:none; -webkit-user-select:none; }
button { font:inherit; color:inherit; border:none; cursor:pointer; }
#app { height:100%; display:flex; flex-direction:column; max-width:560px; margin:0 auto; position:relative; }
#top { display:flex; justify-content:space-between; align-items:center; padding:max(10px,env(safe-area-inset-top)) 14px 8px; background:linear-gradient(#0d1730,var(--bg)); }
.team { display:flex; align-items:center; gap:8px; } #tdot { width:14px; height:14px; border-radius:4px; display:inline-block; } .res { display:flex; gap:8px; align-items:center; }
.chip { background:var(--panel2); border-radius:999px; padding:6px 12px; font-size:.95rem; }
#view { flex:1; overflow-y:auto; padding:6px 14px 14px; -webkit-overflow-scrolling:touch; }
#nav { display:flex; background:#0a1020; border-top:1px solid #22304f; padding-bottom:env(safe-area-inset-bottom); }
#nav button { flex:1; background:none; padding:8px 0 6px; font-size:.72rem; color:var(--mut); display:flex; flex-direction:column; align-items:center; gap:2px; } #nav i { font-style:normal; font-size:1.3rem; } #nav button.sel { color:var(--acc); }
.card { background:var(--panel); border-radius:16px; padding:14px; margin:10px 0; } h2 { margin:.2em 0 .5em; font-size:1.15rem; } h3 { margin:.4em 0; font-size:1rem; } small,.mut { color:var(--mut); }
.btn { background:var(--acc); color:#04210f; font-weight:800; border-radius:12px; padding:12px 16px; width:100%; font-size:1rem; box-shadow:0 3px 0 #15803d; } .btn:active { transform:translateY(2px); box-shadow:0 1px 0 #15803d; } .btn.sec { background:var(--panel2); color:var(--ink); box-shadow:0 3px 0 #0b1226; } .btn.warn { background:var(--warn); box-shadow:0 3px 0 #b45309; color:#2b1500; } .btn:disabled { opacity:.4; box-shadow:none; }
.row { display:flex; gap:10px; align-items:center; } .row > * { flex:1; } .between { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.bar { height:8px; border-radius:6px; background:#243355; overflow:hidden; } .bar > i { display:block; height:100%; background:var(--acc); } .bar.bl > i { background:var(--blue); } .bar.wr > i { background:var(--warn); } .bar.bd > i { background:var(--bad); }
.hidden { display:none !important; }
.pieza { display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center; padding:10px 0; border-top:1px solid #22304f; } .pieza:first-child { border:none; } .pieza .ic { font-size:1.6rem; text-align:center; }
.lv { display:inline-block; background:var(--panel2); border-radius:8px; padding:2px 8px; font-size:.8rem; margin-left:6px; } .up { background:var(--acc); color:#04210f; border-radius:10px; padding:8px 12px; font-weight:800; font-size:.85rem; } .up.no { background:#2a3a5f; color:var(--mut); }
.stat { display:grid; grid-template-columns:110px 1fr 36px; gap:8px; align-items:center; margin:6px 0; font-size:.9rem; }
.gp svg { width:100%; height:auto; background:#0e1a33; border-radius:12px; }
.neum { display:inline-flex; width:30px; height:30px; border-radius:50%; align-items:center; justify-content:center; font-weight:900; color:#111; border:3px solid #111; font-size:.8rem; } .neum.big { width:46px; height:46px; font-size:1rem; }
.tyrebtn { background:var(--panel2); border-radius:12px; padding:8px 4px; text-align:center; flex:1; font-size:.75rem; border:2px solid transparent; } .tyrebtn.sel { border-color:var(--acc); }
#race { position:fixed; inset:0; background:var(--bg); display:flex; flex-direction:column; z-index:5; max-width:560px; margin:0 auto; padding-top:env(safe-area-inset-top); }
#race canvas { width:100%; flex:0 0 40%; min-height:0; background:#12361f; }
#hud { display:flex; justify-content:space-between; padding:6px 12px; font-size:.85rem; background:#0a1020; align-items:center; gap:8px; }
#board { flex:1; overflow-y:auto; padding:4px 10px; font-size:.82rem; } .lin { display:grid; grid-template-columns:22px 12px 1fr auto 28px; gap:6px; align-items:center; padding:3px 4px; border-radius:6px; } .lin.yo { background:#14532d; } .lin.dnf { opacity:.4; }
#ctrl { padding:8px 10px calc(8px + env(safe-area-inset-bottom)); background:#0a1020; border-top:1px solid #22304f; } #ctrl .row { margin-bottom:6px; } #ctrl button { padding:10px 4px; font-size:.82rem; }
#news { position:absolute; left:8px; right:8px; top:8px; pointer-events:none; } #news div { background:#000a; border-radius:10px; padding:6px 10px; margin-bottom:4px; font-size:.82rem; animation:in .3s; }
@keyframes in { from { opacity:0; transform:translateY(-8px); } }
#modal { position:fixed; inset:0; background:#000b; z-index:9; display:flex; align-items:center; justify-content:center; padding:14px; } #modal .card { width:100%; max-width:520px; max-height:90vh; overflow-y:auto; margin:0; } #toast { position:fixed; left:50%; bottom:90px; transform:translateX(-50%); background:#000d; padding:10px 16px; border-radius:12px; z-index:20; max-width:90%; text-align:center; }
.tabla { width:100%; border-collapse:collapse; font-size:.88rem; } .tabla td,.tabla th { padding:5px 4px; text-align:left; border-bottom:1px solid #22304f; } .tabla tr.yo td { background:#14532d55; } .dot { width:12px; height:12px; border-radius:3px; display:inline-block; margin-right:6px; }
input[type=range] { width:100%; accent-color:var(--acc); } input[type=text] { width:100%; background:var(--panel2); border:none; color:var(--ink); border-radius:10px; padding:10px; font:inherit; }
.chest { text-align:center; font-size:3.2rem; margin:4px 0; }