.home-screen{position:relative;margin-top:30px;min-height:440px;border:1px solid #354356;border-radius:12px;overflow:hidden;background:#101827;isolation:isolate}
#home-arena{display:block;width:100%;aspect-ratio:1200/500;height:auto;min-height:440px;object-fit:cover}
.home-screen:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 65%,#080e21c9 100%);z-index:1;pointer-events:none}
.home-title{position:absolute;top:30px;left:30px;z-index:2;pointer-events:none}.home-title h1{margin:8px 0;font-size:clamp(28px,4vw,54px);font-style:italic;letter-spacing:-2px;line-height:1}.home-title p{font:10px monospace;letter-spacing:2px;color:#b7c8db}
.home-actions{position:absolute;right:32px;top:50%;transform:translateY(-50%);display:grid;gap:12px;width:142px;z-index:2}.home-actions button,.home-actions a{min-width:0;width:100%;padding:14px 19px;justify-content:space-between;font-size:14px}
.demo-label{position:absolute;bottom:22px;left:28px;z-index:2;font:9px monospace;letter-spacing:1.5px;color:#b5c7da}.demo-label strong{display:block;font-size:12px;margin-top:7px;color:#f1f4f8;letter-spacing:.5px}
body[data-screen=home] .intro,body[data-screen=home] .bottom-strip,body[data-screen=home] .header-tag,body[data-screen=home] #menu-button{display:none}
body[data-screen=home] .site-header{border-bottom-color:transparent}body[data-screen=home] .home-screen{margin-top:10px}
.option-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;border-bottom:1px solid #354356;cursor:pointer}.option-row span{display:flex;flex-direction:column;gap:8px}.option-row strong{font-size:16px}.option-row small{font-size:12px;color:#afbed0;line-height:1.6}.option-row input{width:22px;height:22px;accent-color:#c7f775;flex-shrink:0;cursor:pointer}#options-dialog .primary-button{margin-top:26px;width:100%}
body[data-colors=false] .character-portrait{filter:grayscale(1)}
/* Fullscreen home is a viewport, with the tools and menu over the live arena. */
:fullscreen body[data-screen=home]{height:100dvh;overflow:hidden}
:fullscreen body[data-screen=home] .app-shell{position:fixed;inset:0;max-width:none;width:100%;height:100%;margin:0;padding:0}
:fullscreen body[data-screen=home] main{height:100%}
:fullscreen body[data-screen=home] .site-header{position:absolute;inset:0 0 auto;height:64px;padding:0 24px;z-index:4;background:linear-gradient(#090f1aee,#090f1a00)}
:fullscreen body[data-screen=home] .home-screen{height:100%;min-height:0;margin:0;border:0;border-radius:0}
:fullscreen body[data-screen=home] #home-arena{width:100%;height:100%;min-height:0;aspect-ratio:auto;object-fit:fill}
:fullscreen body[data-screen=home] .home-title{top:92px}
:fullscreen body[data-screen=home] footer,:fullscreen body[data-screen=home] .audio-credit{display:none}
@media(max-height:500px) and (min-width:650px){
 :fullscreen body[data-screen=home] .home-title{top:66px}
 :fullscreen body[data-screen=home] .home-title h1{font-size:30px}
 :fullscreen body[data-screen=home] .home-actions{left:auto;right:24px;top:55%;transform:translateY(-50%);width:min(540px,70%);grid-template-columns:1fr 1fr;gap:10px}
 :fullscreen body[data-screen=home] .home-actions button,:fullscreen body[data-screen=home] .home-actions a{min-height:44px}
}
@media(max-width:650px){.home-actions{right:18px;width:112px}.home-title{left:20px;top:22px}.home-title p{font-size:8px;max-width:150px;line-height:1.7}.home-title h1{font-size:32px}.home-screen,#home-arena{min-height:380px}.demo-label{left:20px;font-size:8px}.home-actions button,.home-actions a{font-size:12px;padding:12px}}
.home-title h1 img{display:block;width:min(470px,45vw);height:auto;filter:drop-shadow(0 3px 4px #0005)}
.demo-label{max-width:65%;padding:8px 10px;border-radius:5px;background:#0c111ade;color:#e6edf2}.demo-label strong{line-height:1.5}
@media(max-width:650px){.home-title h1 img{width:min(310px,70vw)}.demo-label{max-width:calc(100% - 40px)}}
@media(max-height:500px) and (min-width:650px){:fullscreen body[data-screen=home] .home-title h1 img{width:240px}}