/* ==========================================================================
   NEON MATCH · 霓虹三消
   ========================================================================== */

:root{
  --ink:#eaf0ff;
  --violet:#7b5cff;
  --cyan:#2ee6ff;
  --pink:#ff3d9a;
  --gold:#ffd24d;
  --hud-h:92px;
}

*{margin:0;padding:0;box-sizing:border-box;}

html,body{
  height:100%;
  overflow:hidden;
  background:#05010f;
}

body{
  font-family:'Orbitron','HarmonyOS Sans SC','PingFang SC','Hiragino Sans','Yu Gothic UI','Meiryo','Microsoft YaHei','Noto Sans JP',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  overscroll-behavior:none;
}

#app{
  position:fixed;
  inset:0;
  overflow:hidden;
  isolation:isolate;
}

/* ----------------------------- 背景 ----------------------------- */

.bg{
  position:absolute;
  inset:-30%;
  z-index:0;
  background:
    radial-gradient(38% 34% at 22% 18%, rgba(123,92,255,.55), transparent 70%),
    radial-gradient(34% 30% at 80% 24%, rgba(46,230,255,.42), transparent 70%),
    radial-gradient(42% 38% at 52% 94%, rgba(255,61,154,.42), transparent 70%),
    radial-gradient(28% 28% at 90% 86%, rgba(255,210,77,.20), transparent 70%);
  filter:blur(30px);
  animation:bgdrift 24s ease-in-out infinite alternate;
  will-change:transform;
}

@keyframes bgdrift{
  0%{transform:translate3d(-2%,-1%,0) scale(1.02) rotate(0deg);}
  50%{transform:translate3d(3%,2%,0) scale(1.10) rotate(6deg);}
  100%{transform:translate3d(-3%,3%,0) scale(1.04) rotate(-6deg);}
}

.grid{
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    linear-gradient(rgba(150,130,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,130,255,.10) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%, #000 22%, transparent 76%);
  mask-image:radial-gradient(circle at 50% 45%, #000 22%, transparent 76%);
  animation:gridscroll 7s linear infinite;
}

@keyframes gridscroll{
  to{background-position:0 52px, 52px 0;}
}

.vignette{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(circle at 50% 45%, transparent 40%, rgba(2,0,8,.72) 100%);
}

/* ----------------------------- 画布 ----------------------------- */

#game{
  position:absolute;
  inset:0;
  z-index:1;
  display:block;
  touch-action:none;
}

/* ----------------------------- HUD ----------------------------- */

.hud{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:calc(12px + env(safe-area-inset-top)) 18px 0;
  pointer-events:none;
}

.label{
  font-size:9px;
  letter-spacing:.34em;
  color:rgba(200,210,255,.55);
  font-weight:600;
}

.score{
  font-size:clamp(26px,7.4vw,42px);
  font-weight:800;
  line-height:1.05;
  margin-top:2px;
  letter-spacing:.01em;
  background:linear-gradient(180deg,#ffffff,#c3d2ff 46%,#7be6ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 14px rgba(120,190,255,.85));
  transform-origin:left center;
}

.score.pop{animation:scorepop .34s cubic-bezier(.3,1.6,.5,1);}
@keyframes scorepop{
  0%{transform:scale(1);}
  38%{transform:scale(1.17);}
  100%{transform:scale(1);}
}

.best{
  margin-top:6px;
  font-size:9px;
  letter-spacing:.22em;
  color:rgba(190,200,255,.5);
  font-weight:600;
}
.best b{color:var(--gold);text-shadow:0 0 10px rgba(255,210,77,.7);}

.hud-right{text-align:right;}

.timerow{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
}

.timerow svg{
  width:17px;
  height:17px;
  opacity:.75;
  filter:drop-shadow(0 0 6px rgba(46,230,255,.9));
}

#time{
  font-size:clamp(20px,5.8vw,28px);
  font-weight:800;
  color:#fff;
  line-height:1;
  text-shadow:0 0 16px rgba(46,230,255,.9);
  font-variant-numeric:tabular-nums;
}

#time.low{
  color:#ff7a9c;
  text-shadow:0 0 20px rgba(255,61,154,1);
  animation:lowpulse .9s ease-in-out infinite;
}
@keyframes lowpulse{
  50%{transform:scale(1.09);opacity:.86;}
}

