@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&family=Instrument+Serif:ital,wght@0,400;1,400&family=Inter:wght@400;500;600;700&display=swap";:root{--font-serif:"Instrument Serif", "Iowan Old Style", Georgia, serif;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, monospace;--stage:#0e0d0c;--stage-2:#1a1714;--paper:#fcfaf7;--ink:#1a1714;--muted:#6c6660;--line:#ebe6dd;--accent:#e98425;--accent-2:#ff6b3d;--tile-happy:#ffe1d9;--tile-calm:#d2eecb;--tile-nostalgic:#ffe9bf;--tile-melancholic:#f3e6ff;--color-success:#6cba5b;--color-danger:#ff6b3d;--color-accent:#e98425;--transition-smooth:all .3s cubic-bezier(.16, 1, .3, 1);--transition-fast:all .15s ease}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;background:radial-gradient(80% 50% at 50% -10%,#e9842514,#0000 70%),#fff;margin:0;padding-bottom:2rem;line-height:1.5}.app-wrapper{flex-direction:column;width:100%;max-width:100%;min-height:100vh;margin:0;padding:0;display:flex}.app-main{flex:1;justify-content:stretch;align-items:stretch;width:100%;display:flex}.app-footer{text-align:center;font-family:var(--font-mono);color:#1a171466;letter-spacing:.12em;text-transform:uppercase;background:var(--paper);border-top:1px dashed var(--line);padding:2rem 0 1.5rem;font-size:10px}.stage-bar{display:none!important}.paper-sheet{background:var(--paper);color:var(--ink);box-shadow:none;box-sizing:border-box;width:100%;max-width:100%;min-height:100vh;transition:var(--transition-smooth);border:none;border-radius:0;flex-direction:column;padding:1.5rem 1rem;display:flex}@media (width>=768px){.paper-sheet{padding:3rem 4rem}}.paper-sheet h1{font-family:var(--font-serif);color:var(--ink);letter-spacing:-.01em;margin-bottom:.5rem;font-size:clamp(24px,7vw,44px);font-style:italic;font-weight:400;line-height:1.15}.paper-sheet h1 .accent{color:var(--accent);font-style:italic}.paper-sheet .subtitle{color:var(--muted);margin-bottom:1.5rem;font-size:clamp(12px,3.5vw,15px);line-height:1.4}.header-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.75rem;display:flex}.back-btn{background:var(--line);color:var(--ink);cursor:pointer;font-family:var(--font-sans);transition:var(--transition-fast);border:1px solid #0000000f;border-radius:999px;align-items:center;gap:.4rem;padding:.4rem .8rem;font-size:12px;font-weight:500;display:flex}.back-btn:hover{background:#ebe6ddc7;transform:translateY(-1px)}.level-badge{background:var(--ink);color:#f5efe4;font-family:var(--font-mono);letter-spacing:.06em;border-radius:999px;align-items:center;gap:.4rem;padding:.3rem .6rem;font-size:10px;display:inline-flex}.level-badge .dot{background:var(--accent);border-radius:50%;width:5px;height:5px}.quests-grid{grid-template-columns:1fr;gap:10px;margin-top:1rem;display:grid}@media (width>=600px){.quests-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}}.quest-card{border:1.5px solid var(--ink);text-align:left;background:var(--paper);cursor:pointer;min-height:110px;box-shadow:2px 2px 0px var(--ink);border-radius:16px;flex-direction:column;gap:4px;padding:.85rem;transition:transform .2s,box-shadow .2s;display:flex;position:relative}@media (width>=768px){.quest-card{min-height:130px;box-shadow:3px 3px 0px var(--ink);border-radius:20px;gap:8px;padding:1.25rem}}.quest-card:hover{box-shadow:3px 3px 0px var(--ink);transform:translate(-1px,-1px)}@media (width>=768px){.quest-card:hover{box-shadow:5px 5px 0px var(--ink);transform:translate(-2px,-2px)}}.quest-card .glyph{width:26px;height:26px;color:var(--ink);font-family:var(--font-mono);background:#00000014;border-radius:6px;place-items:center;font-size:11px;font-weight:700;display:grid}@media (width>=768px){.quest-card .glyph{border-radius:8px;width:32px;height:32px;font-size:14px}}.quest-card .q-title{font-family:var(--font-sans);color:var(--ink);font-size:13px;font-weight:700}@media (width>=768px){.quest-card .q-title{font-size:15px}}.quest-card .q-desc{color:var(--ink);opacity:.75;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:10px;line-height:1.35;display:-webkit-box;overflow:hidden}@media (width>=768px){.quest-card .q-desc{-webkit-line-clamp:unset;font-size:12px}}.quest-card .q-xp{font-family:var(--font-mono);background:var(--ink);color:#f5efe4;letter-spacing:.02em;border-radius:999px;padding:2px 5px;font-size:9px;font-weight:700;position:absolute;bottom:8px;right:8px}@media (width>=768px){.quest-card .q-xp{padding:3px 7px;font-size:11px;bottom:12px;right:12px}}.q-happy{background:var(--tile-happy)}.q-happy .glyph{color:#fff;background:#ff7a52}.q-calm{background:var(--tile-calm)}.q-calm .glyph{color:#fff;background:#6cba5b}.q-nostalgic{background:var(--tile-nostalgic)}.q-nostalgic .glyph{color:#fff;background:#f0b54a}.q-melancholic{background:var(--tile-melancholic)}.q-melancholic .glyph{color:#fff;background:#b08bf2}.level-ribbon{color:#f5efe4;border:1.5px solid var(--ink);text-align:left;background:linear-gradient(135deg,#1a1714 0%,#2b251f 100%);border-radius:12px;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;margin:1rem 0;padding:.85rem;display:grid}@media (width>=768px){.level-ribbon{border-radius:16px;grid-template-columns:42px 1fr auto;gap:12px;margin:1.5rem 0;padding:1rem 1.25rem}}.level-ribbon .lv{background:var(--accent);width:34px;height:34px;font-family:var(--font-mono);color:#1a1714;border-radius:10px;place-items:center;font-size:13px;font-weight:700;display:grid}@media (width>=768px){.level-ribbon .lv{border-radius:12px;width:42px;height:42px;font-size:16px}}.level-ribbon .meta .label{font-family:var(--font-mono);letter-spacing:.12em;color:#f5efe466;text-transform:uppercase;font-size:8px}@media (width>=768px){.level-ribbon .meta .label{letter-spacing:.16em;font-size:10px}}.level-ribbon .meta .name{font-family:var(--font-sans);margin-top:1px;font-size:13px;font-weight:700}@media (width>=768px){.level-ribbon .meta .name{margin-top:2px;font-size:15px}}.level-ribbon .xp{font-family:var(--font-mono);color:#f5efe499;font-size:10px;font-weight:600}@media (width>=768px){.level-ribbon .xp{font-size:12px}}.level-ribbon .bar{background:#f5efe41a;border-radius:999px;grid-column:1/-1;height:5px;margin-top:2px;overflow:hidden}@media (width>=768px){.level-ribbon .bar{height:6px;margin-top:4px}}.level-ribbon .bar>span{background:linear-gradient(90deg, var(--accent), var(--accent-2));height:100%;display:block}.song-list{flex-direction:column;gap:6px;margin-top:.75rem;display:flex}.song-card{background:var(--paper);border:1px solid var(--line);transition:var(--transition-fast);border-radius:12px;justify-content:space-between;align-items:center;padding:.75rem 1rem;display:flex}@media (width>=768px){.song-card{border-radius:14px;padding:1rem 1.25rem}}.song-card:hover{border-color:var(--ink);background:#fbf9f4}.song-info{text-align:left}.song-title{font-family:var(--font-sans);color:var(--ink);font-size:14px;font-weight:700}@media (width>=768px){.song-title{font-size:15px}}.song-artist{font-family:var(--font-mono);color:var(--muted);margin-top:1px;font-size:11px}.play-btn{background:var(--ink);color:#f5efe4;cursor:pointer;font-family:var(--font-sans);transition:var(--transition-fast);border:none;border-radius:999px;align-items:center;gap:.4rem;padding:.4rem 1rem;font-size:12px;font-weight:600;display:flex}@media (width>=768px){.play-btn{padding:.5rem 1.25rem;font-size:13px}}.play-btn:hover{background:var(--accent);color:#1a1714;transform:translateY(-1px)}.singing-layout{grid-template-columns:1fr;gap:1rem;margin-top:1rem;display:grid}@media (width>=768px){.singing-layout{grid-template-columns:1fr 1.2fr;gap:2rem;margin-top:1.5rem}}.left-panel{flex-direction:column;gap:.75rem;display:flex}@media (width>=768px){.left-panel{gap:1rem}}.right-panel{flex-direction:column;gap:.75rem;display:flex}@media (width>=768px){.right-panel{gap:1rem}}.hud-panel{border:1.5px solid var(--ink);box-shadow:2px 2px 0px var(--ink);background:#fff;border-radius:16px;padding:.85rem}@media (width>=768px){.hud-panel{box-shadow:4px 4px 0px var(--ink);border-radius:20px;padding:1.25rem}}.lyrics-display-box{border:1.5px solid var(--ink);scroll-behavior:smooth;height:240px;box-shadow:2px 2px 0px var(--ink);background:#fff;border-radius:16px;flex-direction:column;gap:1rem;padding:1.5rem 1rem;display:flex;overflow-y:auto}@media (width>=768px){.lyrics-display-box{height:330px;box-shadow:4px 4px 0px var(--ink);border-radius:20px;gap:1.5rem;padding:2.25rem 1.5rem}}.lyric-line{font-family:var(--font-sans);color:var(--muted);text-align:center;transition:var(--transition-smooth);font-size:13.5px;line-height:1.5}@media (width>=768px){.lyric-line{font-size:15px;line-height:1.6}}.lyric-line.active-line{font-family:var(--font-serif);color:var(--ink);border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:.4rem .2rem;font-size:clamp(18px,5.5vw,26px);font-style:italic;line-height:1.2}.lyric-word{transition:var(--transition-fast);margin-right:.2rem;display:inline-block}.lyric-word.matched{color:var(--accent);font-weight:700;transform:scale(1.02)}.controls-row{gap:8px;display:flex}.btn{font-family:var(--font-sans);cursor:pointer;border:1.5px solid var(--ink);transition:var(--transition-fast);border-radius:999px;justify-content:center;align-items:center;gap:.4rem;padding:.65rem 1.2rem;font-size:13px;font-weight:600;display:flex}@media (width>=768px){.btn{gap:.5rem;padding:.8rem 1.5rem;font-size:14px}}.btn-primary{background:var(--ink);color:#f5efe4}.btn-primary:hover{background:var(--accent);color:#1a1714}.btn-danger{background:var(--tile-happy);color:var(--ink)}.btn-danger:hover{color:#fff;background:#ff7a52}.btn-success{background:var(--tile-calm);color:var(--ink)}.btn-success:hover{color:#fff;background:#6cba5b}.visualizer-card{border:1.5px solid var(--ink);box-shadow:2px 2px 0px var(--ink);border-radius:16px;height:160px;overflow:hidden}@media (width>=768px){.visualizer-card{box-shadow:4px 4px 0px var(--ink);border-radius:20px;height:250px}}.score-summary-card{border:1.5px solid var(--ink);box-shadow:4px 4px 0px var(--ink);background:#fff;border-radius:20px;flex-direction:column;align-items:center;margin-bottom:1.5rem;padding:1.5rem 1rem;display:flex}@media (width>=768px){.score-summary-card{border:2px solid var(--ink);box-shadow:6px 6px 0px var(--ink);border-radius:24px;margin-bottom:2rem;padding:2.5rem}}.score-circle-container{margin-bottom:1rem}.score-circle{border:4px solid var(--ink);background:var(--tile-happy);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:100px;height:100px;display:flex}@media (width>=768px){.score-circle{border:5px solid var(--ink);width:140px;height:140px}}.score-value{font-family:var(--font-mono);color:var(--ink);font-size:26px;font-weight:700}@media (width>=768px){.score-value{font-size:38px}}.score-label{font-family:var(--font-mono);letter-spacing:.05em;color:var(--muted);font-size:9px}@media (width>=768px){.score-label{letter-spacing:.1em;font-size:11px}}.feedback-title{font-family:var(--font-serif);margin-bottom:.5rem;font-size:clamp(20px,6vw,32px);font-style:italic}.feedback-text{color:var(--muted);max-width:480px;margin-bottom:1.25rem;font-size:13px;line-height:1.45}@media (width>=768px){.feedback-text{margin-bottom:1.5rem;font-size:14.5px}}.stats-row{gap:10px;margin-bottom:1.25rem;display:flex}@media (width>=768px){.stats-row{gap:15px;margin-bottom:1.5rem}}.stat-box{background:var(--paper);border:1px solid var(--line);border-radius:10px;min-width:95px;padding:.5rem 1rem}@media (width>=768px){.stat-box{border-radius:12px;min-width:110px;padding:.6rem 1.25rem}}.stat-val{font-family:var(--font-mono);font-size:14px;font-weight:700;display:block}@media (width>=768px){.stat-val{font-size:16px}}.stat-lbl{color:var(--muted);font-size:10px}.song-badge-container{background:var(--line);font-family:var(--font-mono);color:var(--ink);border-radius:100px;align-items:center;gap:.4rem;padding:.35rem 1rem;font-size:10px;display:inline-flex}.live-score{font-family:var(--font-mono);color:var(--muted);letter-spacing:.02em;font-size:11px}.score-num{color:var(--accent-2);font-size:12px;font-weight:700}.transcript-preview{border:1px solid var(--line);text-align:left;color:var(--ink);background:#fff;border-radius:10px;padding:.65rem 1rem;font-size:12px}.transcript-text{font-family:var(--font-mono);color:var(--muted)}.error-message{color:var(--color-danger);text-align:center;background:var(--tile-happy);border:1px solid var(--ink);border-radius:10px;padding:.6rem;font-size:12px}.fade-in{animation:.25s ease-out forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.pulse-text{font-family:var(--font-mono);letter-spacing:.05em;text-transform:uppercase;font-size:10px;animation:1s ease-in-out infinite alternate textPulse}.text-neon{color:var(--accent-2)}@keyframes textPulse{0%{opacity:.6}to{opacity:1}}.youtube-player-wrapper{border:1.5px solid var(--ink);width:100%;height:0;box-shadow:2px 2px 0px var(--ink);border-radius:16px;margin-bottom:.5rem;padding-bottom:56.25%;position:relative;overflow:hidden}.youtube-player-wrapper iframe{border:none;width:100%;height:100%;position:absolute;top:0;left:0}.youtube-player-placeholder{border:1.5px dashed var(--line);height:160px;color:var(--muted);font-family:var(--font-mono);text-transform:uppercase;background:#000;border-radius:16px;justify-content:center;align-items:center;margin-bottom:.5rem;font-size:11px;display:flex}@media (width>=768px){.youtube-player-placeholder{height:210px;font-size:12px}}