/* Forge No Ads Games — official black / hot orange / dual hammer identity.
   Preserve the original /brand hammer artwork from the homepage.
   Site chrome only: no game mechanics, purchase logic, input hit targets or 3D canvas replaced. */
:root{
 --forge-brand-black:#000000;
 --forge-brand-panel:#0d0d0f;
 --forge-brand-orange:#e8680c;
 --forge-brand-hot:#ff8428;
 --forge-brand-line:rgba(255,121,28,.46);
 --forge-brand-icon:url("/brand/hammer.png");
 --forge-brand-icon-right:url("/brand/hammer-r.png");
}
html body{background-color:#050506}
html body #home.screen{
 background:radial-gradient(ellipse at 52% 0%,rgba(232,104,12,.13),transparent 44%),linear-gradient(180deg,#000 0%,#0b0b0d 52%,#020202 100%)!important;
 color:#f2dfce;
}
html body #home .brand.forge-brand{
 background:#000!important;
 border:1px solid var(--forge-brand-line)!important;
 box-shadow:0 0 0 1px rgba(232,104,12,.12),0 10px 34px #000!important;
}
html body #home .forge-brand .forge-title,
html body #home .forge-brand .forge-title span,
html body #home .forge-brand .forge-promise .ft{
 color:var(--forge-brand-orange)!important;
 -webkit-text-fill-color:var(--forge-brand-orange)!important;
 text-shadow:0 1px 0 #260f03!important;
}
html body #home .forge-brand img.fh{object-fit:contain;filter:drop-shadow(0 0 5px rgba(232,104,12,.27))}
html body #home .h-date,
html body #home .h-sec,
html body #home .forge-showcase-top,
html body #home .forge-showcase-top strong{
 color:var(--forge-brand-orange)!important;
 -webkit-text-fill-color:var(--forge-brand-orange)!important;
}
html body #home .h-hero,
html body #home .h-tools,
html body #home #homeTools{color:#f2dfce}
html body #home .grid .card{
 background:linear-gradient(155deg,#181315 0%,#060608 58%,#000 100%)!important;
 color:#f5e5da!important;
 border:1px solid var(--forge-brand-line)!important;
 box-shadow:inset 0 1px rgba(255,139,50,.16),0 5px 0 rgba(0,0,0,.72),0 15px 32px rgba(0,0,0,.55)!important;
}
html body #home .grid .card h2,
html body #home .h-pick b,
html body #home .h-cont b{
 color:var(--forge-brand-orange)!important;
 -webkit-text-fill-color:var(--forge-brand-orange)!important;
 font-weight:800!important;
}
html body #home .grid .card p,
html body #home .grid .card small,
html body #home .h-pick small,
html body #home .h-cont small{
 color:#ddc9ba!important;
 -webkit-text-fill-color:#ddc9ba!important;
}
html body #home .grid .card .mini{
 border:1px solid rgba(250,130,47,.52)!important;
 /* Keep actual per-game 3D artwork, previews and engine renderers visible. */
}
html body #home .grid .card h2::before,
html body #home .h-chip.cat-tile::before,
html body #home .h-pick::before,
html body #home .h-cont::before,
html body #home .h-chip:not(.cat-tile)::before,
html body #play .bar #playTitle::before,
html body #play .bar #back::before,
html body #play #tools button::before,
html body #play .bar #mute::before{
 content:"";
 display:inline-block;
 width:29px;
 min-width:29px;
 height:18px;
 flex:0 0 auto;
 background-image:var(--forge-brand-icon),var(--forge-brand-icon-right);
 background-repeat:no-repeat,no-repeat;
 background-position:left center,right center;
 background-size:18px 18px,18px 18px;
 vertical-align:middle;
 pointer-events:none;
 filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
