:root {
  color-scheme: dark;
  --ink: #17110d;
  --paper: #e8c68c;
  --red: #c84b3e;
  --gold: #d6a85e;
  --muted: #a89888;
  --card: rgba(39, 29, 22, .82);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
body {
  min-height: 100vh;
  color: #f5eee5;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background:
    radial-gradient(circle at 20% 10%, rgba(150, 84, 45, .22), transparent 32%),
    radial-gradient(circle at 85% 80%, rgba(107, 48, 37, .18), transparent 30%),
    linear-gradient(145deg, #211812, #100c09 70%);
  padding: 0 20px 28px;
}
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .16; background-image: repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,.025) 3px 4px); }
button, input { font: inherit; }
button { border: 1px solid rgba(255,255,255,.12); border-radius: 6px; background: rgba(255,255,255,.045); color: #f6eee5; padding: 10px 12px; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
button:hover { background: rgba(255,255,255,.09); transform: translateY(-1px); }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
button:disabled { cursor: not-allowed; opacity: .48; transform: none; }

.topbar { width: min(1040px, 100%); height: 58px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.08); }
.back-link { color: #b7a696; text-decoration: none; font-size: 12px; }
.back-link span { margin-right: 7px; color: var(--gold); font-size: 17px; }
.room-summary { display: flex; gap: 13px; align-items: center; color: #8f8174; font-size: 11px; }
.text-button { padding: 0; border: 0; color: var(--gold); background: transparent; font-size: 11px; }
.text-button:hover { background: transparent; transform: none; text-decoration: underline; }

#app { width: min(1040px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 620px) 320px; gap: 28px; align-items: start; }
.stage-heading { min-height: 76px; display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.eyebrow, .section-title { color: var(--gold); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.stage-heading h1 { margin-top: 3px; font: 500 34px/1 "STKaiti", "KaiTi", serif; letter-spacing: .12em; }
.connection { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; padding-bottom: 4px; }
.connection i { width: 7px; height: 7px; border-radius: 50%; background: #b47e46; }
.connection.online i { background: #75aa72; box-shadow: 0 0 10px #75aa72; }
.connection.offline i { background: #bd5148; }

#board-shell { position: relative; padding: 13px; border: 1px solid rgba(222, 178, 112, .32); background: #332217; box-shadow: 0 18px 60px rgba(0,0,0,.45), inset 0 0 0 4px rgba(0,0,0,.15); border-radius: 4px; }
#board { width: 100%; height: auto; display: block; background: linear-gradient(rgba(255,255,255,.04), rgba(0,0,0,.035)), var(--paper); box-shadow: inset 0 0 30px rgba(105, 61, 24, .18); }
#board .grid-line { stroke: #573718; stroke-width: 1.35; }
#board .grid-line.thick { stroke-width: 2.4; }
#board .river-text { fill: #6f4723; font: 31px "STKaiti", "KaiTi", "SimSun", serif; letter-spacing: 7px; }
#board .star { fill: #573718; }
#board .palace-line { stroke: #573718; stroke-width: 1.2; }
#board .marker { fill: rgba(49, 112, 74, .58); pointer-events: none; }
#board .marker.capture { fill: none; stroke: rgba(173, 55, 44, .9); stroke-width: 3; }
#board .marker.last-from { fill: rgba(34, 71, 92, .13); stroke: #547f91; stroke-width: 2; stroke-dasharray: 5 4; }
#board .marker.last-to { fill: none; stroke: #ce7f38; stroke-width: 4; }
#board .selected { fill: rgba(222, 166, 58, .10); stroke: #d6a23f; stroke-width: 4; }
#board image.piece { cursor: pointer; filter: drop-shadow(1px 3px 2px rgba(0,0,0,.35)); }
.board-locked #board image.piece { cursor: default; }

#waiting-cover { position: absolute; inset: 13px; display: none; place-content: center; justify-items: center; gap: 7px; color: #f7e7cf; background: rgba(32, 22, 15, .72); backdrop-filter: blur(3px); text-align: center; }
#waiting-cover.show { display: grid; }
#waiting-cover strong { font: 500 25px "STKaiti", "KaiTi", serif; letter-spacing: .08em; }
#waiting-cover small { color: #b8a999; font-size: 11px; }
.waiting-dot { width: 9px; height: 9px; margin-bottom: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(214,168,94,.5); animation: pulse 1.7s infinite; }
@keyframes pulse { 60% { box-shadow: 0 0 0 12px rgba(214,168,94,0); } 100% { box-shadow: 0 0 0 0 rgba(214,168,94,0); } }

#check-alert { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%) scale(.75); display: grid; place-items: center; width: 116px; height: 116px; border: 4px double rgba(255,226,177,.92); border-radius: 50%; color: #fff3dc; background: rgba(157,40,31,.93); box-shadow: 0 10px 35px rgba(73,9,4,.55), inset 0 0 0 5px rgba(255,255,255,.08); font: 700 43px/1 "STKaiti", "KaiTi", serif; letter-spacing: .08em; opacity: 0; visibility: hidden; pointer-events: none; }
#check-alert.show { visibility: visible; animation: check-in 1.55s ease both; }
@keyframes check-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.55) rotate(-7deg); } 18%,72% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.92); visibility: hidden; } }

#status-bar { min-height: 46px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.10); color: #ead8c1; font-size: 14px; }
#move-count { color: var(--muted); font-size: 12px; }
#panel { padding-top: 90px; display: grid; gap: 12px; }
.card { border: 1px solid rgba(255,255,255,.09); background: var(--card); backdrop-filter: blur(10px); border-radius: 8px; padding: 15px; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.section-title { margin-bottom: 10px; }

.invite-code { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 15px; padding: 10px 12px; border-color: rgba(214,168,94,.32); background: rgba(214,168,94,.08); }
.invite-code strong { color: #f2d59d; font-size: 24px; letter-spacing: .18em; }
.invite-code span { color: var(--muted); font-size: 11px; }
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seat { display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 6px; background: rgba(255,255,255,.035); }
.seat i { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #ead1a2; font: 700 16px "STKaiti", "KaiTi", serif; box-shadow: inset 0 0 0 2px currentColor; }
.seat .red-seat { color: #aa362d; }
.seat .black-seat { color: #28231f; }
.seat span { display: grid; gap: 2px; }
.seat b { font-size: 12px; }
.seat small { color: #807468; font-size: 10px; }
.seat small.online { color: #8fbd89; }
.my-seat { min-height: 16px; margin-top: 12px; color: #aa9a8c; font-size: 11px; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.primary { background: var(--red); border-color: #e06a5c; }
.primary:hover { background: #d45749; }
.secondary { color: #cab9a8; }

#last-move { min-height: 28px; display: flex; align-items: center; gap: 10px; }
#last-move strong { font: 18px "STKaiti", "KaiTi", serif; color: #f4ddbd; }
#last-move code { color: #a99888; font-size: 11px; }
.empty { color: #85786d; font-size: 12px; }
#history { max-height: 195px; overflow-y: auto; font-size: 13px; scrollbar-color: #72513a transparent; }
#history .row { display: grid; grid-template-columns: 25px 1fr 1fr; gap: 8px; padding: 6px 2px; border-bottom: 1px solid rgba(255,255,255,.055); }
#history .no { color: #796d62; }
#history .red-move { color: #f09b8e; }
#history .black-move { color: #a9c9d6; }
#captured-row { min-height: 30px; opacity: .8; }
.captured { min-height: 18px; }
.captured img { width: 21px; height: 21px; margin-right: -7px; filter: grayscale(.15); }

.lobby { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(12,9,7,.75); backdrop-filter: blur(9px); }
.lobby[hidden] { display: none; }
.lobby-card { width: min(450px, 100%); padding: 35px; border: 1px solid rgba(255,255,255,.11); border-radius: 12px; background: #251b15; box-shadow: 0 30px 90px rgba(0,0,0,.55); }
.lobby-card h2 { margin: 8px 0 13px; font: 500 37px "STKaiti", "KaiTi", serif; }
.lobby-intro { margin-bottom: 25px; color: #a99a8c; font-size: 13px; line-height: 1.7; }
.lobby-primary { width: 100%; display: flex; justify-content: space-between; padding: 13px 15px; border-color: #df6557; background: var(--red); font-size: 14px; }
.lobby-primary span { color: #f1bbb4; font-size: 11px; }
.divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: #6f6258; font-size: 10px; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: rgba(255,255,255,.09); }
#join-form label { display: block; margin-bottom: 8px; color: var(--gold); font-size: 11px; letter-spacing: .1em; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.join-row input { min-width: 0; border: 1px solid rgba(255,255,255,.16); border-radius: 6px; padding: 11px 12px; color: #fff; background: rgba(0,0,0,.18); text-transform: uppercase; letter-spacing: .17em; }
.join-row input::placeholder { color: #6f6258; letter-spacing: .08em; }
.form-error { min-height: 18px; padding-top: 6px; color: #e58176; font-size: 11px; }
.lobby-back { display: block; margin-top: 17px; color: #86786d; font-size: 11px; text-align: center; }

#toast { position: fixed; z-index: 30; left: 50%; bottom: 24px; transform: translate(-50%,20px); opacity: 0; padding: 9px 14px; color: #f8eee5; background: #9f3d32; border-radius: 5px; font-size: 13px; transition: .2s; pointer-events: none; }
#toast.show { opacity: 1; transform: translate(-50%,0); }

@media (max-width: 850px) {
  body { padding: 0 10px 28px; }
  #app { display: flex; flex-direction: column; width: min(620px, 100%); }
  .topbar { width: min(620px,100%); }
  .game-stage, #panel { width: 100%; }
  #panel { padding-top: 0; }
}
@media (max-width: 480px) {
  .stage-heading { min-height: 64px; }
  .stage-heading h1 { font-size: 28px; }
  #board-shell { padding: 7px; }
  #waiting-cover { inset: 7px; }
  .room-summary #room-label { display: none; }
  .lobby-card { padding: 27px 21px; }
  .join-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation: none !important; transition: none !important; }
  #check-alert.show { opacity: 1; visibility: visible; transform: translate(-50%,-50%); }
}