/* Diário com lista paginada: cabeçalho e controles sempre ficam visíveis. */
#hud {color-scheme:dark}
#hud * {scrollbar-width:thin;scrollbar-color:#88644d #17101f}
#hud ::-webkit-scrollbar {width:8px;height:8px}
#hud ::-webkit-scrollbar-track,#hud ::-webkit-scrollbar-corner {background:#17101f}
#hud ::-webkit-scrollbar-thumb {background:#88644d;border:2px solid #17101f}
#hud ::-webkit-scrollbar-thumb:hover {background:#c6a06d}
#hud ::-webkit-scrollbar-button {display:none}

html #quest-journal.game-dialog .game-window {
  width:min(1000px,100%);height:min(700px,calc(100dvh - var(--dock-height,90px) - var(--dock-bottom,18px) - 64px));
  min-height:0;max-height:100%;padding:18px;overflow:hidden;
  display:flex;flex-direction:column;
  border:6px solid transparent;
  border-image:var(--hud-trim,url(/client/assets/ui/mobile/painel.png)) 10 / 10px / 0 stretch;
  background:radial-gradient(ellipse at top left,#40303970,transparent 60%),#1b1423;
  box-shadow:0 15px 60px #000b;
}
html #quest-journal .game-window>header {
  position:static;flex:none;gap:12px;margin:0 0 16px;padding:0 0 14px;
  border-bottom:1px solid #7a5845;background:transparent;
}
.journal-emblem {display:block;flex:none;width:38px;height:38px;background:url(/client/assets/ui/mobile/i_missoes.png) center/32px no-repeat;image-rendering:pixelated}
html #quest-journal h2 {font:30px/32px Pix,monospace;letter-spacing:.5px;flex:1;color:#f3deac}
html #quest-journal header>button {flex:none;margin:0;padding:8px 12px;font:16px Pix,monospace;min-height:38px}
html #quest-journal .game-content {display:flex;flex:1;min-height:0;flex-direction:column;gap:14px;overflow:hidden}
html #quest-journal button {margin:0;touch-action:manipulation}
html #quest-journal button:focus-visible,.journal-detail-scroll:focus-visible {outline:2px solid #e4c28b;outline-offset:-3px}
html #quest-journal .journal-tabs {display:flex;flex:none;gap:8px}
html #quest-journal .journal-tabs button {
  flex:1;display:flex;justify-content:center;align-items:center;gap:12px;min-height:42px;
  padding:7px 12px;border:1px solid #56404e;border-image:none;background:#241a2d;
  font:20px/22px Pix,monospace;color:#bbaaC4;box-shadow:inset 0 2px #3b2b43;
}
html #quest-journal .journal-tabs button[aria-pressed=true] {color:#ffebbb;border-color:#b68b5c;background:linear-gradient(#4c3341,#2c202e);box-shadow:inset 0 -3px #cba069,inset 0 1px #805d58}
.journal-tabs button>span {display:grid;place-items:center;min-width:24px;padding:2px 5px;background:#130d1b;border:1px solid #684c51;font:14px/18px Txt,sans-serif;color:#e6c894}
.journal-layout {display:grid;grid-template-columns:minmax(220px,32%) minmax(0,1fr);gap:18px;flex:1;min-height:0}
.journal-index {display:flex;flex-direction:column;min-width:0;min-height:0;gap:8px}
.journal-index-heading {font:14px/18px Pix,monospace;letter-spacing:1.5px;color:#aa8d83;padding:0 4px;flex:none}
.journal-list {display:flex;flex:1;min-height:0;flex-direction:column;gap:6px}
html #quest-journal .journal-quest {
  display:flex;align-items:center;gap:10px;min-height:0;flex:0 1 76px;width:100%;padding:11px 10px;
  border:1px solid #483644;border-image:none;background:linear-gradient(110deg,#251a2e,#1c1525);
  box-shadow:inset 2px 0 #513948;color:#d8c7dd;text-align:left;filter:none;
}
html #quest-journal .journal-quest>i {display:grid;place-items:center;width:28px;height:30px;flex:none;color:#d7ad67;background:#15101f;border:1px solid #674839;font:26px/28px Pix,monospace;font-style:normal}
html #quest-journal .journal-quest>span:nth-child(2) {min-width:0;flex:1}
html #quest-journal .journal-quest b {font:19px/21px Pix,monospace;font-weight:normal;color:#e8d5bb;display:block;overflow-wrap:anywhere}
html #quest-journal .journal-quest small {display:block;margin-top:4px;font:12px/16px Txt,sans-serif;color:#a999b6}
html #quest-journal .journal-quest .journal-entry-arrow {font:25px/25px Txt,sans-serif;color:#99745b;flex:none}
html #quest-journal .journal-quest.active>i {color:#a8c3e3;border-color:#4b5b75}
html #quest-journal .journal-quest.ready>i {color:#f6df90;border-color:#b99958}
html #quest-journal .journal-quest.done>i {color:#b2c998;border-color:#59704e}
html #quest-journal .journal-quest[aria-pressed=true] {background:linear-gradient(110deg,#48313d,#2b2030);border-color:#bb8d62;box-shadow:inset 3px 0 #e0b97c}
html #quest-journal .journal-quest[aria-pressed=true] b {color:#ffebbc}
html #quest-journal .journal-quest:hover {border-color:#a17d68;background:#362637;filter:none}
.journal-pagination {display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid #4b3545;flex:none}
html #quest-journal .journal-pagination button,html #quest-journal .journal-scroll-nav button {padding:3px 7px;min-width:34px;min-height:32px;font:14px/20px Txt,sans-serif}
.journal-pagination>span {font:12px/16px Txt,sans-serif;color:#bba9be}
.journal-detail {display:flex;flex-direction:column;min-width:0;min-height:0;padding:18px 20px;background:linear-gradient(150deg,#271b2a,#15111e);border:1px solid #654651;box-shadow:inset 0 0 0 3px #110d1a;overflow:hidden}
.journal-detail-title {flex:none;padding-bottom:16px;border-bottom:1px solid #543c45;margin-bottom:14px}
html #quest-journal .journal-detail-title>small {font:13px/18px Pix,monospace;letter-spacing:1px;color:#b99684}
html #quest-journal .journal-detail-title h3 {font:30px/32px Pix,monospace;color:#f7dfab;margin:7px 0 10px;overflow-wrap:anywhere}
.journal-state {display:inline-block;padding:4px 9px;background:#2b202f;border:1px solid #674756;color:#cbb5ca;font:12px/16px Txt,sans-serif}
.journal-state.ready {color:#efd08b;border-color:#8a6d43;background:#3c2d24}
.journal-state.active {color:#b1c6e7;border-color:#4a5a77;background:#222234}
.journal-state.done {color:#b6cba0;border-color:#536549;background:#202b24}
html #quest-journal .journal-detail-scroll {
  flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;
  scrollbar-width:none;scrollbar-color:transparent transparent;
  overscroll-behavior:contain;touch-action:pan-y;
}
#quest-journal .journal-detail-scroll::-webkit-scrollbar {display:none;width:0;height:0}
html #quest-journal .journal-story {font:15px/1.7 Txt,sans-serif;color:#d3c3d5;margin:0 0 22px}
.journal-objective {padding:14px;background:#100c18;border:1px solid #513c4b;border-left:3px solid #b59460;margin:0 0 14px}
.journal-objective>small {font:13px/18px Pix,monospace!important;letter-spacing:1px;color:#b99a7a!important}
.journal-objective>div:not(.journal-progress) {display:flex;gap:10px;align-items:center;justify-content:space-between;margin:7px 0 12px}
.journal-objective b {font:15px/21px Txt,sans-serif;color:#e8d9cf}
.journal-objective strong {flex:none;font:24px/24px Pix,monospace;color:#efd399;white-space:nowrap}
.journal-objective strong>span {color:#a88e9c;font-size:19px}
.journal-progress {height:7px;background:#07050e;border:1px solid #3a293b;box-shadow:0 1px #594052}
.journal-progress>i {display:block;height:100%;background:linear-gradient(#ddc78a,#958459);transition:width .2s}
.journal-contact {display:flex;gap:10px;align-items:flex-start;margin:12px 0 20px}
.journal-contact>i {font:22px/24px Pix,monospace;font-style:normal;color:#e5bc75;flex:none}
html #quest-journal .journal-contact>p {font:13px/20px Txt,sans-serif;color:#b5a4bd;margin:0}
html #quest-journal .quest-rewards {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px;background:#211825;border:1px solid #755740}
html #quest-journal .quest-rewards>b {grid-column:1/-1;width:auto;font:20px/24px Pix,monospace;color:#eaca8a;margin-bottom:4px}
html #quest-journal .quest-rewards>span {font:14px/20px Txt,sans-serif;display:flex;align-items:center;gap:9px;min-height:44px;min-width:0;padding:6px 8px;background:#130e1b;border:1px solid #3e2b3e;overflow-wrap:anywhere}
html #quest-journal .quest-rewards img {width:28px;height:28px;flex:none;image-rendering:pixelated;filter:drop-shadow(1px 2px #07050b)}
.journal-scroll-nav {display:flex;visibility:hidden;align-items:center;gap:5px;flex:none;height:0;overflow:hidden;pointer-events:none}
.journal-detail.has-overflow .journal-scroll-nav {height:40px;padding-top:8px;visibility:visible;pointer-events:auto}
.journal-scroll-nav>span {margin-right:auto;color:#ac96b2;font:12px Txt,sans-serif}
.journal-footer {display:flex;justify-content:space-between;gap:12px;align-items:center;flex:none;padding-top:12px;border-top:1px solid #5d4146}
.journal-footer>span {font:12px/18px Txt,sans-serif;color:#9e899f}
.journal-footer>span:last-child {font:13px Pix,monospace;letter-spacing:1px;white-space:nowrap;color:#b59683}
.journal-footer kbd {display:inline-block;margin-left:7px;padding:3px 7px;background:#130e1b;border:1px solid #74513f;color:#e9cc97;font:14px Pix,monospace}
.journal-empty {margin:auto;text-align:center;max-width:350px;padding:12px}
.journal-empty .journal-emblem {margin:0 auto;width:54px;height:54px;background-size:48px;opacity:.6}
html #quest-journal .journal-empty h3 {font:24px/26px Pix,monospace;color:#dbc29f}
html #quest-journal .journal-empty p,.journal-list-empty {font:14px/21px Txt,sans-serif;color:#a58eab}
.journal-list-empty {padding:24px 12px;text-align:center}

html.touch-device #quest-journal .game-window {height:min(720px,calc(100dvh - 12px - var(--st,0px) - var(--sb,0px)));overflow:hidden;background:radial-gradient(ellipse at top left,#40303970,transparent 60%),#1b1423}
html.touch-device #quest-journal button {min-height:38px}

@media (max-width:640px) {
  html #quest-journal.game-dialog .game-window {padding:12px;width:100%}
  html #quest-journal h2 {font-size:23px;line-height:26px}
  html #quest-journal header>button {font-size:14px;padding:5px 8px}
  #quest-journal .journal-emblem {width:26px;height:26px;background-size:24px}
  html #quest-journal .game-window>header {gap:7px;padding-bottom:10px;margin-bottom:10px}
  html #quest-journal .game-content {gap:10px}
  html #quest-journal .journal-tabs {gap:5px}
  html #quest-journal .journal-tabs button {font-size:17px;gap:5px;padding:5px 4px;min-height:38px}
  .journal-tabs button>span {font-size:11px;min-width:20px;padding:0 3px}
  .journal-layout {grid-template-columns:1fr;grid-template-rows:174px minmax(0,1fr);gap:10px}
  .journal-index-heading {display:none}
  .journal-list {gap:4px}
  html #quest-journal .journal-quest {padding:5px 8px;gap:8px;flex:1}
  html #quest-journal .journal-quest b {font-size:18px;line-height:20px}
  html #quest-journal .journal-quest small {font-size:11px;line-height:14px;margin-top:2px}
  .journal-pagination {padding-top:3px}
  .journal-detail {padding:12px}
  .journal-detail-title {padding-bottom:8px;margin-bottom:10px}
  html #quest-journal .journal-detail-title h3 {font-size:24px;line-height:26px;margin:5px 0 8px}
  html #quest-journal .journal-story {font-size:14px;margin-bottom:14px}
  html #quest-journal .quest-rewards {padding:10px}
  html #quest-journal .quest-rewards>span {font-size:12px;gap:5px;padding:5px}
  html #quest-journal .quest-rewards img {width:24px;height:24px}
  .journal-footer {padding-top:7px}
  .journal-footer>span:first-child {font-size:11px}
  .journal-footer>span:last-child {display:none}
}
@media (max-height:600px) {
  html #quest-journal.game-dialog .game-window {padding:10px}
  html #quest-journal .game-window>header {margin-bottom:7px;padding-bottom:7px}
  html #quest-journal h2 {font-size:24px;line-height:26px}
  html #quest-journal .game-content {gap:8px}
  html #quest-journal .journal-tabs button {min-height:34px;font-size:18px;padding:3px 8px}
  .journal-index {gap:5px}
  .journal-index-heading {font-size:12px;line-height:14px}
  html #quest-journal .journal-quest {padding:5px 7px;gap:8px}
  html #quest-journal .journal-quest b {font-size:17px;line-height:19px}
  html #quest-journal .journal-quest small {margin-top:2px}
  .journal-detail {padding:10px 14px}
  .journal-detail-title {margin-bottom:8px;padding-bottom:8px}
  html #quest-journal .journal-detail-title h3 {font-size:24px;line-height:26px;margin:4px 0 6px}
  .journal-footer {padding-top:5px}
  .journal-footer>span {font-size:11px}
}
@media (prefers-reduced-motion:reduce) {.journal-progress>i {transition:none}}