. If that happens inside a flex container the
becomes the ONE flex item, so twelve jump pills render as a single unwrappable row that overflows the page. That is exactly what shipped on post 39289. The markup fix is to keep inline children on one source line. This is the belt and braces: display:contents removes the stray
from the box tree so
its children become flex items again, and the layout is correct either way. */
.ufg-toc.ufg-toc>p,.ufg-btns>p,.ufg-strip>p,.ufg-pick>p,.ufg-band>p,
.ufg-diffrow>p,.ufg-onart>p,.ufg-head>p{display:contents}
/* =============================================================================
3. STAT BLOCKS - five shapes, pick one per template
========================================================================== */
/* 3a. Boxed grid, 4 cells, hairline gaps. Template 02. */
.ufg-stats.is-grid{display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.09);
border-radius:10px;overflow:hidden;margin-bottom:16px}
.ufg-stats.is-grid .ufg-cell{background:var(--ufg-card);padding:10px 12px}
/* 3b. Separate boxes sitting below the card surface. Template 03. */
.ufg-stats.is-boxed{display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
margin-bottom:16px}
.ufg-stats.is-boxed .ufg-cell{background:var(--ufg-page);
border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:10px 13px}
/* 3c. One bar, hairline dividers, tinted border. Templates 04, 05, 06, 07. */
.ufg-stats.is-bar{display:flex;flex-wrap:wrap;background:var(--ufg-page);
border:1px solid rgba(var(--ufg-accent-rgb),.22);border-radius:10px;
margin-top:16px}
.ufg-stats.is-bar .ufg-cell{flex:1 1 150px;padding:10px 14px;
border-left:1px solid rgba(var(--ufg-accent-rgb),.22)}
/* Every cell keeps its border-left, including the first. The cells reflow on
narrow screens and the divider positions move. */
/* 3d. Ruled sheet, no box, no vertical rules. Templates 08, 08b, 09. */
.ufg-stats.is-sheet{display:flex;flex-wrap:wrap;
border-top:4px double rgba(var(--ufg-accent-rgb),.45);margin-top:18px}
.ufg-stats.is-sheet .ufg-cell{flex:1 1 130px;padding:11px 14px 3px 0;
border-bottom:1px solid rgba(255,255,255,.07)}
/* Cell contents, shared by 3a to 3d */
.ufg-cell-k{font-size:10px;letter-spacing:1px;text-transform:uppercase;
color:var(--ufg-faint);margin-bottom:3px}
.ufg-cell-v{font-size:13px;font-weight:bold;color:var(--ufg-txt)}
.ufg-cell-v.is-free{color:#fbbf24}
/* 3e. Ledgers, label left and value right. Templates 10 and 11. */
.ufg-ledger{margin-top:18px;border-top:1px solid rgba(var(--ufg-accent-rgb),.30);
padding-top:6px}
.ufg-row{display:flex;align-items:baseline;gap:10px;padding:7px 0}
.ufg-k{font-size:10px;letter-spacing:1px;text-transform:uppercase;
color:var(--ufg-faint);flex:0 0 auto}
.ufg-v{font-size:13px;font-weight:bold;color:var(--ufg-txt);flex:0 0 auto}
/* Template 10, dotted leader between label and value */
.ufg-lead{flex:1 1 auto;height:0;
border-bottom:1px dotted rgba(var(--ufg-accent-rgb),.45)}
/* The leader needs height:0 with a border-bottom, inside align-items:baseline,
or the dotted rule floats off the text baseline. */
/* Template 11, fixed label column and a hairline under each row */
.ufg-ledger.is-hairline{padding-top:0}
.ufg-ledger.is-hairline .ufg-row{gap:12px;padding:9px 0;
border-bottom:1px solid rgba(var(--ufg-accent-rgb),.09)}
.ufg-ledger.is-hairline .ufg-row:last-child{border-bottom:0}
.ufg-ledger.is-hairline .ufg-k{flex:0 0 118px}
.ufg-ledger.is-hairline .ufg-v{flex:1 1 auto;text-align:left}
/* =============================================================================
4. CARD TEMPLATES 01 to 12
Rotate these. Never ship two consecutive posts on the same one.
========================================================================== */
/* --- T01 Split Header. Thumbnail left, two prose columns below -----------
The thumbnail used to be a fixed 220 by 150 box beside a taller text
column, which left a block of dead space under every image and made the
screenshots too small to read. It now STRETCHES to the height of the text
beside it: align-self:stretch gives the wrapper the flex line's height, and
height:100% on the image resolves against it. The card decides how tall the
picture is, so there is no gap to tune and no magic number to keep in sync.
Wider too, 300px rather than 220px, because a desktop screenshot at 220px
is decoration rather than information. */
.ufg-card.t01 .ufg-split{display:flex;gap:18px;flex-wrap:wrap;align-items:stretch}
.ufg-card.t01 .ufg-thumbwrap{position:relative;flex:0 0 300px;max-width:100%;
align-self:stretch;min-height:190px}
.ufg-card.t01 .ufg-thumb{width:100%;height:100%;min-height:190px;
object-fit:cover;border-radius:10px;display:block}
/* --- Click to enlarge -----------------------------------------------------
The thumbnail is an straight to the full size file. No JavaScript, no
lightbox library, no checkbox hack, and it behaves correctly on a phone,
where the reader gets the OS pinch to zoom rather than a fake one we would
have to build. It also degrades honestly: if styles fail it is still a link
to a picture.
An affordance is not optional here. A picture that silently happens to be
clickable is a picture nobody clicks, so the corner chip says "Enlarge" in
words. It is generated in CSS rather than typed into twelve cards. */
.ufg-card.t01 .ufg-thumbwrap a{display:block;height:100%;position:relative;
border-radius:10px;overflow:hidden}
.ufg-zoom::after{content:"Enlarge";position:absolute;right:8px;bottom:8px;
background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.22);
color:#fff;font-size:10px;font-weight:bold;letter-spacing:1px;
text-transform:uppercase;padding:4px 9px;border-radius:6px;
opacity:.85;transition:opacity .15s}
.ufg-zoom:hover::after{opacity:1}
.ufg-zoom:hover .ufg-thumb{filter:brightness(1.07)}
.ufg-zoom:focus-visible{outline:2px solid var(--ufg-accent);outline-offset:2px}
.ufg-card.t01 .ufg-rank-badge{position:absolute;top:8px;left:8px;
background:var(--ufg-btn);color:var(--ufg-ink);width:30px;height:30px;
border-radius:8px;display:flex;align-items:center;justify-content:center;
font-weight:bold}
.ufg-card.t01 .ufg-right{flex:1;min-width:200px}
.ufg-card.t01 .ufg-cols{display:flex;gap:26px;flex-wrap:wrap;
border-top:1px solid var(--ufg-hair);margin-top:18px;padding-top:16px}
.ufg-card.t01 .ufg-col{flex:1;min-width:190px}
.ufg-card.t01 .ufg-col-h{font-size:13px;font-weight:bold;
color:var(--ufg-accent);margin-bottom:8px}
.ufg-card.t01 .ufg-col ul{margin:0;padding-left:16px;font-size:13px;
line-height:1.9;color:var(--ufg-mut)}
/* --- T02 Trading Card. Full width art, rank tab notched into it ---------- */
.ufg-imgwrap{position:relative}
.ufg-rank-tab{position:absolute;top:0;left:0;background:var(--ufg-btn);
color:var(--ufg-ink);font-weight:bold;font-size:15px;padding:9px 18px;
border-radius:0 0 12px 0;letter-spacing:1px}
/* --- T03 Ticket Stub. Opinion first, then a perforation, then stats ------ */
.ufg-perf{display:flex;align-items:center;gap:9px;margin:18px 0 15px}
.ufg-perf-notch{display:inline-block;width:13px;height:13px;border-radius:50%;
background:var(--ufg-page);border:1px solid var(--ufg-hair);flex-shrink:0}
.ufg-perf-line{flex:1;border-top:2px dashed rgba(var(--ufg-accent-rgb),.40)}
/* The notch circles must be filled with the PAGE colour, not the card colour,
or they read as dots rather than punched holes. */
/* --- T04 Dossier. Clean art, corner bracket, rank beside the name -------- */
.ufg-bracket{position:absolute;top:12px;right:12px;width:26px;height:26px;
border-top:2px solid var(--ufg-accent);border-right:2px solid var(--ufg-accent);
border-radius:0 6px 0 0}
/* border-top and border-right only, or it renders as a box. */
.ufg-rank-inline{font-size:26px;line-height:1;font-weight:bold;
color:var(--ufg-accent);flex-shrink:0}
/* --- T05 Editorial Numeral. Text first, art demoted below the opinion ---- */
.ufg-head{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
/* align-items:baseline, never flex-start, or the numeral floats above the name */
.ufg-rank-num{font-size:40px;line-height:1;font-weight:bold;
color:var(--ufg-accent);flex-shrink:0}
.ufg-head .ufg-name{flex:1 1 200px;min-width:180px}
/* --- T06 Poster. Name printed on the artwork behind a gradient ----------- */
.ufg-fade{position:absolute;left:0;right:0;bottom:0;height:130px;
background:linear-gradient(to top,rgba(9,10,13,.95) 0%,
rgba(9,10,13,.75) 45%,rgba(9,10,13,0) 100%)}
.ufg-onart{position:absolute;left:20px;right:20px;bottom:13px;display:flex;
gap:14px;align-items:baseline;flex-wrap:wrap}
.ufg-onart .ufg-rank-num{font-size:34px}
.ufg-onart .ufg-name{font-size:22px;color:#fff;flex:1 1 200px;min-width:180px}
/* Only use T06 when the artwork identifies the game on its own. Check a
contact sheet first. Racing scenery and strategy maps both failed this. */
/* --- T07 Framed Plate. Art in a mat with a caption ----------------------- */
.ufg-frame{background:rgba(var(--ufg-accent-rgb),.07);
border:1px solid rgba(var(--ufg-accent-rgb),.28);border-radius:12px;
padding:10px 10px 8px;margin:18px 0 0}
.ufg-frame .ufg-shot{border-radius:7px;height:196px;margin:0}
.ufg-cap{font-size:12px;font-style:italic;line-height:1.6;
color:var(--ufg-faint);padding:8px 4px 0}
/* The caption names the place or the moment. If it would only repeat the item
name, use a different template. */
.ufg-card.t07 .ufg-rank-num{font-size:38px}
/* --- T08 Character Sheet and 08b Clean Header. Rank in a header band ----- */
.ufg-band{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
background:rgba(var(--ufg-accent-rgb),.09);
border-bottom:1px solid rgba(var(--ufg-accent-rgb),.30);padding:13px 20px}
.ufg-rank-sq{display:inline-block;width:36px;height:36px;line-height:34px;
text-align:center;border:1px solid var(--ufg-accent);border-radius:9px;
color:var(--ufg-accent);font-size:15px;font-weight:bold;flex-shrink:0}
.ufg-band .ufg-name{font-size:20px;flex:1 1 200px;min-width:170px}
/* Band contents must sit on ONE line of source or wpautop injects by wpautop, which adds margins and shifts it. */
.ufg-card.t10 .ufg-titlerow{position:relative;display:flex;align-items:baseline;
gap:12px;flex-wrap:wrap;padding-left:66px;min-height:44px}
.ufg-card.t10 .ufg-titlerow .ufg-name{flex:1 1 180px;min-width:160px}
.ufg-year{margin-left:auto;background:rgba(var(--ufg-accent-rgb),.14);
border:1px solid rgba(var(--ufg-accent-rgb),.45);color:var(--ufg-accent);
font-size:11px;font-weight:bold;letter-spacing:1px;padding:6px 13px;
border-radius:20px;white-space:nowrap}
/* --- T11 Run Ledger. Difficulty meter, rank as a fraction ---------------- */
/* This row started life as seven abstract dots representing attempts. Wisdom
looked at it and asked what they were, which is the one-second test failing.
Replaced with a rating that does real work. The rising staircase says "this
is a scale" before anything is read, and the word beside it removes the
ambiguity that killed the dots. Never ship the bars without the word. */
.ufg-diffrow{display:flex;align-items:center;gap:0;margin-bottom:14px}
.ufg-diffrow>.ufg-diff-l{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;
color:var(--ufg-faint);flex:0 0 auto;margin-right:9px}
/* The bars are direct children of the row. There is deliberately NO wrapper.
WordPress strips a whose only children are other inline elements with
no text, which is exactly what a wrapper round five empty tags is. It was
stripped on the live roguelike post and the meter vanished, while the
elements themselves survived. Target them with nth-of-type so the spans
either side do not affect the count. */
.ufg-diffrow>i{display:block;width:7px;border-radius:1px;margin-right:4px;flex:0 0 auto;
background:rgba(var(--ufg-accent-rgb),.20)}
.ufg-diffrow>i.on{background:var(--ufg-accent)}
.ufg-diffrow>i:nth-of-type(1){height:7px}
.ufg-diffrow>i:nth-of-type(2){height:10px}
.ufg-diffrow>i:nth-of-type(3){height:13px}
.ufg-diffrow>i:nth-of-type(4){height:16px}
.ufg-diffrow>i:nth-of-type(5){height:19px}
.ufg-diffrow>.ufg-diff-v{font-size:11px;font-weight:bold;letter-spacing:.5px;
color:var(--ufg-accent);flex:0 0 auto;margin-left:5px}
.ufg-frac{margin-left:auto;font-size:11px;font-weight:bold;letter-spacing:1.5px;
color:var(--ufg-faint);flex:0 0 auto}
/* The five elements must sit on ONE line of source inside their flex
parent, or wpautop injects
. */
/* --- T09 Roster. Same band, second fact pushed to the far end ----------- */
.ufg-band-pill{margin-left:auto;background:rgba(var(--ufg-accent-rgb),.16);
border:1px solid rgba(var(--ufg-accent-rgb),.45);color:var(--ufg-accent);
font-size:11px;font-weight:bold;letter-spacing:1px;padding:6px 13px;
border-radius:20px;white-space:nowrap}
/* A pill passes if it carries a NUMBER on ONE axis the page title does not
already answer. A category on two axes fails. Store the full pill text,
never append a unit unconditionally. */
/* --- T10 Watermark Plate. Rank as a watermark behind the title ---------- */
.ufg-rank-wm{position:absolute;top:4px;left:14px;font-size:76px;line-height:1;
font-weight:bold;color:rgba(var(--ufg-accent-rgb),.13);letter-spacing:-4px}
/* Must be a div. A bare inline element on its own source line gets wrapped in
a
between them and the staircase collapses. */
.ufg-card.t11 .ufg-titlerow{display:flex;align-items:baseline;gap:12px;
flex-wrap:wrap;min-height:34px}
.ufg-card.t11 .ufg-titlerow .ufg-name{flex:1 1 180px;min-width:160px}
/* --- T12 Platform Strip. Every confirmed route to the game, named -------- */
/* Wisdom's idea, built here because FPS is the genre where cloud is a real
route rather than a footnote. The strip REPLACES the violet cloud chip
rather than sitting beside it, which is what earns it a template: the chip
said "also on cloud", the strip says which cloud, and a store as well.
Service NAMES only. Third party logos need asset licensing and are
unreadable at chip size.
Absence means unconfirmed, not absent, and How We Picked says so. */
.ufg-card.t12 .ufg-titlerow{display:flex;align-items:baseline;gap:12px;
flex-wrap:wrap;min-height:34px}
.ufg-card.t12 .ufg-titlerow .ufg-name{flex:1 1 180px;min-width:160px}
.ufg-strip{margin-top:16px;background:var(--ufg-page);
border:1px solid rgba(var(--ufg-accent-rgb),.28);border-radius:10px;
padding:11px 13px 3px}
.ufg-strip-l{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;
color:var(--ufg-faint);margin-bottom:9px}
.ufg-svc.ufg-svc{display:inline-block;font-size:12px;font-weight:bold;padding:6px 13px;
border-radius:7px;margin:0 8px 8px 0;text-decoration:none;
background:rgba(var(--ufg-accent-rgb),.12);
border:1px solid rgba(var(--ufg-accent-rgb),.38);color:var(--ufg-accent)}
.ufg-svc.is-cloud{background:rgba(192,132,252,.10);
border-color:rgba(192,132,252,.50);color:#c084fc}
/* Cloud services stay violet, same as the cloud chip and the cloud button. */
/* The service chips must sit on ONE line of source inside .ufg-strip or
wpautop injects
between them and the row breaks into a column. */
/* =============================================================================
5. PAGE FURNITURE
========================================================================== */
/* --- Comparison table. Collapsed by default, always ---------------------- */
.ufg-tablebox{border:1px solid rgba(var(--ufg-accent-rgb),.22);
border-radius:12px;padding:4px 20px;margin-bottom:40px;
background:var(--ufg-card)}
.ufg-tablebox>summary{cursor:pointer;font-weight:bold;color:var(--ufg-accent);
padding:14px 0;font-size:15px}
.ufg-scroll{overflow-x:auto;margin:10px 0 24px}
.ufg-table{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}
/* THE DOUBLED CLASS BELOW IS DELIBERATE. DO NOT "TIDY" IT AWAY.
Shapebox fights us on tables and wins on specificity:
body:where(.dark) .entry table td{color:rgba(255,255,255,.5)} -> (0,1,3)
.entry table td{text-align:center;padding:5px;border:1px solid #ddd} -> (0,1,2)
.entry table tr.alt{background:...} -> (0,2,3)
:where() contributes NOTHING to specificity, so that first rule is really
body .entry table td and it beats a plain .ufg-table td at (0,1,1). That is
what made half the rows render as white text on a white background, and it is
the same reason left aligned cells kept reverting to centred on this theme.
.ufg-table.ufg-table td is (0,2,1), which wins on class count.
BACKGROUNDS GO ON THE TD, NEVER ON THE TR. The theme adds a .alt class to
alternating rows and stripes them itself, which is why only every other row
changed colour. A td background paints over a tr background no matter which
selector is more specific, so putting the stripe on the cell sidesteps the
cascade entirely.
The table is now DARK and built from the post variables, so it matches the
cards instead of dropping a white spreadsheet into a dark page. That also
retires the old "explicit colour on every cell because light rows go
invisible" workaround: there are no light rows any more. */
.ufg-table.ufg-table th{padding:12px;text-align:left;font-weight:bold;
color:var(--ufg-txt);background:var(--ufg-pill);border:0;
border-bottom:1px solid rgba(var(--ufg-accent-rgb),.35)}
.ufg-table.ufg-table td{padding:11px 12px;text-align:left;vertical-align:top;
color:var(--ufg-mut);background:var(--ufg-card);border:0;
border-bottom:1px solid rgba(255,255,255,.06)}
.ufg-table.ufg-table tbody tr:nth-child(even) td{background:var(--ufg-box)}
.ufg-table.ufg-table tbody tr:last-child td{border-bottom:0}
.ufg-table.ufg-table td:first-child{color:var(--ufg-txt);font-weight:bold}
.ufg-table.ufg-table td:first-child a{color:var(--ufg-txt);text-decoration:none}
.ufg-table.ufg-table td:first-child a:hover{color:var(--ufg-accent)}
.ufg-table.ufg-table td.is-free{color:#fbbf24;font-weight:bold}
/* --- Guidance grid. Stays open, unlike the table ------------------------- */
.ufg-guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:16px;margin-bottom:40px}
.ufg-guide-card{background:var(--ufg-card);border:1px solid var(--ufg-hair);
border-radius:12px;padding:20px 18px;box-sizing:border-box}
.ufg-guide-h{font-size:13px;font-weight:bold;color:var(--ufg-accent);
margin-bottom:8px}
.ufg-guide-card p{font-size:13px;line-height:1.65;margin:0;color:var(--ufg-mut)}
/* --- FAQ ----------------------------------------------------------------- */
.ufg-faq{background:var(--ufg-card);
border:1px solid rgba(var(--ufg-accent-rgb),.20);border-radius:10px;
padding:14px 18px;margin-bottom:10px}
.ufg-faq:last-of-type{margin-bottom:0}
.ufg-faq>summary{font-size:15px;font-weight:bold;color:var(--ufg-txt);
cursor:pointer}
.ufg-faq p{margin:12px 0 0;font-size:14px;line-height:1.75;color:var(--ufg-mut)}
/* --- Footer link row ----------------------------------------------------- */
.ufg-more{margin-top:30px}
.ufg-more strong{color:var(--ufg-txt)}
.ufg-more.ufg-more a{color:var(--ufg-accent);text-decoration:none}
/* --- Auto-placed ads inside a card ---------------------------------------
AdSense Auto ads insert .google-auto-placed containers between block
children and they sometimes land mid-card, between the ledger and the
terminal block. Which slots appear varies per page load, so this is
cosmetic insurance rather than a fix.
Spacing only. Nothing here hides, resizes or restyles an ad. Unfilled slots
already render at 0 by 0 on their own and are left alone deliberately: a
rule that hides them would do nothing today and could do something real
later if the markup changed. */
.ufg-card>.google-auto-placed{margin:14px 0}
/* =============================================================================
6. NARROW SCREENS
========================================================================== */
@media (max-width:760px){
/* Stack the thumbnail above the text rather than squeezing a 300px column
into a narrow screen. Height is capped so a phone screen is not one long
column of screenshots. */
.ufg-card.t01 .ufg-thumbwrap{flex:1 1 100%;min-height:0}
.ufg-card.t01 .ufg-thumb{height:210px;min-height:0}
}
@media (max-width:480px){
.ufg-card{padding:16px 16px 20px}
.ufg-card.t02 .ufg-body,.ufg-card.t03 .ufg-body,.ufg-card.t04 .ufg-body,
.ufg-card.t06 .ufg-body,.ufg-card.t08 .ufg-body,.ufg-card.t09 .ufg-body{
padding:16px 16px 18px}
.ufg-shot,.ufg-shot.is-tall{height:150px}
.ufg-frame .ufg-shot{height:150px}
.ufg-name{font-size:19px}
.ufg-ledger.is-hairline .ufg-k{flex:0 0 96px}
.ufg-rank-num{font-size:32px}
.ufg-rank-wm{font-size:60px}
.ufg-card.t10 .ufg-titlerow{padding-left:54px}
.ufg-card.t01 .ufg-thumb{height:180px}
.ufg-svc{font-size:11px;padding:6px 11px;margin:0 6px 7px 0}
}