/* Spellridge Solitaire's holding page, in the game's own look (identity sheet spellridge.md §5):
   the deep-pine bookcloth table with its tapering bronze range, cream cotton cards with gilt edges,
   the name in gold capitals in the Didot stack, sentences in Hoefler Text, small lines in Baskerville.
   Type is the game's system stack, as in app/globals.css: nothing is downloaded.
   Tokens: app/globals.css :root. Table: .atmosphere-vignette and .atmosphere-mountains.
   Files: face.webp, back.webp, suit-heart.webp and range.webp are copied from public/; surface.jpg is public/table/surface.webp
   re-encoded at 512 px, the size the table tiles it at.
   Card grammar: app/components/Card.tsx (letter upper left, suit centred, value lower right). */

:root {
  --forest: #112018;
  --parchment: #EDE0C4;
  --ink: #1A1209;
  --gold: #C8922A;
  --bronze: #8A6020;
  --suit-red: #A8202C;
  --font-body: "Hoefler Text", Baskerville, "Palatino Linotype", Palatino, Georgia, serif;
  --font-display: Didot, "Bodoni 72", "Bodoni MT", "Hoefler Text", Baskerville, Georgia, serif;
  --font-button: Baskerville, "Hoefler Text", Palatino, Georgia, serif;
  --w: 104px;                         /* card width; everything on the card scales from it */
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--forest); }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  color: var(--parchment);
  font: 17px/1.45 var(--font-body);
  background-color: var(--forest);
  background-image:
    radial-gradient(85% 60% at 50% 38%, rgba(50, 61, 48, .10) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(70% 80% at 100% 100%, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(70% 80% at 0% 0%, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 55%),
    url(surface.jpg);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 512px 512px;
  -webkit-font-smoothing: antialiased;
}

/* the tapering range, printed in muted bronze, sitting low behind everything (at the page's foot, so on a short
   phone that scrolls the words stay above it) */
body { position: relative; }
body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .82;
  background: url(range.webp) no-repeat 50% calc(100% + 4vh) / max(100%, calc(34vh * 2.9931)) auto;
}

main {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px 56px;
  text-align: center;
}

/* a column on the table: two cards face down, then a word spelled down it */
.column { position: relative; width: var(--w); margin: 0 auto 40px; }

.card {
  position: relative;
  width: var(--w);
  height: calc(var(--w) * 1.4);
  border-radius: calc(var(--w) * .025);
  background: url(face.webp) 0 0 / 100% 100% no-repeat;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .35), 0 6px 14px rgba(0, 0, 0, .28);
}
.card + .card { margin-top: calc(var(--w) * -1.4 + var(--w) * .36); }      /* face-up step, tableLayout.ts */
.card.down { background-image: url(back.webp); }
.card.down + .card { margin-top: calc(var(--w) * -1.4 + var(--w) * .09); } /* face-down step */

.card b, .card i {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 253, 244, .85), 0 -.5px 0 rgba(40, 28, 10, .3);   /* ink-press */
}
.card b { left: calc(var(--w) * .09); top: calc(var(--w) * .05); font-size: calc(var(--w) * .30); }
.card i { right: calc(var(--w) * .11); bottom: calc(var(--w) * .09); font-size: calc(var(--w) * .17); color: var(--suit-red); }
.card s {
  position: absolute;
  left: calc(var(--w) * .175);
  top: calc(var(--w) * 1.4 * .5 - var(--w) * .325);
  width: calc(var(--w) * .65);
  height: calc(var(--w) * .65);
  background: url(suit-heart.webp) 0 0 / 100% 100% no-repeat;
}

h1 {
  margin: 0;
  font: 400 34px/1.05 var(--font-display);
  letter-spacing: .14em;
  margin-right: -.14em;                /* letter-spacing leaves a gap after the last capital */
  color: var(--gold);
  text-transform: uppercase;
}
h1 span {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  letter-spacing: .5em;
  margin-right: -.5em;
}

.line {
  max-width: 30ch;
  margin: 26px auto 0;
  font-size: 18px;
  text-wrap: balance;
}

.by {
  margin: 30px 0 0;
  font: 13px/1.4 var(--font-button);
  letter-spacing: .08em;
}
.by a {
  color: var(--parchment);
  text-decoration: none;
  border-bottom: 1px solid rgba(200, 146, 42, .55);
  padding-bottom: 2px;
}
.by a:hover { border-bottom-color: var(--gold); }
.by a:focus-visible { outline: 2px solid #E8C86A; outline-offset: 4px; }

/* short phones: keep the words above the range's ridge line */
@media (max-height: 700px) and (max-aspect-ratio: 5/4) {
  main { padding-bottom: max(56px, 30vh); }
}

/* words that cross the range keep the game's own caption shadow (.skyline-caption) */
.line, .by { text-shadow: 0 1px 3px #101b14, 0 2px 12px #101b14; }

@media (min-width: 720px) {
  :root { --w: 128px; }
  h1 { font-size: 52px; }
  h1 span { font-size: 18px; margin-top: 14px; }
  .line { font-size: 20px; max-width: 36ch; }
  .column { margin-bottom: 48px; }
}

/* wide screens, phones on their side too: the column and the words side by side, both above the range */
@media (min-aspect-ratio: 5/4) {
  :root { --w: min(128px, 17vh); }
  main { flex-direction: row; gap: clamp(32px, 6vw, 80px); padding: 24px 32px 30vh; text-align: left; }
  .column { margin: 0; flex: none; }
  .text { max-width: 440px; }
  .line { margin-left: 0; }
}

/* a phone on its side */
@media (max-height: 500px) and (min-aspect-ratio: 5/4) {
  main { padding-bottom: calc(22vh + 16px); }
  h1 { font-size: 36px; }
  h1 span { font-size: 14px; margin-top: 8px; }
  .line { font-size: 17px; margin-top: 14px; }
  .by { margin-top: 14px; }
}