/* layout.css -- body, screen system, nav bars, content column
   Depends on: tokens.css
   Import order: reset.css -> tokens.css -> layout.css -> components.css -> battle.css */

/* -- BODY ------------------------------------------------- */
/* 5x5 RGBA PNG tile -- single diagonal pixel at 35% opacity.
   background-color is the parchment base; background-image tiles over it.
   This rule is never overridden -- desktop media query below only changes
   the surrounding colour, not the body itself. */
body {
  background-color:  var(--bg-base);
  background-image:  url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAEklEQVR42mO4sqOqiAEboLIEAIwNDFnixTugAAAAAElFTkSuQmCC");
  background-repeat: repeat;
  background-size:   5px 5px;
  color:             var(--text-primary);
  font-family:       var(--font-body);
  font-size:         var(--text-lg);
  overflow:          hidden;
  /* position:fixed locks the viewport so mobile browser chrome
     collapsing/expanding never causes a layout resize or reflow. */
  position:          fixed;
  inset:             0;
  width:             100%;
  height:            100%;
}

/* -- GLOBAL TEXT LEGIBILITY -------------------------------- */
/* All primary text gets a subtle dark halo so it remains
   readable against any backdrop image or theme combination.
   Applied broadly -- overridden per-element where not needed.  */

/* Interactive elements and decorative text don't need shadows */
button, input, .spell-badge, .spell-card-cost,
.spell-card-cooldown-badge, .spell-card-tier-badge,
.spell-cast-lv-btn, .nav-item {
  text-shadow: none;
}

/* -- FULL-SCREEN BLURRED BACKDROP ------------------------- */
/* Sits behind #screen-game, fills the entire viewport.
   Same image as #battle-backdrop but heavily blurred so it
   reads as pure atmosphere -- zone colour and mood, not detail.
   Hidden by default; shown when a battle backdrop is active.   */

#battle-bg-blur {
  position:            fixed;
  inset:               0;
  z-index: var(--z-below);
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  opacity:             0;
  filter:              blur(8px) brightness(0.35) saturate(1.1);
  transform:           scale(1.08);
  transition:          opacity 0.8s ease, background-image 0.8s ease;
  pointer-events:      none;
}

/* Theme colour tint -- overlays bg-base at 55% so the blur picks up
   the zone palette rather than showing raw image colours.
   Uses a separate element so filter doesn't affect the tint itself. */
#battle-bg-blur::after {
  content:    '';
  position:   fixed;
  inset:      0;
  background: var(--bg-base);
  opacity:    0.35;
  pointer-events: none;
}

#battle-bg-blur.active {
  opacity: 1;
}

/* -- SCREEN SYSTEM ---------------------------------------- */
.screen        { display: none;  }
.screen.active { display: flex;  }

/* -- LOADING SCREEN --------------------------------------- */
#screen-loading {
  height:         100%;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-4);
  background:      transparent;
}

.loading-title {
  font-family:    var(--font-display);
  font-size:      var(--text-2xl);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.06em;
  color:          var(--text-primary);
}

.loading-sub {
  font-size:  var(--text-base);
  color:      var(--text-secondary);
  font-style: italic;
}

.spinner {
  width:            28px;
  height:           28px;
  border:           3px solid var(--border);
  border-top-color: var(--accent);
  border-radius:    var(--radius-full);
  animation:        spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* -- AUTH SCREEN ------------------------------------------ */
#screen-auth {
  height:         100%;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-6) var(--space-5);
  background:      transparent;
}

/* -- GAME SCREEN ------------------------------------------ */
/* Transparent -- body texture shows through all gaps between panels */
#screen-game {
  height:         100%;
  flex-direction: column;
  width:          100%;
  max-width:      var(--content-max);
  margin:         0 auto;
  position:       relative;
  background:     transparent;
  text-shadow:    0 1px 3px rgba(0,0,0,0.7);
}

/* -- TOP BAR ---------------------------------------------- */
#topbar {
  background:      var(--bg-header);
  border-bottom:   1.5px solid var(--border);
  padding:         0 var(--space-4);
  height:          var(--topbar-h);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-shrink:     0;
  position:        relative;
  z-index:         var(--z-sticky);
}

.game-title {
  font-family:    var(--font-display);
  font-size:      var(--text-md);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.04em;
  color:          var(--text-primary);
}

.topbar-right {
  display:     flex;
  align-items: center;
  gap:         var(--space-3);
}

.stage-info {
  font-size:  var(--text-sm);
  color:      var(--text-secondary);
  font-style: italic;
}

/* -- BATTLE SCROLL ---------------------------------------- */
/* Transparent so texture shows between panels */
#battle-scroll {
  flex:                    1;
  overflow-y:              auto;
  display:                 flex;
  flex-direction:          column;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior:     contain;
  background:              transparent;
  position:                relative;
}

/* -- BOTTOM NAV ------------------------------------------- */
#bottomnav {
  background:        var(--bg-header);
  border-top:        1.5px solid var(--border);
  min-height:        var(--bottombar-h);
  /* Safe area grows the nav rather than compressing content inside it */
  padding-bottom:    env(safe-area-inset-bottom, 0px);
  display:           flex;
  align-items:       center;
  justify-content:   space-around;
  flex-shrink:       0;
  z-index:           var(--z-sticky);
}

.nav-item {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-1);
  color:           var(--text-secondary);
  font-size:       var(--text-xs);
  font-family:     var(--font-display);
  letter-spacing:  0.04em;
  cursor:          pointer;
  padding:         var(--space-2) var(--space-3);
  border-radius:   var(--radius-sm);
  min-width:       44px;
  min-height:      44px;
  justify-content: center;
  transition:      color var(--dur-fast);
  user-select:     none;
}

.nav-item.active { color: var(--accent); }

.nav-icon {
  width:           20px;
  height:          20px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* -- DESKTOP OVERRIDES ------------------------------------ */
/* On desktop the content column is narrower than the viewport.
   The surrounding gutter shows the raw body texture -- no override needed.
   Only add a subtle box shadow to frame the column. */
@media (min-width: 1024px) {
  #screen-game {
    box-shadow: 0 0 0 1.5px var(--border);
    max-width:  860px;
  }

  /* -- Desktop: two-column battle layout (Layout A) ---------
     CSS Grid: left col (enemy + log) | right col (player + actions)
     #battle-scroll becomes a 2-column grid.
     grid-template-areas handles ordering regardless of DOM order. */

  #battle-scroll {
    display:               grid;
    grid-template-columns: 55fr 45fr;
    grid-template-rows:    auto 1fr auto;
    grid-template-areas:
      'enemy  player'
      'log    player'
      'log    actions';
    overflow:              hidden;
    flex:                  1;
    min-height:            0;
  }

  #battle-backdrop,
  #battle-backdrop-wide {
    display: none;
  }

  #enemy-section {
    grid-area:    enemy;
    border-right: 1.5px solid var(--border);
    border-bottom: 1.5px solid var(--border);
    width:        auto;
    flex-shrink:  unset;
  }

  #log-section {
    grid-area:   log;
    border-right: 1.5px solid var(--border);
    width:        auto;
    min-height:   0;
    overflow-y:   auto;
    flex:         unset;
    height:       auto;
  }

  #player-section {
    grid-area:   player;
    border-bottom: 1.5px solid var(--border);
    overflow-y:  auto;
    width:        auto;
    flex-shrink:  unset;
  }

  #actions {
    grid-area:   actions;
    border-top:  1.5px solid var(--border);
    width:        auto;
    flex-shrink:  unset;
  }

  /* Taller enemy portrait on desktop */
  #enemy-section .portrait {
    width:  var(--portrait-size);
    height: calc(var(--portrait-size) * 1.4);
  }

  /* Co-op on desktop: partner HUD stacked below player in right col */
  #screen-game.coop-active #coop-partner-hud {
    border-top: 1.5px solid var(--border);
    margin-top: 0;
    padding:    var(--space-3) var(--space-4);
  }

  #screen-game.coop-active .coop-partner-portrait {
    width:  64px;
    height: 64px;
  }

  #screen-game.coop-active #player-section {
    flex-direction: column;
  }

  #screen-game.coop-active #player-section > .combatant-row {
    border-right: none;
    padding:      var(--space-3) var(--space-4);
  }

  #screen-game.coop-active #coop-timer-row {
    padding:    var(--space-2) var(--space-4);
    border-top: 1px solid var(--border);
  }
}

