/* 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}
}

/* Apple-inspired interaction polish: hierarchy, direct feedback and restrained material. */
html,body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",sans-serif;
  font-optical-sizing:auto;
}
button{
  -webkit-tap-highlight-color:transparent;
}

/* Make the life total the strongest typographic voice without crushing the digits together. */
.life{
  font-weight:900;
  letter-spacing:-.042em;
}
.name{
  font-weight:800;
  letter-spacing:-.01em;
}
.cw{font-weight:750;letter-spacing:.01em}
.cv{font-weight:850;letter-spacing:-.025em}
.cb button,.delta,.quick5{font-weight:800}

/* Immediate physical response. Keep it subtle because these controls are tapped repeatedly. */
.delta,.quick5,.cb button,#tools>button,.dw>button,.dm button,.modal button,.specialCounterControls button{
  transform:scale(1);
  transform-origin:center;
  transition:transform 105ms ease-out,background-color 140ms ease-out,border-color 140ms ease-out,box-shadow 160ms ease-out,opacity 140ms ease-out;
}
.delta:active,.quick5:active,.cb button:active,#tools>button:active,.dw>button:active,.dm button:active,.modal button:active,.specialCounterControls button:active{
  transform:scale(.955);
}
.lifeValue{
  transform:scale(1);
  transition:transform 105ms ease-out,text-shadow 140ms ease-out;
}
.life:active .lifeValue{transform:scale(.985)}

/* Gameplay controls stay quiet until touched. */
.delta,.quick5{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.075);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}
.quick5{background:rgba(5,8,12,.50)}
.delta:active,.quick5:active,.cmd button:active{
  background:rgba(255,255,255,.15);
}
.cmd{
  border-color:rgba(255,255,255,.10);
  background:rgba(4,7,11,.43);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.cc{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.cb button{
  border-color:rgba(255,255,255,.10);
  background:rgba(255,255,255,.07);
}

/* One floating utility material instead of five unrelated boxes. */
#tools{
  gap:2px;
  padding:4px 0;
  border:1px solid rgba(255,255,255,.13);
  border-radius:calc(16px * var(--tool-scale));
  background:rgba(18,22,31,.74);
  -webkit-backdrop-filter:blur(18px) saturate(155%);
  backdrop-filter:blur(18px) saturate(155%);
  box-shadow:0 10px 28px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.10);
}
#tools>button,.dw>button{
  border-color:transparent;
  border-radius:calc(10px * var(--tool-scale));
  background:transparent;
  box-shadow:none;
}
@media (hover:hover){
  #tools>button:hover,.dw>button:hover{background:rgba(255,255,255,.07)}
}
#tools>button:active,.dw>button:active{background:rgba(255,255,255,.14)}

/* Dice choices originate from the dice button and return to the same place. */
.dm{
  display:flex;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translateY(-50%) translateX(7px) scale(.94);
  transform-origin:right center;
  border-color:rgba(255,255,255,.14);
  background:rgba(18,22,31,.88);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 12px 30px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.09);
  transition:opacity 150ms ease-out,transform 180ms cubic-bezier(.2,.75,.25,1),visibility 180ms;
}
.dm.show{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transform:translateY(-50%) translateX(0) scale(1);
}
.dm button{
  border-color:rgba(255,255,255,.11);
  background:rgba(255,255,255,.075);
  font-weight:750;
}

/* Modal surfaces materialize instead of abruptly appearing. */
.ov{
  display:flex;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  background:rgba(3,5,8,.36);
  -webkit-backdrop-filter:blur(0) saturate(100%);
  backdrop-filter:blur(0) saturate(100%);
  transition:opacity 180ms ease-out,backdrop-filter 220ms ease-out,-webkit-backdrop-filter 220ms ease-out,visibility 220ms;
}
.ov.show{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  background:rgba(3,5,8,.64);
  -webkit-backdrop-filter:blur(11px) saturate(125%);
  backdrop-filter:blur(11px) saturate(125%);
}
.modal{
  border-color:rgba(255,255,255,.13);
  background:rgba(21,25,35,.97);
  box-shadow:0 22px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);
  transform:translateY(5px) scale(.965);
  transform-origin:center;
  transition:transform 220ms cubic-bezier(.2,.78,.24,1),box-shadow 180ms ease-out;
}
.ov.show .modal{transform:translateY(0) scale(1)}
.counter-flipped .counterPanel{transform:rotate(180deg) translateY(5px) scale(.965)}
.counter-flipped.show .counterPanel{transform:rotate(180deg) translateY(0) scale(1)}
.modal h2{
  font-weight:800;
  letter-spacing:-.025em;
}
.modal button{
  border-color:rgba(255,255,255,.11);
  background:rgba(255,255,255,.075);
}
.specialCounterCard{
  border-color:rgba(255,255,255,.10);
  background:#0d1118;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
.specialCounterLabel{font-weight:800}
.counterInput{font-weight:850;letter-spacing:-.025em}
.counterBadge{font-weight:800}

/* A held action should look armed before it commits. */
#quickReset.holding{
  background:rgba(255,204,102,.10);
  box-shadow:inset 0 0 0 1px rgba(255,204,102,.18);
}
.life.holding .lifeValue{
  transform:scale(.985);
  text-shadow:0 0 14px rgba(255,204,102,.35),0 6px 18px #0006;
}

/* Respect platform accessibility preferences without removing useful state feedback. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
  }
  .delta,.quick5,.cb button,#tools>button,.dw>button,.dm,.dm button,.modal,.modal button,.specialCounterControls button,.lifeValue{
    transition-duration:0.01ms!important;
  }
  .die,.rolling .face{
    animation:none!important;
  }
  .ov,.ov.show{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

@media (prefers-reduced-transparency:reduce){
  #tools,.dm,.modal{
    background:#171c26;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
  .ov,.ov.show{
    background:rgba(3,5,8,.88);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

@media (prefers-contrast:more){
  #tools,.dm,.modal,.specialCounterCard{
    border-color:rgba(255,255,255,.42);
  }
  .delta,.quick5,.cb button,.modal button,.dm button{
    border-color:rgba(255,255,255,.34);
  }
  .name,.cw,.counterHint,.counterPlayer{color:#fff}
}