/* Fish Frenzy — mobile-first portrait HUD */
:root {
  --gold-1: #ffcf3a;
  --gold-2: #ff9d15;
  --gold-3: #ffef9d;
  --ink: #071a2e;
  --cyan: #7fe6ff;
  --panel: rgba(7, 28, 52, 0.86);
  --danger: #ff4133;
  --outline: 0 2px 0 rgba(4, 16, 30, .75), 0 -1px 0 rgba(4, 16, 30, .55),
             2px 0 0 rgba(4, 16, 30, .55), -2px 0 0 rgba(4, 16, 30, .55),
             0 4px 14px rgba(0, 0, 0, .55);
  --font: 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --barW: min(64vw, 400px);
  --barH: clamp(13px, 3.2vw, 18px);
}

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

html, body {
  margin: 0; padding: 0; height: 100%; width: 100%;
  background: #04182c; color: #fff;
  font-family: var(--font);
  overflow: hidden; overscroll-behavior: none;
  touch-action: none; user-select: none; -webkit-user-select: none;
}

#app { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
#c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.ui-click { pointer-events: auto; }

/* ---------------- top bar ---------------- */
#top {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 50%; transform: translateX(-50%);
  width: var(--barW);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
#levelText {
  font-weight: 900;
  font-size: clamp(15px, 4.4vw, 26px);
  letter-spacing: .14em;
  text-shadow: var(--outline);
  color: #fff;
}
#mainBar {
  width: 100%; height: var(--barH);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(3,14,26,.92), rgba(6,28,50,.86));
  box-shadow: inset 0 2px 6px rgba(0,0,0,.7), 0 0 0 2px rgba(3,16,30,.85), 0 2px 8px rgba(0,0,0,.45);
  overflow: hidden; position: relative;
}
#mainFill {
  height: 100%; width: 12%;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-3) 0%, var(--gold-1) 42%, var(--gold-2) 100%);
  box-shadow: 0 0 12px rgba(255,190,60,.55), inset 0 -2px 0 rgba(140,70,0,.35);
  transition: width .18s cubic-bezier(.3,1.4,.5,1);
}
/* frenzy re-skins the same bar instead of adding a second one */
#mainBar.frenzy { box-shadow: inset 0 2px 6px rgba(0,0,0,.7), 0 0 0 2px rgba(90,20,0,.9), 0 0 16px rgba(255,110,30,.55); }
#mainBar.frenzy #mainFill {
  background: linear-gradient(180deg, #ffe89a 0%, #ff9d2e 45%, #ff3d2e 100%);
  box-shadow: 0 0 14px rgba(255,110,40,.85), inset 0 -2px 0 rgba(120,20,0,.4);
  transition: width .08s linear;
}
#levelText.frenzy { color: #ffd66a; text-shadow: var(--outline), 0 0 16px rgba(255,140,40,.8); }
#mainFill.pump { animation: pump .45s ease-out; }
@keyframes pump {
  0% { filter: brightness(2.2); transform: scaleY(1.5); }
  100% { filter: brightness(1); transform: scaleY(1); }
}

/* ---------------- score / lives ---------------- */
#topRight {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
#score {
  font-weight: 900; font-size: clamp(16px, 4.6vw, 26px);
  letter-spacing: .04em; text-shadow: var(--outline);
  font-variant-numeric: tabular-nums;
}
#lives { display: flex; gap: 4px; }
.life { width: clamp(17px, 4.6vw, 24px); height: clamp(12px, 3.2vw, 17px); color: #ff8322; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.life.lost { color: rgba(255,255,255,.20); }

#topLeft {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  display: flex; gap: 8px;
}
.iconBtn {
  width: 36px; height: 36px; border-radius: 12px; border: 0;
  background: rgba(6,28,52,.55); color: #cfeaff;
  display: grid; place-items: center; padding: 7px;
  box-shadow: 0 2px 8px rgba(0,0,0,.35), inset 0 0 0 1.5px rgba(140,220,255,.22);
  cursor: pointer;
}
.iconBtn svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
.iconBtn .wave { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.iconBtn.off .wave { display: none; }
.iconBtn.off::after {
  content: ''; position: absolute; width: 26px; height: 2.5px; background: #ff6a5a;
  transform: rotate(-45deg); border-radius: 2px;
}
.iconBtn { position: relative; }
.iconBtn:active { transform: scale(.93); }

/* ---------------- combo / frenzy ---------------- */
#combo {
  opacity: 0; transform: scale(.6); transform-origin: right center;
  font-weight: 900; font-size: clamp(13px, 3.6vw, 19px);
  color: var(--gold-1); text-shadow: var(--outline);
  transition: opacity .15s, transform .25s cubic-bezier(.2,1.7,.4,1);
}
#combo.show { opacity: 1; transform: scale(1); }

