/* =====================================================================================================
   Phones, and tablets held upright (loaded last, after every other stylesheet; everything here sits inside a
   phone-size media query except the touch basics at the top, which are harmless on a desktop).
   The markup is the same as on desktop: renderArena and the menu screens don't change, only the layout does.
   · Upright (portrait, up to 1100px wide): a tall board. Both sides' Legend, Nexus and mana sit in a bar above
     and below the rows; your hand peeks up from the bottom.
   · Sideways (landscape, under 500px tall): the desktop shape, sized from the screen height. Legends and Nexus
     in a slim left column, End turn and mana in a right column.
   · Menus: a bottom tab bar when upright, a slim rail when sideways, and every Play button on screen.
   · Safe areas: sizes subtract env(safe-area-inset-*), so the home-screen app (viewport-fit=cover) keeps clear of
     the notch and the home bar.
   Touch behaviour (press a hand card to lift it, hold a card to read it) is in src/touch.mjs.
   ===================================================================================================== */

/* ---------- touch: the board owns every gesture, no image callouts, no sticky hover ---------- */
.arena{touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.arena img{-webkit-touch-callout:none}
@media (hover:none){
  .hand-slot:hover{z-index:var(--z)}
  .hand-slot:hover .hcard{transform:none}
}
/* Pressing a card in your hand lifts it up big enough to read; drag to play it, let go to put it back. */
.hand-slot.is-pressed{z-index:60}
.hand-slot.is-pressed .hcard{transform:translateY(var(--press-y,-62%)) scale(var(--press,1.6)) rotate(calc(var(--rot) * var(--rk,1) * -1))}
/* Press and hold anything with a card behind it: a ring fills while you hold, then the card opens. */
.lp-ring{position:fixed;z-index:9800;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;pointer-events:none;
  background:conic-gradient(var(--gold1) calc(var(--p,0) * 1turn),rgba(0,0,0,.35) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  filter:drop-shadow(0 0 6px rgba(255,210,120,.8))}

/* ---------- shared phone sizes for the small HUD pieces ---------- */
@media (orientation:portrait) and (max-width:1100px),(orientation:landscape) and (max-height:500px){
  .arena{min-height:0;height:100dvh;box-sizing:border-box}
  .nexus-col,.orb-wrap,.legend-block,.legend-side,.piles{display:contents}
  /* Bigger power/health numbers: the plaques are the one thing you must read at a glance. */
  .uc-pow,.uc-hp{width:52cqw;height:30.6cqw;bottom:-9cqw}
  .uc-pow{left:-7cqw}.uc-hp{right:-7cqw}
  .uc-pow b,.uc-hp b{font-size:23cqw}
  .uc{border-radius:6px}
  .uc-fresh{width:16px;height:16px;right:2px;top:2px}.uc-fresh svg{width:10px;height:10px}
  .slab{border-radius:10px;width:auto}
  .slab::before{inset:3px;border-radius:8px}
  .slab-cards{gap:var(--gap)}
  .slab-count{right:5px;gap:4px}.slab-count i{width:5px;height:5px}
  .field{margin:0;border-radius:14px}
  .lanes{gap:var(--gap);height:min(100%,calc(var(--u-h)*1.88 + 36px))}
  .lane{grid-template-rows:calc(var(--u-h)*.94) minmax(12px,1fr) calc(var(--u-h)*.94)}
  .uc--lane{width:calc(var(--u-w)*.94);height:calc(var(--u-h)*.94)}
  .lane-cell--empty{border-radius:7px}
  .field-hint{bottom:2px;padding:4px 10px;font-size:10.5px;letter-spacing:.08em;white-space:normal;text-align:center;width:max-content;max-width:88%}
  .stack-orb b{font-size:9px}
  .playmat{border-radius:12px}
  .playmat::after{inset:4px;border-radius:9px}
  .pm-corner{width:28px}
  .pm-gem{width:10px;height:10px;margin-top:-5px}.pm-gem--l{left:-5px}.pm-gem--r{right:-5px}
  /* Legend: the art alone (tap or hold to read it), its ability coin and the Champion meter. */
  .legend{width:var(--lg-w);border-width:2px;border-radius:8px;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 6px 14px rgba(0,0,0,.6),0 0 16px color-mix(in srgb,var(--fc) 40%,transparent);z-index:9}
  .legend-art{border-radius:6px}
  .legend-name{display:none}
  .legend-ability,.legend-block--opp .legend-ability{width:calc(26px*var(--k,1));height:calc(26px*var(--k,1));left:auto;right:calc(-10px*var(--k,1));top:calc(-9px*var(--k,1));font-size:calc(14px*var(--k,1));border-width:1.5px}
  .legend-champ{bottom:calc(-8px*var(--k,1));gap:calc(3px*var(--k,1));padding:calc(2px*var(--k,1)) calc(5px*var(--k,1)) calc(2px*var(--k,1)) calc(3px*var(--k,1))}
  .legend-champ svg{width:calc(9px*var(--k,1));height:calc(9px*var(--k,1))}.legend-champ i{width:calc(16px*var(--k,1));height:calc(4px*var(--k,1))}.legend-champ small{font-size:calc(8px*var(--k,1))}
  /* Signature Ally: a small card tucked against its Legend. */
  .bond{width:var(--bw);border-width:1.5px;border-radius:5px;box-shadow:0 4px 10px rgba(0,0,0,.6);z-index:10}
  .bond-cost{width:calc(18px*var(--k,1));height:calc(18px*var(--k,1));left:calc(-6px*var(--k,1));top:calc(-6px*var(--k,1));font-size:calc(11px*var(--k,1));border-width:1px}
  .bond-tag{bottom:2px;font-size:calc(7px*var(--k,1));letter-spacing:.06em}
  /* Deck and graveyard become two counters. */
  .deckpile{width:auto;height:auto;display:flex;align-items:center;gap:calc(5px*var(--k,1));z-index:9}
  .deckpile::before{content:none}
  .deckpile-stack{position:relative;inset:auto;flex:none;width:calc(13px*var(--k,1));height:calc(18px*var(--k,1));border:1px solid var(--gold2);border-radius:2px;box-shadow:1px -1px 0 0 #0d1f33,2px -2px 0 0 var(--gold3)}
  .deckpile b{margin:0;padding:calc(2px*var(--k,1)) calc(7px*var(--k,1));font-size:calc(12px*var(--k,1));border-width:1px}
  .gravepile{width:auto;aspect-ratio:auto;display:flex;align-items:center;gap:calc(3px*var(--k,1));padding:calc(2px*var(--k,1)) calc(8px*var(--k,1)) calc(2px*var(--k,1)) calc(5px*var(--k,1));border-radius:999px;border-width:1px;overflow:visible;z-index:9}
  .gravepile-top{display:none}
  .gravepile svg{width:calc(12px*var(--k,1))}
  .gravepile b{position:static;translate:none;padding:0;border:0;background:none;font-size:calc(12px*var(--k,1))}
  .nexus{width:var(--nx)}
  .nexus::after{inset:3px}
  .nexus b{font-size:calc(var(--nx)*.44)}
  .atk-token{width:calc(20px*var(--k,1));height:calc(20px*var(--k,1));border-width:1.5px;z-index:9}.atk-token svg{width:calc(10px*var(--k,1));height:calc(10px*var(--k,1))}
  .mana-num{gap:calc(4px*var(--k,1));padding:calc(3px*var(--k,1)) calc(9px*var(--k,1)) calc(3px*var(--k,1)) calc(6px*var(--k,1));font-size:calc(15px*var(--k,1));border-width:1px;z-index:12}
  .mana-pills{flex-direction:column;align-items:stretch;gap:calc(3px*var(--k,1));z-index:12}
  .mana-num small{font-size:calc(10px*var(--k,1))}
  .mana-gem{width:calc(10px*var(--k,1));height:calc(14px*var(--k,1))}
  .orb-shell{--r:calc(var(--u-w)*.46);width:var(--orb-w);height:var(--orb-w);z-index:12}
  .rg{width:7px;height:10px;margin:-5px 0 0 -3.5px;transform:rotate(var(--a)) translateY(calc(var(--r) * -1 - 7px))}
  .spellmana{gap:2px}.sm{width:6px;height:6px}
  .spellmana--top{top:-1px}.spellmana--bottom{bottom:-1px}
  .orb{border-width:2.5px}
  .orb span,.orb.is-wait span{padding:0 3px;font-size:max(10px,calc(var(--r)*.32));letter-spacing:.04em}
  .turn-clock{width:calc(var(--r)*2 + 4px);height:calc(var(--r)*2 + 4px)}
  .round-no{min-width:0;padding:calc(5px*var(--k,1)) calc(9px*var(--k,1)) calc(4px*var(--k,1));gap:calc(2px*var(--k,1));border-width:1.5px;z-index:9}
  .round-no::before{left:6px;right:6px;top:2px;height:1.5px}
  .round-no b{font-size:calc(11px*var(--k,1));letter-spacing:.1em}.round-no small{font-size:calc(8.5px*var(--k,1))}
  .has-combat .round-no{opacity:0;pointer-events:none}
  /* Only what matters right now: an empty graveyard and a deck that isn't running low stay hidden. Both mana pills
     (mana and spell mana) always show, as on desktop. The attack coin goes: units that can attack already glow.
     (view.mjs marks a deck of 10 or fewer cards .is-low.) */
  .gravepile.is-empty,.deckpile:not(.is-low),.atk-token{display:none}
  .corner{padding:0;z-index:30}
  .icon-btn{width:calc(34px*var(--k,1));height:calc(34px*var(--k,1))}.icon-btn svg{width:calc(17px*var(--k,1));height:calc(17px*var(--k,1))}
  /* The opponent's hand: a small fan with its count always showing. */
  .hand--opp .back:nth-child(n+8){display:none}
  .oh-count{opacity:1;top:auto;bottom:-4px;translate:-50% 0;padding:0;gap:0;font-size:0;border-width:1px;background:none;border:0;box-shadow:none}
  .oh-count b{min-width:calc(20px*var(--k,1));height:calc(20px*var(--k,1));font-size:calc(12px*var(--k,1));box-shadow:0 0 0 1.5px #0b0f12,0 3px 8px rgba(0,0,0,.6)}
  .oh-count small{display:none}
  .hand--opp:hover .oh-count,.hand--opp:focus .oh-count{translate:-50% 0}
  /* Your hand */
  .hand--me{padding:0 8px}
  .hand-slot{--rk:.45;transform:translateY(calc(var(--lift) * .5)) rotate(calc(var(--rot) * var(--rk)))}
  .hand-slot:hover .hcard,.hcard:focus-visible{transform:translateY(-50%) scale(1.45) rotate(calc(var(--rot) * var(--rk) * -1))}
  .hcard{border-radius:8px}
  /* Opening hand, coin toss, menu */
  .mull,.toss,.effect-pick{gap:12px;padding:0 12px}
  .mull h2,.toss h2{font-size:24px}
  .mull-sub{font-size:12px;margin:-6px 0 0}
  .toss-note{font-size:13px}
  .mull-actions .gbtn,.toss-actions .gbtn{min-width:140px;padding:12px 20px;font-size:15px}
  .mull-x{padding:6px 10px;font-size:12px}
  .menu{min-width:0;width:min(300px,86vw);padding:18px}
  .gbtn{min-width:0}
}

/* ================================================================== UPRIGHT: a tall board */
@media (orientation:portrait) and (max-width:1100px){
  .arena,#board-scene{
    --pad:clamp(6px,2vw,18px);--gap:clamp(4px,1.4vw,12px);
    --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
    /* Unit width: five across (with room for the row's end), or whatever the height allows. */
    --u-w:min(calc((100vw - var(--pad)*2 - 16px - var(--gap)*4) / 5),calc((100dvh - var(--safe-t) - var(--safe-b) - 66px) / 8.55),120px);
    --u-h:calc(var(--u-w)*1.4);
    --h-w:calc(var(--u-w)*1.15);--h-h:calc(var(--h-w)*1.4);
    --lg-w:calc(var(--u-w)*.64);--bw:calc(var(--u-w)*.52);--nx:calc(var(--u-w)*.66);
    --end-w:calc(var(--u-w)*1.5);--end-h:calc(var(--u-w)*.6);          /* the End turn pill */
    --so:calc(var(--lg-w)*4/3 + 12px);                                   /* enemy bar */
    --sm:calc(var(--lg-w)*4/3 + 12px);                                   /* your bar */
    --hp:calc(var(--h-h)*.86);                                           /* how much of your hand shows: cost, art, name, the top of the text */
    --split:calc(50dvh + (var(--safe-t) - var(--safe-b)) / 2 + (var(--so) - var(--sm) - var(--hp)) / 2);
    /* x positions along the bars */
    --x-nexus:calc(var(--pad) + var(--lg-w) - 12px);                     /* Nexus overlaps its Legend's edge */
    --x-ally:calc(var(--x-nexus) + var(--nx) + 6px);                     /* then the Signature Ally */
    --x-piles:calc(var(--x-ally) + var(--bw) + 10px);                    /* then graveyard and deck */
    --mana-w:calc(56px*var(--k,1));
  }
  /* Upright tablets: the small counters and buttons grow with the board. */
  @media (min-width:600px){.arena{--k:1.55}}
  /* Each bar sits on a soft dark band, so its pieces read as one group instead of loose pills on the grass. */
  .arena{padding:var(--safe-t) 0 var(--safe-b);
    background:linear-gradient(180deg,rgba(5,8,10,.72),rgba(5,8,10,.4) calc(var(--safe-t) + var(--so) - 12px),transparent calc(var(--safe-t) + var(--so) + 8px)),
      linear-gradient(0deg,rgba(5,8,10,.8),rgba(5,8,10,.45) calc(var(--safe-b) + var(--hp) + var(--sm) - 14px),transparent calc(var(--safe-b) + var(--hp) + var(--sm) + 8px));
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:var(--so) calc(var(--u-h) + 12px) minmax(calc(var(--u-h)*1.88 + 16px),1fr) calc(var(--u-h) + 12px) var(--sm) var(--hp);
    grid-template-areas:"top" "slabo" "field" "slabme" "bar" "handme"}
  .playmat{grid-column:1;grid-row:2/5;margin:-3px 3px}
  .slab{width:calc(100% - var(--pad)*2);height:calc(var(--u-h) + 10px)}
  .field{margin:0 var(--pad)}
  .legend-champ{left:-3px;translate:0 0}
  .nexus{z-index:10}

  /* Both bars read the same way, left to right. The player: Legend with their Nexus on its edge, their Signature
     Ally, then graveyard and deck. Then what they spend: mana. Then End turn (yours) or the menu (theirs); the
     enemy's hand sits just before their mana. */
  .legend-block--opp .legend{grid-area:top;justify-self:start;align-self:center;margin-left:var(--pad)}
  .nexus--opp{grid-area:top;justify-self:start;align-self:end;margin:0 0 4px var(--x-nexus)}
  .legend-block--opp .bond{grid-area:top;justify-self:start;align-self:center;margin-left:var(--x-ally)}
  .legend-block--opp .gravepile{grid-area:top;justify-self:start;align-self:start;margin:10px 0 0 var(--x-piles)}
  .legend-block--opp .deckpile{grid-area:top;justify-self:start;align-self:end;margin:0 0 10px var(--x-piles)}
  .hand--opp{grid-area:top;justify-self:end;align-self:center;margin-right:calc(var(--pad) + 42px*var(--k,1) + var(--mana-w) + 18px)}
  .hand--opp .back,.hand--opp:hover .back,.hand--opp:focus .back{width:calc(var(--u-w)*.36);height:calc(var(--u-w)*.5);margin:0 calc(var(--u-w)*-.1);border-width:1px;border-radius:3px;
    transform:translateY(calc(var(--lift) * .2)) rotate(calc(var(--rot) * 1.6));transform-origin:50% 160%}
  .hand--opp .back::after{display:none}
  .arena>.corner{grid-area:top;justify-self:end;align-self:center;margin-right:var(--pad)}
  .mana-pills--opp,.orb-wrap>.mana-num--opp{grid-area:top;justify-self:end;align-self:center;margin-right:calc(var(--pad) + 42px*var(--k,1))}

  .legend-block--me .legend{grid-area:bar;justify-self:start;align-self:center;margin-left:var(--pad)}
  .nexus--me{grid-area:bar;justify-self:start;align-self:end;margin:0 0 4px var(--x-nexus)}
  .legend-block--me .bond{grid-area:bar;justify-self:start;align-self:center;margin-left:var(--x-ally)}
  .legend-block--me .gravepile{grid-area:bar;justify-self:start;align-self:start;margin:10px 0 0 var(--x-piles)}
  .legend-block--me .deckpile{grid-area:bar;justify-self:start;align-self:end;margin:0 0 10px var(--x-piles)}
  .mana-pills--me,.orb-wrap>.mana-num--me{grid-area:bar;justify-self:end;align-self:center;margin-right:calc(var(--pad) + var(--end-w) + 8px)}
  /* End turn is a pill (it also says Attack, Block, OK, Pass or the enemy's move); long labels take two lines. */
  .orb-shell{grid-area:bar;justify-self:end;align-self:center;width:auto;height:auto;margin-right:var(--pad)}
  .orb{width:var(--end-w);height:var(--end-h);border-radius:999px;border-width:3px}
  .orb span,.orb.is-wait span{padding:0 6px;font-size:clamp(12px,calc(var(--u-w)*.2),19px);line-height:1.02;letter-spacing:.06em}
  /* The online turn timer drains around the pill's edge; its seconds sit just above it. */
  .turn-clock{width:calc(100% + 8px);height:calc(100% + 8px);border-radius:999px}
  .turn-clock i{border-radius:999px;padding:4px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
  .turn-clock b{top:auto;bottom:calc(100% + 2px)}
  /* Whose turn: a small plate at the left end of the battle line. */
  .round-no{grid-area:field;justify-self:start;align-self:center;margin-left:calc(var(--pad) + 4px)}

  /* In combat the lanes span the whole width, so the hint rides the battle line between them, on one line. */
  .field.has-combat .field-hint{left:50%;right:auto;top:50%;bottom:auto;translate:-50% -50%;max-width:96%;padding:3px 10px;white-space:nowrap;line-height:1.2;z-index:6}
  .field.has-combat .field-hint span,.field.has-combat .field-hint i{display:inline}
  /* Your hand: a row of cards at a size you can read. When they don't all fit, swipe it sideways (touch.mjs tells a
     sideways swipe from an upward drag, which still plays the card). Pressing a card shows it big above the row,
     since a scrolling row can't lift a card out of itself; a tag says how many you hold while some are out of view. */
  .hand--me{grid-area:handme;justify-content:flex-start;align-items:flex-start;gap:5px;padding:6px 10px 0;overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;scrollbar-width:none}
  .hand--me::-webkit-scrollbar{display:none}
  .hand--me.is-scrolling{-webkit-mask:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 26px),transparent);mask:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 26px),transparent)}
  .hand--me .hand-slot:first-child{margin-left:auto}.hand--me .hand-slot:last-child{margin-right:auto}
  .hand-slot,.hand-slot:hover{margin-block:0;transform:none}
  .hand-slot .hcard,.hand-slot:hover .hcard,.hand-slot.is-pressed .hcard,.hcard:focus-visible{transform:none}
  .hand-slot.is-pressed .hcard{filter:brightness(1.18)}
  .arena .hand--me .hcard,.arena .hand--me .hcard[data-source]{touch-action:pan-x}
  .hand-more{grid-area:handme;justify-self:end;align-self:start;z-index:25;display:flex;align-items:center;gap:3px;margin:12px 6px 0 0;padding:4px 8px 4px 6px;border-radius:999px;
    background:rgba(8,10,12,.9);border:1px solid rgba(215,166,83,.6);box-shadow:0 4px 10px rgba(0,0,0,.6);font:700 12px/1 var(--cond);letter-spacing:.06em;color:#f3e7c8;pointer-events:none}
  .hand-more svg{width:12px;height:12px}
  .hand-more[hidden]{display:none}
  .hand-peek{position:fixed;left:50%;z-index:70;width:min(46vw,200px);aspect-ratio:5/7;translate:-50% 0;pointer-events:none;filter:drop-shadow(0 16px 30px rgba(0,0,0,.85))}
  .hand-peek>*{width:100%;height:100%}

  .mull-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(92vw,calc((100dvh - 250px) / 2.8 * 2 + 12px))}
  .mull-card{width:auto}
  .toss-coin{width:clamp(110px,34vw,170px)}
}

