.page{ --page-w: 1080px; }

.page__meta{
  max-width: 720px;
  line-height: 1.4;
}

.cachecache{
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ccBtn{
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(219,219,219,.16);
  background: rgba(12,15,16,.55);
  color: rgba(219,219,219,.88);
  font-family: "LazyDog", system-ui, sans-serif;
  letter-spacing: .05em;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ccBtn:hover{ border-color: rgba(255,190,90,.45); }
.ccBtn--primary{
  background: rgba(61,206,97,.14);
  border-color: rgba(61,206,97,.50);
  color: var(--green);
}
.ccBtn--primary:hover{
  border-color: rgba(61,206,97,.75);
  box-shadow: 0 0 0 1px rgba(61,206,97,.16);
}

/* =========================
   OUTILS (minuteur + equipement)
========================= */
.ccTools{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.ccTimer, .ccEquip{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid rgba(255,190,90,.25);
  background: linear-gradient(155deg, rgba(20,14,26,.75), rgba(10,8,12,.85));
  text-align: center;
}

.ccTimer__label, .ccEquip__label{
  font-size: 11px;
  letter-spacing: .08em;
  color: rgba(219,219,219,.55);
}

.ccTimer__clock{
  font-family: "ZombiesBrainless", "LazyDog", system-ui, sans-serif;
  font-size: 46px;
  letter-spacing: .04em;
  color: #ffbe5a;
  text-shadow: 0 0 20px rgba(255,190,90,.35);
}
.ccTimer__clock.is-alert{ animation: ccClockAlert .6s ease; }
@keyframes ccClockAlert{
  0%, 100%{ transform: scale(1); color: #ffbe5a; }
  40%{ transform: scale(1.15); color: #ff6b7d; }
}

.ccTimer__round{
  font-size: 11px;
  letter-spacing: .05em;
  color: rgba(219,219,219,.60);
}

.ccTimer__actions{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.ccEquip__card{
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 200px;
  transition: transform .2s ease;
}
.ccEquip__card.is-bump{ animation: ccBump .3s ease; }
@keyframes ccBump{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.06); }
  100%{ transform: scale(1); }
}
.ccEquip__imgWrap{
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(219,219,219,.10);
}
.ccEquip__img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}
.ccEquip__name{
  margin: 0;
  font-family: "LazyDog", system-ui, sans-serif;
  font-size: 14px;
  color: rgba(219,219,219,.95);
}

/* =========================
   FLASH D'ALERTE (fin de cycle du minuteur)
========================= */
.ccFlash{
  position: fixed;
  inset: 0;
  z-index: 95;
  background: radial-gradient(circle, rgba(255,107,125,.35), transparent 70%);
  pointer-events: none;
  animation: ccFlashFade .6s ease-out;
}
@keyframes ccFlashFade{
  0%{ opacity: 1; }
  100%{ opacity: 0; }
}

/* =========================
   REGLES DU JEU
========================= */
.ccRules{
  border-radius: 14px;
  border: 1px solid rgba(219,219,219,.12);
  background: rgba(12,15,16,.40);
  padding: 4px 16px;
}
.ccRules summary{
  padding: 12px 0;
  cursor: pointer;
  font-family: "LazyDog", system-ui, sans-serif;
  letter-spacing: .05em;
  font-size: 13px;
  color: rgba(219,219,219,.85);
  list-style: none;
}
.ccRules summary::-webkit-details-marker{ display: none; }
.ccRules summary::before{
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  color: #ffbe5a;
  transition: transform .15s ease;
}
.ccRules[open] summary::before{ transform: rotate(90deg); }

.ccRules__body{
  padding: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ccRules__body h3{
  margin: 6px 0 0;
  font-size: 11px;
  letter-spacing: .07em;
  color: #ffbe5a;
}
.ccRules__body p{
  margin: 0;
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: rgba(219,219,219,.70);
}
.ccRules__body ul{
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ccRules__body li{
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(219,219,219,.70);
}
.ccRules__body strong{ color: rgba(219,219,219,.90); }

@media (prefers-reduced-motion: reduce){
  .ccBtn, .ccEquip__card{ transition: none; }
  .ccTimer__clock.is-alert, .ccEquip__card.is-bump{ animation: none; }
  .ccFlash{ animation: none; opacity: 0; }
}