/* STILLPIECE PUZZLE: interface em DOM/CSS, jogo no canvas. Direcao "vidro liquido".
   --u = 1% do menor lado util (definido por src/main.js). Tudo se mede em --u.
   Regras da casa: faixa sempre reta; texto escrito pelo codigo e encolhido por data-fit; botoes em tamanhos fixos
   e desenhados por CSS (sem imagem fatiada, entao sem emenda); a logo so aparece na abertura. */
/* Montserrat (OFL): a fonte do jogo. Um arquivo por peso, com latim, latim estendido e cirilico. */
@font-face {
  font-family: Montserrat;
  font-weight: 700;
  font-display: swap;
  src: url(./assets/fonts/montserrat-700.woff2) format('woff2');
}
@font-face {
  font-family: Montserrat;
  font-weight: 800;
  font-display: swap;
  src: url(./assets/fonts/montserrat-800.woff2) format('woff2');
}

/* as tres cores do fundo mudam um pouco com a foto aberta (src/ui.js, ambient) e a troca e suave */
@property --a1 {
  syntax: '<color>';
  inherits: true;
  initial-value: #0f80b0;
}
@property --a2 {
  syntax: '<color>';
  inherits: true;
  initial-value: #8a44e8;
}
@property --a3 {
  syntax: '<color>';
  inherits: true;
  initial-value: #1e62cc;
}

:root {
  --u: 4px;
  --lime: #b6f52a;
  --lime-2: #a6ec12;
  --ink: #16321f;
  --line: #8feaff;
  /* vidro azul com borda ciano luminosa, reflexo em cima e brilho por fora */
  --glass: linear-gradient(180deg, rgba(56, 160, 214, 0.44), rgba(26, 108, 184, 0.4));
  --glass-dark: linear-gradient(180deg, rgba(14, 84, 140, 0.8), rgba(12, 48, 116, 0.8));
  --glow: 0 0 calc(var(--u) * 0.6) rgba(190, 248, 255, 0.9), 0 0 calc(var(--u) * 2.6) rgba(80, 220, 255, 0.7);
  --shine:
    inset 0 calc(var(--u) * 0.35) 0 rgba(255, 255, 255, 0.32),
    inset 0 calc(var(--u) * -1.2) calc(var(--u) * 2.4) rgba(110, 190, 255, 0.2);
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0f5fb8;
}
body {
  font-family:
    Montserrat, 'Hiragino Sans', 'Noto Sans CJK JP', 'Malgun Gothic', 'Microsoft YaHei', system-ui, sans-serif;
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  overscroll-behavior: none;
}
button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}
img {
  display: block;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
}
[hidden] {
  display: none !important;
}

#app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  font-size: calc(var(--u) * 4.4);
  font-weight: 700;
  text-shadow: 0 calc(var(--u) * 0.35) calc(var(--u) * 1) rgba(0, 40, 110, 0.45);
  transition:
    --a1 0.7s,
    --a2 0.7s,
    --a3 0.7s;
}
#bg {
  position: absolute;
  inset: 0;
}
/* ciano em cima, azul no meio, violeta so no canto de baixo a direita */
#bg,
#win {
  background:
    radial-gradient(70% 95% at 100% 82%, var(--a2) 0%, transparent 74%),
    radial-gradient(80% 34% at 30% 0%, rgba(60, 220, 250, 0.08) 0%, transparent 72%),
    /* brilho do topo bem fraco */ linear-gradient(168deg, var(--a1) 0%, var(--a3) 64%, #2748c8 100%);
}
/* luzes desfocadas que derivam devagar atras dos menus (na mesa do jogo, quem faz o fundo e a grade de prancheta) */
#bokeh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
#app[data-screen='play'] #bokeh {
  display: none;
}
/* nos menus, a mesma grade de prancheta da mesa, bem fraca e parada, e as luzes por cima dela clareando */
#bokeh::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(190, 245, 255, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190, 245, 255, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(160, 236, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 236, 255, 0.05) 1px, transparent 1px);
  background-size:
    calc(var(--u) * 48) calc(var(--u) * 48),
    calc(var(--u) * 48) calc(var(--u) * 48),
    calc(var(--u) * 12) calc(var(--u) * 12),
    calc(var(--u) * 12) calc(var(--u) * 12);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 85%);
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 30%, transparent 85%);
}
#bokeh i {
  mix-blend-mode: screen;
}
#bokeh i {
  position: absolute;
  border-radius: 50%;
  width: var(--d);
  height: var(--d);
  left: var(--x);
  top: var(--y);
  background: radial-gradient(circle, var(--c) 0%, transparent 68%);
  opacity: 0.95;
  animation: drift var(--t) ease-in-out var(--w) infinite alternate;
}
#bokeh i:nth-child(1) {
  --d: 46vmax;
  --x: -14%;
  --y: 50%;
  --c: rgba(120, 200, 255, 0.36);
  --t: 26s;
  --w: -4s;
}
#bokeh i:nth-child(2) {
  --d: 34vmax;
  --x: 58%;
  --y: -8%;
  --c: rgba(170, 140, 255, 0.65);
  --t: 31s;
  --w: -11s;
}
#bokeh i:nth-child(3) {
  --d: 22vmax;
  --x: 70%;
  --y: 46%;
  --c: rgba(120, 220, 255, 0.61);
  --t: 22s;
  --w: -7s;
}
#bokeh i:nth-child(4) {
  --d: 28vmax;
  --x: 6%;
  --y: 60%;
  --c: rgba(190, 150, 255, 0.54);
  --t: 35s;
  --w: -19s;
}
#bokeh i:nth-child(5) {
  --d: 12vmax;
  --x: 44%;
  --y: 40%;
  --c: rgba(220, 250, 255, 0.34);
  --t: 19s;
  --w: -3s;
}
#bokeh i:nth-child(6) {
  --d: 16vmax;
  --x: 82%;
  --y: 74%;
  --c: rgba(210, 255, 150, 0.29);
  --t: 28s;
  --w: -15s;
}
#bokeh i:nth-child(7) {
  --d: 9vmax;
  --x: 26%;
  --y: 62%;
  --c: rgba(230, 250, 255, 0.34);
  --t: 24s;
  --w: -9s;
}
@keyframes drift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(6vmax, -4vmax) scale(1.12);
  }
  100% {
    transform: translate(-3vmax, 5vmax) scale(0.92);
  }
}
#stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  display: none;
}
#app[data-screen='play'] #stage {
  display: block;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
}
.screen.on {
  display: block;
}
.col {
  margin: 0 auto;
  width: min(100%, calc(var(--u) * 100));
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2.6);
  padding: calc(var(--u) * 3) calc(var(--u) * 2.6) calc(var(--u) * 3.4);
}
.col.center {
  align-items: center;
}
.tabbed .col {
  padding-bottom: calc(var(--u) * 23);
}
[data-orient='land'] .col {
  width: min(100%, calc(var(--u) * 182));
  padding: calc(var(--u) * 3) calc(var(--u) * 2.4) calc(var(--u) * 3);
  gap: calc(var(--u) * 2.8);
}
[data-orient='land'] .tabbed .col {
  padding-bottom: calc(var(--u) * 3);
  padding-left: calc(var(--u) * 22.4);
}
.scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  touch-action: pan-y;
  scrollbar-width: none;
  padding: calc(var(--u) * 3.4);
  margin: calc(var(--u) * -3.4);
}
.scroll::-webkit-scrollbar {
  display: none;
}
.spacer {
  flex: 1;
}
.vsep {
  width: calc(var(--u) * 0.4);
  align-self: stretch;
  margin: calc(var(--u) * 3) 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.55);
  flex: none;
}

