/* Wraeclast Index — "Poison" theme, shared by the app (index.html) and the drill-down (explore.html).
   Path of Exile's own look: black stone, forged metal, engraved capitals, item names in the game's
   rarity colours. Poison green is the light source; blood red is the accent, used sparingly.
   The selector outranks the drill-down page's own light/dark token rules. */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&display=swap');

html:root:not([data-theme="none"]){
  color-scheme:dark;
  --ground:#070807; --surface:#0D0F0D; --raised:#141614; --sunken:#050605;
  --line:#243022; --line-soft:#182017;
  --text:#DCE3D2; --muted:#98A48E; --faint:#66725E;
  --accent:#8CCB3F;            /* poison green: links, focus, active state */
  --accent-soft:#11160E;
  --blood:#B3261E;             /* red accent: warnings, falls, the rank badge */
  --blood-soft:#2A0F0C;
  --bronze:#A8844A;            /* forged-metal hairlines */
  --str:#C9463B; --dex:#79B94A; --int:#5B8FD1; --any:#A89F8C;
  --pos:#16C784; --neg:#EA3943;   /* market green and red: price moves read as market data, not as the poison theme */
  /* the game's item colours, for names */
  --c-unique:#C06A2B; --c-gem:#2BB5AA; --c-currency:#B8AC8C; --c-keystone:#D9B566; --c-rare:#E3D36B;
  --shadow:0 1px 2px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.5);
  --shadow-hi:0 0 0 1px rgba(140,203,63,.28), 0 10px 34px rgba(0,0,0,.6), 0 0 28px rgba(140,203,63,.03);
  --disp:'Cinzel', 'Fraunces', Georgia, serif;
}

