/*
* Yaldabaoth style (v1.0)
*/

@font-face {
  font-family: "Cinzel";
  src: url(/static/yaldabaoth/Cinzel-SemiBold.ttf);
  font-weight: 600;
}

@font-face {
  font-family: "EB Garamond";
  src: url(/static/yaldabaoth/EBGaramond-Regular.ttf);
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "EB Garamond";
  src: url(/static/yaldabaoth/EBGaramond-Italic.ttf);
  font-weight: 400;
  font-style: italic;
}

body {
  background: #050403 url('/static/yaldabaoth/pattern.gif') repeat;
  margin: 0;
  padding: 0;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 17px;
  color: #e4ded0;
  line-height: 1.4;
}

::selection {
  background: #caa24d;
  color: #16130c;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0d0a06;
}
::-webkit-scrollbar-thumb {
  background: #3a2f1e;
  border: 1px solid #0d0a06;
}
::-webkit-scrollbar-thumb:hover {
  background: #7a6234;
}
* {
  scrollbar-width: thin;
  scrollbar-color: #3a2f1e #0d0a06;
}

a, a:visited{
    color: #a8895a;
}
a:hover{
    color: #e6c477 !important;
    transition: 0.4s;
}
header div.subtitle, h1 {
    color: #caa24d;
    text-align: center;
    font-family: "Cinzel", Georgia, serif;
    letter-spacing: 0.06em;
    font-size: 38px;
    text-shadow: 0 0 18px rgba(202,162,77,0.3), 0 0 46px rgba(202,162,77,0.1);
}
header div.subtitle {
    font-family: "EB Garamond", serif;
    font-style: italic;
    font-size: 14px;
    color: #948a76;
    text-shadow: none;
}
/* cursor de terminal parpadeando tras el subtítulo */
header::after {
    content: "_";
    display: block;
    text-align: center;
    color: #caa24d;
    font-family: "Cinzel", Georgia, serif;
    font-size: 18px;
    margin-top: 6px;
    animation: blink-cursor 1s steps(1) infinite;
}
@keyframes blink-cursor {
    0%, 50% { opacity: 1; }
    50.01%, 100% { opacity: 0; }
}
input[type="text"], input[type="password"], input[type="email"]{
  background: none;
  color: #e4ded0;
  font-family: "EB Garamond", serif;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus{
 border-color: #caa24d !important;
 box-shadow: 0 0 0 2px rgba(202,162,77,0.15);
 outline: none;
}

/* Post form */
form table a {
  color: #e4ded0;
}
form table tr th {
  text-align: right;
  background: none;
  font-weight: 500;
}
form table tr:last-of-type > td {
  max-width: 414px;
  word-spacing: -2px;
}
form table input{
    color: #e4ded0;
    background: none;
}
form table textarea{
    color: #e4ded0;
    background: none;
    font-family: "EB Garamond", serif;
}

/*comment-toolbar.js*/
.option_selector{
	border: 1px solid #3a2f1e;
   background: none !important;
   font-weight: 500;
   font-size: 14px;
}
.option_selector > *{
	color: #e4ded0 !important;
	border-right: none;
}
.option_selector > *:hover{
	color: #e6c477;
}

#upload_selection{
    text-align: center;
}


/* Threads */
#pagewrap{
  width: 58%;
  margin: auto;
  min-height: 100vh;
  padding: 0 5% 40px 5%;
  background-color: #100d08;
  border-left: 1px solid #7a6234;
  border-right: 1px solid #7a6234;
  box-shadow: 0 0 0 4px #050403, 0 0 0 5px #3a2f1e, 0 0 3vw 0.5vw rgba(0, 0, 0, 0.75);
}
footer p.unimportant {
    font-size: 13px;
    line-height: 1.6;
    margin: 6px 0;
}
.thread{
    margin-left: 10pt;
    margin-top: 100px;
}

/* double-frame "engraved plate" effect: border + a ring shadow, so every
   card reads as set inside a frame instead of a flat rounded box */