.timebar{
  width:min(38vw,178px);
  height:6px;
  margin-top:9px;
  border-radius:99px;
  background:rgba(255,255,255,.10);
  overflow:hidden;
  box-shadow:inset 0 0 10px rgba(0,0,0,.75);
}

.timebar i{
  display:block;
  height:100%;
  width:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#2ee6ff,#7b5cff 55%,#ff3d9a);
  box-shadow:0 0 16px rgba(46,230,255,.95);
  transition:width .12s linear;
}

/* ----------------------------- 连击飘字 ----------------------------- */

.combo-flash{
  position:absolute;
  left:50%;
  top:13%;
  z-index:4;
  transform:translate(-50%,0);
  pointer-events:none;
  font-size:clamp(24px,7.6vw,44px);
  font-weight:800;
  letter-spacing:.06em;
  color:#fff;
  opacity:0;
  text-shadow:0 0 18px var(--pink), 0 0 46px var(--violet), 0 0 80px var(--pink);
  white-space:nowrap;
}

.combo-flash.show{animation:comboin .85s cubic-bezier(.2,.9,.2,1);}

@keyframes comboin{
  0%{opacity:0;transform:translate(-50%,14px) scale(.55) rotate(-6deg);}
  22%{opacity:1;transform:translate(-50%,0) scale(1.14) rotate(2deg);}
  62%{opacity:1;transform:translate(-50%,-8px) scale(1) rotate(0deg);}
  100%{opacity:0;transform:translate(-50%,-32px) scale(.94);}
}

/* ----------------------------- 底部按钮 ----------------------------- */

.dock{
  position:absolute;
  left:50%;
  bottom:calc(16px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  gap:12px;
}

.icon-btn{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:15px;
  border:1px solid rgba(150,130,255,.35);
  background:linear-gradient(160deg, rgba(60,40,120,.55), rgba(12,6,32,.7));
  color:rgba(220,228,255,.9);
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}

.icon-btn:active{
  transform:scale(.93);
  border-color:rgba(46,230,255,.8);
  box-shadow:0 0 22px rgba(46,230,255,.7);
}

.icon-btn svg{width:20px;height:20px;}

.icon-btn.off{opacity:.45;}

/* 语言切换按钮 */
#btnLang{
  position:relative;
  padding-bottom:12px;
}

#btnLang svg{
  width:17px;
  height:17px;
  opacity:.9;
}

.lang-code{
  position:absolute;
  left:0;
  right:0;
  bottom:5px;
  text-align:center;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.04em;
  color:#8fe6ff;
  text-shadow:0 0 8px rgba(46,230,255,.9);
  pointer-events:none;
}

/* 语言切换提示 */
.lang-toast{
  position:absolute;
  left:50%;
  bottom:calc(80px + env(safe-area-inset-bottom));
  z-index:4;
  transform:translate(-50%,10px);
  padding:8px 16px;
  border-radius:99px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.12em;
  white-space:nowrap;
  color:#dff3ff;
  background:rgba(20,10,45,.86);
  border:1px solid rgba(150,130,255,.45);
  box-shadow:0 0 26px rgba(123,92,255,.55);
  opacity:0;
  pointer-events:none;
}

.lang-toast.show{animation:toastin 1.8s ease forwards;}

@keyframes toastin{
  0%{opacity:0;transform:translate(-50%,10px) scale(.94);}
  14%{opacity:1;transform:translate(-50%,0) scale(1);}
  76%{opacity:1;transform:translate(-50%,0) scale(1);}
  100%{opacity:0;transform:translate(-50%,-8px) scale(.96);}
}