/* ---------- vidro ---------- */
.glass,
.rbtn,
.cnt,
.pill,
.row,
.panel,
.band,
.dailyCard,
.calBox,
#tabs {
  border: calc(var(--u) * 0.32) solid var(--line);
  background: var(--glass);
  box-shadow: var(--shine), var(--glow);
}
.glass,
.panel,
.band,
.dailyCard,
.calBox,
#tabs {
  -webkit-backdrop-filter: blur(calc(var(--u) * 2.5)) saturate(1.3);
  backdrop-filter: blur(calc(var(--u) * 2.5)) saturate(1.3);
}
/* por cima do canvas o vidro e so degrade (sem desfoque: custa caro em cima do jogo) */
#s-play .rbtn,
#s-play .pill {
  background: linear-gradient(180deg, rgba(46, 150, 205, 0.62), rgba(26, 104, 180, 0.58));
}
/* moldura das fotos: borda ciano grossa com brilho */
.hero,
.card,
.preview,
.winpic {
  border: calc(var(--u) * 0.4) solid var(--line);
  box-shadow:
    0 0 calc(var(--u) * 0.7) rgba(190, 248, 255, 0.95),
    0 0 calc(var(--u) * 3.2) rgba(80, 220, 255, 0.75);
}

.top {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  min-height: calc(var(--u) * 11.5);
  flex: none;
}
.top h2 {
  font-size: calc(var(--u) * 7.6);
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  padding: 0 calc(var(--u) * 1);
}
/* titulo de secao: uma faixa de vidro reta, com o texto a esquerda */
h3,
.band {
  height: calc(var(--u) * 7.6);
  border-radius: 99px;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--u) * 4);
  font-weight: 800;
  font-size: calc(var(--u) * 4.7);
  white-space: nowrap;
  overflow: hidden;
  flex: none;
}
h3 {
  border: calc(var(--u) * 0.3) solid var(--line);
  background: var(--glass);
  box-shadow:
    var(--shine),
    0 0 calc(var(--u) * 1.6) rgba(90, 225, 255, 0.5);
  margin: calc(var(--u) * 3) 0 calc(var(--u) * 2);
}
.band.q {
  height: calc(var(--u) * 9.8);
  font-size: calc(var(--u) * 5);
  padding: 0 calc(var(--u) * 5);
}
.band.big {
  height: calc(var(--u) * 15);
  justify-content: center;
  font-size: calc(var(--u) * 7.6);
  width: 100%;
}
.tag {
  height: calc(var(--u) * 6.2);
  padding: 0 calc(var(--u) * 2.6);
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  font-size: calc(var(--u) * 3.3);
  font-weight: 800;
  white-space: nowrap;
  flex: none;
  border: calc(var(--u) * 0.3) solid var(--line);
  background: rgba(18, 78, 140, 0.6);
}
.top .tag {
  margin-left: auto;
  height: calc(var(--u) * 9);
  padding: 0 calc(var(--u) * 4.4);
  font-size: calc(var(--u) * 4.4);
  border-width: calc(var(--u) * 0.45);
  box-shadow: var(--glow);
}

/* ---------- botoes: tamanhos fixos ---------- */
.rbtn {
  width: calc(var(--u) * 10.6);
  height: calc(var(--u) * 10.6);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  transition: transform 0.24s cubic-bezier(0.3, 1.8, 0.5, 1);
}
.rbtn.small {
  width: calc(var(--u) * 10.5);
  height: calc(var(--u) * 10.5);
}
.rbtn.big {
  width: calc(var(--u) * 16.4);
  height: calc(var(--u) * 16.4);
}
.rbtn svg {
  width: 58%;
  height: 58%;
}
.rbtn.solid svg > * {
  fill: currentColor;
}
.rbtn:active,
.chip:active,
.cnt:active {
  transform: scale(0.92);
  transition-duration: 0.05s;
} /* aperta rapido e volta com uma mola curta */
.btn {
  height: calc(var(--u) * 12);
  width: calc(var(--u) * 40);
  max-width: 100%;
  padding: 0 calc(var(--u) * 4);
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: calc(var(--u) * 4.9);
  white-space: nowrap;
  overflow: hidden;
  flex: none;
  transition:
    transform 0.08s,
    filter 0.08s;
}
.btn.w1 {
  width: calc(var(--u) * 31);
  height: calc(var(--u) * 10.6);
  font-size: calc(var(--u) * 4.5);
}
.btn.w2 {
  width: calc(var(--u) * 50);
  height: calc(var(--u) * 16.4);
  font-size: calc(var(--u) * 6.4);
}
.btn.xl {
  width: 100%;
  height: calc(var(--u) * 16.6);
  font-size: calc(var(--u) * 7.6);
}
/* verde-limao: pilula lisa e luminosa, sem labio escuro */
.btn.lime,
.cnt.on,
.chip[aria-checked='true'],
#toast {
  color: var(--ink);
  text-shadow: none;
  background: linear-gradient(180deg, #caff45, var(--lime-2));
  border: calc(var(--u) * 0.4) solid rgba(240, 255, 205, 0.95);
  box-shadow:
    inset 0 calc(var(--u) * 0.6) 0 rgba(255, 255, 255, 0.6),
    0 0 calc(var(--u) * 3.6) rgba(190, 255, 70, 0.6),
    0 0 calc(var(--u) * 1) rgba(255, 255, 255, 0.5);
}
.btn {
  transition:
    transform 0.24s cubic-bezier(0.3, 1.8, 0.5, 1),
    filter 0.08s;
}
.btn.lime:active {
  transform: scale(0.96);
  filter: brightness(0.95);
  transition-duration: 0.05s;
}
.btn.ghost {
  border: calc(var(--u) * 0.4) solid var(--line);
  background: rgba(255, 255, 255, 0.14);
  height: calc(var(--u) * 10.5);
  width: 100%;
  font-size: calc(var(--u) * 4.3);
}
@media (hover: hover) {
  .rbtn:hover,
  .btn:hover,
  .card:hover,
  .cnt:hover,
  .chip:hover {
    filter: brightness(1.08);
  }
}

