:root{color-scheme:dark;font-family:system-ui,'Microsoft YaHei',sans-serif;color:#e4dfd2;background:#121a1c}*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;gap:18px;padding:26px 4%;border-bottom:1px solid #3c4948;background:#172224}header h1{margin:2px 0;font:26px Georgia,serif;letter-spacing:5px}small{font-size:10px;letter-spacing:3px;color:#b9a87d}.mark{border:1px solid #b9a87d;padding:12px;font-size:26px;color:#d5c18d}#mode{margin-left:auto;color:#d5c18d;font-size:13px}main{display:grid;grid-template-columns:240px minmax(300px,1fr) 250px;max-width:1600px;margin:auto;min-height:85vh}aside{padding:26px 22px;border-right:1px solid #344342}aside:last-child{border:0;border-left:1px solid #344342}h2{font-size:16px;letter-spacing:1px;margin:0 0 18px}.muted,details{font-size:12px;line-height:1.8;color:#a4b3ad}label{display:block;font-size:13px;margin:16px 0 8px}input,select,textarea,button{font:inherit;max-width:100%}input,select,textarea{width:100%;background:#10191b;color:#e4dfd2;border:1px solid #455653;padding:10px;border-radius:4px}button{cursor:pointer;background:#c4b180;color:#182423;border:0;border-radius:4px;padding:11px 15px;margin:8px 0}aside button{width:100%}button:hover{filter:brightness(1.1)}button:disabled{opacity:.4;cursor:wait}.play{padding:30px 36px}.heading{display:flex;gap:20px;align-items:baseline;justify-content:space-between}#cost{white-space:nowrap;color:#c4b180;font-size:12px}#notice{padding:12px;background:#263735;color:#c9d7ca;font-size:13px;line-height:1.6}#history{min-height:280px;max-height:60vh;overflow:auto}.turn{padding:22px 0;border-bottom:1px solid #344342;line-height:1.9;white-space:pre-wrap}.action{color:#b9a87d;font-size:13px}.check{color:#9dbeb5;font-size:13px}textarea{height:100px;resize:vertical}#actionForm{margin-top:24px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.7}#images img{width:100%;border-radius:4px}dialog{background:#172224;color:#e4dfd2;border:1px solid #c4b180;width:min(900px,90vw);max-height:85vh}dialog::backdrop{background:#000a}.suggestion{display:block;width:100%;text-align:left;background:#233532;color:#d7d3c1;border:1px solid #526b62;line-height:1.6;margin:8px 0}#suggestions{margin-top:20px}@media(max-width:1000px){main{grid-template-columns:210px 1fr}aside:last-child{grid-column:1/-1;border-top:1px solid #344342}.play{padding:25px}}@media(max-width:640px){main{display:block}.heading{display:block}aside{border-bottom:1px solid #344342}header{padding:20px}.play{padding:22px}#history{max-height:none}}

#suggestions{padding:18px 0;border-top:1px solid #344342}#suggestions:empty{display:none}#suggestions h3{margin:0;font-size:15px;color:#d5c18d}#suggestions p{margin:8px 0 12px}.suggestion-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.suggestion-options .suggestion{display:flex;align-items:flex-start;gap:10px;margin:0;padding:13px;overflow-wrap:anywhere}.suggestion-number{flex:0 0 24px;text-align:center;border:1px solid #6f8276;border-radius:4px;color:#d5c18d}.suggestion[aria-pressed=true]{background:#364c41;border-color:#c4b180}.suggestion:focus-visible{outline:2px solid #c4b180;outline-offset:3px}@media(max-width:640px){.suggestion-options{grid-template-columns:1fr}}

/* Current conversation with a local illustrated backdrop. */
.conversation-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 10px}
#currentRound{margin-right:auto;color:#aebeb6;font-size:12px;letter-spacing:2px}
.conversation-toolbar button{margin:0;background:#233431;color:#d7d3c1;border:1px solid #526b62;font-size:12px;padding:9px 13px}
#history.conversation-stage{position:relative;isolation:isolate;min-height:480px;max-height:none;overflow:hidden;border:1px solid #465952;border-radius:10px;background:#142124}
#sceneCanvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.scene-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#09151812 0%,#09151840 35%,#091518a6 100%);pointer-events:none}
#currentDialogue{display:flex;align-items:flex-end;min-height:480px;padding:24px}
#currentDialogue .turn{width:100%;padding:22px 24px;border:1px solid #a2b09b30;border-radius:8px;background:#0b1619e8;box-shadow:0 12px 35px #0005;line-height:1.95}
#currentDialogue .action{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #b5bc9e26}
.narrative{white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px}
#currentDialogue .check:not(:empty){margin-top:15px}
.empty-dialogue{color:#dedacb;line-height:2.2;letter-spacing:2px;font-size:20px;text-shadow:0 2px 14px #000}
.plain-background #sceneCanvas{opacity:0}.plain-background .scene-shade{display:none}
.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;position:sticky;top:0;background:#172224;z-index:1;padding:8px 0;border-bottom:1px solid #40534c}
.dialog-heading h2{margin:0}.dialog-heading button{flex-shrink:0}
#historyDialog,#backgroundDialog{padding:16px 26px 26px;border-radius:10px}
#historyBody .turn{white-space:normal}#historyBody .action{margin-bottom:12px}#historyBody .check{margin-top:10px}
#backgroundPresets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}
.background-preset{padding:0;overflow:hidden;background:#233431;color:#dedacb;border:2px solid #526b62;text-align:left;margin:0}
.background-preset canvas{display:block;width:100%;height:auto}
.background-preset span{display:block;padding:12px 14px}
#backgroundPresets button[aria-pressed=true]{border-color:#d4bc7e;box-shadow:0 0 0 1px #d4bc7e}
#backgroundPresets button[data-background=custom]{grid-column:1/-1;background:#233431;color:#d7d3c1;border:1px solid #526b62}
button:focus-visible{outline:2px solid #d4bc7e;outline-offset:3px}
@media(max-width:640px){#history.conversation-stage,#currentDialogue{min-height:420px}#currentDialogue{padding:12px}#currentDialogue .turn{padding:16px}#backgroundPresets{gap:10px}#historyDialog,#backgroundDialog{padding:12px 16px}.narrative{font-size:14px}}

/* Focused game layout and a separate settings screen. */
[hidden]{display:none!important}body{background:radial-gradient(ellipse at 70% 5%,#29413b55,transparent 50%),#121a1c}
header{padding:18px max(24px,calc((100vw - 1120px)/2));gap:30px;background:#142022e8}
.brand{display:flex;gap:14px;align-items:center;text-decoration:none;color:inherit}.brand .mark{font-size:20px;padding:8px 11px}.brand h1{font-size:21px;letter-spacing:4px}.brand small{font-size:9px;letter-spacing:2px}
header nav{display:flex;gap:8px;margin-left:auto}header nav a{color:#aab9af;text-decoration:none;padding:10px 18px;border-radius:5px;font-size:14px}header nav a[aria-current=page]{background:#2e423c;color:#dfd2ac}
a{color:#d0be8c;text-underline-offset:4px}
main{display:block;max-width:1120px;margin:0 auto;min-height:0;padding:28px 24px 60px}
#notice{max-width:1072px;margin:18px auto 0;border:1px solid #506052;border-radius:5px;padding:12px 16px;background:#22342f;color:#d1dfd2;font-size:13px;line-height:1.7}
.welcome{padding:70px 6% 42px;min-height:75vh;position:relative;background:radial-gradient(ellipse at 90% 40%,#66887a14,transparent 55%)}
.eyebrow{font-size:12px;color:#baaa7c;letter-spacing:5px}.welcome h2{font-family:Georgia,'Microsoft YaHei',serif;font-weight:400;font-size:clamp(34px,5vw,58px);letter-spacing:3px;line-height:1.5;margin:24px 0}.welcome p{line-height:2;color:#b1c0b5;font-size:15px}
.welcome-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}.welcome-actions button{padding:15px 24px}.secondary{background:#243732;color:#d7d8c9;border:1px solid #53695e}.text-button{background:transparent;color:#b9c8bc;border:0;padding-left:0;text-decoration:underline;text-underline-offset:5px}
.steps{display:flex;gap:34px;flex-wrap:wrap;margin:45px 0 22px;padding-top:26px;border-top:1px solid #34453d;color:#b1c0b5;font-size:13px}.steps b{color:#c7b27c;font-size:12px;font-weight:400;margin-right:8px}.welcome .fine{font-size:12px;color:#8fa198}
.play{padding:0}.heading{margin:8px 0 18px}.heading h2{font-size:23px;line-height:1.5;margin:6px 0}.heading small{letter-spacing:2px;font-size:10px}.saved-badge{font-size:11px;color:#9bb4a2;border:1px solid #3a5345;border-radius:20px;padding:6px 12px;white-space:nowrap}
#connectionPrompt{padding:12px 16px;border:1px solid #9d8950;background:#473e2033;font-size:13px;line-height:1.8;margin-bottom:15px;border-radius:5px}
#history.conversation-stage,#currentDialogue{min-height:400px}#currentDialogue{padding:25px}#currentDialogue .turn{padding:23px 27px}
.conversation-toolbar{margin:12px 0;gap:8px}.conversation-toolbar button{font-size:12px}
#suggestions{margin-top:24px;padding-top:22px}.suggestion-options{gap:12px}.suggestion-options .suggestion{padding:15px}
#actionForm{margin-top:14px}#actionForm label{font-size:15px;margin-bottom:12px}#action{min-height:90px;height:90px;border-radius:7px;background:#0f191b}.composer-footer{display:flex;align-items:center;justify-content:space-between;gap:15px}.composer-footer button{padding:12px 24px}.composer-footer .muted{font-size:11px}
.settings-heading{padding:16px 0 26px}.settings-heading small{font-size:11px}.settings-heading h2{font-size:28px;margin:10px 0 16px}.settings-heading a{font-size:13px}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}.settings-card{padding:26px;border:1px solid #3b4d44;background:#172326;border-radius:9px}.settings-card h3{font-size:17px;margin:0 0 15px;color:#ddd5bc}.settings-card:last-child{grid-column:1/-1}.settings-card details{margin-top:20px;border-top:1px solid #34483e;padding-top:15px}.settings-card summary{cursor:pointer;color:#c5cdbc}.settings-card button{font-size:13px}.settings-card input,.settings-card select{font-size:13px}.settings-card .spoiler{border-color:#785749}.spoiler summary{color:#c9a795}.settings-card #mode{margin:0}
dialog{border-color:#64775d;border-radius:10px;padding:20px 26px 28px;width:min(720px,94vw)}#setupDialog{width:min(520px,94vw)}#setupDialog>button{display:block;width:100%;margin-top:12px}#setupDialog details{border-top:1px solid #3c5144;padding-top:20px;margin-top:24px}#setupDialog select{margin:8px 0}#setupDialog p{font-size:12px;line-height:1.8}.attribute-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0 28px}.attribute-grid>div{border:1px solid #43594a;border-radius:5px;padding:12px;display:flex;justify-content:space-between;gap:12px}.attribute-grid span{font-size:13px;color:#aebfb0}.attribute-grid strong{color:#d0be8c}#state h3{font-size:15px;color:#cab887;margin:24px 0 12px}#state p{font-size:14px;line-height:1.8}#images img{max-width:100%}
@media(max-width:640px){header{padding:14px 18px;gap:10px}.brand small{display:none}.brand h1{font-size:18px}.brand .mark{font-size:17px}header nav a{padding:8px 12px}main{padding:18px 16px 36px}.welcome{padding:38px 6px}.welcome h2{font-size:36px}.steps{gap:17px}.settings-grid{grid-template-columns:1fr}.settings-card{padding:20px}.settings-card:last-child{grid-column:auto}.heading h2{font-size:19px}#history.conversation-stage,#currentDialogue{min-height:330px}#currentDialogue{padding:12px}#currentDialogue .turn{padding:16px}.composer-footer .muted{max-width:150px}#notice{margin:12px 16px 0}.attribute-grid{grid-template-columns:repeat(2,1fr)}}

#loginPage{max-width:650px;margin:auto}#loginForm{max-width:360px}#loginForm button{width:100%;margin-top:16px}#newInvite{overflow-wrap:anywhere;padding:12px;border:1px solid #637857;border-radius:4px}#newInvite:empty{display:none}#inviteList button{margin-left:15px}#sharingPanel{grid-column:1/-1}header #logout{font-size:12px;padding:8px 12px}#loginError{color:#e6ae91}

nav #adminLogin{font-size:12px;margin:0;padding:8px 12px;text-decoration:none;color:#b8bca9}#adminDialog{max-width:440px}#adminError{color:#e6ae91}


/* Phone and tablet layouts: intrinsic widths, touch targets, safe areas. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
header>* ,main>* ,.heading>div,.settings-card,.settings-grid>*,.dialog-heading>*,.suggestion-options>*,.attribute-grid>*{min-width:0}
#title,.welcome h2,.settings-heading h2,.dialog-heading h2,#notice,#connectionPrompt,#settingsStatus,#adminError,#dailyUsage,#inviteList p{overflow-wrap:anywhere}
input,select,textarea{min-width:0}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button,summary{overflow-wrap:anywhere}
@media(max-width:900px){
 header{padding-inline:24px;gap:18px}
 .settings-grid{gap:16px}
 .settings-card{padding:20px}
}
@media(max-width:760px){
 .settings-grid{grid-template-columns:minmax(0,1fr)}
 .settings-card:last-child,#sharingPanel{grid-column:auto}
}
@media(max-width:640px){
 body{min-width:0}
 header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px))}
 .brand{grid-column:1;grid-row:1;gap:10px}.brand h1{font-size:19px;letter-spacing:3px}.brand small{display:none}.brand .mark{font-size:18px;padding:6px 10px}
 header nav{grid-column:1/-1;grid-row:2;display:flex;gap:8px;margin:0;width:100%;min-width:0}
 header nav a,nav #adminLogin{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;min-height:44px;font-size:14px;padding:10px 12px;margin:0;white-space:normal;text-align:center}
 header #logout{grid-column:2;grid-row:1;min-height:44px;margin:0;font-size:14px}
 main{width:100%;padding:18px max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
 #notice{margin:12px max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));font-size:14px}
 .welcome{min-height:0;padding:30px 0 20px}.welcome h2{font-size:clamp(30px,8vw,40px);line-height:1.5;letter-spacing:2px;margin:20px 0}.welcome p{font-size:15px}
 .welcome-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:22px}.welcome-actions button{width:100%;margin:0;padding:14px 20px;font-size:16px}
 #welcomeContinue{min-height:44px;font-size:14px}.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:28px 0 18px;padding-top:20px;font-size:12px}.steps b{display:block;margin:0 0 6px}.welcome .fine{font-size:13px}
 .heading{display:flex;align-items:flex-start;gap:12px}.heading h2{font-size:20px;margin:5px 0;line-height:1.5}.saved-badge{flex-shrink:0;font-size:10px;padding:5px 8px;margin-top:4px}
 .conversation-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
 #currentRound{grid-column:1/-1;margin:0 0 3px}
 .conversation-toolbar button{min-height:44px;width:100%;padding:10px 8px;font-size:14px}
 #history.conversation-stage,#currentDialogue{min-height:260px;min-height:clamp(240px,42svh,360px)}
 #currentDialogue{padding:10px}#currentDialogue .turn{padding:16px 14px;line-height:1.85;border-radius:6px}
 .narrative{font-size:16px;line-height:1.85}.action,.check{font-size:13px;overflow-wrap:anywhere}#currentDialogue .action{margin-bottom:12px}
 #suggestions{margin-top:20px;padding-top:18px}.suggestion-options{grid-template-columns:minmax(0,1fr);gap:10px}
 .suggestion-options .suggestion{min-height:52px;padding:13px 12px;font-size:15px;line-height:1.65}
 .suggestion-number{flex-basis:25px;line-height:25px}
 button{min-height:44px}
 input,select,textarea,.settings-card input,.settings-card select{font-size:16px;min-height:46px;padding:12px;max-width:100%}
 input[type=file]{font-size:14px;padding:10px 8px}input[type=file]::file-selector-button{font:inherit;max-width:55%;padding:8px;margin-right:8px}
 label{font-size:14px;line-height:1.6}
 #action{font-size:16px;min-height:112px;height:112px;max-height:45svh;scroll-margin-block:100px}
 .composer-footer{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding-bottom:env(safe-area-inset-bottom,0px)}
 .composer-footer .muted{max-width:none;font-size:12px}.composer-footer #send{width:100%;min-height:48px;margin:0;font-size:16px}
 dialog,#setupDialog,#adminDialog{width:calc(100% - 24px);max-width:720px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));margin:auto;padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
 #historyDialog,#backgroundDialog{padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px))}
 .dialog-heading{gap:12px;align-items:center;padding:6px 0 12px}.dialog-heading h2{font-size:17px;line-height:1.5}.dialog-heading button{min-height:44px;min-width:56px;margin:0}
 dialog p,.muted{overflow-wrap:anywhere}dialog .muted{font-size:13px}
 #setupDialog details>button,#saveSection button,#adminPasswordForm>button,#loginForm button{width:100%;min-height:48px;font-size:16px}
 #historyBody .turn{padding:18px 0}.attribute-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.attribute-grid>div{padding:12px 10px;gap:6px}
 #backgroundPresets{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.background-preset span{padding:10px;font-size:14px}
 .settings-heading{padding:6px 0 20px}.settings-heading h2{font-size:25px}.settings-heading a{display:inline-flex;align-items:center;min-height:44px}
 .settings-card{padding:18px 16px;max-width:100%}.settings-card h3{font-size:17px}.settings-card button{max-width:100%;font-size:14px;margin-right:0}.settings-card form>button,#publishCurrent,#settingsStart,#export{display:block;width:100%}
 summary{min-height:44px;padding:10px 0;font-size:14px}
 #cost{white-space:normal}#inviteList p{display:flex;flex-wrap:wrap;gap:10px;align-items:center}#inviteList button{margin:0}
}
@media(max-width:360px){
 header{padding-inline:12px}.brand h1{font-size:18px;letter-spacing:2px}header nav a,nav #adminLogin{padding-inline:8px;font-size:13px}
 main{padding-inline:12px}.heading h2{font-size:18px}.saved-badge{letter-spacing:0}
 dialog,#setupDialog,#adminDialog{width:calc(100% - 16px);padding-inline:12px}#historyDialog,#backgroundDialog{padding-inline:12px}
 .welcome h2{font-size:30px}.steps{font-size:11px}
}
@media(max-height:500px) and (orientation:landscape){
 .welcome{padding-top:18px}.welcome h2{font-size:30px}
 #history.conversation-stage,#currentDialogue{min-height:180px}
 dialog,#setupDialog,#adminDialog{max-height:calc(100dvh - 16px);margin:8px auto}
}
@media(hover:none){button:hover{filter:none}}
.character-input-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.character-input-grid label{min-width:0}.character-input-grid input{width:100%;box-sizing:border-box}.character-input-grid span{display:block;font-size:13px;margin-bottom:5px}.account-actions{display:flex;gap:10px;flex-wrap:wrap}#characterEditor{max-width:740px}#characterError,#accountError{color:#c77569}#playerAccount{min-height:44px;overflow-wrap:anywhere;max-width:220px}
@media(max-width:640px){.character-input-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#playerAccount{max-width:160px;font-size:13px}#characterEditor input{font-size:16px}.account-actions{display:grid;grid-template-columns:1fr}header nav{flex-wrap:wrap}}
@media(max-width:360px){.character-input-grid{grid-template-columns:1fr}#playerAccount{max-width:130px}}
#characterPresets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px}.character-preset{text-align:left;white-space:normal;padding:12px;background:#243433;color:var(--text,#eee);border:1px solid #607068;min-width:0}.character-preset strong,.character-preset span{display:block}.character-preset span{font-size:12px;font-weight:400;line-height:1.6;margin-top:6px;color:#bcc7c1}.character-preset[aria-pressed="true"]{border-color:#dfc88d;box-shadow:inset 0 0 0 1px #dfc88d;background:#34433a}
@media(max-width:640px){#characterPresets{grid-template-columns:repeat(2,minmax(0,1fr))}.character-preset{padding:10px}}