[data-phone-shell] .phone-more { display:none; }
/* Shared phone layout. A page opts in with <html data-phone-shell>; sizes flex, so it holds from 320 to 700px. */
@media (max-width:700px) {
  [data-phone-header] :is(.nnd-topbar, .topbar, .nnd-mobile-settings, .nnd-mobile-nav, .mobile-nav, .nnd-logo-sub, .logo-sub) { display:none !important; }
  [data-phone-header] :is(.nnd-mainbar, .mainbar) { flex-wrap:nowrap !important; gap:6px; padding:5px 8px; }
  [data-phone-header] :is(.nnd-logo, .logo) { flex:0 1 auto; min-width:0; overflow:hidden; }
  [data-phone-header] :is(.nnd-logo-text, .logo-text, .logo-name) { font-size:clamp(12px,3.7vw,15px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  [data-phone-header] :is(.nnd-mainbar, .mainbar) > :not(.nnd-logo, .logo, .nnd-lang-switch, .language-switcher, .nnd-header-links, .header-links) { display:none !important; }
  [data-phone-header] :is(.nnd-mainbar, .mainbar) :is(.nnd-lang-switch, .language-switcher) { order:2; flex:none; width:auto; margin:0 0 0 auto; gap:2px; }
  [data-phone-header] :is(.nnd-mainbar, .mainbar) :is(.nnd-header-links, .header-links) { display:flex !important; order:3; flex:none; width:auto; position:relative; margin:0; overflow:visible; }
  [data-phone-header] :is(.nnd-mainbar:not(:has(.nnd-lang-switch, .language-switcher)), .mainbar:not(:has(.language-switcher))) :is(.nnd-header-links, .header-links) { margin-left:auto; }
  [data-phone-header] :is(.nnd-header-links, .header-links) > :is(.nnd-kofi, .kofi) { display:none !important; }
  [data-phone-header] #nav-menu-btn { height:26px; padding:0 8px; }
  [data-phone-header] :is(.nnd-header-links, .header-links) .nav-collapse > a.nav-kofi-item { display:block; font-weight:700; color:var(--menu-accent,var(--red)); }
  [data-phone-header] .nnd-tag-row { display:none !important; }
  [data-phone-shell] .nnd-body { padding:6px; gap:6px; }
  [data-phone-shell] .nnd-main { flex:0 0 auto; width:100%; }
  [data-phone-shell] .nnd-intro-panel .eyebrow, [data-phone-shell] .nnd-intro-panel .intro-copy { display:none; }
  [data-phone-shell] .mode-switch { width:100%; min-width:0; }
  [data-phone-shell] .mode-button { flex:1 1 0; min-width:0; }
  [data-phone-shell] .phone-more { display:block; order:2; flex:0 0 auto !important; width:100%; height:auto; }
  [data-phone-shell] .nnd-body > .nnd-sidebar:not(.nnd-sidebar-left) { order:3; }
  [data-phone-shell] .nnd-sidebar-left { order:4; }
  [data-phone-shell]:not(.panels-open) :is(.nnd-sidebar, .nnd-side, .tl-right, .ms-right, .left-rail, .side-col, .game-sidebar) { display:none !important; }
  [data-phone-shell] :is(.nnd-main, .main-col, .tl-left, .ms-left, .game-main) { order:1; }
  [data-phone-shell] :is(.nnd-sidebar, .nnd-side, .tl-right, .ms-right, .left-rail, .side-col, .game-sidebar) { order:3; }
  [data-phone-shell] .phone-more .nnd-sidebar-header { position:relative; width:100%; padding-right:24px; text-align:left; font:inherit; font-weight:700; cursor:pointer; }
  [data-phone-shell] .phone-more .nnd-sidebar-header::after { content:"\25B8"; position:absolute; right:9px; top:50%; transform:translateY(-50%); color:var(--red); }
  [data-phone-shell] .phone-more [aria-expanded="true"]::after { content:"\25BE"; }
  [data-phone-shell] .nnd-meta-row { display:flex; flex-wrap:wrap; align-items:center; }
  [data-phone-shell] .next-daily-countdown { flex:0 0 auto !important; width:auto !important; margin:0 0 0 auto !important; padding:0 !important; border:0 !important; font-size:11px; white-space:nowrap; }
  [data-phone-shell] .unlimited-filter-button { min-height:24px !important; height:24px; padding:0 8px !important; color:#fff !important; background:linear-gradient(var(--red),var(--red-dark)) !important; border:1px solid var(--red-dark) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.25) !important; font:700 11px "MS Gothic","Courier New",monospace !important; letter-spacing:.08em; text-transform:uppercase; }
  [data-phone-shell] .nnd-meta-row { gap:2px 8px; font-size:clamp(10px,3vw,12px); }
  [data-phone-shell] .nnd-meta-row > .nnd-meta-item:first-child { display:none; }
  /* Achievements: tabs scroll on one row, and each card is a compact left-aligned entry. */
  [data-phone-shell] .achievement-tabs { display:flex !important; overflow-x:auto; scrollbar-width:none; }
  [data-phone-shell] .achievement-tab { flex:0 0 auto; padding-left:12px; padding-right:12px; white-space:nowrap; border-bottom:0; }
  [data-phone-shell] .achievement-card { padding:6px 9px; text-align:left; }
  [data-phone-shell] .achievement-card-head { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:8px; text-align:left; }
  [data-phone-shell] .achievement-card-head strong { flex:1 1 auto; min-width:0; text-align:left; }
  [data-phone-shell] .achievement-card-head span { flex:none; }
  [data-phone-shell] .achievement-card p, [data-phone-shell] .achievement-card small { margin-top:1px; text-align:left; }
  /* Grid: rotated row labels give the squares more room; panels sit behind the one bar. */
  [data-phone-shell] .ms-cols { display:flex; flex-direction:column; align-items:stretch; }
  [data-phone-shell] .ms-left { order:1; width:100%; }
  [data-phone-shell] .ms-cols .phone-more { order:2; }
  [data-phone-shell] .ms-right { order:3; width:100%; min-width:0; }
  [data-phone-shell] .masu-grid.masu-grid { min-width:0; gap:3px; --rowhead:30px; }
  [data-phone-shell] .masu-grid.grid-n-4 > .masu-head:nth-child(5n+1), [data-phone-shell] .masu-grid.grid-n-3 > .masu-head:nth-child(4n+1) { writing-mode:vertical-rl; transform:rotate(180deg); contain:size; overflow:hidden; min-height:0; padding:2px 1px; border-top:0; border-bottom:3px solid var(--kind); font-size:9px; line-height:1.1; text-align:center; }
  [data-phone-shell] .masu-corner { min-height:0; }
  [data-phone-shell] .view-src-btn { min-height:26px; padding-top:0; padding-bottom:0; }
  [data-phone-shell] #new-grid-btn { flex:0 0 26px; width:26px; padding:0; font-size:0; }
  [data-phone-shell] #new-grid-btn::after { content:"\21BB"; font-size:15px; line-height:1; }
  [data-phone-shell] .phone-more .nnd-sidebar-header { display:block; padding:6px 24px 6px 9px; background:repeating-linear-gradient(45deg,rgba(0,0,0,.025) 0 3px,transparent 3px 7px),linear-gradient(#f3f1ea,#ddd9d0); border:1px solid var(--ls); border-top:3px solid var(--menu-accent,var(--red)); font:700 11px "MS Gothic","Courier New",monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--text); }
  [data-phone-shell] .game-mode-bar .game-mode-tabs { width:100%; }
  [data-phone-shell] .game-mode-bar .game-mode-btn { flex:1 1 0; min-width:0; justify-content:center; }
  /* Higher or Lower: [VS] sits between the buttons; lives become a sixth score cell. */
  [data-phone-shell] .vs-col { align-items:stretch; gap:6px; }
  [data-phone-shell] .guess-btns { display:contents; }
  [data-phone-shell] .guess-btn { flex:1 1 0; min-width:0; }
  [data-phone-shell] .guess-higher { order:1; }
  [data-phone-shell] .vs-text { order:2; flex:0 0 42px; }
  [data-phone-shell] .guess-lower { order:3; }
  [data-phone-shell] .streak-bar { flex-direction:row; flex-wrap:wrap; }
  [data-phone-shell] .streak-scores { flex:1 1 0; width:auto; min-width:0; }
  [data-phone-shell] .streak-mid:not(:has(.streak-result:not([hidden]))) { flex:0 0 auto; width:auto; min-height:0; padding:0 7px; border-top:0; border-left:1px solid #d8d4cc; }
  [data-phone-shell] .streak-mid:not(:has(.streak-result:not([hidden]))):not(:has(.lives-row > :not(.lives-label))) { display:none; }
  [data-phone-shell] .streak-mid:not(:has(.streak-result:not([hidden]))) .lives-row { flex-direction:column-reverse; gap:2px; padding:6px 0 4px; }
  [data-phone-shell] .streak-mid .life { width:11px; height:11px; }
  [data-phone-shell] .streak-mid:not(:has(.streak-result:not([hidden]))) .lives-label { margin:0; }
  [data-phone-shell] .streak-mid .lives-row:not(:has(> :not(.lives-label))) { display:none; }
  [data-phone-shell] .result-line { text-align:center; }
  [data-phone-shell] .tl-actions:has(.share-btn) { justify-content:center; text-align:center; }
  [data-phone-header] .logo-prefix { display:none; }
  [data-phone-shell] .game-sidebar { flex-direction:column; flex-wrap:nowrap; width:100%; }
  [data-phone-shell] .game-sidebar .sidebar-panel { flex:none; width:100%; }
  /* Mode bars: full width, equal tabs, no extra note text. */
  [data-phone-shell] .mode-bar { display:flex; flex-flow:row wrap; align-items:center; align-self:stretch; width:100%; gap:3px; padding:3px 5px; }
  [data-phone-shell] .mode-tabs { flex:1 1 100%; width:100%; min-width:0; gap:3px; }
  [data-phone-shell] .mode-bar .mode-btn { flex:1 1 0; min-width:0; justify-content:center; margin:0; padding-left:3px; padding-right:3px; border:1px solid var(--ls); white-space:nowrap; }
  [data-phone-shell] .mode-note, [data-phone-shell] .mode-descriptor { display:none; }
  [data-phone-shell] .mode-bar .view-src-switch { flex:1 0 100%; margin:0; padding:0; border:0; background:none; box-shadow:none; }
  [data-phone-shell] .actions .new-btn { flex:none; margin:0; }
  /* Chain: a dotted line separates song pool from difficulty. */
  [data-phone-shell] #diff-panel > :last-child:not(:first-child) { margin-top:5px; padding-top:5px; border-top:2px solid var(--menu-accent,var(--red)); }
}