:root {
  --bg: #17142b;
  --panel: #ffffff;
  --panel2: #f4f2fb;
  --ink: #23213a;
  --muted: #6d6a85;
  --primary: #5b3fd1;
  --primary2: #7c5cff;
  --ok: #1f9d6b;
  --warn: #d9822b;
  --danger: #d0384b;
  --gold: #e0b83a;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(20, 10, 60, .25);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
input { font: inherit; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.center { justify-content: center; }

.btn { border: 0; border-radius: 10px; padding: 9px 14px; background: var(--panel2); color: var(--ink); font-weight: 600; transition: transform .08s, filter .15s; }
.btn:hover { filter: brightness(.96); }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary2)); color: #fff; }
.btn.ok { background: var(--ok); color: #fff; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.gold { background: linear-gradient(135deg, #d49b16, #f2cf5b); color: #3a2a00; }
.btn.big { padding: 13px 20px; font-size: 1.05rem; }
.btn.small { padding: 6px 10px; font-size: .85rem; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }

/* ---------- Connexion ---------- */
#auth { display: grid; place-items: center; padding: 16px; background: radial-gradient(circle at 20% 10%, #7c5cff 0, transparent 45%), radial-gradient(circle at 80% 90%, #ff7ab6 0, transparent 40%), var(--bg); }
.auth-card { width: min(400px, 100%); background: var(--panel); border-radius: 20px; padding: 26px 22px; box-shadow: var(--shadow); }
.logo { font-size: 2rem; font-weight: 800; text-align: center; background: linear-gradient(135deg, var(--primary), #ff5fa2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tagline { text-align: center; color: var(--muted); margin: 6px 0 18px; font-size: .95rem; }
.tabs { display: flex; background: var(--panel2); border-radius: 12px; padding: 4px; margin-bottom: 14px; }
.tabs button { flex: 1; border: 0; background: none; padding: 9px; border-radius: 9px; font-weight: 600; color: var(--muted); }
.tabs button.active { background: #fff; color: var(--primary); box-shadow: 0 2px 6px rgba(0, 0, 0, .08); }
form label { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
form input { display: block; width: 100%; margin-top: 4px; padding: 11px 12px; border: 2px solid #e4e1f0; border-radius: 10px; outline: none; color: var(--ink); }
form input:focus { border-color: var(--primary2); }
#authForm .btn { width: 100%; margin-top: 6px; }
.err { color: var(--danger); min-height: 1.2em; font-size: .9rem; margin: 8px 0 0; text-align: center; }
.status { color: var(--muted); font-size: .8rem; text-align: center; margin: 6px 0 0; }

/* ---------- Création ---------- */
#creator { background: linear-gradient(160deg, #2a2150, #17142b); overflow: auto; }
.creator { max-width: 980px; margin: 0 auto; padding: 16px; display: grid; grid-template-columns: 300px 1fr; grid-template-rows: 1fr auto; gap: 16px; min-height: 100%; }
.creator-preview { background: radial-gradient(circle at 50% 70%, #fff 0, #e8e3ff 70%); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; position: sticky; top: 16px; align-self: start; }
.creator-preview canvas { width: 260px; height: 300px; }
.creator-options { background: var(--panel); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.opt h4 { margin: 0 0 6px; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.sw { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #ddd; }
.sw.sel { box-shadow: 0 0 0 3px var(--primary2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 2px solid #e4e1f0; background: #fff; border-radius: 999px; padding: 6px 12px; font-weight: 600; font-size: .9rem; color: var(--ink); }
.chip.sel { border-color: var(--primary2); background: #f0ebff; color: var(--primary); }
.creator-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; }
@media (max-width: 720px) {
  .creator { grid-template-columns: 1fr; }
  .creator-preview { position: static; }
  .creator-preview canvas { width: 180px; height: 208px; }
  .creator-actions { position: sticky; bottom: 0; background: #17142b; padding: 10px 0; }
}

/* ---------- Jeu ---------- */
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hud-top { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none; }
.hud-card { background: rgba(255, 255, 255, .94); border-radius: var(--radius); padding: 8px 12px; box-shadow: var(--shadow); pointer-events: auto; cursor: pointer; }
.hud-name { font-weight: 800; }
.hud-stats { display: flex; gap: 12px; font-size: .92rem; margin-top: 2px; }
.hud-job { font-size: .78rem; color: var(--muted); }
.hud-room { background: rgba(23, 20, 43, .78); color: #fff; padding: 7px 12px; border-radius: 999px; font-weight: 700; font-size: .9rem; box-shadow: var(--shadow); }
.hud-actions { position: absolute; right: 10px; top: 92px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.hud-actions .btn { box-shadow: var(--shadow); }

.chat { position: absolute; left: 10px; bottom: 82px; width: min(380px, calc(100% - 20px)); display: flex; flex-direction: column; gap: 6px; }
.chat-log { max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding: 6px 8px; border-radius: 12px; background: rgba(23, 20, 43, .5); color: #fff; font-size: .86rem; scrollbar-width: thin; }
.chat-log:empty { display: none; }
.chat-log .sys { color: #ffd98a; }
.chat-log b { color: #b9a8ff; }
.chat-bar { display: flex; gap: 6px; }
.chat-bar input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 0; outline: none; background: rgba(255, 255, 255, .95); box-shadow: var(--shadow); }
.dock { position: absolute; left: 50%; transform: translateX(-50%); bottom: max(10px, env(safe-area-inset-bottom)); display: flex; gap: 6px; background: rgba(255, 255, 255, .95); padding: 6px; border-radius: 18px; box-shadow: var(--shadow); }
.dock button { border: 0; background: none; border-radius: 12px; padding: 6px 10px; font-size: .72rem; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; align-items: center; min-width: 62px; }
.dock button span { font-size: 1.35rem; line-height: 1.2; }
.dock button:hover { background: var(--panel2); color: var(--primary); }
.dock button[data-act="chat"] { display: none; }
@media (max-width: 640px) {
  .chat { bottom: 76px; }
  .chat.collapsed { display: none; }
  .dock button { min-width: 0; padding: 6px 7px; font-size: .66rem; }
  .dock button[data-act="chat"] { display: flex; }
  .chat-log { max-height: 110px; }
  .hud-stats { gap: 8px; font-size: .85rem; }
  .hud-room { font-size: .78rem; }
  .hud-actions { top: 86px; }
}

/* Dialogue PNJ */
.dialog { position: absolute; left: 50%; transform: translateX(-50%); bottom: 86px; width: min(560px, calc(100% - 20px)); background: #fff; border-radius: 18px; padding: 12px; display: flex; gap: 12px; box-shadow: var(--shadow); animation: pop .18s ease-out; z-index: 5; }
.dialog canvas { width: 90px; height: 90px; border-radius: 14px; background: linear-gradient(#e9e4ff, #fff); flex: none; }
.dialog-name { font-weight: 800; color: var(--primary); }
.dialog-text { margin: 4px 0 10px; line-height: 1.35; }
.dialog-opts { display: flex; flex-wrap: wrap; gap: 6px; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, 10px); } }

.decor-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 86px; width: min(640px, calc(100% - 20px)); background: #fff; border-radius: 16px; padding: 10px; box-shadow: var(--shadow); z-index: 5; }
.decor-bar .items { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; }
.decor-bar .it { flex: none; border: 2px solid #e4e1f0; border-radius: 12px; background: #fff; padding: 4px 8px; font-size: .78rem; font-weight: 600; text-align: center; }
.decor-bar .it.sel { border-color: var(--primary2); background: #f0ebff; }
.decor-bar .it canvas { display: block; margin: 0 auto; }

/* Modale */
.modal-wrap { position: fixed; inset: 0; background: rgba(15, 10, 35, .55); display: grid; place-items: center; padding: 16px; z-index: 10; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { background: var(--panel); width: min(760px, 100%); max-height: min(86vh, 900px); border-radius: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; }
.modal header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #eee; }
.modal h2 { margin: 0; font-size: 1.2rem; }
.close { border: 0; background: var(--panel2); width: 34px; height: 34px; border-radius: 50%; font-size: 1rem; }
.modal-body { padding: 14px 18px 18px; overflow-y: auto; }
@media (max-width: 640px) {
  .modal-wrap { padding: 0; place-items: end stretch; }
  .modal { width: 100%; max-height: 92vh; border-radius: 20px 20px 0 0; }
}
.subtabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.card { border: 2px solid #eeebf7; border-radius: 14px; padding: 8px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; background: #fff; }
.card.owned { border-color: #cdeedd; background: #f6fffa; }
.card.equipped { border-color: var(--primary2); background: #f5f1ff; }
.card canvas { background: linear-gradient(#f3f0ff, #fff); border-radius: 10px; }
.card .nm { font-weight: 700; font-size: .9rem; }
.card .meta { font-size: .8rem; color: var(--muted); }
.card .price { font-weight: 800; color: var(--primary); }
.card .btn { width: 100%; }
.big-icon { font-size: 2.6rem; height: 90px; display: grid; place-items: center; width: 100%; background: linear-gradient(#f3f0ff, #fff); border-radius: 10px; }
.note { background: var(--panel2); border-radius: 12px; padding: 10px 12px; font-size: .9rem; color: var(--muted); margin-bottom: 12px; }
.list { display: flex; flex-direction: column; gap: 8px; }
.li { display: flex; align-items: center; gap: 10px; border: 2px solid #eeebf7; border-radius: 14px; padding: 8px 10px; }
.li .grow { flex: 1; min-width: 0; }
.li .t { font-weight: 700; }
.li .s { font-size: .82rem; color: var(--muted); }
.progress { height: 8px; border-radius: 99px; background: #eee; overflow: hidden; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #ff5fa2); }
.profile { display: grid; grid-template-columns: 180px 1fr; gap: 16px; }
.profile canvas { background: radial-gradient(circle at 50% 70%, #fff, #e8e3ff); border-radius: 16px; width: 180px; height: 210px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 12px; }
.stat { background: var(--panel2); border-radius: 12px; padding: 8px 10px; }
.stat small { display: block; color: var(--muted); font-size: .75rem; }
.stat b { font-size: 1.05rem; }
@media (max-width: 560px) { .profile { grid-template-columns: 1fr; justify-items: center; } }

/* Mini-jeux */
.mg { text-align: center; }
.mg .order { display: flex; justify-content: center; gap: 10px; font-size: 2.2rem; margin: 10px 0; min-height: 3rem; }
.mg .order span { background: var(--panel2); border-radius: 12px; padding: 4px 10px; transition: opacity .2s; }
.mg .order span.done { opacity: .25; }
.mg .pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 320px; margin: 10px auto; }
.mg .pad button { font-size: 2rem; padding: 10px; border-radius: 14px; border: 2px solid #eeebf7; background: #fff; }
.mg .pad button:active { transform: scale(.94); }
.mg .timer { height: 10px; background: #eee; border-radius: 99px; overflow: hidden; margin: 8px 0; }
.mg .timer i { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), var(--gold)); transition: width .1s linear; }
.mg .tap { font-size: 3rem; width: 150px; height: 150px; border-radius: 50%; border: 0; background: linear-gradient(135deg, #ff7a59, #ffb347); color: #fff; box-shadow: var(--shadow); margin: 12px auto; display: block; touch-action: manipulation; user-select: none; }
.mg .tap:active { transform: scale(.93); }

.map-wrap canvas { width: 100%; height: auto; border-radius: 12px; display: block; }

/* Formulaires, serveurs RP */
.input { display: block; width: 100%; min-width: 0; padding: 10px 12px; border: 2px solid #e4e1f0; border-radius: 10px; outline: none; color: var(--ink); background: #fff; font: inherit; resize: vertical; }
.input:focus { border-color: var(--primary2); }
.input.small { width: auto; padding: 5px 8px; font-size: .85rem; }
.form { display: flex; flex-direction: column; gap: 10px; }
.form label, .lbl { font-size: .85rem; font-weight: 600; color: var(--muted); display: block; }
.form label .input { margin-top: 4px; }
.inline { display: inline-flex !important; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--muted); margin: 6px 0; }
.pill { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--panel2); color: var(--muted); vertical-align: middle; margin-left: 4px; }
.pill.gold { background: #fff3cf; color: #8a6400; }
.role-tag { display: inline-block; color: #fff; font-size: .75rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; margin-bottom: 8px; }
.li .role-tag { margin: 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #c9c6d6; flex: none; }
.dot.on { background: #2bc48a; box-shadow: 0 0 0 3px rgba(43, 196, 138, .2); }
.empty { text-align: center; color: var(--muted); padding: 22px 10px; border: 2px dashed #e4e1f0; border-radius: 14px; }
.rules { white-space: pre-wrap; background: var(--panel2); border-radius: 12px; padding: 10px 12px; font-size: .9rem; margin-bottom: 12px; }
.code { font-family: ui-monospace, Consolas, monospace; letter-spacing: .15em; color: var(--primary); font-size: 1.05rem; }
.code-input { font-family: ui-monospace, Consolas, monospace; letter-spacing: .3em; font-size: 1.3rem; text-transform: uppercase; text-align: center; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card.tpl { cursor: pointer; font: inherit; color: inherit; }
.danger-zone { margin-top: 18px; border: 2px solid #f3c4ca; background: #fff6f7; border-radius: 14px; padding: 12px; }
.danger-zone p { margin: 4px 0 10px; font-size: .88rem; color: var(--muted); }
.perm-list { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; }
.perm { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; font-weight: 600; color: var(--ink); }
.perm.locked { opacity: .6; }
.role-row { align-items: flex-start; }
.role-row input[type=color] { width: 38px; height: 34px; border: 0; padding: 0; background: none; cursor: pointer; }
.mod-box { margin-top: 4px; }
.item-img { max-width: 80%; max-height: 80%; object-fit: contain; image-rendering: auto; }
.chat-log .me { color: #ffc6f0; font-style: italic; }
.build-bar .hint { font-size: .78rem; color: var(--muted); margin-top: 4px; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.chips.scroll .chip { flex: none; padding: 5px 10px; font-size: .82rem; }
.announce { position: absolute; top: 74px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100% - 20px)); background: linear-gradient(135deg, #5b3fd1, #ff5fa2); color: #fff; border-radius: 16px; padding: 10px 16px; box-shadow: var(--shadow); z-index: 8; text-align: center; font-weight: 700; cursor: pointer; animation: pop .25s ease-out; }
.announce small { display: block; opacity: .85; font-size: .75rem; font-weight: 600; }

/* Toasts */
.toasts { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 20; pointer-events: none; width: min(420px, calc(100% - 20px)); }
.toast { background: #23213a; color: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); font-weight: 600; text-align: center; animation: pop2 .2s ease-out; }
.toast.ok { background: var(--ok); }
.toast.warn { background: var(--warn); }
@keyframes pop2 { from { opacity: 0; transform: translateY(-8px); } }

/* Premium (rubis) */
.hud-rubis { cursor: pointer; background: linear-gradient(135deg, #ffe3f1, #f1e4ff); border-radius: 99px; padding: 0 7px; }
.dock-premium span { filter: drop-shadow(0 0 4px rgba(194, 64, 126, .6)); }
.dock-premium { color: #b0306e !important; font-weight: 700; }
.btn.prem { background: linear-gradient(135deg, #c2407e, #7c5cff); color: #fff; }
.prem-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.prem-bal { background: linear-gradient(135deg, #2a1640, #5a2a6e); color: #fff; border-radius: 14px; padding: 10px 16px; }
.prem-bal small { display: block; opacity: .75; font-size: .75rem; }
.prem-bal b { font-size: 1.4rem; }
.prem-card canvas { background: linear-gradient(#2a1640, #51306c) !important; }
.prem-pack { position: relative; background: linear-gradient(#fff, #fbf4ff); }
.prem-pack .pill { position: absolute; top: 8px; right: 8px; }
.warn-note { background: #fff6d6 !important; border-color: #f0d47a !important; color: #6b5200 !important; }

/* Personnalisation */
.body-editor { display: flex; flex-direction: column; gap: 14px; }
.sw { display: inline-grid; place-items: center; cursor: pointer; padding: 0; font-size: .9rem; }
.sw-pick { position: relative; background: conic-gradient(#ff5f5f, #ffd85f, #6be36b, #5fd0ff, #8a6bff, #ff5fd2, #ff5f5f); overflow: hidden; }
.sw-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: 0; padding: 0; }
.sw-none { background: #fff; color: #999; font-weight: 700; }
.tab-chip { font-size: .95rem; padding: 7px 14px; }
.ward-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; background: radial-gradient(circle at 50% 70%, #fff 0, #ece7ff 75%); border-radius: 16px; padding: 10px; }
.ward-preview canvas:last-child { border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #e6e0ff; }
.creator-preview { background: radial-gradient(circle at 50% 75%, #fff 0, #efeaff 55%, #d9d0ff 100%); }

/* Connexion Google et liens légaux */
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; margin: 14px 0 10px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: #e4e1f0; }
.btn.google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #fff; color: #222; border: 2px solid #e4e1f0; text-decoration: none; }
.btn.google:hover { border-color: #c9c2e8; }
.legal-links { text-align: center; font-size: .78rem; margin: 10px 0 0; }
.legal-links a { color: var(--muted); }

/* ==================== Charte graphique Cité Bulle (d'après le logo) ====================
   ciel bleu, jaune-orangé « Bulle », contours sombres façon cartoon, boutons en relief */
:root {
  --bg: #2f8fe0; --panel: #ffffff; --panel2: #eef5fd; --ink: #1d2433; --muted: #5a6880;
  --primary: #1f7fd6; --primary2: #3fa7ff; --accent: #ffc21a; --accent2: #ff9f0a; --leaf: #5cbf3a;
  --ok: #3aaa35; --warn: #ff9f0a; --danger: #e8423a; --gold: #ffc21a; --line: #1d2433;
  --radius: 16px; --shadow: 0 5px 0 rgba(29, 36, 51, .22), 0 14px 30px rgba(20, 50, 100, .22);
  --font: "Baloo 2", "Fredoka", "Nunito", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
}
html, body { font-family: var(--font); }
input, textarea, select { font-family: inherit; }
::selection { background: var(--accent); color: var(--ink); }

/* boutons en relief */
.btn { border: 3px solid var(--line); border-radius: 14px; box-shadow: 0 4px 0 var(--line); font-weight: 800; padding: 8px 14px; transition: transform .08s, box-shadow .08s, filter .15s; background: #fff; }
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line); }
.btn.small { border-width: 2px; box-shadow: 0 3px 0 var(--line); padding: 5px 10px; border-radius: 11px; }
.btn.small:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.btn.big { padding: 12px 20px; font-size: 1.1rem; }
.btn.primary { background: linear-gradient(#5ec0ff, #1f7fd6); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.btn.ok { background: linear-gradient(#7cd85a, #3aaa35); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .22); }
.btn.danger { background: linear-gradient(#ff7a6e, #e8423a); color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .22); }
.btn.gold, .btn.prem { background: linear-gradient(#ffe066, #ffb20f); color: #3a2400; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.btn:disabled { opacity: .55; box-shadow: 0 2px 0 var(--line); }

/* écran de connexion : ciel animé */
#auth { background: linear-gradient(#8fd6ff 0%, #4fb0f2 55%, #2f8fe0 100%); overflow: hidden; }
#auth::before, #auth::after { content: ''; position: absolute; width: 520px; height: 160px; background: radial-gradient(circle at 25% 60%, #fff 0 38px, transparent 39px), radial-gradient(circle at 45% 40%, #fff 0 56px, transparent 57px), radial-gradient(circle at 68% 58%, #fff 0 44px, transparent 45px), radial-gradient(circle at 50% 75%, #fff 0 40px, transparent 41px); opacity: .9; animation: nuages 60s linear infinite; pointer-events: none; }
#auth::before { top: 6%; left: -540px; }
#auth::after { bottom: 8%; left: -540px; animation-duration: 85s; animation-delay: -40s; transform: scale(.7); }
@keyframes nuages { to { left: 110%; } }
.auth-card { position: relative; z-index: 1; border: 4px solid var(--line); border-radius: 28px; box-shadow: 0 8px 0 var(--line), 0 24px 60px rgba(10, 40, 90, .35); padding: 18px 22px 22px; }
.logo { margin: -6px 0 2px; }
.logo-img { display: block; width: 100%; max-width: 340px; margin: 0 auto; filter: drop-shadow(0 6px 0 rgba(29, 36, 51, .15)); animation: flotte 4s ease-in-out infinite; }
@keyframes flotte { 50% { transform: translateY(-5px) rotate(-.6deg); } }
.tagline { color: var(--muted); font-weight: 600; }
.tabs { background: var(--panel2); border: 3px solid var(--line); border-radius: 16px; }
.tabs button { font-weight: 800; }
.tabs button.active { background: var(--accent); color: var(--ink); box-shadow: 0 2px 0 var(--line); }
form input, .input { border: 3px solid #cfdcec; border-radius: 12px; }
form input:focus, .input:focus { border-color: var(--primary2); box-shadow: 0 0 0 3px rgba(63, 167, 255, .25); }
.auth-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* création du personnage */
#creator { background: linear-gradient(#8fd6ff, #2f8fe0); }
.creator-preview, .creator-options { border: 4px solid var(--line); box-shadow: 0 6px 0 var(--line); }
.creator-preview { background: radial-gradient(circle at 50% 78%, #fff 0, #dff1ff 55%, #b8e2ff 100%); }
.creator-actions { background: transparent; }
@media (max-width: 720px) { .creator-actions { background: #2f8fe0; } }
.opt h4 { color: var(--primary); font-weight: 800; }
.chip { border: 2px solid #cfdcec; font-weight: 700; transition: transform .1s; }
.chip:hover { transform: translateY(-1px); }
.chip.sel { border-color: var(--line); background: #fff1b8; color: var(--ink); box-shadow: 0 2px 0 var(--line); }
.sw.sel { box-shadow: 0 0 0 3px var(--line), 0 0 0 6px var(--accent); }

/* jeu : HUD et dock */
.hud-card { border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.hud-room { background: var(--accent); color: var(--ink); border: 3px solid var(--line); box-shadow: 0 3px 0 var(--line); }
.dock { border: 3px solid var(--line); box-shadow: 0 5px 0 var(--line); border-radius: 22px; }
.dock button { font-weight: 800; color: var(--muted); transition: transform .12s; }
.dock button:hover { background: #fff1b8; color: var(--ink); transform: translateY(-3px); }
.dock button:hover span { animation: rebond .4s; }
@keyframes rebond { 40% { transform: translateY(-4px) scale(1.15); } }
.chat-log { background: rgba(29, 36, 51, .62); border-radius: 14px; }
.chat-log b { color: #ffd84a; }
.chat-bar input { border: 3px solid var(--line); }
.dialog { border: 4px solid var(--line); box-shadow: 0 6px 0 var(--line); }
.dialog-name { color: var(--primary); }

/* fenêtres */
.modal { border: 4px solid var(--line); box-shadow: 0 8px 0 var(--line), 0 30px 60px rgba(10, 30, 70, .35); animation: entree .22s cubic-bezier(.2, 1.4, .5, 1); }
@keyframes entree { from { transform: scale(.92) translateY(10px); opacity: 0; } }
.modal header { background: linear-gradient(#ffe066, #ffc21a); border-bottom: 3px solid var(--line); }
.modal h2 { font-weight: 800; }
.close, #modalClose { border: 3px solid var(--line); background: #fff; box-shadow: 0 2px 0 var(--line); font-weight: 800; }
.card { border: 3px solid #d6e3f3; border-radius: 16px; transition: transform .12s, border-color .12s; }
.card:hover { transform: translateY(-2px); border-color: var(--primary2); }
.card.equipped { border-color: var(--line); background: #fff8d9; }
.toast { border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); font-weight: 700; }
.pill.gold { background: #fff1b8; color: #6b4a00; }
@media (max-width: 640px) { .modal { border-bottom: 0; } }

/* annonces et bannières */
.banner-pub { position: absolute; left: 50%; top: max(64px, calc(env(safe-area-inset-top) + 54px)); transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 10px; background: linear-gradient(#ffe066, #ffb20f); border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); border-radius: 16px; padding: 6px 8px 6px 12px; font-weight: 800; max-width: calc(100% - 20px); animation: entree .3s; cursor: pointer; }
.banner-pub img { height: 34px; border-radius: 8px; }
.banner-pub .x { border: 0; background: none; font-size: 1rem; }

/* réduction des animations si le joueur le demande */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Réglages, profil, actualités, modération */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.terms { display: flex !important; gap: 8px; align-items: flex-start; font-weight: 600; font-size: .82rem; line-height: 1.35; color: var(--ink); margin: 4px 0 10px; }
.terms input { width: 20px !important; height: 20px; flex: none; margin: 1px 0 0 !important; accent-color: var(--primary); }
.err.good { color: var(--ok); font-weight: 700; }
.switch { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch span { width: 46px; height: 26px; border-radius: 99px; background: #cfdcec; border: 3px solid var(--line); position: relative; flex: none; transition: background .15s; }
.switch span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--line); transition: left .15s; }
.switch input:checked + span { background: var(--leaf); }
.switch input:checked + span::after { left: 21px; }
.slider { display: flex; flex-direction: column; gap: 4px; font-weight: 700; color: var(--ink); }
.slider input { width: 100%; accent-color: var(--accent2); }
.chat-menu { display: flex; gap: 6px; padding: 4px 0; flex-wrap: wrap; }
.chat-log [data-id] { cursor: pointer; border-radius: 6px; }
.chat-log [data-id]:hover { background: rgba(255, 255, 255, .1); }
.chat-log .edited { opacity: .7; font-size: .8em; }
.news { display: flex; gap: 14px; border: 3px solid #d6e3f3; border-radius: 16px; padding: 12px; margin-bottom: 12px; }
.news.focus { border-color: var(--line); background: #fff8d9; }
.news img { width: 140px; height: 100px; object-fit: cover; border-radius: 12px; flex: none; border: 2px solid var(--line); }
.news h3 { margin: 6px 0 4px; }
.news p { margin: 0 0 6px; white-space: pre-line; }
@media (max-width: 560px) { .news { flex-direction: column; } .news img { width: 100%; height: 140px; } }
.gift { text-align: center; }
.gift-icon { font-size: 4rem !important; animation: rebond .8s infinite; }
.profile-banner { height: 56px; border-radius: 14px; border: 3px solid var(--line); margin-bottom: 12px; background-image: linear-gradient(135deg, rgba(255, 255, 255, .35) 0 25%, transparent 25% 50%, rgba(255, 255, 255, .35) 50% 75%, transparent 75%) !important; background-size: 28px 28px !important; }
.bio { background: var(--panel2); border-radius: 12px; padding: 8px 10px; margin-bottom: 8px; font-weight: 600; }
.bio .mood { font-size: 1.3rem; margin-right: 6px; }

/* thèmes de saison sur l'interface */
body[data-theme="halloween"] { --accent: #ff8a1c; --accent2: #ff6a00; --primary: #7b3fc9; --primary2: #a35cff; }
body[data-theme="noel"] { --accent: #ffd84a; --primary: #c9302c; --primary2: #ff5b52; }
body[data-theme="saintvalentin"] { --primary: #e0306a; --primary2: #ff6f9e; }
body[data-theme="halloween"] .hud-room::before { content: '🎃 '; }
body[data-theme="noel"] .hud-room::before { content: '🎄 '; }