/* ==========================================================================
   Mobile & Standalone PWA Layout (Zero Overflow on 360px, 375px & 393px Viewports)
   ========================================================================== */

#mobile-tab-dock {
  display: none;
}

@media (min-width: 921px) and (max-width: 1140px) and (min-height: 521px), (min-width: 1101px) and (max-width: 1140px) {
  :root {
    --sidebar-w: 320px;
  }
  #timer-section {
    padding: 10px 16px 14px;
  }
  .account-name-mini {
    max-width: 72px;
  }
}

@media (max-width: 920px), (max-width: 1100px) and (max-height: 520px) {
  :root {
    --header-h: 70px;
    --dock-content-h: 62px;
    --dock-safe-b: max(env(safe-area-inset-bottom, 0px), 10px);
    --dock-total-h: calc(var(--dock-content-h) + var(--dock-safe-b));
    --dock-h: var(--dock-total-h);
  }

  #main {
    grid-template-columns: 1fr;
  }

  /* Seamless Mobile Dynamic Island Ambient Halo (Zero hard cut-offs, floods y=0px) */
  .ambient-stage {
    contain: none !important;
    overflow: visible !important;
  }

  .caustic-lens-top {
    position: absolute !important;
    top: -50px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 140vw !important;
    max-width: 600px !important;
    height: 440px !important;
    border-radius: 50% 50% 60% 60% / 0 0 100% 100% !important;
    background: radial-gradient(ellipse at 50% 15%, 
      var(--accent-glow, rgba(var(--accent-rgb), 0.48)) 0%, 
      var(--accent-soft, rgba(var(--accent-rgb), 0.24)) 38%, 
      rgba(var(--accent-rgb), 0.08) 64%, 
      transparent 84%) !important;
    filter: blur(44px) !important;
    opacity: 0.85 !important;
    pointer-events: none !important;
  }

  /* 2-Row Mobile Header (Apple Pure Zen + Dynamic Island Shoulder Balance):
     Row 1 = [⚡ SpeedCube PRO] —— [Pure Air Under Island] —— [15s][🔊][⚙️]
     Row 2 = Full-Width 5-Event Segmented Capsule (3×3 | 2×2 | 4×4 | OH | Pyra) */
  #header {
    padding: calc(env(safe-area-inset-top, 0px) + 6px) 12px 4px 12px;
    height: auto;
    min-height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    background: transparent;
    border-bottom: none;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 0 auto;
    grid-template-rows: auto auto;
    row-gap: 6px;
    column-gap: 5px;
    align-items: center;
  }

  .header-left {
    display: contents !important;
  }

  /* Phones: the brand gives way to the current session, which is the thing
     a daily user actually needs to see and switch */
  .logo {
    display: none !important;
  }

  .logo .logo-icon {
    width: 20px;
    height: 20px;
    color: var(--accent);
    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.45));
  }

  .logo .logo-title {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: #FFFFFF;
  }

  .header-center {
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
    min-width: 0;
    max-width: 100%;
  }

  #btn-session-switcher {
    height: 34px;
    max-width: 100%;
    padding: 0 12px 0 11px;
    font-size: 0.86rem;
  }

  #session-name-display {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .header-right {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: auto;
    margin-left: 0;
  }

  .header-quick-left {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
  }

  .header-quick-right {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
  }

  /* Hide desktop-only controls and fake island (profile is in bottom tab dock!) */
  #btn-open-account,
  #btn-toggle-typing,
  #btn-toggle-zen,
  #btn-toggle-learn,
  #btn-toggle-stats,
  .header-divider,
  .desktop-only-btn,
  #keyboard-hints-bar {
    display: none !important;
  }

  .header-right .icon-btn {
    width: 36px;
    height: 34px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--text-secondary);
    transition: all 0.16s var(--ease-apple);
  }

  .header-right .icon-btn:active {
    transform: scale(0.92);
  }

  #btn-toggle-inspection {
    width: 42px;
    height: 34px;
  }

  #btn-toggle-inspection .inspection-tag {
    font-size: 0.68rem;
    font-weight: 700;
  }

  #btn-toggle-inspection.active {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.45);
    color: var(--accent);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.35);
  }

  /* Row 2: Apple Segmented Event Switcher */
  .event-segmented-control {
    grid-row: 2;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
    height: 30px;
    padding: 2.5px;
    gap: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .event-pill {
    width: 100%;
    height: 24px;
    padding: 0 2px;
    font-size: 0.72rem;
    font-weight: 600;
    text-align: center;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    transition: all 0.18s var(--ease-apple);
    cursor: pointer;
  }

  .event-pill:active {
    transform: scale(0.95);
  }

  .event-pill.active {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.14);
    box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.35),
      inset 0 1px 0.5px rgba(255, 255, 255, 0.28);
    font-weight: 700;
  }

  /* Main Arena Layout */
  #timer-section {
    padding: 4px 12px calc(var(--dock-total-h) + 12px) 12px;
    grid-template-rows: auto 1fr auto;
    row-gap: 6px;
    min-width: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .arena-bottom-stack {
    align-self: center;
    width: 100%;
    gap: 0;
  }

  #scramble-capsule {
    min-height: 68px;
    max-height: none;
    padding: 7px 11px 8px 12px;
    border-radius: 18px;
    gap: 5px;
    min-width: 0;
    width: 100%;
  }

  .scramble-top-bar {
    flex-wrap: nowrap;
    gap: 6px;
    padding-bottom: 6px;
  }

  .scramble-main-row {
    min-width: 0;
    width: 100%;
  }

  .subset-pills-scroll {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent);
    padding-right: 18px;
    gap: 4px;
  }

  .subset-pills-scroll::-webkit-scrollbar {
    display: none !important;
  }

  .subset-pill {
    height: 28px;
    padding: 0 10px;
    font-size: 0.7rem;
  }

  .cross-solver-pill {
    height: 28px;
    padding: 0 10px;
    font-size: 0.7rem;
  }

  .cross-badge-full {
    display: none !important;
  }

  .cross-badge-compact {
    display: inline !important;
  }

  .scramble-top-actions {
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
  }

  .scramble-action-pill {
    width: 32px;
    height: 28px;
  }

  #scramble-display {
    font-size: clamp(0.96rem, 4.1vw, 1.12rem);
    line-height: 1.40;
    letter-spacing: 0.025em;
    word-spacing: 0.20em;
    padding: 1px 0;
  }

  #app[data-event="444"] #scramble-display {
    font-size: 0.72rem;
    line-height: 1.26;
    word-spacing: 0.09em;
  }

  #timer-area {
    padding: 0 10px;
  }

  .timer-status-slot {
    height: 30px;
    width: 100%;
    max-width: 100%;
  }

  .status-pill {
    height: 26px;
    padding: 0 11px;
    font-size: 0.63rem;
    letter-spacing: 0.06em;
    max-width: calc(100% - 16px);
  }

  .timer-digits-wrap {
    min-height: clamp(4.4rem, 20vw, 5.8rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #timer-display {
    font-size: clamp(4.4rem, 21vw, 6rem);
    font-weight: 650;
  }

  #timer-display.timer-text-long {
    /* "1:23.51" is ~2.65 em wide in Inter: 19vw keeps it a touch smaller than "21.48" and still well inside a 320 px screen */
    font-size: clamp(3.6rem, 19vw, 5.4rem);
  }

  .live-splits-strip {
    gap: 4px;
    margin-top: 3px;
  }

  .live-split-chip {
    padding: 2px 6px;
    font-size: 0.61rem;
    gap: 3px;
  }

  .live-split-chip em {
    font-size: 0.54rem;
  }

  #under-timer-averages {
    font-size: 0.70rem;
    gap: 6px;
  }

  /* Lower Bento Deck & 2x2 Grid Polish */
  #bento-deck {
    height: clamp(112px, 16.5dvh, 140px);
    gap: 10px;
  }

  .bento-deck-card {
    padding: 10px 12px;
    border-radius: 18px;
    justify-content: space-between;
  }

  .bento-card-head {
    gap: 4px;
    min-width: 0;
  }

  .bento-card-title {
    font-size: 0.64rem;
    letter-spacing: 0.04em;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The session is already shown in the header pill */
  #live-telemetry-strip .bento-title-sep,
  #live-telemetry-strip #bento-session-tag {
    display: none;
  }

  .bento-card-title strong {
    display: inline-block;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }

  .bento-cube-gear-row {
    display: none !important;
  }

  .bento-best-full {
    display: none !important;
  }

  .bento-best-short {
    display: inline !important;
    font-weight: 700;
    color: var(--green);
  }

  .bento-best-pill {
    font-size: 0.66rem;
    padding: 2px 7px;
    letter-spacing: 0.02em;
    flex-shrink: 0;
  }

  .cube-view-mode-full {
    display: none !important;
  }

  .cube-view-mode-short {
    display: inline !important;
    font-weight: 700;
  }

  .bento-orient-hint {
    display: none !important;
  }

  .cube-card-controls {
    gap: 4px;
    flex-shrink: 0;
  }

  .cube-view-pill {
    padding: 2px 7px;
    font-size: 0.59rem;
    letter-spacing: 0.02em;
  }

  .cube-reset-pill {
    width: 20px;
    height: 19px;
    font-size: 0.64rem;
  }

  .bento-stats-grid-4 {
    gap: 2px 6px;
  }

  /* Label above value: fits four averages on the narrowest phones */
  .bento-stats-grid-4 {
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px !important;
  }

  .telemetry-cell {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1px;
    padding: 0;
    border-bottom: none;
  }

  .telemetry-cell .telemetry-label {
    font-size: 0.68rem;
    letter-spacing: 0;
  }

  .telemetry-cell .telemetry-val {
    font-size: 0.98rem;
    letter-spacing: -0.03em;
  }

  .cube-net-svg {
    width: 100px;
    height: 74px;
  }

  .cube-3d-svg {
    width: 92px;
    height: 72px;
  }

  /* Floating liquid-glass tab bar (iOS-style), lifted off the screen edge */
  #mobile-tab-dock {
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    gap: 2px;
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: var(--dock-safe-b) !important;
    width: auto !important;
    height: var(--dock-content-h) !important;
    padding: 5px !important;
    border-radius: 28px !important;
    border: none !important;
    background: var(--glass-capsule-fill) !important;
    backdrop-filter: blur(30px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
    box-shadow: var(--liquid-shadow-lg) !important;
    z-index: 700 !important;
    transition: opacity 0.28s var(--ease-apple), transform 0.32s var(--ease-apple);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .zen-mode #mobile-tab-dock,
  .timer-running #mobile-tab-dock {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(calc(100% + 24px)) !important;
  }

  #mobile-tab-dock::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--liquid-rim-refraction);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  .dock-tab-btn {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 100%;
    padding: 0 2px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    border-radius: 23px;
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.22s var(--ease-apple), color 0.22s var(--ease-apple), transform 0.16s var(--ease-apple);
  }

  .dock-tab-btn:active {
    transform: scale(0.94);
  }

  .dock-tab-btn.active {
    color: var(--accent-light);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.08) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.22),
      0 4px 12px -4px rgba(0, 0, 0, 0.5);
  }

  /* Native Mobile Analytics Tab View */
  #stats-panel {
    position: fixed;
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(var(--dock-total-h) + 18px);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    z-index: 650;
  }

  #stats-panel::before {
    display: none;
  }

  #stats-panel.stats-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Closed: not just transparent but hidden, so it is neither drawn nor reachable with Tab;
     visibility flips only after the fade-out */
  #stats-panel:not(.stats-open) {
    visibility: hidden;
    transition: opacity 0.28s var(--ease-apple), transform 0.28s var(--ease-apple), visibility 0s linear 0.28s;
  }

  /* Don't let the timer bleed through while the analytics tab fades in */
  #main:has(#stats-panel.stats-open) #timer-section {
    visibility: hidden;
  }

  #solves-list {
    overflow: visible;
    flex: none;
  }

  #solves-ul {
    overflow: visible;
    flex: none;
  }

  /* Mobile Learn Academy Layout */
  .learn-panel-container {
    top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
    bottom: 0;
  }

  .learn-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: 100%;
  }

  .learn-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .learn-sidebar-header {
    display: none;
  }

  .learn-nav {
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 7px 12px;
    gap: 6px;
    /* Soft edges say "this row scrolls" instead of chips cut off at the screen edge */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent);
  }

  .learn-nav::-webkit-scrollbar {
    display: none;
  }

  .learn-nav-item {
    flex-direction: row;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.045);
  }

  .learn-nav-desc {
    display: none;
  }

  .learn-content {
    padding: 10px 12px calc(var(--dock-total-h) + 24px);
  }

  .overview-hero {
    padding: 14px 14px 12px;
    margin-bottom: 12px;
  }

  .overview-hero h2 {
    font-size: 1.14rem;
  }

  .overview-intro {
    font-size: 0.78rem;
    margin-bottom: 10px;
  }

  .hero-badge {
    font-size: 0.64rem;
    padding: 3px 9px;
  }

  .section-hero.compact-hero {
    padding: 10px 14px;
    margin-bottom: 10px;
  }

  .section-hero.compact-hero h2 {
    font-size: 1.12rem;
    margin-bottom: 2px;
  }

  .section-hero.compact-hero p {
    font-size: 0.76rem;
  }

  .learn-toolbar {
    margin-bottom: 12px;
    gap: 7px;
    flex-wrap: wrap;
  }

  .learn-search-bar {
    flex: 1 1 100%;
    padding: 8px 12px;
  }

  .learn-filter-pills {
    width: 100%;
    justify-content: space-between;
  }

  .learn-fav-filter,
  .trainer-mode-btn {
    flex: 1;
    height: 34px;
    padding: 0 10px;
    font-size: 0.74rem;
    justify-content: center;
    display: inline-flex;
    align-items: center;
  }

  .cfop-steps-grid,
  .targets-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .targets-grid .target-card:last-child {
    grid-column: span 2;
  }

  .alg-cards-grid {
    grid-template-columns: 1fr;
  }

  /* ==========================================================================
     iOS Native Bottom Sheet Modals
     ========================================================================== */
  dialog.glass-sheet-modal,
  #account-modal,
  #settings-modal,
  #cross-modal,
  #solve-modal,
  #avg-modal,
  #session-modal,
  #confirm-dialog {
    position: fixed !important;
    inset: auto 0 0 0 !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    max-height: 88dvh !important;
    border-radius: 28px 28px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(14, 16, 22, 0.94) !important;
    backdrop-filter: blur(36px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(36px) saturate(190%) !important;
    box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.85) !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 1000 !important;
  }

  dialog.glass-sheet-modal[open],
  #account-modal[open],
  #settings-modal[open],
  #cross-modal[open],
  #solve-modal[open],
  #avg-modal[open],
  #session-modal[open],
  #confirm-dialog[open] {
    animation: iosSheetSlideUp 0.30s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  }

  @keyframes iosSheetSlideUp {
    from {
      opacity: 0.5;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  dialog.glass-sheet-modal::backdrop {
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
  }

  dialog.glass-sheet-modal .modal-card,
  #account-modal .modal-card,
  #settings-modal .modal-card,
  #cross-modal .modal-card,
  #solve-modal .modal-card,
  #avg-modal .modal-card,
  #session-modal .modal-card,
  #confirm-dialog .modal-card {
    border-radius: 28px 28px 0 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 86dvh !important;
    padding: 8px 16px calc(max(env(safe-area-inset-bottom, 0px), 12px) + 12px) 16px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 12px !important;
  }

  /* Native Apple Pull Handle Indicator */
  .modal-card::before {
    content: '' !important;
    display: block !important;
    width: 36px !important;
    height: 4.5px !important;
    border-radius: 99px !important;
    background: rgba(255, 255, 255, 0.28) !important;
    margin: 0 auto 10px auto !important;
    flex-shrink: 0 !important;
  }

  .modal-scramble-box {
    padding: 10px 12px;
    gap: 6px;
  }

  .modal-scramble-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }

  .modal-scramble-box label {
    font-size: 0.63rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .modal-scramble-btns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }

  .modal-scramble-btns .text-pill-btn {
    height: 24px;
    padding: 0 9px;
    font-size: 0.67rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  #modal-solve-scramble {
    font-size: 0.82rem;
    line-height: 1.42;
    word-break: break-word;
  }

  .cross-solutions-grid {
    grid-template-columns: 1fr;
  }

  .setting-info {
    flex-direction: column;
    gap: 2px;
  }

  .alg-player-controls {
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
  }

  .alg-player-controls #alg-player-drill {
    width: 100%;
    margin-top: 4px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Tablets in portrait: bigger timer, content kept to a comfortable column */
