/* Approved DOM1 My Loot v2, scoped chrome. */

.tsf-inv {
      --bg: #06070b;
      --bg-2: #0a0d16;
      --panel: rgba(16, 19, 36, 0.88);
      --panel-2: rgba(19, 24, 44, 0.92);
      --text: #eef1ff;
      --muted: #adb4d4;
      --soft: #7b83ab;
      --purple: #a968ff;
      --purple-2: #7245f5;
      --cyan: #2bd7ff;
      --green: #6bff92;
      --gold: #ffc75b;
      --red: #ff6288;
      --line: rgba(160, 116, 255, .22);
      --container: 1340px;
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --shadow: 0 28px 72px rgba(0,0,0,.46);
    }
.tsf-inv * { box-sizing: border-box; }
.tsf-inv,.tsf-inv { margin: 0; padding: 0; }
.tsf-inv {
      min-height: 100vh;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 16%, rgba(159, 79, 255, .18), transparent 24%),
        radial-gradient(circle at 88% 68%, rgba(43, 215, 255, .12), transparent 22%),
        linear-gradient(180deg, #111111 0%, #090b11 8%, #06070b 100%);
    }
.tsf-inv {
      min-height: 100vh;
      overflow: hidden;
      position: relative;
      background:
        linear-gradient(90deg, rgba(140,74,255,.08) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 84%, rgba(43,215,255,.07) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.015) 0 1px, transparent 1px 94px);
    }
.tsf-inv::before,.tsf-inv::after {
      content: "";
      position: absolute;
      pointer-events: none;
      filter: blur(72px);
      opacity: .9;
    }
.tsf-inv::before {
      width: 420px; height: 420px; left: -140px; top: 120px;
      background: radial-gradient(circle, rgba(155,75,255,.28), transparent 74%);
    }
.tsf-inv::after {
      width: 420px; height: 420px; right: -140px; bottom: 90px;
      background: radial-gradient(circle, rgba(43,215,255,.18), transparent 76%);
    }
.tsf-inv .tsf-inv-container { width: min(calc(100% - 48px), var(--container)); margin: 0 auto; }
.tsf-inv .tsf-inv-hero { padding: 74px 0 28px; }
.tsf-inv .tsf-inv-eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      margin-bottom: 18px; color: var(--cyan); font-size: 12px; font-weight: 800;
      letter-spacing: .26em; text-transform: uppercase;
    }
.tsf-inv .tsf-inv-eyebrow::before {
      content: ""; width: 40px; height: 1px;
      background: linear-gradient(90deg, rgba(43,215,255,0), rgba(43,215,255,1));
    }
.tsf-inv .tsf-inv-hero-head { display: flex; justify-content: space-between; align-items: end; gap: 26px; }
.tsf-inv h1 { margin: 0; font-size: clamp(54px, 8vw, 96px); line-height: .95; font-weight: 950; letter-spacing: -.045em; }
.tsf-inv .tsf-inv-accent {
      background: linear-gradient(90deg, #ffffff 0%, #ead2ff 50%, #9d67ff 100%);
      -webkit-background-clip: text; background-clip: text; color: transparent;
    }
.tsf-inv .tsf-inv-hero-copy p { margin: 16px 0 0; max-width: 920px; font-size: 18px; line-height: 1.68; color: var(--muted); }
.tsf-inv .tsf-inv-hero-label { text-align: right; white-space: nowrap; padding-bottom: 12px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .16em; }
.tsf-inv .tsf-inv-layout { display: grid; grid-template-columns: 320px 1fr; gap: 26px; padding-bottom: 28px; }
.tsf-inv .tsf-inv-panel {
      position: relative; border-radius: var(--radius-xl); overflow: hidden;
      border: 1px solid rgba(160, 116, 255, .2);
      background: linear-gradient(135deg, rgba(17,21,39,.94), rgba(5,9,20,.95));
      box-shadow: var(--shadow), 0 0 0 1px rgba(161, 113, 255, .06);
    }
.tsf-inv .tsf-inv-panel::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(90deg, rgba(169,104,255,.08), transparent 24%, transparent 76%, rgba(43,215,255,.06));
    }