html body #home .grid .card h2::before{margin-right:6px}
html body #home .h-chip.cat-tile{
 background:linear-gradient(#151010,#050505)!important;
 color:var(--forge-brand-orange)!important;
 -webkit-text-fill-color:var(--forge-brand-orange)!important;
 border-color:var(--forge-brand-line)!important;
 box-shadow:inset 0 1px rgba(255,132,40,.2),0 7px 22px rgba(0,0,0,.35)!important;
}
html body #home .h-chip.cat-tile::before{margin:0 auto 2px}
html body #home .h-chip.cat-tile .cat-l,
html body #home .h-chip.cat-tile .cat-n{
 color:var(--forge-brand-orange)!important;
 -webkit-text-fill-color:var(--forge-brand-orange)!important;
}
html body #home .h-chip.cat-tile[aria-pressed="true"]{
 background:linear-gradient(#2a1002,#070303)!important;
 border-color:var(--forge-brand-hot)!important;
 box-shadow:0 0 0 1px var(--forge-brand-hot) inset,0 0 18px rgba(232,104,12,.16)!important;
}
html body #home .h-chip:not(.cat-tile),
html body #home .h-pick,
html body #home .h-cont,
html body #home .cat-tile:not(.h-chip){
 background:linear-gradient(155deg,#141114,#030303)!important;
 color:var(--forge-brand-orange)!important;
 -webkit-text-fill-color:var(--forge-brand-orange)!important;
 border:1px solid var(--forge-brand-line)!important;
 box-shadow:inset 0 1px rgba(255,121,26,.14),0 7px 19px #0008!important;
}
html body #home .h-pick .mini,
html body #home .h-cont .mini{border-color:var(--forge-brand-line)}
html body #home .h-search,
html body #home #homeSearch{
 background:#090909!important;color:#fff0e5!important;
 -webkit-text-fill-color:#fff0e5!important;
 border-color:var(--forge-brand-line)!important;
}
html body #home .h-search:focus-visible{outline:3px solid var(--forge-brand-hot)}
html body #home .forge-flagship{
 background:linear-gradient(115deg,#150d08,#050505 60%,#130a05)!important;
 border-color:var(--forge-brand-line)!important;
}
html body #home .forge-flagship :is(h2,h3,strong){color:var(--forge-brand-hot)!important}
html body #home .pill,
html body #home .h-cont em{
 background:#100904!important;color:var(--forge-brand-hot)!important;
 border:1px solid var(--forge-brand-line)!important;
}
html body #home #dock,
html body #home .dock{
 background:#000!important;color:var(--forge-brand-orange)!important;
 border:1px solid var(--forge-brand-line)!important;
}
html body #home #dockBuy{background:var(--forge-brand-orange)!important;color:#000!important;font-weight:900!important}
/* The game play frame carries the brand while the game board keeps its own graphics. */
html body #play .bar{
 background:linear-gradient(180deg,#0d0908,#000)!important;
 border-bottom:2px solid var(--forge-brand-orange)!important;
 box-shadow:inset 0 1px rgba(255,146,58,.15),0 10px 22px #0009!important;
 color:var(--forge-brand-orange)!important;
}
html body #play .bar #playTitle{
 display:inline-flex;align-items:center;gap:6px;
 color:var(--forge-brand-orange)!important;
 -webkit-text-fill-color:var(--forge-brand-orange)!important;
 font-weight:900;
 min-width:0;overflow-wrap:anywhere;
}
html body #play .bar #back,
html body #play .bar #mute,
html body #play .bar #difficulty,
html body #play #tools button,
html body #play .tools button{
 background:#030303!important;
 color:var(--forge-brand-orange)!important;
 -webkit-text-fill-color:var(--forge-brand-orange)!important;
 border:1px solid var(--forge-brand-line)!important;
 border-radius:10px;
 box-shadow:inset 0 1px rgba(255,130,40,.15),0 3px 0 #000!important;
}
html body #play .bar button,
html body #play #tools button{min-height:42px}
html body #play #tools button::before,
html body #play .bar #back::before,
html body #play .bar #mute::before{margin-right:4px}
html body #play #status,
html body #play .status,
html body #play .hud{
 color:var(--forge-brand-hot)!important;
}
html body #play .hud{background:#070707e8;border:1px solid rgba(232,104,12,.26);border-radius:12px}
html body .modal .panel{
 background:linear-gradient(170deg,#131013,#030303)!important;
 border:1px solid var(--forge-brand-line)!important;
 color:#f3e6dc!important;
 box-shadow:0 18px 60px #000a!important;
}
html body .modal .panel h2{color:var(--forge-brand-orange)!important}
html body .modal .panel button.buy{
 background:var(--forge-brand-orange)!important;
 color:#000!important;
 -webkit-text-fill-color:#000!important;
 border-color:#ff9b4b!important;
 font-weight:900!important;
}
html body .modal .panel .link{
 color:var(--forge-brand-hot)!important;
 -webkit-text-fill-color:var(--forge-brand-hot)!important;
}
html body :is(#home,#play,.modal) :is(button,a,input,select,[role="tab"]):focus-visible{
 outline:3px solid #ff953e!important;outline-offset:3px;
}
/* Catalog: keep the exact same branding in category tabs, copy and cards. */
html body:has(nav.cats){background:#050506!important;color:#f5e4d6!important}
html body:has(nav.cats) header{
 background:#000;border:1px solid var(--forge-brand-line);
 border-radius:18px;padding:18px 10px;
}
html body:has(nav.cats) header h1{
 color:var(--forge-brand-orange)!important;
 font-family:"Saira","Source Sans 3",system-ui,sans-serif!important;
 font-weight:900!important;
}
html body:has(nav.cats) nav.cats{background:#050506!important;border-bottom:1px solid var(--forge-brand-line)}
html body:has(nav.cats) nav.cats a,
html body:has(nav.cats) a.home{
 display:inline-flex;align-items:center;gap:5px;
 background:#000!important;color:var(--forge-brand-orange)!important;
 border:1px solid var(--forge-brand-line)!important;
 font-weight:800!important;
}
html body:has(nav.cats) nav.cats a::before,
html body:has(nav.cats) a.home::before{
 content:"";display:inline-block;width:29px;min-width:29px;height:18px;
 background-image:var(--forge-brand-icon),var(--forge-brand-icon-right);
 background-position:left center,right center;background-repeat:no-repeat;
 background-size:18px 18px;pointer-events:none;
}
html body:has(nav.cats) .box,
html body:has(nav.cats) .g{
 background:#0c0b0d!important;border-color:var(--forge-brand-line)!important;
 color:#f8e8dc!important;
}
html body:has(nav.cats) .g h3,
html body:has(nav.cats) .box h2,
html body:has(nav.cats) section h2{color:var(--forge-brand-orange)!important}
html body:has(nav.cats) a.play{
 background:var(--forge-brand-orange)!important;color:#070503!important;
 font-weight:900;
}
/* Standalone 3D battlefield: only menu/HUD surfaces, never WebGL scene lighting. */
html body:has(#viewport) #hud{
 background:linear-gradient(#000f,#090505b0,transparent)!important;
 border-top:2px solid var(--forge-brand-orange);
}
html body:has(#viewport) .brand a{
 display:inline-flex;align-items:center;gap:5px;
 color:var(--forge-brand-orange)!important;
}
html body:has(#viewport) .brand a::before{
 content:"";display:inline-block;width:29px;min-width:29px;height:18px;
 background-image:var(--forge-brand-icon),var(--forge-brand-icon-right);
 background-size:18px 18px;background-repeat:no-repeat;background-position:left center,right center;
}
html body:has(#viewport) #pauseButton,
html body:has(#viewport) .mobile-actions button,
html body:has(#viewport) #overlay button{
 background:#060404!important;color:var(--forge-brand-hot)!important;
 border:1px solid var(--forge-brand-line)!important;
}
html body:has(#viewport) #overlay .panel{
 background:linear-gradient(160deg,#100b08,#000)!important;
 border:1px solid var(--forge-brand-line)!important;
}
html body:has(#viewport) #overlay :is(h1,.eyebrow,h2){color:var(--forge-brand-orange)!important}
html body:has(#viewport) .vital,
html body:has(#viewport) #weaponHUD{background:rgba(0,0,0,.85)!important;border-color:var(--forge-brand-orange)!important}
html body:has(#viewport) #loadStatus{color:var(--forge-brand-hot)!important}
@media(max-width:600px){
 html body #home .forge-brand .forge-title{font-size:clamp(19px,6vw,32px)!important;white-space:normal!important;gap:5px!important;line-height:1.08!important}
 html body #home .brand.forge-brand{max-width:calc(100vw - 24px)!important;padding-inline:9px!important}
 html body #home .grid .card h2::before{width:21px;min-width:21px;height:15px;background-size:14px 14px}
 html body #play .bar #playTitle::before{width:20px;min-width:20px;height:15px;background-size:13px 13px}
 html body #play .bar{gap:5px}
 html body #play .bar button{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 html body #home .grid .card,html body #home .h-pick,
 html body #home .h-chip,html body #play .bar{animation:none!important;transition:none!important}
}