/* Ramele INWO: marginea fiecărui tip de carte, decupată din scanările reale (fa-texturi.py).
   Folosire: <link rel="stylesheet" href="…/rame/rame.css"> și <section class="rama-grup">…</section>.
   Opțional în interior: .rama-titlu (titlul auriu, ca pe carte) și .rama-caseta (caseta deschisă a textului de pe carte).
   Eticheta (Place, Plot, Disaster! …) se schimbă cu data-eticheta="…" pe section.
   Grosimea se schimbă cu --rama-gros (implicit 26px). */

@font-face { font-family: 'Rama Serif'; src: url(fonts/youngserif.ttf) format('truetype'); font-display: swap; }

:where(.rama-illuminati, .rama-nwo, .rama-plot, .rama-disaster, .rama-grup, .rama-personaj, .rama-loc, .rama-resursa, .rama-goal) {
  --rama-gros: 26px;
  --rama-auriu: #edb65a;
  position: relative;
  box-sizing: border-box;
  border: var(--rama-gros) solid transparent;
  border-image: var(--rama-img) 60 round;
  background: var(--rama-fond) padding-box;
  color: #f3eadf;
  padding: 30px 34px;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .5));
}
/* linia subțire de pe cărți, dintre margine și desen */
:where(.rama-illuminati, .rama-nwo, .rama-plot, .rama-disaster, .rama-grup, .rama-personaj, .rama-loc, .rama-resursa, .rama-goal)::after {
  content: attr(data-eticheta);
  position: absolute; pointer-events: none;
}
:where(.rama-illuminati, .rama-nwo, .rama-plot, .rama-disaster, .rama-grup, .rama-personaj, .rama-loc, .rama-resursa, .rama-goal) > .rama-titlu,
:where(.rama-illuminati, .rama-nwo, .rama-plot, .rama-disaster, .rama-grup, .rama-personaj, .rama-loc, .rama-resursa, .rama-goal) .rama-titlu {
  font-family: 'Rama Serif', 'Young Serif', Georgia, serif; font-weight: 400;
  color: var(--rama-auriu); text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
  margin: 0 0 .5em; line-height: 1.1;
}
.rama-caseta {
  background: var(--rama-caseta, #f7b2ae); color: #1d1416;
  border: 2px solid rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  padding: 14px 18px; border-radius: 2px;
}

/* ---------- grupuri: marmură roșie, triunghiurile de săgeți ---------- */
.rama-grup, .rama-personaj, .rama-loc {
  --rama-img: url(texturi/grup.webp);
  --rama-fond: #2b1716;
  --rama-caseta: #f7b2ae;
}
.rama-loc { --rama-img: url(texturi/loc.webp); }
.rama-grup::before, .rama-personaj::before, .rama-loc::before {
  content: ''; position: absolute; left: 50%; top: calc(-1 * var(--rama-gros) + 2px);
  width: 30px; height: 15px; transform: translateX(-50%);
  background: var(--rama-auriu); clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6));
}
.rama-personaj:not([data-eticheta])::after { content: 'Personality'; }
.rama-loc:not([data-eticheta])::after { content: 'Place'; }
.rama-grup::after, .rama-personaj::after, .rama-loc::after {
  left: -10px; top: calc(-1 * var(--rama-gros) + 4px);
  font: 700 11px/1 Arial, Helvetica, sans-serif; color: var(--rama-auriu); letter-spacing: .02em;
  text-shadow: 0 1px 0 #000;
}

/* ---------- New World Order: cadru gri-închis, NEW WORLD ORDER sus ---------- */
.rama-nwo {
  --rama-img: url(texturi/nwo.webp);
  --rama-fond: #1f1e22;
  --rama-caseta: #d4d2dc;
  padding-top: 40px;
}
.rama-nwo::before {
  content: 'NEW WORLD ORDER'; position: absolute; left: 0; right: 0; top: calc(-1 * var(--rama-gros) + 3px);
  text-align: center; font: 700 14px/1 var(--serif, Georgia, serif); letter-spacing: .08em;
  color: #e0643a;
}
.rama-nwo::after { right: 4px; bottom: 6px; font: italic 12px/1 Georgia, serif; color: var(--rama-auriu); }

/* ---------- Plot, Disaster, Resource, Goal: cadru gri-violet, eticheta jos ---------- */
.rama-plot     { --rama-img: url(texturi/plot.webp);     --rama-fond: #23212a; --rama-caseta: #cfcdd9; }
.rama-disaster { --rama-img: url(texturi/disaster.webp); --rama-fond: #22202a; --rama-caseta: #cfcdd9; }
.rama-resursa  { --rama-img: url(texturi/resursa.webp);  --rama-fond: #241f27; --rama-caseta: #e2c9dc; }
.rama-goal     { --rama-img: url(texturi/goal.webp);     --rama-fond: #211f22; --rama-caseta: #d6d3dc; padding-top: 40px; }
.rama-plot:not([data-eticheta])::after     { content: 'Plot'; }
.rama-disaster:not([data-eticheta])::after { content: 'Disaster!'; }
.rama-resursa:not([data-eticheta])::after  { content: 'Resource'; }
.rama-plot::after, .rama-disaster::after, .rama-goal::after {
  right: 0; bottom: calc(-1 * var(--rama-gros) + 5px);
  font: italic 700 14px/1 Georgia, 'Times New Roman', serif; color: var(--rama-auriu); text-shadow: 0 1px 0 #000;
}
.rama-resursa::after {
  left: 0; bottom: calc(-1 * var(--rama-gros) + 5px);
  font: italic 700 14px/1 Georgia, 'Times New Roman', serif; color: #f0e6ee; text-shadow: 0 1px 0 #000;
}
.rama-goal::before {
  content: 'G O A L'; position: absolute; left: 0; right: 0; top: calc(-1 * var(--rama-gros) + 2px);
  text-align: center; font: 700 19px/1 Georgia, serif; letter-spacing: .35em; color: #d52b33; text-shadow: 0 1px 0 #000;
}

/* ---------- Illuminati: cartea culcată, cadru cărbune, piramida și cele 4 săgeți ---------- */
.rama-illuminati {
  --rama-img: url(texturi/illuminati.webp);
  --rama-fond: #1f1f1c;
  --rama-caseta: #d9c9a4;
  min-height: 220px;
  padding-left: 196px;                       /* loc pentru piramidă, ca pe cartea Illuminati */
  background:
    url(texturi/piramida.webp) 34px 50% / 132px auto no-repeat padding-box,
    var(--rama-fond) padding-box;
}
.rama-illuminati::before, .rama-illuminati::after {
  content: ''; position: absolute; top: 50%; width: 16px; height: 34px; margin-top: -17px;
  background: var(--rama-auriu); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6));
}
.rama-illuminati::before { left: calc(-1 * var(--rama-gros) + 4px); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.rama-illuminati::after  { right: calc(-1 * var(--rama-gros) + 4px); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.rama-illuminati > .rama-titlu { text-align: left; }

@media (prefers-reduced-motion: no-preference) {
  :where(.rama-illuminati, .rama-nwo, .rama-plot, .rama-disaster, .rama-grup, .rama-personaj, .rama-loc, .rama-resursa, .rama-goal).rama-viu {
    transition: transform .35s cubic-bezier(.2, .8, .2, 1.2), filter .35s;
  }
  :where(.rama-illuminati, .rama-nwo, .rama-plot, .rama-disaster, .rama-grup, .rama-personaj, .rama-loc, .rama-resursa, .rama-goal).rama-viu:hover {
    transform: translateY(-4px) rotate(-.4deg);
    filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .6));
  }
}