@font-face {
  font-family:RunPixel;
  src:url('/assets/fonts/Galmuri11.woff2') format('woff2');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:RunPixel;
  src:url('/assets/fonts/Galmuri11-Bold.woff2') format('woff2');
  font-weight:700 1000;
  font-display:swap
}
* {
  box-sizing:border-box
}
html {
  color-scheme:dark
}
body {
  margin:0;
  background:#0a0e18;
  color:#f5f1e8;
  font-family:RunPixel,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  min-height:100dvh;
  background-image:radial-gradient(ellipse at 50% 45%,#19263860,transparent 65%);
  overflow:hidden
}
button,input,select {
  font:inherit
}
button,a,input,select {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:default
}
a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid #81f5c0;
  outline-offset:4px
}
button:focus,summary:focus {
  outline:none
}
html[data-button-input="keyboard"] button:not([data-choice-index]):focus-visible,html[data-button-input="keyboard"] summary:focus-visible {
  outline:2px solid #f5f1e8;
  outline-offset:3px
}
/* Answer feedback comes from the pressed PNG, including numeric-key input. */
button[data-choice-index]:focus,button[data-choice-index]:focus-visible {
  outline:none !important
}
button {
  color:inherit
}
a {
  color:inherit;
  text-decoration:none
}
button {
  touch-action:manipulation
}
button[hidden],[hidden] {
  display:none!important
}
.app-header {
  height:66px;
  max-width:1320px;
  margin:auto;
  padding:0 38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #ffffff0b
}
.wordmark {
  font:bold 18px/1 monospace;
  letter-spacing:1px;
  display:flex;
  align-items:center
}
.wordmark>span {
  color:#7ee9ad
}
.wordmark img {
  width:22px;
  height:26px;
  object-fit:contain;
  image-rendering:pixelated;
  margin-right:10px
}
.wordmark small {
  font:12px/1.4 sans-serif;
  color:#7d899a;
  margin-left:16px;
  letter-spacing:0
}
.app-header nav {
  display:flex;
  gap:20px;
  align-items:center
}
.quiet-button {
  background:none;
  border:0;
  padding:8px 0;
  color:#98a4b9;
  font-size:13px
}
.game-area {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  position:relative;
  width:100%;
  height:100dvh;
  padding:0;
  gap:56px;
  min-height:0;
  overflow:hidden
}
.game-shell {
  grid-column:2;
  width:450px;
  height:800px;
  flex-shrink:0;
  position:relative;
  background:#07101b;
  box-shadow:0 30px 100px #0009,0 0 0 1px #6e798c55,0 0 0 6px #111620;
  border-radius:12px;
  overflow:hidden
}