/* Paper-and-ink controls share the bottom navigation's stepped corners. */
body :is(dialog .close,.floating-relic .relic-close,#settings-open,#battle-close){
 width:44px;height:44px;min-width:44px;min-height:44px;padding:0;
 border:0;border-radius:0;border-image:none;box-shadow:none;
 background:transparent url("assets/ui/square-control.svg") center/100% 100% no-repeat;
 color:#25231f;display:grid;place-items:center;font:29px/1 Georgia,serif;
 filter:drop-shadow(0 3px 2px #19171335);transition:filter .18s,translate .18s;
}
body :is(dialog .close,.floating-relic .relic-close,#settings-open,#battle-close):hover{background-color:transparent;filter:drop-shadow(0 4px 3px #19171350);translate:0 -1px}
body #lore .close{border:0;border-radius:0;box-shadow:none;background:transparent url("assets/ui/square-control.svg") center/100% 100% no-repeat}
body #settings-open svg{width:24px;height:24px}
body .settings-panel .close{right:6px;top:6px}
body #battle-close{width:38px;height:38px;min-width:38px;min-height:38px}
#house .lore-command{gap:1px;min-width:88px}
#house .lore-command>span{display:grid;place-items:center;width:88px;min-height:35px;padding:6px 13px 7px;
 background:url("assets/ui/relic-placard.svg") center/100% 100% no-repeat;
 font:21px/1 Pirata,Georgia,serif;color:#26241f;text-shadow:none;
 filter:drop-shadow(0 3px 2px #16161645)}
/* A solid paper rim follows the actual artwork silhouette. */
/* Keep each icon close to its title; the caption spans both underneath. */
.game-dock .dock-command .dock-label{display:contents}
.game-dock .dock-command .dock-label>b{grid-column:2;grid-row:1;text-align:left;justify-self:start}
.game-dock .dock-command .dock-label>span{grid-column:1/-1;grid-row:2;text-align:center;justify-self:center}
.game-dock .dock-command{row-gap:0}
#house .lore-command:before{display:none}
#house .lore-command .illustrated-relic{filter:contrast(1.5) url(#relic-paper-cutout)}
@media(max-width:700px){#house .lore-commands{gap:12px}#house .lore-command{min-width:75px}#house .lore-command>span{width:75px;min-height:33px;font-size:19px}}

/* Keep the exit reachable while a long project gallery scrolls. */
#project>.close{position:sticky;float:right;top:0;right:auto;margin:-30px -30px 0 0;z-index:10}
@media(max-width:700px){#project>.close{margin:-30px -8px 0 0}}
.handheld-scene #project>.close{margin:-38px -8px 0 0}

/* The selected character relic uses the same gentle lift in both interfaces. */
#house .lore-command::before{display:block;inset:0 -12px 28px;width:auto;height:auto;border-radius:50%;background:radial-gradient(ellipse,#ffffffe8 0%,#ffffff80 40%,transparent 72%);opacity:0;transition:opacity .22s;pointer-events:none}
#house .lore-command:is(:hover,:focus-visible,.pocket-selected){transform:translateY(-6px)}
#house .lore-command:is(:hover,:focus-visible,.pocket-selected)::before{opacity:1}

/* One continuous illustrated border rises into the desktop navigation. */
body.frame-dock-joined .game-dock{bottom:max(8px,env(safe-area-inset-bottom));z-index:66}
body.frame-dock-joined .game-dock .dock-outline{display:none}