:root {
  --bg: #f4f7fb;
  --ink: #101828;
  --muted: #667085;
  --line: #dfe6ef;
  --panel: #ffffff;
  --red: #f05d5e;
  --blue: #3977e3;
  --green: #269b70;
  --yellow: #efb64a;
  --shadow: 0 16px 40px rgba(27, 39, 61, .09);
  --shadow-hover: 0 22px 54px rgba(27, 39, 61, .15);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 10% 0%, rgba(57, 119, 227, .09), transparent 28rem),
    radial-gradient(circle at 95% 18%, rgba(38, 155, 112, .08), transparent 25rem),
    var(--bg);
  color: var(--ink);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  min-height: 100vh;
  text-rendering: optimizeLegibility;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(57, 119, 227, .35);
  outline-offset: 3px;
}

.skip-link {
  background: #fff;
  border-radius: 10px;
  box-shadow: var(--shadow);
  color: var(--ink);
  font-weight: 700;
  left: 16px;
  padding: 10px 14px;
  position: fixed;
  text-decoration: none;
  top: 12px;
  transform: translateY(-160%);
  transition: transform .2s ease;
  z-index: 100;
}

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

.topbar {
  align-items: center;
  backdrop-filter: blur(18px);
  background: rgba(244, 247, 251, .86);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 20px;
  justify-content: space-between;
  padding: 14px clamp(18px, 5vw, 64px);
  position: sticky;
  top: 0;
  z-index: 5;
}

.brand {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 220px;
}

.brand-mark {
  align-items: center;
  background: linear-gradient(145deg, #1f2b3d, #0b1220);
  border-radius: 13px;
  box-shadow: 0 10px 24px rgba(16, 24, 40, .22);
  color: #fff;
  display: grid;
  font-size: 22px;
  height: 44px;
  place-items: center;
  width: 44px;
}

h1,
h2,
p {
  margin: 0;
}

.brand h1 {
  font-size: 21px;
}

.brand p,
.section-title span,
.dialog-head p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.search {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  gap: 8px;
  max-width: 360px;
  padding: 0 14px;
  width: 42vw;
}

.search:focus-within {
  border-color: rgba(57, 119, 227, .55);
  box-shadow: 0 0 0 4px rgba(57, 119, 227, .09);
}

.search input {
  border: 0;
  min-width: 0;
  outline: 0;
  padding: 13px 0;
  width: 100%;
}

.nav-links {
  display: flex;
  gap: 8px;
}

.nav-links a {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ink);
  padding: 11px 14px;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}

.nav-links a:hover {
  background: rgba(255, 255, 255, .72);
  border-color: var(--line);
}

.nav-links a[aria-current="page"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

main {
  margin: 0 auto;
  max-width: 1240px;
  padding: 34px clamp(16px, 4vw, 42px) 64px;
}

.hero {
  align-items: center;
  background:
    radial-gradient(circle at 78% 12%, rgba(92, 142, 255, .3), transparent 17rem),
    radial-gradient(circle at 28% 130%, rgba(38, 155, 112, .26), transparent 23rem),
    #111b2a;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 26px;
  box-shadow: 0 28px 70px rgba(16, 24, 40, .2);
  color: #fff;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  min-height: 300px;
  overflow: hidden;
  padding: clamp(26px, 5vw, 52px);
}

.rating-card {
  align-self: stretch;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 210px;
  padding: 24px;
}

.rating-card span {
  color: #9db1c6;
  font-size: 14px;
}

.rating-card strong {
  color: #fff;
  font-size: clamp(42px, 8vw, 72px);
  line-height: 1;
  margin: 12px 0;
}

.rating-card p {
  color: #c8d3de;
  line-height: 1.6;
}

.hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

.hero-points span {
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  color: #e9eef6;
  font-size: 13px;
  padding: 7px 11px;
}

.stats-panel {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  margin-top: 18px;
}

.stat,
.clear-button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  box-shadow: var(--shadow);
}

.stat {
  padding: 16px;
}

.stat span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  margin-bottom: 8px;
}

.stat strong {
  display: block;
  font-size: 24px;
  min-height: 30px;
}

