/* PVPRP tools masthead, v7 ("next"): each tool gets its own composed Minecraft landscape, cleaner chips, tooltip tags, pixel sparkles; phones get a light strip instead. Loaded after tools-mc.css on pages whose has .tmc-next; each page sets its accent as --tmc-ac on the masthead. Decorative only (aria-hidden). */ body.tmc-next .tw-mast{--tmc-ac:66,133,244;--tmc-land:clamp(48px,4.6vw,88px);--tmc-ground:#080d14;padding-bottom:calc(var(--tmc-land) * .7 + 8px);border-bottom:0;} body.tmc-next.tools-hub .tw-mast{--tmc-ground:#0a0d12;} body.tmc-next .tmc-horizon{display:none;} /* the landscape frame: left part, calm centre, right part (big scenery behind the 3D blocks); one small SVG per depth layer per part, sized by height so the pixel grid never stretches; the ground runs into the tabs below */ .tmc-land{position:absolute;left:0;right:0;bottom:0;height:var(--tmc-land);overflow:hidden;pointer-events:none;z-index:0; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);mask-image:linear-gradient(180deg,transparent 0,#000 24%);} .tmc-land .ld{position:absolute;bottom:0;display:block;width:auto;height:100%;shape-rendering:crispEdges;} .tmc-land .ld-l{left:0;} .tmc-land .ld-r{right:0;} .tmc-land .ld-c{left:50%;transform:translateX(-50%);} .tmc-land .ld-far path{fill:#141b2c;fill:color-mix(in srgb,rgb(var(--tmc-ac)) 13%,#090e16);} .tmc-land .ld-mid path{fill:#0b111c;fill:color-mix(in srgb,rgb(var(--tmc-ac)) 6%,#070a11);} .tmc-land .ld-rim path{fill:rgba(var(--tmc-ac),.26);} .tmc-land .ld-top path{fill:rgba(var(--tmc-ac),.5);} .tmc-land .ld-ground{position:absolute;left:0;right:0;bottom:0;height:calc(var(--tmc-land) * 14 / 96);background:var(--tmc-ground); border-top:3px solid rgba(var(--tmc-ac),.55);box-sizing:border-box;box-shadow:0 -8px 16px -8px rgba(var(--tmc-ac),.22);} .tmc-land .ld-m{display:none;} /* converter: classic 1.8 hills (left) -> modern jagged snowy peaks with cherry trees (right) */ .tmc-land-converter .ld-bloom path{fill:rgba(255,170,212,.36);} .tmc-land-converter .ld-r.ld-far path{fill:#1b2130;fill:color-mix(in srgb,#9fb0cc 16%,#090e16);} .tmc-land-converter .ld-r.ld-rim path{fill:rgba(222,234,255,.3);} .tmc-land-converter .ld-trunk path{fill:rgba(150,104,112,.55);} /* merger: the old pack's blue taiga (left) blends into the new pack's mint hills (right) */ body.tmc-next .tmc-land-merger .ld-l{--tmc-ac:66,133,244;} body.tmc-next .tmc-land-merger .ld-c{--tmc-ac:96,178,204;} body.tmc-next .tmc-land-merger .ld-l.ld-rim path{fill:rgba(214,230,255,.3);} body.tmc-next .tmc-land-merger .ld-ground{border-top-color:transparent;border-image:linear-gradient(90deg,rgba(66,133,244,.6),rgba(96,178,204,.55) 50%,rgba(127,224,163,.6)) 1;} /* sky: a lake mirrors the stars; a pixel aurora above the hills (desktop) */ .tmc-land-sky .ld-lake path{fill:rgba(var(--tmc-ac),.2);} .tmc-land-sky .ld-glint path{fill:rgba(236,240,255,.85);animation:tmcGlint 3.6s ease-in-out infinite;} .tmc-land-sky .ld-glint:nth-of-type(odd) path{animation-delay:-1.8s;} /* find: a beacon block under the scanner; its beam (desktop) */ .tmc-land-find .ld-beaconcore path{fill:rgba(140,255,225,.95);filter:drop-shadow(0 0 4px rgba(var(--tmc-ac),.9));} /* nether: netherrack spikes, basalt, crimson fungi, lava pools */ .tmc-land-nether .ld-far path{fill:#2a1416;fill:color-mix(in srgb,rgb(196,64,48) 17%,#0b0709);} .tmc-land-nether .ld-mid path{fill:#140b10;fill:color-mix(in srgb,rgb(150,52,44) 9%,#07050a);} .tmc-land-nether .ld-rim path{fill:rgba(255,120,70,.28);} .tmc-land-nether .ld-bloom path{fill:rgba(214,52,64,.55);} .tmc-land-nether .ld-top path{fill:rgba(255,120,70,.5);} .tmc-land-nether .ld-lava path{fill:#ff7418;filter:drop-shadow(0 0 6px rgba(255,110,30,.8));} .tmc-land-nether .ld-lavalit path{fill:#ffd27a;animation:tmcGlint 2.4s ease-in-out infinite;} body.tmc-next .tmc-land-nether .ld-ground{border-top-color:rgba(255,128,56,.7);box-shadow:0 -10px 20px -8px rgba(255,110,40,.35);} /* desktop effects (with the 3D blocks, >= 1280px): aurora (sky), beacon beam (find), embers (nether), fireflies (hub) */ .tmc-fx{display:none;position:absolute;pointer-events:none;z-index:0;} @media (min-width:1280px){ body.tmc-next .tmc-fx{display:block;} .tmc-fx-aurora{right:0;bottom:calc(var(--tmc-land) * .45);width:48%;height:180px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%,#000 80%,transparent),linear-gradient(0deg,transparent,#000 30%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 35%,#000 80%,transparent),linear-gradient(0deg,transparent,#000 30%);mask-composite:intersect;} .tmc-fx-aurora svg{display:block;width:100%;height:100%;shape-rendering:crispEdges;animation:tmcAurora 16s ease-in-out infinite alternate;} .tmc-fx-aurora .au0{fill:url(#tmcAu0);} .tmc-fx-aurora .au1{fill:url(#tmcAu1);animation:tmcAuPulse 7s ease-in-out infinite alternate;} .tmc-fx-aurora .au-s0,.tmc-fx-aurora .au-s2{stop-color:rgb(var(--tmc-ac));stop-opacity:0;} .tmc-fx-aurora .au-s1{stop-color:rgb(var(--tmc-ac));stop-opacity:.16;} .tmc-fx-aurora .au-t0,.tmc-fx-aurora .au-t2{stop-color:#46e0c8;stop-opacity:0;} .tmc-fx-aurora .au-t1{stop-color:#46e0c8;stop-opacity:.11;} .tmc-fx-beam{width:6px;left:calc(var(--tmc-land) * 152 / 96 - 3px);bottom:calc(var(--tmc-land) * 76 / 96);top:32%; background:linear-gradient(0deg,rgba(var(--tmc-ac),.3),rgba(var(--tmc-ac),.07) 50%,transparent 85%);animation:tmcBeam 3.2s ease-in-out infinite;} .tmc-fx-beam:after{content:"";position:absolute;left:2px;width:2px;top:0;bottom:0;background:linear-gradient(0deg,rgba(210,255,240,.6),rgba(210,255,240,.12) 45%,transparent 80%);} .tmc-fx-embers{left:0;right:0;bottom:calc(var(--tmc-land) * .12);height:190px;} .tmc-fx-embers i,.tmc-fx-flies i{position:absolute;display:block;width:3px;height:3px;opacity:0;} .tmc-fx-embers i{bottom:0;background:#ffa04e;box-shadow:0 0 6px rgba(255,130,50,.95);animation:tmcEmber 7s linear infinite;} .tmc-fx-embers i:nth-child(1){left:43%;animation-delay:-.4s;} .tmc-fx-embers i:nth-child(2){left:46%;animation-delay:-3.1s;animation-duration:8s;} .tmc-fx-embers i:nth-child(3){left:48%;animation-delay:-5.6s;} .tmc-fx-embers i:nth-child(4){left:56%;animation-delay:-1.8s;animation-duration:6s;} .tmc-fx-embers i:nth-child(5){left:59%;animation-delay:-4.4s;} .tmc-fx-embers i:nth-child(6){left:61.5%;animation-delay:-6.5s;animation-duration:9s;} .tmc-fx-embers i:nth-child(7){left:75%;animation-delay:-2.6s;} .tmc-fx-embers i:nth-child(8){left:82%;animation-delay:-5.1s;animation-duration:8s;} .tmc-fx-embers i:nth-child(9){left:88%;animation-delay:-.9s;} .tmc-fx-embers i:nth-child(10){left:22%;animation-delay:-3.8s;animation-duration:9s;} .tmc-fx-embers i:nth-child(11){left:30%;animation-delay:-6.1s;} .tmc-fx-embers i:nth-child(12){left:94%;animation-delay:-2.2s;animation-duration:7.5s;} .tmc-fx-flies{left:0;right:0;bottom:calc(var(--tmc-land) * .3);height:70px;} .tmc-fx-flies i{width:3px;height:3px;background:#e6ff8a;box-shadow:0 0 6px 1px rgba(214,255,120,.85);animation:tmcFly 5.5s ease-in-out infinite;} .tmc-fx-flies i:nth-child(1){left:3%;top:30%;} .tmc-fx-flies i:nth-child(2){left:6.5%;top:62%;animation-delay:-2s;} .tmc-fx-flies i:nth-child(3){left:9%;top:18%;animation-delay:-3.7s;} .tmc-fx-flies i:nth-child(4){left:19%;top:50%;animation-delay:-1.2s;} .tmc-fx-flies i:nth-child(5){left:70%;top:40%;animation-delay:-4.4s;} .tmc-fx-flies i:nth-child(6){left:92%;top:24%;animation-delay:-2.9s;} .tmc-fx-flies i:nth-child(7){left:94.5%;top:58%;animation-delay:-.6s;} .tmc-fx-flies i:nth-child(8){left:97%;top:36%;animation-delay:-3.3s;} } @keyframes tmcGlint{0%,100%{opacity:.25;}50%{opacity:1;}} @keyframes tmcAurora{from{transform:translateX(-18px);}to{transform:translateX(18px);}} @keyframes tmcAuPulse{from{opacity:.55;}to{opacity:1;}} @keyframes tmcBeam{0%,100%{opacity:.75;}50%{opacity:1;}} @keyframes tmcEmber{0%{transform:translate(0,0);opacity:0;}8%{opacity:1;}70%{opacity:.8;}100%{transform:translate(22px,-170px);opacity:0;}} @keyframes tmcFly{0%,100%{transform:translate(0,0);opacity:0;}20%{opacity:1;}50%{transform:translate(7px,-6px);opacity:.9;}80%{opacity:0;}} /* dropped items hover above the landscape (converter, sky, overlay maker) */ @media (min-width:1280px){body.tmc-next .tmc-stage-conv,body.tmc-next .tmc-stage-sky,body.tmc-next .tmc-stage-tweak{bottom:calc(var(--tmc-land) * .45 + 30px);} body.tmc-next .tmc-stage-merge{bottom:calc(var(--tmc-land) * .45 + 26px);} body.tmc-next .tmc-stage-find{bottom:calc(var(--tmc-land) * .45 + 40px);}} @media (min-width:1100px){body.tmc-next .tw-mast-deco{bottom:calc(4.5vh + 24px);}} /* phones: a light strip instead of the scene: the lit edge, one low faint hill line, two grass tufts */ @media (max-width:700px){ body.tmc-next .tw-mast{--tmc-land:34px;padding-bottom:34px!important;} .tmc-land{-webkit-mask-image:none;mask-image:none;} .tmc-land .ld{display:none;} .tmc-land .ld-m{display:block;position:absolute;bottom:0;height:100%;shape-rendering:crispEdges;} .tmc-land .ld-m-hill{left:0;width:100%;} .tmc-land .ld-m-hill path{fill:#111827;fill:color-mix(in srgb,rgb(var(--tmc-ac)) 12%,#090d15);} .tmc-land .ld-m-top{right:14px;width:auto;} .tmc-land .ld-m-top path{fill:rgba(var(--tmc-ac),.5);} .tmc-land .ld-ground{border-top-width:2px;box-shadow:0 -6px 12px -6px rgba(var(--tmc-ac),.25);} } /* chips: one shape for all, a raised pixel slot; the status chip gets a square LED */ body.tmc-next .tw-chips{gap:10px;} body.tmc-next .tw-chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;color:rgba(255,255,255,.92);letter-spacing:.06em; background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -2px 0 rgba(0,0,0,.42),0 2px 0 rgba(0,0,0,.35);} body.tmc-next .tw-chip svg{flex:0 0 auto;margin:0!important;width:13px;height:13px;stroke:rgb(var(--tmc-ac));filter:drop-shadow(0 0 4px rgba(var(--tmc-ac),.55));} body.tmc-next .tw-chip-hot,body.tmc-next .tw-chip-sky,body.tmc-next .tw-chip-find{background:linear-gradient(180deg,rgba(61,220,140,.17),rgba(61,220,140,.06))!important;border-color:rgba(61,220,140,.5)!important;} body.tmc-next .tw-chip-hot:before,body.tmc-next .tw-chip-sky:before,body.tmc-next .tw-chip-find:before{content:"";flex:0 0 auto;width:6px;height:6px;margin:0!important;border-radius:0!important;background:#3ddc8c; box-shadow:0 0 0 2px rgba(61,220,140,.2),0 0 8px rgba(61,220,140,.7);animation:tmcLed 2.8s ease-in-out infinite;} /* the floating squares become pixel sparkles around the hero block */ body.tmc-next .tw-mast-orbs span{width:9px!important;height:9px!important;border:0!important;border-radius:0!important;transform:none!important;box-shadow:none!important; background:linear-gradient(rgba(var(--tmc-ac),.9),rgba(var(--tmc-ac),.9)) center/3px 9px no-repeat,linear-gradient(rgba(var(--tmc-ac),.9),rgba(var(--tmc-ac),.9)) center/9px 3px no-repeat!important; filter:drop-shadow(0 0 5px rgba(var(--tmc-ac),.8));opacity:0;animation:tmcTwinkle 4.2s ease-in-out infinite!important;} body.tmc-next .tw-mast-orbs span:nth-child(1){left:auto!important;top:auto!important;right:calc(7% + 292px)!important;bottom:calc(4.2vh + 150px)!important;} body.tmc-next .tw-mast-orbs span:nth-child(2){left:auto!important;top:auto!important;right:calc(7% - 26px)!important;bottom:calc(4.2vh + 178px)!important;animation-delay:-1.4s!important;} body.tmc-next .tw-mast-orbs span:nth-child(3){left:auto!important;top:auto!important;right:calc(7% + 150px)!important;bottom:calc(4.2vh + 214px)!important;animation-delay:-2.8s!important;} @media (min-width:1280px){body.tmc-next.find-page .tw-mast-orbs{display:block!important;}} /* stage labels as Minecraft item tooltips */ body.tmc-next .tmc-tag{padding:5px 8px 6px;font-size:10px;letter-spacing:.06em;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.7);background:rgba(16,4,22,.94);border:0; box-shadow:inset 0 0 0 1px rgba(var(--ac,var(--tmc-ac)),.85),inset 0 0 0 2px rgba(0,0,0,.5),0 0 0 1px rgba(16,4,22,.94),0 6px 14px rgba(0,0,0,.35);} body.tmc-next .tmc-match{right:-22%!important;bottom:auto!important;top:8%!important;} @keyframes tmcLed{0%,100%{opacity:1;}50%{opacity:.45;}} @keyframes tmcTwinkle{0%,100%{opacity:0;}45%,55%{opacity:.95;}} @media (prefers-reduced-motion: reduce){body.tmc-next .tw-chip:before,body.tmc-next .tw-mast-orbs span,.tmc-land path,.tmc-fx,.tmc-fx *{animation:none!important;}body.tmc-next .tw-mast-orbs span{opacity:.7;}.tmc-fx-embers i{opacity:.6;transform:translateY(-40px);}.tmc-fx-flies i{opacity:.8;}} @media (max-width:1279px){body.tmc-next .tw-mast-orbs{display:none!important;}} @media (max-width:700px){body.tmc-next .tw-chip{min-height:30px;padding:0 10px;}} /* the new tool: a small red NEW pill (the site's .tw-newpill) on the Overlay Maker tab, and a featured card on the hub */ body.tmc-next .tw-subnav-new{display:inline-flex;align-items:center;margin-left:7px;padding:2px 5px 3px;font-size:.6em;line-height:1;letter-spacing:.06em;color:#fff;background:#D23F3F;animation:twPulse 2.2s ease-in-out infinite;} @media (max-width:820px){body.tmc-next .tw-subnav-6 .tw-subnav-link:nth-child(4),body.tmc-next .tw-subnav-6 .tw-subnav-link:nth-child(5){grid-column:auto / span 2;}body.tmc-next .tw-subnav-new{position:absolute;top:5px;right:6px;margin:0;padding:2px 4px;font-size:.52em;}} body.tmc-next .tlf-card.tlf-ac-orange{--tlf-ac:255,138,76;} body.tmc-next .tlf-card-new{grid-column:1 / -1;border-color:rgba(255,138,76,.3);} body.tmc-next .tlf-theme-overlay{opacity:.55;background-image:linear-gradient(rgba(255,138,76,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,138,76,.09) 1px,transparent 1px);background-size:30px 30px; -webkit-mask-image:radial-gradient(circle at 80% 45%,#000,transparent 62%);mask-image:radial-gradient(circle at 80% 45%,#000,transparent 62%);} body.tmc-next .tlf-card-new{--tmc-land:46px;--tmc-ac:255,138,76;--tmc-ground:#0f141b;--demo-w:320px;} body.tmc-next .tlf-card-new .tlf-inner{padding-bottom:calc(2.8vh + 30px);} body.tmc-next .tlf-card-new .tlf-glow{right:8%;bottom:-60px;width:360px;height:240px;} /* desktop: copy column + demo column; the card grows to whichever is taller, the demo stays under the NEW badge */ @media (min-width:901px){ body.tmc-next .tlf-card-new .tlf-inner{display:grid;grid-template-columns:minmax(0,1fr) var(--demo-w);column-gap:5%;align-items:start;} body.tmc-next .tlf-card-new .tlf-demo{align-self:center;margin:30px 0 4px;} } @media (min-width:1100px){body.tmc-next .tlf-card-new{--demo-w:380px;}} @media (min-width:1280px){body.tmc-next .tlf-card-new{--demo-w:440px;}} .tlf-copy{display:flex;flex-direction:column;min-width:0;} /* live before/after: the overlay's changes sweep across a small first-person view (transform-only animation) */ .tlf-demo{position:relative;z-index:2;display:block;width:100%;height:auto;aspect-ratio:16 / 9;overflow:hidden;border:1px solid rgba(255,138,76,.55);border-radius:3px; background:#101a36;box-shadow:0 14px 34px rgba(0,0,0,.55),0 0 30px -10px rgba(255,138,76,.55);} .tlf-demo-scene{position:absolute;inset:0;display:block;width:100%;height:100%;shape-rendering:crispEdges;} .tlf-demo-after{position:absolute;inset:0;overflow:hidden;transform:translateX(50%);animation:tlfSweepA 9s ease-in-out infinite;} .tlf-demo-after-in{position:absolute;inset:0;transform:translateX(-50%);animation:tlfSweepB 9s ease-in-out infinite;} .tlf-demo-line{position:absolute;inset:0;pointer-events:none;transform:translateX(50%);animation:tlfSweepA 9s ease-in-out infinite;} .tlf-demo-line:before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:#ffb07c;box-shadow:0 0 10px rgba(255,138,76,.85);} .tlf-demo-line:after{content:"";position:absolute;left:-7px;top:calc(50% - 7px);width:12px;height:12px;background:#ff8a4c;border:1px solid #ffd2b0;box-shadow:0 0 10px rgba(255,138,76,.8);} .tlf-demo-lbl{position:absolute;top:8px;z-index:2;padding:3px 6px 4px;font-size:.6em;letter-spacing:.08em;color:#fff;background:rgba(8,10,16,.78);border:1px solid rgba(255,255,255,.18);} .tlf-demo-lbl-b{left:8px;} .tlf-demo-lbl-a{right:8px;border-color:rgba(255,138,76,.6);color:#ffd2b0;} @keyframes tlfSweepA{0%,14%{transform:translateX(88%);}46%,64%{transform:translateX(12%);}96%,100%{transform:translateX(88%);}} @keyframes tlfSweepB{0%,14%{transform:translateX(-88%);}46%,64%{transform:translateX(-12%);}96%,100%{transform:translateX(-88%);}} body.tmc-next .tlf-card-new:hover .tlf-demo{border-color:rgba(255,138,76,.85);} /* what's inside: a row of tweak chips */ .tlf-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 1.8vh;} .tlf-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;font-size:.76em;color:rgba(255,255,255,.84);background:rgba(255,138,76,.08);border:1px solid rgba(255,138,76,.26);} .tlf-chip svg{width:14px;height:14px;color:#ff9a5c;shape-rendering:crispEdges;} .tlf-chip-more{color:#ffb07c;} @media (prefers-reduced-motion: reduce){.tlf-demo-after,.tlf-demo-after-in,.tlf-demo-line{animation:none!important;}} @media (max-width:900px){ /* phones: icon + NEW on top, then the demo, then the copy */ body.tmc-next .tlf-card-new .tlf-copy{display:contents;} body.tmc-next .tlf-card-new .tlf-copy > *{order:2;} body.tmc-next .tlf-card-new .tlf-copy > .tlf-tic{order:0;} body.tmc-next .tlf-card-new .tlf-demo{order:1;margin:0 0 14px;} } body.tmc-next .tlf-badge-new{background:#D23F3F;color:#fff;letter-spacing:.08em;animation:twPulse 2.2s ease-in-out infinite;} /* page colours: purple belongs to the Sky Generator, so the Pack Merger goes blue (the Overlay Maker's orange lives in its own page CSS) */ body.tmc-next.tools-review-merger{--tr-accent:#4c8ff2;--tr-accent-rgb:76,143,242;--tr-route-accent:#4c8ff2;--tr-route-accent-rgb:76,143,242;} body.tmc-next.tools-review-merger .cvbed{--tr-module-accent:#5aa2ff;--tr-module-rgb:90,162,255;} body.tmc-next.tools-review-merger .mg-decision-kicker{color:#cfe0ff;} body.tmc-next.tools-review-merger .mg-goal-on .mg-goal-icon,body.tmc-next.tools-review-merger .mg-setting-step{color:#dbe8ff;}