/*
  Pokédex Case Edition v0.3
  ------------------------
  Tuned for the 3D-printed Moto G Play 2024 Pokédex shell.

  v0.3 changes:
  - Lowers the top-right Compare / Theme controls by ~100px.
  - Lowers Search + generation controls by the same amount.
  - Adds a yellow hardware-style rule that follows the printed case edge,
    including the diagonal notch.
  - Keeps desktop/tablet behavior unchanged.
*/

@media (max-width: 619px) {
  :root {
    --case-side-inset: 18px;
    --case-control-drop: 100px;
    --case-control-deck: 158px;
    --case-dock-gap: 7px;
    --case-rule: #f6cf2d;
  }

  html {
    scroll-padding-top: 260px;
  }

  body.case-edition {
    background: #070b10;
  }

  .case-edition .app-shell {
    background: var(--bg);
    overflow-x: clip;
  }

  .case-edition .topbar {
    position: relative;
    padding:
      calc(8px + var(--safe-top))
      var(--case-side-inset)
      8px;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--bg) 98%, #000) 0%,
        color-mix(in srgb, var(--bg) 96%, transparent) 84%,
        color-mix(in srgb, var(--bg) 88%, transparent) 100%);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
    backdrop-filter: blur(18px);
  }

  /*
    Yellow hardware seam: mirrors the lower edge of the 3D-printed case.
    Left side runs lower, rises through the diagonal notch, then continues
    horizontally beneath the upper-right opening.
  */
  .case-edition .topbar::after {
    content: "";
    position: absolute;
    z-index: 4;
    pointer-events: none;
    left: 0;
    right: 0;
    top: calc(55px + var(--safe-top));
    height: 72px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 120' preserveAspectRatio='none'%3E%3Cpath d='M0 100 H485 L585 24 H1000' fill='none' stroke='%23f6cf2d' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.55));
    opacity: .96;
  }

  .case-edition .brand-row {
    min-height: var(--case-control-deck);
    height: var(--case-control-deck);
    position: relative;
    justify-content: flex-end;
    align-items: flex-start;
  }

  .case-edition .brand {
    display: none;
  }

  /* Move these down to clear the printed top-right overhang. */
  .case-edition .top-actions {
    position: absolute;
    right: 0;
    top: var(--case-control-drop);
    gap: 6px;
    z-index: 5;
  }

  .case-edition .icon-btn,
  .case-edition .filter-btn {
    min-width: 40px;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    border-color: color-mix(in srgb, var(--case-rule) 24%, var(--line));
  }

  .case-edition .search-row {
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 8px;
    margin-top: 1px;
  }

  .case-edition .search-box {
    height: 44px;
    border-radius: 15px;
    padding-inline: 9px;
  }

  .case-edition .jump-strip {
    padding-top: 8px;
    padding-bottom: 3px;
    gap: 6px;
  }

  .case-edition .jump-chip {
    padding: 7px 10px;
  }

  .case-edition .view {
    padding-left: var(--case-side-inset);
    padding-right: var(--case-side-inset);
    padding-bottom: calc(90px + var(--safe-bottom));
  }

  .case-edition .detail {
    margin-left: calc(-1 * var(--case-side-inset));
    margin-right: calc(-1 * var(--case-side-inset));
  }

  .case-edition .detail-hero {
    padding-left: calc(var(--case-side-inset) + 2px);
    padding-right: calc(var(--case-side-inset) + 2px);
  }

  /* Match sticky tabs to the taller case-aware header. */
  .case-edition .detail-tabs {
    top: 257px;
    padding-left: var(--case-side-inset);
    padding-right: var(--case-side-inset);
  }

  .case-edition .detail-body {
    padding-left: var(--case-side-inset);
    padding-right: var(--case-side-inset);
  }

  .case-edition .bottom-nav {
    width: calc(100% - 20px);
    height: calc(66px + var(--safe-bottom));
    bottom: var(--case-dock-gap);
    padding: 5px 5px var(--safe-bottom);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
    border-radius: 19px;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    box-shadow: 0 10px 30px rgba(0,0,0,.32);
  }

  .case-edition .bottom-nav button {
    border-radius: 13px;
  }

  .case-edition .bottom-nav button.active {
    background: color-mix(in srgb, var(--panel) 90%, var(--accent) 10%);
  }

  .case-edition .toast-root {
    bottom: calc(88px + var(--safe-bottom));
  }

  .case-edition .section-head {
    margin-top: 12px;
  }
}

@media (min-width: 620px) {
  body.case-edition .topbar,
  body.case-edition .view,
  body.case-edition .bottom-nav {
    /* Standard responsive app styles intentionally apply here. */
  }
}