@keyframes Gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


:root {
    font-size: 8px;
}

@media screen and (max-width: 480px) {
    :root { font-size: 8px; }
}

@media screen and (min-width: 481px) and (max-width: 767px) {
    :root { font-size: 9px; }
}

@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
    :root { font-size: 14px; }
}

@media screen and (max-height: 540px) {
    :root { font-size: 8px; }
}

@font-face {
    font-family: 'PressStart2P-Regular';
    src: url('/font/PressStart2P-Regular.woff2') format('woff2'),
         url('PressStart2P-Regular.ttf') format('truetype');
    font-display: swap;
}

html {
    height: 100%;
    height: -webkit-fill-available;
}
html,
body {
    font-family: 'PressStart2P-Regular', sans-serif;
    background-color: #000000;
    margin: 0;
    padding: 0;
    min-height: 100%;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    min-height: 100dvh;
    min-height: 100lvh;
    min-height: var(--app-height, 100vh);
    overflow: hidden;
}

body {
    height: 100%;
    height: -webkit-fill-available;
    -webkit-user-select: none;
    user-select: none;
}

*,
*::before,
*::after {
    -webkit-tap-highlight-color: transparent;
}

:focus,
:focus-visible,
:active {
    outline: none !important;
}

a,
button,
input,
select,
textarea,
[tabindex],
.nav-link,
.link,
#myButton,
.capsule-unified,
.nav-icon-btn {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
}

.tooltip {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.22rem 0.85rem;
    margin: 0 0.4rem;
    background-color: #0b0f1d;
    color: #ffffff !important;
    font-family: inherit;
    font-size: 1.06em;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    border: 2px solid #ffffff;
    border-radius: 4px;
    box-shadow: 0 2.5px 0 #000000;
    vertical-align: middle;
    cursor: pointer;
    line-height: 1.2;
    transform: translateY(-2px);
    transition: transform 0.1s, box-shadow 0.1s, background-color 0.1s;
    user-select: none;
    -webkit-text-fill-color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.link:hover {
    background-color: #1a223f;
    border-color: #ffffff;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    text-decoration: none;
}

.link:active {
    transform: translateY(0.5px);
    box-shadow: 0 0.5px 0 #000000;
    background-color: #1a223f;
}

.tooltip .tooltiptext,
#tooltip {
    display: none;
    color: #eeeeee;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #2b2b32;
    padding: 2.2rem 1.8rem 1.4rem;
    border: 3px solid #e0e0e0;
    border-radius: 8px;
    box-sizing: border-box;
    width: min(80vw, 780px);
    max-width: calc(100vw - 24px);
    max-height: min(80vh, 80dvh);
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 4px 0 #000, 0 0 0 100vmax rgba(0, 0, 0, 0.75);
    z-index: 999;
    text-align: start;
    font-size: 1.35rem;
    line-height: 1.55;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    flex-direction: column;
}

#tooltip.is-open {
    display: flex;
}

.close {
    position: sticky;
    bottom: 0;
    right: 0;
    align-self: flex-end;
    flex-shrink: 0;
    margin-top: 0.8rem;
    z-index: 2;
    color: #000000;
    font-size: 2.5rem;
    font-weight: bold;
    border: 3px solid #95ff72;
    background-color: #ffffff;
    box-shadow: 0.5rem 0.5rem 0rem #000;
    border-radius: 0.4rem;
    font-family: 'PressStart2P-Regular', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
}

 /* --- 页面主排版与文字层级 --- */
.greetings {
    color: #ffffff;
    margin: 0;
    text-align: center;
    text-shadow: 0.3rem 0.3rem 0rem rgba(0, 0, 0, 1);
    box-sizing: border-box;
}

h1.greetings {
    font-size: 1.8rem;
    letter-spacing: 3px;
    line-height: 1.35;
    max-width: 72%;
    margin-top: 0.6vh;
    margin-bottom: 2.4vh;
    color: #ffffff;
    text-shadow:
        -1.5px -1.5px 0 #080d24,
         1.5px -1.5px 0 #080d24,
        -1.5px  1.5px 0 #080d24,
         1.5px  1.5px 0 #080d24,
        -2px    0     0 #080d24,
         2px    0     0 #080d24,
         0     -2px   0 #080d24,
         0      2px   0 #080d24,
         0.35rem 0.35rem 0rem #080d24;
}


.title-app-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
    margin: 0 0 0.2vh;
    pointer-events: none;
    filter:
        drop-shadow(-0.2px  0px 0 rgba(8, 13, 36, 0.8))
        drop-shadow( 0.2px  0px 0 rgba(8, 13, 36, 0.8))
        drop-shadow( 0px -0.2px 0 rgba(8, 13, 36, 0.8))
        drop-shadow( 0px  0.2px 0 rgba(8, 13, 36, 0.8));
}


h2.greetings {
    font-size: 1.35rem;
    line-height: 1.6;
    letter-spacing: 1px;
    max-width: 65%;
    color: #ffffff;
    margin-bottom: 1vh;
    text-shadow:
        -1.5px -1.5px 0 #070a1a,
         1.5px -1.5px 0 #070a1a,
        -1.5px  1.5px 0 #070a1a,
         1.5px  1.5px 0 #070a1a,
        -2px    0     0 #070a1a,
         2px    0     0 #070a1a,
         0     -2px   0 #070a1a,
         0      2px   0 #070a1a,
         0.28rem 0.28rem 0rem #070a1a;
}

#warning,
.greetings#warning,
p#warning {
    color: #ffe600 !important; /* 高饱和电光黄，彻底告别发虚淡黄 */
    font-size: 1.35rem !important;
    letter-spacing: 1.5px;
    line-height: 1.6;
    max-width: 70%;
    margin-top: 0.5vh;
    margin-bottom: 1.5vh;
    text-shadow:
        -1.5px -1.5px 0 #000,
         1.5px -1.5px 0 #000,
        -1.5px  1.5px 0 #000,
         1.5px  1.5px 0 #000,
        -2px    0     0 #000,
         2px    0     0 #000,
         0     -2px   0 #000,
         0      2px   0 #000,
         0.3rem 0.3rem 0rem #000;
}

.highlight {
    background-color: #333;
}

/* Pixelarticons · 离线 SVG，跟随 currentColor */
.px-sprite {
    position: absolute;
    left: -100vw;
    width: 24px;
    height: 24px;
    overflow: hidden;
    pointer-events: none;
}
.pxicon {
    width: 18px;
    height: 18px;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: -0.15em;
    overflow: visible;
    color: inherit;
}
.tooltip-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    margin-bottom: 1.1rem;
    text-align: start;
    min-width: 0;
    max-width: 100%;
}
.tooltip-item span {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.tooltip-item .pxicon {
    width: 20px;
    height: 20px;
    margin-top: 0;
    transform: translateY(-3px);
    color: #fde047;
}

@media screen and (max-width: 1023px) {
    #tooltip,
    .tooltiptext {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        padding: 1.2rem 1rem 1rem;
        font-size: 1.1rem !important;
        line-height: 1.45;
        letter-spacing: 0;
    }
    #tooltip .close,
    .tooltiptext .close {
        font-size: 1.25rem;
        padding: 0.35rem 0.7rem;
        margin-top: 0.6rem;
    }
    .tooltip-item {
        margin-bottom: 0.75rem;
        gap: 0.5rem;
    }
}








/* --- 1. 主容器 .frontM 与动画舞台 .container --- */
.frontM {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  z-index: 10;
  background-color: #4b6eff;
  transform: translateY(0);
  display: flex;
  flex-direction: column;
}

.frontM-nav {
  flex-shrink: 0;
  position: relative;
  z-index: 30;
  width: 100%;
  box-sizing: border-box;
  background-color: #333;
  color: #eeeeee;
  padding: 0.75rem 1rem;
  box-shadow: 1rem 0.3rem 0 #333;
}

.frontM-nav .nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 0.8rem;
}

.frontM-nav .nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0;
  margin: 0;
}

.frontM-nav .nav-links li {
  margin: 0;
  font-size: 16px;
}

.frontM-nav .nav-link {
  color: #eeeeee;
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
  padding: 8px 2px;
  display: inline-block;
}

.frontM-nav .nav-link:hover {
  color: #ff9900;
}

.frontM-nav .nav-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.frontM-nav .nav-timer-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #222;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  color: #fbbf24;
  cursor: pointer;
}

.frontM-nav .nav-timer-pill .timer-icon {
  font-size: 0.85rem;
}

.frontM-nav .nav-timer-pill .timer-label {
  color: #cbd5e1;
}

.container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  min-height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100lvh;
  min-height: -webkit-fill-available;
  min-height: calc(100dvh + env(safe-area-inset-bottom, 0px));
  min-height: var(--app-height, 100lvh);
  z-index: 1;
  background-color: #000000;
  overflow: hidden;
}

.animations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 复古像素效果区 */

