/* Sink or Float */
:root {
  --bg: #0d1b2a; --bg2: #13283d; --ink: #f3f6fb; --dim: #9fb3c8;
  --panel: rgba(16, 32, 50, .86); --line: rgba(255, 255, 255, .12);
  --accent: #ffd166; --spring: cubic-bezier(.34, 1.7, .5, 1);
  --red: #ff6b6b; --orange: #ff9f43; --yellow: #ffd166; --green: #8fd694; --teal: #4ecdc4; --blue: #5aa9ff; --violet: #a78bfa; --pink: #e879f9;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: Rubik, "Nunito", "Segoe UI", system-ui, sans-serif; overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
a { color: inherit; text-decoration: none; }
.screen { position: fixed; inset: 0; display: none; }
.screen.on { display: block; }

/* ---------- buttons ---------- */
.pill, .iconbtn {
  border: 1px solid var(--line); background: var(--panel); backdrop-filter: blur(6px);
  height: 44px; border-radius: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 0 15px 0 12px; font-weight: 700; font-size: 15px;
  box-shadow: 0 4px 0 rgba(0,0,0,.35); transition: transform .4s var(--spring), background .2s, box-shadow .2s;
}
.pill .arr { font-size: 18px; }
.iconbtn { width: 44px; padding: 0; justify-content: center; }
.iconbtn svg { width: 22px; height: 22px; }
.pill:hover, .iconbtn:hover { transform: translateY(-3px) scale(1.07) rotate(-2deg); background: rgba(40, 70, 100, .95); }
.pill:active, .iconbtn:active { transform: translateY(1px) scale(.92, 1.04); box-shadow: 0 1px 0 rgba(0,0,0,.35); transition-duration: .08s; }
.mute::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--m) center/contain no-repeat; mask: var(--m) center/contain no-repeat;
  --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z'/%3E%3Cpath d='M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12'/%3E%3C/svg%3E"); }
