.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-radius: var(--radius-sm);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

:where(a, button, input):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.clipboard-helper {
  position: fixed;
  width: 1px;
  height: 1px;
  inset: auto auto 0 0;
  opacity: 0;
  pointer-events: none;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  min-height: 2.75rem;
}

.brand__mark {
  display: grid;
  width: 2.4rem;
  height: 2.4rem;
  place-items: center;
  color: var(--color-accent-ink);
  background: var(--color-accent);
  border-radius: 0.3rem;
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: -0.08em;
}

.brand__name {
  display: grid;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  line-height: 1;
}

.brand__name small {
  margin-top: 0.22rem;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.site-nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
}

.site-nav a,
.site-nav button {
  min-height: 2.75rem;
  padding: 0 0.8rem;
  color: var(--color-muted-strong);
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.11em;
}

.site-nav a:hover,
.site-nav button:hover {
  color: var(--color-text);
  background: #ffffff0a;
}

.site-nav__soon {
  display: inline-block;
  margin-left: 0.3rem;
  color: var(--color-accent);
  font-size: 0.48rem;
  vertical-align: super;
}

.primary-button,
.secondary-button,
.play-button,
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 3.5rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  transition: transform 180ms var(--ease-out), background-color 180ms ease, border-color 180ms ease;
}

.primary-button,
.play-button {
  color: var(--color-accent-ink);
  background: var(--color-accent);
}

.primary-button:hover,
.play-button:hover {
  transform: translateY(-2px);
  background: #e2ff7a;
}

.secondary-button {
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-line);
}

.danger-button {
  color: #ffb9b4;
  background: transparent;
  border: 1px solid #ff6f6645;
  cursor: pointer;
}

.danger-button:hover {
  color: #fff;
  background: #ff6f6612;
  border-color: #ff8b84;
  transform: translateY(-2px);
}

.danger-button--solid {
  color: #160807;
  background: #ff8b84;
  border-color: #ff8b84;
}

.danger-button--solid:hover {
  color: #160807;
  background: #ffa39d;
}

