@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Bowlby+One+SC&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

:root {
  --pw-bakelite: #0b0e0d;
  --pw-panel: #141917;
  --pw-brass: #d5a548;
  --pw-ivory: #f4e7c5;
  --pw-phosphor: #55e6c1;
  --pw-steel: #7c8987;
  --pw-signal: #d84a36;
}

.arcade-shell-header,
.arcade-shell-footer { box-sizing: border-box; }

.arcade-shell-header {
  position: relative;
  z-index: 30;
  min-height: 88px;
  padding: 0 clamp(16px, 4vw, 62px);
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto minmax(150px, 1fr);
  align-items: stretch;
  color: var(--pw-ivory);
  background:
    linear-gradient(90deg, #0c0f0e 0 34%, #141816 52%, #090c0b 100%),
    repeating-linear-gradient(90deg, #ffffff05 0 1px, transparent 1px 7px);
  border-bottom: 1px solid #d5a54880;
  box-shadow: inset 0 -3px #050706, 0 8px 24px #0007;
  font-family: "Barlow Condensed", sans-serif;
}

.arcade-shell-header::after {
  content: "";
  position: absolute;
  left: clamp(16px, 4vw, 62px);
  right: clamp(16px, 4vw, 62px);
  bottom: 5px;
  height: 1px;
  background: linear-gradient(90deg, var(--pw-brass), var(--pw-phosphor) 52%, transparent 92%);
  opacity: .85;
}

.arcade-shell-brand {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.arcade-shell-brand__burst {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  display: block;
  background: url('/pennywire-mark.svg?v=11') center / contain no-repeat;
  filter: drop-shadow(0 3px 7px #000a);
  transform: none;
}

.arcade-shell-brand__burst::before,
.arcade-shell-brand__burst::after,
.arcade-shell-brand__burst i { display: none; }

.arcade-shell-brand__type {
  display: block;
  font: 400 23px/.9 "Bowlby One SC", "Arial Black", sans-serif;
  letter-spacing: -.025em;
}

.arcade-shell-brand__type b { color: var(--pw-ivory); font: inherit; text-transform: uppercase; }
.arcade-shell-brand__type small {
  display: block;
  margin-top: 8px;
  color: var(--pw-steel);
  font: 600 9px/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
}

.arcade-shell-nav { align-self: stretch; display: flex; position: relative; }
.arcade-shell-nav > a,
.arcade-shell-machines > summary {
  min-width: 142px;
  padding: 0 24px;
  display: grid;
  place-items: center;
  border-left: 1px solid #ffffff12;
  color: #b9c0bb;
  font: 800 13px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.arcade-shell-nav > a:last-child { border-right: 1px solid #ffffff12; }
.arcade-shell-nav > a:hover,
.arcade-shell-nav > a:focus-visible,
.arcade-shell-nav > a[aria-current="page"],
.arcade-shell-machines > summary:hover,
.arcade-shell-machines > summary:focus-visible,
.arcade-shell-machines[open] > summary,
.arcade-shell-machines.is-current > summary {
  color: var(--pw-ivory);
  background: linear-gradient(#ffffff0b, #ffffff03);
  box-shadow: inset 0 -4px var(--pw-phosphor);
  outline: 0;
}

.arcade-shell-machines { display: flex; position: relative; }
.arcade-shell-machines > summary {
  height: 100%;
  list-style: none;
  grid-template-columns: auto auto auto;
  gap: 10px;
}
.arcade-shell-machines > summary::-webkit-details-marker { display: none; }
.arcade-shell-machines > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--pw-brass);
  border-bottom: 1px solid var(--pw-brass);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s ease;
}
.arcade-shell-machines[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.arcade-shell-machines__count {
  padding: 4px 6px 3px;
  color: #17120a;
  background: var(--pw-brass);
  border-radius: 999px;
  font: 700 9px/1 "IBM Plex Mono", monospace;
  letter-spacing: 0;
}
.arcade-shell-machines__menu {
  position: absolute;
  top: calc(100% - 6px);
  left: 0;
  z-index: 40;
  width: min(330px, calc(100vw - 24px));
  padding: 8px;
  display: grid;
  gap: 4px;
  border: 1px solid #d5a54880;
  background: linear-gradient(145deg, #171c19, #090c0b 72%);
  box-shadow: 0 18px 38px #000c, inset 0 0 0 1px #ffffff08;
}
.arcade-shell-machines__menu a {
  min-height: 58px;
  padding: 0 14px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  color: #d5d8d2;
  border: 1px solid transparent;
  text-decoration: none;
  text-transform: uppercase;
  font: 800 15px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .07em;
}
.arcade-shell-machines__menu a::before {
  content: attr(data-number);
  color: var(--pw-brass);
  font: 600 9px/1 "IBM Plex Mono", monospace;
}
.arcade-shell-machines__menu a::after {
  content: "PLAY";
  color: var(--pw-steel);
  font: 600 8px/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
}
.arcade-shell-machines__menu a:hover,
.arcade-shell-machines__menu a:focus-visible,
.arcade-shell-machines__menu a[aria-current="page"] {
  color: var(--pw-ivory);
  border-color: #d5a54855;
  background: #ffffff0a;
  outline: 0;
}
.arcade-shell-machines__menu a[aria-current="page"]::after { content: "ON AIR"; color: var(--pw-phosphor); }

.arcade-shell-now {
  justify-self: end;
  align-self: stretch;
  position: relative;
  display: flex;
  text-align: right;
  text-transform: uppercase;
}
.arcade-shell-now > summary {
  min-width: 210px;
  height: 100%;
  padding: 0 22px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: end;
  gap: 7px 15px;
  border-inline: 1px solid #ffffff12;
  list-style: none;
  cursor: pointer;
}
.arcade-shell-now > summary::-webkit-details-marker { display: none; }
.arcade-shell-now > summary::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  width: 8px;
  height: 8px;
  border-right: 1px solid var(--pw-brass);
  border-bottom: 1px solid var(--pw-brass);
  transform: translateY(-2px) rotate(45deg);
  transition: transform .16s ease;
}
.arcade-shell-now[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.arcade-shell-now > summary:hover,
.arcade-shell-now > summary:focus-visible,
.arcade-shell-now[open] > summary { background: linear-gradient(#ffffff0b, #ffffff03); box-shadow: inset 0 -4px var(--pw-phosphor); outline: 0; }
.arcade-shell-now > summary span { grid-column: 1; color: var(--pw-steel); font: 600 9px/1 "IBM Plex Mono", monospace; letter-spacing: .14em; }
.arcade-shell-now > summary b { grid-column: 1; color: var(--pw-ivory); font: 800 22px/1 "Barlow Condensed", sans-serif; letter-spacing: .06em; }
.arcade-shell-now .arcade-shell-machines__menu { left: auto; right: 0; text-align: left; }

.arcade-shell-footer {
  min-height: 132px;
  padding: 28px clamp(16px, 4vw, 62px);
  display: grid;
  grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
  align-items: center;
  gap: 28px;
  color: var(--pw-ivory);
  border-top: 1px solid #d5a54880;
  background:
    linear-gradient(90deg, #080b0a, #121614 52%, #080a09),
    repeating-linear-gradient(90deg, #ffffff05 0 1px, transparent 1px 7px);
  font: 600 8px/1.5 "IBM Plex Mono", monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.arcade-shell-footer .arcade-shell-brand__burst { width: 42px; height: 42px; flex-basis: 42px; }
.arcade-shell-footer .arcade-shell-brand__type { font-size: 21px; }
.arcade-shell-footer__slogan {
  margin: 0;
  color: var(--pw-brass);
  font: 800 19px/1 "Barlow Condensed", sans-serif;
  letter-spacing: .025em;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
}
.arcade-shell-footer nav { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px 22px; }
.arcade-shell-footer nav a { color: #b7c0ba; text-decoration: none; }
.arcade-shell-footer nav a:hover,
.arcade-shell-footer nav a:focus-visible,
.arcade-shell-footer nav a[aria-current="page"] { color: var(--pw-phosphor); outline: 0; }
.arcade-shell-brand:focus-visible { outline: 2px solid var(--pw-phosphor); outline-offset: 5px; }

@media (max-width: 920px) {
  .arcade-shell-header { grid-template-columns: 1fr auto auto; padding-inline: 18px; }
  .arcade-shell-nav > a,
  .arcade-shell-machines > summary { min-width: 112px; padding-inline: 16px; }
  .arcade-shell-now > summary { min-width: 180px; padding-inline: 16px; }
  .arcade-shell-footer { grid-template-columns: 1fr auto; }
  .arcade-shell-footer__slogan { display: none; }
}

@media (max-width: 560px) {
  .arcade-shell-header { min-height: 74px; padding-inline: 10px; grid-template-columns: 1fr auto; }
  .arcade-shell-brand__burst { width: 42px; height: 42px; flex-basis: 42px; }
  .arcade-shell-brand__type { font-size: 21px; }
  .arcade-shell-brand__type small { display: none; }
  .arcade-shell-nav > a { display: none; }
  .arcade-shell-now > summary { min-width: 132px; padding-inline: 10px; gap: 5px 10px; }
  .arcade-shell-now > summary span { font-size: 8px; }
  .arcade-shell-now > summary b { font-size: 18px; }
  .arcade-shell-now .arcade-shell-machines__menu { left: auto; right: 0; }
  .arcade-shell-footer { grid-template-columns: 1fr; gap: 22px; }
  .arcade-shell-footer nav { justify-self: start; justify-content: flex-start; }
}