/* ================================================================== SIDEWAYS: a short board */
@media (orientation:landscape) and (max-height:500px){
  .arena,#board-scene{
    --gap:8px;
    --safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);
    /* The height sets everything: two rows, the two-deep battle lanes and a strip of hand. */
    --u-w:clamp(40px,calc((100dvh - var(--safe-b) - 42px) / 6.25),76px);
    --u-h:calc(var(--u-w)*1.4);
    --h-w:calc(var(--u-w)*1.18);--h-h:calc(var(--h-w)*1.4);
    --lg-w:calc(var(--u-w)*1.02);--bw:calc(var(--u-w)*.64);--nx:calc(var(--u-w)*.78);
    --orb-w:calc(var(--u-w)*1.08 + 26px);
    --lw:calc(var(--lg-w) + 24px);   /* left column */
    --rw:calc(var(--orb-w) + 14px);  /* right column */
    --po:12px;                       /* enemy hand showing at the top */
    --hp:calc(var(--h-h)*.48);       /* your hand showing at the bottom: cost and art */
    --split:calc(50dvh - var(--safe-b) / 2 + (var(--po) - var(--hp)) / 2);
  }
  .arena{padding:0 var(--safe-r) var(--safe-b) var(--safe-l);
    grid-template-columns:var(--lw) minmax(0,1fr) var(--rw);
    grid-template-rows:var(--po) calc(var(--u-h) + 8px) minmax(calc(var(--u-h)*1.88 + 12px),1fr) calc(var(--u-h) + 8px) var(--hp);
    grid-template-areas:"lb hando rb" "lb slabo rb" "lb field rb" "lb slabme rb" "lb handme rb"}
  .playmat{grid-column:2;grid-row:2/5;margin:-3px 0}
  .slab{width:calc(var(--u-w)*5 + var(--gap)*4 + 28px);max-width:100%}
  .field{margin:0 6px}

  /* left column: their Legend, their Nexus, whose turn, your Nexus, your Legend */
  .legend-block--opp .legend{grid-area:1/1/3/2;justify-self:center;align-self:start;margin-top:8px}
  .nexus--opp{grid-area:field;grid-column:1;justify-self:center;align-self:start;margin-top:2px}
  .round-no{grid-area:field;grid-column:1;justify-self:center;align-self:center;max-width:calc(var(--lw) - 4px)}
  .round-no b{font-size:10px;letter-spacing:.06em;white-space:normal;text-align:center}
  .nexus--me{grid-area:field;grid-column:1;justify-self:center;align-self:end;margin-bottom:2px}
  .legend-block--me .legend{grid-area:4/1/6/2;justify-self:center;align-self:end;margin-bottom:10px}
  .nexus--opp+.atk-token{grid-area:field;grid-column:1;justify-self:end;align-self:start;margin:2px -2px 0 0}
  .round-no+.atk-token{grid-area:field;grid-column:1;justify-self:end;align-self:end;margin:0 -2px 2px 0}
  /* right column: menu, their mana, End turn, your mana */
  .arena>.corner{grid-area:1/3/3/4;justify-self:end;align-self:start;margin:8px 8px 0 0}
  .mana-pills--opp,.orb-wrap>.mana-num--opp{grid-area:slabo;grid-column:3;justify-self:center;align-self:end;margin-bottom:4px}
  .orb-shell{grid-area:field;grid-column:3;justify-self:center;align-self:center;--r:calc(var(--u-w)*.56)}
  .mana-pills--me,.orb-wrap>.mana-num--me{grid-area:slabme;grid-column:3;justify-self:center;align-self:start;margin-top:4px}
  /* beside the rows: each side's Ally on the left end, deck and graveyard on the right end */
  .legend-block--opp .bond{grid-area:slabo;justify-self:start;align-self:center;margin-left:10px}
  .legend-block--me .bond{grid-area:slabme;justify-self:start;align-self:center;margin-left:10px}
  .legend-block--opp .deckpile{grid-area:slabo;justify-self:end;align-self:start;margin:10px 8px 0 0}
  .legend-block--opp .gravepile{grid-area:slabo;justify-self:end;align-self:end;margin:0 8px 10px 0}
  .legend-block--me .deckpile{grid-area:slabme;justify-self:end;align-self:start;margin:10px 8px 0 0}
  .legend-block--me .gravepile{grid-area:slabme;justify-self:end;align-self:end;margin:0 8px 10px 0}

  .hand--opp{grid-area:hando}
  .hand--opp .back{width:calc(var(--u-w)*.5);height:calc(var(--u-w)*.7);margin:0 calc(var(--u-w)*-.1);border-width:1px;border-radius:4px}
  .hand--opp .back::after{display:none}
  .oh-count{top:0;bottom:auto;translate:-50% 2px}
  .hand--opp:hover .oh-count,.hand--opp:focus .oh-count{translate:-50% 2px}
  .hand--me{grid-area:handme}
  .hand-slot{margin-inline:min(-1px,calc(((100vw - var(--lw) - var(--rw) - var(--safe-l) - var(--safe-r) - 24px) / var(--n) - var(--h-w)) / 2))}
  .hand-slot{--press:2.1;--press-y:-78%}

  .mull h2,.toss h2{font-size:20px}
  .mull-cards{gap:10px}
  .mull-card{width:min(19vw,calc((100dvh - 150px) / 1.4))}
  .toss-coin{width:clamp(80px,28dvh,130px)}
}

