@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Share+Tech+Mono&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html,body{
  width:100%;height:100%;
  overflow:hidden;
  background:#6ab934;
  touch-action:none;
  user-select:none;-webkit-user-select:none;
}
body{
  display:flex;flex-direction:column;align-items:center;
  font-family:'Share Tech Mono',monospace;
  /* Safe area for notched phones */
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}

/* ── Portrait lock message (phones in landscape only, not desktops) ── */
#rotateMsg{
  display:none;position:fixed;inset:0;z-index:999;
  background:#2d6a1f;color:#c8f0a0;
  flex-direction:column;align-items:center;justify-content:center;gap:16px;
  font-family:'Black Ops One',cursive;font-size:1.4rem;letter-spacing:2px;text-align:center;
  padding:24px;
}
#rotateMsg .icon{font-size:3rem;animation:spin 2s linear infinite}
@keyframes spin{0%{transform:rotate(0)}50%{transform:rotate(90deg)}100%{transform:rotate(90deg)}}
/* Only block landscape on narrow phones (max-width:600px), not tablets or desktops */
@media(orientation:landscape) and (max-width:600px){
  #rotateMsg{display:flex}
  body>*:not(#rotateMsg){display:none!important}
}

/* ── HUD ── */
#hud{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:8px 14px 6px;
  background:linear-gradient(180deg,#1a4a0e 0%,#2d6a1f 100%);
  border-bottom:3px solid #1a3d0a;
  flex-shrink:0;z-index:10;
  box-shadow:0 2px 8px rgba(0,0,0,0.35);
}
.hud-stat{display:flex;flex-direction:column;align-items:center;gap:1px}
.hud-label{color:#8fd460;font-size:0.52rem;letter-spacing:1.5px;text-transform:uppercase}
.hud-val{color:#f0f8e0;font-size:0.88rem;font-weight:bold;letter-spacing:1px;text-shadow:0 1px 3px rgba(0,0,0,0.4)}
.hud-title{display:flex;flex-direction:column;align-items:center;gap:1px}
.hud-title-main{
  font-family:'Black Ops One',cursive;
  font-size:clamp(0.6rem,4vw,0.9rem);
  color:#d4f5a0;letter-spacing:2px;
  text-shadow:0 0 12px rgba(180,255,80,0.4),0 2px 0 #1a4a0e;
  white-space:nowrap;
}
.hud-title-sub{font-size:0.42rem;color:#8fd460;letter-spacing:1px}

/* ── Canvas ── */
#gameCanvas{display:block;flex-shrink:0;touch-action:none}

/* ── Control bar ── */
#controlBar{
  width:100%;display:none;
  flex-direction:row;justify-content:space-between;align-items:center;
  padding:10px 18px max(14px,env(safe-area-inset-bottom));
  flex-shrink:0;
  background:linear-gradient(0deg,#1a4a0e 0%,#2d6a1f 100%);
  border-top:3px solid #1a3d0a;
  box-shadow:0 -2px 8px rgba(0,0,0,0.3);
}
.ctrl-info{display:flex;flex-direction:column;align-items:center;gap:3px}
.ctrl-info span:first-child{color:#8fd460;font-size:0.48rem;letter-spacing:1px;text-transform:uppercase}
.ctrl-info span:last-child{color:#d4f5a0;font-size:0.85rem;font-weight:bold}

/* Joystick */
#joystick{
  width:88px;height:88px;border-radius:50%;
  background:rgba(0,0,0,0.2);
  border:2.5px solid rgba(180,255,100,0.25);
  position:relative;pointer-events:all;touch-action:none;flex-shrink:0;
}
#joystick::after{
  content:'';position:absolute;inset:18px;border-radius:50%;
  border:1px dashed rgba(180,255,100,0.15);
}
#joystickKnob{
  width:36px;height:36px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#f0e060,#b08010);
  box-shadow:0 0 12px rgba(220,200,0,0.5);
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;
}

/* D-pad */
#dpad{width:112px;height:112px;position:relative;touch-action:none;flex-shrink:0}
.dp{
  position:absolute;width:34px;height:34px;
  background:rgba(0,0,0,0.2);
  border:1.5px solid rgba(180,255,100,0.25);
  border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:0.88rem;color:#c8f0a0;
  touch-action:none;-webkit-tap-highlight-color:transparent;
}
.dp.pressed,.dp:active{background:rgba(180,255,80,0.25);color:#f0f8e0}
#dp-up{top:0;left:39px}#dp-down{bottom:0;left:39px}
#dp-left{top:39px;left:0}#dp-right{top:39px;right:0}

/* ── Overlay ── */
#overlay{
  position:fixed;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  text-align:center;
  background:rgba(10,30,5,0.94);
  z-index:100;padding:28px;overflow-y:auto;
}
#overlay .subtitle{
  font-family:'Share Tech Mono',monospace;
  font-size:clamp(0.9rem,4.5vw,1.2rem);
  color:#d4f5a0;
  letter-spacing:1px;
  margin-bottom:-6px;
  line-height:1.4;
}
#overlay .subtitle em{
  font-style:normal;
  font-weight:bold;
  color:#f0f8e0;
}
#overlay h1{
  font-family:'Black Ops One',cursive;
  font-size:clamp(1.8rem,10vw,3rem);
  line-height:1.1;letter-spacing:3px;
  color:#d4f5a0;
  text-shadow:0 0 30px rgba(120,220,40,0.5),0 3px 0 #1a4a0e;
}
#overlay .instructions{
  color:#a8dc80;
  font-size:clamp(0.78rem,3.5vw,0.96rem);
  line-height:1.9;
  max-width:300px;
  list-style:none;
  padding:0;
  margin:0;
  text-align:left;
}
#overlay .instructions li::before{
  content:'→ ';
  color:#d4f5a0;
  font-weight:bold;
}
#overlay h2{
  font-family:'Black Ops One',cursive;
  font-size:clamp(1.4rem,7vw,2.2rem);
  color:#d4f5a0;
  text-shadow:0 0 20px rgba(120,220,40,0.5);
}
#overlay p{color:#a8dc80;font-size:clamp(0.74rem,3.2vw,0.9rem);line-height:1.8;max-width:290px}
.score-big{
  font-family:'Black Ops One',cursive;font-size:clamp(2.2rem,11vw,3.2rem);
  color:#f0e060;text-shadow:0 0 24px rgba(240,224,0,0.6);
}
.btn{
  padding:clamp(11px,3.5vw,15px) clamp(28px,9vw,46px);
  background:#e63946;color:#fff;border:none;
  font-family:'Black Ops One',cursive;
  font-size:clamp(0.9rem,4.5vw,1.15rem);letter-spacing:3px;
  cursor:pointer;border-radius:8px;
  box-shadow:0 5px 0 #9b1d24,0 0 20px rgba(230,57,70,0.4);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
#hint{color:#6ab040;font-size:clamp(0.58rem,2.5vw,0.72rem);margin-top:-6px}

/* ── Win popup (floats over the game, not full-screen) ── */
#winPopup{
  display:none;
  position:fixed;
  inset:0;
  z-index:200;
  align-items:center;
  justify-content:center;
  /* blurred grass backdrop */
  background:rgba(20,60,10,0.55);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  padding:20px;
}
#winCard{
  background:linear-gradient(160deg,#eaffd0 0%,#c8f09a 40%,#a8e070 100%);
  border:4px solid #4aaa1a;
  border-radius:24px;
  box-shadow:0 8px 40px rgba(0,0,0,0.45), 0 0 0 2px #7dd63a inset;
  padding:28px 24px 24px;
  max-width:320px;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;
  position:relative;
  overflow:hidden;
  animation:popIn 0.45s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
@keyframes popIn{
  0%{transform:scale(0.4);opacity:0}
  100%{transform:scale(1);opacity:1}
}

/* Sheen sweep across the card */
#winCard::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,0.45) 50%,transparent 70%);
  animation:sheen 2.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sheen{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.win-trophy{
  font-size:clamp(3rem,14vw,4.5rem);
  animation:bounce 0.6s ease-in-out infinite alternate;
  line-height:1;
}
@keyframes bounce{0%{transform:translateY(0) rotate(-5deg)}100%{transform:translateY(-8px) rotate(5deg)}}

.win-title{
  font-family:'Black Ops One',cursive;
  font-size:clamp(1.5rem,8vw,2.2rem);
  color:#1a5a08;
  letter-spacing:3px;
  text-shadow:0 2px 0 rgba(255,255,255,0.6),0 0 20px rgba(80,200,20,0.4);
  line-height:1.15;
}
.win-sub{
  font-family:'Share Tech Mono',monospace;
  color:#2d7a10;font-size:clamp(0.72rem,3.5vw,0.9rem);
  line-height:1.6;max-width:260px;
}

.win-stats{
  display:flex;gap:16px;margin:4px 0;
}
.win-stat{
  background:rgba(255,255,255,0.45);
  border-radius:12px;padding:8px 14px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  border:1.5px solid rgba(80,180,20,0.35);
  flex:1;
}
.win-stat-label{
  font-size:0.5rem;letter-spacing:1.5px;text-transform:uppercase;
  color:#3a8a10;font-family:'Share Tech Mono',monospace;
}
.win-stat-val{
  font-family:'Black Ops One',cursive;
  font-size:clamp(1.3rem,6vw,1.8rem);
  color:#1a5a08;
  text-shadow:0 1px 0 rgba(255,255,255,0.5);
}

.win-btn{
  margin-top:6px;
  padding:clamp(12px,3.5vw,16px) clamp(32px,10vw,52px);
  background:linear-gradient(180deg,#5cd61a 0%,#3aa010 100%);
  color:#fff;border:none;
  font-family:'Black Ops One',cursive;
  font-size:clamp(0.95rem,4.5vw,1.2rem);letter-spacing:3px;
  cursor:pointer;border-radius:10px;
  box-shadow:0 5px 0 #1e6008,0 0 24px rgba(80,200,20,0.5);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  width:100%;
  transition:transform 0.1s,box-shadow 0.1s;
}
.win-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #1e6008}

/* Confetti canvas layered over the popup */
#confettiCanvas{
  position:fixed;inset:0;pointer-events:none;z-index:201;
}

/* ── Loss popup (same structure, red theme) ── */
#lossPopup{
  display:none;
  position:fixed;inset:0;z-index:200;
  align-items:center;justify-content:center;
  background:rgba(60,10,10,0.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  padding:20px;
}
#lossCard{
  background:linear-gradient(160deg,#ffe0d0 0%,#f0a080 40%,#e06040 100%);
  border:4px solid #cc3010;border-radius:24px;
  box-shadow:0 8px 40px rgba(0,0,0,0.45),0 0 0 2px #ff6644 inset;
  padding:28px 24px 24px;max-width:320px;width:100%;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;position:relative;overflow:hidden;
  animation:popIn 0.45s cubic-bezier(0.175,0.885,0.32,1.275) both;
}
.loss-icon{font-size:clamp(3rem,14vw,4.5rem);line-height:1}
.loss-title{
  font-family:'Black Ops One',cursive;
  font-size:clamp(1.5rem,8vw,2.1rem);
  color:#5a0800;letter-spacing:3px;
  text-shadow:0 2px 0 rgba(255,200,180,0.6);line-height:1.15;
}
.loss-sub{font-family:'Share Tech Mono',monospace;color:#7a2010;font-size:clamp(0.7rem,3.2vw,0.88rem);line-height:1.6;max-width:260px}
.loss-btn{
  margin-top:6px;
  padding:clamp(12px,3.5vw,16px) clamp(32px,10vw,52px);
  background:linear-gradient(180deg,#e63946 0%,#b01828 100%);
  color:#fff;border:none;font-family:'Black Ops One',cursive;
  font-size:clamp(0.95rem,4.5vw,1.2rem);letter-spacing:3px;
  cursor:pointer;border-radius:10px;
  box-shadow:0 5px 0 #6a0810,0 0 24px rgba(230,57,70,0.5);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  width:100%;transition:transform 0.1s,box-shadow 0.1s;
}
.loss-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #6a0810}

/* ── Leaderboard: popup layout (stacks card + lb-panel vertically) ── */
#winPopup,#lossPopup{flex-direction:column;gap:14px;overflow-y:auto}

/* ── Leaderboard submission panel ──────────────────────────────────── */
.lb-panel{
  display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(160deg,#1a4a0e 0%,#2d6a1f 100%);
  border:2px solid #4aaa1a;border-radius:18px;
  box-shadow:0 6px 24px rgba(0,0,0,0.35),0 0 0 1.5px #7dd63a inset;
  padding:18px 16px 16px;
  max-width:320px;width:100%;
}

.lb-submit-section{display:flex;flex-direction:column;gap:10px}

.lb-prompt{
  font-family:'Black Ops One',cursive;
  font-size:clamp(0.88rem,4vw,1.05rem);
  color:#d4f5a0;letter-spacing:2px;text-align:center;margin:0;
}

.lb-input-row{display:flex;gap:8px;align-items:stretch}

.lb-name-input{
  flex:1;min-width:0;
  background:rgba(0,0,0,0.30);
  border:1.5px solid rgba(180,255,100,0.35);border-radius:8px;
  padding:10px 12px;
  color:#d4f5a0;font-family:'Share Tech Mono',monospace;
  font-size:clamp(0.78rem,3.5vw,0.9rem);letter-spacing:1px;
  text-transform:uppercase;outline:none;
}
.lb-name-input::placeholder{color:rgba(180,255,100,0.38)}
.lb-name-input:focus{border-color:rgba(180,255,100,0.70);background:rgba(0,0,0,0.45)}

.lb-submit-btn{
  flex-shrink:0;
  padding:10px 14px;
  background:linear-gradient(180deg,#5cd61a 0%,#3aa010 100%);
  color:#fff;border:none;
  font-family:'Black Ops One',cursive;
  font-size:clamp(0.72rem,3vw,0.85rem);letter-spacing:2px;
  cursor:pointer;border-radius:8px;
  box-shadow:0 4px 0 #1e6008;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform 0.1s,box-shadow 0.1s;white-space:nowrap;
}
.lb-submit-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #1e6008}
.lb-submit-btn:disabled{opacity:0.6;cursor:default}

/* ── Results section (shown after submit) ───────────────────────── */
.lb-results-section{display:flex;flex-direction:column;gap:8px}

.lb-confirm{
  font-family:'Share Tech Mono',monospace;
  font-size:clamp(0.70rem,3vw,0.82rem);color:#a8dc80;
  text-align:center;letter-spacing:0.5px;margin:0;
}

.lb-list-title{
  font-family:'Black Ops One',cursive;
  font-size:clamp(0.80rem,3.5vw,0.95rem);
  color:#d4f5a0;letter-spacing:2px;text-align:center;
  border-top:1px solid rgba(180,255,100,0.2);padding-top:8px;
}

.lb-results{
  display:flex;flex-direction:column;gap:3px;
  max-height:220px;overflow-y:auto;
}

/* ── Leaderboard rows ──────────────────────────────────────────── */
.lb-header-row{
  font-size:0.46rem;letter-spacing:1.5px;text-transform:uppercase;
  color:#8fd460;border-bottom:1px solid rgba(180,255,100,0.2);padding-bottom:4px;
}
.lb-row{
  display:grid;grid-template-columns:2rem 1fr auto auto;
  gap:6px;align-items:center;padding:4px 6px;border-radius:6px;
  font-family:'Share Tech Mono',monospace;
  font-size:clamp(0.64rem,2.8vw,0.78rem);color:#d4f5a0;
}
.lb-row-gold{background:rgba(240,224,0,0.12)}
.lb-rank{text-align:center;font-size:clamp(0.70rem,3vw,0.88rem)}
.lb-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-score{
  font-family:'Black Ops One',cursive;color:#f0e060;
  text-align:right;white-space:nowrap;
}
.lb-date{color:#6ab040;font-size:0.58rem;text-align:right;white-space:nowrap}

.lb-empty,.lb-loading{
  font-family:'Share Tech Mono',monospace;color:#6ab040;
  font-size:clamp(0.68rem,3vw,0.80rem);text-align:center;
  padding:12px 0;margin:0;
}

/* ── VIEW LEADERBOARD button on main menu ─────────────────────── */
.lb-view-btn{
  padding:clamp(11px,3.5vw,15px) clamp(24px,8vw,40px);
  background:linear-gradient(180deg,#f5c842 0%,#c89010 100%);
  color:#1a3d0a;border:none;
  font-family:'Black Ops One',cursive;
  font-size:clamp(0.84rem,4vw,1.05rem);letter-spacing:2px;
  cursor:pointer;border-radius:8px;
  box-shadow:0 5px 0 #7a5500,0 0 20px rgba(240,180,0,0.4);
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform 0.1s,box-shadow 0.1s;
}
.lb-view-btn:hover,.lb-view-btn:active{
  transform:translateY(2px);box-shadow:0 3px 0 #7a5500,0 0 20px rgba(240,180,0,0.4);
}

/* ── Full leaderboard modal ────────────────────────────────────── */
#lbModal{
  display:none;position:fixed;inset:0;z-index:300;
  align-items:center;justify-content:center;
  background:rgba(10,30,5,0.94);
  padding:20px;
}
#lbModalCard{
  background:linear-gradient(160deg,#1a4a0e 0%,#2d6a1f 100%);
  border:3px solid #4aaa1a;border-radius:20px;
  box-shadow:0 8px 40px rgba(0,0,0,0.5),0 0 0 1.5px #7dd63a inset;
  padding:24px 20px 20px;
  max-width:340px;width:100%;
  display:flex;flex-direction:column;gap:14px;
  max-height:90vh;overflow-y:auto;
}
.lb-modal-title{
  font-family:'Black Ops One',cursive;
  font-size:clamp(1.3rem,7vw,1.8rem);color:#d4f5a0;
  letter-spacing:3px;text-align:center;
  text-shadow:0 0 20px rgba(120,220,40,0.4);
}
.lb-modal-results .lb-results{max-height:55vh}
.lb-modal-close-btn{
  align-self:center;
  padding:clamp(10px,3vw,13px) clamp(24px,8vw,40px);
  background:linear-gradient(180deg,#e63946 0%,#b01828 100%);
  color:#fff;border:none;
  font-family:'Black Ops One',cursive;
  font-size:clamp(0.85rem,4vw,1rem);letter-spacing:2px;
  cursor:pointer;border-radius:10px;
  box-shadow:0 4px 0 #6a0810;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform 0.1s,box-shadow 0.1s;
}
.lb-modal-close-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #6a0810}

/* ── Home screen hero image ──────────────────────────────────── */
.home-hero{
  width:clamp(200px,85vw,340px);height:auto;
  object-fit:contain;
  flex-shrink:0;
}

/* ── Instructions overlay ────────────────────────────────────── */
#instrOverlay{
  position:fixed;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;
  text-align:center;
  background:rgba(10,30,5,0.96);
  z-index:101;padding:32px 28px;overflow-y:auto;
}
.instr-title{
  font-family:'Black Ops One',cursive;
  font-size:clamp(1.6rem,8vw,2.4rem);
  color:#d4f5a0;letter-spacing:3px;
  text-shadow:0 0 30px rgba(120,220,40,0.5),0 3px 0 #1a4a0e;
}
.instr-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:14px;
  max-width:320px;
}
.instr-list li{
  color:#a8dc80;
  font-size:clamp(0.88rem,4vw,1.05rem);
  line-height:1.65;
  text-align:left;
  padding-left:1.6em;
  position:relative;
}
.instr-list li::before{content:'→';position:absolute;left:0;color:#d4f5a0;font-weight:bold}
.instr-list li strong{color:#ffd166}
.instr-danger{color:#e63946!important}
.instr-danger::before{color:#e63946!important}
.instr-danger strong{color:#e63946!important}
.instr-warn{color:#ffd166!important}
.instr-warn::before{color:#ffd166!important}