/* Conectados professional experience layer */
:root{
  color-scheme:dark;
  --pro-bg:#050713;--pro-bg-2:#090d1e;--pro-surface:rgba(15,20,42,.78);--pro-surface-solid:#10162d;
  --pro-elevated:rgba(24,31,61,.88);--pro-line:rgba(255,255,255,.10);--pro-line-strong:rgba(255,255,255,.18);
  --pro-text:#f8f9ff;--pro-muted:#9ca8c4;--pro-purple:#9b7cff;--pro-purple-2:#6f5bea;
  --pro-cyan:#45d7e8;--pro-green:#5ce6a4;--pro-gold:#ffc76a;--pro-red:#ff6f8b;
  --pro-r-sm:12px;--pro-r:18px;--pro-r-lg:28px;--pro-shadow:0 28px 80px rgba(0,0,0,.34);
  --pro-font:Inter,Manrope,"Segoe UI",ui-sans-serif,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--pro-bg);scroll-behavior:smooth}
body{font-family:var(--pro-font);background:
  radial-gradient(ellipse 70% 48% at 8% -8%,rgba(119,82,255,.22),transparent 62%),
  radial-gradient(ellipse 56% 42% at 96% 8%,rgba(35,200,222,.13),transparent 64%),
  linear-gradient(145deg,var(--pro-bg),var(--pro-bg-2) 48%,#070a17);color:var(--pro-text)}
body::before{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(to bottom,black,transparent 68%)}
button,input,select,textarea{font:inherit}
button{letter-spacing:-.01em}
h1,h2,h3,h4,strong{letter-spacing:-.025em}
.eyebrow,.section-kicker,.control-label,.kicker{font-size:.7rem!important;font-weight:900!important;letter-spacing:.16em!important;text-transform:uppercase}

/* Shared navigation and brand */
.topbar,.games-header,.treasure-header{border-bottom:1px solid var(--pro-line)!important;background:rgba(5,7,19,.78)!important;box-shadow:0 12px 42px rgba(0,0,0,.12);backdrop-filter:blur(22px) saturate(140%)!important}
.topbar{height:72px}.brand{gap:.75rem!important;color:var(--pro-text)!important;font-weight:850!important;letter-spacing:-.035em!important}
.brand-mark{width:42px!important;height:42px!important;border-radius:0!important;background:url('/assets/brand/conectados-mark-v2.png') center/contain no-repeat!important;box-shadow:none!important}
.brand-mark i{display:none!important}.connection{padding:.48rem .72rem!important;border:1px solid var(--pro-line)!important;border-radius:999px;background:rgba(255,255,255,.04)}
.sound-button{width:42px!important;height:42px!important;border:1px solid var(--pro-line)!important;border-radius:13px!important;background:rgba(255,255,255,.045)!important;transition:.18s ease}.sound-button:hover{background:rgba(255,255,255,.09)!important;transform:translateY(-1px)}

/* Controls */
.primary-button,.secondary-button{position:relative;overflow:hidden;min-height:52px!important;border-radius:14px!important;font-weight:850!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease!important}
.primary-button{border:1px solid rgba(255,255,255,.14)!important;background:linear-gradient(135deg,var(--pro-purple),var(--pro-purple-2))!important;color:white!important;box-shadow:0 12px 30px rgba(111,91,234,.25)!important}
.primary-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 38px rgba(111,91,234,.34)!important}
.primary-button:active:not(:disabled),.secondary-button:active:not(:disabled){transform:translateY(1px) scale(.995)}
.secondary-button{border:1px solid var(--pro-line)!important;background:rgba(255,255,255,.045)!important;color:var(--pro-text)!important;box-shadow:none!important}
.secondary-button:hover:not(:disabled){border-color:var(--pro-line-strong)!important;background:rgba(255,255,255,.085)!important;transform:translateY(-1px)}
button:disabled{opacity:.38!important;filter:saturate(.6);cursor:not-allowed!important}.text-button{color:var(--pro-muted)!important}.danger{color:#ff9caf!important}
input,select,textarea{border:1px solid var(--pro-line)!important;border-radius:14px!important;background:rgba(4,7,18,.72)!important;color:var(--pro-text)!important;box-shadow:inset 0 1px rgba(255,255,255,.025);transition:.18s ease}
input:hover,select:hover,textarea:hover{border-color:var(--pro-line-strong)!important}input:focus,select:focus,textarea:focus{border-color:var(--pro-cyan)!important;box-shadow:0 0 0 4px rgba(69,215,232,.11)!important}
.panel,.form-card,.quick-join{border:1px solid var(--pro-line)!important;background:linear-gradient(145deg,rgba(18,24,50,.86),rgba(10,14,31,.82))!important;box-shadow:var(--pro-shadow)!important;backdrop-filter:blur(22px) saturate(130%)!important}

/* Player-first landing */
.hero-screen{min-height:calc(100svh - 72px)!important;padding:clamp(2.5rem,7vh,6rem) 0 2rem!important}
.join-hero{grid-template-columns:minmax(0,1.12fr) minmax(340px,.72fr)!important;gap:clamp(3rem,8vw,8.5rem)!important}
.hero-copy{position:relative}.hero-copy::before{content:"EN VIVO";display:inline-flex;margin-bottom:1.25rem;padding:.42rem .68rem;border:1px solid rgba(92,230,164,.25);border-radius:999px;background:rgba(92,230,164,.08);color:var(--pro-green);font-size:.64rem;font-weight:950;letter-spacing:.16em}
.hero-copy .eyebrow{display:none}.hero-screen h1{max-width:780px;margin:0!important;font-size:clamp(3.7rem,7.4vw,7.2rem)!important;line-height:.88!important;letter-spacing:-.075em!important}.hero-screen h1 em{color:transparent!important;background:linear-gradient(100deg,#bba8ff 8%,#61deea 76%);background-clip:text;font-style:normal!important}
.hero-copy .intro{max-width:540px;margin:1.7rem 0 0!important;color:var(--pro-muted)!important;font-size:clamp(1.05rem,1.35vw,1.3rem)!important;line-height:1.55!important}
.quick-join{padding:clamp(1.35rem,3vw,2rem)!important;border-radius:var(--pro-r-lg)!important}.quick-join::before{content:"ENTRA A LA SALA";display:block;margin-bottom:1rem;color:var(--pro-cyan);font-size:.67rem;font-weight:950;letter-spacing:.15em}.quick-join label{font-size:.78rem!important}.quick-join .code-input{min-height:84px!important;border-radius:18px!important;background:rgba(3,6,16,.72)!important;font-size:clamp(2.2rem,4vw,3.2rem)!important;font-variant-numeric:tabular-nums}.quick-join .join-now{min-height:64px!important;background:linear-gradient(135deg,#3fd9e7,#288fca)!important;color:#03141c!important;box-shadow:0 16px 34px rgba(41,168,204,.2)!important}.quick-join p{color:#7785a2!important}.host-link{margin-top:-4rem!important;color:var(--pro-muted)!important}.host-link strong{color:#d8d2ff!important}.promise-row{padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.07);color:#8491ad!important}.promise-row span::first-letter{color:var(--pro-green)}

/* Join/create */
.form-screen{padding-top:1.4rem!important}.form-card{border-radius:var(--pro-r-lg)!important}.form-card h2{font-size:clamp(2.4rem,5vw,3.7rem)!important}.step-pill{border:1px solid rgba(155,124,255,.18);background:rgba(155,124,255,.1)!important}.avatar-option{border-color:var(--pro-line)!important;background-color:rgba(255,255,255,.04)!important}.avatar-option[aria-checked="true"]{border-color:var(--pro-cyan)!important;box-shadow:0 0 0 3px rgba(69,215,232,.13)!important}

/* Single-screen lobby */
.host-room-mode{padding-bottom:6rem!important}.host-room-mode .room-heading{margin-bottom:1rem!important}.host-room-mode .room-heading h2{font-size:clamp(2.4rem,4vw,4.4rem)!important;letter-spacing:-.06em!important}.host-room-mode .room-code-box{border-color:rgba(69,215,232,.25)!important;border-radius:20px!important;background:linear-gradient(135deg,rgba(69,215,232,.09),rgba(155,124,255,.08))!important;box-shadow:0 18px 48px rgba(0,0,0,.16)}.host-room-mode .room-code-box strong{font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 0 28px rgba(69,215,232,.18)}
.host-room-mode .host-join-strip{border-radius:var(--pro-r-lg)!important;border-color:rgba(69,215,232,.2)!important;background:linear-gradient(120deg,rgba(69,215,232,.10),rgba(155,124,255,.08) 60%,rgba(255,199,106,.05))!important;box-shadow:0 20px 60px rgba(0,0,0,.22)!important}.mini-qr{padding:12px!important;border-radius:18px!important;box-shadow:0 14px 40px rgba(0,0,0,.28)}
.host-room-mode .room-layout{gap:1.1rem!important}.players-panel{border-radius:24px!important}.host-room-mode .players-panel{min-height:420px!important}.host-panel{position:sticky;top:88px;border-radius:24px!important;background:linear-gradient(160deg,rgba(22,29,57,.94),rgba(9,13,29,.94))!important;box-shadow:0 22px 65px rgba(0,0,0,.26)!important}.host-panel h3{font-size:1.55rem!important}.host-control-group{border-color:rgba(255,255,255,.07)!important}.host-control-group .primary-button{min-height:58px!important}.advanced-display{opacity:.8}
.player-grid{gap:.65rem!important}.player-chip{min-height:62px;padding:.65rem .8rem!important;border-color:rgba(255,255,255,.075)!important;border-radius:16px!important;background:rgba(255,255,255,.035)!important;transition:.2s ease}.player-chip:hover{border-color:rgba(69,215,232,.22)!important;background:rgba(69,215,232,.055)!important;transform:translateY(-1px)}.profile-avatar{box-shadow:0 8px 20px rgba(0,0,0,.22)}.empty-state{color:#697691!important}.empty-state span{width:52px;height:52px;display:grid;place-items:center;border:1px solid var(--pro-line);border-radius:17px;background:rgba(255,255,255,.035)}
.live-game-panel{border-radius:24px!important;background:linear-gradient(145deg,rgba(30,27,68,.9),rgba(9,28,47,.9))!important}.live-badge{padding:.38rem .55rem;border:1px solid rgba(92,230,164,.18);border-radius:999px;background:rgba(92,230,164,.06)}

/* Game library + round stage */
.games-body{background:transparent!important}.games-header{height:72px!important}.games-shell{padding-top:clamp(2rem,5vh,4rem)!important}.games-shell h1{margin:.5rem 0 0!important;font-size:clamp(3.4rem,6vw,6.4rem)!important;line-height:.88!important;letter-spacing:-.07em!important}.games-shell h1 em{color:var(--pro-cyan);font-style:normal}.single-screen-note{color:var(--pro-muted)!important}.buzzer-mode-picker{margin-top:2rem!important;border-radius:22px!important;box-shadow:none!important}.game-menu{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:1rem!important}.game-tile{position:relative;min-height:210px!important;padding:1.25rem!important;overflow:hidden;border-color:var(--pro-line)!important;border-radius:22px!important;background:linear-gradient(155deg,rgba(23,31,61,.92),rgba(9,14,31,.94))!important;box-shadow:0 16px 42px rgba(0,0,0,.2);transition:.24s cubic-bezier(.2,.8,.2,1)!important}.game-tile::after{content:"";position:absolute;right:-36px;bottom:-52px;width:140px;height:140px;border-radius:50%;background:var(--tile-color);opacity:.08;filter:blur(1px)}.game-tile:hover{transform:translateY(-6px)!important;border-color:color-mix(in srgb,var(--tile-color),white 15%)!important;box-shadow:0 26px 58px rgba(0,0,0,.32),0 0 0 1px color-mix(in srgb,var(--tile-color),transparent 72%)}.game-tile span{width:54px;height:54px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--tile-color),transparent 62%);border-radius:17px;background:color-mix(in srgb,var(--tile-color),transparent 88%);color:var(--tile-color);font-size:1.45rem!important}.game-tile strong{z-index:1;font-size:1.22rem!important}.game-tile small{z-index:1;color:var(--pro-muted)!important}
.portal-stats{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.4rem}.portal-stats span{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .72rem;border:1px solid var(--pro-line);border-radius:999px;background:rgba(255,255,255,.035);color:var(--pro-muted);font-size:.74rem;font-weight:750}.portal-stats span:first-child{color:var(--pro-green)}.portal-stats i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor}.library-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin:2.6rem 0 1rem}.library-heading h2{margin:.25rem 0 0;font-size:clamp(1.8rem,3vw,2.8rem)}.library-heading p{margin:0;color:var(--pro-muted)}
.game-tile{align-content:start;text-align:left}.game-tile .game-icon{grid-row:1 / span 2}.game-tile .game-category{width:auto;height:auto;margin-top:.8rem;border:0;background:none;color:color-mix(in srgb,var(--tile-color),white 20%)!important;font-size:.62rem!important;font-weight:900;letter-spacing:.12em}.game-tile strong{margin-top:.35rem!important}.game-tile .game-content{margin-top:.12rem}.game-tile .game-cta{z-index:1;display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:auto;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.07);color:#eef1ff;font-size:.78rem}.game-tile .game-cta i{color:var(--tile-color);font-size:1rem;font-style:normal;transition:transform .18s ease}.game-tile:hover .game-cta i{transform:translateX(4px)}
.game-tile img.game-icon{z-index:1;width:76px;height:76px;margin-bottom:.25rem;border:1px solid color-mix(in srgb,var(--tile-color),transparent 72%);border-radius:20px;object-fit:contain;box-shadow:0 12px 28px rgba(0,0,0,.28);transition:transform .22s cubic-bezier(.2,.8,.2,1)}.game-tile:hover img.game-icon{transform:scale(1.055) rotate(-1deg)}
.games-body[data-active-game]{background:radial-gradient(ellipse 70% 52% at 50% -10%,color-mix(in srgb,var(--active-game-color),transparent 76%),transparent 66%)!important}.games-body[data-active-game] .round-stage{border-color:color-mix(in srgb,var(--active-game-color),transparent 70%)!important}.games-body[data-active-game] .round-top .section-kicker{color:var(--active-game-color)!important}
.round-top{margin-bottom:1rem!important}.round-stage{min-height:calc(100svh - 174px)!important;border-radius:26px!important;background:linear-gradient(145deg,rgba(16,22,46,.9),rgba(8,12,27,.92))!important}.round-stage h2{font-size:clamp(2.8rem,5.2vw,5.9rem)!important;letter-spacing:-.06em!important}.round-controls{top:88px!important;border-radius:22px!important;background:rgba(13,18,38,.94)!important;box-shadow:0 22px 64px rgba(0,0,0,.3)!important}.round-controls .primary-button{min-height:58px!important}.round-answer,.round-hint{border-radius:16px!important}.score-row{padding:.5rem;border-radius:12px;background:rgba(255,255,255,.025)}

/* Tesoros / Jesus controller */
.treasure-body{background:transparent!important}.treasure-header{height:72px!important}.treasure-shell{padding-top:1rem!important}.treasure-copy{margin-bottom:.8rem!important}.treasure-copy h1{font-size:clamp(1.7rem,2.8vw,3rem)!important}.treasure-stage{border-color:var(--pro-line)!important;border-radius:24px!important;background:#03050c!important;box-shadow:0 26px 80px rgba(0,0,0,.4)!important}.treasure-controls{position:sticky;z-index:12;bottom:12px;padding:.7rem;border:1px solid var(--pro-line);border-radius:20px;background:rgba(8,11,25,.9);box-shadow:0 20px 60px rgba(0,0,0,.4);backdrop-filter:blur(22px)}.treasure-controls button{min-height:50px!important;border-radius:13px!important}.treasure-controls .start-button{background:linear-gradient(135deg,var(--pro-cyan),#268fc5)!important;color:#03141d!important}.treasure-controls .reveal-button{background:linear-gradient(135deg,var(--pro-gold),#ef864a)!important;color:#201204!important}.round-stats{display:inline-flex!important;padding:.45rem .7rem;border:1px solid var(--pro-line);border-radius:999px;background:rgba(255,255,255,.035)}.hint-box{border-radius:16px!important}.podium-overlay{background:radial-gradient(circle at 50% 20%,rgba(155,124,255,.2),transparent 38%),rgba(3,5,14,.97)!important}

/* Projector */
.display-body{background:var(--pro-bg)!important}.display-body .display-bg{background:radial-gradient(ellipse 60% 50% at 12% 12%,rgba(116,77,216,.26),transparent 62%),radial-gradient(ellipse 50% 42% at 90% 80%,rgba(40,185,207,.16),transparent 62%),linear-gradient(145deg,#050713,#090e22)!important}.display-header{height:72px!important;background:rgba(5,7,19,.62);backdrop-filter:blur(18px)}.display-logo{border-radius:13px!important;background:linear-gradient(145deg,var(--pro-purple),var(--pro-purple-2))!important;box-shadow:0 12px 30px rgba(111,91,234,.3)}.join-copy h1,.display-state>h1{letter-spacing:-.075em!important}.join-code{border-color:var(--pro-line)!important;background:linear-gradient(145deg,rgba(18,24,50,.86),rgba(9,13,29,.88))!important;box-shadow:0 35px 100px rgba(0,0,0,.36)!important}.display-qr{border-radius:22px!important}.display-team-grid article,.leaderboard-state li,.podium article{box-shadow:0 18px 50px rgba(0,0,0,.2)}.game-state img{border:1px solid var(--pro-line);box-shadow:0 28px 80px rgba(0,0,0,.35)}

/* Admin */
.admin-body{background:transparent!important}.admin-shell .panel{border-radius:22px!important}.admin-toolbar{padding:1rem 0}.editor-panel{position:sticky;top:88px}.question-card{border-color:var(--pro-line)!important;border-radius:18px!important;background:var(--pro-surface)!important}

/* Feedback and motion */
.toast{border-radius:16px!important;background:rgba(19,25,49,.96)!important;box-shadow:0 20px 60px rgba(0,0,0,.4)!important;backdrop-filter:blur(18px)}
.loading-overlay{background:rgba(4,6,16,.86)!important}.spinner{border-top-color:var(--pro-cyan)!important}
.screen:not([hidden]){animation:proScreenIn .36s cubic-bezier(.2,.8,.2,1) both}@keyframes proScreenIn{from{opacity:0;transform:translateY(8px)}}
@media(max-width:1080px){.game-menu{grid-template-columns:repeat(3,minmax(0,1fr))!important}.host-room-mode .player-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:800px){.join-hero{grid-template-columns:1fr!important;gap:2rem!important}.hero-copy{text-align:center}.hero-copy .intro{margin-left:auto!important;margin-right:auto!important}.hero-screen h1{font-size:clamp(3.5rem,14vw,5.6rem)!important}.host-link{margin:0!important}.host-room-mode .host-join-strip{padding:1rem!important}.host-panel{position:static}.game-menu{grid-template-columns:repeat(2,minmax(0,1fr))!important}.round-stage{min-height:auto!important}.treasure-controls{bottom:6px}}
@media(max-width:520px){.topbar{height:64px}.hero-screen{min-height:calc(100svh - 64px)!important;padding-top:2rem!important}.quick-join{border-radius:22px!important}.promise-row{justify-content:center}.game-menu{grid-template-columns:1fr!important}.game-tile{min-height:154px!important}.host-room-mode .player-grid{grid-template-columns:1fr!important}.treasure-controls{grid-template-columns:1fr 1fr!important;border-radius:16px}.display-header{height:64px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.screen:not([hidden]),.player-chip,.game-tile{animation:none!important;transition:none!important}}
.hidden-search-mode{box-shadow:none!important;backdrop-filter:none!important}
.display-logo{width:46px!important;height:46px!important;border-radius:0!important;background:url('/assets/brand/conectados-mark-v2.png') center/contain no-repeat!important;box-shadow:none!important;color:transparent!important;font-size:0!important}