/* --- 日系和色系 (无描边、无阴影、纯色、圆角) --- */
:root {
    --bg: #f5f3ef;            /* 生成色 / 素净和纸暖底 */
    --panel: #ffffff;         /* 纯白色块 */
    --text: #3c3935;          /* 墨色 (柔和深灰) */
    --text-muted: #8e877e;    /* 灰褐弱化字 */
    --board-bg: #e5e0d8;      /* 棋盘底色 / 浅砂色 */
    --slot-bg: #dbd5cc;       /* 未放置挡板的槽位颜色 */
    --cell-bg: #faf8f5;       /* 棋格底色 / 暖白 */
    --cell-valid: #dfebe9;    /* 可走提示 / 浅天水色 */
    --cell-valid-dot: #486f88;/* 提示圆点 */
    --wall-placed: #3c3935;   /* 放置挡板 / 墨黑色 */
    --p1: #486f88;            /* 蓝方 / 蓝鼠色 (Aizome) */
    --p2: #c05c46;            /* 红方 / 茜色 (Akane) */
    --btn-bg: #eae5dc;        /* 按钮浅底 */
    --btn-active: #3c3935;    /* 激活按钮深底 */
    --btn-active-text: #faf8f5;
    --modal-mask: rgba(60, 57, 53, 0.45);
  }
  
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "PingFang SC", "Microsoft YaHei", sans-serif;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    border: none;
    outline: none;
    box-shadow: none;
  }
  
  body {
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    min-height: 100dvh; /* 适配移动端动态视口高度 */
    /* 左右尽量贴边 (8px)，并考虑手机安全区 */
    padding: 12px max(8px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    overflow-x: hidden;
  }
  
  /* 核心容器贴合宽度 */
  #lobby, #game {
    width: 100%;
    max-width: 480px; /* 大屏/折叠屏展开时做个合理上限约束 */
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* 极简居中标题 */
  h1 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 2px;
    margin: 8px 0 16px;
    color: var(--text);
  }
  
  /* 纯色圆角面板卡片 */
  .panel {
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    background: var(--panel);
    border-radius: 14px;
  }
  
  .panel-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    color: var(--text-muted);
  }
  
  .flex-row {
    display: flex;
    gap: 8px;
    width: 100%;
  }
  
  /* 纯色输入框与按钮 */
  input, button {
    padding: 11px 14px;
    font-size: 14px;
    border-radius: 12px;
    background: var(--btn-bg);
    color: var(--text);
  }
  
  input {
    flex: 1;
    font-family: monospace;
    font-size: 16px; /* 防止 iOS 聚焦时页面放大 */
    text-transform: lowercase;
  }
  
  input::placeholder {
    color: var(--text-muted);
  }
  
  button {
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
  }
  
  button:active {
    background: var(--btn-active);
    color: var(--btn-active-text);
  }
  
  /* 匹配码区域 */
  .code-box {
    margin-top: 10px;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  
  .code-text {
    width: 100%;
    padding: 12px;
    font-size: 22px;
    font-weight: 700;
    font-family: monospace;
    letter-spacing: 5px;
    text-align: center;
    cursor: pointer;
    background: var(--btn-bg);
    border-radius: 12px;
    color: var(--text);
  }
  
  .tip-text {
    font-size: 12px;
    color: var(--text-muted);
  }
  
  /* 对局状态条 */
  .game-status-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    background: var(--panel);
    border-radius: 12px;
  }
  
  .wall-count {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .badge-p1 { color: var(--p1); }
  .badge-p2 { color: var(--p2); }
  
  /* 回合提示条 */
  .turn-bar {
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: var(--panel);
    border-radius: 10px;
    color: var(--text-muted);
    transition: background 0.2s, color 0.2s;
  }
  
  .turn-bar.my-turn {
    background: var(--btn-active);
    color: var(--btn-active-text);
  }
  
  /* 棋盘容器 - 紧贴边缘 */
  #board-container {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  #board {
    /* 贴紧屏幕，两边留 8px(x2=16px) 的极窄留白 */
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    max-width: 100%;
    background: var(--board-bg);
    border-radius: 14px;
    padding: 5px;
    display: grid;
    /* 9个格点(1fr) + 8个挡板间隙(6px) */
    grid-template-columns: repeat(8, 1fr 6px) 1fr;
    grid-template-rows: repeat(8, 1fr 6px) 1fr;
  }
  
  /* 棋格单元 */
  .cell {
    background: var(--cell-bg);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .cell.valid-move {
    background: var(--cell-valid);
    cursor: pointer;
  }
  
  .cell.valid-move::after {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--cell-valid-dot);
    border-radius: 50%;
  }
  
  /* 纯色棋子 */
  .pawn {
    width: 70%;
    height: 70%;
    border-radius: 50%;
  }
  .pawn-p1 { background: var(--p1); }
  .pawn-p2 { background: var(--p2); }
  
  /* 挡板与缝隙 */
  .slot-h, .slot-v, .slot-cross {
    background: var(--slot-bg);
  }
  .slot-h { border-radius: 2px; }
  .slot-v { border-radius: 2px; }
  .slot-cross { border-radius: 2px; }
  
  .wall-placed {
    background: var(--wall-placed) !important;
  }
  
  .mode-wall .slot-cross,
  .mode-wall .slot-h,
  .mode-wall .slot-v {
    cursor: pointer;
  }
  
  /* 底部操作按钮 */
  .controls {
    display: flex;
    width: 100%;
    margin-top: 8px;
    gap: 8px;
  }
  
  .controls button {
    flex: 1;
    padding: 12px 0;
    font-size: 13px;
    border-radius: 12px;
    background: var(--panel);
    color: var(--text);
  }
  
  .controls button.active {
    background: var(--btn-active);
    color: var(--btn-active-text);
  }
  
  #msg {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--p2);
    min-height: 16px;
    text-align: center;
  }
  
  /* 结算弹窗组件 */
  #victory-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--modal-mask);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  
  #victory-modal.show {
    opacity: 1;
    pointer-events: auto;
  }
  
  .modal-content {
    width: calc(100% - 32px);
    max-width: 320px;
    background: var(--panel);
    border-radius: 18px;
    padding: 26px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .modal-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 20px;
  }
  
  .modal-btn {
    width: 100%;
    padding: 13px 0;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    background: var(--btn-active);
    color: var(--btn-active-text);
  }