/* (1.25) Hengel: the fishing's screen over the game (js/hengel/hud.js). Sizes use --u = one game pixel. */
#hg-ui { position: fixed; left: 0; top: 0; pointer-events: none; --u: 1px; color: #fff; z-index: 30;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
#hg-ui * { box-sizing: border-box; }
#hg-ui .hg-px { position: absolute; }
#hg-ui .hg-btn { pointer-events: auto; cursor: pointer; border: 0; font: inherit; font-weight: 900; color: #1d2b45;
  border-radius: calc(var(--u) * 999); transition: transform .08s; }
#hg-ui .hg-btn:active { transform: scale(.94); }
#hg-ui .hg-screen { position: absolute; inset: 0; display: none; }
#hg-ui .hg-screen.show { display: block; }
#hg-ui .hg-t { color: #fff; font-weight: 900; text-shadow: 0 calc(var(--u)*3) 0 #1d2b45, 0 0 calc(var(--u)*3) #1d2b45,
  calc(var(--u)*2) 0 0 #1d2b45, calc(var(--u)*-2) 0 0 #1d2b45, 0 calc(var(--u)*-2) 0 #1d2b45; }
#hg-ui .hg-chip { background: rgba(29,43,69,.82); border-radius: calc(var(--u)*999); padding: calc(var(--u)*8) calc(var(--u)*18);
  font-size: calc(var(--u)*24); font-weight: 900; }

/* the catch strip, the tower chip, pause */
#hg-ui .hg-slots { left: calc(var(--u)*130); right: calc(var(--u)*130); top: calc(var(--u)*18 + var(--safe-top, 0px));
  height: calc(var(--u)*96); display: flex; gap: calc(var(--u)*10); }
#hg-ui .hg-slot { flex: 1; border-radius: calc(var(--u)*18); background: rgba(29,43,69,.62); border: calc(var(--u)*3) solid rgba(255,255,255,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; }
#hg-ui .hg-slot.now { border-color: #ffd84d; box-shadow: 0 0 calc(var(--u)*12) rgba(255,216,77,.8); }
#hg-ui .hg-slot img { width: 86%; height: calc(var(--u)*46); object-fit: contain; }
#hg-ui .hg-slot .kg { font-size: calc(var(--u)*21); font-weight: 900; }
#hg-ui .hg-slot .no { font-size: calc(var(--u)*30); opacity: .5; }
#hg-ui .hg-slot .msg { font-size: calc(var(--u)*17); font-weight: 900; text-align: center; line-height: 1.1; }
#hg-ui .hg-slot.best::after { content: "★"; position: absolute; right: calc(var(--u)*6); top: calc(var(--u)*2); color: #ffd84d; font-size: calc(var(--u)*22); }
#hg-ui .hg-tw { left: calc(var(--u)*14); top: calc(var(--u)*22 + var(--safe-top, 0px)); width: calc(var(--u)*108); text-align: center;
  font-size: calc(var(--u)*24); line-height: 1.15; padding: calc(var(--u)*10) calc(var(--u)*4); border-radius: calc(var(--u)*18); }
#hg-ui .hg-tw b { display: block; font-size: calc(var(--u)*24); }
/* (1.32, the fishing yacht) no tower to show: "Klaar" sits where the tower chip was, to end the yacht's fishing early */
#hg-ui.yt .hg-tw { display: none; }
#hg-ui .hg-skip { left: calc(var(--u)*14); top: calc(var(--u)*22 + var(--safe-top, 0px)); width: calc(var(--u)*108); height: calc(var(--u)*72);
  font-size: calc(var(--u)*26); padding: 0; }
#hg-ui .hg-icon { right: calc(var(--u)*14); width: calc(var(--u)*92); height: calc(var(--u)*92); top: calc(var(--u)*20 + var(--safe-top, 0px));
  font-size: calc(var(--u)*36); background: rgba(29,43,69,.62); color: #fff; border: calc(var(--u)*3) solid rgba(255,255,255,.35);
  border-radius: calc(var(--u)*20); }

/* the cast's power arc */
#hg-ui .hg-gauge { left: calc(var(--u)*342); top: calc(var(--u)*111); width: calc(var(--u)*375); height: calc(var(--u)*440); }
#hg-ui .hg-gauge svg { width: 100%; height: calc(var(--u)*255); overflow: visible; }
#hg-ui .hg-gauge .hg-lbl { position: absolute; left: 0; right: 0; top: calc(var(--u)*262); text-align: center; font-size: calc(var(--u)*38); }
#hg-ui .hg-gauge .hg-sub { position: absolute; left: 0; right: 0; top: calc(var(--u)*306); text-align: center; font-size: calc(var(--u)*20); }

/* "HOOK!" (the owner, 31 Oct 2026: "it just needs to show 'Hook' and then you can start reeling him in") */
#hg-ui .hg-hook { left: 0; right: 0; top: calc(var(--u)*250); text-align: center; display: none; }
#hg-ui .hg-hook.show { display: block; animation: hg-hook .32s cubic-bezier(.2,1.8,.4,1) both, hg-throb .5s .32s ease-in-out infinite alternate; }
#hg-ui .hg-hook .w { font-size: calc(var(--u)*128); font-weight: 900; color: #ffd84d; line-height: 1; letter-spacing: calc(var(--u)*4);
  -webkit-text-stroke: calc(var(--u)*7) #1d2b45; paint-order: stroke fill; text-shadow: 0 calc(var(--u)*10) 0 #1d2b45; }
#hg-ui .hg-hook .s { margin-top: calc(var(--u)*14); font-size: calc(var(--u)*40); font-weight: 900; color: #fff;
  -webkit-text-stroke: calc(var(--u)*5) #1d2b45; paint-order: stroke fill; }
@keyframes hg-hook { from { transform: scale(.2) rotate(-8deg); opacity: 0; } }
@keyframes hg-throb { to { transform: scale(1.08); } }

/* the balance bar (the owner: "you need to controll it in the middle the green bar"; orange, then red, then it snaps) */
#hg-ui .hg-bar { left: calc(var(--u)*60); right: calc(var(--u)*60); bottom: calc(var(--u)*190); display: none; }
#hg-ui .hg-bar.show { display: block; }
#hg-ui .hg-track { position: relative; height: calc(var(--u)*46); border-radius: calc(var(--u)*23);
  background: linear-gradient(#ffb547, #f08a1c); box-shadow: 0 0 0 calc(var(--u)*5) #1d2b45, 0 calc(var(--u)*8) 0 calc(var(--u)*5) rgba(29,43,69,.55),
  inset 0 calc(var(--u)*5) calc(var(--u)*6) rgba(0,0,0,.22); transition: background .15s; }
#hg-ui .hg-gr { position: absolute; top: 0; bottom: 0; background: linear-gradient(#7fe08a, #34b14a); border-left: calc(var(--u)*3) solid rgba(29,43,69,.5);
  border-right: calc(var(--u)*3) solid rgba(29,43,69,.5); }
#hg-ui .hg-mid { position: absolute; left: 50%; top: 18%; bottom: 18%; width: calc(var(--u)*3); margin-left: calc(var(--u)*-1.5); background: rgba(29,43,69,.4); }
#hg-ui .hg-knob { position: absolute; top: calc(var(--u)*-9); width: calc(var(--u)*64); height: calc(var(--u)*64); margin-left: calc(var(--u)*-32); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #f2f6fa 45%, #c9d6e2); box-shadow: 0 0 0 calc(var(--u)*5) #1d2b45, 0 calc(var(--u)*5) 0 calc(var(--u)*5) rgba(29,43,69,.5);
  left: 50%; transition: background .15s; }
#hg-ui .hg-knob::after { content: "🐟"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: calc(var(--u)*30); }
#hg-ui .hg-bar.orange .hg-knob { background: radial-gradient(circle at 35% 30%, #fff3d6, #ffb547 55%, #f08a1c); }
#hg-ui .hg-bar.red .hg-track { background: linear-gradient(#ff7a6a, #d9342a); animation: hg-red .22s infinite alternate; }
#hg-ui .hg-bar.red .hg-knob { background: radial-gradient(circle at 35% 30%, #ffd9d4, #ff5a4a 55%, #c21f16); }
@keyframes hg-red { to { box-shadow: 0 0 0 calc(var(--u)*5) #ff3b2f, 0 0 calc(var(--u)*26) calc(var(--u)*6) rgba(255,59,47,.85); } }
#hg-ui .hg-danger { margin: calc(var(--u)*16) auto 0; width: 70%; height: calc(var(--u)*10); border-radius: calc(var(--u)*5); background: rgba(29,43,69,.55); overflow: hidden; }
#hg-ui .hg-danger i { display: block; height: 100%; width: 0; background: #ff5a4a; border-radius: inherit; }
#hg-ui .hg-line { text-align: center; font-size: calc(var(--u)*22); margin-top: calc(var(--u)*6); }
#hg-ui .hg-bar.idle .hg-track, #hg-ui .hg-bar.idle .hg-knob { filter: saturate(.55) brightness(.9); }

/* (1.26) the reel: circle the thumb anywhere to wind it (its handle turns with the thumb, its spool with the line); the
   line on the spool goes orange, then red as it strains; the red ring round it fills up to the snap */
#hg-ui .hg-reel { right: calc(var(--u)*36); bottom: calc(var(--u)*160); width: calc(var(--u)*220); display: none; }
#hg-ui .hg-reel.show { display: block; }
/* (1.26.6, the owner: "the bar doesnt make sence ... I agree it must be difficult but not that hard") the line's bar over
   the reel, wide, each zone named for what to do: ↻ DRAAI (green), STADIG (orange), LOS! (red); the marker is how hard the
   line pulls; the zone it is in lights up, the others dim. Before a run the bar flashes red; in the red the ring round
   the reel fills like a fuse (the line snaps only when it is full) */
#hg-ui .hg-tens { position: absolute; right: 0; bottom: calc(100% + var(--u)*10); width: calc(var(--u)*430); height: calc(var(--u)*50);
  display: flex; border-radius: calc(var(--u)*25); border: calc(var(--u)*4) solid #1d2b45; box-shadow: 0 calc(var(--u)*5) 0 rgba(29,43,69,.55); overflow: visible; }
#hg-ui .hg-tz { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; transition: filter .15s, opacity .15s; }
#hg-ui .hg-tz.g { width: 55%; background: #39c86a; border-radius: calc(var(--u)*21) 0 0 calc(var(--u)*21); }
#hg-ui .hg-tz.o { width: 22%; background: #f5a623; }
#hg-ui .hg-tz.r { width: 23%; background: #e8443a; border-radius: 0 calc(var(--u)*21) calc(var(--u)*21) 0; }
#hg-ui .hg-tz span { font-size: calc(var(--u)*21); font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(29,43,69,.85); white-space: nowrap; letter-spacing: .02em; }
#hg-ui .hg-tens[data-z="g"] .hg-tz:not(.g), #hg-ui .hg-tens[data-z="o"] .hg-tz:not(.o), #hg-ui .hg-tens[data-z="r"] .hg-tz:not(.r) { filter: saturate(.45) brightness(.8); }
#hg-ui .hg-tens[data-z="g"] .hg-tz.g span, #hg-ui .hg-tens[data-z="o"] .hg-tz.o span, #hg-ui .hg-tens[data-z="r"] .hg-tz.r span { font-size: calc(var(--u)*24); }
#hg-ui .hg-tMark { position: absolute; top: calc(var(--u)*-10); bottom: calc(var(--u)*-10); width: calc(var(--u)*10); margin-left: calc(var(--u)*-5); border-radius: calc(var(--u)*5);
  background: #fff; box-shadow: 0 0 0 calc(var(--u)*3) #1d2b45; transition: left .08s linear; }
#hg-ui .hg-reel.red .hg-tens { animation: hg-tensRed .3s ease-in-out infinite alternate; }
@keyframes hg-tensRed { to { transform: scale(1.04); } }
#hg-ui .hg-reel.tell .hg-tens { animation: hg-tell .18s steps(2) infinite; }
@keyframes hg-tell { 50% { box-shadow: 0 0 0 calc(var(--u)*7) #ff3b2f, 0 calc(var(--u)*5) 0 rgba(29,43,69,.55); } }
#hg-ui .hg-reel.fuse .hg-rRing { filter: drop-shadow(0 0 calc(var(--u)*6) #ff3b2f); stroke-width: 14; }
#hg-ui .hg-dist { position: absolute; left: calc(var(--u)*-210); right: 0; bottom: calc(100% + var(--u)*72); height: calc(var(--u)*44); }
#hg-ui .hg-dRope { position: absolute; left: 0; right: calc(var(--u)*30); top: 50%; border-top: calc(var(--u)*4) dashed rgba(255,255,255,.75); }
#hg-ui .hg-dFish, #hg-ui .hg-dRod { position: absolute; top: 50%; transform: translateY(-50%); font-size: calc(var(--u)*36); line-height: 1; filter: drop-shadow(0 2px 0 #1d2b45); }
#hg-ui .hg-dFish { left: 0; transition: left .12s linear; transform: translateY(-50%) scaleX(-1); }
#hg-ui .hg-dRod { right: 0; }
@media (prefers-reduced-motion: reduce) { #hg-ui .hg-reel.red .hg-tens, #hg-ui .hg-reel.tell .hg-tens { animation: none; } #hg-ui .hg-reel.tell .hg-tens { box-shadow: 0 0 0 calc(var(--u)*7) #ff3b2f; } }
#hg-ui .hg-reel svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 calc(var(--u)*6) 0 rgba(29,43,69,.55)); }
#hg-ui .hg-rBody { fill: #2c3e5c; stroke: #1d2b45; stroke-width: 8; }
#hg-ui .hg-rRing { fill: none; stroke: #ff3b2f; stroke-width: 10; stroke-dasharray: 603; stroke-dashoffset: 603; transform: rotate(-90deg); transform-origin: 110px 110px; }
#hg-ui .hg-rSpool { fill: #e9eef4; stroke: #1d2b45; stroke-width: 6; transition: fill .15s; }
#hg-ui .hg-rLines { fill: none; stroke: #9fb3c8; stroke-width: 5; stroke-linecap: round; }
#hg-ui .hg-rHub { fill: #c9d6e2; stroke: #1d2b45; stroke-width: 5; }
#hg-ui .hg-rArm { fill: #c9d6e2; stroke: #1d2b45; stroke-width: 5; }
#hg-ui .hg-rKnob { fill: #ffd84d; stroke: #1d2b45; stroke-width: 6; }
#hg-ui .hg-rAsk { fill: none; stroke: #ffd84d; stroke-width: 8; stroke-linecap: round; opacity: 0; marker-end: none; transform-origin: 110px 110px; }
#hg-ui .hg-reel.ask .hg-rAsk { opacity: .95; animation: hg-ask 1.1s linear infinite; }
@keyframes hg-ask { to { transform: rotate(360deg); } }
/* (1.26, layer 2) a heavy fish: the "lift!" arrow over the reel; the knob glows while the rod comes up */
#hg-ui .hg-rUp { fill: #ffd84d; stroke: #1d2b45; stroke-width: 7; stroke-linejoin: round; opacity: 0; }
#hg-ui .hg-reel.askup .hg-rUp { opacity: 1; animation: hg-up .7s ease-in-out infinite; }
@keyframes hg-up { 50% { transform: translateY(-16px); } }
#hg-ui .hg-reel.heavy .hg-rBody { fill: #233552; }
#hg-ui .hg-reel.lifting .hg-rKnob { fill: #fff3b0; }
#hg-ui .hg-reel.orange .hg-rSpool { fill: #ffc56b; }
#hg-ui .hg-reel.orange .hg-rLines { stroke: #f08a1c; }
#hg-ui .hg-reel.red .hg-rSpool { fill: #ff7a6a; }
#hg-ui .hg-reel.red .hg-rLines { stroke: #c21f16; }
#hg-ui .hg-reel.red svg { animation: hg-shake .09s infinite alternate; }
@keyframes hg-shake { from { transform: translateX(calc(var(--u)*-2)); } to { transform: translateX(calc(var(--u)*2)); } }
#hg-ui .hg-reel.running .hg-rKnob { fill: #ffb36b; }
#hg-ui .hg-reel:not(.winding):not(.ask) svg { filter: drop-shadow(0 calc(var(--u)*6) 0 rgba(29,43,69,.55)) saturate(.8); }

#hg-ui #hg-hint { left: calc(var(--u)*20); right: calc(var(--u)*20); text-align: center; font-size: calc(var(--u)*34); transition: opacity .2s; }
#hg-ui #hg-hint.hg-warn { color: #ff6a5a; font-size: calc(var(--u)*46); }
#hg-ui #hg-toast { left: 0; right: 0; top: 24%; text-align: center; font-size: calc(var(--u)*30); opacity: 0; transition: opacity .3s; }

/* the catch card */
#hg-ui #hg-card { left: calc(var(--u)*90); width: calc(var(--u)*540); top: 67%; transform: translateY(-50%) scale(.6); opacity: 0;
  border-radius: calc(var(--u)*34); background: linear-gradient(#fffdf4, #f4ead2); color: #1d2b45; text-align: center;
  box-shadow: 0 calc(var(--u)*14) 0 rgba(29,43,69,.55), 0 0 0 calc(var(--u)*6) #1d2b45; padding: calc(var(--u)*20) calc(var(--u)*24) calc(var(--u)*28);
  transition: transform .35s cubic-bezier(.2,1.6,.4,1), opacity .2s, left .45s, top .45s, width .45s; pointer-events: none; visibility: hidden; }
#hg-ui #hg-card.show { transform: translateY(-50%) scale(1); opacity: 1; pointer-events: auto; visibility: visible; }
#hg-ui #hg-card.leaving { visibility: visible; }
#hg-ui #hg-card .hg-rib { display: inline-block; margin-top: calc(var(--u)*-48); padding: calc(var(--u)*8) calc(var(--u)*34); border-radius: calc(var(--u)*14);
  background: #2f7ad8; color: #fff; font-size: calc(var(--u)*30); font-weight: 900; letter-spacing: calc(var(--u)*3); box-shadow: 0 calc(var(--u)*5) 0 #1d2b45; }
#hg-ui #hg-card.giant .hg-rib { background: #d9483b; }
#hg-ui #hg-card img { width: 100%; height: calc(var(--u)*190); object-fit: contain; margin-top: calc(var(--u)*6);
  filter: drop-shadow(0 calc(var(--u)*8) calc(var(--u)*4) rgba(0,0,0,.25)); }
#hg-ui #hg-card.head img { clip-path: inset(0 58% 0 0); }
#hg-ui #hg-card .hg-nm { font-size: calc(var(--u)*36); font-weight: 900; }
#hg-ui #hg-card .hg-kg { font-size: calc(var(--u)*82); font-weight: 900; line-height: 1; color: #1d2b45; }
#hg-ui #hg-card .hg-kg small { font-size: calc(var(--u)*40); }
#hg-ui .hg-badges { margin-top: calc(var(--u)*14); display: flex; gap: calc(var(--u)*10); justify-content: center; flex-wrap: wrap; min-height: calc(var(--u)*52); }
/* (1.25.6: the catch's news at a size a phone reads: it was 12 px) */
#hg-ui .hg-badge { flex: none; white-space: nowrap; padding: calc(var(--u)*9) calc(var(--u)*20); border-radius: calc(var(--u)*999); font-size: calc(var(--u)*30);
  font-weight: 900; background: #ffd84d; color: #1d2b45; animation: hg-pop .4s cubic-bezier(.2,1.8,.4,1) both; }
#hg-ui .hg-badge.blue { background: #9fe3ff; } #hg-ui .hg-badge.red { background: #ff8a7a; } #hg-ui .hg-badge.gold { background: #ffe9a8; }
@keyframes hg-pop { from { transform: scale(0); } }

/* sheets: the results card and the pause */
#hg-ui .hg-sheet { position: absolute; inset: 0; background: rgba(15,24,40,.72); display: none; pointer-events: auto; }
#hg-ui .hg-sheet.show { display: block; }
#hg-ui .hg-panel { position: absolute; left: calc(var(--u)*30); right: calc(var(--u)*30); top: calc(var(--u)*60); bottom: calc(var(--u)*60);
  border-radius: calc(var(--u)*32); background: linear-gradient(#fffdf4, #f2e8cf); color: #1d2b45; padding: calc(var(--u)*24);
  box-shadow: 0 0 0 calc(var(--u)*6) #1d2b45; overflow: auto; }
#hg-ui .hg-panel h2 { margin: 0 0 calc(var(--u)*12); text-align: center; font-size: calc(var(--u)*44); }
#hg-ui #hg-results .hg-panel { top: calc(var(--u)*40 + var(--safe-top, 0px)); bottom: auto; max-height: calc(100% - var(--u)*80); text-align: center; }
#hg-ui #hg-photo { width: 100%; border-radius: calc(var(--u)*20); box-shadow: 0 0 0 calc(var(--u)*4) #1d2b45; display: block; }
#hg-ui .hg-resrow { display: flex; gap: calc(var(--u)*10); margin: calc(var(--u)*12) 0; }
#hg-ui .hg-resrow .hg-slot { height: calc(var(--u)*100); background: #1d2b45; color: #fff; }
#hg-ui .hg-btns { display: flex; gap: calc(var(--u)*12); margin-top: calc(var(--u)*14); }
#hg-ui .hg-btns .hg-btn { flex: 1; height: calc(var(--u)*76); font-size: calc(var(--u)*27); box-shadow: 0 calc(var(--u)*6) 0 #1d2b45; background: #fff; }
#hg-ui .hg-btns .hg-btn.hg-go { background: #f5b800; }
#hg-ui .hg-btns .hg-btn.hg-more { background: #8fe3ff; }   /* (1.26.2) the 🎣 power-up: one more cast */
#hg-ui .hg-btns .hg-btn.hg-share { background: #25d366; color: #fff; }
#hg-ui #hg-pause .hg-panel { top: 30%; bottom: auto; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  #hg-ui .hg-hook.show, #hg-ui .hg-bar.red .hg-track { animation: none; }
}

/* (1.25) the Daily's OOM! button (js/ui/dom.js): under the pause button, away from the taps that drop blocks */
.oom-btn {
  position: absolute;
  top: calc(var(--sat) + 250 * var(--u));
  right: calc(var(--sar) + 10 * var(--u));
  z-index: 4;
  width: calc(116 * var(--u));
  height: calc(140 * var(--u));
  min-width: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.oom-btn[hidden] { display: none; }
.oom-btn img {
  display: block;
  width: calc(108 * var(--u));
  height: calc(108 * var(--u));
  margin: 0 auto;
  border-radius: 50%;
  object-fit: contain;
  background: radial-gradient(circle at 50% 38%, #ffe27a, #f5b800 62%, #c98c00);
  box-shadow: 0 0 0 calc(5 * var(--u)) #fff inset, 0 calc(6 * var(--u)) 0 #1d2b45;
  padding: calc(8 * var(--u)) calc(6 * var(--u)) calc(2 * var(--u));
}
.oom-btn span {
  display: block;
  margin-top: calc(-14 * var(--u));
  font-size: calc(28 * var(--u));
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: calc(5 * var(--u)) #1d2b45;
  paint-order: stroke fill;
  letter-spacing: calc(1 * var(--u));
}
.oom-btn:active img { transform: translateY(calc(3 * var(--u))) scale(0.94); }
.oom-btn.pulse img { animation: oom-pulse 1.2s ease-in-out infinite; }
@keyframes oom-pulse { 50% { transform: scale(1.08); box-shadow: 0 0 0 calc(5 * var(--u)) #fff inset, 0 calc(6 * var(--u)) 0 #1d2b45, 0 0 calc(22 * var(--u)) rgba(255, 216, 77, 0.95); } }
@media (prefers-reduced-motion: reduce) { .oom-btn.pulse img { animation: none; } }
html.zzz .oom-btn.pulse img { animation-play-state: paused; }

/* (1.25.6) a record: the card in gold light, breathing */
#hg-ui #hg-card.rec.show { box-shadow: 0 calc(var(--u)*14) 0 rgba(29,43,69,.55), 0 0 0 calc(var(--u)*6) #1d2b45, 0 0 calc(var(--u)*60) calc(var(--u)*10) rgba(255,210,70,.85); }
#hg-ui #hg-card.rec .hg-badge:first-child { font-size: calc(var(--u)*36); background: linear-gradient(#fff3b0, #ffc93c); box-shadow: 0 0 0 calc(var(--u)*3) #b8860b; }

/* (1.26.7) the lever style: the reel's box is the fish cam's window (the game draws the water and the fish in it); the
   tension bar above it, the lever under the thumb, an arrow lit on each side as he runs, the lift button on a heavy fish */
#hg-ui .hg-reel.lever { left: calc(var(--u)*16); right: calc(var(--u)*16); width: auto; bottom: calc(var(--u)*140); height: calc(var(--u)*430); }
#hg-ui .hg-reel.lever > svg { display: none; }
#hg-ui .hg-reel.lever .hg-tens { right: auto; left: calc(50% - var(--u)*215); }
#hg-ui .hg-reel.lever .hg-dist { display: none; }
#hg-ui .hg-reel.lever #hg-reelOut { position: absolute; left: calc(var(--u)*26); top: calc(var(--u)*24); margin: 0; font-size: calc(var(--u)*26); opacity: .9; }
#hg-ui .hg-tFuse { display: none; position: absolute; left: 0; bottom: calc(var(--u)*-14); height: calc(var(--u)*9); width: 0; border-radius: calc(var(--u)*5); background: #ff3b2f; box-shadow: 0 0 calc(var(--u)*10) #ff3b2f; }
#hg-ui .hg-reel.lever .hg-tFuse { display: block; }
#hg-ui .hg-lev { display: none; position: absolute; width: calc(var(--u)*110); pointer-events: none; }
#hg-ui .hg-reel.lever .hg-lev { display: block; }
#hg-ui .hg-levTrack { position: absolute; left: calc(var(--u)*33); width: calc(var(--u)*44); top: calc(var(--u)*55); bottom: calc(var(--u)*55); border-radius: calc(var(--u)*22);
  background: rgba(13,27,48,.6); box-shadow: inset 0 0 0 calc(var(--u)*4) rgba(255,255,255,.35); overflow: hidden; }
#hg-ui .hg-levFill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #39c86a; }
#hg-ui .hg-reel.orange .hg-levFill { background: #f5a623; }
#hg-ui .hg-reel.red .hg-levFill { background: #e8443a; }
#hg-ui .hg-levKnob { position: absolute; left: 0; width: calc(var(--u)*110); height: calc(var(--u)*110); border-radius: 50%; box-sizing: border-box;
  background: #ffd84d; border: calc(var(--u)*7) solid #1d2b45; display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--u)*54); font-weight: 900; color: #1d2b45; box-shadow: 0 calc(var(--u)*6) 0 rgba(29,43,69,.55); }
#hg-ui .hg-reel.orange .hg-levKnob { background: #f5a623; }
#hg-ui .hg-reel.red .hg-levKnob { background: #ff6a5a; animation: hg-shake .09s infinite alternate; }
#hg-ui .hg-lev:not(.held) { opacity: .65; }
#hg-ui .hg-lev.held .hg-levTrack { opacity: .5; }
#hg-ui .hg-lev.held .hg-levKnob { opacity: .8; }
#hg-ui .hg-lev:not(.held) .hg-levKnob { animation: hg-levAsk 1.2s ease-in-out infinite; }
@keyframes hg-levAsk { 50% { transform: translateY(calc(var(--u)*-80)); } }
#hg-ui .hg-keer { display: none; position: absolute; top: calc(50% - var(--u)*100); width: calc(var(--u)*150); height: calc(var(--u)*200);
  border-radius: calc(var(--u)*40); font-size: calc(var(--u)*84); line-height: 1; align-items: center; justify-content: center;
  background: #ffd84d; color: #1d2b45; border: calc(var(--u)*7) solid #1d2b45; box-shadow: 0 calc(var(--u)*8) 0 rgba(29,43,69,.6), 0 0 calc(var(--u)*30) rgba(255,216,77,.7);
  opacity: 0; transform: scale(.7); pointer-events: none; transition: opacity .08s, transform .1s; }
#hg-ui .hg-keer.l { left: calc(var(--u)*14); }
#hg-ui .hg-keer.r { right: calc(var(--u)*14); }
#hg-ui .hg-reel.lever .hg-keer { display: flex; }
#hg-ui .hg-reel.lever .hg-keer.on { opacity: 1; transform: scale(1); pointer-events: auto; animation: hg-keerOn .26s ease-in-out infinite alternate; }
@keyframes hg-keerOn { to { transform: scale(1.1); } }
#hg-ui .hg-lift { display: none; position: absolute; left: calc(50% - var(--u)*120); top: calc(var(--u)*22); width: calc(var(--u)*240); height: calc(var(--u)*92);
  border-radius: calc(var(--u)*46); font-size: calc(var(--u)*40); background: #ffd84d; color: #1d2b45; border: calc(var(--u)*6) solid #1d2b45;
  box-shadow: 0 calc(var(--u)*7) 0 rgba(29,43,69,.6); align-items: center; justify-content: center; pointer-events: none; opacity: 0; }
#hg-ui .hg-reel.lever .hg-lift { display: flex; }
#hg-ui .hg-reel.lever .hg-lift.on { opacity: 1; pointer-events: auto; animation: hg-up .7s ease-in-out infinite; }
#hg-ui .hg-reel.lever.lifting .hg-lift { background: #fff3b0; }
@media (prefers-reduced-motion: reduce) {
  #hg-ui .hg-reel.lever .hg-keer.on, #hg-ui .hg-lev:not(.held) .hg-levKnob, #hg-ui .hg-reel.lever .hg-lift.on, #hg-ui .hg-reel.red .hg-levKnob { animation: none; }
}

/* (1.34.3, the owner 11 Nov 2026: "the fish look bland") the catch card's fish: a soft halo of light behind it (sky blue; gold
   for a giant or a record), its colours a touch richer, and a flash of shine as the card lands */
#hg-ui #hg-card img { background: radial-gradient(ellipse at 50% 55%, rgba(110,185,255,.5), rgba(110,185,255,0) 64%);
  filter: drop-shadow(0 calc(var(--u)*8) calc(var(--u)*4) rgba(0,0,0,.25)) saturate(1.28) brightness(1.06); }
#hg-ui #hg-card.giant img, #hg-ui #hg-card.rec img { background: radial-gradient(ellipse at 50% 55%, rgba(255,203,70,.7), rgba(255,203,70,0) 64%); }
#hg-ui #hg-card.show img { animation: hg-shine 1.5s ease-out .15s 1 both; }
@keyframes hg-shine {
  0% { filter: drop-shadow(0 calc(var(--u)*8) calc(var(--u)*4) rgba(0,0,0,.25)) saturate(1.28) brightness(1.75); }
  40% { filter: drop-shadow(0 calc(var(--u)*8) calc(var(--u)*4) rgba(0,0,0,.25)) saturate(1.4) brightness(1.4); }
  100% { filter: drop-shadow(0 calc(var(--u)*8) calc(var(--u)*4) rgba(0,0,0,.25)) saturate(1.28) brightness(1.06); }
}
@media (prefers-reduced-motion: reduce) { #hg-ui #hg-card.show img { animation: none; } }