/* Game pages: hero, calculator, order summary. Layout pattern from BoostRoyal and Eloking, our styling. */
.hide{display:none !important}
.lhero{position:relative;padding:130px 0 26px;overflow:hidden}
.lart{position:absolute;right:-6%;top:-40px;width:min(1400px,100vw);height:820px;background-size:cover;background-repeat:no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%),linear-gradient(180deg,#000 55%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 45%),linear-gradient(180deg,#000 55%,transparent);mask-composite:intersect;opacity:.85;pointer-events:none}
.lhero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 20%,rgba(11,15,28,.55) 55%,rgba(11,15,28,.15));pointer-events:none}
.lhero-in{position:relative;z-index:2}
.crumbs{display:flex;gap:8px;font-size:14px;color:var(--mute);margin-bottom:14px}
.crumbs a:hover{color:#fff}
.lhero h1{font-size:64px;line-height:1;font-weight:900;letter-spacing:-.03em}
.lhero h1 .y{color:#ffd23f;text-shadow:0 0 26px rgba(255,200,40,.45)}
.lsub{font-size:18px;color:#d3dcf2;max-width:560px;line-height:1.55;margin:14px 0 6px}
.lhero .tp{background:rgba(11,15,28,.6);margin:12px 0 0}
.tp .brand{gap:5px}
.tabs{display:flex;gap:8px;margin-top:30px;flex-wrap:wrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:none;padding:12px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(16,22,42,.7);color:#c9d3ec;font:700 15px Outfit,sans-serif;cursor:pointer;backdrop-filter:blur(8px)}
.tabs button:hover{color:#fff;border-color:rgba(255,255,255,.25)}
.tabs button.on{background:var(--sun);border-color:var(--sun);color:#1d1500}

.calc{display:grid;grid-template-columns:1fr 400px;gap:34px;align-items:start;padding:10px 0 80px;position:relative;z-index:2}
.pick{padding:24px 0;border-top:1px solid rgba(255,255,255,.08)}
.pick:first-child{border-top:0}
.ph2{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.ph2 .big{width:110px;height:auto;filter:drop-shadow(0 10px 30px rgba(120,160,255,.35))}
.ph2 small{display:block;font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--mute)}
.ph2 b{font-size:32px;font-weight:900;letter-spacing:-.02em}
.ph2 .sel{margin-left:auto;min-width:170px}
.tiers{display:grid;grid-template-columns:repeat(var(--n,10),1fr);gap:6px}
.tiers button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px 6px;border-radius:12px;border:1px solid transparent;background:none;color:#6c789a;font:700 11px Outfit,sans-serif;cursor:pointer;transition:background .15s}
.tiers button img{width:100%;max-width:64px;height:auto;filter:saturate(.3) brightness(.6);transition:filter .2s,transform .2s}
.tiers button:hover img{filter:none;transform:translateY(-2px)}
.tiers button.on{background:rgba(255,201,40,.08);border-color:rgba(255,201,40,.45);color:#fff}
.tiers button.on img{filter:none}
.tiers button:disabled{opacity:.25;cursor:not-allowed}
.divs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.divs button{padding:11px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#c9d3ec;font:800 15px Outfit,sans-serif;cursor:pointer}
.divs button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.sel{display:flex;flex-direction:column;gap:6px}
.sel span{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--mute)}
.sel select{appearance:none;padding:12px 38px 12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#121a30 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa6c4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px no-repeat;color:#fff;font:600 15px Outfit,sans-serif;cursor:pointer}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:24px 0;border-top:1px solid rgba(255,255,255,.08)}
input[type=range]{width:100%;accent-color:var(--sun);height:30px}
.ticks{display:flex;justify-content:space-between;color:var(--mute);font-size:13px;font-weight:600}
.roles{padding:24px 0;border-top:1px solid rgba(255,255,255,.08)}
.roles small{display:block;font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--mute);margin-bottom:12px}
.roles small em{font-style:normal;color:#5ee6a0;margin-left:6px}
.pk-icon{display:flex;gap:8px;flex-wrap:wrap}
.pk-icon button{display:flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:none;color:#c9d3ec;font:700 14px Outfit,sans-serif;cursor:pointer}
.pk-icon button img{width:22px;height:22px;opacity:.5}
.pk-icon button.on{border-color:var(--sun);color:#fff;background:rgba(255,201,40,.08)}
.pk-icon button.on img{opacity:1}
.pk-square{display:flex;gap:8px;flex-wrap:wrap}
.pk-square button{width:48px;height:48px;border-radius:12px;overflow:hidden;border:2px solid transparent;padding:0;background:#121a30;cursor:pointer;color:#c9d3ec;font:800 12px Outfit,sans-serif}
.pk-square button img{width:100%;height:100%;filter:grayscale(.85) brightness(.6);transition:filter .2s}
.pk-square button.on{border-color:var(--sun)}
.pk-square button.on img,.pk-square button:hover img{filter:none}

.cr{position:sticky;top:94px}
.sum{border-radius:22px;background:linear-gradient(180deg,#141c34,#10172b);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);padding:22px}
.route{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.route img{width:56px;height:auto}
.route div{flex:1;min-width:0;text-align:center}
.route b{display:block;font-size:18px}
.route small{color:var(--mute);font-size:13px}
.mode{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}
.mode button{padding:11px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:none;color:#fff;font:800 16px Outfit,sans-serif;cursor:pointer;text-align:left}
.mode button small{display:block;font-weight:500;font-size:12px;color:var(--mute);margin-top:2px}
.mode button.on{border-color:var(--blue2);background:rgba(47,107,255,.15)}
.adds label{display:flex;align-items:center;gap:12px;padding:10px 0;cursor:pointer;font-weight:600;font-size:15px}
.adds input{display:none}
.sw{flex:none;width:40px;height:24px;border-radius:99px;background:rgba(255,255,255,.12);position:relative;transition:background .2s}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s}
.adds input:checked+.sw{background:var(--blue)}
.adds input:checked+.sw::after{left:19px}
.adds input:disabled+.sw{background:#2bb673}
.an{display:flex;align-items:center;gap:8px}
.an svg{width:17px;height:17px;color:var(--sky)}
.adds em{margin-left:auto;font-style:normal;font-size:12px;font-weight:800;padding:3px 8px;border-radius:7px;background:rgba(47,107,255,.18);color:var(--sky)}
.adds em.free{background:rgba(43,182,115,.16);color:#5ee6a0}
.tot{display:flex;justify-content:space-between;align-items:flex-end;margin:16px 0 14px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.tot small{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--mute)}
.tot b#total{display:block;font-size:44px;font-weight:900;letter-spacing:-.02em;line-height:1.05}
.tot b#total.bump{animation:bump .35s ease}
@keyframes bump{40%{transform:scale(1.06);color:#ffd23f}}
.eta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:13px;color:var(--mute)}
.eta span{display:flex;align-items:center;gap:6px}.eta b{color:#fff}
.eta svg{width:15px;height:15px;color:#5ee6a0}
.go{width:100%;padding:17px;font-size:18px;border-radius:14px}
.safe-l{display:flex;justify-content:space-between;gap:6px;margin-top:14px;font-size:12px;font-weight:600;color:var(--mute)}
.safe-l span{display:flex;align-items:center;gap:5px}
.safe-l svg{width:14px;height:14px;color:#5ee6a0}
.demo{margin-top:12px;font-size:12px;color:#6c789a;text-align:center}
.mbar{display:none}

.why{padding:40px 0 90px}
.pk .art .feat-img{width:64px;height:64px;border-radius:16px;box-shadow:0 0 0 2px #0b0f1c,0 10px 30px rgba(0,0,0,.5);position:absolute;left:0;top:50px}
.pk .art .feat-img.o2{left:44px;top:70px}.pk .art .feat-img.o3{left:88px;top:50px}
.champ-strip{position:relative;padding:110px 0 90px;overflow:hidden}
.cs-art{position:absolute;inset:0;background-size:cover;background-position:center 25%;opacity:.32;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent)}
.cs-in{position:relative;text-align:center}
.ladder2{display:flex;justify-content:space-between;align-items:flex-end;margin-top:50px;height:230px}
.ladder2 div{display:flex;flex-direction:column;align-items:center;gap:6px;width:9%;transform:translateY(calc(var(--i) * -12px))}
.ladder2 img{width:100%;height:auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
.ladder2 span{font-size:13px;font-weight:700;color:#c9d3ec}

@media(max-width:1000px){
 .calc{grid-template-columns:1fr}
 .cr{position:static}
 .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(16,22,42,.96);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.1)}
 .mbar small{display:block;color:var(--mute);font-size:12px;font-weight:600}
 .mbar b{font-size:24px;font-weight:900}
 .mbar .btn{padding:14px 22px}
 body.game{padding-bottom:80px}
 .ladder2{overflow-x:auto;justify-content:flex-start;gap:10px}.ladder2 div{flex:none;width:80px}
}
@media(max-width:600px){
 .lhero{padding-top:100px}.lhero h1{font-size:40px}.lsub{font-size:15px}
 .lart{width:900px;right:-40%;opacity:.55}
 .tiers{grid-template-columns:repeat(5,1fr);gap:4px}
 .ph2 .big{width:80px}.ph2 b{font-size:26px}
 .ph2{flex-wrap:wrap}.ph2 .sel{margin-left:0;width:100%}
 .opts{grid-template-columns:1fr 1fr}
 .opts .sel:first-child{grid-column:1/-1}
 .tot b#total{font-size:36px}
 .safe-l{flex-wrap:wrap}
}
@media(max-width:600px){.why .perks{grid-template-columns:1fr}}

/* Shared game engine additions */
.lart{background-position:70% 20%}
.roles>small{display:block}
.pk-square button.more,.pk-portrait button.more{display:grid;place-items:center}
.pk-portrait{display:flex;gap:8px;flex-wrap:wrap}
.pk-portrait button{width:64px;height:76px;border-radius:14px;overflow:hidden;border:2px solid transparent;padding:0;background:linear-gradient(180deg,#1a2442,#10172b);cursor:pointer;color:#c9d3ec;font:800 12px Outfit,sans-serif}
.pk-portrait button img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;filter:grayscale(.85) brightness(.6);transition:filter .2s}
.pk-portrait button.on{border-color:var(--sun)}
.pk-portrait button.on img,.pk-portrait button:hover img{filter:none}
.custom:empty{display:none}
.ctl{padding:22px 0;border-top:1px solid rgba(255,255,255,.08)}
.custom .ctl:first-child{border-top:0}
.ctl-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.ctl-h small{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--mute)}
.ctl-h b{font-size:30px;font-weight:900;letter-spacing:-.02em}
.ctl-h em{font-style:normal;font-size:13px;color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#c9d3ec;font:700 15px Outfit,sans-serif;cursor:pointer;transition:border-color .15s,background .15s}
.chips button:hover{border-color:rgba(255,255,255,.25);color:#fff}
.chips button.on{border-color:var(--sun);background:rgba(255,201,40,.08);color:#fff}
.chips button em{font-style:normal;font-size:11px;font-weight:800;padding:2px 7px;border-radius:6px;background:rgba(47,107,255,.2);color:var(--sky)}
.chips.has-img button{padding:8px 14px 8px 8px}
.chips.has-img img{width:34px;height:34px;border-radius:8px;object-fit:contain}
.opts{grid-template-columns:repeat(var(--n,3),1fr)}
.ladder2 div{width:calc(90% / var(--n,10))}
.ladder2 div{transform:translateY(calc(var(--i) * -12px))}
.tr .trk{text-decoration:none}
.tr .trk:hover{color:#fff}
@media(max-width:1000px){.tr .trk{display:none}}
@media(max-width:600px){
 .tiers{grid-template-columns:repeat(5,1fr)}
 .opts{grid-template-columns:1fr 1fr}
 .ctl-h b{font-size:24px}
 .chips button{padding:10px 13px;font-size:14px}
 .why .perks{grid-template-columns:1fr}
 .pk-portrait button{width:56px;height:66px}
}
.ladder2.flat{align-items:center;height:auto}.ladder2.flat img{border-radius:14px}
.roles>small+div+small{margin-top:20px}
.strip-img{margin-top:44px}.strip-img img{display:block;width:100%;max-width:1040px;margin:0 auto;border-radius:22px;box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.tabs button{scroll-margin-top:96px}

/* Phone: perks two by two, tighter */
@media(max-width:600px){
 .why{padding:20px 0 50px}
 .why .perks{grid-template-columns:1fr 1fr;gap:28px 18px;margin-top:30px}
 .why .pk{padding:0;border-left:0}
 .why .pk .art{height:90px}
 .why .pk svg.big{width:52px;height:52px}
 .why .pk .coin{font-size:40px}
 .why .pk h3{font-size:17px}.why .pk p{font-size:13px}
 .pk .art .feat-img{width:44px;height:44px;top:20px}.pk .art .feat-img.o2{left:30px;top:34px}.pk .art .feat-img.o3{left:60px;top:20px}
 .live{padding:10px 0 60px}
 .lo-games li:nth-child(n+4){display:none}
}

/* Checkout panel, GameBoost pattern */
.sum{padding:0;overflow:hidden}
.sum>*:not(.sum-h){margin-left:22px;margin-right:22px}
.sum-h{text-align:center;padding:20px 22px 16px}
.sum-h h3{font-size:20px;font-weight:800}.sum-h p{color:var(--mute);font-size:14px;margin-top:4px}
.sum .route{margin:0;padding:12px 22px;background:rgba(255,255,255,.04);border-bottom:0}
.ctime{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px;padding:12px 0;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:var(--mute);font-weight:600}
.ctime span{display:flex;align-items:center;gap:6px}.ctime b{color:#fff}.ctime svg{width:15px;height:15px;color:var(--sky)}
.sum .tot{display:flex;align-items:center;gap:10px;margin-top:0;margin-bottom:14px}
.tot .tl{font-size:16px;color:#c9d3ec;font-weight:600;margin-right:auto}
.cbk{font-size:12px;font-weight:800;padding:4px 9px;border-radius:8px;border:1px solid rgba(255,201,40,.45);background:rgba(255,201,40,.1);color:var(--sun);white-space:nowrap}
.sum .tot b#total{font-size:34px}
.sum .go{margin-bottom:22px}
.sum .demo{margin-bottom:18px}
.sum-tp{margin-top:12px}.sum-tp .tp{margin:0;width:100%;justify-content:center}

/* Boost types row */
.types{padding:20px 0 70px}
.types-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px;margin-top:34px}
.types-row a{display:flex;flex-direction:column;gap:6px}
.types-row img{width:84px;height:84px;object-fit:contain;margin-bottom:8px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5));transition:transform .2s}
.types-row a:hover img{transform:translateY(-3px)}
.types-row b{font-size:18px;font-weight:800}.types-row a:hover b{color:var(--sun)}
.types-row small{color:var(--mute);font-size:14px;line-height:1.5}

/* Four steps */
.flow{padding:30px 0 80px}
.flow-row{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;counter-reset:f}
.flow-row li{padding:0 26px;border-left:1px solid var(--line)}
.flow-row li:first-child{padding-left:0;border-left:0}
.flow-row span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--sun);color:#1d1500;font-weight:900;margin-bottom:16px}
.flow-row h3{font-size:19px;font-weight:800}.flow-row p{color:var(--mute);font-size:15px;line-height:1.55;margin-top:6px}

/* Price table */
.prices{padding:20px 0 90px}
.ptable{margin-top:30px;border-top:1px solid var(--line)}
.pr{display:grid;grid-template-columns:1fr 22px 1fr 120px 90px;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.pr .pt{display:flex;align-items:center;gap:12px;font-weight:700}
.pr img{width:38px;height:38px;object-fit:contain}
.pr svg{width:18px;height:18px;color:var(--mute)}
.pr b{font-size:18px;text-align:right;color:var(--sun)}.pr small{text-align:right;color:var(--mute);font-weight:600}
.final h2 .hl{color:var(--sun)}

@media(max-width:1000px){.flow-row{grid-template-columns:1fr 1fr;gap:34px 0}.flow-row li:nth-child(3){padding-left:0;border-left:0}}
@media(max-width:600px){
 .types-row{grid-template-columns:1fr 1fr;gap:22px 16px}.types-row img{width:60px;height:60px}.types-row b{font-size:16px}.types-row small{font-size:13px}
 .flow-row{grid-template-columns:1fr;gap:26px}.flow-row li{padding:0;border-left:0}
 .pr{grid-template-columns:1fr 16px 1fr auto;gap:8px}.pr small{display:none}.pr img{width:28px;height:28px}.pr .pt{gap:8px;font-size:14px}.pr b{font-size:15px}
 .final h2{font-size:34px}
}
.sum .go{width:auto;display:flex}
@media(min-width:601px){.pr{grid-template-columns:220px 30px 1fr 120px 90px}}
.tot .tl{white-space:nowrap}
/* Grid children default to min-width:auto, which let wide rows push the calculator past the phone screen. */
.calc>*{min-width:0}
.ctl-h{flex-wrap:wrap}

/* Long-form game copy: two editorial columns, a rule between sections, no cards. */
.g-about{display:grid;grid-template-columns:1fr 1fr;gap:10px 64px;padding:20px 0 60px}
.g-about .ga{padding:28px 0;border-top:1px solid var(--line)}
.g-about h2,.g-route h2{font-size:24px;font-weight:800;letter-spacing:-.01em;margin-bottom:12px}
.g-about p,.g-route p{color:#c4cce0;font-size:16px;line-height:1.65;margin-bottom:12px}
.g-about a,.g-route a{color:var(--sun);text-decoration:underline;text-underline-offset:3px}
.g-about ul{margin:0 0 12px 18px;color:#c4cce0;line-height:1.65}
.g-route{max-width:820px;padding:10px 0 40px}
/* Related links: plain lists in three columns. */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 48px;padding:34px 0 70px;border-top:1px solid var(--line)}
.related h2{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700;margin-bottom:12px}
.related nav{display:flex;flex-direction:column;gap:9px}
.related a{font-weight:600;color:#dfe5f3;width:fit-content}
.related a:hover{color:var(--sun)}
@media(max-width:800px){.g-about{grid-template-columns:1fr;gap:0}.related{grid-template-columns:1fr;gap:26px}}

/* Phones: short hero (the full text stays in the page for search), one-line breadcrumb, tabs that show they scroll. */
@media(max-width:600px){
 .lhero .lsub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .lhero .svc-points{display:none}
 .crumbs{flex-wrap:nowrap;white-space:nowrap;overflow:hidden;min-width:0}
 .crumbs>*{flex:none}
 .crumbs>a:nth-of-type(2),.crumbs>a:nth-of-type(2)+span{display:none}
 .crumbs>:last-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
 .tabs{flex-wrap:nowrap;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:28px}
}
.related{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
a.pr{color:inherit;transition:background .15s}
a.pr:hover{background:rgba(255,201,40,.05)}
a.pr:hover .pt{color:var(--sun)}

/* Route pages: the climbs either side and the way back to the game */
.g-near{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.g-route .g-near a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:10px;background:#141a2c;border:1px solid #232b44;color:#fff;font-weight:700;font-size:15px;text-decoration:none}
.g-route .g-near a:hover{border-color:var(--sun);color:var(--sun)}
/* Hero art fades out on its own instead of being cut at the bottom of the hero (that cut left a hard line) */
.lhero{overflow:visible;overflow-x:clip}
.lart{pointer-events:none;z-index:0}

/* Minimum order and the over-€2,000 rule, under the total */
.tnote{margin:-4px 0 12px;font-size:14px;line-height:1.45;color:#ffd98a}

/* Option badges readable at phone width */
.chips button em{font-size:13px}

/* Hero art shade: the dark shade now sits on the art itself, so it fades out with the art.
   Before, the shade stopped at the bottom of the hero while the art ran on, leaving a bright band and a line. */
.lhero::after{display:none}
.lart::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 20%,rgba(11,15,28,.55) 55%,rgba(11,15,28,.15))}

/* Custom services (gil, kinah, gold, camos, raids): GameBoost item and CoD Points pages.
   Pack tiles with the coin growing per pack, picture tiles for choices with art, -/+ stepper,
   and in the checkout one product picture with label/value rows. */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.packs button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:118px;padding:14px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#fff;font:inherit;cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.packs button:hover{border-color:rgba(255,255,255,.25)}
.packs button.on{border-color:var(--sun);background:rgba(255,201,40,.08)}
.packs img{width:var(--s);height:var(--s);object-fit:contain;margin-bottom:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.packs b{font-size:17px;font-weight:800}
.packs em{font-style:normal;font-size:15px;font-weight:700;color:var(--sun)}
.amt{display:flex;align-items:center;gap:12px;margin-top:14px;flex-wrap:wrap}
.amt span{font-size:15px;color:var(--mute)}
.amt input{width:150px;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;font:700 17px Outfit,sans-serif}
.amt input:focus{outline:none;border-color:var(--sun)}
.amt i{font-style:normal;font-weight:700;color:#c9d3ec}
.stp{display:flex;align-items:center;gap:12px}
.stp button{width:44px;height:44px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;font:800 22px Outfit,sans-serif;line-height:1;cursor:pointer}
.stp button:hover{border-color:var(--sun);color:var(--sun)}
.chips.has-img{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.chips.has-img button{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 14px;text-align:left}
.chips.has-img img{width:100%;height:58px;object-fit:contain;border-radius:8px}
.chips.has-img em{margin-top:auto}
.sum .route.prod{justify-content:flex-start;gap:16px}
.sum .route.prod img{width:72px;height:72px;object-fit:contain;border-radius:12px;flex:none}
.sum .route.prod div{text-align:left}
.sum .spec{display:flex;flex-direction:column;padding:6px 0 4px}
.sum .spec div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:15px}
.sum .spec span{color:var(--mute)}
.sum .spec b{font-weight:700;text-align:right}
.sum .spec .unit b{color:var(--sun)}
@media(max-width:600px){
  .packs{grid-template-columns:1fr 1fr}
  .packs button{min-height:104px}
  .chips.has-img{grid-template-columns:1fr 1fr}
}
/* Camo and other picture tiles: wide enough for "Multiplayer · from €55" on one line. Big totals wrap
   under the cashback badge instead of running into the card edge. */
.chips.has-img{grid-template-columns:repeat(auto-fill,minmax(172px,1fr))}
.chips.has-img em{white-space:nowrap}
.sum .tot{flex-wrap:wrap;row-gap:4px}
.sum .tot b#total{margin-left:auto}
/* Photos (raids, bosses) fill the tile; transparent art (camos, icons) stays whole. */
.chips.has-img img[src$=".jpg"],.chips.has-img img[src$=".jpeg"]{height:74px;object-fit:cover}
/* Rank pickers built as custom services (Warzone Ranked): the original compact emblem chips, not tiles. */
.chips.has-img.rank{display:flex;flex-wrap:wrap;gap:8px}
.chips.has-img.rank button{flex-direction:row;align-items:center;gap:10px;padding:8px 14px 8px 8px}
.chips.has-img.rank img,.chips.has-img.rank img[src$=".jpg"],.chips.has-img.rank img[src$=".webp"]{width:34px;height:34px;object-fit:contain}

/* Camo art is transparent .webp: show the whole weapon, never cropped. */
.chips.has-img:not(.rank) img[src$=".webp"]{height:70px;object-fit:contain}
/* Bot lobby sessions: price tiles (GameBoost CoD Points packs: amount, a short line, the price). */
.chips.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.chips.tiles button{flex-direction:column;align-items:flex-start;gap:4px;min-height:112px;padding:16px;text-align:left;color:#fff}
.chips.tiles b{font-size:19px;font-weight:800}
.chips.tiles small{font-size:14px;color:var(--mute);font-weight:600;line-height:1.35}
.chips.tiles em{margin-top:auto;padding:0;background:none;font-size:20px;font-weight:900;color:var(--sun)}
@media(max-width:600px){.chips.tiles{grid-template-columns:1fr 1fr}}

/* MW4 camos: the shared road to Divergence, then the three modes side by side with the final Mastery camo first.
   Our own layout (owner's pick, 2026-10-30), built from the page's chips, labels and yellow accent. Guns are our
   renders of the real camo finishes on one AR, muzzle right. */
.cm-tags{display:flex;gap:6px;flex-wrap:wrap}
.cm-tags span{font-size:12px;font-weight:800;letter-spacing:.08em;padding:4px 8px;border-radius:7px;background:rgba(47,107,255,.2);color:var(--sky)}
.cm-tags .fin{background:rgba(255,201,40,.14);color:var(--sun)}
.cm-more{margin:0;padding:18px 0 4px;border-top:1px solid rgba(255,255,255,.08);color:var(--mute);font-size:15px}
.cm-more b{color:#fff}
.cm-pre{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.cm-pre small{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--mute);margin-right:6px}
.cm-pre button,.cm-row,.cm-final{display:flex;align-items:center;gap:8px;border-radius:12px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#fff;font:700 15px Outfit,sans-serif;cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.cm-pre button{min-height:50px;padding:4px 14px 4px 6px}
.cm-pre img{width:60px;height:40px;object-fit:contain}
.cm-pre em,.cm-row em{font-style:normal;font-weight:800;color:var(--sun);font-size:14px}
.cm-pre button:hover,.cm-row:hover,.cm-final:hover{border-color:rgba(255,255,255,.25)}
.cm-pre button.on,.cm-row.on,.cm-final.on{border-color:var(--sun);background:rgba(255,201,40,.08)}
.cm-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cm-col h4{margin:0 0 10px;font-size:18px;font-weight:800}
.cm-final{flex-direction:column;align-items:stretch;width:100%;padding:12px 14px 14px;background:radial-gradient(90% 70% at 50% 45%,color-mix(in srgb,var(--glow) 20%,transparent),transparent 72%),rgba(255,255,255,.02)}
.cm-final .cm-tags{justify-content:space-between;align-items:center}
.cm-final .cm-tags em{font-style:normal;font-weight:900;color:var(--sun);font-size:17px}
.cm-final img{width:100%;height:130px;object-fit:contain}
.cm-final b{font-size:19px}
.cm-row{width:100%;margin-top:8px;padding:6px 12px 6px 6px}
.cm-row img{width:84px;height:50px;object-fit:contain;flex:none}
.cm-row small{display:block;color:var(--mute);font-size:13px;font-weight:600}
.cm-row em{margin-left:auto}
@media(max-width:600px){
  .cm-cols{grid-template-columns:1fr}
  .cm-pre small{width:100%}
  .cm-pre button{flex:1 1 calc(50% - 4px)}
}

/* Checkout panel extras, kept calm (owner, 30 Oct): the "go one more" nudge (BoostRoyal) and one refund line. */
.gmore{display:block;box-sizing:border-box;width:calc(100% - 44px);min-height:44px;margin:4px 0 10px;padding:10px 14px;border-radius:12px;border:1px dashed rgba(255,201,40,.45);background:rgba(255,201,40,.06);color:#fff;font:600 14px Outfit,sans-serif;cursor:pointer;text-align:left}
.gmore:hover{border-style:solid}
.gmore b{color:var(--sun)}
.gexit input{flex:1;min-width:0;min-height:44px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;font:600 15px Outfit,sans-serif}
.gexit input:focus{outline:none;border-color:var(--sun)}
.gexit{position:fixed;top:84px;right:20px;z-index:60;width:340px;padding:18px 18px 16px;border-radius:16px;background:#111a33;border:1px solid rgba(255,255,255,.14);box-shadow:0 24px 60px rgba(0,0,0,.55);animation:gexIn .25s ease}
.gexit b{font-size:18px}
.gexit p{margin:6px 0 12px;color:var(--mute);font-size:15px}
.gexit form{display:flex;gap:8px}
.gexit .x{position:absolute;top:8px;right:8px;width:36px;height:36px;border:0;background:none;color:var(--mute);font-size:22px;cursor:pointer}
@keyframes gexIn{from{opacity:0;transform:translateY(-8px)}}
/* Pros for this game and recently finished orders: open lists with hairlines, no cards. */
.proof{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-top:30px;padding-bottom:30px}
.proof>div:only-child{grid-column:1/-1}
.plist a,.rlist div{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);color:#fff;text-decoration:none}
.plist img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.plist b,.rlist b{display:block;font-size:16px}
.plist small,.rlist small{display:block;color:var(--mute);font-size:14px}
.plist i{margin-left:auto;font-style:normal;font-size:13px;font-weight:800;color:#5ee6a0}
.rlist div{flex-direction:column;align-items:flex-start;gap:2px}
@media(max-width:800px){.proof{grid-template-columns:1fr;gap:20px}.gexit{display:none}}
.gfx{margin:-4px 22px 6px;text-align:right;font-size:13px;color:var(--mute)}

/* Phones (review 30 Oct): rank names readable (were 11px grey), and the link lists under each game page as
   44px tap rows with hairlines instead of 20px text links. */
.tiers button{font-size:13px;line-height:1.15;color:#a3aec8}
@media(max-width:800px){
  .related nav{gap:0}
  .related a{display:flex;align-items:center;width:auto;min-height:44px;border-bottom:1px solid rgba(255,255,255,.07)}
}

.gsafe{display:flex;align-items:center;justify-content:center;gap:8px;margin:-8px 0 20px;font-size:14px;color:#c9d3ec}
.gsafe .i{width:16px;height:16px;color:var(--sun);flex:none}
/* First-order discount line under the reassurance line (GameBoost "first order" note in the checkout panel) */
.gsafe+.gfirst{margin-top:-14px}.gfirst b{color:var(--sun)}
/* Long breadcrumb (service and route pages) ends in an ellipsis on one phone line. */
@media(max-width:600px){.crumbs>.cl{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}}

/* Hero art as a sized picture from the build (fast, sharp): fills the art box like the old background did.
   Portrait art (Valorant, Mobile Legends) keeps its whole figure, placed by the game's own position. */
.lart picture,.lart img{position:absolute;inset:0;width:100%;height:100%}
.lart img{object-fit:cover;object-position:var(--hp,70% 20%)}
.lart.portrait img{object-fit:contain;height:105%}

/* ---------- Deep test fixes, design (30 Oct): readable calculator text, one "on" colour, nothing cut off ---------- */
/* Text floor: 13px for labels and chips, 14px for the mode hints (owner rule: never under 13px except uppercase labels). */
.sel span,.adds em,.cbk,.mbar small,.pk-n,.pk-square button.more,.pk-portrait button.more{font-size:13px}
.mode button small{font-size:14px;color:#c3cce2}
/* Always-on add-ons use the same blue "on" switch as paid ones; FREE chips and the roles "free" tag in yellow, not green
   (green is only for online and success). */
.adds input:disabled+.sw{background:var(--blue)}
.adds input:disabled+.sw::after{left:19px}
.adds em.free{background:rgba(255,201,40,.14);color:var(--sun)}
.roles small em{color:var(--sun);text-transform:uppercase}
/* A tier you can't pick still reads as a name (was #313747, almost invisible); the emblem stays dimmed. */
.tiers button:disabled{opacity:1;color:rgba(255,255,255,.45)}
.tiers button:disabled img{opacity:.35}
/* Tap targets: division buttons, option chips, role chips and range sliders at least 44px. */
.divs button,.chips button,.pk-icon button{min-height:44px}
input[type=range]{height:44px}
@media(max-width:600px){
  /* Full hero intro on phones (was cut to two lines with no way to read the rest). */
  .lhero .lsub{display:block;-webkit-line-clamp:unset;overflow:visible}
  /* Option selects: two per row while both fit, a long one (Role Queue: Damage, Moonton account) takes the full row. */
  .opts{display:flex;flex-wrap:wrap}
  .opts .sel{flex:1 1 auto;min-width:calc(50% - 7px)}
  .opts .sel:first-child{flex-basis:100%}
}
@media(max-width:380px){.opts .sel{flex-basis:100%}}

/* Wide screens (owner 2026-10-31, 1440p 27"): the hero art stays next to the content instead of drifting to the
   far right edge. Its right edge sits 186px past the content's right edge, as it does at 1440px wide (the content is
   1240px, centred). Where it no longer reaches the screen edge, it fades out on the right too, so it never ends in a line. */
@media(min-width:601px){.lart{right:max(-6%,calc(50% - 806px))}}
@media(min-width:1500px){.lart{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 45%,#000 80%,transparent 100%),linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(90deg,transparent 0%,#000 45%,#000 80%,transparent 100%),linear-gradient(180deg,#000 55%,transparent)}}