/* Rulebreak's flat violet stage. Every object border is borderOf(its fill). */
:root {
  --game-bg: #A46EFF;
  --paper: #D8BBFF;
  --surface: #F2C14E;
  --ink-2: #3E2A61;
  --ink-3: #502A89;
  --signal: #F2C14E;
  --signal-ink: #502A89;
  --signal-soft: #D8BBFF;
  --line: #9783B3;
  --e1: none;
  --e2: none;
}
.bg-overlay { background: #A46EFF; padding: 24px; }
.bg-modal { background: #D8BBFF; border: 2px solid #9783B3; padding: 26px 20px 22px; gap: 20px; animation: rb-pop 220ms ease-out; }
.bg-modal__title { font-size: 38px; }
.bg-modal__eyebrow { color: #3E2A61; }
.bg-btn { border: 2px solid #A98737; box-shadow: none; min-height: 58px; border-radius: 20px; font-size: 22px; }
.bg-btn--primary, .bg-btn--primary:active { background: #F2C14E; box-shadow: none; }
.bg-btn--secondary { background: #D8BBFF; border-color: #9783B3; box-shadow: none; }
.bg-kbd { display: none; }
.bg-ctl { --ctl-fill: #D8BBFF; --ctl-edge: #9783B3; --ctl-fg: #3E2A61; }
.bg-ob { --ob-ink: #9783B3; }
.bg-modal__stat { background: #D8BBFF; padding: 0; }
.bg-modal__stat strong { font-size: 76px; }
.bg-modal__body { margin: 0; color: #3E2A61; }
[data-phase="ready"] .bg-modal { background: #A46EFF; border: 0; padding: 0; gap: 30px; width: 100%; max-width: 340px; }
[data-phase="ready"] .bg-modal__title { font-size: 55px; letter-spacing: -.045em; }
.rb-emblem { height: 142px; display: flex; justify-content: center; align-items: center; gap: 8px; }
.rb-emblem span { display: block; flex: 0 0 86px; height: 86px; border: 2px solid #A98737; background: #F2C14E; border-radius: 50%; }
.rb-emblem span:nth-child(2) { background: #FF5A1F; border-color: #B33F16; border-radius: 26px; margin-top: -48px; }
.rb-emblem span:nth-child(3) { background: #7FC8C0; border-color: #598C86; border-radius: 32px; height: 64px; margin-top: 24px; }
[data-phase="over"] .bg-modal__body { padding: 18px 10px 22px; background: #F2C14E; border: 2px solid #A98737; border-radius: 20px; font: 800 34px/1.08 var(--f-display); }
[data-phase="over"] .bg-modal__body::before { content: 'THE RULE'; display: block; font: 700 11px/1 var(--f-ui); letter-spacing: .08em; margin-bottom: 12px; }
.bg-go__stamp { background: #D8BBFF; border-color: #9783B3; color: #3E2A61; }
.bg-go__word, .bg-go__label { color: #3E2A61; }
[data-go="stamp"] .bg-go__stamp { animation: rb-pop 220ms ease-out; }
@keyframes rb-pop { from { transform: scale(.88); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .bg-modal, [data-go="stamp"] .bg-go__stamp { animation: none; transform: none; }
}

/* Results follow the house hierarchy (as Twinfix, #180): orange Play again. */
.bg-modal .res-again,
.bg-modal .res-again:active {
  background: #FF5A1F;
  border-color: #B33F16;
  color: #17171C; /* 5.7:1 on #FF5A1F; the game ink is too light on orange */
  box-shadow: none;
}