@media (min-width: 600px) and (max-width: 920px) and (min-height: 700px) {
  #timer-display {
    font-size: clamp(5.5rem, 15vw, 8rem);
  }
  .event-segmented-control {
    max-width: 520px;
    justify-self: center;
  }
  #scramble-capsule,
  .arena-bottom-stack {
    max-width: 640px;
    justify-self: center;
  }
  #bento-deck {
    height: clamp(150px, 17vh, 180px);
  }
  /* The tab bar and the install card keep the content column's width instead of
     stretching 800 px across an iPad */
  #mobile-tab-dock,
  .install-hint {
    left: max(12px, calc(50% - 320px)) !important;
    right: max(12px, calc(50% - 320px)) !important;
  }
}

/* Compact & Standard Mobile Widths (360px - 420px) */
@media (max-width: 420px) {
  #header {
    padding: calc(env(safe-area-inset-top, 0px) + 4px) 10px 4px 10px;
  }
  .account-name-mini {
    display: inline-block !important;
    max-width: 82px;
    font-size: 0.71rem;
  }
  .header-quick-left,
  .header-quick-right {
    gap: 5px;
  }
  .header-right .icon-btn {
    width: 36px;
    height: 34px;
  }
  .bento-deck-card {
    padding: 9px 10px;
  }
  .bento-card-title strong {
    max-width: 56px;
  }
}

