:root {
  color-scheme: dark;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #050708;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050708;
}

#safe-stage {
  width: 100%;
  height: 100%;
  padding:
    max(env(safe-area-inset-top), var(--tg-content-safe-area-inset-top, 0px))
    max(env(safe-area-inset-right), var(--tg-content-safe-area-inset-right, 0px))
    max(env(safe-area-inset-bottom), var(--tg-content-safe-area-inset-bottom, 0px))
    max(env(safe-area-inset-left), var(--tg-content-safe-area-inset-left, 0px));
  display: grid;
  place-items: center;
}

#game-shell {
  width: min(100%, calc(100vh * 853 / 1844));
  height: min(100%, calc(100vw * 1844 / 853));
  aspect-ratio: 853 / 1844;
  background: #050708;
}

#lobby-shell {
  width: min(100%, 560px);
  height: 100%;
  padding: clamp(18px, 3vh, 30px) clamp(16px, 4vw, 28px) max(20px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 36%, #123b29 0, #07140f 42%, #030505 100%);
  color: #f0f0ec;
  overflow: auto;
}

#lobby-shell[hidden], #game-shell[hidden] { display: none; }
.room-panel { min-height: 100%; padding: clamp(20px, 3.5vw, 30px); border: 2px solid #5f6b65; border-radius: 12px; background: linear-gradient(180deg,#0d1612f2,#070b09f5); box-shadow: 0 10px 0 #0008, inset 0 1px #ffffff12; }
.room-logo { width: min(58%, 260px); max-height: 138px; object-fit: contain; display: block; margin: 0 auto 10px; }
.room-title { margin: 8px 0 12px; text-align: center; font-size: 25px; }
.room-status { min-height: 30px; text-align: center; color: #b7c6bd; font-size: 15px; }
.room-capacity { margin-top: -6px; text-align: center; color: #8e9e96; font-size: 14px; }
.room-actions { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin: 16px 0; }
.entry-settings { display: grid; grid-template-columns: repeat(3,minmax(104px,1fr)); gap: 10px; margin: 20px 0; }
.rule-setting { display: grid; gap: 7px; text-align: center; color: #c3ccc7; font-size: 13px; }
.stepper { display: grid; grid-template-columns: 34px minmax(24px,1fr) 34px; height: 44px; border: 1px solid #53635b; border-radius: 8px; overflow: hidden; background: #050807; }
.stepper input { min-width: 0; width: 100%; padding: 0; border: 0; background: #0a0f0c; color: #fff; -webkit-text-fill-color: #fff; opacity: 1; text-align: center; font-size: 18px; font-weight: 800; appearance: textfield; }
.stepper input::-webkit-inner-spin-button { display: none; }
.room-button.step { min-height: 0; border: 0; border-radius: 0; box-shadow: none; background: #18231e; color: #b9ea71; font-size: 22px; padding: 0; }
.room-button.step:active { transform: none; box-shadow: none; background:#25372e; }
.room-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 12px; color:#7f8d86; font-size:13px; }
.room-divider::before,.room-divider::after { content:""; height:1px; flex:1; background:#334039; }
.join-row { display:grid; grid-template-columns:minmax(0,1fr) 96px; gap:10px; }
.room-input { width: 100%; height: 52px; padding: 0 8px; border: 2px solid #59625e; border-radius: 8px; background: #050807; color: white; font-size: 18px; text-align: center; }
.room-button { min-height: 52px; border: 2px solid #ffffff44; border-radius: 8px; background: linear-gradient(#e5a61c,#b86b05); color: #171006; font-size: 18px; font-weight: 800; box-shadow: 0 6px 0 #573000; }
.room-button:active { transform: translateY(4px); box-shadow: 0 2px 0 #573000; }
.room-button.primary { background:linear-gradient(#eab128,#bd7509); color:#191005; }
.room-button.secondary { background: linear-gradient(#28332e,#111713); color: #e6e9e7; box-shadow: 0 6px 0 #000; }
.room-button.danger { background:linear-gradient(#6d2a25,#361312); color:#ffd9d4; box-shadow:0 4px 0 #170706; }
.room-button.ghost { background:transparent; color:#9eaaa4; border-color:#344039; box-shadow:none; font-size:15px; }
.room-button.compact { min-height:34px; padding:0 11px; font-size:13px; }
.room-button.full { width:100%; margin-top:12px; }
.room-button:disabled { opacity: .4; }
.player-list { display: grid; grid-template-columns:1fr 1fr; gap: 8px; margin: 16px 0; }
.player-row { display: grid; grid-template-columns: 42px 1fr auto; gap:9px; align-items: center; min-height: 58px; padding: 7px 10px; border: 1px solid #425149; border-radius: 8px; background: #101a16; }
.player-row.self { border-color:#8dc34d; box-shadow:inset 0 0 0 1px #8dc34d55; }
.player-avatar { width:42px; height:42px; border-radius:50%; object-fit:cover; border:2px solid #7f9087; background:#1a2420; }
.player-identity { min-width:0; display:grid; gap:2px; }
.player-identity strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
.player-identity small { color:#8fa198; font-size:12px; }
.share-sheet { position:fixed; inset:0; z-index:80; display:grid; place-items:end center; background:#0009; padding:max(18px,env(safe-area-inset-bottom)); }
.share-card { width:min(92vw,420px); padding:20px; border:2px solid #5c6963; border-radius:14px; background:#0c1411; box-shadow:0 12px 34px #000; }
.share-card h3 { margin:0 0 12px; text-align:center; }
.share-feedback { min-height:20px; margin:-4px 0 4px; color:#f0a39a; text-align:center; font-size:13px; }

@media (max-width: 390px) {
  #lobby-shell { padding-inline: 10px; }
  .room-panel { padding-inline: 14px; }
  .entry-settings { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
  .stepper { grid-template-columns: 32px minmax(26px,1fr) 32px; }
}

#game-shell canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

#rotate-notice {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  place-items: center;
  background: #050708;
  color: #e7e7e7;
  font-size: 18px;
}

@media (orientation: landscape) and (max-height: 600px) {
  #rotate-notice {
    display: grid;
  }
}