* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b1d1a; color: #fff;
  font-family: 'Arial Black', 'Arial Bold', Impact, sans-serif; user-select: none; -webkit-user-select: none;
  touch-action: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

.panel { position: fixed; top: 12px; background: rgba(8, 24, 40, 0.62); border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px; padding: 6px 12px; text-shadow: 2px 2px 0 #000; }
.tl { left: 12px; } .tr { right: 12px; text-align: right; } .tc { left: 50%; transform: translateX(-50%); text-align: center; }
.label { font-size: 11px; color: #ffd84a; letter-spacing: 1px; }
.big { font-size: 26px; line-height: 1.05; }
#lureName { font-size: 18px; }

#finder { position: fixed; left: 12px; bottom: 12px; width: 180px; height: 180px; border-radius: 50%;
  border: 3px solid #a9c4b4; box-shadow: 0 0 0 3px #1a2a24, 0 4px 14px rgba(0,0,0,.5); }

#tension { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); text-align: center;
  text-shadow: 2px 2px 0 #000; }
#tension .bar { position: relative; width: 34px; height: 260px; margin: 6px auto; background: rgba(0,0,0,.55);
  border: 3px solid #fff; border-radius: 6px; overflow: hidden; }
#tension .red { position: absolute; left: 0; right: 0; top: 0; height: 15%; background: rgba(230, 40, 40, .45); }
#tensionFill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(#ffe14a, #3fd06a); }
#tensionFill.danger { background: #ff3b30; }
#lineLen { font-size: 16px; }

#rodGauge { position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); width: 320px; text-align: center;
  text-shadow: 2px 2px 0 #000; }
#rodGauge .track { position: relative; height: 12px; background: rgba(0,0,0,.5); border: 2px solid #fff; border-radius: 8px; }
#rodDot { position: absolute; top: -6px; width: 20px; height: 20px; margin-left: -10px; left: 50%; border-radius: 50%;
  background: #ffd84a; border: 2px solid #000; }
#rodGauge .arrow { font-size: 30px; color: #ff6a3d; height: 36px; }
#rodGauge .cap { font-size: 11px; color: #ffd84a; margin-top: 4px; }

#hint { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: 14px; color: #fff;
  background: rgba(0,0,0,.45); padding: 5px 12px; border-radius: 6px; white-space: nowrap; font-family: Arial, sans-serif; font-weight: bold; }

#msg { position: fixed; left: 0; right: 0; top: 34%; text-align: center; font-size: 72px; color: #ffe14a; pointer-events: none;
  text-shadow: 4px 4px 0 #c0261b, 8px 8px 0 #000; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; font-style: italic; }
#msg.show { opacity: 1; transform: scale(1); }
#msg.blue { color: #8fe3ff; text-shadow: 4px 4px 0 #1d4f9c, 8px 8px 0 #000; }

#fade { position: fixed; inset: 0; background: #e8fbff; opacity: 0; pointer-events: none; transition: opacity .25s; }
#fade.on { opacity: 1; transition: opacity .12s; }

.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; text-shadow: 3px 3px 0 #000; gap: 14px; padding: 16px; }
#title { background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.35)); cursor: pointer; }
.logo { display: flex; flex-direction: column; align-items: center; transform: rotate(-4deg); }
.logo .small { font-size: 34px; color: #fff; letter-spacing: 6px; }
.logo .main { font-size: clamp(48px, 10vw, 110px); line-height: .95; color: #ffe14a; font-style: italic;
  text-shadow: 5px 5px 0 #c0261b, 10px 10px 0 #000; }
.logo .sub { margin-top: 10px; font-size: 18px; letter-spacing: 3px; background: #1d4f9c; padding: 4px 14px; border: 3px solid #fff; }
#loading { margin-top: 40px; font-size: 24px; }
.blink { animation: blink 1s steps(2) infinite; }
.credit { position: fixed; bottom: 10px; left: 0; right: 0; font: 11px Arial, sans-serif; color: #dfe8ee; text-shadow: 1px 1px 0 #000; }
.best { font-size: 16px; color: #ffd84a; }
@keyframes blink { 50% { opacity: 0; } }

#lurePick, #weighIn, #results { background: rgba(4, 18, 30, .78); }
h2 { margin: 0; font-size: 44px; color: #ffe14a; font-style: italic; text-shadow: 3px 3px 0 #c0261b, 6px 6px 0 #000; }
#lureCards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 980px; }
.card { width: 210px; background: #12324f; border: 3px solid #7fa7c9; border-radius: 10px; padding: 12px; cursor: pointer;
  text-shadow: 2px 2px 0 #000; transition: transform .1s; font-family: Arial, sans-serif; }
.card:hover, .card.sel { transform: translateY(-4px); border-color: #ffe14a; background: #1b4670; }
.card .name { font-family: 'Arial Black', Impact, sans-serif; font-size: 20px; color: #ffe14a; }
.card .blurb { font-size: 14px; margin: 6px 0; min-height: 52px; }
.card .tip { font-size: 12px; color: #9fe39a; }
.card svg { width: 100%; height: 70px; }
.small { font-size: 14px; font-family: Arial, sans-serif; color: #cfe3ef; }
.huge { font-size: 76px; color: #fff; text-shadow: 5px 5px 0 #1d4f9c, 9px 9px 0 #000; }
#wiLength, #wiTotal, #resBody { font-size: 22px; font-family: Arial, sans-serif; font-weight: bold; }
#resBody { line-height: 1.6; }
button { font-family: 'Arial Black', Impact, sans-serif; font-size: 24px; padding: 12px 30px; color: #000; background: #ffe14a;
  border: 4px solid #000; border-radius: 10px; box-shadow: 4px 4px 0 #c0261b; cursor: pointer; margin-top: 10px; }
button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #c0261b; }
#weighIn { background: linear-gradient(rgba(4,18,30,0) 45%, rgba(4,18,30,.85) 75%); justify-content: flex-end; padding-bottom: 24px; gap: 4px; }
#weighIn h2 { font-size: 34px; } #weighIn .huge { font-size: 56px; } #weighIn #wiLength, #weighIn #wiTotal { font-size: 18px; }

#touch button { position: fixed; bottom: 18px; font-size: 18px; padding: 0; border-radius: 50%; margin: 0; opacity: .85; }
#tMain { right: 18px; width: 110px; height: 110px; }
#tJerk { right: 140px; width: 80px; height: 80px; background: #8fe3ff; }
#tLure { right: 140px; bottom: 110px !important; width: 64px; height: 64px; font-size: 13px !important; background: #fff; }

@media (max-width: 700px), (max-height: 500px) {
  .big { font-size: 18px; } #lureName { font-size: 13px; } .label { font-size: 9px; }
  .panel { padding: 4px 8px; }
  #finder { width: 110px; height: 110px; }
  #tension .bar { height: 170px; width: 26px; }
  #tension { right: 10px; }
  #msg { font-size: 44px; }
  #rodGauge { width: 220px; bottom: 140px; }
  #hint { font-size: 11px; bottom: 140px; display: none; }
  h2 { font-size: 30px; } .huge { font-size: 48px; }
  .card { width: 150px; padding: 8px; } .card .blurb { font-size: 12px; min-height: 0; }
  .card svg { height: 44px; }
}

/* ---- arcade screens ---- */
#tension .low { position: absolute; left: 0; right: 0; bottom: 0; height: 15%; background: rgba(80, 140, 255, .35); }
#lineFt { top: auto; bottom: 14px; right: 12px; text-align: right; }
#sub { position: fixed; left: 0; right: 0; top: calc(34% + 84px); text-align: center; font-size: 26px; color: #fff; pointer-events: none;
  text-shadow: 3px 3px 0 #000; opacity: 0; transition: opacity .15s; }
#sub.show { opacity: 1; }
#areaSel, #stage, #cont { background: rgba(4, 18, 30, .7); }
#areaCards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
#areaCards .card { width: 190px; }
#areaCards .card .name { font-size: 26px; }
.stageTime { font-size: 30px; color: #8fe3ff; text-shadow: 3px 3px 0 #1d4f9c; }
.quota { font-size: 26px; background: #c0261b; padding: 6px 18px; border: 3px solid #fff; }
.rank { font-size: 28px; color: #ff6a3d; animation: blink .5s steps(2) infinite; }
button.grey { background: #ccc; box-shadow: 4px 4px 0 #555; }
#initialsIn { font-family: 'Arial Black', Impact, sans-serif; font-size: 40px; width: 140px; text-align: center; text-transform: uppercase;
  border: 4px solid #000; border-radius: 8px; padding: 4px; margin: 8px; }
#ranking { font-family: 'Courier New', monospace; font-weight: bold; font-size: 20px; white-space: pre; line-height: 1.35; color: #ffe14a; }
.card .meta { font-size: 12px; color: #8fe3ff; letter-spacing: 1px; }
#lureCards .card { width: 180px; }
#tFast { right: 18px; bottom: 140px !important; width: 80px; height: 80px; background: #ff9a5a; }
#tJerk { right: 140px; width: 80px; height: 80px; background: #8fe3ff; }
@media (max-width: 700px), (max-height: 500px) {
  #lureCards .card { width: 140px; } #areaCards .card { width: 140px; }
  #sub { font-size: 18px; top: calc(34% + 54px); }
  #lineFt { bottom: auto; top: 70px; }
  .stageTime { font-size: 22px; } .quota { font-size: 18px; }
  #tFast { bottom: 135px !important; width: 64px; height: 64px; }
}