/* ---------- abertura ---------- */
#s-title .col {
  justify-content: space-between;
  padding-top: calc(var(--u) * 13);
  padding-bottom: calc(var(--u) * 7);
  gap: 0;
}
.emblem {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  object-fit: contain;
  filter: drop-shadow(0 0 calc(var(--u) * 1.2) rgba(160, 245, 255, 0.95))
    drop-shadow(0 0 calc(var(--u) * 4) rgba(70, 215, 255, 0.85))
    drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0, 40, 110, 0.4));
  animation: float 5s ease-in-out infinite;
}
.logo {
  font-size: calc(var(--u) * 17.6);
  line-height: 1;
  text-align: center;
  letter-spacing: -0.02em;
  margin-top: calc(var(--u) * 1);
  text-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 2) rgba(0, 50, 140, 0.55);
}
.logo small {
  display: block;
  font-size: calc(var(--u) * 6.8);
  letter-spacing: 0.7em;
  margin: calc(var(--u) * 2.6) 0 0 0.7em;
  font-weight: 800;
}
.titlePieces {
  animation: float 6.5s ease-in-out -2s infinite reverse;
  width: calc(var(--u) * 96);
  max-height: calc(var(--u) * 54);
  object-fit: contain;
}
#s-title .btn.xl {
  width: calc(var(--u) * 86);
  height: calc(var(--u) * 20);
  font-size: calc(var(--u) * 9);
}
[data-orient='land'] #s-title .col {
  padding-top: calc(var(--u) * 3);
  padding-bottom: calc(var(--u) * 5);
}
[data-orient='land'] .emblem {
  width: calc(var(--u) * 26);
  height: calc(var(--u) * 26);
}
[data-orient='land'] .logo {
  font-size: calc(var(--u) * 13);
  margin: 0;
}
[data-orient='land'] .titlePieces {
  display: none;
}
[data-orient='land'] #s-title .btn.xl {
  height: calc(var(--u) * 16);
}
@keyframes float {
  50% {
    transform: translateY(calc(var(--u) * -1.6));
  }
}

/* ---------- cartao grande (inicio e puzzle do dia): a foto em cima e uma barra de vidro escuro embaixo ---------- */
.hero {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.378;
  border-radius: calc(var(--u) * 6);
  overflow: hidden;
  text-align: left;
  flex: none;
}
.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
#s-daily .hero {
  aspect-ratio: 1.56;
}
[data-orient='land'] .heroBar .btn.w1 {
  width: calc(var(--u) * 25);
}
[data-orient='land'] .hero {
  aspect-ratio: 1.07;
}
.heroBar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--u) * 24);
  padding: calc(var(--u) * 7.6) calc(var(--u) * 3.4) 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.6);
  background: linear-gradient(
    180deg,
    rgba(22, 79, 140, 0) 0%,
    rgba(22, 79, 140, 0.88) 42%,
    rgba(18, 62, 132, 0.97) 100%
  );
}
[data-orient='land'] .heroBar {
  height: calc(var(--u) * 27);
  padding-top: calc(var(--u) * 8);
}
.heroBar.noring .ring,
.heroBar.noring .ring + .vsep {
  display: none;
}
.heroBar .vsep {
  margin: calc(var(--u) * 4.4) 0;
}
.heroTx {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.heroTx b {
  font-size: calc(var(--u) * 6);
  font-weight: 800;
  white-space: nowrap;
}
.heroTx small {
  font-size: calc(var(--u) * 3.7);
  white-space: nowrap;
}
/* deitado no celular o cartao e estreito: o nome pode quebrar em duas linhas em vez de ser cortado */
[data-orient='land'] .heroTx b {
  white-space: normal;
  font-size: calc(var(--u) * 4.8);
  line-height: 1.08;
}
.ring {
  --p: 0;
  position: relative;
  width: calc(var(--u) * 13.4);
  height: calc(var(--u) * 13.4);
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
}
.ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 0 calc(var(--u) * 0.8) rgba(182, 255, 46, 0.6));
}
.ring svg .tr,
.mini .tr {
  fill: none;
  stroke: rgba(255, 255, 255, 0.36);
  stroke-width: 4.6;
}
.mini .tr,
.mini .pr {
  stroke-width: 7;
}
.ring svg .pr,
.mini .pr {
  fill: none;
  stroke: var(--lime);
  stroke-width: 4.6;
  stroke-linecap: round;
  stroke-dasharray: calc(var(--p) * 1px) 100px;
  transition: stroke-dasharray 0.35s ease-out;
}
.ring > span {
  position: relative;
  font-size: calc(var(--u) * 3.5);
  font-weight: 800;
}
.ring.small {
  width: calc(var(--u) * 7.6);
  height: calc(var(--u) * 7.6);
}
.dailyCard {
  width: 100%;
  height: calc(var(--u) * 18.4);
  border-radius: calc(var(--u) * 5.5);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 1.8) calc(var(--u) * 2.4);
  flex: none;
}
.dailyCard img {
  height: 100%;
  aspect-ratio: 1.85;
  object-fit: cover;
  border-radius: calc(var(--u) * 3.6);
}
.dailyCard .rbtn {
  background: linear-gradient(180deg, #58bcff, #2f86ea);
}
.dailyCard .rbtn svg > * {
  fill: #fff;
}
.dailyCard b {
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  font-size: calc(var(--u) * 4.8);
  font-weight: 800;
}
/* fileira de categorias: cabem 4 inteiras; o resto rola de lado */
.catRow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--u) * 6) / 3.55);
  gap: calc(var(--u) * 2);
  overflow-x: auto;
  touch-action: pan-x;
  scrollbar-width: none;
  padding: calc(var(--u) * 3.4);
  margin: calc(var(--u) * -3.4);
}
.catRow::-webkit-scrollbar {
  display: none;
}
.catRow .card {
  aspect-ratio: 1;
  border-radius: calc(var(--u) * 5);
}
[data-orient='land'] .catRow {
  grid-auto-columns: calc((100% - var(--u) * 6) / 4);
}
[data-orient='land'] .catRow .card {
  aspect-ratio: 0.78;
}
.home {
  overflow-x: hidden;
}
[data-orient='land'] .home {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: calc(var(--u) * 2.6);
  align-items: start;
}
[data-orient='land'] .homeSide h3:first-child {
  margin-top: 0;
}
.homeSide {
  min-width: 0;
}
[data-orient='land'] .dailyCard b {
  font-size: calc(var(--u) * 3.7);
}
[data-orient='land'] .dailyCard img {
  aspect-ratio: 1.4;
}
.dailyMain {
  overflow-x: hidden;
}
[data-orient='land'] .dailyMain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: calc(var(--u) * 3);
  align-items: start;
}

