/* Hallmark · genre: editorial-utilitarian · macrostructure: shared shell + per-profile body · design-system: design.md · designed-as-app
 * profile: P3 · hero: shared · paper: #15140f · accent: #ccb05a
 * ink and muted computed from the brand hue, not the rotation
 */
*,*::before,*::after{box-sizing:border-box}
:root{--bg:#15140f;--surf:#24221b;--acc:#ccb05a;--accl:#ccb05a;--accd:#927e40;--ink:#f3f2ec;--muted:#a9a495;
--r:22px;--gridmin:132px;--w:1180px;--gut:20px;
--line:rgba(255,255,255,.14)}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);
font-family:'Noto Sans Thai',system-ui,sans-serif;line-height:1.75;
/* clip, not hidden: hidden makes body a scroll container, which puts any sticky descendant
   at its mercy - and two components on P1 are sticky. clip contains the overflow without
   creating the container. */
overflow-x:clip}
h1,h2,h3,h4{font-family:'Kanit',system-ui,sans-serif;font-weight:600;line-height:1.35;
margin:0 0 .6em}
h1{font-size:clamp(1.5rem,4.4vw,2.4rem)}
h2{font-size:clamp(1.2rem,3vw,1.65rem);margin-top:0}
h3{font-size:clamp(1.02rem,2.2vw,1.2rem)}
p,ul,ol,table{margin:0 0 1.1em}
a{color:var(--accl)}
/* 12.2.10 one width per section: text, tables and grids share --w */
.container{width:100%;max-width:var(--w);margin-inline:auto;padding-inline:var(--gut)}
/* ---- age bar ---- */
.ageline{background:#000;color:#fff;font-size:.8rem;text-align:center;padding:.45rem 1rem}
/* ---- header ---- */
header{position:sticky;top:0;z-index:40;background:var(--surf);
border-bottom:1px solid rgba(255,255,255,.08)}
.mast{display:flex;align-items:center;gap:1rem;min-height:60px}
.sitemark{font-family:'Kanit',sans-serif;font-weight:700;font-size:1.15rem;color:var(--accl);
text-decoration:none;white-space:nowrap}
/* header only: as a bare `nav` selector this also hit P1's footer columns, which are
   <nav class="gfcol">, and an auto inline-start margin makes a grid item shrink to content
   and sit flush-end instead of stretching - two footer columns 189px wide in a 335px
   single-column grid while their div siblings filled it. */
header nav{margin-inline-start:auto}
nav ul{list-style:none;display:flex;gap:.35rem;margin:0;padding:0;flex-wrap:wrap}
nav a{display:flex;align-items:center;min-height:44px;padding:0 .6rem;border-radius:var(--r);
color:var(--ink);text-decoration:none;font-size:.86rem}
nav a[aria-current=page]{background:var(--acc);color:var(--bg);font-weight:600}
.navlist{display:none}
.go{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
padding:0 1.15rem;border-radius:var(--r);text-decoration:none;
font-family:'Kanit',system-ui,sans-serif;font-weight:600;font-size:15px;
border:1px solid transparent;white-space:nowrap;
transition:transform .12s ease,filter .12s ease}
.go:hover{text-decoration:none;filter:brightness(1.09);transform:translateY(-1px)}
.go-one{background:linear-gradient(170deg,var(--acc),var(--accd));color:#11151c}
.go-two{border-color:var(--acc);color:var(--accl)}
/* hero pair, as the core builds render it: gradient primary + GHOST secondary. The secondary
   reads as a dark button on a dark page because it is translucent over the page, not because it
   is painted a fixed dark; painting it fixed breaks on a light-accent brand. */
.go-main{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.03)}
.go-big{font-size:17px;padding:15px 30px;min-height:52px}
/* login sits beside register in the header as one unit, so the flex bar treats the pair as a
   single item and the hamburger keeps its place. Both go to the same tracker: the operator
   serves login and registration from one entry point. */
.sitemark img{max-height:38px;width:auto;height:auto;display:block}
.joinblock{text-align:center;border-radius:calc(var(--r) + 8px);padding:2.4rem 1.4rem;
background:radial-gradient(120% 150% at 50% 0%,rgba(255,255,255,.06) 0%,transparent 66%),var(--surf);
border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden}
.joinblock::before{content:'';position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 140% at 50% 0%,var(--acc) 0%,transparent 62%);opacity:.20}
.joinblock>*{position:relative}
.joinblock h2{margin:0 0 .5em}
.joinblock h2 .emph{color:var(--accl)}
.joinblock p{margin:0 auto 1.4em;max-width:52ch;color:var(--muted)}
.joinblock .go{border-radius:999px;box-shadow:0 0 26px -8px var(--acc)}
.focusrail{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.focusblk{background:var(--surf);border:1px solid rgba(255,255,255,.09);
border-radius:var(--r);padding:.9rem 1rem;border-inline-start:3px solid var(--acc)}
.focusblk:hover{border-color:var(--acc)}
.focusblk strong{display:block;font-family:'Kanit',system-ui,sans-serif;margin-bottom:.3rem}
.focusblk .readon{display:inline-flex;align-items:center;min-height:44px;margin-top:.35rem;
color:var(--accl);text-decoration:none;font-size:.86rem}
.focusblk .readon strong{font-weight:500}
.focusblk .readon::after{content:'→';margin-inline-start:.35rem}
.focusblk .readon:hover{text-decoration:underline}
.focusblk span{display:block;color:var(--muted);font-size:.9rem;margin-top:.25rem}
.deals{display:grid;gap:.7rem;margin-bottom:1.1em}
.deals img{width:100%;height:auto;border-radius:var(--r);display:block}
.mastgo{display:flex;gap:.45rem;align-items:center;flex:0 0 auto}
.go-main:hover{border-color:var(--acc)}
.mastgo .go{padding:0 .85rem;white-space:nowrap}
/* ---- hero: exactly two CTAs (12.2.1) ---- */
.masthead{padding:2.6rem 0 2rem;text-align:center}
/* a spoke opens plainly: title, then one lede paragraph. No hero, no CTA pair, no marquee. */
.pagehead{padding:1.9rem 0 .5rem}
.pagehead h1{margin-bottom:.45em}
.pagehead .standfirst{margin:0}
.masthead p{color:var(--muted);max-width:62ch;margin-inline:auto;}
.mastheadgo{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;
justify-content:center;}
/* ---- sections ---- */
section.seg{padding:1.9rem 0;border-top:1px solid rgba(255,255,255,.07)}
.item{background:var(--surf);border:1px solid rgba(255,255,255,.09);border-radius:var(--r);
padding:1.05rem}
.listrail{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(var(--gridmin),1fr))}
/* The showcase rows use FIXED column counts, not auto-fit. auto-fit sized cells to the viewport
   and left an orphan on its own line whenever the count did not divide: six studio marks rendered
   as five plus one, and six game tiles did the same. The roster is 6 and the tile slice is 6, so
   3 and 6 both divide cleanly at every breakpoint. */
