/* The Crooked Table: a candlelit tavern. Fonts are the game's own (Pirata One, Alegreya, Pinyon Script). */

.ct {
  --bg: #140b06;
  --fg: #f3e3c4;
  --accent: #e9b45a;
  --red: #b8372b;
  --parch: #efdfbd;
  --parch-2: #e4cc9c;
  --ink: #2b1a10;
  --muted: #c9b38f;
  --head: "Pirata One", Georgia, serif;
  --serif: "Alegreya", Georgia, serif;
  font-family: var(--serif);
  font-size: 19px;
}
.ct ::selection { background: var(--accent); color: var(--ink); }
.ct .bar__nav a:hover, .ct .bar__nav a[aria-current] { color: var(--ink); }
.ct .bar__brand { color: var(--accent); }
.ct .kicker { color: var(--accent); }
.ct .btn { --btn-bg: var(--accent); --btn-fg: #22130a; }
.ct .btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg); }

.ct h2 { font: 400 clamp(46px, 6.4vw, 96px)/.95 var(--head); letter-spacing: .005em; }
.diamond { display: inline-block; width: .32em; height: .32em; margin: 0 .35em; background: var(--red); rotate: 45deg; vertical-align: .18em; }
.flourish { font: 400 clamp(30px, 3.2vw, 44px)/1 "Pinyon Script", cursive; color: var(--red); }

/* ---------- hero ---------- */
.ct-hero { position: relative; isolation: isolate; display: grid; align-items: end; min-height: max(100svh, 680px); overflow: hidden; }
.ct-hero picture, .ct-hero__art { position: absolute; inset: 0; z-index: -3; }
.ct-hero__art { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; animation: settle 2.4s var(--ease) both; }
@keyframes settle { from { scale: 1.08; filter: brightness(.4); } }
.ct-hero::before { /* the room gets darker toward the edges, warmer around the candles */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(42% 48% at 74% 30%, rgba(255, 175, 80, .2), transparent 70%),
    linear-gradient(0deg, var(--bg) 2%, rgba(20, 11, 6, .82) 30%, rgba(20, 11, 6, .15) 62%, rgba(20, 11, 6, .45)),
    radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(10, 5, 2, .75));
}
.ct-hero__in { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter) clamp(56px, 8vh, 96px); text-align: center; }
.ct-hero .stamp { color: var(--accent); }
.ct-hero h1 img { width: min(620px, 86vw); margin: 0 auto; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .7)); }
.ct-hero__hook { margin: 26px auto 0; max-width: 30em; font-size: clamp(21px, 2.1vw, 28px); line-height: 1.32; font-style: italic; }
.ct-hero__links { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 32px; margin-top: 34px; }
.ct-hero__facts { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 0; margin-top: 34px; color: var(--muted); font-size: 16px; }
.ct-hero__facts li + li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 14px; background: var(--red); rotate: 45deg; vertical-align: 2px; }

