/* Frankenskates Artifact Locker v4.1 — artwork first */
.artifact-archive-head{margin-bottom:1.5rem}
.artifact-archive-head h2{margin:.25rem 0 .5rem}

.artifact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1.35rem;
}
.artifact-card-button{
  appearance:none;
  -webkit-appearance:none;
  display:block;
  width:100%;
  padding:0;
  border:1px solid rgba(0,255,240,.30);
  border-radius:18px;
  overflow:hidden;
  background:#080a0e;
  color:#fff;
  text-align:left;
  cursor:pointer;
  box-shadow:0 0 18px rgba(0,255,240,.08);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.artifact-card-button:hover,
.artifact-card-button:focus-visible{
  transform:translateY(-4px);
  border-color:rgba(255,0,200,.72);
  box-shadow:0 0 30px rgba(255,0,200,.20),0 0 16px rgba(0,255,240,.12);
  outline:none;
}
.artifact-image-frame{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  min-height:340px;
  margin:0;
  border:0;
  border-radius:0;
  background:
    radial-gradient(circle at 50% 35%,rgba(0,255,240,.10),transparent 45%),
    linear-gradient(145deg,#090b10,#160a17);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.artifact-image-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.artifact-card-button.locked .artifact-image-frame img{
  filter:grayscale(1) contrast(1.14);
  opacity:.80;
}
.artifact-image-placeholder{
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1rem;
  font:600 .78rem/1.4 'Oswald',sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.48);
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 5px),
    radial-gradient(circle at 50% 42%,rgba(0,255,240,.10),transparent 42%);
}
.artifact-state-stamp{
  position:absolute;
  top:14px;
  left:14px;
  padding:.42rem .62rem;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(0,0,0,.72);
  font:600 .68rem/1 'Oswald',sans-serif;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.artifact-card-button.unlocked .artifact-state-stamp{
  border-color:#00fff0;
  color:#00fff0;
  box-shadow:0 0 14px rgba(0,255,240,.28);
}
.artifact-card-caption{
  min-height:78px;
  padding:1rem 1.1rem 1.05rem;
  background:linear-gradient(180deg,rgba(15,15,22,.98),rgba(7,8,12,.99));
  border-top:1px solid rgba(255,255,255,.08);
}
.artifact-card-caption h3{
  margin:0 0 .32rem;
  font-family:'Oswald',sans-serif;
  font-size:1.35rem;
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.artifact-card-caption span{
  display:block;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.48);
}
.artifact-card-button.locked{filter:grayscale(.90);opacity:.78}
.artifact-card-button.unlocked{border-color:rgba(0,255,240,.45)}

.artifact-dialog[hidden]{display:none}
.artifact-dialog{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:1rem;
}
.artifact-dialog-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(6px);
}
.artifact-file{
  position:relative;
  z-index:1;
  width:min(720px,96vw);
  max-height:92vh;
  overflow:auto;
  padding:1.4rem;
  border:1px solid rgba(0,255,240,.48);
  border-radius:20px;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px),
    linear-gradient(145deg,rgba(8,10,15,.99),rgba(24,8,24,.99));
  box-shadow:0 0 50px rgba(0,255,240,.15),0 0 38px rgba(255,0,200,.10);
}
.artifact-file-close{
  position:absolute;
  top:.8rem;
  right:.9rem;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:1.7rem;
  cursor:pointer;
}
.artifact-file-kicker{
  margin:0 3rem 1rem 0;
  font:600 .72rem/1.2 'Oswald',sans-serif;
  letter-spacing:.2em;
  color:#00fff0;
}
.artifact-file-art{
  width:min(390px,100%);
  aspect-ratio:4/5;
  margin:0 auto 1.3rem;
  border:1px solid rgba(255,255,255,.18);
  background:#050608;
  overflow:hidden;
}
.artifact-file-art img{width:100%;height:100%;object-fit:cover}
.artifact-file h2{
  margin:.25rem 0;
  text-align:center;
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.artifact-file-meta{
  text-align:center;
  color:#00fff0;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.artifact-file-description{
  max-width:560px;
  margin:1rem auto 1.25rem;
  text-align:center;
  color:rgba(255,255,255,.78);
}
.artifact-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.75rem;
  margin:1rem 0;
}
.artifact-stats div{
  padding:1rem .75rem;
  border:1px solid rgba(0,255,240,.22);
  border-radius:12px;
  background:rgba(0,0,0,.26);
  text-align:center;
}
.artifact-stats strong{
  display:block;
  font-family:'Oswald',sans-serif;
  font-size:1.2rem;
}
.artifact-stats span{
  display:block;
  margin-top:.2rem;
  font-size:.65rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.48);
}
.artifact-progress{
  height:10px;
  margin:1.2rem 0 .55rem;
  border:1px solid rgba(255,255,255,.20);
  border-radius:999px;
  overflow:hidden;
  background:rgba(0,0,0,.55);
}
.artifact-progress-bar{
  height:100%;
  background:linear-gradient(90deg,#00fff0,#ff00cc);
  box-shadow:0 0 12px rgba(0,255,240,.45);
}
.artifact-progress-copy,
.artifact-file-status{
  text-align:center;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.52);
}
.artifact-file-status{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.10);
}
.artifact-file-status.recovered{color:#00fff0}

body.artifact-dialog-open{overflow:hidden}

@media(max-width:700px){
  .artifact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
  .artifact-image-frame{min-height:0;aspect-ratio:4/5}
  .artifact-card-caption{min-height:68px;padding:.8rem}
  .artifact-card-caption h3{font-size:1.05rem}
  .artifact-card-caption span{font-size:.6rem}
  .artifact-stats{grid-template-columns:1fr}
}
@media(max-width:440px){
  .artifact-grid{grid-template-columns:1fr 1fr}
}


/* Locker Command Center v5 */
.locker-command-section{padding-top:clamp(1.5rem,4vw,3rem)}
.locker-command-head{max-width:900px;margin-bottom:1.35rem}
.locker-command-head h2{margin:.25rem 0 .45rem}
.locker-command-head p{margin:0;color:#bdbdbd}
.locker-stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.75rem;margin-bottom:1rem}
.locker-stat{min-height:145px;padding:1.15rem;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;position:relative;overflow:hidden}
.locker-stat strong{font-size:clamp(2.4rem,5vw,4.5rem);line-height:.9;color:#fff}
.locker-stat span{margin-top:.7rem;font-size:.78rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#d8d8d8}
.locker-stat:hover{border-color:rgba(0,255,240,.55);box-shadow:0 0 20px rgba(0,255,240,.09)}
.locker-stat.artifact-stat{border-color:rgba(0,255,240,.45);box-shadow:inset 0 0 30px rgba(255,0,180,.05),0 0 18px rgba(0,255,240,.08)}
.locker-stat.artifact-stat strong,.locker-stat.artifact-stat span{color:#00fff0}
.locker-next{padding:1.1rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
.locker-next p{margin:.25rem 0 0;color:#aaa}
.locker-next-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.locker-next-actions .btn{white-space:nowrap}
@media(max-width:1050px){.locker-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.locker-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.locker-next{align-items:flex-start;flex-direction:column}.locker-next-actions{justify-content:flex-start}}
@media(max-width:440px){.locker-stats-grid{grid-template-columns:1fr 1fr}.locker-stat{min-height:120px;padding:.9rem}.locker-stat strong{font-size:2.6rem}.locker-stat span{font-size:.68rem}}


/* Locker Command Center v5.1 — Field Archive Instrument Panel */
.locker-command-section{
  position:relative;
  padding-top:clamp(2rem,5vw,4rem);
}
.locker-command-head{
  max-width:980px;
  margin-bottom:1.5rem;
}
.locker-command-head .eyebrow{
  color:#8dded9;
}
.locker-command-head h2{
  margin:.25rem 0 .55rem;
}
.locker-command-head p{
  max-width:900px;
  color:rgba(255,255,255,.72);
}

.locker-stats-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:.85rem;
  margin:0 0 1.15rem;
}
.locker-stat{
  min-height:158px;
  padding:1.1rem 1.05rem 1rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(0,255,240,.20);
  border-radius:16px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 36%),
    linear-gradient(145deg,rgba(7,10,15,.96),rgba(15,8,17,.96));
  box-shadow:
    inset 0 0 24px rgba(0,255,240,.025),
    0 0 0 rgba(0,255,240,0);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.locker-stat::before{
  content:"FIELD DATA";
  display:block;
  width:max-content;
  padding:.3rem .42rem;
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.42);
  font-size:.58rem;
  font-weight:800;
  letter-spacing:.14em;
  line-height:1;
  text-transform:uppercase;
}
.locker-stat::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,transparent,#00fff0,transparent);
  opacity:.20;
}
.locker-stat strong{
  display:block;
  margin-top:auto;
  font-family:'Oswald',sans-serif;
  font-size:clamp(3rem,5vw,5rem);
  font-weight:700;
  line-height:.82;
  color:#fff;
  text-shadow:0 0 18px rgba(255,255,255,.05);
}
.locker-stat span{
  display:block;
  margin-top:.72rem;
  font-size:.72rem;
  font-weight:800;
  line-height:1.25;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
.locker-stat:hover,
.locker-stat:focus-visible{
  outline:none;
  border-color:rgba(0,255,240,.64);
  background:
    linear-gradient(180deg,rgba(0,255,240,.055),transparent 38%),
    linear-gradient(145deg,rgba(8,12,17,.98),rgba(17,8,19,.98));
  box-shadow:
    0 0 24px rgba(0,255,240,.13),
    inset 0 0 28px rgba(0,255,240,.035);
}
.locker-stat:hover::after,
.locker-stat:focus-visible::after{
  opacity:.82;
}
.locker-stat.artifact-stat{
  border-color:rgba(255,0,200,.42);
  background:
    linear-gradient(180deg,rgba(255,0,200,.06),transparent 38%),
    linear-gradient(145deg,rgba(7,10,15,.98),rgba(23,7,22,.98));
  box-shadow:
    inset 0 0 34px rgba(255,0,200,.055),
    0 0 18px rgba(0,255,240,.05);
}
.locker-stat.artifact-stat::before{
  content:"ARCHIVE STATUS";
  border-color:rgba(255,0,200,.30);
  color:#ff8ee5;
}
.locker-stat.artifact-stat::after{
  background:linear-gradient(90deg,transparent,#ff00cc,#00fff0,transparent);
  opacity:.55;
}
.locker-stat.artifact-stat strong{
  color:#00fff0;
  text-shadow:0 0 18px rgba(0,255,240,.30);
}
.locker-stat.artifact-stat span{
  color:#fff;
}
.locker-stat.artifact-stat:hover,
.locker-stat.artifact-stat:focus-visible{
  border-color:rgba(255,0,200,.74);
  box-shadow:
    0 0 26px rgba(255,0,200,.16),
    0 0 20px rgba(0,255,240,.08),
    inset 0 0 36px rgba(255,0,200,.06);
}

.locker-next{
  margin:0 0 .75rem;
  padding:1.05rem 1.15rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  border:1px solid rgba(255,255,255,.11);
  border-radius:14px;
  background:rgba(0,0,0,.20);
}
.locker-next .eyebrow{
  color:#ff8ee5;
}
.locker-next p{
  margin:.3rem 0 0;
  color:rgba(255,255,255,.56);
}
.locker-next-actions{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.locker-next-actions .btn{
  min-height:46px;
  padding:.8rem 1rem;
  white-space:nowrap;
  border-color:rgba(0,255,240,.24);
  background:rgba(7,9,13,.74);
  transition:border-color .2s ease,box-shadow .2s ease,color .2s ease;
}
.locker-next-actions .btn:hover,
.locker-next-actions .btn:focus-visible{
  border-color:rgba(0,255,240,.70);
  color:#fff;
  box-shadow:0 0 18px rgba(0,255,240,.10);
}

@media(max-width:1100px){
  .locker-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .locker-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .locker-next{align-items:flex-start;flex-direction:column}
  .locker-next-actions{justify-content:flex-start;width:100%}
}
@media(max-width:480px){
  .locker-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .locker-stat{min-height:132px;padding:.85rem}
  .locker-stat strong{font-size:3rem}
  .locker-stat span{font-size:.62rem}
  .locker-stat::before{font-size:.52rem}
  .locker-next-actions .btn{width:100%;text-align:center}
}


/* Artifact Mystery Pass v5.2 */
.artifact-card-button.locked .artifact-image-frame{
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px),
    radial-gradient(circle at 50% 38%,rgba(0,255,240,.075),transparent 43%),
    linear-gradient(145deg,#05070a,#0c080f);
}
.artifact-card-button.locked .artifact-image-frame img{
  filter:grayscale(1) contrast(1.65) brightness(.34);
  opacity:.48;
  transform:scale(1.018);
}
.artifact-card-button.locked .artifact-image-frame::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.42)),
    repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.018) 4px 5px);
  mix-blend-mode:multiply;
}
.artifact-card-button.locked:hover .artifact-image-frame img,
.artifact-card-button.locked:focus-visible .artifact-image-frame img{
  filter:grayscale(1) contrast(1.55) brightness(.46);
  opacity:.62;
}
.artifact-card-button.unlocked .artifact-image-frame img{
  filter:saturate(1.12) contrast(1.03);
}
.artifact-card-button.unlocked{
  border-color:rgba(0,255,240,.48);
  box-shadow:0 0 24px rgba(0,255,240,.10),0 0 18px rgba(255,0,200,.06);
}
.artifact-card-button.unlocked .artifact-state-stamp{
  color:#00fff0;
  border-color:rgba(0,255,240,.72);
  box-shadow:0 0 15px rgba(0,255,240,.20);
}
.artifact-signal{
  color:rgba(255,255,255,.52)!important;
  letter-spacing:.09em;
}
