/* components.css — buttons, modals, auth card, shared reusable UI
   Depends on: tokens.css */

/* ── BUTTONS ────────────────────────────────────────────── */
/* All buttons share the same height, radius, font, padding.
   Only surface colour and border differ per variant. */

.btn {
  font-family:    var(--font-display);
  font-size:      var(--text-base);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.04em;
  padding:        11px var(--space-2);
  border-radius:  var(--radius-md);
  border:         1.5px solid transparent;
  line-height:    1;
  text-align:     center;
  cursor:         pointer;
  transition:
    filter    var(--dur-fast),
    transform var(--dur-fast);
  user-select:    none;
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  width:          100%;
}

.btn:active  { transform: scale(0.97); filter: brightness(0.92); }
.btn:disabled {
  opacity:   0.45;
  cursor:    not-allowed;
  transform: none;
  filter:    none;
}

/* Primary — attack, main CTA */
.btn-primary {
  background:    var(--accent);
  border-color:  #a0671a;
  color:         #ffffff;
  position:      relative;
  overflow:      hidden;
}

/* Attack button — "Attack" label centred over watermark icons */
.btn-attack-inner {
  position:    relative;  /* sits above the watermark layer */
  z-index: var(--z-local-1);
  font-size:   var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.05em;
  pointer-events: none;
}

/* Watermark icon layer — absolutely fills the button behind the label */
.btn-attack-watermark {
  position:  absolute;
  inset:     0;
  display:   flex;
  align-items:     center;
  justify-content: space-evenly;
  pointer-events:  none;
  z-index: var(--z-base);
}

.btn-attack-watermark img {
  width:   22px;
  height:  22px;
  opacity: 0.18;
  display: block;
  flex-shrink: 0;
}

/* Ghost — secondary actions */
.btn-ghost {
  background:   var(--btn-ghost-bg);
  border-color: var(--btn-ghost-border);
  color:        var(--text-primary);
}

/* Magic — spells button, blue toned */
.btn-magic {
  background:   #2471a3;
  border-color: #1a5276;
  color:        #d6eaf8;
}

/* Danger — destructive, flee */
.btn-danger {
  background:   var(--color-danger);
  border-color: var(--color-danger-border);
  color:        var(--color-danger-text);
}

/* Full-width form button variant */
.btn-block {
  width:      100%;
  padding:    12px;
  font-size:  var(--text-md);
}

/* ── AUTH CARD ──────────────────────────────────────────── */
.auth-card {
  width:           100%;
  max-width:       380px;
  background:      var(--bg-header);
  border:          1.5px solid var(--border);
  border-radius:   var(--radius-lg);
  padding:         28px var(--space-6) var(--space-6);
  display:         flex;
  flex-direction:  column;
  gap:             0;
}

.auth-logo {
  font-family:    var(--font-display);
  font-size:      var(--text-xl);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.06em;
  color:          var(--text-primary);
  text-align:     center;
  margin-bottom:  var(--space-1);
}

.auth-tagline {
  font-size:     var(--text-sm);
  color:         var(--text-secondary);
  font-style:    italic;
  text-align:    center;
  margin-bottom: var(--space-6);
}

.auth-tabs {
  display:       flex;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: var(--space-5);
}

.auth-tab {
  flex:           1;
  padding:        9px 0;
  font-family:    var(--font-display);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.04em;
  text-align:     center;
  cursor:         pointer;
  color:          var(--text-secondary);
  border-bottom:  2px solid transparent;
  margin-bottom:  -1.5px;
  transition:
    color        var(--dur-fast),
    border-color var(--dur-fast);
  user-select:    none;
}

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

.auth-fields {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

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

.field-label {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.06em;
  color:          var(--text-secondary);
}

.field-input {
  font-family:  var(--font-body);
  font-size:    var(--text-md);
  color:        var(--text-primary);
  background:   var(--bg-base);
  border:       1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding:      9px var(--space-3);
  outline:      none;
  width:        100%;
  transition:   border-color var(--dur-fast);
}

.field-input:focus {
  border-color: var(--accent);
}

.field-input::placeholder {
  color:   var(--text-secondary);
  opacity: 0.6;
}

.auth-error {
  font-size:  var(--text-sm);
  color:      var(--color-danger);
  font-style: italic;
  min-height: 18px;
  text-align: center;
  margin-top: var(--space-1);
}

/* ── GENDER PICKER ──────────────────────────────────────── */
.gender-picker {
  display:         flex;
  gap:             var(--space-3);
  justify-content: center;
}

.gender-btn {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-2);
  padding:         var(--space-3);
  border-radius:   var(--radius-md);
  border:          2px solid var(--border);
  background:      var(--bg-inset);
  color:           var(--text-secondary);
  font-family:     var(--font-display);
  font-size:       var(--text-sm);
  cursor:          pointer;
  flex:            1;
  transition:      border-color var(--dur-fast), color var(--dur-fast);
}

.gender-btn.active {
  border-color: var(--accent);
  color:        var(--text-primary);
}

.gender-portrait {
  width:         72px;
  height:        72px;
  border-radius: var(--radius-sm);
  object-fit:    cover;
}

