/* ============================================================
   ZICOXBT — LOOT SHEET. obsidian ground, rarity tiers as truth.
   display: Chakra Petch (self-hosted) | data: JetBrains Mono
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/chakra-petch-400.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/chakra-petch-500.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/chakra-petch-600.woff2) format("woff2")}
@font-face{font-family:"Chakra Petch";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/chakra-petch-700.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-500.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/jetbrains-mono-700.woff2) format("woff2")}

/* ---------- tokens ---------- */
:root{
  --ground:#0a0c10;
  --ground-2:#10131a;
  --panel:#12161e;
  --panel-2:#181d27;
  --edge:#2a3140;
  --edge-soft:#1f2531;
  --text:#e8ebf2;
  --text-2:#aab3c5;          /* 7.4:1 on --panel */
  --text-3:#8a93a6;          /* 4.9:1 on --panel */
  --gold:#e0b34f;            /* LEGENDARY */
  --gold-deep:#8a6a1f;
  --green:#57e39a;           /* LIVE — audited 200 */
  --green-deep:#1d5c3c;
  --sealed-steel:#66707f;           /* SEGERA chrome: dashed borders, swatch fills */
  --sealed-text:#9aa5b6;            /* SEGERA/rail text — 5.9:1 on ground */
  --unk:#b48ad6;             /* CONTOH dummy */
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:"Chakra Petch",system-ui,sans-serif;
  --max:1180px;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;color-scheme:dark;scroll-padding-top:88px}
body{
  background:var(--ground);
  background-image:radial-gradient(1200px 500px at 70% -10%,rgba(224,179,79,.05),transparent 60%);
  color:var(--text);
  font-family:var(--disp);
  font-size:16px;line-height:1.55;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--green)}
::selection{background:var(--gold);color:#0a0c10}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3{line-height:1.15;font-weight:700;letter-spacing:.01em;text-wrap:balance}
p{max-width:72ch}

/* themed scrollbar (desktop) */
*{scrollbar-width:thin;scrollbar-color:var(--edge) var(--ground)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:var(--ground)}
*::-webkit-scrollbar-thumb{background:var(--edge);border:2px solid var(--ground)}

/* ---------- shared: notched panel ---------- */
.panel{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--edge-soft);
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  padding:26px;
  position:relative;
}
/* corner brackets — HUD vocabulary */
.bracket{position:absolute;width:14px;height:14px;border:2px solid var(--gold);pointer-events:none;opacity:.75}
.bracket.tl{top:6px;left:6px;border-right:0;border-bottom:0}
.bracket.tr{top:6px;right:6px;border-left:0;border-bottom:0}
.bracket.bl{bottom:6px;left:6px;border-right:0;border-top:0}
.bracket.br{bottom:6px;right:6px;border-left:0;border-top:0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--disp);font-weight:600;font-size:.95rem;letter-spacing:.08em;
  text-decoration:none;text-transform:uppercase;
  padding:.8rem 1.25rem;min-height:48px;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  border:1px solid transparent;
  transition:transform .15s ease-out,background-color .15s ease-out,border-color .15s ease-out,box-shadow .15s ease-out;
  cursor:pointer;
}
.btn svg{width:18px;height:18px;flex:none}
.btn-primary{background:var(--gold);color:#14100a;border-color:var(--gold)}
.btn-primary:hover{background:#f0c662;transform:translateY(-2px);box-shadow:0 6px 16px -8px rgba(0,0,0,.7)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--edge)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.btn-github{background:var(--panel-2);color:var(--text);border-color:var(--edge);font-size:1rem;padding:1rem 1.6rem}
.btn-github svg{width:22px;height:22px}
.btn-github:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px);box-shadow:0 8px 20px -12px rgba(0,0,0,.8)}

