:root{--bg:#090a10;--text:#f3eee9;--muted:#a49ba1;--line:rgba(255,255,255,.09);--accent:#e47678;--panel:rgba(255,255,255,.045)}
*{box-sizing:border-box} html,body{margin:0;min-height:100%;background:#07080d;color:var(--text);font-family:Manrope,sans-serif}
body{min-height:100dvh}.app{min-height:100dvh;position:relative;overflow:hidden;background:radial-gradient(circle at 80% 10%,rgba(30,50,95,.18),transparent 35%),linear-gradient(160deg,#080b13,#090810 55%,#10080d)}
.app:before{content:"";position:fixed;inset:-30%;pointer-events:none;background:radial-gradient(circle,rgba(104,48,98,.12),transparent 45%);animation:drift 16s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(12%,8%) scale(1.15)}} button{font:inherit;color:inherit}
.shell{position:relative;z-index:1;width:min(100%,520px);min-height:100dvh;margin:auto;padding:calc(28px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column}
.logo{letter-spacing:.38em;font-size:22px;text-align:center;font-weight:500;margin:28px 0 6px}.degree{color:#f07b75;letter-spacing:0}.tagline{text-align:center;color:#c99fa1;font-size:11px;letter-spacing:.26em;text-transform:uppercase;margin-bottom:38px}
h1{font-family:"Instrument Serif",serif;font-size:42px;font-weight:400;margin:8px 0 28px;text-align:center}.stack{display:grid;gap:10px}
.mode{border:1px solid var(--line);border-radius:13px;background:var(--panel);padding:19px 18px;text-align:left;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:.2s transform,.2s border-color}
.mode:active{transform:scale(.985)}.mode strong{display:block;font-size:13px;letter-spacing:.14em}.mode small{display:block;color:#b7adb1;margin-top:6px;font-size:11px}
.mode.ice{background:linear-gradient(110deg,rgba(21,43,91,.42),rgba(13,18,35,.5))}.mode.romance{background:linear-gradient(110deg,rgba(70,33,98,.48),rgba(21,16,41,.5))}
.mode.friends{background:linear-gradient(110deg,rgba(105,47,46,.45),rgba(35,17,28,.5))}.mode.sexy{background:linear-gradient(110deg,rgba(116,25,36,.48),rgba(39,12,21,.5))}
.arrow{font-size:24px;color:#d6c8c8}.secondary{margin-top:18px}.footer-note{margin-top:auto;padding-top:30px;text-align:center;color:#8f7e84;font-size:10px;letter-spacing:.17em;text-transform:uppercase;line-height:1.8}
.topbar{display:flex;align-items:center;justify-content:space-between;height:44px}.iconbtn{border:0;background:transparent;font-size:23px;cursor:pointer;padding:8px}
.step-title{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#c4b6ba}.choice-title{font-family:"Instrument Serif",serif;font-size:30px;font-weight:400;margin:28px 0 18px}
.choice{width:100%;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.05);padding:16px;text-align:left;margin-bottom:9px;cursor:pointer}
.choice.selected{border-color:rgba(235,116,120,.7);background:rgba(147,45,71,.22)}.choice b{display:block;font-size:13px}.choice span{font-size:10px;color:var(--muted)}
.divider{height:1px;background:var(--line);margin:25px 0}.primary{width:100%;border:1px solid rgba(244,119,123,.25);border-radius:11px;background:linear-gradient(90deg,#44203f,#791e32);padding:17px;letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-weight:700;cursor:pointer;margin-top:20px}
.game{transition:background 1.5s ease}.game.i1{background:radial-gradient(circle at 50% 55%,rgba(24,48,105,.22),transparent 45%),#080a12}.game.i2{background:radial-gradient(circle at 50% 55%,rgba(73,41,124,.23),transparent 45%),#0b0812}.game.i3{background:radial-gradient(circle at 50% 55%,rgba(117,43,89,.23),transparent 45%),#100810}.game.i4{background:radial-gradient(circle at 50% 55%,rgba(133,37,57,.25),transparent 45%),#13080d}.game.i5{background:radial-gradient(circle at 50% 55%,rgba(167,41,40,.28),transparent 45%),#16090b}
.game .shell{justify-content:space-between}.meta{text-align:center;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#d0c2c4;margin-top:5px}
.question-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:30px 15px}.question{font-family:"Instrument Serif",serif;font-size:clamp(37px,10vw,55px);line-height:1.04;text-align:center;font-weight:400;animation:appear .38s ease}
@keyframes appear{from{opacity:0;transform:translateX(16px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}.intensity{text-align:center;color:#9e8b90;font-size:9px;letter-spacing:.15em;text-transform:uppercase;margin:10px}
.dots{display:flex;gap:8px;justify-content:center;margin:8px}.dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}.dot.on{background:#ee7779}
.controls{display:flex;justify-content:space-between;align-items:center;padding:14px 18px}.round{width:58px;height:58px;border-radius:50%;border:1px solid var(--line);background:rgba(45,16,34,.65);font-size:24px;cursor:pointer}.orb{width:74px;height:74px;border-radius:50%;border:2px solid #ed726f;background:radial-gradient(circle,rgba(240,110,111,.18),rgba(23,12,25,.85));box-shadow:0 0 24px rgba(210,56,75,.12);cursor:pointer}
.menu{position:fixed;z-index:5;inset:0;background:rgba(5,5,9,.72);backdrop-filter:blur(10px);display:flex;align-items:flex-end;justify-content:center}.sheet{width:min(100%,520px);background:#111019;border:1px solid var(--line);border-radius:24px 24px 0 0;padding:25px 22px calc(28px + env(safe-area-inset-bottom))}
.sheet h2{font-family:"Instrument Serif";font-size:29px;font-weight:400}.sheet button{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);padding:15px;border-radius:10px;text-align:left;margin:5px 0;cursor:pointer}
.progress-list{margin-top:25px}.level{display:grid;grid-template-columns:24px 1fr;gap:13px;padding-bottom:25px;position:relative}.level:before{content:"";position:absolute;left:7px;top:15px;bottom:-2px;width:1px;background:linear-gradient(#718fe5,#d64f5b)}.level:last-child:before{display:none}.node{width:15px;height:15px;border-radius:50%;background:#cf5865;box-shadow:0 0 0 5px rgba(207,88,101,.1)}.level b{font-size:10px;letter-spacing:.12em}.level strong{display:block;font-family:"Instrument Serif";font-size:19px;font-weight:400;margin:3px 0}.level small{color:var(--muted)}
@media(min-width:700px){body{background:#05060a}.shell{border-left:1px solid rgba(255,255,255,.04);border-right:1px solid rgba(255,255,255,.04)}}