:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{margin:0;padding:0;box-sizing:border-box}#root{height:100%}:root{--primary-color: #4aa9ff;--primary-hover-color: #358fd4;--secondary-color: #f59e0b;--white: #ffffff;--light-gray: #e0e0e0;--dark-gray: #333;--border-radius: 15px;--box-shadow: 0 6px 12px rgba(0, 0, 0, .1)}body{font-family:Arial,sans-serif;background:linear-gradient(135deg,#eef2f3,var(--light-gray));color:var(--dark-gray);display:flex;justify-content:center;align-items:center;min-height:100vh}.question-section{flex:2;max-width:600px;background:var(--white);border-radius:var(--border-radius);box-shadow:var(--box-shadow);text-align:left}@media (max-width: 768px){.main-section{flex-direction:column;gap:1.5rem}.question-section,.avatar-section{max-width:100%}}.avatar-wrapper{flex:1;max-width:180px;text-align:left;border-radius:10px;transition:transform .3s ease,box-shadow .3s ease;position:relative}.avatar-wrapper:hover{transform:translateY(-5px);box-shadow:0 8px 16px #0000004d}.avatar-container{width:120px;height:120px;position:relative;overflow:hidden;border-radius:10px}.avatar-image{width:100%;object-fit:cover;border-radius:10px;transition:transform .3s ease,box-shadow .3s ease}.avatar-image:hover{transform:scale(1.05);box-shadow:0 8px 16px #0000004d}.stats-container{margin-top:.3rem;display:flex;flex-direction:column;gap:.5rem;width:100%;background:#fff6;padding:10px;border-radius:10px;box-shadow:0 4px 8px #0000001a;animation:fadeIn .3s ease}.stat-bar{display:flex;align-items:center}.stat-icon{width:1.3rem;height:1.3rem;margin-right:.5rem;color:#777}.stat-label{width:80px;font-size:1rem;font-weight:700;color:#333;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.progress-bar{flex-grow:1;height:14px;background:#e0e0e0;border-radius:7px;overflow:hidden;position:relative;box-shadow:inset 0 2px 4px #0000001a}.progress-fill{height:100%;border-radius:7px;transition:width .5s ease,background-color .3s ease}.progress-fill.charm{background:linear-gradient(90deg,#4aa9ff,#007bff)}.progress-fill.health{background:linear-gradient(90deg,#4caf50,#2e7d32)}.progress-fill.intelligence{background:linear-gradient(90deg,#ff9800,#e65100)}.stat-value{font-size:1rem;font-weight:700;color:#555}@media (max-width: 480px){.avatar-wrapper{padding:8px;max-width:140px}.avatar-container{max-width:120px}.stat-icon{width:1rem;height:1rem}.stat-label{font-size:.8rem}.progress-bar{height:8px}.stat-value{font-size:.8rem}}.summary-page{display:flex;overflow-x:none;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(135deg,#d9e8f5,#f4faff);font-family:Arial,sans-serif}.summary-title{font-size:2.8rem;font-weight:700;color:#333;margin-bottom:1.5rem;text-align:center}.summary-avatar{margin-bottom:2rem;text-align:center;animation:float 3s ease-in-out infinite}.avatar-name{font-size:1.5rem;color:#4aa9ff;font-weight:700;margin-top:.5rem}.story-progress-container{width:100%;max-width:600px;margin-bottom:2rem;background:#fff;border-radius:20px;padding:1.5rem;animation:slideIn 1s ease-in-out;text-align:center}.ending-card{text-align:center;background:#fff;padding:20px;width:100%;box-shadow:0 8px 20px #0003;margin-bottom:2rem;animation:fadeIn 1s ease-in-out}.ending-title{font-size:30px;font-weight:700;color:#285178;margin-bottom:1rem;text-align:left}.ending-message{word-break:keep-all;font-size:18px;line-height:1.2;text-align:left;color:#555;padding-bottom:10px}.ending-image{max-width:calc(100% + 40px);margin-left:-20px;height:auto;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer}.restart-btn{background:#343434;color:#fff;border:none;width:100%;height:60px;line-height:60px;border-radius:0;padding:0;font-size:1.2rem;font-weight:400;cursor:pointer;transition:background .3s ease,transform .3s ease}@keyframes slideIn{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@media (max-width: 768px){.summary-title{font-size:2rem}.story-progress-container{padding:20px}.ending-card{padding:20px 20px 0}.restart-btn{font-size:1rem}}html,body{margin:0;padding:0;height:100%}.full-screen-card{position:relative;width:100vw;height:100vh;overflow:hidden}.background-image{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden}.background-image img{width:100%;height:100%;object-fit:cover}.avatar-overlay{position:absolute;top:10px;left:10px;z-index:10;width:180px}.overlay-content{position:absolute;bottom:20%;left:50%;transform:translate(-50%);width:80%;z-index:20;background-color:#ffffffb3;border-radius:15px;padding:30px 20px}.overlay-content .question-text{font-weight:700;color:#000;margin-bottom:1rem}.overlay-content .options{display:flex;flex-direction:column;gap:.8rem}.overlay-content .option-btn{padding:14px 10px;font-size:.8rem;font-weight:700;border:none;background:#0009;color:#fff;border-radius:8px;cursor:pointer;transition:background .3s,transform .2s ease}.overlay-content .option-btn:hover{background:#358fd4;transform:translateY(-3px);box-shadow:0 6px 12px #0003;transition:all .3s ease}.overlay-content .option-btn:active{background:#2c7bb6;transform:translateY(0);box-shadow:0 2px 4px #0003}@media (max-width: 480px){.overlay-content{bottom:60px;width:90%}.overlay-content .question-text{font-size:1rem}.avatar-overlay{width:120px}}.new-story{width:100%;position:fixed;top:0;right:0;background:#000;color:#fff;padding:1rem;border-radius:0 0 10px 10px;animation:fadeIn .5s ease-in-out;z-index:99999}.new-story-header{display:flex;align-items:center;font-weight:700;font-size:1rem}.new-story-text{margin:0;font-size:.8rem}.timeline{list-style:none;padding:0;margin:0;position:relative;padding-left:2rem}.timeline:before{content:"";position:absolute;top:0;left:1rem;width:1px;height:100%;background:#ddd}.timeline-item{position:relative;margin-bottom:1rem;padding-left:1.5rem;animation:fadeIn .5s ease-in-out}.timeline-item:last-child{margin-bottom:0}.timeline-icon{position:absolute;left:-18px;top:0;width:5px;height:5px;background:#4aa9ff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.8rem}.timeline-content{background:#f7f9fc;padding:.8rem;border-radius:10px;box-shadow:0 2px 6px #0000001a}.timeline-content p{margin:0;font-size:1rem;color:#555;text-align:left}.timeline-item.highlight .timeline-icon{background:#ff9800}.timeline-item.highlight .timeline-content{background:#fff4e5}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.item-notification{position:fixed;bottom:20px;right:20px;background:#4caf50;color:#fff;padding:1rem;border-radius:10px;box-shadow:0 4px 8px #0003;animation:fadeIn .5s ease-in-out;display:flex;align-items:center;gap:1rem;z-index:9999}.item-notification-header{display:flex;align-items:center;gap:1rem}.item-image{width:50px;height:50px;border-radius:10px;object-fit:cover}.item-notification-text{margin:0;font-size:1rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.npc-dialogue-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.npc-dialogue{background-color:#fffc;padding:30px;box-sizing:border-box;border-radius:15px;width:300px;text-align:center;box-shadow:0 8px 16px #0000004d;animation:fadeIn .3s ease-in-out;position:relative;overflow:hidden}.npc-dialogue:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url(/assets/images/npc-dialogue-bg.png) no-repeat center center;background-size:cover;opacity:.1;z-index:-1;border-radius:15px}.npc-image-container{position:relative;width:150px;height:150px;border-radius:50%;overflow:hidden;margin:0 auto 20px;background:linear-gradient(135deg,#f7f9fc,#eaf1f7);box-shadow:0 4px 8px #0003}.npc-image{width:100px;height:100px;object-fit:cover;animation:float 3s ease-in-out infinite}.npc-dialogue h3{font-size:24px;color:#000;margin-bottom:15px}.npc-dialogue p{font-size:18px;line-height:1.6;margin-bottom:20px;color:#000}.close-btn{padding:10px 20px;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer;margin-top:20px;font-size:16px;transition:background-color .3s,transform .2s ease}.close-btn:hover{background-color:#0056b3;transform:translateY(-2px)}.close-btn:active{background-color:#004080;transform:translateY(0)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 480px){.npc-image-container{width:100px;height:100px}.npc-dialogue h3{font-size:20px}.npc-dialogue p{font-size:16px}.close-btn{padding:8px 16px;font-size:14px}}.random-event-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:1000}.random-event-modal{position:absolute;left:0;background:#fff;padding:3rem 1rem 1rem;border-radius:15px;width:100%;text-align:center;box-shadow:0 8px 16px #0000004d;animation:slideIn .3s ease-out;position:relative;overflow:hidden}.random-event-modal:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url(/assets/images/event-modal-bg.png) no-repeat center center;background-size:cover;opacity:.1;z-index:-1;border-radius:15px}.event-image-container{position:relative;width:100px;height:100px;border-radius:15px;overflow:hidden;margin:0 auto 1rem;background:linear-gradient(135deg,#f7f9fc,#eaf1f7)}.event-image{width:100%;height:100px;object-fit:cover}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.random-event-modal h3{display:block;font-size:18px;margin-bottom:20px 0 2px;color:#000;text-align:left;letter-spacing:-1px;font-weight:500}.random-event-modal p{font-size:16px;line-height:1.6;text-align:left;margin-bottom:1.5rem;color:#555}.event-options{display:flex;flex-direction:column;gap:.8rem;margin-top:1.5rem}.event-option-btn{padding:.8rem;font-size:1rem;border:none;background:#4aa9ff;color:#fff;border-radius:8px;cursor:pointer;transition:background .3s,transform .2s ease}.event-option-btn:hover{background:#358fd4;transform:translateY(-2px)}.event-option-btn:active{background:#2c7bb6;transform:translateY(0);box-shadow:0 2px 4px #0003}.close-btn{padding:.5rem 1rem;background:#fff;color:#000;border:none;border-radius:5px;cursor:pointer;margin-top:1rem;font-size:.9rem;transition:background-color .3s,transform .2s ease}.close-btn:hover{background:#e60000;transform:translateY(-2px)}.close-btn:active{background:#c00;transform:translateY(0)}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.quest-list-container{position:fixed;top:20px;right:20px;width:260px;background:#000000bf;border-radius:14px;box-shadow:0 6px 18px #0006;z-index:1000;padding:1.2rem;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:1;transition:opacity .3s ease,transform .2s ease;border:1px solid rgba(255,255,255,.2);animation:slideIn .4s ease-out}.quest-list-container.hidden{opacity:0;transform:translate(120%);pointer-events:none;animation:slideOut .2s ease-in}.quest-list h3{font-size:1rem;margin-bottom:1rem;color:#fff;text-align:center;font-weight:700}.quest-item{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:.8rem;margin-bottom:1rem;transition:box-shadow .3s ease,transform .3s ease}.quest-item:hover{box-shadow:0 6px 15px #0000004d;transform:translateY(-4px)}.quest-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}.quest-header h4{font-size:.75rem;color:#4aa9ff;margin:0;font-weight:700}.quest-status{font-size:.65rem;font-weight:700;padding:.3rem .6rem;border-radius:10px;display:flex;align-items:center;gap:.3rem}.quest-status.completed{background:#32cd3233;color:#32cd32}.quest-status.in-progress{background:#ffc10733;color:#fff}.quest-description{font-size:.75rem;color:#ddd;margin:0 0 .8rem;line-height:1.4}.quest-reward-button{background:linear-gradient(90deg,#4aa9ff,#3a8fd9);color:#fff;border:none;border-radius:10px;padding:2px;font-size:12px;font-weight:700;cursor:pointer;text-align:center;transition:background .3s ease,transform .2s ease,box-shadow .2s ease;width:100%}.quest-reward-button:hover{background:linear-gradient(90deg,#3a8fd9,#357cba);box-shadow:0 4px 8px #0000004d}.quest-reward-button:active{transform:scale(.97)}.quest-list-toggle-button{position:fixed;top:18px;right:20px;background:#000;color:#fff;border:none;border-radius:4px;padding:6px;font-size:12px;cursor:pointer;z-index:1001;transition:background .3s ease,transform .2s ease;display:flex;align-items:center;gap:.2rem}.quest-progress{background:#e0e0e033;border-radius:8px;overflow:hidden;height:10px;margin-top:.5rem;box-shadow:inset 0 2px 4px #0000001a}.quest-progress-bar{background:linear-gradient(90deg,#4aa9ff,#007bff);height:100%;transition:width .3s ease;box-shadow:0 2px 4px #0003}@keyframes slideIn{0%{transform:translate(120%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideOut{0%{transform:translate(0);opacity:1}to{transform:translate(120%);opacity:0}}.reward-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;justify-content:center;align-items:center;z-index:2000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.reward-popup{background:#000000e6;border-radius:16px;padding:2rem;width:300px;text-align:center;box-shadow:0 8px 24px #00000080;border:1px solid rgba(255,255,255,.2)}.reward-popup h3{font-size:1.5rem;color:#4aa9ff;margin-bottom:1rem;text-shadow:1px 1px 4px rgba(0,0,0,.5)}.reward-content{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem}.reward-item{background:#ffffff1a;border-radius:10px;padding:1rem;color:#fff;font-size:1rem;text-shadow:1px 1px 2px rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:center;gap:.5rem}.reward-item-image{width:80px;height:80px;border-radius:10px;object-fit:cover;border:2px solid rgba(255,255,255,.2)}.reward-item span{font-weight:700;color:#4aa9ff}.reward-item p{margin:0;font-size:.9rem;color:#ddd}.reward-stats{background:#ffffff1a;border-radius:10px;padding:.8rem;color:#fff;font-size:1rem;text-shadow:1px 1px 2px rgba(0,0,0,.3)}.reward-stats span{display:block;margin:.2rem 0}.reward-close-button{background:linear-gradient(90deg,#4aa9ff,#3a8fd9);color:#fff;border:none;border-radius:10px;padding:.8rem 1.5rem;font-size:1rem;font-weight:700;cursor:pointer;transition:background .3s ease,transform .2s ease}.reward-close-button:hover{background:linear-gradient(90deg,#3a8fd9,#357cba);transform:translateY(-2px)}.reward-close-button:active{transform:scale(.97)}