* { box-sizing: border-box; }
:root {
  --orange:#ff6b2d; --pink:#ff70a6; --yellow:#ffe66d; --green:#4ade80; --blue:#55c7ff;
  --ink:#25160d; --cream:#fff8df; --white:rgba(255,255,255,.9); --shadow:0 18px 38px rgba(255,107,45,.22);
}
html, body { margin:0; min-height:100%; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink); background:radial-gradient(circle at 18% 8%,#fff1a5 0 18%,transparent 36%),radial-gradient(circle at 82% 10%,#ffb4d2 0 18%,transparent 34%),linear-gradient(150deg,#fff8df,#e4fbff 48%,#ffe8f1); }
button { border:0; font:inherit; color:inherit; }
.phone-shell { position:relative; width:min(100vw,430px); min-height:100dvh; margin:0 auto; overflow:hidden; background:linear-gradient(180deg,rgba(255,250,225,.92),rgba(255,255,255,.75)); box-shadow:0 0 80px rgba(0,0,0,.08); }
.top-progress { position:fixed; z-index:50; top:0; left:50%; width:min(100vw,430px); height:5px; transform:translateX(-50%); background:rgba(255,255,255,.55); }
.top-progress span { display:block; width:8%; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--orange),var(--pink),var(--green)); transition:.3s; }
.screen { position:absolute; inset:0; display:none; min-height:100dvh; padding:max(22px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom)); overflow-y:auto; }
.screen.active { display:flex; flex-direction:column; animation:enter .38s ease both; }
@keyframes enter { from{opacity:0; transform:translateY(18px) scale(.98)} to{opacity:1; transform:none} }
.logo { width:96px; padding:8px 10px; border-radius:18px; background:var(--white); box-shadow:var(--shadow); object-fit:contain; }
.cover-screen { gap:12px; }
.cover-art { width:100%; height:42dvh; object-fit:cover; border-radius:34px; box-shadow:var(--shadow); border:3px solid rgba(255,255,255,.7); }
.title-card, .mission-card, .result-panel { position:relative; padding:20px; border:3px solid rgba(37,22,13,.9); border-radius:30px; background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(255,246,191,.9)); box-shadow:7px 8px 0 rgba(37,22,13,.13),var(--shadow); }
.eyebrow { margin:0 0 8px; color:var(--orange); font-size:12px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:10px; font-size:clamp(44px,13vw,60px); line-height:.92; letter-spacing:-2px; }
h1 span, h2 span { color:var(--orange); }
h2 { margin-bottom:10px; font-size:30px; line-height:1.1; }
p { line-height:1.62; }
.primary-btn,.secondary-btn,.text-btn { width:100%; min-height:52px; border-radius:999px; font-weight:900; cursor:pointer; transition:.18s; }
.primary-btn { margin-top:auto; color:#fff; background:linear-gradient(135deg,var(--orange),var(--pink)); box-shadow:0 11px 0 rgba(37,22,13,.13),0 18px 30px rgba(255,107,45,.24); }
.secondary-btn { background:var(--yellow); box-shadow:0 8px 0 rgba(37,22,13,.12); }
.text-btn { min-height:42px; color:rgba(37,22,13,.58); background:transparent; }
button:disabled { opacity:.45; cursor:not-allowed; }
button:active { transform:translateY(2px); }
.sticky { position:sticky; bottom:max(12px,env(safe-area-inset-bottom)); margin-top:14px; }
.screen-head { margin-bottom:12px; }
.screen-head p:last-child { color:rgba(37,22,13,.67); font-size:14px; }
.stamp-board { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-bottom:12px; }
.stamp { display:grid; min-height:72px; place-items:center; padding:7px 4px; border:2px dashed rgba(37,22,13,.22); border-radius:18px; background:rgba(255,255,255,.65); text-align:center; font-size:11px; font-weight:900; }
.stamp b { font-size:22px; filter:grayscale(1); }
.stamp.done { border-style:solid; border-color:var(--orange); background:linear-gradient(145deg,#fff,var(--yellow)); transform:rotate(-2deg); }
.stamp.done b { filter:none; }
.map-art { position:relative; min-height:430px; border-radius:32px; overflow:hidden; box-shadow:var(--shadow); background:#fff; }
.map-art>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.map-buttons { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:18px; }
.map-node { min-height:88px; padding:10px; border:2px solid rgba(37,22,13,.13); border-radius:24px; background:rgba(255,255,255,.86); box-shadow:5px 6px 0 rgba(37,22,13,.1); font-weight:900; }
.map-node:first-child { grid-column:1/3; }
.map-node b { display:block; font-size:28px; }
.map-hint { margin:-2px 0 10px; padding:10px 12px; border-radius:18px; background:linear-gradient(135deg,#fff,var(--yellow)); box-shadow:4px 5px 0 rgba(37,22,13,.1); font-size:13px; font-weight:900; }
.map-node.current { position:relative; border-color:var(--orange); animation:breathe 1.25s ease-in-out infinite; }
.map-node.current::after { content:"下一站"; position:absolute; right:8px; top:8px; padding:3px 7px; border-radius:999px; color:#fff; background:var(--orange); font-size:10px; }
@keyframes breathe { 50%{ transform:scale(1.03); box-shadow:0 0 0 8px rgba(255,107,45,.16),5px 6px 0 rgba(37,22,13,.1); } }
.pulse { animation:pulse .28s ease both; }
.shake { animation:shake .34s ease both; }
.ready { animation:readyGlow 1s ease-in-out infinite; }
.danger { color:#ff2f2f !important; animation:dangerBeat .5s ease-in-out infinite; }
@keyframes pulse { 50%{ transform:scale(1.08); } }
@keyframes shake { 20%,60%{ transform:translateX(-6px); } 40%,80%{ transform:translateX(6px); } }
@keyframes readyGlow { 50%{ filter:brightness(1.14); box-shadow:0 0 0 8px rgba(255,230,109,.35),0 11px 0 rgba(37,22,13,.13); } }
@keyframes dangerBeat { 50%{ transform:scale(1.12); } }
.fx-layer { position:fixed; inset:0; z-index:120; pointer-events:none; }
.fx-pop { position:fixed; transform:translate(-50%,-50%); padding:7px 11px; border-radius:999px; color:#fff; background:var(--orange); font-weight:1000; box-shadow:0 8px 18px rgba(0,0,0,.15); animation:fxPop .85s ease both; }
.fx-pop.perfect { background:linear-gradient(135deg,var(--pink),var(--orange)); }
.fx-pop.bad { background:#2b2118; }
@keyframes fxPop { 0%{opacity:0; transform:translate(-50%,-20%) scale(.6)} 20%{opacity:1; transform:translate(-50%,-50%) scale(1.12)} 100%{opacity:0; transform:translate(-50%,-115%) scale(.9)} }
.guide-overlay,.level-complete { position:fixed; inset:0; z-index:110; display:grid; place-items:center; padding:20px; background:rgba(37,22,13,.42); backdrop-filter:blur(6px); }
.guide-overlay[hidden],.level-complete[hidden] { display:none; }
.guide-card,.complete-card { width:min(92vw,370px); padding:20px; border:3px solid var(--ink); border-radius:30px; background:linear-gradient(145deg,#fff,var(--cream)); box-shadow:8px 10px 0 rgba(37,22,13,.18),var(--shadow); text-align:center; }
.guide-card img { width:124px; height:124px; object-fit:cover; border-radius:26px; }
.guide-card h3,.complete-card h3 { margin:8px 0; font-size:26px; }
.finger-tip { position:absolute; left:50%; bottom:22%; font-size:42px; animation:finger 1s ease-in-out infinite; }
@keyframes finger { 50%{ transform:translate(-50%,-12px) scale(1.12); } }
.complete-score { width:112px; height:112px; display:grid; place-items:center; margin:8px auto 12px; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--orange),var(--pink)); font-size:34px; font-weight:1000; box-shadow:0 10px 0 rgba(37,22,13,.14); }
.memory-card { transform-style:preserve-3d; transition:transform .28s ease, background .28s ease; }
.memory-card.open,.memory-card.matched { transform:rotateY(180deg); }
.memory-card.open b,.memory-card.matched b { transform:rotateY(180deg); }
.scene-canvas b { animation:dropIn .32s cubic-bezier(.2,1.4,.4,1) both; }
@keyframes dropIn { from{ opacity:0; transform:scale(.3) rotate(-12deg); } to{ opacity:1; transform:scale(1) rotate(0); } }
.mission-card { display:flex; align-items:center; gap:14px; margin:auto 0 18px; }
.mission-card img { width:118px; height:148px; object-fit:cover; border-radius:24px; }
.game-screen { padding:14px; }
.game-bg { position:absolute; inset:0; }
.game-bg img,.result-bg img { width:100%; height:100%; object-fit:cover; }
.game-bg::after,.result-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,248,223,.35),rgba(255,248,223,.92)); }
.game-panel { position:relative; z-index:1; display:flex; flex-direction:column; min-height:calc(100dvh - 28px); gap:12px; padding:16px; border-radius:32px; background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.72)); backdrop-filter:blur(4px); box-shadow:var(--shadow); }
.game-hud { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:20px; background:rgba(255,255,255,.9); font-weight:900; }
.game-hud strong { color:var(--orange); font-size:24px; }
.game-tip { margin:0; color:rgba(37,22,13,.72); font-size:13px; }
.beauty-screen .game-panel,
.accessory-screen .game-panel,
.scene-screen .game-panel { background:transparent; backdrop-filter:none; box-shadow:none; }
.beauty-screen .game-hud,
.accessory-screen .game-hud,
.scene-screen .game-hud,
.beauty-screen .game-tip,
.accessory-screen .game-tip,
.scene-screen .game-tip { background:rgba(255,255,255,.88); box-shadow:0 8px 24px rgba(255,107,45,.12); }
.beauty-screen .game-tip,
.accessory-screen .game-tip,
.scene-screen .game-tip { padding:12px 14px; border-radius:18px; }
.avatar-wrap { position:relative; flex:1; min-height:210px; overflow:hidden; border-radius:28px; background:linear-gradient(145deg,#fff,#fff5be); }
.avatar-wrap img { width:100%; height:100%; object-fit:cover; }
.dressed-avatar { position:absolute; inset:0; opacity:0; transform:scale(1.04); transition:.35s ease; }
.dressed-avatar.show { opacity:1; transform:scale(1); }
.picked-strip { position:absolute; left:10px; right:10px; bottom:10px; display:flex; flex-wrap:wrap; gap:6px; }
.picked-strip span,.mini-scores span,.poster-stamps span { padding:6px 9px; border-radius:999px; background:#fff; font-size:12px; font-weight:900; }
.item-row,.sticker-tray { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.sticker-card,.scene-sticker { min-height:104px; padding:8px; border:2px solid rgba(37,22,13,.12); border-radius:20px; background:rgba(255,255,255,.92); box-shadow:4px 5px 0 rgba(37,22,13,.09); font-weight:900; }
.sticker-card img { width:100%; height:46px; object-fit:cover; border-radius:12px; }
.sticker-card small { display:block; color:var(--orange); font-size:11px; }
.sticker-card.selected { border-color:var(--orange); background:var(--yellow); }
.rhythm-stage { position:relative; flex:1; min-height:460px; border-radius:32px; background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,248,223,.34)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.45),0 12px 30px rgba(255,107,45,.12); overflow:hidden; }
.rhythm-stage::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 22% 18%,rgba(255,112,166,.28),transparent 22%),radial-gradient(circle at 74% 78%,rgba(85,199,255,.24),transparent 26%),linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.02)); }
.beauty-progress-card { position:absolute; top:18px; left:18px; right:18px; z-index:2; padding:14px 16px; border-radius:22px; background:rgba(255,255,255,.84); box-shadow:0 10px 26px rgba(255,107,45,.1); }
.beauty-progress-card p { margin:0 0 10px; color:var(--orange); font-size:13px; font-weight:900; }
.beauty-steps { display:flex; gap:8px; }
.beauty-step { flex:1; padding:8px 6px; border-radius:999px; background:rgba(255,244,200,.72); color:rgba(37,22,13,.55); text-align:center; font-size:12px; font-weight:900; transition:.25s ease; }
.beauty-step.active { color:#fff; background:linear-gradient(135deg,var(--orange),var(--pink)); box-shadow:0 6px 16px rgba(255,107,45,.2); }
.beauty-step.done { color:var(--ink); background:linear-gradient(145deg,#fff,var(--yellow)); box-shadow:0 6px 16px rgba(255,230,109,.2); }
.beauty-meter { height:10px; margin-top:10px; border-radius:999px; background:rgba(37,22,13,.08); overflow:hidden; }
.beauty-meter span { display:block; width:0; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--pink),var(--orange),var(--yellow)); transition:width .28s ease; }
.beauty-look { position:absolute; left:50%; top:218px; z-index:2; width:min(78vw,300px); padding:12px 14px; border-radius:20px; background:rgba(255,255,255,.82); box-shadow:0 10px 26px rgba(255,107,45,.1); text-align:center; transform:translateX(-50%); }
.beauty-look span { display:block; margin-bottom:4px; color:var(--orange); font-size:12px; font-weight:900; }
.beauty-look strong { display:block; font-size:15px; line-height:1.4; }
.beauty-props { position:absolute; inset:308px 18px auto; display:flex; justify-content:space-between; pointer-events:none; z-index:3; }
.beauty-props img { width:74px; height:74px; object-fit:cover; border-radius:20px; background:#fff; box-shadow:4px 5px 0 rgba(37,22,13,.1); animation:float 2.6s ease-in-out infinite; transition:.28s ease; }
.beauty-props img:nth-child(2){ animation-delay:.25s; transform:translateY(12px); }
.beauty-props img:nth-child(3){ animation-delay:.5s; }
.beauty-props img.done { box-shadow:0 0 0 10px rgba(255,230,109,.32),4px 5px 0 rgba(37,22,13,.1); filter:saturate(1.08); }
.sweet-zone { position:absolute; left:50%; top:394px; bottom:108px; width:22%; transform:translateX(-50%); border-radius:999px; background:rgba(255,112,166,.26); border:3px dashed var(--pink); box-shadow:0 0 0 10px rgba(255,255,255,.18); transition:.2s ease; }
.rhythm-stage.is-hot .sweet-zone { background:rgba(255,112,166,.34); box-shadow:0 0 0 12px rgba(255,255,255,.24),0 0 28px rgba(255,112,166,.28); }
.rhythm-stage.is-finish .beauty-model::before { background:radial-gradient(circle at 50% 24%,rgba(255,255,255,.98),rgba(255,226,238,.82) 42%,rgba(255,244,200,.34) 100%); }
.rhythm-dot { position:absolute; left:16px; top:404px; z-index:4; width:62px; height:62px; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--orange),var(--pink)); box-shadow:0 8px 0 rgba(37,22,13,.14); font-weight:900; transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; transform-origin:center; }
.rhythm-dot.is-ready { box-shadow:0 12px 0 rgba(37,22,13,.16); filter:saturate(1.16) brightness(1.08); animation:rhythmReadyPulse .34s ease-in-out infinite alternate; }
@keyframes rhythmReadyPulse { from { transform:scale(1); } to { transform:scale(1.28); } }
.combo-line { display:flex; justify-content:space-between; align-items:center; margin-top:-4px; padding:14px 16px; border-radius:20px; background:rgba(255,255,255,.84); box-shadow:0 8px 24px rgba(255,107,45,.1); font-weight:900; }
.combo-line em { color:var(--orange); font-style:normal; }
.memory-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; padding:42px 16px 18px; border-radius:34px; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,248,223,.18)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); }
.memory-card { position:relative; aspect-ratio:1/1.14; height:auto; min-height:128px; border:2px solid rgba(255,255,255,.72); border-radius:26px; background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,242,188,.9)); color:var(--orange); box-shadow:0 8px 20px rgba(255,107,45,.14), inset 0 -10px 18px rgba(255,255,255,.45); font-weight:900; overflow:hidden; }
.memory-card::before { content:""; position:absolute; inset:10px; border-radius:18px; border:1px dashed rgba(255,107,45,.22); }
.memory-card b img { display:block; width:62px; height:62px; margin:0 auto 4px; border-radius:16px; object-fit:cover; background:#fff; }
.memory-card b { display:none; }
.memory-card.open,.memory-card.matched { color:var(--ink); background:linear-gradient(145deg,#fff,var(--yellow)); }
.memory-card.open span,.memory-card.matched span { display:none; }
.memory-card.open b,.memory-card.matched b { display:block; }
.accessory-screen .game-panel { justify-content:flex-start; }
.accessory-screen .memory-grid { flex:1; align-content:start; }
.accessory-screen .memory-card span { position:relative; z-index:1; font-size:34px; color:var(--orange); text-shadow:0 2px 0 rgba(255,255,255,.75); }
.accessory-screen .memory-card.open,
.accessory-screen .memory-card.matched { border-color:rgba(255,255,255,.88); box-shadow:0 10px 24px rgba(255,107,45,.16), inset 0 -10px 20px rgba(255,255,255,.36); }
.accessory-screen .memory-card.hint { border-color:rgba(255,107,45,.62); box-shadow:0 0 0 8px rgba(255,230,109,.24),0 12px 28px rgba(255,107,45,.16), inset 0 -10px 20px rgba(255,255,255,.42); animation:memoryHint 1s ease-in-out infinite; }
.accessory-screen .memory-card.open::before,
.accessory-screen .memory-card.matched::before,
.accessory-screen .memory-card.hint::before { border-color:rgba(255,107,45,.18); }
@keyframes memoryHint { 50%{ transform:translateY(-3px) scale(1.02); } }
.claw-machine { position:relative; flex:1; min-height:520px; border:4px solid var(--orange); border-radius:30px; background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,246,191,.42)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.42),0 14px 30px rgba(255,107,45,.12); overflow:hidden; }
.claw-machine::before { content:""; position:absolute; left:0; right:0; top:0; height:52px; background:repeating-linear-gradient(90deg,var(--pink) 0 22px,var(--yellow) 22px 44px); opacity:.75; }
.claw { position:absolute; top:10px; left:50%; z-index:3; width:48px; height:95px; color:var(--orange); font-size:54px; font-weight:900; text-align:center; transition:left .08s linear, transform .32s; --claw-drop:260px; --prize-lift:224px; }
.claw::before { content:""; position:absolute; top:0; left:23px; width:3px; height:55px; background:var(--ink); }
.claw.grab { transform:translateY(var(--claw-drop)) scale(1.15); }
.prize { position:absolute; bottom:28px; width:18%; min-height:100px; display:grid; place-items:center; padding:5px; border-radius:20px; background:#fff; box-shadow:4px 5px 0 rgba(37,22,13,.12); text-align:center; font-size:11px; font-weight:900; transition:.55s ease; }
.prize img { width:64px; height:64px; object-fit:cover; border-radius:16px; }
.prize span { display:block; }
.prize.won { transform:translateY(calc(var(--prize-lift, 224px) * -1)) scale(1.18); box-shadow:0 0 0 8px rgba(255,230,109,.5),4px 5px 0 rgba(37,22,13,.12); }
.control-row { display:grid; grid-template-columns:1fr; gap:9px; }
.toy-screen .game-panel { justify-content:flex-start; }
.toy-screen .claw-machine { margin-top:2px; }
.toy-screen .control-row { margin-top:10px; }
.toy-screen .secondary-btn { display:none; }
.toy-screen .primary-btn { margin-top:0; }
.scene-canvas { position:relative; flex:1; min-height:360px; border:3px dashed var(--orange); border-radius:30px; background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,248,223,.24)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.45),0 12px 30px rgba(255,107,45,.12); overflow:hidden; }
.scene-canvas::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); }
.scene-canvas span { position:absolute; inset:0; display:grid; place-items:center; padding:0 28px; text-align:center; color:rgba(37,22,13,.52); font-weight:900; }
.scene-canvas b { position:absolute; z-index:2; padding:9px 12px; border-radius:18px; background:linear-gradient(145deg,#fff,var(--yellow)); box-shadow:4px 5px 0 rgba(37,22,13,.12); }
.scene-ending { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; }
.scene-ending-badge { position:absolute; left:50%; bottom:18px; z-index:2; transform:translateX(-50%); padding:10px 16px; border-radius:999px; color:#fff; background:linear-gradient(135deg,var(--orange),var(--pink)); box-shadow:0 8px 20px rgba(255,107,45,.18); font-weight:900; white-space:nowrap; }
.scene-sticker { min-height:60px; }
.scene-screen .game-panel { justify-content:flex-start; }
.scene-screen .sticker-tray { margin-top:2px; padding:12px; border-radius:26px; background:rgba(255,255,255,.5); box-shadow:0 10px 24px rgba(255,107,45,.1); }
.scene-screen .scene-actions { display:grid; gap:10px; margin-top:10px; }
.scene-screen .scene-actions [hidden] { display:none; }
.scene-screen .scene-sticker.selected,
.scene-screen .scene-sticker:disabled { border-color:rgba(255,107,45,.25); background:rgba(255,244,200,.86); color:rgba(37,22,13,.45); box-shadow:none; }
.scene-screen .primary-btn { margin-top:0; }
.bonus-screen { justify-content:center; gap:16px; }
.bonus-dragon { width:100%; max-height:44dvh; object-fit:cover; border-radius:34px; box-shadow:var(--shadow); }
.bonus-options { display:grid; gap:10px; }
.bonus-options button { min-height:68px; border-radius:24px; background:linear-gradient(135deg,#fff,var(--yellow)); box-shadow:5px 6px 0 rgba(37,22,13,.12); font-weight:900; }
.compose-orbit { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:auto 0; }
.compose-orbit div { min-height:120px; display:grid; place-items:center; padding:12px; border-radius:28px; background:rgba(255,255,255,.9); box-shadow:var(--shadow); text-align:center; font-weight:900; animation:float 2.4s ease-in-out infinite; }
.compose-orbit b { font-size:34px; }
.compose-orbit div:nth-child(even) { animation-delay:.3s; }
@keyframes float { 50%{transform:translateY(-8px) rotate(2deg)} }
.result-bg { position:absolute; inset:0; }
.result-screen { justify-content:flex-end; }
.result-sparkles { position:absolute; inset:12px 18px auto; z-index:1; display:flex; justify-content:space-between; font-size:28px; pointer-events:none; }
.result-sparkles span:nth-child(2) { transform:translateY(28px) scale(1.16); }
.result-ring { position:absolute; top:86px; left:50%; z-index:1; width:min(82vw,320px); padding:16px; border-radius:30px; background:linear-gradient(145deg,rgba(255,244,200,.94),rgba(255,226,238,.92)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),0 10px 24px rgba(255,107,45,.12); transform:translateX(-50%); opacity:.98; pointer-events:none; }
.result-panel { margin-top:auto; z-index:2; background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,248,223,.92)); }
.grade,.poster-grade { width:104px; height:104px; display:grid; place-items:center; margin:4px auto 16px; border-radius:50%; color:#fff; background:linear-gradient(135deg,var(--orange),var(--pink)); font-size:58px; font-weight:1000; box-shadow:0 10px 0 rgba(37,22,13,.14); }
.score-bars { display:grid; gap:10px; }
.score-bar { display:grid; grid-template-columns:66px 1fr 34px; gap:8px; align-items:center; font-size:13px; font-weight:900; }
.score-bar b { height:12px; border-radius:999px; background:rgba(37,22,13,.08); overflow:hidden; }
.score-bar i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--orange),var(--green)); animation:grow .8s ease both; }
@keyframes grow { from{width:0} }
.mini-scores { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.mini-scores span { background:linear-gradient(145deg,#fff,var(--yellow)); box-shadow:4px 5px 0 rgba(37,22,13,.08); }
.brand-screen { justify-content:flex-end; gap:14px; }
.brand-stage { position:relative; width:100%; min-height:240px; display:grid; place-items:center; border-radius:34px; background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.98),rgba(255,243,186,.76) 56%,rgba(255,255,255,.08) 100%); box-shadow:var(--shadow); overflow:hidden; }
.brand-stage::before { content:""; position:absolute; inset:auto 14px 14px; height:62px; border-radius:999px; background:radial-gradient(circle,rgba(255,107,45,.28),transparent 70%); }
.brand-stage img { position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover; }
.brand-screen .title-card strong { display:block; color:var(--orange); font-size:20px; }
.brand-points { display:flex; flex-wrap:wrap; gap:10px; }
.brand-points span { padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.86); box-shadow:4px 5px 0 rgba(37,22,13,.08); font-weight:900; }
.poster-screen { gap:12px; background:linear-gradient(180deg,#fff4b8,#ffe2ee); }
.poster { position:relative; min-height:calc(100dvh - 126px); overflow:hidden; border-radius:34px; box-shadow:var(--shadow); background:#fff; }
.poster-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.poster-content { position:relative; z-index:1; min-height:calc(100dvh - 126px); display:flex; flex-direction:column; align-items:center; padding:24px 20px; text-align:center; background:linear-gradient(180deg,rgba(255,255,255,.54),rgba(255,248,223,.9)); }
.poster-halo { position:absolute; top:92px; left:50%; width:220px; height:220px; border-radius:50%; transform:translateX(-50%); background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,255,255,.08) 72%); }
.poster-logo { width:96px; padding:8px 10px; border-radius:18px; background:rgba(255,255,255,.82); }
.poster-content h2 { font-size:30px; }
.poster-stamps-wrap { position:relative; width:100%; min-height:148px; margin-top:6px; padding:14px 10px 48px; border-radius:30px; background:linear-gradient(145deg,rgba(255,244,200,.92),rgba(255,226,238,.9)); box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),0 10px 24px rgba(255,107,45,.1); }
.poster-badges { width:min(100%,320px); display:block; margin:0 auto; border-radius:22px; }
.poster-stamps { position:absolute; left:18px; right:18px; bottom:10px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:0; }
.poster-stamps span { background:rgba(255,255,255,.92); box-shadow:4px 5px 0 rgba(37,22,13,.08); }
.poster-content strong { margin-top:auto; color:var(--orange); font-size:18px; }
.poster-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.save-tip { margin:0; text-align:center; color:rgba(37,22,13,.58); font-size:12px; }
.toast { position:fixed; left:50%; bottom:28px; z-index:100; width:min(88vw,360px); padding:12px 16px; border-radius:999px; color:#fff; background:rgba(37,22,13,.86); text-align:center; font-weight:900; opacity:0; transform:translate(-50%,20px); pointer-events:none; transition:.25s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-height:740px) { .cover-art{height:34dvh}.map-art{min-height:350px}.game-panel{gap:8px}.avatar-wrap{min-height:170px}.rhythm-stage{min-height:300px}.claw-machine{min-height:380px}.scene-canvas{min-height:240px} h1{font-size:42px} h2{font-size:25px} .beauty-look{top:196px;width:min(82vw,286px)} .beauty-props{inset:280px 16px auto} .beauty-props img{width:68px;height:68px} .sweet-zone{top:356px;bottom:112px;width:24%} .rhythm-dot{top:366px} }
@media (min-height:800px) {
  .beauty-screen .game-panel,
  .accessory-screen .game-panel,
  .scene-screen .game-panel,
  .toy-screen .game-panel { min-height:calc(100dvh - 28px); }
  .beauty-screen .rhythm-stage { min-height:470px; }
  .accessory-screen .memory-grid { min-height:520px; }
  .toy-screen .claw-machine { min-height:620px; }
  .scene-screen .scene-canvas { min-height:430px; }
}