/* -- HUB SCREEN ------------------------------------------- */
#screen-hub {
  height:         100%;
  flex-direction: column;
  width:          100%;
  max-width:      var(--content-max);
  margin:         0 auto;
  position:       relative;
  background:     transparent;
}

#hub-topbar {
  background:      var(--bg-header);
  border-bottom:   1.5px solid var(--border);
  padding:         0 var(--space-4);
  height:          var(--topbar-h);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-shrink:     0;
  position:        relative;
  z-index:         var(--z-sticky);
}

.hub-topbar-actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}

.hub-topbar-btn {
  background:    transparent;
  border:        none;
  color:         var(--text-secondary);
  cursor:        pointer;
  padding:       var(--space-1);
  display:       flex;
  align-items:   center;
  border-radius: var(--radius-sm);
  transition:    color var(--dur-fast);
}

.hub-topbar-btn:active { color: var(--text-primary); }

#hub-scroll {
  flex:            1;
  overflow-y:      auto;
  display:         flex;
  flex-direction:  column;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background:      transparent;
  /* Clear topbar + action bar (44px) + bottomnav */
  padding-bottom:  calc(var(--bottombar-h) + 56px + env(safe-area-inset-bottom, 0px));
}

/* Hero panel -- rebuilt as rich class-coloured card */
#hub-hero-panel {
  position:        relative;
  display:         flex;
  align-items:     stretch;
  gap:             0;
  overflow:        hidden;
  background:      var(--bg-panel);
  border-bottom:   1px solid var(--border);
  min-height:      160px;
}

/* Class-colour tint overlay */
.hub-hero-tint {
  position: absolute;
  inset:    0;
  pointer-events: none;
  z-index: var(--z-base);
}

/* Large faded class icon watermark */
.hub-hero-watermark {
  position:   absolute;
  right:      -8px;
  top:        50%;
  transform:  translateY(-50%);
  width:      160px;
  height:     160px;
  opacity:    0.06;
  pointer-events: none;
  z-index: var(--z-base);
  filter:     blur(1px);
}

/* Portrait column */
#hub-hero-portrait-wrap,
.hub-hero-portrait-wrap {
  position:     relative;
  width:         96px;
  flex-shrink:   0;
  overflow:      hidden;
  z-index: var(--z-local-1);
}

#hub-hero-portrait-wrap img,
.hub-hero-portrait-wrap img {
  width:         100%;
  height:        100%;
  object-fit:    cover;
  object-position: top center;
  display:       block;
}

/* Glow element behind portrait border */
.hub-hero-portrait-glow {
  position:      absolute;
  inset:         0;
  pointer-events: none;
  border-radius: 0;
}

/* Info column */
#hub-hero-info,
.hub-hero-info {
  flex:            1;
  min-width:       0;
  padding:         var(--space-4) var(--space-4) var(--space-3);
  display:         flex;
  flex-direction:  column;
  gap:             var(--space-2);
  position:        relative;
  z-index: var(--z-local-1);
}

#hub-hero-name,
.hub-hero-name {
  font-family:    var(--font-display);
  font-size:      var(--text-xl, 20px);
  font-weight:    var(--weight-bold);
  color:          var(--text-primary);
  line-height:    1.1;
  letter-spacing: 0.02em;
}

.hub-hero-title {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top:     -4px;
  font-weight:    var(--weight-bold);
  opacity:        0.9;
}

/* Class + subclass badges */
.hub-hero-badges {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-1);
}

.hub-hero-badge {
  font-family:    var(--font-display);
  font-size:      10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border:         1px solid currentColor;
  border-radius:  var(--radius-full);
  padding:        2px 8px;
  font-weight:    var(--weight-bold);
  line-height:    1.6;
}

.hub-hero-badge--none {
  border-color: var(--border);
  color:        var(--text-secondary);
}

.hub-hero-badge--sub {
  border-color: var(--border);
  color:        var(--text-secondary);
  font-weight:  normal;
}

/* Stat pills row */
.hub-hero-pills {
  display: flex;
  gap:     var(--space-2);
  flex-wrap: wrap;
}

.hub-hero-pill {
  display:       flex;
  flex-direction: column;
  align-items:   center;
  background:    var(--bg-inset);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       3px 10px;
  min-width:     44px;
}

.hub-hero-pill-label {
  font-family:    var(--font-display);
  font-size:      8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--text-secondary);
  line-height:    1.2;
}

.hub-hero-pill-val {
  font-family:  var(--font-display);
  font-size:    var(--text-base);
  font-weight:  var(--weight-bold);
  color:        var(--text-primary);
  line-height:  1.2;
}

.hub-hero-pill-cap {
  font-size:   var(--text-xs);
  color:       var(--text-secondary);
  font-weight: normal;
}

/* XP bar */
.hub-hero-xpbar-wrap {
  display:         flex;
  flex-direction:  column;
  gap:             3px;
  margin-top:      auto;
}

.hub-hero-xpbar-track {
  height:          4px;
  border-radius:   var(--radius-full);
  background:      var(--bg-inset);
  overflow:        hidden;
  border:          1px solid var(--border);
}

.hub-hero-xpbar-fill {
  height:          100%;
  border-radius:   var(--radius-full);
  transition:      width 0.4s ease;
}

.hub-hero-xplabel {
  font-size:  9px;
  color:      var(--text-secondary);
  text-align: right;
  letter-spacing: 0.05em;
}

/* Legacy element IDs -- hide if still in DOM (safety) */
#hub-hero-meta,
#hub-hero-stats { display: none; }

/* Hub content -- new player intro or trainer grid */
#hub-content {
  flex:    1;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap:     var(--space-4);
}

/* New player intro lore box */
.hub-intro-panel {
  background:    var(--bg-panel);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       var(--space-5) var(--space-4);
}

.hub-intro-lore {
  font-size:     var(--text-sm);
  color:         var(--text-secondary);
  line-height:   1.7;
  font-style:    italic;
  text-align:    center;
}

/* Hub locations row -- tavern and future locations */
.hub-locations-row {
  display:  flex;
  gap:      var(--space-3);
  flex-wrap: wrap;
}

.hub-location-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-1);
  cursor:         pointer;
  -webkit-tap-highlight-color: transparent;
}

.hub-location-portrait {
  position:      relative;
  width:         80px;
  height:        80px;
  border-radius: var(--radius-md);
  overflow:      hidden;
  border:        2px solid var(--border);
  background:    var(--bg-inset);
  transition:    border-color var(--dur-fast);
}

.hub-location-card:active .hub-location-portrait {
  border-color: var(--accent);
}

.hub-location-portrait img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  display:         block;
  filter:          brightness(0.75) saturate(0.9);
}

/* Online count badge */
.hub-location-badge {
  position:      absolute;
  top:           4px;
  right:         4px;
  min-width:     18px;
  height:        18px;
  border-radius: var(--radius-full);
  background:    #666;
  color:         var(--bg-base);
  font-family:   var(--font-display);
  font-size:     9px;
  font-weight:   var(--weight-bold);
  display:       flex;
  align-items:   center;
  justify-content: center;
  padding:       0 4px;
  letter-spacing: 0;
  line-height:   1;
}

.hub-location-name {
  font-family:   var(--font-display);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-bold);
  color:         var(--text-primary);
  text-align:    center;
}

.hub-location-sub {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
  text-align: center;
  margin-top: -2px;
}

