/* ============================================================
   Emberfall Idle - responsive behaviour
   > 1240px : full three-column desktop layout
   900-1240 : right rail becomes a tabbed panel column
   < 900px  : left nav becomes a drawer, rail moves into
              bottom-tab panels over the workspace
   ============================================================ */

/* ---------- Large desktop tuning ---------- */
@media (min-width: 1600px){
  body{ font-size:13.5px; }
  .workspace{ padding:14px 18px 24px; }
}

/* ---------- Medium desktop: rail becomes tabbed ---------- */
@media (max-width: 1340px){
  .app{ grid-template-columns: minmax(180px, 19%) minmax(0, 1fr) 300px; }
  .rate-row{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 1180px){
  .app{ grid-template-columns: 176px minmax(0,1fr) 286px; }
  .rail-tabs{ display:flex !important; }
  .rail-panel{ display:none; }
  .rail-panel.is-shown{ display:block; }
  .brand-title{ font-size:19px; }
  .grid-2, .grid-2.uneven{ grid-template-columns:minmax(0,1fr); }
  .doll{ grid-template-columns:44px 1fr 44px; }
  .slot{ width:44px; height:44px; }
}

/* ---------- Tablet: hide rail column, use bottom tabs ---------- */
@media (max-width: 900px){
  body{ overflow:hidden; }

  .app{
    /* minmax(0,1fr) so the top bar's intrinsic width can never
       stretch the column and push the layout off-screen. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--topbar-h) 1fr var(--statusbar-h);
    grid-template-areas:
      "top"
      "work"
      "status";
    padding-bottom:54px;
  }

  .nav-toggle{ display:flex; }

  /* Left nav becomes an overlay drawer */
  .sidebar{
    position:fixed; top:var(--topbar-h); left:0; bottom:0;
    width:min(280px, 82vw);
    z-index:36;
    transform:translateX(-102%);
    transition:transform .2s ease-out;
    box-shadow:12px 0 40px rgba(0,0,0,.65);
  }
  .sidebar.is-open{ transform:translateX(0); }

  /* Rail becomes an overlay sheet driven by the bottom tab bar */
  .rail{
    position:fixed; top:var(--topbar-h); left:0; right:0; bottom:54px;
    z-index:30;
    background:linear-gradient(180deg,#0d1524,#080d16);
    border-left:none;
    display:none;
    overflow-y:auto;
    padding:10px;
  }
  .rail.is-open{ display:block; }
  .rail-tabs{ display:none !important; }
  .rail-panel{ display:none; }
  .rail-panel.is-shown{ display:block; }

  .mobilebar{
    display:grid;
    /* Activity, Pack, Quests. Character left for a page of its
       own, reached from the portrait in the top bar. */
    grid-template-columns:repeat(3,1fr);
    position:fixed; left:0; right:0; bottom:0; height:54px; z-index:38;
    background:linear-gradient(180deg,#121c30,#0a1120);
    border-top:1px solid var(--bronze);
  }
  .mobilebar button{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    font-size:10px; color:var(--cream-faint); letter-spacing:.02em;
    border-top:2px solid transparent;
  }
  .mobilebar button.is-active{ color:var(--emerald); border-top-color:var(--emerald); background:var(--emerald-wash); }

  .statusbar{ bottom:54px; }
  .status-offline{ display:none; }
  .toast-stack{ bottom:96px; right:10px; }
  /* Clear of the mobile panel bar and the status bar above it. */
  .acclaim{ bottom:104px; }

  .rate-row{ grid-template-columns:1fr 1fr 1fr; }
  .rate-val{ font-size:15px; }
  .view-title{ font-size:21px; }
  .workspace{ padding:10px 11px 18px; }
}

/* ---------- Phone ---------- */
@media (max-width: 620px){
  body{ font-size:12.5px; }
  .brand-title{ font-size:16px; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .brand-crest{ width:24px; height:24px; }
  .topbar{ gap:7px; padding:0 8px; }
  .currency{ padding:4px 9px 4px 6px; }
  .currency-val{ font-size:12.5px; }
  .icon-btn{ width:34px; height:30px; }
  .avatar-btn,.avatar-frame{ width:32px; height:32px; }

  .tabs{ overflow-x:auto; }
  .tab{ padding:7px 14px; font-size:12px; white-space:nowrap; }

  .rate-row{ grid-template-columns:1fr; }
  .rate-card{ padding:6px 10px; }

  .scene{ min-height:150px; aspect-ratio:16/9.6; }
  .actor{ transform-origin:bottom center; }
  .nameplate-name{ font-size:11px; }

  .active-strip{ gap:9px; }
  .active-controls{ width:100%; margin-left:0; justify-content:space-between; }

  .inv-grid{ grid-template-columns:repeat(6,1fr); }
  .doll{ grid-template-columns:42px 1fr 42px; gap:6px; }
  .slot{ width:42px; height:42px; }
  .stat-tiles{ grid-template-columns:repeat(3,1fr); }

  .loot-grid{ grid-template-columns:repeat(auto-fill,minmax(72px,1fr)); }
  .status-sep,.status-loc{ display:none; }
  .modal-body{ padding:12px; }
  .offline-time{ font-size:22px; }
}

/* ---------- Narrow phones: drop the wordmark, keep the crest ---------- */
@media (max-width: 540px){
  .brand-title{ display:none; }
  .topbar{ gap:6px; }
  .currency{ padding:4px 8px 4px 5px; gap:5px; }
  .icon-btn{ width:30px; }
}

/* ---------- Short viewports ---------- */
@media (max-height: 620px){
  .scene{ min-height:150px; }
  .log{ height:92px; }
  .pick-list{ max-height:230px; }
}

/* ---------- Market, guild, dungeon and achievement rows ----------
   These are all "art, text, then a control on the right". Below
   700px the control drops onto its own line rather than crushing
   the name it belongs to. */
@media (max-width: 700px){
  .shop-row,
  .upgrade-card,
  .track-card{ flex-wrap:wrap; }

  .shop-main,
  .upgrade-main,
  .track-main{ flex:1 1 60%; }

  .shop-buy,
  .upgrade-buy,
  .track-claim{
    flex:1 1 100%;
    justify-content:flex-start;
    margin-top:6px;
  }
  .shop-price{ margin-left:auto; }

  .floor-row{ gap:7px; padding:5px 7px; }
  .floor-main b{ font-size:12px; }
  .rank-rep{ display:none; }
  .bounty-card{ padding:8px; }
}

/* Very narrow: the descent track and rank ladder lose their art
   rather than wrapping to two lines per row. */
@media (max-width: 460px){
  .floor-art{ display:none; }
  .mini-floors{ gap:3px; }
  .scene.short{ min-height:96px; }
  .scene-caption b{ font-size:13px; }
  .buff-bar{ padding:6px 8px 8px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .dmg{ animation:none; opacity:1; }
}

/* ============================================================
   COMPANIES AND THE HALL
   ------------------------------------------------------------
   The roster is five columns of which only two matter on a
   phone: who they are and what you can do about them.
   ============================================================ */
@media (max-width: 760px){
  .roster-row{
    grid-template-columns:72px minmax(0,1fr);
    grid-template-areas:
      "role who"
      "nums nums"
      "acts acts";
    row-gap:6px;
  }
  .roster-role{ grid-area:role; }
  .roster-who{ grid-area:who; }
  .roster-nums{ grid-area:nums; }
  .roster-acts{ grid-area:acts; justify-content:flex-start; }
  .roster-seen{ display:none; }

  .hall-row{ grid-template-columns:28px minmax(0,1fr) auto 74px; gap:6px; }
  .hall-marks{ display:none; }

  .prof-skills{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .prof-gear{ grid-template-columns:repeat(6, 1fr); max-width:none; }
  .chat-log{ height:200px; }
}

/* A hint on a phone stacks rather than squeezing its button. */
@media (max-width: 640px){
  .hint-note{ flex-wrap:wrap; }
  .hint-note p{ flex:1 1 100%; order:2; }
  .hint-note .hint-dismiss{ order:3; margin-left:auto; }
}