/*
  SKRYPTORIUM — RĘKOPISY I ILUMINACJE
  Jeden katalog wyglądu kart dla kreatora, edytora i publicznej biblioteki.
  Dodatkowe arkusze ładujemy po starszych styles.css i biblioteka.css.
*/

/* Galeria pergaminów: miniaturowe karty mają strukturę prawdziwego rękopisu. */
.paper-options{gap:11px}
.paper-option{border-radius:2px;transition:background .2s,border-color .2s,transform .2s}
.paper-option:hover{background:#3b3026;transform:translateY(-2px)}
.paper-option__sample{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;isolation:isolate;position:relative;height:107px;padding:8px 10px;
  border:1px solid #9b825f;box-shadow:inset 0 0 13px #4f2e1d2b,0 2px 6px #0b060566;
}
.paper-option__sample::before{content:"";position:absolute;inset:5px;border:1px solid currentColor;opacity:.26;pointer-events:none}
.paper-option__illumination{z-index:1;font:22px/1 Georgia,serif;color:inherit;opacity:.8}
.paper-option__mini-title{z-index:1;font:600 12px/1.4 'Cinzel',Georgia,serif}
.paper-option__mini-rule{z-index:1;display:block;margin:5px 0 0;width:40%;border-bottom:1px solid currentColor;opacity:.55}
.paper-option__mini-lines{
  z-index:1;width:58%;height:13px;margin-top:6px;opacity:.25;
  background:repeating-linear-gradient(180deg,currentColor 0 1px,transparent 1px 5px);
}
.paper-option__name{font-size:15px;line-height:1.16;min-height:29px}
.paper-option__description{display:block;margin:0 2px 5px;font:12px/1.25 'EB Garamond',Georgia,serif;color:#b7a38a}
.paper-option__check{color:#f1d29e}

/* Nowe gatunki pergaminu — w tym kilka barwionych kodeksów. */
:is(.folio,.reader__page,.paper-option__sample,.frame-option__sample)[data-paper="vellum"]{
  background:repeating-linear-gradient(102deg,#f6eac80b 0 8px,#a98c4e14 10px 12px),
    radial-gradient(ellipse at 78% 0%,#fffcef 0%,#f2e5c5 59%,#d9c9a7 100%);
  color:#412b1e;
}
:is(.folio,.reader__page,.paper-option__sample,.frame-option__sample)[data-paper="marbled"]{
  background:repeating-radial-gradient(ellipse at 18% 62%,#945b4330 0 3px,transparent 4px 27px,#c18d6a25 29px 32px),
    repeating-linear-gradient(132deg,transparent 0 29px,#805e7c16 30px 34px,transparent 36px 54px),
    linear-gradient(126deg,#f0d5b9,#ddc4ab 65%,#bfa98d);
  color:#493126;
}
:is(.folio,.reader__page,.paper-option__sample,.frame-option__sample)[data-paper="scholar"]{
  background:linear-gradient(90deg,transparent 0 10%,#985a3a37 10.3%,transparent 10.8%),
    repeating-linear-gradient(180deg,transparent 0 27px,#77745c24 28px 29px),
    linear-gradient(120deg,#f2e7cb,#dcccac);
  color:#3b3025;
}
:is(.folio,.reader__page,.paper-option__sample,.frame-option__sample)[data-paper="herbarium"]{
  background:radial-gradient(ellipse at 7% 85%,#4d825927,transparent 32%),
    radial-gradient(ellipse at 100% 8%,#557f4830,transparent 33%),
    repeating-linear-gradient(73deg,transparent 0 14px,#6186510c 16px 18px),
    linear-gradient(130deg,#e9e7c7,#cbd2a5 75%,#acb88d);
  color:#34472b;
}
:is(.folio,.reader__page,.paper-option__sample,.frame-option__sample)[data-paper="ash"]{
  background:radial-gradient(ellipse at 6% 8%,#3c241d73,transparent 24%),
    radial-gradient(ellipse at 98% 97%,#32241e8f,transparent 29%),
    radial-gradient(ellipse at 98% 10%,#8e604546,transparent 30%),
    linear-gradient(128deg,#ddc4a3,#b7a08a 62%,#806555);
  color:#35251e;
}
:is(.folio,.reader__page,.paper-option__sample,.frame-option__sample)[data-paper="azure"]{
  background:radial-gradient(ellipse at 13% 7%,#8baece80,transparent 38%),
    repeating-linear-gradient(45deg,#d8d9d71a 0 6px,transparent 7px 17px),
    linear-gradient(125deg,#d7e4df,#9db9bd 73%,#7c9fac);
  color:#183e51;
}
:is(.folio,.reader__page,.paper-option__sample,.frame-option__sample)[data-paper="crimson"]{
  background:radial-gradient(ellipse at 52% 6%,#9b5268 0%,transparent 49%),
    repeating-linear-gradient(90deg,transparent 0 11px,#f2bca308 13px 15px),
    linear-gradient(130deg,#7e344a,#502031 87%);
  color:#f7dfb7;
}
:is(.folio,.reader__page,.paper-option__sample,.frame-option__sample)[data-paper="cathedral"]{
  background:repeating-linear-gradient(123deg,#f4dda50a 0 5px,transparent 7px 24px),
    radial-gradient(ellipse at 49% 18%,#928b7860,transparent 55%),
    linear-gradient(125deg,#cac7b0,#969c8d 82%,#7c867e);
  color:#293831;
}
:is(.folio,.reader__page,.paper-option__sample,.frame-option__sample)[data-paper="winter"]{
  background:radial-gradient(ellipse at 60% 0%,#fff 0%,transparent 45%),
    repeating-linear-gradient(130deg,transparent 0 15px,#8499a414 17px 18px),
    linear-gradient(130deg,#e6edeb,#cdd8df 72%,#b4c5d4);
  color:#273f4d;
}

/* Kolory pióra i inicjałów. */
:is(.folio,.reader__page)[data-paper="crimson"] :is(.folio-text,.page-body) p:first-child::first-letter{color:#ffd58a}
:is(.folio,.reader__page)[data-paper="azure"] :is(.folio-text,.page-body) p:first-child::first-letter{color:#26657a}
:is(.folio,.reader__page)[data-paper="herbarium"] :is(.folio-text,.page-body) p:first-child::first-letter{color:#627a35}
:is(.folio,.reader__page)[data-paper="winter"] :is(.folio-text,.page-body) p:first-child::first-letter{color:#517189}
:is(.folio,.reader__page)[data-paper="marbled"] :is(.folio-text,.page-body) p:first-child::first-letter{color:#8b4663}
:is(.folio,.reader__page)[data-paper="ash"] :is(.folio-text,.page-body) p:first-child::first-letter{color:#9d503b}

/* Niezależne ornamenty kart: wszystkie kombinacje działają w kreatorze i bibliotece. */
.frame-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.frame-option{
 display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:7px;
 border:1px solid #715637;background:linear-gradient(130deg,#34281e,#241b15);
 text-align:left;min-width:0;color:#ead1aa;border-radius:2px;
}
.frame-option:hover{border-color:#d9ab6d;background:#3a2c20}
.frame-option.is-selected{border-color:#f2cd8e;box-shadow:inset 0 0 0 1px #dba966,0 0 0 2px #be924225}
.frame-option__sample{
 position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;
 height:91px;min-width:0;overflow:hidden;border:1px solid #927c61;
 background:linear-gradient(120deg,#f1e4be,#d9c09a);color:#533820;
 isolation:isolate;text-align:center;
}
.frame-option__sample>span{z-index:1;pointer-events:none}
.frame-option__sample>span:first-child{font-size:18px}
.frame-option__sample>span:nth-child(2){font:11px 'Cinzel',Georgia,serif;letter-spacing:.12em}
.frame-option__sample-rule{height:1px;width:28%;background:currentColor;opacity:.5;margin-top:8px}
.frame-option__name{font:13px/1.2 'Cinzel',serif;color:#efd3a4}
.frame-option__detail{font:12px/1.2 'EB Garamond',serif;color:#baa58b}
.frame-option__checked{font:10px/1.3 sans-serif;color:#f2c785}
.frame-option__sample::before{content:"";z-index:0;position:absolute;inset:0;pointer-events:none;opacity:.8}
.frame-option__sample::after{content:"";z-index:0;position:absolute;inset:7px;pointer-events:none;box-sizing:border-box}

/* Prosty — cienka linia tuszu. */
:is(.folio,.reader__page,.frame-option__sample)[data-frame="plain"][data-frame]::after{
 content:"";position:absolute;inset:12px;pointer-events:none;opacity:.25;
 border:1px solid currentColor;background:none;box-shadow:none;outline:0;
}

/* Filigran — mosiężna ażurowa ramka, dyskretne złote naroża. */
:is(.folio,.reader__page,.frame-option__sample)[data-frame="filigree"][data-frame]::after{
 content:"";position:absolute;inset:10px;pointer-events:none;opacity:.75;
 border:3px double #b78641;
 box-shadow:inset 0 0 0 2px #f3d39440,0 0 0 1px #91652e7d;
 background:radial-gradient(circle at 0 0,#8e632f 0 5px,transparent 6px),
            radial-gradient(circle at 100% 0,#8e632f 0 5px,transparent 6px),
            radial-gradient(circle at 0 100%,#8e632f 0 5px,transparent 6px),
            radial-gradient(circle at 100% 100%,#8e632f 0 5px,transparent 6px);
}
:is(.folio,.reader__page,.frame-option__sample)[data-frame="filigree"]::before{
 content:"❦";position:absolute;top:2px;left:50%;transform:translateX(-50%);
 color:#a87732;font:19px Georgia,serif;z-index:0;pointer-events:none;opacity:.75;
}

/* Gotycka — ciemne smukłe obramowanie z arkadami. */
:is(.folio,.reader__page,.frame-option__sample)[data-frame="gothic"][data-frame]::after{
 content:"";position:absolute;inset:11px;pointer-events:none;opacity:.72;
 border:2px solid #604b38;outline:1px solid #998069;outline-offset:-6px;
 border-radius:30px 30px 2px 2px / 17px 17px 2px 2px;
 box-shadow:inset 0 0 0 2px #c6aa7a24;
 background:radial-gradient(ellipse at 50% 0,#45322927,transparent 30%);
}
:is(.folio,.reader__page,.frame-option__sample)[data-frame="gothic"]::before{
 content:"✟";position:absolute;left:50%;top:2px;transform:translateX(-50%);color:#7c5033;
 font-size:14px;z-index:0;pointer-events:none;
}

/* Heraldyczna — narożniki z tarczami. */
:is(.folio,.reader__page,.frame-option__sample)[data-frame="heraldic"][data-frame]::after{
 content:"";position:absolute;inset:10px;pointer-events:none;opacity:.77;
 border:3px double #944631;outline:1px solid #b68c54;outline-offset:-7px;
 box-shadow:inset 0 0 0 1px #a3774d80;
 background:
 radial-gradient(circle at 0 0,#b68a4e 0 5px,transparent 6px),
 radial-gradient(circle at 100% 0,#b68a4e 0 5px,transparent 6px),
 radial-gradient(circle at 0 100%,#b68a4e 0 5px,transparent 6px),
 radial-gradient(circle at 100% 100%,#b68a4e 0 5px,transparent 6px);
}
:is(.folio,.reader__page,.frame-option__sample)[data-frame="heraldic"]::before{
 content:"⚜";position:absolute;left:50%;top:1px;transform:translateX(-50%);
 color:#933c28;font-size:18px;z-index:0;pointer-events:none;
}

/* Roślinna — zielone listki i wici wokół pergaminu. */
:is(.folio,.reader__page,.frame-option__sample)[data-frame="vines"][data-frame]::after{
 content:"";position:absolute;inset:10px;pointer-events:none;opacity:.72;
 border:2px dashed #5e7c4c;outline:1px solid #708f58;outline-offset:4px;
 box-shadow:inset 0 0 0 2px #b0ad6d31;
 background:
 radial-gradient(ellipse at 0 0,#507a384c,transparent 22%),
 radial-gradient(ellipse at 100% 100%,#587f3452,transparent 23%),
 radial-gradient(ellipse at 100% 0,#57793e52,transparent 22%),
 radial-gradient(ellipse at 0 100%,#57793e52,transparent 22%);
}
:is(.folio,.reader__page,.frame-option__sample)[data-frame="vines"]::before{
 content:"❧";position:absolute;left:50%;top:1px;transform:translateX(-50%);
 color:#42713a;font-size:21px;pointer-events:none;
}

/* Królewska — ceremonialna złota bordiura. */
:is(.folio,.reader__page,.frame-option__sample)[data-frame="royal"][data-frame]::after{
 content:"";position:absolute;inset:8px;pointer-events:none;opacity:.89;
 border:5px double #aa823e;outline:1px solid #dab56b;outline-offset:3px;
 box-shadow:inset 0 0 0 3px #8e48312a,inset 0 0 0 5px #e4ba6a6b,0 0 3px #31201133;
 background:
 radial-gradient(circle at 0 0,#9b442c 0 5px,transparent 7px),
 radial-gradient(circle at 100% 0,#9b442c 0 5px,transparent 7px),
 radial-gradient(circle at 0 100%,#9b442c 0 5px,transparent 7px),
 radial-gradient(circle at 100% 100%,#9b442c 0 5px,transparent 7px);
}
:is(.folio,.reader__page,.frame-option__sample)[data-frame="royal"]::before{
 content:"♛";position:absolute;top:2px;left:50%;transform:translateX(-50%);
 color:#a78331;font-size:17px;z-index:0;pointer-events:none;
}

/* Kronikarska — pionowe marginesy do notatek. */
:is(.folio,.reader__page,.frame-option__sample)[data-frame="scribal"][data-frame]::after{
 content:"";position:absolute;inset:10px 12px;pointer-events:none;opacity:.65;
 border-top:1px solid #7b5236;border-bottom:1px solid #7b5236;
 border-left:3px double #a36648;border-right:3px double #a36648;
 outline:1px dashed #896e4b;outline-offset:-6px;box-shadow:none;
 background:linear-gradient(90deg,#a66e4b40 0 1px,transparent 2px calc(100% - 2px),#a66e4b40 calc(100% - 1px));
}
:is(.folio,.reader__page,.frame-option__sample)[data-frame="scribal"]::before{
 content:"✒";position:absolute;top:2px;right:21px;transform:none;
 font-size:15px;color:#715036;z-index:0;pointer-events:none;
}

/* Poprawki kontrastu drobnych złoconych detali na ciemnych kartach. */
:is(.folio,.reader__page)[data-paper="crimson"][data-frame="plain"]::after{opacity:.53}
:is(.folio,.reader__page)[data-paper="nocturne"][data-frame="plain"]::after{opacity:.57}
:is(.folio,.reader__page)[data-paper="crimson"] :is(.folio-kicker,.page-kicker){color:#ffe0b2}
:is(.folio,.reader__page)[data-paper="crimson"] :is(.folio-rule,.page-rule){background:#ffddaa}

/* Gęstsza galeria nowych opraw okładkowych w kreatorze. */
.cover-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.cover-option{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-width:0;padding:7px;font-size:13px}
.cover-option__swatch{height:70px;position:relative;isolation:isolate;overflow:hidden}
.cover-option__swatch::after{
 content:"✥";position:absolute;inset:6px;display:grid;place-items:center;
 border:1px solid #edd39a85;color:#f4dfbd;opacity:.8;font-size:20px;
 text-shadow:0 1px 3px #0008;background:linear-gradient(110deg,#ffffff16,transparent 56%);
}
.paper-options,.frame-options,.spine-options,.cover-options{scroll-margin-top:30px}

/* Czytelne karty w wąskim panelu i na urządzeniach mobilnych. */
@media(max-width:420px){
 .paper-options,.frame-options{gap:8px}
 .paper-option,.frame-option{padding:5px}
 .paper-option__sample{height:94px}
 .frame-option__sample{height:84px}
 .cover-options{gap:6px}
 .cover-option{padding:5px;font-size:12px}
}