/* A drawn candy dream: muted chocolate, dusty rose and cold blue, never glossy UI. */
#screen-vn { background: #17131e; isolation: isolate; }
#vn-backdrop { background-position: center; }
.vn-room-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #16111c66, transparent 55%), radial-gradient(ellipse at 52% 42%, transparent 38%, #17131e50); }
.vn-scene-caption { position: absolute; top: 23px; left: 28px; display: grid; gap: 7px; color: #efe0e3; text-shadow: 0 2px 6px #16111c; pointer-events: none; }
.vn-scene-caption small { font-size: 10px; letter-spacing: .17em; opacity: .75; }
.vn-scene-caption span { font-family: 'Neucha', cursive; font-size: 25px; }
#vn-girl, #vn-girl-previous { width: min(520px, 85vw); height: min(780px, 94vh); bottom: 0; left: 52%; position: absolute; transform: translateX(-50%); background-size: contain; background-repeat: no-repeat; background-position: bottom center; pointer-events: none; }
#vn-girl-previous { z-index: 1; opacity: 0; }
#vn-girl-previous.fading { animation: portraitChange .22s ease-out forwards; }
@keyframes portraitChange { from { opacity: 1; } to { opacity: 0; } }
#vn-reflection { z-index: 0; }
#affection-meter-box { top: 70px; right: 24px; min-width: 180px; padding: 12px 15px; border: 1px solid #9e7c95; border-radius: 6px; background: #27212fdf; box-shadow: 0 4px 18px #17101b30; }
.affection-label-row { color: #ecd2df; font-size: 12px; gap: 20px; font-weight: 400; }
.affection-bar-bg { height: 8px; border: none; background: #564457; border-radius: 3px; }
#affection-fill { border-radius: 3px; background: linear-gradient(90deg, #ac739c, #d6a5bb); box-shadow: none; }
#vn-dialogue-box { bottom: 25px; width: min(980px, 92vw); min-height: 190px; padding: 22px 28px 13px; max-height: calc(100% - 155px); overflow: auto; border: 1px solid #a6889c; border-radius: 7px; background: #f1e4e8f5; backdrop-filter: none; box-shadow: 0 9px 32px #120d1c55, inset 0 0 0 4px #fff9fb30; }
#vn-speaker { align-self: flex-start; color: #754459; font-size: 16px; letter-spacing: .025em; padding: 0 0 8px; margin-bottom: 11px; min-width: 90px; border-bottom: 1px solid #bf97ac; text-shadow: none; overflow-wrap: anywhere; }
#vn-text { color: #3a2e3b; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; min-height: 65px; overflow-wrap: anywhere; }
#vn-choices { gap: 8px; margin-top: 15px; }
.choice-btn { position: relative; display: flex; align-items: center; gap: 13px; border: 1px solid #bfa1b4; border-radius: 4px; background: #e6d7e3; color: #584154; box-shadow: none; font-size: 15px; font-weight: 400; padding: 11px 14px; min-height: 43px; transition: background .15s, border-color .15s; }
.choice-btn::before { content: attr(data-number); color: #90708b; font: 12px 'Share Tech Mono', monospace; flex-shrink: 0; }
.choice-btn:hover, .choice-btn:focus-visible { transform: none; background: #d7c2d5; color: #442d44; border-color: #8d6c8b; box-shadow: none; outline: 2px solid #867798; outline-offset: 2px; }
.vn-next-prompt { color: #8c6e83; font-size: 12px; font-weight: 400; margin-top: 0; animation: none; }
.vn-next-arrow { color: #8c6e83; font-size: 10px; }
.vn-controls-note { margin-top: 13px; padding-top: 10px; border-top: 1px solid #d5becd; color: #978193; font-size: 10px; letter-spacing: .02em; text-align: right; }
.on-novel #btn-settings { left: auto; right: 24px; top: 20px; color: #ded0dd; background: #27212fe0; border-color: #806c87; border-radius: 5px; font-size: 12px; }
.on-novel .crt-overlay { opacity: .2; }
.reduced-effects #vn-girl-previous.fading { animation: none; opacity: 0; }
.reduced-effects .vn-next-arrow { animation: none; }
@media (max-width: 600px) {
    #vn-backdrop { background-position: 25% center; }
    .vn-scene-caption { top: 19px; left: 17px; }
    .vn-scene-caption small { font-size: 8px; letter-spacing: .1em; }
    .vn-scene-caption span { font-size: 21px; }
    #affection-meter-box { top: 64px; right: 16px; min-width: 138px; padding: 9px 11px; }
    #vn-dialogue-box { bottom: 14px; padding: 16px 17px 12px; width: calc(100% - 24px); max-height: 56%; }
    #vn-text { font-size: 16px; line-height: 1.6; }
    #vn-speaker { font-size: 15px; margin-bottom: 9px; }
    #vn-girl, #vn-girl-previous { left: 50%; width: min(510px, 110vw); height: min(780px, 90vh); bottom: 65px; }
    .on-novel #btn-settings { right: 16px; padding: 7px 10px; }
    .choice-btn { font-size: 13px; padding: 9px 11px; }
    .vn-controls-note { display: none; }
    .vn-next-prompt { font-size: 10px; }
}
@media (max-height: 650px) and (min-width: 601px) {
    #vn-dialogue-box { bottom: 12px; padding: 14px 22px 10px; min-height: 145px; width: min(980px, 94vw); }
    #vn-text { min-height: 45px; font-size: 15px; }
    #vn-speaker { margin-bottom: 5px; font-size: 14px; padding-bottom: 5px; }
    .choice-btn { min-height: 35px; font-size: 13px; padding: 7px 12px; }
    .vn-controls-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    #vn-girl-previous.fading { animation: none; opacity: 0; }
    .vn-next-arrow { animation: none; }
}