/* ---------- grades de cartoes ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(var(--u) * 2.2);
}
[data-orient='land'] .grid {
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--u) * 2.2);
}
[data-orient='land'] .catRow {
  padding: calc(var(--u) * 3.4);
}
.card {
  position: relative;
  display: block;
  border-radius: calc(var(--u) * 5.5);
  overflow: hidden;
  aspect-ratio: 1.37;
  background: rgba(255, 255, 255, 0.12);
  transition: transform 0.08s;
}
#listGrid .card {
  aspect-ratio: 1.27;
}
[data-orient='land'] #catGrid .card {
  aspect-ratio: 0.955;
}
.card:active {
  transform: scale(0.98);
}
.card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(var(--u) * 6) calc(var(--u) * 2.4) calc(var(--u) * 2);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 1.5);
  background: linear-gradient(180deg, rgba(10, 42, 85, 0) 0%, rgba(10, 42, 85, 0.78) 100%);
  font-weight: 800;
  font-size: calc(var(--u) * 5);
}
.cap > b {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  font-weight: 800;
}
.cap.bare {
  background: none;
}
.catRow .cap {
  justify-content: center;
  font-size: calc(var(--u) * 3.6);
  padding: calc(var(--u) * 5) calc(var(--u) * 1) calc(var(--u) * 1.6);
}
/* deitado: nome no centro e, embaixo dele, a pilula com o anel e a contagem */
[data-orient='land'] #catGrid .cap {
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 8) calc(var(--u) * 1.5) calc(var(--u) * 2.2);
  font-size: calc(var(--u) * 4.8);
  background: linear-gradient(
    180deg,
    rgba(11, 79, 115, 0) 0%,
    rgba(11, 79, 115, 0.62) 46%,
    rgba(11, 66, 120, 0.8) 100%
  );
}
.mini {
  --p: 0;
  display: none;
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
  transform: rotate(-90deg);
}
[data-orient='land'] #catGrid .mini {
  display: block;
}
[data-orient='land'] #catGrid .tag {
  height: calc(var(--u) * 6.8);
  font-size: calc(var(--u) * 4);
  padding: 0 calc(var(--u) * 3.6);
}
.card .tag.white {
  background: #fff;
  color: #0b2a6b;
  text-shadow: none;
  border-color: #fff;
}
.card .mark {
  position: absolute;
  top: calc(var(--u) * 1.8);
  right: calc(var(--u) * 1.8);
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #caff45, var(--lime-2));
  color: var(--ink);
  border: calc(var(--u) * 0.4) solid #fff;
  box-shadow: 0 0 calc(var(--u) * 2.4) rgba(190, 255, 70, 0.75);
}
.card .mark svg {
  width: 62%;
  height: 62%;
}
.card .pct {
  position: absolute;
  top: calc(var(--u) * 2);
  right: calc(var(--u) * 2);
}
.card .bar {
  position: absolute;
  left: calc(var(--u) * 2.6);
  right: calc(var(--u) * 2.6);
  bottom: calc(var(--u) * 2.6);
  height: calc(var(--u) * 3.2);
  border-radius: 99px;
  background: rgba(6, 30, 80, 0.7);
  border: calc(var(--u) * 0.3) solid rgba(205, 245, 255, 0.6);
  overflow: hidden;
}
.card .bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(180deg, #d4ff62, var(--lime-2));
  box-shadow: 0 0 calc(var(--u) * 1.6) rgba(190, 255, 70, 0.8);
}
/* bloqueado: cartao de vidro azul liso com cadeado, sem foto (nada de borrao) */
.card.locked {
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, rgba(40, 130, 215, 0.5), rgba(96, 86, 222, 0.5));
}
.card.locked svg {
  width: 27%;
  height: 36%;
  stroke-width: 2.3;
}
.card.nope {
  animation: nope 0.3s;
}
@keyframes nope {
  30% {
    transform: translateX(calc(var(--u) * -1));
  }
  70% {
    transform: translateX(calc(var(--u) * 1));
  }
}

/* ---------- calendario: a faixa do mes e, embaixo, o painel com os dias ---------- */
.dailySide {
  min-width: 0;
}
.calBox {
  border-radius: calc(var(--u) * 5.5);
  padding: calc(var(--u) * 2.8) calc(var(--u) * 2.6);
  background: linear-gradient(180deg, rgba(44, 116, 196, 0.7), rgba(36, 96, 188, 0.7));
}
.dailySide h3 {
  text-transform: capitalize;
  height: calc(var(--u) * 8.4);
  font-size: calc(var(--u) * 5.4);
}
[data-orient='land'] .dailySide h3 {
  margin-top: 0;
}
.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(var(--u) * 1.2);
}
.cal .dow {
  text-align: center;
  font-size: calc(var(--u) * 3);
  text-transform: capitalize;
  padding-bottom: calc(var(--u) * 0.6);
}
.day {
  position: relative;
  aspect-ratio: 1.62;
  border-radius: calc(var(--u) * 2.6);
  background: rgba(40, 104, 184, 0.82);
  border: calc(var(--u) * 0.25) solid rgba(170, 234, 255, 0.6);
  display: grid;
  place-items: center;
  color: #d0e2f4;
  font-size: calc(var(--u) * 4);
  font-weight: 800;
  overflow: hidden;
}
.day.future {
  color: #c4d8ee;
}
.day.today {
  overflow: visible;
  color: #fff;
  font-size: calc(var(--u) * 4.8);
  z-index: 1;
}
.day.today::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  height: 150%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: calc(var(--u) * 0.8) solid var(--lime);
  background: #0a3a6a;
  box-shadow: 0 0 calc(var(--u) * 2.2) rgba(190, 255, 70, 0.75);
  z-index: -1;
}
.day img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.day em {
  position: absolute;
  left: calc(var(--u) * 1);
  bottom: calc(var(--u) * 0.1);
  font-style: normal;
  font-size: calc(var(--u) * 3.6);
  color: #fff;
}
.day .mark {
  position: absolute;
  top: calc(var(--u) * 0.4);
  right: calc(var(--u) * 0.4);
  width: calc(var(--u) * 4.2);
  height: calc(var(--u) * 4.2);
  border-radius: 50%;
  background: var(--lime);
  color: var(--ink);
  display: grid;
  place-items: center;
}
.day .mark svg {
  width: 70%;
  height: 70%;
}

