/* Home page: light game lounge with night sky in the window. */
.home-page {
  color: var(--ns-text);
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 430px;
  overflow: hidden;
  border-bottom: 1px solid rgba(88, 127, 178, .12);
  background:
    linear-gradient(115deg, rgba(255,255,255,.98) 0 53%, rgba(237,247,255,.96) 71%, rgba(233,239,255,.98) 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 92px;
  z-index: -2;
  background: linear-gradient(180deg, rgba(224,235,247,0), rgba(219,231,245,.58));
}

.hero__room-glow {
  position: absolute;
  z-index: -1;
  width: 560px;
  height: 360px;
  right: 1%;
  top: 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(83, 211, 255, .18), rgba(156, 110, 255, .08) 48%, transparent 72%);
  filter: blur(8px);
}

.hero__inner {
  min-height: 430px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(380px, .98fr);
  align-items: center;
  gap: 50px;
  padding-block: 64px 58px;
}

.hero__copy { position: relative; z-index: 2; }
.hero__eyebrow,
.section-kicker {
  margin: 0 0 8px;
  color: #2789d2;
  font-family: "Outfit", sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .18em;
}

.hero h1 {
  margin: 0;
  color: #15233e;
  font-size: clamp(2.45rem, 5vw, 4.35rem);
  line-height: 1.18;
  letter-spacing: -.045em;
}

