:root {
  color-scheme: dark;
  font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  background: #111418;
  color: #f4f1e8;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { min-width: 320px; background: #111418; }

body {
  min-height: 100dvh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #111418;
}

a { color: inherit; text-decoration: none; }

.site-header {
  width: min(1360px, calc(100% - 48px));
  min-height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #34383d;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #b8944e;
  color: #e4c982;
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 700;
}

.brand > span:last-child { display: grid; gap: 2px; }
.brand b { font-family: Georgia, serif; font-size: 15px; font-weight: 700; }
.brand small { color: #9ba1a5; font-size: 13px; }

.world-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #b9bdbf;
  font-size: 13px;
}

.header-account {
  display: flex;
  align-items: center;
  gap: 14px;
}

.account-name { color: #f1e3b6; font-size: 14px; font-weight: 700; }
.logout-button,
.security-button,
.text-button {
  border: 0;
  background: transparent;
  color: #aeb3b6;
  font: 600 13px/1 system-ui, sans-serif;
  cursor: pointer;
}
.logout-button:hover,
.security-button:hover,
.text-button:hover { color: #f4f1e8; }

.world-count i,
.card-status .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #76a779;
  box-shadow: 0 0 0 3px rgba(118, 167, 121, .14);
}

main {
  width: min(1360px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(34px, 5vh, 64px) 0 42px;
}

.passport-panel {
  margin-bottom: 34px;
  padding: 22px 0 26px;
  display: grid;
  grid-template-columns: minmax(230px, .75fr) minmax(480px, 1.45fr);
  gap: 34px;
  align-items: end;
  border-bottom: 1px solid #34383d;
}

.passport-kicker {
  display: block;
  margin-bottom: 9px;
  color: #b8944e;
  font: 700 13px/1 Georgia, serif;
}

.passport-heading h1 {
  margin: 0;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 29px;
  font-weight: 600;
}

.passport-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.passport-form label,
.security-form label { display: grid; gap: 7px; }
.passport-form label > span,
.security-form label > span { color: #aeb3b6; font-size: 13px; }
.passport-form input,
.security-form input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #4a4f54;
  border-radius: 3px;
  outline: 0;
  background: #181b1e;
  color: #f4f1e8;
  font: 15px/1 system-ui, sans-serif;
}
.passport-form input:focus,
.security-form input:focus { border-color: #c3a15b; }
.passport-actions { min-width: 142px; display: grid; gap: 10px; }
.secondary-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.primary-button {
  height: 42px;
  padding: 0 18px;
  border: 1px solid #b8944e;
  border-radius: 3px;
  background: #b8944e;
  color: #121416;
  font: 700 14px/1 system-ui, sans-serif;
  cursor: pointer;
}
.primary-button:disabled { opacity: .58; cursor: wait; }
.passport-message {
  min-height: 18px;
  margin: 0;
  grid-column: 1 / -1;
  color: #b8bcbf;
  font-size: 13px;
}
.passport-message.error { color: #e29b90; }
.passport-panel.authenticated { display: none; }

.security-panel {
  margin-bottom: 34px;
  padding: 22px 0 26px;
  display: grid;
  grid-template-columns: minmax(230px, .75fr) minmax(480px, 1.45fr);
  gap: 34px;
  align-items: end;
  border-bottom: 1px solid #34383d;
}

.security-heading h1 {
  margin: 0;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 29px;
  font-weight: 600;
}

.email-status {
  min-height: 20px;
  margin: 10px 0 0;
  color: #b8bcbf;
  font-size: 13px;
}

.security-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.security-actions {
  min-width: 154px;
  display: grid;
  gap: 10px;
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid #e1c36f;
  outline-offset: 2px;
}

.page-heading { margin-bottom: 24px; }
.page-heading h1 {
  margin: 0;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 38px;
  font-weight: 600;
  line-height: 1.2;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}

.game-card {
  min-height: 220px;
  position: relative;
  display: flex;
  align-items: flex-end;
  border: 1px solid #3a3e42;
  border-radius: 6px;
  background: #202327;
}

.wow-card { background: #1b2427; }
.ro-card { background: #222321; }
.diablo-card { background: #251f1c; }

.card-status {
  min-height: 30px;
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(181, 205, 180, .45);
  border-radius: 3px;
  background: rgba(14, 20, 16, .9);
  color: #d9e6d6;
  font-size: 13px;
  font-weight: 700;
}

.card-status.testing {
  border-color: rgba(205, 181, 105, .58);
  background: rgba(31, 26, 15, .9);
  color: #ead79f;
}

.card-status.testing .status-dot { background: #d5ac53; box-shadow: 0 0 0 3px rgba(213, 172, 83, .14); }
.card-status.rebuilding { border-color: #736953; background: rgba(26, 25, 22, .92); color: #d7cdb8; }
.card-status.rebuilding .status-dot { background: #b39a66; box-shadow: none; }
.card-status.closed { border-color: #5b5e61; background: rgba(26, 27, 29, .92); color: #b6b8ba; }
.card-status.closed .status-dot { background: #777a7d; box-shadow: none; }

.card-copy {
  width: 100%;
  min-height: 156px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
}

.card-copy h2 {
  margin: 0;
  font-family: Georgia, "Noto Serif SC", serif;
  font-size: 27px;
  font-weight: 600;
  line-height: 1.3;
}

.card-action {
  min-height: 42px;
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 15px;
  border: 1px solid #ad8e4c;
  border-radius: 3px;
  background: #ad8e4c;
  color: #121416;
  font: 700 14px/1 system-ui, sans-serif;
}

.card-action b { font-size: 18px; line-height: 1; }
.ro-card .card-action { border-color: #6c8c74; background: #6c8c74; color: #0f1511; }
.rebuilding-card .card-action { border-color: #5d5950; background: #292a29; color: #b9b5aa; cursor: not-allowed; }
.diablo-card .card-action { border-color: #a96c4e; background: #a96c4e; color: #17110e; }

a.game-card:focus-visible { outline: 3px solid #e1c36f; outline-offset: 3px; }

@media (hover: hover) {
  a.game-card:hover { border-color: #8e7950; }
  a.game-card:hover .card-action { background: #d0ae61; }
  a.ro-card:hover .card-action { background: #86a98e; }
}

footer {
  width: min(1360px, calc(100% - 48px));
  min-height: 56px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #34383d;
  color: #777d81;
  font-size: 13px;
}

footer span:first-child { color: #a69265; font-family: Georgia, serif; font-weight: 700; }

@media (max-width: 850px) {
  .site-header,
  main,
  footer { width: min(100% - 28px, 620px); }
  .site-header { min-height: 64px; }
  .header-account { gap: 8px; }
  .account-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .world-count { font-size: 13px; }
  main { padding: 28px 0 34px; }
  .passport-panel { grid-template-columns: 1fr; gap: 20px; }
  .security-panel { grid-template-columns: 1fr; gap: 20px; }
  .passport-form { grid-template-columns: 1fr 1fr; }
  .security-form { grid-template-columns: 1fr 1fr; }
  .passport-actions { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; }
  .security-actions { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; }
  .game-grid { grid-template-columns: 1fr; }
  .game-card { min-height: 190px; }
  .card-copy { min-height: 142px; padding: 24px; }
  .card-copy h2 { font-size: 24px; }
}

@media (max-width: 440px) {
  .brand small { display: none; }
  .world-count { display: none; }
  .header-account { gap: 6px; }
  .account-name { max-width: 72px; }
  .page-heading h1 { font-size: 27px; }
  .passport-form { grid-template-columns: 1fr; }
  .security-form { grid-template-columns: 1fr; }
  .passport-actions { grid-column: auto; }
  .security-actions { grid-column: auto; }
  .game-card { min-height: 180px; }
  .card-copy { padding: 20px; }
  footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 4px; }
}