/* ===== Interfaz FUT 4 (acceso, menú, carga) — réplica del diseño "Design By Edu" =====
   Todo se coloca en píxeles del diseño (1672x940 escritorio / 941x1672 móvil) escalados con --s. */
@font-face{font-family:Ubuntu;font-weight:400;font-display:swap;src:url(../fonts/ubuntu-400.woff2) format('woff2')}
@font-face{font-family:Ubuntu;font-weight:500;font-display:swap;src:url(../fonts/ubuntu-500.woff2) format('woff2')}
@font-face{font-family:Ubuntu;font-weight:700;font-display:swap;src:url(../fonts/ubuntu-700.woff2) format('woff2')}

.uiv{position:fixed;inset:0;display:none;overflow:hidden;background:#03070a;font-family:Ubuntu,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;-webkit-tap-highlight-color:transparent}
.uiv.active{display:flex}
.uiv::before{content:"";position:fixed;inset:-60px;background:var(--bgm) center/cover no-repeat;filter:blur(26px) brightness(.42);pointer-events:none}
.stg{position:relative;margin:auto;flex:none;container-type:size;z-index:1}
.stg-bg{position:absolute;display:block;background:var(--bgi) 0 0/100% 100% no-repeat;pointer-events:none;z-index:0}
html[data-lay=d] .stg{--s:calc(100cqw / 1672);width:min(100vw,calc(100vh * 1672 / 940));width:min(100vw,calc(100dvh * 1672 / 940));aspect-ratio:1672/940}
html[data-lay=m] .stg{--s:calc(100cqw / 941);width:min(100vw,calc(100vh * 941 / 1672));width:min(100vw,calc(100dvh * 941 / 1672));aspect-ratio:941/1672}
html[data-lay=d] .stg-bg{left:calc(-380 / 1672 * 100%);top:calc(-200 / 940 * 100%);width:calc(2432 / 1672 * 100%);height:calc(1340 / 940 * 100%)}
html[data-lay=m] .stg-bg{left:calc(-120 / 941 * 100%);top:calc(-420 / 1672 * 100%);width:calc(1181 / 941 * 100%);height:calc(2512 / 1672 * 100%)}
html.lay-short .uiv{overflow:hidden auto}
html.lay-short .stg{width:min(100vw,480px);margin:0 auto;align-self:flex-start;overflow:hidden}
html[data-lay=d] #v-splash,html[data-lay=d] #v-auth{--bgi:url(../img/ui-auth-d.jpg);--bgm:url(../img/ui-auth-d.jpg)}
html[data-lay=m] #v-splash,html[data-lay=m] #v-auth{--bgi:url(../img/ui-auth-m.jpg);--bgm:url(../img/ui-auth-m.jpg)}
html[data-lay=d] #v-menu{--bgi:url(../img/ui-menu-d.jpg);--bgm:url(../img/ui-menu-d.jpg)}
html[data-lay=m] #v-menu{--bgi:url(../img/ui-menu-m.jpg);--bgm:url(../img/ui-menu-m.jpg)}

/* tamaños por diseño */
html[data-lay=d] .stg{--fLbl:17;--fTab:20;--fIn:19;--fBtn:23;--fLink:17.5;--fGuest:19.5;--fLang:18;--fEdu:16;--fPill:16.5;--fRow:25;--fRow1:27;--fSub:16.5;--fSub1:17.5;--fNum:44;--iTab:25;--iIn:26;--iBall:32;--iRow:41;--iPill:30;--iChev:26;--rIn:11;--rBtn:14;--rRow:12;--padIn:14}
html[data-lay=m] .stg{--fLbl:26.5;--fTab:28;--fIn:28;--fBtn:35;--fLink:27;--fGuest:27.5;--fLang:27;--fEdu:24;--fPill:19.5;--fRow:32;--fRow1:33;--fSub:19.5;--fSub1:20;--fNum:56;--iTab:40;--iIn:40;--iBall:46;--iRow:54;--iPill:36;--iChev:32;--rIn:18;--rBtn:22;--rRow:16;--padIn:24}

.uiv .ab{position:absolute;z-index:1;box-sizing:border-box;left:calc(var(--x) * var(--s));top:calc(var(--y) * var(--s));width:calc(var(--w) * var(--s));height:calc(var(--h) * var(--s))}
.uiv .fi{width:1em;height:1em;fill:currentColor;flex:none;overflow:visible}
:where(.uiv) button{font-family:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;touch-action:manipulation}

/* ---------- carga ---------- */
.sp-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(18 * var(--s));text-align:center}
.sp-bar{width:100%;height:calc(16 * var(--s));border-radius:99px;background:rgba(255,255,255,.07);border:calc(1.5 * var(--s)) solid rgba(160,180,200,.35);overflow:hidden}
.sp-bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#0fae3c,#2cf06a);box-shadow:0 0 calc(14 * var(--s)) rgba(46,240,106,.7);transition:width .3s}
#splash-msg{font-size:calc(var(--fLbl) * var(--s));color:#c8d3dc}