.hero__lead {
  margin: 24px 0 0;
  color: #687790;
  font-size: clamp(.98rem, 1.5vw, 1.08rem);
  line-height: 1.9;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid;
  border-radius: 14px;
  font-size: .9rem;
  font-weight: 700;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.cta:hover { transform: translateY(-2px); }
.cta .material-symbols-outlined { font-size: 19px; }
.cta--primary {
  color: #fff;
  border-color: rgba(37, 166, 235, .65);
  background: linear-gradient(135deg, #1a8ee8, #25c6ed);
  box-shadow: 0 12px 24px rgba(34, 159, 221, .2);
}
.cta--secondary {
  color: #5b4b86;
  border-color: rgba(128, 99, 202, .2);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 24px rgba(79, 88, 128, .08);
}
.cta--secondary:hover { background: #fff; }

.hero__visual { position: relative; min-height: 310px; align-self: center; }
.lounge-window {
  position: absolute;
  inset: 12px 2% 52px 8%;
  overflow: hidden;
  border: 10px solid rgba(255,255,255,.92);
  border-radius: 28px;
  background:
    radial-gradient(circle at 28% 21%, rgba(86, 201, 255, .18), transparent 12rem),
    linear-gradient(165deg, #091533 0%, #13234a 50%, #201b48 100%);
  box-shadow: 0 28px 54px rgba(53, 76, 116, .15), inset 0 0 0 1px rgba(86,139,210,.16);
}
.lounge-window::before,
.lounge-window::after {
  content: "";
  position: absolute;
  z-index: 2;
  background: rgba(233, 243, 255, .72);
}
.lounge-window::before { top: 0; bottom: 0; left: 48%; width: 5px; }
.lounge-window::after { left: 0; right: 0; top: 48%; height: 5px; }
.lounge-window__stars {
  position: absolute;
  inset: 0;
  opacity: .9;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(87,216,255,.9) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(190,135,255,.85) 0 1px, transparent 1.4px);
  background-size: 82px 82px, 127px 127px, 169px 169px;
  background-position: 12px 18px, 55px 28px, 90px 66px;
}
.lounge-window__moon {
  position: absolute;
  right: 12%; top: 11%;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: #eafcff;
  box-shadow: 0 0 28px rgba(128,225,255,.6);
}
.lounge-window__city { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; display:flex; align-items:flex-end; gap:7px; padding:0 5%; }
.lounge-window__city span { flex:1; min-width:18px; border-radius:4px 4px 0 0; background: repeating-linear-gradient(180deg, rgba(89,213,255,.4) 0 2px, transparent 2px 10px), linear-gradient(180deg,#1c386a,#0a1630); }
.lounge-window__city span:nth-child(1){height:42%}.lounge-window__city span:nth-child(2){height:68%}.lounge-window__city span:nth-child(3){height:52%}.lounge-window__city span:nth-child(4){height:82%}.lounge-window__city span:nth-child(5){height:58%}.lounge-window__city span:nth-child(6){height:72%}
.lounge-desk { position:absolute; left:2%; right:0; bottom:34px; height:20px; border-radius:10px; background:linear-gradient(180deg,#d9e7f4,#b8ccdf); box-shadow:0 14px 25px rgba(56,76,108,.16); }
.lounge-console { position:absolute; right:9%; bottom:44px; display:flex; align-items:center; gap:8px; width:118px; height:42px; padding:0 14px; border-radius:14px; background:#f9fcff; border:1px solid rgba(74,119,175,.16); box-shadow:0 10px 24px rgba(67,88,124,.13); }
.lounge-console__light { width:9px; height:9px; border-radius:50%; background:#48dff5; box-shadow:0 0 12px rgba(72,223,245,.65); }
.lounge-console__light:nth-child(2){background:#9a72f2;box-shadow:0 0 12px rgba(154,114,242,.55)}
.lounge-console__light:nth-child(3){background:#ff8bd3;box-shadow:0 0 12px rgba(255,139,211,.5)}

.home-content { padding-top: 34px; }
.section-block { scroll-margin-top: 90px; }
.section-title-row,
.panel__heading,
.sidebar-card__heading { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.section-title-row h2,
.panel__heading h2,
.sidebar-card__heading h2 { margin:0; color:#1d2c47; font-size:1.25rem; letter-spacing:-.02em; }
.section-icon { color:#22aadb; text-shadow:0 0 12px rgba(62,219,255,.28); }
.section-icon--hot { color:#ff657c; }
.section-more { color:#71819d; font-size:.82rem; }
.section-more:hover { color:#208fcb; }

.featured-grid { display:grid; grid-template-columns:1.65fr repeat(3,minmax(0,.56fr)); gap:14px; margin-top:16px; }
.feature-card {
  overflow:hidden;
  color:#20304a;
  border:1px solid rgba(87,121,164,.14);
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 34px rgba(74,91,122,.1);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.feature-card:hover { transform:translateY(-4px); border-color:rgba(43,175,224,.3); box-shadow:0 18px 38px rgba(68,90,130,.14); }
.feature-card__art { position:relative; min-height:170px; overflow:hidden; }
.feature-card--hero .feature-card__art { min-height:250px; }
.feature-card__art--ability {
  color:#fff;
  background:
    radial-gradient(circle at 28% 36%, rgba(54,186,255,.28), transparent 22%),
    linear-gradient(125deg, rgba(3,14,38,.1), rgba(20,89,157,.24)),
    linear-gradient(145deg,#071429,#0d3156 58%,#081226);
}
.feature-card__art--ability::before,
.feature-card__art--ability::after { content:""; position:absolute; border-radius:999px; background:linear-gradient(90deg,transparent,rgba(50,219,255,.92),transparent); transform:rotate(-24deg); }
.feature-card__art--ability::before { width:72%; height:2px; left:-12%; top:45%; }
.feature-card__art--ability::after { width:58%; height:1px; right:-8%; top:25%; background:linear-gradient(90deg,transparent,rgba(168,87,255,.9),transparent); }
.feature-card__badge { position:absolute; top:14px; left:14px; z-index:2; padding:4px 8px; border:1px solid rgba(73,213,255,.65); border-radius:8px; color:#fff; background:rgba(19,133,255,.82); font-size:.72rem; font-weight:800; }
.ability-emblem { position:absolute; left:8%; bottom:-18px; font-family:"Outfit",sans-serif; font-size:13rem; font-weight:700; line-height:.8; color:rgba(71,207,255,.055); text-shadow:0 0 28px rgba(63,219,255,.14); }
.ability-title { position:absolute; right:7%; bottom:28px; text-align:right; }
.ability-title strong { display:block; font-family:"Outfit",sans-serif; font-size:clamp(2rem,4vw,3.6rem); line-height:.82; letter-spacing:-.04em; font-style:italic; }
.ability-title span { display:block; margin-top:12px; color:#b8c8e9; font-size:.72rem; }
.feature-card__footer,.feature-card__body { padding:13px 14px 15px; }
.feature-card__footer { display:flex; gap:8px; }
.feature-card__body h3 { margin:0 0 9px; font-size:1.05rem; }
.game-tag,.mini-tag { display:inline-flex; align-items:center; gap:4px; width:fit-content; padding:4px 8px; border:1px solid rgba(82,118,174,.18); border-radius:999px; color:#596a85; background:#f4f8fd; font-size:.68rem; line-height:1; }
.game-tag .material-symbols-outlined { font-size:14px; }
.game-tag--cyan { border-color:rgba(39,177,185,.18); color:#238b93; background:#eefbfb; }
.feature-card__art--gomoku { background:linear-gradient(90deg,rgba(74,47,20,.18) 1px,transparent 1px),linear-gradient(rgba(74,47,20,.18) 1px,transparent 1px),linear-gradient(145deg,#d4a66a,#f0c887 58%,#bb8048); background-size:30px 30px; }
.board--gomoku { position:absolute; inset:28px; }
.board--gomoku i { position:absolute; width:28px; height:28px; border-radius:50%; box-shadow:0 5px 8px rgba(0,0,0,.3); }
.board--gomoku i:nth-child(odd){background:radial-gradient(circle at 35% 28%,#4b4b4b,#060606 70%)}
.board--gomoku i:nth-child(even){background:radial-gradient(circle at 35% 28%,#fff,#d3d3d3 72%)}
.board--gomoku i:nth-child(1){left:10%;top:55%}.board--gomoku i:nth-child(2){left:29%;top:35%}.board--gomoku i:nth-child(3){left:49%;top:56%}.board--gomoku i:nth-child(4){left:68%;top:32%}.board--gomoku i:nth-child(5){left:40%;top:13%}.board--gomoku i:nth-child(6){left:58%;top:5%}.board--gomoku i:nth-child(7){left:20%;top:74%}.board--gomoku i:nth-child(8){left:55%;top:76%}.board--gomoku i:nth-child(9){left:72%;top:66%}
.feature-card__art--reversi { background:linear-gradient(90deg,rgba(7,24,13,.36) 1px,transparent 1px),linear-gradient(rgba(7,24,13,.36) 1px,transparent 1px),linear-gradient(145deg,#287452,#3b9b70); background-size:38px 38px; }
.reversi-disc { position:absolute; width:54px; height:54px; border-radius:50%; box-shadow:0 6px 12px rgba(0,0,0,.3); }
.reversi-disc--one{left:23%;top:24%;background:radial-gradient(circle at 30% 25%,#fff,#d8d8d8 72%)}
.reversi-disc--two{right:20%;top:31%;background:radial-gradient(circle at 30% 25%,#4d4d4d,#050505 72%)}
.reversi-disc--three{left:34%;bottom:18%;background:radial-gradient(circle at 30% 25%,#4d4d4d,#050505 72%)}
.reversi-disc--four{right:29%;bottom:14%;background:radial-gradient(circle at 30% 25%,#fff,#d8d8d8 72%)}
.feature-card__art--sudoku { display:grid; place-items:center; background:linear-gradient(145deg,#ecf5ff,#fff 55%,#dcecff); }
.sudoku-grid { padding:20px; border:2px solid rgba(63,91,127,.42); color:#304561; background:linear-gradient(90deg,rgba(68,113,169,.16) 1px,transparent 1px),linear-gradient(rgba(68,113,169,.16) 1px,transparent 1px),rgba(255,255,255,.7); background-size:26px 26px; font-family:Georgia,serif; font-size:1.18rem; line-height:1.85; transform:rotate(-3deg); box-shadow:0 10px 20px rgba(69,103,146,.12); }

.category-chips { display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 14px; padding:14px; border:1px solid rgba(91,124,168,.13); border-radius:16px; background:rgba(255,255,255,.75); box-shadow:0 10px 24px rgba(76,94,126,.06); }
.category-chip { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border:1px solid; border-radius:999px; font-size:.78rem; font-weight:700; }
.category-chip .material-symbols-outlined { font-size:17px; }
.category-chip--blue{color:#2576ab;border-color:rgba(45,158,221,.22);background:#eef9ff}.category-chip--purple{color:#7658b3;border-color:rgba(126,88,201,.2);background:#f6f1ff}.category-chip--pink{color:#b34c91;border-color:rgba(218,91,168,.18);background:#fff1f8}.category-chip--cyan{color:#318b86;border-color:rgba(62,177,170,.2);background:#effcf9}.category-chip--orange{color:#b27132;border-color:rgba(222,151,78,.2);background:#fff8ed}

.content-grid { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:16px; }
.panel { border:1px solid rgba(91,124,168,.13); border-radius:var(--ns-radius); background:rgba(255,255,255,.84); box-shadow:0 14px 34px rgba(74,91,122,.08); }
.panel--games { padding:18px; }
.game-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:14px; }
.game-card { display:block; min-width:0; padding:10px; border:1px solid rgba(95,127,165,.12); border-radius:14px; background:#fff; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.game-card:hover { transform:translateY(-3px); border-color:rgba(42,174,224,.28); box-shadow:0 12px 24px rgba(66,90,127,.1); }
.game-card h3 { margin:9px 0 7px; color:#24344e; font-size:.86rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.game-card__thumb { aspect-ratio:1/.72; display:grid; place-items:center; overflow:hidden; border-radius:10px; font-family:"Outfit",sans-serif; font-size:1.5rem; font-weight:700; }
.game-card__thumb--ability{background:linear-gradient(135deg,#0c2c50,#112344 55%,#37236a);color:#65dcff}.game-card__thumb--gomoku{background:linear-gradient(145deg,#c99455,#ebbd7c);color:#111}.game-card__thumb--reversi{background:linear-gradient(145deg,#246c4d,#3a976d);color:#fff}.game-card__thumb--sudoku{background:linear-gradient(145deg,#f5faff,#fff 55%,#e8f2fc);color:#3d5674;border:1px solid #d5e6f5}
/* Brightness modifiers for future games */
.game-card--dark { border-color:rgba(70,100,160,.18); }
.game-card--dark:hover { border-color:rgba(90,170,255,.4); box-shadow:0 12px 28px rgba(40,70,120,.16); }
.game-card--neutral { border-color:rgba(120,110,90,.14); }
.game-card--bright { border-color:rgba(100,150,200,.14); }
.game-card--vivid { border-color:rgba(180,90,160,.16); }
.game-card--vivid:hover { border-color:rgba(220,100,180,.35); box-shadow:0 12px 28px rgba(160,70,140,.14); }
.feature-card--dark .feature-card__footer,
.feature-card--neutral .feature-card__body,
.feature-card--bright .feature-card__body { background:#fff; }
.sidebar { display:grid; gap:16px; }
.sidebar-card { padding:16px; }
.sidebar-card__heading h2 { font-size:1rem; }
.sidebar-card__period { color:#8490a5; font-size:.72rem; }
.new-badge { display:inline-block; margin-right:7px; padding:2px 5px; border-radius:5px; color:#0b4052; background:#bceeff; font-size:.55rem; font-weight:900; vertical-align:2px; }
.ranking-list { list-style:none; padding:0; margin:12px 0 0; }
.ranking-list li { display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:43px; border-top:1px solid rgba(95,126,164,.1); color:#33445f; font-size:.77rem; }
.ranking-list li:first-child { border-top:0; }
.ranking-list a { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ranking-list a:hover { color:#188fc9; }
.rank { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; color:#61708a; background:#edf2f8; font-weight:800; }
.rank--1{color:#5a3d00;background:#ffd66d}.rank--2{color:#49586c;background:#e3e9f1}.rank--3{color:#5a2d16;background:#dba079}
.mini-tag { padding:3px 6px; font-size:.56rem; }
.new-list { margin-top:10px; }
.new-list a { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:10px 0; border-top:1px solid rgba(95,126,164,.1); color:#33445f; font-size:.77rem; }
.new-list a:first-child { border-top:0; }
.new-list a:hover span { color:#188fc9; }
.new-list small { color:#8591a6; }

.home-page .site-footer { margin-top:70px; }

@media (max-width:1000px) {
  .hero__inner { grid-template-columns:1fr .8fr; }
  .featured-grid { grid-template-columns:1.45fr repeat(3,minmax(0,.7fr)); }
  .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:800px) {
  .hero { min-height:auto; }
  .hero__inner { grid-template-columns:1fr; min-height:auto; padding-block:52px 48px; }
  .hero__visual { min-height:270px; margin-top:8px; }
  .hero h1 { font-size:clamp(2.35rem,10vw,4rem); }
  .featured-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .feature-card--hero { grid-column:1/-1; }
  .feature-card--hero .feature-card__art { min-height:230px; }
  .content-grid { grid-template-columns:1fr; }
  .sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px) {
  .home-content { padding-top:20px; }
  .hero__inner { padding-block:42px 36px; }
  .hero__lead br { display:none; }
  .hero__actions { display:grid; grid-template-columns:1fr; }
  .cta { width:100%; }
  .hero__visual { min-height:220px; }
  .lounge-window { inset:0 1% 42px 1%; border-width:7px; border-radius:20px; }
  .lounge-desk { bottom:25px; }
  .lounge-console { bottom:35px; right:8%; }
  .featured-grid { grid-template-columns:1fr; }
  .feature-card--hero { grid-column:auto; }
  .feature-card__art { min-height:190px; }
  .feature-card--hero .feature-card__art { min-height:220px; }
  .ability-title strong { font-size:2.6rem; }
  .ability-emblem { font-size:10rem; }
  .category-chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .category-chips::-webkit-scrollbar { display:none; }
  .category-chip { flex:0 0 auto; }
  .panel--games { padding:14px; }
  .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .sidebar { grid-template-columns:1fr; }
}