.mute.off::before { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9z'/%3E%3Cpath d='M17 9l5 6M22 9l-5 6'/%3E%3C/svg%3E"); }

/* ---------- start screen ---------- */
#startScreen {
  background: radial-gradient(1100px 600px at 20% -10%, rgba(90,169,255,.22), transparent 60%), radial-gradient(900px 500px at 100% 110%, rgba(78,205,196,.18), transparent 60%), linear-gradient(180deg, #0f2235, #0b1622);
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2.2vh; padding: 70px 24px 24px;
}
#startScreen.on { display: flex; }
.topbar { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; }
.hero { text-align: center; }
#heroCanvas { width: min(520px, 60vh); height: auto; display: block; margin: 0 auto -6px; }
.hero h1 { margin: 0; font-size: clamp(40px, 7.4vh, 84px); font-weight: 900; letter-spacing: .04em; line-height: 1; }
.hero h1 em { font-style: normal; font-size: .5em; color: var(--dim); vertical-align: middle; margin: 0 .2em; }
.w-sink { color: #5aa9ff; display: inline-block; animation: sinky 2.6s ease-in-out infinite; }
.w-float { color: #ffd166; display: inline-block; animation: floaty 2.6s ease-in-out infinite; }
@keyframes sinky { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(10px) rotate(2deg); } }
@keyframes floaty { 0%, 100% { transform: translateY(4px) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
.tag { margin: 10px 0 0; color: var(--dim); font-size: clamp(15px, 2.1vh, 20px); }
.modes { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.mode-card {
  --c: #ffd166; width: 270px; border: 2px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 24px; padding: 16px 18px 18px;
  background: linear-gradient(170deg, color-mix(in srgb, var(--c) 18%, #13283d), #0f2032); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
  box-shadow: 0 6px 0 rgba(0,0,0,.4), 0 14px 30px rgba(0,0,0,.3); transition: transform .45s var(--spring), box-shadow .3s, border-color .3s;
  animation: cardIn .7s var(--spring) backwards;
}
.mode-card:nth-child(2) { animation-delay: .08s; } .mode-card:nth-child(3) { animation-delay: .16s; }
@keyframes cardIn { from { transform: translateY(40px) scale(.8); opacity: 0; } }
.mode-card canvas { width: 120px; height: 90px; }
.mode-card b { font-size: 22px; color: var(--c); }
.mode-card i { font-style: normal; font-weight: 700; font-size: 13px; padding: 2px 10px; border-radius: 99px; background: var(--c); color: #10151c; }
.mode-card span { font-size: 14px; color: #d7e2ee; line-height: 1.35; margin-top: 6px; }
.mode-card:hover { transform: translateY(-8px) scale(1.05) rotate(-1.5deg); border-color: var(--c); box-shadow: 0 10px 0 rgba(0,0,0,.4), 0 0 34px color-mix(in srgb, var(--c) 40%, transparent); }
.mode-card:active { transform: translateY(0) scale(.95, 1.03); transition-duration: .08s; }

/* ---------- game screen ---------- */
#gameScreen { background: #0d1b2a; touch-action: none; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#game.grab { cursor: grab; } #game.grabbing { cursor: grabbing; }
.hud-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; pointer-events: none; z-index: 6; }
.hud-top > * { pointer-events: auto; }
.hud-left, .hud-right { display: flex; gap: 8px; align-items: flex-start; }
.modewrap { position: relative; }
.modepill .dot, .menu .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c, #ffd166); display: inline-block; box-shadow: 0 0 8px var(--c, #ffd166); }
.modepill .caret { color: var(--dim); font-size: 12px; }
.menu { position: absolute; top: 52px; left: 0; min-width: 220px; background: rgba(12, 24, 38, .97); border: 1px solid var(--line); border-radius: 16px; padding: 6px; box-shadow: 0 14px 30px rgba(0,0,0,.45);
  display: flex; flex-direction: column; transform-origin: top left; transform: scale(.6); opacity: 0; pointer-events: none; transition: transform .35s var(--spring), opacity .15s; }
.menu.on { transform: none; opacity: 1; pointer-events: auto; }
.menu button { border: 0; background: none; text-align: left; padding: 9px 12px; border-radius: 10px; display: flex; gap: 10px; align-items: center; font-weight: 700; transition: transform .3s var(--spring), background .15s; }
.menu button small { color: var(--dim); margin-left: auto; font-weight: 600; }
.menu button:hover { background: rgba(255,255,255,.08); transform: translateX(4px) scale(1.03); }
.menu button.cur { background: rgba(255,209,102,.13); }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; width: auto; }

.leftcol { position: absolute; left: 12px; top: 66px; bottom: 12px; width: 300px; z-index: 4; display: flex; flex-direction: column; gap: 10px; pointer-events: none; transition: transform .45s var(--spring); }
.leftcol > * { pointer-events: auto; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(8px); padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.c-head { display: flex; gap: 10px; align-items: center; }
.c-head h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.prog { font-size: 13px; font-weight: 800; padding: 2px 9px; border-radius: 99px; background: rgba(255,255,255,.08); }
.prog.all { background: #39d98a; color: #0d1b2a; animation: pop .6s var(--spring); }
.minbtn { margin-left: auto; width: 30px; height: 30px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.06); display: grid; place-items: center; transition: transform .35s var(--spring); }
.minbtn:hover { transform: scale(1.15) rotate(-6deg); }
.minbtn svg { width: 16px; height: 16px; transition: transform .3s; }
.tasks ul { margin: 8px 0 0; padding: 0; list-style: none; }
.tasks li { font-size: 14px; line-height: 1.3; padding: 5px 0 5px 28px; position: relative; color: #d7e2ee; transition: color .3s; }
.tasks li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 16px; height: 16px; border-radius: 6px; border: 2px solid #5a7590; transition: background .3s, border-color .3s, transform .5s var(--spring); }
.tasks li.done { color: #9fe6b0; }
.tasks li.done::before { background: #39d98a; border-color: #39d98a; }
.tasks li.done::after { content: ""; position: absolute; left: 8px; top: 8px; width: 5px; height: 9px; border: solid #0d1b2a; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.tasks li.just::before { animation: checkPop .7s var(--spring); }
.tasks li.just { animation: rowGlow 1.4s ease-out; }
@keyframes checkPop { 0% { transform: scale(.3) rotate(-30deg); } 60% { transform: scale(1.5) rotate(10deg); } 100% { transform: none; } }
@keyframes rowGlow { 0% { background: rgba(57,217,138,.3); } 100% { background: transparent; } }
.tasks.min ul { display: none; }
.tasks.min .minbtn svg { transform: rotate(-90deg); }
.tasks.min { width: 190px; }

.side { flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 8px; }
.side:empty { display: none; }
.side h4 { margin: 2px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab { border: 1px solid var(--line); background: rgba(255,255,255,.05); border-radius: 10px; padding: 5px 10px; font-size: 13px; font-weight: 700; transition: transform .35s var(--spring), background .2s; }
.tab:hover { transform: translateY(-2px) scale(1.06) rotate(-2deg); background: rgba(255,255,255,.12); }
.tab.on { background: var(--accent); color: #10151c; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { --c: #5aa9ff; border: 1px solid var(--line); background: rgba(255,255,255,.05); border-radius: 99px; padding: 6px 11px 6px 9px; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; transition: transform .4s var(--spring), background .2s, box-shadow .2s; }
.chip::before { content: ""; width: 12px; height: 12px; border-radius: 4px; background: var(--c); }
.chip:hover { transform: translateY(-3px) scale(1.07) rotate(-2deg); background: rgba(255,255,255,.12); }
.chip:active { transform: scale(.92, 1.05); transition-duration: .08s; }
.chip.on { background: color-mix(in srgb, var(--c) 30%, transparent); box-shadow: 0 0 0 2px var(--c); }
.bigbtn { border: 0; border-radius: 14px; padding: 9px 14px; font-weight: 800; font-size: 15px; background: var(--accent); color: #10151c; box-shadow: 0 4px 0 rgba(0,0,0,.35); transition: transform .4s var(--spring); display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.bigbtn:hover { transform: translateY(-3px) scale(1.06) rotate(-2deg); }
.bigbtn:active { transform: translateY(1px) scale(.92, 1.05); transition-duration: .08s; }
.bigbtn.alt { background: #4ecdc4; } .bigbtn.ghost { background: rgba(255,255,255,.1); color: var(--ink); }
.bigbtn:disabled { opacity: .45; cursor: default; transform: none; }
.shake.wig { animation: wig .4s ease-out; }
@keyframes wig { 0%, 100% { transform: none; } 25% { transform: rotate(-14deg) scale(1.1); } 50% { transform: rotate(12deg) scale(1.1); } 75% { transform: rotate(-8deg); } }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.small { font-size: 12.5px; color: var(--dim); line-height: 1.4; }
.meter { height: 9px; border-radius: 9px; background: rgba(255,255,255,.1); overflow: hidden; flex: 1; min-width: 80px; }
.meter i { display: block; height: 100%; border-radius: 9px; background: linear-gradient(90deg, #4ecdc4, #ffd166, #ff9f43); transition: width .4s var(--spring); }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.f { background: rgba(255,255,255,.05); border-radius: 10px; padding: 5px 8px; }
.f b { display: block; font-size: 11px; color: var(--dim); font-weight: 700; letter-spacing: .02em; } /* no uppercase: it would turn ρ into Ρ (looks like P) */
.f span { font-size: 13.5px; font-weight: 700; }
.f.wide { grid-column: 1 / -1; }
.f.good span { color: #ffd166; } .f.bad span { color: #9fd8ff; }
.insp-head { display: flex; gap: 8px; align-items: center; }
.insp-head canvas { width: 48px; height: 36px; flex: none; }
.insp-head b { font-size: 16px; }
.formula { font-size: 13px; line-height: 1.45; color: #e3ecf5; background: rgba(255, 209, 102, .09); border-left: 3px solid var(--accent); padding: 6px 9px; border-radius: 0 10px 10px 0; }
.formula sub { font-size: 70%; }
label.sl { display: grid; grid-template-columns: 82px 1fr 52px; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; }
label.sl output { text-align: right; color: var(--accent); }
input[type=range] { width: 100%; accent-color: #ffd166; height: 22px; cursor: pointer; }
.toggle { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; cursor: pointer; padding: 3px 0; }
.toggle i { width: 40px; height: 23px; border-radius: 99px; background: rgba(255,255,255,.14); position: relative; transition: background .2s; flex: none; }
.toggle i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .35s var(--spring); }
.toggle.on i { background: #39d98a; } .toggle.on i::after { transform: translateX(17px); }

/* kids board */
.score { display: flex; align-items: center; gap: 12px; }
.score .star { font-size: 42px; line-height: 1; filter: drop-shadow(0 0 10px rgba(255,209,102,.6)); animation: spinStar 6s linear infinite; }
@keyframes spinStar { to { transform: rotate(360deg); } }
.score .num { font-size: 52px; font-weight: 900; color: var(--accent); line-height: 1; }
.score .num.bump { animation: bump .6s var(--spring); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.6) rotate(-8deg); } 100% { transform: none; } }
.score small { display: block; font-size: 14px; color: var(--dim); font-weight: 700; }
.board { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: none; min-height: 110px; }
.bcol { border-radius: 14px; padding: 8px; background: rgba(255,255,255,.04); border: 2px dashed rgba(255,255,255,.12); display: flex; flex-direction: column; gap: 4px; }
.bcol h5 { margin: 0 0 4px; font-size: 16px; text-align: center; font-weight: 900; }
.bcol.sinkers h5 { color: #5aa9ff; } .bcol.floaters h5 { color: #ffd166; }
.bcol .items { display: flex; flex-wrap: wrap; gap: 2px 4px; justify-content: center; }
.bitem { font-size: 10px !important; }
.bitem { width: 48px; text-align: center; font-size: 11px; font-weight: 700; color: #d7e2ee; animation: pop .6s var(--spring); position: relative; }
.bitem canvas { width: 40px; height: 30px; display: block; margin: 0 auto; }
.bitem.ok::after { content: "★"; position: absolute; top: -4px; right: 2px; color: #ffd166; font-size: 14px; }
@keyframes pop { from { transform: scale(.3) rotate(-12deg); opacity: 0; } }

/* prediction */
.predict { position: absolute; z-index: 5; transform: translate(-50%, 0) scale(.5); opacity: 0; pointer-events: none; transition: transform .45s var(--spring), opacity .2s;
  background: rgba(12, 24, 38, .93); border: 2px solid rgba(255,209,102,.6); border-radius: 22px; padding: 10px 14px 12px; box-shadow: 0 14px 34px rgba(0,0,0,.45); text-align: center; }
.predict.on { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; }
.predict .q { display: flex; align-items: center; gap: 10px; justify-content: center; font-weight: 800; font-size: 20px; margin-bottom: 8px; }
.predict .q canvas { width: 54px; height: 40px; }
.pbtns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 560px; }
.pbtn { border: 0; border-radius: 18px; padding: 10px 22px; font-size: 22px; font-weight: 900; color: #10151c; display: inline-flex; gap: 8px; align-items: center;
  box-shadow: 0 5px 0 rgba(0,0,0,.4); transition: transform .4s var(--spring), filter .2s; animation: pbIn .5s var(--spring) backwards; }
.pbtn:nth-child(2) { animation-delay: .06s; } .pbtn:nth-child(3) { animation-delay: .12s; } .pbtn:nth-child(4) { animation-delay: .18s; } .pbtn:nth-child(5) { animation-delay: .24s; }
@keyframes pbIn { from { transform: scale(.3); opacity: 0; } }
.pbtn.sink { background: linear-gradient(180deg, #8cc4ff, #3d8ff0); }
.pbtn.float { background: linear-gradient(180deg, #ffe39a, #ffc23d); }
.pbtn.small { font-size: 15px; padding: 8px 12px; border-radius: 14px; }
.pbtn svg { width: 26px; height: 26px; stroke-width: 3; }
.pbtn:hover { transform: translateY(-4px) scale(1.08) rotate(-2deg); filter: brightness(1.08); }
.pbtn:active { transform: translateY(2px) scale(.9, 1.06); transition-duration: .08s; }
.pbtn.sink svg { animation: arrDown 1s ease-in-out infinite; } .pbtn.float svg { animation: arrUp 1s ease-in-out infinite; }
@keyframes arrDown { 50% { transform: translateY(4px); } } @keyframes arrUp { 50% { transform: translateY(-4px); } }
.pbtn kbd { font: inherit; font-size: 11px; background: rgba(0,0,0,.18); border-radius: 6px; padding: 1px 5px; }

.cheer { position: absolute; z-index: 5; transform: translate(-50%, -50%) scale(.3); opacity: 0; pointer-events: none; font-size: clamp(30px, 6vh, 64px); font-weight: 900; white-space: nowrap; text-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 30px rgba(0,0,0,.4); }
.cheer.go { animation: cheerGo 2.2s var(--spring) forwards; }
.cheer.ooh { animation: oohGo 2.4s ease-out forwards; }
@keyframes cheerGo { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-10deg); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(3deg); } 25% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); } 80% { opacity: 1; transform: translate(-50%, -60%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(.9); } }
@keyframes oohGo { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(-4deg); } 20% { transform: translate(-50%, -50%) rotate(4deg); } 28% { transform: translate(-50%, -50%) rotate(-3deg); } 36% { transform: translate(-50%, -50%) rotate(2deg); } 80% { opacity: 1; transform: translate(-50%, -50%) rotate(0); } 100% { opacity: 0; transform: translate(-50%, -40%) scale(.9); } }

.hint { position: absolute; z-index: 4; left: 50%; transform: translate(-50%, 0); font-size: 15px; font-weight: 700; color: #fff; background: rgba(8, 16, 26, .8); border: 1px solid var(--line); padding: 7px 16px; border-radius: 99px; pointer-events: none; transition: opacity .4s; white-space: nowrap; opacity: 0; }
.hint.on { opacity: 1; animation: hintBob 1.6s ease-in-out infinite; }
@keyframes hintBob { 50% { transform: translate(-50%, -4px); } }

/* toasts: top right, never over the task list or the tank's middle */
.toasts { position: absolute; top: 64px; right: 12px; width: 300px; z-index: 6; display: flex; flex-direction: column; gap: 6px; pointer-events: none; transition: transform .45s var(--spring), opacity .25s; }
.toasts.min { transform: translateX(330px); opacity: 0; }
.toasts.min .toast, body.dragging .toast, body.dragging .leftcol > * { pointer-events: none; }
.toast { --c: #ffd166; position: relative; display: flex; gap: 8px; align-items: flex-start; background: rgba(12, 24, 38, .95); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 12px; padding: 7px 10px 9px; box-shadow: 0 8px 20px rgba(0,0,0,.4); pointer-events: auto; cursor: pointer; overflow: hidden;
  animation: toastIn .55s var(--spring); transition: opacity .5s, transform .5s; }
.toast.out { opacity: 0; transform: translateX(30px) scale(.95); pointer-events: none !important; }
.toast .ic { font-size: 16px; line-height: 1; flex: none; margin-top: 1px; }
.toast .tt { display: block; font-size: 13px; margin-bottom: 1px; color: var(--c); }
.toast span { font-size: 12px; line-height: 1.38; color: #dbe6f1; }
.toast .tb { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.toast:hover .tb { -webkit-line-clamp: unset; display: block; }
.toast.more::after { content: "▾ more"; position: absolute; right: 8px; bottom: 5px; font-size: 10px; font-weight: 800; color: var(--c); background: rgba(12,24,38,.95); padding: 0 3px 0 6px; border-radius: 6px; pointer-events: none; }
.toast.more:hover::after { display: none; }
.notesbtn { height: 44px; font-size: 14px; position: relative; }
.notesbtn svg { width: 18px; height: 18px; }
.notesbtn.off { opacity: .8; }
.ncount { display: none; min-width: 20px; height: 20px; border-radius: 99px; background: #ff6b6b; color: #fff; font-size: 12px; line-height: 20px; text-align: center; padding: 0 5px; }
.ncount.on { display: inline-block; animation: pop .5s var(--spring); }
.toast span b { color: #fff; }
.toast sub { font-size: 70%; }
.toast .tbar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--c); opacity: .75; width: 100%; transform-origin: left; }
@keyframes toastIn { from { transform: translateX(40px) scale(.8); opacity: 0; } }

.wipe { position: fixed; inset: 0; z-index: 50; pointer-events: none; background: var(--c, #5aa9ff); clip-path: circle(0% at var(--x, 50%) var(--y, 50%)); }
.wipe.go { transition: clip-path .5s cubic-bezier(.7, 0, .3, 1); clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
.wipe.back { transition: clip-path .45s cubic-bezier(.7, 0, .3, 1); clip-path: circle(0% at var(--x, 50%) var(--y, 50%)); }

@media (max-height: 760px) {
  .tasks li { font-size: 13px; padding: 3px 0 3px 26px; }
  .tasks li::before { top: 3px; }
  .tasks li.done::after { top: 6px; }
  .card { padding: 10px 12px; }
  .score .num { font-size: 40px; } .score .star { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01s !important; transition-duration: .01s !important; }
}