/* LoschaZ mobile layer v1 – phones & tablets only (<1024px). Desktop is untouched.
   Static light accents (no canvas, no JS animation), tighter first screen, thumb-friendly touches.
   Pairs with: optional mobile.js (lede "more" toggle) and the quick-picks HTML in MOBILE.md. */
@media (max-width:1023px){
  /* ---------- 1) premium dark base with targeted, saturated light accents (static, GPU-cheap) ---------- */
  .home-hero,.lz-tool-hero,.lz-game-head,.lz-hub-hero{position:relative;isolation:isolate}
  .home-hero::before,.lz-tool-hero::before,.lz-game-head::before,.lz-hub-hero::before{
    content:"";position:absolute;z-index:-1;pointer-events:none;inset:-60px -16px auto;height:560px;
    background:
      radial-gradient(150px 120px at 88% 10%,#764effc2,#764eff00 70%),
      radial-gradient(140px 110px at 6% 44%,#14bed79e,#14bed700 70%),
      radial-gradient(120px 90px at 76% 62%,#ff5caa7a,#ff5caa00 70%);
    filter:saturate(1.15);opacity:.5;
    -webkit-mask:linear-gradient(#000 55%,#0000);mask:linear-gradient(#000 55%,#0000)}
  .lz-tool-hero::before,.lz-game-head::before,.lz-hub-hero::before{opacity:.48;height:420px}
  /* hero headline accent line gets a soft lime glow; primary buttons glow (no animation) */
  .home-hero__accent{text-shadow:0 0 24px #c5f27540}
  .lz-btn--primary{box-shadow:0 1px 0 #ffffff59 inset,0 14px 34px -14px #c5f275b3}

  /* ---------- 2) home first screen: compact, with direct quick picks ---------- */
  .home-hero{padding-top:12px}
  .home-hero .lz-eyebrow{margin-bottom:8px}
  .home-hero h1{font-size:clamp(2rem,8.6vw,2.4rem);line-height:1.06;letter-spacing:-.028em;margin-bottom:10px}
  .home-hero__lede{font-size:15px;line-height:1.5;margin-bottom:14px;color:#b9c3d2}
  .home-hero__doors{display:flex;flex-wrap:wrap;gap:8px}
  .home-hero__doors .lz-btn{flex:1 1 auto;min-height:50px;padding-inline:12px;font-size:15px;white-space:nowrap}
  .home-hero__trust{width:0;min-width:100%;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px 14px;margin-top:12px;font-size:13px;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 85%,#0000);mask:linear-gradient(90deg,#000 85%,#0000)}
  .home-hero__trust::-webkit-scrollbar{display:none}
  .home-hero__trust li{flex:none;white-space:nowrap}
  .home-mosaic{max-height:170px;margin-top:4px}
  /* quick picks (HTML in MOBILE.md) */
  .lzm-picks{margin:16px 0 4px}
  .lzm-picks__label{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#8ea0b8}
  .lzm-picks .lzm-picks__row{width:0;min-width:100%;display:flex;gap:8px;overflow-x:auto;margin:0;padding:2px 0 6px;list-style:none;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 36px),#0000);mask:linear-gradient(90deg,#000 calc(100% - 36px),#0000)}
  .lzm-picks__row::-webkit-scrollbar{display:none}
  .lzm-pick{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 6px;border-radius:999px;
    border:1px solid color-mix(in srgb,var(--pick,#c5f275) 38%,#ffffff14);background:linear-gradient(180deg,#ffffff0d,#ffffff05);color:#eef2f8;font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;
    box-shadow:0 8px 22px -14px var(--pick,#c5f275)}
  .lzm-pick i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;font-style:normal;font-size:16px;background:color-mix(in srgb,var(--pick,#c5f275) 22%,#0b0e18);box-shadow:inset 0 1px 0 #ffffff26}

  /* ---------- 3) tool & game pages: get to the tool faster ---------- */
  .lz-tool-hero .lz-breadcrumbs{margin-bottom:6px}
  .lz-tool-hero h1{font-size:clamp(1.85rem,7.6vw,2.1rem);line-height:1.08;letter-spacing:-.025em;margin-bottom:8px}
  .lz-tool-hero .lz-lede{font-size:15px;line-height:1.5;color:#b9c3d2;margin-bottom:10px}
  .lz-hub-hero .lz-lede{font-size:15px;line-height:1.5;color:#b9c3d2;margin-bottom:10px}
  :is(.lz-tool-hero,.lz-hub-hero) .lz-lede.lzm-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  .lzm-more{display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin:-10px 0 2px;padding:0 4px;border:0;background:none;color:var(--accent,#c5f275);font:600 14px/1 inherit;cursor:pointer}
  .lz-tool-hero .lz-chips{width:0;min-width:100%;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 32px),#0000);mask:linear-gradient(90deg,#000 calc(100% - 32px),#0000)}
  .lz-tool-hero .lz-chips::-webkit-scrollbar{display:none}
  .lz-tool-hero .lz-chips li{flex:none}
  .lz-tool-hero .lz-chip{white-space:nowrap;font-size:13px}
  .lz-tool-hero + *{margin-top:16px}

  /* invoice tabs: show that there is more, snap, never cut a label mid-word without a hint */
  .ei__tabs{gap:4px;scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 56px),#0000);mask:linear-gradient(90deg,#000 calc(100% - 56px),#0000);scroll-padding-inline:6px}
  .ei__tabs::-webkit-scrollbar{display:none}
  /* scroll rows clip outer focus rings: draw the ring inside the item; while an item has focus, no snap pulls the row
     back and the edge fade lifts, so the focused item stays fully visible */
  :is(.ei__tabs,.home-hero__trust,.lzm-picks__row,.lz-tool-hero .lz-chips,#lz-menu .lz-chips) :focus-visible{outline-offset:-3px}
  :is(.ei__tabs,.home-hero__trust,.lzm-picks__row,.lz-tool-hero .lz-chips,#lz-menu .lz-chips):focus-within{-webkit-mask:none;mask:none;scroll-snap-type:none}
  .ei__tab{flex:none;min-height:44px;padding-inline:12px;gap:6px;font-size:14px}
  .ei__tab .icon{width:18px;height:18px}

  /* ---------- 4) touch feel: instant press feedback instead of hover ---------- */
  a,button,[role=button],label{-webkit-tap-highlight-color:#0000}
  .lz-card,.gz-card,.lz-btn,.lz-chip,.lzm-pick{transition:transform .14s ease,box-shadow .2s ease,border-color .2s ease}
  .lz-card:active,.gz-card:active,.lzm-pick:active{transform:scale(.985)}
  .lz-btn:active{transform:scale(.97)}
  .lz-card,.gz-card{border-color:#ffffff17}
  /* small text links get a 44px hit area without changing layout */
  .lz-section-head a,.home-tools a.lz-link,.lz-link{position:relative}
  .lz-section-head a::after,.lz-link::after{content:"";position:absolute;inset:-12px -6px}
  .group-generator__check{min-height:44px;align-items:center}
  input[type=checkbox],input[type=radio]{min-width:22px;min-height:22px}

  /* ---------- 6) menu sheet (#lz-menu) + hub extras ---------- */
  /* popular chips: one swipeable row instead of 6 wrapped rows (menu ~250px shorter, studios list appears on screen 1) */
  #lz-menu .lz-chips{width:0;min-width:100%;display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding-bottom:4px;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 36px),#0000);mask:linear-gradient(90deg,#000 calc(100% - 36px),#0000)}
  #lz-menu .lz-chips::-webkit-scrollbar{display:none}
  #lz-menu .lz-chips li{flex:none;scroll-snap-align:start}
  #lz-menu .lz-chip{white-space:nowrap}
  /* same quiet light accent as the heroes, at the top of the sheet only (scrolls away with the content) */
  #lz-menu.lz-sheet{background-image:radial-gradient(180px 140px at 92% 0,#764eff3d,#764eff00 70%),radial-gradient(160px 120px at 0 26%,#14bed72b,#14bed700 70%);background-repeat:no-repeat}
  #lz-menu{overscroll-behavior:contain}
  /* dense language cross-links under tool cards on /tools/: bigger, calmer tap rows */
  .th-langs{line-height:2.15}
  .th-langs a{padding-block:6px}

  /* ---------- 5) render cost on mid-range phones (sections far below the fold, no ad slots touched) ---------- */
  .home-guides,.home-spotlight,.home-why,.home-faq,.lz-extra{content-visibility:auto;contain-intrinsic-size:auto 900px}
}
@media (max-width:1023px) and (prefers-reduced-motion:reduce){
  .lz-card,.gz-card,.lz-btn,.lz-chip,.lzm-pick{transition:none}
  .lz-card:active,.gz-card:active,.lzm-pick:active,.lz-btn:active{transform:none}
}