/* Lumen pass over moddwyn.com, linked from index.html (Clearcoat 2026-09-20, Lumen since 2026-10-24). Same layout, same words; only the
   material changes. Most of the page is inline-styled, so attribute selectors
   with !important are how this reaches it. */

/* ---- atmosphere: grid kept, laid over soft glows, barely visible ---- */
#app{
  background-color:var(--cc-atmos-base)!important;
  background-image:
    linear-gradient(var(--cc-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--cc-grid) 1px,transparent 1px),
    radial-gradient(900px 700px at -8% -10%,var(--cc-glow-a),transparent 70%),
    radial-gradient(1000px 800px at 108% 4%,var(--cc-glow-b),transparent 70%),
    radial-gradient(1000px 700px at 50% 118%,var(--cc-glow-c),transparent 70%)!important;
  background-size:24px 24px,24px 24px,auto,auto,auto!important;
  background-attachment:fixed!important;
}
/* the drawing-sheet side rules would slice the atmosphere; panels float instead */
#main section,#main > div > section,#footer > div{border-left-color:transparent!important;border-right-color:transparent!important}

/* ---- header: flush frosted frame with a lit bottom edge ---- */
.mh{background:var(--cc-frame)!important;backdrop-filter:blur(24px) saturate(1.6) brightness(1.06);-webkit-backdrop-filter:blur(24px) saturate(1.6) brightness(1.06);border-bottom:0!important;box-shadow:var(--cc-frame-edge)}
.mh-in{padding:9px 18px!important}
.mh-meta{border-left-color:var(--cc-hair)!important}
.mh-b{border:0!important;border-radius:999px!important;background:var(--cc-btn)!important;box-shadow:var(--cc-btn-shadow);padding:7px 13px!important;backdrop-filter:blur(10px);transition:box-shadow .16s,transform .16s,color .16s!important}
.mh-b:hover{transform:translateY(-1px);color:var(--ac)!important}
.mh-b.on{background:var(--cc-btn-on)!important;box-shadow:var(--cc-btn-on-shadow);color:var(--ac)!important}
.mh-tag{border-radius:999px;padding:1px 6px!important;border-color:color-mix(in srgb,#c99a3c 60%,transparent)!important;background:color-mix(in srgb,#c99a3c 12%,transparent)}
.mh-dot{box-shadow:0 0 0 3px color-mix(in srgb,#2f9e63 22%,transparent),0 0 8px #2f9e63!important}

/* ---- HUD strip: bespoke instrument, keep; recess the scroll trough ---- */
#hud > div{box-shadow:inset 0 -1px 0 rgba(111,208,255,.12)}
#hud span[style*="width:56px;height:5px"]{border-radius:99px;border:0!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
#hud span[style*="width:56px;height:5px"] > span{border-radius:99px;background:linear-gradient(180deg,#9fe2ff,#4fbff5)!important}

/* ---- panels: the three wings, case cards, spec sheets, datasheet ---- */
.panel-eng,.panel-modd,.engrow,
.modeswrap > div,
#main div[style*="border:1px solid var(--line);background:var(--panel);padding:15px 16px"],
#main div[style*="border:1px solid var(--line);background:var(--panel);"]:not(.mh-b){
  border:1px solid var(--cc-rim)!important;
  border-radius:var(--cc-r-panel)!important;
  background:var(--cc-face)!important;
  box-shadow:var(--cc-shadow),var(--cc-edge)!important;
}
.panel-eng,.panel-modd{padding:26px!important}
.panel-eng:hover,.panel-modd:hover,.engrow:hover{border-color:var(--cc-rim)!important;box-shadow:var(--cc-shadow-hi),var(--cc-edge)!important}
/* the CAD art under the Engineering wing: a gentler, whiter veil on the new face */
:root:not([data-theme="dark"]) .panel-eng{--veil-a:rgba(255,255,255,.62);--veil-b:rgba(255,255,255,.38);--veil-c:rgba(248,250,253,.94)}
.panel-eng > img{border-radius:var(--cc-r-panel)}

/* Game wing keeps its own night-sky surface; it only gets the shape and the lit rim */
.panel-game{border-radius:var(--cc-r-panel)!important;border:1px solid rgba(140,200,255,.28)!important;
  box-shadow:0 18px 44px rgba(8,23,38,.40),inset 0 1px 0 rgba(180,225,255,.40),inset 0 0 0 1px rgba(140,200,255,.10)!important;padding:26px!important}
.panel-game:hover{box-shadow:0 24px 56px rgba(8,23,38,.5),0 0 36px rgba(111,208,255,.25),inset 0 1px 0 rgba(180,225,255,.5)!important}

/* WING chips: small frosted pills */
.panel-eng span.mono[style*="padding:5px 10px"],.panel-modd span.mono[style*="padding:5px 10px"]{
  border:0!important;border-radius:999px!important;background:var(--cc-btn)!important;box-shadow:var(--cc-btn-shadow);backdrop-filter:blur(10px);padding:6px 12px!important}
.panel-game span.mono[style*="padding:5px 10px"]{border-radius:999px!important;background:rgba(10,30,52,.45);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}

/* ---- buttons ---- */
/* primary: lit accent pill with its own glow */
#main div.mono[style*="background:var(--ac);padding:11px 18px"],.specbtn{
  border-radius:14px!important;background:var(--cc-primary)!important;box-shadow:var(--cc-primary-shadow)!important;padding:12px 20px!important}
.specbtn:hover{filter:brightness(1.06)}
/* game launcher CTA: the same lens, lit in the wing's cyan */
#main div.mono[style*="background:#6fd0ff"],#main span.mono[style*="background:#6fd0ff"]{
  border-radius:14px!important;background:linear-gradient(180deg,#a8e7ff 0%,#6fd0ff 55%,#4fbdf0 100%)!important;
  box-shadow:0 8px 22px rgba(111,208,255,.35),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,60,100,.18)!important}
#main span.mono[style*="background:#6fd0ff"]{border-radius:10px!important}
/* outline buttons become glass lenses with accent text */
#main div.mono[style*="border:1px solid var(--ac);padding:9px 14px"],.linkline{
  border:0!important;border-radius:var(--cc-r-ctl)!important;background:var(--cc-btn)!important;box-shadow:var(--cc-btn-shadow)!important}