/* Trainers section */
.hub-section-label {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-secondary);
  margin-bottom:  var(--space-2);
}

.hub-trainer-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-3);
}

.hub-trainer-card {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-1);
  cursor:          pointer;
  -webkit-tap-highlight-color: transparent;
}

.hub-trainer-portrait {
  width:           56px;
  height:          56px;
  border-radius:   var(--radius-md);
  overflow:        hidden;
  border:          2px solid var(--border);
  background:      var(--bg-inset);
  transition:      border-color var(--dur-fast);
}

.hub-trainer-card:active .hub-trainer-portrait {
  border-color: var(--accent);
}

.hub-trainer-portrait img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.hub-trainer-name {
  font-size:   var(--text-xs);
  color:       var(--text-secondary);
  text-align:  center;
  line-height: 1.2;
  max-width:   64px;
  overflow:    hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-empty-trainers {
  font-size:  var(--text-sm);
  color:      var(--text-secondary);
  font-style: italic;
  text-align: center;
  padding:    var(--space-4) 0;
}

/* CTA bar -- Enter the Column */
/* -- HUB BACKGROUND ---------------------------------------- */
/* Atmospheric column-in-a-cloudless-sky backdrop.
   Uses hub.webp when available; falls back to CSS gradient. */

#screen-hub::before {
  content:    '';
  position:   fixed;
  inset:      0;
  background-image:    url('assets/story/hub/hub.webp');
  background-size:     cover;
  background-position: center bottom;
  background-repeat:   no-repeat;
  opacity:    0.18;
  pointer-events: none;
  z-index:    var(--z-below);
}

/* Fallback atmospheric gradient when hub.webp not present */
#screen-hub::after {
  content:    '';
  position:   fixed;
  inset:      0;
  background: radial-gradient(ellipse 60% 80% at 50% 100%, var(--accent) 0%, transparent 70%);
  opacity:    0.06;
  pointer-events: none;
  z-index:    var(--z-below);
}

/* -- HUB ACTION BAR ---------------------------------------- */
/* Fixed bar above bottomnav -- Continue + Floor Select */

#hub-action-bar {
  position:        fixed;
  bottom:          calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px));
  left:            50%;
  transform:       translateX(-50%);
  width:           100%;
  max-width:       var(--content-max);
  display:         flex;
  gap:             var(--space-2);
  padding:         var(--space-2) var(--space-4);
  background:      var(--bg-header);
  border-top:      1px solid var(--border);
  z-index:         var(--z-sticky);
}

.hub-action-btn {
  display:        flex;
  align-items:    center;
  justify-content: center;
  gap:            var(--space-2);
  border-radius:  var(--radius-full);
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.05em;
  cursor:         pointer;
  border:         1.5px solid var(--border);
  padding:        var(--space-2) var(--space-4);
  min-height:     40px;
  transition:     opacity 0.2s;
}

.hub-action-btn--primary {
  flex:         2;
  background:   var(--accent);
  border-color: var(--accent);
  color:        var(--bg-base);
}

.hub-action-btn--ghost {
  flex:         1;
  background:   transparent;
  color:        var(--text-secondary);
}

.hub-action-btn--ghost:active {
  background: var(--bg-inset);
}

/* Hub scroll needs extra padding for topbar + action bar + bottomnav */
#hub-bottomnav {
  position:        fixed;
  bottom:          0;
  left:            50%;
  transform:       translateX(-50%);
  width:           100%;
  max-width:       var(--content-max);
  background:      var(--bg-header);
  border-top:      1.5px solid var(--border);
  min-height:      var(--bottombar-h);
  padding-bottom:  env(safe-area-inset-bottom, 0px);
  display:         flex;
  align-items:     center;
  justify-content: space-around;
  z-index:         var(--z-sticky);
}

/* -- TAVERN SCREEN ----------------------------------------- */

#screen-tavern {
  flex-direction: column;
  height:         100%;
  overflow:       hidden;
  max-width:      var(--content-max);
  margin:         0 auto;
  /* Push content above fixed bottomnav */
  padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px));
  box-sizing:     border-box;
}

/* Topbar */
#tavern-topbar {
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
  padding:         0 var(--space-4);
  height:          var(--topbar-h);
  background:      var(--bg-header);
  border-bottom:   1.5px solid var(--border);
  flex-shrink:     0;
  position:        relative;
  z-index:         var(--z-sticky);
}

.tavern-back-btn {
  background:    transparent;
  border:        none;
  color:         var(--text-primary);
  cursor:        pointer;
  padding:       var(--space-1);
  display:       flex;
  align-items:   center;
  border-radius: var(--radius-sm);
  flex-shrink:   0;
}

.tavern-title {
  font-family:    var(--font-display);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-bold);
  color:          var(--text-primary);
  letter-spacing: 0.04em;
  flex:           1;
}

.tavern-online-count {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  color:          var(--text-secondary);
  letter-spacing: 0.06em;
  flex-shrink:    0;
}

.tavern-online-count span {
  color:       var(--accent);
  font-weight: var(--weight-bold);
}

/* Scene -- backdrop + avatar layer */
#tavern-scene {
  position:   relative;
  flex:       1;
  min-height: 0;
  overflow:   hidden;
}

#tavern-backdrop {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center bottom;
  background-repeat:   no-repeat;
  filter:              brightness(0.55) saturate(0.8);
}

/* Dark gradient at bottom so avatars read over backdrop */
#tavern-scene::after {
  content:    '';
  position:   absolute;
  left:       0; right: 0; bottom: 0;
  height:     45%;
  background: linear-gradient(to top, var(--bg-base) 0%, transparent 100%);
  pointer-events: none;
  z-index: var(--z-local-1);
}

/* Avatar container -- full scene, avatars positioned inside */
#tavern-avatars {
  position: absolute;
  inset:    0;
  padding:  0 32px 0 32px;
  z-index: var(--z-local-2);
}

.tavern-loading,
.tavern-empty {
  position:   absolute;
  inset:      0;
  display:    flex;
  align-items: center;
  justify-content: center;
  font-size:  var(--text-sm);
  color:      var(--text-secondary);
  font-style: italic;
}

/* Individual avatar card */
.tavern-avatar {
  position:    absolute;
  display:     flex;
  flex-direction: column;
  align-items: center;
  gap:         6px;
  cursor:      pointer;
  transform:   translateX(-50%);
  -webkit-tap-highlight-color: transparent;
  transition:  transform var(--dur-fast);
}

.tavern-avatar:active {
  transform: translateX(-50%) scale(0.95);
}

/* Glow ring behind portrait */
.tavern-avatar-ring {
  position:      absolute;
  top:           -3px;
  width:         58px;
  height:        58px;
  border-radius: var(--radius-full);
  border:        2px solid transparent;
  pointer-events: none;
}

/* Portrait circle */
.tavern-avatar-portrait {
  width:         52px;
  height:        52px;
  border-radius: var(--radius-full);
  overflow:      hidden;
  border:        2px solid var(--border);
  background:    var(--bg-inset);
  flex-shrink:   0;
  position:      relative;
  z-index: var(--z-local-1);
}

.tavern-avatar-portrait img {
  width:         100%;
  height:        100%;
  object-fit:    cover;
  object-position: top center;
  display:       block;
}

/* Slight scale-up for the current user */
.tavern-avatar--me .tavern-avatar-portrait {
  width:   60px;
  height:  60px;
  border-width: 2px;
}
.tavern-avatar--me .tavern-avatar-ring {
  width:  66px;
  height: 66px;
}

/* Name tag below portrait */
.tavern-avatar-tag {
  background:    rgba(0,0,0,0.72);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       3px 8px;
  text-align:    center;
  max-width:     90px;
  backdrop-filter: blur(4px);
}

.tavern-avatar-name {
  font-family:   var(--font-display);
  font-size:     10px;
  font-weight:   var(--weight-bold);
  letter-spacing: 0.04em;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
  max-width:     80px;
}

