/* Hide and Seek. Portrait first, but every rule here is written so the same
   page lays out on a laptop and on a phone held either way. */

:root{
  --bg:#070a12;
  --ink:#e9eefb;
  --dim:#94a1bd;
  --hider:#5cd8ff;
  --seeker:#ff3b30;
  --line:rgba(150,175,225,.16);
  --panel:rgba(11,16,28,.82);
  --panel-solid:#0d1322;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink)}
body{
  font:500 16px/1.35 ui-rounded,"SF Pro Rounded",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  -webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none;
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}

#app{position:fixed;inset:0;display:block}
#field{position:absolute;inset:0;width:100%;height:100%;display:block}

/* -------------------------------------------------------------- names --- */
/* who each figure in the arena is. They are DOM rather than drawn into the
   canvas so they stay sharp on any screen and cost no fill to put up. */
#tags{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tag{
  position:absolute;left:0;top:0;white-space:nowrap;
  font-size:11px;font-weight:700;line-height:1;padding:3px 6px;border-radius:8px;
  color:#e8eefc;background:rgba(6,10,20,.62);
  border:1px solid rgba(150,190,255,.22);
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  will-change:transform;
}
.tag.me{
  color:#06121f;background:#eaf3ff;border-color:rgba(255,255,255,.9);
  font-weight:800;letter-spacing:.04em;text-shadow:none;
}
@media (max-width:420px){ .tag{font-size:10px;padding:2px 5px} }

/* a soft vignette so the edges of the arena read as night */
#vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 45%,rgba(0,0,0,.55) 100%)}

/* ---------------------------------------------------------------- hud --- */
#hud{
  position:absolute;left:0;right:0;top:0;
  padding:calc(8px + var(--safe-t)) calc(10px + var(--safe-r)) 8px calc(10px + var(--safe-l));
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  pointer-events:none;
}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;border-radius:999px;background:var(--panel);
  border:1px solid var(--line);backdrop-filter:blur(9px);white-space:nowrap;
}
.chip b{font-size:13px;letter-spacing:.14em;font-weight:800}
.chip .dot{width:9px;height:9px;border-radius:50%;background:var(--hider);box-shadow:0 0 10px currentColor}
.role.hider .dot{background:var(--hider)}
.role.seeker .dot{background:var(--seeker)}
.role.hider b{color:var(--hider)}
.role.seeker b{color:var(--seeker)}

#clockWrap{text-align:center;min-width:0}
#clock{font-size:clamp(22px,7vw,34px);font-weight:800;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;text-shadow:0 2px 16px rgba(0,0,0,.7)}
#clockSub{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  margin-top:-2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#clockWrap.urgent #clock{color:#ff7a6b}

#tally{display:flex;gap:6px}
.t{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(9px);
  font-variant-numeric:tabular-nums;font-size:14px}
.t i{width:8px;height:8px;border-radius:50%}
.t.hiders i{background:var(--hider);box-shadow:0 0 8px var(--hider)}
.t.seekers i{background:var(--seeker);box-shadow:0 0 8px var(--seeker)}

#banner{
  /* centered by margins rather than a translate: an absolutely positioned box
     at left:50% only has the right half of the screen to shrink into, so once
     the text is allowed to wrap it collapses into a narrow tall column */
  position:absolute;left:0;right:0;margin-inline:auto;width:fit-content;
  top:calc(78px + var(--safe-t));pointer-events:none;
  padding:7px 15px;border-radius:16px;background:rgba(11,16,28,.86);
  border:1px solid var(--line);backdrop-filter:blur(9px);
  font-size:13px;letter-spacing:.06em;font-weight:700;
  text-align:center;line-height:1.32;
  /* a sentence the page needs somebody to read is wrapped, never cut: an
     instruction that trails off into an ellipsis is an instruction nobody got */
  opacity:0;transition:opacity .25s;max-width:min(92vw, 380px);
}
#banner.on{opacity:1}
#banner.warn{border-color:rgba(255,59,48,.5);color:#ffb3ab}
#banner.bad{border-color:rgba(255,122,107,.5);color:#ffc9c2}

