.intro-screen[hidden],.intro-fallback[hidden]{display:none!important}
.how-to-button{position:absolute;z-index:3;left:12.3%;top:69.5%;width:6.2%;aspect-ratio:1;border:0!important;border-radius:50%;background:transparent!important;color:#ffe783!important;font-family:CarnivalCoin,Georgia,serif;font-size:clamp(15px,1.8vw,28px);pointer-events:auto;text-shadow:0 2px 0 #5f130d,0 0 8px #ffbd3d}
@media(max-width:900px){.how-to-button{left:3%;top:80.5%;width:14%;font-size:22px}}

/* The illustration and its hit area share a native-aspect coordinate frame. */
.intro-screen{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;grid-template-rows:1fr;gap:0;padding:0;border:0;border-radius:0;background:#08040c;box-shadow:none;overflow:hidden}
.intro-art-frame{position:relative;grid-area:1/1;width:min(100vw,177.6833156vh);width:min(100vw,177.6833156dvh);aspect-ratio:1672/941;visibility:hidden}
.intro-art-frame picture,.intro-art-frame img{display:block;width:100%;height:100%}
.intro-art-frame img{object-fit:contain}
.intro-screen[data-art-state="ready"] .intro-art-frame{visibility:visible}
.intro-painted-play{position:absolute;left:35%;top:76%;width:31%;height:21%;padding:0;border:0;border-radius:40%;background:transparent!important;box-shadow:none;color:transparent;cursor:pointer;appearance:none}
.intro-painted-play:focus-visible{outline:4px solid #fff4a8;outline-offset:-8px}
.intro-fallback{position:relative;grid-area:1/1;box-sizing:border-box;width:min(90vw,480px);max-height:90vh;display:grid;gap:16px;padding:16px;overflow:auto;color:#f4ede1;text-align:center;font:16px/1.5 system-ui}
.intro-fallback p{margin:0}
.intro-play,.intro-retry{justify-self:center;min-height:44px;padding:8px 16px;border:1px solid #a9a29a;border-radius:4px;background:#19151d;color:#f4ede1;font:inherit;cursor:pointer}
@media(max-width:900px) and (orientation:portrait){
  .intro-art-frame{width:min(100vw,56.2799043vh);width:min(100vw,56.2799043dvh);aspect-ratio:941/1672}
  .intro-painted-play{left:19%;top:85%;width:63%;height:13%}
}