/* Mystery Bowl (/en/arcade/mystery-bowl). Site tokens only; no colour-only signal
   (every state also has a text label). Loaded after arcade.css. */
.arc-game .arc { padding: 0; }
.arc-hero__kicker a { color: inherit; text-decoration: none; }
.arc-hero__kicker a:hover, .arc-hero__kicker a:focus-visible { color: var(--accent); text-decoration: underline; }

.bowl { display: flex; flex-direction: column; gap: 1rem; }
.bowl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; padding: 0.6rem 1.1rem 0; }
.bowl-title { margin: 0; font-family: var(--font-serif); font-size: 1.4rem; }
.bowl-title:focus { outline: none; }
.bowl-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bowl-meta { margin: 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-3); }
.bowl-head .arc-muted { flex-basis: 100%; }

.bowl-course, .bowl-archive {
    padding: 1rem 1.1rem; border: 1px solid var(--line); border-left: 4px solid var(--line-strong);
    border-radius: var(--radius); background: var(--bg-2);
}
.bowl-course.is-won { border-left-color: var(--accent); }
.bowl-course.is-lost { border-left-color: var(--ink-3); border-left-style: dashed; }
.bowl-course__title { margin: 0 0 0.6rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.bowl-status { color: var(--ink); letter-spacing: 0.04em; }

.bowl-clues { margin: 0 0 0.6rem; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.bowl-clues__item { line-height: 1.5; }
.bowl-clues__n { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-3); }
.bowl-clue { margin: 0 0 0.4rem; line-height: 1.55; }
.bowl-range { margin: 0 0 0.4rem; font-family: var(--font-mono); }
.bowl-left { margin-bottom: 0.5rem; }

.bowl-guess { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.bowl-guess[hidden] { display: none; }
.bowl-guess__label { flex-basis: 100%; font-size: 0.88rem; color: var(--ink-2); }
.bowl-guess__input, .bowl-archive__select {
    flex: 1 1 14rem; min-height: 44px; padding: 0.45rem 0.7rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg); color: var(--ink); font: inherit; font-family: var(--font-mono);
}
.bowl-guess__input:focus-visible, .bowl-archive__select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bowl-guess .btn { min-height: 44px; }

.bowl-fb { min-height: 1.4em; margin: 0.5rem 0 0; font-weight: 600; }
.bowl-tried { margin-top: 0.3rem; font-family: var(--font-mono); overflow-wrap: anywhere; }
.bowl-reveal { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.bowl-reveal[hidden] { display: none; }
.bowl-reveal p { margin: 0 0 0.45rem; line-height: 1.55; }
.bowl-takeaway { font-weight: 600; }
.bowl-links a { color: var(--accent); }

.bowl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.bowl-foot .btn[hidden] { display: none; }
.bowl-countdown { margin: 0; font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-3); }
.bowl-rollover { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.bowl-rollover[hidden] { display: none; }
.bowl-rollover p { margin: 0; }
.bowl-archive[hidden] { display: none; }