/* =====================================================================
   GAMIFY · DESKTOP — the PC browser layout of the shell. Under 900 px
   nothing here applies, so phones and narrow windows keep the mobile
   layout from shell.css untouched. At 900 px and up the bottom tab bar
   becomes a left rail, and the screens use the width of the window
   instead of a single phone column. Colours still come from skin.css.
   ===================================================================== */
@media (min-width:900px){
  /* the five tabs stand in a rail on the left, centred in the window */
  .bottom-nav{left:20px;bottom:auto;top:50%;transform:translateY(-50%);
    flex-direction:column;gap:10px;width:116px}
  .nav-tile{flex:0 0 auto;min-height:72px;justify-content:center;padding:12px 4px 10px;font-size:.78rem}
  .nav-tile:hover,.nav-tile.current{transform:translateX(4px)}
  .nav-tile:active{transform:translateX(4px) translateY(1px)}

  /* icons and tap targets grow with the screen: bigger tabs, bigger glyphs */
  .nav-tile .nico svg{width:36px;height:36px}
  .nav-tile{font-size:.85rem}
  .gear-btn{width:56px;height:56px}
  .gear-btn svg{width:28px;height:28px}
  .acct-btn{min-height:56px}
  .acct-btn .a-txt{font-size:.95rem}
  .acct-btn .a-txt small{font-size:.78rem}
  .acct-btn .a-ring{width:40px;height:40px;font-size:1.05rem}
  .car-chev{width:56px;height:56px}
  .car-chev svg{width:28px;height:28px}
  .step-back{width:48px;height:48px}
  .step-back svg{width:24px;height:24px}
  .dz-ico svg{width:44px;height:44px}
  .big-tile .t-ico svg,.c-lv svg,.c-stars svg{width:24px;height:24px}

  /* screens clear the rail and fill the rest */
  .screen{padding:24px 32px 32px 160px}
  .topbar{width:min(100%,1080px)}
  .screen-inner{width:min(100%,880px)}
  #screen-home .wordmark{font-size:2.2rem}

  /* Home: one wide card that fills the height, never a thin phone strip */
  #screen-home .car-wrap{width:min(100%,760px);margin-top:12px}
  .car-stage{min-height:360px;max-height:calc(100vh - 230px)}
  .car-card .c-body{padding:28px 32px 30px}
  .car-card .c-name{font-size:2rem}
  .car-card .c-play{max-width:360px}
  .car-card .c-chal{max-width:360px}
  .car-chev.l{left:-64px}
  .car-chev.r{right:-64px}

  /* two cards across where the phone stacks them */
  .choice-tiles{flex-wrap:nowrap}
  .shell-card{padding:24px}
}

/* a short, wide window (a laptop with the dock up) trades height for room */
@media (min-width:900px) and (max-height:640px){
  .nav-tile{min-height:60px;padding:8px 4px}
  .bottom-nav{gap:6px}
  .car-stage{min-height:300px}
}