/* Swift ContentView mobile source-of-truth. Kept separate so legacy desktop rules cannot override it. */
@media (max-width:899px) {
  .mobile-home-feed { display:none!important; }
  .home-view { padding:0 0 calc(76px + env(safe-area-inset-bottom))!important; background:var(--canvas)!important; }
  .home-view .world-header { display:grid!important; min-height:94px!important; padding:22px 48px 0!important; background:var(--world-background)!important; }
  .home-view .pack-list { display:grid!important; width:calc(100% - 34px)!important; max-width:620px; margin:18px auto 22px!important; }
  /* An older mobile experiment hides this selector wholesale. Restore the
     Swift picker whenever JavaScript removes its native hidden attribute. */
  .home-view .world-picker-popover:not([hidden]) {
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-auto-flow:row;
    justify-items:center;
  }
  .home-view .world-picker-popover:not([hidden]) button {
    width:min(58px,calc((100vw - 88px) / 5))!important;
    height:min(58px,calc((100vw - 88px) / 5))!important;
    min-width:0;
    min-height:0;
    aspect-ratio:1;
    border-radius:50%;
  }
  .world-picker-popover[hidden] { display:none!important; pointer-events:none!important; }
  /* Selected cover and drawer read as one uninterrupted color field. */
  .pack-card.is-selected { border-bottom:0 !important; }
  .pack-drawer { border-top:0 !important; }
  /* Keep the Swift Chinese title composition intact; only pinyin avoids the hero-art lane. */
  .pack-card.is-selected .pack-copy { max-width:64%; }
  .pack-card.is-selected .pack-subtitle { max-width:calc(100% - 55px); }
  .pack-expand { z-index:4; }
  .pack-copy,.pack-hero { z-index:2; pointer-events:none; }
  .pack-card .pack-chinese { font-weight:500; }
  .pack-status { z-index:5; display:grid; grid-template-columns:21px auto auto; align-items:center; justify-content:center; column-gap:5px; padding:0 10px; font-family:"Avenir Next",Avenir,sans-serif; font-size:17px; font-weight:600; text-align:center; }
  .pack-status img { width:21px; height:21px; }.pack-status small { font-family:"Avenir Next",Avenir,sans-serif; font-size:14px; font-weight:500; }
  .mobile-app-nav .mobile-home { display:grid; place-items:center; width:124px; height:56px; padding:0; border:0!important; border-radius:0; outline:0; appearance:none; -webkit-appearance:none; background:transparent!important; box-shadow:none!important; }
  .mobile-app-nav .mobile-home:focus-visible .mobile-brand { text-decoration:underline; text-underline-offset:4px; }
  .mobile-app-nav .mobile-brand { color:var(--world-foreground); font-family:"Avenir Next",Avenir,sans-serif; font-size:23px; font-weight:600; letter-spacing:-.25px; }
  .mobile-app-nav .mobile-settings-icon { display:block; width:23px; height:23px; background:var(--world-foreground); -webkit-mask:url("assets/icons/gear-small.webp") center / contain no-repeat; mask:url("assets/icons/gear-small.webp") center / contain no-repeat; }
  .mobile-app-nav .mobile-settings .ff-symbol { width:21px; height:21px; }
  .mobile-app-nav .mobile-trophy .lottie-trophy { width:58px; height:58px; transform:scale(1.16) translateY(-6px); }

  /* Swift HomeSettingsView */
  .settings-view { min-height:100dvh; padding:20px 24px 36px!important; background:var(--canvas)!important; }
  .settings-swift { width:100%; max-width:480px; margin:0 auto; }
  .settings-swift-header { display:flex; align-items:center; justify-content:space-between; gap:14px; }
  .settings-heading { display:flex; align-items:center; gap:10px; min-width:0; }
  .settings-heading h1 { margin:0; color:var(--pinyin); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Rounded",sans-serif; font-size:22px; font-weight:800; letter-spacing:-.45px; white-space:nowrap; }
  .settings-help-button { display:grid; place-items:center; flex:0 0 auto; width:28px; height:28px; padding:0; border:0; border-radius:50%; color:var(--pinyin); background:color-mix(in srgb,var(--pinyin) 12%,transparent); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Rounded",sans-serif; font-size:13px; font-weight:800; }
  .settings-close { display:grid; place-items:center; flex:0 0 auto; width:42px; height:42px; padding:0; border:0; border-radius:50%; color:var(--pinyin); background:#fff; box-shadow:none; }.settings-close .ff-symbol { width:20px; height:20px; stroke-width:5; }
  .settings-character-help { margin:18px 0 0; padding:16px; border-radius:18px; color:rgba(0,0,0,.58); background:rgba(255,255,255,.8); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Rounded",sans-serif; font-size:15px; font-weight:500; line-height:1.35; }
  .settings-script-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; margin-top:26px; }
  .settings-script-choice { display:flex; flex-direction:column; align-items:center; width:100%; min-height:272px; padding:12px 8px 16px; border:1px solid color-mix(in srgb,var(--pinyin) 18%,transparent); border-radius:24px; color:#000; background:rgba(255,255,255,.96); box-shadow:0 5px 0 color-mix(in srgb,var(--pinyin) 20%,transparent); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Rounded",sans-serif; text-align:center; transition:transform .12s ease; }.settings-script-choice.is-selected { border-width:3px; border-color:color-mix(in srgb,var(--pinyin) 82%,transparent); box-shadow:0 5px 0 color-mix(in srgb,var(--pinyin) 52%,transparent); }.settings-script-choice:active { transform:translateY(5px) scale(.98); box-shadow:none; }.settings-script-choice img { width:100%; height:128px; object-fit:contain; margin-bottom:auto; }.settings-script-choice strong { display:block; font-size:31px; font-weight:800; line-height:1.08; }.settings-script-choice > span { display:block; margin-top:2px; color:var(--pinyin); font-size:15px; font-weight:600; }.settings-script-choice small { display:block; margin-top:3px; color:rgba(0,0,0,.58); font-size:14px; font-weight:600; }
  .settings-about-footer { display:flex; flex-direction:column; align-items:center; padding:38px 0 24px; color:rgba(0,0,0,.45); font-family:"Avenir Next",Avenir,sans-serif; font-weight:600; text-align:center; }.settings-globe { display:block; width:236px; height:236px; margin-bottom:8px; pointer-events:none; }.settings-about-footer > strong { color:var(--pinyin); font-size:30px; font-weight:600; letter-spacing:-.7px; }.settings-about-footer > b { margin-top:7px; color:rgba(0,0,0,.55); font-size:16px; font-weight:600; }.settings-about-footer > span { margin-top:2px; font-size:16px; font-weight:600; }.settings-about-footer p { display:flex; align-items:center; gap:9px; margin:14px 0 0; }.settings-about-footer a { color:color-mix(in srgb,var(--pinyin) 62%,transparent); font-size:16px; font-weight:600; text-decoration:none; }.settings-about-footer i { width:3px; height:3px; border-radius:50%; background:color-mix(in srgb,var(--pinyin) 32%,transparent); }
  /* Trophy screens share the compact mobile header structure.  The room
     summary uses the full 512px trophy source, so size it explicitly rather
     than letting the image's intrinsic width expand the center grid column. */
  .trophy-room-header,.trophy-case-header { grid-template-columns:42px minmax(0,1fr) 42px; }
  .trophy-room-header > div,.trophy-case-header > div { min-width:0; }
  .trophy-room-header p,.trophy-case-header p { display:flex; align-items:center; justify-content:center; gap:5px; }
  .trophy-room-header p img { flex:0 0 auto; width:16px; height:16px; object-fit:contain; }
  .trophy-case-header p { font-size:15px; }
  .trophy-case-header p img { flex:0 0 auto; width:20px; height:20px; object-fit:contain; }
  .trophy-room-header .circle-button .ff-symbol { width:22px; height:22px; stroke-width:5; }

  /* The room is intentionally a dense visual inventory.  Its art wrapper
     needs an explicit square on mobile too; without it locked items collapse
     to 0px tall because they are CSS-mask spans rather than image elements. */
  .trophy-room-grid .trophy-artwork-tile { display:grid; place-items:center; aspect-ratio:1; min-width:0; min-height:0; }
  .trophy-room-grid .trophy-room-art { display:grid; place-items:center; width:100%; height:100%; aspect-ratio:1; }
  .trophy-room-grid .trophy-room-art img,.trophy-room-grid .trophy-room-art .trophy-locked-art { width:100%; height:100%; object-fit:contain; }

  /* Swift-style pack trophy case: artwork and the learner's selected script
     sit directly on the canvas, without white card backgrounds. */
  .trophy-case-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 12px; margin-top:14px; }
  .trophy-case-tile { display:grid; grid-template-rows:minmax(84px,1fr) auto; place-items:center; aspect-ratio:auto; min-height:118px; padding:1px; border:0; border-radius:0; background:transparent; box-shadow:none; }
  .trophy-case-art { display:grid; place-items:center; width:100%; height:100%; min-height:84px; }.trophy-case-art img,.trophy-case-art .trophy-locked-art { width:100%; height:100%; object-fit:contain; }.trophy-case-art img { filter:none; }.trophy-case-character { display:block; min-height:25px; margin-top:3px; color:rgba(0,0,0,.86); font-family:"PingFang SC","Hiragino Sans GB",sans-serif; font-size:20px; font-weight:700; line-height:1.1; text-align:center; }.trophy-case-tile:not(.is-collected) .trophy-case-character { color:rgba(0,0,0,.52); }.trophy-case-tile:disabled { opacity:.94; }
  .trophy-case-header .case-reset { display:grid; place-items:center; background:#fff; box-shadow:none; }.trophy-case-header .case-reset-icon { display:block; width:24px; height:24px; background:#7a3d75; -webkit-mask:url("counterarrow.webp") center / contain no-repeat; mask:url("counterarrow.webp") center / contain no-repeat; }
  .trophy-room-header,.trophy-case-header { padding-right:10px; padding-left:10px; }.trophy-case-tile { grid-template-rows:auto auto; align-content:start; min-width:0; aspect-ratio:auto; min-height:0; padding:0; background:transparent; box-shadow:none; }.trophy-case-art { width:100%; height:auto; min-height:0; aspect-ratio:1; padding:5px; background:transparent; box-shadow:none; }.trophy-case-art img,.trophy-case-art .trophy-locked-art { width:100%; height:100%; object-fit:contain; }.trophy-case-character { display:block; width:100%; max-width:100%; min-height:0; margin-top:7px; overflow:hidden; font-size:clamp(17px,5vw,22px); line-height:1.15; text-align:center; text-overflow:clip; white-space:nowrap; }
  .reset-case-dialog { width:min(342px,calc(100% - 48px)); padding:28px 24px 24px; border:0; border-radius:28px; background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.2); font-family:"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,sans-serif; text-align:center; }.reset-case-dialog::backdrop { background:rgba(0,0,0,.3); }.reset-case-warning { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 14px; border-radius:50%; color:#fff; background:var(--not-yet); font-family:inherit; font-size:31px; font-weight:500; }.reset-case-dialog h2,.reset-case-dialog p { width:100%; margin:0; font-family:inherit; text-align:center; }.reset-case-dialog h2 { color:var(--pinyin); font-size:24px; font-weight:600; }.reset-case-dialog p { margin-top:10px; color:rgba(0,0,0,.62); font-size:16px; font-weight:500; line-height:1.35; }.reset-case-dialog > div { display:grid; grid-template-columns:1fr 1.25fr; gap:10px; width:100%; margin-top:22px; }.reset-case-dialog button { display:grid; place-items:center; height:47px; border:0; border-radius:14px; font-family:inherit; font-size:16px; font-weight:600; text-align:center; }.reset-case-dialog #cancel-case-reset { color:var(--pinyin); background:color-mix(in srgb,var(--pinyin) 10%,#fff); }.reset-case-dialog #confirm-case-reset { color:#fff; background:var(--not-yet); box-shadow:0 4px 0 var(--not-yet-shadow); }
}