/* Compact Mobile Screens (e.g. iPhone SE 375×667, 360×667) */
/* Only genuinely short screens shrink the timer and scramble (iPhone SE,
   small Androids). iPhone Safari with its toolbars (~690px) keeps full sizes. */
@media (max-width: 920px) and (max-height: 620px), (max-width: 1100px) and (max-height: 520px) {
  #scramble-capsule {
    min-height: 60px;
    max-height: none;
    padding: 6px 10px 7px 11px;
  }
  #scramble-display {
    font-size: 0.84rem;
    line-height: 1.30;
  }
  #timer-display {
    font-size: clamp(3.1rem, 14.8vw, 4.0rem);
  }
  #timer-display.timer-text-long {
    font-size: clamp(2.8rem, 13.5vw, 3.6rem);
  }
  #timer-display.timer-text-dnf {
    font-size: clamp(1.85rem, 7.5vw, 2.5rem);
  }
  .timer-status-slot {
    height: 26px;
  }
  .status-pill {
    height: 24px;
    padding: 0 10px;
    font-size: 0.59rem;
    letter-spacing: 0.05em;
  }
  .timer-action-slot {
    height: 34px;
  }
  #bento-deck {
    height: 94px;
  }
  .cube-3d-svg {
    width: 70px;
    height: 54px;
  }
  .cube-net-svg {
    width: 80px;
    height: 58px;
  }
}