#main div.mono[style*="border:1px solid var(--ac);padding:9px 14px"]{color:var(--ac)!important}
.linkline:hover{transform:translateY(-1px)}

/* ---- case study list ---- */
.engrow{padding:0!important}
.engrow > div:first-child{margin:12px;border-radius:var(--cc-r-tile)!important;border-right:0!important;background:var(--cc-well)!important;box-shadow:var(--cc-well-shadow)}
/* ROLE / TOOLS / TEAM: a recessed strip instead of a dashed rule across the card */
.engrow div[style*="border-top:1px dashed var(--line)"]{border-top:0!important;margin-top:16px!important;padding:12px 14px!important;border-radius:14px;background:var(--cc-well);box-shadow:var(--cc-well-shadow)}
/* the coming-soon row keeps its dashed edge: dashed is this site's "not yet" */
#main div[data-reveal][style*="dashed"]{border-radius:var(--cc-r-panel)!important;border-color:color-mix(in srgb,var(--muted) 40%,transparent)!important;background:color-mix(in srgb,var(--cc-face-flat) 60%,transparent)!important}
#main div[data-reveal][style*="dashed"] > div:first-child{margin:12px;border-radius:var(--cc-r-tile);border-right:0!important}
/* tag + figure labels: pills */
#main span.mono[style*="background:var(--ac);padding:3px 8px"]{border-radius:999px;padding:3px 10px!important;background:var(--cc-primary)!important;box-shadow:0 3px 10px rgba(31,111,235,.3),inset 0 1px 0 rgba(255,255,255,.4)}
#main [style*="background:rgba(8,23,38,.55)"],#main figcaption{border-radius:999px;backdrop-filter:blur(8px);padding:3px 9px!important}
#main span.mono[style*="border:1px solid var(--line);padding:3px 8px"]{border-radius:999px}

/* ---- case study sheet ---- */
/* spec datasheet: one panel of raised tiles instead of a ruled grid */
.detail2 > div.mono[style*="grid-template-columns:1fr 1fr"]{
  gap:8px;padding:8px;border:1px solid var(--cc-rim)!important;border-radius:var(--cc-r-panel);background:var(--cc-face)!important;box-shadow:var(--cc-shadow),var(--cc-edge)}
