:root {
  color-scheme: dark;
  --ink: #11120f;
  --paper: #f2ff5a;
  --red: #ff5a52;
  --blue: #64c8ff;
  --muted: #96988d;
  --panel: #1a1b18;
  --line: #383a32;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: #0d0e0c; }
body {
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #f5f6eb;
  overscroll-behavior: none;
}
button, input { font: inherit; }
button { color: inherit; min-width: 0; }

#app {
  min-height: 100svh;
  width: min(100%, 480px);
  margin: auto;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    #11120f;
  background-size: 24px 24px;
  overflow: hidden;
}

.screen { min-height: 100svh; display: flex; flex-direction: column; padding: 18px; position: relative; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { font-size: 12px; letter-spacing: .12em; color: var(--paper); font-weight: 800; }
.sound, .icon-btn { border: 1px solid var(--line); background: var(--panel); border-radius: 50%; width: 40px; height: 40px; }
.restart-level { color:var(--paper);font:900 23px/1 sans-serif; }
.restart-level:active { transform:rotate(-65deg) scale(.92);background:#292b24; }
.eyebrow { margin: 28px 0 8px; color: var(--muted); font: 700 11px/1.2 monospace; letter-spacing: .14em; }
h1 { font-size: clamp(39px, 13vw, 62px); line-height: .94; letter-spacing: -.075em; margin: 0; }
.lead { color: #bbbdb2; line-height: 1.65; margin: 18px 0 0; max-width: 350px; font-size: 14px; }
.hero-mark { margin: auto 0; position: relative; height: 160px; }
.hero-mark::before { content: "?"; position: absolute; right: 3%; top: -28px; font: 900 190px/.9 Arial; color: var(--paper); transform: rotate(8deg); }
.hero-mark::after { content: "HUMAN  /  BOT"; position: absolute; left: 0; bottom: 20px; border: 1px solid var(--line); padding: 8px 10px; color: var(--muted); font: 10px monospace; }

.primary, .secondary, .danger {
  width: 100%; min-height: 58px; border-radius: 16px; border: 0; font-weight: 900; letter-spacing: .03em;
}
.primary { background: var(--paper); color: var(--ink); box-shadow: 0 6px 0 #89921c; }
.primary:active { transform: translateY(4px); box-shadow: 0 2px 0 #89921c; }
.secondary { background: var(--panel); color: #e7e8df; border: 1px solid var(--line); }
.danger { background: var(--red); color: #111; box-shadow: 0 6px 0 #8d2b26; }
.danger:active { transform: translateY(4px); box-shadow: 0 2px 0 #8d2b26; }
.tiny-note { text-align: center; color: #66695f; font-size: 10px; margin: 14px 0 0; }

.game-head { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 10px; }
.level-meta { text-align: center; }
.level-meta b { display: block; font: 800 10px monospace; color: var(--paper); letter-spacing: .12em; }
.level-meta span { font-size: 14px; font-weight: 800; }
.progress { height: 4px; background: #292b25; margin: 15px -18px 0; }
.progress i { display: block; height: 100%; background: var(--paper); transition: width .35s ease; }
.brief { padding: 22px 0 15px; }
.brief h2 { margin: 0; font-size: 27px; letter-spacing: -.04em; }
.brief p { margin: 8px 0 0; color: #a5a79c; font-size: 13px; line-height: 1.55; }
.game-area { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width:0; width:100%; }
.status-row { display: flex; justify-content: space-between; color: var(--muted); font: 11px monospace; margin-bottom: 10px; }
.status-row strong { color: #f4f5ed; }
.toast { position: fixed; left: 50%; top: 78px; z-index: 20; transform: translate(-50%, -12px); opacity: 0; pointer-events: none; background: #f5f6ed; color: #111; padding: 10px 15px; border-radius: 99px; font-size: 12px; font-weight: 800; transition: .22s; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 01 mines */
.mine-board { width: 330px; max-width:100%; height:auto; aspect-ratio:1/1; flex:0 0 auto; margin: 0 auto 15px; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); grid-template-rows:repeat(6,minmax(0,1fr)); gap: 4px; background: #090a08; padding: 5px; border: 1px solid var(--line); }
.cell { display: grid; place-items: center; background: #252720; border: 0; font: 900 16px monospace; position: relative; }
.cell.open { background: #d8dacd; color: #181914; }
.cell.flag { color: var(--red); }
.cell.cursor::after { content: ""; position: absolute; inset: -2px; border: 3px solid var(--paper); z-index: 2; }
.cell.boom { background: var(--red); }
.mine-controls { display: grid; grid-template-columns: 1fr 1.45fr 1fr; gap: 8px; margin-top: auto; }
.dpad { display: grid; grid-template: repeat(3, 46px) / repeat(3, 1fr); gap: 4px; }
.control, .action { border: 1px solid #44463d; background: #23251f; border-radius: 9px; font-weight: 900; }
.control:active, .action:active { background: var(--paper); color: var(--ink); }
.up { grid-column: 2; }.left { grid-row: 2; grid-column: 1; }.down { grid-row: 2; grid-column: 2; }.right { grid-row: 2; grid-column: 3; }
.mine-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.action { min-height: 96px; font-size: 12px; }.action span { display:block; font-size: 22px; margin-bottom: 5px; }

/* 02 remote */
.remote-grid { width: min(100%, 330px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(5,1fr); margin: 0 auto 18px; border: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px),linear-gradient(90deg,var(--line) 1px, transparent 1px); background-size: 20% 20%; position: relative; }
.bot, .target { position: absolute; width: 13%; aspect-ratio: 1; border-radius: 50%; transition: left .18s, top .18s; transform: translate(27%,27%); }
.bot { background: var(--paper); box-shadow: 0 0 0 5px #f2ff5a25; z-index:2; }
.bot::after { content:""; position:absolute; width:35%;height:35%;border-radius:50%;background:#111;top:33%;left:33%; }
.target { border: 2px dashed var(--red); background: #ff5a5218; }
.bot.captured { background:var(--red);box-shadow:0 0 0 9px #ff5a5235,0 0 24px #ff5a5280;transform:translate(27%,27%) scale(.82) }
.target.captured { background:var(--paper);border-style:solid;box-shadow:0 0 22px #f2ff5a80 }
.remote-pad { width: 220px; margin: auto; display: grid; grid-template: repeat(3,64px) / repeat(3,1fr); gap: 7px; }
.remote-pad button { border: 1px solid var(--line); background: #252720; border-radius: 14px; font-size: 20px; font-weight: 900; }
.remote-pad button:active { background: var(--paper); color:#111; }
.remote-pad .center { grid-area:2/2; font-size:9px;color:var(--muted); }
.remote-grid2{grid-template-columns:repeat(6,1fr);background-size:16.6667% 16.6667%}.remote-grid2 .bot,.remote-grid2 .target{width:11%;transform:translate(25%,25%);z-index:3}.remote-wall{position:absolute;width:16.6667%;height:16.6667%;background:repeating-linear-gradient(45deg,#ff5a52,#ff5a52 6px,#76231f 6px,#76231f 12px);z-index:2}

/* 03 keypad */
.code-card { background: var(--paper); color: #111; border-radius: 20px; padding: 18px; display: flex; justify-content: space-between; align-items:end; }
.code-card small { font: 10px monospace; }.code-card b { font: 900 35px monospace; letter-spacing:.18em; }
.entered { height: 70px; display:grid; place-items:center; font: 900 27px monospace; letter-spacing:.35em; color:#f5f6ed; }
.keypad { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.keypad button { height: 62px; background:#24261f;border:1px solid #404239;border-radius:14px;font-size:20px;font-weight:900; }
.keypad button:active { background:var(--paper);color:#111; }
.keypad .wide-key{grid-column:span 2}.keypad-timer{margin:14px 0}.keypad2{margin-bottom:12px}

/* 04 tuner */
.tuner-panel { border:1px solid var(--line); padding:18px 16px; border-radius:18px; background:#171815; }
.tuner-row { margin-bottom:28px; }.tuner-row:last-child{margin:0;}
.tuner-label { display:flex;justify-content:space-between;font:11px monospace;margin-bottom:10px; }
.tuner-label b { color:var(--paper); }
.track-wrap { position:relative; height:28px; }
input[type=range] { width:100%; accent-color:var(--paper); }
.mirror-track input{direction:ltr}
.tuner-readout { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0; }
.tuner-readout div { background:#24251f;padding:12px 4px;text-align:center;border-radius:10px;font:12px monospace; }
.tuner-readout strong { display:block;font-size:18px;color:var(--paper); }

/* 05 escape */
.escape-zone { flex:1;min-height:390px;border:1px dashed #45473e;border-radius:20px;position:relative;overflow:hidden;background:#151613; }
.escape-zone::before { content:"可点击区域";position:absolute;left:12px;top:12px;color:#44463f;font:10px monospace; }
.escape-btn { position:absolute; width:142px;height:56px;border:0;border-radius:13px;background:var(--paper);color:#111;font-weight:900;transition:left .2s cubic-bezier(.2,.9,.3,1),top .2s cubic-bezier(.2,.9,.3,1); }
.patience { text-align:center;color:var(--muted);font:11px monospace;margin:12px; }

/* 06 mirror draw */
.canvas-wrap { position:relative;width:100%;aspect-ratio:1;border:1px solid var(--line);background:#f1f2e9;border-radius:20px;overflow:hidden;touch-action:none; }
#mirrorCanvas { width:100%;height:100%;display:block; }
.canvas-label { position:absolute;left:12px;top:10px;color:#74766d;font:10px monospace;pointer-events:none; }
.mirror-note { display:flex;justify-content:space-between;color:var(--muted);font:10px monospace;margin-top:10px; }.signature-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:9px;margin-top:14px}.signature-actions button{min-height:54px}

/* level archive */
.select-screen { overflow-y:auto; }
.select-summary { margin:24px 0 16px;background:var(--paper);color:#111;border-radius:18px;padding:16px 18px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:18px; }
.select-summary strong { font:900 36px monospace;letter-spacing:-.08em;white-space:nowrap; }.select-summary span{font-size:11px;font-weight:800;margin-bottom:5px;line-height:1.35;}
.level-grid { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.level-card { min-height:126px;text-align:left;border:1px solid var(--line);background:#1b1c18;border-radius:16px;padding:13px;display:grid;grid-template-columns:1fr auto;align-content:space-between; }
.level-card .level-no { color:var(--paper);font:800 12px monospace; }.level-card>i{font-style:normal;color:var(--paper);}
.level-card b { grid-column:1/-1;font-size:17px;align-self:end; }.level-card small { grid-column:1/-1;color:#8c8f84;font-size:9px;line-height:1.4;margin-top:7px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; }
.level-card.passed { border-color:#65701c;background:#202215; }.level-card.locked { opacity:.38;filter:grayscale(1); }
.level-card.recent{border-color:var(--paper);box-shadow:0 0 0 2px #f2ff5a55,0 0 25px #f2ff5a18;animation:recentPulse 1.2s ease 2}@keyframes recentPulse{50%{transform:scale(1.025)}}
.reset-all-progress{margin-top:18px}
.progress-reset-overlay{position:fixed;inset:0;z-index:40;display:none;align-items:center;justify-content:center;padding:22px;background:rgba(5,6,5,.74);backdrop-filter:blur(10px)}
.progress-reset-overlay.show{display:flex}
.progress-reset-dialog{width:min(420px,100%);border:1px solid var(--line);border-radius:24px;background:#11120f;box-shadow:0 28px 80px #000b;padding:22px;color:#f5f6eb}
.progress-reset-dialog>span{color:var(--paper);font:800 10px monospace;letter-spacing:.14em}
.progress-reset-dialog h2{margin:9px 0 8px;font-size:28px;letter-spacing:-.04em}
.progress-reset-dialog p{margin:0;color:#a5a79c;font-size:13px;line-height:1.65}
.progress-reset-dialog div{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.progress-reset-dialog button{min-height:52px}
.progress-note{margin:16px 0 0;color:#96988d;font-size:12px;line-height:1.55;text-align:center}
.sync-login{display:block;margin:6px auto 0;color:#dce84e;text-decoration:underline;text-underline-offset:4px}
.game-area.finishing{pointer-events:none}
.timed-ready{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px solid var(--line);border-radius:22px;background:#171815;padding:28px}.timed-ready>span{color:var(--paper);font:11px monospace;letter-spacing:.15em}.timed-ready>strong{font:900 58px monospace;margin:15px 0}.timed-ready p{color:var(--muted);font-size:13px;line-height:1.7;max-width:290px;margin:0 0 35px}.timed-ready button{max-width:290px}.timed-ready small{color:#606259;margin-top:16px;font-size:9px}

/* stroop */
.stroop-card { background:#f0f1e8;color:#111;border-radius:20px;min-height:205px;display:grid;place-items:center;align-content:center;gap:20px; }.stroop-card small{color:#777;font-size:11px}.stroop-card strong{font-size:58px;letter-spacing:.1em;}
.color-choices { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px; }.color-choices button{height:72px;border:1px solid var(--line);background:#22231e;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;}.color-choices i{width:13px;height:13px;border-radius:50%;background:var(--swatch);}
.rule-banner{background:var(--paper);color:#111;border-radius:13px;padding:12px;text-align:center;font-weight:900;margin-bottom:12px}

/* 10 elevator */
.elevator { flex:1;min-height:250px;display:grid;grid-template-columns:42px 1fr;position:relative;border:1px solid var(--line);background:#151613;border-radius:16px;overflow:hidden; }
.floor-stack { display:flex;flex-direction:column;border-right:1px solid var(--line); }.floor-stack span{flex:1;display:grid;place-items:center;color:#55584f;font:11px monospace;border-bottom:1px solid #282a24;}.floor-stack span.active{color:var(--paper);}
.lift-car { position:absolute;left:30%;width:45%;height:17%;background:var(--paper);color:#111;display:grid;place-items:center;font-size:28px;border-radius:8px 8px 0 0;transition:bottom .55s cubic-bezier(.3,.8,.2,1); }
.passenger-card { margin:12px 0;background:#252720;border-radius:12px;padding:12px;text-align:center;color:var(--muted);font-size:12px;}.passenger-card strong{font-size:24px;color:var(--paper);}
.floor-buttons { display:grid;grid-template-columns:repeat(5,1fr);gap:7px;}.floor-buttons button{height:52px;border:1px solid var(--line);background:#24251f;border-radius:12px;font-weight:900;}
.elevator2{min-height:310px}.floor-buttons2{grid-template-columns:repeat(5,1fr)}.floor-buttons2 button{height:42px}.lift-car2{height:9%}
.elevator-formula{background:var(--paper);color:#111;border-radius:13px;padding:11px 13px;margin-bottom:11px;display:grid;gap:4px}.elevator-formula span{font:9px monospace}.elevator-formula strong{font:900 12px monospace}

/* 11 cross */
.cross-field { width:min(100%,350px);aspect-ratio:1;margin:auto;position:relative;border:1px solid var(--line);border-radius:18px;background-image:linear-gradient(#30322c 1px,transparent 1px),linear-gradient(90deg,#30322c 1px,transparent 1px);background-size:10% 10%; }
.cross-target,.cross-probe { position:absolute;width:34px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;}.cross-target{border:3px dashed var(--red);}.cross-probe{background:var(--paper);box-shadow:0 0 0 8px #f2ff5a25;}
.cross-field2 .cross-probe,.cross-field2 .cross-target{z-index:3}.cross-wall{position:absolute;background:repeating-linear-gradient(45deg,#ff5a52,#ff5a52 7px,#6d221e 7px,#6d221e 14px);border:1px solid #ff8a84;z-index:2}
.cross-layout{display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:12px;align-items:center;min-width:0}.cross-layout .cross-field{width:100%;min-width:0}.cross-vertical{height:100%;display:flex;flex-direction:column;align-items:center;color:var(--muted);font:9px monospace;text-align:center;overflow:visible}.cross-vertical input{width:min(64vw,250px);transform:rotate(-90deg);margin-top:118px}.cross-horizontal{display:block;margin-top:14px;color:var(--muted);font:10px monospace}.cross-horizontal input{display:block;width:calc(100% - 60px);margin:9px auto 0}

/* 12 restraint */
.upload-panel { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden; }.upload-ring{width:190px;aspect-ratio:1;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;align-content:center;background:#181916;box-shadow:inset 0 0 0 13px #111;}.upload-ring strong{font:900 45px monospace;color:var(--paper)}.upload-ring span{font-size:11px;color:var(--muted)}
.upload-track{width:100%;height:6px;background:#292b25;margin:28px 0;overflow:hidden}.upload-track i{display:block;height:100%;width:0;background:var(--paper)}
.tempt{width:210px;height:62px;border:0;border-radius:16px;background:var(--paper);color:#111;font-weight:900;will-change:transform}.tempt.running{background:var(--red);}.upload-panel p{height:20px;color:var(--muted);font-size:11px;}
.chaos-upload{position:relative}.chaos-layer{position:absolute;inset:0;display:none;place-items:center;background:#0008;z-index:5}.chaos-layer.show{display:grid}.fake-modal{width:84%;background:#f1f2e9;color:#111;border-radius:16px;padding:20px;display:grid;gap:12px;box-shadow:0 15px 50px #000}.fake-modal b{font-size:22px}.fake-modal span{font-size:12px;color:#666}.fake-modal button,.speed-trap{min-height:50px;border:0;border-radius:10px;background:var(--paper);color:#111;font-weight:900}.ad-modal{background:#ff6ed1}.ad-modal>button:first-child{position:absolute;right:10%;top:22%;width:38px;min-height:38px;background:#111;color:white}.speed-trap{padding:0 25px;background:var(--red)}

/* 13 lag */
.lag-field{width:min(100%,340px);aspect-ratio:1;margin:auto;position:relative;border:1px solid var(--line);border-radius:18px;background-image:linear-gradient(#30322c 1px,transparent 1px),linear-gradient(90deg,#30322c 1px,transparent 1px);background-size:20% 20%;}.lag-bot,.lag-goal{position:absolute;width:38px;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;transition:.2s}.lag-bot{background:var(--paper)}.lag-goal{border:3px dashed var(--red)}
.command-queue{display:flex;justify-content:space-between;padding:10px 12px;background:#20211d;border-radius:10px;font:11px monospace;margin:12px 0}.command-queue span{color:var(--muted)}.lag-pad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.lag-pad button{height:54px;background:#252720;border:1px solid var(--line);border-radius:12px;font-size:20px}

/* 14 clock */
.clock-target{text-align:center;background:var(--paper);color:#111;border-radius:14px;padding:12px;font-size:12px}.clock-target strong{font:900 25px monospace;margin-left:10px}.clock-face{width:min(75vw,290px);aspect-ratio:1;border:7px solid #e9eadf;border-radius:50%;margin:18px auto;position:relative;background:#191a17;touch-action:none}.clock-face b{position:absolute;font:12px monospace}.clock-face b:nth-of-type(1){top:7px;left:48%}.clock-face b:nth-of-type(2){right:9px;top:48%}.clock-face b:nth-of-type(3){bottom:7px;left:49%}.clock-face b:nth-of-type(4){left:9px;top:48%}.hour-hand,.minute-hand{position:absolute;left:calc(50% - 7px);bottom:50%;width:14px;transform-origin:50% 100%;background:var(--paper);height:27%;border-radius:9px;z-index:3;touch-action:none}.minute-hand{left:calc(50% - 4px);height:40%;background:var(--red);width:8px;z-index:2}.clock-pin{position:absolute;left:calc(50% - 10px);top:calc(50% - 10px);width:20px;aspect-ratio:1;border-radius:50%;background:#fff;z-index:4}.clock-readout{text-align:center;font:900 24px monospace}

/* 15 carousel */
.number-wheel{width:min(84vw,330px);aspect-ratio:1;border:1px solid var(--line);border-radius:50%;margin:auto;position:relative;transition:transform .35s cubic-bezier(.2,.8,.3,1);background:#171815}.number-wheel button{--r:130px;position:absolute;left:calc(50% - 26px);top:calc(50% - 26px);width:52px;aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:#282a23;transform:rotate(var(--a)) translateY(calc(var(--r) * -1));}.number-wheel button span{display:grid;place-items:center;width:100%;height:100%;transition:transform .35s;font-weight:900}.number-wheel button.hit{background:var(--paper);color:#111}
.number-wheel2 button{transition:opacity .16s,transform .28s}.number-wheel2::after{content:"SHUFFLE";position:absolute;left:0;right:0;top:48%;text-align:center;color:#55584d;font:10px monospace;letter-spacing:.2em}

/* realistic network interruption for 请勿操作 3 */
.network-error-page{min-height:100vh;background:#fff;color:#202124;padding:18vh 34px 40px;font-family:Arial,"Microsoft YaHei",sans-serif}.network-error-page h1{font-size:22px;font-weight:500;margin:24px 0 12px}.network-error-page p{max-width:360px;color:#5f6368;font-size:14px;line-height:1.65}.network-error-page small{display:block;margin-top:26px;color:#777;font:12px monospace}.network-refresh{margin-top:22px;padding:9px 22px;border:0;border-radius:4px;background:#1a73e8;color:#fff;font-size:14px}.network-spinner{width:32px;height:32px;border:3px solid #dadce0;border-top-color:#5f6368;border-radius:50%;animation:network-spin 1s linear infinite}@keyframes network-spin{to{transform:rotate(360deg)}}

/* 16 odometer */
.odometer-target{text-align:center;color:var(--muted);margin:20px}.odometer-target strong{display:block;font:900 43px monospace;color:var(--paper);letter-spacing:.25em}.odometer{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:auto 0}.odometer button{height:150px;border:1px solid #55584d;background:linear-gradient(#1b1c18,#34362e,#1b1c18);border-radius:17px;font:900 56px monospace;color:var(--paper)}.coupling-map{text-align:center;color:var(--muted);font:10px/1.7 monospace;margin:20px 0}

/* 17 memory */
.memory-board{width:min(100%,330px);aspect-ratio:1;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.memory-board button{border:1px solid var(--line);background:#22241e;border-radius:17px;color:#5d6056;font:900 21px monospace}.memory-board button.flash,.memory-board button.pressed{background:var(--paper);color:#111;box-shadow:0 0 24px #f2ff5a66}.memory-start:disabled{opacity:.35}

/* 18 calculator */
.calc-display{background:#dfe3ce;color:#111;border-radius:16px;padding:18px;display:grid;gap:9px}.calc-display small{font:10px monospace}.calc-display strong{font:900 35px monospace}.calc-display span{text-align:right;font:900 36px monospace;border-top:1px solid #949783;padding-top:8px}.calc-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:15px}.calc-pad button{height:66px;background:#252720;border:1px solid var(--line);border-radius:14px;font-size:20px;font-weight:900}.calc-pad button:last-child{background:var(--paper);color:#111}
.calc-rules{background:var(--paper);color:#111;border-radius:14px;padding:12px;margin-bottom:12px;display:grid;gap:5px}.calc-rules b{font-size:11px}.calc-rules span{font:900 13px monospace}.calc-rules em{font-style:normal;font-size:9px;color:#555}

/* 19 swipe */
.swipe-zone{flex:1;min-height:380px;border:1px dashed #484a41;border-radius:22px;display:grid;place-items:center;align-content:center;gap:20px;touch-action:none;background:#171815}.swipe-zone strong{font-size:125px;line-height:1;color:var(--paper)}.swipe-zone span{font-size:11px;color:var(--muted)}
.swipe2-zone{flex:1;min-height:380px;position:relative;border:1px dashed #484a41;border-radius:22px;overflow:hidden;touch-action:none;background:#171815}.route-show{position:absolute;top:25px;left:0;right:0;text-align:center;color:var(--paper);font-size:45px;z-index:2}.swipe2-zone canvas{position:absolute;inset:0;width:100%;height:100%}.swipe2-zone>span{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:var(--muted);font-size:10px}

/* blind maze */
.blind-maze{width:100%;aspect-ratio:1;position:relative;background:#ecede4;border-radius:20px;overflow:hidden;touch-action:none}.blind-maze svg{width:100%;height:100%}.blind-maze path{fill:none;stroke:#222;stroke-width:15;stroke-linejoin:round;stroke-linecap:round}.maze-start,.maze-end{position:absolute;width:28px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:#111;font:900 9px monospace;z-index:3;touch-action:none}.maze-end{width:38px;right:3%;top:5%;background:var(--red)}.blind-spot{position:absolute;width:115px;aspect-ratio:1;border-radius:50%;background:#111;transform:translate(-50%,-50%);display:none;pointer-events:none;z-index:9}.blind-spot.show{display:block}

/* 22 volume */
.volume-goal{text-align:center;color:var(--muted)}.volume-goal strong{display:block;font:900 42px monospace;color:var(--paper)}.volume-meter{width:120px;height:330px;margin:auto;border:1px solid var(--line);border-radius:18px;position:relative;overflow:hidden;background:#191a17}.volume-meter i{position:absolute;bottom:0;width:100%;height:10%;background:var(--paper);transition:height .08s}.volume-meter span{position:absolute;left:0;right:0;top:45%;text-align:center;color:#111;font:900 18px monospace;mix-blend-mode:difference;filter:invert(1)}.volume-slider input{width:100%;direction:ltr}

/* temperamental controls */
.physics-target{display:grid;grid-template-columns:72px minmax(100px,1fr) minmax(70px,92px);gap:4px}.physics-target strong{text-align:center;white-space:nowrap}.physics-target span{max-width:none;overflow-wrap:anywhere}
.physics-target{background:var(--paper);color:#111;border-radius:16px;padding:14px 18px;display:flex;justify-content:space-between;align-items:center;font-size:11px}.physics-target strong{font:900 25px monospace}.physics-target span{font-size:9px;max-width:85px;text-align:right;line-height:1.4}.thermal-track{height:7px;background:#292b25;border-radius:9px;overflow:hidden;margin:14px 0}.thermal-track i{display:block;width:0;height:100%;background:var(--paper)}.thermal-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}.thermal-controls button{height:68px;border:1px solid var(--line);border-radius:15px;background:#252720;font-weight:900}.thermal-controls button:first-child{color:var(--blue)}.thermal-controls button:last-child{color:var(--red)}.thermal-controls button:active{background:var(--paper);color:#111}
.thermo-dial{width:min(78vw,300px);aspect-ratio:1;border:8px solid #e8e9df;border-radius:50%;margin:auto;position:relative;display:grid;place-items:center;align-content:center;background:radial-gradient(circle,#24251f 0 48%,#171815 49%)}.thermo-dial::after{content:"5°　　　　　　　40°";position:absolute;bottom:22%;font:10px monospace;color:#777}.thermo-needle{position:absolute;left:calc(50% - 3px);bottom:50%;width:6px;height:38%;background:var(--red);transform-origin:bottom;border-radius:6px}.thermo-dial strong{font:900 42px monospace;z-index:2}.thermo-dial span{font:10px monospace;color:var(--muted);z-index:2}
.jealous-rule{background:#2a2118;border:1px solid #80662a;color:#eee7cd;border-radius:13px;padding:11px;margin-bottom:10px}.jealous-rule b{display:block;color:var(--paper);font-size:11px}.jealous-rule span{font-size:10px;line-height:1.45}.jealous-scale{flex:1;min-height:270px;display:grid;grid-template-columns:1fr 1fr;gap:25%;align-items:end;position:relative;padding:0 8% 40px}.jealous-scale>div{display:flex;align-items:end;justify-content:center;gap:8px;z-index:2}.jealous-scale>div i{display:block;width:55px;height:32px;background:var(--paper);border-radius:8px 8px 2px 2px;transition:height .15s}.jealous-scale>div strong{font:900 20px monospace}.scale-beam{position:absolute;left:7%;right:7%;bottom:25px;height:8px;background:#e9eadf;transform-origin:center;transition:transform .18s}.scale-beam::after{content:"";position:absolute;left:calc(50% - 14px);top:8px;border-left:14px solid transparent;border-right:14px solid transparent;border-bottom:50px solid #64665c}.jealous-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.jealous-controls label{background:#20211d;border-radius:12px;padding:10px;color:var(--muted);font:10px monospace}.jealous-controls input{width:100%;margin-top:9px}
.brightness-orb{width:min(76vw,290px);aspect-ratio:1;border-radius:50%;margin:auto;display:grid;place-items:center;align-content:center;position:relative;background:#070806;overflow:hidden}.brightness-orb i{position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:white;box-shadow:0 0 70px 20px #fff;opacity:.2}.brightness-orb strong{z-index:2;color:#111;font:900 42px monospace}.brightness-orb span{z-index:2;color:#111;font:10px monospace}.brightness-input{width:100%}
.pressure-gauge{width:150px;height:350px;margin:auto;border:7px solid #e7e8de;border-radius:75px;position:relative;overflow:hidden;background:#191a17;display:grid;place-items:center;align-content:center}.pressure-fill{position:absolute;bottom:0;width:100%;height:18%;background:var(--blue);transition:height .08s}.pressure-gauge strong{z-index:3;font:900 46px monospace}.pressure-gauge span{z-index:3;font:10px monospace}.pressure-gauge .safe-band{position:absolute;bottom:56%;height:8%;width:100%;background:#f2ff5a88;border-top:1px dashed var(--paper);border-bottom:1px dashed var(--paper);z-index:2}

/* 23 survey */
.survey-rule{background:var(--paper);color:#111;border-radius:14px;padding:13px;margin-bottom:14px}.survey-rule b{display:block;font-size:11px}.survey-rule span{font-size:13px}.survey-card{height:240px;min-height:0;border:1px solid var(--line);border-radius:20px;background:#191a17;padding:25px;display:flex;flex-direction:column;justify-content:space-between}.survey-card2{height:260px}.survey-card span{color:var(--paper);font:11px monospace}.survey-card strong{font-size:33px;line-height:1.25}.survey-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.survey-buttons button{height:70px;border:1px solid var(--line);border-radius:15px;background:#252720;font-size:20px;font-weight:900}.survey-buttons button:first-child{background:var(--paper);color:#111}
.compact-survey{height:200px;justify-content:center}

/* 24 shadow */
.shadow-stage{flex:1;min-height:430px;border:1px dashed var(--line);border-radius:20px;position:relative;overflow:hidden;background:#d9dace}.shadow-real{position:absolute;width:120px;height:52px;border-radius:13px;border:0;background:var(--paper);color:#111;font-weight:900;z-index:2}.light-source{position:absolute;transform:translate(-50%,-50%);font-style:normal;font-size:38px;filter:drop-shadow(0 0 15px #fff000);z-index:3}.shadow-options{position:absolute;inset:0}.shadow-choice{position:absolute;width:108px;height:46px;border:0;border-radius:12px;background:#31332966;filter:blur(3px)}

/* 25 captcha */
.human-start,.human-end{z-index:4!important;pointer-events:none}
/* 40-50 new tests */
.code-target,.color-target{background:var(--paper);color:#111;border-radius:15px;padding:13px 16px;display:flex;justify-content:space-between;align-items:center}.code-target span,.color-target span{font-size:11px;font-weight:800}.code-target strong,.color-target strong{font:900 28px monospace}.complement-read,.calendar-read{margin:18px 0;text-align:center;background:#1d1f1a;border:1px solid var(--line);border-radius:16px;padding:22px;font:900 34px monospace;color:var(--paper)}.input-direction{display:flex;align-items:center;gap:8px;background:#24261f;border-radius:11px;padding:10px 12px;margin-top:10px;color:var(--muted);font-size:10px}.input-direction b{color:var(--paper);font:900 16px monospace}.input-direction span{margin-left:auto}.digit-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.digit-pad button,.symbol-pad button{height:62px;border:1px solid var(--line);border-radius:13px;background:#252720;font:900 22px monospace}.expire-sequence{text-align:center;padding:14px;color:var(--paper);font:900 17px monospace}.expire-board{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:auto 0}.expire-board button{height:100px;border:1px solid var(--line);border-radius:17px;background:#252720;font-size:35px;font-weight:1000}.color-cue{display:grid;place-items:center;gap:2px;margin:2px 0 10px}.color-cue span{color:var(--muted);font-size:9px}.color-cue i{color:var(--paper);font-size:26px;font-style:normal;line-height:1}.color-cue strong{font-size:25px}.reverse-display{min-height:180px;border:1px solid var(--line);border-radius:20px;display:grid;place-items:center;margin-bottom:14px;background:#171815;color:var(--paper);font:900 29px monospace}.symbol-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}.watch-code:disabled{opacity:.35}.carry-counter{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:auto 0}.carry-counter button{height:150px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(#1b1c18,#35372f,#1b1c18);color:var(--paper);font:900 52px monospace}.carry-counter small{display:block;color:var(--muted);font:9px sans-serif}.brake-track{height:130px;position:relative;margin:auto 0;border:1px solid var(--line);border-radius:17px;background:repeating-linear-gradient(90deg,#181916 0 9%,#22241e 9% 10%);overflow:hidden}.brake-track span{position:absolute;left:70%;width:12%;height:100%;background:#f2ff5a2c;border-left:2px dashed var(--paper);border-right:2px dashed var(--paper)}.brake-car{position:absolute;left:3%;top:42px;width:45px;height:28px;border-radius:9px 9px 4px 4px;background:var(--red);transform:translateX(-50%)}.brake-car::before,.brake-car::after{content:"";position:absolute;bottom:-7px;width:13px;aspect-ratio:1;border-radius:50%;background:#050505}.brake-car::before{left:5px}.brake-car::after{right:5px}.brake-button{height:82px}.blind-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:auto 0}.blind-keypad button{height:62px;background:#252720;border:1px solid var(--line);border-radius:14px;font:900 24px monospace}.blind-keypad button:last-child{grid-column:2}.blind-keypad.blind span{visibility:hidden}.blind-keypad.blind button{background:#151613}.calendar-read{font-size:44px;margin:auto 0}.calendar-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:18px 0}.calendar-controls button{height:70px;border:1px solid var(--line);border-radius:14px;background:#252720;font-weight:900}.color-preview{height:160px;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0}.color-preview i{border-radius:16px;border:1px solid var(--line)}.color-preview i::after{display:block;text-align:center;padding-top:8px;color:#fff;font:9px monospace;mix-blend-mode:difference}.color-preview i:first-child::after{content:"目标"}.color-preview i:last-child::after{content:"当前"}.cross-color-controls{display:grid;gap:10px}.cross-color-controls label{font-size:10px;color:var(--muted);display:grid;grid-template-columns:1fr auto}.cross-color-controls label b{color:var(--paper);font:900 11px monospace}.cross-color-controls input{width:100%;margin-top:5px;grid-column:1/-1}.moving-field{width:100%;aspect-ratio:1;margin:auto;position:relative;border:1px solid var(--line);border-radius:20px;background-image:linear-gradient(#30322c 1px,transparent 1px),linear-gradient(90deg,#30322c 1px,transparent 1px);background-size:10% 10%;touch-action:none;overflow:hidden}.moving-obstacles{position:absolute;inset:0}.moving-wall,.moving-door{position:absolute;background:repeating-linear-gradient(45deg,#ff5a52,#ff5a52 6px,#6d221e 6px,#6d221e 12px);border:1px solid #ff8a84;z-index:2}.moving-door{transition:opacity .18s}.moving-door.open{opacity:.15}.moving-plate{position:absolute;width:40px;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center;background:#6d7426;color:#111;font:900 9px monospace;z-index:2}.moving-plate.active{background:var(--paper);box-shadow:0 0 20px #f2ff5a88}.moving-token,.moving-target{position:absolute;left:12%;top:85%;width:45px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;transform:translate(-50%,-50%);font-style:normal;font-weight:900;color:#111;touch-action:none}.moving-token{background:var(--paper);z-index:4}.moving-target{background:var(--red);z-index:3;transition:left .18s,top .18s,transform .12s}.moving-target.caught{transform:translate(-50%,-50%) scale(1.45)}

.color-target{display:grid;grid-template-columns:58px minmax(0,1fr);gap:7px;width:100%;max-width:100%;overflow:hidden}.rgb-target{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;width:100%;min-width:0;overflow:hidden}.rgb-target b{display:block;min-width:0;max-width:100%;overflow:hidden;font:900 17px monospace;text-align:center;color:#111}.rgb-target small{display:block;max-width:100%;overflow:hidden;font:900 9px sans-serif;margin-bottom:2px;white-space:nowrap}.rgb-target .red small{color:#c62923}.rgb-target .green small{color:#278c3e}.rgb-target .blue small{color:#2468c9}.color-preview{grid-template-columns:repeat(2,minmax(0,1fr))}.cross-color-controls,.cross-color-controls label,.cross-color-controls input{min-width:0;max-width:100%}

.complete { text-align:center; justify-content:center; align-items:center; }
.seal { width:150px;aspect-ratio:1;border-radius:50%;border:3px solid var(--paper);display:grid;place-items:center;transform:rotate(-8deg);margin:25px auto;color:var(--paper);font-weight:1000;font-size:22px;box-shadow:inset 0 0 0 7px #111,inset 0 0 0 9px var(--paper); }
.complete h1 { font-size:45px; }.complete .lead { margin:18px auto 35px; }

@media (max-height: 700px) {
  .screen { padding-top:12px;padding-bottom:12px; }
  .brief { padding:14px 0 10px; }.brief h2{font-size:23px}.brief p{margin-top:4px}
  .remote-grid { max-width:270px; }
  .remote-pad { grid-template-rows:repeat(3,54px); }
  .level-card { min-height:110px; }
  .stroop-card{min-height:160px}.stroop-card strong{font-size:46px}.color-choices button{height:60px}
  .number-wheel button{--r:105px}.number-wheel{max-width:270px}
  .swipe-zone{min-height:300px}.swipe-zone strong{font-size:95px}
  .shadow-stage{min-height:340px}.volume-meter{height:260px}
  .thermo-dial,.brightness-orb{max-width:250px}.jealous-scale{min-height:240px}.pressure-gauge{height:260px}
}