/* v36 unified interface, community, leaderboard and in-run economy. */
:root {
  --ui-bg: #0d1511;
  --ui-panel: #16211b;
  --ui-panel-2: #1d2922;
  --ui-line: rgba(220, 229, 215, .16);
  --ui-text: #edf1e8;
  --ui-muted: #9eaca1;
  --ui-gold: #e2c45f;
  --ui-cyan: #74cbd1;
  --ui-red: #df7168;
  --ui-purple: #b889da;
}

button, input, select { border-radius: 5px; }
button { transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .16s ease; }
button:not(:disabled):active { transform: translateY(1px); }

.main-menu-panel { width: min(520px, calc(100vw - 32px)); }
.main-menu-brand { padding-left: 18px; border-left: 3px solid var(--ui-gold); }
.main-menu-brand h1 { color: #fff5cf; text-shadow: 0 6px 28px rgba(0, 0, 0, .72); }
.main-menu-actions { border-top: 1px solid var(--ui-line); }
.main-menu-actions button { min-height: 54px; border-bottom: 1px solid rgba(255,255,255,.07); }
.main-menu-actions button:hover { padding-left: 17px; border-left-color: var(--ui-gold); background: rgba(226,196,95,.08); }

#lobby {
  background: rgba(8, 14, 11, .95);
  color: var(--ui-text);
}

.lobby-header {
  border-bottom-color: var(--ui-line);
  background: rgba(15, 23, 19, .88);
}

