*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
--bg:#0a0908;
--bg-deep:#050403;
--panel:#12100e;
--panel-raised:#1a1816;
--edge:#3a3530;
--edge-lit:rgba(201,162,39,0.35);
--amber:#c9a227;
--amber-dim:#8a7020;
--phosphor:#e8d9a8;
--phosphor-dim:#b8a888;
--blood:#e85a4a;
--ok:#8ab87a;
--crt-green:rgba(139,180,120,0.15);
--font-head:'Bebas Neue',sans-serif;
--font-mono:'Share Tech Mono',monospace;
}
html,body.bunker-game-body{
min-height:100%;
min-height:100dvh;
background:
radial-gradient(ellipse 80% 50% at 50% -10%, rgba(107,0,0,0.12), transparent 55%),
linear-gradient(180deg, #0c0a08 0%, var(--bg-deep) 100%);
color:var(--phosphor);
font-family:var(--font-mono);
overflow-x:hidden;
overscroll-behavior:none;
}
.game-shell{
max-width:960px;
margin:0 auto;
padding:10px 14px max(16px, env(safe-area-inset-bottom));
min-height:100dvh;
display:flex;
flex-direction:column;
border-left:1px solid var(--edge);
border-right:1px solid var(--edge);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,0.03),
0 0 60px rgba(0,0,0,0.65);
}
.game-header{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
padding:10px 12px 12px;
margin:0 -2px 10px;
border:1px solid var(--edge);
border-radius:2px;
background:linear-gradient(180deg, var(--panel-raised) 0%, var(--panel) 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.04);
}
.game-back{
font-size:0.65rem;
letter-spacing:1px;
color:var(--blood);
text-decoration:none;
text-transform:uppercase;
}
.game-back:hover{color:#ff8a7a;}
.game-title{
flex:1;
font-family:var(--font-head);
font-size:clamp(1.05rem,4vw,1.45rem);
letter-spacing:4px;
color:var(--amber);
text-shadow:0 0 24px rgba(201,162,39,0.25);
}
.game-score{
font-size:0.68rem;
letter-spacing:2px;
color:var(--ok);
padding:4px 10px;
border:1px solid rgba(139,180,120,0.35);
background:rgba(20,40,18,0.45);
text-shadow:0 0 10px rgba(139,180,120,0.35);
}
.game-stage-wrap{
flex:1;
display:flex;
flex-direction:column;
align-items:stretch;
justify-content:center;
gap:10px;
position:relative;
width:100%;
min-height:0;
}
.game-crt-bezel{
position:relative;
width:100%;
max-width:min(960px, calc((100dvh - 220px) * 16 / 9 + 28px));
margin:0 auto;
padding:22px 10px 10px;
border-radius:4px;
background:linear-gradient(145deg, #2a2622 0%, #141210 45%, #0a0908 100%);
border:3px solid #454039;
box-shadow:
0 0 0 1px rgba(0,0,0,0.8),
0 0 0 4px rgba(58,53,48,0.6),
inset 0 2px 0 rgba(255,255,255,0.06),
inset 0 -8px 24px rgba(0,0,0,0.55),
0 16px 48px rgba(0,0,0,0.65);
}
.game-crt-plate{
position:absolute;
top:8px;
left:50%;
transform:translateX(-50%);
font-size:0.5rem;
letter-spacing:3px;
color:rgba(201,162,39,0.75);
white-space:nowrap;
pointer-events:none;
z-index:3;
}
.game-crt-bezel::before,
.game-crt-bezel::after{
content:"";
position:absolute;
width:8px;
height:8px;
border:2px solid rgba(90,80,68,0.8);
border-radius:50%;
background:radial-gradient(circle at 30% 30%, #5a5048, #1a1816);
box-shadow:inset 0 1px 2px rgba(0,0,0,0.8);
}
.game-crt-bezel::before{top:10px;left:10px;}
.game-crt-bezel::after{top:10px;right:10px;}
#gameCanvas{
display:block;
width:100%;
max-width:min(960px, calc((100dvh - 220px) * 16 / 9));
height:auto;
aspect-ratio:16/9;
margin:0 auto;
touch-action:none;
image-rendering:pixelated;
image-rendering:crisp-edges;
-webkit-image-rendering:pixelated;
border:2px solid #1a1816;
box-shadow:
inset 0 0 32px rgba(0,0,0,0.75),
0 0 20px rgba(139,180,120,0.06);
background:#050403;
position:relative;
z-index:1;
}
.game-crt-fx{
pointer-events:none;
position:absolute;
inset:22px 10px 10px;
border-radius:1px;
z-index:2;
background:
repeating-linear-gradient(
0deg,
transparent 0,
transparent 2px,
rgba(0,0,0,0.14) 2px,
rgba(0,0,0,0.14) 3px
),
radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,0.55) 100%);
mix-blend-mode:multiply;
opacity:0.85;
}
.game-hint{
font-size:0.58rem;
letter-spacing:1.5px;
color:var(--phosphor-dim);
text-align:center;
text-transform:uppercase;
width:100%;
max-width:min(960px, calc((100dvh - 220px) * 16 / 9));
margin:4px auto 0;
padding:6px 10px;
border:1px solid var(--edge);
background:rgba(18,16,14,0.85);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
body.game-active-play .game-hint,
.game-shell.game-active-play .game-hint{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
.game-trail{
font-size:0.55rem;
letter-spacing:1px;
text-align:center;
margin-top:8px;
}
.game-trail a{color:#7bff9a;text-decoration:none;}
.game-trail a:hover{text-decoration:underline;}
.game-touch{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:16px;
width:100%;
max-width:min(100%,520px);
padding:4px 2px 0;
touch-action:none;
-webkit-touch-callout:none;
}
.game-joystick{
flex-shrink:0;
touch-action:none;
-webkit-tap-highlight-color:transparent;
}
.game-joystick-base{
position:relative;
width:88px;
height:88px;
border-radius:50%;
border:2px solid var(--edge);
background:radial-gradient(circle at 35% 30%, #2a2622 0%, #141210 70%);
box-shadow:inset 0 2px 8px rgba(0,0,0,0.5),0 3px 0 #0a0908;
}
.game-joystick-knob{
position:absolute;
left:50%;
top:50%;
width:36px;
height:36px;
margin:0;
border-radius:50%;
border:2px solid rgba(201,162,39,0.55);
background:radial-gradient(circle at 30% 28%, #5a5048, #1a1816);
transform:translate(-50%,-50%);
pointer-events:none;
box-shadow:0 2px 6px rgba(0,0,0,0.45);
}
.game-pad{
display:none;
grid-template-columns:1fr;
justify-items:center;
gap:4px;
flex-shrink:0;
}
.game-pad-mid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:6px;
}
/* Hide duplicate up only — down lives in the middle row */
.game-pad-mid .game-pad-btn[data-dir="up"]{display:none;}
.game-pad > .game-pad-btn[data-dir="up"]{grid-row:1;}
.game-action-stack{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
flex-shrink:0;
}
.game-pad-btn,
.game-action-btn,
.game-fire-btn{
width:56px;
height:56px;
min-width:56px;
min-height:56px;
border:2px solid var(--edge);
border-radius:3px;
background:linear-gradient(180deg, #2a2622 0%, #141210 100%);
color:var(--phosphor);
font-family:var(--font-mono);
font-size:1rem;
cursor:pointer;
touch-action:none;
user-select:none;
-webkit-user-select:none;
-webkit-tap-highlight-color:transparent;
box-shadow:
0 3px 0 #0a0908,
inset 0 1px 0 rgba(255,255,255,0.06);
}
.game-pad-btn:active,
.game-action-btn:active,
.game-fire-btn:active{
background:linear-gradient(180deg, rgba(201,162,39,0.35) 0%, #1a1816 100%);
border-color:var(--amber);
box-shadow:0 1px 0 #0a0908, inset 0 2px 4px rgba(0,0,0,0.35);
transform:translateY(2px);
}
.game-action-btn,
.game-fire-btn{
width:76px;
min-width:76px;
height:64px;
min-height:64px;
font-size:0.65rem;
letter-spacing:1px;
}
.game-fire-btn{
border-color:rgba(232,90,74,0.55);
color:var(--blood);
}
.game-fire-btn:active{
background:rgba(232,90,74,0.22);
border-color:var(--blood);
}
.game-action-btn[hidden],
.game-fire-btn[hidden]{
display:none!important;
}
.game-overlay{
position:fixed;
inset:0;
z-index:50;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(ellipse at center, rgba(20,16,12,0.92) 0%, rgba(5,4,3,0.96) 70%);
padding:20px;
backdrop-filter:blur(4px);
}
.game-overlay.is-hidden{
display:none!important;
opacity:0;
visibility:hidden;
pointer-events:none;
}
.game-overlay-panel{
position:relative;
max-width:420px;
width:100%;
border:2px solid var(--edge-lit);
padding:28px 22px 24px;
background:
linear-gradient(180deg, rgba(26,24,20,0.98) 0%, rgba(14,12,10,0.99) 100%);
text-align:center;
box-shadow:
0 0 0 1px rgba(0,0,0,0.6),
0 0 48px rgba(107,0,0,0.2),
inset 0 0 40px rgba(201,162,39,0.04);
}
.game-overlay-panel::before{
content:"";
position:absolute;
inset:8px;
border:1px solid rgba(58,53,48,0.5);
pointer-events:none;
}
.game-overlay-tag{
display:block;
font-size:0.52rem;
letter-spacing:3px;
color:rgba(201,162,39,0.8);
margin:0 0 10px;
text-transform:uppercase;
}
.game-overlay-panel h2{
font-family:var(--font-head);
font-size:1.65rem;
letter-spacing:5px;
color:var(--amber);
margin-bottom:14px;
text-shadow:0 0 20px rgba(201,162,39,0.2);
}
.game-overlay-panel p{
font-size:0.75rem;
line-height:1.55;
color:rgba(200,192,176,0.9);
margin-bottom:16px;
}
.game-start-btn{
font-family:var(--font-mono);
font-size:0.72rem;
letter-spacing:3px;
text-transform:uppercase;
padding:14px 28px;
border:2px solid var(--amber);
border-radius:2px;
background:linear-gradient(180deg, rgba(107,0,0,0.5) 0%, rgba(60,20,15,0.65) 100%);
color:var(--phosphor);
cursor:pointer;
box-shadow:
0 4px 0 rgba(0,0,0,0.4),
0 0 16px rgba(201,162,39,0.15),
inset 0 1px 0 rgba(255,255,255,0.08);
transition:transform 0.1s, box-shadow 0.15s, background 0.15s;
}
.game-start-btn:hover{
background:linear-gradient(180deg, rgba(140,30,20,0.55) 0%, rgba(80,25,15,0.7) 100%);
box-shadow:
0 4px 0 rgba(0,0,0,0.4),
0 0 22px rgba(201,162,39,0.28),
inset 0 1px 0 rgba(255,255,255,0.1);
}
.game-start-btn:active{
transform:translateY(2px);
box-shadow:0 1px 0 rgba(0,0,0,0.4), inset 0 2px 6px rgba(0,0,0,0.35);
}
.game-start-btn.is-free-play{
border-color:#ffd54a;
color:#ffd54a;
background:rgba(255,213,74,0.12);
box-shadow:0 0 16px rgba(255,213,74,0.35),inset 0 0 12px rgba(255,213,74,0.08);
animation:game-free-play-pulse 1.6s ease-in-out infinite;
}
.game-start-btn.is-free-play:hover{
background:rgba(255,213,74,0.22);
}
@keyframes game-free-play-pulse{
0%,100%{box-shadow:0 0 12px rgba(255,213,74,0.3);}
50%{box-shadow:0 0 22px rgba(255,213,74,0.55);}
}
/* FREE PLAY — inverted cabinet (type ARCADE on title once per day) */
.bunker-game-body.is-free-play .game-header,
.bunker-game-body.is-free-play .game-stage-wrap,
.bunker-game-body.is-free-play .game-hint,
.bunker-game-body.is-free-play .game-touch{
filter:invert(1) hue-rotate(180deg);
}
.bunker-game-body.is-free-play .game-crt-bezel{
filter:invert(1) hue-rotate(180deg);
border-color:#ffd54a;
}
.bunker-game-body.is-free-play #gameCanvas{
border-color:#1a1816;
}
.bunker-game-body.is-free-play .game-score{
filter:invert(1) hue-rotate(180deg);
}
/* GOD MODE — testing only (?godmode in URL) */
.bunker-game-body.is-god-mode .game-crt-bezel{
box-shadow:
0 0 0 1px rgba(232,90,74,0.45),
0 0 24px rgba(232,90,74,0.18),
0 16px 48px rgba(0,0,0,0.65),
inset 0 -8px 24px rgba(80,20,15,0.12);
}
.bunker-game-body.is-god-mode .game-score{
color:#e85a4a;
}
.game-best{
margin-top:14px;
font-size:0.62rem;
letter-spacing:2px;
color:rgba(168,158,142,0.65);
}
.game-reward-label{
display:block;
font-size:0.58rem;
letter-spacing:2px;
color:var(--amber);
margin-bottom:6px;
text-transform:uppercase;
}
.game-reward-code{
display:block;
font-family:var(--font-mono);
font-size:1.05rem;
letter-spacing:3px;
color:#8ab87a;
padding:10px 12px;
margin:0 0 10px;
border:2px solid rgba(139,180,120,0.45);
background:rgba(20,40,18,0.5);
text-shadow:0 0 12px rgba(139,180,120,0.35);
}
.game-reward-hint{
display:block;
font-size:0.62rem;
line-height:1.55;
color:rgba(200,192,176,0.9);
}
.game-reward-hint code{
font-size:0.68rem;
color:var(--phosphor);
}
.game-reward-hint a{
color:var(--amber);
}
.game-credits{
display:block;
margin-top:10px;
font-size:0.58rem;
line-height:1.6;
letter-spacing:1px;
color:rgba(168,158,142,0.75);
}
.game-egg-tag{
font-family:var(--font-mono);
letter-spacing:2px;
color:#e85a4a;
text-shadow:0 0 10px rgba(232,90,74,0.45);
}
.game-overlay[data-overlay-mode="tribute"] .game-overlay-panel{
max-width:min(420px,92vw);
padding:28px 22px 22px;
border-color:rgba(61,120,200,0.45);
box-shadow:0 0 56px rgba(61,120,200,0.18),0 0 24px rgba(107,0,0,0.2);
}
.game-overlay[data-overlay-mode="tribute"] h2{
color:#7eb8e8;
letter-spacing:3px;
font-size:1.15rem;
margin-bottom:16px;
}
.game-overlay[data-overlay-mode="tribute"] .game-overlay-panel > p#gameOverlayText{
margin-bottom:18px;
}
.game-tribute{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
.game-tribute-logo{
display:block;
width:min(128px,42vw);
height:auto;
margin:0 auto 10px;
filter:drop-shadow(0 0 18px rgba(61,120,200,0.35));
}
.game-tribute-name{
font-family:var(--font-head);
font-size:1.65rem;
letter-spacing:6px;
color:#7eb8e8;
margin:0 0 4px;
text-shadow:0 0 20px rgba(61,120,200,0.35);
}
.game-tribute-role{
font-family:var(--font-mono);
font-size:0.62rem;
letter-spacing:3px;
text-transform:uppercase;
color:rgba(126,184,232,0.85);
margin:0 0 14px;
}
.game-tribute-msg{
font-size:0.72rem;
line-height:1.6;
color:rgba(200,192,176,0.92);
max-width:32em;
margin:0 0 10px;
}
.game-tribute-stat{
font-family:var(--font-mono);
font-size:0.58rem;
letter-spacing:1px;
color:rgba(232,90,74,0.85);
margin:0 0 12px;
}
.game-overlay[data-overlay-mode="tribute"] .game-credits{
margin-top:4px;
}
.game-touch[hidden]{display:none!important;}
@media (max-width:900px),(pointer:coarse),(hover:none){
.game-touch:not([hidden]){
display:flex;
padding-bottom:max(8px,env(safe-area-inset-bottom));
}
.game-joystick-base{width:96px;height:96px;}
.game-pad-mid{grid-template-columns:repeat(3,60px);}
.game-pad-btn,
.game-action-btn,
.game-fire-btn{
width:60px;
height:60px;
min-width:60px;
min-height:60px;
font-size:1.05rem;
}
.game-action-btn,
.game-fire-btn{
width:84px;
min-width:84px;
height:72px;
min-height:72px;
font-size:0.7rem;
}
}
@media (hover:hover) and (pointer:fine){
.game-touch{display:none!important;}
}