/* Текстовый интерфейс в духе Degrees of Lewdity: узкая колонка истории + правая панель, минимум рамок */
:root{
  --bg:#0b0b0e; --bg2:#111116; --text:#ddd6e6; --dim:#7d7688;
  --amber:#e0a44a; --red:#c85a5a; --green:#6fae7f; --blue:#7d8fd0;
  --line:#232028; --panel:#131318;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);
  font:15px/1.65 Georgia,'Times New Roman',ui-serif,serif;
  height:100dvh;display:flex;flex-direction:column;overflow:hidden}

#top{display:flex;align-items:baseline;gap:16px;padding:14px 22px 10px;border-bottom:1px solid var(--line)}
.brand{letter-spacing:.22em;text-transform:uppercase;font-size:11px;color:var(--amber);font-family:ui-monospace,monospace}
#turnChip{font-family:ui-monospace,monospace;font-size:11px;color:var(--dim)}
#top #newWorld{margin-left:auto}

#layout{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 288px;min-height:0}
@media (max-width:820px){#layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}
  #side{max-height:42vh;border-left:0;border-top:1px solid var(--line)}}

#art{width:100%;max-width:520px;height:auto;image-rendering:pixelated;display:block;margin:0 auto 14px;border:1px solid var(--line);background:#05050a}
#story{display:flex;flex-direction:column;min-height:0;padding:18px clamp(16px,5vw,64px) 12px;max-width:820px;width:100%;margin:0 auto}
#sceneName{font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
#sceneText{margin:0 0 6px;color:#c9c2d6;font-style:italic}
#sceneName:empty{display:none}
#goalLine{margin:0 0 14px;font-size:13px;color:var(--amber);font-family:ui-monospace,monospace}
#goalLine:empty{display:none;margin:0}

#log{flex:1;overflow-y:auto;padding:6px 4px 6px 0;display:flex;flex-direction:column-reverse;gap:12px}
#log::-webkit-scrollbar{width:6px}
#log::-webkit-scrollbar-thumb{background:#26222c;border-radius:6px}
.msg{max-width:100%;color:#cfc8db}
.msg .who{display:block;font-family:ui-monospace,monospace;font-size:11px;letter-spacing:.06em;color:var(--amber);margin-bottom:2px}
.msg.me{color:#b9b0c9;font-style:italic}
.msg.sys{color:var(--dim);font-size:13px;font-family:ui-monospace,monospace}
.msg.narr{color:#b0a8c0;font-style:italic}

#actions{display:flex;gap:18px;align-items:baseline;padding:10px 0 6px;border-top:1px solid var(--line);flex-wrap:wrap}
#talkRow{display:flex;gap:10px;align-items:center;padding:6px 0 4px}
#npcs{display:flex;gap:14px;padding:2px 0 0;flex-wrap:wrap}

input[type=text]{flex:1;padding:8px 2px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);font:inherit;outline:none}
input[type=text]:focus{border-bottom-color:var(--amber)}

button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;padding:0}
.link{font-family:ui-monospace,monospace;font-size:12.5px;color:var(--dim);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#3a3444}
.link:hover{color:var(--amber);text-decoration-color:var(--amber)}
.link.strong{color:var(--amber)}
.link.on{color:#d98ab0;text-decoration-color:#d98ab0}
button:disabled{opacity:.4;cursor:default}

#side{border-left:1px solid var(--line);background:var(--panel);padding:16px 18px;overflow:auto;font-family:ui-monospace,monospace;font-size:12.5px}
#side::-webkit-scrollbar{width:6px}
#side::-webkit-scrollbar-thumb{background:#26222c;border-radius:6px}
#heroCard{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:14px}
#heroIcon{font-size:15px}
#heroName{color:var(--text);font-size:14px}
#heroSub{color:var(--dim);font-size:11px}
.stat{display:flex;justify-content:space-between;gap:8px;padding:1px 0}
.stat .lab{color:var(--dim)}
.stat b{font-weight:400}
.bar{height:2px;background:#221e28;margin:2px 0 6px}
.bar i{display:block;height:100%}
.sec{margin:16px 0 6px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:4px}
.dim{color:var(--dim)}
.small{font-size:11px}
.list{display:flex;flex-direction:column;gap:2px}
.item{color:var(--dim);cursor:pointer;padding:1px 0}
.item:hover{color:var(--amber)}
.item .n{color:var(--text)}
.hidden{display:none!important}

#modal{position:fixed;inset:0;background:rgba(6,5,9,.86);display:flex;align-items:center;justify-content:center;z-index:70;padding:16px}
#modal .card{width:min(420px,100%);background:#131318;border:1px solid var(--line);padding:20px}
#modalHead{color:var(--amber);font-family:ui-monospace,monospace;font-size:13px;letter-spacing:.1em;margin-bottom:10px}
#modalBody{color:#c9c2d6;margin-bottom:16px}
#modalActions{display:flex;gap:16px}

#toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:80px;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;z-index:60}
.toast{background:#181420;border:1px solid var(--line);padding:6px 12px;font-family:ui-monospace,monospace;font-size:11.5px;color:#cfc8db}

#intro{position:fixed;inset:0;background:rgba(8,8,11,.97);display:flex;align-items:center;justify-content:center;padding:16px;z-index:100}
#intro .card{width:min(560px,100%);background:#111116;border:1px solid var(--line);padding:26px}
#intro h1{margin:0 0 8px;font-size:16px;letter-spacing:.22em;text-transform:uppercase;color:var(--amber);font-family:ui-monospace,monospace}
#intro p{margin:0 0 18px;color:var(--dim);font-size:13px}
#intro label{display:block;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:14px 0 4px}
#intro textarea,#intro input{width:100%;padding:10px 2px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);font:inherit;outline:none;resize:vertical}
#intro textarea{min-height:90px}
#intro textarea:focus,#intro input:focus{border-bottom-color:var(--amber)}