/* "While you were away" — the return screen (Oct 2026). Markup in index.html (#offline-modal),
 * content from js/away-screen.js.
 *
 * Same visual family as the title screen (css/title.css): the dusk-green ledger card, the gold
 * hairline, Cinzel for the display line, a pixel scene from the game's own art behind the
 * heading. Layouts, chosen deliberately:
 *   phone portrait (default)   scene banner on top, ledger scrolls, Continue docked at the bottom
 *   short landscape (≤520 tall) scene as a narrow left column, ledger + Continue on the right
 *   desktop (≥900 wide, ≥600 tall, landscape)  scene left half, ledger right, Continue pinned
 * The ledger is the only scroll region, so Continue can never be pushed off-screen — not by a
 * long night, a big text setting or browser zoom.
 *
 * Scoped to #offline-modal. Tokens fall back to literals so the screen still reads correctly if
 * title.css ever fails to load. */

#offline-modal.aw-modal {
  --aw-gold: var(--t-gold, #e3bd62);
  --aw-gold-hi: var(--t-gold-hi, #f6dc97);
  --aw-gold-lo: var(--t-gold-lo, #a97a2c);
  --aw-ink: var(--t-ink, #efe9d6);
  --aw-muted: var(--t-muted, #a9b4a2);
  --aw-line: var(--t-line, rgba(227, 189, 98, .38));
  --aw-card: #121915;
  --aw-card-2: #1a241d;
  --aw-cell: rgba(255, 255, 255, .035);
  --aw-ok: var(--t-ok, #8fc98a);
  --aw-bad: var(--t-bad, #f08a62);
  --aw-display: var(--t-display, 'Cinzel', Georgia, serif);
  --aw-fs: clamp(15px, calc(3.9 * var(--u, 4px)), 18px);
  padding: calc(8px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-right, 0px))
           calc(8px + env(safe-area-inset-bottom, 0px)) calc(8px + env(safe-area-inset-left, 0px));
  background: radial-gradient(120% 90% at 50% 30%, rgba(10, 14, 12, .55), rgba(4, 6, 5, .86));
  overscroll-behavior: contain;
}

#offline-modal .aw-card {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: 560px; max-height: 100%;
  padding: 0; overflow: hidden;
  color: var(--aw-ink); font-size: var(--aw-fs); line-height: 1.4;
  background: linear-gradient(180deg, var(--aw-card-2), var(--aw-card) 46%);
  border: 1px solid var(--aw-line); border-radius: 18px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .03);
}
#offline-modal .aw-card::after { /* the inner gold hairline of the title ledger */
  content: ''; position: absolute; inset: 5px; border-radius: 14px; pointer-events: none;
  border: 1px solid rgba(227, 189, 98, .12);
}

/* ── scene + heading ───────────────────────────────────────────────────── */
#offline-modal .aw-scene {
  position: relative; flex: none;
  /* min-height, not height: the heading sits in flow at the bottom, so big text or browser zoom
     grows the scene instead of spilling the title out of it */
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(150px, 29vh, 230px);
  overflow: hidden; isolation: isolate;
  /* painted before the canvas exists (and if it never does): the scene's own dusk */
  background: linear-gradient(180deg, #1e1c48 0%, #66386c 55%, #b86a52 78%, #3a5038 79%, #1a241d 100%);
}
#offline-modal .aw-scene[data-tod="day"] { background: linear-gradient(180deg, #4276b0, #80acce 60%, #5c8442 79%, #1a241d); }
#offline-modal .aw-scene[data-tod="night"] { background: linear-gradient(180deg, #080b1e, #1c3040 60%, #1c2c2c 79%, #121915); }
#offline-modal .aw-scene[data-tod="dawn"] { background: linear-gradient(180deg, #282e5c, #8c5e80 60%, #4a6640 79%, #1a241d); }
#offline-modal .aw-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
#offline-modal .aw-scene::after { /* scrim so the heading always reads over the art */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 60%; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(18, 25, 21, 0), rgba(18, 25, 21, .5) 40%, rgba(26, 36, 29, .97) 100%);
}
#offline-modal .aw-head {
  position: relative; z-index: 1;
  padding: 0 20px 10px;
}
#offline-modal .aw-kicker {
  font-family: var(--aw-display); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  font-size: 11.5px; color: var(--aw-gold); text-shadow: 0 1px 2px #000;
}
#offline-modal .aw-title {
  margin: 2px 0 6px; font-family: var(--aw-display); font-weight: 700; line-height: 1.05;
  font-size: clamp(27px, 7.6vw, 36px); color: var(--aw-gold-hi);
  text-shadow: 0 2px 0 rgba(60, 34, 8, .9), 0 3px 14px rgba(0, 0, 0, .6);
  cursor: default; touch-action: auto; user-select: text;
}
#offline-modal .aw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#offline-modal .aw-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 8px; border-radius: 999px;
  font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--aw-ink);
  background: rgba(10, 14, 12, .72); border: 1px solid rgba(227, 189, 98, .3);
}
#offline-modal .aw-chip .aw-ico { width: 14px; height: 14px; color: var(--aw-gold); }
#offline-modal .aw-chip-cap { color: var(--aw-gold-hi); }
#offline-modal .aw-chip-streak .aw-ico { color: #f29a4a; }

