/* ==========================================================================
   Lives: the new-fighter card, the fallen fighter's stone, Past Lives      owner: P0-6
   Paper cards beside the fighter (the camera frames them in the open sand: camera.js), a chunky marble
   stone in plain words for the fallen, a wall of little marble tablets for Past Lives.
   ========================================================================== */
/* shared: stat tiles (new fighter and death) */
.rb-stats,.death-stats{margin:0;width:100%;display:grid;gap:10px}
.rb-stats div,.death-stats div{
  min-width:0;display:grid;justify-items:center;align-content:start;gap:3px;padding:8px 6px 10px;text-align:center;
  background:var(--paper-2);border:var(--line-xs,2.5px) solid var(--ink);border-radius:14px;box-shadow:inset 0 2px 0 rgba(255,255,255,.65);
}
/* the weight pass: these tiles only show numbers, so a lighter outline and no drop (the drop is for what you press) */
.rb-stats .ic,.death-stats .ic{width:32px;height:32px;margin-bottom:1px}
.rb-stats dt,.death-stats dt{font:var(--w-strong) var(--t-label)/1.2 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.rb-stats dd,.death-stats dd{margin:0;font:400 var(--t-btn)/1.05 var(--f-display);color:var(--ink);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.panel>.ribbon:first-child{position:absolute;top:-19px;left:18px;margin:0 14px}

/* ---------- the new fighter (the same card every life; only the Life badge changes) ---------- */
#scr-rebirth{background:linear-gradient(90deg,rgba(42,26,46,.2) 0%,rgba(42,26,46,0) 48%)}
#scr-rebirth .screen-inner{max-width:1200px;display:grid}
.reveal{position:relative;width:min(500px,100%);display:grid;gap:14px;padding:30px 24px 22px}
.rb-name{margin:0;font:400 clamp(34px,3.6vw,46px)/1 var(--f-display);color:var(--ink);text-wrap:balance}
.rb-class{margin:0;font:var(--w-body) var(--t-lead)/1.4 var(--f-ui);color:var(--ink-2)}
.rb-class b{font:400 var(--t-btn)/1.2 var(--f-display);color:var(--ink)}
.rb-class small{font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink-3);margin-left:4px}
.rb-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.rb-stats dd.small{font-size:var(--t-name-s)}
.rb-passive{margin:0;display:flex;align-items:flex-start;gap:9px;font:var(--w-body) var(--t-lead)/1.4 var(--f-ui);color:var(--ink-2)}
.rb-passive .ic{width:26px;height:26px;margin-top:-2px}
.rb-passive b{font-weight:var(--w-strong);color:var(--gold-ink)}
.reveal .actions{margin-top:2px}

/* ---------- death: a marble stone and the record beside it, the fallen fighter in the open sand ---------- */
/* the dim is the shared backdrop's 'dead' state (nav.css .backdrop): it stays dark under the Shop and Past Lives too */
#scr-death{background:none}
#scr-death .screen-inner{max-width:1200px}
.death-wrap{width:fit-content;max-width:100%;display:grid;grid-template-columns:250px minmax(0,440px);gap:22px;align-items:center}
.death-side .actions{flex-wrap:nowrap}
.death-side .actions .btn.big{padding:0 26px}
/* Play again and Shop are equal partners: same height, same width */
.death-side .actions .btn{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap;font-size:var(--t-h);padding:0 16px}
.stele{
  position:relative;display:grid;justify-items:center;gap:7px;padding:80px 16px 28px;text-align:center;
  background:linear-gradient(180deg,#fffdf8 0%,#f3ece0 55%,#ddd1bd 100%);
  border:var(--line) solid var(--ink);border-radius:125px 125px 18px 18px/105px 105px 18px 18px;
  box-shadow:inset 0 4px 0 #fff,inset 0 -7px 0 rgba(120,90,60,.16),var(--drop);
  font:var(--w-strong) var(--t-body)/1.3 var(--f-ui);color:#6b5649;text-shadow:0 1px 0 #fff;
  /* the stone drops into place a beat after the screen opens (a rare moment: it can take half a second) */
  animation:stele-in .5s var(--pop) .12s backwards;
}
@keyframes stele-in{from{transform:translateY(-34px) rotate(-4deg);opacity:0}45%{opacity:1}}
.stele::after{content:"";position:absolute;left:10px;right:10px;bottom:10px;height:3px;border-radius:2px;background:rgba(120,90,60,.18)}
.stele .st-wreath{position:absolute;top:12px;left:50%;width:60px;height:60px;transform:translateX(-50%)}
.stele .hl{font:var(--w-strong) var(--t-caption)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:#85695a}
.stele .ln{overflow-wrap:anywhere;text-wrap:balance}
.stele .ln.big{font:400 var(--t-display)/1 var(--f-display);color:var(--ink);margin-bottom:4px}
.death-side{position:relative;min-width:0;display:grid;gap:14px;padding:30px 24px 22px}
.death-title{margin:0;font:400 clamp(30px,3.2vw,42px)/1.02 var(--f-display);color:var(--ink);text-wrap:balance}
.death-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
/* coins won: gold Lilita with an ink stroke, like the coin chip (gold-lo on paper-2 was 2.2:1) */
.death-stats dd.gold{color:var(--gold);-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}
.death-note{margin:0;font:var(--w-body) var(--t-body)/1.4 var(--f-ui);color:var(--ink-2)}
.death-note b{font-weight:var(--w-strong);color:var(--enemy)}

/* ---------- Past Lives: a wall of little marble tablets ---------- */
#scr-lineage{background:linear-gradient(180deg,rgba(240,214,164,.95),rgba(226,186,128,.97))}
#scr-lineage .screen-inner{max-width:var(--menu-col,1180px);margin:0 auto}
.lin-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin:12px 0 28px}
.lin-head>div{display:grid;gap:4px}
/* the weight pass: the same title and plain subtitle line as the Armory's header (the column they share) */
.lin-head h2{
  margin:6px 0 0;font:400 var(--t-title)/1 var(--f-display);
  color:#fff;-webkit-text-stroke:7px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);
}
.lin-sum{
  justify-self:start;margin:4px 0 0;
  font:var(--w-body) var(--t-body)/1.4 var(--f-ui);color:var(--ink-2);font-variant-numeric:tabular-nums;
}
.lin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:20px 18px}
.mini{
  position:relative;display:grid;justify-items:center;align-content:start;gap:4px;padding:54px 12px 16px;text-align:center;
  background:linear-gradient(180deg,#fffdf8 0%,#f3ece0 55%,#ddd1bd 100%);
  border:var(--line) solid var(--ink);border-radius:95px 95px 16px 16px/72px 72px 16px 16px;
  box-shadow:inset 0 4px 0 #fff,var(--drop);color:#6b5649;text-shadow:0 1px 0 #fff;
}
.mini .m-wreath{position:absolute;top:9px;left:50%;width:42px;height:42px;transform:translateX(-50%)}
.mini .m-vita{font:var(--w-strong) var(--t-label)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:#85695a}
.mini .m-line>span{white-space:nowrap}
.mini .m-name{font:400 var(--t-btn)/1.1 var(--f-display);color:var(--ink);overflow-wrap:anywhere}
.mini .m-line{font:var(--w-strong) var(--t-caption)/1.4 var(--f-ui);color:var(--ink-2);text-shadow:none}
/* no past lives yet: the whole row, an empty dashed stone waiting for the first name, and one line on what it is for */
.lin-empty{
  grid-column:1/-1;justify-self:start;display:flex;align-items:center;gap:22px;max-width:640px;margin:0;padding:18px 24px 18px 18px;
  border:var(--line) solid var(--ink);border-radius:var(--r-panel);background:var(--g-paper);box-shadow:var(--lip),var(--drop);
  font:var(--w-body) var(--t-lead)/1.4 var(--f-ui);color:var(--ink-2);
}
.lin-empty p{margin:0;max-width:40ch;text-wrap:pretty}
.lin-empty b{font-weight:var(--w-strong);color:var(--ink)}
.mini.ghost{flex:none;width:150px;padding:48px 10px 18px;border-style:dashed;box-shadow:inset 0 4px 0 #fff;background:linear-gradient(180deg,#fffdf8 0%,#efe6d6 100%)}
.mini.ghost .m-wreath{filter:grayscale(1);opacity:.45}
.mini.ghost .m-name{color:var(--ink-3)}
.lin-foot{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.lin-foot p{margin:0;font:var(--w-strong) var(--t-caption)/1.4 var(--f-ui);color:var(--ink-2)}

@media (max-height:760px) and (min-width:721px){
  .reveal{gap:11px;padding-top:28px}
  .rb-name{font-size:var(--t-display)}
  .rb-stats .ic{width:26px;height:26px}
  .rb-stats dd{font-size:var(--t-name)}
}
@media (max-width:720px),(max-aspect-ratio:4/5){
  #scr-rebirth,#scr-death{background:none}
  #scr-rebirth .screen-inner,#scr-death .screen-inner{margin:auto auto 0;max-width:600px}
  .reveal{width:100%;gap:11px;padding:26px 16px 16px}
  .rb-name{font-size:var(--t-btn-l)}
  .rb-class{font-size:var(--t-body);line-height:1.4}
  .rb-class b{font-size:var(--t-name)}
  .rb-stats{gap:7px}
  .rb-stats div{padding:6px 3px 7px;border-radius:12px;border-width:2.5px}
  .rb-stats .ic{width:24px;height:24px}
  .rb-stats dt{font-size:var(--t-micro)}
  .rb-stats dd{font-size:var(--t-name)}
  .rb-stats dd.small{font-size:var(--t-tag)}
  .rb-passive{font-size:var(--t-body)}
  .rb-passive .ic{width:22px;height:22px}
  .reveal .actions .btn{flex:1}
  .death-wrap{width:100%;grid-template-columns:minmax(0,1fr);gap:0;justify-items:center}
  .stele{
    z-index:1;width:min(250px,76%);margin-bottom:-24px;padding:52px 12px 32px;gap:3px;font-size:var(--t-caption);
    border-radius:125px 125px 14px 14px/80px 80px 14px 14px;
  }
  .stele .st-wreath{top:8px;width:42px;height:42px}
  .stele .hl{font-size:var(--t-label)}
  .stele .ln.big{font-size:var(--t-h);margin-bottom:2px}
  .death-side{width:100%;gap:11px;padding:34px 16px 16px}
  .death-side>.ribbon:first-child{display:none}
  .death-title{font-size:var(--t-btn-l)}
  .death-stats{gap:7px}
  .death-stats div{padding:6px 3px 7px;border-width:2.5px;border-radius:12px}
  .death-stats .ic{width:24px;height:24px}
  .death-stats dt{font-size:var(--t-micro)}
  .death-stats dd{font-size:var(--t-name)}
  .death-note{font-size:var(--t-caption);line-height:1.4}
  .death-side .actions .btn.big{flex:1}
  .lin-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px}
  .mini{padding:44px 8px 12px}
  .mini .m-wreath{width:32px;height:32px}
  .mini .m-name{font-size:var(--t-name)}
  .mini .m-line{font-size:var(--t-caption)}
  .lin-head h2{-webkit-text-stroke:6px var(--ink);text-shadow:0 4px 0 var(--ink)}
  .death-stats dd.gold{-webkit-text-stroke:3.5px var(--ink)}
  .lin-empty{flex-direction:column;text-align:center;gap:14px;padding:16px 16px 18px;justify-self:stretch}
  .mini.ghost{width:130px;padding:40px 8px 14px}
}

/* ---- P0-6 additions (results, victory, rebirth ceremony) go below ---- */
/* P0-2: with the fighter strip added, the card stays compact on a phone so the fighter still shows above it:
   tighter gaps, the four numbers as icon-and-value tiles, and the favorite line left to the weapon strip's star */
@media (max-width:720px),(max-aspect-ratio:4/5){
  #scr-rebirth .reveal{gap:8px;padding-top:24px}
  #scr-rebirth .rb-stats div{grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:5px;row-gap:1px;padding:5px 3px 6px}
  #scr-rebirth .rb-stats .ic{width:20px;height:20px;margin:0}
  #scr-rebirth .rb-stats dt{grid-row:2;grid-column:1/-1}
  #scr-rebirth .rb-stats dd{font-size:var(--t-name)}
}
@media (max-width:720px) and (max-height:920px){
  #scr-rebirth .rb-class{display:none}
}
/* UI audit: the stone's drop-in rests in photo mode and for reduced motion */
.shot .stele{animation:none}
@media (prefers-reduced-motion:reduce){ .stele{animation:none} }

/* ---------- death in beats (docs/research/game-ui.md §2.6; ui/death.js sequence) ---------- */
.death-medals{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:9px}
.death-medals:empty{display:none}
.dm-medal{
  min-width:0;display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;row-gap:2px;align-items:center;
  padding:8px 10px 9px 8px;border:var(--line-s) solid var(--ink);border-radius:14px;background:linear-gradient(180deg,#fffdf6,#f3e3c2);
  box-shadow:inset 0 2px 0 #fff,0 3px 0 var(--ink);transform:rotate(var(--r,0deg));
}
.dm-medal:nth-child(1){--r:-1.6deg}.dm-medal:nth-child(2){--r:1.1deg}.dm-medal:nth-child(3){--r:-.7deg}
.dm-medal .ic{grid-row:1/span 2;width:32px;height:32px}
.dm-medal b{font:400 var(--t-name)/1 var(--f-display);color:var(--ink);overflow-wrap:anywhere}
.dm-medal small{font:var(--w-strong) var(--t-label)/1.2 var(--f-ui);color:var(--ink-3)}
.dm-medal.gold{background:linear-gradient(180deg,#fff6cf,#f2cf6e)}
.death-stats .purse.tick dd{animation:purse-tick .16s var(--pop)}
@keyframes purse-tick{from{transform:scale(1.18)}}
.death-next{display:grid;gap:7px}
.death-next:empty{display:none}
.dn-buy,.dn-best{display:flex;align-items:center;gap:8px;min-width:0;font:var(--w-strong) var(--t-body)/1.3 var(--f-ui);color:var(--ink-2)}
.dn-buy .ic,.dn-best .ic{flex:none;width:22px;height:22px}
.dn-buy b{font-weight:var(--w-strong);color:var(--ink)}
.dn-best b{font-weight:var(--w-strong);color:var(--ink)}
.dn-best.new b{color:var(--laurel-lo)}
.dn-bar{position:relative;flex:1 1 48px;min-width:40px;max-width:130px;height:9px;overflow:hidden;border-radius:999px;border:2px solid var(--ink);background:var(--paper-2)}
.dn-bar>i{position:absolute;left:0;top:0;bottom:0;background:var(--g-gold)}
#btn-shop2.pulse{animation:shop-call 1.3s ease-in-out 2.6s 2}
#scr-death.seq-done #btn-shop2.pulse{animation-delay:.4s}
@keyframes shop-call{0%,100%{box-shadow:inset 0 3px 0 #fff,var(--drop)}50%{box-shadow:inset 0 3px 0 #fff,0 0 0 5px var(--gold-hi),var(--drop)}}
/* the beats: each part comes in on its own beat; the buttons from 1.2 s (hidden until then, so a click skips instead) */
#scr-death.seq .death-title{animation:seq-in .34s var(--pop) .3s backwards}
#scr-death.seq .dm-medal{animation:medal-in .32s var(--pop) backwards}
#scr-death.seq .dm-medal:nth-child(1){animation-delay:.6s}
#scr-death.seq .dm-medal:nth-child(2){animation-delay:.72s}
#scr-death.seq .dm-medal:nth-child(3){animation-delay:.84s}
#scr-death.seq .death-stats{animation:seq-in .3s var(--pop) .95s backwards}
#scr-death.seq .death-next{animation:seq-in .3s var(--pop) 2.3s backwards}
#scr-death.seq .death-note{animation:seq-in .3s var(--out) 2.45s backwards}
#scr-death.seq .death-side .actions{animation:seq-show .3s var(--pop) 1.2s backwards}
#scr-death.seq-done :is(.death-title,.dm-medal,.death-stats,.death-next,.death-note,.death-side .actions){animation:none}
@keyframes seq-in{from{opacity:0;transform:translateY(8px)}}
@keyframes medal-in{from{opacity:0;transform:scale(.6) rotate(-8deg)}}
@keyframes seq-show{from{opacity:0;visibility:hidden;transform:translateY(8px)}}
@media (max-width:720px),(max-aspect-ratio:4/5){
  .death-medals{gap:6px}
  .dm-medal{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:6px 4px 7px;border-width:2.5px;border-radius:12px}
  .dm-medal .ic{grid-row:auto;width:22px;height:22px}
  .dm-medal b{font-size:var(--t-name-s);max-width:100%}
  .dm-medal small{font-size:var(--t-micro)}
  .dn-buy,.dn-best{font-size:var(--t-caption);gap:6px}
  .dn-buy .ic,.dn-best .ic{width:18px;height:18px}
}
@media (prefers-reduced-motion:reduce){ .death-stats .purse.tick dd,#btn-shop2.pulse{animation:none} }

/* ---------- typography and states (2026-10-21): the life's best moments read like the stat tiles under them, the icon
   over the words, so a short label never breaks after one word ("Biggest / hit, a crit" beside a 32 px icon) ---------- */
.dm-medal{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;padding:7px 6px 8px}
.dm-medal .ic{grid-row:auto;width:28px;height:28px}
.dm-medal b{max-width:100%}
.dm-medal small{text-wrap:balance}

/* the death screen's quiet third way: a new fighter (Play again goes straight into a match) */
.death-alt{all:unset;box-sizing:border-box;justify-self:center;margin-top:10px;padding:6px 12px;border-radius:999px;cursor:pointer;
  font:var(--w-strong) var(--t-caption)/1 var(--f-ui);color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.death-alt:hover{color:var(--ink)}
.death-alt:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-off)}

/* a short phone (Safari shows 664 px of a 390 px-wide iPhone): the stone, the record and its numbers tighten so Rematch
   and the Armory are on screen without scrolling, even with the damage list and the medals */
@media (max-width:600px) and (max-height:760px){
  #scr-death{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}
  .stele{padding:36px 12px 26px;margin-bottom:-20px}
  .stele .st-wreath{top:5px;width:30px;height:30px}
  .death-side{gap:7px;padding-top:24px}
  .death-title{font-size:var(--t-h);line-height:1.08}
  .dm-medal{padding:4px 4px 5px;row-gap:1px}
  .dm-medal .ic{width:20px;height:20px}
  .death-stats div{padding:4px 3px 5px}
  .death-stats .ic{width:20px;height:20px}
  #death-dmg{gap:5px}
  #death-dmg .dmg-list{row-gap:2px}
  .death-next{gap:4px}
  .death-note{line-height:1.3}
}