/* 鐢靛奖绾ч粦鑹茶阿骞曟晥鏋滆儗鏅?+ 绠€绾︾骞诲瓧浣?*/

/* 全局设置 */
* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
*::selection {
  background: transparent;
}
*::-moz-selection {
  background: transparent;
}
html, body {
  height: 100%;
}
body {
  margin: 0;
  background: var(--bg-gradient);
  color: #eaeaea;
  font-family: 'Oxanium', 'Orbitron', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  /* 移动端 Safari 对 body:fixed 背景绘制有兼容性问题，改用普通流式布局 */
}

/* 将深色背景应用到根元素，避免移动端出现白底 */
html { background: var(--bg-gradient); color-scheme: dark; }

/* 鑸炲彴灞呬腑甯冨眬 */
.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  /* 璋㈠箷姘涘洿鐨勬殫瑙掍笌寰急绮掑瓙 */
  background-image:
    radial-gradient(120vw 50vh at 50% 120%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 65%),
    radial-gradient(80vw 35vh at 50% -10%, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 65%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600"><g fill="rgba(255,255,255,0.05)"><circle cx="20" cy="30" r="1"/><circle cx="120" cy="90" r="1"/><circle cx="300" cy="40" r="1"/><circle cx="500" cy="200" r="1"/><circle cx="700" cy="100" r="1"/></g></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* 鏍囬鏂囧瓧锛氱畝绾︾骞?*/
.hero {
  margin: 0;
  /* 浣跨敤瀹嬪窘瀹楃槮閲戜綋鍙婂父瑙佸埆鍚嶅洖閫€ */
  font-family: 'HYSentyShoujin', 'Senty Shoujin SC', 'FZShouJinShu-S10S', 'FZShouJinShu', 'Shou Jin Ti', 'Shoujin', 'HYShoujin', 'SentyShoujin', 'Songti SC', 'Noto Serif SC', 'SimSun', serif;
  font-weight: 300; /* 鏇寸槮 */
  line-height: 1.2;
  text-align: center;
  /* 瀛椾綋澶у皬鍒濆瀛楀彿锛屽埄浜庢祴閲忕缉鏀?*/
  font-size: clamp(28px, 6vw, 96px);
  letter-spacing: 0.02em; /* 鏀剁獎瀛楄窛锛屾洿骞插噣 */
  /* 缁嗚吇鍙戝厜 + 鐢靛奖鎰熷眰娆?*/
  color: #f2f2f2;
  text-shadow:
    0 0 4px rgba(255,255,255,0.06),
    0 0 10px rgba(128,180,255,0.08);
  /* 杞诲井鐨勪笂涓嬫笎鍙橈紝鐢ㄤ簬鎻愬崌灞傛 */
  background: linear-gradient(180deg, rgba(242,242,242,1) 0%, rgba(220,228,245,1) 60%, rgba(210,210,210,1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 杞粨鎻忚竟锛屼究浜庘€滃彉鐦︹€濇椂瑙嗚鏇存竻鏅?*/
  -webkit-text-stroke-color: rgba(200,220,255,0.18);
  -webkit-text-stroke-width: 0.4px;
  will-change: opacity, transform, letter-spacing;
  /* 添加过渡动画 */
  transition: transform 300ms ease-out;
  cursor: pointer;
}

/* 鼠标悬停时放大1% - 只在未登录状态下生效，且优先级更高 */
.stage:not(.logged-in) .hero:hover {
  transform: scale(1.01) !important;
  animation-play-state: paused; /* 暂停动画而不是移除动画 */
}

/* 涓棿鍒嗛殧鐨勭畝绾︾鍙凤紝閬垮厤鎷ユ尋 */
.divider {
  display: inline-block;
  width: 0.6em;
  height: 1px;
  margin: 0 0.35em;
  background: linear-gradient(90deg, rgba(110,160,255,0), rgba(110,160,255,0.5), rgba(110,160,255,0));
  vertical-align: middle;
  /* 防止光束跟随文字缩放 - 使用固定定位和反向缩放 */
  transform-origin: center;
  will-change: transform;
}

/* 当父元素悬停时，光束进行反向缩放以保持原始大小 */
.hero:hover .divider {
  transform: scale(0.9901) !important; /* 1/1.01 ≈ 0.9901 */
}

/* 杞诲井鍏ュ満鍔ㄧ敾锛氱數褰辫阿骞曟劅 */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.98);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

.hero {
  animation: fadeUp 900ms ease-out both;
}

/* 鐧诲綍鎴愬姛鏃讹紝涓绘爣棰樺湪 2.5s 鍐呮笎闅愭秷澶?*/
@keyframes fadeAwayHero {
  0% {
    opacity: 1;
    filter: blur(0);
    font-weight: 300;
    letter-spacing: 0.02em;
    -webkit-text-stroke-width: 0.4px;
    transform: translate3d(0, 0, 0) scale(1) scaleX(1);
  }
  100% {
    opacity: 0;
    filter: blur(1.6px);
    font-weight: 200; /* 瀛椾綋鍙樼粏 */
    letter-spacing: 0.12em; /* 杞诲井鍔犲瀛楄窛锛岃瑙夋洿鐦?*/
    -webkit-text-stroke-width: 0.1px; /* 杞粨鏇寸粏 */
    transform: translate3d(0, -2px, 0) scale(0.996) scaleX(0.98); /* 姘村钩杞荤缉鏇存樉鈥滅槮鈥?*/
  }
}
.stage.logged-in .hero {
  animation: fadeAwayHero 1s ease-out forwards;
}

/* 閫傞厤鏆楄壊璁惧妯″紡 */
@media (prefers-color-scheme: dark) {
  body { color: #eaeaea; }
}

/*=============================
  鐐瑰嚮鍚庡脊鍑鸿处鍙?瀵嗙爜鐨勪袱鏉￠摱鑹叉í绾?  鍘熸枃瀛楀湪鍚庢柟杞诲井铏氬寲
==============================*/
.stage.overlay-active {
  position: relative;
}

/* Overlay锛氱櫥褰曡緭鍏ラ潰鏉?*/
.login-overlay {
  position: fixed;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  display: block;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.stage.overlay-active .login-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* 鐧诲綍鎴愬姛鍚庨殣钘忚緭鍏ラ潰鏉?*/
.stage.logged-in .login-overlay {
  opacity: 0;
  pointer-events: none;
  display: none;
}

.input-bars {
  position: relative;
  display: grid;
  gap: 16px;
  width: min(280px, 42vw);
}

/* 閾剁嚎杈撳叆鎺т欢锛氶€忔槑鑳屾櫙锛屾枃瀛楀井鍏?*/
.line-field {
  display: grid;
  align-items: center;
  grid-template-rows: auto auto;
}
.line-input {
  appearance: none;
  border: none;
  outline: none;
  background: transparent;
  color: #eaeaea;
  font-family: 'Oxanium', 'Orbitron', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 8px 0 0;
  text-shadow:
    0 0 6px rgba(255,255,255,0.08),
    0 0 14px rgba(128,180,255,0.1);
}
.line-input::placeholder {
  color: #b7c0d4;
  opacity: 0.9;
}

/* 鐧诲綍鍙嶉鏂囨 */
.login-feedback {
  margin-top: 8px;
  min-height: 20px;
  font-size: 13px;
  color: #b7c0d4;
  text-align: center;
  text-shadow:
    0 0 6px rgba(255,255,255,0.08),
    0 0 12px rgba(128,180,255,0.08);
}

/* 鍙充笂瑙掔煝閲忓浘鏍囨寜閽?*/
.user-icon {
  position: fixed;
  top: 6px; /* 64px 高度的中心在 38px，水平对齐返回按钮与喇叭 */
  right: 18px;
  width: 64px; /* 灏哄鍔犲€?*/
  height: 64px; /* 灏哄鍔犲€?*/
  background: transparent; /* 绉婚櫎鏂瑰舰钃濇鑳屾櫙 */
  border: none; /* 绉婚櫎钃濊壊杈规 */
  border-radius: 50%; /* 浣跨偣鍑诲尯鍩熸洿璐村悎鍦嗙幆 */
  box-shadow: none; /* 绉婚櫎澶栭儴闃村奖 */
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2147483647; /* 鏈€楂樺眰绾э紝纭繚鍦ㄦ渶涓婃柟 */
  opacity: 0; /* 默认透明度为0 */
  transition: opacity 500ms ease, transform 200ms ease; /* 添加透明度和变换过渡动画 */
}

/* 右上角光环悬停放大效果 */
.user-icon:hover {
  transform: scale(1.1);
}
.user-icon { display: none; }
/* 淇涓哄厔寮熼€夋嫨鍣細鎸夐挳涓嶅湪 .stage 鍐呴儴鏃朵篃鑳芥樉绀?*/
.stage.logged-in ~ .user-icon { display: grid; }
.user-icon .icon-slot {
  width: 44px; /* 灏哄鍔犲€?*/
  height: 44px; /* 灏哄鍔犲€?*/
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  overflow: visible; /* 閬垮厤鍏夋檿琚鍓?*/
  filter: drop-shadow(0 0 3px rgba(160,180,220,0.35)); /* 寰急鍏夋檿 */
}

/* 浠呰SVG鍐呯殑绮掑瓙缁勬棆杞笌闂儊锛堝厹搴曪級锛岄伩鍏嶆暣鍦堜竴璧疯浆鍔?*/
.user-icon .icon-slot svg { overflow: visible; }
.user-icon .icon-slot svg #particles {
  transform-box: view-box;
  transform-origin: 12px 12px; /* 鍩轰簬 viewBox 涓績 */
  animation: orbit 10s linear infinite;
  will-change: transform;
}
.user-icon .icon-slot svg #particles > g:nth-child(2) { animation-duration: 7s; }
.user-icon .icon-slot svg #particles > g:nth-child(3) { animation-duration: 8.5s; animation-direction: reverse; }
.user-icon .icon-slot svg #particles circle {
  animation: twinkle 3s ease-in-out infinite;
}
.user-icon .icon-slot svg #particles > g:nth-child(2) circle { animation-duration: 2.4s; }
.user-icon .icon-slot svg #particles > g:nth-child(3) circle { animation-duration: 2.8s; }
@keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes twinkle { 0%,100% { opacity: 0.06; } 50% { opacity: 0.18; } }

/* 顶部喇叭按钮（背景音乐开关） */
.sound-toggle {
  position: fixed;
  top: 18px;
  left: 50%; /* 顶部水平居中 */
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2147483647;
  border-radius: 50%;
  color: var(--color-text);
  background: transparent; /* 背景透明 */
  border: 1px solid rgba(207,226,255,0.9);
  backdrop-filter: blur(2px);
  transition: opacity 200ms ease, transform 200ms ease, background-color 200ms ease, border-color 200ms ease;
  transform: translateX(-50%);
}
/* 悬停时仿照二级界面 MIDI 椭圆圈的发光 */
/* 悬停时仿照二级界面 MIDI 椭圆圈的发光 */
.sound-toggle:hover {
  transform: translateX(-50%) scale(1.06);
  border-color: rgba(207,226,255,0.9);
  box-shadow: 0 0 12px rgba(224, 230, 246, 0.35);
}
  border-color: rgba(224, 230, 246, 0.6);
  box-shadow: 0 0 12px rgba(224, 230, 246, 0.35);
}
.sound-toggle[aria-pressed="true"] {
  background: transparent; /* 静音态保持透明背景 */
  border-color: rgba(207,226,255,0.9);
}
.sound-toggle svg {
  width: 20px;
  height: 20px;
}

/* 涓汉淇℃伅缂栬緫琛ㄥ崟 */
.profile-form {
  display: grid;
  gap: 12px;
}
.field { display: grid; gap: 6px; }
.field label { color: #b7c0d4; font-size: 13px; }
.field input {
  appearance: none;
  border: 1px solid rgba(120,160,255,0.18);
  border-radius: 8px;
  background: rgba(20,30,50,0.25);
  color: #eaeaea;
  font-family: var(--font-sci);
  font-size: 14px;
  padding: 8px 10px;
}
.field input[readonly] { opacity: 0.85; }
.form-actions { display: flex; gap: 10px; }
.profile-save {
  padding: 8px 12px;
  background: rgba(20,30,50,0.65);
  border: 1px solid rgba(120,160,255,0.18);
  border-radius: 8px;
  color: #eaeaea;
  cursor: pointer;
}
.form-feedback { min-height: 18px; font-size: 13px; color: #b7c0d4; }

/* 鐢ㄦ埛淇℃伅闈㈡澘 */
.user-panel {
  position: fixed;
  top: 60px;
  right: 18px;
  width: 120px;
  background: linear-gradient(180deg, rgba(8,8,10,0.92), rgba(6,6,8,0.92));
  border: 1px solid rgba(120,160,255,0.15);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  color: #eaeaea;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.user-panel.visible {
  opacity: 1;
  pointer-events: auto;
}
.panel-body { 
  padding: 12px; 
  text-align: center;
}
.panel-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
/* 左下角信息显示区域 */
.info-display {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 2147483647; /* 设置为最高层级，确保不被遮挡 */
  pointer-events: none;
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: 'STKaiti', 'KaiTi', '楷体', serif; /* 瘦金体字体 */
  font-size: 14px;
  color: #eaeaea;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.info-item {
  display: block;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.info-display .info-item:not(#userId) {
  display: none !important;
}

.info-item:empty {
   display: none;
 }
 
 .panel-close {
   padding: 8px 12px;
   background: rgba(20,30,50,0.65);
   border: 1px solid rgba(120,160,255,0.18);
   border-radius: 8px;
   color: #eaeaea;
   cursor: pointer;
 }

/* 鏂囧瓧鎶樺彔涓轰竴鏉＄嚎骞舵贰鍑?*/
@keyframes collapseToLine {
  0% {
    transform: translate3d(0, 0, 0) scaleY(1);
    opacity: 1;
    letter-spacing: 0.06em;
    filter: blur(0);
  }
  50% {
    transform: translate3d(0, 0, 0) scaleY(0.06);
    opacity: 1;
    filter: blur(0.5px);
  }
  75% {
    transform: translate3d(0, 0, 0) scaleY(0.03);
    opacity: 0.9;
    letter-spacing: 0.02em;
  }
  100% {
    transform: translate3d(0, 0, 0) scaleY(0.01);
    opacity: 0;
    letter-spacing: 0em;
    filter: blur(0.4px);
  }
}

/* 鍘熸枃瀛楀湪 overlay 涔嬩笅杞诲井铏氬寲锛屼繚鎸佸彲瑙?*/
.stage.overlay-active .hero {
  filter: blur(2.2px);
  opacity: 0.85;
  transition: filter 160ms ease, opacity 160ms ease;
}

.stage.overlay-active .hero { /* 鐢变笂闈㈢殑瑙勫垯绠＄悊 */ }
/* 鐧诲綍鍚庢樉绀虹殑鍗佷簩鏂圭幆鍍呮暣 */
.ring-grid {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  /* 优化1080P下的铺满效果：确保卡牌不重叠 */
  padding: 6vh 3vw;
  display: none;
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* 6列2行布局，防止溢出 */
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: center;
  justify-items: center;
  pointer-events: auto; /* 鏀寔鐐瑰嚮鍗＄墝 */
  z-index: 9999; /* 涓庡彸涓婅鍦嗙幆涓€鑷寸殑椤跺眰 */
  opacity: 1; /* 鏄惧紡涓嶉€忔槑锛岄伩鍏嶇户鎵垮鑷翠笉鍙 */
  visibility: visible;
  /* 鑳屾櫙鍘婚櫎锛岀‘淇濆彧鏄剧ず鏂圭幆 */
  transition: transform 500ms ease;
  transform-origin: 50% 50%;
  will-change: transform;
  overflow: hidden; /* 防止内容溢出导致重叠 */
}
.ring-grid.visible { display: grid !important; opacity: 1 !important; visibility: visible !important; }

/* 鍗＄墝瑙嗚涓嬬殑涓夎缃戞牸鑳屾櫙鐢诲竷锛堣鐩栧眰锛屼綅浜庣綉鏍间箣涓嬶級 */
.focus-tri-grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9998; /* 浣庝簬 .ring-grid锛屼綅浜庡叾涓嬫柟 */
  display: none; /* 榛樿涓嶆樉绀猴紝浠呰仛鐒︽椂鏄剧ず */
  pointer-events: none; /* 涓嶅奖鍝嶄氦浜?*/
  opacity: 0.28; /* 杞诲井鏄剧幇鍗冲彲 */
}


.ring-cell {
  display: grid;
  place-items: center;
  /* 移除固定最小高度，让网格自动分配空间 */
  opacity: 1;
  transition: opacity 0ms ease;
}
.square-ring {
  width: 90%;
  height: 90%;
  /* 限制卡牌尺寸，确保网格间隙有效 */
  aspect-ratio: 10 / 16; /* 绾靛悜姣斾緥锛堥暱瀹藉璋冿級 */
  display: block;
  cursor: pointer;
  transition: transform 200ms ease;
  margin: auto; /* 居中显示 */
}
.square-ring svg {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1; /* 鏄惧紡纭繚涓嶉€忔槑 */
  shape-rendering: crispEdges; /* 鎻愬崌鏁翠綋杈圭紭娓呮櫚搴?*/
}
.ring-grid.focused .square-ring.selected .label-text {
  opacity: 0; /* 鑱氱劍榛樿闅愯棌鏂囧瓧锛堟贰鍑烘洿鎱級 */
  transition: opacity 2500ms ease; /* 娣″嚭绾?.5绉掞紝鏇存煍鍜岃嚜鐒?*/
}
.ring-grid.focused .square-ring.selected.show-text .label-text {
  opacity: 1; /* 涓存椂鏄剧ず鏂囧瓧锛堟贰鍏ヨ緝蹇級 */
  transition: opacity 220ms ease-out; /* 娣″叆鏇村揩鏇村共鍑€ */
}
/* 矢量矩形样式增强 */
.square-ring .vector-frame {
  fill: none;
  stroke-width: 2.5px;
  stroke-opacity: 1;
  shape-rendering: crispEdges;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
  transition: stroke-width 200ms ease, filter 200ms ease;
}

.square-ring .inner-frame {
  vector-effect: non-scaling-stroke;
  transition: stroke-opacity 200ms ease;
}

.square-ring .corner-decorations {
  transition: stroke-opacity 200ms ease;
}

.square-ring .center-lines {
  transition: stroke-opacity 200ms ease;
}

/* 悬停时增强矢量效果 */
.square-ring:hover .vector-frame {
  stroke-width: 3px;
  filter: url(#glow) drop-shadow(0 0 8px rgba(168,198,255,0.6));
}

.square-ring:hover .inner-frame {
  stroke-opacity: 0.6;
}

.square-ring:hover .corner-decorations {
  stroke-opacity: 0.9;
}

.square-ring:hover .center-lines {
  stroke-opacity: 0.4;
}

/* 选中状态的矢量增强 */
.square-ring.selected .vector-frame {
  stroke-width: 3px;
  filter: url(#glow) drop-shadow(0 0 12px rgba(168,198,255,0.8));
}

.square-ring.selected .corner-decorations {
  stroke-opacity: 1;
}

.square-ring .frame {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2px; /* 澧炵矖浠ラ伩鍏嶈瑙夋柇缁?*/
  stroke-opacity: 1;
  shape-rendering: crispEdges; /* 鐩磋娓呮櫚锛屾棤寮у害涓庨敮榻?*/
  stroke-linejoin: miter;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
  /* 绉婚櫎闃村奖锛岄伩鍏嶆柇鏂画缁殑杈圭紭鏁堟灉 */
}
.square-ring .label-text {
  fill: #e0e6f6;
  /* 浣跨敤瀹嬪窘瀹楃槮閲戜綋锛堣嫢鍙敤锛夊苟鎻愪緵甯歌鍒悕鍥為€€ */
  font-family: 'HYSentyShoujin', 'Senty Shoujin SC', 'FZShouJinShu-S10S', 'FZShouJinShu', 'Shou Jin Ti', 'Shoujin', 'HYShoujin', 'SentyShoujin', 'Songti SC', 'Noto Serif SC', 'SimSun', serif;
  font-weight: 300; /* 闄嶄綆瀛楅噸锛屾洿鐦?*/
  font-stretch: ultra-condensed; /* 鍘嬬獎瀛楀舰锛岃嫢瀛椾綋鏀寔 */
  font-size: 18px; /* 鎻愰珮鍒濆瀛楀彿锛屽埄浜庢祴閲忕缉鏀?*/
  letter-spacing: 0.01em; /* 鐣ユ敹绱ч棿璺濅互鏄惧緱鏇寸槮 */
  pointer-events: none;
  /* 绂佹鏂囨湰琚€変腑锛堣法娴忚鍣ㄥ墠缂€锛?*/
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  text-rendering: optimizeLegibility; /* 鎻愬崌绗旂敾缁嗚妭 */
}

/* 在12张卡牌选择界面隐藏中文标签，仅用于后台数据记录 */
.ring-grid:not(.focused) .square-ring .label-text { display: none !important; }
.square-ring .label-text tspan {
  font-size: 1em; /* 缁ф壙鍩哄噯灏哄锛屼究浜庣珫鎺掕璺?*/
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.square-ring.pressed {
  transform: scale(1.1);
}
/* 閫変腑鍚庢棆杞姩鐢伙紙缂撴參椤烘椂閽堬級 */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.square-ring.selected svg {
  transform-origin: 50% 50%;
  /* 绉婚櫎鏃嬭浆鍔ㄧ敾锛岄伩鍏嶇缉灏忔椂杈规闂儊 */
  animation: spin 24s linear infinite;
}

/* 卡牌边框粒子动画：与右上角圆环一致 */
.square-ring svg { overflow: visible; }
.square-ring svg #particles {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: orbit 10s linear infinite;
  will-change: transform;
}
.square-ring svg #particles > g:nth-child(2) { animation-duration: 7s; }
.square-ring svg #particles > g:nth-child(3) { animation-duration: 8.5s; animation-direction: reverse; }
.square-ring svg #particles circle { animation: twinkle 3s ease-in-out infinite; }
.square-ring svg #particles > g:nth-child(2) circle { animation-duration: 2.4s; }
.square-ring svg #particles > g:nth-child(3) circle { animation-duration: 2.8s; }

/* 鑱氱劍瑙嗚锛氬叾浠栧崱鐗屾贰鍑猴紝閫変腑鍗＄墝淇濇寔 */
.ring-grid.focused .ring-cell:not(.selected) {
  opacity: 0;
  pointer-events: none;
}
/* 鏍囩鏍峰紡 */
.ring-label {
  margin-top: 6px;
  text-align: center;
  color: #e0e6f6;
  font-family: var(--font-sci);
  font-size: 14px;
  letter-spacing: 0.02em;
  user-select: none;
}

/* 浜や簰鍙嶉 */
.square-ring:focus-visible .frame,
.square-ring:hover .frame {
  stroke: #a8c6ff;
}

/* 悬停放大效果 */
.square-ring:hover {
  transform: scale(1.1);
}

/* 宸︿笂瑙掕繑鍥炴寜閽紙榛樿闅愯棌锛屼粎鑱氱劍鏃舵樉绀猴級 */
.back-btn { position: fixed; top: 18px; left: 16px; width: 40px; height: 40px; display: none; place-items: center; align-items: center; justify-content: center; border-radius: 50%; color: #e0e6f6; background: transparent; border: 1px solid rgba(207,226,255,0.9); box-shadow: 0 4px 18px rgba(0,0,0,0.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 2147483647; cursor: pointer; transition: transform 200ms ease, opacity 200ms ease, background 200ms ease; }
.back-btn svg { width: 22px; height: 22px; }

/* 鍙充笅瑙掕皟寮忚彍鍗曪Paper绮剧畝鐗堬細鏃犺儗鏅紝浠呮枃瀛楀井鍏夌粏杈规锛?*/
.mode-menu {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147483647; /* 缃簬鏈€椤跺眰锛岄伩鍏嶄换浣曢伄鎸?*/
  display: none;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  pointer-events: auto;
}
.mode-menu.visible { display: block; opacity: 1; visibility: visible; animation: menuFadeIn 160ms ease-out; }
@keyframes menuFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.mode-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 6px; align-items: flex-end; }
.mode-menu-item { margin: 0; padding: 0; }
.mode-menu-item button {
  all: unset;
  display: inline-block;
  padding: 6px 10px;
  color: #e0e6f6;
  text-shadow: 0 0 6px rgba(120, 160, 255, 0.25);
  cursor: pointer;
  font-family: 'ShouJinTi', 'Songti SC', 'Noto Serif SC', serif;
  font-size: 15px;
  letter-spacing: 0.06em;
  transition: transform 200ms ease, text-shadow 200ms ease;
}
.mode-menu-item button:hover {
  text-shadow: 0 0 8px rgba(130, 170, 255, 0.35);
  transform: scale(1.1);
}

/* 搴曢儴鎵€閫夎皟寮忕殑闊崇▼鐨勫睍绀哄尯鍩?*/
.mode-intervals {
  position: fixed;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 2147483647; /* 涓庤彍鍗曞悓灞傜骇锛岀‘淇濆湪鏈€涓婂眰 */
  display: none;
  color: #e0e6f6;
  background: transparent; /* 鏃犺儗鏅?*/
  border: none; /* 鏃犺竟妗?*/
  padding: 0; /* 鍙栨秷鍐呰竟璺?*/
  box-shadow: none; /* 鏃犻槾褰?*/
  font-family: var(--font-sci);
  font-size: 16px;
  letter-spacing: 0.04em;
  user-select: none; /* 绂佹閫変腑 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none; /* 浠呭睍绀猴紝涓嶅弬涓庝氦浜?*/
  width: 80vw; /* 鏇村鐨勫睍绀哄尯鍩?*/
  max-width: 960px;
  display: flex;
  justify-content: space-evenly; /* 鍧囩瓑闂撮殧鏀剧疆 */
  align-items: center;
}
.mode-intervals.visible { display: flex; animation: intervalsFadeIn 180ms ease-out; }
@keyframes intervalsFadeIn { from { opacity: 0; transform: translateX(-50%) translateY(6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* 鑿滃崟椤硅嚜涓嬭€屼笂銆侀€愪釜鍏ュ満鐨勫姩鐢?*/
@keyframes stackUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
.mode-menu.visible .mode-menu-item { opacity: 0; animation: stackUp 240ms ease-out forwards; }
.mode-menu.visible .mode-menu-item:nth-child(1) { animation-delay: 40ms; }
.mode-menu.visible .mode-menu-item:nth-child(2) { animation-delay: 80ms; }
.mode-menu.visible .mode-menu-item:nth-child(3) { animation-delay: 120ms; }
.mode-menu.visible .mode-menu-item:nth-child(4) { animation-delay: 160ms; }
.mode-menu.visible .mode-menu-item:nth-child(5) { animation-delay: 200ms; }
.mode-menu.visible .mode-menu-item:nth-child(6) { animation-delay: 240ms; }

/* 搴曢儴鏁板瓧鐨勫崟椤规牱寮?*/
.interval-item {
  display: inline-block;
  color: #e0e6f6;
  font-family: var(--font-sci);
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
/* 登录后界面不再显示左上角返回按钮 */
.ring-grid.focused ~ .back-btn { display: none !important; }
.back-btn:hover { transform: scale(1.06); background: transparent; }
.back-btn:active { transform: scale(0.98); }
/* 鍙充笅瑙掗噸鏂伴€夋嫨璋冨紡鎸夐挳 */
.reselect-mode-btn {
  position: fixed;
  right: 16px;
  bottom: 12px; /* 涓庡簳閮ㄩ煶绋嬫暟瀛楀悓涓€姘村钩绾?*/
  z-index: 2147483647;
  width: 44px;  /* 涓庡彸涓婅鍦嗙幆鍙灏哄涓€鑷?*/
  height: 44px; /* 涓庡彸涓婅鍦嗙幆鍙灏哄涓€鑷?*/
  border-radius: 22px; /* 淇濇寔鐐瑰嚮鍛戒腑鑼冨洿锛屼絾鏃犲彲瑙佸渾鐜?*/
  border: none;
  background: transparent; /* 鏃犺儗鏅?*/
  color: #cfe2ff;
  box-shadow: none; /* 鏃犲閮ㄩ槾褰?*/
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.reselect-mode-btn svg {
  width: 44px;   /* 涓夎鍥炬爣灏哄涓庡彸涓婅鍦嗙幆涓€鑷?*/
  height: 44px;  /* 涓夎鍥炬爣灏哄涓庡彸涓婅鍦嗙幆涓€鑷?*/
  filter: drop-shadow(0 0 3px rgba(160,180,220,0.35)); /* 涓庡彸涓婅鍦嗗湀鐨勫厜鏅曚竴鑷?*/
  animation: twinkle 3s ease-in-out infinite; /* 涓庡渾鐜竴鑷寸殑杞诲井闂儊 */
}
.reselect-mode-btn svg path,
.reselect-mode-btn svg polygon {
  animation: twinkle 3s ease-in-out infinite; /* 绮掑瓙闂儊椋庢牸鐨勫厹搴曚竴鑷存€?*/
}
.reselect-mode-btn.visible { display: inline-flex; }
/* 返回按钮的粒子动画槽，与右上角圆环一致 */
.back-btn .icon-slot { position: absolute; inset: 0; width: 40px; height: 40px; background-repeat: no-repeat; background-position: center; background-size: contain; overflow: visible; filter: drop-shadow(0 0 3px rgba(160,180,220,0.35)); pointer-events: none; }
.back-btn .icon-slot svg { overflow: visible; }
.back-btn .icon-slot svg #particles { transform-box: view-box; transform-origin: 12px 12px; animation: orbit 10s linear infinite; will-change: transform; }
.back-btn .icon-slot svg #particles > g:nth-child(2) { animation-duration: 7s; }
.back-btn .icon-slot svg #particles > g:nth-child(3) { animation-duration: 8.5s; animation-direction: reverse; }
.back-btn .icon-slot svg #particles circle { animation: twinkle 3s ease-in-out infinite; }
.back-btn .icon-slot svg #particles > g:nth-child(2) circle { animation-duration: 2.4s; }
.back-btn .icon-slot svg #particles > g:nth-child(3) circle { animation-duration: 2.8s; }
/* ICP 备案底部样式 */
.icp-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 8px;
  text-align: center;
  font-size: 12px;
  color: #b7c0d4;
  opacity: 0.9;
  z-index: 10;
}
.icp-footer .beian-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.icp-footer a {
  color: #b7c0d4;
  text-decoration: none;
}
.icp-footer a:hover {
  text-decoration: underline;
}
/* 公安备案图标与布局 */
.icp-footer .ps-beian { 
  display: inline-flex; 
  align-items: center; 
  gap: 4px; 
}
.icp-footer .ps-icon { 
  width: 14px; 
  height: 14px; 
  vertical-align: middle; 
  opacity: 0.95; 
  flex-shrink: 0;
}

/* 移动端优化：图标大小与文字一致 */
@media (max-width: 768px) {
  .icp-footer .ps-icon {
    width: 1em;
    height: 1em;
  }
  
  .icp-footer .beian-container {
    gap: 3px;
  }
  
  .icp-footer .icp-sep {
    margin: 0 6px;
  }
}
.icp-footer .icp-sep { 
  margin: 0 8px; 
  color: #91a4c9; 
}