/* Who's Coming, adapted from the v6 Apps Script styles (Website/v6/Code.gs) */
.lvl-new { --lvl: #7bc67e; }
.lvl-beginner { --lvl: #6aa8e8; }
.lvl-experienced { --lvl: #f0c040; }

.ts-label { margin: 0; color: #e6b34a; text-transform: uppercase; letter-spacing: 4px; font-size: 13px; font-weight: 700;
            text-shadow: 1px 1px 0 rgba(0, 0, 0, .6); }
.ts-count { font-family: Dumbledor, serif; line-height: 1; color: #e6b34a; text-shadow: 0 3px 4px #000; }
.ts-full-badge { display: inline-block; margin-left: 6px; padding: 1px 12px; border: 1px solid #e6b34a; border-radius: 999px;
                 background: #8c1c13; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.6; letter-spacing: 3px;
                 text-transform: uppercase; text-shadow: none; vertical-align: middle; }
.ts-levels { margin: 0 0 12px; text-shadow: 1px 1px 2px #000; }
.ts-levels span { display: inline-block; margin: 0 6px; white-space: nowrap; }
.ts-dot { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%;
          background: var(--lvl); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); vertical-align: middle; }

/* Home page strip */
.ts-strip { text-align: center; font-family: var(--text-font); font-size: 18px; color: #fff; }
.ts-strip .ts-label { font-size: 15px; letter-spacing: .15em; }
.ts-headline { margin: 4px 0 8px; font-size: 20px; line-height: 1.3; text-shadow: 1px 1px 2px #000; }
.ts-headline .ts-count { font-size: 1.6em; vertical-align: middle; margin-right: .2em; }
.ts-names { max-width: 900px; margin: 0 auto; line-height: 1.7; color: #f3ead6; text-shadow: 1px 1px 2px #000; }
.ts-names span { white-space: nowrap; }
.ts-names span:not(:last-child)::after { content: '\00b7'; color: #e6b34a; margin: 0 .25em 0 .5em; }
.ts-names small { font-size: .8em; color: #e6b34a; }

/* Full Town Square: tokens sit on a circle like the botc.app Town Square; narrow screens get a simple grid.
   The background is TPI's framed one, drawn as a border image so the frame stays whole and the content sits inside it */
.ts-page { --frame: clamp(64px, 9vw, 120px);
           padding: calc(var(--frame) * .45 + 12px) calc(var(--frame) * .3 + 4px) calc(var(--frame) * .45 + 16px);
           text-align: center; color: #fff; font-family: var(--text-font); background: #241540;
           border: 0 solid transparent; border-image: url(/art/background-1920-dark.webp) 210 fill / var(--frame) stretch; }
/* Dates as on the posters: LHF Unlovable with the brand gold gradient. Its spaces are 0.55em, so close words up to 0.22em */
.ts-date, .ts-strip-date { font-family: 'LHF Unlovable', Dumbledor, serif; font-weight: normal; word-spacing: -.33em; color: transparent;
                           background: linear-gradient(#ffecaf, #cda046); -webkit-background-clip: text; background-clip: text;
                           filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .8)); }
.ts-strip-date { margin: 4px 0 0; font-size: 48px; line-height: 1.2; }
@media (max-width: 560px) { .ts-strip-date { font-size: 34px; } }
.ts-date { margin: 6px 0 0; font-size: 44px; line-height: 1.15; }
.ts-separator { width: min(420px, 80%); height: 36px; margin: 2px auto 6px; background: url(/art/separator.webp) center / contain no-repeat; }

.ts-square { --size: min(90vw, 640px);
             --t: clamp(40px, calc(3.1416 * var(--size) / (var(--n) * 1.12 + 3.1416)), 100px);
             position: relative; width: var(--size); height: var(--size); margin: 0 auto; }
.ts-ring { position: absolute; inset: calc(var(--t) / 2); background: url(/art/ring.webp) center / contain no-repeat; }
.ts-centre { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
             width: calc(var(--size) - 3 * var(--t)); max-width: 320px; }
.ts-centre .ts-count { margin: 0; font-size: 72px; }
.ts-summary { margin: 4px 0 18px; font-size: 20px; line-height: 1.3; text-shadow: 1px 1px 2px #000; }
.ts-full-line { margin: -6px 0 16px; }
.ts-full-line .ts-full-badge { margin-left: 0; font-size: 15px; }
.ts-centre .ts-levels { margin: -8px 0 16px; font-size: 15px; }
.ts-seat { position: absolute; top: 50%; left: 50%; width: var(--t); height: var(--t);
           margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2); padding: calc(var(--t) * .1);
           transform: rotate(calc(var(--i) * 360deg / var(--n))) translateY(calc((var(--size) - var(--t)) / -2))
                      rotate(calc(var(--i) * -360deg / var(--n)));
           background: radial-gradient(circle closest-side, rgba(250, 242, 222, .9) 50%, rgba(250, 242, 222, 0)),
                       url(/art/token.webp) center / cover;
           border-radius: 50%; box-shadow: 0 4px 10px rgba(0, 0, 0, .75);
           display: flex; flex-direction: column; align-items: center; justify-content: center;
           font-family: var(--display-font); line-height: 1.05; color: #1a0d02; text-shadow: 0 0 3px #fbf3dc, 0 0 6px #fbf3dc; }
.ts-seat.lvl { box-shadow: 0 0 0 calc(var(--t) * .05) var(--lvl), 0 4px 10px rgba(0, 0, 0, .75); }
.ts-seat .ts-first { display: block; width: 100%; white-space: nowrap; overflow: hidden; font-size: calc(var(--t) * .2); }
.ts-seat .ts-initial { display: block; font-size: calc(var(--t) * .15); color: #6e1a1a; }
.ts-seat small { display: block; margin-top: 2px; font-family: var(--text-font); font-size: calc(var(--t) * .12); color: #6e1a1a; }

/* Over 15 players: two circles, side by side on wide screens */
.ts-overview { margin: 8px 0 28px; }
.ts-overview .ts-count { margin: 0; font-size: 72px; }
.ts-circles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 40px; justify-content: center; }
.ts-circles .ts-square { --size: min(90vw, 560px); }
@media (min-width: 1100px) {
  .ts-circles { grid-template-columns: repeat(2, auto); }
  .ts-circles .ts-square { --size: min(42vw, 560px); }
}
/* Circles fill the space they're given, so they shrink to fit phones */
@supports (width: 1cqi) {
  .ts-page { container-type: inline-size; }
  .ts-square { --size: min(100cqi, 640px); }
  .ts-circles .ts-square { --size: min(100cqi, 560px); }
  @media (min-width: 1100px) { .ts-circles .ts-square { --size: min(calc(50cqi - 20px), 560px); } }
}
.ts-circle-name { margin: 0 0 4px; font: 400 22px/1.1 var(--kerned, var(--display-font)); text-transform: uppercase; color: #e6b34a;
                  text-shadow: 1px 1px 2px #000; }
.ts-circles .ts-centre .ts-count { font-size: 56px; }
.ts-circles .ts-summary { margin-bottom: 14px; }
.ts-note { max-width: 640px; margin: 28px auto 0; font-size: 16px; line-height: 1.5; color: #f3ead6; text-shadow: 1px 1px 2px #000; }

.ts-book { display: inline-block; padding: 6px 28px; border: 2px solid transparent; border-radius: 15px;
           color: #fff; text-decoration: none; font-size: 19px; font-weight: 700; text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
           background-image: radial-gradient(at 0 -15%, rgba(255, 255, 255, .07) 70%, rgba(255, 255, 255, 0) 71%),
                             linear-gradient(#ffc240, rgba(5, 0, 0, .22)), linear-gradient(#292929, #805700);
           background-origin: padding-box, padding-box, border-box; background-clip: padding-box, padding-box, border-box;
           box-shadow: inset 0 1px 1px #cc8a00, 0 0 10px #000; }
.ts-book:hover { filter: brightness(1.12); }

@media (max-width: 560px) {
  .ts-date { font-size: 32px; }
  .ts-square { --t: clamp(40px, calc(3.1416 * var(--size) / (var(--n) * 1.12 + 3.1416)), 70px); }
  .ts-centre { width: calc(var(--size) - 2.3 * var(--t)); }
  .ts-centre .ts-count, .ts-circles .ts-centre .ts-count { font-size: 44px; }
  .ts-summary { margin: 2px 0 8px; font-size: 14px; }
  .ts-circles .ts-summary { margin-bottom: 6px; }
  .ts-centre .ts-levels { margin: 0 0 8px; font-size: 12px; line-height: 1.4; }
  .ts-centre .ts-levels span { margin: 0 3px; }
  .ts-full-line { margin: 0 0 8px; }
  .ts-full-line .ts-full-badge { padding: 0 8px; font-size: 12px; letter-spacing: 2px; }
  .ts-square .ts-centre .ts-book { margin: 0 8px; padding: 8px 14px 7px; font-size: 14px; }
  .ts-circle-name { font-size: 15px; }
}