/* Spellorama's holding page, in the game's own look (identity sheet spellorama.md §5, the league shirt, Micah 2026-11-13: "B, League shirt"):
   the week's house as the ground, one panel of the shirt on the lane, the name chain-stitched in Yellowtail with the bowling-ball o,
   everything read in Rubik. It is the game's first-time welcome panel (gen/game_template.html .wpanel, .wmark) with the practice rack left out.
   Picture: game/art/mon.jpg (Comet Lanes, the house the game ships with, a placeholder), re-encoded as house.webp.
   Tokens, the twill, the yoke and the stitched edge: gen/game_template.html :root, SLUB, YOKE, STITCHED (a panel's edge), produced by the
   game's own stitchURI() and copied here as they come out. The maker credit is the game's .label.madeby.
   Fonts are served from this folder (copied from gen/fonts with their licences); nothing loads from elsewhere. */

@font-face { font-family: Yellowtail; font-style: normal; font-weight: 400; font-display: block; src: url(fonts/Yellowtail-Regular.latin.woff2) format("woff2"); }
@font-face { font-family: Rubik; font-style: normal; font-weight: 300 900; font-display: swap; src: url(fonts/Rubik-Variable.latin.woff2) format("woff2"); }

:root {
  --cloth: #1B1716;
  --yoke: #7FA9D6;
  --yoke-deep: #4F7FB3;
  --thread: #F4E9D4;
  --sub: #C9BDA8;
  --floor: #2A211C;                    /* the game's ground behind the picture */
  --script: Yellowtail, "Snell Roundhand", cursive;
  /* the weave: a twill running up to the right over an uneven slub */
  --slub: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%22.055%20.9%22%20numOctaves%3D%222%22%20seed%3D%227%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%20.55%200%200%200%20-.2%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22180%22%20height%3D%22180%22%20filter%3D%22url(%23n)%22%20opacity%3D%22.36%22%2F%3E%3C%2Fsvg%3E");
  --twill: var(--slub), repeating-linear-gradient(-56deg, rgba(255,255,255,.042) 0 .8px, rgba(255,255,255,0) .8px 2.9px);
  --lay: 0 1px 0 rgba(0,0,0,.55), 0 3px 4px rgba(0,0,0,.42), 0 9px 14px rgba(0,0,0,.26);
  /* the yoke: the blue shoulder panel curving across the top, its seam top-stitched in cream */
  --yoke-img: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20416%2036%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200H416V17Q208%2031%200%2017Z%22%20fill%3D%22%237FA9D6%22%2F%3E%3Cpath%20d%3D%22M0%2016.2Q208%2030.2%20416%2016.2%22%20fill%3D%22none%22%20stroke%3D%22%235F8FC4%22%20stroke-width%3D%221.6%22%2F%3E%3Cpath%20d%3D%22M0%2018.2Q208%2032.2%20416%2018.2%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C.55)%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%2022.6Q208%2036%20407%2022.6%22%20fill%3D%22none%22%20stroke%3D%22rgba(0%2C0%2C0%2C.5)%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%225.2%206.3%22%20transform%3D%22translate(0%20.9)%22%2F%3E%3Cpath%20d%3D%22M9%2022.6Q208%2036%20407%2022.6%22%20fill%3D%22none%22%20stroke%3D%22%23F4E9D4%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%225.2%206.3%22%2F%3E%3C%2Fsvg%3E");
  color-scheme: dark;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 12px max(12px, env(safe-area-inset-bottom));
  background: var(--floor) url(house.webp) center top / cover no-repeat;
  color: var(--thread);
  font: 400 16px/1.4 Rubik, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* a panel of the shirt: black twill, the blue yoke curving across the top, cream stitches round a turned edge */
.panel {
  position: relative;
  width: 100%;
  max-width: 416px;
  padding: 44px 24px 22px;
  border-radius: 28px;
  background: var(--twill), var(--yoke-img) top / 100% 37px no-repeat, var(--cloth);
  box-shadow: var(--lay), inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.045), inset 0 -2px 3px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}
