/* Flip clock mecânico — usado no painel e na janela pop-out.

   Todo o tamanho deriva de --flip-unit. Quem usa o componente só troca essa variável, e
   plaquetas, vinco, tipografia, espaçamento e sombras acompanham juntos. É isso que faz o
   mesmo relógio caber num cartão do dashboard e ocupar um monitor de 27" para gravação sem
   ajuste manual de nenhuma medida. */

.flip-clock{
  --flip-unit: clamp(2rem, 9vmin, 6rem);
  --flip-placa: #1c1c1e;
  display:flex; align-items:center; justify-content:center;
  gap: calc(var(--flip-unit) * .16);
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height:1;
}
.flip-group{ display:flex; gap: calc(var(--flip-unit) * .085); }

.flip-plate{
  position:relative;
  width: calc(var(--flip-unit) * 1.26);
  height: calc(var(--flip-unit) * 1.72);
  border-radius: calc(var(--flip-unit) * .22);
  /* O degradê com quebra no meio imita as duas pás (superior mais clara que a inferior). */
  background:linear-gradient(180deg, #2c2c30 0%, #202024 49.4%, #171719 50.6%, #131315 100%);
  box-shadow:
    0 calc(var(--flip-unit)*.045) calc(var(--flip-unit)*.13) rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 calc(var(--flip-unit)*-.02) calc(var(--flip-unit)*.04) rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transform-style:preserve-3d;
}
/* O vinco horizontal no meio da plaqueta é o detalhe que entrega a leitura de "relógio de
   pás" — sem ele as placas viram apenas retângulos escuros. */
.flip-plate::after{
  content:''; position:absolute; left:0; right:0; top:50%;
  height:max(1px, calc(var(--flip-unit) * .016));
  transform:translateY(-50%);
  background:rgba(0,0,0,.66);
  box-shadow:0 max(1px, calc(var(--flip-unit)*.012)) 0 rgba(255,255,255,.05);
}
.flip-digit{
  font-size: calc(var(--flip-unit) * 1.1);
  font-weight:700;
  letter-spacing:-.025em;
  color:#F5F5F7;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
  text-shadow:0 calc(var(--flip-unit)*.012) calc(var(--flip-unit)*.03) rgba(0,0,0,.55);
}
.flip-sep{
  font-size: calc(var(--flip-unit) * .62);
  font-weight:700;
  color:rgba(245,245,247,.34);
  padding-inline: calc(var(--flip-unit) * .02);
  transform:translateY(calc(var(--flip-unit) * -.02));
}
.flip-rotulo{
  display:flex; justify-content:center;
  gap: calc(var(--flip-unit) * .16);
  margin-top: calc(var(--flip-unit) * .22);
  font-size: clamp(.55rem, calc(var(--flip-unit) * .17), 1rem);
  font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--flip-rotulo-cor, rgba(120,120,128,.9));
}
.flip-rotulo span{ width: calc(var(--flip-unit) * 2.6); text-align:center; }

/* ---------- Janelas externas (pop-out e Picture-in-Picture) ----------
   Uma regra só para as duas, e só para elas: o relógio do painel vive num cartão e não
   deve empilhar só porque o celular está em pé.

   .flip-area é a faixa que sobra entre o título e os controles (flex:1), de ponta a ponta
   na largura. Ela é um container de tamanho, então o relógio se mede pelo espaço LIVRE de
   verdade (cqw/cqh) em vez de adivinhar com vw/vh quanto os outros elementos ocupam — era
   essa adivinhação (teto de 22vh) que travava os dígitos numa janela larga e baixa e
   deixava faixas pretas dos lados.

   Linha única: MM:SS mede 5.78 × 1.72 unidades → 16.6cqw (≈96% da largura) ou 56cqh.
   Empilhado (MM em cima, SS embaixo): 2.6 × 3.56 unidades → 36cqw ou 27cqh.
   Empilhar só vale a pena quando dá dígitos maiores, o que acontece com a área mais
   estreita que 1.6:1 (27cqh > 16.6cqw). */
.flip-area{
  flex:1 1 0; min-height:0;
  width:100%; min-width:100%;
  padding-inline:1rem;
  container-type:size;
  display:flex; align-items:center; justify-content:center;
}
.flip-clock.flip-janela{ width:100%; --flip-unit: min(16.6cqw, 56cqh); }
@container (aspect-ratio < 1.6){
  .flip-clock.flip-janela{
    flex-direction:column;
    --flip-unit: min(36cqw, 27cqh);
    gap: calc(var(--flip-unit) * .12);
  }
  .flip-clock.flip-janela .flip-sep{ display:none; }
}
/* Os controles ficam fora do relógio e herdavam um tamanho fixo (3rem), o que cortava os
   botões numa janela estreita. Aqui eles encolhem com a janela e param de crescer em 3rem. */
.pomo-controles.flip-janela-ctrl{ --flip-unit: clamp(1.3rem, min(9vw, 7vh), 3rem); }

/* A virada: um basculhar curto no eixo X quando o dígito troca. Animação de verdade nas
   duas pás exigiria duplicar o DOM a cada segundo; esse basculhar entrega a sensação
   mecânica com uma fração do custo. */
.flip-plate.is-flipping{ animation:flip-tick .34s cubic-bezier(.3,.7,.3,1); }
@keyframes flip-tick{
  0%   { transform:perspective(420px) rotateX(0deg); }
  42%  { transform:perspective(420px) rotateX(-14deg); }
  100% { transform:perspective(420px) rotateX(0deg); }
}
@media (prefers-reduced-motion: reduce){
  .flip-plate.is-flipping{ animation:none; }
}

/* ---------- Controles ---------- */
.pomo-controles{
  display:flex; align-items:center; justify-content:center;
  gap: calc(var(--flip-unit, 3rem) * .28);
}
.pomo-btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:0; cursor:pointer; border-radius:999px;
  background:rgba(120,120,128,.18);
  color:#F5F5F7;
  width: calc(var(--flip-unit, 3rem) * .78);
  height: calc(var(--flip-unit, 3rem) * .78);
  transition:background-color .15s ease, transform .1s ease, opacity .2s ease;
}
.pomo-btn:hover{ background:rgba(120,120,128,.3); }
.pomo-btn:active{ transform:scale(.94); }
.pomo-btn svg{ width:46%; height:46%; }
.pomo-btn-principal{
  background:#F5F5F7; color:#1c1c1e;
  width: calc(var(--flip-unit, 3rem) * 1.02);
  height: calc(var(--flip-unit, 3rem) * 1.02);
}
.pomo-btn-principal:hover{ background:#fff; }
.pomo-btn-principal svg{ width:42%; height:42%; }