/* v41 — bright rarity HEX animation, refined Home, compact theme controls, larger calculator */

@property --rarity-spin {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ---------- view-aware sidebar controls ---------- */
body[data-view='home'] .appearance-tools{display:none!important}
body[data-view='home'] .sidebar{grid-auto-rows:max-content!important;align-content:start!important}
body[data-view='home'] .side-footer{margin-top:0!important}
body[data-view='values'] .appearance-tools,
body[data-view='calculator'] .appearance-tools{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 42px!important;
  gap:7px!important;
  width:min(190px,100%)!important;
  justify-self:start!important;
}
body[data-view='values'] .appearance-tools .theme-toggle,
body[data-view='calculator'] .appearance-tools .theme-toggle,
body[data-view='values'] .appearance-tools .motion-toggle,
body[data-view='calculator'] .appearance-tools .motion-toggle{
  min-height:42px!important;
  border-radius:14px!important;
  padding-inline:12px!important;
  font-size:.78rem!important;
}

/* ---------- very bright rarity text, exact user HEX palettes ---------- */
.value-card[data-rarity='exclusive'] .rarity-text,
.detail-modal[data-rarity='exclusive'] .rarity-text,
.calc-picker-card[style*='930fff'] .rarity-text{
  background:linear-gradient(180deg,#feddff 0%,#de22ff 22%,#9823ff 52%,#930fff 78%,#edc2ff 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;
  filter:brightness(1.7) saturate(1.35) drop-shadow(0 0 5px rgba(222,34,255,.45))!important;
}
.value-card[data-rarity='mythical'] .rarity-text,
.detail-modal[data-rarity='mythical'] .rarity-text{
  background:linear-gradient(180deg,#fff582 0%,#f6fcb7 12%,#ffce78 28%,#ff8e0c 48%,#ff0f3b 68%,#ff0097 84%,#ff00ae 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;
  filter:brightness(1.55) saturate(1.28) drop-shadow(0 0 5px rgba(255,142,12,.35))!important;
}
.value-card[data-rarity='secret'] .rarity-text,
.detail-modal[data-rarity='secret'] .rarity-text{
  background:linear-gradient(180deg,#ffffff 0%,#f1f1f1 18%,#c1c1c1 38%,#ffffff 56%,#b1b1b1 74%,#a7a7a7 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent!important;
  filter:brightness(1.65) drop-shadow(0 0 5px rgba(255,255,255,.24))!important;
}
.value-card[data-rarity='exclusive'] .rarity-text,
.value-card[data-rarity='mythical'] .rarity-text,
.value-card[data-rarity='secret'] .rarity-text,
.detail-modal[data-rarity='exclusive'] .rarity-text,
.detail-modal[data-rarity='mythical'] .rarity-text,
.detail-modal[data-rarity='secret'] .rarity-text{
  font-family:'Lilita One','Arial Rounded MT Bold',system-ui,sans-serif!important;
  -webkit-text-stroke:1.6px #17131c!important;
  paint-order:stroke fill;
  letter-spacing:.01em!important;
  font-weight:400!important;
}

/* ---------- animated rarity borders ---------- */
.value-card[data-rarity='exclusive'] .card-button,
.value-card[data-rarity='mythical'] .card-button,
.value-card[data-rarity='secret'] .card-button{
  position:relative!important;
  border:2px solid transparent!important;
  animation:rarityBorderSpin 6s linear infinite!important;
}
.value-card[data-rarity='exclusive'] .card-button{
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,22%),rgba(255,255,255,.075),transparent 44%) padding-box,
    linear-gradient(165deg,rgba(31,24,36,.985),rgba(15,11,19,.99) 68%,rgba(10,8,14,.995)) padding-box,
    conic-gradient(from var(--rarity-spin),#930fff,#feddff,#930fff,#de22ff,#9823ff,#edc2ff,#930fff) border-box!important;
  box-shadow:0 14px 34px rgba(0,0,0,.30),0 0 22px rgba(147,15,255,.18),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.value-card[data-rarity='mythical'] .card-button{
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,22%),rgba(255,255,255,.075),transparent 44%) padding-box,
    linear-gradient(165deg,rgba(34,22,28,.985),rgba(17,11,16,.99) 68%,rgba(11,8,12,.995)) padding-box,
    conic-gradient(from var(--rarity-spin),#ff00ae,#ff0097,#ff7dd2,#ff0f3b,#ffcfb9,#ff8e0c,#ffce78,#fafbdd,#f6fcb7,#fff582,#ff00ae) border-box!important;
  box-shadow:0 14px 34px rgba(0,0,0,.30),0 0 22px rgba(255,15,59,.15),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.value-card[data-rarity='secret'] .card-button{
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,22%),rgba(255,255,255,.08),transparent 44%) padding-box,
    linear-gradient(165deg,rgba(30,30,33,.985),rgba(16,15,18,.99) 68%,rgba(10,10,12,.995)) padding-box,
    conic-gradient(from var(--rarity-spin),#ffffff,#c1c1c1,#747474,#b1b1b1,#ffffff,#6f6f6f,#f1f1f1,#a7a7a7,#ffffff) border-box!important;
  box-shadow:0 14px 34px rgba(0,0,0,.30),0 0 18px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.07)!important;
}
@keyframes rarityBorderSpin{to{--rarity-spin:360deg}}

/* modal gets matching rarity frame too */
.detail-modal[data-rarity='exclusive'],
.detail-modal[data-rarity='mythical'],
.detail-modal[data-rarity='secret']{border:2px solid transparent!important;animation:rarityBorderSpin 7s linear infinite!important}
.detail-modal[data-rarity='exclusive']{background:linear-gradient(#0d0b10,#0d0b10) padding-box,conic-gradient(from var(--rarity-spin),#930fff,#feddff,#de22ff,#9823ff,#edc2ff,#930fff) border-box!important}
.detail-modal[data-rarity='mythical']{background:linear-gradient(#0d0b10,#0d0b10) padding-box,conic-gradient(from var(--rarity-spin),#ff00ae,#ff7dd2,#ff0f3b,#ff8e0c,#fff582,#ff00ae) border-box!important}
.detail-modal[data-rarity='secret']{background:linear-gradient(#0d0b10,#0d0b10) padding-box,conic-gradient(from var(--rarity-spin),#ffffff,#c1c1c1,#747474,#ffffff,#a7a7a7,#ffffff) border-box!important}

html[data-motion='off'] .value-card .card-button,
html[data-motion='off'] .detail-modal{animation:none!important}

/* ---------- home: centered, rounded, no square-looking controls ---------- */
.home-v40{gap:20px!important}
.home-v40-hero{
  min-height:350px!important;
  border-radius:30px!important;
  padding:40px 44px!important;
  grid-template-columns:minmax(0,1fr) 300px!important;
}
.home-v40-copy{text-align:center!important;display:grid!important;justify-items:center!important}
.home-v40-copy p{max-width:760px!important}
.home-v40-actions{justify-content:center!important;gap:14px!important;margin-top:26px!important}
.home-v40-btn{
  min-width:190px!important;
  min-height:56px!important;
  padding:0 28px!important;
  border-radius:999px!important;
  font-size:.95rem!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px rgba(0,0,0,.22)!important;
}
.home-v40-btn:hover{transform:translateY(-2px) scale(1.015)!important}
.home-v40-grid{gap:18px!important}
.home-v40-card{
  min-height:128px!important;
  border-radius:30px!important;
  grid-template-columns:58px minmax(0,1fr) 52px!important;
  padding:20px 24px!important;
  overflow:hidden!important;
}
.home-v40-card b{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,171,75,.10);border:1px solid rgba(255,171,75,.18);
}
.home-v40-icon{border-radius:50%!important;width:54px!important;height:54px!important}

/* ---------- much larger calculator ---------- */
body[data-view='calculator'] .app-layout{
  width:min(1900px,calc(100% - 24px))!important;
  grid-template-columns:230px minmax(0,1fr)!important;
  gap:18px!important;
}
.calculator-v40{gap:18px!important}
.calculator-v40-header{min-height:104px!important;border-radius:28px!important}
.calculator-v40-header .page-title-wrap h1{font-size:clamp(2.55rem,4vw,3.7rem)!important}
.calculator-v40-panel{padding:28px!important;border-radius:28px!important;min-height:700px!important}
.trade-v40-grid{grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr)!important;gap:22px!important}
.trade-v40-side{
  min-height:650px!important;
  padding:24px!important;
  border-radius:28px!important;
  grid-template-rows:auto minmax(500px,1fr) auto!important;
  gap:18px!important;
}
.trade-v40-side-head h2{font-size:1.7rem!important}
.trade-v40-total{padding:12px 15px!important;border-radius:16px!important;font-size:1.05rem!important}
.trade-v40-items{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;min-height:500px!important}
.trade-add-v40{
  min-height:210px!important;
  border-radius:24px!important;
  border-width:2px!important;
}
.trade-add-v40 span{
  width:72px!important;height:72px!important;border-radius:50%!important;font-size:2.5rem!important;
  background:linear-gradient(180deg,rgba(255,181,90,.20),rgba(160,92,255,.10))!important;
}
.trade-add-v40 strong{font-size:.9rem!important}
.trade-item-v40{border-radius:24px!important;padding:12px!important;gap:10px!important}
.trade-item-art-v40{height:150px!important;border-radius:19px!important}
.trade-item-art-v40 img{width:128px!important;height:128px!important}
.trade-item-qty-v40{min-width:38px!important;height:34px!important;font-size:.82rem!important;border-radius:999px!important}
.trade-item-copy-v40 strong{font-size:.9rem!important}
.trade-item-copy-v40 small{font-size:.72rem!important}
.trade-item-copy-v40>span{font-size:.82rem!important}
.trade-v40-bottom{padding-top:16px!important}
.trade-ticket-input input{min-height:50px!important;border-radius:15px!important;font-size:1rem!important}
.trade-v40-diff{padding:24px 14px!important;border-radius:24px!important}
.trade-v40-diff strong{font-size:2.05rem!important}
.calculator-v40-verdict{min-height:52px!important;border-radius:999px!important;padding-inline:22px!important}
.home-corner-btn{border-radius:999px!important;padding-inline:20px!important}

/* bigger picker for calculator */
.calc-picker-modal{width:min(1280px,calc(100% - 28px))!important;max-height:min(880px,calc(100vh - 24px))!important;border-radius:30px!important}
.calc-picker-head{padding:28px 82px 14px 28px!important;grid-template-columns:1fr minmax(320px,430px)!important}
.calc-picker-head h2{font-size:2.35rem!important}
.calc-picker-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important;padding:0 28px 28px!important}
.calc-picker-card{border-radius:22px!important;padding:12px!important}
.calc-picker-art{height:150px!important;border-radius:18px!important}
.calc-picker-art img{width:128px!important;height:128px!important}
.calc-picker-variant{min-height:38px!important;border-radius:11px!important}

/* clean compact sidebar in calculator when category nav is hidden */
body[data-view='calculator'] .sidebar{grid-auto-rows:max-content!important;align-content:start!important}
body[data-view='calculator'] .side-footer{margin-top:0!important}

@media(max-width:1550px){
  .trade-v40-items{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .calc-picker-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:1250px){
  body[data-view='calculator'] .app-layout{grid-template-columns:220px minmax(0,1fr)!important}
  .trade-v40-grid{grid-template-columns:1fr!important}
  .trade-v40-center{order:-1!important}
  .trade-v40-diff{max-width:390px!important;position:static!important}
}
@media(max-width:900px){
  .home-v40-hero{grid-template-columns:1fr!important;padding:28px 22px!important}
  .home-v40-orbit{height:160px!important}
  .home-v40-grid{grid-template-columns:1fr!important}
  .trade-v40-items{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .calc-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* picker rarity parity */
.calc-picker-card[style*='#930fff'] .rarity-text{
  background:linear-gradient(180deg,#feddff 0%,#de22ff 22%,#9823ff 52%,#930fff 78%,#edc2ff 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;
  filter:brightness(1.7) saturate(1.35) drop-shadow(0 0 5px rgba(222,34,255,.4))!important;
}
.calc-picker-card[style*='#ff00ae'] .rarity-text{
  background:linear-gradient(180deg,#fff582 0%,#f6fcb7 12%,#ffce78 28%,#ff8e0c 48%,#ff0f3b 68%,#ff0097 84%,#ff00ae 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;
  filter:brightness(1.55) saturate(1.28) drop-shadow(0 0 5px rgba(255,142,12,.32))!important;
}
.calc-picker-card[style*='#c1c1c1'] .rarity-text{
  background:linear-gradient(180deg,#ffffff 0%,#f1f1f1 18%,#c1c1c1 38%,#ffffff 56%,#b1b1b1 74%,#a7a7a7 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;
  filter:brightness(1.65) drop-shadow(0 0 5px rgba(255,255,255,.20))!important;
}
.calc-picker-card[style*='#930fff']{
  border:2px solid transparent!important;
  background:linear-gradient(180deg,rgba(24,19,28,.98),rgba(12,10,15,.98)) padding-box,conic-gradient(from var(--rarity-spin),#930fff,#feddff,#de22ff,#9823ff,#edc2ff,#930fff) border-box!important;
  animation:rarityBorderSpin 6s linear infinite!important;
}
.calc-picker-card[style*='#ff00ae']{
  border:2px solid transparent!important;
  background:linear-gradient(180deg,rgba(24,19,28,.98),rgba(12,10,15,.98)) padding-box,conic-gradient(from var(--rarity-spin),#ff00ae,#ff0097,#ff7dd2,#ff0f3b,#ff8e0c,#fff582,#ff00ae) border-box!important;
  animation:rarityBorderSpin 6s linear infinite!important;
}
.calc-picker-card[style*='#c1c1c1']{
  border:2px solid transparent!important;
  background:linear-gradient(180deg,rgba(24,19,28,.98),rgba(12,10,15,.98)) padding-box,conic-gradient(from var(--rarity-spin),#ffffff,#c1c1c1,#747474,#ffffff,#a7a7a7,#ffffff) border-box!important;
  animation:rarityBorderSpin 6s linear infinite!important;
}