/* ---------- escolha de pecas ---------- */
.pcMain {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
}
.pcSide {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2.8);
}
.pcSide #pcStart {
  margin-top: auto;
}
[data-orient='land'] .pcSide #pcStart {
  margin-top: 0;
}
[data-orient='land'] .pcMain {
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1.82fr) minmax(0, 1fr);
  gap: calc(var(--u) * 3);
  align-items: stretch;
}
/* deitado: os controles ficam dentro de um painel de vidro */
[data-orient='land'] .pcSide {
  justify-content: space-evenly;
  gap: calc(var(--u) * 1);
  border-radius: calc(var(--u) * 6);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  border: calc(var(--u) * 0.32) solid var(--line);
  background: var(--glass);
  box-shadow: var(--shine), var(--glow);
}
.preview {
  position: relative;
  border-radius: calc(var(--u) * 6);
  overflow: hidden;
  flex: none;
}
.preview img {
  width: 100%;
  aspect-ratio: 1.5;
  object-fit: cover;
}
[data-orient='land'] .preview {
  align-self: start;
}
[data-orient='land'] .preview img {
  aspect-ratio: 1.46;
}
.cutgrid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.counts {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(var(--u) * 1.5);
}
[data-orient='land'] .counts {
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 2);
}
.cnt {
  height: calc(var(--u) * 11.8);
  border-radius: calc(var(--u) * 5);
  font-weight: 800;
  font-size: calc(var(--u) * 5.4);
  background: linear-gradient(180deg, rgba(70, 160, 225, 0.85), rgba(40, 122, 205, 0.85));
  transition: transform 0.08s;
}
[data-orient='land'] .cnt {
  height: calc(var(--u) * 11);
}
[data-orient='land'] .band.q {
  height: calc(var(--u) * 8.4);
  font-size: calc(var(--u) * 4.6);
}
[data-orient='land'] .sw {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 6.6);
}
[data-orient='land'] .sw::after {
  width: calc(var(--u) * 4.9);
  height: calc(var(--u) * 4.9);
}
[data-orient='land'] .sw[aria-checked='true']::after {
  left: calc(100% - var(--u) * 5.6);
}
[data-orient='land'] .pcSide .row {
  height: calc(var(--u) * 12);
}
[data-orient='land'] .btn.xl {
  height: calc(var(--u) * 14);
  font-size: calc(var(--u) * 6.2);
}

/* ---------- linhas de opcao: icone, divisor, nome e controle ---------- */
.row {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.6);
  height: calc(var(--u) * 11.2);
  padding: 0 calc(var(--u) * 3.4);
  border-radius: 99px;
  flex: none;
}
.panel .row {
  gap: calc(var(--u) * 2);
  background: linear-gradient(180deg, rgba(40, 150, 200, 0.62), rgba(20, 100, 170, 0.62));
}
.panel .row .lbl {
  font-size: calc(var(--u) * 3.7);
}
.panel .row .val {
  width: calc(var(--u) * 8.8);
}
.panel input.vol {
  width: calc(var(--u) * 23.5);
}
.row svg {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  flex: none;
}
.row .lbl {
  flex: 1;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  font-size: calc(var(--u) * 4.6);
  font-weight: 800;
}
.row .val {
  font-size: calc(var(--u) * 3.6);
  width: calc(var(--u) * 8.4);
  text-align: right;
  flex: none;
}
.sw {
  position: relative;
  width: calc(var(--u) * 13.4);
  height: calc(var(--u) * 7.4);
  border-radius: 99px;
  flex: none;
  background: rgba(74, 106, 158, 0.78);
  border: calc(var(--u) * 0.35) solid rgba(205, 245, 255, 0.85);
  transition: background 0.15s;
}
.sw::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(var(--u) * 0.7);
  width: calc(var(--u) * 5.7);
  height: calc(var(--u) * 5.7);
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  transition: left 0.15s;
}
.sw[aria-checked='true'] {
  background: linear-gradient(180deg, #caff45, var(--lime-2));
  box-shadow: 0 0 calc(var(--u) * 2) rgba(190, 255, 70, 0.6);
}
.sw[aria-checked='true']::after {
  left: calc(100% - var(--u) * 6.4);
}
.sw:disabled {
  opacity: 0.45;
}
input.vol {
  -webkit-appearance: none;
  appearance: none;
  width: calc(var(--u) * 27);
  height: calc(var(--u) * 2.4);
  border-radius: 99px;
  margin: 0;
  flex: none;
  background: linear-gradient(90deg, var(--lime) var(--v), rgba(255, 255, 255, 0.4) var(--v));
  touch-action: none;
}
input.vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(var(--u) * 4.6);
  height: calc(var(--u) * 4.6);
  border-radius: 50%;
  background: #fff;
}
input.vol::-moz-range-thumb {
  width: calc(var(--u) * 4.6);
  height: calc(var(--u) * 4.6);
  border: 0;
  border-radius: 50%;
  background: #fff;
}
.sel select {
  font: inherit;
  font-size: calc(var(--u) * 4);
  font-weight: 700;
  color: #fff;
  height: calc(var(--u) * 8.6);
  width: calc(var(--u) * 32);
  padding: 0 calc(var(--u) * 3);
  border-radius: 99px;
  border: calc(var(--u) * 0.4) solid #fff;
  background: rgba(150, 225, 255, 0.4);
  box-shadow: 0 0 calc(var(--u) * 1.6) rgba(160, 235, 255, 0.6);
}
.sel option {
  color: #0b2a6b;
}

