/* LaaGames — Dusk Glass, night edition.
   One polish layer over the hub's existing sheets (style → … → hub-surfaces).
   Scoped to body.lg-dusk so nothing else on the network changes.
   Language: night sky, glass panels, a blue halo behind every character, glow only on interaction.
   Colour roles: blue = GAMES / interactive · starlight gold = labels & rarity · mint/lavender = tier tints. */
.lg-dusk{
  --sky:#080d1b;--sky-2:#101a2e;
  --glass:#16223acc;--glass-hi:#1c2b47e0;--glass-lo:#0f1828cc;
  --line:#ffffff14;--line-2:#ffffff26;
  --ink:#eef2f8;--muted:#a9b5ca;--rule:#ffffff17;
  --blue:#9ecbff;--blue-soft:#cfe5ff;--blue-wash:#9ecbff1a;
  --star:#f3cf8a;
  --accent:var(--blue);--yellow:var(--star);
  --r:18px;
  background:var(--sky);
}
/* Sky on its own fixed layer (no background-attachment repaint). */
.lg-dusk::after{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;transform:translateZ(0);background:
  radial-gradient(ellipse 60% 40% at 80% -5%,#2a4a7a66,transparent 70%),
  radial-gradient(ellipse 50% 45% at 0% 35%,#1b2f5240,transparent 70%),
  linear-gradient(180deg,#0e1830,#080d1b 70%)}
.lg-dusk :focus-visible{outline:2px solid var(--blue)!important;outline-offset:3px;border-radius:8px}

/* ── Header ─────────────────────────────────────────────────────── */
.lg-dusk header{border-bottom:0}
.lg-dusk .masthead{border-bottom:1px solid var(--line)}
.lg-dusk .edition{color:var(--muted);font-size:12px;letter-spacing:.08em}
.lg-dusk .edition b{color:var(--line-2)}
.lg-dusk header nav[aria-label="Main navigation"]{display:flex;flex-wrap:wrap;gap:2px;width:fit-content;max-width:100%;margin:16px 0 4px;padding:4px;border:1px solid var(--line);border-radius:999px;background:#ffffff06}
.lg-dusk header nav[aria-label="Main navigation"] a{padding:8px 15px;border:0;border-radius:999px;color:var(--muted);font-size:14px;font-weight:600;text-decoration:none;transition:color .2s,background .2s}
.lg-dusk header nav[aria-label="Main navigation"] a:hover{color:var(--ink);background:#ffffff0a}
.lg-dusk header nav[aria-label="Main navigation"] a[aria-current]{color:var(--blue-soft);background:var(--blue-wash);box-shadow:inset 0 0 0 1px #9ecbff4d}
.lg-dusk .crumb{color:var(--muted)}
.lg-dusk .crumb a{color:var(--blue-soft)}
.lg-dusk .eyebrow,.lg-dusk .kicker{color:var(--star)}
.lg-dusk main h1{letter-spacing:-.025em}
.lg-dusk .lead{color:var(--muted)}

/* ── Glass surface (shared) ──────────────────────────────────────── */
.lg-dusk .visual-shortcut,.lg-dusk .character-card,.lg-dusk .style-card,.lg-dusk .tier-bucket,
.lg-dusk .full-planner,.lg-dusk details.sources,.lg-dusk .hub-verification{
  background:linear-gradient(160deg,var(--glass-hi),var(--glass-lo));border:1px solid var(--line);border-radius:var(--r)}

/* ── Hub home: destination tiles ─────────────────────────────────── */
.lg-dusk .visual-directory{gap:16px}
.lg-dusk .visual-shortcut{position:relative;overflow:hidden;padding:18px 22px;transition:transform .25s,border-color .25s,box-shadow .25s}
.lg-dusk .visual-shortcut::before,.lg-dusk .visual-shortcut::after{display:none}
.lg-dusk .visual-shortcut:hover{transform:translateY(-3px);border-color:#9ecbff66;background:linear-gradient(160deg,var(--glass-hi),var(--glass-lo));box-shadow:0 18px 40px -18px #4d8fe099,0 0 0 1px #9ecbff22}
.lg-dusk .visual-shortcut h2 span{color:var(--blue);transition:transform .25s;display:inline-block}
.lg-dusk .visual-shortcut:hover h2 span{transform:translateX(4px)}
.lg-dusk .shortcut-art{border-radius:12px;overflow:hidden;background:radial-gradient(circle at 50% 60%,#2d4c7c,#14213a 70%)}
.lg-dusk .directory-symbol{border-radius:12px;border-color:var(--line-2)}

/* ── Student index ───────────────────────────────────────────────── */
.lg-dusk .character-grid{gap:18px}
.lg-dusk .character-card{overflow:hidden;padding:0 0 16px;transition:transform .25s,border-color .25s,box-shadow .25s}
.lg-dusk .character-card>*:not(.card-art){padding-left:16px;padding-right:16px}
/* The halo: each student stands in a soft pool of blue light. */
.lg-dusk .card-art{margin:0 0 14px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse 70% 65% at 50% 62%,#3a63a066,transparent 72%),linear-gradient(180deg,#1a2a47,#101a2e)}
.lg-dusk .card-art::before{content:"";position:absolute;left:50%;top:22px;width:170px;aspect-ratio:1;margin-left:-85px;border-radius:50%;border:1px solid #9ecbff2e;box-shadow:0 0 0 18px #9ecbff06}
.lg-dusk .card-art::before{z-index:0}
.lg-dusk .card-art>.profile-art{position:relative;z-index:1}
.lg-dusk .card-art img:not(.profile-art--community){transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.lg-dusk .character-card:hover{transform:translateY(-4px);border-color:#9ecbff66;box-shadow:0 20px 44px -20px #4d8fe0aa}
.lg-dusk .character-card:hover .card-art{background:radial-gradient(ellipse 70% 65% at 50% 62%,#4a78bd88,transparent 72%),linear-gradient(180deg,#1d2f50,#111c31)}
.lg-dusk .character-card:hover .card-art img{transform:translateY(-4px) scale(1.02)}
.lg-dusk .character-card h3{color:var(--ink)}
.lg-dusk .release-badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--line-2);font-weight:700;letter-spacing:.06em}
.lg-dusk .release-GLOBAL{color:#9fe3c9;border-color:#9fe3c944;background:#9fe3c912}
.lg-dusk .character-card>.release-badge{margin-left:16px;padding:2px 8px}
.lg-dusk .release-JP_ONLY{color:#ffb7cc;border-color:#ffb7cc44;background:#ffb7cc12}

/* Collab Students with community-hosted game standing art: framed like the official renders. */
.profile-art--community{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;object-position:50% 0}
.lg-dusk .card-art img.profile-art--community{position:absolute;top:12px;bottom:auto;left:50%;right:auto;width:64%;height:auto;max-width:none;transform:translateX(-50%)}
.lg-dusk .character-card:hover .card-art img.profile-art--community{transform:translateX(-50%) translateY(-4px) scale(1.02)}
.lg-dusk .student-hero .art-credit{position:relative;z-index:2}
.student-hero .art-frame>.profile-art--community{position:relative;width:auto;height:100%;max-height:460px;margin:0 auto;right:auto}

/* Student card thumbnails are pre-cut to the SVG crop: show them whole, bottom-aligned (= xMidYMax meet). */
.lg-dusk .card-art img.profile-art--card{position:relative;inset:auto;right:auto;bottom:auto;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:50% 100%}
/* Cards whose art is absolutely positioned have no intrinsic width; keep every card frame full width. */
.lg-dusk .card-art{width:100%;align-self:stretch}
/* Collab Students: portrait crop of their own official Style art (no official profile art exists). */
.profile-style-crop{position:absolute;inset:0;overflow:hidden}
.profile-style-crop img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block}
.profile-style-crop .profile-pending-label{position:absolute;left:10px;bottom:8px;padding:2px 8px;border-radius:999px;background:#0b1426cc;border:1px solid #ffffff26;color:#cfe5ff;font-size:10px;letter-spacing:.06em}
.student-hero .profile-style-crop{position:relative;height:100%;min-height:360px;border-radius:24px}

/* ── Forms: search, selects, mode switches ───────────────────────── */
.lg-dusk select,.lg-dusk input[type=search],.lg-dusk input[type=text],.lg-dusk .search input,
.lg-dusk .style-filters input,.lg-dusk .style-filters select,.lg-dusk .style-filters .icon-filter summary{
  background:#111b2fe6;border:1px solid var(--line-2);border-radius:12px;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.lg-dusk select:hover,.lg-dusk input:hover{border-color:#9ecbff55}
.lg-dusk select:focus-visible,.lg-dusk input:focus-visible{border-color:var(--blue);box-shadow:0 0 0 4px #9ecbff22;outline:0!important}
.lg-dusk .style-filters button{border-radius:12px;border:1px solid var(--line-2);background:#111b2fe6;color:var(--ink);transition:border-color .2s,color .2s}
.lg-dusk .style-filters button:hover{border-color:var(--blue);color:var(--blue-soft)}
.lg-dusk .mode-controls{gap:2px;width:fit-content;padding:4px;border:1px solid var(--line);border-radius:999px;background:#ffffff06}
.lg-dusk .mode-controls button{border:0;border-radius:999px;background:transparent;color:var(--muted);font-weight:600}
.lg-dusk .mode-controls button:hover{color:var(--ink)}
.lg-dusk .mode-controls button[aria-pressed=true]{color:var(--blue-soft);background:var(--blue-wash);box-shadow:inset 0 0 0 1px #9ecbff4d}

/* ── Student profile ─────────────────────────────────────────────── */
.lg-dusk .student-hero{border-bottom:1px solid var(--line)}
.lg-dusk .student-hero .art-frame{border-radius:24px;background:radial-gradient(ellipse 55% 55% at 50% 58%,#3a63a077,transparent 72%)}
.lg-dusk .student-hero .art-frame::before{content:"";position:absolute;z-index:0;left:50%;top:50%;width:340px;aspect-ratio:1;margin:-190px 0 0 -170px;border-radius:50%;border:1px solid #9ecbff33;box-shadow:0 0 0 30px #9ecbff06,0 0 0 72px #9ecbff04}
.lg-dusk .student-hero .art-frame>img{z-index:1}
.lg-dusk .profile-facts{padding:6px 20px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(160deg,var(--glass-hi),var(--glass-lo))}
.lg-dusk .profile-facts dt,.lg-dusk .profile-facts dd{border-color:var(--line)}
.lg-dusk .profile-facts dd:last-of-type,.lg-dusk .profile-facts dt:last-of-type{border-bottom:0}

/* ── Style cards (profile gallery + database) ────────────────────── */
.lg-dusk .style-card{overflow:hidden;padding:0 0 16px;transition:transform .25s,border-color .25s,box-shadow .25s}
.lg-dusk .style-card>*:not(.style-card-art){padding-left:16px;padding-right:16px}
.lg-dusk .style-card>.release-badge{margin-left:16px;padding:2px 8px}
.lg-dusk .style-card-art{margin:0 0 12px;background:#0d1626;border-bottom:1px solid var(--line)}
.lg-dusk .style-card:hover,.lg-dusk .tier-card-link:hover .style-art-stage{border-color:#9ecbff66}
.lg-dusk .style-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px -20px #4d8fe0aa}
/* One locked frame for every Style: 5:4, the native ratio of 34/38 artworks.
   The art fills it exactly, so no bars, no feathering and every card is the same size.
   The few wider artworks crop around their reviewed focal point (--art-x/--art-y). */
.lg-dusk .style-art-stage{height:auto;aspect-ratio:5/4;border-radius:14px 14px 0 0}
.lg-dusk .style-art-stage .style-art-primary{object-fit:cover;transform:none;mask-image:none;-webkit-mask-image:none}
.lg-dusk .style-art-stage .style-art-underlay,.lg-dusk .style-art-stage::after{display:none}
/* Non-5:4 art (set by art-fit.mjs): shown whole, over a blurred fill of itself instead of empty bars. */
.lg-dusk .style-art-stage[data-art-blend="true"] .style-art-underlay{display:block;opacity:.85;filter:blur(16px) brightness(.55) saturate(.9);mask-image:none;-webkit-mask-image:none}
.lg-dusk .style-card-art{aspect-ratio:auto;display:block}
.lg-dusk .class-badge{border-color:var(--line-2);background:#ffffff08;border-radius:999px;padding:4px 10px 4px 5px}
.lg-dusk .class-badge>span{color:var(--star)}

/* ── Tier list ───────────────────────────────────────────────────── */
.lg-dusk .tier-bucket{--tier:var(--blue);margin:14px 0;padding:22px;border-top:1px solid var(--line);grid-template-columns:110px minmax(0,1fr)}
.lg-dusk .tier-S{--tier:var(--star)}.lg-dusk .tier-A{--tier:var(--blue)}.lg-dusk .tier-B{--tier:#93dfd0}.lg-dusk .tier-C{--tier:#c3b5ed}.lg-dusk .tier-UNRATED{--tier:var(--muted)}
.lg-dusk .tier-bucket{box-shadow:inset 3px 0 0 var(--tier)}
.lg-dusk .tier-bucket-heading h2{color:var(--tier);font-size:3.4rem;line-height:1;text-shadow:0 0 28px color-mix(in srgb,var(--tier) 45%,transparent)}
.lg-dusk .tier-card-link .style-art-stage{border:1px solid var(--line);border-radius:14px;background:#0d1626;transition:border-color .2s,transform .25s,box-shadow .25s}
.lg-dusk .tier-card-link:hover .style-art-stage{transform:translateY(-3px);box-shadow:0 14px 30px -14px color-mix(in srgb,var(--tier) 60%,transparent)}
.lg-dusk .tier-card h3{color:var(--ink)}
.lg-dusk .tier-card-link:hover h3{color:var(--blue-soft)}

/* ── JP banner history ───────────────────────────────────────────── */
.lg-dusk .banner-timeline.compact-history .banner-card{border-radius:var(--r);border-color:var(--line);background:linear-gradient(160deg,var(--glass-hi),var(--glass-lo));transition:border-color .25s,box-shadow .25s}
.lg-dusk .compact-history .banner-card::before{border-color:#9ecbff22;box-shadow:0 0 0 44px #9ecbff06}
.lg-dusk .compact-history .banner-card:hover{border-color:#9ecbff66;box-shadow:0 18px 40px -20px #4d8fe099}
.lg-dusk .banner-card-art img,.lg-dusk .banner_art{border-radius:10px}
.lg-dusk .banner-kind,.lg-dusk .banner-collab{border-radius:999px}
.lg-dusk .banner-source-link{border-radius:10px;border-color:var(--line-2)}
.lg-dusk .banner-source-link:hover{border-color:var(--blue);color:var(--blue-soft)}

/* ── Upgrade planner ─────────────────────────────────────────────── */
.lg-dusk .full-planner{padding:24px 26px}
.lg-dusk .cost-results{border-radius:14px}

/* ── Disclosures & footer ────────────────────────────────────────── */
.lg-dusk details.sources,.lg-dusk .hub-verification{padding:14px 20px}
.lg-dusk details summary{color:var(--blue-soft);cursor:pointer}
.lg-dusk footer{border-top:1px solid var(--line);color:var(--muted)}
.lg-dusk footer>a{color:var(--ink)}

/* ── Host component (MASCOT-PLACEMENT.md) ───────────────────────────
   Self-contained: works on hub pages, the GAMES gateway and the Sekai home.
   Sizes: hero (gateway) · side (explanation pages) · compact (tools) · duo (Sekai, two hosts). */
.lg-host{--ink:#eef2f8;--muted:#a9b5ca;--line-2:#ffffff26;--accent:#9ecbff;--accent-soft:#cfe5ff;
  position:relative;display:flex;flex-direction:column;border:0!important;padding:0!important;background:none!important;color:var(--ink)}
.lg-host[data-speaking="rio"]{--accent:#f5759c;--accent-soft:#ffc2d4}
.lg-dusk .lg-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:32px;align-items:center;margin-top:8px}
.lg-dusk .lg-intro>:first-child{min-width:0}
/* Stage: sprites stand here; only their legs are clipped, behind the textbox. */
.lg-host-stage{position:relative;height:var(--stage,300px)}
.lg-sprite{position:absolute;bottom:calc(-1 * var(--tuck,90px));width:var(--sprite,290px);right:var(--sprite-right,12px)}
/* Sprites are opaque baked images (licence log); a soft mask lets their edges melt into the glass. */
.lg-sprite img{position:relative;z-index:1;display:block;width:100%;height:auto;clip-path:inset(0 0 var(--cut,18%) 0);-webkit-mask-image:radial-gradient(ellipse 50% 52% at 50% 44%,#000 78%,transparent 100%);mask-image:radial-gradient(ellipse 50% 52% at 50% 44%,#000 78%,transparent 100%)}
.lg-host-halo{display:none}
.lg-host-halo{position:absolute;z-index:0;left:50%;top:var(--halo-top,4%);width:var(--halo,250px);aspect-ratio:1;margin-left:calc(var(--halo,250px) / -2);border-radius:50%;
  border:1px solid color-mix(in srgb,var(--halo-ink,#9ecbff) 30%,transparent);background:radial-gradient(circle,color-mix(in srgb,var(--halo-ink,#9ecbff) 22%,transparent),transparent 68%);
  box-shadow:0 0 0 24px color-mix(in srgb,var(--halo-ink,#9ecbff) 4%,transparent),0 0 0 56px color-mix(in srgb,var(--halo-ink,#9ecbff) 2.5%,transparent)}
.lg-sprite--rio{--halo-ink:#f5759c}
.lg-host.is-reacting .lg-sprite[data-active] img,.lg-host.is-reacting .lg-face img{animation:lg-breathe .35s ease-out}
@keyframes lg-breathe{40%{transform:translateY(-4px)}}
/* Textbox */
.lg-textbox{position:relative;z-index:2;display:flex;gap:14px;margin-top:calc(-1 * var(--overlap,64px));padding:22px 20px 10px;cursor:pointer;
  border:1px solid var(--line-2);border-top-color:color-mix(in srgb,var(--accent) 45%,transparent);border-radius:6px 18px 18px 18px;
  background:linear-gradient(170deg,#1a2843,#0f1828);box-shadow:0 -1px 0 color-mix(in srgb,var(--accent) 15%,transparent),0 20px 44px -20px #000c;transition:border-color .3s}
.lg-textbox-body{flex:1;min-width:0;display:flex;flex-direction:column}
.lg-nameplate{position:absolute;top:-12px;left:16px;padding:3px 12px;border-radius:999px;background:var(--accent);color:#0b1426;font:700 12px/1.3 system-ui,sans-serif;letter-spacing:.03em;box-shadow:0 0 18px color-mix(in srgb,var(--accent) 35%,transparent);transition:background .3s}
.lg-line{margin:0;min-height:5.1em;font-size:15px;line-height:1.7;color:var(--ink)}
.lg-host-controls{display:flex;align-items:center;gap:4px;margin-top:6px}
.lg-count{margin-right:auto;font:600 12px ui-monospace,Consolas,monospace;color:var(--muted)}
.lg-host-controls button{min-height:32px;padding:0 10px;border:1px solid transparent;border-radius:999px;background:none;color:var(--muted);font:700 12px/1 system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.lg-host-controls button:hover{color:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.lg-face{display:none;flex:0 0 64px;height:64px;border-radius:14px;overflow:hidden;position:relative;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--accent) 30%,#13203a),#13203a)}
.lg-face img{position:absolute;width:329px;max-width:none;height:auto;left:-132px;top:-12px}
.lg-face img[data-speaker="rio"]{width:268px;left:-102px;top:-9px}
.lg-credit{display:block;margin-top:8px;text-align:right;font-size:11px;color:var(--muted)}
.lg-sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lg-host:not(.is-enhanced) .lg-host-controls{display:none}
/* Sizes */
.lg-host--side{--stage:220px;--sprite:319px;--sprite-right:16px;--tuck:120px;--cut:24%;--halo:210px;--overlap:64px}
.lg-host--hero{--stage:380px;--sprite:372px;--sprite-right:10px;--tuck:140px;--cut:22%;--halo:300px;--overlap:80px}
.lg-host--compact{--overlap:-14px;max-width:780px;margin:0 0 22px}
.lg-host--compact .lg-face{display:block}
.lg-host--compact .lg-line{min-height:3.4em}
.lg-host--compact .lg-credit{text-align:left;margin-left:2px}
.lg-host--duo{--stage:340px;--sprite:370px;--tuck:150px;--cut:24%;--halo:240px;--overlap:78px}
.lg-host--duo .lg-sprite--rio{right:auto;left:0}
.lg-host--duo .lg-sprite--moff{right:0}
.lg-host--duo .lg-sprite img{transition:filter .35s}
.lg-host--duo .lg-sprite:not([data-active]) img{filter:brightness(.5) saturate(.6)}
.lg-host--duo .lg-textbox{width:min(920px,100%);margin-left:auto;margin-right:auto}
@media(max-width:860px){
  .lg-dusk .lg-intro{grid-template-columns:1fr;gap:12px}
  .lg-host-stage{display:none}
  .lg-textbox{margin-top:14px}
  .lg-face{display:block}
}
@media(prefers-reduced-motion:reduce){.lg-host.is-reacting .lg-sprite img,.lg-host.is-reacting .lg-face img{animation:none}.lg-host--duo .lg-sprite img{transition:none}}

@media(max-width:700px){
  .lg-dusk header nav[aria-label="Main navigation"]{flex-wrap:nowrap;overflow-x:auto;border-radius:14px;width:100%;scrollbar-width:none}
  .lg-dusk header nav[aria-label="Main navigation"] a{flex-shrink:0}
  .lg-dusk .tier-bucket{grid-template-columns:1fr;padding:16px}
  .lg-dusk .visual-shortcut{padding:14px}
}
@media(prefers-reduced-motion:reduce){
  .lg-dusk .visual-shortcut,.lg-dusk .character-card,.lg-dusk .style-card,.lg-dusk .card-art img,.lg-dusk .tier-card-link .style-art-stage{transition:none}
}