/* Street edition: fixed HUD slots, paper stickers, neon ink. */
:root {
  --paper: #f4f1e8;
  --ink: #24242e;
  --muted: #696672;
  --green: #4933ab;
  --line: #d4cfdf;
  --coral: #ff627b;
  --acid: #d7fa38;
  --pink: #ff61bd;
  --violet: #7052e8;
  --aqua: #52dfd3;
  --mobile-safe-top: 0px;
  --mobile-safe-bottom: 0px;
  background: #24242e;
  color: var(--ink);
}
body {
  min-height: 100vh;
  background: radial-gradient(circle, #ffffff09 1px, transparent 1px) 0 0 / 9px 9px, #24242e;
}
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 3px solid #f49bde; outline-offset: 3px; }
button:disabled { opacity: .44; }
.topbar {
  height: 76px; max-width: 1192px; padding: 0 36px;
  border-color: #ffffff20; color: var(--paper);
}
.brand { font-size: 22px; font-weight: 900; letter-spacing: -1px; gap: 11px; }
.brand-icon {
  background: var(--acid); color: var(--ink); width: 43px; height: 43px;
  border: 2px solid var(--ink); border-radius: 12px 15px 9px 13px;
  box-shadow: 3px 3px 0 var(--pink); transform: rotate(-8deg);
}
.brand small { color: var(--acid); font-size: 8px; letter-spacing: 2px; }
.top-actions { gap: 12px; }
.journey { color: #c3becd; }
.journey b { color: var(--acid); font-weight: 700; font-variant-numeric: tabular-nums; }
.status-dot { background: var(--acid); }
.top-divider { background: #ffffff25; }
.icon-button { width: 44px; height: 44px; color: inherit; }
.topbar .icon-button {
  background: #36343f; border: 1px solid #ffffff20; border-radius: 12px;
  transition: transform .12s ease;
}
.topbar .icon-button:hover { background: var(--acid); border-color: var(--ink); color: var(--ink); transform: translateY(-1px); }
.icon-button:hover { background: #ddd7ee; color: var(--ink); }
.dev-indicator { background: var(--pink); color: var(--ink); border: 0; font-weight: 800; }
main { max-width: 1020px; padding: 22px 30px 0; }
.intro { margin: 0 0 28px; color: var(--paper); }
.eyebrow { color: var(--violet); font-size: 10px; font-weight: 800; }
.intro .eyebrow { color: var(--acid); letter-spacing: 2px; }
.eyebrow > span:not(.note-spark) { border-color: currentColor; background: currentColor; }
h1 { font-size: clamp(28px, 3.2vw, 44px); font-weight: 900; letter-spacing: -1.5px; margin: 5px 0 8px; }
h1 span { display: inline-block; background: var(--acid); color: var(--ink); padding: 0 10px; transform: rotate(-2deg); }
.intro p { color: #bfb9ca; font-size: 12px; letter-spacing: .5px; }
.intro-note { padding: 0 18px; color: var(--paper); font-size: 13px; gap: 12px; transform: rotate(7deg); line-height: 1.7; }
.intro-note b { color: var(--pink); font-size: 21px; font-style: italic; font-weight: 800; letter-spacing: -1px; }
.note-spark { color: var(--pink); font-size: 60px; }
.game-layout { grid-template-columns: minmax(0, 1fr) 306px; gap: 28px; }
.board-heading { height: 34px; padding: 0 5px; margin: 0 0 10px; }
.location { color: var(--paper); font-size: 12px; font-weight: 700; }
.tiny-pin { border-color: var(--pink); }
.total-points { color: #c6c0d0; font-size: 10px; gap: 7px; }
.total-points svg { color: var(--acid); fill: var(--acid); }
.total-points b { color: var(--acid); font-size: 24px; font-weight: 800; min-width: 4ch; text-align: right; }
.scene-frame { min-width: 0; min-height: 0; }
.scene {
  aspect-ratio: 1.12; border: 3px solid #15151e; border-radius: 27px 19px 30px 18px;
  background: radial-gradient(ellipse at -2% 100%, var(--pink) 0 16%, transparent 16.4%),
    radial-gradient(ellipse at 100% 0, var(--acid) 0 18%, transparent 18.4%),
    radial-gradient(circle, #ffffff20 1px, transparent 1px) 0 0 / 7px 7px, var(--violet);
  box-shadow: 0 7px 0 #13131b;
}
.scene::before {
  content: ""; position: absolute; width: 45px; height: 18px; background: var(--acid);
  left: -10px; top: 30%; border-radius: 50%; transform: rotate(-38deg);
  box-shadow: 16px -24px 0 -5px var(--acid), 7px 22px 0 -3px var(--acid);
}
.scene-label { top: 2.1%; color: #ece6ff; font-size: 8px; letter-spacing: 2.5px; font-weight: 800; }
.board-shell { width: 76%; left: 12%; top: 7%; }
.board {
  background-color: #43424f;
  background-image: linear-gradient(90deg,#d3cee02b 1px,transparent 1px),linear-gradient(#d3cee02b 1px,transparent 1px);
  border-radius: 7px;
  box-shadow: 0 0 0 5px #ece6f8, 0 0 0 8px #27232e, 0 5px 0 8px #32264c, 0 12px 0 5px #23173540;
}
.board::before { color: #ffffff0c; font-style: italic; font-weight: 800; }
.grid-dot { background: #cfc8e459; }
.exit-road {
  left: 87%; top: calc(7% + 76% * 1.12 / 3); height: calc(76% * 1.12 / 6);
  background: var(--acid); color: var(--ink); border-color: #eee8f8; border-width: 4px; box-shadow: 0 3px #302941;
}
.exit-road > span:first-child { font-size: 27px; font-weight: 800; margin-left: 0; }
.exit-name { color: var(--ink); font-weight: 800; font-size: 8px; }
.tree,.bench,.curb,.street-dots { display: none; }
.parking-sign {
  left: 1.8%; top: 15%; width: 29px; height: 33px; border: 2px solid var(--ink);
  background: var(--pink); color: var(--ink); box-shadow: 2px 3px 0 #27232e; transform: rotate(-12deg);
}
.parking-sign::after { display: none; }
.street-name { bottom: 2.2%; color: #eee9fc; font-size: 7px; letter-spacing: 2px; font-weight: 700; }
.scene-flower { color: var(--acid); font-size: 32px; }
.flower-one { left: 1%; top: 65%; transform: rotate(-15deg); }
.flower-two { right: 1%; bottom: 9%; font-size: 31px; color: var(--aqua); }
.vehicle { border: 1px solid #25232b60; box-shadow: inset 0 2px 0 #ffffff80, inset 0 -3px 0 #00000018, 0 3px 0 var(--car-shadow), 0 5px 0 #20202970; }
.vehicle .windshield { background: #313d52; }
.vehicle .backglass { background: #405268; }
.car-piece.selected .vehicle { outline: 2px solid var(--acid); }
.car-piece.hinted { animation: street-hint 1s ease-in-out infinite; }
.car-piece.tutorial-target {
  animation: tutorial-car 1.8s ease-in-out infinite;
}
.car-piece.tutorial-target .vehicle {
  outline: 3px solid var(--acid); outline-offset: 2px;
}
.tutorial-gesture {
  position: absolute; width: 30px; height: 30px; z-index: 9; pointer-events: none;
  transform: translate(-15px,-15px);
}
.tutorial-path {
  position: absolute; left: 15px; top: 12px; width: var(--tutorial-distance); height: 6px;
  border-radius: 6px; transform: rotate(var(--tutorial-angle)); transform-origin: left center;
  background: repeating-linear-gradient(90deg,#fff 0 10px,transparent 10px 17px);
  filter: drop-shadow(0 2px 0 #24242e); opacity: .72;
}
.tutorial-path::after {
  content: ""; position: absolute; right: -4px; top: -7px; width: 15px; height: 15px;
  border-top: 5px solid #fff; border-right: 5px solid #fff; transform: rotate(45deg);
}
.tutorial-touch {
  position: absolute; inset: 0; width: 30px; height: 30px;
  border: 3px solid #24242e; border-radius: 50%; background: #f4f1e8dd;
  box-shadow: 0 0 0 3px #d7fa38, 3px 4px 0 #24242e;
  animation: tutorial-drag 1.8s ease-in-out infinite;
}
.feedback-slot.tutorial-active {
  border-color: #9cae26; background: #e7f59d;
}
.feedback-slot.tutorial-active .level-tip { color: #30381f; font-weight: 700; }
.portal { box-shadow: 0 0 0 2px #fff6, 0 2px 0 #161320; }
.turntable { --turn-accent: #f5ce68; border-color: #dabb6d; background-color: #eac5671a; }
.turntable.ready { --turn-accent: #22262d; border-color: var(--acid); background-color: #d7fa3830; }
.turntable-grip { background: #ffe397; border-color: #3c3247; color: #302d38; }
.turntable.ready .turntable-grip { background: var(--acid); }
.turntable > span { color: #fff0bb; }
.oneway { color: #ffdc5d; }
.road-wall { border-color: #74707d; background: repeating-linear-gradient(135deg,#a5a0b0 0 7px,#ddd7e3 7px 14px); }
.board-caption { height: 30px; margin: 9px 0 0; font-size: 11px; color: #c6becf; }
.board-caption kbd { border-color: #6d647d; color: #c6becf; }
.drag-icon { color: var(--acid); }
.mechanic-guide {
  margin: 10px 0 0; padding: 10px 13px; height: 70px; gap: 6px; border: 1px solid #ffffff29;
  background: #302e3b; border-radius: 12px; justify-content: center; align-items: center; text-align: center;
}
.mechanic-guide[hidden] { display: flex!important; visibility: hidden; }
.mechanic-guide strong { color: var(--acid); font-size: 11px; }
.mechanic-guide > span { width: 100%; color: #d1c9de; font-size: 11px; line-height: 1.5; text-align: center; }
.mechanic-guide.introduction { border-left: 3px solid var(--pink); }
.mechanic-guide.introduction strong::before { color: var(--pink); }
.level-panel {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 26px 58px 22px 68px 72px 42px 42px 44px 26px 34px 40px;
  gap: 5px 10px; margin-top: 44px; padding: 15px 18px;
  background: var(--paper); border: 3px solid #15151e; border-radius: 19px 27px 17px 23px;
  box-shadow: 5px 6px 0 var(--pink);
}
.level-panel > * { min-width: 0; margin: 0; }
.chapter-label { grid-area: 1 / 1 / 2 / -1; font-size: 10px; color: #62586f; letter-spacing: .3px; }
.chapter-label svg { color: var(--violet); width: 18px; height: 18px; }
.level-title { grid-area: 2 / 1 / 3 / -1; gap: 14px; align-items: center; }
.level-number { font-size: 55px; font-weight: 800; font-style: italic; color: var(--violet); letter-spacing: -4px; }
.small-label { color: #74677c; font-size: 9px; letter-spacing: 1px; }
.level-title h2 { margin: 2px 0 0; font-size: 20px; font-weight: 900; letter-spacing: 0; }
.difficulty { grid-area: 3 / 1 / 4 / -1; color: #696071; font-size: 10px; }
.difficulty-dots i { font-size: 15px; color: #d0c9d9; }
.difficulty-dots i.full { color: var(--violet); }
.difficulty-dots i.half { background: linear-gradient(90deg,var(--violet) 50%,#d0c9d9 50%)!important; background-clip: text!important; -webkit-background-clip: text!important; }
.stats { grid-area: 4 / 1 / 5 / -1; padding: 9px 0; border-color: #d4ceda; align-items: center; }
.stats > div { gap: 5px; }
.stats > div > span { color: #716779; font-size: 10px; letter-spacing: 0; }
.stats > div + div { padding-left: 25px; }
.stats strong { color: var(--ink); font-size: 31px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stats > div + div strong { color: var(--violet); }
.stats svg { color: var(--violet); }
.feedback-slot {
  grid-area: 5 / 1 / 6 / -1; position: relative; border-radius: 9px;
  border: 1px solid #d7d0e3; background: #e9e3f1;
}
.feedback-slot .level-tip,.feedback-slot .hint-text,.feedback-slot #rotation-status {
  position: absolute; inset: 0; padding: 9px 11px; margin: 0; min-height: 0; border-radius: inherit;
  font-size: 11px; line-height: 1.55; color: #5a4e6d; background: transparent; overflow: auto;
}
.feedback-slot .hint-text:empty,.feedback-slot #rotation-status { display: none; }
.feedback-slot:has(.hint-text:not(:empty)) .level-tip,
.feedback-slot[data-feedback="rotation"] .level-tip { visibility: hidden; }
.feedback-slot[data-feedback="rotation"] #rotation-status { display: block; }
.feedback-slot:has(.hint-text:not(:empty)) #rotation-status { display: none; }
.feedback-slot:has(.hint-text:not(:empty)) { background: #e0eea9; border-color: #b5c768; }
.feedback-slot .hint-text { color: #3e4927; }
.action-row { grid-area: 6 / 1 / 7 / -1; gap: 9px; }
.action-button {
  height: 42px; background: #e5dfee; border: 2px solid #302936; border-radius: 9px;
  color: #393040; font-size: 12px; font-weight: 700; box-shadow: 0 2px 0 #302936; transition: background .15s;
}
.action-button:hover:not(:disabled) { background: #d3c4ed; }
.action-button kbd { color: #766b83; border-color: #b8aec6; }
.action-button:active:not(:disabled),.hint-button:active:not(:disabled),.primary-button:active { transform: translateY(2px); box-shadow: none; }
.rotation-controls { grid-area: 7 / 1 / 8 / -1; padding: 0; border: 0; background: none; }
.rotation-controls[hidden] { display: block!important; visibility: hidden; }
.rotation-controls > div { gap: 9px; }
.rotation-controls button { background: #e6deb3; border-color: #302936; }
.hint-button { grid-area: 8 / 1 / 9 / -1; height: 44px; background: var(--acid); color: var(--ink); border: 2px solid #302936; border-radius: 9px; font-size: 12px; font-weight: 800; box-shadow: 0 2px 0 #302936; }
.hint-button:hover { background: #c5ed1a; }
.hint-arrow { color: var(--ink); }
.points-status { grid-area: 9 / 1 / 10 / -1; font-size: 10px; color: #746579; line-height: 26px; white-space: nowrap; }
.points-status.assisted { color: #935433; }
.chapter-progress { grid-area: 10 / 1 / 11 / -1; }
.chapter-progress > div:first-child { font-size: 9px; color: #796d81; }
.chapter-dots { margin-top: 7px; gap: 6px; }
.chapter-dots button { background: #d7d0df; height: 6px; }
.chapter-dots button.current { background: var(--violet); }
.chapter-dots button.complete { background: #776693; }
.all-levels { grid-area: 11 / 1 / 12 / -1; height: 40px; color: #51455d; font-size: 11px; font-weight: 700; }
.all-levels:hover { color: var(--violet); }
footer { margin: 26px 0 0; padding: 16px 0; color: #b9afc7; border-color: #ffffff20; }
footer kbd { border-color: #756780; color: #cabed4; }
.footer-tag span { color: var(--pink); }
.modal { background: var(--paper); border: 3px solid #24212d; border-radius: 23px; box-shadow: 7px 8px 0 #7052e8, 0 24px 100px #0008; max-height: calc(100dvh - 36px); }
.modal::backdrop { background: #17121fcc; backdrop-filter: blur(5px); }
.modal h2 { font-weight: 900; letter-spacing: -.5px; }
.modal-subtitle,.group-mechanic,.help-rule p,.clear-progress-modal > p { color: #71667c; }
.group-heading { color: #4e435c; font-weight: 700; }
.group-heading span:last-child { color: #8c7f98; }
.level-card { border: 2px solid #d7cde0; background: #eae2f0; border-radius: 11px; }
.level-card strong { color: #645179; font-weight: 800; }
.level-card.current { border-color: var(--ink); background: var(--acid); box-shadow: 3px 3px 0 var(--violet); }
.level-card.complete { background: #ddd1ee; }
.level-card small,.card-points { color: #6c597d; }
.level-card:hover:not(:disabled) { background: #dcd0ef; }
.card-stars i.full { color: #7253bd; }
.card-stars i.half { background-image: linear-gradient(90deg,#7253bd 50%,#c9bfce 50%); }
.chapter-navigation button { background: #e3d9ee; color: #6c5485; min-height: 36px; }
.chapter-navigation button.current { background: var(--violet); color: #fff; }
.dev-switch { background: #e7dff0; border-color: #d0c1e0; }
.dev-switch strong,.dev-switch small { color: #655274; }
.rule-number { color: var(--violet); font-weight: 800; }
.primary-button { background: var(--acid); color: var(--ink); font-weight: 800; border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); min-height: 48px; }
.primary-button:hover { background: #c5ed1a; }
.plain-button { color: #6b5a7c; min-height: 44px; }
.clear-progress-actions .primary-button { background: #f684a3; color: #3f2330; }
.clear-progress-button { background: #f0dce3; color: #843f5b; border-color: #ca9eb2; }
.modal-foot { color: #7b6c87; }
.share-modal { max-width: 430px; padding: 29px 31px 23px; text-align: center; }
.share-modal .modal-top { margin-bottom: 6px; }
.share-modal h2 { margin: 8px 0 3px; font-size: 30px; }
.share-challenge { margin: 0 0 17px; color: #74637f; font-size: 12px; font-weight: 600; }
.share-score {
  padding: 16px 12px 13px; color: var(--paper); background: var(--ink);
  border: 2px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--pink);
}
.share-score > span { display: block; color: #d9d0e4; font-size: 10px; font-weight: 700; letter-spacing: 1px; }
.share-score strong {
  display: block; color: var(--acid); font-size: 54px; font-weight: 900;
  line-height: 1.08; font-variant-numeric: tabular-nums;
}
.share-score small { color: var(--pink); font-size: 8px; font-weight: 800; letter-spacing: 2px; }
.share-stats {
  display: grid; grid-template-columns: 1fr 1fr; margin-top: 19px;
  border-block: 1px solid #cfc4d8; padding: 15px 0;
}
.share-stats > div { display: grid; justify-items: center; gap: 5px; }
.share-stats > div + div { border-left: 1px solid #cfc4d8; }
.share-stats span { color: #776981; font-size: 10px; }
.share-stats strong { color: var(--violet); font-size: 27px; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
.share-stats small { position: absolute; margin: 19px 0 0 42px; color: #796c83; font-size: 9px; }
.share-progress { height: 7px; margin: 17px 0 20px; overflow: hidden; border-radius: 5px; background: #d9d0df; }
.share-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--violet),var(--pink),var(--acid)); transition: width .4s ease; }
.share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.share-modal .primary-button svg { width: 18px; height: 18px; }
.share-status { min-height: 20px; margin: 9px 0 0; color: #6f607b; font-size: 10px; line-height: 20px; }
.leaderboard-modal { width: min(480px,calc(100% - 32px)); height: min(680px,calc(100dvh - 36px)); padding: 27px 29px 24px; overflow: hidden; }
.leaderboard-modal[open] { display: flex; flex-direction: column; }
.leaderboard-modal .modal-top { flex: none; }
.leaderboard-modal h2 { flex: none; margin: 14px 0 12px; font-size: 30px; }
.leaderboard-actions { display: flex; align-items: center; gap: 3px; }
.leaderboard-actions .icon-button { width: 36px; height: 36px; }
.my-rank {
  flex: none; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px;
  min-height: 58px; padding: 10px 14px; color: var(--paper); background: var(--ink);
  border: 2px solid var(--ink); border-radius: 11px; box-shadow: 4px 4px 0 var(--pink);
}
.my-rank span { color: #c9bfd3; font-size: 10px; }
.my-rank strong { color: var(--acid); font-size: 25px; font-weight: 900; }
.my-rank b { color: var(--paper); font-size: 22px; font-variant-numeric: tabular-nums; }
.leaderboard-status { flex: none; min-height: 32px; margin: 11px 0 4px; color: #71647d; font-size: 10px; line-height: 32px; }
.leaderboard-list { flex: 1; min-height: 0; margin: 0; padding: 0; overflow: auto; list-style: none; scrollbar-width: thin; }
.leaderboard-list li {
  display: grid; grid-template-columns: 34px 36px minmax(0,1fr) auto; align-items: center; gap: 9px;
  min-height: 50px; border-top: 1px solid #d8cfdf;
}
.rank-position { color: #756680; font: 800 16px/1 'Outfit',sans-serif; text-align: center; }
.rank-avatar {
  width: 31px; height: 31px; display: grid; place-items: center; color: var(--paper); background: var(--violet);
  border: 2px solid var(--ink); border-radius: 50%; font-size: 12px; font-weight: 900;
}
.rank-name { min-width: 0; overflow: hidden; color: #51465c; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rank-score { color: var(--violet); font-size: 18px; font-variant-numeric: tabular-nums; }
.rank-score small { margin-left: 3px; color: #817487; font-size: 8px; font-weight: 600; }
.rank-top .rank-position { color: var(--ink); font-size: 19px; }
.rank-1 .rank-avatar { color: var(--ink); background: var(--acid); }
.rank-2 .rank-avatar { color: var(--ink); background: var(--aqua); }
.rank-3 .rank-avatar { color: var(--ink); background: var(--pink); }
.clear-burst { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; pointer-events: none; z-index: 10; visibility: hidden; }
.clear-burst span { font: italic 800 clamp(30px,6vw,64px)/1 'Outfit',sans-serif; letter-spacing: -2px; background: var(--acid); padding: 8px 18px; color: var(--ink); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--pink); transform: rotate(-8deg); }
.clear-burst strong { background: var(--ink); color: #fff; font-size: clamp(17px,3vw,25px); padding: 6px 18px; transform: rotate(3deg); margin-top: 12px; }
.scene.celebrating .clear-burst { visibility: visible; animation: clear-slam .68s cubic-bezier(.2,.8,.2,1) both; }
.scene.celebrating .board-shell { animation: board-cheer .5s ease-out; }
.confetti i { top: 46%; left: 50%; width: var(--size,9px); height: var(--size,9px); border-radius: 40% 55% 35% 50%; animation: ink-burst 1.1s cubic-bezier(.1,.5,.3,1) var(--delay) both; }
.win-modal { max-width: 388px; padding: 28px; overflow: auto; isolation: isolate; }
.win-modal > :not(.win-confetti) { position: relative; z-index: 1; }
.win-modal[open] { animation: reward-pop .45s cubic-bezier(.2,1.25,.4,1) both; }
.win-stamp { width: 56px; height: 56px; margin: 0 auto 12px; background: var(--pink); color: var(--ink); border: 2px solid var(--ink); border-radius: 19px 25px 18px 23px; transform: rotate(-10deg); box-shadow: 4px 4px 0 var(--ink); }
.win-stamp svg { stroke-width: 3; }
.win-modal .eyebrow { color: #7252c4; font-size: 10px; letter-spacing: 2px; }
.win-modal h2 { font-size: 34px; margin: 10px 0 5px; color: var(--ink); }
.win-modal > p { color: #71607f; margin: 7px 0; font-size: 12px; }
.win-stars { margin: 16px 0 12px; gap: 14px; color: var(--violet); }
.win-stars svg { width: 40px; height: 40px; stroke: var(--ink); stroke-width: 1.2; filter: drop-shadow(2px 3px 0 #252029); }
.win-stars svg:nth-child(2) { width: 49px; height: 49px; margin-top: -7px; color: #ffb946; }
.win-stars svg:nth-child(3) { color: var(--pink); }
.win-stars svg.dim { color: #d7cfdf; stroke: #b6a8c5; filter: none; }
.win-modal[open] .win-stars svg:not(.dim) { animation: star-stamp .5s cubic-bezier(.15,1.5,.5,1) both; animation-delay: calc(.18s + var(--star) * .15s); }
.win-score { margin-bottom: 16px; color: #7a6887; }
.win-points { border: 2px solid #c9bed7; background: #e7deef; padding: 12px; margin-bottom: 16px; }
.win-points > span { color: #695479; font-size: 11px; font-weight: 700; }
.win-points strong { color: var(--violet); font-size: 48px; line-height: 1.15; font-weight: 800; }
.win-modal[open] .win-points strong { animation: score-pop .45s .7s both; }
.win-points p { color: #7a5d80; font-size: 11px; margin: 6px 0; }
.win-points small { color: #655072; font-weight: 600; }
.win-confetti { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 0; }
.win-confetti i { position: absolute; top: -20px; width: 8px; height: 15px; background: var(--color); opacity: .7; border-radius: 4px; }
.win-modal[open] .win-confetti i { animation: reward-rain 1.9s var(--delay) ease-in both; }
@keyframes street-hint { 50% { filter: drop-shadow(0 0 5px #d7fa38) brightness(1.15); } }
@keyframes tutorial-car {
  50% { filter: brightness(1.12) drop-shadow(0 0 7px #d7fa38); }
}
@keyframes tutorial-drag {
  0%,12% { opacity: 0; transform: translate(0,0) scale(.8); }
  20% { opacity: 1; transform: translate(0,0) scale(1); }
  72% { opacity: 1; transform: translate(var(--tutorial-x),var(--tutorial-y)) scale(1); }
  84%,100% { opacity: 0; transform: translate(var(--tutorial-x),var(--tutorial-y)) scale(.8); }
}
@keyframes clear-slam { 0% { opacity: 0; transform: scale(1.7) rotate(-10deg); } 28% { opacity: 1; transform: scale(.94); } 45%,100% { transform: scale(1); } }
@keyframes board-cheer { 20% { transform: scale(.97); } 60% { transform: scale(1.025); } }
@keyframes ink-burst { 0% { opacity: 1; transform: translate(0,0) scale(.2); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(var(--spin)) scale(1); } }
@keyframes reward-pop { from { opacity: 0; transform: translateY(24px) scale(.8) rotate(-5deg); } to { opacity: 1; transform: none; } }
@keyframes star-stamp { from { opacity: 0; transform: scale(2.4) rotate(-30deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes score-pop { from { opacity: 0; transform: translateY(8px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes reward-rain { from { transform: translateY(-30px) rotate(0); } to { transform: translateY(620px) rotate(420deg); } }

/* One viewport on phones: only the scene row flexes. Feedback never grows it. */
@media (max-width: 740px) {
  :root {
    --mobile-safe-top: max(env(safe-area-inset-top),18px);
    --mobile-safe-bottom: env(safe-area-inset-bottom);
  }
  body { height: 100dvh; min-height: 0; }
  .topbar { height: calc(54px + var(--mobile-safe-top)); padding: var(--mobile-safe-top) 12px 0; border: 0; }
  .brand { font-size: 18px; gap: 8px; white-space: nowrap; }
  .brand-icon { width: 34px; height: 34px; border-radius: 10px; }
  .brand-icon svg { width: 23px; height: 23px; }
  .brand small { font-size: 6px; margin-top: 2px; letter-spacing: 1.6px; }
  .top-actions { gap: 4px; }
  .topbar .icon-button { width: 36px; height: 40px; border: 0; background: none; }
  .journey,.top-divider { display: none; }
  .dev-indicator { font-size: 7px; padding: 0 4px; }
  main {
    height: calc(100dvh - 54px - var(--mobile-safe-top));
    padding: 0 12px calc(8px + var(--mobile-safe-bottom)); max-width: 520px;
  }
  .intro,footer { display: none; }
  .game-layout {
    height: 100%; display: grid; gap: 5px 6px; align-items: stretch;
    grid-template-columns: repeat(5,minmax(0,1fr));
    grid-template-rows: 24px 58px minmax(0,1fr) 38px 46px 60px 18px 36px;
  }
  .play-area,.level-panel,.board-heading,.action-row,.rotation-controls,.rotation-controls > div { display: contents; }
  .level-panel { border: 0; padding: 0; margin: 0; box-shadow: none; }
  .location,.small-label,.board-caption,.mechanic-guide strong,.hint-arrow { display: none; }
  .chapter-label { grid-area: 1 / 1 / 2 / 4; color: #cfc5df; font-size: 10px; letter-spacing: 0; padding: 0; height: 24px; }
  .chapter-label svg { width: 14px; height: 14px; color: var(--pink); margin-right: 12px; }
  .total-points { grid-area: 1 / 4 / 2 / 6; justify-content: end; font-size: 9px; gap: 4px; }
  .total-points b { font-size: 19px; min-width: 0; }
  .total-points svg { width: 12px; height: 12px; }
  .level-title { grid-area: 2 / 1 / 3 / 4; align-self: start; gap: 10px; height: 37px; color: var(--paper); }
  .level-number { font-size: 39px; color: var(--acid); letter-spacing: -2px; }
  .level-title h2 { font-size: 18px; margin: 0; white-space: nowrap; }
  .difficulty { grid-area: 2 / 1 / 3 / 4; align-self: end; height: 17px; margin: 0; color: #c6b9d5; font-size: 9px; gap: 6px; }
  .difficulty-dots i { font-size: 12px; color: #5d526d; }
  .difficulty-dots i.full { color: var(--pink); }
  .difficulty-dots i.half { background: linear-gradient(90deg,var(--pink) 50%,#5d526d 50%)!important; background-clip: text!important; -webkit-background-clip: text!important; }
  .stats { grid-area: 2 / 4 / 3 / 6; height: 56px; padding: 6px 8px; margin: 0; border: 1px solid #ffffff26; border-radius: 10px; background: #35303f; gap: 5px; }
  .stats > div { gap: 3px; }
  .stats > div + div { padding-left: 9px; border-color: #ffffff25; }
  .stats > div > span { font-size: 9px; color: #c2b4d0; white-space: nowrap; }
  .stats svg,.stats small { display: none; }
  .stats strong,.stats > div + div strong { font-size: 25px; color: var(--paper); line-height: 1; }
  .stats > div + div strong { color: var(--acid); }
  .scene-frame { grid-area: 3 / 1 / 4 / 6; display: flex; align-items: center; justify-content: center; padding-bottom: 5px; }
  .scene { width: min(100%,calc((100dvh - 382px - var(--mobile-safe-top) - var(--mobile-safe-bottom)) * 1.12)); height: auto; max-width: 100%; flex: none; border-radius: 18px; }
  .scene-label { display: none; }
  .street-name { display: none; }
  .parking-sign { left: .2%; top: 12%; transform: scale(.65) rotate(-12deg); }
  .scene-flower { font-size: 23px; }
  .exit-road { gap: 2px; border-width: 3px; }
  .exit-road > span:first-child { font-size: 21px; }
  .exit-name { font-size: 6px; }
  .mechanic-guide {
    grid-area: 4 / 1 / 5 / 6; height: 38px; padding: 3px 9px; margin: 0; border-radius: 7px;
    border: 1px solid #ffffff20; gap: 0;
  }
  .mechanic-guide > span { font-size: 10px; line-height: 15px; }
  .mechanic-guide[hidden] { visibility: visible; }
  .mechanic-guide[hidden] > * { display: none; }
  .mechanic-guide[hidden]::after { content: "↔ 沿车身拖动 · 让红色小车从右侧出口回家"; color: #cfc4dd; font-size: 10px; text-align: center; }
  #undo { grid-area: 5 / 1 / 6 / 2; }
  #restart { grid-area: 5 / 2 / 6 / 3; }
  #rotate-left { grid-area: 5 / 3 / 6 / 4; }
  #rotate-right { grid-area: 5 / 4 / 6 / 5; }
  .rotation-controls[hidden] { display: contents!important; visibility: visible; }
  .rotation-controls[hidden] button { opacity: .28; pointer-events: none; }
  .action-button { width: 100%; height: 44px; font-size: 11px; gap: 3px; border-width: 1.5px; }
  .action-button svg { width: 14px; height: 14px; }
  .action-button kbd { display: none; }
  .hint-button { grid-area: 5 / 5 / 6 / 6; height: 44px; padding: 3px; font-size: 10px; gap: 1px; line-height: 13px; justify-content: center; flex-direction: column; border-width: 1.5px; }
  .hint-button svg { width: 14px; height: 14px; }
  .hint-button > span:first-of-type { max-width: 100%; font-size: 9px; white-space: nowrap; }
  .feedback-slot { grid-area: 6 / 1 / 7 / 6; border-color: #736389; background: #3b3249; }
  .feedback-slot .level-tip,.feedback-slot .hint-text,.feedback-slot #rotation-status { padding: 7px 10px; font-size: 11px; line-height: 15px; color: #e2d9eb; }
  .feedback-slot:has(.hint-text:not(:empty)) { background: #d7eb91; border-color: #b5d466; }
  .feedback-slot .hint-text { color: #354120; }
  .points-status { grid-area: 7 / 1 / 8 / 6; font-size: 9px; line-height: 18px; text-align: center; color: #c6b9d4; }
  .points-status.assisted { color: #ffc5a0; }
  .chapter-progress { grid-area: 8 / 1 / 9 / 4; margin: 0; padding: 1px 0; }
  .chapter-progress > div:first-child { color: #bcb0ca; font-size: 9px; }
  .chapter-dots { margin-top: 8px; gap: 7px; }
  .chapter-dots button { height: 5px; background: #51445f; }
  .chapter-dots button.current { background: var(--acid); }
  .chapter-dots button.complete { background: var(--pink); }
  .all-levels { grid-area: 8 / 4 / 9 / 6; color: var(--paper); background: #39303f; border: 1px solid #776185; border-radius: 8px; height: 36px; font-size: 10px; margin: 0; gap: 5px; }
  .all-levels:hover { color: var(--acid); background: #39303f; }
  .modal {
    top: var(--mobile-safe-top); bottom: var(--mobile-safe-bottom); margin-block: auto;
    padding: 20px; max-height: calc(100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 16px);
  }
  .share-modal { padding: 22px 20px 15px; }
  .share-modal h2 { margin: 6px 0 2px; font-size: 27px; }
  .share-challenge { margin-bottom: 13px; font-size: 11px; }
  .share-score { padding: 13px 10px 11px; }
  .share-score strong { font-size: 46px; }
  .share-stats { margin-top: 16px; padding: 13px 0; }
  .share-progress { margin: 14px 0 17px; }
  .leaderboard-modal { height: calc(100dvh - var(--mobile-safe-top) - var(--mobile-safe-bottom) - 16px); padding: 20px 18px 16px; }
  .leaderboard-modal h2 { margin: 8px 0 10px; font-size: 27px; }
  .my-rank { min-height: 52px; padding: 8px 11px; }
  .my-rank strong { font-size: 22px; }
  .my-rank b { font-size: 19px; }
  .leaderboard-status { margin-top: 8px; min-height: 27px; line-height: 27px; }
  .leaderboard-list li { min-height: 46px; }
  .win-modal { padding: 24px; }
  .win-modal h2 { font-size: 31px; }
  .win-modal .win-points strong { font-size: 44px; }
  .clear-progress-actions { gap: 8px; }
  .clear-progress-actions > button { font-size: 11px; }
}
@media (max-width: 360px) {
  .topbar { padding-left: 10px; padding-right: 8px; }
  main { padding-left: 9px; padding-right: 9px; }
  .brand { font-size: 16px; }
  .top-actions { gap: 1px; }
  .game-layout { column-gap: 4px; }
  .level-title { gap: 7px; }
  .level-title h2 { font-size: 16px; }
  .stats { padding: 6px; }
  .stats > div + div { padding-left: 5px; }
  .total-points > span { font-size: 8px; }
  .action-button { font-size: 10px; gap: 2px; }
  .hint-button > span:first-of-type { font-size: 8px; }
}
@media (max-width: 740px) and (max-height: 650px) {
  .topbar { height: calc(46px + var(--mobile-safe-top)); }
  main { height: calc(100dvh - 46px - var(--mobile-safe-top)); padding-bottom: calc(4px + var(--mobile-safe-bottom)); }
  .game-layout { row-gap: 3px; grid-template-rows: 20px 51px minmax(0,1fr) 34px 44px 54px 16px 30px; }
  .chapter-label { height: 20px; font-size: 9px; }
  .level-title { height: 33px; }
  .level-number { font-size: 35px; }
  .stats { height: 49px; padding-top: 3px; padding-bottom: 3px; }
  .stats strong,.stats > div + div strong { font-size: 22px; }
  .mechanic-guide { height: 34px; padding: 1px 7px; }
  .scene { width: min(100%,calc((100dvh - 325px - var(--mobile-safe-top) - var(--mobile-safe-bottom)) * 1.12)); }
  .feedback-slot .level-tip,.feedback-slot .hint-text,.feedback-slot #rotation-status { padding: 4px 8px; }
  .points-status { line-height: 16px; }
  .all-levels { height: 30px; }
  .chapter-dots { margin-top: 6px; }
  .win-modal { padding: 18px 24px; }
  .share-modal { padding: 16px 20px 10px; }
  .share-modal h2 { margin-bottom: 1px; font-size: 24px; }
  .share-challenge { margin-bottom: 8px; }
  .share-score { padding: 9px; }
  .share-score strong { font-size: 40px; }
  .share-stats { margin-top: 11px; padding: 9px 0; }
  .share-progress { margin: 10px 0 12px; }
  .leaderboard-modal { padding-top: 14px; padding-bottom: 10px; }
  .leaderboard-modal h2 { margin: 4px 0 7px; font-size: 24px; }
  .my-rank { min-height: 45px; padding-block: 5px; }
  .leaderboard-status { min-height: 22px; margin-top: 5px; line-height: 22px; }
  .leaderboard-list li { min-height: 42px; }
  .win-stamp { width: 42px; height: 42px; margin-bottom: 9px; }
  .win-modal h2 { font-size: 27px; }
  .win-stars { margin: 12px 0 9px; }
  .win-points { padding: 9px; margin-bottom: 10px; }
}
@media (orientation: landscape) and (max-height: 550px) and (min-width: 600px) {
  :root {
    --mobile-safe-top: max(env(safe-area-inset-top),18px);
    --mobile-safe-bottom: env(safe-area-inset-bottom);
  }
  .topbar { height: calc(44px + var(--mobile-safe-top)); padding: var(--mobile-safe-top) 16px 0; }
  .brand { font-size: 16px; }
  .brand-icon { width: 30px; height: 30px; }
  main { padding: 0 14px 7px; height: calc(100dvh - 44px - var(--mobile-safe-top)); max-width: 1000px; }
  .intro,footer { display: none; }
  .game-layout { display: grid; height: 100%; grid-template-columns: minmax(0,1fr) 290px; grid-template-rows: 1fr; gap: 14px; }
  .play-area { display: grid; grid-template-rows: 25px minmax(0,1fr) 32px; height: 100%; width: auto; }
  .board-heading { display: flex; grid-area: auto; margin: 0; height: 25px; }
  .location { display: flex; font-size: 10px; }
  .total-points { display: flex; }
  .board-caption { display: none; }
  .scene-frame { grid-area: auto; display: flex; align-items: center; justify-content: center; padding-bottom: 4px; }
  .scene { width: min(100%,calc((100dvh - 112px - var(--mobile-safe-top) - var(--mobile-safe-bottom)) * 1.12)); height: auto; flex: none; }
  .scene-label { display: none; }
  .mechanic-guide { grid-area: auto; height: 32px; padding: 0 5px; margin: 0; }
  .mechanic-guide strong { display: none; }
  .mechanic-guide > span { font-size: 9px; line-height: 13px; }
  .level-panel { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); grid-template-rows: 20px 49px 44px 54px 18px 30px; align-content: center; padding: 9px; gap: 5px; margin: 0; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); box-shadow: 3px 3px 0 var(--pink); }
  .chapter-label { grid-area: 1 / 1 / 2 / 6; height: 20px; color: #62586f; }
  .level-title { grid-area: 2 / 1 / 3 / 4; height: 31px; gap: 8px; color: var(--ink); }
  .level-title h2 { font-size: 15px; }
  .level-number { font-size: 31px; color: var(--violet); }
  .small-label { display: none; }
  .difficulty { grid-area: 2 / 1 / 3 / 4; align-self: end; height: 15px; font-size: 8px; color: #62586f; }
  .difficulty-dots i { font-size: 11px; }
  .stats { grid-area: 2 / 4 / 3 / 6; height: 49px; padding: 3px; border: 0; background: none; gap: 4px; }
  .stats > div > span { font-size: 8px; color: #716779; }
  .stats > div + div { padding-left: 7px; }
  .stats strong,.stats > div + div strong { color: var(--violet); font-size: 22px; }
  .stats small,.stats svg { display: none; }
  .action-row,.rotation-controls,.rotation-controls > div,.rotation-controls[hidden] { display: contents!important; visibility: visible; }
  .rotation-controls[hidden] button { opacity: .28; pointer-events: none; }
  #undo { grid-area: 3 / 1 / 4 / 2; }
  #restart { grid-area: 3 / 2 / 4 / 3; }
  #rotate-left { grid-area: 3 / 3 / 4 / 4; }
  #rotate-right { grid-area: 3 / 4 / 4 / 5; }
  .action-button { height: 42px; width: 100%; font-size: 9px; gap: 1px; }
  .action-button svg { width: 12px; }
  .action-button kbd,.hint-arrow { display: none; }
  .hint-button { grid-area: 3 / 5 / 4 / 6; height: 42px; flex-direction: column; padding: 2px; gap: 0; }
  .hint-button > span:first-of-type { font-size: 7px; white-space: nowrap; }
  .hint-button svg { width: 14px; height: 14px; }
  .feedback-slot { grid-area: 4 / 1 / 5 / 6; background: #e9e3f1; border-color: #d7d0e3; }
  .feedback-slot .level-tip,.feedback-slot .hint-text,.feedback-slot #rotation-status { font-size: 10px; line-height: 14px; padding: 4px 6px; color: #5a4e6d; }
  .points-status { grid-area: 5 / 1 / 6 / 6; font-size: 8px; color: #746579; line-height: 18px; }
  .chapter-progress { grid-area: 6 / 1 / 7 / 4; }
  .chapter-progress > div:first-child { font-size: 8px; color: #746579; }
  .chapter-dots { margin-top: 6px; }
  .all-levels { grid-area: 6 / 4 / 7 / 6; font-size: 9px; height: 30px; background: none; color: #51455d; border: 0; }
  .win-modal { max-width: 550px; display: none; padding: 15px 22px; }
  .win-modal[open] { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .win-stamp { display: none; }
  .win-modal .eyebrow,.win-modal h2,.win-modal > p,.win-stars,.win-score { grid-column: 1; }
  .win-modal h2 { font-size: 27px; }
  .win-stars { margin: 14px 0 10px; }
  .win-score { margin-bottom: 4px; }
  .win-points { grid-column: 2; grid-row: 1 / 4; margin: 0 0 10px; }
  .win-modal .primary-button { grid-column: 2; grid-row: 4; padding: 9px; }
  .win-modal .plain-button { grid-column: 2; grid-row: 5; padding: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none!important; transition: none!important; }
  .confetti,.win-confetti { display: none; }
  .tutorial-touch { opacity: 1; transform: translate(var(--tutorial-x),var(--tutorial-y)); }
}