#board { display: grid; grid-template-columns: repeat(4, 60px); grid-template-rows: repeat(4, 60px); gap: 4px; justify-content: center; margin: 15px auto; }
.cell { width: 60px; height: 60px; background: #ddd; border: 1px solid #999; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold; cursor: pointer; user-select: none; }
.cell.selected { border: 2px solid orange; background: #fff3cd; }
.red { color: red; }
.blue { color: blue; }
 #info { margin: 10px; font-size: 16px; font-weight: bold; }
 #log { width: 260px; height: 100px; margin: 10px auto; overflow-y: auto; background: #fff; border: 1px solid #ccc; font-size: 12px; text-align: left; padding: 5px; }
    
:root{color-scheme:light;--text:#172b46;--muted:#6c7e99}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;overscroll-behavior:none}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;background:#071020;color:var(--text);-webkit-text-size-adjust:100%}
.intro{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px 14px;background:radial-gradient(ellipse at 50% 25%,#e7f0ff,#f4f7fc 65%);z-index:1}
.verify-panel{width:100%;max-width:442px;padding:28px 22px 25px;background:#fff;border:1px solid #e5ecf8;border-radius:23px;text-align:center;box-shadow:0 18px 55px rgba(35,74,133,.12)}
.shield{width:60px;height:60px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:#2f6ce8;background:#ecf3ff}
.shield svg{width:37px;height:37px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.23em;color:#829cc9;margin-bottom:12px}
h1{font-size:24px;margin:0;font-weight:760;letter-spacing:.02em}.lead{margin:12px 0 4px;color:var(--muted);font-size:14px;line-height:1.6}
.progress-wrap{position:relative;width:240px;height:240px;max-width:100%;margin:0 auto;display:flex;align-items:center;justify-content:center;pointer-events:none}
#progressCanvas{width:235px;height:235px;display:block;max-width:100%;pointer-events:none}
.status{margin:0;min-height:24px;color:#2c69d9;font-size:14px;font-weight:650}
.hint{margin:15px 0 0;padding:11px;background:#f4f7fb;border:1px solid #edf2fa;border-radius:12px;color:#8291a9;font-size:12px}
#appCanvas{position:fixed;left:50%;top:0;transform:translateX(-50%);width:100%;max-width:480px;height:100vh;height:100dvh;z-index:99999;display:block;background:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;pointer-events:none;outline:none}
#appCanvas.active{pointer-events:auto;cursor:pointer}
#appCanvas:focus-visible{outline:2px solid #e4ba5e;outline-offset:-3px}
.activation-mask{position:fixed;inset:0;background:rgba(0,0,0,.64);z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px}
.activation-panel{position:relative;width:100%;max-width:480px;max-height:92dvh;overflow-y:auto;background:#fff;border-radius:18px;padding:18px 14px 16px;box-shadow:0 22px 56px rgba(0,0,0,.28)}
.activation-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;border-radius:50%;background:#eef2f8;color:#445268;font-size:24px;line-height:1;cursor:pointer}
.activation-panel h2{margin:4px 0 10px;font-size:22px;text-align:center;color:#17253e}
.activation-tip{margin:0 0 10px;color:#6b7688;font-size:13px;line-height:1.6;text-align:center}
.activation-textarea{display:block;width:100%;resize:vertical;min-height:150px;padding:12px;border:1px solid #ccd4df;border-radius:10px;background:#fff;font:13px/1.5 Consolas,monospace;color:#263445;overflow-wrap:anywhere;outline:none}
.activation-textarea:focus{border-color:#587dbb;box-shadow:0 0 0 2px #587dbb20}
.activation-textarea.output{min-height:110px;resize:none}
.activation-row{display:flex;gap:10px;margin-top:12px}.activation-row.one .activation-btn{flex:1}
.activation-btn{border:0;border-radius:9px;min-height:42px;padding:9px 15px;font-size:14px;font-weight:700;cursor:pointer}
.activation-btn:disabled{cursor:wait;opacity:.6}
.activation-btn.primary{background:#285fae;color:#fff;flex:1}
.activation-btn.secondary{background:#e4e9f1;color:#37455b}
.activation-output{margin-top:16px}.activation-label{font-size:14px;font-weight:700;margin-bottom:8px;color:#192842}
.activation-status{min-height:20px;margin-top:13px;font-size:13px;color:#21623d;text-align:center}.activation-status.error{color:#b33131}
.activation-foot{font-size:12px;color:#798394;line-height:1.5;margin-top:10px;text-align:center}
@media(max-height:600px){.verify-panel{padding:12px 18px}.progress-wrap{width:150px;height:150px}#progressCanvas{width:150px;height:150px}.activation-panel{padding-top:14px;padding-bottom:12px}.activation-panel h2{font-size:19px}.activation-textarea{min-height:120px}}
.external-mask{position:fixed;inset:0;z-index:100100;background:rgba(1,8,22,.76);display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.external-panel{max-width:450px;width:100%;max-height:calc(100dvh - 30px);overflow:auto;border-radius:18px;padding:26px 20px 22px;background:#fff;color:#1b2d45;box-shadow:0 25px 60px rgba(0,0,0,.4);text-align:center}
.external-icon{width:48px;height:48px;line-height:48px;background:#eff5ff;border-radius:50%;font-weight:800;font-size:26px;color:#2868cb;margin:0 auto 10px}
.external-panel h2{margin:0 0 9px;font-size:21px}
.external-panel h3{margin:0 0 15px;font-size:15px;color:#34475f}
.external-panel p{font-size:14px;line-height:1.8;color:#526175;margin:0 0 12px}
.external-host{word-break:break-all;font-weight:600;color:#2164ab!important}
.external-agreement{display:block;font-size:12px;color:#7c8797;line-height:1.6;margin:10px 0 20px}
.external-actions{display:flex;gap:12px}
.external-actions button,.external-actions a{flex:1;border:0;border-radius:10px;min-height:43px;padding:12px 8px;font-weight:700;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none}
.external-actions button{background:#e7edf4;color:#35455b}
.external-actions a{background:#2a65ba;color:white}
#progressCanvas{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;cursor:pointer}
#progressCanvas:focus-visible{outline:2px solid #3974ef;border-radius:50%}
.press-hint{position:absolute;left:calc(50% + 17px);top:calc(50% + 24px);width:70px;height:93px;z-index:2;pointer-events:none;transform-origin:50% 25%;animation:hintPress 1.55s ease-in-out infinite;filter:drop-shadow(1px 3px 3px rgba(32,75,136,.26))}
.press-finger{position:absolute;left:27px;top:2px;width:20px;height:53px;border:2px solid #c47d47;border-radius:13px 13px 9px 9px;background:linear-gradient(90deg,#f3b87d,#ffe0aa 50%,#e8a16e);transform:rotate(-11deg);z-index:2}
.press-palm{position:absolute;left:14px;top:36px;width:49px;height:43px;border:2px solid #c47d47;border-radius:15px 19px 18px 22px;background:linear-gradient(135deg,#ffe6b1,#efae75);transform:rotate(-11deg);z-index:1}
.press-palm::after{content:"";position:absolute;left:-9px;top:8px;width:20px;height:27px;border:2px solid #c47d47;border-radius:13px;background:#f8c68d;transform:rotate(-26deg)}
.press-ring{position:absolute;left:20px;top:-2px;width:35px;height:35px;border:2px solid rgba(46,112,227,.62);border-radius:50%;animation:hintRipple 1.55s ease-out infinite;z-index:0}
.progress-wrap.is-pressing .press-hint,.progress-wrap.is-loading .press-hint{display:none}
@keyframes hintPress{0%,100%{transform:translate(6px,11px) scale(1);opacity:.82}42%,59%{transform:translate(-6px,-7px) scale(.93);opacity:1}78%{transform:translate(2px,5px) scale(.98);opacity:.9}}
@keyframes hintRipple{0%,35%{transform:scale(.55);opacity:0}45%{opacity:.8}85%,100%{transform:scale(1.8);opacity:0}}
@media(prefers-reduced-motion:reduce){.press-hint,.press-ring{animation:none!important}}
.poster-loading{position:fixed;z-index:100000;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(420px,calc(100vw - 32px));display:flex;align-items:center;gap:13px;padding:13px 17px;border-radius:15px;background:rgba(8,23,43,.94);color:#fff;border:1px solid rgba(180,214,255,.28);box-shadow:0 12px 32px rgba(0,0,0,.38);pointer-events:none;backdrop-filter:blur(7px)}
.poster-spinner{width:27px;height:27px;flex:0 0 27px;border:3px solid rgba(192,219,255,.27);border-top-color:#7bceff;border-radius:50%;animation:posterSpin .85s linear infinite}
.poster-load-main{flex:1;min-width:0}
.poster-load-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;font-size:13px;font-weight:650}
.poster-load-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poster-load-percent{font-variant-numeric:tabular-nums;color:#b7dbff}
.poster-load-track{height:5px;border-radius:100px;background:rgba(255,255,255,.22);overflow:hidden}
.poster-load-bar{height:100%;width:0;background:linear-gradient(90deg,#499cff,#8de0ff);border-radius:100px;transition:width .16s ease-out}
.poster-loading.indeterminate .poster-load-bar{width:38%!important;animation:posterSlide 1.25s ease-in-out infinite}
@keyframes posterSpin{to{transform:rotate(360deg)}}
@keyframes posterSlide{0%{transform:translateX(-115%)}100%{transform:translateX(300%)}}
@media(prefers-reduced-motion:reduce){.poster-spinner,.poster-loading.indeterminate .poster-load-bar{animation:none}}