/* the injected ✕ (ui.js ensureDialogX) sits on the art, top right */
#offline-modal .aw-card > .panel-close {
  position: absolute; top: 8px; right: 8px; z-index: 3; float: none; margin: 0;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  font-size: 24px; line-height: 38px; color: var(--aw-ink);
  background: rgba(10, 14, 12, .6); border: 1px solid rgba(255, 255, 255, .14);
}

/* Toasts live on <body> above every #game-screen dialog (interface.css only fades them to 30%
   over a modal). This screen is the player's first look after a return, so they sit behind it:
   hidden while it is open, back the moment it closes. */
body:has(#offline-modal:not(.hidden)) #notifications { visibility: hidden; }

/* ── ledger body ───────────────────────────────────────────────────────── */
#offline-modal .aw-body {
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch; padding: 8px 18px 14px;
  scrollbar-width: thin; scrollbar-color: #3b4f3d transparent;
}
#offline-modal .aw-lead { margin: 0 0 12px; font-size: 1.04em; color: var(--aw-ink); }
#offline-modal .aw-quiet { margin: -4px 0 12px; color: var(--aw-muted); font-size: .94em; }
#offline-modal .aw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#offline-modal .aw-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#offline-modal #offline-daily { margin-bottom: 12px; }
#offline-modal #offline-daily .dr-panel { margin: 0; }

/* key results: 1–4 tiles, never more */
#offline-modal .aw-tiles { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
#offline-modal .aw-tiles.n1 { grid-template-columns: 1fr; }
#offline-modal .aw-tiles.n3 .aw-tile:first-child { grid-column: 1 / -1; }
#offline-modal .aw-tile {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 9px; align-items: center;
  min-width: 0; padding: 10px 12px; border-radius: 12px;
  background: var(--aw-cell); border: 1px solid rgba(255, 255, 255, .07);
}
#offline-modal .aw-tile .aw-ico { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--aw-gold); }
#offline-modal .aw-tile-v { /* never truncated: a clipped number is a wrong number */
  font-size: 1.42em; font-weight: 800; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#offline-modal .aw-tile-l { font-size: .8em; color: var(--aw-muted); letter-spacing: .02em; overflow-wrap: anywhere; }

