/* กู้สเตตัส (js/deathrec.js, 2026-10-19): the death card on #dead, the HUD badge #drbadge, the window #deathrec (a small open
   book: the default book picture assets/ui_book/book.png, so its dark pages read the same on every book skin). */

/* ---- the death screen: the middle stays clear so the hero is seen lying there (js/avatar_ps.js fallAt) */
#dead.dr-on { place-items: stretch; background: radial-gradient(ellipse 34% 30% at 50% 50%, rgba(40, 20, 40, 0.06), rgba(30, 12, 30, 0.5) 100%); }
#dead.dr-on > div:first-child { position: absolute; left: 0; right: 0; top: 19vh; pointer-events: none; }   /* (under the map-name banner, over the body) */
#dead.dr-on h2 { font-size: 2.3rem; }
#dead.dr-on p { margin-top: 4px; font: 600 1rem var(--thai, 'Mali', sans-serif); color: #ffe0e0; -webkit-text-stroke: 0.06em #3a0e14; paint-order: stroke fill; }
#dead .dr-dead { position: absolute; left: 50%; bottom: max(118px, 17vh); transform: translateX(-50%); width: min(500px, calc(100vw - 24px)); box-sizing: border-box;
  display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 6px 12px; padding: 12px 16px 14px; border-radius: 16px; pointer-events: auto;
  font-family: var(--thai, 'Mali', sans-serif); color: #f2ead6; text-align: left;
  background: radial-gradient(ellipse at 50% 0%, rgba(176, 120, 255, 0.2), transparent 65%), linear-gradient(180deg, rgba(30, 22, 40, 0.96), rgba(12, 10, 20, 0.96));
  border: 2px solid #b98a3a; box-shadow: 0 0 0 1px #2a1d0c, inset 0 0 0 1px rgba(255, 216, 130, 0.14), 0 14px 34px rgba(0, 0, 0, 0.55); }
#dead .dr-dead .dr-tomb { grid-row: span 2; width: 56px; height: 56px; object-fit: contain; }
#dead .dr-took { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 0.92rem; text-align: left; }
#dead .dr-took > span { color: #cbbf9f; }
#dead .dr-took .dr-ok { color: #9be37b; font-weight: 700; }
#dead .dr-hint { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: #d9cfb4; line-height: 1.4; text-align: left; }
#dead .dr-hint img { width: 26px; height: 26px; object-fit: contain; flex: none; }
#dead .dr-hint b { color: #e2c8ff; }
#dead .dr-btns { grid-column: 1 / -1; display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
#dead .dr-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 6px 18px; border-radius: 12px; cursor: pointer;
  font: 800 0.98rem var(--thai, 'Mali', sans-serif); color: #2a1a06; border: 2px solid #ffe2a0;
  background: linear-gradient(180deg, #ffe08a, #e0a43c); box-shadow: 0 0 0 1px #3a2408, inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 10px rgba(0, 0, 0, 0.4); }
#dead .dr-go:hover { filter: brightness(1.08); }
#dead .dr-go .dr-cd { font-style: normal; min-width: 26px; padding: 1px 6px; border-radius: 999px; background: rgba(42, 26, 6, 0.85); color: #ffe2a0; font: 700 0.84rem 'Fredoka', sans-serif; }
#dead .dr-go2 { color: #fff3d6; border-color: #d9a443; background: linear-gradient(180deg, #6a3fa0, #34205a); }
#dead .dr-go2 img { width: 28px; height: 28px; object-fit: contain; margin-left: -6px; }

/* the losses (card + window rows) */
.dr-xp, .dr-st { display: inline-flex; align-items: baseline; gap: 4px; padding: 1px 9px; border-radius: 999px; font: 700 0.9rem 'Fredoka', var(--thai, 'Mali'), sans-serif; white-space: nowrap; }
.dr-xp { background: rgba(255, 120, 100, 0.16); border: 1px solid rgba(255, 140, 120, 0.55); color: #ffb3a4; }
.dr-xp small { font-size: 0.75rem; opacity: 0.85; }
.dr-st { background: rgba(176, 120, 255, 0.16); border: 1px solid rgba(196, 150, 255, 0.55); color: #dcc4ff; }

/* ---- the HUD badge under the profile */
#drbadge { position: absolute; z-index: 3; width: 66px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  -webkit-tap-highlight-color: transparent; }
#drbadge[hidden] { display: none; }
#drbadge img { width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)); transition: transform 0.15s; }
#drbadge:hover img { transform: scale(1.08); }
#drbadge b { margin-top: -6px; padding: 1px 7px; border-radius: 999px; white-space: nowrap; font: 700 11px/16px var(--thai, 'Mali', sans-serif); color: #ffe39a;
  background: #1c1328; border: 1px solid #d9a443; }
#drbadge .dr-n { position: absolute; top: 0; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; font: 700 11px/16px 'Fredoka', sans-serif; font-style: normal;
  color: #fff; background: #e0413a; border: 1px solid #fff2f0; }
#drbadge.free img { animation: dr-glow 1.8s ease-in-out infinite; }
@keyframes dr-glow { 0%, 100% { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)); } 50% { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 7px rgba(196, 140, 255, 0.95)); } }

