/* v32: retain the original v30 layout, world backdrop and rarity palette. */
[hidden]{display:none!important}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--accent-2);outline-offset:4px}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.appearance-tools{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:8px}
.appearance-tools .theme-toggle{width:100%;margin:0}
.motion-toggle{display:grid;place-items:center;color:var(--accent-2);font-size:18px;font-weight:900;min-height:50px;border-radius:17px;transition:background .2s,border-color .2s}
.motion-toggle:hover{background:rgba(255,118,55,.12);border-color:var(--accent)}

/* The same warm menu, with a smoother orange gradient and a bevel. */
.nav-btn{background:linear-gradient(155deg,rgba(42,27,27,.94),rgba(18,12,17,.97) 65%);border-color:rgba(255,143,79,.17);box-shadow:inset 0 1px 0 rgba(255,220,190,.065),0 5px 16px rgba(0,0,0,.16);transition:transform .25s cubic-bezier(.18,.8,.25,1),background .25s,border-color .25s,box-shadow .25s!important}
.nav-btn.active{background:radial-gradient(ellipse at 5% 0%,rgba(255,159,61,.16),transparent 75%),linear-gradient(125deg,rgba(120,55,24,.48),rgba(48,27,22,.76) 60%,rgba(25,17,21,.9));border-color:rgba(255,139,66,.64);box-shadow:inset 0 1px 0 rgba(255,199,124,.17),inset 0 -2px 0 rgba(68,31,15,.34),0 5px 24px rgba(255,111,43,.1)}
.nav-btn:hover{transform:translateX(3px)!important;border-color:rgba(255,151,83,.56);box-shadow:inset 0 1px 0 rgba(255,215,173,.14),0 9px 24px rgba(0,0,0,.22)!important}
.nav-btn:active{transform:translateX(1px) scale(.978)!important}
.nav-icon{background:linear-gradient(145deg,rgba(255,224,204,.075),rgba(255,148,82,.025))!important;border:1px solid rgba(255,189,145,.06)}
.nav-btn.active .nav-icon{background:linear-gradient(150deg,rgba(255,169,92,.18),rgba(255,120,47,.065))!important;border-color:rgba(255,177,115,.17)}
.nav-btn:hover .nav-icon img{transform:translateY(-2px) scale(1.13) rotate(-5deg)!important}
.nav-btn::after{background:linear-gradient(110deg,transparent 26%,rgba(255,210,157,.075) 48%,transparent 72%)}
.nav-btn.active::before{background:linear-gradient(#ffd384,#ff9845,#ed6234);box-shadow:0 0 12px rgba(255,140,66,.5)}
.search-box,.sort-trigger{background:linear-gradient(160deg,rgba(255,180,121,.035),rgba(8,6,10,.15));box-shadow:inset 0 1px 0 rgba(255,225,191,.035)}
.sort-popover:not([hidden]){animation:menuReveal .17s ease-out;transform-origin:top right}
.sort-option{transition:background .18s,transform .18s,color .18s}
.variant-btn.active{box-shadow:inset 0 1px 0 rgba(255,214,174,.14),0 3px 10px rgba(0,0,0,.16)}
.page-header{grid-template-columns:minmax(150px,.32fr) minmax(0,1fr)!important}
.page-tools,.page-tools.no-variants{display:flex;flex-wrap:wrap;min-width:0;align-items:center}
.search-box{flex:1 1 180px;min-width:0}.search-box input{min-width:0}
.custom-sort{flex:0 1 155px;min-width:0}
.pet-variant-tools{flex-basis:100%;display:flex;align-items:center;gap:12px;min-width:0}
.pet-variant-tools .tool-label{font-size:.66rem;white-space:nowrap}
.pet-variant-tools .variant-switch{flex-wrap:nowrap}

/* Original rarity frames; all shading stays within the existing color. */
.card-button{--rx:0deg;--ry:0deg;background:radial-gradient(circle at var(--mx,50%) var(--my,22%),rgba(255,246,235,.07),transparent 45%) padding-box,linear-gradient(165deg,rgba(37,26,38,.98),rgba(18,13,21,.98) 68%,rgba(12,10,16,.99)) padding-box,var(--rarity-frame) border-box!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 10px 24px rgba(0,0,0,.2);transition:transform .26s cubic-bezier(.18,.8,.25,1),border-color .26s,box-shadow .26s!important}
.card-button:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 36px rgba(0,0,0,.32),0 0 22px color-mix(in srgb,var(--rarity) 16%,transparent)!important}
.card-art{background:radial-gradient(ellipse at 50% 26%,color-mix(in srgb,var(--rarity) 16%,transparent),transparent 66%),linear-gradient(165deg,rgba(255,255,255,.052),rgba(255,255,255,.01))!important;border:1px solid rgba(255,255,255,.035);isolation:isolate}
.render-reflection{position:absolute;inset:0;pointer-events:none;z-index:4;background:radial-gradient(150px circle at var(--mx,50%) var(--my,30%),rgba(255,255,255,.075),transparent 75%);opacity:0;transition:opacity .25s}
.card-button:hover .render-reflection{opacity:1}
.render-floor{position:absolute;bottom:20px;left:26%;width:48%;height:11px;border-radius:50%;background:color-mix(in srgb,var(--rarity) 12%,rgba(0,0,0,.5));filter:blur(7px);z-index:0;transition:transform .3s,opacity .3s}
.card-image{position:relative;z-index:2;translate:0 7px;filter:drop-shadow(0 11px 8px rgba(0,0,0,.4));transform-origin:50% 75%;backface-visibility:hidden}
.card-button:hover .card-image{animation:renderHover 3.2s ease-in-out infinite;transform:translateY(-4px) scale(1.065)!important}
.card-button:hover .render-floor{transform:scale(.83);opacity:.65}
.card-button::before{opacity:.65;transition:transform .65s cubic-bezier(.16,.7,.3,1)}
.card-bottom{border-top:1px solid rgba(255,255,255,.035);margin-top:3px}
.set-value{background:linear-gradient(155deg,rgba(255,220,192,.065),rgba(255,255,255,.025))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 2px 5px rgba(0,0,0,.1)}
.rarity-badge{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.25)!important}
.best-badge{background:linear-gradient(160deg,#3b2e19,#211a11 75%)!important;color:#ffe2a3!important}
.card-badges{gap:6px}

/* Original detail window, now fitted to the viewport and clickable. */
.detail-modal{max-height:calc(100dvh - 32px);overscroll-behavior:contain}
.detail-modal[open]{animation:detailReveal .25s cubic-bezier(.2,.8,.2,1)}
.detail-modal::backdrop{animation:backdropReveal .2s ease-out}
.modal-art-shell{background:transparent;border:0;padding:0;color:inherit;border-radius:24px;touch-action:manipulation}
.modal-art-shell:hover .modal-image{filter:drop-shadow(0 25px 25px rgba(0,0,0,.4)) drop-shadow(0 0 14px color-mix(in srgb,var(--modal-rarity) 18%,transparent))}
.modal-art-shell.pet-tap .modal-image,.modal-art-shell.pet-tap .modal-animated-art{animation:petTap .7s cubic-bezier(.25,.6,.25,1)!important}
.modal-badges-left{flex-wrap:wrap;max-width:calc(100% - 80px)}
.modal-close{transition:transform .2s,background .2s}
.modal-close:hover{background:rgba(255,118,55,.17);transform:rotate(90deg)}
.modal-info h2{overflow-wrap:anywhere}
.empty-results{text-align:center;padding:55px 20px;border:1px dashed var(--line);border-radius:20px}
.empty-results strong{font-size:1.35rem}.empty-results p{color:var(--muted)}
.empty-results button{background:linear-gradient(#ffab55,#f47a36);border:1px solid rgba(255,204,144,.4);border-radius:12px;padding:11px 19px;color:#30180c;font-weight:800;cursor:var(--cursor-click)}
.click-ember{position:fixed;z-index:100;width:4px;height:4px;border-radius:2px;background:#ffba67;box-shadow:0 0 5px rgba(255,136,54,.5);pointer-events:none;animation:clickEmber .5s ease-out forwards}
@keyframes renderHover{0%,100%{translate:0 7px}50%{translate:0 2px}}
@keyframes menuReveal{from{opacity:0;translate:0 -5px}to{opacity:1;translate:0 0}}
@keyframes detailReveal{from{opacity:0;translate:0 14px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@keyframes backdropReveal{from{opacity:0}to{opacity:1}}
@keyframes petTap{0%,100%{transform:translateY(0) scale(1)}20%{transform:translateY(7px) scale(1.04,.94)}52%{transform:translateY(-22px) scale(.97,1.03) rotate(-5deg)}78%{transform:translateY(2px) scale(1.025,.98) rotate(2deg)}}
@keyframes clickEmber{to{transform:translate(var(--sx),var(--sy)) rotate(90deg);opacity:0;scale:.3}}

html[data-theme='light'] .nav-btn{background:linear-gradient(145deg,rgba(255,252,247,.98),rgba(255,238,220,.9));border-color:rgba(201,125,72,.2)}
html[data-theme='light'] .nav-btn.active{background:linear-gradient(125deg,#ffe5c4,#fff3e6);border-color:rgba(223,114,45,.5)}
html[data-theme='light'] .card-button{background:radial-gradient(circle at var(--mx,50%) var(--my,22%),rgba(255,255,255,.9),transparent 40%) padding-box,linear-gradient(160deg,#fffcf7,#fff4e9) padding-box,var(--rarity-frame) border-box!important}
html[data-theme='light'] .card-art{background:radial-gradient(ellipse at 50% 26%,color-mix(in srgb,var(--rarity) 13%,transparent),transparent 70%),linear-gradient(#fffaf5,#f7ece7)!important}
html[data-theme='light'] .set-value{background:linear-gradient(#fff9ee,#f8eadd)!important}
html[data-theme='light'] .search-box,html[data-theme='light'] .sort-trigger{background:rgba(255,255,255,.7)}

@media(min-width:901px){.detail-modal{width:min(1120px,calc(100% - 32px))!important}.modal-grid{grid-template-columns:minmax(330px,46%) minmax(0,1fr)!important}.modal-visual{min-height:560px!important}.modal-art-shell{width:min(92%,440px)!important}.modal-image,.modal-animated-art{width:min(96%,400px)!important;height:400px!important}.modal-animated-art .pop-frame{width:100%!important;height:400px!important}.modal-info{padding:32px 28px!important}}
@media(max-width:900px){.sidebar{min-height:0;grid-template-rows:auto}.side-nav{padding:2px 0!important}.appearance-tools{max-width:260px}.nav-btn:hover,.nav-btn:active{transform:translateY(-2px)!important}.modal-visual{min-height:340px!important}.modal-art-shell{width:300px!important;max-width:90%!important}.modal-image,.modal-animated-art,.modal-animated-art .pop-frame{width:280px!important;max-width:100%!important;height:280px!important}.modal-grid{grid-template-columns:1fr!important}.page-header{min-width:0}.page-tools,.search-box,.custom-sort{min-width:0}.search-box input{min-width:0;width:100%}}
@media(max-width:650px){.catalog-card{padding:13px!important}.rarity-section{padding:10px!important}.page-header{padding:17px!important}.side-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important}.nav-btn{border-radius:14px!important;padding:8px 2px!important;gap:5px!important;min-height:76px!important}.nav-icon{width:34px!important;height:34px!important;border-radius:11px!important}.nav-icon img{width:27px!important;height:27px!important}.nav-label{font-size:.67rem!important}.sidebar{gap:9px!important}.brand-card{min-height:72px!important}.side-footer{padding:10px 14px!important;font-size:.8rem}.card-badges{align-items:flex-start;flex-wrap:wrap}.best-badge{min-height:28px!important;font-size:.62rem!important;max-width:none}.modal-info h2{font-size:2rem!important}.modal-info{padding:22px 18px!important}.modal-badges-left{gap:5px}.modal-rarity,.modal-best{font-size:.65rem!important}.detail-box{min-height:70px!important}.modal-visual{min-height:310px!important}.modal-image,.modal-animated-art,.modal-animated-art .pop-frame{height:255px!important}.modal-art-shell{width:270px!important}}
@media(min-width:1600px){.page-tools{flex-wrap:nowrap}.pet-variant-tools{flex-basis:auto;flex-shrink:0;display:grid;gap:7px}.custom-sort{flex-shrink:0}.page-header{grid-template-columns:minmax(180px,.25fr) minmax(0,1fr)!important}}
@media(max-width:900px){.page-header{grid-template-columns:1fr!important}}
@media(max-width:650px){.page-tools,.page-tools.no-variants{display:grid;grid-template-columns:minmax(0,1fr) 110px!important}.pet-variant-tools{grid-column:1/-1;display:grid;gap:7px}.variant-btn{font-size:.76rem;padding:9px 11px}.pet-variant-tools .variant-switch{gap:6px}.sort-trigger{padding:0 11px;font-size:.82rem}.sort-popover{right:0!important;left:auto!important}}
html[data-page-hidden] .world-bg *,html[data-page-hidden] .world-bg *::before,html[data-page-hidden] .world-bg *::after{animation-play-state:paused!important}
html[data-motion='off'] *,html[data-motion='off'] *::before,html[data-motion='off'] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion='off'] .value-card{opacity:1!important}
html[data-motion='off'] .code-row{opacity:1!important;transform:none!important}
html[data-motion='off'] .card-button{transform:none!important}
html[data-motion='off'] .pop-frame.scream{opacity:0!important}
html[data-motion='off'] .pop-frame.normal{opacity:1!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.value-card,.code-row{opacity:1!important}.card-button,.code-row{transform:none!important}.pop-frame.scream{opacity:0!important}.pop-frame.normal{opacity:1!important}}

/* ===== v33 value-history modal ===== */
.detail-modal{
  overflow:auto!important;
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--modal-rarity) 42%,transparent) transparent;
}
.modal-info{min-width:0}
.history-panel{
  position:relative;
  display:grid;
  gap:13px;
  padding:16px;
  border-radius:19px;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 0%,color-mix(in srgb,var(--modal-rarity) 12%,transparent),transparent 38%),
    linear-gradient(165deg,rgba(255,255,255,.05),rgba(255,255,255,.022));
  border:1px solid color-mix(in srgb,var(--modal-rarity) 20%,rgba(255,255,255,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.history-panel::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:2px;
  background:linear-gradient(180deg,transparent,var(--modal-rarity),transparent);
  opacity:.55;
}
.history-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;min-width:0}
.history-head>div{min-width:0}
.history-head h3{margin:3px 0 0;font-size:1.08rem;letter-spacing:-.015em}
.history-status{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:var(--muted);
  font-size:.67rem;
  font-weight:900;
  letter-spacing:.04em;
}
.history-status::before{content:'';width:6px;height:6px;border-radius:50%;margin-right:6px;background:currentColor;box-shadow:0 0 9px currentColor}
.history-status.is-live{color:#79e6a8;background:rgba(56,189,115,.09);border-color:rgba(86,220,142,.16)}
.history-status.is-loading{color:#f6c27b}
.history-status.is-offline{color:#aeb4bf}
.history-status.is-neutral{color:var(--modal-rarity)}

.history-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.history-stat{
  min-width:0;
  min-height:67px;
  padding:10px 11px;
  border-radius:13px;
  background:rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.05);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.history-stat span{color:var(--subtle);font-size:.61rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.history-stat strong{margin-top:4px;font-size:.98rem;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-stat small{margin-top:3px;color:var(--muted);font-size:.62rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-stat strong.is-up{color:#72e6a1}
.history-stat strong.is-down{color:#ff7c72}
.history-stat strong.is-neutral{color:var(--text)}

.history-range{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:5px;
  padding:4px;
  border-radius:12px;
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.045);
}
.history-range button{
  min-width:0;
  min-height:34px;
  border:0;
  border-radius:9px;
  color:var(--muted);
  background:transparent;
  font:inherit;
  font-size:.68rem;
  font-weight:950;
  cursor:var(--cursor-click);
  transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.history-range button:hover{color:var(--text);background:rgba(255,255,255,.045)}
.history-range button.active{
  color:#fff;
  background:color-mix(in srgb,var(--modal-rarity) 28%,rgba(20,17,23,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 5px 15px rgba(0,0,0,.16),0 0 14px color-mix(in srgb,var(--modal-rarity) 10%,transparent);
}
.history-range button:focus-visible{outline:2px solid var(--modal-rarity);outline-offset:2px}

.history-chart-shell{
  position:relative;
  min-height:224px;
  border-radius:15px;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.08)),
    radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--modal-rarity) 6%,transparent),transparent 58%);
  border:1px solid rgba(255,255,255,.045);
}
.history-chart{display:block;width:100%;height:auto;min-height:224px;overflow:visible}
.history-grid-line line{stroke:rgba(255,255,255,.07);stroke-width:1;stroke-dasharray:3 6}
.history-grid-line text,.history-x-label{fill:var(--subtle);font-size:10px;font-weight:700}
.history-line{fill:none;stroke:var(--modal-rarity);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--modal-rarity) 28%,transparent))}
.history-area{pointer-events:none}
.history-point{fill:var(--panel);stroke:var(--modal-rarity);stroke-width:2;transition:r .15s ease}
.history-point.is-last{fill:var(--modal-rarity);stroke:#fff;stroke-width:2.5;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--modal-rarity) 50%,transparent))}
.history-single-guide{stroke:var(--modal-rarity);stroke-width:1.2;stroke-dasharray:5 7;opacity:.4}
.history-empty{min-height:224px;padding:24px;display:grid;place-content:center;text-align:center;gap:7px}
.history-empty[hidden]{display:none!important}
.history-empty strong{font-size:.94rem}
.history-empty span{max-width:370px;color:var(--muted);font-size:.76rem;line-height:1.5}
.history-hint{margin:0!important;color:var(--subtle)!important;font-size:.68rem!important;line-height:1.45!important}

html[data-theme='light'] .history-panel{
  background:radial-gradient(circle at 88% 0%,color-mix(in srgb,var(--modal-rarity) 10%,transparent),transparent 38%),linear-gradient(165deg,rgba(255,255,255,.84),rgba(255,244,234,.65));
  border-color:color-mix(in srgb,var(--modal-rarity) 18%,rgba(100,60,40,.12));
}
html[data-theme='light'] .history-stat,
html[data-theme='light'] .history-range,
html[data-theme='light'] .history-chart-shell{background:rgba(255,255,255,.55);border-color:rgba(105,67,49,.1)}
html[data-theme='light'] .history-grid-line line{stroke:rgba(81,48,35,.10)}
html[data-theme='light'] .history-range button.active{color:#28150f;background:color-mix(in srgb,var(--modal-rarity) 22%,#fff3e7)}
html[data-theme='light'] .history-point{fill:#fff7f0}

@media(max-width:1160px){
  .history-chart-shell,.history-chart,.history-empty{min-height:250px}
}
@media(max-width:650px){
  .history-panel{padding:13px;gap:11px;border-radius:16px}
  .history-head{align-items:center}
  .history-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .history-stat{min-height:62px}
  .history-range{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
  .history-range button{min-height:38px}
  .history-chart-shell,.history-chart,.history-empty{min-height:210px}
  .history-grid-line text,.history-x-label{font-size:9px}
}