:root{
  --ink: #0b0c1a;
  --panel: #1c1710;
  --p1: #ffb020;
  --p2: #3fa9e0;
  --danger: #e8341f;
  --gold: #ffcc33;
  --frame: #6b2c17;
  --text: #f4f1e6;
  --font-display: 'Bangers', 'Bebas Neue', Impact, 'Arial Black', sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color: transparent; user-select:none;}

html,body{
  margin:0; padding:0; height:100%; background:#000;
  font-family:'Courier New', ui-monospace, monospace;
  color:var(--text);
  overflow:hidden;
}

#arcade{
  position:relative;
  width:100%; height:100%;
  max-width:1000px; max-height:750px;
  margin:0 auto;
  background:var(--ink);
  border:4px solid var(--frame);
  box-shadow:0 0 0 6px #000, 0 0 40px rgba(255,140,40,0.3) inset;
  display:flex; align-items:center; justify-content:center;
}

.screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center;
  width:100%; height:100%;
}

.hidden{display:none !important;}

/* ---------------- scanline CRT overlay ---------------- */
.scanlines{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.035) 0px,
    rgba(255,255,255,0.035) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode:overlay;
}

/* ---------------- MENU SCREEN ---------------- */
#screen-menu{
  justify-content:flex-start;
  padding:14px 14px 24px;
  background:
    linear-gradient(180deg, #bfe3f5 0%, #7fc4e0 30%, #2f6f8f 65%, #123449 100%);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.logo-wrap{ width:100%; max-width:720px; margin:0 auto; text-align:center; }
.game-logo{ width:100%; height:auto; display:block; filter:drop-shadow(0 6px 10px rgba(0,0,0,0.5)); }

.title-fallback{ display:none; }
.title{
  font-family:var(--font-display);
  font-size:clamp(32px, 7vw, 52px);
  text-align:center;
  letter-spacing:2px;
  margin:6px 0 0;
  color:var(--gold);
  text-shadow: 3px 3px 0 var(--danger), 6px 6px 0 rgba(0,0,0,0.5);
  line-height:1.05;
}
.title span{ color:var(--p2); text-shadow:3px 3px 0 #0a3550, 6px 6px 0 rgba(0,0,0,0.5); }

.subtitle{
  text-align:center; letter-spacing:4px; font-size:clamp(11px,2vw,14px);
  color:var(--p1); margin:4px 0 14px; text-shadow:1px 1px 3px rgba(0,0,0,0.5);
}

.select-block{ width:100%; max-width:820px; margin:0 auto 10px; }
.select-block h2{
  font-family:var(--font-display);
  font-size:clamp(15px,2.6vw,20px); letter-spacing:2px; color:#fff8ec;
  border-bottom:3px dashed rgba(255,255,255,0.55); padding-bottom:5px; margin:10px 0 10px;
  text-shadow:2px 2px 0 rgba(0,0,0,0.55), 0 0 8px rgba(0,0,0,0.25);
}

.option-row{ display:flex; gap:16px; justify-content:center; }

.option-card{
  flex:1; max-width:360px;
  background:var(--panel);
  border:4px solid var(--frame);
  color:var(--text);
  padding:14px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:inherit; font-size:14px; letter-spacing:1px;
  transition:transform .08s ease, border-color .1s ease;
}
.option-card span{ font-family:var(--font-display); font-size:20px; letter-spacing:1px; color:var(--gold); }
.option-card:hover{ border-color:var(--p1); }
.option-card.selected{ border-color:var(--gold); transform:translateY(-3px); box-shadow:0 5px 0 var(--danger); }
.option-card small{ color:#c9a97e; font-size:11px; letter-spacing:1px; }

.thumb{
  width:100%; height:clamp(70px, 20vh, 150px); background-size:cover; background-position:center;
  border:2px solid #000; image-rendering:pixelated;
  background-color:#2a2015;
}
.thumb-pier{ background-image:url('Assets/Pier.png'); }
.thumb-magic{ background-image:url('Assets/MagicCity.png'); }
.thumb-fighter{ background-size:contain; background-repeat:no-repeat; height:clamp(85px, 26vh, 190px); }
.thumb-fighter[data-sprite="Binface"]{ background-image:url('Assets/Binface_win.png'); }
.thumb-fighter[data-sprite="Farrage"]{ background-image:url('Assets/Farrage_idle1.png'); }

.start-btn{
  margin-top:18px;
  font-family:var(--font-display); font-size:24px; letter-spacing:2px;
  padding:14px 40px;
  background:var(--danger); color:#fff; border:4px solid #7a0f0f;
  cursor:pointer;
  box-shadow:0 5px 0 #7a0f0f;
}
.start-btn:disabled{ background:#3a3a4a; border-color:#222; box-shadow:0 5px 0 #222; cursor:not-allowed; color:#777;}
.start-btn.secondary{ background:var(--panel); border-color:var(--frame); box-shadow:0 5px 0 var(--frame); margin-top:10px;}
.start-btn:active:not(:disabled){ transform:translateY(4px); box-shadow:none; }

.hint{ font-size:11px; color:#fff8ec; text-align:center; margin-top:12px; max-width:520px; font-weight:bold; text-shadow:1px 1px 3px rgba(0,0,0,0.65); }

.site-footer{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  margin-top:16px; padding-bottom:4px;
}
.site-footer a{
  font-size:11px; font-weight:bold; color:#fff8ec; text-decoration:none;
  text-shadow:1px 1px 3px rgba(0,0,0,0.65); border-bottom:1px solid rgba(244,241,230,0.4);
}
.site-footer a:hover{ color:var(--gold); border-color:var(--gold); }

/* ---------------- GAME SCREEN ---------------- */
#screen-game{ background:#000; justify-content:flex-start; align-items:center; }

.canvas-wrap{
  width:100%; flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}

#game-canvas{
  width:auto; height:auto;
  max-width:100%; max-height:100%;
  aspect-ratio:960/540;
  background:#111; image-rendering:pixelated; display:block;
  touch-action:none;
}

.hud{
  width:100%; display:flex; align-items:flex-start; justify-content:space-between;
  padding:10px 12px 4px; background:linear-gradient(180deg,#000 0%,#0a0a0a 100%);
}
.hud-side{ flex:1; }
.hud-side-right{ text-align:right; }
.hud-name{
  font-family:var(--font-display); font-size:16px; letter-spacing:1px; color:var(--gold);
  margin-bottom:4px; text-shadow:2px 2px 0 #000, -1px -1px 0 rgba(0,0,0,0.6);
}
.hud-side-right .hud-name{ color:var(--p2); }

.healthbar-frame{
  height:20px; max-width:340px;
  background:#1a0000;
  border:2px solid #000;
  outline:2px solid #cfcfcf;
  outline-offset:1px;
  padding:2px;
  position:relative;
}
.hud-side-right .healthbar-frame{ margin-left:auto; direction:rtl; }

.healthbar{
  height:100%; width:100%;
  background:linear-gradient(180deg,#fff59a 0%, #ffd23f 35%, #ff9d1e 100%);
  transition:width .2s linear, background .15s linear;
  position:relative;
}
/* tick marks dividing the bar into segments, SF2-style */
.healthbar::after{
  content:""; position:absolute; inset:0;
  background-image:repeating-linear-gradient(
    to right, rgba(0,0,0,0.35) 0, rgba(0,0,0,0.35) 2px, transparent 2px, transparent 10%
  );
}
.healthbar.low{
  background:linear-gradient(180deg,#ff9d8a 0%, #ff4d3c 45%, #c21414 100%);
  animation: healthFlash .5s steps(2) infinite;
}
@keyframes healthFlash{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.5); } }

.hud-mid{ text-align:center; padding:0 12px; }
#timer{ font-family:var(--font-display); font-size:30px; color:#fff; text-shadow:2px 2px 0 #000; }
#round-label{ font-size:9px; color:#e3c9a0; letter-spacing:2px; }

.overlay-text{
  position:absolute; top:38%; left:50%; transform:translate(-50%,-50%);
  font-size:clamp(28px,7vw,54px); color:var(--gold);
  text-shadow:4px 4px 0 var(--danger); letter-spacing:2px;
  pointer-events:none; text-align:center;
}

/* ---------------- TOUCH HUD ---------------- */
#touch-hud{
  position:absolute; bottom:0; left:0; right:0;
  display:none;
  justify-content:space-between; align-items:flex-end;
  padding:0 18px 20px;
  pointer-events:none;
}
.show-touch #touch-hud{ display:flex; }

.pad{ display:flex; gap:8px; pointer-events:auto; }

/* ---- arcade joystick ---- */
.joystick-base{
  position:relative;
  width:118px; height:118px; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, #2a2a2a 0%, #161616 60%, #0a0a0a 100%);
  border:4px solid #050505;
  box-shadow:
    inset 0 4px 10px rgba(0,0,0,0.7),
    inset 0 -3px 6px rgba(255,255,255,0.06),
    0 4px 8px rgba(0,0,0,0.5);
  touch-action:none;
}
.joystick-base::before{
  content:""; position:absolute; inset:10px; border-radius:50%;
  border:2px dashed rgba(255,255,255,0.12);
}
.joystick-stick{
  position:absolute; left:50%; top:50%;
  width:52px; height:52px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%, #ff6b52 0%, var(--danger) 55%, #8f1a10 100%);
  border:2px solid #3a0805;
  box-shadow:0 5px 10px rgba(0,0,0,0.6), inset 0 2px 4px rgba(255,255,255,0.35);
  pointer-events:none;
}
.joystick-base::after{
  content:""; position:absolute; left:50%; top:50%; width:14px; height:14px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:#000; box-shadow:0 0 0 3px rgba(255,255,255,0.08);
}

/* ---- arcade pushbutton ---- */
.attack-btn{
  width:96px; height:96px; border-radius:50%;
  background:
    radial-gradient(circle at 35% 28%, #ff8a6e 0%, var(--danger) 45%, #7a0f0f 100%);
  border:4px solid #3a0805;
  box-shadow:
    0 6px 0 #5c0d0d, 0 9px 14px rgba(0,0,0,0.55),
    inset 0 3px 6px rgba(255,255,255,0.35);
  color:#fff; font-family:var(--font-display); letter-spacing:1px;
  display:flex; align-items:center; justify-content:center;
  padding:0; touch-action:none;
}
.attack-btn span{ font-size:16px; text-shadow:2px 2px 0 rgba(0,0,0,0.4); transform:translateY(1px); }
.attack-btn:active{
  transform:translateY(5px);
  box-shadow:0 1px 0 #5c0d0d, 0 3px 6px rgba(0,0,0,0.5), inset 0 3px 6px rgba(0,0,0,0.35);
  background:radial-gradient(circle at 35% 28%, #ffb199 0%, #ff5a3c 45%, #7a0f0f 100%);
}

/* ---------------- RESULT SCREEN ---------------- */
#screen-result{ justify-content:center; position:relative; overflow-y:auto; -webkit-overflow-scrolling:touch; }

.result-bg{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(160deg, #e8e0c9 0%, #d9d0b4 45%, #c9c0a0 100%);
}
.result-bg-photo{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; display:none;
  filter:sepia(0.4) saturate(0.9) brightness(1) contrast(1.05);
}
/* keeps the pier, the sky/turbines (Binface) or the oil rig (Farage), and the
   pier's full span in frame together instead of a centred crop losing them */
.result-bg.winner-binface .result-bg-photo{ object-position:50% 38%; }
.result-bg.winner-farrage .result-bg-photo{ object-position:50% 34%; }
.result-bg::after{
  /* ties the photo into the newsprint page look without hiding its detail */
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(228,220,196,0.16);
}
.result-deco{ position:absolute; inset:0; width:100%; height:100%; display:none; }
/* SVG illustration is a fallback only, shown while the real photo hasn't loaded yet or fails */
.result-bg.show-deco.winner-binface .deco-binface{ display:block; }
.result-bg.show-deco.winner-farrage .deco-farrage{ display:block; }

.result-content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; width:100%; height:100%; padding:14px 0 18px; box-sizing:border-box; }

.result-banner{
  background:linear-gradient(180deg,#1c1108,#0a0603);
  border-top:3px solid var(--gold); border-bottom:3px solid var(--gold);
  width:100%; padding:8px 10px 10px; box-shadow:0 4px 10px rgba(0,0,0,0.35);
}
.result-banner .title,
.result-banner .subtitle{ margin:0; }
.result-banner .subtitle{ margin-top:2px; text-shadow:2px 2px 0 #000; }

.result-stage{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center; gap:4%;
  width:100%; flex:1; min-height:0; margin:14px 0 10px; padding:0 3%;
}

/* ---- newspaper front page (left) ---- */
.newspaper{
  background:linear-gradient(165deg,#f6f0dd 0%,#ece2c6 100%);
  color:#221c12; font-family:Georgia,'Times New Roman',serif;
  width:46%; max-width:420px; min-width:230px; padding:18px 20px 22px;
  box-shadow:0 12px 28px rgba(0,0,0,0.4); transform:rotate(-2deg);
  border:1px solid #b9ac85;
  display:flex; flex-direction:column; max-height:100%; overflow:hidden; box-sizing:border-box;
}
.newspaper-masthead{
  font-size:clamp(20px,3.6vw,30px); font-weight:bold; text-align:center; letter-spacing:1px;
  border-bottom:3px double #221c12; padding-bottom:6px;
}
.newspaper-date{ font-size:12px; text-align:center; letter-spacing:1px; margin-top:4px; color:#5a5138; }
.newspaper hr{ border:none; border-top:2px solid #221c12; margin:8px 0; }
.newspaper-headline{
  font-size:clamp(19px,3.4vw,27px); font-weight:900; line-height:1.15; text-align:center;
  margin-bottom:9px; font-family:'Arial Black', Georgia, sans-serif; text-transform:uppercase;
}
.newspaper-photo{
  width:100%; flex:0 1 130px; min-height:50px; object-fit:cover; filter:grayscale(1) contrast(1.1);
  border:1px solid #221c12; display:block; margin-bottom:9px;
}
.newspaper-sub{ font-size:14px; font-style:italic; line-height:1.4; margin:0 0 10px; color:#2a2416; }
.newspaper-lines{ display:flex; flex-direction:column; gap:5px; }
.newspaper-lines span{ display:block; height:5px; background:#b9ac85; border-radius:1px; }
.newspaper-lines span:nth-child(3n+1){ width:100%; }
.newspaper-lines span:nth-child(3n+2){ width:92%; }
.newspaper-lines span:nth-child(3n+3){ width:75%; }

/* ---- winner hero portrait (right) ---- */
.winner-portrait-big{
  height:100%; max-height:475px; width:auto; image-rendering:pixelated;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,0.65));
}

.continue-box{
  text-align:center; margin-bottom:14px;
  background:linear-gradient(180deg,#1c1108,#0a0603);
  border:2px solid var(--gold); border-radius:6px;
  padding:8px 26px; box-shadow:0 4px 10px rgba(0,0,0,0.3);
}
.continue-label{ font-size:13px; letter-spacing:3px; color:var(--p1); text-shadow:2px 2px 0 #000; }
.continue-num{
  font-size:56px; color:var(--gold); text-shadow:3px 3px 0 var(--danger), 6px 6px 0 rgba(0,0,0,0.6);
  animation: pulseNum 1s steps(2) infinite;
}
@keyframes pulseNum{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }

#result-sub{ margin-bottom:6px; }

@media (max-width:640px){
  .option-row{ flex-direction:row; }
  .hint{ display:none; }
  .option-card span{ font-size:16px; }
}

/* narrow screens: side-by-side no longer fits, so stack the newspaper above
   the winner instead of letting flex-wrap hand each one the full stage height */
@media (max-width:560px){
  .result-stage{ flex-direction:column; flex-wrap:nowrap; align-items:center; gap:10px; }
  .newspaper{ width:88%; max-width:360px; flex:1 1 56%; min-height:0; max-height:none; }
  .winner-portrait-big{ flex:1 1 34%; min-height:0; height:auto; max-height:100%; width:auto; max-width:62%; object-fit:contain; }
}

@media (max-height:700px){
  .logo-wrap{ max-width:440px; }
  #screen-menu{ padding-top:8px; }
}