@font-face {
  font-family:Instrument Serif;
  src:url(assets/InstrumentSerif-Regular.ttf) format('truetype');
  font-display:swap
}

@font-face {
  font-family:EB Garamond;
  src:url(assets/EBGaramond-Regular.ttf) format('truetype');
  font-display:swap
}

:root {
  color-scheme:dark;
  -webkit-tap-highlight-color:transparent;
  font-family:EB Garamond,serif;
  color:#eee9df;
  background:#0b0b0b
}

* {
  box-sizing:border-box
}
body {
  margin:0
}
button {
  font:inherit;
  color:inherit;
  background:transparent;
  border:0;
  cursor:pointer
}
button:focus-visible {
  outline:1px solid #b8a777;
  outline-offset:4px
}
button:hover {
  color:#fff
}
p {
  margin:0
}
h1,h2 {
  font-family:Instrument Serif,serif;
  font-weight:400;
  margin:0
}
h1 {
  font-size:76px
}
h2 {
  font-size:30px
}
a {
  color:#b8a777
}
[hidden] {
  display:none!important
}
.page {
  min-height:100svh
}
.gate {
  display:grid;
  place-items:center;
  cursor:pointer;
  padding:28px
}
.gate-content {
  width:min(560px,100%);
  text-align:center
}
#license-prompt {
  width:100%;
  min-height:180px;
  border:1px dashed #44483e;
  border-radius:8px;
  padding:32px;
  font-size:25px
}
#license-prompt:hover {
  border-color:#aaa99a;
  background:#10130f
}
#gate-error {
  font-size:18px;
  color:#aaa99a;
  margin-top:16px
}
.home {
  padding:calc(28px + env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  cursor:pointer
}
.home-content {
  max-width:1160px;
  min-height:calc(100svh - 56px);
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-evenly;
  gap:28px;
  text-align:center
}
header {
  font-size:22px
}
.brand {
  display:flex;
  align-items:center;
  justify-content:center
}
.brand img {
  width:140px;
  height:140px;
  object-fit:contain
}
.brand h1 {
  margin-right:30px
}
.tagline {
  font-size:24px;
  margin-bottom:8px
}
.choose {
  font-size:30px;
  padding:5px 12px
}
.instructions p {
  font-size:22px;
  color:#aaa69f;
  line-height:1.35;
  margin-top:14px
}
.credits-card {
  display:flex;
  align-items:center;
  text-align:left;
  background:#0b0e0c;
  border:1px solid #34392f;
  border-radius:18px;
  padding:20px;
  gap:20px;
  width:min(760px,100%)
}
.credits-card:hover {
  border-color:#696550
}
.credits-card img {
  width:78px;
  height:92px;
  object-fit:contain
}
.credits-card span {
  font-family:Instrument Serif,serif;
  font-size:26px;
  line-height:1.25
}
footer {
  margin-top:16px;
  display:flex;
  justify-content:center;
  gap:24px;
  font-size:18px
}
.status {
  font-size:18px;
  color:#aaa99a
}
.status:empty {
  display:none
}
.credits {
  background:#0b0e0c;
  color:#f1ecdf;
  padding:max(4px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))
}
.back {
  font-size:22px;
  padding:8px 16px;
  border-radius:8px
}
.back:hover {
  background:#1c2718
}
.credits-content {
  max-width:1160px;
  margin:auto;
  padding:32px 48px
}
.dedication-row {
  display:grid;
  grid-template-columns:5fr 6fr;
  align-items:center;
  gap:28px
}
.dedication-row p {
  font-size:22px;
  line-height:1.45
}
.artwork {
  position:relative;
  aspect-ratio:1;
  background:radial-gradient(circle,#1c2718,#0b0e0c);
  border-radius:50%
}
.artwork:before {
  content:'';
  position:absolute;
  inset:22px;
  border:1px solid #34392f;
  border-radius:50%
}
.artwork img {
  position:relative;
  width:100%;
  height:100%;
  object-fit:contain
}
.divider {
  display:flex;
  align-items:center;
  gap:16px;
  margin:40px 0 20px;
  color:#b8a777;
  font-size:32px
}
.divider:before,.divider:after {
  content:'';
  height:1px;
  background:#34392f;
  flex:1
}
.roster {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px 24px
}
.roster p {
  padding:22px 0;
  font-size:42px
}
.roster .reserved {
  font-size:32px;
  color:#aaa99a
}
.player {
  position:fixed;
  inset:0;
  background:#000;
  min-height:0
}
.grid {
  width:100%;
  height:100%;
  display:grid;
  grid-template:repeat(3,minmax(0,1fr))/repeat(3,minmax(0,1fr))
}
.tile {
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:#000;
  position:relative;
  cursor:pointer;
  touch-action:manipulation
}
.tile video {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  pointer-events:none
}
#resume-audio {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  background:#0b0b0bee;
  border:1px solid #aaa99a;
  border-radius:8px;
  font-size:24px;
  padding:20px
}
dialog {
  max-width:700px;
  border:1px solid #34392f;
  border-radius:12px;
  background:#0b0e0c;
  color:#eee9df;
  font:22px EB Garamond,serif;
  padding:28px
}
dialog p {
  margin:20px 0
}
dialog::backdrop {
  background:#000a
}
dialog button {
  font-size:22px;
  padding:8px 14px
}

@media(max-width:800px) {
  .dedication-row {
  grid-template-columns:1fr
}
.artwork {
  width:min(330px,100%);
  margin:auto
}
.roster {
  grid-template-columns:repeat(2,1fr)
}
.credits-content {
  padding:24px
}
.home-content {
  gap:24px
}
.instructions p {
  font-size:20px
}

}

@media(max-width:540px) {
  h1 {
  font-size:52px
}
.brand img {
  width:84px;
  height:84px
}
.brand h1 {
  margin-right:0
}
header {
  font-size:18px
}
.tagline {
  font-size:21px
}
.choose {
  font-size:25px
}
.instructions p {
  font-size:18px
}
.credits-card {
  padding:18px 16px;
  gap:16px
}
.credits-card img {
  width:58px;
  height:72px
}
.credits-card span {
  font-size:24px
}
.roster {
  grid-template-columns:1fr
}
.home {
  padding-left:20px;
  padding-right:20px
}

}