/* KixGames 1.5.0 — collection and game information pages. */
.kix-site {overflow-wrap:break-word}
.kix-site .shell {max-width:1280px;width:calc(100% - 80px)}
.kix-site .site-top {position:sticky;top:0;z-index:30;background:#080b16e8;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.kix-site .site-header {height:80px;border:0}
.kix-site .site-header nav {gap:28px;font-size:13px}
.kix-site .wordmark {font-size:29px}
.kix-site .nav-account {max-width:250px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.collection-hero {display:grid;grid-template-columns:1fr 1.1fr;gap:54px;align-items:center;padding:38px 0 42px}
.collection-hero .eyebrow {margin-bottom:13px;font-size:10px}
.collection-hero h1 {font-size:clamp(36px,3.6vw,49px);line-height:1.06;letter-spacing:-2px;margin:0 0 15px;font-weight:760}
.collection-hero-copy>p:not(.eyebrow) {margin:0 0 20px;color:var(--muted);font-size:15px}
.collection-hero .hero-notes {margin-top:16px;font-size:10px;flex-direction:row;gap:18px;flex-wrap:wrap}
.collection-feature {position:relative;display:block;height:280px;overflow:hidden;border:1px solid #ffffff20;border-radius:17px;background:var(--panel);box-shadow:0 20px 60px #0005}
.collection-feature>img {display:block;width:100%;height:100%;object-fit:cover}
.collection-feature .feature-label {inset:auto 23px 20px;gap:5px}
.collection-feature .feature-label strong {font-size:25px}
.collection-feature .feature-shade {background:linear-gradient(0deg,#070b15f2,transparent 72%)}
.collection-section {padding:8px 0 42px;scroll-margin-top:100px}
.collection-toolbar {display:flex;align-items:center;justify-content:space-between;gap:24px}
.collection-toolbar .eyebrow {margin-bottom:5px;font-size:9px}
.collection-toolbar h2 {margin:0;font-size:30px;line-height:1.2;letter-spacing:-.9px}
.game-search {position:relative;display:flex;align-items:center;gap:9px;max-width:390px;width:38%;height:48px;padding:0 8px 0 15px;border:1px solid #ffffff22;border-radius:10px;background:#111726}
.game-search:focus-within {border-color:var(--cyan);box-shadow:0 0 0 3px #71e8e215}
.game-search>svg {flex:0 0 20px;width:20px;height:20px;stroke:#91a1bd;stroke-width:1.6;stroke-linecap:round}
.game-search input {margin:0;padding:0;border:0;background:none;box-shadow:none;outline:0;font-size:13px;min-width:0;height:44px}
.game-search input:focus {box-shadow:none}
.game-search input::-webkit-search-cancel-button {display:none}
.game-search button {border:0;flex:0 0 36px;height:36px;border-radius:6px;background:#ffffff08;color:var(--muted);padding:0}
.game-search button:hover {background:#ffffff15;color:var(--text)}
#clear-search {font-size:24px;line-height:1}
.search-submit {font-size:11px;font-weight:700}
.collection-results {font-size:11px;color:var(--muted);margin:16px 0 19px;letter-spacing:.2px}
.collection-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.game-tile {min-width:0;overflow:hidden;border:1px solid #ffffff15;border-radius:12px;background:linear-gradient(140deg,#151b2d,#101522);transition:border-color .18s,box-shadow .18s}
.game-tile:hover {border-color:#71e8e25a;box-shadow:0 8px 25px #0003}
.tile-image {display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#111726}
.tile-image img {display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.game-tile:hover .tile-image img {transform:scale(1.035)}
.tile-body {padding:13px 13px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:70px}
.tile-body h3 {font-size:14px;line-height:1.35;letter-spacing:-.2px;margin:0;font-weight:650;min-width:0}
.tile-body h3 a {display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.tile-body h3 a:hover {color:var(--cyan)}
.tile-play {display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:4px;min-width:66px;min-height:44px;padding:8px 10px;border-radius:7px;border:1px solid #71e8e22b;background:#71e8e211;color:var(--cyan);font-size:11px;font-weight:750;white-space:nowrap}
.tile-play svg,.play-now svg {width:16px;height:16px;fill:currentColor}
.tile-play:hover {background:var(--cyan);color:#092021}
.empty-search {padding:52px 25px;text-align:center;border:1px dashed #ffffff25;border-radius:12px;background:#11172666}
.empty-search>span {font-size:44px;color:var(--cyan)}
.empty-search h3 {font-size:24px;margin:4px 0 8px}
.empty-search p {font-size:13px;color:var(--muted);margin:0 0 22px}
.kix-site .account-banner {padding:26px;margin-bottom:42px}
.kix-site .site-footer {margin-top:0}
.detail-main {padding-top:22px}
.detail-nav {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.breadcrumbs {display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:11px;color:var(--muted);min-width:0}
.breadcrumbs a:hover {color:var(--cyan)}
.breadcrumbs [aria-current] {color:#d3dbed}
.detail-nav .kix-return {flex-shrink:0}
.detail-hero {position:relative;min-height:400px;isolation:isolate;border:1px solid #ffffff20;border-radius:17px;overflow:hidden;background:#111726;display:flex;align-items:center}
.detail-banner {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.detail-hero-shade {position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0d1220f7 0%,#0d1220e8 32%,#0d122079 62%,#0d122021),linear-gradient(0deg,#0d1220a1,transparent 55%)}
.detail-hero-content {max-width:660px;padding:42px}
.detail-hero-content .eyebrow {margin-bottom:13px;font-size:10px;color:#9af8ee;text-shadow:0 1px 5px #000}
.detail-hero h1 {font-size:clamp(32px,3.7vw,52px);line-height:1.06;letter-spacing:-1.8px;margin:0 0 17px;font-weight:760;text-wrap:balance}
.detail-intro {max-width:500px;font-size:15px;line-height:1.75;color:#d1d9ec;margin:0 0 24px;text-shadow:0 1px 6px #0007}
.detail-hero-actions {display:flex;gap:12px;flex-wrap:wrap}
.detail-hero-actions .secondary {background:#0c162cbf;backdrop-filter:blur(6px)}
.detail-tags {display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.detail-tags span {font-size:10px;border:1px solid #ffffff24;background:#0d152cbf;color:#d8e0ee;padding:5px 9px;border-radius:5px}
.detail-tabs {display:flex;gap:30px;border-bottom:1px solid var(--line);margin-bottom:36px;padding:22px 0 19px;font-size:12px;font-weight:650;color:var(--muted)}
.detail-tabs a:hover {color:var(--cyan)}
.detail-layout {display:grid;grid-template-columns:minmax(0,1fr) 345px;gap:44px}
.detail-section,.how-to-play {scroll-margin-top:104px}
.detail-section {margin-bottom:38px}
.detail-section>.eyebrow,.how-to-play>.eyebrow {font-size:9px;margin-bottom:9px}
.detail-section h2,.how-to-play h2 {font-size:25px;line-height:1.2;letter-spacing:-.6px;margin:0 0 17px}
.detail-section>p,.how-to-play>p {font-size:14px;line-height:1.85;color:var(--muted);margin:0 0 19px}
.game-tip {display:flex;align-items:flex-start;gap:13px;border-left:2px solid #71e8e272;border-radius:0 8px 8px 0;background:#71e8e209;padding:14px 17px}
.game-tip>span {color:var(--cyan);font-size:19px}
.game-tip p {margin:0;color:#b7c6db;font-size:12px;line-height:1.8}
.how-to-play {padding:24px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(140deg,#151b2d,#101522)}
.how-to-play>p {font-size:12px;line-height:1.85}
.how-to-play h3 {font-size:13px;color:#dfe5f1;margin:24px 0 11px}
.control-list {margin:0}
.control-list>div {border-top:1px solid var(--line);padding:12px 0}
.control-list>div:last-child {padding-bottom:0}
.control-list dt {font-size:11px;color:var(--cyan);font-weight:700;margin-bottom:5px}
.control-list dd {font-size:12px;color:var(--muted);line-height:1.7;margin:0}
.save-info {padding:22px 24px;border:1px solid #b096ff25;border-radius:12px;background:#b096ff08;margin-top:18px}
.save-info>svg {width:23px;height:23px;stroke:var(--violet);stroke-width:1.5;stroke-linejoin:round}
.save-info h3 {font-size:16px;margin:9px 0}
.save-info p {font-size:12px;color:var(--muted);line-height:1.75;margin:0 0 14px}
.save-info a {font-size:11px;color:var(--cyan)}
.save-info a:hover {text-decoration:underline}
.media-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.media-heading h2 {margin:0}
.media-heading>span {color:var(--muted);font-size:10px;white-space:nowrap}
.screenshot-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.single-screenshot {grid-template-columns:1fr}
.screenshot-grid figure {margin:0;min-width:0}
.screenshot-link {position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border:1px solid #ffffff20;border-radius:10px;background:#060a12}
.screenshot-link img {display:block;width:100%;height:100%;object-fit:contain}
.screenshot-link:hover {border-color:var(--cyan)}
.screenshot-expand {position:absolute;bottom:8px;right:8px;display:grid;place-items:center;width:30px;height:30px;border-radius:6px;background:#0d162bdd;color:var(--cyan);border:1px solid #ffffff22}
.screenshot-grid figcaption {font-size:10px;color:var(--muted);margin:8px 1px 0}
.detail-bottom {display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid #71e8e222;background:linear-gradient(100deg,#1e1a343c,#102d2c44);border-radius:13px;padding:28px;margin:10px 0 44px}
.detail-bottom h2 {font-size:25px;letter-spacing:-.6px;margin:0 0 5px}
.detail-bottom p {font-size:12px;color:var(--muted);margin:0}
.detail-bottom .button {text-align:left;max-width:100%}
.game-not-found {min-height:55vh;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;padding:60px 0}
.game-not-found h1 {font-size:42px;letter-spacing:-1.5px;margin:0}
.game-not-found>p:not(.eyebrow) {color:var(--muted);margin-bottom:24px}
.screenshot-dialog {width:min(1200px,96vw);max-width:96vw;max-height:94dvh;padding:16px;border:1px solid #ffffff30;border-radius:13px;background:#0c1120;color:var(--text);box-shadow:0 24px 120px #000b}
.screenshot-dialog::backdrop {background:#030611e8;backdrop-filter:blur(7px)}
.screenshot-dialog-top {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.screenshot-dialog-top p {font-size:13px;line-height:1.4;margin:0}
.screenshot-dialog button {min-width:44px;min-height:44px;border:1px solid #ffffff20;border-radius:7px;color:var(--text);background:#ffffff08;font-size:20px;flex-shrink:0}
.screenshot-dialog button:hover {background:#71e8e21a;border-color:var(--cyan)}
#screenshot-large {display:block;width:100%;max-height:calc(94dvh - 142px);object-fit:contain;background:#060912}
.screenshot-dialog-actions {display:flex;align-items:center;justify-content:center;gap:20px;margin-top:12px}
#screenshot-position {color:var(--muted);font-size:11px;min-width:50px;text-align:center}
body.screenshot-open {overflow:hidden}
@media(min-width:1500px){.kix-site .shell{max-width:1360px}.collection-feature{height:300px}.collection-hero h1{font-size:53px}.collection-grid{gap:22px}.tile-body h3{font-size:15px}}
@media(max-width:1100px){.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.collection-hero{gap:30px}.detail-layout{grid-template-columns:minmax(0,1fr) 310px;gap:28px}.detail-hero-content{padding:34px;max-width:600px}}
@media(max-width:760px){.kix-site .shell{width:calc(100% - 36px)}.kix-site .site-header{height:72px}.kix-site .wordmark{font-size:26px}.kix-site .site-header nav{gap:15px;font-size:12px}.kix-site .nav-account{padding:9px 12px;max-width:155px}.kix-site .nav-account span{margin-left:8px}.collection-hero{grid-template-columns:1fr;gap:25px;padding:30px 0}.collection-hero h1{font-size:44px}.collection-feature{height:220px}.collection-hero .hero-notes{font-size:10px}.collection-toolbar{align-items:flex-start;flex-direction:column;gap:17px}.collection-toolbar h2{font-size:27px}.game-search{width:100%;max-width:none}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.collection-results{margin-top:13px}.tile-body{padding:10px;min-height:90px;flex-direction:column;align-items:stretch;gap:7px}.tile-body h3{font-size:12px;min-height:32px}.tile-play{min-height:44px;font-size:12px}.collection-section{padding-bottom:30px}.kix-site .account-banner{padding:23px;margin-bottom:30px}.detail-nav{align-items:flex-start;flex-wrap:wrap;gap:14px;margin-bottom:16px}.breadcrumbs{width:100%;font-size:10px}.detail-hero{min-height:440px}.detail-hero-content{padding:26px;max-width:100%}.detail-hero h1{font-size:36px;letter-spacing:-1.2px}.detail-intro{font-size:13px;line-height:1.75}.detail-hero-shade{background:linear-gradient(0deg,#0d1220fa 8%,#0d1220dd 60%,#0d122070)}.detail-banner{object-position:65% center}.detail-hero-actions{gap:10px}.detail-hero-actions .button{font-size:12px;padding:12px 17px;gap:17px}.detail-tags{margin-top:20px;gap:6px}.detail-tags span{font-size:9px}.detail-tabs{gap:21px;padding:19px 0 16px;font-size:11px;margin-bottom:27px}.detail-layout{display:flex;flex-direction:column;gap:0}.detail-copy{display:contents}.detail-sidebar{display:contents}#about-game{order:0}#how-to-play{order:1;margin-bottom:27px}.screenshot-section{order:2}.save-info{order:3;margin-top:0;margin-bottom:25px}.detail-section h2,.how-to-play h2{font-size:23px}.detail-section>p{font-size:13px}.screenshot-grid{gap:12px}.media-heading>span{font-size:9px}.detail-bottom{flex-direction:column;align-items:stretch;padding:23px;margin:5px 0 30px;gap:18px}.detail-bottom .button{font-size:12px}.screenshot-dialog{padding:10px;max-height:96dvh}.screenshot-dialog-top p{font-size:11px}#screenshot-large{max-height:calc(96dvh - 135px)}.game-not-found h1{font-size:34px}}
@media(max-width:390px){.kix-site .site-header nav{gap:10px}.kix-site .wordmark{font-size:23px;letter-spacing:-1.4px}.kix-site .nav-account{max-width:110px}.collection-hero h1{font-size:40px}.collection-grid{gap:10px}.tile-body{padding:9px}.detail-hero-content{padding:22px}.detail-hero h1{font-size:32px}.detail-tabs{gap:17px}.screenshot-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.game-tile,.tile-image img{transition:none}}
