/* =================================================================
   Johan H2A: Chick Magnet Survival  —  UI / overlay styling
   Canvas draws the game world; everything below is the DOM overlay
   (screens, HUD, buttons, mobile controls).
   ================================================================= */

:root{
  --sky:        #6ec6ff;
  --sky-top:    #4fb0f5;
  --grass:      #7ec850;
  --dirt:       #c8a06a;
  --ink:        #243a4a;
  --cream:      #fff7e6;
  --red:        #ff5a5f;
  --red-dark:   #e23b40;
  --yellow:     #ffd23f;
  --green:      #57c84d;
  --green-dark: #3da636;
  --shadow:     0 6px 0 rgba(0,0,0,.25);
  --font: "Arial Black", "Arial Bold", Gadget, system-ui, sans-serif;
}

*{
  box-sizing:border-box; margin:0; padding:0;
  -webkit-tap-highlight-color:transparent;
  /* stop iOS long-press from selecting text / showing the copy callout on buttons */
  -webkit-user-select:none; -moz-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}

html,body{
  height:100%;
  background:#1a1410;
  font-family: var(--font);
  color:var(--ink);
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:none;
}

/* ---- Shell : keeps a 16:9-ish stage centered & fullscreen ---- */
.game-shell{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:#0e0b08;
  user-select:none;
}
#canvas{
  display:block;
  width:100%; height:100%;
  image-rendering:auto;
}

.hidden{ display:none !important; }

/* =================================================================
   SCREENS (loading / menu / how-to / credits / pause / over)
   ================================================================= */
.screen{
  position:absolute; inset:0;
  display:none;
  align-items:center; justify-content:center;
  padding:20px;
  z-index:30;
}
.screen.active{ display:flex; }

/* Dim backdrop for overlay screens that sit on top of the world */
#screen-pause, #screen-over{ background:rgba(10,15,25,.55); backdrop-filter:blur(2px); }
#screen-howto, #screen-credits{ background:rgba(10,15,25,.45); backdrop-filter:blur(2px); }
#screen-loading{ background:linear-gradient(180deg,var(--sky-top),var(--sky) 60%,var(--grass)); }
#screen-menu{ background:linear-gradient(180deg,var(--sky-top),var(--sky) 55%,var(--grass)); }

.panel{
  width:min(560px, 94vw);
  /* never taller than the screen — scroll inside if it has to (landscape phones) */
  max-height:92vh; max-height:92dvh;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--cream);
  border:6px solid #fff;
  border-radius:26px;
  box-shadow:0 14px 0 rgba(0,0,0,.28), inset 0 0 0 3px var(--ink);
  padding:30px 28px 34px;
  text-align:center;
  animation:pop .35s cubic-bezier(.2,1.3,.4,1) both;
}
.panel-text{ text-align:left; }
@keyframes pop{ from{ transform:scale(.85) translateY(14px); opacity:0; } }

/* ---- Title ----
   Outline is built from layered shadows (not -webkit-text-stroke, which
   bleeds INTO the fill on iOS Safari). This renders cleanly everywhere. */
.title{
  font-size:clamp(40px, 9vw, 78px);
  line-height:.92;
  color:var(--red);
  letter-spacing:1px;
  text-shadow:
    2px 0 var(--ink), -2px 0 var(--ink), 0 2px var(--ink), 0 -2px var(--ink),
    2px 2px var(--ink), -2px 2px var(--ink), 2px -2px var(--ink), -2px -2px var(--ink),
    0 6px 0 var(--ink);
  transform:rotate(-2deg);
}
.title-h2a{
  display:inline-block;
  margin-left:.18em;
  color:var(--yellow);
  text-shadow:
    2px 0 var(--ink), -2px 0 var(--ink), 0 2px var(--ink), 0 -2px var(--ink),
    2px 2px var(--ink), -2px 2px var(--ink), 2px -2px var(--ink), -2px -2px var(--ink),
    0 6px 0 var(--ink);
  transform:rotate(4deg);
}
.subtitle{
  margin-top:8px; margin-bottom:20px;
  font-size:clamp(15px,3.4vw,22px);
  color:var(--ink);
  letter-spacing:2px;
  text-transform:uppercase;
}

/* ---- Loading bar ---- */
.loadbar{
  height:26px; width:100%;
  background:#fff;
  border:4px solid var(--ink);
  border-radius:16px;
  overflow:hidden;
  box-shadow:inset 0 3px 6px rgba(0,0,0,.18);
}
.loadfill{
  height:100%; width:0%;
  background:repeating-linear-gradient(45deg,var(--red) 0 16px,var(--red-dark) 16px 32px);
  transition:width .15s ease-out;
}
.loadtext{ margin-top:12px; font-size:16px; color:var(--ink); }

