/* ============================================================
   The phone HUD: one bar across the top
   Name on the left with the three meters beside it, clock and money on the
   right, and a hairline for how far through the shift you are. The objective
   is the first line of the tracker. Everything below the bar hangs off
   --hud-h, which Track.measure() reads off the bar (its height depends on its
   contents and the safe-area inset).
   The query is width OR height, so landscape phones (844 × 390) match too.
   ============================================================ */
@media (max-width:820px),(max-height:520px){
  #minimapWrap{display:none}
  #keyhints button{padding:7px 10px;font-size:11px}

  /* The tracker's card: less opaque than the desktop card, since it floats over
     the office all shift. */
  .hud .card{border-color:var(--line-soft);box-shadow:0 14px 28px -20px #000;
    background:linear-gradient(180deg,rgba(30,38,54,.68),rgba(15,20,30,.74))}
  /* One line each, so the bar never grows; the rank ellipsises. */
  .who-name,.who-rank{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .who-name{font-size:13px}
  .who-rank{font-size:9px;letter-spacing:.04em}
  /* The level, then the rank underneath it: there is height to spare beside
     the portrait and no width. */
  .who-rank .rk-sep{display:none}
  .who-rank .rk-nm{display:block;overflow:hidden;text-overflow:ellipsis}
  /* The bars carry three numbers you glance at, not read. */
  .bar{height:5px;border-radius:4px;border-color:var(--line-soft)}
  .bar-row{gap:6px}
  .bar-row .lbl{font-size:11px;width:14px}
  /* The dot belongs to the words. Wrapped, it was left stranded on its own line. */
  .queue{white-space:nowrap}

  #hudTop{display:flex;align-items:stretch;
    padding-top:env(safe-area-inset-top);
    background:linear-gradient(180deg,rgba(30,38,54,.96),rgba(13,18,27,.95));
    border-bottom:1px solid var(--line-soft);box-shadow:0 16px 34px -26px #000;
    /* No backdrop-filter: a blur over the canvas re-rasterises every frame. */
    backdrop-filter:none}
  /* The lanyard-blue hairline every laminated sign in this building has, so the
     bar reads as part of the same visual system rather than a browser chrome. */
  #hudTop::before{content:"";position:absolute;left:0;right:0;height:2px;
    top:env(safe-area-inset-top);pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,111,145,.5),transparent)}
  /* Out of the corners and into the row, unscaled. */
  #hudTL,#hudTR{position:static;width:auto;transform:none}
  #hudTL{flex:1 1 auto;min-width:0}
  #hudTR{flex:0 0 auto;text-align:right}
  /* Both cards give up their own chrome. The bar is the card now. */
  #hudTL .card,#hudTR .card{background:none;border:0;border-radius:0;box-shadow:none;
    backdrop-filter:none;padding:7px 9px}
  /* Name, hairline, meters in a row; stacked meters doubled the bar's height. */
  #hudTL .card{display:flex;align-items:center;gap:9px;min-width:0}
  .who-row{flex:0 1 auto;min-width:0;gap:7px}
  /* The face becomes a lanyard photo: a tile with a ring that goes red with the
     rest of the card when you are nearly out of yourself. */
  .who-face{font-size:19px;line-height:1;padding:3px 4px;border-radius:9px;
    border:1px solid var(--line-soft);
    background:radial-gradient(circle at 50% 35%,rgba(255,111,145,.26),rgba(255,111,145,.04))}
  #hudTL.low .who-face{border-color:rgba(255,95,86,.55);
    background:radial-gradient(circle at 50% 35%,rgba(255,95,86,.34),rgba(255,95,86,.05))}
  /* The name gives way to the meters, not the other way round: a long name is
     an ellipsis, a squeezed meter is thirteen pixels of bar and no information
     at all. */
  .who-row{max-width:44%}
  /* Capped width; the slack goes between the meters and the clock. */
  .vitals{flex:1 1 auto;min-width:84px;max-width:300px;
    padding-left:9px;border-left:1px solid var(--line-soft)}
  .vitals .bar-row{margin-top:4px}
  .vitals .bar-row:first-child{margin-top:0}
  .vitals .bar-row .lbl{width:12px}
  .vitals .bar{min-width:16px}
  .vitals .val{width:auto;min-width:20px;font-size:8.5px}
  /* Just the number. See the note on the markup. */
  .vitals .val i{display:none}
  #hudTR .card{display:flex;flex-direction:column;align-items:flex-end;gap:1px;
    padding-left:10px;border-left:1px solid var(--line-soft)}
  .clock{font-size:18px;line-height:1.05}
  .clock small{font-size:8px;letter-spacing:.06em;white-space:nowrap}
  .money-row{font-size:10.5px;gap:9px;margin-top:1px}
  .queue{margin-top:1px;font-size:9.5px}
  /* The shift, as a line. Two pixels of screen for the one thing the clock
     cannot tell you at a glance: how much of the day is left. */
  #shiftBar{display:block;position:absolute;left:0;right:0;bottom:0;height:2px;
    background:rgba(255,255,255,.05);pointer-events:none}
  #shiftBar>i{display:block;height:100%;width:0;transition:width .6s linear;
    background:linear-gradient(90deg,var(--brand),var(--hold));box-shadow:0 0 8px -1px var(--hold)}
  /* Off shift the line dims rather than vanishing. */
  #shiftBar.done>i{opacity:.22;box-shadow:none;transition:opacity .8s linear}
}
/* 360px and under, where the bar is carrying four columns of information across
   a screen the width of a bank card. */