/* -------------------------------------------------------------- roster --- */
#roster{
  position:absolute;top:calc(114px + var(--safe-t));left:calc(10px + var(--safe-l));
  right:calc(10px + var(--safe-r));
  display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding:2px 0 6px;
  scrollbar-width:none;pointer-events:auto;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 22px),transparent 100%);
}
#roster::-webkit-scrollbar{display:none}
.who{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:5px 10px 5px 7px;border-radius:999px;background:var(--panel);
  border:1px solid var(--line);backdrop-filter:blur(9px);font-size:12.5px;max-width:44vw;
}
.who .pip{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.who.hider .pip{background:var(--hider)}
.who.seeker .pip{background:var(--seeker)}
.who b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who.me{border-color:rgba(233,238,251,.5)}
.who.away{opacity:.45}
.who.turned .pip{box-shadow:0 0 0 2px rgba(255,59,48,.35)}

/* ---------------------------------------------------------------- feed --- */
#feed{
  position:absolute;left:calc(10px + var(--safe-l));bottom:calc(76px + var(--safe-b));
  display:flex;flex-direction:column-reverse;gap:4px;pointer-events:none;max-width:62%;
}
.feedline{
  font-size:12px;color:var(--dim);background:rgba(7,10,18,.7);
  border:1px solid var(--line);border-radius:8px;padding:3px 9px;
  align-self:flex-start;backdrop-filter:blur(6px);
  animation:pop .3s ease-out;
}
.feedline.hot{color:#ffb3ab}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1}}

/* ---------------------------------------------------------------- dock --- */
#dock{
  position:absolute;left:0;right:0;bottom:0;
  padding:10px calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l));
  display:flex;align-items:center;gap:8px;justify-content:center;pointer-events:none;
}
#dock > *{pointer-events:auto}
.icon{
  width:44px;height:44px;border-radius:14px;background:var(--panel);
  border:1px solid var(--line);backdrop-filter:blur(9px);font-size:19px;line-height:1;
  display:grid;place-items:center;
}
.icon.off{opacity:.4}
.primary{
  padding:12px 20px;border-radius:14px;font-weight:800;font-size:14px;letter-spacing:.03em;
  background:linear-gradient(180deg,#28334c,#1b2437);color:var(--ink);
  border:1px solid rgba(150,175,225,.3);backdrop-filter:blur(9px);
  box-shadow:0 6px 22px rgba(0,0,0,.4);
}
.primary.wide{flex:1 1 auto;max-width:420px}
.primary:active{transform:translateY(1px)}
/* the dock's own new game: one press out of the house room and into a room of
   this page's own, small enough to sit beside Invite on a phone */
#newBtn{padding:12px 14px;border-radius:14px;font-size:13px;letter-spacing:.02em;
  background:rgba(255,255,255,.04);border:1px solid var(--line);backdrop-filter:blur(9px)}
#newBtn:active{transform:translateY(1px)}

/* --------------------------------------------------------------- stick --- */
#stick{
  position:absolute;width:132px;height:132px;border-radius:50%;
  border:2px solid rgba(150,175,225,.22);background:rgba(10,15,26,.34);
  pointer-events:none;transform:translate(-50%,-50%);
}
#knob{
  position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;
  border-radius:50%;background:rgba(233,238,251,.28);border:1px solid rgba(233,238,251,.5);
}

/* --------------------------------------------------------------- cards --- */
#cards{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;pointer-events:none;gap:10px;
  padding:calc(14px + var(--safe-t)) 14px calc(70px + var(--safe-b))}
.card{
  pointer-events:auto;width:min(430px,100%);max-height:min(64vh,100%);overflow:auto;
  background:linear-gradient(180deg,rgba(16,22,38,.96),rgba(9,13,23,.97));
  border:1px solid var(--line);border-radius:22px;padding:20px;
  box-shadow:0 24px 60px rgba(0,0,0,.6);backdrop-filter:blur(14px);
  animation:rise .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1}}
/* A card is a conversation; a pill is a note. Anything that only has to say one
   thing says it in a pill, because a card the height of the screen is a menu,
   and a game that opens on a menu is a game nobody sees. */
.card.pill{
  width:auto;max-width:min(440px,100%);border-radius:999px;padding:9px 10px 9px 18px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  font-size:13px;line-height:1.3;text-align:center;
}
/* A note is two lines at the top of the field: it says what is new, then gets
   out of the way. It sits at the TOP so the thumb end of the screen stays
   arena, and it is never tall enough to be mistaken for a menu. */
.card.note{
  width:auto;max-width:min(430px,100%);border-radius:18px;padding:12px 16px;
  text-align:center;font-size:13.5px;
}
.card.note .rolebig{justify-content:center;flex-wrap:wrap;row-gap:2px;margin-bottom:5px}
.card.note .rolebig b{font-size:11px}
/* HOW TO WALK SITS ON THE ROLE LINE ITSELF. It is a line of instructions, and
   a line of its own underneath the role is a line of arena the person arriving
   does not get to see. */
