:root {
  /* "only light" also forbids the browser from generating its own dark
     version, which plain "light" does not. Chrome and Samsung Internet
     both force dark on web pages otherwise. */
  color-scheme: only light;
  --green: #58cc02;
  --green-dark: #58a700;
  --green-light: #d7ffb8;
  --green-pale: #eefbe4;
  --blue: #1cb0f6;
  --blue-dark: #1899d6;
  --blue-light: #ddf4ff;
  --blue-border: #84d8ff;
  --red: #ff4b4b;
  --red-dark: #ea2b2b;
  --red-light: #ffdfe0;
  --yellow: #ffc800;
  --yellow-dark: #e5b400;
  --yellow-light: #fff3c4;
  --orange: #ff9600;
  --orange-dark: #e08500;
  --orange-light: #ffe8c9;
  --purple: #ce82ff;
  --purple-dark: #a568cc;
  --purple-light: #f3e5ff;
  --teal: #2bc4b3;
  --teal-dark: #1fa595;
  --teal-light: #d8f7f2;
  --pink: #ff86d0;
  --pink-dark: #e06db2;
  --pink-light: #ffe1f3;
  --eel: #4b4b4b;
  --wolf: #777777;
  --hare: #afafaf;
  --swan: #e5e5e5;
  --polar: #f7f7f7;
  --snow: #ffffff;
  --font: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --radius: 16px;
  --sidebar-w: 256px;
  --rail-w: 368px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 700;
  color: var(--eel);
  background: var(--snow);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--blue); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue-border); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- layout ---------- */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--rail-w);
  min-height: 100vh;
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 2px solid var(--swan);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.logo {
  display: block;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--green);
  padding: 8px 12px 20px;
  text-transform: lowercase;
}
.nav { display: flex; flex-direction: column; gap: 6px; }
.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 14px;
  border: 2px solid transparent;
  border-radius: 12px;
  color: var(--wolf);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: background .15s;
}
.nav-item:hover { background: var(--polar); }
.nav-item.active { color: var(--blue); background: var(--blue-light); border-color: var(--blue-border); }
.nav-icon { width: 32px; height: 32px; display: grid; place-items: center; font-size: 24px; }
.nav-icon svg { width: 30px; height: 30px; }
.nav-admin { margin-top: auto; color: var(--hare); font-size: 13px; padding: 12px 14px; letter-spacing: .5px; }
.nav-admin:hover { color: var(--wolf); }

.main { padding: 32px 24px 96px; }
.page { max-width: 640px; margin: 0 auto; }

.rail { padding: 32px 24px 32px 0; }
.rail-inner { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; }

.topbar { display: none; }
.tabbar { display: none; }

@media (max-width: 1120px) {
  .app { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .rail { display: none; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; }
  .topbar {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 20;
    height: calc(60px + env(safe-area-inset-top, 0px));
    background: var(--snow);
    border-bottom: 2px solid var(--swan);
    align-items: center;
    justify-content: space-around;
    padding: env(safe-area-inset-top, 0px) 8px 0;
  }
  .tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    height: calc(68px + env(safe-area-inset-bottom, 0px));
    background: var(--snow);
    border-top: 2px solid var(--swan);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .tab-item {
    flex: 1;
    display: grid;
    place-items: center;
    border-radius: 12px;
    margin: 6px 4px;
    border: 2px solid transparent;
  }
  .tab-item.active { background: var(--blue-light); border-color: var(--blue-border); }
  .tab-item svg { width: 30px; height: 30px; }
  .main { padding: 16px 16px calc(100px + env(safe-area-inset-bottom, 0px)); }
}

.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 800;
}
.stat-chip .ico { font-size: 22px; line-height: 1; }
.stat-chip.streak { color: var(--orange); }
.stat-chip.coins { color: var(--yellow-dark); }
.stat-chip.hearts { color: var(--red); }
.stat-chip.checks { color: var(--green-dark); }
.stat-chip.dim { color: var(--hare); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 0 22px;
  border-radius: var(--radius);
  border: 2px solid transparent;
  border-bottom-width: 2px;
  background: var(--green);
  color: var(--snow);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 4px 0 var(--green-dark);
  transition: filter .12s, transform .08s, box-shadow .08s;
  user-select: none;
  white-space: nowrap;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--green-dark); }
