:root {
  --paper:#fff9ed;
  --ink:#263b43;
  --muted:#64777a;
  --coral:#ee735e;
  --yellow:#ffcf62;
  --mint:#b5decb;
  --line:#e3dfd2;
  --shadow:0 5px 0 rgba(38,59,67,.08);
  font-family:'M PLUS Rounded 1c',sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-weight:700;
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  min-height:100dvh
}
button,a,select,input {
  touch-action:manipulation
}
button,input,select {
  font:inherit
}
button {
  cursor:pointer;
  color:inherit;
  border:1.5px solid var(--line);
  border-radius:16px;
  background:#fffdf7;
  padding:12px 16px;
  min-height:48px;
  transition:transform .12s,background .12s
}
button:active {
  transform:translateY(2px)
}
button:disabled {
  opacity:.45;
  cursor:default
}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible {
  outline:3px solid #2a8275;
  outline-offset:3px
}
[hidden] {
  display:none!important
}
#app {
  position:relative;
  max-width:500px;
  margin:auto;
  padding:0 22px max(24px,env(safe-area-inset-bottom));
  min-height:100dvh
}
#background,#particles {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none
}
#background {
  z-index:-1;
  background:radial-gradient(ellipse at 70% 40%,#ffead8,transparent 65%)
}
#particles {
  z-index:4
}
.topbar {
  height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.topbar a {
  text-decoration:none;
  color:var(--ink);
  font-size:24px;
  font-weight:900;
  letter-spacing:-1px
}
.topbar a span {
  font-size:18px;
  margin-left:5px
}
.icon-button {
  border:0;
  background:#fff8;
  font-size:22px;
  display:flex;
  gap:6px;
  align-items:center;
  padding:8px 12px
}
.icon-button span {
  font-size:12px
}
h1 {
  font-size:42px;
  line-height:1.35;
  letter-spacing:-1.7px;
  margin:16px 0;
  font-weight:900
}
h1 span {
  color:var(--coral)
}
h2 {
  font-size:20px
}
.eyebrow {
  font-size:12px;
  letter-spacing:.06em;
  color:var(--muted);
  margin:8px 0
}
.screen {
  position:relative
}
#background {z-index:0}
#app {z-index:1}
body[data-scene=game] .topbar,body[data-scene=result] .topbar {text-shadow:0 1px 4px #fff9}
body.backdrop-fallback[data-scene=result] #background {background:radial-gradient(ellipse at 50% 30%,#fff9c9,#ffd66d)}

h1:focus, .equation:focus { outline: none; }
/* Confetti fills the backdrop; solid cards and controls remain in front. */
#particles {z-index:1}
#app {z-index:2}

#foreground {position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
body[data-scene=game] .game-bar {background:#fff9;border-radius:12px;padding-inline:8px}

body.backdrop-fallback[data-scene=game] #background {background:linear-gradient(160deg,#e4d6fc,#ffe9db)}
body.backdrop-fallback[data-scene=game][data-tier="2"] #background {background:linear-gradient(160deg,#a9b9f7,#ffc1dc)}
body.backdrop-fallback[data-scene=game][data-tier="3"] #background {background:linear-gradient(160deg,#c5b6fb,#ffda85)}