/* Stubs (web/js/ui/stubs.js, screens/shop.js): the balance chip, the earn flight, the Stubs sheet, the shop, and the
   cosmetics bought there: Cinerama panel themes ([data-panel-theme] swaps the --p* tokens from tokens.css), name
   colours (.name-c-*) and avatar frames (.avatar[data-frame]). Every text colour here passes 4.5:1 on its surface. */

/* ---------- Panel themes (SHOP kind panel_theme; ids match src/config.js) ---------- */
[data-panel-theme="theme_noir"] {
  --p1: #d9dce3; --p1-edge: #8b909c; --p1-ink: #0d1424;
  --p2: #4f5566; --p2-edge: #2a2e38; --p2-ink: #ffffff;
  --p3: #a9afbd; --p3-edge: #6b7180; --p3-ink: #0d1424;
}
[data-panel-theme="theme_drive_in"] {
  --p1: #ff4fa3; --p1-edge: #b02a6c; --p1-ink: #0d1424;
  --p2: #14b8a6; --p2-edge: #0b7a6e; --p2-ink: #0d1424;
  --p3: #ffd23f; --p3-edge: #b08f1c; --p3-ink: #0d1424;
}
[data-panel-theme="theme_gold"] {
  --p1: #e8c15a; --p1-edge: #9c7a22; --p1-ink: #0d1424;
  --p2: #b8860b; --p2-edge: #7a5806; --p2-ink: #0d1424;
  --p3: #ffe08a; --p3-edge: #b39845; --p3-ink: #0d1424;
}
[data-panel-theme="theme_midnight"] {
  --p1: #3b4cca; --p1-edge: #242f85; --p1-ink: #ffffff;
  --p2: #7b2cbf; --p2-edge: #4f1a7c; --p2-ink: #ffffff;
  --p3: #c77dff; --p3-edge: #8a4fc0; --p3-ink: #0d1424;
}

/* ---------- Name colours (SHOP kind name_color; Player.cosmetics.nameColor) ---------- */
.name-c-neon { color: #ff7ac8; }
.name-c-mint { color: #5fe3b0; }
.name-c-sky { color: #7cc8ff; }
.name-c-gold { color: #f6c453; }

/* ---------- Avatar frames (SHOP kind frame; Player.cosmetics.frame). Outline only, so no layout moves. ---------- */
.avatar[data-frame] { overflow: visible; outline-offset: 2px; }
.avatar[data-frame] img { border-radius: 50%; }
.avatar[data-frame="marquee"] { outline: 3px dotted var(--gold); }
.avatar[data-frame="reel"] { outline: 3px dashed var(--cream); }
.avatar[data-frame="star"] { outline: 4px double var(--gold); }

/* ---------- Balance chip ---------- */
.stub-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; border-radius: 22px;
  background: var(--bg-card); color: var(--text); border: 1px solid var(--line-strong); font: 800 var(--fs-md)/1 var(--font-body);
  cursor: pointer; font-variant-numeric: tabular-nums; position: relative;
}
.stub-chip svg { width: 20px; height: 20px; color: var(--gold); flex: none; }
.stub-chip.glow { animation: stub-glow 700ms var(--ease-out); }
@keyframes stub-glow {
  0% { box-shadow: 0 0 0 0 rgba(242, 178, 51, 0); }
  30% { box-shadow: 0 0 22px 4px rgba(242, 178, 51, .55); }
  45% { box-shadow: 0 0 10px 2px rgba(242, 178, 51, .3); }
  60% { box-shadow: 0 0 20px 4px rgba(242, 178, 51, .5); }
  100% { box-shadow: 0 0 0 0 rgba(242, 178, 51, 0); }
}

/* ---------- The flight: small stubs arc from the earn card into the chip (transform/opacity only) ---------- */
.stub-fly {
  position: fixed; left: 0; top: 0; width: 26px; height: 26px; z-index: 60; pointer-events: none; color: var(--gold);
  will-change: transform, opacity;
}
.stub-fly svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5)); }