.btn:disabled { background: var(--swan); color: var(--hare); box-shadow: 0 4px 0 #cfcfcf; cursor: not-allowed; filter: none; transform: none; }
.btn.block { width: 100%; }
.btn.sm { min-height: 40px; padding: 0 14px; font-size: 13px; }
.btn.blue { background: var(--blue); box-shadow: 0 4px 0 var(--blue-dark); }
.btn.blue:active { box-shadow: none; }
.btn.red { background: var(--red); box-shadow: 0 4px 0 var(--red-dark); }
.btn.red:active { box-shadow: none; }
.btn.orange { background: var(--orange); box-shadow: 0 4px 0 var(--orange-dark); }
.btn.orange:active { box-shadow: none; }
.btn.ghost {
  background: var(--snow);
  color: var(--blue);
  border-color: var(--swan);
  box-shadow: 0 4px 0 var(--swan);
}
.btn.ghost:hover { background: var(--polar); filter: none; }
.btn.ghost:active { box-shadow: none; }
.btn.ghost.grey { color: var(--wolf); }
.btn.ghost.danger { color: var(--red); }
.btn.white { background: var(--snow); color: var(--unit, var(--green)); box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.btn.white:active { box-shadow: none; }
.btn.outline-white { background: transparent; color: var(--snow); border-color: rgba(255,255,255,.55); box-shadow: 0 4px 0 rgba(255,255,255,.35); }
.btn.outline-white:active { box-shadow: none; }
.btn.link { background: none; box-shadow: none; color: var(--blue); padding: 0 8px; min-height: 40px; }
.btn.link:active { transform: none; }
.icon-btn {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 2px solid var(--swan);
  background: var(--snow);
  display: inline-grid;
  place-items: center;
  font-size: 20px;
  box-shadow: 0 3px 0 var(--swan);
  transition: transform .08s, box-shadow .08s;
}
.icon-btn:active { transform: translateY(3px); box-shadow: none; }
.icon-btn.solid { background: var(--blue); border-color: var(--blue); color: var(--snow); box-shadow: 0 3px 0 var(--blue-dark); }
.icon-btn.sm { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
.icon-btn:disabled { opacity: .4; cursor: default; }
.icon-btn.playing { animation: pulse .6s infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.08); } }

/* ---------- cards ---------- */
.card {
  border: 2px solid var(--swan);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--snow);
}
.card + .card { margin-top: 16px; }
.card-title { font-size: 18px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-title .more { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--blue); }
.eyebrow { font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--hare); font-weight: 800; }
.muted { color: var(--wolf); }
.faint { color: var(--hare); }
.page-title { font-size: 28px; font-weight: 800; margin-bottom: 6px; }
.page-sub { color: var(--wolf); margin-bottom: 20px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 12px; }

.bar {
  height: 14px;
  background: var(--swan);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--green);
  border-radius: 999px;
  transition: width .6s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.bar > i::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px; top: 3px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
}
.bar.gold > i { background: var(--yellow); }
.bar.on-color { background: rgba(0,0,0,.2); }
.bar.on-color > i { background: var(--snow); }
.bar.on-color > i::after { background: rgba(0,0,0,.08); }
.bar.thin { height: 10px; }

/* ---------- rail widgets ---------- */
.week {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}
.week-day { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--hare); text-transform: uppercase; }
.week-dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--polar);
  border: 2px solid var(--swan);
  display: grid;
  place-items: center;
  font-size: 15px;
}
.week-dot.done { background: var(--orange); border-color: var(--orange); }
.week-dot.today { border-color: var(--orange); }
.ring { position: relative; width: 84px; height: 84px; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring .ring-txt { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 800; }
.big-num { font-size: 26px; font-weight: 900; line-height: 1; }
.hearts-row { display: flex; flex-wrap: wrap; gap: 4px; font-size: 20px; }
.hearts-row .dim { opacity: .25; filter: grayscale(1); }
.rank-ladder { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.rank-step { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--hare); }
.rank-step.done { color: var(--eel); }
.rank-step.current { color: var(--green-dark); font-weight: 900; }
.rank-step .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--swan); }
.rank-step.done .dot { background: var(--green); }
.rank-step.current .dot { background: var(--green); box-shadow: 0 0 0 4px var(--green-light); }

/* ---------- learn: units & path ---------- */
.quick-card {
  border: 2px solid var(--swan);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}
.quick-card .bolt {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--orange-light);
  display: grid;
  place-items: center;
  font-size: 30px;
  flex: none;
}
.quick-card h3 { font-size: 18px; }
.quick-card .desc { color: var(--wolf); font-size: 14px; }
.quick-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.chip {
  border: 2px solid var(--swan);
  border-radius: 12px;
  background: var(--snow);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--wolf);
  box-shadow: 0 3px 0 var(--swan);
}
.chip:active { transform: translateY(3px); box-shadow: none; }
.chip.orange { color: var(--orange); }
.chip.active { color: var(--blue); background: var(--blue-light); border-color: var(--blue-border); box-shadow: 0 3px 0 var(--blue-border); }

.unit {
  --unit: var(--green);
  --unit-dark: var(--green-dark);
  --unit-light: var(--green-light);
  margin-top: 28px;
}
.unit-banner {
  background: var(--unit);
  color: var(--snow);
  border-radius: var(--radius);
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  box-shadow: 0 4px 0 var(--unit-dark);
}
.unit-banner .eyebrow { color: rgba(255,255,255,.8); }
.unit-banner h2 { font-size: 22px; margin-top: 2px; }
.unit-banner .sub { color: rgba(255,255,255,.85); font-size: 14px; margin-top: 4px; }
.unit-banner .btn { flex: none; }