.lobby-header > div:first-of-type p { color: var(--ui-cyan); text-transform: uppercase; }
.lobby-header h2 { color: #fff3d2; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
.lobby-wallet { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 12px; }
.lobby-wallet strong { display: inline-flex !important; align-items: center; justify-content: end; gap: 6px; margin: 0 !important; color: var(--ui-text); }
.lobby-wallet span { grid-column: 1 / -1; max-width: 100%; color: var(--ui-muted); text-align: right; }
.lobby-wallet strong::before { content: "" !important; display: inline-block; flex: 0 0 auto; }
#lobby-coins::before { width: 12px; height: 12px; border: 2px solid #f2d16a; border-radius: 50%; background: #9e7924; box-shadow: inset 0 0 0 2px #d7b64d; }
#lobby-diamonds::before { width: 11px; height: 11px; border: 2px solid #8edce3; background: #277984; transform: rotate(45deg); }

.lobby-tabs {
  justify-content: center;
  gap: 5px;
  border-bottom-color: var(--ui-line);
  background: #101914;
}
.lobby-tabs button { min-width: 92px; min-height: 36px; padding: 0 14px; color: #b8c2b8; }
.lobby-tabs button:hover { color: #f6efd9; background: rgba(255,255,255,.05); }
.lobby-tabs button.active { border-color: rgba(226,196,95,.55); background: #342f1d; color: #f2d16a; }
.lobby-tabs .community-tab { position: relative; min-width: 78px; border-left-color: rgba(116,203,209,.24); color: #b8d9d9; }
.community-tab b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 5px; padding: 0 4px; border-radius: 9px; background: #276c72; color: #e8ffff; font-size: 10px; }
#friend-notice { position: absolute; top: 2px; right: 3px; background: #a64742; }

.character-option.active { background: rgba(226,196,95,.055); }
.character-option.active .character-option-label { border-color: rgba(226,196,95,.5); background: #2c2a1d; }
.character-summary { border-block-color: var(--ui-line); background: rgba(18, 28, 22, .72); }
.character-skill-summary { border-left-color: rgba(116,203,209,.42); }
.lobby-footer {
  grid-template-columns: minmax(190px, 240px) minmax(240px, 280px);
  grid-template-rows: 52px;
  align-content: center;
  justify-content: center;
  gap: 10px;
  min-height: 72px;
  border-top-color: var(--ui-line);
  background: rgba(10,16,13,.76);
}
#lobby-multiplayer, #lobby-start { width: 100%; min-width: 0; height: 52px; min-height: 52px; }
#lobby-start { border-color: #b89e45; background: #d1b653; color: #182018; box-shadow: 0 8px 24px rgba(0,0,0,.26); }
#lobby-start:hover { background: #e1ca6d; }

.lobby-meta-view { overflow: hidden; border-top: 1px solid var(--ui-line); background: #0e1712; }
.shop-content { scrollbar-color: #556258 transparent; }
.shop-item { border-color: var(--ui-line); border-radius: 6px; background: #17221c; }
.shop-item-heading h3 { color: #f0e7cf; }
.shop-level { color: var(--ui-cyan); }
.shop-wallet-summary { border-color: rgba(226,196,95,.3); background: #272719; }

.leaderboard-shell { display: grid; grid-column: 1 / -1; grid-template-rows: auto auto minmax(0, 1fr); width: 100%; min-height: 100%; }
.leaderboard-heading { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 12px; border-bottom: 1px solid var(--ui-line); }
.leaderboard-heading p { margin: 0 0 3px; color: var(--ui-cyan); font-size: 10px; font-weight: 800; }
.leaderboard-heading h2 { margin: 0; color: #fff1c9; font-size: 22px; }
.leaderboard-refresh { width: 38px; height: 38px; min-height: 0; padding: 0; border-color: var(--ui-line); background: var(--ui-panel); font-size: 20px; }
.leaderboard-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); justify-content: center; gap: 4px; padding: 12px; }
.leaderboard-modes button { min-height: 38px; border-color: transparent; background: #17221c; color: var(--ui-muted); font-weight: 800; }
.leaderboard-modes button.active { border-color: rgba(226,196,95,.46); background: #36301d; color: #f2d16a; }
.leaderboard-grid { grid-template-columns: repeat(2, minmax(260px, 1fr)); align-content: start; width: min(920px, 100%); margin: 0 auto; padding: 10px 22px 24px; }
.leaderboard-card { min-height: 320px; border-color: var(--ui-line); border-radius: 6px; background: var(--ui-panel); }
.leaderboard-card h3 { display: flex; align-items: center; gap: 9px; color: #f4e6bc; font-size: 16px; }
.leaderboard-card h3 span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(226,196,95,.44); border-radius: 50%; background: #332e1d; color: var(--ui-gold); font-size: 11px; }
.leaderboard-card li { min-height: 30px; align-items: center; padding: 5px 2px; border-bottom-color: rgba(255,255,255,.07); }
.leaderboard-card li:nth-child(1) b { color: #f5d66e; }
.leaderboard-card li:nth-child(2) b { color: #cbd4d0; }
.leaderboard-card li:nth-child(3) b { color: #d59a70; }

.social-drawer {
  position: fixed;
  z-index: 35;
  inset: 0 0 0 auto;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(480px, 100vw);
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) 16px;
  border-left: 1px solid rgba(226,196,95,.28);
  background: #101914;
  box-shadow: -18px 0 60px rgba(0,0,0,.55);
}
.social-heading { display: grid; grid-template-columns: minmax(0,1fr) auto 40px; align-items: center; gap: 12px; padding: 0 0 14px; border-bottom: 1px solid var(--ui-line); }
.social-heading p { margin: 0 0 2px; color: var(--ui-cyan); font-size: 10px; }
.social-heading h2 { margin: 0; color: #fff1c9; font-size: 21px; }
.social-heading > button, .conversation-heading button { width: 38px; height: 38px; min-height: 0; padding: 0; }
.social-online { display: flex; align-items: center; gap: 5px; color: var(--ui-muted); font-size: 11px; }
.social-online i, .presence-dot { width: 8px; height: 8px; border-radius: 50%; background: #647069; }
.social-online i, .presence-dot.online { background: #65c68a; box-shadow: 0 0 8px rgba(101,198,138,.45); }
.social-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 12px 0; }
.social-tabs button { min-height: 38px; border-color: transparent; background: var(--ui-panel); color: var(--ui-muted); }
.social-tabs button.active { border-color: rgba(116,203,209,.38); background: #183036; color: #bde9ec; }
.social-view { min-height: 0; overflow-y: auto; }
.friend-search-form, .social-message-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px; }
.friend-search-form input, .social-message-form input { min-width: 0; border-color: var(--ui-line); background: #0b120e; color: var(--ui-text); }
.friend-search-form button, .social-message-form button { min-width: 72px; }
.friend-section { margin-top: 16px; }
.friend-section h3 { margin: 0 0 8px; color: #c9d2c8; font-size: 12px; }
.social-list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.social-list > li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 7px 8px 7px 12px; border-bottom: 1px solid rgba(255,255,255,.07); background: #16211b; }
.social-list > li > span:first-child { display: flex; align-items: center; gap: 9px; min-width: 0; }
.social-list strong { overflow: hidden; color: #e6ece4; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.social-row-actions { display: flex; gap: 5px; }
.social-row-actions button { min-height: 30px; padding: 0 9px; font-size: 10px; }
.social-row-actions button[data-tone="quiet"] { border-color: var(--ui-line); background: transparent; color: var(--ui-muted); }
.social-row-actions button[data-tone="danger"] { border-color: rgba(223,113,104,.35); background: transparent; color: #e89a94; }
.social-empty { justify-content: center !important; color: var(--ui-muted); font-size: 11px; }
.conversation-heading { display: flex; align-items: center; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--ui-line); }
.conversation-heading strong { color: #f0e5ca; }
.social-messages { display: grid; align-content: start; gap: 9px; height: calc(100% - 56px); min-height: 260px; margin: 0; padding: 12px 4px; overflow-y: auto; list-style: none; }
.social-messages li { justify-self: start; max-width: 84%; }
.social-messages li.mine { justify-self: end; text-align: right; }
.social-messages span { display: block; margin-bottom: 3px; color: #7f9084; font-size: 9px; }
.social-messages p { margin: 0; padding: 8px 10px; border: 1px solid var(--ui-line); border-radius: 5px; background: #1b2820; color: #e8eee6; font-size: 12px; line-height: 1.45; text-align: left; overflow-wrap: anywhere; }
.social-messages li.mine p { border-color: rgba(116,203,209,.28); background: #193036; }
.social-status { min-height: 18px; margin: 8px 0 0; color: var(--ui-muted); font-size: 10px; }
.social-status[data-tone="error"] { color: #e88c84; }

.multiplayer-panel { border: 1px solid var(--ui-line); border-radius: 6px; background: #101914; box-shadow: 0 24px 70px rgba(0,0,0,.54); }
.multiplayer-header { border-bottom-color: var(--ui-line); }
.room-directory, .room-panel { border-color: var(--ui-line); background: #152019; }
.room-directory-list li, .room-players li { border-color: rgba(255,255,255,.09); background: #1a2720; }
.room-chat { border-color: var(--ui-line); background: #0d1511; }

.run-economy { position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); display: flex; gap: 6px; }
.run-currency { display: grid; grid-template-columns: 18px auto; grid-template-rows: auto auto; align-items: center; column-gap: 6px; min-width: 86px; padding: 7px 9px; border: 1px solid var(--ui-line); border-radius: 5px; background: rgba(8,14,10,.82); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.run-currency i { grid-row: 1 / 3; justify-self: center; }
.run-currency b { color: #f4f0df; font: 900 13px/1 ui-monospace, monospace; }
.run-currency small { color: #98a79b; font-size: 8px; line-height: 1.1; }
.run-gold i { width: 12px; height: 12px; border: 2px solid #efd06b; border-radius: 50%; background: #9c7522; }
.run-diamond i { width: 11px; height: 11px; border: 2px solid #8ddde5; background: #267783; transform: rotate(45deg); }
.run-revive i { position: relative; width: 15px; height: 15px; border: 1px solid #e1a19b; border-radius: 50%; }
.run-revive i::before, .run-revive i::after { content: ""; position: absolute; top: 6px; left: 3px; width: 7px; height: 2px; background: var(--ui-red); }
.run-revive i::after { transform: rotate(90deg); }

.health-panel { width: min(330px, calc(100vw - 24px)); border-color: rgba(231,239,227,.2); background: rgba(8,14,10,.86); }
.health-heading strong { color: #fff0e4; }
.health-track, .xp-track { height: 8px; border: 1px solid rgba(255,255,255,.12); background: #111612; }
#health-fill { background: #c85451; box-shadow: inset 0 1px rgba(255,255,255,.18); }
#xp-fill { background: #5dbbc3; box-shadow: inset 0 1px rgba(255,255,255,.18); }
.rhythm { margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.08); }
#timer { padding: 8px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 5px; background: rgba(8,14,10,.78); }
#boss-panel { padding: 10px 12px; border: 1px solid rgba(223,113,104,.28); border-radius: 5px; background: rgba(18,10,10,.76); }

#level-up { background: rgba(5, 9, 7, .83); backdrop-filter: blur(9px); }
.choice-panel { width: min(1040px, calc(100vw - 28px)); }
.choice-panel > p { letter-spacing: 0; text-transform: uppercase; }
.choice-panel > h2 { margin-bottom: 16px; }
.upgrade-grid, .upgrade-grid.four-options { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: 220px; gap: 12px; }
.upgrade-option { border-radius: 6px; background: #151f19; box-shadow: 0 14px 34px rgba(0,0,0,.34); }
.upgrade-option:hover { transform: translateY(-2px); border-color: rgba(244,231,190,.6); }
.upgrade-option .card-icon { border-radius: 5px; background: #202d25; }
.upgrade-option .card-detail { color: #cbd5ca; }
.upgrade-option[data-kind="element"] { background: #18223a; }
.upgrade-option[data-kind="evolution"], .evolution-option { background: #2b1e31; }
.upgrade-option[data-kind="relic"] { background: #173029; }
.upgrade-option[data-quality="mythic"] { background: #39251e; }

.end-panel, .audio-settings-panel, .name-entry-panel { border-radius: 6px; border-color: var(--ui-line); background: #121c16; box-shadow: 0 22px 70px rgba(0,0,0,.6); }
.result-stats > div { border-color: var(--ui-line); background: #18241d; }
.settlement-coins::before { content: "● "; color: var(--ui-gold); }

@media (max-width: 900px) {
  .lobby-tabs { justify-content: start; }
  .lobby-tabs button { min-width: 80px; }
  .leaderboard-grid { grid-template-columns: 1fr; }
  .leaderboard-card { min-height: 230px; }
  .run-currency { min-width: 72px; padding-inline: 7px; }
  .run-currency small { display: none; }
}

@media (max-width: 600px) {
  .main-menu-panel { width: 100%; }
  .main-menu-brand { margin-left: 4px; }
  .main-menu-brand h1 { font-size: 58px; }
  .lobby-header { grid-template-columns: 38px minmax(0,1fr) auto; }
  .lobby-wallet { gap: 1px 6px; }
  .lobby-wallet strong { font-size: 14px; }
  .lobby-wallet span { font-size: 9px; }
  .lobby-tabs { flex-basis: 44px; height: 44px; padding: 4px 0; }
  .lobby-tabs button { min-width: 76px; min-height: 34px; padding: 0 9px; font-size: 10px; }
  .lobby-tabs .community-tab { min-width: 66px; }
  .leaderboard-heading { padding: 12px; }
  .leaderboard-heading h2 { font-size: 18px; }
  .leaderboard-modes { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 9px 8px; }
  .leaderboard-grid { gap: 8px; padding: 4px 7px 12px; }
  .leaderboard-card { min-height: 190px; padding: 12px; }
  .social-drawer { width: 100vw; padding-inline: 12px; }
  .social-heading { grid-template-columns: minmax(0,1fr) auto 36px; }
  .social-online { font-size: 10px; }
  .run-economy { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); gap: 4px; }
  .run-currency { min-width: 48px; grid-template-columns: 14px auto; padding: 5px 6px; }
  .run-currency b { font-size: 11px; }
  .run-gold { display: none; }
  .health-panel { top: auto; bottom: max(10px, env(safe-area-inset-bottom)); left: max(8px, env(safe-area-inset-left)); width: min(270px, calc(100vw - 112px)); padding: 8px 9px; }
  #timer { top: max(94px, calc(env(safe-area-inset-top) + 94px)); font-size: 15px; }
  .choice-panel { width: 100%; }
  .choice-panel > h2 { margin-bottom: 6px; }
  .upgrade-grid, .upgrade-grid.four-options { grid-template-columns: minmax(0,1fr) !important; grid-auto-rows: clamp(126px, 20vh, 150px) !important; gap: 7px; }
  .upgrade-option, .upgrade-grid:not(.four-options) > .upgrade-option:last-child:nth-child(odd) {
    width: 100% !important;
    height: clamp(126px, 20vh, 150px) !important;
    min-height: clamp(126px, 20vh, 150px) !important;
    max-height: clamp(126px, 20vh, 150px) !important;
  }
  .lobby-footer { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, 46px); gap: 5px; min-height: 102px; }
  #lobby-multiplayer, #lobby-start { width: min(100%, 260px); height: 46px; min-height: 46px; }
}

@media (max-height: 520px) and (orientation: landscape) {
  #level-up { align-items: center; }
  .choice-panel > p, .choice-panel > h2 { margin-bottom: 3px; }
  .upgrade-grid, .upgrade-grid.four-options { grid-template-columns: repeat(3, minmax(0,1fr)) !important; grid-auto-rows: 178px !important; }
  .upgrade-option, .upgrade-grid:not(.four-options) > .upgrade-option:last-child:nth-child(odd) { height: 178px !important; min-height: 178px !important; max-height: 178px !important; padding: 12px; }
}

/* fix-v37: leaderboard belongs in the resource header; mobile character sizing is balanced around a 2x2 roster. */
.lobby-header {
  grid-template-columns: 48px minmax(120px, 1fr) auto auto;
  gap: 10px;
}

.header-leaderboard-button {
  width: auto !important;
  min-width: 96px;
  height: 38px !important;
  padding: 0 13px !important;
  border-color: rgba(226, 196, 95, .26);
  background: rgba(226, 196, 95, .06);
  color: #d8d0b5;
  font-size: 12px !important;
  font-weight: 800;
  white-space: nowrap;
}

.header-leaderboard-button:hover,
.header-leaderboard-button.active {
  border-color: rgba(226, 196, 95, .58);
  background: #342f1d;
  color: #f2d16a;
}

@media (max-width: 600px) {
  #lobby { padding-inline: 9px; }

  .lobby-header {
    flex-basis: 58px;
    grid-template-columns: 36px minmax(70px, 1fr) 62px minmax(96px, auto);
    gap: 5px;
    height: 58px;
  }

  .lobby-header > div:first-of-type { padding-left: 2px; }
  .lobby-header h2 { font-size: 15px; }
  .header-leaderboard-button {
    width: 62px !important;
    min-width: 62px;
    height: 34px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
  }

  .lobby-wallet {
    grid-template-columns: repeat(2, auto);
    min-width: 96px;
    gap: 0 6px;
  }
  .lobby-wallet strong { margin: 0 !important; font-size: 13px; }
  .lobby-wallet span { max-width: 110px; font-size: 9px; }

  .lobby-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    flex-basis: 44px;
    width: 100%;
    height: 44px;
    gap: 3px;
    overflow: visible;
    padding: 4px 0;
  }
  .lobby-tabs button,
  .lobby-tabs .community-tab {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 0 3px;
    font-size: 10px;
  }
  .community-tab b { min-width: 16px; height: 16px; margin-left: 2px; padding-inline: 3px; font-size: 9px; }

  .lobby-character-view { row-gap: 6px; }
  .character-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 12px;
    width: min(340px, 100%);
    margin-inline: auto;
    padding: 7px 2px 5px;
  }
  .character-option {
    grid-template-rows: 104px 12px 38px;
    height: 154px;
    min-height: 154px;
    padding-inline: 3px;
  }
  .character-portrait { height: 104px; min-height: 0; }
  .character-portrait img { max-width: 94%; }
  .character-platform { width: 76%; height: 11px; }
  .character-option-label strong { font-size: 13px; }
  .character-option-label small { margin-top: 2px; font-size: 9px; }
  .character-summary { min-height: 78px; padding-block: 8px; }
}