/* ---- Buttons ---- */
.menu-buttons{ display:flex; flex-direction:column; gap:14px; margin-top:8px; }
.btn{
  font-family:var(--font);
  font-size:clamp(17px,3.6vw,22px);
  color:var(--ink);
  background:#fff;
  border:4px solid var(--ink);
  border-radius:16px;
  padding:14px 18px;
  cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,.22);
  transition:transform .06s, box-shadow .06s, background .12s;
}
.btn{ text-decoration:none; text-align:center; }
/* manipulation = normal taps, but NO double-tap-to-zoom on iOS */
.btn, .pause-btn, .btn-tiktok{ touch-action:manipulation; }
/* the volume sliders need their own touch handling to drag (pan-x only) */
.vol-slider{ touch-action:pan-x; }
.btn:hover{ background:var(--yellow); }
.btn:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.22); }
.btn-primary{ background:var(--green); color:#fff; }
.btn-primary:hover{ background:var(--green-dark); }
.btn-back{ margin-top:18px; }

/* two compact buttons side by side (keeps the menu short on phones) */
.btn-row{ display:flex; gap:12px; }
.btn-row > .btn{ flex:1 1 0; min-width:0; padding-left:8px; padding-right:8px; }
.btn-share{ background:#39b6ff; color:#fff; }
.btn-share:hover{ background:#1fa3f0; }
.btn-tiktok{ display:block; background:#111; color:#fff; border-color:#000; }
.btn-tiktok:hover{ background:#000; }
.hiscore{ margin-top:18px; font-size:14px; color:#7a6a55; }

/* ---- Text panels ---- */
.panel-text h2, .panel h2{
  font-size:clamp(26px,6vw,40px);
  color:var(--red);
  -webkit-text-stroke:2px var(--ink);
  paint-order:stroke fill;   /* draw stroke BEHIND fill so it doesn't bleed (iOS) */
  text-shadow:0 4px 0 var(--ink);
  margin-bottom:14px;
  text-align:center;
}
.panel-text p{ font-family:system-ui,sans-serif; font-weight:600; line-height:1.5; margin:10px 0; color:var(--ink); }
.howto-list{ list-style:none; margin:0 0 4px; font-family:system-ui,sans-serif; font-weight:600; }
.howto-list li{ padding:8px 10px; margin:6px 0; background:#fff; border-radius:12px; border:2px solid #e6dcc4; }
.howto-list b{ color:var(--red-dark); }
/* How To Play uses two columns so it stays short on landscape phones */
.howto-panel{ width:min(840px, 96vw); }
.howto-cols{ display:flex; gap:18px; text-align:left; align-items:flex-start; }
.howto-col{ flex:1 1 0; min-width:0; }
@media (max-width:640px){ .howto-cols{ flex-direction:column; gap:0; } }
.legend{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:14px 0; }
.legend span{ background:#fff; border:2px solid #e6dcc4; border-radius:20px; padding:6px 12px; font-family:system-ui,sans-serif; font-weight:700; font-size:14px; }
.tip{ font-family:system-ui,sans-serif; background:#fff6d6; border:2px dashed var(--yellow); border-radius:12px; padding:10px 12px; }
.howto-mobile{ font-family:system-ui,sans-serif; background:#e8f6ff; border:2px dashed #4fb0f5; border-radius:12px; padding:10px 12px; }
.credit-logo{
  display:block; margin:0 auto 14px;
  width:min(180px, 55%); height:auto;
  border-radius:16px; border:3px solid var(--ink);
  box-shadow:0 6px 0 rgba(0,0,0,.22);
}
.credit-line{ font-size:18px; }
.credit-small{ text-align:center; color:#7a6a55; font-size:13px; margin-top:18px; }

/* ---- Game over results ---- */
.over-title{ color:var(--red); }
.results{ margin:16px 0 22px; font-family:system-ui,sans-serif; }
.result-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; margin:7px 0;
  background:#fff; border-radius:12px; border:2px solid #e6dcc4;
  font-weight:700; font-size:16px;
}
.result-row b{ font-size:20px; color:var(--ink); }
.result-row.best{ background:#fff6d6; border-color:var(--yellow); }
.result-row.best b{ color:var(--red-dark); }

/* ---- About page ---- */
.about-panel{ width:min(760px, 96vw); }
.about-cols{ display:flex; gap:20px; text-align:left; align-items:center; }
.about-col{ flex:1 1 0; min-width:0; }
.about-col-cta{ flex:0 0 38%; text-align:center; }
.about-icon{ width:104px; height:104px; border-radius:22px; border:3px solid var(--ink); box-shadow:0 6px 0 rgba(0,0,0,.22); }
.about-tag{ font-family:system-ui,sans-serif; font-style:italic; font-weight:700; color:#7a6a55; margin:8px 0 12px; text-align:center; }
@media (max-width:640px){ .about-cols{ flex-direction:column; gap:8px; } .about-col-cta{ flex:none; } }

/* ---- Sound settings panel (modal) ---- */
.sound-panel{
  position:absolute; inset:0; z-index:62;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,15,25,.55); backdrop-filter:blur(2px); padding:16px;
}
.sound-card{
  width:min(360px, 92vw);
  max-height:92vh; max-height:92dvh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--cream); border:6px solid #fff; border-radius:22px;
  box-shadow:0 14px 0 rgba(0,0,0,.28), inset 0 0 0 3px var(--ink);
  padding:22px 22px 24px; text-align:center;
  display:flex; flex-direction:column; gap:12px;
  animation:pop .3s cubic-bezier(.2,1.3,.4,1) both;
}
.sound-card h2{
  color:var(--red); -webkit-text-stroke:2px var(--ink); paint-order:stroke fill;
  text-shadow:0 4px 0 var(--ink); font-size:30px; margin-bottom:2px;
}
.toggle-btn{ font-size:17px; }
.toggle-btn.off{ background:#e9e2d2; color:#9a8f7c; }
.vol-slider{ width:100%; height:30px; margin:-4px 0 2px; cursor:pointer; accent-color:var(--green); }

/* ---- Toast (link copied, etc.) ---- */
.toast{
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  z-index:80; opacity:0; pointer-events:none;
  background:rgba(36,58,74,.96); color:#fff;
  font-family:system-ui,sans-serif; font-weight:700; font-size:15px;
  padding:10px 18px; border-radius:20px; box-shadow:0 6px 0 rgba(0,0,0,.3);
  transition:opacity .2s, transform .2s;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* =================================================================
   IN-GAME HUD
   ================================================================= */
.hud{
  position:absolute; inset:0;
  pointer-events:none;
  padding:14px 16px;
  z-index:20;
  font-family:var(--font);
}
/* level progress bar pinned to the very top edge */
.level-prog{
  position:absolute; top:0; left:0; right:0; height:8px;
  background:rgba(255,255,255,.45);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.level-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--green),var(--yellow));
  transition:width .12s linear;
}
.level-tag{
  margin-top:8px;
  display:inline-block;
  background:rgba(36,58,74,.82); color:#fff;
  font-size:14px; letter-spacing:1px;
  padding:3px 10px; border-radius:10px;
  box-shadow:0 3px 0 rgba(0,0,0,.2);
}
.meters{ display:flex; gap:6px; margin-top:8px; }
.meter{
  font-family:system-ui,sans-serif; font-weight:800; font-size:12px;
  background:rgba(255,255,255,.9); color:var(--ink);
  border:2px solid var(--ink); border-radius:20px;
  padding:2px 9px; box-shadow:0 2px 0 rgba(0,0,0,.18);
}
.heart-meter{ background:#ffe3ea; }
.corn-meter{ background:#fff3c9; }
.lc-title{ color:var(--green-dark) !important; }

.hud-left{ position:absolute; top:22px; left:16px; }
.hud-right{ position:absolute; top:14px; right:16px; display:flex; align-items:center; gap:12px; }
.shields{ display:flex; gap:6px; font-size:30px; filter:drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.shield{ transition:transform .2s; }
.shield.lost{ opacity:.25; filter:grayscale(1); transform:scale(.8); }

.hud-stat{
  display:flex; flex-direction:column; align-items:flex-end;
  background:rgba(255,255,255,.85);
  border:3px solid var(--ink);
  border-radius:12px;
  padding:4px 12px;
  line-height:1.05;
  box-shadow:0 4px 0 rgba(0,0,0,.2);
}
.hud-label{ font-size:11px; color:#7a6a55; letter-spacing:1px; }
.hud-stat span:last-child{ font-size:20px; color:var(--ink); }

.pause-btn{
  pointer-events:auto;
  width:46px; height:46px;
  font-family:var(--font);
  font-size:18px; letter-spacing:2px;
  color:var(--ink); background:#fff;
  border:3px solid var(--ink); border-radius:12px;
  cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.2);
}
.pause-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.2); }

.combo-tag{
  margin-top:10px;
  font-size:24px; color:var(--yellow);
  -webkit-text-stroke:2px var(--ink);
  paint-order:stroke fill;
  text-shadow:0 3px 0 var(--ink);
  opacity:0; transform:translateY(-6px) rotate(-4deg);
}
.combo-tag.show{ animation:combo .9s ease-out; }
@keyframes combo{
  0%{ opacity:0; transform:scale(.4) rotate(-10deg); }
  25%{ opacity:1; transform:scale(1.25) rotate(-4deg); }
  70%{ opacity:1; transform:scale(1) rotate(-4deg); }
  100%{ opacity:0; transform:translateY(-20px) rotate(-4deg); }
}

.power-tags{
  position:absolute; left:50%; bottom:96px; transform:translateX(-50%);
  display:flex; gap:8px;
}
.power-pill{
  font-family:system-ui,sans-serif; font-weight:800; font-size:13px;
  background:rgba(255,255,255,.9); border:2px solid var(--ink);
  border-radius:20px; padding:4px 12px;
  box-shadow:0 3px 0 rgba(0,0,0,.2);
}

/* =================================================================
   TOUCH CONTROLS
   ================================================================= */
.touch{
  position:absolute; inset:auto 0 0 0;
  display:flex; justify-content:space-between;
  padding:0 18px 18px;
  z-index:25;
  pointer-events:none;
}
.touch-cluster{ display:flex; gap:14px; pointer-events:none; }
.tbtn{
  pointer-events:auto;
  touch-action:none;                 /* no zoom/scroll/selection from the buttons */
  width:72px; height:72px;
  font-family:var(--font); font-size:18px;
  color:#fff; background:rgba(36,58,74,.7);
  border:3px solid #fff; border-radius:50%;
  box-shadow:0 5px 0 rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.tbtn:active, .tbtn.pressed{ transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.3); background:rgba(255,90,95,.85); }
.tbtn.jump{ width:92px; height:92px; background:rgba(87,200,77,.8); font-size:18px; }
.tbtn.duck{ background:rgba(255,210,63,.8); color:var(--ink); }

/* ---- Rotate-to-landscape prompt (phones) ---- */
.rotate-overlay{
  position:absolute; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--sky-top),var(--sky) 60%,var(--grass));
  text-align:center; padding:24px;
}
.rotate-inner h2{
  font-size:clamp(22px,7vw,34px); color:var(--red);
  -webkit-text-stroke:2px var(--ink); paint-order:stroke fill; text-shadow:0 4px 0 var(--ink);
  margin:10px 0;
}
.rotate-inner p{ font-family:system-ui,sans-serif; font-weight:700; color:var(--ink); }
.rotate-icon{ font-size:64px; animation:rotate-wobble 1.6s ease-in-out infinite; }
@keyframes rotate-wobble{
  0%,100%{ transform:rotate(-12deg); }
  50%{ transform:rotate(78deg); }
}

@media (max-width:520px){
  .panel{ padding:22px 18px 26px; }
  .tbtn{ width:64px; height:64px; }
  .tbtn.jump{ width:82px; height:82px; }
  /* shrink the HUD so hearts and score never collide on narrow phones */
  .shields{ font-size:22px; gap:3px; }
  .hud-right{ gap:7px; }
  .hud-stat{ padding:3px 8px; }
  .hud-label{ font-size:9px; }
  .hud-stat span:last-child{ font-size:15px; }
  .pause-btn{ width:40px; height:40px; font-size:15px; }
}

/* Landscape phones are SHORT — make the overlay panels compact so the whole
   thing (incl. the button) fits on screen. Combined with .panel scroll. */
@media (max-height:600px){
  .screen{ padding:6px; }
  .panel{ padding:12px 20px 12px; border-radius:16px; border-width:4px; }
  .title{ font-size:clamp(28px,8vh,52px); }
  .subtitle{ margin:3px 0 7px; font-size:14px; }
  .panel h2, .panel-text h2{ font-size:clamp(19px,6vh,28px); margin-bottom:5px; }
  .results{ margin:5px 0 7px; }
  .result-row{ padding:3px 12px; margin:2px 0; font-size:12.5px; }
  .result-row b{ font-size:14px; }
  .menu-buttons{ gap:6px; margin-top:3px; }
  .btn{ padding:7px 14px; font-size:15px; box-shadow:0 4px 0 rgba(0,0,0,.22); }
  .btn-back{ margin-top:6px; }
  .credit-logo{ width:58px; margin-bottom:4px; }
  .credit-line{ font-size:15px; }
  .panel-text p{ margin:4px 0; font-size:13px; line-height:1.35; }
  .credit-small{ margin-top:6px; }
  .hiscore{ margin-top:8px; }
  .howto-cols{ gap:12px; }
  .howto-list{ margin:0 0 2px; }
  .howto-list li{ padding:4px 8px; margin:3px 0; font-size:12.5px; line-height:1.3; }
  .legend{ margin:6px 0; gap:5px; }
  .legend span{ padding:2px 8px; font-size:11.5px; }
  .tip, .howto-mobile{ padding:6px 9px; font-size:12px; }
  .btn-row{ gap:8px; }
  .about-cols{ gap:12px; }
  .about-icon{ width:66px; height:66px; }
  .about-tag{ margin:4px 0 8px; }
  .sound-card{ padding:14px 18px 16px; gap:9px; }
  .sound-card h2{ font-size:24px; }
  .vol-slider{ height:26px; }
}