/* nightluck - skin · nightluckcasino-no.com
   Donors (R1): wyns-5799.com  - night-neon casino strip, glowing marquee sign (world/mood);
                spinaura.com   - near-black chassis, ONE wide gradient hero band, one filled CTA (shell).
   NOT taken: wyns' light catalogue shell / amber sidebar / round chips / numbered top-5;
              spinaura's purple-orange aura family and photo models.
   World here: midnight-indigo near-black, ONE wide hero strip that reads as a night city
   marquee (pure CSS light layers), warm amber CTA (R34), hair-thin neon-teal accents.
   Signature form: 16px notched corner (clip-path) on panels/cards/logo; marquee-dot
   details (dotted rules) echo the bulb sign without any images. Editorial review tone. */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@500;600&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --bg:#0A0D1A; --bg2:#0E1224; --panel:#141A30; --panel2:#1B2240;
  --fg:#EAEEF9; --muted:#93A0C2;
  --line:rgba(234,238,249,.10); --line2:rgba(234,238,249,.20);
  --accent:#F2B234; --accent-fg:#1A1204; --accent2:#43E5D0;
  --warn:#FF6B6B; --ok:#5FD39A;
  --r:4px; --notch:16px; --maxw:1180px;
  --fh:'Bebas Neue','Oswald','Arial Narrow','Segoe UI',sans-serif;
  --fb:'Inter','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);font:16px/1.66 var(--fb);
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
hr{border:0;border-top:1px solid var(--line);margin:28px 0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}

/* ---------- the notch: one structural signature, applied everywhere ---------- */
.notch{
  clip-path:polygon(0 0,calc(100% - var(--notch)) 0,100% var(--notch),
                    100% 100%,var(--notch) 100%,0 calc(100% - var(--notch)));
}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--fh);font-weight:400;line-height:1.05;letter-spacing:1px;margin:0 0 .5em}
h1{font-size:clamp(34px,5vw,58px);text-transform:uppercase}
h2{font-size:clamp(26px,3vw,38px);text-transform:uppercase;position:relative;padding-bottom:12px;margin-bottom:.6em}
h2::after{
  content:"";position:absolute;left:0;bottom:0;width:64px;height:2px;
  background:linear-gradient(90deg,var(--accent2) 0 34px,transparent 34px 40px,var(--accent) 40px 100%);
}
h3{font-size:clamp(19px,2.1vw,24px);letter-spacing:1.2px;text-transform:uppercase}
h4{font-size:16px;letter-spacing:1.4px}
.lead{color:var(--muted);font-size:17.5px;line-height:1.6;max-width:72ch;margin:0 0 18px}
p{margin:0 0 15px;max-width:76ch}
ul,ol{margin:0 0 16px;padding-left:20px;max-width:76ch}
li{margin:0 0 7px}