.tsf-inv .tsf-inv-panel-inner { position: relative; z-index: 1; padding: 24px; }
.tsf-inv .tsf-inv-stash { display: grid; gap: 18px; align-content: start; }
.tsf-inv .tsf-inv-crate-card { text-align: center; padding: 18px; border-radius: 22px; background: rgba(8,10,18,.72); border: 1px solid rgba(255,255,255,.05); }
.tsf-inv .tsf-inv-crate-img-wrap {
      position: relative; border-radius: 22px; padding: 20px; overflow: hidden; margin-bottom: 16px;
      background: radial-gradient(circle at 50% 38%, rgba(46, 222, 255, .14), transparent 42%), linear-gradient(180deg, rgba(13,17,32,.96), rgba(6,9,18,.96));
      border: 1px solid rgba(255,255,255,.06);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 0 40px rgba(112, 65, 241, .14);
    }
.tsf-inv .tsf-inv-crate-img-wrap::after { content:""; position:absolute; inset:auto 14% 14px 14%; height:16px; filter: blur(16px); background: radial-gradient(circle, rgba(72,201,255,.36), transparent 74%); }
.tsf-inv .tsf-inv-chest-img { width: 100%; max-width: 220px; height: auto; position: relative; z-index: 1; }
.tsf-inv .tsf-inv-crate-title { margin: 0 0 6px; font-size: 28px; font-weight: 900; }
.tsf-inv .tsf-inv-crate-sub { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.tsf-inv .tsf-inv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tsf-inv .tsf-inv-stat { padding: 14px; border-radius: 18px; background: rgba(10,13,24,.75); border: 1px solid rgba(255,255,255,.06); }
.tsf-inv .tsf-inv-stat-label { display:block; font-size:11px; text-transform: uppercase; letter-spacing: .16em; color: var(--soft); margin-bottom: 6px; }
.tsf-inv .tsf-inv-stat strong { font-size: 22px; }
.tsf-inv .tsf-inv-login-card { display:flex; gap:14px; align-items:center; padding: 16px; border-radius: 18px; background: linear-gradient(90deg, rgba(89,49,178,.26), rgba(16,31,63,.42)); border: 1px solid rgba(255,255,255,.06); }
.tsf-inv .tsf-inv-avatar { width: 52px; height: 52px; border-radius: 16px; display:grid; place-items:center; font-weight:900; font-size:24px; background: linear-gradient(135deg, rgba(140,95,255,.9), rgba(43,215,255,.6)); box-shadow: 0 12px 30px rgba(111,63,238,.22); }
.tsf-inv .tsf-inv-login-meta strong { display:block; font-size:18px; }
.tsf-inv .tsf-inv-login-meta span { color: var(--muted); }
.tsf-inv .tsf-inv-main { display: grid; gap: 22px; }
.tsf-inv .tsf-inv-undecided { min-width:0; }
.tsf-inv .tsf-inv-decision-actions { display:flex;flex-wrap:wrap;gap:8px;margin-top:12px; }
.tsf-inv .tsf-inv-decision-actions .tsf-inv-btn { flex:1;min-width:0;padding:10px; }
.tsf-inv .tsf-inv-decision-actions button:disabled { opacity:.55;cursor:wait; }
.tsf-inv .tsf-inv-scrap-value { font-size:13px;margin:8px 0; }
.tsf-inv .tsf-inv-decision-feedback:not(:empty) { padding:12px 0; }
.tsf-inv .tsf-inv-decision-feedback button { margin:8px; }
.tsf-inv .tsf-inv-pagination { display:flex;flex-wrap:wrap;gap:12px;margin-top:18px; }
.tsf-inv .tsf-inv-btn {
      flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding: 13px 14px;
      border-radius: 14px; text-decoration:none; font-weight: 900; font-size: 14px; cursor:pointer;
      border:1px solid rgba(255,255,255,.08); color:#fff; background: rgba(255,255,255,.05);
    }
.tsf-inv .tsf-inv-btn.tsf-inv-primary { background: linear-gradient(90deg, rgba(115,72,238,.95), rgba(168,102,255,.95)); border-color: rgba(169,104,255,.34); box-shadow: 0 16px 32px rgba(101,58,219,.18); }
.tsf-inv .tsf-inv-empty-grid { display:grid; grid-template-columns: 300px 1fr; gap: 22px; }
.tsf-inv .tsf-inv-empty-vault {
      border-radius: 22px; padding: 20px; background: rgba(8,10,18,.8); border: 1px solid rgba(255,255,255,.06); display:grid; place-items:center;
    }
.tsf-inv .tsf-inv-empty-vault-inner {
      width: 100%; min-height: 280px; border-radius: 22px; border: 1px dashed rgba(255,255,255,.1);
      display:grid; place-items:center; background: linear-gradient(180deg, rgba(11,13,25,.96), rgba(7,9,18,.98)); text-align:center; padding: 24px;
    }
.tsf-inv .tsf-inv-empty-vault-inner img { width: 170px; opacity: .6; filter: grayscale(.1) brightness(.92); }
.tsf-inv .tsf-inv-empty-vault-inner strong { display:block; margin-top: 16px; font-size: 24px; }
.tsf-inv .tsf-inv-empty-vault-inner p { margin: 8px 0 0; max-width: 220px; color: var(--muted); line-height: 1.6; }
.tsf-inv .tsf-inv-empty-copy { display:grid; gap: 16px; align-content:start; }
.tsf-inv .tsf-inv-empty-card { padding: 18px; border-radius: 20px; background: rgba(8,10,18,.8); border: 1px solid rgba(255,255,255,.06); }
.tsf-inv .tsf-inv-empty-card h3 { margin:0 0 10px; font-size: 22px; }
.tsf-inv .tsf-inv-empty-card p,.tsf-inv .tsf-inv-empty-card li { color: var(--muted); line-height: 1.65; }
.tsf-inv .tsf-inv-empty-card ul { margin: 12px 0 0; padding-left: 18px; }
@container tsf-inventory-surface (max-width: 1120px) {
.tsf-inv .tsf-inv-layout { grid-template-columns: 1fr; }
.tsf-inv .tsf-inv-empty-grid { grid-template-columns: 1fr; }
    }
@container tsf-inventory-surface (max-width: 760px) {
.tsf-inv .tsf-inv-container { width: min(calc(100% - 28px), var(--container)); }
.tsf-inv .tsf-inv-hero { padding-top: 54px; }
.tsf-inv .tsf-inv-hero-head { flex-direction: column; align-items: start; }
.tsf-inv .tsf-inv-hero-label { text-align:left; padding-bottom:0; }
.tsf-inv .tsf-inv-panel-inner { padding: 18px; }
    }
  
/* Existing MyLoot details renderer, adapted to the approved stash geometry. */
.tsf-inv.tsf-inv{container:tsf-inventory-surface / inline-size;width:100%;max-width:none;margin:0;box-sizing:border-box;min-height:100svh;background:linear-gradient(90deg,rgba(140,74,255,.08),transparent 16%,transparent 84%,rgba(43,215,255,.07)),repeating-linear-gradient(90deg,#ffffff04 0 1px,transparent 1px 94px),radial-gradient(circle at 12% 16%,rgba(159,79,255,.18),transparent 24%),radial-gradient(circle at 88% 68%,rgba(43,215,255,.12),transparent 22%),linear-gradient(180deg,#111 0%,#090b11 8%,#06070b 100%)}
.tsf-inv .tsf-inv-container{position:relative;z-index:1}
.tsf-inv .tsf-inv-panel-inner{box-sizing:border-box;min-width:0}
.tsf-inv .tsf-inv-main,.tsf-inv .tsf-inv-layout>*,.tsf-inv .tsf-inv-hero-copy,.tsf-inv .tsf-inv-login-meta{min-width:0}
.tsf-inv .tsf-inv-login-card{margin-block:18px}.tsf-inv .tsf-inv-avatar{flex-shrink:0;overflow:hidden}.tsf-inv .tsf-inv-avatar img{display:block;width:52px;height:52px;margin:0;object-fit:cover}
.tsf-inv .tsf-inv-login-meta strong,.tsf-inv .tsf-inv-login-meta span{overflow-wrap:anywhere}
.tsf-inv .tsf-inv-chest-img{display:block;max-width:220px;width:100%;height:auto;object-fit:contain;object-position:center;margin:auto;aspect-ratio:auto}
.tsf-inv .tsf-inv-crate-img-wrap{min-height:200px;display:grid;place-items:center}
.tsf-inv .tsf-my-loot__section{margin:0;padding:0;border-radius:28px;background:linear-gradient(135deg,rgba(17,21,39,.94),rgba(5,9,20,.95));border:1px solid rgba(160,116,255,.2);box-shadow:var(--shadow)}
.tsf-inv .tsf-my-loot__section-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:0 0 18px}
.tsf-inv .tsf-my-loot__section-head h2{margin:0;font-size:28px;line-height:1.2;color:#eef1ff;font-family:inherit}
.tsf-inv .tsf-my-loot__count{padding:10px 12px;font-size:11px;letter-spacing:.12em;flex-shrink:0}
.tsf-inv .tsf-inv-section-intro{font-size:13px;line-height:1.6;color:#adb4d4;margin:0 0 18px}
.tsf-inv .tsf-my-loot__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.tsf-inv .tsf-my-loot__slot{margin:0;padding:14px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,rgba(10,12,22,.96),rgba(8,10,18,.94));border:1px solid #ffffff0f;box-sizing:border-box;min-width:0}
.tsf-inv .tsf-my-loot__slot.is-common{box-shadow:0 0 0 1px #9ca3af35}
.tsf-inv .tsf-my-loot__slot.is-rare{box-shadow:0 0 0 1px #2bd7ff42,0 0 34px #2bd7ff1f}
.tsf-inv .tsf-my-loot__slot.is-epic{box-shadow:0 0 0 1px #a968ff42,0 0 34px #844fff24}
.tsf-inv .tsf-my-loot__slot.is-legendary{box-shadow:0 0 0 1px #ffc75b47,0 0 36px #ffc75b1f}
.tsf-inv .tsf-my-loot__slot-shell{border:0;background:none;box-shadow:none;border-radius:18px;transform:none;min-width:0}
.tsf-inv .tsf-my-loot__slot:hover .tsf-my-loot__slot-shell,.tsf-inv .tsf-my-loot__slot[open] .tsf-my-loot__slot-shell{transform:none;box-shadow:none}
.tsf-inv .tsf-my-loot__slot-frame{aspect-ratio:auto;min-height:180px;box-sizing:border-box;padding:42px 20px 20px;border:1px dashed #ffffff14;border-radius:18px;background:linear-gradient(180deg,#0e111ffc,#080a12fc);margin-bottom:14px}
.tsf-inv .tsf-my-loot__slot-media{height:150px;width:100%;max-width:150px;margin:auto;background:none;border:0}
.tsf-inv .tsf-my-loot__slot-media img{width:100%;height:150px;object-fit:contain;margin:0}
.tsf-inv .tsf-my-loot__slot-badges{inset:10px 10px auto;align-items:start;justify-content:start;flex-wrap:wrap;gap:8px}
.tsf-inv :is(.tsf-loot-badge,.tsf-loot-rarity){padding:7px 9px;font-size:10px;white-space:normal;max-width:100%;overflow-wrap:anywhere}
.tsf-inv .tsf-my-loot__slot-footer{padding:0;background:none;min-height:0;gap:4px}
.tsf-inv .tsf-my-loot__slot-name{font-size:19px;line-height:1.3;font-weight:900;color:#eef1ff;overflow-wrap:anywhere}
.tsf-inv .tsf-my-loot__slot-case{font-size:14px;line-height:1.5;color:#adb4d4;white-space:normal;overflow-wrap:anywhere}
.tsf-inv .tsf-inv-inspect-hint{font-size:12px;color:#b993f9;margin-top:10px;display:block}
.tsf-inv .tsf-inv-history-state{display:none}
/* Open explicitly with native summary, avoiding clipped hover panels and viewport spill. */
.tsf-inv .tsf-my-loot__inspect{display:none!important;position:static!important;inset:auto!important;width:100%;box-sizing:border-box;opacity:1;transform:none;pointer-events:auto;padding:12px 0 0;margin-top:12px;background:none;border:0;border-top:1px solid #ffffff14;box-shadow:none;transition:none}
.tsf-inv .tsf-my-loot__slot[open] .tsf-my-loot__inspect{display:block!important}
.tsf-inv .tsf-my-loot__inspect-meta dd{overflow-wrap:anywhere;white-space:pre-wrap}
.tsf-inv [data-inventory-status="fulfilled"] .tsf-my-loot__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tsf-inv [data-inventory-status="fulfilled"] .tsf-my-loot__slot{padding:16px;border-radius:20px}
.tsf-inv [data-inventory-status="fulfilled"] .tsf-my-loot__slot-shell{display:grid;grid-template-columns:84px minmax(0,1fr);gap:14px;align-items:center}
.tsf-inv [data-inventory-status="fulfilled"] .tsf-my-loot__slot-frame{width:84px;min-height:84px;height:84px;padding:0;margin:0;border:0}
.tsf-inv [data-inventory-status="fulfilled"] .tsf-my-loot__slot-media,.tsf-inv [data-inventory-status="fulfilled"] .tsf-my-loot__slot-media img{height:84px}
.tsf-inv [data-inventory-status="fulfilled"] .tsf-my-loot__slot-badges{display:none}
.tsf-inv [data-inventory-status="fulfilled"] .tsf-inv-history-state{display:block;color:#9dffba;font-size:12px}
.tsf-inventory-page :where(main,.wp-block-group,.wp-block-post-content,.entry-content,.entry,.content-area,.site-content):has(.tsf-inv){max-width:none;width:100%;margin-inline:0!important;padding-inline:0!important}
.tsf-inventory-page main:has(.tsf-inv),.tsf-inventory-page main .wp-block-group:has(.tsf-inv){margin-block:0!important;padding-block:0!important}
.tsf-inventory-page main:has(.tsf-inv){background:#06070b}
.tsf-inventory-page main:has(.tsf-inv) .wp-block-post-title{color:#eef1ff}
@container tsf-inventory-surface (max-width:1120px){.tsf-inv .tsf-my-loot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container tsf-inventory-surface (max-width:760px){.tsf-inv .tsf-my-loot__grid,.tsf-inv [data-inventory-status="fulfilled"] .tsf-my-loot__grid{grid-template-columns:1fr}.tsf-inv .tsf-my-loot__section-head{flex-wrap:wrap}.tsf-inv .tsf-my-loot__slot-name{font-size:18px}.tsf-inv .tsf-inv-empty-vault-inner img{max-width:100%}}
@media(prefers-reduced-motion:reduce){.tsf-inv *,.tsf-inv *:before,.tsf-inv *:after{animation:none!important;transition:none!important}}


.tsf-inv .tsf-my-loot__slot{transition:border-color .18s ease}
.tsf-inv .tsf-my-loot__slot:hover{border-color:rgba(169,104,255,.34)}
@media(prefers-reduced-motion:reduce){.tsf-inv .tsf-my-loot__slot{transition:none!important}}