/* ----------------------------- 弹层 ----------------------------- */

.overlay{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:radial-gradient(circle at 50% 45%, rgba(14,5,32,.55), rgba(2,0,8,.93));
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:opacity .38s ease, visibility .38s ease;
}

.overlay.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.panel{
  position:relative;
  width:min(92vw,404px);
  padding:30px 24px 26px;
  text-align:center;
  border-radius:28px;
  background:linear-gradient(160deg, rgba(46,22,92,.82), rgba(10,4,26,.9));
  border:1px solid rgba(140,120,255,.32);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 30px 80px rgba(0,0,0,.75),
    0 0 80px rgba(123,92,255,.30);
  animation:panelin .5s cubic-bezier(.2,1.2,.35,1) both;
}

@keyframes panelin{
  0%{opacity:0;transform:translateY(24px) scale(.94);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

.panel::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:28px;
  pointer-events:none;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(123,92,255,.45), transparent 70%),
    radial-gradient(50% 40% at 80% 100%, rgba(46,230,255,.22), transparent 70%);
  opacity:.9;
}

.panel > *{position:relative;z-index:1;}

.kicker{
  font-size:9.5px;
  letter-spacing:.42em;
  color:rgba(180,196,255,.65);
  font-weight:700;
  margin-bottom:12px;
}

h1, h2{
  font-size:clamp(26px,8.2vw,40px);
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.16;
  max-width:100%;
  overflow-wrap:break-word;
  background:linear-gradient(115deg,#ffffff,#9fe9ff 32%,#c9a8ff 62%,#ff9ecb);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 24px rgba(123,92,255,.85));
}

.sub{
  margin-top:5px;
  font-size:11px;
  letter-spacing:.5em;
  color:rgba(140,210,255,.75);
  font-weight:700;
}

.cta{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin-top:24px;
  padding:16px 20px;
  border:0;
  border-radius:16px;
  cursor:pointer;
  overflow:hidden;
  font-family:inherit;
  font-size:16px;
  font-weight:800;
  letter-spacing:.3em;
  color:#0a0418;
  background:linear-gradient(100deg,#7cf0ff,#a58bff 46%,#ff9ad0);
  box-shadow:0 12px 34px rgba(120,90,255,.55), inset 0 0 0 1px rgba(255,255,255,.45);
  transition:transform .12s ease, box-shadow .25s ease;
}

.cta:active{
  transform:scale(.97);
  box-shadow:0 6px 20px rgba(120,90,255,.45), inset 0 0 0 1px rgba(255,255,255,.45);
}

.cta::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, transparent 32%, rgba(255,255,255,.78), transparent 68%);
  transform:translateX(-130%);
  animation:shine 2.8s ease-in-out infinite;
}

@keyframes shine{
  0%{transform:translateX(-130%);}
  58%{transform:translateX(130%);}
  100%{transform:translateX(130%);}
}

.tips{
  margin:22px 0 0;
  padding:0;
  list-style:none;
  text-align:left;
  display:grid;
  gap:9px;
}

.tips li{
  position:relative;
  padding-left:18px;
  font-size:11.5px;
  line-height:1.65;
  letter-spacing:.04em;
  color:rgba(196,206,240,.72);
  font-family:'PingFang SC','Hiragino Sans','Yu Gothic UI','Meiryo','Microsoft YaHei',sans-serif;
}

.tips li::before{
  content:'';
  position:absolute;
  left:2px;
  top:8px;
  width:6px;
  height:6px;
  border-radius:2px;
  background:linear-gradient(135deg,var(--cyan),var(--pink));
  box-shadow:0 0 10px rgba(46,230,255,.9);
  transform:rotate(45deg);
}

