:root{
      --text:#e8ecff;
      --muted:rgba(232,236,255,.65);
      --line:rgba(232,236,255,.16);

      --panel:rgba(10,14,28,.52);
      --panel2:rgba(10,14,28,.38);
      --shadow: 0 26px 70px rgba(0,0,0,.42);

      --ok:#35f28a;
      --ok2:rgba(53,242,138,.18);
      --bad:#ff2d55;
      --bad2:rgba(255,45,85,.18);

      --btn:rgba(232,236,255,.10);
      --btn2:rgba(232,236,255,.14);
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
      color:var(--text);
      overflow:hidden;
      background:#03040a;
    }

    /* ====== 星云 Canvas 背景 ====== */
    #nebula{
      position:fixed;
      inset:0;
      width:100%;
      height:100%;
      z-index:0;
    }
    /* 轻微雾化与暗角 */
    .vignette{
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:1;
      background:
        radial-gradient(1200px 900px at 50% 35%, rgba(255,255,255,.06), transparent 55%),
        radial-gradient(1200px 900px at 50% 75%, rgba(255,255,255,.04), transparent 60%),
        radial-gradient(900px 700px at 20% 20%, rgba(110,231,255,.08), transparent 55%),
        radial-gradient(900px 700px at 80% 25%, rgba(255,110,231,.08), transparent 55%),
        radial-gradient(1500px 1100px at 50% 50%, transparent 40%, rgba(0,0,0,.62) 100%);
      mix-blend-mode: screen;
      opacity:.65;
      filter: blur(.2px);
    }

    /* ====== 3D 场景 ====== */
    .scene{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      perspective: 1200px;
      perspective-origin: 50% 50%;
      padding: 20px 18px 20px;
      z-index:2;
    }
    .stage{
      position:relative;
      width:min(460px, 92vw);
      height: 560px; /* 拉高 */
    }

    .wheel{
      position:absolute;
      inset:0;
      transform-style:preserve-3d;
      transition: transform 650ms cubic-bezier(.2,.8,.2,1);
      will-change: transform;
    }

    .face{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      transform-style:preserve-3d;
      pointer-events:none;
      opacity:0;
      visibility:hidden;
      transition: opacity 220ms ease, transform 650ms cubic-bezier(.2,.8,.2,1);
      backface-visibility:hidden;
    }
    .face.show{
      opacity:.55;
      visibility:visible;
    }
    .face.active{
      pointer-events:auto;
      opacity:1;
      visibility:visible;
    }

    /* ====== 门体 ====== */
    .gate{
      width: min(460px, 92vw);
      height: 560px;
      border-radius: 26px;
      border:1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
        radial-gradient(1200px 700px at 50% 0%, rgba(110,231,255,.10), transparent 55%),
        radial-gradient(900px 600px at 50% 100%, rgba(255,110,231,.08), transparent 55%);
      backdrop-filter: blur(14px);
      box-shadow: var(--shadow);
      position:relative;
      overflow:hidden;
    }

    /* 机械门条纹 */
    .gate::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        repeating-linear-gradient(
          90deg,
          rgba(255,255,255,.05) 0px,
          rgba(255,255,255,.05) 2px,
          transparent 2px,
          transparent 14px
        );
      opacity:.22;
      pointer-events:none;
      mix-blend-mode: overlay;
    }

    /* 顶部灯区 */
    .lampBar{
      position:absolute;
      top:16px; left:16px; right:16px;
      height:66px;
      border-radius:18px;
      border:1px solid rgba(232,236,255,.14);
      background: rgba(0,0,0,.18);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:14px;
      box-shadow: 0 16px 40px rgba(0,0,0,.28);
    }
    .gateNum{
      font-weight:900;
      letter-spacing:.8px;
      font-size:16px;
      color: rgba(232,236,255,.88);
      text-shadow: 0 10px 22px rgba(0,0,0,.35);
      pointer-events:none;
    }
    .gateName{
      margin-top: 6px;
      font-weight:900;
      letter-spacing:.8px;
      font-size:18px;
      color: rgba(232,236,255,.92);
      text-shadow: 0 10px 22px rgba(0,0,0,.35);
      opacity:0;
      transform: translateY(6px);
      transition: opacity 220ms ease, transform 220ms ease;
    }
    .gate.unlocked .gateName{
      opacity:1;
      transform: translateY(0);
    }
    .lamp{
      width:14px; height:14px;
      border-radius:999px;
      border:1px solid rgba(232,236,255,.18);
      background: rgba(232,236,255,.10);
      box-shadow: inset 0 0 12px rgba(255,255,255,.08);
      opacity:.45;
    }
    .lamp.red.on{
      opacity:1;
      background: radial-gradient(circle at 30% 30%, #ffd1d9 0%, #ff2d55 45%, rgba(255,45,85,.30) 100%);
      box-shadow: 0 0 18px rgba(255,45,85,.55), inset 0 0 10px rgba(255,255,255,.18);
      border-color: rgba(255,45,85,.25);
    }
    .lamp.green.on{
      opacity:1;
      background: radial-gradient(circle at 30% 30%, #d7ffe8 0%, #35f28a 45%, rgba(53,242,138,.30) 100%);
      box-shadow: 0 0 18px rgba(53,242,138,.55), inset 0 0 10px rgba(255,255,255,.18);
      border-color: rgba(53,242,138,.25);
    }

    /* 门内部 */
    .core{
      position:absolute;
      top:96px; left:20px; right:20px; bottom:20px;
      border-radius: 22px;
      border:1px solid rgba(232,236,255,.12);
      background: rgba(0,0,0,.16);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:18px;
      padding:22px;
    }

    /* 输入框 */
    .inputs{
      display:flex;
      gap:14px;
      justify-content:center;
      align-items:center;
      margin-top: 6px;
    }
    .box{
      width:64px;
      height:74px;
      border-radius:18px;
      border:1px solid rgba(232,236,255,.16);
      background: rgba(0,0,0,.18);
      color: var(--text);
      text-align:center;
      font-size:28px;
      font-weight:900;
      letter-spacing: .5px;
      outline:none;
      text-transform: uppercase;
      transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease, background .12s ease;
    }
    .box:focus{
      border-color: rgba(110,231,255,.35);
      box-shadow: 0 0 0 5px rgba(110,231,255,.12);
      background: rgba(0,0,0,.24);
    }

    /* 提交按钮（仅图形/单词，无额外提示语） */
    .submit{
      width:92px; height:46px;
      border-radius: 999px;
      border:1px solid rgba(232,236,255,.16);
      background: var(--btn);
      color: var(--text);
      font-weight:900;
      letter-spacing: .6px;
      cursor:pointer;
      transition: transform .08s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease;
      user-select:none;
    }
    .submit:hover{
      background: var(--btn2);
      box-shadow: 0 0 0 5px rgba(232,236,255,.06);
    }
    .submit:active{transform: translateY(1px)}
    .submit:disabled{
      opacity:.45;
      cursor:not-allowed;
    }
    .submit.check{
      background: var(--btn2);
    }
    .submit.wrong{
      background: var(--bad2);
      border-color: rgba(255,45,85,.35);
      color: rgba(255,210,220,.98);
      box-shadow: 0 0 0 5px rgba(255,45,85,.08);
    }
    .submit.solved{
      background: var(--ok2);
      border-color: rgba(53,242,138,.35);
      color: rgba(215,255,232,.98);
      box-shadow: 0 0 0 5px rgba(53,242,138,.08);
    }
    .submit.wrong:disabled,
    .submit.solved:disabled{
      opacity:1;
    }

    /* 解锁态：不额外展示任何东西，只填框并锁 */
    .gate.unlocked .box{
      border-color: rgba(53,242,138,.28);
      background: rgba(53,242,138,.08);
      color: rgba(215,255,232,.98);
      box-shadow: 0 0 0 4px rgba(53,242,138,.06);
    }

    /* 错误反馈：抖动 + 红色闪一下（无文字） */
    .gate.shake{animation: shake .24s linear 1;}
    @keyframes shake{
      0%{transform:translateX(0)}
      25%{transform:translateX(-6px)}
      50%{transform:translateX(6px)}
      75%{transform:translateX(-5px)}
      100%{transform:translateX(0)}
    }
    .gate.flashBad{
      box-shadow: 0 26px 70px rgba(0,0,0,.42), 0 0 0 6px rgba(255,45,85,.10);
      border-color: rgba(255,45,85,.22);
    }

    /* ====== 两侧切换按钮（仅箭头） ====== */
    .navBtn{
      position:absolute;
      top:50%;
      transform: translateY(-50%);
      width:48px;height:48px;
      border-radius:999px;
      border:1px solid rgba(232,236,255,.14);
      background: rgba(0,0,0,.16);
      backdrop-filter: blur(10px);
      box-shadow: 0 14px 32px rgba(0,0,0,.30);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      user-select:none;
      transition: transform .12s ease, background .12s ease, opacity .12s ease;
      z-index:3;
      color: rgba(232,236,255,.78);
      font-size:22px;
      line-height:1;
      padding:0;
      appearance:none;
    }
    .navBtn:hover{background: rgba(0,0,0,.22)}
    .navBtn:active{transform: translateY(-50%) scale(.98)}
    .navPrev{left:-18px}
    .navNext{right:-18px}
    @media (max-width:520px){
      .navPrev{left:-8px}
      .navNext{right:-8px}
    }

    /* ====== 全部完成后的 touch / the end? ====== */
    .touchBtn{
      position:fixed;
      top:18px;
      left:50%;
      transform: translateX(-50%);
      z-index:6;
      padding: 12px 18px;
      border-radius: 999px;
      border:1px solid rgba(232,236,255,.16);
      background: rgba(0,0,0,.20);
      backdrop-filter: blur(10px);
      color: rgba(232,236,255,.92);
      font-weight:900;
      letter-spacing: .8px;
      font-size:18px;
      cursor:pointer;
      user-select:none;
      opacity:0;
      pointer-events:none;
      transition: opacity 260ms ease, transform 260ms ease, background 160ms ease;
    }
    .touchBtn.show{
      opacity:1;
      pointer-events:auto;
      transform: translateX(-50%) translateY(0);
    }
    .touchBtn:hover{background: rgba(0,0,0,.26)}

    .endBtn{
      position:fixed;
      bottom:-80px;
      left:50%;
      transform: translateX(-50%);
      z-index:6;
      padding: 14px 20px;
      border-radius: 999px;
      border:1px solid rgba(232,236,255,.16);
      background: rgba(0,0,0,.22);
      backdrop-filter: blur(10px);
      color: rgba(232,236,255,.92);
      font-weight:900;
      letter-spacing: .8px;
      font-size:18px;
      cursor:pointer;
      user-select:none;
      transition: bottom 520ms cubic-bezier(.2,.8,.2,1), opacity 260ms ease, background 160ms ease;
      opacity:0;
      pointer-events:none;
    }
    .endBtn.show{
      bottom:22px;
      opacity:1;
      pointer-events:auto;
    }
    .endBtn:hover{background: rgba(0,0,0,.28)}

    /* 触发终局动画：门放大并消失 */
    body.finale .scene{
      pointer-events:none;
    }
    body.finale .navBtn{
      opacity:0;
      pointer-events:none;
    }
    body.finale .wheel{
      transition: transform 700ms cubic-bezier(.2,.8,.2,1);
    }
    body.finale .face{
      opacity:0;
      transition: opacity 700ms ease 260ms;
    }
    body.finale .gate{
      transform: scale(1.05);
      opacity:0;
      transition: transform 700ms cubic-bezier(.2,.8,.2,1), opacity 700ms ease 260ms;
    }

    /* 星云反色：给 canvas 套滤镜（JS 反向流动由脚本控制） */
    body.invert #nebula{
      filter: invert(1) hue-rotate(180deg) saturate(1.25) contrast(1.08);
    }
    body.invert .vignette{
      opacity:.55;
      mix-blend-mode: lighten;
    }