/* v105: Design Lab (design review). Variant looks are body.rv-<area>-<key>; A = today's look (+ the title fix). */

/* ---------- floor header, every variant: the title plate takes the room between Home and Hero, nothing is cut ---------- */
.hall1>.top{width:100%;max-width:420px;box-sizing:border-box}
.hall1 .top .fl{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  line-height:1.15;padding:6px 10px 7px;text-align:center;overflow:visible}
.hall1 .top .fl .flt20{display:block;max-width:100%;line-height:1.15}
.hall1 .top .fl small{display:block;max-width:100%;line-height:1.25;padding-bottom:1px;overflow:visible}
body.rv-floor-header-A .hall1>.top{align-items:center}

/* B: one slim bar pinned to the top: round Home, floor name, round hero portrait */
body.rv-floor-header-B .hall1>.top{position:absolute;top:calc(var(--safe-t,0px) + 6px);left:8px;right:8px;width:auto;max-width:none;margin:0 auto;
  align-items:center;gap:8px;padding:4px 5px;border-radius:30px;z-index:4;
  background:linear-gradient(180deg,rgba(34,20,58,.92),rgba(12,8,24,.86));border:1px solid rgba(212,175,55,.6);box-shadow:0 4px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,236,190,.15)}
body.rv-floor-header-B .hall1 .btn.nav14{width:46px;min-width:46px;height:46px;min-height:46px;padding:0;border-radius:50%}
body.rv-floor-header-B .hall1 .nav14 .nl14{display:none}
body.rv-floor-header-B .hall1 .nav14 .hpor14{width:36px;height:36px}
body.rv-floor-header-B .hall1 .nav14 .nic14{width:34px;height:34px}
body.rv-floor-header-B .hall1 .nav14 .nic14 .ic14{width:26px;height:26px}
body.rv-floor-header-B .hall1 .nav14.dot::after{top:0;right:0}
body.rv-floor-header-B .hall1 .top .fl{background:none;padding:2px 2px 3px;border-radius:0}
body.rv-floor-header-B .hall1 .top .fl .flt20{font-size:1.1rem}