/* ---- the window: a small open book */
#deathrec { position: fixed; inset: 0; z-index: 962; display: grid; place-items: center; background: rgba(6, 4, 12, 0.62); pointer-events: auto; }
#deathrec[hidden] { display: none; }
#deathrec .dr-book { position: relative; width: min(1040px, 96vw, calc((100vh - 24px) * 1.496)); aspect-ratio: 1544 / 1032; box-sizing: border-box;
  background: url(../assets/ui_book/book.png) center / 100% 100% no-repeat; font-family: var(--thai, 'Mali', sans-serif); color: #f2ead6; --f: clamp(11px, calc(min(1040px, 96vw, (100vh - 24px) * 1.496) / 74), 14px); font-size: var(--f); }
#deathrec .dr-x { position: absolute; right: 2.2%; top: 3.2%; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(217, 164, 67, 0.85); background: #1c160e; color: #ffd98a;
  font: 700 15px/1 sans-serif; cursor: pointer; z-index: 2; }
#deathrec .dr-pg { position: absolute; top: 12.6%; bottom: 9.5%; display: flex; flex-direction: column; gap: 0.75em; min-height: 0; }
#deathrec .dr-l { left: 8.6%; right: 52.6%; }
#deathrec .dr-r { left: 53.6%; right: 7.4%; }
#deathrec .dr-head { display: flex; align-items: center; gap: 12px; }
#deathrec .dr-head img { width: 5.4em; height: 5.4em; object-fit: contain; flex: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5)); }
#deathrec .dr-head span { display: flex; flex-direction: column; gap: 2px; }
#deathrec .dr-head b { font-size: 1.85em; font-weight: 800; line-height: 1.3; color: #ffe2a0; }
#deathrec .dr-head small { font-size: 0.95em; color: #cbbf9f; }
#deathrec .dr-today { display: flex; align-items: center; gap: 12px; padding: 0.6em 0.9em; border-radius: 12px; background: rgba(176, 120, 255, 0.1); border: 1px solid rgba(196, 150, 255, 0.4); }
#deathrec .dr-pips { display: flex; gap: 5px; flex: none; }
#deathrec .dr-pips i { width: 1.25em; height: 1.25em; border-radius: 50%; background: #2a2333; border: 1.5px solid rgba(217, 164, 67, 0.55); }
#deathrec .dr-pips i.on { background: radial-gradient(circle at 40% 35%, #f3e2ff, #b77cff 55%, #6b3cb0); border-color: #ffe2a0; }
#deathrec .dr-today > span:last-child { display: flex; flex-direction: column; line-height: 1.4; }
#deathrec .dr-today b { font-size: 1.05em; color: #f3e6ff; }
#deathrec .dr-today small { font-size: 0.85em; color: #b9ad8f; }
#deathrec .dr-next { display: flex; flex-direction: column; gap: 4px; padding: 0.6em 0.9em; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 216, 130, 0.28); }
#deathrec .dr-next > small { font-size: 0.85em; color: #cbbf9f; }
#deathrec .dr-next > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
#deathrec .dr-next > div > i { font-style: normal; font-size: 0.8em; color: #9d9280; }
#deathrec .dr-cost { display: inline-flex; align-items: center; gap: 4px; font: 700 1.15em 'Fredoka', sans-serif; color: #fff2cc; }
#deathrec .dr-cost img { width: 1.5em; height: 1.5em; object-fit: contain; }
#deathrec .dr-free { font-size: 1.4em; color: #9be37b; }
#deathrec .dr-ladder { display: flex; gap: 5px; }
#deathrec .dr-ladder span { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0.3em 0.2em; border-radius: 9px; background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 216, 130, 0.18); }
#deathrec .dr-ladder span.on { background: rgba(255, 210, 122, 0.16); border-color: #ffd27a; }
#deathrec .dr-ladder small { font-size: 0.72em; color: #b9ad8f; white-space: nowrap; }
#deathrec .dr-ladder b { font: 700 1em 'Fredoka', var(--thai, 'Mali'), sans-serif; color: #fff2cc; white-space: nowrap; }
#deathrec .dr-ladder span.on b { color: #ffd27a; }
#deathrec .dr-rules { margin: 0; padding: 0 0 0 1.2em; display: flex; flex-direction: column; gap: 0.3em; font-size: 0.86em; line-height: 1.45; color: #d6ccb2; overflow-y: auto; min-height: 0; flex: 1; }
#deathrec .dr-rules li::marker { color: #d9a443; }
#deathrec .dr-wal { display: flex; justify-content: flex-start; }
#deathrec .dr-wal .wl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#deathrec .dr-wal .wl-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 4px; border-radius: 999px; background: #1a1420; border: 1px solid #b98a3a;
  color: #f2e6c8 !important; -webkit-text-fill-color: #f2e6c8 !important; font: 700 0.95em 'Fredoka', sans-serif; cursor: pointer; }