div.post.op, div.post.reply {
    background-color: #16130c;
    border: 1px solid #7a6234;
    border-radius: 0;
    box-shadow: 0 0 0 3px #100d08, 0 0 0 4px #3a2f1e, 0 3px 10px rgba(0,0,0,0.6);
    box-sizing: border-box;
}
div.post.op::after, div.post.reply::after {
    content: "";
    display: table;
    clear: both;
}

/* Cuando el OP lleva imagen, .files (hermano, no hijo) flota a la
   izquierda por defecto (base style.css) y el texto de .post.op debe
   fluir a su lado, como en el tema base sin CSS propio (Yotsuba B).
   Ponerle marco a esa zona (a .post.op solo, o a .post.op + .files
   juntos) se ha probado de varias formas y siempre sale mal en la
   práctica, así que se queda sin marco — el marco ornamental es solo
   para las respuestas y para el OP sin imagen. */
div.thread > div.files:not(:empty) + div.post.op {
    background: none;
    border: none;
    box-shadow: none;
}

div.post.reply {
    margin: 0.6em 0;
    padding: 1.5em 1.2em;
    display: inline-block;
    max-width: 100% !important;
}
div.post.op {
    padding: 1em 1.2em;
}
div.post.reply.highlighted{
  background: #2a1c0c !important;
  box-shadow: 0 0 0 1px #caa24d, 0 0 16px 4px rgba(202,162,77,0.25);
  z-index: 2;
}
div.post.reply div.body a{
    color: #a8895a;
    line-height: 1.5;
}
/*Post*/
div.post{
  width: 100%
}
div.post p {
    color: #e4ded0;
    width: 100%;
    font-size: 14px;
}
/* small radiate-sun glyph before every name, echo of the pattern's halo */
.intro span.name::before {
    content: "\2609";
    color: #caa24d;
    margin-right: 0.35em;
    font-size: 0.85em;
}
.intro span.name {
    color: #b5453f;
    font-weight: 700;
    font-family: "Cinzel", Georgia, serif;
    letter-spacing: 0.02em;
}
input[name="name"] {
    font-family: "Cinzel", Georgia, serif;
}
.intro span.capcode{
     color: #e6c477;
}
/* post number styled as a stamped seal, not a bare link */
div.post > .intro a.post_no{
    color: #caa24d;
    background: #0d0a06;
    border: 1px solid #3a2f1e;
    padding: 1px 7px;
    font-size: 0.85em;
    text-decoration: none;
}
div.post > .intro a.post_no:hover{
    border-color: #caa24d;
    box-shadow: 0 0 6px rgba(202,162,77,0.35);
}
.intro span.subject {
    color: #a8823c;
    text-decoration: underline;
    font-weight: 500;
}
.intro a.email,.intro a.email span.name{
    color:gray;
    text-decoration: none;
}
.quote{
  color: #9c8a52;
}
span.spoiler{
  background: url("/static/spoiler.png");
  color: none;
  padding: 0 3px;
  border: 1px dashed #3a2f1e;
  border-radius: 3px;
}
span.spoiler:hover{
  background: #100c08;
  color: #e4ded0;
}
div.post-hover{
  background-color: #16130c !important;
  border: 1px solid #7a6234;
  box-shadow: 0 0 0 3px #100d08, 0 0 0 4px #3a2f1e, 0 4px 14px rgba(0,0,0,0.6);
  padding: 5px !important;
  width: 50%;
  color: #e4ded0;
}
/* How to deal with sage */
a.email[href^="mailto:sage"] {
font-size: 0;
text-decoration: none !important;
}
a.email[href^="mailto:sage"]::after {
content: ' SAGE';
color: #b5453f;
font-weight: bold;
font-size: 13pt;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-name: saged;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-play-state: running;
}
@keyframes saged {
0%   {color:#7a2727;}
50%  {color:#caa24d;}
100% {color:#7a2727;}
}

/*boardlists*/
div.boardlist {
    text-align: center;
    font-size: 12pt;
    font-family: "Cinzel", Georgia, serif;
    letter-spacing: 0.04em;
}
div.boardlist a {
    text-transform: uppercase;
    font-size: 0.78em;
    padding: 0 0.15em;
    position: relative;
}
/* "Inicio" destaca como un pequeño botón, no es un tablón más */
div.boardlist a.home-link {
    color: #caa24d;
    border: 1px solid #3a2f1e;
    padding: 1px 8px;
    margin-right: 0.4em;
    border-radius: 0;
}
div.boardlist a.home-link:hover {
    border-color: #caa24d;
}
div.boardlist a.home-link::before {
    bottom: 1px;
}
/* FAQ y Donaciones, como placas doradas llenas, más vistosas que Inicio */
div.boardlist .site-links {
    margin-left: 0.5em;
}
div.boardlist a.site-link {
    background: #caa24d;
    color: #100d08 !important;
    border: 1px solid #caa24d;
    padding: 1px 8px;
    font-weight: 700;
}
div.boardlist a.site-link:hover {
    background: #e6c477;
    border-color: #e6c477;
    color: #100d08 !important;
    text-shadow: none;
}
div.boardlist a.site-link::before {
    bottom: 1px;
    background: #100d08;
}
/* pequeño glifo solar entre tablones, como el que va junto a los nombres,
   en vez de los separadores planos por defecto */
div.boardlist a:not(:last-child)::after {
    content: "\2609";
    color: #7a6234;
    font-size: 0.75em;
    margin: 0 0.5em;
    display: inline-block;
}
/* la línea dorada crece desde el centro al pasar el ratón, en vez de un
   simple cambio de color */
div.boardlist a::before {
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: -3px;
    height: 1px;
    background: #caa24d;
    transition: left 0.18s ease, right 0.18s ease;
}
div.boardlist a:hover::before {
    left: 0;
    right: 0;
}
.bar.top{
    border-bottom-width: 1px;
    box-shadow: -5px 1px 10px rgba(0, 0, 0, 0.4), 0 3px 0 0 #050403, 0 4px 0 0 #3a2f1e;
    padding: 8px 5px 6px;
    transition: all .1s .05s ease-in-out;
    background: #100d08;
    border-bottom: 1px solid #7a6234;
}

.desktop-style div.boardlist:not(.bottom) {
    position:static;
    color: #948a76;
    background-color: #0d0a06;
    border-bottom: none;
}
div.pages a.selected {
    color: #e6c477;
}
.bar > .boardlist a:hover, .bar > .threadlinks a:hover{
  color: #e6c477 !important;
  text-decoration: none !important;
  text-shadow: 0 0 6px rgba(202,162,77,0.4);
}

/* "Catálogo" / "Inicio" y demás enlaces de control bajo el hilo */
div.controls {
    text-align: center;
    margin: 1.2em 0;
}
div.controls a {
    font-family: "Cinzel", Georgia, serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.85em;
    color: #a8895a;
}
div.controls a:hover {
    color: #e6c477;
    border-color: #caa24d;
    text-shadow: 0 0 6px rgba(202,162,77,0.4);
}
.bar.bottom {
    bottom: 0px;
    border-top: 1px solid #7a6234;
    background: #100d08;
    color: #948a76;
    box-shadow: 0 -3px 0 0 #050403, 0 -4px 0 0 #3a2f1e;
}
.bar.bottom > .threadlinks a{
  text-decoration: none;
}
select{
    background-color: #100d08;
    color:#948a76;
    border: none;
    border-left: 1px solid #7a6234;
}

/*Catalog*/
body.active-catalog header{
margin-top: 35px
}
body.active-catalog div.controls{
margin-top: 30px;
}
body.active-catalog div#Grid a{
text-decoration: none;
}
/* la tarjeta base del catálogo (style.css) es un gris casi transparente
   pensado para el fondo claro de Yotsuba B; contra el fondo oscuro de
   Yaldabaoth se volvía invisible, así que aquí se le da su propio marco
   sólido, a juego con las tarjetas de post */
.theme-catalog div.thread {
border-radius: 0;
background: #16130c !important;
border: 1px solid #7a6234;
box-shadow: 0 0 0 3px #100d08, 0 0 0 4px #3a2f1e;
font-weight: bold;
color: #e4ded0;
transition: border-color 0.15s, background-color 0.15s;
}
.theme-catalog div.thread:hover {
background-color: #241c0d !important;
border-color: #caa24d;
}
.theme-catalog div.thread .replies {
color: #cecece;
}
.theme-catalog div.thread .replies strong {
color: #948a76;
}
.theme-catalog div.threads {
margin-top: 12px;
}

@media screen and (max-width: 700px) {
   body{
       font-size: 14px;
   }
   #pagewrap {
       width: 100%;
       margin: 0 auto !important;
       box-shadow: none;
       padding: 0;
   }
}

/*General*/
input[type="submit"], input[type="button"]{
    background: none;
    color: #e4ded0;
    border: 1px solid #3a2f1e;
    font-family: "EB Garamond", serif;
}
input[type="submit"]:hover, input[type="button"]:hover{
    cursor: pointer;
    color: #e6c477 !important;
    border-color: #e6c477 !important;
}
hr{
    border-top: 1px solid #3a2f1ebb;
    margin: 15px 0;
}
.fa{
    text-decoration: none;
}
.mentioned > a {
  font-size: 12px;
}
/*QuickReply*/
#quick-reply table{
    background: #16130c !important;
    border: 1px solid #7a6234;
    box-shadow: 0 0 0 3px #050403, 0 0 0 4px #3a2f1e, 0 6px 20px rgba(0,0,0,0.6);
}

