/* Cassell College mobile adaptation v13
 * Shared phone rules for the forum, account, administration and service pages.
 * Page-specific desktop art stays intact; portrait screens use a controlled
 * cinematic crop with readable, thumb-reachable content surfaces.
 */

@media (max-width: 760px) {
  :root {
    --mobile-gutter: 14px;
    --mobile-touch: 46px;
    --mobile-radius: 14px;
    --mobile-safe-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  html {
    min-width: 320px;
    min-height: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(74px + env(safe-area-inset-top));
  }

  body {
    width: 100%;
    min-width: 320px;
    min-height: 100dvh;
    overflow-x: hidden;
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
  }

  img,
  picture,
  video,
  canvas,
  svg { max-width: 100%; }

  button,
  [role="button"],
  input,
  select,
  textarea,
  a.nav-btn,
  a.button,
  .btn {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  button,
  input,
  select,
  textarea { font-size: 16px; }

  :where(button, a, input, select, textarea):focus-visible {
    outline: 2px solid rgba(199, 224, 255, .9);
    outline-offset: 2px;
  }

  /* Wide desktop paintings become a top scene window instead of a stretched
     page-long wallpaper. The dark page color continues beneath the scene. */
  #bg-layer {
    top: 0;
    bottom: auto;
    height: min(64dvh, 620px);
    background-position: 58% top;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-color: #060b15;
    transform: none;
    filter: saturate(.94) contrast(1.04);
    -webkit-mask-image: linear-gradient(#000 0 70%, transparent 100%);
    mask-image: linear-gradient(#000 0 70%, transparent 100%);
  }

  #bg-overlay {
    background:
      linear-gradient(180deg, rgba(3, 8, 18, .34) 0, rgba(3, 8, 18, .12) 26dvh, rgba(3, 8, 18, .82) 60dvh, #050914 100%),
      radial-gradient(circle at 52% 18dvh, rgba(64, 105, 157, .13), transparent 42dvh);
  }

  body[data-board] #bg-layer { background-position: 64% top; }
  body[data-board="cafeteria"] #bg-layer {
    height: min(58dvh, 540px);
    background-position: 53% top;
    background-size: auto 100%;
    -webkit-mask-image: linear-gradient(#000 0 72%, transparent 100%);
    mask-image: linear-gradient(#000 0 72%, transparent 100%);
  }

  /* Shared forum navigation: keep every feature reachable on phones. */
  header.nav {
    position: sticky;
    top: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-height: 0;
    padding: calc(9px + env(safe-area-inset-top)) var(--mobile-gutter) 9px;
    border-bottom: 1px solid rgba(157, 188, 226, .18);
    background: rgba(4, 10, 21, .94);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  header.nav .brand,
  header.nav > .brand {
    min-width: 0;
    min-height: 38px;
  }

  header.nav .brand img { width: 36px; height: 36px; }
  header.nav .brand .en { font-size: 12px; letter-spacing: .11em; }
  header.nav .brand .cn { display: none; }

  header.nav :is(.actions, .links, .nav-actions) {
    display: flex;
    width: calc(100vw - (var(--mobile-gutter) * 2) - env(safe-area-inset-left) - env(safe-area-inset-right));
    max-width: 100%;
    gap: 7px;
    overflow-x: auto;
    padding: 1px 1px 4px;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  header.nav :is(.actions, .links, .nav-actions)::-webkit-scrollbar { display: none; }
  header.nav .actions .nav-btn,
  header.nav .actions .nav-btn.ghost,
  header.nav .links a,
  header.nav .nav-actions .nav-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    min-height: 42px;
    padding: 8px 12px;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    font-size: 11px;
    scroll-snap-align: start;
  }

  .realm-v3-cassell-launch {
    position: relative;
    z-index: 3;
    width: calc(100% - (var(--mobile-gutter) * 2));
    margin: 11px auto 0;
  }

  .realm-v3-switch {
    width: 100%;
    min-width: 0;
    height: 42px;
  }

  .realm-v3-switch a { min-height: 42px; }

  /* Forum board and thread flow. */
  .layout {
    width: 100%;
    padding: 12px var(--mobile-gutter) calc(66px + env(safe-area-inset-bottom));
    gap: 13px;
  }

  .crumb {
    margin: 2px 1px 12px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .board-head {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    min-height: 118px;
    margin-bottom: 14px;
    padding: 16px;
    overflow: hidden;
    border-radius: var(--mobile-radius);
    background: linear-gradient(120deg, rgba(13, 25, 44, .9), rgba(8, 16, 30, .72));
  }

  .board-head .board-hero-icon { width: 68px; height: 68px; border-radius: 15px; }
  .board-head .em { width: 64px; font-size: 32px; }
  .board-head .h .name { font-size: 20px; line-height: 1.35; }
  .board-head .h .desc { font-size: 12px; line-height: 1.6; }
  .board-head .stats { display: none; }
  .board-head :is(.membership-action, .member-list-trigger) { grid-column: 1 / -1; width: 100%; }

  .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 9px;
  }

  .tabs {
    display: flex;
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(147, 180, 220, .18);
    border-radius: 11px;
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 1 0 82px; min-height: 43px; text-align: center; }
  .new-post { width: 100%; min-height: var(--mobile-touch); margin: 0; }

  .thread-search,
  .service-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
    min-width: 0;
  }

  .thread-search input { grid-column: 1 / -1; }
  .thread-search :is(input, select, button),
  .service-search :is(input, select, button) { min-height: var(--mobile-touch); }

  .thread {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
    min-height: 0;
    margin-bottom: 10px;
    padding: 16px 14px;
    border-radius: var(--mobile-radius);
    background: rgba(10, 20, 37, .9);
    transform: none !important;
  }

  .thread .title { font-size: 15px; line-height: 1.55; }
  .thread .meta { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 6px 12px; font-size: 11px; }
  .thread .nums { display: none; }
  .tagx { min-height: 24px; display: inline-flex; align-items: center; }

  .side-card,
  .directory-board,
  .department-service-card,
  .forum-activity { border-radius: var(--mobile-radius); }
  .board-nav { grid-template-columns: 1fr; }
  .board-nav a { min-height: 118px; }
  .board-nav .board-tile-image { object-position: 62% center; }

  #forumModal {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  #forumModal > .card {
    width: 100% !important;
    max-height: 92dvh !important;
    overflow-y: auto !important;
    padding: 20px var(--mobile-gutter) calc(18px + env(safe-area-inset-bottom)) !important;
    border-radius: 20px 20px 0 0 !important;
  }

  #forumModal :is(input, select, textarea, button) { min-height: var(--mobile-touch); }
  #forumModal textarea { min-height: 132px !important; }
  .reply-target { grid-template-columns: 1fr; }

  /* Service pages, products and inventory. */
  .cafeteria-catalog,
  #cafeteriaMenuList,
  .item-grid,
  .spirit-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .cafeteria-product-image,
  .item-art { aspect-ratio: 1; object-fit: contain; }
  .v3-catalog-card,
  .department-product,
  .item-card { min-width: 0; border-radius: 13px; }
  .v3-catalog-card button,
  .department-product button,
  .item-card button { min-height: 38px; }

  .pack-nav,
  .credit-nav,
  .daily-credit-nav,
  .snake-topbar {
    padding-top: calc(10px + env(safe-area-inset-top));
  }

  .pack-nav nav,
  .credit-nav nav,
  .daily-credit-nav nav {
    display: flex;
    width: 100%;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .pack-nav nav::-webkit-scrollbar,
  .credit-nav nav::-webkit-scrollbar,
  .daily-credit-nav nav::-webkit-scrollbar { display: none; }
  .pack-nav nav a,
  .credit-nav nav a,
  .daily-credit-nav nav a { flex: 0 0 auto; min-width: 92px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; }

  .pack-shell,
  .credit-shell,
  .daily-credit-shell,
  .profile-wrap,
  .activity-wrap,
  .mail-wrap,
  .reset-wrap,
  .container {
    width: min(100% - (var(--mobile-gutter) * 2), 100%);
    max-width: none;
    padding-right: 0;
    padding-left: 0;
  }

  .credit-summary,
  .daily-credit-main,
  .daily-credit-heading,
  .profile-grid,
  .mail-grid { border-radius: var(--mobile-radius); }

  .credit-actions,
  .daily-credit-actions,
  .profile-actions { grid-template-columns: 1fr; }

  /* Directory, messaging, forms, account and authentication. */
  .shell { max-width: 100%; }
  .composer { position: sticky; bottom: 0; background: rgba(5, 12, 23, .98); }
  .composer textarea,
  .composer input { min-height: var(--mobile-touch); }
  .bubble { max-width: 86%; overflow-wrap: anywhere; }
  .chat-head { min-height: 62px; }

  .card,
  .panel,
  .profile-card,
  .mail-card { backdrop-filter: none; -webkit-backdrop-filter: none; }

  form :is(input, select, textarea, button, .button, .btn) { min-height: var(--mobile-touch); }
  .form-row,
  .form-grid,
  .profile-grid,
  .mail-grid,
  .service-form-grid { grid-template-columns: 1fr; }

  /* Departments and Snake realm art keep a landscape crop per card. */
  .departments-page .shell {
    padding-top: calc(68px + env(safe-area-inset-top));
  }
  .departments-page .shell { width: calc(100% - (var(--mobile-gutter) * 2)); }
  .top { display: block; }
  .top .intro { margin-top: 12px; text-align: left; }
  .departments-page .grid { grid-template-columns: 1fr; gap: 13px; }
  .dept { min-height: 280px; border-radius: var(--mobile-radius); }
  .dept-media { object-position: 64% center; }
  .dept .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dept .actions .btn { width: 100%; min-height: 44px; }

  .snake-main { padding-inline: var(--mobile-gutter); }
  .snake-board { min-height: 210px; }
  .snake-board-art { background-position: 66% center; }
  .snake-directory-panel { max-height: calc(100dvh - 20px); overflow: hidden; }

  /* Principal console: horizontal data remains deliberately scrollable, while
     common actions and dialogs become single-column and touch friendly. */
  .principal-topbar {
    min-height: calc(64px + env(safe-area-inset-top));
    padding-top: calc(9px + env(safe-area-inset-top));
  }

  .workspace { padding: 18px var(--mobile-gutter) calc(54px + env(safe-area-inset-bottom)); }
  .metric-rail { grid-template-columns: repeat(6, 142px); overflow-x: auto; }
  .data-shell { overflow: hidden; }
  .table-scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
  .data-table { min-width: 720px; }
  .principal-dialog { max-height: calc(100dvh - 24px); overflow-y: auto; }
  .dialog-actions { display: grid; grid-template-columns: 1fr; }
  .dialog-actions .button { width: 100%; min-height: var(--mobile-touch); }

  /* Fixed utilities respect the iPhone home indicator. */
  .cassell-back,
  .site-audio-toggle {
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .toast {
    right: var(--mobile-gutter);
    bottom: calc(18px + env(safe-area-inset-bottom));
    left: var(--mobile-gutter);
    width: auto;
    max-width: none;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 380px) {
  :root { --mobile-gutter: 11px; }
  .board-head { grid-template-columns: 58px minmax(0, 1fr); padding: 13px; }
  .board-head .board-hero-icon { width: 54px; height: 54px; }
  .cafeteria-catalog,
  #cafeteriaMenuList,
  .item-grid { gap: 7px; }
}

@media (max-width: 760px) and (orientation: landscape) and (max-height: 520px) {
  #bg-layer { height: 100dvh; }
  header.nav { position: relative; }
  .layout { padding-top: 9px; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}