.card.note .rolebig .walk{
  flex:1 1 100%;text-align:center;margin:0;color:var(--dim);font-weight:400;
  letter-spacing:0;font-size:11px
}
.card.note p{margin:0;font-size:13.5px;line-height:1.4;color:var(--dim)}
.card.note p.tight{margin-bottom:5px}
.card.note p.tiny{font-size:11.5px}
.card.note .btnrow{margin-top:8px}
/* the column still packs downwards from the dock, so a note lifts itself to the
   top on its own margin and leaves anything that belongs at the bottom there.
   The top margin is the height of the hud plus the roster strip: a note that
   landed on the clock would be covering the two things a new player most needs
   to read, which are the clock and which side they are on. */
.card.note{margin-bottom:auto;margin-top:calc(150px + var(--safe-t))}
.card.pill p{margin:0;color:var(--ink);font-size:13px}
.card.pill .btnrow{margin:0;flex-wrap:nowrap}
.card.pill .ghost{padding:8px 13px;border-radius:999px;font-size:12.5px}
@media (max-width:430px){.card.pill{padding:8px 8px 8px 14px;gap:8px}}
.card h2{margin:0 0 6px;font-size:clamp(21px,6.4vw,27px);letter-spacing:-.01em}
.card p{margin:0 0 12px;color:var(--dim);font-size:14.5px;line-height:1.5}
.card p b{color:var(--ink)}
.card .btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.card .btnrow .primary{flex:1 1 150px;text-align:center}
.ghost{padding:12px 16px;border-radius:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);font-weight:700;font-size:14px}
.rolebig{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rolebig .dot{width:14px;height:14px;border-radius:50%}
.rolebig.hider .dot{background:var(--hider);box-shadow:0 0 16px var(--hider)}
.rolebig.seeker .dot{background:var(--seeker);box-shadow:0 0 16px var(--seeker)}
.rolebig b{font-size:12px;letter-spacing:.2em}
.rolebig.hider b{color:var(--hider)}
.rolebig.seeker b{color:var(--seeker)}
ul.list{margin:8px 0 0;padding:0;list-style:none;font-size:14px}
ul.list li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
ul.list li:first-child{border-top:0}
ul.list .v{color:var(--dim);font-variant-numeric:tabular-nums}
/* THE ROOM, SHORT. The list of who is here is something to glance at while the
   round is running, so it is one line a person and a heading that is a label
   rather than a title: the whole card comes to about a third of a phone, and
   the field it sits on is still a field. */
.card.slim{padding:11px 15px;border-radius:18px}
/* THE ROSTER IS A CORNER, NOT A LID. The list of who is here is worth reading
   while the game is running, so it cannot be a slab across the middle of the
   arena. The seat being played stands on the band centre, which on a phone is
   a little above the middle of the screen, and every card that came down from
   the top landed right on top of it: this one is anchored to the bottom right,
   under the band and over the emptiest quarter of the field, where the only
   thing it can cover is ground. */
.card.corner{
  position:absolute;left:auto;right:10px;top:auto;
  bottom:calc(84px + var(--safe-b));
  width:min(296px,calc(100vw - 28px));max-height:min(46vh,300px);
}
.card.slim .head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding-bottom:7px;border-bottom:1px solid var(--line)}
.card.slim .head b{font-size:11.5px;letter-spacing:.18em;color:var(--dim)}
.card.slim .head .tiny{font-size:11px;color:var(--dim);white-space:nowrap}
.card.slim ul.list.tight{margin:3px 0 0;font-size:13px}
.card.slim ul.list.tight li{padding:3px 0}
/* the one line that makes the point of inviting somebody: opening the link lands
   them in the round that is already running. It gives way on short screens. */
.card.slim .inv{margin:5px 0 0;line-height:1.35}
.card.slim .btnrow{margin-top:8px}
/* the way into the shared room is a small control at the foot of a glancing
   card, not a slab with a paragraph under it: the names in the list say "bot 2"
   and "bot 3", which is the whole of what the paragraph used to add */
.card.slim .btnrow .ghost{flex:1 1 auto;text-align:center;padding:8px 12px;font-size:12.5px;
  border-radius:11px}
.card.slim .btnrow .primary{flex:1 1 auto;text-align:center;padding:8px 12px;font-size:12.5px;
  border-radius:11px}
/* THE CODE FIELD. A small row under the names where somebody types the code a
   friend read out, and the button that joins it. Same alphabet as the address
   bar: lowercase, no spaces. */
