:root{font-family: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}body{margin:0;padding:0;width:100vw;height:100vh;overflow:hidden}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}}.game-container{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.illustration-container{width:min(100vw,calc(100vh * 2480 / 1748));width:min(100vw,calc(100dvh * 2480 / 1748));height:min(100vh,calc(100vw * 1748 / 2480));height:min(100dvh,calc(100vw * 1748 / 2480));background-color:#2c3e50;overflow:hidden;box-shadow:0 0 20px #000c;position:relative;margin:0}.scene-image{width:100%;height:100%;object-fit:cover;display:block}.interaction-area{position:absolute;bottom:30px;left:50%;transform:translate(-50%);display:flex;flex-direction:row;width:90%;gap:20px;align-items:flex-end;justify-content:center;z-index:10}.text-bubble{background-color:#fffffff2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);color:#2c3e50;padding:25px;border-radius:20px 20px 20px 5px;box-shadow:0 4px 12px #0003;flex:2;min-height:120px;display:flex;flex-direction:column;justify-content:space-between;font-size:1.1rem;line-height:1.6}.choices-bubble{background-color:#f0f4f8f2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);padding:20px;border-radius:20px 20px 5px;box-shadow:0 4px 12px #0003;flex:1;display:flex;flex-direction:column;gap:12px;justify-content:center}.choice-option{background-color:#fff;border:2px solid #e2e8f0;padding:12px 16px;border-radius:10px;cursor:pointer;text-align:left;transition:all .2s ease;font-size:1rem;color:#4a5568;font-weight:500}.choice-option:hover{background-color:#3182ce;border-color:#3182ce;color:#fff;transform:translate(5px);box-shadow:0 2px 8px #3182ce4d}.action-btn{align-self:flex-end;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;font-weight:700;margin-top:20px;transition:all .2s;font-size:1rem;text-transform:uppercase;letter-spacing:.5px}.continue-btn{background-color:#48bb78;color:#fff}.continue-btn:hover{background-color:#38a169;transform:translateY(-2px);box-shadow:0 4px 12px #48bb784d}.reset-btn{background-color:#ed8936;color:#fff}.reset-btn:hover{background-color:#dd6b20;transform:translateY(-2px);box-shadow:0 4px 12px #ed89364d}@media(max-width:768px){.interaction-area{flex-direction:column;bottom:10px;width:95%}.text-bubble,.choices-bubble{width:100%;flex:none;border-radius:15px;padding:15px;min-height:auto}}@media(max-height:600px)and (orientation:landscape){.interaction-area{flex-direction:row;bottom:15px;width:96%;gap:10px}.text-bubble{padding:8px 12px;min-height:auto;font-size:.85rem;line-height:1.25;border-radius:12px}.text-bubble p{margin:0}.choices-bubble{padding:8px;gap:5px;border-radius:12px}.choice-option{padding:5px 8px;font-size:.8rem;border-radius:6px}.action-btn{margin-top:4px;padding:5px 10px;font-size:.8rem}}#root{margin:0;padding:0;text-align:center;width:100%;height:100vh;height:100dvh;overflow:hidden}.app-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;height:100dvh;width:100vw;background-color:#1a1a1a}main{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.rotate-warning{display:none;flex-direction:column;align-items:center;justify-content:center;position:fixed;inset:0;background-color:#2c3e50;color:#fff;z-index:9999;padding:20px;box-sizing:border-box}.rotate-icon{font-size:4rem;margin-bottom:20px;animation:rotate-animation 2s infinite ease-in-out}.rotate-warning p{font-size:1.5rem;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;max-width:80%}@keyframes rotate-animation{0%{transform:rotate(0)}25%{transform:rotate(-90deg)}50%{transform:rotate(-90deg)}to{transform:rotate(0)}}@media(max-width:768px)and (orientation:portrait){.rotate-warning{display:flex}.game-content{display:none!important}}