/* 复古像素效果区 */


  #rgb-cycle,
  #checker-invert,
  #diagonal-sweep,
  #snow-noise,
  #pixel-storm,
  #sonar-sweep,
  #hyperspace-warp {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 2;
  }

 #sonar-sweep,
 #pixel-storm,
 #hyperspace-warp {
   background: #000;
 }

 #rgb-cycle {
   animation: rgbCycleSmooth 4.0s ease-in-out infinite;
 }
 @keyframes rgbCycleSmooth {
   0%   { background-color: #ff0000; }
   20%  { background-color: #00ff00; }
   40%  { background-color: #0000ff; }
   60%  { background-color: #ffffff; }
   80%  { background-color: #000000; }
   100% { background-color: #ff0000; }
 }

 #snow-noise .lab-a,
 #hyperspace-warp .lab-a,
 #hyperspace-warp .lab-b {
   position: absolute;
   pointer-events: none;
   transform: translateZ(0);
 }

 #checker-invert::before {
   content: "";
   display: block;
   position: absolute;
   inset: -48px;
   width: calc(100% + 96px);
   height: calc(100% + 96px);
   background-image:
     linear-gradient(45deg, #000 25%, transparent 25%),
     linear-gradient(-45deg, #000 25%, transparent 25%),
     linear-gradient(45deg, transparent 75%, #000 75%),
     linear-gradient(-45deg, transparent 75%, #000 75%);
   background-size: 48px 48px;
   background-position: 0 0, 0 24px, 24px -24px, -24px 0px;
   background-color: #ffffff;
   animation: checkerFastMove 0.22s linear infinite;
 }
 @keyframes checkerFastMove {
   0%   { transform: translate3d(0, 0, 0); }
   100% { transform: translate3d(-48px, -48px, 0); }
 }

 #diagonal-sweep::before {
   content: "";
   display: block;
   position: absolute;
   inset: auto;
   width: calc(100vw + 100vh + 320px);
   height: calc(100vw + 100vh + 320px);
   left: 50%;
   top: 50%;
   margin: calc(-50vw - 50vh - 160px);
   background: repeating-linear-gradient(
     0deg,
     #ff0033 0 40px,
     #ffaa00 40px 80px,
     #ffff00 80px 120px,
     #00ff66 120px 160px,
     #00ffff 160px 200px,
     #0066ff 200px 240px,
     #cc00ff 240px 280px,
     #ffffff 280px 320px
   );
   animation: diagSweepFast 0.7s linear infinite;
 }
 @keyframes diagSweepFast {
   0%   { transform: rotate(-45deg) translate3d(0, 0, 0); }
   100% { transform: rotate(-45deg) translate3d(0, -320px, 0); }
 }

 #snow-noise .lab-a {
   width: calc(100% + 256px);
   height: calc(100% + 256px);
   background-repeat: repeat;
   animation: snowSteps 0.16s steps(4, end) infinite;
 }
 @keyframes snowSteps {
   0%   { transform: translate3d(0, 0, 0); }
   25%  { transform: translate3d(-64px, -128px, 0); }
   50%  { transform: translate3d(-192px, -32px, 0); }
   75%  { transform: translate3d(-128px, -224px, 0); }
   100% { transform: translate3d(-256px, -256px, 0); }
 }

 #pixel-storm::before,
 #pixel-storm::after {
   content: "";
   display: block;
   position: absolute;
   inset: auto;
   width: 142vmax;
   height: 142vmax;
   left: 50%;
   top: 50%;
   margin: -71vmax;
   border-radius: 50%;
 }
 #pixel-storm::before {
   background: repeating-conic-gradient(
     #ff0055 0deg 7.5deg,
     #000000 7.5deg 15deg,
     #00ffcc 15deg 22.5deg,
     #000000 22.5deg 30deg,
     #ffcc00 30deg 37.5deg,
     #000000 37.5deg 45deg,
     #3333ff 45deg 52.5deg,
     #000000 52.5deg 60deg
   );
   animation: stormSpinSmooth 0.75s linear infinite;
 }
 #pixel-storm::after {
   background: repeating-radial-gradient(
     circle at center,
     transparent 0 24px,
     rgba(255, 255, 255, 0.95) 24px 36px,
     transparent 36px 72px
   );
   animation: stormPulseSeamless 0.55s linear infinite;
 }
 @keyframes stormSpinSmooth {
   0%   { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
 @keyframes stormPulseSeamless {
   0%   { transform: scale3d(0.15, 0.15, 1); }
   100% { transform: scale3d(2.2, 2.2, 1); }
 }

 #sonar-sweep::before,
 #sonar-sweep::after {
   content: "";
   display: block;
   position: absolute;
   inset: auto;
   width: 142vmax;
   height: 142vmax;
   left: 50%;
   top: 50%;
   margin: -71vmax;
   border-radius: 50%;
 }
 #sonar-sweep::before {
   background: conic-gradient(
     #ffffff 0deg 3deg,
     #00ffcc 3deg 30deg,
     #0066ff 30deg 65deg,
     #ff00ff 65deg 100deg,
     #ffff00 100deg 120deg,
     transparent 120deg 360deg
   );
   animation: sonarCW 0.7s linear infinite;
 }
 #sonar-sweep::after {
   background: conic-gradient(
     #ffffff 0deg 3deg,
     #ff0055 3deg 30deg,
     #ffbb00 30deg 65deg,
     #00ff66 65deg 100deg,
     #00ccff 100deg 120deg,
     transparent 120deg 360deg
   );
   animation: sonarCCW 0.93s linear infinite;
 }
 @keyframes sonarCW {
   0%   { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
 @keyframes sonarCCW {
   0%   { transform: rotate(360deg); }
   100% { transform: rotate(0deg); }
 }

 #hyperspace-warp .lab-a,
 #hyperspace-warp .lab-b {
   inset: auto;
   width: 142vmax;
   height: 142vmax;
   left: 50%;
   top: 50%;
   margin: -71vmax;
   border-radius: 50%;
 }
 #hyperspace-warp .lab-a {
   background: repeating-conic-gradient(
     #ff0033 0deg 15deg,
     #ffaa00 15deg 30deg,
     #00ff66 30deg 45deg,
     #00ffff 45deg 60deg,
     #0066ff 60deg 75deg,
     #ff00ff 75deg 90deg
   );
   animation: warpTunnelSpin 1.1s linear infinite;
 }
 #hyperspace-warp .lab-b {
   background: repeating-radial-gradient(
     circle at center,
     #000000 0 16px,
     transparent 16px 32px,
     #ffffff 32px 40px,
     transparent 40px 64px
   );
   animation: warpTunnelRush 0.5s linear infinite;
 }
 @keyframes warpTunnelSpin {
   0%   { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
 @keyframes warpTunnelRush {
   0%   { transform: scale3d(0.15, 0.15, 1); }
   100% { transform: scale3d(2.2, 2.2, 1); }
 }

  #blackwhite {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  #blackwhite::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + 64px);
    height: 100%;
    background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000 100%),
                linear-gradient(45deg, #000 25%, white 25%, white 75%, #000 75%, #000 100%);
    background-size: 64px 64px;
    background-position: 0 0, 32px 32px;

    animation: bwmovingOptimized 0.1s linear infinite;

    will-change: transform;
  }

  @keyframes bwmovingOptimized {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-64px);
    }
  }


    #blackwhite2 {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  #blackwhite2::before {
    content: "";
    position: absolute;
    left: -32px;
    top: -32px;
    width: calc(100% + 32px);
    height: calc(100% + 32px);

    background:
      linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000 100%),
      linear-gradient(45deg, #000 25%, white 25%, white 75%, #000 75%, #000 100%);
    background-size: 32px 4px;
    background-position: 0 0, 16px 16px;
    background-repeat: repeat;

    animation: bwmovingOptimized2 0.15s linear infinite;
    will-change: transform;
  }

  @keyframes bwmovingOptimized2 {
    0% {
      transform: translateX(0) translateY(0);
    }
    100% {
      transform: translateX(32px) translateY(32px);
    }
  }


  #blackwhite3 {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  #blackwhite3::before {
    content: "";
    position: absolute;
    left: -32px;
    top: 0;
    width: calc(100% + 32px);
    height: 100%;

    background:
      linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000 100%),
      linear-gradient(45deg, #000 25%, white 25%, white 75%, #000 75%, #000 100%);
    background-size: 32px 16px;
    background-position: 0 0, 16px 16px;
    background-repeat: repeat;

    animation: bwmovingOptimized3 0.1s linear infinite;
    will-change: transform;
  }

  @keyframes bwmovingOptimized3 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(32px);
    }
  }


  #blackwhite4 {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;

  }

  #blackwhite4::before,
  #blackwhite4::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background-size: 64px 32px;
    background-repeat: repeat;
    will-change: transform;
  }


  #blackwhite4::before {
    width: calc(100% + 96px);
    height: calc(100% + 32px);
    background-image: linear-gradient(45deg, #000 25%, white 25%, white 75%, #000 75%, #000 100%);

    background-position: -32px 32px;
    animation: bwmovingOptimized4_BottomLayer 0.2s linear infinite;
  }

  #blackwhite4::after {
    width: calc(100% + 32px);
    height: calc(100% + 32px);
    background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000 100%);

    background-position: 0 0;
    animation: bwmovingOptimized4_TopLayer 0.2s linear infinite;
  }


  @keyframes bwmovingOptimized4_BottomLayer {
    0% {
      transform: translateX(0) translateY(0);
    }
    100% {

      transform: translateX(-96px) translateY(-32px);
    }
  }


  @keyframes bwmovingOptimized4_TopLayer {
    0% {
      transform: translateX(0) translateY(0);
    }
    100% {

      transform: translateX(-32px) translateY(-32px);
    }
  }












 #noiseA,#noiseA2,#noiseA3,#noiseA4, #noiseB,#noiseC,#noiseC2,#noiseD,#noiseD2 {
   height: 100%;
   width: 100%;
   z-index: 2;
 }

 #blocks {
   margin: 0;
   padding: 0;
   height: 100%;
   width: 900%;
   position: relative;
   z-index: 3;


   background: repeating-linear-gradient(to right,
     #f00 0,
     #f00 100px,
     #0f0 100px,
     #0f0 200px,
     #00f 200px,
     #00f 300px
   );
   background-size: 300px 300px;
   animation: B1stop 9s linear infinite;
 }

 @keyframes B1stop {
   from {
       transform: translateX(100%);

   }
   to{
       transform: translateX(100%);
   }
 }

 @keyframes B1start {
   from {
       transform: translateX(0%);

   }
   to{
       transform: translateX(-50%);
   }
 }

 #blocks2 {
   margin: 0;
   padding: 0;
   height: 100%;
   width: 900%;
   position: relative;
   z-index: 3;


   background: repeating-linear-gradient(to right,
     #f00 0,
     #f00 10px,
     #0f0 10px,
     #0f0 20px,
     #00f 20px,
     #00f 30px
   );
   background-size: 300px 300px;
   animation: B2stop 4.5s linear infinite;
 }

 @keyframes B2stop {
   from {
       transform: translateX(100%);

   }
   to{
       transform: translateX(100%);
   }
 }

 @keyframes B2start {
   from {
       transform: translateX(-50%);

   }
   to{
       transform: translateX(-20%);
   }
 }







 #nineBlocks {
   margin: 0;
   width: 100%;
   height: 900vw;
   position:absolute;
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" width="60" height="30"><rect width="20" height="10" fill="red"/><rect y="10" width="20" height="10" fill="rgb(0, 255, 0)"/><rect y="20" width="20" height="10" fill="blue"/><rect x="20" width="20" height="10" fill="blue"/><rect x="20" y="10" width="20" height="10" fill="red"/><rect x="20" y="20" width="20" height="10" fill="rgb(0, 255, 0)"/><rect x="40" width="20" height="10" fill="rgb(0, 255, 0)"/><rect x="40" y="10" width="20" height="10" fill="blue"/><rect x="40" y="20" width="20" height="10" fill="red"/></svg>');

   background-size: auto auto;
   background-repeat: repeat;

   animation: nineDown 9s linear infinite;
   z-index: 2;


 }





 @keyframes nineDown {
   from{
     transform: translateY(100%);
   }
   to{
     transform:translateY(100%);
   }
 }

 @keyframes nineDown1 {
   from{
     transform: translateY(-50%);
   }
   to{
     transform:translateY(0%);
   }
 }


#stripY1,
#stripY2,
#stripX1,
#stripX2 {
  margin: 0;
  position: relative;
  left: 0;
  will-change: transform;
}

#stripY1 {
  width: 100%;
  height: calc(100% + 600px);
  background: repeating-linear-gradient(
    to bottom,
    #00FFFF 0 200px,
    #FF00FF 200px 400px,
    #FFFF00 400px 600px
  );
}

@keyframes moveY1 {
  from { transform: translateY(0); }
  to { transform: translateY(-600px); }
}

#stripY2 {
  width: 100%;
  height: calc(100% + 20px);
  background: repeating-linear-gradient(
    to bottom,
    #00FFFF 0 calc(20px / 3),
    #FF00FF calc(20px / 3) calc(40px / 3),
    #FFFF00 calc(40px / 3) 20px
  );
}

@keyframes moveY2 {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}

#stripX1 {
  width: calc(100% + 120px);
  height: 100%;
  background: repeating-linear-gradient(
    to right,
    #00FFFF 0 40px,
    #FF00FF 40px 80px,
    #FFFF00 80px 120px
  );
}

@keyframes moveX1 {
  from { transform: translateX(0); }
  to { transform: translateX(-120px); }
}

#stripX2 {
  width: calc(100% + 18px);
  height: 100%;
  background: repeating-linear-gradient(
    to right,
    #00FFFF 0 6px,
    #FF00FF 6px 12px,
    #FFFF00 12px 18px
  );
}

@keyframes moveX2 {
  from { transform: translateX(0); }
  to { transform: translateX(-18px); }
}

/* ⚡ [零重排性能架构] 所有图案默认：不可见 + 动画冻结 + 零占位
   visibility:hidden 保持元素在渲染树中（避免 display:none 的重排开销）
   position:absolute + width/height:0 确保不占位（修复 position:relative 图案堆叠导致黑屏）
   animation-play-state:paused 冻结 GPU 动画计算
   仅 .is-playing 图案解冻运行，同一时刻始终只有 1 个图案消耗 GPU */
.animations:not(.is-playing) {
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}
.animations:not(.is-playing),
.animations:not(.is-playing)::before,
.animations:not(.is-playing)::after,
.animations:not(.is-playing) * {
    animation-play-state: paused !important;
}
.animations.is-playing {
    visibility: visible !important;
}
.animations.is-playing,
.animations.is-playing::before,
.animations.is-playing::after,
.animations.is-playing * {
    animation-play-state: running !important;
}




/* 计时器容器 */
/* .timer-button{
  background: url("/times.png") no-repeat center center;
  grid-area: 1 / 1 / 3 / 2;
  border: none;
  width: 64px;
  height: 64px;
  cursor: pointer;
} */


/* 计时器仪表盘组件 */
.timer-containerA, .timer-containerB {
    text-align: left;
    margin: 0;
    line-height: 1;
}




.shareButton{
  background: url('icon/pixelshare.png') no-repeat center center;
  background-size: contain;
  grid-area: 1 / 1 / 2 / 2;
  border: none;
  width: 48px;
  height: 48px;
  cursor: pointer;
}

/* 深度模式下所有共有动画图案适度提速 (1.6x ~ 2.0x 动态超频) */
.container.turbo-running #checker-invert::before {
    animation-duration: 0.12s !important; /* 黑白方格棋盘 (原版 0.22s -> 0.12s) */
}
.container.turbo-running #blackwhite::before {
    animation-duration: 0.06s !important; /* 经典黑白方格 (原版 0.10s -> 0.06s) */
}
.container.turbo-running #rgb-cycle {
    animation-duration: 2.0s !important; /* RGB平滑全色谱轮换 (原版 4.0s -> 2.0s，跑满进阶单次2秒周期) */
}
.container.turbo-running #blocks {
    animation-duration: 2.2s !important; /* RGB三色粗竖条纹 (原版 9.0s -> 2.2s) */
}
.container.turbo-running #blackwhite2::before {
    animation-duration: 0.08s !important; /* 细黑白方格 (原版 0.15s -> 0.08s) */
}
.container.turbo-running #nineBlocks {
    animation-duration: 2.5s !important; /* 九宫格下落 (原版 9.0s -> 2.5s) */
}
.container.turbo-running #snow-noise .lab-a {
    animation-duration: 0.09s !important; /* 像素雪花噪点 (原版 0.16s -> 0.09s) */
}
.container.turbo-running #blocks2 {
    animation-duration: 1.5s !important; /* RGB三色细竖条纹 (原版 4.5s -> 1.5s) */
}
.container.turbo-running #blackwhite3::before {
    animation-duration: 0.06s !important; /* 黑白长方块 (原版 0.10s -> 0.06s) */
}
/* 深度模式提速：电磁干扰场 (标准 0.15s -> 深度 0.09s) */
.container.turbo-running #emi-field::before {
    animation-duration: 0.09s !important;
}

/* 🌪️ 深度模式随机动态反向 (支持斜向/横向/纵向/径向全元素原生反向) */
.container.turbo-running .animations.turbo-dir-reverse,
.container.turbo-running .animations.turbo-dir-reverse::before,
.container.turbo-running .animations.turbo-dir-reverse::after,
.container.turbo-running .animations.turbo-dir-reverse * {
    animation-direction: reverse !important;
}

/* =====================================================
   🆕 新增深度模式图案 CSS
   纯CSS动画 · 零Canvas/JS渲染 · GPU合成层加速
   ===================================================== */

/* --- #1 等离子熔岩脉冲 (Plasma Lava Pulse) --- */
#plasma-lava {
    position: absolute; inset: 0; background: #000; z-index: 2;
}
#plasma-lava::before,
#plasma-lava::after {
    content: ""; position: absolute; inset: auto;
    width: 200vmax; height: 200vmax; left: 50%; top: 50%; margin: -100vmax; border-radius: 50%;
}
#plasma-lava::before {
    background: repeating-radial-gradient(
        circle at center,
        #ff0055 0, #ff0055 20px, #000000 20px, #000000 40px,
        #ffcc00 40px, #ffcc00 60px, #000000 60px, #000000 80px
    );
    animation: plasmaZoomA 0.6s linear infinite;
}
#plasma-lava::after {
    background: repeating-radial-gradient(
        circle at center,
        #00ffcc 0, #00ffcc 16px, transparent 16px, transparent 32px,
        #3333ff 32px, #3333ff 48px, transparent 48px, transparent 64px
    );
    animation: plasmaZoomB 0.45s linear infinite;
    mix-blend-mode: screen;
}
@keyframes plasmaZoomA {
    0%   { transform: scale3d(0.1, 0.1, 1); }
    100% { transform: scale3d(2.5, 2.5, 1); }
}
@keyframes plasmaZoomB {
    0%   { transform: scale3d(0.15, 0.15, 1); }
    100% { transform: scale3d(3.0, 3.0, 1); }
}

/* --- #2 电磁干扰场 (EMI Interference Field) — 标准+深度双模共享 --- */
#emi-field {
    position: absolute; inset: 0; overflow: hidden; background: #000; z-index: 2;
}
#emi-field::before {
    content: "";
    position: absolute;
    width: calc(100vw + 100vh + 240px); height: calc(100vw + 100vh + 240px);
    left: 50%; top: 50%; margin: calc(-50vw - 50vh - 120px);
    background: repeating-linear-gradient(
        0deg,
        #00ff88 0 4px, #000000 4px 8px,
        #ff00ff 8px 12px, #000000 12px 16px,
        #00ccff 16px 20px, #000000 20px 24px,
        #ffff00 24px 28px, #000000 28px 32px
    );
    animation: emiDiagMove 0.15s linear infinite;
}
@keyframes emiDiagMove {
    0%   { transform: rotate(45deg) translate3d(0, 0, 0); }
    100% { transform: rotate(45deg) translate3d(0, -32px, 0); }
}

