/* The screen of a daily game, as in the design Daniel approved on 12/10/2026 ("melhorou"; tmp/ui/bamboleio/jogo/):
   the site's menu on top; the game inside a card (its picture, name, number and date, the clock, Limpar, the board,
   Desfazer and Dica); beside it on a computer, and under it on a phone, the rules ("Como jogar") and the other games
   of today. Before the first game of the day an entry screen (picture, name, rule, time, Jogar) takes the card's
   place. Colours and type from bamboleio.css. No text under 1rem. */
.play { max-width: 104rem; margin: 0 auto; padding: .5rem var(--side) 3rem; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(20rem, 1fr);
  gap: clamp(1rem, 2vw, 2rem); align-items: start; }
.game-card { background: var(--card); border-radius: 1.75rem; box-shadow: var(--shadow); padding: clamp(1.25rem, 2.2vw, 2.5rem); display: grid; gap: 1.25rem; }

/* the card's top: picture, name and date, clock, Limpar */
.game-head { display: grid; grid-template-columns: auto 1fr auto auto; grid-template-areas: "thumb name timer clear"; align-items: center; gap: .75rem 1rem; }
.game-thumb { grid-area: thumb; display: grid; place-items: center; width: clamp(3.5rem, 5vw, 5.5rem); aspect-ratio: 1; }
.game-thumb > img, .game-thumb > span { width: 100%; }
.game-name { grid-area: name; }
.game-name h1 { font-size: clamp(1.75rem, 3vw, 3rem); }
.game-day { margin: .15rem 0 0; color: #8a7aa8; font: 700 clamp(1rem, 1.3vw, 1.5rem) var(--title); }
.timer-pill { grid-area: timer; background: #f1ebfd; border-radius: 1rem; padding: .55rem 1.1rem; }
.timer { font: 800 clamp(1.25rem, 1.8vw, 2rem) var(--title); color: var(--ink); font-variant-numeric: tabular-nums; }
.clear { grid-area: clear; font: 800 clamp(1.0625rem, 1.5vw, 1.75rem) var(--title); color: #fff; background: var(--orange); border: 0; border-radius: 999px; padding: .65rem 1.6rem; cursor: pointer; }

/* board, options, buttons */
.board-wrap { position: relative; display: grid; place-items: center; }   /* a game can draw on top of its board (Sudoku's glowing borders) */
.board { width: 100%; max-width: 46rem; aspect-ratio: 1; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.game-options:empty { display: none; }
.game-options { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; font-size: 1.0625rem; color: var(--ink); }
.game-options label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.game-options input { width: 1.4rem; height: 1.4rem; accent-color: var(--brand); }
.game-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.undo { font: 800 clamp(1.125rem, 1.6vw, 1.875rem) var(--title); color: var(--brand); background: #ede4fb; border: 0; border-radius: 999px; padding: .85rem; cursor: pointer; }
.hint { font-size: clamp(1.125rem, 1.6vw, 1.875rem); padding: .85rem; border: 0; cursor: pointer; }
.undo:active, .hint:active, .clear:active { transform: scale(.98); }

/* entry screen */
.entering .game-head, .entering .board-wrap, .entering .game-actions, .entering .game-options, .entering .keypad { display: none; }
.entry { display: grid; justify-items: center; text-align: center; gap: .75rem; padding: 1rem 0 .5rem; }
.entry-thumb { display: grid; place-items: center; width: clamp(8rem, 14vw, 12rem); aspect-ratio: 1; }
.entry-thumb > img, .entry-thumb > span { width: 100%; }
.entry-name { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.entry-day { margin: 0; color: #8a7aa8; font: 700 clamp(1rem, 1.3vw, 1.5rem) var(--title); }
.entry-rule { margin: .25rem 0; max-width: 34rem; font: 700 clamp(1.125rem, 1.6vw, 1.625rem)/1.45 var(--title); color: var(--ink); }
.entry-time { margin: 0; background: #f1ebfd; border-radius: 999px; padding: .45rem 1.2rem; font: 700 1.0625rem var(--title); color: var(--ink); }
.entry-play { width: min(100%, 28rem); font-size: clamp(1.375rem, 2vw, 1.75rem); padding: 1rem; border: 0; cursor: pointer; margin-top: .5rem; }

/* side: rules and the other games of today */
.side { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2vw, 2rem); }
.how, .others { background: var(--card); border-radius: 1.75rem; box-shadow: var(--shadow); padding: clamp(1.25rem, 2.2vw, 2.5rem); }
.how summary { display: flex; justify-content: space-between; align-items: center; font: 900 clamp(1.5rem, 2.4vw, 2.75rem) var(--title); color: var(--ink); cursor: pointer; list-style: none; }
.how summary::-webkit-details-marker { display: none; }
.how summary::after { content: ""; width: .6em; height: .6em; border-right: .14em solid var(--brand); border-bottom: .14em solid var(--brand); transform: translateY(-.15em) rotate(45deg); transition: transform .2s; }
.how[open] summary::after { transform: translateY(.15em) rotate(-135deg); }
.how ol { counter-reset: rule; list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1rem; }
.how li { counter-increment: rule; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; font-size: clamp(1rem, 1.2vw, 1.375rem); color: #5b3f86; }
.how li::before { content: counter(rule); display: grid; place-items: center; width: 2.75rem; aspect-ratio: 1; border-radius: 50%; background: #efe6fd; font: 900 1.375rem var(--title); color: var(--brand); }
.others h2 { font-size: clamp(1.5rem, 2.4vw, 2.75rem); margin-bottom: .75rem; }
.others ul { list-style: none; padding: 0; margin: 0; }
.others a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .85rem 0; border-top: 1px solid var(--line); }
.others li:first-child a { border-top: 0; }
.other-thumb { display: grid; place-items: center; width: clamp(4rem, 5vw, 5.5rem); aspect-ratio: 1; border-radius: 1rem; background: #f3eefa; padding: .4rem; }
.other-thumb > img, .other-thumb > span { width: 100%; }
.other-text { display: grid; gap: .1rem; }
.other-name { font: 900 clamp(1.125rem, 1.6vw, 1.75rem) var(--title); color: var(--ink); overflow-wrap: anywhere; }
.other-line { color: #7a6a95; font-size: 1rem; }
.other-state { font: 800 1.0625rem var(--title); color: #fff; background: var(--orange); border-radius: 999px; padding: .55rem 1.2rem; white-space: nowrap; }
.other-state.is-done { color: var(--green); background: #dff3e0; }

/* end of the game, as in the design approved on 13/10/2026 (tmp/ui/bamboleio/fim/): title, the time very large, the
   streak and the week above the board; Compartilhar, Outros jogos de hoje, Treinar mais and the next number under it.
   The board shrinks to the design's size after the game's own end animation (daily.js adds .result-view). */
.done-result { display: grid; justify-items: center; text-align: center; gap: .75rem; }
.done-save { display: grid; justify-items: center; gap: .75rem; }
.done-save p { margin: 0; font: 800 1.125rem var(--title); color: var(--ink); }
.done-result h2 { font-size: clamp(2rem, 3.4vw, 3.25rem); }
.done-time { color: var(--orange); font-variant-numeric: tabular-nums; }
.done-week { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem 1rem; }
.done-streak { margin: 0; font: 900 clamp(1.25rem, 1.8vw, 1.75rem) var(--title); color: var(--ink); white-space: nowrap; }
.done-text { margin: 0; font-size: 1.125rem; color: var(--ink); }
.week { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, auto); gap: .35rem; }
.week li { display: grid; justify-items: center; gap: .2rem; font: 700 1rem var(--title); color: #8a7aa8; }
.week li.today { color: var(--ink); font-weight: 900; }
.day-mark { width: clamp(1.6rem, 2.2vw, 2.25rem); aspect-ratio: 1; border-radius: 50%; border: 3px solid #dccbf5; display: grid; place-items: center; box-sizing: border-box; }
.week li.won .day-mark { background: var(--ink); border-color: var(--ink); }
.week li.won .day-mark::after { content: ""; width: 40%; height: 22%; border-left: .18rem solid #fff; border-bottom: .18rem solid #fff; transform: translateY(-15%) rotate(-45deg); }
.done { display: grid; gap: .75rem; }
.done .button { border: 0; cursor: pointer; width: 100%; font-size: clamp(1.25rem, 1.6vw, 1.75rem); padding: .9rem; }
.done-links { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.done-links a { display: block; text-align: center; font: 800 clamp(1.125rem, 1.5vw, 1.5rem) var(--title); color: var(--brand); background: var(--lilac); border-radius: 999px; padding: .8rem; }
.done-next { margin: .25rem 0 0; text-align: center; font: 700 1.0625rem var(--title); color: #7a6a95; }
.finished .game-actions, .finished .clear, .finished .timer-pill, .finished .game-options, .finished .how { display: none; }   /* no rules on the result (Daniel: "não precisa aparecer como jogar") */
.board { transition: max-width .4s ease; }
.result-view .board { max-width: min(100%, 28rem, calc(100svh - 27rem)); min-width: min(100%, 12rem); }   /* the solved board shrinks on short screens so Compartilhar shows without scrolling */

/* 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-thumb { display: grid; place-items: center; width: 4.5rem; aspect-ratio: 1; margin-bottom: .5rem; }
.today-thumb > img, .today-thumb > span { width: 100%; }
.today .name { padding: 0; font-size: 1.375rem; }
.today .meta { padding: 0; }
.today .state { font: 800 1.0625rem var(--title); color: var(--orange); padding: 0; }
.today .state.is-done { color: var(--green); }
.today .need { font: 800 1rem var(--title); color: var(--brand); padding: 0; }
.has-access .today .need { display: none; }
.intro { margin: -.25rem 0 1.25rem; font-size: 1.125rem; }

/* phone: the card and the side stacked; the clock and Limpar under the name */
@media (max-width: 760px) {
  .play { grid-template-columns: minmax(0, 1fr); padding-top: 0; }   /* nothing inside may widen the page (13/10/2026: it slid sideways on a small phone) */
  .game-card, .how, .others { border-radius: 1.25rem; }
  .game-card { padding: 1rem; gap: 1rem; scroll-margin-top: 5.5rem; }
  .result-view .board { max-width: min(100%, 28rem, calc(100svh - 36rem)); }
  .game-head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "thumb name name" "timer timer clear"; gap: .5rem .75rem; }   /* as in the approved phone design: the clock and Limpar under the name; fits 320 px */
  .game-name { min-width: 0; }
  .timer-pill { justify-self: end; }
  .clear { padding: .55rem 1.2rem; }
  .game-actions { gap: .75rem; }
  .entry-name { font-size: 2.5rem; }
  .play + .bottom { padding-bottom: 2rem; }
  .how li { grid-template-columns: auto minmax(0, 1fr); }
  .others a { gap: .75rem; }
  .other-thumb { width: 3.25rem; }   /* a game page has no tab bar to leave room for */
  .done-links { grid-template-columns: 1fr; }
}

/* the win: stars out of the board (daily.js, celebrate) */