@media (max-width:360px){
  #hudTL .card,#hudTR .card{padding:6px 7px}
  #hudTL .card{gap:7px}
  .vitals{padding-left:7px;min-width:70px}
  .who-face{font-size:17px}
  .money-row{font-size:9.5px;gap:7px}
  .clock{font-size:16px}
}

/* The comms band and the job tracker side by side under the bar. The band
   keeps the HUD's corner; the tracker docks on the E button's side (both
   mirror in southpaw). The band's tallest state is fixed: two alerts of
   --alert-h plus the rail chip. History lives in the console, one tap away
   on #cmOne. */
@media (max-width:820px),(max-height:520px){
  /* Two alerts: maxAlerts() in engine/comms.js reads this query, so the DOM cap
     and the space agree. The rail chip keeps its 34px tap floor. */
  :root{--alert-h:30px;--alert-gap:5px;--alert-n:2;
    /* One width shared by both rules below, so the tracker's own width and the
       gap the band leaves for it can never drift apart. Wide enough for a
       job's name: at 156px "Welcome to Paradise" was "Welcome to Par…", with
       the comms chip beside it using a third of what it was left. */
    --tk-w:clamp(140px,52vw,220px)}
  #comms{top:calc(var(--hud-h,92px) + 8px);bottom:auto;
    left:calc(10px + env(safe-area-inset-left));
    right:calc(10px + env(safe-area-inset-right) + var(--tk-w) + 8px);
    width:auto;
    /* column, not column-reverse at this end: the one chip is the anchor and
       the alerts stack DOWNWARD from it, away from the HUD bar above. */
    flex-direction:column;align-items:flex-start;gap:5px}
  /* High, as on a desktop: under the bar and the tracker's line, which share
     the row beneath the bar. */
  #alerts{width:min(520px,calc(100vw - 24px));top:calc(var(--hud-h,92px) + 64px)}
  /* Dodging the player: above the pad, the buttons and the menu button. */
  #alerts.low{top:auto;bottom:calc(250px + env(safe-area-inset-bottom))}
  /* A place's name goes under the alerts, still well over the player. */
  #zoneName{top:32%}
  .alert{font-size:11.5px;padding:1px 10px;gap:6px}
  .alert .a-e{font-size:13px}
  /* Five chips do not fit in 160px, so one chip carries the total and the
     newest channel's face; the five become the console's tabs. sync() writes
     both. */
  #chRail{display:none}
  #cmOne{display:inline-flex;order:-1}

  /* The tracker, level with the alerts and narrower: a glance, with detail in
     the Jobs tab. The list scrolls in a capped box; header and objective stay. */
  #tracker{top:calc(var(--hud-h,92px) + 8px);
    right:calc(10px + env(safe-area-inset-right));left:auto;
    width:var(--tk-w);max-height:min(32vh,240px)}
  body.southpaw #tracker{left:calc(10px + env(safe-area-inset-left));right:auto}
  body.southpaw #comms{left:calc(10px + env(safe-area-inset-left) + var(--tk-w) + 8px);
    right:calc(10px + env(safe-area-inset-right))}
  body.southpaw #comms{align-items:flex-end}
  /* The full mono tracking reads fine on the label alone at this width; it is
     the two icon buttons beside it that leave so little room. Loosen it rather
     than lose it. */
  .tk-head{padding:5px 7px;gap:4px;letter-spacing:.09em}
  .tk-obj{padding:0 7px 6px;font-size:10.5px}
  .tk-list{padding:3px 3px 12px}
}
/* Landscape: the meters go side by side, taking the bar from about 70px to 44. */
@media (max-height:520px){
  /* Short enough that the middle is level with the tracker: keep clear of it.
     The tracker keeps its narrow width here, so a tip between the two still
     fits its three lines; a long job name takes a second line instead of
     being cut off. */
  :root{--tk-w:clamp(132px,44vw,156px)}
  /* Between the comms chip and the tracker, so straight under the bar. */
  #alerts{width:min(520px,calc(100vw - 2 * (var(--tk-w,156px) + 22px)));top:calc(var(--hud-h,92px) + 8px)}
  #alerts.low{bottom:calc(16px + env(safe-area-inset-bottom))}
  #tracker .gd-job b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2}
  .vitals{display:flex;gap:11px;max-width:min(58vw,520px)}
  .vitals .bar-row{flex:1 1 0;min-width:0;margin-top:0}
  /* Same again on the right: stacked, the clock, the money and the queue were
     four rows and the tallest thing in the bar. */
  #hudTR .card{flex-direction:row;align-items:center;gap:12px}
  .money-row,.queue{margin-top:0}
  /* A shorter tracker in landscape. */
  #tracker{max-height:min(24vh,150px)}
}

