:root {
  color-scheme: dark;
  --background: #101017;
  --surface: #1b1a29;
  --surface-deep: #15141f;
  --text: #f7f2ed;
  --muted: #c5bdce;
  --border: #575166;
  --orange: #ff9019;
  --orange-light: #ffc266;
  --purple: #b58aff;
  --cyan: #42dbd4;
  --danger: #ff7781;
  --focus: #ffe09b;
  --display-font: "Barlow Condensed", Impact, "Arial Narrow", "Malgun Gothic", sans-serif;
  --body-font: Inter, system-ui, "Malgun Gothic", "Noto Sans", sans-serif;
  --gutter: clamp(1rem, 3.2vw, 3.5rem);
  --corner: 14px;
  font-family: var(--body-font);
  line-height: 1.55;
  background: var(--background);
  color: var(--text);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}

body:lang(ko) { word-break: keep-all; }

img, svg, canvas { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, summary, select { cursor: pointer; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: .22em; }
h1, h2, h3, p { margin-block-start: 0; }
h1, h2, h3 { line-height: 1.16; }
strong, b { font-weight: 750; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 4px;
}

.shell {
  width: min(calc(100% - 2 * var(--gutter)), 85rem);
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 10;
  inset: .5rem auto auto .75rem;
  transform: translateY(calc(-100% - 1rem));
  padding: .65rem 1rem;
  background: var(--orange);
  color: #17101c;
  font-weight: 750;
}

.skip-link:focus { transform: none; }

.site-header {
  position: relative;
  z-index: 2;
  background: #12111a;
  border-block-end: 1px solid #54465c;
  box-shadow: 0 4px 0 #1e1726;
}

.header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.75rem, 2.6vw, 2.5rem);
  min-height: 4.5rem;
}

.brand {
  display: inline-flex;
  gap: .55rem;
  align-items: center;
  min-height: 44px;
  width: max-content;
  max-width: 100%;
  font-family: "Archivo Black", Inter, "Segoe UI", var(--body-font);
  font-size: clamp(1.55rem, 3vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
  text-decoration: none;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 1.15em;
  height: 1.2em;
  color: var(--orange-light);
  text-shadow: 0 0 1rem #ff942e72;
}

.brand::after {
  content: "";
  width: 1.28rem;
  height: .45rem;
  margin-inline-start: .18rem;
  flex-shrink: 0;
  background: repeating-linear-gradient(130deg, var(--orange) 0 4px, transparent 4px 7px);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .15rem clamp(.1rem, 1vw, 1rem);
  min-width: 0;
}

.site-nav ul, .footer-nav ul, .locale-menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: inherit;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: clamp(.38rem, 1vw, .9rem);
  font-weight: 720;
  text-decoration: none;
  text-align: center;
}

.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--orange-light); }
.site-nav a[aria-current="page"]::after {
  position: absolute;
  inset: auto .4rem 0;
  height: 3px;
  content: "";
  background: var(--orange);
}

.locale-switcher { position: relative; min-width: 0; }
.locale-switcher summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .4rem .7rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .9rem;
  font-weight: 660;
  list-style: none;
}

.locale-switcher summary::-webkit-details-marker { display: none; }
.locale-switcher summary::after {
  content: "";
  width: .43rem;
  height: .43rem;
  flex-shrink: 0;
  border-right: 2px solid var(--orange-light);
  border-bottom: 2px solid var(--orange-light);
  transform: rotate(45deg) translateY(-2px);
}

.locale-menu {
  position: absolute;
  z-index: 3;
  inset: calc(100% + .35rem) 0 auto auto;
  width: min(18rem, calc(100vw - 2rem));
  max-height: min(26rem, 62vh);
  overflow-y: auto;
  margin: 0;
  padding: .4rem;
  list-style: none;
  border: 1px solid var(--border);
  background: #181725;
  box-shadow: 0 12px 28px #000b;
}