/*Options*/
#options_background, #alert_background {
    background: #050403;
}
#options_div, #alert_div {
    border-color: #7a6234;
    background-color: #100d08;
    box-shadow: 0 0 0 4px #050403, 0 0 0 5px #3a2f1e, 0 8px 30px rgba(0,0,0,0.75);
    font-family: "EB Garamond", Georgia, serif;
}
#options_close, #alert_close {
    color: #948a76;
    transition: color 0.15s;
}
#options_close:hover, #alert_close:hover {
    color: #caa24d;
}
#options_tablist{
    border-right: 1px solid #3a2f1e;
    background-color: #0d0a06;
}
.options_tab_icon {
    color: #7a6234;
    transition: color 0.15s, background-color 0.15s;
}
.options_tab_icon:hover {
    color: #e4ded0;
    background-color: #1c170d;
}
.options_tab_icon.active{
    color: #caa24d;
    background-color: #1c170d;
    box-shadow: inset 2px 0 0 #caa24d;
}
.options_tab{
    color: #e4ded0;
}
.options_tab h2 {
    color: #caa24d;
    font-family: "Cinzel", Georgia, serif;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #3a2f1e;
}
.options_tab fieldset {
    border-color: #3a2f1e;
}
.options_tab legend {
    color: #b5453f;
}
.options_tab p {
    color: #948a76;
}
.options_tab input[type="text"], .options_tab input[type="password"], .options_tab input[type="number"], .options_tab input[type="range"] {
    background: #0d0a06;
    border: 1px solid #3a2f1e;
    color: #e4ded0;
}
.options_tab input[type="text"]:focus, .options_tab input[type="password"]:focus, .options_tab input[type="number"]:focus {
    border-color: #caa24d;
    box-shadow: 0 0 0 2px rgba(202,162,77,0.15);
    outline: none;
}
#inline-expand-max {
    color: #948a76;
}
.options_tab button {
    background: #1c170d;
    border: 1px solid #3a2f1e;
    color: #948a76;
    font-family: "EB Garamond", serif;
}
.options_tab button:hover {
    border-color: #caa24d;
    color: #caa24d;
}
.espacio-toggle {
    color: #e4ded0;
}
#show-relative-time {
    color: #e4ded0;
}
.espacio-options-btn {
    color: #948a76;
}
.espacio-options-btn:hover {
    color: #caa24d;
}
.theme-select-item {
    border-color: #3a2f1e;
    color: #948a76;
    transition: border-color 0.15s, color 0.15s;
}
.theme-select-item:hover {
    border-color: #caa24d;
    color: #caa24d;
}
.theme-select-item.selected {
    border-color: #caa24d;
    background-color: #1c170d;
    color: #caa24d;
    box-shadow: 0 0 8px rgba(202,162,77,0.25);
}

