/* ============================================================================
   OMEGA CITY SKIN - the world, carried on to every ordinary page.

   Shanae, the generators already wear the Creation Chamber (omega-shell). This
   is the other half: the pages that are not generators - Start Here, VIP, the
   Marketplace, My Purchases, Work With Me, the Social Studio, and the rest.
   Before this, walking out of a generator into one of those pages meant leaving
   Omega World and landing on an older, purpler build. Now every page stands in
   the same city, under the same sky, at the same hour and season the visitor
   chose on the world map.

   How it stays safe:
     - It repaints, it never re-lays-out. No page's own structure is touched.
     - Every page already used the same family of variable names (--gold, --ink,
       --panel, --plum, --bg, --deep). This re-points those names at the world's
       values, so a page restyles itself with its own rules.
     - The one hard override is the body background, because each page paints its
       own gradient. That gradient is replaced by the real city behind glass.
     - ?city=v1 on any page turns the whole thing off. Nothing else changes.
   ========================================================================= */

.ocity{
 /* the world's own palette, verbatim from omega-world/world.css */
 --ow-ink:#0B0710;
 --ow-plum:#2A0F4E;
 --ow-plum2:#1E1430;
 --ow-panel:#160E22;
 --ow-line:#33224D;
 --ow-gold:#E7C45A;
 --ow-gold2:#F6E3A6;
 --ow-gold-deep:#C9962E;
 --ow-violet:#9C6BE8;
 --ow-text:#F3EEF9;
 --ow-muted:#A99CC0;
 --ow-serif:"Playfair Display",Georgia,serif;
 --ow-body:Inter,"Segoe UI",Arial,sans-serif;
 --oc-bar-h:54px;
 --oc-veil:.90;          /* how much ink sits between the city and the page */
 --oc-grade:transparent; /* the season accent, never a palette change */

 /* --- the names the existing pages already style themselves with --------- */
 --ink:var(--ow-text);      --soft:var(--ow-muted);     --mut:var(--ow-muted);
 --gold:var(--ow-gold);     --gold2:var(--ow-gold2);    --gold-bright:var(--ow-gold2);
 --goldd:var(--ow-gold-deep); --gold-deep:var(--ow-gold-deep);
 --purple:var(--ow-plum);   --plum:#7B3FBF;             --plum2:var(--ow-violet);
 --bg:transparent;          --bg2:transparent;          --deep:transparent;
 --card:var(--ow-panel);    --panel:var(--ow-panel);    --panel2:var(--ow-plum2);
 --line:var(--ow-line);     --edge:rgba(231,196,90,.22);
 --serif:var(--ow-serif);   --sans:var(--ow-body);      --body:var(--ow-body);
}

/* ------------------------------------------------------ the city behind glass
   A fixed pair of layers under everything: the painting, then an ink veil so
   the page's own text keeps its contrast. The page scrolls, the city does not,
   which is what makes a long page still feel like one room in one place. */
.ocity body{ background:var(--ow-ink) !important; color:var(--ow-text); }
.ocity #ocityScene{
 position:fixed; inset:0; z-index:-2; overflow:hidden;
 background:var(--ow-ink);
}
.ocity #ocityScene img{
 position:absolute; inset:0; width:100%; height:100%;
 object-fit:cover; display:block; opacity:0;
 transition:opacity .6s ease;
 transform:scale(1.04);
 filter:saturate(.92);
}
.ocity #ocityScene img.on{ opacity:1 }
.ocity #ocityVeil{
 position:fixed; inset:0; z-index:-1; pointer-events:none;
 /* Four layers, in order: the season accent, a vignette that darkens the outer
    edges so the artwork's own lettering never competes with hers, a soft top
    glow, and the base ink. The middle of the screen stays the clearest part of
    the city, which is exactly where a page's own panels sit. */
 background:
   var(--oc-grade),
   radial-gradient(130% 110% at 50% 45%, transparent 8%, rgba(11,7,16,.72) 68%, rgba(11,7,16,.94) 100%),
   radial-gradient(120% 90% at 50% 0%, rgba(11,7,16,.55), rgba(11,7,16,.90) 62%),
   linear-gradient(180deg, rgba(11,7,16,.82), rgba(11,7,16,.97));
 opacity:var(--oc-veil);
}

/* ------------------------------------------------------------ the world bar
   The same bar the world map carries, so the way back is always in the same
   place. It is a real nav, keyboard reachable, and it never covers content:
   the body is padded by exactly its height. */
