/* Anisterra — mobile / responsive layer. Implemented verbatim from the Claude Design
   project (mobile-app.jsx + mobile-admin.jsx): pure CSS media queries, no markup change.
   Linked LAST in app.html (after %sveltekit.head%) so it wins equal-specificity ties.
   720px = phone; 1024px = small tablet; 460px = narrow phone (admin). */

/* ======================================================================
   PLAYER APP  (mobile-app.jsx)
   ====================================================================== */

/* ---- small tablet: collapse heaviest grids ---- */
@media (max-width: 1024px){
  .exp .g3{grid-template-columns:1fr 1fr;}
  .exp .cg-roster{grid-template-columns:1fr 1fr;}
}

/* ---- phone ---- */
@media (max-width: 720px){
  /* app bar: wrap tabs to their own row */
  .exp .appbar{flex-wrap:wrap; padding:11px 15px 0; gap:9px;}
  .exp .brand{margin-right:auto;}
  .exp .brand b{font-size:14px; letter-spacing:.18em;}
  .exp .sigil{width:20px; height:20px;}
  .exp .grow{display:none;}
  .exp .resume{order:2; font-size:0; gap:0; padding:9px 13px;}
  .exp .resume .play{font-size:12px;}
  .exp .resume .arr{font-size:0;}
  .exp .ava{order:3; margin-left:0;}
  .exp .tabs{order:4; width:100%; overflow-x:auto; justify-content:flex-start; gap:4px; padding:8px 0 10px; -webkit-overflow-scrolling:touch;}
  .exp .tabs::-webkit-scrollbar{display:none;}
  .exp .tab{white-space:nowrap; padding:9px 14px;}

  /* body padding */
  .exp .body{padding:18px 16px 30px;}

  /* explore */
  .exp h1{font-size:29px;}
  .exp .lede{font-size:14.5px;}
  .exp .exhead{margin-bottom:16px;}
  .exp .g3{grid-template-columns:1fr; gap:14px;}
  .exp .feat .cover{height:150px;}
  .exp .comm .cover{height:128px;}
  .exp .rail{flex-wrap:wrap; gap:10px;}
  .exp .cat{flex:1 1 calc(50% - 5px); min-width:calc(50% - 5px); padding:15px 14px;}
  .exp .search{padding:12px 15px;}

  /* my worlds */
  .exp .continue{padding:20px 18px; margin-bottom:18px;}
  .exp .continue .cwn{font-size:26px;}
  .exp .continue .csnip{font-size:15.5px;}
  .exp .continue .crow{flex-wrap:wrap; gap:12px;}
  .exp .continue .resume-lg{width:100%; justify-content:center;}
  .exp .wtoolbar{flex-direction:column; align-items:stretch; gap:12px;}
  .exp .wtoolbar .tools{flex-wrap:wrap;}
  .exp .newcell{min-height:150px;}

  /* create */
  .exp .composer{padding-top:4px;}
  .exp .composer .chead h1{font-size:33px;}
  .exp .crow2{flex-direction:column; align-items:stretch;}
  .exp .crow2 .forge{width:100%; justify-content:center;}
  .exp .kgrid{grid-template-columns:1fr;}
  .exp .alts{grid-template-columns:1fr;}
  .exp .spark{align-items:flex-start;}

  /* detail modal → full screen sheet */
  .exp.asoverlay .dmodal{inset:0; left:0; top:0; transform:none; width:100%; max-width:100%; height:100%; max-height:100%; border:none; border-radius:0;}
  .exp.asoverlay .dhero{border-radius:0; min-height:170px;}
  .exp.asoverlay .dmpad{padding:20px 18px 30px;}
  .exp.asoverlay .dlede{font-size:18px;}
  .exp .dactions{flex-wrap:wrap; gap:10px;}
  .exp .dactions .dbig{width:100%; justify-content:center;}
  @keyframes dmpop{from{transform:translateY(14px); opacity:.5}to{transform:none; opacity:1}}

  /* profile drawer */
  .exp .pdrawer{width:86%; max-width:330px;}

  /* world editor → stacked full screen */
  .exp .wedit{inset:0; border-radius:0;}
  .exp .wedit .wehead{flex-wrap:wrap; gap:8px 10px; padding:11px 15px;}
  .exp .wedit .weago, .exp .wedit .weowner{display:none;}
  .exp .wedit .webody{grid-template-columns:1fr; grid-template-rows:auto 1fr;}
  .exp .wedit .wetree{border-right:none; border-bottom:1px solid var(--line); max-height:34vh;}
  .exp .wedit .wepane{padding:18px 16px 30px;}
  .exp .wedit .weform{grid-template-columns:1fr; gap:22px;}
  .exp .wedit .weform .savebar{margin-top:0; flex-wrap:wrap;}
  .exp .wedit .werow-2c, .exp .wedit .werow-age, .exp .wedit .kgrid{grid-template-columns:1fr;}

  /* world settings */
  .exp .wset .wsgrid{grid-template-columns:1fr; gap:16px;}
  .exp .wset .wsnav{position:static; flex-direction:row; overflow-x:auto; gap:2px; border-bottom:1px solid var(--line); padding-bottom:0; margin-bottom:6px;}
  .exp .wset .wsnav button{border-left:none; border-bottom:2px solid transparent; white-space:nowrap; padding:10px 13px;}
  .exp .wset .wsnav button.on, .exp .wset .wsnav button.danger.on{border-left:none; border-bottom-color:var(--acc);}
  .exp .wset .wshero{flex-wrap:wrap; gap:14px;}
  .exp .wset .wshero .wsback{margin-left:0; order:3;}
  .exp .wset .wshero .wsname{font-size:25px;}
  .exp .wset .w2c{grid-template-columns:1fr;}
  .exp .wdrow{flex-wrap:wrap;}
  .exp .wdrow .wdspacer{display:none;}
  .exp .wdrow .wdbtn{width:100%;}

  /* guided */
  .exp .guided .gqcard, .exp .gans{max-width:100%;}
  .exp .gdone .gdrow{flex-direction:column; gap:11px;}
  .exp .gdone .gdrow .gform, .exp .gdone .gdrow .gbegin{width:100%; text-align:center;}
  .exp .gstats{justify-content:center;}

  /* character creation */
  .exp .cg .cghead{flex-wrap:wrap; gap:10px;}
  .exp .cg .cghead h1{font-size:25px;}
  .exp .cg-cards.c3, .exp .cg-cards.c4{grid-template-columns:1fr 1fr;}
  .exp .cg-row.r2, .exp .cg-row.r3, .exp .cg-row.r4{grid-template-columns:1fr;}
  .exp .cg-rel{grid-template-columns:1fr 1fr;}
  .exp .cg-rel .rx{grid-column:span 2; width:100%; height:34px;}
  .exp .cg-roster{grid-template-columns:1fr;}
  .exp .cg-attr{grid-template-columns:44px 1fr 32px 52px; gap:10px;}
  .exp .cg-submit{flex-direction:column-reverse; align-items:stretch;}
  .exp .cg-submit .create, .exp .cg-submit .cancel{width:100%; text-align:center;}
  .exp.cg-asoverlay .rc-modal{inset:0; top:0; left:0; transform:none; width:100%; max-width:100%; height:100%; max-height:100%; border:none; border-radius:0;}

  /* opening / worldgen */
  .exp .op .ophead h1{font-size:31px;}
  .exp .op .opprose{font-size:16px;}
  .exp .wgen .wgtitle{font-size:25px;}
  .exp .wgen .wgtop{flex-wrap:wrap; gap:10px;}

  /* system states */
  .exp .sysstate{padding:46px 20px;}
  .exp .sysstate h1{font-size:33px;}
  .exp .sysstate .sbtns{flex-direction:column; width:100%;}
  .exp .sysstate .sprimary, .exp .sysstate .sghost{width:100%; justify-content:center;}
  .exp .ssedrop{grid-template-columns:1fr; padding:20px 16px;}

  /* help */
  .exp .help .hhero h1{font-size:33px;}
  .exp .help .hcards{grid-template-columns:1fr;}
  .exp .help .hcontact{flex-direction:column; align-items:flex-start; gap:14px;}
  .exp .help .hcontact .hcbtn{width:100%; justify-content:center;}

  /* account */
  .exp .acct .ahero{flex-wrap:wrap; gap:14px;}
  .exp .acct .arow{flex-wrap:wrap; gap:10px;}
  .exp .acct .arow .clerkbtn{width:100%; justify-content:center;}
  .exp .acct .sseg{width:100%;}
  .exp .acct .sseg button{flex:1;}

  /* PLAY: single-column scroll. (.playroot's height/overflow is also overridden in Game.svelte's
     own scoped @media — the authoritative fix, since Play renders outside Lobby's .exp shell.) */
  .exp .playroot{overflow-y:auto; height:auto; min-height:100vh;}
  .playroot .pcols{display:flex; flex-direction:column; min-height:0;}
  .playroot .hud{border-right:none; border-bottom:1px solid var(--line); overflow:visible; padding:18px 16px;}
  .playroot .cname{font-size:25px; margin-top:18px;}
  .playroot .chat{min-height:0;}
  .playroot .feed{overflow:visible; padding:20px 16px 8px;}
  .playroot .inputrow{padding:14px 16px 20px;}
  .playroot .mem{border-left:none; border-top:1px solid var(--line); overflow:visible; padding:18px 16px 28px;}

  /* preview-state switchers wrap neatly */
  .exp .wgswitch, .exp .opswitch, .exp .sysswitch{gap:6px;}
}