/* --- #3 磁暴脉冲环 (Magnetic Storm Rings) --- */
#mag-storm {
    position: absolute; inset: 0; background: #000; z-index: 2;
}
#mag-storm::before,
#mag-storm::after {
    content: ""; position: absolute;
    width: 300vmax; height: 300vmax;
    border-radius: 50%;
}
#mag-storm::before {
    left: -50%; top: -50%;
    background: repeating-radial-gradient(
        circle at 30% 30%,
        #ff0033 0, #ff0033 12px, #000 12px, #000 24px,
        #00ff66 24px, #00ff66 36px, #000 36px, #000 48px
    );
    animation: magPulseA 0.55s linear infinite;
}
#mag-storm::after {
    right: -50%; bottom: -50%;
    background: repeating-radial-gradient(
        circle at 70% 70%,
        #0088ff 0, #0088ff 10px, transparent 10px, transparent 20px,
        #ffcc00 20px, #ffcc00 30px, transparent 30px, transparent 40px
    );
    animation: magPulseB 0.42s linear infinite;
    mix-blend-mode: screen;
}
@keyframes magPulseA {
    0%   { transform: scale3d(0.08, 0.08, 1); }
    100% { transform: scale3d(1.8, 1.8, 1); }
}
@keyframes magPulseB {
    0%   { transform: scale3d(0.1, 0.1, 1); }
    100% { transform: scale3d(2.2, 2.2, 1); }
}

/* --- #4 像素瀑布 (Pixel Waterfall) --- */
#pixel-fall {
    position: absolute; inset: 0; overflow: hidden; background: #000; z-index: 2;
}
#pixel-fall::before,
#pixel-fall::after {
    content: ""; position: absolute; left: 0; width: 100%;
}
#pixel-fall::before {
    top: -200%; height: 400%;
    background:
        repeating-linear-gradient(to bottom, #ff0000 0 4px, #000 4px 8px, #00ff00 8px 12px, #000 12px 16px, #0000ff 16px 20px, #000 20px 24px),
        repeating-linear-gradient(to right, transparent 0 6px, rgba(0,0,0,0.5) 6px 7px);
    background-size: 100% 100%, 7px 100%;
    animation: pixelFallA 0.18s linear infinite;
}
#pixel-fall::after {
    top: -100%; height: 300%;
    background: repeating-linear-gradient(
        to bottom,
        #ffff00 0 2px, transparent 2px 6px,
        #ff00ff 6px 8px, transparent 8px 12px,
        #00ffff 12px 14px, transparent 14px 18px
    );
    animation: pixelFallB 0.25s linear infinite;
    mix-blend-mode: screen;
}
@keyframes pixelFallA {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, 24px, 0); }
}
@keyframes pixelFallB {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, 18px, 0); }
}

/* --- #5 交叉网格波 (Cross Grid Wave) --- */
#cross-grid {
    position: absolute; inset: 0; overflow: hidden; background: #000; z-index: 2;
}
#cross-grid::before,
#cross-grid::after {
    content: ""; position: absolute;
}
#cross-grid::before {
    top: -100%; left: 0; width: 100%; height: 300%;
    background: repeating-linear-gradient(
        to bottom,
        #ff0055 0 6px, transparent 6px 18px,
        #00ff88 18px 24px, transparent 24px 36px,
        #3366ff 36px 42px, transparent 42px 54px
    );
    animation: crossGridV 0.28s linear infinite;
}
#cross-grid::after {
    top: 0; left: -100%; width: 300%; height: 100%;
    background: repeating-linear-gradient(
        to right,
        #ffcc00 0 6px, transparent 6px 18px,
        #00ffff 18px 24px, transparent 24px 36px,
        #ff00ff 36px 42px, transparent 42px 54px
    );
    animation: crossGridH 0.22s linear infinite;
    mix-blend-mode: screen;
}
@keyframes crossGridV {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(0, 54px, 0); }
}
@keyframes crossGridH {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(54px, 0, 0); }
}

/* --- #6 裂变碎片 (Fission Fragments) — 连续360°平滑旋转 --- */
#fission-spin {
    position: absolute; inset: 0; background: #000; z-index: 2;
}
#fission-spin::before,
#fission-spin::after {
    content: ""; position: absolute; inset: auto;
    width: 200vmax; height: 200vmax; left: 50%; top: 50%; margin: -100vmax;
    border-radius: 50%;
}
#fission-spin::before {
    background: conic-gradient(
        #ff0000 0deg, #ff0000 30deg,
        #00ff00 30deg, #00ff00 60deg,
        #0000ff 60deg, #0000ff 90deg,
        #ffff00 90deg, #ffff00 120deg,
        #ff00ff 120deg, #ff00ff 150deg,
        #00ffff 150deg, #00ffff 180deg,
        #ff8800 180deg, #ff8800 210deg,
        #88ff00 210deg, #88ff00 240deg,
        #0088ff 240deg, #0088ff 270deg,
        #ff0088 270deg, #ff0088 300deg,
        #ffffff 300deg, #ffffff 330deg,
        #000000 330deg, #000000 360deg
    );
    animation: fissionSpin 2.4s linear infinite;
}
#fission-spin::after {
    background: repeating-radial-gradient(
        circle at center,
        #000 0 8px, transparent 8px 20px,
        #000 20px 28px, transparent 28px 40px
    );
    animation: fissionPulse 0.35s linear infinite;
}
@keyframes fissionSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes fissionPulse {
    0%   { transform: scale3d(2.5, 2.5, 1); }
    100% { transform: scale3d(0.1, 0.1, 1); }
}

/* --- #7 色谱扫射 (Spectrum Sweep) — 无CRT纹理 --- */
#spectrum-sweep {
    position: absolute; inset: 0; overflow: hidden; background: #000; z-index: 2;
}
#spectrum-sweep::before {
    content: ""; position: absolute;
    top: 0; left: -100%; width: 300%; height: 100%;
    background: repeating-linear-gradient(
        to right,
        #ff0000 0 24px, #ff8800 24px 48px,
        #ffff00 48px 72px, #00ff00 72px 96px,
        #00ffff 96px 120px, #0000ff 120px 144px,
        #8800ff 144px 168px, #ff00ff 168px 192px,
        #ffffff 192px 216px, #000000 216px 240px
    );
    animation: specSweepH 0.6s linear infinite;
}
@keyframes specSweepH {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(240px, 0, 0); }
}

/* --- #8 逆行星轨 (Retrograde Orbit) --- */
#retrograde-orbit {
    position: absolute; inset: 0; background: #000; z-index: 2;
}
#retrograde-orbit::before,
#retrograde-orbit::after {
    content: ""; position: absolute; inset: auto;
    width: 200vmax; height: 200vmax; left: 50%; top: 50%; margin: -100vmax;
}
#retrograde-orbit::before {
    background: repeating-conic-gradient(
        from 0deg,
        #ff0055 0deg 15deg, #000 15deg 30deg,
        #00ffcc 30deg 45deg, #000 45deg 60deg,
        #ffcc00 60deg 75deg, #000 75deg 90deg
    );
    animation: retroSpinCW 1.2s linear infinite;
}
#retrograde-orbit::after {
    border-radius: 50%;
    background: repeating-radial-gradient(
        circle at center,
        #0066ff 0 14px, transparent 14px 28px,
        #ff00ff 28px 42px, transparent 42px 56px,
        #00ff66 56px 70px, transparent 70px 84px
    );
    animation: retroPulseCCW 0.5s linear infinite;
    mix-blend-mode: screen;
}
@keyframes retroSpinCW {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(90deg); }
}
@keyframes retroPulseCCW {
    0%   { transform: rotate(0deg) scale3d(0.1, 0.1, 1); }
    100% { transform: rotate(-90deg) scale3d(2.5, 2.5, 1); }
}


/* --- 倒计时期间全面锁定所有交互，杜绝任何UI误触或弹窗残留 --- */
.frontM.is-counting-down,
.frontM.is-counting-down * {
  pointer-events: none !important;
  user-select: none !important;
}

/* --- 2. 原版经典动态渐变背景 (第 1 层：底层平滑滑动 · 极致低功耗) --- */
.frontM-background {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 150%;
  height: 100%;
  z-index: 1;
  transform: translateZ(0);
  backface-visibility: hidden;
  background: linear-gradient(121deg, rgb(82, 118, 255) 20%, rgb(160, 130, 235) 55%, rgb(255, 138, 168) 100%);
}

/* --- 3. 像素点阵纹理层 (第 2 层：在背景之上，文字按钮之下) --- */
.frontM::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  transform: translateZ(0);
  backface-visibility: hidden;

  /* 极轻微的微光像素点阵 (预渲染 SVG 平铺，零 GPU 实时计算) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Ccircle cx='2' cy='2' r='0.7' fill='white' fill-opacity='0.15'/%3E%3Crect x='0' y='3' width='4' height='1' fill='black' fill-opacity='0.035'/%3E%3C/svg%3E");
  background-size: 4px 4px;
  background-repeat: repeat;
}

/* --- 4. [已移除] 扫描线动画层 (降低主页挂机发热) --- */
.frontM::before {
  display: none;
}

/* --- 5. [已清理] 渐变背景与扫描线动画已移除，Keyframes 不再需要 --- */

/* --- 6. [已清理] 动画已移除，暂停状态不再需要 --- */








 .centerContainer {
     width: 100%;
     flex: 1;
     min-height: 0;
     box-sizing: border-box;
     padding: 1rem 12px calc(120px + env(safe-area-inset-bottom, 0px)) 12px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 1rem;
     position: relative;
     z-index: 25;
     pointer-events: none;
     /* [核心性能优化] 独立静态 GPU 纹理层，文字与按钮只渲染一次并缓存，背景动画绝不触发文字重绘 */
     transform: translateZ(0);
     backface-visibility: hidden;
     contain: layout style;
 }

 .centerContainer > * {
     pointer-events: auto;
 }

 #myButton {
     font-family: 'PressStart2P-Regular', sans-serif;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: auto;
     min-width: 0;
     max-width: 86%;
     padding: 0 1.8rem;
     height: 48px;
     min-height: 48px;
     flex-shrink: 0;
     margin-top: 0;        /* 间距由上方胶囊统一控制，更加均衡自然 */
     border: 3.5px solid #042412;
     border-radius: 4px;   /* 更加硬朗锋利的复古像素微圆角 */
     /* [街机翡翠电光绿] 天然代表 START/修复，与上方黄色警示语完美区分 */
     background: linear-gradient(180deg, #18f082 0%, #0db860 58%, #089e50 100%);
     /* 紧凑精致的 4px 3D 实体阴影 + 顶部晶体高光 */
     box-shadow:
         inset 0 2.5px 0 rgba(255, 255, 255, 0.45),
         inset 0 -2.5px 0 rgba(0, 0, 0, 0.25),
         0 4px 0 #042412,
         0 6px 0 rgba(0, 0, 0, 0.45);
     font-size: 1.5rem;
     font-weight: 700;
     letter-spacing: 3.5px;
     color: #ffffff;
     text-shadow:
         -1.5px -1.5px 0 #042915,
          1.5px -1.5px 0 #042915,
         -1.5px  1.5px 0 #042915,
          1.5px  1.5px 0 #042915,
         -2px    0     0 #042915,
          2px    0     0 #042915,
          0     -2px   0 #042915,
          0      2px   0 #042915,
          0      2.5px 0 #042915;
     cursor: pointer;
     position: relative;
     z-index: 10;
     transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.1s ease;
     user-select: none;
     line-height: 1;
     gap: 0.7rem;
 }
 #myButton .pxicon {
     width: 20px;
     height: 20px;
     display: inline-block;
     vertical-align: middle;
     transform-origin: center center;
     color: inherit;
     will-change: transform;
     transition: color 0.15s ease;
 }

 /* ⚡ 闪电被金币砸中 ➔ 纯矢量变金黄 (#fde047)，零模糊外发光滤镜，性能极高！每次触发高能电击左右晃动 */
 #myButton .pxicon.zap-gold-energized {
     color: #fde047 !important;
     animation: zapElectrifyWobble 0.44s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
 }

 @keyframes zapElectrifyWobble {
     0% {
         transform: scale(1) rotate(0deg);
         color: #ffffff;
     }
     20% {
         transform: scale(1.55) rotate(-22deg);
         color: #ffffff;
     }
     40% {
         transform: scale(1.4) rotate(18deg);
         color: #fde047;
     }
     60% {
         transform: scale(1.25) rotate(-12deg);
         color: #fde047;
     }
     80% {
         transform: scale(1.1) rotate(6deg);
         color: #fde047;
     }
     100% {
         transform: scale(1) rotate(0deg);
         color: #fde047;
     }
 }

 /* 💥 金币从天砸中闪电时：按钮受重力稍稍下压 2px (真按4px的一半) 并轻快回弹 */
 #myButton.btn-impact-press {
     animation: buttonImpactPress 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) both !important;
 }

 @keyframes buttonImpactPress {
     0% {
         transform: translateY(0);
         box-shadow: 0 4px 0 #2b074a, 0 6px 0 rgba(0, 0, 0, 0.55);
     }
     35% {
         transform: translateY(2px);
         box-shadow: 0 2px 0 #2b074a, 0 4px 0 rgba(0, 0, 0, 0.55);
     }
     70% {
         transform: translateY(-0.6px);
         box-shadow: 0 4.6px 0 #2b074a, 0 6.6px 0 rgba(0, 0, 0, 0.55);
     }
     100% {
         transform: translateY(0);
         box-shadow: 0 4px 0 #2b074a, 0 6px 0 rgba(0, 0, 0, 0.55);
     }
 }

 #myButton:hover {
    background: linear-gradient(180deg, #2bff93 0%, #15cc6e 58%, #0eb05a 100%);
    color: #ffffff;
    text-decoration: none;
}

#myButton:active {
    transform: translateY(4px);
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.35),
        0 0 0 #042412,
        0 1.5px 0 rgba(0, 0, 0, 0.4);
}

/* 状态 1: 开启 Turbo 深度模式 (有次数) ➔ 电光紫能 START */
#myButton.turbo-active {
    border-color: #2b074a;
    background: #7c3aed;
    color: #ffffff;
    box-shadow:
        0 4px 0 #2b074a,
        0 6px 0 rgba(0, 0, 0, 0.55);
    text-shadow: none;
}

#myButton.turbo-active:hover {
    background: #6d28d9;
}

#myButton.turbo-active:active {
    transform: translateY(4px);
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.35),
        0 0 0 #2b074a,
        0 1.5px 0 rgba(0, 0, 0, 0.4);
}

/* 状态 2: 停留在 Turbo 深度模式 (但次数归零) ➔ 街机电光黄金充能大按钮 */
#myButton.recharge-cta {
    border-color: #451a03;
    background: linear-gradient(180deg, #fde047 0%, #eab308 50%, #ca8a04 100%);
    color: #1a0c02;
    font-weight: bold;
    box-shadow:
        0 4px 0 #451a03,
        0 6px 0 rgba(0, 0, 0, 0.55);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    font-size: 1.85rem;
    letter-spacing: 1.5px;
}

#myButton.recharge-cta:hover {
    background: linear-gradient(180deg, #fef08a 0%, #facc15 50%, #d97706 100%);
}

