@font-face{font-family:'Monocraft';src:url('assets/fonts/Monocraft.ttf') format('truetype');
  font-weight:400;font-display:block}
@font-face{font-family:'Monocraft';src:url('assets/fonts/Monocraft-Bold.ttf') format('truetype');
  font-weight:700;font-display:block}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#05080d;overflow:hidden;font-family:'Monocraft',monospace;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#game{image-rendering:pixelated;image-rendering:crisp-edges;display:block;cursor:crosshair}
.hud{position:absolute;z-index:5}
.tl{top:14px;left:14px}.tr{top:14px;right:14px}
.bl{bottom:14px;left:14px;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(50vw - 175px) /* keep .bl left of centred .bc lane (~306px wide at 50vw) */}
.bc{bottom:14px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px}
#castHint{font:9.4px 'Monocraft',monospace;color:rgba(230,240,255,.62);letter-spacing:.5px;text-shadow:0 2px 0 rgba(0,0,0,.75);background:rgba(9,13,19,.55);border-radius:5px;padding:5px 9px;white-space:nowrap;pointer-events:none;animation:hintPulse 1.9s ease-in-out infinite}
#castHint.off{display:none}
@keyframes hintPulse{0%,100%{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.hotbar{top:50%;right:14px;transform:translateY(-40%);display:flex;flex-direction:column;gap:7px}

/* ---- panel chrome (ref image 1) ---- */
.panel{background:#1c2026;border:2px solid #0b0d10;border-radius:8px;box-shadow:inset 0 0 0 2px #343b44,0 3px 0 rgba(0,0,0,.45);padding:7px 9px}
.stats{display:flex;flex-direction:column;gap:6px;min-width:214px}
.row{display:flex;align-items:center;gap:7px}
.bar{position:relative;flex:1;height:19px;background:#0d1015;border:2px solid #000;border-radius:4px;box-shadow:inset 0 0 0 1px #2c333c;overflow:hidden}
.bar.wide{width:190px;flex:none}
.bar i{position:absolute;inset:0;width:100%;transition:width .18s linear}
.bar.red i{background:linear-gradient(#f0564a,#b8231b)}
.bar.blue i{background:linear-gradient(#9ee063,#4c9427)}
.bar.green i{background:linear-gradient(#8fe36a,#3f8f34)}
.bar b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12.1px;color:#fff;text-shadow:1px 1px 0 #000;letter-spacing:.5px}
.coins b{font-size:16.1px;color:#ffe08a;text-shadow:2px 2px 0 #000}
.coins em{font-style:normal;font-size:10.7px;color:#7fd07f;margin-left:auto;text-shadow:1px 1px 0 #000}
/* BAIT ledger row — same chip language as the coin row, worm-green */
.coins.bait{position:relative;margin-top:4px}
.coins.bait b{color:#b8f08a}
.coins.bait em{color:#ffd24a;font-size:10.7px;background:#3a2c10;border:1px solid #7a5c12;
 padding:0 3px;border-radius:2px;text-shadow:none}
.bait-pop{position:absolute;left:22px;top:-2px;font-size:12.1px;color:#b8f08a;
 text-shadow:1px 1px 0 #000;pointer-events:none;white-space:nowrap;
 animation:baitPop 1.1s ease-out forwards}
@keyframes baitPop{0%{opacity:0;transform:translateY(4px)}18%{opacity:1}
 100%{opacity:0;transform:translateY(-14px)}}
.clock{min-width:132px;text-align:left}
.clock b{font-size:14.7px;color:#e8eef5;text-shadow:2px 2px 0 #000}
.clock .row+.row{margin-top:5px;padding-left:25px}

/* icons */
.ico{width:18px;height:18px;flex:none;background-size:contain;background-repeat:no-repeat;background-position:center;image-rendering:pixelated}
.heart{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><path fill='%23000' d='M2 3h4v1h4V3h4v1h1v5h-1v2h-1v1h-1v1h-1v1H9v1H7v-1H5v-1H4v-1H3v-1H2V9H1V4h1z'/><path fill='%23ff4d4d' d='M3 4h3v1h4V4h3v1h1v4h-1v2h-1v1h-1v1H9v1H7v-1H5v-1H4v-1H3V9H2V5h1z'/><path fill='%23ff9d9d' d='M4 5h2v1H5v2H4z'/></svg>")}
.hook{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><path fill='%23bfe6ff' d='M7 1h2v7H7z'/><path fill='%2379c8f0' d='M4 8h5v1H4zM3 9h1v3H3zM4 12h1v1H4zM5 13h3v-1H5z'/><path fill='%23bfe6ff' d='M8 11h1v2H8z'/></svg>")}
.coin{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><circle cx='8' cy='8' r='7' fill='%23000'/><circle cx='8' cy='8' r='6' fill='%23f5c542'/><circle cx='8' cy='8' r='4' fill='%23ffe58a'/><path fill='%23c99a1e' d='M7 5h2v6H7z'/></svg>")}
.worm{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><path fill='%23000' d='M3 12h2v1H3zM2 9h1v3h1V9h1V8H2zM4 6h1v2H4zM5 5h2v1H5zM7 4h1v1H7zM8 3h3v1H8zM11 4h1v2h-1zM10 6h1v1h-1zM8 7h2v1H8zM7 8h1v2H7zM8 10h2v1H8zM10 9h1v1h-1z'/><path fill='%23e08a5e' d='M3 9h2v3H3zM5 6h1v2H5zM6 5h1v1H6zM7 4h1v1h-1zM8 4h3v1H8zM8 5h3v1H8z'/><path fill='%23f2ae86' d='M8 4h3v1H8zM3 9h1v3H3z'/><path fill='%23c9714a' d='M9 6h2v1H9zM8 7h2v1H8zM8 8h1v2H8zM9 10h1v1H9z'/><path fill='%23000' d='M9 4h1v1H9z'/></svg>")}
.sun{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><circle cx='8' cy='8' r='4' fill='%23ffd24a'/><path fill='%23ffd24a' d='M7 0h2v3H7zM7 13h2v3H7zM0 7h3v2H0zM13 7h3v2h-3z'/></svg>")}
.moon{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><path fill='%23cfe2ff' d='M9 1a7 7 0 100 14A9 9 0 019 1z'/></svg>")}
.bucket{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'><path fill='%23000' d='M3 4h10v1h-1v8H4V5H3z'/><path fill='%23c9d4de' d='M4 5h8v8H4z'/><path fill='%238f9aa4' d='M6 5h1v8H6z'/></svg>")}

/* hotbar slots */
.slot{width:58px;height:58px;background:#1c2026;border:2px solid #0b0d10;border-radius:7px;box-shadow:inset 0 0 0 2px #343b44,0 3px 0 rgba(0,0,0,.45);position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center}
.slot.on{box-shadow:inset 0 0 0 2px #7fd7ff,0 0 12px rgba(90,200,255,.55),0 3px 0 rgba(0,0,0,.45)}
.slot span.n{position:absolute;top:3px;left:5px;font-size:10.7px;color:#96a3b0}
.slot .gi{font-size:29.5px;line-height:1}
.slot .dur{position:absolute;left:5px;right:5px;bottom:5px;height:4px;background:#0d1015;border:1px solid #000}
.slot .dur i{display:block;height:100%;background:#6fe04a}
.slot .cnt{position:absolute;right:4px;bottom:4px;font-size:10.7px;color:#ffe08a;text-shadow:1px 1px 0 #000}

/* buttons */
.btn{font-family:inherit;font-size:12.1px;color:#dfe8f2;background:#232a32;border:2px solid #0b0d10;border-radius:6px;box-shadow:inset 0 0 0 2px #3a4450,0 3px 0 rgba(0,0,0,.5);padding:9px 11px;cursor:pointer}
.btn:hover{background:#2d3742;color:#fff}
.btn:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px #3a4450,0 1px 0 rgba(0,0,0,.5)}
.btn.sell{background:#2b4a2b;box-shadow:inset 0 0 0 2px #4a7a46,0 3px 0 rgba(0,0,0,.5)}
.btn.buy{font-size:10.7px;padding:7px 9px;background:#2b4a2b;box-shadow:inset 0 0 0 2px #4a7a46,0 3px 0 rgba(0,0,0,.5)}
.btn.buy[disabled]{background:#2a2f36;box-shadow:inset 0 0 0 2px #3a4450;color:#6d7885;cursor:not-allowed}
.hold{display:flex;align-items:center;gap:9px}

/* toasts */
#toasts{position:absolute;top:120px;left:50%;transform:translateX(-50%);z-index:8;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{font-size:14.7px;padding:8px 14px;border-radius:6px;background:rgba(12,16,22,.9);border:2px solid #000;box-shadow:inset 0 0 0 2px #343b44;color:#fff;text-shadow:2px 2px 0 #000;animation:pop .35s ease-out, fade .5s 1.9s forwards}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes fade{to{opacity:0;transform:translateY(-12px)}}
.r1{color:#cfd8e2}.r2{color:#9fe3ff}.r3{color:#ffd24a;text-shadow:0 0 8px rgba(255,210,74,.7),2px 2px 0 #000}
.r4{color:#ff8fd0;text-shadow:0 0 10px rgba(255,143,208,.8),2px 2px 0 #000}
.r5{color:#a7ff6b;text-shadow:0 0 12px rgba(167,255,107,.9),2px 2px 0 #000}

/* reel minigame */
#reel{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);z-index:9}
.reelbox{background:#1c2026;border:2px solid #0b0d10;border-radius:8px;box-shadow:inset 0 0 0 2px #343b44,0 3px 0 rgba(0,0,0,.5);padding:10px}
.track{position:relative;width:300px;height:26px;background:#0d1015;border:2px solid #000;border-radius:4px;overflow:hidden}
.zone{position:absolute;top:0;bottom:0;background:rgba(120,230,110,.34);border-left:2px solid #6fe04a;border-right:2px solid #6fe04a;box-shadow:inset 0 0 10px rgba(120,230,110,.35)}
.marker{position:absolute;top:1px;bottom:1px;width:12px;background:#ffd24a;border:1px solid #7a5a12;border-radius:3px;box-shadow:0 0 9px rgba(255,210,74,.9)}
.prog{margin-top:7px;height:10px;background:#0d1015;border:2px solid #000;border-radius:3px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:linear-gradient(#9ee063,#4c9427)}
.rlabel{margin-top:7px;font-size:10.7px;color:#9fb0c0;text-align:center}

/* modal */
#modal,#offline,#wreck{position:absolute;inset:0;background:rgba(4,7,11,.72);z-index:20;display:flex;align-items:center;justify-content:center}
.mbox{width:min(760px,92vw);max-height:82vh;background:#161a20;border:2px solid #000;border-radius:10px;box-shadow:inset 0 0 0 2px #343b44,0 8px 0 rgba(0,0,0,.5);display:flex;flex-direction:column}
.mbox.small{width:min(440px,90vw)}
.mhead{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:2px solid #0b0d10}
.mhead b{font-size:16.1px;color:#ffe08a;text-shadow:2px 2px 0 #000}
.x{font-family:inherit;font-size:13.4px;background:#3a2222;color:#ffb4b4;border:2px solid #000;border-radius:5px;padding:6px 9px;cursor:pointer}
.mbody{padding:13px 15px;overflow-y:auto}
.item{display:flex;align-items:center;gap:12px;padding:10px;border:2px solid #0b0d10;border-radius:7px;background:#1c2026;margin-bottom:8px}
.item .gi{font-size:32.2px}
.item .txt{flex:1}
.item .nm{font-size:13.4px;color:#e8eef5}
.item .ds{font-size:10.7px;color:#8b98a6;margin-top:5px;line-height:1.5}
.item .pr{font-size:12.1px;color:#ffe08a;margin-top:5px}
.item.locked{opacity:.45}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:7px}
.fishcard{background:#1c2026;border:2px solid #0b0d10;border-radius:6px;padding:9px;text-align:center}
.fishcard .gi{font-size:26.8px;filter:grayscale(1) brightness(.4)}
.fishcard.got .gi{filter:none}
.fishcard .fn{font-size:9.4px;margin-top:6px;color:#8b98a6;line-height:1.4}
.fishcard.got .fn{color:#dfe8f2}
.hidden{display:none!important}
.hint{font-size:10.7px;color:#7f8b98;line-height:1.7;margin-bottom:10px}
@media (max-width:720px){.stats{min-width:160px}.bar.wide{width:120px}.slot{width:46px;height:46px}.btn{font-size:10.7px;padding:7px 8px}}

/* pixel hotbar icons */
.slot .gi{width:30px;height:30px;background-repeat:no-repeat;background-position:center;background-size:contain;image-rendering:pixelated;font-size:0}
.ic-rod{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20d%3D%22M13%202%20L14%203%20L4%2013%20L3%2012%20Z%22%20fill%3D%22%23c9a24c%22/%3E%3Cpath%20d%3D%22M13%202%20L13.6%202.6%20L4%2012.4%20L3.4%2011.8%20Z%22%20fill%3D%22%23e8cf86%22/%3E%3Crect%20x%3D%222%22%20y%3D%2212%22%20width%3D%223%22%20height%3D%223%22%20fill%3D%22%235b3f22%22/%3E%3Crect%20x%3D%224%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%238a6a2a%22/%3E%3Crect%20x%3D%227%22%20y%3D%227%22%20width%3D%222%22%20height%3D%221%22%20fill%3D%22%238a6a2a%22/%3E%3Ccircle%20cx%3D%225%22%20cy%3D%2211.5%22%20r%3D%221.4%22%20fill%3D%22%239aa7b2%22%20stroke%3D%22%233a444e%22%20stroke-width%3D%22.5%22/%3E%3Cpath%20d%3D%22M13%203%20L11%209%22%20stroke%3D%22%23dfe9f2%22%20stroke-width%3D%22.4%22%20fill%3D%22none%22/%3E%3C/svg%3E")}
.ic-net{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20d%3D%22M4%204%20L12%204%20L10%2012%20L6%2012%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23dfe6ec%22%20stroke-width%3D%221%22/%3E%3Cpath%20d%3D%22M5%206h6M5.6%209h4.8M6.5%204v8M9.5%204v8M8%204v8%22%20stroke%3D%22%23b8c3cd%22%20stroke-width%3D%22.5%22/%3E%3Crect%20x%3D%223%22%20y%3D%223%22%20width%3D%2210%22%20height%3D%221.6%22%20rx%3D%22.6%22%20fill%3D%22%23f2f6f9%22/%3E%3Crect%20x%3D%227%22%20y%3D%2212%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%236c757e%22/%3E%3C/svg%3E")}
.ic-lure{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20d%3D%22M9%203%20C6%205%205%208%206%2011%20C7%2013%209%2013%2010%2011%22%20fill%3D%22none%22%20stroke%3D%22%23e0455c%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22/%3E%3Cpath%20d%3D%22M9%203%20C7%205%206%208%206.6%2010.4%22%20fill%3D%22none%22%20stroke%3D%22%23ff8296%22%20stroke-width%3D%22.8%22/%3E%3Cpath%20d%3D%22M10%2011%20L12%2012%20L11%2013%22%20fill%3D%22none%22%20stroke%3D%22%23c9ced4%22%20stroke-width%3D%221%22/%3E%3C/svg%3E")}
.ic-bucket{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2016%2016%22%20shape-rendering%3D%22crispEdges%22%3E%3Cpath%20d%3D%22M4%205%20L12%205%20L11%2013%20L5%2013%20Z%22%20fill%3D%22%23c2cad2%22/%3E%3Cpath%20d%3D%22M5%205%20L7%205%20L6.4%2013%20L5.4%2013%20Z%22%20fill%3D%22%23e6ecf1%22/%3E%3Cpath%20d%3D%22M4%205%20L12%205%20L11.7%206.4%20L4.3%206.4%20Z%22%20fill%3D%22%238e979f%22/%3E%3Cpath%20d%3D%22M4.5%204.6%20C6%202.4%2010%202.4%2011.5%204.6%22%20fill%3D%22none%22%20stroke%3D%22%237c858d%22%20stroke-width%3D%22.9%22/%3E%3Crect%20x%3D%224.6%22%20y%3D%2211.4%22%20width%3D%226.8%22%20height%3D%22.8%22%20fill%3D%22%2398a1a9%22/%3E%3C/svg%3E")}

.zoomer{right:12px;bottom:12px;display:flex;align-items:center;gap:6px;
 background:rgba(10,18,26,.72);border:2px solid #0a1119;border-radius:8px;padding:5px 8px;
 box-shadow:0 0 0 2px rgba(255,255,255,.05) inset}
.zoomer button{width:24px;height:24px;line-height:1;font:700 20.1px/1 monospace;cursor:pointer;
 color:#dbe8f2;background:#1b2b39;border:2px solid #0a1119;border-radius:5px}
.zoomer button:hover{background:#2a4257;color:#fff}
.zoomer button:active{transform:translateY(1px)}
.zoomer span{min-width:38px;text-align:center;font:700 14.7px/1 monospace;color:#9fc4dc}
.sound-toggle{right:12px;bottom:52px;display:flex;align-items:center;gap:6px;
 background:rgba(10,18,26,.72);border:2px solid #0a1119;border-radius:8px;padding:5px 8px;
 box-shadow:0 0 0 2px rgba(255,255,255,.05) inset}
.sound-toggle button{width:24px;height:24px;line-height:1;font:700 18.8px/1 monospace;cursor:pointer;
 color:#dbe8f2;background:#1b2b39;border:2px solid #0a1119;border-radius:5px;
 display:flex;align-items:center;justify-content:center}
.sound-toggle button:hover{background:#2a4257;color:#fff}
.sound-toggle button:active{transform:translateY(1px)}
.sound-toggle button.muted{color:#8a6a6a;background:#2a1b1b;border-color:#1a0a0a}
#soundMenu{position:absolute;bottom:36px;right:0;width:200px;max-width:calc(100vw - 28px);background:#161a20;border:2px solid #0b0d10;border-radius:8px;box-shadow:inset 0 0 0 2px #343b44,0 -4px 0 rgba(0,0,0,.45),0 0 18px rgba(0,0,0,.6);padding:9px;z-index:6;transition:opacity .18s ease,transform .18s ease;transform-origin:bottom right}
#soundMenu.hidden{opacity:0;pointer-events:none;transform:scale(.82)}
#soundMenu:not(.hidden){opacity:1;pointer-events:auto;transform:scale(1)}
.sm-row{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.sm-row:last-child{margin-bottom:0}
.sm-btn{font-family:inherit;font-size:12.1px;color:#dfe8f2;background:#2b4a2b;border:2px solid #0b0d10;border-radius:5px;box-shadow:inset 0 0 0 2px #4a7a46,0 2px 0 rgba(0,0,0,.45);padding:4px 8px;cursor:pointer;min-width:36px;text-align:center;flex:none}
.sm-btn:hover{background:#356035;color:#fff}
.sm-btn:active{transform:translateY(1px);box-shadow:inset 0 0 0 2px #4a7a46,0 1px 0 rgba(0,0,0,.45)}
.sm-btn.muted{background:#4a2b2b;box-shadow:inset 0 0 0 2px #7a4646;color:#ffb4b4}
.sm-label{font-size:10.7px;color:#9fc4dc;text-shadow:1px 1px 0 #000;flex:none;letter-spacing:.3px}
.sm-val{font-size:10.7px;color:#ffe08a;text-shadow:1px 1px 0 #000;min-width:34px;text-align:center;flex:none}
.sm-volume .sm-label{min-width:58px}
.sound-toggle .sm-step{width:24px;min-width:24px;height:24px;padding:0;font-size:17.4px;color:#dbe8f2;background:#22384a;border-color:#0a1119}
.sound-toggle .sm-step:hover{background:#31536d;color:#fff}
.sound-toggle .sm-step:focus-visible,.sound-toggle button:focus-visible{outline:2px solid #9ee063;outline-offset:2px}
#soundMenu input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:14px;background:#0d1015;border:2px solid #000;border-radius:3px;outline:none;cursor:pointer}
#soundMenu input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:18px;background:#9ee063;border:2px solid #4c9427;border-radius:2px;cursor:pointer}
#soundMenu input[type=range]::-moz-range-thumb{width:12px;height:18px;background:#9ee063;border:2px solid #4c9427;border-radius:2px;cursor:pointer;border:none}
#soundMenu input[type=range]:focus{box-shadow:0 0 0 2px rgba(111,201,245,.5)}
@media(prefers-reduced-motion:reduce){#soundMenu{transition:none}}

/* ============================ YUGOU ============================ */
/* --- title screen ------------------------------------------------- */
body.menu .hud{pointer-events:none}
body.menu .hud>*{opacity:0;pointer-events:none}
body.menu .hud.bl>.lb{opacity:1;pointer-events:auto}
/* Title screen: push in on the boat and park it on the left, so the live
   scene itself is the hero art and the menu column owns the right side.
   Origin sits on the boat (53% across, sea line at 41%) so the zoom grows
   around it rather than around the middle of the canvas. */
body.menu #game{cursor:default;pointer-events:none;filter:saturate(1.06);
  transform-origin:53% 41%;
  transform:scale(1.85) translate(-15.7%,11.3%);
  transition:transform .9s cubic-bezier(.16,.8,.28,1)}
body:not(.menu) #game{transform:none;transition:transform .7s cubic-bezier(.16,.8,.28,1)}
body.menu #toasts,body.menu #reel,body.menu #modal,body.menu #offline,body.menu #wreck{display:none!important}
body.menu .lb{opacity:1!important;pointer-events:auto!important}
/* tickets/donations opened FROM the title screen ride above the overlay */
body.menu #modal.over-menu{display:flex!important;z-index:60}

#mainMenu{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:26px;
  /* Push the live scene back so the title and card come forward: a light
     defocus plus the existing coral wash. The blur is on the overlay, so the
     menu's own children stay pin-sharp. */
  backdrop-filter:blur(5px) saturate(112%);
  -webkit-backdrop-filter:blur(5px) saturate(112%);
  background:radial-gradient(120% 80% at 50% 6%,rgba(255,143,120,.16),transparent 58%),
             radial-gradient(65% 42% at 50% 52%,rgba(4,14,26,.58),transparent 72%),
             linear-gradient(rgba(4,14,26,.16) 0%,rgba(4,12,22,.26) 42%,rgba(4,12,22,.62) 100%);
  transition:opacity .45s ease,visibility .45s,backdrop-filter .45s ease}
/* fading out: drop the blur too, so the reveal doesn't snap */
#mainMenu.gone{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
/* no backdrop-filter (older Firefox): lean on a heavier wash instead */
@supports not (backdrop-filter:blur(2px)){
  #mainMenu{background:radial-gradient(120% 80% at 50% 6%,rgba(255,143,120,.18),transparent 58%),
            linear-gradient(rgba(4,14,26,.42),rgba(4,12,22,.66))}
}
#mainMenu.gone{opacity:0;visibility:hidden}

.cc-mark{display:block;margin:0 auto 10px;width:clamp(56px,11vw,96px);height:auto;image-rendering:pixelated}
.cc-title b{font-size:clamp(29.5px,5.4vw,61.6px)}
.cc-title{text-align:center;line-height:1;pointer-events:none}
.cc-title b{display:block;letter-spacing:4px;color:#fff6ef;
  text-shadow:0 0 6px #ff9a76,0 0 18px rgba(255,122,89,.75),0 0 44px rgba(255,90,60,.45),
              0 5px 0 rgba(0,0,0,.55);
  animation:coralGlow 4.2s steps(1,end) infinite}
.cc-title i{display:block;margin-top:14px;font-style:normal;font-size:clamp(9.4px,1.5vw,13.4px);
  letter-spacing:3px;color:#8fd6e8;text-shadow:0 0 10px rgba(110,220,240,.6),0 2px 0 rgba(0,0,0,.6);
  animation:reefFlicker 4.2s steps(1,end) infinite}
/* strobes on like a harbour light: stutter, catch, then hold bright */
@keyframes coralGlow{
  0%{opacity:.30;text-shadow:0 0 2px #ff9a76,0 4px 0 rgba(0,0,0,.55)}
  4%{opacity:1;text-shadow:0 0 8px #ffb08f,0 0 26px rgba(255,132,96,.9),0 0 60px rgba(255,90,60,.6),0 5px 0 rgba(0,0,0,.55)}
  8%{opacity:.34;text-shadow:0 0 2px #ff9a76,0 4px 0 rgba(0,0,0,.55)}
  13%{opacity:1;text-shadow:0 0 9px #ffc0a3,0 0 30px rgba(255,140,104,.95),0 0 70px rgba(255,96,64,.65),0 5px 0 rgba(0,0,0,.55)}
  16%{opacity:.5}
  20%,78%{opacity:1;text-shadow:0 0 7px #ff9a76,0 0 20px rgba(255,122,89,.8),0 0 50px rgba(255,90,60,.5),0 5px 0 rgba(0,0,0,.55)}
  86%{opacity:.86;text-shadow:0 0 5px #ff9a76,0 0 14px rgba(255,122,89,.6),0 5px 0 rgba(0,0,0,.55)}
  100%{opacity:1;text-shadow:0 0 7px #ff9a76,0 0 20px rgba(255,122,89,.8),0 0 50px rgba(255,90,60,.5),0 5px 0 rgba(0,0,0,.55)}
}
@keyframes reefFlicker{0%{opacity:.25}4%{opacity:.9}8%{opacity:.3}13%{opacity:1}16%{opacity:.45}20%,80%{opacity:.92}90%{opacity:.6}100%{opacity:.92}}

.cc-card{display:flex;flex-direction:column;align-items:center;gap:12px;
  background:rgba(10,20,30,.72);border:2px solid #06131f;border-radius:12px;
  box-shadow:inset 0 0 0 2px rgba(142,214,92,.28),0 6px 0 rgba(0,0,0,.45),0 0 44px rgba(255,120,90,.10);
  padding:20px 24px;min-width:min(340px,86vw)}

.cc-btn{font-family:inherit;font-size:14.7px;letter-spacing:1.5px;color:#07161f;
  background:linear-gradient(#8fe6f2,#41b5cf);border:2px solid #06131f;border-radius:8px;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 4px 0 rgba(0,0,0,.5);
  padding:14px 26px;cursor:pointer;width:100%;transition:transform .1s,filter .15s}
.cc-btn:hover{filter:brightness(1.08)}
.cc-btn:active{transform:translateY(2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 2px 0 rgba(0,0,0,.5)}
.cc-btn:disabled{filter:grayscale(.6);cursor:wait}
.cc-btn.play{background:linear-gradient(#ffb98f,#f2764f);color:#2a0d05;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 4px 0 rgba(0,0,0,.5),0 0 26px rgba(255,120,80,.4)}
.cc-btn.ghost{background:#1a2530;color:#9fc3d2;box-shadow:inset 0 0 0 2px #2e4252,0 3px 0 rgba(0,0,0,.5);
  font-size:10.7px;padding:9px 14px;width:auto}
.cc-btn.hide,.cc-row.hide{display:none}

.cc-row{display:flex;align-items:center;gap:10px;width:100%;justify-content:space-between;
  background:#0d1b26;border:2px solid #06131f;border-radius:8px;padding:9px 11px}
.cc-row .dot{width:8px;height:8px;border-radius:50%;background:#54e08a;box-shadow:0 0 8px #54e08a;flex:none}
.cc-row b{font-size:12.1px;color:#cfe9f3;letter-spacing:1px;flex:1;text-align:left}
.cc-note{font-size:9.4px;line-height:1.7;color:rgba(190,222,236,.66);text-align:center;
  letter-spacing:.5px;max-width:300px;min-height:22px}
.cc-note.flash{color:#ffd9a3}
.cc-hint{font-size:9.4px;color:rgba(160,200,220,.42);letter-spacing:2px}

/* ---------------- title-screen socials ---------------------------------
   Sits under the card, same pixel frame and press-down feel as .cc-btn so
   it reads as part of the menu rather than bolted-on chrome. */
.cc-social{display:flex;gap:10px;margin-top:-12px}
.cc-soc{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
  font-family:inherit;font-size:12.1px;letter-spacing:1.4px;text-decoration:none;
  color:#cfeaf3;background:rgba(10,20,30,.72);
  border:2px solid #06131f;border-radius:9px;
  box-shadow:inset 0 0 0 2px rgba(142,214,92,.22),0 4px 0 rgba(0,0,0,.45);
  transition:transform .08s ease,box-shadow .08s ease,color .15s,background .15s}
.cc-soc:hover{color:#fff;background:rgba(14,30,42,.86);
  box-shadow:inset 0 0 0 2px rgba(142,214,92,.45),0 4px 0 rgba(0,0,0,.45),0 0 18px rgba(142,214,92,.25)}
.cc-soc:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px rgba(142,214,92,.45),0 1px 0 rgba(0,0,0,.45)}
.cc-soc:focus-visible{outline:2px solid #9bda7c;outline-offset:2px}
.cc-soc svg{width:12px;height:12px;flex:none}
.cc-soc b{font-weight:normal}
.cc-soc.pons:hover{color:#b7f55f;
  box-shadow:inset 0 0 0 2px rgba(94,220,140,.45),0 4px 0 rgba(0,0,0,.45),0 0 18px rgba(94,220,140,.25)}
/* pons mark, drawn as pixels to match the rest of the UI */
.cc-soc .pf{width:12px;height:12px;flex:none;image-rendering:pixelated;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' shape-rendering='crispEdges'><g fill='%235edc8c'><path d='M4 1h5v1H4zM3 2h7v1H3zM2 3h9v1H2zM2 4h9v1H2zM1 5h9v1H1z'/></g><g fill='%2358c8f5'><path d='M1 6h9v1H1zM1 7h8v1H1zM2 8h7v1H2zM2 9h5v1H2zM3 10h3v1H3z'/></g><g fill='%23ffffff' opacity='.55'><path d='M4 2h2v1H4zM3 3h1v1H3z'/></g></svg>") no-repeat center/12px 12px}
.cc-soc.pons:hover .pf{filter:brightness(1.2)}
@media (max-width:720px){.cc-social{margin-top:-6px}.cc-soc{padding:8px 11px;font-size:10.7px}}

/* --- bottom-left stack: leaderboard sits ABOVE the buttons --------- */
.bl{flex-direction:column;align-items:flex-start;gap:8px}
.bl-row{display:flex;gap:6px;flex-wrap:wrap;max-width:60vw}

.lb{width:210px;background:#1c2026;border:2px solid #0b0d10;border-radius:8px;
  box-shadow:inset 0 0 0 2px #343b44,0 3px 0 rgba(0,0,0,.45);overflow:hidden}
.lb-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 9px;cursor:pointer;background:none;border:0;width:100%;font-family:inherit}
.lb-head span{font-size:10.7px;letter-spacing:1.5px;color:#8fd6e8;text-shadow:0 0 8px rgba(110,220,240,.45)}
.lb-head em{font-style:normal;font-size:10.7px;color:#6f8494;transition:transform .2s}
.lb.open .lb-head em{transform:rotate(180deg)}
.lb-body{max-height:0;overflow:hidden;transition:max-height .25s ease}
.lb.open .lb-body{max-height:170px}
.lb ol{list-style:none;padding:0 9px 4px}
.lb li{display:flex;align-items:center;gap:7px;padding:3px 0;font-size:9.4px;color:#c6d6e2}
.lb li.me{color:#ffd9a3}
.lb .lb-pos{width:12px;color:#6f8494}
.lb li.me .lb-pos{color:#ffb07a}
.lb .lb-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .lb-score{color:#f5c451}
.lb .lb-empty{color:#63757f;justify-content:center;padding:8px 0}
.lb-foot{padding:6px 9px 8px;font-size:9.4px;letter-spacing:1px;color:#7fa8bb;
  border-top:2px solid #0b0d10;background:#161b21}

@media (max-width:720px){.lb{width:170px}.cc-card{padding:16px 16px}}

/* ---------------- REWARDS (modal tab, same surface as SHOP/LOG) --------- */
.btn .rw-badge{background:#e0533c;color:#fff;border-radius:7px;padding:0 4px;
  font-size:10.7px;font-style:normal;margin-left:4px;vertical-align:top}
.rw-streak{background:#0e2630;border:1px solid #1d4552;border-radius:4px;
  padding:7px 8px;margin:6px 0}
.rw-sh{font-size:13.4px;letter-spacing:.08em;color:#ffce6a}
.rw-pips{display:flex;gap:4px;margin:6px 0 5px}
.rw-pips i{flex:1;text-align:center;font-style:normal;font-size:12.1px;padding:3px 0;
  border-radius:3px;background:#12303c;color:#5b7c86;border:1px solid #1d4552}
.rw-pips i.on{background:linear-gradient(180deg,#f2b954,#d3892a);color:#241a08;
  border-color:#f2d08a;font-weight:bold}
.rw-sn{font-size:12.1px;color:#a8c4a0}
.rw-bar{height:4px;background:#12303c;border-radius:2px;margin:4px 0;overflow:hidden}
.rw-bar i{display:block;height:100%;background:linear-gradient(90deg,#3fa38c,#95dc74)}
.rw-pg{float:right;color:#6f9099}
.rw-tag{align-self:center;font-size:10.7px;letter-spacing:.06em;color:#6f9099;
  border:1px solid #1d4552;border-radius:3px;padding:2px 5px}
.item .rw-tag{margin-left:auto}

/* ---------------- captain name / rename --------------------------------
   Grid, not a single flex line: the name gets its own truncating cell and
   the status sits under it, so a long handle can never shove RENAME out of
   the panel or wrap on top of it. */
.lb-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;column-gap:8px;row-gap:5px;line-height:1.35}
/* the wrapper dissolves so name / button / status land directly in the grid:
   name and RENAME share the top row, the status gets the full width below —
   which is why a long handle can never crowd the button */
#lbMine{display:contents}
.lb-who{grid-column:1;grid-row:1;font-size:12.1px;letter-spacing:.02em;color:#dcecf2;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-rank{grid-column:1/-1;grid-row:2;justify-self:start;max-width:100%;
  font-size:9.4px;font-style:normal;letter-spacing:.12em;color:#6f93a4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-rank.on{color:#f5c451}
.lb-rank.call{color:#9bda7c;background:#173a1c;
  border:1px solid #2c5c2a;border-radius:2px;padding:1px 5px}
.lb-edit{grid-column:2;grid-row:1;align-self:center;display:inline-flex;align-items:center;gap:4px;flex:none;
  background:#173a1c;color:#9bda7c;border:1px solid #2c5c2a;border-radius:2px;
  padding:2px 6px;font:inherit;font-size:9.4px;letter-spacing:.14em;cursor:pointer;
  image-rendering:pixelated}
.lb-edit::before{content:'';width:8px;height:8px;flex:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill='%237fd3c4' d='M5 0h2v1H5zM4 1h1v1H4zM6 1h1v1H6zM3 2h1v1H3zM5 2h2v1H5zM2 3h1v1H2zM4 3h2v1H4zM1 4h1v1H1zM3 4h2v1H3zM1 5h2v1H1zM1 6h2v1H1zM0 7h3v1H0z'/></svg>") no-repeat center/8px 8px}
.lb-edit:hover{background:#1a4a5a;color:#bff2e6}
.lb-edit:focus-visible{outline:2px solid #fff;outline-offset:1px}
.lb-edit-row{grid-column:1/-1;grid-row:3;display:flex;align-items:center;gap:4px}
.lb-edit-row.hide{display:none}
.lb-edit-row input{background:#0c2412;border:1px solid #3a6a34;color:#e6f6f2;
  font:inherit;font-size:12.1px;padding:3px 5px;border-radius:3px;flex:1;min-width:0}
.lb-edit-row input:focus-visible{outline:2px solid #9bda7c;outline-offset:0}
.lb-mini{background:#3a4750;color:#cfe0e4;border:0;border-radius:3px;
  padding:3px 6px;font:inherit;font-size:10.7px;cursor:pointer}
.lb-mini.save{background:#4f9330;color:#04211a}
.lb-mini.save:hover{background:#69c34a}
.lb-mini:hover{background:#4a5760;color:#e0e8ec}
.lb-mini:focus-visible{outline:2px solid #fff;outline-offset:1px}
.lb-rename{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:5px 8px 7px;
  border-top:1px solid #173a1c}
.lb-rename input{flex:1;min-width:90px;background:#0c2412;border:1px solid #2c5c2a;
  color:#e6f6f2;font:inherit;font-size:13.4px;padding:3px 5px;border-radius:3px}
.lb-rename input:focus-visible{outline:2px solid #9bda7c;outline-offset:0}
.lb-save,.lb-cancel{background:#4f9330;color:#04211a;border:0;border-radius:3px;
  padding:2px 7px;font:inherit;font-size:12.1px;cursor:pointer;letter-spacing:.05em}
.lb-cancel{background:#3a4750;color:#cfe0e4}
.lb-save:hover{background:#69c34a}
.lb-save:focus-visible,.lb-cancel:focus-visible{outline:2px solid #fff;outline-offset:1px}
.lb-err{flex-basis:100%;font-size:12.1px;color:#f08a7a;min-height:0}
/* captain-name field on the title card — labelled, obviously editable */
.cc-field{width:100%;background:#0d1f29;border:1px solid #23485a;border-radius:5px;
  padding:8px 9px 7px;display:flex;flex-direction:column;gap:5px;text-align:left}
.cc-cap{font-size:9.4px;letter-spacing:.18em;color:#9bda7c}
.cc-sub{font-size:9.4px;line-height:1.6;color:rgba(160,200,220,.5)}
.cc-name{display:flex;align-items:center;gap:8px;width:100%;cursor:pointer;
  background:#0c2412;border:1px dashed #3a6a34;border-radius:4px;padding:5px 7px;
  font:inherit;text-align:left;transition:border-color .15s,background .15s}
.cc-name:hover{background:#0b2c38;border-color:#4d9fb5}
.cc-name:focus-visible{outline:2px solid #9bda7c;outline-offset:1px}
.cc-name b{flex:1;font-size:16.1px;color:#ffe9a8;letter-spacing:.06em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-name .pen{font-style:normal;font-size:9.4px;letter-spacing:.14em;color:#9bda7c;
  background:#173a1c;border:1px solid #2c5c2a;border-radius:2px;padding:2px 5px;flex:none}
.cc-name:hover .pen{background:#1a4a5a;color:#bff2e6}
.cc-edit{display:flex;align-items:center;gap:5px}
.cc-edit.hide{display:none}
.cc-edit input{flex:1;min-width:0;background:#0c2412;border:1px solid #3a6a34;
  color:#e6f6f2;font:inherit;font-size:14.7px;padding:5px 6px;border-radius:4px}
.cc-edit input:focus-visible{outline:2px solid #9bda7c;outline-offset:0}
.cc-mini{flex:none;background:#3a4750;color:#cfe0e4;border:0;border-radius:3px;
  padding:5px 8px;font:inherit;font-size:10.7px;letter-spacing:.1em;cursor:pointer}
.cc-mini.save{background:#4f9330;color:#04211a}
.cc-mini.save:hover{background:#69c34a}
.cc-mini:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* -------- scrollbars: match the reef palette instead of OS default ------- */
*{scrollbar-width:thin;scrollbar-color:#3a6a34 rgba(6,20,27,.55)}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgba(6,20,27,.55);border-radius:4px}
::-webkit-scrollbar-thumb{background:#3a6a34;border-radius:4px;
  border:1px solid #2c5c2a;background-image:linear-gradient(#39788e,#20505f)}
::-webkit-scrollbar-thumb:hover{background-image:linear-gradient(#4d9fb5,#2c6b7e)}
::-webkit-scrollbar-thumb:active{background-image:linear-gradient(#9bda7c,#3a8496)}
::-webkit-scrollbar-corner{background:transparent}

/* ---------------- TICKET MARKET (modal tab) ---------------------------- */
.tk-tabs{display:flex;gap:6px;margin-bottom:8px}
.tk-tab{flex:1;background:#0b1f28;border:1px solid #1d4353;color:#7f9aa4;
  font:inherit;font-size:12.1px;letter-spacing:.05em;padding:7px 2px;border-radius:4px;
  cursor:pointer;white-space:nowrap}
.tk-tab.on{border-color:#9bda7c;color:#bff2e6;background:#12363f;
  box-shadow:0 0 0 1px rgba(127,211,196,.25) inset}
.tk-tab:focus-visible{outline:2px solid #fff;outline-offset:1px}
.tk-card{background:#0c2412;border:1px solid #16394a;border-radius:6px;
  padding:10px;margin-bottom:8px}
.tk-split{display:flex;height:9px;border-radius:5px;overflow:hidden;background:#0b2b34}
.tk-split .a{background:linear-gradient(90deg,#3fa38c,#95dc74)}
.tk-split .b{background:linear-gradient(90deg,#4f8f34,#63c2e8)}
.tk-split .c{background:#4a6470}
.tk-legend{display:flex;justify-content:space-between;gap:6px;font-size:12.1px;
  color:#a8c4a0;margin:7px 0 6px}
.tk-copy{font-size:12.1px;line-height:1.6;color:#89aab3;margin:0 0 10px}
.tk-copy a{color:#9bda7c}
.tk-trade{display:block;text-align:center;text-decoration:none;font-size:14.7px;
  letter-spacing:.08em;color:#04212a;padding:10px 0;border-radius:5px;
  background:linear-gradient(90deg,#4fc3a6,#95dc74);border:1px solid #a9f0dd}
.tk-trade:hover{filter:brightness(1.08)}
.tk-row{display:flex;align-items:center;justify-content:space-between;
  font-size:14.7px;color:#dfeef2;letter-spacing:.06em}
.tk-row em{font-style:normal;color:#b8f08a}
.tk-bar{height:6px;background:#0b2b34;border-radius:3px;overflow:hidden;margin:7px 0 4px}
.tk-bar i{display:block;height:100%;background:linear-gradient(90deg,#6fbf4f,#b8f08a)}
.tk-sub{font-size:12.1px;color:#7f9aa4;text-align:right}
.tk-big{width:100%;margin-top:9px;background:#0b2b34;border:1px solid #3a6a34;
  color:#a8c4a0;font:inherit;font-size:14.7px;letter-spacing:.08em;padding:11px 0;
  border-radius:5px;cursor:pointer}
.tk-big:not([disabled]){background:linear-gradient(90deg,#4fc3a6,#95dc74);
  border-color:#a9f0dd;color:#04212a}
.tk-big[disabled]{cursor:not-allowed}
.tk-big:focus-visible{outline:2px solid #fff;outline-offset:1px}
.tk-two{display:flex;gap:6px;margin-top:9px}
.tk-btn{flex:1;font:inherit;font-size:12.1px;letter-spacing:.05em;padding:9px 4px;
  border-radius:5px;cursor:pointer}
.tk-btn.donate{background:#12363f;border:1px solid #4f8f34;color:#b6e884}
.tk-btn.claim{background:#173a1c;border:1px solid #e0a13c;color:#f0c877}
.tk-btn:hover{filter:brightness(1.15)}
.tk-btn:focus-visible{outline:2px solid #fff;outline-offset:1px}
.tk-none{font-size:12.1px;color:#7f9aa4;margin-top:8px;line-height:1.6}
.tk-stats{display:flex;gap:6px;margin-bottom:8px}   /* same rhythm as .tk-card */
.tk-stats>div{flex:1;background:#0c2412;border:1px solid #16394a;border-radius:6px;
  padding:9px 4px;text-align:center}
.tk-stats b{display:block;font-size:16.1px;color:#9bda7c}
.tk-stats em{font-style:normal;font-size:10.7px;color:#7f9aa4}
.tk-brow{display:flex;align-items:center;gap:6px;font-size:12.1px;color:#a8c4a0;
  padding:4px 0;border-bottom:1px solid #10303b}
.tk-brow:last-child{border-bottom:0}
.tk-brow em{font-style:normal;margin-left:auto;color:#7f9aa4}
.tk-brow i{font-style:normal;color:#5b7c86;min-width:30px;text-align:right}
.tk-brow.d span{color:#b6e884}

/* direct donation card — turtle blue, distinct from the ticket economy */
.tk-card.give{border-color:#2f6f8f;background:#08202c}
.tk-card.give .tk-row b{color:#b6e884}
.tk-give{display:block;text-align:center;text-decoration:none;font-size:13.4px;
  letter-spacing:.08em;color:#04212a;padding:10px 0;border-radius:5px;
  background:linear-gradient(90deg,#63a63a,#b6e884);border:1px solid #cdf29a}
.tk-give:hover{filter:brightness(1.1)}
.tk-give:focus-visible{outline:2px solid #fff;outline-offset:1px}

/* ===== TUTORIAL ===================================================== */

#tut-root{position:fixed;inset:0;z-index:400}
#tut-root.hidden{display:none}
#tut-svg{position:fixed;inset:0;width:100%;height:100%;pointer-events:auto}
#tut-ring{filter:drop-shadow(0 0 8px rgba(87,224,196,.5))}
#tut-tip{position:fixed;opacity:0;transition:opacity .12s;width:330px;max-width:calc(100vw - 24px);z-index:401;
  background:#0a1c26;border:2px solid #4f9330;border-radius:10px;padding:14px 14px 11px;
  box-shadow:0 8px 30px rgba(0,0,0,.7),0 0 22px rgba(87,224,196,.16)}
#tut-tip.on{opacity:1}
#tut-close{position:absolute;top:7px;right:7px;width:24px;height:24px;cursor:pointer;
  background:transparent;border:1px solid #2c5c2a;border-radius:5px;color:#7fa8b4;
  font-size:16.1px;line-height:1}
#tut-close:hover{color:#fff;border-color:#79d84f}
#tut-title{font:400 13.4px/1.4 'Monocraft',monospace;color:#9bda7c;
  letter-spacing:.5px;margin-bottom:9px;padding-right:26px}
#tut-txt{font:400 17.4px/1.55 system-ui,sans-serif;color:#dcefef;margin-bottom:12px}
#tut-nav{display:flex;align-items:center;justify-content:space-between}
#tut-count{font:400 10.7px/1 'Monocraft',monospace;color:#5d8797}
.tut-btns{display:flex;gap:7px}
.tut-btn{padding:7px 11px;background:#173a1c;border:1px solid #2c5c2a;color:#dcefef;
  font:400 10.7px/1 'Monocraft',monospace;letter-spacing:.5px;border-radius:6px;cursor:pointer}
.tut-btn:hover{border-color:#79d84f}
.tut-btn.primary{background:#4f9330;color:#04211a;border-color:#256f5d;box-shadow:0 2px 0 #17493c}
.tut-btn.primary:hover{filter:brightness(1.1)}
.tut-btn:focus-visible,#tut-close:focus-visible{outline:2px solid #fff;outline-offset:1px}
/* reveal the reel panel purely so the tutorial can point at it */
#reel.hidden.tut-peek{display:block!important;opacity:.92;pointer-events:none}

/* ===================== WRECK / REVIVE ===================== */
#wreck .mbox{border-color:#000;box-shadow:inset 0 0 0 2px #5a2530,0 8px 0 rgba(0,0,0,.55)}
#wreck .mhead b{color:#ff8f8f}
/* above the tutorial layer (z 400) — a sinking boat must always be clickable */
#wreck{background:rgba(24,4,8,.78);z-index:420}
.wk-lead{margin:0 0 11px;font-size:14.7px;line-height:1.65;color:#c8d6dd}
.wk-keep{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:9px 11px;margin-bottom:11px;
 background:#10251f;border:2px solid #1d4436;border-radius:8px}
.wk-keep b{font-size:12.1px;color:#79d84f;letter-spacing:.5px;width:100%}
.wk-keep span{font-size:13.4px;color:#a9ded0}
.wk-opt{padding:11px;margin-bottom:9px;background:#1b2029;border:2px solid #2b323d;border-radius:8px}
.wk-opt.bad{background:#241a1d;border-color:#40272d}
.wk-opt.off{opacity:.62}
.wk-opt p{margin:5px 0 9px;font-size:13.4px;line-height:1.6;color:#93a4ae}
.wk-row{display:flex;align-items:center;justify-content:space-between}
.wk-row b{font-size:14.7px;color:#ffe08a;text-shadow:1px 1px 0 #000}
.wk-row em{font-size:13.4px;font-style:normal;color:#8fa2ad}
.wk-btn{width:100%;padding:10px;font:inherit;font-size:13.4px;letter-spacing:.4px;color:#06131a;
 background:#79d84f;border:2px solid #000;border-radius:7px;cursor:pointer;
 box-shadow:0 3px 0 rgba(0,0,0,.45);transition:transform .08s}
.wk-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.45)}
.wk-btn:disabled{background:#3d4650;color:#8b98a2;cursor:not-allowed;box-shadow:none}
.wk-btn.scuttle{background:#d8566a;color:#1a0508}
.wk-btn.back{background:#4a5563;color:#dfe9ee}
.wk-two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wk-warn{padding:11px;margin-bottom:10px;background:#2c1418;border:2px solid #6b2733;border-radius:8px}
.wk-warn b{font-size:13.4px;color:#ff9c9c}
.wk-warn p{margin:6px 0 0;font-size:13.4px;line-height:1.6;color:#d9b8bc}

/* ===================== CLAIM RECEIPT ====================== */
.tk-card.warn{background:#2c2416;border-color:#6b5327}
.tk-card.receipt{background:#111e26;border-color:#255064}
.tk-code{margin:9px 0;padding:9px;font-size:12.1px;line-height:1.55;word-break:break-all;
 color:#8fe4d3;background:#08131a;border:2px solid #1d3d4c;border-radius:6px;cursor:pointer}
.tk-sub .ok{color:#79d84f}
.tk-sub .warn{color:#ffbe5c}
.tk-btn.ghost{background:#2b333d;color:#cfdce3}

/* ===================== PAYOUT CONSOLE ===================== */
.ad-note{margin-bottom:10px;font-size:13.4px;line-height:1.6;color:#93a4ae}
.ad-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:11px}
.ad-stats div{padding:8px;text-align:center;background:#1b2029;border:2px solid #2b323d;border-radius:7px}
.ad-stats div.hot{background:#221c12;border-color:#5b4620}
.ad-stats b{display:block;font-size:16.1px;color:#ffe08a}
.ad-stats em{font-size:10.7px;font-style:normal;color:#8fa2ad}
.ad-in{width:100%;height:74px;padding:9px;font:inherit;font-size:12.1px;line-height:1.5;resize:vertical;
 color:#cfe6ee;background:#0d151b;border:2px solid #253340;border-radius:7px}
.ad-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:9px 0 12px}
.ad-btns .tk-btn{padding:9px 4px;font-size:12.1px}
.ad-empty{padding:18px;text-align:center;font-size:13.4px;color:#7f8f99}
.ad-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.ad-row{display:grid;grid-template-columns:1fr auto auto auto;gap:9px;align-items:center;
 padding:8px 10px;background:#1b2029;border:2px solid #2b323d;border-radius:7px}
.ad-row.paid{opacity:.55}
.ad-w{min-width:0}
.ad-w b{display:block;font-size:13.4px;color:#ffe08a}
.ad-w code{display:block;font-size:10.7px;color:#7fa3b3;word-break:break-all}
.ad-n{font-size:12.1px;color:#cfdce3;text-align:center}
.ad-n em{display:block;font-size:9.4px;font-style:normal;color:#8fa2ad}
.ad-s{font-size:14.7px;color:#79d84f;white-space:nowrap}
.ad-pay{padding:7px 9px;font:inherit;font-size:10.7px;color:#06131a;background:#79d84f;
 border:2px solid #000;border-radius:6px;cursor:pointer}
.ad-pay.on{background:#4a5563;color:#cfdce3}
.tk-btn.sm{padding:7px;font-size:10.7px}


/* BAIT that isn't banked yet — quiet, but never hidden from the player */
.bait-tag{margin-left:5px;font-style:normal;font-size:8px;letter-spacing:.14em;
  color:#8fb2c2;background:rgba(20,44,58,.9);border:1px solid #275a6e;
  border-radius:2px;padding:1px 3px;vertical-align:middle}


/* live claim / donor boards */
.tk-live{display:flex;align-items:center;gap:6px;margin:0 0 6px;padding:5px 8px;
  font-size:10.7px;letter-spacing:.04em;color:#cfe6f0;background:rgba(16,40,54,.85);
  border:1px solid #235469;border-radius:3px}
.tk-live i{width:6px;height:6px;border-radius:50%;background:#5fe08a;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(95,224,138,.7);animation:tkPulse 1.8s ease-out infinite}
@keyframes tkPulse{
  0%{box-shadow:0 0 0 0 rgba(95,224,138,.6)}
  70%{box-shadow:0 0 0 5px rgba(95,224,138,0)}
  100%{box-shadow:0 0 0 0 rgba(95,224,138,0)}}
.tk-pos{display:inline-block;min-width:14px;margin-right:5px;color:#7fa8bb;font-style:normal}
.tk-brow.me{background:rgba(95,224,138,.12);border-color:#3d7f5c}
.tk-brow.me .tk-pos{color:#9ff0bb}

/* hourly BAIT ceiling reached — amber, not alarming red: nothing is broken */
.bait-tag.cap{color:#f0c069;background:rgba(58,42,14,.92);border-color:#7a5a1e}

/* ============ TITLE SCREEN — splash layout ==============================
   Reference language: a full-bleed painted scene with the hero low-left,
   the wordmark parked top-right, and a right-aligned menu column driven by
   a cursor. Nothing sits in a box: the live game canvas IS the art. */
#mainMenu{display:block;backdrop-filter:blur(3px) saturate(116%);
  -webkit-backdrop-filter:blur(3px) saturate(116%);
  background:radial-gradient(120% 90% at 22% 12%,rgba(255,196,138,.20),transparent 60%),
             radial-gradient(90% 70% at 78% 88%,rgba(6,18,30,.55),transparent 70%),
             linear-gradient(rgba(6,16,28,.10) 0%,rgba(4,12,22,.30) 55%,rgba(3,10,18,.72) 100%)}

.rh-hero{position:absolute;left:clamp(-40px,2vw,90px);bottom:0;
  height:min(84vh,860px);width:auto;pointer-events:none;
  filter:drop-shadow(0 0 40px rgba(0,0,0,.5));
  animation:rhRise 1.4s cubic-bezier(.16,.8,.28,1) both}
@keyframes rhRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---- wordmark, top right ----------------------------------------------
   YU sits heavier than GOU, so the whole lockup folds down to the left
   and keeps very slowly settling, the way a hung sign never quite stops. */
.rh-logo{position:absolute;top:clamp(18px,4vh,46px);right:clamp(18px,4vw,64px);
  display:flex;flex-direction:column;align-items:flex-end;text-align:right;
  pointer-events:none;
  animation:rhLogoIn 1.5s cubic-bezier(.16,.9,.3,1) both}
@keyframes rhLogoIn{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}

/* light sweeping across the lockup every few seconds — the one loud beat */
.rh-logo::after{content:"";position:absolute;inset:-20% -60%;pointer-events:none;
  background:linear-gradient(104deg,transparent 42%,rgba(255,244,220,.30) 49%,
             rgba(255,255,255,.55) 51%,rgba(255,244,220,.30) 53%,transparent 60%);
  mix-blend-mode:screen;transform:translateX(-130%);
  animation:rhGlint 7.5s cubic-bezier(.4,0,.2,1) 2.2s infinite}
@keyframes rhGlint{0%{transform:translateX(-130%)}22%,100%{transform:translateX(130%)}}

.rh-mark{width:clamp(48px,6.4vw,82px);height:auto;image-rendering:pixelated;
  margin-bottom:6px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.5));
  animation:rhBob 5.6s ease-in-out infinite}
@keyframes rhBob{0%,100%{transform:translateY(0) rotate(-2deg)}
                 50%{transform:translateY(-3px) rotate(2deg)}}

.rh-sub{font-size:clamp(8px,1vw,11px);letter-spacing:5px;color:#e8d3b4;
  text-shadow:0 2px 0 rgba(0,0,0,.6);margin-bottom:6px;margin-right:6px;
  animation:rhJit 5.1s steps(1,end) infinite}

/* The lockup: one straight line, no tilt.
   The shine is TWO stacked backgrounds clipped to the glyphs — a flat gold
   base that is always there, and a narrow highlight band that travels over
   it. Both layers are sized in `em`, not `%`, and that is the whole trick:
   a percentage band is measured against each element's own box, so YU
   (an inline-block, narrow) swept at a different rate than HOOK (measured
   against the full-width block) and you could see the seam where the two
   boxes met. In em the band is the same physical width everywhere, and
   because YU's left edge is the lockup's left edge the two stay in
   phase — one unbroken sweep across "YUGOU".
   inline-block keeps the box hugging the glyphs so the highlight never
   appears to slide in from empty space. Glow rides a drop-shadow filter
   because text-shadow can't survive background-clip:text. */
.rh-name{display:inline-block;line-height:1;white-space:nowrap;font-weight:700;
  font-size:clamp(26px,5.2vw,72px);letter-spacing:1px;transform:none;
  background-image:
    linear-gradient(100deg,transparent 0%,rgba(255,252,242,.0) 18%,
      rgba(255,253,247,.95) 50%,rgba(255,250,236,.0) 82%,transparent 100%),
    linear-gradient(#f2cf9c,#f2cf9c);
  background-size:3.4em 100%,100% 100%;
  background-repeat:no-repeat,no-repeat;
  background-position:-4em 0,0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,178,110,.55))
         drop-shadow(0 0 44px rgba(255,140,80,.32))
         drop-shadow(0 5px 0 rgba(0,0,0,.55));
  animation:rhShine 6.5s ease-in-out infinite}
/* only the band moves; the gold base stays pinned */
@keyframes rhShine{0%{background-position:-4em 0,0 0}
  100%{background-position:9.5em 0,0 0}}

/* Both halves sit gold. YU carries a second copy of itself in a ::before,
   same glyphs, mint gradient, and that copy fades up and back down on a slow
   13s cycle — two shine passes per tint — so the word drifts into Lincoln
   green and returns. Gradients can't be keyframed, so this is opacity on a
   stacked layer rather than an animated colour. */
/* Same two-layer geometry as the parent, same em sizes, same keyframes —
   that identity is what keeps the band continuous across the word break. */
.rh-logo .rh-r{position:relative;display:inline-block;font-style:normal;
  background-image:
    linear-gradient(100deg,transparent 0%,rgba(255,252,242,.0) 18%,
      rgba(255,253,247,.95) 50%,rgba(255,250,236,.0) 82%,transparent 100%),
    linear-gradient(#f2cf9c,#f2cf9c);
  background-size:3.4em 100%,100% 100%;
  background-repeat:no-repeat,no-repeat;
  background-position:-4em 0,0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  animation:rhShine 6.5s ease-in-out infinite}
.rh-logo .rh-r::before{content:attr(data-w);position:absolute;left:0;top:0;
  background-image:
    linear-gradient(100deg,transparent 0%,rgba(240,255,250,.0) 18%,
      rgba(226,255,244,.95) 50%,rgba(230,255,248,.0) 82%,transparent 100%),
    linear-gradient(#4fbf9e,#4fbf9e);
  background-size:3.4em 100%,100% 100%;
  background-repeat:no-repeat,no-repeat;
  background-position:-4em 0,0 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(120,230,200,.55))
         drop-shadow(0 0 40px rgba(80,210,180,.28));
  opacity:0;
  animation:rhShine 6.5s ease-in-out infinite,
            rhTint 13s ease-in-out infinite}
@keyframes rhTint{0%,52%{opacity:0}66%,80%{opacity:1}94%,100%{opacity:0}}

.rh-tag{margin-top:10px;padding-top:8px;font-size:clamp(8px,.95vw,11px);letter-spacing:4px;
  color:#a9c9d6;border-top:2px solid rgba(200,224,236,.35);text-shadow:0 2px 0 rgba(0,0,0,.6);
  animation:rhJit 6.3s steps(1,end) .8s infinite}

/* ---- idle micro-motion -------------------------------------------------
   One whole pixel, held, never interpolated — the same trick a sprite uses
   to look alive while standing still. Long cycles and mismatched delays so
   nothing on screen ever ticks in unison. */
@keyframes rhJit{0%,88%{transform:translate(0,0)}
  90%{transform:translate(1px,0)}93%{transform:translate(0,1px)}
  96%{transform:translate(-1px,0)}100%{transform:translate(0,0)}}
@keyframes rhJit2{0%,84%{transform:translate(0,0)}
  87%{transform:translate(0,-1px)}91%{transform:translate(1px,0)}
  95%{transform:translate(0,1px)}100%{transform:translate(0,0)}}

/* ---- menu column ---- */
.rh-menu{position:absolute;right:clamp(18px,4vw,64px);min-width:220px;bottom:clamp(78px,16vh,150px);
  display:flex;flex-direction:column;align-items:flex-end;gap:clamp(9px,1.6vh,15px)}
@keyframes rhFade{from{opacity:0}to{opacity:1}}
/* each entry drifts in from the right, one after another */
@keyframes rhItemIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

.rh-item{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:8px;
  font-family:inherit;font-size:clamp(12px,1.35vw,17px);letter-spacing:2px;
  background:none;border:0;padding:2px 2px 2px 30px;margin:0;width:auto;
  color:rgba(228,240,246,.62);text-decoration:none;cursor:pointer;
  text-shadow:0 2px 0 rgba(0,0,0,.65);transition:color .16s,transform .16s,text-shadow .16s;
  animation:rhItemIn .7s cubic-bezier(.16,.9,.3,1) both,
            rhJit2 7.4s steps(1,end) 1.2s infinite}
.rh-menu>*:nth-child(1){animation-delay:.55s,1.1s}
.rh-menu>*:nth-child(2){animation-delay:.66s,2.4s}
.rh-menu>*:nth-child(3){animation-delay:.77s,3.9s}
.rh-menu>*:nth-child(4){animation-delay:.88s,5.2s}
.rh-menu>*:nth-child(5){animation-delay:.99s,6.6s}
.rh-menu>*:nth-child(6){animation-delay:1.1s,8.1s}

.rh-item::before{content:"";position:absolute;left:2px;top:50%;width:18px;height:18px;
  margin-top:-9px;opacity:0;transform:translateX(-6px);transition:opacity .16s,transform .16s;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 3l7 5-7 5z' fill='%23ffd9a8'/><path d='M10 2v12' stroke='%23ffd9a8' stroke-width='2'/></svg>") center/contain no-repeat}
.rh-item:hover,.rh-item:focus-visible,.rh-item.on{color:#fff8ec;outline:none;
  text-shadow:0 0 12px rgba(255,190,130,.6),0 2px 0 rgba(0,0,0,.7)}
.rh-item:hover::before,.rh-item:focus-visible::before,.rh-item.on::before{opacity:1;
  transform:none;animation:rhAim .5s steps(2,end) infinite}
@keyframes rhAim{0%,100%{margin-left:0}50%{margin-left:2px}}
.rh-item.play{font-size:clamp(15px,1.8vw,22px);color:rgba(255,242,224,.9)}
.rh-item:disabled{opacity:.45;cursor:wait}
.rh-item.hide{display:none}

/* rows that hold state rather than an action: same rhythm, no cursor */
.rh-item.static{flex-direction:column;align-items:flex-end;gap:4px;cursor:default;
  padding-left:30px;color:rgba(206,228,238,.7)}
.rh-item.static::before{display:none}
.rh-item.static .dot{width:8px;height:8px;border-radius:50%;background:#54e08a;
  box-shadow:0 0 8px #54e08a;animation:rhPulse 2.6s ease-in-out infinite}
@keyframes rhPulse{0%,100%{opacity:1}50%{opacity:.45}}
.rh-item.static b{font-size:clamp(10px,1.1vw,13px);letter-spacing:1px;color:#d8ecf5}
.rh-item .cc-cap{font-size:8px;letter-spacing:3px;color:rgba(168,200,214,.55)}
.rh-name-row{display:flex;align-items:center;gap:8px}
.rh-mini{font-family:inherit;font-size:9px;letter-spacing:1.5px;color:#9fc3d2;
  background:none;border:0;padding:2px 0;cursor:pointer;text-decoration:underline}
.rh-mini:hover{color:#ffd9a8}
/* This button shares the .rh-name class with the gradient wordmark, which sets
   background-clip:text + transparent fill. Killing the gradient with
   background:none is not enough — the transparent text-fill survives and the
   glyphs render as nothing but their black shadow. Put the fill back. */
button.rh-name{display:inline-flex;align-items:baseline;gap:8px;background:none;border:0;
  padding:0;cursor:pointer;font-family:inherit;color:#fff3e2;font-weight:400;
  font-size:clamp(13px,1.4vw,17px);letter-spacing:1.5px;line-height:1.2;
  -webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;filter:none;
  text-shadow:0 2px 0 rgba(0,0,0,.6);transform:none;animation:none}
button.rh-name b{color:#fff3e2;-webkit-text-fill-color:currentColor}
button.rh-name .pen{font-style:normal;font-size:9px;letter-spacing:2px;color:#ffd9a8;
  -webkit-text-fill-color:currentColor;opacity:.75}
button.rh-name:hover .pen{opacity:1}

/* ---- wallet picker ---- */
.rh-menu>.rh-pick{animation:rhItemIn .22s ease both;animation-delay:0s}
.rh-pick{align-self:flex-end;box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;
  gap:1px;margin:5px 0 2px;padding:6px;min-width:170px;max-width:220px;text-align:left;
  background:rgba(8,14,20,.9);border:2px solid rgba(140,190,210,.3);border-radius:7px;
  box-shadow:0 6px 0 rgba(0,0,0,.45);animation:rhItemIn .22s ease both}
.rh-pick-h{font-size:8px;letter-spacing:2px;color:rgba(168,200,214,.65);
  padding:1px 4px 5px}
.rh-pick-i{display:flex;align-items:center;gap:7px;font-family:inherit;font-size:10.5px;
  letter-spacing:.5px;color:#e4f0f6;background:none;border:0;border-radius:5px;
  padding:6px 6px;cursor:pointer;text-align:left;text-decoration:none;white-space:nowrap;
  transition:background .13s,color .13s}
.rh-pick-i:hover{background:rgba(166,226,118,.16);color:#fff8ec}
.rh-pick-i img{width:17px;height:17px;border-radius:4px;flex:none}
.rh-pick-d{width:17px;height:17px;border-radius:4px;flex:none;
  background:rgba(168,226,120,.28);box-shadow:inset 0 0 0 2px rgba(168,226,120,.5)}
.rh-pick-n{font-size:8px;line-height:1.45;letter-spacing:0;color:rgba(168,200,214,.55);
  padding:6px 4px 1px;border-top:2px solid rgba(140,190,210,.18);margin-top:4px}

/* ---- footer: note + version, bottom right ---- */
.rh-foot{position:absolute;right:clamp(18px,4vw,64px);bottom:clamp(18px,3.4vh,34px);
  display:flex;flex-direction:column;align-items:flex-end;gap:0;text-align:right;
  animation:rhFade 2.2s ease both}
.rh-foot .cc-note{max-width:min(268px,44vw);text-align:right;font-size:10px;
  line-height:1.1;letter-spacing:-.3px;margin:0;color:rgba(206,228,192,.82);animation:rhJit 8.7s steps(1,end) 2.9s infinite}
.rh-ver{font-size:8.5px;letter-spacing:-.2px;line-height:1.1;word-spacing:-1.5px;margin-top:2px;color:rgba(196,218,184,.68);
  text-shadow:0 2px 0 rgba(0,0,0,.6);animation:rhJit2 9.6s steps(1,end) 4.3s infinite}

/* motion is decoration here — respect the OS switch and kill all of it */
@media (prefers-reduced-motion:reduce){
  .rh-logo,.rh-logo::after,.rh-sub,.rh-name,.rh-tag,.rh-item,
  .rh-item.static .dot,.rh-foot,.rh-foot .cc-note,.rh-ver{animation:none!important}
  .rh-name,.rh-logo .rh-r,.rh-logo .rh-r::before{background-position:-99em 0,0 0}
  .rh-logo .rh-r{animation:none!important}
  .rh-logo .rh-r::before{animation:none!important;opacity:0}
}

/* narrow screens: hero shrinks and slides behind, menu keeps the right rail */
@media (max-width:720px){
  .rh-menu{bottom:clamp(70px,14vh,120px)}
}

/* --- bottom-left social row: sits under the tab buttons, same pixel frame
   and press-down feel as .btn so it reads as HUD, not bolted-on chrome.
   Green accents match the hook logo (#acf147 hi / #2d6b03 outline). ----- */
.bl-soc{display:flex;gap:6px;flex-wrap:wrap;max-width:60vw;margin-top:6px}
.soc{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;
  font-family:inherit;font-size:9.5px;letter-spacing:1.2px;text-decoration:none;
  color:rgba(214,240,206,.8);background:rgba(10,22,14,.72);
  border:2px solid #123005;border-radius:7px;
  box-shadow:inset 0 0 0 2px rgba(142,214,92,.18),0 3px 0 rgba(0,0,0,.45);
  transition:transform .08s ease,box-shadow .08s ease,color .15s,background .15s}
.soc:hover{color:#f2ffe4;background:rgba(18,40,18,.9);
  box-shadow:inset 0 0 0 2px rgba(172,241,71,.45),0 3px 0 rgba(0,0,0,.45),0 0 14px rgba(172,241,71,.22)}
.soc.us:hover{color:#d6f77a}
.soc:active{transform:translateY(2px);
  box-shadow:inset 0 0 0 2px rgba(172,241,71,.45),0 1px 0 rgba(0,0,0,.45)}
.soc:focus-visible{outline:2px solid #9bda7c;outline-offset:2px}
.soc b{font-weight:normal}
/* X glyph as a mask so it inherits the link colour on hover */
.soc .xi{width:9px;height:9px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/></svg>") no-repeat center/9px 9px;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/></svg>") no-repeat center/9px 9px}
@media (max-width:720px){.soc{padding:4px 7px;font-size:8.5px;letter-spacing:.8px}
  .soc .xi{width:8px;height:8px}}

/* --- hook button beside the clock: returns to the title screen ---------- */
.hook-home{margin-top:6px;margin-left:auto;display:block;width:42px;height:42px;padding:4px;
  background:rgba(10,22,14,.72);border:2px solid #123005;border-radius:9px;cursor:pointer;
  box-shadow:inset 0 0 0 2px rgba(142,214,92,.18),0 3px 0 rgba(0,0,0,.45);
  transition:transform .08s ease,box-shadow .08s ease,background .15s}
.hook-home img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block}
.hook-home:hover{background:rgba(18,40,18,.9);
  box-shadow:inset 0 0 0 2px rgba(172,241,71,.45),0 3px 0 rgba(0,0,0,.45),0 0 14px rgba(172,241,71,.22)}
.hook-home:active{transform:translateY(2px);
  box-shadow:inset 0 0 0 2px rgba(172,241,71,.45),0 1px 0 rgba(0,0,0,.45)}
.hook-home:focus-visible{outline:2px solid #9bda7c;outline-offset:2px}

/* --- title-screen social row: right-aligned under the menu column ------- */
.rh-soc{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;margin-top:8px}
@media (max-width:720px){.rh-soc{gap:5px}}

/* --- locked leaderboard on the title screen ---------------------------- */
/* Only ever on the outside UI: in play the board is always readable. */
.lb{position:relative}
.lb-lock{display:none}
/* The real culprit: #mainMenu (z-index 40) paints a backdrop-filter blur over
   everything behind it, and the HUD sits at z-index 5 — so the board was being
   blurred by the title overlay, not by any rule of its own. Lift it above. */
body.menu .hud.bl{z-index:41}
/* Locked: the ranks blur, the call to action never does. The blur lives on the
   rows themselves, and the banner is a sibling on top — so it stays pin-sharp
   and stays clickable. Connect and the whole thing unlocks. */
body.menu .lb.locked>.lb-body,
body.menu .lb.locked>.lb-foot,
body.menu .lb.locked>.lb-edit-row{filter:blur(3.4px) saturate(.7);opacity:.75;
  pointer-events:none;user-select:none}
body.menu .lb.locked>.lb-lock{display:flex;position:absolute;left:0;right:0;top:24px;bottom:0;
  align-items:center;justify-content:center;z-index:3;
  border:0;background:none;padding:0;cursor:pointer;font:inherit}
body.menu .lb.locked>.lb-lock b{font-size:10.2px;letter-spacing:1.4px;text-align:center;
  padding:5px 9px;border-radius:6px;background:rgba(8,11,15,.72);
  box-shadow:0 0 0 1px rgba(255,59,70,.45),0 3px 0 rgba(0,0,0,.4);
  transition:box-shadow .15s ease,background .15s ease;
  animation:lbBounce .9s ease-in-out infinite,lbFlip 1s steps(1,end) infinite}
body.menu .lb.locked>.lb-lock:hover b{background:rgba(20,8,10,.9);
  box-shadow:0 0 0 1px rgba(255,59,70,.9),0 0 14px rgba(255,59,70,.5)}
body.menu .lb.locked>.lb-lock:focus-visible b{outline:2px solid #fff;outline-offset:2px}
@keyframes lbBounce{0%,100%{transform:translateY(-4px)}50%{transform:translateY(4px)}}
@keyframes lbFlip{
  0%{color:#ff3b46;text-shadow:0 0 10px rgba(255,59,70,.55)}
  50%{color:#fff;text-shadow:0 0 10px rgba(255,255,255,.5)}}
@media(prefers-reduced-motion:reduce){
  body.menu .lb.locked>.lb-lock b{animation:lbFlip 1.4s steps(1,end) infinite}}

/* picker opened from the locked board: hangs off the board's right edge,
   bottom-aligned with it, same card language as the menu one */
.rh-pick.at-lb{position:fixed;margin:0;z-index:62;
  align-self:auto;min-width:172px;transform-origin:left bottom;
  animation:lbPickIn .16s cubic-bezier(.2,.9,.3,1) both}
@keyframes lbPickIn{from{opacity:0;transform:translateX(-6px) scale(.96)}to{opacity:1;transform:none}}
/* while choosing, stop the banner bouncing — the choice is the focus now */
body.menu .lb.picking>.lb-lock b{animation:lbFlip 1s steps(1,end) infinite}
/* the banner holds still while the cursor is on it — a bouncing click target
   is a coin flip, especially on a trackpad */
body.menu .lb.locked>.lb-lock:hover b,
body.menu .lb.locked>.lb-lock:focus-visible b{animation:lbFlip 1s steps(1,end) infinite}

/* ---- title screen: the board drops into the actual bottom-left corner ----
   In game the .bl column stacks board-over-buttons; on the menu the buttons
   are invisible but still reserve their row, which floated the board up off
   the corner. Drop the row from layout while the menu is up. */
body.menu .hud.bl>.bl-row{display:none}
/* and give it a slow hanging swing — pivot at the top, like it's on a hook */
body.menu .hud.bl>.lb{transform-origin:14px -6px;animation:lbSwing 4.2s ease-in-out infinite}
@keyframes lbSwing{
  0%,100%{transform:rotate(-0.9deg) translateY(0)}
  50%    {transform:rotate(0.9deg)  translateY(-1px)}}
body.menu .hud.bl>.lb:hover{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){
  body.menu .hud.bl>.lb{animation:none}}