/*
 * Community responsive presentation layer.
 * Shared content and behavior stay in index.html; tablet and phone layout
 * changes belong here so they can evolve independently from desktop styles.
 */

@media (max-width: 1000px) {
  .shell {
    grid-template-columns: 88px minmax(0, 620px) 280px;
  }

  .brand span,
  .nav-button span,
  .session-card .button {
    display: none;
  }

  .brand {
    margin-inline: auto;
  }

  .nav-button {
    justify-content: center;
  }

  .session-card {
    padding: 9px;
    border: 0;
    background: transparent;
  }
}

@media (max-width: 820px) {
  .shell {
    grid-template-columns: minmax(0, 620px) 280px;
    justify-content: center;
  }

  .sidebar {
    display: none;
  }
}

@media (max-width: 680px) {
  body {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .shell {
    display: block;
    padding: 0;
  }

  .main {
    border: 0;
  }

  .rightbar {
    display: none;
  }

  .feed-header {
    min-height: 58px;
    padding: 8px 14px;
  }

  .mobile-logo {
    display: block;
  }

  .compose,
  .post,
  .timeline-module,
  .archive-section,
  .games-section {
    padding-inline: 14px;
  }

  .tabs {
    overflow-x: auto;
  }

  /* WebKit can blank a transformed dialog face when it is also scrollable. */
  :is(#player-card-dialog, #mobile-player-view) .player-flip-shell {
    perspective: none;
  }

  :is(#player-card-dialog, #mobile-player-view) .player-collectible-stage {
    margin: 0;
    padding: 6px 0 14px;
  }

  :is(#player-card-dialog, #mobile-player-view) .player-flip-inner,
  :is(#player-card-dialog, #mobile-player-view) .player-flip-shell.show-back .player-flip-inner {
    transform: none;
  }

  :is(#player-card-dialog, #mobile-player-view) .player-flip-back {
    position: relative;
    inset: auto;
    transform: none;
  }

  :is(#player-card-dialog, #mobile-player-view) .player-flip-face[aria-hidden="true"] {
    display: none;
  }

  .moderation-player-submission {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .moderation-player-image {
    width: 60px;
    height: 60px;
  }

  .moderation-player-submission .moderation-actions {
    grid-column: 1 / -1;
  }

  .tab {
    flex: 0 0 auto;
    min-width: 96px;
  }

  .football-game-section {
    min-height: calc(100vh - 210px);
    padding: 16px 10px 28px;
  }

  .game-console {
    padding: 13px;
    border-radius: 19px 19px 38px 19px;
  }

  .game-screen-frame {
    padding: 11px;
    border-radius: 12px 12px 23px;
  }

  .game-boot {
    inset: 11px;
  }

  .game-controls {
    grid-template-columns: 138px minmax(0, 1fr);
    gap: 8px;
    padding: 18px 0 3px;
  }

  .game-dpad {
    width: 132px;
    grid-template-columns: repeat(3, 44px);
    grid-template-rows: repeat(3, 44px);
  }

  .game-action-buttons {
    gap: 8px;
  }

  .game-action {
    width: 62px;
    height: 62px;
    font-size: 1.08rem;
  }

  .game-action-wrap {
    gap: 7px;
    font-size: .48rem;
  }

  .game-hud {
    padding-inline: 2px;
  }

  .game-hud span {
    font-size: .34rem;
    letter-spacing: 0;
  }

  .game-hud strong {
    font-size: .58rem;
  }

  .game-leaderboard-head {
    align-items: flex-start;
    padding: 14px;
  }

  .game-leaderboard-row {
    padding-inline: 13px;
  }

  .games-controls,
  .timeline-matches {
    grid-template-columns: 1fr;
  }

  .games-controls {
    gap: 6px;
  }

  .timeline-matches .sidebar-match {
    padding: 16px;
  }

  .timeline-matches .sidebar-match-teams {
    font-size: .9rem;
  }

  .timeline-matches .sidebar-match-label,
  .timeline-matches .sidebar-match-competition {
    font-size: .68rem;
  }

  .timeline-matches .sidebar-match-score {
    font-size: .96rem;
  }

  .timeline-matches .sidebar-match-fh-logo {
    width: 28px;
    height: 28px;
  }

  .forum-topic {
    grid-template-columns: auto minmax(0, 1fr);
    padding-inline: 14px;
  }

  .forum-topic-count {
    display: none;
  }

  .forums-header {
    padding-inline: 14px;
  }

  .section-header-actions {
    gap: 5px;
  }

  .section-share {
    width: 40px;
    height: 40px;
    justify-content: center;
    padding: 0;
  }

  .section-share span {
    display: none;
  }

  .archive-filters {
    grid-template-columns: 1fr 1fr;
  }

  .archive-filters input {
    grid-column: 1 / -1;
  }

  .archive-card {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .timeline-news-item {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .link-preview {
    grid-template-columns: minmax(0, 1fr) 108px;
  }

  .link-preview img {
    width: 108px;
  }

  .article-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .article-row-open {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 4px 12px 12px;
  }

  .article-row-open img,
  .article-row-open .article-cover-placeholder {
    grid-row: 1 / span 2;
    width: 74px;
    height: 58px;
  }

  .article-row-open .article-row-copy {
    grid-column: 2;
    grid-row: 1;
  }

  .article-row-open .article-row-copy h3 {
    display: -webkit-box;
    line-height: 1.25;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .article-row-open .article-row-copy p {
    display: -webkit-box;
    line-height: 1.35;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .article-row-open > .forum-state {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-top: 7px;
  }

  .article-editor {
    padding: 16px 14px;
  }

  .article-editor-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .mobile-nav {
    position: fixed;
    z-index: 10;
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(76px + env(safe-area-inset-bottom));
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    padding: 8px 6px env(safe-area-inset-bottom);
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 -8px 28px rgba(17, 17, 17, .05);
    backdrop-filter: blur(18px);
  }

  .mobile-nav button {
    width: 54px;
    min-height: 57px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: none;
    color: var(--muted);
    text-decoration: none;
    cursor: pointer;
  }

  .mobile-nav button.active {
    color: var(--ink);
    background: transparent;
  }

  .mobile-nav svg {
    width: 36px;
    height: 36px;
    padding: 6px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
  }

  .mobile-nav button:active svg {
    opacity: .72;
  }

  .mobile-nav button.active svg {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
    box-shadow: none;
  }

  .mobile-nav span {
    font-size: .53rem;
    font-weight: 800;
    line-height: 1;
  }

  .mobile-post-opener {
    cursor: pointer;
  }

  .post-head {
    display: grid;
    gap: 3px;
  }

  .post-author-line {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .post-author-line .author-link {
    max-width: 100%;
  }

  .post-author-line .author-link strong {
    display: block;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .post-meta-line {
    flex-wrap: wrap;
    gap: 2px 6px;
    font-size: .72rem;
    line-height: 1.25;
  }
}

@media (max-width: 680px), (hover: none) and (pointer: coarse) and (max-width: 1000px) {
  body.mobile-detail-open {
    overflow: hidden;
  }

  .mobile-detail-view {
    position: fixed;
    z-index: 40;
    inset: 0;
    width: 100%;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--card);
    color: var(--ink);
    overscroll-behavior: contain;
    transform: translate3d(100%, 0, 0);
    transition: transform 220ms cubic-bezier(.22, .8, .25, 1);
  }

  .mobile-detail-view.open {
    transform: translate3d(0, 0, 0);
  }

  #mobile-player-view {
    background: #111;
    color: #fff;
  }

  #mobile-player-view .mobile-detail-head {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    border-bottom-color: rgba(255, 255, 255, .12);
    background: rgba(17, 17, 17, .94);
    color: #fff;
  }

  #mobile-player-view .mobile-detail-back:active {
    background: rgba(255, 255, 255, .12);
  }

  #mobile-player-view > .dialog-body {
    padding: 12px;
    background: #111;
  }

  .mobile-player-head-actions {
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .mobile-player-head-actions .player-flip-toggle {
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: #242424;
    color: #fff;
    white-space: nowrap;
  }

  .mobile-detail-head {
    position: relative;
    z-index: 2;
    min-height: calc(58px + env(safe-area-inset-top));
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: end;
    gap: 8px;
    padding: env(safe-area-inset-top) 10px 7px;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(18px);
  }

  .mobile-detail-back {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
  }

  .mobile-detail-back:active {
    background: var(--soft);
  }

  .mobile-detail-back svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .mobile-detail-title {
    min-width: 0;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .mobile-detail-title img {
    width: 26px;
    height: 26px;
    object-fit: contain;
  }

  .mobile-detail-title h2 {
    overflow: hidden;
    margin: 0;
    font-size: 1rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-detail-head-spacer {
    width: 44px;
    height: 44px;
  }

  .mobile-detail-view > .dialog-body {
    width: 100%;
    min-height: 0;
    max-height: none;
    flex: 1;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-detail-view .thread-list {
    display: grid;
    gap: 12px;
  }

  .mobile-detail-view .thread-list .post {
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--card);
    box-shadow: 0 2px 10px rgba(17, 17, 17, .025);
  }

  .mobile-detail-view .thread-list .post.thread-reply {
    width: auto;
    max-width: none;
    margin-right: 0;
    margin-left: min(calc((var(--reply-depth, 0) + 1) * 12px), 48px);
    border-left-width: 2px;
    border-radius: 16px;
  }

  .mobile-detail-view .reply-target-reset {
    max-width: 116px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-detail-view .reply-tools {
    min-width: 0;
    gap: 10px;
  }

  .mobile-detail-view .reply-tools .photo-button {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .gallery-header,
  .gallery-album-detail-head { padding: 18px 16px; }
  .gallery-header { flex-direction: column; }
  .gallery-header-actions { width: 100%; justify-content: space-between; }
  .gallery-story { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; padding: 18px 14px; }
  .gallery-story-head { gap: 8px; }
  .gallery-story-date strong { font-size: 1.05rem; }
  .gallery-mosaic { grid-auto-rows: 92px; border-radius: 14px; }
  .gallery-album-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; }
  .gallery-album-cover { height: 130px; }
  .gallery-upload-panel { margin: 14px; }
  .gallery-upload-actions { align-items: stretch; flex-direction: column; }
  .gallery-upload-actions .photo-button,
  .gallery-upload-actions .button { width: 100%; justify-content: center; text-align: center; }
  .gallery-manage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 14px 16px; }
  .gallery-album-detail-head .moderation-actions { flex-direction: column; }
  #gallery-item-dialog .dialog-body,
  #gallery-album-dialog .dialog-body,
  #gallery-lightbox-dialog .dialog-body { padding: 16px; }
}