/* Penguin Wallop: a full-bleed WebGL canvas with a glossy arcade HUD floating over it. */
:root {
  --navy: #13213f;
  --ink: #0a1226;
  --pink: #ff3d9a;
  --hot: #ff2d55;
  --gold: #ffd23d;
  --cyan: #3de0ff;
  --purple: #7a3cff;
  --display: 'Lilita One', 'Arial Rounded MT Bold', 'Arial Black', system-ui, sans-serif;
  --body: 'Rubik', system-ui, -apple-system, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --hud-y: 10px;
  --dist-size: clamp(54px, 11vw, 112px);
}
@media (max-width: 640px) {
  :root { --hud-y: 62px; }
  .tag { font-size: 12px; letter-spacing: 1.5px; text-align: center; }
  .chain { top: 36%; }
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
  font-family: var(--body);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* manipulation, not none: iOS ignores user-scalable=no, so a quick double tap
     on a button zooms the page; manipulation stops that, and still lets a pinch
     undo any zoom. Only the game canvas swallows every gesture. */
  touch-action: manipulation;
  overscroll-behavior: none;
}
#app { position: fixed; inset: 0; }
#gl, #overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#overlay { pointer-events: none; }
.hidden { display: none !important; }

#flash {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #fff6d8 40%, rgba(255, 220, 160, 0) 75%);
  opacity: 0; mix-blend-mode: screen;
}
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(5, 10, 30, 0.45) 100%);
}

/* ---------------------------------------------------------------- HUD */
#hud { position: absolute; inset: 0; pointer-events: none; }
.hud-top { position: absolute; top: calc(var(--hud-y) + var(--safe-t)); left: 0; right: 0; display: flex; justify-content: center; }
.dist-wrap { text-align: center; }
.dist {
  font-family: var(--display);
  font-size: var(--dist-size);
  line-height: 0.95;
  letter-spacing: 1px;
  color: #fff;
  -webkit-text-stroke: 3px var(--navy);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--navy), 0 10px 24px rgba(0, 0, 0, 0.35);
  font-variant-numeric: tabular-nums;
  transform-origin: 50% 60%;
}
.dist span { font-size: 0.5em; margin-left: 4px; color: var(--gold); }
.dist.bump { animation: distbump 0.22s ease-out; }
@keyframes distbump { 0% { transform: scale(1.18); } 100% { transform: scale(1); } }
.sub {
  margin-top: 4px; font-weight: 800; font-size: 15px; letter-spacing: 1px; text-transform: uppercase;
  color: #e9f6ff; text-shadow: 0 2px 0 var(--navy);
}
.sub i { color: var(--gold); font-style: normal; margin: 0 4px; }

.best-track {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: calc(var(--dist-size) + 36px + var(--hud-y) + var(--safe-t));
  width: min(420px, 70vw); height: 10px; border-radius: 10px;
  background: rgba(10, 18, 38, 0.55); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);
}
.best-fill {
  height: 100%; width: 0; border-radius: 10px;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
  box-shadow: 0 0 12px rgba(255, 210, 61, 0.6);
}
.best-track.beaten .best-fill { background: linear-gradient(90deg, var(--pink), var(--gold), var(--cyan)); background-size: 200% 100%; animation: shimmer 0.8s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.best-label { position: absolute; right: 0; top: 14px; font-weight: 900; font-size: 12px; letter-spacing: 1.5px; color: var(--gold); text-shadow: 0 2px 0 var(--navy); }

.chain {
  position: absolute; left: calc(16px + env(safe-area-inset-left, 0px)); top: 42%;
  transform: translateY(-50%) scale(0.6); opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  text-align: left;
}
.chain.on { opacity: 1; transform: translateY(-50%) scale(1); }
.chain-mult {
  font-family: var(--display); font-size: clamp(44px, 8vw, 78px); line-height: 1;
  color: var(--gold); -webkit-text-stroke: 3px var(--navy); paint-order: stroke fill;
  text-shadow: 0 5px 0 var(--navy), 0 0 28px rgba(255, 210, 61, 0.55);
}
.chain.hot .chain-mult { color: var(--pink); text-shadow: 0 5px 0 var(--navy), 0 0 34px rgba(255, 61, 154, 0.8); }
.chain.inferno .chain-mult { animation: wobble 0.18s infinite alternate; color: #fff; text-shadow: 0 5px 0 var(--navy), 0 0 40px #ff3d9a, 0 0 70px #7a3cff; }
@keyframes wobble { from { transform: rotate(-4deg) scale(1.03); } to { transform: rotate(4deg) scale(0.98); } }
.chain-mult.pop { animation: chainpop 0.3s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes chainpop { 0% { transform: scale(1.8) rotate(-8deg); } 100% { transform: scale(1) rotate(0); } }
.chain-mult { margin-bottom: 6px; line-height: 1.12; }
.chain-label { font-weight: 900; letter-spacing: 2px; font-size: 14px; text-shadow: 0 2px 0 var(--navy); }
.chain-label b { color: var(--cyan); font-size: 18px; }
.chain-bar { margin-top: 6px; width: 130px; height: 8px; border-radius: 8px; background: rgba(10, 18, 38, 0.6); overflow: hidden; }
.chain-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--pink), var(--gold)); border-radius: 8px; }

