/* Original printed fishing cabinet. Four source bands keep the real housing
   and title intact while reserving usable space for live controls. */
.cabinet{position:relative;display:block;width:min(100%,960px);height:calc(100svh - 40px);min-height:520px;max-height:1040px;margin:0 auto;padding:0;border:0;border-image:none;border-radius:0;background:none;box-shadow:none;isolation:isolate;overflow:hidden}
.shell-art{position:absolute;inset:0;z-index:-1;pointer-events:none}.shell-art>div{position:absolute;left:0;right:0;background-image:url('/fishing/assets/cabinet-clean-deck-v5.webp');background-repeat:no-repeat}
.shell-top{top:0;height:18%;background-size:100% 483.092%;background-position:50% 0}
.shell-screen{top:18%;height:35%;background-size:100% 323.625%;background-position:50% 29.9566%}
.shell-deck{top:53%;height:26%;background-size:100% 632.911%;background-position:50% 61.2827%}
.shell-base{top:79%;height:21%;background-size:100% 306.748%;background-position:50% 100%}
.cabinet::before,.cabinet::after,.marquee::before,.marquee::after,.screen-frame::before,.screen-frame::after,.deck::before,.deck::after,.lower::after,.cabinet-foot,.speaker{display:none}
/* The title is printed artwork; keep its exact name in the accessible DOM. */
.marquee{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.screen-frame{position:absolute;left:9.3%;top:19.9%;width:81.4%;height:31.4%;min-height:0;margin:0;border:0;padding:0;box-shadow:none;background:none;border-radius:7px}.screen{border:0;box-shadow:none;border-radius:7px;height:100%}.screen::after{box-shadow:inset 0 0 6px #001c2460}.hud{top:4px;left:3px;right:3px}.hud>span{font-size:14px;padding:2px 5px;background:#fffdf2f2;color:#173e4b}.hud b{font-size:16px}#cue{max-width:95%;padding:5px 8px;font-size:14px;bottom:5px;background:#fffdf2f2;color:#173e4b}
.deck{position:absolute;left:8%;top:54.5%;width:84%;height:23%;display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;align-items:start;padding:8px 3px;border:0;background:none;box-shadow:none;border-radius:0;transform:none}
.coin-panel{grid-template-columns:60px 1fr;grid-template-rows:auto 60px 44px;gap:3px 6px;padding:0}.coin-panel label{grid-column:1/-1;font-size:16px;white-space:nowrap;background:#fff9e9;border:2px solid #124a6b;border-radius:12px;padding:3px 7px;color:#173e4b}.coin-panel #insert{width:60px;height:60px}.coin-panel #insert span{left:62px;top:8px;font-size:16px;white-space:nowrap;background:#fff9e9;color:#173e4b;border-radius:6px;padding:4px}.slot{grid-row:3;grid-column:1}.small{grid-row:3;grid-column:2;min-height:44px;padding:0 5px;font-size:14px;background:#fff9e9;color:#173e4b;border:1px solid #617887}.main-control{align-self:start}#action{width:96px;height:96px}.main-control>span{font-size:14px;line-height:1.35;min-height:38px;margin:3px 0 0;padding:3px 5px;background:#fff9e9;color:#173e4b;border:2px solid #124a6b;border-radius:12px}.meter{position:absolute;top:110%;right:3%;display:block}.meter>span,.meter strong{display:none}.meter button{min-height:44px;padding:3px 7px;font-size:14px;background:#fff9e9;color:#173e4b;border:1px solid #617887}
.lower{position:absolute;inset:0;min-height:0;margin:0;padding:0;border:0;background:none;box-shadow:none;pointer-events:none}.tray{position:absolute;left:31%;top:89%;width:27%;height:5.2%;max-width:none;min-height:44px;padding:0;margin:0;border:0;background:none;box-shadow:none;overflow:visible;pointer-events:auto}.tray.has-medals{background:none;box-shadow:none;border:0}.tray>b{position:absolute;top:-25px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:16px;line-height:1.25;padding:3px 7px;margin:0;background:#123f6df5;color:#fff;border:2px solid #fff4bd;border-radius:6px;box-shadow:0 2px 3px #39250040}.tray.has-medals>b{background:#ffe49f;color:#342912;border-color:#c03023;animation:tray-pulse 1s ease-in-out infinite alternate}.tray-coins{position:absolute;left:0;right:0;bottom:10%;height:18px;overflow:hidden}.brand{position:absolute;left:70%;top:94%;width:24%;font-size:14px;line-height:1.2;pointer-events:auto;color:#193e5d}.brand span{line-height:1.2}.brand b{font-size:20px;color:#193e5d}.brand .collected-amount{display:block;white-space:nowrap}.brand .collected-amount b{display:inline;margin:0 2px}#receive-prompt{display:none!important}
@keyframes tray-pulse{to{box-shadow:0 0 0 4px #fff0ad,0 0 14px #ffc928}}
@media(prefers-reduced-motion:reduce){.tray.has-medals>b{animation:none}}
@media(max-width:640px){header{height:34px}main{padding:0 0 20px}.deck{gap:4px 7px;padding:5px 0}.coin-panel{grid-template-columns:48px 1fr;grid-template-rows:auto 50px 44px;gap:2px 3px}.coin-panel #insert{width:50px;height:50px}.coin-panel #insert span{left:48px;top:0;font-size:14px;padding:3px}.coin-panel label{font-size:14px;padding:2px 5px}.small{font-size:14px;padding:0 3px}.slot{width:40px;height:35px}#action{width:80px;height:80px;padding:8px}.main-control>span{font-size:14px;line-height:1.3;min-height:36px;margin-top:2px;padding:3px}.meter{top:109%;right:0}.meter button{min-height:44px;padding:3px 6px}.tray>b{font-size:14px;top:-24px;padding:3px 6px}.tray-coins{height:15px}.brand{font-size:14px;top:93%;left:68%;width:28%}.brand b{font-size:18px}}
@media(max-width:640px) and (max-height:650px){.shell-top{height:17%}.shell-screen{top:17%;height:29%}.shell-deck{top:46%;height:31%}.shell-base{top:77%;height:23%}.screen-frame{top:18.6%;height:26%}.deck{top:47.7%;height:27.5%;padding-top:0}#action{width:70px;height:70px;padding:6px}.coin-panel{grid-template-rows:auto 46px 44px}.coin-panel #insert{width:46px;height:46px}.coin-panel #insert span{left:45px}.tray{top:88.1%;height:5.7%}.brand{top:92%;font-size:14px}.brand b{font-size:16px}.meter{top:108%}}
.brand>span{display:inline-block;padding:2px 5px;background:#fff9e9;border:1px solid #617887;border-radius:6px;color:#173e4b}.brand span,.brand b{color:#173e4b}
/* Live hardware indicators: physical lenses and engraved enamel plates. */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
.medal-indicator{grid-column:1/-1;padding:5px 7px;border:2px solid #becbd0;border-radius:8px;background:linear-gradient(135deg,#eff5f4,#b8c9ce 47%,#f4f8f6);box-shadow:0 2px 2px #07364a80,inset 0 1px #fff;color:#123d52;text-align:center}
.indicator-title{display:block;font-size:14px;font-weight:900;line-height:1.25;letter-spacing:.03em}.medal-lamps{display:flex;justify-content:center;gap:7px;margin-top:4px;padding:4px;background:#113746;border:1px solid #617982;border-radius:5px;box-shadow:inset 0 2px 4px #001722}
.medal-lamps i{display:block;width:18px;height:18px;border:2px solid #c9bc85;border-radius:50%;background:radial-gradient(circle at 35% 25%,#8a8256,#4c492f 70%);box-shadow:0 1px 1px #0009,inset 0 1px 2px #0009;transition:background .15s,box-shadow .15s}.medal-lamps i.lit{background:radial-gradient(circle at 35% 25%,#fffbe1,#ffe749 45%,#ffb50f 80%);border-color:#fff5a0;box-shadow:0 0 7px #ffdd43,0 0 2px 2px #ffca3760,inset 0 1px 2px #fff}
.coin-panel{grid-template-rows:auto 60px 44px}.coin-panel #insert span{border:2px solid #e3eced;border-radius:5px;background:linear-gradient(#fff9e4,#f5dfa2);box-shadow:0 2px 2px #092d4770;font-weight:900;padding:3px 5px}
#clear{border:2px solid #c7d1d2;border-radius:6px;background:linear-gradient(#f4f8f5,#becdd0);box-shadow:0 3px 0 #5c737f,inset 0 1px #fff;color:#173d50;line-height:1.1;padding:3px 5px;text-shadow:0 1px #fff}#clear span{display:block;font-size:14px}#clear b{display:block;font-size:16px}#clear:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #5c737f}#clear:disabled{opacity:.65}
#sound{display:grid;grid-template-columns:12px auto;column-gap:5px;align-items:center;border:2px solid #b7c6cb;border-radius:7px;background:linear-gradient(#edf4f1,#bfced0);box-shadow:0 2px 0 #5c737f,inset 0 1px #fff;font-weight:900;line-height:1.15;padding:4px 7px;color:#163b50}#sound i{grid-row:1/3;width:10px;height:10px;border-radius:50%;background:#526971;box-shadow:inset 0 1px 2px #0008}#sound[aria-pressed=true] i{background:#74ea9c;box-shadow:0 0 5px #61ec98}#sound span{font-size:14px}#sound b{font-size:14px}#sound:active{transform:translateY(1px)}
.hud>span{display:flex;align-items:center;gap:6px;padding:4px 7px;border:2px solid #c4d4d7;border-radius:7px;background:linear-gradient(#fffaf0,#eadfbf);box-shadow:0 2px 4px #09283b80;color:#173e4b}.hud small{font-size:14px;font-weight:900}.hud b{display:inline-block;min-width:24px;padding:2px 4px;border:1px solid #7895a3;border-radius:3px;background:#123746;color:#fff4bc;font-family:ui-monospace,monospace;font-size:20px;line-height:1;font-variant-numeric:tabular-nums}.hud em{font-size:14px;font-style:normal;margin-left:3px}.prize-display>span{white-space:nowrap}
.brand>span{padding:4px 7px;border:2px solid #a8bdc5;border-radius:6px;background:linear-gradient(#eef4ed,#d2ded7);box-shadow:0 2px 2px #293d4050;text-align:center}.brand small{display:block;font-size:14px;font-weight:900;white-space:nowrap}.brand .collected-amount{margin-top:3px;padding:3px 5px;border:1px solid #7895a3;border-radius:3px;background:#123746;color:#fff4bc;line-height:1}.brand .collected-amount b{font-family:ui-monospace,monospace;font-size:20px;font-variant-numeric:tabular-nums;color:#fff4bc}.brand{top:92%;left:68%;width:28%}
.main-control>span{border-radius:6px;background:linear-gradient(#fff9e4,#f5dfa2);border:2px solid #cad9de;box-shadow:0 2px 2px #092d4770;font-weight:700}.tray>b{font-weight:900;letter-spacing:.03em;border:2px solid #dde9e8;background:linear-gradient(#22668b,#123f6d)}
@media(max-width:640px){.medal-indicator{padding:3px 4px}.medal-lamps{gap:5px;padding:3px;margin-top:2px}.medal-lamps i{width:16px;height:16px}.coin-panel{grid-template-rows:auto 50px 44px}.hud>span{gap:4px;padding:3px 4px}.hud b{font-size:18px}.brand{top:90.3%;left:68%;width:29%}.brand>span{padding:3px 4px}}
@media(max-width:640px) and (max-height:650px){.coin-panel{grid-template-rows:auto 46px 44px}.medal-indicator{padding:1px 3px}.medal-lamps{margin-top:1px;padding:2px;gap:5px}.medal-lamps i{width:14px;height:14px}.brand{top:89.6%}.brand .collected-amount{margin-top:2px}.hud>span{gap:3px}.hud b{font-size:16px}}
@media(prefers-reduced-motion:reduce){.medal-lamps i{transition:none}}
#clear:disabled{opacity:1;color:#526775;background:linear-gradient(#e3eae6,#b8c7ca)}
@media(max-width:640px) and (max-height:650px){.deck{top:46.5%}.medal-indicator{padding:0 3px}.medal-lamps{padding:1px;margin-top:0}.brand{top:89.1%}}
/* Results belong inside the glass, not in the document flow after canvas. */
#catch{position:absolute;left:50%;z-index:4;max-height:76%;overflow:auto;border:2px solid #d7ad52;border-radius:12px;text-align:center}#catch:empty{display:none}
.coin-panel #insert span{top:50%;transform:translateY(-50%);left:calc(100% + 6px)}
/* Let the machine start at the top; navigation lives below the play guide. */
main{padding-top:0}.cabinet{height:100svh;min-height:min(520px,100svh)}
.preview-footer{max-width:960px;margin:0 auto;padding:16px 20px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid #b9cbca;color:#365762;font-size:14px}.preview-footer a{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;border:1px solid #98b1b8;border-radius:6px;background:#fff9eb;color:#164b63;font-size:16px;font-weight:700;text-decoration:none}.preview-footer a:hover{background:#f5eacb}.preview-footer a:focus-visible{outline:3px solid #0082b0;outline-offset:3px}
/* A tappable metal coin acceptor, not a second arcade push button. */
.coin-panel #insert{grid-column:1/-1;width:100%;height:60px;border:2px solid #86999f!important;border-radius:5px;background:linear-gradient(115deg,#eaf0ed,#a9babf 25%,#edf3f0 48%,#b1c1c4 75%,#e1e9e5)!important;box-shadow:inset 0 1px #fff,0 2px 1px #183a4e80!important;display:flex;justify-content:flex-start;align-items:center;padding:6px 10px;text-shadow:none;transform:none}
.coin-panel #insert::before{display:none}.coin-panel #insert::after{content:'';position:absolute;inset:5px;pointer-events:none;background:radial-gradient(circle at 0 0,#405660 0 2px,transparent 3px),radial-gradient(circle at 100% 100%,#405660 0 2px,transparent 3px)}
.coin-aperture{display:block;position:relative;width:18px;height:38px;margin:0 8px 0 3px;border:3px solid #73888c;border-radius:2px;background:linear-gradient(90deg,#061a20,#16363f 60%,#020b10);box-shadow:inset 1px 2px 3px #000,1px 1px 0 #fff}
.coin-panel #insert span{position:static;transform:none;border:0;background:none;box-shadow:none;padding:0 3px;font-size:16px;color:#163d50;white-space:nowrap;pointer-events:auto}.coin-panel #insert:active:not(:disabled){transform:none;filter:brightness(1.05)}.coin-panel #insert:disabled{filter:none;opacity:.7}
.coin-panel #insert .flying-coin{width:35px;height:35px;animation:accept-medal .4s ease-in forwards;max-width:none}.coin-panel #clear{grid-column:1/-1;justify-self:end}
@keyframes accept-medal{from{transform:translateY(-20px) rotateY(0);opacity:1}to{transform:translateY(3px) rotateY(88deg) scale(.7);opacity:0}}
@media(max-width:640px){.coin-panel #insert{height:50px;padding:4px 8px}.coin-panel #insert span{font-size:14px}.coin-aperture{height:32px;width:16px;margin-right:5px}}
@media(max-width:640px) and (max-height:650px){.coin-panel #insert{height:46px}.coin-aperture{height:30px}}
@media(prefers-reduced-motion:reduce){.coin-panel #insert .flying-coin{animation:none}}
#rare-notice{position:absolute;left:50%;top:20%;transform:translateX(-50%);z-index:3;padding:4px 10px;border:2px solid #ffedab;border-radius:14px;background:linear-gradient(#915712,#603808);color:#fff7d0;font-size:16px;font-weight:900;white-space:nowrap;box-shadow:0 0 14px #ffdc6270}.rare-catch{border-color:#ffd257!important;box-shadow:0 0 18px #ffe289,0 8px 0 #aa813c66!important}
.fish-outcome{position:absolute;z-index:5;transform:translate(-50%,-50%);padding:4px 8px;border:2px solid #fff;border-radius:20px;white-space:nowrap;font-size:14px;font-weight:900;box-shadow:0 3px 8px #001f30a0;pointer-events:none}.fish-outcome.landed{background:#fff0ad;color:#62320b;border-color:#ffe26c}.fish-outcome.escaped{background:#e2f8fc;color:#124e69;border-color:#85cedf}
@media(max-width:640px){.fish-outcome{font-size:14px;padding:3px 5px;max-width:95%;text-overflow:ellipsis;overflow:hidden}}
/* Event messages use one reserved stack so a rare-fish callout and an escape
   can never cover each other's text or the bottom instruction. */
#event-feed{position:absolute;z-index:6;top:18%;right:3%;width:min(47%,270px);max-height:55%;display:flex;flex-direction:column;align-items:flex-end;gap:6px;overflow:hidden;pointer-events:none}
#event-feed>*{position:relative!important;top:auto!important;left:auto!important;right:auto!important;transform:none!important;max-width:100%;box-sizing:border-box;white-space:normal!important;text-align:center;overflow-wrap:anywhere;line-height:1.35;margin:0!important}
#event-feed>[hidden]{display:none!important}
#event-feed #rare-notice{padding:5px 8px;font-size:14px}
#event-feed #escape-notice,#event-feed .fish-outcome{padding:4px 7px;font-size:14px}
@media(max-width:640px){#event-feed{top:21%;right:2%;width:46%;gap:3px}#event-feed #rare-notice,#event-feed #escape-notice,#event-feed .fish-outcome{font-size:14px;padding:2px 4px}}
.guide .play-status{padding:12px 16px;border:2px solid #a9ccd2;border-radius:8px;background:#e8f6f3;color:#153c49;font-weight:800}
.guide .play-status a{color:#075c80;text-decoration-thickness:2px;text-underline-offset:3px}