/* Davidbsy — shared visual theme for secondary pages.
   Keeps each game's original HTML/JS and only unifies presentation with index.html. */
:root{
  --bg:#050810;--bg2:#08101c;--panel:rgba(10,19,34,.68);--panel2:rgba(14,27,47,.72);
  --line:rgba(148,190,255,.13);--text:#f5f8ff;--muted:#8e9bb0;--blue:#3182ff;
  --cyan:#65c8ff;--gold:#f2b84b;--green:#55e39a;--purple:#9b7cff;
  --shadow:0 25px 80px rgba(0,0,0,.45);
}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  background:var(--bg)!important;color:var(--text)!important;
  font-family:Inter,system-ui,sans-serif!important;
  line-height:1.5;position:relative;
}
body:before{
  content:"";position:fixed;inset:0;z-index:-4;pointer-events:none;
  background:radial-gradient(circle at 15% 10%,rgba(49,130,255,.18),transparent 32%),
             radial-gradient(circle at 85% 28%,rgba(101,200,255,.08),transparent 28%),
             linear-gradient(180deg,#07101e 0%,#050810 55%,#03050a 100%);
}
body:after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
#stars-canvas{opacity:.55!important}

/* Shared page shell */
.page,.game-wrap,.game-screen,.setup-screen{position:relative}
.page{width:min(1160px,calc(100% - 32px));margin:0 auto;padding:145px 0 80px}
.page-header{margin-bottom:34px}
.section-tag,.kicker,.game-sub,.status-msg,.legend,.word-info,.game-badge,.card-label,.score-lbl,.stat-lbl,.timer-num,.scorebar,.turn-indicator{
  font-family:Orbitron,sans-serif!important;
}
.section-tag,.kicker{
  color:#6798d0!important;font:700 10px Orbitron,sans-serif!important;letter-spacing:3px;text-transform:uppercase;
}

/* Generic glass/panel language */
.game-card,.kahoot-card,.card,.score-box,.stat-box,.streak-box,.results-card,.top5-card,
.setup-screen,.win-screen,.gameover-screen,.loading-screen,.login-screen,.login-card,
.feature,.player-input-wrap,.status-bar,.word-info,.legend,.keyboard,.game-header{
  border-color:var(--line)!important;
}
.game-card,.kahoot-card,.card,.score-box,.stat-box,.streak-box,.results-card,.top5-card,
.player-input-wrap,.status-bar,.word-info,.legend,.keyboard{
  background:linear-gradient(145deg,rgba(12,24,42,.92),rgba(6,10,18,.94))!important;
  box-shadow:0 18px 55px rgba(0,0,0,.25)!important;
}
.game-card,.kahoot-card,.card,.results-card,.top5-card{border-radius:20px!important}
button,.btn,.setup-btn,.win-btn,.gameover-btns button,.btn-start,.btn-next-q,.btn-play-again,.login-btn{
  font-family:Orbitron,sans-serif!important;border-radius:12px!important;transition:.2s ease!important;
}
button:hover,.btn:hover,.setup-btn:hover,.win-btn:hover,.btn-start:hover,.btn-next-q:hover,.btn-play-again:hover,.login-btn:hover{transform:translateY(-2px)}

/* JUEGOS */
.games-grid{gap:14px!important}
.game-card{padding:24px!important;min-height:270px!important;position:relative;overflow:hidden}
.game-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 90% 10%,rgba(49,130,255,.13),transparent 42%)}
.game-card:hover{transform:translateY(-5px)!important;border-color:rgba(101,200,255,.3)!important}
.game-name{font-family:Orbitron,sans-serif!important;letter-spacing:-.4px}
.game-desc{color:#8391a5!important}
.game-badge{border-color:rgba(101,200,255,.18)!important;background:rgba(7,16,29,.58)!important;color:#a9c4e5!important}

/* KAHOOT */
#loginScreen,.screen{background:transparent!important}
.kahoot-card,.ans-card,.results-card,.top5-card,.podium-block{
  border:1px solid var(--line)!important;background:linear-gradient(145deg,rgba(12,24,42,.94),rgba(6,10,18,.97))!important;
}
.login-title,.select-title,.results-title,.podium-title,.top5-title,.review-qtitle,.q-text{font-family:Orbitron,sans-serif!important}
.login-input,.player-input{background:rgba(5,10,18,.78)!important;border:1px solid var(--line)!important;color:#fff!important;border-radius:10px!important}
.btn-start,.btn-next-q,.btn-play-again,.login-btn{background:linear-gradient(135deg,#4a98ff,#1e63dc)!important;color:#fff!important;border:1px solid rgba(101,200,255,.25)!important;box-shadow:0 12px 35px rgba(49,130,255,.2)!important}
.ctrl-btn-gold{background:linear-gradient(135deg,#f7ca69,#d89424)!important;color:#0a0b0f!important}

/* HIGHER / LOWER */
.game-wrap{width:min(1160px,calc(100% - 32px))!important;margin:0 auto!important;padding:145px 0 80px!important}
.game-header{background:rgba(5,10,18,.55)!important;border-radius:24px!important;padding:26px!important}
.game-title,.loading-title,.gameover-title{font-family:Orbitron,sans-serif!important}
.card{overflow:hidden!important}
.card-img-wrap{background:rgba(3,7,13,.75)!important}
.card-price{font-family:Orbitron,sans-serif!important;color:#fff!important}
.btn-higher,.btn-lower,.btn-next,.btn-play-again{border:1px solid rgba(145,191,255,.16)!important}
.btn-higher{background:linear-gradient(135deg,#4a98ff,#1e63dc)!important}
.btn-lower{background:linear-gradient(135deg,#f7ca69,#d89424)!important;color:#0a0b0f!important}
.score-box,.streak-box{border-radius:16px!important}

/* MEMO */
.setup-screen,.win-screen{background:rgba(5,8,16,.9)!important;backdrop-filter:blur(12px)!important}
.setup-title,.win-title{font-family:Orbitron,sans-serif!important}
.player-input{background:rgba(5,10,18,.78)!important;border-color:var(--line)!important;color:#fff!important}
.setup-btn,.win-btn{background:linear-gradient(135deg,#4a98ff,#1e63dc)!important;border:1px solid rgba(101,200,255,.25)!important;color:#fff!important}
.card-back{background:linear-gradient(145deg,#0e1b2f,#07101e)!important;border:1px solid rgba(101,200,255,.15)!important}
.card-front{background:#08101c!important;border:1px solid var(--line)!important}
.scoreboard{filter:drop-shadow(0 15px 35px rgba(0,0,0,.25))}

/* WORDLE */
.game-header{box-shadow:0 18px 55px rgba(0,0,0,.25)!important}
.game-sub{color:#8e9bb0!important}
.tile{background:rgba(10,19,34,.68)!important;border-color:rgba(148,190,255,.2)!important;font-family:Orbitron,sans-serif!important}
.tile.correct{background:rgba(85,227,154,.2)!important;border-color:rgba(85,227,154,.5)!important}
.tile.present{background:rgba(242,184,75,.2)!important;border-color:rgba(242,184,75,.5)!important}
.tile.absent{background:rgba(70,82,101,.3)!important;border-color:rgba(110,125,145,.3)!important}
.key{background:rgba(14,27,47,.86)!important;border-color:var(--line)!important;font-family:Orbitron,sans-serif!important}
.key:hover{background:rgba(49,130,255,.14)!important;border-color:rgba(101,200,255,.3)!important}
.btn-primary{background:linear-gradient(135deg,#4a98ff,#1e63dc)!important}
.btn-secondary{background:rgba(9,17,29,.65)!important;border-color:var(--line)!important}

@media(max-width:900px){
  .page,.game-wrap{padding-top:115px!important}
}
@media(max-width:600px){
  .page,.game-wrap{width:calc(100% - 24px)!important;padding-top:105px!important;padding-bottom:55px!important}
  .game-card{padding:20px!important}
}