/* moments: level-ups, the best find, a record */
#offline-modal .aw-moment {
  position: relative; margin: 0 0 10px; padding: 11px 14px; border-radius: 12px; overflow: hidden;
  background: linear-gradient(135deg, rgba(227, 189, 98, .14), rgba(227, 189, 98, .04));
  border: 1px solid rgba(227, 189, 98, .38);
}
#offline-modal .aw-moment-k {
  display: flex; align-items: center; gap: 6px;
  font-size: .76em; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--aw-gold);
}
#offline-modal .aw-moment-k .aw-ico { width: 16px; height: 16px; }
#offline-modal .aw-moment-h { margin-top: 2px; font-family: var(--aw-display); font-weight: 700; font-size: 1.28em; color: var(--aw-gold-hi); line-height: 1.2; }
#offline-modal .aw-record .aw-moment-h { font-family: inherit; font-size: 1em; font-weight: 600; color: var(--aw-ink); }
#offline-modal .aw-lv-chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
#offline-modal .aw-lv-chip {
  padding: 3px 10px; border-radius: 999px; font-size: .86em; white-space: nowrap;
  background: rgba(10, 14, 12, .55); border: 1px solid rgba(227, 189, 98, .28);
}
#offline-modal .aw-lv-skill { color: var(--aw-ink); font-weight: 600; }
#offline-modal .aw-lv-from { color: var(--aw-muted); }
#offline-modal .aw-lv-arrow { margin: 0 3px; color: var(--aw-gold); }
#offline-modal .aw-lv-chip b { color: var(--aw-gold-hi); }
#offline-modal .aw-lv-plus { color: var(--aw-ok); font-weight: 700; font-size: .9em; }

/* best find — rarity is spelled out in text; the colour only repeats it */
#offline-modal .aw-find { display: flex; gap: 12px; align-items: center; --rc: #b8c4b0; background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .1); }
#offline-modal .aw-find.rar-refined { --rc: #7fc4e8; }
#offline-modal .aw-find.rar-rare { --rc: #6fa0ff; }
#offline-modal .aw-find.rar-epic { --rc: #c58cff; }
#offline-modal .aw-find.rar-relic { --rc: #ffb347; }
#offline-modal .aw-find.is-rare { border-color: color-mix(in srgb, var(--rc) 60%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--rc) 20%, transparent), rgba(255, 255, 255, .02)); }
#offline-modal .aw-find-gem {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  color: var(--rc); background: rgba(10, 14, 12, .6); border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent);
}
#offline-modal .aw-find-gem .aw-ico { width: 26px; height: 26px; }
#offline-modal .aw-find-txt { min-width: 0; }
#offline-modal .aw-find .aw-moment-k { color: var(--aw-muted); }
#offline-modal .aw-rarity { padding: 0 6px; border-radius: 4px; letter-spacing: .06em; color: #10140f; background: var(--rc); }
#offline-modal .aw-find-name { margin-top: 2px; font-weight: 700; font-size: 1.08em; color: #fff; overflow-wrap: anywhere; }
#offline-modal .aw-find-hint { font-size: .8em; color: var(--aw-muted); }

/* notices: setback, stopped early, auto-sold, wear, repair */
#offline-modal .aw-notes { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
#offline-modal .aw-note {
  display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 10px;
  font-size: .92em; background: rgba(255, 255, 255, .03); border-left: 3px solid #5d7a62;
}
#offline-modal .aw-note .aw-ico { width: 18px; height: 18px; margin-top: 1px; color: #9cc0a0; }
#offline-modal .aw-note b { color: #fff; }
#offline-modal .aw-note-warn { border-left-color: #c99a3d; }
#offline-modal .aw-note-warn .aw-ico { color: #e8b55a; }
#offline-modal .aw-note-setback { border-left-color: #b9785f; background: rgba(185, 120, 95, .09); }
#offline-modal .aw-note-setback .aw-ico { color: #e09a7c; }

