:root {
  color-scheme: dark;
}

.home-v2 {
  --home-bg: #0b1020;
  --home-panel: #121a2d;
  --home-panel-2: #18233a;
  --home-line: rgba(255,255,255,.09);
  --home-text: #f8fafc;
  --home-muted: #aab5ca;
  --home-blue: #8eb2ff;
  --home-green: #70e1a1;
  --max-width: 1320px;
  margin: 0;
  background:
    radial-gradient(circle at 15% -15%, rgba(88, 99, 255, .18), transparent 34rem),
    radial-gradient(circle at 90% 8%, rgba(34, 211, 170, .10), transparent 28rem),
    var(--home-bg);
  color: var(--home-text);
}

.home-v2 * { box-sizing: border-box; }
.home-v2 a { color: inherit; }
.home-v2 button,.home-v2 input { font: inherit; }
.home-v2 [hidden] { display: none !important; }
.home-v2 .container { width: min(calc(100% - 2rem), var(--max-width)); margin-inline: auto; }
.home-v2 section[id] { scroll-margin-top: 104px; }

.game-header {
  position: relative;
  z-index: 30;
  border-bottom: 1px solid var(--home-line);
  background: rgba(11,16,32,.96);
}
.header-main {
  min-height: 76px;
  display: grid;
  grid-template-columns: auto minmax(260px, 560px) auto;
  align-items: center;
  gap: 1rem;
}
.header-brand { white-space: nowrap; }
.header-search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.header-search svg {
  position: absolute;
  left: .9rem;
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: #8f9bb0;
  stroke-width: 2;
  pointer-events: none;
}
.header-search input {
  width: 100%;
  height: 44px;
  padding: 0 1rem 0 2.7rem;
  border: 1px solid #2b3852;
  border-radius: .8rem;
  background: #111827;
  color: #fff;
  outline: none;
}
.header-search input:focus {
  border-color: var(--home-blue);
  box-shadow: 0 0 0 3px rgba(142,178,255,.16);
}
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .2rem;
}
.header-actions a,.header-actions button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: .55rem .72rem;
  border: 0;
  border-radius: .65rem;
  background: transparent;
  color: var(--home-muted);
  text-decoration: none;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
.header-actions a:hover,.header-actions a:focus-visible,.header-actions button:hover,.header-actions button:focus-visible {
  background: rgba(255,255,255,.07);
  color: #fff;
}
.header-actions button {
  margin-left: .25rem;
  background: var(--home-green);
  color: #06130b;
}
.header-actions button:hover { background: #8cebb5; color: #06130b; }

.genre-bar {
  border-top: 1px solid rgba(255,255,255,.055);
  background: rgba(8,13,26,.86);
}
.genre-list {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .45rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.genre-list::-webkit-scrollbar { display: none; }
.genre-list button {
  flex: 0 0 auto;
  padding: .38rem .65rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #99a6bc;
  cursor: pointer;
  font-weight: 700;
  font-size: .86rem;
}
.genre-list button:hover,.genre-list button:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.07);
}

