/* styles/hud.css - score/hook/line/bait pills, hint, top-left buttons, paused banner */
#hud { position:fixed; top:16px; left:50%; transform:translateX(-50%); text-align:center; pointer-events:none; }
#stack { position:fixed; top:16px; right:16px; display:flex; flex-direction:column; align-items:stretch; gap:10px; pointer-events:none; }
.pill { font-size:26px; font-weight:800; background:#fffdf6; padding:4px 18px 11px; border-radius:99px; text-align:center;
  box-shadow:0 5px 0 rgba(90,70,40,.15); white-space:nowrap; }
/* hook rust / line wear: just a thin 4px bar along the bottom of the pill, not a full progress fill */
#hookpill, #linepill { background:
  linear-gradient(90deg, var(--col, #e6dcc4) var(--fill, 0%), #e6dcc4 var(--fill, 0%)) center calc(100% - 4px) / calc(100% - 36px) 4px no-repeat,
  #fffdf6; }
#hint { margin-top:8px; font-size:14px; color:#8a7c68; }
/* bait list: a small paper tray under the other pills. "None" first; every row has a paper radio circle, the selected row gets a green ring */
#baitStack, #equipStack { display:flex; flex-direction:column; gap:6px; padding:8px; border-radius:28px; pointer-events:auto;
  background:rgba(255,253,246,.55); box-shadow:0 5px 0 rgba(90,70,40,.12); }
#equipStack[hidden] { display:none; }
.pill.bait { display:flex; align-items:center; gap:8px; box-sizing:border-box; min-height:44px; padding:5px 16px 5px 10px; text-align:left;
  font:inherit; font-size:22px; font-weight:800; color:inherit; border:0; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.pill.bait:active { transform:translateY(2px); box-shadow:0 3px 0 rgba(90,70,40,.15); }
.pill.bait.on { box-shadow:inset 0 0 0 3px #5fa86f, 0 5px 0 rgba(90,70,40,.15); }
/* the score pill has no bar underneath, so unlike the hook / line pills its content is centered both ways; the fish and the number are sized to match */
#score { display:flex; align-items:center; justify-content:center; gap:8px; min-height:51px; box-sizing:border-box; padding:2px 20px 0; font-size:32px; line-height:1; }   /* 2px on top = digits 1px lower: optically centered */
#score .pi { display:block; vertical-align:0; }
#optBtn, #pauseBtn, #restartBtn { position:fixed; top:16px; left:16px; z-index:4; width:56px; height:56px; border-radius:50%; border:0; background:#fffdf6; padding:0;
  font-size:28px; line-height:0; box-shadow:0 5px 0 rgba(90,70,40,.15); cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
/* the paper icon is placed by its CENTER at the middle of the circle (no baseline / inline layout involved), 1px up so the icon plus its own drop shadow looks centered */
#optBtn i[data-icon], #pauseBtn i[data-icon], #restartBtn i[data-icon] { position:absolute; left:50%; top:50%; transform:translate(-50%, calc(-50% - 1px)); display:block; vertical-align:0; }
#optBtn .pi, #pauseBtn .pi, #restartBtn .pi { display:block; vertical-align:0; }
#pauseBtn { left:82px; }
#restartBtn { left:148px; }
#optBtn:active, #pauseBtn:active, #restartBtn:active { transform:translateY(2px); box-shadow:0 3px 0 rgba(90,70,40,.15); }
#paused { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); z-index:3; background:#fffdf6; padding:14px 38px; border-radius:99px;
  font-size:34px; font-weight:800; box-shadow:0 8px 0 rgba(90,70,40,.18); pointer-events:none; white-space:nowrap; }
/* thermometer (left side, under the top-left buttons): a paper tube filled to the temperature, the number below it, and "feels N" when your jackets change it */
#thermo { position:fixed; left:16px; top:84px; width:62px; box-sizing:border-box; padding:9px 4px 8px; border-radius:31px; background:#fffdf6; box-shadow:0 5px 0 rgba(90,70,40,.15);
  display:flex; flex-direction:column; align-items:center; pointer-events:none; z-index:2; font-weight:800; color:#3d362e; }
#thermoTube { position:relative; width:14px; height:62px; border-radius:7px 7px 0 0; background:#e6dcc4; overflow:hidden; }
#thermoFill { position:absolute; left:0; right:0; bottom:0; height:50%; background:#f5a05f; transition:height .6s; }
#thermoBulb { width:26px; height:26px; margin-top:-4px; border-radius:50%; background:#f5a05f; box-shadow:inset 0 0 0 3px rgba(255,255,255,.35); }
#thermoText { margin-top:4px; font-size:17px; line-height:1; white-space:nowrap; }
#thermoFeels { min-height:12px; font-size:11px; font-weight:700; line-height:1.1; color:#8a7c68; white-space:nowrap; }
#thermo.cold #thermoText { color:#3c78b0; }