/* the offline limit, in the open */
#offline-modal .aw-cap { margin: 0 0 10px; padding: 11px 14px; border-radius: 12px; background: rgba(120, 150, 200, .07); border: 1px solid rgba(150, 175, 220, .26); }
#offline-modal .aw-cap-h { display: flex; align-items: center; gap: 7px; font-weight: 700; color: #cfdcf4; }
#offline-modal .aw-cap-h .aw-ico { width: 18px; height: 18px; color: #a9c0ea; }
#offline-modal .aw-cap p { margin: 5px 0 0; font-size: .92em; }
#offline-modal .aw-cap .aw-cap-shop { color: var(--aw-muted); font-size: .84em; }

/* full breakdown */
#offline-modal .aw-more {
  display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin: 4px 0 0;
  border-radius: 10px; border: 1px dashed rgba(227, 189, 98, .32); background: transparent;
  color: var(--aw-gold); font: inherit; font-weight: 700; font-size: .92em; cursor: pointer;
}
#offline-modal .aw-more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s; }
#offline-modal .aw-more.open svg { transform: rotate(180deg); }
#offline-modal .aw-details { margin-top: 8px; }
#offline-modal .aw-group { margin: 0 0 10px; }
#offline-modal .aw-group h3 { margin: 10px 0 4px; font-size: .74em; letter-spacing: .14em; text-transform: uppercase; color: var(--aw-gold); }
#offline-modal .aw-group dl { margin: 0; }
#offline-modal .aw-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: .92em; }
#offline-modal .aw-row dt { color: var(--aw-muted); }
#offline-modal .aw-row dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; min-width: 0; }

/* ── the Continue dock ─────────────────────────────────────────────────── */
#offline-modal .aw-foot {
  flex: none; padding: 10px 16px 14px;
  background: linear-gradient(180deg, rgba(18, 25, 21, 0), var(--aw-card) 30%);
  border-top: 1px solid rgba(227, 189, 98, .14);
}
#offline-modal .aw-foot #offline-close {
  display: block; width: 100%; min-height: 52px; margin: 0; padding: 12px 18px;
  font-family: var(--aw-display); font-weight: 700; font-size: 1.12em; letter-spacing: .03em;
  color: #2a1d06; border: 1px solid #f3d58a; border-radius: 12px;
  background: linear-gradient(180deg, #f6dc97, #e3bd62 55%, #c8973f);
  box-shadow: 0 2px 0 #7a5418, 0 6px 18px rgba(0, 0, 0, .35);
}
#offline-modal .aw-cta-short { display: none; }
#offline-modal .aw-foot #offline-close:active { transform: translateY(1px); box-shadow: 0 1px 0 #7a5418; }
#offline-modal button:focus-visible, #offline-modal .aw-card > .panel-close:focus-visible { outline: 3px solid #fff2c4; outline-offset: 2px; }

/* tones: a hard night is told plainly — no gold glow */
#offline-modal .aw-card[data-tone="setback"] .aw-title { color: #efe3c8; }
/* a moment so short there is nothing to report: compact */
#offline-modal .aw-card.is-brief .aw-scene { min-height: clamp(110px, 20vh, 150px); }

/* ── narrow and short phones ──────────────────────────────────────────── */
@media (max-width: 374px) {
  #offline-modal .aw-cta-long { display: none; }
  #offline-modal .aw-cta-short { display: inline; }
  #offline-modal .aw-body { padding-left: 14px; padding-right: 14px; }
  #offline-modal .aw-tile { padding: 9px 10px; column-gap: 7px; }
  #offline-modal .aw-tile .aw-ico { width: 20px; height: 20px; }
  #offline-modal .aw-tile-v { font-size: 1.22em; }
  #offline-modal .aw-head { padding: 0 14px 8px; }
}
@media (orientation: portrait) and (max-height: 700px) {
  #offline-modal .aw-kicker { display: none; } /* the title alone names the screen; keeps it off the art */
  #offline-modal .aw-scene { min-height: clamp(132px, 26vh, 180px); }
}
@media (orientation: portrait) and (max-height: 480px) { /* 200% zoom on a phone, split screen */
  #offline-modal .aw-scene { min-height: 92px; }
  #offline-modal .aw-title { font-size: 24px; margin-bottom: 4px; }
  #offline-modal .aw-chip-streak { display: none; }
}

