:root{
  --navy:#06283d; --navy2:#0b3d5c; --deep:#041b2b;
  --foam:#dff6ff; --sky:#9fe4ff; --teal:#0fb9c4;
  --gold:#ffd166; --gold2:#f5a524; --coral:#ff6b6b; --green:#3ddc84;
  --wood:#a9744f; --wood2:#7d4f2e;
  --font: "Trebuchet MS", "Segoe UI", Verdana, system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#02121d;font-family:var(--font);color:#eaf6ff;
  -webkit-user-select:none;user-select:none;}
#app{position:fixed;inset:0}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair;
  touch-action:none;-webkit-touch-callout:none}
html,body{overscroll-behavior:none}
.hidden{display:none !important}

#hud{position:absolute;inset:0;pointer-events:none;padding:14px}
.hud-left{display:flex;flex-wrap:wrap;gap:8px;max-width:70%}
.chip{display:flex;align-items:center;gap:7px;background:rgba(4,27,43,.72);
  border:2px solid rgba(159,228,255,.25);border-radius:14px;padding:6px 12px;
  font-size:15px;font-weight:700;letter-spacing:.2px;backdrop-filter:blur(4px);
  box-shadow:0 4px 0 rgba(0,0,0,.25)}
.chip .ic{font-size:16px;opacity:.95}
.chip.money{color:var(--gold);border-color:rgba(255,209,102,.45)}
.gauge{width:64px;height:10px;border-radius:6px;background:rgba(0,0,0,.45);overflow:hidden;
  border:1px solid rgba(255,255,255,.15)}
.gauge-fill{height:100%;width:0%;background:linear-gradient(90deg,#ff6b6b,#ffd166,#3ddc84);
  transition:width .2s}
.hud-right{position:absolute;top:14px;right:16px;text-align:right}
.zone-name{font-size:22px;font-weight:800;text-shadow:0 3px 0 rgba(0,0,0,.45);letter-spacing:.5px}
.zone-depth{font-size:14px;opacity:.85;font-weight:700}
.hud-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  background:rgba(4,27,43,.8);border:2px solid rgba(159,228,255,.3);border-radius:999px;
  padding:9px 20px;font-size:16px;font-weight:700;white-space:nowrap;opacity:0;transition:opacity .2s}
.hud-hint.show{opacity:1}
.hud-hint b{color:var(--gold)}