/* Ultra-Short / Landscape Mobile Screens (e.g. 852×393, 667×375) */
@media (max-width: 1100px) and (max-height: 520px) {
  :root {
    --header-h: 44px;
    --dock-content-h: 48px;
    --dock-safe-b: max(env(safe-area-inset-bottom, 0px), 6px);
  }
  #header {
    flex-wrap: nowrap;
    padding: 4px 10px;
  }
  .header-left {
    order: 1;
    width: auto;
    flex: 1 1 auto;
  }
  .header-right {
    order: 2;
    width: auto;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    gap: 5px;
  }
  .header-quick-left,
  .header-quick-right {
    display: inline-flex !important;
    gap: 5px;
  }
  #timer-section {
    padding: 2px 12px calc(var(--dock-total-h) + 6px) 12px;
    row-gap: 3px;
  }
  #scramble-capsule {
    min-height: 44px;
    padding: 4px 10px 5px 12px;
    gap: 3px;
    border-radius: 14px;
  }
  .scramble-top-bar {
    padding-bottom: 3px;
    flex-wrap: nowrap;
  }
  #scramble-display {
    font-size: 0.78rem;
    line-height: 1.22;
    padding: 1px 0;
  }
  .timer-status-slot {
    height: 22px;
    margin-bottom: 1px;
  }
  .status-pill {
    height: 20px;
    font-size: 0.56rem;
  }
  #timer-display {
    font-size: clamp(2.4rem, 10vh, 3.2rem);
  }
  #timer-display.timer-text-long,
  #timer-display.timer-text-dnf {
    font-size: clamp(1.75rem, 7.5vh, 2.3rem);
  }
  .timer-action-slot {
    height: 28px;
    margin-top: 2px;
  }
  .quick-pill-btn {
    height: 24px;
    font-size: 0.68rem;
    padding: 0 10px;
  }
  #quick-solve-bar,
  #typing-action-bar {
    height: 28px;
  }
  #bento-deck {
    height: 68px;
    gap: 8px;
  }
  .bento-deck-card {
    padding: 4px 10px;
    border-radius: 12px;
  }
  .bento-cube-gear-row {
    display: none;
  }
  .bento-stats-grid-4 {
    grid-template-columns: repeat(4, 1fr);
    gap: 2px 6px;
  }
  .telemetry-cell {
    flex-direction: column;
    align-items: center;
    padding: 1px 2px;
  }
  .telemetry-cell .telemetry-label {
    font-size: 0.50rem;
  }
  .telemetry-cell .telemetry-val {
    font-size: 0.68rem;
  }
  .cube-3d-svg {
    width: 52px;
    height: 40px;
  }
  .cube-net-svg {
    width: 60px;
    height: 42px;
  }
  #mobile-tab-dock {
    padding: 3px !important;
  }
  .dock-tab-btn {
    height: 36px;
    font-size: 0.58rem;
    gap: 1px;
  }
  .dock-tab-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* Panel sheets (Settings & Profile): one fixed large-detent height on phones,
   so tabs and sections never resize the sheet. Smaller sheets stay auto. */