/* ---------- rail nav ---------- */
.rail{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.6rem clamp(12px,3vw,20px);
  background:rgba(10,12,16,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--edge-soft);
}
.rail-mark{
  font-weight:700;font-size:1.05rem;letter-spacing:.1em;color:var(--text);text-decoration:none;white-space:nowrap;
}
.rail-mark-bt{color:var(--gold)}
.rail-nav{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.rail-nav::-webkit-scrollbar{display:none}
.rail-link{
  display:inline-flex;align-items:center;gap:.4rem;flex:none;
  font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.06em;
  color:var(--text-3);text-decoration:none;text-transform:uppercase;
  padding:.5rem .62rem;min-height:44px;border:1px solid transparent;
  transition:color .15s,border-color .15s,background-color .15s;
}
.rail-link .slot{color:var(--sealed-text);font-weight:700;transition:color .15s}
.rail-link:hover,.rail-link.active{color:var(--text);border-color:var(--edge);background:var(--panel)}
.rail-link.active .slot{color:var(--gold)}
.rail-link.active{box-shadow:inset 0 -2px 0 var(--gold)}

/* ---------- layout ---------- */
main{max-width:var(--max);margin:0 auto;padding:0 clamp(14px,4vw,28px)}
.section{padding:clamp(56px,9vw,96px) 0 0}
.sec-h{display:flex;align-items:center;gap:1rem;margin:0 0 clamp(28px,4vw,40px);font-size:clamp(1.6rem,4.5vw,2.25rem)}
.slot-code{
  font-family:var(--mono);font-size:.55em;font-weight:700;color:var(--gold);
  border:1px solid var(--gold-deep);padding:.45em .6em;line-height:1;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  letter-spacing:.05em;flex:none;
}
.rule{flex:1;height:1px;background:linear-gradient(90deg,var(--edge),transparent)}
.sec-sub{color:var(--text-2);max-width:64ch;margin:-1.5rem 0 clamp(24px,3.5vw,32px);font-size:.95rem}
.sec-sub strong{color:var(--text)}

/* ---------- hero / character sheet ---------- */
.hero{padding-top:clamp(32px,6vw,56px)}
.hero-panel{padding:26px 30px}
.hero-grid{display:grid;gap:clamp(20px,4vw,36px);grid-template-columns:1fr}
.avatar-slot{position:relative;justify-self:center;width:min(220px,60vw)}
.avatar-slot img{
  width:100%;aspect-ratio:1;object-fit:cover;
  border:2px solid var(--gold);
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
}
.avatar-tag{
  position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.12em;
  background:var(--gold);color:#14100a;padding:.3rem .7rem;white-space:nowrap;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.hero-copy{min-width:0}
.hello{display:block;font-size:clamp(1.05rem,3vw,1.25rem);font-weight:500;color:var(--text-2);letter-spacing:.02em}
.name{font-size:clamp(2.4rem,8.5vw,3.6rem);font-weight:700;letter-spacing:.02em;color:var(--text)}
.name::after{content:"_";color:var(--gold);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.positioning{margin-top:.8rem;font-size:clamp(1.05rem,3vw,1.25rem);color:var(--text);font-weight:500}
.tagline{
  margin-top:.9rem;font-family:var(--mono);font-size:clamp(.88rem,2.6vw,1rem);font-weight:700;
  letter-spacing:.045em;color:var(--gold);line-height:1.7;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
.attrs{display:flex;gap:clamp(14px,3vw,26px);margin-top:1.6rem;border-top:1px solid var(--edge-soft);padding-top:1.2rem;flex-wrap:wrap}
.attrs .attr dt{font-family:var(--mono);font-weight:700;font-size:1.5rem;color:var(--text);font-variant-numeric:tabular-nums}
.attrs .attr dd{font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;color:var(--text-2);margin-top:.15rem}
.attr-note{display:block;color:var(--text-3);font-size:.75rem;letter-spacing:.04em;text-transform:none;margin-top:.15rem}
.scroll-hint{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin:2.2rem auto 0;color:var(--text-3);font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
}
.scroll-hint svg{width:18px;height:18px;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---------- about ---------- */
.about-grid{display:grid;gap:clamp(18px,3vw,28px)}
.about-lead{background:linear-gradient(180deg,var(--panel-2),var(--panel))}
.lead{font-size:clamp(1.15rem,3.4vw,1.45rem);font-weight:600;color:var(--text);max-width:46ch}
.lead em{font-style:normal;color:var(--gold)}
.about-cols{display:grid;gap:clamp(18px,3vw,28px)}
.about-block h3{font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:.8rem;font-weight:700}
.ticks{list-style:none}
.ticks li{position:relative;padding-left:1.7rem;margin-bottom:.8rem;color:var(--text-2);max-width:64ch}
.ticks li::before{
  content:"";position:absolute;left:0;top:.35em;width:.9rem;height:.9rem;
  background:transparent;border-right:2px solid var(--green);border-bottom:2px solid var(--green);
  transform:rotate(45deg) skewX(-8deg);
}
.ticks li{font-family:var(--mono);font-size:.88rem;line-height:1.65}

/* ---------- experience / skill tree ---------- */
.tree{position:relative;display:grid;gap:clamp(16px,2.6vw,22px)}
.tree-spine{position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--gold-deep),var(--green-deep) 55%,transparent)}
.node{position:relative;margin-left:clamp(0px,2vw,26px);transition:border-color .18s,box-shadow .18s,transform .18s}
.node::before{
  content:"";position:absolute;left:calc(-1 * clamp(0px,2vw,26px) - 1px);top:26px;
  width:16px;height:2px;background:var(--edge);
}
.node:hover,.node:focus-visible{border-color:var(--gold);box-shadow:0 10px 24px -18px rgba(0,0,0,.8);transform:translateY(-2px)}
.node-code{font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.14em;color:var(--green)}
.node h3{font-size:1.15rem;margin:.35rem 0 .5rem}
.node p{color:var(--text-2);font-size:.95rem;margin-bottom:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none}
.chips li{
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.04em;
  color:var(--text-2);background:var(--ground-2);border:1px solid var(--edge);
  padding:.32rem .6rem;white-space:nowrap;
}

/* ---------- selected work / loot cards ---------- */
.loot{
  --rarity:var(--gold);
  position:relative;display:grid;gap:0;margin-bottom:clamp(28px,5vw,44px);
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--gold-deep);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  transition:box-shadow .2s ease-out,transform .2s ease-out;
}
.loot:hover{box-shadow:0 16px 34px -22px rgba(0,0,0,.85);transform:translateY(-3px)}
.loot-shot{position:relative;border-bottom:1px solid var(--gold-deep);background:#07080b;overflow:hidden}
.loot-shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.rarity-flag{
  position:absolute;top:0;left:0;
  font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.1em;
  background:var(--gold);color:#14100a;padding:.45rem .8rem;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.loot-body{padding:26px}
.loot-head{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:.7rem}
.loot-head h3{font-size:1.5rem}
.loot-desc{color:var(--text-2);font-size:.95rem;margin-bottom:.9rem}
.loot-more{color:var(--text-2);font-size:.95rem;margin-bottom:1rem;border-left:1px solid var(--gold-deep);padding-left:1rem}
.loot .chips{margin-bottom:1.2rem}
.loot-links{display:flex;flex-wrap:wrap;gap:.7rem}

/* inspect toggle (JS-created) */
.inspect-btn{
  font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.06em;
  color:var(--text-2);background:transparent;border:1px solid var(--edge);
  padding:.6rem .9rem;min-height:44px;cursor:pointer;margin-bottom:1rem;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:color .15s,border-color .15s;
}
.inspect-btn:hover{color:var(--gold);border-color:var(--gold-deep)}

/* status capsules */
.status{
  font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.08em;
  padding:.36rem .7rem;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;
}
.status::before{content:"";width:7px;height:7px;background:currentColor;flex:none}
.status-live{color:var(--green);border:1px solid var(--green-deep);background:rgba(87,227,154,.08)}
.status-soon{color:var(--sealed-text);border:1px solid var(--edge);background:rgba(102,112,127,.10)}
.status-unk{color:var(--unk);border:1px solid #4a3d5c;background:rgba(180,138,214,.07)}

/* ---------- vault / slots grid ---------- */
.slots{display:grid;gap:clamp(14px,2.4vw,20px);grid-template-columns:1fr}
.slot-item{display:flex;flex-direction:column;gap:.8rem;padding:24px;transition:border-color .18s,transform .18s}
.slot-row{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.slot-row h3{font-size:1rem}
.slot-item p{color:var(--text-2);font-size:.88rem}
.slot-thumb{
  width:calc(100% + 48px);margin-left:-24px;
  aspect-ratio:16/10;object-fit:cover;object-position:top center;
  border-block:1px solid var(--edge);background:#07080b;
}
.slot-src{color:var(--text-2);text-decoration:underline;text-underline-offset:3px;font-family:var(--mono);font-size:.82em}
.slot-src:hover{color:var(--green)}
a.slot-item{color:inherit;text-decoration:none}
a.slot-item:hover{border-color:var(--green);transform:translateY(-2px)}
.slot-item.sealed{border-style:dashed}
.slot-item.sealed .slot-thumb{filter:grayscale(1) brightness(.72)}
.slot-item.unidentified{border-style:dashed;border-color:#3d3348}
.slot-item.unidentified p em{color:var(--unk);font-style:normal;font-family:var(--mono);font-size:.75rem;letter-spacing:.03em}
.dummy-flag{color:var(--unk)}

/* ---------- contact ---------- */
.contact-panel{text-align:center;padding:46px 26px}
.contact-line{margin:0 auto 1.6rem;font-size:clamp(1.05rem,3vw,1.25rem);color:var(--text);font-weight:500;max-width:52ch}
.btn-github{justify-content:center;margin-inline:auto}

/* ---------- footer ---------- */
.foot{
  max-width:var(--max);margin:clamp(64px,10vw,110px) auto 0;padding:1.4rem clamp(14px,4vw,28px) 2.2rem;
  border-top:1px solid var(--edge-soft);
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
}
.foot p{color:var(--text-3);font-family:var(--mono);font-size:.76rem;letter-spacing:.03em;max-width:72ch}
.foot-top{color:var(--text-2);font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-decoration:none;text-transform:uppercase;padding:.6rem;min-height:44px;display:inline-flex;align-items:center;gap:.45rem}
.foot-top svg{width:15px;height:15px;transition:transform .15s ease-out}
.foot-top:hover svg{transform:translateY(-2px)}
.foot-top:hover{color:var(--gold)}

/* ---------- reveal-on-scroll (one authored motion) ---------- */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.on{opacity:1;transform:none;transition:opacity .5s ease-out,transform .5s ease-out}

/* ---------- responsive ---------- */
@media (min-width:560px){
  .slots{grid-template-columns:1fr 1fr}
  .about-cols{grid-template-columns:1fr 1fr}
}
.loadout{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2vw,16px);
  margin-top:clamp(14px,3vw,22px);text-decoration:none;color:inherit;
}
.loadout-item{position:relative;display:block;overflow:hidden;background:var(--panel);border:1px solid var(--gold-deep);min-width:0;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:border-color .18s,transform .18s}
.loadout:hover .loadout-item{transform:translateY(-3px)}
.loadout-item img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center;display:block}
.loadout-flag{
  position:absolute;top:0;left:0;font-family:var(--mono);font-size:.75rem;font-weight:700;letter-spacing:.04em;
  background:var(--gold);color:#14100a;padding:.25rem .5rem;
  clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.loadout-name{
  display:block;font-family:var(--mono);font-size:.75rem;letter-spacing:.02em;color:var(--text-2);
  padding:.5rem .6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:780px){
  .hero-grid{grid-template-columns:200px 1fr;align-items:center;gap:clamp(18px,3vw,30px)}
  .avatar-slot{width:200px}
  .name{font-size:clamp(2.4rem,6vw,3rem)}
  .hero-panel{padding:clamp(18px,3vw,26px)}
  .attrs{margin-top:1.2rem;padding-top:1rem}
  .loot{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .loot-shot{border-bottom:0;border-right:1px solid var(--gold-deep)}
  .loot-shot img{height:100%;min-height:280px}
  .tree{grid-template-columns:1fr 1fr}
  .tree-spine{display:none}
  .node::before{display:none}
  .node{margin-left:0}
}
@media (min-width:1024px){
  .slots{grid-template-columns:repeat(3,1fr)}
}
@media (max-height:560px){
  .loadout,.scroll-hint{display:none}
  .attrs{display:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

@media (max-width:640px){
  .panel,.slot-item,.loot-body{padding:18px}
  .hero{padding-top:20px}
  .hero-panel{padding:18px}
  .hero-actions{margin-top:1rem}
  .attrs{margin-top:1.1rem;padding-top:.9rem;gap:16px 20px}
  .loadout{margin-top:12px}
  .scroll-hint{margin-top:1.2rem}
  .section{padding-top:52px}
}

@media (max-width:640px){
  .avatar-slot{width:min(168px,46vw)}
  .avatar-tag{bottom:-10px}
  .hello{font-size:.95rem}
  .positioning{font-size:1rem;margin-top:.6rem}
  .tagline{margin-top:.6rem;line-height:1.5}
  .attrs .attr dt{font-size:1.25rem}
  .btn{padding:.75rem 1.1rem}
}