/* Main menu and introduction pages. The values follow the challenge client's
   own menu theme (client/src/styles.css) so the site opens on the same screen
   that players saw during the event. */

@font-face{font-family:'Impactful';src:url('menu-title.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Quest';src:url('menu-label.woff2') format('woff2');font-display:swap}
@font-face{font-family:'RoyaltyMono';src:url('menu-ribbon.woff2') format('woff2');font-display:swap}
@font-face{font-family:'PixelSans';src:url('menu-body.woff2') format('woff2');font-display:swap}
/* The guide already ships Pirata One unmodified (OFL, Reserved Font Name), so reuse that file. */
@font-face{font-family:'Pirata One';src:url('pirata.ttf') format('truetype');font-display:swap}

:root{
  --parchment:#e9d8ad;
  --parchment-dark:#cdb277;
  --wood:#3a2416;
  --wood-dark:#241309;
  --wood-light:#5a3a22;
  --gold:#f4c542;
  --gold-dark:#c8902a;
  --ink:#2c1a0d;
  /* The game's --blood (#c0392b) is 3.9:1 on parchment; this darker red reaches 4.8:1 for body-size text. */
  --blood:#a8301f;
  --blood-dark:#7e241a;
  --pointer:url('menu-cursor.png') 17 13,default;
  --hand:url('menu-cursor-hand.png') 17 13,pointer;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#0c0a08;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  font-family:'PixelSans',system-ui,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:none;
  cursor:var(--pointer);
}
img{image-rendering:pixelated}
a{cursor:var(--hand)}

/* The painted castle courtyard stays fixed while a long page scrolls over it. */
.menu-page::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(rgba(8,8,16,.22),rgba(8,8,18,.40)),
    url('menu-background.webp') center/cover no-repeat;
}
.skip{position:absolute;left:12px;top:-60px;z-index:40;padding:10px 14px;background:var(--parchment);color:var(--ink);font-family:'Quest',sans-serif;font-size:20px}
.skip:focus{top:12px}