.card.slim .joinrow{display:flex;gap:8px;margin-top:8px}
.card.slim .joinrow .codefield{
  flex:1 1 auto;min-width:0;box-sizing:border-box;padding:8px 11px;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);
  font-size:12px;font-family:inherit;text-transform:lowercase;text-overflow:ellipsis;
}
.card.slim .joinrow .ghost{flex:0 0 auto;padding:8px 12px;font-size:12.5px;border-radius:11px}
.board{margin-top:4px}
.board .row{display:flex;gap:10px;font-size:13.5px;padding:5px 0;border-top:1px solid var(--line)}
.board .row:first-child{border-top:0}
.board .rk{width:22px;color:var(--dim);font-variant-numeric:tabular-nums}
.board .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board .sc{font-variant-numeric:tabular-nums;color:var(--dim)}
.board .row.me .nm{color:var(--hider);font-weight:700}
.tiny{font-size:11.5px;color:var(--dim);letter-spacing:.04em}

/* THE AUTOMATIC INVITE OFFER. Raised by the page when somebody is holding a
   room; its own element rather than a card, so opening the roster or the board
   cannot take it away. It sits over the top of the arena, clear of the middle
   where the figure is, and leaves by itself. */
.invitepop{
  position:absolute;left:50%;top:calc(128px + var(--safe-t));
  transform:translateX(-50%);z-index:46;
  width:min(370px,calc(100vw - 20px));box-sizing:border-box;
  display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;
  background:linear-gradient(180deg,rgba(24,31,49,.97),rgba(13,17,29,.97));
  border:1px solid var(--line);box-shadow:0 12px 34px rgba(0,0,0,.55);
  pointer-events:auto;animation:ipin .26s ease both}
@keyframes ipin{from{opacity:0;transform:translateX(-50%) translateY(-9px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}}
.invitepop.out{animation:ipout .26s ease both}
@keyframes ipout{from{opacity:1;transform:translateX(-50%) translateY(0)}
  to{opacity:0;transform:translateX(-50%) translateY(-9px)}}
.invitepop .ipdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:var(--hider);box-shadow:0 0 12px var(--hider)}
.invitepop .ip-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.invitepop .ip-body b{font-size:11px;letter-spacing:.13em;color:var(--ink)}
.invitepop .ip-body span{font-size:11.5px;line-height:1.34;color:var(--dim)}
.invitepop .ip-actions{display:flex;gap:6px;flex:0 0 auto}
.invitepop .ip-actions button{padding:8px 11px;font-size:12px;border-radius:10px;min-height:0}
.invitepop .ipx{padding:8px 9px}
@media (max-width:380px){
  .invitepop{top:calc(112px + var(--safe-t));padding:9px 10px;gap:8px}
  .invitepop .ip-body span{display:none}
}

/* the address, when the clipboard would not take it: a field to select, never a
   raw url printed across the page as a banner */
.linkfield{width:100%;box-sizing:border-box;margin:2px 0 2px;padding:9px 11px;border-radius:11px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);
  font-size:12px;font-family:inherit;text-overflow:ellipsis}

#boot{position:absolute;inset:0;display:grid;place-items:center;color:var(--dim);
  letter-spacing:.14em;font-size:13px;text-transform:uppercase}
#boot.gone{display:none}

/* THE STRIP AND THE LIST SAY THE SAME THING. Where there is room for both they
   both stay; where there is not, the one somebody opened is the one that stays,
   because it is the one with the names and the sides written out. */
@media (max-height:700px){
  body.convo #roster{display:none}
}

