/* 情书抛物线 UI — "a high-schooler's notebook". Owner: ui-designer. */
@import url('../../assets/fonts/kuaile/kuaile.css');
@import url('../../assets/fonts/hand/hand.css');

:root {
  --paper: #fffdf5;
  --paper-2: #f7f0dc;
  --rule: #c5daf0;
  --margin: #f2a3a3;
  --ink: #2a3350;
  --pencil: #6b6f7d;
  --red: #e23b3b;
  --pink: #ff7aa8;
  --pink-soft: #ffb3d1;
  --hl-yellow: #fff36d;
  --hl-pink: #ffb3d1;
  --hl-green: #b5f2a1;
  --hl-blue: #a9dcff;
  --tape: rgba(255, 214, 140, .82);
  --sticky: #ffe98a;
  --shadow: 0 8px 22px rgba(40, 28, 16, .3);
  --sys: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', 'WenQuanYi Micro Hei', 'Droid Sans Fallback', sans-serif;
  --font-display: 'QS KuaiLe', var(--sys);
  --font-hand: 'QS Hand', 'Kaiti SC', 'STKaiti', 'KaiTi', 'AR PL UKai CN', 'AR PL KaitiM GB', var(--font-display);
  --lh: 34px;
  --u: clamp(12px, 1.6vmin + 6px, 18px);
}

#ui-root.qs-ui { z-index: 100; font-family: var(--font-display); color: var(--ink); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.qs-ui * { box-sizing: border-box; }
.qs-ui .qs-layer { position: absolute; inset: 0; pointer-events: none; }
.qs-layer-hud { z-index: 10; } .qs-layer-world { z-index: 20; overflow: hidden; } .qs-layer-reveal { z-index: 30; }
.qs-layer-talk { z-index: 40; } .qs-layer-caption { z-index: 45; overflow: hidden; } .qs-layer-screen { z-index: 50; }
.qs-layer-modal { z-index: 70; } .qs-layer-toast { z-index: 80; }
.qs-ui .qs-i, .qs-ui button, .qs-ui input, .qs-ui textarea { pointer-events: auto; }
.qs-ui [hidden] { display: none !important; }
.qs-ui textarea { user-select: text; -webkit-user-select: text; }
.qs-ico { width: 100%; height: 100%; display: block; }
.qs-ui kbd { font-family: var(--font-display); font-size: .86em; display: inline-block; min-width: 1.7em; padding: 0 .4em; margin: 0 .1em; border: 2px solid currentColor; border-bottom-width: 3.5px; border-radius: 6px; text-align: center; line-height: 1.35; background: rgba(255, 255, 255, .16); }

/* ---------- shared paper bits ---------- */
.qs-paper {
  background:
    linear-gradient(90deg, transparent 2.4em, var(--margin) 2.4em, var(--margin) calc(2.4em + 2px), transparent calc(2.4em + 2px)),
    repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 1.5px), var(--rule) calc(var(--lh) - 1.5px) var(--lh)),
    var(--paper);
  background-position: 0 0, 0 18px, 0 0;
  box-shadow: var(--shadow);
  border-radius: 3px;
}
.qs-sticky { background: var(--sticky); box-shadow: 0 2px 0 rgba(0, 0, 0, .06), 0 10px 18px -6px rgba(40, 28, 16, .45); border-radius: 2px 2px 14px 2px / 2px 2px 8px 2px; }
.qs-tape { position: absolute; width: 86px; height: 24px; background: var(--tape); top: -11px; left: 50%; transform: translateX(-50%) rotate(-3deg); clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%); opacity: .95; pointer-events: none; }
.qs-tape-l { left: 14%; transform: translateX(-50%) rotate(-12deg); background: rgba(255, 179, 209, .85); }
.qs-tape-r { left: 86%; transform: translateX(-50%) rotate(10deg); background: rgba(169, 220, 255, .85); }