@media (max-width: 920px), (max-width: 1100px) and (max-height: 520px) {
  #settings-modal,
  #account-modal.acct-station-modal {
    max-height: none !important;
  }

  #settings-modal .modal-card,
  #account-modal .modal-card.acct-modal-card {
    height: min(92dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 16px)) !important;
    max-height: none !important;
  }

  #settings-modal .modal-card {
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  .settings-rows {
    margin: 0 -16px;
    padding: 0 16px calc(max(env(safe-area-inset-bottom, 0px), 12px) + 16px);
  }
}

/* Short phones (SE, small Androids): keep the two averages that matter most;
   the full set lives one tap away in the Analytics tab. */
@media (max-width: 920px) and (max-height: 700px), (max-width: 1100px) and (max-height: 520px) {
  #bento-deck {
    height: 114px !important;
  }
  #live-telemetry-strip [data-bento-inspect="50"],
  #live-telemetry-strip [data-bento-inspect="100"] {
    display: none;
  }
  .bento-stats-grid-4 {
    margin-top: 6px;
  }
}

@media (max-width: 920px) and (max-height: 620px), (max-width: 1100px) and (max-height: 520px) {
  #bento-deck {
    height: 100px !important;
  }
}

/* Narrow phones: card captions give way to the PB pill and the 2D/3D switch */
@media (max-width: 370px) {
  #live-telemetry-strip .bento-card-title,
  #bento-cube-card .bento-card-title {
    display: none;
  }
  #live-telemetry-strip .bento-card-head {
    justify-content: flex-start;
  }
  #bento-cube-card .bento-card-head {
    justify-content: flex-end;
  }
  .event-pill {
    font-size: 0.7rem;
  }
}

