/* Shell Repair 4 — authoritative responsive geometry for the shell.
   Module-specific responsive rules live with their modules. */

@media (max-width: 71.999rem) {
  html {
    scroll-padding-top: calc(var(--shell-header-offset) + var(--shell-mobile-toolbar-height));
  }

  body {
    --shell-main-min-height: calc(100dvh - var(--shell-header-offset) - var(--shell-mobile-toolbar-height) - 18px);
    overflow-x: clip;
  }

  .shell-mobile-toolbar {
    position: sticky;
    top: var(--shell-header-offset);
    z-index: 12500;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 8px;
    min-height: var(--shell-mobile-toolbar-height);
    margin: 0 -10px 10px;
    padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--shell-border);
    background: var(--shell-theme-toolbar-bg);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .34);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  #fanToolsToggle {
    visibility: hidden;
    pointer-events: none;
  }

  .shell-mobile-title {
    min-width: 0;
    overflow: hidden;
    color: var(--shell-accent-soft);
    font-size: 14px;
    font-weight: 900;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shell-mobile-button {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--shell-border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--shell-surface-strong) 86%, transparent);
    color: var(--shell-theme-text);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 7px 18px rgba(0, 0, 0, .22);
  }

  .shell-mobile-button:hover,
  .shell-mobile-button:focus-visible,
  .shell-mobile-button[aria-expanded="true"] {
    border-color: var(--shell-border-active);
    background: color-mix(in srgb, var(--shell-accent) 12%, var(--shell-surface-strong));
    color: var(--shell-accent-soft);
    outline: none;
  }

  .shell-mobile-button svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .shell-backdrop {
    position: fixed;
    inset: var(--shell-header-offset) 0 0;
    z-index: 12300;
    display: block;
    background: rgba(0, 0, 0, .56);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  body.shell-panel-open {
    overflow: hidden;
  }

  body.shell-panel-open .shell-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .shell-app.shell-is-fan {
    grid-template-columns: minmax(0, 1fr) var(--shell-right-track-width);
    gap: var(--shell-gap);
    min-height: var(--shell-main-min-height);
    align-items: start;
  }

  .shell-app.shell-is-fan > .shell-main {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .shell-app.shell-is-fan > .shell-main .shell-main-stage {
    min-height: var(--shell-main-min-height);
  }

  .shell-app.shell-is-fan > .shell-left {
    position: fixed;
    z-index: 12600;
    top: calc(var(--shell-header-offset) + var(--shell-mobile-toolbar-height) + 8px);
    left: calc(8px + env(safe-area-inset-left));
    right: auto;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: min(22rem, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    height: calc(100vh - var(--shell-header-offset) - var(--shell-mobile-toolbar-height) - env(safe-area-inset-bottom) - 16px);
    height: calc(100dvh - var(--shell-header-offset) - var(--shell-mobile-toolbar-height) - env(safe-area-inset-bottom) - 16px);
    min-height: 0;
    max-height: calc(100dvh - var(--shell-header-offset) - var(--shell-mobile-toolbar-height) - env(safe-area-inset-bottom) - 16px);
    overflow: hidden;
    overscroll-behavior: none;
    transform: translate3d(calc(-100% - 24px), 0, 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 180ms ease, opacity 150ms ease, visibility 0s linear 180ms;
  }

  .shell-app.shell-is-fan > .shell-left.shell-is-open {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .shell-app.shell-is-fan > .shell-right {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    z-index: auto;
    top: calc(var(--shell-header-offset) + var(--shell-mobile-toolbar-height) + 10px);
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    height: calc(100vh - var(--shell-header-offset) - var(--shell-mobile-toolbar-height) - 18px);
    height: calc(100dvh - var(--shell-header-offset) - var(--shell-mobile-toolbar-height) - 18px);
    min-height: 0;
    max-height: calc(100dvh - var(--shell-header-offset) - var(--shell-mobile-toolbar-height) - 18px);
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: hidden;
  }
}

@media (max-width: 1059.999px) {
  #fanToolsToggle {
    visibility: visible;
    pointer-events: auto;
  }

  .shell-app.shell-is-fan {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .shell-app.shell-is-fan > .shell-main {
    grid-column: 1;
  }

  .shell-app.shell-is-fan > .shell-right {
    position: fixed;
    z-index: 12600;
    top: calc(var(--shell-header-offset) + var(--shell-mobile-toolbar-height) + 8px);
    right: calc(8px + env(safe-area-inset-right));
    left: auto;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: min(var(--shell-right-track-width), calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    height: calc(100vh - var(--shell-header-offset) - var(--shell-mobile-toolbar-height) - env(safe-area-inset-bottom) - 16px);
    height: calc(100dvh - var(--shell-header-offset) - var(--shell-mobile-toolbar-height) - env(safe-area-inset-bottom) - 16px);
    min-height: 0;
    max-height: calc(100dvh - var(--shell-header-offset) - var(--shell-mobile-toolbar-height) - env(safe-area-inset-bottom) - 16px);
    overflow: hidden;
    transform: translate3d(calc(100% + 24px), 0, 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 180ms ease, opacity 150ms ease, visibility 0s linear 180ms;
  }

  .shell-app.shell-is-fan > .shell-right.shell-is-open {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
}

@media (max-width: 35.999rem) {
  .shell-mobile-toolbar {
    margin-left: -6px;
    margin-right: -6px;
    padding-left: calc(6px + env(safe-area-inset-left));
    padding-right: calc(6px + env(safe-area-inset-right));
  }

  .shell-app.shell-is-fan > .shell-left {
    left: calc(6px + env(safe-area-inset-left));
    right: calc(6px + env(safe-area-inset-right));
    width: auto;
    max-width: none;
  }

  .shell-app.shell-is-fan > .shell-right {
    left: auto;
    right: calc(6px + env(safe-area-inset-right));
    width: min(var(--shell-right-track-width), calc(100vw - 12px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    max-width: none;
  }
}

/* Short landscape phones use the same shell with less toolbar chrome. */
@media (max-height: 32rem) and (max-width: 71.999rem) {
  :root {
    --shell-mobile-toolbar-height: 48px;
  }

  .shell-mobile-toolbar {
    min-height: var(--shell-mobile-toolbar-height);
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .shell-mobile-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .shell-app.shell-is-fan > .shell-left,
  .shell-app.shell-is-fan > .shell-right {
    top: calc(var(--shell-header-offset) + var(--shell-mobile-toolbar-height) + 4px);
    bottom: calc(4px + env(safe-area-inset-bottom));
    height: calc(100dvh - var(--shell-header-offset) - var(--shell-mobile-toolbar-height) - env(safe-area-inset-bottom) - 8px);
    max-height: calc(100dvh - var(--shell-header-offset) - var(--shell-mobile-toolbar-height) - env(safe-area-inset-bottom) - 8px);
  }
}

@media (max-width: 35.999rem) {
  input,
  textarea,
  select,
  button.shell-select-field {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 71.999rem) {
  .shell-left,
  .shell-right,
  .shell-backdrop {
    transition: none;
  }
}

/* Game Mode is shell state only. Games own their internal layout. */
body.shell-game-mode {
  --shell-header-offset: 0px;
  --shell-mobile-toolbar-height: 0px;
  --shell-main-min-height: 100dvh;
  overflow-x: clip;
}
body.shell-game-mode .shell-header,
body.shell-game-mode .shell-language-switcher,
body.shell-game-mode .shell-mobile-toolbar,
body.shell-game-mode .shell-backdrop {
  display: none;
  visibility: hidden;
  pointer-events: none;
}
body.shell-game-mode .shell-content {
  padding-top: 0;
  transition: none;
}
body.shell-game-mode .shell-unified-view {
  width: 100%;
  min-height: var(--shell-main-min-height);
  padding: 0;
}
body.shell-game-mode .shell-app.shell-is-fan {
  width: 100%;
  max-width: none;
  min-height: var(--shell-main-min-height);
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
body.shell-game-mode .shell-app.shell-is-fan > .shell-left,
body.shell-game-mode .shell-app.shell-is-fan > .shell-right {
  display: none;
  visibility: hidden;
  pointer-events: none;
}
body.shell-game-mode .shell-app.shell-is-fan > .shell-main {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: none;
  min-width: 0;
}
body.shell-game-mode .shell-app.shell-is-fan > .shell-main .shell-main-stage,
body.shell-game-mode .shell-app.shell-is-fan > .shell-main .shell-main-content {
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
}
body.shell-game-mode .shell-app.shell-is-fan > .shell-main .shell-main-stage {
  min-height: var(--shell-main-min-height);
}