/* The Rosewild (M11 track M, public/js/court_spring.ts): the Living Maze's banner, and the panels */
#csp-banner { top: calc(62px + var(--safe-t)); left: 50%; transform: translateX(-50%); padding: 3px 12px; border-radius: 10px; background: rgba(40, 24, 34, .62); border: 2px solid #c87a9a; color: #fff4f8; font-size: 13px; white-space: nowrap; pointer-events: none; text-shadow: 0 1px 0 #000; max-width: calc(100vw - 140px); overflow: hidden; text-overflow: ellipsis; }
#csp-banner span { color: #f8d8e4; }
#csp-banner .sub { color: #d8e8c8; }
#csp-banner .csp-sprite { color: #c8f0b0; }
body.pf-held #csp-banner { top: calc(62px + var(--pf-hold, 0px) + var(--safe-t)); }
@media (max-width: 600px) { #csp-banner { top: calc(128px + var(--safe-t)); left: 8px; right: calc(62px + var(--safe-r)); transform: none; font-size: 11px; white-space: normal; max-width: none; } }
@media (max-height: 500px) { #csp-banner { display: none !important; } } /* a phone held sideways: no room up top */

.csp-week { display: grid; gap: 4px; margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: #fbeef2; border: 1px solid #e8b8c8; font-size: 13px; }
.csp-week b { color: #8a3a5a; }
.csp-got { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 15px; }
.csp-got .ico { width: 32px; height: 32px; image-rendering: pixelated; }
.csp-fortune { font-style: italic; text-align: center; color: #7a4a6a; margin: 10px 4px 2px; }
.csp-briony { margin-top: 10px; padding-top: 6px; border-top: 1px dashed #c8b890; }
.csp-briony h4 { margin: 0 0 4px; }