#fightui{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);pointer-events:none}
.fight-card{background:rgba(4,27,43,.85);border:3px solid rgba(159,228,255,.35);border-radius:18px;
  padding:12px 18px;min-width:420px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.fish-name{text-align:center;font-size:20px;font-weight:800;margin-bottom:8px;color:var(--sky)}
.fish-name small{display:block;font-size:13px;font-weight:700;opacity:.75;color:#eaf6ff}
.bar-row{display:flex;align-items:center;gap:10px;margin:6px 0}
.bar-row label{font-size:11px;font-weight:800;letter-spacing:1px;width:104px;opacity:.8}
.bar{position:relative;flex:1;height:20px;border-radius:10px;background:rgba(0,0,0,.5);
  border:2px solid rgba(255,255,255,.18);overflow:hidden}
.bar-fill{height:100%;width:0%;border-radius:8px}
/* the tension track carries the colour; the "fill" is a right-anchored mask,
   so green->red always means the same thing no matter how full the bar is */
.bar.tension{background:linear-gradient(90deg,#3ddc84,#8ee06a 45%,#ffd166 72%,#ff4d4d 100%)}
.bar.tension .bar-fill{position:absolute;right:0;top:0;border-radius:0;
  background:rgba(2,14,24,.82);box-shadow:-1px 0 0 rgba(255,255,255,.5)}
.bar.stam .bar-fill{background:linear-gradient(90deg,#7ad7ff,#c084fc)}
.bar.prog .bar-fill{background:linear-gradient(90deg,#f5a524,#3ddc84)}
.bar .marker{position:absolute;top:0;left:72%;width:3px;height:100%;background:rgba(255,255,255,.55)}
.fight-card.danger{border-color:#ff4d4d;animation:shake .1s infinite}
.fight-card.running{border-color:#ffd166;box-shadow:0 0 26px rgba(255,209,102,.45),0 8px 24px rgba(0,0,0,.5)}
.fight-tip.alarm{color:#ff8a8a;font-size:15px}
.fight-tip.run{color:var(--gold);font-size:15px}
@keyframes shake{0%{transform:translate(0,0)}50%{transform:translate(2px,-1px)}100%{transform:translate(-2px,1px)}}
.fight-tip{text-align:center;font-size:13px;font-weight:700;opacity:.85;margin-top:6px}

.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,rgba(11,61,92,.75),rgba(2,18,29,.94));
  backdrop-filter:blur(3px);z-index:20}
.title-inner{text-align:center;max-width:680px;padding:24px}
#title h1{font-size:60px;letter-spacing:2px;text-shadow:0 6px 0 rgba(0,0,0,.4);margin-bottom:4px}
#title h1 span{color:var(--gold)}
.tag{font-size:18px;opacity:.9;margin-bottom:22px;font-weight:600}
.btn-row{display:flex;gap:14px;justify-content:center;margin-bottom:24px}
button{font-family:var(--font);cursor:pointer;border:none}
button.big{background:linear-gradient(180deg,var(--gold),var(--gold2));color:#3a2400;
  font-size:20px;font-weight:800;padding:14px 30px;border-radius:14px;
  box-shadow:0 5px 0 #b8761a;transition:transform .08s,box-shadow .08s}
button.big:hover{transform:translateY(-2px);box-shadow:0 7px 0 #b8761a}
button.big:active{transform:translateY(3px);box-shadow:0 2px 0 #b8761a}
button.big.ghost{background:rgba(255,255,255,.1);color:#eaf6ff;box-shadow:0 5px 0 rgba(0,0,0,.3)}
button.big:disabled{filter:grayscale(.8);opacity:.5;cursor:not-allowed}
.howto{background:rgba(4,27,43,.6);border:2px solid rgba(159,228,255,.22);border-radius:16px;
  padding:16px 22px;text-align:left}
.howto h3{margin-bottom:8px;color:var(--sky);font-size:17px}
.howto ul{list-style:none;font-size:15px;line-height:1.7}
.howto li::before{content:"\2022 \00a0";color:var(--gold);font-weight:900}
.howto b{color:var(--gold)}

.shop-window{width:min(940px,94vw);height:min(660px,92vh);
  background:linear-gradient(180deg,#0e3f60,#082a41);
  border:4px solid #12587f;border-radius:22px;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.shop-window header{display:flex;align-items:center;gap:16px;padding:14px 20px;
  background:linear-gradient(180deg,#12587f,#0d4462);border-bottom:3px solid rgba(0,0,0,.25)}
.shop-window h2{font-size:24px;flex:1}
.wallet{font-size:17px;font-weight:700}
.wallet b{color:var(--gold);font-size:20px}
button.x{background:var(--green);color:#05301a;font-weight:800;padding:9px 16px;border-radius:10px;
  font-size:15px;box-shadow:0 4px 0 #1f9a5b}
button.x:active{transform:translateY(2px);box-shadow:0 2px 0 #1f9a5b}
.tabs{display:flex;gap:4px;padding:10px 16px 0;background:rgba(0,0,0,.15)}
.tab{background:rgba(255,255,255,.07);color:#cfe9f8;padding:10px 20px;border-radius:12px 12px 0 0;
  font-size:16px;font-weight:700}
.tab.active{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 3px 0 var(--gold)}
.shop-body{flex:1;overflow-y:auto;padding:16px 20px}
.pane{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.07);
  border:2px solid rgba(255,255,255,.09);border-radius:14px;padding:12px 16px}
.row.owned{border-color:rgba(61,220,132,.5);background:rgba(61,220,132,.1)}
.row.locked{opacity:.6}
.row .icon{width:64px;height:46px;flex:none}
.row .info{flex:1}
.row .info h4{font-size:17px;margin-bottom:3px}
.row .info p{font-size:13px;opacity:.85;line-height:1.45}
.row .stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:5px}
.stat{background:rgba(0,0,0,.3);border-radius:8px;padding:2px 8px;font-size:12px;font-weight:700}
.stat.good{color:var(--green)} .stat.bad{color:var(--coral)}
.price{font-size:19px;font-weight:800;color:var(--gold);min-width:92px;text-align:right}
.row button{background:linear-gradient(180deg,var(--gold),var(--gold2));color:#3a2400;font-weight:800;
  padding:10px 18px;border-radius:11px;font-size:15px;box-shadow:0 4px 0 #b8761a;min-width:96px}
.row button:active{transform:translateY(2px);box-shadow:0 2px 0 #b8761a}
.row button:disabled{filter:grayscale(1);opacity:.45;cursor:not-allowed}
.row button.buy2{background:linear-gradient(180deg,#7ad7ff,#3aa8dd);color:#05283a;box-shadow:0 4px 0 #2b7ea8}
.empty{text-align:center;opacity:.6;padding:40px;font-size:17px}
.sell-total{display:flex;justify-content:space-between;align-items:center;margin-top:8px;
  border-top:2px dashed rgba(255,255,255,.2);padding-top:12px;font-size:20px;font-weight:800}
.sell-total b{color:var(--gold);font-size:26px}
.shop-window footer{padding:10px 20px;font-size:15px;font-weight:700;min-height:42px;
  background:rgba(0,0,0,.22);color:var(--sky)}
.trip{background:rgba(0,0,0,.25);border-radius:12px;padding:12px 16px;font-size:14px;line-height:1.7}
.trip h4{color:var(--sky);margin-bottom:4px;font-size:15px}
.trip .neg{color:var(--coral);font-weight:800}
.trip .pos{color:var(--green);font-weight:800}

.catch-card{background:linear-gradient(180deg,#0e3f60,#082a41);border:4px solid var(--gold);
  border-radius:22px;padding:20px 26px;text-align:center;width:min(470px,92vw);
  box-shadow:0 20px 60px rgba(0,0,0,.6);animation:pop .3s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
#catch-canvas{width:100%;height:auto;background:radial-gradient(circle at 50% 60%,#12648f,#062338);
  border-radius:14px;margin-bottom:12px}
.catch-title{font-size:15px;letter-spacing:3px;font-weight:800;color:var(--gold);text-transform:uppercase}
.catch-name{font-size:32px;font-weight:800;margin:2px 0 10px}
.catch-stats{display:flex;justify-content:center;gap:34px;margin-bottom:10px}
.catch-stats div{display:flex;flex-direction:column}
.catch-stats span{font-size:24px;font-weight:800;color:var(--sky)}
.catch-stats small{font-size:11px;letter-spacing:2px;opacity:.65;text-transform:uppercase}
.catch-badge{background:var(--gold);color:#3a2400;font-weight:800;border-radius:999px;
  padding:6px 16px;display:inline-block;margin-bottom:10px;font-size:14px}
.catch-fact{font-size:14px;opacity:.9;line-height:1.5;margin-bottom:16px;font-style:italic}
.catch-note{font-size:14px;font-weight:700;color:var(--gold);margin-bottom:12px;line-height:1.4}
.catch-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.catch-buttons button.big{font-size:18px;padding:13px 24px}

.pedia-window{width:min(1000px,94vw);height:min(660px,92vh);
  background:linear-gradient(180deg,#0e3f60,#082a41);
  border:4px solid #12587f;border-radius:22px;display:flex;flex-direction:column;overflow:hidden}
.pedia-window header{display:flex;align-items:center;padding:14px 20px;gap:16px;
  background:linear-gradient(180deg,#12587f,#0d4462)}
.pedia-window h2{font-size:24px}
.pedia-stats{flex:1;text-align:right;font-size:14px;font-weight:600;opacity:.9}
.pedia-stats b{color:var(--gold)}
.pedia-grid{flex:1;overflow-y:auto;padding:16px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px}
.pcard{background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.1);border-radius:14px;
  padding:8px;text-align:center}
.pcard canvas{width:100%;height:72px;display:block}
.pcard h5{font-size:13px;margin-top:4px}
.pcard small{font-size:11px;opacity:.7;display:block}
.pcard.unk{opacity:.45}
.pcard.unk h5{color:#8fb6cc}

#toasts{position:absolute;left:50%;top:78px;transform:translateX(-50%);z-index:30;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:rgba(4,27,43,.92);border:2px solid var(--sky);border-radius:12px;
  padding:10px 20px;font-size:16px;font-weight:700;animation:tin .3s;white-space:nowrap;
  box-shadow:0 6px 20px rgba(0,0,0,.4)}
.toast.warn{border-color:var(--coral);color:#ffd7d7}
.toast.good{border-color:var(--green);color:#d7ffe9}
.toast.gold{border-color:var(--gold);color:var(--gold)}
@keyframes tin{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.2)}
::-webkit-scrollbar-thumb{background:rgba(159,228,255,.3);border-radius:6px}

/* ============ title screen: signing in ============ */
.signin,.offline-block{background:rgba(4,27,43,.6);border:2px solid rgba(159,228,255,.22);
  border-radius:16px;padding:14px 20px;margin-bottom:16px}
.signin h3,.offline-block h3{color:var(--sky);font-size:17px;margin-bottom:6px}
.signin-note{font-size:13px;opacity:.8;line-height:1.5;margin-bottom:10px}
.signin-row{display:flex;gap:10px;justify-content:center;margin-bottom:12px}
.signin-row input{flex:1;max-width:230px;font-family:var(--font);font-size:16px;font-weight:700;
  padding:11px 14px;border-radius:11px;border:2px solid rgba(159,228,255,.3);
  background:rgba(2,18,29,.7);color:#eaf6ff}
.signin-row input:focus{outline:none;border-color:var(--gold)}
.signin-row input::placeholder{color:rgba(234,246,255,.4);font-weight:600}
.signin .btn-row,.offline-block .btn-row{margin-bottom:0;gap:10px}
.signin .btn-row button.big,.offline-block .btn-row button.big{font-size:16px;padding:11px 20px}
.signin-msg{font-size:14px;font-weight:700;min-height:20px;margin-top:10px;color:var(--gold)}
.signin-msg.bad{color:#ff9d9d}
.signin-msg.good{color:var(--green)}

/* ============ harbour radio ============ */
#feed{position:absolute;right:14px;bottom:14px;width:290px;z-index:15;pointer-events:none;
  background:rgba(3,20,32,.62);border:2px solid rgba(159,228,255,.2);border-radius:14px;
  padding:8px 10px;backdrop-filter:blur(4px)}
.feed-head{font-size:11px;font-weight:800;letter-spacing:1.4px;opacity:.65;margin-bottom:5px}
.feed-item{font-size:13px;line-height:1.4;padding:5px 8px;margin-top:4px;border-radius:9px;
  background:rgba(255,255,255,.05);border-left:3px solid rgba(159,228,255,.4);
  animation:feedin .35s ease-out}
.feed-item b{color:var(--sky)}
.feed-item .fish{color:#fff;font-weight:800}
.feed-item .kg{opacity:.75;font-weight:700}
.feed-item.discovery{border-left-color:var(--gold);background:rgba(255,209,102,.12)}
.feed-item.discovery .fish{color:var(--gold)}
.feed-item.record{border-left-color:#c084fc;background:rgba(192,132,252,.12)}
.feed-item.first{border-left-color:var(--green);background:rgba(61,220,132,.1)}
.feed-item.treasure{border-left-color:var(--gold2)}
.feed-item.fade{opacity:.5}
@keyframes feedin{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}

/* ============ the big-catch banner ============ */
#bigcatch{position:absolute;left:50%;top:104px;transform:translateX(-50%);z-index:28;
  pointer-events:none;animation:bcin .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes bcin{from{transform:translate(-50%,-26px) scale(.9);opacity:0}
  to{transform:translate(-50%,0) scale(1);opacity:1}}
.bc-card{display:flex;align-items:center;gap:14px;padding:10px 22px 10px 12px;
  background:linear-gradient(180deg,rgba(14,63,96,.96),rgba(6,34,54,.96));
  border:3px solid var(--gold);border-radius:18px;
  box-shadow:0 0 40px rgba(255,209,102,.35),0 12px 30px rgba(0,0,0,.55)}
#bc-canvas{width:180px;height:96px;flex:none;border-radius:12px;
  background:radial-gradient(circle at 50% 60%,rgba(18,100,143,.9),rgba(6,35,56,.9))}
.bc-kind{font-size:12px;font-weight:800;letter-spacing:2.4px;color:var(--gold)}
.bc-name{font-size:26px;font-weight:800;line-height:1.15;margin:1px 0 2px}
.bc-who{font-size:14px;font-weight:700;opacity:.88}
.bc-who b{color:var(--sky)}
#bigcatch.record .bc-card{border-color:#c084fc;box-shadow:0 0 40px rgba(192,132,252,.4),0 12px 30px rgba(0,0,0,.55)}
#bigcatch.record .bc-kind{color:#d6b4fe}
#bigcatch.first .bc-card{border-color:var(--green);box-shadow:0 0 40px rgba(61,220,132,.35),0 12px 30px rgba(0,0,0,.55)}
#bigcatch.first .bc-kind{color:var(--green)}
/* nudge the toasts out of the banner's way while it is up */
#toasts{transition:top .25s}
#toasts.pushed{top:246px}

/* ============ leaderboard ============ */
.board-window{width:min(860px,94vw);height:min(680px,92vh);
  background:linear-gradient(180deg,#0e3f60,#082a41);
  border:4px solid #12587f;border-radius:22px;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6)}
.board-window header{display:flex;align-items:center;gap:14px;padding:14px 20px;
  background:linear-gradient(180deg,#12587f,#0d4462)}
.board-window h2{font-size:23px;white-space:nowrap}
.board-sub{flex:1;text-align:right;font-size:13px;font-weight:600;opacity:.85}
button.x.alt{background:var(--gold);color:#3a2400;box-shadow:0 4px 0 #b8761a}
.btab{background:rgba(255,255,255,.07);color:#cfe9f8;padding:10px 20px;border-radius:12px 12px 0 0;
  font-size:16px;font-weight:700;font-family:var(--font);cursor:pointer;border:none}
.btab.active{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 0 3px 0 var(--gold)}
.board-body{flex:1;overflow-y:auto;padding:14px 18px}
.bpane{display:flex;flex-direction:column;gap:7px}
.brow{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 14px}
.brow.mine{border-color:rgba(255,209,102,.6);background:rgba(255,209,102,.11)}
.brow .rank{width:38px;flex:none;font-size:19px;font-weight:800;color:var(--sky);text-align:center}
.brow.gold .rank{color:var(--gold)} .brow.silver .rank{color:#d8e4ec} .brow.bronze .rank{color:#e0a06a}
.brow canvas{width:74px;height:44px;flex:none}
.brow .bmain{flex:1;min-width:0}
.brow .bmain h4{font-size:16px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .bwho{font-size:13px;font-weight:700;opacity:.85;color:var(--sky)}
.brow .bwho .when{opacity:.55;font-weight:600;color:#eaf6ff}
.brow .bkg{font-size:19px;font-weight:800;min-width:88px;text-align:right}
.brow .bval{font-size:16px;font-weight:800;color:var(--gold);min-width:78px;text-align:right}
.board-empty{text-align:center;opacity:.65;padding:44px 20px;font-size:16px;line-height:1.6}
.board-note{font-size:13px;opacity:.75;padding:4px 2px 10px;line-height:1.5}

/* ============ thumb controls ============
   Hidden until js/touch.js decides this is a touch device, then laid out
   for two thumbs: the joystick lives under the left one (drawn on the
   canvas), these buttons under the right. */
body.touch #touchui{display:block}
#touchui{position:absolute;inset:0;pointer-events:none;z-index:16}
.tbtn{position:absolute;pointer-events:auto;font-family:var(--font);border:none;
  background:rgba(4,27,43,.82);color:#eaf6ff;border:2px solid rgba(159,228,255,.4);
  border-radius:999px;backdrop-filter:blur(4px);box-shadow:0 4px 0 rgba(0,0,0,.3)}
.tbtn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.tbtn.action{right:18px;bottom:22px;width:96px;height:96px;font-size:17px;font-weight:800;
  letter-spacing:.5px;background:linear-gradient(180deg,var(--gold),var(--gold2));
  color:#3a2400;border-color:rgba(255,255,255,.5);box-shadow:0 5px 0 #b8761a}
.tbtn.action:disabled{filter:grayscale(.75);opacity:.5}
.tstack{position:absolute;right:26px;bottom:132px;display:flex;flex-direction:column;gap:9px;
  pointer-events:none}
.tbtn.small{position:relative;right:auto;bottom:auto;width:52px;height:52px;font-size:22px;
  line-height:1;padding:0}

/* Thumbs sit at the bottom, so on touch the readouts move to the top where
   fingers never cover them. The hint and the fight card never show at the
   same time, so they can share the same slot. */
body.touch #fightui{top:92px;bottom:auto}
body.touch .fight-card{min-width:0;width:min(430px,94vw);padding:10px 14px}
body.touch .bar-row label{width:82px;font-size:10px}
body.touch .hud-hint{top:96px;bottom:auto;font-size:14px;padding:8px 16px;
  max-width:92vw;white-space:normal;text-align:center}
body.touch #feed{bottom:auto;top:96px;right:10px;width:min(250px,56vw)}
body.touch .feed-item{font-size:12px}
body.touch #bigcatch{top:auto;bottom:132px}
body.touch .bc-card{padding:8px 16px 8px 8px}
body.touch #bc-canvas{width:120px;height:66px}
body.touch .bc-name{font-size:20px}

/* narrow phones: the windows need to stop assuming a desktop */
@media (max-width:640px){
  .fight-card{min-width:0;width:min(430px,94vw)}
  #hud{padding:8px}
  .chip{font-size:13px;padding:5px 9px;gap:5px}
  .zone-name{font-size:17px}
  .zone-depth{font-size:12px}
  #title h1{font-size:38px}
  .tag{font-size:15px;margin-bottom:14px}
  .signin-row{flex-direction:column;align-items:stretch}
  .signin-row input{max-width:none}
  .btn-row{flex-wrap:wrap}
  button.big{font-size:16px;padding:11px 18px}
  .shop-window header,.pedia-window header,.board-window header{flex-wrap:wrap;gap:8px}
  .shop-window h2,.pedia-window h2,.board-window h2{font-size:18px}
  .row{flex-wrap:wrap}
  .price{min-width:64px}
  .brow canvas{width:52px;height:32px}
  .brow .bkg{min-width:66px;font-size:16px}
  .brow .bval{min-width:56px;font-size:14px}
  .catch-card{padding:14px 16px}
  .catch-name{font-size:26px}
}

/* ============ bait switching & the bait well ============ */
.chip.tap{cursor:pointer;user-select:none}
.chip.tap:hover{background:rgba(255,255,255,.18)}
.chip .tap-hint{font-size:10px;font-weight:800;opacity:.55;border:1px solid currentColor;
  border-radius:4px;padding:0 4px;margin-left:2px}
button.keepbait{display:block;width:100%;margin:10px 0 0;padding:11px 14px;border:none;
  border-radius:12px;font-family:var(--font);font-size:16px;font-weight:700;cursor:pointer;
  background:linear-gradient(180deg,#2f9e6b,#1f7350);color:#eafff5;box-shadow:0 4px 0 #14503a}
button.keepbait:hover{filter:brightness(1.08)}
button.keepbait.done{background:rgba(255,255,255,.12);color:#bfe9d6;box-shadow:none;cursor:default}