/* gioco.css: the game's page (gioco.html) on top of stile.css, the panel's "Brace" look (the same tokens, light and
   dark). The game's menu, on top on a computer and fixed at the bottom on a phone like the panel's bottom menu; Today
   (the Showcase and Your day); the Gallery's filters; the views below each other, one at a time. */

/* ---- the menu: Today · Gallery · Breed · Rank. On a computer a row of tabs under the header's first row, the one shown
   on the header's bottom line in ember (as the panel's .menu) */
.menu-gioco { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px 4px; }
.menu-gioco a { display: block; border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0; padding: 8px 16px; font-weight: 650; color: var(--tenue); text-decoration: none; }
.menu-gioco a:hover { color: var(--testo); background: var(--card-2); }
.menu-gioco a[aria-current="page"] { color: var(--testo); border-bottom-color: var(--brace); }
.menu-gioco :focus-visible { outline-offset: -2px; }

/* the views, one under the other in <main> */
.gioco-pannello { display: flex; flex-direction: column; gap: 16px; }
.gioco-pannello > .messaggi-creature > p { margin: 0; }
.gioco-pannello > .messaggi-creature { display: flex; flex-direction: column; gap: 8px; }
.gioco-pannello > .messaggi-creature > p:empty { display: none; }
.gioco-pannello .come { margin-top: 8px; }
.gioco-pannello h2 { font-size: 1.15rem; }
.etichetta-gioco { margin: 0; font-size: .75rem; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }

/* ---- Today: the Showcase (for whoever arrives from a link) */
.vetrina, .giornata { display: flex; flex-direction: column; gap: 16px; }
.vetrina-eroe { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 32px; align-items: center; padding: 12px 0 4px; }
.vetrina-grande { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.vetrina-grande a { display: block; line-height: 0; }
/* the 24×24 sprite 8 times larger, its pixels kept square; gold for a legendary piece */
#vetrinaTela { width: 192px; height: 192px; image-rendering: pixelated; background: var(--card-2); border: 2px solid var(--riga); border-radius: 10px; box-shadow: var(--ombra-tela); }
.vetrina-grande.leggendaria { border: 0; }
.vetrina-grande.leggendaria #vetrinaTela { border-color: #c9a227; background: var(--oro-sfondo); }
.vetrina-grande figcaption { max-width: 260px; font-size: .92rem; }
.vetrina-grande figcaption .nota { display: block; }
.vetrina-testo > * { margin: 0 0 14px; }
.vetrina-testo > :last-child { margin-bottom: 0; }
.vetrina-testo .eroe-titolo { font-size: 2rem; }
.vetrina-testo .nota button { margin-right: 4px; padding: 4px 12px; font-size: .9rem; }
.vetrina-parte h3 { margin-bottom: 0; }
.vetrina-piede { margin: 12px 0 0; font-size: .92rem; }
/* the top three: a small image, the creature and its level, its owner */
.primi { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: posto; }
.primi li { display: grid; grid-template-columns: 1.6em auto minmax(0, 1fr) auto; align-items: center; gap: 10px; counter-increment: posto; font-variant-numeric: tabular-nums; }
.primi li::before { content: counter(posto); font-weight: 700; color: var(--tenue); text-align: right; }
.primi a { line-height: 0; }
.primi canvas, .giorno-asta canvas { width: 48px; height: 48px; image-rendering: pixelated; background: var(--codice); border-radius: 6px; }
.primi-testo { font-weight: 650; }
.primi .nota { overflow-wrap: anywhere; text-align: right; }
.passi-gioco { margin: 10px 0; padding-left: 1.4em; font-size: 1.05rem; font-weight: 600; }
.passi-gioco li + li { margin-top: 4px; }
#comeSiGioca .nota { margin: 0; }
#comeSiGioca:focus-visible { outline-offset: 4px; }

/* ---- Today: Your day (for whoever comes back every day) */
.giorno-testa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; border-left: 3px solid var(--brace); }
.giorno-testo > p { margin: 0; }
.giorno-titolo { font-size: 1.35rem; font-weight: 750; line-height: 1.2; }
.giorno-testa .palestra-mie p { margin: 0; }
.giorno-testa .palestra-mie .azioni { margin-top: 6px; }
.giorno-testa #notaPalestra { max-width: 50ch; }
.giorno-testa #allenaTutte { padding: 10px 20px; font-size: 1rem; }
.giorno-mie h3 { margin: 0; }
.giorno-mie .griglia-creature { margin: 12px 0 0; }
.giorno-mie .aste-mie { margin-top: 16px; }
.giorno-mie .tu-ritira:has(> span:empty):not(:has(> button:not([hidden]))) { display: none; }
#giornoVuoto { margin: 8px 0 0; }
/* no creatures: Your day's own line (giornoVuoto) says it, so mostraMie's empty line in the list below is not shown */
#giornoVuoto:not([hidden]) ~ #mieCreature > .vuota { display: none; }
/* no auction led: the empty line of mostraMie is not worth a heading here */
.aste-mie:has(#asteMie > .vuota:only-child) { display: none; }
.giorno-rango { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.giorno-rango .nota { margin: 0; }
.giorno-asta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; background: var(--oro-sfondo); }
.giorno-asta > div { flex: 1 1 220px; min-width: 0; }
.giorno-asta h4 { margin: 0 0 4px; }
.giorno-asta .nota { margin: 0 0 10px; }
.giorno-asta canvas { width: 72px; height: 72px; }

/* ---- Gallery: its filters (a segmented row of links, as the panel's view selector), the wave's box for "For sale" */
.filtri { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.filtri a { padding: 6px 14px; border: 1px solid var(--riga-forte); border-radius: 999px; background: var(--card); color: var(--tenue); font-weight: 600; font-size: .92rem; text-decoration: none; }
.filtri a:hover { color: var(--testo); background: var(--card-2); }
.filtri a[aria-current="page"] { background: var(--brace); border-color: var(--brace); color: var(--su-brace); }
.onda-gioco { margin: 4px 0 8px; }
.onda-gioco > h3:first-child { margin-top: 0; }
.onda-gioco .cifre { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); margin-top: 12px; }
.onda-gioco .cifre dd { font-size: 1.05rem; }
.altro-in-vendita { margin: 24px 0 0; }
#galleriaParteCasuali h3 { margin: 24px 0 0; }

/* ---- How to start (#start): the panel's guide card and numbered steps (stile.css .guida, .passi, .passo) */
.guida-gioco h2 { margin-top: 0; }
.guida-gioco .guida-avviso { margin-top: 10px; }
.guida-piede { margin: 0; font-weight: 600; }

/* ---- footer */
.piede-gioco { margin: 0 0 16px; font-size: .95rem; color: var(--testo); }

/* ---- the phone (up to 760 px): the menu fixed at the bottom of the screen, four items of equal width (each at least
   44 px wide and the panel's bottom menu's height), the current one in ember with a bar on its top edge */
@media (max-width: 760px) {
  .menu-gioco { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; flex-wrap: nowrap; align-items: stretch; gap: 0;
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--card); border-top: 1px solid var(--riga); box-shadow: 0 -8px 16px -14px rgb(0 0 0 / .35); }
  .menu-gioco a { flex: 1 1 0; min-width: 44px; min-height: var(--alto-menu-basso); display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: 0; padding: 6px 0; font-size: .9rem; font-weight: 550; }
  .menu-gioco a:hover { background: none; }
  .menu-gioco a[aria-current="page"] { color: var(--brace-forte); font-weight: 800; box-shadow: inset 0 3px 0 var(--brace); }
  .menu-gioco :focus-visible { outline-offset: -3px; }
  .vetrina-eroe { grid-template-columns: minmax(0, 1fr); text-align: center; padding-top: 4px; }
  .vetrina-testo .eroe-titolo { font-size: 1.5rem; max-width: none; }
  .vetrina-testo .eroe-riga { max-width: none; }
  .vetrina-testo .eroe-bottoni { justify-content: center; }
  .vetrina-grande figcaption { max-width: none; }
  #vetrinaTela { width: 160px; height: 160px; }
  .giorno-testa { flex-direction: column; align-items: stretch; }
  .giorno-testa #allenaTutte { width: 100%; }
}
@media (forced-colors: active) {
  .menu-gioco a[aria-current="page"] { border-top: 3px solid Highlight; }
  .filtri a[aria-current="page"] { border: 3px solid Highlight; }
}