/* Rediseño compacto: diario (Diario del Custodio: Encargos y Enciclopedia) y Guía de juego. Prefijo dj-. */

/* ---------- barra de progreso con el número dentro ---------- */
.dj-bar { position: relative; height: 16px; border-radius: 8px; background: #e3d3b4; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.18); }
.dj-bar > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #8fe57a, #5cc44a 55%, #46a83a); border-radius: 8px; transition: width .25s; }
.dj-bar > span { position: relative; display: block; text-align: center; font: 900 11px/16px 'Nunito', sans-serif; color: #2b1d14; text-shadow: 0 1px 0 rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.dj-bar.big { height: 20px; border-radius: 10px; }
.dj-bar.big > i { background: linear-gradient(180deg, #ffd978, #e8b04a 55%, #b8842a); border-radius: 10px; }
.dj-bar.big > span { line-height: 20px; font-size: 12px; }
.dj-bar.thin { height: 6px; }

/* ---------- premios como chips ---------- */
.dj-prizes { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.dj-prize { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 3px; border-radius: 999px; background: #fff; border: 1px solid var(--paper-2); font: 900 12px 'Nunito', sans-serif; color: var(--ink); white-space: nowrap; }
.dj-prize .item-sprite { margin: 0; vertical-align: 0; }
.dj-xp { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #2a6fa8; color: #fff; font: 900 8px/1 'Nunito', sans-serif; font-style: normal; }

/* ---------- Encargos ---------- */
.dj-quests { display: grid; gap: 10px; min-width: 0; }
.dj-act { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: linear-gradient(180deg, #fff6dc, #fffaf0); border: 2px solid #d4a017; }
.dj-act-lv { display: grid; justify-items: center; align-content: center; width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe58a, #d4a017 75%); color: #4a3200; box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), 0 2px 0 var(--edge); line-height: 1; }
.dj-act-lv b { font: 900 30px/1 'Nunito', sans-serif; }
.dj-act-lv small { font: 900 10px 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.dj-act-mid { display: grid; gap: 5px; min-width: 0; }
.dj-act-title { display: flex; align-items: center; gap: 6px; }
.dj-act-title b { font: 700 20px/1.1 'Pixelify Sans', sans-serif; }
.dj-act-sub { font-weight: 800; color: #2a6627; }
.dj-act-next { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dj-act-next > small { font: 800 11px 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dj-act-days { display: grid; justify-items: center; padding: 6px 10px; border-radius: 10px; background: var(--paper-3); border: 1px solid var(--paper-2); line-height: 1; }
.dj-act-days b { font: 900 24px/1 'Nunito', sans-serif; }
.dj-act-days small { font: 800 10px 'Nunito', sans-serif; text-transform: uppercase; color: var(--muted); }
.dj-readybar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 6px 5px 12px; border-radius: 10px; background: #eef8e6; border: 2px solid rgba(63, 143, 58, .45); font: 800 13px 'Nunito', sans-serif; color: #2a6627; }
.dj-all { flex: none; }
.dj-state { flex: none; font: 800 12px 'Nunito', sans-serif; color: var(--muted); padding: 2px 8px; border-radius: 999px; background: var(--paper-2); }
.dj-state.done { background: transparent; color: #2a6627; }
.dj-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.dj-col { display: grid; gap: 6px; min-width: 0; }
.dj-col-h { margin: 0; flex-wrap: wrap; }
.dj-col-n { font-style: normal; padding: 0 6px; border-radius: 999px; background: var(--paper-2); color: var(--ink); }
.dj-col-sub { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 700; }
.dj-q { display: grid; gap: 5px; padding: 8px 10px; border-radius: 10px; background: var(--paper-3); border: 2px solid var(--paper-2); min-width: 0; }
.dj-q-t { font: 800 14px/1.2 'Nunito', sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dj-q-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dj-claim { flex: none; min-width: 92px; }
.dj-q.ready { border-color: var(--accent); background: #eef8e6; box-shadow: 0 0 0 1px rgba(63, 143, 58, .25); animation: questReady 1.4s ease-in-out infinite alternate; }
.dj-q.ready .dj-claim { box-shadow: 0 0 0 3px rgba(63, 143, 58, .25); }
.dj-q.done { opacity: .55; background: #f4ecdc; }
.dj-q.done .dj-bar > i { background: linear-gradient(180deg, #c9bda6, #b2a386); }
.dj-q:not(.ready) .dj-claim:disabled { opacity: .55; }
.dj-ms { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.dj-m { display: grid; gap: 4px; padding: 6px 8px; border-radius: 10px; background: var(--paper-3); border: 1px solid var(--paper-2); min-width: 0; }
.dj-m b { font: 800 13px/1.15 'Nunito', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dj-m.done { opacity: .55; }
.dj-m.done .dj-bar > i { background: linear-gradient(180deg, #ffd978, #e8b04a); }
.dj-m.ready { border-color: var(--accent); }

/* ---------- Enciclopedia ---------- */
.dj-dex-head { gap: 10px; }
.dj-dstat { display: grid; gap: 3px; min-width: 150px; padding: 5px 10px; border-radius: 10px; background: var(--paper-3); border: 1px solid var(--paper-2); }
.dj-dstat-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.dj-dstat-top small { font: 800 11px 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dj-dstat-top b { font: 900 16px 'Nunito', sans-serif; color: var(--ink); }
.dj-dstat.seen .dj-bar > i { background: linear-gradient(180deg, #8cc8f0, #2a6fa8); }
.dj-filters { display: grid; gap: 4px; }
.dj-fgroup { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px; align-items: center; }
.dj-flabel { font: 800 10px 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.dj-frow { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.dj-filters .dex-filter { display: inline-flex; align-items: center; gap: 4px; }
.dj-filters .dex-filter .item-sprite { margin: 0; vertical-align: 0; }
.dj-fn { font-style: normal; font-size: 10px; font-weight: 900; padding: 0 5px; border-radius: 999px; background: rgba(107, 69, 38, .12); }
.dex-filter.on .dj-fn { background: rgba(255,255,255,.3); }
.dex-cell.caught { background: linear-gradient(180deg, #fffaf0, #fff3cc); }
.dex-card .dex-row b { font-size: 14px; }
.dj-back { display: none; justify-self: start; margin-bottom: 6px; }
.dex-cell small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Guía de juego ---------- */
#guideBody { grid-template-columns: minmax(0, 1fr); }
.dj-gbar { min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.dj-gsearch { margin-left: 0; flex: 0 1 260px; min-width: 0; }
.dj-gcats { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 400px; min-width: 0; }
.dj-gcat { font: 800 12px 'Nunito', sans-serif; display: inline-flex; align-items: center; gap: 4px; min-width: 0; min-height: 30px; padding: 3px 10px; border-radius: 999px; box-shadow: none; transform: none; }
.dj-gcat:not(.on) { background: var(--paper-3); color: var(--ink); }
.dj-gcat .item-sprite { margin: 0; vertical-align: 0; }
.dj-gcat.on { background: var(--edge); border-color: var(--edge); color: #fff; }
.dj-gjump { display: none; }
.dj-gdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--gold-dark); flex: none; }
.dj-glayout { grid-template-columns: 250px minmax(0, 1fr); }
.dj-gnav { gap: 2px; }
.dj-gnav-h { display: flex; align-items: center; gap: 6px; margin: 8px 0 2px; font: 800 11px 'Nunito', sans-serif; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.dj-gnav-h:first-child { margin-top: 0; }
.dj-gnav-h .item-sprite { margin: 0; vertical-align: 0; }
.dj-gnav .dj-gbtn { padding: 5px 8px 5px 26px; font-size: 13px; line-height: 1.2; }
.dj-gcontent { padding: 4px 18px 12px; }
.dj-gart { padding: 12px 0 14px; }
.dj-ghead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dj-ghead .item-sprite { margin: 0; vertical-align: 0; }
.dj-ghead h3 { margin: 0; font: 700 22px/1.1 'Pixelify Sans', sans-serif; flex: 1 1 auto; min-width: 0; }
.dj-gtag { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--paper-2); font: 800 11px 'Nunito', sans-serif; color: var(--muted); }
.dj-gtext { display: grid; gap: 6px; max-width: 80ch; }
.dj-gtext p { margin: 0; font: 700 15px/1.5 'Nunito', sans-serif; color: #4a3727; }
.dj-gtext > p:first-child { font-size: 15.5px; color: var(--ink); }
.dj-gtext ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.dj-gtext li { position: relative; padding: 5px 10px 5px 24px; border-radius: 8px; background: #fffdf7; border: 1px solid rgba(107, 69, 38, .1); font: 700 14px/1.45 'Nunito', sans-serif; color: #4a3727; }
.dj-gtext li::before { content: ''; position: absolute; left: 10px; top: 12px; width: 6px; height: 6px; border-radius: 2px; background: var(--gold-dark); transform: rotate(45deg); }
.dj-gtext b { color: var(--ink); font-weight: 900; }
.dj-gempty { padding: 20px 0; }
.dj-gcom { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }

/* ---------- móvil ---------- */
@media (max-width: 900px) {
  .dj-back { display: inline-flex; }
  .dex-layout .dex-grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 5px; }
  .dex-card .dex-row { grid-template-columns: 96px minmax(0, 1fr); }
  .dj-cols { grid-template-columns: minmax(0, 1fr); }
  .dj-glayout { grid-template-columns: minmax(0, 1fr); }
  .dj-gnav { display: none; }
  .dj-gjump { display: block; flex: 1 1 100%; min-width: 0; padding: 7px 10px; border: 2px solid var(--edge); border-radius: 8px; background: var(--paper-3); font: 800 14px 'Nunito', sans-serif; color: var(--ink); }
  .dj-gcats { flex-wrap: nowrap; overflow-x: auto; flex: 1 1 100%; padding-bottom: 2px; scrollbar-width: thin; }
  .dj-gcat { flex: none; }
  .dj-gsearch { flex: 1 1 100%; }
  .dj-gcontent { padding: 0 10px 10px; max-height: calc(100dvh - 250px); }
}
@media (max-width: 560px) {
  .dj-act { grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; padding: 8px 10px; }
  .dj-act-lv { width: 58px; height: 58px; }
  .dj-act-lv b { font-size: 24px; }
  .dj-act { position: relative; }
  .dj-act-days { position: absolute; top: 6px; right: 6px; display: flex; gap: 3px; align-items: baseline; padding: 2px 7px; }
  .dj-act-days b { font-size: 15px; }
  .dj-act-title { padding-right: 62px; }
  .dj-act-title b { font-size: 17px; }
  .dj-act-title b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .dj-dstat { flex: 1 1 130px; min-width: 0; }
  .dj-dex-head .dex-search { flex: 1 1 100%; min-width: 0; margin-left: 0; }
  .dj-fgroup { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dj-frow { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .dj-frow .dex-filter { flex: none; }
  .dj-ghead h3 { font-size: 19px; }
  .dj-gtag { display: none; }
  .dj-gcom { grid-template-columns: minmax(0, 1fr); }
}

/* Diario → Historia: capítulo en curso, actos en tarjeta con medalla y barra, pasos con ▶ para volver a ver sus escenas. */
.st-bar { height: 8px; border-radius: 4px; }
.st-bar > i { border-radius: 4px; }
.st-medal { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; font: 900 14px/1 'Nunito', sans-serif; color: #fff7e2;
  background: radial-gradient(circle at 35% 30%, #c89a5a, #8a5a2c 70%); border: 2px solid #5a3a1c; box-shadow: 0 2px 0 rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.35); }
.st-now { background: linear-gradient(180deg, #fff4d4, #fffaf0); border-color: #e0b64a; }
.st-now-top { display: flex; gap: 12px; align-items: center; }
.st-now-top .st-medal { width: 48px; height: 48px; font-size: 17px; background: radial-gradient(circle at 35% 30%, #ffe08a, #d09a2a 70%); border-color: #8a5a10; }
.st-now-t { display: grid; gap: 1px; min-width: 0; }
.st-now-t small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.st-now-t b { font-size: 17px; }
.st-now-text { margin: 0; font-size: 14px; line-height: 1.4; }
.st-prog { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-size: 12px; font-weight: 800; opacity: .85; }
/* Sin overflow:hidden: en la rejilla del Diario (.social-body) una tarjeta así puede encogerse hasta cortarse. */
.st-act { display: block; min-height: max-content; border-radius: 12px; background: #fffaf0; border: 2px solid var(--paper-2); }
.st-act.complete { border-color: #9fcf86; }
.st-act.locked { opacity: .6; }
.st-act-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; cursor: pointer; list-style: none; }
.st-act-head::-webkit-details-marker { display: none; }
.st-act-head { border-radius: 10px; }
.st-act[open] > .st-act-head { background: rgba(224,182,74,.14); border-bottom: 1px solid var(--paper-2); border-radius: 10px 10px 0 0; }
.st-act.complete .st-medal { background: radial-gradient(circle at 35% 30%, #a8e38a, #4fae3f 70%); border-color: #2f6a24; }
.st-act-t { display: grid; gap: 1px; min-width: 0; }
.st-act-t small { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.st-act-t b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-act-r { display: grid; gap: 4px; justify-items: end; width: 96px; }
.st-act-r .st-bar { width: 100%; }
.st-count { font-size: 12px; font-weight: 900; }
.st-play-all { margin: 10px 12px 0; }
.st-steps { list-style: none; margin: 0; padding: 8px 12px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.st-steps li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.04); min-height: 36px; }
.st-steps li.now { grid-column: 1 / -1; background: #fff1c2; border: 1px solid #e0b64a; }
.st-steps li.next { opacity: .45; }
.st-step-t { display: grid; gap: 2px; min-width: 0; }
.st-step-t b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-steps li.now .st-step-t b { white-space: normal; }
.st-step-t small { font-size: 12px; opacity: .8; }
.st-dot { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 900; background: rgba(0,0,0,.08); color: #fff; }
.st-steps li.done .st-dot { background: #4fae3f; }
.st-steps li.now .st-dot { background: #e0a020; }
.st-play { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #5a3a1c; background: #8a5a2c; color: #fff7e2; font-size: 12px; cursor: pointer; padding: 0 0 0 2px; }
.st-play:hover { background: #a86e38; }
.st-now, .st-act, .st-side, .st-memo { min-height: max-content; }
.st-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 6px 2px 0; font: 900 12px/1.2 'Nunito', sans-serif; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.st-note { margin: 0; font-size: 12px; opacity: .75; }
/* Vecinos: una fila por historia con su estado a la derecha. */
.st-side { display: grid; gap: 6px; }
.st-side-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: #fffaf0; border: 2px solid var(--paper-2); }
.st-side-row small { grid-column: 1 / -1; font-size: 12px; opacity: .8; }
.st-pill { font: 900 11px/1 'Nunito', sans-serif; padding: 4px 8px; border-radius: 999px; background: #eee3cc; white-space: nowrap; }
.st-pill.go { background: #fff1c2; color: #8a5a10; }
.st-pill.ok { background: #d9f0cf; color: #2f6a24; }
.st-side-row.todo { opacity: .7; }
/* Memorias: una fila por isla con sus seis luces; las encontradas se leen debajo. */
.st-memo { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fffaf0; border: 2px solid var(--paper-2); }
.st-isles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.st-isle { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: rgba(0,0,0,.04); font-size: 13px; font-weight: 800; }
.st-orbs { display: flex; gap: 4px; }
.st-orbs i { width: 12px; height: 12px; border-radius: 50%; background: #d8ccb4; box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
.st-orbs i.on { background: radial-gradient(circle at 35% 30%, #d8fffa, #3cc8b8 65%); box-shadow: 0 0 6px #5fe0d0; }
.st-found { display: grid; gap: 4px; }
.st-found details { padding: 6px 10px; border-radius: 8px; background: #e6f6f4; border: 1px solid #9fd6cf; font-size: 13px; }
.st-found summary { font-weight: 800; cursor: pointer; }
.st-found small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; }
@media (max-width: 560px) {
  .st-act-r { width: 64px; }
  .st-steps { grid-template-columns: 1fr; }
}

/* Repaso de una escena desde el Diario: su ilustración a pantalla completa detrás del diálogo (que sube por encima). */
.scene-backdrop { position: fixed; inset: 0; z-index: 58; background: #07060c center / cover no-repeat; transition: opacity .4s; }
.scene-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55)); }
.scene-backdrop.out { opacity: 0; }
body.story-replay .pro-dialog { z-index: 61; position: fixed; }
body.story-replay .scene-choice { z-index: 62; }

/* Álbum de la historia: una tarjeta con la ilustración de cada escena vivida. */
.st-album { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; min-height: max-content; }
.st-shot { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; border: 2px solid #5a3a1c; padding: 0; cursor: pointer;
  background: #07060c center / cover no-repeat; box-shadow: 0 2px 0 rgba(0,0,0,.25); transition: transform .12s; }
.st-shot:hover { transform: translateY(-2px); }
.st-shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.8)); }
.st-shot-t { position: absolute; left: 8px; right: 8px; bottom: 6px; z-index: 1; display: grid; gap: 1px; text-align: left; color: #fff; text-shadow: 0 1px 2px #000; }
.st-shot-t small { font: 900 10px/1.2 'Nunito', sans-serif; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.st-shot-t b { font: 800 13px/1.25 'Nunito', sans-serif; }
.st-shot-play { position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -60%); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(20,12,6,.6); border: 2px solid rgba(255,247,226,.8); color: #fff7e2; font-size: 14px; padding-left: 3px; opacity: 0; transition: opacity .15s; }
.st-shot:hover .st-shot-play, .st-shot:focus-visible .st-shot-play { opacity: 1; }
.st-shot.locked { cursor: default; border: 2px dashed #c9b38c; box-shadow: none; background: repeating-linear-gradient(135deg, #efe2c6 0 10px, #e8d8b8 10px 20px); }
.st-shot.locked::after { background: none; }
.st-shot.locked::before { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font: 900 34px/1 'Nunito', sans-serif; color: #c9b38c; }
.st-shot.locked .st-shot-t { color: #9a8462; text-shadow: none; }
.st-shot.locked:hover { transform: none; }
.st-album-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (hover: none) { .st-shot-play { opacity: 1; } }
@media (max-width: 560px) {
  /* En el móvil, el álbum es una tira que se desliza de lado en vez de una tarjeta a todo lo ancho por escena. */
  .st-album { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 150px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
  .st-shot { scroll-snap-align: start; }
  .st-album-bar .btn { flex: 1 1 auto; }
}
/* Memorias encontradas: tarjetas como las del álbum, con el tono turquesa de las Memorias (sin imagen aún, un degradado). */
.st-memshot { border-color: #2f7f78; background-color: #1c3a3a; background-image: linear-gradient(135deg, #1c3a3a, #0f1f22); }