/* 色环 HueRing — 独立小游戏样式（与策略中心样式互不影响） */
:root{
  --c0:#ff3b6b; --c1:#36d1ff; --c2:#ffd23b; --c3:#5bff9b;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{width:100%;height:100%;overflow:hidden;background:#070912;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:#eaf0ff; user-select:none; touch-action:none;
}
#game{display:block;position:fixed;inset:0;}
#backHome{
  position:fixed; top:14px; left:14px; z-index:10;
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; border-radius:999px;
  font-size:13px; font-weight:600; letter-spacing:.02em;
  color:#cfe0ff; text-decoration:none;
  background:rgba(20,28,52,0.55); border:1px solid rgba(150,180,255,0.25);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .15s, transform .15s;
}
#backHome:hover{ background:rgba(40,55,95,0.75); transform:translateY(-1px); }
#backHome:active{ transform:translateY(0); }

/* ---------- 游戏结束遮罩 + 排行榜 ---------- */
.gv{
  position:fixed; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  background:rgba(5,7,16,0.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  padding:16px;
}
.gv[hidden]{ display:none; }
.gv-card{
  width:min(92vw,360px); max-height:86vh; overflow:auto;
  background:linear-gradient(180deg,#101633,#0a0e22);
  border:1px solid rgba(120,160,255,0.22); border-radius:18px;
  box-shadow:0 18px 60px rgba(0,0,0,0.55);
  padding:22px 20px; text-align:center;
}
.gv-title{ font-size:24px; font-weight:800; letter-spacing:.04em; color:#fff; }
.gv-score{ margin-top:6px; font-size:15px; color:#aab8e6; }
.gv-score b{ color:#9be8ff; font-size:20px; }
.gv-stats{
  margin-top:4px; font-size:13px; color:#aab8e6;
  display:flex; gap:12px; justify-content:center; align-items:center;
}
.gv-stats b{ color:#9be8ff; }
.gv-record{ color:#ffd23b; font-weight:700; }
.gv-record[hidden]{ display:none; }
.gv-form{ display:flex; gap:8px; margin:16px 0 6px; }
.gv-form input{
  flex:1; min-width:0; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(150,180,255,0.28);
  color:#eaf0ff; font-size:15px; outline:none;
}
.gv-form input:focus{ border-color:rgba(120,200,255,0.6); }
.gv-form button{
  padding:10px 16px; border-radius:10px; border:none; cursor:pointer;
  font-size:15px; font-weight:700; color:#06210f;
  background:linear-gradient(135deg,#5bff9b,#37d1a0);
}
.gv-form button:disabled{ opacity:.5; cursor:default; }
.gv-msg{ min-height:18px; font-size:13px; color:#ffd23b; }
.gv-board-title{ margin:10px 0 8px; font-size:13px; color:#7e8cc0; letter-spacing:.1em; }
.gv-board{ text-align:left; }
.gv-row{
  display:flex; align-items:center; gap:10px;
  padding:7px 10px; border-radius:9px; font-size:14px;
}
.gv-row + .gv-row{ margin-top:3px; }
.gv-row:nth-child(odd){ background:rgba(255,255,255,0.035); }
.gv-row.me{ background:rgba(91,255,155,0.16); border:1px solid rgba(91,255,155,0.4); }
.gv-rank{ width:30px; color:#8a98c8; font-weight:700; text-align:right; }
.gv-row:nth-child(1) .gv-rank{ color:#ffd23b; }
.gv-row:nth-child(2) .gv-rank{ color:#cfe0ff; }
.gv-row:nth-child(3) .gv-rank{ color:#ff9b6f; }
.gv-name{ flex:1; min-width:0; color:#eaf0ff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gv-pts{ color:#9be8ff; font-weight:700; font-variant-numeric:tabular-nums; }
.gv-empty{ color:#7e8cc0; font-size:13px; padding:8px 4px; }
.gv-again{
  margin-top:16px; width:100%; padding:12px; border-radius:12px; border:none; cursor:pointer;
  font-size:15px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#36d1ff,#2f7bff);
}