/* ================================================================== menus */
/* Top bar on phones: a small face, your coins, and the four icons. */
@media (max-width:700px),(orientation:landscape) and (max-height:500px){
  .topbar{height:58px;padding-top:env(safe-area-inset-top,0px)}
  .avatar{width:42px;left:10px;top:calc(env(safe-area-inset-top,0px) + 8px);border-width:2.5px;box-shadow:0 0 0 2px rgba(0,0,0,.6),0 6px 14px rgba(0,0,0,.6)}
  .who{display:none}
  .pills{display:flex;left:62px;top:calc(env(safe-area-inset-top,0px) + 16px);gap:6px;padding-right:0}
  .pills::before,.pills::after{display:none}
  .pills .pill:nth-child(n+2){display:none}
  .pill{min-width:0;padding:3px 10px 3px 4px;gap:5px;font-size:15px;border-width:1.5px;border-radius:8px}
  .pill-ico{width:20px;height:20px}
  .pill small{display:none}
  .top-icons{top:calc(env(safe-area-inset-top,0px) + 12px);right:10px;gap:10px}
  .top-ico{width:32px}
  .hub-brand{display:flex}
}
/* Upright: a bottom tab bar with Home back in it. */
@media (max-width:700px) and (orientation:portrait){
  :root{--tabbar:calc(60px + env(safe-area-inset-bottom,0px))}
  .railnav{height:var(--tabbar);padding:0 0 env(safe-area-inset-bottom,0px);box-shadow:0 -8px 24px rgba(0,0,0,.55);border-top:1px solid rgba(215,166,83,.55)}
  .railnav .rail-crest{display:flex}
  .railnav img{width:30px}
  .railnav b{padding:2px 7px;font-size:10px;letter-spacing:.1em}
  .railnav button.active::before{left:28%;right:28%;top:0;bottom:auto;width:auto;height:3px;border-radius:0 0 3px 3px}
  .railnav .rail-badge{left:calc(50% + 8px);top:3px;min-width:18px;height:18px;font-size:11px}
  main{padding-bottom:var(--tabbar)}
  body[data-screen="battle"] main,body[data-screen="login"] main{padding-bottom:0}
  /* Home: logo up top, the Learn card under it, Play and the three quick buttons at the bottom. */
  .hub{height:calc(100dvh - var(--tabbar));min-height:0}
  .hub-brand{left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 70px);bottom:auto;justify-content:center;gap:10px}
  .hub-mark{width:34px;height:34px;font-size:16px}
  .hub-brand b{font-size:26px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.95))}.hub-brand small{font-size:10px;letter-spacing:.34em}
  .hub-learn{top:calc(env(safe-area-inset-top,0px) + 124px);left:12px;right:12px;padding:8px 10px 8px 8px;gap:10px}
  .hub-learn-face{width:46px;height:46px}
  .hub-learn-text b{font-size:17px}
  .hub-learn-go{width:34px;height:34px}
  .hub-actions{left:12px;right:12px;bottom:12px;gap:10px}
  .hub-play{display:flex;flex-direction:column;gap:8px}
  .hub-play .fbtn--big{min-width:0;width:100%;min-height:92px;padding:14px 18px 14px 22px;row-gap:12px}
  .hub-play .fbtn--big span{font-size:30px}
  .hub-sub{flex-direction:row;min-width:0;gap:8px}
  .hub-sub .fbtn{flex:1 1 0;min-width:0;min-height:62px;flex-direction:column-reverse;justify-content:center;gap:5px;padding:8px 4px}
  .hub-sub .fbtn span{font-size:13px;white-space:normal;text-align:center;line-height:1.05}
  .hub-sub .fbtn i{width:22px;height:22px}
  .hub-sub .fbtn .badge{right:-4px;top:-8px;min-width:22px;height:22px;font-size:12px}
  /* Play: the deck grid scrolls between the modes and a Play bar that never leaves the screen. */
  .play{height:calc(100dvh - var(--tabbar));min-height:0;padding:calc(env(safe-area-inset-top,0px) + 64px) 12px 10px;display:flex;flex-direction:column}
  .play-art{width:100%;opacity:.3}
  .play-body{display:flex;flex-direction:column;gap:10px;flex:1;min-height:0}
  .play-modes{flex-direction:row;flex-wrap:wrap;gap:6px}
  .play-modes .play-h{display:none}
  .play-mode{flex:1 1 0;width:auto;align-items:center;justify-content:center;padding:10px 2px;border-radius:5px}
  .play-mode b{font-size:14px;letter-spacing:.06em}
  .play-mode small,.play-mode-emblem{display:none}
  .play-modes .opp{flex-basis:100%;flex-direction:row;align-items:center;justify-content:space-between;margin:0;font:700 12px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .play-modes .opp select{flex:0 1 60%}
  .play-decks{flex:1;min-height:0}
  .play-decks .play-h{margin-bottom:8px;font-size:11px}
  .play-scroll{overflow-y:auto;margin:0 -4px;padding:4px 4px 10px}
  .play-scroll .deck-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .play-scroll .deck-tile{aspect-ratio:3/4;border-width:2px;border-radius:7px}
  .play-scroll .deck-tile b{font-size:12px;padding:0 7px}
  .deck-tile small{font-size:9px;padding:0 7px 7px;letter-spacing:.08em}
  .play-scroll .deck-tile-legend{width:24px;height:24px;left:6px;top:6px;border-width:1.5px}
  .deck-picked em,.deck-lock em{font-size:9px}
  .play-foot{flex-wrap:nowrap;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(215,166,83,.3)}
  .play-sel{gap:8px}
  .play-sel-face{width:42px;border-width:2px}
  .play-sel b{font-size:15px}.play-sel small{font-size:10px;letter-spacing:.06em;margin-top:3px}
  .play-sel p{display:none}
  .play-foot .fbtn--go{width:auto;min-width:0;min-height:56px;margin:0;padding:0 14px 0 18px;flex:none}
  .play-foot .fbtn--go span{font-size:22px}
  /* Picking a cup deck: "Join the Crown Cup" is too long to share the bar, so it gets its own row under the deck. */
  .play--cup .play-foot{flex-wrap:wrap}
  .play--cup .play-foot .fbtn--go{flex:1 1 100%;justify-content:space-between}
  /* Collection: three cards across, filters in one sideways-scrolling row. */
  .page{min-height:calc(100dvh - var(--tabbar));padding:calc(env(safe-area-inset-top,0px) + 14px) 10px 20px}
  .page-tabs{margin-bottom:10px;gap:4px;flex-wrap:nowrap}
  .page-tabs button{flex:1;padding:9px 6px;font-size:13px;letter-spacing:.08em}
  .col-filters{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:0 -10px;padding:0 10px 2px;scrollbar-width:none}
  .col-filters input{flex:0 0 130px;min-width:0}
  .col-filters .seg{flex:none}
  .col-filters .seg button{padding:9px 10px;font-size:12px}
  .col-regions{flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:8px -10px 12px;padding:0 10px 2px;scrollbar-width:none}
  .rchip{flex:none;padding:7px 11px;font-size:11px}
  .col-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 8px}
  .col-owned{font-size:10px;bottom:-8px;padding:2px 6px}
  .deck-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}
