:root {
  --dark: #0A0E16;
  --darker: #060912;
  --panel: #0F1420;
  --panel-2: #151B2A;
  --border: #1F2840;
  --gold: #C89B3C;
  --gold-light: #F0E6D2;
  --gold-dark: #786428;
  --text: #E8EAF0;
  --text-dim: #8B95B0;
  --text-faint: #4A5274;
  --danger: #C04040;
  --blue: #2A6FA0;
  --red:  #A03A3A;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: 'Inter', system-ui, sans-serif;
             background: var(--dark); color: var(--text); min-height: 100vh; }
body { background:
        radial-gradient(at 25% 0%, rgba(60,80,140,0.10), transparent 50%),
        radial-gradient(at 90% 80%, rgba(140,90,40,0.08), transparent 50%),
        var(--dark);
       background-attachment: fixed; }

a { color: var(--gold-light); text-decoration: none; }
a:hover { color: var(--gold); }
button { font-family: inherit; cursor: pointer; }

.cinzel { font-family: 'Cinzel', 'Times New Roman', serif; letter-spacing: 2px; }

.shell { max-width: 1200px; margin: 0 auto; padding: 32px 24px; }

/* ─── Header ─── */
.topbar { display: flex; justify-content: space-between; align-items: center;
          padding: 20px 28px; border-bottom: 1px solid var(--border);
          background: rgba(10,14,22,0.6); backdrop-filter: blur(8px); }
.topbar .brand { font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.5rem;
                 color: var(--gold-light); letter-spacing: 4px; }
.topbar .links { display: flex; gap: 18px; align-items: center; }
.topbar .me { display: flex; gap: 12px; align-items: center; color: var(--text-dim); font-size: 0.9rem; }
.topbar .me img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }

/* ─── Buttons / inputs ─── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; font-weight: 700; font-size: 0.9rem;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); transition: all 0.15s;
}
.btn:hover { background: var(--panel-2); border-color: var(--gold-dark); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--dark); border: none; font-family: 'Cinzel', serif; font-weight: 900;
  text-transform: uppercase; letter-spacing: 2px;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(200,155,60,0.3); }
.btn-danger { background: rgba(192,64,64,0.15); border-color: rgba(192,64,64,0.4); color: #FF8080; }
.btn-danger:hover { background: rgba(192,64,64,0.25); }

.input, select.input, textarea.input {
  width: 100%; padding: 12px 14px; font-size: 0.95rem;
  background: var(--darker); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; outline: none;
  font-family: inherit;
}
.input:focus { border-color: var(--gold-dark); }
.input::placeholder { color: var(--text-faint); }
label { display: block; font-size: 0.78rem; color: var(--text-dim);
        text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }

/* ─── Cards ─── */
.card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 24px; }
.card h2 { margin: 0 0 16px; font-family: 'Cinzel', serif; font-size: 1.1rem;
           color: var(--gold-light); letter-spacing: 3px; text-transform: uppercase; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .grid-2 { grid-template-columns: 1fr; } }

/* ─── Toast (feedback) ─── */
#toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
         background: var(--panel-2); color: var(--text);
         padding: 14px 22px; border-radius: 6px; border: 1px solid var(--border);
         box-shadow: 0 12px 40px rgba(0,0,0,0.5); z-index: 9999;
         opacity: 0; transition: opacity 0.25s; pointer-events: none; max-width: 90vw; }
#toast.show { opacity: 1; }
#toast.error { border-color: var(--danger); color: #FFCCCC; }
#toast.ok    { border-color: var(--gold-dark); color: var(--gold-light); }

/* ─── Login / register ─── */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 30px; }
.auth-card { width: 100%; max-width: 420px; }
.auth-card h1 { font-family: 'Cinzel', serif; font-weight: 900; font-size: 2.2rem;
                text-align: center; color: var(--gold-light); letter-spacing: 6px; margin: 0 0 8px; }
.auth-card .sub { text-align: center; color: var(--text-dim); font-size: 0.85rem; margin-bottom: 28px; letter-spacing: 2px; text-transform: uppercase; }
.auth-card .tabs { display: flex; gap: 0; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.auth-card .tabs button { flex: 1; padding: 12px; background: transparent; border: none; color: var(--text-dim);
                           font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 2px;
                           text-transform: uppercase; border-bottom: 2px solid transparent; }
.auth-card .tabs button.active { color: var(--gold-light); border-bottom-color: var(--gold); }
.auth-card .field { margin-bottom: 14px; }
.auth-card .btn-primary { width: 100%; margin-top: 8px; padding: 14px; }

/* ─── App dashboard ─── */
.dash-grid { display: grid; grid-template-columns: 380px 1fr; gap: 28px; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }

.profile-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.profile-avatar { width: 130px; height: 130px; border-radius: 50%; object-fit: cover;
                  border: 3px solid var(--gold-dark); background: var(--panel-2); }
.profile-avatar.placeholder { display: grid; place-items: center; font-family: 'Cinzel', serif; font-size: 3rem;
                              color: var(--gold-light); }
.profile-name { font-family: 'Cinzel', serif; font-size: 1.4rem; color: var(--gold-light);
                margin-top: 14px; letter-spacing: 2px; }
.profile-title { font-family: 'Cinzel', serif; font-style: italic; font-size: 0.9rem;
                 color: var(--gold); margin-top: 4px; letter-spacing: 1px;
                 max-width: 280px; text-align: center; }
.profile-title:empty { display: none; }
.profile-role { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px;
                color: var(--gold); margin-top: 4px; }
.profile-rank { margin-top: 8px; font-size: 0.95rem; }
.profile-riot { color: var(--text-dim); font-size: 0.85rem; margin-top: 6px; }

.profile-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }

/* ─── Splash arts ─── */
.splash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
               gap: 12px; margin-top: 14px; }
.splash-tile { position: relative; aspect-ratio: 3/4; border-radius: 6px; overflow: hidden;
               background: var(--panel-2); border: 2px solid var(--border); cursor: pointer; }
.splash-tile.selected { border-color: var(--gold); box-shadow: 0 0 14px rgba(200,155,60,0.4); }
.splash-tile img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.splash-tile .remove { position: absolute; top: 6px; right: 6px;
                       width: 28px; height: 28px; border-radius: 50%; border: none;
                       background: rgba(0,0,0,0.7); color: #fff; font-size: 1rem; cursor: pointer; }
.splash-tile .remove:hover { background: var(--danger); }
.splash-tile.add { display: grid; place-items: center; color: var(--text-dim);
                   border-style: dashed; font-size: 2.5rem; }
.splash-tile.add:hover { color: var(--gold-light); border-color: var(--gold-dark); }

/* ─── Carousel ─── */
.carousel { position: relative; margin: 14px auto 0; max-width: 340px;
            overflow: hidden; border-radius: 8px; }
.carousel-track {
  display: flex; gap: 0; padding: 0; margin: 0;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); will-change: transform;
}

.carousel-slide {
  position: relative; flex: 0 0 100%; aspect-ratio: 3/4;
  border-radius: 8px; overflow: hidden;
  background: var(--panel-2); border: 2px solid var(--border);
  cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
}
.carousel-slide:hover { border-color: var(--gold-dark); }
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.carousel-slide .remove {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.75); color: #fff; font-size: 1rem; cursor: pointer;
  display: grid; place-items: center; transition: background 0.15s;
}
.carousel-slide .remove:hover { background: var(--danger); }
.carousel-slide.add { display: grid; place-items: center;
                      color: var(--text-dim); border-style: dashed; font-size: 2.8rem; }
.carousel-slide.add:hover { color: var(--gold-light); border-color: var(--gold-dark); }

.carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 60px; border-radius: 6px; border: 1px solid var(--border);
  background: rgba(15,20,32,0.85); color: var(--gold-light);
  font-family: 'Cinzel', serif; font-size: 1.6rem; cursor: pointer;
  display: grid; place-items: center; z-index: 5;
  transition: background 0.15s, opacity 0.15s; backdrop-filter: blur(4px);
}
.carousel-nav:hover { background: var(--panel-2); }
.carousel-nav:disabled { opacity: 0.25; cursor: default; }
.carousel-nav.prev { left: 6px; }
.carousel-nav.next { right: 6px; }

.carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; min-height: 9px; }
.carousel-dots .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--border);
  transition: background 0.2s, transform 0.2s; cursor: pointer; border: none; padding: 0;
}
.carousel-dots .dot.active { background: var(--gold); transform: scale(1.3); }

.carousel-add-row { display: flex; justify-content: center; margin-top: 14px; }
.carousel-add-row .btn { padding: 10px 20px; font-size: 0.85rem; letter-spacing: 1px; }

.carousel-empty {
  text-align: center; padding: 40px 16px; margin: 14px auto 0; max-width: 340px;
  color: var(--text-dim); font-size: 0.9rem; font-style: italic;
  border: 1px dashed var(--border); border-radius: 8px;
}

@media (max-width: 640px) {
  .carousel-nav { width: 34px; height: 50px; font-size: 1.3rem; }
}

/* ─── Rooms list ─── */
.room-row { display: flex; justify-content: space-between; align-items: center;
            padding: 14px 16px; border-bottom: 1px solid var(--border); }
.room-row:last-child { border-bottom: none; }
.room-row .meta { display: flex; flex-direction: column; }
.room-row .name { font-weight: 700; }
.room-row .info { font-size: 0.8rem; color: var(--text-dim); }
.room-status { font-size: 0.7rem; padding: 3px 10px; border-radius: 10px; letter-spacing: 1px;
               text-transform: uppercase; background: var(--panel-2); }
.room-status.launched { background: rgba(200,155,60,0.15); color: var(--gold-light); }