/* C: the floor name on a banner, Home and Hero as round medallions under its ends */
body.rv-floor-header-C .hall1>.top{display:grid;grid-template-columns:58px minmax(0,1fr) 58px;grid-template-areas:"t t t" "h . r";row-gap:6px;column-gap:6px;align-items:center}
body.rv-floor-header-C .hall1 .top .fl{grid-area:t;padding:7px 30px 8px;border-radius:0;
  background:linear-gradient(180deg,#5a2a7a,#3a1652 60%,#2a0f3c);border-top:1.5px solid #d4af37;border-bottom:1.5px solid #d4af37;
  clip-path:polygon(0 0,100% 0,calc(100% - 16px) 50%,100% 100%,0 100%,16px 50%);box-shadow:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
body.rv-floor-header-C .hall1 .top .fl .flt20{font-size:1.25rem;color:#fff4d6;text-shadow:0 2px 0 #1a0a24}
body.rv-floor-header-C .hall1 .top .fl small{color:#f5d77a}
body.rv-floor-header-C .hall1 #hm{grid-area:h}
body.rv-floor-header-C .hall1 #hero{grid-area:r}
body.rv-floor-header-C .hall1 .btn.nav14{width:52px;min-width:52px;height:52px;min-height:52px;padding:0;border-radius:50%;justify-self:center}
body.rv-floor-header-C .hall1 .nav14 .nl14{display:none}
body.rv-floor-header-C .hall1 .nav14 .hpor14{width:38px;height:38px}
body.rv-floor-header-C .hall1 .nav14 .nic14{width:36px;height:36px}
body.rv-floor-header-C .hall1 .nav14 .nic14 .ic14{width:26px;height:26px}
body.rv-floor-header-C .hall1 .nav14.dot::after{top:1px;right:1px}

/* ---------- battle progress ---------- */
/* B: numbered stops on a gold path */
body.rv-floor-progress-B .hall1 .pips{position:relative;gap:5px;padding:2px 0}
body.rv-floor-progress-B .hall1 .pips::before{content:'';position:absolute;left:12px;right:12px;top:50%;height:4px;margin-top:-2px;border-radius:2px;z-index:0;
  background:linear-gradient(90deg,#d4af37 0 var(--pp,0%),rgba(255,255,255,.2) var(--pp,0%));box-shadow:0 1px 2px rgba(0,0,0,.6)}
body.rv-floor-progress-B .hall1 .pips i{position:relative;z-index:1;width:24px;height:24px;box-sizing:border-box;border:2px solid rgba(255,255,255,.35);background:#1b1430;color:#cfc6e6;
  font:800 .68rem/1 system-ui,sans-serif;font-style:normal}
body.rv-floor-progress-B .hall1 .pips i:empty::before{content:attr(data-n)}
body.rv-floor-progress-B .hall1 .pips i.done{background:radial-gradient(circle at 40% 35%,#fff1c2,#d4af37 60%,#8a5a16);border-color:#fff1c2;color:#2a1a08}
body.rv-floor-progress-B .hall1 .pips i.now{transform:scale(1.18);background:#3b2664;border-color:#ffd24a;color:#fff4d6;box-shadow:0 0 0 2px rgba(0,0,0,.5),0 0 10px #ffd24a}
body.rv-floor-progress-B .hall1 .pips i.mini{border-color:#c084fc}
body.rv-floor-progress-B .hall1 .pips i.boss{width:30px;height:30px;border-color:#f87171;background:#3a1020}
body.rv-floor-progress-B .hall1 .pips i .ic14,body.rv-floor-progress-C .hall1 .pips i .ic14{width:80%;height:80%;display:block}

/* C: one bar in ten pieces with "Battle n of 10" */
body.rv-floor-progress-C .hall1 .pips{position:relative;gap:3px;width:min(84vw,340px);box-sizing:border-box;padding:19px 6px 6px;border-radius:10px;
  background:linear-gradient(180deg,rgba(20,12,36,.85),rgba(8,6,16,.8));border:1px solid rgba(212,175,55,.5);box-shadow:0 2px 8px rgba(0,0,0,.45)}
body.rv-floor-progress-C .hall1 .pips::before{content:attr(data-lab);position:absolute;left:0;right:0;top:3px;text-align:center;font:900 .66rem/1.2 GameFont,Georgia,serif;letter-spacing:.08em;text-transform:uppercase;color:#ffe9b0}
body.rv-floor-progress-C .hall1 .pips i{flex:1 1 0;width:auto;height:14px;border:0;border-radius:3px;background:rgba(255,255,255,.13);box-shadow:inset 0 1px 2px rgba(0,0,0,.6);display:grid;place-items:center;overflow:visible}
body.rv-floor-progress-C .hall1 .pips i.done{background:linear-gradient(180deg,#86efac,#22c55e 55%,#14692f)}
body.rv-floor-progress-C .hall1 .pips i.now{background:linear-gradient(180deg,#fff1c2,#e3b452);box-shadow:0 0 8px #ffd24a}
body.rv-floor-progress-C .hall1 .pips i.mini:not(.done):not(.now){background:rgba(192,132,252,.35)}
body.rv-floor-progress-C .hall1 .pips i.boss{flex:1.5 1 0;background:linear-gradient(180deg,#b91c1c,#5b0f17)}
body.rv-floor-progress-C .hall1 .pips i .ic14{width:18px!important;height:18px!important}
@media (prefers-reduced-motion:no-preference){body:not(.lowpower).rv-floor-progress-C .hall1 .pips i.now{animation:rv20glow 1.6s ease-in-out infinite}}
@keyframes rv20glow{50%{box-shadow:0 0 2px #ffd24a}}

/* ---------- health, mana, XP ---------- */
.hall1 .hallbars .bic20{display:none}
/* B: slimmer bars, a drawn icon in front of each */
body.rv-floor-bars-B .hall1 .hallbars{grid-template-columns:22px minmax(0,1fr);column-gap:6px;row-gap:5px;align-items:center;width:min(78vw,320px)}
body.rv-floor-bars-B .hall1 .hallbars .bic20,body.rv-floor-bars-C .hall1 .hallbars .bic20{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#3b2664,#140c22);box-shadow:inset 0 0 0 1.5px rgba(212,175,55,.75),0 1px 3px rgba(0,0,0,.6);font-style:normal}
body.rv-floor-bars-B .hall1 .hallbars .bic20 svg,body.rv-floor-bars-C .hall1 .hallbars .bic20 svg{width:15px;height:15px;display:block}
body.rv-floor-bars-B .hall1 .hallbars .bar.tx{height:17px}
body.rv-floor-bars-B .hall1 .hallbars .bar.tx span{font-size:.74rem}
body.rv-floor-bars-B .hall1 .hallbars .bar.tx.slimxp{height:13px}
body.rv-floor-bars-B .hall1 .hallbars .bic-xp{width:18px;height:18px;justify-self:center}
body.rv-floor-bars-B .hall1 .hallbars .bic-xp svg{width:12px;height:12px}

/* C: a framed HUD: health and mana side by side, a thin XP line under both */
body.rv-floor-bars-C .hall1 .hallbars{grid-template-columns:22px minmax(0,1fr) 22px minmax(0,1fr);grid-template-rows:auto auto;column-gap:5px;row-gap:6px;align-items:center;
  width:min(90vw,360px);box-sizing:border-box;padding:7px 8px 6px;border-radius:12px;
  background:linear-gradient(180deg,rgba(34,20,58,.9),rgba(12,8,24,.86));border:1px solid rgba(212,175,55,.6);box-shadow:0 3px 10px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,236,190,.15)}
body.rv-floor-bars-C .hall1 .hallbars .bic-hp{grid-column:1;grid-row:1}
body.rv-floor-bars-C .hall1 .hallbars .bar.hp{grid-column:2;grid-row:1}
body.rv-floor-bars-C .hall1 .hallbars .bic-mp{grid-column:3;grid-row:1}
body.rv-floor-bars-C .hall1 .hallbars .bar.mp{grid-column:4;grid-row:1}
body.rv-floor-bars-C .hall1 .hallbars .bic-xp{display:none}
body.rv-floor-bars-C .hall1 .hallbars .bar.xp{grid-column:1/-1;grid-row:2;height:12px}
body.rv-floor-bars-C .hall1 .hallbars .bar.tx:not(.xp){height:20px}
body.rv-floor-bars-C .hall1 .hallbars .bar.tx:not(.xp) span{font-size:.72rem}
body.rv-floor-bars-C .hall1 .hallbars .bar.xp span{font-size:.58rem}

/* ---------- fight button ---------- */
/* B: a shorter ornate button with a big medallion on its left end and the battle number */
body.rv-floor-fight-B .hall1 #fight.fight14{position:relative;width:min(80vw,310px);max-width:310px;min-height:56px;margin:0 auto;padding:6px 16px 6px 70px;border-radius:30px;
  border:2px solid #d4af37!important;box-shadow:0 0 0 3px rgba(30,14,48,.95),0 0 0 4.5px rgba(212,175,55,.55),0 8px 18px rgba(0,0,0,.55)!important;justify-content:flex-start}
body.rv-floor-fight-B .hall1 #fight .fic14{position:absolute;left:-2px;top:50%;width:62px;height:62px;margin-top:-31px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#5b3d8a,#1d1430 75%);box-shadow:0 0 0 2px #d4af37,0 0 0 4px rgba(20,10,30,.9),0 3px 8px rgba(0,0,0,.6)}
body.rv-floor-fight-B .hall1 #fight .fic14 .ic14{width:38px;height:38px}
body.rv-floor-fight-B .hall1 #fight .fl14{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;text-align:left;min-width:0}
body.rv-floor-fight-B .hall1 #fight .fs20{font:700 .66rem/1.2 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#f5d77a;opacity:.95}
body.rv-floor-fight-B .hall1 #fight[data-k20=boss],body.rv-floor-fight-B .hall1 #fight[data-k20=mini]{--fight-bg:#6a1a3a}

/* C: a glowing gem: teal for normal fights, crimson for (mini) bosses, sea blue for waves */
body.rv-floor-fight-C .hall1 #fight.fight14{position:relative;width:min(82vw,320px);max-width:320px;min-height:58px;margin:0 auto;border-radius:16px;
  clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,14px 100%,0 50%);border:0!important;
  background-color:#0f766e!important;background-image:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 45%,rgba(0,0,0,.3)),linear-gradient(115deg,#14b8a6,#0f766e 45%,#134e4a)!important;
  background-size:100% 100%!important;box-shadow:none!important;text-transform:uppercase;letter-spacing:.02em;padding-left:22px;padding-right:22px}
body.rv-floor-fight-C .hall1 #fight[data-k20=boss],body.rv-floor-fight-C .hall1 #fight[data-k20=mini]{background-color:#991b1b!important;background-image:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 45%,rgba(0,0,0,.3)),linear-gradient(115deg,#ef4444,#991b1b 45%,#4c0519)!important}
body.rv-floor-fight-C .hall1 #fight[data-k20=wave]{background-color:#1d4ed8!important;background-image:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 45%,rgba(0,0,0,.3)),linear-gradient(115deg,#38bdf8,#1d4ed8 45%,#1e1b4b)!important}
body.rv-floor-fight-C .hall1 #fight .fl14{font-family:GameFont,Georgia,serif;font-weight:900;font-size:.98rem;letter-spacing:.02em;white-space:nowrap;text-shadow:0 2px 0 rgba(0,0,0,.45)}
body.rv-floor-fight-C .hall1 #fight .fic14{background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6)}
@media (prefers-reduced-motion:no-preference){body:not(.lowpower).rv-floor-fight-C .hall1 #fight{animation:rv20gem 1.8s ease-in-out infinite!important}}
@keyframes rv20gem{0%,100%{filter:brightness(1) drop-shadow(0 0 0 transparent)}50%{filter:brightness(1.15) drop-shadow(0 0 10px rgba(255,255,255,.35))}}

/* ---------- the chip, the compare sheet and the Options row ---------- */
.hall1>.rv20chip,.home1 .rv20chip{display:inline-flex;align-items:center;gap:6px;max-width:calc(100% - 8px);min-height:32px;padding:3px 12px;border-radius:16px;font-size:.78rem;font-weight:700;color:#fff4d6;
  background-color:#3b2664!important;border:1px solid rgba(212,175,55,.7)!important;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.rv20chip .rv20ct{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rv20chip .rv20ic{flex:none}
body.rv-floor-header-B .hall1>.rv20chip{margin-top:calc(var(--safe-t,0px) + 58px)}

#rv20ring{position:absolute;z-index:2147480000;pointer-events:none;border-radius:14px;border:2px dashed #ffd24a;box-shadow:0 0 0 2000px rgba(0,0,0,.18),0 0 14px rgba(255,210,74,.7)}
.rv20sheet{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:2147480001;max-width:440px;margin:0 auto;box-sizing:border-box;padding:10px 10px 8px;border-radius:16px;
  color:#f3ecff;background:linear-gradient(180deg,#2a1a48,#160f28);border:1.5px solid #d4af37;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.rv20sheet.attop{bottom:auto;top:calc(8px + env(safe-area-inset-top))}
.rv20h{position:relative;padding-right:40px;margin-bottom:8px}
.rv20h b{display:block;font:900 1rem/1.2 GameFont,Georgia,serif;color:#ffe9b0}
.rv20h small{display:block;font-size:.72rem;color:#cfc6e6;line-height:1.3}
.rv20h .rv20x{position:absolute;right:0;top:-2px;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border-radius:50%}
.rv20opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.rv20opts .rv20opt{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:84px;padding:6px 7px;text-align:left;border-radius:11px;line-height:1.15;border:1.5px solid rgba(212,175,55,.35)!important}
.rv20opts .rv20opt.sel{border-color:#ffd24a!important;box-shadow:0 0 0 1px #ffd24a,0 0 12px rgba(255,210,74,.45)!important}
.rv20opt .rv20key{font:900 1rem/1 GameFont,Georgia,serif;font-style:normal;color:#ffd24a}
.rv20opt b{font-size:.78rem;color:#fff4d6}
.rv20opt small{font-size:.64rem;color:#cfc6e6;line-height:1.2}
.rv20act,.rv20no{display:flex;gap:6px;margin-top:8px}
.rv20act .rv20vote{flex:1;min-height:44px;font-size:.9rem}
.rv20act .rv20none{flex:none;min-height:44px;padding:0 10px}
.rv20no input{flex:1;min-width:0;min-height:40px;padding:0 10px;border-radius:10px;border:1px solid rgba(212,175,55,.5);background:#120b20;color:#fff;font-size:16px}
.rv20no .rv20send{flex:none;min-height:40px}
.rv20foot{display:block;text-align:center;margin-top:6px;font-size:.66rem;color:#a99cc8}
.rv20badge{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:9px;background:#ef4444;color:#fff;font:800 .66rem/1.4 system-ui,sans-serif;font-style:normal;vertical-align:middle}
.rv20mine{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.rv20mine small{flex-basis:100%}
.rv20mine .btn.small{font-size:.68rem;min-height:32px;padding:2px 8px;text-align:left}
@media (max-width:380px){.rv20opt small{font-size:.6rem}.rv20opts .rv20opt{min-height:78px}}
.rel summary .shipt{display:block;font-size:.72em;opacity:.65;font-weight:400}