/* ============================================================
 * EMOJI UNIVERSE - MOBILE POLISH (loaded last)
 * Safe-area, dvh units, bottom-sheet modals, tap targets,
 * compact header with visible tools, sticky toolbar.
 * ============================================================ */

/* -------------------- ROOT: dvh + safe areas -------------------- */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

body {
  /* Avoid the iOS Safari rubber-banding showing the wrong bg color */
  overscroll-behavior-y: contain;
}

/* Use dvh on mobile so the hero & loader handle the URL bar showing/hiding */
@supports (height: 100dvh) {
  .loader { min-height: 100dvh; }
  .hero   { min-height: calc(100dvh - var(--header-h)); }
}

/* -------------------- ALL VIEWPORTS: bigger tap targets -------------------- */

@media (hover: none) and (pointer: coarse) {
  .icon-btn,
  .app-nav__link,
  .seg__btn,
  .cat,
  .chip,
  .btn,
  .reaction-pack__item,
  .gif-card__action {
    min-height: 44px;
  }

  .icon-btn {
    min-width: 44px;
  }

  /* Prevent triple-tap zoom from grabbing the card grid */
  .cards-grid,
  .sticker-grid,
  .kaomoji-grid,
  .symbol-grid,
  .reaction-grid,
  .ascii-grid {
    touch-action: pan-y;
  }

  /* On touch we can't see hover labels - keep them visible */
  .card__label {
    opacity: 0.85 !important;
    transform: none !important;
    font-size: 11px;
  }

  .gif-card__overlay {
    opacity: 1;
  }

  /* Disable cursor trail (it's tied to mouse-move) */
  .cursor-dot, .cursor-trail { display: none !important; }
}

/* -------------------- HEADER: keep tools visible on mobile -------------------- */

@media (max-width: 1023px) {
  /* OVERRIDE the older responsive.css rule that hid all tools */
  .app-header__tools {
    display: flex !important;
    gap: 4px;
  }

  /* Keep only the most useful tools on tablets/phones */
  .app-header__tools .icon-btn {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}

@media (max-width: 899px) {
  .app-header__inner {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-2);
    padding-left: max(var(--space-3), var(--safe-left));
    padding-right: max(var(--space-3), var(--safe-right));
  }

  /* On tablets, only keep 4 most useful tools */
  .app-header__tools .icon-btn:nth-child(2),
  .app-header__tools .icon-btn:nth-child(3) {
    display: none;
  }

  .app-nav {
    max-width: none;
    margin: 0 var(--space-2);
  }

  .app-nav__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px;
  }

  .app-nav__list::-webkit-scrollbar { display: none; }
}

@media (max-width: 767px) {
  :root {
    --header-h: 56px;
  }

  .app-header__inner {
    padding-left: max(10px, var(--safe-left));
    padding-right: max(10px, var(--safe-right));
    gap: 6px;
  }

  /* Tighter brand on phones */
  .brand__icon {
    width: 36px;
    height: 36px;
  }
  .brand__icon-emoji { font-size: 20px; }
  .brand__text { display: none; }

  /* Show only theme + help button on phones (most useful) */
  .app-header__tools .icon-btn {
    width: 38px;
    height: 38px;
  }

  .app-header__tools .icon-btn:nth-child(1),
  .app-header__tools .icon-btn:nth-child(2),
  .app-header__tools .icon-btn:nth-child(3),
  .app-header__tools .icon-btn:nth-child(4) {
    display: none;
  }

  .app-header__tools .icon-btn:nth-child(5),
  .app-header__tools .icon-btn:nth-child(6) {
    display: grid;
  }

  /* Compact nav as icon-only pills */
  .app-nav__link {
    padding: 8px 10px;
    gap: 0;
    min-width: 44px;
    justify-content: center;
  }
  .app-nav__label {
    display: none;
  }
  .app-nav__icon {
    font-size: 18px;
    line-height: 1;
  }
  .app-nav__link.is-active .app-nav__icon {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  }
}

/* -------------------- HERO: tame size, breathe -------------------- */