/* ── MODAL SYSTEM ───────────────────────────────────────── */
/* All modals are created through openModal(). Never write
   modal HTML by hand. Three ways to close: X, backdrop, Esc. */

#modal-backdrop {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index:         var(--z-overlay);
  display:         none;
  align-items:     flex-end;
  justify-content: center;
  /* Padding on all four sides — sheet never touches any screen edge.
     Bottom clears the bottom nav bar plus device safe area. */
  padding-top:     var(--safe-top);
  padding-left:    var(--space-3);
  padding-right:   var(--space-3);
  padding-bottom:  calc(var(--bottombar-h) + env(safe-area-inset-bottom) + var(--space-3));
}

#modal-backdrop.open {
  display: flex;
}

/* Sheet floats above the bottom nav with a gap on all sides */
#modal-sheet {
  width:          100%;
  max-width:      var(--content-max);
  background:     var(--bg-base);
  border:         1.5px solid var(--border);
  border-radius:  var(--radius-xl);
  /* Max height: full viewport minus top clearance, bottom clearance, and gap */
  max-height:     calc(100dvh - var(--safe-top) - var(--bottombar-h) - env(safe-area-inset-bottom) - var(--space-6));
  overflow-y:     auto;
  overflow-x:     hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation:      slideUp var(--dur-med) var(--ease-out);
  position:       relative;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0);    }
}

.modal-header {
  position:        sticky;
  top:             0;
  background:      var(--bg-header);
  border-bottom:   1.5px solid var(--border);
  padding:         var(--space-4) var(--space-4) var(--space-3);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  z-index:         var(--z-raised);
}

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

.modal-close {
  width:           28px;
  height:          28px;
  background:      var(--btn-ghost-bg);
  border:          1px solid var(--btn-ghost-border);
  border-radius:   var(--radius-full);
  cursor:          pointer;
  font-size:       var(--text-lg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--text-primary);
  flex-shrink:     0;
  font-family:     monospace;
  line-height:     1;
  transition:      background var(--dur-fast);
}

.modal-close:hover {
  background: var(--border);
}

.modal-body {
  padding: var(--space-4);
}

/* ── BOTTOM SHEET SAFETY RULE ───────────────────────────────
   Apply .modal-sheet-base to ANY element that slides up from
   the bottom. This is a hard guarantee — the sheet will never
   touch the bottom nav, gesture bar, or screen edge, on any
   device, regardless of how or where the element was created.

   All three properties are required together:
     max-height — prevents the sheet from growing past the safe zone
     padding-bottom — keeps content away from the bottom edge
     margin-bottom — lifts the sheet above the nav bar itself

   Use !important so inline styles from JS cannot override this.
   This class is the single source of truth for bottom clearance.   */

.modal-sheet-base {
  max-height:     calc(100dvh - var(--topbar-h) - var(--bottombar-h) - env(safe-area-inset-bottom, 0px) - var(--space-6)) !important;
  padding-bottom: calc(var(--space-4)) !important;
  margin-bottom:  calc(var(--bottombar-h) + env(safe-area-inset-bottom, 0px) + var(--space-3));
  overflow-y:     auto;
  overflow-x:     hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── GAME OVER OVERLAY ──────────────────────────────────── */
#gameover-screen {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(40, 15, 5, 0.88);
  z-index:         var(--z-modal);
  align-items:     center;
  justify-content: center;
  flex-direction:  column;
  gap:             var(--space-4);
  padding:         var(--space-8);
}

#gameover-screen.open {
  display: flex;
}

.gameover-title {
  font-family:    var(--font-display);
  font-size:      var(--text-3xl);
  font-weight:    var(--weight-bold);
  color:          var(--bg-base);
  letter-spacing: 0.06em;
  text-align:     center;
}

.gameover-sub {
  font-size:  var(--text-lg);
  color:      var(--text-secondary);
  text-align: center;
  font-style: italic;
}

.gameover-rewards {
  background:   rgba(255, 255, 255, 0.08);
  border:       1px solid var(--border);
  border-radius: var(--radius-md);
  padding:      var(--space-3) var(--space-5);
  display:      flex;
  gap:          var(--space-6);
  font-size:    var(--text-md);
  color:        var(--bg-base);
}

.gameover-reward-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-1);
}

.gameover-reward-label {
  font-size:      var(--text-xs);
  color:          var(--text-secondary);
  font-family:    var(--font-display);
  letter-spacing: 0.04em;
}

.gameover-reward-val {
  font-weight: var(--weight-bold);
  font-size:   var(--text-xl);
}

/* ── SIGN OUT BUTTON ────────────────────────────────────── */
.signout-btn {
  font-family:    var(--font-display);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: 0.04em;
  padding:        var(--space-1) var(--space-2) + 2px;
  padding:        5px 10px;
  background:     var(--btn-ghost-bg);
  border:         1px solid var(--btn-ghost-border);
  border-radius:  var(--radius-md);
  color:          var(--text-secondary);
  cursor:         pointer;
  transition:     color var(--dur-fast);
}

.signout-btn:hover {
  color: var(--text-primary);
}

/* ── FLASH ANIMATIONS ───────────────────────────────────── */
/* Applied briefly via JS then removed. */
.flash-red {
  animation: flashRed var(--dur-slow) ease;
}

