/* ═══════════════════════════════════════════════════════════════
SeaStash — design system
"Your money is an ocean."
Depth palettes shift as the child levels up: the whole app
literally gets deeper, calmer and more bioluminescent.
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* iOS zooms the whole page on a double-tap. On a kid's app that means a
fast second tap on any control leaves everything enlarged and, with a
fixed overlay open, the close button can end up outside the visual
viewport entirely. 'manipulation' keeps taps and scrolling but drops
double-tap zoom. Pinch-to-zoom is deliberately left working. */
button, a, .chip, .chip-btn, .foot-link, .age-bub, summary,
input[type="button"], input[type="submit"]{ touch-action: manipulation; }
/* no double-tap-to-zoom anywhere in the app itself */
html, body{ touch-action: manipulation; }
[hidden]{ display: none !important; }
:root{
/* type */
--disp: "Fredoka", system-ui, sans-serif;
--body: "Nunito", system-ui, sans-serif;
/* depth 1 · Rockpool (default) */
--sea-hi: #35c7e8;
--sea-mid: #128db8;
--sea-lo: #075e86;
--sea-deep: #033a58;
--glow: #9ff1ff;
--sand: #ffe9b8;
--coral: #ff7e67;
--coral-2: #ffb25e;
--leaf: #57e6a8;
--ink: #06283d;
--card: rgba(255,255,255,.86);
--card-brd: rgba(255,255,255,.55);
--wash: rgba(230,251,255,.92);
--txt: #0b3752;
--txt-dim: #4a7a94;
--btn-add: linear-gradient(160deg,#37d67f,#0fae62);
--btn-spd: linear-gradient(160deg,#ffb25e,#ff7e67);
--ring: rgba(159,241,255,.9);
--shadow: 0 10px 30px -8px rgba(3,40,64,.45);
--r-lg: 28px; --r-md: 20px; --r-sm: 14px;
}
body[data-depth="2"]{ /* Lagoon */
--sea-hi:#2eb4e4; --sea-mid:#0f7cb4; --sea-lo:#085184; --sea-deep:#03305c;
--glow:#8be9ff; --coral:#ff7d8a; --coral-2:#ffab5e; --leaf:#4fe0b0;
}
body[data-depth="3"]{ /* Coral Reef */
--sea-hi:#1f9fd8; --sea-mid:#0d64ad; --sea-lo:#0a3f88; --sea-deep:#062560;
--glow:#7fdcff; --coral:#ff6fa5; --coral-2:#ffa94d; --leaf:#43dbb9;
}
body[data-depth="4"]{ /* Open Sea */
--sea-hi:#1786c4; --sea-mid:#0b4f9e; --sea-lo:#092f7e; --sea-deep:#051a55;
--glow:#74ceff; --coral:#c583ff; --coral-2:#ff8fb1; --leaf:#3bd6c4;
}
body[data-depth="5"]{ /* Twilight */
--sea-hi:#1268a8; --sea-mid:#0a3c8c; --sea-lo:#0a2270; --sea-deep:#040f45;
--glow:#6cc0ff; --coral:#b07bff; --coral-2:#ff7bd5; --leaf:#35ccd0;
}
body[data-depth="6"]{ /* Abyss */
--sea-hi:#0c4d8e; --sea-mid:#082a78; --sea-lo:#081861; --sea-deep:#02071f;
--glow:#65e8ff; --coral:#9d6bff; --coral-2:#ff6bcb; --leaf:#2fe0d8;
}
html{ -webkit-text-size-adjust:100%; }
body{
font-family: var(--body);
color: var(--txt);
background: var(--sea-deep);
min-height: 100dvh;
overflow-x: hidden;
transition: background 1.2s ease;
}
body.booting #app, body.booting .onb{ opacity: 0; }
/* ── icon artwork ─────────────────────────────────────────
Custom SVG icons standing in for stock emoji. Sized in em so
they inherit the rhythm of whatever text they sit beside. */
.ico-img{
width: 1.35em; height: 1.35em;
object-fit: contain;
display: inline-block; vertical-align: -0.3em;
user-select: none; -webkit-user-drag: none;
filter: drop-shadow(0 1px 2px rgba(0,20,40,.28));
}
.hist-ico .ico-img{ width: 26px; height: 26px; vertical-align: middle; }
#soundChip .ico-img{ width: 21px; height: 21px; vertical-align: middle; }
.sheet h3 .ico-img{ width: 1.25em; height: 1.25em; }
.gu-section h4 .ico-img{ width: 1.3em; height: 1.3em; }
.acc-kind .ico-img{
width: 19px; height: 19px; vertical-align: -0.4em;
/* the vault art is dark — a soft light disc keeps it readable on the blue card */
background: rgba(255,255,255,.94); border-radius: 50%; padding: 1px;
}
/* big faded artwork watermark in the corner of an account card */
.acc-wave .ico-img.acc-art{
width: 84px; height: 84px;
filter: none; vertical-align: baseline;
}
.acc-card .acc-wave:has(.acc-art){ opacity: .3; right: -10px; bottom: -12px; }
.mini-btn .ico-img, .foot-link .ico-img{ width: 1.4em; height: 1.4em; }
/* the book is portrait, so it letterboxes inside a square box —
a little extra size makes it read the same weight as its neighbours */
.ico-img.ico-guide{ width: 1.62em; height: 1.62em; vertical-align: -0.42em; }
/* the wave is a detailed piece of artwork — at a normal inline size it
collapses into a smudge, so it runs a little larger than its siblings */
.ico-img.ico-waves{
width: 1.75em; height: 1.75em;
vertical-align: -0.52em;
filter: none;
}
/* ── scene layers ─────────────────────────────────────────── */
#gl, #fx{
position: fixed; inset: 0; width: 100%; height: 100%;
z-index: 0; pointer-events: none;
}
#fx{ z-index: 2; }
#rays{ position: fixed; inset: -10% -20%; z-index: 1; pointer-events: none; overflow: hidden; opacity:.5; }
#rays i{
position:absolute; top:-30%; height:160%; width: 18vw; left: 8vw;
background: linear-gradient(180deg, var(--glow), transparent 70%);
opacity:.12; transform: rotate(14deg);
filter: blur(18px);
animation: raysway 11s ease-in-out infinite alternate;
}
#rays i:nth-child(2){ left: 38vw; width: 10vw; animation-duration: 9s; opacity:.09; }
#rays i:nth-child(3){ left: 64vw; width: 22vw; animation-duration: 14s; opacity:.10; }
@keyframes raysway{ from{ transform: rotate(11deg) translateX(-4vw);} to{ transform: rotate(17deg) translateX(5vw);} }
/* ── layout ───────────────────────────────────────────────── */
#app{
position: relative; z-index: 3;
max-width: 560px; margin: 0 auto;
/* top inset keeps the bar clear of the notch when installed to the home screen */
padding: calc(12px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom));
display: flex; flex-direction: column; gap: 18px;
}
/* wide screens: sheets become centered modals instead of bottom drawers */
@media(min-width: 700px){
.sheet-wrap{ align-items: center; padding: 30px 20px; }
.sheet{
border-radius: 26px;
max-height: 86dvh;
transform: translateY(46px) scale(.97);
opacity: 0;
transition: transform .32s cubic-bezier(.22,1.2,.36,1), opacity .28s;
}
.sheet-wrap.open .sheet{ transform: none; opacity: 1; }
.sheet::before{ display: none; }
}
/* The ocean stays ONE column at every width. A two-column grid used to open at
1000px, which caught the iPad — 1032pt in portrait — and it read as two
unrelated panels rather than one page: the pool no longer sat above the wishes
it feeds, and the reef lost the sand line running under it. The layout is
designed as a single scroll and stays that way; #app's 560px cap centres it on
anything wider. (The 700px rule that turns sheets into centred modals is a
separate thing and is correct.)
Do not reintroduce a wide grid without checking a 13-inch iPad in BOTH
orientations — landscape is 1376pt, so any breakpoint below that catches it too. */
/* ── topbar ───────────────────────────────────────────────── */
.topbar{
display:flex; align-items:center; justify-content:space-between;
padding: 8px 2px 0;
}
.brand{ display:flex; align-items:center; gap:9px; user-select:none; cursor:pointer; }
.brand-drop{ width:34px; height:23px; filter: drop-shadow(0 3px 6px rgba(0,30,60,.4)); animation: bob 3.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0) rotate(-3deg);} 50%{ transform: translateY(-4px) rotate(3deg);} }
.brand-word{
font-family: var(--disp); font-weight: 500; font-size: 1.35rem; letter-spacing:.01em;
color:#eafcff; text-shadow: 0 2px 12px rgba(0,40,80,.5);
}
.brand-word b{ font-weight: 700; color: var(--glow); }
.top-right{ display:flex; gap:8px; }
.chip-btn{
font-family: var(--disp); font-size:.86rem; font-weight:600;
border:0; cursor:pointer; color:#eafcff;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.22);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
padding: 7px 12px; border-radius: 999px;
display:flex; align-items:center; gap:6px;
transition: transform .15s, background .3s;
}
.chip-btn:active{ transform: scale(.92); }
.streak-chip.hot{ background: linear-gradient(140deg, rgba(255,146,84,.45), rgba(255,94,120,.35)); border-color: rgba(255,180,120,.55); }
/* depth bar — your place in the ocean */
.depth-bar{
display:flex; align-items:center; gap:10px; width:100%;
border:1px solid rgba(255,255,255,.22); border-radius:999px;
background: rgba(255,255,255,.12);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
padding: 8px 14px; cursor:pointer;
color:#eafcff; font-family:var(--disp); font-weight:600; font-size:.9rem;
transition: transform .15s;
}
.depth-bar:active{ transform: scale(.98); }
.db-name{ white-space:nowrap; }
.db-track{
flex:1; height:8px; border-radius:999px; background:rgba(0,20,40,.45); overflow:hidden;
}
.db-track i{
display:block; height:100%; border-radius:999px;
background: linear-gradient(90deg, var(--leaf), var(--glow));
box-shadow: 0 0 10px var(--glow);
transition: width .9s cubic-bezier(.22,1.2,.36,1);
min-width: 8px;
}
.db-xp{ font-family:var(--body); font-weight:800; font-size:.74rem; opacity:.8; white-space:nowrap; }
/* ── demo banner ──────────────────────────────────────────── */
.demo-banner{
z-index:3; display:flex; align-items:center; justify-content:space-between; gap:10px;
background: rgba(255,224,130,.92); color:#5c3d00;
border-radius: var(--r-sm); padding: 9px 12px; font-size:.9rem; font-weight:700;
box-shadow: var(--shadow);
}
.demo-banner button{
border:0; background:#5c3d00; color:#ffe9b8; font-weight:800; font-family:var(--body);
padding:6px 12px; border-radius:999px; cursor:pointer; white-space:nowrap;
}
/* ── pool card ────────────────────────────────────────────── */
.pool-card{
position: relative; overflow: hidden;
border-radius: var(--r-lg);
background:
radial-gradient(120% 90% at 50% -20%, rgba(255,255,255,.38), rgba(255,255,255,.06) 60%),
linear-gradient(175deg, color-mix(in srgb, var(--sea-hi) 82%, white 5%), var(--sea-mid) 55%, var(--sea-lo));
border: 1.5px solid rgba(255,255,255,.35);
box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.5);
padding: 22px 20px 20px;
color: #f2fdff;
}
#poolFx{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.pool-top{ position:relative; text-align:center; }
.pool-label{
font-family: var(--disp); font-weight:600; font-size: 1.02rem; letter-spacing:.06em;
text-transform: uppercase; opacity:.85;
}
.pool-balance{
font-family: var(--disp); font-weight:700;
font-size: clamp(2.6rem, 11vw, 3.6rem);
line-height:1.12; letter-spacing:.01em;
text-shadow: 0 3px 18px rgba(0,50,90,.45);
font-variant-numeric: tabular-nums;
}
.pool-sub{ font-size:.92rem; font-weight:700; opacity:.8; }
.pool-actions{ position:relative; display:flex; gap:12px; margin-top:18px; }
.big-btn{
flex:1; border:0; cursor:pointer;
font-family: var(--disp); font-weight:600; font-size:1.12rem; color:#fff;
padding: 15px 10px; border-radius: 20px;
display:flex; align-items:center; justify-content:center; gap:9px;
box-shadow: 0 6px 0 rgba(0,40,60,.25), 0 12px 24px -6px rgba(0,30,60,.35), inset 0 1.5px 0 rgba(255,255,255,.4);
transition: transform .12s, box-shadow .12s, filter .2s;
touch-action: manipulation;
}
.big-btn.add{ background: var(--btn-add); }
.big-btn.spend{ background: var(--btn-spd); }
.big-btn:active{ transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,40,60,.25), 0 6px 12px -6px rgba(0,30,60,.35), inset 0 1.5px 0 rgba(255,255,255,.4); }
.big-btn .ico{ font-size:1.25rem; }
/* 3D spinning coin on the Add button */
.coin3d{ width:26px; height:26px; position:relative; transform-style:preserve-3d; animation: coinspin 3.2s linear infinite; }
.coin3d .face{
position:absolute; inset:0; border-radius:50%;
display:grid; place-items:center; font-style:normal; font-weight:700; font-size:.9rem;
background: radial-gradient(circle at 32% 28%, #ffe89b, #f7c437 58%, #cf9718);
color:#8a5f00; border:2px solid #cf9718;
backface-visibility:hidden;
}
.coin3d .f2{ transform: rotateY(180deg); }
@keyframes coinspin{ from{ transform: rotateY(0);} to{ transform: rotateY(360deg);} }
/* ── count-your-treasure ──────────────────────────────────── */
.count-btn{
position:relative; width:100%; margin-top:12px; cursor:pointer;
border:1.5px dashed rgba(255,255,255,.45); border-radius:16px;
background:rgba(255,255,255,.14); color:#f2fdff;
font-family:var(--body); font-weight:800; font-size:.92rem;
padding:11px 10px; transition: background .2s, transform .12s;
}
.count-btn:active{ transform:scale(.98); background:rgba(255,255,255,.22); }
.count-banner{
z-index:3; display:flex; align-items:center; justify-content:space-between; gap:10px;
background: linear-gradient(140deg,#fff0c2,#ffd98a); color:#6b4a00;
border-radius: var(--r-sm); padding: 10px 12px; font-size:.9rem; font-weight:800;
box-shadow: var(--shadow);
}
.count-banner .cb-actions{ display:flex; gap:6px; flex-shrink:0; }
.count-banner button{
border:0; cursor:pointer; background:#6b4a00; color:#ffeec2; font-weight:800;
font-family:var(--body); padding:6px 12px; border-radius:999px; white-space:nowrap;
}
.count-banner button.ghost{ background:rgba(107,74,0,.15); color:#6b4a00; padding:6px 10px; }
.count-total{
text-align:center; font-family:var(--disp); font-weight:700;
font-size: clamp(2.2rem, 9vw, 3rem); color:var(--ink);
background:#fff; border-radius:var(--r-sm); border:2px solid rgba(30,120,170,.25);
padding:10px; margin-bottom:12px; font-variant-numeric: tabular-nums;
}
.count-coins{ margin-bottom:10px; }
.count-coins .coin-chip{
min-width:62px; font-family:var(--disp); font-weight:600; font-size:1rem;
background: radial-gradient(circle at 32% 28%, #ffe89b, #f7c437 65%, #d9a41c);
color:#7a5300; border:1.5px solid #d9a41c;
box-shadow: 0 3px 0 rgba(150,110,10,.35);
}
.count-coins .coin-chip:active{ transform: translateY(2px) scale(.96); box-shadow: 0 1px 0 rgba(150,110,10,.35); }
.count-tools{ display:flex; gap:8px; justify-content:center; margin-bottom:6px; }
.count-verdict{ border-radius:var(--r-sm); padding:16px; text-align:center; margin:6px 0 4px; }
.count-verdict.match{ background:linear-gradient(140deg,#dcf7e8,#c7f0ff); }
.count-verdict.off{ background:linear-gradient(140deg,#fff1e2,#ffe5ec); }
.cv-big{ font-family:var(--disp); font-weight:700; font-size:1.5rem; color:var(--ink); }
.cv-sub{ font-size:.92rem; font-weight:700; color:var(--txt-dim); margin-top:6px; line-height:1.5; }
.count-hints ul{ padding-left:20px; margin:2px 0 4px; }
.count-hints li{ font-size:.92rem; font-weight:700; color:var(--txt); margin:5px 0; }
/* ── quest card ───────────────────────────────────────────── */
.quest-card{
border-radius: var(--r-md);
background: linear-gradient(120deg, rgba(9,46,84,.72), rgba(9,64,96,.62));
border: 1px solid rgba(140,230,255,.28);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
color:#dff6ff; padding: 14px 16px;
box-shadow: var(--shadow);
}
.quest-head{ display:flex; align-items:center; gap:10px; }
.quest-emoji{ font-size:1.6rem; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.quest-title{ font-family:var(--disp); font-weight:600; font-size:1rem; }
.quest-name{ font-size:.86rem; opacity:.8; font-weight:700; }
.quest-track{ margin-top:10px; height:14px; border-radius:999px; background:rgba(0,20,40,.5); overflow:hidden; position:relative; }
.quest-fill{
height:100%; border-radius:999px;
background: linear-gradient(90deg, var(--leaf), var(--glow));
box-shadow: 0 0 12px var(--glow);
transition: width .8s cubic-bezier(.22,1.4,.36,1);
min-width: 6px;
}
.quest-steps{ margin-top:6px; font-size:.8rem; font-weight:800; opacity:.75; display:flex; justify-content:space-between; }
.quest-done{ display:flex; align-items:center; gap:10px; }
.quest-done .big{ font-size:1.7rem; }
/* ── zones ────────────────────────────────────────────────── */
.zone-title{
display:flex; align-items:baseline; justify-content:space-between; gap:10px;
font-family: var(--disp); font-weight:600; font-size:1.18rem; color:#eafcff;
text-shadow: 0 2px 10px rgba(0,40,70,.5);
margin-bottom: 10px; padding: 0 2px;
}
.zone-title small{ font-size:.82rem; font-weight:700; color: var(--glow); opacity:.9; font-family:var(--body); }
.mini-btn{
font-family: var(--body); font-weight:800; font-size:.82rem;
color:#eafcff; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.22);
padding:6px 12px; border-radius:999px; cursor:pointer;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
transition: transform .12s;
}
.mini-btn:active{ transform: scale(.93); }
/* ── wish cards ───────────────────────────────────────────── */
.wish-grid{ display:grid; gap:14px; }
.wish-card{
position:relative; overflow:hidden;
border-radius: var(--r-md);
background: var(--card);
border: 1.5px solid var(--card-brd);
box-shadow: var(--shadow);
padding: 16px;
display:grid; grid-template-columns: 100px 1fr; gap: 8px 14px; align-items:center;
}
/* a bubble nursery, not a fish tank — round, glassy, and it belongs
underwater in a way a rectangular box never did */
.wish-tank{
position:relative; width:100px; height:100px; border-radius:50%;
background: linear-gradient(180deg, #e8fbff, #bfeffc);
border: 2px solid rgba(120,220,255,.5);
box-shadow: inset 0 -8px 18px -8px rgba(4,80,120,.35),
0 6px 16px -8px rgba(3,60,100,.5);
overflow:hidden;
display:grid; place-items:center;
}
/* the glassy highlight that makes it read as a bubble */
.wish-tank::after{
content:""; position:absolute; z-index:4; pointer-events:none;
left:14%; top:8%; width:34%; height:24%;
background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);
transform: rotate(-18deg);
}
.tank-fill{
position:absolute; left:0; right:0; bottom:0; z-index:1;
background: linear-gradient(180deg, #55cdf0, #1b93cf);
box-shadow: inset 0 4px 10px -3px rgba(255,255,255,.55), inset 0 -8px 14px -8px rgba(4,60,100,.5);
color:#55cdf0;
transition: height 1.1s cubic-bezier(.22,1.2,.36,1);
}
.tank-fill .crest{
position:absolute; top:-9px; left:0; width:200%; height:10px;
color: inherit;
}
.wish-tank .creature-holder{ position:relative; z-index:2; width:74%; filter: drop-shadow(0 3px 4px rgba(0,60,90,.25)); }
.wish-tank .pct{
position:absolute; z-index:5; bottom:4px; left:50%; transform:translateX(-50%);
font-weight:800; font-size:.74rem; color:#046084;
background: rgba(255,255,255,.86); padding:1px 8px; border-radius:999px;
box-shadow:0 1px 3px rgba(4,60,90,.25);
}
.wish-info{ min-width:0; }
.wish-name{ font-family:var(--disp); font-weight:600; font-size:1.12rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wish-nums{ font-size:.9rem; font-weight:800; color:var(--txt-dim); margin-top:2px; font-variant-numeric: tabular-nums; }
.wish-nums b{ color:#0b7d4d; }
.wish-stage-line{ font-size:.82rem; font-weight:700; color:#8b6ac2; margin-top:3px; }
.wish-cta{ margin-top:9px; display:flex; gap:8px; }
.feed-btn{
border:0; cursor:pointer; font-family:var(--disp); font-weight:600; font-size:.95rem;
color:#fff; background: linear-gradient(150deg,#31bef0,#1a76d0);
padding: 9px 16px; border-radius: 14px;
box-shadow: 0 4px 0 rgba(10,60,110,.3), inset 0 1px 0 rgba(255,255,255,.4);
transition: transform .12s, box-shadow .12s;
}
.feed-btn:active{ transform: translateY(3px); box-shadow: 0 1px 0 rgba(10,60,110,.3); }
.wish-menu{
border:0; background:rgba(9,60,90,.08); color:var(--txt-dim); cursor:pointer;
width:38px; border-radius:12px; font-size:1.1rem; font-weight:900;
}
.add-wish{
border:2px dashed rgba(255,255,255,.45); border-radius:var(--r-md);
background: rgba(255,255,255,.1); color:#eafcff;
font-family:var(--disp); font-weight:600; font-size:1rem;
padding: 18px; cursor:pointer; width:100%;
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
transition: background .2s, transform .12s;
}
.add-wish:active{ transform: scale(.98); }
/* ── the pet ──────────────────────────────────────────────── */
.wish-tank .creature-holder{ transition: transform .28s cubic-bezier(.22,1.2,.36,1); }
.creature-holder.hop{ animation: pethop .65s cubic-bezier(.28,1.5,.4,1); }
@keyframes pethop{
0%{ transform: translateY(0) scale(1); }
30%{ transform: translateY(-14px) scale(1.12) rotate(-7deg); }
55%{ transform: translateY(2px) scale(.96) rotate(4deg); }
100%{ transform: translateY(0) scale(1); }
}
.wish-tank.sleepy{ filter: saturate(.75) brightness(.94); }
.wish-forecast{ font-size:.8rem; font-weight:800; color:#0b7d9e; margin-top:3px; }
/* The photo IS the thing being saved for, so it has to be worth having taken.
At 26px it was a speck beside the title and read as "the picture went nowhere". */
.wish-photo{
width:52px; height:52px; object-fit:cover; border-radius:11px;
vertical-align:-16px; margin-right:10px; cursor:pointer;
border:2px solid #fff; box-shadow:0 3px 10px rgba(3,40,64,.32);
}
@media(max-width:380px){ .wish-photo{ width:42px; height:42px; vertical-align:-13px; } }
.photo-prev{ width:100%; max-height:150px; object-fit:cover; border-radius:var(--r-sm); margin-top:8px; }
.photo-big{ width:100%; border-radius:var(--r-md); display:block; }
/* ── pet expressiveness ───────────────────────────────────
Eyes that look, moods that show, tickles that giggle. */
.cr-pupils{ transition: transform .16s ease-out; }
.wish-tank{ touch-action: none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
/* moods */
.wish-tank.excited .creature-holder{ animation: tank-excited 1.1s ease-in-out infinite; }
@keyframes tank-excited{
0%,100%{ margin-top:0; } 30%{ margin-top:-7px; } 55%{ margin-top:1px; }
}
.wish-tank.hungry .creature-holder{ animation: tank-hungry 2.6s ease-in-out infinite; }
@keyframes tank-hungry{
0%,100%{ transform: rotate(0); } 25%{ transform: rotate(-4deg); } 75%{ transform: rotate(4deg); }
}
.tank-thought{
position:absolute; z-index:6; top:4px; right:4px;
border:0; cursor:pointer; padding:2px 7px; border-radius:12px 12px 12px 3px;
background:rgba(255,255,255,.92); font-size:.85rem;
box-shadow:0 2px 8px rgba(4,60,90,.3);
animation: thought-bob 2.4s ease-in-out infinite;
}
@keyframes thought-bob{
0%,100%{ transform: translateY(0) scale(1); }
50%{ transform: translateY(-4px) scale(1.06); }
}
/* poke tricks */
.creature-holder.duck-hide svg{ animation: duck-hide .85s cubic-bezier(.3,1.4,.4,1); }
@keyframes duck-hide{
0%{ transform:none; } 30%{ transform: translateY(24%) scaleY(.45); }
70%{ transform: translateY(24%) scaleY(.45); } 100%{ transform:none; }
}
.creature-holder.puff-up svg{ animation: puff-up .85s cubic-bezier(.3,1.6,.4,1); }
@keyframes puff-up{
0%,100%{ transform: scale(1); } 40%{ transform: scale(1.35); } 70%{ transform: scale(1.28); }
}
.creature-holder.spin-round svg{ animation: spin-round .72s cubic-bezier(.5,.2,.5,.9); }
@keyframes spin-round{ to{ transform: rotate(360deg); } }
.creature-holder.giggling svg{ animation: giggling .9s ease-in-out; }
@keyframes giggling{
0%,100%{ transform: rotate(0) scale(1); }
15%{ transform: rotate(-8deg) scale(1.05,.95); }
35%{ transform: rotate(8deg) scale(.95,1.05); }
55%{ transform: rotate(-7deg) scale(1.05,.95); }
75%{ transform: rotate(6deg) scale(.97,1.03); }
}
/* floating reactions & idle bubbles */
.tank-react{
position:absolute; z-index:7; left:50%; top:38%; pointer-events:none;
font-size:1.15rem;
animation: tank-react 1.05s ease-out forwards;
}
.tank-react.heart{ font-size:.85rem; }
@keyframes tank-react{
0%{ opacity:0; transform: translate(-50%,0) scale(.4); }
20%{ opacity:1; transform: translate(-50%,-10px) scale(1.15); }
100%{ opacity:0; transform: translate(-50%,-44px) scale(1); }
}
.tank-bub{
position:absolute; z-index:5; bottom:34%; width:7px; height:7px; pointer-events:none;
border-radius:50%; border:1.5px solid rgba(255,255,255,.95);
animation: tank-bub 2.2s ease-in forwards;
}
@keyframes tank-bub{
0%{ opacity:0; transform: translateY(0) scale(.6); }
20%{ opacity:.95; }
100%{ opacity:0; transform: translateY(-58px) scale(1.15); }
}
body.perf-low .wish-tank.excited .creature-holder,
body.perf-low .wish-tank.hungry .creature-holder{ animation:none; }
body.perf-low .tank-thought{ animation:none; }
/* ── coin toss: the feeding game ──────────────────────────
A little physics playground: air above the surface line, water
below, sand at the bottom. The coin (.toss-proj) is driven by
JS with transforms only; everything else here is dressing. */
.toss-stage{
position:relative; height:250px; border-radius:var(--r-md); overflow:hidden;
background: linear-gradient(180deg,#e8fbff 0%, #cdf2fe 30%, #8fdcf6 33%, #4fb9e2 60%, #2793c4 100%);
border:2px solid rgba(60,160,200,.3); margin-bottom:10px;
touch-action:none;
}
.toss-sea{
position:absolute; left:0; right:0; bottom:0; top:32%; z-index:5; pointer-events:none;
background: linear-gradient(180deg, rgba(105,200,235,.35), rgba(20,110,160,.42));
}
.toss-surface{
position:absolute; left:0; right:0; top:32%; height:3px; z-index:6; pointer-events:none;
background: linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.4) 30%, rgba(255,255,255,.9) 70%, rgba(255,255,255,.5));
box-shadow:0 1px 6px rgba(255,255,255,.6);
}
.toss-sandbed{
position:absolute; left:-2%; right:-2%; bottom:0; height:26px; z-index:3;
background: linear-gradient(180deg,#ffe9b8,#e6c081);
border-radius:50% 50% 0 0 / 14px 14px 0 0;
}
.toss-pet{
position:absolute; left:0; top:0; width:92px; height:92px; z-index:4;
will-change:transform; pointer-events:none;
}
.toss-pet svg{ width:100%; height:100%; }
.toss-pet.chomp svg{ animation: tosschomp .4s cubic-bezier(.3,1.6,.4,1); }
@keyframes tosschomp{
0%{ transform: scale(1); } 35%{ transform: scale(1.22,.8); }
65%{ transform: scale(.92,1.1); } 100%{ transform: scale(1); }
}
.toss-pet.grew svg{ animation: tossgrew .8s cubic-bezier(.3,1.5,.4,1); }
@keyframes tossgrew{
0%{ transform: scale(.7); filter: brightness(1.6); }
60%{ transform: scale(1.15); }
100%{ transform: scale(1); filter:none; }
}
.toss-pet.finale svg{ animation: tossloop 1.3s cubic-bezier(.45,.2,.55,.8); }
@keyframes tossloop{
0%{ transform: rotate(0) translateY(0); }
50%{ transform: rotate(-180deg) translateY(-34px) scale(1.06); }
100%{ transform: rotate(-360deg) translateY(0); }
}
.toss-launch{
position:absolute; left:14px; bottom:8px; z-index:9; width:62px; height:62px;
cursor:grab; touch-action:none;
}
.toss-launch:active{ cursor:grabbing; }
.toss-launch-coin{
width:56px; height:56px; border-radius:50%;
display:grid; place-items:center;
font-family:var(--body); font-weight:900; font-size:.95rem; color:#7a5300;
background: radial-gradient(circle at 32% 28%, #ffe89b, #f7c437 62%, #d9a41c);
border:2.5px solid #d9a41c;
box-shadow: 0 5px 0 rgba(150,110,10,.4), 0 0 18px rgba(255,220,120,.55), inset 0 2px 0 rgba(255,255,255,.6);
animation: coinwait 2.2s ease-in-out infinite;
}
@keyframes coinwait{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }
.toss-proj{
position:absolute; left:0; top:0; width:42px; height:42px; z-index:8;
will-change:transform; pointer-events:none;
}
.toss-proj i{
display:grid; place-items:center; width:100%; height:100%;
border-radius:50%; font-style:normal;
font-family:var(--body); font-weight:900; font-size:.78rem; color:#7a5300;
background: radial-gradient(circle at 32% 28%, #ffe89b, #f7c437 62%, #d9a41c);
border:2px solid #d9a41c;
box-shadow:0 3px 8px rgba(60,40,0,.3);
}
.toss-ring{
position:absolute; left:0; top:0; width:40px; height:14px; z-index:7; pointer-events:none;
border:2px solid rgba(255,255,255,.9); border-radius:50%;
animation: tossring .65s ease-out forwards;
}
@keyframes tossring{
from{ transform: scale(.4); opacity:.95; }
to{ transform: scale(2.6); opacity:0; }
}
.toss-drop{
position:absolute; left:0; top:0; width:7px; height:7px; z-index:7; pointer-events:none;
border-radius:50%; background:#eafcff;
}
.toss-spark{
position:absolute; left:0; top:0; width:8px; height:8px; z-index:9; pointer-events:none;
background: radial-gradient(circle at 35% 30%, #fff3b8, #f7c437);
border-radius:2px; transform:rotate(20deg);
}
.toss-float{
position:absolute; left:0; top:0; z-index:10; pointer-events:none;
font-family:var(--body); font-weight:900; font-size:1rem; color:#fff;
text-shadow:0 2px 8px rgba(0,60,90,.7);
animation: tossfloat 1.15s ease-out forwards;
}
@keyframes tossfloat{
from{ opacity:0; margin-top:0; } 20%{ opacity:1; }
to{ opacity:0; margin-top:-46px; }
}
.toss-burp{
position:absolute; left:0; top:0; width:22px; height:22px; z-index:9; pointer-events:none;
border-radius:50%; border:2px solid rgba(235,252,255,.95);
background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.5), rgba(255,255,255,.05));
animation: tossburp 1.5s ease-out forwards;
}
.toss-burp::after{
content:"✨"; position:absolute; inset:0; display:grid; place-items:center; font-size:9px;
}
@keyframes tossburp{
0%{ opacity:0; transform: translateY(0) scale(.5); }
15%{ opacity:1; }
100%{ opacity:0; transform: translateY(-90px) scale(1.25); }
}
.toss-combo{
position:absolute; left:0; right:0; top:8px; z-index:11; text-align:center; pointer-events:none;
font-family:var(--disp); font-weight:700; font-size:1.3rem; color:#fff;
text-shadow:0 0 14px rgba(255,220,110,.9), 0 2px 8px rgba(0,60,90,.6);
opacity:0; transform: scale(.7);
transition: opacity .18s, transform .18s;
}
.toss-combo.show{ opacity:1; transform: scale(1); }
.toss-combo.soft{ font-size:.95rem; color:#eafcff; text-shadow:0 2px 8px rgba(0,60,90,.6); }
.toss-left{
position:absolute; left:0; right:0; bottom:4px; z-index:6; text-align:center; pointer-events:none;
font-family:var(--body); font-weight:900; font-size:.85rem; color:#04506e;
font-variant-numeric:tabular-nums;
}
.toss-queue{
display:flex; gap:6px; justify-content:center; align-items:center;
min-height:34px; margin-bottom:4px; flex-wrap:wrap;
}
.tq-coin{
width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
font-family:var(--body); font-weight:900; font-size:.62rem; color:#7a5300;
background: radial-gradient(circle at 32% 28%, #ffe89b, #f7c437 62%, #d9a41c);
border:1.5px solid #d9a41c; opacity:.55;
}
.tq-coin.tq-next{ opacity:1; box-shadow:0 0 10px rgba(255,220,120,.7); }
.tq-done{ font-weight:800; font-size:.85rem; color:var(--txt-dim); }
body.mode-little .toss-launch{ width:76px; height:76px; }
body.mode-little .toss-launch-coin{ width:70px; height:70px; font-size:1.1rem; }
/* ── daily starfish ───────────────────────────────────────── */
.daily-star{
position:absolute; z-index:8; width:46px; height:46px; padding:0; cursor:pointer;
border:0; background:none; opacity:.55;
animation: starpeek 3.5s ease-in-out infinite;
}
.daily-star:hover{ opacity:1; }
@keyframes starpeek{
0%,100%{ transform: rotate(-8deg) scale(1); opacity:.5; }
50%{ transform: rotate(8deg) scale(1.06); opacity:.8; }
}
.daily-star.found{ animation: starfound .6s ease forwards; }
@keyframes starfound{
to{ transform: scale(2.2) rotate(180deg); opacity:0; }
}
/* ── little jobs ──────────────────────────────────────────── */
.job-list{ display:flex; flex-direction:column; gap:9px; }
.job-row{
display:flex; align-items:center; gap:11px;
background: rgba(255,255,255,.92); border-radius:var(--r-sm); padding:11px 14px;
box-shadow: 0 4px 14px -6px rgba(3,40,64,.35);
}
.job-row.claimed{ background: rgba(255,246,224,.94); }
.job-tick{ font-size:1.3rem; }
.job-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.job-name{ font-weight:800; color:var(--ink); font-size:.95rem; }
.job-sub{ font-size:.74rem; font-weight:700; color:var(--txt-dim); }
.job-amt{ font-family:var(--body); font-weight:900; color:#0b8a52; font-variant-numeric:tabular-nums; }
.job-btn{
border:0; cursor:pointer; font-family:var(--disp); font-weight:600; font-size:.9rem; color:#fff;
background: var(--btn-add); padding:9px 14px; border-radius:12px;
box-shadow:0 3px 0 rgba(5,90,50,.35);
}
.job-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(5,90,50,.35); }
/* ── the living reef ──────────────────────────────────────
Sprites are moved by reef.js with transform only (the cheap
kind). Nothing here animates on a timer except decorative
flourishes, all of which are switched off in simple mode.
═══════════════════════════════════════════════════════════ */
.reef-wrap{ position:relative; }
.reef-scene{
position:relative; width:100%; height:250px; overflow:hidden;
border-radius:var(--r-md);
background:
radial-gradient(120% 80% at 50% 0%, rgba(150,235,255,.28), transparent 60%),
linear-gradient(180deg, rgba(12,110,165,.45), rgba(3,45,85,.62));
border:1px solid rgba(255,255,255,.22);
/* touch-action none: without it iOS claims every touch for page
scrolling and cancels our taps, holds and drags. The reef is a
toy, not a scroll surface — scroll from outside it. */
touch-action: none;
-webkit-user-select: none; user-select: none;
-webkit-touch-callout: none;
cursor: crosshair;
}
.reef-sand{
position:absolute; left:-2%; right:-2%; bottom:0; height:44px; z-index:1;
background: linear-gradient(180deg,#ffe9b8,#e6c081);
border-radius:50% 50% 0 0 / 26px 26px 0 0;
box-shadow: inset 0 6px 12px -6px rgba(255,255,255,.7);
}
/* moving light on the water */
.rf-dapple{
position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.3;
background:
radial-gradient(60% 40% at 20% 10%, rgba(200,250,255,.5), transparent 70%),
radial-gradient(50% 35% at 70% 5%, rgba(190,245,255,.45), transparent 70%);
animation: rfdapple 9s ease-in-out infinite alternate;
}
@keyframes rfdapple{
from{ transform: translateX(-6%) scaleY(1); opacity:.22; }
to { transform: translateX(6%) scaleY(1.12); opacity:.38; }
}
/* sunbeams from the surface — the thing that makes the guide video
feel like water rather than a blue rectangle */
.rf-rays{ position:absolute; inset:-10% -20%; z-index:2; pointer-events:none; overflow:hidden; }
.rf-rays i{
position:absolute; top:-20%; height:150%; width:16%;
background: linear-gradient(180deg, rgba(190,245,255,.6), transparent 72%);
filter: blur(9px); opacity:.3; transform: rotate(12deg);
animation: rfray 4.5s ease-in-out infinite alternate;
}
.rf-rays i:nth-child(1){ left:12%; }
.rf-rays i:nth-child(2){ left:44%; width:10%; animation-duration:8s; opacity:.12; }
.rf-rays i:nth-child(3){ left:72%; width:19%; animation-duration:14s; opacity:.13; }
@keyframes rfray{
from{ transform: rotate(9deg) translateX(-3%); }
to { transform: rotate(15deg) translateX(4%); }
}
/* far-off fish: scenery, so the water is never empty */
.rf-drifter{
position:absolute; left:0; top:0; z-index:2; height:7px;
border-radius:50% 15% 15% 50%;
background:#dff6ff; pointer-events:none; will-change:transform;
}
.rf-drifter::after{
content:""; position:absolute; right:-4px; top:1px;
border-left:5px solid #dff6ff;
border-top:3px solid transparent; border-bottom:3px solid transparent;
}
.rf-sprite{
position:absolute; left:0; top:0; z-index:6;
will-change: transform; cursor:pointer;
transition: none;
}
/* Creature art carries a ground shadow for the wish tank, where the pet
really is sitting on a surface. In the reef a swimmer is mid-water, so
the shadow would just follow it around like a stain — drop it for
anything that isn't walking on the sand. */
.rf-sprite.rf-swim .cr-shadow{ display:none; }
.rf-sprite .rf-inner{ width:100%; height:100%; transition: transform .18s ease-out; }
/* depth scales about the feet, so a creature swimming closer grows
towards the viewer instead of sliding off the sand */
.rf-sprite, .rf-decor{ transform-origin: 50% 100%; }
/* standalone creature artwork, drawn as an ![]()
— contain, because the
supplied files are portrait and must not be stretched to a square */
svg.rf-art-img{ width:100%; height:100%; display:block; overflow:visible; }
.rf-sprite .rf-art-img, .shop-art .rf-art-img{
width:100%; height:100%; display:block;
object-fit: contain; object-position: center bottom;
-webkit-user-drag: none; user-select: none;
}
.rf-sprite .rf-art-img{ filter: drop-shadow(0 4px 6px rgba(2,30,60,.35)); }
/* Idle life for the drawn creatures. Their fins and tentacles are inside
an ![]()
, so no part of them can be animated individually — instead
each species gets its own whole-body rhythm, which at sprite size
reads as the creature breathing and finning rather than sliding
about. Transform-only, so it composites on the GPU and costs nothing
the engine's own motion doesn't already. */
/* ── making a flat picture look alive ──────────────────────
The bought-in artwork is a single flat image — measured: five of seven
files are ONE group containing the whole body, the rest split into
shading layers, not limbs. So there is no tail or fin to rotate, and
part-level animation is not available without redrawing the creatures.
What does work is bending the whole body. A skew whose origin sits at
the HEAD leaves the head still and swings the far end, which at sprite
size reads as a tail sweeping — the same trick 2D animators use with a
bend deformer. `--bend` is the angle; the head end is set per sprite
from the `faces` flag, since a creature drawn facing left has its head
on the left. Layered on top: a slow breathing scale, and the tilt the
engine already applies. All transform-only, so it composites on the
GPU and costs nothing extra. */
.rf-art-img{ transform-origin: 50% 85%; }
.rf-drawn-left .rf-art-img{ transform-origin: 12% 55%; } /* head at the left */
.rf-drawn-right .rf-art-img{ transform-origin: 88% 55%; } /* head at the right */
.rf-ground .rf-art-img{ transform-origin: 50% 92%; } /* pivot on the sand */
@keyframes cr-swim{ /* body flexes, tail end swings */
0%,100%{ transform: skewY(calc(var(--bend) * -1)) scaleX(1); }
50% { transform: skewY(var(--bend)) scaleX(.985); }
}
@keyframes cr-swim-big{ /* the slow heavy ones: bend plus a roll */
0%,100%{ transform: skewY(calc(var(--bend) * -1)) rotate(-1.2deg); }
50% { transform: skewY(var(--bend)) rotate(1.2deg); }
}
@keyframes cr-scuttle{ /* legs can't move, so the shell bustles */
0%,100%{ transform: skewX(-2.5deg) translateY(0) rotate(-1.5deg); }
50% { transform: skewX(2.5deg) translateY(-4%) rotate(1.5deg); }
}
@keyframes cr-pulse{ /* jet propulsion: squash, then drift */
0%,100%{ transform: scale(1, 1) translateY(0); }
35% { transform: scale(1.07, .89) translateY(2%); }
70% { transform: scale(.96, 1.06) translateY(-4%); }
}
@keyframes cr-paddle{ /* heavy, unhurried, flippers implied by the roll */
0%,100%{ transform: rotate(-3.5deg) skewY(1.5deg) scaleY(1); }
50% { transform: rotate(3.5deg) skewY(-1.5deg) scaleY(.97); }
}
@keyframes cr-hover{ /* upright: a curl runs down the tail */
0%,100%{ transform: skewX(-3deg) translateY(0); }
50% { transform: skewX(3deg) translateY(-3%); }
}
@keyframes cr-swish{ /* a long tail sweeping through water */
0%,100%{ transform: skewY(-2.6deg) rotate(-2.5deg); }
50% { transform: skewY(2.6deg) rotate(2.5deg); }
}
@keyframes cr-gape{ /* a long wait, then one slow yawn */
0%,72%,100%{ transform: scaleY(1) scaleX(1); }
84%{ transform: scaleY(1.05) scaleX(.98); }
}
/* per species: which rhythm, how hard it bends, how fast.
Small darting fish flex hard and often; big slow animals barely bend. */
.rf-sprite-clownfish .rf-art-img{ --bend:5.5deg; animation: cr-swim .85s ease-in-out infinite; }
.rf-sprite-tetra .rf-art-img{ --bend:6deg; animation: cr-swim .7s ease-in-out infinite; }
.rf-sprite-angelfish .rf-art-img{ --bend:4.5deg; animation: cr-swim 1.1s ease-in-out infinite; }
.rf-sprite-angelfish2 .rf-art-img{ --bend:5deg; animation: cr-swim 1s ease-in-out infinite; }
.rf-sprite-lanternfish .rf-art-img{ --bend:4deg; animation: cr-swim 1.3s ease-in-out infinite; }
.rf-sprite-dolphin .rf-art-img{ --bend:3.2deg; animation: cr-swim-big 1.6s ease-in-out infinite; }
.rf-sprite-narwhal .rf-art-img{ --bend:2.6deg; animation: cr-swim-big 2.2s ease-in-out infinite; }
.rf-sprite-whale .rf-art-img{ --bend:2deg; animation: cr-swim-big 3.2s ease-in-out infinite; }
.rf-sprite-seal .rf-art-img{ --bend:3.4deg; animation: cr-swim-big 1.5s ease-in-out infinite; }
.rf-sprite-walrus .rf-art-img{ --bend:2.2deg; animation: cr-swim-big 2.8s ease-in-out infinite; }
.rf-sprite-mermaid .rf-art-img,
.rf-sprite-mermaid2 .rf-art-img,
.rf-sprite-merman .rf-art-img{ animation: cr-swish 2.4s ease-in-out infinite; }
.rf-sprite-turtle .rf-art-img{ animation: cr-paddle 2.6s ease-in-out infinite; }
.rf-sprite-seahorse .rf-art-img{ animation: cr-hover 1.9s ease-in-out infinite; }
.rf-sprite-octopus .rf-art-img,
.rf-sprite-kraken .rf-art-img{ animation: cr-pulse 1.9s ease-in-out infinite; }
.rf-sprite-jellyfish .rf-art-img{ animation: cr-pulse 2.3s ease-in-out infinite; }
.rf-sprite-crab .rf-art-img{ animation: cr-scuttle .8s ease-in-out infinite; }
.rf-sprite-lobster .rf-art-img{ animation: cr-scuttle 1.1s ease-in-out infinite; }
.rf-sprite-shrimp .rf-art-img{ animation: cr-scuttle .9s ease-in-out infinite; }
.rf-sprite-oyster .rf-art-img{ animation: cr-gape 5s ease-in-out infinite; }
/* the starfish is drawn inline, so the rhythm goes on its