/* Quest (forum RPG): the hero strip on posts, hero cards, shop, duels and replays. Built on the Float tokens in float.css. */
.rpg-pb { --cls: var(--accent); display: grid; gap: 4px; margin-top: 8px; padding: 6px 8px; border-radius: var(--r-md); text-decoration: none; color: inherit;
  background: linear-gradient(135deg, color-mix(in oklab, var(--cls) 12%, var(--surface-2)), var(--surface-2));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cls) 26%, var(--border));
  transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast) var(--ease-glide); }
@media (hover: hover) { .rpg-pb:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cls) 45%, var(--border)), 0 6px 16px -8px color-mix(in oklab, var(--cls) 70%, transparent); } }
.rpg-pb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rpg-top { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1; }
.rpg-lv { font: 800 11px/1 var(--font-ui); letter-spacing: .02em; padding: 3px 7px; border-radius: var(--r-pill); color: #fff;
  background: linear-gradient(135deg, var(--cls, var(--accent)), color-mix(in oklab, var(--cls, var(--accent)) 70%, #000)); box-shadow: 0 2px 6px -2px color-mix(in oklab, var(--cls, var(--accent)) 70%, transparent); }
.rpg-gear { margin-left: auto; display: flex; gap: 2px; font-size: 12px; }
.rpg-bars { display: grid; gap: 3px; }
.rpg-bar { position: relative; display: block; height: 6px; border-radius: var(--r-pill); background: color-mix(in oklab, var(--text) 10%, transparent); overflow: hidden; }
.rpg-bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; transition: width var(--t-slow) var(--ease-glide); }
.rpg-bar.hp i { background: linear-gradient(90deg, #ff5d73, #ff9b6a); }
.rpg-bar.xp i { background: linear-gradient(90deg, var(--accent), var(--accent-2, #8f7cff)); }
.rpg-pb .rpg-bar.xp { height: 4px; }
/* labelled bars on cards */
.rpg-card .rpg-bar, .rpg-fighter .rpg-bar { height: 18px; margin: 6px 0 0; }
.rpg-card .rpg-bar b, .rpg-card .rpg-bar em, .rpg-fighter .rpg-bar b, .rpg-fighter .rpg-bar em { position: absolute; top: 0; z-index: 1; font: 700 10px/18px var(--font-ui); padding: 0 8px; color: var(--text); font-style: normal; }
.rpg-card .rpg-bar b, .rpg-fighter .rpg-bar b { left: 0; }
.rpg-card .rpg-bar em, .rpg-fighter .rpg-bar em { right: 0; font-weight: 600; }

.rpg-card { --cls: var(--accent); padding: var(--s-4); display: grid; gap: var(--s-4); }
.rpg-hero { display: flex; gap: var(--s-4); align-items: center; }
.rpg-ring { --p: 0; position: relative; flex: none; padding: 5px; border-radius: 50%;
  background: conic-gradient(var(--cls) calc(var(--p) * 1%), color-mix(in oklab, var(--text) 10%, transparent) 0); }
.rpg-ring > .av { margin: 0; border-radius: 50%; box-shadow: 0 0 0 3px var(--surface-solid); }
.rpg-ring > img.av { display: block; object-fit: cover; }
.rpg-ring-lv { position: absolute; right: -4px; bottom: -4px; min-width: 28px; height: 28px; padding: 0 6px; border-radius: var(--r-pill); display: grid; place-items: center;
  font: 800 13px/1 var(--font-ui); color: #fff; background: var(--cls); box-shadow: 0 0 0 3px var(--surface-solid), 0 6px 14px -6px var(--cls); }
.rpg-who { flex: 1; min-width: 0; }
.rpg-name { font-weight: 700; font-size: 1.05rem; }
.rpg-class { font-size: 13px; margin-top: 2px; }
.rpg-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-2); }
.rpg-stat { display: grid; justify-items: center; padding: var(--s-2) 4px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.rpg-stat b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.rpg-slots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.rpg-slot { display: grid; justify-items: center; text-align: center; gap: 2px; padding: var(--s-2); border-radius: var(--r-md); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cls) 30%, var(--border)); }
.rpg-slot.empty { opacity: .55; box-shadow: inset 0 0 0 1px dashed var(--border); }
.rpg-ico { font-size: 22px; line-height: 1; }
.rpg-ico.lg { font-size: 34px; }
.rpg-act { display: flex; gap: var(--s-2); }

.rpg-tabs { display: flex; gap: 4px; padding: 4px; margin: 0 0 var(--s-4); width: max-content; max-width: 100%; overflow-x: auto; border-radius: var(--r-pill);
  background: var(--surface); box-shadow: var(--e-1), inset 0 0 0 1px var(--border); }
.rpg-tabs a { padding: 7px 14px; border-radius: var(--r-pill); text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 14px; white-space: nowrap;
  transition: background var(--t-fast) var(--ease-glide), color var(--t-fast) var(--ease-glide); }
.rpg-tabs a[aria-current] { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 12px -6px var(--accent); }
.rpg-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s-4); align-items: start; }

.rpg-daily { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0 var(--s-4) var(--s-3); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md); text-decoration: none; color: inherit; background: color-mix(in oklab, var(--accent) 12%, var(--surface-2));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent); animation: rpg-glow 2.4s var(--ease-glide) infinite alternate; }
.rpg-daily.done { animation: none; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-muted); font-size: 13px; }
.box .rpg-daily:first-child { margin-top: var(--s-3); }
@keyframes rpg-glow { to { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 60%, transparent), 0 0 18px -6px var(--accent); } }

