/* Horde is Everything: shared "arcade pixel" look (lobby, battle log, account pages).
   Flat colors, hard offset shadows, 4px frames. No rounded corners, no blur, no gradients. */
:root {
  --ground: #140f2b;   /* page */
  --panel: #0d0a1e;    /* framed panels */
  --deep: #07051a;     /* inputs, code */
  --ink: #e9e4ff;      /* body text */
  --lav: #c8c0ff;      /* secondary text */
  --dim: #a59ce0;      /* tertiary text (still >= 4.5:1 on panel) */
  --line: #2a2450;     /* row separators */
  --edge: #3d3478;     /* quiet borders */
  --gold: #ffd36b;
  --gold-sh: #5a2a08;
  --cream: #fff1c2;
  --green: #7dff9b;
  --red: #ff8a8a;
  --on-gold: #1a0d02;
  --px: "Press Start 2P", "Noto Sans KR", monospace;
  --kr: "Noto Sans KR", system-ui, sans-serif;
}
* { box-sizing: border-box; border-radius: 0; }
html, body { margin: 0; }
body.arcade { background: var(--ground); color: var(--ink); font: 15px/1.6 var(--kr); -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: break-word; }
body.arcade a { color: var(--gold); }
body.arcade a:hover { color: var(--cream); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

.px { font-family: var(--px); letter-spacing: .02em; line-height: 1.7; }

/* framed panel */
.frame { background: var(--panel); border: 4px solid var(--fc, var(--gold)); box-shadow: 6px 6px 0 #000; padding: 18px 20px; }
.frame-h { font: 11px/1.6 var(--px); color: var(--fc, var(--gold)); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.frame-h .grow { flex: 1; }

/* the menu cursor and small pixel marks */
.cur { display: inline-block; width: 12px; height: 12px; background: var(--green); flex: none; }
.sq { display: inline-block; width: 10px; height: 10px; background: var(--c, var(--gold)); flex: none; vertical-align: 1px; }
.blink { animation: px-blink 1s steps(1) infinite; }
@keyframes px-blink { 50% { opacity: 0; } }
.tri { display: inline-block; width: 8px; height: 10px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); flex: none; }

/* buttons: 44px tall touch targets */
.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px;
  background: var(--gold); color: var(--on-gold); border: 0; box-shadow: 4px 4px 0 #000; cursor: pointer; text-decoration: none;
  font: 700 14px/1.3 var(--kr); }
body.arcade a.btn { color: var(--on-gold); }
.btn:hover, body.arcade a.btn:hover { background: var(--cream); color: var(--on-gold); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.go { background: var(--green); }
.btn.ghost, body.arcade a.btn.ghost { background: var(--panel); color: var(--gold); border: 2px solid var(--gold); box-shadow: none; }
.btn.ghost:hover, body.arcade a.btn.ghost:hover { background: var(--gold); color: var(--on-gold); }
.btn.danger, body.arcade a.btn.danger { background: var(--panel); color: var(--red); border: 2px solid var(--red); box-shadow: none; }
.btn.danger:hover { background: var(--red); color: var(--on-gold); }
.btn.small { padding: 0 12px; font-size: 13px; }
.btn .px, .btn.px { font: 11px/1.4 var(--px); letter-spacing: .02em; }

/* form fields */
body.arcade input[type=text], body.arcade input:not([type]), body.arcade input[type=number], body.arcade input[type=password], body.arcade input[type=email], body.arcade select, body.arcade textarea {
  background: var(--deep); color: var(--ink); border: 2px solid var(--edge); padding: 10px 12px; min-height: 44px; font: 15px var(--kr); }
body.arcade input:focus, body.arcade select:focus, body.arcade textarea:focus { outline: none; border-color: var(--gold); }
body.arcade input::placeholder, body.arcade textarea::placeholder { color: var(--dim); opacity: 1; }
body.arcade input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--green); vertical-align: -4px; margin: 0 6px 0 0; }

/* top bar used on every page */
.topbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.topbar .logo { font: 12px/1.5 var(--px); color: var(--gold); text-decoration: none; text-shadow: 3px 3px 0 var(--gold-sh); display: inline-block; padding: 13px 0; }
.topbar .links { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.topbar .links a, .topbar .links button { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px;
  font: 10px/1.4 var(--px); color: var(--lav); text-decoration: none; background: transparent; border: 2px solid transparent; cursor: pointer; }
.topbar .links .kr { font: 700 14px/1.4 var(--kr); }
.topbar .links a:hover, .topbar .links button:hover { color: var(--gold); border-color: var(--gold); }

/* code snippets with a copy button */
.snip { position: relative; background: var(--deep); border: 2px solid var(--edge); padding: 14px 14px; padding-right: 76px; margin: 8px 0 14px; min-height: 56px;
  font: 13px/1.55 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; color: #dcd6ff; }
.snip .copy { position: absolute; right: 4px; top: 4px; min-height: 44px; min-width: 60px; background: var(--panel); color: var(--gold);
  border: 2px solid var(--gold); padding: 0 8px; font: 700 12px var(--kr); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.snip .copy:hover { background: var(--gold); color: var(--on-gold); }
.snip .copy.done { color: var(--green); border-color: var(--green); }

.muted { color: var(--lav); font-size: 14px; }
.empty { color: var(--lav); font-size: 14px; padding: 10px 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* small labels */
.tag { display: inline-block; font: 8px/1 var(--px); padding: 4px 5px; background: var(--edge); color: var(--ink); vertical-align: 2px; }
.tag.live { background: var(--green); color: var(--on-gold); }
.tag.wait { background: var(--gold); color: var(--on-gold); }
.tag.champ { background: var(--gold); color: var(--on-gold); }
.tag.guest { background: transparent; color: var(--dim); border: 1px solid var(--dim); padding: 3px 4px; }

@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }
@media (max-width: 520px) {
  .frame { padding: 14px 14px; }
  .snip { font-size: 12.5px; padding: 58px 12px 12px; }
}