:root{color:#f3f4ef;background:#080908;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;min-width:100%;min-height:100%;margin:0}body{overflow:hidden;overscroll-behavior:none}.app{position:relative;width:100vw;height:100vh;width:100dvw;height:100dvh;min-height:100dvh;background:linear-gradient(90deg,#0f120e7a,#1415121f),var(--background-image) center / cover;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}.app:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:0;transition:opacity .14s ease}.app.is-scoped:after{opacity:1;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:radial-gradient(circle at center,transparent 0 31%,rgba(0,0,0,.08) 33%,rgba(0,0,0,.82) 70%),radial-gradient(circle at center,transparent 0 27%,rgba(255,255,255,.18) 28%,transparent 29%)}.target-area{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);overflow:hidden;z-index:2}canvas{display:block;cursor:crosshair}.side-panel{position:absolute;right:0;bottom:0;width:112.5vw;height:78.75vh;overflow:hidden;pointer-events:none;z-index:1}.app.is-scoped .side-panel{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;width:100dvw;height:100dvh;z-index:3}.side-panel img{width:100%;height:100%;display:block;object-fit:contain;object-position:right bottom}.app.is-scoped .side-panel img{object-fit:cover;object-position:center center}.hud,.instructions,.settings{position:absolute;z-index:4;display:flex;align-items:center;gap:14px;min-height:36px;padding:0 14px;color:#f8f9f3;background:#050605b8;border:1px solid rgba(255,255,255,.18);font-size:14px;font-weight:700;line-height:1}.hud{top:5vh;right:0;width:15vw;height:25vh;min-width:220px;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;padding:10px 12px;overflow:hidden}.instructions{top:calc(30vh + 10px);right:0;width:15vw;min-width:220px;min-height:auto;flex-direction:column;align-items:flex-start;gap:7px;padding:10px 12px;font-size:12px;font-weight:600;line-height:1.25}.instructions strong{font-size:13px;line-height:1}.hud-stats{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:6px 10px;font-size:12px;line-height:1.1}.hud-stats span:first-child{grid-column:1 / -1;font-size:14px}.shells{display:flex;width:100%;align-items:flex-start;justify-content:space-between;gap:14px;margin-top:2px;overflow:visible}.shell-stack{position:relative;width:50%;height:180px}.shells img{position:absolute;top:0;left:0;z-index:var(--shell-layer);width:min(180px,48vw);height:180px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55));transform:translate(calc(var(--shell-offset) * 5%),calc(var(--shell-offset) * 10%));transition:opacity .18s ease,transform .18s ease,filter .18s ease}.shells img.is-dropped{opacity:0;transform:translate(calc(var(--shell-offset) * 5%),calc(var(--shell-offset) * 10% + 22px)) rotate(24deg);filter:grayscale(1)}.settings{left:14px;bottom:14px;font-size:12px;color:#dfe6d4}.session-over{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;background:#0000006b;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.session-over-panel{width:min(420px,calc(100vw - 32px));padding:28px;color:#f8f9f3;background:#080908c7;border:1px solid rgba(255,255,255,.2)}.session-over-panel h1{margin:0 0 12px;font-size:34px;line-height:1.1;letter-spacing:0}.session-over-panel p{margin:0 0 22px;color:#dfe6d4;font-size:15px}.session-over-panel button{width:100%;min-height:42px;border:0;color:#11140f;background:#f2f6df;font:inherit;font-weight:800;cursor:pointer}.session-over-panel button:hover{background:#fff}.orientation-message{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:20px;color:#f8f9f3;background:linear-gradient(180deg,#00000061,#0000009e),var(--background-image) center / cover;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.orientation-panel{width:min(360px,calc(100vw - 40px));padding:24px;background:#080908d1;border:1px solid rgba(255,255,255,.22);text-align:center}.orientation-panel h1{margin:0 0 10px;font-size:30px;line-height:1.05;letter-spacing:0}.orientation-panel p{margin:0;color:#dfe6d4;font-size:15px;line-height:1.35}@media (max-width: 760px){.side-panel{width:112.5vw;height:78.75vh}.hud{width:36vw;min-width:150px;min-height:18vh}.instructions{top:calc(23vh + 10px);width:36vw;min-width:150px;font-size:11px}.hud-stats{font-size:11px;gap:5px}.shells img{width:152px;height:152px}.shell-stack{height:152px}.settings{max-width:calc(100vw - 28px);flex-wrap:wrap;gap:8px 12px}}@media (max-width: 900px) and (orientation: landscape){.target-area{left:38%}.side-panel{width:100dvw;height:100dvh}.hud{top:8px;width:30vw;min-width:142px;height:auto;min-height:108px;max-height:calc(100dvh - 16px);gap:5px;padding:8px}.instructions{top:124px;width:30vw;min-width:142px;gap:5px;padding:8px;font-size:10px;line-height:1.18}.instructions strong{font-size:11px}.hud-stats{grid-template-columns:1fr 1fr;gap:4px 6px;font-size:10px}.hud-stats span:first-child{font-size:12px}.shells{gap:8px}.shell-stack{height:72px}.shells img{width:78px;height:78px}.settings{left:8px;bottom:8px;max-width:54vw;min-height:30px;gap:6px 10px;padding:6px 8px;font-size:10px;flex-wrap:wrap}.session-over-panel{width:min(360px,calc(100dvw - 32px));padding:20px}.session-over-panel h1{font-size:28px}}@media (orientation: portrait){.app{width:100dvw;height:100dvh}}