/* ---------- the notice: parchment pinned to the wall ---------- */
.notice { position: relative; padding: clamp(80px, 10vw, 150px) var(--gutter); background: radial-gradient(70% 60% at 50% 50%, #2a170c, var(--bg) 75%); }
.notice__paper {
  position: relative; max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 80px) clamp(26px, 6vw, 84px);
  background: var(--parch); color: var(--ink); rotate: -1.2deg;
  box-shadow: 0 40px 70px -20px rgba(0, 0, 0, .7), inset 0 0 80px rgba(120, 80, 30, .35);
  clip-path: polygon(0 1.5%, 4% 0, 18% 1%, 33% 0, 52% 1.2%, 70% 0, 86% .8%, 100% 0, 99.2% 22%, 100% 48%, 99% 76%, 100% 100%, 82% 99%, 63% 100%, 41% 98.8%, 22% 100%, 3% 99%, 0 100%, .8% 70%, 0 44%, 1% 18%);
}
.notice__paper::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: .35; mix-blend-mode: multiply; pointer-events: none; }
.notice__nail { position: absolute; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #9a8a7a, #3a3029 60%); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); }
.notice__nail:first-of-type { left: 24px; } .notice__nail:last-of-type { right: 24px; }
.notice h2 { color: var(--ink); margin: 6px 0 26px; }
.notice p:not(.flourish) { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; }
.notice p + p { margin-top: 14px; }
.notice__sig { margin-top: 30px !important; text-align: right; font: 400 30px/1 "Pinyon Script", cursive !important; color: #6b4a2b; }

/* ---------- roles + the deal ---------- */
.roles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(40px, 6vw, 100px); align-items: center; max-width: 1180px; margin: 0 auto; padding: clamp(60px, 8vw, 120px) var(--gutter) clamp(80px, 10vw, 140px); }
.roles > div > p { margin-top: 22px; color: var(--muted); max-width: 30em; }
.roles__list { margin-top: 34px; border-top: 1px solid rgba(233, 180, 90, .25); }
.roles__list li { display: grid; grid-template-columns: 11em 1fr; gap: 6px 22px; padding: 18px 0; border-bottom: 1px solid rgba(233, 180, 90, .25); }
.roles__list b { font: 400 27px/1.05 var(--head); color: var(--fg); }
.roles__list b small { display: block; margin-top: 4px; font: 500 13px/1.2 var(--body); font-variation-settings: "MONO" 1; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.roles__list span { color: var(--muted); }
@media (max-width: 560px) { .roles__list li { grid-template-columns: 1fr; } }

.deal { display: grid; justify-items: center; gap: 22px; }
.deal__hint { color: var(--muted); font-style: italic; text-align: center; min-height: 1.6em; }
.role-card { position: relative; width: min(320px, 72vw); aspect-ratio: 460 / 656; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1400px; }
.role-card__in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s var(--bounce); }
.role-card:hover .role-card__in { transform: translateY(-8px) rotate(-1.5deg); }
.role-card.is-up .role-card__in { transform: rotateY(180deg); }
.role-card.is-dealt { animation: dealt .7s var(--ease); }
@keyframes dealt { from { translate: 60vw -30px; rotate: 40deg; } }
.role-card__back, .role-card__face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4.5%; filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .6)); }
.role-card__face {
  transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 12% 11% 10%; color: var(--ink);
  background: radial-gradient(120% 90% at 50% 30%, #f6ead0, var(--parch-2));
  box-shadow: inset 0 0 0 7px #d6bd8c, inset 0 0 0 9px #8a6a3e, inset 0 0 0 14px #f1e2c2, inset 0 0 0 15px rgba(138, 106, 62, .6);
}
.role-card__kind { padding: 5px 14px; background: #3f2a1a; color: var(--parch); font: 700 12px/1 var(--serif); letter-spacing: .22em; text-transform: uppercase; border-radius: 3px; }
.role-card__name { margin: auto 0 12px; font: 400 clamp(34px, 3.4vw, 46px)/1 var(--head); }
.role-card__text { font-size: 16px; line-height: 1.35; color: #4a3424; }
.role-card__goal { margin-top: auto; padding: 7px 16px; background: var(--red); color: #fbeedd; font: 700 12px/1.2 var(--serif); letter-spacing: .12em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); }
@media (max-width: 860px) { .roles { grid-template-columns: 1fr; } .deal { order: -1; } }

/* ---------- a round, four clips ---------- */
.round { padding: clamp(70px, 9vw, 130px) var(--gutter); background: linear-gradient(#1b0f08, var(--bg)); }
.round__head { max-width: 1240px; margin: 0 auto clamp(40px, 5vw, 70px); }
.round__head p:not(.kicker) { margin-top: 18px; color: var(--muted); max-width: 34em; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 60px); max-width: 1240px; margin: 0 auto; counter-reset: step; }
.step:nth-child(even) { translate: 0 clamp(0px, 6vw, 90px); }
.step__clip { position: relative; padding: 10px; background: linear-gradient(145deg, #6b4526, #3a2312 40%, #5a3a1f); border-radius: 6px; box-shadow: 0 30px 50px -18px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 220, 160, .25); rotate: -.8deg; }
.step:nth-child(even) .step__clip { rotate: .9deg; }
.step__clip img { width: 100%; aspect-ratio: 616 / 347; object-fit: cover; border-radius: 2px; background: #000; }
.step__text { position: relative; margin-top: 26px; padding-left: 74px; }
.step__no { position: absolute; left: 0; top: -2px; display: grid; justify-items: center; width: 54px; padding: 8px 0 10px; background: var(--parch); color: var(--ink); border-radius: 6px; font: 400 30px/1 var(--head); box-shadow: 0 8px 18px rgba(0, 0, 0, .4); }
.step__no::after { content: ""; width: 9px; height: 9px; margin-top: 6px; background: var(--red); rotate: 45deg; }
.step h3 { font: 400 clamp(30px, 2.6vw, 38px)/1 var(--head); }
.step p { margin-top: 10px; color: var(--muted); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } .step:nth-child(even) { translate: none; } }

/* ---------- the regulars ---------- */
.regulars { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(36px, 6vw, 90px); align-items: center; max-width: 1240px; margin: 0 auto; padding: clamp(80px, 10vw, 150px) var(--gutter); }
.regulars__clip { position: relative; }
.regulars__clip img { width: 100%; border-radius: 50% 50% 8px 8px / 30% 30% 8px 8px; box-shadow: 0 0 0 10px #3a2312, 0 0 0 12px rgba(233, 180, 90, .4), 0 40px 70px -20px rgba(0, 0, 0, .8); }
.regulars p { margin-top: 20px; color: var(--muted); }
.regulars__names { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.regulars__names li { padding: 8px 16px 9px; background: var(--parch); color: var(--ink); font: 400 24px/1 var(--head); border-radius: 3px; rotate: var(--r, -2deg); box-shadow: 0 8px 16px rgba(0, 0, 0, .35); }
.regulars__names li:nth-child(2) { --r: 1.5deg; } .regulars__names li:nth-child(3) { --r: -1deg; } .regulars__names li:nth-child(4) { --r: 2.5deg; }
@media (max-width: 860px) { .regulars { grid-template-columns: 1fr; } }

/* ---------- screenshots ---------- */
.ct-shots { padding: 0 var(--gutter) clamp(80px, 10vw, 140px); }
.ct-shots__in { max-width: 1320px; margin: 0 auto; }
.ct-shots h2 { margin-bottom: 36px; }
.ct .shots a { border-radius: 4px; box-shadow: 0 0 0 1px rgba(233, 180, 90, .2); }

/* ---------- call to action ---------- */
.ct-cta { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: 78vh; padding: 100px var(--gutter); text-align: center; }
.ct-cta__art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ct-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 70% at 50% 50%, rgba(20, 11, 6, .55), rgba(20, 11, 6, .92)); }
.ct-cta h2 { font-size: clamp(56px, 9vw, 140px); }
.ct-cta p { margin: 20px auto 0; max-width: 30em; color: var(--fg); font-size: clamp(19px, 1.6vw, 22px); }
.ct-cta .ct-hero__links { margin-top: 36px; }