.tavern-avatar-class {
  font-size:  8px;
  color:      var(--text-secondary);
  white-space: nowrap;
  overflow:   hidden;
  text-overflow: ellipsis;
  max-width:  80px;
}

.tavern-avatar-title {
  font-size:      8px;
  color:          var(--text-secondary);
  font-style:     italic;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  max-width:      80px;
}

.tavern-avatar-level {
  font-family:  var(--font-display);
  font-size:    8px;
  color:        var(--text-secondary);
  letter-spacing: 0.05em;
}

/* -- Tavern chat ------------------------------------------- */

#tavern-chat {
  flex-shrink:    0;
  height:         180px;
  display:        flex;
  flex-direction: column;
  background:     var(--bg-header);
  border-top:     1.5px solid var(--border);
  position:       relative;
  z-index:        var(--z-sticky);
}

#tavern-messages {
  flex:        1;
  overflow-y:  auto;
  padding:     var(--space-2) var(--space-3);
  display:     flex;
  flex-direction: column;
  gap:         2px;
  -webkit-overflow-scrolling: touch;
}

.tavern-msg {
  font-size:   var(--text-xs);
  line-height: 1.5;
  color:       var(--text-primary);
}

.tavern-msg--own {
  opacity: 0.9;
}

.tavern-msg--system {
  color:      var(--text-secondary);
  font-style: italic;
  font-size:  10px;
}

.tavern-msg-name {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size:   10px;
  letter-spacing: 0.04em;
}

.tavern-msg-text {
  color: var(--text-primary);
}

#tavern-input-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  padding:     var(--space-2) var(--space-3);
  border-top:  1px solid var(--border);
  flex-shrink: 0;
}

#tavern-input {
  flex:          1;
  background:    var(--bg-inset);
  border:        1px solid var(--border);
  border-radius: var(--radius-full);
  padding:       var(--space-2) var(--space-3);
  font-size:     var(--text-sm);
  color:         var(--text-primary);
  outline:       none;
  min-width:     0;
}

#tavern-input:focus {
  border-color: var(--accent);
}

#tavern-send-btn {
  width:         36px;
  height:        36px;
  border-radius: var(--radius-full);
  background:    var(--accent);
  border:        none;
  color:         var(--bg-base);
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
}

#tavern-send-btn:active {
  opacity: 0.8;
}

/* -- Tavern player inspect card (modal) -------------------- */

.tavern-player-card {
  display:    flex;
  gap:        var(--space-4);
  align-items: flex-start;
}

.tavern-player-card-portrait {
  width:         96px;
  height:        96px;
  border-radius: var(--radius-md);
  overflow:      hidden;
  border:        2px solid var(--border);
  flex-shrink:   0;
}

.tavern-player-card-portrait img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: top center;
}

.tavern-player-card-info {
  flex:    1;
  display: flex;
  flex-direction: column;
  gap:     var(--space-1);
}

.tavern-player-card-title {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight:    var(--weight-bold);
}

.tavern-player-card-class {
  font-family:  var(--font-display);
  font-size:    var(--text-sm);
  font-weight:  var(--weight-bold);
}

.tavern-player-card-stat {
  font-size: var(--text-sm);
  color:     var(--text-secondary);
}

/* -- FRIENDS SCREEN ---------------------------------------- */

#screen-friends {
  flex-direction: column;
  height:         100%;
  overflow:       hidden;
  max-width:      var(--content-max);
  margin:         0 auto;
}

#friends-topbar {
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
  padding:         0 var(--space-4);
  height:          var(--topbar-h);
  background:      var(--bg-header);
  border-bottom:   1.5px solid var(--border);
  flex-shrink:     0;
  z-index:         var(--z-sticky);
}

.friends-back-btn {
  background:    transparent;
  border:        none;
  color:         var(--text-primary);
  cursor:        pointer;
  padding:       var(--space-1);
  display:       flex;
  align-items:   center;
  border-radius: var(--radius-sm);
  flex-shrink:   0;
}

.friends-title {
  font-family:    var(--font-display);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-bold);
  color:          var(--text-primary);
  letter-spacing: 0.04em;
  flex:           1;
}

/* Search bar */
#friends-search-bar {
  padding:      var(--space-3) var(--space-4);
  background:   var(--bg-header);
  border-bottom: 1px solid var(--border);
  flex-shrink:  0;
}

#friends-search-wrap {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  background:    var(--bg-inset);
  border:        1px solid var(--border);
  border-radius: var(--radius-full);
  padding:       var(--space-2) var(--space-3);
}

#friends-search-wrap svg {
  color:      var(--text-secondary);
  flex-shrink: 0;
}

#friends-search-input {
  flex:       1;
  background: transparent;
  border:     none;
  outline:    none;
  font-size:  var(--text-sm);
  color:      var(--text-primary);
  min-width:  0;
}

#friends-search-input::placeholder {
  color: var(--text-secondary);
}

#friends-search-clear {
  background:    transparent;
  border:        none;
  color:         var(--text-secondary);
  cursor:        pointer;
  display:       flex;
  align-items:   center;
  padding:       0;
  flex-shrink:   0;
}

/* Scroll area */
#friends-scroll {
  flex:           1;
  overflow-y:     auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px));
}

#friends-content {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap:     var(--space-2);
}

/* Section label */
.friends-section-label {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-secondary);
  margin-top:     var(--space-2);
  margin-bottom:  var(--space-1);
}

.friends-section-label:first-child {
  margin-top: 0;
}

/* Friend / search card */
.friends-card {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-3);
  background:    var(--bg-panel);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
}

.friends-card--request {
  border-color: var(--accent);
  border-style: dashed;
}

.friends-card-portrait {
  width:         48px;
  height:        48px;
  border-radius: var(--radius-md);
  overflow:      hidden;
  flex-shrink:   0;
  position:      relative;
  background:    var(--bg-inset);
}

.friends-card-portrait img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: top center;
  display:         block;
}

/* Green dot for online friends */
.friends-online-dot {
  position:      absolute;
  bottom:        2px;
  right:         2px;
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    #44cc44;
  border:        2px solid var(--bg-panel);
}

.friends-card-info {
  flex:      1;
  min-width: 0;
  display:   flex;
  flex-direction: column;
  gap:       2px;
}

.friends-card-name {
  font-family:  var(--font-display);
  font-size:    var(--text-sm);
  font-weight:  var(--weight-bold);
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
}

.friends-card-title {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
  font-style: italic;
}

.friends-card-class {
  font-size: var(--text-xs);
  color:     var(--text-secondary);
}

.friends-card-stats {
  font-family:    var(--font-display);
  font-size:      9px;
  letter-spacing: 0.05em;
  color:          var(--text-secondary);
}

/* Action buttons */
.friends-add-btn {
  background:    var(--accent);
  border:        none;
  color:         var(--bg-base);
  font-family:   var(--font-display);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-bold);
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
  padding:       var(--space-1) var(--space-3);
  cursor:        pointer;
  flex-shrink:   0;
  white-space:   nowrap;
}

.friends-add-btn:disabled {
  opacity: 0.6;
  cursor:  not-allowed;
}

.friends-pending-label {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  color:          var(--text-secondary);
  flex-shrink:    0;
  white-space:    nowrap;
  letter-spacing: 0.05em;
}

.friends-request-btns {
  display:    flex;
  gap:        var(--space-2);
  flex-shrink: 0;
}

.friends-accept-btn {
  background:    var(--accent);
  border:        none;
  color:         var(--bg-base);
  font-family:   var(--font-display);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-bold);
  border-radius: var(--radius-full);
  padding:       var(--space-1) var(--space-3);
  cursor:        pointer;
}

.friends-decline-btn {
  background:    transparent;
  border:        1px solid var(--border);
  color:         var(--text-secondary);
  font-family:   var(--font-display);
  font-size:     var(--text-xs);
  border-radius: var(--radius-full);
  padding:       var(--space-1) var(--space-3);
  cursor:        pointer;
}