#myButton.recharge-cta:active {
    transform: translateY(4px);
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.35),
        0 0 0 #451a03,
        0 1.5px 0 rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   全域单键即切胶囊 (Segmented Arcade Capsule) - 紧凑副级控制器
   ========================================================================== */
.capsule-unified {
    display: inline-flex;
    align-items: stretch;
    background: rgba(10, 14, 28, 0.88);
    border: 2.5px solid #000;
    border-radius: 5px;
    padding: 0.25rem 0.35rem;
    margin-top: 0.8vh;
    margin-bottom: 1.6vh;
    box-shadow: 0 2.5px 0 #000;
    cursor: default;
    user-select: none;
    transition: background 0.15s ease;
    gap: 0.25rem;
    max-width: 96%;
    width: auto;
    overflow: visible;
    box-sizing: border-box;
    transform: scale(1);
    transform-origin: center center;
}
.capsule-unified.is-hidden,
#modeCapsule[hidden],
#modeCapsule:not(.is-turbo-ui) {
    display: none !important;
}

.capsule-unified:hover {
    background: rgba(16, 22, 44, 0.95);
}

.capsule-half {
    padding: 0.4rem 0.85rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0;
    border-radius: 3px;
    border: 2px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: transform 0.06s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    white-space: nowrap;
    overflow: visible;
    min-width: 0;
    min-height: 28px;
    flex: 0 0 auto;
    line-height: 1.15;
    box-sizing: border-box;
    cursor: pointer;
}
.capsule-half .pxicon {
    width: 13px;
    height: 13px;
}

/* 标准模式选中态 */
.capsule-unified.is-std .half-std {
    background: #1e293b;
    color: #38ef7d;
    border-color: #38ef7d;
    box-shadow: 0 1.5px 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.capsule-unified.is-std .half-turbo {
    color: #64748b;
}

/* 深度高能模式选中态 (有次数时高亮电光紫) */
.capsule-unified.is-turbo .half-std {
    color: #64748b;
}
.capsule-unified.is-turbo .half-turbo {
    background: #7c3aed;
    color: #ffffff;
    border-color: #c084fc;
    box-shadow: 0 1.5px 0 #000;
}

/* 深度高能模式选中态 (无次数归零时，整体弱化暗化，表现为待充能低调状态) */
.capsule-unified.is-turbo.no-credits .half-turbo {
    background: #23193d;
    color: #b3a2d6;
    border-color: #58457d;
    box-shadow: 0 1.5px 0 #000;
}

.badge-coin-gif {
    width: 12px;
    height: 12px;
    transform: scaleX(0.78);
    object-fit: contain;
    vertical-align: middle;
    image-rendering: pixelated;
    filter: drop-shadow(0.8px 0 0 #000) drop-shadow(-0.8px 0 0 #000) drop-shadow(0 0.8px 0 #000) drop-shadow(0 -0.8px 0 #000);
    display: inline-block;
    transform-origin: center center;
    margin-right: 0;
    transition: filter 0.3s ease;
}
/* 0 次数时金币变灰 (保留背景底色区分按钮区域) */
.badge-coin-gif.depleted {
    filter: grayscale(1) opacity(0.45)
        drop-shadow(0.8px 0 0 #000) drop-shadow(-0.8px 0 0 #000)
        drop-shadow(0 0.8px 0 #000) drop-shadow(0 -0.8px 0 #000);
}

.badge-tag {
    background: rgba(0, 0, 0, 0.5);
    padding: 0.15rem 0.3rem;
    border-radius: 3px;
    font-size: 0.95rem;
    border: 1px solid rgba(192, 132, 252, 0.35);
    display: inline-flex;
    align-items: center;
    gap: 0.18rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.badge-tag .pxicon {
    width: 10px;
    height: 10px;
}
.capsule-credit {
    flex: 0 0 auto;
    align-self: center;
    min-width: 2.4rem;
    min-height: 26px;
    margin-left: 0.1rem;
    padding: 0.2rem 0.45rem;
    cursor: pointer;
    color: #fbbf24;
    box-sizing: border-box;
    border-left: 2px dashed #2a3348;
    border-radius: 0 3px 3px 0;
}
.capsule-unified.is-turbo .badge-tag {
    background: #392b5e;
    color: #f3e8ff;
    border-color: #7e22ce;
    font-weight: normal;
}
.capsule-unified.is-turbo .capsule-credit {
    border-left-color: rgba(192, 132, 252, 0.45);
}
.capsule-unified.is-turbo.no-credits .badge-tag {
    background: #201738;
    color: #a78bfa;
    border-color: #4c376e;
}

/* 强化徽章的高亮与重击反馈 */
.badge-tag.impact-slam {
    animation: badgeImpact 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

@keyframes badgeImpact {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); filter: brightness(1.4); border-color: #fde047 !important; background: #581c87 !important; color: #fff !important; }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.capsule-unified.impact-shake {
    animation: capsuleShake 0.25s ease !important;
}

@keyframes capsuleShake {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(3.5px); }
    50% { transform: translateY(-2.5px); }
    75% { transform: translateY(1.5px); }
}

/* --- ✨ 深度模式推荐角标 (一次性闪光金徽章) --- */
.turbo-sparkle-badge {
    position: absolute;
    top: -8px;
    right: -6px;
    width: 22px;
    height: 22px;
    color: #fbbf24;
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.7));
    animation: sparkleShimmer 1.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 5;
}
.half-turbo {
    position: relative;
}
/* 角标被标记为已读后隐藏 */
.turbo-sparkle-badge.is-dismissed {
    display: none;
}
@keyframes sparkleShimmer {
    0%, 100% { opacity: 0.6; transform: scale(0.9); color: #fbbf24; }
    50% { opacity: 1; transform: scale(1.15); color: #fef08a; }
}

/* --- 🎯 标准模式结束后的深度模式推荐弹窗 --- */
#turboPromoModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #151930;
    border: 3.5px solid #f59e0b;
    border-radius: 12px;
    padding: 1.6rem 1.15rem;
    width: min(48rem, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    z-index: 600;
    box-shadow: 0 4px 0 #000, 0 0 0 100vmax rgba(0, 0, 0, 0.75);
    text-align: center;
    color: #ffffff;
    pointer-events: auto;
    font-family: 'PressStart2P-Regular', sans-serif;
}
#turboPromoModal h2 {
    margin: 0 0 1.4rem;
    font-size: 1.7rem;
    color: #fbbf24;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}
#turboPromoModal p {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0 0 1.8rem;
}

/* --- 🌠 掉落的金币容器与动效 --- */
#fallingCoinsOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 10000;
    overflow: hidden;
}

.slamming-coin-wrapper {
    position: absolute;
    width: 32px;
    height: 38px;
    transform-origin: center center;
    opacity: 0;
    filter: drop-shadow(1.5px 0 0 #000) drop-shadow(-1.5px 0 0 #000) drop-shadow(0 1.5px 0 #000) drop-shadow(0 -1.5px 0 #000) drop-shadow(0 3px 0 rgba(0, 0, 0, 0.8));
}

.slamming-coin-wrapper img {
    width: 100%;
    height: 100%;
    transform: scaleX(0.62);
    object-fit: contain;
    image-rendering: pixelated;
}

@keyframes coinDropAndSlam {
    0% {
        opacity: 1;
        transform: translate(var(--startX), -80px) scale(1.1, 1.25) rotate(0deg);
    }
    65% {
        opacity: 1;
        transform: translate(var(--targetX), var(--targetY)) scale(0.9, 0.85) rotate(180deg);
    }
    75% {
        opacity: 1;
        transform: translate(var(--targetX), calc(var(--targetY) - 16px)) scale(0.8, 1.1) rotate(220deg);
    }
    88% {
        opacity: 1;
        transform: translate(var(--targetX), var(--targetY)) scale(0.85, 0.85) rotate(250deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--targetX), var(--targetY)) scale(0.2) rotate(270deg);
    }
}

.coin-sparkle {
    position: absolute;
    font-size: 14px;
    pointer-events: none;
    will-change: transform, opacity;
    animation: sparkleBurst 0.5s ease-out forwards;
}

@keyframes sparkleBurst {
    0% {
        opacity: 1;
        transform: translate(var(--x), var(--y)) scale(0.6);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--x) + var(--vx)), calc(var(--y) + var(--vy))) scale(1.2);
    }
}

.power-up-toast {
    position: absolute;
    font-family: 'PressStart2P-Regular', sans-serif;
    font-size: 1.25rem;
    font-weight: bold;
    color: #fde047;
    text-shadow: 0 2px 0 #000, 0 3px 0 #451a03;
    white-space: nowrap;
    pointer-events: none;
    will-change: transform, opacity;
    animation: floatPowerUp 1.0s ease-out forwards;
    z-index: 10001;
}

@keyframes floatPowerUp {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.85);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -10px) scale(1.05);
    }
    40% {
        transform: translate(-50%, -18px) scale(1);
    }
    75% {
        opacity: 1;
        transform: translate(-50%, -28px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -38px) scale(0.95);
    }
}

/* 🌟 系统全局常驻通知气泡 (大字号、金边高对比、3.2秒舒适阅读) */
.system-notification-toast {
    position: fixed;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(18, 22, 42, 0.96);
    border: 2.5px solid #f59e0b;
    border-radius: 8px;
    padding: 1.1rem 1.8rem;
    max-width: 90vw;
    z-index: 10002;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 16px rgba(245, 158, 11, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    font-family: 'PressStart2P-Regular', sans-serif;
    font-size: 1.15rem;
    line-height: 1.5;
    color: #fef08a;
    text-shadow: 0 2px 0 #000;
    pointer-events: none;
    animation: notificationToastAnim 3.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.system-notification-toast .pxicon {
    width: 20px;
    height: 20px;
    color: #f59e0b;
    flex-shrink: 0;
}

@keyframes notificationToastAnim {
    0% {
        opacity: 0;
        transform: translate(-50%, -15px) scale(0.92);
    }
    10% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
    85% {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -10px) scale(0.95);
    }
}

@keyframes buttonPowerSurge {
    0% { transform: scale(1); filter: brightness(1); }
    30% { transform: scale(1.08); filter: brightness(1.5); }
    70% { transform: scale(0.96); }
    100% { transform: scale(1); filter: brightness(1); }
}

.button-surge {
    animation: buttonPowerSurge 0.5s ease-out !important;
}

/* 🪙 弹跳投币实体 (从右侧徽章 ➔ 跨越腾空砸向左侧闪电图标) */
.inserting-coin-wrapper {
    position: absolute;
    width: 26px;
    height: 26px;
    transform-origin: center center;
    opacity: 0;
    filter: drop-shadow(1.2px 0 0 #000) drop-shadow(-1.2px 0 0 #000) drop-shadow(0 1.2px 0 #000) drop-shadow(0 -1.2px 0 #000);
    z-index: 10002;
}

.inserting-coin-wrapper img {
    width: 100%;
    height: 100%;
    transform: scaleX(0.65);
    object-fit: contain;
    image-rendering: pixelated;
}

/* 🚀 华丽高空跨越抛物线 ➔ 极速垂直砸向闪电图标 */
@keyframes coinArcToZap {
    0% {
        opacity: 1;
        transform: translate(var(--startX), var(--startY)) scale(1) rotate(0deg);
    }
    35% {
        opacity: 1;
        transform: translate(calc(var(--startX) + (var(--targetX) - var(--startX)) * 0.4), calc(var(--startY) - 130px)) scale(1.55) rotate(-180deg);
    }
    65% {
        opacity: 1;
        transform: translate(calc(var(--startX) + (var(--targetX) - var(--startX)) * 0.8), calc(var(--startY) - 75px)) scale(1.3) rotate(-320deg);
    }
    85% {
        opacity: 1;
        transform: translate(var(--targetX), calc(var(--targetY) - 15px)) scale(0.9, 1.25) rotate(-420deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--targetX), var(--targetY)) scale(0.2) rotate(-460deg);
    }
}

/* ⚡✨ 闪电与各色星星迸发粒子 */
.burst-particle {
    position: absolute;
    font-size: 16px;
    pointer-events: none;
    will-change: transform, opacity;
    animation: burstScatter 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    filter: drop-shadow(0 1px 2px #000);
    z-index: 10003;
}

@keyframes burstScatter {
    0% {
        opacity: 1;
        transform: translate(var(--x), var(--y)) scale(0.4) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: translate(calc(var(--x) + var(--vx) * 0.8), calc(var(--y) + var(--vy) * 0.8)) scale(1.35) rotate(var(--rot));
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--x) + var(--vx)), calc(var(--y) + var(--vy) + 12px)) scale(0.7) rotate(calc(var(--rot) * 1.6));
    }
}

/* --- 街机充能确认对话框 (Confirmation Modal) --- */
#rechargeConfirmModal, #offlinePromptModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #151930;
    border: 3.5px solid #f59e0b;
    border-radius: 12px;
    padding: 1.6rem 1.15rem;
    width: min(48rem, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    z-index: 600;
    box-shadow: 0 4px 0 #000, 0 0 0 100vmax rgba(0, 0, 0, 0.75);
    text-align: center;
    color: #ffffff;
    pointer-events: auto;
    font-family: 'PressStart2P-Regular', sans-serif;
}

#rechargeConfirmModal h2, #offlinePromptModal h2, #turboPromoModal h2 {
    margin: 0 0 1.4rem;
    font-size: 1.7rem;
    color: #fbbf24;
    line-height: 1.4;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

#rechargeConfirmModal p, #offlinePromptModal p {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0 0 1.8rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.modal-highlight-box {
    background: rgba(0, 0, 0, 0.4);
    border: 1.5px dashed rgba(251, 191, 36, 0.5);
    border-radius: 6px;
    padding: 1rem 0.85rem;
    margin-bottom: 1.4rem;
    font-size: 1.25rem;
    line-height: 1.6;
    color: #fde68a;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    text-align: start;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.modal-actions {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.modal-btn {
    font-family: 'PressStart2P-Regular', sans-serif;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    line-height: 1.3;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
    white-space: normal;
    overflow-wrap: anywhere;
    max-width: 100%;
    box-sizing: border-box;
}

