*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #1a0530;--color-surface: #2c0b4e;--color-primary: #F5C300;--color-primary-ink: #1a0530;--color-accent-magenta: #B6007D;--color-accent-jade: #45AB87;--color-accent-orange: #F39001;--color-accent-sky: #B1DDF4;--color-accent-purple: #370E62;--color-accent-red: #CC1700;--color-text: #f4ecff;--color-text-muted: #9b87c2;--color-border: #4a2178;--min-touch: 44px;--font-size-base: 15px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);--safe-right: env(safe-area-inset-right, 0px)}html,body{width:100%;height:100%;overflow:hidden;background:var(--color-bg);color:var(--color-text);font-family:system-ui,-apple-system,sans-serif;font-size:var(--font-size-base);line-height:1.4;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}#root{width:100%;height:100%;display:flex;flex-direction:column}.app-shell{display:flex;flex-direction:column;width:100%;height:100%;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);padding-left:var(--safe-left);padding-right:var(--safe-right)}.app-shell__main{flex:1;display:flex;flex-direction:row;overflow:hidden}.app-shell__canvas{flex:5;min-width:0;background:#111;position:relative;overflow:hidden;color:var(--color-text-muted)}.app-shell__panel{flex:1.5;min-width:0;display:flex;flex-direction:column;background:var(--color-surface);border-left:1px solid var(--color-border)}.app-shell__panel-content{flex:1;min-height:0;overflow-y:auto;padding:.75rem}.app-shell__panel-nav{display:flex;gap:.5rem;padding:.5rem .75rem;border-top:1px solid var(--color-border);flex-shrink:0}.app-shell__panel-nav button{flex:1;min-height:var(--min-touch);border:1px solid var(--color-border);border-radius:6px;background:var(--color-bg);color:var(--color-text);font-size:.9rem;cursor:pointer}.auth-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:1rem;gap:1rem}.auth-screen h1{font-size:1.5rem;color:var(--color-primary)}.auth-form{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:320px}.auth-form input{min-height:var(--min-touch);padding:.5rem .75rem;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text);font-size:1rem}.auth-form button{min-height:var(--min-touch);border:none;border-radius:6px;background:var(--color-primary);color:var(--color-primary-ink);font-size:1rem;font-weight:600;cursor:pointer}.auth-form button:disabled{opacity:.5;cursor:not-allowed}.auth-error{color:var(--color-primary);font-size:.85rem;text-align:center}.auth-toggle{font-size:.85rem;color:var(--color-text-muted);text-align:center}.auth-toggle button{background:none;border:none;color:var(--color-primary);cursor:pointer;text-decoration:underline}.save-screen{display:flex;flex-direction:column;align-items:center;padding:1rem;gap:1rem;height:100%;overflow-y:auto}.save-screen h2{font-size:1.25rem}.save-list{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:400px}.save-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px}.save-item button{min-height:36px;padding:0 .75rem;border:1px solid var(--color-border);border-radius:4px;background:var(--color-bg);color:var(--color-text);font-size:.85rem;cursor:pointer}.save-actions{display:flex;gap:.5rem}.new-save-form{display:flex;gap:.5rem;width:100%;max-width:400px}.new-save-form input{flex:1;min-height:var(--min-touch);padding:.5rem .75rem;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text);font-size:1rem}.new-save-form button{min-height:var(--min-touch);padding:0 1rem;border:none;border-radius:6px;background:var(--color-primary);color:var(--color-primary-ink);font-size:.9rem;cursor:pointer}.dialogue-box{display:flex;flex-direction:column;gap:.5rem;position:relative}.dialogue-speaker{font-weight:600;color:var(--color-accent-orange);font-size:.9rem}.dialogue-speaker-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.dialogue-history-button{flex:0 0 auto;width:2rem;height:1.6rem;border:1px solid var(--color-border);border-radius:4px;background:var(--color-bg);color:var(--color-text-muted);font-size:1rem;line-height:1;cursor:pointer;padding:0}.dialogue-history-button:active{background:var(--color-primary);color:var(--color-text)}.dialogue-history-backdrop{position:absolute;inset:0;background:#0000008c;display:flex;align-items:stretch;justify-content:stretch;z-index:30}.dialogue-history-panel{flex:1 1 auto;margin:.5rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:6px;display:flex;flex-direction:column;max-height:calc(100% - 1rem);overflow:hidden}.dialogue-history-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-bottom:1px solid var(--color-border);font-weight:600;font-size:.85rem;color:var(--color-text-muted)}.dialogue-history-close{width:1.6rem;height:1.6rem;border:1px solid var(--color-border);border-radius:4px;background:transparent;color:var(--color-text-muted);cursor:pointer;padding:0;font-size:.85rem}.dialogue-history-scroll{flex:1 1 auto;overflow-y:auto;padding:.5rem .75rem;display:flex;flex-direction:column;gap:.6rem}.dialogue-history-entry .dialogue-history-speaker{font-weight:600;font-size:.78rem;color:var(--color-accent-orange);margin-bottom:.15rem}.dialogue-history-entry .dialogue-history-text{font-size:.85rem;line-height:1.4;color:var(--color-text)}.dialogue-history-empty{font-size:.85rem;color:var(--color-text-muted);font-style:italic}.dialogue-text{font-size:.9rem;line-height:1.5;color:var(--color-text)}.dialogue-options{display:flex;flex-direction:column;gap:.4rem;margin-top:.25rem;animation:dialogue-options-fade-in .3s ease-out}.dialogue-options[data-locked=true]{pointer-events:none}@keyframes dialogue-options-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.dialogue-text__caret{display:inline-block;margin-left:1px;animation:dialogue-caret-blink .8s steps(2,end) infinite;color:var(--color-text-muted)}@keyframes dialogue-caret-blink{0%{opacity:1}to{opacity:0}}.dialogue-option{min-height:var(--min-touch);padding:.5rem .75rem;border:1px solid var(--color-border);border-radius:6px;background:var(--color-bg);color:var(--color-text);font-size:.85rem;text-align:left;cursor:pointer;display:flex;align-items:center;gap:.5rem}.dialogue-option__body{flex:1 1 auto;min-width:0}.dialogue-option--leave{margin-top:.25rem;color:var(--color-text-muted);font-style:italic}.dialogue-option:active{background:var(--color-primary);border-color:var(--color-primary)}.voice-tag{flex:0 0 auto;font-size:.65rem;font-weight:700;letter-spacing:.05em;padding:.15rem .4rem;border-radius:999px;border:1px solid currentColor;background:#00000040;white-space:nowrap}.voice-tag--ka-lon{color:var(--color-primary)}.voice-tag--khlong{color:var(--color-accent-sky)}.voice-tag--thuek{color:var(--color-accent-red)}.voice-tag--mee-chok{color:var(--color-accent-magenta)}.intro-modal{position:fixed;inset:0;background:#000000d9;z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem}.intro-modal--transparent{background:#0000004d}.intro-modal--transparent .intro-modal__content{background:#1e1e28eb}.intro-modal__content{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;max-width:640px;max-height:100%;padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:.75rem;overflow-y:auto}.intro-modal__title{color:var(--color-primary);font-size:1.1rem;letter-spacing:.05em;text-transform:uppercase}.intro-modal__content p{font-size:.9rem;line-height:1.5;color:var(--color-text)}.intro-modal__continue{align-self:flex-end;min-height:var(--min-touch);padding:.5rem 1.25rem;border:1px solid var(--color-primary);border-radius:6px;background:var(--color-primary);color:var(--color-primary-ink);font-size:.95rem;cursor:pointer}.char-creator{position:fixed;inset:0;background:#000000e6;z-index:1100;display:flex;align-items:center;justify-content:center;padding:1rem}.char-creator__card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;max-width:640px;width:100%;max-height:100%;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.75rem;overflow-y:auto}.char-creator__step{color:var(--color-primary);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.char-creator__prompt{font-size:.95rem;line-height:1.5;color:var(--color-text)}.char-creator__answers{display:flex;flex-direction:column;gap:.5rem}.char-creator__answer{min-height:var(--min-touch);padding:.5rem .75rem;border:1px solid var(--color-border);border-radius:6px;background:var(--color-bg);color:var(--color-text);font-size:.9rem;text-align:left;cursor:pointer}.char-creator__answer:hover,.char-creator__answer:focus{border-color:var(--color-primary)}.char-creator__stats{display:flex;flex-direction:column;gap:.6rem}.char-creator__stat{border:1px solid var(--color-border);border-radius:6px;padding:.5rem .75rem;background:var(--color-bg)}.char-creator__stat-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.char-creator__stat-label{font-size:.95rem;font-weight:600}.char-creator__stat-controls{display:flex;align-items:center;gap:.5rem}.char-creator__stat-controls button{min-width:36px;min-height:36px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text);font-size:1.1rem;cursor:pointer}.char-creator__stat-controls button:disabled{opacity:.4;cursor:not-allowed}.char-creator__stat-value{min-width:24px;text-align:center;font-size:1rem;font-weight:600}.char-creator__stat-desc{margin-top:.25rem;font-size:.8rem;color:var(--color-text-muted)}.char-creator__actions{display:flex;justify-content:flex-end}.char-creator__confirm{min-height:var(--min-touch);padding:.5rem 1.25rem;border:none;border-radius:6px;background:var(--color-primary);color:var(--color-primary-ink);font-size:.95rem;font-weight:600;cursor:pointer}.char-creator__confirm:disabled{opacity:.5;cursor:not-allowed}.char-creator__error{color:var(--color-primary);font-size:.85rem}a[href*="vibej.am"]{right:auto!important;left:-1px!important;border-top-left-radius:0!important;border-top-right-radius:12px!important}.rotate-prompt{display:none}@media(orientation:portrait)and (hover:none){.rotate-prompt{display:flex;position:fixed;inset:0;z-index:10001;background:#0b0b12;color:#f5f5f7;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;gap:1.25rem}.rotate-prompt__icon{font-size:4.5rem;animation:rotate-prompt-wobble 2.2s ease-in-out infinite}.rotate-prompt__text{font-size:1.1rem;font-weight:600;max-width:18rem;line-height:1.4}}@keyframes rotate-prompt-wobble{0%,to{transform:rotate(-90deg)}50%{transform:rotate(0)}}.flavor-toast-stack{position:absolute;top:.5rem;left:50%;transform:translate(-50%);z-index:25;display:flex;flex-direction:column;gap:.3rem;pointer-events:auto;max-width:90%}.flavor-toast{padding:.35rem .9rem;border-radius:.4rem;background:#16161ee6;color:#d6d6d9;font-size:.82rem;font-style:italic;text-align:center;border:1px solid rgba(180,180,200,.18);cursor:pointer;animation:flavor-toast-in .25s ease-out;box-shadow:0 2px 8px #00000059}@keyframes flavor-toast-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes quest-toast-in{0%{opacity:0;transform:translateY(-8px) scale(.95);filter:brightness(1.6)}40%{opacity:1;transform:translateY(0) scale(1.04);filter:brightness(1.8)}to{opacity:1;transform:translateY(0) scale(1);filter:brightness(1)}}