/* Shared by the static how-to-play pages. The wordmark and plank rules are copied from client/src/lobby.css
   (home title section): keep them in sync when the menu title changes. */
@font-face{font-family:"Departure Mono";src:url(/fonts/DepartureMono-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Jersey 10";src:url(/fonts/Jersey10-Regular.ttf);font-display:swap}
:root{--ink:#0b0908}
/* The game UI font on a 11px grid: sizes are multiples of 11 and there is one weight, so no bold anywhere (it would be synthesised). */
body{margin:0;min-height:100vh;image-rendering:pixelated;color:#e6dfcf;font:22px/1.5 "Departure Mono",monospace;
  /* The war room backdrop (lobby.css .lobby-shell): dark veil, a grey blended in saturation mode, the hide tile. */
  background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)),linear-gradient(#7d7870,#7d7870),url(/ui/hide-fill.png) 0 0/128px 128px,#211d1a;background-blend-mode:normal,saturation,normal,normal}
main{max-width:60rem;margin:0 auto;padding:3.5rem 1rem 4rem}
h1,h2,b{font-weight:400}h1{font-size:33px;line-height:1.2;margin:4rem 0 .75rem;color:#f2c46d}h2{margin:3.5rem 0 .4rem;color:#f2c46d;font-size:22px}b{color:#f2c46d}
a{color:#8fc4ff}kbd{background:#2a332d;border:1px solid #445;border-radius:4px;padding:0 .35em;font:inherit}
/* The gold primary button of the menu (lobby.css .home-primary + .gold-button): iron face tinted gold, frame tinted to match. */
.play{position:relative;box-sizing:border-box;display:block;width:max-content;min-height:54px;margin:1.6rem auto;padding:12px 110px;border:4px solid transparent;
  color:#ece3cf;text-decoration:none;text-transform:uppercase;letter-spacing:.04em;text-align:center;text-shadow:0 2px 0 #0b0908;
  background:linear-gradient(rgba(255,255,255,.13),rgba(255,255,255,0) 45%,rgba(0,0,0,.32)),linear-gradient(rgba(212,130,48,.34),rgba(164,86,28,.34)),url(/ui/iron-btn.png) 0 0/126px 126px,#515252;background-clip:padding-box;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.26),inset -1px -1px 0 rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.5)}
.play::after{content:"";position:absolute;inset:-4px;pointer-events:none;border:solid transparent;border-width:14px;border-image:url(/ui/iron-thin.png) 14/14px round;filter:sepia(.7) saturate(2.4) brightness(1.15) hue-rotate(-10deg)}
@media (max-width:560px){.play{padding:12px 44px}}
.play:hover{filter:brightness(1.18)}.play:active{transform:translateY(3px)}
.play:focus-visible{outline:3px solid #ffb55a;outline-offset:6px}
nav{font:22px/1 "Departure Mono",monospace;margin:0 0 1rem;text-align:center;letter-spacing:.04em}nav a{text-decoration:none}nav a:hover{text-decoration:underline}
.brand{display:flex;flex-direction:column;align-items:center;gap:14px;margin:.5rem 0 0;text-decoration:none}
.brand img{width:120px;height:120px;image-rendering:pixelated}
.brand .wordmark-text{font-size:72px}
@media (max-width:560px){.brand .wordmark-text{font-size:44px}.wordmark-box{padding:4px 30px 10px}}

/* Home title as live text filled with the button metal (background-clip:text), outlined with stacked 2px drop-shadows. Multiples of 11 px.
   The glint is the first background layer, over the metal texture, a hard-edged diagonal band, stepped across the letters every 5s like the old image version. */
.wordmark-text {
  display: block; width: fit-content; margin: 0 auto; text-align: center; white-space: nowrap;
  font: 400 120px/1 "Jersey 10", "Departure Mono", monospace; letter-spacing: .04em;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none;
  background:
    linear-gradient(135deg, transparent 0 48.1%, rgba(255,255,230,.22) 48.1% 49.05%, rgba(255,255,230,.5) 49.05% 50.95%, rgba(255,255,230,.22) 50.95% 51.9%, transparent 51.9%) 100% 0 / 220% 100% no-repeat,
    linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)),
    url('/ui/iron-btn.png') 0 0 / 126px 126px, #515252;
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000) drop-shadow(0 3px 0 rgba(0,0,0,.55));
  animation: wordmark-glint 5s steps(26, end) infinite;
}
/* The band (about 28px wide, like the image version) crosses in the first 23% of the 5s cycle (~1.1s, left to right), then rests. */
@keyframes wordmark-glint {
  from { background-position: 100% 0, 0 0, 0 0; }
  23%, to { background-position: 0% 0, 0 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .wordmark-text { animation: none; } }
/* Team colours: "Banner" blue, "Forge" red (blue is the left banner everywhere), as a tint that grows from subtle at the top of the letters (metal) to strong at the bottom. Each word is a see-through tint clipped to its own letters and painted OVER the parent's
   metal + glint (both are clipped to the same glyphs), so one glint sweep still crosses the whole title. */
.wm-banner { background: linear-gradient(rgba(65,135,255,.25) 0%, rgba(65,135,255,.95) 100%); -webkit-background-clip: text; background-clip: text; }
.wm-forge  { background: linear-gradient(rgba(235,70,52,.25) 0%, rgba(235,70,52,.95) 100%); -webkit-background-clip: text; background-clip: text; }


/* The home title sits on a wooden plank: wood-plank.png (wood-5 + its mirror, so it tiles sideways without a seam), a 3px ink outline,
   a lit top edge and a dark lower edge, and four pixel-art rivets (rivet.png, 7x7 shown at 2x) in the corners, in the letters' greys. Home and loading titles. */
.wordmark-box {
  padding: 4px 54px 10px;
  background:
    url('/ui/rivet.png') left 12px top 8px / 14px 14px no-repeat,
    url('/ui/rivet.png') right 12px top 8px / 14px 14px no-repeat,
    url('/ui/rivet.png') left 12px bottom 12px / 14px 14px no-repeat,
    url('/ui/rivet.png') right 12px bottom 12px / 14px 14px no-repeat,
    linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)), url('/ui/wood-plank.png') 0 0 / auto 252px repeat-x;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.14), inset 0 -4px 0 rgba(0,0,0,.45), 0 0 0 3px var(--ink), 0 4px 6px rgba(0,0,0,.45);
}
.tagline span{white-space:nowrap}
.foot{text-align:center;margin:1.6rem 0}
.tagline{text-align:center;color:#f2c46d;font-size:33px;line-height:1.2;margin:3.5rem 0 .5rem;text-wrap:balance;text-shadow:0 3px 0 #0b0908}
@media(max-width:420px){.tagline{font-size:22px}}
.clip{display:block;width:100%;max-width:30rem;margin-inline:auto;height:auto;aspect-ratio:4/3;margin-block:1rem 1.5rem;border:3px solid #5e574f;background:#000;image-rendering:pixelated}
.clips{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1rem 0 1.5rem}
.clips video{width:100%;height:auto;aspect-ratio:4/3;border:3px solid #5e574f;background:#000;image-rendering:pixelated}
.clips.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:560px){.clips,.clips.two{grid-template-columns:1fr}}