/* 核心主行动：电光金黄色街机大按键，触感饱满 */
.modal-btn.primary {
    padding: 1.15rem 1rem;
    font-size: 1.35rem;
    font-weight: bold;
    color: #1a0c02;
    background: linear-gradient(180deg, #fde047 0%, #eab308 50%, #ca8a04 100%);
    border: 3px solid #451a03;
    box-shadow:
        0 4px 0 #451a03,
        0 6px 0 rgba(0, 0, 0, 0.45);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    letter-spacing: 0.8px;
}

.modal-btn.primary:hover {
    background: linear-gradient(180deg, #fef08a 0%, #facc15 50%, #d97706 100%);
}

.modal-btn.primary:active {
    transform: translateY(3px);
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.3),
        0 1px 0 #451a03;
}

.modal-btn.primary .pxicon {
    width: 18px;
    height: 18px;
    color: #1a0c02;
}

/* 次要行动：取消按钮（低调、干净、不抢眼） */
.modal-btn.secondary {
    padding: 0.95rem 1.4rem;
    background: #1a2035;
    border: 2px solid #2d3748;
    color: #94a3b8;
    font-size: 1.15rem;
    box-shadow: 0 2.5px 0 #000;
}

.modal-btn.secondary:hover {
    background: #242c47;
    color: #cbd5e1;
    border-color: #475569;
}

.modal-btn.secondary:active {
    transform: translateY(2px);
    box-shadow: 0 0.5px 0 #000;
}

.modal-btn.secondary .pxicon {
    width: 14px;
    height: 14px;
    color: #94a3b8;
}

/* 倒计时全屏遮罩：fixed inset 铺满视口，不依赖 100vmax 阴影，也不受主内容区裁切 */
#countdownScrim {
    display: none;
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    min-height: 100dvh;
    background: rgba(0, 0, 0, 0.65);
    z-index: 490;
    pointer-events: none;
}
#countdownScrim.is-on {
    display: block;
}
#countdownScrim.turbo-mode-running {
    background: rgba(0, 0, 0, 0.52);
}

/* 5秒倒计时专属街机卡片：高对比暗黑卡片 + 荧光黄数字 */
#startButtonCount {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(18, 22, 38, 0.94);
    border: 4px solid #fffb00;
    border-radius: 18px;
    padding: 1.1rem 1.1rem;
    box-shadow: 0 4px 0 #000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    z-index: 500;
    pointer-events: none;
    text-align: center;
    white-space: normal;
    box-sizing: border-box;
    width: min(92vw, 440px);
    max-width: calc(100vw - 24px);
}

#startButtonCount .countdown-label {
    font-size: 1.5rem;
    color: #ffffff;
    letter-spacing: 1px;
    text-shadow: 0.2rem 0.2rem 0rem #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

#startButtonCount .countdown-label .pxicon {
    width: 16px;
    height: 16px;
}

#startButtonCount .countdown-val {
    font-size: 5.4rem;
    color: #fffb00;
    font-family: 'PressStart2P-Regular', sans-serif;
    text-shadow: 0.4rem 0.4rem 0rem #000, 0 0 25px rgba(255, 230, 0, 0.9);
    line-height: 1;
    margin: 0.15rem 0;
}

#startButtonCount .countdown-hint-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 0.25rem;
    padding: 0.55rem 1.25rem;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

#startButtonCount.turbo-mode-running .countdown-hint-box {
    border-color: rgba(168, 85, 247, 0.35);
    background: rgba(46, 16, 77, 0.5);
}

#startButtonCount .countdown-hint-row {
    font-size: 1.12rem;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.55rem;
    letter-spacing: 0.5px;
    text-shadow: 0.15rem 0.15rem 0rem #000;
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

#startButtonCount .countdown-hint-row .pxicon {
    width: 15px;
    height: 15px;
    fill: #ffd154 !important;
    stroke: #ffd154 !important;
    flex-shrink: 0;
}

@media screen and (max-width: 480px) {
    #startButtonCount {
        white-space: normal;
        padding: 1.1rem 1.2rem;
    }
    #startButtonCount .countdown-label {
        font-size: 1.25rem;
        flex-wrap: wrap;
    }
    #startButtonCount .countdown-val {
        font-size: 4.4rem;
    }
}

/* 5秒倒计时 Turbo 模式联动：与标准模式保持完全一致的复古黄框，标题文字用亮紫，非红色 */
#startButtonCount.turbo-mode-running {
    border: 4px solid #fffb00;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(255, 230, 0, 0.25);
}
#startButtonCount.turbo-mode-running .countdown-val {
    color: #d8b4fe;
    text-shadow: 0.4rem 0.4rem 0rem #000;
}
#startButtonCount.turbo-mode-running .countdown-label {
    color: #c084fc;
    text-shadow: 0.2rem 0.2rem 0rem #000;
}

 /* 横屏矮屏：内容从顶栏下起排，避免被导航挡住 */
 @media screen and (orientation: landscape) and (max-height: 540px) {
     .centerContainer {
         padding: 0.6rem 12px 0.8rem 12px;
         justify-content: flex-start;
         overflow-y: auto;
         gap: 0.55rem;
     }
     .title-app-icon {
         width: 32px;
         height: 32px;
     }
     h1.greetings {
         margin-top: 0;
         margin-bottom: 0.4vh;
         max-width: 68%;
     }
     h2.greetings {
         max-width: 62%;
         margin-bottom: 0.4vh;
     }
     #warning,
     .greetings#warning,
     p#warning {
         margin-bottom: 1.2vh;
     }
     .capsule-unified {
         margin-top: 0.3vh;
         margin-bottom: 0.6vh;
     }
 }

 @media screen and (orientation: portrait) {
     .centerContainer {
         padding: 1.6rem 12px calc(112px + env(safe-area-inset-bottom, 0px)) 12px;
         justify-content: center;
         gap: 0.7rem;
     }
     .title-app-icon {
         width: 48px;
         height: 48px;
     }
     h1.greetings {
         max-width: 78%;
         margin-top: 0;
         margin-bottom: 0.4vh;
     }
     h2.greetings {
         max-width: 90%;
         margin-bottom: 0.2vh;
     }
     #warning,
     .greetings#warning,
     p#warning {
         max-width: 90%;
         margin-top: 0;
         margin-bottom: 0.6vh;
     }
     .capsule-unified {
         margin-top: 0.3vh;
         margin-bottom: 0.8vh;
     }
 }

@media screen and (min-width: 1024px) {
    .centerContainer {
        padding: 2.2rem 12px 3.2rem 12px;
        justify-content: center;
    }
    .frontM-nav .nav-timer-pill {
        font-size: 14px;
        padding: 4px 10px;
        gap: 6px;
    }
    .frontM-nav .nav-timer-pill .timer-icon {
        font-size: 15px;
    }
}

 /* ==========================================================================
   计时器仪表盘组件 (Timer Dashboards - Top Left)
   极简高能 · 独立 Flex 滚动箱 · 宽阔安全缓冲区 · 绝对零渗色零露边 · 零发热
   ========================================================================== */
.custom-timer-wrapper {
    position: absolute;
    left: 2rem;
    top: 4rem;
    display: flex;
    flex-direction: column;
    gap: 7px;
    z-index: 15;
    pointer-events: auto;
    direction: ltr;
    user-select: none;
    -webkit-user-select: none;
}

.timer-card {
    background-color: #141724;
    border: 2px solid #28334e;
    border-radius: 4px;
    padding: 3px 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'PressStart2P-Regular', monospace, sans-serif;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.timer-card:active {
    background-color: #1e2438;
}

/* 累计时长：琥珀金 */
.timer-card-total {
    color: #fbbf24;
}

/* 本次时长：电光绿 */
.timer-card-session {
    color: #4ade80;
    cursor: default;
}

.timer-icon {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", "Segoe UI Symbol", sans-serif;
    font-size: 1.15rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
    filter: none !important;
    text-shadow: none !important;
}

.timer-display-group {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    gap: 1px;
}

/* 🎰 独立滚轴视口 (充足视口高度 1.85em，上下留有 5px 以上绝对安全缓冲区，100% 杜绝漏边渗色) */
.digit-roller {
    display: inline-block;
    width: 1.35ch;
    height: 1.85em;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
    box-sizing: border-box;
}

/* 📜 0-9 纵向 Flex 序列 (总高 1000%，每个数字正好是视口高度的 100%) */
.roller-strip {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 1000%;
    transform: translateY(0);
    will-change: transform;
}

/* 🔢 单个数字单元格 (在 1.85em 高度单元格内精准垂直居中，上下各有充裕缓冲距离) */
.roller-strip > div {
    height: 10%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    line-height: 1;
    text-shadow: none !important;
}

.timer-unit {
    font-size: 0.85em;
    color: #94a3b8;
    margin-left: 2px;
    margin-right: 4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}




/* 3. 新的箭头图标样式 */
.custom-arrow {
  /* 定位 */
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);

  /* 外观 */
  width: 40px;
  height: 40px;
  stroke: #323232; /* 图标颜色与文字颜色一致 */

  /* 关键：让点击事件穿透图标 */
  pointer-events: none;
}

/* ==========================================================================
   多语言专属排版与适配规则 (Multi-language Typography & RTL Protection)
   ========================================================================== */

/* 阿拉伯语 (Arabic) & 希伯来语 (Hebrew) */
:lang(ar), :lang(he) {
    font-family: 'PressStart2P-Regular', system-ui, -apple-system, sans-serif;
}
:lang(ar) .greetings,
:lang(he) .greetings {
    font-size: 1.65rem;
    line-height: 1.55;
    text-align: center;
}
:lang(ar) #myButton,
:lang(he) #myButton {
    font-size: 1.8rem;
}
:lang(ar) .tooltiptext,
:lang(he) .tooltiptext {
    font-size: 1.35rem;
    line-height: 1.5;
    text-align: right;
    direction: rtl;
}
:lang(ar) #warning,
:lang(he) #warning {
    font-size: 1.7rem !important;
}

/* 中文 (简体/繁体)、日文、韩文、泰文专属舒适清晰大字排版 */
:lang(zh) h1.greetings,
:lang(zh-TW) h1.greetings,
:lang(ja) h1.greetings,
:lang(ko) h1.greetings,
:lang(th) h1.greetings {
    font-size: 2.6rem;
    line-height: 1.35;
    max-width: 90%;
}

:lang(zh) h2.greetings,
:lang(zh-TW) h2.greetings,
:lang(ja) h2.greetings,
:lang(ko) h2.greetings,
:lang(th) h2.greetings {
    font-size: 2.05rem;
    line-height: 1.6;
    max-width: 88%;
}

:lang(th) #myButton,
:lang(zh) #myButton,
:lang(zh-TW) #myButton,
:lang(ja) #myButton,
:lang(ko) #myButton {
    font-size: 2.35rem;
}

:lang(zh) .tooltiptext,
:lang(zh-TW) .tooltiptext,
:lang(ja) .tooltiptext,
:lang(th) .tooltiptext,
:lang(ko) .tooltiptext {
    font-size: 1.6rem;
    line-height: 1.6;
}

:lang(it) .greetings,
:lang(es) .greetings {
    font-size: 1.85rem;
}
:lang(it) #myButton,
:lang(fr) #myButton {
    font-size: 2rem;
}

:lang(en) .greetings {
    font-size: 1.75rem;
}
:lang(en) .tooltiptext,
:lang(es) .tooltiptext,
:lang(it) .tooltiptext,
:lang(fr) .tooltiptext {
    font-size: 1.35rem;
}

/* --- 中文 (简体/繁体)、日文、韩文专属放大警示语 --- */
:lang(zh) #warning,
:lang(zh-TW) #warning,
:lang(ja) #warning,
:lang(ko) #warning,
:lang(zh) .greetings#warning,
:lang(zh-TW) .greetings#warning,
:lang(ja) .greetings#warning,
:lang(ko) .greetings#warning {
    font-size: 2.45rem !important;
    line-height: 1.5;
    letter-spacing: 1.5px;
}

@media screen and (orientation: landscape) {
    :lang(zh) h1.greetings,
    :lang(zh-TW) h1.greetings,
    :lang(ja) h1.greetings,
    :lang(ko) h1.greetings,
    :lang(th) h1.greetings {
        font-size: 2.5rem;
        line-height: 1.35;
        max-width: 90%;
    }
    :lang(zh) h2.greetings,
    :lang(zh-TW) h2.greetings,
    :lang(ja) h2.greetings,
    :lang(ko) h2.greetings,
    :lang(th) h2.greetings {
        font-size: 2.05rem;
        line-height: 1.6;
        max-width: 90%;
    }
    :lang(zh) #warning,
    :lang(zh-TW) #warning,
    :lang(ja) #warning,
    :lang(ko) #warning {
        font-size: 2.35rem !important;
        line-height: 1.5;
    }
}

@media screen and (orientation: portrait) {
    :lang(zh) h1.greetings,
    :lang(zh-TW) h1.greetings,
    :lang(ja) h1.greetings,
    :lang(ko) h1.greetings,
    :lang(th) h1.greetings {
        font-size: 2.7rem;
        max-width: 92%;
    }
    :lang(zh) h2.greetings,
    :lang(zh-TW) h2.greetings,
    :lang(ja) h2.greetings,
    :lang(ko) h2.greetings,
    :lang(th) h2.greetings {
        font-size: 2.2rem;
        line-height: 1.65;
        max-width: 92%;
    }
    :lang(zh) #warning,
    :lang(zh-TW) #warning,
    :lang(ja) #warning,
    :lang(ko) #warning {
        font-size: 2.55rem !important;
    }
}

/* Force LTR direction for timers and close button to prevent RTL issues */
.custom-timer-wrapper,
.countdowntimerA,
.countdowntimerB,
.close {
    direction: ltr;
}

/* ==========================================================================
   备选视觉方案归档库 (0 性能开销 · 仅作备用代码留存)
   如未来需要切换为其他主题，取消对应注释即可一键使用：
   ==========================================================================

   --- 方案 B: 纯净天幕柔焦散景 (天空蓝与落日粉的轻柔交融) ---
   .frontM-theme-bokeh {
     background: linear-gradient(130deg, #355df2 0%, #5667f3 35%, #8563eb 68%, #dc629a 100%);
   }
   .frontM-theme-bokeh .flare-core {
     background:
       radial-gradient(circle at 35% 36%, rgba(255, 255, 255, 0.45) 0%, rgba(140, 205, 255, 0.6) 26%, rgba(70, 120, 255, 0.2) 55%, transparent 72%),
       radial-gradient(circle at 38% 34%, rgba(255, 255, 255, 0.3) 0%, transparent 18%);
     animation: flareBokehA 12s ease-in-out infinite alternate;
   }
   .frontM-theme-bokeh .flare-ghost {
     background:
       radial-gradient(circle at 68% 64%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 155, 190, 0.65) 26%, rgba(240, 90, 140, 0.22) 55%, transparent 72%),
       radial-gradient(circle at 50% 50%, rgba(185, 145, 245, 0.35) 0%, transparent 45%);
     animation: flareBokehB 14s ease-in-out infinite alternate;
   }

   --- 备选扫描线色彩 ---
   [晴空冰蓝] background: linear-gradient(to bottom, rgba(100,210,255,0) 0%, rgba(100,210,255,0.06) 50%, rgba(100,210,255,0.2) 80%, rgba(120,225,255,0.6) 95%, rgba(160,240,255,0.9) 100%); opacity: 0.45;
   [经典薰衣紫] background: linear-gradient(to bottom, rgba(200,160,255,0) 0%, rgba(200,160,255,0.05) 50%, rgba(200,160,255,0.18) 80%, rgba(200,160,255,0.55) 95%, rgba(200,160,255,0.85) 100%); opacity: 0.45;
   [晨曦暖金] background: linear-gradient(to bottom, rgba(255,225,120,0) 0%, rgba(255,225,120,0.06) 50%, rgba(255,225,120,0.2) 80%, rgba(255,230,130,0.6) 95%, rgba(255,245,180,0.9) 100%); opacity: 0.42;
   [落日霞粉] background: linear-gradient(to bottom, rgba(255,130,185,0) 0%, rgba(255,130,185,0.06) 50%, rgba(255,130,185,0.2) 80%, rgba(255,140,195,0.6) 95%, rgba(255,180,220,0.9) 100%); opacity: 0.45;
   ========================================================================== */

