/* Crimson is Twinfix's signature; all object edges are borderOf(their fill). */
:root {
 --paper: #F2C14E;
 --surface: #F2C14E;
 --ink-2: #4C0B17;
 --signal: #3D7BE0;
 --signal-ink: #2B569D;
 --line: #A98737;
}
.bg-ob { --ob-ink: #A98737; }
.bg-ctl { --ctl-fill: #F2C14E; --ctl-edge: #A98737; --ctl-fg: #4C0B17; }
.bg-overlay { background: none; }
.bg-modal {
 padding: 28px 24px 24px;
 gap: 18px;
 border: 2px solid #A98737;
 box-shadow: none;
 animation: twinfix-in 200ms ease-out;
}
.bg-modal__title { font-size: 44px; }
.bg-modal__body { font-variant-numeric: tabular-nums; }
.bg-modal__stat { background: #3D7BE0; color: #F6F3EC; border: 2px solid #2B569D; }
.bg-modal__stat strong { font-size: 52px; }
.bg-btn { border: 2px solid #2B569D; border-radius: 18px; }
.bg-btn--primary, .bg-btn--primary:active { background: #3D7BE0; color: #F6F3EC; box-shadow: none; }
.bg-btn--secondary { background: #FF5A1F; border-color: #B33F16; box-shadow: none; }
[data-twinfix-state="ready"] .bg-modal { padding-top: 34px; }
[data-twinfix-state="ready"] .bg-modal::before {
 content: '2 ↔ 5';
 display: grid;
 place-items: center;
 width: 220px;
 height: 104px;
 margin: 0 auto 6px;
 border-radius: 30px;
 border: 2px solid #2B569D;
 background: #3D7BE0;
 color: #F6F3EC;
 font: 800 52px/1 var(--f-display);
}
@keyframes twinfix-in { from { transform: translateY(8px) scale(.97); } }
@media (prefers-reduced-motion: reduce) {
 .bg-modal { animation: none; }
 .bg-btn:active { transform: none; }
}

/* Results follow the house hierarchy: orange replay, outlined challenge on paper. */
[data-twinfix-state="over"] .bg-modal {
 --paper: #F6F3EC;
 --ink: #17171C;
 --ink-2: #17171C;
 background: #F6F3EC;
 border-color: #94928E;
 color: #17171C;
}
[data-twinfix-state="over"] .res-again,
[data-twinfix-state="over"] .res-again:active {
 background: #FF5A1F;
 border-color: #B33F16;
 color: #17171C;
 box-shadow: none;
}
[data-twinfix-state="over"] .bg-challenge,
[data-twinfix-state="over"] .bg-challenge:active {
 background: #F6F3EC;
 border-color: #94928E;
 color: #17171C;
 box-shadow: none;
}