/* ---------- acceso ---------- */
.a-tabs{display:flex;border:calc(1.5 * var(--s)) solid rgba(160,178,196,.42);border-radius:calc(var(--rBtn) * var(--s));background:rgba(9,17,24,.55)}
.a-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:calc(14 * var(--s));font-size:calc(var(--fTab) * var(--s));font-weight:500;color:#a6b3bf;-webkit-text-stroke:calc(.4 * var(--s)) currentColor;border-radius:calc(var(--rBtn) * var(--s));position:relative;transition:color .2s}
.a-tab .fi{font-size:calc(var(--iTab) * var(--s))}
.a-tab.active{color:#fff;background:linear-gradient(180deg,#1ee06a 0%,#0fbf52 45%,#089338 100%);border:calc(1.5 * var(--s)) solid #46f38a;margin:calc(-1.5 * var(--s));box-shadow:0 0 calc(18 * var(--s)) rgba(30,230,110,.55),inset 0 calc(2 * var(--s)) 0 rgba(255,255,255,.25);overflow:hidden}
.a-tab.active::before,.a-submit::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(120deg,rgba(255,255,255,.16) 0 calc(5 * var(--s)),transparent calc(5 * var(--s)) calc(13 * var(--s)));-webkit-mask:linear-gradient(90deg,#000 0,transparent 22%);mask:linear-gradient(90deg,#000 0,transparent 22%);pointer-events:none}
.a-field{display:flex;flex-direction:column;justify-content:space-between}
.a-lbl{display:flex;align-items:baseline;justify-content:space-between;font-size:calc(var(--fLbl) * var(--s));line-height:1.1;color:#f3f6f8;font-weight:400}
.a-lbl .hint{font-size:.8em;color:#ffb3b3}
.a-lbl .hint.ok{color:#7ef0a8}
.a-in{display:flex;align-items:center;gap:calc(var(--padIn) * var(--s));height:calc(var(--h) * var(--s) * .67);padding:0 calc(var(--padIn) * var(--s));border:calc(1.5 * var(--s)) solid rgba(150,166,182,.34);border-radius:calc(var(--rIn) * var(--s));background:rgba(14,26,36,.72);color:#8e9aa6;transition:border-color .2s,box-shadow .2s}
.a-in:focus-within{border-color:#38e07f;box-shadow:0 0 0 calc(2 * var(--s)) rgba(56,224,127,.25)}
.a-in .fi{font-size:calc(var(--iIn) * var(--s))}
.a-in input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:#fff;font-family:inherit;font-size:calc(var(--fIn) * var(--s)) !important;padding:0}
.a-in input::placeholder{color:#7f8b96;opacity:1}
.a-in input[type=password]::placeholder{letter-spacing:.12em;font-size:1.15em}
.a-in input:-webkit-autofill{-webkit-text-fill-color:#fff;transition:background-color 9999s}
.a-eye{display:flex;color:#8e9aa6;font-size:calc(var(--iIn) * var(--s))}
.reg-only{display:none}
.reg .reg-only{display:flex}
.reg .a-forgot,.reg .a-sep{display:none}
.a-submit{display:flex;align-items:center;justify-content:center;gap:calc(26 * var(--s));font-size:calc(var(--fBtn) * var(--s));font-weight:500;color:#fff;border-radius:calc(var(--rBtn) * var(--s));background:linear-gradient(90deg,#5fd43a 0%,#2cc94a 22%,#0fb94a 55%,#0a9a3c 100%);border:calc(1.5 * var(--s)) solid #4cf59a !important;box-shadow:0 0 calc(16 * var(--s)) rgba(40,230,110,.45),inset 0 calc(2 * var(--s)) 0 rgba(255,255,255,.22),inset 0 calc(-3 * var(--s)) calc(8 * var(--s)) rgba(0,60,20,.35);text-shadow:0 1px 2px rgba(0,0,0,.35);overflow:hidden}
.a-submit .ball{font-size:calc(var(--iBall) * var(--s))}
.a-submit .arr{position:absolute;right:calc(18 * var(--s));font-size:calc(var(--iIn) * 1.25 * var(--s))}
.a-submit:disabled{filter:saturate(.5) brightness(.85)}
.a-submit:active,.a-guest:active,.row:active,.pill:active{transform:translateY(1px) scale(.995)}
.a-forgot{text-align:left;font-size:calc(var(--fLink) * var(--s));color:#47e6a2;text-decoration:underline;text-underline-offset:calc(3 * var(--s));white-space:nowrap}
.a-sep{display:flex;align-items:center;gap:calc(18 * var(--s));font-size:calc(var(--iTab) * var(--s))}
.a-sep::before,.a-sep::after{content:"";flex:1;height:max(1px,calc(1.6 * var(--s)));background:linear-gradient(90deg,rgba(180,192,204,.55),rgba(180,192,204,.85))}
.a-sep::after{background:linear-gradient(90deg,rgba(180,192,204,.85),rgba(180,192,204,.55))}
.a-guest{display:flex;align-items:center;justify-content:center;gap:calc(18 * var(--s));font-size:calc(var(--fGuest) * var(--s));font-weight:500;-webkit-text-stroke:calc(.4 * var(--s)) currentColor;color:#fff;border:calc(1.5 * var(--s)) solid rgba(150,166,182,.34);border-radius:calc(var(--rIn) * var(--s));background:rgba(14,28,40,.7)}
.a-guest .fi{font-size:calc(var(--iTab) * var(--s))}
.a-lang{display:flex;align-items:center;justify-content:center;gap:calc(12 * var(--s));font-size:calc(var(--fLang) * var(--s));color:#b3bfca}
.a-lang .fi{font-size:calc(var(--iTab) * 1.05 * var(--s))}
.a-msg{display:flex;align-items:center;justify-content:center;text-align:center;padding:0 calc(16 * var(--s));font-size:calc(var(--fLink) * var(--s));border-radius:calc(var(--rIn) * var(--s));background:rgba(70,10,14,.88);border:calc(1.5 * var(--s)) solid rgba(255,90,90,.6);color:#ffd9d9;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.a-msg.ok{background:rgba(8,60,30,.9);border-color:rgba(70,240,140,.6);color:#d8ffe8}
.a-msg.info{background:rgba(10,30,50,.9);border-color:rgba(110,170,240,.5);color:#dbeaff}
.a-msg:empty{display:none}
.uiv .a-msg{margin:0;min-height:0}
.uiv .edu{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;font-size:calc(var(--fEdu) * var(--s));font-weight:500;color:#fff;text-decoration:none;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.8);z-index:3}
.uiv .edu::after{content:"";display:block;width:100%;height:calc(3 * var(--s));margin-top:calc(9 * var(--s));border-radius:2px;background:linear-gradient(90deg,#14c94a,#3ff07a,#14c94a);box-shadow:0 0 calc(6 * var(--s)) rgba(40,240,110,.6)}
.uiv .edu:hover{color:#bfffd6}

/* ---------- menú: botones laterales / pestañas ---------- */
.pill{display:flex;align-items:center;white-space:nowrap;gap:calc(14 * var(--s));padding-left:calc(20 * var(--s));font-size:calc(var(--fPill) * var(--s));font-weight:700;text-transform:uppercase;letter-spacing:.01em;color:#fff;border-radius:99px;background:linear-gradient(180deg,rgba(24,44,68,.92),rgba(14,28,46,.92));border:calc(1.5 * var(--s)) solid rgba(84,124,170,.42);box-shadow:inset 0 calc(1.5 * var(--s)) 0 rgba(255,255,255,.06)}
.pill .fi{font-size:calc(var(--iPill) * var(--s))}
.pill.on{background:linear-gradient(180deg,#2fe063 0%,#16c84a 50%,#0ca23a 100%);border-color:#5dff93;box-shadow:0 0 calc(16 * var(--s)) rgba(60,255,110,.65),0 0 calc(36 * var(--s)) rgba(60,255,110,.25),inset 0 calc(2 * var(--s)) 0 rgba(255,255,255,.3)}
.pill.red{background:linear-gradient(180deg,#ec2020 0%,#c80c0c 55%,#a20808 100%);border-color:#ff5050;justify-content:flex-start;padding-left:calc(30 * var(--s));gap:calc(40 * var(--s));box-shadow:0 0 calc(10 * var(--s)) rgba(255,40,40,.35),inset 0 calc(2 * var(--s)) 0 rgba(255,255,255,.25)}
html[data-lay=m] .pill{justify-content:center;padding:0 calc(8 * var(--s));gap:calc(10 * var(--s))}
html[data-lay=m] .pill.on{padding:0 calc(14 * var(--s))}
html[data-lay=m] .p-exit{display:none}

/* ---------- menú: filas ---------- */
.row{display:block;text-align:left}
.row .num{position:absolute;left:0;top:0;bottom:0;width:calc(var(--nw) * var(--s));display:flex;align-items:center;justify-content:center;font-size:calc(var(--fNum) * var(--s));font-weight:700;color:#fff;border-radius:calc(var(--rRow) * var(--s));text-shadow:0 calc(2 * var(--s)) calc(3 * var(--s)) rgba(0,0,0,.45)}
.row .bar{position:absolute;left:calc(var(--bo) * var(--s));right:0;top:0;bottom:0;display:flex;align-items:center;border-radius:calc(var(--rRow) * var(--s));padding-left:calc(var(--icx) * var(--s))}
html[data-lay=d] .row{--nw:72;--bo:81;--icx:28;--lx:89}
html[data-lay=m] .row{--nw:82;--bo:91;--icx:26;--lx:97}
html[data-lay=d] .row.r1{--nw:72;--bo:83}
.row .ic{font-size:calc(var(--iRow) * var(--s));color:#fff}
.row b{position:absolute;left:calc(var(--lx) * var(--s));font-size:calc(var(--fRow) * var(--s));font-weight:500;color:#fff;white-space:nowrap;-webkit-text-stroke:calc(.6 * var(--s)) currentColor}
.row.r1 b{font-size:calc(var(--fRow1) * var(--s))}
.row em{position:absolute;right:calc(56 * var(--s));font-style:normal;font-size:calc(var(--fSub) * var(--s));color:rgba(225,234,244,.86);white-space:nowrap;text-align:left}
html[data-lay=m] .row em{right:calc(64 * var(--s))}
html[data-lay=m] .row.r2 em{white-space:normal;width:calc(232 * var(--s));left:calc(318 * var(--s));right:auto;line-height:1.4}
.row .chev{position:absolute;right:calc(14 * var(--s));font-size:calc(var(--iChev) * var(--s));color:#fff}
html[data-lay=m] .row .chev{right:calc(20 * var(--s))}
/* azules */
.row.blue .num{background:linear-gradient(180deg,#1d3a63 0%,#152b4b 100%);border:calc(1.5 * var(--s)) solid rgba(70,110,160,.55);box-shadow:inset 0 calc(1.5 * var(--s)) 0 rgba(255,255,255,.08)}
.row .bar{background:linear-gradient(180deg,rgba(22,42,70,.94) 0%,rgba(14,30,52,.94) 100%);border:calc(1.5 * var(--s)) solid rgba(78,118,168,.5);box-shadow:inset 0 calc(1.5 * var(--s)) 0 rgba(255,255,255,.06)}
.row.r3 .num{background:linear-gradient(180deg,#24497a,#163057);box-shadow:calc(-6 * var(--s)) 0 calc(14 * var(--s)) rgba(40,140,255,.35)}
.row.hot .num,.row.hot .bar{background:linear-gradient(180deg,#2a7dff 0%,#0f5cf0 50%,#0a46d6 100%);border-color:#69a8ff;box-shadow:0 0 calc(18 * var(--s)) rgba(30,120,255,.75),0 0 calc(40 * var(--s)) rgba(30,110,255,.3),inset 0 calc(2 * var(--s)) 0 rgba(255,255,255,.28)}
.row.hot .bar::before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(120deg,rgba(255,255,255,.08) 0 calc(4 * var(--s)),transparent calc(4 * var(--s)) calc(12 * var(--s)));-webkit-mask:linear-gradient(270deg,#000 0,transparent 25%);mask:linear-gradient(270deg,#000 0,transparent 25%)}
.row.hot em{color:rgba(235,242,255,.92);font-size:calc(var(--fSub1) * var(--s))}
/* rojos */
.row.red .num{background:linear-gradient(180deg,#d01c22 0%,#a8121a 55%,#870c12 100%);border:calc(1.5 * var(--s)) solid #e8484d;box-shadow:inset 0 calc(2 * var(--s)) 0 rgba(255,255,255,.22)}
/* verde */
.row.green .num{background:linear-gradient(180deg,#4fdc4f 0%,#26c03c 50%,#169a2c 100%);border:calc(1.5 * var(--s)) solid #6dff7e;box-shadow:0 0 calc(10 * var(--s)) rgba(70,240,100,.4),inset 0 calc(2 * var(--s)) 0 rgba(255,255,255,.3)}
.row.green .bar{background:linear-gradient(90deg,#0d6a20 0%,#118a2a 45%,#12a031 100%);border-color:#33d156;box-shadow:inset 0 calc(2 * var(--s)) 0 rgba(255,255,255,.12),0 0 calc(10 * var(--s)) rgba(40,220,80,.25)}
.row:hover .bar{filter:brightness(1.12)}
.row:focus-visible .bar,.pill:focus-visible,.a-submit:focus-visible,.a-guest:focus-visible{outline:calc(2 * var(--s)) solid #9fd0ff;outline-offset:calc(2 * var(--s))}

/* ---------- mismo estilo en ventanas y en el juego ---------- */
:root{--bg:#050a10;--line:#25405f;--muted:#9fb1c4;--ink:#eef3f8}
html,body{font-family:Ubuntu,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.modal{background:rgba(2,6,12,.72);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-box,.sheet-box{background:linear-gradient(180deg,rgba(14,26,40,.97),rgba(8,16,26,.97));border:1px solid rgba(84,124,170,.45);box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 0 1px rgba(60,200,255,.06),inset 0 1px 0 rgba(255,255,255,.05)}
.btn{background:linear-gradient(180deg,rgba(26,48,78,.95),rgba(15,31,54,.95));border:1px solid rgba(84,124,170,.5);font-weight:500}
.btn:hover{background:linear-gradient(180deg,rgba(32,58,92,.95),rgba(18,37,64,.95))}
.btn.primary{background:linear-gradient(90deg,#4fd23c 0%,#18c04a 35%,#0a9a3c 100%);border-color:#4cf59a;box-shadow:0 0 14px rgba(40,230,110,.3),inset 0 2px 0 rgba(255,255,255,.2);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.btn.danger{background:linear-gradient(180deg,#d41c1c,#9e0c0c);border-color:#ff5050}
.btn.ghost{background:transparent}
.btn.wa{background:linear-gradient(180deg,#1aa35a,#0f7a40);border-color:#38d68a}
.field input,.field select,.code-in,.score-in input,.chat-form input{background:rgba(12,24,36,.9);border:1px solid rgba(120,145,170,.38)}
.field input:focus,.field select:focus,.code-in:focus{outline:2px solid #38e07f}
.tab{background:rgba(12,24,38,.9);border:1px solid rgba(84,124,170,.4)}
.tab.active{background:linear-gradient(180deg,#1ee06a,#0a9b3c);border-color:#46f38a;color:#fff}
.rk,.peer-box{background:rgba(16,30,48,.85);border-color:rgba(84,124,170,.35)}
.toast{background:rgba(14,28,44,.96);border-color:rgba(84,124,170,.5)}
.msgb{background:#13263c}.msgb.me{background:#0f8a3a}
.update-bar{background:linear-gradient(90deg,#14b84a,#0a9a3c)}
/* juego */
.controls{background:linear-gradient(180deg,rgba(3,8,14,.25),rgba(3,8,14,.72))}
/* en horizontal la capa de controles va encima del juego: sin fondo para no oscurecerlo */
@media (orientation:landscape) and (max-height:620px){.controls{background:none!important}.kbtn{background:linear-gradient(180deg,rgba(24,46,76,.9),rgba(14,30,52,.9))}}
.kbtn,.hbtn,.hud-info{background:linear-gradient(180deg,rgba(24,46,76,.9),rgba(14,30,52,.9));border:1px solid rgba(84,124,170,.5);color:#eef3f8}
.kbtn:active,.kbtn.on{background:linear-gradient(180deg,#2fe063,#0ca23a);border-color:#5dff93;color:#fff}
.dpad button,.abtns button{background:rgba(18,36,62,.82);border:1px solid rgba(90,140,200,.6)}
.dpad button:active,.abtns button:active,.dpad button.on,.abtns button.on{background:linear-gradient(180deg,#2fe063,#0ca23a);border-color:#5dff93}
input[type=checkbox],input[type=range],input[type=radio]{accent-color:#18c04a}