.detail2 > div.mono[style*="grid-template-columns:1fr 1fr"] > div{border:0!important;border-radius:14px;background:var(--cc-tile);box-shadow:var(--cc-tile-shadow)}
.detail2 > div.mono[style*="grid-template-columns:1fr 1fr"] > div > div:last-child{font-size:14px!important;font-weight:600;letter-spacing:-.1px}
/* photos: rounded, floating */
#main div[style*="height:clamp(240px,30vw,400px)"],#main figure,
#main div[style*="aspect-ratio:3/4;overflow:hidden"]{border:1px solid var(--cc-rim)!important;border-radius:var(--cc-r-panel)!important;box-shadow:var(--cc-shadow)}
/* safety systems are always on: show each as a lit status light, not a square */
#main span[style*="width:6px;height:6px;background:var(--ac)"]{border-radius:50%;width:8px!important;height:8px!important;
  background:radial-gradient(circle at 35% 30%,#b6f5cf,#2f9e63 70%)!important;box-shadow:0 0 0 3px color-mix(in srgb,#2f9e63 18%,transparent),0 0 8px #2f9e63!important}
#main div[style*="padding:9px 0;border-bottom:1px solid var(--line)"]{border-bottom-color:var(--cc-hair)!important}
/* other bullets: round accent beads with a top light */
#main span[style*="width:7px;height:7px;margin-top:6px;background:var(--ac)"],
#main span[style*="width:8px;height:8px;margin-top:6px;background:var(--ac)"]{border-radius:50%;background:radial-gradient(circle at 35% 30%,#bcd6ff,var(--ac) 70%)!important;box-shadow:0 0 0 3px var(--acsoft)!important}
/* outcome: space, not a dashed rule */
#main section[style*="dashed"]{border-top-color:transparent!important}

/* ---- about ---- */
.afield{border-bottom-color:var(--cc-hair)!important}
.afield:last-child{border-bottom:0!important}
.afield > div:first-child{background:transparent!important;border-right:0!important}
#main div[style*="border:1px solid var(--line);background:var(--panel);"]:has(.afield){overflow:hidden;padding:6px 4px}

/* ---- games wing (bespoke night surface; tiles get the shape and rim) ---- */
.gametile{border-radius:20px!important;border:1px solid rgba(140,200,255,.24)!important;box-shadow:0 14px 34px rgba(0,0,0,.4),inset 0 1px 0 rgba(180,225,255,.3)}
.gametile > div:last-child{border-top-color:rgba(140,200,255,.14)!important;background:linear-gradient(180deg,#10304f,#0b2239)!important}
.gametile span.mono[style*="COMING"],.gametile span.mono[style*="#eaa73c"]{border-radius:999px}
#main section[style*="min-height:clamp(300px,40vw,420px)"]{border-radius:var(--cc-r-panel);border-color:rgba(140,200,255,.24)!important;box-shadow:0 18px 44px rgba(0,0,0,.45),inset 0 1px 0 rgba(180,225,255,.3)}
#main span.mono[style*="background:#123a5c"]{border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(140,200,255,.18)}
#main span.mono[style*="border:1px solid #1a3f68"]{border-radius:999px}

/* ---- footer: flush frame strip with a lit top edge ---- */
#footer > div{background:var(--cc-frame)!important;backdrop-filter:blur(18px);border-top:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 -1px 0 var(--cc-hair)}
#footer > div > div{border-right-color:var(--cc-hair)!important}
:root[data-theme="dark"] #footer > div{box-shadow:inset 0 1px 0 rgba(156,196,255,.14)}
/* the library is one night-sky panel floating on the atmosphere, not a slab */
#main > div[style*="background:#081726"]{border-radius:28px;overflow:hidden;margin:24px auto 40px!important;border:1px solid rgba(140,200,255,.22)!important;
  background:radial-gradient(120% 90% at 85% 0%,#123a66 0%,#0a2038 45%,#081726 100%)!important;
  box-shadow:0 24px 60px rgba(8,23,38,.35),inset 0 1px 0 rgba(180,225,255,.30)}
/* the Moddular card's icon band bleeds to the card edge, which Clearcoat moved to 26px */
.panel-modd .modd-band{margin:-26px -26px 20px}
.panel-modd .modd-chips{padding:26px}

/* ---- games wing: the featured banner (2026-10-18) ----
   Same night surface as the library; Clearcoat gives it the panel shape, a lit
   rim drawn over the slides, lens buttons and pill chips. */
#main .gl-hero{border-radius:var(--cc-r-panel);border:1px solid rgba(140,200,255,.24)!important;box-shadow:0 18px 44px rgba(0,0,0,.45)}
#main .gl-hero::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(180,225,255,.38),inset 0 0 0 1px rgba(140,200,255,.10)}
#main .gl-tag,#main .gl-note,#main .gl-pause{border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
#main .gl-tag.feat{background:linear-gradient(180deg,#a8e7ff 0%,#6fd0ff 55%,#4fbdf0 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
#main .gl-cta{border-radius:14px;background:linear-gradient(180deg,#a8e7ff 0%,#6fd0ff 55%,#4fbdf0 100%);
  box-shadow:0 8px 22px rgba(111,208,255,.35),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,60,100,.18)}
#main .gl-th{border-radius:var(--cc-r-tile);border-color:rgba(140,200,255,.22);box-shadow:0 8px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(180,225,255,.25)}
#main .gl-th.on{box-shadow:0 8px 22px rgba(0,0,0,.4),0 0 18px rgba(111,208,255,.30),inset 0 1px 0 rgba(180,225,255,.4)}
#main .gl-th b{border-radius:0 3px 3px 0}

/* ---- games wing: Little Treasures store page ----
   Inside, the page wears the game's own UI kit (see index.html); Clearcoat only
   floats it as one rounded panel like the library, with a teal lit rim. */
#main .lt-page{border-radius:28px;margin:24px auto 40px;border:1px solid rgba(140,220,215,.30)!important;
  box-shadow:0 24px 60px rgba(8,30,34,.35),inset 0 1px 0 rgba(200,245,240,.30)}

