/* Use the full logical panel rather than the printed inset in the old bitmap. */
#handheld-unit:not(.browsing) .lcd-skin{display:none}
#hero{background:linear-gradient(#36628018 1px,transparent 1px),linear-gradient(90deg,#36628018 1px,transparent 1px),radial-gradient(ellipse at center,#11213a,#070e1a 75%);background-size:28px 28px,28px 28px,100% 100%}
#hero .feature-image-frame{inset:0;width:100%;height:100%;clip-path:none;background:transparent}
#hero .feature-image-frame img{object-fit:contain;object-position:center;width:100%;height:100%}
#hero .feature-image-frame:hover{filter:none}
#hero .featured-record{z-index:4}
#hero .featured-record>div:first-child{left:15px;top:12px;max-width:240px}
#hero .featured-record h2{font-size:26px;letter-spacing:1px;line-height:1.15;min-width:0;max-width:240px;overflow:hidden;text-overflow:ellipsis;padding:3px 5px;border-radius:4px;background:#07111ee8;color:#dcf3fa;opacity:1}
#hero #featured-type{right:12px;top:12px;opacity:1}
#hero .display-caption{z-index:4}
#hero .display-caption #featured-stage{right:92px;top:15px;bottom:auto;min-width:76px;padding:5px 6px;border-radius:4px;background:#07111ee8;color:#c7dfed;font-size:10px;letter-spacing:1px;opacity:1}
/* Full LCD art, with the original restrained corner language. */
#hero .featured-record>div:first-child{display:none}
#hero #featured-type{top:13px;right:16px}
#hero .display-caption #featured-stage{top:auto;right:18px;bottom:15px;min-width:0;font-size:10px;letter-spacing:1.6px;padding:2px 4px;background:#07121bc7;color:#bde9cc}
#hero .screen-corner{display:block;position:absolute;z-index:5;width:28px;height:22px;border:0 solid #7bdde9;pointer-events:none;opacity:.86;filter:none;box-shadow:none}
#hero .corner-tl{top:4px;left:4px;border-top-width:1px;border-left-width:1px}
#hero .corner-tr{top:4px;right:4px;border-top-width:1px;border-right-width:1px}
#hero .corner-bl{bottom:4px;left:4px;border-bottom-width:1px;border-left-width:1px}
#hero .corner-br{bottom:4px;right:4px;border-bottom-width:1px;border-right-width:1px}
/* Both modes share each creature's fitted, registered image plane. */
#hero .viewer-presentation{visibility:hidden;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#hero.viewer-managed .viewer-presentation{visibility:visible}
#hero.viewer-managed #featured-image{visibility:hidden}
#hero .viewer-mode-status:not(.sr-only){position:absolute;left:18px;right:18px;bottom:25px;z-index:8;padding:4px 7px;background:#081326ed;color:#d5e8f1;font:10px/1.4 Arial,sans-serif;border-radius:4px;pointer-events:none}
#hero .viewer-mode-status:empty{display:none}
#handheld-unit .dex-mode-lamp{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;forced-color-adjust:none}
#device-screen{border-radius:calc(15 * var(--px))}
#hero #featured-type{top:7px;right:8px}
#hero .display-caption #featured-stage{right:8px;bottom:6px;color:#a9e9ed}

#hero.viewer-managed .viewer-presentation{visibility:visible}
#hero.viewer-managed #featured-image{visibility:hidden}
#hero .feature-image-frame{left:0;top:0;right:0;bottom:0;transform:none!important;animation:none!important}

/* Rounded corner traces follow the physical LCD's curved window. */
#hero .corner-tl{border-top-left-radius:11px}
#hero .corner-tr{border-top-right-radius:11px}
#hero .corner-bl{border-bottom-left-radius:11px}
#hero .corner-br{border-bottom-right-radius:11px}