/* ============================================================================
   THREE THEMES, IN MOTION — so he picks by scrolling, not by reading a screenshot.
   ----------------------------------------------------------------------------
   His words, 2026-08-11 on the board: "I want to see all three options… Visibly
   in acting working motion other than I'll start choosing things. That's how I
   need to visually see things." And: "remember the words and the hero — you have
   the dots that are interactive, that kind of spread apart and come back
   together. I like that, so don't make this boring just because we're choosing a
   layout theme."

   So the dots, the clips and the narration are IDENTICAL in all three. What
   changes is the SYSTEM, lifted from awesome-design's real DESIGN.md files:

     data-theme="nintendo"  · nintendo-2001 · halftone command bar, outlined
                              box-art wordmark, page-tinted hero fields, and its
                              hard rule that warm colour ONLY ever means "go here"
     data-theme="nike"      · nike          · towering poster type, near-monochrome
                              chrome, colour reserved for the picture and the price
     data-theme="starbucks" · starbucks     · colour-block band rhythm, full-pill
                              buttons, floating round order button that follows you

   His palette and his fonts are NOT on the table and do not change between
   themes — DESIGN_V5 pink/lavender/gold/ink and Alfa Slab One + Shantell Sans +
   Jost throughout. What is being chosen is structure, not colour.

   Everything here is an override on world.css. Nothing below changes the engine.
   ========================================================================== */

/* ============================================================ A · NINTENDO 2001
   Its three-voice contrast, applied literally: cool structure, a near-black
   command slab printed with halftone, and warm colour that only ever says GO. */
[data-theme="nintendo"]{
  --field:#F7EFFB;              /* the "hero field" tint behind the wordmark */
  --slab:#332742;               /* the carbon command slab */
}
[data-theme="nintendo"] .bar{
  background:var(--slab); border-bottom:0; color:#fff;
  /* the speaker-grille dot matrix that is this system's signature */
  background-image:radial-gradient(rgba(255,255,255,.17) 1.1px,transparent 1.2px);
  background-size:5px 5px;
}
[data-theme="nintendo"] .bar__mark{
  background:var(--paper); color:var(--rose); border:2px solid var(--slab);
  border-radius:999px; padding:4px 14px;    /* the racetrack logo pill */
}
/* THE PILL IS PART OF THE MARK'S WIDTH, so it has to give ground on a small phone. Measured at
   320px: the name needs 118px of type, the racetrack adds 28px of padding and 4px of border,
   and the bar only had 138px left after the Order button took what it needs — so the final "i"
   of "Mari" was sliced off by the pill's own overflow. It lives here rather than in world.css
   because `[data-theme]` outranks a bare class, and themes.css loads second: a fix written over
   there would have looked right in the file and changed nothing on the screen. */
@media (max-width:400px){
  [data-theme="nintendo"] .bar__mark{padding:4px 8px}
}
[data-theme="nintendo"] .bar__mark b{color:var(--rose)}
[data-theme="nintendo"] .bar__note{
  color:var(--gold); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
}
[data-theme="nintendo"] .curtain{background:var(--field)}
/* outlined box-art lettering: the dots are drawn, so the outline lives on the
   canvas's own shadow rather than a text-stroke */
[data-theme="nintendo"] #dots{filter:drop-shadow(5px 5px 0 var(--pink)) drop-shadow(0 0 1px var(--ink))}
[data-theme="nintendo"] .curtain__foot p{color:var(--plum)}
[data-theme="nintendo"] #world .sw-copy{
  border-width:var(--line); box-shadow:var(--drop) var(--drop) 0 var(--slab);
}
[data-theme="nintendo"] #world .sw-copy__title{color:var(--ink)}
[data-theme="nintendo"] .foot{background:var(--slab);
  background-image:radial-gradient(rgba(255,255,255,.14) 1.1px,transparent 1.2px); background-size:5px 5px}

/* ============================================================ B · NIKE
   Photography-first: the page goes quiet so the clips are the only colour on
   screen. Poster type at full height, one pill, hairline rules, no drops. */
[data-theme="nike"]{
  --line:1px;
  --drop:0px;
  --field:#F5F5F5;
}
[data-theme="nike"] .bar{border-bottom:1px solid rgba(51,39,66,.14); background:var(--paper)}
[data-theme="nike"] .bar__mark{font-size:20px; letter-spacing:-.01em}
[data-theme="nike"] .bar__note{display:none}          /* chrome carries no jokes here */
[data-theme="nike"] .order-btn{
  background:var(--ink); color:var(--paper); border:0; box-shadow:none;
  font-family:var(--ui); font-weight:700; letter-spacing:.01em;
}
[data-theme="nike"] .order-btn--ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
[data-theme="nike"] .order-btn:hover{transform:none; opacity:.86}
[data-theme="nike"] .order-btn:active{transform:none}
[data-theme="nike"] .curtain{background:var(--field)}
[data-theme="nike"] .curtain::before{opacity:.35}
[data-theme="nike"] #dots{filter:none}
/* the copy stops being a drawn panel and becomes type sitting on the picture,
   held legible by a hard-edged scrim instead of a border */
