/* Special counters + long-press feedback. Loaded after styles.css. */

:root{
  --poison:#9ee66f;
  --experience:#f4ca64;
  --speed:#7fc8ff;
}

/* The progress ring follows the visible life digits, including on rotated iPhone layouts. */
.life.holding::after{display:none!important}
.life{
  display:grid;
  place-items:center;
}
.lifeValue{
  position:relative;
  display:block;
  width:max-content;
  margin:auto;
  padding:0 8px;
  line-height:1;
}
.life.holding .lifeValue::after{
  content:"";
  position:absolute;
  inset:14% -4px 3%;
  z-index:2;
  padding:3px;
  pointer-events:none;
  border-radius:15px;
  background:conic-gradient(from -90deg,var(--warn) var(--hold-angle),rgba(255,255,255,.16) 0deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  filter:drop-shadow(0 0 5px rgba(255,204,102,.45));
  animation:life-hold-progress 300ms linear forwards;
}

/* Active special counters stay out of the life number and remain readable on phones. */
.counterBadges{
  position:absolute;
  top:calc(7px * var(--ui-scale));
  right:calc(8px * var(--ui-scale));
  z-index:5;
  display:flex;
  gap:4px;
  pointer-events:none;
}
.counterBadge{
  min-width:25px;
  height:24px;
  padding:2px 5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  border:1px solid #ffffff28;
  border-radius:999px;
  background:#071008d8;
  font-size:15px;
  font-weight:950;
  line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:none;
  box-shadow:0 2px 7px #0006;
}
.counterIcon{width:15px;height:15px;fill:currentColor;flex:0 0 auto}
.counterBadge.poison{color:var(--poison);border-color:color-mix(in srgb,var(--poison) 42%,transparent)}
.counterBadge.poison.hot{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 48%,transparent)}
.counterBadge.experience{color:var(--experience);border-color:color-mix(in srgb,var(--experience) 42%,transparent)}
.counterBadge.speed{color:var(--speed);border-color:color-mix(in srgb,var(--speed) 42%,transparent)}

/* Defeat reason sits directly under the central DEFEATED label. */
.dead{
  left:50%!important;
  right:auto!important;
  top:calc(50% + 26px)!important;
  bottom:auto!important;
  transform:translateX(-50%);
  min-width:max-content;
  text-align:center;
  font-size:11px!important;
  letter-spacing:.04em;
  color:var(--danger)!important;
  text-shadow:0 2px 8px #000b;
}
.p.life-defeat .dead{display:block!important}

.counterPanel{
  width:min(680px,92%);
  padding:14px 16px;
}
.counterPanel h2{text-align:center;margin:0 0 2px}
.counterPlayer{
  margin-bottom:10px;
  text-align:center;
  color:var(--mut);
  font-size:14px;
  font-weight:800;
}
.counterGrid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.specialCounterCard{
  min-width:0;
  padding:10px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#0d1118;
}
.specialCounterLabel{
  min-height:24px;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  font-size:15px;
  font-weight:950;
}
.specialCounterLabel .counterIcon{width:18px;height:18px}
.specialCounterCard.poison .specialCounterLabel{color:var(--poison)}
.specialCounterCard.experience .specialCounterLabel{color:var(--experience)}
.specialCounterCard.speed .specialCounterLabel{color:var(--speed)}
.specialCounterControls{
  display:grid;
  grid-template-columns:46px minmax(52px,1fr) 46px;
  gap:6px;
  align-items:center;
}
.specialCounterControls button{
  min-height:46px;
  padding:0;
  font-size:20px;
}
.counterInput{
  width:100%;
  height:46px;
  padding:0 4px;
  border:1px solid var(--line);
  border-radius:10px;
  outline:none;
  background:#090c11;
  text-align:center;
  font-size:25px;
  font-weight:950;
  font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
  pointer-events:none;
  -webkit-user-select:none;
  user-select:none;
  caret-color:transparent;
}
.counterInput::-webkit-inner-spin-button,
.counterInput::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#poisonInput{color:var(--poison)}
#experienceInput{color:var(--experience)}
#speedInput{color:var(--speed)}
.counterHint{
  min-height:14px;
  margin-top:6px;
  text-align:center;
  color:var(--mut);
  font-size:11px;
  font-weight:700;
}
.counterPanel .acts{margin-top:10px}
.counter-flipped .counterPanel{transform:rotate(180deg)}

/* The toolbar reset is intentionally hold-only and remains longer to avoid accidents. */
#quickReset{
  position:relative;
  overflow:hidden;
}
#quickReset.holding{
  color:var(--warn);
}
#quickReset.holding::after{
  content:"";
  position:absolute;
  inset:3px;
  z-index:3;
  padding:2px;
  pointer-events:none;
  border-radius:calc(10px * var(--tool-scale));
  background:conic-gradient(from -90deg,var(--warn) var(--hold-angle),rgba(255,255,255,.14) 0deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:quick-reset-progress 850ms linear forwards;
}
@keyframes quick-reset-progress{
  from{--hold-angle:0deg}
  to{--hold-angle:360deg}
}