/* ---------- Earn card (result screen and check-in) ---------- */
.stub-earn { display: grid; gap: var(--s2); padding: var(--s4); border-radius: var(--radius); background: var(--bg-raised); border: 1px solid var(--line); }
.stub-earn-head { display: flex; align-items: center; gap: var(--s2); font: 800 var(--fs-md)/1.2 var(--font-body); }
.stub-earn-head svg { width: 22px; height: 22px; color: var(--gold); flex: none; }
.stub-earn-head b { margin-left: auto; color: var(--gold); font-size: var(--fs-xl); }
.stub-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.stub-lines li { display: flex; justify-content: space-between; gap: var(--s3); color: var(--text-2); font-weight: 700; font-size: var(--fs-sm); }
.stub-lines li b { color: var(--text); }
.stub-earn.fade-in { animation: stub-fade 400ms var(--ease-out) both; }
@keyframes stub-fade { from { opacity: 0; } to { opacity: 1; } }
.stub-nudge { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.stub-nudge p { flex: 1 1 180px; margin: 0; }
.stub-toast { display: inline-flex; align-items: center; gap: var(--s2); }
.stub-toast svg { width: 20px; height: 20px; color: var(--gold-edge); flex: none; }

/* ---------- Stubs sheet ---------- */
.stub-sheet-total { display: flex; align-items: center; justify-content: center; gap: var(--s2); font: 700 2.6rem/1 var(--font-display); margin: var(--s2) 0 var(--s4); }
.stub-sheet-total svg { width: 36px; height: 36px; color: var(--gold); }
.stub-history { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.stub-history li { display: flex; justify-content: space-between; gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--line); font-weight: 700; }
.stub-history li .when { display: block; color: var(--text-2); font-size: var(--fs-xs); font-weight: 600; }
.stub-history .plus { color: var(--good); }
.stub-history .minus { color: var(--text-2); }

/* ---------- Shop ---------- */
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s2) 0 var(--s4); }
.shop-head p { margin: 0; color: var(--text-2); font-weight: 700; font-size: var(--fs-sm); }
.shop-h2 { font: 700 var(--fs-lg)/1.2 var(--font-display); margin: var(--s5) 0 var(--s3); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.shop-card { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3); border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--line); box-shadow: 0 4px 0 #0a1020; min-width: 0; }
.shop-card.equipped { border-color: var(--gold); }
.shop-card .name { font-weight: 800; overflow-wrap: anywhere; }
.shop-card .sub { color: var(--text-2); font-size: var(--fs-xs); font-weight: 700; }
.shop-card .btn { margin-top: auto; width: 100%; }
.shop-price { display: inline-flex; align-items: center; gap: 4px; }
.shop-price svg { width: 16px; height: 16px; }
.shop-preview { display: grid; place-items: center; min-height: 72px; border-radius: var(--radius-sm); background: var(--bg-inset); padding: var(--s2); overflow: hidden; }
.shop-preview .cine { width: 100%; gap: 3px; }
.shop-preview .cine.sm .cine-panel { min-height: 52px; padding: 4px 2px; border-radius: 8px; }
.shop-preview .cine.sm .cine-panel .film { font-size: 11px; }
.shop-preview .cine.sm .cine-panel .slot { font-size: 8px; letter-spacing: .06em; }
.shop-preview .who { font: 800 var(--fs-lg)/1.2 var(--font-body); }
.shop-preview .avatar { width: 48px; height: 48px; }
.shop-preview > svg { width: 36px; height: 36px; color: var(--gold); }
.shop-locked .shop-grid { opacity: .5; }
.shop-need { color: var(--text-2); font-size: var(--fs-xs); font-weight: 700; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .stub-chip.glow, .stub-earn.fade-in { animation: none; }
}

/* A one-line Stubs note on the challenge and party screens. */
.stub-line { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; margin: var(--s2) 0; }
.stub-line svg { width: 20px; height: 20px; color: var(--gold); }