@media (max-width: 767px) {
  .hero {
    padding: var(--space-7) var(--space-4) var(--space-8);
    min-height: auto;
  }

  .hero__inner {
    gap: var(--space-5);
  }

  .hero__title {
    font-size: clamp(34px, 11vw, 60px);
    line-height: 1.0;
  }

  .hero__title-line--1,
  .hero__title-line--3 {
    font-size: 0.55em;
  }

  .hero__copy {
    font-size: 15px;
    padding: 0 var(--space-2);
  }

  .hero__badge {
    font-size: 10.5px;
    padding: 6px 12px;
    text-align: center;
    line-height: 1.4;
  }

  .hero__stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: var(--space-5);
  }

  .stat {
    padding: 10px 6px;
  }

  .stat__num {
    font-size: 18px;
  }

  .stat__label {
    font-size: 9.5px;
    letter-spacing: 0.04em;
  }

  .hero__scroll {
    display: none;
  }
}

@media (max-width: 479px) {
  .hero__title {
    font-size: clamp(30px, 12vw, 48px);
  }

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

/* -------------------- SEARCH: mobile friendly -------------------- */

@media (max-width: 767px) {
  .search {
    max-width: 100%;
  }

  .search__field {
    padding: 4px;
    border-radius: 14px;
  }

  .search__icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
    border-radius: 10px;
  }

  .search__input {
    font-size: 16px; /* iOS won't zoom on focus when ≥16px */
    padding: 0 6px;
    min-width: 0;
  }

  .search__kbd { display: none; }

  .search__suggestions {
    max-height: 50vh;
  }

  .search__chips {
    margin-top: 10px;
    gap: 6px;
    justify-content: flex-start;
  }

  .chip {
    padding: 7px 12px;
    font-size: 12.5px;
  }
}

/* -------------------- TOOLBAR: mobile sticky stack -------------------- */