.friends-remove-btn {
  background:    transparent;
  border:        none;
  color:         var(--text-secondary);
  cursor:        pointer;
  padding:       var(--space-1);
  display:       flex;
  align-items:   center;
  border-radius: var(--radius-sm);
  flex-shrink:   0;
  opacity:       0.5;
}

.friends-remove-btn:active { opacity: 1; }

.friends-empty {
  text-align:  center;
  color:       var(--text-secondary);
  font-size:   var(--text-sm);
  font-style:  italic;
  padding:     var(--space-8) var(--space-4);
  line-height: 1.6;
}

/* Nav badge */
.friends-nav-badge {
  position:        absolute;
  top:             -4px;
  right:           -6px;
  min-width:       16px;
  height:          16px;
  border-radius:   var(--radius-full);
  background:      var(--color-danger, #cc3344);
  color:           #fff;
  font-family:     var(--font-display);
  font-size:       9px;
  font-weight:     var(--weight-bold);
  align-items:     center;
  justify-content: center;
  padding:         0 4px;
  line-height:     1;
  border:          1.5px solid var(--bg-base);
}

/* -- CO-OP LOBBY SCREEN ------------------------------------ */

#screen-lobby {
  flex-direction: column;
  height:         100%;
  overflow:       hidden;
  background:     var(--bg-base);
  max-width:      var(--content-max);
  margin:         0 auto;
}

#lobby-topbar {
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
  padding:         0 var(--space-4);
  height:          var(--topbar-h);
  background:      var(--bg-header);
  border-bottom:   1.5px solid var(--border);
  flex-shrink:     0;
  z-index:         var(--z-sticky);
}

.lobby-back-btn {
  background: transparent;
  border:     none;
  color:      var(--text-primary);
  cursor:     pointer;
  padding:    var(--space-1);
  display:    flex;
  align-items: center;
  flex-shrink: 0;
}

.lobby-title {
  font-family:    var(--font-display);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-bold);
  color:          var(--text-primary);
  letter-spacing: 0.04em;
  flex:           1;
}

.lobby-floor-badge {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  color:          var(--accent);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.06em;
  border:         1px solid var(--accent);
  border-radius:  var(--radius-full);
  padding:        2px 10px;
  flex-shrink:    0;
}

/* Player slots */
#lobby-players {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-4);
  padding:         var(--space-6) var(--space-4);
  flex-shrink:     0;
}

.lobby-player-slot {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-2);
  flex:           1;
  max-width:      160px;
}

.lobby-slot-label {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-secondary);
}

.lobby-player-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-3);
  width:          100%;
  background:     var(--bg-panel);
  border:         1px solid var(--border);
  border-radius:  var(--radius-md);
  padding:        var(--space-4);
}

.lobby-portrait-wrap {
  width:         88px;
  height:        88px;
  border-radius: var(--radius-md);
  overflow:      hidden;
  position:      relative;
  background:    var(--bg-inset);
}

.lobby-portrait-wrap img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: top center;
  display:         block;
}

.lobby-empty-slot {
  width:           88px;
  height:          88px;
  border-radius:   var(--radius-md);
  background:      var(--bg-inset);
  border:          2px dashed var(--border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       28px;
  color:           var(--text-secondary);
}

.lobby-player-name {
  font-family:  var(--font-display);
  font-size:    var(--text-sm);
  font-weight:  var(--weight-bold);
  text-align:   center;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
  max-width:    130px;
}

.lobby-player-title {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
  font-style: italic;
  text-align: center;
}

.lobby-player-class {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
  text-align: center;
}

.lobby-player-stats {
  font-family:    var(--font-display);
  font-size:      9px;
  letter-spacing: 0.05em;
  color:          var(--text-secondary);
  text-align:     center;
}

.lobby-waiting {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
  font-style: italic;
  text-align: center;
  padding:    var(--space-2) 0;
}

.lobby-vs {
  font-size:  28px;
  color:      var(--text-secondary);
  flex-shrink: 0;
  margin-top: 24px;
}

/* Status + actions */
#lobby-status {
  text-align: center;
  padding:    0 var(--space-4) var(--space-3);
  flex-shrink: 0;
}

#lobby-status-text {
  font-size:  var(--text-sm);
  color:      var(--text-secondary);
  font-style: italic;
}

#lobby-actions {
  padding:    0 var(--space-4) var(--space-4);
  flex-shrink: 0;
}

.lobby-guest-wait {
  text-align:  center;
  color:       var(--text-secondary);
  font-size:   var(--text-sm);
  font-style:  italic;
  padding:     var(--space-3) 0;
}

/* Disconnect overlay */
#lobby-disconnect-overlay {
  position:        absolute;
  inset:           0;
  background:      rgba(0,0,0,0.75);
  display:         flex;
  align-items:     center;
  justify-content: center;
  z-index:         var(--z-overlay, 50);
  backdrop-filter: blur(4px);
}

#lobby-disconnect-box {
  background:    var(--bg-panel);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       var(--space-6) var(--space-5);
  text-align:    center;
  max-width:     280px;
  width:         calc(100% - var(--space-8));
}

.lobby-disconnect-title {
  font-family:  var(--font-display);
  font-size:    var(--text-lg);
  font-weight:  var(--weight-bold);
  color:        var(--text-primary);
  margin-bottom: var(--space-2);
}

.lobby-disconnect-sub {
  font-size:     var(--text-sm);
  color:         var(--text-secondary);
  margin-bottom: var(--space-4);
}

.lobby-disconnect-timer {
  font-family:   var(--font-display);
  font-size:     48px;
  font-weight:   var(--weight-bold);
  color:         var(--accent);
  line-height:   1;
  margin-bottom: var(--space-4);
}

.lobby-disconnect-btns {
  display:         flex;
  gap:             var(--space-3);
  justify-content: center;
}

/* -- CO-OP INVITE BANNER ----------------------------------- */
/* Fixed banner that slides in from the top when an invite arrives */

.coop-invite-banner {
  position:        fixed;
  top:             calc(var(--topbar-h) + var(--space-2));
  left:            var(--space-3);
  right:           var(--space-3);
  background:      var(--bg-panel);
  border:          1.5px solid var(--accent);
  border-radius:   var(--radius-md);
  padding:         var(--space-3);
  display:         flex;
  align-items:     center;
  gap:             var(--space-3);
  z-index:         var(--z-toast, 60);
  box-shadow:      0 4px 20px rgba(0,0,0,0.5);
  animation:       slide-down 0.25s ease;
}

@keyframes slide-down {
  from { transform: translateY(-20px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

.coop-banner-portrait {
  width:         44px;
  height:        44px;
  border-radius: var(--radius-md);
  overflow:      hidden;
  flex-shrink:   0;
  background:    var(--bg-inset);
}

.coop-banner-portrait img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: top center;
  display:    block;
}

.coop-banner-info {
  flex:      1;
  min-width: 0;
}

.coop-banner-name {
  font-family:  var(--font-display);
  font-size:    var(--text-sm);
  font-weight:  var(--weight-bold);
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
}

.coop-banner-sub {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
}

.coop-banner-btns {
  display:    flex;
  gap:        var(--space-2);
  flex-shrink: 0;
}

.coop-banner-accept {
  background:    var(--accent);
  border:        none;
  color:         var(--bg-base);
  font-family:   var(--font-display);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-bold);
  border-radius: var(--radius-full);
  padding:       var(--space-1) var(--space-3);
  cursor:        pointer;
  white-space:   nowrap;
}

.coop-banner-decline {
  background:    transparent;
  border:        1px solid var(--border);
  color:         var(--text-secondary);
  font-size:     var(--text-sm);
  border-radius: var(--radius-full);
  padding:       var(--space-1) var(--space-2);
  cursor:        pointer;
}

/* Friends screen -- invite button */
.friends-card-actions {
  display:    flex;
  gap:        var(--space-1);
  align-items: center;
  flex-shrink: 0;
}

.friends-invite-btn {
  background:    var(--accent);
  border:        none;
  color:         var(--bg-base);
  cursor:        pointer;
  width:         28px;
  height:        28px;
  border-radius: var(--radius-full);
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
}

.friends-invite-btn:active { opacity: 0.8; }

/* -- TAVERN BOTTOM NAV ------------------------------------- */
/* Shares .nav-item styles with hub-bottomnav */

#tavern-bottomnav {
  position:        fixed;
  bottom:          0;
  left:            50%;
  transform:       translateX(-50%);
  width:           100%;
  max-width:       var(--content-max);
  background:      var(--bg-header);
  border-top:      1.5px solid var(--border);
  min-height:      var(--bottombar-h);
  padding-bottom:  env(safe-area-inset-bottom, 0px);
  display:         flex;
  align-items:     center;
  justify-content: space-around;
  z-index:         var(--z-sticky);
}