.panel::before { content: ""; position: absolute; inset: 3px; pointer-events: none; }
.panel::before { border: 25px solid transparent; border-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2261.5%22%20height%3D%2261.5%22%20viewBox%3D%220%200%2061.5%2061.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Crect%20x%3D%221.1%22%20y%3D%221.1%22%20width%3D%2259.3%22%20height%3D%2259.3%22%20rx%3D%2223.9%22%20stroke%3D%22rgba(255%2C255%2C255%2C.075)%22%20stroke-width%3D%222%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2253.5%22%20height%3D%2253.5%22%20rx%3D%2221%22%20stroke%3D%22rgba(0%2C0%2C0%2C.44)%22%20stroke-width%3D%225%22%2F%3E%3Cpath%20d%3D%22M4.24%2021.86h0M5.45%2017.34h0M8.59%2011.9h0M11.9%208.59h0M17.34%205.45h0M21.86%204.24h0M39.64%204.24h0M44.16%205.45h0M49.6%208.59h0M52.91%2011.9h0M56.05%2017.34h0M57.26%2021.86h0M57.26%2039.64h0M56.05%2044.16h0M52.91%2049.6h0M49.6%2052.91h0M44.16%2056.05h0M39.64%2057.26h0M21.86%2057.26h0M17.34%2056.05h0M11.9%2052.91h0M8.59%2049.6h0M5.45%2044.16h0M4.24%2039.64h0M28.15%204h0M33.35%204h0M28.15%2057.5h0M33.35%2057.5h0M4%2028.15h0M4%2033.35h0M57.5%2028.15h0M57.5%2033.35h0%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.7)%22%20stroke-width%3D%223.4%22%2F%3E%3Cpath%20d%3D%22M4.24%2021.86A21%2021%200%200%201%205.45%2017.34M8.59%2011.9A21%2021%200%200%201%2011.9%208.59M17.34%205.45A21%2021%200%200%201%2021.86%204.24M39.64%204.24A21%2021%200%200%201%2044.16%205.45M49.6%208.59A21%2021%200%200%201%2052.91%2011.9M56.05%2017.34A21%2021%200%200%201%2057.26%2021.86M57.26%2039.64A21%2021%200%200%201%2056.05%2044.16M52.91%2049.6A21%2021%200%200%201%2049.6%2052.91M44.16%2056.05A21%2021%200%200%201%2039.64%2057.26M21.86%2057.26A21%2021%200%200%201%2017.34%2056.05M11.9%2052.91A21%2021%200%200%201%208.59%2049.6M5.45%2044.16A21%2021%200%200%201%204.24%2039.64M28.15%204H33.35M28.15%2057.5H33.35M4%2028.15V33.35M57.5%2028.15V33.35%22%20transform%3D%22translate(0%20.9)%22%20stroke%3D%22rgba(0%2C0%2C0%2C0.55)%22%20stroke-width%3D%221.9%22%2F%3E%3Cpath%20d%3D%22M4.24%2021.86A21%2021%200%200%201%205.45%2017.34M8.59%2011.9A21%2021%200%200%201%2011.9%208.59M17.34%205.45A21%2021%200%200%201%2021.86%204.24M39.64%204.24A21%2021%200%200%201%2044.16%205.45M49.6%208.59A21%2021%200%200%201%2052.91%2011.9M56.05%2017.34A21%2021%200%200%201%2057.26%2021.86M57.26%2039.64A21%2021%200%200%201%2056.05%2044.16M52.91%2049.6A21%2021%200%200%201%2049.6%2052.91M44.16%2056.05A21%2021%200%200%201%2039.64%2057.26M21.86%2057.26A21%2021%200%200%201%2017.34%2056.05M11.9%2052.91A21%2021%200%200%201%208.59%2049.6M5.45%2044.16A21%2021%200%200%201%204.24%2039.64M28.15%204H33.35M28.15%2057.5H33.35M4%2028.15V33.35M57.5%2028.15V33.35%22%20stroke%3D%22%23F4E9D4%22%20stroke-width%3D%221.9%22%2F%3E%3C%2Fsvg%3E") 25 round; }

/* the name: the ten-pin mark over the chain-stitched script */
.mark { margin: 0; display: flex; flex-direction: column; align-items: center; font-weight: 400; }
.pins { width: 38px; height: auto; display: block; fill: var(--thread); }

.scr {
  position: relative;
  display: block;
  font: 400 min(76px, 19vw)/1.08 var(--script);
  white-space: nowrap;
  padding: 6px 18px 14px 14px;
  margin: -6px -10px -12px;
  /* the game's stand-in until the stitches are drawn: a cream hatch */
  background: repeating-linear-gradient(107deg, #F7EEDC 0 1.5px, #DFD0B3 1.5px 2.1px);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2.5px 2.5px 0 var(--yoke-deep));
}
.scr .ball { display: inline-block; width: .37em; height: .37em; margin: 0 -.012em 0 .008em; vertical-align: -.018em; overflow: visible; }   /* the o is a bowling ball */
.scr.sewn { background: none; }
.scr.sewn > span { color: transparent; -webkit-text-fill-color: transparent; }
.scr > svg.sew { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; display: block; }
/* rows of chain stitch following each letter's edge: a dark groove, then the loops laid over it, twice, clipped to the letter */
.sew text { font-family: var(--script); fill: none; stroke-linejoin: round; }
.sew .sf { fill: #F6ECD9; }
.sew .s2, .sew .s1 { stroke: #BBA880; } .sew .s2 { stroke-width: .15em; } .sew .s1 { stroke-width: .076em; }
.sew .s2t, .sew .s1t { stroke: #F8EFDD; stroke-dasharray: .036em .0115em; } .sew .s2t { stroke-width: .139em; stroke-dashoffset: .02em; } .sew .s1t { stroke-width: .064em; }

.line { margin: -8px 0 0; font-size: 16px; font-weight: 500; color: var(--sub); }

/* the game's maker credit (.label.madeby) */
.by { margin: -2px 0 -8px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.by a { display: inline-block; padding: 12px 8px 8px; color: var(--sub); text-decoration: none;   /* the padding is a bigger place to tap; the underline stays under the words */
  background: linear-gradient(rgba(201, 189, 168, .45), rgba(201, 189, 168, .45)) 8px calc(100% - 7px) / calc(100% - 16px) 1px no-repeat; }
.by a:hover { color: var(--thread); }
.by a:focus-visible { outline: 2px solid var(--thread); outline-offset: 4px; border-radius: 3px; }

/* a laptop or a wide tablet: as in the game, the picture still covers the window and only the panel keeps a phone's width */
@media (min-aspect-ratio: 62/100) and (min-height: 501px) {
  body { background-position: center 42%; padding-bottom: 24px; }
}

/* a phone on its side: the panel sits on the lane with the pins still in view */
@media (max-height: 500px) and (min-aspect-ratio: 1/1) {
  body { background-position: center 38%; background-size: cover; padding: 12px; }
  .panel { max-width: 360px; padding: 34px 20px 16px; }
  .scr { font-size: 56px; }
  .pins { width: 30px; }
}