@media (max-width: 899px) {
  .toolbar__inner {
    padding: 8px var(--space-3);
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .toolbar__group--controls {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .toolbar__group--controls::-webkit-scrollbar { display: none; }

  .seg {
    flex-shrink: 0;
  }

  .seg__btn {
    padding: 8px 10px;
    font-size: 13px;
  }

  .cats {
    padding-bottom: 2px;
    gap: 5px;
  }

  .cat {
    padding: 5px 9px;
    font-size: 11.5px;
    gap: 4px;
  }

  .cat__count {
    font-size: 9.5px;
    padding: 1px 4px;
  }

  .result-count {
    padding: 0 var(--space-2);
    white-space: nowrap;
  }
}

/* -------------------- MAIN / SECTIONS -------------------- */

@media (max-width: 767px) {
  .app-main {
    padding: var(--space-5) max(var(--space-3), var(--safe-left)) calc(var(--space-9) + var(--safe-bottom));
  }

  .section__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
  }

  .section__title {
    font-size: 26px;
  }

  .section__sub {
    font-size: 13px;
  }

  .section__actions {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }

  .section__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  /* Card grids - denser but tap-target preserved */
  .cards-grid[data-size="m"] {
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
  }
  .cards-grid[data-size="l"] {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  .cards-grid[data-size="xl"] {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  .cards-grid[data-size="s"] {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  }
  .cards-grid[data-size="xs"] {
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  }

  .card {
    padding: 10px 6px;
  }

  .card__glyph {
    font-size: 30px !important;
  }
  .cards-grid[data-size="l"] .card__glyph  { font-size: 40px !important; }
  .cards-grid[data-size="xl"] .card__glyph { font-size: 56px !important; }
  .cards-grid[data-size="s"]  .card__glyph { font-size: 24px !important; }
  .cards-grid[data-size="xs"] .card__glyph { font-size: 20px !important; }

  /* Masonry */
  .masonry {
    columns: 2 140px;
    column-gap: 8px;
  }

  /* Stickers */
  .sticker-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
  }
  .sticker__glyph {
    font-size: 48px;
  }
  .sticker__title {
    font-size: 10px;
    padding: 3px 6px;
    bottom: 6px;
    left: 6px;
    right: 6px;
  }

  /* Kaomoji */
  .kaomoji-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
  }
  .kao {
    padding: 12px;
  }
  .kao__face {
    font-size: 18px;
  }

  /* ASCII */
  .ascii-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ascii__art {
    font-size: 10px;
    line-height: 1.1;
  }

  /* Symbols */
  .symbol-grid {
    grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
    gap: 6px;
  }
  .symbol {
    font-size: 22px;
  }

  /* Reactions */
  .reaction-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .reaction-pack {
    padding: var(--space-4);
  }
  .reaction-pack__items {
    gap: 6px;
  }
  .reaction-pack__item {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
}

/* -------------------- MODALS: bottom-sheet on mobile -------------------- */

@media (max-width: 767px) {
  .modal {
    padding: 0;
    align-items: flex-end;
  }

  .modal__panel {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 88dvh;
    border-radius: 20px 20px 0 0;
    padding: var(--space-5) max(var(--space-4), var(--safe-left)) calc(var(--space-5) + var(--safe-bottom));
    animation: sheetUp var(--t-slow) var(--ease-out-back);
  }

  .modal__panel::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: var(--color-border-strong);
    pointer-events: none;
  }

  .modal__panel--wide {
    max-width: 100%;
  }

  .modal__close {
    top: 14px;
    right: 14px;
  }

  .modal__hero {
    font-size: 64px;
    margin-top: var(--space-4);
  }

  .modal__title {
    font-size: 20px;
  }

  .modal__actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .modal__actions .btn {
    padding: 12px 10px;
    font-size: 13.5px;
  }

  .modal__similar {
    grid-template-columns: repeat(6, 1fr);
  }

  .kbd-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

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

/* -------------------- PLAYGROUND DOCK: mobile bottom sheet -------------------- */

@media (max-width: 767px) {
  .playground {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(8px + var(--safe-bottom)) !important;
    min-width: 0 !important;
    max-width: none !important;
    border-radius: 16px;
  }
}

/* -------------------- ONBOARDING: mobile-friendly -------------------- */

@media (max-width: 767px) {
  .onboarding-panel {
    border-radius: 18px !important;
    width: calc(100vw - 24px) !important;
    padding: 20px !important;
  }
}

/* -------------------- TRAY / TOAST: nudge above safe area -------------------- */

@media (max-width: 767px) {
  .tray {
    bottom: calc(20px + var(--safe-bottom));
  }

  .tray__pill {
    padding: 10px 16px;
    font-size: 13px;
    max-width: calc(100vw - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* -------------------- FOOTER -------------------- */

@media (max-width: 767px) {
  .app-footer {
    padding: var(--space-5) max(var(--space-4), var(--safe-left)) calc(var(--space-5) + var(--safe-bottom));
  }

  .app-footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-3);
  }

  .app-footer__brand {
    justify-content: center;
  }

  .app-footer__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
  }

  .app-footer__theme-quick {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/* -------------------- LOADER on mobile -------------------- */

@media (max-width: 767px) {
  .loader__orb {
    width: 140px;
    height: 140px;
  }

  .loader__core {
    font-size: 52px;
  }

  .loader__title {
    font-size: 26px;
    letter-spacing: 0.16em;
  }

  .loader__bar {
    width: 200px;
  }
}

/* -------------------- LANDSCAPE PHONES: collapse hero further -------------------- */

@media (orientation: landscape) and (max-height: 500px) {
  .hero {
    padding: var(--space-4) var(--space-4);
    min-height: auto;
  }

  .hero__title {
    font-size: clamp(22px, 5vw, 36px);
    line-height: 0.95;
  }

  .hero__copy { font-size: 13px; }
  .hero__badge { font-size: 10px; padding: 4px 10px; }

  .hero__stats {
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-top: var(--space-3);
  }

  .stat { padding: 6px; }
  .stat__num { font-size: 14px; }
  .stat__label { font-size: 8px; }
}

/* -------------------- DENSITY: density tweak for super-dense devices -------------------- */

@media (max-width: 360px) {
  .app-nav__link {
    padding: 6px 6px;
    min-width: 36px;
  }
  .app-nav__link > span:first-child {
    font-size: 16px;
  }

  .hero__title { font-size: 30px; }

  .cards-grid[data-size="m"] {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  }
}

/* -------------------- ACCESSIBILITY: focus ring stronger on touch -------------------- */

@media (hover: none) {
  *:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
  }
}

/* -------------------- HIDE pointer-only chrome on touch -------------------- */

@media (hover: none) and (pointer: coarse) {
  .search__kbd { display: none; }
}

/* -------------------- COSMIC BG: tame heavy filters on weak devices -------------------- */

@media (max-width: 767px) {
  .cosmic-bg__gradient { filter: blur(60px); opacity: 0.75; }
  .aurora { filter: none; opacity: 0.35; }
  .cosmic-bg__grain { display: none; }
}