/* fREgs on phones (mechsicko.art).
   Kept apart from fregs.css so game updates can drop in without losing it:
   index.html just loads mobile.css and js/mobile.js after the game's own files.
   Everything here only applies at phone/tablet widths, where the layout is one column. */

/* tab icons and short labels only show on phones */
.tab .ticon,.tab .tl-short{display:none}
.foot .back-foot{display:none}
.mbars{display:none}
details.mhow{display:contents}
details.mhow>summary{display:none}

@media (max-width:820px){
  /* ---- 3. one-row header ---- */
  .top-in{flex-wrap:nowrap;padding:10px 12px;gap:8px}
  .brand{gap:8px;min-width:0}
  .brand .mark{width:28px}
  .logo{font-size:16px;line-height:1}
  .tagline{display:none}
  .top-right{flex-wrap:nowrap;gap:8px}
  .top-right .back{display:none}
  .theme{width:32px;height:32px}
  .wallet{padding:4px 8px;gap:6px}
  .wallet img{width:16px}
  .wallet b{font-size:16px}
  .wallet small{display:none}
  .acct{gap:8px}
  .acct .sync{font-size:0}                     /* keep the coloured dot, drop the words */
  .acct .sync::before{margin-right:0}
  .acct .linkbtn{font-size:8px}
  .acct .btn{padding:8px 10px}
  .foot .back-foot{display:inline}

  /* ---- 1. tabs become a bar fixed to the bottom of the screen ---- */
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:15;margin:0;gap:0;overflow:visible;
    display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);
    border-top:1px solid var(--line);border-bottom:0;padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
  .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    padding:6px 0 4px;margin:0;font-size:8px;line-height:1;border-bottom:0;border-top:2px solid transparent;min-height:52px}
  .tab[aria-selected="true"]{border-top-color:var(--sage);color:var(--ink)}
  .tab .ticon{display:block;width:20px;height:auto}
  .tab:disabled .ticon{opacity:.4}
  .tab .tl-full{display:none}
  .tab .tl-short{display:inline}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom))}

  /* ---- layout spacing ---- */
  .app{padding:16px 12px 24px;gap:20px;grid-template-columns:minmax(0,1fr)}
  .device-wrap,.panel{min-width:0}
  details.odds{overflow-x:auto}
  .panel{gap:16px}
  .pane{gap:16px}
  .h2{font-size:24px}
  .h3{font-size:16px}

  /* ---- 2. the frog only takes over Home; elsewhere it's a slim strip ---- */
  body[data-mtab]:not([data-mtab="home"]) .device-wrap{gap:0}
  body[data-mtab]:not([data-mtab="home"]) .device{
    display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:6px;
    padding:8px 10px;box-shadow:4px 4px 0 var(--shell);margin-right:4px;cursor:pointer}
  body[data-mtab]:not([data-mtab="home"]) .screen{grid-column:1;grid-row:1/3;width:56px;align-self:center}
  body[data-mtab]:not([data-mtab="home"]) .plate{grid-column:2;grid-row:1;font-size:8px}
  body[data-mtab]:not([data-mtab="home"]) .plate b{font-size:12px}
  body[data-mtab]:not([data-mtab="home"]) .mbars{display:grid;grid-column:2;grid-row:2;grid-template-columns:repeat(4,1fr);gap:6px}
  body[data-mtab]:not([data-mtab="home"]) .btns,
  body[data-mtab]:not([data-mtab="home"]) .bubble,
  body[data-mtab]:not([data-mtab="home"]) .fx,
  body[data-mtab]:not([data-mtab="home"]) .gridlines,
  body[data-mtab]:not([data-mtab="home"]) .species-line{display:none}
  body[data-mtab]:not([data-mtab="home"]) .scene{pointer-events:none}
  .mbar{display:flex;flex-direction:column;gap:3px;font-size:8px;line-height:1;color:var(--muted)}
  .mbar i{display:block;height:6px;background:var(--bg);border:1px solid var(--line);position:relative}
  .mbar i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--v);background:var(--c)}
  .mbar.low{color:var(--warn)}
  .mbar.low i::after{background:var(--warn)}
  .species-line{gap:6px}

  /* ---- 5. a tighter Home ---- */
  #pane-home #commHome,
  #pane-home>.lede,
  #pane-home>.row:has(>[data-goto]){display:none}
  #pane-home .stat{grid-template-columns:76px minmax(0,1fr) auto;gap:8px}
  #pane-home .bar{height:16px;padding:2px}
  #pane-home .facts{grid-template-columns:repeat(4,1fr)}
  #pane-home .fact{padding:8px;gap:2px}
  #pane-home .fact b{font-size:16px}
  #pane-home .fact span{font-size:8px;line-height:1.4}

  /* ---- 4. games take over the screen ---- */
  #pane-games>.head{display:none}
  #pane-games .game>.head .h3{display:none}
  #pane-games .game>.head{gap:0}
  details.mhow{display:block;border:1px solid var(--line);padding:8px 12px}
  details.mhow>summary{display:block;cursor:pointer;font-size:12px;list-style:none}
  details.mhow>summary::-webkit-details-marker{display:none}
  details.mhow>summary::before{content:"> ";color:var(--sage)}
  details.mhow[open]>summary::before{content:"v "}
  details.mhow[open]>summary{margin-bottom:10px}
  details.mhow .legend{margin-top:10px}
  .gamebox{max-width:none;box-shadow:4px 4px 0 var(--sage);margin-right:4px}
  .game{gap:12px;scroll-margin-top:8px}
  .picker{gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .picker.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pick{padding:8px 10px;min-width:0}
  .pick b{font-size:12px}
  .pick span{min-width:0}
  .overlay .big{font-size:32px}
  .dpad{grid-template-columns:repeat(3,64px);grid-template-rows:repeat(2,52px)}
  .pondbox{box-shadow:4px 4px 0 var(--sage);margin-right:4px}

  /* ---- 6. Lily Mart and closet cards ---- */
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .card{padding:6px;gap:8px}
  .card h3{font-size:12px;line-height:1.3;overflow-wrap:anywhere}
  .card .meta{gap:8px;padding:0 2px 2px}
  .card .meta .btn{padding:10px 6px;white-space:normal}
  .card.featured{flex-direction:column;gap:10px;box-shadow:4px 4px 0 var(--rc);margin-right:4px}
  .card.featured .pv{width:100%}
  .card.featured h3{font-size:16px}
  .card.featured .stamp{left:50%}
  .stamp{font-size:16px}
}
/* the narrowest phones: the four care buttons get smaller labels so they fit */
@media (max-width:360px){
  .brand .logo{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}   /* just the frog logo; the name stays for screen readers */
  .btns{gap:6px}
  .pbtn{font-size:8px;padding:8px 2px 6px}
  .pbtn img{width:28px}
  .tab{font-size:8px}
}