/* miasma: a faint green haze pooled at the top of every page */
html:root:not([data-theme="none"]) body{
  background:
    radial-gradient(1100px 520px at 50% -140px, rgba(120,190,50,.04), transparent 70%),
    radial-gradient(700px 400px at 100% 0, rgba(179,38,30,.05), transparent 70%),
    var(--ground);
  background-attachment:fixed;
}
::selection{background:rgba(140,203,63,.35); color:#fff}
html:root:not([data-theme="none"]){scrollbar-color:#2A3627 #070907}

/* engraved capitals for names and titles, like the game's UI */
.brand, .hero-title, .pagehd h2, .sect h3, .card-id h3, .panel h2, .secttl, .empty h3{
  font-family:var(--disp); letter-spacing:.03em;
}
.card-id h3{font-weight:700; font-size:14px}
.brand em, .hero-title em{color:var(--accent); text-shadow:0 0 18px rgba(140,203,63,.35)}

/* item names in the game's colours */
.card.k-u h3{color:var(--c-unique)}
.card.k-g h3{color:var(--c-gem)}
.card.k-c h3{color:var(--c-currency)}
.card.k-p h3{color:var(--c-keystone)}
.card.k-w h3{color:var(--text)}

/* the card as a tooltip: dark glass, a bronze hairline, a lit header */
.card{
  background:linear-gradient(180deg, rgba(140,203,63,.018), transparent 64px), var(--surface);
  border-color:var(--line);
}
.card::before{   /* forged edge along the top */
  content:''; position:absolute; left:12px; right:12px; top:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--bronze) 20%, var(--bronze) 80%, transparent); opacity:.45;
}
.card:hover{border-color:rgba(140,203,63,.45)}
.card-ic{background:radial-gradient(circle at 50% 40%, #181A17, #080908); box-shadow:inset 0 0 0 2px var(--line)}
.card-rank{background:var(--blood); color:#F3E6E4; box-shadow:0 0 12px rgba(179,38,30,.5)}
.card-why{background:var(--accent-soft); border-left:3px solid var(--accent); border-radius:0 6px 6px 0}
.pill{background:#0A0E0A}
.pill.warn{color:#F08A82; border-color:rgba(179,38,30,.6); background:var(--blood-soft)}
.card-ls li::before{background:var(--accent); box-shadow:none; opacity:.45}

/* controls */
.searchbox input{background:#0B0F0B; border-color:#2C3A29}
.searchbox input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(140,203,63,.06), 0 0 34px rgba(140,203,63,.04)}
.chip[aria-pressed="true"], .btn.primary{background:var(--accent-soft); border-color:var(--accent); color:var(--accent)}
.btn.primary:hover{background:#161D12; filter:none}
.tabs a[aria-current="page"], .seg button[aria-pressed="true"], .nav button[aria-pressed="true"]{
  background:var(--raised); color:var(--text); box-shadow:inset 0 -2px 0 var(--accent)}
.top, .mast{border-bottom-color:#1E281C; box-shadow:0 1px 0 rgba(168,132,74,.12)}
.up, .pos{color:var(--pos)}
.down, .neg{color:var(--neg)}

/* hotfix: the last green fills go dark, with the colour kept on the edge and the text */
input[type=range], input[type=checkbox]{accent-color:#4E7A28}
.chip.c-r[aria-pressed="true"], .chip.c-g[aria-pressed="true"], .chip.c-b[aria-pressed="true"], .chip.c-w[aria-pressed="true"]{
  background:var(--raised); font-weight:500}
.chip.c-r[aria-pressed="true"]{color:var(--str); border-color:var(--str)}
.chip.c-g[aria-pressed="true"]{color:var(--dex); border-color:var(--dex)}
.chip.c-b[aria-pressed="true"]{color:var(--int); border-color:var(--int)}
.chip.c-w[aria-pressed="true"]{color:var(--any); border-color:var(--any)}
.filtbtn:hover{background:var(--raised); color:var(--accent); border-color:var(--accent)}

/* ---------- borders: thick enough not to break or clip at any screen scaling ---------- */
/* whole pixels: 1.5px rounds down to 1px on a normal screen, which is what looked clipped */
.card, .searchbox input, .tsearch input, .field, .tabs, .seg, .nav, .applinks, .chip, .btn, .panel,
.tablewrap, .lvlbox, .search, .clbtn, .kwq, .trade, .tmod{border-width:2px}
.pill{border-width:1px}
.card-ft .kind{border-width:1px}
.verdict{border-radius:0 8px 8px 0}
.ov-box{border-radius:var(--r)}   /* same rounding as the card inside, so its corners are not cut */

/* ---------- the W.I. crest and its miasma ----------
   Crest and fog textures come from the image API (OpenRouter). The motion is CSS only: each layer
   drifts, spills and fades on its own slow loop, so the fog moves smoothly and never flips frames.
   Three depths: haze behind, wisps rising off the badge, and a bank that pools and spills in front
   of its base, the way fog rolls out of a chemist's cellar. */
.mark{position:relative; display:inline-grid; place-items:center; width:28px; height:34px; margin-right:9px; vertical-align:middle; translate:0 -2px}
.mark-logo{position:relative; z-index:1; height:34px; width:auto; filter:drop-shadow(0 0 6px rgba(140,203,63,.14))}
.mark-wisp{position:absolute; left:50%; bottom:2px; width:44px; height:auto; translate:-50% 0; opacity:0;
  mix-blend-mode:screen; pointer-events:none; animation:wi-mark 9s ease-in-out infinite}
@keyframes wi-mark{
  0%{transform:translate(0, 6px) scale(.7); opacity:0}
  30%{opacity:.55}
  100%{transform:translate(6px, -18px) scale(1.25); opacity:0}
}

.emblem{position:relative; width:260px; height:230px; margin:0 auto 4px;
  transition:height .45s cubic-bezier(.2,.8,.2,1), opacity .3s, margin .45s}
.emblem-logo{position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:2; height:200px; width:auto; pointer-events:none;
  filter:drop-shadow(0 0 24px rgba(140,203,63,.09)) drop-shadow(0 10px 30px rgba(0,0,0,.8))}
.fog{position:absolute; inset:0; pointer-events:none}
.fog.back, .fog.front{z-index:3}   /* all fog drifts in front of the crest */
.fog img{position:absolute; left:50%; height:auto; mix-blend-mode:screen; opacity:0; will-change:transform, opacity}

/* Horizontal fog only, centred on the crest: every layer has a mirrored twin (.m) that drifts
   the other way, so the fog mass stays balanced left and right. */
.fog .haze{top:14%; width:640px; translate:-50% 0; animation:wi-haze 36s ease-in-out infinite}
.fog .haze.m{animation-name:wi-haze-m; animation-delay:-18s}
@keyframes wi-haze{
  0%,100%{transform:translateX(-4%) scale(1); opacity:.35}
  50%{transform:translateX(4%) scale(1.06); opacity:.55}
}
@keyframes wi-haze-m{
  0%,100%{transform:scaleX(-1) translateX(-4%) scale(1); opacity:.35}
  50%{transform:scaleX(-1) translateX(4%) scale(1.06); opacity:.55}
}
/* the bank: pools at the base, spreads outward, hangs, fades */
.fog .bank{bottom:-2%; width:560px; translate:-50% 0}
.fog .b1{animation:wi-spill 26s ease-in-out infinite}
.fog .b1.m{animation-name:wi-spill-m; animation-delay:-13s}
.fog .b2{animation:wi-front 30s ease-in-out infinite; animation-delay:-7s}
.fog .b2.m{animation-name:wi-front-m; animation-delay:-22s}
@keyframes wi-spill{
  0%{transform:translateX(-3%) scaleX(.8) scaleY(.8); opacity:0}
  30%{opacity:.36}
  70%{opacity:.26}
  100%{transform:translateX(3%) scaleX(1.25) scaleY(1); opacity:0}
}
@keyframes wi-spill-m{
  0%{transform:scaleX(-1) translateX(-3%) scaleX(.8) scaleY(.8); opacity:0}
  30%{opacity:.36}
  70%{opacity:.26}
  100%{transform:scaleX(-1) translateX(3%) scaleX(1.25) scaleY(1); opacity:0}
}
@keyframes wi-front{
  0%{transform:translate(-2%, 4px) scaleX(.85) scaleY(.7); opacity:0}
  35%{opacity:.22}
  75%{opacity:.15}
  100%{transform:translate(3%, 14px) scaleX(1.3) scaleY(.9); opacity:0}
}
@keyframes wi-front-m{
  0%{transform:scaleX(-1) translate(-2%, 4px) scaleX(.85) scaleY(.7); opacity:0}
  35%{opacity:.22}
  75%{opacity:.15}
  100%{transform:scaleX(-1) translate(3%, 14px) scaleX(1.3) scaleY(.9); opacity:0}
}
.hero-title{font-size:clamp(28px, 4.6vw, 42px)}
.hero.docked .emblem{height:0; opacity:0; margin:0}
@media (prefers-reduced-motion: reduce){
  .fog img{animation:none !important; opacity:.25}
  .mark-wisp{display:none}
}
@media (max-width:640px){
  .emblem{width:200px; height:170px} .emblem-logo{height:150px}
  .fog .bank{width:420px} .fog .haze{width:460px}
}
html:root:not([data-theme="none"]) body{overflow-x:clip}   /* the fog may drift past the edge */