/* Capa final de interfaz: ánimo del día, perfil, menús, paneles y editor de decoración.
   Se carga después del <style> de index.html, así que unifica el look claro (cristal + lila) en todo. */
:root { --ink2:#4a4570; --soft:#f4f0ff; --soft2:#ebe4ff; --ring:rgba(122,92,255,.28); --radius:16px; }

/* ---------- ánimo del día ---------- */
#left { position:relative; }
.moodbtn { display:flex; align-items:center; gap:10px; width:100%; margin:0 0 8px; padding:9px 12px; border:2px solid var(--line); border-radius:14px; background:#fff; color:var(--ink2); font:700 13px var(--font); cursor:pointer; text-align:left; transition:border-color .15s, box-shadow .15s, transform .12s; }
.moodbtn:hover { border-color:#b9a8ff; box-shadow:0 4px 14px rgba(122,92,255,.14); transform:translateY(-1px); }
.moodbtn .me { font-size:21px; line-height:1; } .moodbtn i { margin-left:auto; font-style:normal; font-size:11px; font-weight:800; color:var(--accent); background:var(--soft); border-radius:999px; padding:2px 9px; }
.moodbtn.empty { border-style:dashed; border-color:#c9bbff; background:linear-gradient(90deg,#faf7ff,#fff4f9); }
#moodpop { display:none; position:absolute; left:14px; right:14px; top:96px; max-height:calc(100vh - 120px); overflow-y:auto; z-index:30; background:#fff; border-radius:20px; padding:14px; box-shadow:0 18px 50px rgba(34,24,80,.34); border:1px solid #e9e2ff; animation:popin .18s ease-out; }
@keyframes popin { from { opacity:0; transform:translateY(-6px) scale(.97); } }
#moodpop .mph { font-weight:800; font-size:15px; color:var(--ink); } #moodpop .note { margin:2px 0 10px; }
.mgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); gap:6px; }   /* los botones caben en el panel: 2 columnas compactas, y 1 si el panel es muy angosto */
.mgrid .mopt { min-width:0; padding:8px 6px; gap:5px; font-size:11.5px; letter-spacing:-.1px; } .mgrid .mopt span { font-size:17px; } .mgrid .mopt b, .mgrid .mopt { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mopt { display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:14px; border:2px solid #ece6ff; background:#fff; color:var(--ink2); font:700 13px var(--font); cursor:pointer; text-align:left; transition:transform .12s, border-color .12s, background .12s, box-shadow .12s; }
.mopt span { font-size:22px; line-height:1; } .mopt:hover { background:var(--soft); border-color:#c9bbff; transform:translateY(-1px); }
.mopt.on { background:linear-gradient(135deg,#7a5cff,#a06bff); border-color:transparent; color:#fff; box-shadow:0 6px 16px rgba(122,92,255,.4); }
dialog .mgrid .mopt { background:#fff; color:var(--ink2); box-shadow:none; padding:9px 10px; border-radius:14px; } dialog .mgrid .mopt.on { background:linear-gradient(135deg,#7a5cff,#a06bff); color:#fff; box-shadow:0 6px 16px rgba(122,92,255,.4); }
#moodpop .mpf { display:flex; justify-content:space-between; margin-top:10px; }
.lnk, #card a.lnk { background:none; border:0; padding:2px 4px; color:var(--accent); font:700 12.5px var(--font); cursor:pointer; text-decoration:none; } .lnk:hover { text-decoration:underline; }
.mchip { display:inline-flex; align-items:center; gap:5px; background:var(--soft); color:var(--ink2); border-radius:999px; padding:2px 10px; font-size:13px; } .mchip b { font-weight:700; }
.per .fe { font-size:14px; margin-left:3px; vertical-align:1px; }

/* ---------- tarjeta de perfil: solo lectura + accesos a editar ---------- */
#card { background:#fff; color:var(--ink); border:1px solid #e9e2ff; border-radius:24px; padding:16px 18px; box-shadow:0 20px 60px rgba(34,24,80,.32); }
#card .cn small { color:var(--muted); } #card .cl { color:var(--ink2); } #card .cr { color:var(--accent); }
#card .cb { background:linear-gradient(90deg,#fff0f6,#fff6e6); color:#a0235f; font-weight:700; border-radius:14px; }
#card .ci span { background:var(--soft); color:var(--ink2); font-weight:600; } #card .cq { color:var(--ink2); }
#card .cx { color:#9a96bd; } #card .cx:hover { color:var(--ink); }
#card .cav { background:linear-gradient(#ddf5d4,#bfe6b0); border-radius:16px; }
#card .lbl2, #card ul.cal { color:var(--muted); } #card ul.cal a { color:var(--accent); } #card .stt { background:var(--soft); color:var(--ink2); }
#card .cself { display:flex; gap:8px; margin-top:12px; clear:both; }
#card .ce { flex:1; margin:0; display:flex; align-items:center; justify-content:center; gap:6px; background:var(--soft); color:#4b3bb5; border-radius:14px; padding:10px 6px; font:800 12.5px var(--font); transition:background .12s, transform .12s; }
#card .ce:hover { background:var(--soft2); transform:translateY(-1px); } #card .ce[data-k="prof"] { background:linear-gradient(90deg,#7a5cff,#a06bff); color:#fff; box-shadow:0 6px 16px rgba(122,92,255,.35); }
#card .acts button { background:var(--soft); color:#4b3bb5; border-radius:12px; padding:8px 11px; } #card .acts button:hover { background:var(--soft2); }

/* ---------- diálogo de perfil ---------- */
dialog.pdlg { width:min(640px,94vw); max-width:640px; padding:0; overflow:hidden; display:none; flex-direction:column; max-height:92vh; }
dialog.pdlg[open] { display:flex; }
.pdlg .phead { padding:20px 24px 8px; } .pdlg .phead h3 { margin:0; font-size:22px; font-weight:800; } .pdlg .phead .note { margin:4px 0 0; }
.pdlg .pbody { overflow:auto; padding:8px 24px 6px; display:flex; flex-direction:column; gap:12px; flex:1; min-height:0; }
.pdlg .pc { background:#fff; border:1px solid #ece6ff; border-radius:20px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; box-shadow:0 2px 10px rgba(80,60,160,.05); }
.pdlg .ptit { display:flex; align-items:center; gap:8px; font-weight:800; font-size:14px; color:var(--ink); cursor:default; list-style:none; } .pdlg summary.ptit { cursor:pointer; } .pdlg summary::-webkit-details-marker { display:none; }
.pdlg .ptit small { margin-left:auto; font-weight:600; color:var(--muted); font-size:11.5px; text-align:right; } .pdlg .ptit .sgn { margin-left:auto; background:var(--soft); color:#4b3bb5; border-radius:999px; padding:2px 10px; font-size:12px; }
.pdlg label { display:flex; flex-direction:column; gap:4px; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#8a86ad; } .pdlg label.ck { flex-direction:row; align-items:center; gap:6px; text-transform:none; letter-spacing:0; font-size:13px; font-weight:600; color:var(--ink2); }
.pdlg .tx { background:#fff; color:var(--ink); border:2px solid #e3dcff; border-radius:12px; padding:9px 12px; font:600 14px var(--font); text-transform:none; letter-spacing:0; outline:none; } .pdlg .tx:focus { border-color:#9a86ff; box-shadow:0 0 0 4px rgba(154,134,255,.18); }
.pdlg .pg2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; } @media (max-width:560px) { .pdlg .pg2 { grid-template-columns:1fr; } .mgrid { grid-template-columns:repeat(auto-fit,minmax(100px,1fr)); } }
.pdlg .items { display:flex; flex-wrap:wrap; gap:6px; align-items:center; } .pdlg .note { margin:0; }
.pdlg .row { padding:12px 24px 18px; margin:0; border-top:1px solid #f0ebff; background:#fcfaff; }
.pdlg select { padding:8px 10px; font:600 13px var(--font); }
.pdlg .chip { background:var(--soft); color:#4b3bb5; box-shadow:none; padding:6px 12px; font-weight:700; border-radius:999px; } .pdlg .chip:hover { background:var(--soft2); } .pdlg .chip.on { background:linear-gradient(90deg,#7a5cff,#a06bff); color:#fff; }

/* ---------- barra inferior y menús ---------- */
#setmenu { padding:6px; min-width:236px; gap:1px; } #setmenu button { font-size:13.5px; font-weight:700; padding:10px 12px; }
#setmenu #profbtn { background:var(--soft); color:#4b3bb5; margin-bottom:4px; } #setmenu #profbtn:hover { background:var(--soft2); }
#setmenu #leavebtn { color:#c2294b; } #setmenu #leavebtn:hover { background:#ffe9ee; }
#setmenu #volrow { margin:2px 0; border-radius:12px; background:#faf8ff; }
#bar button:focus-visible, #setmenu button:focus-visible, .mopt:focus-visible, .moodbtn:focus-visible { outline:3px solid #b9a8ff; outline-offset:1px; }

/* ---------- editor de personaje (dos columnas limpias) ---------- */
.ed2 { grid-template-columns:240px 92px 1fr; gap:18px; }
.ed2 .pvbox { position:sticky; top:0; } .pvbox canvas { background:linear-gradient(#cfeebb,#a9dc98); border-radius:20px; box-shadow:inset 0 0 0 4px rgba(255,255,255,.6); }
.cat { background:#fff !important; color:var(--ink2) !important; border:2px solid #ece6ff !important; box-shadow:none !important; border-radius:14px !important; transition:background .12s, border-color .12s, transform .12s; }
.cat:hover { background:var(--soft) !important; transform:translateX(2px); } .cat.on { background:linear-gradient(135deg,#7a5cff,#a06bff) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 6px 16px rgba(122,92,255,.35) !important; }
.tile { background:#fff !important; color:var(--ink2) !important; border:2px solid #ece6ff !important; box-shadow:none !important; border-radius:14px !important; transition:transform .12s, border-color .12s; }
.tile:hover { transform:translateY(-2px); border-color:#c9bbff !important; } .tile.on { border-color:var(--accent) !important; background:var(--soft) !important; box-shadow:0 0 0 3px var(--ring) !important; }
.tile img { background:linear-gradient(#d7f1c6,#b8e3a6); }
.grp .lbl, .lbl { color:#8a86ad; font-weight:800; }
.chip { box-shadow:none !important; }
.pvbtns .chip { background:var(--soft) !important; color:#4b3bb5 !important; } .pvbtns .chip.on { background:linear-gradient(90deg,#7a5cff,#a06bff) !important; color:#fff !important; }
.edr #opts { max-height:60vh; scrollbar-width:thin; }

/* ---------- panel de decorar: claro, legible y consistente ---------- */
#decor { background:rgba(255,255,255,.94); backdrop-filter:blur(20px) saturate(1.4); color:var(--ink); border:1px solid #e9e2ff; border-radius:24px; padding:14px; box-shadow:0 20px 60px rgba(34,24,80,.34); gap:10px; }
#decor h4, #decor .dh b { color:var(--ink); } #decor .sub, #decor .dh .sub { color:var(--muted); }
#decor .dh .pri, #decor #ddone { background:linear-gradient(90deg,#7a5cff,#a06bff); box-shadow:0 6px 16px rgba(122,92,255,.35); border:0; }
#decor .tabs { background:var(--soft); padding:4px; gap:2px; } #decor .tabs button { color:#4b3bb5; background:transparent !important; border:0; box-shadow:none; } #decor .tabs button.on { background:#fff !important; color:var(--accent); box-shadow:0 2px 8px rgba(80,60,160,.15); }
#decor .dc { gap:6px; } #decor .dc button, #decor .dr button { background:#fff; color:#4b3bb5; border:1.5px solid #e3dcff; border-radius:999px; padding:5px 11px; font-weight:700; transition:background .12s; }
#decor .dc button:hover, #decor .dr button:hover { background:var(--soft); } #decor .dc button.on { background:linear-gradient(90deg,#7a5cff,#a06bff); color:#fff; border-color:transparent; }
#decor .dstick { background:rgba(255,255,255,.96); } #decor .dstick .tx { border:2px solid #e3dcff; box-shadow:none; font-weight:600; } #decor .dstick .tx:focus { border-color:#9a86ff; box-shadow:0 0 0 4px rgba(154,134,255,.18); }
#decor .dstick .tx::placeholder { color:#8a86ad; font-weight:600; }
#decor .gl { color:#8a86ad; font-weight:800; }
#decor .dg { gap:8px; } #decor .dg button { background:#fff; border:2px solid #ece6ff; color:var(--ink2); border-radius:14px; padding:6px 4px; transition:transform .12s, border-color .12s, box-shadow .12s; }
#decor .dg button:hover { transform:translateY(-2px); border-color:#c9bbff; box-shadow:0 6px 14px rgba(80,60,160,.12); } #decor .dg button.on { background:var(--soft); border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }
#decor .dg small { color:var(--ink2); font-weight:700; } #decor .th { background:linear-gradient(#f1f6ec,#e3efdb); border-radius:10px; }
#decor .dcol { background:var(--soft); border:0; border-radius:16px; } #decor .dcol .gl { color:#4b3bb5; } #decor .dcol .sub { color:var(--ink2); }
#decor .dsb button { background:var(--soft); color:#4b3bb5; box-shadow:none; } #decor .dsb button#dmove { background:linear-gradient(90deg,#7a5cff,#a06bff); color:#fff; } #decor .dsb button#dbin { background:#ffe9ee; color:#c2294b; }
#decor .dmore summary { background:#fff; color:#4b3bb5; border:1.5px solid #e3dcff; } #decor .dmenu { background:#fff; border:1px solid #e9e2ff; box-shadow:0 14px 40px rgba(34,24,80,.3); } #decor .dmenu button { background:transparent; color:#4b3bb5; } #decor .dmenu button:hover { background:var(--soft); }
#decor .dr { position:relative; z-index:8; } #decor .dmenu { z-index:9; max-height:calc(100vh - 230px); overflow-y:auto; overscroll-behavior:contain; } #decor .dmenu .gl { margin:4px 0 0; }
#decor .dsw button { border-color:#fff; box-shadow:0 0 0 1px rgba(80,60,160,.25); } #decor .dsw button.on { box-shadow:0 0 0 3px var(--accent); }
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }

/* diálogos altos: el contenido se desplaza y los botones de abajo siempre se ven */
dialog.huge[open] { display:flex; flex-direction:column; max-height:94vh; }
dialog.huge .ed2 { flex:1; min-height:0; } dialog.huge .edr #opts { max-height:calc(94vh - 190px); }
dialog.huge > h3 { margin:0 0 12px; font-size:22px; font-weight:800; } dialog.huge .row { margin-top:12px; padding-top:12px; border-top:1px solid #f0ebff; }
#decor .dc.tabs button { background:transparent; color:#4b3bb5; border:0; } #decor .dc.tabs button.on { background:#fff; color:var(--accent); box-shadow:0 2px 8px rgba(80,60,160,.15); }

/* menú de ajustes: pegado a la derecha, con desplazamiento si la ventana es baja */
#setmenu { left:auto; right:14px; transform:none !important; max-height:calc(100% - 120px); overflow-y:auto; min-width:250px; }

#decor .dg button.dlock { position:relative; } #decor .dg button.dlock .th img { filter:grayscale(.85) brightness(.8); } #decor .dg button.dlock::after { content:"🔒 " attr(data-lock) "⭐"; position:absolute; left:4px; top:4px; background:#2a1f33; color:#fff; font:700 11px system-ui; padding:2px 6px; border-radius:8px; }

/* modo ahorro: sin desenfoque de fondo (cada cuadro del mapa obligaba a la GPU a recalcularlo detrás de los paneles) */
html.ahorro *, html.ahorro *::before, html.ahorro *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }