* { box-sizing: border-box; }
:root { --gold: #ffcc2e; --orange: #ff7a1a; --pink: #ff3ca8; --ink: #0d0a0c; --cream: #fff3dc; --mute: #b9ab98; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--cream);
  font-family: Oswald, "Arial Narrow", "Segoe UI", Roboto, Arial, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
a { color: var(--gold); }
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(30,10,24,.6), rgba(0,0,0,.92)); z-index: 10; padding: 16px; overflow-y: auto; }
.panel { width: min(420px, 100%); text-align: center; }
.panel.wide { width: min(720px, 100%); text-align: left; }
/* the logo: chunky comic letters, gold to orange, a thick black outline and a hard drop shadow, tilted */
h1 { font-family: Bangers, Impact, "Arial Black", sans-serif; font-weight: 400; font-size: clamp(56px, 8.5vw, 108px); line-height: .82;
  margin: 0 0 14px; letter-spacing: 3px; transform: rotate(-4deg); text-align: center;
  background: linear-gradient(to bottom, #fff2a0 0%, var(--gold) 40%, var(--orange) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 3px #120608; filter: drop-shadow(5px 6px 0 #120608) drop-shadow(0 0 22px rgba(255,60,168,.55)); }
h1 span { font-size: .78em; letter-spacing: 6px; }
h2 { font-family: Bangers, Impact, sans-serif; font-weight: 400; letter-spacing: 4px; font-size: 40px; color: var(--gold); margin: 0 0 8px;
  text-shadow: 3px 3px 0 #120608; text-align: center; }
.tag { color: var(--cream); margin: 0 0 22px; font-size: 18px; letter-spacing: 1px; text-align: center; text-shadow: 0 2px 4px #000; }
button { display: block; width: 100%; margin: 10px 0; padding: 12px; font: 400 26px Bangers, Impact, sans-serif; letter-spacing: 3px;
  color: #1a0a06; background: linear-gradient(to bottom, #ffe066, var(--orange)); border: 3px solid #120608; border-radius: 4px;
  box-shadow: 4px 4px 0 #120608; cursor: pointer; transition: transform .06s; }
button:hover, button.padfocus { transform: translate(-1px, -1px) rotate(-1deg); box-shadow: 6px 6px 0 #120608; }
button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #120608; }
button.ghost { background: rgba(20,8,16,.75); color: var(--cream); border-color: var(--pink); box-shadow: 4px 4px 0 rgba(0,0,0,.7); }
button:disabled { opacity: .5; }
.small { font-size: 13px; color: var(--mute); letter-spacing: .3px; }
.keys { margin-top: 18px; }
.keys.pad { display: none; } body.haspad .keys.pad { display: block; }
label { display: block; text-align: left; margin: 16px 0 6px; color: var(--cream); font-size: 15px; letter-spacing: 1px; }
label.row { display: flex; gap: 8px; align-items: center; }
input[type=range] { width: 100%; accent-color: var(--orange); }
input[type=checkbox] { accent-color: var(--orange); width: 18px; height: 18px; }
.seg { display: flex; gap: 6px; }
.seg button { margin: 0; padding: 8px 2px; font-size: 18px; letter-spacing: 1px; background: rgba(20,8,16,.75); color: var(--cream); border-color: #5c3a4c; box-shadow: none; }
.seg button.on { background: linear-gradient(to bottom, #ffe066, var(--orange)); color: #1a0a06; border-color: #120608; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#cross { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; }
#cross::before, #cross::after { content: ""; position: absolute; background: rgba(255,240,210,.85); box-shadow: 0 0 2px #000; }
#cross::before { left: 10px; top: 0; width: 2px; height: 22px; clip-path: polygon(0 0,100% 0,100% 35%,0 35%,0 65%,100% 65%,100% 100%,0 100%); }
#cross::after { top: 10px; left: 0; height: 2px; width: 22px; clip-path: polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%); }
#cross.aim { opacity: .25; }
#hit { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; opacity: 0;
  border: 2px solid #fff; transform: rotate(45deg) scale(.6); transition: opacity .12s; }
#hit.on { opacity: .95; } #hit.head { border-color: var(--gold); }
/* the Ego meter, bottom left: his health, in his own words */
#ego { position: absolute; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: rgba(14,6,12,.78); border: 2px solid #120608; border-radius: 6px; box-shadow: 3px 3px 0 rgba(0,0,0,.6); }
#ego .lbl { font: 400 30px Bangers, Impact, sans-serif; letter-spacing: 2px; color: var(--gold); text-shadow: 2px 2px 0 #120608; }
#egoBar { width: 220px; height: 18px; background: rgba(60,10,30,.9); border: 2px solid #120608; border-radius: 9px; overflow: hidden; }
#egoFill { height: 100%; width: 75%; background: linear-gradient(to bottom, #ffe066, var(--orange)); transition: width .2s; }
#egoNum { font: 700 24px Oswald, sans-serif; min-width: 44px; color: var(--cream); text-shadow: 0 2px 3px #000; }
#ego.low #egoFill { background: linear-gradient(to bottom, #ff6a8a, #c8143c); }
#ego.low .lbl { color: #ff4a6a; animation: throb .8s infinite alternate; }
#ego.max #egoFill { background: linear-gradient(to bottom, #fff, var(--pink)); box-shadow: 0 0 12px var(--pink); }
@keyframes throb { to { transform: scale(1.12); } }
#score { position: absolute; left: 20px; top: 16px; font: 400 26px Bangers, Impact, sans-serif; letter-spacing: 2px; color: var(--cream); text-shadow: 2px 2px 0 #120608; }
#score b { color: var(--gold); font-weight: 400; font-size: 34px; }
#ammo { position: absolute; right: 22px; bottom: 16px; text-align: right; font: 700 46px Oswald, sans-serif; color: var(--cream); text-shadow: 0 2px 4px #000; line-height: 1; }
#ammo small { font-size: 24px; color: var(--mute); }
#ammo.empty #mag { color: #ff4a6a; }
#gunName { font: 400 20px Bangers, Impact, sans-serif; letter-spacing: 2px; color: var(--gold); text-shadow: 2px 2px 0 #120608; }
#prompt { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); font-size: 20px; letter-spacing: .5px; text-shadow: 0 2px 4px #000; white-space: nowrap; }
#prompt.low { color: var(--gold); }
/* Buck's lines: a caption strip low in the middle */
#caption { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%) translateY(8px); max-width: min(760px, 92vw);
  padding: 8px 16px; background: rgba(10,4,8,.78); border-left: 4px solid var(--pink); border-radius: 4px; font-size: 21px; line-height: 1.3;
  opacity: 0; transition: opacity .2s, transform .2s; text-align: left; }
#caption.on { opacity: 1; transform: translateX(-50%); }
#caption b { font: 400 20px Bangers, Impact, sans-serif; letter-spacing: 2px; color: var(--pink); margin-right: 10px; }
#fps { position: absolute; left: 8px; top: 60px; font: 12px monospace; color: #8f8; }
#banner { position: absolute; left: 0; right: 0; top: 28%; text-align: center; font: 400 54px Bangers, Impact, sans-serif; letter-spacing: 3px; color: var(--gold);
  -webkit-text-stroke: 2px #120608; opacity: 0; transition: opacity .5s; }
#banner.on { opacity: 1; }
.padfocus { outline: 3px solid var(--gold); outline-offset: 3px; }

#touch { position: fixed; inset: 0; z-index: 6; }
#touch button { position: absolute; margin: 0; padding: 0; width: 64px; height: 64px; border-radius: 50%; font-size: 14px; letter-spacing: 1px;
  background: rgba(30,12,22,.6); color: var(--cream); border: 2px solid rgba(255,255,255,.35); box-shadow: none; line-height: 1; }
.stick { position: absolute; left: 24px; bottom: 90px; width: 140px; height: 140px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); }
.stick div { position: absolute; left: 45px; top: 45px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.3); }
#lookPad { position: absolute; right: 0; top: 0; width: 55%; height: 100%; }
#touch #tFire { right: 24px; bottom: 120px; width: 92px; height: 92px; font-size: 22px; background: rgba(255,122,26,.55); border-color: var(--gold); }
#touch #tReload { right: 130px; bottom: 40px; }
#touch #tUse { right: 130px; bottom: 140px; opacity: .35; }
#touch #tUse.on { opacity: 1; background: rgba(255,122,26,.7); border-color: var(--gold); }
#touch #tAim { right: 230px; bottom: 120px; } #touch #tAim.on { background: rgba(255,122,26,.7); }
#touch #tCrouch { right: 230px; bottom: 30px; font-size: 11px; }
#touch #tTaunt { right: 24px; bottom: 30px; font-size: 11px; border-color: var(--pink); }
#touch #tPause { right: 14px; top: 14px; width: 46px; height: 46px; }
@media (pointer: coarse) { #ego { left: 50%; transform: translateX(-50%); bottom: auto; top: 10px; padding: 4px 8px; }
  #egoBar { width: 130px; } #ego .lbl { font-size: 22px; } #egoNum { font-size: 18px; }
  #ammo { bottom: auto; top: 58px; right: 14px; font-size: 26px; } #ammo small { font-size: 16px; } #gunName { font-size: 15px; }
  #caption { bottom: auto; top: 112px; font-size: 16px; } #caption b { font-size: 16px; }
  #score { font-size: 18px; top: 60px; left: 14px; } #score b { font-size: 24px; } #fps { top: 100px; } }

/* the title: Buck on the rooftop in the 3D scene, the menu down the right (bottom on a phone held upright) */
#menu { background: linear-gradient(to left, rgba(10,4,10,.75), rgba(10,4,10,0) 55%); justify-content: flex-end; padding: 24px 6vw; }
#menu .panel { width: min(400px, 100%); }
#menu .credit { margin-top: 10px; }
@media (max-aspect-ratio: 1/1) {
  #menu { background: linear-gradient(to top, rgba(10,4,10,.9) 40%, rgba(10,4,10,0) 70%); align-items: flex-end; justify-content: center; }
  #menu h1 { font-size: 64px; } #menu .keys { display: none; }
}
#credits .panel p { line-height: 1.45; }