/* Match the module buttons to the timer cards in the normal page layout. */
body:not(.timer-fullscreen-active) app-timer .debater-timer-page .timer-navigation-buttons {
  margin-inline: -16px;
}

@media (max-width: 639px) {
  body:not(.timer-fullscreen-active) app-timer .debater-timer-page .timer-navigation {
    width: calc(100% - 2rem);
  }
}

@media (max-width: 640px) {
  body:not(.timer-fullscreen-active) app-timer .debater-timer-page .timer-navigation-buttons {
    margin-inline: -14px;
  }
}

@media (min-width: 1536px) {
  body:not(.timer-fullscreen-active) app-timer .debater-timer-page .timer-navigation {
    max-width: 56rem;
  }
}

@media (min-width: 768px) {
  app-timer .debater-timer-page .timer-navigation-buttons:has(> .timer-navigation-button:nth-child(2):last-child) {
    gap: 2rem;
  }

  app-timer .debater-timer-page .timer-navigation-buttons:has(> .timer-navigation-button:nth-child(2):last-child) > .timer-navigation-button {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Fullscreen cards use a fluid grid with 16px/32px side padding. */
body.timer-fullscreen-active app-timer .debater-timer-page .timer-navigation {
  max-width: none;
}

body.timer-fullscreen-active app-timer .debater-timer-page .timer-navigation-buttons {
  margin-inline: 16px;
}

@media (max-width: 640px) {
  body.timer-fullscreen-active app-timer .debater-timer-page .timer-navigation-buttons {
    margin-inline: 18px;
  }
}

@media (max-width: 639px) {
  body.timer-fullscreen-active app-timer .debater-timer-page .timer-navigation-buttons {
    margin-inline: 2px;
  }
}

/* The fullscreen timer can be taller than the viewport; never clip its controls. */
body.timer-fullscreen-active app-root .container:has(> app-breadcrumb) {
  display: none;
}

body.timer-fullscreen-active app-timer .debater-timer-page {
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

body.timer-fullscreen-active app-timer .debater-timer-page .timer-background-layer {
  position: fixed;
}

body.timer-fullscreen-active app-timer .debater-timer-page .timer-navigation + .grid {
  padding-bottom: 0;
}

body.timer-fullscreen-active app-timer .debater-timer-page .timer-background-toolbar:has(> button[title='退出全屏']) {
  margin-top: 12px;
  margin-bottom: max(16px, env(safe-area-inset-bottom));
}

@media (min-width: 768px) and (max-height: 820px) {
  body.timer-fullscreen-active app-timer .debater-timer-page [data-testid='timer-card-affirmative'] > .glass,
  body.timer-fullscreen-active app-timer .debater-timer-page [data-testid='timer-card-negative'] > .glass {
    padding-block: 24px;
  }

  body.timer-fullscreen-active app-timer .debater-timer-page [role='timer'] {
    font-size: clamp(4.5rem, 15dvh, 8rem);
  }
}

@media (max-width: 767px) {
  body.timer-fullscreen-active app-timer .debater-timer-page h1 > span.text-base {
    display: none;
  }
}

@media (max-width: 767px), (max-height: 700px) {
  body.timer-fullscreen-active app-timer .debater-timer-page app-reveal:has(.timer-background-toolbar button[title='退出全屏']) > div {
    transform: none !important;
    transition: none;
  }

  body.timer-fullscreen-active app-timer .debater-timer-page .timer-background-toolbar button[title='退出全屏'] {
    position: fixed;
    top: max(12px, env(safe-area-inset-top));
    right: 12px;
    z-index: 60;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 0;
  }

  body.timer-fullscreen-active app-timer .debater-timer-page .timer-background-toolbar button[title='退出全屏']::after {
    content: '×';
    font-size: 26px;
    line-height: 1;
  }
}