/* -- TAVERN PLAYER MODAL ACTIONS --------------------------- */

.tavern-modal-actions {
  display:    flex;
  gap:        var(--space-2);
  margin-top: var(--space-4);
  flex-wrap:  wrap;
}

.tavern-modal-actions .btn {
  flex: 1;
  min-width: 80px;
  font-size: var(--text-xs);
}

/* -- CO-OP FOLLOW BANNER ----------------------------------- */

#coop-follow-banner {
  position:        fixed;
  bottom:          calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px) + var(--space-3));
  left:            var(--space-3);
  right:           var(--space-3);
  max-width:       calc(var(--content-max) - var(--space-6));
  margin:          0 auto;
  background:      var(--bg-panel);
  border:          1.5px solid var(--accent);
  border-radius:   var(--radius-md);
  padding:         var(--space-3);
  display:         none;
  flex-direction:  column;
  gap:             var(--space-3);
  z-index:         var(--z-toast);
  box-shadow:      0 4px 24px rgba(0,0,0,0.6);
  animation:       slide-up-banner 0.25s ease;
}

@keyframes slide-up-banner {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.coop-follow-inner {
  display:    flex;
  flex-direction: column;
  gap:        var(--space-3);
}

.coop-follow-text {
  display: flex;
  flex-direction: column;
  gap:     2px;
}

.coop-follow-title {
  font-family:  var(--font-display);
  font-size:    var(--text-sm);
  font-weight:  var(--weight-bold);
  color:        var(--text-primary);
}

.coop-follow-sub {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
}

.coop-follow-timer-wrap {
  display:         flex;
  justify-content: center;
}

.coop-follow-timer {
  font-family:  var(--font-display);
  font-size:    var(--text-xl);
  font-weight:  var(--weight-bold);
  color:        var(--accent);
  min-width:    2ch;
  text-align:   center;
}

.coop-follow-btns {
  display: flex;
  gap:     var(--space-2);
}

.coop-follow-btn-yes {
  flex:          1;
  background:    var(--accent);
  border:        none;
  color:         var(--bg-base);
  font-family:   var(--font-display);
  font-size:     var(--text-sm);
  font-weight:   var(--weight-bold);
  border-radius: var(--radius-md);
  padding:       var(--space-3);
  cursor:        pointer;
}

.coop-follow-btn-no {
  flex:          1;
  background:    transparent;
  border:        1px solid var(--border);
  color:         var(--text-secondary);
  font-family:   var(--font-display);
  font-size:     var(--text-sm);
  border-radius: var(--radius-md);
  padding:       var(--space-3);
  cursor:        pointer;
}

/* -- FRIENDS TABS ------------------------------------------ */
/* Tab bar shown in the friends screen topbar */

.friends-tabs {
  display:         flex;
  flex:            1;
  gap:             var(--space-2);
  margin-left:     var(--space-2);
}

.friends-tab {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--text-secondary);
  padding:        var(--space-1) var(--space-3);
  border-radius:  var(--radius-full);
  cursor:         pointer;
  border:         1px solid transparent;
}

.friends-tab.active {
  color:        var(--text-primary);
  border-color: var(--border);
  background:   var(--bg-inset);
}

/* -- GUILD SCREEN ------------------------------------------ */

#screen-guild {
  flex-direction: column;
  height:         100%;
  overflow:       hidden;
  max-width:      var(--content-max);
  margin:         0 auto;
}

#guild-topbar {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       0 var(--space-4);
  height:        var(--topbar-h);
  background:    var(--bg-header);
  border-bottom: 1.5px solid var(--border);
  flex-shrink:   0;
  z-index:       var(--z-sticky);
}

.guild-topbar-center {
  flex:        1;
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  min-width:   0;
}

.guild-topbar-name {
  font-family:    var(--font-display);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-bold);
  color:          var(--text-primary);
  letter-spacing: 0.04em;
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
}

.guild-topbar-tag {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  color:          var(--accent);
  font-weight:    var(--weight-bold);
  flex-shrink:    0;
}

.guild-topbar-right {
  flex-shrink: 0;
}

#guild-tabs {
  display:         flex;
  border-bottom:   1px solid var(--border);
  background:      var(--bg-header);
  flex-shrink:     0;
}

.guild-tab {
  flex:            1;
  text-align:      center;
  padding:         var(--space-2) var(--space-1);
  font-family:     var(--font-display);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-bold);
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  color:           var(--text-secondary);
  cursor:          pointer;
  border-bottom:   2px solid transparent;
}

.guild-tab.active {
  color:        var(--text-primary);
  border-color: var(--accent);
}

#guild-backdrop {
  position:            fixed;
  inset:               0;
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;
  opacity:             0.12;
  pointer-events:      none;
  z-index:             var(--z-below);
}

#guild-scroll {
  flex:           1;
  overflow-y:     auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px));
}

#guild-content {
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  gap:     var(--space-2);
}

/* Guild chat panel -- same style as tavern */
#guild-chat-panel {
  display:        flex;
  flex-direction: column;
  flex:           1;
  overflow:       hidden;
  border-top:     1px solid var(--border);
}

#guild-messages {
  flex:        1;
  overflow-y:  auto;
  padding:     var(--space-3) var(--space-4);
  display:     flex;
  flex-direction: column;
  gap:         var(--space-1);
  -webkit-overflow-scrolling: touch;
}

#guild-input-row {
  display:        flex;
  gap:            var(--space-2);
  padding:        var(--space-2) var(--space-3);
  border-top:     1px solid var(--border);
  background:     var(--bg-header);
  flex-shrink:    0;
  padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px));
}

#guild-input {
  flex:       1;
  background: var(--bg-inset);
  border:     1px solid var(--border);
  border-radius: var(--radius-full);
  padding:    var(--space-2) var(--space-3);
  font-size:  var(--text-sm);
  color:      var(--text-primary);
  outline:    none;
}

#guild-send-btn {
  background:    var(--accent);
  border:        none;
  color:         var(--bg-base);
  width:         36px;
  height:        36px;
  border-radius: var(--radius-full);
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  flex-shrink:   0;
}

/* Guild info card */
.guild-info-card {
  background:    var(--bg-panel);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       var(--space-5) var(--space-4);
  text-align:    center;
  margin-bottom: var(--space-3);
}

.guild-info-tag {
  font-family:    var(--font-display);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-bold);
  color:          var(--accent);
  letter-spacing: 0.08em;
  margin-bottom:  var(--space-1);
}

.guild-info-name {
  font-family:  var(--font-display);
  font-size:    var(--text-xl);
  font-weight:  var(--weight-bold);
  color:        var(--text-primary);
  margin-bottom: var(--space-2);
}

