/* ------------------------------------------------------------------
PlayTibia - capa de rediseno de la plantilla.
Se carga DESPUES de basic.css: solo define el marco (barra superior,
menu lateral, paneles y fondo). El contenido de cada pagina lo sigue
pintando basic.css, por eso aqui no se toca ninguna clase suya.
Todas las clases nuevas van con prefijo pt- para no chocar con
basic.css ni con bootstrap-myaac.css.
Paleta: blanco y dorado ("celestial"). Marfil para los paneles, oro
viejo para filos y titulos, bronce para el texto destacado. El artwork
de fondo sigue ahi pero muy lavado, como textura.
------------------------------------------------------------------ */
:root{
/* fondos */
--pt-ground:#ece5d6; /* suelo de la pagina, detras de todo */
--pt-white:#ffffff;
--pt-cream:#fdf9f1; /* panel: arriba */
--pt-cream-2:#f6efe0; /* panel: abajo */
--pt-head:#f8efd9; /* cabecera de panel: arriba */
--pt-head-2:#f0e3c2; /* cabecera de panel: abajo */
/* oro */
--pt-gold:#c8a349; /* oro base (filos, acentos) */
--pt-gold-hi:#e5c877; /* oro claro (brillos) */
--pt-gold-deep:#96761f; /* bronce (titulos y enlaces destacados) */
--pt-line:rgba(200,163,73,.45);
--pt-line-soft:rgba(200,163,73,.22);
/* texto */
--pt-text:#3c3529;
--pt-muted:#85795f;
--pt-green:#3f9e35;
/* sombras suaves, de luz calida */
--pt-shadow:0 1px 2px rgba(90,70,20,.10), 0 12px 28px -16px rgba(80,62,20,.45);
--pt-serif:'Cinzel','Trajan Pro',Georgia,serif;
--pt-sans:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
html,body{margin:0; padding:0}
/* Solo los componentes propios: NO se usa `*` ni `.pt-panel *` porque dentro
del panel central vive el contenido de las paginas, que basic.css maqueta
contando con el box-sizing por defecto. */
.pt-wrap, .pt-side, .pt-main, .pt-rail,
.pt-topbar, .pt-topbar .pt-inner, .pt-status, .pt-btn,
.pt-panel, .pt-panel-h, .pt-panel-b, .pt-menu, .pt-cat, .pt-cat-h,
.pt-sprite, .pt-hs-list, .pt-hs-row{box-sizing:border-box}
body{
font-family:var(--pt-sans); background:var(--pt-ground); color:var(--pt-text);
-webkit-font-smoothing:antialiased;
}
/* el artwork cubre la pagina entera y no se mueve al hacer scroll */
body::before{
content:''; position:fixed; inset:0; z-index:-2;
background:var(--pt-bg-image) center center/cover no-repeat;
}
/* Velo CLARO. El arte de fondo es luminoso y se quiere ver, asi que el velo
es suave: solo lo justo para que los paneles blancos no compitan con el.
Mas denso abajo, donde el arte es oscuro, y mas abierto arriba. */
body::after{
content:''; position:fixed; inset:0; z-index:-1;
background:
radial-gradient(120% 95% at 50% 0%, rgba(255,255,255,.10), rgba(255,255,255,.30) 68%),
linear-gradient(180deg, rgba(255,253,248,.14) 0%, rgba(247,241,230,.44) 100%);
}
.pt-pixel{image-rendering:pixelated; image-rendering:-moz-crisp-edges}
/* ---------------- barra superior ---------------- */
.pt-topbar{
position:sticky; top:0; z-index:400;
background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(252,247,238,.88));
backdrop-filter:blur(10px);
border-bottom:1px solid var(--pt-line);
box-shadow:0 1px 0 rgba(255,255,255,.7), 0 6px 18px -12px rgba(80,62,20,.45);
}
.pt-topbar .pt-inner{
max-width:1220px; margin:0 auto; padding:0 22px; height:74px;
display:flex; align-items:center; gap:22px;
}
/* El wordmark ya trae el nombre dibujado, asi que no lleva texto al lado */
.pt-brand{display:flex; align-items:center; flex-shrink:0; text-decoration:none}
/* sin efecto al pasar el raton: el logo se queda quieto */
.pt-brand img{
height:56px; width:auto; display:block;
filter:drop-shadow(0 2px 4px rgba(80,62,20,.30));
}
.pt-nav{display:flex; gap:2px; flex-wrap:wrap}
.pt-nav a{
font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
color:#7a6f5b; padding:9px 11px; border-radius:6px; transition:.15s; text-decoration:none;
}
.pt-nav a:hover{color:var(--pt-gold-deep); background:rgba(200,163,73,.13); text-decoration:none}
.pt-nav a.pt-on{color:var(--pt-gold-deep)}
/* la tienda, un punto por encima del resto de la barra */
.pt-nav a.pt-nav-shop{
color:var(--pt-gold-deep); font-weight:700;
background:rgba(200,163,73,.14); border:1px solid var(--pt-line);
box-shadow:0 1px 0 rgba(255,255,255,.55) inset;
}
.pt-nav a.pt-nav-shop:hover{
background:linear-gradient(180deg,#f4e4bb,#e8d19a); border-color:var(--pt-gold); color:#6f5514;
}
.pt-right{margin-left:auto; display:flex; align-items:center; gap:12px}
/* lleva a la pagina de quien esta en linea */
.pt-status{
display:flex; align-items:center; gap:8px; font-size:12.5px; color:#7a6f5b; white-space:nowrap;
padding:7px 13px; border:1px solid var(--pt-line); border-radius:999px;
background:rgba(255,255,255,.65); text-decoration:none; transition:.15s;
}
.pt-status:hover{
background:#fff; border-color:var(--pt-gold); color:var(--pt-gold-deep);
text-decoration:none; box-shadow:0 2px 8px -3px rgba(120,95,25,.45);
}
.pt-status b{color:var(--pt-text); font-weight:700}
.pt-status:hover b{color:var(--pt-gold-deep)}
.pt-dot{width:8px; height:8px; border-radius:50%; background:var(--pt-green);
box-shadow:0 0 0 3px rgba(63,158,53,.16); animation:pt-pulse 2.4s infinite}
.pt-dot.pt-off{background:#b6ab97; box-shadow:0 0 0 3px rgba(182,171,151,.18); animation:none}
@keyframes pt-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.pt-btn{
font-family:var(--pt-sans); font-size:13px; font-weight:600; letter-spacing:.02em;
padding:10px 18px; border-radius:7px; border:1px solid transparent; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center; gap:8px;
transition:.16s; white-space:nowrap; text-decoration:none;
}
.pt-btn:hover{text-decoration:none}
.pt-btn-gold{
background:linear-gradient(180deg,#eccd7e,#c8a349); color:#3a2e0d; border-color:#b08f34;
box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 4px 12px -5px rgba(120,95,25,.6);
}
.pt-btn-gold:hover{background:linear-gradient(180deg,#f4dc9b,#d6b158); color:#3a2e0d}
.pt-btn-ghost{background:rgba(255,255,255,.72); color:#7a6a45; border-color:var(--pt-line)}
.pt-btn-ghost:hover{background:#fff; color:var(--pt-gold-deep); border-color:var(--pt-gold)}
/* ---------------- rejilla: menu | contenido | cajas ---------------- */
.pt-wrap{
max-width:1400px; margin:0 auto; padding:26px 22px 60px; position:relative; z-index:5;
display:grid; grid-template-columns:288px minmax(0,1fr) 210px; gap:24px; align-items:start;
}
.pt-side{display:flex; flex-direction:column; gap:18px}
.pt-main{min-width:0}
/* Columna derecha. La caja de discord sigue siendo heredada (180px fijos y
fondo de imagen): no se puede estirar sin deformarla, asi que va centrada. */
.pt-rail{display:flex; flex-direction:column; gap:18px; align-items:center; width:210px}
.pt-rail .pt-panel{width:210px; box-sizing:border-box}
.pt-rail #Themeboxes{display:flex; flex-direction:column; align-items:center; gap:18px; width:210px}
.pt-rail #Themeboxes .pt-panel{width:210px}
/* restos del maquetado viejo por si vuelve alguna caja heredada */
.pt-rail #Themeboxes > br{display:none}
/* ---------------- paneles ---------------- */
.pt-panel{
background:linear-gradient(180deg,var(--pt-white) 0%,var(--pt-cream) 46%,var(--pt-cream-2) 100%);
border:1px solid var(--pt-line); border-radius:12px;
box-shadow:var(--pt-shadow); overflow:hidden;
}
/* filo de luz dorada en el canto superior */
.pt-panel::before{content:''; display:block; height:2px;
background:linear-gradient(90deg,transparent,var(--pt-gold),transparent)}
.pt-panel-h{
display:flex; align-items:center; justify-content:center; gap:10px; padding:13px 16px;
background:linear-gradient(180deg,var(--pt-head),var(--pt-head-2));
border-bottom:1px solid var(--pt-line);
}
/* el titulo de la pagina (columna central) se queda alineado a la izquierda */
.pt-main .pt-panel-h{justify-content:flex-start}
.pt-panel-h h2, .pt-panel-h h3{
margin:0; font-family:var(--pt-serif); font-weight:600;
letter-spacing:.11em; text-transform:uppercase; color:var(--pt-gold-deep);
text-shadow:0 1px 0 rgba(255,255,255,.65);
}
.pt-panel-h h3{font-size:13.5px}
.pt-panel-h h2{font-size:16px}
.pt-panel-b{padding:16px}
.pt-panel-b p{margin:0 0 13px; font-size:13px; color:var(--pt-muted); line-height:1.55}
.pt-side .pt-panel-b .pt-btn, .pt-rail .pt-panel-b .pt-btn{width:100%}
.pt-mini{display:block; text-align:center; margin-top:10px; font-size:12.5px;
color:var(--pt-gold-deep); font-weight:600; text-decoration:none}
.pt-mini:hover{text-decoration:underline; color:var(--pt-gold-deep)}
/* ---------------- menu lateral ---------------- */
.pt-menu{padding:6px}
.pt-cat{border-bottom:1px solid var(--pt-line-soft)}
.pt-cat:last-child{border-bottom:0}
.pt-cat-h{
display:flex; align-items:center; gap:10px; padding:7px 10px; cursor:pointer;
border-radius:7px; transition:.14s; user-select:none;
}
.pt-cat-h:hover{background:rgba(200,163,73,.12)}
.pt-cat-h img{width:32px; height:32px; flex-shrink:0; opacity:.95; display:block}
.pt-cat-h span{
font-family:var(--pt-serif); font-size:12.5px; font-weight:600; letter-spacing:.09em;
text-transform:uppercase; color:#6b5a30; flex:1;
}
.pt-chev{width:9px; height:9px; flex-shrink:0;
border-right:2px solid var(--pt-gold); border-bottom:2px solid var(--pt-gold);
transform:rotate(-45deg); transition:.2s}
.pt-cat.pt-open .pt-chev{transform:rotate(45deg)}
.pt-cat ul{list-style:none; margin:0 0 8px; padding:0 0 0 52px; display:none}
.pt-cat.pt-open ul{display:block}
.pt-cat li a{
display:block; padding:6px 10px; font-size:13px; color:#6d6350; border-radius:5px;
border-left:2px solid transparent; transition:.13s; text-decoration:none;
}
.pt-cat li a:hover{background:rgba(200,163,73,.14); border-left-color:var(--pt-gold);
color:var(--pt-gold-deep); padding-left:14px; text-decoration:none}
.pt-cat li a.pt-on{color:var(--pt-gold-deep); font-weight:600; border-left-color:var(--pt-gold);
background:rgba(200,163,73,.20)}
/* ---------------- boosted del dia ---------------- */
/* Creature y boss van lado a lado. La columna es estrecha, asi que el panel
lleva menos padding para dar ancho a las dos celdas, y los nombres parten
solo por espacios (nunca a mitad de palabra). */
.pt-boosted-b{padding:14px 10px}
.pt-boosted{display:flex; flex-direction:row; gap:6px; text-align:center}
.pt-boosted figure{flex:1 1 0; min-width:0; margin:0}
.pt-boosted img{margin:0 auto; display:block; max-height:52px; max-width:100%; width:auto}
/* caja fija donde el sprite se desplaza para quedar centrado por su dibujo
(ver pt_sprite() en index.php); el lienzo de outfit.php es 64x64 y las
criaturas de un tile se dibujan pegadas abajo a la derecha */
.pt-sprite{
display:block; width:52px; height:52px; margin:0 auto;
background-repeat:no-repeat; image-rendering:pixelated;
}
.pt-boosted figcaption{margin-top:7px; font-size:9.5px; letter-spacing:.06em;
text-transform:uppercase; color:var(--pt-muted)}
.pt-boosted b{
display:block; margin-top:3px; font-size:11px; line-height:1.3;
color:var(--pt-gold-deep); text-transform:none;
overflow-wrap:normal; word-break:normal; hyphens:none;
}
/* ---------------- caja de contenido de la pagina ----------------
El contenido lo sigue pintando basic.css a traves de .Content > .BoxContent
(106 reglas cuelgan de ahi). Esas dos clases traen ademas restos del layout
viejo -- .Content con top:796px y border-right:550px, .BoxContent con altura
minima y fondo propio -- que aqui se anulan para que encajen en el panel. */
.pt-content-b{padding:18px 20px}
.pt-content-b .Content{
position:static; top:auto; left:auto; width:100%;
margin:0; border:0; padding:0;
}
.pt-content-b .BoxContent{
background:none transparent; background-color:transparent;
min-height:0; height:auto; width:100%; padding:0; margin:0;
}
.pt-content-b img{max-width:100%; height:auto}
.pt-content-b table{max-width:100%}
/* --- el contenido heredado, en blanco y dorado ---
basic.css pinta las tablas en marron (#5f4d41 las barras de titulo,
#d4c0a1 el fondo). Aqui se recolorean SOLO dentro del panel central,
sin tocar basic.css, para que no desentonen con el resto.
Las filas alternas y las cabeceras de tabla salen de config.ini
(darkborder / lightborder / vdarkborder), ya cambiados ahi. */
.pt-content-b .CaptionContainer,
.pt-content-b .CaptionInnerContainer{
background-color:var(--pt-gold) !important;
background-image:linear-gradient(180deg,#d4b262,#bd9738) !important;
}
.pt-content-b .CaptionVerticalLeft,
.pt-content-b .CaptionVerticalRight,
.pt-content-b .CaptionEdgeLeftTop, .pt-content-b .CaptionEdgeRightTop,
.pt-content-b .CaptionEdgeLeftBottom, .pt-content-b .CaptionEdgeRightBottom{
background-image:none !important; background-color:transparent !important;
}
.pt-content-b .CaptionContainer .Text{color:#fff; text-shadow:0 1px 1px rgba(90,70,20,.55)}
.pt-content-b .TableContentContainer{
background-color:#fffdf8; border:1px solid var(--pt-line); box-shadow:none;
border-radius:6px; overflow:hidden;
}
.pt-content-b .TableContainer{border-color:transparent}
/* --- formularios heredados (crear cuenta, login, etc.) ---
El marcado sale de los twig de MyAAC y no se toca: aqui solo se le da el
aspecto del resto del sitio. Campos con foco dorado, asteriscos en un rojo
apagado, y las opciones (.OptionContainer, que envuelve cada radio de Sex
y Vocation) convertidas en tarjetas seleccionables con :has(). */
.pt-content-b input[type=text],
.pt-content-b input[type=password],
.pt-content-b input[type=email],
.pt-content-b input:not([type]),
.pt-content-b select{
font-family:var(--pt-sans); font-size:13.5px; color:var(--pt-text);
background:#fff; border:1px solid var(--pt-line); border-radius:7px;
padding:7px 10px; transition:border-color .14s, box-shadow .14s;
}
.pt-content-b input[type=text]:focus,
.pt-content-b input[type=password]:focus,
.pt-content-b input[type=email]:focus,
.pt-content-b input:not([type]):focus,
.pt-content-b select:focus{
outline:0; border-color:var(--pt-gold); box-shadow:0 0 0 3px rgba(200,163,73,.18);
}
/* Mismo ancho para los campos del registro: el de personaje lo saca del
`size` = character_name_max_length y quedaba mas corto que los demas. */
.pt-content-b #account_input,
.pt-content-b #email,
.pt-content-b #password,
.pt-content-b #password2,
.pt-content-b #character_name,
.pt-content-b #account_country{width:290px; max-width:100%}
/* basic.css pone `.LabelV{vertical-align:top}` y las etiquetas quedaban
pegadas arriba de su celda, desalineadas del campo. Se centran, salvo
cuando la fila lleva un textarea: ahi el alto es grande y la etiqueta
debe seguir arriba, junto al inicio del recuadro. */
.pt-content-b .LabelV{vertical-align:middle}
.pt-content-b tr:has(textarea) .LabelV{vertical-align:top; padding-top:9px}
/* Filas con enlace de sugerencia debajo del campo (Account Name / Character
Name): la celda es mas alta que el input, asi que centrarla dejaba la
etiqueta a medio camino entre el campo y el enlace. Se alinea con el
INPUT: arriba, desplazada lo que suman su borde y su relleno. */
.pt-content-b tr:has(#SuggestAccountNumber) .LabelV,
.pt-content-b tr:has(#SuggestCharacterName) .LabelV{vertical-align:top; padding-top:10px}
/* el asterisco de obligatorio, sin gritar */
.pt-content-b .LabelV span[style*="color: red"],
.pt-content-b span[style*="color: red"]{color:#b4795c !important; font-weight:700}
/* [suggest number] / [suggest name] */
.pt-content-b #SuggestAccountNumber, .pt-content-b #SuggestCharacterName{
margin-top:5px; font-size:12px;
}
.pt-content-b #SuggestAccountNumber a, .pt-content-b #SuggestCharacterName a{
color:var(--pt-gold-deep); font-weight:600; text-decoration:none;
}
.pt-content-b #SuggestAccountNumber a:hover,
.pt-content-b #SuggestCharacterName a:hover{text-decoration:underline}
/* indicadores de validacion: alineados con el campo, no pegados */
.pt-content-b img[id$="_indicator"]{vertical-align:middle; margin-left:8px}
/* La bandera del pais va a TAMANO REAL (16x11). Los GIF de MyAAC son de ese
tamano y no hay un juego mayor -- thornia.online usa los mismos y tambien
los pinta a escala 1:1, por eso no se le ven rotos. Cualquier ampliacion
los emborrona o los deja a cuadros. El marco les da presencia sin tocar
la escala. */
.pt-content-b #account_country_img{
width:16px; height:11px; margin-left:10px; vertical-align:middle;
border:1px solid rgba(90,70,20,.30); border-radius:2px;
box-shadow:0 1px 2px rgba(80,62,20,.18);
}
/* opciones de Sex y Vocation como tarjetas */
.pt-content-b .OptionContainer{
display:inline-flex; align-items:center; gap:8px;
margin:0 8px 8px 0 !important; padding:8px 14px;
border:1px solid var(--pt-line); border-radius:8px; background:#fffdf8;
cursor:pointer; transition:.14s;
}
.pt-content-b .OptionContainer:hover{background:rgba(200,163,73,.12); border-color:var(--pt-gold)}
.pt-content-b .OptionContainer:has(input:checked){
background:linear-gradient(180deg,#f6e8c6,#eedcb0); border-color:var(--pt-gold);
box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}
.pt-content-b .OptionContainer label{
cursor:pointer; text-transform:capitalize; font-weight:600;
font-family:var(--pt-sans); font-size:13.5px; color:#5a5142;
}
.pt-content-b .OptionContainer:has(input:checked) label{color:var(--pt-gold-deep)}
.pt-content-b .OptionContainer input[type=radio]{accent-color:var(--pt-gold); cursor:pointer; margin:0}
/* --- botones heredados de Tibia (azules) ---
.BigButton lleva el texto en un de verdad, asi que se recolorea
entero. .MediumButton en cambio trae el texto HORNEADO en un PNG
(mediumbutton_createaccount.png, letras amarillas): no se puede cambiar
el texto, asi que se oscurece con un filtro para que lea sobre el oro.
Las variantes verde y roja se detectan por el gif que viene en el style
en linea, para no perder el significado de confirmar / borrar. */
.pt-content-b .BigButton{
background:linear-gradient(180deg,#eccd7e,#c8a349) !important;
border:1px solid #b08f34; border-radius:6px;
box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 3px 9px -4px rgba(120,95,25,.55);
}
.pt-content-b .BigButton:hover{background:linear-gradient(180deg,#f4dc9b,#d6b158) !important}
.pt-content-b .BigButtonOver{display:none !important}
.pt-content-b .BigButtonText{
color:#3a2e0d; font-family:var(--pt-sans); font-size:12.5px; font-weight:600;
letter-spacing:.02em; text-shadow:0 1px 0 rgba(255,255,255,.40);
}
.pt-content-b .BigButton[style*="green"]{
background:linear-gradient(180deg,#a8d191,#63a04a) !important; border-color:#4f8a38;
}
.pt-content-b .BigButton[style*="green"]:hover{background:linear-gradient(180deg,#bcdfa7,#71b055) !important}
.pt-content-b .BigButton[style*="red"]{
background:linear-gradient(180deg,#e6a294,#c26550) !important; border-color:#a54b39;
}
.pt-content-b .BigButton[style*="red"]:hover{background:linear-gradient(180deg,#f0b6a8,#d0745e) !important}
.pt-content-b .MediumButtonBackground{
background:linear-gradient(180deg,#eccd7e,#c8a349) !important;
border:1px solid #b08f34; border-radius:7px;
box-shadow:0 1px 0 rgba(255,255,255,.55) inset, 0 3px 10px -4px rgba(120,95,25,.55);
}
.pt-content-b .MediumButtonBackground:hover{background:linear-gradient(180deg,#f4dc9b,#d6b158) !important}
.pt-content-b .MediumButtonOver{background-image:none !important}
/* El texto venia HORNEADO en un PNG de letras amarillas. Oscurecerlo con un
filtro dejaba los trazos emborronados, asi que en vez de eso se oculta la
imagen (el sigue ahi, transparente y clicable, porque
es quien envia el formulario) y la etiqueta se pinta como texto real. */
.pt-content-b .MediumButtonBackground{position:relative}
.pt-content-b .MediumButtonText{opacity:0; width:100%; height:100%; cursor:pointer}
.pt-content-b .MediumButtonBackground:has(.MediumButtonText[src*="createaccount"])::after{
content:"Create Account";
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-family:var(--pt-sans); font-size:13.5px; font-weight:600; letter-spacing:.02em;
color:#3a2e0d; text-shadow:0 1px 0 rgba(255,255,255,.40); pointer-events:none;
}
/* --- titular de cada noticia ---
basic.css lo pinta con un GIF rojo repetido y coloca fecha y titulo en
posiciones absolutas cableadas (left:50px / left:135px) del maquetado
viejo. Aqui la barra pasa al mismo oro que las cabeceras de tabla y sus
piezas se reordenan con flex, que ademas deja que el titulo use todo el
ancho en vez de recortarse. Vale para News, News Archive y Featured. */
.pt-content-b .NewsHeadline{margin-bottom:14px}
.pt-content-b .NewsHeadlineBackground{
display:flex; align-items:center; gap:10px;
height:auto !important; min-height:34px; padding:6px 12px;
margin-bottom:0 !important;
background-image:linear-gradient(180deg,#d4b262,#bd9738) !important;
background-repeat:no-repeat !important;
border:1px solid var(--pt-line) !important; border-radius:7px;
box-shadow:0 1px 0 rgba(255,255,255,.45) inset;
}
.pt-content-b .NewsHeadlineIcon{
position:static !important; top:auto !important; left:auto !important;
margin:0 !important; flex:0 0 auto; image-rendering:pixelated;
}
.pt-content-b .NewsHeadlineDate{
position:static !important; top:auto !important; left:auto !important;
width:auto !important; flex:0 0 auto;
font-size:11px !important; font-weight:600; color:#fffdf6;
text-shadow:0 1px 1px rgba(90,70,20,.45); white-space:nowrap;
}
.pt-content-b .NewsHeadlineText{
position:static !important; top:auto !important; left:auto !important;
flex:1 1 auto; min-width:0;
font-family:var(--pt-serif); font-size:14px !important; font-weight:700;
color:#fff; text-shadow:0 1px 1px rgba(90,70,20,.55); line-height:1.3;
}
.pt-content-b .NewsHeadlineAuthor{
position:static !important; top:auto !important; right:auto !important;
flex:0 0 auto; font-size:11px !important; color:#fffdf6;
}
.pt-content-b td{border-color:rgba(200,163,73,.26)}
.pt-content-b .BoxContent, .pt-content-b .BoxContent td{color:#463d2d}
/* ---------------- bug tracker ----------------
La pagina emite marcado propio con clases pt-bt-*; aqui se le da el mismo
lenguaje que el resto: tarjetas de marfil, filos dorados y etiquetas de
estado con color propio. */
.pt-bt{font-family:var(--pt-sans); color:var(--pt-text); font-size:14px}
/* presentacion para quien no ha entrado */
.pt-bt-intro h3{
margin:0 0 10px; font-family:var(--pt-serif); font-size:20px; color:var(--pt-gold-deep);
}
.pt-bt-intro > p{margin:0 0 18px; line-height:1.7; color:#5a5142; max-width:62ch}
.pt-bt-cats{
list-style:none; margin:0 0 22px; padding:0;
display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px;
}
.pt-bt-cats li{
background:linear-gradient(180deg,#fffdf8,#f9f3e6);
border:1px solid var(--pt-line-soft); border-left:3px solid var(--pt-gold);
border-radius:8px; padding:10px 13px;
}
.pt-bt-cats b{display:block; font-size:13px; color:var(--pt-gold-deep); letter-spacing:.03em}
.pt-bt-cats span{display:block; margin-top:3px; font-size:12.5px; color:var(--pt-muted); line-height:1.45}
.pt-bt-cta{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.pt-bt-link{color:var(--pt-gold-deep); font-weight:600; font-size:13px; text-decoration:none}
.pt-bt-link:hover{text-decoration:underline}
/* lista de reportes */
.pt-bt-list{border:1px solid var(--pt-line); border-radius:10px; overflow:hidden; background:#fffdf8}
.pt-bt-list-h{
display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px;
background:linear-gradient(180deg,var(--pt-head),var(--pt-head-2));
border-bottom:1px solid var(--pt-line);
}
.pt-bt-list-h h3{
margin:0; font-family:var(--pt-serif); font-size:14px; letter-spacing:.09em;
text-transform:uppercase; color:var(--pt-gold-deep);
}
.pt-bt-list-h span{font-size:12px; color:var(--pt-muted)}
.pt-bt-new{padding:7px 14px; font-size:12.5px}
.pt-bt-row{
display:flex; align-items:center; gap:12px; padding:12px 16px;
border-bottom:1px solid var(--pt-line-soft); text-decoration:none; color:var(--pt-text);
transition:background .14s;
}
.pt-bt-row:last-child{border-bottom:0}
.pt-bt-row:hover{background:rgba(200,163,73,.10); text-decoration:none}
.pt-bt-subject{flex:1; min-width:0; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pt-bt-empty{padding:26px 16px; text-align:center; color:var(--pt-muted)}
.pt-bt-empty b{display:block; margin-bottom:5px; color:var(--pt-text)}
.pt-bt-empty span{font-size:13px}
/* etiquetas */
.pt-bt-tag{
flex:0 0 auto; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:var(--pt-gold-deep); background:rgba(200,163,73,.16);
border:1px solid var(--pt-line); border-radius:999px; padding:3px 9px;
}
.pt-bt-badge{
flex:0 0 auto; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
border-radius:999px; padding:3px 10px; border:1px solid;
}
.pt-bt-open{color:#3f7a2e; background:rgba(63,158,53,.13); border-color:rgba(63,158,53,.40)}
.pt-bt-answer{color:#8a6a12; background:rgba(200,163,73,.18); border-color:var(--pt-line)}
.pt-bt-closed{color:#7c7365; background:rgba(120,110,90,.10); border-color:rgba(120,110,90,.30)}
/* hilo y respuestas */
.pt-bt-thread, .pt-bt-msg{
background:#fffdf8; border:1px solid var(--pt-line); border-radius:10px;
margin-bottom:14px; overflow:hidden;
}
.pt-bt-head{
display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px;
background:linear-gradient(180deg,var(--pt-head),var(--pt-head-2));
border-bottom:1px solid var(--pt-line);
}
.pt-bt-head h3{
margin:0; flex:1; min-width:0; font-family:var(--pt-serif); font-size:15px; color:#4a3c1c;
}
.pt-bt-meta{padding:10px 16px 0; font-size:12.5px; color:var(--pt-muted)}
.pt-bt-text{padding:14px 16px; line-height:1.7; color:#4c4335}
.pt-bt-msg header{
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:9px 16px; border-bottom:1px solid var(--pt-line-soft); background:rgba(200,163,73,.07);
}
.pt-bt-who{font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.pt-bt-msg-admin{border-left:3px solid var(--pt-gold)}
.pt-bt-msg-admin .pt-bt-who{color:var(--pt-gold-deep)}
.pt-bt-msg-player{border-left:3px solid rgba(120,110,90,.45)}
.pt-bt-msg-player .pt-bt-who{color:#6d6350}
.pt-bt-nr{font-size:11.5px; color:var(--pt-muted)}
/* formularios */
.pt-bt-form{
background:#fffdf8; border:1px solid var(--pt-line); border-radius:10px; padding:18px 18px 16px;
display:flex; flex-direction:column; gap:6px;
}
.pt-bt-form label, .pt-bt-label{
font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
color:var(--pt-gold-deep); margin-top:10px;
}
.pt-bt-form label:first-of-type{margin-top:0}
.pt-bt-form input[type=text],
.pt-bt-form select,
.pt-bt-form textarea{
width:100%; box-sizing:border-box; font-family:var(--pt-sans); font-size:14px; color:var(--pt-text);
background:#fff; border:1px solid var(--pt-line); border-radius:7px; padding:9px 11px;
transition:border-color .14s, box-shadow .14s;
}
.pt-bt-form textarea{resize:vertical; line-height:1.6}
.pt-bt-form input[type=text]:focus,
.pt-bt-form select:focus,
.pt-bt-form textarea:focus{
outline:0; border-color:var(--pt-gold); box-shadow:0 0 0 3px rgba(200,163,73,.18);
}
.pt-bt-radios{display:flex; gap:18px; margin-top:4px}
.pt-bt-radios label{
margin:0; display:flex; align-items:center; gap:7px; text-transform:none;
letter-spacing:0; font-weight:500; font-size:13.5px; color:var(--pt-text);
}
.pt-bt-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:16px}
.pt-bt-hint{margin:12px 0 0; font-size:12.5px; color:var(--pt-muted); line-height:1.5}
.pt-bt-note{
background:rgba(200,163,73,.10); border:1px solid var(--pt-line); border-radius:9px;
padding:14px 16px; color:#5a5142;
}
.pt-bt-error{
background:rgba(190,80,60,.08); border:1px solid rgba(190,80,60,.35); border-left:3px solid #b4503c;
border-radius:9px; padding:12px 16px; margin-bottom:16px; color:#8a3c2c;
}
.pt-bt-error ul{margin:7px 0 0; padding-left:20px}
.pt-bt-error li{margin:3px 0}
/* premiar al reportero (solo staff) */
.pt-bt-reward{
margin-top:18px; background:linear-gradient(180deg,#fffdf8,#f9f2e2);
border:1px solid var(--pt-line); border-left:3px solid var(--pt-gold);
border-radius:10px; padding:16px 18px;
}
.pt-bt-reward > header{
display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap;
margin-bottom:14px;
}
.pt-bt-reward h3{
margin:0; font-family:var(--pt-serif); font-size:14px; letter-spacing:.08em;
text-transform:uppercase; color:var(--pt-gold-deep);
}
.pt-bt-reward > header span{font-size:12px; color:var(--pt-muted)}
.pt-bt-reward-form{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap}
.pt-bt-field{display:flex; flex-direction:column; gap:5px}
.pt-bt-field label{
font-size:11.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
color:var(--pt-gold-deep);
}
.pt-bt-field input, .pt-bt-field select{
font-family:var(--pt-sans); font-size:14px; color:var(--pt-text);
background:#fff; border:1px solid var(--pt-line); border-radius:7px; padding:8px 11px;
}
.pt-bt-field input{width:130px}
.pt-bt-field input:focus, .pt-bt-field select:focus{
outline:0; border-color:var(--pt-gold); box-shadow:0 0 0 3px rgba(200,163,73,.18);
}
.pt-bt-confirm{
background:rgba(200,163,73,.12); border:1px solid var(--pt-line);
border-radius:9px; padding:14px 16px;
}
.pt-bt-confirm p{margin:0 0 10px; line-height:1.6; color:#4c4335}
.pt-bt-confirm b{color:var(--pt-gold-deep)}
.pt-bt-warn{color:#9b5720 !important; font-weight:600}
.pt-bt-confirm .pt-bt-actions{margin-top:0}
.pt-bt-ok{
background:rgba(63,158,53,.10); border:1px solid rgba(63,158,53,.38);
border-left:3px solid #3f9e35; border-radius:9px;
padding:12px 16px; margin-bottom:14px; color:#3d6b32; line-height:1.55;
}
.pt-bt-ok b{color:#2f5a26}
/* basic.css tiene `.Content a {color:azul; font-weight:bold}`, que gana por
especificidad a los enlaces y botones propios dentro del contenido. */
.pt-content-b .pt-btn-gold, .pt-content-b .pt-btn-gold:hover{color:#3a2e0d; font-family:var(--pt-sans)}
.pt-content-b .pt-btn-ghost{color:#7a6a45; font-family:var(--pt-sans)}
.pt-content-b .pt-bt-link{color:var(--pt-gold-deep); font-family:var(--pt-sans)}
.pt-content-b .pt-bt-row{color:var(--pt-text); font-family:var(--pt-sans); font-weight:400}
.pt-content-b .pt-bt-row .pt-bt-subject{font-weight:600}
/* ---------------- pie ---------------- */
.pt-footer{
border-top:1px solid var(--pt-line); padding:26px 22px 40px;
text-align:center; color:#8b8069; font-size:12.5px; position:relative; z-index:5;
}
.pt-footer a{color:var(--pt-gold-deep); text-decoration:none}
.pt-footer a:hover{color:#6f5514; text-decoration:underline}
.pt-footer .pt-fl{display:flex; gap:20px; justify-content:center; margin-bottom:12px; flex-wrap:wrap}
/* pantallas medianas: las cajas bajan debajo del contenido, en fila */
@media (max-width:1180px){
.pt-wrap{grid-template-columns:288px minmax(0,1fr)}
.pt-rail{grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-start}
.pt-rail .pt-panel{width:auto; min-width:260px}
.pt-rail #Themeboxes{flex-direction:row; flex-wrap:wrap; align-items:flex-start}
}
@media (max-width:900px){
.pt-wrap{grid-template-columns:1fr}
.pt-nav{display:none}
}
@font-face{
font-family:"Martel";
src:url("martel.ttf") format("truetype");
font-weight:400 900;font-display:swap;
}
/* ====================== Cuenta atras del lanzamiento (22/09/2026) ======================
Barra bajo el encabezado, en todas las paginas. El marcado esta en index.php. */
.pt-countdown{
background:linear-gradient(180deg,#2a2118 0%,#1b150f 100%);
border-top:1px solid var(--pt-gold-deep);
border-bottom:1px solid var(--pt-gold-deep);
box-shadow:inset 0 1px 0 rgba(229,200,119,.25), 0 2px 6px rgba(0,0,0,.35);
}
.pt-countdown-in{
max-width:1200px;margin:0 auto;padding:16px 16px;
display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;
text-align:center;
}
.pt-countdown-label{
font-family:"Martel",Georgia,serif;
color:var(--pt-gold-hi);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
font-size:22px;text-shadow:0 1px 0 rgba(0,0,0,.6);
}
.pt-countdown-clock{display:flex;gap:10px;}
.pt-countdown-clock b{
display:flex;align-items:baseline;gap:2px;
background:rgba(0,0,0,.35);border:1px solid var(--pt-line);border-radius:4px;
padding:8px 14px;color:var(--pt-white);font-size:32px;line-height:1;
font-variant-numeric:tabular-nums;min-width:74px;justify-content:center;
}
.pt-countdown-clock i{font-style:normal;font-size:16px;color:var(--pt-gold);}
.pt-countdown-when{color:#cbbfa6;font-size:15px;}
.pt-countdown.is-live{background:linear-gradient(180deg,#26301c 0%,#18200f 100%);}
/* Evento de rate (doble exp/skill/loot, 03/10/2026): insignia luminosa en la franja verde.
Medallon con el multiplicador + nombre + reloj por segmentos + destello que la recorre.
Cada tipo tiene su color (--ev): exp ambar, skill azul, loot esmeralda. */
.pt-event{
--ev:#ffb547; --ev-soft:rgba(255,181,71,.35);
position:relative;overflow:hidden;isolation:isolate;
display:inline-flex;align-items:center;gap:14px;
padding:6px 8px 6px 6px;border-radius:999px;
background:linear-gradient(180deg,#3a2c14 0%,#1d150a 100%);
border:1.5px solid var(--ev);
box-shadow:0 0 0 3px rgba(0,0,0,.35),0 0 18px var(--ev-soft),inset 0 1px 0 rgba(255,255,255,.12);
white-space:nowrap;line-height:1.1;
animation:ptEvGlow 2.6s ease-in-out infinite;
}
.pt-ev-skill{--ev:#5cc8ff;--ev-soft:rgba(92,200,255,.35)}
.pt-ev-loot{--ev:#57e39a;--ev-soft:rgba(87,227,154,.35)}
.pt-ev-random{--ev:#e5c877;--ev-soft:rgba(229,200,119,.25)}
/* destello que cruza la insignia */
.pt-event::after{
content:"";position:absolute;top:0;bottom:0;left:-40%;width:35%;z-index:-1;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
transform:skewX(-20deg);animation:ptEvShine 4.5s ease-in-out infinite;
}
.pt-ev-medal{
flex:none;width:46px;height:46px;border-radius:50%;
display:grid;place-items:center;
background:radial-gradient(circle at 35% 30%,#fff6d8 0%,#f0c95a 35%,#a8761c 80%,#6b4a10 100%);
box-shadow:0 0 0 2px var(--ev),0 0 14px var(--ev),inset 0 -3px 6px rgba(0,0,0,.35);
}
.pt-ev-medal b{
font-family:"Cinzel",Georgia,serif;font-weight:700;font-size:19px;color:#2a1a04;
text-shadow:0 1px 0 rgba(255,255,255,.55);letter-spacing:-.02em;
}
.pt-ev-txt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left}
.pt-ev-kind{
font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ev);
display:flex;align-items:center;gap:6px;
}
.pt-event.is-active .pt-ev-kind::before{
content:"";width:7px;height:7px;border-radius:50%;background:var(--ev);
box-shadow:0 0 8px var(--ev);animation:ptEvBlink 1.2s ease-in-out infinite;
}
.pt-ev-name{
font-family:"Cinzel",Georgia,serif;font-weight:700;font-size:21px;letter-spacing:.02em;
background:linear-gradient(180deg,#fffbe9 0%,#f3d27a 55%,#c8952e 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 1px 0 rgba(0,0,0,.7));
}
.pt-ev-clock{
display:flex;flex-direction:column;align-items:center;gap:3px;
padding:5px 12px;border-radius:999px;background:rgba(0,0,0,.4);
border:1px solid rgba(255,255,255,.08);
}
.pt-ev-clock small{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#cbbfa6}
.pt-ev-segs{display:flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums}
.pt-ev-segs b{
min-width:30px;padding:3px 4px;border-radius:5px;text-align:center;
background:linear-gradient(180deg,#2c2416,#120d06);border:1px solid rgba(229,200,119,.35);
color:#fff;font-size:15px;font-weight:700;
}
.pt-ev-segs i{font-style:normal;color:var(--ev);font-weight:700}
/* proximo evento: misma forma, sin brillo, mas apagado */
.pt-event.is-next{animation:none;box-shadow:0 0 0 3px rgba(0,0,0,.35);border-style:dashed}
.pt-event.is-next .pt-ev-medal{filter:saturate(.55) brightness(.9);box-shadow:0 0 0 2px var(--ev)}
.pt-event.is-next::after{display:none}
@keyframes ptEvGlow{0%,100%{box-shadow:0 0 0 3px rgba(0,0,0,.35),0 0 14px var(--ev-soft),inset 0 1px 0 rgba(255,255,255,.12)}
50%{box-shadow:0 0 0 3px rgba(0,0,0,.35),0 0 28px var(--ev),inset 0 1px 0 rgba(255,255,255,.12)}}
@keyframes ptEvShine{0%{left:-40%}55%,100%{left:120%}}
@keyframes ptEvBlink{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.pt-event,.pt-event::after,.pt-ev-kind::before{animation:none}}
.pt-ev-medal.is-long b{font-size:14px;letter-spacing:-.04em}
@media (max-width:640px){
.pt-event{gap:8px 10px;padding:6px 10px 8px 6px;flex-wrap:wrap;justify-content:center;border-radius:22px;white-space:normal;max-width:calc(100vw - 24px)}
.pt-ev-clock{flex-direction:row;gap:8px;padding:4px 10px}
.pt-ev-medal{width:38px;height:38px}
.pt-ev-medal b{font-size:16px}
.pt-ev-name{font-size:17px}
.pt-ev-clock{padding:4px 8px}
.pt-ev-segs b{min-width:24px;font-size:13px}
}
@media (max-width:640px){
.pt-countdown-in{gap:8px;padding:8px 10px;}
.pt-countdown-label{font-size:17px;width:100%;}
.pt-countdown-when{width:100%;}
.pt-countdown-clock b{font-size:24px;min-width:56px;padding:6px 10px;}
}
/* ============ Crear personaje: centrar los cuadros de mundo (23/09/2026) ============
La plantilla de MyAAC deja las celdas con ancho en porcentaje (20% y 33%), pensadas para
cuando hay varios mundos. Con un solo mundo la tabla se estira y el cuadro queda pegado a la
izquierda. Se les quita el ancho fijo y se centra la tabla. */
#filterbox_location table,
#filterbox_pvp table,
#filterbox_servertype table{
margin-left:auto !important;margin-right:auto !important;width:auto !important;
}
#filterbox_location td,
#filterbox_pvp td{
width:auto !important;text-align:center;
}
#filterbox_pvp td:empty{display:none;}
/* ---------------- folleto emergente de promocion (templates/playtibia/promo.php) ----------------
Modal que salta en la portada. Se apaga solo por fecha; el CSS puede quedarse
aqui aunque la campana termine. */
.pt-flyer-overlay{
position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:20px;
background:rgba(38,30,12,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
opacity:0; transition:opacity .18s ease;
}
.pt-flyer-overlay.is-open{opacity:1}
/* OJO: `display:grid` de arriba gana sobre el `display:none` que el navegador aplica a
[hidden], asi que sin estas dos reglas el overlay sigue tapando la pagina —invisible,
pero capturando TODOS los clics— antes de abrirse y despues de cerrarse. */
.pt-flyer-overlay[hidden]{display:none}
.pt-flyer-overlay:not(.is-open){pointer-events:none}
.pt-flyer-overlay.is-open{pointer-events:auto}
.pt-flyer{
box-sizing:border-box; width:min(420px,100%); max-height:calc(100vh - 40px); overflow:auto;
border-radius:16px; border:1px solid var(--pt-gold); background:var(--pt-cream);
box-shadow:0 30px 70px -20px rgba(30,22,4,.75); position:relative;
transform:translateY(10px) scale(.98); transition:transform .22s cubic-bezier(.2,.8,.3,1);
}
.pt-flyer-overlay.is-open .pt-flyer{transform:none}
.pt-flyer-x{
position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px; padding:0;
border-radius:50%; cursor:pointer; font-size:20px; line-height:1;
border:1px solid rgba(255,255,255,.55); background:rgba(20,14,2,.42); color:#fff;
}
.pt-flyer-x:hover{background:rgba(20,14,2,.68)}
/* mitad de arriba: artwork + titulo, como la portada de un folleto */
.pt-flyer-art{
position:relative; padding:34px 26px 24px; border-radius:15px 15px 0 0;
background-size:cover; background-position:center; text-align:center; overflow:hidden;
}
.pt-flyer-art::after{
content:''; position:absolute; inset:0;
background:linear-gradient(180deg,rgba(28,20,4,.35) 0%,rgba(28,20,4,.72) 100%);
}
.pt-flyer-art > *{position:relative; z-index:1}
.pt-flyer-kicker{
display:inline-block; margin-bottom:10px; padding:4px 12px; border-radius:99px;
background:linear-gradient(180deg,var(--pt-gold-hi),var(--pt-gold)); color:#41320a;
border:1px solid var(--pt-gold-deep);
font-family:var(--pt-sans); font-size:11px; font-weight:700;
text-transform:uppercase; letter-spacing:1.2px;
}
.pt-flyer-titulo{
margin:0; font-family:var(--pt-serif); font-size:30px; line-height:1.15; color:#fff;
text-shadow:0 2px 10px rgba(0,0,0,.6); letter-spacing:.5px;
}
.pt-flyer-titulo em{
display:block; margin-top:2px; font-style:normal; font-size:58px; line-height:1;
background:linear-gradient(180deg,#fff3cf,var(--pt-gold)); -webkit-background-clip:text;
background-clip:text; color:transparent; filter:drop-shadow(0 3px 8px rgba(0,0,0,.45));
}
/* mitad de abajo: el mensaje y la llamada a la accion */
.pt-flyer-cuerpo{padding:20px 26px 24px; text-align:center}
.pt-flyer-txt{margin:0 0 16px; font-size:14px; line-height:1.55; color:var(--pt-text)}
.pt-flyer-fecha{
display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
margin-bottom:18px; padding:10px 14px; border-radius:10px;
background:linear-gradient(180deg,#fff8e6,#f5e8c4); border:1px solid var(--pt-line);
}
.pt-flyer-hasta{font-family:var(--pt-serif); font-size:15px; color:var(--pt-gold-deep)}
.pt-flyer-dias{
font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
color:#7a2f2f; background:rgba(160,60,40,.12); border:1px solid rgba(160,60,40,.3);
padding:3px 9px; border-radius:99px;
}
.pt-flyer-cta{
display:block; padding:13px 20px; border-radius:10px; text-decoration:none;
background:linear-gradient(180deg,var(--pt-gold-hi),var(--pt-gold));
border:1px solid var(--pt-gold-deep); color:#41320a;
font-family:var(--pt-serif); font-size:16px; letter-spacing:.5px;
box-shadow:0 6px 16px -8px rgba(120,90,20,.8);
}
.pt-flyer-cta:hover{background:linear-gradient(180deg,#f3daa0,var(--pt-gold-hi)); color:#2f2306}
.pt-flyer-luego{
margin-top:10px; padding:6px; width:100%; cursor:pointer;
background:none; border:0; color:var(--pt-muted); font-size:12.5px; text-decoration:underline;
}
.pt-flyer-luego:hover{color:var(--pt-text)}
@media (max-width:480px){
.pt-flyer-art{padding:28px 18px 20px}
.pt-flyer-titulo{font-size:25px}
.pt-flyer-titulo em{font-size:48px}
.pt-flyer-cuerpo{padding:18px 18px 20px}
}
/* Inventario de la pagina de personaje (26/09/2026): cuadricula 3x4 como en el juego,
casillas iguales de 40px, items a 32px nitidos; el img{max-width:100%} global no las encoge. */
.pt-inventory { width: auto !important; border-collapse: separate !important; border-spacing: 2px; background: #292929; padding: 2px; border: 1px solid #5a5a5a; }
.pt-inventory td { width: 40px !important; height: 40px !important; min-width: 40px; padding: 0 !important; line-height: 0; background: #3b3b3b; border: 1px solid #808080 !important; text-align: center; vertical-align: middle; }
.pt-inventory td.pt-empty { background: #303030; border-color: #5f5f5f !important; }
.pt-inventory td img { width: 40px !important; height: 40px !important; max-width: none !important; display: block; margin: 0; }
.pt-inventory td img.item_image { width: 32px !important; height: 32px !important; margin: 4px; image-rendering: pixelated; image-rendering: crisp-edges; }
/* Tier y rareza en el inventario (26/09/2026): borde de color por rareza (mismos colores que el
cliente: rare gris, mystic morado, epic naranja, legendary dorado) y etiqueta "T" del forge. */
.pt-inventory td .pt-slot { position: relative; display: block; width: 40px; height: 40px; box-sizing: border-box; }
.pt-inventory td .pt-slot img.item_image { margin: 4px; }
.pt-inventory td .pt-rarity-1 { box-shadow: inset 0 0 0 2px #b4b4b4; }
.pt-inventory td .pt-rarity-2 { box-shadow: inset 0 0 0 2px #b45cff; }
.pt-inventory td .pt-rarity-3 { box-shadow: inset 0 0 0 2px #ff8c1a; }
.pt-inventory td .pt-rarity-4 { box-shadow: inset 0 0 0 2px #ffd23c; }
.pt-inventory td .pt-tier { position: absolute; right: 2px; top: 2px; width: 10px; height: 9px; background-image: url(../../images/items/tiers-strip.png); background-repeat: no-repeat; image-rendering: pixelated; }