/* =====================================================
   ARCANE ROOMS 50 — CSS
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Crimson+Pro:ital,wght@0,300;0,400;1,300;1,400&display=swap');

:root {
  --ar-violet:  #581c87;
  --ar-gold:    #fbbf24;
  --ar-blue:    #1e3a5f;
  --ar-emerald: #059669;
  --ar-black:   #0c0a09;
  --ar-ink:     #1c1917;
  --ar-glow:    rgba(251,191,36,0.4);
}

/* ── Wrapper ── */
.arcane-rooms-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  background: var(--ar-black);
  font-family: 'Crimson Pro', serif;
  cursor: grab;
  user-select: none;
}
.arcane-rooms-wrapper:active { cursor: grabbing; }
.arcane-canvas { display:block; width:100%; height:100%; touch-action:none; }

/* ── HUD ── */
.ar-hud {
  position: absolute; top:16px; left:50%; transform:translateX(-50%);
  text-align:center; pointer-events:none; z-index:10;
}
.ar-hud-room {
  font-family:'Cinzel Decorative',cursive; font-size:14px; color:var(--ar-gold);
  text-shadow:0 0 16px rgba(251,191,36,0.9),0 0 32px rgba(251,191,36,0.4);
  letter-spacing:0.14em; transition: opacity 0.4s;
}
.ar-hud-hint { font-size:10px; color:rgba(251,191,36,0.45); margin-top:4px; letter-spacing:0.07em; }

/* ── Room navigation pills ── */
.ar-room-nav {
  position:absolute; bottom:56px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; z-index:10;
}
.ar-nav-btn {
  background:rgba(28,25,23,0.7); border:1px solid rgba(251,191,36,0.25);
  border-radius:20px; padding:6px 14px; font-size:18px; cursor:pointer;
  color:var(--ar-gold); backdrop-filter:blur(6px);
  transition:background 0.2s, border-color 0.2s, transform 0.15s;
}
.ar-nav-btn:hover  { background:rgba(88,28,135,0.7); border-color:var(--ar-gold); }
.ar-nav-btn.active { background:rgba(88,28,135,0.95); border-color:var(--ar-gold); transform:scale(1.08); box-shadow:0 0 14px var(--ar-glow); }

/* ── Portal arrows ── */
.ar-portal {
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  background:rgba(88,28,135,0.6); border:1px solid rgba(251,191,36,0.35);
  color:var(--ar-gold); font-size:22px; line-height:34px; text-align:center;
  cursor:pointer; z-index:10; backdrop-filter:blur(4px);
  transition:background 0.2s, box-shadow 0.2s;
}
.ar-portal:hover   { background:rgba(88,28,135,0.95); box-shadow:0 0 18px var(--ar-glow); }
.ar-portal-left    { left:12px; }
.ar-portal-right   { right:12px; }

/* ── Collect button ── */
.ar-collect-btn {
  position:absolute; bottom:16px; right:16px;
  display:flex; align-items:center; gap:6px;
  background:rgba(88,28,135,0.7); border:1px solid var(--ar-gold);
  border-radius:20px; padding:6px 14px; color:var(--ar-gold); font-size:14px;
  cursor:pointer; z-index:10; backdrop-filter:blur(6px);
  transition:background 0.2s, box-shadow 0.2s;
}
.ar-collect-btn:hover { background:rgba(88,28,135,0.95); box-shadow:0 0 16px var(--ar-glow); }
.ar-collect-count {
  font-family:'Cinzel Decorative',cursive; font-size:11px;
  background:var(--ar-gold); color:var(--ar-black);
  border-radius:50%; width:18px; height:18px;
  display:flex; align-items:center; justify-content:center; font-weight:700;
}

/* ── Transition overlay ── */
.ar-transition-overlay {
  position:absolute; inset:0; z-index:50;
  background:radial-gradient(circle at center, rgba(88,28,135,0.9) 0%, rgba(12,10,9,0.95) 100%);
  pointer-events:none; opacity:0; transition:opacity 0.5s;
}
.ar-transition-overlay.active { opacity:1; pointer-events:all; }