/* No comms band under a full-screen overlay, at any width: nothing said is
   lost, since each alert points into a channel with an unread count. The
   console counts as an overlay too. */
#app:has(#combat.on) #comms,
#app:has(#panel.on) #comms,
#app:has(#inbox.on) #comms,
#app:has(#ending.on) #comms,
#app:has(#combat.on) #alerts,
#app:has(#panel.on) #alerts,
#app:has(#inbox.on) #alerts,
#app:has(#ending.on) #alerts{display:none}
/* The on-screen pad owns the bottom of the screen, so the keyboard-hint row is
   replaced by a single menu button — everything it linked to is a tab inside
   the panel it opens. */
@media(pointer:coarse){
  #keyhints{display:none}
  /* Thumb-sized targets: a reply is the main thing you tap in this game. */
  .choice{padding:12px;font-size:15px}
  .dlg-choices{gap:8px}
  /* Anything you tap is at least a fingertip tall. The desktop sizes were set
     against a mouse pointer and read as small, hard chips on a phone. */
  .btn{min-height:44px;border-radius:12px;padding:11px 16px}
  .btn.small{min-height:38px;padding:8px 12px;font-size:12px}
  .item,.ach,.quest,.mail,.stat-box,.branch{border-radius:13px}
  .skill{padding:9px 8px;border-radius:10px}
  /* The tracker's buttons: 31px, not 44, since they are never the main target
     (and never exactly the 30px floor the mobile suite checks). */
  .tk-b{width:31px;height:31px;font-size:12px}
  .tk-title{padding:5px 6px;min-height:31px}
  .tk-pin{width:31px;min-height:31px;font-size:13px}
  .tk-nm{font-size:11.5px}
  .tk-step{font-size:10.5px}
  /* The d-pad: rounded, gaps closed, a soft ring behind, so it reads as one
     control. No backdrop-filter over the canvas (see #stage). Hit areas unchanged. */
  .dpad{border-radius:50%;
    background:radial-gradient(circle at 50% 50%,rgba(9,12,18,.38),rgba(9,12,18,0) 70%)}
  .dpad button{width:52px;height:52px;border-radius:50%;font-size:15px;color:#cfd9ea;
    background:linear-gradient(180deg,rgba(46,57,77,.86),rgba(26,33,47,.86));
    border-color:rgba(255,255,255,.11);
    box-shadow:0 7px 18px -9px #000,inset 0 1px 0 rgba(255,255,255,.08)}
  .dpad button:active{background:rgba(255,111,145,.42);border-color:var(--brand);color:#fff}
  .dpad .u{left:49px;top:0}.dpad .d{left:49px;top:98px}
  .dpad .l{left:0;top:49px}.dpad .r{left:98px;top:49px}

  /* ---- the thumbstick ----
     Depth only; footprint, catchment, clamp and response unchanged. No
     backdrop-filter. */
  .stick::before{border-color:rgba(255,255,255,.16);
    background:
      radial-gradient(circle at 50% 42%,rgba(28,38,56,.5),rgba(9,12,18,.3) 68%),
      conic-gradient(from 0deg,rgba(255,255,255,.05) 0 2deg,transparent 2deg 88deg,
        rgba(255,255,255,.05) 88deg 92deg,transparent 92deg 178deg,
        rgba(255,255,255,.05) 178deg 182deg,transparent 182deg 268deg,
        rgba(255,255,255,.05) 268deg 272deg,transparent 272deg 360deg);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 30px -20px #000}
  /* Held, it comes up to full strength and rings itself in the brand colour, so
     the thing under your thumb is obviously the thing you are driving. */
  .stick.grab::before{border-color:rgba(255,111,145,.45);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 34px -12px var(--brand)}
  #stickKnob{border-color:rgba(178,216,255,.9);
    background:radial-gradient(circle at 50% 28%,rgba(150,205,255,.95),rgba(255,111,145,.55) 58%,rgba(40,104,180,.45));
    box-shadow:0 10px 24px -10px rgba(255,111,145,.95),inset 0 2px 7px rgba(255,255,255,.32)}

  /* ---- E, and the menu ----
     E lights when there is something to act on, amber and ringing for a
     ringing bell. */
  #touchE{letter-spacing:.12em;
    background:radial-gradient(circle at 50% 28%,rgba(122,190,255,.46),rgba(255,111,145,.17) 72%);
    border-color:rgba(140,200,255,.72);
    box-shadow:0 12px 28px -14px rgba(255,111,145,.9),inset 0 1px 0 rgba(255,255,255,.22);
    transition:transform .09s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}
  #app:has(#prompt.on) #touchE{border-color:#dceaff;
    background:radial-gradient(circle at 50% 28%,rgba(150,205,255,.6),rgba(255,111,145,.24) 72%);
    box-shadow:0 0 0 3px rgba(255,111,145,.16),0 14px 32px -14px var(--brand),
      inset 0 1px 0 rgba(255,255,255,.3)}
  #app:has(#prompt.urgent) #touchE{border-color:var(--hold);
    background:radial-gradient(circle at 50% 28%,rgba(255,199,116,.55),rgba(255,179,71,.2) 72%);
    box-shadow:0 0 0 3px rgba(255,179,71,.18),0 14px 32px -14px var(--hold),
      inset 0 1px 0 rgba(255,255,255,.3);
    animation:eRing 1.1s ease-in-out infinite}
  @keyframes eRing{50%{box-shadow:0 0 0 7px rgba(255,179,71,.09),0 14px 34px -12px var(--hold),
    inset 0 1px 0 rgba(255,255,255,.3)}}
  /* Travel. There is none in the glass, so the button has to supply it — and it
     is the only confirmation a tap gets besides the vibration, which most
     phones in this building do not have. */
  #touchE:active{transform:scale(.94)}
  #touchMenu{border-color:rgba(255,255,255,.11);
    background:linear-gradient(180deg,rgba(31,39,54,.9),rgba(17,23,33,.9));
    box-shadow:0 9px 22px -13px #000,inset 0 1px 0 rgba(255,255,255,.06);
    transition:transform .09s ease,border-color .2s ease}
  #touchMenu:active{transform:scale(.94)}
  .dpad button:active{transform:scale(.94)}
  @media(prefers-reduced-motion:reduce){
    #app:has(#prompt.urgent) #touchE{animation:none}
    #touchE:active,#touchMenu:active,.dpad button:active{transform:none}
  }
  /* The bottom HUD (the gun and the speedometer) clears the touch controls:
     244px clears the menu button; the pad tops out at 226px. */
  #hudBottom{bottom:calc(244px + env(safe-area-inset-bottom));align-items:flex-end;
    padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(14px + env(safe-area-inset-right))}
  body.southpaw #hudBottom{align-items:flex-start}
}
/* The opening's caption: 2.2vw is under 9px on a 390px phone. Before the
   landscape block, which must win where both match. */
