.tl-wrap{max-width:1000px;margin:0 auto}
.pick{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 18px}
.pick button,.btn{font:700 12px var(--body);letter-spacing:.14em;text-transform:uppercase;padding:11px 14px;border:1px solid #2a3768;background:#0b1430;color:var(--text);cursor:pointer;min-height:44px}
.pick button[aria-pressed=true],.btn.on{border-color:var(--gold);color:#000;background:var(--gold)}
.btn{border-color:var(--gold);color:var(--gold2);background:transparent}.btn:hover{background:var(--gold);color:#000}
.bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin:12px 0}
.flag{display:inline-block;font:700 10px var(--body);letter-spacing:.12em;text-transform:uppercase;padding:2px 6px;border:1px solid;margin-left:6px;vertical-align:middle}
.flag.fc{color:var(--ice);border-color:var(--ice)}.flag.un{color:#ff9b9b;border-color:#ff9b9b}
.banner{max-width:1000px;margin:0 auto 14px;padding:10px 14px;border:1px solid #ff9b9b55;color:#ffc4c4;background:#2a0f1a;font-size:14.5px;text-align:center}
.muted{color:var(--mute);font-size:14px}
.trees{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:900px){.trees{grid-template-columns:repeat(3,1fr)}}
.tree{background:linear-gradient(180deg,#101a3dcc,#080e22ee);border:1px solid var(--line);padding:12px}
.tree h3{font:700 18px var(--disp);color:#fff;display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.tree h3 small{font:700 13px var(--body);color:var(--gold2)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;position:relative}
.tal{position:relative;aspect-ratio:1;border:2px solid #2a3768;background:#0b1430;color:var(--mute);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;font:700 11px/1.1 var(--body);text-align:center;overflow:hidden;touch-action:manipulation}
.tal span.n{padding:3px;max-height:100%;overflow:hidden}
.tal.av{border-color:#5c6ea8;color:var(--text)}.tal.some{border-color:#4fc36b;color:#fff}.tal.full{border-color:var(--gold);color:var(--gold2);box-shadow:0 0 10px #f8b70044}
.tal.lock{opacity:.45}
.tal .rk{position:absolute;right:2px;bottom:2px;background:#000c;font:700 11px var(--body);padding:1px 4px;color:inherit}
.tal .fx{position:absolute;left:3px;top:3px;width:7px;height:7px;border-radius:50%}
.tal .fx.fc{background:var(--ice)}.tal .fx.un{background:#ff9b9b;left:12px}
.tip{margin-top:12px;min-height:70px;padding:10px 12px;border:1px solid #2a3768;background:#060b1a;font-size:14.5px}
.tip b{color:#fff}
.mats-f{display:grid;gap:12px;grid-template-columns:1fr 1fr;max-width:640px;margin:0 auto}
.mats-f label{font:700 12px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);display:flex;flex-direction:column;gap:6px}
.mats-f select,.mats-f input{font:16px var(--body);padding:10px;background:#0b1430;color:#fff;border:1px solid #2a3768;min-height:44px}
.mats-f .full{grid-column:1/-1}
.mats-f .chk{flex-direction:row;align-items:center;text-transform:none;letter-spacing:0;font:15px var(--body);color:var(--text)}
.tbl{width:100%;border-collapse:collapse;font-size:15px;margin:14px 0}
.tbl th,.tbl td{padding:8px;border-bottom:1px solid #2a3768;text-align:left;vertical-align:top}
.tbl th{color:var(--gold);font:700 12px var(--body);letter-spacing:.16em;text-transform:uppercase}
.tbl td.q{text-align:right;color:#fff;font-weight:700;white-space:nowrap}
.panel{max-width:760px;margin:18px auto;padding:18px;background:linear-gradient(180deg,#101a3dcc,#080e22ee);border:1px solid var(--line)}
.panel h2{font:700 22px var(--disp);color:#fff;margin-bottom:8px}
.q-opts{display:grid;gap:10px;margin-top:12px}
.q-opts button{text-align:left;font:16px var(--body);padding:14px;border:1px solid #2a3768;background:#0b1430;color:var(--text);cursor:pointer;min-height:48px}
.q-opts button:hover,.q-opts button[aria-pressed=true]{border-color:var(--gold);color:#fff}
.prog{height:4px;background:#2a3768;margin-bottom:14px}.prog i{display:block;height:100%;background:var(--gold)}
.res{display:grid;gap:12px}.res .r{padding:14px;border:1px solid #2a3768;background:#0b1430}.res .r.top{border-color:var(--gold)}
.res .r h3{font:700 20px var(--disp);color:#fff}.res .pct{float:right;color:var(--gold2);font-weight:700}
@media(max-width:520px){.mats-f{grid-template-columns:1fr}.tal{font-size:9.5px}.grid4{gap:7px}}
/* Phase 3: icon frames, Wowhead info control, official header */
.gi{--gc:#f8b700;--gs:28px;display:inline-flex;align-items:center;justify-content:center;width:var(--gs);height:var(--gs);flex:none;border:2px solid var(--gc);border-radius:4px;background:radial-gradient(circle at 35% 30%,#1f2a44,#060b1a 75%);box-shadow:inset 0 0 6px rgba(0,0,0,.9),0 0 0 1px #000;color:var(--gc);font:700 calc(var(--gs)*.42)/1 Cinzel,serif;vertical-align:middle;margin-right:6px}
.tal{position:relative}
.tw .wi{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:#060b1a;border:1px solid #f8b700;color:#f8b700;font:700 11px/16px Lato,sans-serif;text-align:center;text-decoration:none;z-index:2}
.tal .wn{display:block;font-size:10px;color:#7fd8ff;margin-top:2px}
.wh-cap{font-size:12px;text-align:center;margin-top:10px}
.off-h{margin:0 0 18px;border:1px solid rgba(248,183,0,.35);border-radius:8px;overflow:hidden;background:#060b1a}
.off-h img{display:block;width:100%;height:180px;object-fit:cover}
.off-h figcaption{font-size:11px;padding:4px 8px;color:#aab}
@media(min-width:900px){.off-h img{height:260px}}
.pick button{display:inline-flex;align-items:center}
.tw .wi{display:flex;align-items:center;justify-content:center;overflow:hidden;width:22px;height:22px}.tw .wi img,.tw .wi ins{margin:0!important}
.fi{display:inline-block;vertical-align:middle;margin-right:6px;flex:none}