/* Coin Machine. Everything is under .cm-root so it cannot restyle the page. */
.cm-root {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #031806;
  touch-action: none;
  color: #e7ffe7;
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.cm-root .cm-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.cm-root .cm-msgs {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: min(28rem, calc(100% - 24px));
  pointer-events: none;
  text-align: center;
}
.cm-root .cm-msg {
  margin: 0;
  font-weight: 800;
  font-size: clamp(15px, 3.4vmin, 28px);
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 0 #000, 0 0 12px rgba(0, 0, 0, 0.65);
}
.cm-root .cm-msg.good { color: #b6ff8a; }
.cm-root .cm-msg.bad { color: #ff9a9a; }
.cm-root .cm-msg.lite { color: #fff4b0; }
.cm-root .cm-help {
  display: none;
  position: absolute;
  z-index: 5;
  left: 50%;
  top: max(8px, env(safe-area-inset-top));
  transform: translateX(-50%);
  width: min(40rem, calc(100% - 20px));
  padding: 0.45rem 0.75rem 0.55rem;
  border: 1px solid rgba(180, 255, 140, 0.28);
  border-radius: 12px;
  background: rgba(0, 28, 8, 0.62);
  color: #e7ffe7;
  text-align: center;
  pointer-events: none;
  font-weight: 600;
  font-size: clamp(11px, 2.2vh, 15px);
  line-height: 1.35;
  text-shadow: 0 1px 0 #000;
}
.cm-root.cm-title .cm-help { display: block; }
.cm-root .cm-help p { margin: 0.15rem 0 0; }
.cm-root .cm-help p:first-child { margin-top: 0; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.cm-root .cm-rotate { display: none; }
.cm-root .cm-stand { max-height: 58cqh; overflow: auto; }
.cm-root .cm-stand .sgp-row { grid-template-columns: 2em minmax(0, 1fr) auto auto; padding: 0.28em 0.7em; }
.cm-root .cm-stand .sgp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.cm-root .cm-stand .sgp-drop { font-variant-numeric: tabular-nums; color: var(--sgp-muted); }
.cm-root .cm-head { font-size: 0.72em; letter-spacing: 0.04em; text-transform: uppercase; background: none !important; }
.cm-root .cm-head .sgp-rank { visibility: hidden; }
.cm-root .cm-plus { color: var(--sgp-good); font-weight: 800; }
.cm-root .cm-need { margin-top: 0.8em; }
.cm-root .sgp .sgp-card { max-height: 100%; overflow: auto; }
.cm-root .cm-toggle.cm-on { box-shadow: inset 0 0 0 1px var(--sgp-good); }
.cm-root .cm-key {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  z-index: 6;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 5px 6px;
  border-radius: 8px;
  background: rgba(8, 14, 22, 0.9);
  color: #f4f7fb;
  pointer-events: none;
  overflow: hidden;
}
.cm-root .cm-key-title {
  margin: 0 0 3px;
  font-weight: 800;
  font-size: clamp(9px, 1.7vmin, 13px);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.cm-root .cm-key-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cm-root .cm-key-list li {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.cm-root .cm-key-list img {
  width: clamp(14px, 2.4vmin, 22px);
  height: clamp(14px, 2.4vmin, 22px);
  flex: none;
}
.cm-root .cm-key-list span {
  min-width: 0;
  font-weight: 750;
  font-size: clamp(9px, 1.8vmin, 14px);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.cm-root .cm-key.cm-key-slim {
  padding: 3px 2px 4px;
}
.cm-root .cm-key.cm-key-slim .cm-key-list li {
  flex-direction: column;
  gap: 0;
  align-items: center;
}
.cm-root .cm-key.cm-key-slim .cm-key-title,
.cm-root .cm-key.cm-key-slim .cm-key-list span {
  font-size: 8px;
  text-align: center;
}
.cm-root .cm-evil {
  font-size: 1.05em;
  line-height: 1;
}
.cm-root img.cm-evil {
  width: 1.05em;
  height: 1.05em;
}
.cm-root .cm-bonus[hidden],
.cm-root .cm-note[hidden] { display: none !important; }
.cm-root .cm-bonus {
  position: absolute;
  left: 50%;
  z-index: 6;
  transform: translateX(-50%);
  width: min(34rem, calc(100% - 9.5rem));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.cm-root .cm-lite,
.cm-root .cm-note {
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 4px 10px 5px;
  border: 1px solid var(--c, #ffe14a);
  border-radius: 10px;
  background: color-mix(in srgb, var(--c, #ffe14a) 78%, #241808);
  color: #fff;
  font-weight: 750;
  font-size: clamp(11px, 2.15vmin, 15px);
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: 0 0 14px color-mix(in srgb, var(--c, #ffe14a) 65%, transparent);
}
.cm-root .cm-lite p { margin: 0; }
.cm-root .cm-lite-bar {
  display: block;
  height: 4px;
  margin-top: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.cm-root .cm-lite-bar b {
  display: block;
  height: 100%;
  width: 100%;
  background: #fff;
  transform-origin: left center;
}
.cm-root .cm-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.cm-root .cm-lite {
  animation: cmIn 0.38s cubic-bezier(.2, .8, .2, 1) both, cmPulse 1.8s ease-in-out 0.38s infinite;
}
.cm-root .cm-note { animation: cmIn 0.38s cubic-bezier(.2, .8, .2, 1) both; }
.cm-root .cm-lite-out,
.cm-root .cm-note.cm-lite-out { animation: cmOut 0.32s ease both; }
@keyframes cmIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.82); }
  to { opacity: 1; transform: none; }
}
@keyframes cmPulse {
  50% { box-shadow: 0 0 22px color-mix(in srgb, var(--c, #ffe14a) 90%, transparent); transform: scale(1.03); }
}
@keyframes cmOut {
  to { opacity: 0; transform: translateY(-6px) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .cm-root .cm-lite,
  .cm-root .cm-note {
    animation: cmFade 0.2s ease both;
  }
  .cm-root .cm-lite-out,
  .cm-root .cm-note.cm-lite-out { animation: cmFadeOut 0.2s ease both; }
}
@keyframes cmFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cmFadeOut { to { opacity: 0; } }