:root{
  --bg: #150F30;
  --panel: #241B5E;
  --panel-line: #3A2E8C;
  --cyan: #3DEFFF;
  --magenta: #FF3E85;
  --lime: #C6FF4D;
  --amber: #FFC93D;
  --text: #F1EEFF;
  --text-dim: #B3A9E8;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Manrope', sans-serif;
  background:
    radial-gradient(ellipse 900px 600px at 15% -10%, rgba(61,239,255,0.18), transparent 60%),
    radial-gradient(ellipse 900px 700px at 90% 10%, rgba(255,62,133,0.16), transparent 55%),
    var(--bg);
  color:var(--text);
  min-height:100%;
  overflow-x:hidden;
}
::selection{ background:var(--magenta); color:white; }
a{color:inherit;}
h1,h2,h3{font-family:'Fredoka', sans-serif; font-weight:600; line-height:1.05;}

.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
header.top{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; max-width:1180px; margin:0 auto;
}
.top-right{ display:flex; align-items:center; gap:12px; }
.logo{ display:flex; align-items:center; gap:10px; font-family:'Fredoka'; font-size:20px; font-weight:700; letter-spacing:0.3px;}
.logo .dot{ width:10px; height:10px; border-radius:50%; background:var(--lime); box-shadow:0 0 14px var(--lime); }
.lang-switch{
  font-family:'Fredoka'; font-size:13px; font-weight:600; padding:8px 14px; border-radius:100px;
  border:1px solid var(--panel-line); background:transparent; color:var(--text); cursor:pointer;
}
.lang-switch:hover{ border-color:var(--cyan); color:var(--cyan); }
.status-pill{
  font-size:13px; padding:7px 14px; border-radius:100px;
  border:1px solid var(--panel-line); color:var(--text-dim);
  display:flex; align-items:center; gap:8px;
}
.status-pill .led{ width:7px; height:7px; border-radius:50%; background:#665fa3; }
.status-pill.online .led{ background:var(--lime); box-shadow:0 0 8px var(--lime); }

.hero{
  display:grid; grid-template-columns: 1.1fr 0.9fr; align-items:center;
  gap:40px; padding:40px 0 70px;
}
.hero h1{ font-size:52px; letter-spacing:-0.5px; }
.hero h1 span{ color:var(--cyan); }
.hero p{ margin-top:18px; font-size:17px; color:var(--text-dim); max-width:46ch; line-height:1.55; }
.hero .cta-row{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  font-family:'Fredoka'; font-weight:600; font-size:16px; letter-spacing:0.2px;
  padding:14px 24px; border-radius:14px; border:none; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:active{ transform: translateY(1px) scale(0.98); }
.btn-primary{ background:linear-gradient(135deg, var(--magenta), #FF7A3D); color:white; box-shadow:0 10px 26px -8px rgba(255,62,133,0.55);}
.btn-primary:hover{ box-shadow:0 14px 30px -6px rgba(255,62,133,0.7); transform:translateY(-2px); }
.btn-ghost{ background:transparent; border:1.5px solid var(--panel-line); color:var(--text); }
.btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); }
.btn:disabled{ opacity:0.4; cursor:default; }

.stage{ perspective: 1200px; display:flex; justify-content:center; align-items:center; height:300px; }
.cube{ width:150px; height:150px; position:relative; transform-style:preserve-3d; animation: spin 14s linear infinite; }
@keyframes spin{ 0%{ transform: rotateX(-18deg) rotateY(0deg);} 100%{ transform: rotateX(-18deg) rotateY(360deg);} }
.face{
  position:absolute; width:150px; height:150px; display:flex; align-items:center; justify-content:center;
  font-family:'Fredoka'; font-size:44px; font-weight:700; color:white; border-radius:22px; opacity:0.96;
}
.f1{ background:linear-gradient(135deg,var(--cyan),#2A8CFF); transform: rotateY(0deg) translateZ(75px); }
.f2{ background:linear-gradient(135deg,var(--magenta),#B33DFF); transform: rotateY(90deg) translateZ(75px); }
.f3{ background:linear-gradient(135deg,var(--lime),#3DEFA8); transform: rotateY(180deg) translateZ(75px); }
.f4{ background:linear-gradient(135deg,var(--amber),#FF7A3D); transform: rotateY(-90deg) translateZ(75px); }
.f5{ background:linear-gradient(135deg,#B33DFF,var(--cyan)); transform: rotateX(90deg) translateZ(75px); }
.f6{ background:linear-gradient(135deg,#2A8CFF,var(--magenta)); transform: rotateX(-90deg) translateZ(75px); }

.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin:10px 0 26px; }
.section-head h2{ font-size:28px; }
.section-head .hint{ color:var(--text-dim); font-size:14px; }

.games{ display:grid; grid-template-columns: repeat(3, 1fr); gap:22px; perspective:1400px; padding-bottom:60px; }
.game-card{
  position:relative; border-radius:24px; padding:26px;
  background: linear-gradient(160deg, var(--panel), #1B1448);
  border:1px solid var(--panel-line);
  overflow:hidden; transform-style:preserve-3d;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
  min-height:250px; display:flex; flex-direction:column; justify-content:flex-end;
}
.game-card::before{
  content:""; position:absolute; inset:0; opacity:0.55; z-index:0;
  background: radial-gradient(circle at 30% 20%, var(--glow, var(--cyan)), transparent 55%);
}
.game-card:hover{
  transform: translateY(-8px) rotateX(4deg) rotateY(-4deg);
  border-color: var(--glow, var(--cyan));
  box-shadow: 0 24px 46px -18px rgba(0,0,0,0.55);
}
.game-card .icon{ font-size:42px; margin-bottom:14px; z-index:1; filter:drop-shadow(0 6px 14px rgba(0,0,0,0.35)); }
.game-card h3{ font-size:22px; z-index:1; margin-bottom:6px; }
.game-card p{ font-size:14px; color:var(--text-dim); z-index:1; line-height:1.5; margin-bottom:16px; }
.game-card .card-actions{ display:flex; gap:8px; z-index:1; }
.card-btn{
  flex:1; font-family:'Fredoka'; font-weight:600; font-size:13px; padding:10px 8px; border-radius:10px;
  border:1px solid rgba(255,255,255,0.18); background:rgba(0,0,0,0.25); color:var(--text); cursor:pointer;
  transition: background .15s, border-color .15s;
}
.card-btn:hover{ border-color:var(--glow, var(--cyan)); }
.card-btn.primary{ background:var(--glow, var(--cyan)); color:#0B0B0B; border-color:transparent; }

.panel{
  background: linear-gradient(160deg, var(--panel), #1B1448);
  border:1px solid var(--panel-line); border-radius:24px; padding:34px; margin-bottom:60px;
}
.panel h2{ font-size:24px; margin-bottom:6px; }
.panel .sub{ color:var(--text-dim); font-size:14px; margin-bottom:22px; }
.conn-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.conn-box{ background:rgba(0,0,0,0.18); border:1px solid var(--panel-line); border-radius:16px; padding:20px; }
.conn-box h4{ font-family:'Fredoka'; font-size:16px; margin-bottom:12px; color:var(--cyan); }
.code-display{
  font-family:'Fredoka'; font-size:38px; letter-spacing:6px; text-align:center;
  padding:18px 0; color:var(--lime); background:rgba(0,0,0,0.25); border-radius:12px; margin-bottom:12px;
}
input[type=text]{
  width:100%; padding:14px 16px; border-radius:12px; border:1.5px solid var(--panel-line);
  background:rgba(0,0,0,0.2); color:var(--text); font-family:'Fredoka'; font-size:20px;
  letter-spacing:4px; text-align:center; text-transform:uppercase; margin-bottom:12px;
}
input[type=text]:focus{ outline:none; border-color:var(--magenta); }
.small-note{ font-size:12.5px; color:var(--text-dim); margin-top:8px; line-height:1.5; }

.overlay{
  position:fixed; inset:0; background:rgba(9,6,26,0.92); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; z-index:50; padding:20px;
}
.overlay.active{ display:flex; }
.game-window{
  width:100%; max-width:760px; max-height:92vh; overflow:auto;
  background: linear-gradient(160deg, var(--panel), #1B1448);
  border:1px solid var(--panel-line); border-radius:26px; padding:30px; position:relative;
}
.close-btn{
  position:absolute; top:18px; right:18px; width:38px; height:38px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid var(--panel-line); color:var(--text);
  font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.close-btn:hover{ background:var(--magenta); border-color:var(--magenta); }
.game-title{ font-size:26px; margin-bottom:4px; }
.game-sub{ color:var(--text-dim); font-size:14px; margin-bottom:20px; }

footer{ text-align:center; padding:30px 0 50px; color:var(--text-dim); font-size:13px; }

/* ===== shared game-building blocks (used by files in /games) ===== */
.g-status{ text-align:center; padding:12px; border-radius:12px; background:rgba(0,0,0,0.2); font-size:14px; margin-bottom:16px; color:var(--text-dim); }
.g-status.turn{ color:var(--lime); }
.g-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:320px; margin:0 auto 20px; }
.g-cell{ aspect-ratio:1; background:rgba(0,0,0,0.25); border:1.5px solid var(--panel-line); border-radius:14px; display:flex; align-items:center; justify-content:center; font-family:'Fredoka'; font-size:40px; cursor:pointer; transition: background .15s; }
.g-cell:hover{ background:rgba(255,255,255,0.06); }
.g-cell.x{ color:var(--cyan); } .g-cell.o{ color:var(--magenta); }
.g-boards{ display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-bottom:16px; }
.g-board{ display:grid; grid-template-columns:repeat(6,34px); grid-template-rows:repeat(6,34px); gap:3px; }
.g-cell-sm{ background:rgba(61,239,255,0.08); border:1px solid var(--panel-line); border-radius:6px; cursor:pointer; transition: background .15s; }
.g-cell-sm.ship{ background:rgba(255,201,61,0.35); }
.g-cell-sm.hit{ background:var(--magenta); }
.g-cell-sm.miss{ background:rgba(255,255,255,0.12); }
.g-cell-sm.enemy:hover{ background:rgba(255,62,133,0.25); }
.g-label{ text-align:center; font-family:'Fredoka'; font-size:14px; margin-bottom:8px; color:var(--text-dim); }
.g-score{ display:flex; justify-content:space-between; margin-bottom:18px; font-family:'Fredoka'; font-size:15px; }
.g-question{ font-size:20px; margin-bottom:18px; min-height:56px; }
.g-opts{ display:grid; gap:10px; }
.g-opt{ padding:14px 16px; border-radius:12px; border:1.5px solid var(--panel-line); background:rgba(0,0,0,0.2); cursor:pointer; font-size:15px; transition: all .15s; }
.g-opt:hover{ border-color:var(--cyan); }
.g-opt.correct{ background:rgba(198,255,77,0.2); border-color:var(--lime); }
.g-opt.wrong{ background:rgba(255,62,133,0.2); border-color:var(--magenta); }
.g-input{ width:100%; padding:14px 16px; border-radius:12px; border:1.5px solid var(--panel-line); background:rgba(0,0,0,0.2); color:var(--text); font-family:'Manrope'; font-size:16px; margin-bottom:12px; text-transform:none; letter-spacing:normal; text-align:left; }
.g-history{ max-height:170px; overflow-y:auto; background:rgba(0,0,0,0.2); border-radius:12px; padding:12px; margin-bottom:14px; font-size:14px; line-height:1.8; }
.g-row{ display:flex; gap:10px; justify-content:center; margin-bottom:14px; flex-wrap:wrap; }
.g-choice{ width:64px; height:64px; border-radius:16px; background:rgba(0,0,0,0.2); border:1.5px solid var(--panel-line); font-size:28px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.g-choice:hover{ border-color:var(--cyan); }
.g-choice.selected{ border-color:var(--lime); background:rgba(198,255,77,0.15); }
.g-hang{ font-family:monospace; font-size:15px; white-space:pre; text-align:center; margin-bottom:14px; color:var(--amber); letter-spacing:4px; }
.g-letters{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:14px; }
.g-letter{ width:34px; height:34px; border-radius:8px; background:rgba(0,0,0,0.2); border:1.5px solid var(--panel-line); display:flex; align-items:center; justify-content:center; cursor:pointer; font-family:'Fredoka'; font-size:15px; }
.g-letter:hover{ border-color:var(--cyan); }
.g-letter.used{ opacity:0.3; cursor:default; }
.g-reactzone{ height:200px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-family:'Fredoka'; font-size:22px; cursor:pointer; transition:background .1s; background:rgba(255,62,133,0.2); text-align:center; padding:20px; }
.g-reactzone.go{ background:var(--lime); color:#0B0B0B; }

@media (max-width: 860px){
  .hero{ grid-template-columns:1fr; }
  .games{ grid-template-columns:1fr; }
  .conn-grid{ grid-template-columns:1fr; }
  .hero h1{ font-size:38px; }
  .stage{ height:200px; }
  .g-board{ grid-template-columns:repeat(6,28px); grid-template-rows:repeat(6,28px); }
}