/* ===================== Linux 终端窗口 ===================== */
      .window {
        width: min(1080px, 100%);
        height: min(760px, calc(100vh - 32px));
        display: flex;
        flex-direction: column;
        background: rgba(17, 22, 20, 0.92);
        border: 1px solid var(--line);
        border-radius: 10px;
        overflow: hidden;
        box-shadow:
          0 0 0 1px rgba(57, 255, 158, 0.06),
          0 24px 80px rgba(0, 0, 0, 0.75),
          inset 0 0 120px rgba(57, 255, 158, 0.03);
        animation: boot-in 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) both;
      }
      @keyframes boot-in {
        from {
          opacity: 0;
          transform: scale(0.985) translateY(10px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      .titlebar {
        flex: none;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
        background: linear-gradient(#1b231f, #141a17);
        border-bottom: 1px solid var(--line);
        user-select: none;
      }
      .dots {
        display: flex;
        gap: 7px;
      }
      .dot {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
      }
      .dot.r {
        background: #ff5f56;
      }
      .dot.y {
        background: #ffbd2e;
      }
      .dot.g {
        background: #27c93f;
      }
      .titlebar .tt {
        flex: 1;
        text-align: center;
        color: var(--dim);
        font-size: 12px;
        letter-spacing: 0.04em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .badge {
        font-size: 11px;
        color: var(--dim);
        border: 1px solid var(--line);
        border-radius: 4px;
        padding: 1px 6px;
        font-variant-numeric: tabular-nums;
        flex: none;
      }

      /* 屏幕 + CRT 扫描线 / 扫描光束 / 电流抖动 */
      .screen {
        position: relative;
        flex: 1;
        min-height: 0;
        overflow: hidden;
      }
      .screen::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        background: repeating-linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.22) 0 1px,
          transparent 1px 3px
        );
        opacity: 0.5;
      }
      .screen::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 120px;
        z-index: 4;
        pointer-events: none;
        background: linear-gradient(
          to bottom,
          transparent,
          rgba(57, 255, 158, 0.05),
          transparent
        );
        animation: sweep 7s linear infinite;
      }
      @keyframes sweep {
        from {
          transform: translateY(-140px);
        }
        to {
          transform: translateY(780px);
        }
      }
      .flicker {
        animation: flicker 4.5s infinite steps(1, end);
      }
      @keyframes flicker {
        0%,
        96%,
        100% {
          opacity: 1;
        }
        97% {
          opacity: 0.87;
        }
        98% {
          opacity: 1;
        }
        99% {
          opacity: 0.93;
        }
      }

      .scroll {
        position: relative;
        z-index: 2;
        height: 100%;
        overflow-y: auto;
        padding: 18px clamp(14px, 3vw, 28px) 22px;
      }
      .scroll::-webkit-scrollbar {
        width: 9px;
      }
      .scroll::-webkit-scrollbar-thumb {
        background: #243029;
        border-radius: 9px;
      }
      .scroll::-webkit-scrollbar-track {
        background: transparent;
      }

      /* ===================== 开机自检逐行动画 ===================== */
      .bootline {
        opacity: 0;
        animation: lineIn 0.28s ease-out forwards;
      }
      @keyframes lineIn {
        from {
          opacity: 0;
          transform: translateX(-6px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .ok {
        color: var(--green);
      }
      .warn {
        color: var(--amber);
      }
      .err {
        color: var(--red);
      }
      .dim {
        color: var(--dim);
      }
      .cy {
        color: var(--cyan);
      }
      .vi {
        color: var(--violet);
      }

      /* ===================== 品牌 ASCII ===================== */
      .brand {
        color: var(--green);
        font-size: clamp(6px, 1.55vw, 13px);
        line-height: 1.15;
        margin: 0;
        white-space: pre;
        overflow-x: auto;
        animation: glowPulse 3.4s ease-in-out infinite;
      }
      @keyframes glowPulse {
        0%,
        100% {
          text-shadow:
            0 0 6px rgba(57, 255, 158, 0.5),
            0 0 22px rgba(57, 255, 158, 0.15);
        }
        50% {
          text-shadow:
            0 0 10px rgba(57, 255, 158, 0.8),
            0 0 34px rgba(57, 255, 158, 0.3);
        }
      }
      .rule {
        border: 0;
        border-top: 1px dashed #22302a;
        margin: 14px 0;
      }

      /* ===================== 倒计时 ===================== */
      .cd-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }
      .cd-cell {
        background: linear-gradient(#151d19, #101613);
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 12px 6px;
        text-align: center;
        position: relative;
        overflow: hidden;
      }
      .cd-cell::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(
          120deg,
          transparent 40%,
          rgba(57, 255, 158, 0.07) 50%,
          transparent 60%
        );
        animation: shine 5s linear infinite;
      }
      @keyframes shine {
        from {
          transform: translateX(-100%);
        }
        to {
          transform: translateX(100%);
        }
      }
      .cd-num {
        font-size: clamp(26px, 6vw, 52px);
        font-weight: 700;
        color: var(--green);
        letter-spacing: 0.04em;
        text-shadow: 0 0 10px rgba(57, 255, 158, 0.4);
        font-variant-numeric: tabular-nums;
      }
      .cd-num.tick {
        animation: tick 0.35s ease-out;
      }
      @keyframes tick {
        0% {
          transform: translateY(-6px);
          opacity: 0.35;
          filter: blur(1px);
        }
        100% {
          transform: none;
          opacity: 1;
          filter: none;
        }
      }
      .cd-lab {
        font-size: 11px;
        color: var(--dim);
        letter-spacing: 0.3em;
        margin-top: 4px;
      }

      .bar {
        height: 8px;
        background: #101614;
        border: 1px solid var(--line);
        border-radius: 99px;
        overflow: hidden;
      }
      .bar > i {
        display: block;
        height: 100%;
        width: 0;
        background: linear-gradient(90deg, #1f6b4a, var(--green));
        box-shadow: 0 0 12px rgba(57, 255, 158, 0.5);
        transition: width 0.6s ease;
      }

      /* ===================== 命令行 ===================== */
      .cmdrow {
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .ps1 {
        color: var(--green);
        white-space: nowrap;
        flex: none;
      }
      .ps1 .u {
        color: var(--cyan);
      }
      #cmdline {
        flex: 1;
        min-width: 0;
        background: transparent;
        border: 0;
        outline: 0;
        color: var(--fg);
        font-family: inherit;
        font-size: inherit;
        caret-color: transparent;
        padding: 2px 0;
      }
      .caret {
        width: 9px;
        height: 1.15em;
        background: var(--green);
        flex: none;
        animation: blink 1.05s steps(1) infinite;
        box-shadow: 0 0 8px rgba(57, 255, 158, 0.7);
      }
      @keyframes blink {
        0%,
        49% {
          opacity: 1;
        }
        50%,
        100% {
          opacity: 0;
        }
      }
      .echo {
        color: var(--fg);
        word-break: break-all;
      }
      .out {
        white-space: pre-wrap;
        word-break: break-word;
      }

      /* ===================== 游戏浮层 ===================== */
      .layer {
        position: absolute;
        inset: 0;
        z-index: 10;
        display: none;
        background: rgba(8, 11, 10, 0.97);
        padding: 14px;
        overflow: auto;
      }
      .layer.on {
        display: flex;
        flex-direction: column;
        gap: 12px;
        animation: lineIn 0.25s ease-out;
      }
      .layer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex: none;
        border-bottom: 1px solid var(--line);
        padding-bottom: 8px;
        flex-wrap: wrap;
      }
      .layer-title {
        color: var(--green);
        font-weight: 700;
        letter-spacing: 0.12em;
      }
      .btn {
        background: #131a17;
        border: 1px solid var(--line);
        color: var(--fg);
        font-family: inherit;
        font-size: 12px;
        padding: 5px 11px;
        border-radius: 6px;
        cursor: pointer;
      }
      .btn:hover {
        border-color: var(--green);
        color: var(--green);
        box-shadow: 0 0 12px rgba(57, 255, 158, 0.18);
      }
      .btn:active {
        transform: translateY(1px);
      }
      .stage {
        flex: 1;
        display: flex;
        gap: 18px;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
      }
      .panel {
        background: #0f1512;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 12px;
        min-width: 152px;
      }
      .panel h4 {
        margin: 0 0 8px;
        font-size: 11px;
        color: var(--dim);
        letter-spacing: 0.24em;
        font-weight: 400;
      }
      .stat {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        font-size: 13px;
      }
      .stat b {
        color: var(--amber);
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }
      canvas {
        display: block;
        background: #0a0f0c;
        border: 1px solid var(--line);
        border-radius: 6px;
      }
      .keys {
        font-size: 11px;
        color: var(--dim);
        line-height: 1.9;
      }
      .keys kbd {
        background: #161e1a;
        border: 1px solid #26332c;
        border-bottom-width: 2px;
        border-radius: 4px;
        padding: 0 5px;
        color: var(--fg);
        font-family: inherit;
      }

      /* 1024 棋盘 */
      .g1024 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        background: #141b17;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 8px;
        width: min(340px, 78vw);
      }
      .tile {
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        background: #0e1411;
        font-weight: 700;
        font-size: clamp(14px, 4.4vw, 24px);
        font-variant-numeric: tabular-nums;
      }
      .tile.pop {
        animation: pop 0.16s ease-out;
      }
      @keyframes pop {
        from {
          transform: scale(0.6);
        }
        to {
          transform: scale(1);
        }
      }
      .tile[data-v="2"] {
        background: #1c2a23;
        color: #9fe8c6;
      }
      .tile[data-v="4"] {
        background: #22362c;
        color: #a9f0d0;
      }
      .tile[data-v="8"] {
        background: #1f4a3a;
        color: #dcfff0;
      }
      .tile[data-v="16"] {
        background: #1d5c46;
        color: #e6fff5;
      }
      .tile[data-v="32"] {
        background: #1a7053;
        color: #fff;
      }
      .tile[data-v="64"] {
        background: #14855e;
        color: #fff;
      }
      .tile[data-v="128"] {
        background: #0f9a67;
        color: #04120c;
      }
      .tile[data-v="256"] {
        background: #26b177;
        color: #04120c;
      }
      .tile[data-v="512"] {
        background: #57d7ff;
        color: #04120c;
      }
      .tile[data-v="1024"] {
        background: #ffb454;
        color: #1a1204;
        box-shadow: 0 0 22px rgba(255, 180, 84, 0.55);
      }
      .tile[data-v="2048"] {
        background: #b78bff;
        color: #140a24;
        box-shadow: 0 0 26px rgba(183, 139, 255, 0.6);
      }

      /* 触屏方向键 */
      .dpad {
        display: grid;
        grid-template-columns: repeat(3, 46px);
        grid-auto-rows: 42px;
        gap: 6px;
        justify-content: center;
      }
      .dpad .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
      }
      .banner {
        color: var(--amber);
        font-size: 13px;
        min-height: 1.4em;
        flex: none;
        margin: 0;
      }

      /* ===================== 底栏 ===================== */
      .footer {
        flex: none;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
        padding: 8px 12px;
        background: linear-gradient(#141a17, #101512);
        border-top: 1px solid var(--line);
        font-size: 11.5px;
        color: var(--dim);
        letter-spacing: 0.03em;
        user-select: none;
      }
      .footer a {
        color: var(--dim);
        text-decoration: none;
        border-bottom: 1px dotted #2b3a33;
        padding-bottom: 1px;
        transition:
          color 0.18s ease,
          border-color 0.18s ease,
          text-shadow 0.18s ease;
      }
      .footer a:hover,
      .footer a:focus-visible {
        color: var(--green);
        border-bottom-color: var(--green);
        text-shadow: 0 0 8px rgba(57, 255, 158, 0.45);
        outline: none;
      }
      .footer .sep {
        color: #2b3a33;
      }
      .footer .sig {
        color: #3f574b;
      }
      .footer .sig::after {
        content: "_";
        animation: blink 1.05s steps(1) infinite;
      }
      @media (max-width: 640px) {
        .footer {
          font-size: 10.5px;
          gap: 7px;
          padding: 7px 10px;
        }
        .footer .sig {
          display: none;
        }
      }

      @media (max-width: 640px) {
        body {
          padding: 0;
        }
        .window {
          height: 100vh;
          border-radius: 0;
          border-width: 0;
        }
        .cd-grid {
          gap: 6px;
        }
        .scroll {
          padding: 14px 12px 18px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        * {
          animation-duration: 0.001s !important;
          animation-iteration-count: 1 !important;
        }
      }