/* Round-Up (roundup.js). The field is a light, grassy card in both themes. */
@import url('/lib/audio/sound.css');

.roundup { max-width: 60rem; }
.roundup [hidden] { display: none !important; }
.ru-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; }
.ru-head h1 { margin: 0; }
.ru-sound { display: flex; align-items: center; gap: 0.6rem; }
.roundup .tagline { max-width: 40rem; }

/* The fields */
.ru-levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.55rem; max-width: 48rem; }
.ru-level { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.5rem; align-items: center; text-align: left; padding: 0.55rem 0.9rem; border-radius: 1.1rem; }
.ru-level .n { grid-row: span 2; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--mint); color: #3a1636; font-weight: 600; }
.ru-level b { font-weight: 500; line-height: 1.15; }
.ru-level .stars { color: var(--shine); letter-spacing: 0.08em; font-size: 0.9rem; }
.ru-level.next { border-color: var(--candyfloss-deep); box-shadow: 0 0 0 3px color-mix(in srgb, var(--candyfloss) 35%, transparent); }
.ru-totals, .ru-how { color: var(--ink-soft); max-width: 40rem; }
.ru-go { font-size: 1.15rem; padding: 0.8rem 1.6rem; }

/* Playing */
.ru-play { position: relative; display: grid; gap: 0.5rem; }
.ru-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1.2rem; font-family: var(--font-display); }
.ru-bar b { font-weight: 600; color: var(--candyfloss-deep); }
.ru-time { font-variant-numeric: tabular-nums; margin-left: auto; }
.ru-say { margin: 0; color: var(--ink-soft); }
.ru-stage { display: flex; justify-content: center; }
.ru-field { display: block; border-radius: 1.2rem; border: 3px solid #9ed58a; box-shadow: var(--shadow); touch-action: none; cursor: crosshair; background: #cdeebd; }
.ru-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.ru-woof { min-width: 7.5rem; font-size: 1.1rem; }
.ru-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* The end card */
.ru-card { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: min(26rem, calc(100% - 2rem)); padding: 1.1rem 1.4rem; background: var(--paper); border: 2px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; gap: 0.5rem; text-align: center; animation: ru-pop 380ms cubic-bezier(.3, 1.6, .5, 1); }
.ru-card h2 { margin: 0; font: 600 var(--step-2) var(--font-display); color: var(--candyfloss-deep); }
.ru-card p { margin: 0; }
.ru-stars { font-size: 2.2rem; color: var(--shine); letter-spacing: 0.1em; }
.ru-hint { color: var(--ink-soft); }
.ru-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 0.3rem; }
@keyframes ru-pop { from { transform: translate(-50%, -50%) scale(0.7); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ru-card { animation: none; } }

/* Full screen: the field takes the room, the controls stay off the edges. */
.fs.full .roundup { max-width: none; padding-top: var(--edge-y); padding-bottom: var(--edge-y); }
.fs.full .roundup > .crumb, .fs.full .roundup > .tagline, .fs.full .ru-say { display: none; }