/* ── Lightbox ── */
.ar-lightbox {
  position:absolute; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
}
.ar-lb-backdrop {
  position:absolute; inset:0;
  background:rgba(12,10,9,0.88); backdrop-filter:blur(5px);
}
.ar-lb-card {
  position:relative; z-index:1;
  background:linear-gradient(160deg,#2d1b4e 0%,#1c1917 60%,#0d2e1a 100%);
  border:1px solid rgba(251,191,36,0.3); border-radius:10px;
  padding:32px 28px 24px; max-width:460px; width:calc(100% - 32px);
  box-shadow:0 0 60px rgba(88,28,135,0.5);
  animation:arCardIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes arCardIn { from{transform:scale(0.82);opacity:0} to{transform:scale(1);opacity:1} }

.ar-lb-symbol { text-align:center; font-size:48px; margin-bottom:12px; filter:drop-shadow(0 0 14px var(--ar-gold)); }
.ar-lb-imgwrap {
  width:100%; aspect-ratio:4/3; overflow:hidden; border-radius:4px;
  border:1px solid rgba(251,191,36,0.2); margin-bottom:16px; background:rgba(0,0,0,0.4);
}
.ar-lb-img { width:100%; height:100%; object-fit:cover; display:block; }
.ar-lb-title { font-family:'Cinzel Decorative',cursive; color:var(--ar-gold); font-size:18px; margin:0 0 8px; text-align:center; }
.ar-lb-desc  { color:rgba(251,191,36,0.65); font-size:14px; line-height:1.6; text-align:center; margin:0 0 14px; font-style:italic; }

.ar-lb-secret-wrap { text-align:center; margin-bottom:10px; }
.ar-lb-secret-btn, .ar-lb-collect-btn, .ar-col-export {
  background:transparent; border:1px solid var(--ar-gold); color:var(--ar-gold);
  font-family:'Crimson Pro',serif; font-size:14px; padding:7px 20px;
  border-radius:20px; cursor:pointer; transition:background 0.2s, box-shadow 0.2s; letter-spacing:0.04em;
}
.ar-lb-secret-btn:hover,.ar-lb-collect-btn:hover,.ar-col-export:hover {
  background:rgba(251,191,36,0.15); box-shadow:0 0 12px var(--ar-glow);
}
.ar-lb-collect-btn { display:block; margin:0 auto; }
.ar-lb-secret {
  margin-top:10px; color:var(--ar-emerald); font-style:italic; font-size:13px;
  line-height:1.5; padding:8px 12px; border-left:2px solid var(--ar-emerald);
  text-align:left; animation:arFadeIn 0.4s ease;
}
@keyframes arFadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.ar-lb-close {
  position:absolute; top:10px; right:12px; background:none; border:none;
  color:rgba(251,191,36,0.45); font-size:18px; cursor:pointer; transition:color 0.2s;
}
.ar-lb-close:hover { color:var(--ar-gold); }

/* ── Collection modal ── */
.ar-collection {
  position:absolute; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
}
.ar-col-backdrop {
  position:absolute; inset:0;
  background:rgba(12,10,9,0.92); backdrop-filter:blur(6px);
}
.ar-col-card {
  position:relative; z-index:1;
  background:linear-gradient(160deg,#1a0d2e 0%,#1c1917 100%);
  border:1px solid rgba(251,191,36,0.3); border-radius:10px;
  padding:28px; max-width:560px; width:calc(100% - 32px);
  max-height:calc(100% - 40px); overflow-y:auto;
  box-shadow:0 0 80px rgba(88,28,135,0.5);
  animation:arCardIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.ar-col-card h2 { font-family:'Cinzel Decorative',cursive; color:var(--ar-gold); font-size:15px; text-align:center; margin:0 0 18px; }
.ar-col-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-bottom:18px; }
.ar-col-item { background:rgba(88,28,135,0.2); border:1px solid rgba(251,191,36,0.18); border-radius:6px; padding:12px 8px; text-align:center; }
.ar-col-item-icon  { font-size:28px; margin-bottom:4px; }
.ar-col-item-name  { font-family:'Cinzel Decorative',cursive; font-size:9px; color:var(--ar-gold); display:block; }
.ar-col-item-room  { font-size:10px; color:rgba(251,191,36,0.4); display:block; margin-top:2px; }
.ar-col-close {
  position:absolute; top:10px; right:12px; background:none; border:none;
  color:rgba(251,191,36,0.45); font-size:18px; cursor:pointer; transition:color 0.2s;
}
.ar-col-close:hover { color:var(--ar-gold); }
.ar-col-empty { color:rgba(251,191,36,0.38); font-style:italic; text-align:center; padding:20px 0; }

/* Room badge in HUD */
.ar-room-badge {
  display:inline-block; font-size:9px; letter-spacing:0.1em;
  background:rgba(88,28,135,0.5); border:1px solid rgba(251,191,36,0.2);
  border-radius:10px; padding:2px 8px; margin-top:4px; color:rgba(251,191,36,0.6);
}

/* Scrollbar */
.ar-col-card::-webkit-scrollbar { width:4px; }
.ar-col-card::-webkit-scrollbar-track { background:transparent; }
.ar-col-card::-webkit-scrollbar-thumb { background:rgba(251,191,36,0.3); border-radius:2px; }

/* Responsive */
@media(max-width:600px) {
  .ar-hud-room   { font-size:12px; }
  .ar-lb-card    { padding:22px 14px 18px; }
  .ar-lb-title   { font-size:15px; }
  .ar-portal     { display:none; }
}