/* Westmanhwa visual language, adapted for game box art and console discovery. */
:root{--bg-body:#0a101d;--bg-card:#131d2e;--bg-nav:#0d1323;--border:#26344d;--accent:#ff7900;--accent-hover:#ff963b;--accent-cyan:#ff963b;--text-main:#eef2fa;--text-muted:#9aa9bd;--bg-search:#192336;--bg-search-hover:#222f45;--accent-primary:var(--accent)}
[data-theme="light"]{--bg-body:#f3f5fa;--bg-card:#fff;--bg-nav:#0d1323;--border:#d6deeb;--text-main:#142038;--text-muted:#58677c;--accent:#b94b00;--accent-hover:#d25a00}
body{font-family:"Segoe UI",system-ui,sans-serif;font-weight:400;background:var(--bg-body)}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.beastroms-header{border-bottom:1px solid var(--border);box-shadow:none}
.beastroms-nav{max-width:1440px;min-height:72px;gap:24px;padding:10px 4%}
.beastroms-brand{gap:11px;font-size:20px;font-weight:800;letter-spacing:-.6px}
.br-brand-icon{display:grid;place-items:center;width:38px;height:38px;background:#ff7900;border-radius:12px;font-size:26px;color:#fff}
.beastroms-menu{order:1;gap:26px;margin:0 auto}
.beastroms-search-form{order:2;margin:0;max-width:290px}
.theme-toggle-btn,.beastroms-search-toggle-mobile{order:3}
.beastroms-menu a{font-weight:600;color:#aab5c7}.beastroms-menu a.active,.beastroms-menu a:hover{color:#ff891c}
.beastroms-search-input{border:1px solid #26344d;border-radius:9px;padding-top:10px;padding-bottom:10px}
.br-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.br-spotlight{padding:25px 0 12px;background:radial-gradient(ellipse at 50% 45%,#23314b 0%,#0c1423 58%,#0a101d 100%);border-bottom:1px solid #26344d;overflow:hidden}
.br-track{display:flex;align-items:center;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px max(24px,calc(50% - 132px));height:405px;scrollbar-width:none;position:relative}.br-track::-webkit-scrollbar{display:none}
.br-poster{display:block;flex:0 0 264px;height:354px;position:relative;border-radius:14px;overflow:hidden;background:#182337;border:1px solid #384254;scroll-snap-align:center;transform:scale(.92);opacity:.56;transition:transform .3s,opacity .3s,border-color .3s;color:#fff}
.br-poster.is-active{transform:scale(1.04);opacity:1;border-color:#ff891c;box-shadow:0 15px 45px #0008}
.br-art{position:relative;overflow:hidden;background:#182337}.br-art img{height:100%;width:100%;object-fit:contain;object-position:center top}.br-poster .br-art{height:100%}.br-poster .br-art img{object-fit:contain}
.br-poster:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,#080e1bc9 75%,#080e1b)}
.br-rating,.br-platform{position:absolute;top:10px;background:#0a101de8;border:1px solid #ffffff20;color:#fff;border-radius:6px;padding:3px 7px;font-size:11px;font-weight:700;z-index:2}.br-rating{left:10px;color:#ffd45c}.br-platform{right:10px;max-width:68%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.br-game-copy h3{font-size:14px;font-weight:750;line-height:1.4;margin:0 0 5px;color:var(--text-main)}.br-game-copy p{font-size:11px;color:var(--text-muted);margin:0}.br-game-copy p span{padding:0 5px}.br-poster .br-game-copy{position:absolute;bottom:20px;left:18px;right:18px;z-index:3}.br-poster .br-game-copy h3{color:#fff;font-size:19px;line-height:1.3}.br-poster .br-game-copy p{color:#bdc8db}.br-game-copy small{font-size:9px;letter-spacing:2px;color:#ffb26e;display:block;margin-bottom:8px}
.br-carousel-controls{display:flex;align-items:center;justify-content:center;gap:18px;color:#a4b0c4;font-size:9px;letter-spacing:2px}.br-carousel-controls button{padding:0;width:32px;height:30px;border:1px solid #344157;border-radius:7px;color:#d9e2ef;background:#152034;cursor:pointer}.br-carousel-controls button:hover{color:#ff891c;border-color:#ff891c}
.br-content{max-width:1440px;padding:0 4% 50px;margin:auto}.br-consoles{display:flex;align-items:center;gap:9px;overflow-x:auto;padding:24px 0;border-bottom:1px solid var(--border);scrollbar-width:thin}.br-consoles>span{font-size:9px;letter-spacing:1.5px;color:var(--text-muted);max-width:100px;flex-shrink:0;font-weight:700}.br-consoles a{padding:7px 13px;border:1px solid var(--border);border-radius:7px;font-size:12px;color:var(--text-muted);white-space:nowrap;background:var(--bg-card)}.br-consoles a:hover,.br-consoles .is-active{color:var(--accent);border-color:var(--accent);background:#ff79000b}
.br-section{margin-top:32px;min-width:0}.br-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.br-heading h2{font-size:20px;line-height:1.4;border-left:4px solid var(--accent);padding-left:12px;margin:0;font-weight:750;color:var(--text-main)}.br-heading>a{color:var(--accent);font-size:12px;font-weight:650;white-space:nowrap}
.br-games{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}.br-game{min-width:0;display:block}.br-game .br-art{aspect-ratio:3/4;border:1px solid var(--border);border-radius:10px}.br-game:hover .br-art{border-color:var(--accent)}.br-game:hover h3{color:var(--accent)}.br-game .br-game-copy{padding:11px 2px;text-align:center}.br-game h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.br-no-art{display:grid;place-items:center;height:100%;font-size:64px;color:#7d90ae}
.br-lower-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px}.br-latest{display:grid;grid-template-columns:1fr 1fr;gap:12px}.br-latest-item{display:flex;align-items:center;gap:14px;padding:12px;border:1px solid var(--border);background:var(--bg-card);border-radius:10px;min-width:0}.br-latest-item:hover{border-color:var(--accent)}.br-latest-item img{width:60px;height:80px;object-fit:cover;border-radius:5px;background:#192337}.br-latest-item div{min-width:0;flex:1}.br-latest-item span{color:var(--accent);font-size:10px}.br-latest-item h3{font-size:13px;line-height:1.4;margin:5px 0;color:var(--text-main)}.br-latest-item p{font-size:11px;color:var(--text-muted);margin:0}.br-latest-item b{color:var(--text-muted)}
.br-emulator-callout{padding:25px;border-radius:12px;background:linear-gradient(130deg,var(--bg-card),#ff790014);border:1px solid var(--border)}.br-emulator-symbol{float:right;font-size:52px;color:var(--accent);line-height:1}.br-emulator-callout small{font-size:9px;letter-spacing:1px;color:var(--accent)}.br-emulator-callout h3{font-size:26px;line-height:1.2;margin:18px 0 12px;font-weight:750;color:var(--text-main)}.br-emulator-callout p{font-size:13px;color:var(--text-muted);margin-bottom:22px}.br-button{display:inline-block;background:#ff7900;color:#111827;border-radius:8px;padding:10px 18px;font-size:13px;font-weight:750}.br-button:hover{background:#ffa04d;color:#111827}.br-empty{padding:30px;border:1px dashed var(--border);color:var(--text-muted)}
.beastroms-container,.beastroms-breadcrumbs{max-width:1320px}.beastroms-game-card{border-color:var(--border);background:var(--bg-card)}.beastroms-card-thumb img{object-fit:contain}.beastroms-footer{border-top:1px solid var(--border);background:var(--bg-nav);color:#aab5c7;padding:30px 4%}.beastroms-footer-container{max-width:1320px;margin:auto}.beastroms-footer-legal{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:20px 0;font-size:12px}.beastroms-footer-credit{text-align:center;font-size:12px}
@media(min-width:1500px){.br-track{gap:34px}.br-poster{flex-basis:280px;height:380px}.br-track{height:435px;padding-inline:calc(50% - 140px)}}
.br-game-status{position:absolute;z-index:4;top:9px;right:8px;padding:4px 7px;border-radius:5px;background:#ffeb00;color:#111827;font-size:8px;font-weight:800;line-height:1;letter-spacing:1px;box-shadow:0 3px 10px #0005}.br-game-status--updated{background:#8df0ad}
@media(max-width:1100px){.beastroms-nav{gap:15px}.beastroms-menu{gap:15px}.beastroms-search-form{max-width:230px}.br-games{grid-template-columns:repeat(4,minmax(0,1fr))}.br-lower-grid{grid-template-columns:1fr}.br-emulator-callout{max-width:none}.br-poster{flex-basis:240px;height:330px}.br-track{height:380px;padding-inline:calc(50% - 120px)}}
@media(max-width:767px){.beastroms-nav{min-height:62px;padding:10px 18px}.beastroms-brand{font-size:18px}.beastroms-menu{display:none}.beastroms-search-form{order:4}.br-brand-icon{width:34px;height:34px}.br-content{padding:0 18px 30px}.br-spotlight{padding-top:8px}.br-track{gap:10px;height:348px;padding-inline:calc(50% - 113px)}.br-poster{flex-basis:226px;height:306px}.br-poster .br-game-copy h3{font-size:17px}.br-consoles{padding:18px 0}.br-consoles>span{display:none}.br-heading h2{font-size:18px}.br-heading>a{font-size:10px}.br-games{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.br-game .br-game-copy h3{font-size:12px}.br-game .br-game-copy p{font-size:10px}.br-game .br-platform{top:auto;bottom:7px;right:6px;font-size:9px;max-width:90%}.br-game .br-rating{top:6px;left:6px;font-size:10px;padding:2px 5px}.br-latest{grid-template-columns:1fr}.br-section{margin-top:26px}.br-lower-grid{gap:0}.br-carousel-controls{font-size:8px}.beastroms-mobile-nav a{color:#bdc8db}}
@media(max-width:420px){.br-games{grid-template-columns:repeat(2,minmax(0,1fr))}.br-heading{gap:8px}.br-heading h2{font-size:17px}}
@media(prefers-reduced-motion:reduce){.br-poster,.br-art img{transition:none;scroll-behavior:auto}}
.beastroms-menu li a.active{background:transparent;color:#ff891c;border-bottom:2px solid #ff7900;border-radius:0}.beastroms-menu li a:hover{background:#ff790011;color:#ff891c}.beastroms-menu li a{color:#aab5c7}.br-poster .br-art img{object-fit:contain}
.br-catalog-filter{display:flex;gap:14px;align-items:end;padding:18px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;margin-bottom:12px}.br-catalog-filter>div{flex:1;min-width:0}.br-catalog-filter label{display:block;font-size:12px;color:var(--text-muted);margin-bottom:6px}.br-catalog-filter select,.br-catalog-filter input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:7px;background:var(--bg-body);color:var(--text-main);font:inherit;font-size:13px}.br-catalog-filter>a{padding:10px 0;color:var(--accent);font-size:12px}.br-catalog-filter button{border:0;cursor:pointer}.br-catalog-count{font-size:12px;color:var(--text-muted);margin-bottom:20px}.br-pagination{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:25px;font-size:13px}.br-pagination a{padding:8px 16px;border:1px solid var(--border);border-radius:7px;color:var(--accent)}.br-art:has(.br-no-art){background:radial-gradient(ellipse at top,#2a3c5b,#121d30)}#detail-cover[hidden]{display:none}
@media(max-width:767px){.br-catalog-filter{flex-wrap:wrap}.br-catalog-filter>div{flex-basis:100%}.br-pagination{gap:10px}.br-heading h2{overflow-wrap:anywhere}}
.br-article{padding-top:24px}.br-article-breadcrumb{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--text-muted);margin-bottom:28px}.br-article-breadcrumb a{color:var(--accent)}.br-article-hero{display:grid;grid-template-columns:280px minmax(0,1fr);gap:36px;padding:28px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px}.br-article-cover{aspect-ratio:3/4;border-radius:10px;overflow:hidden;background:var(--bg-body)}.br-article-cover img{width:100%;height:100%;object-fit:cover}.br-article h1{font-size:clamp(25px,3vw,40px);line-height:1.2;font-weight:750;margin:18px 0;color:var(--text-main);overflow-wrap:anywhere}.br-article-platform{font-size:12px;color:var(--accent)}.br-article-intro,.br-article-about p{color:var(--text-muted)}.br-article-specs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}.br-article-specs>div{padding:15px;background:var(--bg-body);border-radius:8px}.br-article-specs dt{color:var(--text-muted);font-size:12px}.br-article-specs dd{margin:5px 0 0;font-weight:650}.br-article-about{max-width:900px}@media(max-width:767px){.br-article-hero{grid-template-columns:1fr;padding:18px;gap:20px}.br-article-cover{width:100%;max-width:280px;margin:auto}.br-article-specs{gap:10px}.br-article .br-button{white-space:normal}}
/* Light mode: white content surfaces, with the existing dark site chrome. */
[data-theme="light"]{--bg-body:#fff;--bg-card:#fff;--bg-nav:#0d1323}
[data-theme="light"] body,[data-theme="light"] .br-home,[data-theme="light"] .br-content,[data-theme="light"] .br-spotlight,[data-theme="light"] .br-poster,[data-theme="light"] .br-art,[data-theme="light"] .br-art:has(.br-no-art),[data-theme="light"] .br-emulator-callout,[data-theme="light"] .br-latest-item,[data-theme="light"] .beastroms-clean-hero,[data-theme="light"] .beastroms-single-hero,[data-theme="light"] .br-catalog-filter,[data-theme="light"] .br-consoles a{background:#fff}
[data-theme="light"] .br-spotlight{border-color:var(--border)}
[data-theme="light"] .br-carousel-controls{color:var(--text-muted)}
[data-theme="light"] .br-carousel-controls button{background:#fff;color:var(--text-main);border-color:var(--border)}
[data-theme="light"] .br-latest-item img{background:#fff}
[data-theme="light"] .beastroms-header,[data-theme="light"] .beastroms-footer{background:#0d1323;color:#aab5c7;--border:#26344d;--accent:#ff7900}
[data-theme="light"] .beastroms-header .beastroms-search-input{background:#192336;color:#fff}
/* Westmanhwa center spotlight: same poster geometry, motion and typography. */
.br-spotlight{--poster:280px;position:relative;isolation:isolate;overflow:hidden;width:100%;margin:0;background:#0a101d;border:0;border-radius:0;padding:0 0 18px}
.br-spotlight::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0a101d 0%,#0a101d90 20%,#0a101d0d 65%,#0a101d26);pointer-events:none}
.br-ambient{position:absolute;inset:-28px;z-index:-2;filter:blur(12px);opacity:.52;pointer-events:none}.br-ambient img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.br-spotlight .br-track{position:relative;display:flex;align-items:center;gap:13px;width:100%;height:auto;overflow-x:auto;overflow-y:hidden;padding:28px max(0px,calc((100% - var(--poster))/2)) 24px;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;touch-action:pan-x pan-y;overscroll-behavior-x:contain;user-select:none}
.br-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.br-spotlight .br-poster{flex:0 0 var(--poster);width:var(--poster);height:auto;aspect-ratio:4/5;scroll-snap-align:center;border:1px solid #ffffff24;border-radius:14px;background:#182332;transform:translateY(12px);opacity:1;transition:transform .3s cubic-bezier(.2,.9,.25,1.25),opacity .25s,border-color .25s,box-shadow .25s;box-shadow:0 15px 45px #0007;cursor:inherit}
.br-spotlight .br-poster.is-active{transform:translateY(0);opacity:1;border-color:#ff8a3899;box-shadow:0 15px 50px #0009,0 0 25px #ff8a381a}
.br-spotlight .br-poster .br-art{height:100%;width:100%;position:absolute;inset:0}.br-spotlight .br-poster img{width:100%;height:100%;object-fit:contain;object-position:center top;pointer-events:none}
.br-spotlight .br-poster::after{background:linear-gradient(0deg,#050b15fa,transparent 48%);pointer-events:none}
.br-spotlight .br-game-copy{bottom:18px;left:18px;right:18px}.br-spotlight .br-game-copy small{font-size:8px;letter-spacing:2px;color:#a3d9d7;margin-bottom:7px}.br-spotlight .br-game-copy h3{font-size:14px;font-weight:750;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 5px;color:#f4f6fc}.br-spotlight .br-game-copy p{font-size:10px;color:#bdc8db}
[data-theme="light"] .br-spotlight{background:#fff}[data-theme="light"] .br-spotlight::after{display:none}[data-theme="light"] .br-spotlight .br-poster .br-art{background:#182337}[data-theme="light"] .br-spotlight .br-poster{box-shadow:0 8px 22px #14203820;border-color:#d6deeb}[data-theme="light"] .br-spotlight .br-poster.is-active{border-color:#ff8a38;box-shadow:0 10px 25px #14203830}
@media(min-width:768px) and (hover:hover) and (pointer:fine){.br-spotlight .br-track:not(.is-dragging) .br-poster:not(.is-active):hover,.br-spotlight .br-poster:not(.is-active):focus-visible{transform:translateY(-3px);opacity:1;z-index:2;border-color:#ff8a38cc}}
@media(max-width:767px){.br-spotlight{--poster:226px}.br-spotlight .br-poster{aspect-ratio:4/5}.br-spotlight .br-game-copy{left:11px;right:11px;bottom:13px}.br-spotlight .br-game-copy h3{font-size:12px}.br-spotlight .br-game-copy small{font-size:7px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.br-spotlight *{transition:none!important;scroll-behavior:auto!important}}

/* Keep the active cover backdrop visible in light mode. */
[data-theme="light"] .br-spotlight::after{display:block;background:linear-gradient(0deg,#fff 0%,#ffffffcc 18%,#ffffff40 65%,#ffffff70)}
[data-theme="light"] .br-spotlight .br-ambient{opacity:.5}

/* Side posters remain readable while the center keeps its size emphasis. */

/* Ink Marker: selected poster status style from concept 09. */
.br-game-status{--tag:#ffe500;top:11px;right:9px;padding:6px 10px;border:0;border-radius:0;background:var(--tag);color:#111;transform:rotate(-4deg);font-family:"Comic Sans MS",cursive;font-size:9px;font-weight:800;line-height:1;letter-spacing:1px;box-shadow:none;isolation:isolate}
.br-game-status::before{content:"";position:absolute;inset:-3px -5px;background:var(--tag);opacity:.45;transform:rotate(5deg);z-index:-1;pointer-events:none}
.br-game-status--updated{--tag:#72e7ae;transform:rotate(3deg)}

.br-popular-fire{position:absolute;z-index:5;top:10px;left:10px;font-size:22px;line-height:1;padding:5px;border-radius:7px;background:#0a101dc9}
.br-collection-page{padding-top:30px;padding-bottom:50px}.br-collection-page h1{font-size:clamp(24px,3vw,36px);line-height:1.25;font-weight:750;color:var(--text-main);margin:0}.br-heading .br-see-all{padding:7px 12px;border:1px solid var(--border);border-radius:7px;white-space:nowrap}
@media(max-width:767px){.br-collection-page .br-heading{align-items:flex-start;flex-wrap:wrap}}
/* Desktop header: centered navigation and right-aligned search. */
@media(min-width:1101px){
.beastroms-nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:24px}
.beastroms-nav .beastroms-brand{grid-column:1;grid-row:1;justify-self:start}
.beastroms-nav .beastroms-menu{position:absolute;left:50%;transform:translateX(-50%);margin:0;justify-content:center;gap:26px}
.beastroms-nav .beastroms-search-form{grid-column:3;grid-row:1;justify-self:end;width:100%;max-width:290px;margin:0}
.beastroms-nav .theme-toggle-btn{grid-column:4;grid-row:1;justify-self:end}
}
/* Header spans the viewport; navigation is centered independently of side controls. */
@media(min-width:769px){
.beastroms-header .beastroms-nav{display:flex;position:relative;width:100%;max-width:none;min-height:72px;margin:0;padding:10px 4%;align-items:center;gap:24px}
.beastroms-header .beastroms-nav .beastroms-brand{margin-right:auto;flex-shrink:0}
.beastroms-header .beastroms-nav .beastroms-menu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center;gap:26px;width:max-content;margin:0;padding:0}
.beastroms-header .beastroms-nav .beastroms-search-form{flex:0 1 290px;width:290px;max-width:290px;margin:0}
.beastroms-header .beastroms-nav .theme-toggle-btn{flex-shrink:0;margin:0}
}
@media(min-width:769px) and (max-width:1100px){
.beastroms-header .beastroms-nav{padding-inline:20px;gap:12px}
.beastroms-header .beastroms-nav .beastroms-menu{gap:10px}
.beastroms-header .beastroms-nav .beastroms-search-form{flex-basis:180px;width:180px;max-width:180px}
}

.br-hero-fire{position:absolute;z-index:5;top:10px;right:10px;display:grid;place-items:center;width:34px;height:34px;font-size:23px;line-height:1;border-radius:8px;background:#0a101dd9;border:1px solid #ffffff30;pointer-events:none}

.br-hero-fire,.br-popular-fire{background:transparent;border:0;border-radius:0;box-shadow:none}

/* Gradient flame, sized independently from poster artwork. */
.br-hero-fire{width:40px;height:50px}
.br-hero-fire svg{display:block;width:100%;height:100%;overflow:visible}

/* Give each cover its own frame so portrait and square artwork stay full size. */
.br-games .br-game{align-self:start}
.br-games .br-game .br-art:has(img){aspect-ratio:auto;padding:0;background:transparent}
.br-games .br-game .br-art img{width:100%;height:auto;object-fit:contain}