@media (max-width:820px){
  .cut-text{font-size:16px;line-height:1.5}
  .cut-hint{font-size:11px}
}
/* 320px: tighter frame, plate and caption padding (about two lines on the
   longest beat). */
@media (max-width:400px){
  #cutscene{--cut-pad:11px}
  #cutCard{gap:9px}
  .cut-emoji{width:38px;height:38px;font-size:21px;border-radius:10px}
  .cut-say{padding:10px 12px 12px}
}

/* Landscape: no room for a tall dialogue box. */
@media(max-height:460px){
  .dlg-text{min-height:0;padding:10px 14px;font-size:14px}
  /* The opening in landscape: thinner bars, tighter leading, a smaller plate. */
  #cutscene{--cut-bar:clamp(20px,6vh,84px)}
  .cut-say{padding:9px 13px 10px}
  .cut-text{font-size:14px;line-height:1.46}
  .cut-emoji{width:42px;height:42px;font-size:23px}
  #cutscene.k-line .cut-text{font-size:clamp(18px,2.6vw,26px)}
  #cutscene.k-line .cut-emoji{width:46px;height:46px;font-size:26px}
  #cutscene.k-title .cut-text{font-size:clamp(20px,3.6vw,34px)}
}

/* Landscape: a tighter pad; the stick shrinks and its catchment
   grows along the bottom edge. */
