/* Fable (2026-10-04): estilos de lo nuevo (iconos animados del original,
   mascota, Item Mall, chat). Mismo lenguaje que style.css: paneles teal
   translucidos propios; de IGG solo los iconos. */

/* ---------------------------------------------------------------- iconos del original */
.icono-ui { position: relative; display: inline-block; overflow: visible; pointer-events: none; }
.icono-ui i { position: absolute; background-repeat: no-repeat; image-rendering: pixelated; }
.boton-ui { position: relative; padding: 0; border: 0; background: none; display: flex; align-items: flex-end; justify-content: center; }
.boton-ui:hover:not(:disabled) { filter: drop-shadow(0 0 6px rgba(255, 220, 130, .55)); }
.boton-ui:active:not(:disabled) { transform: none; }

/* el menu de abajo: los botones del original, que "saltan" al pasar el raton */
.menu { overflow: visible; }
.menu .boton-ui { width: auto; min-width: 40px; height: 54px; background: none; }
.menu .boton-ui.activo { filter: drop-shadow(0 0 7px rgba(255, 200, 90, .85)); }
.menu .boton-ui.mall { margin-right: 4px; }

#ui .marco-mascota, #ui .pregunta-mascota, #ui .chat-popup { pointer-events: auto; }

/* ---------------------------------------------------------------- mascota (878/879/880) */
.marco-mascota { position: absolute; left: 8px; width: 262px; z-index: 5; }
.mm-cabeza { display: grid; grid-template-columns: 58px 1fr; gap: 6px; align-items: center; padding: 4px 8px 5px 4px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 30px 12px 12px 30px; box-shadow: var(--sombra); }
.mm-retrato { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, var(--boton-a), var(--boton-b)); border: 3px solid #7fd88e; box-shadow: 0 0 0 2px #1d5b2a; }
.marco-mascota.saciada .mm-retrato { border-color: #ffd84a; box-shadow: 0 0 0 2px #7a3f00, 0 0 10px rgba(255,216,74,.55); }
.mm-retrato img { max-width: 64px; max-height: 64px; image-rendering: pixelated; }
.mm-datos { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mm-nombre { display: flex; align-items: center; gap: 4px; }
.mm-nombre > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700;
  text-shadow: 0 1px 2px #000; cursor: text; }
.mm-nombre form { flex: 1; } .mm-nombre input { width: 100%; padding: 0 6px; height: 20px; }
.mm-nombre .lv { font-size: 11px; color: var(--acento-claro); }
.mm-datos .barra { flex: none; }
.mm-modo { position: relative; }
.mm-modo > button { width: 100%; text-align: left; }
.mm-menu { position: absolute; left: 0; top: 20px; z-index: 30; display: flex; flex-direction: column; gap: 2px; padding: 4px;
  background: var(--panel-osc); border: 1px solid var(--borde); border-radius: 8px; box-shadow: var(--sombra); width: 140px; }
.mm-menu button { padding: 2px 8px; text-align: left; font-size: 12px; }
.mm-detalle { margin-top: 5px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 6px 8px 8px; }
.mm-detalle .panel-ficha { width: auto; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.mm-detalle .panel-ficha .par { grid-template-columns: 52px 1fr 52px 1fr; font-size: 12px; }
.mm-habs { display: flex; gap: 6px; justify-content: center; margin: 6px 0 4px; }
.mm-habs .ranura { width: 36px; height: 36px; }
.mm-barras label { display: block; font-size: 11.5px; color: var(--tenue); margin-top: 3px; }
.mm-barras .barra { height: 12px; }
.barra.saciedad .relleno { background: linear-gradient(90deg, #c06a12, #f2a43a 60%, #ffd77a); }
.barra.intimidad .relleno { background: linear-gradient(90deg, #c2387a, #f06aa8 60%, #ffb3d4); }
.barra.saciedad.vacia, .barra.intimidad.baja { box-shadow: 0 0 0 1px #ff6b6b; }
.mm-gema { display: flex; gap: 4px; align-items: center; }

.lista-mascotas { display: flex; flex-direction: column; gap: 4px; }
.fila-mascota { display: grid; grid-template-columns: 40px 1fr auto; gap: 8px; align-items: center; padding: 4px 6px;
  background: rgba(var(--rgb-hondo), .55); border: 1px solid var(--borde-suave); border-radius: 8px; cursor: default; }
.fila-mascota.afuera { border-color: #7fd88e; }
.fila-mascota.elegida { border-color: var(--acento); box-shadow: 0 0 0 2px rgba(247,165,49,.35); }
.fila-mascota.muerta { opacity: .6; }
.fila-mascota .mini-retrato { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.fm-datos { display: flex; flex-direction: column; min-width: 0; } .fm-datos small { color: var(--tenue); }
.fila-mascota .oro { color: var(--acento-claro); font-weight: 700; }
.pregunta-mascota { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); width: 360px; z-index: 950; }
.pregunta-mascota .fila-botones button { text-align: left; }
.tip-mascota { margin-top: 6px; border-top: 1px solid var(--borde-suave); padding-top: 4px; }

/* ---------------------------------------------------------------- Item Mall (12400) */
.mall { display: grid; grid-template-columns: 1fr 236px; gap: 10px; }
.mall-izq { display: flex; flex-direction: column; min-width: 0; }
.mall .pestanas { flex-wrap: wrap; }
.mall-lista { height: 330px; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-content: start;
  padding-right: 3px; scrollbar-width: thin; }
.mall-oferta { display: grid; grid-template-columns: 40px 1fr auto; gap: 6px; align-items: center; padding: 4px 6px;
  background: rgba(var(--rgb-hondo), .55); border: 1px solid var(--borde-suave); border-radius: 8px; cursor: pointer; }
.mall-oferta:hover { border-color: var(--acento-claro); }
.mall-oferta.elegida { border-color: var(--acento); box-shadow: 0 0 0 2px rgba(247,165,49,.35); }
.mo-datos { display: flex; flex-direction: column; min-width: 0; }
.mo-datos b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-datos small { color: var(--tenue); font-size: 11px; }
.mall-oferta .ag { color: var(--acento-claro); font-weight: 700; font-size: 12px; white-space: nowrap; }
.mall-oferta .ag s { color: var(--tenue); font-weight: 400; }
.mall-intro { height: 330px; overflow-y: auto; white-space: pre-wrap; padding: 6px 8px; background: rgba(var(--rgb-hondo),.45); border-radius: 8px; }
.mall-pie { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.mall-pie .espacio { flex: 1; }
.ag-total b { color: var(--acento-claro); font-size: 15px; }
.mall-der .subt:first-child { margin-top: 0; }
.mall-actual { display: grid; grid-template-columns: 40px 1fr; gap: 8px; min-height: 120px; max-height: 170px; overflow-y: auto;
  padding: 6px; background: rgba(var(--rgb-hondo),.45); border-radius: 8px; font-size: 12px; }
.mall-actual .tip-desc { font-size: 11.5px; }
.fila-form { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; margin: 6px 0; color: var(--tenue); }

/* ---------------------------------------------------------------- objetos que piden un blanco */
.elegir .cuerpo { max-height: 60vh; overflow-y: auto; }
.elegir-piezas { display: flex; flex-direction: column; gap: 3px; }
.elegir-piezas .pieza { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; padding: 3px 6px;
  border: 1px solid var(--borde-suave); border-radius: 8px; background: rgba(var(--rgb-hondo),.55); cursor: pointer; }
.elegir-piezas .pieza:hover { border-color: var(--acento); }
.elegir-piezas .pieza img { max-width: 38px; max-height: 38px; image-rendering: pixelated; justify-self: center; }
.elegir-piezas .pieza small { display: block; color: var(--tenue); }

/* ---------------------------------------------------------------- chat (143) */
.chat.chat-ao { height: auto; width: 440px; }
.chat-pestanas { display: flex; gap: 3px; align-items: center; padding: 4px 6px 0; }
.chat-pestanas button { padding: 0 9px; height: 20px; font-size: 11.5px; border-radius: 6px 6px 0 0; background: rgba(var(--rgb-hondo),.7); }
.chat-pestanas button.activa { background: linear-gradient(var(--acento-a), var(--acento-b)); color: var(--acento-texto); font-weight: 700; }
.chat-pestanas button.mini { border-radius: 4px; }
.chat-pestanas .espacio { flex: 1; }
.chat .msg.publico { color: #ffe9a6; } .chat .msg.comercio { color: #a6ffd0; } .chat .msg.liga { color: #ffc28a; }
.chat .msg { cursor: default; }
.chat form .canal-hablar { padding: 0 8px; min-width: 66px; font-size: 12px; }
.canal-general { } .canal-publico { color: #ffe9a6 !important; } .canal-comercio { color: #a6ffd0 !important; }
.canal-equipo { color: #9dffb0 !important; } .canal-liga { color: #ffc28a !important; }
.chat-popup { position: absolute; left: 6px; bottom: 40px; z-index: 40; display: flex; flex-direction: column; gap: 2px; padding: 5px;
  background: var(--panel-osc); border: 1px solid var(--borde); border-radius: 8px; box-shadow: var(--sombra); min-width: 130px; }
.chat-popup button { padding: 2px 10px; text-align: left; font-size: 12px; }
.chat-popup.filtros { left: auto; right: 6px; bottom: auto; top: 28px; }
.chat-popup.filtros label { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.chat-popup.filtros input { padding: 0; }
.chat-popup.susurros { left: auto; right: 6px; }
.chat-popup.nombre b { padding: 0 4px 2px; }
.chat-popup .subt { margin: 0 0 3px; }
.mall-actual .vacia { grid-column: 1 / -1; }
.mm-datos .barra.hp span { font-size: 10px; }

/* ---------------------------------------------------------------- mascota: estrellas y equipo (16102) */
.mm-estrellas, .tip-estrellas { color: #ffd84a; font-weight: 700; font-size: 12px; margin: 4px 0 2px; text-shadow: 0 1px 2px #000; }
.mm-equipo { display: flex; gap: 8px; justify-content: center; margin: 4px 0 2px; }
.mm-pieza { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mm-pieza .ranura { width: 38px; height: 38px; }
.mm-pieza small { font-size: 10px; color: var(--tenue); }

/* ---------------------------------------------------------------- Fusion (15001) */
.fu-diagrama { position: relative; height: 262px; }
.fu-flechas { position: absolute; inset: 0; width: 100%; height: 250px; pointer-events: none; }
.fu-flechas path { stroke: var(--borde-suave); stroke-width: 2; fill: none; stroke-dasharray: 4 3; }
.fu-casilla { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 1; }
.fu-casilla .ranura { width: 44px; height: 44px; cursor: pointer; }
.fu-etiqueta { font-size: 11px; color: var(--tenue); background: rgba(var(--rgb-hondo),.7); border: 1px solid var(--borde-suave); border-radius: 9px; padding: 0 8px; }
.fu-ayudante { left: 50%; top: 0; transform: translateX(-50%); }
.fu-pocion { left: 8%; top: 40px; }
.fu-azar { right: 8%; top: 40px; }
.fu-principal { left: 50%; top: 104px; transform: translateX(-50%); }
.fu-producto { left: 50%; top: 186px; transform: translateX(-50%); }
.fu-producto .ranura { border-color: var(--acento); }
.fu-lista { max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; margin-bottom: 6px; }
.fu-lista .pieza, .amp-elegir .pieza { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; padding: 3px 6px;
  border: 1px solid var(--borde-suave); border-radius: 8px; background: rgba(var(--rgb-hondo),.55); cursor: pointer; }
.fu-lista .pieza:hover, .amp-elegir .pieza:hover { border-color: var(--acento); }
.fu-lista .pieza small, .amp-elegir .pieza small { display: block; color: var(--tenue); }
.fu-resultado { min-height: 54px; padding: 4px 8px; background: rgba(var(--rgb-hondo),.45); border-radius: 8px; font-size: 12.5px; }
.fu-resultado p { margin: 3px 0; }
.fu-verdes { display: flex; flex-wrap: wrap; gap: 4px 10px; color: #7dff8a; }
.ventana-fusion footer .espacio { flex: 1; }
.fu-intro { width: 420px; }
.fu-intro .cuerpo { max-height: 60vh; overflow-y: auto; white-space: pre-wrap; font-size: 12.5px; }

/* ---------------------------------------------------------------- Pet Amplify (17150) */
.amp { display: grid; grid-template-columns: 220px 1fr; gap: 12px; }
.amp-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.amp-tabla th { text-align: left; color: var(--tenue); font-weight: 600; padding: 2px 4px; border-bottom: 1px solid var(--borde-suave); }
.amp-tabla td { padding: 2px 4px; }
.amp-tabla td:nth-child(2) { color: #7dff8a; }
.amp-tabla tr.activo td { color: #7dff8a; }
.amp-tabla.especiales { max-height: 340px; }
.amp-aviso { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--tenue); margin-top: 8px; }
.amp-aviso input { padding: 0; }
.amp-der { display: flex; flex-direction: column; gap: 5px; }
.amp-casilla { position: relative; display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; padding: 5px 8px;
  background: rgba(var(--rgb-hondo),.55); border: 1px solid var(--borde-suave); border-radius: 9px; }
.amp-casilla .ranura { width: 42px; height: 42px; cursor: pointer; }
.amp-casilla.cerrada { opacity: .8; }
.amp-datos { display: flex; flex-direction: column; min-width: 0; font-size: 12.5px; }
.amp-datos small { color: var(--tenue); }
.amp-martillos { display: flex; gap: 4px; margin-top: 3px; }
.amp-elegir { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 3px; max-height: 160px; overflow-y: auto; }
.amp-intro { white-space: pre-wrap; font-size: 12.5px; max-height: 380px; overflow-y: auto; }
.mm-fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 6px; margin: 6px 0 2px; }
.mm-fila .mm-habs { margin: 0; gap: 4px; }
.mm-fila .mm-habs .ranura { width: 34px; height: 34px; }
.mm-fila .mm-equipo { margin: 0; gap: 4px; border-left: 1px solid var(--borde-suave); padding-left: 6px; }
.mm-fila .mm-pieza .ranura { width: 34px; height: 34px; }
.mm-estrella { color: #c46f00; margin-left: 6px; }
.mm-empatia { font-size: 12px; margin: 4px 0 0; cursor: help; }
.mm-empatia b { margin: 0 3px; }
.emp-nice { color: #7dc8ff; } .emp-mean { color: #ff8a8a; } .emp-neutral { color: #e8e8e8; }

/* ---------------------------------------------------------------- inicio: entrar, elegir y crear (2529, 2548, 2566) */
.inicio-ao { gap: 22px; }
.panel-inicio { position: relative; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px;
  box-shadow: var(--sombra); padding: 0 18px 16px; }
.panel-inicio > header { margin: 0 -18px 12px; padding: 9px 18px; font-weight: 700; letter-spacing: .3px; text-shadow: 0 1px 2px #000;
  background: linear-gradient(var(--panel-claro), transparent); border-bottom: 1px solid var(--borde-suave); border-radius: 14px 14px 0 0; }
.panel-inicio.login { width: 330px; }
.panel-inicio.login label { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 8px; margin-bottom: 9px; color: var(--tenue); }
.panel-inicio.login label.recordar { display: flex; gap: 6px; font-size: 12.5px; }
.panel-inicio.login label.recordar input { padding: 0; }
.panel-inicio.login button.principal { width: 100%; padding: 9px; margin-top: 4px; }
.servidores { list-style: none; margin: 0 0 12px; padding: 4px; background: rgba(var(--rgb-hondo2), .55); border: 1px solid var(--borde-suave);
  border-radius: 10px; max-height: 150px; overflow-y: auto; }
.servidores li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; }
.servidores li.elegido { background: rgba(247, 165, 49, .18); outline: 1px solid rgba(247, 165, 49, .55); }
.servidores small { color: var(--tenue); font-size: 11.5px; }
.servidores .estado { width: 10px; height: 10px; border-radius: 50%; background: #c9a227; box-shadow: 0 0 6px #c9a227; }
.servidores .estado.en-linea { background: #3fdc6a; box-shadow: 0 0 6px #3fdc6a; }

.seleccion { display: flex; gap: 18px; align-items: center; }
.lugares-pj { display: flex; gap: 14px; align-items: center; }
.lugar-pj { width: 216px; padding: 10px 8px 12px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--panel); border: 1px solid var(--borde-suave); border-radius: 14px; box-shadow: var(--sombra); cursor: pointer; }
.lugar-pj:hover { border-color: var(--borde); filter: none; }
.lugar-pj.elegido { border-color: var(--acento); box-shadow: 0 0 0 2px rgba(247,165,49,.35), var(--sombra); }
.lugar-pj .pedestal { position: relative; width: 190px; height: 260px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse 60% 12% at 50% 92%, rgba(var(--rgb-borde),.35), transparent 70%),
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.07), transparent 70%); }
.lugar-pj.elegido .pedestal { background: radial-gradient(ellipse 60% 12% at 50% 92%, rgba(255,210,122,.55), transparent 70%),
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.1), transparent 70%); }
.lugar-pj b { font-size: 15px; } .lugar-pj small { color: var(--tenue); }
.lugar-pj .mas { font-size: 42px; color: var(--borde-suave); }
.ficha-pj { width: 260px; }
.ficha-pj dl { display: grid; grid-template-columns: 92px 1fr; gap: 4px 8px; margin: 0; font-size: 12.5px; }
.ficha-pj dt { color: var(--tenue); } .ficha-pj dd { margin: 0; font-weight: 600; }
.botones-inicio { display: flex; gap: 10px; }
.botones-inicio button { min-width: 120px; padding: 8px 14px; }

.creacion-ao { width: min(940px, 96vw); }
.creacion-ao > header .pasos { display: flex; gap: 4px; margin-right: 6px; }
.creacion-ao > header .pasos i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; background: rgba(var(--rgb-hondo),.7); border: 1px solid var(--borde-suave); }
.creacion-ao > header .pasos i.activo { background: linear-gradient(var(--acento-a), var(--acento-b)); color: var(--acento-texto); font-weight: 700; }
.creacion-ao .creacion-cuerpo { grid-template-columns: 190px 1fr 1fr; gap: 16px; }
.creacion-ao .creacion-campos.opcional { border-left: 1px solid var(--borde-suave); padding-left: 14px; }
@media (max-width: 860px) { .creacion-ao .creacion-cuerpo { grid-template-columns: 1fr; } .creacion-ao .creacion-campos.opcional { border: 0; padding: 0; } }
.creacion-ao .creacion-vista { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.vista-pj { background: radial-gradient(ellipse 55% 10% at 50% 93%, rgba(var(--rgb-borde),.4), transparent 70%); }
.girar { display: flex; gap: 10px; }
.girar .boton-ui { width: 40px; height: 20px; }
.creacion-campos .campo { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 8px; margin: 6px 0; color: var(--tenue); }
.creacion-campos .campo.arriba { align-items: start; }
.creacion-campos .campo input { color: var(--texto); }
.creacion-campos .subt:first-child { margin-top: 0; }
.creacion-ao .genero { display: flex; align-items: center; gap: 8px; margin: 0; }
.creacion-ao .genero .boton-ui { width: 40px; height: 20px; flex: none; }
.creacion-ao .genero .boton-ui.activo { filter: drop-shadow(0 0 6px rgba(255, 200, 90, .95)); }
.selector { display: inline-flex; align-items: center; gap: 6px; }
.selector span { min-width: var(--ancho, 112px); text-align: center; color: var(--texto); background: rgba(var(--rgb-hondo2),.6);
  border: 1px solid var(--borde-suave); border-radius: 6px; padding: 2px 8px; font-size: 12.5px; white-space: nowrap; }
.fecha { display: flex; align-items: center; gap: 4px; }
.fecha .selector span { min-width: 30px; }
.fecha small { color: var(--tenue); margin-right: 6px; }
.signo { color: var(--acento-claro); }
@media (max-width: 900px) { .seleccion { flex-direction: column; align-items: center; } .lugares-pj { flex-wrap: wrap; justify-content: center; } }
.boton-ui.activo { background: none; color: inherit; }
.inicio-ao a { color: var(--acento-claro); margin-left: 4px; }
/* Item Mall: Fitting Room (12601) */
.mall-der-pest { margin: 8px 0 6px; }
.mall-probador { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.probador-vista { width: 200px; height: 150px; border-radius: 10px; border: 1px solid var(--borde-suave);
  background: radial-gradient(ellipse 55% 9% at 50% 93%, rgba(var(--rgb-borde),.4), transparent 70%), rgba(var(--rgb-hondo2),.5); }
.probador-botones { display: flex; align-items: center; gap: 6px; }
.probador-botones .boton-ui { width: 16px; height: 16px; }

/* la vitrina: el mapa en vivo detras (showcase.js); la pantalla se vuelve un velo */
.fondo-inicio.con-vitrina { background: radial-gradient(ellipse at 50% 45%, rgba(5,12,18,.05) 0%, rgba(5,12,18,.35) 70%, rgba(5,12,18,.6) 100%); }
.fondo-inicio.con-vitrina::before { display: none; }
.con-vitrina .lugar-pj, .con-vitrina .panel-inicio { background: rgba(var(--rgb-panel), .78); backdrop-filter: blur(3px); }
.con-vitrina .lugar-pj .pedestal { background: radial-gradient(ellipse 50% 10% at 50% 88%, rgba(var(--rgb-borde),.35), transparent 70%); }
.con-vitrina .lugar-pj.elegido .pedestal { background: radial-gradient(ellipse 50% 10% at 50% 88%, rgba(255,210,122,.55), transparent 70%); }
.vitrina-nombre { position: absolute; left: 18px; bottom: 14px; color: #fff; font-weight: 700; letter-spacing: .5px;
  text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.6); opacity: .85; pointer-events: none; }
/* el logo de RE:Angels Online (img/reao_logo.svg) */
.logo-reao { width: min(600px, 86vw); height: auto; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); user-select: none; pointer-events: none; }
.logo-reao.pequeno { width: min(400px, 64vw); margin-bottom: -4px; }

/* r9: Angel's Name Changer y Notice */
.lugar-pj .aviso-renombre { color: #ffd23f; font-weight: 600; }
input.renombre { width: 100%; box-sizing: border-box; margin: 6px 0 4px; padding: 6px 8px; font-size: 14px; }

/* r10: las casas (ui/house.js) */
.ventana-casa .casa-cabeza { display: flex; gap: 10px; align-items: center; margin: 4px 0 8px; }
.ventana-casa .casa-nombre { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.ventana-casa .casa-nombre small { opacity: .75; }
.barra-nivel { height: 6px; border-radius: 3px; background: rgba(0,0,0,.35); overflow: hidden; margin-top: 3px; }
.barra-nivel span { display: block; height: 100%; background: linear-gradient(90deg, #8be0ff, #ffe27a); }
.casa-datos { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 8px; font-size: 12px; }
.casa-datos dt { opacity: .75; } .casa-datos dd { margin: 0; text-align: right; font-weight: 600; }
.casa-tabla { max-height: 170px; overflow-y: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; }
.casa-tabla.corta { max-height: 150px; }
.casa-fila { display: grid; grid-template-columns: 40px 60px 1fr; gap: 6px; padding: 3px 6px; font-size: 11.5px; opacity: .55; }
.ventana-casa-notas .casa-fila { grid-template-columns: 36px 1fr 1.4fr; opacity: 1; cursor: pointer; }
.ventana-casa-ranking .casa-fila { grid-template-columns: 48px 1fr 50px 40px; opacity: 1; align-items: center; }
.casa-fila.cab { opacity: 1; font-weight: 700; background: rgba(255,255,255,.06); border-radius: 4px; }
.casa-fila.logrado { opacity: 1; color: #b6ffb2; }
.casa-clave { display: flex; gap: 6px; align-items: center; margin: 8px 0 2px; font-size: 12px; }
.casa-grupo { width: 100%; margin-bottom: 6px; }
.casa-muebles { display: grid; grid-template-columns: repeat(5, 36px); gap: 4px; max-height: 260px; overflow-y: auto; }
.casa-muebles .elegida { outline: 2px solid #ffd23f; }
.casa-menu { position: fixed; z-index: 90; display: flex; flex-direction: column; min-width: 130px; padding: 6px;
  background: rgba(var(--rgb-osc),.94); border: 1px solid rgba(var(--rgb-borde),.4); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.casa-menu b { font-size: 12px; padding: 2px 4px 6px; color: #ffe9a0; }
.casa-menu button { text-align: left; margin: 1px 0; }
.casa-votar textarea { width: 100%; box-sizing: border-box; resize: none; }
.casa-nota { margin-top: 8px; padding: 6px 8px; background: rgba(0,0,0,.25); border-radius: 6px; }
.casa-nota p { margin: 4px 0 0; }

/* r11: casas, fase 2 (ui/house2.js) */
.nota.centro { text-align: center; margin: 0 0 8px; }
.sm-grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.sm-casilla { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; gap: 2px 6px; align-items: start; }
.sm-casilla.cerrada { opacity: .45; }
.sm-casilla .ranura { width: 38px; height: 38px; cursor: pointer; grid-row: span 2; }
.sm-modos { display: flex; flex-direction: column; font-size: 11px; line-height: 14px; }
.sm-modos label { display: flex; gap: 4px; align-items: center; }
.sm-modos label.apagado { opacity: .5; }
.sm-modos input { margin: 0; }
.sm-barra { grid-column: 2; height: 4px; border-radius: 2px; background: rgba(0,0,0,.35); overflow: hidden; }
.sm-barra span { display: block; height: 100%; background: linear-gradient(90deg, #8be0ff, #ffe27a); }
.mh-grilla { display: grid; grid-template-columns: repeat(5, 40px); gap: 6px; justify-content: center; margin-bottom: 6px; }
.mh-grilla .ranura { width: 38px; height: 38px; cursor: pointer; position: relative; }
.mh-grilla .mh-seg { position: absolute; left: 0; right: 0; bottom: -1px; font-size: 10px; text-align: center; color: #ffe27a;
  text-shadow: 0 1px 2px #000; }
.casa-martillo .pieza.apagada { opacity: .4; pointer-events: none; }
.casa-martillo .pieza.elegida { border-color: #ffd23f; }
.casa-baile { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 40; display: flex; gap: 10px; align-items: baseline;
  padding: 5px 14px; border-radius: 16px; background: rgba(40,14,52,.82); border: 1px solid rgba(255,160,230,.5);
  color: #ffe0f4; font-size: 12.5px; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.casa-baile b { color: #ffd1ef; }
.casa-baile small { opacity: .75; }

/* r11c: los botones chicos de la ficha y del minimapa (ui/shortcuts.js) */
.accesos-ficha { display: flex; align-items: flex-end; gap: 4px; margin-top: 3px; min-height: 30px; }
.accesos-ficha .icono-ui, .accesos-minimapa .icono-ui { cursor: pointer; }
.accesos-ficha button, .accesos-minimapa button { padding: 0; background: none; border: 0; }
.accesos-minimapa { position: absolute; right: 8px; top: 186px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; pointer-events: auto; }
.accesos-minimapa .fila { display: flex; gap: 3px; }
/* cada boton mide lo del wnd (33x31); el dibujo sale de la caja con su ancla, como en el original */
.accesos-minimapa .boton-ui { width: 33px; height: 31px; align-items: flex-start; justify-content: flex-start; }
.accesos-minimapa .boton-ui .icono-ui { width: 33px !important; height: 31px !important; }
.accesos-minimapa .fila { align-items: flex-start; }

/* r11d: la ficha como la del original (un solo marco: retrato, barras, botones,
   habilidades y atributos pegados), con nuestros colores */
#ui .ficha { display: flex; flex-direction: column; gap: 4px; width: 338px; }
.ficha-marco { background: var(--panel); border: 1px solid var(--borde); border-radius: 52px 12px 12px 12px;
  box-shadow: var(--sombra); padding: 4px 8px 8px 4px; }
.ficha-cabeza { display: grid; grid-template-columns: 92px 1fr; column-gap: 6px; }
.ficha-cabeza .ficha-datos { padding-top: 4px; }
.ficha-marco .panel-ficha { margin: 6px 0 0 4px; width: auto; background: var(--panel-osc); border: 1px solid var(--borde-suave);
  border-radius: 8px; box-shadow: none; padding: 6px 8px; }
.ficha-marco .panel-ficha .nota { margin: 2px 0; }
.ficha-marco .fila-hab { margin: 2px 0; }
.ficha-marco .panel-ficha.info { display: flex; flex-direction: column; gap: 3px; }
.ficha-marco .panel-ficha.info .dato { display: grid; grid-template-columns: 70px 1fr; gap: 6px; margin: 0; align-items: center; }
.ficha-marco .panel-ficha.info .dato span { text-align: center; color: var(--texto); font-weight: 600; }
.ficha-marco .panel-ficha.info .dato b { min-height: 18px; background: linear-gradient(#f2fdff, #cfeef3); color: #10343c;
  border-radius: 9px 4px 4px 9px; padding: 0 10px; text-align: center; font-weight: 700; box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); }
.ficha-marco .panel-ficha.info .dato.rank b { background: var(--ranura); color: var(--texto); border: 1px solid var(--ranura-borde);
  display: flex; gap: 12px; justify-content: flex-start; }
.ficha-marco .panel-ficha.info .dato.rank b i { font-style: normal; color: var(--acento-claro); min-width: 18px; text-align: right; }
.ficha-marco .atributos { display: grid; grid-template-columns: 70px 1fr 70px 1fr; gap: 3px 6px; margin-top: 3px; align-items: center; }
.ficha-marco .atributos span { text-align: right; color: var(--texto); font-weight: 600; font-size: 12px; }
.ficha-marco .atributos b { background: var(--ranura); border: 1px solid var(--ranura-borde); border-radius: 4px; padding: 0 6px;
  text-align: center; color: #eafcff; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px; }

/* r11e: Options [Esc] (ui/options.js) */
.ventana-opciones .subt { margin: 2px 0 4px; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; font-weight: 700; }
.ventana-opciones .subt ~ .subt { margin-top: 10px; }
.op-grupo { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; background: var(--panel-osc);
  border: 1px solid var(--borde-suave); border-radius: 8px; }
.op-fila { display: grid; grid-template-columns: 22px 92px 1fr 40px; align-items: center; gap: 6px; min-height: 26px;
  font-size: 12.5px; color: var(--texto); cursor: pointer; }
.op-fila.apagado { opacity: .45; }
.op-ico { text-align: center; color: var(--acento-claro); font-size: 13px; font-weight: 700; }
.op-nombre { font-weight: 600; }
.op-pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--acento-claro); font-size: 12px; }
button.op-interruptor { grid-template-columns: 22px 1fr 40px; width: 100%; padding: 0; background: none; border: 0; border-radius: 6px; text-align: left; }
button.op-interruptor:hover { background: rgba(255,255,255,.05); filter: none; }
.op-switch { justify-self: end; position: relative; width: 34px; height: 18px; border-radius: 9px; background: var(--ranura);
  border: 1px solid var(--ranura-borde); transition: background .15s; }
.op-switch i { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #9fc9d1;
  transition: left .15s, background .15s; box-shadow: 0 1px 2px rgba(0,0,0,.5); }
.op-interruptor.si .op-switch { background: linear-gradient(var(--acento-a), var(--acento-b)); border-color: var(--acento-claro); }
.op-interruptor.si .op-switch i { left: 18px; background: #fff7e2; }
input.deslizador { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0; border-radius: 3px; cursor: pointer;
  background: linear-gradient(90deg, var(--acento) 0 var(--p), var(--ranura) var(--p) 100%); border: 1px solid var(--ranura-borde); outline: none; }
input.deslizador::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, var(--acento) 60%, var(--acento-b)); border: 1px solid var(--acento-claro); box-shadow: 0 1px 3px rgba(0,0,0,.6); }
input.deslizador::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, var(--acento) 60%, var(--acento-b)); border: 1px solid var(--acento-claro); }
.op-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.op-botones button.peligro { background: linear-gradient(#8a3434, #5e1f1f); border-color: rgba(255,140,140,.4); }

/* r11f: temas de la UI (ui/options.js). 'oceano' es el de siempre (los valores de style.css) */
:root[data-tema="medianoche"] { --acento-a: #ffcd7a; --acento-b: #e8952a; --acento-texto: #2a1600; --rgb-panel: 18, 30, 66; --rgb-claro: 34, 52, 104; --rgb-osc: 8, 14, 36; --rgb-hondo: 6, 12, 34; --rgb-hondo2: 5, 10, 28;
  --rgb-borde: 140, 170, 255; --rgb-tip: 6, 10, 28; --borde: #8caaff; --boton-a: #2f4f9e; --boton-b: #1d3170; --texto: #eef2ff; --tenue: #a9b6dc;
  --acento: #ffb84d; --acento-claro: #ffd98a; --ranura: #0d1638; --ranura-borde: #33478f; }
:root[data-tema="bosque"] { --acento-a: #ffd970; --acento-b: #d9a52a; --acento-texto: #2a1c00; --rgb-panel: 20, 62, 38; --rgb-claro: 36, 96, 58; --rgb-osc: 8, 32, 18; --rgb-hondo: 6, 30, 16; --rgb-hondo2: 5, 24, 13;
  --rgb-borde: 150, 224, 160; --rgb-tip: 6, 24, 12; --borde: #96e0a0; --boton-a: #2e7d4a; --boton-b: #1b5230; --texto: #effff2; --tenue: #a6cfb0;
  --acento: #f2c14e; --acento-claro: #ffe08a; --ranura: #0b2a17; --ranura-borde: #2f7a48; }
:root[data-tema="realeza"] { --acento-a: #ffd27a; --acento-b: #e8a23a; --acento-texto: #2a1600; --rgb-panel: 48, 26, 72; --rgb-claro: 76, 44, 110; --rgb-osc: 22, 10, 36; --rgb-hondo: 24, 10, 40; --rgb-hondo2: 20, 8, 32;
  --rgb-borde: 200, 160, 255; --rgb-tip: 18, 8, 30; --borde: #c8a0ff; --boton-a: #6a3fa3; --boton-b: #432470; --texto: #f7efff; --tenue: #c3b0dc;
  --acento: #ffc35c; --acento-claro: #ffe1a0; --ranura: #1e0f33; --ranura-borde: #5c3a8f; }
:root[data-tema="rosa"] { --acento-a: #ffe08a; --acento-b: #f0b13a; --acento-texto: #2a1800; --rgb-panel: 74, 24, 52; --rgb-claro: 112, 40, 80; --rgb-osc: 36, 10, 26; --rgb-hondo: 40, 10, 28; --rgb-hondo2: 32, 8, 22;
  --rgb-borde: 255, 170, 210; --rgb-tip: 30, 8, 20; --borde: #ffaad2; --boton-a: #a33a72; --boton-b: #6f2050; --texto: #fff0f7; --tenue: #e0b3c9;
  --acento: #ffd166; --acento-claro: #ffe6a8; --ranura: #330c22; --ranura-borde: #8f3a68; }
:root[data-tema="brasa"] { --acento-a: #ffe06a; --acento-b: #e8b014; --acento-texto: #2a1c00; --rgb-panel: 72, 24, 16; --rgb-claro: 108, 40, 24; --rgb-osc: 34, 10, 6; --rgb-hondo: 38, 10, 6; --rgb-hondo2: 30, 8, 4;
  --rgb-borde: 255, 170, 120; --rgb-tip: 28, 8, 4; --borde: #ffaa78; --boton-a: #a8432a; --boton-b: #6e2716; --texto: #fff3ec; --tenue: #e2b9a6;
  --acento: #ffd23f; --acento-claro: #ffe88a; --ranura: #2e0e07; --ranura-borde: #8f3a22; }
:root[data-tema="arena"] { --acento-a: #ffbf7a; --acento-b: #e8801e; --acento-texto: #2a1200; --rgb-panel: 70, 52, 30; --rgb-claro: 104, 80, 48; --rgb-osc: 34, 24, 12; --rgb-hondo: 36, 26, 12; --rgb-hondo2: 30, 22, 10;
  --rgb-borde: 236, 206, 140; --rgb-tip: 28, 20, 10; --borde: #ecce8c; --boton-a: #8a6a36; --boton-b: #5e4520; --texto: #fff8ea; --tenue: #d8c6a0;
  --acento: #ff9f43; --acento-claro: #ffcf8a; --ranura: #2b1f0e; --ranura-borde: #7d6233; }
:root[data-tema="pizarra"] { --acento-a: #8fdcff; --acento-b: #2fa6dc; --acento-texto: #062430; --rgb-panel: 40, 44, 50; --rgb-claro: 62, 68, 76; --rgb-osc: 20, 22, 26; --rgb-hondo: 22, 24, 28; --rgb-hondo2: 18, 20, 24;
  --rgb-borde: 190, 200, 212; --rgb-tip: 16, 18, 22; --borde: #bec8d4; --boton-a: #5a6472; --boton-b: #3b434e; --texto: #f2f5f8; --tenue: #aeb7c2;
  --acento: #4fc3f7; --acento-claro: #9ee3ff; --ranura: #1b1e23; --ranura-borde: #4a525e; }
/* los recuadros para elegir el tema en Options */
.op-temas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.op-tema { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 2px 4px; background: none; border: 1px solid transparent;
  border-radius: 8px; font-size: 11px; color: var(--tenue); }
.op-tema:hover { background: rgba(255,255,255,.05); filter: none; }
.op-tema.elegido { border-color: var(--acento); color: var(--texto); background: rgba(255,255,255,.06); }
.op-tema .muestra { position: relative; width: 40px; height: 26px; border-radius: 6px; border: 1px solid var(--m-borde);
  background: linear-gradient(var(--m-claro), var(--m-panel)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.op-tema .muestra i { position: absolute; right: 4px; bottom: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--m-acento);
  box-shadow: 0 0 0 1px rgba(0,0,0,.35); }


/* r11g: el rastreador de misiones, un solo panel que se mueve y se minimiza */
#ui .rastreador { right: auto; display: flex; flex-direction: column; gap: 0; background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
.rastreador > header { display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 4px 0 10px; cursor: move; user-select: none;
  background: linear-gradient(var(--panel-claro), var(--panel)); border-bottom: 1px solid var(--borde-suave); }
.rastreador.min > header { border-bottom: 0; }
.rastreador > header .titulo { flex: 1; font-weight: 700; font-size: 12.5px; }
.rastreador > header .titulo small { margin-left: 4px; padding: 0 6px; border-radius: 8px; background: var(--ranura); color: var(--acento-claro); font-size: 10.5px; }
.rastreador > header button.x { width: 20px; height: 18px; padding: 0; line-height: 16px; font-size: 12px; }
.rastreador .rq-lista { max-height: 320px; overflow-y: auto; scrollbar-width: thin; }
#ui .rastreador .rq { background: none; border: 0; border-radius: 0; border-top: 1px solid var(--borde-suave); padding: 5px 10px; }
#ui .rastreador .rq:first-child { border-top: 0; }
#ui .rastreador .rq:hover { background: rgba(255,255,255,.05); }

/* ---------------------------------------------------------------- r40b (Claude): pulido con el lenguaje del original
   (ver el bloque r40b de style.css: clavo dorado, doble filo, pestanas inclinadas) */
/* paneles de inicio: cabecera con el clavo y la linea dorada como las ventanas */
.panel-inicio { border-radius: 6px 16px 12px 12px; box-shadow: 0 0 0 1px var(--filo-oscuro), var(--sombra), inset 0 1px 0 rgba(255,255,255,.14); }
.panel-inicio > header { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 18px 8px 12px; color: #fff;
  border-radius: 6px 16px 0 0; border-bottom: 1px solid rgba(0,0,0,.35);
  background: linear-gradient(rgba(255,255,255,.13), rgba(255,255,255,.03) 55%, rgba(0,0,0,.14)), var(--panel-claro); }
.lugar-pj { border-radius: 6px 14px 10px 10px; box-shadow: 0 0 0 1px var(--filo-oscuro), var(--sombra), inset 0 1px 0 rgba(255,255,255,.1); }
.lugar-pj.elegido { box-shadow: 0 0 0 1px var(--filo-oscuro), 0 0 0 3px rgba(247,165,49,.35), var(--sombra); }
.lugar-pj b { text-shadow: 0 1px 0 #000; }
.ficha-pj dl { row-gap: 5px; }
.ficha-pj dt { font-size: 12px; }
.servidores li { border: 1px solid transparent; }
.servidores li:hover:not(.elegido) { background: rgba(var(--rgb-borde), .08); border-color: rgba(var(--rgb-borde), .2); }
.creacion-ao .creacion-vista { border-radius: 6px 12px 8px 8px; }

/* chat: las pestanas inclinadas del original (w003, filo dorado la activa) y el
   fondo que deja ver el mapa; mas cubierto al usarlo */
.chat.chat-ao { background: linear-gradient(rgba(var(--rgb-panel), .3), rgba(var(--rgb-panel), .62) 70%, rgba(var(--rgb-panel), .74));
  border-color: rgba(var(--rgb-borde), .4); border-radius: 5px 12px 8px 8px; transition: background .2s, border-color .2s;
  box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.3); }
.chat.chat-ao:hover, .chat.chat-ao:focus-within { background: linear-gradient(rgba(var(--rgb-panel), .62), rgba(var(--rgb-panel), .86)); border-color: var(--borde-suave); }
.chat .msg { text-shadow: 0 1px 1px #000, 0 0 3px rgba(0,0,0,.85); line-height: 1.38; }
.chat-pestanas { gap: 2px; border-bottom: 1px solid rgba(var(--rgb-borde), .3); padding: 4px 6px 0; margin: 0 0 2px; }
.chat-pestanas button:not(.mini) { --incl: 8px; position: relative; padding: 0 14px 0 9px; height: 19px; border-radius: 4px 0 0 0; border-bottom-color: transparent;
  clip-path: polygon(0 0, calc(100% - var(--incl)) 0, 100% 100%, 0 100%); }
.chat-pestanas button:not(.mini)::after { content: ""; position: absolute; top: -1px; right: -1px; bottom: -1px; width: var(--incl); pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1.1px), var(--filo-corte, rgba(var(--rgb-borde), .55)) calc(50% - 1.1px),
    var(--filo-corte, rgba(var(--rgb-borde), .55)) 50%, transparent 50%); }
.chat-pestanas button.activa { --filo-corte: var(--acento-claro); border-color: var(--acento-claro);
  background: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,0) 60%), linear-gradient(var(--acento-a), var(--acento-b)); text-shadow: none; }
.chat-pestanas button.mini { margin-bottom: 2px; }
.chat form input { background: rgba(var(--rgb-hondo2), .7); }
.chat-popup { border-radius: 5px 10px 6px 6px; box-shadow: 0 0 0 1px var(--filo-oscuro), var(--sombra); }

/* mascota: el marco con el mismo doble filo; los rotulos del equipo entran */
.mm-cabeza, .mm-detalle { box-shadow: 0 0 0 1px var(--filo-oscuro), var(--sombra), inset 0 1px 0 rgba(255,255,255,.12); }
.mm-fila .mm-equipo { gap: 2px; }
.mm-fila .mm-pieza { width: 40px; }
.mm-fila .mm-pieza small { font-size: 9.5px; letter-spacing: -.2px; white-space: nowrap; }
.fila-mascota { border-radius: 5px 10px 6px 6px; }
.fila-mascota:hover { border-color: var(--borde); }

/* Item Mall y Options: las mismas tarjetas */
.mall-oferta { border-radius: 4px 10px 6px 6px; }
.op-grupo { border-radius: 5px 10px 6px 6px; box-shadow: inset 0 1px 3px rgba(0,0,0,.3); }
.ventana-opciones .subt { color: var(--acento-claro); }
.op-tema.elegido { box-shadow: inset 0 0 0 1px var(--acento); }
/* el detalle de la mascota no se sale por abajo en pantallas bajas: desplaza */
.mm-detalle { max-height: max(220px, calc(100vh - 300px)); overflow-y: auto; }