/* ===================================================
   LumoArcadia - Estilos do Portal
=================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-dark:      #07070f;
  --bg-card:      #0d0d1a;
  --bg-card-hover:#111126;
  --neon-cyan:    #00f5ff;
  --neon-pink:    #ff2d78;
  --neon-green:   #39ff14;
  --neon-yellow:  #ffe600;
  --neon-purple:  #bf00ff;
  --accent:       var(--neon-cyan);
  --text-primary: #e8e8f8;
  --text-muted:   #7070a0;
  --border-dim:   rgba(0,245,255,0.12);
  --border-glow:  rgba(0,245,255,0.5);
  --font-display: 'Orbitron', monospace;
  --font-body:    'Rajdhani', sans-serif;
  --gap-sm: .75rem; --gap-md: 1.5rem; --gap-lg: 3rem; --gap-xl: 5rem;
  --radius: 6px; --radius-lg: 12px;
  --transition: .25s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; font-size: 16px; }
body { background: var(--bg-dark); color: var(--text-primary); font-family: var(--font-body); line-height: 1.6; min-height: 100vh; overflow-x: hidden; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--neon-cyan); border-radius: 3px; }
::selection { background: var(--neon-cyan); color: var(--bg-dark); }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--font-display); }

/* -- HEADER -- */
.site-header { position: relative; padding: var(--gap-md) var(--gap-lg); border-bottom: 1px solid var(--border-dim); background: linear-gradient(180deg,rgba(0,245,255,.04) 0%,transparent 100%); overflow: hidden; }
.header-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: var(--gap-md); flex-wrap: wrap; position: relative; z-index: 1; }
.logo { font-family: var(--font-display); font-size: clamp(1.2rem,3vw,1.8rem); font-weight: 900; letter-spacing: .08em; display: flex; align-items: center; gap: .3em; white-space: nowrap; }
.logo-bracket { color: var(--neon-pink); text-shadow: 0 0 12px var(--neon-pink); }
.logo-accent { color: var(--neon-cyan); text-shadow: 0 0 16px var(--neon-cyan); }
.header-tagline { font-size: .95rem; color: var(--text-muted); letter-spacing: .04em; border-left: 2px solid var(--border-dim); padding-left: var(--gap-md); }
.scanlines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,245,255,.015) 2px,rgba(0,245,255,.015) 4px); pointer-events: none; }

/* -- HERO -- */
.hero { position: relative; padding: var(--gap-xl) var(--gap-lg) var(--gap-lg); overflow: hidden; text-align: center; }
.hero-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; }
.hero-title { font-family: var(--font-display); font-size: clamp(2rem,8vw,5rem); font-weight: 900; line-height: 1.1; letter-spacing: .06em; display: flex; flex-direction: column; gap: .05em; margin-bottom: var(--gap-md); }
.hero-line { color: var(--text-primary); }
.hero-line.accent { color: var(--neon-cyan); text-shadow: 0 0 20px rgba(0,245,255,.8),0 0 60px rgba(0,245,255,.3); animation: flicker 4s infinite; }
.hero-sub { font-size: clamp(1rem,2.5vw,1.2rem); color: var(--text-muted); max-width: 520px; margin: 0 auto; line-height: 1.7; }
.hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,245,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,245,255,.04) 1px,transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 80% 70% at 50% 50%,black,transparent); pointer-events: none; }

/* -- GRID & CARDS -- */
.arcade-main { max-width: 1200px; margin: 0 auto; padding: 0 var(--gap-lg) var(--gap-xl); }
.section-title { font-family: var(--font-display); font-size: clamp(.7rem,1.5vw,.85rem); font-weight: 700; letter-spacing: .25em; color: var(--text-muted); display: flex; align-items: center; gap: var(--gap-md); margin-bottom: var(--gap-lg); }
.section-title-line { flex: 1; height: 1px; background: var(--border-dim); }
.games-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap: var(--gap-md); }