/* ---------- painel de opcoes: vidro translucido, com a tela de tras ainda visivel ---------- */
#modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: rgba(4, 22, 70, 0.5);
  animation: fade 0.18s;
}
.panel {
  position: relative;
  width: calc(var(--u) * 85);
  max-width: 95%;
  max-height: 95%;
  overflow-y: auto;
  margin-top: calc(var(--u) * 2);
  border-radius: calc(var(--u) * 8);
  padding: calc(var(--u) * 4.2) calc(var(--u) * 2.8) calc(var(--u) * 3.4);
  border: calc(var(--u) * 0.4) solid #8feaff;
  background: linear-gradient(180deg, rgba(26, 127, 160, 0.66), rgba(72, 70, 190, 0.66));
  box-shadow:
    var(--shine),
    0 0 calc(var(--u) * 1) rgba(190, 248, 255, 0.9),
    0 0 calc(var(--u) * 6) rgba(95, 216, 255, 0.85);
  animation: pop 0.22s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.panel h2 {
  font-size: calc(var(--u) * 8.6);
  margin: calc(var(--u) * 0.6) calc(var(--u) * 13) calc(var(--u) * 3) calc(var(--u) * 2.4);
  white-space: nowrap;
  overflow: hidden;
}
#panelClose {
  position: absolute;
  top: calc(var(--u) * 4.6);
  right: calc(var(--u) * 4);
}
#panelBody {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.7);
}
.pbtns {
  display: flex;
  gap: calc(var(--u) * 2.5);
  margin-top: calc(var(--u) * 1.5);
}
.pbtns .btn {
  flex: 1.15;
  width: auto;
  height: calc(var(--u) * 11.6);
  border: calc(var(--u) * 0.5) solid var(--line);
  background: linear-gradient(180deg, rgba(40, 150, 200, 0.7), rgba(20, 100, 170, 0.7));
  box-shadow: var(--shine), var(--glow);
  font-size: calc(var(--u) * 4.6);
}
.pbtns .btn + .btn {
  flex: 1;
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
}

/* ---------- barra de abas: a aba ativa ganha um realce de vidro e o icone verde ---------- */
#tabs {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: calc(var(--u) * 2.6);
  transform: translateX(-50%);
  width: calc(100% - var(--u) * 5.2);
  max-width: calc(var(--u) * 95);
  height: calc(var(--u) * 16.4);
  border-radius: 99px;
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2.4);
}
#app.tabs #tabs {
  display: grid;
}
#tabs button {
  position: relative;
  border-radius: 99px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.2);
  font-size: calc(var(--u) * 3.3);
  font-weight: 800;
  min-width: 0;
  border: calc(var(--u) * 0.4) solid transparent;
}
#tabs button span {
  white-space: nowrap;
  max-width: 92%;
}
#tabs svg {
  width: calc(var(--u) * 7.2);
  height: calc(var(--u) * 7.2);
}
#tabs button.on {
  border-color: var(--line);
  background: linear-gradient(180deg, rgba(20, 110, 150, 0.8), rgba(14, 86, 134, 0.8));
  box-shadow:
    var(--shine),
    0 0 calc(var(--u) * 2.2) rgba(120, 228, 255, 0.6);
}
#tabs button.on svg {
  color: var(--lime);
}
#tabs button + button::before {
  content: '';
  position: absolute;
  left: calc(var(--u) * -1.2);
  top: 26%;
  bottom: 26%;
  width: calc(var(--u) * 0.35);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.5);
}
[data-orient='land'] #tabs {
  left: calc(var(--u) * 2.2);
  top: calc(var(--u) * 16.6);
  bottom: calc(var(--u) * 11.6);
  transform: none;
  width: calc(var(--u) * 17.4);
  height: auto;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(3, 1fr);
  border-radius: calc(var(--u) * 5.5);
  padding: calc(var(--u) * 2.2) calc(var(--u) * 0.8);
}
[data-orient='land'] #tabs button {
  border-radius: calc(var(--u) * 4.4);
}
[data-orient='land'] #tabs button + button::before {
  left: 20%;
  right: 20%;
  top: calc(var(--u) * -1.2);
  bottom: auto;
  width: auto;
  height: calc(var(--u) * 0.35);
}