@media(pointer:coarse) and (max-height:460px){
  #stickZone{width:min(46%,300px);height:min(80%,140px)}
  .stick{width:108px;height:108px;bottom:calc(16px + env(safe-area-inset-bottom))}
  #stickKnob{width:50px;height:50px;margin:-25px 0 0 -25px}
  .dpad{width:120px;height:120px;bottom:calc(12px + env(safe-area-inset-bottom))}
  .dpad button{width:40px;height:40px;font-size:13px}
  .dpad .u{left:40px;top:0}.dpad .d{left:40px;top:80px}.dpad .l{left:0;top:40px}.dpad .r{left:80px;top:40px}
  #touchE{width:62px;height:62px;bottom:calc(14px + env(safe-area-inset-bottom))}
  #touchMenu{width:44px;height:44px;bottom:calc(84px + env(safe-area-inset-bottom))}
  body.driving #touchMenu{bottom:calc(246px + env(safe-area-inset-bottom))}
  #touchGas,#touchBrake{width:76px}
  #touchGas{height:84px;bottom:calc(86px + env(safe-area-inset-bottom))}
  #touchBrake{height:62px;bottom:calc(16px + env(safe-area-inset-bottom))}
  #hudBottom{bottom:calc(140px + env(safe-area-inset-bottom))}
  /* No landscape special case for comms: the bar is the same in both
     orientations. */
}
/* Short viewports: the title flows from the top and scrolls, with the footer
   back in line, so Start stays tappable. */
@media(max-height:560px){
  .screen{justify-content:flex-start}
  .hero-strip{margin-bottom:10px}
  .title-line1{font-size:clamp(24px,5.5vw,40px)}
  .title-line2{font-size:clamp(18px,4vw,30px)}
  .title-rule{margin-top:10px}
  .tagline{margin-top:10px}
  .tagline small{margin-top:3px}
  .title-menu{margin-top:14px}
  .title-menu .btn{padding:9px 16px 9px 26px;font-size:14px}
  .board{margin-top:14px}
  .cell{padding:8px 6px 9px}
  .cell-n{font-size:clamp(20px,4.4vw,26px)}
  /* The foot comes off the bottom edge and joins the flow, so the ticker and
     the small print sit under the menu rather than on top of it. */
  #titleFoot{position:static;width:100%;margin-top:16px}
}
/* Narrow: three columns of tabular numbers is the one part of the board that
   does not want to be squeezed, so the labels are what gives. */
