.rift-view {
  --rift-bg:#20242a;
  --rift-card:#2a3036;
  --rift-line:#555954;
  --rift-ink:#f1ebdd;
  --rift-dim:#c6c0b1;
  --rift-gold:#e7c587;
  display:flex;
  flex-direction:column;
  flex:1 1 0;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:var(--rift-bg);
  color:var(--rift-ink);
  font-family:inherit;
}
.rift-view[hidden]{display:none!important}
.rift-view svg,.rift-launch svg{width:22px;height:22px;flex:none}
.rift-view button,.rift-launch{font:inherit;cursor:pointer;touch-action:manipulation}
.rift-view button{min-height:42px;border:1px solid var(--rift-line);border-radius:8px;padding:7px 12px;background:#383e43;color:var(--rift-ink);font-weight:650}
.rift-view button:disabled{opacity:.52;cursor:default}
.rift-view button:focus-visible,.rift-launch:focus-visible{outline:2px solid #8ae2d0;outline-offset:3px}
.rift-view .rift-primary{background:#e4c78f;border-color:#e4c78f;color:#211b13}
.rift-header{
  flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;
  padding:calc(6px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 6px max(12px,env(safe-area-inset-left));
  background:#292d31;border-bottom:1px solid var(--rift-line);font-weight:750;
}
.rift-header button{justify-self:start;display:flex;align-items:center;gap:7px;background:none;border:0;padding-inline:8px;font-size:20px}
.rift-header button span{font-size:12px}
#riftWallet{display:flex;align-items:center;justify-self:end;gap:5px;color:var(--rift-gold);font-size:13px;white-space:nowrap}
#riftWallet svg{width:19px;height:19px}
#riftWallet > span{color:var(--rift-dim);font-size:11px}
.rift-scroll{flex:1;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;container:rift / inline-size}
.rift-main{width:min(100%,1140px);margin:auto;padding:clamp(12px,3vw,28px) max(12px,env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.rift-hud{display:grid;grid-template-columns:minmax(170px,2fr) repeat(4,minmax(75px,1fr));gap:8px;margin:0 0 14px}
.rift-level,.rift-stat{min-width:0;display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--rift-line);border-radius:10px;background:var(--rift-card)}
.rift-level>b{font-size:21px;color:var(--rift-gold);white-space:nowrap}
.rift-level>div{flex:1;min-width:0}
.rift-level strong,.rift-level small{display:block;white-space:nowrap}
.rift-level strong{font-size:13px}
.rift-level small,.rift-stat span{font-size:11px;color:var(--rift-dim)}
.rift-stat svg{width:16px;height:16px;color:#a5b99c}
.rift-stat strong{margin-left:auto;font-size:16px}
.rift-meter{height:6px;overflow:hidden;border-radius:6px;background:#3e4c55}
.rift-meter i{display:block;height:100%;background:#9ab194;border-radius:inherit}
.rift-meter.xp{margin-top:4px;height:4px}
.rift-meter.xp i{background:#d9b77f}
.rift-meter.foe i{background:#bb7465}
.rift-banner,.rift-arena,.rift-launch{
  background-image:linear-gradient(90deg,#22252bed 0%,#22252bc7 40%,#27272b19 95%),url('images/rift-hunt/court.svg');
  background-size:cover;
  background-position:center;
}
.rift-banner{border:1px solid #3b504f;border-radius:10px;padding:clamp(15px,4vw,35px);min-height:170px}
.rift-banner small,.rift-section-title small{color:#e2c692;letter-spacing:.14em;font-size:10px;font-weight:800}
.rift-banner h1{font-family:"Songti SC","Noto Serif SC",serif;font-size:clamp(26px,5vw,48px);line-height:1.15;margin:9px 0 10px;letter-spacing:.03em}
.rift-banner p{margin:0 0 16px;max-width:38ch;color:#d2dfdd;font-size:clamp(12px,2vw,15px);line-height:1.6}
.rift-section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:22px 0 10px}
.rift-section-title :is(h1,h2){font-size:clamp(17px,3vw,24px);margin:0}
.rift-section-title>span{color:var(--rift-dim);font-size:12px}
.rift-zones,.rift-items{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.rift-zone,.rift-items article{padding:12px;border:1px solid var(--rift-line);border-radius:10px;background:var(--rift-card);min-width:0}
.rift-zone{border-top:2px solid var(--zone,#78c6ba)}
.rift-zone-index{font-size:21px;font-weight:850;color:var(--zone,#78c6ba);margin-bottom:4px}
.rift-zone small,.rift-items small{color:var(--rift-dim);font-size:11px}
.rift-zone h3,.rift-items h3{font-size:15px;margin:3px 0}
.rift-zone p,.rift-items p{color:var(--rift-dim);margin:4px 0 10px;font-size:11px}
.rift-zone button,.rift-items button{width:100%;font-size:12px}
.rift-zone button:not(:disabled){border-color:#578576;color:#d3e6c5}
.rift-view [data-color=bronze]{--zone:#e7b782}
.rift-view [data-color=violet]{--zone:#c3a8f6}
.rift-view [data-color=red]{--zone:#f18b85}
.rift-shop{display:grid;gap:14px}
.rift-shop-row header,.rift-supplies,.rift-supplies>div{display:flex;align-items:center;gap:8px}
.rift-shop-row header{margin-bottom:7px}
.rift-shop-row header svg,.rift-supplies svg{color:var(--rift-gold)}
.rift-shop-row h2{margin:0;font-size:15px}
.rift-shop-row header span{font-size:11px;color:var(--rift-dim);margin-left:auto;text-align:right}
.rift-items p span{color:#c3d4af;white-space:nowrap}
.rift-supplies{justify-content:space-between;background:var(--rift-card);border:1px solid var(--rift-line);border-radius:10px;padding:11px}
.rift-supplies small{display:block;margin-top:4px;color:var(--rift-dim);font-size:11px}
.rift-supplies button{flex:none}
.rift-battle{--zone:#8af0d6;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(310px,1fr);gap:14px;align-items:start}
.rift-arena{
  display:grid;grid-template-rows:auto auto 1fr auto;min-height:360px;min-width:0;gap:6px;position:relative;isolation:isolate;
  background-image:linear-gradient(#20242bd0,#22252b10 42%,#24262736 70%,#22252baf),url('images/rift-hunt/court.svg');
  border:1px solid var(--rift-line);border-radius:15px;overflow:hidden;padding:13px;
}
.rift-arena-label{display:flex;justify-content:space-between;gap:6px;color:#e0ebea;font-size:12px}
.rift-foe{text-align:center}
.rift-foe h2{font-size:clamp(17px,3vw,25px);margin:2px 0 5px}
.rift-foe-hp{display:flex;align-items:center;justify-content:center;gap:8px;color:#fff0ea;font-size:11px}
.rift-foe-hp .rift-meter{width:min(50%,210px)}
/* Two sprites share a tiled floor. Shapes retain the pixel grid at every size. */
.rift-sprites {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: clamp(18px,9cqi,105px);
  align-self: end;
  padding-bottom: 5px;
}
.rift-fighter { position: relative; display: grid; justify-items: center; align-items: end; gap: 0; }
.rift-fighter img {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(65px,12cqi,138px);
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(2px 3px 0 #2525298a);
}
.rift-fighter::before { content:""; position:absolute; width:86%; height:10px; border-radius:50%; background:#26282b8a; bottom:15px; }
.rift-fighter span { z-index:1; padding:2px 6px; color:#e2d5bd; background:#25272bd9; border-radius:3px; font-size:10px; }
.rift-monster.rift-hit img { animation:rift-impact .26s steps(4); }
.rift-fighter.rift-fallen img { opacity:.36; transform:translateY(8px) rotate(-8deg); }
@keyframes rift-impact { 25%{transform:translateX(8px);filter:brightness(1.5)} 65%{transform:translateX(-3px)} }
.rift-intent{justify-self:center;align-self:end;border:1px solid #577973;border-radius:100px;padding:6px 12px;background:#343e38;color:#e4e8d8;font-size:12px;font-weight:750}
.rift-intent.heavy{background:#4c3734;border-color:#a26f60;color:#f4d0c1}
.rift-combat-panel{padding:14px;background:var(--rift-card);border:1px solid var(--rift-line);border-radius:14px}
.rift-health>div:first-child{display:flex;justify-content:space-between;margin-bottom:7px;font-size:13px}
.rift-health span{color:var(--rift-dim)}
.rift-focus{display:flex;align-items:center;gap:7px;margin:8px 0;font-size:12px;color:var(--rift-dim)}
.rift-focus i{height:8px;width:14px;border-radius:3px;background:#3d5057}
.rift-focus i.on{background:#9ee5d2}
.rift-feedback{font-size:12px;line-height:1.5;color:var(--rift-dim);min-height:1.5em;margin:8px 0 0}
.rift-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.rift-actions button{min-width:0;display:grid;grid-template-columns:20px minmax(0,1fr);gap:3px 6px;align-content:center;text-align:left;padding:8px}
.rift-actions button:first-child{background:#445448;border-color:#798b74}
.rift-actions button svg{width:17px;height:17px;color:#d4d9be}
.rift-actions button b{font-size:13px}
.rift-actions small{grid-column:1/-1;color:var(--rift-dim);font-weight:500;font-size:10px;line-height:1.3}
.rift-finish{display:flex;gap:7px;flex-wrap:wrap}
.rift-retreat{margin-top:7px}
.rift-view .rift-retreat{background:transparent;border-color:transparent;color:var(--rift-dim);font-size:11px;min-height:32px;padding-inline:0}
.rift-launch{width:100%;display:flex;align-items:center;gap:13px;padding:clamp(13px,3vw,22px);margin:0 0 12px;text-align:left;border-radius:14px;border:1px solid #4b6967;color:#eef9f6}
.rift-launch .rift-launch-emblem{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#7be5c91a;color:#a2f5db;border:1px solid #7be5c95c;flex:none}
.rift-launch b,.rift-launch small{display:block}
.rift-launch b{font-size:18px;margin-bottom:4px}
.rift-launch small{font-size:12px;color:#d3e6e3}
.rift-launch strong{margin-left:auto;white-space:nowrap;color:#f1d49c;font-size:13px}
@media(max-width:740px){
  .rift-battle{grid-template-columns:minmax(0,1fr);gap:8px}
  .rift-arena{min-height:clamp(175px,35svh,295px);padding:9px}
  
  .rift-hud{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:9px}
  .rift-level{grid-column:1/-1}
  .rift-stat{padding:7px 5px;gap:4px}
  .rift-stat strong{font-size:13px}
  .rift-zones,.rift-items{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rift-banner{min-height:0;padding:18px}
  .rift-combat-panel{padding:10px}
  .rift-section-title{margin-top:15px}
}
@media(max-width:400px){.rift-header button span,#riftWallet>span{display:none}.rift-stat svg{width:13px;height:13px}.rift-launch strong{font-size:11px}}
@media(max-height:500px) and (orientation:landscape){.rift-arena{min-height:240px}.rift-main{padding-top:8px}.rift-header{padding-block:2px}.rift-hud{margin-bottom:6px}}
@media(prefers-reduced-motion:reduce){.rift-monster.rift-hit img{animation:none}}
@media (min-width: 550px) and (max-height: 500px) and (orientation: landscape) {
  .rift-battle { grid-template-columns: minmax(0,1fr) minmax(245px,.92fr); gap: 8px; }
  .rift-arena { min-height: 248px; }
  .rift-feedback { min-height: 1.5em; margin: 6px 0; }
  .rift-combat-panel { padding: 9px; }
  .rift-actions button { min-height: 42px; padding: 5px 6px; }
}

/* Shop art and controls size to the panel, including browser zoom and iPad Split View. */
.rift-items .rift-item {
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 8px;
  gap: 6px;
  border-color: #555954;
}
.rift-item-art {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 70px;
  border: 1px solid #635f50;
  border-radius: 5px;
  background: #3b3b34;
}
.rift-item[data-tier="2"] .rift-item-art { background:#3f4541; border-color:#687769; }
.rift-item[data-tier="3"] .rift-item-art { background:#3e3d4a; border-color:#736d86; }
.rift-item[data-tier="4"] .rift-item-art { background:#494035; border-color:#87724f; }
.rift-item-art img { width: 62px; height: 62px; image-rendering: pixelated; }
.rift-item-art span { position:absolute; top:4px; left:5px; color:#e8d6af; font-size:10px; font-weight:700; }
.rift-items .rift-item-copy h3 { overflow-wrap:anywhere; margin: 2px 0; }
.rift-items .rift-item-copy p { margin: 3px 0; }
.rift-item > button { min-height:44px; padding-inline:6px; overflow-wrap:anywhere; }
.rift-supplies { flex-wrap:wrap; }
.rift-header > div { font-size:15px; white-space:nowrap; }
.rift-view .rift-actions button { min-height:44px; }
.rift-launch { border-color:#776c57; color:#f4ecda; }
.rift-launch .rift-launch-emblem { color:#e6c68b; border-color:#977f5d; background:#413931; }
.rift-launch small { color:#ded7c6; }
@container rift (max-width: 740px) {
  .rift-zones,.rift-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .rift-hud { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .rift-level { grid-column:1/-1; }
  .rift-stat { padding:7px 5px; gap:4px; }
  .rift-stat strong { font-size:13px; }
}
@container rift (max-width: 395px) {
  .rift-items { grid-template-columns:minmax(0,1fr); }
  .rift-items .rift-item {
    grid-template-columns: 60px minmax(0,1fr);
    grid-template-rows: auto auto;
    align-items:center;
    gap:3px 8px;
  }
  .rift-item-art { grid-row: 1/3; min-height:60px; }
  .rift-item-art img { width:54px; height:54px; }
  .rift-item > button { grid-column:2; min-height:44px; }
  .rift-item-art span { top:3px; left:3px; }
  .rift-shop-row header span { max-width:55%; }
}
@container rift (max-width: 740px) {
  .rift-battle { grid-template-columns:minmax(0,1fr); }
  .rift-arena { min-height:clamp(168px,30svh,288px); }
  .rift-fighter img { width:clamp(59px,17svh,110px); }
  .rift-combat-panel { padding:10px; }
  .rift-retreat { margin-top:3px; }
}
@media (min-aspect-ratio: 5/4) and (max-height: 560px) {
  @container rift (min-width: 530px) {
    .rift-battle { grid-template-columns:minmax(0,1fr) minmax(235px,.92fr); }
    .rift-arena { min-height:clamp(176px,70svh,270px); }
    .rift-fighter img { width:clamp(54px,22svh,96px); }
  }
}
@media (max-height: 650px) and (orientation: portrait) {
  .rift-scroll.in-battle .rift-main { padding-top:8px; }
  .rift-combat-panel .rift-feedback { margin-top:5px; }
  .rift-actions button { padding-block:5px; }
}
body:has(.rift-view:not([hidden])) .lex-sync-notice { top:auto; bottom:8px; }

@media (max-height: 650px) and (orientation: portrait) {
  @container rift (max-width: 420px) {
    .rift-arena { min-height: 0; grid-template-rows: auto auto auto auto; gap: 3px; padding: 6px; }
    .rift-arena-label { font-size: 10px; }
    .rift-foe h2 { font-size: 15px; margin-block: 1px 3px; }
    .rift-fighter img { width: 52px; }
    .rift-sprites { gap: 38px; padding-bottom: 2px; }
    .rift-fighter span { font-size: 9px; }
    .rift-intent { font-size: 10px; padding: 4px 7px; }
    .rift-combat-panel { padding: 7px; }
    .rift-actions { gap: 5px; }
    .rift-actions button { padding: 5px; }
  }
}
/* Backpack: owned items, worn appearance and a separate drop catalogue. */
.rift-bag-layout { display:grid; grid-template-columns:260px minmax(0,1fr); align-items:start; gap:20px; }
.rift-paperdoll { position:sticky; top:12px; background:#25313c; border:1px solid #566674; border-radius:12px; padding:16px; min-width:0; }
.rift-avatar-stage { display:grid; place-items:center; min-height:220px; background:radial-gradient(ellipse at 50% 70%,#668c9b33,transparent 65%); border-bottom:1px solid #60778744; }
.rift-avatar { width:170px; height:200px; image-rendering:pixelated; filter:drop-shadow(0 8px 8px #06111c80); }
.rift-paperdoll h2 { text-align:center; font-size:16px; margin:12px 0; }
.rift-paperdoll h2 small { font-size:11px; color:#e8cc91; }
.rift-bag-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.rift-bag-stats span { display:grid; text-align:center; gap:3px; padding:8px 0; background:#182633; color:#a9bdca; font-size:11px; border-radius:5px; }
.rift-bag-stats b { font-size:18px; color:#eff1e8; }
.rift-worn { margin:12px 0; }
.rift-worn>div { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:7px; align-items:center; padding:9px 0; border-bottom:1px solid #52677955; }
.rift-worn span,.rift-worn small { font-size:10px; color:#a6bac8; }
.rift-worn b { font-size:12px; }
.rift-view .rift-worn button { min-height:30px; padding:3px 6px; font-size:10px; }
.rift-paperdoll .rift-supplies { padding:8px 0 0; background:none; border:none; flex-wrap:wrap; gap:8px; }
.rift-paperdoll .rift-supplies b { font-size:12px; }
.rift-paperdoll .rift-supplies small { font-size:10px; }
.rift-paperdoll .rift-supplies button { font-size:11px; width:100%; min-height:35px; }
.rift-bag-tabs { display:flex; gap:8px; margin-bottom:12px; }
.rift-bag-tabs button[aria-pressed=true] { border-color:#c7b17f; background:#63543d; color:#ffe4af; }
.rift-bag-filters { display:flex; gap:12px; justify-content:space-between; margin-bottom:12px; }
.rift-bag-filters label { display:flex; align-items:center; gap:6px; font-size:12px; color:#b8c9d4; }
.rift-bag-filters select { font:inherit; min-width:70px; max-width:160px; min-height:36px; color:#dfe7ec; background:#253341; border:1px solid #5d7283; border-radius:6px; padding:5px; }
.rift-bag-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.rift-view .rift-bag-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; position:relative; border-color:color-mix(in srgb,var(--gear-color) 60%,#253341); background:linear-gradient(145deg,#344655,#1c2835); padding:12px 6px; min-width:0; text-align:center; }
.rift-bag-item img { width:80px; height:80px; object-fit:contain; image-rendering:pixelated; filter:drop-shadow(2px 3px 0 #101b28); }
.rift-bag-item strong { font-size:12px; line-height:1.4; }
.rift-bag-item small { font-size:10px; color:#b6c8d6; }
.rift-bag-item[data-owned=false] img { opacity:.4; filter:grayscale(.7); }
.rift-view .rift-bag-item[data-equipped=true] { box-shadow:inset 0 0 0 1px #e7ce97; background:linear-gradient(145deg,#5b5543,#283641); }
.rift-bag-item[data-equipped=true] small { color:#f2d99b; }
.rift-bag-rank { position:absolute; top:7px; left:7px; color:var(--gear-color); font-size:10px; }
.rift-bag-empty { border:1px dashed #607787; border-radius:10px; text-align:center; padding:50px 15px; color:#bed0dc; }
.rift-bag-empty p { font-size:12px; margin-bottom:18px; }
.rift-item-dialog { color:#edf1ed; background:#25313e; border:1px solid #a1b3c1; border-radius:14px; width:min(390px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); overflow:auto; padding:24px; }
.rift-item-dialog::backdrop { background:#05111cbb; backdrop-filter:blur(3px); }
.rift-view .rift-dialog-close { position:absolute; right:8px; top:8px; min-height:30px; min-width:30px; font-size:22px; border:none; padding:0; background:transparent; }
.rift-detail-art { display:flex; justify-content:space-evenly; align-items:center; background:radial-gradient(ellipse,#789dad29,transparent 70%); padding:14px 0; }
.rift-detail-art img { image-rendering:pixelated; }
.rift-item-dialog h2 { font-size:23px; margin:7px 0 15px; }
.rift-item-dialog>small,.rift-item-dialog p { font-size:12px; color:#b9cbd8; }
.rift-item-dialog>.rift-primary { width:100%; margin-top:5px; }
.rift-compare { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:12px; background:#172531; border-radius:8px; }
.rift-compare span { display:flex; align-items:center; justify-content:space-between; color:#aabfcd; font-size:12px; }
.rift-compare b { color:#fff0d0; font-size:19px; }
.rift-compare strong { grid-column:1/-1; text-align:center; font-size:13px; color:#9fb8c7; }
.rift-compare [data-delta="1"] { color:#a6d5a0; }
.rift-compare [data-delta="-1"] { color:#e8a295; }
@media(max-width:900px) { .rift-bag-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .rift-bag-layout { gap:12px; grid-template-columns:220px minmax(0,1fr); } }
@media(max-width:600px) {
  .rift-bag-layout { grid-template-columns:minmax(0,1fr); }
  .rift-paperdoll { position:static; padding:12px; display:grid; grid-template-columns:105px minmax(0,1fr); column-gap:12px; }
  .rift-avatar-stage { grid-column:1; grid-row:1/4; min-height:150px; border:none; }
  .rift-avatar { width:105px; height:150px; }
  .rift-paperdoll h2 { grid-column:2; font-size:13px; margin:0 0 8px; }
  .rift-bag-stats { grid-column:2; gap:4px; }
  .rift-bag-stats span { font-size:10px; padding:5px 0; }
  .rift-bag-stats b { font-size:14px; }
  .rift-worn { grid-column:2; margin:6px 0 0; }
  .rift-worn>div { padding:5px 0; gap:4px; grid-template-columns:24px minmax(0,1fr) auto; }
  .rift-worn b { font-size:10px; }
  .rift-paperdoll .rift-supplies { grid-column:1/-1; flex-wrap:nowrap; padding-top:10px; }
  .rift-paperdoll .rift-supplies button { width:auto; }
  .rift-bag-grid { gap:7px; }
  .rift-bag-item img { width:64px; height:64px; }
  .rift-bag-item strong { font-size:10px; }
  .rift-bag-filters { gap:6px; }
  .rift-bag-filters label { font-size:10px; }
  .rift-bag-filters select { max-width:130px; font-size:11px; }
}
.rift-item-dialog { width:min(390px,calc(100vw / var(--lex-font-scale,1) - 28px)); max-height:calc(100dvh / var(--lex-font-scale,1) - 28px); }
.rift-detail-art img { max-width:45%; object-fit:contain; }
.rift-bag-filters { flex-wrap:wrap; }
.rift-bag-item img { max-width:100%; }

/* Long cumulative totals wrap inside the level card at enlarged font sizes. */
.rift-level small { white-space:normal; overflow-wrap:anywhere; line-height:1.4; }