*{box-sizing:border-box;margin:0}html,body{height:100%}body{color:#ecf4f1;height:100dvh;padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom));background:radial-gradient(at 30% 0,#182342,#0000 65%),#090f1a;justify-content:center;font-family:system-ui,sans-serif;display:flex;overflow:hidden}main{flex-direction:column;gap:9px;width:min(100%,560px);height:100%;min-height:0;display:flex}header{flex:none;justify-content:space-between;align-items:center;gap:10px;display:flex}header h1{color:#00e5ff;text-align:right;font-size:15px}.hud{color:#a7b7c6;flex:none;justify-content:space-between;font:11px ui-monospace,monospace;display:flex}.hud b{color:#fff;margin-left:5px}.frame{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#0c1525;border:1px solid #00e5ff45;border-radius:18px;flex:1;max-width:100%;min-height:0;position:relative;overflow:hidden}canvas{touch-action:none;width:100%;height:100%;display:block}.overlay{text-align:center;backdrop-filter:blur(5px);background:#090f1ad9;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex;position:absolute;inset:0}.overlay[hidden]{display:none}.overlay h2{letter-spacing:-.04em;font-size:clamp(28px,7vw,42px);font-weight:600;line-height:1.05}.overlay h2 span{color:#00e5ff;display:block}.overlay p{color:#b4c5d4;max-width:300px;font-size:13px;line-height:1.7}.overlay small{color:#ffcc7b;letter-spacing:.12em;font:10px ui-monospace,monospace}button{color:#ecf4f1;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#1a2c3b;border:1px solid #00e5ff45;border-radius:10px;min-height:44px;padding:10px 12px;font:600 12px system-ui,sans-serif}.overlay button{color:#05060f;background:#00e5ff;padding:13px 24px}button:disabled{opacity:.4}button:hover{border-color:#00e5ff}button:focus-visible,a:focus-visible,canvas:focus-visible{outline-offset:3px;outline:3px solid #ffcc7b}.controls{flex:none;grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.hint{color:#a7b7c6;text-align:center;flex:none;font-size:11px;line-height:1.4}.status{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}@media (width>=700px){main{width:min(560px,75dvh - 135px)}}@media (width<=360px){header h1{font-size:12px}.controls button{padding:8px 2px;font-size:10px}.hint{font-size:10px}}@media (height<=500px) and (orientation:landscape){main{grid-template-rows:48px 18px minmax(0,1fr);grid-template-columns:minmax(0,1fr) 180px;gap:6px 12px;width:min(96vw,860px);display:grid}header,.hud{grid-column:1/-1}.frame{grid-area:3/1;justify-self:center;width:min(100%,70dvh - 70px);height:100%}.controls{flex-direction:column;grid-area:3/2;align-self:center;display:flex}.hint{display:none}.overlay{gap:6px;padding:10px}.overlay h2{font-size:24px}.overlay p{font-size:11px}.overlay small{display:none}}body{background:radial-gradient(at 25% -10%,#182443,#0000 65%),radial-gradient(at 100% 100%,#2a103025,#0000 50%),#050914}header h1{letter-spacing:.06em;color:#eef6ff;font-size:14px;line-height:1.2}header h1 span{letter-spacing:.16em;color:#00e5ff;margin-top:3px;font-size:10px;display:block}.hud{letter-spacing:.1em;gap:7px;font-size:8px}.hud>span{color:#7894a8;background:linear-gradient(130deg,#15243670,#0b152570);border:1px solid #23425275;border-radius:9px;flex:1;padding:8px 10px}.hud b{letter-spacing:.04em;color:#e3f5ff;margin:3px 0 0;font-size:14px;display:block}.hud>span:nth-child(2){text-align:center}.hud>span:last-child{text-align:right}.frame{background:#070e1b;border-color:#41607775;transition:border-color .2s,box-shadow .2s;box-shadow:0 0 0 3px #00e5ff04,0 10px 40px #0005,inset 0 0 60px #0004}.frame.aiming{border-color:#00e5ff80;box-shadow:0 0 24px #00e5ff15,0 10px 40px #0005}.controls button{background:linear-gradient(150deg,#1c2d40,#101a2b);border-color:#45627870;font-weight:500;box-shadow:inset 0 1px #a8d8ff0c}.controls button:hover{border-color:#00e5ff90}.controls button:active{background:#1e3c50}.overlay{backdrop-filter:blur(8px);background:linear-gradient(160deg,#091322db,#080b19ed)}.overlay h2{color:#f4faff;text-shadow:0 0 40px #00e5ff1a}.overlay h2 span{text-shadow:0 0 30px #00e5ff45}.overlay button{border:1px solid #76f1ff;box-shadow:0 0 24px #00e5ff25,inset 0 1px #fff6}.overlay small{color:#9d6bff}@media (height<=500px) and (orientation:landscape){.hud>span{background:0 0;border:0;padding:0}.hud b{margin-left:6px;font-size:11px;display:inline}.hud{font-size:8px}}@media (prefers-reduced-motion:reduce){*{transition:none!important}}