@media(max-width:400px){
  .hero-strip{font-size:9px;letter-spacing:.14em;gap:5px 10px}
  .board-cells{grid-template-columns:repeat(3,1fr)}
  .cell{padding:10px 3px 11px}
  .cell-l{font-size:8px;letter-spacing:.1em}
  .board-head,.board-note{font-size:9px;letter-spacing:.14em;padding:7px 10px}
  .title-menu .btn{width:min(320px,100%)}
}

/* ============================================================
   Mobile: taking the corners off
   Shape and weight only: nothing moves or hides, and every hit target keeps
   its size.
   ============================================================ */
@media(max-width:820px){
  :root{--radius:16px}

  /* The comms band: rounder, and softer at the edge than the card behind it. */
  .alert{border-radius:13px;border-color:var(--line-soft);box-shadow:0 16px 34px -24px #000}
  #chRail,#cmOne{border-color:var(--line-soft)}

  /* The conversation box is the other thing that is up half the time. */
  .dlg-head{padding:11px 14px;border-bottom-color:var(--line-soft)}
  .dlg-face{font-size:32px}
  .choice{border-radius:13px;border-color:var(--line-soft);background:rgba(36,46,63,.72)}
  .choice:hover,.choice.sel{border-color:var(--brand)}

  /* The panel as a sheet off the bottom edge, leaving the game visible above. */
  #panel{padding:0;align-items:flex-end}
  .pn{width:100%;height:min(760px,93%);border-radius:22px 22px 0 0;border-bottom:none;
    animation:sheetUp .26s cubic-bezier(.22,.72,.28,1)}
  /* The hanging tab the panels share becomes the sheet's grab handle. */
  .pn::before{left:calc(50% - 26px);right:calc(50% - 26px);top:8px;height:4px;
    border-radius:3px;background:var(--line);opacity:.9}
  .pn .sign-title{padding:18px 14px 11px;border-bottom-color:var(--line-soft)}
  /* "Employee self-service portal · NAME · Trainee" is three lines of a phone. */
  .pn .sign-title>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pn-body{padding:14px}
  /* One scrolling row of tabs; Panels.tabs() scrolls the selected one into view. */
  .tabs{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:9px 10px;gap:7px;border-bottom-color:var(--line-soft);
    /* Feathered at the right, so a cut-off tab reads as more to scroll. */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent 100%)}
  .tabs::-webkit-scrollbar{width:0;height:0}
  .tab{flex:0 0 auto;border-radius:999px;padding:8px 14px;font-size:12.5px;
    background:rgba(36,46,63,.55);border-color:var(--line-soft)}
  .tab.on{background:var(--brand);border-color:var(--brand)}

  /* The comms console is a sheet too. */
  #inbox{padding:0;align-items:flex-end}
  .cm{width:100%;height:min(760px,93%);border-radius:22px 22px 0 0;border-bottom:none;
    animation:sheetUp .26s cubic-bezier(.22,.72,.28,1)}
  .cm::before{left:calc(50% - 26px);right:calc(50% - 26px);top:8px;height:4px;
    border-radius:3px;background:var(--line);opacity:.9}
  .cm .sign-title{padding:18px 14px 11px;border-bottom-color:var(--line-soft)}
  .cm-tabs{padding:9px 10px;gap:7px;border-bottom-color:var(--line-soft);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent 100%)}
  .cm-tab{border-radius:999px;padding:9px 13px;font-size:12px;
    background:rgba(36,46,63,.55);border-color:var(--line-soft);min-height:40px}
  .cm-tab.on{background:var(--panel2);border-color:var(--acc,var(--brand))}
  /* Tab names and counts stay; only the tracking goes. */
  .cm-tab .t-n{letter-spacing:.04em}

  /* One pane at a time: list or message, stacked in one cell, with `.reading`
     choosing. #cmFoot's back button leaves the reader. */
  .cm-panes{display:grid;grid-template-columns:1fr;grid-template-rows:1fr}
  .cm-list,.cm-read{grid-area:1/1;border-right:0}
  .cm-read{display:none;padding:14px}
  .cm-list{padding:8px 8px 14px}
  #inbox.reading .cm-list{display:none}
  #inbox.reading .cm-read{display:block}
  /* The ledger has no list to go back to, so it is always the pane. */
  #inbox.ledger .cm-read{display:block}
  .cm-back{display:inline-flex}
  #inbox.ledger .cm-foot .cm-back{display:none}
  .cm-row{border-radius:13px;border-color:var(--line-soft);background:rgba(36,46,63,.5);
    min-height:56px}
  .cm-row.on{background:var(--panel2)}
  .bub{max-width:86%}
  .l-row{grid-template-columns:40px 18px 1fr;font-size:12px}
  .cm-mail h4{font-size:14px}

  .rep{border-radius:18px}
  .rep-row{border-bottom-color:var(--line-soft)}
  .h2{border-bottom-color:var(--line-soft)}
}
/* 320px, where the corner cards are 138px wide and every character counts.
   After the block above, so these win. */
