:root{color-scheme:light;--ink:#153f42;--sand:#f3ead8;--coral:#ca674c;--mint:#c5e2c7}*{box-sizing:border-box}body{margin:0;background:var(--sand);color:var(--ink);font-family:Arial,sans-serif}main{max-width:1180px;margin:auto;padding:28px 48px}header,footer,.tools,.bar{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font-size:18px;font-weight:800;letter-spacing:3px;text-decoration:none;color:var(--ink)}.brand span{display:block;font-size:8px;letter-spacing:2px;margin-top:6px;opacity:.65}button,select{font:inherit;color:inherit;border:1px solid #153f4230;border-radius:30px;background:transparent;padding:11px 19px;cursor:pointer}button:hover,select:hover{background:#fff8}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #ba543a;outline-offset:4px}button:disabled{opacity:.4;cursor:default}.intro{display:grid;grid-template-columns:1.5fr 1fr;gap:50px;padding:45px 0 28px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.2px}h1{font-family:Georgia,serif;font-size:clamp(44px,5vw,67px);font-weight:400;letter-spacing:-2.5px;line-height:1.02;margin:17px 0}h1 em{font-weight:400;color:var(--coral)}.lede{font-size:14px;line-height:1.7;opacity:.85}.chapter{border-left:1px solid #153f4228;padding:13px 0 0 32px;align-self:center}.chapter>span{font-size:10px;letter-spacing:2px}.chapter h2{font-family:Georgia,serif;font-size:26px;font-weight:400;margin:14px 0}.chapter p{font-size:13px;line-height:1.6;max-width:280px}.chapter label{font-size:10px;display:block;margin:18px 0 7px;text-transform:uppercase;letter-spacing:1px}select{max-width:100%;padding:9px 15px;font-size:12px;background:#fff5}.play{background:#fff5;border:1px solid #153f4218;border-radius:25px;overflow:hidden}.bar{padding:0 24px;min-height:60px}.bar p{font-size:13px;line-height:1.5}.bar>span{font-size:11px;white-space:nowrap;letter-spacing:1px}.shore{position:relative;background:linear-gradient(170deg,#cce4d8,#e0e8cf 40%,#eee0c0 80%);overflow:hidden}.ripple{position:absolute;width:130%;height:150px;left:-10%;border:1px solid #fff8;border-radius:50%;pointer-events:none}.r1{top:-100px}.r2{bottom:-120px}#board{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px 18px;padding:30px 36px}.slot{position:relative;border:2px solid transparent;border-radius:22px;padding:9px 8px 12px;background:#fff9;box-shadow:0 8px 16px #214c3c09;transition:transform .18s,border-color .18s;text-align:center;min-width:0}.slot:hover{transform:translateY(-3px);background:#fffc}.slot.selected{border-color:var(--coral);transform:translateY(-4px);background:#fff}.slot.available{border-color:#52896d;border-style:dashed;background:#f2fff4}.slot.matched{box-shadow:inset 0 -3px #749a7d}.portrait{display:block;height:95px;width:100%;background-image:url('crabs.webp');background-size:300% 200%;border-radius:14px;background-repeat:no-repeat}.crab0{background-position:0 0}.crab1{background-position:50% 0}.crab2{background-position:100% 0}.crab3{background-position:0 100%}.crab4{background-position:50% 100%}.crab5{background-position:100% 100%}.empty{height:95px;display:grid;place-items:center;border:1px dashed #426f6250;border-radius:14px;background:#e7efdb88}.empty span{font-family:Georgia,serif;font-size:46px;color:#739b83;line-height:1}.name{display:block;font-family:Georgia,serif;font-size:19px;margin-top:8px}.fit{display:block;font-size:10px;margin-top:4px;opacity:.7}.destination{border-top:1px solid #153f4220;margin-top:10px;padding-top:8px;display:flex;justify-content:center;gap:6px;align-items:center;font-size:10px;min-height:30px}.mini{display:inline-block;width:28px;height:22px;background-image:url('crabs.webp');background-size:300% 200%;border-radius:50%}.size{position:absolute;top:15px;left:14px;background:#153f42;color:#fff;border-radius:15px;padding:4px 7px;font-size:9px;box-shadow:0 2px 5px #0002}.homecheck{color:#3e7958;font-weight:bold}.tools{padding:17px 24px;justify-content:flex-start;flex-wrap:wrap}.tools button{font-size:12px;padding:9px 14px;background:#fff7}.tools>span{margin-left:auto;font-size:11px;opacity:.7}#win{padding:22px 26px;background:#dce9d4;display:flex;justify-content:space-between;align-items:center;gap:15px}#win[hidden]{display:none}#win h2{font-family:Georgia,serif;font-size:29px;font-weight:400;margin:8px 0}#win p{font-size:12px}#next{background:var(--ink);color:white;white-space:nowrap}footer{padding:23px 0;font-size:10px;letter-spacing:.4px}footer button{font-size:10px;border:0;padding:8px 0}#instructions,#credits{font-size:13px;line-height:1.8;padding:20px 25px;margin:0 0 20px;border:1px solid #153f4225;border-radius:18px;background:#fff7}#instructions h2,#credits h2{font-family:Georgia,serif;font-weight:400}a{color:var(--ink)}@media(max-width:700px){main{padding:22px 18px}.brand{font-size:15px}header>button{font-size:11px;padding:9px 13px}.intro{gap:22px;padding:28px 0 22px;grid-template-columns:1fr}h1{font-size:51px}.chapter{padding:0 0 0 17px}.chapter h2{font-size:23px;margin:9px 0}.chapter p{max-width:none;margin:8px 0}.chapter label{display:none}.chapter select{margin-top:5px}.lede{font-size:13px}#board{grid-template-columns:repeat(2,1fr);padding:22px 18px;gap:14px}.bar{padding:0 18px;gap:8px}.bar p{font-size:12px}.tools{padding:14px;gap:7px}.tools button{padding:9px 11px;font-size:11px}.tools>span{width:100%;text-align:center;margin-top:5px}#win{flex-direction:column;align-items:start}.portrait,.empty{height:100px}.name{font-size:19px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}