/* The original spiked obsidian artwork is the frame for every stone panel. */
:root{--rhr-frame:url('assets/rpg-obsidian-frame.webp');--rhr-row-frame:url('assets/rpg-buttons/obsidian-idle.webp');--rhr-slate:linear-gradient(#10101733,#10101733),url('assets/rpg-slate.webp') center/512px repeat}
#entry .sheet,#map .sheet,#tutorial .sheet,#setup .sheet,
#modal .modal-shell,.medal-dialog,.invite-card,#kitchenResult,
#arena .player-card,.season-submit,.medal-spotlight,
.arrival-speech,.reaper-question #arena .speech-panel,
#results .result-row,.cathedral-mode #results .result-row,
.stone-entry,.stone-entry.your-entry{
 border:24px solid transparent;
 border-image:var(--rhr-frame) 62 104 62 104 / 24px 40px / 0 round;
 background:var(--rhr-slate);
 box-shadow:0 15px 40px #000a;
}
#arena .player-card,.arrival-speech,.reaper-question #arena .speech-panel,
#results .result-row,.cathedral-mode #results .result-row,.stone-entry,.stone-entry.your-entry{border-image-source:var(--rhr-row-frame)}
/* The lobby, entry and lift host retain their original parchment speech. */
.arrival-speech,.reaper-question #arena .speech-panel{color:#f9dfb9;padding:12px 19px}
.reaper-question #arena #speech{color:#f9dfb9!important}
#entry .sheet,#map .sheet,#tutorial .sheet,#setup .sheet{max-width:calc(100% - 20px);margin-inline:auto}
#tutorial .sheet,#setup .sheet{padding:clamp(12px,2vw,25px)}
#setup[data-step="0"] .setup-sheet{padding:clamp(10px,1.5svh,18px) clamp(12px,1.8vw,24px)}
#setup .player-nickname input,.ledger-search input,.ledger-sort select,
#results #purchaseReview input,#results #purchaseReview select{
 min-width:0;max-width:100%;border:12px solid transparent;
 border-image:var(--rhr-row-frame) 62 104 62 104 / 12px 20px / 0 round;
 background:var(--rhr-slate);color:#f6dec0;box-shadow:none;padding:7px 12px;
}
/* Keyboard focus stays visible, in iron silver rather than orange. */
:is(button,a,input,select,textarea,.player-rune,.avatar):focus-visible,
#setup .player-nickname input:focus,.ledger-search input:focus,.ledger-sort select:focus{
 outline:2px solid #bcc2cb!important;outline-offset:2px!important;
 filter:none!important;box-shadow:none!important;
}
#setup .player-nickname input:focus:not(:focus-visible),.ledger-search input:focus:not(:focus-visible),.ledger-sort select:focus:not(:focus-visible){outline:none!important}

