/* =============================================
   GRIMUAR (2.5) — wspólny język wizualny UI:
   skórzana oprawa, pergaminowe strony i karty, woskowe pieczęcie.
   Tylko czcionki systemowe — gra działa offline po podwójnym kliknięciu.
   ============================================= */
:root{
  --gr-parch-1:#ecdcb4; --gr-parch-2:#cdb27c;
  --gr-ink:#3a2a14; --gr-ink-soft:#5a4426;
  --gr-leather-1:#3a2216; --gr-leather-2:#1e110a;
  --gr-tool:#8a6a34; --gr-tool-lt:#e8c878;
  --gr-wax-common:#7a6a58; --gr-wax-rare:#2a5ab0; --gr-wax-epic:#7a3ab0; --gr-wax-legendary:#c8841a;
  --gr-wax-red:#a8281a;
  --gr-serif:Georgia,'Times New Roman',serif;
}

/* ---- oprawa okna ---- */
.gr-book{
  background:linear-gradient(180deg,var(--gr-leather-1),var(--gr-leather-2));
  border:none;border-radius:8px;padding:14px 18px 18px;color:var(--gr-parch-1);
  box-shadow:0 14px 34px rgba(0,0,0,.8),inset 0 0 0 2px #6b4a24,inset 0 0 0 4px #24140b,inset 0 0 0 5px var(--gr-tool);
}
.gr-title{text-align:center;font-family:var(--gr-serif);font-style:italic;color:var(--gr-tool-lt);font-size:26px;margin:6px 0 2px;text-shadow:0 1px 0 #000}
.gr-sub{text-align:center;font-family:var(--gr-serif);font-style:italic;color:#b8955a;font-size:12px;margin-bottom:14px}
.gr-page{
  background:linear-gradient(170deg,var(--gr-parch-1),var(--gr-parch-2));border-radius:3px;padding:12px 14px;
  color:var(--gr-ink);font-family:var(--gr-serif);box-shadow:inset 0 0 26px rgba(120,80,30,.4);
}

/* ---- karty nagród ---- */
.gr-cards{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;padding:12px 12px 8px} /* zapas na wystającą pieczęć */
.gr-card{
  width:148px;min-height:176px;box-sizing:border-box;position:relative;cursor:pointer;
  background:linear-gradient(170deg,var(--gr-parch-1),var(--gr-parch-2));border-radius:3px;
  padding:16px 11px 12px;text-align:center;color:var(--gr-ink);font-family:var(--gr-serif);
  box-shadow:0 6px 14px rgba(0,0,0,.6),inset 0 0 22px rgba(120,80,30,.35);
  transform:rotate(var(--gr-tilt,0deg));
  transition:transform .12s ease-out,box-shadow .12s ease-out,filter .12s ease-out;
  animation:gr-card-in .18s ease-out both;animation-delay:var(--gr-delay,0ms);
  outline:none;
}
.gr-card:nth-child(3n+1){--gr-tilt:-1.2deg}
.gr-card:nth-child(3n+2){--gr-tilt:.8deg}
.gr-card:nth-child(3n){--gr-tilt:-.5deg}
.gr-card:hover,.gr-card:focus-visible{transform:translateY(-5px) rotate(0deg);box-shadow:0 12px 22px rgba(0,0,0,.7),inset 0 0 22px rgba(120,80,30,.3)}
@keyframes gr-card-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}

.gr-key{position:absolute;left:7px;top:5px;font-size:10px;color:var(--gr-ink-soft);opacity:.7}
.gr-ic{font-size:32px;margin:2px 0 4px;filter:sepia(.35)}
.gr-nm{font-weight:bold;font-size:14px;color:#4a2a10}
.gr-ds{font-size:11px;margin-top:6px;line-height:1.35;color:var(--gr-ink-soft);font-style:italic}
.gr-cat{margin-top:9px;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gr-ink-soft)}
.gr-cost{margin-top:6px;font-size:11px;font-weight:bold;color:#6a4a10}
.gr-why{margin-top:8px;font-size:10px;color:#7a1a10;font-weight:bold}

.gr-seal{
  position:absolute;right:-9px;top:-9px;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:rgba(255,240,225,.9);
  box-shadow:0 2px 4px rgba(0,0,0,.55);background:radial-gradient(circle at 35% 35%,#a8988a,var(--gr-wax-common));
}
.gr-r-rare .gr-seal{background:radial-gradient(circle at 35% 35%,#5a8ae0,var(--gr-wax-rare))}
.gr-r-epic .gr-seal{background:radial-gradient(circle at 35% 35%,#a86ae0,var(--gr-wax-epic))}
.gr-r-legendary .gr-seal{background:radial-gradient(circle at 35% 35%,#f0b850,var(--gr-wax-legendary))}
.gr-card.gr-r-rare{box-shadow:0 6px 14px rgba(0,0,0,.6),0 0 0 1px rgba(42,90,176,.5),inset 0 0 22px rgba(120,80,30,.35)}
.gr-card.gr-r-epic{box-shadow:0 6px 14px rgba(0,0,0,.6),0 0 14px rgba(122,58,176,.45),inset 0 0 22px rgba(120,80,30,.35)}
.gr-card.gr-r-legendary{box-shadow:0 6px 14px rgba(0,0,0,.6),0 0 18px rgba(232,160,40,.6),inset 0 0 22px rgba(160,100,20,.35)}

.gr-card.is-disabled{filter:grayscale(.75) brightness(.72);cursor:not-allowed}
.gr-card.is-disabled:hover{transform:rotate(var(--gr-tilt,0deg))}
.gr-card.is-picked{transform:translateY(-8px) scale(1.06) rotate(0deg);box-shadow:0 0 0 2px var(--gr-tool-lt),0 0 26px rgba(232,200,120,.75),inset 0 0 22px rgba(120,80,30,.3)}

/* ---- przyciski ---- */
.gr-btn{
  display:inline-block;padding:9px 22px;border-radius:3px;font-family:var(--gr-serif);font-size:14px;
  color:#f0dcb0;background:linear-gradient(180deg,#4a2c1a,#2a170d);border:1px solid var(--gr-tool);cursor:pointer;
  transition:filter .12s ease-out,transform .12s ease-out;
}
.gr-btn:hover{filter:brightness(1.18)}
.gr-btn:active{transform:translateY(1px)}
.gr-btn--primary{background:linear-gradient(180deg,#7a2418,#4a120a);border-color:#c0703a}
.gr-actions{text-align:center;margin-top:12px}

/* ---- księga z zakładkami (2.6: pauza) ---- */
.gr-book.open,.gr-book{position:relative}
#settings-panel.gr-book{padding:0 18px 18px}
.gr-tabs{display:flex;gap:4px;justify-content:center;margin-bottom:6px}
.gr-tab{
  font-family:var(--gr-serif);font-size:12px;padding:7px 10px 10px;border:none;border-radius:0 0 4px 4px;cursor:pointer;
  background:linear-gradient(180deg,#5a1e14,#3a120c);color:#d8b890;box-shadow:0 2px 4px rgba(0,0,0,.6);
  transition:padding .12s ease-out,filter .12s ease-out;
}
.gr-tab:hover{filter:brightness(1.15)}
.gr-tab.is-active{background:linear-gradient(180deg,#a8281a,#6a160c);color:#fff0d8;padding-bottom:14px}
.gr-book-body{padding-top:4px}
.gr-btn--block{display:block;width:100%;margin-top:8px;box-sizing:border-box;text-align:center}
.gr-btn--small{padding:5px 12px;font-size:12px;margin-top:8px}
.gr-section-h{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gr-ink-soft);margin:10px 0 4px;border-bottom:1px solid rgba(90,68,38,.35);padding-bottom:2px}
.gr-section-h:first-child{margin-top:0}

/* suwak: pergaminowy tor, gałka z czerwonego wosku */
.gr-vol-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0;font-size:13px}
.gr-range{flex:1;max-width:220px;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:#b89a64;outline:none}
.gr-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 35% 35%,#d24a3a,#7a1410);box-shadow:0 1px 3px rgba(0,0,0,.6)}
.gr-range::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 35% 35%,#d24a3a,#7a1410)}

/* treść ustawień i zapisów na pergaminie */
.gr-settings-page .key-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;border-bottom:1px dotted rgba(90,68,38,.35);font-size:13px}
.gr-settings-page .key-label{color:var(--gr-ink)}
.gr-settings-page .key-btn{font-family:var(--gr-serif);min-width:70px;padding:3px 12px;border-radius:3px;cursor:pointer;color:#f0dcb0;background:linear-gradient(180deg,#4a2c1a,#2a170d);border:1px solid var(--gr-tool)}
.gr-settings-page .key-btn.listening{background:linear-gradient(180deg,#7a2418,#4a120a);animation:key-pulse 1s infinite}
.gr-settings-page .save-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dotted rgba(90,68,38,.35)}
.gr-settings-page .save-name{font-weight:bold;color:#4a2a10;font-size:13px}
.gr-settings-page .save-info{font-size:11px;color:var(--gr-ink-soft)}
.gr-settings-page .save-empty{font-style:italic;color:var(--gr-ink-soft);font-size:12px}
.gr-settings-page .save-row button{font-family:var(--gr-serif);font-size:12px;padding:4px 10px;border-radius:3px;cursor:pointer;color:#f0dcb0;background:linear-gradient(180deg,#4a2c1a,#2a170d);border:1px solid var(--gr-tool)}
.gr-settings-page .save-row .btn-delete-slot{background:linear-gradient(180deg,#7a2418,#4a120a);border-color:#c0703a}

.gr-confirm{margin-top:12px;text-align:center}
.gr-confirm-q{font-style:italic;font-size:14px;margin-bottom:8px}
.gr-confirm-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.gr-confirm-row .gr-btn{padding:6px 12px;font-size:13px}

/* ---- ekrany końca gry ---- */
.gr-end-book{position:relative;width:min(420px,calc(100vw - 32px));box-sizing:border-box;padding:28px 20px 18px;margin-top:20px;text-align:left}
.gr-crest{position:absolute;left:50%;top:-22px;transform:translateX(-50%);width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 3px 8px rgba(0,0,0,.7)}
.is-death .gr-crest{background:radial-gradient(circle at 35% 35%,#d24a3a,#6a0e08)}
.is-win .gr-crest{background:radial-gradient(circle at 35% 35%,#f0c060,#a8660e)}
.gr-end-book .gr-title{font-size:32px;margin-top:8px}
.is-death .gr-title{color:#e8786a}
.gr-cause{text-align:center;font-family:var(--gr-serif);font-style:italic;color:#d8b890;font-size:14px;margin:2px 0 14px}
.gr-essence{text-align:center;color:#c8a0ff;font-family:var(--gr-serif);font-size:14px;margin-top:12px}
.gr-end-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.gr-end-note{color:#9c8a6a;font-size:11px;font-style:italic;text-align:center;margin-top:10px}

/* ---- ekran tytułowy (2.6): przyciski skórzane, karty klas na pergaminie ---- */
#title-screen button:not(.class-card){
  font-family:var(--gr-serif);padding:11px 26px;font-size:15px;margin:6px;border-radius:3px;cursor:pointer;
  color:#f0dcb0;background:linear-gradient(180deg,#4a2c1a,#2a170d);border:1px solid var(--gr-tool);
  box-shadow:0 4px 12px rgba(0,0,0,.5);transition:filter .12s ease-out,transform .12s ease-out;
}
#title-screen button:not(.class-card):hover{filter:brightness(1.18);transform:translateY(-1px)}
#title-screen button.class-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;width:150px;margin:0;padding:18px 10px 12px;
  border:none;border-radius:3px;cursor:pointer;color:var(--gr-ink);font-family:var(--gr-serif);
  background:linear-gradient(170deg,var(--gr-parch-1),var(--gr-parch-2));
  box-shadow:0 6px 14px rgba(0,0,0,.6),inset 0 0 22px rgba(120,80,30,.35);
  transform:rotate(var(--gr-tilt,0deg));transition:transform .12s ease-out,box-shadow .12s ease-out;
}
#title-screen button.class-card:nth-child(odd){--gr-tilt:-1deg}
#title-screen button.class-card:nth-child(even){--gr-tilt:.8deg}
#title-screen button.class-card:hover,#title-screen button.class-card:focus-visible{transform:translateY(-5px) rotate(0deg);box-shadow:0 12px 22px rgba(0,0,0,.7),inset 0 0 22px rgba(120,80,30,.3)}
#title-screen .class-card .cc-icon{font-size:38px;line-height:1;filter:sepia(.25) drop-shadow(0 2px 3px rgba(0,0,0,.35))}
#title-screen .class-card .cc-name{font-size:16px;font-weight:bold;color:#4a2a10}
#title-screen .class-card .cc-desc{font-size:11px;font-style:italic;color:var(--gr-ink-soft);line-height:1.35;min-height:30px}
#title-screen .class-card .cc-stats{font-size:11px;color:var(--gr-ink);border-top:1px solid rgba(90,68,38,.35);padding-top:6px;width:100%}
.cc-seal{position:absolute;right:-9px;top:-9px;width:26px;height:26px;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.55);background:radial-gradient(circle at 35% 35%,#e05a4a,#a8281a)}
.class-card:nth-child(2) .cc-seal{background:radial-gradient(circle at 35% 35%,#5a8ae0,#2a5ab0)}
.class-card:nth-child(3) .cc-seal{background:radial-gradient(circle at 35% 35%,#5aa05a,#2a6a2a)}
.class-card:nth-child(4) .cc-seal{background:radial-gradient(circle at 35% 35%,#a86ae0,#7a3ab0)}
@media (prefers-reduced-motion: reduce){#title-screen button.class-card{transition:none}#title-screen button.class-card:hover{transform:rotate(var(--gr-tilt,0deg))}}

/* ---- okienka tytułu (#meta-panel): Sanktuarium, Bestiariusz, Co nowego, wybór zapisu ---- */
#meta-panel.gr-book{padding:16px 18px 18px}
#meta-panel .meta-essence{text-align:center;color:var(--gr-tool-lt);font-family:var(--gr-serif);font-size:15px;margin-bottom:10px}
#meta-panel .meta-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 0;border-bottom:1px dotted rgba(90,68,38,.4)}
#meta-panel .meta-row:last-child{border-bottom:none}
#meta-panel .meta-info{flex:1;min-width:0;font-size:13px;line-height:1.5}
#meta-panel .meta-icon{font-size:16px}
#meta-panel .meta-pips{color:#7a3ab0;letter-spacing:2px;font-size:12px}
#meta-panel .meta-desc{color:var(--gr-ink-soft);font-size:11px;font-style:italic}
#meta-panel .meta-buy{font-family:var(--gr-serif);min-width:78px;white-space:nowrap;padding:6px 12px;border-radius:3px;cursor:pointer;font-size:13px;color:#f0e0ff;background:linear-gradient(180deg,#5a3a8a,#2a1a4a);border:1px solid #8a6dc9}
#meta-panel .meta-buy:hover:not(:disabled){filter:brightness(1.15)}
#meta-panel .meta-buy:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.4)}
#meta-panel .meta-hint{color:#b8955a;font-size:11px;text-align:center;margin:10px 0 0;font-style:italic}
#meta-panel .gr-actions{margin-top:12px}

/* ---- kronika biegu ---- */
.gr-chronicle-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 16px}
.gr-stat{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dotted rgba(90,68,38,.4);padding:3px 0;font-size:13px}
.gr-stat-v{color:#4a2a10}
.gr-chronicle-h{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gr-ink-soft);margin:10px 0 2px}
.gr-chronicle-t{font-size:13px}

/* ---- ograniczony ruch: bez wejścia, uniesienia i błysku ---- */
@media (prefers-reduced-motion: reduce){
  .gr-card{animation:none;transition:none}
  .gr-card:hover,.gr-card:focus-visible,.gr-card.is-picked{transform:rotate(var(--gr-tilt,0deg))}
}