/* Gallery-only additions. Existing themes, layout and typography stay in baseline CSS. */
html:not([data-theme="valheim"]) .ng-gallery { display:none; }
.ng-gallery { position:relative; margin-top:60px; padding-top:38px; margin-bottom:48px; scroll-margin-top:24px; }
.ng-gallery::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,#a9d4ff66,#82b7ff25 55%,transparent); pointer-events:none; }
.ng-gallery-heading { align-items:center; }
.ng-gallery .section-heading h2 { font-family:inherit; }
.ng-gallery-demo { color:var(--muted); font-size:10px; line-height:1.6; }
.ng-gallery-intro { color:var(--muted); font-size:14px; line-height:1.75; max-width:640px; text-wrap:pretty; }
.ng-gallery-hint { color:var(--muted); font-size:12px; margin-top:9px; }
.ng-gallery-filters { display:flex; flex-wrap:wrap; gap:8px; margin:23px 0 18px; }
.ng-gallery-filters button { min-height:44px; padding:9px 16px; font-size:12px; border-radius:9px; background:rgba(18,38,64,.75); border:1px solid #bddbff33; color:var(--muted); box-shadow:inset 0 1px #d7edff0c; }
.ng-gallery-filters button:hover { background:#2a4667; color:var(--ink); }
.ng-gallery-filters button[aria-pressed="true"] { background:linear-gradient(135deg,#94c7f225,#4f80c51a 60%),rgba(26,49,80,.9); color:var(--ink); border-color:#9bc6f380; box-shadow:inset 0 1px #dcf5ff40,inset 0 -2px #85bdf05c; }
.ng-gallery-collections { margin-top:28px; }
.ng-gallery-collection + .ng-gallery-collection { margin-top:30px; padding-top:26px; border-top:1px solid #8bbdff1c; }
.ng-gallery-collection-head { display:flex; align-items:center; gap:12px; margin-bottom:15px; flex-wrap:wrap; }
.ng-gallery-collection-head h3 { font:600 17px/1.4 'Segoe UI',Arial,sans-serif; letter-spacing:-.3px; }
.ng-gallery-collection-count { color:var(--muted); font-size:11px; }
.ng-gallery-more { margin-left:auto; min-height:44px; padding:8px 0 8px 14px; background:transparent; border:0; color:#c8def7; font-size:12px; }
.ng-gallery-more:hover { background:transparent; color:#fff; text-decoration:underline; text-underline-offset:5px; }
.ng-gallery-collection-empty { font-size:12px; color:var(--muted); }
.ng-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
/* V5.2 shell: same optical rim, dark body and bottom light as the existing city surfaces. */
.ng-gallery-card { position:relative; isolation:isolate; min-width:0; overflow:hidden; border:1px solid #688fcd30; border-radius:20px; background:radial-gradient(ellipse 29% 3% at 19% 0%,#b7d9ff29,transparent 100%),radial-gradient(ellipse 3% 37% at 0% 28%,#6eaaff1a,transparent 100%),radial-gradient(ellipse at 100% -15%,#295ea33b,transparent 63%),#070f1d; box-shadow:0 15px 28px #0005,inset 1px 0 2px #5a9cff23,inset 0 1px #8bbdff16,inset 0 -1px 2px #a8d6ff50; }
.ng-gallery-card::after { content:''; position:absolute; inset:0; z-index:3; border-radius:inherit; padding:1px; background:radial-gradient(ellipse 130px 90px at 0 0,#b8dcff66,transparent 100%),radial-gradient(ellipse 100px 85px at 100% 100%,#9bcfff26,transparent 100%),linear-gradient(145deg,#93bcff0c,transparent 40%,#7dbbff0d); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; pointer-events:none; }
.ng-gallery-card:hover,.ng-gallery-card:focus-within { border-color:#82b3f25c; background:radial-gradient(ellipse at 100% -15%,#295ea34a,transparent 63%),#081222; box-shadow:0 15px 28px #0005,inset 0 1px #8bbdff24,inset 0 -1px 2px #a8d6ff8a; }
.ng-gallery-picture { aspect-ratio:16/9; position:relative; margin:0; border-radius:0; background:#13253a; overflow:hidden; }
.ng-gallery-picture img { display:block; width:100%; height:100%; object-fit:cover; }
.ng-gallery-play { position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(transparent 65%,#07101b80); pointer-events:none; }
.ng-gallery-play span { display:grid; place-items:center; width:42px; height:42px; padding-left:3px; border-radius:50%; color:#f6faff; background:#0a1925a8; border:1px solid #d5eaff99; box-shadow:0 2px 16px #0003; }
.ng-gallery-copy { padding:17px 18px 34px; }
.ng-gallery-copy::before { content:''; position:absolute; left:0; right:0; bottom:0; height:44px; z-index:-1; pointer-events:none; background:radial-gradient(ellipse 58% 100% at 50% 140%,#679dffb3 0,#315b9c70 28%,#17396a24 60%,transparent 85%); }
.ng-gallery-card:hover .ng-gallery-copy::before,.ng-gallery-card:focus-within .ng-gallery-copy::before { height:52px; background:radial-gradient(ellipse 68% 105% at 50% 132%,#c2eaff 0,#619bfff0 27%,#2b61bb80 53%,#17396a20 72%,transparent 88%); }
.ng-gallery-copy::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url('/nextgame-ui/media/material-grain.svg'); opacity:.1; mix-blend-mode:screen; }
.ng-gallery-category { display:block; color:#b4c9df; font-size:10px; letter-spacing:.09em; text-transform:uppercase; margin-bottom:9px; }
.ng-gallery-card h4 { font-family:inherit; font-size:16px; font-weight:600; line-height:1.45; letter-spacing:-.2px; overflow-wrap:break-word; margin:0; text-wrap:pretty; }
.ng-gallery-link { text-decoration:none; }
.ng-gallery-link::after { content:""; position:absolute; inset:0; border-radius:20px; z-index:2; }
.ng-gallery-link:focus-visible { outline:none; }
.ng-gallery-card:has(.ng-gallery-link:focus-visible) { outline:3px solid #bce1ff; outline-offset:4px; }
.ng-gallery-copy p { margin-top:8px; font-size:12px; color:var(--muted); line-height:1.7; overflow-wrap:anywhere; }
.ng-gallery-status { font-size:11px; color:var(--muted); margin:0 0 16px; }
.ng-gallery-player { width:min(1000px,calc(100% - 32px)); background:#101f33; color:#f0f4fa; border:1px solid #bcdcff55; border-radius:16px; padding:0; overflow:auto; overscroll-behavior:contain; }
.ng-gallery-player::backdrop { background:#020810d9; backdrop-filter:blur(8px); }
.ng-gallery-player-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; border-bottom:1px solid #bcdcff26; }
.ng-gallery-player-head h2 { font:600 18px/1.4 'Segoe UI',Arial,sans-serif; letter-spacing:-.2px; overflow-wrap:anywhere; }
.ng-gallery-player-head button { flex-shrink:0; min-height:44px; font-size:12px; background:#1b3452; color:#f0f4fa; border:1px solid #bddbff55; }
.ng-gallery-player-head button:hover { background:#2a4667; }
.ng-gallery-player video { display:block; width:100%; height:auto; max-height:68dvh; object-fit:contain; background:#050a10; }
.ng-gallery-player>p { padding:14px 22px; font-size:12px; color:#c0cee1; }
.ng-gallery button:focus-visible,.ng-gallery-player button:focus-visible,.ng-gallery-player video:focus-visible { outline:3px solid #bce1ff; outline-offset:3px; }
@media(max-width:800px) { .ng-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .ng-gallery { margin-top:34px; margin-bottom:34px; } .ng-gallery-heading { align-items:start; gap:10px; } .ng-gallery-grid { grid-template-columns:minmax(0,1fr); gap:16px; } .ng-gallery-filters { gap:6px; margin-top:18px; } .ng-gallery-filters button { padding:8px 12px; font-size:11px; } .ng-gallery-player { width:calc(100% - 20px); } .ng-gallery-player-head { padding:14px; gap:10px; } .ng-gallery-player-head h2 { font-size:16px; } .ng-gallery-player>p { padding:12px 14px; } }
@media(prefers-reduced-motion:reduce) { .ng-gallery *,.ng-gallery-player * { transition:none; animation:none; } }
/* Cinema viewer: native video, no decorative shell; caption stays below the film. */
dialog.ng-gallery-player{width:min(1080px,calc(100% - 48px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;overflow:auto;color:#f3f7ff}
dialog.ng-gallery-player::backdrop{background:rgba(2,6,12,.94);backdrop-filter:blur(8px)}
.ng-gallery-player-tools{display:flex;justify-content:flex-end;padding:6px 6px 12px}
.ng-gallery-player-tools button{background:transparent;border:1px solid #ffffff38;color:#e1eaf7;font-size:12px;min-height:44px;border-radius:8px}
.ng-gallery-player-tools button:hover{background:#ffffff12}
dialog.ng-gallery-player video{width:100%;height:auto;max-height:67dvh;object-fit:contain;background:#000}
.ng-gallery-player-caption{padding:20px 0 4px;max-width:800px}
.ng-gallery-player-caption h2{font:600 22px/1.4 'Segoe UI',Arial,sans-serif;letter-spacing:-.35px;margin:0;text-wrap:pretty}
.ng-gallery-player-caption p{font-size:13px;line-height:1.7;color:#bccbdd;margin:8px 0 0;text-wrap:pretty}
dialog.ng-gallery-player>p{padding:12px 0;margin:0}
@media(max-width:600px){dialog.ng-gallery-player{width:calc(100% - 28px);max-height:calc(100dvh - 24px)}.ng-gallery-player-caption{padding-top:16px}.ng-gallery-player-caption h2{font-size:19px}.ng-gallery-player-caption p{font-size:12px}}
/* Miniature hero: the existing text-left/media-right composition and materials. */
.ng-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ng-gallery-card{display:grid;grid-template-columns:28% 72%;min-height:184px;background:#070f1c;border:1px solid #7596d129;border-radius:22px;box-shadow:0 18px 40px #0005,inset 0 1px #789ddb33}
.ng-gallery-copy{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;text-align:left;min-width:0;padding:22px 16px 34px;background:radial-gradient(ellipse at 98% 0,#1e4c895c,transparent 57%),radial-gradient(ellipse at 0% 90%,#12305936,transparent 58%),#07101e;border-right:1px solid #a3c7ff12}
.ng-gallery-copy::before{top:0;bottom:0;left:0;right:auto;width:28%;height:auto;background:radial-gradient(ellipse 88% 24% at 55% 103%,#c1f9ff 0,#508dff 24%,#215ce8a6 43%,#12398442 66%,transparent 100%),radial-gradient(ellipse 50% 75% at -22% 77%,#247bff3d,transparent 75%);box-shadow:inset 0 -1px 2px #c0f5ffad,inset 1px 0 5px #498dff29;z-index:0}
.ng-gallery-copy::after{left:0;right:auto;width:28%;z-index:0;opacity:.115}
.ng-gallery-copy>span,.ng-gallery-copy>h4{position:static;z-index:1}
.ng-gallery-copy h4{font-size:18px;line-height:1.4;letter-spacing:-.45px;text-wrap:pretty}
.ng-gallery-category{color:var(--accent);margin-bottom:10px}
.ng-gallery-picture{align-self:stretch;min-width:0;min-height:184px;aspect-ratio:auto;margin:0;border-radius:0}
.ng-gallery-picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ng-gallery-play{background:linear-gradient(transparent 70%,#07101b33)}
.ng-gallery-card:hover,.ng-gallery-card:focus-within{background:#070f1c;border-color:#9bc6f370;box-shadow:0 18px 40px #0006,inset 0 1px #9cc8ff55}
.ng-gallery-card:hover .ng-gallery-copy::before,.ng-gallery-card:focus-within .ng-gallery-copy::before{height:auto;background:radial-gradient(ellipse 92% 28% at 55% 103%,#d1faff 0,#679dff 25%,#2462f0bf 45%,#163f954f 68%,transparent 100%);box-shadow:inset 0 -1px 2px #c0f5ffad,inset 1px 0 5px #498dff29}
.ng-gallery-card::after{padding:1px;background:radial-gradient(ellipse 100px 95px at 0 0,#b8dcffa6,transparent 100%),radial-gradient(ellipse 100px 95px at 100% 0,#b8dcff55,transparent 100%),radial-gradient(ellipse 130px 105px at 0 100%,#bbf2ff99,transparent 100%),radial-gradient(ellipse 130px 105px at 100% 100%,#bbf2ff55,transparent 100%),linear-gradient(145deg,#769edb38,#93bcff12 45%,#7dbbff27)}
@media(max-width:1000px){.ng-gallery-grid{grid-template-columns:minmax(0,1fr)}.ng-gallery-card{min-height:184px;grid-template-columns:28% 72%}}
@media(max-width:600px){.ng-gallery-card{min-height:160px;border-radius:20px}.ng-gallery-picture{min-height:160px}.ng-gallery-copy{padding:20px 16px 30px}.ng-gallery-copy h4{font-size:16px;letter-spacing:-.3px}.ng-gallery-category{font-size:9px}}
/* Keep the narrow column readable when the preview window itself gets smaller. */
.ng-gallery-card{grid-template-columns:minmax(156px,28%) minmax(0,1fr)}
.ng-gallery-copy::before,.ng-gallery-copy::after{width:max(156px,28%)}
.ng-gallery-copy h4{width:100%;min-width:0;font-size:16px;overflow-wrap:break-word}
@media(max-width:600px){.ng-gallery-card{grid-template-columns: minmax(142px,28%) minmax(0,1fr)}.ng-gallery-copy::before,.ng-gallery-copy::after{width:max(142px,28%)}.ng-gallery-copy{padding-left:12px;padding-right:12px}.ng-gallery-copy h4{font-size:15px}}