.rpg-card + .rpg-daily { margin-top: 0; }
form > p.xs:first-child { margin-top: 0; }
.rpg-picks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); }
.rpg-pick { --cls: var(--accent); display: grid; gap: 3px; text-align: left; padding: var(--s-3); border: 0; border-radius: var(--r-md); cursor: pointer; font: inherit; color: inherit;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); transition: transform var(--t-fast) var(--ease-spring), box-shadow var(--t-fast) var(--ease-glide); }
@media (hover: hover) { .rpg-pick:not(:disabled):hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--cls), 0 8px 18px -10px var(--cls); } }
.rpg-pick.on { box-shadow: inset 0 0 0 2px var(--cls); background: color-mix(in oklab, var(--cls) 10%, var(--surface-2)); cursor: default; }

.rpg-item-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); border-top: 1px solid var(--border); }
.rpg-item-row:first-of-type { border-top: 0; }
.rpg-item-name { flex: 1; min-width: 0; display: grid; gap: 1px; justify-items: start; }
.rpg-item-acts { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.rpg-purse { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; margin: 0 0 var(--s-4); border-radius: var(--r-pill); }
.rpg-shop { list-style: none; margin: 0; padding: var(--s-4); display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s-3); }
.rpg-shop-card { display: grid; gap: 4px; justify-items: start; align-content: start; padding: var(--s-3); border-radius: var(--r-lg); animation: rpg-in var(--t-med) var(--ease-glide) both; animation-delay: calc(var(--i, 0) * 40ms); }
.rpg-shop-card.locked { opacity: .6; }
.rpg-shop-card form, .rpg-shop-card .btn, .rpg-shop-card .chip { margin-top: 6px; }
.rpg-fx { font: 700 12px/1.3 var(--font-ui); color: var(--accent); }
@keyframes rpg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }

.rpg-log, .rpg-duels, .rpg-leads { list-style: none; margin: 0; padding: 0 var(--s-4) var(--s-3); }
.rpg-log li, .rpg-duel { display: flex; justify-content: space-between; gap: var(--s-2); padding: 8px 0; border-top: 1px solid var(--border); font-size: 14px; flex-wrap: wrap; }
.rpg-log li:first-child, .rpg-duel:first-child { border-top: 0; }
.rpg-lead { display: flex; align-items: center; gap: var(--s-3); padding: 8px 0; border-top: 1px solid var(--border); animation: rpg-in var(--t-med) var(--ease-glide) both; animation-delay: calc(var(--i, 0) * 30ms); }
.rpg-lead:first-child { border-top: 0; }
.rpg-rank { width: 28px; text-align: center; font: 800 14px/1 var(--font-ui); color: var(--text-faint); }
.rpg-lead:nth-child(-n+3) .rpg-rank { color: var(--cls); }
.rpg-lead-who { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); overflow-wrap: anywhere; }
.rpg-challenge { display: grid; gap: var(--s-2); grid-template-columns: 1fr 180px auto; align-items: end; }
.rpg-challenge p { grid-column: 1 / -1; margin: 0; }

.rpg-arena { padding: var(--s-5); }
.rpg-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-4); align-items: center; }
.rpg-vs-x { font: 900 22px/1 var(--font-ui); color: var(--text-faint); letter-spacing: .06em; }
.rpg-fighter { --cls: var(--accent); position: relative; display: grid; justify-items: center; text-align: center; gap: 4px; padding: var(--s-4); border-radius: var(--r-lg);
  background: linear-gradient(160deg, color-mix(in oklab, var(--cls) 14%, var(--surface-2)), var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cls) 30%, var(--border)); }
.rpg-fighter .rpg-bar { width: 100%; }
.rpg-fighter.hit { animation: rpg-hit .32s var(--ease-spring); }
.rpg-fighter.won { box-shadow: inset 0 0 0 2px var(--cls), 0 12px 30px -16px var(--cls); }
.rpg-win { position: absolute; top: -10px; padding: 3px 10px; border-radius: var(--r-pill); font: 800 11px/1.2 var(--font-ui); color: #fff; background: var(--cls); text-transform: uppercase; letter-spacing: .06em; }
@keyframes rpg-hit { 30% { transform: translateX(-6px) rotate(-1deg); } 60% { transform: translateX(5px); } }
.rpg-rounds { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: 6px; max-height: 360px; overflow: auto; }
.rpg-round { padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: 14px; box-shadow: inset 0 0 0 1px var(--border); }
.rpg-round.side1 { margin-left: 15%; }
.rpg-round.side0 { margin-right: 15%; }
.rpg-crit { font: 800 11px/1 var(--font-ui); color: #ff6b3d; text-transform: uppercase; letter-spacing: .05em; }
.rpg-result { margin-top: var(--s-4); display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; font-size: 1.05rem; }
.rpg-rounds.playing .rpg-round { display: none; }
.rpg-rounds.playing .rpg-round.shown { display: block; animation: rpg-in var(--t-med) var(--ease-glide) both; }
.rpg-arena.playing .rpg-result, .rpg-arena.playing .rpg-win { visibility: hidden; }

.rpg-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s-2) var(--s-4); margin-bottom: var(--s-3); }
.rpg-item-admin { flex-wrap: wrap; }

@media (max-width: 760px) {
  .rpg-grid { grid-template-columns: 1fr; }
  .rpg-stats { grid-template-columns: repeat(3, 1fr); }
  .rpg-card + .rpg-daily { margin-top: 0; }
form > p.xs:first-child { margin-top: 0; }
.rpg-picks { grid-template-columns: 1fr; }
  .rpg-challenge { grid-template-columns: 1fr; }
  .rpg-vs { grid-template-columns: 1fr; }
  .rpg-vs-x { justify-self: center; }
  .rpg-round.side0, .rpg-round.side1 { margin: 0; }
  .rpg-item-row { flex-wrap: wrap; }
  .ident .rpg-pb { max-width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  .rpg-pb, .rpg-pick, .rpg-bar i { transition: none; }
  .rpg-daily, .rpg-shop-card, .rpg-lead, .rpg-fighter.hit, .rpg-rounds.playing .rpg-round.shown { animation: none; }
}