/* 大会ロビー＝ホテルの大きな木の開き戸の前。扉の左右に炎が上下2つずつ。 */

/* ---- 背景（壁と床） ---- */
.lobby-stage { position: absolute; inset: 0; background: #0d0705; transform-origin: 50% 52%; }
.lobby-wall { position: absolute; inset: 0 0 9% 0;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(255, 150, 60, 0.20), transparent 62%),
    linear-gradient(180deg, transparent 0 68%, rgba(0, 0, 0, 0.35) 68% 69%, #2b160d 69% 100%),
    repeating-linear-gradient(90deg, #3a1418 0 1.4rem, #32101a 1.4rem 2.8rem); }
.lobby-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 9%;
  background: linear-gradient(180deg, #120805, #4a1414 30%, #2a0b0b);
  border-top: 0.12rem solid #6d4a1c; }

/* ---- 炎 ---- */
.torch { position: absolute; width: 3rem; height: 6rem; pointer-events: none; }
.torch-l { right: calc(75% + 0.7rem); }
.torch-r { left: calc(75% + 0.7rem); }
.torch-top { top: 13%; }
.torch-bottom { top: 50%; }
.torch-fire { position: absolute; left: 0; top: 0; width: 3rem; height: 5.5rem; }
.torch-holder { position: absolute; left: 50%; bottom: 0; width: 1.3rem; height: 1.1rem; transform: translateX(-50%);
  background: linear-gradient(90deg, #5a4220, #d9b45a 45%, #6b4e22);
  clip-path: polygon(0 0, 100% 0, 78% 55%, 60% 100%, 40% 100%, 22% 55%); }
.torch-glow { position: absolute; left: 50%; top: 58%; width: 11rem; height: 11rem; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 160, 50, 0.34), rgba(255, 90, 20, 0.10) 45%, transparent 68%);
  animation: torch-flicker 0.9s infinite alternate ease-in-out; mix-blend-mode: screen; }
.torch-bottom .torch-glow { animation-duration: 1.15s; }
.torch-r .torch-glow { animation-delay: -0.4s; }
@keyframes torch-flicker {
  0% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.96); }
  40% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
  70% { opacity: 0.82; transform: translate(-50%, -50%) scale(0.99); }
  100% { opacity: 0.95; transform: translate(-50%, -50%) scale(1.02); }
}

/* ---- 扉（画面の中央・幅は画面の半分） ---- */
.door { --frame: 0.55rem; position: absolute; left: 25%; width: 50%; bottom: 9%; height: 80%;
  perspective: 55rem; border-radius: 0.3rem 0.3rem 0 0;
  background: linear-gradient(180deg, #4a2a14, #2b170b);
  box-shadow: 0 0 0 0.12rem #8a6a2a, 0 -0.5rem 2.5rem rgba(255, 140, 50, 0.22), 0 0 2rem rgba(0, 0, 0, 0.8); }
/* 扉の向こう（開くと見える奥の明かり） */
.door-beyond { position: absolute; left: var(--frame); right: var(--frame); top: var(--frame); bottom: 0;
  background:
    radial-gradient(ellipse at 50% 62%, #fff2c4 0, #f5c366 16%, #a85a1c 42%, #2a1208 78%),
    #120805; }
.door-leaf { position: absolute; top: var(--frame); bottom: 0; width: calc(50% - var(--frame));
  display: flex; flex-direction: column; gap: 5%; padding: 7% 9%;
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, 0.10) 0 0.08rem, transparent 0.08rem 0.5rem),
    repeating-linear-gradient(88deg, rgba(255, 220, 160, 0.05) 0 0.05rem, transparent 0.05rem 0.9rem),
    linear-gradient(90deg, #6e411f, #8a5529 50%, #6a3d1c);
  box-shadow: inset 0 0 0 0.1rem rgba(0, 0, 0, 0.45), inset 0 0 1.5rem rgba(0, 0, 0, 0.45);
  transition: transform 1.5s cubic-bezier(0.55, 0.05, 0.3, 1), filter 1.5s ease; }
.door-leaf-l { left: var(--frame); transform-origin: left center; }
.door-leaf-r { right: var(--frame); transform-origin: right center; }
.door-panel { flex: 1; border-radius: 0.15rem;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.22), rgba(255, 210, 150, 0.08));
  box-shadow: inset 0.1rem 0.1rem 0.25rem rgba(0, 0, 0, 0.6), inset -0.06rem -0.06rem 0.1rem rgba(255, 220, 170, 0.22),
    0 0 0 0.08rem rgba(40, 20, 8, 0.6); }
.door-panel:first-child { flex: 1.5; }
.door-handle { position: absolute; top: 46%; width: 0.4rem; height: 2.4rem; border-radius: 0.2rem;
  background: linear-gradient(90deg, #7a5a1e, #f3d98a 45%, #8a6a2a);
  box-shadow: 0.08rem 0.12rem 0.2rem rgba(0, 0, 0, 0.6); }
.door-leaf-l .door-handle { right: 0.45rem; }
.door-leaf-r .door-handle { left: 0.45rem; }
.door-plate { position: absolute; left: 50%; top: -1.25rem; transform: translateX(-50%);
  padding: 0.12rem 1rem; border-radius: 0.15rem; font-family: var(--serif); font-size: 0.7rem; letter-spacing: 0.35em;
  text-indent: 0.35em; color: #2a1608; background: linear-gradient(180deg, #f0d48a, #b8903c);
  box-shadow: 0 0.1rem 0.4rem rgba(0, 0, 0, 0.7); }

/* 開く＝左右の扉が奥へ回る */
.door.open .door-leaf-l { transform: rotateY(76deg); filter: brightness(0.6); }
.door.open .door-leaf-r { transform: rotateY(-76deg); filter: brightness(0.6); }
/* 奥へ進む＝扉へ向かって寄っていき、暗転する */
.lobby-stage.walk { transform: scale(3.6); transition: transform 1.5s cubic-bezier(0.5, 0, 0.9, 0.6); }
.lobby-blackout { position: absolute; inset: 0; z-index: 5; background: #000; opacity: 0; pointer-events: none; }
.lobby-blackout.on { opacity: 1; transition: opacity 0.7s ease-in 0.8s; }

/* ---- 大会選択ウィンドウ（中央） ---- */
.lobby-window { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 18.4rem; height: 13.6rem; display: flex; flex-direction: column;
  padding: 0.6rem 0.7rem 0.7rem; border-radius: 0.5rem; background: var(--panel); border: 1px solid var(--gold);
  box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.75), inset 0 0 0 0.15rem rgba(217, 180, 90, 0.12);
  animation: window-in 0.5s ease 0.5s backwards; transition: opacity 0.35s ease, transform 0.35s ease; }
@keyframes window-in { from { opacity: 0; transform: translate(-50%, -46%); } }
.lobby-title { margin: 0 0 0.45rem; text-align: center; font-family: var(--serif); font-size: 0.85rem; font-weight: 700;
  letter-spacing: 0.25em; text-indent: 0.25em; color: var(--gold); }
.tournament-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column;
  gap: 0.35rem; padding-right: 0.1rem; }
.tournament-empty { margin: auto; text-align: center; color: var(--ink-dim); line-height: 1.8; }

.tournament { display: block; width: 100%; text-align: left; padding: 0.45rem 0.6rem; border-radius: 0.35rem;
  border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 220, 150, 0.09), rgba(255, 220, 150, 0.02));
  cursor: pointer; }