.path {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 62px 0 8px;
  gap: 48px;
}
.path { --zig: 46px; }
@media (max-width: 560px) { .path { --zig: 28px; } }
.node-wrap {
  position: relative;
  transform: translateX(calc(var(--xo, 0) * var(--zig)));
}
.cloud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.cloud { --cloud-scale: 1; --cloud-font: 1; }
.cloud-word {
  position: absolute;
  left: calc(50% + var(--cx) * var(--cloud-scale));
  top: calc(50% + var(--cy));
  font-size: calc(var(--fs) * var(--cloud-font));
  transform: translate(0, -50%);
  white-space: nowrap;
  color: #9a9a9a;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1;
  animation: cloud-in .6s ease-out both;
}
.cloud-word.l { transform: translate(-100%, -50%); }
@media (max-width: 560px) { .cloud { --cloud-scale: .85; --cloud-font: .9; } }
@keyframes cloud-in { from { opacity: 0; } }
.node-wrap .node, .node-wrap .ring-svg, .node-wrap .start-bubble, .node-wrap .node-label { position: relative; z-index: 1; }
.node-wrap .ring-svg, .node-wrap .start-bubble, .node-wrap .node-label { position: absolute; }
.main { overflow-x: hidden; }
@media (max-width: 1400px) { .cloud-word[data-col="2"] { display: none; } }
@media (max-width: 560px) { .cloud-word[data-col="1"] { display: none; } }
.node {
  width: 80px; height: 80px;
  border-radius: 50%;
  border: none;
  background: var(--unit);
  box-shadow: 0 8px 0 var(--unit-dark);
  display: grid;
  place-items: center;
  font-size: 36px;
  line-height: 1;
  position: relative;
  transition: transform .08s, box-shadow .08s, filter .15s;
  padding: 0;
}
.node:hover { filter: brightness(1.05); }
.node:active { transform: translateY(8px); box-shadow: 0 0 0 var(--unit-dark); }
.node .ico { position: relative; z-index: 1; filter: drop-shadow(0 2px 0 rgba(0,0,0,.18)); }
.node.idle { background: var(--swan); box-shadow: 0 8px 0 var(--hare); }
.node.idle .ico { filter: grayscale(1) opacity(.55); }
.node.gold { background: var(--yellow); box-shadow: 0 8px 0 var(--yellow-dark); }
.node.cracked { background: color-mix(in srgb, var(--unit) 70%, #9a9a9a); box-shadow: 0 8px 0 color-mix(in srgb, var(--unit-dark) 70%, #6f6f6f); }
.node.practice {
  border-radius: 22px;
  width: 72px; height: 72px;
  background: var(--snow);
  border: 3px solid var(--unit);
  box-shadow: 0 6px 0 var(--unit);
  font-size: 30px;
}
.node.practice:active { transform: translateY(6px); box-shadow: none; }
.node.practice.idle { border-color: var(--swan); box-shadow: 0 6px 0 var(--swan); }
.crack {
  position: absolute; inset: 0;
  pointer-events: none;
}
.crown {
  position: absolute;
  right: -6px; bottom: -4px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--snow);
  border: 2px solid var(--yellow-dark);
  display: grid;
  place-items: center;
  font-size: 16px;
  z-index: 2;
}
.ring-svg .fill.growing { transition: stroke-dashoffset 1.1s cubic-bezier(.22, 1, .36, 1) .25s; }
@keyframes node-grew {
  0% { transform: scale(1); }
  45% { transform: scale(1.09); }
  100% { transform: scale(1); }
}
.node.grew { animation: node-grew .5s ease .95s; }

.node-burst { position: absolute; left: 50%; top: 40px; width: 0; height: 0; pointer-events: none; z-index: 3; }
.node-burst i {
  position: absolute; left: 0; top: 0;
  width: 9px; height: 9px; margin: -4px 0 0 -4px;
  border-radius: 2px;
  animation: node-burst .9s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes node-burst {
  0% { transform: translate(0, 0) scale(.3) rotate(0deg); opacity: 1; }
  65% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); opacity: 0; }
}

.ring-svg {
  position: absolute;
  left: 50%; top: 50%;
  width: 102px; height: 102px;
  transform: translate(-50%, -50%) rotate(-90deg);
  pointer-events: none;
}
.ring-svg .track { fill: none; stroke: var(--swan); stroke-width: 8; }
.ring-svg .fill { fill: none; stroke: var(--unit); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .6s; }
.node-wrap.has-ring { padding: 11px; }
.start-bubble {
  position: absolute;
  left: 50%;
  top: -52px;
  transform: translateX(-50%);
  background: var(--snow);
  border: 2px solid var(--swan);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--unit);
  white-space: nowrap;
  animation: bob 1.4s ease-in-out infinite;
  z-index: 3;
  pointer-events: none;
}
.start-bubble::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -8px;
  width: 12px; height: 12px;
  background: var(--snow);
  border-right: 2px solid var(--swan);
  border-bottom: 2px solid var(--swan);
  transform: translateX(-50%) rotate(45deg);
}
@keyframes bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-6px); } }
.node-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--wolf);
  white-space: nowrap;
  text-align: center;
}
.node-wrap.has-ring .node-label { margin-top: 2px; }

