/* ============================================================
   TrancePlay 인게임 브랜드 레이어  (정본: www/brand-ingame.css)
   ⛔ 게임 폴더의 public/brand.css 를 «직접 고치지 마라».
      여기를 고치고 ./sync-brand.sh 를 돌려라 — 3게임에 같은 파일이 깔린다.

   전제: 게임마다 배경 테마가 다르다.
     race  = 밝은 하늘색   → 기본값(어두운 글자)
     squid / tetris = 어두운 배경 → <body class="tp-dark">
   ⛔ 실제 «플레이» 화면은 가리지 않는다 — 상단바 안 작은 마크 하나뿐이다.
   ============================================================ */

.tp-scope,
body {
  --tp-fg:    #2a1a0f;
  --tp-sub:   rgba(28, 18, 10, .82);   /* ⚠️ 밝은 배경이라 «옅게 하면 대비가 깨진다» (AA) */
  --tp-line:  rgba(42, 26, 15, .18);
  --tp-panel: rgba(255, 255, 255, .5);
  --tp-inv:   1;              /* METATRANCE 워드마크는 «흰색» PNG — 밝은 배경에선 반전 */
}
body.tp-dark {
  --tp-fg:    #eef1f7;
  --tp-sub:   #9094a8;
  --tp-line:  rgba(255, 255, 255, .13);
  --tp-panel: rgba(255, 255, 255, .045);
  --tp-inv:   0;
}

/* ---------- ① 홈 상단 — 부모 브랜드 ---------- */
.tp-top {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 12px;
  border: 2px solid var(--tp-line); border-radius: 999px;
  background: var(--tp-panel);
  text-decoration: none; color: var(--tp-fg);
  transition: transform .14s, border-color .14s;
}
.tp-top:hover { transform: translateY(-2px); border-color: #5fe1f2; }
.tp-top img { height: 23px; width: auto; display: block; }
.tp-top span {
  font-size: 11.5px; font-weight: 800; letter-spacing: -.01em;
  color: var(--tp-sub); padding-left: 10px; border-left: 1px solid var(--tp-line);
}

/* ---------- ② 홈 하단 — 다른 게임 + 회사 정보 ---------- */
.tp-foot { width: min(560px, 100%); margin: 4px auto 0; text-align: center; }

.tp-more { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tp-more-label {
  width: 100%; font-size: 11.5px; font-weight: 800; color: var(--tp-sub);
  letter-spacing: .02em; margin-bottom: 2px;
}
.tp-more a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--tp-fg); background: var(--tp-panel);
  border: 2px solid var(--tp-line); border-radius: 999px; padding: 7px 14px;
  transition: transform .12s, border-color .12s;
}
.tp-more a:hover { transform: translateY(-2px); border-color: currentColor; }
.tp-more a i { width: 9px; height: 9px; border-radius: 2px; background: currentColor; opacity: .75; }
/* ⭐ 게임별 색 — 정본은 www/style.css 의 :root 악센트다. «그쪽을 고치면 여기도» 고쳐라.
   ⛔ 2026-09-26 까지 옛 팔레트(bomber #ff7a5c · racer #7fe0c0 · ice #7fd0ff)가 남아
      랜딩과 게임 푸터의 같은 게임이 «다른 색»이었다. brawl·elev 는 아예 없어 기본색이었다. */
.tp-more .to-race   { color: #c67a0a; }
.tp-more .to-squid  { color: #1f9c58; }
.tp-more .to-tetris { color: #0d8fb0; }
.tp-more .to-beam   { color: #c26a00; }
.tp-more .to-ice    { color: #2f62c8; }
.tp-more .to-bomber { color: #c93a1e; }
.tp-more .to-racer  { color: #c2136d; }
.tp-more .to-brawl  { color: #6b42c8; }
.tp-more .to-elev   { color: #12896b; }
body.tp-dark .tp-more .to-race   { color: #ffc94a; }
body.tp-dark .tp-more .to-squid  { color: #4ade8a; }
body.tp-dark .tp-more .to-tetris { color: #46d9f5; }
body.tp-dark .tp-more .to-beam   { color: #ff9a2b; }
body.tp-dark .tp-more .to-ice    { color: #6aa5ff; }
body.tp-dark .tp-more .to-bomber { color: #ff5236; }
body.tp-dark .tp-more .to-racer  { color: #ff2f9e; }
body.tp-dark .tp-more .to-brawl  { color: #a87cff; }
body.tp-dark .tp-more .to-elev   { color: #2fdfb4; }

.tp-biz { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--tp-line); }
.tp-biz-mark { display: inline-block; margin-bottom: 10px; }
.tp-biz-mark img {
  height: 13px; width: auto; opacity: .62;
  filter: invert(var(--tp-inv));
}
.tp-biz-mark:hover img { opacity: 1; }
.tp-biz address {
  font-style: normal; font-size: 11px; line-height: 1.85; color: var(--tp-sub);
  word-break: keep-all;
}
.tp-biz address b { font-weight: 800; }
.tp-biz address a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tp-biz-copy { margin-top: 8px; font-size: 10.5px; color: var(--tp-sub); opacity: .85; }
/* ⚠️ 게임마다 a 기본색이 달라서 «상속»을 명시해야 한다 — 안 하면 어두운 배경에 어두운 링크가 된다 */
.tp-biz-copy a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- ③ 로비 헤더 마크 ---------- */
.tp-lobby-brand {
  display: inline-flex; align-items: center; flex: none;
  padding: 5px 9px; border: 2px solid var(--tp-line); border-radius: 12px;
  background: var(--tp-panel); text-decoration: none;
  transition: border-color .14s, transform .12s;
}
.tp-lobby-brand:hover { border-color: #5fe1f2; transform: translateY(-1px); }
.tp-lobby-brand img { height: 17px; width: auto; display: block; }
@media (max-width: 560px) { .tp-lobby-brand { display: none; } }

/* ---------- ④ 로비 하단 정보 스트립 ---------- */
.tp-lobby-foot {
  margin: 30px auto 0; padding: 16px 18px;
  border-top: 1px solid var(--tp-line);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  justify-content: center; text-align: center;
}
.tp-lobby-foot img { height: 20px; width: auto; opacity: .85; }
.tp-lobby-foot p { font-size: 11px; line-height: 1.8; color: var(--tp-sub); word-break: keep-all; }
.tp-lobby-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- ⑤ 플레이 화면 — 상단바 안 «작은» 마크 ---------- */
/* ⛔ 별도 레이어를 얹지 않는다. 이미 있는 고정 상단바의 첫 자식으로 들어가
      화면을 «추가로» 가리지 않게 한다. */
.tp-bar-mark { flex: none; display: inline-flex; align-items: center; opacity: .45; pointer-events: none; user-select: none; }
.tp-bar-mark img { height: 15px; width: auto; display: block; }
@media (max-width: 560px) { .tp-bar-mark img { height: 12px; } }