/* The journal is independent of the phone and the shared narrow panel slot. */
#questJournal.qj-overlay{position:fixed!important;inset:0!important;z-index:220;display:flex;align-items:center;justify-content:center;padding:32px;background:#090711bd;backdrop-filter:blur(3px);color:#f5ead8;font-family:var(--font-ui,sans-serif);pointer-events:auto;box-sizing:border-box}
html body #questJournal.slotted{max-height:none!important;overflow:hidden!important;transform:none!important}
#questJournal[hidden]{display:none!important}
#questJournal *{box-sizing:border-box}
#questJournal .qj-shell{width:min(1080px,100%);height:min(780px,calc(100dvh - 64px));display:flex;flex-direction:column;background:#201b2b;border:3px solid #907955;box-shadow:0 0 0 3px #0c0a12,0 0 0 5px #493b42,8px 12px 0 #08071060;overflow:hidden}
#questJournal .qj-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;border-bottom:2px solid #6c5743;background:linear-gradient(90deg,#342b37,#251f2f)}
#questJournal .qj-header>div{min-width:0;display:flex;align-items:center;gap:18px}
#questJournal .qj-icon{display:grid;place-items:center;border:2px solid #e1bd66;box-shadow:3px 3px 0 #100e19;width:42px;height:46px;font-size:30px;font-weight:900;color:#ffd040;background:#463649}
#questJournal h1,#questJournal h2,#questJournal h3,#questJournal p{margin:0}
#questJournal .qj-header p{overflow-wrap:anywhere;font-size:12px;letter-spacing:1.7px;color:#bca78e;margin-bottom:6px}
#questJournal h1{font-size:25px;line-height:1.2;color:#fff1ce}
#questJournal .qj-layout{display:grid;grid-template-columns:320px minmax(0,1fr);min-height:0;flex:1}
#questJournal .qj-list{overflow-y:auto;padding:20px 16px;background:#191622;border-right:2px solid #6c5743;scrollbar-color:#705563 #191622;scrollbar-width:thin}
#questJournal .qj-group{--qj-accent:#ffd040;margin-bottom:24px}
#questJournal .qj-group.side{--qj-accent:#ed59bd}
#questJournal .qj-group.completed{--qj-accent:#a1b9a1}
#questJournal .qj-group>h2{font-size:16px;display:flex;align-items:center;justify-content:space-between;color:var(--qj-accent);border-bottom:2px solid #40333f;padding:0 8px 10px}
#questJournal .qj-group>h2 span{font-size:12px;border:1px solid #51414e;padding:1px 6px;color:#ccb9a6}
#questJournal .qj-group>h3{font-size:12px;font-weight:500;color:#b1a19b;margin:16px 8px 8px;line-height:1.5}
#questJournal button{font-family:var(--font-ui,sans-serif);cursor:pointer;touch-action:manipulation}
#questJournal .qj-entry{display:flex;text-align:left;gap:10px;width:100%;min-height:54px;background:transparent;color:#d9cbd0;border:2px solid transparent;padding:10px 8px;font-size:14px;line-height:1.45;margin-bottom:4px}
#questJournal .qj-entry>span:first-child{color:var(--qj-accent);font-size:14px;margin-top:1px}
#questJournal .qj-entry small{display:block;font-size:12px;font-weight:400;color:#9c8c97;margin-top:4px}
#questJournal .qj-entry.selected{background:#352a3c;border-color:var(--qj-accent);color:#fff3d8;box-shadow:3px 3px 0 #0c0a13}
#questJournal .qj-entry:hover{background:#302737}
#questJournal .qj-list-empty{font-size:12px;color:#877b86;padding:14px 8px}
#questJournal .qj-detail{padding:26px 32px 28px;overflow-y:auto;scrollbar-color:#705563 #201b2b;scrollbar-width:thin}
#questJournal .qj-eyebrow{font-size:12px;color:#e6c171;letter-spacing:.5px;margin-bottom:8px}
#questJournal .qj-detail h2{font-size:26px;line-height:1.35;color:#fff1cf;text-wrap:balance}
#questJournal .qj-giver{display:flex;align-items:center;gap:12px;margin-top:18px}
#questJournal .qj-giver img,#questJournal .qj-portrait{width:72px;height:72px;object-fit:contain;image-rendering:pixelated;border:2px solid #927855;background:#33263f;box-shadow:3px 3px 0 #100d18}
#questJournal .qj-giver small{display:block;color:#a99ba2;font-size:12px;margin-bottom:5px}
#questJournal .qj-giver b{font-size:14px}
#questJournal .qj-timer{margin-left:auto;text-align:right;font-size:12px;color:#ffc378}
#questJournal .qj-timer b{display:block;font-size:20px;margin-top:4px;font-variant-numeric:tabular-nums}
#questJournal .qj-story{font-size:15px;line-height:1.8;color:#d8c8bd;margin:22px 0;padding-bottom:20px;border-bottom:1px solid #4d3c47;white-space:pre-line}
#questJournal .qj-line{font-size:13px;line-height:1.7;color:#baa8b9;border-left:3px solid #9d678d;padding:8px 12px;margin:0 0 22px;background:#282032}
#questJournal .qj-section{margin-bottom:22px}
#questJournal .qj-section h3{font-size:12px;color:#bfa98c;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}
#questJournal .qj-objectives{list-style:none;padding:0;margin:0}
#questJournal .qj-objectives li{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.65;padding:7px 0;color:#a79aa7}
#questJournal .qj-objectives li.current{color:#fff0cf}
#questJournal .qj-mark{flex:0 0 18px;text-align:center;color:#b49da7}
#questJournal .current .qj-mark{color:#ffd040}
#questJournal .done .qj-mark{color:#9bcb9c}
#questJournal .done>span:last-child{color:#9bb69d}
#questJournal .qj-objectives small{display:block;color:#e6c171;font-size:12px;font-variant-numeric:tabular-nums}
#questJournal .qj-location{font-size:14px;line-height:1.6;margin-bottom:12px;color:#d9c8c0}
#questJournal .qj-map{display:block;width:100%;height:120px;object-fit:cover;image-rendering:pixelated;border:2px solid #81664c;background:#16121c}
#questJournal .qj-map[hidden]{display:none}
#questJournal .qj-map-note{font-size:12px;color:#ac9fa3;margin-top:6px;line-height:1.6}
#questJournal .qj-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#questJournal .qj-button{border-radius:0;min-height:44px;border:2px solid #9b7d57;background:#423444;color:#fff0cd;padding:10px 16px;font-size:13px;line-height:1.4;box-shadow:2px 2px 0 #0e0b17}
#questJournal .qj-button:hover{background:#574452}
#questJournal button:disabled{opacity:.45;cursor:default;box-shadow:none}
#questJournal button:focus-visible{outline:3px solid #fff0c6;outline-offset:3px}
#questJournal .qj-status{font-size:12px;color:#ac9aab;line-height:1.65;width:100%;margin-top:6px}
#questJournal .qj-rewards{padding:16px 18px;background:#302839;border:1px solid #66523f;border-left:3px solid #d2ad63}
#questJournal .qj-rewards h3{margin-bottom:6px}
#questJournal .qj-rewards p{color:#eac788;font-size:14px;line-height:1.6}
#questJournal .qj-footer{padding:12px 24px;border-top:2px solid #57434a;color:#9e8e9b;background:#191622;font-size:12px;letter-spacing:.5px;text-align:right}
#questJournal .qj-empty{padding:64px 20px;text-align:center;color:#b9a69b}
#questJournal .qj-empty>span{display:block;font-size:50px;color:#cfa661;margin-bottom:20px}
#questJournal .qj-empty h2{font-size:20px;margin-bottom:14px}
#questJournal .qj-empty p{font-size:14px;line-height:1.8}
@media(max-width:700px){
#questJournal.qj-overlay{padding:12px 8px!important;padding-top:max(12px,env(safe-area-inset-top))!important;padding-bottom:max(12px,env(safe-area-inset-bottom))!important}
#questJournal .qj-shell{height:100%;max-height:calc(100dvh - 24px);border-width:2px}
#questJournal .qj-header{padding:13px 14px;gap:8px}
#questJournal .qj-header>div{gap:10px}
#questJournal .qj-icon{width:28px;height:34px;font-size:22px}
#questJournal .qj-header p{overflow-wrap:anywhere;font-size:12px;letter-spacing:.4px;margin-bottom:4px}
#questJournal h1{font-size:20px}
#questJournal .qj-header .qj-button{font-size:12px;padding:8px 10px;flex-shrink:0}
#questJournal .qj-layout{display:flex;flex-direction:column;overflow:hidden}
#questJournal .qj-list{max-height:190px;min-height:100px;flex:0 0 27%;padding:10px 12px;border-right:0;border-bottom:2px solid #6c5743}
#questJournal .qj-group{margin-bottom:12px}
#questJournal .qj-group>h2{font-size:13px;padding-bottom:6px}
#questJournal .qj-group>h3{font-size:12px;margin:10px 8px 6px}
#questJournal .qj-entry{min-height:44px;font-size:13px;padding:8px}
#questJournal .qj-entry small{font-size:12px}
#questJournal .qj-detail{flex:1;min-height:0;padding:18px 16px}
#questJournal .qj-detail h2{font-size:22px}
#questJournal .qj-giver{margin-top:14px}
#questJournal .qj-story{font-size:14px;line-height:1.75;margin:18px 0}
#questJournal .qj-objectives li{font-size:13px;line-height:1.6}
#questJournal .qj-map{height:95px}
#questJournal .qj-footer{padding:8px;font-size:12px;letter-spacing:0;text-align:center}
#questJournal .qj-actions .qj-button{flex:1 1 130px;text-align:center}
}
@media(prefers-reduced-motion:reduce){#questJournal.qj-overlay{backdrop-filter:none}}