/* TYPING-MUSEUM-BURN (proposed 2026-10-02): the museum "Burn" pill and the
   "Burn for benefit" dialog in the landing C "Hero Showdown" look
   (Cinzel Lore headings, gold hairline frames, dark-glass panels, ember glow).
   Styling only: no text, ids, hooks or JS change. Every rule is scoped to
     #screen-title.land .tt-burn-btn   (the Burn pills in the museum grid), or
     #tt-burn-dialog                   (the Burn for benefit / Always on dialog),
   so the other sheets (#tt-sheet treasure list, hall exchange, coin detail),
   combat, loading and how-to are untouched.
   Rollback: delete the <link> to this file in index.html. */

/* ---------- tokens (same values as landing-showdown.css) ---------- */
#tt-burn-dialog,
#screen-title.land .tt-museum {
  --mb-hair: rgba(240, 200, 120, .42);
  --mb-hair2: rgba(240, 200, 120, .18);
  --mb-gold: #f5c542;
  --mb-gold-hi: #ffd98a;
  --mb-ink: #f0e6d0;
  --mb-muted: #d8cbb0;
  --mb-ember: rgba(255, 120, 40, .55);
}

/* ---------- Burn pill (museum grid on the landing) ---------- */
#screen-title.land .tt-burn-btn,
#screen-title.land [data-tt-erika-info] { /* Erika's Dad "Always" pill matches the Burn pill */
  /* same footprint as today (about 48 x 32 px) so the 3.1rem museum cells never overlap */
  min-height: 32px; padding: 0 8px; border-radius: 99px;
  font: 600 10.5px/1 "Cinzel Lore", Georgia, serif; letter-spacing: .03em;
  color: var(--mb-gold-hi) !important;
  background: linear-gradient(180deg, rgba(255,240,210,.10), transparent 55%), linear-gradient(180deg, rgba(42,34,28,.95), rgba(16,14,12,.96)) !important;
  border: 1px solid var(--mb-hair) !important;
  box-shadow: inset 0 1px 0 rgba(255,235,190,.12), inset 0 -1px 0 rgba(255,130,40,.35), 0 3px 10px rgba(0,0,0,.45) !important;
  text-shadow: 0 1px 0 #120c06, 0 0 8px rgba(255,140,50,.35);
}
#screen-title.land .tt-burn-btn:not(:disabled):hover,
#screen-title.land [data-tt-erika-info]:hover {
  color: #fff !important;
  background: linear-gradient(180deg, rgba(255,235,200,.45), transparent 50%), linear-gradient(180deg, #e9803c, #8a2c0a) !important;
  border-color: rgba(255,210,150,.8) !important;
  box-shadow: inset 0 0 10px rgba(255,170,80,.45), 0 0 14px var(--mb-ember), 0 3px 10px rgba(0,0,0,.45) !important;
}
#screen-title.land .tt-burn-btn:not(:disabled):active,
#screen-title.land [data-tt-erika-info]:active {
  transform: translateY(1px) !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.45), 0 0 8px rgba(255,120,40,.35) !important;
}
#screen-title.land .tt-burn-btn:focus-visible, #screen-title.land [data-tt-erika-info]:focus-visible { outline: 2px solid var(--mb-gold); outline-offset: 2px; }
#screen-title.land .tt-burn-btn:disabled { opacity: .42; }

/* J-1012-TYPING-DEV-REFINE: coin cards in a rarity grid. Burn stays a small
   action on the card (hover or tap) and keeps data-tt-burn. */
#screen-title.land .tt-rarity-section { margin: 0 0 16px; }
#screen-title.land .tt-rarity-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--mb-hair2); }
#screen-title.land .tt-rarity-head .tt-haul-group-label { margin: 0; font: 600 13px/1.2 "Cinzel Lore", Georgia, serif; letter-spacing: .12em; text-transform: uppercase; }
#screen-title.land .tt-rarity-head .tt-rarity-count { color: var(--mb-muted); font: 700 12px/1 var(--mono, ui-monospace, monospace); }
#screen-title.land .tt-coin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 10px; }
#screen-title.land .tt-coin-card { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 68px; padding: 8px; border: 1px solid var(--mb-hair2); border-radius: 12px; background: rgba(8,7,6,.45); }
#screen-title.land .tt-coin-card .tt-haul-item { width: 52px; height: 52px; }
#screen-title.land .tt-coin-meta { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#screen-title.land .tt-coin-name { color: var(--mb-ink); font: 700 13px/1.25 system-ui, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#screen-title.land .tt-coin-count { color: var(--mb-gold); font: 700 12px/1 var(--mono, ui-monospace, monospace); }
/* J-1012-11: no extra Burn row. Name/count and Burn stack in one slot; hovering
   the name area (or keyboard focus, or a tap on touch = .is-open) swaps in Burn. */
