:root{
  --bg:#1c140d;
  --bg2:#241710;
  --paper:#efe2c8;
  --wood:#d9a86c;
  --wood2:#c08850;
  --line:#6b4423;
  --human-bg:#f6edd8;
  --human-fg:#3a2a1a;
  --ghost-bg:#2c2622;
  --ghost-fg:#d4453a;
  --gold:#f1c40f;
  --green:#27ae60;
  --red:#e74c3c;
  --ink:#2b2018;
  --muted:#8a7a66;
  --card-bg:rgba(40,28,18,.55);
  --card-border:rgba(217,168,108,.25);
  --nav-bg:rgba(28,20,13,.95);
  --primary:#c89060;
  --primary2:#a87142;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow-x:hidden;}
body{
  font-family:"KaiTi","STKaiti","楷体","SimSun","宋体",serif;
  background:radial-gradient(circle at 20% 10%,#2a1d12 0%,transparent 50%),
             radial-gradient(circle at 80% 90%,#241710 0%,transparent 55%),
             var(--bg);
  color:var(--paper);
  min-height:100vh;
  padding-bottom:70px;
}

/* ===== 通用 ===== */
#app{min-height:100vh;}
.view{display:none;animation:fadeIn .3s;}
.view.active{display:block;}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

header{text-align:center;padding:18px 14px 10px;}
header h1{font-size:clamp(24px,6vw,38px);letter-spacing:.25em;color:#e9d8b5;font-weight:900;text-shadow:0 2px 6px rgba(0,0,0,.6);}
header p{color:var(--muted);font-size:13px;margin-top:4px;letter-spacing:.12em;}

/* ===== 首页 ===== */
.home-content{padding:10px 16px 20px;max-width:560px;margin:0 auto;}
.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;}
.game-card{
  background:linear-gradient(145deg,rgba(58,40,24,.7),rgba(36,23,16,.7));
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:24px 14px;
  text-align:center;
  cursor:pointer;
  transition:transform .15s,box-shadow .2s;
  position:relative;
  overflow:hidden;
}
.game-card:active{transform:scale(.96);}
.game-card:hover{box-shadow:0 6px 20px rgba(200,144,96,.2);border-color:rgba(217,168,108,.5);}
.game-card .icon{font-size:42px;margin-bottom:8px;line-height:1;}
.game-card .title{font-size:17px;font-weight:bold;color:#e9d8b5;letter-spacing:.08em;}
.game-card .desc{font-size:11px;color:var(--muted);margin-top:4px;}
.game-card.match{border-color:rgba(231,76,60,.3);}
.game-card.match .icon{color:#e74c3c;}
.game-card.local{border-color:rgba(39,174,96,.3);}
.game-card.local .icon{color:#27ae60;}
.game-card.online{border-color:rgba(241,196,15,.3);}
.game-card.online .icon{color:#f1c40f;}
.game-card.ai{border-color:rgba(155,89,182,.3);}
.game-card.ai .icon{color:#9b59b6;}

.endgame-section{margin-top:24px;}
.endgame-section h3{font-size:15px;color:var(--muted);letter-spacing:.15em;margin-bottom:10px;}
.endgame-entry{
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;
  padding:14px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:border .15s;
}
.endgame-entry:hover{border-color:rgba(217,168,108,.5);}
.endgame-entry .emoji{font-size:28px;}
.endgame-entry .info{flex:1;}
.endgame-entry .info .n{font-size:15px;color:#e9d8b5;font-weight:bold;}
.endgame-entry .info .d{font-size:11px;color:var(--muted);margin-top:2px;}
.diff-stars{color:var(--gold);font-size:12px;}

/* ===== 底部导航 ===== */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;height:60px;
  background:var(--nav-bg);border-top:1px solid rgba(217,168,108,.2);
  display:flex;z-index:100;backdrop-filter:blur(8px);
}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;color:var(--muted);transition:color .2s;padding-top:4px;
}
.nav-item.active{color:var(--primary);}
.nav-item .nav-icon{font-size:22px;line-height:1;}
.nav-item .nav-label{font-size:11px;margin-top:3px;letter-spacing:.1em;}

/* ===== 游戏页面通用 ===== */
.game-page{padding:10px 14px;max-width:600px;margin:0 auto;}
.back-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.back-btn{
  background:rgba(255,255,255,.08);border:1px solid var(--card-border);
  color:#e9d8b5;padding:6px 14px;border-radius:8px;cursor:pointer;
  font-family:inherit;font-size:14px;
}
.back-btn:active{transform:scale(.95);}
.page-title{font-size:20px;font-weight:bold;color:#e9d8b5;}

/* ===== 棋盘 ===== */
.board-area{display:flex;flex-direction:column;align-items:center;}
.board-frame{
  background:linear-gradient(145deg,var(--wood),var(--wood2));
  padding:22px 18px 18px;border-radius:14px;
  box-shadow:0 14px 30px rgba(0,0,0,.5),inset 0 0 0 2px rgba(0,0,0,.15);
}
.board{
  --cell:clamp(46px,14vw,66px);
  display:grid;grid-template-columns:repeat(5,var(--cell));grid-template-rows:repeat(5,var(--cell));
  gap:2px;background:var(--line);padding:2px;border-radius:4px;
}
.cell{
  background:linear-gradient(135deg,#e3b57d,#cf9a5e);
  position:relative;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .15s;user-select:none;
}
.cell:hover{background:linear-gradient(135deg,#ebb985,#d6a468);}
.cell.selected{background:linear-gradient(135deg,#f6d98a,#e6bf6b);box-shadow:inset 0 0 0 3px var(--gold);}
.cell.move-target::after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:rgba(39,174,96,.85);box-shadow:0 0 8px rgba(39,174,96,.8);}
.cell.cap-target{box-shadow:inset 0 0 0 3px var(--red);}
.cell.cap-target::before{content:"";position:absolute;inset:6%;border-radius:50%;border:2px dashed rgba(231,76,60,.7);}
.piece{
  width:74%;height:74%;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:clamp(18px,4vw,26px);z-index:2;
  box-shadow:0 3px 7px rgba(0,0,0,.45),inset 0 -3px 6px rgba(0,0,0,.25),inset 0 3px 6px rgba(255,255,255,.25);
}
.piece.human{background:radial-gradient(circle at 35% 30%,#fffaf0,var(--human-bg));color:var(--human-fg);border:2px solid #b89a6a;}
.piece.ghost{background:radial-gradient(circle at 35% 30%,#4a3f37,var(--ghost-bg));color:var(--ghost-fg);border:2px solid #111;}
.piece.flip-text{transform:rotate(180deg);}

/* ===== 侧栏/面板 ===== */
.panel{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
.card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:14px 16px;}
.turn-card{display:flex;align-items:center;gap:14px;}
.turn-dot{width:28px;height:28px;border-radius:50%;flex-shrink:0;box-shadow:0 0 0 3px rgba(255,255,255,.08);}
.turn-dot.ghost{background:radial-gradient(circle at 35% 30%,#4a3f37,var(--ghost-bg));}
.turn-dot.human{background:radial-gradient(circle at 35% 30%,#fffaf0,var(--human-bg));}
.turn-info .label{font-size:12px;color:var(--muted);}
.turn-info .name{font-size:20px;font-weight:900;color:#e9d8b5;}
.stats{display:flex;gap:10px;}
.stat{flex:1;text-align:center;background:rgba(0,0,0,.25);border-radius:10px;padding:8px 4px;}
.stat .n{font-size:24px;font-weight:900;}
.stat .t{font-size:11px;color:var(--muted);}
.stat.human .n{color:#f0e0c0;}
.stat.ghost .n{color:var(--ghost-fg);}
.timer-card{text-align:center;}
.timer-card .t-label{font-size:12px;color:var(--muted);margin-bottom:4px;}
.timer-num{font-size:36px;font-weight:900;font-variant-numeric:tabular-nums;color:#e9d8b5;line-height:1;}
.timer-num.warn{color:var(--red);animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:.4;}}
.timer-bar{height:6px;background:rgba(0,0,0,.3);border-radius:3px;margin-top:6px;overflow:hidden;}
.timer-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),#7bd88f);transition:width 1s linear;}
.controls{display:flex;gap:10px;}
.btn{flex:1;padding:10px 8px;border:none;border-radius:10px;cursor:pointer;font-family:inherit;font-size:14px;font-weight:bold;transition:transform .1s;}
.btn:active{transform:scale(.97);}
.btn.primary{background:linear-gradient(145deg,var(--primary),var(--primary2));color:#fff;}
.btn.ghost-btn{background:rgba(255,255,255,.08);color:#e9d8b5;border:1px solid var(--card-border);}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.log-card{min-height:80px;max-height:180px;display:flex;flex-direction:column;}
.log-card h3{font-size:13px;color:var(--muted);margin-bottom:6px;}
.log-list{flex:1;overflow-y:auto;font-size:13px;line-height:1.6;}
.log-list::-webkit-scrollbar{width:5px;}
.log-list::-webkit-scrollbar-thumb{background:rgba(217,168,108,.4);border-radius:3px;}
.log-item{padding:2px 0;border-bottom:1px dashed rgba(255,255,255,.06);}
.log-item .who.ghost{color:var(--ghost-fg);}
.log-item .who.human{color:#f0e0c0;}
.log-item.capture{color:#f5b8b0;}
.log-empty{color:var(--muted);font-size:12px;}

/* ===== 选择页面 ===== */
.select-page{padding:20px 16px;max-width:480px;margin:0 auto;}
.select-section{margin-bottom:24px;}
.select-section h3{font-size:14px;color:var(--muted);letter-spacing:.12em;margin-bottom:10px;}
.option-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.option-btn{
  background:var(--card-bg);border:2px solid var(--card-border);border-radius:12px;
  padding:18px 8px;text-align:center;cursor:pointer;transition:all .15s;font-family:inherit;color:#e9d8b5;
}
.option-btn.active{border-color:var(--gold);background:rgba(241,196,15,.1);}
.option-btn:active{transform:scale(.96);}
.option-btn .o-icon{font-size:28px;margin-bottom:4px;}
.option-btn .o-text{font-size:14px;font-weight:bold;}
.side-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.side-btn{
  border-radius:14px;padding:28px 12px;text-align:center;cursor:pointer;transition:all .15s;
  border:2px solid var(--card-border);font-family:inherit;
}
.side-btn.active{border-color:var(--gold);}
.side-btn:active{transform:scale(.96);}
.side-btn.ghost{background:radial-gradient(circle at 50% 40%,rgba(44,38,34,.8),rgba(28,20,13,.6));color:var(--ghost-fg);}
.side-btn.human{background:radial-gradient(circle at 50% 40%,rgba(246,237,216,.15),rgba(28,20,13,.4));color:#f0e0c0;}
.side-btn .s-icon{font-size:36px;}
.side-btn .s-text{font-size:16px;font-weight:bold;margin-top:6px;}
.start-btn{
  width:100%;padding:16px;border:none;border-radius:14px;cursor:pointer;
  background:linear-gradient(145deg,var(--primary),var(--primary2));color:#fff;
  font-family:inherit;font-size:18px;font-weight:bold;letter-spacing:.15em;transition:transform .1s;
}
.start-btn:active{transform:scale(.98);}

/* ===== 在线对战页面 ===== */
.online-page{padding:20px 16px;max-width:480px;margin:0 auto;}
.online-section{background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;padding:24px 20px;margin-bottom:16px;}
.online-section h3{font-size:16px;color:#e9d8b5;margin-bottom:16px;text-align:center;}
.input-field{
  width:100%;padding:12px 14px;background:rgba(0,0,0,.3);border:1px solid var(--card-border);
  border-radius:10px;color:#e9d8b5;font-family:inherit;font-size:16px;text-align:center;letter-spacing:.2em;
  margin-bottom:12px;
}
.input-field:focus{outline:none;border-color:var(--primary);}
.input-field::placeholder{color:var(--muted);}
.waiting-room{text-align:center;padding:30px 20px;}
.waiting-room .room-code{font-size:40px;font-weight:900;color:var(--gold);letter-spacing:.3em;margin:14px 0;}
.waiting-room .wait-text{color:var(--muted);font-size:14px;}
.waiting-room .spinner{display:inline-block;width:28px;height:28px;border:3px solid rgba(217,168,108,.2);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin:14px auto;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===== 残局页面 ===== */
.endgame-list-page{padding:10px 16px;max-width:560px;margin:0 auto;}
.eg-card{
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;
  padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border .15s;display:flex;align-items:center;gap:12px;
}
.eg-card:hover{border-color:rgba(217,168,108,.5);}
.eg-card .eg-num{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:16px;
}
.eg-card.d1 .eg-num{background:rgba(39,174,96,.2);color:#27ae60;}
.eg-card.d2 .eg-num{background:rgba(241,196,15,.2);color:#f1c40f;}
.eg-card.d3 .eg-num{background:rgba(231,76,60,.2);color:#e74c3c;}
.eg-card .eg-info{flex:1;}
.eg-card .eg-info .eg-name{font-size:16px;font-weight:bold;color:#e9d8b5;}
.eg-card .eg-info .eg-meta{font-size:12px;color:var(--muted);margin-top:2px;}
.eg-card .eg-arrow{color:var(--muted);font-size:18px;}

/* ===== 规则页面 ===== */
.rules-page{padding:16px;max-width:560px;margin:0 auto;}
.rules-page h2{font-size:22px;color:#e9d8b5;text-align:center;margin-bottom:16px;letter-spacing:.15em;}
.rules-page h3{font-size:16px;color:var(--primary);margin:18px 0 8px;}
.rules-page p,.rules-page li{font-size:14px;line-height:1.8;color:#cdb288;}
.rules-page ul{padding-left:20px;}
.rules-page .rule-block{background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;padding:16px;margin-bottom:12px;}

/* ===== 我的页面 ===== */
.mine-page{padding:16px;max-width:560px;margin:0 auto;}
.profile-box{
  background:linear-gradient(145deg,rgba(58,40,24,.7),rgba(36,23,16,.7));
  border:1px solid var(--card-border);border-radius:16px;padding:20px;
  display:flex;align-items:center;gap:16px;cursor:pointer;transition:border .15s;margin-bottom:14px;
}
.profile-box:hover{border-color:rgba(217,168,108,.5);}
.profile-avatar{
  width:64px;height:64px;border-radius:50%;flex-shrink:0;
  background:rgba(0,0,0,.3);border:2px solid var(--card-border);
  display:flex;align-items:center;justify-content:center;font-size:28px;overflow:hidden;
}
.profile-avatar img{width:100%;height:100%;object-fit:cover;}
.profile-info{flex:1;}
.profile-name{font-size:20px;font-weight:bold;color:#e9d8b5;position:relative;display:inline-block;}
.profile-name .gender{font-size:14px;position:absolute;top:-4px;right:-18px;}
.profile-name .gender.male{color:#5dade2;}
.profile-name .gender.female{color:#ec407a;}
.profile-sub{font-size:12px;color:var(--muted);margin-top:4px;}
.mine-box{
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;
  padding:16px 18px;margin-bottom:12px;cursor:pointer;transition:border .15s;
  display:flex;align-items:center;justify-content:space-between;
}
.mine-box:hover{border-color:rgba(217,168,108,.5);}
.mine-box .mb-left{display:flex;align-items:center;gap:12px;}
.mine-box .mb-icon{font-size:24px;}
.mine-box .mb-text{font-size:16px;color:#e9d8b5;font-weight:bold;}
.mine-box .mb-arrow{color:var(--muted);}

/* ===== 弹窗 ===== */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;
  display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px);
}
.modal-overlay.show{display:flex;animation:fadeIn .2s;}
.modal-box{
  background:linear-gradient(145deg,#3a2818,#241710);
  border:1px solid rgba(217,168,108,.4);border-radius:16px;
  padding:28px 24px;max-width:90%;width:380px;text-align:center;
}
.modal-box h3{font-size:20px;color:#e9d8b5;margin-bottom:16px;}
.modal-box .result-title{font-size:28px;font-weight:900;margin-bottom:10px;letter-spacing:.15em;}
.modal-box .result-title.win-ghost{color:var(--ghost-fg);}
.modal-box .result-title.win-human{color:#f0e0c0;}
.modal-box .result-reason{color:var(--muted);font-size:14px;margin-bottom:20px;}
.modal-box .btn{padding:12px 30px;margin-top:4px;}
.result-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.result-btns .btn{min-width:110px;}

/* ===== 编辑个人信息弹窗 ===== */
.edit-profile{text-align:left;}
.edit-profile .field{margin-bottom:14px;}
.edit-profile .field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;}
.edit-profile .field input{
  width:100%;padding:10px 12px;background:rgba(0,0,0,.3);border:1px solid var(--card-border);
  border-radius:8px;color:#e9d8b5;font-family:inherit;font-size:15px;
}
.edit-profile .field input:focus{outline:none;border-color:var(--primary);}
.avatar-upload{display:flex;align-items:center;gap:14px;}
.avatar-preview{width:60px;height:60px;border-radius:50%;background:rgba(0,0,0,.3);border:2px solid var(--card-border);display:flex;align-items:center;justify-content:center;font-size:24px;overflow:hidden;flex-shrink:0;}
.avatar-preview img{width:100%;height:100%;object-fit:cover;}
.avatar-upload input[type=file]{flex:1;font-size:12px;color:var(--muted);}
.gender-select{display:flex;gap:10px;}
.gender-opt{flex:1;padding:10px;border:2px solid var(--card-border);border-radius:8px;text-align:center;cursor:pointer;background:rgba(0,0,0,.2);color:#e9d8b5;font-family:inherit;}
.gender-opt.active{border-color:var(--gold);background:rgba(241,196,15,.1);}

/* ===== 更多页面 ===== */
.more-page{padding:20px 16px;max-width:480px;margin:0 auto;text-align:center;}
.more-page .more-card{
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;
  padding:24px;margin-bottom:14px;
}
.more-page .more-card h3{font-size:18px;color:#e9d8b5;margin-bottom:8px;}
.more-page .more-card p{font-size:14px;color:var(--muted);line-height:1.6;}
.more-page .vx-tag{font-size:22px;color:var(--gold);font-weight:bold;margin-top:8px;display:block;letter-spacing:.1em;}

/* ===== 上传残局弹窗 ===== */
.upload-eg{text-align:left;}
.upload-eg .field{margin-bottom:12px;}
.upload-eg .field label{display:block;font-size:13px;color:var(--muted);margin-bottom:4px;}
.upload-eg .field input,.upload-eg .field select{
  width:100%;padding:8px 10px;background:rgba(0,0,0,.3);border:1px solid var(--card-border);
  border-radius:8px;color:#e9d8b5;font-family:inherit;font-size:14px;
}
.mini-board{display:grid;grid-template-columns:repeat(5,36px);grid-template-rows:repeat(5,36px);gap:1px;background:var(--line);padding:1px;border-radius:4px;margin:8px auto;width:fit-content;}
.mini-cell{background:linear-gradient(135deg,#e3b57d,#cf9a5e);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.mini-cell .mini-piece{width:70%;height:70%;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold;}
.mini-cell .mini-piece.h{background:radial-gradient(circle at 35% 30%,#fffaf0,var(--human-bg));color:var(--human-fg);border:1px solid #b89a6a;}
.mini-cell .mini-piece.g{background:radial-gradient(circle at 35% 30%,#4a3f37,var(--ghost-bg));color:var(--ghost-fg);border:1px solid #111;}

/* ===== Toast ===== */
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.85);color:#e9d8b5;padding:10px 24px;border-radius:8px;z-index:300;font-size:14px;border:1px solid var(--card-border);display:none;}
.toast.show{display:block;animation:fadeIn .2s;}

@media(max-width:480px){
  .card-grid{gap:10px;}
  .game-card{padding:18px 10px;}
  .game-card .icon{font-size:36px;}
  .board{--cell:clamp(42px,16vw,58px);}
}