/* Rules page only. The game does not load this file. */

*{box-sizing:border-box;}

body{
  margin:0;
  padding:32px 20px 64px;
  background:var(--bg);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

body::before{
  content:'';
  position:fixed; inset:0;
  background-image:var(--bg-image);
  background-size:cover;
  background-position:center;
  opacity:var(--bg-fade);
  pointer-events:none;
  z-index:-2;
}

body::after{
  content:'';
  position:fixed; inset:0;
  background:linear-gradient(180deg, rgba(9,9,11,0.55), rgba(9,9,11,0.9));
  pointer-events:none;
  z-index:-1;
}

.page{max-width:640px; margin:0 auto;}

h1{
  font-family:var(--font-display);
  font-size:clamp(30px, 7vw, 44px);
  /* same metal recipe as the front page: the light face up top, the dark
     horizon low near the baseline. line-height and weight must match the
     front page or the horizon climbs into the middle of the letters. */
  line-height:0.9;
  font-weight:400;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin:0;
  background-image:var(--metal-gold);
  background-size:100% 1em;
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}

h1 span{
  background-image:var(--metal-red);
  background-size:100% 1em;
  background-clip:text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* menu button sits above the title, never beside it, so it cannot shove the
   title across. on wide screens it lifts out of the flow entirely and parks
   in the top left corner of the page. */
/* Same idea as the game page: the button sits on a row with the wordmark
   only, so it centres on the logo rather than on the whole title block. */
.pagehead{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:14px;
  align-items:center;
  justify-content:start;
}
.pagehead .titles{ display:contents; }
.pagehead .menuwrap{ grid-column:1; grid-row:1; }
.pagehead h1{ grid-column:2; grid-row:1; }
.pagehead .sub{ grid-column:2; grid-row:2; }
/* The button used to stack ABOVE the title on anything under 1140px, which
   made the subpages look nothing like the game page. It now sits beside the
   title, and the wordmark is sized to leave room for it. */
.pagehead .titles{ min-width:0; }

@media(min-width:1140px){
  .pagehead{ gap:0; }
  /* pinned out into the margin on wide screens, but still on the logo's
     centre line rather than jammed into the corner */
  .pagehead .menuwrap{ position:fixed; left:16px; top:31px; z-index:70; }
}

/* menu button and the page list it opens. built on details/summary so the
   toggle works without javascript */
.menuwrap{ position:relative; flex:0 0 auto; }

#menubtn{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px;
  width:42px; height:42px;
  border-radius:11px;
  background:var(--slot);
  border:1px solid var(--line);
  box-shadow:0 3px 0 #000;
  cursor:pointer;
  list-style:none;
  transition:filter .2s, box-shadow .1s, transform .1s;
}
#menubtn::-webkit-details-marker{ display:none; }
#menubtn::marker{ content:''; }
/* ---- MENU ICON ----
   Every bar is absolutely centred on the button, so the three of them are
   positioned by their own offsets rather than by flex gaps. When the menu
   opens, bars 1 and 3 both sit at dead centre and rotate, so they cross at
   exactly one point and the X is symmetric by construction.
   scaleX is root 2 because rotating 45deg costs a bar exactly that much of
   its sideways reach. Stretching by root 2 gives it back, so the X is the
   same width as the hamburger it replaced, to the pixel. */
#menubtn i{
  position:absolute; left:50%; top:50%;
  width:18px; height:2px;
  border-radius:2px;
  background:var(--gold);
  transition:transform .2s, opacity .2s;
}
#menubtn i:nth-child(1){ transform:translate(-50%,-50%) translateY(-6px); }
#menubtn i:nth-child(2){ transform:translate(-50%,-50%); }
#menubtn i:nth-child(3){ transform:translate(-50%,-50%) translateY(6px); }
#menubtn:hover{ filter:brightness(1.5); }
#menubtn:active{ transform:translateY(3px); box-shadow:0 0 0 #000; }
#menuwrap[open] #menubtn i:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg) scaleX(1.55); }
#menuwrap[open] #menubtn i:nth-child(2){ opacity:0; }
#menuwrap[open] #menubtn i:nth-child(3){ transform:translate(-50%,-50%) rotate(-45deg) scaleX(1.55); }

.menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:60;
  text-align:left;   /* the mobile header centres its text, this must not follow */
  display:flex;
  flex-direction:column;
  min-width:172px;
  padding:6px;
  border-radius:12px;
  background:#141418;
  border:1px solid var(--line);
  box-shadow:0 14px 30px rgba(0,0,0,0.75);
}
.menu a{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
  text-decoration:none;
  padding:11px 14px;
  border-radius:8px;
  transition:color .2s, background .2s;
}
.menu a:hover{ color:var(--bone); background:rgba(255,255,255,0.05); }




.sub{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--dim-lo);
  margin-top:10px;
}

h2{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 12px;
}

section{
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--line);
}

p{margin:0 0 12px; color:#D4D4D8;}
p:last-child{margin-bottom:0;}

ul{margin:0; padding-left:20px; color:#D4D4D8;}
li{margin-bottom:8px;}
li:last-child{margin-bottom:0;}

b{color:var(--bone); font-weight:700;}

.seats{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:10px;
}

.seats li{
  margin:0;
  padding:12px 14px;
  border-radius:var(--radius);
  background:var(--slot);
  box-shadow:inset 0 0 0 1px var(--line);
}

.seats .n{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:4px;
}

.seats .d{display:block; font-size:14px; color:var(--dim);}

.back{
  display:inline-block;
  margin-top:40px;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bone);
  text-decoration:none;
  padding:10px 22px;
  border-radius:999px;
  background:var(--slot);
  border:1px solid var(--line);
  box-shadow:0 4px 0 #000;
  transition:filter .2s;
}

.back:hover{filter:brightness(1.4);}
.back:active{transform:translateY(4px); box-shadow:0 0 0 #000;}

@media(max-width:519px){
  body{padding:24px 16px 48px;}
  section{margin-top:24px; padding-top:20px;}

  /* Same menu button as the game page. On a phone it drops the panel,
     border and shadow and is just the bars, so the subpages match. */
  #menubtn{
    width:40px; height:40px;
    gap:4px;
    background:none;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  #menubtn i{ width:17px; }
  #menubtn:active{ transform:none; box-shadow:none; }
}

/* ---- WORDMARK ----
   The title ships as a transparent PNG instead of live text, so nobody can
   select it letter by letter and it renders identically everywhere. The
   drop shadow and the metal are baked into the image, so the h1's own
   background is switched off here and the shadow moved onto the image.
   The PNG is cropped tight to the glyphs, so its height is exactly the
   old line box (font-size x 0.9). Scale it by that and it lands where
   the text did, to the pixel. */
h1.wm{ background:none; filter:none; line-height:0; }
h1.wm img{ display:block; width:auto; max-width:100%;
           filter:drop-shadow(0 2px 4px rgba(0,0,0,0.8)); }
h1.wm img{ height:clamp(27px, 6.3vw, 40px); }

/* Phone sizing for the wordmark on the subpages. Sized by WIDTH with
   height:auto so the logo can only scale, never change shape, and so it
   always leaves room for the menu button beside it. The 363px cap is what
   the rule above gives at 519px, so nothing jumps at the breakpoint. */
@media(max-width:519px){
  h1.wm img{ width:min(calc(100vw - 100px), 363px); height:auto; }
}