/* ETHERION — 상단 문장: ETHERION 글자 (js/crest.js, 가이드 2.15, 게임 v3.9)
   그림 없이 타이틀 로고와 같은 글자(js/logo.js LOGO)만, 멈춘 채로. 글자는 상단 띠(--bar-h) 높이 안에 들어간다 — 띠 위아래로 넘치지 않는다.
   글자 svg 하나의 높이 = 1.16em(로고 좌표 VB_H 1160 / 1000)이므로 글자 크기 = 띠 높이 × .72 → 글자 높이 ≈ 띠 높이의 84%.
   지금 화면 이름(.crest-sub)은 대기실 밖의 메뉴 화면에서만, 띠 아래 끝에 걸린 작은 명판으로 보인다. 대기실에서는 숨긴다.
   v3.5.1 ~ v3.7.9의 키 아트 그림 띠(.cr-kv)와 대기실에서 문장을 숨기던 규칙은 지웠다. */
:root { --crest-drop: 34px; --crest-fs: calc(var(--bar-h) * .72); }
@media (max-width: 1600px) { :root { --crest-drop: 26px; } }
@media (max-width: 1500px) { :root { --crest-fs: calc(var(--bar-h) * .64); } }
@media (max-width: 1440px) { :root { --crest-drop: 12px; } }
@media (max-width: 1300px) { :root { --crest-drop: 22px; --crest-fs: calc(var(--bar-h) * .6); } }

.tb-crest.has-art { z-index: 2; width: auto; height: var(--bar-h); padding: 0 6px; display: grid; place-items: center; overflow: visible;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55)); }
.tb-crest.has-art::before, .tb-crest.has-art::after { display: none; }
.tb-crest.has-art:hover { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55)) drop-shadow(0 0 10px rgba(240, 200, 120, .3)); }
/* 화면 읽기용 글자 */
.tb-crest.has-art .crest-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* 글자 / 이미지: 그림(img/ui/crest/crest_logo.png)이 있으면 그림을 쓰고, 없으면 코드로 된 로고(js/logo.js)를 쓴다 */
.cr-wrap { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; }
.cr-img { height: calc(var(--bar-h) * .84); width: auto; max-width: 340px; object-fit: contain; display: none; pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .6)); transition: filter .2s; }
.cr-wrap.has-img .cr-img { display: block; }
.cr-wrap.has-img .cr-word { display: none; }
.tb-crest.has-art:hover .cr-img { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .6)) drop-shadow(0 0 10px rgba(240, 200, 120, .4)); }

.cr-word { display: flex; align-items: center; font-size: var(--crest-fs); line-height: 1; pointer-events: none; }
.cr-word .lg { display: block; flex: none; overflow: visible; }
.cr-word .lg-line { display: none; }
.cr-word .lg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 지금 화면 이름: 띠 아래 끝에 걸린 작은 명판 (대기실 밖) */
.tb-crest.has-art .crest-sub { position: absolute; left: 50%; top: calc(var(--bar-h) - 9px); translate: -50% 0; z-index: 1; padding: 3px 14px 4px; font-size: 13px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(16, 15, 28, .94), rgba(8, 8, 15, .94)); border: 1px solid rgba(217, 180, 106, .45); clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); color: var(--gold-hi); }
@media (max-width: 1300px) { .tb-crest.has-art .crest-sub { font-size: 11px; } }
.screen-lobby .tb-crest.has-art .crest-sub { display: none; }

/* 문장이 넓어져도 오른쪽 날개의 글자가 두 줄로 꺾이지 않게 */
.tbw-right .gold-chip, .tbw-right .weather-chip, .tbw-right .wx-chip, .seal-txt b, .seal-txt small { white-space: nowrap; }

@media (max-width: 760px) {
  :root { --crest-drop: 0px; --crest-fs: 26px; }
  .tb-crest.has-art { width: auto; height: 46px; padding: 0; }
  .tb-crest.has-art .crest-sub { display: none; }
  .cr-img { height: 36px; max-width: 200px; }
}

/* v3.7.3 대기실: 덱 보관함 · 덱 보기 · 수레바퀴/채팅은 띠 바로 밑(18px)에서 함께 시작한다.
   덱 보기 판은 덱 보관함 판과 세로 크기가 같다(js/screens.js fitLobbyCards가 카드를 키우고 높이를 맞춘다).
   v3.9: 상단 띠 가운데에 ETHERION 글자가 다시 보인다(띠 높이 안). */
.screen-lobby .lobby { padding-top: 18px; }
.screen-lobby .side-col { top: calc(var(--bar-h) + 18px); }
.deck-view.dv-fit { grid-template-rows: auto auto 1fr auto; }
.deck-view.dv-fit .dv-cards { align-content: center; }
@media (max-width: 760px) { .screen-lobby .lobby { padding-top: 14px; } }