html {
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
}
body { max-width: 100%; overflow-x: hidden; }

/* ── Hidden unless a phone breakpoint says otherwise ─────────────────── */
.m-drawer,
.m-drawer-scrim,
.m-fab-draw,
.m-topbtn { display: none !important; }

@media (max-width: 640px),
       (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {

    body > nav,
  .page > nav {
    position: sticky; top: 0; z-index: 90;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 2px;
    height: calc(52px + env(safe-area-inset-top));
    min-height: 0 !important;
    padding: 0 10px !important;
    padding-top: env(safe-area-inset-top) !important;
  }

  .nav-logo      { order: 0; flex-shrink: 0; position: static; transform: none; }
  .nav-logo-text { font-size: 17px; }
  .nav-spacer    { order: 1; flex: 1; }
  .nav-right     { order: 2; display: flex; align-items: center; gap: 2px; flex-shrink: 0; }

    .m-navactions {
    display: flex !important;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex-shrink: 0;
    order: 99;
  }
  .m-navactions > * { flex-shrink: 0; }
  .m-navactions .nav-avatar,
  .m-navactions #navAvatarWrap,
  .m-navactions #navAvatarBtn {
    margin: 0 !important; position: relative;   /* dropdown anchors here */
  }
  .m-navactions #notifWrap { margin: 0 !important; }

    /* Back and Draw are redundant on a phone — the wordmark goes home and
     the floating button draws. Create Challenge is NOT redundant: it's the
     only route to making one, so it stays and fills the space those two
     leave behind. */
  nav .back-btn,
  nav .draw-btn { display: none !important; }
  nav .create-btn {
    display: flex !important;
    /* Without an order it defaults to 0 and lands beside the logo — the
       nav sorts by flex order, and .m-navactions sits at 99. */
    order: 98;
    margin-left: auto;
    padding: 4px 12px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }

  #searchWrap  { display: none !important; }
  #navDropdown { display: none !important; }   /* the drawer replaces it */

    #notifWrap { position: static; display: inline-flex; align-items: center; }
    #notifBtn  { width: 46px !important; height: 46px !important; }
  #notifBtn img { width: 100% !important; height: 100% !important; }
  #notifPanel {
    position: fixed !important;
    top: calc(56px + env(safe-area-inset-top)) !important;
    left: 8px !important; right: 8px !important; bottom: auto !important;
    width: auto !important; max-height: 70vh; overflow-y: auto;
  }

  .nav-avatar, #navAvatarWrap {
    width: 34px !important; height: 34px !important; flex-shrink: 0;
  }

  /* ── Home / notification buttons ─────────────────────────────────── */
  .m-topbtn {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border: none; background: none; padding: 0;
    color: var(--c-black); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .m-topbtn svg { width: 24px; height: 24px; }
  .m-topbtn:active { opacity: .55; }
  html.dark-mode .m-topbtn { color: #e8e8f0; }

  /* ── Compose ───────────────────────────────────────────────────────── */
    .m-fab-draw {
    display: block !important;
    position: fixed;
    right: 12px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 96;
    width: auto; height: auto;
    border: none; background: none; border-radius: 0; box-shadow: none;
    cursor: pointer; padding: 0; line-height: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .m-fab-draw img { height: 78px; width: auto; display: block; }
  .m-fab-draw:active { transform: translateY(2px); }

  /* ── Drawer ────────────────────────────────────────────────────────── */
  .m-drawer-scrim {
    display: block !important;
    position: fixed; inset: 0; z-index: 120;
    background: rgba(1,1,2,.5);
    opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  html.m-drawer-open .m-drawer-scrim { opacity: 1; pointer-events: auto; }

  .m-drawer {
    display: flex !important;
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 121;
    width: min(78vw, 300px);
    background: var(--c-white);
    border-right: 2px solid var(--c-black);
    transform: translateX(-102%);
    transition: transform .22s cubic-bezier(.22,1,.36,1);
    flex-direction: column;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  html.m-drawer-open .m-drawer { transform: translateX(0); }

  .m-drawer-head {
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--color-line);
  }
  .m-drawer-av {
    width: 52px; height: 52px; border-radius: 50%; line-height: 1;
    background: var(--color-line); background-size: cover; background-position: center;
    border: 2px solid var(--c-black);
    display: flex; align-items: center; justify-content: center;
    font: 800 17px/1 var(--font-body); color: var(--c-black);
    margin-bottom: 10px; overflow: hidden;
  }
    .m-drawer-name  { font: 400 22px/1 var(--font-display); letter-spacing: .5px; color: var(--c-black); }
  .m-drawer-user  { font: 600 13px/1.3 var(--font-body); color: var(--color-text-soft); margin-top: 3px; }
  .m-drawer-stats[hidden] { display: none !important; }
  .m-drawer-stats {
    display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px;
    font: 600 13px/1.3 var(--font-body); color: var(--color-text-soft);
  }
  .m-drawer-stats b { color: var(--c-black); font-weight: 800; }

    .m-drawer-nav {
    position: static !important;
    top: auto !important; left: auto !important; right: auto !important;
    height: auto !important; width: auto !important;
    background: none !important; border: none !important;
    box-shadow: none !important;
    padding: 8px 0 20px; display: flex; flex-direction: column;
  }
  .m-drawer-item {
    display: flex; align-items: center; gap: 14px;
    width: 100%; min-height: 48px; padding: 0 18px;
    border: none; background: none; cursor: pointer; text-align: left;
    font: 400 21px/1 var(--font-display); letter-spacing: .4px;
    color: var(--c-black);
    -webkit-tap-highlight-color: transparent;
  }
  .m-drawer-item svg { width: 22px; height: 22px; flex-shrink: 0; }
  .m-drawer-item.small {
    font: 700 14px/1.2 var(--font-body); min-height: 44px;
    color: var(--color-text-soft);
  }
  .m-drawer-item.small svg { width: 19px; height: 19px; }
  .m-drawer-item.danger { color: var(--color-danger); }
  .m-drawer-item:active { background: rgba(1,1,2,.06); }
  .m-drawer-sep { height: 1px; background: var(--color-line); margin: 10px 18px; }

    html.dark-mode .m-drawer {
    background: #1c1e26 !important;
    border-right-color: #343846 !important;
  }
  html.dark-mode .m-drawer-scrim { background: rgba(0,0,0,.62); }
    html.dark-mode .m-drawer-nav,
  html.dark-mode .m-drawer-head,
  html.dark-mode .m-drawer-nav * { background-color: transparent !important; }
  html.dark-mode .m-drawer-item:active { background-color: rgba(255,255,255,.08) !important; }

  html.dark-mode .m-drawer-name,
  html.dark-mode .m-drawer-item { color: #eceef4 !important; }
  html.dark-mode .m-drawer-stats b { color: #eceef4 !important; }

  /* Room for the floating compose button at the end of a page. */
  body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ── Landscape phones: shorter chrome, vertical space is scarce ──────── */
@media (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  body > nav,
  .page > nav   { height: calc(44px + env(safe-area-inset-top)); }
  .m-fab-draw     { right: 10px; bottom: calc(8px + env(safe-area-inset-bottom)); }
  .m-fab-draw img { height: 58px; }
  .m-drawer-head  { padding: 12px 18px 10px; }
  .m-drawer-av    { width: 40px; height: 40px; margin-bottom: 6px; }
  .m-drawer-item  { min-height: 42px; font-size: 19px; }
}

@media (max-width: 640px) {

    .thread-wrap, .content-wrap, .page-wrap, .page-body,
  .challenges-wrap, .tag-grid-wrap, .posts-wrap, .profile-feed {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ── Grids: one or two columns, never slivers ───────────────────────*/
  .profile-grid   { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .tag-grid       { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .challenges-grid{ grid-template-columns: 1fr !important; gap: 12px !important; }
  .award-grid     { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .share-grid     { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .do-grid        { grid-template-columns: 1fr !important; }

  /* ── Heroes: trimmed so content is visible without scrolling ────────*/
  .hero, .tag-hero, .challenges-hero, .challenge-hero, .legal-hero {
    padding: 20px 14px !important;
    min-height: 0 !important;
  }
  .hero h1, .tag-hero h1, .legal-hero h1 { font-size: clamp(26px, 8vw, 34px) !important; }
  .hero-inner, .tag-hero-inner { padding: 0 !important; }
  .hero-title { font-size: clamp(24px, 7vw, 32px) !important; }
  .hero-medal { width: 84px !important; height: 84px !important; }

  /* ── Cards ──────────────────────────────────────────────────────────*/
  .about-card, .guideline-card, .intro-card, .sidebar-card, .legal-section {
    padding: 16px 14px !important;
    margin-bottom: 12px !important;
    border-radius: var(--radius-lg) !important;
  }
  .about-card h2, .guideline-card h2 { font-size: 24px !important; }

  /* ── Thread posts: edge-to-edge imagery, the way feeds do it ────────*/
  .post-image-wrap, .sub-image-wrap {
    border-radius: var(--radius-md) !important;
    overflow: hidden;
  }
  .post-body     { padding: 12px !important; }
  .post-caption  { font-size: 14px !important; }
  .post-avatar   { width: 34px !important; height: 34px !important; }
  .post-actions  { gap: 6px !important; flex-wrap: wrap; }
  .post-actions button { min-height: 40px; }

  /* ── Settings rows stack instead of squeezing label beside control ──*/
  .card-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 14px !important;
  }
  .card-row-label   { width: auto !important; }
  .card-row-content { width: 100% !important; }

  /* ── Profile ───────────────────────────────────────────────────────*/
  .profile-hero   { padding: 16px 12px !important; }
  .user-list-item { padding: 10px 12px !important; }
  .user-list-bio  { display: none; }        /* too cramped to read here */

  /* ── Tables and wide blocks scroll rather than overflow the page ────*/
  table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Never let a stray fixed-width child force a horizontal scrollbar. */
  img, video, canvas, iframe { max-width: 100%; height: auto; }
}

html.dark-mode {
  --pg-bg:     #14151a;
  --pg-card:   #1c1e26;
  --pg-ink:    #e8e8f0;
  --pg-soft:   #9aa2b4;
  --pg-line:   #2a2d38;
}

html.dark-mode body:has(.page-body),
html.dark-mode body:has(.page-wrap),
html.dark-mode body:has(.legal-section) {
  background: var(--pg-bg) !important;
  color: var(--pg-ink) !important;
}

html.dark-mode .about-card,
html.dark-mode .guideline-card,
html.dark-mode .intro-card,
html.dark-mode .counter-card,
html.dark-mode .do-card,
html.dark-mode .legal-toc,
html.dark-mode .cta-card {
  background: var(--pg-card) !important;
  border-color: var(--pg-line) !important;
  box-shadow: none !important;
}

html.dark-mode .about-card h2,
html.dark-mode .guideline-card h2,
html.dark-mode .legal-section h2,
html.dark-mode .legal-section h3,
html.dark-mode .do-card h3,
html.dark-mode .faq-header,
html.dark-mode .counter-lead,
html.dark-mode .legal-toc-title { color: var(--pg-ink) !important; }

html.dark-mode .about-card p,
html.dark-mode .guideline-card p,
html.dark-mode .legal-section p,
html.dark-mode .legal-section li,
html.dark-mode .do-card p,
html.dark-mode .hero-tagline,
html.dark-mode .help-intro,
html.dark-mode .about-sub,
html.dark-mode .counter-sub { color: var(--pg-soft) !important; }

html.dark-mode .about-footer,
html.dark-mode .legal-footer { border-top-color: var(--pg-line) !important; color: var(--pg-soft) !important; }

html.dark-mode .legal-toc a,
html.dark-mode .about-card a,
html.dark-mode .legal-section a { color: var(--c-pink) !important; }

/* Hairlines and separators that were drawn with the light-mode line token */
html.dark-mode .guideline-card,
html.dark-mode .legal-section,
html.dark-mode .evolution-list li { border-color: var(--pg-line) !important; }

@media (max-width: 640px) {
  .page-body, .page-wrap {
    padding: 18px 12px 48px !important;
    max-width: 100% !important;
  }
  .about-card, .guideline-card, .intro-card, .cta-card, .counter-card, .do-card {
    padding: 18px 15px !important;
    margin-bottom: 12px !important;
  }
  .about-card h2, .guideline-card h2, .faq-header { font-size: 23px !important; }
  .do-card h3        { font-size: 19px !important; }
  .about-card p,
  .guideline-card p,
  .legal-section p,
  .legal-section li  { font-size: 14.5px !important; line-height: 1.62 !important; }

  .legal-section     { margin-bottom: 24px !important; }
  .legal-section h2  { font-size: 22px !important; }
  .legal-toc         { padding: 14px !important; }
  .legal-toc a       { font-size: 13.5px !important; }

  .hero, .legal-hero { padding: 22px 14px !important; }
  .hero-tagline      { font-size: 15px !important; }
  .section-eyebrow   { font-size: 11px !important; }
  .evolution-list li { padding: 10px 0 !important; font-size: 14px !important; }

  /* The counter block is decorative — shrink rather than let it dominate */
  .counter-lead  { font-size: 24px !important; }
  .counter-label { font-size: 15px !important; }
}

@media (max-width: 640px),
       (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {

  /* Top bar on the document pages, which set it from the fixed palette */
  html.dark-mode body:has(.page-body) > nav,
  html.dark-mode body:has(.page-wrap) > nav,
  html.dark-mode body:has(.legal-section) > nav {
    background: #1c1e26 !important;
    border-bottom-color: #2a2d38 !important;
  }
  html.dark-mode body:has(.page-body) .nav-logo-text,
  html.dark-mode body:has(.page-wrap) .nav-logo-text { color: #e8e8f0 !important; }

  /* Drawer internals */
  html.dark-mode .m-drawer-head { border-bottom-color: #2a2d38 !important; }
  html.dark-mode .m-drawer-sep  { background: #2a2d38 !important; }
  html.dark-mode .m-drawer-user,
  html.dark-mode .m-drawer-stats,
  html.dark-mode .m-drawer-item.small { color: #9aa2b4 !important; }

  /* A black ring on a near-black panel reads as no ring at all. */
    html.dark-mode .m-drawer-av {
    background-color: #2a2d38 !important;
    border-color: #4a4f60 !important;
    color: #eceef4 !important;
  }

  /* The press state was 6% black — invisible against a dark drawer. */
  html.dark-mode .m-drawer-item:active { background: rgba(255,255,255,.07) !important; }

  /* Notification panel, when a page's own theming doesn't reach it */
  html.dark-mode #notifPanel {
    background: #1c1e26 !important;
    border-color: #2a2d38 !important;
  }
}

/* Brand artwork is not a target: pointer-events:none means a right-click
   passes straight through to the element beneath, so the browser never
   offers "Open image in new tab" or "Save image". Cleaner than layering an
   invisible element on top, and it can't be defeated by clicking a corner
   the overlay missed.

   On buttons this is a bonus — the click lands on the <button> rather than
   the <img> inside it, so the artwork can't be grabbed while the button
   keeps working exactly as before. */
.sidebar-title-img,
#postSketchBtn img,
#saveCanvasBtn img,
#animToggleBtn img,
.draw-btn img,
.m-fab-draw img,
.m-drawer-draw img,
#midicons img,
.nav-logo img {
  pointer-events: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ── Guest login button ───────────────────────────────────────────────
   Styled to match the "Back to Feed" pill used on threads, and grouped
   with the other nav controls by mobile-shell.js. */
@media (max-width: 640px),
       (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  #ssLoginBtn {
    display: flex !important;
    align-items: center; gap: 6px;
    margin: 0 !important;
    padding: 4px 14px !important;
    background: var(--c-white) !important;
    border: 2px solid var(--text, var(--c-black)) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 3px 3px 0 var(--text, var(--c-black)) !important;
    font: 700 12px var(--font-body) !important;
    color: var(--text, var(--c-black)) !important;
    text-transform: uppercase; letter-spacing: .05em;
    white-space: nowrap; cursor: pointer;
  }
  #ssLoginBtn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--text, var(--c-black)) !important; }
  html.dark-mode #ssLoginBtn {
    background: #23262f !important; color: #eceef4 !important;
    border-color: #4a4f60 !important; box-shadow: 3px 3px 0 #4a4f60 !important;
  }
}

/* ── Notification & report panels on phones ───────────────────────────
   Both are absolutely positioned 310px panels anchored to their button
   with `right:-4px`. On a narrow screen that runs past the viewport edge
   and gets clipped, which is what made them look misshapen and cut the
   text off.

   On a phone they become a fixed sheet spanning the screen instead: no
   anchoring, no overflow, and enough width for a notification to read as
   a sentence rather than two words per line.
   ──────────────────────────────────────────────────────────────────── */
@media (max-width: 640px),
       (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {

  #notifPanel,
  #modPanel {
    position: fixed !important;
    /* Measured from the nav rather than a token — --l-nav isn't defined
       anywhere, so it was silently falling back every time. */
    top: 62px !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(70vh, 520px) !important;
    border-radius: var(--radius-lg, 14px) !important;
    box-shadow: 0 10px 34px rgba(1,1,2,.28) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Roomier rows — 11px padding with a 10px gap left very little for the
     text itself once the avatar was in place. */
  .notif-item,
  .mod-item {
    padding: 13px 14px !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
  .notif-item .notif-text,
  .notif-item .notif-body,
  .mod-item .mod-item-body,
  .mod-item .mod-detail {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    word-break: break-word;
    min-width: 0;                 /* lets long usernames wrap, not overflow */
  }
  .notif-item img,
  .notif-item .notif-ava,
  .mod-item img {
    flex: 0 0 auto;
    width: 34px !important;
    height: 34px !important;
  }
  .notif-item .notif-time,
  .mod-item .mod-meta { font-size: 11px !important; opacity: .7; }

  /* A header that stays put while the list scrolls under it. */
  /* The real class names are .notif-panel-head / .mod-panel-head —
     .notif-head and .mod-head don't exist. */
  #notifPanel .notif-panel-head,
  #modPanel .mod-panel-head {
    position: sticky; top: 0; z-index: 2;
    padding: 12px 14px !important;
  }

  #notifPanel .notif-empty,
  #modPanel .mod-empty { padding: 40px 20px !important; }

  /* Thumbnails were sized for a 310px panel; give them a fixed slot so a
     long message can't squeeze them into a sliver. */
  .notif-thumb,
  .mod-thumb,
  .mod-thumb-placeholder {
    flex: 0 0 auto;
    width: 42px !important;
    height: 42px !important;
  }
}

/* Same pairing for the pages that use the shared shell. */
@media (max-width: 640px),
       (max-width: 950px) and (max-height: 500px) and (orientation: landscape) {
  #modWrap { display: inline-flex !important; align-items: center; margin: 0 !important; }
  #modBtn, #notifBtn { width: 40px !important; height: 40px !important; }
}