/* ---------- header: dark marquee bar ---------- */
header.site{
  position:sticky;top:0;z-index:40;
  background:rgba(10,13,26,.93);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(67,229,208,.14);
}
header.site .bar{display:flex;align-items:center;gap:16px;height:64px}
.logo{display:flex;align-items:center;gap:11px;color:var(--fg);text-decoration:none;flex:0 0 auto}
.logo .mark{
  width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;
  font:400 15px/1 var(--fh);letter-spacing:1px;
  color:var(--accent-fg);
  background:
    radial-gradient(90% 90% at 50% 12%,#FFD97A 0%,var(--accent) 55%,#C88A16 100%);
  --notch:10px;
  overflow:hidden;
}
/* with a real emblem the amber plate goes - the emblem carries its own colour */
.logo .mark.has-emblem{background:var(--panel);border:1px solid rgba(242,178,52,.45)}
.logo .mark img{width:100%;height:100%;object-fit:contain;display:block}
.logo b{font:400 21px/1 var(--fh);letter-spacing:1.4px;display:block;text-transform:uppercase}
.logo small{display:block;font:500 10px/1.3 var(--fb);color:var(--muted);letter-spacing:.8px;text-transform:uppercase}
nav.main{display:flex;gap:2px;margin-left:auto;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
nav.main a{
  color:var(--muted);font:500 13.5px/1 var(--fb);padding:10px 11px;border-radius:var(--r);
  white-space:nowrap;flex:0 0 auto;
}
nav.main a:hover{color:var(--fg);background:var(--panel);text-decoration:none}
nav.main a.akt{
  color:var(--accent2);
  box-shadow:inset 0 -2px 0 var(--accent2);
  text-shadow:0 0 14px rgba(67,229,208,.55);
}
header.site .btn{margin-left:8px;flex:0 0 auto}

/* ---------- buttons: R34 - filled amber = affiliate, ghost = internal ---------- */
.btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:18px 0}
.btn{
  display:inline-block;font:600 14px/1 var(--fb);padding:14px 22px;border-radius:var(--r);
  cursor:pointer;border:1px solid transparent;letter-spacing:.3px;
}
.btn-primary{
  background:linear-gradient(180deg,#FFCB5C 0%,var(--accent) 48%,#DE9E1F 100%);
  color:var(--accent-fg);border-color:#C88A16;
  box-shadow:0 0 0 1px rgba(255,217,122,.35) inset,0 8px 26px -8px rgba(242,178,52,.75);
}
.btn-primary:hover{filter:brightness(1.08);text-decoration:none}
.btn-secondary{background:transparent;color:var(--fg);border-color:var(--line2)}
.btn-secondary:hover{border-color:var(--accent2);color:var(--accent2);text-decoration:none}
.adnote{font-size:12px;color:var(--muted);letter-spacing:.2px;max-width:34ch;line-height:1.45}
.adnote b{
  color:var(--accent);font-weight:600;text-transform:uppercase;font-size:10.5px;
  letter-spacing:1px;border:1px dotted rgba(242,178,52,.55);padding:2px 6px;margin-right:5px;
}

/* ---------- sections: soft alternating rhythm, no divider carpet (R43) ---------- */
section{padding:44px 0}
section.band{
  background:
    radial-gradient(90% 120% at 50% -30%,rgba(27,34,64,.55) 0%,transparent 62%),
    var(--bg2);
}

/* ---------- hero: the night strip. Pure CSS marquee light. ---------- */
section.hero{
  padding:64px 0 52px;
  background:
    /* amber street-glow rising from the horizon */
    radial-gradient(130% 68% at 50% 108%,rgba(242,178,52,.20) 0%,rgba(242,178,52,.06) 42%,transparent 66%),
    /* teal neon bloom top-left */
    radial-gradient(52% 44% at 12% -6%,rgba(67,229,208,.16) 0%,transparent 60%),
    /* violet city haze right */
    radial-gradient(46% 52% at 88% 18%,rgba(122,88,220,.14) 0%,transparent 62%),
    /* thin vertical light streaks - distant signs */
    repeating-linear-gradient(90deg,rgba(234,238,249,.026) 0 1px,transparent 1px 96px),
    /* the generated night-strip plate: dark on the left, lit on the right, so the
       headline sits on near-black and the amber marquee reads behind the panel */
    linear-gradient(90deg,#080A14 0%,rgba(8,10,20,.86) 30%,rgba(8,10,20,.58) 62%,rgba(8,10,20,.42) 100%),
    url("../art/hero-night.webp"),
    /* night sky falling to street level (fallback if the plate is missing) */
    linear-gradient(180deg,#080A14 0%,#0D1226 58%,#131020 100%);
  background-size:auto,auto,auto,auto,cover,cover;
  background-position:center,center,center,center,center right,center;
  background-repeat:no-repeat;
  border-bottom:1px solid rgba(242,178,52,.22);
  box-shadow:inset 0 -26px 48px -30px rgba(242,178,52,.28);
}
.hero .kick{
  display:inline-block;font:500 11.5px/1 var(--fb);letter-spacing:2.2px;text-transform:uppercase;
  color:var(--accent);padding:8px 14px;margin-bottom:18px;
  border-top:1px dotted rgba(242,178,52,.65);
  border-bottom:1px dotted rgba(242,178,52,.65);
  text-shadow:0 0 16px rgba(242,178,52,.55);
}
.hero h1{max-width:19ch;text-shadow:0 2px 22px rgba(8,10,20,.9)}
.hero .lead{color:#AEB8D6}
.hero .grid{display:grid;grid-template-columns:1.3fr 1fr;gap:38px;align-items:start}
.hero .panel{background:rgba(20,26,48,.82);backdrop-filter:blur(4px)}
.hero .panel h3{color:var(--accent2)}

/* ---------- panels / cards ---------- */
.panel{background:var(--panel);border:1px solid var(--line);padding:24px}
.panel h3{margin-bottom:12px}
.cards{display:grid;gap:16px}
.cards.c1{grid-template-columns:minmax(0,640px)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c3{grid-template-columns:repeat(3,1fr)}

/* offer tiers */
.tier{
  background:linear-gradient(180deg,var(--panel2) 0%,var(--panel) 34%);
  border:1px solid var(--line);padding:24px;display:flex;flex-direction:column;
  box-shadow:inset 0 1px 0 rgba(67,229,208,.14);
}
.tier .tname{
  font:500 11px/1 var(--fb);letter-spacing:2px;text-transform:uppercase;
  color:var(--accent2);margin-bottom:13px;
  border-bottom:1px dotted rgba(67,229,208,.4);padding-bottom:9px;align-self:flex-start;
}
.tier .thead{font-family:var(--fh);font-size:30px;line-height:1.05;letter-spacing:.8px;text-transform:uppercase;margin-bottom:10px}
.tier .tdetail{color:var(--muted);font-size:14.5px;margin-bottom:14px}
.tier .tterms{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:auto}
.tier.gap{box-shadow:inset 0 1px 0 rgba(255,107,107,.22)}
.tier.gap .tname{color:var(--warn);border-bottom-color:rgba(255,107,107,.4)}
.tier.gap .thead{color:var(--warn)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:var(--panel)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px}
th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{
  background:linear-gradient(180deg,rgba(67,229,208,.10),rgba(67,229,208,0) 130%),var(--panel2);
  font:600 11.5px/1.3 var(--fb);letter-spacing:1.2px;text-transform:uppercase;
  color:var(--accent2);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:rgba(234,238,249,.025)}
td.k{color:var(--muted);width:34%;white-space:nowrap}
.na{color:var(--muted);font-style:italic;opacity:.85}
.hero .tablewrap{border:0;background:transparent}
.hero table{min-width:0;font-size:14px}

/* ---------- attribution + callouts (truth furniture) ---------- */
.src{
  display:block;font:500 11.5px/1.5 var(--fb);color:var(--muted);
  border-left:2px solid var(--accent2);padding:2px 0 2px 10px;margin:6px 0 0;max-width:76ch;
}
.src a{color:var(--accent2)}
.srcline{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.callout{
  border:1px solid var(--line2);background:var(--panel);
  padding:18px 20px;margin:18px 0;position:relative;
  box-shadow:inset 3px 0 0 var(--accent);
}
.callout.gap{box-shadow:inset 3px 0 0 var(--warn)}
.callout.gap h3{color:var(--warn)}
.callout h3{font-size:16px;letter-spacing:1.2px;margin-bottom:8px}
.callout p:last-child{margin-bottom:0}

/* ---------- pros / cons ---------- */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pc .panel{padding:22px}
.pc h3{font-size:15px;letter-spacing:1.4px}
.pc .pros h3{color:var(--ok)}
.pc .cons h3{color:var(--warn)}
.pc ul{list-style:none;padding:0;margin:0}
.pc li{position:relative;padding-left:24px;margin-bottom:10px;font-size:14.5px}
.pc li::before{position:absolute;left:0;top:0;font-weight:700}
.pc .pros li::before{content:"+";color:var(--ok)}
.pc .cons li::before{content:"\2212";color:var(--warn)}

/* ---------- steps: bulb-numbered ---------- */
ol.steps{list-style:none;padding:0;counter-reset:s;max-width:none}
ol.steps li{counter-increment:s;position:relative;padding:0 0 0 58px;margin-bottom:20px}
ol.steps li::before{
  content:counter(s);position:absolute;left:0;top:-4px;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font:400 20px/1 var(--fh);color:var(--accent);
  background:radial-gradient(60% 60% at 50% 32%,rgba(242,178,52,.20) 0%,transparent 75%),var(--panel);
  border:1px dotted rgba(242,178,52,.6);
}
ol.steps b{display:block;font-family:var(--fh);font-size:19px;font-weight:400;letter-spacing:1px;text-transform:uppercase}
ol.steps span{color:var(--muted);font-size:14.5px}

/* ---------- game grid ----------
   Covers are locked to 3/2, the ratio every cover in the pool is actually stored
   at (300x200 / 640x426 / 390x254). A 1/1 box cropped ~25% off each side and cut
   straight through the game titles, so the container aspect follows the asset. */
.games{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.game{background:var(--panel);border:1px solid var(--line);overflow:hidden}
.game:hover{border-color:rgba(67,229,208,.4)}
.game .shot{aspect-ratio:3 / 2;background:var(--panel2);overflow:hidden}
.game .shot img{width:100%;height:100%;object-fit:cover}
.game .meta{padding:10px 11px}
.game .gname{font:600 13.5px/1.25 var(--fb);display:block;margin-bottom:3px}
.game .gprov{font-size:11.5px;color:var(--muted);display:block}
.game .gnum{font-size:11.5px;color:var(--accent2);display:block;margin-top:5px;letter-spacing:.3px}

/* ---------- screenshots ---------- */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line)}
.shots figure > div{aspect-ratio:16 / 11;overflow:hidden;background:var(--panel2)}
.shots img{width:100%;height:100%;object-fit:cover;object-position:top left}
.shots figcaption{padding:11px 14px;font-size:12.5px;color:var(--muted);border-top:1px dotted var(--line2)}
/* honest gap, not a broken image */
.shot.void{background:transparent;border:1px dashed var(--line2)}
.shot.void > div{
  display:grid;place-items:center;color:var(--muted);font-size:13px;font-style:italic;
  text-align:center;padding:20px;background:transparent;
}

/* ---------- faq ---------- */
details.faq{border:1px solid var(--line);background:var(--panel);margin-bottom:10px}
details.faq > summary{
  cursor:pointer;padding:15px 18px;font:600 15px/1.4 var(--fb);list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
}
details.faq > summary::-webkit-details-marker{display:none}
details.faq > summary::after{content:"\203A";color:var(--accent2);font-size:20px;line-height:1;transform:rotate(90deg)}
details.faq[open] > summary{color:var(--accent2)}
details.faq[open] > summary::after{transform:rotate(-90deg)}
details.faq .a{padding:0 18px 16px;color:var(--muted);font-size:14.5px}
details.faq .a p:last-child{margin-bottom:0}

/* ---------- authors: round medal = complete without a portrait ---------- */
.byline{display:flex;align-items:center;gap:14px;margin:22px 0 0;font-size:13.5px;color:var(--muted)}
.byline b{color:var(--fg);display:block;font-size:14.5px}
.byline b a{color:var(--fg)}
.medal{
  width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border-radius:50%;
  font:400 17px/1 var(--fh);letter-spacing:1.5px;color:var(--accent);
  background:radial-gradient(70% 70% at 50% 28%,#232C52 0%,var(--panel) 70%);
  border:1px solid rgba(242,178,52,.5);
  box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--line2);
  overflow:hidden;
}
.medal img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.medal.big{width:88px;height:88px;flex-basis:88px;font-size:30px}
/* when a real portrait is present the ring stays, the amber letter-glow goes */
.medal.has-portrait{background:var(--panel);border-color:var(--line2)}
/* author page: the full frame the badge was cropped from */
.authorphoto{margin:0 0 26px;max-width:420px;background:var(--panel);border:1px solid var(--line)}
.authorphoto img{width:100%;height:auto;aspect-ratio:1 / 1;object-fit:cover}
.authorphoto figcaption{
  padding:9px 12px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);
}
/* author page header (generator prints .byline.authorhead) */
.authorhead{align-items:flex-start;gap:20px;margin-top:0}
.authorhead>span{min-width:0}
.authorhead h1{margin:0 0 4px}
.pills{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:14px 0 0;list-style:none}
.pills li{
  font-size:12.5px;color:var(--muted);margin:0;padding:6px 12px;
  border:1px solid var(--line);border-radius:99px;background:var(--panel);
}

/* ---------- toc / crumbs / updated ---------- */
.toc{margin:0 0 6px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px;max-width:none}
.toc li{margin:0}
.toc a{
  font-size:12.5px;color:var(--muted);border:1px solid var(--line);border-radius:99px;
  padding:6px 12px;display:block;background:var(--panel);
}
.toc a:hover{color:var(--accent2);border-color:rgba(67,229,208,.4);text-decoration:none}
.crumbs{font-size:12.5px;color:var(--muted);padding:14px 0 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent2)}
.updated{font-size:12.5px;color:var(--muted);margin:0 0 14px}

/* ---------- footer ---------- */
footer.site{
  border-top:1px solid var(--line);margin-top:12px;padding:44px 0 26px;
  background:
    radial-gradient(80% 100% at 50% 118%,rgba(27,34,64,.6) 0%,transparent 62%),
    var(--bg2);
}
footer.site .cols{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:26px}
footer.site h4{font:600 11.5px/1 var(--fb);letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin:0 0 13px}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin-bottom:8px;font-size:13.5px}
footer.site a{color:var(--fg)}
footer.site a:hover{color:var(--accent2)}
footer.site .srcline{font-size:12.5px;max-width:32ch}
.agebadge{
  display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 8px;border-radius:50%;
  border:1px dotted var(--warn);color:var(--warn);font:600 13px/1 var(--fb);letter-spacing:.5px;
  margin-bottom:12px;
}
.legal{border-top:1px solid var(--line);margin-top:32px;padding-top:18px;font-size:12.5px;color:var(--muted)}
.legal p{max-width:none}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .games{grid-template-columns:repeat(4,1fr)}
  footer.site .cols{grid-template-columns:1fr 1fr 1fr}
  .hero .grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  section{padding:34px 0}
  section.hero{padding:44px 0 38px}
  .cards.c3,.cards.c2,.cards.c1{grid-template-columns:1fr}
  .pc{grid-template-columns:1fr}
  .shots{grid-template-columns:1fr}
  .games{grid-template-columns:repeat(3,1fr)}
  footer.site .cols{grid-template-columns:1fr 1fr}
  /* `padding:10px 0` here was overriding .wrap's own `0 20px`, so the whole header
     went edge-to-edge on a phone: nav items and the ad note started at x=0 while the
     rest of the page kept a 20px gutter. Keep the vertical change, keep the gutter. */
  header.site .bar{height:auto;flex-wrap:wrap;padding:10px 20px;gap:8px}
  nav.main{order:3;width:100%;margin-left:0}
  header.site .btn{margin-left:auto;padding:11px 14px;font-size:13px}
}
@media (max-width:420px){
  .games{grid-template-columns:1fr 1fr;gap:10px}
  .logo small{display:none}
  .btn{padding:13px 16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- narrow-viewport containment ----------
   Measured, not guessed: _tools\\nightluck_overflow.py reported 7 pages pushing the
   document 10-132px wider than a 375px viewport. Cause was grid/flex children keeping
   their default min-width:auto, so a facts table or a long CTA label set the column's
   min-content width and the hero grid outgrew .wrap. Letting those children shrink
   below content width is what makes the inner overflow-x:auto containers do their job. */
.hero .grid > *,
.pc > *,
.cards > *,
.shots > *,
.byline > span,
.panel,
main,
section > .wrap{min-width:0}
.tablewrap{max-width:100%}
nav.main{min-width:0}
.btns{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.btn{max-width:100%}
.adnote{max-width:100%}
/* Long unbreakable tokens. The sources block prints full URLs as its own link text
   (https://www.trustpilot.com/review/nightluck.org and friends) and that single token
   is wider than a 375px viewport, so it must be allowed to break mid-string. The block
   carries no class of its own, hence the element-level selector on main.
   Scope matters: applying this to td/th broke ordinary words in the wide payments
   table into "Masterc/ard" and "E-lomm/ebok". Cells wrap on word boundaries and the
   table scrolls instead. */
main li a,main p a,.src,.srcline,.toc a,figcaption,.adnote{overflow-wrap:anywhere}
td,th{overflow-wrap:normal;word-break:normal}
/* wide data tables keep readable column widths and scroll inside .tablewrap */
.tablewrap table{min-width:min(100%,560px)}

/* ---------- label/value tables stack on a phone ----------
   Two-column fact tables (td.k = label, next cell = value) were technically fine on
   375px - .tablewrap scrolled them - but the value column started off-screen, so the
   reader saw a list of labels and no answers. Wide data tables (payments, VIP tiers)
   have no td.k and keep scrolling, which is right for them. */
@media (max-width:600px){
  table tr:has(> td.k){display:block;border-bottom:1px solid var(--line);padding:9px 0}
  table tr:has(> td.k):last-child{border-bottom:0}
  td.k{display:block;border:0;padding:0 0 2px;font-size:12px;letter-spacing:.4px}
  td.k + td{display:block;border:0;padding:0}
  tr:has(> td.k) + tr td{border-top:0}
  /* a label/value table no longer needs the wide-table minimum */
  .tablewrap:has(td.k) table{min-width:0}
  /* fallback for engines without :has() - fixed layout beats a collapsed value column */
  table{table-layout:auto}

  /* V-8: the header ad note ran into the viewport edge, second line starting at x=1.
     The first attempt was inert: .headcta is a <span> (an inline flex ITEM of .bar,
     not a container) and .adnote.mini is inline, so flex-wrap/justify-content/max-width
     /text-align all had nothing to act on. Both need a box first. */
  .headcta{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;
           width:100%;min-width:0;gap:6px}
  .headcta .adnote.mini{display:block;width:100%;text-align:right;padding:0 2px 0 0}

  /* V-9: page name and the "last checked" stamp were glued together with no space */
  .crumbs,.crumbbar{display:block}
  .updated{display:block;margin-top:4px}
}

a.game{color:inherit;text-decoration:none;display:block}a.game:hover{text-decoration:none}