/* 第 9 关：仿票务站 + 九宫格验证码 + 连点，作用域 .tk */
.tk{position:absolute;inset:0;overflow:hidden;background:#f2f4f8;color:#1c1c30;user-select:none;touch-action:manipulation}
.tk-page{position:absolute;inset:0;display:flex;flex-direction:column}
.tk-bar{height:52px;background:#0b2a6b;color:#fff;display:flex;align-items:center;gap:8px;padding:0 16px;font-size:20px;letter-spacing:-.02em}
.tk-bar b{font-weight:900}
.tk-bar span{font-size:11px;background:#ff4f7b;padding:2px 6px;border-radius:4px;font-weight:800}
.tk-hero{position:relative;height:176px;background:linear-gradient(135deg,#1d2b64,#f857a6);color:#fff;padding:18px 16px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.tk-hero-art{position:absolute;inset:0}
.tk-hero-art .art{width:100%;height:100%}
.tk-hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,rgba(10,10,40,.8))}
.tk-hero-title,.tk-hero-sub,.tk-hero-tag{position:relative;z-index:1}
.tk-hero-tag{position:absolute;right:14px;top:14px;background:#ffd166;color:#1c1c30;font-size:10px;font-weight:900;padding:2px 8px;border-radius:4px}
.tk-hero-title{font-size:24px;font-weight:900;line-height:1.1;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.tk-hero-sub{font-size:13px;margin-top:6px;opacity:.95;line-height:1.35}
.tk-queue{margin:12px 16px 0;background:#fff3cd;border:1px solid #ffe08a;color:#7a5a00;padding:8px 10px;border-radius:8px;font-size:12px}
.tk-prices{display:flex;gap:8px;margin:12px 16px 0}
.tk-prices div{flex:1;background:#fff;border:1px solid #d9dde6;border-radius:10px;padding:8px;text-align:center;font-size:11px;color:#555}
.tk-prices b{display:block;font-size:14px;color:#1c1c30;margin-top:2px}
.tk-buy{margin:18px 16px 0;height:52px;border:0;border-radius:10px;background:#026cdf;color:#fff;font-size:18px;font-weight:900;box-shadow:0 6px 0 #024ea3;cursor:pointer}
.tk-buy:active{transform:translateY(4px);box-shadow:0 2px 0 #024ea3}
.tk-foot{margin-top:auto;padding:0 0 52px;text-align:center;font-size:11px;color:#999}

/* 验证码 */
.tk-cap{position:absolute;left:14px;right:14px;top:60px;background:#fff;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.25);overflow:hidden}
.tk-cap-head{background:#1a73e8;color:#fff;padding:12px 14px}
.tk-cap-head small{display:block;font-size:11px;opacity:.9}
.tk-cap-head b{display:block;font-size:20px;margin-top:2px}
.tk-cap-head em{display:block;font-style:normal;font-size:11px;opacity:.9;margin-top:2px}
.tk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:6px}
.tk-grid.shake{animation:tkshake .3s}
@keyframes tkshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.tk-tile{aspect-ratio:1;background:#f2f4f8;border:2px solid #e0e4ec;border-radius:6px;display:flex;align-items:center;justify-content:center;padding:8px;cursor:pointer;position:relative}
.tk-tile .art{width:100%;height:100%}
.tk-tile.sel{border-color:#1a73e8;background:#e8f0fe}
.tk-tile.sel::after{content:'✓';position:absolute;right:4px;top:2px;color:#fff;background:#1a73e8;border-radius:50%;width:18px;height:18px;font-size:12px;line-height:18px;text-align:center}
.tk-tile.good{border-color:#2ec27e;background:#e6f9ee}
.tk-tile.wrong{border-color:#e5383b;background:#fdeaea;opacity:.5}
.tk-num{width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:30px;font-weight:900;color:#fff;background:radial-gradient(circle at 35% 30%,#ff8fb1,#c2185b);box-shadow:inset 0 -6px 0 rgba(0,0,0,.2);text-shadow:0 2px 0 rgba(0,0,0,.3)}
.tk-cap-foot{display:flex;align-items:center;gap:10px;padding:8px 12px 12px;min-height:44px}
.tk-verify{border:0;background:#1a73e8;color:#fff;font-weight:900;padding:8px 18px;border-radius:6px;font-size:14px;cursor:pointer}
.tk-cap-msg{font-size:12px;color:#e5383b;font-weight:700}

/* 连点 */
.tk-qte{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 20px 40px;background:#0b2a6b;color:#fff}
.tk-qte-title{font-size:24px;font-weight:900}
.tk-race{width:100%;display:flex;flex-direction:column;gap:10px}
.tk-lane{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800}
.tk-lane span{width:64px;text-align:right}
.tk-track{flex:1;height:24px;background:rgba(255,255,255,.15);border-radius:12px;overflow:hidden;position:relative;border:2px solid rgba(255,255,255,.4)}
.tk-track i{display:block;height:100%;background:#ff4f7b;transform-origin:left;transform:scaleX(0)}
.tk-lane.me .tk-track i{background:#2ec27e}
.tk-track b{position:absolute;right:8px;top:0;line-height:20px;font-size:11px}
.tk-mash{width:200px;height:80px;border:4px solid #1c1c30;border-radius:20px;background:#ff4f7b;color:#fff;font-size:32px;font-weight:900;box-shadow:6px 6px 0 #1c1c30;cursor:pointer}
.tk-mash.hit{transform:scale(.94)}
.tk-qte-tip{font-size:12px;opacity:.85}

/* 通关 */
.tk-win{position:absolute;inset:0;background:rgba(11,42,107,.85);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:70px;gap:6px;color:#fff;z-index:5}
.tk-win-ticket{width:170px;height:170px;animation:tkwin .5s cubic-bezier(.2,1.6,.4,1) both;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))}
@keyframes tkwin{from{transform:scale(.2) rotate(-30deg);opacity:0}to{transform:rotate(-6deg);opacity:1}}
.tk-win b{font-size:26px;font-weight:900}
.tk-win span{font-size:12px;opacity:.9}