/* ==========================================================================
   0ms 极致跟手触控反馈体系 (Zero-Latency Native Touch Press System)
   ========================================================================== */
*, *::before, *::after {
    touch-action: manipulation;
}

/* 主按钮触控反馈 */
#myButton {
    touch-action: manipulation;
    transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, background 0.08s ease !important;
}

#myButton.is-pressed,
#myButton:active {
    transform: translateY(4px) !important;
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.35),
        0 0 0 #042412,
        0 1.5px 0 rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.02s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.02s cubic-bezier(0, 0, 0.2, 1) !important;
}

#myButton.turbo-active.is-pressed,
#myButton.turbo-active:active {
    transform: translateY(4px) !important;
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.35),
        0 0 0 #2b074a,
        0 1.5px 0 rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.02s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.02s cubic-bezier(0, 0, 0.2, 1) !important;
}

#myButton.recharge-cta.is-pressed,
#myButton.recharge-cta:active {
    transform: translateY(4px) !important;
    box-shadow:
        inset 0 2px 3px rgba(0, 0, 0, 0.35),
        0 0 0 #451a03,
        0 1.5px 0 rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.02s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.02s cubic-bezier(0, 0, 0.2, 1) !important;
}

/* 说明书复古键帽触控反馈 */
.link {
    touch-action: manipulation;
    transition: transform 0.06s ease-out, box-shadow 0.06s ease-out, background-color 0.06s ease-out !important;
}

.link.is-pressed,
.link:active {
    transform: translateY(0.5px) !important;
    box-shadow: 0px 0.5px 0px #000 !important;
    background-color: #1a223f !important;
    transition: transform 0.02s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.02s cubic-bezier(0, 0, 0.2, 1) !important;
}

/* 胶囊控制器触控反馈 */
.capsule-half,
.capsule-credit {
    touch-action: manipulation;
}
.capsule-half.is-pressed,
.capsule-half:active,
.capsule-credit.is-pressed,
.capsule-credit:active {
    transform: translateY(2px);
}

/* 计时器卡片触控反馈 */
.timer-card {
    touch-action: manipulation;
    transition: transform 0.06s ease-out, background-color 0.06s ease-out !important;
}

.timer-card.is-pressed,
.timer-card:active {
    transform: translateY(2px) scale(0.98) !important;
    background-color: #1e263d !important;
    border-color: #3b4b75 !important;
    transition: transform 0.02s cubic-bezier(0, 0, 0.2, 1) !important;
}

/* 顶栏图标按钮与弹窗按钮触控反馈 */
.shareButton,
#langSelect,
.close,
.modal-btn {
    touch-action: manipulation;
    transition: transform 0.06s ease-out !important;
}

.shareButton.is-pressed,
.shareButton:active,
#langSelect.is-pressed,
#langSelect:active,
.close.is-pressed,
.close:active,
.modal-btn.is-pressed,
.modal-btn:active {
    transform: translateY(2px) scale(0.93) !important;
    transition: transform 0.02s cubic-bezier(0, 0, 0.2, 1) !important;
}


/* ==========================================================================
   🛑 100% 纯黑 OLED 护眼暂停系统 (单页双卡片 · 墨玉广告/tips + 深曜控制台)
   ========================================================================== */
#eyeCarePauseOverlay {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    background: #000000;
    z-index: 500;
    display: none;
    pointer-events: auto;
    overflow: hidden;
}

.pause-board {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: max(12px, env(safe-area-inset-top, 0px))
             max(12px, env(safe-area-inset-right, 0px))
             max(16px, env(safe-area-inset-bottom, 0px))
             max(12px, env(safe-area-inset-left, 0px));
    opacity: 0;
    transition: opacity 0.42s ease;
}

#eyeCarePauseOverlay.is-active .pause-board {
    opacity: 1;
}

/* 入场显影只用一次，结束后立刻去掉 is-revealing 恢复自然布局；
   不使用 clip-path（iPad Safari WebKit 会据此判定广告不可见并回收） */
#eyeCarePauseOverlay.is-revealing .pause-board {
    animation: pauseBoardReveal 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#eyeCarePauseOverlay.is-closing .pause-board {
    opacity: 0;
    animation: pauseBoardHide 0.28s ease-in both;
}

#eyeCarePauseOverlay.is-active {
    overflow: visible;
}

@keyframes pauseBoardReveal {
    from {
        transform: translateY(24px);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes pauseBoardHide {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(24px);
    }
}

.pause-col {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 50%;
}

.pause-col-sponsor,
.pause-col-menu {
    flex: 1 1 50%;
}

.pause-col-menu {
    position: relative;
    z-index: 2;
}

/* 基础卡片骨架通用属性 */
.arcade-sponsor-box, .arcade-pause-box {
    width: 100%;
    min-width: 240px;
    max-width: 324px;
    border-radius: 5px;
    padding: 16px 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

/* ==========================================================================
   🎮 左翼：墨玉低调卡片 (AdMob 原生广告 / 12条保养建议自动轮播)
   ========================================================================== */
.arcade-sponsor-box {
    background: #0f1219; /* 沉静墨玉实色底 */
    border: 2px solid #28303f; /* 墨晶低调描边 */
    box-shadow: 0 4px 0 #07090e, 0 10px 24px rgba(0, 0, 0, 0.95);
    gap: 8px;
}

#leftPauseCard {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

#adContentView {
    display: block;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0 12px;
    box-sizing: border-box;
    background: #0f1219;
    border: 0 solid #28303f;
    border-radius: 5px;
    box-shadow: none;
    pointer-events: none;
    transition: max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.35s ease,
                padding 0.35s ease,
                border-width 0.35s ease,
                box-shadow 0.35s ease;
}

#leftPauseCard.web-ad-loading #adContentView,
#leftPauseCard.ad-ready #adContentView {
    max-height: 350px;
    opacity: 1;
    padding: 12px;
    border-width: 2px;
    box-shadow: 0 4px 0 #07090e, 0 10px 24px rgba(0, 0, 0, 0.95);
    pointer-events: auto;
}

/* iPad/Safari/Desktop: 广告填充后取消裁切，防止 AdSense 判定不可见而自动回收广告 */
#leftPauseCard.ad-ready #adContentView {
    overflow: visible;
    max-height: 420px;
}

#leftPauseCard.web-ad-loading #appAdContentView {
    display: none !important;
}

#leftPauseCard #webPauseAdSlot {
    display: flex;
    width: 100%;
    min-height: 250px;
    border-radius: 4px;
    overflow: hidden;
    background: #05080f;
    justify-content: center;
    align-items: center;
}

#leftPauseCard #webPauseAdSlot ins.adsbygoogle {
    display: inline-block !important;
    width: 300px !important;
    height: 250px !important;
}

#tipsContentView {
    display: flex !important;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    height: 58px;
    min-height: 58px;
    max-height: 58px;
    padding: 0 10px;
    box-sizing: border-box;
    background: #0f1219;
    border: 2px solid #28303f;
    border-radius: 5px;
    box-shadow: 0 4px 0 #07090e;
    overflow: hidden;
}

#tipsContentView .arcade-sponsor-header {
    margin: 0;
    padding: 0;
    border: none;
    flex-shrink: 0;
}

#tipsContentView .arcade-sponsor-title {
    display: none;
}

.arcade-sponsor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1.5px dashed #202735;
    line-height: 1;
}