/* ---------- jogo ---------- */
#s-play {
  pointer-events: none;
}
.hud {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--u) * 19);
  padding: 0 calc(var(--u) * 2.8);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
}
.hud > *,
#trayChips > * {
  pointer-events: auto;
}
[data-orient='land'] .hud {
  height: calc(var(--u) * 15);
  padding: 0 calc(var(--u) * 5) 0 calc(var(--u) * 2.8);
  gap: calc(var(--u) * 3);
}
[data-orient='land'] .hud .pill {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
[data-orient='land'] .hud .rbtn {
  width: calc(var(--u) * 10.2);
  height: calc(var(--u) * 10.2);
}
.hud .pill {
  margin-left: calc(var(--u) * 7);
}
[data-orient='land'] .hud .pill {
  margin-left: 0;
}
/* em pe sao 5 botoes na barra: tudo um pouco mais junto, para ainda caber "294 / 294" */
[data-orient='port'] .hud {
  padding: 0 calc(var(--u) * 2.4);
}
[data-orient='port'] .hud .rbtn {
  width: calc(var(--u) * 10.2);
  height: calc(var(--u) * 10.2);
}
[data-orient='port'] .hud .pill {
  margin-left: calc(var(--u) * 0.6);
  min-width: 0;
  padding: 0 calc(var(--u) * 3) 0 calc(var(--u) * 1.6);
  gap: calc(var(--u) * 2);
  font-size: calc(var(--u) * 4.7);
}
.hud {
  transition: opacity 0.25s;
}
#s-play.done .hud {
  opacity: 0;
  pointer-events: none;
}
#s-play.done .hud > * {
  pointer-events: none;
}
.hud .rbtn.held {
  background: linear-gradient(180deg, #caff45, var(--lime-2));
  color: var(--ink);
}
.pill {
  height: calc(var(--u) * 10.6);
  min-width: calc(var(--u) * 35);
  justify-content: center;
  padding: 0 calc(var(--u) * 4) 0 calc(var(--u) * 2);
  border-radius: 99px;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.4);
  font-weight: 800;
  font-size: calc(var(--u) * 5.2);
  white-space: nowrap;
}
.pill.pulse {
  animation: pulse 0.4s;
}
@keyframes pulse {
  40% {
    scale: 1.09;
  }
}
.pill.stats {
  min-width: 0;
  width: 94%;
  justify-content: center;
  padding: 0 calc(var(--u) * 4);
  gap: calc(var(--u) * 2.4);
  height: calc(var(--u) * 14.8);
  font-size: calc(var(--u) * 6);
}
.pill.stats svg {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  flex: none;
}
.pill .sep {
  width: calc(var(--u) * 0.4);
  height: 56%;
  background: rgba(255, 255, 255, 0.55);
  margin: 0 calc(var(--u) * 3);
}
/* botoes da bandeja: o retangulo (--tx, --ty, --tw, --th) vem da mesa (src/main.js) */
#trayChips {
  position: absolute;
  left: var(--tx);
  top: var(--ty);
  width: var(--tw);
  height: var(--th);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.3);
}
/* "Bordas" e um botao que abre as opcoes da bandeja (embaralhar, cor e, no desktop, espalhar), em linhas grandes, boas para o dedo */
[data-orient='port'] #trayChips .chip {
  width: calc(var(--u) * 14.8);
  height: calc(var(--u) * 9.2);
}
[data-orient='land'] #trayChips {
  flex-direction: row;
  gap: calc(var(--u) * 1.2);
}
[data-orient='land'] #btnEdges {
  width: calc(var(--u) * 12.2);
}
[data-orient='land'] #btnOrg {
  width: calc(var(--u) * 8.2);
  padding: 0;
}
#trayMenu {
  position: absolute;
  z-index: 6;
  left: var(--tx);
  bottom: calc(100% - var(--ty) + var(--u) * 1.6);
  width: calc(var(--u) * 54);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.4);
  padding: calc(var(--u) * 1.8);
  border-radius: calc(var(--u) * 7.4);
  pointer-events: auto;
  border: calc(var(--u) * 0.32) solid var(--line);
  background: linear-gradient(180deg, rgba(20, 104, 172, 0.95), rgba(34, 84, 178, 0.95));
  box-shadow: var(--shine), var(--glow);
  animation: pop 0.16s cubic-bezier(0.2, 1.3, 0.4, 1);
  transform-origin: left bottom;
}
[data-orient='land'] #trayMenu {
  left: auto;
  bottom: auto;
  right: calc(100% - var(--tx) + var(--u) * 1.6);
  top: var(--ty);
  transform-origin: right top;
}
#trayMenu .row {
  width: 100%;
  height: calc(var(--u) * 11.6);
  background: linear-gradient(180deg, rgba(60, 160, 215, 0.5), rgba(30, 110, 190, 0.5));
  transition: transform 0.08s;
}
#trayMenu .row:active {
  transform: scale(0.97);
}
#trayMenu .row svg {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
}
[data-form='touch'] #btnScatter {
  display: none;
}
.chip {
  width: calc(var(--u) * 14.4);
  height: calc(var(--u) * 7.6);
  border-radius: 99px;
  font-size: calc(var(--u) * 3.5);
  font-weight: 800;
  display: grid;
  place-items: center;
  overflow: hidden;
  white-space: nowrap;
  padding: 0 calc(var(--u) * 1.2);
  background: rgba(8, 44, 98, 0.5);
  border: calc(var(--u) * 0.35) solid rgba(205, 245, 255, 0.85);
  transition: transform 0.08s;
}
.chip svg {
  width: calc(var(--u) * 5.2);
  height: calc(var(--u) * 5.2);
}

/* ---------- vitoria ---------- */
#win {
  position: absolute;
  inset: 0;
  z-index: 20;
  animation: fade 0.25s;
}
.wincol {
  position: relative;
  margin: 0 auto;
  width: min(100%, calc(var(--u) * 100));
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--u) * 12.6) calc(var(--u) * 2.6) calc(var(--u) * 16.5);
}
.winpic {
  width: 100%;
  border-radius: calc(var(--u) * 6.5);
  overflow: hidden;
  flex: none;
}
.winpic img {
  width: 100%;
  aspect-ratio: 1.54;
  object-fit: cover;
}
.winbtns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 calc(var(--u) * 1.6);
}
[data-orient='land'] .wincol {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: center;
  justify-items: center;
  gap: calc(var(--u) * 4) calc(var(--u) * 5);
  width: min(100%, calc(var(--u) * 180));
  padding: calc(var(--u) * 5) calc(var(--u) * 4);
}
[data-orient='land'] .winpic {
  grid-row: 1 / 4;
  align-self: center;
}
[data-orient='land'] .wincol > .stats,
[data-orient='land'] .winbtns {
  width: 100%;
}
[data-orient='land'] .band.big {
  height: calc(var(--u) * 13);
  font-size: calc(var(--u) * 5.6);
}
[data-orient='land'] .spark {
  display: none;
}
.capbtn {
  position: relative;
  display: block;
}
.capbtn small {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: calc(var(--u) * 1.4);
  font-size: calc(var(--u) * 3.6);
  font-weight: 800;
  white-space: nowrap;
}
/* pontos de luz: poucos, parados */
.spark {
  position: absolute;
  width: calc(var(--u) * 0.7);
  height: calc(var(--u) * 0.7);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 calc(var(--u) * 1.2) #fff;
}
.spark.g {
  width: calc(var(--u) * 1.5);
  height: calc(var(--u) * 1.5);
  background: #dcff7a;
  box-shadow:
    0 0 calc(var(--u) * 2) var(--lime),
    0 0 calc(var(--u) * 5) rgba(182, 245, 42, 0.7);
}
#win .band,
#win .stats,
#win .winbtns {
  animation: rise 0.5s both;
}
#win .stats {
  animation-delay: 0.25s;
}
#win .winbtns {
  animation-delay: 0.4s;
}
#win.skip *,
[data-motion='reduced'] #win * {
  animation: none !important;
}
@keyframes lift {
  from {
    transform: scale(0.94);
  }
}
/* so desloca (sem sumir): se a pagina estiver parada em segundo plano, o conteudo continua visivel */
@keyframes rise {
  from {
    translate: 0 calc(var(--u) * 3);
  }
} /* "translate" e nao "transform": nao apaga o translateX(-50%) de quem centraliza assim (o aviso entrava de lado) */

#toast {
  position: absolute;
  z-index: 25;
  left: 50%;
  top: calc(var(--u) * 19);
  transform: translateX(-50%);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 6);
  border-radius: 99px;
  font-weight: 800;
  white-space: nowrap;
  max-width: 92%;
  overflow: hidden;
  pointer-events: none;
}
#toast.show {
  animation: rise 0.25s both;
}