.devrow{display:grid;gap:.7rem;grid-template-columns:repeat(3,1fr)}
/* the studio row slides too, on its own slower cadence so the two rows do not lock step */
.devrail{overflow:hidden;margin-bottom:1rem}
.devstrip{display:flex;gap:.7rem;width:max-content;animation:slideleft 56s linear infinite}
.devrail:hover .devstrip,.devrail:focus-within .devstrip{animation-play-state:paused}
.devstrip .dev{flex:0 0 150px}
@media(min-width:700px){.devstrip .dev{flex:0 0 178px}}
@media(prefers-reduced-motion:reduce){
  .devrail{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .devstrip{animation:none}
}
/* A slider, not a wrapping grid: six tiles wrapped to 5+1 on a desktop and the orphan looked
   broken. Scroll-snap keeps the cards aligned as the reader swipes, and it degrades to a plain
   overflow scroll where scroll-snap is unsupported. */
/* Auto-slides leftward. The tile set is duplicated in the markup and the track travels exactly
   -50%, so the loop closes on itself with no jump. Hover pauses it so a reader can actually look
   at a card, and prefers-reduced-motion turns it back into a plain scrollable row -- an animation
   a reader cannot stop is an accessibility problem, not a feature. */
.gamerail{overflow:hidden;padding-bottom:.6rem;margin-bottom:1.1em}
.gamestrip{display:flex;gap:.85rem;width:max-content;animation:slideleft 42s linear infinite}
.gamerail:hover .gamestrip,.gamerail:focus-within .gamestrip{animation-play-state:paused}
.gamestrip .itemtile{flex:0 0 168px}
@keyframes slideleft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(min-width:700px){.gamestrip .itemtile{flex:0 0 196px}}
@media(prefers-reduced-motion:reduce){
  .gamerail{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .gamestrip{animation:none}
}
@media(min-width:700px){
  .devrow{grid-template-columns:repeat(6,1fr)}

}

/* A tile is its artwork. The art was rendered at its natural size inside an oversized card, so a
   240px poster floated in the middle of dead space with the caption stranded below it. The image
   now fills the tile width at the art's own 5:7 portrait ratio, and every tile is the same height. */
.itemtile{margin:0;background:var(--surf);border:1px solid rgba(255,255,255,.09);
border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.itemtile img{width:100%;height:auto;aspect-ratio:5/7;object-fit:cover;display:block}
.itemtile figcaption{padding:.55rem .6rem;font-size:.8rem;line-height:1.4;display:grid;gap:.1rem}
.itemtile .itemdev{color:var(--ink);font-weight:600}
.itemtile .itemname{color:var(--accl)}
.itemtile .itemcat{color:var(--muted);font-size:.74rem}
.listrail img{max-width:100%;height:auto;display:block;margin-inline:auto}
/* 12.2a.4 the plate is chosen per FILE from its own pixels, never fixed. The card is also
   sized to a wordmark's aspect ratio: studio marks run about 3.4:1, so max-width keeps a wide
   one inside its cell instead of overflowing or being scaled to nothing. */
.dev{border-radius:var(--r);padding:.5rem .7rem;display:flex;align-items:center;
justify-content:center;aspect-ratio:16/7;border:1px solid rgba(255,255,255,.09)}
.dev img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.badge-light{background:#f4f6fa}
.badge-dark{background:#10151f}
.dev img{max-height:42px;max-width:100%;width:auto;height:auto;object-fit:contain}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:start;padding:.55rem .6rem;border-bottom:1px solid rgba(255,255,255,.09)}
th{color:var(--accl);font-family:'Kanit',sans-serif;font-weight:600}
.itemwrap{overflow-x:auto}
details.qlist{border:1px solid rgba(255,255,255,.1);border-radius:var(--r);
padding:.7rem .9rem;margin-bottom:.55rem;background:var(--surf)}
details.qlist summary{cursor:pointer;font-family:'Kanit',sans-serif;font-weight:600;
min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:1rem;
list-style:none}
/* the open affordance. Without it the row gave the reader no sign it could be expanded, and the
   space on the right sat empty. A bare accent-coloured glyph, no circle and no plate: the ring
   drawn around it first read as a button chip rather than a marker. Open swaps the plus for a
   true minus sign (U+2212); rotating a plus 45 degrees yields an x, which reads "close".
   aria is untouched: <details>/<summary> already announces expanded/collapsed natively. */
details.qlist summary::-webkit-details-marker{display:none}
details.qlist summary::after{content:'+';flex:0 0 auto;width:30px;height:30px;
display:grid;place-items:center;color:var(--accl);
font-size:1.4rem;line-height:1;font-weight:400;opacity:.95}
details.qlist[open] summary::after{content:'−'}
details.qlist summary:hover::after{opacity:1}
.fseq{list-style:none;counter-reset:fs;margin:.15rem 0 .55rem;padding:0;display:grid;gap:.4rem}
.fseq li{counter-increment:fs;position:relative;padding-inline-start:2rem;margin:0}
.fseq li::before{content:counter(fs) '.';position:absolute;inset-inline-start:0;
font-family:'Kanit',system-ui,sans-serif;font-weight:700;color:var(--accl)}
ol.stepslist{counter-reset:s;list-style:none;padding:0;display:grid;gap:.6rem}
ol.stepslist li{counter-increment:s;position:relative;padding-inline-start:2.4rem;
background:var(--surf);border:1px solid rgba(255,255,255,.09);border-radius:var(--r);
padding-block:.75rem;padding-inline-end:1rem}
ol.stepslist li::before{content:counter(s);position:absolute;inset-inline-start:.7rem;top:.7rem;
width:1.4rem;height:1.4rem;border-radius:50%;background:var(--acc);color:var(--bg);
display:grid;place-items:center;font-size:.8rem;font-weight:700;font-family:'Kanit',sans-serif}
.openitem{color:#ffb4b4;background:rgba(255,0,0,.09);border:1px dashed #ff8080;
border-radius:6px;padding:.1rem .4rem;font-size:.84rem}
/* ---- footer ---- */
footer{background:var(--surf);border-top:1px solid rgba(255,255,255,.1);
padding:2rem 0 5.2rem;font-size:.87rem;color:var(--muted)}
footer h4{color:var(--ink);font-size:.95rem;margin-bottom:.5rem}
footer a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;
min-height:36px}
footer a:hover{color:var(--accl)}
.footrail{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
/* ---- floating stack: same diameter, hidden keeps its space (12.2.14) ---- */
.stickygo{position:fixed;right:14px;bottom:14px;z-index:50;display:flex;flex-direction:column;
gap:.6rem}
.stickygo a,.stickygo button{width:52px;height:52px;border-radius:50%;border:0;display:grid;
place-items:center;cursor:pointer;background:var(--surf);
border:1px solid var(--acc);color:var(--accl)}
.stickygo .joinbtn{display:none;background:linear-gradient(135deg,var(--acc),var(--accd));color:#11151c;
position:relative}
.stickygo .joinbtn::after{content:'';position:absolute;inset:-5px;border-radius:50%;
border:2px solid var(--acc);animation:pl 2.1s ease-out infinite}
@keyframes pl{0%{opacity:.75;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
/* Keep the fixed buttons off the footer's last block: that block is the 18+ responsible
   gambling paragraph, and it was rendering partly behind them on a phone. Sized for the
   tallest arrangement (two stacked 52px circles plus the offset). */
@media (max-width:760px){footer{padding-block-end:132px}}
#top{visibility:hidden}
#top.shownow{visibility:visible}
.stickygo .enterbtn{display:none;border:1px solid var(--acc);color:var(--accl);
background:var(--surf)}
@media (max-width:1000px){
  /* menu button below 1000px, inline row above (12.2.3) */
  .navlist{display:block;margin-inline-start:auto}
  .navlist>summary{list-style:none;width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--acc);border-radius:var(--r);color:var(--accl);cursor:pointer}
  .navlist>summary::-webkit-details-marker{display:none}
  nav.bigscreen{display:none}
  /* full-width sheet under the header, not a floating card. No backdrop-filter on the
     header: a filtered ancestor becomes the containing block for fixed children and
     collapses this to the header height. */
  .panelout{position:fixed;left:0;right:0;top:var(--hh,104px);bottom:0;background:var(--bg);
  overflow-y:auto;padding:.6rem var(--gut) 2rem}
  .panelout ul{flex-direction:column;gap:.2rem}
  .panelout a{width:100%;min-height:50px;border-bottom:1px solid rgba(255,255,255,.07);
  border-radius:0}
  /* Both header CTAs go below this width; the floating stack carries the conversion instead.
     An earlier version kept LOGIN here, on the grounds that hiding both left a subpage with no
     affordance at all - but that was written before the stack gained its own register button.
     Every one of these points at the same tracked URL, so nothing is unreachable: the stack's
     register button is the same destination the header pair had. */
  .mastcta{display:none}
  .stickygo .joinbtn{display:grid}
  /* 12.2.6 hero CTAs stack FULL WIDTH on a phone. Measured at 320-768 they were sitting
     side by side at 114px and 97px, which is the defect this rule names. */
  .mastheadgo{flex-direction:column;align-items:stretch}
  .mastheadgo .go{width:100%}
  /* 12.2.4 44px minimum tap target up to 1000px, because tablets are touch devices. Only
     inline links inside running prose are exempt, so the logo and the footer links are not:
     measured at 32px and 36px respectively. */
  .sitemark{min-height:44px;display:inline-flex;align-items:center}
  footer a{min-height:44px}
}
/* 12.2.3: state the CLOSED state outright rather than relying on the UA rule, and scope the
   desktop reveal to the DESKTOP nav only. Targeting every .panelout made the mobile panel
   display:flex at >=1001px, hidden only because its parent .navlist is display:none. That is the
   fragile chain the SOP names: a reveal that is not scoped forces the mobile menu open. */
details.navlist:not([open]) .panelout{display:none}
@media (min-width:1001px){ nav.bigscreen{position:static;display:flex} }
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* DARA168: a featured leader in a brighter card, runners-up in a plainer one beside it */
.campfeature{margin:1.15rem 0 0;display:grid;gap:6px;
grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:stretch}
.camplead,.campfield{border-radius:var(--r);padding:1rem 1.05rem}
.campfield{background:rgba(255,255,255,.028)}
.camplead{background:rgba(255,255,255,.06)}
.camplead b{display:block;font-family:'Kanit',system-ui,sans-serif;font-weight:700;
font-size:1.15rem;color:var(--ink);margin-block-end:.35rem}
.camplead p,.campfield p{margin:.4rem 0 0;color:var(--muted);font-size:.87rem;line-height:1.7}
.camptag{display:inline-block;font-family:'Kanit',system-ui,sans-serif;font-weight:600;
font-size:.72rem;letter-spacing:.06em;color:var(--accl);margin-block-end:.5rem}
/* TIGER711: three stacked bands by ubiquity, the leading rail fading tier by tier */
.campladder{margin:1.15rem 0 0;display:grid;gap:6px}
.campladder>div{background:rgba(255,255,255,.028);border-radius:var(--r);padding:.85rem 1rem;
border-inline-start:3px solid var(--acc)}
.campladder>div:nth-child(2){border-inline-start-color:rgba(255,255,255,.3)}
.campladder>div:nth-child(3){border-inline-start-color:rgba(255,255,255,.15)}
.campladder p{margin:.35rem 0 0;color:var(--muted);font-size:.86rem;line-height:1.66}
@media (max-width:640px){
 .campfeature{grid-template-columns:1fr}
}

/* ---- studio popularity, replacing the provider-inventory table on three hubs ----
   Built from P3's own parallel-panel idiom - tinted surfaces, spacing on the inline axis, no row
   rules - so three different shapes still read as this profile. */
/* by vertical: three panels across */
.campsplit{display:grid;gap:6px;margin:1.15rem 0 0;
grid-template-columns:repeat(auto-fit,minmax(min(100%,215px),1fr))}
.campsplit>div{background:rgba(255,255,255,.028);border-radius:var(--r);padding:.9rem .95rem}
.campsplit dt{font-family:'Kanit',system-ui,sans-serif;font-weight:600;font-size:.72rem;
letter-spacing:.08em;color:var(--accl);margin-block-end:.55rem}
.campsplit dd{margin:0;color:var(--muted);font-size:.87rem;line-height:1.72}
.campnames{display:block;color:var(--ink);font-weight:600;font-size:.9rem;margin-block-end:.45rem}
/* by origin: a narrow label column, the names and the reason beside it. Rows, not
   panels-across, so it does not restate the shape the by-vertical form uses. */
.camporigin{margin:1.15rem 0 0;display:grid;gap:6px}
.camporigin>div{display:grid;gap:6px;align-items:stretch;
grid-template-columns:minmax(0,178px) minmax(0,1fr)}
.camporigin dt{background:rgba(255,255,255,.062);border-radius:var(--r);padding:.7rem .8rem;
font-family:'Kanit',system-ui,sans-serif;font-weight:600;font-size:.83rem;color:var(--accl);
display:flex;align-items:center;overflow-wrap:anywhere}
.camporigin dd{margin:0;background:rgba(255,255,255,.028);border-radius:var(--r);
padding:.7rem .85rem;color:var(--muted);font-size:.87rem;line-height:1.7}
/* by rank: numbered chips in a row. Not a bullet list - the wall on this page already names these
   studios, so what this adds is the ORDER, and a chip strip states an order without restating a
   roster. Wraps rather than scrolls, so nothing hides off-screen on a phone. */
.camprank{margin:1.15rem 0 0;display:grid;gap:6px}
.camprank>div{display:flex;align-items:center;gap:.75rem;background:rgba(255,255,255,.028);
border-radius:var(--r);padding:.62rem .95rem}
.camprank b{display:grid;place-items:center;min-width:1.9rem;height:1.9rem;border-radius:50%;
background:rgba(255,255,255,.07);font-family:'Kanit',system-ui,sans-serif;font-weight:700;
font-size:.95rem;color:var(--accl);font-variant-numeric:tabular-nums;flex:none}
/* the top three carry a medal emoji, so drop the pill and let the glyph stand on its own */
.camprank>div:nth-child(-n+3) b{background:none;font-size:1.4rem}
.camprank span{color:var(--ink);font-size:.92rem}
.campnote{margin:1.05rem 0 0;color:var(--muted);font-size:.86rem;line-height:1.72}
@media (max-width:560px){
 .camporigin>div{grid-template-columns:1fr;gap:2px}
}

/* Design C, directory. A sticky index of this run's own headings down the left, compact content
   rows on the right, and the studio logos as a static grid. A studio page is browsed, not read. */
.dirwrap{padding:1.05rem 0}
.dirwrap .container{display:block}
section.drow{border-top:1px solid rgba(255,255,255,.08);padding:.95rem 0}
section.drow:first-child{border-top:0;padding-top:.2rem}
section.drow>h2{font-size:clamp(1.06rem,2.3vw,1.24rem);margin-block:0 .4rem;text-wrap:balance}
section.drow>p{font-size:.95rem}
section.drow>:last-child{margin-bottom:0}
section.drow ul{margin-block:.45rem 0;padding-inline-start:1.05rem}
section.drow li{margin-block:.26rem}
/* the studio comparison table, same treatment as the offer table on P2 - written in logical
   names so reclass_css ships it under this profile's own vocabulary */
.itemwrap{border:1px solid rgba(255,255,255,.12);border-radius:var(--r);background:var(--surf)}
table.vtab{width:100%;border-collapse:separate;border-spacing:0;font-size:.9rem;
font-variant-numeric:tabular-nums}
table.vtab th,table.vtab td{border-inline:0}
table.vtab thead th{background:rgba(255,255,255,.055);color:var(--accl);
font-family:'Kanit',sans-serif;font-weight:600;font-size:.83rem;white-space:nowrap;
padding:.72rem .85rem;text-align:start;border-block-end:2px solid var(--acc);
position:sticky;top:0;z-index:2}
table.vtab td{padding:.8rem .85rem;text-align:start;vertical-align:top;line-height:1.58;
border-block-end:1px solid rgba(255,255,255,.07)}
table.vtab tbody tr:nth-child(even) td{background:rgba(255,255,255,.024)}
table.vtab tbody tr:hover td{background:rgba(255,255,255,.05)}
table.vtab tbody tr:last-child td,table.vtab tbody tr:last-child th{border-block-end:0}
th.vname{position:sticky;inset-inline-start:0;background:var(--surf);z-index:1;
min-width:10.5rem;padding:.8rem .85rem;text-align:start;vertical-align:top;
border-block-end:1px solid rgba(255,255,255,.07);border-inline-start:3px solid transparent}
table.vtab tbody tr:hover th.vname{border-inline-start-color:var(--acc)}
th.vname a,th.vname strong{color:var(--ink);text-decoration:none;font-size:.95rem}
th.vname a:hover{color:var(--accl)}
table.vtab td:first-of-type{color:var(--ink)}
table.vtab td:first-of-type+td,table.vtab td:first-of-type+td+td{color:var(--muted)}
table.vtab thead th:first-child{z-index:3;background:rgba(255,255,255,.055)}
.dbody{min-width:0}
.dbody>section.drow:first-child{border-top:0}
/* art as a static grid. Written in the logical names, so reclass_css ships these selectors under
   P3's own vocabulary - the same component, a name this profile owns. */
.devgrid,.gamegrid{display:grid;gap:.6rem;margin-bottom:1rem}
.devgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,124px),1fr))}
.gamegrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,142px),1fr))}
.devgrid .dev,.gamegrid .itemtile{flex:none}
@media(min-width:700px){
 .devgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,146px),1fr))}
 .gamegrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,162px),1fr))}
}
/* the index. Hidden until there is room for it: on a phone a jump list is a screenful of links in
   front of the content it points at, and the page is short enough not to need one. */
