*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#08090d;color:white;font-family:Arial,Helvetica,sans-serif}body{display:grid;place-items:center}#screen{position:relative;width:min(100vw,56.25vh);height:min(100vh,177.7778vw);overflow:hidden;background:radial-gradient(ellipse at 30% 30%,#435361,#151923 55%,#08090d);isolation:isolate}video,#shade{position:absolute;inset:0;width:100%;height:100%}video{object-fit:cover}#shade{pointer-events:none;background:linear-gradient(180deg,#0002,#0001 35%,#0006);transition:opacity .4s}#menu{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:8%;transform:translateY(3%)}.brand{width:100%;text-align:center}.brand img{display:block;width:100%;max-height:30vh;object-fit:contain;filter:drop-shadow(0 6px 24px #0005)}.brand p{font-size:clamp(8px,1.5vh,15px);letter-spacing:.33em;margin:1.5vh 0 5vh;color:#ffffffbd}nav{display:flex;gap:2vh;align-items:center;justify-content:center}button{cursor:pointer;color:white;border:1px solid #fff;background:#0007;border-radius:1.8vh;display:grid;place-items:center;width:8vh;height:8vh;max-width:20vw;max-height:20vw;backdrop-filter:blur(12px);transition:background .2s,transform .2s;touch-action:manipulation}button:hover{background:#000a;transform:translateY(-2px)}button:active{transform:scale(.95)}button:focus-visible{outline:2px solid white;outline-offset:4px}button:disabled{opacity:.35;cursor:wait}.primary{width:10vh;height:10vh;background:#0009;border-color:#fff}svg{width:42%;height:42%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.hint{font-size:clamp(7px,1.15vh,12px);letter-spacing:.25em;color:#ffffff7a;margin-top:3vh}#playing{position:absolute;inset:0;pointer-events:none}#playing nav{position:absolute;bottom:4vh;left:0;right:0;pointer-events:auto;gap:1.3vh}#playing button{width:7vh;height:7vh}#mode{position:absolute;top:3vh;left:3vh;font-size:1.3vh;letter-spacing:.17em;background:#0006;padding:1vh 1.4vh;border-radius:2vh}#notice{position:absolute;bottom:16%;left:8%;right:8%;text-align:center;padding:2vh;background:#101319e8;border:1px solid #ffffff25;border-radius:2vh;font-size:1.7vh}#retry{width:auto;max-width:none;height:auto;max-height:none;padding:1.3vh 2vh;font:inherit;margin:auto}body.in-video #shade{opacity:0}[hidden]{display:none!important}

/* Menu-only blur keeps the logo and controls crisp. */
body:not(.in-video) #video{filter:blur(14px) brightness(.68);transform:scale(1.12)}
.brand{margin-bottom:5vh}

/* Crisp white controls over the soft transparent black buttons. */
button{color:#fff;border:2px solid #fff;box-shadow:0 0 5px #ffffff30,inset 0 0 1px #fff}
button svg{stroke:#fff;stroke-width:2.3;filter:drop-shadow(0 0 2px #ffffff55)}
button:hover{border-color:#fff;box-shadow:0 0 9px #ffffff55,inset 0 0 1px #fff}

/* The main menu shows only the logo and its icon buttons. */
body:not(.in-video) #notice{display:none!important}