:root{--th-bg:#070914;--th-panel:#11182b;--th-line:#2c3b5d;--th-yellow:#ffd026;--th-cyan:#21c6ff;--th-pink:#ff3f83;--th-green:#3ce68a;--th-muted:#8da1cf}.tools-hub{max-width:1320px;margin:0 auto;padding:56px 36px 100px;color:#f7f8ff}.tools-breadcrumb{display:flex;gap:12px;color:#7184af;font:900 10px Arial;letter-spacing:.13em;margin-bottom:30px}.tools-breadcrumb a{color:var(--th-yellow);text-decoration:none}.tools-hero{display:grid;grid-template-columns:1fr 280px;gap:50px;align-items:end;margin-bottom:42px}.tools-kicker{color:var(--th-yellow);font:900 10px Arial;letter-spacing:.17em}.tools-hero h1{font:900 clamp(62px,9vw,120px)/.85 Arial;letter-spacing:-.075em;margin:18px 0 22px}.tools-hero p{max-width:760px;color:#9fb4e9;font:500 17px/1.6 Arial}.tools-hero aside{min-height:180px;border:1px solid var(--th-line);border-radius:20px;background:linear-gradient(145deg,#18233d,#0c1323);padding:28px;display:flex;flex-direction:column;justify-content:center}.tools-hero aside b{color:var(--th-cyan);font:900 62px/.8 Arial}.tools-hero aside strong{font:900 16px Arial;margin-top:20px}.tools-hero aside small{color:var(--th-muted);margin-top:8px}.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.tool-card{position:relative;overflow:hidden;min-height:330px;border:1px solid var(--th-line);border-radius:22px;background:linear-gradient(145deg,#141e35,#0b1121);color:white;text-decoration:none;padding:26px;display:grid;grid-template-columns:180px 1fr;gap:25px;align-items:center;transition:.2s ease}.tool-card:hover{transform:translateY(-4px);border-color:#526b9c;box-shadow:0 22px 50px rgba(0,0,0,.25)}.tool-card-counter{grid-column:1/-1;min-height:350px;background:radial-gradient(circle at 18% 50%,rgba(33,198,255,.17),transparent 38%),radial-gradient(circle at 82% 50%,rgba(255,63,131,.15),transparent 38%),#11182b}.tool-number{position:absolute;right:20px;top:12px;color:rgba(117,139,184,.13);font:900 72px Arial}.tool-visual{height:170px;border:1px solid #35496f;border-radius:19px;background:#080e1c;display:flex;align-items:center;justify-content:center;gap:11px}.tool-visual span{display:grid;place-items:center;width:62px;height:62px;border-radius:15px;border:2px solid var(--th-cyan);background:#14223b;color:white;font:900 18px Arial}.tool-visual span:last-child{border-color:var(--th-pink)}.tool-visual i{color:var(--th-yellow);font:900 12px Arial;font-style:normal}.tool-card-counter .tool-visual span{width:70px;height:70px;font-size:30px}.tool-card-counter .tool-visual .enemy{border-color:var(--th-pink);color:var(--th-pink)}.tool-card-counter .tool-visual .team{border-color:var(--th-cyan);color:var(--th-cyan)}.map-visual span{font-size:11px;border-color:var(--th-green)}.war-visual span{font-size:10px;border-color:var(--th-yellow)}.tool-copy{position:relative;z-index:1}.tool-copy small{color:var(--th-yellow);font:900 9px Arial;letter-spacing:.15em}.tool-copy h2{font:900 30px/1 Arial;margin:10px 0 14px}.tool-copy p{color:#91a5d2;font:500 13px/1.55 Arial;min-height:62px}.tool-copy>strong{display:inline-flex;align-items:center;gap:25px;margin-top:13px;color:white;border:1px solid #41557d;border-radius:10px;padding:13px 15px;font:900 9px Arial}.tool-card-counter .tool-copy>strong{background:var(--th-yellow);border-color:var(--th-yellow);color:#080d18}.tools-data-note{display:flex;gap:20px;align-items:center;margin-top:25px;padding:22px;border:1px solid var(--th-line);border-radius:16px;background:#0c1323}.tools-data-note>span{display:grid;place-items:center;flex:0 0 62px;height:62px;border-radius:15px;background:#1c2946;color:var(--th-cyan);font:900 11px Arial}.tools-data-note h3{font:900 15px Arial;margin:0 0 7px}.tools-data-note p{color:#8296c5;font:500 11px/1.5 Arial;margin:0}@media(max-width:900px){.tools-hub{padding:36px 16px 70px}.tools-hero{grid-template-columns:1fr}.tools-hero aside{display:none}.tools-grid{grid-template-columns:1fr}.tool-card-counter{grid-column:auto}.tool-card{grid-template-columns:135px 1fr}.tool-visual{height:145px}.tool-copy h2{font-size:24px}}@media(max-width:600px){.tool-card{grid-template-columns:1fr;min-height:0;padding:20px}.tool-visual{height:125px}.tool-copy p{min-height:0}.tools-data-note{align-items:flex-start}.tools-data-note>span{display:none}}

/* HERO V2 — BrawlStats Lab */
.tools-hero-pro{position:relative;isolation:isolate;overflow:hidden;min-height:430px;margin:0 0 42px;padding:42px 34px 98px;border:1px solid #30456b;border-radius:24px;background:radial-gradient(circle at 76% 34%,rgba(33,198,255,.23),transparent 27%),radial-gradient(circle at 93% 69%,rgba(181,96,255,.17),transparent 30%),linear-gradient(135deg,#111d35 0%,#0c1325 55%,#161128 100%);box-shadow:0 24px 70px rgba(0,0,0,.25)}
.tools-hero-pro:before{content:"LAB";position:absolute;right:22px;top:-24px;color:rgba(92,206,255,.04);font:900 190px/1 Arial;letter-spacing:-.07em;z-index:-1}.tools-hero-copy{position:relative;z-index:3;max-width:700px}.tools-hero-pro h1{margin:16px 0 18px;font-size:clamp(68px,9vw,116px)}.tools-hero-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}.tools-hero-tags span{padding:7px 10px;border:1px solid #365176;border-radius:999px;background:rgba(8,15,29,.58);color:#b6d9ef;font:900 8px Arial;letter-spacing:.11em}.tools-hero-art{position:absolute;right:0;top:0;width:48%;height:100%;z-index:1;pointer-events:none}.tools-grid-glow{position:absolute;right:56px;top:50px;width:270px;height:270px;border:1px solid rgba(33,198,255,.18);border-radius:28px;transform:rotate(45deg);box-shadow:0 0 60px rgba(33,198,255,.09)}.tools-grid-glow:after{content:"";position:absolute;inset:42px;border:1px solid rgba(181,96,255,.17);border-radius:22px}.tools-art{position:absolute;bottom:-40px;object-fit:contain;filter:drop-shadow(0 28px 30px rgba(0,0,0,.46));user-select:none}.tools-art-bit{right:18px;width:min(300px,58%);z-index:4}.tools-art-jessie{right:245px;width:min(205px,39%);z-index:2;opacity:.74;transform:rotate(-5deg)}.tools-hero-pro aside{position:absolute;left:34px;bottom:22px;z-index:5;min-height:0;width:auto;padding:13px 18px;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;border-radius:13px;background:rgba(8,15,29,.76);backdrop-filter:blur(8px)}.tools-hero-pro aside b{grid-row:1/3;font-size:38px}.tools-hero-pro aside strong{margin:0;font-size:11px}.tools-hero-pro aside small{margin:3px 0 0;font-size:9px}
@media(max-width:900px){.tools-hero-pro{min-height:455px;padding-bottom:92px}.tools-hero-art{right:-45px;width:57%;opacity:.8}.tools-hero-pro aside{display:grid}}
@media(max-width:600px){.tools-hero-pro{min-height:535px;margin:0 0 28px;padding:28px 22px 94px}.tools-hero-pro h1{font-size:58px}.tools-hero-pro p{font-size:14px;max-width:94%}.tools-hero-art{right:-70px;top:188px;width:92%;height:58%;opacity:.66}.tools-art-bit{right:0;width:225px}.tools-art-jessie{right:180px;width:155px}.tools-grid-glow{right:35px;top:40px;width:220px;height:220px}.tools-hero-pro aside{left:14px;right:14px;bottom:14px;width:auto}.tools-hero-tags span{font-size:7px}}

/* HERO V2.1 — overlap-safe layout */
@media(min-width:601px){
  .tools-hero-copy{padding-bottom:70px}
}
@media(max-width:600px){
  .tools-hero-pro{min-height:0;padding:28px 22px 18px}
  .tools-hero-copy{padding-bottom:0}
  .tools-hero-art{position:relative;right:auto;top:auto;width:100%;height:230px;margin-top:4px;opacity:.68}
  .tools-art-bit{right:4%;width:220px}
  .tools-art-jessie{right:53%;width:150px}
  .tools-grid-glow{right:16%;top:20px;width:190px;height:190px}
  .tools-hero-pro aside{position:relative;left:auto;right:auto;bottom:auto;width:100%;margin-top:12px;box-sizing:border-box}
}

/* Who Should I Push Today */
.tool-card-push{grid-column:1/-1;min-height:350px;background:radial-gradient(circle at 18% 50%,rgba(60,230,138,.18),transparent 38%),radial-gradient(circle at 82% 50%,rgba(255,208,38,.14),transparent 38%),#11182b}
.push-visual span{border-color:var(--th-green);font-size:12px}.push-visual span:last-child{border-color:var(--th-yellow);color:var(--th-yellow)}
.tool-card-push .tool-copy>strong{background:var(--th-green);border-color:var(--th-green);color:#07120c}
@media(max-width:900px){.tool-card-push{grid-column:auto}}

/* TOOL CARDS V3 — image-led, compact and mobile-first */
.tool-card,.tool-card-counter,.tool-card-push{min-height:290px;grid-template-columns:minmax(250px,42%) 1fr;padding:18px;gap:24px}
.tool-cover{position:relative;isolation:isolate;overflow:hidden;height:252px;border:1px solid #385077;border-radius:18px;background:radial-gradient(circle at 50% 40%,rgba(33,198,255,.22),transparent 45%),linear-gradient(145deg,#15233e,#080e1b);box-shadow:inset 0 0 45px rgba(0,0,0,.28)}
.tool-cover:after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,transparent 43%,rgba(5,9,18,.18) 57%,rgba(5,9,18,.96) 100%);pointer-events:none}
.cover-badge{position:absolute;left:12px;top:12px;z-index:6;padding:7px 9px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(7,13,25,.76);backdrop-filter:blur(7px);color:#dbe8ff;font:900 7px Arial;letter-spacing:.12em}
.cover-brawler{position:absolute;bottom:-15px;z-index:2;width:54%;height:89%;object-fit:contain;filter:drop-shadow(0 16px 15px rgba(0,0,0,.62));transition:transform .25s ease}
.tool-card:hover .cover-brawler{transform:translateY(-5px) scale(1.03)}
.cover-brawler.cover-main{left:23%;z-index:2;width:57%;height:94%}.cover-brawler.cover-left{left:-7%;z-index:1;width:48%;height:75%;opacity:.84}.cover-brawler.cover-right{right:-8%;z-index:1;width:48%;height:75%;opacity:.84}
.tool-cover>strong{position:absolute;left:15px;right:15px;bottom:13px;z-index:5;display:flex;align-items:end;justify-content:space-between;gap:10px}.tool-cover>strong small{color:#a9bce7;font:900 7px Arial;letter-spacing:.13em}.tool-cover>strong b{color:white;font:900 16px Arial;white-space:nowrap}
.cover-versus{position:absolute;left:50%;top:44%;z-index:5;display:grid;place-items:center;width:42px;height:42px;border:2px solid var(--th-yellow);border-radius:50%;background:#0a1120;color:var(--th-yellow);font:1000 11px Arial;transform:translate(-50%,-50%);box-shadow:0 0 25px rgba(255,208,38,.22)}
.cover-push{background:radial-gradient(circle at 50% 37%,rgba(60,230,138,.28),transparent 43%),linear-gradient(145deg,#142b32,#09121e)}.cover-push .cover-badge{color:var(--th-green);border-color:rgba(60,230,138,.35)}
.cover-counter{background:radial-gradient(circle at 18% 45%,rgba(255,63,131,.27),transparent 34%),radial-gradient(circle at 75% 42%,rgba(33,198,255,.24),transparent 40%),#0a1120}.cover-counter .cover-enemy{left:-5%;z-index:2;width:58%;height:91%}.cover-counter .cover-main{left:46%;width:42%;height:78%}.cover-counter .cover-right{right:-16%;width:42%;height:70%}
.cover-ban{background:radial-gradient(circle at 50% 40%,rgba(255,63,131,.27),transparent 43%),linear-gradient(145deg,#281329,#0a1020)}.cover-ban .cover-main{left:17%;width:66%}.ban-mark{position:absolute;left:50%;top:46%;z-index:5;width:105px;height:105px;border:9px solid #ff3f63;border-radius:50%;transform:translate(-50%,-50%) rotate(-38deg);box-shadow:0 0 24px rgba(255,63,99,.36)}.ban-mark:after{content:"";position:absolute;left:-10px;right:-10px;top:40px;height:9px;border-radius:8px;background:#ff3f63}
.cover-draft{background:radial-gradient(circle at 28% 44%,rgba(33,198,255,.22),transparent 36%),radial-gradient(circle at 77% 44%,rgba(255,63,131,.2),transparent 38%),#0a1120}
.cover-compare{background:radial-gradient(circle at 18% 44%,rgba(33,198,255,.22),transparent 36%),radial-gradient(circle at 82% 44%,rgba(181,96,255,.24),transparent 36%),#0a1120}.cover-compare .cover-left{left:-1%;width:57%;height:88%;opacity:1}.cover-compare .cover-right{right:-1%;width:57%;height:88%;opacity:1}
.cover-map{background:linear-gradient(145deg,#102939,#081321)}.cover-map-grid{position:absolute;inset:0;opacity:.26;background-image:linear-gradient(rgba(60,230,138,.36) 1px,transparent 1px),linear-gradient(90deg,rgba(60,230,138,.36) 1px,transparent 1px);background-size:28px 28px;transform:perspective(300px) rotateX(55deg) scale(1.5)}
.cover-war{background:radial-gradient(circle at 20% 44%,rgba(255,208,38,.18),transparent 36%),radial-gradient(circle at 82% 44%,rgba(255,63,131,.2),transparent 37%),#0a1120}
.tool-copy h2{font-size:clamp(22px,2.2vw,29px)}.tool-copy p{min-height:0;max-width:520px;margin:0}.tool-copy>strong{margin-top:18px;padding:14px 16px;background:var(--th-yellow);border-color:var(--th-yellow);color:#080d18}.tool-card-push .tool-copy>strong{background:var(--th-green);border-color:var(--th-green)}
@media(max-width:900px){.tool-card,.tool-card-counter,.tool-card-push{grid-template-columns:220px 1fr;min-height:260px}.tool-cover{height:220px}}
@media(max-width:650px){.tools-grid{gap:14px}.tool-card,.tool-card-counter,.tool-card-push{grid-template-columns:1fr;gap:15px;padding:14px;border-radius:18px}.tool-cover{height:158px;border-radius:14px}.cover-brawler{bottom:-11px}.tool-cover>strong{bottom:10px}.tool-cover>strong b{font-size:14px}.tool-copy{padding:0 4px 4px}.tool-copy h2{margin:8px 0 10px;font-size:23px}.tool-copy p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:12px;line-height:1.5}.tool-copy>strong{width:100%;box-sizing:border-box;justify-content:space-between;margin-top:14px}.tool-number{font-size:54px;top:174px}.ban-mark{width:75px;height:75px;border-width:7px}.ban-mark:after{top:29px;height:7px}.cover-versus{width:35px;height:35px}}