/* „Ajándék reakciók” oldal (2026-10-29) — public/console/giftfx-page.js párja. A tűzijáték fül a saját uj-fireworks.css-ét
   használja; ez csak az oldal fejét és a 🍩 Fánk-összerakó fül sajátjait adja. uj.css tokenek, `:root body.beta.skin2.uj` előtag. */
:root body.beta.skin2.uj .giftfx-page .uj-tts-head { margin-bottom: 20px; }
:root body.beta.skin2.uj .giftfx-page .gfx-panel[hidden] { display: none; }
:root body.beta.skin2.uj .gfx-gift { margin: 4px 0 16px; }
:root body.beta.skin2.uj .gfx-how-title { margin-top: 4px; }
:root body.beta.skin2.uj .gfx-how { margin: 0 0 8px; padding-left: 20px; color: var(--uj-text); font: 400 14px/1.6 var(--uj-font); }
:root body.beta.skin2.uj .gfx-how li { margin: 2px 0; }
:root body.beta.skin2.uj .gfx-field + .gfx-field { margin-top: 18px; }
:root body.beta.skin2.uj .gfx-stage { max-width: 260px; }
:root body.beta.skin2.uj .gfx-mark { position: absolute; border: 2px dashed rgba(247, 175, 33, 0.55); border-radius: 50%; pointer-events: none; transition: all 0.15s ease-out; }
:root body.beta.skin2.uj .gfx-tests { display: flex; gap: 8px; flex-wrap: wrap; }
:root body.beta.skin2.uj .gfx-tests .uj-btn { flex: 1 1 auto; justify-content: center; }
:root body.beta.skin2.uj .gfx-status:empty { display: none; }

/* a nyitókép: reakció-kártyák (a Videók kategória-kártyáinak mintájára; saját osztály, mert az app.js minden .vid-card-ra rákapcsol) */
:root body.beta.skin2.uj .gfx-hub[hidden], :root body.beta.skin2.uj .gfx-back[hidden] { display: none; }
:root body.beta.skin2.uj .gfx-hub-title { margin: 0 0 14px; }
:root body.beta.skin2.uj .gfx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
:root body.beta.skin2.uj .gfx-card {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) 16px; grid-template-rows: auto auto auto; column-gap: 16px; row-gap: 4px; align-items: center;
  min-height: 124px; padding: 18px 16px 18px 18px; text-align: start; color: #fff; cursor: pointer;
  background: var(--uj-card); border: 1px solid var(--uj-line); border-radius: 6px;
}
:root body.beta.skin2.uj .gfx-card:hover { background: #1c232b; border-color: var(--uj-line-2); }
:root body.beta.skin2.uj .gfx-card:focus-visible { outline: 2px solid var(--uj-amber); outline-offset: 2px; }
:root body.beta.skin2.uj .gfx-card-ic {
  grid-column: 1; grid-row: 1 / 4; width: 62px; height: 62px; display: grid; place-items: center;
  background: #10161a; border: 1px solid var(--uj-line-2); border-radius: 6px; font-size: 32px; line-height: 1;
}
:root body.beta.skin2.uj .gfx-card-name { grid-column: 2; grid-row: 1; font: 500 17px/1.2 var(--uj-font); color: #fff; }
:root body.beta.skin2.uj .gfx-card-blurb { grid-column: 2; grid-row: 2; font: 400 13.5px/1.4 var(--uj-font); color: var(--uj-muted); }
:root body.beta.skin2.uj .gfx-card-state { grid-column: 2; grid-row: 3; font: 600 13px/1.2 var(--uj-font); color: var(--uj-muted-2); }
:root body.beta.skin2.uj .gfx-card-state.is-on { color: var(--uj-amber-text); }
:root body.beta.skin2.uj .gfx-card-state:empty { display: none; }
:root body.beta.skin2.uj .gfx-card-go { grid-column: 3; grid-row: 1 / 4; color: #dfe5ec; font-size: 20px; }
:root body.beta.skin2.uj .gfx-back { margin: 0 0 16px; }

/* 🐼 Kis barát (buddy-page.js, 2026-10-30) */
:root body.beta.skin2.uj .gfx-bd-animals { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
:root body.beta.skin2.uj .gfx-bd-animal {
  display: grid; justify-items: center; gap: 4px; padding: 10px 4px; min-height: 72px; cursor: pointer; color: #fff;
  background: #10161a; border: 1px solid var(--uj-line-2); border-radius: 6px; font: 500 13px/1.2 var(--uj-font);
}
:root body.beta.skin2.uj .gfx-bd-animal span { font-size: 28px; line-height: 1; }
:root body.beta.skin2.uj .gfx-bd-animal:hover { border-color: var(--uj-line-2); background: #1c232b; }
:root body.beta.skin2.uj .gfx-bd-animal[aria-pressed='true'] { border-color: var(--uj-amber); box-shadow: inset 0 0 0 1px var(--uj-amber); }
:root body.beta.skin2.uj .gfx-bd-animal:focus-visible { outline: 2px solid var(--uj-amber); outline-offset: 2px; }
:root body.beta.skin2.uj .gfx-bd-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px; color: #fff; background: #10161a; resize: vertical;
  border: 1px solid var(--uj-line-2); border-radius: 6px; font: 400 14px/1.4 var(--uj-font);
}
:root body.beta.skin2.uj .gfx-bd-input:focus-visible { outline: 2px solid var(--uj-amber); outline-offset: 1px; }
:root body.beta.skin2.uj .gfx-bd-toggles { display: grid; gap: 10px; margin-bottom: 14px; }
:root body.beta.skin2.uj .gfx-bd-toggles .uj-fw-note { margin: -4px 0 4px; }
:root body.beta.skin2.uj .gfx-bd-stage { max-width: 280px; overflow: visible; }
:root body.beta.skin2.uj .gfx-bd-stage .pkb-bubble { font-size: 12px !important; }