/* ultra_library · a marcenaria ---------------------------------------------
   O móvel e nada mais: cimalha, plinto, montantes, fundo de tábuas, a tábua de
   cada prateleira, a placa de latão da estante, a etiqueta da fileira e o
   aparador. Também a grade em que os volumes pousam (.row-books / .book) — a
   posição do livro é assunto da estante; a aparência dele, não.

   O acabamento vem de `data-wood` no .room (nogueira · mogno · carvalho) e a
   luz embutida de `data-light`; ambos saem do build.py. */

:root {
  /* veio de madeira (feTurbulence anisotrópico): horizontal para as tábuas
     deitadas, vertical para montantes e fundo */
  --woodH: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='460' height='140'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.11' numOctaves='4' seed='9' stitchTiles='stitch'/><feColorMatrix values='.33 .33 .33 0 -0.12 .33 .33 .33 0 -0.12 .33 .33 .33 0 -0.12 0 0 0 0 1'/></filter><rect width='100%25' height='100%25' filter='url(%23w)' opacity='.75'/></svg>");
  --woodV: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='460'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='0.11 0.012' numOctaves='4' seed='4' stitchTiles='stitch'/><feColorMatrix values='.33 .33 .33 0 -0.12 .33 .33 .33 0 -0.12 .33 .33 .33 0 -0.12 0 0 0 0 1'/></filter><rect width='100%25' height='100%25' filter='url(%23w)' opacity='.75'/></svg>");
  --lamp: rgba(255, 196, 120, .16);   /* fita de luz sob cada tábua */
}

.room {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1rem 4rem;
}

/* acabamentos de madeira --------------------------------------------------- */
.room, .room[data-wood="mogno"] {
  --wood-hi: #b2734a; --wood: #5e3521; --wood-mid: #472617; --wood-dark: #24130a;
  --nose: #e0a97c; --back: #1d110a; --seam: rgba(0,0,0,.42);
}
.room[data-wood="nogueira"] {
  --wood-hi: #7d5a41; --wood: #33211a; --wood-mid: #26180f; --wood-dark: #120a05;
  --nose: #b08b6a; --back: #150c07; --seam: rgba(0,0,0,.5);
}
.room[data-wood="carvalho"] {
  --wood-hi: #d3a978; --wood: #85603d; --wood-mid: #6a4a2c; --wood-dark: #3d2816;
  --nose: #f1d3a8; --back: #2c1c10; --seam: rgba(0,0,0,.34);
}

/* o móvel: os dois montantes e o fundo de tábuas verticais são pintados no
   próprio background — a cimalha e o plinto são os dois pseudo-elementos ----- */
