/* ================= app shell ================= */
body.app-body {
  background:
    radial-gradient(600px 400px at 90% -10%, rgba(139, 92, 255, 0.25), transparent 70%),
    radial-gradient(500px 400px at -10% 40%, rgba(255, 77, 141, 0.12), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
#app { max-width: 540px; margin: 0 auto; min-height: 100dvh; position: relative; }

/* ================= map ================= */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + var(--safe-t)) 16px 10px;
  background: rgba(14, 11, 36, 0.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.brand .mascot { width: 40px; }
.stats { display: flex; align-items: center; gap: 6px; }
.stat { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); font-size: 16px; }
.stat b { font-variant-numeric: tabular-nums; }

.map-scroll { overflow-x: clip; padding: 18px 16px calc(60px + var(--safe-b)); }
.greeting { color: var(--muted); font-size: 16px; margin: 2px 4px 18px; }
.greeting b { color: var(--yellow); }

.unit { margin-bottom: 36px; }
.unit-card {
  position: relative; overflow: hidden;
  background: var(--uc);
  color: #1a1030;
  border-radius: var(--r);
  padding: 18px 20px 16px;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--uc) 60%, #000);
}
.unit-card::after {
  content: '{ }'; position: absolute; inset-inline-end: -6px; top: -18px;
  font-family: var(--mono); font-size: 96px; font-weight: 800; opacity: 0.14;
}
.unit-card small { font-weight: 800; letter-spacing: 0.1em; font-size: 12px; opacity: 0.75; }
.unit-card h2 { margin: 2px 0 12px; font-size: 25px; line-height: 1.1; letter-spacing: -0.02em; }
.unit-prog { height: 10px; border-radius: 99px; background: rgba(0, 0, 0, 0.2); overflow: hidden; }
.unit-prog i { display: block; height: 100%; background: #1a1030; border-radius: inherit; transition: width 0.8s; }
.unit-count { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; opacity: 0.8; }
.unit.is-soon .unit-card { filter: saturate(0.5) brightness(0.8); }

.path { display: flex; flex-direction: column; align-items: center; gap: 30px; padding: 56px 0 6px; }
.node-row {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  transform: translateX(var(--off));
  animation: node-in 0.5s calc(var(--i) * 0.08s) both cubic-bezier(0.3, 1.5, 0.5, 1);
}
@keyframes node-in { from { opacity: 0; transform: translateX(var(--off)) scale(0.5); } }
.node {
  --nc: var(--uc);
  position: relative;
  width: 86px; height: 80px; border-radius: 50%;
  background: var(--nc);
  box-shadow: 0 8px 0 color-mix(in srgb, var(--nc) 55%, #000), inset 0 -6px 0 rgba(0, 0, 0, 0.12);
  display: grid; place-items: center;
  transition: transform 0.1s, box-shadow 0.1s;
}
.node:active { transform: translateY(6px); box-shadow: 0 2px 0 color-mix(in srgb, var(--nc) 55%, #000); }
.node-face { font-size: 36px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.2)); }
.node.locked, .node.soon { --nc: #3a3370; }
.node.locked .node-face, .node.soon .node-face { font-size: 26px; opacity: 0.7; }
.node.done { --nc: var(--yellow); }
.node.current::before {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  border: 4px solid var(--uc); opacity: 0.6;
  animation: ring 1.6s ease-out infinite;
}
@keyframes ring { from { transform: scale(0.85); opacity: 0.8; } to { transform: scale(1.25); opacity: 0; } }
.node.just { animation: just 0.8s 0.2s both; }
@keyframes just { 0% { transform: scale(1); } 40% { transform: scale(1.3) rotate(-8deg); } 70% { transform: scale(0.95) rotate(4deg); } }
.node-stars { position: absolute; bottom: -9px; font-size: 14px; letter-spacing: -1px; color: #1a1030; background: var(--yellow); padding: 0 6px; border-radius: 99px; line-height: 1.3; font-weight: 800; }
.node.done ~ .node-label { margin-top: 6px; }
.node-label { font-weight: 700; font-size: 15px; color: var(--muted); }
.node.current ~ .node-label { color: var(--text); }
.start-tag {
  position: absolute; top: -34px;
  background: #fff; color: var(--bg); font-weight: 800; font-size: 13px; letter-spacing: 0.08em;
  padding: 5px 12px; border-radius: 10px;
  animation: tag-bob 1.2s ease-in-out infinite;
}
.start-tag::after { content: ''; position: absolute; inset-inline-start: 50%; bottom: -6px; margin-inline-start: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: #fff; }
@keyframes tag-bob { 50% { transform: translateY(-5px); } }
.node-bird { position: absolute; top: -6px; width: 84px; pointer-events: none; }
.node-bird.right { left: calc(100% + 0px); transform: translateX(34px); }
.node-bird.left { right: calc(100% + 0px); transform: translateX(-34px) scaleX(-1); }
.map-foot { text-align: center; color: var(--muted); font-size: 14px; }

/* bottom sheets on the map */
.app-sheet { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.app-sheet-bg { position: absolute; inset: 0; background: rgba(5, 3, 20, 0.6); opacity: 0; transition: opacity 0.25s; }
.app-sheet-in {
  position: absolute; left: 50%; bottom: 0; width: 100%; max-width: 540px;
  transform: translate(-50%, 105%);
  background: var(--card); border-radius: 28px 28px 0 0;
  padding: 10px 22px calc(26px + var(--safe-b));
  transition: transform 0.35s cubic-bezier(0.3, 1.2, 0.5, 1);
  border-top: 1px solid var(--line);
}
.app-sheet.show { pointer-events: auto; }
.app-sheet.show .app-sheet-bg { opacity: 1; }
.app-sheet.show .app-sheet-in { transform: translate(-50%, 0); }
.grab { width: 44px; height: 5px; border-radius: 9px; background: rgba(255, 255, 255, 0.2); margin: 0 auto 14px; }
.preview { text-align: center; }
.preview-ico { font-size: 56px; animation: bounce 1.2s ease-in-out infinite; }
.preview h2 { margin: 4px 0 4px; font-size: 30px; letter-spacing: -0.02em; }
.preview p { margin: 0 0 16px; color: var(--muted); }
.preview-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 22px; }
.preview-meta span { background: rgba(255, 255, 255, 0.07); padding: 6px 12px; border-radius: 99px; font-size: 14px; font-weight: 600; }
.preview .btn, .settings .btn { width: 100%; }
.settings h2 { margin: 0 0 12px; }
.settings .btn { margin-top: 12px; }
.settings-link { display: block; text-align: center; margin-top: 18px; color: var(--muted); }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.toggle small { color: var(--muted); }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle i { flex: none; width: 52px; height: 30px; border-radius: 99px; background: #3a3370; position: relative; transition: background 0.2s; }
.toggle i::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 0.25s cubic-bezier(0.3, 1.5, 0.5, 1); }
.toggle input:checked + i { background: var(--green); }
.toggle input:checked + i::after { transform: translateX(22px); }
html[dir="rtl"] .toggle input:checked + i::after { transform: translateX(-22px); }
.language-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; border-bottom: 1px solid var(--line); }
.language-row button { min-height: 44px; padding-inline: 8px; border-radius: 10px; }
.language-row button[aria-pressed="true"] { color: var(--yellow); background: var(--card2); }

/* ================= lesson ================= */
.lesson { height: 100dvh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.l-top { display: flex; align-items: center; gap: 12px; padding: calc(10px + var(--safe-t)) 16px 8px; }
.l-bar { flex: 1; height: 16px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.l-bar i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--orange), var(--pink));
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.15);
  transition: width 0.5s cubic-bezier(0.3, 1.3, 0.5, 1);
  position: relative;
}
.l-bar i::after { content: ''; position: absolute; left: 8px; right: 8px; top: 3px; height: 4px; border-radius: 9px; background: rgba(255, 255, 255, 0.35); }
.l-xp { font-weight: 800; color: var(--yellow); min-width: 50px; text-align: end; font-variant-numeric: tabular-nums; }
.l-xp.bump { animation: xp-bump 0.4s; }
@keyframes xp-bump { 50% { transform: scale(1.4); } }
.l-stage { flex: 1; overflow-y: auto; padding: 8px 18px 20px; }
.l-foot { padding: 12px 18px calc(16px + var(--safe-b)); border-top: 1px solid var(--line); }
.l-foot .btn { width: 100%; }

.step { animation: step-in 0.45s cubic-bezier(0.3, 1.2, 0.5, 1) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(40px); } }
html[dir="rtl"] .step { animation-name: step-in-rtl; }
@keyframes step-in-rtl { from { opacity: 0; transform: translateX(-40px); } }
.l-bar i, .unit-prog i { margin-inline-start: 0; margin-inline-end: auto; }
.step h2 { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; margin: 10px 0 10px; }
.lead { color: #d6d0ff; margin: 0 0 18px; font-size: 18px; }

/* intro */
.step-intro { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; gap: 10px; }
.intro-bird { width: min(62vw, 250px); }
.bubble {
  position: relative; background: #fff; color: #1a1030;
  font-size: 20px; font-weight: 600; line-height: 1.4;
  padding: 18px 20px; border-radius: 22px;
  animation: pop-in 0.5s 0.25s both cubic-bezier(0.3, 1.5, 0.5, 1);
  box-shadow: 0 6px 0 #c9c2ee;
}
.bubble::before { content: ''; position: absolute; top: -12px; inset-inline-start: 50%; margin-inline-start: -12px; border: 12px solid transparent; border-top: 0; border-bottom-color: #fff; }
.bubble b { color: var(--pink); }
@keyframes pop-in { from { opacity: 0; transform: scale(0.6) translateY(20px); } }

/* explain */
.visual { margin-top: 6px; }

/* quiz */
.options { display: grid; gap: 12px; margin-top: 18px; }
.opt {
  display: flex; align-items: center; gap: 14px; text-align: start;
  padding: 14px 16px; min-height: 60px;
  border-radius: 18px; background: var(--card);
  border: 2px solid var(--line);
  box-shadow: 0 4px 0 #0c0925;
  font-size: 18px; font-weight: 600;
  transition: transform 0.08s, border-color 0.15s, background 0.15s;
}
.opt:active { transform: translateY(3px); box-shadow: 0 1px 0 #0c0925; }
.opt-k { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); font-size: 14px; font-weight: 800; color: var(--muted); }
.opt.sel { border-color: var(--cyan); background: #1f2a6a; }
.opt.sel .opt-k { background: var(--cyan); color: #1a1030; }
.opt.good { border-color: var(--green); background: rgba(53, 221, 135, 0.15); }
.opt.good .opt-k { background: var(--green); color: #1a1030; }
.opt.bad { border-color: var(--red); background: rgba(255, 82, 99, 0.15); animation: shake 0.4s; }
.opt.bad .opt-k { background: var(--red); color: #fff; }

/* chips (order + blanks) */
.pool { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip {
  padding: 10px 14px; border-radius: 14px;
  background: var(--card2); border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 0 #120d38;
  font-weight: 700;
  transition: transform 0.1s, opacity 0.2s;
  animation: pop-in 0.3s both;
}
.chip:active { transform: translateY(3px); box-shadow: 0 1px 0 #120d38; }
.code-chip { font-family: var(--mono); font-size: 16px; color: var(--cyan); }
.code-chip i { font-style: normal; }
.chip.used { opacity: 0.18; pointer-events: none; box-shadow: none; }
.slots { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; counter-reset: s; }
.slot {
  counter-increment: s;
  position: relative; min-height: 56px; padding-inline-start: 40px;
  border: 2px dashed rgba(255, 255, 255, 0.18); border-radius: 16px;
  display: flex; align-items: center;
}
.slot::before { content: counter(s); position: absolute; inset-inline-start: 14px; font-family: var(--mono); color: var(--muted); font-weight: 700; }
.slot .chip { margin: 4px; flex: 1; text-align: left; }
.slot.good { border-color: var(--green); border-style: solid; }
.slot.bad { border-color: var(--red); border-style: solid; animation: shake 0.4s; }
.blank {
  display: inline-block; min-width: 3.2ch; height: 1.6em; vertical-align: middle;
  border-radius: 8px; border: 2px dashed var(--yellow);
  background: rgba(255, 210, 63, 0.08);
  font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--yellow);
  padding: 0 6px; margin: 0 2px; line-height: 1.4;
}
.blank.filled { border-style: solid; background: rgba(255, 210, 63, 0.18); animation: pop-in 0.25s; }
.blank.good { border-color: var(--green); color: var(--green); background: rgba(53, 221, 135, 0.15); }
.blank.bad { border-color: var(--red); color: var(--red); background: rgba(255, 82, 99, 0.15); animation: shake 0.4s; }

/* run */
.code-input {
  font: inherit; color: var(--lime); background: rgba(166, 255, 77, 0.1);
  border: 2px solid var(--lime); border-radius: 8px; padding: 0 4px; outline: none;
  min-width: 6ch;
}
.code-input:focus { box-shadow: 0 0 0 4px rgba(166, 255, 77, 0.25); }
.console { margin-top: 16px; border-radius: 16px; overflow: hidden; background: #05040f; border: 1px solid var(--line); }
.console-top { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #15122e; }
.console-top i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.console-top i:nth-child(2) { background: var(--yellow); }
.console-top i:nth-child(3) { background: var(--green); }
.console-top span { margin-inline-start: 8px; font-family: var(--display); font-size: 13px; color: var(--muted); }
.console-out { font-family: var(--mono); font-size: 20px; padding: 16px; min-height: 64px; color: var(--lime); }
.cursor { animation: blink-c 1s steps(1) infinite; }
@keyframes blink-c { 50% { opacity: 0; } }

/* grid puzzle */
.grid-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hint-btn { flex: none; margin-top: 8px; width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 210, 63, 0.15); font-size: 20px; }
.hint { margin: -2px 0 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 210, 63, 0.12); color: var(--yellow); font-size: 16px; animation: pop-in 0.3s; }
.board-wrap { width: min(100%, 36dvh, 340px); margin: 0 auto; }
.prog-meta { display: flex; justify-content: space-between; margin: 16px 2px 6px; font-size: 14px; font-weight: 700; color: var(--muted); }
.counter.over { color: var(--red); }
.prog {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  min-height: 64px; padding: 10px;
  border-radius: 18px; background: #0a0820; border: 2px solid var(--line);
}
.prog-empty { color: #6f68a8; font-size: 15px; padding: 0 6px; }
.blk {
  --bc: var(--orange);
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--bc); color: #1a1030; font-size: 24px; font-weight: 900;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--bc) 55%, #000);
  animation: pop-in 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
  transition: transform 0.15s, filter 0.15s;
}
.blk-up { --bc: var(--cyan); }
.blk-down { --bc: var(--violet); color: #fff; }
.blk-left { --bc: var(--pink); }
.blk-right { --bc: var(--orange); }
.blk.running { transform: translateY(-5px) scale(1.12); filter: brightness(1.25); box-shadow: 0 0 0 3px #fff, 0 8px 18px rgba(0, 0, 0, 0.5); }
.blk.err { box-shadow: 0 0 0 3px var(--red); animation: shake 0.4s; }
.caret { width: 3px; height: 34px; border-radius: 3px; background: var(--yellow); animation: blink-c 1s steps(1) infinite; }
.loop {
  display: flex; align-items: center; gap: 6px; padding: 5px;
  border-radius: 14px; border: 2px dashed rgba(255, 210, 63, 0.5);
  background: rgba(255, 210, 63, 0.06);
  animation: pop-in 0.25s;
}
.loop.active { border-style: solid; border-color: var(--yellow); background: rgba(255, 210, 63, 0.12); }
.loop.running { box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.35); }
.loop-n { padding: 0 10px; height: 44px; border-radius: 10px; background: var(--yellow); color: #1a1030; font-weight: 800; font-size: 16px; white-space: nowrap; box-shadow: 0 4px 0 #a88714; }
.loop-body { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 60px; min-height: 44px; padding: 0 4px; cursor: pointer; }
.loop-hint { font-size: 13px; color: var(--yellow); opacity: 0.8; }
.palette { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.pal {
  --bc: var(--orange);
  width: 70px; height: 70px; border-radius: 18px;
  background: var(--bc); color: #1a1030;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900; line-height: 1;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--bc) 55%, #000);
  transition: transform 0.08s, box-shadow 0.08s;
}
.pal small { font-size: 12px; font-weight: 800; margin-top: 4px; opacity: 0.75; }
html[lang="ar"] :is(.pal small, .prog-empty, .loop-hint) { direction: rtl; unicode-bidi: isolate; line-height: 1.5; }
.pal:active { transform: translateY(5px); box-shadow: 0 1px 0 color-mix(in srgb, var(--bc) 55%, #000); }
.pal-up { --bc: var(--cyan); }
.pal-down { --bc: var(--violet); color: #fff; }
.pal-left { --bc: var(--pink); }
.pal-loop { --bc: var(--yellow); }
.pal-exit { --bc: #3a3370; color: var(--yellow); }
.programmer.locked { pointer-events: none; }
.programmer.locked .palette { opacity: 0.4; }

/* catcher game */
.rule {
  font-family: var(--mono); font-size: 22px; font-weight: 700; text-align: center;
  padding: 12px; border-radius: 16px; background: #0a0820; border: 2px solid var(--cyan);
  color: var(--cyan); box-shadow: 0 0 24px rgba(53, 224, 255, 0.2);
}
.rule-q { color: var(--yellow); }
.arena {
  position: relative; height: min(300px, 38dvh); margin-top: 14px; overflow: hidden;
  border-radius: 20px;
  background:
    linear-gradient(180deg, transparent 88%, rgba(255, 82, 99, 0.35) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 40px),
    #120e33;
  border: 2px solid var(--line);
  touch-action: pan-y;
}
.arena::before { content: attr(data-true); position: absolute; inset-inline-start: 12px; top: 50%; font-weight: 800; color: var(--green); opacity: 0.35; font-size: 14px; unicode-bidi: isolate; }
.arena::after { content: attr(data-false); position: absolute; inset-inline-end: 12px; top: 50%; font-weight: 800; color: var(--red); opacity: 0.35; font-size: 14px; unicode-bidi: isolate; }
.arena-msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; color: var(--muted); font-size: 17px; }
.orb {
  position: absolute; left: 50%; top: -110px;
  width: 104px; height: 104px; border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 30%, #fff8, transparent 40%), var(--c);
  box-shadow: 0 0 30px color-mix(in srgb, var(--c) 70%, transparent), inset 0 -8px 0 rgba(0, 0, 0, 0.2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #1a1030; font-family: var(--mono);
  animation: fall var(--dur) linear forwards;
}
.orb small { font-size: 12px; font-weight: 700; opacity: 0.7; }
.orb b { font-size: 26px; line-height: 1.1; }
@keyframes fall { to { top: calc(100% - 96px); } }
.orb.go-left, .orb.go-right, .orb.miss { animation-play-state: paused; transition: transform 0.5s cubic-bezier(0.5, 0, 0.7, 0.4), opacity 0.5s; }
.orb.go-left { transform: translateX(-260%) rotate(-50deg); opacity: 0; }
.orb.go-right { transform: translateX(160%) rotate(50deg); opacity: 0; }
.orb.miss { transform: translateX(-50%) scale(1.4, 0.4); opacity: 0; }
.orb-tag {
  position: absolute; left: 50%; top: 40%; transform: translateX(-50%);
  font-family: var(--mono); font-weight: 700; font-size: 17px; white-space: nowrap;
  padding: 6px 12px; border-radius: 10px; animation: pop-in 0.25s;
}
.orb-tag.ok { background: var(--green); color: #1a1030; }
.orb-tag.no { background: var(--red); color: #fff; }
.pips { display: flex; justify-content: center; gap: 8px; margin: 14px 0 4px; }
.pips i { width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); transition: background 0.2s, transform 0.2s; }
.pips i.good { background: var(--green); transform: scale(1.2); }
.pips i.bad { background: var(--red); }
.tf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.tf .btn { min-height: 72px; font-size: 22px; }
.btn-t { --c: var(--green); }
.btn-f { --c: var(--red); color: #fff; }

/* explain visuals */
.vars { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.vars > .code { min-width: 0; }
.vars-code, .gate-code { font-size: 14px; white-space: pre; padding: 12px; }
.var-box { position: relative; height: 150px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.var-lid {
  position: relative; z-index: 2;
  width: 118px; padding: 6px 0; text-align: center;
  background: var(--yellow); color: #1a1030; font-family: var(--mono); font-weight: 800;
  border-radius: 10px 10px 4px 4px; margin-bottom: -4px;
  box-shadow: 0 4px 0 #a88714;
}
.var-val {
  position: relative; width: 104px; height: 80px;
  border-radius: 4px 4px 16px 16px;
  background: linear-gradient(180deg, #c7773a, #9e5424);
  box-shadow: inset 0 10px 0 rgba(0, 0, 0, 0.18);
  display: grid; place-items: center;
}
.val-chip {
  font-family: var(--mono); font-weight: 800; font-size: 34px; color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.3);
  animation: drop-in 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
.val-chip.out { animation: fly-out 0.35s forwards; }
@keyframes drop-in { from { transform: translateY(-110px) scale(0.6); opacity: 0; } }
@keyframes fly-out { to { transform: translateY(-80px) rotate(30deg) scale(0.5); opacity: 0; } }

.gate-code { margin-bottom: 14px; }
.gate { position: relative; height: 170px; border-radius: 18px; background: #0a0820; border: 1px solid var(--line); }
.gate-paths { position: absolute; inset: 0; width: 100%; height: 100%; }
.gate-paths path { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 4; stroke-dasharray: 8 8; vector-effect: non-scaling-stroke; }
.gate-paths .p-t { stroke: rgba(53, 221, 135, 0.5); }
.gate-paths .p-f { stroke: rgba(255, 82, 99, 0.5); }
.gate-diamond {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--card2); border: 3px solid var(--cyan); border-radius: 14px;
  display: grid; place-items: center;
}
.gate-diamond span { transform: rotate(-45deg); font-family: var(--mono); font-weight: 800; font-size: 14px; color: var(--cyan); white-space: nowrap; }
.gate-out {
  position: absolute; right: 10px; transform: translateY(-50%);
  font-family: var(--mono); font-weight: 800; padding: 4px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.06); color: var(--muted); transition: all 0.3s;
}
.gate-out.t { top: 16%; }
.gate-out.f { top: 84%; }
.gate-out.t.lit { background: var(--green); color: #1a1030; transform: translateY(-50%) scale(1.15); }
.gate-out.f.lit { background: var(--red); color: #fff; transform: translateY(-50%) scale(1.15); }
.gate-ball {
  position: absolute; width: 46px; height: 46px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--yellow); color: #1a1030; font-family: var(--mono); font-weight: 800; font-size: 20px;
  display: grid; place-items: center;
  transition: left 0.7s cubic-bezier(0.5, 0, 0.3, 1), top 0.7s cubic-bezier(0.5, 0, 0.3, 1), background 0.3s, opacity 0.3s;
  z-index: 2;
}
.gate-ball.at-start { left: 8%; top: 50%; transition: none; opacity: 1; }
.gate-ball.at-gate { left: 50%; top: 50%; }
.gate-ball.at-t { left: 68%; top: 16%; }
.gate-ball.at-f { left: 68%; top: 84%; }
.gate-ball.is-t { background: var(--green); }
.gate-ball.is-f { background: var(--red); color: #fff; }

/* feedback sheet */
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 30;
  transform: translateY(105%);
  transition: transform 0.35s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.sheet.show { transform: translateY(0); }
.sheet-in { padding: 20px 18px calc(18px + var(--safe-b)); border-radius: 26px 26px 0 0; }
.sheet.good .sheet-in { background: #133d2e; }
.sheet.bad .sheet-in { background: #45162a; }
.sheet.neutral .sheet-in { background: var(--card2); }
.sheet-head { display: flex; align-items: center; gap: 12px; }
.sheet-head h3 { margin: 0; font-size: 24px; }
.sheet.good h3 { color: var(--green); }
.sheet.bad h3 { color: #ff8d98; }
.sheet-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; background: rgba(255, 255, 255, 0.12); animation: pop-in 0.4s cubic-bezier(0.3, 1.8, 0.5, 1); }
.sheet.good .sheet-ico { background: var(--green); color: #133d2e; }
.sheet.bad .sheet-ico { background: var(--red); color: #fff; }
.sheet p { margin: 10px 0 16px; font-size: 17px; color: #e8e4ff; }
.sheet p b { color: #fff; }
.sheet-btns { display: grid; gap: 10px; margin-top: 12px; }
.sheet-btns .btn { width: 100%; }
.btn-main-c { --c: var(--orange); }
.lesson::after { content: ''; position: absolute; inset: 0; background: rgba(5, 3, 20, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 25; }
.lesson.sheet-open::after { opacity: 1; pointer-events: auto; }

/* finish */
.finish { text-align: center; padding-top: 10px; }
.finish-bird { width: min(52vw, 210px); margin: 0 auto; }
.finish h2 { font-size: 34px; margin: 6px 0 4px; background: linear-gradient(90deg, var(--yellow), var(--orange), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.finish-sub { color: var(--muted); margin: 0; }
.stars { display: flex; justify-content: center; gap: 10px; margin: 16px 0; }
.star { font-size: 54px; color: #2e2766; animation: star-in 0.6s var(--d) both cubic-bezier(0.3, 1.8, 0.5, 1); }
.star.on { color: var(--yellow); text-shadow: 0 0 24px rgba(255, 210, 63, 0.7); }
.star:nth-child(2) { transform: translateY(-12px); font-size: 64px; }
@keyframes star-in { from { transform: scale(0) rotate(-180deg); opacity: 0; } }
.finish-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.finish-stats div { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px 6px; }
.finish-stats b { display: block; font-size: 22px; }
.finish-stats small { color: var(--muted); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  .orb { animation-duration: var(--dur) !important; }
}