.flaps { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(26px + var(--safe-b)); display: flex; gap: 10px; }
.flaps i {
  width: 30px; height: 36px; border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 50% 66%, #fff 0 34%, transparent 35%), radial-gradient(circle at 40% 30%, #3a4a74, #18213a 70%);
  box-shadow: 0 3px 0 var(--ink), 0 0 0 3px rgba(255, 255, 255, 0.85);
  transition: transform 0.2s, opacity 0.2s;
}
.flaps i.used { opacity: 0.25; transform: scale(0.7); }
.flaps i.new { animation: chainpop 0.35s cubic-bezier(.2, 1.8, .4, 1); }
.hint {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(76px + var(--safe-b));
  font-weight: 900; letter-spacing: 3px; font-size: 13px; opacity: 0.85; text-shadow: 0 2px 0 var(--navy);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------------------------------------------------------------- top bar */
.topbar { position: absolute; top: calc(10px + var(--safe-t)); right: calc(12px + env(safe-area-inset-right, 0px)); display: flex; gap: 8px; align-items: center; z-index: 30; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 14px; border: 0; cursor: pointer;
  background: rgba(19, 33, 63, 0.78); color: #fff; font-size: 18px; font-weight: 900;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18), 0 4px 0 var(--ink);
}
.icon-btn.off { opacity: 0.45; }
.fishbank {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 14px;
  background: rgba(19, 33, 63, 0.78); box-shadow: inset 0 0 0 2px rgba(255, 210, 61, 0.5), 0 4px 0 var(--ink);
  font-family: var(--display); font-size: 20px; color: var(--gold);
}
.fishbank.bump { animation: chainpop 0.3s; }
.fishbank.big { font-size: 28px; }
.fishico {
  display: inline-block; width: 26px; height: 16px; position: relative;
  background: radial-gradient(ellipse at 40% 50%, #fff3b0, #ffc43d 55%, #d9901a);
  border-radius: 60% 50% 50% 60%;
  margin-right: 8px;
}
.fishico::after {
  content: ''; position: absolute; right: -9px; top: 1px; border-style: solid; border-width: 7px 10px 7px 0;
  border-color: transparent #ffc43d transparent transparent;
}

/* ---------------------------------------------------------------- popups + stamp */
#pops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pop {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  font-family: var(--display); font-size: 34px; line-height: 1;
  -webkit-text-stroke: 3px var(--navy); paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--navy);
  animation: popup 0.95s cubic-bezier(.2, 1.6, .4, 1) forwards;
  will-change: transform, opacity;
}
.pop small { display: block; font-size: 0.55em; text-align: center; color: #fff; margin-top: 2px; }
.pop.big { font-size: 54px; }
.pop.huge { font-size: 76px; }
@keyframes popup {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(var(--rot, 0deg)); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(1.25) rotate(var(--rot, 0deg)); }
  30% { transform: translate(-50%, -60%) scale(1) rotate(var(--rot, 0deg)); }
  78% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(0.9) rotate(var(--rot, 0deg)); }
}
.stamp {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%);
  pointer-events: none; text-align: center; white-space: nowrap;
  font-family: var(--display); font-size: clamp(44px, min(14vw, 24vh), 150px); line-height: 0.9;
  -webkit-text-stroke: 5px var(--navy); paint-order: stroke fill;
  text-shadow: 0 8px 0 var(--navy), 0 0 60px rgba(255, 210, 61, 0.6);
  opacity: 0;
}
.stamp small { display: block; font-size: 0.32em; letter-spacing: 3px; -webkit-text-stroke: 3px var(--navy); color: #fff; }
.stamp.go { animation: stamp 1.25s cubic-bezier(.15, 1.7, .35, 1) forwards; }
@keyframes stamp {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(3) rotate(-10deg); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(0.92) rotate(-4deg); }
  22% { transform: translate(-50%, -50%) scale(1.04) rotate(-5deg); }
  80% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-5deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3) rotate(-5deg); }
}