.locale-menu ul { display: grid; }
.locale-menu a {
  display: block;
  min-height: 44px;
  padding: .65rem;
  text-decoration: none;
}
.locale-menu a:hover, .locale-menu a[aria-current] { background: #30283d; }

.main-content {
  flex: 1 0 auto;
  padding-block: clamp(1.6rem, 4vw, 3.5rem) clamp(3rem, 8vw, 6.5rem);
}

.main-content:has(.hero) { padding-block-start: 0; }

.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: clamp(25rem, 39vw, 34rem);
  margin-inline: calc(var(--gutter) * -.45);
  padding: clamp(3rem, 5vw, 5rem) clamp(1rem, 5vw, 4rem);
  text-align: center;
  background-color: #181421;
  background-image:
    linear-gradient(0deg, #101017 0, transparent 26%, #16101a17 83%, #110d1d66),
    radial-gradient(ellipse at 48% 52%, #131018f5 0, #14101acc 31%, #17111c28 66%),
    url("/assets/lab.webp"),
    linear-gradient(100deg, #623221 0, #211925 38%, #211629 63%, #3c2354 100%);
  background-position: center;
  background-size: cover;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .48;
  background:
    repeating-linear-gradient(transparent 0 3px, #0a081b5e 4px 5px),
    linear-gradient(105deg, #ff743827 0, transparent 29%, transparent 70%, #994bff28);
}

.hero::after {
  content: "";
  position: absolute;
  inset: .65rem;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(var(--orange), var(--orange)) top left / 2.75rem 2px,
    linear-gradient(var(--orange), var(--orange)) top left / 2px 1.75rem,
    linear-gradient(var(--purple), var(--purple)) top right / 2.75rem 2px,
    linear-gradient(var(--purple), var(--purple)) top right / 2px 1.75rem;
  background-repeat: no-repeat;
  opacity: .8;
}

.hero-content {
  width: min(100%, 48rem);
}

.hero-kicker, .eyebrow {
  display: block;
  margin-block-end: .65rem;
  color: #d7b8ff;
  font-family: var(--display-font);
  font-size: clamp(.9rem, 2vw, 1.25rem);
  font-weight: 780;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.hero-title {
  margin-block-end: .9rem;
  font-family: var(--display-font);
  font-size: clamp(2.2rem, 6vw, 5.7rem);
  font-weight: 900;
  line-height: .99;
  letter-spacing: -.035em;
  text-wrap: balance;
  text-shadow: .055em .075em #0b0810, 0 0 .4em #120e23;
}

.hero-accent, .hero-title em {
  display: block;
  color: var(--orange);
  font-style: normal;
}

.hero-summary {
  max-width: 40rem;
  margin: 1.2rem auto 1.55rem;
  color: #f1e9f4;
  font-size: clamp(1rem, 2vw, 1.32rem);
  font-weight: 540;
  line-height: 1.5;
  text-wrap: pretty;
  text-shadow: 0 2px 4px #100c17;
}

.hero-actions, .actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
}
.hero-actions { justify-content: center; }

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .6rem;
  max-width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  padding: .65rem 1.1rem;
  background: #242034;
  color: var(--text);
  font-weight: 750;
  line-height: 1.22;
  text-decoration: none;
  text-align: center;
}

.button-primary {
  border-color: #ffc365;
  background: linear-gradient(180deg, #ffb842 0, #ff951f 60%, #ff8c19 100%);
  color: #21111b;
  box-shadow: inset 0 -4px #d6640b, 0 4px 0 #5a2d23;
}
.button-primary:hover { background: var(--orange-light); }
.button-secondary:hover { border-color: var(--orange-light); }
.button:disabled, .button[aria-disabled="true"] { opacity: .6; cursor: not-allowed; }
.hero .button-primary {
  min-height: 54px;
  padding: .65rem clamp(1.6rem, 5vw, 3.4rem);
  font-size: clamp(1.08rem, 2.2vw, 1.38rem);
}

.game-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(.65rem, 1.6vw, 1rem);
  scroll-margin-block-start: 1.5rem;
}

.game-card {
  --accent: var(--danger);
  --card-deep: #381e28;
  --card-edge: #612d3b;
  position: relative;
  isolation: isolate;
  display: grid;
  min-width: 0;
}

.game-card--aim { --accent: var(--purple); --card-deep: #2d2147; --card-edge: #54406f; }
.game-card--memory { --accent: var(--cyan); --card-deep: #17353d; --card-edge: #245961; }

.game-card::before, .game-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  clip-path: polygon(var(--corner) 0, 100% 0, 100% calc(100% - var(--corner)), calc(100% - var(--corner)) 100%, 0 100%, 0 var(--corner));
}
.game-card::before { inset: 0; background: var(--accent); }
.game-card::after {
  inset: 2px;
  background:
    repeating-linear-gradient(90deg, transparent 0 25px, #1010172c 26px 27px),
    radial-gradient(ellipse at 100% 50%, var(--card-edge), transparent 64%),
    var(--card-deep);
}

.game-card-link {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.5rem, 1.7vw, 1.25rem);
  min-height: 7.5rem;
  padding: .9rem clamp(.75rem, 2.2vw, 1.55rem);
  text-decoration: none;
}
.game-card-link:hover .card-arrow { background: var(--accent); color: #15111a; }
.game-card:focus-within { z-index: 1; }
.game-icon {
  display: grid;
  place-items: center;
  min-width: 2rem;
  width: clamp(2rem, 4.5vw, 4.2rem);
  color: var(--accent);
  font-size: clamp(1.5rem, 3.3vw, 3.3rem);
  line-height: 1;
  filter: drop-shadow(0 2px 0 #0c0817);
}
.game-icon svg { display: block; width: 100%; height: auto; }
.game-card h2 {
  margin-block-end: .3rem;
  font-size: clamp(1.12rem, 2.25vw, 1.6rem);
  font-weight: 820;
}
.game-card p {
  margin: 0;
  color: #e9dfed;
  font-size: clamp(.9rem, 1.3vw, 1rem);
  line-height: 1.4;
}
.card-arrow {
  display: grid;
  place-items: center;
  width: 2.1rem;
  min-height: 2.1rem;
  border: 1px solid var(--accent);
  background: #181220;
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 800;
}

.page-intro { max-width: 58rem; margin-block-end: clamp(1.25rem, 3vw, 2.4rem); }
.page-intro h1 {
  margin-block-end: .65rem;
  font-family: var(--display-font);
  font-size: clamp(2.2rem, 6vw, 4.3rem);
  font-weight: 890;
  letter-spacing: -.025em;
}
.page-intro > p:last-child, .panel > p { color: var(--muted); }
.panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-block-start: 3px solid #6c557e;
  padding: clamp(1rem, 3vw, 2rem);
  background: var(--surface-deep);
}
.panel + .panel { margin-block-start: 1rem; }
.panel :last-child { margin-block-end: 0; }
.stack { display: grid; gap: 1rem; }
.stack > * { margin: 0; }
.game-panel {
  border-block-start-color: var(--orange);
  background: #171621;
}

.game-mount, .play-field {
  min-width: 0;
  min-height: clamp(12rem, 36vw, 25rem);
  margin-block: .9rem;
  padding: clamp(.65rem, 2vw, 1.5rem);
  border: 1px solid #565161;
  background: #101018;
}
.game-mount:empty { display: none; }
.result-score {
  margin-block: .15rem .85rem;
  color: var(--orange-light);
  font-family: var(--display-font);
  font-size: clamp(2.6rem, 9vw, 5.5rem);
  font-weight: 890;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stats-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.notice, .empty-state {
  border: 1px solid var(--border);
  padding: .75rem 1rem;
  background: #1c1b28;
  color: var(--muted);
}
.notice { border-inline-start: 4px solid var(--orange); }

label { display: block; font-weight: 640; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  max-width: 100%;
  min-height: 44px;
  padding: .6rem .7rem;
  border: 1px solid var(--border);
  background: #211f2d;
  color: var(--text);
}
textarea { min-height: 7rem; resize: vertical; }
table { border-collapse: collapse; }
th, td { padding: .65rem .75rem; border-block-end: 1px solid var(--border); text-align: start; }
.table-scroll { max-width: 100%; overflow-x: auto; }
.report-nickname { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.report-nickname button { background: transparent; border: 0; color: var(--muted); font-size: .8em; padding: .2em 0; text-decoration: underline; }

.record-list { list-style: none; margin: 0; padding: 0; }
.record-list li { display: grid; grid-template-columns: 1fr auto; gap: .35rem .85rem; padding: .85rem 0; border-bottom: 1px solid var(--border); }
.record-list time, .record-list small { color: var(--muted); }

.ad-slot {
  width: min(100%, 61rem);
  min-height: 90px;
  margin: 150px auto 0;
}
.guide { margin-top: clamp(1rem, 3vw, 2rem); }
.guide section { max-width: 70ch; }
.guide p { margin-block-end: 0; }

@media (max-width: 47.99rem) {
  .ad-slot { display: none; }
}

.site-footer {
  position: relative;
  border-block-start: 1px solid #42394c;
  background: #12111a;
  color: var(--muted);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: -2px auto auto var(--gutter);
  width: min(5rem, 20vw);
  height: 4px;
  background: repeating-linear-gradient(130deg, #bc6a2e 0 6px, transparent 6px 10px);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  padding-block: 1.25rem;
}
.footer-inner p { margin: 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.15rem; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 48rem) {
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 57.5rem) {
  .header-inner { grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .7rem; padding-block: .5rem .2rem; }
  .locale-switcher { grid-column: 2; grid-row: 1; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; justify-content: start; }
  .hero { margin-inline: 0; }
}

@media (max-width: 31.25rem) {
  .brand::after { display: none; }
  .site-nav a { font-size: .9rem; }
  .locale-switcher summary { max-width: min(9.8rem, 44vw); padding-inline: .45rem; }
  .hero {
    min-height: 22.5rem;
    background-position: center, center, 78% center, center;
  }
  .game-card-link { min-height: 6.5rem; }
  .card-arrow { width: 1.75rem; min-height: 1.75rem; }
  .actions > .button { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}