/* Original retail pin texture and frontend arrow atlas. Menu layout reflows;
   bitmap font, plasma UV renderer and desktop-only services are separate ports. */
#welcome.frontend{position:fixed;inset:0;margin:0;width:100vw;max-width:none;height:100dvh;max-height:none;border:0;border-radius:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);color:#eee;background:#070b0b;overflow:auto;box-shadow:none;font-family:Arial,Helvetica,sans-serif;}
#welcome.frontend::backdrop{background:#050708;backdrop-filter:none}
.front-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:#080d0e}
.front-atmosphere::before,.front-atmosphere::after{content:'';position:absolute;inset:-20%;background:url('./assets/ui/frontend-pin.png') center/480px 480px;opacity:.18;transform:rotate(-16deg) scale(1.4)}
.front-atmosphere::after{transform:rotate(35deg) scale(2);opacity:.13;mix-blend-mode:screen}
.frontend .front-shell{position:relative;z-index:1;max-width:800px;min-height:min(600px,100dvh);width:100%;margin:clamp(0px,8vh,80px) auto;display:flex;flex-direction:column;padding:22px 28px;}
.frontend .front-tabs{display:flex;gap:0;border-bottom:1px solid #9a9d9b;margin-bottom:24px;overflow:visible}
.frontend .front-tabs button{flex:1;min-height:48px;border:1px solid #989e9b;border-bottom:0;border-radius:0;background:#1a2423b8;color:#dedede;font:18px Arial,Helvetica,sans-serif;box-shadow:none;text-shadow:1px 1px #000;}
.frontend .front-tabs button[aria-selected=true]{background:#394844d9;color:#c08020;border-top:2px solid #c4d2cb}
.frontend .front-panel{flex:1;min-height:340px;text-align:center;}
.frontend .front-greeting{font:20px/1.5 Arial,Helvetica,sans-serif;margin:8px auto 24px;max-width:650px;color:#e7e7e7;text-shadow:1px 2px #000}
.frontend .front-greeting strong{color:#fff;font-weight:normal}
.frontend .front-stack{max-width:440px;margin:auto;display:grid;gap:10px}
.frontend .front-stack>a,.frontend .front-stack>button{display:flex;align-items:center;justify-content:center;position:relative;min-height:64px;width:100%;padding:14px 38px;color:#eee;background:#000000bf;border:1px solid #fefefe;border-radius:0;box-shadow:inset 1px 1px #d3d8d84a,inset -1px -1px #000a;text-decoration:none;font:22px/1.2 Arial,Helvetica,sans-serif;text-shadow:1px 2px #000;}
.frontend .front-stack>a:hover,.frontend .front-stack>button:hover{color:#c08020;background:#000000c0;border-color:#fe7f00}
.frontend .front-stack>a::before,.frontend .front-stack>button::before{display:none;content:'';position:absolute;left:8px;top:50%;width:32px;height:32px;transform:translateY(-50%);background:url('./assets/ui/frontend-buttons.png') -32px -32px/256px 256px no-repeat;}
.frontend :is(a,button,input,select):focus-visible{outline:3px solid #c08020;outline-offset:3px}
.frontend .front-foot{margin:25px auto 0;text-align:center;color:#bbb;font:12px/1.6 Arial,Helvetica,sans-serif;max-width:620px}
.frontend .front-foot a{color:#a8d8d0}.frontend .front-foot p{font-size:12px;margin:6px 0}
.frontend .front-practice{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px;flex-wrap:wrap}
.frontend .front-practice #enter{font:14px Arial,Helvetica,sans-serif;min-height:44px;color:#d9e6e1;background:#172524c9;border:1px solid #6f8b80;border-radius:0;margin:0;padding:10px 20px;width:auto;}
.frontend .front-form{max-width:440px;margin:auto;text-align:left;display:grid;gap:12px}.frontend .front-form input,.frontend .front-form select{width:100%;min-height:48px;font:18px Arial;background:#172120;color:#eee;border:1px solid #829b90;padding:10px;border-radius:0}.frontend .front-form button{font:17px Arial;min-height:48px;border-radius:0}.frontend .front-form label{font-size:16px}.frontend h2{font:26px Arial;color:#eee;margin:10px 0 24px}.frontend .front-note{max-width:440px;margin:18px auto;color:#c8d1cd;font:14px/1.5 Arial;text-align:left}
.frontend #front-player-status{min-height:2em;color:#ffc178;font-size:14px}.frontend .front-check{display:flex;gap:12px;align-items:center;min-height:48px}.frontend .front-check input{width:22px;height:22px}
@media(max-width:600px){.frontend .front-shell{margin:0 auto;padding:18px 18px 24px;min-height:100dvh}.frontend .front-tabs button{font-size:16px;padding-inline:8px}.frontend .front-greeting{font-size:17px}.frontend .front-stack>a,.frontend .front-stack>button{font-size:20px;min-height:58px}.frontend .front-foot{margin-top:20px}.frontend .front-panel{min-height:0}}
@media(max-height:520px) and (orientation:landscape){.frontend .front-shell{margin:0 auto;padding:12px 24px}.frontend .front-tabs{margin-bottom:8px}.frontend .front-greeting{margin:0 auto 10px;font-size:16px}.frontend .front-stack{max-width:680px;grid-template-columns:1fr 1fr;gap:8px}.frontend .front-stack>a,.frontend .front-stack>button{min-height:48px;font-size:18px}.frontend .front-panel{min-height:0}.frontend .front-foot{margin-top:12px}}

#opening #start.startup-screen{background:#080d0e url('./assets/ui/frontend-pin.png') center/cover;color:#d0d0d0;box-shadow:inset 0 0 0 100vmax #000a;font-family:Arial,Helvetica,sans-serif}#opening #start.startup-screen h1{font:clamp(2rem,7vw,4rem) Arial,Helvetica,sans-serif;color:#fff}#opening #start.startup-screen p{color:#d0d0d0}#opening #start.startup-screen button{border:1px solid #fefefe;border-radius:0;background:#000b;color:#d0d0d0;min-height:56px;font:20px Arial;padding:12px 24px}#opening #start.startup-screen button:hover{border-color:#fe7f00;color:#c08020}
.camera-tools #touch-camera{width:auto;min-width:78px;min-height:44px;font:14px Arial,Helvetica,sans-serif;padding:8px 12px;white-space:nowrap}

.front-atmosphere.native-plasma::before,.front-atmosphere.native-plasma::after{display:none}.front-atmosphere.native-plasma canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;pointer-events:none}.frontend .front-stack>a,.frontend .front-stack>button{color:#d0d0d0}.frontend .front-stack>a:hover,.frontend .front-stack>button:hover{color:#c08020}

#menu-dialog,#help-dialog{background:#101819;color:#d0d0d0;border:1px solid #fefefe;border-radius:0;box-shadow:0 0 0 100vmax #000a;font-family:Arial,Helvetica,sans-serif}
#menu-dialog h2,#help-dialog h2{font-family:Arial,Helvetica,sans-serif;color:#fff;text-shadow:none}
#menu-dialog button,#help-dialog button{background:#000b;color:#d0d0d0;border:1px solid #fefefe;border-radius:0;box-shadow:none;font-family:Arial,Helvetica,sans-serif}
#menu-dialog button:hover,#help-dialog button:hover{color:#c08020;border-color:#fe7f00}
.frontend .front-greeting{overflow-wrap:anywhere}