/*quick-reply.js*/
#quick-reply input[type="text"], #quick-reply input[type="password"], #quick-reply textarea {
  background: #100d08;
}

/* Post menu */
.post-menu li{
   background-color: #100d08;
}

/* --- detalles sueltos, todo aislado y de bajo riesgo --- */

/* checkboxes/radios nativos del navegador a juego con la paleta */
input[type="checkbox"], input[type="radio"] {
    accent-color: #caa24d;
}

/* placeholder de los inputs, si no queda con el gris por defecto del
   navegador sobre fondo oscuro */
::placeholder {
    color: #6b6152;
    opacity: 1;
}

/* iconos de sticky/locked/cyclical */
i.fa, img.icon {
    color: #caa24d;
    opacity: 0.85;
}

/* metadatos secundarios del archivo (tamaño, dimensiones, nombre largo) —
   más discretos que el texto principal */
span.details, span.postfilename {
    color: #6b6152;
}

/* "N posts omitted, click reply to view" */
span.omitted {
    color: #6b6152;
    font-style: italic;
}

/* "you're mentioned in this post" */
.mentioned > a {
    color: #b5453f;
}

/* barra "Ir arriba / Catálogo / Inicio / Publicar respuesta" junto al
   formulario de respuesta — es #thread-links, no div.controls */