#deathrec .dr-wal .wl-chip img { width: 1.6em; height: 1.6em; object-fit: contain; }
#deathrec .dr-rh { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 0.4em; border-bottom: 1px solid rgba(217, 164, 67, 0.4); }
#deathrec .dr-rh b { font-size: 1.35em; color: #ffe2a0; }
#deathrec .dr-rh small { font-size: 0.9em; color: #cbbf9f; }
#deathrec .dr-list { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 0.55em; overflow-y: auto; min-height: 0; flex: 1; }
#deathrec .dr-list li { display: grid; grid-template-columns: 3.2em 1fr; gap: 0.35em 0.7em; align-items: center; padding: 0.55em 0.7em; border-radius: 11px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 216, 130, 0.25); }
#deathrec .dr-ic { width: 3.2em; height: 3.2em; object-fit: contain; }
#deathrec .dr-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.35; }
#deathrec .dr-who { display: flex; align-items: center; gap: 6px; }
#deathrec .dr-who b { font-size: 1em; color: #fff2cc; }
#deathrec .dr-pk { font-style: normal; padding: 0 6px; border-radius: 6px; font: 700 0.75em 'Fredoka', sans-serif; color: #fff; background: #b8322c; }
#deathrec .dr-tx > small { font-size: 0.8em; color: #b9ad8f; }
#deathrec .dr-loss { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
#deathrec .dr-loss em { font-style: normal; font-size: 0.76em; color: #9d9280; }
#deathrec .dr-btns2 { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; }
#deathrec .dr-pay { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 2.5em; min-width: 5.6em; padding: 0.2em 0.8em; border-radius: 10px; cursor: pointer;
  font: 700 1em 'Fredoka', var(--thai, 'Mali'), sans-serif; color: #fff3d6; border: 1.5px solid #d9a443; background: linear-gradient(180deg, #3a2752, #1c1328);
  box-shadow: 0 0 0 1px #2a1d0c, inset 0 1px 0 rgba(255, 230, 170, 0.22); }
#deathrec .dr-pay img { width: 1.5em; height: 1.5em; object-fit: contain; }
#deathrec .dr-pay:not(:disabled):hover { filter: brightness(1.15); }
#deathrec .dr-pay.free { min-width: 8em; font-family: var(--thai, 'Mali'), sans-serif; font-weight: 800; color: #2a1a06; border-color: #ffe2a0; background: linear-gradient(180deg, #ffe08a, #e0a43c); }
#deathrec .dr-pay:disabled { cursor: default; color: #8f8574; background: #241e2a; border-color: rgba(217, 164, 67, 0.3); }
#deathrec .dr-pay:disabled img { filter: grayscale(0.7); opacity: 0.6; }
#deathrec .dr-none { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; color: #cbbf9f; }
#deathrec .dr-none img { width: 7em; height: 7em; object-fit: contain; opacity: 0.9; }
#deathrec .dr-none b { font-size: 1.2em; color: #f2e6c8; }
#deathrec .dr-say { margin: 0; padding: 0.4em 0.7em; border-radius: 9px; font-size: 0.88em; color: #ffb3a4; background: rgba(255, 110, 90, 0.1); border: 1px solid rgba(255, 140, 120, 0.4); }

/* phones / small windows: one column on a dark page, no book picture */
@media (max-width: 720px), (max-height: 430px) {
  #deathrec { place-items: start center; overflow-y: auto; padding: 12px 0; }
  #deathrec .dr-book { width: calc(100vw - 24px); aspect-ratio: auto; background: linear-gradient(180deg, rgba(30, 22, 40, 0.98), rgba(12, 10, 20, 0.98)); border: 2px solid #8a6a2e; border-radius: 16px;
    box-shadow: 0 0 0 1px #2a1d0c, 0 18px 40px rgba(0, 0, 0, 0.6); padding: 16px 14px; display: flex; flex-direction: column; gap: 14px; font-size: 13px; }
  #deathrec .dr-pg { position: static; }
  #deathrec .dr-x { right: 10px; top: 10px; }
  #deathrec .dr-rules, #deathrec .dr-list { overflow: visible; flex: none; }
}
#deathrec .nw { white-space: nowrap; }
/* a free row: its one button beside the text (a paid row puts its three under it) */
#deathrec .dr-list li.one { grid-template-columns: 3.2em 1fr auto; }
#deathrec .dr-list li.one .dr-btns2 { grid-column: auto; }
#deathrec .dr-list li.one .dr-pay.free { min-width: 6.4em; }