*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#0a3a40;color:#fff4dc;font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold",system-ui,sans-serif;overscroll-behavior:none}
body{display:flex;justify-content:center}
main{width:min(100vw,500px);height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto;position:relative;overflow:hidden;
 padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
 background:linear-gradient(#063f45e0,#04626a40 40%,#043a44f2 82%),url('assets/lagoon.jpg') center/cover}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px 2px}
.title{text-align:center}.title h1{font:600 22px/1.1 Georgia,serif;margin:0;color:#ffe9b8}
.title small{font-size:11px;letter-spacing:1.5px;color:#bfe3d2;text-transform:uppercase}
.round{width:38px;height:38px;border-radius:50%;background:#ffffff1f;font-size:18px;flex-shrink:0}
.progress-row{display:flex;align-items:center;gap:10px;padding:6px 18px 0}
.progress{flex:1;height:8px;background:#0d3a40;border-radius:9px;overflow:hidden;box-shadow:inset 0 1px 2px #0006}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffd37a,#ff9f8f);border-radius:9px;transition:width .2s}
#count{font-size:12px;color:#ffe7a6;min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
.river-wrap{position:relative;min-height:0}
canvas{display:block;width:100%;height:100%;object-fit:contain}
.coach{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);background:#fff3d2;color:#1f4547;border-radius:16px;padding:9px 14px;font-size:14px;font-weight:600;
 box-shadow:0 6px 24px #0006;white-space:nowrap;animation:bob 1.6s ease-in-out infinite;pointer-events:none}
.coach::after{content:'';position:absolute;left:50%;bottom:-8px;margin-left:-8px;border:8px solid transparent;border-bottom:0;border-top-color:#fff3d2}
@keyframes bob{50%{transform:translate(-50%,-4px)}}
#bays{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:4px 12px 8px}
.bay{height:50px;border:1.5px dashed #bde7d350;background:#0b454aa8;border-radius:13px;display:flex;align-items:center;justify-content:center;gap:5px;color:#a9cfc0;font-size:11px}
.bay.active{border:2px solid var(--color);background:#0f3a40e6}
.bay.waiting{animation:wait 1.2s ease-in-out infinite}
@keyframes wait{50%{box-shadow:0 0 14px #ffd77a80}}
.bay b{font-size:20px;color:#fff7e4;font-variant-numeric:tabular-nums}
.bay svg,.send svg,.preview svg{flex-shrink:0}
#queues{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 12px}
.lane{display:flex;flex-direction:column;justify-content:flex-end;gap:5px;min-width:0}
.preview{display:flex;justify-content:center;gap:4px;height:24px;align-items:center}
.preview span{display:flex;align-items:center;gap:2px;border-radius:8px;background:var(--color);color:#173e43;font-size:12px;font-weight:800;padding:2px 5px;box-shadow:0 2px 0 #063e44}
.preview span+span{opacity:.6;transform:scale(.85)}
.send{height:84px;width:100%;border-radius:18px;border:2px solid #ffffff70;background:linear-gradient(#ffffff30,#0000 60%),var(--color);box-shadow:0 5px 0 #06333b;position:relative;overflow:visible}
.send:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 #06333b}
.send:disabled{opacity:.45}
.send img{height:64px;position:absolute;left:50%;transform:translateX(-50%);top:-8px;filter:drop-shadow(0 3px 2px #0004);pointer-events:none}
.send .num{position:absolute;right:5px;bottom:5px;background:#173e43;border:2px solid #ffffff70;border-radius:14px;min-width:34px;padding:1px 6px;font-size:21px;font-weight:800}
.send .glyph{position:absolute;left:6px;bottom:7px}
.send.bump{animation:bump .25s}
@keyframes bump{40%{transform:scale(.94)}}
.empty-queue{height:84px;border:1.5px dashed #ffffff30;border-radius:18px;display:grid;place-items:center;color:#9fcbbb;font-size:20px}
footer{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 12px 10px}
.text-button{background:#ffffff14;border-radius:14px;padding:7px 13px;font-size:13px;color:#fff0b5}
.text-button:disabled{opacity:.3}
dialog{border:0;background:#fff3d6;color:#244448;border-radius:26px;text-align:center;padding:24px 24px 18px;width:min(88vw,340px);box-shadow:0 20px 80px #0006}
dialog::backdrop{background:#062a3299}
dialog h2{font:600 26px Georgia,serif;margin:6px 0 8px}dialog p{font-size:15px;line-height:1.5;margin:0 0 16px}
#result-art img{height:120px}
.primary{padding:13px 20px;border-radius:18px;background:#187c70;color:#fff5dc;font-weight:700;width:100%;font-size:16px}
.secondary{background:transparent;color:#356360;padding:12px;font-size:14px}
button[hidden],.empty-queue[hidden]{display:none}
#boot-error{position:absolute;inset:140px 20px auto;background:#fff1ce;color:#244448;padding:20px;border-radius:15px;z-index:20}
#boot-error[hidden]{display:none}
@media(max-height:700px){.send{height:70px}.send .food{width:34px;height:34px;top:4px}.send img{height:52px}.empty-queue{height:70px}.bay{height:42px}}
@media(prefers-reduced-motion:reduce){.coach,.bay.waiting{animation:none}}
.bay.turtle{border-color:#7ccfa4aa;background:#123f3ccc}
.bay.turtle.active{background:#16463fe6}
.turtle-call{background:#2f7a63;margin-bottom:8px}
.helpers{display:flex;gap:7px}
.helper{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;padding:0;font-size:10px;color:#e8f6ee;position:relative}
.helper img{width:40px;height:40px;border-radius:11px;box-shadow:0 0 0 2px #ffe7a6,0 3px 8px #0006;transition:transform .15s}
.helper:not(:disabled):active img{transform:scale(.9)}
.helper.idle img{box-shadow:0 0 0 1.5px #ffffff40,0 3px 8px #0006;filter:saturate(.6) brightness(.85)}
.helper:disabled img{box-shadow:none;filter:grayscale(.8) brightness(.6)}
.helper:disabled span{opacity:.5}
.helper.used::after{content:'✓';position:absolute;top:-4px;right:-4px;background:#2f7a63;color:#fff;border-radius:50%;width:16px;height:16px;font-size:10px;line-height:16px;text-align:center}
.helper.picking img{box-shadow:0 0 0 3px #84c96a,0 0 16px #84c96a;animation:pick .8s ease-in-out infinite}
@keyframes pick{50%{transform:scale(1.08)}}
.send.swap-pick{outline:3px dashed #84c96a;outline-offset:3px}
.dragon-call{background:#7c5bb3;margin-bottom:8px}.sloth-call{background:#2c4f78;margin-bottom:8px}
#speed{padding:7px 10px}
#bays{gap:6px}
.bay{flex-direction:column;gap:0;line-height:1.05}
.bay small{font-size:9px;color:#cfe7dc;opacity:.85}
.bay.active{flex-direction:row;gap:4px;flex-wrap:wrap;align-content:center}
.bay.active small{width:100%;text-align:center}
.bay.parked{border-style:dashed;cursor:pointer}
@keyframes ready{50%{box-shadow:0 0 0 3px var(--color),0 0 18px var(--color)}}
#bays.tight .bay:not(.active){box-shadow:0 0 0 2px #ff9f8f,0 0 14px #ff9f8f99;animation:tight .9s ease-in-out infinite}
@keyframes tight{50%{box-shadow:0 0 0 2px #ff9f8f,0 0 4px #ff9f8f44}}
.send .food{position:absolute;left:50%;top:5px;width:44px;height:44px;transform:translateX(-50%);background:url('assets/food.png') 0 0/400% 200% no-repeat;filter:drop-shadow(0 2px 2px #0005);pointer-events:none}
.helper.locked img{filter:grayscale(1) brightness(.5)}
#stars{color:#ffd37a;font-size:13px;letter-spacing:1px}
/* v9 lane button: food icon, "eats N" underneath, count as a corner bubble */
.send .glyph{display:none}
.send .num{right:-6px;top:-9px;bottom:auto;font-size:18px;min-width:30px;padding:0 6px;box-shadow:0 2px 4px #0006}
.send .food{top:7px;width:46px;height:46px}
@media(max-height:700px){.send .food{width:36px;height:36px;top:5px}}
.mini{display:inline-block;background:url('assets/food.png') 0 0/400% 200% no-repeat;vertical-align:middle;flex-shrink:0}


.send{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#queues,#queues *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}