.secondary-button:hover {
  border-color: var(--color-muted);
  transform: translateY(-2px);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.55rem;
  padding: 0.25rem 0.55rem;
  color: var(--color-muted-strong);
  background: #080a0ebf;
  border: 1px solid #ffffff17;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.status > span {
  width: 0.4rem;
  height: 0.4rem;
  background: var(--game-accent);
  border-radius: 999px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.tag {
  padding: 0.38rem 0.55rem;
  color: var(--color-muted-strong);
  background: #ffffff08;
  border: 1px solid var(--color-line-soft);
  border-radius: 0.3rem;
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.1em;
}

.game-card {
  --game-accent: #d7ff4f;
  --game-accent-soft: #d7ff4f25;
  position: relative;
  min-width: 0;
  overflow: clip;
  background: var(--color-surface);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 1.4rem 4rem #0000002b;
  transition: transform 220ms var(--ease-out), border-color 220ms ease;
}

.game-card:hover {
  border-color: #ffffff30;
  transform: translateY(-4px);
}

.game-card--relay {
  --game-accent: #f5bd52;
  --game-accent-soft: #f5bd5228;
}

.game-card--bingo {
  --game-accent: #60d9ee;
  --game-accent-soft: #60d9ee28;
}

.game-card--orb {
  --game-accent: #bd8cff;
  --game-accent-soft: #bd8cff28;
}

.game-card__visual {
  position: relative;
  display: grid;
  min-height: 14rem;
  padding: 1.1rem;
  overflow: hidden;
  align-content: space-between;
  isolation: isolate;
  background: #0c1016;
  border-bottom: 1px solid var(--color-line-soft);
}

.game-card__visual::before,
.game-card__visual::after {
  position: absolute;
  z-index: -1;
  content: "";
}

.game-card--relay .game-card__visual {
  background:
    linear-gradient(112deg, transparent 0 43%, #f5bd521b 43% 47%, transparent 47% 59%, #68dd8c16 59% 63%, transparent 63%),
    linear-gradient(160deg, #19160f, #0a1010 65%);
}

.game-card--relay .game-card__visual::before {
  inset: 24% -12% auto 10%;
  height: 55%;
  border-top: 1px solid #f5bd5260;
  border-bottom: 1px solid #68dd8c45;
  transform: rotate(-8deg);
}

.game-card--bingo .game-card__visual {
  background:
    radial-gradient(circle at 18% 24%, #60d9ee 0 3.6%, transparent 4%),
    radial-gradient(circle at 48% 58%, #ff6f9e 0 4.8%, transparent 5.2%),
    radial-gradient(circle at 80% 34%, #f2cf5b 0 3%, transparent 3.5%),
    linear-gradient(145deg, #12131b, #090c12 70%);
}

.game-card--bingo .game-card__visual::before {
  inset: 1.7rem;
  opacity: 0.45;
  background-image: linear-gradient(#ffffff12 1px, transparent 1px), linear-gradient(90deg, #ffffff12 1px, transparent 1px);
  background-size: 20% 20%;
}

.game-card--orb .game-card__visual {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 19%, #bd8cff28 19.5% 20%, transparent 20.5% 33%, #f4a65b20 33.5% 34%, transparent 34.5%),
    radial-gradient(circle at 68% 28%, #f4a65b 0 2.4%, transparent 2.8%),
    radial-gradient(circle at 30% 70%, #bd8cff 0 3.2%, transparent 3.6%),
    linear-gradient(145deg, #16111e, #090b12 72%);
}

.game-card--orb .game-card__visual::before {
  width: 32%;
  aspect-ratio: 1;
  top: 34%;
  left: 34%;
  border: 1px solid #ffffff22;
  border-radius: 50%;
}

.game-card__index,
.game-card__art-label {
  color: #ffffff94;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.game-card__art-code {
  align-self: center;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(4.8rem, 25vw, 7.3rem);
  letter-spacing: -0.09em;
  line-height: 0.8;
  text-shadow: 0 0 3rem var(--game-accent-soft);
}

.game-card__art-label {
  color: var(--game-accent);
}

.game-card__body {
  display: flex;
  min-height: 26rem;
  padding: 1.25rem;
  flex-direction: column;
}

.game-card__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.game-card__genre {
  color: var(--color-muted);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: right;
}

.game-card__subtitle {
  margin-top: 1.35rem;
  color: var(--game-accent);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.15em;
}

.game-card__title {
  margin-top: 0.45rem;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 8vw, 2.5rem);
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.game-card__catchphrase {
  margin-top: 1rem;
  color: var(--color-muted-strong);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.1em;
}

.game-card__description {
  margin: 0.8rem 0 1.2rem;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.85;
}

.game-card .tag-list {
  margin-bottom: 1.3rem;
}

.game-card .play-button {
  width: 100%;
  margin-top: auto;
  color: #0d1014;
  background: var(--game-accent);
}

.play-button__arrow {
  font-family: var(--font-body);
  font-size: 1.15rem;
}

.daily-card {
  --game-accent: var(--color-accent);
  display: flex;
  min-width: 0;
  padding: 1.25rem;
  flex-direction: column;
  gap: 1.4rem;
  justify-content: space-between;
  background: linear-gradient(135deg, var(--game-accent-soft), transparent 45%), var(--color-surface);
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-md);
}

.daily-card--bingo {
  --game-accent: #60d9ee;
  --game-accent-soft: #60d9ee18;
}

.daily-card--orb {
  --game-accent: #bd8cff;
  --game-accent-soft: #bd8cff18;
}

.daily-card__label {
  color: var(--game-accent);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.daily-card h3 {
  margin-top: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: -0.035em;
}

.daily-card p {
  margin-top: 0.55rem;
  color: var(--color-muted);
  font-size: 0.86rem;
  line-height: 1.7;
}

.player-console {
  display: grid;
  overflow: clip;
  background: var(--color-bg-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 1.5rem 5rem #00000033;
}

.player-console__identity,
.player-console__details,
.player-console__boundary {
  min-width: 0;
  padding: clamp(1.25rem, 5vw, 2.4rem);
}

.player-console__identity {
  background:
    linear-gradient(130deg, #d7ff4f12, transparent 46%),
    linear-gradient(180deg, #151a20, #0d1117);
  border-bottom: 1px solid var(--color-line);
}

.player-console__status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.player-state,
.player-console__phase {
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.player-state {
  display: inline-flex;
  min-height: 1.65rem;
  padding: 0.3rem 0.55rem;
  align-items: center;
  color: var(--color-muted-strong);
  background: #ffffff0a;
  border: 1px solid var(--color-line);
  border-radius: 999px;
}

.player-state[data-state="ready"] {
  color: var(--color-accent);
  border-color: #d7ff4f4a;
}

.player-state[data-state="synced"] {
  color: #71e4ff;
  border-color: #71e4ff52;
}

.player-state[data-state="temporary"] {
  color: #ffb76b;
  border-color: #ffb76b52;
}

.player-console__phase {
  color: var(--color-muted);
}

.player-console__label {
  margin-top: clamp(2rem, 6vw, 3.5rem);
  color: var(--color-muted);
  font-size: 0.63rem;
  font-weight: 850;
  letter-spacing: 0.16em;
}

.player-console__id {
  margin-top: 0.55rem;
  overflow-wrap: anywhere;
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 6.7vw, 2.45rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.player-console__explanation {
  max-width: 39rem;
  margin-top: 1rem;
  color: var(--color-muted);
  font-size: 0.82rem;
  line-height: 1.75;
}

.player-console__actions {
  display: flex;
  margin-top: 1.4rem;
  flex-direction: column;
  gap: 0.65rem;
}

.player-console__actions > * {
  width: 100%;
}

.player-console__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-line-soft);
}

.player-console__details > div {
  min-width: 0;
  padding: 1rem;
  background: var(--color-surface);
}

.player-console__details dt {
  color: var(--color-muted);
  font-size: 0.56rem;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.player-console__details dd {
  margin: 0.5rem 0 0;
  overflow-wrap: anywhere;
  color: var(--color-text);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.player-console__boundary {
  border-top: 1px solid var(--color-line);
}

.player-console__boundary-label {
  color: var(--color-accent);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.15em;
}

.player-console__boundary ul {
  display: grid;
  margin-top: 1rem;
  gap: 0.8rem;
}

.player-console__boundary li {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: 0.65rem;
  color: var(--color-muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

.player-console__boundary li span {
  color: var(--color-muted-strong);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.mobile-nav {
  position: fixed;
  z-index: 100;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0.35rem max(0.35rem, env(safe-area-inset-right)) calc(0.35rem + env(safe-area-inset-bottom)) max(0.35rem, env(safe-area-inset-left));
  background: #0a0d12ed;
  border-top: 1px solid var(--color-line);
  box-shadow: 0 -1rem 3rem #0000003d;
  backdrop-filter: blur(18px);
}

.mobile-nav a,
.mobile-nav button {
  display: grid;
  min-width: 0;
  min-height: 3.2rem;
  padding: 0.4rem 0.1rem;
  place-items: center;
  color: var(--color-muted);
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: clamp(0.48rem, 2.3vw, 0.62rem);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.mobile-nav a:hover,
.mobile-nav button:hover {
  color: var(--color-text);
  background: #ffffff0b;
}

.notice {
  position: fixed;
  z-index: 250;
  right: 1rem;
  bottom: calc(5rem + env(safe-area-inset-bottom));
  max-width: calc(100vw - 2rem);
  padding: 0.9rem 1rem;
  color: var(--color-text);
  background: var(--color-surface-strong);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  box-shadow: 0 1rem 3rem #00000066;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.75rem);
  transition: opacity 180ms ease, transform 180ms var(--ease-out);
}

.notice[data-visible="true"] {
  opacity: 1;
  transform: translateY(0);
}

.settings-dialog {
  width: min(34rem, calc(100% - 2rem));
  padding: 0;
  color: var(--color-text);
  background: var(--color-bg-raised);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 2rem 8rem #000000b3;
}

.settings-dialog::backdrop {
  background: #030405c9;
  backdrop-filter: blur(5px);
}

.settings-dialog__inner {
  padding: 1.35rem;
}

.settings-dialog__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-line-soft);
}

.settings-dialog__eyebrow {
  color: var(--color-accent);
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.15em;
}

.settings-dialog h2 {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: 1.65rem;
  letter-spacing: -0.04em;
}

.icon-button {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  color: var(--color-text);
  background: #ffffff0a;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.1rem;
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--color-line-soft);
}

.setting-row strong {
  display: block;
  font-size: 0.92rem;
}

.setting-row p {
  margin-top: 0.28rem;
  color: var(--color-muted);
  font-size: 0.76rem;
  line-height: 1.55;
}

.toggle {
  position: relative;
  width: 3.2rem;
  height: 1.85rem;
  flex: 0 0 auto;
}

.toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.toggle span {
  position: absolute;
  inset: 0;
  background: #303640;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.toggle span::after {
  position: absolute;
  top: 0.23rem;
  left: 0.23rem;
  width: 1.39rem;
  height: 1.39rem;
  content: "";
  background: #fff;
  border-radius: 50%;
  transition: transform 180ms var(--ease-out);
}

.toggle input:checked + span {
  background: var(--color-accent);
}

.toggle input:checked + span::after {
  transform: translateX(1.35rem);
  background: var(--color-accent-ink);
}

.toggle input:focus-visible + span {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.settings-dialog__note {
  padding-top: 1rem;
  color: var(--color-muted);
  font-size: 0.72rem;
  line-height: 1.65;
}

.settings-dialog .secondary-button {
  width: 100%;
  margin-top: 1rem;
}

.confirm-dialog__copy {
  padding-block: 1.2rem;
  color: var(--color-muted);
  font-size: 0.86rem;
  line-height: 1.8;
}

.confirm-dialog__actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
}

.confirm-dialog__actions form,
.confirm-dialog__actions button {
  width: 100%;
}

@media (min-width: 35rem) {
  .player-console__actions {
    flex-direction: row;
  }

  .player-console__actions > * {
    width: auto;
    min-width: 10rem;
  }

  .confirm-dialog__actions {
    grid-template-columns: 1fr 1fr;
  }
}