:root{
  --khaki:#c9bd8e; --gold:#ffd977; --red:#b8321f; --ink:#1d2116;
  --olive:#6f7a4a; --paper:#fdf6dd; --sense:#bcd2e0;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;background:#11140c;overflow:hidden;}
body{display:flex;align-items:center;justify-content:center;
  font-family:"Songti SC","STSong","SimSun","Noto Serif SC",serif;
  color:var(--ink);-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;}
#viewport{position:relative;width:min(100vw,166.66vh);aspect-ratio:5/3;
  overflow:hidden;background:#77804a;--u:8px;}
#scene{position:absolute;inset:0;width:100%;height:100%;z-index:1;}

#heat{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:overlay;opacity:.55;
  background:linear-gradient(180deg,rgba(255,240,180,.7),rgba(255,225,150,.12) 45%,rgba(255,245,200,.4));
  animation:haze 5s ease-in-out infinite;}
@keyframes haze{0%,100%{transform:translateY(0) scaleY(1);}50%{transform:translateY(-5px) scaleY(1.03);}}

#flash{position:absolute;inset:0;z-index:9;background:#fff;opacity:0;pointer-events:none;}
#shake{position:absolute;inset:0;z-index:0;}

/* ---------- 状态 ---------- */
#stance{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--u)*1.6);z-index:6;
  font-size:calc(var(--u)*1.6);letter-spacing:.4em;text-indent:.4em;
  padding:calc(var(--u)*.35) calc(var(--u)*1.8);border-radius:99px;
  background:rgba(29,33,22,.62);color:#e9e2c2;border:1px solid rgba(255,255,255,.18);
  transition:.25s;}
#stance.rest{background:rgba(120,150,90,.85);color:#1d2116;border-color:#d8e8b8;}

/* ---------- 口令（上方） ---------- */
#orderWrap{position:absolute;left:0;right:0;top:calc(var(--u)*5.6);z-index:7;
  display:flex;justify-content:center;pointer-events:none;}
#order{display:flex;align-items:center;gap:calc(var(--u)*1.2);
  background:linear-gradient(180deg,#f7e07a,#e8c84a);
  border:3px solid #8a6a12;border-radius:5px;
  padding:calc(var(--u)*.8) calc(var(--u)*2.6);
  box-shadow:0 calc(var(--u)*.8) calc(var(--u)*2.6) rgba(0,0,0,.45);
  transform:scale(.5) translateY(calc(var(--u)*-2));opacity:0;
  transition:transform .13s cubic-bezier(.2,1.8,.4,1),opacity .13s;}
#order.on{transform:scale(1);opacity:1;}
#order .tag{font-size:calc(var(--u)*1.15);letter-spacing:.2em;color:#6a4f08;
  border:1px solid #8a6a12;border-radius:3px;padding:0 calc(var(--u)*.5);}
#orderT{font-size:calc(var(--u)*3.6);font-weight:700;color:#2b2005;letter-spacing:.12em;
  white-space:nowrap;}
/* 幻听：同样的横幅，但在抖、且没有哨声 */
#order.fake{animation:fakeShake .12s linear infinite;
  background:linear-gradient(180deg,#f2e2a6,#dfc878);opacity:.72;filter:blur(.6px);}
@keyframes fakeShake{
  0%{transform:scale(1) translate(0,0);}25%{transform:scale(1) translate(-1.5px,1px);}
  50%{transform:scale(1) translate(1px,-1px);}75%{transform:scale(1) translate(-1px,-1.5px);}
  100%{transform:scale(1) translate(0,0);}}

/* ---------- 身体感觉（下方） ---------- */
#temptWrap{position:absolute;left:0;right:0;bottom:calc(var(--u)*9);z-index:7;
  display:flex;justify-content:center;pointer-events:none;}
#tempt{background:rgba(188,210,224,.92);border:2px dashed #6a8296;border-radius:20px;
  padding:calc(var(--u)*.7) calc(var(--u)*2.4);color:#28404f;
  font-size:calc(var(--u)*1.9);letter-spacing:.1em;white-space:nowrap;
  transform:scale(.7);opacity:0;transition:transform .2s,opacity .2s;
  box-shadow:0 calc(var(--u)*.6) calc(var(--u)*2) rgba(0,0,0,.25);}
#tempt.on{transform:scale(1);opacity:1;}
#tempt.hot{border-style:solid;border-color:#c8543a;color:#7a2410;
  background:rgba(248,214,200,.95);animation:pulseT .5s ease-in-out infinite;}