/* Sideways: a slim rail, and the Home and Play pieces packed into one screen height. */
@media (orientation:landscape) and (max-height:500px){
  :root{--rail:calc(66px + env(safe-area-inset-left,0px))}
  .railnav{padding:4px 0 4px env(safe-area-inset-left,0px)}
  .railnav button{gap:3px;padding:2px}
  .railnav img{width:28px}
  .railnav b{padding:2px 5px;font-size:9px;letter-spacing:.03em}
  .railnav .rail-badge{left:calc(50% + 6px);top:0;min-width:18px;height:18px;font-size:11px}
  .hub{height:100dvh;min-height:0}
  .hub-brand{left:16px;bottom:14px}
  .hub-mark{width:30px;height:30px;font-size:14px}.hub-brand b{font-size:20px}.hub-brand small{font-size:9px;letter-spacing:.3em}
  .hub-learn{top:66px;left:14px;max-width:min(330px,42vw);padding:7px 10px 7px 7px;gap:9px}
  .hub-learn-face{width:40px;height:40px}.hub-learn-text b{font-size:15px}.hub-learn-text small,.hub-learn-text em{font-size:10px}
  .hub-learn-go{width:30px;height:30px}
  .hub-pass{display:none}
  .hub-actions{right:14px;left:auto;bottom:12px;width:min(330px,44vw);flex-direction:column;gap:8px}
  .hub-play{display:flex;flex-direction:column;gap:6px}
  .queue-switch button{min-height:32px}
  .hub-play .fbtn--big{min-width:0;width:100%;min-height:78px;padding:10px 16px 10px 20px;row-gap:9px}
  .hub-play .fbtn--big span{font-size:24px}
  .hub-sub{flex-direction:row;min-width:0;gap:6px}
  .hub-sub .fbtn{flex:1 1 0;min-width:0;min-height:48px;padding:4px 6px;gap:4px;flex-direction:column-reverse;justify-content:center}
  .hub-sub .fbtn span{font-size:12px;white-space:normal;text-align:center;line-height:1.05}
  .hub-sub .fbtn i{width:18px;height:18px}
  .hub-sub .fbtn .badge{right:-4px;top:-8px;min-width:20px;height:20px;font-size:11px}
  .play{height:100dvh;min-height:0;padding:62px 14px 10px 14px}
  .play-body{grid-template-columns:132px minmax(0,1fr);gap:12px}
  .play-h{margin-bottom:6px;font-size:11px}
  .play-modes{gap:6px}
  .play-modes .play-h{display:none}
  .play-modes{overflow-y:auto;min-height:0}
  .play-mode{padding:7px 10px;border-radius:5px}.play-mode b{font-size:14px}.play-mode small,.play-mode-emblem{display:none}
  .play-modes .opp{margin-top:2px;gap:4px;font:700 11px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  .play-modes .opp select{padding:5px 8px}
  .play-scroll .deck-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
  .play-scroll .deck-tile b{font-size:11px;padding:0 6px}
  .deck-tile small{font-size:8.5px;padding:0 6px 6px}
  .play-scroll .deck-tile-legend{width:22px;height:22px;left:5px;top:5px}
  .play-foot{margin-top:8px;gap:12px}
  .play-sel-face{width:40px}.play-sel b{font-size:15px}.play-sel small{font-size:10px}.play-sel p{display:none}
  .play-foot .fbtn--go{min-width:190px;min-height:50px}
  /* Collection: tabs and filters share one line, the Trait chips a second, so the cards get the height. */
  .page:has(> .col-filters):not(.collection),.deck-editor .col-main{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px 10px}
  .page{padding:10px 14px 16px}
  .page-tabs{flex:none;margin:0;gap:4px}.page-tabs button{padding:7px 12px;font-size:12px}
  .col-filters{flex:1 1 0;min-width:0;flex-wrap:nowrap;overflow-x:auto;gap:8px;scrollbar-width:none}
  .col-filters input{flex:0 0 120px;min-width:0;min-height:0;padding:6px 10px}
  .col-filters .seg{flex:none}.col-filters .seg button{padding:7px 9px;font-size:12px}
  .col-regions{flex:0 0 100%;flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:0;scrollbar-width:none}
  .rchip{flex:none;padding:5px 10px;font-size:11px}
  .col-grid{flex:0 0 100%}
  .col-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px 8px}
}
/* The card close-up fits the screen either way up. */
@media (max-width:700px),(orientation:landscape) and (max-height:500px){
  dialog#inspector{max-width:100vw;max-height:100dvh;overflow:visible}
  .inspection{gap:10px}
  .tilt{width:min(78vw,calc((100dvh - 110px) / 1.4))}
  .tilt--lvl{width:min(44vw,calc((100dvh - 110px) / 1.4 * .72))}
  /* A Champion shows both levels side by side. */
  .inspection:has(.tilt--lvl){flex-wrap:nowrap}
  .inspection:has(.tilt--lvl) .tilt:not(.tilt--lvl){width:min(52vw,calc((100dvh - 60px) / 1.4))}
  .inspection:has(.tilt--lvl) .tilt--lvl{width:min(38vw,calc((100dvh - 60px) / 1.4 * .72))}
  .flavor{font-size:13px;max-width:86vw}
  .close{right:-6px;top:-6px;width:38px;height:38px}
}