.guild-info-desc {
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

.guild-info-stat {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  color:          var(--text-secondary);
  letter-spacing: 0.06em;
}

/* Rank badges */
.guild-rank-badge {
  display:        inline-block;
  font-family:    var(--font-display);
  font-size:      8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight:    var(--weight-bold);
  border-radius:  var(--radius-full);
  padding:        2px 7px;
  margin-top:     2px;
}

.guild-rank-leader  { background: rgba(212,168,50,0.2); color: #d4a832; border: 1px solid #d4a83266; }
.guild-rank-officer { background: rgba(136,200,255,0.15); color: #88c8ff; border: 1px solid #88c8ff44; }
.guild-rank-member  { background: var(--bg-inset); color: var(--text-secondary); border: 1px solid var(--border); }

/* Member action buttons */
.guild-member-actions {
  display:    flex;
  flex-direction: column;
  gap:        var(--space-1);
  flex-shrink: 0;
}

.guild-action-btn {
  background:    transparent;
  border:        1px solid var(--border);
  color:         var(--text-secondary);
  font-family:   var(--font-display);
  font-size:     9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  padding:       3px 10px;
  cursor:        pointer;
  white-space:   nowrap;
}

.guild-action-btn--danger {
  border-color: rgba(204,34,51,0.4);
  color:        #cc2233;
}

/* Guild search card */
.guild-search-card {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-3);
  background:    var(--bg-panel);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
}

.guild-search-tag {
  font-family:    var(--font-display);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-bold);
  color:          var(--accent);
  flex-shrink:    0;
  min-width:      40px;
}

.guild-search-info { flex: 1; min-width: 0; }

.guild-search-name {
  font-family:  var(--font-display);
  font-size:    var(--text-sm);
  font-weight:  var(--weight-bold);
  color:        var(--text-primary);
}

.guild-search-meta {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
  margin-top: 2px;
}

.guild-search-desc {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
  font-style: italic;
  margin-top: 2px;
  white-space: nowrap;
  overflow:   hidden;
  text-overflow: ellipsis;
}

/* Guild create form */
.guild-create-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

/* Guild tag in tavern avatar name */
.tavern-guild-tag {
  font-family:    var(--font-display);
  font-size:      8px;
  letter-spacing: 0.06em;
  color:          var(--accent);
  opacity:        0.8;
  vertical-align: middle;
}

/* Section label (reuse friends pattern) */
.guild-section-label {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-secondary);
  margin-bottom:  var(--space-1);
}

/* -- SHOPKEEPER AVATAR ------------------------------------- */

.tavern-avatar--keeper {
  cursor: pointer;
}

/* -- NPC AVATARS ------------------------------------------- */

.tavern-avatar--npc {
  cursor: pointer;
}

/* Small NPC badge on avatar */
.npc-indicator {
  position:       absolute;
  top:            -5px;
  left:           50%;
  transform:      translateX(-50%);
  background:     var(--bg-inset);
  border:         1px solid var(--border);
  color:          var(--text-secondary);
  font-family:    var(--font-display);
  font-size:      7px;
  letter-spacing: 0.1em;
  border-radius:  var(--radius-full);
  padding:        1px 5px;
  white-space:    nowrap;
}

.tavern-keeper-ring {
  border-width: 3px;
  border-style: solid;
}

/* Pulsing shop icon badge on the keeper avatar */
.keeper-shop-icon {
  position:      absolute;
  top:           -6px;
  right:         -6px;
  background:    #c8a84a;
  color:         #13141a;
  font-size:     11px;
  width:         20px;
  height:        20px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  line-height:   1;
  animation:     keeper-pulse 2.5s ease-in-out infinite;
}

@keyframes keeper-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.15); }
}

/* -- SHOP MODAL -------------------------------------------- */

.shop-modal {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.shop-tabs {
  display:     flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-2);
}

.shop-tab {
  flex:           1;
  text-align:     center;
  padding:        var(--space-2);
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-secondary);
  cursor:         pointer;
  border-bottom:  2px solid transparent;
}

.shop-tab.active {
  color:        var(--accent);
  border-color: var(--accent);
}

.shop-gold-bar {
  display:         flex;
  align-items:     center;
  gap:             var(--space-1);
  justify-content: flex-end;
  padding:         var(--space-1) 0 var(--space-2);
  border-bottom:   1px solid var(--border);
  margin-bottom:   var(--space-2);
}

.shop-gold-icon {
  color:     var(--accent);
  font-size: var(--text-sm);
}

.shop-gold-val {
  font-family:    var(--font-display);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-bold);
  color:          var(--accent);
  letter-spacing: 0.04em;
}

.shop-content {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  max-height:     55vh;
  overflow-y:     auto;
  -webkit-overflow-scrolling: touch;
}

.shop-category-label {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--text-secondary);
  margin-top:     var(--space-1);
}

.shop-item-row {
  display:       flex;
  align-items:   center;
  gap:           var(--space-3);
  padding:       var(--space-2) var(--space-3);
  background:    var(--bg-panel);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
}

.shop-item-icon {
  font-size:   20px;
  flex-shrink: 0;
  width:       24px;
  text-align:  center;
  line-height: 1;
}

.shop-item-info {
  flex:      1;
  min-width: 0;
}

.shop-item-name {
  font-family:  var(--font-display);
  font-size:    var(--text-sm);
  font-weight:  var(--weight-bold);
  color:        var(--text-primary);
}

.shop-item-desc {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}

.shop-item-controls {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            var(--space-1);
  flex-shrink:    0;
}

.shop-qty-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
}

.shop-qty-btn {
  background:    var(--bg-inset);
  border:        1px solid var(--border);
  color:         var(--text-primary);
  width:         22px;
  height:        22px;
  border-radius: var(--radius-sm);
  display:       flex;
  align-items:   center;
  justify-content: center;
  cursor:        pointer;
  font-size:     14px;
  line-height:   1;
  flex-shrink:   0;
}

.shop-qty-val {
  font-family:    var(--font-display);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-bold);
  color:          var(--text-primary);
  min-width:      22px;
  text-align:     center;
}

.shop-buy-btn {
  background:    var(--accent);
  border:        none;
  color:         var(--bg-base);
  font-family:   var(--font-display);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-bold);
  border-radius: var(--radius-full);
  padding:       3px 10px;
  cursor:        pointer;
  white-space:   nowrap;
  letter-spacing: 0.04em;
}

.shop-btn-disabled {
  opacity: 0.4;
  cursor:  not-allowed;
}

.shop-sell-btn {
  background:    transparent;
  border:        1px solid #44cc88;
  color:         #44cc88;
  font-family:   var(--font-display);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-bold);
  border-radius: var(--radius-full);
  padding:       3px 10px;
  cursor:        pointer;
  white-space:   nowrap;
  letter-spacing: 0.04em;
}

.shop-empty {
  text-align:  center;
  color:       var(--text-secondary);
  font-size:   var(--text-sm);
  font-style:  italic;
  padding:     var(--space-6) 0;
}

/* -- AD OVERLAY -------------------------------------------- */
/* Full-screen interstitial ad shown after every 5th victory.
   Designed to look exactly like a real ad. That is the joke. */

#ad-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0,0,0,0.88);
  z-index:         var(--z-modal);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-4);
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.25s ease;
}

#ad-overlay.open {
  opacity:        1;
  pointer-events: all;
}

.ad-modal {
  background:    var(--bg-panel);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       var(--space-6) var(--space-5);
  max-width:     360px;
  width:         100%;
  display:       flex;
  flex-direction: column;
  gap:           var(--space-3);
}

.ad-modal--stark {
  background:    var(--bg-base);
  border-color:  var(--accent);
  text-align:    center;
}

.ad-sponsored {
  font-family:    var(--font-display);
  font-size:      9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--text-secondary);
  opacity:        0.6;
}

.ad-logo {
  font-size:   28px;
  line-height: 1;
}

