body[data-theme="forest"]{--p:#2c7a4a;--p2:#4d9e68;--bg:linear-gradient(160deg,#eef8f1,#cfe8d8);--panel:rgba(255,255,255,.94);--panel2:rgba(255,255,255,.7);--border:#a8d0b8;--t1:#0f2818;--t2:#2f5240;--t3:#6b8a76;--accent:#1f7a4a;--accent-contrast:#fff;--chip:linear-gradient(180deg,#4d9e68,#267a48);--shadow:0 8px 24px rgba(20,60,35,.15);--ok:#128a4c;--bad:#c9342c;--cbg:#0b1418}
body[data-theme="dusk"]{--p:#b2541e;--p2:#d8803a;--bg:linear-gradient(160deg,#fdf1e4,#f2cd9e);--panel:rgba(255,252,247,.94);--panel2:rgba(255,250,243,.72);--border:#dfb689;--t1:#3a1f0a;--t2:#653e20;--t3:#9a7a5e;--accent:#a84d10;--accent-contrast:#fff;--chip:linear-gradient(180deg,#d8803a,#a84d10);--shadow:0 8px 24px rgba(90,45,10,.16);--ok:#128a4c;--bad:#c9342c;--cbg:#140c08}
body[data-theme="frost"]{--p:#235f88;--p2:#3e83b2;--bg:linear-gradient(160deg,#eaf4fc,#c4dcf0);--panel:rgba(252,254,255,.94);--panel2:rgba(248,252,255,.72);--border:#a8c8e0;--t1:#08243c;--t2:#2a4d68;--t3:#6e8ea8;--accent:#1c5b88;--accent-contrast:#fff;--chip:linear-gradient(180deg,#3e83b2,#1c5b88);--shadow:0 8px 24px rgba(15,50,80,.16);--ok:#128a4c;--bad:#c9342c;--cbg:#08131c}
body[data-theme="dark"]{--p:#7fc8e0;--p2:#5a7a90;--bg:radial-gradient(1400px 620px at 50% -10%,#2a3038 0%,#161a20 50%,#08090c 100%);--panel:rgba(26,30,36,.9);--panel2:rgba(20,24,30,.68);--border:#2f353d;--t1:#eef2f6;--t2:#b8c0cc;--t3:#767e8c;--accent:#7fc8e0;--accent-contrast:#0a0d12;--chip:linear-gradient(180deg,#5a7a90,#3a5060);--shadow:0 10px 32px rgba(0,0,0,.6);--ok:#5fd28e;--bad:#e2726b;--cbg:#06080b}

*{box-sizing:border-box}html,body{margin:0;padding:0}
body{font-family:"PingFang SC","Microsoft YaHei",-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);background-attachment:fixed;color:var(--t1);min-height:100vh;transition:background .3s,color .3s;overflow-x:hidden}
button{font-family:inherit}

.tf-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 12px;background:var(--panel);border-bottom:1px solid var(--border);box-shadow:var(--shadow);position:sticky;top:0;z-index:50;backdrop-filter:blur(12px)}
.tf-logo{font-size:16px;font-weight:800;color:var(--p);white-space:nowrap;letter-spacing:.3px}
.tf-cfg{font-size:11px;color:var(--t2);background:var(--panel2);border:1px solid var(--border);border-radius:999px;padding:3px 10px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-actions{display:flex;gap:5px;flex-wrap:wrap}

.tf-btn{border:1px solid var(--border)!important;background:var(--panel2)!important;color:var(--t1)!important;border-radius:7px!important;font-size:12px!important;padding:4px 10px!important;transition:all .15s ease;white-space:nowrap;line-height:1.4;font-weight:600;cursor:pointer}
.tf-btn .glyphicon{margin-right:4px;font-size:11px;color:inherit}
.tf-btn:hover{background:var(--panel)!important;color:var(--accent)!important;border-color:var(--accent)!important;transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.1)}
.tf-btn:active{transform:translateY(0);box-shadow:0 1px 4px rgba(0,0,0,.15)}
.tf-btn:focus{outline:none;box-shadow:0 0 0 3px rgba(127,200,224,.2)}
.tf-btn-primary{background:var(--chip)!important;color:#fff!important;border-color:transparent!important;font-weight:700!important;box-shadow:0 3px 10px rgba(0,0,0,.18)!important;text-shadow:0 1px 2px rgba(0,0,0,.22)}
.tf-btn-primary:hover{background:var(--chip)!important;color:#fff!important;border-color:transparent!important;filter:brightness(1.12);box-shadow:0 5px 16px rgba(0,0,0,.3)!important;transform:translateY(-1px)}
.tf-btn-primary:active{filter:brightness(.94);box-shadow:0 2px 6px rgba(0,0,0,.25)!important;transform:translateY(0)}
.tf-btn-primary:focus{box-shadow:0 0 0 3px rgba(255,255,255,.25)!important}

.tf-main{display:flex;flex-direction:column;gap:10px;padding:10px;max-width:1440px;margin:0 auto}
.tf-canvas-wrap{position:relative;width:100%;border-radius:14px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow);background:var(--cbg);transition:height .2s}
#gameCanvas{display:block;width:100%;height:auto}
.tf-hud{position:absolute;top:0;left:0;right:0;display:flex;gap:5px;flex-wrap:wrap;padding:6px 10px;pointer-events:none;font-size:11px;color:#dfe6ec;text-shadow:0 1px 3px rgba(0,0,0,.95);background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
.tf-hud-item{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:2px 8px;white-space:nowrap;backdrop-filter:blur(4px);font-weight:500}
.tf-hud-item b{color:#ffe9a8;font-weight:800;margin-left:2px}
.tf-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.tf-overlay-box{background:rgba(10,13,18,.86);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:16px 28px;color:#eef3f7;text-align:center;font-size:14px;line-height:1.9;backdrop-filter:blur(8px);box-shadow:0 10px 40px rgba(0,0,0,.6)}
.tf-overlay.hidden{display:none}

.tf-typing{background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:10px}
.tf-target{position:relative;min-height:60px;border:2px solid var(--border);border-radius:10px;padding:10px 14px;font-size:19px;line-height:1.7;letter-spacing:1px;word-break:break-word;background:var(--panel2);transition:border-color .2s,box-shadow .2s,opacity .2s;user-select:none;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;cursor:text}
.tf-target.locked{opacity:.55;cursor:not-allowed}
.tf-target.locked::after{content:'⏳ 冷却中';position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--t3);letter-spacing:0;font-family:inherit;font-weight:500}
.tf-target.flash-ok{border-color:#2fd66a;box-shadow:0 0 0 4px rgba(47,214,106,.32),0 0 30px rgba(47,214,106,.6);animation:okFlash .5s ease}
@keyframes okFlash{0%{box-shadow:0 0 0 0 rgba(47,214,106,.7)}100%{box-shadow:0 0 0 14px rgba(47,214,106,0)}}
.tf-target.flash-error{animation:errShake .32s ease}
@keyframes errShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.tf-target-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:none;outline:none;background:transparent;font-size:16px;padding:0;margin:0;cursor:text}
.ch{position:relative;color:var(--t3);transition:color .08s}
.ch.ok{color:var(--ok);font-weight:600}
.ch.bad{color:#fff;background:var(--bad);border-radius:3px;font-weight:600}
.ch.cur::before{content:'';position:absolute;left:-1px;top:3px;bottom:3px;width:2px;background:var(--accent);animation:caretBlink 1s step-end infinite;box-shadow:0 0 6px var(--accent)}
@keyframes caretBlink{0%,100%{opacity:1}50%{opacity:0}}
.tf-progress{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px;font-size:12px;color:var(--t2)}
.tf-cd-bar{flex:1 1 120px;height:5px;border-radius:99px;background:var(--panel2);border:1px solid var(--border);overflow:hidden;min-width:70px}
.tf-cd-fill{height:100%;width:0%;background:var(--chip);transition:width .08s linear}

.tf-units{display:flex;gap:6px;margin-top:10px;flex-wrap:nowrap;overflow:hidden}
.tf-card{flex:1 1 0;min-width:0;border:1px solid var(--border);border-radius:9px;background:var(--panel2);padding:7px 4px;text-align:center;cursor:pointer;transition:all .16s;position:relative;overflow:hidden;user-select:none}
.tf-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.tf-card.selected{background:var(--chip);border-color:transparent;box-shadow:0 4px 16px rgba(0,0,0,.28)}
.tf-card.selected .tf-card-name,.tf-card.selected .tf-card-stats,.tf-card.selected .tf-card-skill,.tf-card.selected .tf-card-lock{color:#fff}
.tf-card.locked{opacity:.42;cursor:not-allowed;filter:grayscale(.7)}
.tf-card.locked:hover{transform:none;border-color:var(--border)}
.tf-card.locked::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(0,0,0,.06),rgba(0,0,0,.06) 5px,transparent 5px,transparent 10px);pointer-events:none}
.tf-card.locked::after{content:'🔒';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:22px;opacity:.9;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.tf-card.locked .tf-card-icon{opacity:0}
.tf-card.full{border:2px solid #e6a817;background:repeating-linear-gradient(45deg,rgba(230,168,23,.10),rgba(230,168,23,.10) 6px,rgba(230,168,23,.22) 6px,rgba(230,168,23,.22) 12px);animation:fullPulse 1.6s ease-in-out infinite}
@keyframes fullPulse{0%,100%{box-shadow:0 0 0 0 rgba(230,168,23,.5),inset 0 0 12px rgba(230,168,23,.15)}50%{box-shadow:0 0 0 5px rgba(230,168,23,0),inset 0 0 20px rgba(230,168,23,.3)}}
.tf-card.full::after{content:'🈵 已满';position:absolute;top:2px;right:2px;font-size:9px;background:linear-gradient(180deg,#e6a817,#a87808);color:#fff;padding:2px 6px;border-radius:5px;font-weight:800;letter-spacing:.3px;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.tf-card.full .tf-card-icon{filter:grayscale(.5) brightness(.85)}
.tf-card.full .tf-card-name{color:#8a5e00}
.tf-card.selected.full{background:linear-gradient(180deg,#c98e0a,#8a5e00)}
.tf-card.selected.full .tf-card-name{color:#fff}
.tf-card-icon{font-size:19px;line-height:1.15}
.tf-card-name{font-size:11px;font-weight:700;margin-top:1px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-card-stats{font-size:9px;color:var(--t2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-card-skill{font-size:9px;color:var(--t3);margin-top:1px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-card-lock{font-size:9px;color:var(--t3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-units.layout-medium .tf-card-skill{display:none}
.tf-units.layout-compact .tf-card-skill,.tf-units.layout-compact .tf-card-stats{display:none}
.tf-units.layout-icon-only .tf-card-skill,.tf-units.layout-icon-only .tf-card-stats,.tf-units.layout-icon-only .tf-card-name,.tf-units.layout-icon-only .tf-card-lock{display:none}
.tf-units.layout-icon-only .tf-card-icon{font-size:22px;padding:4px 0}
.tf-units.layout-icon-only .tf-card{padding:6px 2px}

.tf-footer{max-width:1440px;margin:0 auto;padding:4px 12px 30px}
.tf-footer-toggle{width:100%;border:1.5px solid var(--border)!important;background:var(--panel2)!important;color:var(--t2)!important;border-radius:10px!important;font-size:12px!important;padding:8px 12px!important;transition:all .2s ease;font-weight:600;letter-spacing:.3px;cursor:pointer;line-height:1.4}
.tf-footer-toggle .glyphicon{margin-right:6px;font-size:11px}
.tf-footer-toggle:hover{background:var(--panel)!important;color:var(--accent)!important;border-color:var(--accent)!important;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.tf-footer-toggle.active{background:var(--chip)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.tf-footer-toggle:focus{outline:none;box-shadow:0 0 0 3px rgba(127,200,224,.2)}

.tf-intro{display:none;margin-top:8px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px;font-size:13px;line-height:1.85;color:var(--t2);animation:introFade .25s ease}
@keyframes introFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.tf-intro.show{display:block}
.tf-intro b{color:var(--t1)}

.modal-content{background:var(--panel)!important;border:1px solid var(--border)!important;border-radius:14px!important;color:var(--t1)!important;box-shadow:0 20px 60px rgba(0,0,0,.5)!important}
body[data-theme="dark"] .modal-content{backdrop-filter:blur(16px)}
.modal-header{border-bottom:1px solid var(--border)!important;padding:12px 18px!important;border-radius:14px 14px 0 0!important}
.modal-title{font-size:15px!important;font-weight:800!important;color:var(--t1)!important}
.modal-title .glyphicon{margin-right:6px;color:var(--accent)}
.modal-body{padding:18px 18px!important;font-size:13px;line-height:1.8;color:var(--t2)}
.modal-footer{border-top:1px solid var(--border)!important;padding:10px 18px!important;border-radius:0 0 14px 14px!important}
.close{color:var(--t2)!important;opacity:.7!important}
.close:hover{opacity:1!important}
.tf-set-group{margin-bottom:18px}
.tf-set-group:last-child{margin-bottom:0}
.tf-set-label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800;color:var(--t3);letter-spacing:.5px;margin-bottom:9px;text-transform:uppercase}
.tf-set-label .glyphicon{font-size:13px;color:var(--accent);background:var(--panel2);border:1px solid var(--border);border-radius:8px;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center}
.tf-set-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:7px}
.tf-opt{border:1px solid var(--border);background:var(--panel2);color:var(--t2);border-radius:9px;padding:9px 8px;font-size:12px;cursor:pointer;transition:all .15s;text-align:center;line-height:1.3;font-weight:500}
.tf-opt:hover{border-color:var(--accent);color:var(--t1);transform:translateY(-1px)}
.tf-opt.active{background:var(--chip);color:#fff;border-color:transparent;font-weight:700;box-shadow:0 3px 12px rgba(0,0,0,.2)}
body[data-theme="dark"] .tf-opt.active{color:#eef3f6}
.tf-opt small{display:block;font-size:10px;opacity:.75;margin-top:2px;font-weight:400}
.tf-rule-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:12px}
.tf-rule-table th,.tf-rule-table td{border:1px solid var(--border);padding:6px 8px;text-align:left}
.tf-rule-table th{background:var(--panel2);color:var(--t1);font-weight:700}

.tf-report-banner{text-align:center;font-size:26px;font-weight:900;padding:8px 0 4px;letter-spacing:2px}
.tf-report-banner.win{color:#2fd66a;text-shadow:0 0 24px rgba(47,214,106,.6)}
.tf-report-banner.lose{color:#e2726b;text-shadow:0 0 24px rgba(226,114,107,.6)}
.tf-report-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.tf-report-grid .tf-stat{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;display:flex;align-items:center;gap:10px}
.tf-report-grid .tf-stat .ico{flex:0 0 32px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--panel);border:1px solid var(--border);color:var(--accent);font-size:15px}
.tf-report-grid .tf-stat .txt{flex:1 1 auto;min-width:0}
.tf-report-grid .k{font-size:10px;color:var(--t3);line-height:1.2}
.tf-report-grid .v{font-size:15px;font-weight:800;color:var(--t1);line-height:1.3;margin-top:1px}
.tf-report-grid .v small{font-size:10px;font-weight:500;color:var(--t3);margin-left:1px}
.tf-advice{margin-top:12px;padding:10px 12px;background:var(--panel2);border-left:3px solid var(--accent);border-radius:6px;font-size:12px;line-height:1.8}
.tf-advice .glyphicon{color:var(--accent);margin-right:4px}

@media(max-width:640px){.tf-hud-item.optional{display:none}}
@media(max-width:560px){
    .tf-logo{font-size:14px}
    .tf-cfg{display:none}
    .tf-target{font-size:15px;padding:8px 10px;min-height:52px}
    .tf-main{padding:6px;gap:6px}
    .tf-btn{padding:3px 8px!important;font-size:11px!important}
    .tf-btn .glyphicon{margin-right:2px}
    .tf-card-icon{font-size:17px}
    .tf-report-grid{grid-template-columns:1fr}
}