@keyframes pulseT{0%,100%{box-shadow:0 0 0 rgba(200,84,58,0);}50%{box-shadow:0 0 calc(var(--u)*2.6) rgba(200,84,58,.7);}}

/* ---------- HUD ---------- */
#hud{position:absolute;z-index:6;top:calc(var(--u)*2.2);left:calc(var(--u)*2.6);
  display:flex;flex-direction:column;gap:calc(var(--u)*.7);
  font-size:calc(var(--u)*1.5);letter-spacing:.06em;color:#f4edcf;
  text-shadow:0 calc(var(--u)*.3) calc(var(--u)*.8) rgba(0,0,0,.8);}
#hud .row{display:flex;align-items:center;gap:calc(var(--u)*.9);}
#hud b{color:var(--gold);font-weight:700;font-size:calc(var(--u)*2.1);min-width:calc(var(--u)*5);}
#hud .unit{font-size:calc(var(--u)*1.2);opacity:.8;}
.track{width:calc(var(--u)*16);height:calc(var(--u)*1.1);background:rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.22);border-radius:99px;overflow:hidden;}
.fill{height:100%;width:100%;border-radius:99px;transition:width .12s linear,background .3s;}
#stamFill{background:linear-gradient(90deg,#7fb84a,#cbe97a);}

/* ---------- 按键 ---------- */
#keys{position:absolute;left:0;right:0;bottom:calc(var(--u)*1.8);z-index:7;
  display:flex;justify-content:center;}
.kbtn{font-family:inherit;display:flex;flex-direction:column;align-items:center;
  gap:calc(var(--u)*.3);background:rgba(29,33,22,.75);
  border:2px solid rgba(201,189,142,.6);border-radius:6px;color:#efe7ca;
  padding:calc(var(--u)*.8) calc(var(--u)*5);cursor:pointer;transition:.12s;}
