:root {
  color-scheme: light;
  --ink: #271f18;
  --muted: #77695b;
  --paper: #f8f3e8;
  --wood: #d5a45f;
  --wood-dark: #815a34;
  --accent: #9d3e2b;
  --line: rgba(53, 36, 22, 0.2);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #2c2118; color: var(--ink); }
body.chat-open { width: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.game-shell {
  min-height: 100vh;
  padding: max(22px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(145deg, #4a3524, #241a13 70%);
}
.game-header { max-width: 820px; margin: 0 auto 18px; color: #fff8ed; display: flex; align-items: end; justify-content: space-between; }
.eyebrow { margin: 0 0 4px; color: #cfbba2; font-size: .8rem; letter-spacing: .12em; }
h1 { font-family: "Songti SC", SimSun, serif; margin: 0; font-size: clamp(1.65rem, 5vw, 2.3rem); font-weight: 700; }
.activity-badge { border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 7px 12px; font-size: .8rem; color: #f6dfbb; background: rgba(255,255,255,.08); }
.game-card { max-width: 820px; margin: auto; padding: clamp(16px, 3vw, 26px); border: 1px solid rgba(255,255,255,.22); border-radius: 22px; background: var(--paper); box-shadow: 0 22px 60px rgba(0,0,0,.36); }
.score-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 18px; }
.score-row > div:first-child, .score-row > div:last-child { display: grid; grid-template-columns: 28px 1fr; align-items: center; }
.score-row > div:last-child { text-align: right; grid-template-columns: 1fr 28px; }
.score-row > div:last-child .stone { grid-column: 2; grid-row: 1 / 3; }
.score-row strong { font-size: .95rem; }
.score-row small { grid-column: 2; color: var(--muted); font-size: .72rem; }
.score-row > div:last-child small { grid-column: 1; }
.stone { width: 22px; height: 22px; border-radius: 50%; display: inline-block; box-shadow: inset -3px -4px 7px rgba(0,0,0,.28), 0 2px 4px rgba(0,0,0,.22); }
.stone.black { background: #211e1b; }
.stone.white { background: #faf7f0; border: 1px solid #ad9d89; }
.turn-clock { font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--muted); padding: 10px 16px; border-radius: 999px; background: #eee4d2; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; transition: transform .12s, background .12s; }
.turn-clock.pressing { transform: scale(.95); background: #dfd1ba; }
.board { width: min(100%, 650px); aspect-ratio: 1; margin: auto; display: grid; grid-template-columns: repeat(15, 1fr); background-color: var(--wood); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: calc(100% / 14) calc(100% / 14); background-position: center; border: 9px solid #bd8748; box-shadow: inset 0 0 22px rgba(81,50,24,.25), 0 7px 18px rgba(55,35,20,.2); }
.cell { border: 0; padding: 0; background: transparent; position: relative; min-width: 0; }
.cell::after { content: ""; position: absolute; width: 72%; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.92); border-radius: 50%; opacity: 0; transition: .16s; }
.cell.black::after, .cell.white::after { opacity: 1; box-shadow: inset -4px -5px 8px rgba(0,0,0,.28), 0 2px 3px rgba(0,0,0,.25); }
.cell.black::after { background: #211e1b; }
.cell.white::after { background: #faf7ef; border: 1px solid #9c856c; }
.cell:not(.black):not(.white):hover::after { opacity: .26; background: #211e1b; }
.cell.last::before { content: ""; position: absolute; z-index: 2; width: 18%; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: #bb4734; }
.cell.suggested::before { content: ""; position: absolute; z-index: 2; width: 34%; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 2px solid #a83f2d; border-radius: 50%; animation: hintPulse 1s ease-in-out infinite; }
.board.thinking { pointer-events: none; opacity: .93; }
@keyframes hintPulse { 50% { transform: translate(-50%,-50%) scale(1.35); opacity: .55; } }
.game-status { text-align: center; color: var(--muted); margin: 18px 0 14px; }
.game-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 12px; max-width: 420px; margin: auto; }
.primary-button, .quiet-button, .lock-button { border-radius: 12px; padding: 12px 18px; border: 1px solid transparent; touch-action: manipulation; }
.primary-button { background: var(--ink); color: #fff; box-shadow: 0 4px 10px rgba(38,28,20,.2); }
.quiet-button { background: #eee4d2; color: var(--ink); border-color: #dac9ad; }
.game-footnote { text-align: center; color: #a9937c; font-size: .75rem; }

.unlock-layer { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; overflow-y: auto; padding: 20px; background: rgba(20,14,10,.76); backdrop-filter: blur(12px); }
.unlock-card { width: min(100%, 390px); position: relative; background: #fffdf8; border-radius: 22px; padding: 30px; box-shadow: 0 24px 80px rgba(0,0,0,.4); }
.lock-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #f5dbc0; background: var(--ink); }
.unlock-card h2 { margin: 18px 0 4px; }
.unlock-card > p { color: var(--muted); margin: 0 0 20px; }
.unlock-card label { display: grid; gap: 7px; margin: 14px 0; font-size: .88rem; color: var(--muted); }
.unlock-card input, .unlock-card select { width: 100%; border: 1px solid #d8caba; border-radius: 11px; padding: 12px; color: var(--ink); background: #fff; font-size: 16px; }
.unlock-card .pin-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.pin-label { margin: 12px 0 7px; font-size: .88rem; color: var(--muted); }
.pin-dots { display: flex; justify-content: center; gap: 18px; margin: 2px 0 16px; }
.pin-dots span { width: 13px; height: 13px; border: 1.5px solid #8f7f70; border-radius: 50%; background: transparent; transition: background .12s, transform .12s; }
.pin-dots span.filled { background: var(--ink); transform: scale(1.08); }
.pin-dots.error { animation: pinShake .28s ease-in-out; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 12px; }
.pin-pad button { min-height: 48px; border: 0; border-radius: 13px; color: var(--ink); background: #eee7dc; font-size: 1.16rem; font-weight: 600; touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.pin-pad button:active { transform: scale(.96); background: #ded2c3; }
.pin-submit { margin-top: 0; }
@keyframes pinShake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }
.full-width { width: 100%; margin-top: 6px; }
.icon-button { border: 0; border-radius: 10px; background: transparent; font-size: 1.4rem; }
.close-button { position: absolute; right: 18px; top: 14px; color: var(--muted); }
.form-error { min-height: 1.25rem; margin: 0 !important; color: #a52820 !important; font-size: .82rem; }

.chat-shell { position: fixed; inset: 0; height: 100dvh; min-height: 0; display: grid; grid-template-columns: 280px 1fr; background: #f4f0e8; }
.chat-sidebar { display: flex; flex-direction: column; padding: 26px 18px; background: #30251d; color: #fff9ef; }
.brand-line { display: flex; align-items: center; gap: 10px; font-family: "Songti SC", serif; font-size: 1.12rem; margin: 0 8px 32px; }
.mini-board { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: #d3a15e; color: #2a211a; font-weight: 700; }
.contact-card { display: flex; gap: 12px; align-items: center; border-radius: 14px; padding: 12px; background: rgba(255,255,255,.09); }
.contact-card div { display: grid; gap: 3px; }
.contact-card small { color: #c8b8a7; }
.avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #d7a762; color: #2a211a; font-weight: 700; }
.lock-button { margin-top: auto; color: #d7c4af; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.13); }
.conversation { min-width: 0; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.conversation-header { min-height: 78px; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,.82); border-bottom: 1px solid #e2d9cc; backdrop-filter: blur(12px); }
.conversation-header div { display: grid; gap: 3px; }
.presence { font-size: .75rem; color: var(--muted); }
#mobileLockButton { display: none; }
.message-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; padding: 22px clamp(16px, 4vw, 56px); display: flex; flex-direction: column; gap: 12px; }
.empty-state { margin: auto; color: #908274; font-size: .9rem; }
.message { max-width: min(72%, 620px); display: grid; gap: 5px; }
.message.mine { align-self: flex-end; }
.message.theirs { align-self: flex-start; }
.message-meta { font-size: .7rem; color: #95877a; padding: 0 5px; }
.message.mine .message-meta { text-align: right; }
.bubble { padding: 11px 14px; border-radius: 16px; line-height: 1.55; overflow-wrap: anywhere; background: #fff; box-shadow: 0 2px 10px rgba(72,53,36,.08); }
.message.mine .bubble { color: #fff; background: #433127; border-bottom-right-radius: 5px; }
.message.theirs .bubble { border-bottom-left-radius: 5px; }
.file-card { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; border: 0; width: 100%; color: inherit; text-align: left; background: transparent; padding: 0; }
.file-icon { width: 34px; height: 40px; display: grid; place-items: center; border-radius: 7px; background: rgba(157,62,43,.13); font-weight: 700; }
.file-card span:last-child { display: grid; min-width: 0; }
.file-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-card small { opacity: .66; }
.image-card { display: block; width: min(64vw, 360px); min-height: 120px; border: 0; border-radius: 12px; overflow: hidden; padding: 0; color: inherit; background: rgba(120,100,80,.1); }
.image-card img { display: block; width: 100%; max-height: 420px; object-fit: contain; background: rgba(0,0,0,.06); }
.image-placeholder { display: grid; min-height: 120px; place-items: center; padding: 18px; font-size: .78rem; opacity: .7; }
.audio-card { min-width: min(68vw, 320px); display: grid; gap: 7px; }
.audio-card audio { display: block; width: 100%; height: 42px; }
.media-loading { font-size: .75rem; opacity: .68; }
.composer { padding: 14px max(16px, 4vw) max(14px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: end; border-top: 1px solid #e2d9cc; background: rgba(255,255,255,.96); }
.composer textarea { width: 100%; min-width: 0; resize: none; max-height: 130px; min-height: 44px; padding: 11px 13px; border: 1px solid #d8cfc2; border-radius: 13px; outline: none; background: #faf8f4; font-size: 16px; }
.composer textarea:focus { border-color: #8d6a4c; box-shadow: 0 0 0 3px rgba(141,106,76,.12); }
.attach-button, .voice-button, .send-button { height: 44px; border: 0; border-radius: 12px; }
.attach-button { width: 44px; background: #eae2d6; font-size: 1.4rem; color: #72553e; }
.voice-button { min-width: 44px; padding: 0 10px; background: #eae2d6; color: #72553e; }
.voice-button.recording { color: #fff; background: #b53e32; animation: recordPulse 1.2s ease-in-out infinite; }
.attach-button:disabled, .voice-button:disabled, .send-button:disabled { cursor: wait; opacity: .55; }
.send-button { padding: 0 20px; background: var(--accent); color: #fff; }
.toast { position: fixed; z-index: 30; bottom: 24px; left: 50%; transform: translateX(-50%); border-radius: 999px; padding: 10px 16px; background: #211a15; color: #fff; box-shadow: 0 8px 30px rgba(0,0,0,.28); }
.image-preview-layer { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: max(48px, env(safe-area-inset-top)) 12px max(20px, env(safe-area-inset-bottom)); background: rgba(12,10,8,.94); }
.image-preview-layer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.preview-close { position: absolute; z-index: 1; top: max(10px, env(safe-area-inset-top)); right: 12px; width: 42px; height: 42px; border: 0; border-radius: 50%; color: #fff; background: rgba(255,255,255,.14); font-size: 1.6rem; }
@keyframes recordPulse { 50% { opacity: .72; } }

@media (max-width: 720px) {
  .game-shell { padding-left: 12px; padding-right: 12px; }
  .game-card { border-radius: 17px; padding: 13px; }
  .board { border-width: 6px; }
  .game-status { font-size: .88rem; }
  .chat-shell { display: block; }
  .chat-sidebar { display: none; }
  .conversation { height: 100%; }
  .conversation-header { min-height: 64px; padding: 10px 16px; }
  .unlock-layer { padding: 10px; }
  .unlock-card { padding: 22px; }
  .unlock-card h2 { margin-top: 12px; }
  .unlock-card > p { margin-bottom: 12px; }
  .unlock-card label { margin: 9px 0; }
  .conversation-header, .unlock-layer { backdrop-filter: none; }
  #mobileLockButton { display: block; }
  .message-list { padding: 16px 13px; }
  .message { max-width: 86%; }
  .composer { padding-left: 10px; padding-right: 10px; }
  .composer { gap: 7px; }
  .send-button { padding: 0 14px; }
}