.popover {
  width: 100%;
  background: var(--unit);
  color: var(--snow);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 4px 0 var(--unit-dark);
  position: relative;
  animation: pop .18s ease-out;
  margin-top: 6px;
}
.popover.idle { background: var(--wolf); box-shadow: 0 4px 0 #5a5a5a; }
.popover { scroll-margin: 18px 0; }
@media (max-width: 760px) { .popover { scroll-margin-top: 78px; scroll-margin-bottom: 88px; } }
.popover.gold { background: var(--yellow); box-shadow: 0 4px 0 var(--yellow-dark); }
.popover::before {
  content: '';
  position: absolute;
  top: -8px;
  left: calc(50% + var(--xo, 0) * var(--zig, 46px));
  width: 18px; height: 18px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 3px;
}
.popover h3 { font-size: 20px; }
.popover .desc { color: rgba(255,255,255,.9); margin-top: 4px; }
.popover .meta { font-size: 14px; color: rgba(255,255,255,.85); margin: 10px 0 8px; }
.popover .actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.popover .actions .btn { flex: 1; }
.popover .bar { margin-top: 8px; }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- session ---------- */
.session {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--snow);
  display: flex;
  flex-direction: column;
  animation: fade .2s;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.session-top {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 20px 12px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.session-top .close {
  border: none;
  background: none;
  color: var(--hare);
  font-size: 26px;
  width: 40px; height: 40px;
  border-radius: 10px;
}
.session-top .close:hover { background: var(--polar); color: var(--wolf); }
.session-top .bar { flex: 1; height: 16px; }
.session-top .stat-chip { font-size: 18px; }
.session-body { flex: 1; overflow-y: auto; display: flex; justify-content: center; }
.session-card { width: 100%; max-width: 620px; padding: 16px 20px 40px; }
.session-card h1 { font-size: 26px; margin: 8px 0 22px; }
.prompt { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--unit, var(--green));
  box-shadow: 0 5px 0 var(--unit-dark, var(--green-dark));
  display: grid;
  place-items: center;
  font-size: 36px;
  flex: none;
}
.bubble {
  position: relative;
  border: 2px solid var(--swan);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}
.bubble::before {
  content: '';
  position: absolute;
  left: -9px; top: 28px;
  width: 14px; height: 14px;
  background: var(--snow);
  border-left: 2px solid var(--swan);
  border-bottom: 2px solid var(--swan);
  transform: rotate(45deg);
}
.bubble .hint { display: block; font-size: 13px; color: var(--hare); text-transform: uppercase; letter-spacing: .8px; margin-top: 4px; }
.forms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.form-slot {
  border: 2px solid var(--swan);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 62px;
  background: var(--polar);
}
.form-slot .lab { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--hare); }
.form-slot .val { font-size: 17px; font-weight: 800; margin-top: 2px; color: var(--eel); min-height: 22px; }
.form-slot.current { border-color: var(--blue); background: var(--blue-light); }
.form-slot.current .lab { color: var(--blue-dark); }
.form-slot.done { background: var(--snow); }
.form-slot.done .val { color: var(--green-dark); }
.form-slot.failed .val { color: var(--red-dark); }
.form-slot .val.empty { color: var(--hare); }
.answer {
  width: 100%;
  border: 2px solid var(--swan);
  border-radius: 14px;
  background: var(--polar);
  padding: 16px 18px;
  font-size: 22px;
  font-weight: 700;
  outline: none;
  transition: border-color .15s;
}
.answer:focus { border-color: var(--blue); background: var(--snow); }
.answer:disabled { color: var(--hare); }
.answer.hint-full::placeholder { color: var(--blue); opacity: .75; }
.answer.hint-three::placeholder, .answer.hint-one::placeholder { color: var(--blue-dark); opacity: .6; letter-spacing: 1px; }
.prompt .prompt-speak { margin-left: auto; flex: none; }
.answer.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.answer-hint { margin-top: 10px; color: var(--hare); font-size: 14px; }

.session-footer {
  border-top: 2px solid var(--swan);
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  transition: background .2s;
}
.session-footer.correct { background: var(--green-light); border-top-color: var(--green-light); }
.session-footer.almost { background: var(--yellow-light); border-top-color: var(--yellow-light); }
.session-footer.wrong { background: var(--red-light); border-top-color: var(--red-light); }
.footer-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.feedback { display: flex; align-items: flex-start; gap: 14px; min-width: 0; flex: 1; }
.feedback .mark {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--snow);
  display: grid;
  place-items: center;
  font-size: 28px;
  flex: none;
}
.feedback h3 { font-size: 22px; }
.correct .feedback h3, .correct .feedback .mark { color: var(--green-dark); }
.almost .feedback h3, .almost .feedback .mark { color: var(--orange-dark); }
.wrong .feedback h3, .wrong .feedback .mark { color: var(--red-dark); }
.feedback .detail { margin-top: 4px; font-size: 17px; }
.correct .feedback .detail { color: var(--green-dark); }
.almost .feedback .detail { color: var(--orange-dark); }
.wrong .feedback .detail { color: var(--red-dark); }
.feedback .detail .ans { font-weight: 900; font-size: 20px; }
.feedback .detail .yours { opacity: .75; font-size: 15px; margin-top: 2px; }
.feedback .speak { display: inline-flex; gap: 6px; margin-top: 8px; }
.feedback .icon-btn { border-color: transparent; box-shadow: 0 3px 0 rgba(0,0,0,.1); }
.hl-miss { background: rgba(255,200,0,.5); border-radius: 4px; padding: 0 2px; }
.hl-extra { background: rgba(255,75,75,.35); border-radius: 4px; padding: 0 2px; text-decoration: line-through; }
.hl-gap { display: inline-block; width: 8px; border-bottom: 3px solid var(--orange); margin: 0 1px; }
.footer-actions { display: flex; gap: 12px; }
.footer-actions .btn { min-width: 150px; }
@media (max-width: 640px) {
  .footer-inner { flex-direction: column; align-items: stretch; }
  .footer-actions { width: 100%; }
  .footer-actions .btn { flex: 1; min-width: 0; }
  .forms { grid-template-columns: 1fr; }
  .form-slot { display: flex; align-items: center; justify-content: space-between; min-height: 0; padding: 8px 12px; }
  .form-slot .val { margin: 0; }
  .session-card h1 { font-size: 22px; }
  .bubble { font-size: 20px; }
}