/* Landscape phones: no room for the bottom cards; give it to the timer and
   keep the tab bar a compact centered capsule. */
@media (max-width: 1100px) and (max-height: 520px) {
  .arena-bottom-stack {
    display: none !important;
  }
  #timer-display {
    font-size: clamp(3rem, 19vh, 4.6rem) !important;
  }
  .event-segmented-control {
    max-width: 520px;
    justify-self: center;
  }
  #scramble-capsule {
    max-width: 760px;
    justify-self: center;
  }
  #mobile-tab-dock {
    left: max(12px, calc(50% - 250px), env(safe-area-inset-left, 0px)) !important;
    right: max(12px, calc(50% - 250px), env(safe-area-inset-right, 0px)) !important;
  }
  .dock-tab-btn {
    flex-direction: row;
    gap: 6px;
    font-size: 0.7rem;
  }

  /* One header row: [session] [3×3 2×2 4×4 OH Pyra] [15s 🔊 ⚙]. Two rows took a quarter of a
     320 px tall screen and pushed the post-solve buttons under the tab bar; the Analytics and
     Academy panels also start at --header-h, which only matches a one-row header. */
  #header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    column-gap: 10px;
  }
  .event-segmented-control {
    grid-row: 1;
    grid-column: 2;
    width: 100%;
    max-width: 460px;
  }

  /* The stat cards are hidden here: show ao5 · ao12 under the timer instead (as on desktop) */
  #app:not(.zen-mode) #under-timer-averages {
    opacity: 0.88;
    height: 20px;
    margin-top: 2px;
  }
  #app:not(.zen-mode) #under-timer-averages > :nth-child(-n+2),
  #app:not(.zen-mode) #under-timer-averages > :nth-child(n+6) {
    display: none;
  }

  /* Notched iPhones in landscape: Safari lets the page run under the notch and the rounded
     corners, so keep controls inside the safe area on both sides */
  #header {
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }
  #timer-section {
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
  }
  #stats-panel,
  .learn-panel-container {
    left: env(safe-area-inset-left, 0px);
    right: env(safe-area-inset-right, 0px);
  }
  /* The phone rules give the panel width: 100%, which with the insets would push it off the right edge */
  #stats-panel {
    width: auto;
  }
  /* Sheets: the glass still runs edge to edge, the content stays clear of the notch.
     Same selector list as the sheet rules above, so this wins over their padding: 0 */
  dialog.glass-sheet-modal,
  #account-modal,
  #settings-modal,
  #cross-modal,
  #solve-modal,
  #avg-modal,
  #session-modal,
  #confirm-dialog {
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }
  #account-modal .modal-card.acct-modal-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 920px), (max-width: 1100px) and (max-height: 520px) {
  /* On-screen keyboard open (app.js sets .kb-open): the tab bar and the cards would sit under
     the keyboard, and the space kept free for them is better used by the field being typed in */
  .kb-open #mobile-tab-dock,
  .kb-open .arena-bottom-stack {
    display: none !important;
  }
  .kb-open #timer-section {
    padding-bottom: 8px;
  }

  /* The sheet's own buttons stay on screen (OK / +2 / DNF / Delete, cross step controls):
     on a short phone, or with a long 4×4 scramble, the content above scrolls under them */
  #solve-modal .modal-actions-bar,
  #cross-modal .alg-player-controls {
    position: sticky;
    bottom: 0;
    z-index: 2;
    padding-top: 10px;
    background: linear-gradient(180deg, rgba(14, 16, 22, 0) 0, rgba(14, 16, 22, 0.97) 10px);
  }
}

/* Landscape phones, mid-solve: the timer has the whole screen, so let the digits use it */
@media (max-width: 1100px) and (max-height: 520px) {
  .timer-running #timer-display {
    font-size: clamp(4rem, 34vh, 8rem) !important;
  }
}

/* Very short landscape (small phones with the browser bars, about 280–340 px tall):
   no room for the averages line above the tab bar */
@media (max-width: 1100px) and (max-height: 340px) {
  #app:not(.zen-mode) #under-timer-averages {
    display: none;
  }
}

