/* 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[hidden] { display: none; }
.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; 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 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); }
.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 */
.done { background: var(--purple); color: #fff; border-radius: 1.25rem; padding: 1.5rem; display: grid; gap: .75rem; justify-items: start; }
.done[hidden] { display: none; }
.done h2 { color: #fff; font-size: 1.75rem; }
.done p { margin: 0; font-size: 1.125rem; }
.done .button { border: 0; cursor: pointer; }
.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 .clear, .finished .game-options { 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-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); }
.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: 1fr; padding-top: 0; }
  .game-card, .how, .others { border-radius: 1.25rem; }
  .game-card { padding: 1rem; gap: 1rem; }
  .game-head { grid-template-columns: auto 1fr auto; grid-template-areas: "thumb name name" "thumb timer clear"; gap: .5rem .75rem; }
  .timer-pill { justify-self: end; }
  .clear { padding: .55rem 1.2rem; }
  .game-actions { gap: .75rem; }
  .entry-name { font-size: 2.5rem; }
}

/* the win: stars out of the board (daily.js, celebrate) */
.stars-layer { position: absolute; z-index: 50; pointer-events: none; }
.stars-layer img { position: absolute; left: 50%; top: 50%; opacity: 0; filter: drop-shadow(0 .15rem .3rem rgba(0, 0, 0, .2)); }