/* =====================================================================
   军训偷吃大挑战 —— 样式表
   布局：整体居中，上方实时数据条 + 中间 880x640 游戏画布 + 下方状态栏
   风格：军营配色（橄榄绿 / 迷彩 / 卡其黄），卡通圆角
   ===================================================================== */
:root{
  --olive-deep:#22301c;      /* 深军绿：页面底色 */
  --olive:#3c5a34;           /* 军绿：面板 */
  --olive-light:#5d8550;     /* 浅军绿：描边 */
  --khaki:#e8d5a3;           /* 卡其：主文字 */
  --khaki-dim:#b9a97e;       /* 暗卡其：次要文字 */
  --gold:#ffd257;            /* 金黄：分数/高亮 */
  --danger:#ff4b3e;          /* 报警红 */
  --safe:#8ee06a;            /* 安全绿 */
  --panel:rgba(16,24,14,.72);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:"HarmonyOS Sans SC","PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  color:var(--khaki);
  background:
    radial-gradient(1200px 620px at 50% -10%, #4a6a3d 0%, #2c4226 45%, #16200f 100%),
    var(--olive-deep);
  min-height:100%;
  display:flex; align-items:center; justify-content:center;
  padding:14px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
/* 页面背景的斜纹迷彩肌理 */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.07;
  background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 9px);
}

/* ---------- 舞台 ---------- */
#stage{
  position:relative;
  width:900px; max-width:100%;
  padding:12px 12px 10px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(60,90,52,.55),rgba(20,30,16,.75));
  border:2px solid rgba(232,213,163,.28);
  box-shadow:0 26px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(3px);
}