.game-card { position: relative; background: var(--bg-card); border: 1px solid var(--border-dim); border-radius: var(--radius-lg); padding: var(--gap-md); display: flex; flex-direction: column; gap: var(--gap-sm); overflow: hidden; }
.card-glow { position: absolute; top:-40%; left:-20%; width:140%; height:180%; pointer-events:none; transition: opacity var(--transition); opacity:0; }
.game-card[data-game="snake"]    { --accent: var(--neon-green); border-color: rgba(57,255,20,.25); }
.game-card[data-game="breakout"] { --accent: var(--neon-pink); }
.game-card[data-game="pingneon"] { --accent: var(--neon-cyan); }
.game-card[data-game="hockey"]   { --accent: var(--neon-cyan); }
.game-card[data-game="pool"]     { --accent: var(--neon-purple); }
.game-card[data-game="memory"]   { --accent: var(--neon-yellow); }
.game-card[data-game="reflex"]   { --accent: var(--neon-pink); }
.game-card[data-game="tetris"]   { --accent: var(--neon-purple); }
.game-card[data-game="space"]    { --accent: var(--neon-cyan); }
.game-card[data-game="snake"]    .card-glow { background: radial-gradient(ellipse at 50% 30%,rgba(57,255,20,.07) 0%,transparent 70%); }
.game-card[data-game="breakout"] .card-glow { background: radial-gradient(ellipse at 50% 30%,rgba(255,45,120,.07) 0%,transparent 70%); }
.game-card[data-game="hockey"]   .card-glow { background: radial-gradient(ellipse at 50% 30%,rgba(0,245,255,.08) 0%,transparent 70%); }
.game-card[data-game="pool"]     .card-glow { background: radial-gradient(ellipse at 50% 30%,rgba(191,0,255,.07) 0%,transparent 70%); }
.game-card[data-game="memory"]   .card-glow { background: radial-gradient(ellipse at 50% 30%,rgba(255,230,0,.07) 0%,transparent 70%); }
.game-card[data-game="reflex"]   .card-glow { background: radial-gradient(ellipse at 50% 30%,rgba(255,45,120,.07) 0%,transparent 70%); }
.game-card[data-game="tetris"]   .card-glow { background: radial-gradient(ellipse at 50% 30%,rgba(191,0,255,.07) 0%,transparent 70%); }
.game-card[data-game="space"]    .card-glow { background: radial-gradient(ellipse at 50% 30%,rgba(0,245,255,.07) 0%,transparent 70%); }
.game-card.active:hover { border-color: var(--accent); box-shadow: 0 8px 40px color-mix(in srgb, var(--accent) 18%, transparent); }
.game-card.active:hover .card-glow { opacity:1; }
.game-card.coming-soon { opacity:.55; filter: saturate(.6); }
.game-card.coming-soon:hover { opacity:.7; }

.card-icon { width:56px; height:56px; color: var(--accent); filter: drop-shadow(0 0 6px var(--accent)); flex-shrink:0; }
.card-icon svg { width:100%; height:100%; }
.card-content { flex:1; }
.card-title { font-family: var(--font-display); font-size:1.1rem; font-weight:700; letter-spacing:.12em; color: var(--accent); text-shadow: 0 0 10px var(--accent); margin-bottom:.4em; }
.card-desc { font-size:.95rem; color: var(--text-muted); line-height:1.6; }
.card-meta { margin-top:.6em; }
.card-badge { font-family: var(--font-display); font-size:.65rem; letter-spacing:.15em; font-weight:700; padding:.25em .6em; border-radius:3px; }
.card-badge.available { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--accent) 32%, transparent); }
.card-badge.soon { color: var(--text-muted); background: rgba(112,112,160,.1); border:1px solid rgba(112,112,160,.2); }

.card-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5em; padding:.7em 1.4em; background:transparent; border:1px solid var(--accent); color: var(--accent); font-family: var(--font-display); font-size:.78rem; font-weight:700; letter-spacing:.2em; border-radius: var(--radius); text-transform:uppercase; transition: background var(--transition),color var(--transition),box-shadow var(--transition); margin-top:auto; }
.card-btn:not(.disabled):hover { background: var(--accent); color: var(--bg-dark); box-shadow: 0 0 20px var(--accent); }
.card-btn.disabled { border-color:rgba(112,112,160,.2); color: var(--text-muted); cursor:not-allowed; }
.btn-arrow { width:16px; height:16px; transition: transform var(--transition); }
.card-btn:not(.disabled):hover .btn-arrow { transform: translateX(3px); }