.arcade-sponsor-title {
    font-size: 0.8rem;
    color: #7dd3fc;
    letter-spacing: 1.5px;
    text-shadow: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.arcade-sponsor-title .pxicon {
    width: 14px;
    height: 14px;
    color: #7dd3fc;
}

.ad-badge-pixel {
    background: #171c26;
    color: #64748b;
    border: 1px solid #28303f;
    font-size: 7px;
    padding: 2px 5px;
    border-radius: 2px;
    letter-spacing: 0.5px;
    line-height: 1;
    font-weight: bold;
}

.sponsor-content {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.sponsor-app-icon {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: #090b10;
    border: 1.5px solid #28303f;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    overflow: hidden;
}

.sponsor-app-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sponsor-app-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.sponsor-app-name {
    font-size: 0.78rem;
    color: #e2e8f0;
    line-height: 1.2;
    font-weight: bold;
}

.sponsor-rating {
    font-size: 8px;
    color: #eab308;
    letter-spacing: 1px;
}

.sponsor-app-desc {
    font-size: 8.5px;
    color: #717d94;
    line-height: 1.45;
    text-align: left;
    margin-bottom: 12px;
    background: #07090e;
    padding: 6px 8px;
    border-radius: 3px;
    border: 1px solid #1c222e;
}

.arcade-btn-sponsor {
    font-family: inherit;
    background: linear-gradient(180deg, #d97706 0%, #b45309 58%, #92400e 100%);
    border: 2px solid #451a03;
    border-radius: 4px;
    box-shadow: 0 3px 0 #2e1102;
    color: #fef08a;
    font-size: 0.85rem;
    font-weight: bold;
    letter-spacing: 1px;
    padding: 9px 0;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
    width: 100%;
}
.arcade-btn-sponsor.is-pressed,
.arcade-btn-sponsor:active {
    transform: translateY(3px) !important;
    box-shadow: 0 0 0 transparent !important;
}

/* 💡 屏幕保养指南：固定高度小横幅，内容轮播 */
.tips-terminal-box {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    align-items: center;
    box-shadow: none;
    overflow: hidden;
}

.tip-terminal-row {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    padding-bottom: 0;
    border-bottom: none;
    line-height: 1.35;
    width: 100%;
    min-width: 0;
}

.tip-banner-track {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.tip-banner-track.is-swapping {
    opacity: 0;
    transform: translateY(8px);
}

.tip-bullet {
    color: #38bdf8;
    font-size: 9px;
    flex-shrink: 0;
    margin-top: 3px;
    line-height: 1.4;
}

.tip-body-text {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #cbd5e1;
    line-height: 1.35;
    letter-spacing: 0;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-width: 0;
    flex: 1 1 auto;
}

/* ==========================================================================
   ⚙️ 中缝分隔：横屏竖线 / 竖屏横线，贴在中线
   ========================================================================== */
.arcade-floating-divider {
    flex: 0 0 2px;
    background: repeating-linear-gradient(to bottom, #283244 0px, #283244 6px, transparent 6px, transparent 12px);
    align-self: center;
    pointer-events: none;
}

/* ==========================================================================
   🛑 右翼：主页深曜暂停控制舱 (Midnight Navy Pause - 醒目居中大标题)
   ========================================================================== */
.arcade-pause-box {
    background: #141b2d; /* 饱和深曜蓝实色 */
    border: 2.5px solid #3b4d75; /* 高反差立体深曜描边 */
    box-shadow: 0 5px 0 #0b0f1a, 0 12px 28px rgba(0, 0, 0, 1);
    align-items: center;
    text-align: center;
    padding: 18px 16px 16px 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 🎯 顶部内容居中弹性舱：告别贴顶尴尬，上下空间充裕舒展 */
.arcade-pause-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1;
    margin-bottom: 14px;
}

.arcade-pause-title {
    font-size: 2.15rem; /* 超醒目大标题 */
    color: #fbbf24;
    letter-spacing: 3.5px;
    margin-bottom: 10px;
    text-shadow: 0 3px 0 #78350f, 0 0 16px rgba(251, 191, 36, 0.45) !important;
    line-height: 1;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
}
.arcade-pause-title .pxicon {
    width: 26px;
    height: 26px;
    color: #fbbf24;
    filter: drop-shadow(0 2px 0 #78350f);
}

.arcade-timer-label {
    font-size: 0.9rem;
    color: #94a3b8;
    margin-bottom: 8px;
    letter-spacing: 1.5px;
    text-shadow: none;
    line-height: 1;
    font-weight: bold;
}

.arcade-pause-timer-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 auto;
    max-width: 100%;
}

.arcade-pause-clock-icon {
    width: 3.8rem;
    height: 3.8rem;
    color: #4ade80;
    fill: #4ade80;
    filter: none !important;
    text-shadow: none !important;
    flex-shrink: 0;
}

.arcade-pause-box .timer-card-session {
    margin-bottom: 0;
    cursor: default;
    background-color: #0b0f1a;
    border-color: #2b3a58;
    width: auto;
    max-width: fit-content;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 6px 14px;
    border-width: 2.5px;
    font-size: 1.35rem;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.85);
}

.arcade-pause-box .timer-card-session .timer-unit {
    font-size: 1.0rem;
    color: #64748b;
    margin: 0 2px;
}

.arcade-btn-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
}

.arcade-btn-resume {
    font-family: inherit;
    background: linear-gradient(180deg, #18f082 0%, #0db860 58%, #089e50 100%);
    border: 2px solid #042412;
    border-radius: 4px;
    box-shadow: 0 3.5px 0 #042412, 0 4px 0 rgba(0, 0, 0, 0.4);
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 1.2px;
    padding: 9.5px 0;
    cursor: pointer;
    text-shadow: -1px -1px 0 #042915, 1px 1px 0 #042915;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
    width: 100%;
}
.arcade-btn-resume.is-pressed,
.arcade-btn-resume:active {
    transform: translateY(3.5px) !important;
    box-shadow: 0 0 0 transparent !important;
}

.arcade-btn-exit {
    font-family: inherit;
    background: #242c44;
    border: 2px solid #3b4d75;
    border-radius: 4px;
    box-shadow: 0 3px 0 #0b0f1a;
    color: #f87171;
    font-size: 0.85rem;
    letter-spacing: 1px;
    padding: 8px 0;
    cursor: pointer;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
    width: 100%;
}
.arcade-btn-exit.is-pressed,
.arcade-btn-exit:active {
    transform: translateY(3px) !important;
    box-shadow: 0 0 0 transparent !important;
}

/* 📐 宽 > 高：沿垂直中线左右放置，两卡成组居中且底边对齐 */
@media screen and (orientation: landscape), screen and (min-aspect-ratio: 1.01 / 1) {
    .pause-board {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: auto;
        align-content: center;
        align-items: end;
        column-gap: 8px;
    }

    .pause-col-sponsor,
    .pause-col-menu {
        flex: none;
        width: auto;
        height: auto;
        flex-direction: column;
    }

    .pause-col-sponsor {
        justify-content: flex-end;
        align-items: flex-end;
        justify-self: end;
    }

    .pause-col-menu {
        justify-content: flex-end;
        align-items: flex-start;
        justify-self: start;
    }

    .arcade-floating-divider {
        width: 2px;
        height: min(180px, 42vh);
        align-self: center;
        background: repeating-linear-gradient(to bottom, #283244 0px, #283244 6px, transparent 6px, transparent 12px);
    }

    #leftPauseCard,
    .pause-col-menu > .arcade-pause-box {
        width: 324px;
        max-width: 44vw;
        min-width: 0;
        height: auto;
        max-height: 100%;
        flex: 0 0 auto;
        margin: 0;
    }
}

/* 📐 高 >= 宽：沿水平中线上下放置，广告贴中线上方、菜单贴中线下方 */
@media screen and (orientation: portrait), screen and (max-aspect-ratio: 1 / 1) {
    .pause-board {
        flex-direction: column;
        align-items: stretch;
    }

    .pause-col-sponsor {
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: 7px;
    }

    .pause-col-menu {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 7px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .arcade-floating-divider {
        width: min(180px, 70vw);
        height: 2px;
        flex-basis: 2px;
        background: repeating-linear-gradient(to right, #283244 0px, #283244 6px, transparent 6px, transparent 12px);
    }

    #leftPauseCard,
    .pause-col-menu > .arcade-pause-box {
        width: min(94vw, 360px);
        max-width: min(94vw, 360px);
        min-width: 0;
        height: auto;
        max-height: 100%;
        flex: 0 0 auto;
        margin: 0;
    }

    #leftPauseCard {
        justify-content: flex-end;
    }
}

/* ==========================================================================
   🌐 深度定制街机复古多语言选择弹窗 (0模糊极速性能 · 高对比度像素风 · 全屏幕防出界)
   ========================================================================== */
.custom-lang-overlay {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    background: rgba(0, 0, 0, 0.86);
    display: none;
    align-items: center;
    justify-content: flex-end;
    z-index: 99999;
    padding: max(8px, env(safe-area-inset-top, 0px)) 1.25rem max(8px, env(safe-area-inset-bottom, 0px)) 10px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.12s ease-out;
    pointer-events: none;
    direction: ltr !important;
    overflow: hidden;
}

.custom-lang-overlay.is-active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
}

.custom-lang-modal {
    width: 92vw;
    max-width: 375px;
    max-height: calc(100dvh - 16px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    min-height: 0;
    background-color: #0c101d;
    border: 3px solid #1e2840;
    border-radius: 4px;
    box-shadow: 
        inset 0 2px 0 rgba(255, 255, 255, 0.1),
        0 6px 0 #000000,
        0 8px 20px rgba(0, 0, 0, 0.95);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.96) translateX(8px);
    transition: transform 0.14s cubic-bezier(0.34, 1.25, 0.64, 1);
    box-sizing: border-box;
}

.custom-lang-overlay.is-active .custom-lang-modal {
    transform: scale(1) translateX(0);
}

/* 顶部标题栏 */
.lang-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #141b2c;
    border-bottom: 2.5px solid #1e2840;
    flex-shrink: 0;
}

.lang-modal-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'PressStart2P-Regular', monospace, sans-serif;
    font-size: 1.15rem;
    color: #38bdf8;
    letter-spacing: 0.5px;
    text-shadow: -1px -1px 0 #000, 1px 1px 0 #000;
}

.lang-modal-title .pxicon {
    width: 18px;
    height: 18px;
    color: #38bdf8;
    flex-shrink: 0;
}

.lang-modal-close-btn {
    background: #1e2840;
    border: 2px solid #3b4d75;
    border-radius: 3px;
    box-shadow: 0 2px 0 #000000;
    color: #ffffff;
    font-family: 'PressStart2P-Regular', monospace, sans-serif;
    font-size: 0.95rem;
    line-height: 1;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.05s ease-out, background-color 0.05s ease-out;
    touch-action: manipulation;
}

.lang-modal-close-btn:active {
    background: #ef4444 !important;
    border-color: #f87171 !important;
    transform: translateY(2px) !important;
    box-shadow: 0 0 0 transparent !important;
}

/* 语言网格滚动列表 (双列紧凑排布 · 防出屏 · 零卡顿) */
.lang-grid-container {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 10px 10px 10px 12px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 8px;
    scrollbar-width: thin;
    scrollbar-color: #4d6fa8 #080c16;
    box-sizing: border-box;
}

/* 明显的复古街机滚动条 */
.lang-grid-container::-webkit-scrollbar {
    width: 9px;
}
.lang-grid-container::-webkit-scrollbar-track {
    background: #080c16;
    border-left: 1.5px solid #1a243a;
    border-radius: 2px;
}
.lang-grid-container::-webkit-scrollbar-thumb {
    background: #2e4470;
    border: 1.5px solid #4d6fa8;
    border-radius: 3px;
    box-shadow: 0 1px 0 #000000;
}
.lang-grid-container::-webkit-scrollbar-thumb:hover,
.lang-grid-container::-webkit-scrollbar-thumb:active {
    background: #008cd6;
    border-color: #38bdf8;
}

/* 语言项按钮卡片 (大字号 · 紧凑单元格 · 高对比度像素风) */
.lang-item-btn {
    background-color: #101524;
    border: 2px solid #26344d;
    border-radius: 3px;
    box-shadow: 0 2.5px 0 #000000;
    padding: 8px 10px;
    color: #ffffff; /* 纯白高对比度文字 */
    font-size: 1.38rem; /* 大号文字，清晰饱满 */
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.04s ease-out, background-color 0.04s ease-out, border-color 0.04s ease-out;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
    text-align: left;
    min-height: 42px;
}

.lang-item-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    text-shadow: 0 1px 1px #000000;
}

.lang-item-btn:active {
    transform: translateY(2px);
    box-shadow: 0 0.5px 0 #000000;
    background-color: #1a2238;
    border-color: #3e527a;
}

/* 选中高亮状态 (强烈的街机电光蓝高对比) */
.lang-item-btn.is-selected {
    background: #0077c8 !important;
    border-color: #38bdf8 !important;
    box-shadow: 
        0 2.5px 0 #002e50,
        inset 0 2px 0 rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
}

.lang-item-check {
    font-size: 1.15rem;
    color: #ffffff;
    font-weight: 900;
    opacity: 0;
    flex-shrink: 0;
    margin-left: 4px;
    text-shadow: 0 1px 1px #000000;
}

.lang-item-btn.is-selected .lang-item-check {
    opacity: 1;
}

/* 📱 响应式断点：针对极低高度横屏或超小屏幕 */
@media (max-height: 700px) {
    .custom-lang-overlay {
        justify-content: center;
        padding: 6px 8px;
    }
    .custom-lang-modal {
        max-height: calc(100dvh - 12px);
        max-width: min(375px, 96vw);
    }
    .lang-modal-header {
        padding: 8px 12px;
    }
    .lang-grid-container {
        padding: 8px;
        gap: 6px;
    }
    .lang-item-btn {
        min-height: 38px;
        padding: 6px 8px;
        font-size: 1.22rem;
    }
}
@media (max-width: 480px) {
    .custom-lang-overlay {
        justify-content: center;
        padding: 8px;
    }
    .custom-lang-modal {
        max-width: 95vw;
    }
}

/* ==========================================================================
   👑 街机复古 PRO 会员与无限金币视觉体系 (Pro Lifetime & Infinite Coins UI)
   ========================================================================== */

/* 0. 标题 Logo 与 Pro 徽章容器 */
.title-logo-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 0.2vh;
    position: relative;
}

.title-logo-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 🌟 已激活 PRO：实心黄金皇冠居中 Logo 正上方 + brightness 脉冲沿矢量轮廓发光 · 零发热 */
.pro-crown-badge {
    width: 2.4rem;
    height: 2.4rem;
    color: #ffd700;
    margin-bottom: -1rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
    animation: crownGleamPulse 3s ease-in-out infinite;
    will-change: filter;
    z-index: 3;
}

@keyframes crownGleamPulse {
    0%, 100% {
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 4px rgba(255, 215, 0, 0.5));
    }
    75% {
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 8px rgba(255, 215, 0, 0.9)) brightness(1.6);
    }
}

/* 1. 未激活态 PRO 徽标按钮 (暗灰带框按钮 · 空心皇冠 · 在 Logo 旁边) */



/* 2. PRO 弹窗遮罩与卡片 (紧凑响应式 · 绝对零越界 · 上下充裕呼吸间距) */
.custom-pro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 7, 18, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 12px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.custom-pro-overlay.is-active {
    opacity: 1;
}

.custom-pro-modal {
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    background: #0f1322;
    border: 2px solid #ffd700;
    border-radius: 10px;
    box-shadow: 0 0 24px rgba(255, 215, 0, 0.3), inset 0 0 12px rgba(255, 215, 0, 0.08);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.92);
    transition: transform 0.22s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.custom-pro-overlay.is-active .custom-pro-modal {
    transform: scale(1);
}

.pro-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: linear-gradient(180deg, #241c09 0%, #161205 100%);
    border-bottom: 1.5px solid #ffd700;
    flex-shrink: 0;
}

.pro-modal-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'PressStart2P', monospace, sans-serif;
    font-size: 0.72rem;
    color: #ffd700;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
    letter-spacing: 0.5px;
}

.pro-crown-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.pro-modal-close-btn {
    appearance: none;
    -webkit-appearance: none;
    background: #251212;
    border: 1.5px solid #ff4444;
    border-radius: 4px;
    color: #ff8888;
    font-family: 'PressStart2P', monospace, sans-serif;
    font-size: 0.7rem;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.1s ease, background-color 0.15s ease;
}

.pro-modal-close-btn:active {
    transform: scale(0.9);
    background: #ff2222;
    color: #ffffff;
}

.pro-modal-body {
    padding: 10px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: calc(88vh - 44px);
    -webkit-overflow-scrolling: touch;
}

.pro-features-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pro-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(255, 215, 0, 0.05);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 6px;
    padding: 6px 10px;
}

.pro-feature-icon {
    font-size: 1.1rem;
    line-height: 1.2;
    flex-shrink: 0;
}

.pro-feature-text strong {
    display: block;
    font-size: 0.76rem;
    color: #ffd700;
    margin-bottom: 2px;
    letter-spacing: 0.2px;
}

.pro-feature-text p {
    margin: 0;
    font-size: 0.68rem;
    color: #b8c4dc;
    line-height: 1.35;
}

/* 购买与操作区 */
.pro-action-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
    flex-shrink: 0;
}

.pro-buy-btn {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 52px;
    background: linear-gradient(180deg, #ffd700 0%, #e6a800 100%);
    border: 2.5px solid #fff4b8;
    border-radius: 8px;
    color: #1a0e00;
    font-family: 'PressStart2P', monospace, sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(255, 215, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.1s ease, filter 0.15s ease;
    letter-spacing: 1px;
}

.pro-buy-btn .pro-buy-icon {
    font-size: 2.4rem;
    line-height: 1;
}

.pro-buy-btn:active, .pro-buy-btn.is-pressed {
    transform: scale(0.97) translateY(1px);
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.5);
    filter: brightness(0.95);
}

.pro-buy-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-25deg);
    animation: proBtnShine 2.8s infinite ease-in-out;
}

    100% { left: 200%; }
}

.pro-secondary-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2px;
}

.pro-restore-btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: #889bb8;
    font-size: 0.7rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    text-decoration: underline;
    transition: color 0.15s ease;
}

.pro-restore-btn:hover, .pro-restore-btn:active {
    color: #ffd700;
}

.pro-active-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 6px;
    padding-bottom: 4px;
}

.pro-active-card {
    width: 100%;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.12) 0%, rgba(20, 32, 22, 0.65) 100%);
    border: 2px solid #ffd700;
    border-radius: 8px;
    padding: 12px 14px 14px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    box-shadow: 0 0 16px rgba(255, 215, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    position: relative;
    overflow: hidden;
}

.pro-active-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(180deg, #1c2718 0%, #0d160b 100%);
    border: 2px solid #48e25d;
    border-radius: 6px;
    padding: 10px 18px;
    color: #48e25d;
    font-family: 'PressStart2P', monospace, sans-serif;
    font-size: 1.1rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    box-shadow: 0 0 14px rgba(72, 226, 93, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.pro-active-sparkle {
    width: 18px;
    height: 18px;
    color: #48e25d;
    filter: drop-shadow(0 0 4px rgba(72, 226, 93, 0.8));
    flex-shrink: 0;
    animation: sparkleBlink 2.4s ease-in-out infinite;
}

@keyframes sparkleBlink {
    0%, 100% { opacity: 0.7; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.15); filter: drop-shadow(0 0 6px rgba(72, 226, 93, 1)); }
}

.pro-active-title {
    color: #ffd700;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 8px rgba(255, 215, 0, 0.5);
}

.pro-active-thanks {
    margin: 0;
    font-size: 0.82rem;
    color: #e2eafc;
    line-height: 1.5;
    text-align: center;
    padding: 0 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* 📱 针对低高度横屏极限自适应断点 (如 360px-400px 高度) */
@media (max-height: 420px) {
    .custom-pro-modal {
        max-height: 94vh;
        max-width: 520px;
    }
    .pro-modal-header {
        padding: 5px 12px;
    }
    .pro-modal-title {
        font-size: 0.68rem;
    }
    .pro-modal-body {
        padding: 6px 12px;
        gap: 5px;
    }
    .pro-features-list {
        gap: 4px;
    }
    .pro-feature-item {
        padding: 4px 8px;
        gap: 6px;
    }
    .pro-feature-icon {
        font-size: 0.95rem;
    }
    .pro-feature-text strong {
        font-size: 0.72rem;
        margin-bottom: 1px;
    }
    .pro-feature-text p {
        font-size: 0.62rem;
        line-height: 1.25;
    }
    .pro-buy-btn {
        min-height: 48px;
        font-size: 2.0rem;
    }
    .pro-restore-btn {
        font-size: 1.6rem;
    }
}

/* 3. 💥 购买成功瞬间：全屏金币暴砸与庆典粒子特效 (Arcade Coin Rain Cascade) */
#celebrationCoinRainOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 100000;
    overflow: hidden;
}

.celebration-falling-coin {
    position: absolute;
    top: -80px;
    width: 48px;
    height: 48px;
    pointer-events: none;
}

.celebration-falling-coin img {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.6));
}