.tournament:active { background: rgba(255, 220, 150, 0.18); }
.tournament-name { display: flex; align-items: baseline; gap: 0.4rem; font-family: var(--serif); font-size: 0.8rem;
  font-weight: 700; color: #fff4d6; }
.tournament-name > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tournament-rule { flex: none; padding: 0 0.3rem; border-radius: 0.15rem; border: 1px solid var(--line);
  font-family: var(--sans); font-size: 0.5rem; color: var(--gold); }
.tournament-facts { display: grid; grid-template-columns: 1fr 1.2fr 1.6fr; gap: 0.3rem; margin: 0.3rem 0 0; }
.tournament-facts div { min-width: 0; }
.tournament-facts dt { font-size: 0.48rem; color: var(--ink-dim); }
.tournament-facts dd { margin: 0; font-size: 0.68rem; font-weight: 700; white-space: nowrap; }
.tournament-facts dd.closed { color: var(--ink-dim); font-weight: 400; }

/* ---- アカウント情報（右上） ---- */
.account { position: absolute; z-index: 2; top: calc(0.5rem + env(safe-area-inset-top)); right: calc(0.4rem + env(safe-area-inset-right));
  width: 6rem; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.5rem 0.35rem;
  border-radius: 0.5rem; background: var(--panel); border: 1px solid var(--line); text-align: center;
  transition: opacity 0.35s ease; }
.account-avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 0.1rem solid var(--gold); object-fit: cover;
  background: #3a2212; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--ink-dim); }
.account-name { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 0.66rem; }
.account-role { padding: 0 0.35rem; border-radius: 0.6rem; background: var(--gold); color: #24140a; font-size: 0.48rem; font-weight: 700; }
.account-hint { color: var(--ink-dim); font-size: 0.5rem; line-height: 1.5; }
.account .btn { width: 100%; padding-left: 0.2rem; padding-right: 0.2rem; }
.account-logout { background: none; border: none; color: var(--ink-dim); font-size: 0.5rem; text-decoration: underline; cursor: pointer; }

.mode-badge { position: absolute; z-index: 2; left: calc(0.4rem + env(safe-area-inset-left)); bottom: 0.3rem;
  padding: 0.1rem 0.4rem; border-radius: 0.2rem; background: rgba(0, 0, 0, 0.6); color: var(--ink-dim); font-size: 0.48rem; }

/* 入場の演出のあいだ＝ウィンドウとアカウントを消して、扉だけを見せる */
#screen-lobby.entering .lobby-window { opacity: 0; transform: translate(-50%, -50%) scale(0.96); pointer-events: none; }
#screen-lobby.entering .account, #screen-lobby.entering .mode-badge { opacity: 0; pointer-events: none; }

/* ---- 運営メニュー ---- */
.ops-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 0.9rem; }
.ops-grid > * { min-width: 0; }
.ops-grid h3 { margin: 0 0 0.4rem; font-size: 0.66rem; color: var(--ink-dim); font-weight: 700; }
.ops-list { display: flex; flex-direction: column; gap: 0.3rem; max-height: 11rem; overflow-y: auto; }
.ops-item { display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.4rem; border-radius: 0.25rem;
  border: 1px solid var(--line); }
.ops-item-main { flex: 1; min-width: 0; }
.ops-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.ops-item-sub { color: var(--ink-dim); font-size: 0.5rem; }
.ops-item .btn { flex: none; white-space: nowrap; }
.ops-state { flex: none; font-size: 0.5rem; color: var(--ink-dim); }
.ops-state.on { color: #8fd694; }

@media (prefers-reduced-motion: reduce) {
  .torch-glow { animation: none; }
  .door-leaf, .lobby-stage.walk { transition-duration: 0.01s; }
}

/* ---- ログイン（サーバーモード）: ログイン／はじめての人 の切り替え ---- */
.login-tabs { display: flex; gap: 0.3rem; margin: -0.1rem 0 0.6rem; border-bottom: 1px solid var(--line); }
.login-tab { flex: 1; padding: 0.3rem 0.4rem; border: none; border-bottom: 0.12rem solid transparent; background: none;
  color: var(--ink-dim); font-weight: 700; font-size: 0.62rem; cursor: pointer; }
.login-tab.on { color: var(--gold); border-bottom-color: var(--gold); }
.login-hint { margin: 0.1rem 0 0; color: var(--ink-dim); font-size: 0.55rem; line-height: 1.6; }
.login-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.6rem; }
.login-form > .field { min-width: 0; }
.login-form > .login-hint, .login-form > .modal-error, .login-form > .modal-actions { grid-column: 1 / -1; }
.modal { scrollbar-color: var(--gold-deep) transparent; }