/* Final club pass. Load AFTER club-fullscreen.css. All rules stay inside the
   live club; world art, music, captions and game balance belong to their owners.
   rhythmHUD owns position. This panel never draws an arena-sized hit layer. */
body.club-live #clubGame .arena #rhythmPanel {
  --rhythm-accent: #bcd9e8;
  position: absolute;
  z-index: 4;
  display: none;
  width: 250px;
  max-width: calc(100% - 16px);
  min-width: 0;
  margin: 0;
  padding: 6px 7px;
  border: 1px solid #798693;
  border-radius: 8px;
  color: #f6f3e9;
  background: linear-gradient(115deg, #20202a, #11131d);
  box-shadow: 0 4px 12px #0006, inset 0 1px #ffffff0d;
  backdrop-filter: none;
  opacity: 1;
  isolation: isolate;
  pointer-events: auto;
  touch-action: manipulation;
  transition: none;
  font-variant-numeric: tabular-nums;
}
body.club-live #clubGame .arena #rhythmPanel.on-floor:not([hidden]) { display: block; }
body.club-live #clubGame #rhythmPanel .rhythm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  min-width: 0;
  min-height: 18px;
  margin: 0 0 4px;
  line-height: 18px;
}
body.club-live #clubGame #rhythmPanel #rhythmHint {
  display: inline;
  flex: none;
  font-size: 9px;
  font-weight: 650;
  line-height: 18px;
  letter-spacing: .01em;
  color: #c1c4d0;
}
body.club-live #clubGame #rhythmGrade {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 850;
  font-style: normal;
  line-height: 18px;
  letter-spacing: .02em;
  text-align: center;
  white-space: nowrap;
  text-shadow: none;
  color: #f6f3e9;
}
/* Combo is part of the existing judgement, not another caption/overlay.
   Main hook: rhythmGrade.dataset.combo = c.combo > 1 ? ' · ×' + c.combo : ''. */
body.club-live #clubGame #rhythmGrade::after {
  content: attr(data-combo);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  color: #f5dcac;
}
body.club-live #clubGame #rhythmReward {
  flex: none;
  font-size: 10px;
  font-weight: 750;
  line-height: 18px;
  letter-spacing: 0;
  white-space: nowrap;
  text-align: right;
  color: #e5d9b6;
}
body.club-live #clubGame #rhythmTap {
  position: relative;
  display: block;
  width: 100%;
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid #697887;
  border-radius: 5px;
  overflow: hidden;
  color: #f6f3e9;
  background: repeating-linear-gradient(90deg, #d9e6f00a 0 1px, transparent 1px 12.5%), #0c101a;
  box-shadow: inset 0 1px 4px #0006;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: none;
}
body.club-live #clubGame #rhythmTap .rhythm-window {
  top: 0;
  bottom: 0;
  left: calc(22% - 18px);
  width: 36px;
  border-inline: 1px solid #bccfdd85;
  background: #9cc4da14;
  pointer-events: none;
}
body.club-live #clubGame #rhythmTap .rhythm-target {
  left: 22%;
  top: 50%;
  width: 30px;
  height: 30px;
  border: 2px solid #c7dfec;
  border-radius: 5px;
  color: #c7dfec;
  background: #172333;
  font-size: 16px;
  line-height: 26px;
  box-shadow: none;
  pointer-events: none;
}
body.club-live #clubGame #rhythmTap .beat-note {
  left: -11px;
  top: 9px;
  width: 22px;
  height: 24px;
  font-size: 21px;
  line-height: 24px;
  text-align: center;
  color: #f1e5ba;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}
body.club-live #clubGame #rhythmTap .beat-note.hit { opacity: .18; }
body.club-live #clubGame #rhythmTap .rhythm-key { display: none; }
body.club-live #clubGame #rhythmTap.beat-now .rhythm-target {
  color: #111827;
  background: #d8e8ed;
  border-color: #eff8ff;
  box-shadow: 0 0 9px #a4d3e935;
}
body.club-live #clubGame #rhythmTap:focus-visible {
  outline: 2px solid #ffe1a6;
  outline-offset: 3px;
}
body.club-live #clubGame #rhythmTap:enabled:active,
body.club-live #clubGame #rhythmPanel.is-pressed #rhythmTap {
  border-color: #f4e6be;
  background-color: #263546;
  box-shadow: inset 0 0 0 1px #f4e6be66;
  transform: none;
}
body.club-live #clubGame #rhythmPanel.is-pressed .rhythm-target {
  border-width: 3px;
  color: #152231;
  background: #eee3c2;
}
body.club-live #clubGame #rhythmPanel[data-grade="perfect"] { border-color: #e7d59b; }
body.club-live #clubGame #rhythmPanel[data-grade="good"] { border-color: #99d5be; }
body.club-live #clubGame #rhythmPanel[data-grade="miss"] { border-color: #edb29d; }
body.club-live #clubGame #rhythmGrade[data-grade="ИДЕАЛЬНО"] { color: #f7e5a9; }
body.club-live #clubGame #rhythmGrade[data-grade="ЧЁТКО"],
body.club-live #clubGame #rhythmGrade[data-grade="НОРМАЛЬНО"] { color: #b4ebd1; }
body.club-live #clubGame #rhythmGrade[data-grade="ПЛОХО"] { color: #ffd1bd; }

