/* web/css/subnav.css - Sub-menu navigation & viewport containment styling */
/* Strictly <= 200 lines, <= 100 chars per line. */

.subnav-bar {
  display: flex; background: rgba(22, 21, 20, 0.05);
  border: 1px solid var(--brush-border); border-radius: 20px;
  padding: 3px; gap: 4px; margin-bottom: 0.65rem;
}

.subnav-tab {
  flex: 1; min-height: 44px; font-size: 0.8rem; font-weight: 800;
  color: var(--sumi-faded); background: transparent; border: none;
  border-radius: 16px; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; gap: 5px;
  transition: all 0.15s ease;
}
.subnav-tab:hover { color: var(--sumi-ink); }
.subnav-tab:active { transform: scale(0.96); }
.subnav-tab.active {
  background: #fff; color: var(--hanko-red);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.subnav-badge {
  font-size: 0.68rem; background: var(--hanko-red); color: #fff;
  padding: 1px 6px; border-radius: 10px;
}

.comms-unread-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hanko-red); display: inline-block;
  animation: unreadPulse 1.2s infinite ease-in-out;
}

@keyframes unreadPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.8); }
}

.tab-glowing {
  animation: tabGlow 1.3s infinite ease-in-out !important;
}

@keyframes tabGlow {
  0%, 100% { box-shadow: 0 0 0 1px var(--hanko-red), 0 0 8px rgba(184, 51, 36, 0.45); }
  50% { box-shadow: 0 0 0 2px var(--hanko-red), 0 0 18px rgba(184, 51, 36, 0.85); }
}

.dojo-glowing {
  animation: dojoGlow 1.3s infinite ease-in-out !important;
}

@keyframes dojoGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(184, 51, 36, 0.5)); }
  50% { filter: drop-shadow(0 0 14px rgba(184, 51, 36, 0.95)) drop-shadow(0 0 4px #b83324); }
}

/* Arena Top Bar */
.arena-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 0.4rem 0.6rem; margin-bottom: 0.65rem;
  background: #fff; border: 1px solid var(--brush-border);
  border-radius: 8px; font-size: 0.78rem;
}

.arena-code-badge {
  display: flex; align-items: center; gap: 4px;
  font-family: monospace; font-size: 0.88rem; font-weight: 800; color: var(--sumi-ink);
}
.arena-code-badge .badge-lbl {
  font-size: 0.65rem; font-family: var(--font-sans);
  font-weight: 900; color: var(--sumi-faded);
}
.arena-code-badge strong { color: var(--hanko-red); letter-spacing: 1px; }

.arena-stat-tag { font-size: 0.72rem; font-weight: 700; color: var(--sumi-faded); }

.btn-leave-top {
  min-height: 44px; min-width: 44px; padding: 0.25rem 0.75rem;
  font-size: 0.75rem; font-weight: 700; background: rgba(186, 45, 37, 0.04);
  color: var(--hanko-red); border: 1px solid var(--hanko-red);
  border-radius: 6px; cursor: pointer; transition: all 0.15s ease;
}
.btn-leave-top:hover { background: var(--hanko-dim); }
.btn-leave-top:active { transform: scale(0.96); }

/* Drawer Header with Close Button */
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 0.35rem; margin-bottom: 0.35rem;
  border-bottom: 1px dashed var(--brush-border);
  font-size: 0.76rem; font-weight: 800; color: var(--sumi-faded);
}

.btn-close-drawer {
  min-height: 44px; min-width: 44px; padding: 0;
  font-size: 0.95rem; font-weight: 900; background: transparent;
  color: var(--sumi-faded); border: none; cursor: pointer; transition: all 0.15s ease;
}
.btn-close-drawer:hover { color: var(--hanko-red); }
.btn-close-drawer:active { transform: scale(0.92); }

/* Viewport Containment */
.arena-card {
  max-height: calc(100dvh - 54px - 62px - 2rem);
  display: flex; flex-direction: column; overflow: hidden; padding: 0.85rem 0.75rem;
}
.arena-subview { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.arena-subview#arena-subview-comms .lobby-comms-box {
  margin: 0; height: 100%; display: flex; flex-direction: column;
}
.arena-subview#arena-subview-comms .chat-history {
  flex: 1; min-height: 160px; max-height: 320px;
}