#thread-interactions {
    text-align: center;
    margin: 1em 0;
}
#thread-links a, #thread-quick-reply a {
    font-family: "Cinzel", Georgia, serif;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 0.85em;
    color: #a8895a;
}
#thread-links a:hover, #thread-quick-reply a:hover {
    color: #e6c477;
    text-shadow: 0 0 6px rgba(202,162,77,0.4);
}

/* --- portada del sitio (homepage.css pone la estructura) --- */
.home-logo { color: #caa24d; }
.home-nav-link {
    background: #caa24d;
    color: #100d08;
    border: 1px solid #caa24d;
    font-family: "Cinzel", Georgia, serif;
}
.home-nav-link:hover {
    background: #e6c477;
    border-color: #e6c477;
    color: #100d08;
}
.home-box {
    background-color: #16130c;
    border: 1px solid #7a6234;
    border-radius: 0;
    box-shadow: 0 0 0 3px #100d08, 0 0 0 4px #3a2f1e, 0 3px 10px rgba(0,0,0,0.6);
}
.home-rules h2 { color: #caa24d; font-family: "Cinzel", Georgia, serif; }
.home-faq dt { color: #caa24d; font-family: "Cinzel", Georgia, serif; }
.home-rule-cite a { color: #948a76; }
.home-rule-cite a:hover { color: #e6c477; }
.home-intro { color: #948a76; }
.home-stats strong { color: #caa24d; font-family: "Cinzel", Georgia, serif; }
.home-board-uri { color: #caa24d; font-family: "Cinzel", Georgia, serif; }
.home-board-uri:hover { color: #e6c477; }
.home-board-title { color: #e4ded0; }
.home-board-subtitle { color: #948a76; }
.home-board-count { color: #6b6152; }
.home-section-title { color: #caa24d; border-color: #3a2f1e; font-family: "Cinzel", Georgia, serif; }
.home-image-item { border: 1px solid #3a2f1e; }
.home-thread-board { color: #caa24d; }
.home-thread-title { color: #e4ded0; }
.home-thread-title:hover { color: #e6c477; }
.home-thread-replies { color: #6b6152; }