/* ─── Room page ─── */
.room-shell { max-width: 1200px; margin: 0 auto; padding: 28px 24px; }
.room-header { display: flex; justify-content: space-between; align-items: flex-end;
               border-bottom: 1px solid var(--border); padding-bottom: 18px; margin-bottom: 24px; }
.room-header h1 { font-family: 'Cinzel', serif; font-size: 1.6rem; letter-spacing: 4px;
                  color: var(--gold-light); margin: 0; }
.room-header .meta { color: var(--text-dim); font-size: 0.85rem; }

.slots-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin-bottom: 24px; }
@media (max-width: 720px) { .slots-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (max-width: 480px) { .slots-grid { grid-template-columns: repeat(2, 1fr); } }

.slot { position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px 0; }

.slot .avatar {
  position: relative;
  width: 100%; max-width: 170px; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: var(--panel-2); border: 3px solid var(--border);
  display: grid; place-items: center;
  box-shadow: 0 6px 22px rgba(0,0,0,0.45);
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s;
}
.slot .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot.is-self .avatar { border-color: var(--gold);
                         box-shadow: 0 0 22px rgba(200,155,60,0.45), 0 6px 22px rgba(0,0,0,0.45); }

.slot .avatar.ph       { background: radial-gradient(circle at 50% 35%, #2A1A1A, #1A0D0D);
                         border-color: rgba(160,60,60,0.55); border-style: dashed; }
.slot .avatar.ph span  { font-family: 'Cinzel', serif; font-size: 3rem; font-weight: 900;
                         color: #FFA0A0; opacity: 0.7; }
.slot .avatar.fallback { background: radial-gradient(circle at 50% 35%, #1A2230, #0D1117); }
.slot .avatar.fallback span { font-family: 'Cinzel', serif; font-size: 3rem; font-weight: 900;
                              color: var(--gold-light); }
.slot .avatar.empty    { background: transparent; border-style: dashed; border-color: var(--border); }
.slot .avatar.empty span { font-family: 'Cinzel', serif; font-size: 3rem; font-weight: 900;
                            color: var(--text-faint); opacity: 0.4; }

/* Badge épinglé sur le bord inférieur de la pastille */
.slot .badge { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
               background: rgba(10,14,22,0.95); color: var(--gold-light);
               font-size: 0.62rem; padding: 3px 10px; border-radius: 12px;
               text-transform: uppercase; letter-spacing: 1px; white-space: nowrap;
               border: 1px solid rgba(200,155,60,0.45); z-index: 2; }
.slot .badge.ph   { background: rgba(40,15,15,0.95); color: #FFCCCC;
                    border-color: rgba(160,60,60,0.55); }
.slot .badge.rand { background: rgba(40,30,15,0.95);
                    border-color: rgba(200,155,60,0.7); }

.slot .info  { text-align: center; margin-top: 16px; width: 100%; padding: 0 4px; }
.slot .nm    { display: block; font-weight: 700; font-size: 1rem; color: var(--text);
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .rk    { display: block; font-size: 0.8rem; color: var(--text-dim); margin-top: 4px; }
.slot.empty .nm { color: var(--text-faint); font-style: italic; font-weight: 400; }

.slot .remove { position: absolute; top: 0; right: 0;
                width: 30px; height: 30px; border-radius: 50%;
                background: rgba(15,20,32,0.92); color: var(--text);
                border: 2px solid var(--border);
                font-size: 0.85rem; cursor: pointer; display: grid; place-items: center;
                z-index: 5; transition: background 0.15s, border-color 0.15s; }
.slot .remove:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

.splash-tile.random { display: grid; place-items: center; gap: 6px;
                      border-style: dashed; color: var(--gold-light); }
.splash-tile.random .rand-icon  { font-size: 3rem; }
.splash-tile.random .rand-label { font-family: 'Cinzel', serif; font-size: 0.85rem;
                                  letter-spacing: 2px; text-transform: uppercase; }
.splash-tile.random:hover { border-color: var(--gold); color: var(--gold); }

.room-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.room-aside { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 800px) { .room-aside { grid-template-columns: 1fr; } }

.hint { color: var(--text-dim); font-size: 0.85rem; margin-top: 8px; }

/* ─── Modal ─── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 1000;
                 display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal { background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
         padding: 26px; width: 100%; max-width: 460px; max-height: 90vh; overflow: auto; }
.modal h3 { margin: 0 0 18px; font-family: 'Cinzel', serif; color: var(--gold-light); letter-spacing: 2px; }
.modal .row { display: flex; gap: 8px; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ─── Splash preview modal ─── */
.preview-img { width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: center top;
               border-radius: 6px; border: 2px solid var(--gold-dark); }
.preview-hint { color: var(--text-dim); font-size: 0.8rem; margin-top: 10px; text-align: center; }

/* ─── Spinner ─── */
.spinner { width: 18px; height: 18px; border-radius: 50%;
           border: 2px solid var(--border); border-top-color: var(--gold-light);
           display: inline-block; animation: spin 0.9s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }