/* ==========================================================================
   The quality-of-life bundle (2026-10-24)                            owner: the quality-of-life bundle
   Rematch (ui/rematch.js), auto-pick (ui/autopilot.js), the run history (ui/history.js).
   Loads last. The kit's own parts throughout (kit.css, base.css): ink outlines, paper, the pick ring for what is
   chosen, the one blue focus ring, key caps that hide on touch.
   ========================================================================== */

/* ---------- Rematch: its key on the button, as the loot pop-up's Wear it carries 1 (not on touch) ---------- */
.btn-rematch kbd{margin-left:2px;-webkit-text-stroke:0;font-size:var(--t-tag)}
@media (pointer:coarse){ .btn-rematch kbd{display:none} }
/* the death screen's two quiet ways to the new-fighter card, under its buttons */
.death-alts{display:flex;flex-wrap:wrap;justify-content:center;gap:0 6px;margin-top:4px}
.death-alts .death-alt{margin-top:0}
/* the victory: Keep going and Rematch as equal partners, Leave the arena the quiet way under them */
.victory .actions .btn{flex:1 1 0;min-width:0;justify-content:center;white-space:nowrap}
#scr-victory #btn-retire{margin-top:0}

/* ---------- auto-pick: the Auto button in the HUD's top-right row, the card it will take ---------- */
/* a word, as the battle speed's 1× is one; on, it stays pressed in (the press's own sink, held) and gold like the damage
   meter's button: gold alone is too close to the row's bronze to read; while a pick waits, the bar under the word fills */
#btn-auto{position:relative;overflow:hidden;font-size:15px;letter-spacing:.02em;-webkit-text-stroke:3.5px var(--ink)}
#btn-auto[aria-pressed="true"]{background:var(--g-gold);transform:translateY(3px);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -4px 0 rgba(110,60,10,.22),0 2px 0 var(--ink)}
@media (hover:hover) and (pointer:fine){
  #btn-auto[aria-pressed="true"]:hover{transform:translateY(2px);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -4px 0 rgba(110,60,10,.22),0 3px 0 var(--ink)}
}
#btn-auto[aria-pressed="true"]:active{transform:translateY(4px);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 1px 0 var(--ink)}
#btn-auto .ab-bar{position:absolute;left:9px;right:9px;bottom:6px;height:4px;border-radius:2px;background:rgba(42,26,46,.22);opacity:0}
#btn-auto .ab-bar>i{display:block;height:100%;width:calc(var(--p,0) * 100%);border-radius:inherit;background:var(--ink)}
#btn-auto.wait .ab-bar{opacity:1}
/* the card it will take: lifted, with the pick ring and a tag under it (the tag says it: the ring's gold is not a rarity) */
#cards .card.auto-pick{
  transform:perspective(900px) translateY(-10px) scale(1.03);
  box-shadow:inset 0 0 0 var(--ring) var(--rc),inset 0 0 0 calc(var(--ring) + 2px) rgba(255,255,255,.6),var(--ring-pick),0 15px 0 var(--ink);
}
#cards .card.auto-pick::after{
  content:"Auto pick";content:"Auto pick" / "";position:absolute;left:50%;bottom:-15px;z-index:6;transform:translateX(-50%);white-space:nowrap;
  padding:4px 10px 5px;border-radius:999px;border:2.5px solid var(--ink);background:var(--ink);color:#fff;font:400 var(--t-tag)/1 var(--f-display);letter-spacing:.02em;
}
#scr-draft.picking .card.auto-pick::after{display:none}
@media (max-width:720px){
  #cards .card.auto-pick{transform:translateY(-6px)}
  #cards .card.auto-pick::after{bottom:-13px;padding:3px 8px 4px;font-size:var(--t-micro)}
}
/* a tablet or a narrow window: six buttons in one row run into the round badge; two rows of three instead, the sound
   button's empty place top right where the corner one sits (nav.css .sound-top); the Stats panel opens under them */
@media (min-width:601px) and (max-width:830px){
  .ctrl-row{display:grid;grid-template-columns:repeat(3,48px);grid-auto-rows:48px}
  body:has(.sound-top) #btn-sound{grid-area:1/3}
  .stats-panel{top:calc(env(safe-area-inset-top,0px) + 184px);max-height:calc(100vh - 184px - 120px)}
}
/* phones: the column hides while the cards show (hud.css); the Auto button stays where it was in the fight, the
   other places kept empty so it does not move */
@media (max-width:600px){
  #btn-auto{font-size:13.5px;-webkit-text-stroke:3px var(--ink)}
  #btn-auto .ab-bar{left:8px;right:8px;bottom:5px}
  body[data-screen="draft"] .ctrl-row{display:flex}
  body[data-screen="draft"] .ctrl-row>:not(#btn-auto){visibility:hidden}
}
/* Settings: the four styles under the label */
.set-row.set-auto{grid-template-columns:minmax(0,1fr)}
.set-auto .seg{justify-self:start;max-width:100%}
@media (max-width:600px){ .set-auto .seg button{min-width:0;padding:0 9px} }

/* ---------- the run history: Past Lives as a chart and rows ---------- */
#lin-grid.rh{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.rh-chart{margin:0;display:grid;gap:10px;padding:14px 18px 12px}
.rh-cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 14px}
.rh-k{font:var(--w-strong) var(--t-label)/1.2 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
.rh-avg{font:var(--w-body) var(--t-caption)/1.2 var(--f-ui);color:var(--ink-2);font-variant-numeric:tabular-nums}
.rh-avg b{font-weight:var(--w-strong);color:var(--ink)}
.rh-key{white-space:nowrap}
.rh-key i{display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:3px;background:var(--gold-lo);vertical-align:-1px}
/* the plot: hairlines at every fifth round (the boss rounds), a bar per life from the left (oldest) */
.rh-plot{position:relative;height:118px;margin:0 0 18px 26px}
.rh-lines{position:absolute;inset:0;pointer-events:none}
.rh-lines>i{position:absolute;left:0;right:0;bottom:calc(var(--y) * 100%);height:1px;background:var(--hair)}
.rh-lines b{position:absolute;right:calc(100% + 7px);top:-6px;font:var(--w-strong) var(--t-micro)/1 var(--f-ui);color:var(--ink-3);font-variant-numeric:tabular-nums}
.rh-bars{position:absolute;inset:0;margin:0;padding:0;list-style:none;display:flex;align-items:stretch;gap:2px;border-bottom:1.5px solid rgba(42,26,46,.35)}
.rh-bar{position:relative;flex:1 1 0;max-width:24px;display:flex;align-items:flex-end;cursor:pointer}
.rh-bar>i{display:block;width:100%;height:calc(var(--h) * 100%);min-height:3px;border-radius:4px 4px 0 0;background:var(--player);transition:filter .12s var(--out)}
.rh-bar.free>i{background:var(--gold-lo)}
.rh-bar.hl>i{filter:brightness(1.2) saturate(1.1);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.rh-bar[data-x]::after{content:attr(data-x);position:absolute;top:calc(100% + 5px);left:0;white-space:nowrap;font:var(--w-strong) var(--t-micro)/1 var(--f-ui);color:var(--ink-3)}
.rh-bar.last[data-x]::after{left:auto;right:0}
/* the rows: a little stone with the round reached, who and with what, how it ended, where the damage came from */
.rh-list{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.rh-row{
  display:grid;grid-template-columns:62px minmax(0,1.15fr) minmax(0,1fr) minmax(0,1.45fr);grid-template-areas:"stone who end dmg";align-items:center;gap:6px 16px;
  padding:9px 14px 9px 9px;border:var(--line-s) solid var(--ink);border-radius:var(--r-tile-lg);background:var(--g-paper);box-shadow:var(--lip),var(--drop-xs);
}
.rh-row:focus-visible,html.kbd-nav .rh-row:focus{outline:var(--focus-ring);outline-offset:var(--focus-off)}
.rh-row.hl{background:linear-gradient(180deg,#fffdf6 0%,#fff3d6 100%)}
.rh-row.flash{animation:rh-flash .7s var(--out)}
@keyframes rh-flash{30%{box-shadow:var(--lip),var(--ring-pick),var(--drop-xs)}}
.rh-stone{
  grid-area:stone;position:relative;display:grid;justify-items:center;align-content:center;gap:2px;height:58px;padding-top:6px;box-sizing:border-box;
  border:2.5px solid var(--ink);border-radius:31px 31px 9px 9px/24px 24px 9px 9px;background:linear-gradient(180deg,#fffdf8 0%,#f3ece0 55%,#ddd1bd 100%);
  box-shadow:inset 0 3px 0 #fff;color:#6b5649;text-shadow:0 1px 0 #fff;
}
.rh-stone b{font:400 var(--t-h)/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.rh-stone small{font:var(--w-strong) var(--t-micro)/1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase}
.rh-row.free .rh-stone{background:linear-gradient(180deg,#fff8d6 0%,#f7e39a 60%,#e2bd5a 100%)}
.rh-wreath{width:20px;height:20px;margin-bottom:-2px}
.rh-who{grid-area:who;display:grid;gap:2px;min-width:0}
.rh-who small{font:var(--w-strong) var(--t-label)/1.1 var(--f-ui);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--ink-3)}
/* a name or a source too long for its place ends in an ellipsis; the clip sits 2 px past the text on each side, so a
   letter whose ink reaches past its box is never cut (owner, 2026-10-25: "text should never be clipped"), and the
   negative margin keeps the text where it was */
.rh-name{font:400 var(--t-name)/1.05 var(--f-display);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline:2px;margin-inline:-2px}
.rh-set{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;font:var(--w-strong) var(--t-caption)/1.3 var(--f-ui);color:var(--ink-2)}
.rh-set>span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.rh-w .ic{width:18px;height:18px}
.rh-seal{
  width:18px;height:18px;box-sizing:border-box;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--ink);
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--gc) 45%,#fff) 0 30%,var(--gc) 75%);
}
.rh-seal .ic{width:12px;height:12px}
.rh-end{grid-area:end;font:var(--w-strong) var(--t-body)/1.3 var(--f-ui);color:var(--ink-2);text-wrap:pretty}
.rh-row.free .rh-end{color:var(--ink)}
.rh-dmg{grid-area:dmg;display:flex;flex-wrap:wrap;gap:5px 6px}
.rh-src{
  display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:2px 8px 2px 4px;border-radius:999px;background:rgba(42,26,46,.06);
  font:var(--w-strong) var(--t-caption)/1.25 var(--f-ui);color:var(--ink-2);white-space:nowrap;
}
.rh-src .ic{width:18px;height:18px;flex:none}
.rh-src>span{overflow:hidden;text-overflow:ellipsis;padding-inline:2px;margin-inline:-2px}
.rh-src b{font-weight:var(--w-strong);color:var(--ink);font-variant-numeric:tabular-nums}
.rh-more{margin:0;font:var(--w-strong) var(--t-caption)/1.4 var(--f-ui);color:var(--ink-2)}
@media (max-width:900px){
  .rh-row{grid-template-columns:62px minmax(0,1fr) minmax(0,1fr);grid-template-areas:"stone who end" "stone dmg dmg"}
}
@media (max-width:600px){
  .rh-chart{padding:12px 12px 10px}
  .rh-plot{height:96px;margin-left:22px}
  .rh-bars{gap:1px}
  .rh-row{grid-template-columns:52px minmax(0,1fr);grid-template-areas:"stone who" "stone end" "dmg dmg";gap:4px 12px;padding:8px 10px 10px 8px}
  .rh-stone{height:52px}
  .rh-stone b{font-size:var(--t-name)}
  .rh-name{font-size:var(--t-name-s)}
  .rh-end{font-size:var(--t-caption)}
}
@media (prefers-reduced-motion:reduce){ .rh-row.flash{animation:none} .rh-bar>i{transition:none} }