@media (max-width: 1100px) and (max-height: 300px) {
  #timer-display {
    font-size: clamp(2.4rem, 16vh, 3.2rem) !important;
  }
  .timer-status-slot {
    height: 18px;
    margin-bottom: 0;
  }
  .status-pill {
    height: 17px;
  }
  /* A slimmer tab bar: on the smallest landscape screens it otherwise covers +2 / DNF */
  :root {
    --dock-content-h: 40px;
    --dock-safe-b: max(env(safe-area-inset-bottom, 0px), 4px);
  }
  .dock-tab-btn {
    height: 32px;
  }
}

/* Touch tablets get the wide layout, but there is no keyboard to press: no shortcut footer */
@media (min-width: 921px) and (min-height: 521px) and (hover: none) and (pointer: coarse), (min-width: 1101px) and (hover: none) and (pointer: coarse) {
  #keyboard-hints-bar {
    display: none !important;
  }
}

/* ==========================================================================
   Portrait phones: one header row and a quiet scramble
   Most visitors arrive in a browser tab (Safari, Telegram), where the toolbars
   take ~95 pt. Every fixed row up here would come out of the timer's air, so:
   the session pill also names the puzzle and scramble type (picked in its
   sheet), 15s and sound live in Settings, and the scramble sits on the page
   with its two actions underneath instead of in a card with a pill row.
   ========================================================================== */
@media (max-width: 920px) and (min-height: 521px) {
  :root {
    --header-h: 48px;
  }

  #header {
    grid-template-rows: auto;
    row-gap: 0;
  }

  .event-segmented-control,
  .header-quick-left,
  #btn-toggle-sound {
    display: none !important;
  }

  #btn-session-switcher {
    height: 36px;
    gap: 7px;
    padding: 0 13px 0 12px;
  }

  #btn-session-switcher svg {
    flex-shrink: 0;
    opacity: 0.7;
  }

  .session-context {
    display: inline;
    flex-shrink: 1;
    min-width: 0;
    max-width: 62%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
    font-weight: 600;
  }

  .session-context:empty {
    display: none;
  }

  .session-context::before {
    content: '·';
    margin-right: 7px;
    color: var(--text-tertiary);
  }

  /* The session name gives way first; the puzzle label stays readable */
  #session-name-display {
    flex-shrink: 2;
  }

  #scramble-capsule {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    border-radius: 0;
    justify-content: flex-start;
    /* Always room for three lines of moves plus the action row: a 1-line Pyraminx or a 3-line
       3×3 scramble then never nudges the timer (top padding + 3 × 1.5 lines and the text's own
       1 px padding + gap + actions). The font size here must match #scramble-display below. */
    min-height: calc(6px + 4.5 * clamp(1.05rem, 4.9vw, 1.25rem) + 2px + 8px + 26px);
    padding: 6px 2px 0;
    gap: 8px;
  }

  #scramble-capsule::before {
    display: none;
  }

  /* Read from a phone lying on the table: ~19 px on a 393 pt iPhone, 3 lines at most */
  #scramble-display {
    font-size: clamp(1.05rem, 4.9vw, 1.25rem);
    line-height: 1.5;
    letter-spacing: 0.02em;
    word-spacing: 0.18em;
  }

  /* 40 moves: sized by width so even a 320 px screen keeps it within the three reserved lines */
  #app[data-event="444"] #scramble-display {
    font-size: clamp(0.72rem, 3.3vw, 0.86rem);
    line-height: 1.4;
  }

  /* Cross badge and "new scramble": a quiet caption row under the moves */
  .scramble-top-bar {
    order: 2;
    justify-content: center;
    padding-bottom: 0;
    border-bottom: none;
  }

  .subset-pills-scroll,
  #scramble-event-badge {
    display: none !important;
  }

  .scramble-top-actions {
    margin-left: 0;
    gap: 8px;
  }

  /* "Крест · 6" in the interface font; the plus-shaped cross icon read as "+6" next to a number */
  .cross-solver-pill {
    height: 26px;
    padding: 0 11px;
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-light-rgb), 0.22);
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 600;
  }

  .cross-solver-pill .cross-icon {
    display: none;
  }

  /* The settings button matches the session pill beside it: a 36 pt circle, not a 34 pt square */
  .header-right #btn-open-settings {
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }

  .scramble-action-pill {
    width: 34px;
    height: 26px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
  }

  /* Session sheet: puzzle, scramble type, then the sessions */
  .ctx-title-phone {
    display: inline;
  }

  .ctx-title-desktop {
    display: none;
  }

  .session-context-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    order: 1;
  }

  /* One scroll for the whole sheet instead of a list scrolling inside it */
  #session-modal .sessions-list-container {
    order: 2;
    margin-top: 4px;
    max-height: none;
    overflow: visible;
  }

  #session-modal .new-session-row {
    order: 3;
  }
}