/* ── motion (opt-in by .aw-playing; never under reduced motion) ───────── */
@keyframes aw-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes aw-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes aw-sheen { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
#offline-modal.aw-playing .aw-card { animation: aw-rise .32s cubic-bezier(.2, .8, .3, 1) both; }
#offline-modal.aw-playing .aw-tile { animation: aw-in .3s ease-out both; animation-delay: calc(.12s + var(--i) * 60ms); }
#offline-modal.aw-playing .aw-moment { animation: aw-in .34s ease-out .3s both; }
#offline-modal.aw-playing .aw-levels::before, #offline-modal.aw-playing .aw-find.is-rare::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 200, .28), transparent);
  animation: aw-sheen 1.1s ease-out .55s 1 both;
}
@media (prefers-reduced-motion: reduce) {
  #offline-modal *, #offline-modal *::before { animation: none !important; transition: none !important; }
}

/* ── short landscape phones: scene as a slim left column ──────────────── */
@media (orientation: landscape) and (max-height: 520px) {
  #offline-modal.aw-modal { padding: calc(6px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) calc(8px + env(safe-area-inset-left, 0px)); }
  #offline-modal .aw-card { max-width: 860px; height: 100%; display: grid; grid-template-columns: minmax(200px, 36%) 1fr; grid-template-rows: 1fr auto; }
  #offline-modal .aw-scene, #offline-modal .aw-card.is-brief .aw-scene { grid-row: 1 / 3; min-height: 0; }
  #offline-modal .aw-scene::after { height: 70%; }
  #offline-modal .aw-head { padding: 0 14px 10px; }
  #offline-modal .aw-title { font-size: 26px; }
  #offline-modal .aw-body { grid-column: 2; padding-top: 12px; }
  #offline-modal .aw-lead-slot { padding-right: 40px; } /* the ✕ sits over the ledger here */
  #offline-modal .aw-foot { grid-column: 2; padding: 8px 14px 10px; }
  #offline-modal .aw-foot #offline-close { min-height: 46px; padding: 8px 16px; }
  #offline-modal .aw-tiles.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #offline-modal .aw-tiles.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #offline-modal .aw-tiles.n3 .aw-tile:first-child { grid-column: auto; }
  #offline-modal .aw-tile-v { font-size: 1.1em; }
  #offline-modal .aw-tile { grid-template-columns: 1fr; padding: 8px 10px; }
  #offline-modal .aw-tile .aw-ico { display: none; }
}

/* ── desktop: the scene earns half the card ───────────────────────────── */
@media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) {
  #offline-modal .aw-card { max-width: 980px; height: min(660px, 100%); display: grid; grid-template-columns: 46% 1fr; grid-template-rows: 1fr auto; }
  #offline-modal .aw-scene, #offline-modal .aw-card.is-brief .aw-scene { grid-row: 1 / 3; min-height: 0; }
  #offline-modal .aw-scene::after { height: 46%; }
  #offline-modal .aw-head { padding: 0 26px 22px; }
  #offline-modal .aw-title { font-size: 42px; }
  #offline-modal .aw-kicker { font-size: 13px; }
  #offline-modal .aw-chip { font-size: 14px; }
  #offline-modal .aw-body { grid-column: 2; padding: 26px 28px 14px; font-size: 17px; }
  #offline-modal .aw-lead-slot { padding-right: 36px; } /* the ✕ sits over the ledger here */
  #offline-modal .aw-foot { grid-column: 2; padding: 12px 28px 22px; }
  #offline-modal .aw-tile-v { font-size: 1.6em; }
}
@media (min-width: 900px) and (min-height: 600px) and (orientation: landscape) and (max-height: 760px) {
  #offline-modal .aw-card { height: 100%; }
}