*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{color:var(--ink);font:16px/1.5 'Trebuchet MS',Arial,sans-serif;background:radial-gradient(ellipse at top,var(--glow),var(--base) 80%)}button,a{touch-action:manipulation}button,.portal{font:700 15px/1.3 inherit;min-height:46px;border:1px solid var(--edge);border-radius:14px;padding:12px 20px;cursor:pointer}button{font-family:inherit;color:var(--ink);background:var(--surface);font-size:15px;font-weight:700}button:hover,.portal:hover{filter:brightness(1.12)}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button:disabled{opacity:.7;cursor:wait}[hidden]{display:none!important}#stage{position:absolute;inset:64px 0 max(0px,env(safe-area-inset-bottom));display:flex;justify-content:center}iframe{height:100%;width:100%;border:0;background:var(--base)}#welcome{position:fixed;inset:0;z-index:5;overflow:auto;display:grid;place-items:center;padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));background:linear-gradient(150deg,var(--glow),var(--base))}.card{width:min(960px,100%);display:grid;grid-template-columns:1.15fr 1fr;border:1px solid var(--edge);background:var(--surface);border-radius:28px;overflow:hidden;box-shadow:0 26px 80px #0005}.art{min-height:420px;background:var(--base);position:relative;overflow:hidden}.art img{height:100%;width:100%;position:absolute;object-fit:cover;object-position:62% center}.content{padding:36px;align-self:center}small{color:var(--accent);font-weight:800;letter-spacing:3px;font-size:11px}h1{font-size:clamp(28px,4vw,44px);line-height:1.08;letter-spacing:-1px;margin:14px 0}p{opacity:.9;margin:18px 0 22px;white-space:pre-line}#play{width:100%;background:var(--accent);color:var(--on-accent);border-color:transparent;font-size:18px;box-shadow:0 5px 0 #0002;margin:0 0 16px}.secondary{display:flex;gap:8px;flex-wrap:wrap}.secondary button{flex:1}.portal{display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--ink);background:transparent;margin-top:20px;border-color:var(--edge)}#load-status{font-size:13px;color:var(--accent)}#toolbar{height:64px;position:fixed;inset:0 0 auto;z-index:3;padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));display:flex;align-items:center;gap:8px;background:var(--surface);border-bottom:1px solid var(--edge)}#toolbar strong{margin:auto;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#toolbar button{padding:10px 13px;min-width:46px}#toolbar .portal{margin:0;padding:10px 13px}svg{width:20px;height:20px;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}#instructions{display:none}@media(max-width:650px){.card{grid-template-columns:1fr;max-width:450px;border-radius:22px}.art{min-height:0;aspect-ratio:16/8.4}.art img{position:static;display:block;object-fit:cover;object-position:center}.content{padding:22px}h1{font-size:30px;margin:9px 0}p{font-size:14px;margin:12px 0 18px}#toolbar strong{font-size:12px}#toolbar .portal span{display:none}}@media(max-height:500px){#welcome{padding:10px}.card{grid-template-columns:.8fr 1fr;max-width:850px}.art{min-height:300px;height:100%}.art img{position:absolute}.content{padding:20px}h1{font-size:26px}p{font-size:13px;margin:10px 0}.portal{margin-top:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.card .art img{object-fit:contain;object-position:center}.card .art{background:radial-gradient(ellipse at center,var(--glow),var(--base))}
:root{--bar-height:calc(64px + env(safe-area-inset-top,0px))}body #toolbar{height:var(--bar-height);padding-top:calc(8px + env(safe-area-inset-top,0px))}body #stage{top:var(--bar-height)}