* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #eef2f5; color: #1f2933; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; font-size: 16px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
.page-shell { min-height: 100vh; }
.topbar { height: 72px; background: #1d3441; color: #fff; display: flex; align-items: center; padding: 0 34px; box-shadow: 0 2px 8px rgba(23, 42, 52, .16); }
.brand-mark { width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 9px; background: #e18b48; color: #fff; font-weight: 800; font-size: 19px; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.15; }
.brand-copy strong { font-size: 18px; letter-spacing: .5px; }
.brand-copy span { font-size: 11px; color: #b8c7cc; margin-top: 3px; }
.top-user { margin-left: auto; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d9e2e5; font-size: 13px; }
.content { max-width: 1180px; margin: 0 auto; padding: 34px 34px 64px; }
.hidden { display: none !important; }
.welcome-row, .game-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.welcome-row h1, .game-header h1 { margin: 4px 0 0; color: #1d3441; font-size: 30px; line-height: 1.25; }
.eyebrow { margin: 0; color: #bd6a31; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; }
.subcopy { margin: 8px 0 0; color: #6b7b83; font-size: 14px; }
.button { border: 0; border-radius: 8px; min-height: 42px; padding: 0 18px; font-weight: 700; transition: background .15s, transform .15s; }
.button:active { transform: translateY(1px); }
.button-light { background: #fff; border: 1px solid #d8e0e4; color: #425762; }
.button-light:hover { background: #f6f8f9; }
.button-primary { background: #ce7137; color: #fff; }
.button-primary:hover { background: #b9612e; }
.button-secondary { background: #2f796e; color: #fff; }
.button-secondary:hover { background: #28695f; }
.full-button { width: 100%; margin-top: 22px; }
.lobby-grid { display: flex; flex-wrap: wrap; margin: -8px; }
.feature-card { position: relative; min-height: 190px; flex: 1 1 42%; margin: 8px; padding: 25px; border: 1px solid transparent; border-radius: 12px; text-align: left; display: flex; flex-direction: column; align-items: flex-start; box-shadow: 0 5px 18px rgba(37, 58, 67, .08); transition: transform .15s, box-shadow .15s; }
.feature-card:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(37, 58, 67, .13); }
.weather-card { background: #f7f2e9; border-color: #eadbc2; }
.rank-card { background: #e9f1ef; border-color: #cbded8; }
.game-card { background: #f9e9dd; border-color: #edcfb9; }
.online-card { background: #e9edf3; border-color: #d0dae6; }
.feature-icon { width: 44px; height: 44px; line-height: 44px; text-align: center; border-radius: 12px; color: #fff; font-size: 16px; font-weight: 800; }
.weather-icon { background: #bf9b62; }.rank-icon { background: #4d8a7e; }.game-icon { background: #cf7138; }.online-icon { background: #55718b; }
.feature-title { margin-top: 18px; color: #243a45; font-size: 20px; font-weight: 800; }
.feature-note { margin-top: 6px; color: #687b83; font-size: 13px; }
.feature-action { position: absolute; right: 24px; bottom: 23px; color: #b55d2b; font-size: 13px; font-weight: 800; }
.lobby-lower { display: flex; flex-wrap: wrap; margin: 30px -8px 0; }
.info-panel { flex: 2 1 480px; margin: 8px; min-height: 150px; padding: 22px; background: #fff; border: 1px solid #e0e7ea; border-radius: 11px; box-shadow: 0 3px 12px rgba(37, 58, 67, .05); }
.compact-panel { flex: 1 1 280px; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; }
.panel-heading h2 { margin: 0; color: #263e49; font-size: 17px; }
.muted { color: #84949b; font-size: 12px; }
.empty-list { color: #8999a0; font-size: 13px; padding: 22px 0 4px; }
.empty-list .status-line { margin: 9px 0; }.rank-number { width: 22px; color: #bd6a31; font-weight: 800; }.recent-score { margin-left: auto; color: #2f796e; }
.status-line { display: flex; align-items: center; color: #42625e; font-size: 14px; font-weight: 700; }
.status-dot { width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #4f9b78; box-shadow: 0 0 0 4px #e2f1e9; }
.compact-panel p { line-height: 1.6; margin: 18px 0 0; }
.state-panel { max-width: 520px; margin: 100px auto; padding: 40px 30px; text-align: center; background: #fff; border: 1px solid #dfe6e9; border-radius: 12px; }
.state-icon { width: 45px; height: 45px; margin: 0 auto 16px; line-height: 45px; border-radius: 50%; background: #e7a15e; color: #fff; font-weight: 800; }
.state-panel h1 { margin: 0; color: #263e49; font-size: 22px; }.state-panel p { color: #72838a; line-height: 1.7; font-size: 14px; }
.game-header { margin-bottom: 25px; }.game-header > div { flex: 1; text-align: center; }.game-header .button { align-self: flex-start; }.connection-badge { min-width: 78px; color: #9b651f; background: #fff5dd; border-radius: 20px; padding: 8px 12px; font-size: 12px; text-align: center; }
.game-layout { display: flex; flex-wrap: wrap; margin: -8px; }.setup-panel { flex: 1 1 380px; margin: 8px; padding: 25px; background: #fff; border: 1px solid #e0e7ea; border-radius: 11px; box-shadow: 0 3px 12px rgba(37, 58, 67, .05); }.join-panel { background: #f8fbfa; }
.field-label { display: block; margin: 17px 0 8px; color: #344e59; font-size: 14px; font-weight: 700; }.field-label span { float: right; color: #87979d; font-size: 11px; font-weight: 400; }
.text-input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #d5e0e3; border-radius: 7px; background: #fff; color: #263e49; outline: 0; }.text-input:focus { border-color: #579b91; box-shadow: 0 0 0 3px #e2f1ee; }.room-input { text-transform: uppercase; letter-spacing: 2px; font-weight: 800; }
.choice-row { display: flex; }.choice-button { flex: 1; min-height: 42px; border: 1px solid #d5e0e3; border-radius: 7px; background: #fff; color: #536970; font-weight: 700; }.choice-button.selected { background: #e2f1ee; border-color: #579b91; color: #28695f; }
.form-hint { color: #82939a; font-size: 12px; line-height: 1.5; margin: 13px 0 0; }
.room-panel { margin-top: 16px; padding: 24px; background: #1d3441; border-radius: 11px; color: #fff; }.room-code-box { display: flex; align-items: center; }.room-code-box span { color: #b9c9ce; font-size: 13px; }.room-code-box strong { flex: 1; color: #fff; letter-spacing: 4px; font-size: 27px; }.copy-button { border: 1px solid #627b84; border-radius: 6px; padding: 7px 10px; background: transparent; color: #d6e2e5; font-size: 12px; }.room-status { margin-top: 17px; color: #d6e2e5; font-size: 14px; }.invite-panel { margin-top: 22px; padding-top: 20px; border-top: 1px solid #405762; }.invite-panel .panel-heading h2, .invite-panel .muted { color: #fff; }.invite-row { display: flex; }.invite-row .text-input { min-width: 0; }.invite-row .text-input:first-child { flex: 0 0 30%; }.invite-row .button { flex: 0 0 82px; }
.question-panel { margin-top: 17px; }.match-strip, .score-strip { display: flex; justify-content: space-between; align-items: center; color: #647780; font-size: 13px; }.timer { min-width: 64px; padding: 7px 11px; border-radius: 16px; background: #fff2e7; color: #b65e2d; font-weight: 800; text-align: center; }.question-card { margin: 12px 0; padding: 31px; background: #fff; border: 1px solid #e0e7ea; border-radius: 11px; box-shadow: 0 3px 12px rgba(37, 58, 67, .05); }.question-kicker { color: #bd6a31; font-size: 12px; font-weight: 800; letter-spacing: .4px; }.question-card h2 { max-width: 800px; margin: 12px 0 25px; color: #263e49; font-size: 25px; line-height: 1.45; }.options-list { display: flex; flex-wrap: wrap; margin: -5px; }.option-button { position: relative; flex: 1 1 42%; min-height: 70px; margin: 5px; padding: 14px 18px; border: 1px solid #d6e1e4; border-radius: 8px; background: #f8fafb; color: #344e59; text-align: left; }.option-button:hover { background: #edf5f3; border-color: #70a79d; }.option-button .option-letter { display: inline-block; width: 25px; height: 25px; margin-right: 8px; line-height: 25px; border-radius: 50%; background: #e4ecee; color: #5f747c; text-align: center; font-weight: 800; }.option-button.chosen { background: #dfeeea; border-color: #579b91; }.option-button.chosen .option-letter { background: #4d8a7e; color: #fff; }.option-button:disabled { cursor: default; opacity: .75; }
.score-strip { padding: 0 3px; }.score-strip b { color: #2f796e; font-size: 17px; }
.result-panel { margin: 35px auto 0; max-width: 780px; text-align: center; }.result-heading h2 { margin: 6px 0; color: #263e49; font-size: 28px; }.result-heading p:last-child { color: #72838a; font-size: 14px; }.result-compare { display: flex; align-items: stretch; margin: 28px 0; }.result-player { flex: 1; min-height: 190px; padding: 22px 15px; background: #fff; border: 1px solid #dbe5e7; border-radius: 11px; display: flex; flex-direction: column; justify-content: center; }.result-player.mine { border-color: #e4b28c; background: #fff8f2; }.result-player.opponent { border-color: #b9d4ce; background: #f2f9f7; }.result-label { color: #809198; font-size: 12px; }.result-player strong { margin: 9px 0; color: #344e59; font-size: 17px; }.result-player b { color: #bd6a31; font-size: 38px; line-height: 1; }.result-player.opponent b { color: #2f796e; }.result-player small { margin-top: 5px; color: #84949b; }.result-player span:last-child { margin-top: 15px; color: #65777f; font-size: 13px; }.versus { align-self: center; color: #a5b1b4; font-size: 13px; font-weight: 800; }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 26px; transform: translateX(-50%); max-width: 80%; padding: 11px 17px; border-radius: 7px; background: #263e49; color: #fff; font-size: 13px; box-shadow: 0 4px 16px rgba(25, 45, 54, .22); }.toast.error { background: #a84e3c; }
.lobby-main { display: flex; align-items: stretch; margin: 0 -8px; }
.game-launch-panel, .leaderboard-panel { margin: 8px; border: 1px solid #dfe7e8; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(37,58,67,.07); }
.game-launch-panel { flex: 1 1 58%; min-height: 330px; padding: 28px; display: flex; align-items: center; background: #f7eee7; border-color: #ecd8c9; }
.game-launch-art { width: 180px; height: 230px; border-radius: 14px; background: #cb6d35; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 72px; font-weight: 900; box-shadow: inset 0 -12px 0 rgba(102,45,21,.12); }
.game-launch-copy { padding-left: 28px; max-width: 390px; }.game-launch-copy h2 { margin: 8px 0; color: #263e49; font-size: 28px; }.game-launch-copy p:not(.eyebrow) { color: #6f7f84; line-height: 1.65; font-size: 14px; margin: 0 0 22px; }
.leaderboard-panel { flex: 1 1 42%; min-height: 330px; padding: 24px; }.online-pill { padding: 6px 9px; border-radius: 14px; background: #e4f2eb; color: #36765e; font-size: 11px; }.ranking-note { margin: -4px 0 12px; color: #829198; font-size: 12px; }.leaderboard-list { max-height: 230px; overflow-y: auto; }.leaderboard-row { display: flex; align-items: center; min-height: 34px; border-bottom: 1px solid #edf1f2; color: #344e59; font-size: 13px; }.leaderboard-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.declaration-panel { margin-top: 16px; padding-top: 14px; border-top: 1px solid #e4eaeb; }.declaration-panel strong { display: block; color: #b35e2e; font-size: 13px; margin-bottom: 8px; }.declaration-panel textarea { display: block; width: 100%; min-height: 58px; resize: vertical; border: 1px solid #d5e0e3; border-radius: 7px; padding: 8px; font: inherit; font-size: 12px; }.declaration-panel .button { margin-top: 8px; min-height: 35px; font-size: 12px; }.lobby-footnote { color: #89979c; font-size: 12px; margin: 18px 8px 0; }
/* Chrome 66 不支持 flex gap，用相邻元素外边距保持旧版 WebView 的间距。 */
  .topbar > * + * { margin-left: 12px; }
  .topbar > .top-user { margin-left: auto; }
  .welcome-row > * + *, .game-header > * + * { margin-left: 20px; }
  .panel-heading > * + * { margin-left: 12px; }
  .choice-row > * + * { margin-left: 8px; }
  .room-code-box > * + * { margin-left: 12px; }
  .invite-row > * + * { margin-left: 8px; }
  .match-strip > * + *, .score-strip > * + * { margin-left: 12px; }
  .result-compare > * + * { margin-left: 14px; }

  @media (max-width: 760px) {
    .invite-row > * + * { margin-left: 0; margin-top: 8px; }
    .result-compare > * + * { margin-left: 6px; }
  }
@media (max-width: 760px) { .topbar { padding: 0 18px; }.content { padding: 23px 16px 45px; }.welcome-row h1, .game-header h1 { font-size: 24px; }.feature-card { flex-basis: 100%; min-height: 150px; }.lobby-lower { margin-top: 20px; }.game-header { align-items: flex-start; }.game-header > div { text-align: left; }.room-code-box strong { font-size: 21px; }.invite-row { flex-wrap: wrap; }.invite-row .text-input:first-child, .invite-row .button { flex-basis: 100%; }.question-card { padding: 22px 17px; }.question-card h2 { font-size: 20px; }.option-button { flex-basis: 100%; }.match-strip { flex-wrap: wrap; }.result-player { min-height: 165px; padding: 13px 6px; }.result-player b { font-size: 29px; }.versus { font-size: 11px; } }
@media (max-width: 760px) { .lobby-main { display: block; margin: 0; }.game-launch-panel, .leaderboard-panel { margin: 10px 0; }.game-launch-panel { min-height: 260px; padding: 20px; }.game-launch-art { width: 110px; height: 150px; font-size: 48px; }.game-launch-copy { padding-left: 18px; }.game-launch-copy h2 { font-size: 22px; }.leaderboard-panel { min-height: 290px; } }