.bookcase {
  position: relative;
  margin: 3.2rem auto 6rem;
  padding: 0 calc(1.6rem + var(--up));
  background-color: var(--back);
  background-image:
    /* montante esquerdo: veio + chanfro à luz por fora, sombra por dentro */
    var(--woodV),
    linear-gradient(90deg, var(--wood-hi) 0, var(--wood) 3px, var(--wood-mid) 55%, var(--wood-dark) 92%, #000 100%),
    /* montante direito */
    var(--woodV),
    linear-gradient(270deg, var(--wood-hi) 0, var(--wood) 3px, var(--wood-mid) 55%, var(--wood-dark) 92%, #000 100%),
    /* penumbra do fundo junto aos montantes e à cimalha */
    linear-gradient(90deg, rgba(0,0,0,.55), transparent 9%, transparent 91%, rgba(0,0,0,.55)),
    linear-gradient(180deg, rgba(0,0,0,.5), transparent 60px),
    /* tábuas do fundo (emendas) + veio vertical */
    repeating-linear-gradient(90deg, transparent 0 122px, var(--seam) 122px 124px, rgba(255,255,255,.05) 124px 125px),
    var(--woodV);
  background-size: var(--up) 460px, var(--up) 100%, var(--up) 460px, var(--up) 100%, auto, auto, auto, 140px 460px;
  background-position: left top, left top, right top, right top, 0 0, 0 0, 0 0, 0 0;
  background-repeat: repeat-y, no-repeat, repeat-y, no-repeat, repeat, repeat, repeat, repeat;
  background-blend-mode: soft-light, normal, soft-light, normal, normal, normal, normal, soft-light;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 60px 90px -30px rgba(0,0,0,.9);
}

/* cimalha: molduras escalonadas, mais larga que o corpo */
.bookcase::before {
  content: ""; position: absolute; z-index: 2;
  left: -14px; right: -14px; top: -30px; height: 30px;
  background-color: var(--wood);
  background-image:
    linear-gradient(180deg,
      var(--nose) 0, var(--wood-hi) 1px, var(--wood) 4px,
      var(--wood-mid) 9px, rgba(0,0,0,.6) 10px, rgba(0,0,0,.6) 11px,
      var(--wood-hi) 11px, var(--wood) 14px, var(--wood-mid) 20px,
      rgba(0,0,0,.55) 21px, rgba(0,0,0,.55) 22px,
      var(--wood) 22px, var(--wood-mid) 27px, var(--wood-dark) 30px),
    var(--woodH);
  background-size: auto, 460px 30px;
  background-blend-mode: normal, soft-light;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 10px 18px -8px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.06);
}
/* plinto: tábua com quina acesa e chanfro, assenta o móvel no chão */
.bookcase::after {
  content: ""; position: absolute; z-index: 2;
  left: -10px; right: -10px; bottom: -22px; height: 22px;
  background-color: var(--wood);
  background-image:
    linear-gradient(180deg,
      var(--nose) 0, var(--wood-hi) 1px, var(--wood) 6px,
      var(--wood-mid) 14px, var(--wood-dark) 20px, #000 22px),
    var(--woodH);
  background-size: auto, 460px 22px;
  background-blend-mode: normal, soft-light;
  border-radius: 0 0 2px 2px;
  box-shadow: 0 34px 50px -12px rgba(0,0,0,.95), inset 0 -1px 0 rgba(0,0,0,.6);
}

/* placa de latão gravada, pendurada na cimalha ----------------------------- */
.case-head {
  position: relative; z-index: 3;
  width: max-content; max-width: calc(100% - 2rem);
  margin: 0 auto;
  transform: translateY(-50%);
  height: 36px;
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  padding: 0 1.4rem;
  border-radius: 3px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 40%, rgba(0,0,0,.18)),
    linear-gradient(90deg, #a67c3c, #d9b56f 22%, #f0d493 48%, #cfa960 74%, #9c7336);
  box-shadow:
    inset 0 0 0 1px rgba(255,240,200,.35), inset 0 0 0 2px rgba(80,50,10,.55),
    0 2px 3px rgba(0,0,0,.7), 0 8px 14px -6px rgba(0,0,0,.8);
}
/* parafusos */
.case-head::before, .case-head::after {
  content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff2cc, #8a6425 60%, #4a3210);
  box-shadow: 0 0 0 1px rgba(60,35,10,.7), 0 1px 1px rgba(0,0,0,.6);
}
.case-head::before { left: 8px; }
.case-head::after  { right: 8px; }
.case-head h2 {
  margin: 0;
  font-family: var(--display); font-weight: 500; font-style: italic;
  font-size: 1.15rem; letter-spacing: .02em; line-height: 1;
  color: #2f1d07;
  text-shadow: 0 1px 0 rgba(255,244,214,.55), 0 -1px 0 rgba(0,0,0,.25);
}
.case-count {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 500; line-height: 1;
  color: #5a3d14;
  text-shadow: 0 1px 0 rgba(255,244,214,.45);
  padding-left: .9rem; border-left: 1px solid rgba(80,50,10,.45);
}

/* legenda das cores, logo abaixo da placa ---------------------------------- */
.legend {
  display: flex; flex-wrap: wrap; gap: .3rem 1.3rem;
  margin: 0 .2rem .4rem;
  padding-top: .2rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cream-dim);
}
.legend-item { display: inline-flex; align-items: center; gap: .5em; }
.legend-item i {
  width: 9px; height: 13px; border-radius: 1px;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.1) 30%, rgba(0,0,0,.25)), hsl(var(--hue) 45% 38%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
.legend-item em { font-style: normal; color: var(--brass-dim); }

/* as prateleiras ----------------------------------------------------------- */
.row { position: relative; margin-top: .4rem; }
.case-head + .row, .legend + .row { margin-top: 0; }

/* A fileira quebra em quantas prateleiras precisar; nada rola, nada é cortado.
   Cada linha tem altura fixa (--slot + --plank) e a tábua é desenhada no fundo,
   repetida a cada linha — assim todo livro sempre está apoiado numa tábua.
   A margem negativa tira a fileira do padding do móvel e a encosta nos
   montantes (as texturas soft-light precisam da cor por baixo NO MESMO
   elemento, senão o ruído cinza aparece cru). */
.row-books {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-end;
  margin: 0 -1.6rem;
  padding: 0 2.2rem;
  min-height: calc(var(--slot) + var(--plank));
  background-color: var(--back);
  background-image:
    /* a tábua desta linha: quina acesa, face à luz, corpo, sombra, filete escuro */
    repeating-linear-gradient(180deg,
      transparent 0, transparent var(--slot),
      var(--nose) var(--slot), var(--nose) calc(var(--slot) + 1px),
      var(--wood-hi) calc(var(--slot) + 1px), var(--wood) calc(var(--slot) + 7px),
      var(--wood-mid) calc(var(--slot) + 14px), var(--wood-dark) calc(var(--slot) + var(--plank) - 2px),
      #000 calc(var(--slot) + var(--plank) - 2px), #000 calc(var(--slot) + var(--plank))),
    /* sombra que a tábua de cima projeta no fundo */
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.6) 0, rgba(0,0,0,.28) 12px, transparent 40px,
      transparent calc(var(--slot) + var(--plank))),
    /* penumbra junto aos montantes */
    linear-gradient(90deg, rgba(0,0,0,.5), transparent 6%, transparent 94%, rgba(0,0,0,.5)),
    /* emendas das tábuas do fundo + veio vertical */
    repeating-linear-gradient(90deg, transparent 0 122px, var(--seam) 122px 124px, rgba(255,255,255,.05) 124px 125px),
    var(--woodV);
  background-size: auto, auto, auto, auto, 140px 460px;
  background-blend-mode: normal, normal, normal, normal, soft-light;
}
/* iluminação embutida: uma fita de luz sob cada tábua, em vez da sombra */
.room[data-light="on"] .row-books {
  background-image:
    repeating-linear-gradient(180deg,
      transparent 0, transparent var(--slot),
      var(--nose) var(--slot), var(--nose) calc(var(--slot) + 1px),
      var(--wood-hi) calc(var(--slot) + 1px), var(--wood) calc(var(--slot) + 7px),
      var(--wood-mid) calc(var(--slot) + 14px), var(--wood-dark) calc(var(--slot) + var(--plank) - 2px),
      #000 calc(var(--slot) + var(--plank) - 2px), #000 calc(var(--slot) + var(--plank))),
    repeating-linear-gradient(180deg,
      rgba(255,222,170,.55) 0, rgba(255,222,170,.55) 1px,
      var(--lamp) 1px, rgba(255,196,120,.07) 70px, transparent 200px,
      transparent calc(var(--slot) + var(--plank))),
    linear-gradient(90deg, rgba(0,0,0,.5), transparent 6%, transparent 94%, rgba(0,0,0,.5)),
    repeating-linear-gradient(90deg, transparent 0 122px, var(--seam) 122px 124px, rgba(255,255,255,.05) 124px 125px),
    var(--woodV);
  background-size: auto, auto, auto, auto, 140px 460px;
  background-blend-mode: normal, screen, normal, normal, soft-light;
}

/* cada livro ocupa exatamente uma linha de --slot + --plank: apoiado na tábua */
.book { margin: calc(var(--slot) - var(--h)) 3px var(--plank) 0; }
/* respiro entre grupos de estantes diferentes na prateleira única */
.row-books .gap { flex: none; width: 26px; align-self: stretch; }
.empty {
  align-self: center; margin: auto;
  font-family: var(--display); font-style: italic; color: rgba(184,176,157,.35);
}

/* etiqueta da prateleira: plaqueta de latão na quina da tábua -------------- */
.plank { position: relative; height: 0; }
.plank .label {
  position: absolute; right: 1.1rem; top: calc(var(--plank) / -2); transform: translateY(-50%);
  z-index: 2;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .16em; font-weight: 600;
  text-transform: uppercase;
  color: #2f1d07;
  text-shadow: 0 1px 0 rgba(255,244,214,.5);
  padding: 3px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 45%, rgba(0,0,0,.15)),
    linear-gradient(90deg, #b3873f, #e2be78 40%, #c79f54);
  border: 1px solid rgba(70,45,10,.75);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(255,240,200,.35), 0 1px 2px rgba(0,0,0,.7), 0 3px 6px -2px rgba(0,0,0,.6);
}
.plank .label em { font-style: normal; margin-left: .7em; color: #5a3d14; }

/* aparador ao fim da fileira única ----------------------------------------- */
.bookend {
  flex: none; align-self: flex-end; position: relative;
  width: 14px; height: 120px; margin: 0 0 var(--plank) 4px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.22), transparent 35%, rgba(0,0,0,.4)),
    linear-gradient(180deg, var(--wood-hi), var(--wood) 60%, var(--wood-mid));
  border-radius: 2px 2px 0 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 4px 6px 12px -4px rgba(0,0,0,.7);
}
.bookend::after {
  content: ""; position: absolute; left: -40px; bottom: 0; width: 42px; height: 5px;
  background: linear-gradient(180deg, var(--wood-hi), var(--wood-mid));
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 -6px 12px -4px rgba(0,0,0,.5);
  border-radius: 1px;
}

/* celular: montantes e molduras mais finos, mais tábua para os livros ------- */
@media (max-width: 640px) {
  .bookcase { --up: 14px; padding: 0 calc(.8rem + var(--up)); margin-bottom: 4.5rem; }
  .bookcase::before { left: -8px; right: -8px; }
  .bookcase::after { left: -6px; right: -6px; }
  .row-books { margin: 0 -.8rem; padding: 0 1.2rem; }
  .case-head { height: 32px; padding: 0 1rem; gap: .6rem; }
  .case-head h2 { font-size: 1rem; }
  .plank .label { right: .7rem; }
}