/* ---------- finish ---------- */
.finish { text-align: center; padding-top: 24px; }
.finish .hero { font-size: 80px; line-height: 1; margin-bottom: 12px; animation: pop .4s cubic-bezier(.2,1.4,.4,1); }
.finish h1 { font-size: 30px; color: var(--yellow-dark); margin: 0 0 6px; }
.finish h1.fail { color: var(--red-dark); }
.finish .sub { color: var(--wolf); margin-bottom: 24px; font-size: 17px; }
.tiles { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.tile {
  --c: var(--yellow);
  --cd: var(--yellow-dark);
  min-width: 118px;
  border: 2px solid var(--c);
  border-radius: 14px;
  overflow: hidden;
  background: var(--snow);
  animation: rise .5s both;
  /* the clock tile can carry an extra line, and the rest should centre beside it
     rather than sit high in a taller box */
  display: flex;
  flex-direction: column;
}
.tile:nth-child(2) { animation-delay: .1s; } .tile:nth-child(3) { animation-delay: .2s; } .tile:nth-child(4) { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tile .lab { background: var(--c); color: var(--snow); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 6px 8px; }
.tile .val { flex: 1; padding: 12px 8px 14px; font-size: 22px; font-weight: 900; color: var(--cd); display: flex; align-items: center; justify-content: center; gap: 6px; }
.tile .val.stacked { flex-direction: column; gap: 3px; padding-top: 8px; }
.time-main { display: flex; align-items: center; gap: 6px; }
.time-delta {
  /* hidden rather than absent, so it takes its space before it appears */
  visibility: hidden;
  opacity: 0;
  transform: translateY(5px) scale(.8);
  transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  padding: 3px 9px;
  border-radius: 999px;
  border: 2px solid transparent;
}
.time-delta.in { visibility: visible; opacity: 1; transform: none; }
.time-delta.better { background: var(--green); color: var(--snow); }
.time-delta.worse { background: var(--snow); color: var(--wolf); border-color: var(--swan); }
.tile.blue { --c: var(--blue); --cd: var(--blue-dark); }
.tile.green { --c: var(--green); --cd: var(--green-dark); }
.tile.orange { --c: var(--orange); --cd: var(--orange-dark); }
.tile.red { --c: var(--red); --cd: var(--red-dark); }
.finish .card { text-align: left; margin-top: 14px; }
.finish .card .card-title { margin-bottom: 8px; }
.boost-row { display: grid; grid-template-columns: 1fr 120px auto; gap: 12px; align-items: center; padding: 8px 0; }
.boost-row .delta { color: var(--green-dark); font-weight: 900; }
.rankup {
  background: var(--purple-light);
  border: 2px solid var(--purple);
  color: var(--purple-dark);
  border-radius: 14px;
  padding: 14px 18px;
  margin-top: 14px;
  font-size: 17px;
}
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 60; }
.confetti i {
  position: absolute;
  top: -12px;
  width: 10px; height: 14px;
  border-radius: 3px;
  animation: drop 2.8s linear forwards;
}
@keyframes drop { to { transform: translateY(110vh) rotate(720deg); opacity: .6; } }

/* ---------- words ---------- */
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; position: sticky; top: 0; background: var(--snow); padding: 6px 0 10px; z-index: 5; }
.search {
  flex: 1;
  min-width: 180px;
  border: 2px solid var(--swan);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--polar);
  outline: none;
}
.search:focus { border-color: var(--blue); background: var(--snow); }
.word-list { display: flex; flex-direction: column; gap: 10px; }
.word-row {
  border: 2px solid var(--swan);
  border-radius: 14px;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.word-row .sk { font-size: 18px; font-weight: 800; }
.word-row .forms-line { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.form-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 2px solid var(--swan);
  border-radius: 999px;
  padding: 3px 4px 3px 10px;
  font-size: 14px;
  background: var(--polar);
}
.form-pill .k { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--hare); }
.form-pill .icon-btn { width: 28px; height: 28px; font-size: 13px; border-radius: 50%; box-shadow: none; border-color: transparent; background: var(--snow); }
.word-row .tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tag { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: var(--wolf); background: var(--polar); border-radius: 8px; padding: 2px 8px; }
.tag.strict { color: var(--orange-dark); background: var(--orange-light); }
.know { text-align: right; min-width: 110px; }
.know .bar { height: 10px; width: 110px; margin-left: auto; }
.know .bar > i { background: var(--k, var(--green)); }
.know .pct { font-weight: 900; font-size: 16px; color: var(--k, var(--green)); }
.know .small { font-size: 12px; color: var(--hare); }
@media (max-width: 480px) {
  .word-row { grid-template-columns: 1fr; }
  .know { text-align: left; }
  .know .bar { margin-left: 0; }
}