#screen-title.land .tt-coin-slot { display: grid; align-items: center; min-width: 0; min-height: 36px; }
#screen-title.land .tt-coin-slot > * { grid-area: 1 / 1; }
#screen-title.land .tt-coin-slot.has-action .tt-coin-meta { cursor: pointer; }
#screen-title.land .tt-coin-card .tt-burn-btn,
#screen-title.land .tt-coin-card .tt-unburn { justify-self: start; min-height: 30px !important; padding: 0 14px !important; font-size: 10.5px !important; letter-spacing: .05em; }
#screen-title.land .tt-coin-slot > .tt-coin-meta,
#screen-title.land .tt-coin-slot > .tt-burn-btn,
#screen-title.land .tt-coin-slot > .tt-unburn { transition: opacity .12s ease; }
/* hidden Burn stays in the tab order (opacity only), so keyboard focus reveals it */
#screen-title.land .tt-coin-slot > .tt-burn-btn,
#screen-title.land .tt-coin-slot > .tt-unburn { opacity: 0; pointer-events: none; }
#screen-title.land .tt-coin-slot.is-open > .tt-coin-meta,
#screen-title.land .tt-coin-slot.has-action:has(> :focus-visible) > .tt-coin-meta { opacity: 0; visibility: hidden; }
#screen-title.land .tt-coin-slot.is-open > .tt-burn-btn,
#screen-title.land .tt-coin-slot.is-open > .tt-unburn,
#screen-title.land .tt-coin-slot > .tt-burn-btn:focus-visible,
#screen-title.land .tt-coin-slot > .tt-unburn:focus-visible { opacity: 1; pointer-events: auto; }
#screen-title.land .tt-coin-slot.is-open > .tt-burn-btn:disabled { opacity: .45; }
@media (hover: hover) and (pointer: fine) {
  #screen-title.land .tt-coin-slot.has-action:hover > .tt-coin-meta { opacity: 0; visibility: hidden; }
  #screen-title.land .tt-coin-slot:hover > .tt-burn-btn,
  #screen-title.land .tt-coin-slot:hover > .tt-unburn { opacity: 1; pointer-events: auto; }
  #screen-title.land .tt-coin-slot:hover > .tt-burn-btn:disabled { opacity: .45; }
  /* coin grows a little and gives a small shake; the svg keeps its own rarity glow */
  #screen-title.land .tt-coin-card .tt-haul-item:hover { animation: tt-coin-wobble .5s ease-in-out both; }
}
@keyframes tt-coin-wobble {
  0%   { transform: scale(1) rotate(0); }
  18%  { transform: scale(1.08) rotate(-5deg); }
  36%  { transform: scale(1.1) rotate(4deg); }
  54%  { transform: scale(1.1) rotate(-3deg); }
  72%  { transform: scale(1.1) rotate(2deg); }
  100% { transform: scale(1.1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  #screen-title.land .tt-coin-card .tt-haul-item:hover { animation: none; transform: scale(1.1); }
}

/* ---------- dialog: backdrop + framed glass panel ---------- */
/* z-index 61: the fixed "Next run buffs" panel (#tt-buff-panel, z-index 60) used to sit on top of
   this dialog and hide the Burn / Cancel buttons on phones. Still under the 100+ overlays. */
#tt-burn-dialog {
  z-index: 61;
  background: radial-gradient(ellipse at 50% 45%, rgba(40,18,6,.55), rgba(6,5,4,.86) 70%);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
#tt-burn-dialog .tt-sheet-card {
  position: relative; width: min(27rem, 100%); padding: 22px 24px 20px;
  max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); overflow-y: auto; overscroll-behavior: contain;
  color: var(--mb-ink);
  background: linear-gradient(160deg, rgba(42,34,28,.97), rgba(16,14,12,.98) 60%);
  border: 1px solid var(--mb-hair); border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255,235,190,.05), inset 0 1px 0 rgba(255,235,190,.1),
              0 0 0 1px rgba(0,0,0,.6), 0 18px 46px rgba(0,0,0,.6), 0 0 60px rgba(255,110,30,.12);
}
/* gold corner ticks on the frame */
#tt-burn-dialog .tt-sheet-card::before {
  content: ""; position: absolute; inset: 6px; border-radius: 10px; pointer-events: none;
  background:
    linear-gradient(var(--mb-gold), var(--mb-gold)) top left / 14px 1px no-repeat,
    linear-gradient(var(--mb-gold), var(--mb-gold)) top left / 1px 14px no-repeat,
    linear-gradient(var(--mb-gold), var(--mb-gold)) top right / 14px 1px no-repeat,
    linear-gradient(var(--mb-gold), var(--mb-gold)) top right / 1px 14px no-repeat,
    linear-gradient(var(--mb-gold), var(--mb-gold)) bottom left / 14px 1px no-repeat,
    linear-gradient(var(--mb-gold), var(--mb-gold)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--mb-gold), var(--mb-gold)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--mb-gold), var(--mb-gold)) bottom right / 1px 14px no-repeat;
  opacity: .55;
}
#tt-burn-dialog #tt-burn-title {
  margin: 0 0 12px; padding-bottom: 10px;
  font: 600 18px/1.2 "Cinzel Lore", Georgia, serif; letter-spacing: .1em; text-transform: uppercase;
  color: #f0d58a; text-shadow: 0 2px 0 #120c06, 0 0 16px rgba(255,140,50,.35);
  background: linear-gradient(90deg, rgba(245,197,66,.7), rgba(255,120,40,.35) 45%, transparent) bottom left / 100% 1px no-repeat;
}
#tt-burn-dialog #tt-burn-lead { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: var(--mb-muted); }

/* ---------- radio options: framed rows, gold-ember selection ---------- */
#tt-burn-dialog .tt-burn-choices { gap: 8px; margin: 0 0 16px; font-size: 13.5px; }
#tt-burn-dialog .tt-burn-choices .tt-burn-choice {
  align-items: center; gap: 12px; padding: 11px 14px; min-height: 48px;
  border: 1px solid var(--mb-hair2); border-radius: 10px;
  background: rgba(255,250,240,.03); color: var(--mb-muted); line-height: 1.35;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
#tt-burn-dialog .tt-burn-choices .tt-burn-choice strong {
  font: 600 13.5px/1.2 "Cinzel Lore", Georgia, serif; letter-spacing: .04em; color: var(--mb-gold-hi); margin-right: 2px;
}
#tt-burn-dialog .tt-burn-choice input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: none; margin: 0; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(240,200,120,.6); background: rgba(8,8,10,.55); cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#tt-burn-dialog .tt-burn-choice input[type="radio"]:checked {
  border-color: var(--mb-gold);
  background: radial-gradient(circle, #fff3c4 0 2px, #f5c542 3px 4.5px, rgba(8,8,10,.55) 5.5px);
  box-shadow: 0 0 8px rgba(255,150,50,.65);
}
#tt-burn-dialog .tt-burn-choices .tt-burn-choice:not(.is-blocked):hover {
  border-color: var(--mb-hair); background: rgba(255,200,120,.06);
}
#tt-burn-dialog .tt-burn-choices .tt-burn-choice:has(input:checked) {
  border-color: rgba(245,197,66,.85); color: var(--mb-ink);
  background: linear-gradient(90deg, rgba(245,197,66,.15), rgba(255,120,40,.05));
  box-shadow: inset 0 0 0 1px rgba(245,197,66,.22), 0 0 18px rgba(255,130,40,.16);
}
#tt-burn-dialog .tt-burn-choices .tt-burn-choice:has(input:focus-visible) {
  outline: 2px solid var(--mb-gold); outline-offset: 2px;
}
#tt-burn-dialog .tt-burn-choices .tt-burn-choice.is-blocked { opacity: .5; }
#tt-burn-dialog .tt-burn-choices .tt-burn-choice.is-blocked:hover { border-color: var(--mb-hair2); background: rgba(255,250,240,.03); }
#tt-burn-dialog .tt-burn-choice.is-blocked input[type="radio"] { cursor: not-allowed; border-color: rgba(240,200,120,.25); }
#tt-burn-dialog .tt-burn-choices .tt-burn-choice em { color: #ff9a7a; letter-spacing: .02em; }

/* ---------- actions: gold "Burn for benefit" + glass Cancel ---------- */
#tt-burn-dialog .tt-keep-actions { gap: 10px; margin-top: 0; align-items: center; }
#tt-burn-dialog .tt-keep-actions > .btn {
  flex: 1 1 auto; min-height: 46px; padding: 0 18px; border-radius: 9px;
  font: 600 15px/1 "Cinzel Lore", Georgia, serif; letter-spacing: .06em;
}
#tt-burn-dialog #tt-burn-confirm {
  flex-grow: 2;
  --btn-top: rgba(255,250,225,.6); --btn-face: #ffcf5a; --btn-bot: #d9861c; --btn-ink: #2a1804;
  border-color: rgba(255,225,160,.85) !important;
  box-shadow: inset 0 0 14px rgba(255,200,100,.45), inset 0 1px 0 rgba(255,255,255,.5), 0 4px 16px rgba(255,120,30,.28), 0 2px 6px rgba(0,0,0,.5);
}
#tt-burn-dialog #tt-burn-confirm:not(:disabled):hover {
  box-shadow: inset 0 0 18px rgba(255,210,120,.6), inset 0 1px 0 rgba(255,255,255,.55), 0 0 22px rgba(255,130,40,.5), 0 2px 6px rgba(0,0,0,.5);
}
#tt-burn-dialog #tt-burn-confirm:disabled { opacity: .5; cursor: not-allowed; filter: saturate(.6); }
#tt-burn-dialog #tt-burn-cancel {
  --btn-top: rgba(255,240,210,.12); --btn-face: rgba(255,250,240,.07); --btn-bot: rgba(255,250,240,.03); --btn-ink: var(--mb-ink);
  border-color: var(--mb-hair) !important;
  box-shadow: inset 0 1px 0 rgba(255,235,190,.12), 0 4px 12px rgba(0,0,0,.4);
}
#tt-burn-dialog #tt-burn-cancel:not(:disabled):hover { border-color: rgba(245,197,66,.75) !important; filter: brightness(1.12); }
#tt-burn-dialog .tt-keep-actions > .btn:focus-visible { outline: 2px solid var(--mb-gold); outline-offset: 3px; }

/* ---------- phones ---------- */
@media (max-width: 620px) {
  #tt-burn-dialog .tt-sheet-card { padding: 18px 16px 16px; }
  #tt-burn-dialog #tt-burn-title { font-size: 16px; }
  #tt-burn-dialog #tt-burn-lead { font-size: 14px; }
  #tt-burn-dialog .tt-keep-actions > .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #tt-burn-dialog .tt-burn-choices .tt-burn-choice,
  #tt-burn-dialog .tt-burn-choice input[type="radio"] { transition: none; }
}

/* J-1012-TYPING-DEV-REFINE: the museum panel stays inside the viewport.
   The rarity grid scrolls. The save block and Open control stay on screen. */
@media (min-width: 1101px) {
  #screen-title.land .tt-museum {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    scroll-margin: 24px;
    padding: 14px 22px 12px;
    overflow: hidden;
  }
  #screen-title.land .tt-museum > h2 { margin: 0 0 6px; }
  #screen-title.land .tt-museum > .tt-museum-lead { margin: 0 0 6px; }
  #screen-title.land #tt-museum-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 0 8px;
  }
  #screen-title.land .tt-rarity-section { margin-bottom: 10px; }
  #screen-title.land #museum-keep,
  #screen-title.land #tt-code-form { flex: 0 0 auto; }
  #screen-title.land #museum-keep.tt-keep { margin-top: 0; }
  #screen-title.land #tt-code-form { margin-top: 10px; padding-top: 8px; }
}
@media (min-width: 1101px) and (max-height: 980px) {
  #screen-title.land #museum-keep .tt-keep-qr svg { width: 112px; height: 112px; }
  #screen-title.land #museum-keep.tt-keep { padding: 10px; column-gap: 12px; }
}