.featured {
  padding-top: 2.1rem;
  padding-bottom: 2rem;
}
.section-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  margin-bottom: 1.15rem;
}
.section-title > div { min-width: 0; }
.section-title h1,.section-title h2 {
  margin: 0;
  letter-spacing: -.04em;
  line-height: 1.02;
}
.section-title h1 { font-size: clamp(2.25rem,5vw,4.5rem); }
.section-title h2 { font-size: clamp(1.65rem,3.3vw,2.5rem); }
.section-title > p {
  max-width: 520px;
  margin: 0;
  color: var(--home-muted);
  line-height: 1.55;
}
.section-title > a {
  color: #b8caff;
  text-decoration: none;
  font-weight: 850;
  white-space: nowrap;
}
.overline {
  margin: 0 0 .35rem;
  color: var(--home-green);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(300px, .8fr);
  gap: 1rem;
}
.featured-side {
  min-width: 0;
  display: grid;
  grid-template-rows: repeat(2, minmax(0,1fr));
  gap: 1rem;
}
.featured-card {
  min-width: 0;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--home-line);
  border-radius: 1.2rem;
  background: var(--home-panel);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 16px 42px rgba(0,0,0,.18);
  transition: transform .17s ease, border-color .17s ease, box-shadow .17s ease;
}
.featured-card:hover,.featured-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(142,178,255,.5);
  box-shadow: 0 22px 54px rgba(0,0,0,.25);
}
.featured-primary {
  grid-template-columns: minmax(0,1.35fr) minmax(280px,.75fr);
  min-height: 430px;
}
.featured-small {
  grid-template-columns: minmax(150px,.8fr) minmax(0,1fr);
  min-height: 207px;
}
.featured-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.1rem,2.2vw,2rem);
}
.featured-copy > span {
  color: var(--home-green);
  font-size: .78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.featured-copy h2 {
  margin: .45rem 0 .55rem;
  font-size: clamp(1.45rem,3vw,2.7rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.featured-small .featured-copy h2 { font-size: clamp(1.25rem,2vw,1.8rem); }
.featured-copy p {
  margin: 0;
  color: var(--home-muted);
  line-height: 1.6;
}
.featured-copy b {
  margin-top: 1rem;
  color: #c8d5ff;
  font-size: .92rem;
}

.cover {
  position: relative;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(145deg,var(--cover-a,#334155),var(--cover-b,#111827));
}
.cover::before,.cover::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.cover::before {
  width: 270px;
  height: 270px;
  right: -80px;
  top: -110px;
  background: rgba(255,255,255,.13);
}
.cover::after {
  width: 190px;
  height: 190px;
  left: -80px;
  bottom: -100px;
  border: 1px solid rgba(255,255,255,.14);
}
.cover-badge,.tile-badge {
  position: absolute;
  top: .8rem;
  left: .8rem;
  z-index: 3;
  padding: .3rem .52rem;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: .42rem;
  background: rgba(5,9,17,.5);
  color: #fff;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cover-daily { --cover-a:#7c3aed; --cover-b:#24164f; }
.cover-stack { --cover-a:#ff826a; --cover-b:#5a255e; }
.cover-parking { --cover-a:#18c8a7; --cover-b:#12345d; }
.cover-2048 { --cover-a:#f59e0b; --cover-b:#8a3517; }
.cover-snake { --cover-a:#55d984; --cover-b:#14532d; }
.cover-memory { --cover-a:#67a8ff; --cover-b:#312e81; }
.cover-click { --cover-a:#fb7185; --cover-b:#7f1d1d; }
.cover-circle { --cover-a:#22d3ee; --cover-b:#155e75; }
.cover-gomoku { --cover-a:#e8c784; --cover-b:#6e4a28; }

.shape-orbit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.shape-orbit i:first-child {
  width: min(42%,190px);
  aspect-ratio: 1;
  border: 14px solid rgba(255,255,255,.88);
  border-radius: 50%;
}
.shape-orbit i:last-child {
  position: absolute;
  width: min(21%,92px);
  aspect-ratio: 1;
  border: 9px solid var(--home-green);
  transform: translate(90%, -62%) rotate(45deg);
}
.cover-daily > strong {
  position: absolute;
  left: 1.25rem;
  bottom: 1.1rem;
  z-index: 2;
  font-size: clamp(1rem,2vw,1.35rem);
}
.tower-art {
  position: absolute;
  inset: 13% 13%;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.tower-art i {
  display: block;
  height: 11%;
  min-height: 16px;
  border-radius: 7px;
  background: #fff1e6;
  box-shadow: 0 8px 17px rgba(52,20,35,.22);
}
.tower-art i:nth-child(1){width:82%}
.tower-art i:nth-child(2){width:69%}
.tower-art i:nth-child(3){width:58%}
.tower-art i:nth-child(4){width:45%}
.tower-art i:nth-child(5){width:32%}
.parking-art { position: absolute; inset: 0; }
.parking-art .car {
  position: absolute;
  z-index: 2;
  left: 14%;
  bottom: 21%;
  color: #ffd067;
  font-size: clamp(2.4rem,5vw,4.6rem);
  transform: rotate(-8deg);
}
.parking-art .route {
  position: absolute;
  left: 26%;
  right: 24%;
  top: 48%;
  height: 34%;
  border-top: 8px dashed rgba(255,255,255,.84);
  border-right: 8px dashed rgba(255,255,255,.84);
  border-radius: 0 80px 0 0;
  transform: rotate(-8deg);
}
.parking-art .parking {
  position: absolute;
  right: 13%;
  top: 20%;
  width: 76px;
  height: 90px;
  display: grid;
  place-items: center;
  border: 8px solid var(--home-green);
  border-radius: 8px;
  color: var(--home-green);
  font-size: 2.7rem;
  font-weight: 950;
}

.game-section,.recent-section,.catalogue-section {
  padding: 2.5rem 0 2.8rem;
}
.section-soft {
  border-top: 1px solid rgba(255,255,255,.045);
  border-bottom: 1px solid rgba(255,255,255,.045);
  background: rgba(16,23,40,.48);
}
.tile-grid {
  display: grid;
  gap: 1rem;
}
.tile-grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.tile-grid-4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.game-tile {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--home-line);
  border-radius: 1rem;
  background: var(--home-panel);
  color: #fff;
  text-decoration: none;
  transition: transform .17s ease,border-color .17s ease;
}
.game-tile:hover,.game-tile:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(142,178,255,.5);
}
.tile-cover { aspect-ratio: 16/9; }
.tile-copy { padding: .9rem 1rem 1rem; }
.tile-copy h3 { margin: 0; font-size: 1.08rem; line-height: 1.25; }
.tile-copy p { margin: .35rem 0 0; min-height: 2.8em; color: var(--home-muted); font-size: .88rem; line-height: 1.45; }
.tile-copy span { display: block; margin-top: .75rem; color: #b9caff; font-size: .86rem; font-weight: 850; }
.game-tile.compact .tile-copy p { min-height: 0; }
.number-art {
  position: absolute;
  inset: 17% 16%;
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 8px;
}
.number-art i {
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,248,230,.9);
  color: #7c2d12;
  font-style: normal;
  font-weight: 950;
}
.number-art i:last-child { background:#fdba74; font-size: .88rem; }
.snake-art { position:absolute; inset:0; }
.snake-art i {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #dcfce7;
}
.snake-art i:nth-child(1){left:22%;top:62%}
.snake-art i:nth-child(2){left:34%;top:62%}
.snake-art i:nth-child(3){left:46%;top:62%}
.snake-art i:nth-child(4){left:46%;top:40%}
.snake-art b {
  position:absolute;
  right:22%;
  top:30%;
  width:25px;
  height:25px;
  border-radius:50%;
  background:#fb7185;
}
.memory-art {
  position:absolute;
  inset:17%;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;
}
.memory-art i {
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(255,255,255,.84);
  color:#312e81;
  font-style:normal;
  font-size:1.35rem;
  font-weight:900;
}
.memory-art i:nth-child(even){background:rgba(255,255,255,.35);color:#fff}
.click-art,.circle-art {
  position:absolute;
  inset:0;
  display:grid;
  place-content:center;
  text-align:center;
}
.click-art strong { font-size:clamp(2.8rem,6vw,5rem); line-height:.9; }
.click-art span { margin-top:.25rem; font-weight:900; letter-spacing:.17em; }
.circle-art {
  width:54%;
  aspect-ratio:1;
  inset:50% auto auto 50%;
  transform:translate(-50%,-50%);
  border:10px solid rgba(255,255,255,.88);
  border-radius:50%;
}
.circle-art strong { font-size:clamp(1.25rem,3vw,2.2rem); }
.gomoku-art {
  position:absolute;
  inset:14%;
  background:
    repeating-linear-gradient(0deg,transparent 0 calc(25% - 1px),rgba(70,38,15,.45) calc(25% - 1px) 25%),
    repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(70,38,15,.45) calc(25% - 1px) 25%);
}
.gomoku-art i {
  position:absolute;
  width:16%;
  aspect-ratio:1;
  border-radius:50%;
  box-shadow:0 4px 10px rgba(0,0,0,.22);
}
.gomoku-art i:nth-child(1){left:18%;top:18%;background:#1f2937}
.gomoku-art i:nth-child(2){left:39%;top:39%;background:#1f2937}
.gomoku-art i:nth-child(3){left:60%;top:60%;background:#1f2937}
.gomoku-art i:nth-child(4){left:60%;top:18%;background:#fff7ed}
.gomoku-art i:nth-child(5){left:39%;top:60%;background:#fff7ed}

.catalogue-title { align-items:center; }
.catalogue-title > p { font-weight:800; }
.filter-row {
  display:flex;
  gap:.5rem;
  overflow-x:auto;
  padding-bottom:1rem;
  scrollbar-width:none;
}
.filter-row::-webkit-scrollbar { display:none; }
.filter-row button {
  flex:0 0 auto;
  padding:.48rem .78rem;
  border:1px solid #2b3852;
  border-radius:999px;
  background:transparent;
  color:var(--home-muted);
  cursor:pointer;
}
.filter-row button.active {
  border-color:var(--home-blue);
  background:rgba(142,178,255,.13);
  color:#fff;
}
.catalogue-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.85rem;
}
.catalogue-card {
  min-width:0;
  display:grid;
  grid-template-columns:106px minmax(0,1fr);
  align-items:center;
  overflow:hidden;
  border:1px solid var(--home-line);
  border-radius:.9rem;
  background:rgba(18,26,45,.92);
  color:#fff;
  text-decoration:none;
}
.catalogue-card:hover,.catalogue-card:focus-visible { border-color:rgba(142,178,255,.5); }
.catalogue-cover { min-height:82px; height:100%; }
.catalogue-card > div:last-child { min-width:0; padding:.75rem; }
.catalogue-card h3 { margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.96rem; }
.catalogue-card p { margin:.2rem 0 0; color:var(--home-muted); font-size:.78rem; }
.no-results { padding:2rem; border:1px dashed #2b3852; border-radius:1rem; color:var(--home-muted); text-align:center; }

.guides-section {
  padding:3rem 0 3.4rem;
  border-top:1px solid rgba(255,255,255,.05);
  background:rgba(7,11,20,.55);
}
.guide-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.guide-card {
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:1rem;
  border:1px solid var(--home-line);
  border-radius:1rem;
  background:var(--home-panel);
  color:#fff;
  text-decoration:none;
  transition:transform .17s ease,border-color .17s ease;
}
.guide-card:hover,.guide-card:focus-visible { transform:translateY(-3px); border-color:rgba(196,181,253,.48); }
.guide-type {
  width:fit-content;
  padding:.3rem .52rem;
  border-radius:.42rem;
  background:rgba(196,181,253,.12);
  color:#ddd6fe;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.guide-art {
  height:125px;
  margin:.75rem 0 .8rem;
  overflow:hidden;
  border-radius:.75rem;
}
.guide-card h3 { margin:0; font-size:1.02rem; line-height:1.35; }
.guide-card p { margin:.38rem 0 0; color:var(--home-muted); font-size:.86rem; line-height:1.48; }
.guide-terminal {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.35rem;
  padding:1rem;
  background:#07130f;
  color:var(--home-green);
  font:700 .7rem ui-monospace,SFMono-Regular,Menlo,monospace;
}
.guide-codes {
  display:grid;
  place-content:center;
  gap:.32rem;
  background:linear-gradient(135deg,#3d1b65,#111827);
}
.guide-codes i {
  padding:.28rem .48rem;
  border:1px solid rgba(255,255,255,.17);
  border-radius:.35rem;
  color:#ede9fe;
  font:800 .7rem ui-monospace,monospace;
}
.guide-stack {
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:linear-gradient(145deg,#ff826a,#5a255e);
}
.guide-stack i { display:block; height:18px; border-radius:4px; background:#fff1e6; }
.guide-stack i:nth-child(1){width:76%}.guide-stack i:nth-child(2){width:63%}.guide-stack i:nth-child(3){width:50%}.guide-stack i:nth-child(4){width:37%}
.guide-wave {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  background:linear-gradient(135deg,#f472b6,#312e81);
}
.guide-wave i { width:8px; border-radius:999px; background:#fff; }
.guide-wave i:nth-child(1),.guide-wave i:nth-child(7){height:25%}
.guide-wave i:nth-child(2),.guide-wave i:nth-child(6){height:45%}
.guide-wave i:nth-child(3),.guide-wave i:nth-child(5){height:70%}
.guide-wave i:nth-child(4){height:88%}

.promise-strip {
  border-top:1px solid rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.055);
  background:rgba(18,26,45,.7);
}
.promise-inner {
  min-height:76px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.55rem 1.35rem;
  color:var(--home-muted);
  font-size:.88rem;
}
.promise-inner strong { color:#fff; font-size:1rem; }
.promise-inner span::before { content:"✓"; margin-right:.4rem; color:var(--home-green); font-weight:950; }
.home-footer nav { display:flex; gap:.85rem; }
.home-footer a { color:var(--home-muted); text-decoration:none; }

@media (min-width: 960px) {
  .game-header { position:sticky; top:0; }
}

@media (max-width: 1080px) {
  .header-main { grid-template-columns:auto 1fr; padding:.75rem 0; }
  .header-search { grid-column:1/-1; grid-row:2; }
  .header-actions { grid-column:2; grid-row:1; }
  .featured-grid { grid-template-columns:1fr; }
  .featured-side { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto; }
  .featured-primary { min-height:360px; }
  .featured-small { min-height:220px; }
  .tile-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .catalogue-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .home-v2 .container { width:min(calc(100% - 1.1rem),var(--max-width)); }
  .header-main { display:flex; flex-wrap:wrap; gap:.6rem; padding:.65rem 0; }
  .header-brand { order:1; }
  .header-actions { order:2; margin-left:auto; }
  .header-actions a { display:none; }
  .header-actions button { margin:0; min-height:38px; padding:.5rem .65rem; }
  .header-search { order:3; flex:0 0 100%; }
  .genre-list { min-height:42px; }
  .featured { padding-top:1.35rem; }
  .section-title { align-items:flex-start; flex-direction:column; gap:.45rem; }
  .section-title h1 { font-size:clamp(2.25rem,11vw,3.3rem); }
  .section-title > p { font-size:.92rem; }
  .featured-primary { grid-template-columns:1fr; min-height:0; }
  .featured-primary > .cover { min-height:270px; }
  .featured-side { grid-template-columns:1fr 1fr; }
  .featured-small { display:block; min-height:0; }
  .featured-small > .cover { min-height:170px; }
  .featured-small .featured-copy { padding:1rem; }
  .featured-small .featured-copy h2 { font-size:1.25rem; }
  .featured-small .featured-copy > span { font-size:.67rem; }
  .featured-small .featured-copy b { margin-top:.55rem; font-size:.8rem; }
  .tile-grid-3 { grid-template-columns:1fr; }
  .tile-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
  .game-section,.recent-section,.catalogue-section { padding:2rem 0; }
  .tile-copy { padding:.75rem; }
  .tile-copy p { min-height:0; }
  .catalogue-grid { grid-template-columns:1fr; }
  .guide-grid { grid-template-columns:1fr 1fr; gap:.7rem; }
}

@media (max-width: 500px) {
  .featured-side { grid-template-columns:1fr; }
  .featured-small { display:grid; grid-template-columns:130px minmax(0,1fr); }
  .featured-small > .cover { min-height:145px; }
  .tile-grid-4 { grid-template-columns:1fr 1fr; }
  .tile-cover { aspect-ratio:4/3; }
  .tile-copy h3 { font-size:.94rem; }
  .tile-copy p { display:none; }
  .tile-copy span { font-size:.78rem; }
  .guide-grid { grid-template-columns:1fr; }
  .promise-inner { padding:1rem 0; flex-direction:column; align-items:flex-start; gap:.35rem; }
}