/* entrada das telas: os blocos sobem um pouco, em sequencia */
.screen.on .col > * {
  animation: rise 0.32s both;
}
.screen.on .col > *:nth-child(2) {
  animation-delay: 0.05s;
}
.screen.on .col > *:nth-child(3) {
  animation-delay: 0.1s;
}
/* troca de tela com a foto voando (src/ui.js, fly): os blocos nao sobem e a copia da foto fica por cima de tudo */
.noin .screen.on .col > * {
  animation: none;
}
.fly {
  position: absolute;
  z-index: 40;
  object-fit: cover;
  pointer-events: none;
  box-shadow: 0 0 calc(var(--u) * 3) rgba(80, 220, 255, 0.6);
}
/* computador: o cartao levanta um pouco e ganha um reflexo que segue o mouse (--mx, --my vem de src/ui.js) */
@media (hover: hover) and (pointer: fine) {
  .card {
    transition:
      transform 0.22s cubic-bezier(0.3, 1.5, 0.5, 1),
      box-shadow 0.2s;
  }
  .card:hover {
    transform: translateY(calc(var(--u) * -0.9));
    box-shadow:
      0 0 calc(var(--u) * 1) rgba(210, 252, 255, 1),
      0 0 calc(var(--u) * 4.4) rgba(90, 225, 255, 0.85);
  }
  .card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.22), transparent 55%);
  }
  .card:hover::after {
    opacity: 1;
  }
  .card.locked::after {
    display: none;
  }
}
[data-motion='reduced'] * {
  animation: none !important;
  transition: none !important;
}

/* ---------- desktop (data-form='desk', vem de src/main.js): janela larga e alta. As abas sobem para o topo, as grades ganham colunas e tudo fica a vista sem rolar ---------- */
[data-form='desk'] .col {
  width: min(100%, calc(var(--u) * 276));
  padding: calc(var(--u) * 3.4) calc(var(--u) * 6) calc(var(--u) * 5);
  gap: calc(var(--u) * 4);
}
[data-form='desk'] .tabbed .col {
  padding-left: calc(var(--u) * 6);
  padding-bottom: calc(var(--u) * 5);
}
[data-form='desk'] #tabs {
  left: 50%;
  top: calc(var(--u) * 3.4);
  bottom: auto;
  transform: translateX(-50%);
  width: calc(var(--u) * 108);
  max-width: none;
  height: calc(var(--u) * 11.5);
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: none;
  border-radius: 99px;
  padding: calc(var(--u) * 1.1);
  gap: calc(var(--u) * 1.8);
}
[data-form='desk'] #tabs button {
  flex-direction: row;
  gap: calc(var(--u) * 1.8);
  font-size: calc(var(--u) * 4);
  border-radius: 99px;
}
[data-form='desk'] #tabs svg {
  width: calc(var(--u) * 5.6);
  height: calc(var(--u) * 5.6);
  flex: none;
}
[data-form='desk'] #tabs button span {
  max-width: 70%;
}
[data-form='desk'] #tabs button + button::before {
  left: calc(var(--u) * -1.05);
  right: auto;
  top: 26%;
  bottom: 26%;
  width: calc(var(--u) * 0.35);
  height: auto;
}
/* abertura: logo grande, as pecas soltas de volta e um botao de tamanho de computador */
[data-form='desk'] #s-title .col {
  justify-content: center;
  gap: calc(var(--u) * 6);
  padding-top: calc(var(--u) * 4);
  padding-bottom: calc(var(--u) * 6);
}
[data-form='desk'] .emblem {
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
}
[data-form='desk'] .logo {
  font-size: calc(var(--u) * 21);
}
[data-form='desk'] .logo small {
  font-size: calc(var(--u) * 7.4);
}
[data-form='desk'] .titlePieces {
  display: block;
  width: auto;
  height: calc(var(--u) * 34);
  max-height: none;
}
[data-form='desk'] #s-title .btn.xl {
  width: calc(var(--u) * 78);
  height: calc(var(--u) * 15);
  font-size: calc(var(--u) * 6.6);
}
/* inicio e diario: duas colunas da mesma altura; no inicio as 12 categorias aparecem todas, em grade */
[data-form='desk'] .home,
[data-form='desk'] .dailyMain {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: calc(var(--u) * 5);
  align-items: stretch;
  align-content: safe center;
}
[data-form='desk'] .home {
  grid-template-rows: minmax(auto, calc(var(--u) * 165));
}
[data-form='desk'] #s-home .hero,
[data-form='desk'] #s-daily .hero {
  aspect-ratio: auto;
  min-height: calc(var(--u) * 84);
}
[data-form='desk'] .heroBar .btn.w1 {
  width: calc(var(--u) * 34);
}
[data-form='desk'] .heroTx b {
  white-space: nowrap;
  font-size: calc(var(--u) * 6.4);
  line-height: normal;
}
[data-form='desk'] .homeSide {
  display: flex;
  flex-direction: column;
}
[data-form='desk'] .catRow {
  flex: 1 1 auto;
  grid-auto-flow: row;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(calc(var(--u) * 19), 1fr);
  gap: calc(var(--u) * 2.4);
  overflow: visible;
  padding: 0;
  margin: 0;
}
[data-form='desk'] .catRow .cap {
  font-size: calc(var(--u) * 4.1);
}
[data-form='desk'] .dailyCard b {
  font-size: calc(var(--u) * 4.8);
}
[data-form='desk'] .dailyCard img {
  aspect-ratio: 1.85;
}
[data-form='desk'] .day {
  aspect-ratio: 1.02;
}
[data-form='desk'] .day.today::before {
  height: 104%;
}
/* grades: a altura da linha vem da tela (com teto), nao da proporcao do cartao; a foto preenche o cartao */
[data-form='desk'] #s-library .scroll,
[data-form='desk'] #s-list .scroll {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(min-content, calc(var(--u) * 190));
  align-content: safe center;
}
[data-form='desk'] #s-list .scroll {
  grid-template-rows: minmax(min-content, calc(var(--u) * 104));
}
[data-form='desk'] .grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(calc(var(--u) * 36), 1fr);
  gap: calc(var(--u) * 3);
}
[data-form='desk'] #listGrid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
[data-form='desk'] .catRow .card,
[data-form='desk'] #catGrid .card,
[data-form='desk'] #listGrid .card {
  aspect-ratio: auto;
}
[data-form='desk'] .card > img {
  position: absolute;
  inset: 0;
}
[data-form='desk'] .pcMain {
  flex: 1;
  min-height: 0;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: calc(var(--u) * 5);
  align-content: safe center;
}
[data-form='desk'] .wincol {
  width: min(100%, calc(var(--u) * 268));
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: calc(var(--u) * 5) calc(var(--u) * 8);
}
[data-form='desk'] .progRow {
  flex: none;
  grid-auto-rows: calc(var(--u) * 19);
}

/* End of style.css */