/* ---------- 顶部数据条 ---------- */
#hud{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:2px 6px 10px;
  flex-wrap:wrap;
}
.brand{
  display:flex; align-items:center; gap:8px;
  font-weight:800; letter-spacing:2px; font-size:15px;
  color:var(--khaki);
  text-shadow:0 2px 0 rgba(0,0,0,.45);
}
.brand .flag{
  width:20px; height:14px; border-radius:2px; flex:0 0 auto;
  background:linear-gradient(180deg,#e33 0 100%);
  position:relative; box-shadow:0 1px 0 rgba(0,0,0,.4);
}
.brand .flag::after{ /* 五角星简笔 */
  content:"★"; position:absolute; left:3px; top:-3px; font-size:11px; color:#ffe36e;
}
.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{
  display:flex; align-items:center; gap:6px;
  background:var(--panel);
  border:1px solid rgba(232,213,163,.22);
  border-radius:11px;
  padding:5px 11px;
  font-size:13px; line-height:1.15;
  box-shadow:0 4px 12px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
.chip .k{opacity:.7;font-size:11px;}
.chip .v{font-weight:800;font-size:16px;color:var(--gold);font-variant-numeric:tabular-nums;}
.chip.combo .v{color:#ff9f43;}
.chip.danger .v{color:var(--danger);}
.chip.pop{animation:chipPop .38s ease;}
@keyframes chipPop{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}

/* ---------- 画布 ---------- */
#canvasWrap{
  position:relative; width:100%; aspect-ratio:880/640;
  border-radius:16px; overflow:hidden;
  border:2px solid rgba(0,0,0,.45);
  box-shadow:0 12px 30px rgba(0,0,0,.45), inset 0 0 40px rgba(0,0,0,.3);
  background:#4c9e51;
}
#game{display:block;width:100%;height:100%;cursor:crosshair;}

/* ---------- 底部状态栏 ---------- */
#footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 6px 2px; font-size:13px; color:var(--khaki-dim);
  flex-wrap:wrap;
}
.footer-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.key{display:inline-flex;align-items:center;gap:5px;}
.kbd{
  display:inline-block; min-width:20px; text-align:center;
  padding:2px 7px; border-radius:6px;
  background:linear-gradient(180deg,#5b6b4c,#37452c);
  border:1px solid rgba(232,213,163,.42);
  box-shadow:0 2px 0 #20291a;
  font-size:11px; font-weight:800; color:#f4ecd2;
}
.verdict{font-weight:800;letter-spacing:1px;color:var(--safe);}
.server{font-size:12px;color:var(--khaki-dim);}
.server.ok{color:var(--safe);}
.server.bad{color:#ff9a6a;}

/* ---------- 遮罩层（开始 / 结束 / 暂停） ---------- */
.overlay{
  position:absolute; inset:0; z-index:6;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  background:radial-gradient(circle at 50% 35%, rgba(14,22,12,.72), rgba(8,12,7,.94));
  backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .28s ease;
}
.overlay.show{opacity:1;pointer-events:auto;}

.card{
  width:min(560px,94%); max-height:96%;
  overflow:auto;
  border-radius:20px; padding:20px 22px 18px;
  background:linear-gradient(180deg,#3d5a33,#22301c);
  border:2px solid rgba(232,213,163,.32);
  box-shadow:0 26px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.1);
  transform:translateY(14px) scale(.97);
  transition:transform .3s cubic-bezier(.2,.9,.25,1.3);
  text-align:center;
}
.overlay.show .card{transform:translateY(0) scale(1);}
.card.wide{width:min(760px,96%);}
.card h1{margin:2px 0 4px;font-size:26px;letter-spacing:2px;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.4);}
.card h1 small{display:block;font-size:12px;letter-spacing:5px;color:var(--gold);margin-top:5px;font-weight:700;}
.card h2{margin:2px 0 8px;font-size:23px;letter-spacing:1px;}
.card p{margin:8px 0;font-size:13.5px;line-height:1.75;color:#e6dcc0;}
.card .rule{
  text-align:left; background:rgba(0,0,0,.26); border-radius:12px;
  padding:10px 14px; margin:12px 0 6px; font-size:13px; line-height:1.85;
  border:1px dashed rgba(232,213,163,.28);
}
.card .rule b{color:var(--gold);}
.card .rule .em{color:var(--danger);font-weight:800;}
.card .rule .ok{color:var(--safe);font-weight:800;}

/* 开始界面双栏：左规则 / 右排行榜 */
.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:12px;align-items:start;}
.two-col .rule{margin:0;}

/* ---------- 排行榜 ---------- */
.board{
  background:rgba(0,0,0,.3); border-radius:12px; padding:9px 10px 7px;
  border:1px solid rgba(232,213,163,.22); text-align:left;
  display:flex; flex-direction:column; min-height:168px;
}
.board-head{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13px; font-weight:800; color:var(--gold); letter-spacing:1px;
  padding-bottom:6px; border-bottom:1px dashed rgba(232,213,163,.24);
}
.mini{
  cursor:pointer; font-family:inherit; font-size:11px; font-weight:700;
  color:var(--khaki); background:linear-gradient(180deg,#5b6b4c,#37452c);
  border:1px solid rgba(232,213,163,.35); border-radius:7px; padding:3px 9px;
}
.mini:active{transform:translateY(1px);}
.board-list{
  list-style:none; margin:6px 0 0; padding:0; flex:1;
  max-height:150px; overflow-y:auto; font-size:12.5px;
}
.board-list li{
  display:flex; align-items:center; gap:7px;
  padding:3.5px 2px; border-bottom:1px solid rgba(255,255,255,.05);
}
.board-list li .rk{
  flex:0 0 20px; text-align:center; font-weight:800; color:var(--khaki-dim);
  font-variant-numeric:tabular-nums;
}
.board-list li.top1 .rk{color:#ffd257;}
.board-list li.top2 .rk{color:#dfe6ea;}
.board-list li.top3 .rk{color:#e8a366;}
.board-list li .nm{
  flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:#f2e9cd; font-weight:700;
}
.board-list li .dt{flex:0 0 auto;color:var(--khaki-dim);font-size:11px;}
.board-list li .sc{
  flex:0 0 auto; font-weight:800; color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.board-list li.me{background:rgba(255,210,87,.12);border-radius:6px;}
.board-empty{justify-content:center;color:var(--khaki-dim);font-size:12px;padding:14px 0;}
.board-stats{
  margin-top:6px; padding-top:6px; font-size:11px; color:var(--khaki-dim);
  border-top:1px dashed rgba(232,213,163,.24); text-align:center;
}

/* ---------- 昵称输入 ---------- */
.name-row{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:14px 0 2px; flex-wrap:wrap; font-size:13px;
}
.name-row label{font-weight:800;color:var(--khaki);letter-spacing:1px;}
.name-row input{
  font-family:inherit; font-size:14px; font-weight:700; color:#2a3a1c;
  background:#f3ead1; border:2px solid rgba(0,0,0,.35); border-radius:10px;
  padding:8px 12px; width:200px; outline:none; text-align:center;
}
.name-row input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,210,87,.25);}
.best-tag{
  font-size:12px; font-weight:800; color:var(--gold);
  background:rgba(0,0,0,.3); border:1px solid rgba(232,213,163,.28);
  border-radius:999px; padding:4px 11px;
}

/* ---------- 成绩上报 ---------- */
.submit-row{margin:12px 0 2px;}
.submit-msg{font-size:11.5px;color:var(--khaki-dim);margin-top:7px;line-height:1.6;}
.submit-msg.ok{color:var(--safe);font-weight:800;}
.submit-msg.bad{color:#ff9a6a;font-weight:800;}

/* 成绩表格 */
.scoreGrid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin:14px 0 6px;
}
.scoreGrid div{
  background:rgba(0,0,0,.28); border-radius:12px; padding:9px 6px;
  border:1px solid rgba(232,213,163,.18);
}
.scoreGrid .k{display:block;font-size:11px;color:var(--khaki-dim);letter-spacing:1px;}
.scoreGrid .v{display:block;font-size:21px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;}
.scoreGrid .v.bad{color:var(--danger);}
.scoreGrid .v.good{color:var(--safe);}

/* 结算评语 */
.rank{
  font-size:15px; font-weight:800; letter-spacing:1px; margin:10px 0 2px; color:#fff;
  background:linear-gradient(90deg,transparent,rgba(255,210,87,.22),transparent);
  padding:6px 0; border-radius:8px;
}
.newbest{color:var(--gold);font-size:12.5px;font-weight:800;letter-spacing:1px;}

/* 按钮 */
.btn{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  margin:12px 6px 2px; padding:12px 30px;
  font-family:inherit; font-size:16px; font-weight:800; letter-spacing:3px;
  color:#2a3a1c; border-radius:13px; border:none;
  background:linear-gradient(180deg,#ffe08a,#f2b93c);
  box-shadow:0 6px 0 #a97c14, 0 12px 24px rgba(0,0,0,.4);
  transition:transform .1s ease, box-shadow .1s ease, filter .2s ease;
}
.btn:hover{filter:brightness(1.06);}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #a97c14,0 6px 12px rgba(0,0,0,.4);}
.btn[disabled]{filter:grayscale(.65) brightness(.85);cursor:not-allowed;box-shadow:0 4px 0 #6b5a2a;}
.btn.small{font-size:13px;letter-spacing:1.5px;padding:10px 20px;}
.btn.ghost{
  background:linear-gradient(180deg,#5b6b4c,#37452c); color:var(--khaki);
  box-shadow:0 6px 0 #1d2617, 0 12px 24px rgba(0,0,0,.35); font-size:14px; padding:11px 22px;
}
.btn.ghost:active{box-shadow:0 2px 0 #1d2617,0 6px 12px rgba(0,0,0,.35);}

.hint{font-size:12px;color:var(--khaki-dim);margin-top:10px;letter-spacing:.5px;}
.blink{animation:blink 1.1s steps(2,end) infinite;}
@keyframes blink{50%{opacity:.35}}

/* 滚动条（排行榜） */
.board-list::-webkit-scrollbar{width:6px;}
.board-list::-webkit-scrollbar-thumb{background:rgba(232,213,163,.3);border-radius:3px;}

/* 小屏幕适配 */
@media (max-width:720px){
  #stage{padding:8px;border-radius:16px;}
  .brand{font-size:13px;letter-spacing:1px;}
  .chip{padding:4px 8px;font-size:12px;}
  .chip .v{font-size:14px;}
  .card h1{font-size:21px;}
  .two-col{grid-template-columns:1fr;}
  .board{min-height:0;}
  .board-list{max-height:120px;}
  .name-row input{width:150px;}
  #footer{padding-top:8px;}
}