/* Full-screen pencil character sheet. The portrait spills beyond its frame. */
#lore{position:fixed;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;padding:0;border:0;border-radius:0;background:#fdfdfb;overflow:auto;isolation:isolate}
#lore::before{content:"";position:fixed;inset:-48px;z-index:-2;pointer-events:none;background-image:linear-gradient(#8a8a8510 1px,transparent 1px),linear-gradient(90deg,#8a8a8510 1px,transparent 1px);background-size:48px 48px;animation:status-grid-drift 40s linear infinite}
.status-landscape{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;color:#a3a39c;opacity:.2;overflow:visible}
.status-landscape g{animation:status-line-drift 24s ease-in-out infinite alternate;transform-origin:center}
.status-landscape g+g{animation-direction:alternate-reverse;animation-duration:31s;opacity:.65}
.status-shell{width:min(1000px,86vw);margin:0 auto;padding:35px 0 25px;position:relative}
#lore .status-shell>.eyebrow{text-align:center;font:10px/1.5 PermanentMarker,cursive;letter-spacing:.15em;color:#777;margin:0 0 7px}
#lore h2{text-align:center;font:42px/1.1 Pirata,Georgia,serif;margin:0 0 25px}
#lore .close{position:fixed;right:24px;top:19px;width:43px;height:43px;border:1px solid #777;border-radius:48% 54% 44% 51%;background:#fdfdfbe8;font:30px/1 Georgia,serif;box-shadow:2px 1px 0 -1px #aaa;z-index:10}
#lore .status-sheet{grid-template-columns:1fr 1fr;gap:18px 30px;align-items:stretch}
#lore .status-portrait{height:clamp(400px,58vh,590px);min-height:0;border:0;background:none;border-radius:0;display:block;overflow:visible}
.status-portrait .sketch-frame{left:24%;top:3%;width:72%;height:82%;background:#fff8;z-index:0}
#lore .status-portrait img{position:absolute;left:-8%;top:0;width:108%;height:100%;margin:0;object-fit:contain;filter:grayscale(1);z-index:1}
#lore .status-cross{top:7%;left:28%;font:22px Georgia,serif;z-index:2}
/* The opaque paper lettering sits above the sword, independent of its motion. */
#lore .status-name{position:absolute;left:0;top:3%;width:19%;height:82%;z-index:3;overflow:visible;pointer-events:none}
#lore .status-name text{font:80px Pirata,Georgia,serif;fill:#fdfdfb;stroke:#292925;stroke-width:1.2;stroke-linejoin:round;paint-order:fill stroke}
#lore .status-panels{grid-template-rows:auto auto auto 1fr;gap:12px}
#lore .status-panel{position:relative;isolation:isolate;border:0;border-radius:0;background:#fdfdfbd9;padding:10px 23px;box-shadow:none}
.sketch-frame{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:-1;color:#777}
.sketch-frame path{fill:none;stroke:currentColor;stroke-width:1.1;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.sketch-frame .pencil-echo{stroke-width:.55;opacity:.6}
.sketch-frame .pencil-hatch{stroke-width:.55;opacity:.35}
#lore .status-panel:nth-child(even) .sketch-frame{transform:rotate(-.25deg)}
#lore .status-panel h3{font:20px/1.2 Pirata,serif;margin:0 0 7px}
#lore .status-panel dt{font:15px IMFellEnglish,serif;text-transform:none;color:#555}
#lore .status-panel dd{font:21px IMFellEnglish,serif}
#lore .attribute-list{padding:3px 0}
#lore .attribute-list b{font:14px/1.2 PermanentMarker,cursive;color:#666;margin-top:8px;font-weight:400}
#lore .status-panel p{font:19px/1.4 IMFellEnglish,serif;margin:0}
#lore .status-skills{font:17px/1.2 IMFellEnglish,serif;gap:16px 24px;padding-top:2px}
#lore .status-skills li{position:relative;border:0;padding-bottom:10px}
#lore .status-skills li::after{content:"";position:absolute;bottom:0;left:0;width:85%;height:4px;background:#aaa9;clip-path:polygon(0 18%,100% 0,96% 65%,2% 100%)}
#lore .status-skills li:nth-child(2)::after{width:73%;transform:rotate(.8deg)}
#lore .status-skills li:nth-child(3)::after{width:78%}
#lore .status-backstory{margin-left:10%;padding:15px 23px}
#lore .status-backstory p{font:17px/1.45 IMFellEnglish,serif;margin:0}
#lore .status-backstory h3{margin-bottom:5px}
#lore #lore-wares{display:block;margin:18px auto 0;font:17px IMFellEnglish,serif;padding:10px 20px;background:#fff9;border:1px solid #888;border-radius:3px 7px 4px 6px;box-shadow:1px 2px 0 -1px #999;transform:rotate(-.35deg)}
#lore #lore-wares:hover{background:#f0f0ec}
@keyframes status-grid-drift{to{transform:translate(48px,-48px)}}
@keyframes status-line-drift{from{transform:translate(-24px,15px) rotate(-1deg)}to{transform:translate(30px,-18px) rotate(1deg)}}
.reduced-motion #lore::before{animation:none}

@media(min-width:701px) and (max-height:740px){.status-shell{padding-top:22px;width:min(930px,84vw)}#lore h2{font-size:35px;margin-bottom:16px}#lore .status-portrait{height:400px}#lore .status-panels{gap:12px}#lore .status-panel{padding:12px 20px}#lore .status-panel h3{margin-bottom:7px}#lore .status-skills{gap:10px 18px}}
@media(max-width:700px){.status-shell{width:86%;padding:62px 0 28px}#lore h2{font-size:36px;margin-bottom:22px}#lore .status-sheet{grid-template-columns:1fr;gap:24px}#lore .status-portrait{height:440px;max-height:62vh;margin-left:2%}#lore .status-portrait img{left:-5%;width:105%}#lore .status-panels{gap:16px}#lore .status-backstory{margin:0}#lore .close{top:15px;right:16px}#lore .status-panel{padding:18px 20px}#lore .status-skills{font-size:16px}}

/* Earned proficiencies: graphite shields, quiet square-grid motion. */
#lore::before{background-image:linear-gradient(#85857f18 1px,transparent 1px),linear-gradient(90deg,#85857f18 1px,transparent 1px);animation-duration:9s}
#lore:not([open])::before{animation-play-state:paused}
#lore .status-panel{background:#fdfdfbed;box-shadow:3px 5px 12px #2424210b}
#lore .sketch-frame{filter:drop-shadow(1px 2px 1px #33333313)}
.proficiency-badges{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;list-style:none;margin:0;padding:0}
.proficiency-badges li{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;font:13px/1.15 IMFellEnglish,Georgia,serif}
.proficiency-emblem{position:relative;display:grid;place-items:center;width:64px;height:67px;filter:drop-shadow(1px 3px 2px #17171724)}
.proficiency-emblem img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.proficiency-emblem b{position:relative;font:26px/1 Pirata,Georgia,serif;margin-top:-4px;color:#272725;text-shadow:0 1px #fff}
#lore .status-credential{border-top:1px solid #aaa6;margin-top:13px;padding-top:8px}
#lore .status-credential h4{font:15px/1.2 Pirata,Georgia,serif;margin:0 0 4px;color:#555}
#lore .status-credential p{font-size:15px;line-height:1.35}
.status-credential span{color:#666}
.status-guild{display:inline-flex;flex-direction:column;gap:3px;color:inherit;text-decoration:none;align-items:flex-start;padding-bottom:3px}
.status-guild strong{font:27px/1 Pirata,Georgia,serif;font-weight:400}
.status-guild span{font:17px/1.3 IMFellEnglish,Georgia,serif;color:#666;border-bottom:1px solid #aaa}
.status-guild:hover span{color:#222;border-color:#222}
.status-guild:focus-visible{outline:1px dashed #555;outline-offset:6px}
.status-guild i{font-style:normal;font-size:14px}
@media(max-width:420px){.proficiency-badges{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:13px}.proficiency-emblem{width:62px;height:65px}}

/* Graphite double contours and broken strokes, shared across the sheet. */
#lore .sketch-frame{color:#3d3b36}
#lore .sketch-frame path{stroke-width:1.55}
#lore .sketch-frame .pencil-echo{stroke-width:.8;opacity:.72}
#lore .sketch-frame .pencil-hatch{stroke-width:.7;opacity:.65}
#lore .status-panel{padding:28px 32px;background:transparent;box-shadow:none;filter:drop-shadow(2px 4px 3px #24242112)}
#lore .status-panel>.sketch-frame>path:first-child{fill:#fdfdfbf2}
#lore{--pencil-divider:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20300%2010%22%20preserveAspectRatio%3D%22none%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2345443f%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M3%205Q39%203%2078%205T151%204T223%205L296%203%22%20stroke-width%3D%221.25%22%2F%3E%3Cpath%20d%3D%22M9%207Q73%205%20130%207T224%206L290%206M31%202l29%201m112-1%2036%201m48%204%2017-1%22%20stroke-width%3D%22.55%22%20opacity%3D%22.65%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
#lore .status-credential{position:relative;border:0;padding-top:13px;margin-top:15px}
#lore .status-credential::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--pencil-divider) center/100% 100% no-repeat}
#lore .status-skills li::after{height:8px;background:var(--pencil-divider) center/100% 100% no-repeat;clip-path:none;opacity:.8}
#lore .status-guild span{position:relative;border:0;padding-bottom:7px}
#lore .status-guild span::after{content:"";position:absolute;bottom:0;left:-2px;right:-5px;height:7px;background:var(--pencil-divider) center/100% 100% no-repeat}
#lore .proficiency-badges{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}
#lore .proficiency-emblem{width:57px;height:59px}
#lore .proficiency-emblem b{font-size:23px}
#lore .proficiency-emblem .code-mark{font-size:16px}
#lore .status-credential p+p{margin-top:9px}
#lore .status-credential a{color:inherit;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
#lore .status-credential small{display:block;font:12px/1.4 IMFellEnglish,Georgia,serif;color:#666}
@media(max-width:420px){#lore .proficiency-badges{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Portrait and tools share the left column; the character record sits right. */
#lore .status-sheet{align-items:start}
#lore .status-identity{display:grid;gap:22px;min-width:0}
#lore .status-panels{grid-template-rows:none;grid-auto-rows:max-content;align-content:start;min-width:0}
#lore .status-education h4,#lore .status-career h4{font:19px/1.25 IMFellEnglish,Georgia,serif;margin:0 0 3px}
#lore .status-education p,#lore .status-career p{font:15px/1.35 IMFellEnglish,Georgia,serif;margin:0}
#lore .status-education small,#lore .status-career small{display:block;font:13px/1.4 IMFellEnglish,Georgia,serif;color:#666;margin-top:3px}
#lore .status-career-list{list-style:none;padding:0;margin:0}
#lore .status-career{padding-top:48px;padding-bottom:48px}
#lore .status-career .status-panel-caption{font:13px/1.3 IMFellEnglish,Georgia,serif;color:#96938d;margin:-3px 0 14px;font-weight:400}
#lore .status-career-list li{position:relative;padding:12px 0 15px}
#lore .status-career-list li:first-child{padding-top:4px}
#lore .status-career-list li+li::before,#lore .status-earlier::before{content:"";position:absolute;inset:0 0 auto;height:7px;background:var(--pencil-divider) center/100% 100% no-repeat;opacity:.65}
#lore .status-earlier{position:relative;padding-top:13px}
#lore .status-earlier summary{display:flex;justify-content:space-between;align-items:center;gap:12px;list-style:none;font:17px/1.4 IMFellEnglish,Georgia,serif}
#lore .status-earlier summary::-webkit-details-marker{display:none}
#lore .status-earlier summary span{transition:transform .2s}
#lore .status-earlier[open] summary span{transform:rotate(45deg)}
#lore .status-earlier[open] summary{margin-bottom:14px}
#lore .status-earlier summary:focus-visible{outline:1px dashed #555;outline-offset:4px}
#lore .status-backstory{margin-left:0}
@media(max-width:700px){#lore .status-identity{gap:20px}}

/* Transparent motion retains the live frame and the sword outside its edge. */
#lore .status-idle-cutout{position:absolute;left:-8%;top:0;width:108%;height:100%;object-fit:contain;z-index:1;opacity:0;pointer-events:none}
#lore .has-status-idle>img{opacity:0}
#lore .has-status-idle .status-idle-cutout{opacity:1}
@media(max-width:700px){#lore .status-idle-cutout{left:-5%;width:105%}}

/* Pocket character sheet: retain the two-column composition at phone scale. */
@media(max-width:700px){
  html #lore{padding:0}
  #lore .status-shell{width:calc(100% - 28px);padding:58px 0 24px}
  #lore .status-shell>.eyebrow{font-size:9px;letter-spacing:.08em}
  #lore .status-shell>h2{font-size:32px;margin-bottom:22px}
  #lore .status-sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 10px;align-items:start}
  #lore .status-identity,#lore .status-panels{display:contents}
  #lore .status-portrait{grid-column:1;grid-row:1 / 4;align-self:stretch;width:100%;height:100%;min-height:310px;max-height:none;margin:0}
  #lore .status-portrait>img,#lore .status-idle-cutout{left:-4%;width:112%;height:100%;object-fit:contain}
  #lore .status-portrait .sketch-frame{left:23%;width:75%;top:9%;height:74%}
  #lore .status-cross{left:27%;top:12%;font-size:15px}
  #lore .status-name{left:-2%;top:9%;width:23%;height:74%}
  #lore .status-name text{stroke-width:1.5}
  #lore .status-panels>.status-panel:nth-child(1){grid-column:2;grid-row:1}
  #lore .status-panels>.status-panel:nth-child(2){grid-column:2;grid-row:2}
  #lore .status-panels>.status-panel:nth-child(3){grid-column:2;grid-row:3}
  #lore .status-proficiencies{grid-column:1;grid-row:4}
  #lore .status-career{grid-column:2;grid-row:4}
  #lore .status-backstory{grid-column:1 / -1;grid-row:5}
  #lore .status-panel{padding:16px 13px;min-width:0}
  #lore .status-panel h3{font-size:19px;margin-bottom:8px}
  #lore .status-panel dl>div{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline}
  #lore .status-panel dt{font-size:13px}
  #lore .status-panel dd{font-size:16px;margin-left:auto;text-align:right}
  #lore .status-guild strong{font-size:25px}
  #lore .status-guild span{font-size:15px}
  #lore .status-skills{grid-template-columns:1fr;gap:7px;font-size:15px;line-height:1.2}
  #lore .status-skills li{padding-bottom:8px}
  #lore .proficiency-badges{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 5px}
  #lore .proficiency-badges li{font-size:12px;line-height:1.2;min-width:0;overflow-wrap:anywhere}
  #lore .proficiency-emblem{width:44px;height:47px}
  #lore .proficiency-emblem b{font-size:21px}
  #lore .proficiency-emblem .code-mark{font-size:13px}
  #lore .status-credential p,#lore .status-career p{font-size:14px;line-height:1.35;overflow-wrap:anywhere}
  #lore .status-credential small,#lore .status-career small{font-size:12px;line-height:1.4}
  #lore .status-career h4{font-size:17px;line-height:1.15}
  #lore .status-career .status-panel-caption{font-size:12px;line-height:1.3}
  #lore .status-earlier summary{font-size:14px;min-height:44px;gap:4px}
  #lore .status-backstory p{font-size:15px}
}

/* Keep the phone name naturally proportioned beneath its portrait. */
#lore .status-mobile-name{display:none}
@media(max-width:700px){
 #lore .status-name{display:none}
 #lore .status-mobile-name{display:block;position:absolute;left:0;right:0;bottom:2%;margin:0;text-align:center;font:clamp(22px,6.1vw,28px)/1.1 Pirata,Georgia,serif;color:#fdfdfb;-webkit-text-stroke:.8px #292925;paint-order:fill stroke;z-index:3}
}

/* Taller portrait and deliberate, slightly offset phone columns. */
@media(min-width:701px){
 #lore .status-portrait{height:clamp(440px,64vh,630px)}
 #lore .status-portrait .sketch-frame{left:27%;width:65%;top:2%;height:87%}
 #lore .status-name{left:-2%;top:2%;width:22%;height:87%}
}
@media(max-width:700px){
 #lore .status-sheet{grid-template-columns:repeat(100,minmax(0,1fr));column-gap:0}
 #lore .status-portrait{grid-column:1 / 55}
 #lore .status-portrait .sketch-frame{left:20%;width:76%;top:7%;height:78%}
 #lore .status-panels>.status-panel:nth-child(-n+3){grid-column:55 / -1;margin-left:8px;padding:15px 11px}
 #lore .status-proficiencies{grid-column:1 / 58;margin-right:10px}
 #lore .status-career{grid-column:58 / -1}
 #lore .status-mobile-name{font-size:clamp(24px,6.5vw,30px);bottom:1%}
}

/* Share row boundaries so the lower records align regardless of viewport height. */
@media(min-width:701px){
 #lore .status-sheet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 30px;align-items:start}
 #lore .status-identity,#lore .status-panels{display:contents}
 #lore .status-portrait{grid-column:1;grid-row:1 / 4;align-self:stretch;height:100%;min-height:0;max-height:none}
 #lore .status-panels>.status-panel:nth-child(1){grid-column:2;grid-row:1}
 #lore .status-panels>.status-panel:nth-child(2){grid-column:2;grid-row:2}
 #lore .status-panels>.status-panel:nth-child(3){grid-column:2;grid-row:3}
 #lore .status-proficiencies{grid-column:1;grid-row:4;padding-top:48px}
 #lore .status-career{grid-column:2;grid-row:4}
 #lore .status-backstory{grid-column:1 / -1;grid-row:5}
}

/* The frame shares the record rows; artwork has its own overflowing layer.
   Raise the video independently so its hem meets the same bottom rail as the still. */
#lore .status-portrait{z-index:2}
#lore .status-portrait .sketch-frame{left:27%;top:0;width:73%;height:100%}
#lore .status-name{left:2%;top:0;height:100%}
#lore .status-portrait-art{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}
#lore .status-portrait-art .status-idle-cutout{left:-22%;top:-17.5%;width:160%;height:150%;object-fit:contain}
#lore .status-portrait-art>img{left:47%;top:-1%;width:auto;max-width:none;height:120%;transform:translateX(-50%);object-fit:contain}
#lore .has-status-idle .status-portrait-art>img{opacity:0}
@media(max-width:700px){
 #lore .status-portrait .sketch-frame{left:20%;width:calc(85.555% - 10px);height:100%}
 #lore .status-portrait-art .status-idle-cutout{left:-6%;top:-6%;width:112%;height:118%}
 #lore .status-portrait-art>img{left:50%;height:100%}
 #lore .status-mobile-name{bottom:1%}
}