/* One surface system; Halloween ornaments stay in the empty footer. */
:root{--halloween-web:url("assets/v39/ui/web_corner.png");--halloween-pumpkins:url("assets/v39/ui/pumpkin_candles.png");--panel-surface:#211e27;--panel-raised:#2a2530;--panel-line:#4d4147;--panel-text:#e1d5c4;--panel-muted:#ad9f92;--panel-accent:#c8a16c}
:is(#quest-panel,#quest-detail,#world-panel,#chat-panel).halloween-panel{isolation:isolate;box-sizing:border-box;color:var(--panel-text);background:var(--panel-surface);border:1px solid #796047;border-radius:9px;box-shadow:0 16px 48px #0009}
.halloween-panel::before,.halloween-panel::after{content:"";position:absolute;z-index:0;pointer-events:none;background:center/contain no-repeat}
.halloween-panel::before{bottom:0;left:0;width:52px;height:52px;background-image:var(--halloween-web);transform:rotate(-90deg);opacity:.35}
.halloween-panel::after{bottom:2px;right:14px;width:38px;height:38px;background-image:var(--halloween-pumpkins);opacity:.85}
.halloween-panel>*{position:relative;z-index:1}
.halloween-panel::backdrop{background:#0e0d15b3;backdrop-filter:none}
#quest-panel.quest-dialog{width:min(460px,90vw);padding:18px 20px 40px;overflow:hidden;max-height:min(640px,80dvh)}
#quest-panel.quest-dialog header,#world-panel header{display:grid;grid-template-columns:24px minmax(0,1fr) 44px;align-items:center;gap:10px;flex:none;min-height:44px;padding:0 0 12px;border-bottom:1px solid var(--panel-line)}
#quest-panel header::before,#world-panel header::before,.chat-header::before{content:"";display:block;width:24px;height:24px;background:center/contain no-repeat;image-rendering:pixelated}
#quest-panel header::before{background-image:url("assets/v31/ui/quests.png")}
#world-panel header::before{background-image:url("assets/v31/ui/worlds.png")}
#quest-panel.quest-dialog h1,#world-title{margin:0;font-size:20px;line-height:1.4;letter-spacing:0;font-weight:600;color:var(--panel-text);text-shadow:none}
#quest-total{margin-left:7px;padding:0;border:0;background:none;color:var(--panel-muted);font-size:11px;font-weight:400;white-space:nowrap}
#quest-panel .quest-close,#quest-detail .quest-close,#world-close,#chat-close{display:grid;place-items:center;box-sizing:border-box;flex:none;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border:0;border-radius:5px;background:none;color:var(--panel-muted);font:23px/1 ui-monospace,monospace;cursor:pointer}
#quest-panel .quest-close:hover,#quest-detail .quest-close:hover,#world-close:hover,#chat-close:hover{background:#342c36;color:#eadac1}
#quest-list{padding:0 5px 0 0;scrollbar-gutter:stable}
#quest-list h2{margin:20px 0 10px;color:#b7a18a;font-size:11px;font-weight:600;letter-spacing:.04em}
#quest-list h2::after{content:none}
#quest-panel .quest-row{padding:5px 0 15px;margin-bottom:4px;border:0;border-bottom:1px solid var(--panel-line);border-radius:0;background:none;box-shadow:none;font-size:14px;line-height:1.65;color:var(--panel-text)}
.quest-label{font-weight:500}
.quest-row[data-complete=false] .quest-mark{display:none}
.quest-row-heading{gap:8px}.quest-mark{color:var(--panel-accent);text-shadow:none;font-size:14px;line-height:21px}
.quest-row[data-complete=true] .quest-mark{color:#9eb191}
#quest-panel .quest-row[data-complete=true]{background:none;border-color:#485044;color:#b8c0af}
#quest-panel .quest-actions{justify-content:flex-end;align-items:center;margin-top:12px;gap:14px}
#quest-panel .quest-actions button,#quest-detail-follow,#test-window{min-height:44px;border:1px solid #6d5651;border-radius:5px;background:#332b36;box-shadow:none;color:var(--panel-text);font-size:12px}
#quest-panel .quest-actions [data-action=follow],#quest-detail-follow{background:#65403f;border-color:#987151;color:#edddc5}
#quest-panel .quest-actions button{flex:0 0 auto;padding:9px 13px}
#quest-panel .quest-actions [data-action=details]{padding:9px 3px;border:0;background:none;color:#cbb89a}
#quest-panel .quest-actions [data-action=follow]{min-width:108px}
#quest-panel .quest-actions button:hover:not(:disabled),#quest-detail-follow:hover:not(:disabled),#test-window:hover{border-color:#c3a078;filter:none}
.halloween-panel button:focus-visible,.halloween-panel a:focus-visible,.halloween-panel textarea:focus-visible{outline:2px solid #caa36f;outline-offset:3px}
#quest-follow-status{padding-right:0;font-size:12px;line-height:1.6;color:#cfaa91}
#quest-detail{padding:18px 18px 42px;overflow:auto;scrollbar-gutter:stable}
#quest-detail header{gap:12px;align-items:center;padding-bottom:4px}
#quest-kind{margin:0;font-size:11px;letter-spacing:.03em;color:var(--panel-muted)}
#quest-detail h1{margin:16px 0 12px;padding:0;font-size:19px;line-height:1.5;color:var(--panel-text);letter-spacing:0}
#quest-description{font-size:13px;line-height:1.8;color:#cfc2b2}
#quest-progress{margin:16px 0;padding:0;border:0;background:none;color:var(--panel-accent);font-size:12px;line-height:1.6}
#quest-progress[data-complete=true]{color:#a7bc96}
#quest-daily-note{font-size:11px;line-height:1.6;color:var(--panel-muted)}
#world-panel{position:fixed;inset:0;margin:auto;width:min(440px,calc(100vw - 28px));max-height:min(680px,80dvh);padding:18px 18px 42px;overflow:hidden}
#world-panel[open]{display:flex;flex-direction:column}
#world-identity{flex:none;margin:12px 0 15px;font-size:12px;line-height:1.6;color:var(--panel-muted)}
#world-list{min-height:0;flex:1;max-height:none;overflow:auto;gap:8px;padding:1px 5px 2px 0;scrollbar-gutter:stable}
#world-panel .world-row{display:grid;grid-template-columns:12px minmax(0,1fr) auto auto;gap:10px;min-height:54px;padding:12px 10px;border:1px solid #58474a;border-radius:6px;background:var(--panel-raised);color:var(--panel-text);font-size:13px;box-shadow:none}
#world-panel .world-row:not(:disabled):hover{background:#332b36;border-color:#957557}
#world-panel .world-row[data-current=true]{background:#302a2c;border-color:#a1835e;box-shadow:none}
#world-panel .world-count{font-size:12px;color:#c1ad91;white-space:nowrap}
#world-panel .world-action{width:auto;min-width:57px;padding:0;background:none;border:0;color:var(--panel-muted);font-size:10px;text-align:right}
#world-panel .world-row[data-current=true] .world-action{color:var(--panel-accent)}
#world-message{flex:none;margin:12px 0 0;color:#cfaa91;font-size:12px;line-height:1.6}
#test-window{display:flex;align-items:center;flex:none;align-self:flex-start;box-sizing:border-box;width:fit-content;min-height:44px;margin-top:10px;padding:0;border:0;background:none;text-align:left;text-decoration:none;font-size:11px;line-height:1.5;color:#c0a98c}
/* Copper thumbs remain distinct without several competing colors. */
#quest-list,#quest-detail,#world-list,#world-panel,#chat-messages{scrollbar-width:thin;scrollbar-color:#a77953 #1b1821}
#quest-list::-webkit-scrollbar,#quest-detail::-webkit-scrollbar,#world-list::-webkit-scrollbar,#world-panel::-webkit-scrollbar,#chat-messages::-webkit-scrollbar{width:8px;height:8px}
#quest-list::-webkit-scrollbar-track,#quest-detail::-webkit-scrollbar-track,#world-list::-webkit-scrollbar-track,#world-panel::-webkit-scrollbar-track,#chat-messages::-webkit-scrollbar-track{background:#1b1821;border-radius:6px}
#quest-list::-webkit-scrollbar-thumb,#quest-detail::-webkit-scrollbar-thumb,#world-list::-webkit-scrollbar-thumb,#world-panel::-webkit-scrollbar-thumb,#chat-messages::-webkit-scrollbar-thumb{background:linear-gradient(#b88a5e,#805e49);border:1px solid #29212c;border-radius:6px}
#quest-list::-webkit-scrollbar-thumb:hover,#quest-detail::-webkit-scrollbar-thumb:hover,#world-list::-webkit-scrollbar-thumb:hover,#world-panel::-webkit-scrollbar-thumb:hover,#chat-messages::-webkit-scrollbar-thumb:hover{background:#c09669}
#quest-list::-webkit-scrollbar-corner,#quest-detail::-webkit-scrollbar-corner,#world-list::-webkit-scrollbar-corner,#chat-messages::-webkit-scrollbar-corner{background:transparent}
#chat-panel{width:min(350px,calc(100vw - 28px));overflow:hidden}
#chat-panel::before,#chat-panel::after{content:none}
#chat-panel .chat-header{display:grid;grid-template-columns:22px minmax(0,1fr) 44px;align-items:center;gap:8px;min-height:48px;padding:3px 9px;background:#29232e;border-bottom:1px solid var(--panel-line)}
.chat-header::before{width:22px;height:22px;background-image:url("assets/v31/ui/chat.png")}
#chat-title{padding:0;font-size:12px;line-height:1.5;font-weight:600;color:var(--panel-text);text-shadow:none}
#chat-messages{height:clamp(105px,21dvh,170px);max-height:25dvh;padding:5px 11px;background:none}
#chat-messages p{padding:7px 0;margin:0;border:0;border-bottom:1px solid #4d414744;border-radius:0;background:none;color:#d8ccbd;font-size:12px;line-height:1.65}
#chat-messages p:last-child{border-bottom:0}
#chat-messages p[data-own=true]{background:none;border-left:0}
#chat-messages strong{color:#c6a579;font-weight:600}
#chat-messages p[data-own=true] strong{color:#debc8b}
#chat-form{gap:7px;padding:9px;background:#1e1a23;border-top:1px solid var(--panel-line)}
#chat-input{box-sizing:border-box;min-height:50px;max-height:100px;padding:8px;border:1px solid #665151;border-radius:5px;background:#17151d;box-shadow:none;color:var(--panel-text);font:12px/1.6 ui-monospace,monospace}
#chat-input::placeholder{color:#a49487}
#chat-input:focus{border-color:#ae8a60;outline-color:#ae8a60}
#chat-input[aria-invalid=true]{background:#3c2029;border:2px solid #d36a76;color:#ffe0e3}
#chat-send{align-self:stretch;min-height:44px;padding:9px 8px;border:1px solid #987151;border-radius:5px;background:#65403f;box-shadow:none;color:#edddc5;font:11px/1.5 ui-monospace,monospace;cursor:pointer}
#chat-send:hover:not(:disabled){background:#79504a}
#chat-send:disabled{opacity:.45}
.speech-bubble{background:#29232ff5;color:#e4d6be;border-color:#8e7351;box-shadow:0 3px 8px #0005}
.speech-bubble::after{background:#29232f;border-color:#8e7351}
.typing-dots{color:#d0ac78}
@media(max-width:600px){
 #quest-panel.quest-dialog,#quest-detail{box-sizing:border-box;max-height:var(--quest-mobile-height,70dvh);padding:14px 14px 38px}
 #quest-panel.quest-dialog header,#world-panel header{grid-template-columns:22px minmax(0,1fr) 44px;gap:8px;padding-bottom:10px}
 #quest-panel header::before,#world-panel header::before{width:22px;height:22px}
 #quest-panel.quest-dialog h1,#world-title{font-size:19px}
 #quest-panel .quest-row{padding:5px 0 13px;font-size:13px}
 #quest-panel .quest-actions button{min-height:44px;font-size:12px}
 #quest-total{font-size:10px;margin-left:4px}
 #world-panel{width:calc(100vw - 28px);max-height:70dvh;padding:14px 14px 38px}
 #world-panel .world-row{gap:7px;padding:12px 9px;font-size:12px}
 #world-panel .world-action{min-width:49px;font-size:9px}
 #chat-panel{width:min(350px,calc(100vw - 24px))}
 #chat-messages{height:clamp(95px,19dvh,150px)}
 .halloween-panel::before{width:46px;height:46px}
 .halloween-panel::after{width:34px;height:34px;right:12px}
}
@media(max-height:500px){
 #quest-panel.quest-dialog,#quest-detail,#world-panel{max-height:70dvh;padding-top:10px;padding-bottom:30px}
 .halloween-panel::before{width:36px;height:36px;opacity:.25}.halloween-panel::after{width:28px;height:28px}
 #chat-panel{bottom:calc(var(--hud-bottom) + var(--hud-height) + 5px);max-height:calc(100dvh - var(--hud-height) - var(--hud-bottom) - 15px)}
 #chat-panel .chat-header{min-height:44px;padding-top:0;padding-bottom:0}
 #chat-messages{height:65px;max-height:20dvh}#chat-input{min-height:44px}#chat-form{padding:6px}
}

@media(orientation:landscape) and (max-height:450px){
  #quest-panel.quest-dialog{padding:10px 14px}
  #quest-panel.quest-dialog header{padding-bottom:6px}
  #quest-list h2{margin:8px 0 5px}
  #quest-panel .quest-row{padding:6px;margin-bottom:4px}
  #quest-panel .quest-actions{margin-top:7px}
}
.quest-issued{position:fixed;right:max(18px,env(safe-area-inset-right));top:max(90px,env(safe-area-inset-top));z-index:820;width:min(310px,calc(100vw - 36px));padding:18px 20px;border:1px solid #ad8950;border-radius:12px;background:linear-gradient(135deg,#30232f,#181b24);color:#f3e0ba;box-shadow:0 12px 35px #0008;font:600 15px/1.5 system-ui;pointer-events:none}.quest-issued[hidden]{display:none}