/* ---------------- banner ---------------- */
.banner {
  position: absolute; top: 26%; left: 50%;
  transform: translate(-50%, -50%) scale(.7);
  opacity: 0; text-align: center; pointer-events: none;
  transition: opacity .2s ease, transform .45s cubic-bezier(.15,1.6,.4,1);
}
.banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#bannerMain {
  font-weight: 900; font-size: clamp(30px, 11vw, 62px); letter-spacing: .06em;
  text-shadow: var(--outline);
  background: linear-gradient(180deg, #fff 40%, #cfefff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(4,16,30,.8)) drop-shadow(0 0 18px rgba(120,220,255,.5));
}
.banner.gold #bannerMain {
  background: linear-gradient(180deg, #fff6c4 30%, var(--gold-1) 70%, var(--gold-2) 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 3px 0 rgba(60,20,0,.75)) drop-shadow(0 0 22px rgba(255,180,50,.75));
}
.banner.frenzy #bannerMain {
  background: linear-gradient(180deg, #fff0b0 20%, #ff9d2e 60%, #ff3d2e 100%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 3px 0 rgba(60,10,0,.8)) drop-shadow(0 0 26px rgba(255,90,40,.9));
}
#bannerSub {
  margin-top: 2px; font-weight: 800; font-size: clamp(11px, 3.2vw, 16px);
  letter-spacing: .22em; color: #d8f2ff; text-shadow: var(--outline);
}

/* ---------------- danger ---------------- */
#dangerVignette {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(255,30,20,.55) 100%);
}
#dangerVignette.hit { animation: dangerHit .6s ease-out; }
@keyframes dangerHit { 0% { opacity: 1; } 100% { opacity: 0; } }

/* --- threat layer ------------------------------------------------------- */
.warn {
  --k: 1;
  position: absolute; top: 50%; opacity: 0;
  display: flex; align-items: center; gap: 1px;
  transform: translateY(-50%) scale(calc(.85 + var(--k) * .55));
  transition: opacity .18s, top .1s linear;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
  color: #ffc32e;
}
.warn.left { left: 3px; transform-origin: left center; }
.warn.right { right: 3px; flex-direction: row-reverse; transform-origin: right center; }
.warn .warnFin { width: 30px; height: 30px; fill: currentColor; }
.warn .warnBang { font-weight: 900; font-size: 21px; line-height: 1; text-shadow: var(--outline); }
.warn.show { opacity: 1; }
.warn.lane { color: var(--danger); animation: warnPulse .55s infinite ease-in-out; }
@keyframes warnPulse {
  0%,100% { filter: drop-shadow(0 0 2px rgba(255,50,30,.5)); opacity: .75; }
  50% { filter: drop-shadow(0 0 14px rgba(255,60,40,1)); opacity: 1; }
}