.flash-orange {
  animation: flashOrange var(--dur-slow) ease;
}

@keyframes flashRed {
  0%, 100% { background: inherit; }
  50%       { background: rgba(var(--hp-player-rgb, 192,57,43), 0.25); }
}

@keyframes flashOrange {
  0%, 100% { background: inherit; }
  50%       { background: rgba(var(--accent-rgb, 200,118,42), 0.25); }
}

/* ── QUEST LOG MODAL ─────────────────────────────────────── */

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

.quest-log-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  position: sticky;
  top: 0;
  background: var(--bg-base);
  padding: var(--space-2) 0;
  z-index: var(--z-raised);
}

.quest-log-tab {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.quest-log-tab.active {
  background: var(--bg-header);
  color: var(--text-primary);
  border-color: var(--accent);
}

.quest-section-label {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-3) 0 var(--space-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-2);
}

/* Quest cards */
.quest-card {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}

.quest-card--active   { border-left: 3px solid var(--accent); }
.quest-card--complete { border-left: 3px solid #3a8a3a; background: rgba(58,138,58,0.06); }
.quest-card--claimed  { opacity: 0.55; }
.quest-card--locked   { opacity: 0.45; border-style: dashed; }

.quest-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.quest-card-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  flex: 1;
}

.quest-card-status {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.quest-card--complete .quest-card-status { color: #5ab05a; }

.quest-card-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-2);
}

.quest-card-reward {
  font-size: var(--text-xs);
  color: var(--accent);
  margin-top: var(--space-1);
}

.quest-claim-btn {
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
  width: auto;
}

.quest-progress-track {
  height: 4px;
  background: var(--bg-header);
  border-radius: var(--bar-radius);
  margin: var(--space-2) 0 var(--space-1);
  overflow: hidden;
}

.quest-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--bar-radius);
  transition: width var(--dur-med) ease;
}

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

/* Achievement grid */
.ach-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ach-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.ach-card--earned { border-left: 3px solid var(--accent); }
.ach-card--locked { opacity: 0.45; }

.ach-card-icon {
  font-size: 20px;
  color: var(--accent);
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  line-height: 1.4;
}

.ach-card--locked .ach-card-icon { color: var(--text-secondary); }

.ach-card-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: 2px;
}

.ach-card-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.4;
}

.ach-card-reward {
  font-size: var(--text-xs);
  color: var(--accent);
  margin-top: 2px;
}

/* Titles list */
.title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
}

.title-name {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.title-name--active {
  color: var(--accent);
  font-weight: var(--weight-bold);
}

.title-equipped {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-left: var(--space-2);
}

.title-equip-btn {
  width: auto;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

/* ── TRAINER & CONGRATS MODALS ────────────────────────────── */

.trainer-found-modal,
.congrats-modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.trainer-found-portrait-row,
.congrats-portrait-row {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.trainer-portrait {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  object-fit: cover;
  object-position: center top;
  border: 2px solid var(--border);
  flex-shrink: 0;
}

.trainer-found-name,
.congrats-quest-title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1.3;
}

.trainer-found-type,
.congrats-speaker {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin-top: 2px;
}

.trainer-found-dialogue {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.6;
  padding: var(--space-3);
  background: var(--bg-inset);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--border);
}

.trainer-found-quest {
  background: var(--bg-inset);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.trainer-quest-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-1);
}

.trainer-quest-desc {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: 1.5;
}

.trainer-found-actions {
  display: flex;
  gap: var(--space-2);
}

.trainer-found-actions .btn {
  flex: 1;
}