@keyframes celebrationCoinDrop {
    0% {
        transform: translateY(-80px) rotate(0deg) scale(1);
        opacity: 1;
    }
    75% {
        transform: translateY(calc(100vh - 120px)) rotate(var(--rot)) scale(1.2);
        opacity: 1;
    }
    85% {
        transform: translateY(calc(100vh - 190px)) rotate(calc(var(--rot) + 45deg)) scale(1.1);
        opacity: 1;
    }
    100% {
        transform: translateY(calc(100vh + 80px)) rotate(calc(var(--rot) + 90deg)) scale(1);
        opacity: 0;
    }
}

.celebration-banner-toast {
    position: fixed;
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    background: linear-gradient(180deg, #2b1f05 0%, #140e02 100%);
    border: 3px solid #ffd700;
    border-radius: 12px;
    padding: 18px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 0 0 36px rgba(255, 215, 0, 0.7), inset 0 0 20px rgba(255, 215, 0, 0.2);
    z-index: 100001;
    pointer-events: none;
    opacity: 0;
    animation: celebrationBannerPop 3.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;
}

.celebration-banner-title {
    font-family: 'PressStart2P', monospace, sans-serif;
    font-size: 1.15rem;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

.celebration-banner-sub {
    font-size: 0.95rem;
    color: #fff2a3;
    font-weight: bold;
    letter-spacing: 0.5px;
}

@keyframes celebrationBannerPop {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    12% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 1;
    }
    18% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    82% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -60%) scale(0.85);
        opacity: 0;
    }
}

.celebration-screen-shake {
    animation: screenSlamShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes screenSlamShake {
    10%, 90% { transform: translate3d(-2px, 2px, 0); }
    20%, 80% { transform: translate3d(3px, -2px, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 4px, 0); }
    40%, 60% { transform: translate3d(4px, -3px, 0); }
}

/* 4. 无限金币状态下的金币徽章高能微光 */
.badge-tag.is-pro-infinite {
    border-color: #ffd700 !important;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 170, 0, 0.15) 100%) !important;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.4) !important;
}

.badge-coin-gif.is-pro-coin {
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8)) !important;
}




/* --- 桌面横屏矮窗才压顶栏；手机横屏走下面的独立规则 --- */
@media screen and (max-height: 540px) and (min-width: 1024px) {
    .frontM-nav { height: 36px; padding: 0 1.0rem; }
    .nav-timer-pill .timer-label { display: none; }
    .frontM-nav .nav-timer-pill {
        font-size: 11px;
        padding: 2px 6px;
        gap: 4px;
    }
    .nav-icon-btn { width: 28px; height: 28px; }
}

/* ==========================================================================
   🎮 顶栏高对比度电光蓝街机动作按钮 (Unified Cyan-Blue Arcade Nav Buttons)
   ========================================================================== */
.nav-icon-btn {
    font-family: 'PressStart2P-Regular', sans-serif !important;
    background: #0077c8 !important;
    border: 2px solid #38bdf8 !important;
    border-radius: 4px !important;
    width: 36px !important;
    height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: 
        0 3px 0 #002e50,
        inset 0 1.5px 0 rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
    transition: transform 0.08s ease, background 0.1s ease, box-shadow 0.1s ease !important;
    position: relative;
    z-index: 10;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

.nav-icon-btn .pxicon {
    width: 20px !important;
    height: 20px !important;
    color: #ffffff !important;
    fill: currentColor !important;
    pointer-events: none;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.nav-icon-btn:hover {
    background: #008cd6 !important;
    border-color: #7dd3fc !important;
    transform: translateY(-1px) !important;
    box-shadow: 
        0 4px 0 #002e50,
        0 0 10px rgba(56, 189, 248, 0.5),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.6) !important;
}

.nav-icon-btn:active,
.nav-icon-btn.is-pressed {
    transform: translateY(2px) !important;
    box-shadow: 
        0 1px 0 #002e50,
        inset 0 1px 0 rgba(0, 0, 0, 0.3) !important;
    background: #0066ad !important;
}

@media screen and (max-width: 1023px) {
    .frontM-nav {
        padding: 0.55rem 0.8rem;
    }
    .frontM-nav .nav-container {
        min-width: 0;
    }
    .frontM-nav .nav-links {
        gap: 1rem;
        flex-shrink: 0;
    }
    .frontM-nav .nav-actions {
        gap: 0.45rem;
        min-width: 0;
    }
    .frontM-nav .nav-links li,
    .frontM-nav .nav-link {
        font-size: 16px !important;
        padding: 6px 3px;
    }
    .frontM-nav .nav-timer-pill {
        font-size: 13px;
        padding: 4px 8px;
    }
    .nav-icon-btn {
        width: 42px !important;
        height: 42px !important;
        flex-shrink: 0;
        min-width: 42px;
    }
    .nav-icon-btn .pxicon {
        width: 22px !important;
        height: 22px !important;
    }
    .link {
        font-size: 1.15em;
        padding: 0.38rem 1.05rem;
    }
    .capsule-unified {
        width: auto;
        max-width: 96%;
        overflow: visible;
        box-sizing: border-box;
    }
    .capsule-half {
        font-size: 1rem;
        padding: 0.4rem 0.75rem;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    .capsule-credit {
        flex-shrink: 0;
    }
    .turbo-sparkle-badge {
        right: 2px;
        top: -6px;
    }
    #myButton {
        height: 56px !important;
        min-height: 56px !important;
        font-size: 18px !important;
        padding: 0 1.5rem !important;
        letter-spacing: 1.5px;
    }
}

@media screen and (max-width: 480px) {
    .frontM-nav .nav-links li,
    .frontM-nav .nav-link {
        font-size: 16px !important;
        padding: 6px 2px;
    }
    .frontM-nav .nav-timer-pill .timer-label {
        display: none;
    }
    .nav-icon-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px;
        flex-shrink: 0;
    }
    .nav-icon-btn .pxicon {
        width: 20px !important;
        height: 20px !important;
    }
}

@media screen and (max-width: 430px) {
    .frontM-nav .nav-timer-pill {
        display: none;
    }
}

@media screen and (max-width: 1023px) and (max-height: 540px) {
    .frontM-nav {
        height: auto;
        padding: 0.4rem 0.7rem;
    }
    .frontM-nav .nav-links li,
    .frontM-nav .nav-link {
        font-size: 15px !important;
        padding: 6px 3px;
    }
    .frontM-nav .nav-timer-pill {
        font-size: 11px;
        padding: 2px 6px;
    }
    .nav-icon-btn {
        width: 34px !important;
        height: 34px !important;
    }
    .nav-icon-btn .pxicon {
        width: 18px !important;
        height: 18px !important;
    }
    .centerContainer {
        justify-content: flex-start;
        overflow-y: auto;
        padding: 0.4rem 12px 0.6rem 12px;
        gap: 0.4rem;
    }
    .title-app-icon {
        width: 28px;
        height: 28px;
    }
    h1.greetings {
        margin-top: 0;
        margin-bottom: 0.3vh;
    }
    .capsule-unified {
        margin-top: 0.2vh;
        margin-bottom: 0.5vh;
    }
    .capsule-half {
        font-size: 0.95rem;
        padding: 0.35rem 0.55rem;
        min-height: 26px;
    }
    #myButton {
        height: 44px !important;
        min-height: 44px !important;
        font-size: 15px !important;
        padding: 0 1.1rem !important;
    }
}

/* ==========================================================================
   🎮 启动页底部原生广告卡片 (Arcade Native Bottom Ad Card)
   ========================================================================== */
.arcade-bottom-native-card {
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: min(728px, 100%);
    min-width: 0;
    flex-shrink: 0;
    margin: 1.1rem auto 0 auto;
    background: #0d121c; /* 100% 实色墨晶底板，零半透明，纯性能优先 */
    border: 2px solid #28303f;
    border-radius: 6px;
    box-shadow: 
        0 4px 0 #07090e,
        0 8px 20px rgba(0, 0, 0, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 8px 12px 10px 12px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.arcade-bottom-native-card:hover {
    border-color: #38bdf8;
    box-shadow: 
        0 4px 0 #07090e,
        0 0 16px rgba(56, 189, 248, 0.25),
        0 8px 20px rgba(0, 0, 0, 0.85),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.arcade-bottom-native-card .arcade-sponsor-header {
    margin-bottom: 7px;
    padding-bottom: 4px;
    border-bottom: 1.5px dashed #202735;
}

.arcade-bottom-native-card .native-ad-body {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border-radius: 4px;
    background: #05080f; /* 100% 实色底 */
}

.arcade-bottom-native-card .adsbygoogle {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 50px;
}

@media screen and (max-width: 768px) {
    .arcade-bottom-native-card {
        max-width: 100%;
        margin-top: 0.8rem;
        padding: 6px 10px 8px 10px;
    }
    .arcade-bottom-native-card .native-ad-body {
        min-height: 50px;
    }
}

/* 竖屏移动设备（手机 & 平板）：卡片悬浮于底边缘上方，留出安全距离，彻底避免被浏览器裁切 */
@media screen and (orientation: portrait) and (max-width: 1023px) {
    .centerContainer {
        padding: 0.8rem 12px calc(155px + env(safe-area-inset-bottom, 0px)) 12px;
        justify-content: center;
        gap: 0.4rem;
    }
    .title-logo-header {
        margin-bottom: 0;
    }
    .title-app-icon {
        width: 34px;
        height: 34px;
        margin: 0;
    }
    .centerContainer h1.greetings {
        font-size: 1.45rem;
        line-height: 1.25;
        letter-spacing: 1px;
        max-width: 94%;
        margin: 0;
    }
    .centerContainer h2.greetings {
        font-size: 1.05rem;
        line-height: 1.35;
        letter-spacing: 0.4px;
        max-width: 96%;
        margin: 0;
    }
    .centerContainer #warning,
    .centerContainer .greetings#warning,
    .centerContainer p#warning {
        font-size: 1.05rem !important;
        line-height: 1.35;
        letter-spacing: 0.5px;
        max-width: 96%;
        margin: 0.15rem 0 0.1rem;
    }
    .centerContainer :lang(zh) h1.greetings,
    .centerContainer :lang(zh-TW) h1.greetings,
    .centerContainer :lang(ja) h1.greetings,
    .centerContainer :lang(ko) h1.greetings,
    .centerContainer :lang(th) h1.greetings {
        font-size: 1.65rem;
    }
    .centerContainer :lang(zh) h2.greetings,
    .centerContainer :lang(zh-TW) h2.greetings,
    .centerContainer :lang(ja) h2.greetings,
    .centerContainer :lang(ko) h2.greetings,
    .centerContainer :lang(th) h2.greetings {
        font-size: 1.2rem;
        line-height: 1.4;
    }
    .centerContainer :lang(zh) #warning,
    .centerContainer :lang(zh-TW) #warning,
    .centerContainer :lang(ja) #warning,
    .centerContainer :lang(ko) #warning {
        font-size: 1.2rem !important;
        line-height: 1.4;
    }
    .link {
        font-size: 1em;
        padding: 0.22rem 0.7rem;
    }
    .capsule-unified {
        margin: 0.15rem 0 0.25rem;
        width: auto;
        max-width: 100%;
        overflow: visible;
    }
    .capsule-half {
        font-size: 0.95rem;
        padding: 0.32rem 0.65rem;
        min-height: 24px;
        flex: 0 0 auto;
        white-space: nowrap;
    }
    #myButton {
        height: 46px !important;
        min-height: 46px !important;
        font-size: 15px !important;
        padding: 0 1.2rem !important;
        margin-top: 0;
    }
    #webBottomAdSlot.arcade-bottom-native-card {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
        width: calc(100% - 24px) !important;
        max-width: 560px !important;
        margin: 0 !important;
        height: auto !important;
        max-height: none !important;
        padding: 6px 8px 8px 8px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
    }
    #webBottomAdSlot.arcade-bottom-native-card .arcade-sponsor-header {
        margin-bottom: 4px !important;
        padding-bottom: 3px !important;
        flex-shrink: 0 !important;
    }
    #webBottomAdSlot .native-ad-body {
        min-height: 50px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        flex: 1 1 auto !important;
    }
    #webBottomAdSlot ins.adsbygoogle {
        min-height: 50px !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }
}

@media screen and (max-height: 540px) and (orientation: landscape) {
    .arcade-bottom-native-card {
        max-width: 580px;
        margin-top: 0.4rem;
        padding: 4px 8px 6px 8px;
    }
    .arcade-bottom-native-card .arcade-sponsor-header {
        margin-bottom: 4px;
        padding-bottom: 3px;
    }
    .arcade-bottom-native-card .native-ad-body {
        min-height: 50px;
    }
}

/* ==========================================================================
   iOS 添加到主屏幕提醒（仅 JS 对苹果手机/平板打开）
   ========================================================================== */
.ios-prompt {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 980;
    box-sizing: border-box;
    padding: 1rem 1rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
    background: rgba(18, 22, 38, 0.96);
    border-top: 3px solid #38bdf8;
    box-shadow: 0 -6px 0 #000, 0 -18px 32px rgba(0, 0, 0, 0.55);
    text-align: center;
    color: #eeeeee;
    font-family: 'PressStart2P-Regular', sans-serif;
    pointer-events: auto;
}
.ios-prompt.is-on {
    display: block;
}
#pPrompt {
    margin: 0 auto 0.7rem;
    max-width: 42rem;
    font-size: 1.05rem;
    line-height: 1.55;
    color: #f8fafc;
    text-shadow: 0.15rem 0.15rem 0 #000;
}
.ios-prompt-icon-bg {
    display: inline-block;
    margin: 0.15rem auto 0.75rem;
    padding: 0.55rem 0.95rem;
    background: #1e293b;
    border: 2px dashed #94a3b8;
}
#pngPrompt {
    display: block;
    margin: 0;
    height: clamp(2.4rem, 9vw, 3.6rem);
    width: auto;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.ios-prompt-step {
    margin: 0 auto 0.9rem;
    max-width: 42rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #7dd3fc;
}
#promptButton {
    font-family: 'PressStart2P-Regular', sans-serif;
    padding: 0.45rem 0.9rem;
    border: 2px solid #38ef7d;
    background: #0db860;
    color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 3px 0 #042412;
    font-size: 0.95rem;
    cursor: pointer;
}
#promptButton:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #042412;
}

@media screen and (max-width: 767px) {
    #pPrompt {
        font-size: 0.95rem;
    }
    .ios-prompt-step {
        font-size: 0.85rem;
    }
}