.clear-button {
  align-self: stretch;
  color: var(--ink);
  cursor: pointer;
  padding: 0 18px;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.clear-button:hover {
  background: #fff8f8;
  border-color: rgba(240, 93, 94, .35);
  color: #c83f43;
}

.clear-button.is-armed {
  background: #c83f43;
  border-color: #c83f43;
  color: #fff;
}

.eyebrow {
  color: #89d7b2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.hero h2 {
  font-size: clamp(32px, 6vw, 58px);
  line-height: 1.05;
  max-width: 700px;
}

.hero-copy {
  color: #c8d3de;
  font-size: 17px;
  line-height: 1.75;
  margin-top: 18px;
  max-width: 620px;
}

.hero-art {
  aspect-ratio: 1 / 1;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
  max-height: 280px;
  position: relative;
}

.tile {
  border-radius: 8px;
  box-shadow: inset 0 -18px 0 rgba(0, 0, 0, .12);
}

.tile-red { background: var(--red); }
.tile-blue { background: var(--blue); }
.tile-green { background: var(--green); }
.tile-yellow { background: var(--yellow); }

.pulse {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 10px rgba(255,255,255,.12);
  height: 34px;
  left: calc(50% - 17px);
  position: absolute;
  top: calc(50% - 17px);
  width: 34px;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0;
}

.filter,
.game-filter,
.play-button,
.reset-button {
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.filter,
.game-filter {
  background: #fff;
  color: var(--ink);
  padding: 10px 16px;
  transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease;
}

.filter:hover,
.game-filter:hover {
  border-color: #a9b7c8;
  transform: translateY(-1px);
}

.filter.active,
.game-filter.active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.panel {
  margin-top: 18px;
}

.section-title {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-title h2 {
  font-size: 22px;
}

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

.game-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 220px;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.game-card:hover {
  border-color: #c9d4e2;
  box-shadow: var(--shadow-hover);
  transform: translateY(-4px);
}

.thumb {
  align-items: center;
  color: #fff;
  display: grid;
  font-size: 48px;
  font-weight: 800;
  height: 128px;
  letter-spacing: -.04em;
  place-items: center;
}

.thumb.memory { background: linear-gradient(135deg, #3977d6, #2f9d72); }
.thumb.blocks { background: linear-gradient(135deg, #e85d56, #efb84b); }
.thumb.react { background: linear-gradient(135deg, #18212c, #3977d6); }
.thumb.match { background: linear-gradient(135deg, #2f9d72, #efb84b); }
.thumb.number { background: linear-gradient(135deg, #6658c7, #e85d56); }
.thumb.dodge { background: linear-gradient(135deg, #0f766e, #18212c); }
.thumb.king {
  background: #5d3512 url("ko_banner.png") center / cover no-repeat;
  color: transparent;
}
.thumb.mahjong {
  background: linear-gradient(135deg, #164e3f 0%, #25755c 58%, #b43a42 100%);
  color: #fff6d6;
  font-family: KaiTi, STKaiti, serif;
}
.thumb.mine { background: linear-gradient(135deg, #3b4655, #9aa9b8); }

.game-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px;
}

.game-body h3 {
  font-size: 18px;
  margin: 0 0 7px;
}

.game-body p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  min-height: 44px;
}

.card-foot {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 16px;
}

.card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.tag {
  background: #eef3f7;
  border-radius: 999px;
  color: #425266;
  font-size: 12px;
  padding: 6px 10px;
}

.result-badge {
  background: #18212c;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
}

.play-button,
.reset-button {
  background: var(--ink);
  color: #fff;
  padding: 9px 13px;
  transition: box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.play-button:hover,
.reset-button:hover {
  background: #24354d;
  box-shadow: 0 8px 18px rgba(16, 24, 40, .18);
  transform: translateY(-1px);
}

.mini-link {
  background: #2f9d72;
  border: 1px solid #2f9d72;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  padding: 9px 12px;
}

.detail-link {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  padding: 9px 12px;
  text-decoration: none;
}

.detail-link:hover {
  background: #f7f9fc;
  border-color: #b9c6d5;
}

.detail-hero {
  align-items: center;
  background: #102625;
  border-radius: 8px;
  color: #fff;
  display: grid;
  gap: 28px;
  grid-template-columns: 150px 1fr;
  padding: clamp(24px, 5vw, 48px);
}

.app-icon {
  align-items: center;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #8a5a18, #e8b44f);
  border-radius: 24px;
  box-shadow: inset 0 -18px 0 rgba(0, 0, 0, .16);
  display: grid;
  font-size: 28px;
  font-weight: 800;
  place-items: center;
}

.detail-hero h2 {
  font-size: clamp(36px, 7vw, 64px);
  line-height: 1;
  margin: 0;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.detail-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.detail-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  margin-top: 18px;
  padding: 22px;
}

.detail-panel h2 {
  font-size: 22px;
  margin-bottom: 14px;
}

.feature-list {
  color: var(--muted);
  line-height: 1.8;
  margin: 0;
  padding-left: 20px;
}

.steps p,
.detail-note {
  color: var(--muted);
  line-height: 1.8;
  margin: 0 0 8px;
}

.preview-strip {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.preview-card {
  align-items: center;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #8a5a18, #102625);
  border-radius: 8px;
  color: #fff;
  display: grid;
  font-size: 20px;
  font-weight: 700;
  place-items: center;
}

.compact .game-card {
  min-height: 170px;
}

.compact .thumb {
  height: 82px;
}

.empty {
  color: var(--muted);
  padding: 28px 0;
  text-align: center;
}

dialog {
  border: 0;
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  max-width: min(760px, calc(100vw - 24px));
  padding: 0;
  width: 720px;
}

dialog::backdrop {
  backdrop-filter: blur(5px);
  background: rgba(10, 16, 24, .62);
}

.dialog-head {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 18px 20px;
}

.icon-button {
  background: #eef3f7;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-size: 24px;
  height: 40px;
  line-height: 1;
  width: 40px;
}

.game-notice {
  align-items: center;
  background: #ecfdf3;
  border: 1px solid #abefc6;
  border-radius: 12px;
  color: #087443;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 12px 14px;
}

.game-notice strong {
  color: #05603a;
}

.game-notice span {
  font-size: 14px;
}

.game-notice.is-error {
  background: #fff1f1;
  border-color: #fecaca;
  color: #b4232b;
}

.game-notice.is-error strong {
  color: #991b22;
}

.game-stage {
  min-height: 420px;
  padding: 20px;
}

.game-toolbar {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.score {
  color: var(--muted);
}

.board {
  display: grid;
  gap: 10px;
  margin: 0 auto;
  max-width: 440px;
}

.memory-board {
  grid-template-columns: repeat(4, 1fr);
}

.memory-card,
.block-cell,
.target-button {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  min-height: 70px;
  place-items: center;
}

.memory-card {
  background: #f0f4f8;
  color: transparent;
  font-size: 26px;
}

.memory-card.open,
.memory-card.done {
  background: #fff;
  color: var(--ink);
}

.block-board {
  grid-template-columns: repeat(6, 1fr);
}

.block-cell {
  aspect-ratio: 1 / 1;
  min-height: 0;
}

.target-area {
  background: #f0f4f8;
  border: 1px solid var(--line);
  border-radius: 8px;
  height: 300px;
  position: relative;
}

.target-button {
  background: var(--red);
  border: 0;
  color: #fff;
  height: 58px;
  position: absolute;
  width: 58px;
}

.games-hero {
  background:
    radial-gradient(circle at 82% 18%, rgba(63, 204, 150, .24), transparent 18rem),
    radial-gradient(circle at 24% 130%, rgba(239, 182, 74, .18), transparent 22rem),
    #102625;
}

.dodge-stage {
  background: #f0f4f8;
  border: 1px solid var(--line);
  border-radius: 8px;
  height: 320px;
  overflow: hidden;
  position: relative;
  touch-action: none;
}

.dodge-controls {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 12px;
}

.dodge-controls button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  cursor: pointer;
  font-size: 20px;
  font-weight: 800;
  min-height: 48px;
  min-width: 96px;
}

.dodge-controls button:active {
  background: #eaf1fb;
  transform: translateY(1px);
}

.player,
.hazard {
  border-radius: 8px;
  position: absolute;
}

.player {
  background: var(--blue);
  bottom: 18px;
  height: 34px;
  transform: translateX(-50%);
  width: 48px;
}

.hazard {
  background: var(--red);
  height: 34px;
  top: 0;
  width: 34px;
}

.king-hud,
.king-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.king-hud span {
  background: #f0f4f8;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 10px 12px;
}

.king-hud b {
  color: var(--ink);
}

.king-field {
  background: linear-gradient(180deg, #eef4eb, #dfe9d7);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 96px 1fr;
  height: 320px;
  overflow: hidden;
}

.castle {
  align-items: center;
  background: #8a5a18;
  color: #fff;
  display: grid;
  font-weight: 700;
  place-items: center;
}

.lane {
  position: relative;
}

.lane::before {
  background: rgba(138, 90, 24, .16);
  content: "";
  height: 80px;
  left: 0;
  position: absolute;
  right: 0;
  top: calc(50% - 40px);
}

.guard,
.enemy {
  align-items: center;
  border-radius: 8px;
  display: grid;
  font-size: 14px;
  font-weight: 700;
  height: 42px;
  place-items: center;
  position: absolute;
  top: calc(50% - 21px);
  transform: translateX(-50%);
  width: 42px;
  z-index: 1;
}

.guard {
  background: var(--blue);
  color: #fff;
}

.enemy {
  background: var(--red);
  color: #fff;
}

.mine-shell {
  background: #bdbdbd;
  border: 4px solid #f4f4f4;
  border-bottom-color: #7b7b7b;
  border-right-color: #7b7b7b;
  margin: 0 auto;
  max-width: 620px;
  padding: 10px;
}

.mine-options {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.mine-options .active {
  background: #3b4655;
}

.mine-panel {
  align-items: center;
  background: #bdbdbd;
  border: 4px solid #7b7b7b;
  border-bottom-color: #f4f4f4;
  border-right-color: #f4f4f4;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 8px;
}

.mine-counter {
  background: #111;
  border: 2px inset #777;
  color: #ff3333;
  font-family: Consolas, "Courier New", monospace;
  font-size: 28px;
  font-weight: 700;
  min-width: 70px;
  padding: 2px 6px;
  text-align: right;
}

.mine-face {
  background: #d8d8d8;
  border: 3px solid #fff;
  border-bottom-color: #777;
  border-right-color: #777;
  cursor: pointer;
  font-size: 24px;
  height: 44px;
  line-height: 1;
  width: 44px;
}

.mine-face:active {
  border-color: #777;
  border-bottom-color: #fff;
  border-right-color: #fff;
}

.mine-board {
  background: #7b7b7b;
  border: 4px solid #7b7b7b;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(9, 1fr);
  margin: 0 auto;
  max-width: 430px;
}

.mine-board.large {
  max-width: 560px;
}

.mine-cell {
  aspect-ratio: 1 / 1;
  background: #c6c6c6;
  border: 3px solid #f7f7f7;
  border-bottom-color: #7b7b7b;
  border-right-color: #7b7b7b;
  border-radius: 0;
  color: var(--ink);
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: clamp(13px, 3vw, 20px);
  font-weight: 800;
  min-height: 0;
  min-width: 0;
  padding: 0;
}

.mine-board.large .mine-cell {
  font-size: clamp(10px, 2vw, 15px);
}

.mine-cell.open {
  background: #c6c6c6;
  border: 1px solid #8f8f8f;
}

.mine-cell.flag {
  color: #d31616;
}

.mine-cell.boom {
  background: #e85d56;
  color: #111;
}

.mine-cell.n1 { color: #0000cc; }
.mine-cell.n2 { color: #007a22; }
.mine-cell.n3 { color: #cc0000; }
.mine-cell.n4 { color: #00007a; }
.mine-cell.n5 { color: #7a0000; }
.mine-cell.n6 { color: #007a7a; }
.mine-cell.n7 { color: #111; }
.mine-cell.n8 { color: #777; }

.rpg-hero {
  align-items: center;
  background: #231815;
  border-radius: 8px;
  color: #fff;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr);
  padding: clamp(24px, 5vw, 48px);
}

.rpg-hero h2 {
  font-size: clamp(36px, 7vw, 64px);
  line-height: 1;
  margin: 0;
}

.rpg-card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  padding: 24px;
}

.rpg-card span {
  color: #d8c4ae;
}

.rpg-card strong {
  display: block;
  font-size: 42px;
  margin: 12px 0;
}

.rpg-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: 280px 1fr;
  margin-top: 18px;
}

.rpg-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.rpg-panel label {
  color: var(--muted);
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.rpg-panel input,
.rpg-panel select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
}

.avatar {
  align-items: center;
  background: linear-gradient(135deg, #6f1d1b, #d4a373);
  border-radius: 8px;
  color: #fff;
  display: grid;
  font-size: 48px;
  height: 120px;
  margin: 14px 0;
  place-items: center;
}

.rpg-tabs,
.rpg-stats,
.map-grid,
.equipment {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rpg-tab,
.map-grid button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  padding: 10px 14px;
}

.rpg-tab.active,
.map-grid button.active {
  background: #231815;
  color: #fff;
}

.rpg-stats {
  margin: 16px 0;
}

.rpg-stats span,
.gear {
  background: #f0f4f8;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.battle-box {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  line-height: 1.7;
  margin-top: 16px;
  padding: 16px;
}

.gear {
  display: grid;
  gap: 6px;
  min-width: 150px;
}

.gear span {
  color: var(--muted);
  font-size: 12px;
}

.wuxia-game {
  max-width: 1280px;
}

.wuxia-hero {
  align-items: center;
  background: radial-gradient(circle at top right, rgba(212, 163, 115, .32), transparent 34%), #231815;
  border-radius: 8px;
  color: #fff;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr);
  min-height: 280px;
  padding: clamp(28px, 5vw, 54px);
}

.wuxia-hero h2 {
  font-size: clamp(36px, 7vw, 64px);
  line-height: 1;
  margin: 0;
}

.wuxia-summary {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  padding: 24px;
}

.wuxia-summary span {
  color: #d8c4ae;
}

.wuxia-summary strong {
  display: block;
  font-size: 42px;
  margin: 12px 0;
}

.wuxia-layout {
  display: grid;
  gap: 16px;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  margin-top: 18px;
}

.wuxia-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.wuxia-panel h2 {
  margin-bottom: 14px;
}

.wuxia-avatar {
  align-items: center;
  background: linear-gradient(135deg, #6f1d1b, #d4a373);
  border-radius: 8px;
  color: #fff;
  display: grid;
  font-size: 52px;
  height: 130px;
  margin-bottom: 14px;
  place-items: center;
}

.wuxia-panel label {
  color: var(--muted);
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.wuxia-panel input,
.wuxia-panel select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
}

.hero-actions,
.wuxia-tabs,
.wuxia-stats,
.stage-grid,
.gear-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.wuxia-tab,
.stage-grid button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  padding: 10px 14px;
}

.wuxia-tab.active,
.stage-grid button.active {
  background: #231815;
  border-color: #231815;
  color: #fff;
}

.wuxia-stats {
  margin: 16px 0;
}

.wuxia-stats span,
.gear-card,
.quest {
  background: #f7f9fb;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.stage-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stage-grid button {
  align-items: start;
  display: grid;
  gap: 5px;
  min-height: 96px;
  text-align: left;
}

.stage-grid span,
.stage-grid em,
.gear-card span,
.quest span {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.combat-arena {
  align-items: center;
  background: linear-gradient(135deg, #f8fafc, #eef2f6);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr 60px 1fr;
  margin: 16px 0;
  padding: 16px;
}

.fighter {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.versus {
  color: var(--red);
  font-size: 24px;
  font-weight: 800;
  text-align: center;
}

.hpbar {
  background: #dfe6ee;
  border-radius: 999px;
  height: 12px;
  margin-top: 12px;
  overflow: hidden;
}

.hpbar i {
  background: var(--green);
  display: block;
  height: 100%;
  transition: width .28s ease;
  width: 100%;
}

.enemy-fighter .hpbar i {
  background: var(--red);
}

.gear-card {
  display: grid;
  gap: 6px;
  min-width: 160px;
}

.quest {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.quest div {
  display: grid;
  gap: 4px;
}

.battle-log {
  display: grid;
  gap: 8px;
  max-height: 560px;
  overflow: auto;
}

.battle-log p {
  background: #f7f9fb;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #46566a;
  line-height: 1.55;
  padding: 10px;
}

@media (max-width: 820px) {
  .topbar,
  .hero {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    position: static;
  }

  .nav-links {
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .nav-links::-webkit-scrollbar {
    display: none;
  }

  .search {
    max-width: none;
    width: 100%;
  }

  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-hero,
  .detail-grid,
  .preview-strip,
  .rpg-hero,
  .rpg-layout,
  .wuxia-hero,
  .wuxia-layout {
    grid-template-columns: 1fr;
  }

  .stage-grid,
  .combat-arena {
    grid-template-columns: 1fr;
  }

  .clear-button {
    min-height: 58px;
  }
}

@media (max-width: 560px) {
  main {
    padding-top: 20px;
  }

  .brand p {
    display: none;
  }

  .nav-links a {
    background: rgba(255, 255, 255, .75);
    border-color: var(--line);
    padding: 9px 12px;
  }

  .hero {
    border-radius: 20px;
    min-height: 0;
    padding: 26px 22px;
  }

  .hero h2 {
    font-size: clamp(34px, 12vw, 48px);
  }

  .hero-copy {
    font-size: 15px;
  }

  .rating-card {
    min-height: 170px;
  }

  .controls {
    flex-wrap: nowrap;
    margin-left: -16px;
    margin-right: -16px;
    overflow-x: auto;
    padding: 2px 16px 8px;
    scrollbar-width: none;
  }

  .controls::-webkit-scrollbar {
    display: none;
  }

  .filter,
  .game-filter {
    flex: 0 0 auto;
  }

  .hero-art {
    max-height: none;
  }

  .game-grid {
    grid-template-columns: 1fr;
  }

  .game-stage {
    min-height: 360px;
    padding: 14px;
  }

  .card-foot {
    align-items: flex-start;
    gap: 12px;
  }

  .card-actions {
    flex-wrap: wrap;
  }

  dialog {
    border-radius: 16px;
    max-height: calc(100dvh - 16px);
    max-width: calc(100vw - 16px);
  }

  .stats-panel {
    grid-template-columns: 1fr;
  }
}

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

.hero243-page {
  background: #20150f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect width='120' height='120' fill='%2320150f'/%3E%3Cpath d='M0 28h120M0 88h120M28 0v120M88 0v120' stroke='%23342119' stroke-width='1'/%3E%3C/svg%3E");
  color: #3a2316;
  font-size: 12px;
  min-width: 1040px;
}

.hero243-page button,
.hero243-page input,
.hero243-page select {
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

.hero243-topline {
  background: linear-gradient(#3c2315, #1d100a);
  border-bottom: 1px solid #7d5634;
  color: #f3dfb7;
  display: flex;
  height: 30px;
  justify-content: space-between;
  line-height: 30px;
  padding: 0 calc((100vw - 1000px) / 2);
}

.hero243-topline nav {
  display: flex;
}

.hero243-topline a {
  border-left: 1px solid rgba(243, 223, 183, .18);
  color: #f3dfb7;
  padding: 0 12px;
  text-decoration: none;
}

.hero243-shell {
  background: #b7874f;
  border: 1px solid #6f4424;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .18), 0 18px 50px rgba(0, 0, 0, .45);
  margin: 18px auto 34px;
  max-width: none;
  padding: 0;
  width: 1000px;
}

.hero243-banner {
  align-items: center;
  background: linear-gradient(180deg, #7c2018, #3a150e 62%, #25100c);
  border-bottom: 3px solid #c09b5d;
  color: #f6e7c8;
  display: grid;
  grid-template-columns: 1fr 210px 110px;
  height: 92px;
  padding: 0 18px;
}

.hero243-logo strong {
  color: #ffe6a6;
  display: block;
  font-size: 34px;
  letter-spacing: 0;
  line-height: 1;
  text-shadow: 0 2px 0 #210b08, 0 0 12px rgba(255, 219, 130, .32);
}

.hero243-logo span,
.hero243-server span {
  color: #d8bd8c;
  display: block;
  margin-top: 8px;
}

.hero243-server {
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 230, 166, .28);
  padding: 10px 12px;
}

.hero243-server b {
  color: #fff0ba;
  display: block;
  font-size: 18px;
  margin-top: 3px;
}

.hero243-clock {
  color: #ffe6a6;
  font-family: Consolas, "Courier New", monospace;
  font-size: 18px;
  text-align: right;
}

.hero243-resource {
  background: linear-gradient(#ead4a8, #c99c61);
  border-bottom: 1px solid #7c4a28;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.hero243-resource span {
  border-right: 1px solid rgba(124, 74, 40, .45);
  padding: 8px 10px;
  text-align: center;
}

.hero243-resource b {
  color: #7a1c13;
}

.hero243-layout {
  display: grid;
  gap: 8px;
  grid-template-columns: 210px 1fr 250px;
  padding: 8px;
}

.hero243-panel,
.hero243-center {
  background: #f2dfb6;
  border: 1px solid #724424;
  box-shadow: inset 0 0 0 1px #fff1c8;
}

.hero243-panel {
  margin-bottom: 8px;
  padding: 8px;
}

.hero243-panel-title {
  background: linear-gradient(#7b2b1c, #42160f);
  border: 1px solid #2a0c08;
  color: #ffe8ad;
  font-weight: 700;
  margin: -4px -4px 8px;
  padding: 6px 8px;
}

.hero243-portrait {
  align-items: center;
  background: radial-gradient(circle at 50% 30%, #e9c16d, #913428 56%, #36130f);
  border: 2px solid #5f341d;
  box-shadow: inset 0 0 0 2px rgba(255, 238, 186, .35);
  color: #fff0b4;
  display: grid;
  font-size: 54px;
  font-weight: 800;
  height: 142px;
  margin-bottom: 8px;
  place-items: center;
  text-shadow: 0 2px 0 #3a120d;
}

.hero243-panel label {
  color: #59341e;
  display: grid;
  gap: 5px;
  margin-bottom: 8px;
}

.hero243-panel input,
.hero243-panel select {
  background: #fff7db;
  border: 1px solid #9a683a;
  color: #3a2316;
  height: 28px;
  padding: 4px 7px;
}

.hero243-actions {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
  margin: 8px 0;
}

.hero243-page button {
  background: linear-gradient(#ffe09c, #b66b2e);
  border: 1px solid #7b3e18;
  color: #431b0d;
  cursor: pointer;
  font-weight: 700;
  min-height: 28px;
  padding: 5px 9px;
}

.hero243-page button:disabled {
  cursor: default;
  filter: grayscale(.85);
  opacity: .55;
}

.hero243-wide,
.hero243-big {
  width: 100%;
}

.hero243-big {
  font-size: 16px;
  height: 42px;
}

.hero243-attrs {
  display: grid;
  gap: 4px;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}

.hero243-attrs div,
.hero243-gear-card,
.hero243-quest,
.hero243-rank div {
  background: #fff4d1;
  border: 1px solid #c29458;
}

.hero243-attrs div {
  display: flex;
  justify-content: space-between;
  padding: 6px;
}

.hero243-attrs dt,
.hero243-attrs dd {
  margin: 0;
}

.hero243-attrs dd {
  color: #8b2016;
  font-weight: 700;
}

.hero243-gear {
  display: grid;
  gap: 6px;
}

.hero243-gear-card {
  display: grid;
  gap: 3px;
  padding: 7px;
}

.hero243-gear-card span {
  color: #87562b;
}

.hero243-gear-card b {
  color: #8b2016;
}

.hero243-center {
  min-height: 632px;
  padding: 8px;
}

.hero243-scene-head {
  align-items: center;
  background: linear-gradient(90deg, #6e2217, #2f130e);
  border: 1px solid #2a0c08;
  color: #f8e4b6;
  display: flex;
  justify-content: space-between;
  min-height: 72px;
  padding: 10px 12px;
}

.hero243-scene-head h1 {
  color: #ffe39b;
  font-size: 25px;
  margin-bottom: 6px;
}

.hero243-scene-head p {
  color: #d9bd8b;
}

.hero243-scene-head span {
  background: #f0d18a;
  border: 1px solid #6b3516;
  color: #6e1711;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 12px;
}

.hero243-tabs {
  background: #8e5d31;
  border: 1px solid #704420;
  display: flex;
  gap: 4px;
  margin-top: 8px;
  padding: 5px;
}

.hero243-tabs button {
  min-width: 88px;
}

.hero243-tabs button.active {
  background: linear-gradient(#7d1f17, #42120d);
  color: #ffe6a6;
}

.hero243-view {
  padding-top: 8px;
}

.hero243-map {
  background: #dec18a;
  border: 1px solid #8f5d31;
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(3, 1fr);
  padding: 8px;
}

.hero243-map button {
  background: linear-gradient(#fff0bd, #c38a4a);
  min-height: 76px;
  text-align: left;
}

.hero243-map button.active {
  background: linear-gradient(#7d1f17, #42120d);
  color: #ffe6a6;
}

.hero243-map strong,
.hero243-map span,
.hero243-map em {
  display: block;
}

.hero243-map span,
.hero243-map em {
  font-style: normal;
  margin-top: 5px;
}

.hero243-battle {
  align-items: center;
  background: radial-gradient(circle at 50% 40%, #f2d48c, #8f5b30 58%, #3a1b13);
  border: 2px solid #6c3d20;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr 74px 1fr;
  height: 190px;
  margin-top: 8px;
  padding: 18px;
}

.hero243-fighter {
  background: rgba(255, 244, 209, .92);
  border: 1px solid #6b3516;
  min-height: 112px;
  padding: 12px;
}

.hero243-fighter b {
  color: #6e1711;
  display: block;
  font-size: 18px;
}

.hero243-fighter span {
  color: #71502e;
  display: block;
  margin: 8px 0 18px;
}

.hero243-fighter i {
  background: #6a2a1a;
  border: 1px solid #3b120b;
  display: block;
  height: 14px;
  overflow: hidden;
}

.hero243-fighter em {
  background: linear-gradient(#84d35f, #2b8c2e);
  display: block;
  height: 100%;
  transition: width .25s ease;
  width: 100%;
}

.hero243-fighter.enemy em {
  background: linear-gradient(#ee7568, #a61e17);
}

.hero243-vs {
  color: #ffe6a6;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  text-shadow: 0 2px 0 #2a0c08;
}

.hero243-command {
  background: #dec18a;
  border: 1px solid #8f5d31;
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
  padding: 10px;
}

.hero243-command button {
  min-width: 116px;
}

.hero243-notice {
  background: #fff4d1;
  border: 1px solid #c29458;
  line-height: 1.8;
  margin-bottom: 10px;
  padding: 14px;
}

.hero243-notice h2 {
  color: #6e1711;
  font-size: 20px;
  margin-bottom: 6px;
}

.hero243-bag {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
}

.hero243-quest {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr auto;
  margin-bottom: 7px;
  padding: 7px;
}

.hero243-quest strong,
.hero243-quest span {
  display: block;
}

.hero243-quest span,
.hero243-news {
  color: #76502b;
}

.hero243-news {
  line-height: 1.7;
  margin: 0;
  padding-left: 18px;
}

.hero243-log {
  display: grid;
  gap: 5px;
  max-height: 260px;
  overflow: auto;
}

.hero243-log p {
  background: #fff4d1;
  border: 1px solid #c29458;
  color: #5f3c21;
  line-height: 1.45;
  padding: 6px;
}

.hero243-rank {
  display: grid;
  gap: 7px;
}

.hero243-rank div {
  align-items: center;
  display: grid;
  grid-template-columns: 42px 1fr 78px;
  padding: 9px;
}

.hero243-rank .self {
  background: #ffe4a8;
  border-color: #8b2016;
}

.hero243-rank span {
  color: #8b2016;
  font-weight: 800;
}

.hero243-rank b {
  text-align: right;
}

.hero243-chat {
  align-items: center;
  background: linear-gradient(#3b2115, #1e100a);
  border-top: 1px solid #7d5634;
  color: #f3dfb7;
  display: grid;
  grid-template-columns: 58px 1fr 62px;
  min-height: 34px;
}

.hero243-chat span {
  background: #7d1f17;
  height: 100%;
  line-height: 34px;
  text-align: center;
}

.hero243-chat p {
  color: #f3dfb7;
  padding: 0 10px;
}

.hero243-chat button {
  border-bottom: 0;
  border-right: 0;
  border-top: 0;
  height: 34px;
}

@media (max-width: 1040px) {
  .hero243-page {
    min-width: 0;
  }

  .hero243-topline {
    padding: 0 10px;
  }

  .hero243-shell {
    margin: 0;
    width: 100%;
  }

  .hero243-banner,
  .hero243-layout,
  .hero243-resource {
    grid-template-columns: 1fr;
  }

  .hero243-resource span {
    text-align: left;
  }

  .hero243-map,
  .hero243-battle,
  .hero243-bag {
    grid-template-columns: 1fr;
  }
}

.ko-page {
  --ko-bg: #233a2b;
  --ko-panel: #fff6dc;
  --ko-line: #c98f43;
  --ko-brown: #76431c;
  --ko-orange: #f59a23;
  --ko-green: #59b85b;
  --ko-red: #ef5a45;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 232, 144, .32), transparent 28%),
    linear-gradient(180deg, #4d7d4a, #17291f);
  color: #55321a;
  min-height: 100vh;
  overflow-x: hidden;
}

.ko-phone {
  display: grid;
  margin: 0 auto;
  max-width: 430px;
  min-height: 100vh;
  padding: 0;
}

.ko-screen {
  background: linear-gradient(180deg, #84c86a 0%, #5eaa58 48%, #397848 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 22px 70px rgba(0,0,0,.28);
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

.ko-top {
  align-items: center;
  background: linear-gradient(180deg, #6c3b1c, #3f2414);
  color: #fff4c8;
  display: grid;
  grid-template-columns: 42px 1fr 76px;
  min-height: 56px;
  padding: 8px 10px;
}

.ko-back,
.ko-small,
.ko-actions button,
.ko-hero-row button {
  border-radius: 8px;
}

.ko-back {
  align-items: center;
  background: rgba(255, 244, 200, .16);
  color: #fff4c8;
  display: grid;
  font-size: 34px;
  height: 38px;
  line-height: 1;
  place-items: center;
  text-decoration: none;
  width: 38px;
}

.ko-title {
  text-align: center;
}

.ko-title strong,
.ko-title span {
  display: block;
}

.ko-title strong {
  font-size: 20px;
  line-height: 1.1;
}

.ko-title span {
  color: #ffd56f;
  font-size: 12px;
  margin-top: 4px;
}

.ko-small {
  background: linear-gradient(#fff0a8, #f0a331);
  border: 1px solid #8a541d;
  color: #6a3515;
  cursor: pointer;
  font-weight: 700;
  height: 34px;
}

.ko-resource {
  display: flex;
  gap: 8px;
  left: 12px;
  position: absolute;
  right: 12px;
  top: 66px;
  z-index: 4;
}

.ko-resource span {
  align-items: center;
  background: rgba(82, 44, 20, .82);
  border: 1px solid rgba(255, 226, 139, .55);
  border-radius: 999px;
  color: #fff3c2;
  display: flex;
  flex: 1;
  font-weight: 700;
  gap: 5px;
  justify-content: center;
  min-height: 30px;
}

.ko-resource i {
  border-radius: 50%;
  display: inline-block;
  height: 14px;
  width: 14px;
}

.ko-resource .coin { background: #f6be32; }
.ko-resource .gem { background: #63d8ff; transform: rotate(45deg) scale(.82); }
.ko-resource .heart { background: #ff5d57; }

.ko-battlefield {
  height: calc(100vh - 258px);
  min-height: 430px;
  overflow: hidden;
  position: relative;
}

.ko-sky {
  background: linear-gradient(180deg, #9be8ff 0%, #d7f8ff 34%, transparent 35%);
  height: 38%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.ko-cloud,
.ko-cloud::before,
.ko-cloud::after {
  background: rgba(255,255,255,.88);
  border-radius: 999px;
  content: "";
  position: absolute;
}

.ko-cloud {
  height: 18px;
  width: 62px;
}

.ko-cloud::before {
  height: 28px;
  left: 10px;
  top: -12px;
  width: 28px;
}

.ko-cloud::after {
  height: 24px;
  right: 8px;
  top: -9px;
  width: 24px;
}

.ko-cloud.c1 { left: 28px; top: 58px; }
.ko-cloud.c2 { right: 36px; top: 106px; transform: scale(.82); }

.ko-track {
  bottom: 116px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  left: 16px;
  position: absolute;
  right: 16px;
  top: 116px;
}

.ko-track span {
  border-left: 4px dashed rgba(101, 70, 32, .28);
  justify-self: center;
}

.ko-wave-tip {
  background: rgba(77, 45, 20, .78);
  border: 1px solid rgba(255, 232, 149, .5);
  border-radius: 999px;
  color: #fff5cb;
  font-weight: 700;
  left: 50%;
  padding: 8px 16px;
  position: absolute;
  top: 108px;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 3;
}

.ko-castle {
  bottom: 12px;
  height: 128px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 236px;
}

.ko-castle-hp {
  background: #4d1d13;
  border: 2px solid #ffe49a;
  border-radius: 999px;
  height: 14px;
  left: 32px;
  overflow: hidden;
  position: absolute;
  right: 32px;
  top: 0;
}

.ko-castle-hp i {
  background: linear-gradient(90deg, #44d55c, #baf06c);
  display: block;
  height: 100%;
  transition: width .2s ease;
  width: 100%;
}

.ko-tower,
.ko-keep {
  background: linear-gradient(#d79444, #965623);
  border: 3px solid #673616;
  bottom: 0;
  color: #fff7d5;
  position: absolute;
}

.ko-tower {
  height: 92px;
  width: 58px;
}

.ko-tower::before {
  background: #c13e28;
  border: 3px solid #673616;
  border-bottom: 0;
  content: "";
  height: 24px;
  left: -3px;
  position: absolute;
  right: -3px;
  top: -24px;
}

.ko-tower.left { left: 14px; }
.ko-tower.right { right: 14px; }

.ko-keep {
  align-items: center;
  display: grid;
  font-size: 24px;
  font-weight: 900;
  height: 112px;
  left: 61px;
  place-items: center;
  text-shadow: 0 2px 0 #6a3415;
  width: 114px;
}

.ko-keep::before {
  background: #c13e28;
  border: 3px solid #673616;
  border-bottom: 0;
  content: "";
  height: 30px;
  left: -3px;
  position: absolute;
  right: -3px;
  top: -30px;
}

.ko-panel {
  background: linear-gradient(#fff1c2, #e5b666);
  border-top: 4px solid #81501f;
  bottom: 0;
  box-shadow: 0 -10px 24px rgba(60, 36, 18, .18);
  left: 0;
  padding: 10px 12px 14px;
  position: relative;
  right: 0;
}

.ko-hero-row {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ko-king {
  align-items: center;
  display: flex;
  gap: 9px;
}

.ko-king-avatar {
  align-items: center;
  background: radial-gradient(circle at 50% 25%, #ffe7a1, #cc7733 58%, #7b3319);
  border: 2px solid #673616;
  border-radius: 50%;
  color: #fff6cd;
  display: grid;
  font-size: 22px;
  font-weight: 900;
  height: 46px;
  place-items: center;
  width: 46px;
}

.ko-king strong,
.ko-king span {
  display: block;
}

.ko-king span {
  color: #805024;
  font-size: 12px;
  margin-top: 3px;
}

.ko-hero-row button,
.ko-actions button {
  background: linear-gradient(#ffdf78, var(--ko-orange));
  border: 2px solid #8e511c;
  color: #642f13;
  cursor: pointer;
  font-weight: 900;
  min-height: 38px;
  padding: 0 12px;
}

.ko-skill-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}

.ko-card {
  background: linear-gradient(#fff9dd, #ffd174);
  border: 2px solid #a36123;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.38);
  color: #623215;
  cursor: pointer;
  min-height: 78px;
  padding: 7px 5px;
}

.ko-card.active {
  outline: 3px solid #fff1a5;
  transform: translateY(-2px);
}

.ko-card span,
.ko-card b,
.ko-card em {
  display: block;
}

.ko-card span {
  font-size: 18px;
  font-weight: 900;
}

.ko-card b {
  margin-top: 4px;
}

.ko-card em {
  color: #9a5a21;
  font-size: 12px;
  font-style: normal;
  margin-top: 4px;
}

.ko-actions {
  display: grid;
  gap: 8px;
  grid-template-columns: 1.2fr 1fr .8fr;
  margin-top: 10px;
}

.ko-enemy,
.ko-guard {
  align-items: center;
  border-radius: 50%;
  display: grid;
  font-weight: 900;
  height: 42px;
  place-items: center;
  position: absolute;
  transform: translateX(-50%);
  width: 42px;
  z-index: 2;
}

.ko-enemy {
  animation: koMarch 4.6s linear forwards;
  background: radial-gradient(circle at 45% 30%, #ff9780, #c73b2e 58%, #6a1d17);
  border: 3px solid #5c1c15;
  color: #fff3da;
  top: 112px;
}

.ko-enemy.hit {
  transform: translateX(-50%) scale(1.25);
  opacity: 0;
}

.ko-guard {
  background: radial-gradient(circle at 45% 30%, #bde7ff, #4f98df 58%, #24528a);
  border: 3px solid #24496f;
  bottom: 138px;
  color: #fff;
}

.ko-arrow-flash::after,
.ko-skill-burst::after {
  align-items: center;
  bottom: 116px;
  color: #fff7cb;
  display: grid;
  font-size: 34px;
  font-weight: 900;
  left: 0;
  place-items: center;
  position: absolute;
  right: 0;
  text-shadow: 0 3px 0 rgba(76, 41, 18, .6);
  top: 98px;
  z-index: 5;
}

.ko-arrow-flash::after {
  background: rgba(255, 238, 125, .28);
  content: "箭雨";
}

.ko-skill-burst::after {
  background: radial-gradient(circle, rgba(255, 236, 130, .72), rgba(255, 128, 47, .12) 62%, transparent);
  content: "国王指意";
}

@keyframes koMarch {
  from { top: 112px; }
  to { top: calc(100% - 168px); }
}

@media (max-width: 430px) {
  .ko-phone {
    max-width: none;
  }

  .ko-battlefield {
    min-height: 390px;
  }
}

.ko-game-page {
  --kog-dark: #2d1b12;
  --kog-panel: #fff0be;
  --kog-line: #8b5522;
  --kog-gold: #ffbf36;
  --kog-orange: #f08a24;
  --kog-green: #51b95b;
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 224, 105, .36), transparent 28%),
    linear-gradient(180deg, #355d3d, #17291f);
  color: #58331a;
  min-height: 100vh;
  overflow-x: hidden;
}

.ko-game-phone {
  margin: 0 auto;
  max-width: 430px;
  min-height: 100vh;
}

.ko-game-screen {
  background: #5aa84d;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .34);
  min-height: 100vh;
  overflow: hidden;
}

.ko-game-top {
  align-items: center;
  background: linear-gradient(#724020, #3b2114);
  color: #fff4c8;
  display: grid;
  grid-template-columns: 42px 1fr 66px;
  min-height: 58px;
  padding: 8px 10px;
}

.ko-game-top a {
  align-items: center;
  background: rgba(255,255,255,.13);
  border-radius: 8px;
  color: #fff4c8;
  display: grid;
  font-size: 34px;
  height: 38px;
  line-height: 1;
  place-items: center;
  text-decoration: none;
  width: 38px;
}

.ko-game-top div {
  text-align: center;
}

.ko-game-top strong,
.ko-game-top span {
  display: block;
}

.ko-game-top strong {
  font-size: 20px;
  line-height: 1.1;
}

.ko-game-top span {
  color: #ffd979;
  font-size: 12px;
  margin-top: 4px;
}

.ko-game-top button,
.ko-main-actions button,
.ko-wave-clear button {
  background: linear-gradient(#ffe281, var(--kog-orange));
  border: 2px solid var(--kog-line);
  border-radius: 8px;
  color: #5a2c12;
  cursor: pointer;
  font-weight: 900;
}

.ko-game-hud {
  background: linear-gradient(#fce5a5, #d7923f);
  border-bottom: 2px solid #7a461f;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
}

.ko-game-hud span {
  background: rgba(255, 248, 220, .36);
  font-weight: 800;
  padding: 7px 8px;
  text-align: center;
}

.ko-game-hud b {
  color: #8d2016;
}

.ko-canvas-wrap {
  background: #67b957;
  height: calc(100vh - 246px);
  min-height: 480px;
  position: relative;
}

.ko-canvas-wrap canvas {
  display: block;
  height: 100%;
  image-rendering: auto;
  width: 100%;
}

.ko-hp-bar {
  background: #4a2015;
  border: 2px solid #ffe7a1;
  border-radius: 999px;
  bottom: 18px;
  height: 16px;
  left: 86px;
  overflow: hidden;
  position: absolute;
  right: 86px;
  z-index: 3;
}

.ko-hp-bar i {
  background: linear-gradient(90deg, #37c84f, #b8f26b);
  display: block;
  height: 100%;
  transition: width .2s ease;
  width: 100%;
}

.ko-status {
  background: rgba(71, 41, 18, .78);
  border: 1px solid rgba(255, 232, 149, .6);
  border-radius: 999px;
  color: #fff5cb;
  font-weight: 900;
  left: 50%;
  max-width: calc(100% - 28px);
  overflow: hidden;
  padding: 8px 15px;
  position: absolute;
  text-align: center;
  text-overflow: ellipsis;
  top: 14px;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 4;
}

.ko-wave-clear {
  background: linear-gradient(#fff5d2, #ffd37b);
  border: 3px solid #86511f;
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0,0,0,.28);
  left: 22px;
  padding: 16px;
  position: absolute;
  right: 22px;
  text-align: center;
  top: 96px;
  z-index: 6;
}

.ko-wave-clear strong {
  color: #7e2117;
  display: block;
  font-size: 24px;
}

.ko-wave-clear p {
  color: #7a4b21;
  margin: 6px 0 12px;
}

.ko-wave-clear div {
  display: grid;
  gap: 8px;
}

.ko-wave-clear button {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 8px;
}

.ko-wave-clear button span {
  font-size: 12px;
  font-weight: 700;
}

.ko-bottom {
  background: linear-gradient(#fff0be, #dfa85b);
  border-top: 4px solid #78441b;
  box-shadow: 0 -12px 28px rgba(60, 32, 16, .22);
  padding: 9px 10px 12px;
}

.ko-stat-row {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 8px;
}

.ko-stat-row span {
  background: rgba(255,255,255,.42);
  border: 1px solid rgba(132, 79, 30, .45);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 5px;
  text-align: center;
}

.ko-stat-row b {
  color: #8b2016;
}

.ko-skill-row {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(4, 1fr);
}

.ko-skill {
  background: linear-gradient(#fff9d9, #ffcc63);
  border: 2px solid #965b22;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.34);
  color: #623215;
  cursor: pointer;
  min-height: 66px;
  padding: 6px 4px;
}

.ko-skill.active {
  outline: 3px solid #fff2a8;
  transform: translateY(-2px);
}

.ko-skill b,
.ko-skill span {
  display: block;
}

.ko-skill b {
  font-size: 16px;
}

.ko-skill span {
  color: #936025;
  font-size: 11px;
  font-weight: 800;
  margin-top: 5px;
}

.ko-main-actions {
  display: grid;
  gap: 7px;
  grid-template-columns: 1.35fr .7fr .8fr;
  margin-top: 8px;
}

.ko-main-actions button {
  min-height: 38px;
}

@media (max-width: 430px) {
  .ko-game-phone {
    max-width: none;
  }

  .ko-canvas-wrap {
    min-height: 430px;
  }
}

.ko-rogue-page {
  --kr-bg: #14100d;
  --kr-panel: #2b211a;
  --kr-panel-2: #3a2b20;
  --kr-gold: #f7c75a;
  --kr-line: #6c4a2b;
  --kr-text: #f9e8bd;
  --kr-muted: #b99a6b;
  background: radial-gradient(circle at 50% 0%, rgba(247,199,90,.26), transparent 32%), #14100d;
  color: var(--kr-text);
  min-height: 100vh;
  overflow-x: hidden;
}

.ko-rogue-phone {
  margin: 0 auto;
  max-width: 540px;
  min-height: 100vh;
  padding: 0;
}

.ko-rogue-screen {
  background: linear-gradient(180deg, #201712, #0f0d0b);
  box-shadow: 0 24px 72px rgba(0,0,0,.42);
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

.ko-rogue-top {
  align-items: center;
  background: linear-gradient(180deg, rgba(245,247,244,.78), rgba(128,128,128,.58));
  border: 2px solid rgba(40,40,40,.68);
  border-radius: 8px;
  box-shadow: 0 5px 0 rgba(0,0,0,.18), inset 0 0 0 2px rgba(255,255,255,.42);
  display: grid;
  grid-template-columns: 48px 1fr 112px;
  left: 16px;
  min-height: 54px;
  padding: 6px 8px;
  position: absolute;
  right: 16px;
  top: 12px;
  z-index: 5;
}

.ko-rogue-top a,
.ko-rogue-top button,
.ko-rogue-actions button,
.ko-rogue-panel button {
  border-radius: 8px;
}

.ko-rogue-top a {
  align-items: center;
  background: #fffaf2;
  border: 3px solid #4c4c4c;
  box-shadow: inset 0 0 0 3px #f2b56c, 0 2px 4px rgba(0,0,0,.22);
  color: #202020;
  display: grid;
  font-size: 36px;
  height: 44px;
  line-height: 1;
  place-items: center;
  text-decoration: none;
  width: 44px;
}

.ko-rogue-top div {
  text-align: center;
}

.ko-rogue-top strong,
.ko-rogue-top span {
  display: block;
}

.ko-rogue-top strong {
  color: #f8f8f8;
  font-size: 21px;
  line-height: 1.05;
  text-shadow: 0 2px 2px #303030;
}

.ko-rogue-top span {
  color: #f2f2f2;
  font-size: 12px;
  margin-top: 4px;
  text-shadow: 0 1px 2px #404040;
}

.ko-rogue-top button,
.ko-rogue-actions button,
.ko-rogue-panel button {
  background: linear-gradient(#ffe38a, #d47c26);
  border: 1px solid #8d5422;
  color: #442310;
  cursor: pointer;
  font-weight: 900;
}

.ko-rogue-tools {
  display: grid;
  gap: 5px;
  grid-template-columns: 1fr 1fr;
}

.ko-rogue-tools button {
  font-size: 12px;
  min-height: 36px;
  padding: 0 5px;
}

.ko-rogue-hud,
.ko-rogue-stats {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
}

.ko-rogue-hud {
  background: rgba(40,40,40,.52);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.24);
  left: 72px;
  position: absolute;
  right: 72px;
  top: 72px;
  z-index: 5;
}

.ko-rogue-hud span,
.ko-rogue-stats span {
  background: transparent;
  color: #f0f0f0;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 5px;
  text-align: center;
  text-shadow: 0 1px 2px #202020;
}

.ko-rogue-hud b,
.ko-rogue-stats b {
  color: #fff;
}

.ko-rogue-stage {
  background: #1c1815;
  height: 100vh;
  min-height: 760px;
  position: relative;
}

.ko-rogue-stage canvas {
  display: block;
  height: 100%;
  width: 100%;
}

.ko-rogue-toast {
  background: rgba(245,245,245,.82);
  border: 2px solid rgba(40,40,40,.7);
  border-radius: 999px;
  color: #2a2a2a;
  font-size: 13px;
  font-weight: 900;
  left: 50%;
  max-width: calc(100% - 24px);
  overflow: hidden;
  padding: 8px 14px;
  position: absolute;
  text-align: center;
  text-overflow: ellipsis;
  top: 116px;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 3;
}

.ko-rogue-progress {
  background: #232323;
  border: 2px solid #d7d7d7;
  border-radius: 999px;
  bottom: 110px;
  height: 13px;
  left: 10px;
  overflow: hidden;
  position: absolute;
  right: 10px;
  z-index: 3;
}

.ko-rogue-progress i {
  background: linear-gradient(90deg, #39bd78, #b7e383);
  display: block;
  height: 100%;
  transition: width .2s ease;
  width: 100%;
}

.ko-rogue-bottom {
  background: transparent;
  border: 0;
  inset: 0;
  padding: 0;
  pointer-events: none;
  position: absolute;
  z-index: 6;
}

.ko-rogue-stats {
  bottom: 82px;
  display: flex;
  gap: 6px;
  left: 10px;
  margin: 0;
  position: absolute;
  right: 96px;
}

.ko-rogue-skills {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  max-height: 272px;
  overflow-y: auto;
  pointer-events: auto;
  position: absolute;
  right: 10px;
  top: 31%;
  width: 48px;
  scrollbar-width: none;
}

.ko-rogue-skills::-webkit-scrollbar {
  display: none;
}

.ko-rogue-skill {
  background: rgba(225,225,225,.72);
  border: 2px solid rgba(35,35,35,.76);
  border-radius: 50%;
  box-shadow: 0 3px 4px rgba(0,0,0,.25), inset 0 1px 2px rgba(255,255,255,.72);
  color: #776854;
  cursor: pointer;
  height: 48px;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 48px;
}

.ko-rogue-skill:not(.locked) {
  color: var(--kr-text);
}

.ko-rogue-skill.active {
  background: #fff8dc;
  border-color: #f0b949;
  box-shadow: 0 0 0 4px rgba(255,205,68,.28), 0 3px 5px rgba(0,0,0,.28);
  transform: translateY(-1px);
}

.ko-rogue-skill span,
.ko-rogue-skill b,
.ko-rogue-skill em {
  display: block;
  text-align: center;
}

.ko-rogue-skill span {
  align-items: center;
  background: var(--skill-color, #f7c75a);
  border-radius: 50%;
  color: #25120b;
  display: grid;
  font-size: 17px;
  font-weight: 900;
  height: 100%;
  margin: 0;
  place-items: center;
  width: 100%;
}

.ko-rogue-skill b {
  display: none;
}

.ko-rogue-skill em {
  display: none;
}

.ko-rogue-skill.locked span {
  filter: grayscale(1);
  opacity: .45;
}

.ko-rogue-actions {
  display: grid;
  gap: 7px;
  grid-template-columns: 1.35fr .8fr .8fr;
  bottom: 12px;
  left: 10px;
  margin: 0;
  pointer-events: auto;
  position: absolute;
  right: 10px;
}

.ko-rogue-actions button {
  border-radius: 999px;
  min-height: 38px;
}

.ko-rogue-panel {
  background: linear-gradient(#fff2c2, #d99948);
  border: 3px solid #7b481e;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(0,0,0,.32);
  color: #502612;
  left: 20px;
  padding: 16px;
  position: absolute;
  right: 20px;
  text-align: center;
  top: 76px;
  z-index: 6;
}

.ko-rogue-panel strong {
  color: #842117;
  display: block;
  font-size: 24px;
}

.ko-rogue-panel p {
  color: #70431e;
  margin: 7px 0 13px;
}

.ko-rogue-panel div {
  display: grid;
  gap: 8px;
}

.ko-rogue-panel button {
  background: linear-gradient(#fff3b0, #e58d28);
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 8px;
}

.ko-rogue-panel button b,
.ko-rogue-panel button span {
  display: block;
}

.ko-rogue-panel button span {
  color: #75451d;
  font-size: 12px;
}

.ko-rogue-config {
  background: linear-gradient(#2f241b, #17110d);
  border: 2px solid rgba(247,199,90,.5);
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(0,0,0,.4);
  color: var(--kr-text);
  left: 12px;
  max-height: calc(100% - 28px);
  overflow: auto;
  padding: 12px;
  position: absolute;
  right: 12px;
  top: 14px;
  z-index: 7;
}

.ko-rogue-config-head {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.ko-rogue-config-head strong {
  color: #ffe6a8;
  font-size: 20px;
}

.ko-rogue-config-head button {
  background: linear-gradient(#ffe38a, #d47c26);
  border: 1px solid #8d5422;
  border-radius: 8px;
  color: #442310;
  cursor: pointer;
  font-weight: 900;
  min-height: 32px;
  padding: 0 12px;
}

.ko-rogue-config section {
  background: rgba(255,244,210,.06);
  border: 1px solid rgba(255,220,140,.12);
  border-radius: 8px;
  margin-top: 8px;
  overflow-x: auto;
  padding: 10px;
}

.ko-rogue-config h3 {
  color: var(--kr-gold);
  font-size: 15px;
  margin: 0 0 7px;
}

.ko-rogue-config p {
  color: var(--kr-muted);
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 6px;
}

.ko-rogue-config table {
  border-collapse: collapse;
  font-size: 12px;
  min-width: 310px;
  width: 100%;
}

.ko-rogue-config th,
.ko-rogue-config td {
  border-bottom: 1px solid rgba(255,220,140,.12);
  padding: 6px 5px;
  text-align: left;
}

.ko-rogue-config th {
  color: #ffe6a8;
}

.ko-rogue-config td {
  color: var(--kr-text);
}

.ko-rogue-config ul {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ko-rogue-config li {
  display: grid;
  gap: 3px;
}

.ko-rogue-config li b {
  color: #ffe6a8;
}

.ko-rogue-config li span {
  color: var(--kr-muted);
  font-size: 12px;
}

@media (max-width: 430px) {
  .ko-rogue-phone {
    max-width: none;
  }

  .ko-rogue-stage {
    height: 100svh;
    min-height: 720px;
  }

  .ko-rogue-top {
    min-height: 52px;
    padding: 5px 7px;
    left: 8px;
    right: 8px;
    top: 8px;
  }

  .ko-rogue-hud span,
  .ko-rogue-stats span {
    padding: 5px 4px;
  }

  .ko-rogue-hud {
    left: 58px;
    right: 58px;
    top: 72px;
  }

  .ko-rogue-toast {
    top: 112px;
  }
}

/* ══════════════════════════════════════
   武林英雄 · 江湖风云录
   ══════════════════════════════════════ */

.hero-page {
  --hp-bg: #1a1410;
  --hp-panel: #2a1f16;
  --hp-gold: #d4a945;
  --hp-red: #c0392b;
  --hp-green: #4a9c5d;
  --hp-text: #e8dcc8;
  --hp-muted: #8a7b65;
  --hp-line: #3d3024;
  --hp-accent: #e8c170;
  background:
    radial-gradient(circle at 50% 0%, rgba(212, 169, 69, .12), transparent 40%),
    linear-gradient(180deg, #1e1812 0%, #14100c 100%);
  color: var(--hp-text);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  font-size: 13px;
  min-height: 100vh;
  overflow-x: auto;
}

.hero-shell {
  margin: 0 auto;
  max-width: none;
  min-width: 1020px;
  padding: 0;
  width: 100%;
}

/* ── 顶部导航 ────────────────────── */
.hero-head {
  align-items: center;
  background: linear-gradient(180deg, #2c1a10, #1a100a);
  border-bottom: 2px solid #5a3d1e;
  display: flex;
  justify-content: space-between;
  padding: 14px 28px;
}

.hero-logo strong {
  background: linear-gradient(180deg, #f5d78c, #c4943d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 4px;
  line-height: 1.15;
  text-shadow: none;
}

.hero-logo span {
  color: #7a6548;
  display: block;
  font-size: 12px;
  letter-spacing: 2px;
  margin-top: 6px;
}

.hero-nav {
  display: flex;
  gap: 6px;
}

.hero-nav a {
  background: rgba(255, 230, 160, .08);
  border: 1px solid rgba(255, 230, 160, .18);
  border-radius: 6px;
  color: #c4a970;
  font-size: 13px;
  padding: 8px 16px;
  text-decoration: none;
  transition: all .18s ease;
}

.hero-nav a:hover {
  background: rgba(255, 230, 160, .16);
  color: #f0d78c;
}

/* ── 资源栏 ──────────────────────── */
.hero-bar {
  background: linear-gradient(180deg, #3d2a18, #271a0e);
  border-bottom: 1px solid #5a3d1e;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(6, 1fr);
}

.hero-bar-item {
  border-right: 1px solid rgba(90, 61, 30, .5);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 14px;
}

.hero-bar-item:last-child {
  border-right: 0;
}

.hero-bar-label {
  color: #6e5c44;
  font-size: 11px;
  letter-spacing: 1px;
}

.hero-bar-item strong {
  color: #e8c170;
  font-size: 16px;
}

.hero-bar-item.gold strong { color: #f5d78c; }
.hero-bar-item.power strong { color: #f08060; }

/* ── 三栏布局 ────────────────────── */
.hero-body {
  display: grid;
  gap: 0;
  grid-template-columns: 230px 1fr 260px;
  min-height: calc(100vh - 210px);
}

.hero-side {
  background: #1c1610;
  border-right: 1px solid #302518;
  padding: 10px;
}

.hero-side-right {
  border-left: 1px solid #302518;
  border-right: 0;
}

.hero-main {
  background: #1e1812;
  border-left: 1px solid #302518;
  border-right: 1px solid #302518;
  padding: 10px;
}

/* ── 卡片 ────────────────────────── */
.hero-card {
  background: var(--hp-panel);
  border: 1px solid var(--hp-line);
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}

.hero-card-head {
  background: linear-gradient(180deg, #3d2a18, #271a0e);
  border-bottom: 1px solid #5a3d1e;
  color: #e8c170;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 8px 12px;
}

/* ── 左侧：角色面板 ──────────────── */
.hero-avatar {
  align-items: center;
  background: radial-gradient(circle at 50% 25%, #f5d78c, #c0392b 50%, #2c100a);
  border: 2px solid #5a3d1e;
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(255, 230, 160, .25);
  color: #fff0b8;
  display: grid;
  font-size: 52px;
  font-weight: 900;
  height: 128px;
  margin: 10px;
  place-items: center;
  text-shadow: 0 3px 0 rgba(44, 16, 10, .6);
}

.hero-form {
  padding: 0 10px 10px;
}

.hero-form label {
  color: #7a6548;
  display: grid;
  font-size: 11px;
  gap: 5px;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.hero-form input,
.hero-form select {
  background: #2a1f14;
  border: 1px solid #4a3620;
  border-radius: 4px;
  color: #e8dcc8;
  font-size: 13px;
  padding: 7px 10px;
}

.hero-form select {
  cursor: pointer;
}

.hero-form-actions {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
  margin-top: 4px;
}

/* ── 属性 ────────────────────────── */
.hero-attrs {
  border-top: 1px solid var(--hp-line);
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  padding: 8px;
}

.hero-attrs div {
  background: rgba(255, 230, 160, .04);
  border: 1px solid rgba(90, 61, 30, .3);
  display: flex;
  justify-content: space-between;
  margin: -1px 0 0 -1px;
  padding: 6px 8px;
}

.hero-attrs dt {
  color: #7a6548;
  font-size: 11px;
  margin: 0;
}

.hero-attrs dd {
  color: #e8c170;
  font-weight: 700;
  margin: 0;
}

/* ── 装备 ────────────────────────── */
.hero-gear {
  display: grid;
  gap: 6px;
  padding: 8px;
}

.hero-gear-card {
  background: rgba(255, 230, 160, .05);
  border: 1px solid rgba(90, 61, 30, .35);
  border-radius: 4px;
  display: grid;
  gap: 3px;
  padding: 7px 9px;
}

.hero-gear-card span {
  color: #6e5c44;
  font-size: 11px;
}

.hero-gear-card strong {
  color: #e8dcc8;
  font-size: 13px;
}

.hero-gear-card b {
  color: #f08060;
  font-size: 12px;
}

.hero-btn-block {
  margin: 0 8px 8px;
  width: calc(100% - 16px);
}

/* ── 场景区 ──────────────────────── */
.hero-scene {
  align-items: center;
  background: linear-gradient(135deg, #3d1a12, #1a100a);
  border: 1px solid #5a3d1e;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  min-height: 72px;
  padding: 12px 16px;
}

.hero-scene-info h1 {
  color: #f5d78c;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 2px;
  margin: 0 0 4px;
}

.hero-scene-info p {
  color: #8a7b65;
  font-size: 13px;
  margin: 0;
}

.hero-realm {
  background: linear-gradient(135deg, rgba(212, 169, 69, .2), rgba(192, 57, 43, .2));
  border: 1px solid rgba(212, 169, 69, .3);
  border-radius: 4px;
  color: #f5d78c;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 8px 14px;
  white-space: nowrap;
}

/* ── Tabs ─────────────────────────── */
.hero-tabs {
  background: #2c1f14;
  border: 1px solid #3d3024;
  border-radius: 4px;
  display: flex;
  gap: 4px;
  margin-top: 10px;
  padding: 4px;
}

.hero-tabs button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  color: #8a7b65;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  flex: 1;
  letter-spacing: 1px;
  padding: 8px 0;
  transition: all .15s;
}

.hero-tabs button:hover {
  color: #c4a970;
}

.hero-tabs button.active {
  background: #3d2a18;
  border-color: #5a3d1e;
  color: #f5d78c;
}

/* ── 视图区 ──────────────────────── */
.hero-view {
  padding-top: 10px;
}

/* ── 关卡地图 ────────────────────── */
.hero-map {
  background: rgba(255, 230, 160, .03);
  border: 1px solid #302518;
  border-radius: 4px;
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
  padding: 10px;
}

.hero-map button {
  background: rgba(255, 230, 160, .04);
  border: 1px solid #3d3024;
  border-radius: 4px;
  color: #c4a970;
  cursor: pointer;
  min-height: 82px;
  padding: 10px;
  text-align: left;
  transition: all .15s;
}

.hero-map button:hover {
  background: rgba(255, 230, 160, .08);
  border-color: #5a3d1e;
}

.hero-map button.active {
  background: linear-gradient(135deg, rgba(192, 57, 43, .25), rgba(90, 30, 15, .4));
  border-color: #8b3a2e;
}

.hero-map strong,
.hero-map span,
.hero-map em {
  display: block;
}

.hero-map strong {
  color: #e8dcc8;
  font-size: 14px;
  margin-bottom: 4px;
}

.hero-map span,
.hero-map em {
  color: #6e5c44;
  font-size: 11px;
  font-style: normal;
  margin-top: 2px;
}

/* ── 战斗区 ──────────────────────── */
.hero-combat {
  align-items: center;
  background: radial-gradient(ellipse at 50% 60%, rgba(192, 57, 43, .18), transparent 55%), #1a1410;
  border: 2px solid #3d3024;
  border-radius: 6px;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 60px 1fr;
  margin-top: 10px;
  padding: 18px;
  transition: transform .08s ease;
  min-height: 150px;
}

.hero-fighter {
  background: rgba(255, 230, 160, .04);
  border: 1px solid #3d3024;
  border-radius: 4px;
  display: grid;
  gap: 6px;
  padding: 12px;
}

.hero-fighter-avatar {
  align-items: center;
  border-radius: 4px;
  color: #fff;
  display: grid;
  font-size: 18px;
  font-weight: 900;
  height: 36px;
  place-items: center;
  width: 36px;
}

.hero-bg { background: linear-gradient(135deg, #4a9c5d, #2d7a3f); }
.enemy-bg { background: linear-gradient(135deg, #c0392b, #8b1a1a); }

.hero-fighter b {
  color: #e8dcc8;
  display: block;
  font-size: 16px;
}

.hero-fighter small {
  color: #6e5c44;
  display: block;
  font-size: 12px;
}

.hero-hp-wrap {
  background: #2c100a;
  border: 1px solid #5a2a1a;
  border-radius: 999px;
  height: 10px;
  margin-top: 6px;
  overflow: hidden;
}

.hero-hp-bar {
  background: linear-gradient(90deg, #4a9c5d, #6fcc7e);
  display: block;
  height: 100%;
  transition: width .3s ease;
}

.enemy .hero-hp-bar {
  background: linear-gradient(90deg, #c0392b, #e8735d);
}

.hero-vs-mark {
  text-align: center;
}

.hero-vs-mark span {
  background: linear-gradient(135deg, rgba(192, 57, 43, .3), rgba(212, 169, 69, .2));
  border: 1px solid rgba(192, 57, 43, .4);
  border-radius: 4px;
  color: #f08060;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 2px;
  padding: 6px 10px;
}

/* ── 动作按钮 ────────────────────── */
.hero-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}

.hero-btn {
  background: rgba(255, 230, 160, .06);
  border: 1px solid #3d3024;
  border-radius: 4px;
  color: #c4a970;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  min-width: 110px;
  padding: 9px 16px;
  transition: all .15s;
}

.hero-btn:hover {
  background: rgba(255, 230, 160, .12);
  border-color: #5a3d1e;
}

.hero-btn:disabled {
  opacity: .4;
  cursor: default;
}

.hero-btn-primary {
  background: linear-gradient(135deg, rgba(192, 57, 43, .3), rgba(160, 40, 30, .5));
  border-color: #8b3a2e;
  color: #f08060;
}

.hero-btn-primary:hover {
  background: linear-gradient(135deg, rgba(220, 70, 50, .4), rgba(180, 50, 35, .6));
}

.hero-btn-large {
  font-size: 16px;
  min-height: 46px;
  padding: 12px 24px;
  width: 100%;
}

.hero-btn.danger {
  color: #d08070;
  border-color: rgba(192, 57, 43, .3);
}

/* ── 右侧：任务 ──────────────────── */
.hero-quests {
  padding: 8px;
}

.hero-quest {
  align-items: center;
  background: rgba(255, 230, 160, .04);
  border: 1px solid rgba(90, 61, 30, .25);
  border-radius: 4px;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto;
  margin-bottom: 6px;
  padding: 8px;
}

.hero-quest:last-child {
  margin-bottom: 0;
}

.hero-quest strong {
  color: #c4a970;
  display: block;
  font-size: 12px;
}

.hero-quest span {
  color: #6e5c44;
  display: block;
  font-size: 11px;
  margin-top: 3px;
}

.hero-quest button {
  background: rgba(255, 230, 160, .08);
  border: 1px solid #5a3d1e;
  border-radius: 3px;
  color: #f5d78c;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  white-space: nowrap;
}

.hero-quest button:hover {
  background: rgba(255, 230, 160, .18);
}

.hero-quest button:disabled {
  opacity: .35;
  cursor: default;
  color: #6e5c44;
}

/* ── 公告 ────────────────────────── */
.hero-news {
  color: #6e5c44;
  font-size: 11px;
  line-height: 1.8;
  margin: 0;
  padding: 10px 12px 10px 28px;
}

.hero-news li {
  margin-bottom: 4px;
}

/* ── 日志 ────────────────────────── */
.hero-log {
  display: grid;
  gap: 3px;
  max-height: 250px;
  overflow-y: auto;
  padding: 6px;
}

.hero-log p {
  background: rgba(255, 230, 160, .03);
  border: 1px solid rgba(90, 61, 30, .15);
  border-radius: 3px;
  color: #7a6548;
  font-size: 11px;
  line-height: 1.5;
  margin: 0;
  padding: 5px 8px;
}

/* ── 通知区 ──────────────────────── */
.hero-notice {
  background: rgba(255, 230, 160, .04);
  border: 1px solid #302518;
  border-radius: 4px;
  line-height: 1.7;
  margin-bottom: 12px;
  padding: 14px;
}

.hero-notice h3 {
  color: #f5d78c;
  font-size: 16px;
  margin: 0 0 6px;
}

.hero-notice p {
  color: #7a6548;
  font-size: 12px;
  margin: 0;
}

/* ── 包裹 ────────────────────────── */
.hero-bag {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, 1fr);
}

/* ── 排行 ────────────────────────── */
.hero-rank {
  display: grid;
  gap: 6px;
}

.hero-rank div {
  align-items: center;
  background: rgba(255, 230, 160, .03);
  border: 1px solid rgba(90, 61, 30, .2);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 38px 1fr 68px;
  padding: 9px 10px;
}

.hero-rank div.self {
  background: rgba(192, 57, 43, .12);
  border-color: rgba(192, 57, 43, .35);
}

.hero-rank span {
  color: #c0392b;
  font-weight: 900;
  font-size: 14px;
}

.hero-rank strong {
  color: #e8dcc8;
  font-size: 13px;
}

.hero-rank b {
  color: #f5d78c;
  font-size: 13px;
  text-align: right;
}

/* ── 武学 ────────────────────────── */
.hero-skills {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, 1fr);
}

.hero-skill-card {
  background: rgba(255, 230, 160, .04);
  border: 1px solid rgba(90, 61, 30, .25);
  border-radius: 4px;
  display: grid;
  gap: 4px;
  min-height: 90px;
  padding: 10px;
}

.hero-skill-card.learned {
  background: rgba(74, 156, 93, .08);
  border-color: rgba(74, 156, 93, .35);
}

.hero-skill-card strong {
  color: #e8dcc8;
  font-size: 14px;
}

.hero-skill-card p {
  color: #6e5c44;
  font-size: 11px;
  line-height: 1.4;
  margin: 0;
}

.hero-skill-tag {
  color: #4a7c5d;
  font-size: 11px;
  font-weight: 700;
}

.hero-skill-card:not(.learned) .hero-skill-tag {
  color: #6e5c44;
}

/* ── 底部聊天栏 ──────────────────── */
.hero-chat {
  align-items: center;
  background: linear-gradient(180deg, #2c1a10, #1a100a);
  border-top: 2px solid #5a3d1e;
  display: grid;
  gap: 0;
  grid-template-columns: 58px 1fr 64px;
  min-height: 36px;
}

.hero-chat span {
  background: #3d1a12;
  color: #f5d78c;
  font-size: 12px;
  font-weight: 700;
  height: 100%;
  letter-spacing: 2px;
  line-height: 36px;
  text-align: center;
}

.hero-chat marquee {
  color: #7a6548;
  font-size: 12px;
  padding: 0 12px;
}

.hero-chat button {
  background: rgba(255, 230, 160, .08);
  border: 0;
  border-left: 1px solid #3d3024;
  color: #6e5c44;
  cursor: pointer;
  font-size: 12px;
  height: 100%;
  transition: all .15s;
}

.hero-chat button:hover {
  color: #c4a970;
}

/* ── 滚动条美化 ──────────────────── */
.hero-log::-webkit-scrollbar {
  width: 4px;
}

.hero-log::-webkit-scrollbar-thumb {
  background: #3d3024;
  border-radius: 2px;
}

/* ── 响应式 ──────────────────────── */
@media (max-width: 1040px) {
  .hero-shell {
    min-width: 0;
  }

  .hero-body {
    grid-template-columns: 1fr;
  }

  .hero-side {
    border-right: 0;
    border-bottom: 1px solid #302518;
  }

  .hero-side-right {
    border-left: 0;
    border-top: 1px solid #302518;
  }

  .hero-main {
    border-left: 0;
    border-right: 0;
  }

  .hero-bar {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .hero-map,
  .hero-combat,
  .hero-skills,
  .hero-bag {
    grid-template-columns: 1fr;
  }

  .hero-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-head {
    flex-direction: column;
    gap: 12px;
  }
}

/* ══════════════════════════════════════
   国王指意 · 复刻版 v2
   技能施放型肉鸽塔防
   ══════════════════════════════════════ */

.ko-body-v2 {
  background: #0a0a14;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

.ko-phone-v2 {
  margin: 0 auto;
  max-width: 430px;
  min-height: 100vh;
}

.ko-screen-v2 {
  background: linear-gradient(180deg, #1a1a30, #0a0a18);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 50px rgba(0,0,0,.5);
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

/* 顶部栏 */
.ko-bar-v2 {
  align-items: center;
  background: linear-gradient(180deg, #3a2818, #1e1410);
  border-bottom: 2px solid #6a4020;
  color: #e0c080;
  display: grid;
  grid-template-columns: 38px 1fr 44px;
  min-height: 52px;
  padding: 4px 10px;
}

.ko-back-v2 {
  align-items: center;
  background: rgba(255,255,255,.08);
  border-radius: 5px;
  color: #e0c080;
  display: grid;
  font-size: 28px;
  height: 32px;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
  width: 32px;
}

.ko-bar-v2 > div {
  text-align: center;
}

.ko-bar-v2 strong {
  display: block;
  font-size: 18px;
  letter-spacing: 2px;
}

.ko-bar-v2 span {
  color: #c09840;
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.ko-bar-v2 b { color: #ffe080; }

.ko-bar-v2 button {
  background: rgba(255,255,255,.08);
  border: 0;
  border-radius: 5px;
  color: #e0c080;
  cursor: pointer;
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  width: 36px;
}

/* 金币条 */
.ko-goldbar {
  background: linear-gradient(180deg, #5a3a18, #3a2010);
  border-bottom: 1px solid #6a4020;
  display: flex;
  gap: 4px;
  padding: 6px 12px;
}

.ko-goldbar span {
  background: rgba(255,220,120,.1);
  border-radius: 4px;
  color: #d0a860;
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 8px;
  text-align: center;
}

.ko-goldbar b { color: #ffe080; }

/* 战场 */
.ko-stage-v2 {
  background: linear-gradient(180deg, #1a1a2e, #0a0a18);
  height: 55vh;
  min-height: 400px;
  overflow: hidden;
  position: relative;
}

.ko-stage-v2 canvas {
  display: block;
  height: 100%;
  image-rendering: auto;
  width: 100%;
}

.ko-flash {
  color: #ffe080;
  font-size: 16px;
  font-weight: 900;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  text-align: center;
  text-shadow: 0 0 12px rgba(255,220,100,.6);
  top: 10px;
  transform: translateX(-50%);
  transition: opacity .12s ease;
  white-space: nowrap;
  z-index: 5;
}

.ko-flash.show {
  opacity: 1;
}

/* 技能栏 */
.ko-skillbar {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(4, 1fr);
  padding: 4px 8px;
}

.ko-skill-v2 {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  color: #6a6050;
  cursor: pointer;
  display: grid;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  gap: 1px;
  min-height: 52px;
  padding: 5px 3px;
  position: relative;
  transition: all .15s;
}

.ko-skill-v2.learned {
  background: rgba(255,220,120,.1);
  border-color: rgba(255,220,120,.25);
  color: #d0b860;
}

.ko-skill-v2.active {
  background: rgba(255,200,40,.15);
  border-color: rgba(255,200,40,.4);
  box-shadow: 0 0 12px rgba(255,200,40,.1);
}

.ko-skill-v2.cooling {
  opacity: .55;
  pointer-events: none;
}

.ko-skill-v2.cooling::after {
  animation: koCdAnim var(--cd, 1s) linear forwards;
  background: rgba(0,0,0,.4);
  border-radius: 6px;
  content: "";
  inset: 0;
  position: absolute;
}

@keyframes koCdAnim {
  from { width: 100%; }
  to { width: 0%; }
}

.ko-skill-icon {
  display: block;
  font-size: 16px;
  text-align: center;
}

.ko-skill-v2 b {
  display: block;
  font-size: 11px;
  text-align: center;
}

.ko-skill-v2 small {
  color: #8a7040;
  display: block;
  font-size: 10px;
  text-align: center;
}

.ko-skill-v2 small em { color: #ffe080; font-style: normal; }

/* 控制栏 */
.ko-ctrl-v2 {
  align-items: center;
  background: linear-gradient(180deg, #2a2018, #1a1410);
  border-top: 2px solid #4a3018;
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr .6fr 1fr .8fr;
  padding: 8px 10px;
}

.ko-ctrl-v2 button {
  background: linear-gradient(180deg, #ffe080, #c08028);
  border: 2px solid #6a4018;
  border-radius: 6px;
  color: #3a1810;
  cursor: pointer;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
  min-height: 34px;
  padding: 5px;
}

.ko-ctrl-v2 span {
  color: #a08860;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.ko-ctrl-v2 span b { color: #e0c080; }

/* 弹窗 */
.ko-modal-v2 {
  align-items: center;
  background: rgba(0,0,0,.75);
  display: grid;
  inset: 0;
  place-items: center;
  position: absolute;
  z-index: 10;
}

.ko-modal-inner {
  background: linear-gradient(180deg, #3a2818, #1e1410);
  border: 2px solid #6a4020;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  max-width: 360px;
  padding: 16px;
  width: 90%;
}

.ko-modal-inner strong {
  color: #ffe080;
  display: block;
  font-size: 20px;
  letter-spacing: 2px;
  text-align: center;
}

.ko-modal-inner p {
  color: #a08050;
  font-size: 12px;
  margin: 6px 0 14px;
  text-align: center;
}

.ko-modal-inner > div {
  display: grid;
  gap: 8px;
}

.ko-upgrade-btn {
  align-items: center;
  background: rgba(255,220,120,.08);
  border: 1px solid rgba(255,220,120,.2);
  border-radius: 8px;
  color: #e0c080;
  cursor: pointer;
  display: grid;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  gap: 10px;
  grid-template-columns: 36px 1fr;
  min-height: 56px;
  padding: 10px 12px;
  text-align: left;
  transition: all .15s;
}

.ko-upgrade-btn:hover {
  background: rgba(255,220,120,.16);
  border-color: rgba(255,220,120,.4);
}

.ko-upgrade-btn span {
  font-size: 24px;
  text-align: center;
}

.ko-upgrade-btn b {
  color: #ffe080;
  display: block;
  font-size: 14px;
}

.ko-upgrade-btn small {
  color: #a08050;
  display: block;
  font-size: 11px;
  margin-top: 3px;
}

@media (max-width: 430px) {
  .ko-phone-v2 { max-width: none; }

  .ko-stage-v2 {
    height: calc(100vh - 320px);
    min-height: 340px;
  }
}

/* 2026-07-20 interface cleanup: quieter chrome, denser content, clearer play areas */
:root {
  --bg: #f6f7f9;
  --ink: #111827;
  --muted: #667085;
  --line: #e4e7ec;
  --panel: #ffffff;
  --accent: #2563eb;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .05);
  --shadow-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 16px 34px rgba(16, 24, 40, .09);
}

body:not(.hero-page):not(.hero243-page):not(.ko-rogue-page):not(.ko-page-v2) {
  background: var(--bg);
}

.topbar {
  background: rgba(246, 247, 249, .92);
  gap: 16px;
  min-height: 68px;
  padding: 10px clamp(16px, 4vw, 48px);
}

.brand { min-width: 205px; }

.brand-mark {
  border-radius: 11px;
  box-shadow: none;
  font-size: 18px;
  height: 40px;
  width: 40px;
}

.brand h1 { font-size: 18px; }
.brand p { font-size: 12px; }

.search {
  border-radius: 10px;
  max-width: 320px;
}

.search input { padding: 10px 0; }

.nav-links a {
  border-radius: 8px;
  font-size: 14px;
  padding: 9px 12px;
}

.nav-links a[aria-current="page"] {
  background: #111827;
  border-color: #111827;
}

body:not(.hero-page):not(.hero243-page):not(.ko-rogue-page):not(.ko-page-v2) > main {
  max-width: 1180px;
  padding: 24px clamp(16px, 3vw, 32px) 48px;
}

.hero:not(.hero-scene) {
  background: linear-gradient(135deg, #111827 0%, #17243a 64%, #173b42 100%);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgba(16, 24, 40, .12);
  gap: clamp(20px, 4vw, 44px);
  grid-template-columns: minmax(0, 1.5fr) minmax(210px, .5fr);
  min-height: 238px;
  padding: clamp(24px, 4vw, 38px);
}

.hero:not(.hero-scene) h2 {
  font-size: clamp(30px, 4.2vw, 46px);
  letter-spacing: -.035em;
}

.hero-copy {
  font-size: 15px;
  line-height: 1.65;
  margin-top: 12px;
}

.eyebrow {
  color: #67e8c1;
  font-size: 11px;
  letter-spacing: .12em;
  margin-bottom: 9px;
}

.hero-points { margin-top: 16px; }

.hero-points span {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .1);
  padding: 6px 10px;
}

.rating-card {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .1);
  border-radius: 14px;
  min-height: 150px;
  padding: 20px;
}

.rating-card strong {
  font-size: clamp(36px, 5vw, 54px);
  margin: 8px 0;
}

.rating-card p { font-size: 13px; }

.stats-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  gap: 0;
  margin-top: 14px;
  overflow: hidden;
}

.stat,
.clear-button {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.stat {
  border-right: 1px solid var(--line);
  padding: 13px 16px;
}

.stat span { margin-bottom: 4px; }
.stat strong { font-size: 20px; min-height: 24px; }

.clear-button {
  border-left: 1px solid var(--line);
  font-size: 13px;
}

.controls {
  gap: 8px;
  margin: 18px 0 14px;
}

.filter,
.game-filter {
  border-radius: 999px;
  font-size: 13px;
  padding: 8px 13px;
}

.filter:hover,
.game-filter:hover { transform: none; }

.panel { margin-top: 14px; }
.section-title { margin-bottom: 11px; }
.section-title h2 { font-size: 19px; }

.game-grid { gap: 12px; }

.game-card {
  border-radius: 14px;
  min-height: 190px;
}

.game-card:hover { transform: translateY(-2px); }

.thumb {
  font-size: 36px;
  height: 96px;
}

.game-body { padding: 14px; }
.game-body h3 { font-size: 16px; margin-bottom: 5px; }
.game-body p { font-size: 13px; min-height: 40px; }
.card-foot { padding-top: 12px; }

.play-button,
.reset-button,
.mini-link,
.detail-link {
  border-radius: 8px;
  font-size: 13px;
  padding: 8px 11px;
}

dialog {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(16, 24, 40, .28);
  max-height: 90vh;
}

dialog::backdrop {
  backdrop-filter: blur(4px);
  background: rgba(10, 17, 29, .68);
}

.dialog-head { padding: 16px 18px; }
.game-stage { min-height: min(520px, 66vh); padding: 18px; }

/* Modern wuxia page: keep the scene dominant and make utility surfaces quieter. */
.hero-page {
  background: #0f1115;
  padding: 14px;
}

.hero-shell {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
  overflow: hidden;
}

.hero-head { min-height: 60px; padding: 10px 18px; }
.hero-logo strong { font-size: 21px; }
.hero-logo span { font-size: 11px; }
.hero-nav a { padding: 7px 10px; }
.hero-bar { min-height: 54px; }
.hero-bar-item { padding: 8px 12px; }
.hero-body { gap: 10px; padding: 10px; }
.hero-side { gap: 10px; width: 220px; }
.hero-card { border-radius: 10px; }
.hero-card-head { padding: 9px 12px; }
.hero-main { min-width: 0; }
.hero-scene { min-height: 104px; padding: 16px 18px; }
.hero-tabs { padding: 6px; }
.hero-tabs button { padding: 8px 12px; }
.hero-view { padding: 12px; }
.hero-chat { min-height: 42px; }

/* Legacy server page: reduce ornamental bulk without changing its game structure. */
.hero243-page { background: #17120e; }
.hero243-topline { min-height: 38px; padding: 7px clamp(12px, 3vw, 30px); }
.hero243-shell { padding: 10px; }
.hero243-banner { min-height: 86px; padding: 14px 18px; }
.hero243-resource { gap: 0; margin-top: 8px; overflow-x: auto; }
.hero243-resource span { min-width: max-content; padding: 9px 12px; }
.hero243-layout { gap: 8px; margin-top: 8px; }
.hero243-panel,
.hero243-center { border-radius: 8px; }
.hero243-panel { padding: 10px; }
.hero243-chat { margin-top: 8px; }

/* Tower-defense phone shell: trim chrome so the battlefield gets the space. */
.ko-rogue-phone { padding: 8px; }
.ko-rogue-screen { border-radius: 14px; }
.ko-rogue-top { min-height: 52px; padding: 7px 10px; }
.ko-rogue-hud { min-height: 36px; padding: 5px 10px; }
.ko-rogue-bottom { padding: 7px 9px 9px; }
.ko-rogue-stats { margin-bottom: 5px; }
.ko-rogue-actions { gap: 6px; }

@media (max-width: 820px) {
  .topbar {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr auto;
  }

  .brand p { display: none; }
  .search { grid-column: 1 / -1; max-width: none; order: 3; width: 100%; }
  .nav-links { justify-content: flex-end; }

  .hero:not(.hero-scene) {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .rating-card {
    display: grid;
    gap: 4px 14px;
    grid-template-columns: auto 1fr;
    min-height: 0;
  }

  .rating-card strong { grid-row: 1 / 3; margin: 0; }
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hero-page { padding: 0; }
  .hero-shell { border: 0; border-radius: 0; }
  .hero-side { width: auto; }
}

@media (max-width: 560px) {
  .topbar { min-height: 0; padding: 9px 12px; }
  .brand { min-width: 0; }
  .brand-mark { height: 36px; width: 36px; }
  .brand h1 { font-size: 16px; }

  .nav-links { gap: 3px; overflow-x: auto; }
  .nav-links a { font-size: 12px; padding: 8px; }

  body:not(.hero-page):not(.hero243-page):not(.ko-rogue-page):not(.ko-page-v2) > main {
    padding: 14px 12px 36px;
  }

  .hero:not(.hero-scene) { border-radius: 16px; padding: 22px 18px; }
  .hero-copy { font-size: 14px; }
  .hero-points { gap: 6px; }
  .hero-points span { font-size: 11px; }

  .stats-panel { grid-template-columns: repeat(3, 1fr); }
  .clear-button { grid-column: 1 / -1; min-height: 40px; }
  .stat { padding: 11px 9px; }
  .stat strong { font-size: 17px; }

  .game-grid { grid-template-columns: 1fr; }
  .game-card { display: grid; grid-template-columns: 96px 1fr; min-height: 0; }
  .thumb { height: 100%; min-height: 150px; }
  .game-body p { min-height: 0; }

  dialog {
    border: 0;
    border-radius: 0;
    height: 100dvh;
    margin: 0;
    max-height: none;
    max-width: none;
    width: 100vw;
  }

  .game-stage { min-height: calc(100dvh - 74px); padding: 12px; }
  .hero-head { padding: 9px 12px; }
  .hero-logo span { display: none; }
  .hero-nav { overflow-x: auto; }
  .hero-bar { overflow-x: auto; }
  .hero-bar-item { min-width: 86px; }
}