.congrats-rewards {
  background: var(--bg-inset);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.reward-line {
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.reward-unlock {
  color: #5ab05a;
  font-weight: var(--weight-bold);
}

.reward-title  { color: var(--accent); }
.reward-border { color: #c0992a; }

/* ── QUEST TOASTS ────────────────────────────────────────── */

#quest-toast-container {
  position: fixed;
  bottom: calc(var(--bottombar-h) + var(--space-4) + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, 92vw);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-hud-label);
  pointer-events: none;
}

.quest-toast {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-header);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.quest-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.quest-toast--quest       { border-left: 3px solid var(--accent); }
.quest-toast--achievement { border-left: 3px solid #c0992a; }
.quest-toast--skill       { border-left: 3px solid #4a6aaa; }

.quest-toast-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.quest-toast-msg {
  font-size: var(--text-xs);
  line-height: 1.4;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════
   PORTRAIT BORDERS
   Applied via data-border attribute on the portrait wrapper.
   Works on: #hub-hero-portrait-wrap, #player-portrait,
             .tavern-avatar-portrait
   ═══════════════════════════════════════════════════════════ */

/* Base — all bordered wrappers need position:relative */
[data-border] {
  position: relative;
}

/* The border ring sits as an inset box-shadow + outline so it
   never affects layout. ::before handles animated effects. */

/* ── T0: Plain ──────────────────────────────────────────── */
[data-border="plain"] {
  box-shadow: inset 0 0 0 2px var(--border);
}

/* ── T1: Stone ──────────────────────────────────────────── */
[data-border="stone"] {
  box-shadow:
    inset 0 0 0 2px #6b6b6b,
    inset 0 0 0 4px #3a3a3a,
    0 0 8px rgba(100,100,100,0.3);
}

/* ── T1: Ember ──────────────────────────────────────────── */
[data-border="ember"] {
  box-shadow:
    inset 0 0 0 2px #d4622a,
    inset 0 0 0 4px #7a2a08,
    0 0 12px rgba(212,98,42,0.45);
}

/* ── T2: Silver ─────────────────────────────────────────── */
[data-border="silver"] {
  box-shadow:
    inset 0 0 0 2px #c0c8d8,
    inset 0 0 0 4px #6a7080,
    0 0 14px rgba(192,200,216,0.4);
}
[data-border="silver"]::before {
  content:       '';
  position:      absolute;
  inset:         -2px;
  border-radius: inherit;
  background:    linear-gradient(135deg, #ffffff44, #c0c8d800, #c0c8d844, #ffffff00);
  pointer-events: none;
  animation:     border-shimmer 3s linear infinite;
  z-index: var(--z-local-2);
}

/* ── T2: Gold ───────────────────────────────────────────── */
[data-border="gold"] {
  box-shadow:
    inset 0 0 0 2px #d4a832,
    inset 0 0 0 4px #7a5808,
    0 0 18px rgba(212,168,50,0.55);
}
[data-border="gold"]::before {
  content:       '';
  position:      absolute;
  inset:         -2px;
  border-radius: inherit;
  background:    linear-gradient(135deg, #ffe08866, #d4a83200, #ffe08844, #d4a83200);
  pointer-events: none;
  animation:     border-shimmer 2.5s linear infinite;
  z-index: var(--z-local-2);
}

/* ── T2: Crimson ────────────────────────────────────────── */
[data-border="crimson"] {
  box-shadow:
    inset 0 0 0 2px #cc2233,
    inset 0 0 0 4px #660011,
    0 0 16px rgba(204,34,51,0.5);
  animation: border-pulse-crimson 1.8s ease-in-out infinite;
}

/* ── T2: Void ───────────────────────────────────────────── */
[data-border="void"] {
  box-shadow:
    inset 0 0 0 2px #8844cc,
    inset 0 0 0 4px #220044,
    0 0 20px rgba(136,68,204,0.55);
}
[data-border="void"]::before {
  content:       '';
  position:      absolute;
  inset:         -2px;
  border-radius: inherit;
  background:    linear-gradient(135deg, #aa66ff33, #22004400, #8844cc33, #22004400);
  pointer-events: none;
  animation:     border-shimmer 4s linear infinite;
  z-index: var(--z-local-2);
}

/* ── T3: Rainbow ────────────────────────────────────────── */
[data-border="rainbow"] {
  box-shadow: 0 0 20px rgba(255,255,255,0.3);
}
[data-border="rainbow"]::before {
  content:       '';
  position:      absolute;
  inset:         -3px;
  border-radius: inherit;
  background:    conic-gradient(
    #ff0000, #ff8800, #ffff00, #00ff00,
    #00ffff, #0088ff, #8800ff, #ff0088, #ff0000
  );
  pointer-events: none;
  animation:     border-spin 3s linear infinite;
  z-index: var(--z-local-2);
  mask:          linear-gradient(#000 0 0) content-box,
                 linear-gradient(#000 0 0);
  -webkit-mask:  linear-gradient(#000 0 0) content-box,
                 linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding:       3px;
}

/* ── T3: Flame ──────────────────────────────────────────── */
[data-border="flame"] {
  box-shadow:
    inset 0 0 0 2px #ff6600,
    0 0 24px rgba(255,100,0,0.6);
}
[data-border="flame"]::before {
  content:       '';
  position:      absolute;
  inset:         -3px;
  border-radius: inherit;
  background:    linear-gradient(0deg,
    #ff0000, #ff6600, #ffaa00, #ff6600,
    #ff2200, #ff8800, #ffcc00, #ff4400
  );
  background-size: 100% 400%;
  pointer-events: none;
  animation:     border-flame 1.4s ease-in-out infinite alternate;
  z-index: var(--z-local-2);
  mask:          linear-gradient(#000 0 0) content-box,
                 linear-gradient(#000 0 0);
  -webkit-mask:  linear-gradient(#000 0 0) content-box,
                 linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding:       3px;
}

/* ── T3: Eclipse ────────────────────────────────────────── */
[data-border="eclipse"] {
  box-shadow:
    inset 0 0 0 3px #080808,
    0 0 0 2px #c8a820,
    0 0 22px rgba(200,168,32,0.5);
  animation: border-pulse-eclipse 2.5s ease-in-out infinite;
}

/* ── T4: Cloudless ──────────────────────────────────────── */
[data-border="cloudless"] {
  box-shadow:
    inset 0 0 0 2px #88ccff,
    0 0 28px rgba(136,200,255,0.65);
}
[data-border="cloudless"]::before {
  content:       '';
  position:      absolute;
  inset:         -3px;
  border-radius: inherit;
  background:    linear-gradient(90deg,
    #ffffff, #88ccff, #aaddff, #ffffff,
    #88ccff, #ffffff, #aaddff, #88ccff
  );
  background-size: 400% 100%;
  pointer-events: none;
  animation:     border-cloudless 3s linear infinite;
  z-index: var(--z-local-2);
  mask:          linear-gradient(#000 0 0) content-box,
                 linear-gradient(#000 0 0);
  -webkit-mask:  linear-gradient(#000 0 0) content-box,
                 linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding:       3px;
}

/* ── Border keyframe animations ─────────────────────────── */
@keyframes border-shimmer {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes border-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes border-flame {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

@keyframes border-cloudless {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes border-pulse-crimson {
  0%, 100% { box-shadow: inset 0 0 0 2px #cc2233, inset 0 0 0 4px #660011, 0 0 10px rgba(204,34,51,0.3); }
  50%       { box-shadow: inset 0 0 0 2px #ff4455, inset 0 0 0 4px #880022, 0 0 24px rgba(255,68,85,0.7); }
}

@keyframes border-pulse-eclipse {
  0%, 100% { box-shadow: inset 0 0 0 3px #080808, 0 0 0 2px #c8a820, 0 0 14px rgba(200,168,32,0.35); }
  50%       { box-shadow: inset 0 0 0 3px #080808, 0 0 0 2px #ffe060, 0 0 28px rgba(255,224,96,0.65); }
}

/* ── T3: Boss borders (floors 10–90) ────────────────────── */

/* Floor 10 — Warden of the Gate: iron grey double ring */
[data-border="warden"] {
  box-shadow:
    inset 0 0 0 2px #9aa0a8,
    inset 0 0 0 5px #3a3e42,
    0 0 10px rgba(154,160,168,0.3);
}

/* Floor 20 — Ashen Knight: pale white shimmer */
[data-border="ashen"] {
  box-shadow:
    inset 0 0 0 2px #d8d0c8,
    inset 0 0 0 4px #888078,
    0 0 14px rgba(216,208,200,0.35);
}
[data-border="ashen"]::before {
  content:       '';
  position:      absolute;
  inset:         -2px;
  border-radius: inherit;
  background:    linear-gradient(135deg, #ffffff55, #d8d0c800, #ffffff33, #d8d0c800);
  pointer-events: none;
  animation:     border-shimmer 4s linear infinite;
  z-index:       var(--z-local-2);
}

/* Floor 30 — Hollow Mage: teal arcane pulse */
[data-border="hollow"] {
  box-shadow:
    inset 0 0 0 2px #22ccaa,
    inset 0 0 0 4px #0a4a3a,
    0 0 18px rgba(34,204,170,0.45);
  animation: border-pulse-hollow 2s ease-in-out infinite;
}

@keyframes border-pulse-hollow {
  0%, 100% { box-shadow: inset 0 0 0 2px #22ccaa, inset 0 0 0 4px #0a4a3a, 0 0 12px rgba(34,204,170,0.3); }
  50%       { box-shadow: inset 0 0 0 2px #44ffcc, inset 0 0 0 4px #0a5040, 0 0 26px rgba(68,255,204,0.65); }
}

/* Floor 40 — Thornbound: dark forest green barbed */
[data-border="thorn"] {
  box-shadow:
    inset 0 0 0 2px #4a8830,
    inset 0 0 0 5px #1a3010,
    0 0 14px rgba(74,136,48,0.4);
}
[data-border="thorn"]::before {
  content:       '';
  position:      absolute;
  inset:         -2px;
  border-radius: inherit;
  background:    linear-gradient(135deg, #88ff4444, #1a301000, #44aa2244, #1a301000);
  pointer-events: none;
  animation:     border-shimmer 5s linear infinite;
  z-index:       var(--z-local-2);
}

/* Floor 50 — Pale Watcher: cold shifting white/grey */
[data-border="watcher"] {
  box-shadow:
    inset 0 0 0 2px #c8ccd8,
    inset 0 0 0 4px #484c58,
    0 0 18px rgba(200,204,216,0.4);
  animation: border-pulse-watcher 3s ease-in-out infinite;
}

@keyframes border-pulse-watcher {
  0%, 100% { box-shadow: inset 0 0 0 2px #c8ccd8, inset 0 0 0 4px #484c58, 0 0 10px rgba(200,204,216,0.25); }
  50%       { box-shadow: inset 0 0 0 2px #ffffff, inset 0 0 0 4px #606470, 0 0 24px rgba(255,255,255,0.55); }
}

/* Floor 60 — Storm Herald: electric blue crackle */
[data-border="storm"] {
  box-shadow:
    inset 0 0 0 2px #44aaff,
    inset 0 0 0 4px #0a2a66,
    0 0 22px rgba(68,170,255,0.6);
  animation: border-pulse-storm 1.2s ease-in-out infinite;
}

@keyframes border-pulse-storm {
  0%         { box-shadow: inset 0 0 0 2px #44aaff, inset 0 0 0 4px #0a2a66, 0 0 14px rgba(68,170,255,0.4); }
  30%        { box-shadow: inset 0 0 0 2px #aaddff, inset 0 0 0 4px #1a4a88, 0 0 30px rgba(170,221,255,0.8); }
  31%        { box-shadow: inset 0 0 0 2px #ffffff,  inset 0 0 0 4px #2255aa, 0 0 36px rgba(255,255,255,0.9); }
  50%, 100%  { box-shadow: inset 0 0 0 2px #44aaff, inset 0 0 0 4px #0a2a66, 0 0 14px rgba(68,170,255,0.4); }
}

/* Floor 70 — Soul Anchor: deep purple soul glow */
[data-border="soul"] {
  box-shadow:
    inset 0 0 0 2px #9944cc,
    inset 0 0 0 4px #2a0a44,
    0 0 22px rgba(153,68,204,0.55);
}
[data-border="soul"]::before {
  content:       '';
  position:      absolute;
  inset:         -2px;
  border-radius: inherit;
  background:    linear-gradient(135deg, #cc88ff44, #2a0a4400, #9944cc44, #2a0a4400);
  pointer-events: none;
  animation:     border-shimmer 3.5s linear infinite;
  z-index:       var(--z-local-2);
}

/* Floor 80 — The Fractured: RGB split glitch */
[data-border="fractured"] {
  box-shadow:
    inset 0 0 0 2px #ff4444,
    inset 0 0 0 4px #220000,
    0 0 0 2px #4444ff,
    0 0 18px rgba(255,68,68,0.4);
  animation: border-fractured 0.8s steps(3) infinite;
}

@keyframes border-fractured {
  0%   { box-shadow: inset 0 0 0 2px #ff4444, inset 0 0 0 4px #220000, 0 0 0 2px #4444ff, 0 0 14px rgba(255,68,68,0.4); }
  33%  { box-shadow: inset 0 0 0 2px #4444ff, inset 0 0 0 4px #000022, 0 0 0 2px #ff4444, 0 0 14px rgba(68,68,255,0.4); }
  66%  { box-shadow: inset 0 0 0 3px #ffffff, inset 0 0 0 5px #111111, 0 0 0 1px #888888, 0 0 18px rgba(255,255,255,0.5); }
  100% { box-shadow: inset 0 0 0 2px #ff4444, inset 0 0 0 4px #220000, 0 0 0 2px #4444ff, 0 0 14px rgba(255,68,68,0.4); }
}

/* Floor 90 — The Echo: mirror silver reflection */
[data-border="echo"] {
  box-shadow:
    inset 0 0 0 2px #e0e8f0,
    inset 0 0 0 4px #8090a0,
    0 0 20px rgba(224,232,240,0.5);
}
[data-border="echo"]::before {
  content:       '';
  position:      absolute;
  inset:         -2px;
  border-radius: inherit;
  background:    linear-gradient(90deg,
    #ffffff66, #e0e8f000, #c0d0e066, #e0e8f000,
    #ffffff66, #e0e8f000
  );
  background-size: 300% 100%;
  pointer-events: none;
  animation:     border-echo 2.5s linear infinite;
  z-index:       var(--z-local-2);
}

@keyframes border-echo {
  0%   { background-position: 0% 50%; opacity: 1; }
  45%  { background-position: 100% 50%; opacity: 0.6; }
  50%  { background-position: 100% 50%; opacity: 1; }
  95%  { background-position: 0% 50%; opacity: 0.6; }
  100% { background-position: 0% 50%; opacity: 1; }
}

/* ── Border picker in Profile modal ─────────────────────── */
.border-picker-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--space-3);
}

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

.border-picker-preview {
  width:         52px;
  height:        52px;
  border-radius: var(--radius-md);
  overflow:      hidden;
  background:    var(--bg-inset);
  position:      relative;
}

.border-picker-preview img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.border-picker-label {
  font-family:  var(--font-display);
  font-size:    9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:        var(--text-secondary);
  text-align:   center;
}

.border-picker-item--active .border-picker-label {
  color: var(--accent);
}

.border-picker-item--locked {
  opacity: 0.4;
  cursor:  not-allowed;
}

.border-picker-cost {
  font-size:  9px;
  color:      var(--text-secondary);
  text-align: center;
}

.border-picker-cost--affordable {
  color: #88cc88;
}

/* ── REFERRAL MODAL ──────────────────────────────────────── */

.referral-modal {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  padding:        var(--space-2) 0;
}

.referral-desc {
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
  line-height: 1.6;
  text-align:  center;
}

.referral-desc strong {
  color: var(--accent);
}

.referral-link-box {
  background:    var(--bg-inset);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       var(--space-3);
  word-break:    break-all;
}

.referral-link-text {
  font-size:   var(--text-xs);
  color:       var(--text-secondary);
  font-family: monospace;
  line-height: 1.5;
}

.referral-actions {
  display: flex;
  gap:     var(--space-2);
}

.referral-actions .btn {
  flex: 1;
}

.referral-qr {
  display:         flex;
  justify-content: center;
  padding:         var(--space-2) 0;
}

.referral-note {
  font-size:  var(--text-sm);
  text-align: center;
}

/* ── AUTH REFERRAL BANNER ────────────────────────────────── */

.auth-referral-banner {
  background:    rgba(var(--accent-rgb, 200,160,80), 0.12);
  border:        1px solid var(--accent);
  border-radius: var(--radius-md);
  padding:       var(--space-2) var(--space-3);
  font-size:     var(--text-xs);
  color:         var(--text-secondary);
  text-align:    center;
  line-height:   1.5;
}

.auth-referral-banner strong {
  color:       var(--accent);
  font-weight: var(--weight-bold);
}

/* ── INTRO PICKER (Profile modal) ────────────────────────── */

.intro-toggle-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         var(--space-2) 0;
  border-bottom:   1px solid var(--border);
  margin-bottom:   var(--space-2);
}

.intro-toggle-label {
  font-size:  var(--text-sm);
  color:      var(--text-secondary);
}

.intro-toggle-btn {
  background:    var(--bg-inset);
  border:        1px solid var(--border);
  color:         var(--text-secondary);
  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;
  min-width:     44px;
  text-align:    center;
  letter-spacing: 0.05em;
}

.intro-toggle-btn--on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-base);
}

.intro-picker-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.intro-picker-item {
  display:       flex;
  flex-direction: column;
  gap:           4px;
  padding:       var(--space-3);
  background:    var(--bg-inset);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
}

.intro-picker-item--active {
  border-color: var(--accent);
  background:   rgba(200,160,80,0.08);
}

.intro-picker-item--locked {
  opacity: 0.45;
}

.intro-picker-label {
  font-family:  var(--font-display);
  font-size:    var(--text-xs);
  font-weight:  var(--weight-bold);
  color:        var(--text-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.intro-picker-line {
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
  font-style:  italic;
  line-height: 1.4;
}

.intro-equip-btn {
  align-self:    flex-start;
  background:    transparent;
  border:        1px solid var(--border);
  color:         var(--text-secondary);
  font-family:   var(--font-display);
  font-size:     9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  padding:       3px 10px;
  cursor:        pointer;
  margin-top:    2px;
}

.intro-equip-btn:active { border-color: var(--accent); color: var(--accent); }

.intro-equipped-label {
  align-self:     flex-start;
  font-family:    var(--font-display);
  font-size:      9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-top:     2px;
}

.intro-locked-label {
  align-self:     flex-start;
  font-family:    var(--font-display);
  font-size:      9px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--text-secondary);
  margin-top:     2px;
}

/* ── TAVERN INTRO AVATAR ANIMATIONS ──────────────────────── */
/* Overlay sits on top of the avatar slot during intro playback */

.tavern-intro-overlay {
  position:        absolute;
  inset:           -8px;
  border-radius:   var(--radius-md);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: flex-end;
  pointer-events:  none;
  z-index:         var(--z-local-2);
  overflow:        visible;
  animation-fill-mode: both;
}

.tavern-intro-line {
  font-family:    var(--font-display);
  font-size:      9px;
  font-weight:    var(--weight-bold);
  color:          var(--intro-col, var(--accent));
  text-align:     center;
  text-shadow:    0 1px 4px rgba(0,0,0,0.9);
  white-space:    nowrap;
  margin-bottom:  -18px;
  letter-spacing: 0.04em;
  animation:      intro-text-rise 3s ease forwards;
}


/* intro-fade — simple fade in/out */
.intro-fade {
  background: radial-gradient(ellipse at center, var(--intro-col, var(--accent))22 0%, transparent 70%);
  animation: intro-anim-fade 3s ease forwards;
}

/* intro-shimmer — silver slide */
.intro-shimmer {
  background: linear-gradient(135deg, transparent 30%, rgba(192,200,216,0.3) 50%, transparent 70%);
  animation: intro-anim-shimmer 3s ease forwards;
}

/* intro-glow — soft pulse */
.intro-glow {
  box-shadow: 0 0 0 0 var(--intro-col, var(--accent));
  animation: intro-anim-glow 3s ease forwards;
}

/* intro-flash — sharp burst */
.intro-flash {
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.6) 0%, transparent 65%);
  animation: intro-anim-flash 3s ease forwards;
}

/* intro-gold — warm gold shimmer */
.intro-gold {
  background: linear-gradient(135deg, transparent, rgba(212,168,50,0.4), transparent);
  animation: intro-anim-shimmer 3s ease forwards;
}

/* intro-red — crimson pulse */
.intro-red {
  background: radial-gradient(ellipse at center, rgba(204,34,51,0.4) 0%, transparent 70%);
  animation: intro-anim-glow 3s ease forwards;
}

/* intro-shake — ground shake */
.intro-shake {
  background: radial-gradient(ellipse at center, rgba(212,168,50,0.35) 0%, transparent 65%);
  animation: intro-anim-shake 3s ease forwards;
}

/* intro-flicker — struggle effect */
.intro-flicker {
  background: radial-gradient(ellipse at center, rgba(204,34,51,0.3) 0%, transparent 65%);
  animation: intro-anim-flicker 3s ease forwards;
}

/* intro-clean — crisp white sweep */
.intro-clean {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: intro-anim-shimmer 2.5s ease forwards;
}

/* intro-rainbow — hue cycle */
.intro-rainbow {
  background: conic-gradient(
    rgba(255,0,0,0.25), rgba(255,165,0,0.25), rgba(255,255,0,0.25),
    rgba(0,255,0,0.25), rgba(0,0,255,0.25),   rgba(148,0,211,0.25),
    rgba(255,0,0,0.25)
  );
  animation: intro-anim-spin 3s linear forwards;
}

/* intro-cloudless — full shimmer sweep */
.intro-cloudless {
  background: linear-gradient(90deg,
    transparent, rgba(136,200,255,0.5), rgba(255,255,255,0.6),
    rgba(136,200,255,0.5), transparent
  );
  animation: intro-anim-cloudless 3s ease forwards;
}

/* ── Intro keyframes ─────────────────────────────────────── */

@keyframes intro-text-rise {
  0%   { opacity: 0; transform: translateY(6px); }
  20%  { opacity: 1; transform: translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes intro-anim-fade {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  75%  { opacity: 0.8; }
  100% { opacity: 0; }
}

@keyframes intro-anim-shimmer {
  0%   { opacity: 0; transform: translateX(-30px); }
  20%  { opacity: 1; transform: translateX(0); }
  75%  { opacity: 0.9; }
  100% { opacity: 0; transform: translateX(30px); }
}

@keyframes intro-anim-glow {
  0%   { opacity: 0; transform: scale(0.8); }
  20%  { opacity: 1; transform: scale(1.05); }
  60%  { opacity: 0.9; transform: scale(1.0); }
  100% { opacity: 0; transform: scale(1.1); }
}

@keyframes intro-anim-flash {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  16%  { opacity: 0.3; }
  24%  { opacity: 0.9; }
  70%  { opacity: 0.6; }
  100% { opacity: 0; }
}

@keyframes intro-anim-shake {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 1; transform: translateX(-4px); }
  20%  { transform: translateX(4px); }
  30%  { transform: translateX(-3px); }
  40%  { transform: translateX(3px); }
  50%  { transform: translateX(0); }
  80%  { opacity: 0.8; }
  100% { opacity: 0; }
}

@keyframes intro-anim-flicker {
  0%   { opacity: 0; }
  10%  { opacity: 0.9; }
  20%  { opacity: 0.2; }
  30%  { opacity: 0.8; }
  45%  { opacity: 0.15; }
  55%  { opacity: 0.7; }
  70%  { opacity: 0.6; }
  100% { opacity: 0; }
}

@keyframes intro-anim-spin {
  0%   { opacity: 0; transform: rotate(0deg) scale(0.9); }
  15%  { opacity: 1; transform: rotate(45deg) scale(1.0); }
  80%  { opacity: 0.8; transform: rotate(270deg) scale(1.0); }
  100% { opacity: 0; transform: rotate(360deg) scale(1.1); }
}

@keyframes intro-anim-cloudless {
  0%   { opacity: 0; transform: scaleX(0.5); }
  15%  { opacity: 1; transform: scaleX(1.0); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: scaleX(1.2); }
}

/* ── CSS LOCK ICON ───────────────────────────────────────── */
/* Pure CSS padlock — replaces 🔒 emoji (Rule 5 compliance) */

.lock-icon-css {
  display:      inline-block;
  position:     relative;
  width:        12px;
  height:       12px;
  flex-shrink:  0;
}

.lock-icon-css::before {
  content:       '';
  position:      absolute;
  top:           0;
  left:          1px;
  width:         10px;
  height:        7px;
  border:        2px solid currentColor;
  border-radius: var(--radius-full);
  border-bottom: none;
}

.lock-icon-css::after {
  content:         '';
  position:        absolute;
  bottom:          0;
  left:            0;
  width:           12px;
  height:          8px;
  background:      currentColor;
  border-radius:   2px;
}

/* ── FLOOR PICKER MODAL ──────────────────────────────────── */

.floor-picker-modal {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.floor-picker-stone {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  font-family:   var(--font-display);
  font-size:     var(--text-xs);
  font-weight:   var(--weight-bold);
  color:         var(--accent);
  letter-spacing: 0.06em;
  padding:       var(--space-2) var(--space-3);
  background:    rgba(200,184,112,0.08);
  border:        1px solid rgba(200,184,112,0.25);
  border-radius: var(--radius-full);
}

.floor-picker-stone--infinite {
  color:      #88ffcc;
  background: rgba(68,204,136,0.08);
  border-color: rgba(68,204,136,0.25);
}

.floor-picker-hint {
  font-size:  var(--text-xs);
  color:      var(--text-secondary);
  font-style: italic;
}

.floor-picker-grid {
  display:               grid;
  grid-template-columns: repeat(7, 1fr);
  gap:                   var(--space-2);
  max-height:            52vh;
  overflow-y:            auto;
  -webkit-overflow-scrolling: touch;
  padding:               2px;
}

.floor-bubble {
  aspect-ratio:    1;
  border-radius:   var(--radius-full);
  background:      var(--bg-inset);
  border:          1.5px solid var(--border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-display);
  font-size:       10px;
  font-weight:     var(--weight-bold);
  color:           var(--text-primary);
  cursor:          pointer;
  transition:      transform 0.12s ease, background 0.12s ease;
  user-select:     none;
}

.floor-bubble:active {
  transform: scale(0.88);
  background: var(--bg-header);
}

/* Boss floor bubble — subtle ring accent */
.floor-bubble--boss {
  border-color: var(--accent);
  color:        var(--accent);
}

/* Current floor — filled accent */
.floor-bubble--current {
  background:   var(--accent);
  border-color: var(--accent);
  color:        var(--bg-base);
  transform:    scale(1.08);
  box-shadow:   0 0 10px rgba(200,184,112,0.4);
}