/* Compact deck (html.vp-compact: visible height under ~800 px, i.e. a phone inside browser toolbars
   or a small phone): the two bento cards become one slim row, ao5 · ao12 · PB beside a small
   scramble preview. The home-screen app (852 pt and up) keeps the full cards. */
@media (max-width: 920px) and (min-height: 521px) {
  .vp-compact #bento-deck {
    height: 62px !important;
    grid-template-columns: minmax(0, 1fr) 116px;
    gap: 8px;
  }

  .vp-compact .bento-deck-card {
    border-radius: 18px;
  }

  .vp-compact #live-telemetry-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    padding: 0 4px;
  }

  .vp-compact #live-telemetry-strip .bento-card-head,
  .vp-compact #live-telemetry-strip .bento-stats-grid-4 {
    display: contents;
  }

  .vp-compact #live-telemetry-strip .bento-card-title,
  .vp-compact #live-telemetry-strip [data-bento-inspect="50"],
  .vp-compact #live-telemetry-strip [data-bento-inspect="100"] {
    display: none;
  }

  .vp-compact #live-telemetry-strip .telemetry-cell {
    align-items: center;
    padding: 4px 2px;
    gap: 2px;
  }

  /* Fixed line boxes: a time, a dash and "ещё 5" differ in size, the labels must still line up */
  .vp-compact #live-telemetry-strip .telemetry-label,
  .vp-compact #live-telemetry-strip .bento-best-short {
    line-height: 16px;
  }

  .vp-compact #live-telemetry-strip .telemetry-val,
  .vp-compact #live-telemetry-strip .bento-best-pill b {
    line-height: 22px;
  }

  /* PB reads as the third cell, not as a badge */
  .vp-compact #live-telemetry-strip .bento-best-pill {
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 2px;
    background: none;
    border: none;
    border-radius: var(--r-xs);
  }

  .vp-compact #live-telemetry-strip .bento-best-pill:hover {
    transform: none;
  }

  .vp-compact #live-telemetry-strip .bento-best-short {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
    color: rgba(245, 245, 247, 0.64);
  }

  .vp-compact #live-telemetry-strip .bento-best-pill b {
    margin-left: 0;
    font-size: 0.98rem;
    letter-spacing: -0.03em;
  }

  .vp-compact #live-telemetry-strip .bento-best-pill.is-empty b {
    font-weight: 500;
  }

  /* Scramble preview: a thumbnail of the whole card, opened large in a sheet on tap
     (modals-controller), where the 2D / 3D switch and drag-to-turn live */
  .vp-compact #bento-deck {
    grid-template-columns: minmax(0, 1fr) 92px;
  }

  .vp-compact #bento-cube-card {
    padding: 4px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.16s var(--ease-apple);
  }

  .vp-compact #bento-cube-card:active {
    transform: scale(0.96);
  }

  .vp-compact #bento-cube-card .bento-card-head {
    display: none;
  }

  .vp-compact #bento-cube-card .cube-preview-wrapper {
    pointer-events: none;
  }

  /* "Opens larger" mark in the corner the drawing leaves empty */
  .vp-compact #bento-cube-card::after {
    content: '';
    position: absolute;
    top: 7px;
    right: 7px;
    width: 10px;
    height: 10px;
    opacity: 0.5;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E");
    pointer-events: none;
  }
}

/* Portrait phones: small controls keep their quiet look but get a ~44 pt touch area
   (Apple's minimum), so a thumb on a table-top phone doesn't miss them */
@media (max-width: 920px) and (min-height: 521px) {
  #btn-open-settings,
  #btn-session-switcher,
  .scramble-action-pill,
  .cross-solver-pill,
  .cube-view-seg-btn {
    position: relative;
  }

  #btn-open-settings::after,
  #btn-session-switcher::after,
  .scramble-action-pill::after,
  .cross-solver-pill::after,
  .cube-view-seg-btn::after {
    content: '';
    position: absolute;
    inset: -5px;
  }

  .scramble-action-pill::after,
  .cross-solver-pill::after {
    inset: -9px -5px;
  }

  /* 2D / 3D sit side by side: they grow up and down only, so the two never overlap */
  .cube-view-seg-btn::after {
    inset: -6px 0;
  }

  /* Average labels: ~11.5 px at 64 % white (about 7:1 on the cards), readable from the table */
  .telemetry-cell .telemetry-label {
    font-size: 0.72rem;
    color: rgba(245, 245, 247, 0.64);
  }
}

/* All phone layouts (landscape too): the cross badge reads "Крест · 6" in the interface font,
   without the plus-shaped icon that turned it into "+ 6" */
@media (max-width: 920px), (max-width: 1100px) and (max-height: 520px) {
  .cross-solver-pill {
    font-family: var(--font-sans);
    font-weight: 600;
  }

  .cross-solver-pill .cross-icon {
    display: none;
  }
}