/* Secret Sails lobby: the title screen. Loaded only by index.html, every rule under body.lobby-page, so the game page
   and the TV (which share net.css) never see it. The site's world: the banner over a night sea, the battle print,
   paper plates with a double rule, engraved-label buttons, real pictures of the charts, the fleet woodcuts.
   Light and dark both read from net.css's variables; phones first, every control 44 px or more. */
body.lobby-page{--night:#10263a;--night-2:#0b1b2a;--bone:#f3ead3;--gold:#c99a3b;--scarlet:#b4271f;--scarlet-deep:#8e1c16;
  --plate-shadow:0 1px 0 rgba(255,250,235,.5) inset, 0 18px 36px -24px var(--shadow);overflow-x:clip}
@media (prefers-color-scheme:dark){ body.lobby-page{--scarlet:#d9533f;--scarlet-deep:#c2412f;--plate-shadow:0 18px 36px -24px rgba(0,0,0,.8)} }
body.lobby-page #app{padding-top:0}

/* ---------- the title: the banner over a night sea, the battle print rising behind it ---------- */
.lobby-page .lobby-hero{position:relative;display:grid;justify-items:center;gap:6px;text-align:center;border:0;
  width:100vw;margin:0 0 18px calc(50% - 50vw);padding:calc(env(safe-area-inset-top) + 18px) 16px 70px;overflow:hidden;isolation:isolate;
  background:var(--night);color:var(--bone);box-shadow:inset 0 -16px 20px -16px rgba(0,0,0,.5)}
.lobby-page .lobby-hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url(/img/hero/print-1100.webp?v=2) center 62%/max(100%,760px) auto no-repeat;opacity:.9}
.lobby-page .lobby-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to bottom, rgba(11,27,42,.92) 0%, rgba(11,27,42,.55) 34%, rgba(11,27,42,.15) 62%, rgba(11,27,42,.75) 100%)}
@media (prefers-color-scheme:dark){
  .lobby-page .lobby-hero::after{background:linear-gradient(to bottom, rgba(11,27,42,.92) 0%, rgba(11,27,42,.55) 34%, rgba(11,27,42,.15) 62%, rgba(11,27,42,.75) 100%)}
}
.lobby-page .lobby-hero .brand{margin:0;line-height:0}
.lobby-page .lobby-hero .brand img{width:min(46vw,220px);height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55))}
.lobby-page .lobby-hero .sub{margin:2px auto 0;max-width:34em;font-size:17px;line-height:1.4;color:#e7e2d4;text-shadow:0 1px 8px rgba(0,0,0,.8)}
/* a wide screen keeps the banner, smaller, over the players' bar; a phone's slim bar carries the flag instead */
@media (min-width:900px){ .lobby-page .lobby-hero{padding-top:14px;padding-bottom:30px;margin-bottom:0} .lobby-page .lobby-hero .brand img{width:170px}
  .lobby-page .lobby-hero .sub{font-size:16px} }
@media (max-width:899px){ .lobby-page .lobby-hero{display:none} }

/* the players' bar is shared with the game page: its rules are in net.css (pbar.js builds it) */
.lobby-page #lobby > section{scroll-margin-top:72px}

/* ---------- "Play now": the short first screen (/lobby?quick=1, lobby-art.js) ---------- */
.lobby-page #newcard.quick > :not(h2):not(#seats):not(.err):not(.row.end):not(.qk){display:none !important}
.lobby-page #newcard.quick .seat > .fleets,.lobby-page #newcard.quick .seat > .whos{display:none}
.lobby-page .qk-lede{margin:0 0 14px;font-size:17px;line-height:1.4;color:var(--ink-soft)}
.lobby-page .qk-who{grid-column:1 / -1;justify-self:start;white-space:nowrap;min-height:40px;margin:2px 0 4px;padding:0 14px;border:1px solid var(--card-edge);border-radius:999px;background:var(--btn);
  font:15px/1 var(--serif);color:var(--ink);cursor:pointer}
.lobby-page .qk-who:hover{background:var(--btn-hover);border-color:var(--scarlet)}
.lobby-page .qk-more{display:block;margin:12px 0 0 auto;min-height:44px;padding:0 4px;border:0;background:none;font:16px var(--serif);color:var(--ink-soft);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lobby-page .qk-more:hover{color:var(--scarlet)}

/* ---------- plates: paper cards with a double rule ---------- */
.lobby-page .lobby{gap:16px}
.lobby-page .card{border-radius:12px;padding:16px 16px 18px;box-shadow:var(--plate-shadow);
  background-image:var(--grain),linear-gradient(to bottom, rgba(255,250,235,.35), transparent 40%)}
@media (prefers-color-scheme:dark){ .lobby-page .card{background-image:linear-gradient(to bottom, rgba(255,240,210,.04), transparent 40%)} }
.lobby-page .card h2{font-family:var(--display);font-size:28px;letter-spacing:var(--display-track);color:var(--ink);margin:0 0 12px;padding-bottom:8px;
  border-bottom:3px double var(--rule);align-items:baseline}
.lobby-page .card h2 .aside{font-family:var(--serif);font-style:italic;font-size:15px}
.lobby-page .note{color:var(--ink-soft)}

/* ---------- card rows that stand in for the selects (lobby-art.js) ---------- */
.lobby-page.art-ready .field.swapped{display:none}
.lobby-page .art-label{margin:16px 0 8px;font-family:var(--caps);font-size:14px;letter-spacing:.08em;color:var(--ink-soft)}
.lobby-page .art-row{display:grid;gap:10px;margin:0 0 6px}
.lobby-page .art-card{position:relative;display:grid;align-content:start;justify-items:start;gap:3px;min-height:56px;padding:10px 12px 12px;text-align:left;
  background:var(--grain),var(--btn);border:1px solid var(--card-edge);border-radius:10px;box-shadow:0 1px 0 rgba(255,255,255,.35) inset;transition:border-color .15s, box-shadow .15s, transform .15s}
.lobby-page .art-card:hover{background:var(--grain),var(--btn-hover);transform:translateY(-1px)}
.lobby-page .art-card.on{border-color:var(--scarlet);box-shadow:0 0 0 2px var(--scarlet), 0 10px 20px -14px var(--shadow)}
.lobby-page .art-card.on::after{content:"";position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--scarlet)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23f3ead3' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.lobby-page .art-card.off{opacity:.42;cursor:not-allowed;transform:none}
.lobby-page .art-card .nm{font-family:var(--display);font-size:19px;line-height:1.05;color:var(--ink);letter-spacing:var(--display-track)}
.lobby-page .art-card .ds{font-size:14px;line-height:1.3;color:var(--ink-soft)}
.lobby-page .art-card .ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;margin-bottom:4px;color:var(--scarlet);
  background:color-mix(in srgb,var(--scarlet) 10%,transparent);border:1px solid color-mix(in srgb,var(--scarlet) 35%,transparent)}
.lobby-page .art-card .ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lobby-page .art-card .ico svg .f{fill:currentColor;stroke:none}
/* the charts: a real picture of each board */
.lobby-page .art-row.charts{grid-template-columns:repeat(3,minmax(0,1fr))}
.lobby-page .charts .art-card{padding:8px 8px 10px}
.lobby-page .charts .thumb{display:block;width:100%;aspect-ratio:1;border-radius:7px;overflow:hidden;background:var(--paper-deep);margin-bottom:6px;
  box-shadow:0 1px 2px rgba(40,24,10,.2)}
.lobby-page .charts .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.lobby-page .charts .nm{font-size:17px}
.lobby-page .charts .ds{font-size:13px}
/* how many captains: a row of numbers */
.lobby-page .art-row.counts{grid-template-columns:repeat(auto-fit,minmax(56px,1fr));max-width:420px}
.lobby-page .counts .art-card{justify-items:center;align-content:center;padding:6px}
.lobby-page .counts .art-card.on::after{display:none}
.lobby-page .counts .art-card.on{background:var(--scarlet);color:var(--bone)}
.lobby-page .counts .art-card.on .nm{color:var(--bone)}
.lobby-page .counts .nm{font-size:24px;font-family:var(--numeral)}
/* the modes, and Pirates! in black and bone */
.lobby-page .art-row.modes,.lobby-page .art-row.ends{grid-template-columns:repeat(2,minmax(0,1fr))}
.lobby-page .modes .art-card.pirate{background:#151311;border-color:#000;color:var(--bone)}
.lobby-page .modes .art-card.pirate .nm{color:var(--bone)}
.lobby-page .modes .art-card.pirate .ds{color:#c9c1ad}
.lobby-page .modes .art-card.pirate .flag img{width:56px;height:auto;display:block;margin-bottom:2px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.lobby-page .modes .art-card.pirate.on{box-shadow:0 0 0 2px var(--gold), 0 10px 20px -14px #000;border-color:var(--gold)}
.lobby-page .modes .art-card.pirate.on::after{background-color:var(--gold)}
@media (min-width:640px){ .lobby-page .art-row.modes,.lobby-page .art-row.ends{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:900px) and (max-width:1100px){ .lobby-page .art-row.modes,.lobby-page .art-row.ends{grid-template-columns:repeat(2,minmax(0,1fr))} }
.lobby-page .ends .art-card{align-content:center}
.lobby-page .ends .nm{font-size:17px}
/* the pirate's rules panel, in black and bone */
.lobby-page #piraterow{margin:12px 0;padding:14px;border-radius:10px;background:#151311;color:var(--bone);border:1px solid #000;
  background-image:url(/img/marketing/pirate-flag.webp);background-repeat:no-repeat;background-position:right 10px top 10px;background-size:64px auto}
.lobby-page #piraterow .note{color:#d6cfbd;padding-right:70px}
.lobby-page #piraterow .field > label,.lobby-page #piraterow summary{color:#c9c1ad}
.lobby-page #piraterow select,.lobby-page #piraterow details.variants{border-color:#4a3f31}
.lobby-page #piraterow select{background:#221e1a;color:var(--bone)}

/* ---------- the seats: each captain as a small card ---------- */
.lobby-page .seats{display:grid;gap:8px;margin:18px 0 8px}
.lobby-page .seat{border:1px solid var(--card-edge);border-radius:10px;padding:10px 12px 12px;background:var(--grain),var(--btn);grid-template-columns:56px minmax(0,1fr);gap:6px 12px}
.lobby-page .seat .emblem{grid-row:span 2;width:56px;height:60px;padding:4px;border-radius:8px;background:color-mix(in srgb,var(--c) 12%,var(--field))}
.lobby-page .seat .who b{font-size:20px}
.lobby-page .seat .whos,.lobby-page .seat .says,.lobby-page .seat .pick{grid-column:1 / -1}
.lobby-page .seat .pick:has(input[hidden]){display:none}
/* the fleet: a chip in each fleet's colours; one another seat holds shows that seat's number, and choosing it swaps */
.lobby-page .seat .fleets{display:flex;flex-wrap:wrap;gap:6px;align-self:start}
.lobby-page .seat .chip{position:relative;width:26px;height:26px;min-height:0;padding:0;border-radius:50%;border:2px solid var(--card-edge);
  background:radial-gradient(circle at 50% 50%,var(--cb) 0 28%,var(--c) 30%);box-shadow:none}
.lobby-page .seat .chip:hover{transform:translateY(-1px)}
.lobby-page .seat .chip.on{border-color:var(--ink);box-shadow:0 0 0 2px var(--btn),0 0 0 4px var(--scarlet)}
.lobby-page .seat .chip.off{opacity:.3;cursor:not-allowed;transform:none}
.lobby-page .seat .chip[aria-disabled="true"].on{cursor:default}
.lobby-page .seat .chip .held{position:absolute;right:-7px;bottom:-7px;min-width:15px;height:15px;padding:0 3px;border-radius:8px;background:var(--ink);color:var(--btn);font:700 10px/15px var(--body,inherit);text-align:center}
/* who sails it: you, a friend, or a rival captain under her hat */
.lobby-page .seat .whos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:4px}
.lobby-page .seat .who-t{position:relative;display:grid;justify-items:center;align-content:start;gap:3px;min-height:0;padding:6px 4px 7px;border:1px solid var(--card-edge);border-radius:9px;background:var(--grain),var(--field);text-align:center}
.lobby-page .seat .who-t:hover{background:var(--grain),var(--btn-hover)}
.lobby-page .seat .who-t .face{display:grid;place-items:center;width:52px;height:52px;border-radius:8px;overflow:hidden;background:#f1e6cc;color:#5a4a36}
.lobby-page .seat .who-t .face img{width:100%;height:100%;object-fit:cover;display:block}
.lobby-page .seat .who-t .face svg{width:28px;height:28px}
.lobby-page .seat .who-t .wn{font-family:var(--display);font-size:16px;line-height:1.05;letter-spacing:var(--display-track)}
.lobby-page .seat .who-t .pips{transform:scale(.85)}
.lobby-page .seat .who-t.on{border-color:var(--scarlet);box-shadow:0 0 0 2px var(--scarlet)}
.lobby-page .seat .who-t.on::after{content:"";position:absolute;top:5px;right:5px;width:14px;height:14px;border-radius:50%;background:var(--scarlet)}
.lobby-page .seat .who-t.off{opacity:.4;cursor:not-allowed}
.lobby-page .seat .says{margin:0;font-size:13.5px;line-height:1.35;color:var(--ink-soft);font-style:italic}
@media (min-width:560px){ .lobby-page .seat .whos{grid-template-columns:repeat(6,minmax(0,1fr))} .lobby-page .seat .who-t .face{width:64px;height:64px} }

/* ---------- options and the big button ---------- */
.lobby-page details.variants{border-top:3px double var(--rule-soft)}
.lobby-page #create{width:100%;min-height:56px;font-size:19px;border-radius:8px;border:2px solid #1c1814;
  background:linear-gradient(180deg,#bf2e25,#a5231b);color:var(--bone);font-variant-caps:small-caps;letter-spacing:.06em;
  outline:1px solid rgba(243,234,211,.55);outline-offset:-6px;box-shadow:3px 3px 0 #1c1814}
.lobby-page #create:hover{background:linear-gradient(180deg,#a5231b,#86190f)}
.lobby-page #create:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1c1814}
.lobby-page #create:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.lobby-page #create:disabled{opacity:.7}
@media (min-width:640px){ .lobby-page #create{width:auto;min-width:260px} }

/* ---------- my games: a polished list with a picture of each chart ---------- */
.lobby-page .games{display:grid;gap:10px}
.lobby-page .games li{grid-template-columns:64px minmax(0,1fr) auto;gap:2px 12px;padding:10px;border:1px solid var(--card-edge);border-radius:10px;background:var(--grain),var(--btn)}
.lobby-page .games li:first-child{border-top:1px solid var(--card-edge)}
.lobby-page .games .gthumb{grid-row:1 / span 3;grid-column:1;align-self:start;width:64px;height:64px;border-radius:8px;overflow:hidden;background:var(--paper-deep)}
.lobby-page .games .gthumb img{width:100%;height:100%;object-fit:cover;display:block}
.lobby-page .games a.open{grid-column:2;font-size:21px}
.lobby-page .games .meta{grid-column:2}
.lobby-page .games .acts{grid-column:3;grid-row:1 / span 3}
.lobby-page .games .meta.due{display:inline-flex;justify-self:start;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;background:var(--scarlet);color:var(--bone);font-weight:600}

/* ---------- the tab bar on phones ---------- */
@media (max-width:899px){
  .lobby-page .lobbytabs{border-top:3px double var(--card-edge)}
  .lobby-page .lobbytabs button[aria-selected=true]{color:var(--scarlet)}
  .lobby-page .lobbytabs button[aria-selected=true]::before{background:var(--scarlet)}
}
@media (prefers-reduced-motion:reduce){ .lobby-page .art-card{transition:none} .lobby-page .art-card:hover{transform:none} }

/* ---------- finishing touches ---------- */
/* the tagline on a soft plaque so it reads over the battle */
.lobby-page .lobby-hero .sub{padding:6px 16px 7px;border-radius:22px;background:rgba(11,27,42,.62);backdrop-filter:blur(2px)}

/* every toggle at least 44 px */
.lobby-page summary{min-height:44px;display:flex;align-items:center}
/* no games yet: a picture of sealed orders and a word on what will be here */
.lobby-page #nogames::before{content:"";display:block;aspect-ratio:4/3;margin:0 0 12px;border-radius:9px;
  background:url(/img/print-orders-800.webp) center/cover;box-shadow:0 14px 26px -18px var(--shadow)}
.lobby-page #nogames{font-style:italic}
@media (min-width:640px){ .lobby-page .lobby-hero .sub{max-width:min(48em,92vw)} }


/* a choice this chart or seating does not have (the wind off the hex chart, the harbor master's die without neutral
   ports) stays in sight, greyed out, its label saying where it plays */
.lobby-page #windrow.off .check,.lobby-page #hmrow.off{opacity:.5}
.lobby-page #windrow.off label,.lobby-page #hmrow.off label{cursor:not-allowed}