/* ---------- buttons ---------- */
.qs-btn {
  font-family: var(--font-display); font-size: calc(var(--u) * 1.1); color: var(--ink); cursor: pointer;
  background: #fff; border: 2.5px solid var(--ink); padding: .38em 1.1em .42em;
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  box-shadow: 3px 3px 0 var(--ink); transition: transform .08s, box-shadow .08s, background .15s; outline: none; white-space: nowrap;
}
.qs-btn:hover { transform: translate(-1px, -2px) rotate(-1deg); box-shadow: 4px 5px 0 var(--ink); background: var(--hl-yellow); }
.qs-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.qs-btn:focus-visible { outline: 3px dashed var(--pink); outline-offset: 3px; }
.qs-btn.qs-primary { background: var(--pink); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.qs-btn.qs-primary:hover { background: #ff5f95; }

/* ---------- modal panels ---------- */
.qs-modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(28, 22, 34, .42); animation: qs-fade .2s both; padding: 16px; }
.qs-panel { position: relative; width: min(440px, 94vw); padding: 26px 26px 20px; transform: rotate(-1deg); animation: qs-pop .28s cubic-bezier(.2, 1.5, .4, 1) both; }
.qs-panel h2 { margin: 0 0 14px; font-weight: 400; font-size: calc(var(--u) * 1.6); text-align: center; }
.qs-panel-foot { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.qs-set-row { display: grid; grid-template-columns: 6.2em 1fr 2.6em; align-items: center; gap: 10px; margin: 10px 0; font-size: var(--u); cursor: pointer; }
.qs-set-row output { font-family: var(--font-display); text-align: right; color: var(--pencil); }
.qs-range { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; cursor: pointer; }
.qs-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #f7c948, #ff9e6b); border: 2px solid var(--ink); }
.qs-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%; background: var(--pink); border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.qs-range::-moz-range-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #f7c948, #ff9e6b); border: 2px solid var(--ink); }
.qs-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--pink); border: 2.5px solid var(--ink); }
.qs-set-check { grid-template-columns: 6.2em auto 1fr; }
.qs-set-voice { grid-template-columns: 6.2em 1fr; cursor: default; }
.qs-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.qs-seg-btn { font-size: calc(var(--u) * .9); padding: .22em .7em .26em; box-shadow: 2px 2px 0 var(--ink); background: #fff; opacity: .8; }
.qs-seg-btn[aria-pressed="true"] { background: var(--hl-pink); opacity: 1; transform: rotate(-2deg); }
.qs-set-note { margin: -4px 0 8px calc(6.2em + 10px); font-size: calc(var(--u) * .78); line-height: 1.4; color: var(--red); }
.qs-check { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qs-check-box { width: 28px; height: 28px; border: 2.5px solid var(--ink); border-radius: 6px 9px 5px 8px; background: #fff; position: relative; }
.qs-check:checked + .qs-check-box::after { content: ''; position: absolute; left: 6px; top: -4px; width: 10px; height: 20px; border: solid var(--red); border-width: 0 4px 4px 0; transform: rotate(40deg); }
.qs-check:focus-visible + .qs-check-box { outline: 3px dashed var(--pink); outline-offset: 2px; }

/* how-to */
.qs-howto { width: min(520px, 94vw); background: #fff6a8; }
.qs-howto-row { display: flex; align-items: center; gap: 14px; margin: 12px 0; font-size: calc(var(--u) * .95); line-height: 1.6; }
.qs-howto-ico { flex: 0 0 52px; height: 52px; background: #fff; border: 2px solid var(--ink); border-radius: 50%; padding: 6px; transform: rotate(-4deg); }
.qs-howto-txt b { background: linear-gradient(transparent 55%, var(--hl-pink) 55%); font-weight: 400; }
.qs-howto-end { text-align: center; font-family: var(--font-hand); font-size: calc(var(--u) * 1.35); margin: 14px 0 0; color: var(--red); }

/* pause */
.qs-pause { text-align: center; width: min(340px, 90vw); background: #c8ecff; }
.qs-pause-sub { margin: -6px 0 16px; font-family: var(--font-hand); font-size: calc(var(--u) * 1.2); color: var(--pencil); }
.qs-pause-btns { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.qs-pause-btns .qs-btn { min-width: 9em; }
.qs-pause-hint { margin-top: 14px; font-size: calc(var(--u) * .8); color: var(--pencil); }

/* ---------- title ---------- */
.qs-title { position: absolute; inset: 0; display: flex; align-items: center; padding-left: max(5vw, 20px); animation: qs-fade .5s both; }
.qs-title::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 22, 36, .45), rgba(30, 22, 36, .08) 55%, transparent); pointer-events: none; }
.qs-title-card { position: relative; width: min(440px, 90vw); padding: 30px 28px 22px; transform: rotate(-1.5deg); --lh: 30px; animation: qs-drop .6s cubic-bezier(.2, 1.3, .4, 1) both; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.qs-logo { position: relative; width: 100%; text-align: center; padding-top: 50px; }
.qs-logo-arc { position: absolute; left: -4%; top: -14px; width: 108%; height: auto; overflow: visible; }
.qs-logo-arc .dash { fill: none; stroke: var(--pencil); stroke-width: 2.4; stroke-dasharray: 5 7; opacity: .7; }
.qs-logo-arc .trail { fill: none; stroke: var(--pink); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; animation: qs-trail 2.8s linear infinite; }
.qs-logo-arc .heart { fill: var(--pink); stroke: var(--ink); stroke-width: 5; transform-box: fill-box; transform-origin: center; animation: qs-heartbeat 2.8s infinite; }
.qs-logo-arc .ball circle { fill: var(--paper); stroke: var(--ink); stroke-width: 2.4; }
.qs-logo-arc .ball path { fill: none; stroke: #9aa6bd; stroke-width: 1.6; }
.qs-logo-title { margin: 0; font-weight: 400; font-size: clamp(44px, 7.4vmin + 14px, 76px); line-height: 1.1; letter-spacing: .04em; white-space: nowrap; text-shadow: 3px 3px 0 #fff; }
.qs-logo-title .w1 { color: var(--red); background: linear-gradient(transparent 62%, var(--hl-yellow) 62%, var(--hl-yellow) 92%, transparent 92%); padding: 0 .06em; }
.qs-logo-title .w2 { color: var(--ink); background: linear-gradient(transparent 62%, var(--hl-pink) 62%, var(--hl-pink) 92%, transparent 92%); padding: 0 .06em; display: inline-block; transform: rotate(2deg) translateY(3px); }
.qs-logo-en { font-family: var(--font-display); font-size: calc(var(--u) * .95); color: var(--pencil); letter-spacing: .3em; margin-top: 4px; }
.qs-gender { display: flex; gap: 12px; }
.qs-gbtn { font-size: calc(var(--u) * 1.05); padding: .32em .9em; background: #fff; opacity: .78; }
.qs-gbtn[aria-pressed="true"] { opacity: 1; transform: rotate(-2deg) scale(1.06); }
.qs-g-m[aria-pressed="true"] { background: var(--hl-blue); }
.qs-g-f[aria-pressed="true"] { background: var(--hl-pink); }
.qs-gbtn[aria-pressed="true"]::after { content: ''; display: inline-block; width: .5em; height: .9em; margin-left: .35em; border: solid var(--red); border-width: 0 3px 3px 0; transform: rotate(40deg) translateY(-2px); }
.qs-btn-start { font-size: calc(var(--u) * 1.75); padding: .26em 2.2em .3em; background: var(--pink); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .2); letter-spacing: .3em; text-indent: .3em; box-shadow: 4px 4px 0 var(--ink); animation: qs-wiggle 3s 1.2s infinite; }
.qs-btn-start:hover { background: #ff5f95; animation: none; }
.qs-title-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
.qs-link { border: none; box-shadow: none; background: transparent; font-size: var(--u); padding: .3em .6em; text-decoration: underline wavy rgba(42, 51, 80, .45); text-underline-offset: 5px; border-radius: 6px; }
.qs-link:hover { box-shadow: none; background: var(--hl-yellow); transform: rotate(-2deg); }
.qs-badge { display: inline-block; margin-left: .35em; font-size: .78em; padding: 0 .45em; border-radius: 10px; background: var(--ink); color: #fff; vertical-align: 1px; }
.qs-title-foot { position: absolute; right: 3vw; bottom: 3vh; font-family: var(--font-hand); font-size: calc(var(--u) * 1.3); color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); transform: rotate(-2deg); pointer-events: none; }

/* ---------- letter editor ---------- */
.qs-letter { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(30, 22, 36, .25), rgba(30, 22, 36, .6)); animation: qs-fade .35s both; padding: 12px; }
.qs-letter-head { font-size: calc(var(--u) * 1.7); color: #fff; text-shadow: 0 2px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink); margin-bottom: 4px; display: flex; flex-direction: column; align-items: center; transition: opacity .3s; }
.qs-letter-head small { font-family: var(--font-hand); font-size: .62em; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); letter-spacing: .05em; }
.qs-letter-stage { position: relative; display: flex; flex-direction: column; align-items: center; width: min(560px, 96vw); }
.qs-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin-bottom: -8px; position: relative; z-index: 2; transition: opacity .3s, transform .3s; }
.qs-tab { font-size: var(--u); padding: .3em .8em .7em; border: none; box-shadow: 0 3px 6px rgba(0, 0, 0, .25); border-radius: 3px 3px 0 0; transform: translateY(6px) rotate(-1deg); opacity: .9; }
.qs-tab:nth-child(even) { transform: translateY(6px) rotate(1.5deg); }
.qs-tab:hover { box-shadow: 0 3px 6px rgba(0, 0, 0, .25); transform: translateY(0) rotate(0); }
.qs-tab[aria-pressed="true"] { transform: translateY(-4px) rotate(0); opacity: 1; box-shadow: 0 -2px 0 var(--ink) inset, 0 4px 10px rgba(0, 0, 0, .3); }
.qs-tab-yellow { background: #ffe98a; } .qs-tab-pink { background: #ffc4dc; } .qs-tab-blue { background: #c2e4ff; }
.qs-tab-green { background: #c9f2b8; } .qs-tab-orange { background: #ffd0a8; } .qs-tab-purple { background: #e2d0ff; }
.qs-tab-mine { background: #fff; }
.qs-tab-mine::before { content: ''; display: inline-block; width: 1em; height: .26em; margin-right: .3em; background: linear-gradient(90deg, #f7c948 70%, #f2a3a3 70%); border: 1.5px solid var(--ink); border-radius: 0 3px 3px 0; transform: rotate(-30deg) translateY(-2px); }
.qs-paper-wrap { position: relative; width: 100%; filter: drop-shadow(0 10px 14px rgba(30, 20, 10, .35)); transform-origin: 50% 50%; will-change: transform; }
.qs-paper-wrap.is-gone { opacity: 0; transition: opacity .12s; }
.qs-letterpaper { --lh: 38px; --k: 0; position: relative; width: 100%; height: min(300px, 48vh); padding: 22px 26px 18px 3.4em; transform: rotate(-.6deg); box-shadow: none; overflow: hidden; }
.qs-letterpaper::after { /* fold creases (letter folded in thirds + once vertically) */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 32.6%, rgba(0, 0, 0, .07) 33.2%, rgba(255, 255, 255, .7) 33.7%, transparent 35%),
    linear-gradient(180deg, transparent 65.6%, rgba(0, 0, 0, .07) 66.2%, rgba(255, 255, 255, .7) 66.7%, transparent 68%),
    linear-gradient(90deg, transparent 49.4%, rgba(0, 0, 0, .05) 50%, rgba(255, 255, 255, .5) 50.4%, transparent 51.5%),
    radial-gradient(ellipse at 30% 20%, transparent 60%, rgba(160, 130, 80, .12));
}
.qs-letter-text, .qs-letter-input { font-family: var(--font-hand); font-size: calc(var(--lh) * .68); line-height: var(--lh); color: #23306b; white-space: pre-wrap; word-break: break-all; }
.qs-letter-text { min-height: calc(var(--lh) * 3); filter: blur(calc(var(--k) * 1.5px)); opacity: calc(1 - var(--k) * .5); }
.qs-letter-input { display: none; width: 100%; height: calc(var(--lh) * 4); resize: none; border: none; outline: none; background: transparent; padding: 0; margin: 0; caret-color: var(--red); }
.qs-letter-input::placeholder { color: #9aa6bd; }
.qs-letterpaper.is-custom .qs-letter-text { display: none; }
.qs-letterpaper.is-custom .qs-letter-input { display: block; }
.qs-letter-count { display: none; position: absolute; right: 18px; bottom: 12px; font-size: calc(var(--u) * .85); color: var(--pencil); }
.qs-letter-count.is-full { color: var(--red); }
.qs-letterpaper.is-custom .qs-letter-count { display: block; }
.qs-letterpaper.is-custom .qs-letter-sign { display: none; }
.qs-letterpaper.is-empty { animation: qs-shake .4s; }
.qs-letterpaper.is-empty .qs-letter-input::placeholder { color: var(--red); }
.qs-letter-sign { position: absolute; right: 26px; bottom: 14px; font-family: var(--font-hand); font-size: calc(var(--u) * 1.15); color: var(--pencil); opacity: calc(1 - var(--k)); }
.qs-crease-svg { position: absolute; inset: 0; pointer-events: none; opacity: var(--k); z-index: 1; }
.qs-crease-svg svg { width: 100%; height: 100%; }
.qs-crease-svg path { fill: none; stroke: rgba(90, 80, 60, .45); stroke-width: .5; vector-effect: non-scaling-stroke; stroke-width: 1.6; }
.qs-letterpaper { background-color: var(--paper); }
.qs-btn-done { margin-top: 18px; font-size: calc(var(--u) * 1.35); background: var(--hl-yellow); transition: opacity .25s; }
.qs-letter.is-done .qs-tabs, .qs-letter.is-done .qs-btn-done, .qs-letter.is-done .qs-letter-head { opacity: 0; pointer-events: none; }
.qs-letter.is-done .qs-tabs { transform: translateY(-14px); }

/* crumple */
.qs-catcher { position: absolute; inset: 0; cursor: grab; z-index: 3; }
.qs-letter.is-holding .qs-catcher { cursor: grabbing; }
.qs-crumple-hint { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 10px; background: rgba(255, 253, 245, .95); border: 2.5px solid var(--ink); border-radius: 40px 14px 40px 14px / 14px 40px 14px 40px; box-shadow: 3px 3px 0 var(--ink); font-size: calc(var(--u) * 1.1); white-space: nowrap; z-index: 4; animation: qs-pop .3s .2s both; pointer-events: none; }
.qs-crumple-hint.is-out { opacity: 0; transition: opacity .2s; }
.qs-crumple-ring { width: 40px; height: 40px; }
.qs-crumple-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.qs-crumple-ring circle { fill: none; stroke-width: 12; }
.qs-crumple-ring .track { stroke: #e6e1d2; }
.qs-crumple-ring .fill { stroke: var(--pink); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; }
.qs-letter.is-holding .qs-crumple-ring { animation: qs-jitter .12s infinite; }
.qs-letter.is-crumple { background: radial-gradient(ellipse at center, rgba(30, 22, 36, .15), rgba(30, 22, 36, .55)); }
.qs-crumple-ball { position: absolute; left: 50%; top: 50%; width: clamp(90px, 18vmin, 150px); aspect-ratio: 1; transform: translate(-50%, -50%) scale(.6); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); z-index: 5; }
.qs-ball-svg { width: 100%; height: 100%; display: block; }

/* ---------- HUD ---------- */
.qs-hud { position: absolute; inset: 0; }
.qs-vignette { position: absolute; inset: 0; opacity: 0; transition: opacity .3s; }
.qs-vignette i { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 52%, rgba(226, 30, 40, .55) 100%); animation: qs-pulse .7s ease-in-out infinite alternate; }
.qs-objective { position: absolute; left: 16px; top: 18px; max-width: min(300px, 40vw); padding: 12px 14px 10px; font-size: var(--u); line-height: 1.35; transform: rotate(-2.5deg); opacity: 0; transition: opacity .3s; }
.qs-objective.is-on { opacity: .96; }
.qs-objective.is-new { animation: qs-pop .4s cubic-bezier(.2, 1.6, .4, 1); }
.qs-objective b { font-family: var(--font-display); font-weight: 400; display: inline-block; margin-right: .4em; padding: 0 .3em; background: var(--hl-pink); border-radius: 3px; transform: rotate(-3deg); }
.qs-objective .qs-tape { width: 60px; height: 18px; top: -9px; }
.qs-eye { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.qs-eye-sticker { position: relative; width: clamp(64px, 9vmin + 20px, 92px); aspect-ratio: 1; border-radius: 50%; background: var(--paper); border: 3px solid var(--ink); box-shadow: 2px 3px 0 rgba(42, 51, 80, .55), 0 6px 14px rgba(0, 0, 0, .25); transform: rotate(-4deg); transition: background .3s; }
.qs-eye-arc { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); transform: rotate(-90deg); overflow: visible; }
.qs-eye-arc circle { fill: none; stroke-width: 6; }
.qs-eye-arc .track { stroke: rgba(255, 255, 255, .55); }
.qs-eye-arc .fill { stroke: #8a8f99; stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; transition: stroke-dashoffset .15s; }
.qs-eye-face, .qs-eye-chalk { position: absolute; inset: 16% 10%; display: flex; align-items: center; justify-content: center; transition: opacity .25s, transform .25s; }
.qs-eye-svg { width: 100%; height: auto; overflow: visible; }
.qs-eye-chalk { opacity: 0; transform: scale(.6) rotate(-10deg); inset: 18%; }
.qs-eye.is-safe .qs-eye-face { opacity: 0; transform: scale(.7); }
.qs-eye.is-safe .qs-eye-chalk { opacity: 1; transform: scale(1) rotate(-6deg); }
.qs-eye.is-safe .qs-eye-sticker { background: #e6f7dc; }
.qs-eye-bang { position: absolute; right: -14px; top: -16px; font-size: 34px; line-height: 1; color: var(--red); -webkit-text-stroke: 2px #fff; paint-order: stroke fill; font-family: var(--font-display); opacity: 0; transform: scale(.3); transition: opacity .1s, transform .15s cubic-bezier(.2, 2, .4, 1); }
.qs-eye.is-warn .qs-eye-bang { opacity: 1; transform: scale(1) rotate(12deg); }
.qs-eye.is-warn .qs-eye-sticker { animation: qs-shake .25s infinite; background: #ffe2e2; }
.qs-eye.is-danger .qs-eye-sticker { background: #ffd6d6; border-color: var(--red); }
.qs-eye-label { margin-top: 6px; font-size: calc(var(--u) * .78); padding: 0 .55em; border-radius: 8px; color: #fff; background: rgba(42, 51, 80, .75); transform: rotate(-2deg); white-space: nowrap; }
.qs-eye-label:empty { display: none; }
.qs-eye-label.safe { background: #3a9b5c; } .qs-eye-label.warn { background: var(--red); animation: qs-pulse .3s infinite alternate; }
.qs-eye-label.watch { background: #e07a1c; } .qs-eye-label.danger { background: #b11d2a; }
.qs-timer { position: absolute; right: 16px; top: 14px; display: flex; align-items: center; gap: 4px; padding: 4px 12px 4px 6px; background: rgba(255, 253, 245, .92); border: 2.5px solid var(--ink); border-radius: 30px 12px 30px 12px / 12px 30px 12px 30px; box-shadow: 2px 3px 0 rgba(42, 51, 80, .5); transform: rotate(2deg); transition: opacity .3s; }
.qs-timer .qs-ico { width: 34px; height: 34px; }
.qs-timer-num { font-size: calc(var(--u) * 1.6); min-width: 1.6em; text-align: right; line-height: 1; }
.qs-timer.is-urgent { color: var(--red); border-color: var(--red); animation: qs-beat 1s infinite; }
.qs-timer.is-off, .qs-cross.is-off { opacity: 0; }
.qs-cross { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; --p: 0; transition: opacity .2s; }
.qs-cross svg { width: 100%; height: 100%; overflow: visible; }
.qs-cross .ring { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 5; opacity: 0; transition: opacity .15s; }
.qs-cross .power { fill: none; stroke: var(--pink); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 50% 50%; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .4)); }
.qs-cross .heart { fill: var(--pink); stroke: #fff; stroke-width: 7; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)); transition: opacity .2s; }
.qs-cross.is-charging .ring { opacity: 1; }
.qs-cross.is-charging .heart { transform: scale(calc(1 + var(--p) * .3)); }
.qs-cross.is-full svg { animation: qs-jitter .08s infinite; }
.qs-cross.is-full .power { stroke: #ff3d7f; filter: drop-shadow(0 0 6px #ff7aa8) drop-shadow(0 0 2px #fff); }
.qs-cross.is-exposed .power, .qs-cross.is-exposed .heart { stroke: var(--red); }
.qs-cross-book { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; opacity: 0; transform: scale(.5); transition: opacity .15s, transform .2s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }
.qs-cross.is-study .heart { opacity: 0; }
.qs-cross.is-study .qs-cross-book { opacity: 1; transform: scale(1) rotate(-6deg); }
.qs-will { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%) translateY(10px); display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .25s, transform .25s; }
.qs-will.is-on { opacity: 1; transform: translateX(-50%); }
.qs-will .qs-ico { width: 36px; height: 36px; background: rgba(255, 253, 245, .9); border: 2.5px solid var(--ink); border-radius: 50%; padding: 3px; }
.qs-will-bar { width: min(240px, 46vw); height: 16px; border: 2.5px solid var(--ink); border-radius: 10px; background: rgba(255, 253, 245, .85); overflow: hidden; }
.qs-will-bar i { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(-45deg, #7fc8ff 0 8px, #a9dcff 8px 16px); transition: width .1s; }
.qs-will.is-active .qs-will-bar { box-shadow: 0 0 12px #7fc8ff; }
.qs-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); color: #fff; font-size: calc(var(--u) * .95); white-space: nowrap; padding: 6px 16px; border-radius: 20px; background: rgba(30, 24, 40, .5); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); opacity: 0; transition: opacity .6s; }
.qs-hint.is-on { opacity: 1; transition: opacity .2s; }
.qs-touch { display: none; }
/* the first-person hand sits at the lower right → hold buttons go lower LEFT; flight nudge buttons lower right (below the PiP area) */
.qs-touch-l { position: absolute; left: 16px; bottom: 76px; }
.qs-touch-r { position: absolute; right: 16px; bottom: 76px; display: flex; gap: 12px; }
.qs-touch-small { width: 62px; height: 62px; font-size: 18px; background: rgba(169, 220, 255, .92); }
.qs-hud[data-phase="flight"] .qs-timer { visibility: hidden; }
.qs-hud.is-touch .qs-will { bottom: 176px; }
.qs-touch-btn { width: 84px; height: 84px; border-radius: 50%; font-family: var(--font-display); font-size: 17px; color: var(--ink); background: rgba(255, 233, 138, .9); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); touch-action: none; }
.qs-touch-btn.is-down { transform: translate(2px, 2px) scale(.95); box-shadow: 1px 1px 0 var(--ink); background: var(--hl-green); }
@media (pointer: coarse), (max-width: 768px) { .qs-touch { display: block; } .qs-hud.is-touch .qs-hint { bottom: 18px; } }

/* ---------- dialogue ---------- */
.qs-say { --c: #e8505b; position: absolute; left: 50%; bottom: max(4vh, 18px); width: min(820px, 94vw); transform: translateX(-50%); min-height: 96px; padding: 22px 28px 18px; background: var(--paper); border: 3px solid var(--ink); border-radius: 18px 6px 22px 8px / 8px 22px 6px 18px; box-shadow: 4px 5px 0 rgba(42, 51, 80, .7), 0 12px 30px rgba(0, 0, 0, .3); font-size: calc(var(--u) * 1.3); line-height: 1.55; }
.qs-say.is-in { animation: qs-say-in .2s both; }
.qs-say-name { position: absolute; left: 22px; top: -20px; padding: 3px 16px 4px; font-size: calc(var(--u) * 1.05); color: #fff; background: var(--c); border: 2.5px solid var(--ink); border-radius: 10px 4px 10px 4px; transform: rotate(-3deg); box-shadow: 2px 2px 0 var(--ink); }
.qs-say-text { min-height: 1.55em; }
.qs-ch { opacity: 0; }
.qs-ch.on { opacity: 1; }
.qs-say-next { position: absolute; right: 18px; bottom: 6px; color: var(--c); font-size: 18px; opacity: 0; }
.qs-say.is-done .qs-say-next { opacity: 1; animation: qs-bob .6s infinite alternate; }
.qs-say.is-narrator { background: rgba(30, 24, 40, .82); color: #fff; border-color: rgba(255, 255, 255, .7); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); font-family: var(--font-hand); font-size: calc(var(--u) * 1.45); text-align: center; }
.qs-say[data-mood="shout"], .qs-say[data-mood="angry"] { font-size: calc(var(--u) * 1.6); }
.qs-say[data-mood="shout"].is-in, .qs-say[data-mood="angry"].is-in { animation: qs-say-in .2s both, qs-shake .35s .1s; }
.qs-say[data-mood="angry"] { background: #fff1ef; }
.qs-say[data-mood="whisper"] { font-size: calc(var(--u) * 1.1); color: var(--pencil); font-style: italic; }
.qs-say[data-mood="love"], .qs-say[data-mood="shy"], .qs-say[data-mood="blush"] { background: #fff0f6; }
.qs-say[data-mood="sad"] { background: #eef4ff; }

/* ---------- bubbles ---------- */
.qs-bubble { position: absolute; left: 0; top: 0; max-width: min(260px, 60vw); padding: 8px 14px 9px; background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; font-size: calc(var(--u) * 1); line-height: 1.4; box-shadow: 2px 3px 0 rgba(42, 51, 80, .5); animation: qs-bubble-in .22s cubic-bezier(.2, 1.6, .4, 1) both; will-change: transform; --tail: 50%; }
.qs-bubble-tail { position: absolute; top: 100%; left: var(--tail); width: 24px; height: 18px; margin-left: -12px; margin-top: -3px; }
.qs-bubble-tail svg { display: block; width: 100%; height: 100%; overflow: visible; }
.qs-bubble-tail .f { fill: #fff; } .qs-bubble-tail .s { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.qs-bubble-shout { background: #fff36d; border-width: 3px; font-size: calc(var(--u) * 1.15); border-radius: 6px; }
.qs-bubble-shout .qs-bubble-tail .f { fill: #fff36d; }
.qs-bubble-think { border-radius: 40px; border-style: dashed; }
.qs-bubble.is-edge { opacity: .9; }
.qs-bubble.is-out { opacity: 0; transform-origin: bottom; transition: opacity .18s; }

/* ---------- captions ---------- */
.qs-caption { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.qs-cap-impact { --fs: 1; --cap: #fff; }
.qs-cap-impact .qs-cap-inner { position: relative; animation: qs-impact-in .38s cubic-bezier(.2, 1.7, .35, 1) both, qs-shake .45s .35s; }
.qs-cap-impact .qs-cap-lines { position: absolute; left: 50%; top: 50%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; background: repeating-conic-gradient(from 0deg, transparent 0 5.2deg, rgba(20, 16, 30, .2) 5.2deg 6deg); -webkit-mask: radial-gradient(circle, transparent 22vmin, rgba(0, 0, 0, .9) 60vmin); mask: radial-gradient(circle, transparent 22vmin, rgba(0, 0, 0, .9) 60vmin); animation: qs-fade .2s both; }
.qs-cap-impact .qs-cap-text { position: relative; font-size: calc(clamp(80px, 26vmin, 240px) * var(--fs)); line-height: 1.05; color: var(--cap); letter-spacing: .12em; text-align: center; white-space: nowrap; transform: rotate(-7deg) skewX(-6deg); -webkit-text-stroke: calc(10px * var(--fs) + 4px) var(--ink); paint-order: stroke fill; text-shadow: 8px 10px 0 var(--red), 9px 11px 0 var(--ink); }
.qs-cap-impact.is-out .qs-cap-inner { animation: qs-impact-out .3s both; }
.qs-cap-chapter .qs-cap-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #fff; animation: qs-chapter-in .7s both; margin-top: 30vh; }
.qs-cap-chapter .qs-cap-text { font-size: calc(var(--u) * 2); letter-spacing: .35em; text-indent: .35em; text-shadow: 0 2px 10px rgba(0, 0, 0, .8); white-space: nowrap; }
.qs-cap-rule { display: block; height: 2px; width: min(360px, 60vw); background: linear-gradient(90deg, transparent, #fff, transparent); animation: qs-rule .7s both; }
.qs-cap-chapter.is-out .qs-cap-inner { opacity: 0; transition: opacity .3s; }
.qs-cap-whisper .qs-cap-inner { margin-top: 34vh; animation: qs-fade .6s both; }
.qs-cap-whisper .qs-cap-text { font-family: var(--font-hand); font-size: calc(var(--u) * 1.5); color: rgba(255, 255, 255, .92); letter-spacing: .12em; text-shadow: 0 1px 8px rgba(0, 0, 0, .9); text-align: center; }
.qs-cap-whisper.is-out .qs-cap-inner { opacity: 0; transition: opacity .3s; }

/* ---------- toast ---------- */
.qs-layer-toast { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 140px; }
.qs-toast { position: relative; padding: 10px 18px 9px; font-family: var(--font-hand); font-size: calc(var(--u) * 1.15); transform: rotate(-1.5deg); animation: qs-pop .3s cubic-bezier(.2, 1.6, .4, 1) both; }
.qs-toast .qs-tape { width: 50px; height: 16px; top: -8px; }
.qs-toast.is-out { opacity: 0; transition: opacity .25s; }

/* ---------- letter reveal ---------- */
.qs-reveal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px 12px 22vh; }
.qs-reveal-paper { --lh: 40px; position: relative; width: min(560px, 92vw); min-height: calc(var(--lh) * 4 + 50px); padding: 24px 28px 46px 3.4em; transform: rotate(1.2deg); animation: qs-unfold .55s cubic-bezier(.2, 1.3, .4, 1) both; background-color: var(--paper); overflow: visible; }
.qs-reveal-paper::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(0, 0, 0, .05) 31%, transparent 34%), linear-gradient(60deg, transparent 58%, rgba(0, 0, 0, .06) 59%, rgba(255, 255, 255, .6) 60%, transparent 63%), radial-gradient(ellipse at 70% 30%, transparent 55%, rgba(150, 120, 70, .16)); }
.qs-creases { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.qs-creases path { fill: none; stroke: rgba(110, 95, 70, .28); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.qs-reveal-text { position: relative; z-index: 1; font-family: var(--font-hand); font-size: calc(var(--lh) * .7); line-height: var(--lh); color: #23306b; white-space: pre-wrap; word-break: break-all; }
.qs-reveal-sign { position: absolute; right: 26px; bottom: 10px; font-family: var(--font-hand); font-size: calc(var(--u) * 1.15); color: var(--pencil); }
.qs-sent { background: linear-gradient(transparent 55%, var(--hl-yellow) 55%, var(--hl-yellow) 92%, transparent 92%) no-repeat 0 0 / 0% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size var(--d, 1s) linear; }
.qs-sent.on { background-size: 100% 100%; color: #0f1a52; }
.qs-sent.done { background-size: 100% 100%; background-image: linear-gradient(transparent 55%, rgba(255, 243, 109, .45) 55%, rgba(255, 243, 109, .45) 92%, transparent 92%); transition: none; }
.qs-redpen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.qs-redpen path { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: .92; }
.qs-redpen path.on { stroke-dashoffset: 0; transition: stroke-dashoffset .38s ease-out; }
.qs-pen-note { position: absolute; z-index: 3; font-family: var(--font-hand); color: var(--red); font-size: calc(var(--u) * 1.25); white-space: nowrap; transform: rotate(-6deg) scale(.6); opacity: 0; transition: opacity .2s, transform .25s cubic-bezier(.2, 1.8, .4, 1); }
.qs-pen-note.on { opacity: 1; transform: rotate(-6deg) scale(1); }
.qs-score { position: absolute; right: -10px; bottom: -26px; z-index: 4; display: flex; align-items: flex-end; color: var(--red); font-family: var(--font-display); transform: rotate(-12deg) scale(3); opacity: 0; }
.qs-score b { font-weight: 400; font-size: 104px; line-height: .9; text-decoration: underline double; text-decoration-thickness: 4px; text-underline-offset: 6px; }
.qs-score small { font-size: 34px; margin-left: 4px; }
.qs-score.on { opacity: .94; transform: rotate(-12deg) scale(1); transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), opacity .1s; }
.qs-reveal-reply .qs-reveal-paper { --lh: 36px; width: min(300px, 80vw); min-height: 0; padding: 26px 22px 30px; background: #ffe3ee; transform: rotate(-4deg); }
.qs-reveal-reply .qs-reveal-paper::before { content: ''; position: absolute; left: 50%; top: -10px; width: 70px; height: 20px; transform: translateX(-50%) rotate(4deg); background: rgba(169, 220, 255, .85); }
.qs-reveal-reply .qs-reveal-text { color: #c2185b; font-size: calc(var(--lh) * .78); text-align: center; }
.qs-note-heart { position: absolute; right: 12px; bottom: 6px; width: 30px; height: 30px; animation: qs-heartbeat 1.2s infinite; }
.qs-note-heart svg { width: 100%; height: 100%; }
.qs-note-heart path { fill: var(--pink); stroke: var(--ink); stroke-width: 4; }
.qs-reveal.is-out .qs-reveal-paper { animation: qs-fold .3s both; }

/* ---------- ending card ---------- */
.qs-card-screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 12px; }
.qs-scrim { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(28, 22, 34, .35), rgba(28, 22, 34, .72)); animation: qs-fade .4s both; pointer-events: none; }
.qs-card { --accent: #5b8fd6; position: relative; width: min(360px, 86vw); padding: 14px 14px 18px; background: #fffdf8; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); border-radius: 3px; transform: rotate(-2deg); animation: qs-card-in .6s cubic-bezier(.2, 1.3, .4, 1) both; }
.qs-card-photo { position: relative; height: clamp(120px, 26vmin, 190px); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 45%, #fff 0, color-mix(in srgb, var(--accent) 30%, #fff) 70%); border: 2px solid rgba(42, 51, 80, .2); overflow: hidden; }
.qs-card-photo .qs-ico, .qs-card-photo .qs-icon-text { width: 58%; height: 80%; font-size: 72px; display: flex; align-items: center; justify-content: center; animation: qs-bob 1.4s ease-in-out infinite alternate; }
.qs-card-ribbon { position: absolute; left: -34px; top: 16px; width: 140px; padding: 3px 0; text-align: center; color: #fff; font-size: 14px; background: var(--accent); transform: rotate(-38deg); box-shadow: 0 2px 4px rgba(0, 0, 0, .25); letter-spacing: .1em; }
.qs-card-body { text-align: center; padding: 12px 6px 0; }
.qs-card-tag { display: inline-block; font-size: calc(var(--u) * .9); padding: 0 .6em; color: #fff; background: var(--accent); border-radius: 4px; transform: rotate(-3deg); }
.qs-card-title { margin: 6px 0 4px; font-weight: 400; font-size: calc(var(--u) * 2.2); line-height: 1.15; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 35%, transparent) 62%, color-mix(in srgb, var(--accent) 35%, transparent) 92%, transparent 92%); display: inline-block; padding: 0 .15em; }
.qs-card-sub { margin: 6px 0 0; font-family: var(--font-hand); font-size: calc(var(--u) * 1.2); color: var(--pencil); line-height: 1.4; }
.qs-card-progress { margin-top: 12px; font-size: calc(var(--u) * .85); color: var(--pencil); }
.qs-card-progress b { font-weight: 400; color: var(--ink); font-size: 1.3em; }
.qs-dots { display: flex; justify-content: center; gap: 4px; margin-top: 6px; }
.qs-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.8px solid var(--pencil); }
.qs-dots i.on { background: var(--accent); border-color: var(--ink); }
.qs-new-stamp { position: absolute; right: -16px; top: -18px; padding: 6px 12px; font-size: 26px; color: var(--red); border: 4px double var(--red); border-radius: 8px; background: rgba(255, 253, 248, .85); transform: rotate(14deg); animation: qs-stamp .35s .7s cubic-bezier(.3, 1.6, .5, 1) both; letter-spacing: .06em; }
.qs-card-btns { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; animation: qs-btns-in .35s .45s both; }
.qs-card.is-chosen { transition: transform .2s; transform: rotate(-2deg) scale(.97); }
.qs-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.qs-confetti i { position: absolute; top: -20px; width: 9px; height: 14px; background: var(--c); border-radius: 2px; animation: qs-confetti 3s ease-in both; }
.qs-confetti i.h { width: 14px; height: 14px; background: var(--c); clip-path: path('M7 13C2 9 0 6 1 3.5C2 1 5.5 1 7 3.5C8.5 1 12 1 13 3.5C14 6 12 9 7 13Z'); }

/* ---------- gallery ---------- */
.qs-gallery { --lh: 32px; position: relative; width: min(980px, 96vw); max-height: 92vh; display: flex; flex-direction: column; padding: 20px 18px 14px 3em; animation: qs-pop .3s both; }
.qs-gal-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.qs-gal-head h2 { margin: 0; font-weight: 400; font-size: calc(var(--u) * 1.8); background: linear-gradient(transparent 60%, var(--hl-yellow) 60%, var(--hl-yellow) 92%, transparent 92%); }
.qs-gal-count { font-size: calc(var(--u) * 1.2); color: var(--pencil); }
.qs-gal-count b { font-weight: 400; color: var(--red); font-size: 1.3em; }
.qs-gal-bar { flex: 1; min-width: 120px; height: 12px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; overflow: hidden; }
.qs-gal-bar i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--pink) 0 8px, var(--hl-pink) 8px 16px); }
.qs-gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 14px 12px; overflow-y: auto; padding: 12px 6px 10px; overscroll-behavior: contain; }
.qs-gal-item { --accent: #5b8fd6; position: relative; background: #fff; padding: 10px 8px 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, .18); border-radius: 3px; text-align: center; transform: rotate(-1.2deg); }
.qs-gal-item:nth-child(3n+2) { transform: rotate(1.4deg); }
.qs-gal-item:nth-child(4n) { transform: rotate(-.4deg); }
.qs-gal-tape { position: absolute; left: 50%; top: -8px; width: 54px; height: 16px; transform: translateX(-50%) rotate(-4deg); background: var(--accent); opacity: .65; }
.qs-gal-icon { width: 48px; height: 48px; margin: 2px auto 4px; }
.qs-gal-tag { display: inline-block; font-size: 12px; padding: 0 .5em; border-radius: 3px; color: #fff; background: var(--accent); }
.qs-gal-title { font-size: calc(var(--u) * 1.1); margin: 4px 0 2px; line-height: 1.25; }
.qs-gal-sub { font-family: var(--font-hand); font-size: calc(var(--u) * 1.05); color: var(--pencil); line-height: 1.35; }
.qs-gal-item.is-locked { background: #f1eee5; }
.qs-gal-item.is-locked .qs-gal-title { color: #9aa0ad; letter-spacing: .2em; }
.qs-gal-item.is-locked .qs-gal-tag { background: #b9bcc6; }

/* ---------- motion ---------- */
@keyframes qs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qs-pop { from { opacity: 0; transform: scale(.8) rotate(-4deg); } }
@keyframes qs-drop { from { opacity: 0; transform: translateY(-40px) rotate(-6deg); } }
@keyframes qs-trail { 0% { stroke-dashoffset: 100; opacity: 1; } 72% { stroke-dashoffset: 0; opacity: 1; } 92% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes qs-heartbeat { 0%, 70% { transform: scale(1); } 76% { transform: scale(1.35); } 82% { transform: scale(.95); } 88% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes qs-wiggle { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-3deg) scale(1.04); } 94% { transform: rotate(3deg) scale(1.04); } 97% { transform: rotate(-1deg); } }
@keyframes qs-shake { 0%, 100% { translate: 0 0; } 20% { translate: -4px 1px; } 40% { translate: 4px -1px; } 60% { translate: -3px 0; } 80% { translate: 3px 1px; } }
@keyframes qs-jitter { 0% { translate: 0 0; } 25% { translate: 1px -1px; } 50% { translate: -1px 1px; } 75% { translate: 1px 1px; } }
@keyframes qs-pulse { from { opacity: .55; } to { opacity: 1; } }
@keyframes qs-beat { 0%, 100% { scale: 1; } 15% { scale: 1.12; } 30% { scale: 1; } }
@keyframes qs-bob { from { translate: 0 0; } to { translate: 0 -4px; } }
@keyframes qs-say-in { from { opacity: 0; translate: 0 14px; } }
@keyframes qs-bubble-in { from { opacity: 0; scale: .6; } }
@keyframes qs-impact-in { 0% { opacity: 0; scale: 2.6; } 60% { opacity: 1; scale: .92; } 100% { scale: 1; } }
@keyframes qs-impact-out { to { opacity: 0; scale: 1.3; } }
@keyframes qs-chapter-in { from { opacity: 0; translate: 0 10px; letter-spacing: .6em; } }
@keyframes qs-rule { from { transform: scaleX(0); } }
@keyframes qs-unfold { 0% { opacity: 0; transform: rotate(-18deg) scale(.25, .1); } 55% { opacity: 1; transform: rotate(4deg) scale(1.03, .7); } 100% { } }
@keyframes qs-fold { to { opacity: 0; transform: rotate(-10deg) scale(.4, .2); } }
@keyframes qs-card-in { 0% { opacity: 0; transform: translateY(60px) rotate(12deg) scale(.7); } 100% { } }
@keyframes qs-stamp { 0% { opacity: 0; transform: rotate(14deg) scale(3); } 100% { opacity: 1; } }
@keyframes qs-btns-in { from { opacity: 0; visibility: hidden; translate: 0 12px; } to { opacity: 1; visibility: visible; } }
@keyframes qs-confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), 110vh) rotate(var(--r)); opacity: .9; } }

.qs-calm *, .qs-calm *::before, .qs-calm *::after { animation-name: qs-fade !important; }
.qs-calm .qs-cross.is-full svg, .qs-calm .qs-eye.is-warn .qs-eye-sticker { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .qs-ui *, .qs-ui *::before, .qs-ui *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }

/* ---------- small screens ---------- */
@media (max-width: 768px), (max-height: 480px) {
  :root { --lh: 28px; }
  .qs-title { padding: 0; justify-content: center; }
  .qs-title::before { background: rgba(30, 22, 36, .3); }
  .qs-title-card { padding: 24px 16px 16px; gap: 10px; }
  .qs-title-foot { left: 0; right: 0; text-align: center; bottom: 2vh; font-size: 16px; }
  .qs-letterpaper { --lh: 30px; padding: 16px 14px 14px 2.6em; height: min(260px, 42vh); }
  .qs-letterpaper.qs-paper { background-position: 0 0, 0 12px, 0 0; }
  .qs-letter-sign { font-size: 15px; }
  .qs-tab { font-size: 14px; padding: .3em .6em .7em; }
  .qs-say { padding: 20px 16px 14px; min-height: 80px; font-size: 17px; }
  .qs-objective { max-width: calc(50vw - 62px); font-size: 12px; padding: 8px 8px 7px; left: 6px; top: 12px; }
  .qs-eye-sticker { width: 64px; }
  .qs-timer { right: 8px; top: 10px; }
  .qs-timer .qs-ico { width: 26px; height: 26px; }
  .qs-hint { font-size: 12px; white-space: normal; text-align: center; width: max-content; max-width: 92vw; bottom: 14px; }
  .qs-reveal-paper { --lh: 32px; padding: 18px 16px 40px 2.6em; }
  .qs-score b { font-size: 76px; }
  .qs-gallery { padding: 16px 10px 10px 1.8em; }
  .qs-gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .qs-crumple-hint { font-size: 14px; white-space: normal; width: max-content; max-width: 90vw; }
  .qs-card-btns .qs-btn { font-size: 16px; padding: .35em .8em; }
}
@media (max-height: 480px) { .qs-logo-title { font-size: 40px; } .qs-title-card { gap: 6px; padding-top: 18px; } }