/* Official game artwork is composed in CSS; localized copy remains accessible HTML. */
.ts-lootbar-slot{margin:32px 0;clear:both;min-width:0}
.ts-lootbar,.ts-lootbar *{box-sizing:border-box}
html.ts-platform[data-section=guides] .btn.btn-primary{color:#fff}
html.ts-platform[data-section=guides] .note a{text-decoration:underline;text-underline-offset:3px}
html.ts-platform[data-section=codes] .btnSmall.cta{background:#e5ece6;color:#173c34;border:1px solid #bdcec1;box-shadow:none}
html .ts-lootbar{position:relative;isolation:isolate;display:flex;align-items:center;width:100%;min-width:0;max-width:100%;height:300px;overflow:hidden;padding:26px 40px;background:#173c34;color:#fff9e9;border:0;border-radius:6px;text-decoration:none;box-shadow:none;font-family:system-ui,"Malgun Gothic",sans-serif;line-height:1.35;text-align:left}
html .ts-lootbar:visited{color:#fff9e9}
.ts-lootbar-art{position:absolute;inset:0;z-index:-2;overflow:hidden}
html .ts-lootbar-world{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 48%}
.ts-lootbar-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,40,32,.97) 0%,rgba(13,40,32,.89) 31%,rgba(13,40,32,.5) 49%,rgba(13,40,32,.04) 75%)}
html .ts-lootbar-hero{position:absolute;z-index:1;right:5%;top:8px;height:400px;width:auto;max-width:none;object-fit:contain}
.ts-lootbar-copy{position:relative;z-index:2;min-width:0;width:56%;max-width:580px}
html .ts-lootbar-logo{display:block;width:170px;height:auto;margin:0 0 9px;max-width:100%}
html .ts-lootbar-label{display:block;color:#dbe5d8;font-size:11px;font-weight:500;margin:0 0 9px;letter-spacing:.02em}
html .ts-lootbar-title{display:block;margin:0;font-size:clamp(26px,2.8vw,34px);font-weight:750;letter-spacing:-.03em;line-height:1.22;color:#fff9e9;word-break:keep-all}
html .ts-lootbar-title span{display:block}
html .ts-lootbar-cta{display:inline-flex;align-items:center;gap:24px;min-height:44px;margin-top:17px;padding:10px 18px;border:1px solid #e6bc64;border-radius:4px;background:#f4d389;color:#19352a;font-size:14px;font-weight:700;transition:background-color 160ms ease}
html .ts-lootbar-cta i{font-style:normal;font-size:20px;line-height:1}
html .ts-lootbar-note{display:block;margin:8px 0 0;color:#50615b;font-size:12px;line-height:1.5}
html .ts-lootbar:focus-visible{outline:3px solid #a97a24;outline-offset:4px}
@media(hover:hover){html .ts-lootbar:hover{color:#fff9e9}html .ts-lootbar:hover .ts-lootbar-cta{background:#ffe5ae}}
@media(max-width:900px) and (min-width:601px){html .ts-lootbar{padding:24px}.ts-lootbar-copy{width:60%}html .ts-lootbar-hero{right:-9%;height:380px;top:18px}html .ts-lootbar-title{font-size:28px}.ts-lootbar-art::after{background:linear-gradient(90deg,rgba(13,40,32,.97),rgba(13,40,32,.83) 40%,rgba(13,40,32,.12) 80%)}}
@media(max-width:600px){html .ts-lootbar{height:340px;padding:20px;align-items:flex-end}.ts-lootbar-copy{width:100%;max-width:none}html .ts-lootbar-logo{position:absolute;left:0;bottom:205px;width:128px;margin:0}html .ts-lootbar-hero{height:268px;right:-28px;top:8px}html .ts-lootbar-world{object-position:38% center}.ts-lootbar-art::after{z-index:2;background:linear-gradient(0deg,rgba(13,40,32,.99) 0%,rgba(13,40,32,.95) 31%,rgba(13,40,32,.42) 56%,rgba(13,40,32,.02) 82%)}html .ts-lootbar-label{font-size:10px;margin-bottom:8px}html .ts-lootbar-title{font-size:25px;line-height:1.23}html .ts-lootbar-cta{margin-top:14px;font-size:14px;padding:10px 15px;gap:22px}.ts-lootbar-slot{margin:24px 0}}
@media(prefers-reduced-motion:reduce){html .ts-lootbar *{transition:none!important;transform:none!important}}
/* Hero details reuse the same official artwork and composition at a quieter size. */
.ts-lootbar-slot--hero{margin:28px 0}
html .ts-lootbar--hero{height:206px;padding:20px 28px}
html.ts-platform .ts-lootbar--hero:hover{text-decoration:none}
.ts-lootbar--hero .ts-lootbar-copy{width:65%;max-width:650px}
html .ts-lootbar--hero .ts-lootbar-logo{position:static;width:112px;margin:0 0 6px}
html .ts-lootbar--hero .ts-lootbar-label{font-size:11px;margin-bottom:6px}
html .ts-lootbar--hero .ts-lootbar-title{font-size:clamp(21px,2.2vw,27px);line-height:1.25;text-wrap:balance}
html .ts-lootbar--hero .ts-lootbar-cta{min-height:44px;margin-top:12px;padding:9px 15px;font-size:14px;gap:18px}
html .ts-lootbar--hero .ts-lootbar-hero{top:-16px;right:3%;height:290px}
.ts-lootbar-slot--hero .ts-lootbar-note{margin-top:7px}
@media(max-width:900px) and (min-width:601px){
  html .ts-lootbar--hero{height:216px;padding:20px 24px}
  .ts-lootbar--hero .ts-lootbar-copy{width:70%}
  html .ts-lootbar--hero .ts-lootbar-hero{right:-6%;height:286px;top:-8px}
  html .ts-lootbar--hero .ts-lootbar-title{font-size:23px}
}
@media(max-width:600px){
  .ts-lootbar-slot--hero{margin:22px 0}
  html .ts-lootbar--hero{height:242px;padding:17px 18px;align-items:flex-end}
  .ts-lootbar--hero .ts-lootbar-copy{width:100%;max-width:none}
  html .ts-lootbar--hero .ts-lootbar-logo{position:absolute;left:0;bottom:157px;width:92px;margin:0}
  html .ts-lootbar--hero .ts-lootbar-hero{height:198px;right:-8px;top:-7px}
  html .ts-lootbar--hero .ts-lootbar-label{font-size:10px;margin-bottom:6px}
  html .ts-lootbar--hero .ts-lootbar-title{max-width:300px;font-size:21px;line-height:1.25}
  html .ts-lootbar--hero .ts-lootbar-cta{margin-top:11px;font-size:14px}
  .ts-lootbar--hero .ts-lootbar-art::after{background:linear-gradient(0deg,rgba(13,40,32,.99) 0%,rgba(13,40,32,.95) 41%,rgba(13,40,32,.38) 72%,rgba(13,40,32,.02) 100%)}
}