* { 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; }
/* the HUD is only to look at: a finger put down on it steers the rod like one on the water */
.panel, #finder, #tension, #rodGauge, #hint, #toast { pointer-events: none; }

.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; }
#msg.move { font-size: 52px; color: #ff9a3c; text-shadow: 3px 3px 0 #7a2a00, 6px 6px 0 #000; }
#msg.good { font-size: 52px; color: #7dff8a; text-shadow: 3px 3px 0 #1d6b2a, 6px 6px 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;
  justify-content: safe center; overflow-y: auto; 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; display: flex; flex-direction: column; align-items: center; gap: 10px; }
#loadBar { width: min(420px, 80vw); height: 18px; border: 3px solid #fff; background: rgba(0,0,0,.45); box-shadow: 3px 3px 0 #000; }
#loadFill { width: 0; height: 100%; background: linear-gradient(#ffe14a, #f0a020); }
#loadPct { font-size: 16px; color: #ffe14a; }
#loading.ready #loadBar, #loading.ready #loadPct { display: none; }
.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; }
  #msg.move, #msg.good { font-size: 32px; }
  #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; }
}

/* ---- who's fishing, fishing together ---- */
#menu, #together, #waiting { background: rgba(4, 18, 30, .78); }
#whoCards { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
#whoCards .card { width: 220px; }
#whoCards .card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; display: block; background: #0b2238; }
#whoCards .card .name { font-size: 26px; margin-top: 6px; }
#whoCards .card .blurb { min-height: 0; }
#tgStatus { color: #ffe14a; font-size: 18px; min-height: 22px; max-width: 560px; }
#menuGo button { margin: 6px; }
#invite { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20; text-align: center; padding: 18px 22px;
  background: rgba(120, 30, 110, .94); border: 4px solid #fff; border-radius: 14px; box-shadow: 6px 6px 0 #000; text-shadow: 3px 3px 0 #000;
  animation: pop .25s ease-out; max-width: 92vw; }
#invText { font-size: 26px; color: #ffe14a; font-style: italic; margin-bottom: 4px; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
#toast { position: fixed; left: 50%; top: 84px; transform: translateX(-50%); font-size: 18px; color: #fff; background: rgba(150, 40, 120, .85);
  border: 2px solid #fff; border-radius: 8px; padding: 6px 14px; text-shadow: 2px 2px 0 #000; pointer-events: none; opacity: 0;
  transition: opacity .2s; white-space: nowrap; }
#toast.show { opacity: 1; }
@media (max-width: 700px), (max-height: 500px) {
  #whoCards .card { width: 140px; } #whoCards .card .name { font-size: 18px; }
  #toast { font-size: 13px; top: 64px; }
  #invText { font-size: 18px; } #invite button { font-size: 18px; padding: 10px 18px; }
  #menuGo button { font-size: 18px; padding: 10px 16px; }
}

/* ---- back and menu buttons, time of day, pause, how to play ---- */
.back { position: absolute; top: 12px; left: 12px; font-size: 16px; padding: 8px 14px; z-index: 1; }
#menuBtn { position: fixed; left: 12px; top: 86px; font-size: 13px; padding: 6px 12px; box-shadow: 3px 3px 0 #555; opacity: .9; }
#todRow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
#todRow .todLabel { font-size: 14px; color: #8fe3ff; letter-spacing: 1px; margin-right: 4px; }
#todRow button { font-size: 15px; padding: 7px 12px; background: #ccc; box-shadow: 3px 3px 0 #555; }
#todRow button.sel { background: #ffe14a; box-shadow: 3px 3px 0 #c0261b; }
#quit, #how { background: rgba(4, 18, 30, .9); z-index: 15; }
#quitText { max-width: 520px; }
#howList { text-align: left; max-width: 640px; margin: 0; padding-left: 28px; font: bold 17px/1.35 Arial, sans-serif; text-shadow: 2px 2px 0 #000; }
#howList li { margin: 7px 0; }
#howList b { color: #ffe14a; font-family: 'Arial Black', Impact, sans-serif; font-weight: normal; }
#tJerk.pulse { animation: pulse .35s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(1.25); background: #ffe14a; } }
@media (max-width: 700px), (max-height: 500px) {
  .screen { gap: 8px; padding: 10px; }
  .back { top: 8px; left: 8px; font-size: 13px; padding: 6px 10px; }
  #menuBtn { top: 62px; left: 8px; font-size: 11px; padding: 5px 9px; }
  #todRow { gap: 5px; } #todRow .todLabel { font-size: 11px; width: 100%; margin: 0; }
  #todRow button { font-size: 12px; padding: 5px 8px; }
  #areaCards { gap: 8px; } #areaCards .card { width: 150px; } #areaCards .card .name { font-size: 17px; }
  #areaCards .card .blurb { font-size: 11px; }
  #lureCards { gap: 8px; max-width: 100%; }
  #lureCards .card { width: calc(50% - 8px); max-width: 190px; padding: 6px 8px; }
  #lureCards .card svg { height: 26px; }
  #lureCards .card .name { font-size: 15px; } #lureCards .card .meta { font-size: 10px; }
  #lureCards .card .blurb { font-size: 11px; margin: 3px 0; } #lureCards .card .tip { font-size: 11px; }
  #lureNote { display: none; }
  #howList { font-size: 13px; padding-left: 22px; } #howList li { margin: 4px 0; }
  #quit h2, #how h2 { font-size: 26px; }
  #quit button, #how button { font-size: 18px; padding: 10px 18px; }
}
@media (max-height: 500px) {
  #lureCards .card { width: calc(33.3% - 8px); max-width: 220px; }
  #lureCards .card .blurb { display: none; }
  #areaSel .small { font-size: 11px; }
}