:root { --beast-night:#11151f; --beast-purple:#292738; --beast-cream:#e8e0d2; --beast-gold:#b8955a; --beast-red:#704a46; --beast-green:#60766b; }
.mood-card-page { min-width:320px; color:var(--beast-cream); background:var(--beast-night); }
.mood-card-page button,.mood-card-page a { -webkit-tap-highlight-color:transparent; }
.skip-link { position:fixed; z-index:100; top:8px; left:8px; padding:8px 14px; color:var(--beast-night); background:var(--beast-cream); transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.mood-site-header { position:absolute; width:100%; color:var(--beast-cream); background:linear-gradient(rgba(17,21,31,.86),transparent); border:0; backdrop-filter:none; }
.mood-site-header .brand small { color:rgba(232,224,210,.62); }
.mood-site-header .brand-moon { background:var(--beast-gold); box-shadow:inset -9px 0 0 var(--beast-night); }
.mood-exit { padding:8px 0; color:rgba(232,224,210,.72); font-size:13px; letter-spacing:.08em; border-bottom:1px solid rgba(232,224,210,.28); }
.mood-exit:hover { color:var(--beast-cream); }
.mood-card-page:is([data-mood-screen="question"],[data-mood-screen="drawing"]) .mood-exit { display:none; }
.mood-card-page:is([data-mood-screen="question"],[data-mood-screen="drawing"]) .mood-site-header .brand { pointer-events:none; }
.mood-experience { position:relative; min-height:100svh; overflow:hidden; background:radial-gradient(circle at 75% 20%,rgba(184,149,90,.09),transparent 28%),radial-gradient(circle at 10% 85%,rgba(112,74,70,.14),transparent 34%),linear-gradient(145deg,#11151f,#1b1b29 60%,#292738); }
.ambient-dust,.ambient-dust::before,.ambient-dust::after { position:absolute; inset:0; pointer-events:none; content:""; opacity:.28; background-image:radial-gradient(circle,rgba(232,224,210,.7) 0 1px,transparent 1.5px); background-size:110px 130px; animation:dust 24s linear infinite; }
.ambient-dust::before { transform:translate(34px,70px); opacity:.22; animation-duration:31s; }
.ambient-dust::after { transform:translate(80px,25px); opacity:.12; animation-duration:37s; }
.mood-screen { position:relative; z-index:1; width:min(1180px,100%); min-height:100svh; margin:auto; padding:132px max(6vw,24px) 72px; }
.mood-screen[hidden] { display:none; }
.mood-kicker { margin:0 0 18px; color:#d6b97f; font-size:11px; font-weight:700; letter-spacing:.27em; }
.mood-cover { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.82fr); gap:clamp(44px,8vw,110px); align-items:center; }
.cover-copy { max-width:690px; }
.cover-copy h1 { margin:0; font-family:var(--serif); font-size:clamp(52px,7vw,92px); font-weight:500; line-height:1.16; letter-spacing:-.045em; }
.mood-subtitle { max-width:610px; margin:25px 0 28px; color:rgba(232,224,210,.78); font-family:var(--serif); font-size:clamp(18px,2vw,23px); }
.mood-intro { margin:0 0 34px; color:rgba(232,224,210,.68); font-size:15px; line-height:1.9; }
.mood-intro p { margin:0; }
.mood-actions,.result-actions { display:flex; flex-wrap:wrap; gap:12px; }
.mood-button { min-height:50px; display:inline-flex; align-items:center; justify-content:center; padding:12px 23px; border:1px solid transparent; color:inherit; background:transparent; cursor:pointer; transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.mood-button:hover { transform:translateY(-2px); }
.mood-button:focus-visible,.play-button:focus-visible,.sound-mini:focus-visible,.option-card:focus-visible,summary:focus-visible { outline:3px solid var(--beast-cream); outline-offset:4px; }
.mood-button-primary { color:var(--beast-night); background:var(--beast-gold); }
.mood-button-primary:hover { background:#c7a76e; }
.mood-button-quiet,.mood-button-outline { border-color:rgba(232,224,210,.36); }
.mood-button-quiet:hover,.mood-button-outline:hover { background:rgba(232,224,210,.08); border-color:rgba(232,224,210,.7); }
.mood-button:disabled { opacity:.38; cursor:not-allowed; transform:none; }
.mood-disclaimer { margin:18px 0 0; color:rgba(232,224,210,.48); font-size:12px; }
.cover-cards { position:relative; width:min(420px,100%); aspect-ratio:.92; margin:auto; }
.cover-card { position:absolute; top:8%; left:21%; width:58%; aspect-ratio:.66; border:1px solid rgba(184,149,90,.72); border-radius:8px; background:radial-gradient(circle at 50% 40%,rgba(184,149,90,.15),transparent 26%),linear-gradient(155deg,#292738,#131925 64%,#20212f); box-shadow:0 26px 60px rgba(0,0,0,.42),inset 0 0 0 8px #161b28,inset 0 0 0 9px rgba(184,149,90,.3); transform-origin:50% 100%; animation:float 6s ease-in-out infinite; }
.cover-card::before,.beast-card::before { position:absolute; inset:9%; content:""; border:1px solid rgba(184,149,90,.36); border-radius:50% 50% 44% 44%; }
.cover-card span,.beast-card .card-symbol { position:absolute; top:42%; left:50%; width:36px; height:36px; border:1px solid var(--beast-gold); border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 28px rgba(184,149,90,.25); }
.cover-card span::after,.beast-card .card-symbol::after { position:absolute; top:-18px; left:50%; content:"✦"; color:var(--beast-gold); font-size:10px; transform:translateX(-50%); }
.cover-card-one { transform:rotate(-9deg) translateX(-38%); }
.cover-card-two { z-index:2; animation-delay:-2s; }
.cover-card-three { transform:rotate(9deg) translateX(38%); animation-delay:-4s; }
.setup-screen,.drawing-screen { display:grid; place-items:center; }
.setup-panel { width:min(650px,100%); padding:clamp(28px,6vw,60px); background:rgba(41,39,56,.66); border:1px solid rgba(184,149,90,.3); box-shadow:0 35px 90px rgba(0,0,0,.28); }
.setup-panel h2,.drawing-wrap h2 { margin:0 0 18px; font-family:var(--serif); font-size:clamp(34px,5vw,56px); font-weight:500; line-height:1.3; }
.setup-panel>p:not(.mood-kicker) { color:rgba(232,224,210,.68); }
.setting-list { margin:32px 0; border-block:1px solid rgba(232,224,210,.15); }
.setting-row { position:relative; display:flex; align-items:center; justify-content:space-between; gap:22px; padding:20px 0; cursor:pointer; }
.setting-row+ .setting-row { border-top:1px solid rgba(232,224,210,.12); }
.setting-row span { display:grid; }
.setting-row small { color:rgba(232,224,210,.52); }
.setting-row input { position:absolute; opacity:0; }
.setting-row i { width:48px; height:26px; flex:0 0 auto; padding:3px; border:1px solid rgba(232,224,210,.42); border-radius:20px; transition:.2s; }
.setting-row i::after { display:block; width:18px; height:18px; content:""; border-radius:50%; background:rgba(232,224,210,.68); transition:.2s; }
.setting-row input:checked+i { background:var(--beast-gold); border-color:var(--beast-gold); }
.setting-row input:checked+i::after { background:var(--beast-night); transform:translateX(22px); }
.setting-row input:focus-visible+i { outline:3px solid var(--beast-cream); outline-offset:4px; }
.question-shell { max-width:1040px; margin:auto; }
.question-topline { display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; margin-bottom:44px; color:rgba(232,224,210,.62); font-size:13px; letter-spacing:.1em; }
.progress-track { height:1px; background:rgba(232,224,210,.18); }
.progress-track i { display:block; width:33%; height:2px; background:var(--beast-gold); transition:width .4s ease; }
.sound-mini { padding:7px 11px; color:var(--beast-cream); border:1px solid rgba(232,224,210,.25); background:transparent; cursor:pointer; }
.caption-box { margin:-22px 0 28px; padding:12px 15px; color:rgba(232,224,210,.7); background:rgba(232,224,210,.06); border-left:2px solid var(--beast-gold); font-size:14px; }
.question-fieldset { min-width:0; margin:0; padding:0; border:0; }
.question-fieldset legend { max-width:800px; margin:0 0 40px; font-family:var(--serif); font-size:clamp(34px,5vw,58px); line-height:1.3; }
.option-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.option-card { position:relative; min-height:260px; padding:116px 24px 24px; overflow:hidden; color:var(--beast-cream); text-align:left; border:1px solid rgba(232,224,210,.18); background:linear-gradient(155deg,rgba(41,39,56,.88),rgba(17,21,31,.82)); cursor:pointer; transition:transform .25s,border-color .25s,background .25s; }
.option-card::before { position:absolute; top:30px; left:24px; width:62px; height:62px; content:""; border:1px solid rgba(184,149,90,.58); border-radius:50% 50% 45% 45%; box-shadow:inset 12px 0 rgba(184,149,90,.08); }
.option-card::after { position:absolute; top:50px; left:49px; content:"✦"; color:var(--beast-gold); }
.option-card:hover { transform:translateY(-5px); border-color:rgba(184,149,90,.78); }
.option-card[aria-checked="true"] { border:2px solid var(--beast-gold); background:linear-gradient(155deg,rgba(112,74,70,.36),rgba(41,39,56,.92)); box-shadow:0 20px 50px rgba(0,0,0,.22); }
.option-card[aria-checked="true"] .option-check { opacity:1; }
.option-card strong { display:block; margin-bottom:10px; font-family:var(--serif); font-size:21px; font-weight:500; line-height:1.45; }
.option-card small { color:rgba(232,224,210,.62); font-size:14px; line-height:1.7; }
.option-check { position:absolute; z-index:2; top:16px; right:16px; display:grid; width:28px; height:28px; place-items:center; opacity:0; color:var(--beast-night); border-radius:50%; background:var(--beast-gold); font-size:15px; font-weight:700; line-height:1; transform:scale(.75); transition:opacity .2s ease,transform .2s ease; }
.option-card[aria-checked="true"] .option-check { transform:scale(1); }
.question-nav { display:flex; justify-content:space-between; gap:16px; margin-top:36px; }
.drawing-wrap { text-align:center; }
.drawing-wrap p { color:rgba(232,224,210,.56); }
.drawing-cards { position:relative; width:180px; height:170px; margin:0 auto 34px; }
.drawing-cards i { position:absolute; top:0; left:52px; width:78px; height:120px; border:1px solid var(--beast-gold); border-radius:4px; background:var(--beast-purple); box-shadow:0 18px 35px rgba(0,0,0,.3); animation:drawcard 1.8s ease-in-out infinite; }
.drawing-cards i:first-child { transform:rotate(-13deg) translateX(-28px); animation-delay:-.4s; }
.drawing-cards i:last-child { transform:rotate(13deg) translateX(28px); animation-delay:-.8s; }
.result-screen { padding-bottom:110px; }
.result-wrap { max-width:980px; margin:auto; }
.result-reveal { margin-bottom:25px; color:rgba(232,224,210,.62); }
.result-hero { display:grid; grid-template-columns:minmax(260px,390px) 1fr; gap:clamp(38px,7vw,80px); align-items:center; }
.beast-card { position:relative; width:100%; max-width:340px; aspect-ratio:2 / 3; justify-self:center; overflow:hidden; border:1px solid var(--beast-gold); border-radius:8px; background:radial-gradient(circle at 50% 30%,rgba(184,149,90,.2),transparent 23%),linear-gradient(160deg,#292738,#151a26 62%,#202b29); box-shadow:0 28px 70px rgba(0,0,0,.4),inset 0 0 0 9px #171c28,inset 0 0 0 10px rgba(184,149,90,.32); }
.beast-card.has-image { background-color:#07090e; background-position:center; background-repeat:no-repeat; background-size:contain; box-shadow:0 28px 70px rgba(0,0,0,.4); }
.beast-card.has-image::before { display:none; }
.beast-card.has-image .card-symbol { display:none; }
.beast-card .card-number { position:absolute; z-index:2; top:3.6%; right:24%; left:24%; color:#ead4ad; text-align:center; font-family:"Baskerville","Iowan Old Style","Noto Serif TC","Songti TC",serif; font-size:clamp(16px,1.8vw,21px); font-weight:400; line-height:1; letter-spacing:.16em; text-shadow:0 1px 7px #000; }
.beast-card .card-title { position:absolute; z-index:2; right:15%; bottom:2.7%; left:15%; display:grid; gap:1px; color:#ead4ad; text-align:center; font-family:"Baskerville","Iowan Old Style","Noto Serif TC","Songti TC",serif; line-height:1.05; text-shadow:0 1px 7px #000; }
.beast-card .card-title strong { font-size:clamp(16px,1.4vw,19px); font-weight:400; letter-spacing:.18em; }
.beast-card .card-title small { color:#e8e0d2; font-size:clamp(6px,.6vw,8px); font-weight:400; letter-spacing:.2em; }
.beast-card.result-free-beast:not(.has-image) { background:radial-gradient(ellipse at 70% 35%,rgba(232,224,210,.28),transparent 25%),linear-gradient(145deg,#292738 42%,#60766b); }
.beast-card.result-as-you-like:not(.has-image) { background:radial-gradient(circle at 55% 28%,rgba(232,224,210,.4),transparent 26%),linear-gradient(155deg,#4d5c56,#60766b 58%,#827b60); }
.result-copy h2 { margin:0 0 24px; font-family:var(--serif); font-size:clamp(40px,6vw,72px); font-weight:500; line-height:1.18; }
.result-paragraphs { color:rgba(232,224,210,.76); font-family:var(--serif); font-size:clamp(18px,2vw,22px); }
.result-paragraphs p { margin:0 0 16px; }
.result-download { margin-top:56px; padding:clamp(26px,5vw,42px); text-align:center; border:1px solid rgba(184,149,90,.55); background:linear-gradient(145deg,rgba(184,149,90,.14),rgba(41,39,56,.58)); box-shadow:0 24px 60px rgba(0,0,0,.18); }
.result-download h3 { margin:0 0 12px; font-family:var(--serif); font-size:clamp(27px,4vw,40px); font-weight:500; }
.result-download > p:not(.mood-kicker,.share-status) { max-width:630px; margin:0 auto 24px; color:rgba(232,224,210,.68); }
.result-download .mood-button { min-width:min(100%,360px); }
.song-panel,.story-panel,.small-action,.support-note { margin-top:70px; padding:clamp(26px,5vw,48px); border:1px solid rgba(232,224,210,.16); background:rgba(41,39,56,.45); }
.song-panel h3,.small-action h3 { margin:0 0 25px; font-family:var(--serif); font-size:clamp(26px,4vw,40px); font-weight:500; }
.song-player { display:flex; gap:20px; align-items:center; padding:20px 0; border-block:1px solid rgba(232,224,210,.15); }
.play-button { width:56px; height:56px; flex:0 0 auto; color:var(--beast-night); border:0; border-radius:50%; background:var(--beast-gold); cursor:pointer; }
.play-button:disabled { cursor:not-allowed; opacity:.45; }
.song-meta { min-width:0; flex:1; display:grid; grid-template-columns:1fr auto; gap:2px 15px; }
.song-meta strong { font-family:var(--serif); font-size:21px; }
.song-meta span,.song-meta small { color:rgba(232,224,210,.55); font-size:12px; }
.audio-track { grid-column:1/-1; height:3px; margin-top:8px; background:rgba(232,224,210,.17); }
.audio-track i { display:block; width:0; height:100%; background:var(--beast-gold); }
.song-lyrics { margin:28px auto 24px; max-width:720px; color:rgba(232,224,210,.86); font-family:var(--serif); font-size:clamp(15px,1.8vw,19px); line-height:1.75; text-align:center; white-space:pre-line; }
.song-lyrics[hidden] { display:none; }
.song-why { display:grid; gap:4px; margin:25px 0; }
.song-why span { color:rgba(232,224,210,.65); }
.song-followup { margin-top:28px; padding-top:24px; border-top:1px solid rgba(232,224,210,.15); }
.song-followup p { margin:0 0 16px; color:rgba(232,224,210,.65); }
.story-panel { padding-block:0; }
.story-panel summary { display:flex; justify-content:space-between; padding:25px 0; font-family:var(--serif); font-size:20px; cursor:pointer; }
.story-panel[open] summary span { transform:rotate(45deg); }
.story-panel p { padding:0 0 28px; color:rgba(232,224,210,.68); }
.small-action { border-color:rgba(184,149,90,.42); background:rgba(184,149,90,.08); }
.small-action p:last-child { max-width:700px; font-family:var(--serif); font-size:20px; }
.result-actions { margin-top:46px; }
.share-status { min-height:25px; color:#dbc89d; }
.support-note p { margin-top:0; }
.download-dialog { width:min(410px,calc(100% - 40px)); max-height:calc(100svh - 48px); margin:auto; padding:0; overflow:auto; color:var(--beast-cream); border:1px solid rgba(184,149,90,.55); border-radius:12px; background:rgba(28,29,41,.98); box-shadow:0 24px 80px rgba(0,0,0,.62); }
.download-dialog::backdrop { background:rgba(7,9,14,.62); backdrop-filter:blur(4px); }
.download-dialog-inner { position:relative; padding:34px 30px 28px; text-align:center; }
.download-dialog h2 { margin:0 0 10px; font-family:var(--serif); font-size:34px; font-weight:500; }
.download-dialog-inner > p:not(.mood-kicker,.dialog-check) { margin:0 auto 20px; max-width:340px; color:rgba(232,224,210,.72); font-size:14px; line-height:1.7; }
.download-dialog .mood-kicker { margin-bottom:11px; font-size:9px; }
.dialog-check { display:grid; width:38px; height:38px; margin:0 auto 15px; place-items:center; color:var(--beast-night); border-radius:50%; background:var(--beast-gold); font-size:19px; }
.dialog-close { position:absolute; top:7px; right:8px; width:40px; height:40px; color:rgba(232,224,210,.7); border:0; background:transparent; font-size:23px; cursor:pointer; }
.dialog-actions { display:grid; gap:10px; }
.download-dialog .mood-button { min-height:44px; padding:10px 16px; font-size:14px; }
.dialog-actions .dialog-route-note { margin:2px auto 0; max-width:320px; color:rgba(232,224,210,.54); font-size:11px; line-height:1.65; }
.dialog-stay { margin:0 auto; padding:6px; color:rgba(232,224,210,.5); border:0; border-bottom:1px solid rgba(232,224,210,.18); background:transparent; font-size:12px; cursor:pointer; }
@media (max-width:430px) {
  .download-dialog { width:min(360px,calc(100% - 28px)); max-height:calc(100svh - 28px); }
  .download-dialog-inner { padding:30px 22px 24px; }
  .download-dialog h2 { font-size:31px; }
}
@keyframes float { 0%,100% { margin-top:0; } 50% { margin-top:-9px; } }
@keyframes dust { to { background-position:40px -130px; } }
@keyframes drawcard { 0%,100% { margin-top:0; } 50% { margin-top:-15px; } }
@media (max-width:800px) {
  .mood-site-header { min-height:66px; padding-inline:20px; }
  .mood-site-header .brand small { display:none; }
  .mood-screen { padding:108px 20px 56px; }
  .mood-cover { grid-template-columns:1fr; min-height:auto; padding-top:125px; }
  .cover-copy h1 { font-size:clamp(48px,14vw,70px); }
  .cover-cards { grid-row:1; width:min(300px,84vw); margin-top:8px; }
  .option-grid { grid-template-columns:1fr; }
  .option-card { min-height:150px; padding:30px 25px 25px 112px; }
  .option-card::before { top:36px; }
  .option-card::after { top:56px; }
  .question-fieldset legend { margin-bottom:28px; font-size:clamp(31px,9vw,46px); }
  .result-hero { grid-template-columns:1fr; }
  .beast-card { width:min(380px,88vw); margin:auto; }
  .result-copy h2 { margin-top:5px; }
}
@media (max-width:430px) {
  .mood-actions,.result-actions { display:grid; }
  .mood-button { width:100%; }
  .question-topline { grid-template-columns:auto 1fr; }
  .question-nav .mood-button { width:auto; flex:1; padding-inline:12px; }
  .option-card { padding-left:98px; }
  .option-card::before { left:20px; }
  .option-card::after { left:45px; }
  .song-meta { grid-template-columns:1fr; }
  .song-meta span { grid-row:2; }
}
@media (prefers-reduced-motion:reduce) {
  .ambient-dust,.ambient-dust::before,.ambient-dust::after,.cover-card,.drawing-cards i { animation:none!important; }
  .mood-card-page * { scroll-behavior:auto!important; transition-duration:.01ms!important; }
}