/* ---- UI/UX pass (2026-10-18, Moddskill ui + ux) ----
   Same look; these fix what was measured or missing. */
/* Text colours that read on every part of the page, glows included (WCAG AA
   4.5:1 measured with Moddular-Docs/tools/contrast-check.js). The accent and
   muted fills stay as they were; only text drawn in them gets the deeper tone. */
:root{--ac-text:#123f94;--muted-text:#3e4d5d;
  --cc-primary:linear-gradient(180deg,#2a6ad6 0%,#1f5fcc 55%,#1a54b8 100%)}
:root[data-theme="dark"]{--ac-text:#a9ccff;--muted-text:#b4c4d6;
  --cc-primary:linear-gradient(180deg,#2a6ad6 0%,#245fbd 55%,#1f53a6 100%)}
[style*="color:var(--ac)"],.mh-meta b,.mp-crumb,.mp-eyebrow{color:var(--ac-text)!important}
[style*="color:var(--muted)"]{color:var(--muted-text)!important}
.mh-b.on,.mh-b:hover,.backlink:hover,.linkline:hover{color:var(--ac-text)!important}
/* the maintenance tag: its gold "early" text was landing on the yellow pill */
.mh-tag.mt-tag{color:#141414!important;font-size:9px}

/* home: one plain line saying who this is and what to do */
.home-intro{display:flex;flex-direction:column;gap:4px}
.home-os{font-size:11px;letter-spacing:2.5px;color:var(--ac-text)}
.home-intro p{margin:0;font-size:clamp(15px,1.5vw,17px);line-height:1.45;color:var(--ink)}

/* back links and breadcrumbs were 14px tall; give them a 32px hit area */
.backlink,.backlink-d,.lt-crumb a,.mp-crumb a{display:inline-flex!important;align-items:center;min-height:32px}

/* keyboard focus: one visible ring everywhere (light game surfaces get gold) */
:where(a,button,[tabindex]):focus-visible{outline:3px solid var(--ac-text);outline-offset:3px;border-radius:8px}
:where(.gl-wrap,.panel-game,.lt-page,#main > div[style*="background:#081726"]) :where(a,button):focus-visible{outline-color:#ffd37a}
/* the last few labels the contrast check flagged */
.mh-role,.mh-meta{color:var(--muted-text)!important}
#main div.mono[style*="border:1px solid var(--ac);padding:9px 14px"]{color:var(--ac-text)!important}
#main [style*="background:rgba(8,23,38,.55)"]{background:rgba(8,23,38,.78)!important}
#main [style*="background:rgba(243,246,250,.85)"]{color:#123f94!important}
:root:not([data-theme="dark"]) #main [style*="color:#c99a3c"]{color:#7a5000!important}
#main span.mono[style*="color:#7fa3c9"]{color:#b4cbe4!important}