.dodge {
  position: absolute; left: 50%; top: 44%;
  transform: translate(-50%, -50%) scale(.7);
  opacity: 0; text-align: center; pointer-events: none;
  transition: opacity .16s, transform .3s cubic-bezier(.2,1.6,.4,1);
}
.dodge.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.dodgeArrow {
  font-size: clamp(42px, 14vw, 78px); line-height: .8;
  color: #ffe14a; text-shadow: var(--outline), 0 0 22px rgba(255,60,40,.9);
  animation: dodgeBob .6s infinite ease-in-out;
}
.dodge.down .dodgeArrow { animation-name: dodgeBobDown; }
.dodgeText {
  font-weight: 900; letter-spacing: .18em; font-size: clamp(15px, 4.4vw, 23px);
  color: #fff; text-shadow: var(--outline), 0 0 14px rgba(255,60,40,.8);
}
@keyframes dodgeBob {
  0%,100% { transform: translateY(6px); opacity: .75; }
  50% { transform: translateY(-8px); opacity: 1; }
}
@keyframes dodgeBobDown {
  0%,100% { transform: translateY(-6px); opacity: .75; }
  50% { transform: translateY(8px); opacity: 1; }
}

/* ---------------- popups ---------------- */
#popups { position: absolute; inset: 0; }
.popup {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-weight: 900; font-size: clamp(14px, 3.6vw, 20px);
  color: #fff; text-shadow: var(--outline);
  will-change: transform, opacity;
}
.popup.big { color: var(--gold-1); font-size: clamp(17px, 4.6vw, 26px); }
.popup.combo { color: #ff9d2e; font-size: clamp(15px, 4vw, 22px); letter-spacing: .08em; }

/* ---------------- controls ---------------- */
#joy {
  position: absolute; left: 19%; bottom: calc(env(safe-area-inset-bottom, 0px) + 14%);
  width: 0; height: 0; display: none; z-index: 12;
}
#joy.active { bottom: auto; }
#joyRing {
  position: absolute; left: 50%; top: 50%;
  width: min(31vw, 132px); height: min(31vw, 132px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.55);
  box-shadow: 0 0 16px rgba(0,0,0,.35), inset 0 0 22px rgba(180,235,255,.15);
  background: rgba(10,40,70,.12);
}
#joyKnob {
  position: absolute; left: 50%; top: 50%;
  width: min(15vw, 62px); height: min(15vw, 62px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #d7ecf7 55%, #a9c9dc 100%);
  box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 -3px 6px rgba(0,0,0,.18);
}
#joy.active #joyRing { border-color: rgba(255,255,255,.85); }

#dashBtn {
  position: absolute; right: calc(env(safe-area-inset-right, 0px) + 7%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 13%);
  width: min(22vw, 92px); height: min(22vw, 92px);
  border-radius: 50%; border: 0; display: none; z-index: 12;
  flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: radial-gradient(circle at 40% 32%, rgba(255,220,150,.95), rgba(255,150,30,.85) 55%, rgba(200,80,10,.9) 100%);
  color: #4a1e00;
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.35);
}
#dashBtn svg { width: 42%; height: 42%; fill: currentColor; }
#dashBtn span { font-size: 10px; font-weight: 900; letter-spacing: .12em; }
#dashBtn.active, #dashBtn:active { transform: scale(.9); filter: brightness(1.2); }

#staminaWrap {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  width: var(--barW); height: 7px; border-radius: 999px;
  background: rgba(0,0,0,.45); overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.6);
  opacity: 0; transition: opacity .25s;
}
#staminaWrap.show { opacity: 1; }
#staminaFill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #4fd4ec, #b9f2ff);
  box-shadow: 0 0 8px rgba(90,220,255,.7);
  transition: width .1s linear;
}

#kbHint {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  font-size: 12px; letter-spacing: .06em; color: rgba(220,244,255,.75);
  text-shadow: 0 2px 4px rgba(0,0,0,.8);
  max-width: min(92vw, 560px); text-align: center; line-height: 1.5;
}
#kbHint b { color: #fff; }

/* control guides follow the input device actually in use */
.onlyTouch, .onlyDesktop { display: none; }
body.touch .onlyTouch { display: block; }
body.touch #joy, body.touch #dashBtn { display: flex; }
body.desktop .onlyDesktop { display: block; }
body.touch #staminaWrap { bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); }