/* iOS 静音键提示（仅 iOS 显示） */
.ios-hint{
  display:none;
  margin-top:14px;
  padding:9px 12px;
  border-radius:12px;
  font-size:10.5px;
  line-height:1.6;
  letter-spacing:.02em;
  color:rgba(255,214,130,.86);
  background:rgba(255,190,60,.07);
  border:1px solid rgba(255,190,60,.22);
  font-family:'PingFang SC','Hiragino Sans','Yu Gothic UI','Microsoft YaHei',sans-serif;
}

.result{
  display:flex;
  gap:12px;
  margin-top:22px;
}
.result > div{
  flex:1;
  padding:14px 8px;
  border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(150,130,255,.22);
}

.result span{
  display:block;
  font-size:9px;
  letter-spacing:.28em;
  color:rgba(180,196,255,.6);
  margin-bottom:6px;
  font-weight:600;
}

.result strong{
  display:block;
  font-size:clamp(22px,6.4vw,30px);
  font-weight:800;
  color:#fff;
  text-shadow:0 0 18px rgba(46,230,255,.85);
  font-variant-numeric:tabular-nums;
}

.result > div:last-child strong{
  color:var(--gold);
  text-shadow:0 0 18px rgba(255,210,77,.85);
}

.newrecord{
  margin-top:14px;
  font-size:11px;
  letter-spacing:.28em;
  color:var(--gold);
  font-weight:700;
  text-shadow:0 0 16px rgba(255,210,77,.9);
  animation:lowpulse 1.1s ease-in-out infinite;
}

/* 小屏适配 */
/* 排行榜样式 */
.promo-banner {
  margin: 20px 0;
  padding: 12px 24px;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.1), rgba(255, 107, 0, 0.2));
  border: 1px solid rgba(255, 107, 0, 0.4);
  border-radius: 50px;
  display: inline-block;
  animation: promoPulse 2s infinite ease-in-out;
  box-shadow: 0 0 20px rgba(255, 107, 0, 0.2);
}

.promo-banner span {
  font-family: 'Orbitron', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: #ff6b00;
  text-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@keyframes promoPulse {
  0% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 107, 0, 0.2); }
  50% { transform: scale(1.05); box-shadow: 0 0 25px rgba(255, 107, 0, 0.4); }
  100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 107, 0, 0.2); }
}

.ranking-container {
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  border: 1px solid rgba(150, 130, 255, 0.15);
  overflow: hidden;
  font-family: 'Orbitron', sans-serif;
}

.ranking-header {
  display: flex;
  padding: 10px 16px;
  background: rgba(150, 130, 255, 0.1);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(180, 196, 255, 0.6);
  font-weight: 700;
  border-bottom: 1px solid rgba(150, 130, 255, 0.1);
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(150, 130, 255, 0.05);
  transition: background 0.3s ease;
}

.ranking-item:last-child {
  border-bottom: none;
}

.ranking-item.highlight {
  background: rgba(123, 92, 255, 0.15);
  box-shadow: inset 0 0 15px rgba(123, 92, 255, 0.2);
}

.rank-num {
  width: 30px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(180, 196, 255, 0.8);
}

.ranking-item.highlight .rank-num {
  color: var(--cyan);
  text-shadow: 0 0 8px var(--cyan);
}

.rank-name {
  flex: 1;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  padding-left: 10px;
}

.ranking-item.highlight .rank-name {
  color: #fff;
}

.rank-score {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
  font-variant-numeric: tabular-nums;
}

.ranking-item.highlight .rank-score {
  color: var(--gold);
  text-shadow: 0 0 8px var(--gold);
}

/* 小屏适配 */
@media (max-height: 700px) {
  .ranking-container { margin-top: 14px; }
  .ranking-item { padding: 8px 14px; }
  .rank-name, .rank-score { font-size: 12px; }
}

@media (max-height:700px){
  .panel{padding:22px 20px 20px;border-radius:24px;}
  .tips{margin-top:16px;gap:6px;}
  .cta{margin-top:18px;padding:14px 18px;}
  .result{margin-top:16px;}
}