@media(max-width:400px){
  .who-rank{letter-spacing:0}
  .queue{font-size:10.5px}
}
@keyframes sheetUp{from{transform:translateY(28px);opacity:.35}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.pn,.cm{animation:none}}

/* The call card, tightest of all: the caller's name loses its wide tracking. */
@media(max-width:640px){
  .cb{border-radius:18px}
  .cb-top{border-bottom-color:var(--line-soft)}
  .cb-who h3{font-size:12px;letter-spacing:.04em;line-height:1.25}
  .cb-who .sub{font-size:10.5px;margin-top:3px}
  .move{border-radius:12px;border-color:var(--line-soft);background:rgba(36,46,63,.65)}
  .move:disabled{border-color:var(--line-soft)}
}

/* A row of three buttons on a 320px screen is three cramped buttons. Stack
   them: the first shift is the first thing anybody taps. */
@media(max-width:520px){
  .title-menu{flex-direction:column;align-items:stretch;gap:9px;margin-top:22px}
  .title-menu .btn{width:100%}
  #nameScreen .sign{width:100%}
}

/* ---------- the character creator on a phone ----------
   Preview beside the pickers, not above them, so "Start the shift" stays on
   screen. */
@media (max-width:820px),(max-height:520px){
  .look-body{gap:10px;padding:14px 12px 4px;align-items:flex-start}
  /* A fixed height, not auto: stretched to match the picker column it grew to
     398px and drove the whole card past the bottom of a 568px phone. */
  #lookView{flex:0 0 96px;width:96px;height:190px}
  .look-row{grid-template-columns:64px 1fr;gap:8px}
  .look-row label{font-size:9px;letter-spacing:.1em}
  /* 38px, not 32: a native select opens the platform picker, but the thing you
     press to get there is still a tap target. */
  .look-row select{font-size:12px;padding:9px 8px;min-height:38px}
  .look-pick{gap:6px}
  .look-tab{font-size:11px;padding:6px 8px}
  .look-chip{font-size:11px;padding:7px 9px}
  .look-swatch{width:30px;height:30px}
  /* The joke stays, at a size that does not cost a button. */
  #lookScreen .field-note{font-size:11px;padding:0 14px 8px;line-height:1.35}
  .look-btns{padding:4px 14px 0}
}
/* Under 430px the label goes above its select, so "Longsleeve · Sky" shows the
   colour; the flavour note goes to pay for it. */
@media (max-width:430px){
  .look-row{grid-template-columns:1fr;gap:2px}
  .look-pick{gap:7px}
  .look-flavour{display:none}
}
/* Landscape has width going spare and no height at all: the picker column
   scrolls inside the card rather than the card scrolling inside the screen. */
@media (max-height:520px) and (min-width:560px){
  #lookView{flex:0 0 104px;width:104px;min-height:0;height:158px}
  .look-pick{max-height:158px;overflow-y:auto;overscroll-behavior:contain}
}