/* ==========================================================================
   KRIS MAKES GAMES — SITE ACCENT
   Loaded AFTER system.css. This was the original site the whole shared
   system grew out of, so its palette stays the reference cream/brass/moss
   combination — unchanged from the very first build.
   ========================================================================== */

:root{
  --paper: #F2E8D3;
  --paper-dim: #e9dcbe;
  --brass: #B8863E;
  --brass-dark: #8f6a30;
  --accent-2: #4B5842;    /* moss — "in development" status dot */
  --dark: #24201A;
  --dark-2: #302a20;
}

/* ---------- Flip card (hero signature element) ---------- */
.card-stage{
  display:flex;
  justify-content:center;
  perspective:1400px;
}
.index-card{
  width:280px;
  height:400px;
  position:relative;
  cursor:pointer;
  transform-style:preserve-3d;
  transition: transform 0.6s cubic-bezier(.2,.8,.2,1);
}
.index-card.flipped{ transform: rotateY(180deg); }
.index-card:focus-visible{ outline:none; }
.index-card:focus-visible .face{ outline:2px solid var(--accent-2); outline-offset:4px; }

.face{
  position:absolute; inset:0;
  backface-visibility:hidden;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.35);
  box-shadow: 0 18px 40px -14px rgba(46,36,24,0.45), 0 2px 0 rgba(255,255,255,0.04) inset;
  padding:22px;
  display:flex;
  flex-direction:column;
}
.face.front{
  background:
    radial-gradient(circle at 30% 20%, rgba(184,134,62,0.18), transparent 60%),
    var(--dark);
  color:var(--paper);
}
.face.back{
  background:var(--dark-2);
  color:var(--paper);
  transform: rotateY(180deg);
}

.card-eyebrow{
  display:flex;
  justify-content:space-between;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.06em;
  color:var(--brass);
  text-transform:uppercase;
}

.card-icon-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-icon-wrap svg{
  width:120px; height:120px;
  stroke:var(--paper);
}

.card-foot{ text-align:center; }
.card-foot .title{
  font-family:'Fraunces', serif;
  font-size:1.05rem;
  margin-bottom:4px;
}
.card-foot .hint{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.66rem;
  color:rgba(242,232,211,0.55);
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.back .name-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:14px;
}
.back .name-row .name{
  font-family:'Fraunces', serif;
  font-size:1.3rem;
}
.back .name-row .lv{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.75rem;
  color:var(--brass);
}
.stat-row-flip{ margin-bottom:12px; }
.stat-label{
  display:flex;
  justify-content:space-between;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.64rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:rgba(242,232,211,0.7);
  margin-bottom:4px;
}
.stat-track{
  height:6px;
  border-radius:3px;
  background:rgba(242,232,211,0.14);
  overflow:hidden;
}
.stat-fill{
  height:100%;
  border-radius:3px;
  background:linear-gradient(90deg, var(--brass), var(--accent-2));
}
.back .cooldown{
  margin-top:auto;
  border-top:1px dashed rgba(242,232,211,0.2);
  padding-top:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
}
.back .cooldown .val{ color:var(--accent-2); filter:brightness(1.6); }

/* ---------- Extra status tag for placeholder projects ---------- */
.tag.soon{
  background: rgba(180,78,51,0.08);
  color:#B44E33;
  border:1px dashed rgba(180,78,51,0.35);
}