/* Fixed inventory slots stay visible before the first key is earned. */
.key-progress {
  display:flex;
  flex-direction:column;
  gap:5px;
  width:100%;
  max-width:206px;
  margin:7px auto 0;
  color:#465448;
  font-size:11px;
  line-height:1.4;
}
.key-track {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr)) 12px minmax(0,1.12fr);
  align-items:center;
  gap:3px;
  width:100%;
}
.key-slot {
  display:flex;
  align-items:center;
  justify-content:center;
  height:30px;
  min-width:0;
  border:2px solid #8b997b;
  border-radius:2px;
  background:#e0e6cf;
  box-shadow:inset 0 2px 0 #becbac,0 1px 0 #fff9dc;
  color:#6a795b;
}
.key-star {
  font-family:Arial,sans-serif;
  font-size:24px;
  line-height:1;
}
.key-slot.is-earned {
  color:#f5c23e;
  background:#355a48;
  border-color:#b28c35;
  box-shadow:inset 0 2px 0 #214335,0 1px 0 #fff5c6;
  text-shadow:0 1px 0 #76530e;
}
.key-arrow { text-align:center; font-size:14px; color:#6b7959; }
.key-gold { color:#85917d; border-color:#a39976; background:#e9e3c8; box-shadow:inset 0 2px 0 #d0c8a6; }
.key-gold.is-earned { color:#ffe077; background:#725329; border-color:#d4a543; }
.pixel-key {
  position:relative;
  display:inline-block;
  flex-shrink:0;
  width:12px;
  height:22px;
  color:inherit;
  background:linear-gradient(currentColor,currentColor) 5px 10px/3px 12px no-repeat;
  transform:rotate(35deg);
}
.pixel-key::before { content:""; position:absolute; top:0; left:1px; width:11px; height:11px; border:3px solid currentColor; border-radius:3px; box-sizing:border-box; }
.pixel-key::after { content:""; position:absolute; bottom:1px; left:7px; width:5px; height:3px; background:currentColor; box-shadow:0 -5px 0 currentColor; }
.key-caption { display:flex; justify-content:center; align-items:center; gap:7px; white-space:nowrap; }
.key-caption b { font-size:12px; color:#355c46; font-variant-numeric:tabular-nums; }
.house-label .key-progress { padding-top:7px; border-top:1px solid #d9cfaa; margin-top:4px; }
.progress-copy .key-progress { margin:10px 0 0; max-width:218px; }
.progress-copy .key-caption { justify-content:flex-start; }
.progress-row .progress-copy .key-star { font-weight:400; }
.festival-keys {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  margin-top:14px;
  padding:11px 16px;
  color:#fff2b8;
  background:#31563ded;
  border:8px solid #a5662d;
  border-image:var(--game-frame) 24 / 8px / 0 stretch;
  border-radius:0;
  box-shadow:0 3px 0 #284a36;
  font-size:13px;
}
.festival-recipe { display:flex; align-items:center; gap:12px; color:#ffda6b; height:29px; font-family:Arial,sans-serif; font-size:23px; }
.festival-recipe>span:nth-child(2) { font-size:18px; color:#cddca8; }
.festival-count { color:#e6eed8; font-size:12px; }
.group-key-journey { margin:20px 0; }
.group-key-journey .key-progress { margin:10px 0 0; max-width:280px; }
.group-key-journey .key-slot { height:40px; }
.group-key-journey .key-caption { justify-content:flex-start; font-size:13px; }
@media(max-width:600px) {
  .house-label .key-progress { gap:4px; }
  .house-label .key-slot { height:27px; }
  .house-label .key-track { gap:2px; grid-template-columns:repeat(4,minmax(0,1fr)) 10px minmax(0,1.12fr); }
  .house-label .key-star { font-size:21px; }
  .house-label .key-caption { gap:4px; font-size:10px; }
  .award-house .festival-keys { grid-column:1/-1; width:100%; margin:9px 0 0; padding:8px; border:8px solid #a5662d; border-image:var(--game-frame) 24 / 8px / 0 stretch; border-radius:0; background:#31563ded; box-shadow:0 3px 0 #284a36; }
  .progress-row .progress-copy { flex-basis:calc(100% - 62px); }
  .progress-row>.stage-chip { margin-left:62px; }
}