/* ---------- store ---------- */
.coins-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px solid var(--yellow);
  background: var(--yellow-light);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.coins-hero .big-num { color: var(--yellow-dark); font-size: 34px; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.reward {
  border: 2px solid var(--swan);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.reward img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  padding: 10px;
  background: radial-gradient(120% 96% at 50% 6%, #ffffff 0%, #f6faf2 52%, #e9f2e2 100%);
  border-bottom: 2px solid var(--swan);
}
.reward .noimg {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 96% at 50% 6%, #ffffff 0%, #f6faf2 52%, #e9f2e2 100%);
  border-bottom: 2px solid var(--swan);
  font-size: 40px;
}
.reward .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.reward h4 { font-size: 16px; }
.reward .desc { color: var(--wolf); font-size: 13px; flex: 1; }
.reward .price { color: var(--yellow-dark); font-weight: 900; font-size: 18px; }
.pending-list { display: flex; flex-direction: column; gap: 8px; }
.pending-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 2px solid var(--polar); }
.pending-row:last-child { border-bottom: 0; }
.status { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; padding: 3px 9px; border-radius: 8px; background: var(--orange-light); color: var(--orange-dark); }
.status.done { background: var(--green-light); color: var(--green-dark); }

/* ---------- profile ---------- */
.profile-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.avatar-big {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--green);
  color: var(--snow);
  display: grid;
  place-items: center;
  font-size: 44px;
  font-weight: 900;
  box-shadow: 0 6px 0 var(--green-dark);
}
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 16px; }
.stat-box {
  border: 2px solid var(--swan);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.stat-box .ico { font-size: 28px; }
.stat-box .v { font-size: 22px; font-weight: 900; line-height: 1; }
.stat-box .l { font-size: 13px; color: var(--wolf); margin-top: 3px; }
.heatmap { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 14px); gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.heatmap i { width: 14px; height: 14px; border-radius: 3px; background: var(--polar); }
.heatmap i.l1 { background: #c6f0a3; } .heatmap i.l2 { background: #8fdc4c; } .heatmap i.l3 { background: var(--green); } .heatmap i.l4 { background: var(--green-dark); }
.heatmap i.future { background: transparent; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--wolf); margin-top: 10px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.stack-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: var(--polar); }
.stack-bar i { display: block; height: 100%; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; color: var(--hare); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; padding: 6px 4px; border-bottom: 2px solid var(--swan); }
.tbl td { padding: 8px 4px; border-bottom: 2px solid var(--polar); }
.tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl th.num { text-align: right; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 2px solid var(--polar); }
.setting-row:last-child { border-bottom: 0; }
.setting-row .lbl { font-weight: 800; }
.setting-row .hint { font-size: 13px; color: var(--hare); font-weight: 700; }
.select {
  border: 2px solid var(--swan);
  border-radius: 12px;
  padding: 8px 12px;
  background: var(--snow);
  font-weight: 800;
}
.toggle {
  width: 54px; height: 30px;
  border-radius: 999px;
  border: none;
  background: var(--swan);
  position: relative;
  transition: background .15s;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--snow);
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: left .15s;
}
.toggle.on { background: var(--green); }
.toggle.on::after { left: 27px; }

