:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#001322;color:#f8fbff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
.reference-layout{width:100%;max-width:1600px;margin:auto}
.slice{position:relative;scroll-margin-top:12px}
.art{display:block;width:100%;height:auto}
.hotspot{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);padding:0;border:0;background:transparent;color:transparent;font-size:0;cursor:pointer;border-radius:5px;text-decoration:none;-webkit-tap-highlight-color:#00edff33}
.hotspot.pill{border-radius:999px}
.hotspot.card{border-radius:12px}
.hotspot.brand{background:#001322;box-shadow:0 0 8px 5px #001322;border-radius:0;display:flex;align-items:center;justify-content:center}
.brand img{display:block;width:100%;height:100%;object-fit:contain}
.brand-header{z-index:1}
.brand-header img{position:relative;top:16%;width:125%;height:125%;max-width:none;flex-shrink:0}
.brand-footer img{padding:3%}
.hotspot:hover{background:#ffffff0c;box-shadow:0 0 16px #00daff50}
.hotspot:focus-visible{outline:3px solid #00ecff;outline-offset:3px;background:#00ecff15}
.hotspot.brand:hover,.hotspot.brand:focus-visible{background:#001322;box-shadow:0 0 8px 5px #001322}
.accessible-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-100px;z-index:5;background:#ffd32a;color:#001322;padding:14px 20px;border-radius:30px;font-weight:700}
.skip:focus{top:16px}
dialog{width:min(540px,calc(100% - 32px));max-height:85dvh;overflow:auto;background:linear-gradient(140deg,#073149,#00111e);color:#fff;border:1px solid #00c6e6;border-radius:22px;padding:36px;box-shadow:0 0 60px #00bce22b}
dialog::backdrop{background:#000b17d9;backdrop-filter:blur(8px)}
.close{position:absolute;right:12px;top:10px;width:40px;height:40px;background:transparent;color:#fff;border:0;font-size:30px;cursor:pointer;border-radius:50%}
.close:hover,.close:focus-visible{background:#ffffff20}
dialog h2{font-size:28px;line-height:1.1;margin:8px 25px 20px 0}
dialog p{font-size:16px;line-height:1.6;color:#deedf3}
.detail-art{width:100%;height:auto;border-radius:14px;margin:12px 0}
.game-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.game-list button{padding:0;cursor:pointer;background:transparent;border:1px solid #007ea7;border-radius:12px;overflow:hidden}
.game-list img{display:block;width:100%}
.game-list button:focus-visible{outline:3px solid #ffd328}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* The reference is kept as a proportional composition at every viewport width.
   On small screens, landscape orientation / browser zoom preserves its detail. */
@media(max-width:600px){dialog{padding:26px 22px}.hotspot:focus-visible{outline-width:2px;outline-offset:1px}}