#touchHint {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  font-size: 12px; letter-spacing: .04em; color: rgba(220,244,255,.72);
  text-shadow: 0 2px 4px rgba(0,0,0,.8);
  max-width: 86vw; text-align: center;
}
#kbHint.faded, #touchHint.faded { opacity: 0; transition: opacity .8s ease; pointer-events: none; }

/* ---------------- screens ---------------- */
.screen {
  position: absolute; inset: 0; z-index: 20;
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 35%, rgba(4,30,58,.55), rgba(2,12,26,.88));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  padding: 24px;
}
.screen.show { display: flex; animation: fadeIn .3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.panel {
  width: min(92vw, 440px); text-align: center;
  background: var(--panel);
  border-radius: 22px; padding: 26px 22px 24px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 0 0 2px rgba(130,225,255,.22);
  pointer-events: auto;
}
.titleWrap { margin-bottom: 18px; }
.title {
  font-weight: 900; line-height: .92; letter-spacing: .02em;
  font-size: clamp(40px, 13.5vw, 74px);
  background: linear-gradient(180deg, #fff8dc 18%, var(--gold-1) 58%, var(--gold-2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(50,18,0,.75)) drop-shadow(0 0 26px rgba(255,180,60,.55));
}
.title span {
  display: block;
  background: linear-gradient(180deg, #eaffff 18%, var(--cyan) 60%, #2c9fd6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0,26,50,.8)) drop-shadow(0 0 26px rgba(90,215,255,.55));
}
.tagline {
  margin-top: 10px; font-size: clamp(10px, 2.9vw, 13px); font-weight: 800;
  letter-spacing: .18em; color: #b9e6ff;
}
.bigBtn {
  margin-top: 6px; width: 100%; border: 0; cursor: pointer;
  padding: 16px 18px; border-radius: 16px;
  font-family: var(--font); font-weight: 900; font-size: clamp(18px, 5.4vw, 26px);
  letter-spacing: .16em; color: #4a2000;
  background: linear-gradient(180deg, #ffe587 0%, var(--gold-1) 45%, var(--gold-2) 100%);
  box-shadow: 0 6px 0 #b45f00, 0 12px 26px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.65);
  transition: transform .08s, box-shadow .08s;
}
.bigBtn:active { transform: translateY(4px); box-shadow: 0 2px 0 #b45f00, 0 6px 16px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.65); }
.best { margin-top: 12px; font-weight: 900; letter-spacing: .18em; color: var(--gold-1); font-size: 14px; text-shadow: var(--outline); }
.how { margin-top: 16px; font-size: 12px; line-height: 1.7; color: #a9d6ef; }
.how .k { display: inline-block; min-width: 54px; font-weight: 900; color: var(--cyan); letter-spacing: .1em; }
.how .k2 { font-weight: 900; color: var(--cyan); letter-spacing: .1em; }
.how > div { margin-bottom: 3px; }

.overTitle {
  font-weight: 900; font-size: clamp(30px, 10vw, 52px); letter-spacing: .08em;
  background: linear-gradient(180deg, #ffd9d0 20%, #ff6a4d 70%, #c62a1c 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(50,6,0,.8));
  margin-bottom: 16px;
}
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.stat {
  background: rgba(0,0,0,.28); border-radius: 12px; padding: 10px 8px;
  box-shadow: inset 0 0 0 1.5px rgba(130,225,255,.16);
}
.stat label { display: block; font-size: 10px; font-weight: 800; letter-spacing: .16em; color: #8ec9e8; }
.stat b { display: block; margin-top: 3px; font-size: clamp(18px, 5.6vw, 26px); font-weight: 900; color: #fff; font-variant-numeric: tabular-nums; }

#loading { z-index: 40; background: #04182c; }
.loadInner {
  font-weight: 900; letter-spacing: .22em; font-size: 13px; color: var(--cyan);
  animation: blink 1.1s infinite ease-in-out;
}
@keyframes blink { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* landscape / desktop: keep the portrait feel by letterboxing the play field visually */
@media (min-aspect-ratio: 1/1) {
  :root { --barW: min(34vw, 400px); }
}