:root{--symbol-size:28px}
html{background:#070a0f}
body{isolation:isolate;background:radial-gradient(ellipse at 50% 12%,#202a35cc 0,#10151dcc 38rem,#070a0ff2 78rem);cursor:url("assets/ui/relic-cursor.png") 2 2,auto}
body:before{z-index:-2;inset:0;opacity:.52;background:url("assets/branding/relic-workshop-background.webp") center/cover fixed no-repeat;mask-image:radial-gradient(ellipse at center,transparent 8%,#0008 54%,#000 100%);animation:relicBackdrop 1.4s ease-out both}
body:after{z-index:-1}
button,.shop-card,.pack-item,.bag-tile,.reserve-card,select,a{cursor:url("assets/ui/relic-cursor.png") 2 2,pointer}
.shop-card,.pack-item,.bag-tile,.reserve-card{-webkit-touch-callout:none;user-select:none}
input{cursor:text}
@keyframes relicBackdrop{from{opacity:0}to{opacity:.52}}

.app-shell{width:min(100%,1120px)}
.brand img{width:64px;height:64px;padding:0;border:0;border-radius:0;background:none;object-fit:contain;filter:drop-shadow(0 8px 10px #000b)}
.brand h1{font-size:25px}.brand p{font-size:11px}.brand-kicker,.eyebrow,.status-label{font-size:9px}
.header-actions{align-items:center}.symbol-button{display:grid;place-items:center;width:48px;min-width:48px;padding:3px}.symbol-button img{width:34px;height:34px;object-fit:contain;pointer-events:none}.account-trigger{min-width:78px}body[data-phase="menu"] .menu-trigger{display:grid}

.status-strip{grid-template-columns:2.2fr .72fr .86fr 1fr;margin-bottom:19px}.status-strip>div{display:flex;min-height:62px;flex-direction:column;align-items:center;justify-content:center}.status-label{display:flex;align-items:center;justify-content:center;gap:4px}.status-label img{width:24px;height:24px;object-fit:contain}.status-strip strong{min-height:29px;margin-top:4px}
.relic-track{display:grid!important;grid-template-columns:repeat(10,minmax(16px,1fr));gap:2px;width:100%;padding:0 5px}.relic-track img{width:100%;max-width:27px;aspect-ratio:1;object-fit:contain;filter:grayscale(1) brightness(.64);opacity:.68}.relic-track img.active{filter:none;opacity:1}.life-track{grid-template-columns:repeat(3,25px);justify-content:center}.life-track img{max-width:25px}.rank-value{display:flex!important;align-items:center;gap:5px}.rank-value img{width:34px;height:34px;object-fit:contain}.rank-value span{font-size:13px}

.rank-progress{margin-bottom:18px}.rank-progress>div{font-size:9px}.menu-hero>img{width:154px;height:154px;object-fit:contain;border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 16px 20px #000c)}.menu-hero h2{margin-top:-8px}.menu-hero p{font-size:14px;letter-spacing:.08em}.ranked-mode>img{width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 8px 8px #000b)}
.mode-card p{font-size:12px}.instruction,.hint{display:none}

.heading-with-symbol{display:flex;align-items:center;gap:9px}.heading-with-symbol>img{width:48px;height:48px;object-fit:contain}.symbol-action{display:flex;align-items:center;justify-content:center;gap:1px;min-width:86px;padding:2px 6px}.symbol-action img{width:30px;height:30px;object-fit:contain}.symbol-action b{margin:0 1px!important;font-size:13px!important}
.price{display:inline-flex;align-items:center;gap:2px;min-height:24px;font-size:12px}.price img{width:22px;height:22px;object-fit:contain}.shop-kind{display:none}.shop-desc{font-size:11px}.shop-name{font-size:14px}.stat{position:relative;min-height:45px;display:grid;align-content:center}.stat b{font-size:14px}.stat small{height:16px;margin-top:1px}.stat small img{width:16px;height:16px;object-fit:contain}.tempo-line{font-size:9px}.selected-title strong,.detail-object strong{font-size:12px!important}.selected-title span,.detail-object span,.detail-object small,.detail-copy{font-size:9px!important}
.combat-legend{gap:13px;font-size:9px}.combat-legend span{gap:4px}.combat-legend img{width:24px;height:24px;object-fit:contain}
.effect-symbol{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:3px 8px;border:1px solid #5f403f;border-radius:7px;background:#241616;color:#e8bd82}.effect-symbol img{width:28px;height:28px;object-fit:contain}.effect-symbol b{font-size:13px}

.pack-grid .grid-cell.covered{border-width:2px;border-style:solid;filter:saturate(1.22) brightness(1.16);box-shadow:inset 0 0 0 1px #fff2,inset 0 0 14px #0006,0 0 8px #0008}
.pack-grid .bag-tile{opacity:.96;border:2px solid #e6c08388;box-shadow:inset 0 0 0 1px #fff2,inset 0 0 11px #0007,0 2px 5px #0008}
.pack-grid .bag-tile:after{content:"";position:absolute;inset:4px;border:1px dashed #f5d49a66;border-radius:2px;box-shadow:inset 0 0 7px #0008;pointer-events:none}
.drag-preview-layer{position:absolute;z-index:20;inset:2px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(5,var(--cell));gap:2px;pointer-events:none}
.drag-preview-cell{grid-column:var(--preview-column);grid-row:var(--preview-row);min-width:0;border:2px solid;border-radius:5px;pointer-events:none}
.drag-preview-cell.source{border-color:#f5cf7dcc;background:#dba94d30;box-shadow:inset 0 0 12px #ffd97833,0 0 8px #e5b65366}
.drag-preview-cell.target.valid{border-color:#88ffac;background:#2dd36f55;box-shadow:inset 0 0 13px #4dff8e55,0 0 10px #32df7777}
.drag-preview-cell.target.invalid{border-color:#ff8791;background:#e1435355;box-shadow:inset 0 0 13px #ff526255,0 0 10px #ee465977}

.settings-modal{position:fixed;z-index:110;inset:0;display:grid;place-items:center;padding:16px;background:#05070bdc;backdrop-filter:blur(12px)}.settings-modal[hidden]{display:none}.settings-dialog{position:relative;width:min(100%,410px);padding:26px;border:1px solid #a57d3e;border-radius:12px;background:linear-gradient(145deg,#252a31,#11151b 72%);box-shadow:inset 0 0 0 3px #080a0d,inset 0 0 0 4px #57442e,0 28px 90px #000;text-align:center}.settings-mark{width:84px;height:84px;object-fit:contain}.settings-dialog h2{margin:3px 0 20px;font:700 27px Georgia,serif}.language-setting,.settings-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;width:100%;min-height:58px;margin-top:9px;padding:8px 12px;border:1px solid #524836;border-radius:8px;background:#12171d;color:#e9dcc5;text-align:left;font-weight:900;font-size:11px;letter-spacing:.1em}.language-setting select{min-width:128px;min-height:40px;padding:0 10px;border:1px solid #806638;border-radius:6px;background:#252a31;color:#f1dfbb;font:800 13px inherit}.settings-row{grid-template-columns:40px 1fr auto}.settings-row img{width:38px;height:38px;object-fit:contain}.settings-row b{color:#efca72}.settings-dialog .wide{font-size:11px}

@media(max-width:759px){
  :root{--symbol-size:24px}.app-shell{width:min(100%,600px)}.brand img{width:46px;height:46px}.brand h1{font-size:20px}.brand p,.brand-kicker{display:none}.account-trigger{min-width:62px;font-size:8px}.symbol-button{width:42px;min-width:42px;height:42px}.symbol-button img{width:30px;height:30px}
  .status-strip{grid-template-columns:1.75fr .65fr .8fr .9fr}.status-strip>div{min-height:54px;padding:4px 2px}.status-label{font-size:7px}.status-label img{width:19px;height:19px}.status-strip strong{font-size:13px}.relic-track{grid-template-columns:repeat(5,minmax(15px,1fr));gap:0;padding:0 2px}.relic-track img{max-width:21px}.life-track{grid-template-columns:repeat(3,21px)}.rank-value{gap:1px}.rank-value img{width:29px;height:29px}.rank-value span{font-size:9px}
  .menu-hero>img{width:118px;height:118px}.menu-hero p{font-size:11px}.mode-card p{font-size:10px}.heading-with-symbol>img{width:34px;height:34px}.symbol-action{min-width:63px}.symbol-action img{width:23px;height:23px}.symbol-action b{font-size:10px!important}
  .workbench-layout .shop-name{font-size:9px}.workbench-layout .shop-desc,.workbench-layout .tempo-line,.workbench-layout .footprint b{display:none}.workbench-layout .stat{min-height:0}.workbench-layout .stat small img{width:12px;height:12px}.workbench-layout .price{font-size:8px}
  .combat-legend{gap:7px}.combat-legend span{font-size:0}.combat-legend img{width:27px;height:27px}
}
@media(min-width:900px){
  body{cursor:url("assets/ui/cursors/relic-pointer.png") 1 1,auto}
  button,.icon-button,.small-button,.primary-button,.shop-card,.pack-item,.bag-tile,.reserve-card,select,a{cursor:url("assets/ui/cursors/relic-hover.png") 1 1,pointer!important}
  .app-shell,body[data-phase="shop"] .app-shell{width:min(calc(100% - 32px),1440px)}

  .topbar{min-height:72px;padding:7px 12px 10px;border:1px solid #58472f;border-radius:10px;background-image:linear-gradient(#0c1015b8,#0c1015d9),url("assets/ui/panels/forged-iron.webp");background-position:center;background-size:cover;box-shadow:inset 0 0 0 2px #080a0d,0 8px 24px #0008}
  body[data-phase="shop"] .topbar{padding:7px 12px 10px}
  body[data-phase="shop"] .brand img,.brand img{width:58px;height:58px}
  body[data-phase="shop"] .brand h1,.brand h1{font-size:25px}
  body[data-phase="shop"] .brand p,.brand p{font-size:14px}
  .brand-kicker,.eyebrow,.status-label,body[data-phase="shop"] .brand-kicker,body[data-phase="shop"] .status-label,.workbench-layout .eyebrow{font-size:12px!important;letter-spacing:.11em}
  .account-trigger,body[data-phase="shop"] .account-trigger{font-size:12px!important}
  .icon-button,.symbol-button{min-height:50px}
  .small-button{font-size:12px!important}
  .symbol-button{width:54px;min-width:54px}.symbol-button img{width:40px;height:40px}

  .status-strip{grid-template-columns:minmax(500px,2.4fr) minmax(140px,.65fr) minmax(180px,.8fr) minmax(210px,.95fr);gap:7px;margin:8px 0}
  body[data-phase="shop"] .status-strip{gap:7px;margin:8px 0}
  .status-strip>div,body[data-phase="shop"] .status-strip>div{min-height:99px;padding:7px 8px;border-color:#685335;background-color:#101319;background-position:center;background-size:cover;background-blend-mode:multiply;box-shadow:inset 0 0 0 2px #080a0dcc,inset 0 0 24px #0009}
  .status-strip>div:nth-child(1){background-image:linear-gradient(#141820aa,#141820d5),url("assets/ui/panels/forged-iron.webp")}
  .status-strip>div:nth-child(2){background-image:linear-gradient(#24180e99,#171008d5),url("assets/ui/panels/workbench-leather.webp")}
  .status-strip>div:nth-child(3){background-image:linear-gradient(#270d16a8,#180b10d8),url("assets/ui/panels/merchant-velvet.webp")}
  .status-strip>div:nth-child(4){background-image:linear-gradient(#111820a3,#0d1118d8),url("assets/ui/panels/alchemy-slate.webp")}
  .status-strip strong,body[data-phase="shop"] .status-strip strong{min-height:48px;margin-top:3px;font-size:20px}
  .status-label img{width:36px;height:36px}
  .relic-track{grid-template-columns:repeat(10,54px);justify-content:center;gap:0;width:auto;padding:0}
  .relic-track img{width:54px;max-width:none}
  .life-track{grid-template-columns:repeat(3,62px);gap:0}.life-track img{width:62px;max-width:none}
  .rank-value{gap:9px}.rank-value img{width:72px;height:72px}.rank-value span{font-size:18px}
  .rank-progress{padding:6px 10px;border:1px solid #594b38;border-radius:7px;background-image:linear-gradient(#10151bcc,#10151be8),url("assets/ui/panels/alchemy-slate.webp");background-position:center;background-size:cover}
  .rank-progress>div,body[data-phase="shop"] .rank-progress>div{font-size:12px!important}

  .workbench-layout{grid-template-columns:minmax(580px,.95fr) minmax(0,1.15fr);gap:12px}
  .shop-panel,.pack-panel{padding:12px;border-width:2px;background-position:center;background-size:cover;background-blend-mode:multiply;box-shadow:inset 0 0 0 2px #090b0e,inset 0 0 35px #0008,0 12px 28px #0007}
  .shop-panel{background-color:#260e17;background-image:linear-gradient(#1b1117aa,#100d11dd),url("assets/ui/panels/merchant-velvet.webp")}
  .pack-panel{--cell:min(8.2vh,78px);background-color:#24170e;background-image:linear-gradient(#1b130da3,#100d0add),url("assets/ui/panels/workbench-leather.webp")}
  .workbench-layout .section-heading h2,.workbench-layout .pack-toolbar h2{font-size:25px}
  .heading-with-symbol>img{width:58px;height:58px}
  .workbench-layout .small-button{min-height:42px;padding-inline:12px;font-size:12px}
  .symbol-action img{width:34px;height:34px}.symbol-action b{font-size:16px!important}
  .workbench-layout .instruction,.workbench-layout .hint{display:none}
  .workbench-layout .shop{gap:8px}
  .workbench-layout .shop-card,.workbench-layout .shop-card:last-child:nth-child(odd){padding:9px;border-color:#69563b;background-color:#15171c;background-image:linear-gradient(#131820b8,#101218e0),url("assets/ui/panels/forged-iron.webp");background-position:center;background-size:cover;box-shadow:inset 0 0 0 1px #b9975933,0 5px 12px #0008}
  .workbench-layout .shop-card:nth-child(even){background-image:linear-gradient(#220d15b5,#140b10e3),url("assets/ui/panels/merchant-velvet.webp")}
  .workbench-layout .shop-top,.workbench-layout .shop-card:last-child:nth-child(odd) .shop-top{grid-template-columns:70px minmax(0,1fr);gap:9px}
  .workbench-layout .item-image,.workbench-layout .shop-card:last-child:nth-child(odd) .item-image{width:70px;height:70px}
  .workbench-layout .shop-name{padding-right:52px;font-size:15px;line-height:1.2}
  .workbench-layout .shop-kind,.workbench-layout .shop-desc{display:none}
  .workbench-layout .price{margin-top:5px;padding:4px 6px;font-size:14px}.workbench-layout .price img{width:25px;height:25px}
  .workbench-layout .shop-lock{top:8px;right:8px;min-height:31px;padding-inline:7px;font-size:12px!important}
  .workbench-layout .shop-card>.footprint{display:flex;margin-top:7px;padding:5px}.workbench-layout .shop-card>.footprint b{display:none}
  .workbench-layout .shop-card>.stats{display:grid;gap:3px;margin-top:6px}.workbench-layout .shop-card>.stats .stat{min-height:42px;padding:4px 2px}.workbench-layout .shop-card>.stats .stat b{font-size:15px}.workbench-layout .shop-card>.stats .stat small{height:20px;font-size:0}.workbench-layout .shop-card>.stats .stat small img{width:20px;height:20px}
  .workbench-layout .shop-card>.tempo-line{display:none}
  .workbench-layout .shop-card .set-badge{display:inline-block;margin-block:4px;padding:3px 5px;font-size:12px!important}

  .pack-panel .pack-wrap{grid-template-columns:minmax(438px,478px) minmax(220px,1fr);gap:11px;padding:10px;background-image:linear-gradient(#26180c66,#140d08b8),url("assets/ui/panels/workbench-leather.webp");background-position:center;background-size:cover}
  .pack-panel .selected-details{min-height:calc(var(--cell)*5 + 12px);padding:14px;background-image:linear-gradient(#10151bc2,#0e1116e5),url("assets/ui/panels/alchemy-slate.webp");background-position:center;background-size:cover}
  .pack-panel .selected-title strong,.pack-panel .detail-object strong{font-size:16px}
  .pack-panel .selected-title span,.pack-panel .detail-object span,.pack-panel .detail-object small,.pack-panel .detail-copy,.pack-panel .detail-set small,.pack-panel .tempo-line{font-size:12px!important}
  .pack-panel .detail-object{grid-template-columns:76px 1fr}.pack-panel .detail-object img{width:76px;height:76px}
  .pack-panel .set-badge{padding:4px 7px;font-size:12px!important}
  .pack-panel .stat{min-height:48px}.pack-panel .stat b{font-size:16px}.pack-panel .stat small{font-size:0}.pack-panel .stat small img{width:22px;height:22px}
  .pack-panel .pack-item .level{display:none}

  .lower-dashboard{gap:10px}.lower-dashboard .utility-section,.lower-dashboard .recipe-access,.lower-dashboard .enemy-card{border:2px solid #5d4b35;background-position:center;background-size:cover;background-blend-mode:multiply;box-shadow:inset 0 0 0 2px #080a0dcc,0 8px 18px #0007}
  .lower-dashboard .utility-section{padding:8px;background-color:#17191e;background-image:linear-gradient(#12161cc0,#0d1015e2),url("assets/ui/panels/forged-iron.webp")}
  .lower-dashboard .recipe-access{padding:8px;background-color:#111820;background-image:linear-gradient(#10171dc0,#0b1016e2),url("assets/ui/panels/alchemy-slate.webp")}
  .lower-dashboard .enemy-card{padding:9px;background-color:#230d15;background-image:linear-gradient(#220d15b5,#130b10e3),url("assets/ui/panels/merchant-velvet.webp")}
  .lower-dashboard .reserve-zone,.lower-dashboard .combo-book-button{height:96px;min-height:96px;background-position:center;background-size:cover}
  .lower-dashboard .reserve-zone{background-image:linear-gradient(#171a20b5,#101218df),url("assets/ui/panels/forged-iron.webp")}
  .lower-dashboard .combo-book-button{background-image:linear-gradient(#111820b5,#0d1218df),url("assets/ui/panels/alchemy-slate.webp")}
  .lower-dashboard .subheading h2{font-size:18px}.lower-dashboard .zone-head img{width:46px;height:46px}.lower-dashboard .zone-head strong,.lower-dashboard .reserve-card span{font-size:12px}.lower-dashboard .zone-head small,.lower-dashboard .reserve-card small,.lower-dashboard .subheading>span,.lower-dashboard .combo-book-button small,.lower-dashboard .reserve-empty{display:none}
  .lower-dashboard .reserve-card{flex-basis:64px;background-image:linear-gradient(#25170db8,#150e09e0),url("assets/ui/panels/workbench-leather.webp");background-position:center;background-size:cover}.lower-dashboard .reserve-card img{width:48px;height:45px}
  .lower-dashboard .combo-book-button strong{font-size:17px}.lower-dashboard .combo-book-button b{font-size:12px}
  .lower-dashboard .rival-mark span{font-size:12px}.lower-dashboard .enemy-copy strong{font-size:16px}.lower-dashboard .enemy-copy small{display:none}.lower-dashboard .enemy-card .primary-button{font-size:12px}

  .team,.hero-core,.battle-pack,.battle-log,.victory-actions,.mode-card,.settings-dialog,.sell-dialog,.item-info-dialog,.account-dialog,.combos-dialog,.pause-dialog,.battle-result-dialog{background-position:center;background-size:cover}
  .team,.hero-core,.battle-log,.settings-dialog,.item-info-dialog,.account-dialog,.combos-dialog,.pause-dialog{background-image:linear-gradient(#11161cbd,#0b0e13e5),url("assets/ui/panels/forged-iron.webp")}
  .enemy-team,.sell-dialog{background-image:linear-gradient(#230e17ba,#130b10e8),url("assets/ui/panels/merchant-velvet.webp")}
  .battle-pack,.victory-actions,.battle-result-dialog{background-image:linear-gradient(#21150db5,#110c08e3),url("assets/ui/panels/workbench-leather.webp")}
  .battle-bag-layer{z-index:3!important}
  .battle-bag-piece{border-width:2px;box-shadow:inset 0 0 0 1px #ffffff19,inset 0 0 18px #0009,0 0 9px #0008}
  .battle-bag-piece:after{inset:5px;border-color:#f3ce8752}
  .mode-card{background-image:linear-gradient(#10171dbc,#0c1116e5),url("assets/ui/panels/alchemy-slate.webp")}
  .team h3,.battle-head .eyebrow,.hero-values strong,.hero-values b,.hero-debuffs span,.battle-sets span,.combat-legend,.battle-log,.playback-controls button,body[data-phase="battle"] .battle-sets span,body[data-phase="battle"] .combat-legend,body[data-phase="battle"] .combat-legend span{font-size:12px!important}
  .battle-item>span,.battle-item>small{display:none}.combat-legend img{width:34px;height:34px}
  small{font-size:12px}
}
@media(prefers-reduced-motion:reduce){body:before{animation:none}}
html[lang="en"] .enemy-card:before{content:"NEXT CHALLENGE"}
html[lang="en"] .workbench-layout .shop.sell-target:after{content:"DROP TO SELL"}