:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --gold: #ffd477;
  --ink: #102723;
  --teal: #54e1d0;
  --orange: #ff9a43;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; background: #071815; }
body { min-height: 100dvh; overscroll-behavior: none; touch-action: manipulation; color: #fff8df; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.app-shell, .lobby-screen, .game-screen { width: 100%; height: 100dvh; }
.lobby-screen { position: relative; display: grid; place-items: center; overflow: auto; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.lobby-art { position: absolute; inset: 0; background: url("./assets/camp.webp") center/cover no-repeat; transform: scale(1.025); }
.lobby-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,18,18,.85), rgba(3,18,18,.35) 48%, rgba(3,18,18,.72)), linear-gradient(0deg, rgba(3,12,11,.78), transparent 55%); }
.lobby-content { position: relative; width: min(1180px, 100%); display: grid; grid-template-columns: 1.2fr minmax(320px,.72fr); gap: clamp(28px,6vw,96px); align-items: center; }
.eyebrow, .contract-kicker, .overlay-kicker, .map-kicker { margin: 0 0 8px; color: var(--gold); letter-spacing: .18em; font-size: .72rem; font-weight: 900; text-transform: uppercase; }
.brand-block h1 { margin: 0; font: 900 clamp(3.1rem,8vw,7rem)/.94 Georgia, "Microsoft YaHei", serif; letter-spacing: -.06em; color: #fff4cc; text-shadow: 0 5px 0 #5b2917, 0 12px 30px #000; }
.brand-copy { max-width: 620px; margin: 24px 0; color: #e5edd8; font-size: clamp(1rem,1.7vw,1.25rem); line-height: 1.8; text-shadow: 0 2px 8px #000; }
.feature-row { display: flex; flex-wrap: wrap; gap: 9px; }
.feature-row span { padding: 7px 12px; border: 1px solid rgba(255,222,142,.4); border-radius: 999px; background: rgba(11,43,36,.62); color: #ffe6a8; font-size: .78rem; backdrop-filter: blur(8px); }
.contract-card { padding: clamp(22px,3vw,34px); border: 1px solid rgba(255,227,159,.48); border-radius: 28px; background: linear-gradient(145deg,rgba(19,58,49,.94),rgba(8,31,29,.96)); box-shadow: 0 26px 80px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.11); backdrop-filter: blur(18px); }
.field-label { display: block; margin: 14px 0 7px; color: #d3ddc7; font-size: .78rem; font-weight: 800; }
.text-field, .room-code-field { width: 100%; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; outline: none; background: rgba(0,0,0,.25); color: #fff9e5; padding: 13px 15px; }
.text-field:focus, .room-code-field:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,212,119,.13); }
.room-code-field { letter-spacing: .22em; text-transform: uppercase; font-weight: 900; font-size: 1.1rem; }
.primary-button, .secondary-button { border: 0; cursor: pointer; font-weight: 900; color: #27170b; }
.primary-button { width: 100%; min-height: 55px; margin-top: 16px; border-radius: 15px; background: linear-gradient(#ffe191,#efa84e); box-shadow: 0 7px 0 #98551e, 0 12px 25px rgba(0,0,0,.25); }
.primary-button:active { transform: translateY(4px); box-shadow: 0 3px 0 #98551e; }
.primary-button span, .primary-button small { display: block; }
.primary-button small { margin-top: 2px; opacity: .68; font-size: .68rem; }
.primary-button.compact { width: auto; padding: 0 28px; }
.secondary-button { min-width: 90px; border-radius: 13px; background: #68dccb; box-shadow: 0 5px 0 #237d76; }
.divider { display: flex; align-items: center; gap: 12px; margin: 23px 0 6px; color: #94aaa0; font-size: .7rem; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.13); }
.join-row { display: flex; gap: 9px; }
.status-line { min-height: 2.6em; margin: 18px 0 0; color: #b8cbc0; font-size: .76rem; line-height: 1.5; }
.status-line.is-error { color: #ffae9e; }
.file-warning { padding: 12px; border-radius: 11px; background: #622c28; color: #ffe0d4; font-size: .74rem; line-height: 1.55; }

.game-screen { position: relative; background: #061816; display: flex; flex-direction: column; }
.game-topbar { position: relative; z-index: 7; height: clamp(62px,9vh,84px); display: grid; grid-template-columns: 1fr minmax(250px,.8fr) 1fr; align-items: center; gap: 12px; padding: max(7px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 7px max(12px,env(safe-area-inset-left)); background: linear-gradient(180deg,#163f37,#0b2925); border-bottom: 2px solid #92642d; box-shadow: 0 8px 25px rgba(0,0,0,.42); }
.player-hud { display: flex; align-items: center; gap: 10px; min-width: 0; }
.p2-hud { justify-content: flex-end; text-align: right; }
.portrait { flex: 0 0 clamp(42px,6vh,60px); width: clamp(42px,6vh,60px); aspect-ratio: 1; border: 2px solid #c89a4d; border-radius: 16px; background-image: url("./assets/sprites.webp"); background-size: 400% 200%; box-shadow: inset 0 0 0 2px #173b35; }
.portrait-p1 { background-position: 0 0; }
.portrait-p2 { background-position: 33.333% 0; }
.hud-copy { width: min(250px,100%); min-width: 0; }
.hud-copy strong, .hud-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-copy strong { color: #fff2bf; font-size: clamp(.73rem,1.4vw,.98rem); }
.hud-copy span { color: #9fcbb7; font-size: .65rem; }
.health-track { height: 9px; margin-top: 6px; padding: 2px; border-radius: 999px; background: #061b18; border: 1px solid #44695c; }
.health-track i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#d84936,#ffad4f); transition: width .15s; }
.p2-hud .health-track i { margin-left: auto; background: linear-gradient(90deg,#49d6c5,#77f3df); }
.mission-hud { text-align: center; min-width: 0; }
.mission-hud strong, .mission-hud > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mission-hud strong { color: #fff0ba; font-size: clamp(.76rem,1.5vw,1rem); }
.mission-hud > span { color: #a9c7ba; font-size: .66rem; }
.room-strip { display: flex; justify-content: center; align-items: center; gap: 6px; margin-bottom: 3px; font-size: .59rem; color: #8fb2a5; }
.room-strip button { border: 0; color: var(--gold); background: transparent; font-weight: 900; letter-spacing: .1em; cursor: pointer; }
.room-strip i { padding: 2px 6px; border-radius: 999px; background: rgba(77,225,208,.13); color: #73eadb; font-style: normal; }
.canvas-frame { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #09221e; touch-action: none; }
#gameCanvas { width: 100%; height: 100%; display: block; object-fit: contain; background: #071b18; }
.scene-overlay { position: absolute; inset: 0; display: grid; place-items: center; z-index: 4; background: radial-gradient(circle,transparent,rgba(0,0,0,.48)); pointer-events: none; }
.overlay-card { max-width: min(520px,82vw); padding: 23px 28px; border: 1px solid rgba(255,221,138,.42); border-radius: 22px; text-align: center; background: rgba(8,35,31,.9); box-shadow: 0 20px 55px #0008; backdrop-filter: blur(11px); pointer-events: auto; }
.overlay-card h2 { margin: 0 0 9px; color: #fff0bd; }
.overlay-card p:not(.overlay-kicker) { color: #bed0c6; line-height: 1.65; }

.map-panel { position: absolute; z-index: 12; inset: 5% 12%; padding: clamp(22px,4vw,46px); border: 8px double #815628; border-radius: 8px 18px 12px 21px; background: #d7ae6b; color: #442a16; box-shadow: 0 25px 80px #000c, inset 0 0 80px #71411644; overflow: auto; }
.map-panel::before { content: ""; position: absolute; inset: 0; opacity: .2; background: repeating-linear-gradient(7deg,transparent 0 12px,#6c4822 13px 14px); pointer-events: none; }
.map-panel > * { position: relative; }
.map-panel h2 { margin: 0 0 20px; font-family: Georgia,serif; font-size: clamp(1.7rem,4vw,3rem); }
.map-close { position: absolute; right: 12px; top: 9px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #5c351c; color: #ffe4a4; font-size: 1.5rem; cursor: pointer; }
.level-card { display: flex; align-items: center; gap: 15px; margin: 12px 0; padding: 16px; border: 2px solid #744721; border-radius: 13px; background: #e4c17eaa; }
.level-card.is-selected { box-shadow: 0 0 0 4px #e7ae3d, 0 8px 18px #5e3a1e44; }
.level-card.is-locked { opacity: .52; filter: grayscale(.7); }
.level-number { font: 900 1.7rem Georgia,serif; }
.level-card div { flex: 1; }
.level-card strong { font-size: 1.1rem; }
.level-card p { margin: 4px 0 0; font-size: .73rem; }
.level-card em { font-style: normal; font-size: .7rem; font-weight: 900; }
.map-depart { max-width: 360px; display: block; margin: 24px auto 7px; }

.mobile-controls { position: absolute; z-index: 9; inset: auto 0 0; height: min(38vh,270px); display: none; pointer-events: none; padding: 0 max(18px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); }
.move-pad, .touch-button { pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.move-pad { position: absolute; left: max(20px,env(safe-area-inset-left)); bottom: max(18px,env(safe-area-inset-bottom)); width: clamp(125px,24vw,188px); aspect-ratio: 1; border-radius: 50%; border: 2px solid #d6bb7688; background: radial-gradient(circle,#1d554b88,#092d2988 68%,#061b1899); box-shadow: inset 0 0 35px #0008; }
.pad-arrows { position: absolute; inset: 0; display: grid; place-items: center; color: #f5dda765; font-size: clamp(1.2rem,4vw,2rem); line-height: 2.7; text-align: center; }
.move-knob { position: absolute; width: 42%; aspect-ratio: 1; left: 29%; top: 29%; border-radius: 50%; background: linear-gradient(#f8d98a,#a96a2f); border: 3px solid #fff1b5aa; box-shadow: 0 6px 18px #0008; transform: translate(0,0); }
.action-pad { position: absolute; right: max(18px,env(safe-area-inset-right)); bottom: max(14px,env(safe-area-inset-bottom)); width: clamp(220px,38vw,340px); height: clamp(155px,25vw,220px); pointer-events: none; }
.touch-button { position: absolute; display: grid; place-items: center; border-radius: 50%; border: 2px solid #ffe1a888; background: linear-gradient(#204f47dd,#0d2926ee); color: #fff1c6; box-shadow: 0 7px 0 #061815bb, 0 10px 20px #0007; }
.touch-button.is-pressed, .touch-button:active { transform: translateY(4px) scale(.96); filter: brightness(1.25); box-shadow: 0 3px 0 #061815bb; }
.touch-button small { position: absolute; bottom: 7px; font-size: .55rem; font-weight: 900; text-shadow: 0 1px 2px #000; }
.touch-button.attack { width: 88px; height: 88px; right: 0; bottom: 0; background: linear-gradient(#b84f27e6,#502519f2); }
.touch-button.jump { width: 76px; height: 76px; right: 90px; bottom: 7px; }
.touch-button.skill { width: 66px; height: 66px; right: 65px; bottom: 88px; }
.touch-button.spirit { width: 60px; height: 60px; right: 139px; bottom: 91px; }
.touch-button.dodge { width: 58px; height: 58px; right: 172px; bottom: 23px; }
.action-icon { display: block; width: 65%; height: 65%; background: url("./assets/icons.webp") 0 0/500% 100% no-repeat; }
.icon-jump { background-position: 0 0; }
.icon-attack { background-position: 25% 0; }
.icon-skill { background-position: 50% 0; }
.icon-dodge { background-position: 75% 0; }
.icon-spirit { background-position: 100% 0; }
.desktop-hint { position: absolute; z-index: 6; bottom: 8px; left: 50%; transform: translateX(-50%); margin: 0; padding: 5px 12px; border-radius: 999px; color: #d6e5dc; background: #061a18aa; font-size: .64rem; pointer-events: none; }
.orientation-hint { display: none; position: absolute; z-index: 30; inset: 0; place-items: center; align-content: center; background: #071b18ee; text-align: center; }
.orientation-hint span, .orientation-hint strong, .orientation-hint small { display: block; }
.orientation-hint span { font-size: 3rem; color: var(--gold); }
.orientation-hint small { color: #a8c6b7; margin-top: 6px; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: max(18px,env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 10px 16px; border: 1px solid #e9c37577; border-radius: 999px; background: #0a2824ee; color: #fff1bf; box-shadow: 0 8px 25px #0008; font-size: .78rem; }

@media (pointer: coarse), (max-width: 900px) {
  .mobile-controls { display: block; }
  .desktop-hint { display: none; }
  .game-topbar { grid-template-columns: 1fr minmax(150px,.72fr) 1fr; gap: 5px; }
  .hud-copy span { display: none; }
}

.is-touch-device .mobile-controls { display: block; }
.is-touch-device .desktop-hint { display: none; }

@media (orientation: portrait) and (pointer: coarse) {
  .orientation-hint { display: grid; }
  .mobile-controls { visibility: hidden; }
}

@media (max-width: 760px) {
  .lobby-content { grid-template-columns: 1fr; width: min(500px,100%); }
  .brand-block { text-align: center; }
  .brand-copy { margin: 15px auto; }
  .feature-row { justify-content: center; }
  .lobby-screen { align-items: start; }
  .contract-card { border-radius: 20px; }
}

@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px) {
  .game-topbar { height: 58px; padding-top: 5px; padding-bottom: 5px; }
  .portrait { width: 42px; flex-basis: 42px; }
  .mobile-controls { height: 190px; }
  .move-pad { width: 130px; }
  .action-pad { width: 250px; height: 165px; transform: scale(.84); transform-origin: right bottom; }
  .map-panel { inset: 3% 9%; padding: 17px 28px; }
  .map-panel h2 { margin-bottom: 8px; font-size: 1.5rem; }
  .level-card { margin: 7px 0; padding: 10px; }
  .map-depart { margin-top: 10px; min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } }