/* Shared world pass: floor staging, character status, and the volcanic battle. */
#sword-cursor{width:32px;height:32px;image-rendering:pixelated}
.game-dock .dock-command .dock-icon{transform:none}
.battle-hero .enemy-stat[hidden]{display:none}
.battle-hero .enemy-stat{display:flex;align-items:center;gap:9px;top:-4%;right:0;width:165px;font:20px/1 Pirata,serif;transform:none;padding:3px 6px}
.battle-hero .enemy-stat meter{flex:1;min-width:0;margin:0;height:9px}
.battle-hero .goliath-kneeling{display:none;position:absolute;left:-5%;bottom:0;width:110%;height:76%;object-fit:fill}
.battle-hero .goliath-wrap.defeated{opacity:1;transform:none;transition:none}
.battle-hero .goliath-wrap.defeated .goliath{visibility:hidden}
.battle-hero .goliath-wrap.defeated .goliath-kneeling{display:block;animation:kneeSettle .26s ease-out both}
@keyframes kneeSettle{from{translate:0 -14px}to{translate:0 0}}
.battle-hero .hero-quote{filter:drop-shadow(0 1px 2px white)}
.battle-hero .scene-atmosphere{z-index:7;pointer-events:none}
.battle-hero .heat-haze{position:absolute;left:0;right:0;top:59%;height:25%;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 32% 60%,#ffffff40,transparent 65%);animation:heatDrift 12s ease-in-out infinite alternate}
@keyframes heatDrift{from{transform:translateX(-5%) scaleX(1)}to{transform:translateX(5%) scaleX(1.14)}}
/* Wall hangings and floor props share the room's full viewport coordinates. */
#house .house-room{opacity:1;object-fit:fill}
#house .house-grid{position:absolute;inset:0;width:100%;height:100%;display:block;transform:none;margin:0;padding:0;overflow:visible;mix-blend-mode:normal}
#house .crest-frame{position:absolute;left:22%;top:8%;width:23%;height:41%;max-width:none;border:0;border-radius:0;background:none;aspect-ratio:auto;overflow:visible;box-shadow:none;transform:rotate(-1deg);filter:drop-shadow(3px 4px 2px #0002)}
#house .banner-support{position:absolute;inset:0;width:100%;height:100%}
#house .crest-frame img{position:absolute;left:12%;top:12%;width:76%;height:76%;object-fit:contain;mix-blend-mode:multiply}
#house .ethos-scroll{position:absolute;left:48%;right:auto;top:12%;width:29%;height:auto;max-height:43%;padding:22px 26px 24px;background:#fdfdfb;border:1px solid #555;box-shadow:3px 5px 4px #0002;font:italic clamp(13px,1.13vw,17px)/1.5 IMFellEnglish,Georgia,serif;overflow:auto;scrollbar-width:thin;transform:rotate(.6deg)}
#house .ethos-scroll:before,#house .ethos-scroll:after{content:'';position:absolute;left:0;right:0;height:10px;border-block:1px solid #666;border-radius:6px;background:linear-gradient(#fff,#deded8 55%,#fff)}
#house .ethos-scroll:before{top:0}#house .ethos-scroll:after{bottom:0}
#house .ethos-scroll h3{font:32px/1 Pirata,Georgia,serif;margin:0 0 11px}
#house .ethos-scroll p+p{margin-top:12px}
#house .ethos-scroll em{font-style:inherit}
#house .house-figure{position:absolute;left:50%;right:auto;top:48%;bottom:auto;width:36%;height:37%;mix-blend-mode:multiply}
#house .house-figure video{width:100%;height:100%;margin:0;object-fit:contain}
#house .floor-armor{position:absolute;left:26%;bottom:17%;width:26%;height:22%;object-fit:contain;filter:grayscale(1)}
#house .status-trigger{position:absolute;left:64%;top:81%;transform:translateX(-50%);min-width:138px;padding:4px 13px;font:25px/1.1 Pirata,Georgia,serif;white-space:nowrap;z-index:12;transition:translate .2s}
#house .status-trigger:hover{translate:0 -3px}
#house .status-trigger small{display:block;font:10px/1.4 PermanentMarker,cursive;color:#777;margin-top:5px}
#house .status-trigger>span{font:18px Georgia,serif}
/* A character-sheet screen, with readable data instead of flattened image text. */
#lore{width:min(1050px,94vw);padding:34px 42px 28px;border:1px solid #777;border-radius:14px;background-color:#fdfdfb;background-image:linear-gradient(#75756e0c 1px,transparent 1px),linear-gradient(90deg,#75756e0c 1px,transparent 1px);background-size:28px 28px}
#lore>.eyebrow{text-align:center;font-size:10px;margin-bottom:7px}
#lore>h2{text-align:center;font:40px/1.1 Pirata,Georgia,serif;margin-bottom:24px}
.status-sheet{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.status-portrait{position:relative;border:1px solid #999;border-radius:14px;background:#ffffffb5;min-height:400px;display:flex;align-items:flex-end;justify-content:center}
.status-portrait img{width:100%;height:440px;object-fit:contain;margin:8px 0 34px;filter:grayscale(1)}
.status-portrait p{position:absolute;bottom:9px;left:0;right:0;text-align:center;font:26px Pirata,serif}
.status-cross{position:absolute;left:16px;top:11px;color:#888;font:25px Georgia,serif}
.status-panels{display:grid;grid-template-rows:auto auto auto 1fr;gap:14px}
.status-panel{border:1px solid #aaa;border-radius:13px;background:linear-gradient(120deg,#fff,#e9e9e5);padding:15px 20px}
.status-panel h3{font:19px/1.2 Pirata,serif;margin-bottom:11px}
.status-panel dl{margin:0}.status-panel dl>div{padding:5px 0;border:0}.status-panel dt{font:15px IMFellEnglish,serif;color:#333}.status-panel dd{font:19px IMFellEnglish,serif}
.attribute-list{display:flex;justify-content:space-between;text-align:center}.attribute-list span{font:21px Georgia,serif}.attribute-list b{display:block;margin-top:5px;font:14px IMFellEnglish,serif}
.status-panel p{font:18px/1.5 IMFellEnglish,Georgia,serif}.status-panel small{font:italic 14px IMFellEnglish,serif;color:#666}
.status-skills{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:13px 18px;font:15px IMFellEnglish,serif}.status-skills li{border-bottom:3px double #aaa;padding-bottom:7px}
.status-backstory{grid-column:1/-1}.status-backstory h3{margin-bottom:5px}.status-backstory p{font-size:16px}
#lore>.game-button{display:block;width:max-content;margin:18px auto 0;font-size:16px}
/* The waiting raven and Jordain are composed into the study plate. */
#contact .raven-room{opacity:1;object-fit:cover;object-position:50% center}
#contact .contact-copy{left:18%;right:auto;top:20%;width:32%;text-align:center;background:none;padding:0}
#contact .contact-copy h2{font-size:clamp(48px,6vw,86px)}
#contact .contact-copy .eyebrow{font-size:10px}
#contact .contact-copy .lead{font:italic clamp(18px,2vw,26px)/1.4 IMFellEnglish,serif;margin:19px 0}
#contact .contact-copy .game-button{font:19px IMFellEnglish,serif;background:#fffffff0}
#contact .email{font:14px IMFellEnglish,serif;margin-top:16px}
#contact footer{left:12%;bottom:13%;background:#ffffffdf;padding:3px 8px}
@media(max-width:1000px) and (min-width:701px){#house .ethos-scroll{width:34%;left:45%;font-size:13px;padding:20px}#house .crest-frame{left:19%;width:24%}}
@media(max-width:700px){
 #house .crest-frame{left:13%;top:7%;width:25%;height:30%}
 #house .ethos-scroll{left:43%;top:9%;width:48%;max-height:44%;font-size:12px;line-height:1.4;padding:19px 13px}
 #house .ethos-scroll h3{font-size:25px}
 #house .house-figure{left:42%;top:53%;width:51%;height:28%}
 #house .floor-armor{left:9%;bottom:23%;width:37%;height:17%}
 #house .status-trigger{left:66%;top:78%;font-size:22px;min-width:117px}
 #lore{padding:30px 19px 24px}#lore>h2{font-size:34px}
 .status-sheet{grid-template-columns:1fr;gap:14px}.status-portrait{min-height:0;height:310px}.status-portrait img{height:280px;margin-bottom:25px}.status-panels{gap:10px}.status-panel{padding:13px 16px}.status-backstory{grid-column:auto}
 #contact .raven-room{object-fit:cover;object-position:69% center}
 #contact .contact-copy{left:8%;top:55%;width:78%;padding:13px 15px;background:#fffffff0;border:1px solid #aaa;border-radius:3px}
 #contact .contact-copy h2{font-size:42px}#contact .contact-copy .eyebrow{font-size:8px;margin-bottom:5px}#contact .contact-copy .lead{font-size:17px;margin:10px 0}#contact .contact-copy .game-button{font-size:16px;padding:6px 12px}#contact .email{font-size:12px;margin-top:9px}#contact footer{display:none}
 .battle-hero .enemy-stat{width:122px;top:-5%;right:4%;font-size:17px}
}
@media(max-height:690px) and (min-width:701px){#house .ethos-scroll{font-size:12px;line-height:1.35;padding:17px 20px;max-height:44%}#house .ethos-scroll h3{font-size:26px}#house .status-trigger{top:77%;font-size:22px}#contact .contact-copy{top:15%}}
@media(min-width:701px) and (min-height:691px){#house .status-trigger{top:78.5%}}
@media(max-width:700px){#contact .raven-room{object-position:94% center}}

/* Photoshop alpha now supplies the silhouettes; preserve every cleaned edge. */
.battle-hero .battle-jordain,.battle-hero .goliath{clip-path:none}

/* Preserve the user's battle framing without stretching either cutout. */
@media(min-width:701px){
 .battle-hero .home-actor{left:-2%;width:min(79vw,76vh);height:min(79vw,76vh);bottom:calc(-22vh + (min(79vw,96vh) - min(79vw,76vh)) / 2)}
 .battle-hero .goliath-wrap{left:60%;bottom:27%;width:min(39vw,49vh);height:64vh}
 .battle-hero .hero-quote{top:12%}
}
.battle-hero .goliath{object-fit:contain;object-position:center bottom}
.battle-entry-lines{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;overflow:hidden}
.battle-entry-lines:before,.battle-entry-lines:after{content:'';position:absolute;left:-15%;width:130%;height:19%;background:repeating-linear-gradient(0deg,transparent 0 17px,#26262690 18px,transparent 19px 31px,#26262640 32px,transparent 33px 47px);mask-image:linear-gradient(90deg,#000,transparent 62%);transform:skewY(-3deg)}
.battle-entry-lines:before{top:32%}.battle-entry-lines:after{top:57%;rotate:180deg}
.battle-entering .battle-jordain{opacity:1;animation:none!important}
.battle-entering .goliath,.battle-entering .goliath-kneeling{animation:none!important}
.battle-entering .home-actor{transform:translateX(-120vw)}
.battle-entering .goliath-wrap{transform:translateX(120vw)}
.battle-entering .hero-quote,.battle-entering .battle-controls,.battle-entering .enemy-stat{opacity:0;pointer-events:none}
@media(max-width:700px){.battle-hero .hero-quote{top:14%}}

/* The fight command sits centrally above the persistent navigation. */
.battle-hero .battle-controls{left:50%;right:auto;bottom:calc(28px + var(--dock-height) + 16px);transform:translateX(-50%)}
.battle-hero .battle-actions{left:50%;right:auto;transform:translateX(-50%)}
@media(max-width:700px){.battle-hero .battle-controls{bottom:103px}}

/* The crest, scroll hardware, armor and their shadows are part of one room plate. */
#house .house-stage{position:absolute;left:50%;top:50%;width:max(100vw,177.6833vh);height:max(56.281vw,100vh);transform:translate(-50%,-50%);container-type:inline-size}
#house .house-room{inset:0;width:100%;height:100%;object-fit:fill;animation:none;transform:none!important;opacity:1}
#house .scene-world:after{display:none}
#house .ethos-scroll{left:44.5%;top:19%;width:26.5%;height:24.5%;max-height:none;padding:0 5px;background:none;border:0;box-shadow:none;transform:rotate(.3deg);font:italic clamp(13px,.96cqw,18px)/1.35 IMFellEnglish,Georgia,serif;color:#292621;overflow:auto;scrollbar-width:thin;scrollbar-color:#aaa transparent;mix-blend-mode:multiply}
#house .ethos-scroll:before,#house .ethos-scroll:after{display:none}
#house .ethos-scroll h3{font-size:clamp(25px,1.9cqw,34px);margin-bottom:8px}
#house .ethos-scroll p+p{margin-top:9px}
#house .house-figure{left:54.5%;top:43%;width:29%;height:37%;bottom:auto}
#house .status-trigger{left:50%;right:auto;top:auto;bottom:calc(28px + var(--dock-height) - 8px);width:154px;min-width:0;height:65px;padding:3px 10px 9px;transform:translateX(-50%);font-size:27px;z-index:55}
#house .status-trigger small{font-size:9px;margin-top:3px}
@media(max-width:700px){
 #house .house-stage{left:50%;top:0;width:740px;height:100%;transform:translateX(-50%)}
 #house .ethos-scroll{font-size:12px;line-height:1.4;top:19%;height:24.5%;left:44%;width:26%;padding:0 4px}
 #house .ethos-scroll h3{font-size:24px}
 #house .house-figure{left:43%;top:48%;width:34%;height:32%}
 #house .status-trigger{bottom:81px;height:61px;width:145px;font-size:25px}
}

#house .ethos-scroll{top:18.5%;height:26%;font-size:clamp(13px,.94cqw,18px)}
#house .ethos-scroll h3{margin-bottom:6px}
#house .ethos-scroll p+p{margin-top:7px}
#house .status-trigger{height:54px;padding:3px 10px 11px}
#house .status-trigger small{display:none}
@media(max-width:700px){#house .ethos-scroll{font-size:12px}#house .status-trigger{height:52px}}

/* Project the live lettering onto the four corners of the parchment. */
#house .ethos-scroll{left:52.03%;top:19.66%;width:300px;height:310px;padding:0;max-height:none;font-size:16px;line-height:1.3;transform-origin:0 0;transform:var(--scroll-projection);scrollbar-width:thin}
#house .ethos-scroll h3{font-size:27px;margin-bottom:6px}
#house .ethos-scroll p+p{margin-top:8px}
/* Narrow screens crop the room instead of stretching its wall and armor. */
@media(max-width:700px){#house .house-stage{width:177.6833vh;height:100%;left:42%}}

#house .ethos-scroll{left:54.1268%;top:19.3411%;width:320px;height:330px;font-size:17px;line-height:1.3;text-align:center}
#house .ethos-scroll h3{font-size:30px;text-align:center}

#house .ethos-scroll{left:0;top:0;transform-origin:0 0}

.battle-smoke{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}

/* The desk and projected letter form a single movable foreground layer. */
#contact{--desk-width:max(100vw,177.6833vh);--desk-bottom:clamp(20px,3vh,30px);--desk-left:50%;--desk-level:-5deg;--desk-zoom:1.12}
#contact .raven-room{object-fit:cover;object-position:60% center;opacity:1}
.raven-desk{position:absolute;width:var(--desk-width);aspect-ratio:1672 / 941;left:var(--desk-left);bottom:var(--desk-bottom);transform-origin:100% 62.5%;transform:translateX(-50%) translate(calc(var(--look-x,0px)*-.8),calc(var(--look-y,0px)*-.35)) rotate(var(--desk-level)) scale(var(--desk-zoom));z-index:8;pointer-events:none}
.raven-desk-art{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.letter-message{position:absolute;left:0;top:0;width:620px;height:180px;transform-origin:0 0;transform:var(--letter-projection);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#222;pointer-events:auto;text-decoration:none;border:0;background:none;padding:8px 14px;outline-offset:9px}
.letter-kicker{font:12px/1.4 PermanentMarker,cursive;color:#666;letter-spacing:.15em;margin-bottom:8px}
.letter-message h2{font:64px/1.05 Pirata,Georgia,serif;margin:0 0 8px}
.letter-lead{font:italic 23px/1.3 IMFellEnglish,Georgia,serif;margin:0 0 13px}
.letter-action{font:29px/1.2 IMFellEnglish,Georgia,serif;border-bottom:1px solid #555;padding:0 7px 3px;transition:color .18s,border-color .18s}
.letter-address{font:22px/1.3 IMFellEnglish,Georgia,serif;margin-top:8px;color:#444}
.letter-message:hover .letter-action,.letter-message:focus-visible .letter-action{color:#000;border-bottom:3px double #222;padding-bottom:1px}
.letter-message:hover h2{text-shadow:.5px 0 currentColor}
#contact footer{left:22px;bottom:24px;font-size:8px;background:#ffffffd9;z-index:10}
.reduced-motion .raven-desk{transform:translateX(-50%) rotate(var(--desk-level)) scale(var(--desk-zoom))}
@media(max-width:700px){
 #contact{--desk-width:max(150vw,130vh);--desk-bottom:66px;--desk-left:40%}
 #contact .raven-room{object-position:84% center}
 .letter-message{width:400px;height:180px;padding:8px}
 .letter-message h2{font-size:52px;margin-bottom:12px}
 .letter-kicker,.letter-lead{display:none}
 .letter-action{font-size:26px}.letter-address{font-size:19px;margin-top:10px}
 #contact footer{display:none}
}

/* Give Status its own clear space above the dock. */
#house .status-trigger{bottom:calc(28px + var(--dock-height) + 18px);height:56px;padding:3px 10px;font-size:27px;z-index:55}
#house .house-figure{left:57%;top:40.5%}
#house .house-figure.has-seated-matte{mix-blend-mode:normal}
#house .has-seated-matte .sitting{opacity:0}
#house .seated-cutout{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
@media(max-width:700px){#house .status-trigger{bottom:100px;height:52px}#house .house-figure{left:45%;top:45.5%}}

/* Small floating character commands, with names below each item. */
#house .lore-commands{position:absolute;left:50%;bottom:calc(28px + var(--dock-height) + 18px);transform:translateX(-50%);display:flex;align-items:end;gap:25px;z-index:55}
.lore-command{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-width:54px;padding:5px;color:#252525;transition:transform .2s}
.lore-command svg{width:34px;height:36px;fill:#fffffff2;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 2px #ffffffa0)}
.lore-command span{font:13px/1.2 PermanentMarker,cursive;color:#555;text-shadow:0 1px 3px white,0 0 6px white}
.lore-command:hover,.lore-command:focus-visible{transform:translateY(-4px)}
.lore-command:hover span{color:#111}
@media(max-width:700px){#house .lore-commands{bottom:100px;gap:20px}.lore-command svg{width:30px;height:32px}.lore-command span{font-size:12px}}
.reduced-motion .lore-command{transition:none}

/* Ink-drawn relics: quiet levitation, faceted shading, and a pale magical halo. */
#house .lore-commands{gap:22px}
.lore-command{position:relative;min-width:62px;gap:0}
.lore-command:before{content:'';position:absolute;width:58px;height:52px;top:4px;border-radius:50%;background:radial-gradient(ellipse,#ffffffe0 0%,#ffffff90 35%,#ffffff00 72%);pointer-events:none}
.lore-command svg{position:relative;width:60px;height:60px;fill:none;stroke:#252525;stroke-width:1.1;filter:drop-shadow(0 1px 1px #fff);overflow:visible;animation:lore-relic-float 5.5s ease-in-out infinite}
.lore-command:nth-child(2) svg{animation-delay:-1.7s}.lore-command:nth-child(3) svg{animation-delay:-3.3s}
.lore-command .relic-paper{fill:#fff}.lore-command .relic-shade{fill:#aaa}.lore-command .relic-ink{fill:#454545}
.lore-command .relic-aura{stroke:#555;stroke-width:.7;opacity:.65}
.lore-command span{position:relative;color:#3d3d3d;text-shadow:0 0 3px #fff,0 0 7px #fff,0 1px 1px #fff}
.lore-command:hover .relic-aura{opacity:1}
@keyframes lore-relic-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@media(max-width:700px){#house .lore-commands{gap:16px}.lore-command svg{width:52px;height:52px}.lore-command{min-width:54px}}
.reduced-motion .lore-command svg{animation:none}


/* Tangible pencil-drawn objects in the sanctuary, with their original commands. */
.lore-command .illustrated-relic{position:relative;width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 3px 2px #17171740);animation:lore-relic-float 5.5s ease-in-out infinite;pointer-events:none}
.lore-command:nth-child(2) .illustrated-relic{animation-delay:-1.7s}
.lore-command:nth-child(3) .illustrated-relic{animation-delay:-3.3s}
.lore-command:before{opacity:.35}
@media(max-width:700px){.lore-command .illustrated-relic{width:60px;height:60px}}
.reduced-motion .lore-command .illustrated-relic{animation:none}