/* -- FOOTER -- */
.site-footer { border-top:1px solid var(--border-dim); padding: var(--gap-lg); text-align:center; }
.footer-inner { max-width:700px; margin:0 auto; }
.footer-logo { font-family: var(--font-display); font-size:1rem; font-weight:700; letter-spacing:.12em; display:block; margin-bottom:.6em; }
.footer-logo .accent { color: var(--neon-cyan); text-shadow: 0 0 10px var(--neon-cyan); }
.footer-copy { font-size:.9rem; color: var(--text-muted); margin-bottom:.3em; }
.footer-links { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; margin-top:1rem; font-family:var(--font-display); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.footer-links a { color:var(--text-muted); border-bottom:1px solid transparent; transition:color var(--transition),border-color var(--transition); }
.footer-links a:hover { color:var(--neon-cyan); border-color:var(--neon-cyan); }
.footer-hint { font-size:.8rem; color:rgba(112,112,160,.5); }
.footer-hint code { font-family:monospace; color: var(--neon-cyan); opacity:.6; }

/* -- CONTENT PAGES -- */
.page-shell { min-height:100vh; display:flex; flex-direction:column; }
.simple-nav { margin-left:auto; display:flex; gap:1rem; flex-wrap:wrap; font-family:var(--font-display); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.simple-nav a { color:var(--text-muted); }
.simple-nav a:hover { color:var(--neon-cyan); }
.content-page { width:min(920px,100%); margin:0 auto; padding:var(--gap-xl) var(--gap-lg); flex:1; }
.content-card { background:var(--bg-card); border:1px solid var(--border-dim); border-radius:var(--radius-lg); padding:clamp(1.25rem,4vw,2.5rem); box-shadow:0 14px 40px rgba(0,0,0,.24); }
.content-kicker { font-family:var(--font-display); font-size:.72rem; letter-spacing:.2em; color:var(--neon-cyan); text-transform:uppercase; margin-bottom:.75rem; }
.content-title { font-family:var(--font-display); font-size:clamp(2rem,6vw,3.6rem); line-height:1.1; color:var(--text-primary); margin-bottom:1rem; }
.content-lead { color:var(--text-muted); font-size:1.08rem; max-width:680px; margin-bottom:2rem; }
.content-section + .content-section { margin-top:1.8rem; }
.content-section h2 { font-family:var(--font-display); font-size:1rem; letter-spacing:.12em; color:var(--neon-pink); margin-bottom:.6rem; text-transform:uppercase; }
.content-section p, .content-section li { color:var(--text-muted); font-size:1rem; }
.content-section ul { padding-left:1.2rem; display:grid; gap:.45rem; }
.content-updated { margin-top:2rem; color:rgba(112,112,160,.75); font-size:.9rem; }

/* -- ANIMACOES -- */
@keyframes flicker { 0%,95%,100%{opacity:1} 96%{opacity:.85} 97%{opacity:1} 98%{opacity:.7} 99%{opacity:1} }

/* -- RESPONSIVO -- */
@media(max-width:768px){
  :root{--gap-lg:1.5rem;--gap-xl:3rem;}
  .header-inner{flex-direction:column;align-items:flex-start;gap:.4rem;}
  .header-tagline{border-left:none;padding-left:0;font-size:.85rem;}
  .hero{padding:var(--gap-lg) var(--gap-md);}
  .arcade-main{padding:0 var(--gap-md) var(--gap-xl);}
  .games-grid{grid-template-columns:1fr;}
  .section-title{font-size:.7rem;letter-spacing:.15em;}
}
@media(max-width:480px){
  .hero-title{font-size:clamp(1.6rem,10vw,2.4rem);}
  .card-btn{width:100%;}
}