.dindex{display:none}
@media(min-width:900px){
 /* Two columns ONLY when there is an index to put in one. Declaring the track unconditionally
    left a suppressed-index block's single child sitting in the 210px column, wrapping at about
    150px. The index is the second track, so the content leads and the index sits to its right. */
 .dirwrap .container:has(.dindex){display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:2.2rem;
 align-items:start}
 .dindex{display:block;position:sticky;top:calc(var(--hh,104px) + 1rem);order:2}
 .dbody{order:1}
 .dindex ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
 .dindex a{display:block;padding:.32rem .7rem;font-size:.82rem;line-height:1.4;
 color:var(--muted);text-decoration:none;border-inline-start:2px solid rgba(255,255,255,.11)}
 .dindex a:hover,.dindex a:focus-visible{color:var(--ink);border-inline-start-color:var(--acc)}
}

/* P3 comparative table: parallel panels. Spacing on the inline axis only, so each column reads as
   its own tinted panel standing beside the others instead of as a cell in a grid. No row rules. */
table.itemtab{border-collapse:separate;border-spacing:6px 0}
table.itemtab thead th{background:rgba(255,255,255,.062);border:0;padding:.52rem .7rem;
font-size:.73rem;letter-spacing:.08em;text-transform:uppercase;
border-start-start-radius:var(--r);border-start-end-radius:var(--r)}
table.itemtab td{background:rgba(255,255,255,.028);border:0;padding:.68rem .7rem}
table.itemtab tbody tr:last-child td{border-end-start-radius:var(--r);
border-end-end-radius:var(--r)}
table.itemtab td:first-child{font-weight:600;color:var(--ink)}
table.itemtab td+td{font-variant-numeric:tabular-nums;color:var(--muted)}