/* Shared look for the big screen and the phones. */
@font-face { font-family: "Fredoka"; src: url("/fonts/fredoka-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --ink: #2d2a4a; --ink-soft: #5d5a7c; --cream: #fff7ec; --paper: #ffffff;
  --red: #ff4d5a; --orange: #ff9a3d; --yellow: #ffd23f; --green: #3ecf8e; --teal: #22c3c3; --blue: #35b9ea; --purple: #9b7be8; --pink: #ff7eb6;
  --good: #1fae6c; --good-bg: #d6f8e6; --bad: #e5364a; --bad-bg: #ffe0e3;
  --b: .2rem; --r: 1.2rem; --drop: 0 .36rem 0 var(--ink);
  font-family: "Fredoka", "Arial Rounded MT Bold", "Avenir Next", system-ui, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--cream); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

.c-red { --c: var(--red); } .c-orange { --c: var(--orange); } .c-yellow { --c: var(--yellow); } .c-green { --c: var(--green); }
.c-teal { --c: var(--teal); } .c-blue { --c: var(--blue); } .c-purple { --c: var(--purple); } .c-pink { --c: var(--pink); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .55em 1.3em; border: var(--b) solid var(--ink); border-radius: 999px; background: var(--yellow); color: var(--ink); font-weight: 600; box-shadow: var(--drop); transition: transform .08s, box-shadow .08s, filter .15s; user-select: none; }
.btn:hover:not([disabled]) { filter: brightness(1.05); }
.btn:active:not([disabled]) { transform: translateY(.24rem); box-shadow: 0 .12rem 0 var(--ink); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn.plain { background: var(--paper); } .btn.good { background: var(--green); } .btn.bad { background: var(--red); color: #fff; } .btn.blue { background: var(--blue); }
.btn:focus-visible, .tap:focus-visible { outline: .22rem solid var(--purple); outline-offset: .2rem; }

.card { background: var(--paper); border: var(--b) solid var(--ink); border-radius: var(--r); box-shadow: var(--drop); }
.pill { display: inline-flex; align-items: center; gap: .4em; padding: .2em .9em; border: var(--b) solid var(--ink); border-radius: 999px; background: var(--paper); font-weight: 600; }
.pill.dark { background: var(--ink); color: #fff; }

/* Marbles the mascot */
.mascot, .marble { display: block; overflow: visible; }
.mascot .m-all { transform-box: view-box; transform-origin: 150px 268px; animation: m-bob 2.6s ease-in-out infinite; }
.mascot .m-arm-l { transform-box: view-box; transform-origin: 70px 162px; animation: m-wave 1.1s ease-in-out infinite; }
.mascot .m-arm-r { transform-box: view-box; transform-origin: 230px 162px; }
.mascot.cheer .m-arm-r { animation: m-wave-r 1.1s ease-in-out infinite; }
.m-eyes { transform-box: fill-box; transform-origin: center; animation: m-blink 4.2s infinite; }
.mascot .m-shadow { transform-box: fill-box; transform-origin: center; animation: m-shadow 2.6s ease-in-out infinite; }
@keyframes m-bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-9px) scale(1.015, .985); } }
@keyframes m-shadow { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.9); } }
@keyframes m-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-16deg); } }
@keyframes m-wave-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(16deg); } }
@keyframes m-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }

.bubble { position: relative; display: inline-block; padding: .5em 1em; background: var(--paper); border: var(--b) solid var(--ink); border-radius: 1.2em; font-weight: 600; box-shadow: 0 .25rem 0 var(--ink); }
.bubble::after { content: ""; position: absolute; left: 2.2em; bottom: -.62em; width: 1em; height: 1em; background: var(--paper); border-right: var(--b) solid var(--ink); border-bottom: var(--b) solid var(--ink); transform: rotate(45deg); }

@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes rise { from { transform: translateY(1.2rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-.4rem); } 40%, 80% { transform: translateX(.4rem); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}