.ocity body{ padding-top:var(--oc-bar-h) !important; }
.oc-bar{
 position:fixed; top:0; left:0; right:0; height:var(--oc-bar-h); z-index:60;
 display:flex; align-items:center; gap:14px; padding:0 clamp(12px,2.4vw,26px);
 background:linear-gradient(180deg, rgba(11,7,16,.94), rgba(11,7,16,.78));
 border-bottom:1px solid var(--ow-line);
 backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
 font-family:var(--ow-body);
}
.oc-home{
 display:inline-flex; align-items:center; gap:9px; text-decoration:none;
 color:var(--ow-gold2); font:800 11px/1 var(--ow-body);
 letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
}
.oc-home .oc-mk{
 width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
 background:linear-gradient(135deg,var(--ow-violet),var(--ow-gold));
 color:#1A1206; font:900 14px/1 var(--ow-body);
}
.oc-home:hover{ color:var(--ow-gold) }
.oc-where{
 color:var(--ow-muted); font:600 11px/1 var(--ow-body);
 letter-spacing:.16em; text-transform:uppercase;
 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
 border-left:1px solid var(--ow-line); padding-left:14px;
}
.oc-spacer{ flex:1 1 auto }
.oc-btn{
 border:1px solid var(--ow-line); background:rgba(22,14,34,.7);
 color:var(--ow-muted); border-radius:999px; cursor:pointer;
 padding:7px 13px; font:800 10px/1 var(--ow-body);
 letter-spacing:.16em; text-transform:uppercase; white-space:nowrap;
}
.oc-btn:hover{ color:var(--ow-gold2); border-color:var(--ow-gold-deep) }
.oc-btn[aria-pressed="true"]{ color:#241B06; background:var(--ow-gold); border-color:var(--ow-gold) }
@media (max-width:640px){
  .oc-where{ display:none }
  .oc-btn.oc-hide-sm{ display:none }
}

/* --------------------------------------------------------------- the drawer
   The same quick menu as the world map. It is built by omega-city.js from the
   one list of real sections, so a section can never appear here and nowhere
   else, or the other way round. */
.oc-drawer{
 position:fixed; inset:var(--oc-bar-h) 0 0 0; z-index:59;
 background:rgba(9,5,14,.93); backdrop-filter:blur(14px);
 overflow:auto; padding:26px clamp(14px,4vw,44px) 60px; display:none;
}
.oc-drawer.on{ display:block }
.oc-drawer h2{
 font:700 12px/1 var(--ow-body); letter-spacing:.24em; text-transform:uppercase;
 color:var(--ow-gold); margin:0 0 16px;
}
.oc-grid{
 display:grid; gap:10px;
 grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
 max-width:1180px; margin:0 auto;
}
.oc-grid a{
 display:block; text-decoration:none; padding:13px 15px; border-radius:12px;
 background:var(--ow-panel); border:1px solid var(--ow-line);
 color:var(--ow-text); font:600 14px/1.3 var(--ow-body);
}
.oc-grid a span{ display:block; color:var(--ow-muted); font:500 12px/1.45 var(--ow-body); margin-top:3px }
.oc-grid a:hover{ border-color:var(--ow-gold-deep); background:var(--ow-plum2) }

/* --------------------------------------------------- the city's own polish
   Deliberately light. These raise the page into the world's language without
   guessing at any page's layout: headings get the world's serif, gold stays the
   only accent allowed to shout, and form controls stop looking like 2019. */
.ocity h1,.ocity h2,.ocity h3{ font-family:var(--ow-serif) }
.ocity a{ color:var(--ow-gold2) }
.ocity ::selection{ background:var(--ow-gold); color:#241B06 }
.ocity :focus-visible{ outline:2px solid var(--ow-gold); outline-offset:2px }
.ocity input,.ocity select,.ocity textarea{
 background:rgba(11,7,16,.6); color:var(--ow-text); border-color:var(--ow-line);
}
.ocity input::placeholder,.ocity textarea::placeholder{ color:var(--ow-muted) }

/* ------------------------------------------------- the hour and the season
   Day is not a different palette. It is the day painting, a thinner veil and a
   warmer accent, exactly as the world map treats it. */
.ocity.oc-day{ --oc-veil:.72 }
.ocity.oc-season-spring{ --oc-grade:radial-gradient(120% 80% at 50% 100%, rgba(156,107,232,.14), transparent 60%) }
.ocity.oc-season-summer{ --oc-grade:radial-gradient(120% 80% at 50% 100%, rgba(231,196,90,.13), transparent 60%) }
.ocity.oc-season-fall  { --oc-grade:radial-gradient(120% 80% at 50% 100%, rgba(201,150,46,.16), transparent 60%) }
.ocity.oc-season-winter{ --oc-grade:radial-gradient(120% 80% at 50% 100%, rgba(120,170,230,.13), transparent 60%) }

@media (prefers-reduced-motion:reduce){
 .ocity #ocityScene img{ transition:none }
}

/* Print: the city is atmosphere, not content. */
@media print{
 .oc-bar,.oc-drawer,#ocityScene,#ocityVeil{ display:none !important }
 .ocity body{ padding-top:0 !important; background:#fff !important; color:#000 }
}

/* ====================================================== the phone, put right
   These are not skin decoration. Nine pages already scrolled sideways on a
   390px phone before this file existed, and the QA harness measured the same
   overflow with the skin off. The cause was always one of three things, so all
   three are fixed here once rather than in nine separate pages:

     a nav that refuses to wrap        - about, music, privacy, terms  (925px)
     a report table wider than a phone - the marketplace reports
     a card with a hard pixel width    - the film shelf               (1358px)

   Each fix is the gentlest one that works: let the nav wrap, let a wide table
   scroll inside its own box instead of dragging the page with it, and let a
   fixed-width card shrink. None of them changes a page on a desktop. */
@media (max-width:760px){
  .ocity nav,
  .ocity .nav,
  .ocity header nav{ flex-wrap:wrap !important; row-gap:8px }

  /* A table stays a table. It just scrolls in its own lane. */
  .ocity table{ display:block; width:100%; max-width:100%; overflow-x:auto;
                -webkit-overflow-scrolling:touch }

  /* Nothing inside the page may be wider than the phone. */
  .ocity body :where(img,video,canvas,pre,iframe,.card,.tile,.panel){ max-width:100% }
  .ocity body *{ min-width:0 }
}
/* The last resort, at every size: the page itself never scrolls sideways.
   Anything that still wants to be too wide is clipped, not allowed to drag the
   whole page with it. */
.ocity body{ overflow-x:hidden }

/* ===========================================================================
   OMEGA LUXE  ·  the ordinary pages, dressed like the generators
   Shanae, 2026-09-16: no more purple, anywhere. The same room ChatGPT drew
   from her theme boards: her white marble winter scene behind a pearl veil,
   an ivory bar with gold trimmed pills, black serif headings, gold accents.
   The page's own variable names are pointed at light values, so each page
   restyles itself. ?luxe=off brings the dark city back for comparing.
   =========================================================================== */
html.ocity:not(.no-luxe){
 --ow-ink:#FFFDF8;
 --ow-plum:#F6EBCB;
 --ow-plum2:#FFF8EA;
 --ow-panel:#FFFFFF;
 --ow-line:#E2CF9E;
 --ow-gold:#B08A3A;
 --ow-gold2:#8A6A26;
 --ow-gold-deep:#8A6A26;
 --ow-violet:#B08A3A;
 --ow-text:#141116;
 --ow-muted:#6A6158;
 --ow-serif:"Bodoni Moda","Didot","Playfair Display",Georgia,serif;
 --ow-body:Montserrat,Inter,"Segoe UI",Arial,sans-serif;
 --plum:#B08A3A;
 --edge:rgba(176,138,58,.35);
 --oc-veil:1;
}
html.ocity:not(.no-luxe) body{background:#F4F1EC !important;color:#141116}
html.ocity:not(.no-luxe) #ocityScene{background:#F4F1EC url("/assets/luxe/generator-scene.webp?v=lx1") center top / cover no-repeat}
html.ocity:not(.no-luxe) #ocityScene img{display:none}
html.ocity:not(.no-luxe) #ocityVeil{
 opacity:1;
 background:linear-gradient(90deg,rgba(255,253,248,.15) 0%,rgba(255,253,248,.84) 13%,rgba(255,253,248,.92) 50%,rgba(255,253,248,.84) 87%,rgba(255,253,248,.15) 100%);
}
@media(max-width:1300px){ html.ocity:not(.no-luxe) #ocityVeil{background:rgba(255,253,248,.88)} }
html.ocity:not(.no-luxe) .oc-bar{
 background:linear-gradient(180deg,rgba(255,253,248,.97),rgba(250,246,238,.95));
 border-bottom:1px solid #E2CF9E;box-shadow:0 10px 30px rgba(90,70,30,.10);
}
html.ocity:not(.no-luxe) .oc-home{color:#141116;font-family:"Bodoni Moda",Georgia,serif;letter-spacing:.12em}
html.ocity:not(.no-luxe) .oc-home .oc-mk{
 border-radius:50%;background:linear-gradient(135deg,#F7E7B0 0%,#D9B45E 30%,#A8802F 55%,#E9CF85 78%,#B8903D 100%);color:#2B1E08;
}
html.ocity:not(.no-luxe) .oc-btn{background:#FFFFFF;color:#2B2520;border-color:#E2CF9E}
html.ocity:not(.no-luxe) .oc-btn:hover{background:#F6EBCB;color:#141116;border-color:#B08A3A}
html.ocity:not(.no-luxe) .oc-btn[aria-pressed="true"]{background:linear-gradient(180deg,#2A231E,#0F0C0A);color:#F3DFA6;border-color:#B08A3A}
html.ocity:not(.no-luxe) .oc-drawer{background:rgba(255,253,248,.97)}
html.ocity:not(.no-luxe) .oc-grid a{background:#FFFFFF;border-color:#E2CF9E;color:#141116;box-shadow:0 6px 18px rgba(90,70,30,.08)}
html.ocity:not(.no-luxe) .oc-grid a:hover{background:#FFF8EA;border-color:#B08A3A}
html.ocity:not(.no-luxe) h1,html.ocity:not(.no-luxe) h2,html.ocity:not(.no-luxe) h3{color:#141116}
html.ocity:not(.no-luxe) a{color:#8A6A26}
html.ocity:not(.no-luxe) input,html.ocity:not(.no-luxe) select,html.ocity:not(.no-luxe) textarea{
 background:#FFFFFF;color:#141116;border-color:#E2CF9E;
}