/* The live clock, checkpoint conduit and hanging awards use the same ironwork. */
#arena .arena-center>.clock{
 border:18px solid transparent;
 border-image:var(--rhr-row-frame) 62 104 62 104 / 18px 30px / 0 round;
 border-radius:0;
 background:linear-gradient(180deg,#21151a,#110c13 56%,#29151a);
}
#arena .milestones{
 border:10px solid transparent;
 border-image:var(--rhr-row-frame) 62 104 62 104 / 10px 20px / 0 round;
 background:url('assets/arena-conduit.svg') center/100% 100% no-repeat;
}
.milestone-copy,.badge-unlock-plaque{
 border:22px solid transparent;
 border-image:var(--rhr-frame) 62 104 62 104 / 22px 35px / 0 round;
 border-radius:0;
 background:var(--rhr-slate);
}
.milestone-copy::before,.milestone-copy::after,
.badge-unlock-plaque::before,.badge-unlock-plaque::after{
 width:18px;border:0;box-shadow:2px 0 5px #000b;
 background:url('assets/lift-chain.webp') center top/18px 45.75px repeat-y;
}
@media(max-width:700px){
 #arena .arena-center>.clock{border-width:13px;border-image-width:13px 21px}
 #arena .milestones{border-width:7px;border-image-width:7px 12px}
 .milestone-copy,.badge-unlock-plaque{border-width:16px;border-image-width:16px 25px}
 .milestone-copy::before,.milestone-copy::after,.badge-unlock-plaque::before,.badge-unlock-plaque::after{width:12px;background-size:12px 30.5px}
}
:is(button:not(.player-rune):not(.emblem-pick):not(.dialog-close),a.button,header nav>a):focus-visible{outline:2px solid #bcc2cb!important;outline-offset:2px!important}
header .language-picker:has(select:focus-visible){filter:none!important;outline:none!important}
#results .result-row,.cathedral-mode #results .result-row{padding:20px 27px;align-items:center;min-height:120px}
.stone-entry,.stone-entry.your-entry{padding:17px 22px;min-height:130px}
@media(max-width:700px){
 #entry .sheet,#map .sheet,#tutorial .sheet,#setup .sheet{border-width:17px;border-image-width:17px 28px;max-width:calc(100% - 14px)}
 #tutorial .sheet,#setup .sheet{padding:10px 9px}
 #setup[data-step="0"] .setup-sheet{padding:8px 9px}
 #results .result-row,.cathedral-mode #results .result-row{border-width:17px;border-image-width:17px 28px;padding:17px 15px;min-height:110px}
 .stone-entry,.stone-entry.your-entry{border-width:17px;border-image-width:17px 28px;padding:12px 10px;min-height:145px}
 .medal-dialog{border-width:17px;border-image-width:17px 28px}
}
.scene-curtain{position:fixed;inset:0;z-index:250;background:#050407;opacity:0;pointer-events:none;transition:opacity .56s ease-in-out}
.scene-curtain.closed{opacity:1}
/* The skull is already in its socket when the room fades back. */
.cathedral-mode .crown-host .avatar{top:18%!important}
/* Each encounter has a different attack, but all fade into the actual host promptly. */
.scare-blackout,.scare-blackout.arena-scare{animation:scareVeil 1.75s ease-out both!important}
.scare-blackout.scare-level-3{animation-duration:2.05s!important}
.scare-blackout .scare-avatar{filter:drop-shadow(0 0 13px #ed183455)!important;animation:scareClosed 1.75s cubic-bezier(.15,.84,.18,1) both!important}
.scare-blackout .scare-tier-2{animation-name:scareIgnition!important}
.scare-blackout .scare-tier-3{animation-name:scareFury!important;animation-duration:2.05s!important}
.scare-tier-1 .skull-jaw{animation:scareJawOpen 1.3s ease-out both!important}
.scare-tier-2 .skull-jaw{animation:scareJawSnarl .23s ease-in-out .32s 5 alternate!important}
.scare-tier-3 .skull-jaw{animation:scareJawSnarl .15s ease-in-out 10 alternate!important}
.scare-avatar.eyes-on .eye .layer-1{animation:flameOuter .35s ease-in-out infinite alternate!important}
.scare-avatar.eyes-on .eye .layer-2{animation:flameInner .24s ease-in-out infinite alternate!important}
.scare-avatar.eyes-on .eye .layer-3{animation:flameCore .18s ease-in-out infinite alternate!important}
.scare-tier-2 .eye-motion{animation:scareFlameReveal .55s ease-out both!important}
@keyframes scareVeil{0%{background:#0000}12%,66%{background:#000e}82%{background:#000b}100%{background:#0000}}
@keyframes scareClosed{0%{transform:translate(-50%,-55%) scale(.22);opacity:0}15%{transform:translate(-50%,-50%) scale(1.52);opacity:1}32%,66%{transform:translate(-50%,-50%) scale(1.48);opacity:1}78%{transform:translate(-50%,-50%) scale(1.55);opacity:1}100%{transform:translate(-50%,-50%) scale(1.55);opacity:0}}
@keyframes scareIgnition{0%{transform:translate(-50%,-55%) scale(.2);opacity:0}23%{transform:translate(-50%,-50%) scale(2.05);opacity:1}58%{transform:translate(-50%,-50%) scale(2);opacity:1}75%{transform:translate(-50%,-50%) scale(1.6);opacity:1}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}
@keyframes scareFury{0%{transform:translate(-50%,-55%) scale(.12) rotate(-6deg);opacity:0}16%{transform:translate(-50%,-50%) scale(2.15) rotate(4deg);opacity:1}36%,65%{transform:translate(-50%,-50%) scale(2.05) rotate(-3deg);opacity:1}79%{transform:translate(-50%,-50%) scale(1.8);opacity:1}100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}}
@keyframes scareJawOpen{0%,18%{transform:translateY(0) rotate(0)}38%{transform:translateY(18%) rotate(-2deg)}52%{transform:translateY(10%) rotate(2deg)}64%{transform:translateY(20%) rotate(-2deg)}80%,100%{transform:translateY(13%) rotate(1deg)}}
@keyframes scareJawSnarl{to{transform:scaleY(1.23) rotate(3deg)}}
@keyframes scareFlameReveal{0%,25%{clip-path:inset(100% 0 0);filter:brightness(.2)}65%{clip-path:inset(0);filter:brightness(2.4)}100%{clip-path:inset(0);filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.scene-curtain{transition:none}.scare-blackout,.scare-blackout .scare-avatar{animation:none!important}}
/* The front and side masonry travel one 1024px tile in the same 14s cycle. */
.shaft-side{overflow:visible}
.shaft-side>div{background-size:auto,calc(100vw + 48px) 1024px;animation-duration:14s;animation-delay:0s}
.shaft-side.left>div{background-position:center top}
.shaft-side.right>div{background-position:center top}
/* Rails belong to the actual transformed wall edge, so no viewport-dependent seam offset. */
.shaft-near:before,.shaft-near:after{display:none!important}
.shaft-side:after{content:'';position:absolute;top:-1%;height:calc(102% + 1024px);width:clamp(48px,6vw,90px);z-index:5;background:url('assets/lift-rail-seamless.webp') center top/100% 1024px repeat-y;box-shadow:8px 0 15px #05040a88,-8px 0 15px #05040a88;animation:shaftRailOnly 7s linear infinite paused;will-change:transform;pointer-events:none}
.shaft-side.left:after{right:calc(clamp(48px,6vw,90px) / -2)}
.shaft-side.right:after{left:calc(clamp(48px,6vw,90px) / -2)}
[data-scene=descending] .shaft-side:after{animation-play-state:running}
.document-away .shaft-side:after,.visual-scroll-pause .shaft-side:after{animation-play-state:paused!important}
@media(max-width:700px){.shaft-side>div{background-size:auto,1536px 1024px}.shaft-side:after{width:45px}.shaft-side.left:after{right:-22px}.shaft-side.right:after{left:-22px}}
@media(prefers-reduced-motion:reduce){.shaft-side:after{animation:none!important}}
/* Keep the square tutorial art readable without cropping its chip, wheel or supplies. */
@media(max-width:600px){
 #tutorial .tutorial-lesson{display:grid;grid-template-columns:clamp(126px,34vw,185px) minmax(0,1fr);align-items:center;gap:clamp(10px,2.7vw,18px);margin:11px 0}
 #tutorial .tutorial-lesson img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:1;object-fit:contain;margin:0}
 #tutorial #tutorialCopy{min-width:0}
}
@media(max-width:360px){#tutorial .tutorial-lesson{grid-template-columns:116px minmax(0,1fr);gap:9px}}

/* Phone scenes: give the illustration its own width, then let the rules use every line. */
@media(max-width:600px){
 #tutorial,#map{width:calc(100% - 14px);padding-top:2px;padding-bottom:max(9px,env(safe-area-inset-bottom))}
 #tutorial .host-slot,#map .host-slot{margin-bottom:2px;padding-top:3px}
 #tutorial .host .avatar,#map .host .avatar{width:48px!important}
 #tutorial .host .speech,#map .host .speech{font-size:clamp(12px,3.3vw,14px);line-height:1.24;padding:7px 9px;min-height:0}
 #tutorial>.kicker{font-size:10px;line-height:1.1;margin:2px 0 3px}
 #tutorial .rules-sheet,#map .map-sheet{width:100%;max-width:100%;margin:3px auto 0;border-width:13px;border-image-width:13px 20px;padding:7px 8px}
 #tutorialTitle{font-size:clamp(19px,5.5vw,25px);line-height:1.02;margin:1px 0 5px}
 #tutorial .tutorial-lesson{display:flex;flex-direction:column;align-items:stretch;gap:5px;position:relative;margin:3px 0 4px;overflow:hidden;background:none}
 #tutorial .tutorial-lesson img{display:block;width:100%;height:clamp(150px,22svh,205px);max-height:none;object-fit:cover;object-position:center 72%;aspect-ratio:auto;margin:0;filter:none;border:1px solid #5d3d2b}
 #tutorial .rules-sheet[data-slide="2"] .tutorial-lesson img{object-position:center 56%}
 #tutorial .rules-sheet[data-slide="3"] .tutorial-lesson img{object-position:center 52%}
 #tutorial #tutorialCopy{width:100%;padding:4px 6px 4px 23px;margin:0;background:#0e0d17e8;font-size:clamp(12px,3.35vw,14px);line-height:1.28}
 #tutorial #tutorialCopy li{margin:3px 0;padding:0;overflow-wrap:normal}
 #tutorial #tutorialCopy .rule-critical{padding:5px 7px;border-width:1px;border-radius:4px;box-shadow:none}
 #tutorial .rule-progress{font-size:11px;line-height:1.15;margin:4px 0}
 #tutorial .tutorial-controls{gap:7px;margin:4px 0 2px}
 #tutorial .tutorial-controls button{min-width:42px;min-height:40px;padding:5px 9px;font-size:17px}
 #tutorial #tutorialHint{font-size:10px;line-height:1.2;margin:2px 0 0}
 #map .map-sheet h1{font-size:clamp(23px,6.5vw,32px);line-height:1;margin:3px 0 8px;letter-spacing:-.04em}
 #map .map-sheet>.kicker{font-size:10px;margin:1px 0 4px}
 #map .doors{display:grid;grid-template-columns:1fr;gap:4px}
 #map .doors .door{display:grid;grid-template-columns:clamp(57px,18vw,72px) minmax(0,1fr);grid-template-rows:auto auto;align-content:center;align-items:center;gap:0 8px;min-height:74px;padding:2px 5px;text-align:left;border-width:7px!important;border-image-width:7px 12px!important}
 #map .doors .door img{grid-column:1;grid-row:1/3;width:100%;height:58px;max-height:100%;object-fit:contain;margin:0}
 #map .doors .door b{grid-column:2;grid-row:1;font-size:clamp(12px,3.4vw,14px);line-height:1.1;margin:0}
 #map .doors .door span{grid-column:2;grid-row:2;font-size:clamp(10px,2.9vw,12px);line-height:1.15;margin:2px 0 0}
 #map .guide-copy{min-height:0;padding:6px 1px;font-size:clamp(11px,3vw,13px);line-height:1.3}
 #map .actions{margin:4px 0 1px;gap:6px;flex-wrap:nowrap}
 #map .actions button{min-height:42px;padding:3px 5px;font-size:clamp(11px,3.1vw,13px)}
}
@media(max-width:380px){
 #tutorial .rules-sheet,#map .map-sheet{border-width:11px;border-image-width:11px 16px;padding:5px 6px}
 #tutorial .tutorial-lesson img{height:clamp(135px,20svh,175px)}
 #tutorial #tutorialCopy{font-size:12px;line-height:1.22}
}
/* Pokes open the live jaw step by step; scare clones animate the separated image. */
.avatar:not(.scare-avatar) .skull-jaw{translate:0 var(--poke-jaw,0%);transition:translate .16s ease-out}

@media(pointer:coarse) and (max-width:1100px){
 #entry .entry-sheet>.kicker{display:none}
 #entry .entry-sheet{margin-top:8px;padding-top:12px;padding-bottom:12px}
 #entry .entry-sheet h1{margin-top:0;margin-bottom:10px}
 #entry .entry-sheet>.actions{margin:10px 0 0}
}
@media(pointer:coarse) and (orientation:landscape) and (max-width:1100px){
 .cathedral-mode #results .result-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 16px}
 .cathedral-mode #results .result-row>div:first-child{min-width:0;width:100%}
 .cathedral-mode #results .result-row>strong{white-space:nowrap}
 .cathedral-mode #results .emblem-count{display:block;width:max-content;max-width:100%;white-space:nowrap;overflow-wrap:normal;font-size:12px;line-height:1.3}
}

body[data-nav-mode="journey"] header nav{grid-template-columns:minmax(0,1fr)!important;padding-right:0}

/* Result heading follows the host's speech; player details use explicit grid areas. */
#results .result-monument>.monument-crown{margin-bottom:var(--speech-gap,16px)}
#results .result-monument>.monument-crown:before{height:var(--speech-gap,16px);background-size:100% auto}
#results .result-monument .crown-host .speech{top:70%!important;margin-top:0!important}
#results .result-monument .stone-content>.monument-title{position:static;margin:0 0 18px!important;font-size:clamp(22px,4vw,40px)!important;line-height:1.1!important}
.cathedral-mode #results .result-row{display:grid;grid-template-columns:minmax(0,1fr) max-content;grid-template-areas:"name time" "badges badges" "count count";align-items:start;gap:9px 14px}
#results .result-identity{grid-area:name;min-width:0}
#results .result-identity>b{display:block;overflow-wrap:anywhere}
#results .result-time{grid-area:time;align-self:start;text-align:right;white-space:nowrap;line-height:1.1}
#results .result-time small{font:400 11px/1.3 system-ui,sans-serif;margin-top:4px}
#results .result-emblems{grid-area:badges;margin:0;justify-content:flex-start}
#results .emblem-count{grid-area:count;white-space:normal!important;margin:0;font-size:12px;line-height:1.3}
@media(max-width:700px){
 .cathedral-mode #results .result-row{padding:12px 8px;gap:8px}
 #results .result-identity>b{font-size:16px}
 #results .result-identity small{font-size:11px;line-height:1.3}
 #results .result-time{font-size:24px}
 #results .result-monument .stone-content>.monument-title{margin-bottom:12px!important}
}

/* Summary and certificate occupy one continuous stone surface. */
#results .certificate-section{border-top:1px solid #766253!important;margin-top:22px!important;padding-top:16px!important}
#results .certificate-controls{display:flex;flex-wrap:wrap;gap:10px}
#results .certificate-controls button{flex:1 1 180px;min-width:0}
#results .certificate-section p{margin:8px 0;font-size:14px;line-height:1.4}
body:has(#results.active) header [data-screen="map"],body:has(#results.active) header nav>a[href="leaderboard.html"]{display:none!important}
@media(max-width:700px){#results .certificate-controls button{flex-basis:100%}header .language-picker .language-trigger{min-height:50px!important}}