/* 12cucim: BLOOM template composition, recoloured with HEX values captured from 12cuci.co on 2026-11-09.
   Every colour below appears in the source's CSS, computed styles or logo; see DESIGN.md and docs/SOURCE-AUDIT.md. */
@font-face{font-family:"Outfit";src:url("fonts/outfit-var.woff2") format("woff2");font-weight:600 800;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/satoshi-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/satoshi-700.woff2") format("woff2");font-weight:700;font-display:swap}
/* Metric-matched fallbacks keep text from reflowing when the web fonts arrive. */
@font-face{font-family:"Outfit Fallback";src:local("Arial");size-adjust:100%;ascent-override:100%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"Satoshi Fallback";src:local("Arial");size-adjust:98%;ascent-override:102%;descent-override:24%;line-gap-override:0%}
:root{
  --bg:#000303;--panel:#011b1c;--surface:#011314;--surface-2:#001618;--teal-deep:#002f32;--teal-dark:#003336;--line:#004446;--teal-mid:#005355;--teal-edge:#005d5e;--teal:#006364;--teal-green:#017f70;--cyan:#1dd4ce;--cyan-soft:#68d4cc;
  --ink:#ffffff;--muted:#dddddd;--soft:#cccccc;
  --gold:#f3ba01;--gold-2:#ffc712;--gold-hi:#fff558;--gold-deep:#e49000;--gold-soft:#eab92d;--red:#c60008;
  --gold-grad:linear-gradient(135deg,#f39c12,#f8b739);--logo-grad:linear-gradient(180deg,#fff558 0%,#f3ba01 55%,#e49000 100%);--teal-grad:linear-gradient(180deg,#005d5e 0%,#003336 55%,#002f32 100%);
  --radius:24px;--body:"Satoshi","Satoshi Fallback",Arial,sans-serif;--display:"Outfit","Outfit Fallback",Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px;scrollbar-color:var(--teal) var(--bg);-webkit-text-size-adjust:100%;color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;overflow-wrap:break-word}
::selection{background:var(--gold);color:#000}
a{color:inherit;text-decoration:none;text-underline-offset:4px}
a:hover{text-decoration:underline}
button,input,textarea,select{font:inherit}
button,a,input,textarea,select,summary{touch-action:manipulation}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.6}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;flex-shrink:0}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.14;text-wrap:balance;margin:0 0 20px;color:var(--ink)}
h1{font-size:clamp(2rem,3.7vw,3.6rem);letter-spacing:-.02em;max-width:1150px}
h2{font-size:30px;letter-spacing:-.015em}
h3{font-size:21px}
p{color:var(--muted);margin:0 0 21px;max-width:70ch}
small,.metadata{font-size:13px;color:var(--soft);line-height:1.5}
img{max-width:100%;height:auto;display:block}
button,input,textarea,select{accent-color:var(--gold);caret-color:var(--gold)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Actions: gold pill after 12cuci's Register and Download buttons, lift on hover */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;background:var(--gold-grad);color:#111;font-family:var(--display);font-size:14px;font-weight:700;line-height:1.3;border:1px solid var(--gold);border-radius:var(--radius);width:fit-content;max-width:100%;transition:transform .2s ease,filter .2s ease,box-shadow .2s ease}
.button svg{width:16px;height:16px}
.button:hover{filter:brightness(1.07);transform:translateY(-2px);text-decoration:none;box-shadow:0 6px 18px #f3ba0140}
.button.secondary{background:var(--teal);color:#fff;border-color:var(--teal-edge)}
.button.secondary:hover{box-shadow:0 6px 18px #1dd4ce30}
.button.ghost{background:transparent;color:var(--ink);border-color:var(--teal-edge)}
.ad-tag{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:6px;background:#000;color:var(--gold-hi);line-height:1.3}
.aff-note{font-size:13px;line-height:1.55;color:var(--soft);margin:12px 0 0;max-width:62ch}
.aff-note a{text-decoration:underline;color:var(--cyan)}

/* Brand: original lettering in the logo's gold, not the operator's logo */
.brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;font-family:var(--display);line-height:1;white-space:nowrap;min-height:44px;justify-content:center}
.brand:hover{text-decoration:none}
.brand strong{font-size:24px;font-weight:800;letter-spacing:.02em;transform:skewX(-8deg);color:#fff}
.brand strong i{font-style:normal;background:var(--logo-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-2);line-height:1.2}

/* Toolbar: black bar with the source's teal rule beneath */
.site-header{min-height:80px;display:flex;align-items:center;gap:14px;padding:14px 3%;background:#000303;color:#fff;border-bottom:3px solid var(--teal-mid);position:relative;z-index:30}
.site-header .brand{margin-right:auto}.site-header>*{flex-shrink:0}
.main-nav{display:flex;gap:18px;align-items:center;font-family:var(--display);font-size:14px;font-weight:600}
.main-nav a{white-space:nowrap;padding:8px 0}
.main-nav a[aria-current]{color:var(--gold-2);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.header-search{display:flex;align-items:center;position:relative}
.header-search input{width:170px;min-height:44px;padding:8px 40px 8px 14px;border-radius:22px;border:1px solid var(--teal-edge);background:var(--surface);color:#fff;font-size:14px}
.header-search input::placeholder{color:var(--soft);opacity:1}
.header-search button{position:absolute;right:0;top:0;width:44px;height:44px;display:grid;place-items:center;background:transparent;border:0;color:var(--gold-2);border-radius:22px}
.header-search button svg{width:18px;height:18px}
.search-link{display:none;width:44px;height:44px;place-items:center;border-radius:12px;border:1px solid var(--teal-edge);color:#fff}
.lang-switch{display:flex;border:1px solid var(--teal-edge);border-radius:12px;overflow:hidden;font-family:var(--display);font-size:12px;font-weight:700}
.lang-switch a,.lang-switch span{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0 8px}
.lang-switch span{background:var(--gold);color:#111}
.lang-switch a{color:#fff}
.lang-switch a:hover{background:var(--teal-dark);text-decoration:none}
.header-cta{white-space:nowrap;padding-left:16px;padding-right:16px}.nav-search{display:none}
.header-cta .short{display:none}
.menu-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;padding:8px;background:var(--teal-dark);color:#fff;border:1px solid var(--teal-edge);border-radius:12px}
.skip{position:fixed;top:-150px;left:15px;z-index:100;background:var(--gold);color:#111;padding:15px}
.skip:focus{top:15px}

/* Hero on the homepage: toolbar sits on the photograph, giant wordmark at the lower edge, as in BLOOM */
.page-index .site-header{position:absolute;top:0;left:3%;right:3%;background:#011b1cd9;border-radius:22px 22px 0 0;padding:14px 24px;border-bottom:1px solid var(--teal-edge)}
.layout-shell{position:relative;min-width:0}
.site-content{max-width:1700px;margin:auto;padding:0 3%;min-width:0}
.bloom-hero{height:clamp(640px,92vh,830px);position:relative;isolation:isolate;border-radius:0 0 22px 22px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column;justify-content:flex-end;padding:0 4% 30px}
.bloom-hero picture{position:absolute;inset:52px 0 0;z-index:-2}
.bloom-hero picture img{width:100%;height:100%;object-fit:cover;object-position:center top}
.bloom-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#00030340 0%,#00030300 34%,#011b1cbf 66%,#011b1c 100%);z-index:-1}
.bloom-caption{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:22px}
.bloom-caption p{color:#fff;font-size:18px;line-height:1.5;max-width:44ch;margin:0}
.bloom-caption .hero-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px;flex-shrink:0}
.bloom-caption .hero-actions .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.bloom-caption .aff-note{color:#fff;margin:0;text-align:right}
.bloom-hero h1{max-width:none;margin:0;color:#fff;display:flex;flex-direction:column}
.bloom-hero h1 .word{display:block;font-weight:800;text-transform:uppercase;letter-spacing:-.04em;line-height:.88;font-size:clamp(64px,23vw,400px);text-align:center;white-space:nowrap;order:2}
.bloom-hero h1 .word i{font-style:normal;background:var(--logo-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bloom-hero h1 .sub{display:block;order:1;font-size:clamp(15px,1.5vw,22px);font-weight:600;letter-spacing:.005em;line-height:1.3;text-align:center;margin-bottom:6px;text-wrap:balance;color:var(--gold-hi)}
.bloom-strip{display:flex;align-items:center;justify-content:space-around;gap:22px;background:#000;color:#fff;padding:15px 20px;font-size:13px;letter-spacing:.02em;border-radius:0 0 18px 18px;border-top:2px solid var(--teal-mid)}
.bloom-strip>span{display:flex;gap:12px;align-items:center;min-height:32px}
.bloom-strip svg{width:18px;height:18px;color:var(--gold-2)}

/* At a glance */
.home-glance{display:grid;grid-template-columns:1.1fr .9fr;gap:6%;padding:60px 0 20px;align-items:start}
.answer{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:14px;padding:18px 20px;margin:0 0 22px;color:#fff;font-size:18px;line-height:1.65;max-width:80ch}
.glance{margin:0 0 26px;display:grid;gap:0;border-top:1px solid var(--line)}
.glance>div{display:grid;grid-template-columns:minmax(120px,.75fr) 1.25fr;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.glance dt{font-weight:700;font-size:14px;color:var(--gold-2)}
.glance dd{margin:0;font-size:15px;color:var(--muted)}
.glance a{color:var(--cyan);text-decoration:underline}

/* Game categories: tab row and gold-framed cards after the source's lobby tiles */
.games-section{padding:40px 0 10px}
.cat-nav{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;margin:0 0 22px;scrollbar-width:thin}
.cat-nav a{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;min-height:48px;padding:10px 16px;border-radius:12px;background:#00000080;color:#fff;font-family:var(--display);font-size:14px;font-weight:600;border:1px solid var(--teal-edge);transition:transform .2s ease,filter .2s ease}
.cat-nav a svg{width:18px;height:18px;color:var(--gold-hi)}
.cat-nav a:hover{text-decoration:none;transform:translateY(-2px);background:var(--teal-dark)}
.cat-nav a[aria-current]{background:var(--gold-grad);color:#111;border-color:var(--gold)}
.cat-nav a[aria-current] svg{color:#111}
.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.game-card{display:flex;flex-direction:column;border-radius:20px;padding:2px;background:linear-gradient(160deg,#fff558 0%,#f3ba01 30%,#005d5e 70%,#003336 100%);transition:transform .22s ease,box-shadow .22s ease}
.game-card:hover{transform:translateY(-4px);box-shadow:0 10px 26px #1dd4ce26;text-decoration:none}
.game-card>span.inner{display:flex;flex-direction:column;flex:1;border-radius:18px;overflow:hidden;background:var(--surface)}
.game-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.game-card .fishing-crop{object-position:center 12%}
.game-card .label{display:flex;flex-direction:column;gap:6px;padding:12px 14px 14px;flex:1;background:var(--teal-grad);color:#fff}
.game-card .label :is(h2,h3){font-size:17px;line-height:1.25;margin:0}
.game-card .label>span:not(.chip){font-size:14px;line-height:1.4;color:var(--muted)}
.chip{display:inline-flex;width:fit-content;align-items:center;font-size:12px;font-weight:700;line-height:1.3;padding:3px 9px;border-radius:9px}
.chip.listed{background:var(--cyan);color:#000}
.chip.partial{background:var(--gold-hi);color:#000}
.chip.unconfirmed{background:#000;color:#fff;border:1px solid var(--red)}
.all-card .inner{justify-content:center;align-items:center;text-align:center;padding:20px;background:var(--teal-dark);color:#fff;gap:10px;font-family:var(--display);font-weight:700}
.all-card .inner svg{color:var(--gold-hi);width:30px;height:30px}

/* Reading and story sections */
.bloom-story{display:grid;grid-template-columns:1fr 1fr;gap:7%;padding:65px 0;align-items:center}
.bloom-story h2{font-size:clamp(30px,3.4vw,50px);line-height:1.1}
.bloom-story>div>p{font-size:18px}
.bloom-story figure{margin:0;justify-self:center;width:100%;max-width:480px}
.bloom-story figure img{width:100%;max-height:440px;object-fit:cover;aspect-ratio:1;border-radius:24px;border:2px solid var(--gold)}
.bloom-story figure.story-wide{max-width:640px}
.bloom-story figure.story-wide img{aspect-ratio:auto;max-height:none;height:auto}
.method{padding:10px 0 30px}
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;color:var(--muted);font-size:15px;line-height:1.6}
.steps li::before{content:counter(s);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--gold-grad);color:#111;font-family:var(--display);font-weight:800;margin-bottom:12px}
.steps strong{color:#fff;display:block;margin-bottom:4px}
.steps a{color:var(--cyan);text-decoration:underline}
.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin:0 0 20px}
.section-heading h2{margin:0}
.section-heading>a,.text-link{display:inline-flex;gap:10px;align-items:center;font-size:14px;font-weight:700;min-height:44px}
.section-heading>a{flex-shrink:0;color:var(--gold-2);text-decoration:underline}
.home-notes{margin:30px 0 55px}
.reading-list>a{display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid var(--line);padding:22px 0}
.reading-list>a:last-child{border-bottom:1px solid var(--line)}
.reading-list strong{font-family:var(--display);font-size:22px;line-height:1.3;display:block;margin-top:6px;color:#fff}
.reading-list small{color:var(--cyan);font-weight:700}
.reading-list>a svg{color:var(--gold-2)}
.reading-list>a:hover{text-decoration:none}
.reading-list>a:hover strong{text-decoration:underline}
.closing-action{display:flex;align-items:center;justify-content:space-between;gap:35px;padding:44px 4%;background:var(--teal-grad);border:1px solid var(--teal-edge);border-radius:24px;margin:55px 0}
.closing-action h2{font-size:clamp(1.8rem,3vw,2.8rem);max-width:850px;color:#fff}
.closing-action p{margin:0;color:#fff}
.closing-action p a{color:var(--gold-hi);text-decoration:underline}
.closing-action .side{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:340px}
.closing-action .aff-note{color:#fff;margin:0}
.closing-action .aff-note a{color:var(--gold-hi)}
.page-intro{padding:26px 0 36px;max-width:1150px}
.page-intro p{font-size:18px;line-height:1.7}
.cat-intro{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center;max-width:1250px}
.cat-intro figure{margin:0}
.cat-intro figure img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:22px;border:2px solid var(--gold)}
.status-line{display:flex;align-items:center;gap:10px;font-size:14px;margin:0}
.kicker{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-2);margin:0 0 10px}
.reading-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:55px;max-width:1250px;padding-bottom:30px}
.contents{display:flex;flex-direction:column;align-items:start;gap:6px;font-size:14px;position:sticky;top:20px;align-self:start}
.contents a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;min-height:32px;display:flex;align-items:center;line-height:1.3;padding:3px 0}
.contents a:hover{color:var(--gold-2)}
.contents>strong{font-family:var(--display);margin-bottom:6px;color:var(--gold-2)}
.side-glance{position:sticky;top:20px;align-self:start}
.side-glance .glance>div{grid-template-columns:1fr;gap:4px}
.prose{font-size:18px;line-height:1.8;max-width:74ch;min-width:0}
.prose p,.prose li{color:var(--muted);max-width:74ch}
.prose a:not(.button){color:var(--cyan);text-decoration:underline;font-weight:500}
.prose strong{color:#fff}
.prose h2{font-size:28px;margin:44px 0 16px}
.prose>h2:first-child,.prose>section:first-child h2{margin-top:0}
.prose h3{font-size:21px;margin:28px 0 12px;color:var(--gold-2)}
.prose li{padding:3px 0}
.prose ul,.prose ol{padding-left:24px;margin:0 0 21px}
.prose li::marker{color:var(--gold-2)}
.prose>section{scroll-margin-top:35px}
.prose.wide{max-width:920px}
.lead{font-size:21px;line-height:1.6;color:#fff}
details{border-top:1px solid var(--line)}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-family:var(--display);font-size:17px;font-weight:600;line-height:1.45;padding:16px 0;color:#fff;min-height:48px;list-style-position:outside;margin-left:20px}
summary::marker{color:var(--gold-soft)}
details[open] summary{color:var(--gold-2)}
details p{font-size:16px;margin:0 0 18px 20px}
details a{color:var(--cyan);text-decoration:underline}
.table-scroll{position:relative;overflow-x:auto;margin:0 0 24px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5;min-width:480px}
caption{text-align:left;padding:12px 14px;font-weight:700;color:var(--gold-2);font-size:14px}
th,td{padding:11px 14px;text-align:left;vertical-align:top;border-top:1px solid var(--line);color:var(--muted)}
thead th{color:#000;font-weight:700;background:var(--gold-2)}
tbody th{color:#fff;font-weight:700}
.source-list{font-size:14px;line-height:1.6;border-top:1px solid var(--line);margin-top:34px;padding-top:18px}
.source-list h2{font-size:18px;margin:0 0 10px!important}
.source-list ul{padding-left:20px;margin:0 0 10px}
.source-list li,.source-list p{font-size:14px;padding:2px 0}
.ext svg{width:13px;height:13px;margin-left:4px;vertical-align:-1px;display:inline-block}
.notice{display:flex;gap:12px;align-items:flex-start;background:#000;border:1px solid var(--red);border-radius:14px;padding:16px 18px;margin:0 0 24px;color:#fff;font-size:16px;line-height:1.6;max-width:80ch}
.notice svg{color:var(--gold-2);margin-top:2px}
.notice strong{color:#fff}
.notice a{text-decoration:underline;color:var(--cyan)}

.spacer-lg{height:44px}.not-found{padding-top:60px}.not-found a{text-decoration:underline;color:var(--cyan)}

/* Breadcrumbs */
.breadcrumbs{padding:18px 0 0;font-size:13px}
.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:0 6px;list-style:none;margin:0;padding:0;color:var(--soft)}
.breadcrumbs li{display:flex;align-items:center;gap:6px}
.breadcrumbs li+li::before{content:'›';color:var(--gold-2)}
.breadcrumbs a{text-decoration:underline;display:inline-flex;align-items:center;min-height:32px}
.breadcrumbs [aria-current]{color:#fff;font-weight:700}

/* About, author and contact */
.about-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:7%;align-items:start;padding-bottom:30px}
.about-art img{width:100%;border-radius:var(--radius);aspect-ratio:1;object-fit:cover;border:2px solid var(--gold)}
.author-card{display:flex;gap:18px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;margin:34px 0 0;max-width:820px}
.author-card p{margin:0;font-size:15px;line-height:1.55}
.author-card a{color:var(--cyan);text-decoration:underline}
.monogram{display:grid;place-items:center;flex-shrink:0;width:64px;height:64px;border-radius:50%;background:var(--teal-grad);border:2px solid var(--gold);color:var(--gold-hi);font-family:var(--display);font-size:22px;font-weight:800}
.monogram.large{width:140px;height:140px;font-size:50px}
.author-intro{display:flex;gap:30px;align-items:center}
.author-intro h1{margin-bottom:8px}.author-intro .lead{margin:0}
.profile-links{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0!important;margin:0 0 22px}
.profile-links li{padding:0}
.profile-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px;border:1px solid var(--teal-edge);border-radius:22px;background:var(--surface);color:#fff!important;text-decoration:none!important;font-weight:700;font-size:14px}
.contact-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:7%;max-width:1200px;margin-bottom:55px}
.contact-layout>section>h2{font-size:28px}
.contact-facts{margin:26px 0;display:grid;gap:18px}
.contact-facts>div{display:grid;gap:4px}
.contact-facts dt{font-size:13px;color:var(--gold-2);font-weight:700}
.contact-facts dd{margin:0;font-size:15px;color:var(--muted)}
.contact-facts a{text-decoration:underline;color:var(--cyan)}
form.panel{background:var(--surface);border:1px solid var(--line);padding:30px;border-radius:var(--radius)}
form.panel h2{font-size:26px}
form.panel label{display:block;font-size:14px;font-weight:700;margin:20px 0 8px;color:#fff}
form.panel input,form.panel textarea,form.panel select{display:block;width:100%;min-height:48px;padding:12px;background:var(--bg);color:#fff;border:1px solid var(--teal-edge);border-radius:8px}
form.panel textarea{resize:vertical}
form.panel .button{margin-top:24px}
form.panel [role=status]:not(:empty){margin:20px 0 0;padding:15px;border:1px solid var(--cyan);border-radius:10px;color:#fff;background:var(--teal-dark)}
.demo-note{font-size:14px;line-height:1.6;margin-top:14px}

/* Archive and search */
.archive-controls{display:flex;align-items:end;justify-content:space-between;gap:25px;flex-wrap:wrap;margin-bottom:30px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filter{font-size:14px;font-weight:700;min-height:48px;border:1px solid var(--teal-edge);padding:10px 16px;background:var(--surface);color:#fff;border-radius:var(--radius)}
.filter[aria-pressed=true]{background:var(--gold-grad);border-color:var(--gold);color:#111}
.search{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--soft)}
.search input{width:260px;max-width:100%;min-height:48px;border:1px solid var(--teal-edge);border-radius:var(--radius);background:var(--surface);color:#fff;padding:10px 15px;font-size:15px}
.article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.article-card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease}
.article-card:hover{transform:translateY(-3px);box-shadow:0 8px 22px #1dd4ce1f}
.article-card>a{display:block;height:100%}
.article-card>a:hover{text-decoration:none}
.article-card>a:hover h2{text-decoration:underline}
.article-art{width:100%;aspect-ratio:16/10;object-fit:cover}
.article-copy{padding:20px 22px 22px}
.article-copy small{color:var(--cyan);font-weight:700}
.article-copy :is(h2,h3){font-size:21px;margin:8px 0 12px}
.article-copy p{font-size:15px;line-height:1.6}
.article-copy .text-link{color:var(--gold-2);min-height:0}
.no-results{padding:30px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:#fff}
.search-form{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px;max-width:640px}
.search-form input{flex:1;min-width:200px;min-height:48px;padding:10px 16px;border:1px solid var(--teal-edge);border-radius:24px;background:var(--surface);color:#fff}
#search-summary{min-height:26px}.results{list-style:none;padding:0;margin:0;max-width:820px}
.results li{border-top:1px solid var(--line);padding:18px 0}
.results a{font-family:var(--display);font-size:19px;font-weight:700;color:var(--cyan);text-decoration:underline}
.results p{margin:6px 0 0;font-size:15px}
.results mark{background:var(--gold-2);color:#000}
.popular{margin:40px 0 20px;max-width:820px}
.topic-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.topic-list a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;font-weight:700}
.topic-list a svg{color:var(--gold-2)}
.topic-list a:hover{border-color:var(--gold);text-decoration:none}
@media(max-width:760px){.topic-list{grid-template-columns:1fr}}

/* Posts */
.post-intro{padding:22px 0 25px;max-width:1100px}
.post-intro h1{font-size:clamp(1.9rem,3.5vw,3.4rem)}
.post-deck{font-size:20px;line-height:1.6;color:#fff}
.byline a{text-decoration:underline;color:var(--cyan)}
.post-cover{height:330px;max-width:1250px;overflow:hidden;display:grid;place-items:center;background:var(--teal-grad);border:1px solid var(--teal-edge);border-radius:var(--radius);margin-bottom:45px}
.post-cover img{width:330px;height:330px;max-width:100%;object-fit:cover}

/* Pop-up after 12cuci's announcement dialog: dark rounded panel, content on top, pill tabs underneath, round
   light close button at the top right */
.promo-dialog{border:0;padding:0;background:transparent;width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:visible;color:#fff}
.promo-dialog::backdrop{background:#000303d9}
.promo-dialog[open]{display:block;animation:promo-in .25s ease}
@keyframes promo-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.promo-card:focus{outline:none}
.promo-card{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;background:var(--panel);border:1px solid var(--teal-edge);border-radius:22px;padding:22px;max-height:calc(100dvh - 24px);overflow:hidden;box-shadow:0 20px 60px #000}
.promo-panels{min-width:0;min-height:0;overflow-y:auto;padding:0 40px 2px 2px}
.promo-kicker{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin:0 0 6px}
.promo-panel h2{font-size:26px;margin:0 0 14px;color:#fff}
.promo-panel p,.promo-panel li{font-size:15px;line-height:1.55;color:var(--muted)}
.promo-panel p{margin:0 0 12px}
.promo-panel ul{padding-left:20px;margin:0}
.promo-panel li{padding:4px 0}
.promo-panel a:not(.button){color:var(--gold-hi);text-decoration:underline}
.promo-offers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px}
.promo-offers>div{background:#000;border:1px solid var(--gold);border-radius:14px;padding:14px 8px;text-align:center}
.promo-offers strong{display:block;font-family:var(--display);font-size:32px;font-weight:800;line-height:1.05;background:var(--logo-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.promo-offers span{font-size:12px;line-height:1.35;display:block;margin-top:6px;color:#fff}
.promo-actions{display:flex;gap:10px;flex-wrap:wrap;margin:4px 0 0}
.domain-list{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;list-style:none;padding:0!important;margin:0 0 14px!important}
.domain-list li{font-size:15px;font-weight:700;color:var(--gold-hi);padding:0}
.promo-tabs{display:flex;gap:8px;background:#000;border:1px solid var(--line);border-radius:999px;padding:5px}
.promo-tabs button{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:0;background:transparent;border-radius:999px;color:#fff;font-family:var(--display);font-size:14px;font-weight:600;line-height:1.2;padding:6px 10px}
.promo-tabs button svg{width:18px;height:18px;color:var(--gold-2)}
.promo-tabs button:hover{background:var(--teal-dark)}
.promo-tabs button[aria-selected=true]{background:var(--gold-grad);color:#111;font-weight:700}
.promo-tabs button[aria-selected=true] svg{color:#111}
.promo-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:#f0f0f0;color:#111;display:grid;place-items:center;transition:transform .2s ease;box-shadow:0 2px 10px #0008}
.promo-close svg{width:20px;height:20px}
.promo-close:hover{transform:scale(1.08)}
body.dialog-open{overflow:hidden}

/* Mobile tab bar after 12cuci's bottom navigation: teal gradient, raised gold coin */
.tab-bar{display:none}

/* Footer */
.site-footer{display:grid;grid-template-columns:1.2fr 1.6fr;gap:30px 60px;padding:44px 3% 36px;background:#000;border-top:3px solid var(--teal-mid);color:#fff;margin-top:20px}
.site-footer p{font-size:14px;margin:0 0 10px;color:var(--muted);line-height:1.6;max-width:62ch}
.site-footer p strong{color:#fff}
.site-footer .brand{margin-bottom:14px}
.site-footer nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 20px;font-size:14px;align-content:start}
.site-footer nav a{display:flex;align-items:center;min-height:40px;line-height:1.25}
.site-footer nav a:hover{color:var(--gold-2)}
.site-footer .legal{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px;font-size:13px}
.site-footer .legal a{text-decoration:underline;color:var(--gold-hi)}
.site-footer .legal p{font-size:13px;max-width:none}
.text-button{background:none;border:0;padding:0;color:var(--gold-hi);text-decoration:underline;font-size:inherit;min-height:24px}

/* Homepage sections from the SEO heading plan */
.home-block{padding:56px 0 6px;max-width:1250px}
.home-block>h3{font-size:22px;margin:34px 0 16px;color:var(--gold-2)}
.home-block .home-glance{padding:0}
.lead-sm{font-size:17px;max-width:80ch}
.plain-list{padding-left:22px;margin:0 0 20px;max-width:80ch}
.plain-list li{color:var(--muted);padding:5px 0;font-size:16px}
.plain-list a,.home-block p a,.policy-links a,.more-link a{color:var(--cyan);text-decoration:underline}
.offer-list{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:520px}
.offer-list li{background:#000;border:1px solid var(--gold);border-radius:12px;padding:10px 14px;color:#fff;font-size:15px;line-height:1.35}
.offer-list strong{display:block;font-family:var(--display);font-size:24px;font-weight:800;background:var(--logo-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.more-link{margin:18px 0 0;font-weight:700}
.home-final{padding-top:20px}
.home-final .closing-action{margin:40px 0 10px}
.section-heading h3{margin:0;font-size:26px}
.policy-links{font-size:15px;line-height:1.9;margin:22px 0 0;max-width:none}

/* Below-the-fold regions skip layout and text shaping until they approach the viewport, which keeps the first
   layout short on phones. The intrinsic size reserves space so the scrollbar does not jump. */
.home-glance,.games-section,.bloom-story,.home-block,.home-notes,.closing-action,.site-footer,.prose>section,.article-grid,.faq-list,.source-list{content-visibility:auto;contain-intrinsic-size:auto 700px}

@media(max-width:1440px){.header-search{display:none}.search-link{display:grid}}
@media(max-width:1300px){.header-cta .long{display:none}.header-cta .short{display:inline}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1180px){
  .nav-search{display:flex}
  .site-header{padding:12px 16px;gap:10px;flex-wrap:nowrap}
  .page-index .site-header{left:0;right:0;border-radius:0;padding:12px 16px}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--panel);padding:10px 16px 16px;flex-direction:column;align-items:stretch;gap:0;border-bottom:3px solid var(--teal-mid);font-size:16px}
  .main-nav.open{display:flex}
  .main-nav a{padding:12px 6px;min-height:48px}
  .menu-toggle{display:flex}
  .site-content{padding:0 16px}
  .bloom-hero{border-radius:0 0 18px 18px}
  .home-glance{grid-template-columns:1fr;gap:10px}
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .reading-layout{grid-template-columns:1fr;gap:26px}
  .contents,.side-glance{position:static}
  .contents{flex-direction:row;flex-wrap:wrap;gap:4px 18px;padding-bottom:20px;border-bottom:1px solid var(--line)}
  .contents>strong{width:100%}
  .article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .promo-card{padding:16px;gap:12px;border-radius:18px}
  .promo-panels{padding:0 44px 2px 2px;max-height:calc(100dvh - 130px)}
  .promo-offers strong{font-size:26px}
  .promo-tabs button{font-size:12px;padding:6px 4px;gap:5px}
  .promo-tabs button svg{display:none}
  .promo-panel h2{font-size:22px}
  body{font-size:15px;padding-bottom:78px}
  html{scroll-padding-top:20px}
  .site-header{min-height:66px;padding:10px 12px;gap:6px}
  .page-index .site-header{padding:10px 12px}
  .brand strong{font-size:19px}
  .brand small{font-size:8px;letter-spacing:.08em}
  .header-cta{padding:8px 10px;min-height:44px;font-size:12px;gap:5px}
  .header-cta svg{display:none}
  .lang-switch span{display:none}
  .bloom-hero{height:clamp(640px,calc(100svh - 70px),760px);padding:0 16px 22px}
  .bloom-hero picture img{object-position:50% top}
  .bloom-hero::after{background:linear-gradient(180deg,#00030340 0%,#00030300 26%,#011b1cd9 58%,#011b1c 100%)}
  .bloom-caption{display:block;margin-bottom:16px}
  .bloom-caption p{font-size:16px;margin-bottom:14px}
  .bloom-caption .hero-actions{align-items:flex-start}
  .bloom-caption .hero-actions .row{justify-content:flex-start}
  .bloom-caption .aff-note{text-align:left}
  .bloom-hero h1 .word{font-size:calc((100vw - 48px)/4.3)}
  .bloom-strip{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 18px;font-size:13px}
  .home-glance{padding:36px 0 10px}
  .glance>div{grid-template-columns:1fr;gap:2px}
  .games-section{padding:30px 0 6px}
  .bloom-story{grid-template-columns:1fr;gap:26px;padding:40px 0}
  .bloom-story>div>p{font-size:17px}
  .steps{grid-template-columns:1fr}
  .section-heading{align-items:center;gap:16px;margin-bottom:18px}
  .section-heading h2{font-size:24px}
  .home-notes{margin:18px 0 40px}
  .reading-list strong{font-size:19px}
  .reading-list>a{gap:18px;padding:18px 0}
  .closing-action{display:block;padding:30px 20px;margin:40px 0}
  .closing-action p{margin-bottom:20px}
  .closing-action .side{max-width:none}
  .page-intro{padding:14px 0 26px}
  .page-intro h1,.post-intro h1{font-size:clamp(1.7rem,7.4vw,2.4rem);line-height:1.16}
  .page-intro p{font-size:17px}
  .cat-intro{grid-template-columns:1fr;gap:20px}
  .cat-intro figure{max-width:260px}
  .answer{font-size:16px;padding:15px 16px}
  h2{font-size:25px}
  .prose{font-size:16.5px;line-height:1.75}
  .prose h2{font-size:24px;margin-top:36px}
  .prose h3{font-size:20px}
  .lead{font-size:18px}
  .about-layout,.contact-layout{grid-template-columns:1fr;gap:30px}
  .about-art{max-width:360px}
  .author-intro{flex-direction:column;align-items:flex-start;gap:18px}
  .monogram.large{width:100px;height:100px;font-size:36px}
  form.panel{padding:22px}
  .archive-controls{gap:18px}
  .search,.search input{width:100%}
  .article-grid{grid-template-columns:1fr;gap:18px}
  .post-deck{font-size:18px}
  .post-cover{height:240px;margin-bottom:28px}.post-cover img{width:240px;height:240px}
  .site-footer{grid-template-columns:1fr;gap:22px;padding:30px 18px 26px}
  .site-footer nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tab-bar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--teal-grad);border-top:1px solid var(--teal-edge);border-radius:16px 16px 0 0;padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px #000a}
  .tab-bar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;color:#fff;font-family:var(--display);font-size:11px;font-weight:600;line-height:1.15;text-align:center;text-transform:uppercase;letter-spacing:.03em}
  .tab-bar a:hover{text-decoration:none}
  .tab-bar a svg{width:22px;height:22px;color:#fff}
  .tab-bar a[aria-current]{color:var(--gold-hi)}
  .tab-bar a[aria-current] svg{color:var(--gold-hi)}
  .tab-bar .tab-promo{margin-top:-22px;color:var(--gold-hi)}
  .tab-bar .tab-promo .disc{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--logo-grad);border:3px solid var(--teal-dark);color:#111;box-shadow:0 3px 12px #f3ba0166}
  .tab-bar .tab-promo svg{color:#111;width:26px;height:26px}
}
@media(max-width:430px){.search-link{display:none}.bloom-strip{grid-template-columns:1fr}.promo-offers{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.promo-offers>div{padding:10px 4px}.promo-offers span{font-size:11px}}
@media(max-width:360px){
  .page-intro h1,.post-intro h1{font-size:1.45rem}
  .site-header,.page-index .site-header{padding:10px 8px;gap:4px}
  .brand small{display:none}
  .brand strong{font-size:17px}
  .lang-switch a{min-width:44px;padding:0 4px}
  .header-cta{padding:8px 7px;gap:4px}
  .header-cta .ad-tag{font-size:9px;padding:1px 4px}
  .promo-offers strong{font-size:21px}
  .domain-list{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{.site-header,.tab-bar,.promo-dialog,.site-footer nav{display:none}}