/* Existing input controls get the same short feedback for keyboard and touch.
   Main may mirror held direction/action state with .is-pressed. */
body.club-live #clubGame .dpad button:active,
body.club-live #clubGame .dpad button.is-pressed,
body.club-live #clubGame .combat-controls button.is-pressed {
  border-color: #f4dc9f;
  box-shadow: inset 0 0 0 2px #f4dc9f66;
  background: #4b4143;
}

@media (max-width: 360px) {
  body.club-live #clubGame .arena #rhythmPanel { width: 224px; }
  body.club-live #clubGame #rhythmPanel #rhythmHint { display: none; }
  body.club-live #clubGame #rhythmGrade { text-align: left; padding-left: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  body.club-live #clubGame #rhythmPanel *,
  body.club-live #clubGame .dpad button,
  body.club-live #clubGame .combat-controls button {
    animation: none !important;
    transition: none !important;
  }
  /* Notes still communicate timing, but no flashing beat glow is necessary. */
  body.club-live #clubGame #rhythmTap.beat-now .rhythm-target {
    color: #c7dfec;
    background: #172333;
    border-color: #c7dfec;
    box-shadow: none;
  }
  body.club-live #clubGame #rhythmTap .beat-note { will-change: auto; }
}
@media (forced-colors: active) {
  body.club-live #clubGame .arena #rhythmPanel,
  body.club-live #clubGame #rhythmTap,
  body.club-live #clubGame #rhythmTap .rhythm-target {
    border-color: ButtonText;
    color: ButtonText;
    background: Canvas;
    box-shadow: none;
  }
  body.club-live #clubGame #rhythmTap .beat-note { color: ButtonText; }
  body.club-live #clubGame #rhythmTap .rhythm-window { outline: 1px solid Highlight; }
}

/* 0.38 — no beer in the club: the inventory cell is the bar's Кировская (it opens the bar only at the counter). */
body.club-live #clubGame #clubDrink.club-bar-cell { cursor:help; }
body.club-live #clubGame #clubDrink.club-bar-cell.at-bar { cursor:pointer; border-color:#e7cf8a; box-shadow:0 0 0 1px #e7cf8a55,0 0 12px #e7cf8a33; }
body.club-live #clubGame #clubDrink.club-bar-cell.is-empty > img { opacity:.45; filter:grayscale(.6); }
body.club-live .club-inventory-copy > small { font-size:9px; line-height:1; letter-spacing:.08em; text-transform:uppercase; color:var(--club-muted,#b9ab8f); }
/* Patience is frozen for the night: a cool, still bar. */
body.club-live #clubNeed { background:linear-gradient(90deg,#86b8cf,#c4e3ef); }
body.club-live #clubNeedText { color:#cfe8f2; }

/* The club sign, read out by Babay: the rule being read is lit. */
#modal.club-sign-dialog .club-sign-rules { display:grid; gap:6px; margin:10px 0 8px; padding:0; list-style:none; counter-reset:rule; }
#modal.club-sign-dialog .club-sign-rules li { counter-increment:rule; position:relative; padding:7px 10px 7px 36px; border:1px solid #ffffff1a; border-radius:10px; background:#ffffff0a; line-height:1.35; transition:background .25s,border-color .25s,color .25s,box-shadow .25s; }
#modal.club-sign-dialog .club-sign-rules li::before { content:counter(rule); position:absolute; left:9px; top:7px; width:19px; height:19px; border-radius:50%; background:#ffffff1f; font:800 11px/19px system-ui,sans-serif; text-align:center; }
#modal.club-sign-dialog .club-sign-rules li.is-reading { border-color:#ffd65c; background:#ffd65c1f; color:#fff4d2; box-shadow:0 0 14px #ffc93d33; }
#modal.club-sign-dialog .club-sign-rules li.is-reading::before { background:#ffd65c; color:#2b1d06; }
#modal.club-sign-dialog .club-sign-keys { font-size:13px; line-height:1.45; opacity:.85; }
@media (prefers-reduced-motion: reduce) { #modal.club-sign-dialog .club-sign-rules li { transition:none; } }