/* ================================================================== Learn */
/* Upright: the lesson road becomes a list, one row per lesson, strung on a gold line down the left. The Start bar
   stays pinned above the tabs, like Play's. */
@media (max-width:700px) and (orientation:portrait){
  .learn{height:calc(100dvh - var(--tabbar));min-height:0;padding:calc(env(safe-area-inset-top,0px) + 64px) 12px 10px;display:flex;flex-direction:column}
  .learn .play-art{width:100%;opacity:.3}
  .ln-head{gap:8px 10px;align-items:center}
  .ln-head .play-h{margin:0;font-size:13px}
  .ln-head .play-h small{display:block;margin:4px 0 0;font-size:11px}
  .ln-intro{display:none}
  .ln-meter{flex:1 1 100%;order:3;margin:0;height:6px}
  .ln-rules-btn{margin-left:auto;padding:7px 12px;font-size:13px;gap:6px}.ln-rules-btn svg{width:16px;height:16px}
  .ln-scroll{flex:1;min-height:0;display:block;overflow-x:hidden;overflow-y:auto;margin:8px -12px 0;padding:0 12px;scroll-snap-type:none}
  .ln-road{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr);gap:8px;margin:0;padding:6px 0 10px}
  .ln-road::before{left:21px;right:auto;top:14px;bottom:14px;width:3px;height:auto;transform:none;background:linear-gradient(180deg,var(--gold2),var(--gold1) 50%,var(--gold2))}
  .ln-stop{scroll-snap-align:none}
  .ln-card,.ln-card:hover,.ln-card.is-on{transform:none}
  .ln-num{left:21px;top:50%;translate:-50% -50%;width:34px;height:34px;font-size:16px;border-width:2px}
  .ln-num svg{width:16px;height:16px}
  .ln-card::after{border-radius:10px}
  .ln-frame{aspect-ratio:auto;min-height:74px;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;padding:8px 10px 8px 48px;margin-left:0;border-width:2px;border-radius:10px}
  .ln-art{left:auto;right:0;width:58%;-webkit-mask:linear-gradient(90deg,transparent,#000 60%);mask:linear-gradient(90deg,transparent,#000 60%)}
  .ln-shade{background:linear-gradient(90deg,rgba(6,8,10,.96) 35%,rgba(6,8,10,.55) 70%,transparent),radial-gradient(80% 120% at 0% 50%,color-mix(in srgb,var(--fc) 40%,transparent),transparent 70%)}
  .ln-text{flex:1;min-width:0;gap:3px}
  .ln-text b{font-size:17px}
  .ln-text small{font-size:12px;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .ln-unlock{display:none}
  .ln-tag{align-self:center;flex:none;padding:4px 8px 4px 5px;font-size:11px}
  .learn .play-foot{flex-wrap:nowrap;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(215,166,83,.3)}
  .learn .play-sel p,.learn .play-sel .ln-chips{display:none}
  .learn .play-foot .fbtn--go{width:auto;min-width:0;min-height:56px;margin:0;padding:0 14px 0 18px;flex:none}
  .learn .play-foot .fbtn--go span{font-size:20px}
  .ln-go--locked span{font-size:15px}
}
/* Sideways: the road stays a road, with cards sized from the height. */
@media (orientation:landscape) and (max-height:500px){
  .learn{height:100dvh;min-height:0;padding:60px 14px 10px}
  .ln-head{gap:10px;align-items:center;flex-wrap:nowrap}
  .ln-head .play-h{margin:0;font-size:12px}
  .ln-intro{display:none}
  .ln-meter{flex:1 1 auto;margin:0;height:6px}
  .ln-rules-btn{padding:6px 10px;font-size:12px}.ln-rules-btn svg{width:15px;height:15px}
  .ln-scroll{margin:0 -14px;padding:0 14px}
  .ln-road{grid-auto-columns:calc((100dvh - 190px) * .72);gap:10px;padding:22px 4px 6px}
  .ln-road::before{top:22px;left:calc((100dvh - 190px) * .36);right:calc((100dvh - 190px) * .36)}
  .ln-num{width:30px;height:30px;font-size:14px;border-width:2px}.ln-num svg{width:14px;height:14px}
  .ln-frame{aspect-ratio:auto;height:calc(100dvh - 190px);padding:8px;gap:4px;border-width:2px;border-radius:9px}
  .ln-text b{font-size:13px}.ln-text small,.ln-unlock{display:none}
  .ln-tag{font-size:10px;padding:3px 7px 3px 5px}
  .learn .play-foot{margin-top:6px}
  .learn .play-sel p{display:none}
  .learn .play-foot .fbtn--go{min-width:170px;min-height:48px}
}

/* ================================================================== Collection: decks and the deck editor */
@media (max-width:700px) and (orientation:portrait),(orientation:landscape) and (max-height:500px){
  .deck-tile{border-width:2px;border-radius:7px}
  .deck-tile b{font-size:13px;padding:0 7px;letter-spacing:.04em}
  .deck-tile small{font-size:9px;padding:0 7px 7px;letter-spacing:.08em}
  .deck-tile-legend{width:24px;height:24px;left:6px;top:6px;border-width:1.5px}
  .deck-tile--new .plus{width:44px;height:44px;border-width:2px;font-size:30px}
  .deck-tile--new b{font-size:13px}
  .deck-editor .de-hint{display:none}
}
/* Upright: the pool on the left (two across) and your deck in a column on the right that scrolls by itself, headed by
   its Legend and Champion. The deck's name and count ride in a bar pinned to the top, with Back; Save and Undo float
   above the tabs once something changes. */
@media (max-width:700px) and (orientation:portrait){
  .deck-editor.collection{display:grid;grid-template-columns:minmax(0,1fr) 154px;grid-template-areas:"filters filters" "regions regions" "grid deck";gap:8px;align-items:start;
    padding-top:calc(env(safe-area-inset-top,0px) + 68px);padding-bottom:76px}
  .deck-editor .col-main{display:contents}
  .deck-editor .page-tabs{display:none}
  .deck-editor .col-filters{grid-area:filters}
  .deck-editor .col-regions{grid-area:regions;margin:0}
  .deck-editor .col-grid{grid-area:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 7px}
  .deck-editor .deck{grid-area:deck;position:sticky;top:calc(env(safe-area-inset-top,0px) + 66px);max-height:calc(100dvh - var(--tabbar) - env(safe-area-inset-top,0px) - 74px);
    overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;gap:8px;padding:6px;border-width:1.5px;border-radius:8px}
  .deck-editor .deck::-webkit-scrollbar{display:none}
  /* The bar up top: Back, the deck's name over its Legend's art, the count. */
  .deck-editor .deck-head{position:fixed;left:0;right:0;top:0;z-index:40;height:calc(env(safe-area-inset-top,0px) + 58px);padding-top:env(safe-area-inset-top,0px);aspect-ratio:auto;border-radius:0;
    align-items:center;box-shadow:0 1px 0 rgba(215,166,83,.7),0 10px 24px rgba(0,0,0,.6)}
  .deck-editor .deck-head::after{background:linear-gradient(90deg,rgba(0,0,0,.9) 35%,rgba(0,0,0,.35))}
  .deck-editor .de-back{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:36px;height:36px;margin-left:10px;padding:0 0 3px;border-radius:50%;
    border:1px solid rgba(215,166,83,.6);background:rgba(0,0,0,.5);color:var(--gold1);font:700 24px/1 var(--cond);cursor:pointer}
  .deck-editor .deck-head>div{flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:0 10px;min-width:0}
  .deck-editor .deck-title{width:100%;font-size:19px}
  .deck-editor .deck-types{display:none}
  .deck-editor .deck-count{align-self:center;padding:0 14px 0 0;font-size:25px}
  /* The column: Legend and Champion up top, then the cost curve and the list. A row's − takes one out; tapping its
     name picks its art, as on the computer. */
  .deck-editor .de-kit{flex:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .deck-editor .de-kit figcaption{margin-top:3px;font-size:9.5px;letter-spacing:.1em}
  .deck-editor .deck .curve{flex:none;height:32px;gap:2px}
  .deck-editor .deck .curve small{font-size:9.5px}
  .deck-editor .deck-list{flex:none;min-height:0;overflow:visible;padding-right:0;gap:4px}
  .deck-editor .deck-row{grid-template-columns:20px minmax(0,1fr) auto 26px;gap:3px;height:40px}
  .deck-editor .deck-cost{width:20px;height:20px;font-size:11px}
  .deck-editor .deck-name{padding:0 4px;white-space:normal;text-overflow:clip;overflow-wrap:anywhere;line-height:1.05;font-size:11.5px;letter-spacing:0}
  .deck-editor .deck-n{font-size:12px}
  .deck-editor .deck-minus{width:26px;height:26px;font:700 19px/1 var(--cond);background:linear-gradient(180deg,#a8453a,#5e1f19);border-color:#e0806f;color:#fff}
  .deck-editor .deck-warn{font-size:11.5px;line-height:1.3}
  .deck-editor .deck>.fbtn{flex:none;min-width:0;min-height:46px;padding:8px 10px;gap:6px}
  .deck-editor .deck>.fbtn span{font-size:15px;letter-spacing:.06em}
  .deck-editor .deck>.fbtn i{width:18px;height:18px}
  .deck-editor .deck-tools{flex-wrap:wrap;gap:10px 14px;padding-bottom:4px}
  /* Save and Undo float above the tabs once something changes. */
  .deck-editor .de-save{position:fixed;left:10px;right:10px;bottom:calc(var(--tabbar) + 10px);z-index:40;padding:8px 8px 8px 12px;background:linear-gradient(180deg,#2c2313,#161008);
    box-shadow:0 10px 26px rgba(0,0,0,.75)}
  .deck-editor .de-save button{min-height:38px;padding:0 14px;font-size:13px}
}
/* Both phone shapes: under every card, a − and a + either side of how many are in the deck (of the copies you can
   use). Cards in the deck get a blue edge. */
@media (max-width:700px) and (orientation:portrait),(orientation:landscape) and (max-height:500px){
  .deck-editor .col-card .col-owned,.deck-editor .col-card .col-count{display:none}
  .deck-editor .de-step{display:flex;align-items:center;justify-content:space-between;gap:3px;margin-top:5px;padding:3px;border-radius:999px;background:rgba(8,9,10,.9);border:1px solid rgba(255,255,255,.14)}
  .de-step button{flex:none;width:30px;height:28px;padding:0;border-radius:999px;border:1px solid rgba(215,166,83,.45);background:rgba(255,255,255,.05);color:#f3e7c8;cursor:pointer;font:700 19px/1 var(--cond)}
  .de-step button:disabled{opacity:.28;cursor:default}
  .de-step .de-minus:not(:disabled){background:linear-gradient(180deg,#a8453a,#5e1f19);border-color:#e0806f}
  .de-step .de-plus:not(:disabled){background:linear-gradient(180deg,#3d8fe0,#154f9c);border-color:#8fd0ff}
  .de-step b{flex:1;min-width:0;text-align:center;font:700 14px/1 var(--cond);letter-spacing:.04em;color:var(--muted)}
  .de-step b small{font-size:11px}
  .deck-editor .col-card:has(.col-count) .de-step b{color:#fff}
  .deck-editor .col-card:has(.col-count) .col-face{outline:2px solid rgba(143,208,255,.9);outline-offset:1px;border-radius:7px}
}
/* Sideways: pool on the left, the deck in a slim column on the right that scrolls by itself. */
@media (orientation:landscape) and (max-height:500px){
  .deck-editor.collection{display:grid;grid-template-columns:minmax(0,1fr) 214px;gap:12px;align-items:start}
  .deck-editor .deck{position:sticky;top:8px;max-height:calc(100dvh - 16px);overflow-y:auto;padding:8px;gap:8px}
  .deck-editor .deck-head{flex:none;aspect-ratio:auto;height:58px}
  .deck-editor .deck-head>div{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:2px;padding:0 8px 7px;min-width:0}
  .deck-editor .deck-title{width:100%;font-size:15px}.deck-editor .deck-types{display:none}.deck-editor .deck-count{font-size:20px}
  .deck-editor .de-kit{grid-template-columns:repeat(2,minmax(0,78px));gap:10px}
  .deck-editor .curve{height:34px}
  .deck-editor .deck-list{flex:none;min-height:0;overflow:visible}
  .deck-editor .deck-row{height:30px}
  .decks-page .deck-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
}

/* ================================================================== Shop and My Packs */
@media (max-width:700px) and (orientation:portrait),(orientation:landscape) and (max-height:500px){
  .pk{gap:8px}
  .pk-head{gap:8px 12px;align-items:center}
  .pk-title small{display:none}
  .pk-title h1{font-size:30px}
  /* Wallet: four compact counters in one row, no labels (Stardust gets its sparkle). */
  .pk-wallet{flex:1 1 auto;min-width:0;gap:6px;flex-wrap:nowrap}
  .pk-chip{flex:1 1 0;min-width:0;justify-content:center;gap:5px;padding:3px 8px 3px 4px;border-width:1.5px;border-radius:8px}
  .pk-chip small{display:none}
  .pk-chip b{font-size:15px}
  .pk-chip .pk-ico{width:20px;height:20px}
  .pk-chip .pk-ico--prod{width:20px;height:24px}.pk-chip .pk-ico--prod .pr-pack{--pw:15px}
  .pk-chip .pk-ico--boxprod{width:24px}.pk-chip .pk-ico--boxprod .pr-box{--bw:18px}
  .pk-chip:not(:has(.pk-ico))::before{content:"✦";font:700 15px/1 var(--cond);color:#c9b6ff;text-shadow:0 0 8px rgba(160,120,255,.8)}
  .pk-chip .coin-plus{flex:none}
  .pk-tabs button{padding:9px 14px 10px;font-size:14px;letter-spacing:.12em}
  /* Shop: each product is one row: the product on the left, then its name, one line of detail and Buy. */
  .pk-shop{gap:10px;padding:2px 0 12px}
  .pk-shop-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .pk-tile{flex-direction:row;border-width:2px}
  .pk-tile-art{flex:none;width:112px;height:auto;min-height:120px}
  .pk-tile--pack .pr-pack{--pw:58px}.pk-tile--bundle .pr-bundle{--pw:46px}.pk-tile--box .pr-box{--bw:86px}
  .pk-tile-tag{right:auto;left:6px;top:6px;padding:4px 6px;font-size:9px}
  .pk-tile-body{min-width:0;padding:10px 12px;gap:4px}
  .pk-tile-body h3{font-size:18px}
  .pk-tile-body p{margin:0 0 4px;font-size:12px;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .pk-btn--buy{min-height:40px;padding:0 14px}
  .pk-price{font-size:17px}
  /* My Packs: the pack and its Open buttons fit on one screen. */
  .pk-stage{min-height:0;gap:10px;padding:6px 0}
  .pk-arena{min-height:0}
  .pk-pack{--w:clamp(120px,40vw,180px)}
}
@media (max-width:700px) and (orientation:portrait){
  .pk-head{flex-wrap:wrap}
  .pk-wallet{flex-basis:100%}
  .pk-show{min-height:calc(100dvh - var(--tabbar) - 190px)}
}
@media (orientation:landscape) and (max-height:500px){
  .pk{padding:10px 14px 12px}
  .pk-head{flex-wrap:nowrap}
  .pk-title h1{font-size:26px}
  .pk-wallet{flex:0 1 auto;margin-left:auto}
  .pk-chip{flex:0 0 auto}
  .pk-shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pk-tile{flex-direction:column}
  .pk-tile-art{width:auto;height:96px;min-height:0}
  .pk-tile-body p{display:none}
  .pk-show{min-height:calc(100dvh - 118px)}
  .pk-pack{--w:clamp(80px,24dvh,120px)}
  .pk-grid{--cw:min(112px,calc((100dvh - 150px) / 1.45))}
  .pk-bar{min-height:0;gap:6px}
  .pk-bar .pk-owned{font-size:11px}
}

/* ================================================================== Searching, Pass, ranked ladder, sign-in, Settings */
@media (orientation:landscape) and (max-height:500px){
  .search-core{min-height:calc(100dvh - 20px);gap:8px}
  .search-ring{width:clamp(90px,30dvh,130px)}
  .search-core h1{font-size:24px;margin:2px 0 0}
  .search-time{font-size:20px}
  .bp{height:100dvh;min-height:0;padding:60px 14px 10px}
  .bp-head{gap:10px;flex-wrap:nowrap;align-items:center}
  .bp-crest{width:40px}
  .bp-intro{display:none}
  .bp-head .play-h{font-size:17px;margin:0}
  .bp-level{flex:0 1 260px}
  .bp-level-num{width:46px;height:46px}.bp-level-num b{font-size:20px}
  .bp-scroll{--tw:calc((100dvh - 150px) * .66)}
  .bp-track{padding:22px 4px 6px}
  .bp-track::before,.bp-track::after{top:22px}
  .bp-num{width:30px;height:30px;font-size:14px}
  .bp .play-foot{margin-top:6px}
  .ladder-page{height:100dvh;min-height:0;overflow:hidden;padding:60px 14px 10px}
  .ladder{grid-template-columns:200px minmax(0,1fr);gap:14px}
  .lb-main{overflow-y:auto}
  .lb-you-card{padding:12px;gap:6px}
  .lb-you-emblem{width:80px}
  .lb-you-card>b{font-size:20px}
  .login{place-items:center end;padding:12px 24px}
  .login-brand b{font-size:28px}
  .login-card{gap:8px;padding:14px 18px 12px}
  .login-tabs button{padding:8px 6px 9px}
  .login-card input{padding:8px 10px}
  dialog.settings[open]{max-height:calc(100dvh - 20px);overflow-y:auto;gap:10px;padding:16px 20px}
}
@media (max-width:700px) and (orientation:portrait){
  .bp{height:calc(100dvh - var(--tabbar));min-height:0;padding:calc(env(safe-area-inset-top,0px) + 64px) 12px 10px}
  .bp-intro{font-size:13px}
  .bp-crest{width:44px}
  .bp-head .play-h{font-size:18px}
  .bp-level{flex:1 1 100%;margin:0}
  .bp-scroll{--tw:min(150px,40vw)}
}

/* ================================================================== the lesson coach */
/* On a phone the coach's bubble docks to the top or bottom edge, on the side away from what it points at,
   so it doesn't sit on the cards or buttons the lesson asks you to use. */
@media (max-width:700px) and (orientation:portrait),(orientation:landscape) and (max-height:500px){
  .coach-hud{left:8px;right:auto;top:calc(env(safe-area-inset-top,0px) + 6px);gap:8px;padding:4px 5px 4px 10px;flex-wrap:nowrap;border-radius:99px;max-width:calc(100vw - 60px)}
  .coach-lesson em,.coach-hud small,.coach-pips{display:none}
  .coach-lesson b{font-size:12px}
  .coach-link{padding:5px 9px;font-size:11px}
  .coach-bubble{left:8px!important;right:8px;width:auto;max-width:560px;margin:0 auto;padding:10px 12px;gap:8px;grid-template-columns:1fr}
  .coach-bubble[data-side="above"],.coach-bubble[data-side="left"],.coach-bubble[data-side="right"]{top:calc(env(safe-area-inset-top,0px) + 44px)!important;bottom:auto}
  .coach-bubble[data-side="below"]{top:auto!important;bottom:calc(env(safe-area-inset-bottom,0px) + 8px)}
  .coach-notch,.coach-face{display:none!important}
  .coach-body p{margin-top:4px;font-size:14px;line-height:1.35}
  .coach-actions{margin-top:6px}
  .coach-next{padding:8px 14px;font-size:14px}
  .coach-next kbd{display:none}
}
@media (orientation:landscape) and (max-height:500px){
  .coach-bubble{max-width:420px;margin:0;padding:8px 12px}
  .coach-body p{font-size:13px}
}
/* Sideways My Packs: which kind on the left, the pack in the middle, what's in it and the Open buttons on the right. */
@media (orientation:landscape) and (max-height:500px){
  .pk-show.is-idle{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;min-height:calc(100dvh - 118px)}
  .pk-show.is-idle .pk-kinds{position:relative;justify-self:start;align-self:center;flex-direction:column}
  .pk-show.is-idle .pk-arena{width:auto;height:100%;min-width:calc(var(--w,120px) * 1.6)}
  .pk-show.is-idle .pk-pack{--w:clamp(90px,34dvh,130px)}
  .pk-show.is-idle .pk-bar{justify-self:end;align-items:stretch;max-width:260px}
  .pk-show.is-idle .pk-owned{text-align:left;font-size:11px;line-height:1.35}
  .pk-show.is-idle .pk-summon{flex-direction:column;align-items:stretch;gap:8px}
  .pk-sbtn{min-width:0;min-height:46px;padding:6px 16px}
}
@media (max-width:700px) and (orientation:portrait){
  .deck-editor .page-tabs button{flex:none}
}
/* Dialogs never run off the screen: they scroll inside. */
@media (max-width:700px) and (orientation:portrait),(orientation:landscape) and (max-height:500px){
  .icon-sheet,.grave-sheet,.news-sheet,.ln-rulebook{max-height:calc(100dvh - 24px);overflow-y:auto;padding:18px 16px}
  .icon-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:10px}
}
/* Sideways pack opening: the pack-type switch steps aside so the five cards fit under the header. */
@media (orientation:landscape) and (max-height:500px){
  .pk-show:not(.is-idle) .pk-kinds{display:none}
  .pk-grid{--cw:min(104px,calc((100dvh - 170px) / 1.45))}
}
/* Sideways results: the verdict and both Legends on the left, the Pass/ranked panels and the buttons on the right. */
@media (orientation:landscape) and (max-height:500px){
  .veil--end:has(.rs){padding:10px 16px;place-items:center}
  .end-card.rs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);grid-template-areas:"kick panels" "banner panels" "reason panels" "duel actions";column-gap:28px;row-gap:6px;align-items:center;justify-items:center;padding:0}
  .rs-kicker{grid-area:kick;font-size:12px}
  .rs-banner{grid-area:banner}
  .end-card.rs h2{font-size:clamp(40px,15dvh,64px)}
  .rs-reason{grid-area:reason;font-size:12px}
  .rs-duel{grid-area:duel;gap:14px}
  .rs-portrait{width:clamp(56px,20dvh,80px)}
  .rs-panels{grid-area:panels;align-self:end;width:100%}
  .rs-actions{grid-area:actions;flex-wrap:wrap;justify-content:stretch;width:100%}
  .rs-actions .gbtn{flex:1 1 40%;min-width:0;padding:11px 8px;font-size:14px}
}

/* ================================================================== Sign-in */
/* Upright: the painting and the logo fill the top; the form is a sheet across the bottom, easy to reach with a thumb.
   Nothing here is sized by the form: the page is the small screen height (100svh: the same with the browser's bars
   shown or hidden, and with the keyboard open), the logo sits at a fixed height, and only the sheet changes with
   each step. From the first tap in a field (.is-typing, screens/account.mjs) the sheet slides up to the top, above
   the keyboard, and stays up until a tap on the painting; the logo steps back meanwhile, and whenever a tall step
   would reach it (.is-tall). */
@media (max-width:700px) and (orientation:portrait){
  .login{height:100svh;min-height:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;padding:0;place-items:initial}
  .login-shade{background:linear-gradient(180deg,rgba(4,6,8,.45) 0%,rgba(4,6,8,.05) 26%,rgba(4,6,8,.15) 46%,rgba(6,9,12,.9) 72%,#080b0e 100%)}
  .login-brand{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 16svh);flex-direction:column;justify-content:center;align-items:center;gap:12px;
    text-align:center;padding:0 16px;transition:opacity .25s,translate .25s}
  .login-brand .hub-mark{width:52px;height:52px;font-size:22px}
  .login-brand b{font-size:clamp(34px,11vw,46px);letter-spacing:.18em;filter:drop-shadow(0 3px 10px rgba(0,0,0,.9))}
  .login-brand small{letter-spacing:.5em}
  .login.is-tall .login-brand,.login.is-typing .login-brand{opacity:0;translate:0 -12px;pointer-events:none}
  .login-card,.login-card--wide{width:100%;gap:12px;padding:18px 20px calc(env(safe-area-inset-bottom,0px) + 20px);border-radius:20px 20px 0 0;border-width:2px 0 0;
    background:linear-gradient(180deg,rgba(18,24,30,.97),rgba(8,11,14,.99)) padding-box,var(--frame) border-box;box-shadow:0 -18px 40px rgba(0,0,0,.6);
    max-height:calc(100svh - env(safe-area-inset-top,0px) - 10px);overflow-y:auto;overscroll-behavior:contain}
  .login-card::before{content:"";align-self:center;flex:none;width:40px;height:4px;margin:-6px 0 2px;border-radius:2px;background:rgba(251,231,176,.35)}
  .login.is-typing{justify-content:flex-start;padding-top:calc(env(safe-area-inset-top,0px) + 10px)}
  .login.is-typing .login-card{max-height:calc(var(--vvh,100svh) - env(safe-area-inset-top,0px) - 20px);border-radius:20px;border-width:2px 0;
    padding-bottom:20px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
  .login.is-typing .login-app{opacity:0;pointer-events:none}
  .login-google{min-height:52px;font-size:16px}
  body.no-motion .login-brand{transition:none}
}
/* Both ways: tabs become one pill switch, and every field and button is thumb-sized. */
@media (max-width:700px) and (orientation:portrait),(orientation:landscape) and (max-height:500px){
  .login-tabs{grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0;border:1px solid rgba(215,166,83,.35);border-radius:999px;background:rgba(0,0,0,.4)}
  .login-tabs button{margin:0;padding:10px 6px;border:0;border-radius:999px;font-size:14px;letter-spacing:.1em}
  .login-tabs button.is-on{background:linear-gradient(180deg,#2d6aa6,#123a66);color:#fff;box-shadow:inset 0 0 0 1px rgba(251,231,176,.35)}
  .login-card input{min-height:48px;padding:12px 14px}
  .login-card .login-check input{min-height:0}
  .login-go{min-height:54px}
  .login-error:empty{display:none}
}
/* Sideways: the logo on the painting at the left, the form as a panel down the right edge. */
@media (orientation:landscape) and (max-height:500px){
  .login{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,46%);height:100svh;min-height:0;padding:0;place-items:stretch}
  .login-brand{position:relative;left:auto;top:auto;grid-column:1;align-self:center;justify-self:center;flex-direction:column;text-align:center;gap:10px}
  .login-brand b{font-size:clamp(28px,8dvh,40px)}
  .login-card,.login-card--wide{grid-column:2;width:auto;max-height:100svh;overflow-y:auto;justify-content:center;gap:9px;padding:14px 22px calc(env(safe-area-inset-bottom,0px) + 14px);
    border-radius:0;border-width:0 0 0 2px;background:linear-gradient(180deg,rgba(18,24,30,.96),rgba(8,11,14,.98)) padding-box,var(--frame) border-box}
  .login-card input{min-height:42px;padding:9px 12px}
  .login-go{min-height:48px}
}

/* ================================================================== Deck sharing (the Share and Import dialogs) */
@media (max-width:700px) and (orientation:portrait){
  .deck-share{width:min(520px,94vw);padding:18px 16px;gap:12px}
  .deck-share h3{font-size:19px}
  .deck-qr{width:min(210px,58vw)}
}
@media (orientation:landscape) and (max-height:500px){
  .deck-share{width:min(640px,92vw);padding:14px 18px;gap:10px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start}
  .deck-share>*{grid-column:2}
  .deck-share>.deck-qr{grid-column:1;grid-row:1/span 6;width:min(200px,calc(100dvh - 60px))}
  .deck-share>h3{grid-row:1}
}

/* ================================================================== pulling down */
/* Touch screens: no pull-to-refresh or rubber-band bounce. A pull on Home could reload the game, or drag the page
   under the tab bar while the fixed pieces stayed put. */
@media (hover:none) and (pointer:coarse){
  html,body{overscroll-behavior:none}
}
/* Pages are measured by the visible screen (100dvh). iPhones report 100vh as the taller screen behind Safari's bars,
   which left Home a little room to scroll under the tab bar. */
@media (max-width:700px) and (orientation:portrait),(orientation:landscape) and (max-height:500px){
  main{min-height:100dvh}
  .ln-scroll,.play-scroll,.lb-main,.deck-editor .deck{overscroll-behavior:contain}
}

/* ================================================================== Events (tournaments, coming soon) */
@media (max-width:700px) and (orientation:portrait){
  .events{height:auto;min-height:calc(100dvh - var(--tabbar));padding:calc(env(safe-area-inset-top,0px) + 66px) 12px 16px}
  .ev-body{gap:12px}
  .ev-head h1{font-size:26px}
  .ev-card{min-height:150px;padding:14px 16px}
  .ev-card h2{font-size:24px;margin:6px 0 8px}
  .ev-card p{font-size:13.5px}
  .ev-foot{gap:10px}
  .ev-foot p{font-size:13.5px;min-width:0}
  .ev-foot .fbtn{width:100%;min-width:0;min-height:56px}
}
@media (orientation:landscape) and (max-height:500px){
  .events{height:100dvh;min-height:0;padding:60px 14px 10px}
  .ev-body{gap:10px}
  .ev-head h1{font-size:24px}
  .ev-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .ev-card{min-height:0;padding:14px}
  .ev-card h2{font-size:22px;margin:4px 0 6px}
  .ev-card p{font-size:12.5px}
  .ev-foot p{font-size:13px}
  .ev-foot .fbtn{min-width:200px;min-height:50px}
}

/* ================================================================== Home: play it as an app (screens/install.mjs) */
/* Touch screens in the browser only: a card above the Play buttons that puts the game on the home screen. */
@media (hover:none) and (pointer:coarse){
  .hub-app{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;border:1.5px solid transparent;
    background:linear-gradient(180deg,rgba(20,26,30,.95),rgba(8,10,12,.95)) padding-box,var(--frame) border-box;box-shadow:0 10px 26px rgba(0,0,0,.55)}
  .hub-app-icon{flex:none;width:40px;height:40px;border-radius:9px}
  .hub-app-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
  .hub-app-text b{font:700 16px/1.05 var(--cond);letter-spacing:.06em;text-transform:uppercase;color:#fff}
  .hub-app-text small{font:500 12px/1.25 "Segoe UI",system-ui,sans-serif;color:#d8cdb2}
  .hub-app-go{flex:none;min-width:66px;min-height:40px;padding:0 14px;border-radius:7px;border:1px solid #8fd0ff;background:linear-gradient(180deg,#3d8fe0,#154f9c);
    color:#fff;font:700 14px/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
  .hub-app-x{flex:none;width:32px;height:32px;padding:0 0 2px;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:#cfc5ae;font:400 21px/1 system-ui,sans-serif;cursor:pointer}
  .app-steps{display:grid;gap:12px;max-width:340px}
  .app-steps h3{margin:0;padding-right:28px;font:700 21px/1.1 var(--cond);letter-spacing:.07em;text-transform:uppercase;color:var(--gold1)}
  .app-steps ol{margin:0;padding-left:22px;display:grid;gap:9px;font-size:15px;line-height:1.4}
  .app-share{display:inline-grid;width:20px;height:20px;vertical-align:-4px;color:#8fd0ff}
  .app-share svg{width:100%;height:100%}
  .app-note{margin:0;padding:10px 12px;border-radius:8px;background:rgba(215,166,83,.1);border:1px solid rgba(215,166,83,.35);font-size:13.5px;line-height:1.45;color:#e4d9c2}
  /* The sign-in page's pill: a top corner of the painting, clear of the logo and the form. Only on the first step:
     halfway through signing in is no time to leave for the home screen (an iPhone app starts over). */
  .login:not([data-view=start],[data-view=signin],[data-view=create]) .login-app{display:none}
  .login-app{position:absolute;z-index:2;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;display:flex;align-items:center;gap:8px;min-height:40px;padding:5px 14px 5px 5px;
    border-radius:999px;border:1px solid rgba(215,166,83,.55);background:rgba(8,11,14,.74);box-shadow:0 6px 18px rgba(0,0,0,.45);
    color:#fbe7b0;font:700 13px/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
  .login-app img{width:30px;height:30px;border-radius:8px}
}
/* Sideways the Home stack is short on room: the card drops its second line. The sign-in pill moves to the painting's
   side (the form is down the right). */
@media (orientation:landscape) and (max-height:500px){
  .hub-app{padding:6px 8px}.hub-app-text small{display:none}.hub-app-icon{width:32px;height:32px}.hub-app-go{min-height:34px}
  .login-app{right:auto;left:calc(env(safe-area-inset-left,0px) + 12px)}
}