*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{background:#071a2a;color:#e7f6ff;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:520px;height:100dvh;margin:auto;display:flex;flex-direction:column;padding: max(22px,env(safe-area-inset-top)) 22px max(14px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 10% 60%,#22596588,transparent 65%),radial-gradient(ellipse at 100% 10%,#345f7b88,transparent 60%),linear-gradient(#13324e,#112d44 60%,#143f4b);box-shadow:0 0 100px #0004}header{display:flex;align-items:center;justify-content:space-between;gap:8px}h1{font-size:25px;font-weight:450;letter-spacing:-1px;margin:6px 0 22px}.eyebrow{font-size:11px;letter-spacing:2px;color:#a8cfdb}button{font:inherit;cursor:pointer;color:inherit;border:1px solid #bce3ed35;background:#c4eaf00a;border-radius:24px;padding:10px 14px;font-size:14px;touch-action:manipulation}button:hover{background:#c4eaf01c}button:focus-visible{outline:2px solid #b5eff5;outline-offset:4px}button:disabled{opacity:.4}header button{font-size:12px;margin-top:-10px}.status{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1px;color:#b2d4df}.track{height:2px;background:#a0d9e21c;margin-top:12px}.track div{height:100%;width:0;background:#b9eee2;transition:width .4s}#pond{position:relative;flex:1;min-height:0;margin:8px -14px;isolation:isolate}canvas{width:100%;height:100%;display:block;touch-action:none}#overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:radial-gradient(ellipse,#16394de8, #15394b99 65%,transparent);padding:20px}#overlay.hidden{display:none}h2{font-size:34px;font-weight:400;letter-spacing:-1.2px;line-height:1.15;margin:18px 0}#description{font-size:16px;line-height:1.8;color:#c4dce4;margin:0 0 28px}#start{background:#d2eee8;color:#143c45;min-width:210px;padding:16px 22px;border:0;display:flex;justify-content:space-between;gap:22px}footer{text-align:center}footer p{font-size:14px;color:#b5d3dc;margin:4px 0 12px}footer div{display:flex;justify-content:center;gap:10px}footer button{font-size:12px;border:0;padding:7px 14px;color:#9fc5cf}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-height:640px){main{padding-top:12px}h1{margin-bottom:12px;font-size:22px}footer p{margin-bottom:4px}}
.scoreboard{display:flex;justify-content:space-between;margin-top:12px;font-size:14px;color:#b5d3dc}.scoreboard strong{color:#effaff;font-weight:500;font-variant-numeric:tabular-nums;margin-left:8px}#overlay{overflow-y:auto;justify-content:safe center}#musicSetup{width:100%;max-width:300px;margin:0 0 20px}#musicSetup[hidden],#results[hidden]{display:none}.music-pick{position:relative;display:block;padding:11px;border:1px solid #bce3ed50;border-radius:15px;font-size:14px;cursor:pointer}.music-pick input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}.music-pick:focus-within{outline:2px solid #b5eff5}#musicName{font-size:12px;color:#b5d3dc;overflow-wrap:anywhere;margin:8px 0}.music-controls{display:flex;gap:8px;align-items:center;font-size:12px}.music-controls input{min-width:0;flex:1;accent-color:#b9eee2}.music-controls button{padding:5px;font-size:12px}#results{font-size:16px;line-height:1.7;margin-bottom:18px;color:#d2eee8}#musicStatus{font-size:12px;color:#ffd0d0;text-align:center;margin:0}#musicStatus:empty{display:none}#description{margin-bottom:18px}@media(max-height:720px){#overlay h2{font-size:27px;margin:10px 0}#description{font-size:14px;line-height:1.5}#musicSetup{margin-bottom:12px}#overlay .eyebrow{font-size:10px}}
#tutorialStart{margin-top:12px;font-size:14px;padding:11px 24px}#tutorialStart[hidden]{display:none}

#replay{margin-top:12px}#replay[hidden]{display:none}
/* Generated artwork supplies the detail; only its scale and opacity breathe. */
main{position:relative;isolation:isolate;overflow:hidden;background:#061a30}
#breathingBackdrop{position:absolute;inset:-5%;z-index:-2;pointer-events:none;background:url('breathing-sapphire.png') center/cover no-repeat;opacity:.62;transform:scale(1);animation:background-breath 7.69s ease-in-out infinite;will-change:transform,opacity}
main::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#04152688,transparent 28%,transparent 76%,#041526aa)}
@keyframes background-breath{0%,100%{transform:scale(1);opacity:.58}50%{transform:scale(1.065);opacity:.76}}
#breathingBackdrop.motion-off{animation:none;transform:scale(1.025);opacity:.65;will-change:auto}
@media(prefers-reduced-motion:reduce){#breathingBackdrop{animation:none;transform:scale(1.025);opacity:.65;will-change:auto}}
#overlay{background:radial-gradient(ellipse,#091e32ed,#0b2333c9 65%,transparent)}
footer div{flex-wrap:wrap;gap:4px}#backgroundMotion{min-height:36px}

#arrivalMessage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:0;text-align:center;background:radial-gradient(ellipse at center,#061a30e8 0%,#061a3090 35%,transparent 72%);padding:24px;color:#e0f5ed}
#arrivalMessage h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(28px,7vw,38px);line-height:1.35;letter-spacing:.2px;margin:18px 0 12px;text-shadow:0 2px 16px #041325}
#arrivalMessage p{font-size:15px;line-height:1.7;color:#bdd9d7;margin:0 0 20px}.arrival-rule{height:1px;width:82px;background:linear-gradient(90deg,transparent,#b5e5d9aa,transparent)}

#stackSetup{width:100%;max-width:300px;margin:0 0 16px;text-align:left}#stackSetup[hidden]{display:none}#stackSetup label{display:block;font-size:14px;color:#d2eee8;margin-bottom:8px}#stackChoice{width:100%;padding:12px 10px;border-radius:12px;border:1px solid #bce3ed50;background:#102b3e;color:#effaff;font:inherit;font-size:16px}#stackChoice:focus-visible{outline:2px solid #b5eff5;outline-offset:3px}
#customBuilder{color:#e7f6ff;background:linear-gradient(145deg,#123346,#071c30);border:1px solid #8bcfc966;border-radius:24px;width:min(96vw,510px);max-height:92dvh;padding:24px;overflow-y:auto;box-shadow:0 20px 90px #0009}#customBuilder::backdrop{background:#020e20c9;backdrop-filter:blur(6px)}#customBuilder h2{font-size:29px;margin:12px 0}#customBuilder p{font-size:14px;line-height:1.6;color:#bbd9dd}#customBuilder label{display:block;margin-bottom:8px}#builderName{width:100%;font:inherit;font-size:16px;background:#061a2a;color:#edfaff;border:1px solid #9bcfc766;border-radius:12px;padding:12px}.builder-ranks{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.builder-ranks button{padding:10px 0;border-radius:12px}.builder-ranks button[aria-pressed=true]{background:#bde9db;color:#0b3040}.builder-suits{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.builder-suits button{font-size:27px;padding:10px}.red{color:#ffb8c8}#builderGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}#builderGrid button{white-space:pre-line;font-size:14px;line-height:1.5;padding:6px 0;border-radius:10px}#builderGrid .editing{outline:2px solid #c3eed6}#builderNotice{color:#ffd4b3!important}.builder-actions{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.builder-actions button{flex:1;min-width:125px}#builderSave{background:#c4e9df;color:#123143}#editCustomStack{margin-top:8px;font-size:13px}#editCustomStack[hidden],#builderResume[hidden],#builderDuplicate[hidden]{display:none}
#collectionPanel{width:min(94vw,510px);max-height:90dvh;overflow:auto;border:1px solid #96d5ce66;border-radius:24px;background:#0a2337;color:#e7f6ff;padding:22px}#collectionPanel::backdrop{background:#031222ce;backdrop-filter:blur(5px)}.collection-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.collection-heading h2{font-size:27px;margin:10px 0}#collectionPanel p{font-size:14px;line-height:1.6;color:#bdd6df}#collectionTabs{display:flex;gap:10px;margin:18px 0}#collectionTabs [aria-pressed=true]{background:#c1e9df;color:#123447}#collectionItems{display:grid;grid-template-columns:1fr 1fr;gap:12px}.collection-item{padding:10px;border-radius:16px;text-align:left;display:flex;flex-direction:column;gap:9px}.collection-item:disabled{opacity:.65}.collection-item[aria-pressed=true]{border-color:#c6f6de;box-shadow:0 0 0 1px #c6f6de}.collection-item small{font-size:12px;line-height:1.5;color:#c0d3da}.collection-sample{display:block;width:100%;height:140px;border-radius:12px}.collection-sample.backgrounds{background-position:center;background-size:cover}.backgrounds.sample-original{background-image:url('breathing-sapphire.png')}.backgrounds.sample-moonlit{background-image:url('moonlit-background.png')}.backgrounds.sample-aurora{background-image:url('aurora-background.png')}.backgrounds.sample-amber{background-image:url('amber-background.png')}.collection-sample.bubbles{width:95px;height:95px;align-self:center;border-radius:50%;margin:16px 0;border:2px solid #b4eee382;background:radial-gradient(circle at 32% 25%,#c2efef30,#67c5d520 75%,#b7eee84d);display:grid;place-items:center;font-size:30px;color:#effaff}#openCollection{font-size:13px;margin-top:12px;padding:8px 18px}#openCollection[hidden]{display:none}#rewardNotice:empty{display:none}#rewardNotice{font-size:14px;color:#d4f4ce;margin:0 0 10px}#collectionStatus{color:#ffccb0!important}

.collection-sample.bubbles:not(.sample-original){background:none;border:0;position:relative}.collection-sample.bubbles img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.collection-sample.bubbles span{position:relative;z-index:1}

.collection-item{position:relative}.collection-lock{position:absolute;top:16px;right:16px;z-index:2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#071928e6;border:1px solid #bedcde66;font-size:15px;line-height:1;pointer-events:none}

header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;margin-bottom:12px}header .brand{grid-column:1 / -1;margin:0;line-height:0;letter-spacing:normal}header .brand img{display:block;width:100%;height:auto;max-height:132px;object-fit:contain;mix-blend-mode:screen}header button{margin:0;padding:6px 10px}header #groupLabel{font-size:10px;letter-spacing:1.3px}@media(max-height:700px){header .brand img{max-height:85px}header{margin-bottom:6px}}

.secondary-actions{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;max-width:320px;margin-top:12px;flex-shrink:0}.secondary-actions #tutorialStart,.secondary-actions #openCollection{margin:0;min-width:0;flex:1;padding:10px 8px;font-size:13px}.secondary-actions:has(>button[hidden]):not(:has(>button:not([hidden]))){display:none}

header #groupLabel[hidden]{display:none}.scoreboard{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px}.scoreboard>span:last-child{text-align:right}.scoreboard>span{min-width:0;overflow-wrap:anywhere}.scoreboard #sound{font-size:11px;padding:6px 9px;white-space:nowrap}.scoreboard strong{margin-left:4px}@media(max-width:360px){.scoreboard{font-size:12px;gap:5px}.scoreboard #sound{padding:6px}}

.scoreboard #sound{display:grid;place-items:center;min-width:40px;min-height:40px;padding:8px}#sound[aria-pressed=false] .sound-waves,#sound[aria-pressed=true] .sound-slash{display:none}

/* Prevent mobile long-press selection on the play surface. */
main{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}input,textarea,[contenteditable=true]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}#canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* Sapphire menu tones echo the Memory Tide wordmark. */
#overlay{background:radial-gradient(ellipse at 50% 35%,#163d80f2 0%,#0b2459ed 55%,#061431df 100%)}#overlay #description{color:#c8daf4}#overlay #start{background:#d5e7ff;color:#102c62}#overlay .music-pick,#overlay .secondary-actions button{border-color:#93b9f466}#overlay .music-controls,#overlay #musicName{color:#b9cfef}