/* ============================================================
   mobile.css — the phone + small tablet layout (860px and narrower)
   the desktop "machine" is a fixed 641px frame with absolutely placed
   panels. here it unfolds into one scrolling column:
     · launchers (music, live, chat, bottle, pet) in a strip at the top
     · the top bar wraps instead of overlapping
     · every panel stacks full width, list above detail
     · the disc rail turns into a tab bar along the bottom
     · music / chat / face picker become phone-sized sheets
   loads last, so it only needs to win against styles.css.
   ============================================================ */

@media(max-width:860px){

  :root{
    --tabbar-h:62px;
    --safe-b:env(safe-area-inset-bottom, 0px);
  }

  html,body{
    height:auto;
    overflow-x:hidden;
    overflow-y:auto;
  }

  body{
    font-size:12px;
    padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 10px);
  }

  body.locked{ overflow:hidden; }

  body::after{
    width:100vw;
    opacity:.45;
  }

  #flareCanvas,
  #cursorTrail,
  #pixiLayer,
  .gallery-pullout{ display:none !important; }

  /* ---------- launcher strip ---------- */
  .bottom-controls,
  .bottom-controls[style]{
    position:relative;
    left:auto;
    bottom:auto;
    z-index:5;
    display:flex !important;
    flex-direction:row;
    align-items:center;
    gap:8px;
    padding:10px 12px 6px;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

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

  .bottom-pair{ display:contents; }

  .bottom-controls .music-toggle{
    flex:0 0 auto;
    padding:9px 13px;
    font-size:10px;
    animation:none;
  }

  .site-badge-wrap{ display:none; }

  /* ---------- the frame unfolds ---------- */
  .flash-wrap{
    display:block;
    width:auto;
    height:auto;
    min-height:0;
    margin:0;
    transform:none !important;
  }

  .app-frame{
    width:auto;
    height:auto;
    flex:none;
    margin:0 8px;
    border:1px solid #8798a0;
    border-radius:6px;
    overflow:visible;
  }

  .app-frame::before{ display:none; }

  /* top bar: logo, login, follow + theme, counter wrap onto lines */
  .top-cap{
    position:relative;
    left:auto;
    top:auto;
    width:auto;
    height:auto;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px 12px;
    padding:10px 12px;
    border:0;
    border-bottom:1px solid #7f9098;
    border-radius:6px 6px 0 0;
  }

  .logo-mark{
    position:relative;
    left:auto;
    top:auto;
    order:1;
    flex:0 0 auto;
    height:16px;
  }

  .site-login-status{
    position:static;
    order:3;
    flex:1 1 100%;
    font-size:10px;
  }

  .top-cap-actions{
    position:static;
    order:2;
    margin-left:auto;
    flex-wrap:wrap;
    justify-content:flex-end;
  }

  .theme-toggle,
  .neocities-follow-btn,
  .live-now-pill{
    font-size:9px;
    padding:6px 10px;
  }

  .visit-counter{
    position:static;
    order:4;
    font-size:9px;
  }

  .hud-node-tag{ display:none; }

  .machine{
    position:relative;
    left:auto;
    top:auto;
    width:auto;
    height:auto;
    border:0;
    padding:8px 0 10px;
  }

  .top-grid{
    grid-template-columns:1fr;
    gap:8px;
    margin:0 8px 8px;
  }

  .hero-screen{ height:170px; }
  .hero-title{ left:24px; top:62px; font-size:40px; }
  .hero-sub{ left:auto; right:18px; top:auto; bottom:22px; text-align:right; }

  .right-stack,
  .news-full{ height:auto; }

  .news-full .box-body{
    height:auto;
    max-height:230px;
  }

  .news-item{ font-size:12px; margin-bottom:10px; }
  .news-item .news-date{ font-size:10px; }

  /* every panel stacks; the absolute tops / heights (some inline) are dropped */
  .mid-zone{
    height:auto;
    margin:0 8px;
    overflow:visible;
  }

  .info-panel,
  .info-panel[style]{
    position:relative !important;
    top:auto !important;
    left:auto;
    height:auto !important;
    margin-bottom:10px;
  }

  .info-body,
  .p-desc .info-body,
  .p-mission .info-body{
    padding:14px 16px;
    font-size:12px;
    line-height:1.6;
    overflow:visible;
    max-height:none;
  }

  .info-head{ height:28px; font-size:10px; }

  /* list + detail files (about, gallery, blog, media) */
  .tabs-strip{ padding:10px 9px; }
  .tabs-label{ font-size:10px; }
  .tabs-strip-note{ font-size:10px; }

  .tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width:thin;
  }

  .tab{
    flex:0 0 auto;
    font-size:10px;
    padding:7px 12px;
  }

  .tab-pinned{ margin-left:0; }

  .portfolio-layout{
    grid-template-columns:1fr;
    gap:8px;
    padding:8px;
  }

  .list-panel{ max-height:210px; }

  .list-row{
    font-size:11px;
    padding:11px 12px 10px;
  }

  .list-row-category{ font-size:9px; }
  .list-row-meta{ font-size:9px; }

  .detail-panel{
    padding:18px 16px;
    min-height:260px;
  }

  .detail-title{ font-size:13px; }

  .detail-text,
  .detail-panel .detail-text[style]{
    font-size:12px;
    line-height:1.55;
    max-height:none !important;
  }

  .detail-photo{ max-width:100%; max-height:220px; }
  .detail-panel .gallery-thumb-btn img{ max-width:100% !important; max-height:280px !important; }

  .blog-link-card{ font-size:11px; padding:8px 11px; }
  .blog-tag-chip,
  .like-btn,
  .comment-btn{ font-size:10px; padding:6px 11px; }

  .games-folder{ padding:16px 10px; }
  .game-note{ font-size:11px; }

  /* home page tiles */
  .module-strip{
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding:10px 8px 8px;
  }

  .module-tile{ height:auto; min-height:150px; }
  .module-thumb{ height:80px; }
  .module-title{ font-size:11px; }
  .module-copy{ font-size:10.5px; line-height:1.35; }
  .module-label{ font-size:9px; }

  .feature-grid{ grid-template-columns:1fr; padding:10px 8px; }
  .feature-card{ height:auto; }

  /* contact links */
  .links-panel{ padding:14px 12px; }
  .links-block-title{ font-size:10px; }
  .webring-slot,
  .webring-nav-btn{ font-size:9px; }

  /* live disc page */
  .live-sec-status{ grid-template-columns:1fr; }
  .live-sec-thumb{ width:100%; }
  .live-sec-title{ font-size:13px; }
  .live-sec-sub{ font-size:11px; }
  .live-board{ height:auto; font-size:12px; }
  .live-board-row{ padding:6px; }

  /* the disc rail becomes a tab bar */
  .nav-tower{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    top:auto;
    z-index:900;
    width:100%;
    height:calc(var(--tabbar-h) + var(--safe-b));
    flex:none;
    display:flex;
    align-items:flex-start;
    justify-content:space-around;
    padding:7px 4px var(--safe-b);
    overflow-x:auto;
    background:linear-gradient(180deg,#f4f8f9 0%,#d5dfe3 100%);
    border:0;
    border-top:1px solid #8798a0;
    box-shadow:0 -4px 14px rgba(40,60,70,.16);
  }

  .nav-tower::before,
  .nav-tower::after,
  .nav-port,
  .tiny-side-bar,
  .tiny-side-label,
  .tiny-side-dot,
  .tiny-side-meter,
  .rail-leds,
  .rail-vu,
  .rail-ticker{ display:none; }

  .nav-btn{
    position:static;
    flex:1 1 0;
    width:auto;
    min-width:44px;
    padding:2px 0;
    -webkit-tap-highlight-color:transparent;
  }

  .nav-btn .disc{ margin-bottom:5px; }
  .nav-btn span{ font-size:13px; }

  /* the disc "leaves" its slot on desktop; on the tab bar it just lights up */
  .nav-btn.vacant .disc{ opacity:1; filter:none; }

  /* ---------- floating windows become phone sheets ---------- */
  .music-window{
    display:block !important;
    left:8px;
    right:8px;
    width:auto;
    bottom:calc(var(--tabbar-h) + var(--safe-b) + 8px);
    z-index:9998;
    transform-origin:bottom center;
  }

  .mw-body{ gap:8px; }
  .mw-cover{ flex-basis:88px; width:88px; height:88px; }

  .chat-window,
  .chat-window[style]{
    display:block !important;
    left:6px !important;
    right:6px !important;
    top:max(6px, env(safe-area-inset-top)) !important;
    bottom:calc(var(--tabbar-h) + var(--safe-b) + 6px) !important;
    width:auto !important;
    height:auto !important;
    transform-origin:bottom center;
  }

  .chat-window .mw-frame{
    height:100%;
    border-radius:12px;
    display:flex;
    flex-direction:column;
  }

  .chat-window .mw-titlebar{ cursor:default; }
  .chat-window .cw-body{ grid-template-columns:1fr; min-height:0; }
  .chat-window .cw-members{ display:none; }
  .chat-window .chat-card{ font-size:12px; }
  .chat-window .chat-form input,
  .chat-window .chat-form textarea{ font-size:16px; }   /* 16px stops iOS zooming in on focus */

  .face-window{
    display:block !important;
    left:12px;
    right:12px;
    width:auto;
    bottom:calc(var(--tabbar-h) + var(--safe-b) + 70px);
  }

  .fw-grid{ max-height:200px; }
  .face-window .face-glyph{ font-size:13px; }
  .face-window .face-label{ font-size:7px; }

  /* other popouts: inputs big enough not to trigger zoom */
  .comments-form input,
  .comments-form textarea,
  .login-pullout-form input,
  .bt-body textarea,
  .live-composer .lc-input-row input{ font-size:16px; }

  .comments-frame{ max-height:88vh; }

  /* doodle pad: canvas on top, tools underneath */
  .dd-wrap{ flex-direction:column; align-items:center; }
  .dd-canvas-box{ width:min(300px, 80vw); }
  .dd-side{ width:100%; }
  .dd-colors{ grid-template-columns:repeat(8, 1fr); }
  .dd-tools{ grid-template-columns:repeat(3, 1fr); }
  .dd-tool{ font-size:10px; padding:9px 4px; }
}

/* small phones */
@media(max-width:420px){
  .module-strip{ grid-template-columns:1fr; }
  .hero-title{ font-size:34px; }
  .nav-btn span{ font-size:12px; letter-spacing:.5px; }
  .nav-btn .disc{ width:22px; height:22px; }
}

/* ---------- dark mode ---------- */
@media(max-width:860px){
  [data-theme="dark"] .nav-tower{
    background:linear-gradient(180deg,#22272b 0%,#14171a 100%);
    border-top-color:#3a4147;
    box-shadow:0 -4px 14px rgba(0,0,0,.5);
  }

  [data-theme="dark"] .app-frame{ border-color:#3a4147; }
  [data-theme="dark"] .top-cap{ border-bottom-color:#05070a; }
}