/* ---- the phone held upright: a tighter, calmer HUD (sizes come down a step, nothing sits on top of an open panel) */
  /* the talk box: readable, not shouting; the portrait a little smaller; buttons wrap rather than run off */
  body.is-narrow #talk { padding: 12px 14px 13px; gap: 7px; }
  body.is-narrow #talk .tt { font-size: 16px; line-height: 1.38; }
  body.is-narrow #talk .tn { font-size: 15px; }
  body.is-narrow #talk.big { min-height: 0; }
  body.is-narrow #talk.big .tn { font-size: 14px; }
  body.is-narrow #talk.big .tt { font-size: 19px; line-height: 1.3; }
  body.is-narrow #talk button, body.is-narrow #talk.big button { font-size: 16px; padding: 8px 16px; }
  body.is-narrow #talk .ta { flex-wrap: wrap; gap: 6px; }
  body.is-narrow #talk .tp { width: 68px !important; height: 68px !important; border-radius: 16px; }
  /* Jump and Use step aside while a panel or a conversation is up (they sat on its buttons) */
  body.is-coarse.is-narrow:is(:has(#talk:not([hidden])), :has(#term:not([hidden])), :has(#panel:not([hidden])), :has(#build:not([hidden])), :has(#wardrobe:not([hidden])), :has(#designer:not([hidden]))) :is(#jumpbtn, #actionbtn) { display: none !important; }
  /* a toast that pops up mid-screen waits till the panel's closed */
  body.is-narrow:is(:has(#term:not([hidden])), :has(#panel:not([hidden])), :has(#wardrobe:not([hidden])), :has(#talk:not([hidden])), :has(#build:not([hidden])), :has(#drawer:not([hidden]))) #daily-toast { visibility: hidden; }
  /* a conversation over an open drawer: the drawer closes its eyes (they'd sit in a muddle, one on the other) */
  body.is-narrow:has(#talk:not([hidden])) #drawer { visibility: hidden; }

  /* ---- phone, pass two: everything a size down, the build panel a strip, the ring buttons a row by your thumb */
  /* the dock: a slimmer row */
  body.is-narrow #tabbar { min-height: 54px; padding: 5px; gap: 5px; border-radius: 18px; }
  body.is-narrow #tabbar .tab { min-height: 42px; grid-template-rows: 20px auto; padding: 3px 2px 3px; font-size: 11.5px; border-width: 2.5px; border-radius: 12px; }
  body.is-narrow #tabbar .tab svg { width: 20px; height: 20px; }
  /* Jump: a big round button where the right thumb rests, just above the dock; Use up and to its left */
  body.is-coarse.is-narrow #jumpbtn { width: 76px; height: 76px; right: calc(var(--hud-inline) + 4px); bottom: calc(var(--hud-bottom) + 72px); font: 800 16px/1 var(--ui); display: grid; place-items: center; align-content: center; gap: 1px; }
  body.is-coarse.is-narrow #jumpbtn::before { content: '⬆'; font-size: 22px; line-height: 1; }
  body.is-coarse.is-narrow #actionbtn { width: 58px; height: 58px; min-width: 58px; right: calc(var(--hud-inline) + 84px); bottom: calc(var(--hud-bottom) + 104px); }
  /* no mouse hints on a phone ("Left click Select · Right click Sit"): a tap does it */
  body.is-coarse #hover { display: none !important; }
  /* the build panel: one scrolling row of kinds, one of tools, one of sizes (about a quarter of the screen, not half) */
  body.is-narrow #build { padding: 6px 8px 8px; }
  body.is-narrow #build .bb-top { gap: 6px; }
  body.is-narrow #cat-tabs { flex-wrap: nowrap !important; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 34px 4px 0; gap: 5px; }
  body.is-narrow #cat-tabs::-webkit-scrollbar { display: none; }
  body.is-narrow #cat-tabs .cat { flex: none; }
  body.is-narrow #cat-info { display: none; }
  body.is-narrow #build .bb-sub { margin-top: 4px; }
  body.is-narrow #build .bb-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 5px; }
  body.is-narrow #build .bb-tools .btn.small { flex: none; min-height: 30px; }
  body.is-narrow #build .cardwrap { margin-top: 4px; }
  body.is-narrow #build .cpg, #build .cpg { display: none !important; }   /* (the rail scrolls the shelf: no ◀ ▶ over its last picture: Tom) */
  body.is-narrow .szcard { width: 72px; height: 60px; gap: 2px; border-width: 2.5px; border-radius: 14px; font-size: 12px; }
  body.is-narrow #build .cardwrap, body.is-narrow #build .cardcol { height: auto !important; min-height: 0 !important; gap: 0; }
  body.is-narrow #build #cards { padding: 6px 4px 6px; margin-top: 0; gap: 8px; }
  body.is-narrow #build .kcard { width: 76px !important; padding: 3px 2px 4px; font-size: 11.5px; }
  body.is-narrow #build .kcard .ki { width: 46px; height: 46px; }
  body.is-narrow #elshelves { gap: 5px; }
  body.is-narrow #elshelves button { font-size: 12.5px; padding: 3px 9px; min-height: 30px; }
  /* Undo and Redo: small, under the settings button (they sat on the stars) */
  /* Undo and Redo: two small round buttons at the bottom left, just above the dock (above the build strip while it's open) */
  body.is-narrow .undobtn { position: fixed; top: auto !important; right: auto !important; left: var(--hud-inline); bottom: calc(var(--hud-bottom) + 66px); z-index: 7; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; overflow: hidden; font-size: 0; border-width: 2.5px; border-radius: 50%; box-shadow: 0 3px 0 rgba(19,28,92,.45); }
  body.is-narrow .undobtn::before { content: '↩'; font: 900 20px/1 var(--ui); }
  body.is-narrow #redobtn { left: calc(var(--hud-inline) + 48px); }
  body.is-narrow #redobtn::before { content: '↪'; }
  body.is-narrow:has(#build:not([hidden])) .undobtn { bottom: calc(var(--hud-bottom) + 214px); }

  /* ---- phone, pass three: the build strip holds its width (its rows scroll inside it), the designer is a sheet along the bottom */
  body.is-narrow #build { grid-template-columns: minmax(0, 1fr); overflow: hidden; }
  body.is-narrow #build > * { min-width: 0; max-width: 100%; }
  body.is-narrow #build .bb-top { min-width: 0; overflow: hidden; }
  body.is-narrow #cat-tabs { flex: 1 1 auto; min-width: 0; touch-action: pan-x; -webkit-overflow-scrolling: touch; }
  body.is-narrow #build .bb-sub, body.is-narrow #build .cardwrap, body.is-narrow #build .cardcol { min-width: 0; overflow: hidden; }
  body.is-narrow #build #cards { touch-action: pan-x; overflow-x: auto; }
  body.is-narrow #build .bb-tools { min-width: 0; touch-action: pan-x; }
  body.is-narrow .szcard .fp2 { zoom: .62; }
  body.is-narrow .szcard .szn { font-size: 11.5px; white-space: nowrap; }
  body.is-narrow #designer { top: auto !important; bottom: var(--hud-bottom) !important; left: var(--hud-inline) !important; right: var(--hud-inline) !important; width: auto !important; max-width: none !important; max-height: min(48vh, 420px) !important; transform: none !important; overflow-y: auto; border-radius: 18px; }

  /* ---- a game on a phone: the screen is the game. No dock, just the Ring button (bottom left), Jump and your power side by
     side at bottom right, nothing up top but the round's own chip; the power steps aside while a panel is open */
  body.is-narrow.ingame #tabbar { display: none !important; }

  /* the next-step pill: slimmer, and only as wide as its words */
  body.is-narrow #objchip:not([hidden]) { width: auto !important; max-width: 100%; align-self: flex-start; height: 34px !important; min-height: 34px !important; border-width: 2.5px; border-radius: 13px; box-shadow: 0 3px 0 rgba(19,28,92,.4); }
  body.is-narrow #objchip .oc-main { grid-template-columns: 22px minmax(0, auto) auto !important; gap: 6px !important; font-size: 13px !important; padding: 0 4px 0 6px !important; }
  body.is-narrow #objchip .oc-arrow, body.is-narrow #objchip .oc-arrow i { width: 22px !important; height: 22px !important; }
  body.is-narrow #objchip .oc-arrow svg { width: 21px !important; height: 21px !important; }
  body.is-narrow #objchip button:not(.oc-main) { width: 30px !important; min-width: 30px !important; }
  /* name tags in a game: smaller, so you can see the game (yours stays gold, a touch bigger) */
  body.is-narrow .ellbl { padding: 1px 6px; font-size: 10px; border-width: 1.5px; }
  body.is-narrow .ellbl.gnome-label { font-size: 9px; }
  body.is-narrow .ellbl.me { font-size: 11px; padding: 2px 8px; border-width: 2px; box-shadow: 0 2px 0 #131c5c; }

  /* a game's top bar on a phone: one slim row from the left, clear of the settings button; your stars wait till the game's over */
  body.is-narrow #cghud { left: var(--hud-inline) !important; right: auto !important; margin: 0 !important; top: var(--hud-top) !important; max-width: calc(100vw - 2 * var(--hud-inline) - 52px); gap: 5px; }
  body.is-narrow #eljoin { left: var(--hud-inline); right: auto; margin: 0; top: var(--hud-top); height: 36px; padding: 0 9px; border-width: 2.5px; border-radius: 12px; }
  body.is-narrow #cghud .cg-main { gap: 5px; min-width: 0; }
  body.is-narrow #cghud :is(.cg-chip, .cg-clock) { height: 36px; border-width: 2.5px; border-radius: 12px; }
  body.is-narrow #cghud .cg-chip { padding: 0 7px 0 6px; font-size: 13px; }
  body.is-narrow #cghud .cg-chip i { font-size: 17px; }
  body.is-narrow #cghud .cg-clock { padding: 0 8px 0 6px; font-size: 18px; }
  body.is-narrow #cghud .cg-clock i { font-size: 13px; }
  body.is-narrow #cghud .cg-stat { min-height: 36px; padding: 2px 9px 2px 4px; gap: 5px; border-width: 2.5px; border-radius: 12px; }
  body.is-narrow #cghud .cg-stat > i { width: 24px; height: 24px; font-size: 15px; }
  body.is-narrow #cghud .cg-sv b { font-size: 15px; }
  body.is-narrow #cghud .cg-sv small { font-size: 10px; max-width: 110px; }
  body.is-narrow #cghud > button { width: 36px; height: 36px; min-width: 36px; border-width: 2.5px; border-radius: 12px; }
  body.is-narrow.ingame #gold { display: none !important; }
  body.is-narrow.ingame #sysbtn { top: var(--hud-top) !important; }
  /* the announcer: a slim strip under the top bar, not a banner across the middle */
  body.is-narrow #elann { top: calc(var(--hud-top) + 46px); gap: 7px; padding: 5px 12px 6px 7px; max-width: calc(100vw - 2 * var(--hud-inline)); border-width: 2.5px; border-radius: 14px; }
  body.is-narrow #elann i { font-size: 20px; }
  body.is-narrow #elann small { font-size: 9px; }
  body.is-narrow #elann b { font-size: 13.5px; line-height: 1.2; }
  /* Undo and Redo hide under any open sheet */
  body.is-narrow:is(:has(#term:not([hidden])), :has(#panel:not([hidden])), :has(#drawer:not([hidden])), :has(#talk:not([hidden])), :has(#wardrobe:not([hidden])), :has(#designer:not([hidden]))) :is(#undobtn, #redobtn) { display: none !important; }
  body.is-narrow #term .tb { grid-template-columns: minmax(0, 1fr); }   /* (a sheet's body is one column the sheet's width: wide rows scroll or wrap inside it) */
  body.is-narrow #term .tb > * { min-width: 0; }
  body.is-narrow.ingame #ringbar > :not(#ringbtn) { display: none !important; }
  body.is-narrow.ingame #objchip, body.is-narrow.ingame #undobtn, body.is-narrow.ingame #redobtn { display: none !important; }
  body.is-coarse.is-narrow.ingame #jumpbtn { width: 84px; height: 84px; bottom: calc(var(--hud-bottom) + 18px) !important; }
  body.is-coarse.is-narrow.ingame #actionbtn { bottom: calc(var(--hud-bottom) + 112px) !important; right: calc(var(--hud-inline) + 14px); }
  /* your powers in an arc round Jump, the way console-style phone games do it: the main one up and to its left, any more
     round to its left. (#elpow is a point at Jump's middle; each power sits at its own spot from there) */
  body.is-coarse.is-narrow #elpow:not([hidden]) { display: block !important; }
  body.is-coarse.is-narrow #elpow { right: calc(var(--hud-inline) + 46px); bottom: calc(var(--hud-bottom) + 60px); left: auto !important; width: 0; height: 0; z-index: 7; }   /* (elPowAnchor puts it on Jump's middle) */
  body.is-coarse.is-narrow #elpow > button { position: absolute; transform: translate(50%, 50%); }
  body.is-coarse.is-narrow #elpow > button.down { transform: translate(50%, calc(50% + 3px)); }
  body.is-coarse.is-narrow #elpow > button:nth-child(1) { right: 62px; bottom: 58px; }
  body.is-coarse.is-narrow #elpow > button:nth-child(2) { right: 88px; bottom: -6px; }
  body.is-coarse.is-narrow #elpow > button:nth-child(3) { right: 118px; bottom: 62px; }
  body.is-coarse.is-narrow #elpow > button:nth-child(n+4) { right: 6px; bottom: 112px; }
  body.is-coarse.is-narrow #elpow button.pw-main { width: 58px; height: 58px; border-radius: 18px; padding: 4px; }
  body.is-coarse.is-narrow #elpow .pw-main i { font-size: 26px; }
  body.is-coarse.is-narrow #elpow button { width: 46px; padding: 4px 3px; border-radius: 14px; font-size: 10px; }
  body.is-coarse.is-narrow #elpow button b { display: none; }
  body.is-narrow:is(:has(#term:not([hidden])), :has(#panel:not([hidden])), :has(#talk:not([hidden])), :has(#drawer:not([hidden])), :has(#result:not([hidden])), :has(#wardrobe:not([hidden])), :has(#build:not([hidden]))) :is(#elpow, #testplay, .testplay) { visibility: hidden !important; }

  /* ---- phone, pass four: the X stays on the build strip, the summon card is slim, the place bar leads with ✓ Build here */
  body.is-narrow #build { overflow: visible; }
  body.is-narrow #build-done { right: -4px !important; top: -12px !important; width: 34px; height: 34px; }
  body.is-narrow #placehint:has(.lk-ic) { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px; }
  body.is-narrow #placehint > .lk-ic { display: none; }
  body.is-narrow #placehint > .lk-t { flex: 1 1 100%; }
  body.is-narrow #placehint > .lk-t small { display: none; }
  body.is-narrow #placehint .lk-t b { font-size: 15px; }
  body.is-narrow #placehint:has(.lk-ic) button { font-size: 13px; padding: 5px 9px; min-height: 34px; min-width: 0; }
  body.is-narrow #placehint button.phgo { order: -1; flex: 1 1 auto; font-size: 15px; padding: 6px 12px; }
  body.is-narrow #placehint button.phgo:disabled { opacity: .5; filter: grayscale(.4); }
  body.is-narrow #placehint :is([data-a="undo"], [data-a="redo"]) { display: none; }
  body.is-narrow:has(#placehint:not([hidden])) #objchip { display: none !important; }
  body.is-narrow #spell { max-height: 46vh; }
  body.is-narrow #spell :is(#spell-tip, #spell-limit, #spell-mats, #spell-reel) { display: none !important; }
  body.is-narrow #spell #alive-row:has(#alive-hint:not(:empty)):not(:has(~ #behave-row:not([hidden]))) { display: none; }
  body.is-narrow #spell .sp-head b { font-size: 18px; }
  body.is-narrow #spell .sp-foot .btn { padding: 7px 14px; font-size: 15px; min-height: 40px; }
  body.is-narrow #build #cards-rail { display: none; }
  /* a thing's card (tap something you built): a compact strip above the dock, not a big card over the middle */
  body.is-narrow #tag { position: fixed !important; left: var(--hud-inline) !important; right: var(--hud-inline) !important; top: auto !important; bottom: calc(var(--hud-bottom) + 64px) !important; width: auto !important; max-width: none !important; transform: none !important; padding: 10px 12px; border-radius: 18px; z-index: 9; }
  body.is-narrow #tag .tn { font-size: 18px; }
  body.is-narrow #tag .tm { font-size: 12.5px; }
  body.is-narrow #tag .ta { gap: 5px; flex-wrap: wrap; }
  body.is-narrow #tag .ta button { font-size: 13.5px; padding: 6px 10px; min-height: 34px; }
  body.is-narrow #tag .tprim button { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 0; justify-content: center; min-height: 36px; padding: 5px 6px; }
  body.is-narrow #tag .tprim button i { font-size: 15px; font-style: normal; }
  body.is-narrow #tag .tprim button small { display: none; }
  body.is-narrow #tag kbd { display: none; }
  body.is-coarse.is-narrow:has(#tag:not([hidden])) :is(#jumpbtn, #actionbtn) { display: none !important; }
  /* the ring buttons: a row along the bottom-left, by your thumb (the big Ring button first, its helpers beside it) */
  body.is-narrow #ringboardbtn { position: static; }
  body.is-narrow :is(#ringboardbtn, #ringmp, #ringerase, #ringleave, #ringglobe) { width: 38px; height: 38px; border-width: 2.5px; }
  body.is-narrow :is(#ringboardbtn, #ringmp, #ringleave) svg { width: 21px; height: 21px; }

  /* the Ring button on a phone: raised in the middle of the dock (a gap between Make and People), its helpers in a little row
     just above it when they're wanted (the Board, who can come in, leave, wipe the chalk, the globe). In a game, alone at the
     bottom middle */
  body.is-narrow:has(#ringbar:not([hidden])) #tabbar .tab:nth-child(2) { margin-right: 60px; }   /* (the gap is only there while the Ring button is: not in the tutorial) */
  body.is-narrow #ringbar { position: fixed !important; top: auto !important; left: 50% !important; right: auto !important; bottom: calc(var(--hud-bottom) + 10px) !important; transform: translateX(-50%); margin: 0 !important; display: grid; grid-template-columns: repeat(5, auto); grid-auto-flow: column; justify-content: center; align-items: end; gap: 6px; z-index: 9; }
  body.is-narrow #ringbar > :not(#ringbtn) { grid-row: 1; }
  body.is-narrow #ringbar > #ringshape { grid-column: auto; }
  body.is-narrow #ringbar > :is(#ringbtn, #islbtn) { grid-row: 2; grid-column: 1 / -1; justify-self: center; width: 60px; height: 60px; box-shadow: 0 0 0 4px rgba(19,28,92,.35), inset 0 3px 0 rgba(255,255,255,.35), 0 4px 0 var(--edge); }
  body.is-narrow #ringbar > :is(#ringbtn, #islbtn) .rl { font-size: 10px; }
  body.is-narrow #ringbar > #islbtn { margin-left: 66px; } body.is-narrow #ringbar:has(> #islbtn:not([hidden])) > #ringbtn { margin-right: 66px; }   /* (🏝️ the Island button beside the Ring button, the two side by side in the dock's gap) */
  body.is-narrow:has(#ringbar:not([hidden]) > #islbtn:not([hidden])) #tabbar .tab:nth-child(2) { margin-right: 126px; }
  body:is(:has(#placehint:not([hidden])), :has(#spell:not([hidden])), :has(#plan:not([hidden])), :has(#designer:not([hidden]))) #ringbar { visibility: hidden !important; }   /* (while something's in your hand, the Ring buttons step aside) */
  body:has(#placehint[data-bring]:not([hidden])) #sshud .ssh-top { visibility: hidden; }   /* a circle being brought to an island: its bar has the top over the game's values */
  body.is-narrow.ingame #ringbar { bottom: calc(var(--hud-bottom) + 6px) !important; }
  body.is-narrow.ingame #ringbar > #ringbtn { width: 48px; height: 48px; }
  body.is-narrow:is(:has(#build:not([hidden])), :has(#tag:not([hidden])), :has(#talk:not([hidden])), :has(#drawer:not([hidden]))) #ringbar { visibility: hidden; }
  /* the place bar (and the home plot's): one compact strip */
  body.is-narrow #placehint:has(.lk-ic) { gap: 6px 8px; padding: 8px 10px; font-size: 15px; border-radius: 18px; }
  body.is-narrow #placehint .lk-t b { font-size: 16px; }
  body.is-narrow #placehint .lk-t small { font-size: 12px; white-space: normal; }
  body.is-narrow #placehint:has(.lk-ic) button { font-size: 14px; padding: 6px 12px; }
  /* the build panel: smaller chips and cards, so the world still shows above it; the camera buttons go (drag and pinch do it) */
  body.is-narrow .cat { padding: 3px 9px; font-size: 13px; min-height: 32px; gap: 4px; }
  body.is-narrow .cat .ce { font-size: 15px; }
  body.is-narrow .bb-tools .btn.small { padding: 3px 9px; font-size: 13px; min-height: 32px; }
  body.is-coarse.is-narrow #buildcam { display: none !important; }
  /* panels' swatch rows and two-way switches wrap inside the sheet instead of pushing it wider */
  body.is-narrow #term .gtags.brnlook button { font-size: 13px; min-height: 30px; padding: 2px 9px 2px 3px; }
  body.is-narrow #term .elseg button { white-space: normal; min-width: 0; }
  /* the quest pill steps back while a sheet is open over it (it sat on the sheet's title) */
  body.is-narrow:is(:has(#term:not([hidden])), :has(#panel:not([hidden])), :has(#wardrobe:not([hidden])), :has(#map:not([hidden])), :has(#drawer:not([hidden]))) #objchip { visibility: hidden; }