.kbtn .k{font-size:calc(var(--u)*2.3);line-height:1;color:var(--gold);letter-spacing:.1em;}
.kbtn .t{font-size:calc(var(--u)*1.2);letter-spacing:.14em;opacity:.85;}
.kbtn:hover{background:rgba(60,70,40,.92);border-color:var(--gold);}
.kbtn.hit{background:rgba(255,217,119,.95);color:#1d2116;border-color:#fff;}
.kbtn.hit .k{color:#7a3a12;}
.kbtn.bad{background:rgba(184,50,31,.92);border-color:#ff9a80;}
.kbtn.bad .k{color:#ffd9d0;}

#hint{position:absolute;left:0;right:0;bottom:calc(var(--u)*7.6);z-index:6;text-align:center;
  font-size:calc(var(--u)*1.3);color:rgba(244,237,207,.72);letter-spacing:.08em;
  text-shadow:0 calc(var(--u)*.3) calc(var(--u)*.8) rgba(0,0,0,.8);}
#hint em{color:var(--gold);font-style:normal;}

/* ---------- 汗滴 ---------- */
#sweat{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;}
.drop{position:absolute;width:calc(var(--u)*.55);height:calc(var(--u)*1.2);
  background:rgba(226,244,255,.85);
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  animation:fall 1.5s linear forwards;}
@keyframes fall{from{transform:translateY(0);opacity:.95;}to{transform:translateY(calc(var(--u)*8));opacity:0;}}

/* ---------- 覆盖层 ---------- */
.veil{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  background:radial-gradient(ellipse at 50% 42%,#2a3018 0%,#11140c 72%);
  padding:calc(var(--u)*3);gap:calc(var(--u)*1.1);overflow:auto;}
.veil.hidden{display:none;}
.veil h1{font-size:calc(var(--u)*5.8);letter-spacing:.3em;text-indent:.3em;color:var(--khaki);}
.veil h1.small{font-size:calc(var(--u)*3.4);letter-spacing:.36em;}
.veil .sub{font-size:calc(var(--u)*1.6);color:#9aa172;letter-spacing:.42em;}
.veil .rules{font-size:calc(var(--u)*1.45);line-height:2.05;color:#b9bd97;letter-spacing:.04em;
  max-width:calc(var(--u)*74);text-align:left;
  border-top:1px solid rgba(201,189,142,.25);border-bottom:1px solid rgba(201,189,142,.25);
  padding:calc(var(--u)*1.3) 0;margin:calc(var(--u)*.4) 0;}
.veil .rules em{color:var(--gold);font-style:normal;}
.veil .rules s{color:var(--red);text-decoration:none;font-weight:700;}
.veil .rules kbd{display:inline-block;font-family:inherit;color:var(--gold);
  border:1px solid rgba(255,217,119,.45);border-radius:3px;
  padding:0 calc(var(--u)*.5);font-size:calc(var(--u)*1.3);margin:0 calc(var(--u)*.2);}

.field{display:flex;align-items:center;gap:calc(var(--u)*1);font-size:calc(var(--u)*1.5);
  color:#b9bd97;letter-spacing:.1em;}
.field input{font-family:inherit;font-size:calc(var(--u)*1.6);color:var(--paper);
  background:rgba(0,0,0,.4);border:1.5px solid rgba(201,189,142,.5);border-radius:4px;
  padding:calc(var(--u)*.55) calc(var(--u)*1.2);width:calc(var(--u)*22);text-align:center;
  letter-spacing:.1em;outline:none;}
.field input:focus{border-color:var(--gold);}

.modes{display:flex;gap:calc(var(--u)*1.6);flex-wrap:wrap;justify-content:center;}
.btn{font-family:inherit;font-size:calc(var(--u)*1.75);letter-spacing:.26em;text-indent:.26em;
  color:var(--khaki);background:transparent;border:1.5px solid rgba(201,189,142,.6);
  padding:calc(var(--u)*.9) calc(var(--u)*2.6);cursor:pointer;transition:.2s;border-radius:3px;
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.25);}
.btn small{font-size:calc(var(--u)*1.05);letter-spacing:.08em;text-indent:0;opacity:.7;}
.btn:hover{background:rgba(201,189,142,.16);border-color:var(--gold);color:var(--gold);}
.btn.primary{border-color:rgba(255,217,119,.75);color:var(--gold);}
.btn.primary:hover{background:rgba(255,217,119,.18);}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.btn:disabled:hover{background:transparent;border-color:rgba(201,189,142,.6);color:var(--khaki);}
.link{font-family:inherit;font-size:calc(var(--u)*1.35);color:#9aa172;background:none;
  border:none;cursor:pointer;letter-spacing:.1em;
  text-decoration:underline;text-underline-offset:3px;}
.link:hover{color:var(--gold);}
.foot{display:flex;align-items:center;gap:calc(var(--u)*2);font-size:calc(var(--u)*1.3);
  color:#7f8661;letter-spacing:.06em;margin-top:calc(var(--u)*.4);}
#netState.ok{color:#9fd06a;} #netState.off{color:#c98a6a;}

.boardStat{font-size:calc(var(--u)*1.4);color:#9aa172;letter-spacing:.08em;}
.boardWrap{max-height:calc(var(--u)*52);overflow:auto;width:calc(var(--u)*80);}
table.board{width:100%;border-collapse:collapse;font-size:calc(var(--u)*1.4);color:#d5d2b4;}
table.board th{font-weight:400;font-size:calc(var(--u)*1.25);color:#8f956f;
  letter-spacing:.1em;padding:calc(var(--u)*.5) calc(var(--u)*.8);
  border-bottom:1px solid rgba(201,189,142,.3);position:sticky;top:0;background:#1a1e12;}
table.board td{padding:calc(var(--u)*.45) calc(var(--u)*.8);
  border-bottom:1px solid rgba(201,189,142,.12);}
table.board tr.me td{color:var(--gold);font-weight:700;}
table.board td.n{color:#8f956f;}
table.board td.s{color:var(--gold);font-weight:700;}

#card h2{font-size:calc(var(--u)*4.6);letter-spacing:.28em;text-indent:.28em;color:var(--gold);}
#card .medal{font-size:calc(var(--u)*1.55);color:#b9bd97;letter-spacing:.1em;}
#card .stats{display:flex;gap:calc(var(--u)*3);margin:calc(var(--u)*.8) 0;
  font-size:calc(var(--u)*1.4);color:#b9bd97;}
#card .stats b{display:block;color:var(--khaki);font-size:calc(var(--u)*2.8);
  font-weight:700;line-height:1.25;}
#card .line{font-size:calc(var(--u)*1.5);color:#8f956f;letter-spacing:.08em;line-height:1.85;
  max-width:calc(var(--u)*70);}
#card .line.rank{color:var(--gold);}

@media (max-aspect-ratio:5/3){
  #hint{display:none;}
  .kbtn{padding:calc(var(--u)*.7) calc(var(--u)*3.4);}
}