/* ---------- scroll indicator ---------- */
.scroll-rail {
  position: fixed;
  right: 5px;
  top: calc(env(safe-area-inset-top, 0px) + 74px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
  width: 4px;
  border-radius: 999px;
  background: var(--swan);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 15;
  display: none;
}
.scroll-rail.visible { display: block; opacity: .5; }
.scroll-rail.fading { opacity: .16; }
.scroll-rail > i {
  position: absolute;
  left: 0;
  width: 100%;
  min-height: 36px;
  border-radius: 999px;
  background: var(--hare);
  transition: transform .08s linear;
}
@media (min-width: 761px) { .scroll-rail { display: none !important; } }

/* ---------- language switcher ---------- */
.lang-chip {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 34px;
  border: 2px solid var(--swan);
  border-radius: 10px;
  background: var(--snow);
  font-size: 20px;
  line-height: 1;
  padding: 0;
  flex: none;
}
.lang-chip:active { transform: translateY(2px); }
.lang-wide {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 2px solid var(--swan);
  border-radius: 12px;
  background: var(--snow);
  font-weight: 800;
  color: var(--eel);
  text-align: left;
}
.lang-wide:hover { background: var(--polar); }
.lang-wide .flag { font-size: 24px; line-height: 1; }
.lang-wide .lang-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.lang-wide .chev { color: var(--hare); }
.lang-list { display: flex; flex-direction: column; gap: 10px; max-height: min(60vh, 460px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lang-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
  width: 100%;
  border: 2px solid var(--swan);
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--snow);
  color: var(--eel);
  font: inherit;
}
.lang-card:hover { background: var(--polar); }
.lang-card.active { border-color: var(--blue-border); background: var(--blue-light); }
.lang-card-flag { font-size: 38px; line-height: 1; flex: none; }
.lang-card-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.lang-card-top { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.lang-active-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  background: var(--blue);
  color: var(--snow);
  border-radius: 6px;
  padding: 1px 7px;
}
.lang-card-rank { font-size: 14px; color: var(--wolf); margin-top: 2px; }
.lang-card-meta { font-size: 13px; color: var(--hare); margin-top: 4px; font-weight: 700; }

/* ---------- auth, leaderboard, avatars ---------- */
body.auth-mode .sidebar, body.auth-mode .rail, body.auth-mode .tabbar, body.auth-mode .topbar { display: none !important; }
body.auth-mode .app { grid-template-columns: 1fr; }
.login-screen {
  min-height: calc(100vh - 64px);
  display: grid;
  place-items: center;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.login-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; text-align: center; }
.login-card h1 { font-size: 34px; color: var(--green); font-weight: 900; }
.login-logo { font-size: 64px; line-height: 1; }
.login-remember { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--wolf); font-size: 15px; }
.login-remember input { width: 20px; height: 20px; }
.login-error { background: var(--red-light); color: var(--red-dark); border-radius: 12px; padding: 10px 14px; font-size: 15px; }
.avatar-chip {
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--green);
  box-shadow: 0 4px 0 var(--green-dark);
  line-height: 1;
}
.avatar-chip.c-green { background: var(--green); box-shadow: 0 4px 0 var(--green-dark); }
.avatar-chip.c-blue { background: var(--blue); box-shadow: 0 4px 0 var(--blue-dark); }
.avatar-chip.c-purple { background: var(--purple); box-shadow: 0 4px 0 var(--purple-dark); }
.avatar-chip.c-orange { background: var(--orange); box-shadow: 0 4px 0 var(--orange-dark); }
.avatar-chip.c-teal { background: var(--teal); box-shadow: 0 4px 0 var(--teal-dark); }
.avatar-chip.c-pink { background: var(--pink); box-shadow: 0 4px 0 var(--pink-dark); }
.avatar-chip.c-red { background: var(--red); box-shadow: 0 4px 0 var(--red-dark); }
.avatar-chip.c-yellow { background: var(--yellow); box-shadow: 0 4px 0 var(--yellow-dark); }
.board { display: flex; flex-direction: column; gap: 8px; }
.board-row {
  display: grid;
  grid-template-columns: 40px 44px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 2px solid var(--swan);
  border-radius: 14px;
  padding: 10px 14px;
}
.board-row.me { background: var(--blue-light); border-color: var(--blue-border); }
.board-row.top { border-color: var(--yellow); }
.board-rank { font-size: 20px; font-weight: 900; color: var(--wolf); text-align: center; }
.board-name { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.board-name .you { font-size: 11px; background: var(--blue); color: var(--snow); border-radius: 6px; padding: 1px 6px; margin-left: 8px; text-transform: uppercase; letter-spacing: .6px; vertical-align: 2px; }
.board-xp { font-weight: 900; color: var(--yellow-dark); white-space: nowrap; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.avatar-pick { height: 44px; border: 2px solid var(--swan); border-radius: 10px; background: var(--snow); font-size: 24px; }
.avatar-pick.active { border-color: var(--blue); background: var(--blue-light); }
.color-row { display: flex; gap: 8px; flex-wrap: wrap; }
.color-pick { width: 32px; height: 32px; border-radius: 50%; border: 3px solid transparent; }
.color-pick.active { border-color: var(--eel); }
.color-pick.c-green { background: var(--green); } .color-pick.c-blue { background: var(--blue); } .color-pick.c-purple { background: var(--purple); }
.color-pick.c-orange { background: var(--orange); } .color-pick.c-teal { background: var(--teal); } .color-pick.c-pink { background: var(--pink); }
.color-pick.c-red { background: var(--red); } .color-pick.c-yellow { background: var(--yellow); }

/* ---------- modal & toast ---------- */
.modal-back {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 80;
  display: grid;
  place-items: center;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px));
  animation: fade .15s;
}
.modal {
  background: var(--snow);
  border-radius: 20px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow: auto;
  padding: 24px;
  animation: pop .2s;
}
.modal.wide { max-width: 640px; }
.modal h2 { font-size: 22px; margin-bottom: 8px; }
.modal .body { color: var(--wolf); margin-bottom: 20px; }
.modal .actions { display: flex; flex-direction: column; gap: 10px; }
.toast-root { position: fixed; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast {
  background: var(--eel);
  color: var(--snow);
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 800;
  animation: pop .2s;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.toast.err { background: var(--red); }
.toast.ok { background: var(--green); }
.empty { text-align: center; color: var(--hare); padding: 30px 10px; }

.error-screen { text-align: center; max-width: 420px; margin: 0 auto; padding: 48px 20px; animation: fade .2s ease; }
.error-screen .error-icon { font-size: 52px; line-height: 1; margin-bottom: 14px; }
.error-screen h2 { margin: 0 0 8px; font-size: 22px; color: var(--eel); }
.error-screen p { margin: 0 0 6px; color: var(--wolf); line-height: 1.5; }
.error-screen .faint { font-size: 14px; }
.error-screen .error-note { margin-top: 12px; color: var(--red); font-weight: 700; font-size: 14px; }
.error-screen .btn { margin-top: 20px; min-width: 180px; }
.error-screen.compact { padding: 24px 12px; }
.error-screen.compact h2 { font-size: 17px; }
.error-screen.compact .error-icon { font-size: 34px; margin-bottom: 8px; }
.error-screen.compact .btn { margin-top: 14px; min-width: 0; padding: 10px 18px; font-size: 15px; }

.setting-pair { display: flex; align-items: center; gap: 10px; }

.puzzle-answer {
  display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
  min-height: 92px; padding: 12px; margin: 18px 0 14px;
  border-radius: 16px; background: var(--polar);
  border: 2px dashed var(--swan);
}
.puzzle-answer.empty::before {
  content: 'Sem klepni dieliky'; color: var(--hare); font-weight: 700; font-size: 14px; align-self: center; margin: auto;
}
.puzzle-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.puzzle-tile {
  padding: 10px 14px; border-radius: 12px; font: inherit; font-weight: 800; font-size: 16px;
  color: var(--eel); background: var(--snow);
  border: 2px solid var(--swan); box-shadow: 0 2px 0 var(--swan);
  cursor: pointer; transition: transform .08s ease;
}
.puzzle-tile:active { transform: translateY(2px); box-shadow: none; }
.puzzle-answer .puzzle-tile { background: var(--polar); border-color: var(--hare); box-shadow: 0 2px 0 var(--hare); }

/* A chemical symbol is one or two letters, so it gets a square the size of a
   periodic-table cell, coloured by the element's family. */
.answer.symbol-input {
  display: block; width: 132px; height: 132px;
  max-width: 132px; padding: 0;
  margin-left: auto; margin-right: auto;
  text-align: center; text-transform: none;
  font-size: 44px; font-weight: 900; letter-spacing: 1px; line-height: 128px;
  border-radius: 18px; border-width: 3px;
  background: var(--sym-bg, var(--polar));
  border-color: var(--sym-ink, var(--swan));
  color: var(--sym-ink, var(--eel));
}
.answer.symbol-input::placeholder { color: var(--sym-ink, var(--hare)); opacity: .35; }

.form-slot.symbol .val {
  font-size: 22px; font-weight: 900; letter-spacing: 1px;
  color: var(--sym-ink, var(--eel));
}

/* the slot being filled holds the answer box itself, so the two stop duplicating */
.form-slot.hosts-input { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.form-slot.hosts-input .answer {
  width: 100%; margin: 0; padding: 0; min-height: 22px;
  border: 0; border-radius: 0; background: transparent;
  font-size: 17px; font-weight: 800; color: var(--eel);
}
.form-slot.hosts-input .answer:focus { outline: none; box-shadow: none; }

/* when that slot is the symbol, the slot itself becomes the periodic-table square */
.form-slot.symbol.hosts-input {
  aspect-ratio: 1 / 1; width: 100%; max-width: 168px; margin: 0 auto;
  align-items: center; justify-content: center;
  background: var(--sym-bg, var(--polar));
  border-color: var(--sym-ink, var(--swan));
  border-width: 3px; border-radius: 18px;
}
.form-slot.symbol.hosts-input .lab { color: var(--sym-ink, var(--hare)); margin-bottom: 4px; }
.form-slot.symbol.hosts-input .answer {
  text-align: center; font-size: 40px; font-weight: 900; letter-spacing: 1px;
  color: var(--sym-ink, var(--eel)); line-height: 1.1;
}
.form-slot.symbol.hosts-input .answer::placeholder { color: var(--sym-ink, var(--hare)); opacity: .35; }

/* the standard periodic-table families */
.sym-alkali      { --sym-bg: #ffd6d6; --sym-ink: #a32020; }
.sym-alkaline    { --sym-bg: #ffe8c9; --sym-ink: #a35c10; }
.sym-transition  { --sym-bg: #ffdce6; --sym-ink: #a32054; }
.sym-post        { --sym-bg: #e2e6ea; --sym-ink: #4a5560; }
.sym-metalloid   { --sym-bg: #e8e6c2; --sym-ink: #6d6714; }
.sym-nonmetal    { --sym-bg: #d6f5d6; --sym-ink: #1f7a30; }
.sym-halogen     { --sym-bg: #fbf3c0; --sym-ink: #8a7508; }
.sym-noble       { --sym-bg: #d3f2f7; --sym-ink: #10707f; }
.sym-lanthanide  { --sym-bg: #f3dcff; --sym-ink: #6b2699; }
.sym-actinide    { --sym-bg: #ffd9ee; --sym-ink: #9c1f66; }
.sym-unknown     { --sym-bg: var(--polar); --sym-ink: var(--wolf); }

.mnemonic {
  display: flex; gap: 8px; align-items: flex-start;
  margin-top: 14px; padding: 10px 12px;
  border-radius: 14px; background: var(--yellow-light, #fff4d6);
  color: var(--eel); font-size: 14px; font-weight: 700; line-height: 1.4;
}
.mnemonic .bulb { font-size: 18px; line-height: 1.2; }
.mnemonic b { font-weight: 900; color: var(--orange-dark, #c26a00); }

/* sits under the lesson's own label, which is itself absolutely placed below the
   circle, so this has to clear both rather than sit in the normal flow */
.node-tag {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 34px;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--polar); color: var(--wolf);
  font-size: 11px; font-weight: 800; white-space: nowrap;
}
.node-wrap.has-ring .node-tag { margin-top: 24px; }
.node-wrap.has-tag { margin-bottom: 26px; }

.setting-pair .select { min-width: 92px; }

.save-warn { margin: 18px 0 4px; padding: 16px; border: 2px solid var(--red); border-radius: 16px; background: #fff4f4; text-align: center; }
.save-warn .save-warn-title { font-weight: 800; color: var(--red-dark); margin-bottom: 6px; }
.save-warn p { margin: 0 0 4px; font-size: 14px; }
.save-warn .btn { margin-top: 12px; }
.empty .big { font-size: 40px; margin-bottom: 8px; }
.loading { text-align: center; color: var(--hare); padding: 40px 0; }