/* /8ball-pool-game-developer — AISHTMLNEWDESIGN-463
Page-owned styles. EVERY selector is scoped to #page-8ball-pool-game-developer or a
bpd- prefixed class: this sheet must never style body, a bare
element, #ais-header or #ais-footer. The document reset
(html,body{margin:0}) is owned by the shared layout sheet.
Font is Inter; no body/UI text below 16px.
═══════════════════════════════════════════════════════════════════════════
VISUAL DIRECTION — "THE DIAMOND RAIL"
A pool table's rails carry inlaid diamond SIGHTS: the fixed reference marks
a serious player uses to turn a bank shot from a guess into a repeatable
angle. That is the whole system here, and it is the right register for a
business commissioning a build rather than a player looking for a game.
· SIGHT RAIL — the section-opening ornament: a hairline carrying three
inlaid diamonds. Static; drawn in CSS; never a divider
for its own sake, it always sits above the section's H2.
· BED — warm stone (#e8e5de). The slate bed under the cloth is
the page's ground, with DRESSED stone (#f2f0ea) for the
alternate bands. No white page anywhere.
· RAIL — mahogany rail stock (#33211a). Punctuation bands and the
button face on light ground; never the whole page.
· SIGHT IVORY — #ecdfc0, the inlay. The only warm light in the palette.
· CHALK — #1f5378, cue chalk. One cool signal, used at hairline
scale only: links, focus rings, the stripe band, the
sight fill. It never becomes a surface.
Markers are the game's own two groups: a SOLID disc for the 1-7 group
(Pre-Built Features) and a STRIPE disc for the 9-15 group (Features). That
is why those two lists are marked differently — it is a distinction the
subject already makes, not decoration.
Deliberately NOT the five neighbouring "game developer" pages:
· CALL SHEET (/hire-game-developer) — cool paper + slate + amber, ruled
rows and a roster. No amber here, no roster, no availability column.
· STUDIO BLUEPRINT (/hire-unity-game-developers) — near-white drawing
paper, ink navy plates, one electric blue, margin ORDINALS. No numerals
are used as a section device here and there is no drawing-sheet ground.
· FOUR HOMES (/ludo-king-game-developer) — parchment/ivory/plum with a
four-square quadrant rule and red/green/yellow/blue card top rails.
This page is monochrome-warm with a single cool signal; the section
mark is a three-diamond rail, not a quadrant, and no card has a
coloured top rail.
· HAND HISTORY (/poker-game-developers) — cold log paper, rust and
showdown green, a street rule with a two-digit token and tabular
gutter numerals. No tokens, no numerals, no rust.
· TOOLROOM SPECIMEN (/online-casino-game-software-developers) — graphite
iron ground, drafting sheet, gauge teal + kiln clay, corner
registration brackets, tick-mark gauge rules, static dot grid. Nothing
here is bracketed, ticked or dotted, and the ground is stone not iron.
Also avoided by instruction: corner bracket arms as a framing device, an
offset double-struck plate, index numerals as the section device, counting
stat bars, glass cards, aurora gradients, neon-on-black.
MOTION (rule 26): this sheet contains ZERO @keyframes and zero 'infinite'.
Every transition is a finite response to :hover, :focus-visible, :active or
a opening, and all of them are disabled under
prefers-reduced-motion. getAnimations() is empty at rest.
═══════════════════════════════════════════════════════════════════════════ */
#page-8ball-pool-game-developer{
/* ── palette ───────────────────────────────────────────────────────────── */
--bed:#e8e5de; /* warm stone — the slate bed, the page ground */
--bed-2:#f2f0ea; /* dressed stone — alternate band */
--paper:#fbfaf6; /* card face */
--line:#d3cec3; /* hairline on stone */
--line-2:#bdb6a8; /* stronger hairline */
--rail:#33211a; /* mahogany rail stock */
--rail-2:#3d281f; /* raised rail */
--rail-3:#241611; /* rail in shadow */
--rail-line:rgba(236,223,192,.20);
--sight:#ecdfc0; /* the ivory inlay */
--chalk:#1f5378; /* cue chalk — the one cool signal */
--chalk-deep:#163d59;
--ink:#1a1512; /* headings on stone */
--body:#3a332c; /* body on stone 9.9:1 on --bed */
--on-rail:#e9e2d5; /* body on rail 11.9:1 on --rail */
--on-rail-2:#cdbfae; /* secondary on rail 8.5:1 on --rail */
--wrap:1200px;
--tight:880px;
--gut:clamp(20px,4vw,40px);
--sec:clamp(58px,7vw,100px);
font-family:"Inter",system-ui,sans-serif;
font-size:16px;
line-height:1.65;
color:var(--body);
background:var(--bed);
-webkit-font-smoothing:antialiased;
}
/* The shared layout sheet owns html,body. It does NOT set a global box model,
so the page sets its own — scoped, never on the bare universal selector.
Without it every width:100% + horizontal padding wrapper overflows a 390px
viewport. */
#page-8ball-pool-game-developer,
#page-8ball-pool-game-developer *,
#page-8ball-pool-game-developer *::before,
#page-8ball-pool-game-developer *::after{box-sizing:border-box;}
/* Element baselines. Each is scoped with the wrapper id INDIVIDUALLY —
`#page-x h1,h2,h3{...}` would apply the h2/h3 halves site-wide and, on page
459, collapsed every margin on the page to 0. Margins are restated per
component below; nothing here zeroes vertical rhythm globally. */
#page-8ball-pool-game-developer h1,
#page-8ball-pool-game-developer h2,
#page-8ball-pool-game-developer h3,
#page-8ball-pool-game-developer h4,
#page-8ball-pool-game-developer h5{
margin:0 0 14px;
color:var(--ink);
font-weight:800;
letter-spacing:-.014em;
line-height:1.24;
}
#page-8ball-pool-game-developer p{margin:0 0 16px;}
#page-8ball-pool-game-developer ul{margin:0;padding:0;list-style:none;}
#page-8ball-pool-game-developer figure{margin:0;}
#page-8ball-pool-game-developer blockquote{margin:0;}
#page-8ball-pool-game-developer img{max-width:100%;display:block;}
/* Anchors. The inline baseline block in the page head is `#page-x a{color:inherit}`
— id + element, (1,0,1) — which beats any class-only rule, so every anchor rule
here is qualified with the wrapper id too and wins on the later-rule tie-break
only where its specificity is genuinely equal or higher. */
#page-8ball-pool-game-developer a.bpd-link{
color:var(--chalk);
text-decoration:underline;
text-underline-offset:3px;
text-decoration-thickness:1px;
text-decoration-color:rgba(31,83,120,.45);
}
#page-8ball-pool-game-developer a.bpd-link:hover,
#page-8ball-pool-game-developer a.bpd-link:focus-visible{
color:var(--chalk-deep);
text-decoration-color:currentColor;
}
#page-8ball-pool-game-developer a.bpd-link--rail{color:var(--sight);text-decoration-color:rgba(236,223,192,.5);}
#page-8ball-pool-game-developer a.bpd-link--rail:hover,
#page-8ball-pool-game-developer a.bpd-link--rail:focus-visible{color:#fff8e9;text-decoration-color:currentColor;}
#page-8ball-pool-game-developer a:focus-visible,
#page-8ball-pool-game-developer button:focus-visible,
#page-8ball-pool-game-developer summary:focus-visible{
outline:3px solid var(--chalk);
outline-offset:3px;
border-radius:2px;
}
#page-8ball-pool-game-developer .bpd-band--rail a:focus-visible,
#page-8ball-pool-game-developer .bpd-band--rail button:focus-visible,
#page-8ball-pool-game-developer .bpd-hero a:focus-visible,
#page-8ball-pool-game-developer .bpd-hero button:focus-visible{outline-color:var(--sight);}
/* ══ shells ════════════════════════════════════════════════════════════════ */
#page-8ball-pool-game-developer .bpd-wrap{
width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
}
#page-8ball-pool-game-developer .bpd-wrap--tight{max-width:var(--tight);}
#page-8ball-pool-game-developer .bpd-band{padding:var(--sec) 0;}
#page-8ball-pool-game-developer .bpd-band--bed{background:var(--bed);}
#page-8ball-pool-game-developer .bpd-band--dress{background:var(--bed-2);}
#page-8ball-pool-game-developer .bpd-band--rail{
background:var(--rail);
color:var(--on-rail);
border-block:1px solid var(--rail-3);
}
/* ══ THE MOTIF — the sight rail ════════════════════════════════════════════
A hairline carrying three inlaid diamonds, exactly as the sights sit in a
table rail. Pure CSS, static, decorative-only (aria-hidden in the markup). */
#page-8ball-pool-game-developer .bpd-sights{
display:flex;align-items:center;gap:11px;
width:126px;height:14px;margin:0 0 22px;position:relative;
}
#page-8ball-pool-game-developer .bpd-sights::before{
content:"";position:absolute;left:0;right:0;top:50%;height:1px;
background:var(--line-2);
}
#page-8ball-pool-game-developer .bpd-sights i{
position:relative;width:10px;height:10px;flex:0 0 10px;
transform:rotate(45deg);
background:var(--bed-2);
border:1.5px solid var(--chalk);
}
#page-8ball-pool-game-developer .bpd-band--bed .bpd-sights i{background:var(--bed);}
#page-8ball-pool-game-developer .bpd-sights i:nth-child(2){background:var(--chalk);}
#page-8ball-pool-game-developer .bpd-sights--dark::before{background:var(--rail-line);}
#page-8ball-pool-game-developer .bpd-sights--dark i{background:transparent;border-color:var(--sight);}
#page-8ball-pool-game-developer .bpd-sights--dark i:nth-child(2){background:var(--sight);}
/* ══ type scale ════════════════════════════════════════════════════════════ */
#page-8ball-pool-game-developer .bpd-h2{
font-size:clamp(30px,3.5vw,44px);line-height:1.14;margin:0 0 18px;
max-width:22ch;
}
#page-8ball-pool-game-developer .bpd-h2--rail{color:#fdf8ee;max-width:24ch;}
#page-8ball-pool-game-developer .bpd-h3{font-size:clamp(19px,1.5vw,22px);letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px;}
#page-8ball-pool-game-developer .bpd-h4{font-size:clamp(24px,2.4vw,32px);margin:0 0 26px;}
#page-8ball-pool-game-developer .bpd-ch{font-size:19px;line-height:1.32;margin:0 0 8px;}
#page-8ball-pool-game-developer .bpd-ch--rail{color:#fdf8ee;}
#page-8ball-pool-game-developer .bpd-p{font-size:17px;margin:0 0 14px;}
#page-8ball-pool-game-developer .bpd-p:last-child{margin-bottom:0;}
#page-8ball-pool-game-developer .bpd-p--rail{color:var(--on-rail);}
#page-8ball-pool-game-developer .bpd-intro,
#page-8ball-pool-game-developer .bpd-outro{
font-size:18px;max-width:74ch;margin:0 0 34px;color:var(--body);
}
#page-8ball-pool-game-developer .bpd-outro{margin:34px 0 0;}
#page-8ball-pool-game-developer .bpd-lede{font-size:19px;max-width:60ch;margin:0 0 28px;}
/* ══ buttons ═══════════════════════════════════════════════════════════════ */
#page-8ball-pool-game-developer .bpd-btn{
display:inline-flex;align-items:center;justify-content:center;
min-height:52px;padding:14px 30px;
font:inherit;font-size:17px;font-weight:700;letter-spacing:.01em;
background:var(--rail);color:#f8f3e8;
border:1px solid var(--rail);border-radius:3px;
cursor:pointer;position:relative;
transition:background .16s ease,transform .12s ease,box-shadow .16s ease;
}
#page-8ball-pool-game-developer .bpd-btn::after{
/* the sight inlay, cut into the button's own rail */
content:"";position:absolute;right:14px;top:50%;
width:7px;height:7px;margin-top:-3.5px;
transform:rotate(45deg);background:var(--sight);opacity:.75;
}
#page-8ball-pool-game-developer .bpd-btn{padding-right:44px;}
#page-8ball-pool-game-developer .bpd-btn:hover{background:var(--rail-2);box-shadow:0 6px 18px rgba(51,33,26,.22);}
#page-8ball-pool-game-developer .bpd-btn:active{transform:translateY(1px);box-shadow:none;}
#page-8ball-pool-game-developer .bpd-btn--sight{
background:var(--sight);color:var(--rail);border-color:var(--sight);
}
#page-8ball-pool-game-developer .bpd-btn--sight::after{background:var(--rail);opacity:.6;}
#page-8ball-pool-game-developer .bpd-btn--sight:hover{background:#f7ecd4;box-shadow:0 6px 20px rgba(0,0,0,.28);}
/* ══ HERO — rule 24: full-bleed, static gradient, no image, centred column ══ */
#page-8ball-pool-game-developer .bpd-hero{
width:100%;
padding:clamp(66px,9vw,124px) var(--gut) clamp(58px,7vw,96px);
background:linear-gradient(168deg,var(--rail-2) 0%,var(--rail) 46%,var(--rail-3) 100%);
border-bottom:1px solid var(--rail-3);
}
#page-8ball-pool-game-developer .bpd-hero__in{max-width:900px;margin-inline:auto;}
#page-8ball-pool-game-developer .bpd-hero__h{
font-size:clamp(36px,5.2vw,64px);line-height:1.05;letter-spacing:-.022em;
color:#fdf7ea;margin:0 0 22px;
}
#page-8ball-pool-game-developer .bpd-hero__p{
font-size:clamp(17px,1.5vw,19px);line-height:1.62;
color:var(--on-rail);max-width:70ch;margin:0 0 26px;
}
#page-8ball-pool-game-developer .bpd-hero__trust{
display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px;
}
/* rule 39A — the chip paints a background, so it owns its foreground on a
selector no prose rule in this sheet can outrank:
`#id .bpd-hero__trust li.bpd-hero__chip` = (1,2,1) vs the page's
`#id p` = (1,0,1) and `#id .bpd-p` = (1,1,0). Measured, not assumed. */
#page-8ball-pool-game-developer .bpd-hero__trust li.bpd-hero__chip{
color:#fdf7ea;
background:rgba(236,223,192,.10);
border:1px solid var(--rail-line);
border-left:3px solid var(--sight);
padding:9px 15px;font-size:16px;font-weight:600;
}
#page-8ball-pool-game-developer .bpd-hero__terms{
font-size:16px;color:var(--on-rail-2);margin:0 0 30px;
}
/* ══ breadcrumb ════════════════════════════════════════════════════════════ */
#page-8ball-pool-game-developer .bpd-crumb{
background:var(--bed);border-bottom:1px solid var(--line);
}
#page-8ball-pool-game-developer .bpd-crumb__in{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
padding-block:15px;font-size:16px;
}
#page-8ball-pool-game-developer .bpd-crumb__back{display:inline-flex;padding:4px;border-radius:3px;}
#page-8ball-pool-game-developer .bpd-crumb__back img{width:16px;height:16px;}
#page-8ball-pool-game-developer a.bpd-crumb__link{color:var(--chalk);font-weight:600;}
#page-8ball-pool-game-developer a.bpd-crumb__link:hover{text-decoration:underline;text-underline-offset:3px;}
#page-8ball-pool-game-developer .bpd-crumb__now{color:var(--body);font-weight:600;}
/* ══ the break — opening statement band ════════════════════════════════════ */
#page-8ball-pool-game-developer .bpd-break__in{max-width:960px;}
#page-8ball-pool-game-developer .bpd-break .bpd-h2{max-width:24ch;}
/* ══ split — copy beside a rail-footed plate ═══════════════════════════════ */
#page-8ball-pool-game-developer .bpd-split{
display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
gap:clamp(28px,4vw,64px);align-items:start;
}
#page-8ball-pool-game-developer .bpd-claim{
font-size:20px;font-weight:700;color:var(--ink);line-height:1.35;
margin:0 0 20px;padding-left:18px;border-left:3px solid var(--chalk);
}
#page-8ball-pool-game-developer .bpd-plate{
background:var(--paper);border:1px solid var(--line);
padding:16px 16px 0;position:relative;
}
#page-8ball-pool-game-developer .bpd-plate__img{width:100%;height:auto;}
#page-8ball-pool-game-developer .bpd-plate__rail{
display:flex;align-items:center;justify-content:center;gap:26px;
height:34px;margin:16px -16px 0;background:var(--rail);
}
#page-8ball-pool-game-developer .bpd-plate__rail i{
width:9px;height:9px;transform:rotate(45deg);background:var(--sight);opacity:.85;
}
/* ══ THE RACK — nine capability balls; auto-fit gives a 5/4 rack at desktop ══ */
/* Cell borders, NOT a gap-over-coloured-container: 9 balls in an auto-fit grid
leave an empty slot in the last row, and a container-background divider paints
that slot as a solid grey block — a visible empty band. Per-cell borders leave
the vacancy as plain paper. Same reason on .bpd-solids and .bpd-bed. */
#page-8ball-pool-game-developer .bpd-rack{
display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
gap:0;background:var(--paper);
border-top:1px solid var(--line);border-left:1px solid var(--line);
}
#page-8ball-pool-game-developer .bpd-rack__ball{
background:var(--paper);padding:26px 20px 24px;text-align:center;
border-right:1px solid var(--line);border-bottom:1px solid var(--line);
display:flex;flex-direction:column;align-items:center;gap:14px;
transition:background .16s ease;
}
#page-8ball-pool-game-developer .bpd-rack__ball:hover{background:#fff;}
#page-8ball-pool-game-developer .bpd-rack__ico{width:56px;height:56px;}
#page-8ball-pool-game-developer .bpd-rack__ball .bpd-ch{margin:0;font-size:17px;}
/* ══ LEDGER — the stripe group (9-15) ══════════════════════════════════════ */
#page-8ball-pool-game-developer .bpd-ledger{
display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
column-gap:clamp(28px,4vw,56px);
}
#page-8ball-pool-game-developer .bpd-ledger__row{
display:grid;grid-template-columns:34px minmax(0,1fr);gap:18px;
padding:22px 0;border-top:1px solid var(--line);
}
#page-8ball-pool-game-developer .bpd-stripe{
width:26px;height:26px;border-radius:50%;margin-top:2px;
border:1px solid var(--line-2);
background:linear-gradient(180deg,var(--paper) 0 31%,var(--chalk) 31% 69%,var(--paper) 69% 100%);
}
#page-8ball-pool-game-developer .bpd-ledger__body .bpd-p:last-child{margin-bottom:0;}
/* ══ UNITY band ════════════════════════════════════════════════════════════ */
#page-8ball-pool-game-developer .bpd-unity{
display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
gap:clamp(28px,4vw,64px);align-items:center;
}
#page-8ball-pool-game-developer .bpd-unity__more{margin:0 0 24px;font-size:17px;}
#page-8ball-pool-game-developer .bpd-unity__fig{
border:1px solid var(--rail-line);padding:14px;background:rgba(236,223,192,.05);
}
#page-8ball-pool-game-developer .bpd-unity__img{width:100%;height:auto;}
/* ══ SOLIDS — the 1-7 group ════════════════════════════════════════════════ */
#page-8ball-pool-game-developer .bpd-solids{
display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:0;background:var(--paper);
border-top:1px solid var(--line);border-left:1px solid var(--line);
}
#page-8ball-pool-game-developer .bpd-solid{
background:var(--paper);padding:28px 26px;
border-right:1px solid var(--line);border-bottom:1px solid var(--line);
border-left:3px solid transparent;
transition:border-color .16s ease,background .16s ease;
}
#page-8ball-pool-game-developer .bpd-solid:hover{border-left-color:var(--rail);background:#fff;}
#page-8ball-pool-game-developer .bpd-solid__ball{
display:block;width:24px;height:24px;border-radius:50%;margin:0 0 16px;
background:radial-gradient(circle at 33% 27%,#7a5140 0 16%,var(--rail) 62%);
}
/* ══ CUT — ten cells, each sighted in its own top rail ═════════════════════ */
#page-8ball-pool-game-developer .bpd-cut{
display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:clamp(20px,2.4vw,30px);
}
#page-8ball-pool-game-developer .bpd-cut__cell{
background:var(--paper);border:1px solid var(--line);
padding:30px 24px 26px;position:relative;
transition:box-shadow .16s ease,transform .12s ease;
}
#page-8ball-pool-game-developer .bpd-cut__cell::before{
content:"";position:absolute;left:24px;top:-6px;
width:11px;height:11px;transform:rotate(45deg);
background:var(--bed);border:1.5px solid var(--chalk);
}
#page-8ball-pool-game-developer .bpd-cut__cell:hover{
box-shadow:0 10px 26px rgba(51,33,26,.10);transform:translateY(-2px);
}
/* ══ WHY — the record's six assurances, marked with its own check icon ═════ */
#page-8ball-pool-game-developer .bpd-why{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
gap:clamp(28px,4vw,64px);align-items:start;
}
#page-8ball-pool-game-developer .bpd-checks{
border-top:1px solid var(--line);
}
#page-8ball-pool-game-developer .bpd-checks__row{
display:grid;grid-template-columns:24px minmax(0,1fr);gap:16px;
padding:18px 0;border-bottom:1px solid var(--line);align-items:start;
}
#page-8ball-pool-game-developer .bpd-checks__ico{width:24px;height:24px;margin-top:3px;}
/* ══ BOOST — two statements on the cushion line ════════════════════════════ */
#page-8ball-pool-game-developer .bpd-boost{
border-left:2px solid var(--line-2);padding-left:clamp(20px,3vw,34px);
}
#page-8ball-pool-game-developer .bpd-boost__row{
display:grid;grid-template-columns:22px minmax(0,1fr);gap:16px;
align-items:start;padding:16px 0;
}
#page-8ball-pool-game-developer .bpd-boost__ico{width:22px;height:22px;margin-top:5px;}
#page-8ball-pool-game-developer .bpd-boost .bpd-p{font-size:18px;}
/* ══ BED — six cells divided by hairlines, no card chrome ══════════════════ */
#page-8ball-pool-game-developer .bpd-bed{
display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
gap:0;background:transparent;
border-top:1px solid var(--rail-line);border-left:1px solid var(--rail-line);
}
#page-8ball-pool-game-developer .bpd-bed__cell{
background:var(--rail);padding:30px 26px;
border-right:1px solid var(--rail-line);border-bottom:1px solid var(--rail-line);
transition:background .16s ease;
}
#page-8ball-pool-game-developer .bpd-bed__cell:hover{background:var(--rail-2);}
/* ══ PARTNER — the closing statement ══════════════════════════════════════ */
#page-8ball-pool-game-developer .bpd-partner__p{
font-size:clamp(17px,1.6vw,20px);line-height:1.72;margin:0;color:var(--body);
}
/* ══ FAQ ══════════════════════════════════════════════════════════════════ */
#page-8ball-pool-game-developer .bpd-faqlist{border-top:1px solid var(--line-2);}
#page-8ball-pool-game-developer .bpd-q{border-bottom:1px solid var(--line);}
#page-8ball-pool-game-developer .bpd-q__s{
display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
padding:22px 2px;cursor:pointer;list-style:none;
}
#page-8ball-pool-game-developer .bpd-q__s::-webkit-details-marker{display:none;}
#page-8ball-pool-game-developer .bpd-q__t{
font-size:18px;font-weight:700;color:var(--ink);line-height:1.4;
}
#page-8ball-pool-game-developer .bpd-q__m{
flex:0 0 14px;width:14px;height:14px;margin-top:5px;
transform:rotate(45deg);
background:var(--bed);border:1.5px solid var(--chalk);
transition:background .18s ease,transform .18s ease;
}
#page-8ball-pool-game-developer .bpd-q[open] .bpd-q__m{
background:var(--chalk);transform:rotate(225deg);
}
#page-8ball-pool-game-developer .bpd-q__s:hover .bpd-q__t{color:var(--chalk-deep);}
#page-8ball-pool-game-developer .bpd-q__a{padding:0 44px 24px 2px;}
/* ══ STORIES ══════════════════════════════════════════════════════════════ */
#page-8ball-pool-game-developer .bpd-stories{
display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:clamp(22px,3vw,36px);
}
#page-8ball-pool-game-developer .bpd-vid{
display:block;position:relative;width:100%;padding:0;margin:0 0 18px;
border:1px solid var(--line);background:var(--paper);cursor:pointer;
transition:box-shadow .16s ease;
}
#page-8ball-pool-game-developer .bpd-vid img{width:100%;height:auto;}
#page-8ball-pool-game-developer .bpd-vid__p{
position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;
border-radius:50%;background:rgba(51,33,26,.86);border:2px solid var(--sight);
transition:background .16s ease,transform .12s ease;
}
#page-8ball-pool-game-developer .bpd-vid__p::after{
content:"";position:absolute;left:23px;top:18px;
border-style:solid;border-width:12px 0 12px 18px;
border-color:transparent transparent transparent var(--sight);
}
#page-8ball-pool-game-developer .bpd-vid:hover .bpd-vid__p{background:var(--rail);transform:scale(1.06);}
#page-8ball-pool-game-developer .bpd-vid:hover{box-shadow:0 10px 26px rgba(51,33,26,.14);}
#page-8ball-pool-game-developer .bpd-story__frame{
width:100%;aspect-ratio:4/3;border:1px solid var(--line);display:block;margin:0 0 18px;
}
#page-8ball-pool-game-developer .bpd-story__q{
border-left:3px solid var(--line-2);padding-left:18px;
}
#page-8ball-pool-game-developer .bpd-more-wrap{margin:30px 0 0;}
#page-8ball-pool-game-developer a.bpd-more{
display:inline-block;font-size:17px;font-weight:700;color:var(--chalk);
border-bottom:2px solid var(--chalk);padding-bottom:2px;
transition:color .16s ease,border-color .16s ease;
}
#page-8ball-pool-game-developer a.bpd-more:hover{color:var(--chalk-deep);border-color:var(--chalk-deep);}
/* ══ AREA WE SERVE ════════════════════════════════════════════════════════ */
#page-8ball-pool-game-developer .bpd-area{
display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:clamp(18px,2.4vw,28px);
}
#page-8ball-pool-game-developer .bpd-area__card{
background:var(--paper);border:1px solid var(--line);
border-top:3px solid var(--rail);padding:26px 22px;
}
#page-8ball-pool-game-developer .bpd-area__pin{width:14px;height:20px;margin:0 0 14px;}
#page-8ball-pool-game-developer a.bpd-area__tel{
display:inline-block;font-size:17px;font-weight:700;color:var(--chalk);margin:0 0 10px;
}
#page-8ball-pool-game-developer a.bpd-area__tel:hover{color:var(--chalk-deep);text-decoration:underline;text-underline-offset:3px;}
#page-8ball-pool-game-developer .bpd-area__addr{font-size:16px;margin:0;color:var(--body);}
/* ══ CTA MODAL ════════════════════════════════════════════════════════════ */
#page-8ball-pool-game-developer .bpd-modal{
display:none;position:fixed;inset:0;z-index:9999;
background:rgba(26,21,18,.72);
padding: 100px 20px 20px 20px;overflow-y:auto;
}
#page-8ball-pool-game-developer .bpd-modal.is-open{display:flex;align-items:flex-start;justify-content:center;}
#page-8ball-pool-game-developer .bpd-modal__box{
position:relative;width:100%;max-width:660px;margin:auto;
background:var(--paper);border:1px solid var(--line-2);
border-top:4px solid var(--rail);
box-shadow:0 30px 80px rgba(0,0,0,.42);
padding:52px 16px 16px;
}
#page-8ball-pool-game-developer .bpd-modal__x{
position:absolute;top:10px;right:10px;
width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
background:var(--rail);color:var(--sight);
border:1px solid var(--rail);border-radius:3px;cursor:pointer;
transition:background .16s ease;
}
#page-8ball-pool-game-developer .bpd-modal__x:hover{background:var(--rail-2);}
#page-8ball-pool-game-developer .bpd-modal iframe{
width:100%;min-height:860px;border:0;display:block;background:var(--paper);
}
/* ══ RESPONSIVE ═══════════════════════════════════════════════════════════ */
@media (max-width:1000px){
#page-8ball-pool-game-developer .bpd-split,
#page-8ball-pool-game-developer .bpd-unity,
#page-8ball-pool-game-developer .bpd-why{grid-template-columns:minmax(0,1fr);}
#page-8ball-pool-game-developer .bpd-unity__fig{order:-1;}
}
@media (max-width:720px){
#page-8ball-pool-game-developer .bpd-h2{max-width:none;}
#page-8ball-pool-game-developer .bpd-btn{width:100%;}
#page-8ball-pool-game-developer .bpd-hero__trust li.bpd-hero__chip{width:100%;}
#page-8ball-pool-game-developer .bpd-q__a{padding-right:2px;}
#page-8ball-pool-game-developer .bpd-modal__box{padding:52px 10px 10px;}
}
@media (max-width:460px){
#page-8ball-pool-game-developer .bpd-rack{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}
#page-8ball-pool-game-developer .bpd-solid,
#page-8ball-pool-game-developer .bpd-bed__cell,
#page-8ball-pool-game-developer .bpd-cut__cell{padding-inline:18px;}
}
/* ══ MOTION — rule 26. No @keyframes exist in this sheet; the transitions
above are finite responses to hover / focus-visible / active / details
open. This override removes even those for readers who ask. ══ */
@media (prefers-reduced-motion:reduce){
#page-8ball-pool-game-developer *,
#page-8ball-pool-game-developer *::before,
#page-8ball-pool-game-developer *::after{
animation:none !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}