/* ============================================================
   Hotel of Seams — hotelofseams.com
   Sistema visual "portal 1997": tablas, Times/Georgia, biseles,
   paleta web-safe cálida, banners falsos y movimiento de época.
   CERO recursos externos (sin webfonts, sin CDNs, sin GIFs
   ajenos, sin JS). Todas las animaciones son CSS puro y
   respetan prefers-reduced-motion (bloque único al final).
   ============================================================ */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 48px 0;
  background-color: #2f4436;
  background-image: radial-gradient(#3a5342 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 7px 7px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  color: #2b2118;
}

img { max-width: 100%; height: auto; }
a { color: #24418c; }
a:visited { color: #5b3b7a; }

/* --- Banda guardarraíl (test de los 5 segundos, marketing_plan §7.2):
       diegética en tono, inequívoca en contenido. NO se anima NUNCA. --- */
.notice-bar {
  background: #1c1710;
  color: #f0d890;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  padding: 6px 12px;
  border-bottom: 2px solid #8a6d2f;
}
.notice-bar a { color: #ffe9a8; font-weight: bold; }

/* --- Panel central --- */
.shell {
  width: 780px;
  max-width: 96%;
  margin: 20px auto;
  background: #f9f3dd;
  border: 2px solid #4a3826;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.45);
}

/* Toldo de cafetería sobre el masthead */
.awning {
  height: 16px;
  background: repeating-linear-gradient(
    90deg,
    #7a2c1f 0 26px,
    #f0e6c8 26px 52px
  );
  border-bottom: 2px solid #4a3826;
}

.masthead {
  text-align: center;
  padding: 20px 16px 8px 16px;
}
.masthead h1 {
  margin: 0;
  font-size: 40px;
  font-weight: normal;
  letter-spacing: 4px;
  color: #33502f;
  text-transform: uppercase;
}
.masthead h1 .of { font-style: italic; text-transform: none; letter-spacing: 1px; color: #7a2c1f; }
.masthead .stars { color: #8a6d2f; font-size: 13px; letter-spacing: 6px; margin: 4px 0; }
.masthead .tagline {
  font-style: italic;
  color: #4a3826;
  margin: 2px 0 0 0;
  font-size: 14px;
}

/* --- Banners 468×60 (falsos, in-world) --- */
.adband {
  padding: 4px 0 10px 0;
  border-top: 1px solid #c9bd9c;
  background: #efe6c9;
}
.adlabel {
  text-align: center;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 9px;
  color: #8a8068;
  margin: 3px 0 0 0;
}
.ad {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 468px;
  height: 60px;
  padding: 0 14px;
  margin: 3px auto 0 auto;
  border: 1px solid #444;
  overflow: hidden;
  text-decoration: none;
  font-family: Verdana, Geneva, sans-serif;
  color: inherit;
}
.ad .col { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.ad .cta { margin-left: auto; font-size: 9px; font-weight: bold; padding: 4px 7px; white-space: nowrap; }
/* rotador: tira vertical de frames de 60 px, corte seco cada 9 s */
.adslot {
  display: block;
  width: 468px;
  height: 60px;
  margin: 3px auto 0 auto;
  overflow: hidden;
  overflow: clip;
  contain: paint;
  text-decoration: none;
}
.adstrip { display: block; animation: adrot 36s steps(1, end) infinite; }
.adstrip .ad { margin: 0; }
.adslot:hover .adstrip { animation-play-state: paused; }
@keyframes adrot {
  0% { transform: translateY(0); }
  25% { transform: translateY(-60px); }
  50% { transform: translateY(-120px); }
  75%, 100% { transform: translateY(-180px); }
}
.adslot.foot .adstrip { animation-name: adrot5; }
@keyframes adrot5 {
  0% { transform: translateY(0); }
  25% { transform: translateY(-60px); }
  50% { transform: translateY(-120px); }
  75% { transform: translateY(-180px); }
  94.45%, 100% { transform: translateY(-240px); }  /* el 5º frame (Sheriff) asoma 2 s de 36 */
}
/* ecualizador LED de la radio (la "canción" se repite cada 3,2 s) */
.call { display: flex; flex-direction: column; line-height: 1; }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 10px; margin-top: 3px; }
.eq i { width: 4px; height: 10px; background: #ffff66; transform-origin: 50% 100%; animation: eq 3.2s steps(4, end) infinite; }
.eq i:nth-child(2) { animation-delay: -.8s; }
.eq i:nth-child(3) { animation-delay: -1.9s; }
.eq i:nth-child(4) { animation-delay: -.4s; }
.eq i:nth-child(5) { animation: none; transform: scaleY(.55); }  /* LED fundido */
.eq i:nth-child(6) { animation-delay: -2.6s; }
.eq i:nth-child(7) { animation-delay: -1.3s; }
.eq i:nth-child(8) { animation-delay: -2.2s; }
@keyframes eq {
  0% { transform: scaleY(.3); }
  25% { transform: scaleY(.9); }
  50% { transform: scaleY(.5); }
  75% { transform: scaleY(1); }
  100% { transform: scaleY(.3); }
}

/* --- Marquee clásico (cinta transportadora: texto duplicado, sin hueco) --- */
.mq {
  overflow: hidden;
  overflow: clip;
  white-space: nowrap;
  background: #fffdf4;
  border-top: 2px solid #4a3826;
  border-bottom: 2px solid #4a3826;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 11px;
  color: #33502f;
  padding: 4px 0;
}
.mq span { display: inline-block; white-space: nowrap; animation: mq 36s linear infinite; }
.mq:hover span { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.mqfoot {
  background: none;
  border: none;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  font-size: 12px;
  color: #5c5140;
  padding: 0;
  margin-bottom: 8px;
}
.mqfoot span { animation-duration: 24s; }

/* --- Layout de portal: sidebar + contenido --- */
table.cols { width: 100%; border-collapse: collapse; }
td.side {
  width: 170px;
  vertical-align: top;
  background: #e7dcbc;
  border-right: 2px solid #4a3826;
  padding: 12px 10px 14px 10px;
}
td.main { vertical-align: top; padding: 6px 22px 22px 22px; }

.navbtn {
  display: block;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 11px;
  color: #33502f;
  text-decoration: none;
  background: #d9cfb2;
  border-top: 2px solid #f6efd6;
  border-left: 2px solid #f6efd6;
  border-right: 2px solid #a89a76;
  border-bottom: 2px solid #a89a76;
  padding: 6px 8px;
  margin: 0 0 4px 0;
}
.navbtn:hover { background: #f0e6c8; color: #33502f; }
.navbtn:visited { color: #33502f; }
.navbtn.book { font-weight: bold; color: #7a2c1f; background: #f0e6c8; }
.navbtn.book:visited { color: #7a2c1f; }

.sidebox { background: #fffdf4; border: 1px solid #a89a76; margin: 0 0 10px 0; }
.sidebox .t {
  background: #33502f;
  color: #f9f3dd;
  font-variant: small-caps;
  letter-spacing: 1.5px;
  font-size: 12px;
  padding: 3px 8px;
}
.sidebox .b { padding: 7px 8px; font-size: 12px; line-height: 1.45; }
.sidebox .b.small { font-family: Verdana, Geneva, sans-serif; font-size: 10px; line-height: 1.6; }

/* teleimpresor de la Gazette */
.gaz .b { padding: 0 8px; }
.gaz .roll { height: 100px; overflow: hidden; overflow: clip; }
.gaz ul { margin: 0; padding: 0; list-style: none; animation: gazroll 30s ease-in-out infinite; }
.gaz li { height: 100px; padding: 7px 0 0 0; margin: 0; font: 12px/1.35 "Times New Roman", Times, serif; }
.gaz:hover ul { animation-play-state: paused; }
@keyframes gazroll {
  0%, 23% { transform: translateY(0); }
  25%, 48% { transform: translateY(-100px); }
  50%, 73% { transform: translateY(-200px); }
  75%, 98% { transform: translateY(-300px); }
  100% { transform: translateY(-400px); }
}

/* encuesta: un voto por minuto, siempre "Correctly" */
@property --c { syntax: '<integer>'; inherits: true; initial-value: 38; }
.poll { --c: 38; animation: creep 180s steps(1, end) forwards; }
@keyframes creep { 0% { --c: 38; } 33.3% { --c: 39; } 66.6% { --c: 40; } 100% { --c: 41; } }
.poll .prow { display: flex; align-items: center; gap: 6px; }
.poll .plabel { margin: 5px 0 2px 0; font-size: 11px; }
.poll .bar-c { height: 9px; width: calc(var(--c) * 3.1px); background: #7a2c1f; border: 1px solid #4a3826; }
.poll .bar-w { height: 9px; width: 9px; background: #33502f; border: 1px solid #4a3826; }
.poll .bar-p { height: 9px; width: 0; border: 1px solid #4a3826; }
.poll .pn { font-size: 10px; }
.poll .n-c::after { counter-reset: c var(--c); content: counter(c); }
.poll .n-t::after { counter-reset: t calc(var(--c) + 3); content: counter(t) " votes"; }

/* contador: te cuenta a los 4 s y te descuenta a los 45 s */
.counterbox {
  text-align: center;
  margin: 12px 0 8px 0;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  color: #3a3020;
}
.digits { display: inline-flex; gap: 2px; margin-top: 3px; }
.dig {
  display: inline-block;
  background: #000;
  color: #7cfc00;
  font: bold 13px/16px "Courier New", Courier, monospace;
  padding: 0 4px;
  border: 1px solid #444;
}
.odo { height: 18px; overflow: hidden; overflow: clip; }
.odo .reel { display: block; animation: odo 60s linear infinite; }
.odo b { display: block; height: 16px; }
@keyframes odo {
  0%, 6.5% { transform: translateY(0); }
  7%, 74.5% { transform: translateY(-16px); }
  75%, 100% { transform: translateY(0); }
}

/* --- Cuerpo --- */
.bar {
  background: #33502f;
  color: #f9f3dd;
  font-variant: small-caps;
  letter-spacing: 2px;
  font-size: 16px;
  padding: 3px 12px;
  margin: 28px 0 12px 0;
  border: 1px solid #22361f;
  box-shadow: 2px 2px 0 #c9bd9c;
}
.bar:first-child { margin-top: 8px; }

/* letrero OPEN / CLOSED que gira solo (60 s, sincronizado con el contador) */
.sign {
  position: relative;
  float: right;
  display: inline-grid;
  margin: 0 -4px 0 0;
  padding: 3px 7px;
  background: #e7dcbc;
  color: #33502f;
  border: 1px solid #4a3826;
  box-shadow: 1px 1px 0 #22361f;
  font: bold 9px/1 Verdana, Geneva, sans-serif;
  font-variant: normal;
  letter-spacing: 1px;
  transform-origin: 50% -10px;
  animation: sway 5s ease-in-out infinite;
}
.sign::before {
  content: "";
  position: absolute;
  left: 6px; right: 6px; top: -9px; height: 9px;
  border-left: 1px solid #4a3826;
  border-right: 1px solid #4a3826;
}
.sign b { grid-area: 1 / 1; text-align: center; }
.sign .open { animation: faceOpen 60s steps(1, end) infinite; }
.sign .closed { color: #7a2c1f; animation: faceClosed 60s steps(1, end) infinite; }
@keyframes sway { 0%, 100% { transform: rotate(1.5deg); } 50% { transform: rotate(-1.5deg); } }
@keyframes faceOpen { 0%, 74.9% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes faceClosed { 0%, 74.9% { opacity: 0; } 75%, 100% { opacity: 1; } }

hr.rule {
  border: none;
  border-top: 1px solid #a89a76;
  border-bottom: 1px solid #fdfaf0;
  margin: 22px 0;
}

/* --- Fotos enmarcadas --- */
.photo {
  background: #fffdf4;
  border: 2px outset #cfc3a0;
  padding: 5px;
  display: inline-block;
}
.photo .caption {
  display: block;
  font-size: 12px;
  font-style: italic;
  color: #5c5140;
  text-align: center;
  padding-top: 4px;
}
.photo-right { float: right; margin: 0 0 12px 18px; max-width: 46%; }
.photo-left  { float: left;  margin: 0 18px 12px 0; max-width: 46%; }
.photo-full  { display: block; margin: 0 auto 14px auto; max-width: 100%; text-align: center; }
.clearfix::after { content: ""; display: block; clear: both; }

/* mapa: punto parpadeante sobre el hotel (en %, escala con la foto) */
.photo.map { position: relative; }
.pin {
  position: absolute;
  left: 38.3%;
  top: 50.2%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7a2c1f;
  box-shadow: 0 0 0 1px #f9f3dd;
  pointer-events: none;
  animation: pinblink 1.4s steps(1, end) infinite;
}
@keyframes pinblink { 50% { opacity: 0; } }

/* --- Tablas de tarifas / menú --- */
table.rates {
  width: 100%;
  border-collapse: collapse;
  background: #fffdf4;
  font-size: 15px;
}
table.rates th {
  background: #e7dcbc;
  font-variant: small-caps;
  letter-spacing: 1px;
  text-align: left;
}
table.rates th, table.rates td {
  border: 1px solid #a89a76;
  padding: 6px 10px;
}
table.rates td.rate { text-align: right; white-space: nowrap; }
table.rates tr.room4 td { color: #6b6252; font-style: italic; }

/* --- Cita de la parroquiana --- */
.regular-quote {
  border-left: 4px solid #7a2c1f;
  background: #f4ecd2;
  margin: 14px 0;
  padding: 10px 14px;
  font-style: italic;
}
.regular-quote .who {
  display: block;
  font-style: normal;
  font-size: 13px;
  color: #5c5140;
  padding-top: 4px;
}

/* --- Recorte de la Gazette --- */
.clipping {
  background: #f1e8cd;
  border: 1px solid #b9ac8d;
  box-shadow: 3px 3px 0 rgba(74, 56, 38, 0.25);
  transform: rotate(-0.6deg);
  padding: 12px 16px;
  margin: 18px 8px;
  font-family: "Times New Roman", Times, serif;
  max-width: 440px;
}
.clipping .paper {
  font-variant: small-caps;
  letter-spacing: 3px;
  font-size: 12px;
  color: #5c5140;
  border-bottom: 1px solid #b9ac8d;
  padding-bottom: 3px;
  margin-bottom: 6px;
}
.clipping .headline {
  font-weight: bold;
  font-size: 16px;
  text-transform: uppercase;
  margin: 0 0 6px 0;
}
.clipping p { margin: 0 0 6px 0; font-size: 14px; line-height: 1.35; }

/* --- Botones --- */
.btn {
  display: inline-block;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  color: #2b2118;
  background: #d9cfb2;
  border: 3px outset #efe6c9;
  padding: 6px 16px;
  text-decoration: none;
  cursor: pointer;
}
.btn:visited { color: #2b2118; }
.btn:active { border-style: inset; }
.btn-big {
  font-size: 15px;
  font-weight: bold;
  color: #f9f3dd;
  background: #7a2c1f;
  border: 3px outset #a5503f;
  padding: 10px 26px;
  letter-spacing: 1px;
}
.btn-big:visited { color: #f9f3dd; }

/* --- Formulario de reservas (inerte: sin action, sin datos) --- */
.bookform {
  background: #efe6c9;
  border: 2px solid #a89a76;
  padding: 14px 16px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
}
.bookform label { display: inline-block; min-width: 120px; }
.bookform .row { margin: 6px 0; }
.bookform input, .bookform select {
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  background: #fffdf4;
  border: 2px inset #cfc3a0;
  padding: 2px 4px;
  color: #2b2118;
}

/* --- NO VACANCY: tubo cansado; cada 17 s el NO se apaga y se lee VACANCY --- */
.novacancy {
  font-family: "Courier New", Courier, monospace;
  font-size: 26px;
  letter-spacing: 0.35em;
  text-align: center;
  color: #ff5a4a;
  background: #171010;
  border: 4px double #5c1f16;
  padding: 14px 6px 14px 0.35em;
  margin: 18px 0 10px 0;
  text-shadow: 0 0 6px rgba(255, 90, 74, 0.8);
  animation: hum 3s ease-in-out infinite;
}
.novacancy .no { display: inline-block; animation: tube 17s linear infinite; }
@keyframes hum {
  0%, 100% { text-shadow: 0 0 6px rgba(255, 90, 74, .8); }
  50% { text-shadow: 0 0 9px rgba(255, 90, 74, .55); }
}
@keyframes tube {
  0%, 93.2% { opacity: 1; }
  93.4%, 93.7% { opacity: .15; }
  93.9% { opacity: 1; }
  94.3%, 94.9% { opacity: 0; }
  95.1%, 100% { opacity: 1; }
}

.waitlist {
  text-align: center;
  background: #fffdf4;
  border: 1px solid #a89a76;
  padding: 16px 12px;
  margin-bottom: 8px;
}
.waitlist .small-print {
  font-size: 12px;
  color: #5c5140;
  font-style: italic;
  margin-top: 10px;
}

/* --- Footer --- */
.footer {
  border-top: 2px solid #4a3826;
  background: #efe6c9;
  padding: 14px 22px 18px 22px;
  font-size: 13px;
  color: #3a3020;
}
.footer .game-note {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  background: #fffdf4;
  border: 1px dashed #8a6d2f;
  padding: 8px 10px;
  margin-bottom: 12px;
}

/* Badges 88×31 dibujados a mano (nada de hotlinks, como debe ser) */
.badges { display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
.badge {
  display: block;
  width: 88px;
  height: 31px;
  margin: 0 0 4px 0;
  border: 2px outset #999;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 8px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  overflow: hidden;
  line-height: 1.2;
  padding-top: 4px;
}
.badge-netscape { background: #000066; color: #66ff66; }
.badge-netscape .b2 { color: #ffffff; font-size: 7px; font-weight: normal; }
.badge-800 { background: #c0c0c0; color: #000080; }
.badge-800 .b2 { font-size: 7px; color: #333; font-weight: normal; }
.badge-notepad { background: #ffffcc; color: #663300; }
.badge-notepad .b2 { font-size: 7px; font-weight: normal; }
.badge-steam { background: #10141c; color: #cfe4ff; }
.badge-steam .b2 { color: #7fb8ff; font-size: 7px; }
.badge-cafe { background: #f4ecd2; color: #7a2c1f; border-color: #8a6d2f; }
.badge-cafe .b2 { font-size: 7px; font-weight: normal; color: #4a3826; }
.badge .b1, .badge .b2 { display: block; }

.footer .fine {
  margin-top: 10px;
  font-size: 11px;
  color: #6b6252;
  font-family: Verdana, Geneva, sans-serif;
}

/* --- Subpáginas --- */
.subhead {
  text-align: center;
  padding: 16px 12px 4px 12px;
}
.subhead h1 {
  margin: 0;
  font-size: 30px;
  font-weight: normal;
  letter-spacing: 3px;
  color: #33502f;
  text-transform: uppercase;
}
.subhead .home-link { font-family: Verdana, Geneva, sans-serif; font-size: 11px; }
.content { padding: 18px 26px 26px 26px; }

/* Entradas del libro de visitas */
.gb-entry {
  background: #fffdf4;
  border: 1px solid #b9ac8d;
  border-left: 4px solid #8a6d2f;
  padding: 10px 14px;
  margin: 12px 0;
}
.gb-entry .gb-meta {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 11px;
  color: #5c5140;
  margin-bottom: 4px;
}
.gb-entry .gb-stars { color: #8a6d2f; letter-spacing: 2px; }
.gb-entry p { margin: 4px 0 0 0; }

/* --- Room 4: obras --- */
.tape {
  height: 22px;
  border: 2px solid #1a1a1a;
  position: relative;
  overflow: hidden;
  overflow: clip;
  width: 100%;
}
.tape::before {
  content: "";
  position: absolute;
  inset: 0 -52px 0 -52px;
  background: repeating-linear-gradient(135deg, #f2c200 0 18px, #1a1a1a 18px 36px);
  animation: tape 2.4s steps(6) infinite;
}
.tape.rev::before { animation-direction: reverse; }
.tape:hover::before { animation-play-state: paused; }  /* la obra se para cuando alguien mira */
@keyframes tape { to { transform: translateX(-50.91px); } }  /* 36·√2: periodo exacto, sin costura */
.lamp { animation: flick 4.5s steps(1, end) infinite; }  /* · · · · — = "4" en Morse */
@keyframes flick {
  0% { opacity: 1; } 5.56% { opacity: 0; } 11.11% { opacity: 1; } 16.67% { opacity: 0; }
  22.22% { opacity: 1; } 27.78% { opacity: 0; } 33.33% { opacity: 1; } 38.89% { opacity: 0; }
  44.44% { opacity: 1; } 61.11%, 100% { opacity: 0; }
}
.wheel {
  display: inline-block;
  height: 13px;
  line-height: 13px;
  overflow: hidden;
  overflow: clip;
  vertical-align: bottom;
  font-weight: bold;
}
.wheel i { display: block; font-style: normal; animation: fifth .25s linear 4s forwards; }
@keyframes fifth { to { transform: translateY(-13px); } }

/* --- Reduced motion: todo en reposo; lo revelado se muestra revelado --- */
@media (prefers-reduced-motion: reduce) {
  .adstrip, .adslot.foot .adstrip, .eq i, .mq span, .gaz ul, .poll, .odo .reel,
  .sign, .sign .open, .sign .closed, .novacancy, .novacancy .no, .pin,
  .tape::before, .lamp, .wheel i { animation: none; }
  .eq i { transform: scaleY(.6); }
  .eq i:nth-child(odd) { transform: scaleY(.35); }
  .gaz .roll { height: auto; }
  .gaz li { height: auto; padding: 7px 0 6px 0; }
  .gaz li:last-child { display: none; }
  .sign .closed { opacity: 0; }
  .wheel i { transform: translateY(-13px); }  /* ya eres el quinto */
}

/* --- Móvil (compromiso invisible: en desktop se ve 1997 puro) --- */
@media (max-width: 820px) {
  .shell { width: auto; margin: 10px 8px; }
  .masthead h1 { font-size: 30px; letter-spacing: 2px; }
  table.cols, table.cols tbody { display: block; }
  table.cols tr { display: flex; flex-direction: column; }
  td.side { display: block; width: auto; order: 2; border-right: none; border-top: 2px solid #4a3826; }
  td.main { display: block; padding: 6px 14px 20px 14px; }
  .badges { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 4px; }
  .badge { margin: 0; }
  .photo-right, .photo-left { float: none; display: table; max-width: 100%; margin: 0 auto 12px auto; text-align: center; }
  .adband .ad, .adslot { zoom: 0.72; }
  .novacancy { font-size: 18px; }
  .content { padding: 14px 14px 20px 14px; }
}