:root {
  color-scheme: light;
  --navy: #111735;
  --navy-soft: #20294c;
  --purple: #7656ed;
  --purple-dark: #6444d9;
  --mint: #a9f4cb;
  --ink: #242847;
  --muted: #777b96;
  --line: #e9eaf2;
  --paper: #ffffff;
  --canvas: #f7f7fc;
  --green: #25b879;
  --red: #ef6674;
  font-family: "DM Sans", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--canvas); color: var(--ink); font-family: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; overflow: hidden; }
.topbar { height: 76px; padding: 0 max(6.2vw, calc((100vw - 1240px)/2)); display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: white; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: white; font-size: 15px; font-weight: 800; letter-spacing: .045em; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; color: var(--navy); background: var(--mint); font-size: 20px; font-weight: 800; transform: rotate(-5deg); }
.brand-accent { color: var(--mint); margin-left: 3px; }
.topbar-note { color: #c4c8da; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.status-dot { width: 7px; height: 7px; display: inline-block; margin-right: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px #a9f4cb80; }
.topbar-badge { padding: 8px 11px; border: 1px solid #ffffff24; border-radius: 20px; color: #cbd0e2; font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.view { max-width: 1240px; margin: 0 auto; padding: 0 30px 35px; }
.hero { min-height: 320px; display: flex; align-items: center; justify-content: space-between; position: relative; margin: 34px 0 28px; padding: 30px 58px; border-radius: 20px; background: linear-gradient(115deg, #171f43 0%, #232b59 63%, #353067 100%); color: white; overflow: hidden; }
.hero:after { content: ""; position: absolute; inset: 0; opacity: .12; pointer-events: none; background-image: radial-gradient(#b9b9ff 1px, transparent 1px); background-size: 19px 19px; mask-image: linear-gradient(90deg, #000, transparent 90%); }
.hero-copy { z-index: 1; max-width: 610px; }
.eyebrow { color: #bbaeff; font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.eyebrow-star { color: var(--mint); font-size: 14px; margin-right: 5px; }
.hero h1 { max-width: 570px; margin: 18px 0 12px; font-size: clamp(32px, 4vw, 48px); line-height: 1.13; letter-spacing: -.045em; }
.hero h1 span { color: var(--mint); }
.hero-description { max-width: 560px; margin: 0; color: #c5c9dd; font-size: 14px; line-height: 1.7; }
.hero-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 21px; }
.hero-pills span { padding: 8px 11px; border: 1px solid #ffffff20; border-radius: 18px; color: #e7e8f2; background: #ffffff08; font-size: 10px; font-weight: 600; }
.hero-art { position: relative; z-index: 1; width: 275px; height: 245px; flex: 0 0 275px; margin: 0 25px 0 20px; }
.art-orbit { position: absolute; width: 200px; height: 200px; border: 1px solid #b9b5ff2c; border-radius: 50%; left: 33px; top: 23px; }
.orbit-two { width: 152px; height: 152px; left: 57px; top: 47px; border-style: dashed; }
.art-spark { position: absolute; color: var(--mint); font-size: 24px; animation: twinkle 2s ease-in-out infinite; }
.spark-one { right: 10px; top: 34px; }.spark-two { left: 17px; top: 92px; animation-delay: .8s; }
.pixel-hero { position: relative; width: 54px; height: 65px; image-rendering: pixelated; }
.hero-art .pixel-hero { position: absolute; left: 107px; top: 77px; transform: scale(1.4); }
.pixel-cap { position: absolute; top: 2px; left: 11px; width: 33px; height: 10px; background: #ec675e; border: 3px solid #723d54; border-bottom: 0; }
.pixel-face { position: absolute; top: 12px; left: 10px; width: 36px; height: 21px; background: #ffd48e; border: 3px solid #654854; box-shadow: inset 5px 0 #f7b96d, inset -6px -2px #f0ab68; }
.pixel-face:after { content: ""; position: absolute; right: 6px; top: 6px; width: 4px; height: 5px; background: #293153; }
.pixel-body { position: absolute; left: 7px; top: 33px; width: 42px; height: 20px; border: 3px solid #543b59; background: #64c89a; box-shadow: inset 9px 0 #397c88, inset -7px 0 #397c88; }
.pixel-body:after { content: ""; position: absolute; left: 14px; top: 3px; width: 6px; height: 6px; background: #f7ce71; }
.pixel-feet { position: absolute; left: 6px; bottom: 1px; width: 45px; height: 10px; border-bottom: 6px solid #45375d; border-left: 8px solid #45375d; border-right: 8px solid #45375d; }
.art-platform { position: absolute; left: 65px; bottom: 16px; width: 150px; height: 13px; border: 2px solid #996648; background: repeating-linear-gradient(90deg, #bc8053 0 24px, #8c573f 24px 27px); box-shadow: 0 10px 0 #171b37; }
.art-caption { position: absolute; bottom: 45px; left: 97px; color: var(--mint); font: 8px "Press Start 2P", monospace; transform: rotate(-8deg); }
.builder-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, .9fr); gap: 23px; align-items: start; }
.panel { padding: 29px 31px 30px; border: 1px solid #edeef5; border-radius: 17px; background: var(--paper); box-shadow: 0 7px 24px #25254d08; }
.panel-heading { display: flex; align-items: center; gap: 12px; }
.heading-icon { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 11px; font-size: 11px; font-weight: 800; }
.source-icon { color: #6c4de1; background: #f0edff; }.settings-icon { color: #13865f; background: #e8fbf1; }
.panel-heading h2 { margin: 0 0 3px; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.panel-heading p { margin: 0; color: var(--muted); font-size: 11px; }
.source-tabs { display: flex; gap: 7px; margin: 23px 0 16px; border-bottom: 1px solid var(--line); }
.source-tab { position: relative; padding: 10px 13px 12px; border: 0; color: #8689a0; background: transparent; font-size: 11px; font-weight: 700; }
.source-tab:after { content: ""; position: absolute; right: 12px; bottom: -1px; left: 12px; height: 2px; background: transparent; }
.source-tab.active { color: var(--purple); }.source-tab.active:after { background: var(--purple); }
.source-pane label:not(.drop-zone) { display: block; margin-bottom: 8px; color: #515570; font-size: 11px; font-weight: 700; }
.input-with-button { display: flex; gap: 8px; }
input, textarea, select { width: 100%; border: 1px solid #e6e7ef; border-radius: 9px; outline: none; background: #fff; color: var(--ink); transition: border-color .18s, box-shadow .18s; }
input:focus, textarea:focus, select:focus { border-color: #9d89f6; box-shadow: 0 0 0 3px #7656ed18; }
.input-with-button input { min-width: 0; height: 41px; padding: 0 12px; font-size: 12px; }
.input-with-button input::placeholder, textarea::placeholder { color: #aaadbd; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 17px; border: 0; border-radius: 9px; font-size: 12px; font-weight: 800; transition: transform .17s, background .17s, box-shadow .17s; }
.button:hover { transform: translateY(-1px); }.button:focus-visible, button:focus-visible { outline: 3px solid #a695ff; outline-offset: 2px; }
.button-light { border: 1px solid #e5e4ef; color: #595d79; background: white; }
.button-primary { color: #191c39; background: var(--mint); box-shadow: 0 6px 13px #3eae7e19; }
.button-primary:hover { background: #92eabb; box-shadow: 0 8px 17px #3eae7e30; }
.field-hint { margin: 7px 0 0; color: #9396a9; font-size: 10px; line-height: 1.5; }
.drop-zone { display: flex; align-items: center; gap: 12px; min-height: 75px; padding: 13px; border: 1px dashed #d8d5ed; border-radius: 10px; background: #faf9ff; cursor: pointer; }
.drop-zone:hover { border-color: var(--purple); background: #f7f4ff; }
.drop-zone strong, .drop-zone span { display: block; }.drop-zone strong { color: #515570; font-size: 11px; }.drop-zone span:not(.drop-icon) { margin-top: 4px; color: #999bae; font-size: 10px; }
.drop-icon { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; color: var(--purple); background: #eeeaff; font-size: 19px; font-weight: 700; }
textarea { min-height: 100px; resize: vertical; padding: 11px 12px; font-size: 11px; line-height: 1.5; }
.status-message { min-height: 0; margin-top: 8px; font-size: 11px; line-height: 1.5; }.status-message:not(:empty) { min-height: 17px; }.status-message.success { color: #16875f; }.status-message.error { color: #c64f5c; }.status-message.loading { color: #6e58d1; }
.divider { height: 1px; margin: 18px 0 23px; background: var(--line); }
.compact-heading { margin-bottom: 20px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 15px; }
.field-group label { display: block; margin-bottom: 8px; color: #515570; font-size: 10px; font-weight: 700; }
.field-group select { height: 40px; padding: 0 10px; color: #454963; font-size: 11px; }
.number-control { display: grid; grid-template-columns: 34px 1fr 34px; height: 40px; overflow: hidden; border: 1px solid #e6e7ef; border-radius: 9px; }
.step-button { border: 0; color: #6650cc; background: #f7f5ff; font-size: 17px; }.step-button:hover { background: #eeeaff; }
.number-control input { border: 0; border-radius: 0; text-align: center; font-size: 12px; font-weight: 700; appearance: textfield; }.number-control input::-webkit-inner-spin-button { appearance: none; }
.percent-input { position: relative; }.percent-input input { height: 40px; padding: 0 30px 0 11px; font-size: 11px; }.percent-input span { position: absolute; right: 12px; top: 12px; color: #8589a1; font-size: 11px; }
.grading-hint { margin: 15px 0 20px; color: #8c8fa4; font-size: 10px; line-height: 1.5; }.grading-hint span { color: var(--purple); }
.generate-button { width: 100%; min-height: 48px; font-size: 13px; }.generate-button>span:first-child { color: #7157d8; font-size: 15px; }.button-arrow { margin-left: auto; font-size: 18px; }
.side-column { display: flex; flex-direction: column; gap: 13px; }
.tip-card { position: relative; min-height: 263px; padding: 24px 22px; border-radius: 16px; overflow: hidden; color: white; background: linear-gradient(140deg, #7151de, #5743bb); }
.tip-label { color: #ded5ff; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.tip-card h3 { max-width: 200px; margin: 12px 0 20px; font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
.tip-step { display: flex; align-items: center; gap: 9px; margin: 11px 0; }
.tip-number { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 23px; border-radius: 8px; color: #5b49b4; background: #d8d1ff; font-size: 10px; font-weight: 800; }
.tip-step p { margin: 0; color: #e6e2ff; font-size: 10px; }.tip-step strong { color: white; }
.tip-decoration { position: absolute; right: -5px; bottom: -30px; color: #ffffff12; font-size: 100px; transform: rotate(-15deg); }
.privacy-card { display: flex; gap: 12px; padding: 16px; border: 1px solid #e7f4ec; border-radius: 13px; background: #f0faf4; }
.privacy-icon { color: #26996d; font-size: 20px; }.privacy-card strong { color: #416858; font-size: 11px; }.privacy-card p { margin: 4px 0 0; color: #788b80; font-size: 10px; line-height: 1.55; }
.mini-game-card { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid #eeeafc; border-radius: 13px; background: #fff; }
.mini-game-sprite { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; color: #f0aa34; background: #fff5df; font-size: 21px; }.mini-game-card span { color: #8a7abf; font-size: 8px; font-weight: 800; letter-spacing: .12em; }.mini-game-card p { margin: 4px 0 0; color: #777b96; font-size: 10px; line-height: 1.45; }
.footer-note { padding: 25px 0 0; color: #a5a7b8; text-align: center; font-size: 8px; font-weight: 800; letter-spacing: .14em; }.footer-note span { padding-left: 5px; color: var(--purple); }
.hidden { display: none !important; }

/* Game */
#gameView { max-width: 1080px; padding-top: 23px; }
.game-topline, .report-topline { display: flex; align-items: center; justify-content: space-between; }
.back-button { padding: 8px 0; border: 0; color: #747890; background: transparent; font-size: 11px; font-weight: 700; }.back-button:hover { color: var(--purple); }
.game-brand { color: var(--navy); font-size: 12px; font-weight: 800; letter-spacing: .06em; }.game-brand span { color: var(--purple); margin-left: 3px; }
.game-player { color: #8c8fa4; font-size: 9px; font-weight: 700; letter-spacing: .08em; }.game-player strong { padding-left: 5px; color: var(--ink); font-size: 11px; letter-spacing: 0; }
.game-progress-row { display: flex; justify-content: space-between; margin: 35px 0 9px; color: #8a8da2; font-size: 9px; font-weight: 800; letter-spacing: .1em; }.game-progress-row span:last-child { color: #7859da; }
.progress-track { height: 6px; overflow: hidden; border-radius: 5px; background: #e9e8f3; }.progress-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7656ed, #a388ff); transition: width .4s ease; }
.game-stage { margin-top: 19px; border: 1px solid #e9e9f0; border-radius: 17px; overflow: hidden; background: white; box-shadow: 0 8px 25px #29254b0b; }
.stage-sky { position: relative; min-height: 510px; padding: 32px 50px 68px; overflow: hidden; background: linear-gradient(180deg, #e9edff, #f6f5ff 66%, #e9f7ef); }
.stage-cloud { position: absolute; top: 47px; width: 90px; height: 21px; border-radius: 16px; background: #ffffff9c; }.stage-cloud:before, .stage-cloud:after { content: ""; position: absolute; bottom: 0; border-radius: 50%; background: inherit; }.stage-cloud:before { left: 17px; width: 30px; height: 33px; }.stage-cloud:after { left: 40px; width: 25px; height: 26px; }.cloud-left { left: 5%; }.cloud-right { right: 8%; top: 90px; transform: scale(.75); }
.stage-question { position: relative; z-index: 1; max-width: 710px; margin: 0 auto 23px; text-align: center; }.question-tag { color: #7964c5; font-size: 9px; font-weight: 800; letter-spacing: .16em; }.stage-question h1 { margin: 11px 0 0; color: #242847; font-size: clamp(20px, 3vw, 29px); line-height: 1.35; letter-spacing: -.035em; }
.answer-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; max-width: 720px; margin: 0 auto; }
.answer-button { min-height: 69px; display: flex; align-items: center; gap: 13px; padding: 12px 16px; border: 2px solid transparent; border-radius: 13px; color: white; background: #7656ed; box-shadow: 0 5px 0 #4e379f; text-align: left; font-size: 13px; font-weight: 700; transition: transform .14s, filter .14s, opacity .14s; }.answer-button:hover:not(:disabled) { transform: translateY(-3px); filter: brightness(1.08); }.answer-button:nth-child(4n+2) { background: #ed7082; box-shadow: 0 5px 0 #ac455b; }.answer-button:nth-child(4n+3) { background: #27ae94; box-shadow: 0 5px 0 #137a6c; }.answer-button:nth-child(4n+4) { background: #e9a742; box-shadow: 0 5px 0 #a86c27; }.answer-key { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; color: #443a71; background: #ffffffdb; font-size: 11px; }.answer-button.correct-answer { border-color: #c7ffe1; background: #22b87d; box-shadow: 0 5px 0 #148356; }.answer-button.wrong-answer { border-color: #ffd0d3; background: #e85e6e; box-shadow: 0 5px 0 #a43c50; }.answer-button:disabled { cursor: default; }.answer-button.faded { opacity: .52; }
.countdown-wrap { position: absolute; right: 23px; bottom: 76px; display: flex; align-items: center; gap: 7px; color: #9193a7; font-size: 8px; font-weight: 800; letter-spacing: .1em; }.timer-ring { display: grid; place-items: center; width: 43px; height: 43px; border: 3px solid #b3a6f3; border-radius: 50%; color: #6149bf; background: #fff9; font-size: 15px; font-weight: 800; }.timer-ring.urgent { border-color: var(--red); color: #d5485a; animation: pulse .6s infinite alternate; }
.game-feedback { position: absolute; z-index: 2; left: 50%; bottom: 87px; min-height: 20px; color: #4e4a79; font-size: 12px; font-weight: 800; transform: translateX(-50%); text-align: center; white-space: nowrap; }.game-feedback.good { color: #16885e; }.game-feedback.bad { color: #c7495a; }
.game-hero { position: absolute; z-index: 1; bottom: 42px; left: calc(50% - 27px); transform: scale(.83); transform-origin: bottom center; }.game-hero.bump { animation: bump .65s ease; }.game-hero.fall { animation: fall .8s ease; }
.life-popup { position: absolute; z-index: 3; bottom: 123px; left: 50%; color: #19a767; font: 11px "Press Start 2P", monospace; text-shadow: 2px 2px white, -2px -2px white; opacity: 0; transform: translate(-50%, 8px) scale(.8); }.life-popup.pop { animation: popup 1.2s ease forwards; }
.stage-ground { position: absolute; bottom: 0; left: 0; display: flex; width: 100%; height: 33px; border-top: 3px solid #815044; background: repeating-linear-gradient(90deg, #ae704d 0 44px, #633e48 44px 48px); box-shadow: inset 0 8px #d2945c; }.stage-ground span { flex: 1; border-right: 2px solid #70454b; }.game-instructions { padding: 17px; color: #9699ab; text-align: center; font-size: 8px; font-weight: 800; letter-spacing: .13em; }

/* Report and dialogs */
#reportView { max-width: 760px; padding-top: 25px; }.report-topline { margin-bottom: 30px; }.report-private { color: #9396a9; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.report-card { position: relative; padding: 35px 35px 29px; border: 1px solid #ececf3; border-radius: 19px; background: white; text-align: center; box-shadow: 0 10px 35px #2424430a; overflow: hidden; }.report-confetti { position: absolute; top: 10px; right: 0; left: 0; color: #c7baff; font-size: 16px; letter-spacing: .55em; }.report-eyebrow { margin-top: 5px; color: #7d64cd; font-size: 9px; font-weight: 800; letter-spacing: .17em; }.report-medal { margin: 14px auto 6px; font-size: 44px; filter: drop-shadow(0 5px 8px #d4a93d3b); }.report-card h1 { margin: 5px 0; color: #242847; font-size: 30px; letter-spacing: -.04em; }.report-subtitle { margin: 7px 0 0; color: #83869b; font-size: 12px; }.report-score { display: inline-flex; position: relative; align-items: baseline; margin: 22px 0 21px; color: #292747; font-size: 18px; font-weight: 700; }.report-score>span:first-child { color: #7153db; font-size: 51px; font-weight: 800; letter-spacing: -.06em; }.report-score small { position: absolute; top: 57px; left: 50%; color: #999bae; font-size: 8px; font-weight: 800; letter-spacing: .13em; white-space: nowrap; transform: translateX(-50%); }
.report-stats { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 520px; margin: 29px auto 0; padding-top: 21px; border-top: 1px solid #efeff5; }.report-stats>div { display: flex; flex-direction: column; align-items: center; gap: 6px; }.report-stats>div+div { border-left: 1px solid #efeff5; }.stat-icon { color: #8a70df; font-size: 17px; }.report-stats strong { color: #333650; font-size: 15px; }.report-stats small { color: #999bad; font-size: 8px; font-weight: 800; letter-spacing: .08em; }.report-date { margin: 23px 0 0; color: #a4a6b6; font-size: 9px; }
.report-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 18px; }.button-quiet { color: #747890; background: transparent; }.report-footnote { color: #9a9cac; text-align: center; font-size: 10px; }
.modal-backdrop { position: fixed; z-index: 10; inset: 0; display: grid; place-items: center; padding: 18px; background: #10142bc9; backdrop-filter: blur(4px); }.name-dialog { position: relative; width: min(100%, 410px); padding: 34px; border-radius: 18px; background: white; box-shadow: 0 22px 70px #090b1d66; }.dialog-close { position: absolute; top: 11px; right: 15px; border: 0; color: #9295a6; background: transparent; font-size: 24px; }.dialog-icon { display: grid; place-items: center; width: 43px; height: 43px; margin-bottom: 18px; border-radius: 13px; color: #7558dc; background: #f0edff; font-size: 23px; }.name-dialog .eyebrow { color: #7962cb; }.name-dialog h2 { margin: 10px 0 5px; color: #242847; font-size: 25px; letter-spacing: -.04em; }.name-dialog p { margin: 0 0 20px; color: #85889b; font-size: 12px; }.name-dialog label { display: block; margin-bottom: 7px; color: #555974; font-size: 11px; font-weight: 700; }.name-dialog input { height: 43px; padding: 0 12px; font-size: 12px; }.dialog-start { width: 100%; margin-top: 15px; min-height: 46px; }.toast { position: fixed; z-index: 20; right: 22px; bottom: 20px; max-width: min(390px, calc(100vw - 40px)); padding: 12px 16px; border-radius: 10px; color: white; background: #292c48; box-shadow: 0 7px 22px #15162b33; font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s, transform .2s; }.toast.show { opacity: 1; transform: translateY(0); }

@keyframes twinkle { 0%, 100% { opacity: .6; transform: scale(.9) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(15deg); } }
@keyframes bump { 0%, 100% { transform: scale(.83) translateY(0); } 28% { transform: scale(.83) translateY(-47px); } 52% { transform: scale(.83) translateY(0); } 70% { transform: scale(.83) translateY(-9px); } 85% { transform: scale(.83) translateY(0); } }
@keyframes fall { 0% { transform: scale(.83) translateY(0) rotate(0); } 45% { transform: scale(.83) translateY(-53px) rotate(-10deg); } 100% { transform: scale(.83) translateY(13px) rotate(35deg); opacity: .45; } }
@keyframes popup { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.8); } 20%, 65% { opacity: 1; transform: translate(-50%, -9px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -26px) scale(.9); } }
@keyframes pulse { to { transform: scale(1.08); } }

@media (max-width: 800px) {
  .topbar { padding: 0 23px; }.topbar-note { display: none; }.hero { padding: 31px; }.hero-art { width: 205px; flex-basis: 205px; margin-right: 0; transform: scale(.85); transform-origin: center right; }
  .builder-grid { grid-template-columns: 1fr; }.side-column { display: grid; grid-template-columns: 1fr 1fr; }.tip-card { grid-row: span 2; }.mini-game-card { align-self: start; }
}
@media (max-width: 560px) {
  .view { padding-right: 16px; padding-left: 16px; }.topbar { height: 65px; padding: 0 17px; }.topbar-badge { padding: 7px 8px; font-size: 8px; }
  .hero { min-height: auto; margin: 18px 0; padding: 28px 23px 24px; }.hero h1 { font-size: 34px; }.hero-description { font-size: 12px; }.hero-pills { gap: 6px; }.hero-pills span { padding: 7px 8px; font-size: 9px; }.hero-art { display: none; }
  .panel { padding: 22px 19px; }.settings-grid { gap: 14px 10px; }.field-group label { min-height: 25px; font-size: 9px; }.source-tab { padding-right: 10px; padding-left: 10px; }
  .side-column { display: flex; }.tip-card { min-height: 245px; }.game-topline .game-brand { display: none; }.game-progress-row { margin-top: 23px; }
  .stage-sky { min-height: 560px; padding: 29px 16px 70px; }.stage-question { margin-bottom: 20px; }.stage-question h1 { font-size: 22px; }.answer-grid { grid-template-columns: 1fr; gap: 9px; }.answer-button { min-height: 58px; font-size: 12px; }.countdown-wrap { right: 13px; bottom: 72px; }.game-feedback { bottom: 83px; max-width: 68%; white-space: normal; }.game-hero { left: calc(50% - 27px); }
  .report-card { padding: 32px 16px 23px; }.report-card h1 { font-size: 26px; }.report-actions { flex-direction: column; }.report-actions .button { width: 100%; }.report-private { font-size: 8px; }.report-stats small { font-size: 7px; }.report-stats strong { font-size: 13px; }
}
@media print {
  body { background: white; }.topbar, #builderView, #gameView, .report-topline, .report-actions, .report-footnote { display: none !important; }#reportView { display: block !important; max-width: none; padding: 25mm 15mm; }.report-card { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; }.report-confetti { color: #ddd; }
}

/* Teacher accounts, editor, dashboard, and student sharing flow */
.auth-view { padding-top: 1px; }
.auth-hero { min-height: 285px; margin-top: 28px; }
.hero-character { position: absolute; z-index: 1; left: 112px; bottom: 40px; width: 56px; height: 90px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 9px 0 #14193655); }
.auth-card { max-width: 520px; margin: 0 auto; padding: 27px 34px; }
.auth-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 4px; border-radius: 11px; background: #f4f3fa; }
.auth-tab { min-height: 38px; border: 0; border-radius: 8px; color: #81849a; background: transparent; font-size: 11px; font-weight: 800; }
.auth-tab.active { color: #5d46c4; background: white; box-shadow: 0 2px 7px #28234812; }
.auth-title { margin: 21px 0 17px; }.auth-title h2 { margin: 7px 0 4px; font-size: 23px; letter-spacing: -.04em; }.auth-title p { margin: 0; color: var(--muted); font-size: 11px; }
.auth-form>label { display: block; margin: 12px 0 6px; color: #515570; font-size: 10px; font-weight: 700; }
.auth-form>input { height: 41px; padding: 0 11px; font-size: 11px; }
.label-hint { color: #9396a9; font-weight: 500; }
.auth-submit { width: 100%; justify-content: space-between; margin-top: 17px; }
.auth-message { min-height: 0; margin: 0; color: #c54c5b; font-size: 11px; line-height: 1.5; }.auth-message:not(:empty) { margin-top: 12px; }
.auth-privacy { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: #85899e; text-align: center; font-size: 10px; }
.dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 36px 0 21px; }.dashboard-heading h1, .editor-title h1 { margin: 9px 0 5px; color: var(--ink); font-size: clamp(26px, 3vw, 36px); letter-spacing: -.045em; }.dashboard-heading h1 span:first-child { color: var(--purple); }.dashboard-heading p, .editor-title p { margin: 0; color: var(--muted); font-size: 12px; }.wave { color: #e6a642; font-size: 19px; }.dashboard-heading-actions { display: flex; gap: 9px; }
.dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-bottom: 17px; }.stat-card { display: flex; align-items: center; gap: 13px; min-height: 83px; padding: 15px 19px; border: 1px solid #ececf4; border-radius: 14px; background: white; }.stat-card .stat-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #7255d8; background: #f0edff; font-size: 19px; }.stat-card strong, .stat-card small { display: block; }.stat-card strong { color: #292c49; font-size: 22px; }.stat-card small { margin-top: 3px; color: #9295a9; font-size: 8px; font-weight: 800; letter-spacing: .09em; }
.dashboard-panel, .results-panel, .individual-panel { margin-bottom: 17px; padding: 23px 25px; }.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.section-heading h2 { margin: 0 0 4px; font-size: 16px; letter-spacing: -.02em; }.section-heading p { margin: 0; color: var(--muted); font-size: 10px; }.section-heading>.button, .results-actions { flex: 0 0 auto; }.results-actions { display: flex; gap: 8px; }
.activity-list { display: flex; flex-direction: column; margin-top: 18px; }.activity-card { display: grid; grid-template-columns: minmax(170px, 1fr) auto; gap: 9px 18px; align-items: center; padding: 15px 0; border-top: 1px solid #efeff5; }.activity-info h3 { margin: 0; color: #343650; font-size: 13px; }.activity-info p { margin: 5px 0 0; color: #9295a9; font-size: 10px; }.activity-status { padding: 6px 9px; border-radius: 20px; font-size: 8px; font-weight: 800; letter-spacing: .05em; }.activity-status.published { color: #16845e; background: #e8f9ef; }.activity-status.draft { color: #6d65a0; background: #f0eff8; }.activity-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 7px; }.activity-actions .button { min-height: 33px; padding: 0 11px; font-size: 10px; }.button-share { border: 1px solid #dff2e7; color: #16845e; background: #f0faf4; }.button-delete { border: 1px solid #f4e5e7; color: #bd5d68; background: white; }
.empty-state { padding: 28px 12px; text-align: center; }.empty-state>span { display: inline-grid; place-items: center; width: 45px; height: 45px; border-radius: 14px; color: var(--purple); background: #f0edff; font-size: 22px; }.empty-state h3 { margin: 11px 0 5px; font-size: 15px; }.empty-state p { margin: 0 0 14px; color: var(--muted); font-size: 11px; }.empty-inline, .loading-inline { padding: 22px 8px; color: #8a8da2; text-align: center; font-size: 11px; }.table-wrap { width: 100%; margin-top: 17px; overflow-x: auto; }.table-wrap table { width: 100%; border-collapse: collapse; white-space: nowrap; }.table-wrap th { padding: 11px 10px; color: #898ca1; background: #f8f8fc; text-align: left; font-size: 8px; letter-spacing: .07em; }.table-wrap td { padding: 12px 10px; border-bottom: 1px solid #efeff5; color: #545872; font-size: 10px; }.result-badge { padding: 5px 8px; border-radius: 12px; font-size: 8px; font-weight: 800; }.result-badge.passed { color: #18835d; background: #e9f9ef; }.result-badge.failed { color: #bd5964; background: #fff0f1; }.detail-button { min-height: 28px; padding: 0 8px; font-size: 9px; }.individual-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 18px; }.individual-answer { padding: 14px; border: 1px solid #e8e8ef; border-left: 3px solid #ef7581; border-radius: 10px; background: #fffafa; }.individual-answer.is-correct { border-left-color: #29b67b; background: #f6fcf8; }.individual-answer strong { font-size: 11px; }.individual-answer p { margin: 8px 0 0; color: #656981; font-size: 10px; line-height: 1.5; }.individual-answer small { display: block; margin-top: 9px; color: #999bad; font-size: 9px; }
.editor-top { display: flex; align-items: center; justify-content: space-between; margin: 22px 0; }.editor-title { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }.draft-badge { padding: 8px 10px; border-radius: 16px; color: #6650bc; background: #f0edff; font-size: 8px; font-weight: 800; letter-spacing: .06em; }.share-notice { display: grid; grid-template-columns: 1fr minmax(280px, 1fr); align-items: center; gap: 16px; margin-bottom: 17px; padding: 17px 19px; border: 1px solid #d8f0e2; border-radius: 13px; background: #f0faf4; }.share-notice strong { color: #277453; font-size: 12px; }.share-notice p { margin: 4px 0 0; color: #718a7c; font-size: 10px; }.share-link-row { display: flex; gap: 7px; }.share-link-row input { min-width: 0; height: 38px; padding: 0 9px; color: #596278; font-size: 10px; }.share-link-row .button { flex: 0 0 auto; min-height: 38px; padding: 0 11px; font-size: 10px; }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(255px, .8fr); align-items: start; gap: 17px; }.editor-main { display: flex; flex-direction: column; gap: 15px; }.editor-main>.panel { padding: 23px 25px; }.form-label { display: block; margin: 18px 0 7px; color: #515570; font-size: 10px; font-weight: 700; }.form-label+input { height: 41px; padding: 0 11px; font-size: 11px; }.source-status { min-height: 0; margin: 6px 0 0; color: #6e58d1; font-size: 10px; }.source-status:not(:empty) { min-height: 15px; }.editor-main .settings-grid { margin-top: 15px; }.editor-main #generateButton { margin-top: 7px; }.question-panel .section-heading { align-items: center; }.question-panel .panel-heading { gap: 11px; }.question-panel .section-heading>.section-heading { width: 100%; }.question-panel .section-heading .button { min-height: 35px; padding: 0 11px; font-size: 10px; }
.question-editor { display: flex; flex-direction: column; gap: 12px; margin-top: 17px; }.question-card { padding: 16px; border: 1px solid #ebebf3; border-radius: 12px; background: #fcfcff; }.question-card-top { display: flex; justify-content: space-between; align-items: center; }.question-number { color: #7761ca; font-size: 8px; font-weight: 800; letter-spacing: .1em; }.question-remove { border: 0; color: #bc6370; background: transparent; font-size: 9px; }.question-card .form-label { margin: 12px 0 6px; }.question-card textarea { min-height: 58px; padding: 9px; font-size: 11px; }.option-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.option-edit { display: flex; align-items: center; gap: 6px; }.option-edit-key { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 23px; border-radius: 7px; color: #6b54c5; background: #efecff; font-size: 9px; font-weight: 800; }.option-edit input { min-width: 0; height: 34px; padding: 0 8px; font-size: 10px; }.answer-select-label { margin-top: 13px !important; }.correct-select { display: block; height: 36px; margin-top: 6px; padding: 0 9px; font-size: 10px; }.editor-aside { display: flex; flex-direction: column; gap: 13px; }.publish-panel { padding: 19px; }.publish-panel>strong { font-size: 13px; }.publish-panel>p { margin: 6px 0 13px; color: var(--muted); font-size: 10px; line-height: 1.55; }.publish-panel>.button { width: 100%; margin-top: 8px; }.publish-panel .button-primary { min-height: 46px; }.save-status { color: #16845e !important; }.save-status.error { color: #c54c5b !important; }
.student-brand { display: flex; align-items: center; justify-content: space-between; margin: 25px 0; }.student-brand>span { color: #898ca0; font-size: 9px; font-weight: 800; letter-spacing: .11em; }.dark-brand { color: var(--navy); }.dark-brand .brand-accent { color: var(--purple); }.student-intro { max-width: 600px; margin: 50px auto; padding: 38px; text-align: center; }.student-intro h1 { margin: 12px 0 7px; color: var(--ink); font-size: 32px; letter-spacing: -.045em; }.student-intro>p { margin: 0; color: var(--muted); font-size: 12px; }.student-intro form { max-width: 340px; margin: 25px auto 0; text-align: left; }.student-intro label { display: block; margin-bottom: 7px; color: #515570; font-size: 11px; font-weight: 700; }.student-intro input { height: 43px; padding: 0 12px; font-size: 12px; }.student-intro form .button { width: 100%; margin-top: 13px; }.student-report { max-width: 690px; margin: 23px auto; padding: 35px 25px; text-align: center; }.student-report>.button { margin-top: 20px; }.student-thanks { color: #16845e; font-size: 11px; }.student-thanks.error { color: #bd5964; }.invalid-survey { margin-top: 40px; }
.student-player { position: absolute; z-index: 2; bottom: 25px; left: 50%; width: 52px; height: 76px; transform: translateX(-50%); pointer-events: none; }.student-player img { position: absolute; bottom: 0; left: 50%; width: 45px; height: 72px; object-fit: contain; image-rendering: pixelated; transform: translateX(-50%); transform-origin: center bottom; }.student-player img.sprite-jump { animation: characterJump .64s ease; }.student-player img.sprite-bad-jump { animation: characterBadJump .68s ease; }
.toast-error { background: #a74350; }
.question-heading-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.preview-dialog { position: relative; width: min(100%, 610px); padding: 32px; border-radius: 17px; background: white; box-shadow: 0 22px 70px #090b1d66; }.preview-dialog h2 { margin: 12px 28px 6px 0; color: var(--ink); font-size: 20px; line-height: 1.4; }.preview-counter { margin: 0 0 14px; color: #898ca0; font-size: 8px; font-weight: 800; letter-spacing: .08em; }.preview-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.preview-option { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 9px; border: 1px solid #e8e8f0; border-radius: 10px; color: #555974; background: #fafaff; font-size: 10px; }.preview-option.is-answer { border-color: #c4ecd5; color: #19784f; background: #f0faf4; }.preview-option>span:nth-child(2) { min-width: 0; flex: 1; overflow-wrap: anywhere; }.preview-option strong { font-size: 8px; white-space: nowrap; }.preview-navigation { display: flex; justify-content: space-between; gap: 9px; margin-top: 18px; }
@keyframes characterJump { 0%, 100% { margin-bottom: 0; } 34% { margin-bottom: 36px; } 63% { margin-bottom: 0; } 82% { margin-bottom: 9px; } }
@keyframes characterBadJump { 0%, 100% { margin-bottom: 0; } 32% { margin-bottom: 19px; } 63% { margin-bottom: 0; } }
@media (max-width: 800px) {
  .editor-layout { grid-template-columns: 1fr; }.editor-aside { display: grid; grid-template-columns: 1fr 1fr; }.editor-aside .tip-card { grid-row: span 1; }.share-notice { grid-template-columns: 1fr; }.activity-card { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (max-width: 560px) {
  .auth-hero { margin-top: 17px; }.auth-card { padding: 21px 19px; }.dashboard-heading { align-items: flex-start; flex-direction: column; margin-top: 25px; }.dashboard-heading-actions { width: 100%; }.dashboard-heading-actions .button-primary { margin-left: auto; }.dashboard-stats { grid-template-columns: 1fr; gap: 8px; }.stat-card { min-height: 67px; }.dashboard-panel, .results-panel, .individual-panel { padding: 18px 15px; }.section-heading { align-items: flex-start; }.section-heading h2 { font-size: 14px; }.section-heading p { line-height: 1.5; }.results-actions { display: grid; grid-template-columns: 1fr 1fr; }.activity-card { gap: 9px; }.activity-status { font-size: 7px; }.activity-actions .button { font-size: 9px; }.individual-answers { grid-template-columns: 1fr; }
  .editor-title { align-items: flex-start; flex-direction: column; }.editor-title h1 { font-size: 27px; }.editor-top .eyebrow { font-size: 8px; }.editor-main>.panel { padding: 20px 16px; }.question-panel .section-heading { align-items: flex-start; flex-direction: column; }.question-panel .section-heading .panel-heading h2 { font-size: 13px; }.editor-aside { display: flex; }.share-link-row { align-items: stretch; flex-direction: column; }.share-link-row .button { width: 100%; }.student-intro { margin: 24px auto; padding: 28px 19px; }.student-intro h1 { font-size: 27px; }.student-brand>span { font-size: 7px; }.student-report { padding: 30px 13px; }.student-report .report-stats small { font-size: 6px; }.question-heading-actions { width: 100%; }.question-heading-actions .button { flex: 1; }.preview-dialog { padding: 26px 18px; }.preview-options { grid-template-columns: 1fr; }
}