/* ------------------------------------------------------- wider screens --- */
@media (min-width:760px){
  #hud{grid-template-columns:auto 1fr auto;padding-top:calc(12px + var(--safe-t))}
  /* the clock is taller here, so the banner and the roster move down with it
     rather than landing on top of it */
  #banner{top:calc(88px + var(--safe-t))}
  #roster{top:calc(132px + var(--safe-t));flex-wrap:wrap;overflow:visible;
    -webkit-mask-image:none;mask-image:none}
  /* a wide screen wraps the roster into rows, and how many depends on how many
     people are in the room, so the note clears two rows of them */
  /* and it keeps out of the middle, where the person you are controlling is
     standing, for the whole time it is on screen */
  .card.note{margin-top:calc(210px + var(--safe-t));align-self:flex-start;margin-left:2%}
  .who{max-width:none}
  #feed{max-width:34%}
}
/* short and wide: the roster moves to the side so it never eats the field */
@media (min-aspect-ratio:13/10) and (max-height:560px){
  #roster{top:calc(120px + var(--safe-t));left:auto;right:calc(10px + var(--safe-r));
    width:34vw;max-width:250px;flex-direction:column;flex-wrap:nowrap;
    overflow-y:auto;overflow-x:hidden;align-items:flex-end;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 22px),transparent 100%);
            mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 22px),transparent 100%);}
  .who{max-width:100%}
  #feed{max-width:38%;bottom:calc(70px + var(--safe-b))}
  /* the roster is a column on the right here, so the note only has the hud to
     clear, and it keeps to the left of it rather than printing over the names */
  /* on a screen this short there is one band for notices and it is the one above
     the dock: the note stacks on top of the pill there instead of lifting itself
     to the top, and it keeps to the left of the roster column */
  /* There is room here for one notice and the one that stays is the one with
     the button on it. The arrival note is the one that goes: on a screen this
     short the role is already on the hud chip and a wrapped paragraph about
     walking would cover the clock to say it. */
  .card.note{display:none}
  #cards{padding-bottom:calc(74px + var(--safe-b))}
  /* ON A SHORT WIDE SCREEN A CARD IS A COLUMN, NOT A LID. There is no height
     here to put a card under and still have a game above it, so it takes the
     left and the field keeps the middle, with the roster already down the right.
     The person's own figure is drawn in the middle of the field, which is the
     one square of this screen a card must never be standing on. */
  #cards{align-items:flex-start;padding-left:calc(10px + var(--safe-l))}
  .card{width:min(360px,44vw)}
  /* the roster column is bounded so it can never run down into the banner,
     and the banner sits clear of the dock: on a screen this short everything
     is competing for the same few rows */
  #roster{max-height:calc(100vh - 232px)}
  /* the banner stays under the hud here too: on a screen this short the strip
     above the dock belongs to the controls and to anything that needs a thumb,
     and a banner parked in it lands on the buttons */
  #banner{top:calc(78px + var(--safe-t))}
  #boot{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .card,.feedline{animation:none}
}
@media (max-width:374px){
  #hud{gap:6px;padding-left:calc(8px + var(--safe-l));padding-right:calc(8px + var(--safe-r))}
  .chip{padding:5px 9px;gap:5px}
  .chip b{font-size:11.5px;letter-spacing:.1em}
  .chip .dot{width:7px;height:7px}
  .t{padding:5px 8px;gap:4px;font-size:12.5px}
  #clock{font-size:clamp(19px,6.4vw,26px)}
  #clockSub{font-size:9px}
  #banner{font-size:12px;padding:6px 12px}
  /* the smallest phone there is: the card has to end above the dock with its
     own button reachable, so it gives up padding and leading before it gives
     up any of the words. Short copy helps too, and that is the page's job. */
  .card{padding:15px;border-radius:18px}
  .card h2{font-size:19px}
  .card p{font-size:13.5px;line-height:1.42;margin-bottom:10px}
  .card .btnrow{margin-top:10px}
  /* the smallest phone there is: a wrapped note or pill needs the whole of the
     strip above the dock, so the cards get a little more room here rather than
     ending on top of the buttons */
  #cards{padding:calc(10px + var(--safe-t)) 10px calc(80px + var(--safe-b))}
}

/* the smallest screens there are: a phone 480 pixels tall has room for the
   role and the rule and nothing else, so the line about which keys to press
   gives way. Nobody needs telling how to drag a thumb on the device in their
   hand, and a note that covers the whole arena to say it is worse than one
   they work out in a second. */
@media (max-height:620px) and (max-aspect-ratio:13/10){
  .card.note p.walk{display:none}
  .card.note{margin-top:calc(132px + var(--safe-t))}
}
/* NOTHING TAKES THE WHOLE PHONE. On a screen this short a card is capped lower
   still, and the lines that only explain give way to the words that name who is
   here: a list of who is in the round is worth reading with the round still
   running behind it, and it is not worth reading on its own. */
@media (max-height:620px){
  .card{max-height:52vh}
  .card.slim p.tiny{display:none}
  .card.slim .inv{display:none}
  .card.slim ul.list.tight li{padding:3px 0}
  /* On a phone 568 tall the corner card came within three pixels of the figure
     standing on the same column: there is no room under this one for a card and
     a person at the same time, so the card gives up its leading, not a row. */
  .card.slim{padding:9px 13px}
  .card.slim .head{padding-bottom:5px}
  .card.slim ul.list.tight{font-size:12.5px}
  .card.slim ul.list.tight li{padding:2px 0}
  .card.slim .btnrow{margin-top:6px}
  .card.slim .btnrow .ghost{padding:7px 11px;font-size:12px}
}
@media (max-width:380px){
  .card.slim p.tiny{display:none}
  .card.slim .inv{display:none}
}