@font-face {
  font-family: "BALMAT Round";
  src: url("../fonts/Nunito-Latin.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "BALMAT Round";
  src: url("../fonts/Nunito-LatinExt.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "BALMAT Mono";
  src: url("../fonts/NotoSansMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: block;
}

/* Game palette: vivid fills, each with a darker "edge" used as the 3D bottom shadow. */
:root,
.theme-ghost {
  --bg: #F3F6FC;
  --surface: #FFFFFF;
  --surface-2: #EEF2FA;
  --surface-3: #E1E7F2;
  --line: #E1E7F2;
  --line-strong: #CBD4E4;
  --edge: #CBD4E4;
  --ink: #1E2A47;
  /* Muted and primary are just dark enough for 4.5:1 text contrast (WCAG AA) on every light surface. */
  --muted: #56637E;
  /* Subject colour (subjects.json); :root[data-subject] below swaps the whole set. */
  --brand: #790D16;
  --brand-edge: #4A060C;
  --brand-soft: #F8E4E6;
  --brand-soft-dark: #3A1418;
  --brand-ink-dark: #F2A7AE;
  --primary: #2A74D8;
  --primary-press: #1B63C8;
  --primary-edge: #1A5BB8;
  --primary-ink: #ffffff;
  --primary-soft: #E3EEFD;
  /* Blue text on --primary-soft (4.5:1 or more). */
  --primary-text: #1F63C4;
  --good: #34C26A;
  --good-edge: #22964D;
  --good-ink: #136B34;
  --good-soft: #E2F8EA;
  --bad: #FF5A5F;
  --bad-edge: #D63A40;
  --bad-ink: #B3262C;
  --bad-soft: #FFE6E7;
  --warn: #FF9F1C;
  --warn-edge: #D47F05;
  --warn-ink: #9A5800;
  --warn-soft: #FFF1DC;
  --gold: #FFC93C;
  --gold-edge: #E0A100;
  --gold-soft: #FFF6D6;
  --purple: #8B5CF6;
  --purple-edge: #6B3CDB;
  --purple-soft: #EFE8FF;
  --info: #18B5E8;
  --info-edge: #0B8DB8;
  --info-ink: #06688A;
  --info-soft: #DFF5FD;
  --focus: #2F80ED;
  --radius: 22px;
  --radius-sm: 14px;
  --gap: 1rem;
  --tap: 46px;
  --depth: 4px;
  --shadow: 0 var(--depth) 0 var(--edge);
  --float: 0 10px 30px rgba(30, 42, 71, .12);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --font: "BALMAT Round", "Nunito", "Baloo 2", "DejaVu Sans", system-ui, sans-serif;
  --font-head: var(--font);
  --font-mono: "BALMAT Mono", "Noto Sans Mono", "DejaVu Sans Mono", monospace;
  --under-h: 0px;
  --draw-1: #1E2A47;
  --draw-2: #FF5A5F;
  --draw-3: #2F80ED;
  --draw-4: #34C26A;
}

/* BALMANCA (German): yellow-orange instead of claret. */
:root[data-subject="german"],
:root[data-subject="german"] .theme-ghost {
  --brand: #B93D0B;
  --brand-edge: #7C2D12;
  --brand-soft: #FDEBDF;
  --brand-soft-dark: #3A2014;
  --brand-ink-dark: #F9B98C;
}

:root[data-theme="dark"],
.theme-ghost[data-theme="dark"] {
  --bg: #131A2E;
  --surface: #1D2742;
  --surface-2: #253152;
  --surface-3: #2E3B60;
  --line: #2E3B60;
  --line-strong: #3B4A74;
  --edge: #0E1424;
  --ink: #EEF2FF;
  --muted: #9AA7C7;
  --primary: #4C95F5;
  --primary-press: #2F80ED;
  --primary-edge: #1D5BB0;
  --primary-ink: #ffffff;
  --primary-soft: #1D3560;
  --primary-text: #7FB2F8;
  --good-ink: #8FF0B3;
  --good-soft: #143826;
  --bad-ink: #FFB3B5;
  --bad-soft: #43191D;
  --warn-ink: #FFC98A;
  --warn-soft: #3E2A10;
  --gold-soft: #3D3313;
  --purple-soft: #2D2352;
  --info-ink: #8BDFFA;
  --info-soft: #11334A;
  --float: 0 10px 30px rgba(0, 0, 0, .35);
  --draw-1: #EEF2FF;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Native scrollbars are hidden everywhere; js/scrollbar.js draws themed overlay bars instead.
   They take no room, so short and long pages keep the same width. */
* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.sb {
  --sb-thumb: linear-gradient(180deg, #5FA2F7, var(--primary));
  --sb-glow: rgba(47, 128, 237, .35);
  --sb-track: rgba(30, 42, 71, .08);
  --sb-rest: 4px;
  --sb-wide: 9px;
  position: fixed;
  z-index: 58;
  box-sizing: border-box;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  transition: opacity .3s ease, background-color .2s ease;
}

[data-theme="dark"] .sb {
  --sb-thumb: linear-gradient(180deg, #8FC0FF, #4C95F5);
  --sb-glow: rgba(110, 170, 255, .45);
  --sb-track: rgba(255, 255, 255, .07);
}

.sb--in {
  position: absolute;
  z-index: 5;
}

.sb--y {
  width: 16px;
}

.sb--x {
  height: 16px;
}

.sb.is-on,
.sb.is-hover,
.sb.is-drag {
  opacity: 1;
  pointer-events: auto;
}

.sb.is-none {
  visibility: hidden;
  pointer-events: none;
}

/* The track shows only while the bar is held or under the pointer, as a soft groove. */
.sb::before {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: var(--sb-track);
  opacity: 0;
  transition: opacity .2s ease;
}

.sb--y::before {
  top: 0;
  bottom: 0;
  left: calc(50% - var(--sb-wide) / 2);
  width: var(--sb-wide);
}

.sb--x::before {
  left: 0;
  right: 0;
  top: calc(50% - var(--sb-wide) / 2);
  height: var(--sb-wide);
}

.sb.is-hover::before,
.sb.is-drag::before {
  opacity: 1;
}

/* A slim glowing pill at rest that widens under the pointer; the inner highlight keeps it crisp on dark pages. */
.sb__thumb {
  position: absolute;
  border-radius: 999px;
  background: var(--sb-thumb);
  opacity: .8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(255, 255, 255, .08);
  transition: opacity .2s ease, width .18s var(--spring), height .18s var(--spring), left .18s var(--spring), top .18s var(--spring), box-shadow .2s ease;
  cursor: grab;
}

.sb--x .sb__thumb {
  background: linear-gradient(90deg, #5FA2F7, var(--primary));
}

[data-theme="dark"] .sb--x .sb__thumb {
  background: linear-gradient(90deg, #8FC0FF, #4C95F5);
}

.sb--y .sb__thumb {
  top: 0;
  left: calc(50% - var(--sb-rest) / 2);
  width: var(--sb-rest);
}

.sb--x .sb__thumb {
  left: 0;
  top: calc(50% - var(--sb-rest) / 2);
  height: var(--sb-rest);
}

.sb.is-hover .sb__thumb,
.sb.is-drag .sb__thumb {
  opacity: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 10px var(--sb-glow);
}

.sb--y.is-hover .sb__thumb,
.sb--y.is-drag .sb__thumb {
  left: calc(50% - var(--sb-wide) / 2);
  width: var(--sb-wide);
}

.sb--x.is-hover .sb__thumb,
.sb--x.is-drag .sb__thumb {
  top: calc(50% - var(--sb-wide) / 2);
  height: var(--sb-wide);
}

.sb.is-drag .sb__thumb {
  cursor: grabbing;
  filter: brightness(.92);
}

/* The page's own bar sits right at the window edge: the slim thumb hugs the right side of its track and grows
   to the left under the pointer. */
.sb--page.sb--y .sb__thumb,
.sb--page.sb--y.is-hover .sb__thumb,
.sb--page.sb--y.is-drag .sb__thumb {
  left: auto;
  right: 3px;
}

.sb--page.sb--y::before {
  left: auto;
  right: 3px;
}

html.sb-dragging,
html.sb-dragging * {
  user-select: none !important;
  cursor: grabbing !important;
}

/* Fingers on a board need a wider bar to catch. */
[data-layout="smartboard"] .sb {
  --sb-rest: 8px;
  --sb-wide: 14px;
}

[data-layout="smartboard"] .sb--y {
  width: 26px;
}

[data-layout="smartboard"] .sb--x {
  height: 26px;
}

@media (prefers-reduced-motion: reduce) {

  .sb,
  .sb__thumb {
    transition: none;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  padding-bottom: var(--under-h);
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: var(--primary);
  text-underline-offset: 3px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

kbd {
  font-family: var(--font-mono);
  font-size: .85em;
  padding: .05em .4em;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
}

.skip-link:focus {
  left: 1rem;
  z-index: 100;
  background: var(--surface);
  padding: .5rem 1rem;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.icon--xl {
  width: 2rem;
  height: 2rem;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: .875rem;
}

.h1 {
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
}

.h2 {
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.h3 {
  font-size: 1.05rem;
  font-weight: 700;
}

.eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
}

.spacer {
  flex: 1;
}

.hidden,
[hidden] {
  display: none !important;
}

/* Layout shell: footer always sits at the bottom of the viewport or content. */
.main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 2.5rem;
}

.site-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}

.brand__mark {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--primary-ink);
  display: grid;
  place-items: center;
  flex: none;
}

.brand__mark .icon {
  width: 1.2rem;
  height: 1.2rem;
}

/* The logo is a full-colour picture (assets/icons/brand.svg) with its own background. */
.brand__mark:has(.brand__img) {
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.brand__img {
  width: 100%;
  height: 100%;
  display: block;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.brand__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .02em;
}

.brand__full {
  font-size: .72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-footer {
  flex: none;
  width: 100%;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.site-footer__inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: .9rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: .875rem;
}

.site-footer nav {
  display: flex;
  gap: 1.25rem;
}

.site-footer a {
  color: var(--muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--ink);
}

/* Version, hobby note and p4rs.com: under the links on public pages, alone and tiny on signed-in pages. */
.footer-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .15rem .45rem;
  margin: 0;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}

.footer-note__version {
  font-weight: 800;
}

.footer-note__sep {
  opacity: .6;
}

.site-footer__note {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 1.25rem .8rem;
}

.site-footer__note .footer-note {
  justify-content: flex-start;
}

.dash-footer {
  flex: none;
  width: 100%;
  padding: .4rem 1rem .6rem;
  background: transparent;
}

.dash-footer .footer-note {
  font-size: .62rem;
}

/* Footer layout choice (device_switch()): small pill links, the current one filled. */
.site-footer nav.device-switch,
.device-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  font-size: .78rem;
}

.device-switch__label {
  margin-right: .2rem;
  color: var(--muted);
  font-weight: 700;
}

.device-switch a {
  padding: .2rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
}

.device-switch a:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.device-switch a[aria-current] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
}

.dash-footer a {
  color: inherit;
}

/* The question screen fills the window with its own bottom bar; the line would only hide behind it. */
.page-question .dash-footer {
  display: none;
}

.card {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 var(--depth) 0 var(--edge);
}

.card--center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.card--flat {
  box-shadow: none;
  background: var(--surface-2);
}

/* Buttons: chunky 3D pills. The solid bottom edge collapses on press (squish), with no input delay. */
.btn {
  --btn-bg: var(--surface);
  --btn-ink: var(--ink);
  --btn-edge: var(--edge);
  --btn-line: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: var(--tap);
  padding: .5em 1.15em;
  border: 2px solid var(--btn-line);
  border-radius: 16px;
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  box-shadow: 0 var(--depth) 0 var(--btn-edge);
  transform: translateY(0);
  margin-bottom: var(--depth);
}

.btn:hover {
  filter: brightness(1.04);
}

.btn:active,
.btn.is-pressed {
  transform: translateY(var(--depth));
  box-shadow: 0 0 0 var(--btn-edge);
  filter: brightness(.97);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
  filter: saturate(.4);
}

.btn--primary {
  --btn-bg: var(--primary);
  --btn-ink: var(--primary-ink);
  --btn-edge: var(--primary-edge);
  --btn-line: var(--primary);
}

.btn--good {
  --btn-bg: var(--good);
  --btn-ink: #fff;
  --btn-edge: var(--good-edge);
  --btn-line: var(--good);
}

.btn--warn {
  --btn-bg: var(--warn);
  --btn-ink: #fff;
  --btn-edge: var(--warn-edge);
  --btn-line: var(--warn);
}

.btn--gold {
  --btn-bg: var(--gold);
  --btn-ink: #5A3D00;
  --btn-edge: var(--gold-edge);
  --btn-line: var(--gold);
}

.btn--purple {
  --btn-bg: var(--purple);
  --btn-ink: #fff;
  --btn-edge: var(--purple-edge);
  --btn-line: var(--purple);
}

.btn--danger {
  --btn-bg: var(--bad);
  --btn-ink: #fff;
  --btn-edge: var(--bad-edge);
  --btn-line: var(--bad);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-line: transparent;
  --btn-edge: transparent;
  margin-bottom: 0;
}

.btn--ghost:hover {
  background: var(--surface-2);
}

.btn--ghost:active,
.btn--ghost.is-pressed {
  transform: scale(.92);
}

.btn--block {
  width: 100%;
}

.btn--lg {
  min-height: calc(var(--tap) + 10px);
  font-size: 1.1rem;
  padding-inline: 1.6em;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.btn--icon {
  padding: 0;
  width: var(--tap);
  border-radius: 14px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.field__label {
  font-weight: 800;
  font-size: .9rem;
}

.input {
  min-height: var(--tap);
  padding: .45em .9em;
  width: 100%;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 1.05rem;
  font-weight: 700;
}

.input:focus,
.input.is-kb-target {
  border-color: var(--primary);
  background: var(--surface);
  outline: none;
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.input--code {
  font-family: var(--font-mono);
  letter-spacing: .08em;
  text-align: center;
  font-size: 1.35rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .25em .75em;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .02em;
}

.badge--good {
  background: var(--good-soft);
  color: var(--good-ink);
}

.badge--warn {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

.badge--hard {
  background: var(--bad);
  color: #fff;
}

.badge--info {
  background: var(--info-soft);
  color: var(--info-ink);
}

.badge--gold {
  background: var(--gold-soft);
  color: #8A6200;
}

.badge .icon {
  width: 1.1em;
  height: 1.1em;
}

/* Progress: a fat glossy pill that fills smoothly, with a light streak sweeping across. */
.progress {
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.progress__bar {
  position: relative;
  height: 100%;
  min-width: 16px;
  background: var(--good);
  border-radius: inherit;
  transition: width 600ms var(--spring);
  overflow: hidden;
}

.progress__bar::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 3px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
}

.progress__bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: m-shine 2.4s ease-in-out infinite;
}

@keyframes m-shine {

  60%,
  100% {
    transform: translateX(100%);
  }
}

/* Segmented markup kept for the question HUD, drawn as one pill */
.progress--segments {
  display: block;
}

.progress__seg {
  display: none;
}

/* Question step counter next to bar */


.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.list__item {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: .8rem .75rem;
  border-bottom: 1px solid var(--line);
}

.list__item:last-child {
  border-bottom: 0;
}

.list__item.is-me {
  background: var(--primary-soft);
  border-radius: var(--radius-sm);
}

.list__item a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.rank {
  width: 2em;
  flex: none;
  text-align: right;
  font-family: var(--font-mono);
  color: var(--muted);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem;
}

.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}

.stat__value {
  font-family: var(--font-head);
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
}

.segmented {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.segmented .btn.is-active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary-text);
}

.mode-switch {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.mode-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .35em .7em;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: .8rem;
}

.mode-switch__btn+.mode-switch__btn {
  border-left: 1px solid var(--line);
}

.mode-switch__btn.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

.under-menu {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.under-menu__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  min-height: 60px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
  font-size: .72rem;
}

.under-menu__item.is-active {
  color: var(--primary);
  box-shadow: inset 0 2px 0 var(--primary);
}

/* Toasts grow as wide as they need, up to 50px from either side; longer text wraps into a rounded box. */
.toast-wrap {
  position: fixed;
  left: 50px;
  right: 50px;
  top: 1rem;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  pointer-events: none;
}

.toast {
  background: var(--ink);
  color: var(--bg);
  padding: .65rem 1.1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .95rem;
}

.toast--error {
  background: var(--bad);
  color: #fff;
}

/* Home */
.hero {
  padding: 2.5rem 0 2rem;
  display: grid;
  gap: 1.25rem;
  max-width: 44rem;
}

.hero__title {
  font-size: 2.6rem;
}

.hero__lead {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 38rem;
}

.hero__cta {
  margin-top: .5rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .75rem;
}

.feature {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.feature__icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--primary);
}

.prose p {
  max-width: 42rem;
}

/* Auth */
.auth-card {
  max-width: 32rem;
  width: 100%;
  margin: 1rem auto;
}

.turnstile-box {
  min-height: 70px;
}

.device-code {
  font-family: var(--font-mono);
  font-size: 2rem;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}

.avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  flex: none;
}

/* Welcome */
.device-pick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

.device-pick__btn {
  flex-direction: column;
  min-height: 7.5rem;
  gap: .6rem;
}

.device-pick__btn.is-active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

/* Lessons hub */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem;
  align-items: start;
}

.mode-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mode-card__head {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.mode-card__icon {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  flex: none;
}

.mode-card__icon--practice {
  background: var(--good-soft);
  color: var(--good-ink);
}

.mode-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.topic-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .5rem;
}

.topic {
  justify-content: flex-start;
  text-align: left;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  padding: .6em .9em;
}

.topic__meta {
  font-size: .75rem;
  font-weight: 400;
  color: var(--muted);
}

.topic--random {
  border-style: dashed;
}

/* Question */
.q-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
}

.page-question .q-top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  padding: .5rem 0;
}

.q-step {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.q-text {
  font-size: 1.45rem;
  line-height: 1.35;
}

.q-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.q-answer {
  gap: .9rem;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}

.choice {
  min-height: 4.5rem;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: 18px;
}

.choice.is-selected {
  --btn-bg: var(--primary-soft);
  --btn-line: var(--primary);
  --btn-edge: var(--primary);
  --btn-ink: var(--primary-press);
}

.choice.is-correct {
  --btn-bg: var(--good);
  --btn-line: var(--good);
  --btn-edge: var(--good-edge);
  --btn-ink: #fff;
}

.choice.is-wrong {
  --btn-bg: var(--bad);
  --btn-line: var(--bad);
  --btn-edge: var(--bad-edge);
  --btn-ink: #fff;
}

.choice:disabled {
  opacity: 1;
  filter: none;
}

.choice:disabled:not(.is-correct):not(.is-wrong) {
  opacity: .45;
}

.page-question .under-menu {
  display: none;
}

.page-question {
  --under-h: 0px;
}

.page-question .main {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.page-question [data-question-root] {
  width: 100%;
  max-width: 1040px;
}

.timer {
  --p: 1;
  position: relative;
  width: 3.4rem;
  height: 3.4rem;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: .95rem;
  flex: none;
}

.timer.is-gone {
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s .3s;
}

.timer svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timer circle {
  fill: none;
  stroke-width: 2.5;
}

.timer .timer__track {
  stroke: var(--line);
}

.timer .timer__value {
  stroke: var(--primary);
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--p) * 100);
  stroke-linecap: round;
}

.timer.is-low .timer__value {
  stroke: var(--warn);
}

.plane-wrap {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  aspect-ratio: 1;
  touch-action: none;
  user-select: none;
}

/* The hub sample only shows the plane (answers are buttons): a finger on it scrolls the page. */
.hub-demo .plane-wrap {
  touch-action: pan-y pinch-zoom;
}

.plane-wrap.is-locked {
  pointer-events: none;
}

.plane {
  width: 100%;
  height: 100%;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.plane .grid {
  stroke: var(--line);
  stroke-width: .04;
}

.plane .axis {
  stroke: var(--ink);
  stroke-width: .06;
}

.plane .tick {
  fill: var(--muted);
  font-size: .5px;
  font-family: var(--font-mono);
}

.plane .given-line {
  stroke: var(--info-ink);
  stroke-width: .1;
}

.plane .reveal-line {
  stroke: var(--good);
  stroke-width: .12;
  stroke-dasharray: .4 .25;
}

.plane .user-line {
  stroke: var(--primary);
  stroke-width: .1;
}

.plane .pt {
  fill: var(--info-ink);
}

.plane .pt-label {
  fill: var(--ink);
  font-size: .6px;
  font-weight: 700;
  font-family: var(--font);
}

.plane .user-pt {
  fill: var(--primary);
  stroke: var(--surface);
  stroke-width: .08;
}

.plane .user-pt.is-active {
  stroke: var(--warn);
  stroke-width: .12;
}

.plane .reveal-pt {
  fill: none;
  stroke: var(--good);
  stroke-width: .12;
}

.plane .cursor {
  fill: var(--primary-soft);
  stroke: var(--primary);
  stroke-width: .05;
}

.plane-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

.plane-slots {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 9rem;
}

.plane-slots .btn {
  white-space: nowrap;
}

.plane-slots .btn.is-active {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.plane-slots .input {
  font-size: .9rem;
  font-family: var(--font-mono);
}

.plane-dpad {
  display: grid;
  gap: .35rem;
  grid-template-columns: repeat(3, auto);
  grid-template-areas: ". up clear" "left mid right" ". down .";
  align-items: center;
  justify-items: center;
}

.plane-dpad .btn {
  width: var(--tap);
  padding: 0;
}

.plane-readout {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  min-width: 6em;
  text-align: center;
}

/* Answer feedback: bottom sheet */
.feedback--sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  border-top: 1px solid;
  padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
}

.feedback--good {
  background: var(--good-soft);
  border-color: var(--good);
}

.feedback--bad {
  background: var(--bad-soft);
  border-color: var(--bad);
}

.feedback--timeout {
  background: var(--surface-3);
  border-color: var(--line-strong);
}

.feedback__inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.feedback__text {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  align-items: flex-start;
}

.feedback__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-head);
  font-size: 1.35rem;
  font-weight: 700;
}

.feedback--good .feedback__title {
  color: var(--good-ink);
}

.feedback--bad .feedback__title {
  color: var(--bad-ink);
}

.feedback--timeout .feedback__title {
  color: var(--muted);
}

.feedback__inner .btn {
  flex: 0 0 auto;
  min-width: 11rem;
}

body.has-sheet:not(.page-question) {
  padding-bottom: var(--sheet-h, 0px);
}

/* Floating ball + quick menu */
.fball {
  position: fixed;
  bottom: calc(var(--under-h) + 1rem);
  right: 1rem;
  z-index: 60;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--primary-ink);
  border: 0;
  box-shadow: 0 2px 8px rgba(42, 35, 32, .18);
  cursor: pointer;
}

.fball .icon {
  width: 1.4rem;
  height: 1.4rem;
}

[data-ball="left"] .fball {
  right: auto;
  left: 1rem;
}

.fball[aria-expanded="true"] {
  background: var(--ink);
}

.fball-menu {
  position: fixed;
  bottom: calc(var(--under-h) + 80px);
  right: 1rem;
  z-index: 61;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(42, 35, 32, .08);
  padding: .6rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-width: 240px;
}

[data-ball="left"] .fball-menu {
  right: auto;
  left: 1rem;
}

.fball-menu .btn {
  justify-content: flex-start;
}

.fball-switch__label {
  flex: 1;
  text-align: left;
}

.big-toggle.fball-switch__toggle {
  width: 4.4rem;
  height: 2.4rem;
}

.big-toggle.fball-switch__toggle .big-toggle__knob {
  top: .25rem;
  left: .25rem;
  width: 1.9rem;
  height: 1.9rem;
}

.big-toggle.fball-switch__toggle[aria-checked="true"] .big-toggle__knob {
  transform: translateX(2rem) rotate(360deg);
}

.big-toggle.fball-switch__toggle:active .big-toggle__knob {
  width: 1.9rem;
}

.big-toggle.fball-switch__toggle .big-toggle__knob .icon {
  width: 1rem;
  height: 1rem;
}

.page-question.has-sheet .fball {
  bottom: calc(var(--sheet-h, 0px) + 1rem);
}

/* The panel reaches --overhang past the left edge, so the springy opening never shows a gap behind it. */
.drawer {
  --overhang: 48px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--overhang));
  z-index: 50;
  width: calc(min(320px, 82vw) + var(--overhang));
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 1.25rem;
  padding-left: calc(1.25rem + var(--overhang));
  display: flex;
  flex-direction: column;
  gap: .6rem;
  transform: translateX(-105%);
}

.drawer.is-open {
  transform: none;
}

.drawer .btn {
  justify-content: flex-start;
}

/* Menu links line up with the logo: the icon is centred in a logo-wide slot and the text starts where "BALMAT" does.
   The hover background reaches a little past the column on both sides. */
.drawer > .btn--ghost {
  --slot: 2.1rem;
  --pad: .6rem;
  margin-inline: calc(-1 * var(--pad) - 2px);
  padding-inline: var(--pad);
  gap: .65rem;
}

.drawer > .btn--ghost .icon {
  margin-inline: calc((var(--slot) - 1.25em) / 2);
}

/* Sign-in actions sit at the bottom of the panel, within thumb reach. */
.drawer__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.drawer__foot .btn {
  justify-content: center;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    animation: reveal .5s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(var(--i, 0) * 60ms);
  }

  @keyframes reveal {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}

@media (max-width: 640px) {
  .h1 {
    font-size: 1.6rem;
  }

  .hero__title {
    font-size: 2rem;
  }

  .brand__full {
    display: none;
  }

  .device-pick {
    grid-template-columns: 1fr;
  }

  .device-pick__btn {
    min-height: 4rem;
    flex-direction: row;
  }
}

a.mode-card {
  text-decoration: none;
  color: inherit;
}

a.mode-card:hover {
  border-color: var(--line-strong);
}

.stack--tight {
  gap: .3rem;
}

.row--tight {
  gap: .4rem;
}

[data-q-finish] {
  margin-left: auto;
}

/* Continue / local account choice */
.choice-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  text-decoration: none;
  color: inherit;
  width: 100%;
  cursor: pointer;
  font: inherit;
}

.choice-card>.icon:last-child {
  margin-left: auto;
  color: var(--muted);
}

.choice-card:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.choice-card.is-pressed {
  background: var(--surface-3);
}

.local-list {
  gap: .6rem;
}

.local-item {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.local-item__pick {
  flex: 1;
  padding: 1rem 1.25rem;
}

.local-item .avatar {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.2rem;
}

.back-link {
  align-self: flex-start;
  padding-inline: .5rem;
}

/* Per-template question building blocks */
.q-single {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  gap: 1.1rem;
}

.q-info {
  gap: .8rem;
}

.pt-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.pt-row--center {
  justify-content: center;
}

.pt-chip {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .45rem .9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 1.15rem;
}

.pt-chip__label {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--primary);
}

.pt-chip--big {
  font-size: 1.6rem;
  padding: .6rem 1.2rem;
}

.eq-box {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  text-align: center;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  letter-spacing: .02em;
}

.formula {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  padding: .6rem .9rem;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: .9rem;
}

.formula__expr {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  color: var(--ink);
}

.frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.frac>span:first-child {
  border-bottom: 1px solid currentColor;
  padding: 0 .2rem .1rem;
}

.frac>span:last-child {
  padding: .1rem .2rem 0;
}

.frac-input {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.frac-input__m {
  font-family: var(--font-mono);
  font-size: 1.5rem;
}

.frac-input__stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .35rem;
  width: 7.5rem;
}

.frac-input__box {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.5rem;
}

.frac-input__bar {
  height: 3px;
  border-radius: 2px;
  background: var(--ink);
}

.frac-input__sign {
  width: 3rem;
  height: 3rem;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 150ms, color 150ms, border-color 150ms;
}

.frac-input__sign .icon {
  width: 1.6rem;
  height: 1.6rem;
}

.frac-input__sign.is-on {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.choice--word {
  font-family: var(--font);
  font-size: 1.05rem;
  font-weight: 600;
  flex-direction: column;
  gap: .35rem;
}

.choice--word .icon {
  width: 1.6rem;
  height: 1.6rem;
}

.quad-board {
  position: relative;
  max-width: 460px;
  width: 100%;
  margin: 0 auto;
}

.quad-grid {
  gap: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Denklem şıkları: tek satırda kalır, satır kırılınca "− 1" alta düşüyordu. */
.choice-grid.choice-grid--eq .choice {
  white-space: nowrap;
  font-size: clamp(.85rem, 3.6vw, 1.15rem);
  letter-spacing: -.03em;
  padding-inline: .5rem;
}

.quad-grid .choice {
  min-height: 7rem;
  border-radius: 0;
  border: 0;
  font-family: var(--font);
  font-size: 1.05rem;
}

.quad-grid .choice:nth-child(1),
.quad-grid .choice:nth-child(3) {
  border-right: 2px solid var(--ink);
}

.quad-grid .choice:nth-child(1),
.quad-grid .choice:nth-child(2) {
  border-bottom: 2px solid var(--ink);
}

.quad-board__axis {
  position: absolute;
  font-family: var(--font-mono);
  font-size: .8rem;
  color: var(--muted);
}

.quad-board__axis--x {
  right: -1.1rem;
  top: calc(50% - .7rem);
}

.quad-board__axis--y {
  left: calc(50% + .3rem);
  top: -1.3rem;
}

.plane-dpad__centre {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  color: var(--muted);
}

/* Lessons hub */
.lessons {
  gap: 2rem;
}

.mode-grid--three {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  align-items: stretch;
}

.mode-grid--three .mode-card {
  gap: .9rem;
}

.mode-grid--three .mode-card>.btn {
  margin-top: auto;
}

.mode-card--play {
  border-top: 3px solid var(--primary);
}

.mode-card--practice {
  border-top: 3px solid var(--good);
}

.mode-card--class {
  border-top: 3px solid var(--warn);
}

.mode-card__icon--class {
  background: var(--warn-soft);
  color: var(--warn);
}

.fact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  font-size: .9rem;
}

.fact-list li {
  display: flex;
  align-items: center;
  gap: .55rem;
}

.fact-list .icon {
  width: 1rem;
  height: 1rem;
  color: var(--muted);
}

.practice-section {
  gap: 1rem;
  scroll-margin-top: 1rem;
}

.topic-random {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
}

.topic-random:hover {
  background: var(--surface-2);
}

.topic-random>.icon:last-child {
  margin-left: auto;
  color: var(--muted);
}

.topic-random-row {
  display: flex;
  gap: .75rem;
}

.topic-random-row>.topic-random {
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.topic-random-row>.topic-random:first-child {
  flex: 0 0 calc(60% - .375rem);
  min-width: 0;
}

.topic-level {
  flex: 1;
  min-width: 0;
  font: inherit;
  cursor: pointer;
}

.level-seg .btn {
  flex: 1;
}

.level-screen {
  max-width: 44rem;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.level-pick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: .5rem;
}

.level-card {
  --depth: 6px;
  flex-direction: column;
  gap: .6rem;
  min-height: 11rem;
  padding: 1.25rem 1rem;
  border-radius: var(--radius);
  --btn-ink: #fff;
  animation: level-pop .45s var(--spring) backwards;
}

.level-card:nth-child(2) {
  animation-delay: .07s;
}

.level-card:nth-child(3) {
  animation-delay: .14s;
}

.level-card--easy {
  --btn-bg: var(--good);
  --btn-edge: var(--good-edge);
  --btn-line: var(--good);
}

.level-card--medium {
  --btn-bg: var(--warn);
  --btn-edge: var(--warn-edge);
  --btn-line: var(--warn);
}

.level-card--hard {
  --btn-bg: var(--bad);
  --btn-edge: var(--bad-edge);
  --btn-line: var(--bad);
}

.level-card[aria-checked="true"] {
  outline: 4px solid var(--btn-bg);
  outline-offset: 4px;
}

.level-card__icon {
  width: 3.4rem;
  height: 3.4rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}

.level-card__icon .icon {
  width: 1.9rem;
  height: 1.9rem;
}

.level-card__name {
  font-size: 1.6rem;
  font-weight: 900;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .15);
}

.level-card__mult {
  padding: .2rem .75rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .18);
  font-size: .95rem;
  font-weight: 900;
}

@keyframes level-pop {
  from {
    opacity: 0;
    transform: scale(.85) translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .level-card {
    animation: none;
  }
}

.topic-random__icon {
  width: 2.6rem;
  height: 2.6rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--good-soft);
  color: var(--good);
  flex: none;
}

.topic-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1rem;
}

.topic-group {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.topic-group__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  font-weight: 700;
  margin: 0;
}

.topic-group__title .icon {
  color: var(--primary);
}

.topic-group .topic-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.topic {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .7rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  text-decoration: none;
  min-height: var(--tap);
  text-align: left;
}

.topic:hover {
  border-color: var(--line-strong);
  background: var(--surface-2);
}

.topic.is-pressed {
  background: var(--surface-3);
}

.topic__title {
  font-weight: 600;
}

.topic__meta {
  font-size: .78rem;
  color: var(--muted);
}

.topic .progress {
  height: 4px;
}

/* Class activity settings */
.activity {
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}

.setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.setting--column {
  flex-direction: column;
  align-items: stretch;
}

.setting__text {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.setting.is-disabled {
  opacity: .5;
}

.stepper {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.stepper__btn {
  width: calc(var(--tap) + 8px);
  height: calc(var(--tap) + 8px);
  padding: 0;
}

.stepper__btn .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.stepper__value {
  min-width: 3.5rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: none;
  border: 0;
  padding: .25rem;
  cursor: pointer;
  min-height: var(--tap);
  font-weight: 600;
}

.switch__track {
  width: 3.4rem;
  height: 1.9rem;
  border-radius: 999px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  position: relative;
  flex: none;
}

.switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.9rem - 6px);
  height: calc(1.9rem - 6px);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.switch[aria-checked="true"] .switch__track {
  background: var(--primary);
  border-color: var(--primary);
}

.switch[aria-checked="true"] .switch__thumb {
  left: calc(100% - 1.9rem + 4px);
}

.switch__label {
  min-width: 3.5rem;
  text-align: left;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.chip {
  border-radius: 999px;
  padding-inline: 1rem;
}

.chip[aria-pressed="true"] {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.activity__start {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: stretch;
  text-align: center;
}

/* Class activity result */
.result-total {
  font-family: var(--font-head);
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.result-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .6rem;
  width: 100%;
}

.timer.is-over .timer__value {
  stroke: var(--bad);
}

/* Question screen fits the viewport. No page zoom: the plane takes the largest square that fits
   both its column and the height left under the header and top bar. */
.page-question {
  --q-chrome: 9.5rem;
}

.page-question .main {
  padding-top: .5rem;
  padding-bottom: 1rem;
}

.page-question .q-top {
  gap: .75rem;
  min-height: 3.25rem;
  padding: .3rem 0;
}

.page-question .q-top .progress {
  min-width: 4rem;
}

.page-question .plane-wrap {
  width: min(100%, calc(100dvh - var(--q-chrome)));
  max-width: none;
}

.page-question .q-visual {
  align-items: center;
}

.page-question .q-text {
  font-size: clamp(1.15rem, .9rem + .7vw, 1.6rem);
}

.page-question .q-answer {
  gap: .75rem;
}

.page-question .q-answer .q-info {
  gap: .6rem;
}

.page-question .choice {
  min-height: 3.6rem;
}

/* The mode badge is filled once a round starts; until then it would show as an empty pill. */
.q-top .badge:empty {
  display: none;
}

.page-question .eq-box {
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  padding: .75rem 1rem;
}

.page-question .frac-input__stack {
  width: 6.5rem;
}

.page-question .frac-input__box {
  min-height: 2.8rem;
  font-size: 1.35rem;
  padding-block: .2rem;
}

.page-question .plane-dpad .btn,
.page-question .plane-slots .btn {
  min-height: var(--tap);
}

.page-question .main {
  justify-content: flex-start;
}

.page-question [data-question-root] {
  max-width: 58rem;
}

.page-question .q-single {
  max-width: 40rem;
}

/* Pen overlay: the canvas sits on <main> so it covers the whole page area. */
.page-question .main,
.page-question [data-question-root] {
  position: relative;
}

.draw-canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
  pointer-events: none;
  touch-action: none;
}

.draw-canvas.is-active {
  pointer-events: auto;
  cursor: crosshair;
}

.draw-veil {
  position: absolute;
  inset: 0;
  z-index: 29;
  pointer-events: none;
  /* Drawing mode is shown by a thin frame only; the question stays fully readable under the ink. */
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--primary) 55%, transparent);
  border-radius: var(--radius);
  opacity: 0;
  transition: opacity .2s ease;
}

.draw-veil.is-active {
  opacity: 1;
  clip-path: inset(0);
}

[data-motion="reduce"] .draw-veil {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .draw-veil {
    transition: none;
  }
}

[data-question-root].is-drawing .q-top,
[data-question-root].is-drawing [data-q-body] {
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- Pen tray: tools in one slot, colour caps, clear and close. A rail on the left on computers and
   boards; phones lay the same groups out as a tray above the check bar (mobile.css). ---------- */
.draw-bar {
  position: fixed;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: .5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.4rem;
  box-shadow: 0 5px 0 var(--line), 0 14px 32px rgba(15, 23, 42, .14);
}

.draw-bar__tools,
.draw-bar__colors,
.draw-bar__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
}

/* The tools share one sunken slot, so it reads as "pick one". */
.draw-bar__tools {
  padding: .25rem;
  background: var(--surface-2);
  border-radius: 1.1rem;
  box-shadow: inset 0 2px 3px rgba(15, 23, 42, .08);
}

.draw-bar .draw-bar__tool {
  position: relative;
  width: var(--tap);
  height: var(--tap);
  border-radius: .9rem;
}

.draw-bar__tools .draw-bar__tool:not([aria-pressed="true"]) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.draw-bar__tool[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--primary) 55%, #000);
}

/* The pen key carries a dot in the colour it writes with. */
.draw-bar__tool[data-draw-tool="pen"]::after {
  content: "";
  position: absolute;
  right: .28rem;
  bottom: .28rem;
  width: .62rem;
  height: .62rem;
  border-radius: 50%;
  background: var(--draw-current, var(--draw-1));
  box-shadow: 0 0 0 2px var(--surface);
}

.draw-bar__color {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.draw-bar__color:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 1px;
}

/* Colour caps: a little lip at the bottom like the app's keys; the chosen one grows and gets a ring. */
.draw-swatch {
  width: 1.65rem;
  height: 1.65rem;
  border-radius: 50%;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 0 0 1px var(--line-strong);
  transition: transform .12s ease, box-shadow .12s ease;
}

.draw-bar__color[aria-pressed="true"] .draw-swatch {
  transform: scale(1.12);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 0 0 3px var(--surface), 0 0 0 5.5px var(--ink);
}

.draw-swatch--1 {
  background: var(--draw-1);
}

.draw-swatch--2 {
  background: var(--draw-2);
}

.draw-swatch--3 {
  background: var(--draw-3);
}

.draw-swatch--4 {
  background: var(--draw-4);
}

.draw-bar .draw-bar__clear {
  color: var(--bad);
}

/* Close only exists while a tool is on. */
.draw-bar:not(.is-open) .draw-bar__close {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .draw-swatch {
    transition: none;
  }
}

/* The pen rail is fixed on the left; keep question content clear of it at every width. */
.page-question.has-pen .main {
  padding-left: max(1.25rem, calc(var(--tap) + 2.25rem));
}

/* Settings: same width as every other page. */
.settings-page {
  width: 100%;
}

.settings-list {
  padding: 0;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.5rem;
}

.settings-row+.settings-row {
  border-top: 1px solid var(--line);
}

.settings-row__text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 12rem;
  flex: 1 1 14rem;
}

.settings-row .segmented {
  flex: 0 1 auto;
  justify-content: flex-end;
}

.settings-row--stack {
  flex-direction: column;
  align-items: stretch;
}

.settings-name {
  display: flex;
  gap: .6rem;
}

.settings-name .input {
  flex: 1;
  min-width: 0;
}

/* Leaderboard: podium accents, badges never stretch inside stacks */
.stack>.badge {
  align-self: flex-start;
}

.rank--1,
.rank--2,
.rank--3 {
  display: inline-grid;
  place-items: center;
  min-width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-weight: 700;
  color: #fff;
}

.rank--1 {
  background: #d4a017;
}

.rank--2 {
  background: #9aa4b2;
}

.rank--3 {
  background: #b87333;
}

.settings-row--stack .settings-row__text {
  flex: none;
}

/* Sound toggle: one icon per state */
[data-q-sound] .q-sound__off,
[data-q-sound][aria-pressed="false"] .q-sound__on {
  display: none;
}

[data-q-sound][aria-pressed="false"] .q-sound__off {
  display: block;
}

[data-q-sound][aria-pressed="false"] {
  color: var(--muted);
}

/* Landing page */
.page-home .main {
  max-width: 72rem;
}

.landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 3rem;
  align-items: center;
  padding: 2.5rem 0 3rem;
}

.landing-hero__text {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.landing-hero__visual {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  align-items: center;
}

.hero-plane {
  width: 100%;
  max-width: 26rem;
  pointer-events: none;
}

.hero-plane .plane-wrap {
  max-width: none;
}

.hero-plane__caption {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  align-items: center;
}

.hero-plane__eq {
  font-size: 1rem;
  padding: .45rem .9rem;
}

.trust-row {
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.25rem;
  color: var(--muted);
  font-size: .9rem;
}

.trust-row li {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.trust-row .icon {
  width: 1rem;
  height: 1rem;
  color: var(--good);
}

.landing-section {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
}

.landing-section__title {
  margin: 0;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  counter-reset: none;
}

.step {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}

.step__num {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: var(--primary-ink);
  font-weight: 700;
}

.topic-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.topic-overview__group {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.topic-overview .chip-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
  margin: 1rem 0 2rem;
  padding: 1.75rem 2rem;
  border-left: 4px solid var(--primary);
}

/* Settings: the "Class" tab opens a window instead of a panel; a dot marks membership. Invite link and class pick. */
.pill-tabs__tab--pop { position: relative; }
.pill-tabs__tab--pop.is-member::after {
  content: "";
  position: absolute;
  top: .35rem;
  right: .45rem;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--good, #16a34a);
}
.invite-link { font-weight: 700; text-align: center; }
.invite-pick__btn { justify-content: flex-start; gap: .6rem; }
.invite-pick__btn .muted { margin-left: auto; font-family: ui-monospace, monospace; letter-spacing: .08em; }

/* Sign-in pages: one centred card */
.page-auth .main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-card {
  max-width: 30rem;
  width: 100%;
  margin: 1.5rem auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem;
}

.auth-head {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.25rem;
}



.auth-head__texts {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
}

.auth-head .h1 {
  font-size: 1.75rem;
  margin: 0;
}

.auth-head p.muted {
  margin: 0;
}

.auth-head__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
}

.auth-options {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.auth-card .choice-card {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  background: var(--surface);
}

.auth-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .9rem;
}

.auth-foot a {
  font-weight: 600;
  text-decoration: none;
}

.auth-foot a:hover {
  text-decoration: underline;
}

.auth-verify {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: .5rem 0;
}

.auth-verify__status {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--muted);
}

.spinner {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--primary);
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.auth-card .local-item__pick {
  padding: .9rem 1rem;
}

/* About / legal documents */
.doc {
  max-width: 46rem;
  width: 100%;
  margin: 1rem auto 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.doc__head {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: flex-start;
}

.doc__body {
  padding: 1.75rem 2rem;
  line-height: 1.75;
}

.doc__sections,
.card.doc__sections {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.doc__section {
  padding: 1.4rem 2rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.doc__section .h3 {
  margin: 0;
  line-height: 1.35;
}

.doc__section p {
  margin: 0;
}

.doc__section+.doc__section {
  border-top: 1px solid var(--line);
}

@media (max-width: 860px) {
  .landing-hero {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-top: 1.25rem;
  }

  .landing-hero__visual {
    order: 2;
  }

  .hero-plane {
    max-width: 18rem;
  }
}

@media (max-width: 640px) {
  .auth-card {
    padding: 1.4rem;
    margin: .5rem auto;
  }

  .landing-cta {
    padding: 1.25rem;
  }

  .doc__body,
  .doc__section {
    padding-inline: 1.25rem;
  }

  .doc__body {
    padding-block: 1.25rem;
    line-height: 1.6;
  }
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(15, 23, 42, .35);
}

.drawer.is-open {
  box-shadow: 0 0 40px rgba(15, 23, 42, .18);
}

.result-actions .btn {
  width: 100%;
}

/* Safety net: nothing may widen the page horizontally. On phones a wider page makes the browser zoom out,
   which also pushes fixed bottom panels (answer feedback) out of view. clip keeps sticky bars working. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.q-layout>*,
.q-answer,
.q-info,
.q-data,
.pt-row {
  min-width: 0;
}

.pt-chip {
  max-width: 100%;
}

.q-top .badge {
  white-space: nowrap;
}


/* =====================================================================
   GAME SKIN: bouncy entrances, juicy feedback, gamified pages
   ===================================================================== */
body {
  font-weight: 600;
}

.h1 {
  font-weight: 900;
  letter-spacing: -.01em;
}

.h2,
.h3 {
  font-weight: 800;
}

.eyebrow {
  font-weight: 900;
  letter-spacing: .1em;
}

.stack--tight {
  gap: .35rem;
}

.art {
  display: block;
  max-width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .8rem .3rem .35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #1E2A47;
  font-weight: 900;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .12);
}

.chip__art {
  width: 1.6rem;
  height: 1.6rem;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 2rem 1rem;
  text-align: center;
}

.empty-state__art {
  width: 8rem;
}

.brand__mark {
  background: var(--brand);
  border-radius: 12px;
  box-shadow: 0 3px 0 var(--brand-edge);
}

.brand__name {
  font-weight: 900;
  letter-spacing: .04em;
}

/* ---------- Motion primitives ---------- */
@keyframes m-fade {
  from {
    opacity: 0;
  }
}

@keyframes m-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes m-pop {
  0% {
    opacity: 0;
    transform: scale(.6);
  }

  60% {
    opacity: 1;
    transform: scale(1.06);
  }

  80% {
    transform: scale(.97);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes m-drop {
  0% {
    opacity: 0;
    transform: translateY(-60px) scale(.9);
  }

  55% {
    opacity: 1;
    transform: translateY(8px) scale(1.03);
  }

  75% {
    transform: translateY(-4px);
  }

  100% {
    transform: none;
  }
}

@keyframes m-spring-up {
  0% {
    transform: translateY(105%);
  }

  60% {
    transform: translateY(-6%);
  }

  80% {
    transform: translateY(2%);
  }

  100% {
    transform: none;
  }
}

@keyframes m-shake {

  0%,
  100% {
    transform: translateX(0);
  }

  15%,
  55% {
    transform: translateX(-8px) rotate(-1.5deg);
  }

  35%,
  75% {
    transform: translateX(8px) rotate(1.5deg);
  }
}

@keyframes m-bump {
  30% {
    transform: scale(1.22);
  }

  55% {
    transform: scale(.94);
  }

  75% {
    transform: scale(1.05);
  }
}

@keyframes m-punch {
  0% {
    transform: scale(1);
  }

  25% {
    transform: scale(1.18) rotate(-2deg);
  }

  50% {
    transform: scale(.95) rotate(1deg);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes m-heart {

  0%,
  100% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.18);
  }

  30% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.1);
  }
}

@keyframes m-float {

  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }

  50% {
    transform: translateY(-8px) rotate(2deg);
  }
}

@keyframes m-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Stripes slide by one tile with transform (no repaint); the layer starts one tile to the left so no gap shows. */
@keyframes m-stripes {
  to {
    transform: translateX(56px);
  }
}

@keyframes m-shimmer {
  to {
    transform: translateX(100%);
  }
}

@keyframes m-stamp {
  0% {
    opacity: 0;
    transform: scale(2.2) rotate(-12deg);
  }

  60% {
    opacity: 1;
    transform: scale(.9) rotate(2deg);
  }

  100% {
    transform: none;
  }
}

@keyframes m-draw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes m-ripple {
  from {
    opacity: .7;
    transform: scale(.5);
  }

  to {
    opacity: 0;
    transform: scale(3.2);
  }
}

@keyframes m-pt {
  0% {
    transform: scale(0);
  }

  45% {
    transform: scale(1.5);
  }

  70% {
    transform: scale(.85);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes m-glow {

  0%,
  100% {
    opacity: .55;
    transform: scale(1);
  }

  50% {
    opacity: .9;
    transform: scale(1.08);
  }
}

@keyframes m-wiggle {

  0%,
  100% {
    transform: rotate(0);
  }

  20% {
    transform: rotate(-8deg);
  }

  40% {
    transform: rotate(8deg);
  }

  60% {
    transform: rotate(-5deg);
  }

  80% {
    transform: rotate(4deg);
  }
}

/* Blocks rise into place without growing past their size, so they never cover their neighbours mid-animation.
   The bouncy m-pop stays for small things (ticks, badges, pips). */
@keyframes m-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

.pop-in {
  animation: m-rise .5s var(--spring) backwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}
/* A page redrawn with fresh data (js/sync.js) appears as it is. */
.no-enter .pop-in, .no-enter .drop-in, .no-enter .reveal { animation: none; }

.drop-in {
  animation: m-drop .65s cubic-bezier(.3, 1.3, .5, 1) backwards;
  animation-delay: calc(150ms + var(--i, 0) * 90ms);
}

.reveal {
  animation: m-rise .5s var(--spring) backwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}

.float {
  animation: m-float 3.2s ease-in-out infinite;
}

.is-bump {
  animation: m-bump .45s ease-out;
}

.btn,
.choice,
.chest-btn,
.device-tile,
.look-tile,
.game-card,
.dpad-btn,
.pill-tabs__tab {
  transition: transform 70ms ease-out, box-shadow 70ms ease-out, filter .15s ease, background-color .15s ease, color .15s ease;
}

.drawer {
  transition: transform .3s var(--spring);
}

.drawer-backdrop:not([hidden]) {
  animation: m-fade .2s ease-out;
}

.toast {
  animation: m-pop .4s var(--spring);
  border-radius: 999px;
  font-weight: 800;
  box-shadow: var(--float);
}

.kb:not([hidden]) {
  animation: m-spring-up .4s cubic-bezier(.3, 1.2, .5, 1);
}

.card--center .h1 {
  animation: m-pop .5s var(--spring) backwards;
}

/* fx layer (particles, flying numbers, confetti) */
.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  overflow: hidden;
}

.fx-spark {
  position: fixed;
  border-radius: 3px;
}

.fx-spark--star {
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  border-radius: 0;
}

.fx-fly {
  position: fixed;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}

.fx-text {
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--warn);
  -webkit-text-stroke: 1px rgba(0, 0, 0, .08);
  text-shadow: 0 2px 0 var(--surface), 0 0 14px rgba(255, 201, 60, .6);
  white-space: nowrap;
}

.fx-text--full {
  color: var(--purple);
}

.fx-ripple {
  position: absolute;
  width: 2.4rem;
  height: 2.4rem;
  margin: -1.2rem 0 0 -1.2rem;
  border-radius: 50%;
  border: 3px solid var(--primary);
  pointer-events: none;
  animation: m-ripple .6s ease-out forwards;
}

.fx-confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 94;
  pointer-events: none;
}

/* ---------- Avatars and frames ---------- */
.avatar {
  --ring: 4px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  padding: var(--ring);
  background: var(--surface-3);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .12);
}

.avatar__img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

.avatar--sm {
  width: 2.6rem;
  height: 2.6rem;
  --ring: 3px;
}

.avatar--md {
  width: 4rem;
  height: 4rem;
}

.avatar--lg {
  width: 5.5rem;
  height: 5.5rem;
  --ring: 5px;
}

.avatar--xl {
  width: 7.5rem;
  height: 7.5rem;
  --ring: 6px;
}

.avatar__frame {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  max-width: none;
  pointer-events: none;
  z-index: 2;
}

/* ---------- Dashboard ---------- */
.dash {
  gap: 1.25rem;
}

.hero-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 11rem;
  padding: 1.5rem 1.75rem;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(135deg, #2F80ED 0%, #6B5CF6 60%, #B44BD8 100%);
  box-shadow: 0 6px 0 #3B3FB3;
}

.hero-banner__text {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  min-width: 0;
}

.hero-banner__kicker {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .78rem;
  opacity: .85;
}

.hero-banner__title {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .15);
  overflow-wrap: anywhere;
}

.hero-banner__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .3rem;
}

.game-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.4rem 1.5rem;
  border-radius: 28px;
  color: #fff;
  text-decoration: none;
  --gc: var(--good);
  --gc-edge: var(--good-edge);
  background: var(--gc);
  box-shadow: 0 7px 0 var(--gc-edge);
  margin-bottom: 7px;
  user-select: none;
  -webkit-user-select: none;
}

.game-card:active,
.game-card.is-pressed {
  transform: translateY(7px) scale(.99);
  box-shadow: 0 0 0 var(--gc-edge);
}

.game-card__pattern {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .12) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, .12) 75%, transparent 75%, transparent);
  background-size: 56px 56px;
  animation: m-stripes 2.4s linear infinite;
  pointer-events: none;
}

.game-card__icon {
  position: relative;
  flex: none;
  width: 5.5rem;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .15));
}

.game-card__text {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
}

.game-card__title {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.1;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .14);
}

.game-card__lead {
  font-weight: 700;
  opacity: .92;
}

.game-card__go {
  position: relative;
  flex: none;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--gc);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .15);
  animation: m-heart 2.2s ease-in-out infinite;
}

.game-card__go .icon {
  width: 1.8rem;
  height: 1.8rem;
}

.game-card--play {
  min-height: 11rem;
}

.game-card--play .game-card__icon {
  width: 7.5rem;
}

.game-card--play .game-card__title {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem);
}

.game-card--practice {
  --gc: var(--purple);
  --gc-edge: var(--purple-edge);
}

.game-card--class {
  --gc: var(--warn);
  --gc-edge: var(--warn-edge);
}

.game-card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.game-card-row .game-card__icon {
  width: 4.5rem;
}

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

/* Tablets in portrait: side by side the streak card got too narrow (title broke, day labels touched). */
@media (max-width: 900px) {
  .dash-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.quests {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.quest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.quest {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .7rem .8rem;
  border-radius: 18px;
  background: var(--surface-2);
}

.quest__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.quest__title {
  font-weight: 800;
}

.quest__bar {
  height: 22px;
}

.quest__bar .progress__bar {
  background: var(--gold);
}

.quest--open .quest__bar .progress__bar,
.quest--ready .quest__bar .progress__bar {
  background: var(--good);
}

.quest__count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: 900;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.chest-btn {
  flex: none;
  width: 4.2rem;
  height: 4.2rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.chest-btn:disabled {
  cursor: default;
}

.chest-btn__img {
  width: 100%;
}

.quest--locked .chest-btn__img {
  filter: grayscale(.2) opacity(.9);
}

.quest--ready .chest-btn {
  animation: m-wiggle 1.4s ease-in-out infinite;
}

.quest--ready .chest-btn:active {
  transform: scale(.88);
}

.chest-btn.is-opening {
  animation: m-punch .5s ease-out;
}

.streak-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.streak-card__head {
  display: flex;
  align-items: center;
  gap: .9rem;
}

.streak-card__flame {
  width: 3.6rem;
  flex: none;
  filter: grayscale(1) opacity(.5);
}

.streak-card__flame.is-lit {
  filter: none;
  animation: m-float 2.4s ease-in-out infinite;
}

.streak-week {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .35rem;
}

.streak-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  animation: m-pop .5s var(--spring) backwards;
  animation-delay: calc(200ms + var(--d) * 60ms);
}

.streak-day__dot {
  width: min(2.8rem, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08);
}

.streak-day.is-done .streak-day__dot {
  background: linear-gradient(180deg, #FFC93C, #FF9F1C);
  box-shadow: 0 3px 0 var(--warn-edge);
}

.streak-day.is-today .streak-day__dot {
  outline: 3px solid var(--warn);
  outline-offset: 2px;
}

.streak-day.is-future .streak-day__dot {
  opacity: .5;
}

.streak-day__flame {
  width: 70%;
}

.streak-day__label {
  font-size: .72rem;
  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
}

.streak-day.is-today .streak-day__label {
  color: var(--warn-ink);
}

/* ---------- Leaderboard ---------- */
.lb__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.lb__me {
  align-self: center;
  padding: .4rem 1rem;
  border-radius: 999px;
  background: var(--good-soft);
  color: var(--good-ink);
  font-weight: 900;
}

.pill-tabs {
  display: inline-flex;
  gap: .3rem;
  padding: .3rem .3rem calc(.3rem + 3px);
  border-radius: 999px;
  background: var(--surface-3);
}

.pill-tabs__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  text-align: center;
  padding: .45rem 1.1rem;
  border-radius: 999px;
  font-weight: 900;
  color: var(--muted);
  text-decoration: none;
}

.pill-tabs__tab.is-active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 3px 0 var(--edge);
}

.podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: .6rem;
  max-width: 36rem;
  width: 100%;
  margin: 1.5rem auto 0;
}

.podium__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.podium__who {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding-bottom: .6rem;
  min-width: 0;
  max-width: 100%;
  color: var(--ink);
  text-decoration: none;
  animation: m-pop .6s var(--spring) backwards;
  animation-delay: .55s;
}

.podium__col--1 .podium__who {
  animation-delay: .75s;
}

.podium__crown {
  position: absolute;
  top: -1.9rem;
  width: 2.6rem;
  z-index: 1;
  animation: m-float 2.6s ease-in-out infinite;
}

.podium__name {
  font-weight: 900;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium__score {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-weight: 900;
  color: var(--warn-ink);
}

.podium__coin {
  width: 1.2rem;
}

.podium__block {
  --pc: #CBD4E4;
  --pc-top: #E1E7F2;
  --pc-side: #A9B4C7;
  position: relative;
  width: 100%;
  height: 6rem;
  border-radius: 14px 14px 0 0;
  background: var(--pc);
  box-shadow: inset 0 10px 0 var(--pc-top), inset -10px 0 0 var(--pc-side);
  display: grid;
  place-items: center;
  transform-origin: bottom;
  animation: m-podium .7s cubic-bezier(.3, 1.4, .5, 1) backwards;
}

@keyframes m-podium {
  from {
    transform: scaleY(0);
  }
}

.podium__col--1 .podium__block {
  --pc: #FFC93C;
  --pc-top: #FFE27A;
  --pc-side: #E0A100;
  height: 9rem;
  animation-delay: .2s;
}

.podium__col--2 .podium__block {
  --pc: #C5CEDB;
  --pc-top: #E8EDF4;
  --pc-side: #98A5B8;
  height: 7rem;
  animation-delay: .05s;
}

.podium__col--3 .podium__block {
  --pc: #E8A066;
  --pc-top: #F6C79E;
  --pc-side: #B87333;
  height: 5.5rem;
  animation-delay: .35s;
}

.podium__rank {
  font-size: 2.6rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .18);
}

/* Canlı güncelleme: podyum ve satırlar giriş animasyonunu tekrar oynatmaz. */
.is-live .podium__who,
.is-live .podium__block,
.is-live .lb-row {
  animation: none;
  transition: none;
}

.podium__col.is-empty .podium__block {
  opacity: .45;
}

.podium__who.is-me .podium__name {
  color: var(--primary);
}

.lb-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.lb-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .9rem;
  border-radius: 20px;
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: 0 4px 0 var(--edge);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .4s ease, transform .5s var(--spring);
}

.lb-row.is-in {
  opacity: 1;
  transform: none;
}

.lb-row.is-me {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.lb-row__rank {
  width: 2rem;
  text-align: center;
  font-weight: 900;
  color: var(--muted);
}

.lb-row__name {
  flex: 1;
  min-width: 0;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lb-row__score {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 900;
}

.lb-row__coin {
  width: 1.3rem;
}

/* Skeleton: grey silhouettes with a light wave passing over them */
.is-skeleton .lb-row {
  opacity: 1;
  transform: none;
}

.sk {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--surface-3);
  border-radius: 999px;
}

.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  animation: m-shimmer 1.3s ease-in-out infinite;
}

:root[data-theme="dark"] .sk::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
}

.sk--circle {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
}

.sk--sm {
  width: 2.6rem;
  height: 2.6rem;
}

.sk--line {
  width: 70%;
  height: .9rem;
  margin-top: .3rem;
}

.lb-row .sk--line {
  flex: 1;
  margin: 0;
}

.podium.is-skeleton .podium__block {
  --pc: var(--surface-3);
  --pc-top: var(--surface-2);
  --pc-side: var(--line-strong);
  animation: none;
  overflow: hidden;
}

.podium.is-skeleton .podium__block::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  animation: m-shimmer 1.3s ease-in-out infinite;
}

.podium.is-skeleton .podium__who {
  animation: none;
  width: 100%;
}

/* Loading: spinner or skeleton while the API answers (loader() / C.loader) */
.loader {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
}

.loader__spin {
  width: 2.2rem;
  height: 2.2rem;
  border-width: 3px;
}

.loader__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.loader--sk {
  flex-direction: column;
  justify-content: flex-start;
  gap: .9rem;
  padding: .25rem 0;
}

.loader--sk > .sk--line:nth-of-type(2n),
.loader__panel > .sk--line:nth-of-type(2n) {
  width: 55%;
}

.loader__row {
  display: flex;
  align-items: center;
  gap: .8rem;
}

.loader__row .sk--line {
  flex: 1;
  margin: 0;
}

.loader__row:nth-child(odd) .sk--line {
  flex: 0 1 60%;
}

.loader__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: .9rem;
}

.loader__card {
  height: 7rem;
  border-radius: 20px;
}

.loader__panel {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.loader__title {
  width: 40%;
  height: 1.3rem;
}

@media (prefers-reduced-motion: reduce) {
  .loader .sk::after {
    animation: none;
  }

  .loader__spin {
    animation-duration: 2s;
  }
}

[data-motion="reduce"] .loader .sk::after {
  animation: none;
}

[data-motion="reduce"] .loader__spin {
  animation-duration: 2s;
}

/* ---------- Profile ---------- */
.profile-hero {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: 0 5px 0 var(--edge);
}

.profile-hero__banner {
  height: 8.5rem;
  background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .25) 0 3rem, transparent 3rem), radial-gradient(circle at 85% 70%, rgba(255, 255, 255, .18) 0 4rem, transparent 4rem), linear-gradient(120deg, #FF9F1C, #FF5A5F 45%, #8B5CF6);
  position: relative;
  overflow: hidden;
}

.profile-hero__banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .1) 75%, transparent 75%, transparent);
  animation: m-stripes 3s linear infinite;
  background-size: 56px 56px;
}

.profile-hero__body {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0 1.5rem 1.4rem;
  margin-top: -3.75rem;
  position: relative;
}

.profile-hero__body>.avatar {
  box-shadow: 0 0 0 5px var(--surface), 0 6px 0 5px var(--edge);
}

.profile-hero__id {
  flex: 1;
  min-width: 10rem;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  margin-top: 4.6rem;
  padding-bottom: .2rem;
}

.profile-hero__id .h1 {
  overflow-wrap: anywhere;
}

.profile-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .8rem;
}

.res-badge {
  --rb: var(--gold-soft);
  --rb-edge: var(--gold-edge);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  padding: 1rem .6rem .9rem;
  border-radius: 22px;
  background: var(--rb);
  border: 2px solid color-mix(in srgb, var(--rb-edge) 35%, transparent);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--rb-edge) 55%, transparent);
  text-align: center;
}

.res-badge__art {
  width: 3.4rem;
  margin-bottom: .2rem;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .1));
}

.res-badge__value {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.1;
}

.res-badge__label {
  font-size: .78rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.res-badge--purple {
  --rb: var(--purple-soft);
  --rb-edge: var(--purple-edge);
}

.res-badge--bad {
  --rb: var(--bad-soft);
  --rb-edge: var(--bad-edge);
}

.res-badge--warn {
  --rb: var(--warn-soft);
  --rb-edge: var(--warn-edge);
}

.res-badge--primary {
  --rb: var(--primary-soft);
  --rb-edge: var(--primary-edge);
}

.res-badge--info {
  --rb: var(--info-soft);
  --rb-edge: var(--info-edge);
}

.ach-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: .8rem;
}

.ach {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .9rem .5rem;
  border-radius: 20px;
  background: var(--surface-2);
  text-align: center;
  animation: m-pop .5s var(--spring) backwards;
  animation-delay: calc(300ms + var(--i) * 50ms);
}

.ach__medal {
  position: relative;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-3);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .08);
}

.ach.is-unlocked .ach__medal {
  background: radial-gradient(circle at 35% 30%, #FFF3C4, #FFC93C 70%);
  box-shadow: 0 4px 0 var(--gold-edge), 0 0 0 3px #fff inset;
}

.ach__art {
  width: 62%;
}

.ach:not(.is-unlocked) .ach__art {
  filter: grayscale(1) opacity(.45);
}

/* Progress fill: gold rises to the progress level behind a rolling wave (see ach_fill in profile.php).
   --top is where the wave layer rests: the wave swings evenly around the gold level. */
.ach__fill {
  --m: 4.2rem;
  --top: calc((1 - var(--p)) * var(--m) - var(--wh) / 2);
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}

.ach__wave {
  --rise-at: calc(500ms + var(--i, 0) * 50ms + var(--lag));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% + var(--wh));
  transform: translateY(var(--top));
  animation: ach-rise var(--rise) cubic-bezier(.3, 1.25, .5, 1) var(--rise-at) backwards;
  will-change: transform;
}

.ach__roll {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(100% + var(--ww));
  height: 100%;
  -webkit-mask-image: url(/assets/images/ach-wave.svg), linear-gradient(#000, #000);
  mask-image: url(/assets/images/ach-wave.svg), linear-gradient(#000, #000);
  -webkit-mask-size: var(--ww) var(--wh), 100% 100%;
  mask-size: var(--ww) var(--wh), 100% 100%;
  -webkit-mask-repeat: repeat-x, no-repeat;
  mask-repeat: repeat-x, no-repeat;
  -webkit-mask-position: 0 0, 0 calc(var(--wh) - 1px);
  mask-position: 0 0, 0 calc(var(--wh) - 1px);
  animation: ach-roll var(--wd) linear infinite var(--dir);
  will-change: transform;
}

.ach__unroll {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--m);
  height: var(--m);
  animation: ach-unroll var(--wd) linear infinite var(--dir);
}

.ach__gold {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #FFF3C4, #FFC93C 70%);
  transform: translateY(calc(var(--top) * -1));
  animation: ach-sink var(--rise) cubic-bezier(.3, 1.25, .5, 1) var(--rise-at) backwards;
}

.ach__wave--back {
  --top: calc((1 - var(--p)) * var(--m) - var(--wh) / 2 - 3px);
  opacity: .45;
}

.ach__wave--back .ach__roll {
  background: #FFC93C;
  animation-duration: var(--wd2);
  animation-direction: var(--dir2);
  animation-delay: calc(var(--wd2) * -.5);
}

.ach__medal .ach__fill .ach__art.ach__art--gold {
  width: 62%;
  filter: grayscale(1) sepia(1) saturate(4.5) hue-rotate(-8deg) brightness(1.08);
}

@keyframes ach-rise {
  from {
    transform: translateY(var(--m));
  }
}

@keyframes ach-sink {
  from {
    transform: translateY(calc(var(--m) * -1));
  }
}

@keyframes ach-roll {
  to {
    transform: translateX(calc(var(--ww) * -1));
  }
}

@keyframes ach-unroll {
  to {
    transform: translateX(var(--ww));
  }
}

@media (prefers-reduced-motion: reduce) {

  .ach__wave,
  .ach__roll,
  .ach__unroll,
  .ach__gold {
    animation: none;
  }
}

.ach__lock {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--muted);
  color: #fff;
  z-index: 3;
}

.ach__lock .icon {
  width: .9rem;
  height: .9rem;
}

.ach__name {
  font-weight: 900;
  font-size: .85rem;
  line-height: 1.2;
}

.ach__meta {
  font-size: .72rem;
  font-weight: 800;
  color: var(--muted);
}



/* ---------- Settings ---------- */
.settings-page {
  gap: 1.25rem;
}

.gamertag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.gamertag__avatar {
  position: relative;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
}

.gamertag__avatar:active {
  transform: scale(.94);
}

.gamertag__edit {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 3px 0 var(--primary-edge);
}

.gamertag__form {
  flex: 1;
  min-width: 14rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.gamertag__tag {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .35rem .35rem 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-soft), var(--purple-soft));
  border: 2px solid var(--line-strong);
  box-shadow: 0 4px 0 var(--edge);
}

.gamertag__tag:focus-within {
  border-color: var(--primary);
}

.gamertag__at {
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--primary);
}

.gamertag__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 1.3rem;
  font-weight: 900;
  outline: none;
  padding: .2rem 0;
}

.gamertag__tag .btn {
  margin-bottom: 4px;
  border-radius: 50%;
}

.showcase__body {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 1rem;
  margin-top: .75rem;
}

.showcase__picker {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.device-tile {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .8rem 1rem;
  border-radius: 18px;
  border: 2px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--edge);
  margin-bottom: 4px;
}

.device-tile .icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
}

/* Long labels (Bilgisayar, Akıllı tahta) wrap instead of running out of the tile. */
.device-tile > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Small phones: two tiles per row leave little room, so the icon goes above the label. */
@media (max-width: 420px) {
  .device-tile {
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
    padding: .7rem .5rem;
    text-align: center;
    line-height: 1.2;
  }
}

.device-tile:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--edge);
}

.device-tile.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary-press);
  box-shadow: 0 4px 0 var(--primary-edge);
}

.showcase__stage {
  position: relative;
  min-height: 15rem;
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 60%, var(--primary-soft), var(--surface-2) 70%);
  border: 2px dashed var(--line-strong);
}

.showcase__glow {
  position: absolute;
  width: 22rem;
  height: 22rem;
  background: repeating-conic-gradient(rgba(47, 128, 237, .07) 0 12deg, transparent 12deg 24deg);
  border-radius: 50%;
  animation: m-spin 30s linear infinite;
}

.showcase__device {
  position: absolute;
  width: min(78%, 17rem);
  top: 50%;
  left: 50%;
  translate: -50% -55%;
  filter: drop-shadow(0 10px 12px rgba(30, 42, 71, .2));
  transition: transform .85s cubic-bezier(.3, 1.35, .5, 1), opacity .4s ease;
}

.showcase__device.is-in {
  animation: m-float 3s ease-in-out .9s infinite;
}

.showcase__device.is-arriving {
  transform: translate(120%, -140%) rotate(-360deg) scale(.3);
  opacity: 0;
  transition: none;
}

.showcase__device.is-out {
  transition: transform .5s ease-in, opacity .45s ease-in;
  transform: translateY(70%) scale(.8);
  opacity: 0;
  animation: none;
}

.showcase__label {
  position: absolute;
  bottom: .8rem;
  left: 50%;
  transform: translateX(-50%);
  padding: .3rem .9rem;
  border-radius: 999px;
  background: var(--surface);
  font-weight: 900;
  box-shadow: 0 3px 0 var(--edge);
  white-space: nowrap;
}

.toggle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1rem;
}

html[data-layout="smartboard"] .toggle-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Text on top, the switch at the bottom: four cards fit side by side. */
.toggle-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: .9rem;
}

.toggle-card .h3 {
  margin: 0 0 .25rem;
}

/* Every card's control takes the same room as a switch, so buttons and switches line up on every layout. */
.toggle-card__action {
  flex: none;
  width: 6rem;
  height: 3.3rem;
  min-height: 0;
  margin-bottom: 4px;
  padding: 0 .5rem;
  justify-content: center;
  gap: .3rem;
  white-space: nowrap;
}

/* Invite and feedback carry a word or two: as wide as the label needs, never narrower than a switch. */
.toggle-card--invite .toggle-card__action,
.toggle-card--feedback .toggle-card__action {
  width: auto;
  min-width: 6rem;
  padding: 0 .9rem;
}

/* The floating button only exists on the smartboard layout. */
html:not([data-layout="smartboard"]) .toggle-card--ball {
  display: none;
}

/* Vibration is a phone setting: computers and boards never show it. */
html:not([data-layout="mobile"]) [data-haptics-card] {
  display: none;
}

/* Phones: one card per row, text left and the switch right. */
html[data-layout="mobile"] .toggle-grid {
  grid-template-columns: 1fr;
  gap: .7rem;
}

html[data-layout="mobile"] .toggle-card {
  flex-direction: row;
  align-items: center;
}

@media (max-width: 600px) {
  html .toggle-grid {
    grid-template-columns: 1fr;
    gap: .7rem;
  }

  html .toggle-card {
    flex-direction: row;
    align-items: center;
  }
}

.big-toggle {
  --t-on: var(--good);
  --t-on-edge: var(--good-edge);
  position: relative;
  flex: none;
  width: 6rem;
  height: 3.3rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: var(--surface-3);
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .08);
  transition: background-color .25s ease;
}

.big-toggle[aria-checked="true"] {
  background: var(--t-on);
  box-shadow: inset 0 -4px 0 var(--t-on-edge);
}

.big-toggle__knob {
  position: absolute;
  top: .3rem;
  left: .3rem;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--warn);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .15);
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
}

.big-toggle[aria-checked="true"] .big-toggle__knob {
  transform: translateX(2.7rem) rotate(360deg);
  color: var(--t-on);
}

.big-toggle:active .big-toggle__knob {
  width: 3.1rem;
}

.big-toggle__knob .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.big-toggle__on,
.big-toggle[aria-checked="true"] .big-toggle__off {
  display: none;
}

.big-toggle[aria-checked="true"] .big-toggle__on {
  display: block;
}

/* Graphics level: a switch track with three stops (performance, normal, high); the knob slides to the chosen one and
   the track takes its colour. The icons stay on the track, the knob sits under the chosen icon. */
.gfx-pick {
  --gfx: var(--warn);
  --gfx-edge: var(--warn-edge, rgba(0, 0, 0, .2));
  --stop: 0;
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 2.7rem);
  gap: .3rem;
  padding: .3rem;
  border-radius: 999px;
  background: var(--surface-3);
  box-shadow: inset 0 4px 0 rgba(0, 0, 0, .08), 0 4px 0 var(--edge);
  margin-bottom: 4px;
  transition: background-color .25s ease;
}
.gfx-pick[data-level="normal"] { --stop: 1; --gfx: var(--primary); }
.gfx-pick[data-level="high"] { --stop: 2; --gfx: #8B5CF6; }
.gfx-pick[data-level="normal"], .gfx-pick[data-level="high"] {
  background: color-mix(in srgb, var(--gfx) 22%, var(--surface-3));
}
.gfx-pick__knob {
  position: absolute;
  top: .3rem;
  left: .3rem;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .15);
  transform: translateX(calc(var(--stop) * 3rem));
  transition: transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.gfx-pick__opt {
  position: relative;
  z-index: 1;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color .25s ease, transform .3s var(--spring, ease);
}
.gfx-pick__opt[aria-checked="true"] { color: var(--gfx); transform: scale(1.12); }
.gfx-pick__opt:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.gfx-pick__opt .icon { width: 1.35rem; height: 1.35rem; }
.gfx-pick:active .gfx-pick__knob { width: 3rem; }

.big-toggle--theme {
  --t-on: #3B3FB3;
  --t-on-edge: #24277A;
}

.big-toggle--theme[aria-checked="true"] .big-toggle__knob {
  color: #3B3FB3;
}

.big-toggle--side {
  --t-on: var(--primary);
  --t-on-edge: var(--primary-edge);
  background: var(--primary);
  box-shadow: inset 0 -4px 0 var(--primary-edge);
}

.big-toggle--side .big-toggle__knob {
  color: var(--primary);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(19, 26, 46, .5);
  animation: m-fade .2s ease-out;
}

.modal__card {
  position: relative;
  width: min(100%, 34rem);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.3rem;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--float), 0 6px 0 var(--edge);
  animation: m-pop .45s var(--spring);
}

.modal__preview {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .5rem 0 .2rem;
}

.modal__preview-avatar {
  flex-shrink: 0;
}

.modal__preview-banner {
  flex-grow: 1;
  height: 96px;
  border-radius: 12px;
  background: var(--surface-3) center / cover no-repeat;
  position: relative;
  overflow: hidden;
}

.modal__preview-banner--none {
  background: linear-gradient(120deg, #FF9F1C, #FF5A5F 45%, #8B5CF6);
}

.look-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr));
  gap: .6rem;
}

.look-tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: .35rem;
  border-radius: 18px;
  border: 3px solid transparent;
  background: var(--surface-2);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--edge);
  margin-bottom: 4px;
}

.look-tile:active {
  transform: translateY(4px);
  box-shadow: none;
}

.look-tile.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.look-tile__art {
  width: 100%;
  border-radius: 50%;
}

.look-tile.is-locked {
  cursor: not-allowed;
}

.look-tile.is-locked .avatar {
  filter: grayscale(1) opacity(.5);
}

.look-tile__lock {
  position: absolute;
  right: .2rem;
  bottom: .2rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--muted);
  color: #fff;
}

.look-tile__lock .icon {
  width: .8rem;
  height: .8rem;
}

/* ---------- Question screen ---------- */
.page-question .q-top {
  gap: .7rem;
}

.q-top .progress {
  height: 18px;
  flex: 1;
  min-width: 4rem;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .06);
}

.q-top .progress__bar {
  background: linear-gradient(180deg, #5FD98A, var(--good));
}

.q-top .badge {
  padding: .3em .8em;
  font-size: .9rem;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .08);
}

.timer {
  width: 3.6rem;
  height: 3.6rem;
  font-family: var(--font);
  font-weight: 900;
  font-size: 1.05rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 3px 0 var(--edge);
  --beat: 1s;
}

.timer circle {
  stroke-width: 4.5;
}

.timer .timer__track {
  stroke: var(--surface-3);
}

.timer .timer__value {
  stroke: var(--primary);
  transition: stroke-dashoffset .25s linear, stroke .3s ease;
}

.timer.is-low {
  color: var(--bad);
  animation: m-heart var(--beat) ease-in-out infinite;
  box-shadow: 0 3px 0 var(--bad-edge), 0 0 0 4px var(--bad-soft);
}

.timer.is-low .timer__value,
.timer.is-over .timer__value {
  stroke: var(--bad);
}

.plane {
  border: 2px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 5px 0 var(--edge);
}

.plane .grid {
  stroke: #DCE6F7;
  stroke-width: .05;
}

:root[data-theme="dark"] .plane .grid {
  stroke: #2E3B60;
}

.plane .axis {
  stroke: #8FA3C7;
  stroke-width: .09;
  stroke-linecap: round;
}

.plane .tick {
  fill: #8FA3C7;
  font-family: var(--font);
  font-weight: 800;
}

.plane .user-line {
  stroke: var(--primary);
  stroke-width: .16;
  stroke-linecap: round;
}

.plane .given-line {
  stroke: var(--purple);
  stroke-width: .14;
  stroke-linecap: round;
}

.plane .reveal-line {
  stroke: var(--good);
  stroke-width: .16;
  stroke-linecap: round;
  stroke-dasharray: none;
}

.plane .is-drawing {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: m-draw .45s ease-out forwards;
}

.plane .reveal-line.is-drawing {
  animation-duration: .7s;
}

.plane .pt {
  fill: var(--purple);
  stroke: var(--surface);
  stroke-width: .08;
}

.plane .user-pt {
  fill: var(--primary);
  stroke: #fff;
  stroke-width: .12;
  transform-box: fill-box;
  transform-origin: center;
}

.plane .user-pt.is-active {
  stroke: var(--warn);
  stroke-width: .16;
}

.plane .user-pt.is-new {
  animation: m-pt .45s cubic-bezier(.3, 1.4, .5, 1);
}

.plane .pt-ripple {
  fill: none;
  stroke: var(--primary);
  stroke-width: .1;
  transform-box: fill-box;
  transform-origin: center;
  animation: m-ripple .6s ease-out forwards;
  pointer-events: none;
}

.plane .reveal-pt {
  stroke: var(--good);
  stroke-width: .16;
}

.plane .cursor {
  fill: var(--primary-soft);
  stroke: var(--primary);
  stroke-width: .08;
}

.plane-tools {
  gap: 1rem;
}

.plane-slots .btn.is-active {
  --btn-bg: var(--primary-soft);
  --btn-line: var(--primary);
  --btn-edge: var(--primary-edge);
  --btn-ink: var(--primary-press);
}

.plane-dpad {
  --d: 3.1rem;
  display: grid;
  grid-template-columns: repeat(3, var(--d));
  grid-template-rows: repeat(3, var(--d));
  grid-template-areas: ". up ." "left mid right" ". down .";
  gap: 0;
  place-items: stretch;
  filter: drop-shadow(0 5px 0 #2B3550);
}

.dpad-btn {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: #3E4A6B;
  color: #fff;
  cursor: pointer;
}

.dpad-btn .icon {
  width: 1.3rem;
  height: 1.3rem;
}

.dpad-btn--up {
  grid-area: up;
  border-radius: 12px 12px 0 0;
}

.dpad-btn--down {
  grid-area: down;
  border-radius: 0 0 12px 12px;
}

.dpad-btn--left {
  grid-area: left;
  border-radius: 12px 0 0 12px;
}

.dpad-btn--right {
  grid-area: right;
  border-radius: 0 12px 12px 0;
}

.dpad-btn:active,
.dpad-btn.is-pressed {
  background: #2B3550;
}

.dpad-btn--up:active,
.dpad-btn--up.is-pressed {
  transform: translateY(2px);
}

.dpad-btn--down:active,
.dpad-btn--down.is-pressed {
  transform: translateY(-1px) scaleY(.94);
}

.dpad-btn--left:active,
.dpad-btn--left.is-pressed {
  transform: translateX(2px);
}

.dpad-btn--right:active,
.dpad-btn--right.is-pressed {
  transform: translateX(-2px);
}

.dpad-btn:disabled {
  opacity: .55;
  cursor: default;
}

.plane-dpad__centre {
  grid-area: mid;
  background: #3E4A6B;
  display: grid;
  place-items: center;
}

.plane-dpad__centre::after {
  content: "";
  width: 42%;
  height: 42%;
  border-radius: 50%;
  background: #2B3550;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35);
}

.plane-clear {
  --btn-ink: var(--bad);
}

.choice.is-wrong {
  animation: m-shake .45s ease-in-out;
}

.choice.is-correct {
  animation: m-bump .5s ease-out;
}

.feedback--sheet {
  border-top: 0;
  border-radius: 28px 28px 0 0;
  padding-top: 1.2rem;
  box-shadow: 0 -6px 0 rgba(0, 0, 0, .06), 0 -10px 30px rgba(30, 42, 71, .12);
  animation: m-spring-up .55s cubic-bezier(.3, 1.25, .5, 1);
}

.feedback--good {
  background: var(--good-soft);
}

.feedback--bad {
  background: var(--bad-soft);
}

.feedback__title {
  font-size: 1.6rem;
  font-weight: 900;
}

.feedback__title .icon {
  width: 1.8rem;
  height: 1.8rem;
}

.feedback__text> :not(.feedback__title) {
  animation: m-rise .35s ease-out .15s backwards;
}

.feedback--good .btn[data-next] {
  --btn-bg: var(--good);
  --btn-line: var(--good);
  --btn-edge: var(--good-edge);
  --btn-ink: #fff;
}

.feedback--bad .btn[data-next] {
  --btn-bg: var(--bad);
  --btn-line: var(--bad);
  --btn-edge: var(--bad-edge);
  --btn-ink: #fff;
}

.feedback--timeout .btn[data-next] {
  --btn-bg: #8794AE;
  --btn-line: #8794AE;
  --btn-edge: #56627C;
  --btn-ink: #fff;
}

.full-combo {
  display: inline-flex;
  align-items: center;
  padding: .35rem .9rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #8B5CF6, #FF5A5F, #FF9F1C);
  color: #fff;
  font-weight: 900;
  letter-spacing: .08em;
  font-size: .9rem;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}

.badge.full-combo {
  letter-spacing: .02em;
}

/* Combo scenes (js/combo-fx.js): one click-through layer per milestone, each with its own look. */
.cx {
  position: fixed;
  inset: 0;
  z-index: 85;
  pointer-events: none;
  overflow: hidden;
  font-family: var(--font);
}

.cx-dot {
  position: absolute;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
}

.cx-center {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 40%);
  display: grid;
  justify-items: center;
  gap: .4rem;
  transform: translate(-50%, -50%);
}

.cx-word {
  padding: .3em 1em;
  border-radius: 999px;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: .08em;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .18);
  animation: cx-word .4s cubic-bezier(.2, 1.5, .4, 1) var(--d, .2s) backwards, cx-out .35s ease-in 1.1s forwards;
}

/* 3 · spark: a glowing ember flies into the streak badge, which flares up */
.cx-spark {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 20%, #FFD24D 45%, #FF7A1C 72%, transparent 74%);
  box-shadow: 0 0 14px 6px rgba(255, 160, 40, .7);
}

.cx-chip {
  position: absolute;
  padding: .3em .8em;
  border-radius: 999px;
  background: linear-gradient(90deg, #FFB020, #FF5A1F);
  color: #fff;
  font-size: .95rem;
  font-weight: 900;
  letter-spacing: .05em;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .18);
  animation: cx-chip 1.1s cubic-bezier(.2, 1.4, .4, 1) forwards;
}

.badge[data-q-combo].is-ignite {
  animation: cx-ignite .6s cubic-bezier(.2, 1.5, .4, 1);
}

/* 5 · stamp: a red rubber stamp slams down */
.cx-stamp {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 40%);
  display: grid;
  justify-items: center;
  padding: .5rem 1.6rem .7rem;
  border: 6px solid #E8243C;
  border-radius: 22px;
  outline: 3px solid #E8243C;
  outline-offset: 5px;
  background: var(--surface);
  color: #E8243C;
  box-shadow: 0 12px 30px rgba(232, 36, 60, .25);
  animation: cx-stamp 1.45s linear forwards;
}

.cx-stamp__num {
  font-size: 4.4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
}

.cx-stamp__word {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: .2em;
}

/* 7 · lightning: a bolt is drawn across the screen with a white flash */
.cx-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  animation: cx-flash .45s ease-out .08s;
}

.cx-bolt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cx-bolt path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: cx-draw .16s ease-out forwards, cx-fade .45s ease-in .6s forwards;
}

.cx-bolt .glow {
  stroke: #7AD7FF;
  stroke-width: 18;
  opacity: .55;
  filter: blur(6px);
}

.cx-bolt .core {
  stroke: #fff;
  stroke-width: 5;
}

.cx-bolt__num {
  color: #fff;
  font-size: 4.6rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 4px 0 #1B4FCB, 0 0 8px #7AD7FF, 0 0 26px #3A86FF;
  animation: cx-zap .3s cubic-bezier(.2, 1.6, .4, 1) .12s backwards, cx-jitter .08s steps(2) .42s 6, cx-out .35s ease-in 1.1s forwards;
}

.cx--bolt .cx-word {
  background: linear-gradient(90deg, #3A56E8, #6FD3FF);
}

/* 10 · arena: banners sweep in from both sides, a giant outlined number behind */
.cx-arena__big {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 42%);
  color: transparent;
  font-size: min(36vw, 22rem);
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: 5px rgba(181, 23, 158, .3);
  animation: cx-big 1.6s ease-out forwards;
}

.cx-arena__band {
  position: absolute;
  left: -10vw;
  right: -10vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.cx-arena__band--main {
  /* The band spans the window; its text sits over the content area. */
  padding-left: calc(2 * (var(--cx, 50vw) - 50vw));
  top: calc(var(--cy, 42%) - 2.7rem);
  height: 5.4rem;
  background: linear-gradient(90deg, #B5179E, #FF4D8D 50%, #B5179E);
  box-shadow: 0 6px 0 rgba(0, 0, 0, .18);
  animation: cx-band-in-l 1.6s cubic-bezier(.2, .9, .3, 1) forwards;
}

.cx-arena__band--top,
.cx-arena__band--bottom {
  height: .55rem;
  animation: cx-band-in-r 1.6s cubic-bezier(.2, .9, .3, 1) forwards;
}

.cx-arena__band--top {
  top: calc(var(--cy, 42%) - 3.8rem);
  background: #FFC93C;
}

.cx-arena__band--bottom {
  top: calc(var(--cy, 42%) + 3.25rem);
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 77, 141, .6);
}

.cx-arena__num,
.cx-arena__word {
  color: #fff;
  font-style: italic;
  font-weight: 900;
  white-space: nowrap;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .25);
}

.cx-arena__num {
  padding: .05em .4em;
  border-radius: 12px;
  background: #FFC93C;
  color: #7A1D6E;
  font-size: min(2.4rem, 8vw);
  text-shadow: none;
}

.cx-arena__word {
  font-size: min(2.8rem, 9vw);
  letter-spacing: .04em;
}

/* 15 · meteor: a comet strikes the centre, shock rings spread */
.cx-meteor {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 42%);
  width: 2.6rem;
  height: 2.6rem;
  margin: -1.3rem 0 0 -1.3rem;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff, #9BE7FF 35%, #3A86FF 72%);
  box-shadow: 0 0 26px 10px rgba(122, 215, 255, .8);
  animation: cx-fall .52s cubic-bezier(.4, 0, 1, 1) forwards;
}

.cx-meteor::before {
  content: "";
  position: absolute;
  right: 50%;
  top: 50%;
  width: 16rem;
  height: 1.8rem;
  margin-top: -.9rem;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(122, 215, 255, .25) 45%, rgba(255, 255, 255, .95));
  transform-origin: right center;
  transform: rotate(41deg);
}

.cx-shock {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 42%);
  width: 8rem;
  height: 8rem;
  margin: -4rem 0 0 -4rem;
  border-radius: 50%;
  border: 7px solid #3A86FF;
  box-shadow: 0 0 24px #7AD7FF, inset 0 0 24px #7AD7FF;
  animation: cx-shock .7s ease-out forwards;
}

.cx-impact {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 42%);
  width: 12rem;
  height: 12rem;
  margin: -6rem 0 0 -6rem;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, rgba(155, 231, 255, .9) 35%, rgba(58, 134, 255, .35) 55%, transparent 70%);
  animation: cx-impact .55s ease-out forwards;
}

.cx-shock--late {
  border-width: 3px;
  animation-delay: .12s;
  opacity: 0;
}

.cx-meteor__num {
  color: #fff;
  font-size: 4.8rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 4px 0 #1B4FCB, 0 0 28px #7AD7FF;
  animation: cx-rise .45s cubic-bezier(.2, 1.6, .4, 1) .52s backwards, cx-out .35s ease-in 1.35s forwards;
}

.cx--meteor .cx-word {
  background: linear-gradient(90deg, #1B4FCB, #3A86FF, #6FD3FF);
  animation-duration: .4s, .35s;
  animation-delay: var(--d), 1.35s;
}

/* 20 · crown: the screen dims, rays open, a golden crown drops in */
.cx-dim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at var(--cx, 50%) var(--cy, 42%), rgba(20, 16, 40, .3), rgba(10, 8, 25, .72));
  animation: cx-dim 1.95s ease forwards;
}

.cx-rays {
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 40%);
  width: 44rem;
  height: 44rem;
  margin: -22rem 0 0 -22rem;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 214, 92, .4) 0 8deg, transparent 8deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 15%, transparent 66%);
  mask: radial-gradient(circle, #000 15%, transparent 66%);
  animation: cx-rays 1.95s ease-out forwards;
}

.cx-crown {
  width: 7.5rem;
  height: 7.5rem;
  filter: drop-shadow(0 0 22px rgba(255, 214, 92, .9));
  animation: cx-drop .6s cubic-bezier(.3, 1.4, .5, 1) .15s backwards, cx-out .35s ease-in 1.55s forwards;
}

.cx-crown__num {
  color: #FFE27A;
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 4px 0 #B8860B, 0 0 24px rgba(255, 201, 60, .8);
  animation: cx-zap .35s cubic-bezier(.2, 1.6, .4, 1) .6s backwards, cx-out .35s ease-in 1.55s forwards;
}

.cx-letters,
.cx-neon {
  display: flex;
  color: #fff;
  font-weight: 900;
  white-space: nowrap;
}

.cx-letters {
  font-size: 2.2rem;
  letter-spacing: .08em;
  text-shadow: 0 3px 0 #B8860B, 0 0 16px rgba(255, 201, 60, .8);
}

.cx-letters span,
.cx-neon span {
  display: inline-block;
  animation: cx-letter .4s cubic-bezier(.2, 1.6, .4, 1) calc(var(--start, .8s) + var(--i) * 55ms) backwards, cx-out .35s ease-in var(--end, 1.55s) forwards;
}

/* Full combo · fireworks: rockets climb and burst, a neon title lights up */
.cx-dot--streak {
  width: .3rem;
  height: 1.3rem;
  border-radius: 999px;
}

.cx-pop {
  position: absolute;
  width: 7rem;
  height: 7rem;
  margin: -3.5rem 0 0 -3.5rem;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, var(--c) 30%, transparent 68%);
  animation: cx-impact .45s ease-out forwards;
}

/* A night sky settles from the top, so the bursts glow. */
.cx-night {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(16, 12, 40, .62), rgba(16, 12, 40, .25) 55%, transparent 85%);
  animation: cx-dim 2.1s ease forwards;
}

.cx-rocket {
  position: absolute;
  width: .35rem;
  height: 1.5rem;
  margin-left: -.175rem;
  border-radius: 999px;
  background: linear-gradient(#fff, var(--c));
  box-shadow: 0 0 10px var(--c);
}

.cx-neon {
  font-size: min(3.4rem, 11vw);
  letter-spacing: .1em;
  text-shadow: 0 0 6px #fff, 0 0 18px #FF4D8D, 0 0 38px #8B5CF6;
}

.cx-neon span {
  --start: .55s;
  --end: 1.8s;
}

/* A dark sign so the neon reads on any background. */
.cx-plate {
  padding: .5rem 1.6rem;
  border-radius: 20px;
  background: rgba(20, 16, 40, .88);
  box-shadow: 0 0 0 3px rgba(255, 77, 141, .5), 0 0 30px rgba(139, 92, 246, .55), 0 8px 0 rgba(0, 0, 0, .25);
  animation: cx-zap .35s cubic-bezier(.2, 1.6, .4, 1) .45s backwards, cx-out .35s ease-in 1.8s forwards;
}

@keyframes cx-word {
  from {
    opacity: 0;
    transform: translateY(.8rem) scale(.6);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cx-out {
  to {
    opacity: 0;
    transform: scale(.9);
  }
}

@keyframes cx-chip {
  0% {
    opacity: 0;
    transform: translate(-50%, -8px) scale(.5);
  }

  18% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.08);
  }

  30% {
    transform: translate(-50%, 0) scale(1);
  }

  80% {
    opacity: 1;
    transform: translate(-50%, 0);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
}

@keyframes cx-ignite {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 138, 28, .8);
  }

  40% {
    transform: scale(1.35);
    box-shadow: 0 0 0 12px rgba(255, 138, 28, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 138, 28, 0);
  }
}

@keyframes cx-stamp {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-20deg) scale(2.8);
    animation-timing-function: cubic-bezier(.6, 0, .9, .4);
  }

  16% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-8deg) scale(.94);
    animation-timing-function: cubic-bezier(.2, 1.6, .4, 1);
  }

  26% {
    transform: translate(-50%, -50%) rotate(-8deg) scale(1);
  }

  82% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-8deg) scale(1);
    animation-timing-function: ease-in;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-8deg) scale(1.12);
  }
}

@keyframes cx-flash {
  0% {
    opacity: 0;
  }

  15% {
    opacity: .55;
  }

  100% {
    opacity: 0;
  }
}

@keyframes cx-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes cx-fade {
  to {
    opacity: 0;
  }
}

@keyframes cx-zap {
  from {
    opacity: 0;
    transform: scale(.2);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cx-jitter {
  0% {
    transform: translate(2px, -1px);
  }

  50% {
    transform: translate(-2px, 1px);
  }

  100% {
    transform: translate(1px, 2px);
  }
}

@keyframes cx-big {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.4);
  }

  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.92);
  }
}

@keyframes cx-band-in-l {
  0% {
    transform: translateX(-110%) skewY(-5deg);
  }

  22% {
    transform: translateX(0) skewY(-5deg);
  }

  80% {
    transform: translateX(0) skewY(-5deg);
  }

  100% {
    transform: translateX(110%) skewY(-5deg);
  }
}

@keyframes cx-band-in-r {
  0% {
    transform: translateX(110%) skewY(-5deg);
  }

  22% {
    transform: translateX(0) skewY(-5deg);
  }

  80% {
    transform: translateX(0) skewY(-5deg);
  }

  100% {
    transform: translateX(-110%) skewY(-5deg);
  }
}

@keyframes cx-fall {
  from {
    transform: translate(-38vw, -33vw);
  }

  to {
    transform: translate(0, 0);
  }
}

@keyframes cx-impact {
  0% {
    opacity: 1;
    transform: scale(.2);
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@keyframes cx-shock {
  from {
    opacity: 1;
    transform: scale(.2);
  }

  to {
    opacity: 0;
    transform: scale(3.2);
  }
}

@keyframes cx-rise {
  from {
    opacity: 0;
    transform: translateY(1.5rem) scale(.3);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cx-dim {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes cx-rays {
  0% {
    opacity: 0;
    transform: scale(.3) rotate(0);
  }

  20% {
    opacity: 1;
    transform: scale(1) rotate(20deg);
  }

  80% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.1) rotate(70deg);
  }
}

@keyframes cx-drop {
  0% {
    opacity: 0;
    transform: translateY(-60vh) rotate(-25deg);
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes cx-letter {
  from {
    opacity: 0;
    transform: translateY(-1.2rem) scale(.4);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes cb-flicker {
  from {
    transform: scaleY(.94) skewX(-3deg);
  }

  to {
    transform: scaleY(1.1) skewX(3deg);
  }
}

/* The HUD streak badge heats up with the same tiers. */
.badge[data-q-combo] {
  transition: background-color .3s ease, color .3s ease;
}

.badge[data-q-combo][data-tier="1"] {
  background: #FFE7B0;
  color: #B25E00;
}

.badge[data-q-combo][data-tier="2"] {
  background: linear-gradient(90deg, #FF8A1C, #F0431E);
  color: #fff;
}

.badge[data-q-combo][data-tier="3"] {
  background: linear-gradient(90deg, #FF5A3C, #D61F45);
  color: #fff;
}

.badge[data-q-combo][data-tier="4"] {
  background: linear-gradient(90deg, #FF4D8D, #B5179E);
  color: #fff;
}

.badge[data-q-combo][data-tier="5"] {
  background: linear-gradient(90deg, #6FD3FF, #3A56E8);
  color: #fff;
}

.badge[data-q-combo][data-tier="6"] {
  background: linear-gradient(90deg, #FFC93C, #FF9F1C, #FF5A5F);
  color: #fff;
}

.badge[data-q-combo][data-tier="3"] .icon,
.badge[data-q-combo][data-tier="4"] .icon,
.badge[data-q-combo][data-tier="5"] .icon,
.badge[data-q-combo][data-tier="6"] .icon {
  transform-origin: 50% 90%;
  animation: cb-flicker .3s ease-in-out infinite alternate;
}

/* ---------- Results ("Büyük final") ---------- */
.result-card {
  gap: .8rem;
  overflow: visible;
}

.result-trophy-slot {
  position: relative;
  width: 9rem;
  height: 9rem;
  display: grid;
  place-items: center;
}

.result-trophy-slot::before {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 201, 60, .35) 0 10deg, transparent 10deg 20deg);
  opacity: 0;
  transition: opacity .5s ease;
  animation: m-spin 18s linear infinite;
  mask: radial-gradient(circle, #000 30%, transparent 70%);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
}

.result-trophy-slot.is-landed::before {
  opacity: 1;
}

.result-trophy {
  width: 100%;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .12));
}

.result-trophy-slot.is-waiting .result-trophy {
  visibility: hidden;
}

.result-trophy-slot.is-landed .result-trophy {
  animation: m-trophy-land .5s cubic-bezier(.3, 1.6, .5, 1);
}

@keyframes m-trophy-land {
  0% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(.92);
  }

  100% {
    transform: scale(1);
  }
}

.trophy-flyer {
  width: 9rem;
}

.trail-star {
  position: fixed;
  width: 14px;
  height: 14px;
  background: #FFC93C;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  transform: translate(-50%, -50%);
  animation: m-trail .7s ease-out forwards;
}

@keyframes m-trail {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  to {
    opacity: 0;
    transform: translate(-50%, -20%) scale(.2) rotate(120deg);
  }
}

.result-total-box {
  padding: .3rem 1.6rem;
  border-radius: 24px;
  background: var(--primary-soft);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .06);
}

.result-total {
  font-family: var(--font);
  font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
  font-weight: 900;
  line-height: 1.1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.result-total-box.is-punch {
  animation: m-punch .4s ease-out;
}

.result-total.is-spinning {
  animation: m-count .12s linear infinite;
}

@keyframes m-count {
  50% {
    transform: translateY(-3px);
  }
}

.result-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: .6rem;
  width: 100%;
}

.result-actions .btn {
  width: 100%;
}

.result-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.5rem;
}

.result-card.is-tallying .result-badges,
.result-card.is-tallying .result-actions {
  visibility: hidden;
}

.grade {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 4px solid currentColor;
  background: var(--surface);
  font-size: 1.9rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 4px 0 currentColor;
}

.grade--s {
  color: var(--purple);
}

.grade--a {
  color: var(--good);
}

.grade--b {
  color: var(--primary);
}

.grade--c {
  color: var(--warn);
}

.grade--d {
  color: var(--muted);
}

.result-breakdown {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.bonus-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem .9rem;
  border-radius: 16px;
  background: var(--surface-2);
  font-weight: 800;
  box-shadow: 0 3px 0 var(--edge);
}

.bonus-row__value {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--warn-ink);
}

.bonus-row--full .bonus-row__value {
  color: var(--purple);
}

.bonus-row.is-landed .bonus-row__value {
  color: var(--muted);
  opacity: .6;
}

.result-card .bonus-row {
  animation: m-drop .6s cubic-bezier(.3, 1.35, .5, 1) backwards;
  animation-delay: calc(900ms + var(--i, 0) * 160ms);
}

.result-stats {
  font-weight: 800;
}

.result-skip {
  display: none;
  margin: 0;
}

.result-card.is-tallying {
  cursor: pointer;
}

.result-card.is-tallying .result-skip {
  display: block;
}

.result-card.is-done .grade {
  animation: m-stamp .55s cubic-bezier(.3, 1.4, .5, 1) backwards;
}

.result-card.is-done .full-combo {
  animation: m-stamp .55s cubic-bezier(.3, 1.4, .5, 1) .15s backwards;
}

.result-card.is-done .result-actions>* {
  animation: m-pop .5s var(--spring) backwards;
  animation-delay: calc(.25s + var(--i, 0) * 80ms);
}

@media (max-width: 720px) {

  .dash-grid,
  .showcase__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase__picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .showcase__stage {
    min-height: 12rem;
  }

  .hero-banner {
    padding: 1.2rem;
    min-height: 9rem;
  }

  .game-card {
    padding: 1.1rem;
    gap: .8rem;
  }

  .game-card--play .game-card__icon {
    width: 5rem;
  }

  .game-card__go {
    width: 3.2rem;
    height: 3.2rem;
  }

  .game-card__title {
    font-size: 1.35rem;
  }

  .podium__block {
    height: 4.5rem;
  }

  .podium__col--1 .podium__block {
    height: 6.5rem;
  }

  .podium__col--2 .podium__block {
    height: 5.2rem;
  }

  .podium__col--3 .podium__block {
    height: 4rem;
  }

  .podium__rank {
    font-size: 1.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .lb-row {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Navigation chrome ---------- */
.site-header {
  border-bottom: 2px solid var(--line);
}

.under-menu {
  border-top: 2px solid var(--line);
  padding: .25rem .2rem env(safe-area-inset-bottom);
  gap: .15rem;
}

.under-menu__item {
  font-weight: 900;
  border-radius: 14px;
  margin: 0;
  min-height: 56px;
  padding: 4px 1px 6px;
  gap: 2px;
  border: 2px solid transparent;
  transition: transform .2s var(--spring), background-color .2s ease, border-color .2s ease;
}

.under-menu__item .icon {
  width: 1.35rem;
  height: 1.35rem;
}

.under-menu__item span {
  line-height: 1.15;
}

.under-menu__item.is-active {
  box-shadow: none;
  background: var(--primary-soft);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

.under-menu__item.is-active .icon {
  animation: m-bump .5s ease-out;
}

.under-menu__item:active {
  transform: scale(.9);
}

.dash-sidebar__item {
  font-weight: 900;
  border-radius: 16px;
  border: 2px solid transparent;
}

.dash-sidebar__item.is-active {
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

.dash-sidebar__item .icon {
  width: 1.4rem;
  height: 1.4rem;
}

@media (max-width: 720px) {
  .profile-hero__body {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 1rem 1.2rem;
  }

  .profile-hero__id {
    min-width: 0;
    margin-top: 0;
    align-self: auto;
    align-items: center;
  }

  .profile-hero__id .class-badge {
    align-self: center;
  }

  .profile-hero__actions {
    align-self: stretch;
  }

  .profile-hero__actions .profile-hero__edit {
    flex: 1 1 0;
    min-width: 0;
  }

  /* Phones: three compact tiles per row instead of two tall ones. */
  .res-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
  }

  .res-badge {
    padding: .7rem .35rem .65rem;
    border-radius: 18px;
  }

  .res-badge__art {
    width: 2.4rem;
  }

  .res-badge__value {
    font-size: 1.25rem;
  }

  .res-badge__label {
    font-size: .64rem;
    letter-spacing: .02em;
  }
}

/* ---------- Lessons hub and topic picker ---------- */
.mode-card {
  --mc: var(--good);
  --mc-edge: var(--good-edge);
  --mc-soft: var(--good-soft);
  border-top: 0 !important;
  overflow: hidden;
  position: relative;
}

.mode-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--mc);
}

.mode-card--practice {
  --mc: var(--purple);
  --mc-edge: var(--purple-edge);
  --mc-soft: var(--purple-soft);
}

.mode-card--class {
  --mc: var(--warn);
  --mc-edge: var(--warn-edge);
  --mc-soft: var(--warn-soft);
}

.mode-card__art {
  width: 3.6rem;
  height: 3.6rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--mc-soft);
  padding: .35rem;
}

.mode-card__cta {
  --btn-bg: var(--mc);
  --btn-line: var(--mc);
  --btn-edge: var(--mc-edge);
  --btn-ink: #fff;
}

.fact-list .icon {
  color: var(--mc);
}

.topic-random {
  border: 0 !important;
  background: linear-gradient(120deg, var(--purple), #B44BD8) !important;
  color: #fff !important;
  border-radius: 22px !important;
  box-shadow: 0 5px 0 var(--purple-edge) !important;
  transition: transform 70ms ease-out, box-shadow 70ms ease-out;
}

.topic-random .muted {
  color: rgba(255, 255, 255, .85);
}

.topic-random:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--purple-edge) !important;
}

.topic-random__icon {
  background: rgba(255, 255, 255, .22) !important;
  color: #fff !important;
}

.topic {
  border: 2px solid var(--line) !important;
  border-radius: 18px !important;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform 70ms ease-out, box-shadow 70ms ease-out;
}

.topic:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--edge);
}

.topic[aria-pressed="true"] {
  border-color: var(--primary) !important;
  background: var(--primary-soft);
}

.topic-random[aria-pressed="false"] {
  filter: grayscale(1) opacity(0.5);
}

.topic__title {
  font-weight: 900;
}

.topic .progress {
  height: 10px;
  margin-top: .3rem;
}

.topic-group {
  border-radius: var(--radius) !important;
  border-width: 2px !important;
  box-shadow: 0 4px 0 var(--edge);
}

/* 3D trophy canvas: fixed while flying, then lives in its slot */
.trophy3d {
  position: relative;
  width: 100%;
  height: 100%;
}

.trophy3d canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.trophy3d.is-flying {
  position: fixed;
  z-index: 96;
  pointer-events: none;
  will-change: transform;
}

.result-trophy-slot.is-landed .trophy3d {
  animation: m-trophy-land .6s cubic-bezier(.3, 1.6, .5, 1);
}

.result-trophy-slot::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 92, .55), transparent 65%);
  opacity: 0;
  z-index: -1;
}

.result-trophy-slot.is-landed::after {
  animation: m-glow 2.4s ease-in-out infinite;
  opacity: 1;
}

.result-trophy-slot>* {
  position: relative;
  z-index: 1;
}

/* Achievement info */
.ach {
  position: relative;
}

.ach__info {
  position: absolute;
  top: .2rem;
  right: .2rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--muted);
  cursor: pointer;
  box-shadow: none;
  transition: transform .2s var(--spring), color .15s ease;
  z-index: 2;
}

.ach__info .icon {
  width: 1.2rem;
  height: 1.2rem;
}

.ach__info:active {
  transform: scale(.88);
}

.ach-modal {
  align-items: center;
  text-align: center;
  max-width: 24rem;
}

.ach-modal__close {
  position: absolute;
  top: .6rem;
  right: .6rem;
}

.ach-modal__medal {
  width: 6rem;
  height: 6rem;
  animation: m-pop .5s var(--spring);
}

.ach-modal__medal .ach__fill {
  --m: 6rem;
  --i: 0;
  --lag: 0s;
}

.cosmetic-modal__art {
  display: grid;
  place-items: center;
  animation: m-pop .5s var(--spring);
  margin: 0 auto;
}

.cosmetic-modal__art--banner {
  width: 100%;
  aspect-ratio: 3 / 1;
  border-radius: 16px;
  background: center / cover no-repeat var(--surface-3);
  box-shadow: 0 4px 0 var(--edge);
}

.ach-modal__medal.is-unlocked {
  background: radial-gradient(circle at 35% 30%, #FFF3C4, #FFC93C 70%);
  box-shadow: 0 4px 0 var(--gold-edge), 0 0 0 3px #fff inset;
}

.ach-modal:not(.is-unlocked) .ach__art,
.modal:not(.is-unlocked) .ach-modal .ach__art {
  filter: grayscale(1) opacity(.5);
}

.modal.is-unlocked .ach-modal .ach__art {
  filter: none;
}

.ach-modal__bar {
  width: 100%;
  height: 22px;
}

/* ---------- D-pad: one solid cross, arms are transparent hit areas (no seams, no shifting) ---------- */
.plane-dpad {
  --pad: #3E4A6B;
  --pad-press: #2B3550;
  --pad-edge: #232B45;
  position: relative;
  touch-action: none;
  filter: drop-shadow(0 5px 0 var(--pad-edge));
}

:root[data-theme="dark"] .plane-dpad {
  --pad: #56658F;
  --pad-press: #3E4A6B;
  --pad-edge: #0B1022;
}

.plane-dpad::before,
.plane-dpad::after {
  content: "";
  position: absolute;
  background: var(--pad);
  border-radius: 12px;
  pointer-events: none;
}

.plane-dpad::before {
  left: var(--d);
  width: var(--d);
  top: 0;
  bottom: 0;
}

.plane-dpad::after {
  top: var(--d);
  height: var(--d);
  left: 0;
  right: 0;
}

.dpad-btn {
  position: relative;
  z-index: 1;
  background: transparent;
  transform: none !important;
}

.dpad-btn:active,
.dpad-btn.is-pressed {
  background: var(--pad-press);
}

.dpad-btn:active .icon,
.dpad-btn.is-pressed .icon {
  transform: translateY(2px);
}

.plane-dpad__centre {
  position: relative;
  z-index: 1;
  /* Fill its grid cell exactly; an older rule's fixed tap size pushed the hub (and its ball) off centre. */
  width: auto;
  height: auto;
  background: transparent;
}

/* ---------- Big toggles: the 3D edge sits outside, so the knob is centred on the visible pill ---------- */
.big-toggle {
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .07), 0 4px 0 var(--edge);
  margin-bottom: 4px;
}

.big-toggle[aria-checked="true"],
.big-toggle--side {
  box-shadow: 0 4px 0 var(--t-on-edge);
}

.big-toggle__knob {
  top: calc((3.3rem - 2.7rem) / 2);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .18);
}

/* ---------- Hover: lively feedback for mouse users (touch boards and phones are unaffected) ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn:not(.btn--ghost):not(:disabled):hover:not(:active):not(.is-pressed) {
    transform: translateY(-2px);
    box-shadow: 0 calc(var(--depth) + 2px) 0 var(--btn-edge);
    filter: brightness(1.05);
  }

  .btn--ghost:hover .icon,
  .btn--icon:hover .icon {
    transform: scale(1.12);
    transition: transform .2s var(--spring);
  }

  .choice:not(:disabled):hover:not(:active) {
    transform: translateY(-3px) scale(1.01);
  }

  a.card,
  .mode-card,
  .topic,
  .topic-random,
  .game-card,
  .res-badge,
  .ach,
  .lb-row.is-in,
  .quest,
  .device-tile,
  .look-tile,
  .podium__who,
  .chip,
  .streak-day__dot,
  .chest-btn,
  .big-toggle__knob,
  .gamertag__avatar,
  .dash-sidebar__item .icon,
  .under-menu__item .icon,
  .brand__mark,
  .avatar {
    transition: transform .25s var(--spring), box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  }

  /* Basış anı yaylı geçişi beklemez: kart/karo da düğme gibi 70ms'de çöker. */
  .game-card:active,
  .device-tile:active,
  .look-tile:active,
  .chest-btn:active,
  .topic:active,
  .topic-random:active {
    transition: transform 70ms ease-out, box-shadow 70ms ease-out;
  }

  .game-card:hover:not(:active) {
    transform: translateY(-4px) rotate(-.4deg);
    box-shadow: 0 11px 0 var(--gc-edge);
  }

  .game-card:hover .game-card__icon {
    animation: m-wiggle .7s ease-in-out;
  }

  .game-card:hover .game-card__go {
    animation-duration: .9s;
  }

  .mode-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 0 var(--edge);
  }

  .mode-card:hover .mode-card__art {
    animation: m-wiggle .7s ease-in-out;
  }

  .topic:hover:not(:active),
  .topic-random:hover:not(:active) {
    transform: translateY(-3px);
  }

  .quest:hover {
    transform: translateX(4px);
    background: var(--surface-3);
  }

  .quest--ready .chest-btn:hover {
    transform: scale(1.12) rotate(-6deg);
    animation-play-state: paused;
  }

  .streak-day:hover .streak-day__dot {
    transform: translateY(-4px) scale(1.08);
  }

  .lb-row.is-in:hover {
    transform: translateX(6px);
    border-color: var(--primary);
  }

  .lb-row:hover .avatar {
    transform: rotate(-8deg) scale(1.08);
  }

  .podium__who:hover .avatar {
    transform: translateY(-6px) scale(1.06);
  }

  .res-badge:hover {
    transform: translateY(-5px) rotate(-1.5deg);
  }

  .res-badge:hover .res-badge__art {
    animation: m-bump .5s ease-out;
  }

  .ach:hover {
    transform: translateY(-4px);
  }

  .ach:hover .ach__medal {
    transform: rotate(-8deg) scale(1.06);
    transition: transform .3s var(--spring);
  }

  .ach__info:hover {
    color: var(--primary);
    transform: scale(1.15);
  }

  .device-tile:hover:not(.is-active):not(:active) {
    transform: translateY(-3px);
    box-shadow: 0 7px 0 var(--edge);
  }

  .look-tile:not(:disabled):hover:not(:active) {
    transform: translateY(-3px) rotate(-2deg);
    box-shadow: 0 7px 0 var(--edge);
  }

  .chip:hover {
    transform: scale(1.06);
  }

  .big-toggle:hover .big-toggle__knob {
    scale: 1.06;
  }

  .gamertag__avatar:hover {
    transform: scale(1.04) rotate(-2deg);
  }

  .profile-hero__body>.avatar:hover {
    transform: scale(1.04) rotate(3deg);
  }

  .dash-sidebar__item:hover .icon,
  .under-menu__item:hover .icon {
    transform: translateY(-2px) scale(1.12);
  }

  .brand:hover .brand__mark {
    transform: rotate(-8deg) scale(1.06);
  }

  .pill-tabs__tab:not(.is-active):hover {
    color: var(--ink);
    background: rgba(255, 255, 255, .5);
  }

  .bonus-row:hover {
    transform: translateX(4px);
    transition: transform .2s var(--spring);
  }

  .dpad-btn:hover {
    background: rgba(255, 255, 255, .08);
  }

  .plane-wrap:not(.is-locked):hover .plane {
    box-shadow: 0 7px 0 var(--edge);
    transition: box-shadow .2s ease;
  }

  .site-footer a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .fball:hover {
    transform: scale(1.08);
  }
}

.avatar__img--empty {
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--muted);
}

.avatar__img--empty .icon {
  width: 55%;
  height: 55%;
}

img.avatar__img {
  object-fit: cover;
  background: var(--surface-2);
}

.look-tile .avatar {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

/* Custom profile covers */
.profile-hero__banner.has-image {
  height: auto;
  aspect-ratio: 3 / 1;
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  background-color: var(--surface-3);
}

.profile-hero__banner.has-image::after {
  display: none;
}

.banner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: .6rem;
}

.banner-tile {
  position: relative;
  aspect-ratio: 3 / 1;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  background: center / cover no-repeat var(--surface-3);
  box-shadow: 0 4px 0 var(--edge);
  margin-bottom: 4px;
}

.banner-tile--none {
  background: linear-gradient(120deg, #FF9F1C, #FF5A5F 45%, #8B5CF6);
  color: #fff;
  font-weight: 900;
  font-size: .8rem;
}

.banner-tile.is-active {
  border-color: var(--primary);
}

.banner-tile.is-locked {
  filter: grayscale(1) opacity(.55);
  cursor: not-allowed;
}

.banner-tile:active {
  transform: translateY(4px);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .banner-tile:not(:disabled):hover:not(:active) {
    transform: translateY(-3px);
    box-shadow: 0 7px 0 var(--edge);
  }
}

/* Development tools page */
.dev__badge {
  align-self: flex-start;
}

.dev__search .input {
  flex: 1;
  min-width: 10rem;
}

.dev__num {
  width: 8rem;
}

.dev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: .8rem;
}

.dev-tool {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1rem;
  border-radius: 18px;
  background: var(--surface-2);
}

.dev-tool .row {
  flex-wrap: nowrap;
}

.dev-tool--danger {
  background: var(--bad-soft);
}

/* Theme sweep: live copy of the page in the old theme, masked away by a growing circle. */
@property --wave-r {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.theme-ghost {
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-mask-image: radial-gradient(circle at 0 0, transparent var(--wave-r), #000 calc(var(--wave-r) + 1px));
  mask-image: radial-gradient(circle at 0 0, transparent var(--wave-r), #000 calc(var(--wave-r) + 1px));
}

.theme-ghost__page {
  position: absolute;
}

.theme-ghost__page>body {
  background: var(--bg);
  color: var(--ink);
}

/* Page changes are full loads: cross-fade them and keep the navigation chrome still, so nothing jumps. */
@view-transition {
  navigation: auto;
}

.site-header {
  view-transition-name: site-header;
}

.dash-sidebar {
  view-transition-name: dash-sidebar;
}

.under-menu {
  view-transition-name: under-menu;
}

/* Pages swap in sequence (old fades out, then new fades in): a cross-fade would overlay two layouts of different
   widths and their texts would run into each other. The header title changes at once for the same reason. */
::view-transition-old(root) {
  animation: m-vt-out .1s ease-in both;
}

::view-transition-new(root) {
  animation: m-vt-in .18s ease-out .08s both;
}

::view-transition-old(site-header) {
  display: none;
}

::view-transition-new(site-header) {
  animation: none;
}

@keyframes m-vt-out {
  to {
    opacity: 0;
  }
}

@keyframes m-vt-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

.hero-plane {
  aspect-ratio: 1;
}

/* =====================================================================
   REWARD MOMENTS: padlock break, achievement celebration, quest chest
   ===================================================================== */
/* Two-part padlock: whole parts while intact, halves and cracks appear at the break */
.lockx {
  position: relative;
  display: inline-block;
  width: 4rem;
  height: 4rem;
}

.lockx__part {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.lockx__shackle-l,
.lockx__shackle-r,
.lockx__body-l,
.lockx__body-r,
.lockx__crack-top,
.lockx__crack-body {
  opacity: 0;
}

.ach-lockfly {
  position: fixed;
  z-index: 99;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.ach-lockfly .lockx {
  width: 100%;
  height: 100%;
}

.lock-spark {
  position: fixed;
  z-index: 99;
  width: 18px;
  height: 3px;
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(255, 214, 92, .9);
}

/* Profile card unlock: gold washes out from the centre, then a spring and a sheen */
.ach .ach__medal {
  position: relative;
}

.ach .ach__medal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF3C4, #FFC93C 70%);
  clip-path: circle(0% at 50% 50%);
}

.ach.is-revealing .ach__medal::before {
  transition: clip-path .7s cubic-bezier(.3, .7, .3, 1);
  clip-path: circle(75% at 50% 50%);
}

.ach.is-revealing .ach__art {
  filter: none;
  transition: filter .6s .1s;
}

.ach .ach__art {
  position: relative;
  z-index: 1;
}

.ach.is-celebrated .ach__medal {
  animation: m-medal-spring .6s cubic-bezier(.3, 1.5, .5, 1);
}

.ach.is-celebrated .ach__medal::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
  pointer-events: none;
  animation: m-sheen 1s ease-in-out .25s forwards;
}

.ach.is-swapping {
  transition: opacity .2s ease, transform .2s ease;
  opacity: 0;
  transform: scale(.94);
}

.ach.is-swapped {
  animation: m-pop .45s var(--spring);
}

@keyframes m-medal-spring {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.1);
  }

  70% {
    transform: scale(.97);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes m-sheen {
  to {
    background-position: -100% 0;
  }
}

@keyframes m-ripple-big {
  from {
    opacity: .9;
    transform: scale(.4);
  }

  to {
    opacity: 0;
    transform: scale(2.4);
  }
}

@keyframes m-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .35;
  }
}

@keyframes m-sway {

  0%,
  100% {
    rotate: var(--r0);
  }

  50% {
    rotate: var(--r1);
  }
}

/* Overlay shell */
body.rw-open {
  overflow: hidden;
}

.rw-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: opacity .35s ease;
}

.rw-overlay.is-out {
  opacity: 0;
}

.rw-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 14, 30, .66);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity .35s ease;
}

.rw-overlay.is-in .rw-backdrop {
  opacity: 1;
}

.rw-skip {
  position: absolute;
  top: max(1rem, env(safe-area-inset-top));
  right: 1rem;
  z-index: 5;
  color: #fff;
}

.rw-skip:hover {
  background: rgba(255, 255, 255, .12);
}

.rw-stage {
  position: relative;
  z-index: 1;
  width: min(92vw, 30rem);
  height: min(82vh, 34rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
}

.rw-platform {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 82%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 228, 140, .85), rgba(255, 159, 28, .3) 45%, transparent 70%);
  opacity: 0;
  transform: translate(-50%, 140%) scale(.7);
  transition: transform .8s cubic-bezier(.3, 1.3, .5, 1), opacity .5s ease;
  pointer-events: none;
}

.rw-platform::before {
  content: "";
  position: absolute;
  inset: 18% 12%;
  border-radius: 50%;
  border: 3px solid rgba(255, 240, 190, .8);
  box-shadow: 0 0 30px rgba(255, 214, 92, .8), inset 0 0 20px rgba(255, 214, 92, .6);
}

.rw-overlay.is-in .rw-platform {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* Achievement medal on stage */
.rw-medal {
  position: relative;
  width: 9.5rem;
  height: 9.5rem;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, #C9D2E3, #8794AE 70%);
  box-shadow: 0 7px 0 #56627C;
  animation: m-pop .6s var(--spring) backwards;
}

.rw-medal__gold {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFF3C4, #FFC93C 70%);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path .75s cubic-bezier(.3, .7, .3, 1);
}

.rw-medal__art {
  position: relative;
  z-index: 2;
  width: 62%;
  filter: grayscale(1) opacity(.55);
  transition: filter .6s ease .1s;
}

.rw-medal__wave {
  position: absolute;
  inset: -12%;
  z-index: 0;
  border-radius: 50%;
  border: 4px solid rgba(255, 214, 92, .9);
  opacity: 0;
}

.rw-medal__sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}

.rw-medal__sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
}

.rw-medal__lock {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  width: 58%;
  height: 58%;
  margin: -29% 0 0 -29%;
}

.rw-medal.is-gold {
  box-shadow: 0 7px 0 var(--gold-edge), 0 0 50px rgba(255, 201, 60, .65);
}

.rw-medal.is-gold .rw-medal__gold {
  clip-path: circle(75% at 50% 50%);
}

.rw-medal.is-gold .rw-medal__art {
  filter: none;
}

.rw-medal.is-gold .rw-medal__wave {
  animation: m-ripple-big .9s ease-out;
}

.rw-medal.is-shining {
  animation: m-medal-spring .6s cubic-bezier(.3, 1.5, .5, 1);
}

.rw-medal.is-shining .rw-medal__sheen::after {
  animation: m-sheen 1s ease-in-out .2s forwards;
}

.rw-medal--flyer {
  width: 9.5rem;
  height: 9.5rem;
  animation: none;
}

.rw-spots {
  position: absolute;
  inset: -12% 0 30%;
  pointer-events: none;
}

.rw-spots>span {
  position: absolute;
  top: 0;
  width: 46%;
  height: 100%;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--spot, #FFF5C8) 60%, transparent), transparent 85%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  transform-origin: top center;
  opacity: 0;
  transition: opacity .6s ease;
  filter: blur(2px);
}

.rw-spots>span:first-child {
  left: 2%;
  --r0: 16deg;
  --r1: 22deg;
  rotate: 16deg;
}

.rw-spots>span:last-child {
  right: 2%;
  --r0: -16deg;
  --r1: -22deg;
  rotate: -16deg;
}

.rw-spots.is-on>span {
  opacity: 1;
  animation: m-sway 3s ease-in-out infinite;
}

.rw-ach-title {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: translateY(14px) scale(.95);
  transition: opacity .4s ease, transform .5s var(--spring);
}

.rw-ach-title.is-in {
  opacity: 1;
  transform: none;
}

.rw-ach-title .eyebrow {
  color: #FFE27A;
}

.rw-ach-title .h1 {
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .25);
}

.rw-xp {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .95rem .35rem .45rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFE27A, #FFC93C);
  color: #5A3D00;
  font-weight: 900;
  box-shadow: 0 4px 0 var(--gold-edge);
  animation: m-pop .5s var(--spring) .15s backwards;
}

.rw-xp__coin {
  width: 1.6rem;
}

/* Phone with the profile page: the medal lands in its slot */
.rw-phone {
  position: absolute;
  z-index: 3;
  right: 6vw;
  top: 50%;
  width: 12.5rem;
  height: 25rem;
  margin-top: -12.5rem;
  padding: .55rem;
  border-radius: 2.2rem;
  background: linear-gradient(160deg, #3B4A74, #1E2A47);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .45), inset 0 0 0 2px rgba(255, 255, 255, .12);
  transform: perspective(1000px) translateX(160%) rotateY(-26deg) rotateX(6deg);
  transition: transform .75s cubic-bezier(.3, 1.2, .5, 1);
}

.rw-phone.is-in {
  transform: perspective(1000px) translateX(0) rotateY(-16deg) rotateX(5deg);
}

.rw-phone.is-out {
  transform: perspective(1000px) translateX(170%) rotateY(-30deg) rotateX(6deg);
  transition-timing-function: cubic-bezier(.6, 0, .8, .4);
}

.rw-phone::before {
  content: "";
  position: absolute;
  top: .85rem;
  left: 50%;
  width: 3.2rem;
  height: .45rem;
  margin-left: -1.6rem;
  border-radius: 999px;
  background: #0B1022;
  z-index: 2;
}

.rw-phone__screen {
  height: 100%;
  border-radius: 1.75rem;
  overflow: hidden;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.rw-phone__cover {
  height: 3.6rem;
  flex: none;
  background: center / cover no-repeat, linear-gradient(120deg, #FF9F1C, #FF5A5F 45%, #8B5CF6);
}

.rw-phone__id {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: -1.1rem .6rem .4rem;
}

.rw-phone__id .avatar {
  box-shadow: 0 0 0 3px var(--bg);
}

.rw-phone__name {
  margin-top: 1rem;
  font-size: .72rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rw-phone__title {
  margin: 0 .7rem .35rem;
  font-size: .7rem;
  font-weight: 900;
}

.rw-phone__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .35rem;
  padding: 0 .6rem;
}

.rw-phone__slot {
  position: relative;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface-3);
  display: grid;
  place-items: center;
}

.rw-phone__slot.is-target {
  background: transparent;
  outline: 2px dashed #FFC93C;
  outline-offset: -1px;
  animation: m-blink 1s ease-in-out infinite;
}

.rw-phone__slot.is-filled {
  background: radial-gradient(circle at 35% 30%, #FFF3C4, #FFC93C 70%);
  animation: m-pop .45s var(--spring);
}

.rw-phone__medal {
  width: 70%;
}

/* Same look as the profile cards: won medals in gold, the rest grey. */
.rw-phone__slot.is-won {
  background: radial-gradient(circle at 35% 30%, #FFF3C4, #FFC93C 70%);
}

.rw-phone__slot.is-locked .rw-phone__medal {
  filter: grayscale(1) opacity(.45);
}

/* Quest chest */
.rw-overlay--chest .rw-stage {
  justify-content: center;
}

.rw-rays {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 46rem;
  height: 46rem;
  margin: -23rem 0 0 -23rem;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--tint, #FFC93C) 0 7deg, transparent 7deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%);
  mask: radial-gradient(circle, #000 18%, transparent 68%);
  opacity: 0;
  transform: scale(.2);
  transition: opacity .4s ease, transform .9s cubic-bezier(.2, .9, .3, 1.2);
  pointer-events: none;
}

.rw-rays.is-on {
  opacity: .45;
  transform: scale(1);
  animation: m-spin 20s linear infinite;
}

.rw-chest {
  position: relative;
  z-index: 2;
  width: min(72vw, 19rem);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  margin-top: 2rem;
}

.rw-chest canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.rw-chest__flat {
  width: 80%;
  margin: 10%;
  animation: m-float 3s ease-in-out infinite;
}

.rw-hint {
  position: relative;
  z-index: 2;
  color: #fff;
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: .02em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
  animation: m-blink 1.1s ease-in-out infinite;
  transition: opacity .3s ease;
}

.rw-hint.is-gone {
  opacity: 0;
  animation: none;
}

/* Above the chest and out of the flow: below it the text would sit on the glowing platform ring,
   and in the flow it would push the chest down. The prize later appears in this same spot. */
.rw-overlay--chest .rw-hint {
  position: absolute;
  top: 14%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
}

.rw-prize-slot {
  position: absolute;
  z-index: 3;
  top: 4%;
  left: 0;
  right: 0;
  display: grid;
  place-items: center;
  perspective: 900px;
  pointer-events: none;
}

.rw-prize {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  transform-style: preserve-3d;
}

.rw-prize__label {
  color: #fff;
  font-weight: 900;
  font-size: 1.2rem;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}

.rw-prize__coin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}

.rw-prize__coin-art {
  width: 6.5rem;
  filter: drop-shadow(0 0 22px rgba(255, 214, 92, .9));
  animation: m-float 2.4s ease-in-out infinite;
}

.rw-prize__count {
  font-size: 2.6rem;
  font-weight: 900;
  color: #FFE27A;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .3);
  font-variant-numeric: tabular-nums;
}

.rw-prize__avatar .avatar,
.rw-prize__frame .avatar {
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .15), 0 0 40px rgba(255, 214, 92, .7);
  animation: m-float 2.4s ease-in-out infinite;
}

.rw-prize__frame .avatar__img {
  filter: brightness(0) opacity(.6);
}

.rw-prize__frame .avatar {
  animation: m-float 2.4s ease-in-out infinite, m-glow-ring 1.4s ease-in-out infinite;
}

@keyframes m-glow-ring {

  0%,
  100% {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .12), 0 0 30px rgba(255, 214, 92, .55);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .25), 0 0 60px rgba(255, 214, 92, .95);
  }
}

.rw-prize__banner {
  width: min(80vw, 22rem);
  aspect-ratio: 3 / 1;
  border-radius: 18px;
  background: center / cover no-repeat, linear-gradient(120deg, #FF9F1C, #FF5A5F 45%, #8B5CF6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 3px rgba(255, 255, 255, .3);
}

.rw-collect {
  position: absolute;
  z-index: 4;
  bottom: 3%;
  min-width: 12rem;
}

@media (max-width: 720px) {
  .rw-stage {
    height: min(78vh, 32rem);
  }

  .rw-medal {
    width: 7.5rem;
    height: 7.5rem;
  }

  .rw-phone {
    top: auto;
    bottom: 3vh;
    right: 3vw;
    width: 8.5rem;
    height: 17rem;
    margin-top: 0;
    border-radius: 1.6rem;
  }

  .rw-phone__screen {
    border-radius: 1.2rem;
  }

  .rw-phone__cover {
    height: 2.4rem;
  }

  .rw-overlay--ach .rw-stage {
    justify-content: flex-start;
    padding-top: 12vh;
  }
}

/* =====================================================================
   STORE and DIAMONDS
   ===================================================================== */
.badge--gem {
  background: var(--purple-soft);
  color: var(--purple-edge);
  text-decoration: none;
}

.badge--coin {
  background: var(--gold-soft);
  color: #8F6300;
}

/* Centre the digits themselves, not the font's taller-on-top line box. */
.badge--coin>span,
.badge--gem>span {
  text-box: trim-both cap alphabetic;
}

/* Trimmed text no longer sets the height: keep the pill as tall as the other badges. */
.badge--coin,
.badge--gem {
  min-height: 1.65rem;
}

:root[data-theme="dark"] .badge--coin {
  color: #FFD97A;
}

:root[data-theme="dark"] .badge--gem {
  color: #CBB8FF;
}

.badge__art {
  width: 1.15em;
  height: 1.15em;
}

.store {
  gap: 1.2rem;
}

.store-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.5rem 1.75rem;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(135deg, #8B5CF6 0%, #6B5CF6 45%, #18B5E8 100%);
  box-shadow: 0 6px 0 #4B22B0;
}

.store-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .08) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .08) 75%, transparent 75%, transparent);
  background-size: 56px 56px;
  animation: m-stripes 3s linear infinite;
  pointer-events: none;
}

.store-hero__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.store-hero__text .eyebrow {
  color: #E8DDFF;
}

.store-hero__text .h1 {
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}

.store-hero__lead {
  font-weight: 700;
  opacity: .92;
  max-width: 28rem;
}

.store-wallet {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

.wallet {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem 1rem .45rem .5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  color: #1E2A47;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .15);
}

.wallet__art {
  width: 2.4rem;
  height: 2.4rem;
}

.wallet>span {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.wallet b {
  font-size: 1.35rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.wallet small {
  font-size: .72rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.store-tabs {
  align-self: flex-start;
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: 1rem;
}

.store-empty {
  grid-column: 1 / -1;
}

.store-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: .9rem;
  border-radius: 24px;
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: 0 5px 0 var(--edge);
  transition: transform .25s var(--spring), box-shadow .2s ease, border-color .2s ease;
}

.store-item__preview {
  position: relative;
  display: grid;
  place-items: center;
  height: 8.5rem;
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--purple-soft), var(--surface-2) 70%);
}

.store-item--banner .store-item__preview {
  padding: .6rem;
}

.store-item__banner {
  width: 100%;
  aspect-ratio: 3 / 1;
  border-radius: 14px;
  background: center / cover no-repeat, linear-gradient(120deg, #FF9F1C, #FF5A5F 45%, #8B5CF6);
  box-shadow: 0 6px 16px rgba(30, 42, 71, .2);
}

.store-item__owned {
  position: absolute;
  top: .5rem;
  right: .5rem;
  display: none;
  align-items: center;
  gap: .25rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--good);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  box-shadow: 0 2px 0 var(--good-edge);
}

.store-item__owned .icon {
  width: .9rem;
  height: .9rem;
}

.store-item.is-owned .store-item__owned {
  display: inline-flex;
}

.store-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.store-item__name {
  font-size: 1.05rem;
  font-weight: 900;
}

.store-item__actions {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.store-buy {
  gap: .45rem;
  font-size: 1.05rem;
  letter-spacing: .02em;
  text-transform: none;
}

.store-buy__art {
  width: 1.6rem;
  height: 1.6rem;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .2));
}

.store-item.is-armed .store-buy {
  --btn-bg: var(--good);
  --btn-line: var(--good);
  --btn-edge: var(--good-edge);
  --btn-ink: #fff;
  animation: m-heart .9s ease-in-out infinite;
}

.store-item.is-poor {
  animation: m-shake .45s ease-in-out;
}

.store-item.is-bought .store-item__preview> :first-child {
  animation: m-medal-spring .6s cubic-bezier(.3, 1.5, .5, 1);
}

.store-equip.is-worn {
  --btn-bg: var(--surface-2);
  --btn-ink: var(--muted);
}

@media (hover: hover) and (pointer: fine) {
  .store-item:hover {
    transform: translateY(-5px) rotate(-.6deg);
    box-shadow: 0 10px 0 var(--edge);
    border-color: var(--purple);
  }

  .store-item:hover .store-item__preview> :first-child {
    transform: scale(1.06) rotate(-3deg);
    transition: transform .3s var(--spring);
  }
}

@media (max-width: 720px) {
  .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
  }

  .store-item {
    padding: .65rem;
  }

  .store-item__preview {
    height: 6.5rem;
  }

  .store-item .avatar--lg {
    width: 4.5rem;
    height: 4.5rem;
  }

  .store-hero {
    padding: 1.2rem;
  }

  /* Narrow phones: a long label ("Ana sayfa") breaks onto two lines instead of being cut to "Ana sa…". */
  .under-menu__item span {
    font-size: .62rem;
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
  }
}

/* Chest cosmetic reveal: darkened stage, spinning disc / card, phone landing */
.rw-backdrop {
  transition: opacity .35s ease, background-color .6s ease;
}

.rw-overlay.is-dim .rw-backdrop {
  background: rgba(4, 6, 14, .9);
}

.rw-disc {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 40%;
  width: 12rem;
  height: 12rem;
  margin: -6rem 0 0 -6rem;
  transform-style: preserve-3d;
  perspective: 900px;
}

.rw-disc--card {
  width: min(80vw, 22rem);
  height: calc(min(80vw, 22rem) / 3);
  margin: calc(min(80vw, 22rem) / -6) 0 0 calc(min(80vw, 22rem) / -2);
}

.rw-disc__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 50%;
  overflow: hidden;
}

.rw-disc--card .rw-disc__face {
  border-radius: 18px;
}

.rw-disc__back {
  background: radial-gradient(circle at 35% 30%, #2A3352, #05070F 70%);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .08), 0 0 40px rgba(0, 0, 0, .6);
  transform: rotateY(180deg);
}

.rw-disc__front {
  background: #1E2A47;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .9), 0 0 50px rgba(255, 214, 92, .75);
}

.rw-disc__photo {
  width: 100%;
  height: 100%;
  background: center / cover no-repeat, linear-gradient(120deg, #FF9F1C, #FF5A5F 45%, #8B5CF6);
}

.rw-disc__front .avatar {
  width: 88%;
  height: 88%;
}

.rw-disc__flyer {
  position: fixed;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
}

.rw-disc__flyer.rw-disc--card {
  border-radius: 18px;
  margin: 0;
}

.rw-disc__flyer.rw-disc--round {
  margin: 0;
}

.rw-disc__label {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: calc(40% + 7rem);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .5s var(--spring);
}

.rw-disc__label.is-in {
  opacity: 1;
  transform: none;
}

/* Frame silhouette: pure black frame around a lighter disc */
.avatar.is-silhouette {
  background: #05070F !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .15);
}

.avatar.is-silhouette .avatar__img {
  background: #E1E7F2;
  color: transparent;
}

.avatar.is-silhouette .avatar__img .icon {
  display: none;
}

.avatar.is-silhouette .avatar__frame {
  filter: brightness(0);
}

.rw-disc__front:has(.is-silhouette) {
  background: #E1E7F2;
}

.rw-prize__coin--gem .rw-prize__coin-art {
  filter: drop-shadow(0 0 22px rgba(61, 211, 245, .9));
}

.rw-prize__coin--gem .rw-prize__count {
  color: #A8EFFF;
}

.rw-phone--profile .rw-phone__id .avatar {
  box-shadow: 0 0 0 3px var(--bg);
}

.rw-phone .is-new {
  animation: m-pop .5s var(--spring);
}

.rw-phone__cover.is-new {
  animation: m-medal-spring .6s cubic-bezier(.3, 1.5, .5, 1);
}

@media (max-width: 720px) {
  .rw-disc--round {
    width: 9.5rem;
    height: 9.5rem;
    margin: -4.75rem 0 0 -4.75rem;
  }

  .rw-disc__label {
    top: calc(40% + 5.6rem);
  }
}

/* Quest chest scene: drop-in, tap charge, burst, beam. --tint is the prize colour, --charge 0..1 the taps. */
.rw-overlay--chest {
  --charge: 0;
}

.rw-chest {
  opacity: 0;
  transition: transform .6s cubic-bezier(.3, 1.2, .5, 1), opacity .6s ease;
  -webkit-tap-highlight-color: transparent;
}

.rw-chest.is-in {
  opacity: 1;
}

.rw-chest:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .7);
  outline-offset: 6px;
  border-radius: 24px;
}

.rw-chest.is-idle {
  animation: rw-idle 2.8s ease-in-out infinite;
}

/* Fits the open chest between the prize above and the collect button below. */
.rw-chest.is-open {
  transform: translateY(21%) scale(.7);
}

.rw-chest.is-away {
  transform: translateY(45%) scale(.55);
  opacity: .35;
  transition: transform .7s cubic-bezier(.3, 1.1, .5, 1), opacity .6s ease;
}

.rw-chest>canvas,
.rw-chest>.rw-chest__flat {
  position: relative;
  z-index: 1;
}

.rw-aura {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 52%;
  width: 170%;
  height: 170%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tint), transparent 62%);
  opacity: calc(.15 + var(--charge) * .6);
  transform: translate(-50%, -50%) scale(calc(.55 + var(--charge) * .5));
  transition: opacity .35s ease, transform .5s cubic-bezier(.3, 1.4, .5, 1), background .4s ease;
  pointer-events: none;
  animation: rw-aura 1.6s ease-in-out infinite;
}

.rw-beam {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 46%;
  width: 62%;
  height: 240%;
  background: linear-gradient(to top, #fff, var(--tint) 18%, transparent 92%);
  clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0);
  filter: blur(6px);
  opacity: 0;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom center;
  pointer-events: none;
}

.is-blast .rw-beam {
  animation: rw-beam 1.1s cubic-bezier(.2, .9, .3, 1) forwards, rw-beam-pulse 1.8s ease-in-out 1.1s infinite;
}

.rw-overlay.is-dim .rw-beam {
  opacity: 0 !important;
  animation: none;
  transition: opacity .5s ease;
}

.rw-flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: radial-gradient(circle at 50% 55%, #fff 0, var(--tint) 35%, transparent 75%);
  opacity: 0;
  pointer-events: none;
}

.rw-shock {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 9%;
  width: 70%;
  aspect-ratio: 3 / 1;
  margin-left: -35%;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .85);
  box-shadow: 0 0 24px rgba(255, 255, 255, .6);
  opacity: 0;
  pointer-events: none;
}

.rw-shock.is-on {
  animation: rw-shock .7s cubic-bezier(.2, .8, .3, 1) forwards;
}

.rw-overlay--chest .rw-hint {
  animation: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .35s ease, transform .4s cubic-bezier(.3, 1.4, .5, 1);
}

.rw-overlay--chest .rw-hint.is-in {
  opacity: 1;
  transform: none;
}

.rw-overlay--chest .rw-hint.is-in>span:first-child {
  animation: m-blink 1.1s ease-in-out infinite;
}

.rw-overlay--chest .rw-hint.is-gone {
  opacity: 0;
  transform: scale(.85);
}

.rw-pips {
  display: flex;
  gap: .5rem;
}

.rw-pips:empty {
  display: none;
}

.rw-pips>span {
  width: .95rem;
  height: .95rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5);
  transition: background .2s ease, box-shadow .2s ease;
}

.rw-pips>span.is-on {
  background: var(--tint);
  box-shadow: 0 0 12px var(--tint), inset 0 0 0 2px #fff;
  animation: m-pop .4s cubic-bezier(.3, 1.6, .5, 1);
}

.rw-overlay--chest .rw-prize>.rw-prize__label {
  opacity: 0;
  transform: scale(.6);
  transition: opacity .3s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1);
}

.rw-overlay--chest .rw-prize.is-landed>.rw-prize__label {
  opacity: 1;
  transform: none;
}

.rw-prize.is-landed .rw-prize__count {
  animation: m-pop .5s cubic-bezier(.3, 1.6, .5, 1);
}

.rw-mini {
  width: 2.6rem;
  height: 2.6rem;
  filter: drop-shadow(0 0 10px rgba(255, 214, 92, .8));
}

.rw-disc__back {
  transition: box-shadow .3s ease;
}

.rw-disc.is-mystery .rw-disc__back {
  box-shadow: inset 0 0 0 4px var(--tint), 0 0 calc(20px + var(--glow, 0) * 22px) var(--tint);
}

.rw-disc.is-mystery .rw-disc__back::after {
  content: "?";
  font-size: 5rem;
  font-weight: 900;
  color: var(--tint);
  text-shadow: 0 0 calc(10px + var(--glow, 0) * 8px) var(--tint);
}

.rw-disc--card.is-mystery .rw-disc__back::after {
  font-size: 3.4rem;
}

@keyframes rw-idle {

  0%,
  70%,
  100% {
    transform: none;
  }

  76% {
    transform: scale(1.05, .94) rotate(-2deg);
  }

  82% {
    transform: translateY(-3%) rotate(2deg);
  }

  88% {
    transform: rotate(-1deg);
  }
}

@keyframes rw-aura {
  50% {
    filter: brightness(1.25);
  }
}

@keyframes rw-beam {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0);
  }

  35% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1.08);
  }

  100% {
    opacity: .75;
    transform: translateX(-50%) scaleY(1);
  }
}

@keyframes rw-beam-pulse {
  50% {
    opacity: .5;
  }
}

@keyframes rw-shock {
  0% {
    opacity: 1;
    transform: scale(.3);
  }

  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

@media (prefers-reduced-motion: reduce) {

  .rw-chest.is-idle,
  .rw-aura,
  .rw-shock.is-on {
    animation: none;
  }

  .is-blast .rw-beam {
    animation: none;
    opacity: .7;
    transform: translateX(-50%);
  }
}

/* Results: diamonds won with a ranked full combo */
.rw-gem-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .9rem .35rem .45rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #E8DDFF, #C9B5FF);
  color: #3B1FA0;
  font-weight: 900;
  box-shadow: 0 3px 0 #8B6FE0;
  white-space: nowrap;
}

.rw-gem-pill img {
  width: 1.5rem;
}

.result-card.is-done .rw-gem-pill {
  animation: m-stamp .55s cubic-bezier(.3, 1.4, .5, 1) .3s backwards;
}

.store-tabs {
  align-self: stretch;
  display: flex;
}

.store-tabs .pill-tabs__tab {
  flex: 1;
  text-align: center;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.store-tabs .pill-tabs__tab.is-active {
  background: var(--surface);
}

@media (max-width: 720px) {
  .store-tabs .pill-tabs__tab {
    padding: .45rem .4rem;
    font-size: .82rem;
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  .rw-phone {
    right: 7vw;
  }
}

/* Achievement skip: "Atla" button and the scattered summary */
.rw-atla {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: max(2.2rem, 7vh);
  transform: translateX(-50%);
  color: #fff;
  font-weight: 900;
  padding: .55rem 1.6rem;
  border: 2px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
}

.rw-atla:hover {
  background: rgba(255, 255, 255, .16);
}

.rw-overlay.is-summary .rw-stage,
.rw-overlay.is-summary .rw-skip {
  display: none;
}

.rw-sum {
  position: relative;
  z-index: 3;
  grid-area: 1 / 1;
  width: min(92vw, 52rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity .4s ease, transform .5s cubic-bezier(.3, 1.3, .5, 1);
}

.rw-sum.is-in {
  opacity: 1;
  transform: none;
}

.rw-sum .eyebrow {
  color: #FFE27A;
}

.rw-sum__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.4rem 2rem;
  max-height: 62vh;
  overflow-y: auto;
  padding: 1rem;
}

.rw-sum__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin-top: var(--y, 0);
  animation: rw-sum-pop .55s cubic-bezier(.3, 1.5, .5, 1) var(--d, 0ms) backwards;
}

.rw-sum__tile .rw-medal {
  width: var(--s, 6rem);
  height: var(--s, 6rem);
}

.rw-sum__name {
  color: #fff;
  font-weight: 900;
  font-size: .9rem;
  text-align: center;
  max-width: 9rem;
}

.rw-sum__ok {
  min-width: 12rem;
}

@keyframes rw-sum-pop {
  from {
    opacity: 0;
    transform: scale(.3) translateY(1rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Connection loss */
.conn {
  max-width: 30rem;
  margin: 3rem auto;
  padding: 2rem 1.5rem;
}

.conn__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  background: var(--surface-2);
  border: 2px solid var(--line);
}

.conn__icon .icon {
  width: 2.6rem;
  height: 2.6rem;
  opacity: .85;
}

.conn__ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--line);
  animation: conn-ping 2.4s ease-out infinite;
}

.conn__ring--2 {
  animation-delay: 1.2s;
}

.conn__status {
  opacity: .8;
}

@keyframes conn-ping {
  from {
    transform: scale(1);
    opacity: .8;
  }

  to {
    transform: scale(1.8);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .conn__ring {
    animation: none;
    opacity: 0;
  }
}

.dev-check {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  cursor: pointer;
}

.dev-check input {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--warn);
}

.dev-tool__art {
  width: 1.8rem;
  height: 1.8rem;
}

.dev-tool--chest {
  background: var(--gold-soft);
}

/* Frames are pictures now: a slightly thicker ring shows their pattern at every size. */
.avatar--sm {
  --ring: 4px;
}

.avatar--md {
  --ring: 5px;
}

.avatar--lg {
  --ring: 7px;
}

.avatar--xl {
  --ring: 9px;
}

.avatar.frame--none {
  --ring: 3px;
}

/* First-visit loading screen */
.page-loading {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 35%, var(--primary-soft), var(--bg) 65%);
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  width: min(90vw, 22rem);
  text-align: center;
  animation: m-pop .5s var(--spring);
}

.loading__spin {
  color: var(--primary);
}

.loading__spin .icon {
  width: 3rem;
  height: 3rem;
  animation: m-spin .9s linear infinite;
}

.loading__title {
  font-size: 1.5rem;
  font-weight: 900;
}

.loading__lead {
  color: var(--muted);
  font-weight: 700;
}

.loading__bar {
  width: 100%;
  height: 18px;
}

.loading__bar .progress__bar {
  transition: none;
}

.loading__count {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  .loading__spin .icon {
    animation: m-spin 1.6s linear infinite !important;
    animation-duration: 1.6s !important;
  }
}

/* In-place page change on /dash: a thin bar runs along the top while the next page loads */
body.is-navigating::before {
  content: "";
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  height: 3px;
  width: 40%;
  background: linear-gradient(90deg, var(--primary), var(--purple));
  border-radius: 0 3px 3px 0;
  animation: m-navbar 1s ease-in-out infinite;
}

@keyframes m-navbar {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(260%);
  }
}

/* Profile editor: wider, tabbed (avatars / frames / covers) */
.modal__card.look-editor {
  width: min(100%, 56rem);
}

.look-editor>.row {
  position: sticky;
  top: -1.3rem;
  z-index: 2;
  margin: -1.3rem -1.3rem 0;
  padding: 1.3rem 1.3rem .6rem;
  background: var(--surface);
}

.look-editor .gamertag__form {
  width: 100%;
}

.look-tabs {
  display: flex;
  align-self: stretch;
  position: sticky;
  top: 2.9rem;
  z-index: 2;
  box-shadow: 0 6px 12px -8px rgba(30, 42, 71, .25);
}

.look-tabs .pill-tabs__tab {
  flex: 1;
  text-align: center;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
}

.look-tabs .pill-tabs__tab.is-active {
  background: var(--surface);
}

.look-panel {
  min-height: 14rem;
}

.look-editor .look-grid {
  grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
}

.look-editor .banner-grid {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

@media (min-width: 900px) {
  .look-editor .modal__preview {
    padding-top: 0;
  }
}

@media (max-width: 720px) {
  .modal:has(.look-editor) {
    padding: .5rem;
  }

  .modal__card.look-editor {
    max-height: calc(100dvh - 1rem);
    padding: 1rem;
  }

  .look-editor>.row {
    top: -1rem;
    margin: -1rem -1rem 0;
    padding: 1rem 1rem .5rem;
  }

  .look-tabs {
    top: 2.6rem;
  }

  .look-tabs .pill-tabs__tab {
    padding: .45rem .3rem;
    font-size: .8rem;
    white-space: nowrap;
  }

  .look-editor .look-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .45rem;
  }

  .look-editor .banner-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Modal content never shrinks inside the scrolling card: it scrolls instead of overlapping. */
.modal__card>* {
  flex-shrink: 0;
}

.modal__card {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.look-editor .look-tile.is-active,
.look-editor .banner-tile.is-active {
  animation: m-pop .3s var(--spring);
}

.about p {
  margin: 0 0 .9rem;
}

.about__greeting {
  font-weight: 800;
}

.about h2 {
  margin-top: 1.5rem;
}

.about-team {
  display: grid;
  gap: .6rem;
  margin: .75rem 0 0;
  padding: 0;
  list-style: none;
}

.about-team li {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem .9rem;
  border: 2px solid var(--line);
  border-radius: 16px;
}

.about-team__avatar {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 900;
}

/* Öğren */
.learn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .75rem;
}

.learn-card {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 4px 0 var(--edge);
  color: inherit;
  text-decoration: none;
  transition: transform 70ms ease-out, box-shadow 70ms ease-out;
}

.learn-card:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--edge);
}

.learn-card>.icon:last-child {
  margin-left: auto;
  flex: none;
  color: var(--muted);
}

.learn-card__icon {
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
}

.learn-player .q-step,
.learn-player .frac-input,
.learn-player .frac-input+.muted,
.learn-player .formula {
  display: none;
}

.learn-player .choice:disabled,
.learn-player .choice {
  pointer-events: none;
}

.learn-board {
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
}

.q-visual>.learn-board {
  max-width: 34rem;
}

.learn-steps {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.learn-steps__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.learn-dots {
  display: flex;
  gap: .35rem;
}

.learn-dots span {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: var(--surface-3);
  transition: width .25s ease, background .25s ease;
}

.learn-dots .is-done {
  background: var(--primary-soft);
}

.learn-dots .is-on {
  width: 1.4rem;
  background: var(--primary);
}

.learn-steps__text {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.45;
}

.learn-steps__text.is-in {
  animation: learn-in .35s ease-out;
}

@keyframes learn-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.learn-steps__math {
  align-self: flex-start;
  font-size: 1.05rem;
}

.learn-steps__math.is-empty {
  display: none;
}

.learn-timer {
  height: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.learn-timer span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--primary);
}

/* Step controls and "another example" share one row when there is room. */
.learn-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.learn-controls,
.learn-extra {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}

.learn-verdict {
  display: flex;
  align-items: center;
  gap: .5rem;
  align-self: flex-start;
  padding: .45rem .9rem;
  border-radius: 999px;
  font-weight: 800;
  background: var(--good-soft);
  color: var(--good-ink);
}

.learn-verdict--bad {
  background: var(--bad-soft);
  color: var(--bad-ink);
}

.learn-done__actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .6rem;
  width: 100%;
  max-width: 24rem;
}

.learn-done__actions .btn {
  width: 100%;
  padding-inline: .8rem;
  white-space: nowrap;
}

.learn-done>.icon {
  width: 3rem;
  height: 3rem;
  color: var(--good);
}

.plane .lp-pt {
  fill: var(--warn);
  stroke: var(--surface);
  stroke-width: .08;
}

.plane .lp-marker {
  fill: var(--primary);
  stroke: var(--surface);
  stroke-width: .1;
}

.plane .lp-walk,
.plane .lp-seg,
.plane .lp-line {
  stroke-width: .16;
  stroke-linecap: round;
}

.plane .lp-walk {
  stroke: var(--primary);
  stroke-dasharray: .35 .25;
}

.plane .lp-seg--x {
  stroke: var(--info);
}

.plane .lp-seg--y {
  stroke: var(--warn);
}

.plane .lp-line {
  stroke: var(--good);
}

.plane .lp-quad {
  fill: var(--good);
  opacity: .16;
}

.plane .lp-label {
  font-size: .62px;
  font-weight: 800;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: .18;
  fill: var(--ink);
}

.plane .lp-label--x {
  fill: var(--info);
}

.plane .lp-label--y {
  fill: var(--warn-ink);
}

.plane .lp-label--walk {
  fill: var(--primary);
}

.plane .is-pop,
.choice.is-pop {
  transform-box: fill-box;
  transform-origin: center;
  animation: lp-pop .32s cubic-bezier(.3, 1.6, .5, 1);
}

@keyframes lp-pop {
  from {
    transform: scale(0);
  }
}

.choice.is-pop {
  animation-name: lp-bump;
}

@keyframes lp-bump {
  50% {
    transform: scale(1.06);
  }
}

.feedback__actions {
  display: flex;
  gap: .6rem;
}

.feedback__inner .feedback__mark {
  flex: none;
  min-width: 0;
  width: 3.75rem;
  padding: 0;
}

.feedback__mark[aria-pressed="true"] {
  background: var(--gold);
  border-color: var(--gold-edge);
  box-shadow: 0 4px 0 var(--gold-edge);
  color: var(--ink);
}

.under-more {
  position: relative;
  display: grid;
}

.under-more__btn {
  border: 2px solid transparent;
  background: none;
  font: inherit;
  cursor: pointer;
}

.under-more__btn .icon {
  width: 1.6rem;
  height: 1.6rem;
  transition: transform .35s var(--spring);
}

.under-more.is-open .under-more__btn .icon {
  transform: rotate(180deg);
}

.under-more.is-open .under-more__btn {
  color: var(--primary);
  background: var(--primary-soft);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

.under-more__panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + .7rem);
  display: flex;
  gap: .35rem;
  padding: .45rem;
  border: 2px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 5px 0 var(--edge), 0 14px 30px rgba(30, 42, 71, .14);
  transform-origin: calc(100% - 1.6rem) calc(100% + 1.4rem);
  transform: scale(.35);
  clip-path: circle(1.2rem at calc(100% - 1.6rem) calc(100% + .2rem));
  opacity: 0;
  visibility: hidden;
  transition: transform .4s var(--spring), clip-path .4s cubic-bezier(.2, .9, .3, 1), opacity .18s ease, visibility 0s linear .4s;
}

.under-more.is-open .under-more__panel {
  transform: none;
  clip-path: circle(150% at calc(100% - 1.6rem) 100%);
  opacity: 1;
  visibility: visible;
  transition: transform .4s var(--spring), clip-path .4s cubic-bezier(.2, .9, .3, 1), opacity .12s ease;
}

.under-more__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  min-width: 3.4rem;
  padding: .5rem .4rem;
  border-radius: 15px;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
  text-decoration: none;
}

.under-more__item .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.under-more__item.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

/* The panel never runs off the left edge: at most the screen width; on narrow phones the items share one row. */
.under-more__panel {
  width: max-content;
  max-width: calc(100vw - 1rem);
}

.under-more__panel > .under-more__item {
  flex: 0 1 auto;
  min-width: 0;
  padding-inline: .2rem;
  text-align: center;
}

.under-more__panel > .under-more__item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Full screen toggle: first in the phone's "more" panel, set apart from the page links by a thin line. */
button.under-more__item {
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.under-more__fs {
  position: relative;
  margin-right: .35rem;
}

.under-more__fs::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  right: -.4rem;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}

.under-more__fs.is-on {
  color: var(--primary);
}

.ask-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  overflow-y: auto;
  background: rgba(20, 28, 48, .55);
  opacity: 0;
  transition: opacity .25s ease;
}

.ask-overlay.is-in {
  opacity: 1;
}

.ask-overlay .card.ask {
  width: min(100%, 26rem);
  margin: auto;
  gap: 1rem;
  padding: 1.75rem 1.5rem 1.5rem;
  transform: translateY(16px) scale(.96);
  transition: transform .35s var(--spring);
}

.ask-overlay.is-in .ask {
  transform: none;
}

.ask .result-actions {
  margin-top: .25rem;
  gap: .75rem;
}

.ask .muted {
  margin: 0;
}

.ask__icon {
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border-radius: 18px;
  background: var(--primary-soft);
  color: var(--primary);
}

/* "Hemen başla" menu on public pages */
.start-menu__card {
  width: min(100%, 30rem);
  padding: 1.5rem;
  gap: .6rem;
  text-align: center;
}

.start-menu__card .h2,
.start-menu__card>.muted {
  margin: 0;
}

.start-menu__close {
  position: absolute;
  top: .75rem;
  right: .75rem;
}

.start-menu__list {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  margin-top: .6rem;
  text-align: left;
}

.start-menu__item {
  padding: .9rem 1rem;
  border: 2px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 4px 0 var(--edge);
  transition: transform .15s var(--spring), border-color .15s ease;
}

.start-menu__item:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.start-menu__item:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--edge);
}

.start-menu__item .mode-card__icon {
  width: 3rem;
  height: 3rem;
}

.start-menu__icon--new {
  background: var(--good-soft);
  color: var(--good-ink);
}

.start-menu__icon--code {
  background: var(--purple-soft);
  color: var(--purple);
}

/* Settings: "Diğer ayarlar" opens downwards */
.more-settings {
  padding: 0;
  overflow: hidden;
}

.more-settings__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  -webkit-user-select: none;
}

.more-settings__head::-webkit-details-marker {
  display: none;
}

.more-settings__head .h2 {
  margin: 0;
  flex: 1;
}

.more-settings__chev {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--surface-2);
  transition: transform .3s var(--spring);
}

.more-settings[open] .more-settings__chev {
  transform: rotate(180deg);
}

.more-settings__body {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 0 1.5rem 1.5rem;
}

.more-settings[open] .more-settings__body {
  animation: more-open .3s ease-out;
}

.more-settings__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
}

.more-settings__row>div {
  flex: 1;
  min-width: 0;
}

.more-settings__row .h3,
.more-settings__row p {
  margin: 0;
}

.more-settings__row .btn {
  flex: none;
}

.more-settings__row--danger {
  border-color: var(--bad-soft);
}

.more-settings__confirm {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem 1.1rem;
  border: 2px solid var(--bad);
  border-radius: 18px;
  background: var(--bad-soft);
}

.more-settings__confirm label {
  font-weight: 800;
  color: var(--bad-ink);
}

.more-settings__confirm .row {
  justify-content: flex-end;
  gap: .6rem;
}

@keyframes more-open {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .more-settings[open] .more-settings__body {
    animation: none;
  }

  .more-settings__chev {
    transition: none;
  }
}

/* Settings tabs: a sticky pill bar under the header; each tab shows one panel. */
.settings-tabs {
  position: sticky;
  top: var(--settings-tabs-top, 0);
  z-index: 20;
  margin: -.4rem -.4rem 0;
  padding: .4rem;
  border-radius: 24px;
  background: var(--bg);
}

.settings-tabs .pill-tabs {
  display: flex;
  width: 100%;
}

.settings-tabs .pill-tabs__tab {
  flex: 1;
  gap: .4rem;
  min-width: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  color: var(--muted);
}

.settings-tabs .pill-tabs__tab.is-active {
  background: var(--surface);
  color: var(--primary);
}

.settings-tabs .pill-tabs__tab .icon {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
}

.settings-tabs .pill-tabs__tab.is-active .icon {
  animation: m-bump .5s ease-out;
}

.settings-tabs .pill-tabs__tab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-panel.is-in {
  animation: more-open .3s ease-out;
}

.more-settings.settings-panel .more-settings__body {
  padding-top: 1.5rem;
}

.device-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.device-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .8rem;
  border-radius: 16px;
  background: var(--surface);
  border: 2px solid var(--line);
}

.device-item.is-me {
  border-color: color-mix(in srgb, var(--good) 45%, transparent);
}

.device-item__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 12px;
  background: var(--primary-soft);
  color: var(--primary);
}

.device-item__icon .icon {
  width: 1.3rem;
  height: 1.3rem;
}

.device-item__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.device-item__name {
  overflow-wrap: anywhere;
}

.device-item__me,
.device-item__btn {
  flex: none;
  white-space: nowrap;
}

.more-settings__row .device-item .device-item__btn {
  width: auto;
}

.more-settings__list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

@media (max-width: 720px) {
  .settings-tabs .pill-tabs__tab {
    flex-direction: column;
    gap: .15rem;
    padding: .4rem .2rem;
    font-size: .78rem;
    border-radius: 18px;
  }

  .settings-tabs .pill-tabs {
    border-radius: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .settings-panel.is-in,
  .settings-tabs .pill-tabs__tab.is-active .icon {
    animation: none;
  }
}

/* Module (ünite) picker */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 1rem;
}

.module-card {
  --accent: var(--primary);
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.25rem;
  border: 2px solid var(--line);
  border-left: 8px solid var(--accent);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 4px 0 var(--edge);
  color: inherit;
  text-decoration: none;
  min-height: 7.5rem;
  transition: transform 70ms ease-out, box-shadow 70ms ease-out;
}

.module-card:hover {
  border-color: var(--accent);
}

.module-card:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--edge);
}

.module-card__icon {
  width: 3.6rem;
  height: 3.6rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--accent);
  color: #fff;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18);
}

.module-card__icon .icon {
  width: 1.9rem;
  height: 1.9rem;
}

.module-card__body {
  flex: 1;
  min-width: 0;
}

.module-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.module-card .progress,
.module-card .progress__bar {
  display: block;
}

.module-card .progress {
  height: 10px;
}

.module-card .progress__bar {
  background: var(--accent);
}

.module-card>.icon:last-child {
  flex: none;
  color: var(--muted);
}

.module-badge {
  border-color: var(--accent, var(--primary));
  color: var(--accent, var(--primary));
}

.module-badge .icon {
  color: inherit;
}

.module-overview__title {
  --accent: var(--primary);
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 1rem 0 .6rem;
  font-size: 1.15rem;
  font-weight: 900;
}

.module-overview__icon {
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}

/* Round review and shared questions */
.badge--bad {
  background: var(--bad-soft);
  color: var(--bad-ink);
}

.result-actions--more {
  margin-top: .4rem;
  padding-top: .8rem;
  border-top: 2px dashed var(--line);
}

.review-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.review-tools .segmented {
  flex: 1 1 16rem;
}

.review-item {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  border-left: 6px solid var(--good);
}

.review-item.is-bad {
  border-left-color: var(--bad);
}

.review-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.review-item__num {
  font-weight: 900;
  color: var(--muted);
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.review-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.review-item__text {
  font-weight: 800;
  font-size: 1.05rem;
}

.review-item__answers {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .9rem;
  margin: 0;
}

.review-item__answers dt {
  color: var(--muted);
  font-weight: 700;
}

.review-item__answers dd {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 700;
}

.review-item__answers dd.is-good {
  color: var(--good-ink);
}

.review-item__answers dd.is-bad {
  color: var(--bad-ink);
}

.review-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.share-url {
  width: 100%;
  font-family: var(--font-mono);
  text-align: center;
}

.share-verdict {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.2rem;
  font-weight: 900;
}

.share-verdict--good {
  color: var(--good-ink);
}

.share-verdict--bad {
  color: var(--bad-ink);
}

/* Announcement banner (admin panel) on top of every page */
.site-banner {
  --sb-bg: var(--primary);
  --sb-edge: var(--primary-edge);
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  background: var(--sb-bg);
  color: #fff;
  font-weight: 800;
  box-shadow: inset 0 -3px 0 var(--sb-edge);
  transition: opacity .2s ease, transform .2s ease;
}

.site-banner.is-closing {
  opacity: 0;
  transform: translateY(-100%);
}

.site-banner--info {
  --sb-bg: var(--primary);
  --sb-edge: var(--primary-edge);
}

.site-banner--success {
  --sb-bg: var(--good);
  --sb-edge: var(--good-edge);
}

.site-banner--warning {
  --sb-bg: var(--warn);
  --sb-edge: var(--warn-edge);
}

.site-banner--danger {
  --sb-bg: var(--bad);
  --sb-edge: var(--bad-edge);
}

.site-banner--brand {
  --sb-bg: var(--brand);
  --sb-edge: #4f0810;
}

.site-banner__body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: inherit;
  text-decoration: none;
  text-align: center;
}

.site-banner__body--link:hover span {
  text-decoration: underline;
}

.site-banner__link {
  color: inherit;
  font-weight: 900;
  text-decoration: underline;
  white-space: nowrap;
}

.site-banner__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: inherit;
  cursor: pointer;
}

.site-banner__close:hover {
  background: rgba(255, 255, 255, .3);
}

.area-dashboard .site-banner {
  margin-bottom: 0;
}

/* Class banner rows (teacher notices) right under the site banner */
.class-banner {
  padding-block: .45rem;
  font-weight: 700;
}

.class-banner+.class-banner,
.site-banner+.class-banners .class-banner:first-child {
  border-top: 1px solid rgba(255, 255, 255, .25);
}

.class-banner__from {
  margin-right: .5rem;
  padding: .05rem .5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  font-weight: 900;
}

.class-banner.is-new {
  animation: m-banner-in .35s var(--spring);
}

@keyframes m-banner-in {
  from {
    opacity: 0;
    transform: translateY(-60%);
  }
}

/* Maintenance page */
.maintenance {
  max-width: 34rem;
  margin: 3rem auto;
  gap: 1rem;
}

.maintenance__icon {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 22px;
  background: var(--warn);
  color: #fff;
  box-shadow: inset 0 -5px 0 var(--warn-edge);
}

.maintenance__icon .icon {
  width: 2.3rem;
  height: 2.3rem;
}

.maintenance__message {
  font-size: 1.15rem;
  font-weight: 800;
}

/* Admin panel */
.admin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.admin-tabs {
  /* The tabs get the whole row: tabscroll measures the row to decide whether to scroll, so a lock button
     beside them made the last tab slide under it. The lock button sits on its own line, on the right. */
  flex: 1 1 100%;
}

.admin-bar > .btn {
  margin-left: auto;
}

.admin-card__title {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.admin-card--danger {
  border-color: var(--bad);
}

.admin-gate {
  max-width: 26rem;
  margin-inline: auto;
}

.admin-row,
.admin-inline,
.admin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem;
}

.admin-row {
  align-items: center;
  justify-content: space-between;
}

.admin-inline .field {
  flex: 1 1 14rem;
}

.admin-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.admin-swatch {
  padding: .5rem 1rem;
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--sb-bg);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 var(--sb-edge);
}

.admin-swatch.is-active {
  border-color: var(--ink);
}

.admin-preview .site-banner {
  border-radius: 14px;
}

.admin-users {
  display: grid;
  gap: .4rem;
  max-height: 22rem;
  overflow: auto;
}

.admin-user {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  padding: .6rem .8rem;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-user:hover {
  border-color: var(--primary);
}

.admin-user__name {
  font-weight: 800;
}

.admin-id code,
.account-id {
  font-family: var(--font-mono);
  font-size: .8rem;
  user-select: all;
  word-break: break-all;
}

.account-id {
  padding: .35rem .6rem;
  border-radius: 8px;
  background: var(--surface-2);
}

.admin-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.btn--danger-soft {
  color: var(--bad-ink);
  border-color: var(--bad);
}

.btn--danger-soft.is-armed {
  background: var(--bad);
  color: #fff;
}

.admin-log {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-log__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .8rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--line);
}

/* Change log: a fixed date column, so short and long entries line up the same way; on phones the date sits above. */
.admin-log__row--entry {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: .15rem .8rem;
}

@media (max-width: 720px) {
  .admin-log__row--entry {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Admin "Uyarılar": one row per user with today's bot check score as a bar. */
.admin-alert {
  display: grid;
  gap: .35rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}

.admin-alert__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .6rem;
}

.admin-alert__score {
  margin-left: auto;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.admin-alert__bar {
  height: .5rem;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.admin-alert__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--good);
}

.admin-alert__fill--watch {
  background: var(--warn, #f59e0b);
}

.admin-alert__fill--check {
  background: var(--bad);
}

/* Sign-in pages and the sign-in popup */
.auth-card {
  position: relative;
}

.auth-back {
  align-self: flex-start;
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1.75rem;
  border-radius: 14px;
  color: var(--ink);
  border: 2px solid var(--line);
  background: var(--surface);
  box-shadow: 0 3px 0 var(--edge);
}

.auth-back:active {
  transform: translateY(3px);
  box-shadow: none;
}

.auth-choice>.icon:last-child {
  margin-left: auto;
  color: var(--muted);
}

.auth-mailto {
  align-self: flex-start;
  word-break: break-all;
}

.human {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.human__fail {
  align-items: flex-start;
}

.auth-modal__card {
  width: min(100%, 32rem);
  padding: 0;
  overflow: hidden;
  transition: none;
}

.auth-modal__card.is-morphing {
  transition: width .38s var(--spring), height .38s var(--spring);
}

.auth-modal__card.is-loading .auth-modal__body {
  opacity: .55;
  pointer-events: none;
}

.auth-modal__body {
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  overscroll-behavior: contain;
  transition: opacity .15s ease;
}

.auth-modal__close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 2;
}

/* Inside the popup the card is the popup itself: no second frame. */
.auth-modal .auth-card {
  margin: 0;
  max-width: none;
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 1.5rem;
}

.auth-modal .auth-card.is-entering {
  opacity: 0;
  transform: translateY(8px) scale(.985);
}

.auth-modal .auth-card {
  transition: opacity .25s ease, transform .3s var(--spring);
}

.account-form {
  width: 100%;
  max-width: 28rem;
}

.more-settings__row--stack {
  flex-direction: column;
  align-items: stretch;
}

/* /legal/licenses */
.licenses {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.licenses__ai {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  border-left: 6px solid var(--primary);
}

.licenses__ai .h3,
.licenses__ai p {
  margin: 0;
}

.licenses__ai-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
}

.licenses__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: .8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.licenses__item {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.licenses__item .h3,
.licenses__item p {
  margin: 0;
}

.licenses__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
}

.licenses__links a {
  font-weight: 800;
}

.m-doc .licenses {
  padding-inline: 1rem;
}

.game-card__pattern,
.profile-hero__banner::after,
.store-hero::after {
  left: -56px;
}

/* "Yenilikler" window: star hero, versions with their items popping in one by one */
.whatsnew-modal {
  z-index: 95;
}

.whatsnew-modal.is-out {
  opacity: 0;
  transition: opacity .25s ease;
}

.whatsnew {
  width: min(100%, 30rem);
  padding: 0 0 1.3rem;
  gap: 0;
  overflow-x: hidden;
}

.whatsnew__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 1.6rem 1.3rem 1.3rem;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #8B5CF6 0%, #6B5CF6 45%, #18B5E8 100%);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12);
}

.whatsnew__burst {
  position: absolute;
  left: 50%;
  top: 2.9rem;
  width: 26rem;
  height: 26rem;
  margin: -13rem 0 0 -13rem;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, .16) 0 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%);
  mask: radial-gradient(circle, #000 10%, transparent 60%);
  animation: m-spin 24s linear infinite;
  pointer-events: none;
}

.whatsnew__art {
  position: relative;
  width: 4.4rem;
  height: 4.4rem;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .15)) drop-shadow(0 0 18px rgba(255, 230, 140, .8));
  animation: whatsnew-star .8s cubic-bezier(.3, 1.6, .5, 1) both, m-float 3s ease-in-out .8s infinite;
}

.whatsnew__title {
  position: relative;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}

.whatsnew__lead {
  position: relative;
  font-weight: 800;
  opacity: .92;
}

.whatsnew__preview {
  align-self: center;
  margin: 1rem 1.3rem 0;
  text-align: center;
  white-space: normal;
}

.whatsnew__body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.2rem 1.3rem;
  max-height: 52dvh;
  overflow-y: auto;
}

.whatsnew__release {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  animation: m-pop .45s var(--spring) var(--d, 0ms) both;
}

.whatsnew__release+.whatsnew__release {
  padding-top: 1.1rem;
  border-top: 2px dashed var(--line);
}

.whatsnew__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.whatsnew__version {
  padding: .25rem .8rem;
  border-radius: 999px;
  background: var(--gold);
  color: #5A3A00;
  font-weight: 900;
  font-size: .85rem;
  box-shadow: 0 3px 0 #D99A00;
}

.whatsnew__list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.whatsnew__item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .6rem .75rem;
  border-radius: 16px;
  background: var(--surface-2);
  font-weight: 700;
  line-height: 1.35;
  animation: whatsnew-item .45s var(--spring) var(--d, 0ms) both;
}

.whatsnew__dot {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--gold-soft);
  color: #D99A00;
}

.whatsnew__dot .icon {
  width: 1rem;
  height: 1rem;
}

.whatsnew>.btn {
  width: auto;
  margin: 0 1.3rem;
}

.whatsnew__section {
  margin: .35rem 0 0;
  align-self: flex-start;
  padding: .2rem .75rem;
  border-radius: 10px;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  animation: whatsnew-item .45s var(--spring) var(--d, 0ms) both;
}

.whatsnew__section--0 {
  background: var(--good);
  box-shadow: 0 3px 0 var(--good-edge, #1E8F4A);
}

.whatsnew__section--1 {
  background: var(--primary);
  box-shadow: 0 3px 0 var(--primary-edge, #1B5FBF);
}

.whatsnew__section--2 {
  background: var(--purple);
  box-shadow: 0 3px 0 #5B2FC9;
}

.whatsnew__section--3 {
  background: var(--warn);
  box-shadow: 0 3px 0 #C46E00;
}

.whatsnew__text {
  margin: 0;
  font-weight: 700;
  line-height: 1.45;
  animation: whatsnew-item .45s var(--spring) var(--d, 0ms) both;
}

/* Release text markup: colours (--rt fill, --rt-ink text, --rt-on text on the fill), bullets and inline styles */
.rt-c-lime {
  --rt: #84CC16;
  --rt-ink: #4D7C0F;
  --rt-on: #1A2E05;
}

.rt-c-green {
  --rt: #22C55E;
  --rt-ink: #15803D;
  --rt-on: #fff;
}

.rt-c-teal {
  --rt: #14B8A6;
  --rt-ink: #0F766E;
  --rt-on: #fff;
}

.rt-c-blue {
  --rt: #3B82F6;
  --rt-ink: #1D4ED8;
  --rt-on: #fff;
}

.rt-c-sky {
  --rt: #0EA5E9;
  --rt-ink: #0369A1;
  --rt-on: #fff;
}

.rt-c-purple {
  --rt: #8B5CF6;
  --rt-ink: #6D28D9;
  --rt-on: #fff;
}

.rt-c-pink {
  --rt: #EC4899;
  --rt-ink: #BE185D;
  --rt-on: #fff;
}

.rt-c-red {
  --rt: #EF4444;
  --rt-ink: #B91C1C;
  --rt-on: #fff;
}

.rt-c-orange {
  --rt: #F97316;
  --rt-ink: #C2410C;
  --rt-on: #fff;
}

.rt-c-gold {
  --rt: #F5B70A;
  --rt-ink: #A16207;
  --rt-on: #3B2A00;
}

.rt-c-gray {
  --rt: #94A3B8;
  --rt-ink: #475569;
  --rt-on: #fff;
}

:root[data-theme="dark"] .rt-c-lime {
  --rt-ink: #BEF264;
}

:root[data-theme="dark"] .rt-c-green {
  --rt-ink: #86EFAC;
}

:root[data-theme="dark"] .rt-c-teal {
  --rt-ink: #5EEAD4;
}

:root[data-theme="dark"] .rt-c-blue {
  --rt-ink: #93C5FD;
}

:root[data-theme="dark"] .rt-c-sky {
  --rt-ink: #7DD3FC;
}

:root[data-theme="dark"] .rt-c-purple {
  --rt-ink: #C4B5FD;
}

:root[data-theme="dark"] .rt-c-pink {
  --rt-ink: #F9A8D4;
}

:root[data-theme="dark"] .rt-c-red {
  --rt-ink: #FCA5A5;
}

:root[data-theme="dark"] .rt-c-orange {
  --rt-ink: #FDBA74;
}

:root[data-theme="dark"] .rt-c-gold {
  --rt-ink: #FDE047;
}

:root[data-theme="dark"] .rt-c-gray {
  --rt-ink: #CBD5E1;
}

[class*="rt-c-"] {
  color: var(--rt-ink);
}

.whatsnew__section.is-tinted {
  background: var(--rt);
  color: var(--rt-on);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--rt) 65%, #000);
}

.whatsnew__section {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.whatsnew__section .whatsnew__dot {
  width: 1.3rem;
  height: 1.3rem;
  background: rgba(255, 255, 255, .25);
}

.whatsnew__sub {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: .3rem 0 0;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.3;
  animation: whatsnew-item .45s var(--spring) var(--d, 0ms) both;
}

.whatsnew__item.is-tinted {
  background: color-mix(in srgb, var(--rt) 15%, var(--surface-2));
  box-shadow: inset 4px 0 0 var(--rt);
}

.whatsnew__item.is-tinted .whatsnew__dot {
  background: color-mix(in srgb, var(--rt) 25%, var(--surface));
  color: var(--rt-ink);
}

.whatsnew__dot img {
  width: 1.25rem;
  height: 1.25rem;
}

.whatsnew__mark--dot::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
}

.whatsnew__mark--dot {
  color: var(--primary);
  background: var(--primary-soft);
}

.whatsnew__mark--dash::before {
  content: "";
  width: .75rem;
  height: .2rem;
  border-radius: 999px;
  background: currentColor;
}

.whatsnew__mark--dash {
  color: var(--muted);
  background: var(--surface-3);
}

.whatsnew__mark--check {
  color: #fff;
  background: var(--good);
}

.whatsnew__mark--gift {
  color: #fff;
  background: var(--purple);
}

.whatsnew__mark--fire,
.whatsnew__mark--firework,
.whatsnew__mark--bolt,
.whatsnew__mark--gem {
  background: none;
}

.whatsnew__item.is-tinted .whatsnew__mark--fire,
.whatsnew__item.is-tinted .whatsnew__mark--firework,
.whatsnew__item.is-tinted .whatsnew__mark--bolt,
.whatsnew__item.is-tinted .whatsnew__mark--gem {
  background: none;
}

.whatsnew__mark--fire img {
  transform-origin: 50% 90%;
  animation: cb-flicker .35s ease-in-out infinite alternate;
}

.whatsnew__mark--firework {
  position: relative;
}

.whatsnew__mark--firework img {
  animation: rt-firework 1.6s ease-in-out infinite;
}

.whatsnew__mark--firework::before,
.whatsnew__mark--firework::after {
  content: "";
  position: absolute;
  inset: -.2rem;
  border-radius: 50%;
  background: repeating-conic-gradient(#FFC93C 0 8deg, transparent 8deg 45deg);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 44%, #000 60%, transparent 62%);
  mask: radial-gradient(circle, transparent 42%, #000 44%, #000 60%, transparent 62%);
  opacity: 0;
  animation: rt-burst 1.6s ease-out infinite;
}

.whatsnew__mark--firework::after {
  background: repeating-conic-gradient(#FF5A5F 0 8deg, transparent 8deg 45deg);
  animation-delay: .8s;
  transform: rotate(22deg);
}

.whatsnew__mark--bolt img {
  animation: m-float 2s ease-in-out infinite;
}

.whatsnew__mark--gem img {
  animation: rt-glint 2.4s ease-in-out infinite;
}

.rt-b {
  font-weight: 900;
}

.rt-i {
  font-style: italic;
}

.rt-u {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.rt-big {
  font-size: 1.2em;
}

.rt-small {
  font-size: .82em;
}

.rt-shine {
  background: linear-gradient(100deg, currentColor 20%, #FFE58A 40%, #fff 50%, #FFE58A 60%, currentColor 80%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rt-shine 2.6s linear infinite;
}

.whatsnew__section .rt-shine {
  background-image: linear-gradient(100deg, currentColor 20%, #fff 50%, currentColor 80%);
}

@keyframes rt-firework {

  0%,
  100% {
    transform: scale(1) rotate(0);
  }

  40% {
    transform: scale(1.2) rotate(18deg);
  }
}

@keyframes rt-burst {
  0% {
    opacity: 0;
    transform: scale(.4);
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@keyframes rt-glint {

  0%,
  70%,
  100% {
    filter: none;
  }

  80% {
    filter: brightness(1.5) drop-shadow(0 0 6px #7DD3FC);
  }
}

@keyframes rt-shine {
  to {
    background-position: -250% 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .whatsnew__sub,
  .whatsnew__mark--fire img,
  .whatsnew__mark--firework img,
  .whatsnew__mark--bolt img,
  .whatsnew__mark--gem img,
  .rt-shine {
    animation: none;
  }

  .whatsnew__mark--firework::before,
  .whatsnew__mark--firework::after {
    display: none;
  }
}

@keyframes whatsnew-star {
  from {
    transform: scale(0) rotate(-120deg);
  }

  to {
    transform: none;
  }
}

@keyframes whatsnew-item {
  from {
    opacity: 0;
    transform: translateX(-14px) scale(.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .whatsnew__burst,
  .whatsnew__art,
  .whatsnew__release,
  .whatsnew__item,
  .whatsnew__section,
  .whatsnew__text {
    animation: none;
  }
}

/* /changelog and /dash/changelog: every release as a card on a timeline, under the "Yenilikler" hero. */
.changelog {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.changelog__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 2rem 1.5rem 1.6rem;
  overflow: hidden;
  border-radius: var(--radius);
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #8B5CF6 0%, #6B5CF6 45%, #18B5E8 100%);
  box-shadow: 0 var(--depth) 0 #4F3BB8;
}

.changelog__hero .whatsnew__burst {
  top: 3.6rem;
}

.changelog__title {
  position: relative;
  margin: .2rem 0 0;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}

.changelog__lead {
  position: relative;
  margin: 0;
  font-weight: 800;
  opacity: .95;
}

.changelog__stats {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin: .6rem 0 0;
}

.changelog__stat {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .28);
  font-size: .88rem;
  font-weight: 800;
}

.changelog__stat .icon {
  width: 1rem;
  height: 1rem;
}

.changelog__jump {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scrollbar-width: none;
}

.changelog__jump::-webkit-scrollbar {
  display: none;
}

.changelog__chip {
  flex: none;
  padding: .4rem .9rem;
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 900;
  font-size: .9rem;
  text-decoration: none;
  box-shadow: 0 3px 0 var(--edge);
  transition: transform .12s ease, box-shadow .12s ease;
}

.changelog__chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.changelog__chip:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--edge);
}

.changelog__chip.is-latest {
  border-color: var(--gold-edge);
  background: var(--gold);
  color: #5A3A00;
  box-shadow: 0 3px 0 #D99A00;
}

.changelog__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0;
  padding: 0 0 0 2.6rem;
  list-style: none;
}

/* The timeline rail behind the nodes. */
.changelog__list::before {
  content: "";
  position: absolute;
  left: .95rem;
  top: 1.2rem;
  bottom: 1.2rem;
  width: 4px;
  border-radius: 4px;
  background: var(--line-strong);
}

.changelog__item {
  position: relative;
  scroll-margin-top: 5.5rem;
  animation: m-pop .45s var(--spring) var(--d, 0ms) both;
}

.changelog__node {
  position: absolute;
  left: -2.6rem;
  top: 1.35rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 4px solid var(--primary);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 3px 0 var(--primary-edge);
}

.changelog__item.is-latest .changelog__node {
  border-color: var(--gold-edge);
  background: var(--gold);
  color: #fff;
  box-shadow: 0 3px 0 #B98500, 0 0 0 6px var(--gold-soft);
}

.changelog__node .icon {
  width: 1rem;
  height: 1rem;
}

.changelog__card {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.changelog__item.is-latest .changelog__card {
  border-color: var(--gold);
  box-shadow: 0 var(--depth) 0 var(--gold-edge);
}

.changelog__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.changelog__date {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
}

.changelog__date .icon {
  width: 1rem;
  height: 1rem;
}

.changelog__name {
  margin: 0;
}

.changelog__body {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.changelog__fallback {
  margin: 0;
  white-space: pre-line;
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 560px) {
  .changelog__hero {
    padding: 1.6rem 1rem 1.3rem;
  }

  .changelog__list {
    padding-left: 2rem;
  }

  .changelog__list::before {
    left: .7rem;
  }

  .changelog__node {
    left: -2rem;
    width: 1.8rem;
    height: 1.8rem;
    border-width: 3px;
  }

  .changelog__date {
    margin-left: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .changelog__item {
    animation: none;
  }
}

a.footer-note__version {
  color: inherit;
  text-decoration: none;
}

a.footer-note__version:hover {
  text-decoration: underline;
}

/* Release notes manager (/dash/admin, /dev) */
.release-list {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.release {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .9rem 1rem;
  border-radius: 20px;
  border: 2px solid var(--line);
  background: var(--surface);
  box-shadow: 0 4px 0 var(--edge);
}

.release.is-live {
  border-color: var(--good);
}

.release--editing {
  border-color: var(--primary);
  border-style: dashed;
  box-shadow: none;
}

.release__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.release__version {
  font-weight: 900;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.release__title {
  font-size: 1.02rem;
}

.release__body {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.release__body .whatsnew__item {
  padding: .4rem .6rem;
}

.release-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Phones: a release's buttons fill an even two-column grid instead of a ragged wrap. */
@media (max-width: 720px) {
  .release .release-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .release .release-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .release .release-actions > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

.release-actions .btn.is-armed {
  animation: m-shake .45s ease-in-out;
}

.release-editor__label {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.release-manager__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}

.release-manager__head .admin-card__title {
  margin: 0;
}

.rt-doc-pop {
  width: min(100%, 40rem);
}

.rt-doc-pop .app-pop__body {
  max-height: min(60dvh, 38rem);
  overflow-y: auto;
  margin: 0 -.4rem;
  padding: 0 .4rem;
}

.rt-doc {
  gap: 1.2rem;
}

.rt-doc__lead {
  margin: 0;
  padding: .7rem .9rem;
  border-radius: 14px;
  background: var(--primary-soft);
  font-weight: 700;
  line-height: 1.5;
}

.rt-doc__section {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.rt-doc__section .h3 {
  margin: 0;
}

.rt-doc__row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: center;
  gap: .3rem .8rem;
  padding: .5rem;
  border-radius: 14px;
  background: var(--surface-2);
}

.rt-doc__code {
  justify-self: start;
  padding: .3rem .6rem;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--purple);
  font: 800 .88rem/1.2 var(--font-mono);
  cursor: pointer;
  white-space: nowrap;
}

.rt-doc__code:hover,
.rt-doc__swatch:hover {
  border-color: var(--primary);
}

.rt-doc__code:active,
.rt-doc__swatch:active {
  transform: translateY(2px);
}

.rt-doc__preview {
  min-width: 0;
}

.rt-doc__preview .whatsnew__item,
.rt-doc__preview .whatsnew__section,
.rt-doc__preview .whatsnew__text,
.rt-doc__preview .whatsnew__sub {
  animation: none;
}

.rt-doc__preview .whatsnew__list {
  gap: .35rem;
}

.rt-doc__note {
  grid-column: 2;
}

.rt-doc__colors {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.rt-doc__swatch {
  padding: .3rem .65rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: var(--rt);
  color: var(--rt-on);
  font: 800 .82rem/1.2 var(--font-mono);
  cursor: pointer;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--rt) 65%, #000);
}

.rt-doc__example {
  margin: 0;
  padding: .8rem .9rem;
  border-radius: 14px;
  background: var(--surface-2);
  font: 700 .85rem/1.6 var(--font-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .rt-doc__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .rt-doc__note {
    grid-column: 1;
  }
}

.release-editor__text {
  font: inherit;
  font-weight: 700;
  min-height: 12rem;
  resize: vertical;
  line-height: 1.45;
}

/* =====================================================================
   CLASSES: welcome code step, settings card + popup, role, privacy, manager
   ===================================================================== */
.btn--sm {
  padding: .35rem .75rem;
  font-size: .85rem;
  min-height: 0;
}

.class-code-input {
  text-align: center;
  text-transform: uppercase;
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: .35em;
  padding-left: .35em;
  font-variant-numeric: tabular-nums;
}

.class-code-input::placeholder {
  color: var(--edge);
  letter-spacing: .35em;
}

.class-code-input.is-wrong {
  animation: m-shake .45s ease-in-out;
  border-color: var(--bad, #FF5A5F);
}

.class-code-msg {
  min-height: 1.2em;
  color: var(--bad, #E5484D);
  font-weight: 800;
  text-align: center;
}

.class-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  align-self: flex-start;
  margin: .35rem 0 .45rem;
  padding: .3rem .85rem;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-weight: 900;
  font-size: .85rem;
  box-shadow: 0 3px 0 #5B2FC9;
}

.class-badge .icon {
  width: 1rem;
  height: 1rem;
}

/* Welcome */
.welcome {
  width: 100%;
  max-width: 40rem;
  margin-inline: auto;
}

.welcome-class {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  text-align: center;
}

.welcome-class .class-code-input {
  max-width: 18rem;
}

.welcome-class__icon,
.class-pop__icon,
.class-joined__badge {
  display: grid;
  place-items: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 22px;
  background: var(--purple);
  color: #fff;
  box-shadow: 0 5px 0 #5B2FC9;
}

.welcome-class__icon .icon,
.class-pop__icon .icon,
.class-joined__badge .icon {
  width: 2.3rem;
  height: 2.3rem;
}

.welcome-class__actions {
  justify-content: center;
}

.class-joined {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
  animation: m-pop .5s var(--spring);
}

.class-joined__badge {
  width: 6rem;
  height: 6rem;
  border-radius: 30px;
  animation: m-medal-spring .7s cubic-bezier(.3, 1.5, .5, 1);
}

/* Settings: authorize + class side by side on computers */
.settings-pair {
  display: grid;
  gap: 1rem;
}

.settings-pair__card {
  min-width: 0;
}

.class-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 2px solid var(--line);
  transition: transform .25s var(--spring), border-color .2s ease;
}

.class-card:active {
  transform: translateY(3px);
}

.class-card.is-member {
  border-color: var(--purple);
  background: linear-gradient(135deg, var(--purple-soft), var(--surface) 70%);
}

.class-card__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 18px;
  background: var(--purple);
  color: #fff;
  box-shadow: 0 4px 0 #5B2FC9;
}

.class-card__icon .icon {
  width: 1.9rem;
  height: 1.9rem;
}

.class-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.class-card__cta {
  flex: none;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .class-card:hover {
    transform: translateY(-3px);
    border-color: var(--purple);
  }
}

/* Class popup */
.class-pop {
  position: relative;
  width: min(100%, 26rem);
  align-items: stretch;
}

.class-pop__close {
  position: absolute;
  top: .6rem;
  right: .6rem;
}

.class-pop__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  text-align: center;
  padding-top: .4rem;
}

.event-settings__art {
  width: 3.5rem;
  height: 3.5rem;
}

.event-settings__extend {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
}

.class-pop__name {
  color: var(--purple);
}

.class-pop__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
}

.class-pop__switch>summary {
  list-style: none;
  width: 100%;
  justify-content: center;
}

.class-pop__switch>summary::-webkit-details-marker {
  display: none;
}

.class-pop__switch[open]>summary {
  margin-bottom: .6rem;
}

.class-code-form {
  gap: .5rem;
}

/* Role */
.role-pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}

.role-pick__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .9rem .6rem;
  border-radius: 20px;
  border: 3px solid var(--line);
  background: var(--surface-2);
  color: inherit;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--edge);
  text-align: center;
}

.role-pick__btn:active {
  transform: translateY(3px);
  box-shadow: none;
}

.role-pick__btn.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
}

.role-pick__icon {
  width: 2rem;
  height: 2rem;
  color: var(--primary);
}

.role-pick__name {
  font-weight: 900;
  font-size: 1.05rem;
}

.role-card [data-role-msg]:empty {
  display: none;
}

.more-settings__row.role-card {
  gap: .75rem;
}

.more-settings__row.role-card>.role-pick {
  flex: none;
}

.more-settings__row .role-pick__btn {
  background: var(--surface);
}

.more-settings__row .role-pick__btn.is-active {
  background: var(--primary-soft);
}

.app-pop-modal.is-out {
  opacity: 0;
  transition: opacity .2s ease;
}

.app-pop {
  width: min(100%, 25rem);
  gap: 1rem;
  padding: 1.5rem 1.3rem 1.3rem;
}

.app-pop__close {
  position: absolute;
  top: .6rem;
  right: .6rem;
}

.app-pop__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  padding: 0 1.6rem;
  text-align: center;
}

.app-pop__head .h2,
.app-pop__head p {
  margin: 0;
}

.app-pop__head p {
  line-height: 1.5;
}

.app-pop__icon {
  display: grid;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  margin-bottom: .2rem;
  border-radius: 20px;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--primary) 60%, #000);
  animation: m-bump .5s ease-out .15s;
}

.app-pop--bad .app-pop__icon {
  background: var(--bad);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--bad) 60%, #000);
}

.app-pop__icon .icon {
  width: 1.7rem;
  height: 1.7rem;
}

.app-pop__body:empty {
  display: none;
}

.app-pop__actions {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.app-pop__actions .btn,
.app-pop .account-form .btn[type="submit"] {
  width: 100%;
  min-height: 3rem;
  justify-content: center;
  text-transform: none;
  letter-spacing: 0;
}

.app-pop .account-form {
  max-width: none;
}

.app-pop .more-settings__confirm {
  padding: 0;
  border: 0;
  background: none;
}

.app-pop .more-settings__confirm .row {
  flex-direction: column-reverse;
  align-items: stretch;
}

.app-pop .more-settings__confirm .btn {
  width: 100%;
  min-height: 3rem;
  justify-content: center;
}

.device-code-box {
  align-items: center;
  text-align: center;
  padding: .8rem;
  border-radius: 20px;
  background: var(--surface-2);
}

.device-code-box p {
  margin: 0;
}

.device-code-box .device-code {
  font-size: clamp(1.45rem, 7vw, 2rem);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .app-pop__icon {
    animation: none;
  }
}

/* Privacy */
.more-settings__title {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.big-toggle--privacy {
  --t-on: var(--purple);
  --t-on-edge: #5B2FC9;
}

.big-toggle--privacy .big-toggle__knob {
  color: var(--purple);
}

[data-privacy].is-private .privacy-part {
  opacity: .45;
  pointer-events: none;
}

.private-card__icon {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
}

.private-card__icon .icon {
  width: 1.8rem;
  height: 1.8rem;
}

.res-badge.is-hidden {
  filter: grayscale(1);
  opacity: .6;
}

.res-badge.is-hidden .res-badge__value .icon {
  width: 1.6rem;
  height: 1.6rem;
}

/* Leaderboard: everyone / my class */
.lb__who .pill-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.lb__who .icon {
  width: 1rem;
  height: 1rem;
}

/* Class manager (teacher page, admin panel) */
.class-list {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.class-add {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .9rem;
  border-radius: 20px;
  border: 2px dashed var(--primary);
}

.class-add .input {
  flex: 1 1 12rem;
}

.class-row {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: 1rem;
  border-radius: 22px;
  border: 2px solid var(--line);
  background: var(--surface);
  box-shadow: 0 4px 0 var(--edge);
}

.class-row.is-closed {
  border-style: dashed;
}

.class-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.class-row__rename {
  flex: 1 1 10rem;
  font-weight: 900;
  font-size: 1.15rem;
}

.class-row__head select {
  flex: 0 1 14rem;
}

.class-row__code {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .6rem .9rem;
  border-radius: 16px;
  background: var(--purple-soft);
}

.class-row__codetext {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: .12em;
  color: var(--purple);
  margin-right: auto;
}

.class-members {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.class-member {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .7rem;
  border-radius: 16px;
  background: var(--surface-2);
}

.class-member__name {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Board projection of the join code */
.projector {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 2rem;
  text-align: center;
  color: #fff;
  background: radial-gradient(circle at 50% 40%, #6B5CF6, #2A1C7A 70%);
  animation: m-fade .25s ease-out;
}

.projector__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  color: #fff;
}

.projector__eyebrow {
  color: #E8DDFF;
  font-size: 1.2rem;
}

.projector__name {
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 900;
}

.projector__code {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-weight: 800;
  font-size: clamp(3.5rem, 15vw, 12rem);
  letter-spacing: .12em;
  padding: .2em .6em;
  border-radius: .3em;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 -.08em 0 rgba(0, 0, 0, .2);
}

.projector__hint {
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  font-weight: 800;
  opacity: .9;
}

/* =====================================================================
   CLASS EVENTS: join card, popups, event dashboard, teacher wizard and class view
   ===================================================================== */
.btn--xl {
  min-height: calc(var(--tap) + 22px);
  font-size: 1.35rem;
  padding-inline: 2em;
  border-radius: 999px;
}

.chip--wide {
  white-space: normal;
}

.event-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .8rem;
  border-radius: 999px;
  font-weight: 900;
  font-size: .85rem;
  background: var(--surface-2);
  color: var(--muted);
}

.event-status .icon {
  width: 1rem;
  height: 1rem;
}

.event-status--live {
  background: #FFE3E3;
  color: #D62828;
}

.event-status--paused {
  background: var(--gold-soft);
  color: #A56B00;
}

.event-status--scheduled {
  background: var(--primary-soft);
  color: var(--primary);
}

:root[data-theme="dark"] .event-status--live {
  background: #4A1A1E;
  color: #FF8A8F;
}

.event-status__dot {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: currentColor;
  animation: event-pulse 1.2s ease-in-out infinite;
}

@keyframes event-pulse {
  50% {
    opacity: .3;
    transform: scale(.7);
  }
}

/* Join card (home above Play, lessons) */
.event-slot[hidden] {
  display: none;
}

.game-card--event {
  --gc: #FF5A5F;
  --gc-edge: #C73A3F;
  min-height: 8.5rem;
}

.game-card--event.event-join--scheduled {
  --gc: var(--primary);
  --gc-edge: var(--primary-edge);
}

.game-card--event.event-join--paused {
  --gc: #F59E0B;
  --gc-edge: #B45309;
}

.event-join__badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  align-self: flex-start;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  font-weight: 900;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.event-join__badge .icon {
  width: .9rem;
  height: .9rem;
}

.game-card--event .game-card__title {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
}

.game-card--event .game-card__icon img {
  animation: m-float 2.6s ease-in-out infinite;
}

/* New event / notice popups */
.event-pop-modal.is-out {
  opacity: 0;
  transition: opacity .2s ease;
}

.event-pop {
  width: min(100%, 26rem);
  padding: 0 0 1.2rem;
  gap: 0;
  overflow: hidden;
}

.event-pop__hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 1.6rem 1.2rem 1.2rem;
  overflow: hidden;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #FF5A5F, #FF9F1C);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .12);
}

.event-pop--exam .event-pop__hero {
  background: linear-gradient(135deg, #2F80ED, #18B5E8);
}

.event-pop--practice .event-pop__hero {
  background: linear-gradient(135deg, #8B5CF6, #6B5CF6);
}

.event-pop--mission .event-pop__hero {
  background: linear-gradient(135deg, #22C55E, #0EA5A4);
}

.event-pop__burst {
  position: absolute;
  left: 50%;
  top: 3rem;
  width: 24rem;
  height: 24rem;
  margin: -12rem 0 0 -12rem;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 255, 255, .18) 0 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%);
  mask: radial-gradient(circle, #000 10%, transparent 60%);
  animation: m-spin 20s linear infinite;
}

.event-pop__art {
  position: relative;
  width: 4.6rem;
  height: 4.6rem;
  animation: whatsnew-star .7s cubic-bezier(.3, 1.6, .5, 1) both, m-float 3s ease-in-out .7s infinite;
}

.event-pop__eyebrow {
  position: relative;
  color: rgba(255, 255, 255, .9);
}

.event-pop__title {
  position: relative;
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}

.event-pop__body {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.1rem 1.2rem 0;
}

.event-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
}

.notice-pop {
  width: min(100%, 26rem);
}

.notice-pop__head {
  display: flex;
  align-items: center;
  gap: .7rem;
}

.notice-pop__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 16px;
  background: var(--warn);
  color: #fff;
  box-shadow: 0 4px 0 #C46E00;
  animation: m-shake .6s ease-in-out .2s;
}

.notice-pop__list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.notice-pop__item {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .8rem 1rem;
  border-radius: 18px;
  background: var(--gold-soft);
  border: 2px solid var(--gold);
}

.notice-pop__text {
  margin: 0;
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.4;
}

/* Event dashboard */
.event-nav__exit {
  color: #E5484D;
}

.under-menu.event-nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.event-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.4rem;
  border-radius: 28px;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(135deg, #FF5A5F, #FF9F1C);
  box-shadow: 0 7px 0 #C73A3F;
}

.event-hero--exam {
  background: linear-gradient(135deg, #2F80ED, #18B5E8);
  box-shadow: 0 7px 0 #1B5FBF;
}

.event-hero--practice {
  background: linear-gradient(135deg, #8B5CF6, #6B5CF6);
  box-shadow: 0 7px 0 #5B2FC9;
}

.event-hero--mission {
  background: linear-gradient(135deg, #22C55E, #0EA5A4);
  box-shadow: 0 7px 0 #0F7A5A;
}

.event-hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 -56px;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, .08) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .08) 75%, transparent 75%, transparent);
  background-size: 56px 56px;
  animation: m-stripes 3s linear infinite;
  pointer-events: none;
}

.event-hero>* {
  position: relative;
  z-index: 1;
}

.event-hero__top {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.event-hero__art {
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .15));
  animation: m-float 3s ease-in-out infinite;
}

.event-hero__id {
  flex: 1;
  min-width: 0;
}

.event-hero .eyebrow {
  color: rgba(255, 255, 255, .85);
}

.event-hero__title {
  color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}

.event-hero .event-status {
  background: rgba(255, 255, 255, .95);
}

.event-topics {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.event-topic {
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  font-weight: 800;
  font-size: .85rem;
}

.event-hero .event-facts {
  justify-content: flex-start;
}

.event-hero .chip {
  background: rgba(255, 255, 255, .92);
  color: #1E2A47;
}

.event-clock-box {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  align-self: flex-start;
  padding: .5rem 1.1rem;
  border-radius: 18px;
  background: rgba(0, 0, 0, .18);
}

.event-clock__label {
  font-weight: 800;
  opacity: .9;
}

.event-clock {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-weight: 800;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
}

.event-hero__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem 1.2rem;
}

.event-hero__bottom .event-clock-box {
  align-self: center;
}

.event-hero .event-cta {
  align-self: center;
  margin-left: auto;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .22);
}

.event-hero .event-cta-note {
  margin-left: auto;
  background: rgba(0, 0, 0, .18);
  color: #fff;
}

@media (max-width: 720px) {
  .event-hero__bottom {
    flex-direction: column;
    align-items: stretch;
  }

  .event-hero .event-cta,
  .event-hero .event-cta-note {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }

  .event-hero__bottom .event-clock-box {
    align-self: flex-start;
  }
}

.event-cta-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0;
  padding: .9rem 1rem;
  border-radius: 20px;
  background: var(--surface-2);
  font-weight: 800;
  text-align: center;
}

.event-mine {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-event .lb__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.lb-row__extra {
  margin-left: auto;
  margin-right: .6rem;
}

@media (max-width: 720px) {
  .event-mine {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-clock {
    font-size: 1.6rem;
  }
}

/* Teacher: wizard */
.wizard {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  padding: 1.5rem;
}

.wizard__steps+.progress {
  margin-top: -.6rem;
}

.wizard__panel>.h2 {
  margin: 0;
}

.wizard__panel>.h2+.muted {
  margin-top: -.5rem;
}

.wizard__topics {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wizard__topics .topic-random-row {
  display: block;
}

.wizard__topics .topic-random-row>.topic-random:first-child {
  flex: none;
  width: 100%;
  box-sizing: border-box;
}

.wizard__topics .topic-groups {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  align-items: start;
}

.wizard__topics .topic-group {
  gap: .9rem;
  padding: 1rem 1.1rem;
}

.wizard__topics .topic-group .topic-list {
  gap: .7rem;
}

.wizard__nav {
  padding-top: .4rem;
}

.wizard__steps {
  display: flex;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wizard__dot {
  display: flex;
  align-items: center;
  gap: inherit;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.wizard__step.is-done {
  cursor: pointer;
}

/* Steps on the left, the running summary beside them on wide screens (under them on narrow ones). */
.wizard__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem);
  gap: 1.4rem;
  align-items: start;
}

.wizard__panels {
  min-width: 0;
}

.wizard__aside {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem;
  border-radius: 20px;
  background: var(--surface-2);
}

.wizard__aside-title {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.wizard__aside .wizard-sum {
  padding: 0;
  background: none;
}

.wizard-sum__row {
  width: 100%;
  padding: .55rem .6rem;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  align-items: flex-start;
}

.wizard-sum__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.wizard-sum__row.is-empty {
  color: var(--muted);
  font-weight: 700;
  background: transparent;
  border: 2px dashed var(--line);
}

.wizard-sum__row.is-current {
  box-shadow: inset 3px 0 0 var(--primary);
}

@media (max-width: 1000px) {
  .wizard__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .wizard__aside {
    position: static;
  }
}

.wizard__step {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .6rem;
  border-radius: 14px;
  color: var(--muted);
  font-weight: 800;
  font-size: .9rem;
  background: var(--surface-2);
}

.wizard__num {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  font-weight: 900;
}

.wizard__step.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}

.wizard__step.is-active .wizard__num {
  background: var(--primary);
  color: #fff;
}

.wizard__step.is-done .wizard__num {
  background: var(--good);
  color: #fff;
}

.wizard__panel {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  animation: m-rise .35s var(--spring);
}

.wizard__panel[hidden] {
  display: none;
}

.wizard__nav {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.wizard__msg {
  margin: 0;
  color: var(--bad);
  font-weight: 800;
}

.wizard__msg.is-info {
  color: var(--primary);
}

/* Topics step: 2.1 / 2.2 / 2.3 sub-steps appear one under the other as they are answered. */
.wizard__sub {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  padding-top: .9rem;
  border-top: 2px dashed var(--line);
  animation: m-rise .3s var(--spring);
}

.wizard__sub[hidden] {
  display: none;
}

.wizard__subtitle {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 900;
}

.wizard__subnum {
  display: grid;
  place-items: center;
  min-width: 2.4rem;
  height: 1.8rem;
  padding: 0 .45rem;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: .85rem;
  font-variant-numeric: tabular-nums;
}

.wizard__sub>p.muted {
  margin: -.4rem 0 0;
}

.pick-grid.pick-grid--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.pick-card.pick-card--mode,
.pick-card.pick-card--module {
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  column-gap: .8rem;
  text-align: left;
  padding: 1rem 1.1rem;
}

.pick-card.pick-card--mode .muted {
  flex-basis: 100%;
}

.pick-card__badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 15px;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 3px 0 var(--primary-edge);
}

.pick-card__badge .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.pick-card__badge--purple {
  background: var(--purple);
  box-shadow: 0 3px 0 var(--purple-edge);
}

.pick-card__badge--module {
  background: var(--mod, var(--primary));
  box-shadow: 0 3px 0 rgba(0, 0, 0, .25);
}

.pick-card.pick-card--mode.is-active,
.pick-card.pick-card--module.is-active {
  transform: none;
}

.pick-card--mode.is-active::after,
.pick-card--module.is-active::after {
  content: "";
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

/* Time step: start and end side by side, each a row of days and an hour : minute clock. */
.when {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.when__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
}

.when__part {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  min-width: 0;
  padding: 1rem;
  border-radius: 20px;
  background: var(--surface-2);
}

.when__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 900;
}

.when__dot {
  width: .8rem;
  height: .8rem;
  border-radius: 50%;
}

.when__dot--start {
  background: var(--good);
  box-shadow: 0 0 0 4px var(--good-soft);
}

.when__dot--end {
  background: var(--bad);
  box-shadow: 0 0 0 4px var(--bad-soft);
}

.when__arrow {
  display: grid;
  place-items: center;
  color: var(--muted);
}

.when__arrow .icon {
  width: 1.6rem;
  height: 1.6rem;
}

.when__mode .btn {
  flex: 1;
}

.when__now {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .9rem 1rem;
  border-radius: 16px;
  background: var(--good-soft);
  color: var(--good-ink);
  font-weight: 800;
}

.page-teacher-event .main {
  max-width: 1400px;
}

.when__days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: .35rem;
}

.when__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .05rem;
  min-width: 0;
  padding: .4rem .2rem;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: var(--surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--edge);
  transition: transform .15s var(--spring);
}

.when__day:active {
  transform: translateY(2px);
  box-shadow: none;
}

.when__day.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
  box-shadow: 0 3px 0 var(--primary-edge);
}

.when__day-name,
.when__day-month {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .7rem;
  font-weight: 800;
  opacity: .8;
}

.when__day-num {
  font-size: 1.25rem;
  line-height: 1.1;
  font-weight: 900;
}

.when__clock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.when__stepper {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem;
  border-radius: 16px;
  background: var(--surface);
}

.when__stepper .when__step {
  width: 2.8rem;
  height: 2.8rem;
  min-height: 0;
}

.when__stepper .when__step .icon {
  width: 1.2rem;
  height: 1.2rem;
}

.when__value {
  min-width: 2.8rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.when__colon {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--muted);
}

.when .chip.when__span {
  cursor: pointer;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  padding: .35rem .8rem;
  box-shadow: 0 3px 0 var(--edge);
}

.when .chip.when__span[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary-edge);
  color: #fff;
}

.when__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .8rem;
  padding: .8rem 1rem;
  border-radius: 16px;
  background: var(--primary-soft);
  color: var(--primary-edge);
  font-weight: 800;
}

.when__sum strong {
  margin-left: auto;
}

.when__sum.is-bad {
  background: var(--bad-soft);
  color: var(--bad-ink);
}

:root[data-theme="dark"] .when__sum {
  color: var(--primary);
}

@media (max-width: 900px) {
  .when__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .when__arrow {
    transform: rotate(90deg);
  }
}

.wizard__topics .topic-level {
  display: none;
}

.wizard__options {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.wizard__exam {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.wizard__exam[hidden] {
  display: none;
}

.wizard__options [data-levels] .btn[hidden] {
  display: none;
}

.wizard-sum {
  display: grid;
  gap: .45rem;
  padding: .9rem 1rem;
  border-radius: 18px;
  background: var(--surface-2);
}

.wizard-sum__row {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-weight: 800;
}

.wizard-sum__row .icon {
  color: var(--primary);
}

.pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .8rem;
}

.pick-grid--chips {
  grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
}

.pick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 1rem .8rem;
  border-radius: 22px;
  border: 3px solid var(--line);
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--edge);
  transition: transform .2s var(--spring), border-color .2s ease;
}

.pick-card:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--edge);
}

.pick-card {
  min-width: 0;
}

.pick-card>* {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.pick-card.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  transform: translateY(-2px);
}

.pick-card__big {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 900;
  font-size: 1.2rem;
}

.pick-card__art {
  width: 3.6rem;
  height: 3.6rem;
}

.pick-card--race.is-active {
  border-color: #FF5A5F;
  background: #FFE9E9;
}

.pick-card--mission.is-active {
  border-color: var(--good);
  background: var(--good-soft);
}

.pick-card--exam.is-active {
  border-color: var(--primary);
}

.pick-card--practice.is-active {
  border-color: var(--purple);
  background: var(--purple-soft);
}

:root[data-theme="dark"] .pick-card--race.is-active {
  background: #4A1A1E;
}

@media (max-width: 720px) {
  .wizard__steps .wizard__label {
    display: none;
  }
}

/* Teacher: event list */
.event-list {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.event-row {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .9rem 1rem;
  border-radius: 20px;
  border: 2px solid var(--line);
  background: var(--surface);
}

.event-row--live {
  border-color: #FF5A5F;
}

.event-row--ended {
  /* The "Bitti" badge marks it; no fading, so the text keeps its contrast. */
}

.event-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.event-row__head>strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.event-row .chip {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: none;
  padding: .2rem .7rem .2rem .45rem;
  font-size: .85rem;
}

.event-row .chip .icon {
  width: 1rem;
  height: 1rem;
}

/* Teacher: report */
.report-pop {
  position: relative;
  width: min(100%, 40rem);
}

.report-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: .6rem;
}

.report-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
  padding: .8rem;
  border-radius: 18px;
  background: var(--surface-2);
  text-align: center;
}

.report-stat__value {
  font-size: 1.7rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.report-stat__label {
  font-weight: 800;
  color: var(--muted);
  font-size: .85rem;
}

.report-stats--small .report-stat__value {
  font-size: 1.25rem;
}

.report-bars {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.report-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: .9rem;
}

.report-bar__track {
  height: .8rem;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.report-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--good);
}

.report-bar--warn .report-bar__fill {
  background: var(--warn);
}

.report-bar--bad .report-bar__fill {
  background: var(--bad);
}

.report-bar__value {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.report-board {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.report-board li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .7rem;
  border-radius: 14px;
  background: var(--surface-2);
}

.report-board__name {
  flex: 1;
  font-weight: 800;
}

/* Teacher class pages (picker, overview, announcements, settings): wide grids on computers and boards. */
.page-tclass .main,
.page-tclasses .main {
  max-width: none;
  padding-inline: clamp(1.25rem, 2vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.tclass,
.tclasses {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.tclass-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.tclass-head__text {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}

.tclass-head__title {
  overflow-wrap: anywhere;
}

.tclass-head__back {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  align-self: flex-start;
  max-width: 100%;
  padding: .25rem .75rem .25rem .4rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-weight: 800;
  font-size: .9rem;
  text-decoration: none;
  transition: color .15s ease, background .15s ease;
}

.tclass-head__back span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tclass-head__back:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

.tclass-head__back .icon {
  width: 1.1rem;
  height: 1.1rem;
}

.tclass-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-weight: 800;
}

.tclass-head__meta>span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.tclass-head__meta .icon {
  width: 1.05rem;
  height: 1.05rem;
}

.tclass-head__meta .is-open {
  color: var(--good-ink);
}

.tclass-head__meta .is-closed {
  color: var(--warn-ink);
}

.tclass-head__dot {
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: var(--line-strong);
}

.tclass-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.tclass-head__gear .icon {
  transition: transform .45s var(--spring);
}

.tclass-head__gear:hover .icon {
  transform: rotate(75deg);
}

.tclass-head__gear.is-active {
  --btn-bg: var(--primary-soft);
  color: var(--primary);
}

/* Overview */
.tclass__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 25rem);
  gap: 1.25rem;
  align-items: start;
}

.tclass__main,
.tclass__side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.teach-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .9rem;
}

.kpi {
  --k: var(--primary);
  --k-soft: var(--primary-soft);
  display: flex;
  align-items: center;
  gap: .8rem;
  min-width: 0;
  padding: .9rem 1rem;
  border-radius: var(--radius);
  border: 2px solid var(--line);
  background: var(--surface);
  box-shadow: 0 4px 0 var(--edge);
}

.kpi--good {
  --k: var(--good-edge);
  --k-soft: var(--good-soft);
}

.kpi--warn {
  --k: var(--warn-edge);
  --k-soft: var(--warn-soft);
}

.kpi--purple {
  --k: var(--purple);
  --k-soft: var(--purple-soft);
}

.kpi--gold {
  --k: var(--gold-edge);
  --k-soft: var(--gold-soft);
}

.kpi__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 16px;
  background: var(--k-soft);
  color: var(--k);
}

.kpi__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.kpi__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kpi__value {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.kpi__label {
  font-size: .8rem;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teach-students__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1rem;
}

.teach-tools {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.teach-tools__group {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.teach-tools__label {
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-left: .3rem;
}

.teach-tools__group .pill-tabs {
  width: 100%;
}

.teach-tools__group .pill-tabs__tab {
  flex: 1;
}

.teach-sort {
  margin-left: 0;
}

.teach-sort .pill-tabs__tab {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: .35rem .85rem;
}

.teach-sort .pill-tabs__tab.is-active {
  background: var(--surface);
}

.teach-search {
  flex: 1 1 100%;
}

.teach-filter .pill-tabs__tab {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 900;
  padding: .35rem .95rem;
}

.teach-filter .pill-tabs__tab.is-active {
  background: var(--surface);
}

.tclass-code {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.2rem 1.3rem;
  border-radius: var(--radius);
  color: #fff;
  background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .22), transparent 45%), linear-gradient(135deg, var(--purple), var(--purple-edge));
  box-shadow: 0 5px 0 #4B23A8;
}

.tclass-code.is-closed {
  filter: grayscale(.7);
}

.tclass-code__label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 800;
  font-size: .85rem;
  color: rgba(255, 255, 255, .85);
}

.tclass-code__label .icon {
  width: 1rem;
  height: 1rem;
}

.tclass-code__value {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.1;
  white-space: nowrap;
}

.tclass-code__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.tclass-code--side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label actions" "value actions";
  align-items: center;
  column-gap: 1rem;
  row-gap: .4rem;
}

.tclass-code--side .tclass-code__label {
  grid-area: label;
}

.tclass-code--side .tclass-code__value {
  grid-area: value;
}

.tclass-code--side .tclass-code__actions {
  grid-area: actions;
  flex-direction: column;
  flex-wrap: nowrap;
}

.tclass-code--side .tclass-code__actions .btn--icon {
  width: 2.8rem;
  height: 2.8rem;
  min-height: 0;
  padding: 0;
}

.tclass-weak .report-bar__value {
  white-space: nowrap;
}

.tclass-weak__go {
  align-self: flex-start;
}

.tclass-events__list {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tclass-events__item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .6rem;
  border-radius: 14px;
  background: var(--surface-2);
}

.tclass-events__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tclass-events__text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tclass-events__actions {
  display: flex;
  gap: .3rem;
  flex: none;
}

.tclass-events__actions .btn--icon {
  width: 2.4rem;
  height: 2.4rem;
  min-height: 0;
}

.notice-list li {
  align-items: flex-start;
}

.notice-list li.is-live {
  box-shadow: inset 4px 0 0 var(--primary);
}

.notice-list__text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.notice-list__meta {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: .35rem;
  flex: none;
}

/* Notice colours: tags, history rows and swatches share them */
.notice-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}

.notice-tag .icon {
  width: .9rem;
  height: .9rem;
}

.notice-tag--info,
.tnote__item--info,
.tnote__color--info {
  --c: var(--primary);
  --c-soft: var(--primary-soft);
  --c-ink: var(--primary-edge);
}

.notice-tag--success,
.tnote__item--success,
.tnote__color--success {
  --c: var(--good);
  --c-soft: var(--good-soft);
  --c-ink: var(--good-ink);
}

.notice-tag--warning,
.tnote__item--warning,
.tnote__color--warning {
  --c: var(--warn);
  --c-soft: var(--warn-soft);
  --c-ink: var(--warn-ink);
}

.notice-tag--danger,
.tnote__item--danger,
.tnote__color--danger {
  --c: var(--bad);
  --c-soft: var(--bad-soft);
  --c-ink: var(--bad-ink);
}

.notice-tag--brand,
.tnote__item--brand,
.tnote__color--brand {
  --c: var(--brand);
  --c-soft: var(--brand-soft);
  --c-ink: var(--brand);
}

:root[data-theme="dark"] .notice-tag--brand,
:root[data-theme="dark"] .tnote__item--brand {
  --c-soft: var(--brand-soft-dark);
  --c-ink: var(--brand-ink-dark);
}

.notice-tag[class*="notice-tag--"]:not(.notice-tag--off) {
  background: var(--c-soft);
  color: var(--c-ink);
}

/* Class picker */
.tclasses__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: 1.1rem;
}

.tclass-card {
  --tc-pad: 1.2rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: var(--tc-pad);
  border-radius: var(--radius);
  border: 2px solid var(--line);
  background: var(--surface);
  box-shadow: 0 5px 0 var(--edge);
  color: inherit;
  transition: transform .2s var(--spring), border-color .2s ease;
}

.tclass-card.has-event--live {
  border-color: var(--bad);
}

.tclass-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.tclass-card:has(.tclass-card__link:active) {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--edge);
}

/* The coloured band is the top row itself (bleeding to the card edges), so it always ends above the stats. */
.tclass-card__top {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
  margin: calc(var(--tc-pad) * -1) calc(var(--tc-pad) * -1) 0;
  padding: var(--tc-pad);
  border-bottom: 2px solid var(--line);
  background: linear-gradient(135deg, var(--primary-soft), var(--purple-soft));
}

.tclass-card.is-closed .tclass-card__top {
  background: var(--surface-2);
}

.tclass-card__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 16px;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 3px 0 var(--primary-edge);
}

.tclass-card.is-closed .tclass-card__icon {
  background: var(--muted);
  box-shadow: 0 3px 0 var(--edge);
}

.tclass-card__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.tclass-card__name {
  flex: 1;
  min-width: 0;
  font-size: 1.35rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tclass-card__event {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  align-self: flex-start;
  max-width: 100%;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--bad-soft);
  color: var(--bad-ink);
  font-size: .85rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.has-event--scheduled .tclass-card__event,
.has-event--paused .tclass-card__event {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

.tclass-card__event .icon {
  width: 1rem;
  height: 1rem;
}

.tclass-card__stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
  gap: .5rem;
}

.tclass-card__stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: .55rem .7rem;
  border-radius: 14px;
  background: var(--surface-2);
}

.tclass-card__stat strong {
  font-size: 1.3rem;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
}

.tclass-card__stat span {
  font-size: .75rem;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tclass-card__stat--good strong {
  color: var(--good-ink);
}

.tclass-card__stat--code strong {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  letter-spacing: .1em;
  color: var(--purple);
}

.tclass-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.tclass-card__go {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 900;
  color: var(--primary);
}

.tclass-card__go .icon {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform .2s var(--spring);
}

.tclass-card__gear {
  position: relative;
  z-index: 2;
}

.tclass-card--new {
  align-items: center;
  justify-content: center;
  min-height: 13rem;
  border: 3px dashed var(--line-strong);
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font: inherit;
  font-weight: 900;
  font-size: 1.1rem;
  cursor: pointer;
}

.tclass-card--new .icon {
  width: 2.4rem;
  height: 2.4rem;
}

.tclass-card--new:active {
  transform: translateY(3px);
}

.tclass-card--add {
  border-color: var(--primary);
}

.tclass-card--add .input {
  width: 100%;
}

.tclass-card__art {
  width: 3.2rem;
  height: 3.2rem;
}

.tclass-card__row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.tclasses__empty {
  max-width: 36rem;
  width: 100%;
  margin: 1rem auto;
}

@media (hover: hover) and (pointer: fine) {
  .tclass-card:not(.tclass-card--add):hover {
    transform: translateY(-4px);
    border-color: var(--primary);
  }

  .tclass-card:hover .tclass-card__go .icon {
    transform: translateX(4px);
  }

  .tclass-card--new:hover {
    color: var(--primary);
  }
}

/* Settings */
.tset-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 1.25rem;
  align-items: start;
}

.tset-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.tset__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.tset__row .input {
  flex: 1 1 12rem;
}

.tset__row--split {
  justify-content: space-between;
}

.tset--danger {
  border-color: var(--bad-soft);
}

.tset--danger .admin-card__title .icon {
  color: var(--bad);
}

.tset--danger .btn {
  align-self: flex-start;
}

/* Announcements */
.tnote {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.tnote__compose,
.tnote__side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.tnote__field {
  position: relative;
}

.tnote__text {
  width: 100%;
  min-height: 7.5rem;
  padding-bottom: 1.8rem;
  resize: vertical;
  font-family: var(--font);
  font-size: 1.05rem;
  line-height: 1.45;
}

.tnote__count {
  position: absolute;
  right: .9rem;
  bottom: .6rem;
  font-size: .75rem;
  font-weight: 800;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.tnote__count.is-near {
  color: var(--warn-ink);
}

.tnote__label {
  margin: .2rem 0 0;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.tnote .chip.tnote__template,
.tnote .chip.tnote__chip {
  cursor: pointer;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  box-shadow: 0 3px 0 var(--edge);
  transition: transform .15s var(--spring);
}

.tnote .chip.tnote__template {
  padding: .35rem .8rem .35rem .6rem;
  font-size: .88rem;
  text-align: left;
}

.tnote .chip.tnote__template .icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--purple);
}

.tnote .chip.tnote__chip {
  min-height: 2.6rem;
  padding: .4rem 1rem;
  font-weight: 900;
}

.tnote .chip.tnote__chip[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary-edge);
  color: #fff;
  box-shadow: 0 3px 0 var(--primary-edge);
}

.tnote .chip:active {
  transform: translateY(2px);
  box-shadow: none;
}

.tnote__modes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: .8rem;
}

.tnote__mode {
  position: relative;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  text-align: left;
}

.tnote__mode .pick-card__big {
  font-size: 1.1rem;
}

.tnote__mode-icon {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 14px;
  background: var(--surface-2);
  color: var(--muted);
  transition: background .2s ease, color .2s ease;
}

.tnote__mode.is-active .tnote__mode-icon {
  background: var(--primary);
  color: #fff;
}

.tnote__tick {
  position: absolute;
  top: .75rem;
  right: .75rem;
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  color: transparent;
  transition: background .2s ease, color .2s ease;
}

.tnote__tick .icon {
  width: 1rem;
  height: 1rem;
}

.tnote__mode.is-active .tnote__tick {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  animation: m-pop .3s var(--spring);
}

.tnote__warn {
  margin: 0;
  color: var(--bad-ink);
  font-weight: 800;
}

.tnote__colors {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}

.tnote__color {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0;
  border-radius: 50%;
  border: 3px solid var(--surface);
  background: var(--c);
  color: #fff;
  box-shadow: 0 0 0 2px var(--line-strong);
  cursor: pointer;
  transition: transform .2s var(--spring), box-shadow .2s ease;
}

.tnote__color .icon {
  width: 1.2rem;
  height: 1.2rem;
  opacity: 0;
  transition: opacity .15s ease;
}

.tnote__color.is-active {
  transform: scale(1.1);
  box-shadow: 0 0 0 3px var(--c);
}

.tnote__color.is-active .icon {
  opacity: 1;
}

.tnote__preview {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tnote__frame {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: .8rem;
  border-radius: 18px;
  border: 2px dashed var(--line-strong);
  background: var(--bg);
  overflow: hidden;
}

.tnote__frame-label {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.tnote__banner {
  z-index: auto;
  border-radius: 12px;
}

.tnote__banner .site-banner__body span {
  overflow-wrap: anywhere;
}

.tnote__pop {
  align-self: center;
  width: 100%;
  max-width: 24rem;
  padding: 1rem 1.1rem;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--float);
}

.tnote__pop .notice-pop__text {
  margin: .6rem 0 0;
  overflow-wrap: anywhere;
}

.tnote__list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tnote__item {
  --c: var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .8rem 1rem;
  border-radius: 16px;
  background: var(--surface-2);
  box-shadow: inset 5px 0 0 var(--line-strong);
}

.tnote__item.is-live {
  box-shadow: inset 5px 0 0 var(--c);
}

.tnote__item-text {
  margin: 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.tnote__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}

.tnote__item-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .4rem;
}

.tnote__empty-art {
  width: 4.5rem;
}

@media (max-width: 1199px) {
  .tclass__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tclass__side {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }

  .tnote,
  .tset-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 860px) {
  .teach-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tclass__side {
    grid-template-columns: minmax(0, 1fr);
  }
}

.event-band {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  border: 3px solid #FF5A5F;
}

.event-band--paused {
  border-color: var(--warn);
}

.event-band--scheduled {
  border-color: var(--primary);
}

.event-band--none {
  border: 2px dashed var(--line);
}

.event-band__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem;
}

/* One-tap events on the class overview */
.quick-start {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding-top: .9rem;
  border-top: 2px dashed var(--line);
}

.quick-start__label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.quick-start__label .icon {
  width: 1rem;
  height: 1rem;
  color: var(--warn);
}

.quick-start__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: .7rem;
}

.quick-start__btn {
  --q: var(--primary);
  --q-soft: var(--primary-soft);
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  padding: .7rem .9rem;
  border-radius: 18px;
  border: 2px solid var(--line);
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform .15s var(--spring), border-color .15s ease, background .15s ease;
}

.quick-start__btn--race {
  --q: var(--bad);
  --q-soft: var(--bad-soft);
}

.quick-start__btn--practice {
  --q: var(--purple);
  --q-soft: var(--purple-soft);
}

.quick-start__btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--edge);
}

.quick-start__btn.is-armed {
  border-color: var(--q);
  background: var(--q-soft);
  animation: m-shake .45s ease-in-out;
}

.quick-start__btn:disabled {
  opacity: .6;
  cursor: progress;
}

.quick-start__art {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
}

.quick-start__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.quick-start__text strong {
  font-size: 1.05rem;
  font-weight: 900;
}

.quick-start__text span {
  font-size: .82rem;
  font-weight: 800;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.quick-start__btn.is-armed .quick-start__text span {
  color: var(--q);
}

.quick-start__hint {
  margin: 0;
}

@media (hover: hover) and (pointer: fine) {
  .quick-start__btn:hover {
    border-color: var(--q);
    transform: translateY(-2px);
  }
}

.event-band__art {
  width: 3.4rem;
  height: 3.4rem;
}

.event-band__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
}

.event-band__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.event-band__title {
  font-size: 1.2rem;
  margin-right: auto;
}

.event-band__label {
  color: var(--muted);
  font-weight: 800;
}

.event-band__clock {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-weight: 800;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.event-band .release-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: .6rem;
}

.event-band .release-actions .btn {
  width: 100%;
  min-height: 3rem;
  justify-content: center;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .event-band .release-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-band .release-actions> :first-child,
  .event-band .release-actions>.btn--warn {
    grid-column: 1 / -1;
  }

  .event-band .release-actions>.btn--warn {
    order: 9;
  }
}

.presence {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 800;
  font-size: .85rem;
  color: var(--muted);
}

.presence__dot {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: var(--edge);
}

.presence.is-online {
  color: var(--good-edge, #1E8F4A);
}

.presence.is-online .presence__dot,
.student-card.is-online .presence__dot {
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(52, 194, 106, .25);
}

.student-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: .7rem;
}

.student-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .9rem .6rem;
  border-radius: 20px;
  border: 2px solid var(--line);
  background: var(--surface);
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform .2s var(--spring), opacity .2s ease;
}

/* Offline students: only the picture fades, so names and numbers stay readable. */
.student-card:not(.is-online) .avatar {
  opacity: .6;
  filter: grayscale(.6);
}

.student-card.is-online {
  opacity: 1;
  border-color: var(--good);
}

.student-card.is-playing {
  background: linear-gradient(180deg, #FFF1E6, var(--surface) 70%);
}

:root[data-theme="dark"] .student-card.is-playing {
  background: linear-gradient(180deg, #3D2A1A, var(--surface) 70%);
}

.student-card:active {
  transform: translateY(3px);
  box-shadow: none;
}

.student-card__top {
  position: relative;
}

.student-card__top .presence__dot {
  position: absolute;
  right: 0;
  bottom: .1rem;
  border: 2px solid var(--surface);
  width: .85rem;
  height: .85rem;
}

.student-card__name {
  font-weight: 900;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.student-card__event {
  font-size: .85rem;
  color: #D97706;
  font-weight: 800;
}

.student-card__weak {
  font-size: .72rem;
  font-weight: 800;
  color: var(--bad);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.student-pop {
  width: min(100%, 28rem);
}

.notice-list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.notice-list li {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  padding: .5rem .7rem;
  border-radius: 14px;
  background: var(--surface-2);
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {

  .student-card:hover,
  .pick-card:hover {
    transform: translateY(-3px);
  }
}

/* Board projection of an event's live board */
.projector--board {
  justify-content: flex-start;
  padding-top: 3rem;
  background: radial-gradient(circle at 50% 30%, #FF7A59, #9B1C2E 75%);
}

.projector__timer {
  font-family: 'Noto Sans Mono', ui-monospace, monospace;
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.projector__board {
  width: min(96vw, 60rem);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.projector__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .7rem 1.2rem;
  border-radius: 22px;
  background: rgba(255, 255, 255, .14);
  font-size: clamp(1.1rem, 2.4vw, 1.8rem);
  font-weight: 900;
  animation: m-pop .4s var(--spring);
}

.projector__row--1 {
  background: rgba(255, 201, 60, .9);
  color: #4A2E00;
}

.projector__row--2 {
  background: rgba(225, 231, 242, .9);
  color: #1E2A47;
}

.projector__row--3 {
  background: rgba(255, 159, 28, .85);
  color: #3B1D00;
}

.projector__rank {
  width: 2.2em;
  text-align: center;
}

.projector__who {
  flex: 1;
  text-align: left;
}

.projector__score {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {

  .event-status__dot,
  .event-cta,
  .event-pop__burst,
  .event-pop__art,
  .event-hero::after {
    animation: none;
  }
}

/* Teacher panel on the home page */
.teach-home {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius);
  border: 2px solid var(--line);
  background: linear-gradient(135deg, var(--primary-soft), var(--purple-soft));
  box-shadow: 0 5px 0 var(--edge);
}

.teach-home__head {
  display: flex;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
}

.teach-home__icon {
  display: grid;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 15px;
  background: var(--purple);
  color: #fff;
  box-shadow: 0 3px 0 var(--purple-edge);
}

.teach-home__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.teach-home__title {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 10rem;
}

.teach-home__title .h3 {
  margin: 0;
}

.teach-home__classes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: .6rem;
}

.teach-home__class {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 0;
  padding: .7rem .85rem;
  border-radius: 16px;
  border: 2px solid var(--line);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 3px 0 var(--edge);
  transition: transform .15s var(--spring), border-color .15s ease;
}

.teach-home__class.has-event--live {
  border-color: var(--bad);
}

.teach-home__class:active {
  transform: translateY(2px);
  box-shadow: none;
}

.teach-home__name {
  font-size: 1.1rem;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.teach-home__meta {
  display: flex;
  align-items: center;
  gap: .3rem;
  flex-wrap: wrap;
  font-size: .8rem;
  font-weight: 800;
  color: var(--muted);
}

.teach-home__meta .icon {
  width: .95rem;
  height: .95rem;
}

.teach-home__online {
  color: var(--good-ink);
}

.teach-home__event {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  align-self: flex-start;
  padding: .1rem .55rem;
  border-radius: 999px;
  background: var(--bad-soft);
  color: var(--bad-ink);
  font-size: .78rem;
  font-weight: 900;
}

.has-event--scheduled .teach-home__event,
.has-event--paused .teach-home__event {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

.teach-home__class--all {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  color: var(--primary);
  font-weight: 900;
}

@media (hover: hover) and (pointer: fine) {
  .teach-home__class:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
  }
}

/* Teacher: step flows (announcement, new class), first-steps guide, how-it-works list */
.step-flow {
  gap: 1.1rem;
}

.step-flow__title {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}

.step-flow__head {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.step-flow__head>.muted {
  margin: 0;
}

.step-flow__body {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  min-width: 0;
}

.step-flow__panel {
  min-height: 12rem;
}

.step-flow__icon {
  display: inline-flex;
}

.step-flow .wizard__num .icon {
  width: 1rem;
  height: 1rem;
}

.step-flow .wizard__step.is-done .wizard__dot,
.step-flow .wizard__step.is-active .wizard__dot {
  cursor: pointer;
}

.step-flow .chip-list>button.chip {
  min-height: 2.6rem;
  padding: .4rem 1rem;
  border: 2px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--edge);
}

.step-flow .chip-list>button.chip:active {
  transform: translateY(2px);
  box-shadow: none;
}

.step-flow .wizard-sum__row {
  min-height: 2.8rem;
}

.input.input--lg {
  min-height: 3.4rem;
  font-size: 1.25rem;
  font-weight: 800;
}

.tclasses__flow {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  box-sizing: border-box;
}

.tclasses__flow .tclass-code {
  margin: 0;
}

.next-card {
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
}

.next-card__art {
  width: 3rem;
  height: 3rem;
}

.how-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .6rem;
  align-self: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.how-steps__item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .65rem .8rem;
  border-radius: 16px;
  background: var(--surface);
  border: 2px solid var(--line);
  font-weight: 800;
  min-width: 0;
  overflow-wrap: break-word;
}

.how-steps__item>span:last-child {
  flex: 1;
  min-width: 0;
}

.how-steps__item>.icon {
  flex: none;
  color: var(--primary);
}

.how-steps__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 900;
}

.how-steps--small {
  grid-template-columns: minmax(0, 1fr);
}

/* Empty class list: the steps as one vertical path joined by a line */
.tclasses__empty {
  gap: .9rem;
}

.tclasses__empty .how-steps {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: .55rem;
  margin: .3rem 0 .4rem;
}

.tclasses__empty .how-steps::before {
  content: "";
  position: absolute;
  left: 1.7rem;
  top: 1.4rem;
  bottom: 1.4rem;
  width: 3px;
  border-radius: 3px;
  background: var(--line);
}

.tclasses__empty .how-steps__item {
  position: relative;
  gap: .75rem;
  padding: .75rem .9rem;
  background: var(--surface-2);
  line-height: 1.35;
}

.tclasses__empty .how-steps__item>.icon {
  width: 1.3rem;
  height: 1.3rem;
}

.how-steps--small .how-steps__item {
  background: var(--surface-2);
  border-color: transparent;
}

.guide {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  border: 2px solid var(--primary-soft);
}

.guide__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

.guide__list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.guide__step {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .7rem;
  border-radius: 16px;
  color: var(--muted);
  font-weight: 800;
  flex-wrap: wrap;
}

.guide__step.is-done {
  color: var(--ink);
}

.guide__step.is-done .guide__text strong {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--good);
}

.guide__step.is-current {
  background: var(--primary-soft);
  color: var(--ink);
}

.guide__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--surface-2);
  font-weight: 900;
}

.guide__num .icon {
  width: 1rem;
  height: 1rem;
}

.guide__step.is-done .guide__num {
  background: var(--good);
  color: #fff;
}

.guide__step.is-current .guide__num {
  background: var(--primary);
  color: #fff;
  animation: m-rise .4s var(--spring);
}

.guide__text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  flex: 1 1 12rem;
  min-width: 0;
}

.guide__action {
  flex: none;
  margin-left: auto;
}

/* Class page tabs: one fixed bar on every layout (same look as the Settings tabs), so the views keep their
   places and the open one is marked. mobile.css stacks icon over label on phones. */
.tclass-tabs {
  display: flex;
  gap: .3rem;
  padding: .3rem .3rem calc(.3rem + 3px);
  border-radius: 999px;
  background: var(--surface-3);
}

.tclass-tabs__tab {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .5rem .8rem;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 900;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}

.tclass-tabs__tab .icon {
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
}

.tclass-tabs__tab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tclass-tabs__tab:hover {
  color: var(--ink);
}

.tclass-tabs__tab.is-active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 3px 0 var(--edge);
}

/* The tab bar replaces the old row of shortcut buttons in the class header. */
.tclass-head__actions {
  display: none;
}

/* Mission (görev) events: the teacher's task picker and the student's task list */
.task-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: .7rem;
}

.task-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .75rem;
  border: 3px solid var(--line);
  border-radius: 20px;
  background: var(--surface-2);
  box-shadow: 0 4px 0 var(--edge);
  transition: border-color .2s ease, background-color .2s ease;
}

.task-card.is-active {
  border-color: var(--good);
  background: var(--good-soft);
}

.task-card__main {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.task-card__art {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
}

.task-card__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: .1rem;
}

.task-card__title {
  font-weight: 900;
  font-size: 1.02rem;
  line-height: 1.25;
}

.task-card__check {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 3px solid var(--line);
  color: transparent;
  background: var(--surface);
  transition: transform .25s var(--spring), background-color .2s ease;
}

.task-card.is-active .task-card__check {
  border-color: var(--good);
  background: var(--good);
  color: #fff;
  transform: scale(1.08);
}

.task-card__check .icon {
  width: 1.1rem;
  height: 1.1rem;
}

.task-card__stepper {
  align-self: stretch;
  justify-content: space-between;
}

.task-card:not(.is-active) .task-card__stepper {
  opacity: .55;
}

.event-tasks__list {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.event-task {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .75rem;
  row-gap: .35rem;
  padding: .7rem .85rem;
  border: 2px solid var(--line);
  border-radius: 18px;
  background: var(--surface-2);
}

.event-task__art {
  grid-row: 1 / span 2;
  width: 2.5rem;
  height: 2.5rem;
}

.event-task__title {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-weight: 900;
  line-height: 1.25;
}

.event-task__title .icon {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  color: var(--good);
}

.event-task__note {
  grid-column: 2 / span 2;
}

.event-task__value {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

.event-task__track {
  grid-column: 2 / span 2;
  height: .65rem;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.event-task__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #22C55E, #0EA5A4);
  transition: width .6s var(--spring);
}

.event-task.is-done {
  border-color: var(--good);
  background: var(--good-soft);
}

.event-task.is-done .event-task__value {
  color: var(--good-ink, var(--good));
}

.event-task.is-new {
  animation: m-stamp .55s cubic-bezier(.3, 1.4, .5, 1);
}

.event-tasks__all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 0;
  padding: .6rem;
  border-radius: 16px;
  background: var(--good-soft);
  color: var(--good-ink, var(--good));
  font-weight: 900;
}

@media (max-width: 720px) {
  .task-pick {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .event-task.is-new {
    animation: none;
  }

  .event-task__fill {
    transition: none;
  }
}


/* Cosmetic page background (js/background.js): fixed behind all content, layers move by transform/opacity only.
   Delays are used as negative offsets so every layer starts mid-motion instead of jumping. */
.bg-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.bg-scene:not(.is-on) {
  display: none;
}

/* Sized by the large viewport, not inset: 0, so the scene keeps its size while a phone's address bar slides in
   and out; otherwise every layer is re-laid out (and jumps) on each scroll. */
.bg-scene {
  bottom: auto;
  height: 100vh;
  height: 100lvh;
  contain: strict;
  transform: translateZ(0);
}

/* While the page scrolls the layers hold still: less work per frame, so scrolling stays smooth on phones. */
.bg-scene.is-scrolling .bg-scene__layer {
  animation-play-state: paused;
}

/* A light veil keeps text that sits straight on the page readable. */
.bg-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  opacity: .28;
}

.bg-scene__layer {
  position: absolute;
  inset: 0;
  animation-duration: var(--dur, 30s);
  animation-delay: calc(var(--delay, 0s) * -1);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: var(--dir, alternate);
  will-change: transform;
}

.bg-scene__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

.bg-scene__layer--drift {
  inset: 0 calc(var(--amt) * -1px);
  animation-name: bg-drift;
}

.bg-scene__layer--float {
  inset: calc(var(--amt) * -1px) 0;
  animation-name: bg-float;
}

.bg-scene__layer--rotate {
  inset: -25%;
  animation-name: bg-rotate;
}

.bg-scene__layer--pulse {
  animation-name: bg-pulse;
}

.bg-scene__layer--twinkle {
  animation-name: bg-twinkle;
  will-change: opacity;
}

@keyframes bg-drift {
  from {
    transform: translateX(calc(var(--amt) * -1px));
  }

  to {
    transform: translateX(calc(var(--amt) * 1px));
  }
}

@keyframes bg-float {
  from {
    transform: translateY(calc(var(--amt) * -1px));
  }

  to {
    transform: translateY(calc(var(--amt) * 1px));
  }
}

@keyframes bg-rotate {
  from {
    transform: rotate(calc(var(--amt) * -1deg));
  }

  to {
    transform: rotate(calc(var(--amt) * 1deg));
  }
}

@keyframes bg-pulse {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(calc(1 + var(--amt) / 100));
  }
}

@keyframes bg-twinkle {
  from {
    opacity: 1;
  }

  to {
    opacity: calc(var(--amt) / 100);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-scene__layer {
    animation: none;
  }
}

/* Background picks preview as a screen (16:9) instead of a cover strip. */
.banner-tile--bg,
.cosmetic-modal__art--bg,
.store-item--background .store-item__banner {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
}

.store-item--background .store-item__preview {
  padding: .6rem;
}

/* Sticky bars painted with the page colour would cut a flat strip through the scene. */
.has-bg-scene .page-question .q-top,
.has-bg-scene .settings-tabs,
body.has-bg-scene.page-question .q-top {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* "No background": the plain page itself. */
.banner-tile--bg-none {
  display: grid;
  place-items: center;
  background: var(--bg);
  border-style: dashed;
  border-color: var(--line-strong);
  color: var(--muted);
  font-weight: 900;
  font-size: .85rem;
}

/* Background themes (manifest "theme"): panels over the scene. Surfaces become see-through colours, so every
   component follows; only top-level panels blur what is behind them (nested blur is costly and invisible). */
body[class*="bg-theme-"] {
  --pane: 255, 255, 255;
  --pane-2: 238, 242, 250;
  --pane-3: 225, 231, 242;
}

:root[data-theme="dark"] body[class*="bg-theme-"] {
  --pane: 29, 39, 66;
  --pane-2: 37, 49, 82;
  --pane-3: 46, 59, 96;
}

.bg-theme-glass {
  --surface: rgba(var(--pane), .52);
  --surface-2: rgba(var(--pane-2), .5);
  --surface-3: rgba(var(--pane-3), .58);
  --line: rgba(255, 255, 255, .16);
  --veil: .08;
  --pane-blur: blur(18px) saturate(1.4);
}

.bg-theme-soft {
  --surface: rgba(var(--pane), .8);
  --surface-2: rgba(var(--pane-2), .76);
  --surface-3: rgba(var(--pane-3), .82);
  --veil: .18;
}

.bg-theme-neon {
  --surface: rgba(var(--pane), .62);
  --surface-2: rgba(var(--pane-2), .55);
  --surface-3: rgba(var(--pane-3), .62);
  --line: color-mix(in srgb, var(--primary) 55%, transparent);
  --veil: .12;
  --pane-blur: blur(12px);
}

:root[data-theme="dark"] body.bg-theme-neon {
  --pane: 10, 14, 32;
  --pane-2: 18, 24, 50;
  --pane-3: 26, 34, 66;
}

.bg-scene::after {
  opacity: var(--veil, .28);
}

:is(.bg-theme-glass, .bg-theme-neon) :is(.card, .site-header, .dash-sidebar, .under-menu, .profile-hero, .store-item, .tclass-card, .kpi, .modal__card) {
  -webkit-backdrop-filter: var(--pane-blur);
  backdrop-filter: var(--pane-blur);
}

.bg-theme-glass :is(.card, .profile-hero, .store-item, .tclass-card, .kpi, .modal__card) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 8px 24px rgba(0, 0, 0, .12);
}

.bg-theme-neon :is(.card, .profile-hero, .store-item, .tclass-card, .kpi, .modal__card) {
  border: 1.5px solid color-mix(in srgb, var(--primary) 60%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--primary) 30%, transparent), inset 0 0 12px color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Touch screens: blurring a moving scene behind every card on each scroll frame makes phones stutter and the
   scene flicker (iOS Safari). Cards there get a more solid colour instead; only the header and bottom bar blur. */
@media (hover: none) and (pointer: coarse) {
  :is(.bg-theme-glass, .bg-theme-neon) :is(.card, .profile-hero, .store-item, .tclass-card, .kpi, .modal__card) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .bg-theme-glass {
    --surface: rgba(var(--pane), .8);
    --surface-2: rgba(var(--pane-2), .78);
    --surface-3: rgba(var(--pane-3), .84);
  }

  .bg-theme-neon {
    --surface: rgba(var(--pane), .84);
    --surface-2: rgba(var(--pane-2), .8);
    --surface-3: rgba(var(--pane-3), .86);
  }

  body[class*="bg-theme-"] :is(.site-header, .under-menu) {
    background: rgba(var(--pane), .9);
  }
}

/* Endless loops (js/background.js stacks two copies): one copy's length per cycle, steady speed. */
.bg-scene__layer--fall,
.bg-scene__layer--rise,
.bg-scene__layer--scroll {
  display: flex;
  animation-timing-function: linear;
}

.bg-scene__layer--fall,
.bg-scene__layer--rise {
  flex-direction: column;
  inset: -100% 0 0;
}

.bg-scene__layer--scroll {
  inset: 0 -100% 0 0;
}

:is(.bg-scene__layer--fall, .bg-scene__layer--rise, .bg-scene__layer--scroll) .bg-scene__img {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
}

.bg-scene__layer--fall {
  animation-name: bg-fall;
}

.bg-scene__layer--rise {
  animation-name: bg-rise;
}

.bg-scene__layer--scroll {
  animation-name: bg-scroll;
}

@keyframes bg-fall {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(50%);
  }
}

@keyframes bg-rise {
  from {
    transform: translateY(50%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes bg-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* A bright scene under the dark UI (or a dark one under the light UI) would swallow text that sits straight on
   the page; the veil, in the page colour, grows until it reads. */
:root[data-theme="dark"] body.bg-tone-light,
:root:not([data-theme="dark"]) body.bg-tone-dark {
  --veil: .58;
}

/* Edge strips (animations.json "anchor"): sized by the screen height and pinned to an edge of the page area,
   so what they hold stays in the margins beside the content at any width. --bg-left skips the sidebar. */
.bg-scene__layer.is-anchor-right .bg-scene__img,
.bg-scene__layer.is-anchor-left .bg-scene__img {
  position: absolute;
  top: 0;
  width: auto;
  height: 100%;
  object-fit: contain;
}

.bg-scene__layer.is-anchor-right .bg-scene__img {
  right: 0;
}

.bg-scene__layer.is-anchor-left .bg-scene__img {
  left: var(--bg-left, 0px);
}

/* Pulsing or turning strips grow from their own edge instead of the screen centre. */
.bg-scene__layer.is-anchor-right {
  transform-origin: 100% 50%;
}

.bg-scene__layer.is-anchor-left {
  transform-origin: var(--bg-left, 0px) 50%;
}

/* Swaying edge strips keep their edge: the room a sway layer normally gets on both sides would push them off-screen. */
.bg-scene__layer.is-anchor-right:is(.bg-scene__layer--drift, .bg-scene__layer--float),
.bg-scene__layer.is-anchor-left:is(.bg-scene__layer--drift, .bg-scene__layer--float) {
  inset: 0;
}

/* ---------- Rarity: one colour per tier, shared by store cards, editor tiles, popups and the chest ---------- */
.rarity--common {
  --rarity: #94A3B8;
  --rarity-soft: rgba(148, 163, 184, .18);
}

.rarity--uncommon {
  --rarity: #22C55E;
  --rarity-soft: rgba(34, 197, 94, .16);
}

.rarity--rare {
  --rarity: #3B82F6;
  --rarity-soft: rgba(59, 130, 246, .16);
}

.rarity--epic {
  --rarity: #A855F7;
  --rarity-soft: rgba(168, 85, 247, .18);
}

.rarity--legendary {
  --rarity: #F59E0B;
  --rarity-soft: rgba(245, 158, 11, .2);
}

.rarity-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: .12rem .55rem;
  border-radius: 999px;
  background: var(--rarity-soft, var(--surface-2));
  color: var(--rarity, var(--muted));
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.store-item[class*="rarity--"],
.store-set[class*="rarity--"] {
  border-color: color-mix(in srgb, var(--rarity) 55%, var(--line));
}

.store-item[class*="rarity--"] .store-item__preview {
  background: radial-gradient(circle at 50% 40%, var(--rarity-soft), var(--surface-2) 72%);
}

.rarity--legendary.store-item,
.rarity--legendary.store-set {
  box-shadow: 0 5px 0 var(--edge), 0 0 18px rgba(245, 158, 11, .25);
}

.store-try {
  position: absolute;
  top: .5rem;
  right: .5rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .2s var(--spring), background .15s ease;
}

.store-try[hidden] {
  display: none;
}

.store-try:hover {
  background: rgba(0, 0, 0, .55);
  transform: scale(1.1);
}

.store-try:active {
  transform: scale(.94);
}

.store-try .icon {
  width: 1.15rem;
  height: 1.15rem;
}

/* Sets: a category of store items sold together */
.store-sets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}

.store-set {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.1rem;
  border-radius: 24px;
  background: var(--surface);
  border: 2px solid var(--line);
  box-shadow: 0 5px 0 var(--edge);
  transition: transform .2s var(--spring);
}

@media (hover: hover) and (pointer: fine) {
  .store-set:hover {
    transform: translateY(-3px);
  }
}

.store-set__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .6rem;
}

.store-set__head .store-item__name {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.store-set__head .badge {
  white-space: nowrap;
}

.store-set__items {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem .8rem;
  min-height: 8.5rem;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 40%, var(--rarity-soft, var(--purple-soft)), var(--surface-2) 72%);
}

.store-set__thumb {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
}

.store-set__thumb .avatar--lg {
  width: 3.6rem;
  height: 3.6rem;
}

.store-set__items--banner .store-set__thumb,
.store-set__items--background .store-set__thumb {
  width: calc(50% - .3rem);
  height: auto;
}

.store-set__thumb .store-item__banner {
  width: 100%;
  border-radius: 10px;
}

.store-set__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
  padding-top: .8rem;
  border-top: 2px dashed var(--line);
}

.store-set__foot .store-buy {
  margin-left: auto;
}

.store-set.is-armed .store-buy {
  --btn-bg: var(--good);
  --btn-line: var(--good);
  --btn-edge: var(--good-edge);
  --btn-ink: #fff;
}

.store-set.is-poor {
  animation: m-shake .45s ease-in-out;
}

/* Try-on: countdown chip while a background previews, profile card for the rest */
.store-trial {
  position: fixed;
  left: 50%;
  bottom: calc(var(--under-h, 0px) + 1.2rem);
  z-index: 70;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .6rem .5rem 1rem;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--float), 0 4px 0 var(--edge);
  font-weight: 900;
  animation: m-pop .4s var(--spring);
}

.store-trial .icon {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--primary);
}

.store-try-card {
  position: relative;
  width: min(100%, 24rem);
  padding: 0 0 1.2rem;
  gap: .6rem;
  overflow: hidden;
  text-align: center;
}

.store-try-card__cover {
  height: 7.5rem;
  background: center / cover no-repeat, linear-gradient(120deg, #FF9F1C, #FF5A5F 45%, #8B5CF6);
}

.store-try-card__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  margin-top: -3.4rem;
}

.store-try-card__body .avatar {
  box-shadow: 0 0 0 5px var(--surface);
}

.store-try-card .class-pop__close {
  z-index: 2;
  background: rgba(0, 0, 0, .25);
  color: #fff;
}

/* Editor tiles carry their rarity on the border; the chosen one keeps the primary ring. */
.look-tile[class*="rarity--"]:not(.is-active),
.banner-tile[class*="rarity--"]:not(.is-active):not(.banner-tile--bg-none) {
  border-color: color-mix(in srgb, var(--rarity) 60%, transparent);
}

.ach-modal .rarity-tag {
  align-self: center;
}

/* Chest card: no question mark on the dark card, the tier colour does the talking; the rarity tag sits above the name. */
.rw-disc.is-mystery .rw-disc__back::after {
  content: none;
}

.rw-disc.is-mystery .rw-disc__back {
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tint) 35%, #1A2036), #05070F 72%);
  transition: box-shadow .3s ease, background .3s ease;
}

.rw-disc__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}

.rw-disc__label .rarity-tag {
  align-self: center;
  font-size: .8rem;
}

/* Streak freeze: icy calendar days, the count beside the flame, and its store card */
.streak-day.is-frozen .streak-day__dot {
  background: #DDF4FF;
  box-shadow: inset 0 0 0 2px #7FD3F7;
}

:root[data-theme="dark"] .streak-day.is-frozen .streak-day__dot {
  background: #163449;
}

.streak-card {
  position: relative;
}

/* The freeze count sits in the corner, out of the way of the title on narrow cards. */
.streak-freezes {
  position: absolute;
  top: .7rem;
  right: .7rem;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .6rem .25rem .35rem;
  border-radius: 999px;
  background: #DDF4FF;
  color: #1C6E9E;
  font-weight: 900;
  text-decoration: none;
}

:root[data-theme="dark"] .streak-freezes {
  background: #163449;
  color: #9BDCFA;
}

.streak-freezes.is-empty {
  opacity: .55;
}

.streak-freezes__art {
  width: 1.5rem;
  height: 1.5rem;
}

.store-freeze {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.store-freeze__art {
  width: 3.6rem;
  height: 3.6rem;
  flex: none;
}

.store-freeze__text {
  flex: 1;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.store-freeze__text .badge {
  align-self: flex-start;
}

/* Phones: the buy button takes the full row under the text instead of sitting alone on the left. */
@media (max-width: 720px) {
  .store-freeze {
    gap: .8rem;
  }

  .store-freeze__art {
    width: 2.8rem;
    height: 2.8rem;
    align-self: flex-start;
  }

  .store-freeze__text {
    min-width: 0;
  }

  .store-freeze .store-buy {
    flex: 1 1 100%;
  }
}

/* ---------- Quick tiles on the home page: mistake notebook and duels (two per row, even on phones) ---------- */
.quick-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}

.quick-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 5rem;
  padding: .9rem 1rem;
  border-radius: 22px;
  border: 2px solid var(--line);
  background: var(--surface);
  box-shadow: 0 4px 0 var(--edge);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s var(--spring);
}

.quick-tile:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--edge);
}

.quick-tile.is-calm {
  cursor: default;
  opacity: .8;
}

.quick-tile.is-calm:active {
  transform: none;
  box-shadow: 0 4px 0 var(--edge);
}

.quick-tile__art {
  width: 3.2rem;
  height: 3.2rem;
  flex: none;
}

.quick-tile__text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.quick-tile__title {
  font-size: 1.05rem;
  font-weight: 900;
}

.quick-tile__lead {
  color: var(--muted);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.25;
}

.quick-tile__count {
  position: absolute;
  top: -.45rem;
  right: -.35rem;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 .4rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--bad);
  color: #fff;
  font-size: .85rem;
  font-weight: 900;
  box-shadow: 0 2px 0 var(--bad-edge, #B42318);
}

.quick-tile--notebook {
  border-color: color-mix(in srgb, #E5484D 35%, var(--line));
}

.quick-tile--duel {
  border-color: color-mix(in srgb, var(--purple) 40%, var(--line));
}

@media (max-width: 520px) {
  .quick-tiles {
    gap: .55rem;
  }

  .quick-tile {
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
    padding: .8rem;
  }

  .quick-tile__art {
    width: 2.6rem;
    height: 2.6rem;
  }
}

/* ---------- Duel sheet: a popup on wide screens, a bottom sheet on phones ---------- */
.duel-sheet {
  position: relative;
  width: min(100%, 30rem);
  gap: 1rem;
}

.duel-sheet__head {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-right: 2.5rem;
}

.duel-sheet__art {
  width: 3.4rem;
  height: 3.4rem;
  flex: none;
}

.duel-sheet__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.duel-sheet__title {
  margin: 0 0 .45rem;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.duel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.duel-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 3.6rem;
  padding: .5rem .6rem;
  border-radius: 16px;
  background: var(--surface-2);
}

.duel-row__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.duel-row__text strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duel-row__actions {
  display: flex;
  gap: .35rem;
  flex: none;
}

.duel-row__actions .btn {
  min-height: 2.6rem;
}

.duel-row.is-invite {
  background: var(--purple-soft);
}

.duel-row.is-online .avatar {
  box-shadow: 0 0 0 3px var(--good);
}

.duel-row.is-win .duel-row__text .muted {
  color: var(--good-ink, var(--good));
  font-weight: 800;
}

.duel-row.is-loss .duel-row__text .muted {
  color: var(--bad-ink, var(--bad));
  font-weight: 800;
}

@media (max-width: 720px) {
  .duel-modal {
    place-items: end stretch;
    padding: 0;
  }

  .duel-sheet {
    width: 100%;
    max-height: 88dvh;
    border-radius: 28px 28px 0 0;
    padding-bottom: calc(1.3rem + env(safe-area-inset-bottom));
    animation: duel-up .35s var(--spring);
  }
}

@keyframes duel-up {
  from {
    transform: translateY(100%);
  }
}

/* ---------- Round ends: duel face-off and the notebook result ---------- */
.duel-done {
  gap: 1rem;
}

.duel-done__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.duel-done__side {
  flex: 1;
  max-width: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .8rem .5rem;
  border-radius: 20px;
  background: var(--surface-2);
}

.duel-done__side.is-win {
  background: var(--good-soft);
  box-shadow: inset 0 0 0 2px var(--good);
}

.duel-done__side strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duel-done__score {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
}

.duel-done__x {
  font-weight: 900;
  color: var(--muted);
}

.notebook-done__art {
  width: 5rem;
  height: 5rem;
}

@media (max-width: 520px) {
  .duel-done__vs {
    gap: .5rem;
  }

  .duel-done__side .avatar--lg {
    width: 4rem;
    height: 4rem;
  }

  .result-actions .btn {
    flex: 1;
  }
}

/* Teacher: a student's last four weeks */
.growth {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.growth__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  align-items: end;
}

.growth__col {
  --g: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}

.growth__col--good {
  --g: var(--good);
}

.growth__col--warn {
  --g: var(--warn);
}

.growth__col--bad {
  --g: var(--bad);
}

.growth__acc {
  font-weight: 900;
  font-size: .95rem;
  color: var(--g);
}

.growth__track {
  position: relative;
  width: 70%;
  max-width: 3rem;
  height: 6rem;
  border-radius: 12px;
  background: var(--surface-2);
  overflow: hidden;
}

.growth__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  background: var(--g);
  transition: height .5s var(--spring);
}

.growth__n {
  font-weight: 800;
  font-size: .8rem;
}

.growth__label {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
}

.growth__trend {
  margin: 0;
  font-weight: 800;
  font-size: .85rem;
}

.growth__trend--up {
  color: var(--good-ink, var(--good));
}

.growth__trend--down {
  color: var(--bad-ink, var(--bad));
}

/* ---------- Performance graphics level (Settings): no long animations, a still background, no blur ---------- */
[data-motion="reduce"] *,
[data-motion="reduce"] *::before,
[data-motion="reduce"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}

[data-motion="reduce"] .bg-scene__layer {
  animation: none !important;
  will-change: auto;
}

[data-motion="reduce"] * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Without blur, see-through panels would let the scene show through the text: keep them nearly solid. */
[data-motion="reduce"] body[class*="bg-theme-"] {
  --surface: rgba(var(--pane), .94);
  --surface-2: rgba(var(--pane-2), .94);
  --surface-3: rgba(var(--pane-3), .96);
}

.big-toggle--power {
  --t-on: var(--good);
  --t-on-edge: var(--good-edge);
}

.big-toggle--power .big-toggle__knob {
  color: var(--primary);
}

.big-toggle--power[aria-checked="true"] .big-toggle__knob {
  color: var(--good);
}

.streak-card:has(.streak-freezes) .streak-card__head {
  padding-right: 3.2rem;
}

/* One tile alone takes the whole row. */
.quick-tiles> :only-child {
  grid-column: 1 / -1;
}

/* A narrow streak card (two cards side by side on a small column): stack the flame over the text. */
.streak-card {
  container-type: inline-size;
}

@container (max-width: 17rem) {
  .streak-card .streak-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    padding-right: 0;
  }

  .streak-card .streak-card__head .h2 {
    font-size: 1.15rem;
    padding-right: 3rem;
  }
}

/* Store tabs stay on one line; on a narrow screen the row scrolls sideways instead of wrapping. */
.store-tabs {
  overflow-x: auto;
  scrollbar-width: none;
}

.store-tabs .pill-tabs__tab {
  white-space: nowrap;
  flex: 1 0 auto;
}

/* Popups sit over other cards: in see-through themes they stay nearly solid so nothing behind shows through. */
:is(.bg-theme-glass, .bg-theme-soft, .bg-theme-neon) .modal__card {
  background: rgba(var(--pane), .95);
}

/* Duel invite and waiting cards: centred, one big answer button per row. */
.duel-wait,
.duel-invite {
  align-items: center;
  text-align: center;
}

.duel-wait .h2,
.duel-invite .h2 {
  margin: 0;
}

.duel-wait p,
.duel-invite p {
  margin: 0;
}

.duel-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  max-width: 9rem;
}

.duel-face strong {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.duel-wait__faces {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.duel-wait__faces .duel-face:last-child .avatar {
  animation: duel-pulse 1.6s ease-in-out infinite;
}

.duel-wait__dots {
  display: flex;
  gap: .4rem;
}

.duel-wait__dots span {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--purple, var(--primary));
  animation: duel-dot 1.2s ease-in-out infinite;
}

.duel-wait__dots span:nth-child(2) {
  animation-delay: .2s;
}

.duel-wait__dots span:nth-child(3) {
  animation-delay: .4s;
}

.duel-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--muted);
}

.duel-invite__art {
  width: 4.5rem;
  height: 4.5rem;
  animation: duel-wiggle 1.4s ease-in-out infinite;
}

.duel-invite__actions {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: 100%;
}

@keyframes duel-pulse {
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 6px var(--purple-soft, rgba(140, 90, 255, .25));
  }
}

@keyframes duel-dot {

  0%,
  100% {
    opacity: .3;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-4px);
  }
}

@keyframes duel-wiggle {

  0%,
  100% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(-8deg);
  }

  75% {
    transform: rotate(8deg);
  }
}

/* Round top bar: a floating rounded card like the settings tabs, with a chunky glossy progress track. */
.page-question .q-top {
  top: .5rem;
  margin: .1rem 0 .3rem;
  padding: .45rem .55rem .45rem .45rem;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 4px 0 var(--edge), 0 12px 28px rgba(0, 0, 0, .12);
}

.has-bg-scene .page-question .q-top,
body.has-bg-scene.page-question .q-top {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.page-question .q-top .btn--ghost.btn--icon {
  border-radius: 16px;
}

.page-question .q-top .progress {
  height: 16px;
  padding: 3px;
  background: var(--surface-3);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .18);
}

.page-question .q-top .progress__bar {
  border-radius: 999px;
  box-shadow: inset 0 -3px 0 var(--good-edge, rgba(0, 0, 0, .15));
}

.page-question .q-top .progress__bar::before {
  left: 6px;
  right: 6px;
  top: 2px;
  height: 3px;
}

/* Store "worn" / "full" buttons look off but still take a press, so they answer with a click and a wiggle. */
.store .btn[aria-disabled="true"] {
  pointer-events: auto;
  cursor: default;
}

/* Tab bars that do not fit (tabscroll.js): a tighter size first, then a sideways scroll with round arrow pieces
   that split off the bar's ends. The bar and pieces are see-through; their shapes are drawn once more underneath in
   .tabs-goo, where a blur + contrast filter melts touching shapes together, so a piece pulls away with a neck that
   stretches and snaps, never a square corner. */
.pill-tabs {
  max-width: 100%;
  min-width: 0;
}

.pill-tabs.is-tight .pill-tabs__tab {
  padding: .4rem .7rem;
  font-size: .82rem;
  white-space: nowrap;
}

.pill-tabs.is-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-inline: .4rem;
}

.pill-tabs.is-scroll::-webkit-scrollbar {
  display: none;
}

.pill-tabs.is-scroll .pill-tabs__tab {
  flex: 0 0 auto;
}

.tabs-shell {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.tabs-shell>.pill-tabs {
  flex: 1 1 auto;
  background: transparent;
}

.tabs-goo {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: stretch;
  filter: url(#balmat-tabs-goo);
  pointer-events: none;
}

.tabs-goo>span {
  border-radius: 999px;
  background: var(--surface-3);
}

.tabs-goo__bar {
  flex: 1 1 auto;
}

/* One geometry for the real button and its shape underneath, so both move together. Showing: the piece grows as
   part of the bar, then pulls away with a spring. Hiding: it slides back in first, then melts away. */
.tabs-piece {
  flex: none;
  align-self: center;
  width: 0;
  height: 2.1rem;
  margin: 0;
  transition: margin .14s ease-in, width .16s ease-in .08s;
}

.tabs-shell.has-prev .tabs-piece--prev,
.tabs-shell.has-next .tabs-piece--next {
  width: 2.1rem;
  transition: width .14s ease-out, margin .32s var(--spring) .08s;
}

.tabs-shell.has-prev .tabs-piece--prev {
  margin-right: .5rem;
}

.tabs-shell.has-next .tabs-piece--next {
  margin-left: .5rem;
}

.tabs-arrow {
  display: grid;
  place-items: center;
  padding: 0 0 3px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  pointer-events: none;
}

.tabs-arrow .icon {
  width: .95rem;
  height: .95rem;
  flex: none;
  opacity: 0;
  transform: scale(.3);
  transition: opacity .12s, transform .12s;
}

.tabs-shell.has-prev .tabs-arrow.tabs-piece--prev,
.tabs-shell.has-next .tabs-arrow.tabs-piece--next {
  pointer-events: auto;
}

.tabs-shell.has-prev .tabs-piece--prev .icon,
.tabs-shell.has-next .tabs-piece--next .icon {
  opacity: 1;
  transform: none;
  transition: opacity .12s .16s, transform .25s var(--spring) .16s;
}

.tabs-arrow:active .icon {
  transform: scale(.82);
  transition-delay: 0s;
}

[data-motion="reduce"] .tabs-piece,
[data-motion="reduce"] .tabs-arrow .icon {
  transition: none !important;
}

/* Streak badge with no streak yet: grey, same place on the bar. */
.badge[data-q-combo].is-cold {
  background: var(--surface-2);
  color: var(--muted);
  box-shadow: none;
}

.badge[data-q-combo].is-cold .icon {
  color: var(--muted);
}

/* Leaderboard: one full-width bar, this week / my class / all time. */
.lb__tabs {
  display: flex;
  width: 100%;
}

.lb__tabs .pill-tabs__tab {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  white-space: nowrap;
}

.lb__tabs .pill-tabs__tab span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb__tabs .icon {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.lb__tabs.is-scroll .pill-tabs__tab {
  flex: 0 0 auto;
}

/* Small phones: tabs take the width their label needs, so "Tüm zamanlar" is not cut short. */
@media (max-width: 420px) {
  .lb__tabs .pill-tabs__tab {
    flex: 1 1 auto;
    padding-inline: .6rem;
  }
}

/* Tabs made of plain buttons (admin panel) look like the link tabs. */
button.pill-tabs__tab {
  border: 0;
  background: none;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.admin-tabs .pill-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
}

.admin-tabs .icon {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.toast {
  max-width: 100%;
  line-height: 1.35;
  text-align: center;
  overflow-wrap: anywhere;
}

.toast.is-multi {
  border-radius: 20px;
  text-align: left;
}

/* Line lab */
.lab-card {
  border-color: color-mix(in srgb, var(--accent, var(--primary)) 45%, var(--line));
}

.lab-card .learn-card__icon {
  background: var(--accent, var(--primary));
  color: #fff;
}

.lab {
  --lab-line: var(--primary);
}

.lab[data-kind="up"] {
  --lab-line: var(--good);
}

.lab[data-kind="down"] {
  --lab-line: var(--bad);
}

.lab[data-kind="flat"] {
  --lab-line: var(--warn);
}

.lab[data-kind="vertical"] {
  --lab-line: var(--info-ink);
}

.lab__grid {
  display: grid;
  gap: 1rem;
  align-items: start;
}

@media (min-width: 900px) {
  .lab__grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }
}

.lab__equation {
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 4vw, 1.9rem);
  font-weight: 800;
  color: var(--lab-line);
  transition: color .25s ease;
}

.plane .lab-line {
  stroke: var(--lab-line);
  stroke-width: .16;
  stroke-linecap: round;
  transition: stroke .25s ease;
}

.plane .lab-line-g {
  transform-box: view-box;
  transform-origin: 0 0;
}

.lab.is-ready .plane .lab-line-g {
  transition: transform .35s cubic-bezier(.2, 1.25, .4, 1);
}

.plane .lab-tri__leg {
  stroke: var(--muted);
  stroke-width: .08;
  stroke-dasharray: .3 .2;
}

.plane .lab-tri__label {
  fill: var(--ink);
  /* A halo in the card colour keeps the label readable where it crosses axis numbers. */
  stroke: var(--surface);
  stroke-width: .16;
  stroke-linejoin: round;
  paint-order: stroke;
  font-size: .55px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.plane .lab-cut {
  fill: var(--surface);
  stroke: var(--lab-line);
  stroke-width: .12;
}

.plane .lab-cut--x {
  stroke: var(--ink);
}

.lab__readout {
  border-left: 6px solid var(--lab-line);
  transition: border-color .25s ease;
}

.lab-ctrl+.lab-ctrl {
  margin-top: .4rem;
}

.lab-ctrl__label {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-weight: 700;
}

.lab-ctrl__value {
  font-family: var(--font-mono);
  min-width: 3ch;
  text-align: right;
}

.lab-ctrl__row {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.lab-ctrl__range {
  flex: 1;
  min-width: 0;
  height: var(--tap);
  accent-color: var(--lab-line);
  /* Drawn by hand so Chrome, Safari and Firefox show the same light track and coloured knob. */
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.lab-ctrl__range::-webkit-slider-runnable-track {
  height: .5rem;
  border-radius: 999px;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line);
}

.lab-ctrl__range::-moz-range-track {
  height: .5rem;
  border-radius: 999px;
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line);
}

.lab-ctrl__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: -.45rem;
  border-radius: 50%;
  background: var(--lab-line);
  border: 3px solid var(--surface);
  box-shadow: 0 2px 0 var(--edge), 0 0 0 1px var(--line-strong);
}

.lab-ctrl__range::-moz-range-thumb {
  width: 1.4rem;
  height: 1.4rem;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--lab-line);
  border: 3px solid var(--surface);
  box-shadow: 0 2px 0 var(--edge), 0 0 0 1px var(--line-strong);
}

.lab-ctrl__range:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent);
  outline-offset: 2px;
  border-radius: 999px;
}

.lab__goal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.lab__goal-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.lab__dots {
  display: inline-flex;
  gap: .3rem;
}

.lab__dot {
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--line);
}

.lab__dot.is-now {
  background: var(--warn);
}

.lab__dot.is-done {
  background: var(--good);
}

[data-motion="reduce"] .lab.is-ready .plane .lab-line-g {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .lab.is-ready .plane .lab-line-g {
    transition: none;
  }
}

.lab__slope {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .9rem;
  color: var(--muted);
}

.feedback__lab {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  width: auto;
}

.quick-tile--survival {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
}

.quick-tiles> :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* Survival */
.survival-plus {
  position: absolute;
  left: 50%;
  top: -.4rem;
  transform: translateX(-50%);
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--good);
  color: #fff;
  font-weight: 900;
  font-size: .85rem;
  white-space: nowrap;
  pointer-events: none;
  animation: survival-plus 1.1s cubic-bezier(.2, 1.3, .4, 1) forwards;
}

@keyframes survival-plus {
  0% {
    opacity: 0;
    transform: translate(-50%, .6rem) scale(.6);
  }

  25% {
    opacity: 1;
    transform: translate(-50%, -.4rem) scale(1.15);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -1.8rem) scale(1);
  }
}

[data-motion="reduce"] .survival-plus {
  animation: none;
  opacity: 1;
}

.survival-done__art {
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto;
}

.survival-done__run {
  font-size: clamp(3rem, 12vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--warn-ink);
}

.quest-pages {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  margin: 0 -.25rem;
}

.quest-pages::-webkit-scrollbar {
  display: none;
}

.quest-page {
  flex: 0 0 100%;
  min-width: 0;
  padding: 0 .25rem;
  scroll-snap-align: start;
}

.quest-dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: .6rem;
}

.quest-dot {
  position: relative;
  width: .7rem;
  height: .7rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line-strong);
  cursor: pointer;
  transition: width .25s var(--spring), background-color .2s ease;
}

.quest-dot::before {
  content: '';
  position: absolute;
  inset: -.6rem;
}

.quest-dot.is-active {
  width: 1.8rem;
  background: var(--primary);
}

.quest-dot.has-ready::after {
  content: '';
  position: absolute;
  top: -.25rem;
  right: -.25rem;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--bad);
  box-shadow: 0 0 0 2px var(--surface);
}

/* Teacher heatmap */
.heat__controls {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.heat__insights .h3 {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.heat__insight-list {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.heat__insight {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
}

.heat__insight-pct {
  flex: none;
  min-width: 3.2rem;
  padding: .2rem .5rem;
  border-radius: 999px;
  background: var(--bad-soft);
  color: var(--bad-ink);
  font-weight: 900;
  text-align: center;
}

.heat__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  max-width: 100%;
}

.heat__table {
  border-collapse: separate;
  border-spacing: 3px;
  min-width: 100%;
}

.heat__table th {
  font-size: .78rem;
  font-weight: 800;
  color: var(--muted);
  text-align: center;
  vertical-align: bottom;
}

.heat__col {
  min-width: 4.2rem;
  max-width: 7rem;
}

.heat__col-group {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  opacity: .75;
}

.heat__col-name {
  display: block;
  line-height: 1.15;
}

.heat__name {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  text-align: left !important;
  white-space: nowrap;
  padding-right: .4rem;
}

th.heat__name {
  display: table-cell;
}

tbody .heat__name {
  color: var(--ink);
  font-size: .85rem;
}

tbody .heat__name .avatar {
  vertical-align: middle;
  margin-right: .35rem;
}

.heat__cell {
  padding: 0;
  border-radius: 10px;
}

.heat__btn {
  width: 100%;
  min-height: 2.6rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 900;
  font-size: .85rem;
  cursor: pointer;
}

.heat__cell--good {
  background: var(--good-soft);
  color: var(--good-ink);
}

.heat__cell--warn {
  background: var(--warn-soft);
  color: var(--warn-ink);
}

.heat__cell--bad {
  background: var(--bad-soft);
  color: var(--bad-ink);
}

.heat__cell--none {
  background: var(--surface-2);
  color: var(--muted);
}

.heat__cell.is-few {
  opacity: .5;
}

.heat__total .heat__btn {
  box-shadow: inset 0 0 0 2px currentColor;
}

.heat__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  font-size: .8rem;
  color: var(--muted);
  font-weight: 700;
}

.heat__key {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.heat__swatch {
  width: 1rem;
  height: 1rem;
  border-radius: 4px;
}

/* Boss fight */
.boss-monster {
  position: relative;
  aspect-ratio: 1;
}

.boss-monster__img,
.boss-monster__hurt {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.boss-monster__img {
  animation: boss-idle 2.6s ease-in-out infinite;
  transform-origin: 50% 90%;
}

.boss-monster__hurt {
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.boss-monster[data-phase="1"] .boss-monster__hurt--1,
.boss-monster[data-phase="2"] .boss-monster__hurt--1,
.boss-monster[data-phase="2"] .boss-monster__hurt--2 {
  opacity: 1;
}

.boss-monster[data-phase="2"] .boss-monster__img {
  filter: saturate(.75) brightness(.95);
  animation-duration: 1.4s;
}

.boss-monster.is-hit .boss-monster__img {
  animation: boss-hit .38s ease-out, boss-idle 2.6s ease-in-out .38s infinite;
}

.boss-monster.is-down .boss-monster__img {
  animation: boss-down 1.2s cubic-bezier(.5, 0, .7, 1) forwards;
}

@keyframes boss-idle {

  0%,
  100% {
    transform: translateY(0) scale(1, 1);
  }

  50% {
    transform: translateY(-3%) scale(1.02, .98);
  }
}

@keyframes boss-hit {
  0% {
    transform: translateX(0);
    filter: brightness(2.2);
  }

  25% {
    transform: translateX(-5%) rotate(-4deg);
  }

  55% {
    transform: translateX(4%) rotate(3deg);
  }

  100% {
    transform: none;
    filter: none;
  }
}

@keyframes boss-down {
  0% {
    transform: none;
  }

  30% {
    transform: rotate(-8deg) scale(1.05);
  }

  100% {
    transform: translateY(40%) rotate(80deg) scale(.6);
    opacity: 0;
  }
}

.boss-bars {
  display: grid;
  gap: .5rem;
}

.boss-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.boss-bar__icon {
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--bad);
  color: #fff;
}

.boss-bar--shield .boss-bar__icon {
  background: none;
}

.boss-bar__lane {
  position: relative;
  flex: 1;
  min-width: 0;
}

.boss-bar__track {
  position: relative;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, .08);
}

.boss-bar__fill,
.boss-bar__ghost {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: inherit;
}

.boss-bar__fill {
  z-index: 1;
  background: linear-gradient(180deg, #FF8A8F, var(--bad));
  transition: width .12s ease-out;
}

.boss-bar__ghost {
  background: linear-gradient(180deg, #DBEAFE, #93C5FD);
  transition: width .45s ease-in;
}

.boss-bar--shield .boss-bar__fill {
  background: linear-gradient(180deg, #7BE8FF, var(--primary));
}

.boss-bar__fill::after {
  content: '';
  position: absolute;
  left: .5rem;
  right: .5rem;
  top: .2rem;
  height: .3rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
}

.boss-bar__text {
  flex: none;
  min-width: 6.5rem;
  text-align: right;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.boss-bar.is-low .boss-bar__fill {
  animation: boss-pulse .8s ease-in-out infinite;
}

.boss-bar.is-hit .boss-bar__track,
.boss-bar.is-burn .boss-bar__track {
  animation: boss-crack .45s ease-out;
}

.boss-bar__fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.boss-sword {
  position: absolute;
  bottom: 30%;
  width: 2.6em;
  height: 2.6em;
  margin-left: -1.3em;
  transform-origin: 50% 92%;
  animation: boss-swing .55s cubic-bezier(.3, 1.4, .5, 1) forwards;
  translate: calc(var(--i) * -6px) calc(var(--i) * -4px);
}

.boss-sword__img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 0 rgba(15, 23, 42, .35));
}

@keyframes boss-swing {
  0% {
    opacity: 0;
    transform: rotate(80deg) scale(.6);
  }

  25% {
    opacity: 1;
  }

  55% {
    transform: rotate(-40deg) scale(1.05);
  }

  75% {
    opacity: 1;
    transform: rotate(-28deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: rotate(-34deg) scale(.9);
  }
}

.boss-spark {
  position: absolute;
  top: 50%;
  width: 2.2em;
  height: 2.2em;
  margin: -1.1em 0 0 -1.1em;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 25%, #FFE14D 40%, rgba(255, 138, 0, 0) 70%);
  animation: boss-flash .45s ease-out forwards;
}

.boss-guard {
  position: absolute;
  top: 50%;
  width: 2.2em;
  height: 2.2em;
  margin: -1.1em 0 0 -1.1em;
  animation: boss-guard 1s cubic-bezier(.2, 1.4, .4, 1) forwards;
}

.boss-guard__img {
  width: 100%;
  height: 100%;
}

@keyframes boss-guard {
  0% {
    opacity: 0;
    transform: scale(.3);
  }

  18% {
    opacity: 1;
    transform: scale(1.15);
  }

  55% {
    transform: scale(1);
  }

  62% {
    transform: scale(1.25) rotate(-8deg);
  }

  100% {
    opacity: 0;
    transform: scale(.8);
  }
}

.boss-fire {
  position: absolute;
  left: 0;
  top: 50%;
  width: 4.2em;
  height: 2.1em;
  margin-left: -1em;
  transform: translate(200%, -50%);
}

.boss-fire__img {
  width: 100%;
  height: 100%;
}

.boss-blast {
  position: absolute;
  top: 50%;
  width: 3em;
  height: 3em;
  margin: -1.5em 0 0 -1.5em;
  border-radius: 50%;
  background: radial-gradient(circle, #FFFDE7 0 20%, #FF9100 45%, rgba(229, 57, 0, 0) 72%);
  animation: boss-flash .5s ease-out forwards;
}

@keyframes boss-flash {
  0% {
    opacity: 1;
    transform: scale(.3);
  }

  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@keyframes boss-pulse {
  50% {
    filter: brightness(1.35);
  }
}

@keyframes boss-crack {
  0% {
    transform: translateX(0);
    box-shadow: 0 0 0 3px var(--bad);
  }

  30% {
    transform: translateX(-6px);
  }

  60% {
    transform: translateX(5px);
  }

  100% {
    transform: none;
    box-shadow: none;
  }
}

.boss-bars--compact .boss-bar__icon {
  width: 1.6rem;
  height: 1.6rem;
}

.boss-bars--compact .boss-bar__icon .icon {
  width: .95rem;
  height: .95rem;
}

.boss-bars--compact .boss-bar__track {
  height: .9rem;
}

.boss-bars--compact .boss-bar__text {
  min-width: 4.5rem;
  font-size: .8rem;
}

.boss-dmg {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 30%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  color: var(--bad);
  font-weight: 900;
  text-shadow: 0 2px 0 #fff, 0 0 8px rgba(255, 255, 255, .8);
  animation: boss-dmg 1.3s cubic-bezier(.2, 1.3, .4, 1) forwards;
}

.boss-dmg strong {
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1;
}

.boss-dmg span {
  font-size: .9rem;
  color: var(--ink);
}

.boss-dmg--mine {
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  font-size: 1.3rem;
}

@keyframes boss-dmg {
  0% {
    opacity: 0;
    transform: translate(-50%, 20%) scale(.5);
  }

  20% {
    opacity: 1;
    transform: translate(-50%, -20%) scale(1.2);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -140%) scale(1);
  }
}

.boss-scene {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: calc(100dvh - 8rem);
  padding: 1rem;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--purple, #8B5CF6) 22%, var(--surface)), var(--surface) 70%);
}

.boss-scene:fullscreen {
  border-radius: 0;
  padding: 2rem;
  overflow: auto;
}

.boss-scene__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.boss-scene__time {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.boss-scene__clock.is-low {
  color: var(--bad);
  animation: boss-pulse .8s ease-in-out infinite;
}

.boss-scene__status {
  font-size: 1rem;
  color: var(--warn-ink);
}

.boss-scene .boss-bar__track {
  height: 2rem;
}

.boss-scene .boss-bar__text {
  font-size: 1.2rem;
}

.boss-scene__main {
  flex: 1;
  display: grid;
  gap: 1rem;
  align-items: center;
}

@media (min-width: 900px) {
  .boss-scene__main {
    grid-template-columns: minmax(0, 1fr) 18rem;
  }
}

.boss-scene__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 18rem;
}

.boss-scene__monster {
  width: min(60vh, 100%);
  max-width: 32rem;
}

.boss-scene__side {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1rem;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 4px 0 var(--edge);
}

.boss-scene__board {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.boss-scene__row {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .5rem;
  border-radius: 14px;
  background: var(--surface-2);
}

.boss-scene__row.is-top {
  background: color-mix(in srgb, #FFD25E 28%, var(--surface));
}

.boss-scene__rank {
  width: 1.6rem;
  text-align: center;
  font-weight: 900;
}

.boss-scene__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
}

.boss-scene__dmg {
  color: var(--bad-ink);
}

.boss-scene__controls {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}

.boss-result {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(15, 23, 42, .55);
  animation: m-fade .3s ease;
}

.boss-scene:fullscreen .boss-result {
  position: absolute;
}

.boss-result__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  width: min(34rem, 100%);
  padding: 2rem 1.5rem;
  border-radius: 28px;
  background: var(--surface);
  text-align: center;
  box-shadow: 0 8px 0 var(--edge);
  animation: boss-pop .5s cubic-bezier(.2, 1.4, .4, 1);
}

.boss-result__art {
  width: 8rem;
  height: 8rem;
}

.boss-result--lost .boss-result__art {
  animation: boss-idle 2.6s ease-in-out infinite;
}

.boss-result__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
}

.boss-result--won .boss-result__title {
  color: var(--good-ink);
}

.boss-result--lost .boss-result__title {
  color: var(--bad-ink);
}

.boss-result__mvp {
  display: grid;
  gap: .5rem;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.boss-result__mvp-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .6rem;
  border-radius: 16px;
  background: var(--surface-2);
}

.boss-result__mvp-row strong {
  flex: 1;
  text-align: left;
}

.boss-result__medal {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
  background: #C0C7D6;
}

.boss-result__medal--1 {
  background: #F0A800;
}

.boss-result__medal--3 {
  background: #CD7F45;
}

@keyframes boss-pop {
  0% {
    transform: scale(.6);
    opacity: 0;
  }

  100% {
    transform: none;
    opacity: 1;
  }
}

.q-boss {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .7rem;
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 3px 0 var(--edge);
}

.q-boss__monster {
  flex: none;
  width: 3.6rem;
}

.q-boss .boss-bars {
  flex: 1;
  min-width: 0;
}

.event-boss__body {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.event-boss__monster {
  flex: none;
  width: 7rem;
}

.event-boss__text {
  flex: 1;
  min-width: 0;
}

.boss-done__art {
  width: 7rem;
  height: 7rem;
  margin: 0 auto;
}

.monster-pick {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.monster-card__art {
  width: 5rem;
  height: 5rem;
  margin: 0 auto;
}

[data-motion="reduce"] .boss-monster__img,
[data-motion="reduce"] .boss-dmg,
[data-motion="reduce"] .boss-bar.is-low .boss-bar__fill {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {

  .boss-monster__img,
  .boss-dmg,
  .boss-bar.is-low .boss-bar__fill {
    animation: none;
  }
}

.boss-scene .boss-bar__fx {
  font-size: 1.6rem;
}
/* Daily question */
.daily-card { position: relative; display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: 24px; border: 3px solid color-mix(in srgb, #F0A800 55%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, #FFE27A 32%, var(--surface)), var(--surface) 70%); box-shadow: 0 5px 0 color-mix(in srgb, #F0A800 60%, var(--edge)); color: inherit; text-decoration: none; transition: transform .15s var(--spring); }
.daily-card:active { transform: translateY(3px); box-shadow: 0 2px 0 color-mix(in srgb, #F0A800 60%, var(--edge)); }
.daily-card.is-done { border-color: var(--line); background: var(--surface); box-shadow: 0 4px 0 var(--edge); }
.daily-card__art { flex: none; width: 3.6rem; height: 3.6rem; }
.daily-card:not(.is-done) .daily-card__art { animation: boss-idle 2.6s ease-in-out infinite; }
.daily-card__text { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.daily-card__title { font-size: 1.15rem; font-weight: 900; }
.daily-card__lead { color: var(--muted); font-weight: 700; font-size: .9rem; line-height: 1.25; }
.daily-card__class { font-size: .8rem; font-weight: 800; color: var(--warn-ink); }
.daily-card__go { flex: none; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: #F0A800; color: #fff; box-shadow: 0 3px 0 #B87F00; }
.daily-card.is-done .daily-card__go { background: var(--surface-3); color: var(--muted); box-shadow: none; }
.daily-done__art { width: 6rem; height: 6rem; margin: 0 auto; }
[data-motion="reduce"] .daily-card__art { animation: none; }
.eq-pair { display: grid; gap: .5rem; }
.plane .given-line--2 { stroke: var(--warn); }
/* Each equation carries a dot in its line's colour (a thick left border on a rounded box looked like a crescent).
   Question screens draw the first given line purple; the lab draws it in --info-ink. */
.eq-pair .eq-box { --eq-c: var(--info-ink); display: flex; align-items: center; justify-content: center; gap: .5em; }
.eq-pair .eq-box::before { content: ""; flex: none; width: .55em; height: .55em; border-radius: 50%; background: var(--eq-c); }
.page-question .eq-pair { justify-content: center; }
.page-question .eq-pair .eq-box { --eq-c: var(--purple); justify-self: stretch; }
.eq-pair .eq-box--2, .page-question .eq-pair .eq-box--2 { --eq-c: var(--warn); }

/* Lab tabs: point and two lines */
.lab__tabs { align-self: flex-start; }
.lab__equation--sm { font-size: 1.4rem; text-align: left; color: var(--primary); }
.lab__mirror { margin: 0; padding-left: 1.1rem; font-size: .88rem; color: var(--muted); font-weight: 700; display: grid; gap: .15rem; }
.plane .lab-pt { fill: var(--primary); stroke: var(--surface); stroke-width: .1; transition: cx .25s cubic-bezier(.2, 1.3, .4, 1), cy .25s cubic-bezier(.2, 1.3, .4, 1); }
.plane .lab-proj { stroke: var(--primary); stroke-width: .07; stroke-dasharray: .25 .2; opacity: .7; }
.plane .lab-ghost circle { fill: var(--muted); opacity: .55; }
.plane .lab-ghost { transition: transform .25s ease; }
.plane .lab-line--1 { stroke: var(--info-ink); }
.plane .lab-line--2 { stroke: var(--warn); }
.is-ready .plane .lab-line-g { transition: transform .35s cubic-bezier(.2, 1.25, .4, 1); }
.plane .lab-cut--cross { fill: var(--bad); stroke: var(--surface); stroke-width: .1; }
.lab__controls--1 { border-left: 6px solid var(--info-ink); }
.lab__controls--2 { border-left: 6px solid var(--warn); }
.lab__readout--two { border-left: 6px solid var(--muted); }
[data-rel="parallel"] .lab__readout--two, [data-rel="same"] .lab__readout--two { border-left-color: var(--primary); }
[data-rel="perpendicular"] .lab__readout--two { border-left-color: var(--good); }
[data-rel="intersect"] .lab__readout--two { border-left-color: var(--bad); }
.lab__panel .eq-pair { grid-template-columns: 1fr 1fr; margin-top: .5rem; }
.lab__panel .eq-pair .eq-box { font-size: 1.05rem; padding: .45rem .6rem; min-height: 0; }

/* Mastery map */
.mastery__next { display: flex; align-items: center; gap: .9rem; color: inherit; text-decoration: none; border: 3px solid color-mix(in srgb, var(--primary) 40%, var(--line)); }
.mastery__next-art { flex: none; width: 3.4rem; height: 3.4rem; }
.mastery__next > .stack { flex: 1; min-width: 0; }
.mastery__list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.mastery__row { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 16px; background: var(--surface-2); }
.mastery__name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stars { display: inline-flex; gap: .1rem; flex: none; }
.stars__s .icon { width: 1.15rem; height: 1.15rem; color: var(--line-strong); }
.stars__s.is-on .icon { color: #F5B400; }
.stars--none { opacity: .45; }
.mastery-card .learn-card__icon { background: #F0A800; color: #fff; }
.mastery__next { flex-wrap: wrap; }
@media (max-width: 600px) { .mastery__next > .btn { flex-basis: 100%; justify-content: center; } }

/* Homework */
.hw__lesson { margin-top: .4rem; }
.hw__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.hw__card.is-closed { opacity: .85; }
.hw__counts { display: flex; flex-wrap: wrap; gap: .4rem; }
.hw-status { display: inline-flex; align-items: center; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 800; background: var(--surface-2); color: var(--muted); }
.hw-status--done { background: var(--good-soft); color: var(--good-ink); }
.hw-status--late { background: var(--warn-soft); color: var(--warn-ink); }
.hw-status--started { background: color-mix(in srgb, var(--primary) 14%, var(--surface)); color: var(--primary); }
.hw__students { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.hw__student { display: flex; align-items: center; gap: .55rem; padding: .35rem .5rem; border-radius: 14px; background: var(--surface-2); }
.hw__name { flex: 1; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.homework-card { display: grid; gap: .55rem; }
.homework-card__item { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border-radius: 16px; background: var(--surface-2); color: inherit; text-decoration: none; }
.homework-card__item.is-urgent { box-shadow: inset 4px 0 0 var(--bad); }
.homework-card__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.homework-card__text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-flow .chip-list>button.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 3px 0 color-mix(in srgb, var(--primary) 60%, #000); }

/* Report card */
.report__head { display: flex; align-items: center; gap: 1rem; }
.report__tiles { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.report [data-print] { white-space: nowrap; }
@media (max-width: 720px) {
  .report__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report__head { gap: .8rem; }
  .report__head .avatar { width: 4rem; height: 4rem; flex: none; }
  .report__head .h1 { font-size: 1.5rem; overflow-wrap: anywhere; }
}
.report__two { display: grid; gap: 1rem; }
@media (min-width: 760px) { .report__two { grid-template-columns: 1fr 1fr; } }
.report__topic { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .45rem .7rem; border-radius: 14px; font-weight: 800; }
.report__topic--good { background: var(--good-soft); }
.report__topic--bad { background: var(--bad-soft); }
.report .growth__cols { grid-template-columns: repeat(8, minmax(0, 1fr)); }

/* Print / PDF: only the content, on white, with colours kept (heatmap cells, stars, bars). */
.print-only { display: none; }
@media print {
  @page { margin: 12mm; }
  html, body { background: #fff !important; color: #111 !important; padding: 0 !important; margin: 0 !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; animation: none !important; transition: none !important; }
  .site-header, .dash-sidebar, .under-menu, .site-banner, .class-banners, .bg-scene, .kb, .kb-ball, .toast-wrap, .skip-link,
  .no-print, .tclass-head__actions, .tclass-tabs, .step-flow, .heat__controls, .q-top, .tnote__item-actions, .modal__backdrop,
  [data-print], .report-pop__print, .class-pop__close, .pop-in::before { display: none !important; }
  .print-only { display: block; }
  .main { margin: 0 !important; padding: 0 !important; max-width: none !important; }
  .card, .res-badge { box-shadow: none !important; border: 1px solid #d5dbe7 !important; background: #fff !important; break-inside: avoid; }
  .pop-in, .reveal { opacity: 1 !important; transform: none !important; }
  .mastery__row, .hw__card, .report__topic, .heat__table tr { break-inside: avoid; }
  .heat__scroll { overflow: visible !important; }
  .heat__table { font-size: 9pt; min-width: 0; width: 100%; }
  .heat__col { min-width: 0; }
  .heat__btn { min-height: 1.6rem; font-size: 8pt; }
  .hw__students[hidden] { display: grid !important; }
  body.print-modal > *:not(.modal) { display: none !important; }
  body.print-modal .modal { position: static !important; display: block !important; background: none !important; }
  body.print-modal .modal__card { max-height: none !important; overflow: visible !important; box-shadow: none !important; width: 100% !important; }
}

.report-pop__print { align-self: flex-start; }

/* Live quiz */
.live { display: flex; flex-direction: column; gap: 1rem; }
.live--board { min-height: calc(100dvh - 8rem); padding: 1rem; border-radius: 28px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--warn) 16%, var(--surface)), var(--surface) 70%); }
.live--board:fullscreen { border-radius: 0; padding: 2rem; overflow: auto; }
.live__head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.live__step { font-weight: 900; }
.live__answered { font-weight: 800; color: var(--muted); }
.live__clock { --p: 1; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; font-weight: 900; font-size: 1.3rem; background: conic-gradient(var(--primary) calc(var(--p) * 360deg), var(--surface-3) 0); color: var(--ink); box-shadow: inset 0 0 0 .45rem var(--surface); }
.live__clock.is-low { background: conic-gradient(var(--bad) calc(var(--p) * 360deg), var(--surface-3) 0); animation: boss-pulse .8s ease-in-out infinite; }
.live--board .live__q .q-text { font-size: clamp(1.5rem, 3vw, 2.4rem); }
.live--board .live__q .choice { font-size: clamp(1.1rem, 2.2vw, 1.6rem); min-height: 4rem; }
.live__lobby { gap: .6rem; }
.live__art { width: 7rem; height: 7rem; margin: 0 auto; }
.live__art--pulse { animation: boss-idle 1.6s ease-in-out infinite; }
.live__spread { display: grid; gap: .5rem; }
.live__bar { display: grid; grid-template-columns: minmax(6rem, 14rem) 1fr 2.5rem; align-items: center; gap: .6rem; font-weight: 800; }
.live__bar-track { height: 1.3rem; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.live__bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--muted); transition: width .6s cubic-bezier(.2, 1.2, .4, 1); }
.live__bar.is-right .live__bar-fill { background: var(--good); }
.live__bar.is-right .live__bar-label { color: var(--good-ink); }
.live__top { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.live__row { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 16px; background: var(--surface-2); font-size: 1.05rem; }
.live__row.is-top { background: color-mix(in srgb, #FFD25E 28%, var(--surface)); }
.live__row.is-me { box-shadow: inset 0 0 0 3px var(--primary); }
.live__rank { width: 1.8rem; text-align: center; font-weight: 900; }
.live__name { flex: 1; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live__controls { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: auto; }
.live__result { gap: .4rem; }
.live__big .icon { width: 4rem; height: 4rem; }
.live__result--good .live__big { color: var(--good); }
.live__result--bad .live__big { color: var(--bad); }
.live__result--none .live__big { color: var(--muted); }
[data-motion="reduce"] .live__art--pulse, [data-motion="reduce"] .live__clock.is-low { animation: none; }
.live .q-step { display: none; }

/* "Oyna" page: every mode and short game as a striped card, two per row (one on phones). */
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.game-grid .game-card { min-height: 9rem; }
.game-grid .game-card__icon { width: 5rem; }
.game-grid .game-card__icon img, .game-grid .game-card__icon .art { width: 100%; height: auto; }
.game-grid .game-card__title { font-size: 1.5rem; }
.game-grid .game-card__go { width: 3.4rem; height: 3.4rem; }
.game-grid .quick-tile__count { top: .6rem; right: .6rem; }
html[data-layout="mobile"] .game-grid { grid-template-columns: 1fr; }
@media (max-width: 640px) { .game-grid { grid-template-columns: 1fr; } }
.game-card--daily { --gc: #F0A800; --gc-edge: #B87F00; }
.game-card--notebook { --gc: #E5484D; --gc-edge: #B42318; }
.game-card--survival { --gc: #0EA5E9; --gc-edge: #0369A1; }
.game-card--listen { --gc: #10B981; --gc-edge: #047857; }
.game-card--duel { --gc: #8B5CF6; --gc-edge: #6D28D9; }
button.game-card { font: inherit; text-align: left; width: 100%; border: 0; cursor: pointer; }
.game-card--more { --gc: #0E7490; --gc-edge: #0A4F63; }
.game-card.is-calm { opacity: .85; }
.game-card.is-calm .game-card__go { animation: none; }
.game-grid .game-card--play { min-height: 9rem; }
.game-grid .game-card--play .game-card__icon { width: 5rem; }
.game-grid .game-card--play .game-card__title { font-size: 1.5rem; }

/* Bot check popup (js/botcheck.js) */
.bot-check__warn {
  margin: 0;
  padding: .55rem .8rem;
  border-radius: 14px;
  background: var(--warn-soft);
  color: var(--warn-ink);
  font-weight: 800;
}

.bot-check__warn[hidden] {
  display: none;
}

.bot-check.is-shake {
  animation: m-shake .45s ease-in-out;
}

/* Maintenance: sign-in buttons would only lead to a closed site (admins can still open /auth/start). */
.page-maintenance .site-header > .btn,
.page-maintenance .drawer__foot {
  display: none;
}

/* A top-bar badge that is also the page's heading (lab): keeps the badge's size. */
h1.q-top__title {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* An empty bar stays empty: the rounded minimum width would otherwise read as some progress. */
.progress__bar[style*="width:0%"],
.progress__bar[style*="width: 0%"] {
  min-width: 0;
}


/* ---------- Text contrast (WCAG AA, 4.5:1) on the light theme ---------- */
/* Rarity names: the tier colour mixed with ink, so the tag stays readable on its own tinted background. */
:root:not([data-theme="dark"]) .rarity-tag {
  color: color-mix(in srgb, var(--rarity, var(--muted)) 50%, var(--ink));
}

/* "Owned" badge: white text needs the darker green. */
.store-item__owned {
  background: #1E7A42;
}

/* Active menu items sit on the pale blue: their label takes the pressed (darker) blue. */
:root:not([data-theme="dark"]) :is(.under-menu__item, .dash-sidebar__item, .under-more__item).is-active {
  color: var(--primary-press);
}

/* Growth numbers, online status and announcement bars: darker tints for small text. */
:root:not([data-theme="dark"]) .growth__acc {
  color: color-mix(in srgb, var(--g) 60%, var(--ink));
}

:root:not([data-theme="dark"]) .presence.is-online {
  color: var(--good-ink);
}

:root:not([data-theme="dark"]) :is(.site-banner--success, .site-banner--warning) {
  color: var(--ink);
}

:root:not([data-theme="dark"]) .site-banner--danger {
  --sb-bg: var(--bad-ink);
}

/* Purple buttons: the edge shade under white text. */
.btn--purple {
  --btn-bg: #7A4BEF;
}

/* Wizard step and podium names in blue on a pale surface. */
:root:not([data-theme="dark"]) :is(.wizard__step.is-active .wizard__label, .is-me > .podium__name) {
  color: var(--primary-press);
}

/* ---------- Text contrast on the dark theme ---------- */
/* Blue buttons: a deeper blue under the white label (the lighter --primary stays for blue text). */
:root[data-theme="dark"] .btn--primary {
  --btn-bg: #2A74D8;
  --btn-line: #2A74D8;
}

/* Blue text on the pale-blue (here: deep blue) surfaces of active items: a lighter blue. */
:root[data-theme="dark"] :is(.under-menu__item, .dash-sidebar__item, .under-more__item, .device-pick__btn, .settings-layout .btn, [data-layout-pick]).is-active,
:root[data-theme="dark"] [data-layout-pick].is-active > span {
  color: #8DB9F8;
}

:root[data-theme="dark"] .rarity-tag {
  color: color-mix(in srgb, var(--rarity, var(--muted)) 65%, #fff);
}

:root[data-theme="dark"] .badge--gold,
:root[data-theme="dark"] .badge--coin {
  color: #F5C451;
}

:root[data-theme="dark"] .presence.is-online {
  color: var(--good);
}

/* Question skip: square icon button beside the check button; the pen that draws the new question in. */
.q-actions--row { display: flex; gap: .6rem; align-items: stretch; }
.q-actions--row > [data-check] { flex: 1; width: auto; }
.q-skip { flex: none; width: auto; aspect-ratio: 1; }
html.is-skipping { overflow: hidden; }
.skip-shard { position: absolute; pointer-events: none; margin: 0; }
.is-shard-host { position: relative; }
.is-shattered { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.skip-pen { position: fixed; left: 0; top: 0; z-index: 60; width: 2.6rem; height: 2.6rem; color: var(--ink); pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.skip-pen .icon { width: 100%; height: 100%; }

/* Error pages (/error/{code}): picture with the code, plain words, a menu of ways on. */
.err { max-width: 32rem; margin: 2.5rem auto; padding: 2rem 1.5rem; }
.err__head { position: relative; display: grid; place-items: center; }
.err__art { width: 6.5rem; height: 6.5rem; animation: err-float 3.2s ease-in-out infinite; }
.err__code { margin-top: -.6rem; font-size: clamp(3rem, 14vw, 4.5rem); font-weight: 900; line-height: 1; letter-spacing: .04em; color: var(--accent, var(--ink)); opacity: .9; }
.err__text { max-width: 26rem; }
.err__menu { display: grid; gap: .6rem; width: 100%; max-width: 20rem; margin-top: .5rem; }
.err__menu .btn { justify-content: center; }
.err__menu .is-disabled { opacity: .55; pointer-events: none; }
.err__icon { display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 1.25rem; background: var(--surface-2); border: 2px solid var(--line); color: var(--muted); }
.err__icon .icon { width: 2.4rem; height: 2.4rem; }
.err--plain .err__code { margin-top: .9rem; font-size: clamp(2.2rem, 10vw, 3rem); color: var(--muted); opacity: 1; }
@keyframes err-float { 50% { transform: translateY(-6px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .err__art { animation: none; } }

/* A setting this device cannot use (vibration on iPhone or a computer): greyed out and locked. */
.toggle-card.is-unsupported { background: var(--surface-2); filter: grayscale(1); opacity: .7; }
.toggle-card.is-unsupported .big-toggle { cursor: not-allowed; }
.toggle-card__off { margin: .15rem 0 0; font-weight: 700; color: var(--muted); }

/* Admin panel: which subject the panel edits (js/pages/admin.js). */
.admin-subject {
  width: auto;
  min-width: 9rem;
}

/* Subject picker (js/subjects.js): the logo is a button that drops a list of subjects down under it. */
button.brand--pick {
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: .3rem .4rem .3rem .3rem;
  border-radius: var(--radius-sm);
  max-width: 100%;
}

button.brand--pick:hover,
button.brand--pick[aria-expanded="true"] {
  background: var(--surface-2);
}

.brand__chev {
  display: grid;
  place-items: center;
  flex: none;
  margin-left: auto;
  color: var(--muted);
}

.brand__chev .icon {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform .15s;
}

.brand--pick[aria-expanded="true"] .brand__chev .icon {
  transform: rotate(180deg);
}

.subject-menu {
  position: fixed;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .4rem;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
}

.subject-menu {
  max-width: calc(100vw - 16px);
}

.subject-menu .subject-item {
  white-space: nowrap;
  min-height: 2.9rem;
  padding: .4rem .6rem;
  border-radius: 12px;
}

.subject-menu .subject-item__logo {
  width: 32px;
  height: 32px;
}

.subject-menu .subject-item__name {
  font-size: 1rem;
}

.subject-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 3.5rem;
  padding: .55rem .8rem;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.subject-item:hover,
.subject-item:focus-visible {
  border-color: var(--subject-color, var(--brand));
}

.subject-item.is-current {
  border-color: var(--subject-color, var(--brand));
  box-shadow: inset 0 0 0 1px var(--subject-color, var(--brand));
}

.subject-item.is-busy {
  opacity: .6;
}

.subject-item__logo {
  width: 40px;
  height: 40px;
  flex: none;
}

.subject-item__name {
  flex: 1;
  font-size: 1.05rem;
}

.subject-item .icon {
  color: var(--subject-color, var(--brand));
}

/* Almanca: word card and three-way choices (der / die / das). */
.de-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: center;
}

.de-word__de {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.de-word__de--sentence {
  font-size: clamp(1.3rem, 5vw, 1.8rem);
}

.de-word__gap {
  color: var(--muted);
  margin-right: .4em;
  letter-spacing: .05em;
}

.de-word__tr {
  color: var(--muted);
}

.choice-grid.choice-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Almanca: typed answer and its ä ö ü ß row. */
.input.de-input {
  font-size: 1.35rem;
  text-align: center;
}

.de-letters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem;
}

.btn.de-letters__key {
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: .35rem .6rem;
  font-size: 1.15rem;
}

.choice-grid--de .choice {
  overflow-wrap: anywhere;
}
/* A long word ("Kugelschreiber") shrinks to the button's width instead of breaking: font size at most the normal one and at least 11px,
   else the width over the longest word (--len, question-views.js) at about .7em a letter (letter spacing included). Without container
   queries the word still breaks as before. */
.choice-grid--de .choice { container-type: inline-size; }
.choice-grid--de .choice > span { font-size: max(11px, min(1em, calc(100cqi / (var(--len, 8) * .7)))); }

/* Almanca: listening. A speaker (js/modules/almanca.js) talks into a bubble with two buttons: play and slow. */
.de-listen {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .4rem;
  padding-top: .25rem;
}
.de-listen__speaker { flex: 0 0 auto; width: clamp(6.5rem, 30vw, 8.5rem); line-height: 0; }
.de-speaker { width: 100%; height: auto; display: block; overflow: visible; }
.de-speaker__skin { fill: #F6C7A1; }
.de-speaker__hair { fill: #4A2C1D; }
.de-speaker--f .de-speaker__hair { fill: #8A3B12; }
.de-speaker__shirt { fill: #2F7FE0; }
.de-speaker--f .de-speaker__shirt { fill: #E2559B; }
.de-speaker__eyes { fill: #1E293B; transform-box: fill-box; transform-origin: center; }
.de-speaker__cheek { fill: #F28B82; opacity: .45; }
.de-speaker__smile { fill: none; stroke: #7A2E2E; stroke-width: 2.4; stroke-linecap: round; }
.de-speaker__mouth { fill: #7A1F2B; opacity: 0; }
.de-listen.is-talking .de-speaker__mouth { opacity: 1; }
.de-listen.is-talking .de-speaker__smile { opacity: 0; }
.de-listen.is-alive .de-speaker__eyes { animation: de-blink 4.6s infinite; }
@keyframes de-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
[data-motion="reduce"] .de-listen .de-speaker__eyes { animation: none; }
@media (prefers-reduced-motion: reduce) { .de-listen .de-speaker__eyes { animation: none; } }

.de-listen__bubble {
  position: relative;
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: clamp(3rem, 14vw, 4.2rem);
  padding: .75rem .9rem;
  border: 2px solid var(--line-strong);
  border-radius: 1.6rem;
  background: var(--surface);
  box-shadow: 0 .25rem 0 var(--line);
}
/* The tail points at the speaker's mouth. */
.de-listen__bubble::before {
  content: '';
  position: absolute;
  left: -.6rem;
  bottom: .7rem;
  width: 1.05rem;
  height: 1.05rem;
  background: var(--surface);
  border-left: 2px solid var(--line-strong);
  border-bottom: 2px solid var(--line-strong);
  transform: rotate(45deg);
  border-radius: 0 0 0 .25rem;
}
.de-listen__btn { width: 4rem; height: 4rem; border-radius: 50%; padding: 0; }
.de-listen__btn .icon { width: 1.9rem; height: 1.9rem; }
.de-listen__btn--play { width: 4.6rem; height: 4.6rem; }
.de-listen__btn--play .icon { width: 2.2rem; height: 2.2rem; }
.de-listen__btn.is-on { outline: 3px solid var(--primary); outline-offset: 3px; }

/* Almanca: sentence order (the sentence line and its word bank). */
.de-word__tr--big {
  color: var(--ink, inherit);
  font-size: clamp(1.15rem, 4.5vw, 1.4rem);
  font-weight: 600;
}

.de-order {
  --row: 3.5rem;
  --tok: 2.8rem;
}

/* The sentence: ruled like a notebook, one rule under each row of words. */
.de-line {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: calc(var(--row) - var(--tok)) .45rem;
  min-height: calc(var(--row) * 2);
  padding: calc((var(--row) - var(--tok)) / 2 - 2px) .2rem 0;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row) - 2px), var(--line-strong) calc(var(--row) - 2px), var(--line-strong) var(--row));
}

.de-line__empty {
  position: absolute;
  inset: 0 0 auto;
  height: var(--row);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 700;
  pointer-events: none;
}

.de-line:not(.is-empty) .de-line__empty,
.de-line.is-empty .de-line__mark {
  display: none;
}

.de-line__mark {
  font-size: 1.4rem;
  font-weight: 800;
  margin-left: -.2rem;
}

/* The bank: each word in its own place; an empty place stays as a grey mark of the word's size. */
.de-bank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem .45rem;
  padding: .4rem 0;
}

.de-home {
  display: inline-flex;
  min-height: var(--tok);
  border-radius: 14px;
  background: var(--surface-2);
}

.btn.de-token {
  height: var(--tok, 2.8rem);
  min-height: 0;
  padding: 0 .9rem;
  font-size: 1.15rem;
  text-transform: none;
  letter-spacing: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.btn.de-token.is-lifted {
  visibility: hidden;
}

/* Where the dragged word will land. */
.de-slot {
  flex: none;
  border-radius: 14px;
  border: 2px dashed var(--primary);
  background: var(--primary-soft);
}

/* The copy that follows the finger. */
.de-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2000;
  margin: 0;
  pointer-events: none;
  box-shadow: 0 14px 28px rgba(0, 0, 0, .28);
  transition: none;
}

/* Admin word pool (js/lexicon-admin.js) */
.admin-user__name { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.admin-user.is-removed { opacity: .6; }
.admin-lex-conj { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; }

/* History page (js/pages/history.js): day headings between the review cards. */
.history-day { margin: .4rem 0 0; color: var(--muted); font-size: 1rem; text-transform: none; }

/* ---------- Dictionary (js/dictionary.js, js/pages/dictionary.js) ---------- */
.dict { gap: 1rem; }
.dict__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding-right: 2.5rem; }
.dict-card .dict__top { padding-right: 0; }
.dict__word { margin: 0; overflow-wrap: anywhere; }
.dict__speak { flex: 0 0 auto; }
.dict__entry { display: flex; flex-direction: column; gap: .7rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.dict__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.dict__ipa { color: var(--muted); font-size: .95rem; }
.dict__tr { display: flex; flex-wrap: wrap; gap: .4rem; }
.dict__chip { padding: .25rem .7rem; border-radius: 999px; background: var(--primary-soft, var(--surface-2)); color: var(--ink); font-weight: 800; }
.dict__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .35rem .9rem; }
.dict__row { display: flex; gap: .5rem; align-items: baseline; min-width: 0; }
.dict__label { color: var(--muted); font-size: .85rem; font-weight: 700; }
.dict__value { font-weight: 800; overflow-wrap: anywhere; }
.dict__more summary { cursor: pointer; font-weight: 700; color: var(--muted); }
.dict__list { margin: .5rem 0 0; padding-left: 1.3rem; display: grid; gap: .3rem; }
.dict__examples { display: grid; gap: .3rem; }
.dict__example { margin: 0; font-style: italic; }
.dict__source a { color: inherit; }
.dict-sheet { max-height: 85dvh; overflow-y: auto; }
.dict-search { display: flex; gap: .6rem; }
.dict-search .input { flex: 1; min-width: 0; }
.dict-results { display: flex; flex-wrap: wrap; gap: .5rem; }
.dict-result { padding: .45rem .9rem; border: 2px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 800; text-decoration: none; }
.dict-result:hover, .dict-result:focus-visible { border-color: var(--primary); }
/* Where a tap looks a word up: answered German questions, Learn, the review pages. Locked choices let the tap
   through to their grid (a disabled button sends no click). */
.has-dict body.has-sheet.page-question [lang="de"], .has-dict body.dict-on [lang="de"], .has-dict [data-dict-word] { cursor: help; }
body.has-sheet .choice-grid--de .choice:disabled, body.dict-on .choice-grid--de .choice:disabled { pointer-events: none; }
.has-dict [data-dict-word] { text-decoration: underline dotted; text-underline-offset: .2em; }
.dict__chip--auto { background: var(--surface-2); font-weight: 700; border: 1px dashed var(--line-strong, var(--line)); }
.dict__mm { align-self: center; }
.dict__ex { display: grid; gap: .15rem; justify-items: start; }
.dict__tr-btn { min-height: 0; padding: .1rem .5rem; font-size: .85rem; }
.dict__example-tr { margin: 0; }
.progress__bar.is-full { background: var(--bad, #E5484D); }
.text-bad { color: var(--bad-ink, var(--bad)); }
/* After an answer (German): listen to the question's German. */
.feedback__speech { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 0; font-weight: 700; }
.feedback .feedback__speech .btn { flex: 0 0 auto; width: auto; min-width: 0; padding: .35rem .8rem; }
.feedback__speech > span { flex: 1; min-width: 0; }

/* Mail under maintenance (admin panel): closed choices and buttons carry a "Bakımda" tag. */
.maint-tag { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; padding: .1rem .45rem; vertical-align: middle; }
.maint-tag .icon { width: .9em; height: .9em; }
.btn .maint-tag { margin-right: .4rem; }
.btn.is-maint, .btn[disabled] .maint-tag { opacity: 1; }
.auth-choice.is-closed { opacity: .7; cursor: not-allowed; }
.auth-choice.is-closed .maint-tag { margin-left: auto; flex: 0 0 auto; }
.notice { display: flex; gap: .5rem; align-items: flex-start; margin: 0; padding: .7rem .85rem; border-radius: var(--radius-sm); }
.notice .icon { flex: 0 0 auto; margin-top: .1rem; }
.notice--warn { background: var(--warn-soft, #FFF1DC); color: var(--warn-ink, #9A5800); }

/* ---------- Hub (pages/hub.php, pages/choose.php): one card per subject in its own colour ---------- */
.hub-subjects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.hub-subject { display: flex; flex-direction: column; gap: .8rem; border-top: 6px solid var(--accent, var(--primary)); }
.hub-subject__head { display: flex; align-items: center; gap: .9rem; }
.hub-subject__logo { width: 56px; height: 56px; flex: 0 0 auto; }
.hub-subject__name { margin: 0; }
.hub-subject__head .badge { margin-left: auto; }
.hub-subject--link { color: inherit; text-decoration: none; }
.hub-subject--link:hover, .hub-subject--link:focus-visible { border-color: var(--accent, var(--primary)); }
.hub-subject__go { margin-left: auto; color: var(--accent, var(--primary)); }
/* Subject choice after sign-in: one tall card per subject, tinted with its colour. */
.choose { width: 100%; max-width: 60rem; margin: 0 auto; padding-block: 1.5rem 2.5rem; display: flex; flex-direction: column; gap: 2rem; }
.choose__head { text-align: center; display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.choose__head .h1 { margin: 0; }
.choose__head p { margin: 0; max-width: 34rem; }
.choose__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1.25rem; }
.choose-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--surface); border: 2px solid var(--line); box-shadow: 0 5px 0 var(--edge); color: var(--ink); text-decoration: none; transition: transform .15s, border-color .15s, box-shadow .15s; }
.choose-card:hover, .choose-card:focus-visible { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 8px 0 color-mix(in srgb, var(--accent) 45%, var(--edge)); }
.choose-card:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--edge); }
.choose-card__top { position: relative; display: grid; place-items: center; padding: 1.75rem 1rem; background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .22) 0 2.5rem, transparent 2.5rem), radial-gradient(circle at 85% 85%, rgba(255, 255, 255, .16) 0 3.5rem, transparent 3.5rem), linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); }
.choose-card__tile { display: grid; place-items: center; width: 6rem; height: 6rem; border-radius: 26px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.choose-card__tile img { width: 64px; height: 64px; }
.choose-card__badge { position: absolute; top: .8rem; right: .8rem; }
.choose-card__body { flex: 1; display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.25rem 1.25rem; }
.choose-card__name { margin: 0; }
.choose-card__kicker { font-weight: 800; color: var(--accent); }
:root[data-theme="dark"] .choose-card__kicker { color: color-mix(in srgb, var(--accent) 55%, #fff); }
.choose-card__text { margin: .25rem 0 1rem; line-height: 1.5; }
.choose-card__go { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1rem; border-radius: 14px; background: var(--accent); color: #fff; font-weight: 900; box-shadow: 0 4px 0 color-mix(in srgb, var(--accent) 60%, #000); }
.choose-card__go .icon { width: 1.15rem; height: 1.15rem; transition: transform .15s; }
.choose-card:hover .choose-card__go .icon { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .choose-card, .choose-card__go .icon { transition: none; } .choose-card:hover { transform: none; } }
[data-motion="reduce"] .choose-card, [data-motion="reduce"] .choose-card:hover { transition: none; transform: none; }

/* ---------- Hub home (pages/hub.php): a sample question in the hero, features as a quiet list ---------- */
.hub-demo {
  --accent: var(--primary);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem 1.25rem 1.25rem;
  background: var(--surface);
  border: 2px solid var(--line);
  border-top: 6px solid var(--accent);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--edge);
}

.hub-demo__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}

.hub-demo__title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.15rem;
}

.hub-demo__tabs {
  position: relative;
  display: flex;
  gap: .25rem;
  padding: .2rem;
  border-radius: 999px;
  background: var(--surface-2);
}

.hub-demo__tab {
  position: relative;
  z-index: 1;
  border: 0;
  border-radius: 999px;
  padding: .35rem .85rem;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  font-size: .85rem;
  cursor: pointer;
}

.hub-demo__tab[aria-selected="true"] {
  color: #fff;
}

/* Only one tab: it carries its own colour. */
.hub-demo__tabs:not(:has(.hub-demo__pill)) .hub-demo__tab[aria-selected="true"] {
  background: var(--accent);
}

.hub-demo__pill {
  position: absolute;
  top: .2rem;
  bottom: .2rem;
  left: 0;
  border-radius: 999px;
  transition: transform .35s cubic-bezier(.3, 1.3, .5, 1), width .35s cubic-bezier(.3, 1.3, .5, 1), background-color .35s;
}

.hub-demo {
  transition: border-top-color .35s;
}

::view-transition-group(hub-demo-visual),
::view-transition-group(hub-demo-ask),
::view-transition-group(hub-demo-choices) {
  animation-duration: .38s;
  animation-timing-function: cubic-bezier(.3, 1.1, .5, 1);
}

.hub-demo__tab:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.hub-demo__stage {
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.hub-demo__plane {
  width: 100%;
  max-width: 20rem;
  margin: 0 auto;
}

.hub-demo__plane .plane-wrap {
  max-width: none;
}

.hub-demo__word {
  flex: 1;
  justify-content: center;
  padding-block: 1.6rem;
}

.hub-demo__word .de-word__de {
  font-size: clamp(2rem, 7vw, 3rem);
}

.hub-demo__ask {
  margin: 0;
  font-weight: 800;
  text-align: center;
}

.hub-demo__choices .choice {
  min-height: 3.2rem;
  font-family: var(--font-head);
  font-size: 1.05rem;
}

.hub-demo__foot {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 2.4rem;
}

.hub-demo__note {
  flex: 1;
  margin: 0;
  font-size: .9rem;
  color: var(--muted);
}

.hub-demo__note b {
  color: var(--bad);
}

.hub-demo__note.is-right b {
  color: var(--good);
}

.hub-demo__next {
  flex: none;
}

.hub-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 1.5rem 2.5rem;
}

.hub-feature {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}

.hub-feature__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 14px;
  background: var(--primary-soft);
  color: var(--primary);
}

.hub-feature__icon .icon {
  width: 1.35rem;
  height: 1.35rem;
}

.hub-feature .h3 {
  margin: 0 0 .2rem;
}

.hub-feature p {
  margin: 0;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .hub-demo .choice.is-pop {
    animation: none;
  }
}

[data-motion="reduce"] .hub-demo .choice.is-pop {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .hub-demo,
  .hub-demo__pill {
    transition: none;
  }
}

[data-motion="reduce"] .hub-demo,
[data-motion="reduce"] .hub-demo__pill {
  transition: none;
}

/* Admin panel → Puanlar: one card per question type. */
.admin-scoring { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); gap: 1rem; }
.admin-scoring__type.is-custom { border-color: var(--primary); }
.admin-scoring__type.is-off .admin-scoring__fields { opacity: .5; }
.admin-scoring__name { margin: 0; }
.admin-scoring__fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.admin-scoring__fields .field__label { font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.admin-scoring__fields .input { padding-inline: .5rem; text-align: center; }
.admin-scoring__preview { margin: 0; }
@media (max-width: 520px) { .admin-scoring__fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.admin-scoring__type > .admin-row { flex-wrap: nowrap; align-items: flex-start; }
.admin-scoring__type > .admin-row .admin-scoring__name { flex: 1; min-width: 0; }
.admin-scoring__type > .admin-row .switch { flex: none; }

/* Leaderboard and History keep their height while loading: the rank line and the footer stay where they are. */
.lb__me { min-height: 2.1rem; }
.lb__me.is-loading { width: 11rem; background: var(--surface-3); }
.lb__me.is-empty { visibility: hidden; }
[data-lb-body] { min-height: 60dvh; }
[data-history-stage] > .loader { min-height: 100dvh; }

/* =====================================================================
   MOTION SYSTEM (js/motion.js): sliding highlights, shared-element page morphs, high graphics extras.
   The performance level ([data-motion="reduce"]) turns all of it off with the low power rules above.
   ===================================================================== */
:root {
  --mx-fast: 200ms;
  --mx: 300ms;
  --mx-ease: cubic-bezier(.2, .8, .2, 1);
}

[data-motion="high"] {
  --mx-fast: 250ms;
  --mx: 380ms;
}

/* The active highlight on its way from the old tab: a copy under the new tab's text. */
.mx-sliding {
  position: relative;
  isolation: isolate;
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.mx-ind {
  position: absolute;
  inset: 0;
  z-index: -1;
  box-sizing: border-box;
  transform-origin: 0 0;
  pointer-events: none;
}

/* Shared element between two pages: it moves and resizes, old and new pictures blend while it travels. */
::view-transition-group(*) {
  animation-duration: var(--mx);
  animation-timing-function: var(--mx-ease);
}

[data-motion="high"]::view-transition-group(*) {
  animation-timing-function: cubic-bezier(.34, 1.3, .64, 1);
}

::view-transition-old(*):only-child,
::view-transition-new(*):only-child {
  animation-duration: var(--mx-fast);
}

/* Open and close in place: <details> grows to its content. */
details {
  interpolate-size: allow-keywords;
}

details::details-content {
  height: 0;
  overflow: clip;
  transition: height var(--mx) var(--mx-ease), content-visibility var(--mx) allow-discrete;
}

details[open]::details-content {
  height: auto;
}

/* Drop-down menus open from their button. */
.subject-menu,
.under-more__panel {
  transform-origin: top center;
}

@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="reduce"]) .subject-menu {
    animation: mx-drop var(--mx-fast) var(--mx-ease);
  }

  :root:not([data-motion="reduce"]) .under-more.is-open .under-more__panel {
    animation: mx-rise var(--mx-fast) var(--mx-ease);
  }
}

@keyframes mx-drop {
  from { opacity: 0; transform: translateY(-6px) scale(.96); clip-path: inset(0 0 60% 0 round 12px); }
  to { clip-path: inset(0 0 0 0 round 12px); }
}

@keyframes mx-rise {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
}

/* High graphics: cards lean toward the pointer with a soft glare; modals blur what is behind them. */
.is-tilt {
  position: relative;
  transition: transform .12s ease-out;
  will-change: transform;
}

[data-motion="high"] .is-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx-gx, 50%) var(--mx-gy, 50%), rgba(255, 255, 255, .22), transparent 55%);
  mix-blend-mode: soft-light;
}

[data-motion="high"] .modal__backdrop {
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  backdrop-filter: blur(6px) saturate(1.1);
}

@media (prefers-reduced-motion: reduce) {
  details::details-content { transition: none; }
}

/* High graphics: a right answer sends a ring of light around its choice. */
@media (prefers-reduced-motion: no-preference) {
  [data-motion="high"] .choice.is-correct {
    animation: m-bump .5s ease-out, mx-glow .9s ease-out;
  }
}

@keyframes mx-glow {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 70%, transparent), 0 var(--depth) 0 var(--btn-edge); }
  100% { box-shadow: 0 0 0 18px transparent, 0 var(--depth) 0 var(--btn-edge); }
}

[data-motion="high"] [data-bg-scene].is-on .bg-scene__layer {
  scale: 1.05;
  transition: translate .6s cubic-bezier(.2, .8, .2, 1);
}

/* Progress on lesson cards fills up as the page opens. */
@media (prefers-reduced-motion: no-preference) {
  .module-card .progress__bar,
  .mastery-card .progress__bar {
    animation: mx-fill .8s var(--spring) .15s backwards;
  }
}

@keyframes mx-fill {
  from { width: 0; }
}

/* For one measurement and the slide itself: the items jump to their end state instead of fading (js/motion.js). */
.mx-now,
.mx-now * {
  transition: none !important;
}