/* The screen of a daily game, after the LinkedIn games Daniel sent as the reference (docs/referencias/linkedin-jogos.png):
   a bar with the way back, the name and the rules; the clock, the game number and Limpar; the board; Desfazer and Dica;
   the rules that open and close. Colours and type from jambalaia.css. No text under 1rem. */
.game { max-width: 34rem; margin: 0 auto; padding: .75rem var(--side) 2rem; display: grid; gap: 1rem; }
.game-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; }
.game-top h1 { font-size: 1.5rem; text-align: center; }
.game-top .back, .game-top .help { font: 700 1rem var(--title); color: var(--brand); background: var(--lilac); border: 0; border-radius: 999px; padding: .45rem 1rem; cursor: pointer; }
.game-top .back { justify-self: start; }
.game-top .help { justify-self: end; }
.game-bar { display: flex; align-items: center; gap: .75rem; }
.timer { font: 800 1.25rem var(--title); color: var(--ink); font-variant-numeric: tabular-nums; }
.number { color: var(--text); }
.game-bar .soft { margin-left: auto; }
.soft { font: 700 1.0625rem var(--title); color: var(--ink); background: #f1edf4; border: 0; border-radius: 999px; padding: .6rem 1.2rem; cursor: pointer; }
.soft:active { transform: scale(.97); }
.game-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.game-actions .soft { padding: .8rem; }
.board { width: 100%; aspect-ratio: 1; touch-action: manipulation; user-select: none; -webkit-user-select: none; }

/* rules */
.how { background: var(--card); border-radius: 1.25rem; box-shadow: var(--shadow); padding: 0 1.25rem; }
.how summary { font: 800 1.125rem var(--title); color: var(--ink); padding: 1rem 0; cursor: pointer; }
.how ul, .how ol { margin: 0 0 1.25rem; padding-left: 1.25rem; display: grid; gap: .5rem; }

/* end of the game */
.done { background: var(--purple); color: #fff; border-radius: 1.25rem; padding: 1.5rem; display: grid; gap: .75rem; justify-items: start; }
.done h2 { color: #fff; font-size: 1.75rem; }
.done p { margin: 0; font-size: 1.125rem; }
.done .links { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
.done .links a { font: 700 1.0625rem var(--title); color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.finished .game-actions, .finished .game-bar .soft { opacity: .45; pointer-events: none; }

/* the Diário page: today's games */
.today { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.today .card { padding: 1.25rem; gap: .35rem; }
.today .name { padding: 0; font-size: 1.375rem; }
.today .meta { padding: 0; }
.today .state { font: 800 1.0625rem var(--title); color: var(--green); padding: 0; }
.intro { margin: -.25rem 0 1.25rem; font-size: 1.125rem; }