.cr-layout { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .cr-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.cr-banner { min-height: 44px; }
.cr-odds { margin: 0; text-align: center; font-weight: 800; color: var(--text-2); font-size: 15px; word-break: keep-all; }
.cr-fair { line-height: 1.6; }
.cr-stage { width: 100%; max-width: 420px; margin: 0 auto; }
.cr-svg { display: block; width: 100%; height: auto; }
.cr-cloud-body { fill: #dce7ff; stroke: #5f659a; stroke-width: 4; stroke-linejoin: round; }
.cr-blush { fill: #f0abc1; opacity: .8; }
.cr-sleep-eyes { fill: none; stroke: #3b416b; stroke-width: 5; stroke-linecap: round; }
.cr-awake-eyes { fill: #3b416b; opacity: 0; }
.cr-yawn { fill: #8e87b9; }
.cr-zzz { fill: #8b85ba; font-size: 24px; font-weight: 800; }
.cr-svg.is-snap .cr-awake-eyes { opacity: 1; }
.cr-svg.is-snap .cr-sleep-eyes, .cr-svg.is-snap .cr-zzz { opacity: 0; }
.cr-svg.is-snap .cr-cloud { animation: cr-wake .4s ease-out; }
.cr-svg.is-twitch .cr-cloud { animation: cr-twitch .32s ease-in-out; }
.cr-stars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cr-star {
  position: relative; min-width: 44px; min-height: 58px; padding: 4px; border: 1px solid var(--border-strong);
  border-radius: 14px; background: var(--surface); color: #a46c00; cursor: pointer;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent;
}
.cr-star-symbol { font-size: 39px; line-height: 1; color: #efb844; transition: transform .18s ease; }
.cr-star-number { position: absolute; font-size: 12px; font-weight: 900; color: #342b1f; }
.cr-star:hover:not(:disabled) .cr-star-symbol { transform: scale(1.1); }
.cr-star:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.cr-star:disabled { cursor: default; background: var(--surface-2); }
.cr-star.is-pressed .cr-star-symbol { color: var(--border-strong); transform: scale(.7); }
.cr-star.is-pressed .cr-star-number { color: var(--text-2); }
@keyframes cr-twitch { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(5px); } }
@keyframes cr-wake { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-9px); } }
.game-shell.is-full .cr-layout { flex: 1; align-content: center; }
@media (prefers-reduced-motion: reduce) {
  .cr-cloud { animation: none !important; }
  .cr-star-symbol { transition: none; }
}