/* CHARACTER CARD (js/character-card.js): a portrait tapped fills the screen with the person. Dark glass, gold, leather browns, the satchel's look. */
.pc-wrap{position:fixed;inset:0;z-index:60;display:flex;align-items:stretch;justify-content:center}
.pc-wrap[hidden]{display:none}
.pc-scrim{position:absolute;inset:0;background:rgba(6,4,10,.78);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.pc-card{position:relative;width:100%;max-width:560px;height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:linear-gradient(#1b1209,#120c07 40%,#0c0805);color:var(--ps-ink,#f3e9d2);font-family:var(--ps-sans,system-ui);
  box-shadow:0 0 0 1px rgba(216,176,106,.35),0 20px 60px rgba(0,0,0,.7);animation:pcIn .22s ease-out}
@keyframes pcIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (min-width:640px){ .pc-wrap{align-items:center;padding:24px 0} .pc-card{height:auto;max-height:100%;border-radius:18px} }
.pc-x{position:sticky;top:10px;float:right;margin:10px 10px -54px 0;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(216,176,106,.5);
  background:rgba(12,9,16,.75);color:var(--ps-ink,#f3e9d2);font-size:18px;cursor:pointer;touch-action:manipulation}
.pc-hero{position:relative;width:100%;aspect-ratio:1/1;max-height:62dvh;overflow:hidden;background:#000}
.pc-img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.pc-fade{position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(transparent,#1b1209 92%)}
.pc-title{position:absolute;left:18px;right:18px;bottom:10px}
.pc-title h2{margin:0;font:600 clamp(26px,7vw,34px)/1.1 var(--ps-serif,Georgia,serif);color:#f6e7c3;text-shadow:0 2px 10px #000}
.pc-title p{margin:4px 0 0;font:italic 400 16px/1.3 var(--ps-serif,Georgia,serif);color:var(--ps-gold,#e0b873);text-shadow:0 1px 6px #000}
.pc-body{padding:4px 18px max(28px,env(safe-area-inset-bottom))}
.pc-desc{margin:8px 0 12px;font:400 16px/1.45 var(--ps-serif,Georgia,serif);color:#e9dcc0}
.pc-stats{display:flex;gap:10px;margin:6px 0 4px}
.pc-stats span{flex:1;text-align:center;padding:8px 4px;border-radius:12px;background:rgba(224,184,115,.09);box-shadow:inset 0 0 0 1px rgba(216,176,106,.3);
  font:700 10px var(--ps-sans,system-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--ps-gold,#e0b873)}
.pc-stats b{display:block;font:600 26px/1.1 var(--ps-serif,Georgia,serif);color:#f6e7c3;letter-spacing:0;margin-bottom:2px}
.pc-body h3{margin:20px 0 8px;font:700 11px var(--ps-sans,system-ui);letter-spacing:.24em;text-transform:uppercase;color:var(--ps-gold,#e0b873);
  padding-bottom:6px;border-bottom:1px solid rgba(216,176,106,.25)}
.pc-skills,.pc-traits,.pc-quotes,.pc-did{list-style:none;margin:0;padding:0}
.pc-skills li{display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.pc-sk{font:600 16px var(--ps-serif,Georgia,serif);color:#f6e7c3}
.pc-pips{font-size:13px;letter-spacing:.14em;color:var(--ps-gold,#e0b873);white-space:nowrap}
.pc-pips.live{color:#9fd3a8}
.pc-note{grid-column:1/-1;margin-top:2px;font:400 13.5px/1.35 var(--ps-sans,system-ui);color:#bfae8d}
.pc-traits li{margin:0 0 8px;padding:9px 12px;border-radius:10px;background:rgba(255,255,255,.04);font:400 14.5px/1.4 var(--ps-serif,Georgia,serif);color:#d9ccb0}
.pc-traits b{display:inline-block;margin-right:6px;font:700 11px var(--ps-sans,system-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ps-gold,#e0b873)}
.pc-met{margin:0 0 6px;font:italic 400 14px var(--ps-serif,Georgia,serif);color:#bfae8d}
.pc-sub{margin:12px 0 4px;font:700 10px var(--ps-sans,system-ui);letter-spacing:.2em;text-transform:uppercase;color:#bfae8d}
.pc-quotes li{margin:0 0 8px;padding-left:12px;border-left:3px solid rgba(216,176,106,.55);font:italic 400 15.5px/1.4 var(--ps-serif,Georgia,serif);color:#efe2c4}
.pc-did li{margin:0 0 6px;padding-left:14px;position:relative;font:400 14.5px/1.4 var(--ps-serif,Georgia,serif);color:#d9ccb0}
.pc-did li::before{content:'›';position:absolute;left:2px;color:var(--ps-gold,#e0b873)}
.pc-none{font:italic 400 14.5px var(--ps-serif,Georgia,serif);color:#bfae8d}
body.pc-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){ .pc-card{animation:none} }

/* TWO COLUMNS on a desktop or an iPad (Eivind, 2026-10-08): the portrait and name stand on the left, the sheet reads on the right. */
@media (min-width:900px){
  .pc-card{max-width:940px;display:grid;grid-template-columns:380px minmax(0,1fr);grid-template-rows:1fr;max-height:min(92vh,760px);overflow:hidden}
  .pc-card .pc-x{position:absolute;top:12px;right:12px;float:none;margin:0}
  .pc-card .pc-hero{grid-column:1;grid-row:1;aspect-ratio:auto;max-height:none;height:100%;min-height:420px}
  .pc-card .pc-img{object-position:50% 20%}
  .pc-card .pc-fade{height:45%}
  .pc-card .pc-body{grid-column:2;grid-row:1;overflow-y:auto;overscroll-behavior:contain;padding:22px 26px 26px}
  .pc-card .pc-body h3:first-child,.pc-card .pc-body .pc-desc:first-child{margin-top:4px}
}