:root { color: #ffffff; font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 640px; min-height: 100vh; background: #16b7ce url('assets/game-bg.png') center / cover fixed no-repeat; }
.app-shell { width: min(900px, calc(100vw - 48px)); margin: 0 auto; padding: 34px 0 42px; }
header { text-align: center; margin-bottom: 22px; text-shadow: 0 2px 8px rgba(0,74,105,.36); }.eyebrow { margin: 0; letter-spacing: 5px; font-weight: 700; font-size: 11px; color: #e6ffff; } h1 { margin: 4px 0; font-family: SimSun, serif; font-size: 44px; letter-spacing: 8px; } h1 span { font-family: "Microsoft YaHei", sans-serif; font-size: 15px; letter-spacing: 2px; color: #ddffff; }.subtitle { margin: 0; font-size: 14px; color: #e9ffff; }
.game-panel { margin: 0 auto; max-width: 750px; padding: 18px 20px 24px; border: 1px solid rgba(255,255,255,.5); border-radius: 18px; background: rgba(6,87,115,.30); box-shadow: 0 18px 44px rgba(0,50,80,.26); backdrop-filter: blur(5px); }.turnbar { display: flex; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 8px 13px; }.player { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,.64); }.player.active { color: #fff; }.player i { width: 15px; height: 15px; border-radius: 50%; }.red-player i { background: #cc4b43; }.green-player i { background: #33972a; }.status { color: #fff; font-size: 15px; font-weight: 700; }
.board-frame { padding: 4px; border-radius: 14px; background: rgba(0,72,94,.60); box-shadow: 0 10px 22px rgba(0,45,70,.28); }.board { display: block; width: min(100%, 610px); height: auto; margin: 0 auto; cursor: pointer; }
.hint { min-height: 24px; margin: 15px 0 10px; text-align: center; color: #fff; font-size: 14px; }.actions { display: flex; justify-content: center; gap: 12px; }.actions button, .ai-select { border: 0; border-radius: 999px; padding: 11px 24px; cursor: pointer; font: inherit; font-weight: 700; }.primary { color: #075969; background: #f8e06b; }.secondary { color: #075969; background: #e5ffff; }.ai-select { appearance: auto; }.hidden { display: none; }.rules { max-width: 750px; margin: 22px auto 0; padding: 17px 21px; border: 1px solid rgba(255,255,255,.42); border-radius: 14px; background: rgba(0,85,117,.24); color: #efffff; font-size: 14px; line-height: 1.75; }.rules h2 { margin: 0 0 3px; color: #fff8a8; font-size: 15px; }.rules p { margin: 0; }
.actions { flex-wrap: wrap; }
.actions button:disabled { cursor: wait; opacity: .6; }
.license-mask { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: rgba(0,37,57,.75); backdrop-filter: blur(8px); }
.license-card { width: min(440px, 100%); padding: 34px; border: 1px solid rgba(255,255,255,.62); border-radius: 20px; text-align: center; background: #087b95; box-shadow: 0 24px 70px rgba(0,0,0,.42); }
.license-card h2 { margin: 7px 0 20px; font-size: 25px; }.license-card p { margin: 9px 0; }.license-card code { display: block; padding: 12px; border-radius: 8px; background: rgba(0,0,0,.2); color: #fff5a2; font-size: 20px; letter-spacing: 2px; }.license-help { color: #d8ffff; font-size: 13px; line-height: 1.55; }.license-card input { width: 100%; margin: 13px 0 11px; padding: 13px; border: 0; border-radius: 9px; text-align: center; font: 700 14px monospace; text-transform: uppercase; }.license-card button { width: 100%; padding: 13px; border: 0; border-radius: 9px; color: #075969; background: #f8e06b; font: 700 15px "Microsoft YaHei",sans-serif; cursor: pointer; }.license-card small { display: block; min-height: 18px; margin-top: 12px; color: #ffd4d4; }
.board { touch-action: manipulation; }
@media (max-width: 620px) {
  body { min-width: 0; background-attachment: scroll; }
  .app-shell { width: calc(100vw - 20px); padding: 16px 0 28px; }
  header { margin-bottom: 12px; }
  .eyebrow { letter-spacing: 3px; font-size: 9px; }
  h1 { margin: 2px 0; font-size: 31px; letter-spacing: 5px; }
  .subtitle { font-size: 12px; }
  .game-panel { padding: 10px 8px 16px; border-radius: 13px; }
  .turnbar { min-height: 35px; padding: 0 2px 8px; }
  .player { gap: 4px; font-size: 11px; }.player i { width: 10px; height: 10px; }
  .status { font-size: 12px; white-space: nowrap; }
  .board-frame { padding: 2px; border-radius: 9px; overflow: hidden; }
  .board { width: 135%; max-width: none; margin: calc(-20vw) -17.5%; }
  .hint { min-height: 19px; margin: 10px 3px 8px; font-size: 12px; }
  .actions { gap: 7px; }
  .actions button, .ai-select { padding: 8px 10px; font-size: 12px; }
  .rules { margin-top: 14px; padding: 12px 14px; font-size: 12px; }
}
.record-mask { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 18px; background: rgba(0,35,55,.7); backdrop-filter: blur(5px); }
.record-card { width: min(540px,100%); padding: 22px; border-radius: 16px; background: #087b95; box-shadow: 0 18px 60px rgba(0,0,0,.4); text-align: center; }.record-card h2,.record-card p { margin: 0 0 9px; }.record-card textarea { width: 100%; height: min(52vh,380px); padding: 12px; border: 0; border-radius: 9px; resize: vertical; color: #163946; background:#f4ffff; font: 13px/1.65 monospace; }.record-card div { display:flex; justify-content:center; gap:9px; margin-top:12px; }.record-card button { padding:9px 16px; border:0; border-radius:99px; color:#075969; background:#e5ffff; font-weight:700; cursor:pointer; }
.replay-mask { position:fixed; inset:0; z-index:31; display:grid; place-items:center; padding:14px; background:rgba(0,35,55,.76); backdrop-filter:blur(5px); }.replay-card { width:min(430px,100%); padding:16px; border-radius:16px; text-align:center; background:#087b95; box-shadow:0 18px 60px rgba(0,0,0,.4); }.replay-card h2,.replay-status { margin:3px 0 9px; }.replay-card canvas { display:block; width:min(100%,330px); height:auto; margin:auto; border-radius:10px; background:#fff; }.replay-card div { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin-top:10px; }.replay-card button { padding:8px 12px; border:0; border-radius:99px; color:#075969; background:#e5ffff; font-weight:700; cursor:pointer; }
.camp-rule { margin: 4px 0 10px; text-align: center; color: #fff7a8; font-size: 12px; font-weight: 700; }