@import url("/portfolio-base.css?v=20261103-gridfix");

/* Dots showcase underlay */
.showcase-card.dots-card{background:#07112a;color:#f8fafc;border-color:rgba(255,255,255,.09)}
.dots-grid-art{background:
radial-gradient(circle at 16% 28%,rgba(91,181,255,.98) 0 5px,rgba(91,181,255,.32) 6px 11px,transparent 12px),
radial-gradient(circle at 79% 25%,rgba(255,79,92,.98) 0 5px,rgba(255,79,92,.30) 6px 11px,transparent 12px),
radial-gradient(circle at 73% 72%,rgba(83,165,255,.96) 0 5px,rgba(83,165,255,.28) 6px 11px,transparent 12px),
radial-gradient(circle at 27% 73%,rgba(255,77,90,.96) 0 5px,rgba(255,77,90,.28) 6px 11px,transparent 12px),
repeating-linear-gradient(0deg,transparent 0 27px,rgba(78,142,230,.22) 27px 28px),
repeating-linear-gradient(90deg,transparent 0 27px,rgba(78,142,230,.22) 27px 28px),
linear-gradient(rgba(5,10,28,.02),rgba(5,10,28,.16)),
url("/assets/backgrounds/dots-underlay.webp") center/cover no-repeat;mask-image:none}
.game-art.dots-art{background:
radial-gradient(circle at 18% 25%,rgba(91,181,255,.96) 0 6px,rgba(91,181,255,.30) 7px 13px,transparent 14px),
radial-gradient(circle at 82% 27%,rgba(255,79,92,.96) 0 6px,rgba(255,79,92,.30) 7px 13px,transparent 14px),
radial-gradient(circle at 75% 73%,rgba(83,165,255,.94) 0 6px,rgba(83,165,255,.28) 7px 13px,transparent 14px),
radial-gradient(circle at 26% 76%,rgba(255,77,90,.94) 0 6px,rgba(255,77,90,.28) 7px 13px,transparent 14px),
repeating-linear-gradient(0deg,transparent 0 31px,rgba(78,142,230,.20) 31px 32px),
repeating-linear-gradient(90deg,transparent 0 31px,rgba(78,142,230,.20) 31px 32px),
linear-gradient(rgba(7,17,42,.04),rgba(7,17,42,.16)),
url("/assets/backgrounds/dots-underlay.webp") center/cover no-repeat;border-color:rgba(255,255,255,.09)}
.dots-art::before{content:none}

/* Real-screenshot gallery foundation. Empty slots are intentionally explicit rather than fake UI. */
.screenshot-gallery{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,280px);gap:1rem;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:inline proximity;padding:.25rem .1rem 1rem}
.screenshot-card,.screenshot-slot{scroll-snap-align:start;border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.screenshot-card img{display:block;width:100%;height:auto;background:var(--surface-2)}
.screenshot-card figcaption,.screenshot-slot{padding:1rem}
.screenshot-slot{min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,var(--surface),var(--surface-2));color:var(--muted)}
.screenshot-slot strong{display:block;color:var(--text);margin-bottom:.4rem}
.screenshot-note{max-width:760px;color:var(--muted)}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}
a.related-card{display:block;color:inherit;text-decoration:none}
a.related-card:hover{transform:translateY(-2px)}
a.related-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){a.related-card:hover{transform:none}}

/* Four released games use the same responsive geometry and visual alignment. */
.showcase-grid>.showcase-card{min-width:0;min-height:480px}
.showcase-grid>.showcase-card .showcase-visual{height:218px;min-height:218px;flex:0 0 218px}
.showcase-grid>.showcase-card .showcase-body{display:flex;flex:1;flex-direction:column;margin-top:0}
.showcase-grid>.showcase-card .showcase-foot{margin-top:auto;padding-top:18px}
.showcase-card.sea-card{background:#082c45;color:#f4fcff;border-color:rgba(120,218,233,.2)}
.sea-grid-art{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(64,223,232,.15),transparent 56%),repeating-linear-gradient(0deg,transparent 0 31px,rgba(90,177,199,.12) 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,rgba(90,177,199,.12) 31px 32px)}
.game-art.sea-battle-art{background:radial-gradient(circle at 50% 45%,rgba(64,223,232,.2),transparent 52%),repeating-linear-gradient(0deg,transparent 0 35px,rgba(90,177,199,.12) 35px 36px),repeating-linear-gradient(90deg,transparent 0 35px,rgba(90,177,199,.12) 35px 36px),#082c45;border-color:rgba(120,218,233,.2)}
.game-art.sea-battle-art::before{content:none}
@media (max-width:720px){.showcase-grid>.showcase-card{min-height:380px}.showcase-grid>.showcase-card .showcase-visual{height:190px;min-height:190px;flex-basis:190px}}

/* CopyFix product page: approved native icon, no fabricated product screenshots. */
.game-art.copyfix-art{background:radial-gradient(circle at 50% 42%,rgba(87,219,148,.25),transparent 39%),radial-gradient(circle at 24% 24%,rgba(46,177,255,.2),transparent 38%),linear-gradient(145deg,#051e45,#0b4da8);border-color:rgba(35,151,243,.34)}
.copyfix-art .art-center::before{content:"";position:absolute;width:270px;height:270px;border:1px solid rgba(145,214,255,.22);border-radius:50%;box-shadow:0 0 0 45px rgba(56,189,248,.05),0 0 0 90px rgba(37,211,132,.035)}
.copyfix-art .art-center img{width:144px;height:144px;border-radius:31px;object-fit:cover}
.copyfix-release-note{max-width:730px;margin:16px 0 0;padding:12px 15px;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;background:var(--accent-soft);font-size:13px;line-height:1.55;color:var(--muted)}