@font-face { font-family: Germanica; src: url('fonts/germanica/Germanica.ttf') format('truetype'); font-display: swap; }
:root {
  --fc-wood: #765139; --fc-writing: #fff0d4; --fc-paper-ink: #352117; --fc-paper-muted: #705c46;
  --fc-shadow: #1c0c0877; --fc-rule: #e6bd8b40;
}
body.faces-mode .sheet { background-color: var(--fc-wood); background-image: linear-gradient(#21140b12,#21140b28),url('art/faces/walnut.png'); background-size: auto,1536px 1024px; }
body.faces-mode .sheet::before { opacity: .15; }
.fc-header { position:relative; background:var(--paper); margin:-28px -30px 0; padding:35px 40px 28px; box-shadow:0 6px 12px var(--fc-shadow); z-index:3; }
.fc-intro { font:26px/1.3 var(--hand); color:var(--ether-ink); margin:0 0 24px; }
.fc-tools { display:flex; flex-wrap:wrap; gap:10px; align-items:start; }
.fc-tools button,.fc-settings summary { cursor:pointer; font:13px/1.5 var(--body); color:var(--ink); background:var(--callout); border:1px solid var(--rule); border-radius:4px; padding:9px 13px; }
.fc-search { min-width:0; width:240px; max-width:100%; margin-right:auto; border:1px solid var(--rule); border-radius:4px; background:var(--paper); color:var(--ink); font:14px/1.5 var(--body); padding:9px 12px; }
.fc-settings { position:relative; }
.fc-settings > div { position:absolute; right:0; top:100%; z-index:10; width:235px; padding:18px; border:1px solid var(--rule); background:var(--paper); box-shadow:var(--lift); border-radius:4px; }
.fc-settings label { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px; font:12px/1.5 var(--body); margin-bottom:13px; }
.fc-settings input { width:100%; accent-color:var(--ether); }
.fc-hint,.fc-empty { color:var(--fc-writing); text-shadow:0 1px 3px var(--fc-shadow); }
.fc-hint { font:24px/1.4 var(--hand); margin:27px 0 15px; }
.faces.fc-collection { display:block; }
.fc-deck { margin:0 0 60px; }
.sheet h2.fc-label { display:flex; flex-wrap:wrap; align-content:center; justify-content:center; position:relative; isolation:isolate; width:550px; max-width:100%; min-height:205px; margin:65px auto 35px; padding:40px 65px 51px; gap:8px; background:transparent url('art/faces/gothic-paper.png') center/100% 100% no-repeat; border:0; border-radius:0; box-shadow:none; font:400 58px/1.1 Germanica,Georgia,serif; letter-spacing:0; color:var(--fc-paper-ink); text-shadow:0 1px 0 #fff5; filter:drop-shadow(2px 7px 4px var(--fc-shadow)); transform:rotate(-1.5deg); overflow-wrap:anywhere; }
.fc-deck:nth-child(even) h2.fc-label { transform:rotate(1.3deg); }
.sheet h2.fc-label { text-align:center; }
.fc-label > span { flex-basis:100%; font:10px/1.5 var(--body); letter-spacing:2px; color:var(--fc-paper-muted); }
.fc-label > button { position:absolute; bottom:25px; left:50%; transform:translateX(-50%); background:transparent; border:0; border-bottom:1px solid #8f714e66; border-radius:0; padding:2px 6px; color:var(--fc-paper-ink); font:10px/1.4 var(--body); white-space:nowrap; cursor:pointer; }
.fc-fan { display:flex; justify-content:center; align-items:flex-end; padding:55px 35px 65px; }
.fc-fan + .fc-fan { border-top:1px solid var(--fc-rule); padding-top:70px; }
.fc-card { position:relative; display:block; flex:0 0 var(--fc-width); width:var(--fc-width); min-width:0; margin:0; padding:0; color:var(--fc-writing); border:0; background:transparent; border-radius:3px; cursor:pointer; transform:translateY(var(--fc-shift)) rotate(var(--fc-angle)); transform-origin:50% 90%; transition:transform .25s; z-index:var(--fc-layer); }
.fc-fan .fc-card + .fc-card { margin-left:calc(var(--fc-width)*var(--fc-overlap)*-.01); }
.fc-card > span { display:block; margin:0 -8px 13px; padding:0 4px; min-height:1.1em; text-align:center; color:var(--fc-writing); font:24px/1.1 var(--hand); text-shadow:0 1px 3px #231208,0 0 8px #25150e; background:transparent; }
.sheet .fc-card img { display:block; width:100%; height:auto; max-width:100%; padding:0; border:0; border-radius:4px; background:transparent; box-shadow:2px 7px 10px #23120877; }
.fc-card:hover,.fc-card:focus-visible { transform:translateY(-12px) rotate(0) scale(1.06); z-index:30; }
.fc-card > span { margin-left:0; margin-right:0; }
.fc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(var(--fc-size),100%),1fr)); gap:40px 25px; padding:35px 25px; align-items:end; }
.fc-grid .fc-card { width:100%; max-width:var(--fc-size); justify-self:center; }
.fc-modal-open { overflow:hidden; }
.fc-dialog { padding:25px; max-width:94vw; max-height:94vh; overflow:auto; border:1px solid var(--rule); border-radius:7px; background:var(--paper); color:var(--ink); box-shadow:var(--sheet-shadow); }
.fc-dialog::backdrop { background:#160d17dd; backdrop-filter:blur(7px); }
.fc-dialog img { display:block; max-width:80vw; max-height:68vh; width:auto; height:auto; object-fit:contain; border-radius:4px; margin:auto; }
.fc-dialog p { text-align:center; font:28px/1.2 var(--hand); margin:12px 0; }
.fc-close { position:absolute; z-index:2; right:5px; top:0; padding:0 8px; background:var(--paper); color:var(--ink); border:0; border-radius:3px; cursor:pointer; font:28px/1.4 var(--body); }
.fc-open { display:block; width:fit-content; margin:12px auto 0; padding:10px 24px; border:1px solid var(--rule); border-radius:4px; color:var(--ink); background:var(--callout); text-decoration:none; font:14px/1.4 var(--body); }
.fc-open:hover { color:var(--ether); border-color:var(--ether); }
.fc-card:focus-visible,.fc-label button:focus-visible { outline:3px solid var(--fc-writing); outline-offset:5px; }
@media (max-width: 860px) {
  .fc-header { margin:-16px -12px 0; padding:25px 20px; }
  .fc-search { width:100%; }
  .fc-tools { gap:8px; }
  .fc-tools button,.fc-settings summary { font-size:12px; padding:8px; }
  .fc-settings > div { right:auto; left:0; width:210px; }
  .fc-hint { font-size:22px; }
  .sheet h2.fc-label { font-size:40px; min-height:170px; margin:50px auto 20px; padding:35px 40px 48px; }
  .fc-label > span { font-size:9px; }
  .fc-label > button { font-size:9px; bottom:23px; }
  .fc-fan { padding:42px 25px 55px; }
  .fc-fan + .fc-fan { padding-top:45px; }
  .fc-card > span { font-size:17px; margin-bottom:10px; }
  .fc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:35px 16px; padding:25px 10px; }
  .fc-deck { margin-bottom:40px; }
  .fc-dialog { padding:18px; }
  .fc-dialog img { max-width:82vw; max-height:64vh; }
  .fc-open { font-size:13px; }
}
@media (prefers-reduced-motion: reduce) { .fc-card { transition:none; } }