/* ---------------------------------------------------------------- screens */
.screen {
  /* Scrolls when the content is taller than the screen (a phone on its side);
     auto margins on the first and last child center it otherwise. Plain
     justify-content: center clips the top of anything too tall, out of reach. */
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: calc(20px + var(--safe-t)) calc(20px + env(safe-area-inset-right, 0px)) calc(20px + var(--safe-b)) calc(20px + env(safe-area-inset-left, 0px));
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  z-index: 20;
}
.screen > :first-child { margin-top: auto; }
.screen > :last-child { margin-bottom: auto; }
#title { background: radial-gradient(ellipse at 50% 40%, rgba(10, 18, 38, 0) 30%, rgba(10, 18, 38, 0.55) 100%); pointer-events: none; }
#title > * { pointer-events: auto; }
.logo { display: flex; flex-direction: column; align-items: center; transform: rotate(-4deg); animation: logoin 0.9s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes logoin { from { transform: rotate(-4deg) scale(0.3); opacity: 0; } }
.logo span { font-family: var(--display); line-height: 0.82; -webkit-text-stroke: 6px var(--navy); paint-order: stroke fill; }
.logo .l1 { font-size: clamp(54px, 12vw, 120px); color: #fff; text-shadow: 0 8px 0 var(--navy); }
.logo .l2 {
  font-size: clamp(84px, 20vw, 200px);
  background: linear-gradient(180deg, #fff7c2 0%, var(--gold) 40%, #ff8a1f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 9px 0 var(--navy)) drop-shadow(0 0 30px rgba(255, 140, 40, 0.5));
}
.tag { font-weight: 900; letter-spacing: 3px; text-transform: uppercase; font-size: 15px; margin: 14px 0 6px; text-shadow: 0 2px 0 var(--navy); }
.title-stats { display: flex; gap: 14px; margin: 12px 0 18px; }
.title-stats div, .res-grid div {
  background: rgba(19, 33, 63, 0.78); border-radius: 16px; padding: 8px 16px; text-align: center;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.14), 0 4px 0 var(--ink);
}
.title-stats small, .res-grid small { display: block; font-weight: 900; font-size: 11px; letter-spacing: 2px; opacity: 0.75; }
.title-stats b, .res-grid b { font-family: var(--display); font-size: 26px; color: var(--gold); }
.title-actions, .res-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.controls { margin-top: 16px; font-weight: 600; opacity: 0.8; font-size: 14px; text-align: center; text-shadow: 0 2px 0 var(--navy); }

.btn {
  position: relative; border: 0; cursor: pointer; font-family: var(--display); font-size: 22px; letter-spacing: 1px;
  padding: 12px 22px; border-radius: 18px; color: #fff;
  background: linear-gradient(180deg, #2c4a8a, #1a2f5e);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 6px 0 var(--ink), 0 10px 20px rgba(0, 0, 0, 0.3);
  transition: transform 0.06s;
}
.btn:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 2px 0 var(--ink); }
.btn.primary { background: linear-gradient(180deg, #ff6aa8, #ff2d6e); }
.btn.big { font-size: 34px; padding: 16px 40px; animation: breathe 1.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.05); } }
.btn:disabled { opacity: 0.45; cursor: default; animation: none; }
.dot { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px var(--navy); animation: pulse 0.9s infinite; }

/* results */
#results { background: rgba(10, 18, 38, 0.35); }
.res-card, .shop-card {
  width: min(520px, 94vw); padding: 22px 22px 18px; border-radius: 28px; text-align: center;
  background: linear-gradient(180deg, rgba(30, 52, 102, 0.95), rgba(16, 28, 58, 0.95));
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.14), 0 10px 0 var(--ink), 0 30px 60px rgba(0, 0, 0, 0.45);
  animation: cardin 0.45s cubic-bezier(.2, 1.5, .4, 1);
}
@keyframes cardin { from { transform: translateY(60px) scale(0.8); opacity: 0; } }
.res-reason { font-weight: 900; letter-spacing: 4px; font-size: 14px; color: var(--cyan); }
.res-dist { font-family: var(--display); font-size: clamp(64px, 16vw, 110px); line-height: 1; color: #fff; -webkit-text-stroke: 4px var(--navy); paint-order: stroke fill; text-shadow: 0 7px 0 var(--ink); font-variant-numeric: tabular-nums; }
.res-record { display: inline-block; margin: 6px 0 2px; padding: 6px 16px; border-radius: 12px; font-family: var(--display); font-size: 26px; background: linear-gradient(90deg, var(--pink), var(--gold)); color: var(--navy); animation: chainpop 0.5s cubic-bezier(.2, 1.8, .4, 1), breathe 1s 0.5s infinite; }
.res-near { min-height: 22px; font-weight: 800; color: var(--gold); margin: 6px 0; }
.res-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 14px; }
.res-grid div { padding: 8px 4px; }
.res-grid b { font-size: 22px; }
.res-coins { font-family: var(--display); font-size: 34px; color: var(--gold); margin-bottom: 14px; display: flex; align-items: center; justify-content: center; }
.res-tip { margin: 12px 0 0; font-weight: 600; font-size: 13px; opacity: 0.75; }
@media (max-width: 420px) { .res-grid { grid-template-columns: repeat(2, 1fr); } }

/* shop */
#shop { background: rgba(10, 18, 38, 0.55); }
.shop-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.shop-head h2 { margin: 0; font-family: var(--display); font-size: 36px; letter-spacing: 1px; text-shadow: 0 4px 0 var(--ink); }
.up-row {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; text-align: left;
  background: rgba(10, 18, 38, 0.45); border-radius: 18px; padding: 10px 12px; margin-bottom: 8px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.up-row h3 { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 400; }
.up-row p { margin: 0; font-size: 13px; opacity: 0.75; font-weight: 600; }
.pips { display: flex; gap: 4px; grid-column: 1 / 2; }
.pips i { width: 16px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.15); }
.pips i.on { background: linear-gradient(90deg, var(--cyan), var(--gold)); box-shadow: 0 0 8px rgba(61, 224, 255, 0.6); }
.up-row .btn { grid-row: 1 / 3; grid-column: 2; font-size: 18px; padding: 10px 14px; display: flex; align-items: center; gap: 4px; }
.up-row .btn .fishico { width: 20px; height: 13px; margin-right: 6px; }
.up-row.maxed .btn { background: linear-gradient(180deg, #3a3f55, #2a2e40); }
.up-row.bought { animation: chainpop 0.35s; }

.boot {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 50;
  background: var(--ink); font-family: var(--display); font-size: 28px; letter-spacing: 2px; transition: opacity 0.5s;
}
.boot.gone { opacity: 0; pointer-events: none; }

.shake-ui { animation: uishake 0.25s; }
@keyframes uishake { 25% { transform: translate(6px, -4px); } 50% { transform: translate(-5px, 3px); } 75% { transform: translate(3px, 2px); } }

/* ---------------------------------------------------------------- short screens (a phone on its side) */
@media (max-height: 520px) {
  :root { --dist-size: clamp(40px, 16vh, 80px); --hud-y: 8px; }
  .screen { padding-top: calc(62px + var(--safe-t)); padding-bottom: calc(12px + var(--safe-b)); }
  .logo .l1 { font-size: clamp(36px, 14vh, 80px); }
  .logo .l2 { font-size: clamp(54px, 24vh, 130px); }
  .tag { margin: 6px 0 2px; font-size: 12px; }
  .title-stats { margin: 6px 0 10px; }
  .title-stats div { padding: 4px 12px; }
  .controls { display: none; }
  .res-card, .shop-card { width: min(720px, 94vw); padding: 12px 18px 12px; }
  .res-dist { font-size: clamp(44px, 18vh, 90px); }
  .res-record { font-size: 20px; padding: 4px 12px; }
  .res-near { margin: 2px 0; min-height: 0; }
  .res-grid { grid-template-columns: repeat(4, 1fr); margin: 6px 0 8px; }
  .res-grid b { font-size: 18px; }
  .res-coins { font-size: 26px; margin-bottom: 8px; }
  .res-tip { display: none; }
  .btn.big { font-size: 26px; padding: 10px 30px; }
  .shop-head h2 { font-size: 28px; }
  #shopList { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 8px; }
  .up-row { padding: 6px 10px; margin-bottom: 6px; gap: 2px 8px; }
  .up-row h3 { font-size: 17px; }
  .up-row p { font-size: 11px; }
  .up-row .btn { font-size: 16px; padding: 6px 12px; }
  .pips i { height: 6px; width: 13px; }
  .shop-head { margin-bottom: 6px; }
  .shop-head .fishbank.big { font-size: 22px; }
  #btnShopClose { padding: 8px 18px; font-size: 18px; }
  .chain { top: 52%; }
  .chain-mult { font-size: clamp(30px, 11vh, 54px); }
  .chain-label { font-size: 12px; }
  .flaps { bottom: calc(10px + var(--safe-b)); }
  .hint { bottom: calc(52px + var(--safe-b)); }
}