.ad-company {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ad-headline {
  font-family:  var(--font-display);
  font-size:    var(--text-md);
  font-weight:  var(--weight-bold);
  color:        var(--text-primary);
  line-height:  1.35;
}

.ad-modal--stark .ad-headline {
  font-size: var(--text-xl);
  color:     var(--accent);
}

.ad-body {
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
  line-height: 1.6;
}

.ad-fine {
  font-size:   10px;
  color:       var(--text-secondary);
  opacity:     0.5;
  line-height: 1.5;
  font-style:  italic;
}

.ad-actions {
  display:    flex;
  justify-content: flex-end;
  margin-top: var(--space-1);
}

.ad-cta-btn {
  background:    var(--accent);
  border:        none;
  color:         var(--bg-base);
  font-family:   var(--font-display);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-bold);
  letter-spacing: 0.06em;
  border-radius: var(--radius-full);
  padding:       var(--space-2) var(--space-4);
  cursor:        pointer;
  opacity:       1;
  transition:    opacity 0.2s;
}

.ad-cta-btn:disabled {
  opacity: 0.45;
  cursor:  not-allowed;
}

.ad-modal--stark .ad-cta-btn {
  width:      100%;
  padding:    var(--space-3);
  font-size:  var(--text-sm);
  margin-top: var(--space-2);
}

/* -- GLITCH STORY ADS -------------------------------------- */

.ad-modal--glitch {
  position:   relative;
  overflow:   hidden;
}

/* Scanline -- a dark band that sweeps down the modal */
.ad-scanline {
  position:        absolute;
  left:            0;
  right:           0;
  height:          18%;
  background:      rgba(0,0,0,0.45);
  pointer-events:  none;
  z-index:         var(--z-local-2);
  top:             -20%;
  opacity:         0;
}

.ad-modal--glitching .ad-scanline {
  opacity:   1;
  animation: ad-scanline-move 1.8s linear infinite;
}

@keyframes ad-scanline-move {
  0%   { top: -20%; }
  100% { top: 110%; }
}

/* RGB channel shift on the whole modal when glitching */
.ad-modal--glitching {
  animation: ad-rgb-shift 0.15s steps(1) infinite;
}

@keyframes ad-rgb-shift {
  0%  { text-shadow: -2px 0 #ff003366, 2px 0 #0033ff44; }
  33% { text-shadow:  2px 0 #ff003344, -1px 0 #00ff6644; }
  66% { text-shadow:  0px 1px #ff003322, 0 -1px #0033ff33; }
  100%{ text-shadow: -1px 0 #ff003366, 1px 0 #0033ff44; }
}

/* Elements that flicker erratically */
.ad-glitch-flicker {
  animation: ad-flicker 3s steps(1) infinite;
}

@keyframes ad-flicker {
  0%,  8%,  12%, 20%, 22%, 60%, 100% { opacity: 1; }
  9%,  11%                            { opacity: 0.15; }
  13%, 19%                            { opacity: 0.6; }
  21%                                 { opacity: 0; }
}

/* Body text gets a subtle horizontal shift when glitching */
.ad-modal--glitching .ad-glitch-body {
  animation: ad-body-shift 0.4s steps(2) infinite;
}

@keyframes ad-body-shift {
  0%  { transform: translateX(0); }
  50% { transform: translateX(-1px); }
  100%{ transform: translateX(1px); }
}

/* The hidden message that types itself in */
.ad-glitch-reveal {
  display:      none;
  font-family:  var(--font-mono, monospace);
  font-size:    var(--text-xs);
  color:        #44cc88;
  line-height:  1.6;
  border-left:  2px solid #44cc88;
  padding-left: var(--space-2);
  margin-top:   var(--space-2);
  opacity:      0.9;
  animation:    ad-reveal-glow 2s ease-in-out infinite alternate;
}

@keyframes ad-reveal-glow {
  from { color: #44cc88; border-color: #44cc88; }
  to   { color: #88ffbb; border-color: #88ffbb; }
}

/* -- GM MENU ----------------------------------------------- */

#gm-fab {
  position:        fixed;
  bottom:          calc(var(--bottombar-h) + 60px + env(safe-area-inset-bottom, 0px));
  right:           var(--space-3);
  width:           38px;
  height:          38px;
  border-radius:   var(--radius-full);
  background:      #cc3344;
  border:          none;
  color:           #fff;
  font-family:     var(--font-display);
  font-size:       10px;
  font-weight:     var(--weight-bold);
  letter-spacing:  0.08em;
  cursor:          pointer;
  z-index:         var(--z-modal);
  opacity:         0.55;
  transition:      opacity 0.2s, transform 0.2s;
  box-shadow:      0 2px 8px rgba(0,0,0,0.5);
}

#gm-fab:hover   { opacity: 1; }
#gm-fab--open   { opacity: 1; transform: rotate(45deg); }

#gm-drawer {
  position:        fixed;
  top:             0;
  right:           -320px;
  width:           300px;
  height:          100dvh;
  background:      var(--bg-panel);
  border-left:     1.5px solid #cc3344;
  z-index:         var(--z-modal);
  display:         flex;
  flex-direction:  column;
  overflow:        hidden;
  transition:      right 0.25s ease;
}

#gm-drawer.gm-drawer--open {
  right: 0;
}

.gm-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-3) var(--space-4);
  background:      #cc3344;
  flex-shrink:     0;
}

.gm-title {
  font-family:    var(--font-display);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-bold);
  color:          #fff;
  letter-spacing: 0.08em;
}

.gm-close-btn {
  background: transparent;
  border:     none;
  color:      #fff;
  font-size:  16px;
  cursor:     pointer;
  padding:    2px 6px;
  opacity:    0.8;
}

.gm-body {
  flex:       1;
  overflow-y: auto;
  padding:    var(--space-3) var(--space-3);
  display:    flex;
  flex-direction: column;
  gap:        var(--space-3);
  -webkit-overflow-scrolling: touch;
}

.gm-section {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.gm-section-label {
  font-family:    var(--font-display);
  font-size:      9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          #cc3344;
  margin-bottom:  2px;
}

.gm-stat-row {
  display:         flex;
  justify-content: space-between;
  font-size:       var(--text-xs);
  color:           var(--text-secondary);
  padding:         2px 0;
  border-bottom:   1px solid var(--border);
}

.gm-stat-label { color: var(--text-secondary); }
.gm-stat-val   { color: var(--text-primary); font-weight: var(--weight-bold); }

.gm-btn {
  background:    var(--bg-inset);
  border:        1px solid var(--border);
  color:         var(--text-primary);
  font-family:   var(--font-display);
  font-size:     10px;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  padding:       var(--space-1) var(--space-2);
  cursor:        pointer;
  text-align:    left;
  width:         100%;
}

.gm-btn:active   { background: var(--bg-header); }
.gm-btn--set     { flex-shrink: 0; width: auto; padding: var(--space-1) var(--space-2); }
.gm-btn--toggle  { color: var(--text-secondary); }
.gm-btn--on      { color: #44cc88; border-color: #44cc8866; background: rgba(68,204,136,0.08); }

.gm-input-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
}

.gm-input-label {
  font-size:  10px;
  color:      var(--text-secondary);
  flex:       1;
  min-width:  0;
}

.gm-input {
  width:         64px;
  background:    var(--bg-inset);
  border:        1px solid var(--border);
  color:         var(--text-primary);
  font-size:     11px;
  padding:       3px 6px;
  border-radius: var(--radius-sm);
  flex-shrink:   0;
  -moz-appearance: textfield;
}

.gm-input::-webkit-outer-spin-button,
.gm-input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* GM toast -- bottom-right notification */
.gm-toast {
  position:      fixed;
  bottom:        calc(var(--bottombar-h) + 110px + env(safe-area-inset-bottom, 0px));
  right:         var(--space-3);
  background:    #cc3344;
  color:         #fff;
  font-family:   var(--font-display);
  font-size:     10px;
  letter-spacing: 0.05em;
  border-radius: var(--radius-sm);
  padding:       var(--space-1) var(--space-3);
  z-index:       var(--z-toast);
  opacity:       0;
  transform:     translateY(8px);
  transition:    opacity 0.2s, transform 0.2s;
  pointer-events: none;
  white-space:   nowrap;
}

.gm-toast--show {
  opacity:   1;
  transform: translateY(0);
}