/* ======================================================================
   ADMIN OPS CONSOLE  (mobile-admin.jsx)
   ====================================================================== */

@media (max-width: 1024px){
  .admin .kpis{grid-template-columns:1fr 1fr;}
  .admin .grid-2-1, .admin .grid2{grid-template-columns:1fr;}
  .admin .ud-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width: 720px){
  /* app bar: nav wraps to its own scrollable row */
  .admin .abar{flex-wrap:wrap; height:auto; padding:10px 14px; gap:8px;}
  .admin .abrand{margin-right:auto;}
  .admin .abrand b{font-size:16px;}
  .admin .aspace{display:none;}
  .admin .aenv{font-size:0; gap:0; padding:7px 11px;}
  .admin .aenv .lk{font-size:12px;}
  .admin .aplayer{font-size:0; padding:8px 11px;}
  .admin .aplayer::before{content:"↩"; font-size:14px;}
  .admin .anav{order:5; width:100%; overflow-x:auto; flex-wrap:nowrap; gap:2px; padding-bottom:2px; -webkit-overflow-scrolling:touch;}
  .admin .anav::-webkit-scrollbar{display:none;}
  .admin .anav button{white-space:nowrap; padding:9px 13px; font-size:13.5px;}

  /* page scaffold */
  .admin .awrap{padding:18px 15px 48px;}
  .admin .ahead{flex-direction:column; align-items:flex-start; gap:14px;}
  .admin .ahead > div:last-child{flex-wrap:wrap;}
  .admin .ahead h1{font-size:23px;}
  .admin .asub{font-size:13px;}

  /* KPIs */
  .admin .kpis{grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px;}
  .admin .kpi{padding:14px 15px;}
  .admin .kpi .kv{font-size:25px;}

  /* collapse all multi-column layouts */
  .admin .grid2, .admin .grid-2-1, .admin .ud-grid, .admin .mo-rev-grid{grid-template-columns:1fr;}
  .admin .ud-worlds{grid-row:auto; grid-column:auto;}
  .admin .ud-cap{grid-column:auto;}
  .admin .wo-eng{grid-template-columns:1fr 1fr;}
  .admin .wo-eng2{grid-template-columns:1fr;}
  .admin .wo-hero{flex-wrap:wrap; gap:14px;}
  .admin .wo-hero .wlive{text-align:left; width:100%; border-top:1px solid var(--aline); padding-top:12px;}

  /* tables scroll horizontally inside their panel */
  .admin .panel{overflow-x:auto;}
  .admin table{min-width:560px;}

  /* toolbars / filter rows wrap */
  .admin .phd{flex-wrap:wrap; gap:10px;}
  .admin .co-range, .admin .co-groupby, .admin .au-filters, .admin .us-search, .admin .au-actionfilter{flex-wrap:wrap;}
  .admin .co-range .aspace, .admin .co-groupby .gendpoint{display:none;}
  .admin .us-foot, .admin .au-foot{flex-wrap:wrap; gap:10px;}

  /* user detail */
  .admin .ud-hero{flex-wrap:wrap;}
  .admin .ud-override .orow{flex-direction:column; align-items:stretch; gap:14px;}
  .admin .ud-override .onote{margin-left:0; max-width:100%;}
  .admin .ud-actions{flex-wrap:wrap; gap:10px;}
  .admin .ud-actions .aspace{display:none;}
  .admin .ud-actions .abtn{flex:1; justify-content:center; min-width:140px;}

  /* modals already width-capped; tighten padding */
  .admin .pg-modal{padding:22px 20px;}
}

@media (max-width: 460px){
  .admin .kpis, .admin .wo-eng{grid-template-columns:1fr;}
}