[data-theme="nike"] #world .sw-copy{
  background:transparent; border:0; box-shadow:none; padding:0;
  width:min(52vw,620px);
}
[data-theme="nike"] #world .sw-copy__title{
  font-size:clamp(38px,6vw,76px); line-height:.94; text-transform:uppercase;
  color:var(--paper); text-shadow:0 2px 30px rgba(51,39,66,.85), 0 1px 3px rgba(51,39,66,.9);
}
[data-theme="nike"] #world .sw-copylayer::before{
  display:block !important; width:min(64vw,860px);
  background:linear-gradient(90deg,rgba(51,39,66,.78) 0%,rgba(51,39,66,.42) 52%,transparent 100%);
}
[data-theme="nike"] .sec{border-top:1px solid rgba(51,39,66,.14)}
[data-theme="nike"] .treat,[data-theme="nike"] .box,[data-theme="nike"] .club__card,
[data-theme="nike"] .boast{box-shadow:none; border:1px solid rgba(51,39,66,.16)}
[data-theme="nike"] .sec h2{text-transform:uppercase; letter-spacing:-.02em}

/* ============================================================ C · STARBUCKS
   A real ordering system: colour-block page rhythm, universal full pills, and
   the floating round order button that follows you down the page. */
[data-theme="starbucks"]{
  --line:0px;
  --drop:0px;
  --radius:12px;
}
[data-theme="starbucks"] .bar{background:var(--paper); border-bottom:1px solid rgba(51,39,66,.10);
  box-shadow:0 1px 3px rgba(51,39,66,.06), 0 4px 14px rgba(51,39,66,.05)}
[data-theme="starbucks"] .order-btn{
  background:var(--ink); color:var(--paper); border:0; border-radius:50px;
  box-shadow:none; font-family:var(--ui); font-weight:700;
}
[data-theme="starbucks"] .order-btn--ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink)}
[data-theme="starbucks"] .order-btn:active{transform:scale(.95)}     /* its signature press */
[data-theme="starbucks"] .curtain{background:var(--wash)}
[data-theme="starbucks"] #dots{filter:none}
[data-theme="starbucks"] #world .sw-copy{
  background:var(--paper); border:0; border-radius:12px;
  box-shadow:0 8px 12px rgba(51,39,66,.14), 0 0 6px rgba(51,39,66,.10);
}
[data-theme="starbucks"] #world .sw-copy__eyebrow{border-radius:12px 12px 0 0; border-bottom:0}
/* the colour-block rhythm: alternate bands instead of ruled panels */
[data-theme="starbucks"] .sec{border-top:0}
[data-theme="starbucks"] .sec--wash{background:var(--wash)}
[data-theme="starbucks"] .sec:nth-of-type(even){background:var(--paper)}
[data-theme="starbucks"] .treat,[data-theme="starbucks"] .box,[data-theme="starbucks"] .club__card{
  border:0; border-radius:12px; box-shadow:0 8px 12px rgba(51,39,66,.10), 0 0 6px rgba(51,39,66,.08);
}
[data-theme="starbucks"] .treat img{border:0; border-radius:8px}
[data-theme="starbucks"] .box__lid{border-bottom:0; border-radius:12px 12px 0 0}
[data-theme="starbucks"] .boast{border:0; border-radius:12px; box-shadow:0 8px 12px rgba(51,39,66,.12)}
[data-theme="starbucks"] .club__n,[data-theme="starbucks"] .treat__add,
[data-theme="starbucks"] .treat__step button{border:0; box-shadow:0 2px 5px rgba(51,39,66,.14)}
[data-theme="starbucks"] .seg{border:0; box-shadow:inset 0 0 0 2px rgba(51,39,66,.14)}
[data-theme="starbucks"] .addr__in{border:0; box-shadow:inset 0 0 0 2px rgba(51,39,66,.14); border-radius:12px}
/* the "Frap" — the floating round order button, this system's signature move */
[data-theme="starbucks"] .frap{
  position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom)); z-index:210;
  width:64px; height:64px; border-radius:50%; border:0; cursor:pointer;
  background:var(--gold); color:var(--ink); font-family:var(--display); font-size:24px;
  box-shadow:0 0 6px rgba(51,39,66,.24), 0 8px 12px rgba(51,39,66,.18);
  display:grid; place-items:center; text-decoration:none;
}
[data-theme="starbucks"] .frap:active{transform:scale(.95)}
.frap{display:none}                                   /* only Starbucks has one */

/* ============================================================ THE SWITCHER
   Temporary. It exists so he can flip themes mid-scroll and feel the difference
   in motion; it comes out the moment he picks. */
.themepick{
  position:fixed; left:14px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:220;
  display:flex; gap:0; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  box-shadow:0 6px 20px rgba(51,39,66,.24); border:2px solid var(--ink);
}
.themepick button{
  appearance:none; border:0; cursor:pointer; background:transparent; color:var(--ink);
  font-family:var(--ui); font-weight:700; font-size:13px; padding:0 14px; min-height:44px;
}
.themepick button.is-on{background:var(--ink); color:var(--paper)}
.themepick button:focus-visible{outline:2px solid var(--sky); outline-offset:-4px}
@media (max-width:520px){ .themepick button{padding:0 10px; font-size:13px} }