/* ---------------- Main menu ---------------- */
.menu-screen{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:calc(56px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(64px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));
  text-align:center;
}
.title-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
  padding:26px clamp(34px,9.4vw,120px);
}
.title-blade{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:100%;
  aspect-ratio:712/128;
  background:url('sword.png') center/contain no-repeat;
  filter:drop-shadow(0 6px 8px #000b);
  image-rendering:pixelated;
  pointer-events:none;
}
.game-title{
  position:relative;
  z-index:1;
  font-family:'Impactful',sans-serif;
  font-size:clamp(44px,9vw,110px);
  line-height:.9;
  color:var(--gold);
  letter-spacing:2px;
  text-shadow:0 3px 0 var(--gold-dark),0 6px 0 #7a4e12,0 10px 14px #000a;
  -webkit-text-stroke:2px #4a2f0c;
  paint-order:stroke fill;
}
/* Safari also paints the shadow around the stroke, so soften it there, as the game does. */
@supports (background:-webkit-named-image(i)){
  .game-title{text-shadow:0 2px 0 var(--gold-dark),0 4px 0 #7a4e12,0 4px 6px #0007}
}
.title-sub{
  font-family:'Quest',sans-serif;
  color:var(--parchment);
  font-size:clamp(22px,2.7vw,32px);
  letter-spacing:4px;
  text-transform:uppercase;
  text-wrap:balance;
  margin-bottom:28px;
  text-shadow:0 2px 4px #000;
}
.welcome-line{
  font-family:'Quest',sans-serif;
  color:var(--parchment);
  letter-spacing:2px;
  font-size:22px;
  text-transform:uppercase;
  text-shadow:0 2px 3px #000;
  margin-bottom:22px;
}
.welcome-line span{color:var(--gold)}
.menu-buttons{
  display:grid;
  gap:14px;
  width:min(100%,520px);
}
.menu-buttons .btn{width:100%;min-width:0}
/* Absolute, as in the game, so a short screen scrolls it below the buttons instead of over them.
   The game draws it at #ffffff55; 70% white keeps small text above 4.5:1 on the courtyard. */
.corner-credit{
  position:absolute;
  bottom:calc(8px + env(safe-area-inset-bottom));
  right:max(12px,env(safe-area-inset-right));
  color:#ffffffb3;
  font-size:12px;
  text-shadow:0 1px 2px #000;
}

/* ---------------- Buttons ----------------
   The Tiny Swords button sprite is a 9-slice border image. :active swaps to the
   pressed sprite, whose face sits about 5px lower. */
.btn{
  font-family:'Quest',sans-serif;
  font-size:26px;
  letter-spacing:1px;
  color:#fdfcf4;
  text-decoration:none;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-style:solid;
  border-width:17px 22px 23px 22px;
  border-image-source:url('menu-button.png');
  border-image-slice:47 45 47 45 fill;
  border-image-repeat:stretch;
  padding:0 8px;
  min-width:236px;
  min-height:72px;
  line-height:1;
  cursor:var(--hand);
  text-shadow:0 2px 0 #103039,0 0 5px #0007;
  -webkit-text-stroke:.6px #0a1f27;
  paint-order:stroke fill;
  image-rendering:pixelated;
  transition:filter .1s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:active,.btn.is-pressed{border-image-source:url('menu-button-pressed.png');border-width:22px 22px 18px 22px}
.btn:focus-visible{outline:3px solid #bfe9ff;outline-offset:3px}

/* ---------------- Parchment dialog (introduction) ---------------- */
.dialog-screen{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  justify-content:center;
  padding:calc(72px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
}
.panel{
  position:relative;
  background:var(--parchment);
  border:3px solid #2a2740;
  border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.5),inset 0 0 0 3px #d8c6a2;
}
.dialog{
  width:min(100%,860px);
  align-self:flex-start;
  padding:64px clamp(18px,4vw,44px) 28px;
  scroll-margin-top:60px;
}
/* The purple ribbon drapes over the panel's top edge, as on the game's How to Play screen. */
.ribbon-title{
  position:absolute;
  top:-6px;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  font-family:'Pirata One',serif;
  font-weight:normal;
  font-size:clamp(28px,8vw,48px);
  line-height:1;
  letter-spacing:1px;
  color:#fff;
  -webkit-text-stroke:2px #241804;
  paint-order:stroke fill;
  height:92px;
  margin:0;
  padding:0 4px 12px;
  border-style:solid;
  border-width:0 clamp(52px,17vw,84px);
  border-image-source:url('menu-ribbon.png');
  border-image-slice:0 97 0 98 fill;
  border-image-repeat:repeat stretch;
  image-rendering:pixelated;
}
.dialog-back{
  position:fixed;
  top:calc(18px + env(safe-area-inset-top));
  left:max(22px,env(safe-area-inset-left));
  z-index:30;
  line-height:0;
  padding:4px;
  transition:transform .12s ease,filter .12s ease;
}
.dialog-back img{display:block;width:46px;height:46px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.dialog-back:hover{transform:scale(1.09);filter:brightness(1.12)}
.dialog-back:active,.dialog-back.is-pressed{transform:scale(.95)}
.dialog-back:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}

.howto{font-size:19px;line-height:1.6;color:var(--ink)}
.howto p,.howto ol{margin:0 0 14px}
/* Justified text on wider screens. On a phone the wide pixel font leaves large gaps, so the text stays left-aligned there. */
@media (min-width:561px){.howto p,.howto li{text-align:justify;hyphens:auto}}
/* Quest and Royalty Mono have small capitals, so their sizes run larger than the body text. */
.howto h2{
  font-family:'Quest',sans-serif;
  font-weight:normal;
  color:var(--blood-dark);
  margin:26px 0 8px;
  font-size:28px;
  letter-spacing:1px;
}
.howto ol{margin-left:28px}
.howto li{margin:5px 0}
.howto strong{color:var(--blood);font-weight:bold}
.howto em{font-style:normal;color:var(--wood-light)}
.howto code{
  display:inline-block;
  font-family:'RoyaltyMono',monospace;
  background:var(--wood);
  color:var(--parchment);
  padding:1px 7px;
  border-radius:4px;
  border-bottom:2px solid #000;
  font-size:18px;
  line-height:1.3;
  margin:0 1px;
}
.howto a{color:var(--blood-dark);text-underline-offset:3px}
.howto a:hover{color:var(--blood)}
.howto a:focus-visible{outline:2px solid var(--wood-dark);outline-offset:2px}

/* A screenshot, not pixel art, so let the browser smooth it when it scales. */
.credit{margin:4px 0 18px}
.credit img{display:block;max-width:100%;height:auto;margin:0 auto;image-rendering:auto;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.credit figcaption{margin-top:6px;text-align:center;font-size:16px;color:var(--wood-light)}

/* A short gameplay loop recorded from the game client, with its HUD. It is scaled down to fit, so let the browser smooth it. */
.gameplay{margin:4px 0 18px}
.gameplay video{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.25);background:#82b541;cursor:var(--hand)}
.gameplay video:focus-visible{outline:3px solid var(--wood-dark);outline-offset:3px}

/* Below this width the panel reaches under the back arrow, so the arrow scrolls away with the page. */
@media (max-width:1040px){
  .dialog-back{position:absolute}
}
@media (max-width:560px){
  .dialog-back{top:calc(10px + env(safe-area-inset-top));left:max(10px,env(safe-area-inset-left))}
  .dialog-back img{width:38px;height:38px}
  .dialog-screen{padding-top:calc(112px + env(safe-area-inset-top))}
  .ribbon-title{height:clamp(68px,18vw,92px);border-left-width:clamp(32px,13vw,72px);border-right-width:clamp(32px,13vw,72px);max-width:calc(100% + 12px)}
}
@media (max-height:600px){
  .menu-screen{padding-top:calc(24px + env(safe-area-inset-top));padding-bottom:calc(48px + env(safe-area-inset-bottom))}
  .title-sub{margin-bottom:20px}
  .welcome-line{margin-bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  .btn,.dialog-back{transition:none}
}
@media print{
  .menu-page::before,.dialog-back,.corner-credit,.skip{display:none}
  .panel{box-shadow:none;border:0}
  .ribbon-title{position:static;transform:none;border:0;color:var(--ink);-webkit-text-stroke:0}
  .howto code{background:none;color:var(--ink);border:1px solid var(--parchment-dark)}
  .title-sub,.welcome-line,.welcome-line span{color:var(--ink);text-shadow:none}
}

/* Keep the title lettering, outline, and shadow in proportion to the sword.
   The landing build appends this file; the play entry imports the same rules. */
.title-wrap {
  width: min(100%, 752px);
  aspect-ratio: 5;
  container-type: inline-size;
  flex-shrink: 0;
  padding: 0;
}
.title-wrap .game-title {
  font-size: 14.6cqw;
  letter-spacing: .018em;
  -webkit-text-stroke: .018em #4a2f0c;
  text-shadow: 0 .027em 0 var(--gold-dark), 0 .055em 0 #7a4e12, 0 .09em .127em #000a;
}
@supports (background: -webkit-named-image(i)) {
  .title-wrap .game-title {
    text-shadow: 0 .018em 0 var(--gold-dark), 0 .036em 0 #7a4e12, 0 .036em .055em #0007;
  }
}