:root {
  --bg: #05080f;
  --fg: #eaf2ff;
  --accent: #78dcff;
  --muted: #7e93a8;
  --error: #ff6b6b;
}

/* Orbitron 800 (OFL) — self-hosted for the futuristic countdown digit */
@font-face { font-family: "Orbitron"; font-weight: 800; font-style: normal;
  font-display: swap;
  src: url(data:font/woff2;base64,d09GMgABAAAAABpUABAAAAAAP/gAABn2AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGnwbkUIcKAZgP1NUQVQqAIRYEQgK0jS/JQuCeAABNgIkA4VsBCAFhRgHg2MMBxvcM7OjFWwcAIHptoqidG8Wsv/6QDtC+l1khaJQNMrNw9Sws7R1qEmfmUulslZ3lssiwutfvG5xDMIykVfn9D8qPmVbuVC8nMIV0nnClmim2Q0+OUJjn+TyfP1Yb6dvz58Aok2lPIKwiA4syAgVGRcjqDzvrgfWCO/naU7f/UuCSo1CSMjd4SFGEuwCtFSwmlKBiqVI2UphdC2lmn8JUAhQU/AaHUWs4hliE1HYnKmp66fz0/lld4wNL5NL2FHz4tblzbqLB4VDmAphEAqFgqh2+wUJBgBBlHozuXf+o077z47i9D/JcgFhO+INKI56dRmngyld3Wm5aaRlOd/azyp9ZY0na8ipOgA84uxyyu8o8wvgH1G8GTXFAelEDgD/+6Um/U//dixfl1MautJg5d5JhjeAMscyGa79q+/V7te3tLI957/fcumbvbbyuXTtOUVW+pWG0iuq1pXSWWoHKDCEZIIDUDhMAAyAJE9/bwNfr224YIPaUcRmX5d7Wmpx9nTGtiyEqIsQNzJ+fjbbcHadyvvm4EFKUtH/B1XAfADCFcEKwZYdggMXBA8zELxJEBgMQoAAhCBSBIUoBJYOIU4CQqJUhGXWImy0ESHdNoRd9Ah1GpCaNSMRwFwUFjp8NHEpON6+kLMHHPEAY0qAgm5dydoD7r+pChzPJAHAS50jCBxQrBFVVKM338XeApMz+Lnk25LP4cNbNgr9t//Co5Kukla4U77huhsu4TP+ckStSTxAKtlDHF4aWZXY0KJqO890h/WR6lhwCT4XKq2yGzBm7wBckoizghiwFbbBjtgNz8JeeDYW4SAcguVYjVmsY3PlHr90IQnA/HA8deo1aIZYI+Bkc/AACKWgX9An6BDcEJwTHBPkCVjpDBBMFzjyfwD8382n/FH+I34dv4qfz1/On8en+F68T3lPeOW8fN5cnhf5JTlIFpM55A6SQf9H76MaZEYlKBF5czelcQnHkIxHXPv359cP4B4AyUrK6i5caWhqaevomZpbWFrZOzg6eYApVBrdqzfvDCaLzeHy+AKhSIygGE5IfPl2lmZDYgg1ACxBAJUyhX/RK+/BTuIk+akIV9SaXrMy+w+34lX8EGZRYEGi/0KyCpyoif7V2533zIgFgDFHeTD25uJ/EQ2i4+G+M0CHeTLFPyoZRGlIDeDS/7XxFizq7yQuwEPT97hRK7YJJ5ePktg8T6h8UhoUkGbjXZ0BcABCMyKIXSpD8KxE3cfwIrWj91Rcp38gRr6hb7GExzrFagRD+KJB51mvkDf3HWQI2KYLszwZESOKECoET7v4nAWQUYYmwyAxuQ0ESnBNUYmkW/prlhbWYERENJMW/dka/lPByT8VZMQevFl+EkVNaclaMUUveIZn/wPrjEPMlXPgHNtSg7FqpNOCHEkHN6JOlBDNbHlEUDeFdyWgtOT5ySAsUTaKi2KQXtgg1LyA4f9UORokGsiQmoVYIDSO3uMrC8yEGiIDS4sCxqu5ogQbgJd4BTRmZdmE2irIDgpvmSMGN/JJhzTEPaFDwmSOXNMOmwqaBcUa3WWfK8oCY01KElGM2zaR4Z9yUpyeYO/wnjiaOTc35BzEGKLkagJMtI6rREuo+8X66cZgcYmLlVbIMdiFERJAd+8Mqhgg+caLWfYRmqM1uK8QzYBHdsON4HmS08Q2/QsW/+AfB3+bUXhs+oUb7SOamwZDJrDFtcsiWendwRiqJuXAo9n1+kfEKO+Aw6w/i8K35R6WmZGMXMAAATkd7sUjkhNV/GfiUSKDMzo/Hb6yBeaX7L850P4yAKBxQqvzojo8i2dHt1SzKNEiwiSACDI2pL2i04K9B2eBaJctSC/pJysa9fZ20LLsG/YwfWgIoPrFpcYYexySJvdOjzTki2nMmAOWZKL4GEjavV6ArMv2HzMGk4dfjDC4gBYhNe8RxRhV1kSmGKfIqfh4USjFFYB+wMT2R0xhC/FBnmQlcGrzxnWWrNaaLv8QXAMOIt+4PiF0EW51JX/rwHiWfgMKkMOxAJshxEtWguWw/nrowbVtOY8wg7OqGVIIEKCB5chgyUs83a+VxYeE0ljnLZfd0OSOe+57bcQHfvKH/0wRe2pJHmU87zdBkqS1cLlwhnC2UCSkhHVb61NT2ExKK80FNzTG767Tu8Z85Bd//SiLMdx5mXC60Kt6v6k3D6iaLRdOaujHLPDfj/Ik70u9NMiV1/zqL3Duxxs/XvnRjx8aEGKBs674FPgBgG8KEY6EZ6kqFlBHwZ/bU4XKHXHGNTdUOOa4IuccgOUplq/AFZdc9rbrnxqF3TsPxnQ+/KccZWBy58Pjf/0JtU66qtJB1c56R41D+BCSFR4Ba3ZcOHLibAZP00znw48vEQmxC6SChQiltEkENY0oWpGi6SSIN8dcqZIkS7HcGiutstZqF22TYYutdqOsQyDGlEUALwB1H3gJ5u0FC1aCXghQfwIEGlOdKyM2SeKc1SxwbHQCkVNkhSQCsTFFc01D5RGgAHHhjIwGvT42Fd2HSAORHCuIIafPjLtjQxAk4ClmLloDYevNEFAOgYTJ0QkZ08pOdmRZl82sztlKl69ydIo2tWlW/cMaN9UBH7Z019JWZXvSl6jPutsD9mjbQNZpjElNlg62d55SrVTiXpxHy21qJzDEziSpLT20lblhl462to616Zr5wMYcKRtdNmguZHV3Dw21tLyy2gmZPU336j3luDOthtXYnnS2DkNX3JxrV9OZ7T7eLPMV47Br3DqMrdDcjozQ3Q0NyURhRQuH23K1ZZkgOMXaxVGcWPGSJmfEcOYZb3IWmuaOymbRHBzUNLi7CmTaeWOni1UWy+FhxDaR95U3JM2bgYJY0bd2Z0qMoumGc+PGI4iKuJFcZd2fVDioojSMXMyKxjYSVjHKgKKiRRW73bCg7B+IrumauHL4tTBK7x/OrQOAgoduxw6YioPEFfyZ0S0x3ei2oPTuegShpH7ecd9gLqmlQLoGkzyPhR5WATPIwVh4sZjpSAWz/tbhlCdnPGbtfyLrPR/r2iqBo0MwD2hmNeoO8SEnvR8tCJjYd1LV9KAqxTENetkt2XWwsea9YoZamVWdk5/cvL0K2IqEornzZtcLZAiIdrR7X+fRZ3LJffcKwaoNBgHHSdswyIzwJEVbSRfRKAdo5dYMj7w1mTS7BvUQOjfgpL6ziKi3CVAuUKcoo65EwmpKGLEoredplRBpeQiKZuR5e0gDFw026CuYQ4rdWCTw4UTG+WxnWYBU3l6fEMX8BGxjUszzduhBrwtXaaHIJSXADdda8mzEHJzQie40VjxaNPNpd2866OY7NMgBYVximnyCpF6OFE09bc7ehFx0yFg1J9Vd2Zy0PiU0yqSeB+pCEEDfB5sAe9W+4TV+ScqAYV62jaOh8xA/14IVIhZs2VxxgCHtp8Zmk15oe3CYoZekB4ebuv7v5gCLI0YUlUMQIC9MYy9pV0GNNtjWkEBcOUOD1jY4mGZPqX+PuD3fX34OKLSNBowrG3wi+hsb8lUkMeIbR7seWJF03BwxJWEVd+NWX2g7DH5VhmaZJ001EWLNI71Gbi3dx2RpKFSFsX5WKjmO2K1XuyjTWt0XNG21QCO8Fs5BCXm9a4MICi6nsD5FNKzBKphZBM7u6YfbwBNptkYPVVGjMwAnDQriois24yEe4UWVn+ztO1k/AR/eY+15IGoxs2HsRIRPbawoUbCdrJN8KGdFSWTuRfkvLzDORT/I0smw7Jd+YQ49qeBnbu3SFjKhFKKdpNY/kzmxqCIqDaPzydPBsIHQYVBXzRkK61RYijDYJqdEWbEDJPRVDRGM0dlTvZyoWIg4FgUXVPhwP4EGYBBCWLYdytoXKsq8nKM3mqvPjuxgF3vSTbxXLnimZSTxj3fLhshJgd/eX/DtnpyibhndX42GIFGVXd6Yt+jqjQKYg0MfGnJjy2e3LPv2v4wXPW2G/7RavKTFEyiI2Xcap6vopE04t4O2dlqXlMavcbr1evemLn/clZmu3ttXFCqHaCO3cWhyMJhozAzPL8iJhNVak9pEMp6vZYF1f64vV86WHd5ZneRde6E27S63p7dOJL+q3Omkl5Xe3LlnbZXMif6Ht/DxRQHpVwPFh4pByzIUy1JMI7OGabZ4yQ8NPxi5/IY2UkReIn8bqIBl6HRROsFkhS+WXMRWpopmZQHMPIiw+NG6g044qLS/S2eYpZuZmNNGnjiOxFdqxei4FEOSYiRDBaQMFX/dYwESwROGpSiWaYpg3WiTl7Ozy46339nLBFpLTCJEh+jMTeNlZ+IykrEpM6XZJIjnMQLTXdLHYjBfmeiScN2Kz1W5501hjrCDQGMx+nT6GPfrg5+Fs0CZhcwKY6psjaYEBW3sa/Kp/sm7KsRK80qFVIUTqPYBzbtGljWB2lL5T9DfQVVm1l+kiqf886nxysRkyefF1/74Ex4F9dgmOm+Ijm2Mz8fDQ8Uc7HcW9/MdJKhf03STju6g3Qb4hX+orEHNEuFm9KHbe/C0p2CpqSyAD3jP4H/tjZbgV9bjDy0/JWGZKKPqKymg+GFKo5tvGnW0iVGjW5pudqWlUQnIQOSIUO0bksWwHamAGKHJYvKJoWqnrFFDf98m6IMLr6+He73i17kP+AP/deWVHrCPXe3ilbuJ9jZ/0fQFhECwlRb9wZWvJl5ezHLZ1pqQyte/vzjDAnBI7Kn9RvK1pD6x1x7kYP7j2p8my/eVQzfFUmnUBx1zkRzdx530ZFpaWgwB66QrkBx6mEl2WEyiQnu93UxShmrDD2IbhTriB8+UbORH2aAChDvC9IsGUGmTAgx+pBh53dQMjX1y6KIm9WOWfjIduOU15jADVxn1dRvWgVGn4BbljJFZMttGqI+BlZ6FEvYlm3zAjRyK+X+AP7gHxZ8Dt+ZRlxpGm1az1Hy4I5PCSujALIkP+kujJ44yLbgp6JNvAgXE43hDFnCYAz+I5+KhdRC4CX3pInyKTmMl9Dxi2Me85slYadCHE69UUGloXjMO3UAil9M7RRbOs+34vj9KoWc+JsU21wT2ExSIgOAf9BxMm+JaWIaPBz00SwnegKXon5kv909VwDdAitu3PgPKOr6AgE7Qpwz7kp9dZGv7v4Avw4rnKTsDWrJXUgEtyEodjog31J6Zid34rg7JUOC5WkoeCEfNKfTpkYEGYhn9hBrRq6K0m5QwlKq0G1mPV2adIGVo5ZFL+BQyz5ETAb1Qi27BjR/gD0TxkSUNPTVaJ3CKHFXhFswuBJZCdNyVMdO46UpMHFjBZ3EVRTEnYnBZXF44wbG43Vd3n90NIRD48p+Xh8DyssbSxnKJ/9I0Bp4uu/eqg6P9dQlHZ+7iBjybG/AxevvVgArKs31ycGJ5lk82hsf031Q8dZOmdH+oof+gdPRNior/W01COaxFMlJ08wZspC8nC9/Cv/faP7I1W0ADnrR+whUkR6UE5xwVjnoeUEOxEj19kSaC8CCvWobz7sm4QCSWJOQUe4c7S4pQERKThxRHwUXo7pqjJ9KY7BkNcp5priKnStVCF9xpPfSw8pBhE7fpzuZYGG6Gx7YyChzs1zwFrqzmEZZJ+G006ArFSiiWri6PRI2idc+2eIJ7BvMgsSsxJs4I03wDgGV4dwalSA7PIQqJyB7uKT2R1jjdkdWul/YWXnbDdIk3XvcThfy8wpRDCKSkU+QpkIQXpKgR/T0t6BNfbdwqJ8XoMBKTl5kv9bS5SaZq6FWm0ffag69GUAuXjJZ5xnN5J0gRqABjDMoisMV5ooVsACjvAoc5w10WlofFCxoZOXBPIutwOOwrJB0Kmidgha0MTwBWgQN2MICdyuEemE+nTfiWFKMzpIh8n/s0hDKmhja/VqQO9+hbFxO3aiu6+Y2naAKXzOyZ7DdIjs6S9wH+7EfV5sLrZ0dFuEVGeURHukVEe0CLPWQvSdiYJQ48nknlGfOyqO1CssXzNmYtmb8BYiD0fArOo/KKuFvSilJ5xZkWlXyaCVw2nVeI60POG6XnzwWdXxMMVXReNQigrF/7c2l/BIxCf1SJtD+ydDTY410mbUIUp0IydKP6NYIa8B7ESJTmogp4CnPXhlfX++qpU8VvFRcweq2KijRpuTxjRvP66kiQtzQF+F9e48hV+ccOHD9p3KgCyzOPcycSr89Ee0eLn1lA+xFwZzlQfgjc8h/oPgkO8CMMQZ2w32+hjsm1iYUwcy1LTwzKVrDh9ovWsAE3BQFhtHAd8O2APHEp/HNtLcIgdxcJoyR0GbpioAt3gRZBN+4GB+ZLPaVYy60NpkOG0/ovmDHcT4qRNIfLCf7cJRKT/XgMfNMhI7vUzlBO6ydl5xpzHxgfSB/gBxn//t27u7e5MIjaDOmnAljKj2W0WIXk6KjxpD8rkej8Tf5xdFs44FQGzjgZEN1xf65ZjpwcKlny4RDlTv+T6R5O58RRczvTZoOvLSJlV+4BGvDaGTPLvK4dPaFvmBH7isl/YzGqUmI8CzOG0yvg2BHuSDFXfJw7fgxkPKBiCdgdri2qCaqYl7Ego8IuHL6o1q5iQfr8dLD+RbivOPkv9j/hfjBiI2iTADtg+6fAOXBQD9cmDIX/yvXf8qfWbtd04P1+JfqDYQgc9uvsEFOf5vL8KZ23zmeGkM0qlkAxlJvDLWVmNZFFNwfSC+jAZnqJn8gmG6Ltp+zJ/mfLALVO/ZUBs2AWdSQkkgUx4Qe7KHf9mSr7KenUvJVMdTgxs6eILhihtfRwAR0XVj+iF4b/+2RgN6rHCdTnY/auR2JyB/kQq5Bo+Mon9Do8Gw4MUjsYiv09O0QdRfqlnByJyLVIhjIP92zBl/bNMZ1MifpdfNkQbSsrWVr7BU/qdQTJ4Sr8+NEg9YC6V3zS/D78Y9KPW/PH7o+NxeqQfAck3U+C1rR02oLqzFlCT3ibYqtidgd2kmK0kRSROylrIxKDMv3PdkBYWMFYG5brAlsIoV0ldQqSNyRF0pMwH4btTRu3NR3gD8H0Q96t3mEk5N41jGoWZxUEQDgBxPdBhAPAqlOa/askCbuXKmcGBq/YkQaJ5rDrJul1WF4Ai+MXA6KAAAAraCAuwakjtVXSqK5T16ublGawdaduAeEO2BgrDgGnrlPqscetG+xWN6rrlHruzQKXciFx/jmnblTXqeuV5vFBCOogdZA6iCscLuHh0KAHDXWjuk5dr25SmhOsyKGnxD1mFVA3quuUepYY/5iGtS/fWL4O1/Nl5HhR5QrCleP/I3Wjuk5drzTzdISGNWMK1I3qOqWe74ppSAUAdbENdq+rdzE5thGr/NeINB0hmz27/+nc+u0p2LestzvfqujflOTQn1bFANj0jBb0XPLlRukuVH1N6V98nHpsbQGySMhn94hTupPVDnmnfA3rjEFQs4vwaA/XhkXGv8DrRjVoFONUeM2UfKl0F6iG+xhSOv6L78blKEAetk5RFnJyyty+yeRjawoTD2EwrXWKUnFaWMcL+DI8+hepKakcD/qua6epv4GX4KMCefyrWCiPAUVeyKERSaSMPwK6UZRJR7c2YATnDVjUCdLbwepDUttvYPoC+kyDX2pRmVvJNT8Z7be4xFCHO5nt2OoVJwQQsUl5fjdwivytQJJfA950hzDA59MuHXPGzBkHchyYQgAFMlBSM+eM8H+/OwHC9P16Ub9z73jaXjRrN1TNimgVNawoljb/owG7oy3/EhrD/AB5l2YQ2ov92/bA69k0bUfzLlA3e4eRVL6Z9ZQ9DSHH1DCKePr8wT208zviSXWxVAcJaWr8d3cpyXOPIjypWirVVGkhv6vVpuUO+VHrNmVq+ecMlU8p0gIv6IcHZ/K3nzInxVSVSNH9VLkPAYwALDappIiZSrjHXn6bBtLW0VQ7ZVqgX3vymAiJi7UhqRcAbitVx+YsfhTR0TStleME+2wFTcqQ94p0JIUvqXxfwK+/rCnYm2gq79Pqp8w1PrnMrbJlNoA1PZswNiCINfBLTFEUdfmaVr7k5UZV7uThQ0T6qFolf1P1Cga/yhdEPjvu6hjaHyIqAsBp9Sbi5PNtd6J8iK4+LvFCRMnCJm/5zPeKv09j+FVmej8ibRlV11C2jrpaBBumAiMVDA6MZjC2gnEWjARQZ8JIL09SQ3zrX+m+4VqlXOp3KwyxRQAvLMEXiVcOzi4IYL5yJGJiA+D3st/PI/j5eh7iaHweSetCPu/+PL6ZiucJ+Nk0z5FCyDxnzrznunBlbxMQODjGv3axK2TYbqttcszxphxZNoqlt0u6lElusn0o9fYE/Nnn2EsrVKhsm2XZbq8c2UJk226XEHpZtgqVYq7E+AcLphDLZSBkk6FfSCaE9JUf5hePkCxFsjn3GQ8Wi632yc43ygq+OaE/jt5e+5GKQVjotK6a0NIIMsZAYane2yHD5nChs4/lNvp0GoQYyXh2R261/a7YZxO6m+ntVsiZyLCL2EbWZoYGWwrpR939BRF6I54Jk2TZ4rm5MqTXbG4I4eEm22i3AtrCIt5dREIg0xWOM2Q+nxfAdk89tkm9zRoYSVDS0RgZnnjmeSZb9xdeeuV1DhmR7de3hYzFu7Ya0KiJnIKSSji1QUO2GaahFSHSd6LE226nXXbYY7cL5phLL8E8e2XJlpkNt7dEI3LkesO+bLSzSbXImxbb74B8eQo058td2XLHrbDSWw56W6FVVltjre+1WpebR3Ph+IwcPenCKU/vX6IWz2UilxzlQMBVDDv21tsgGsvZLbfFuuOue1rw2SILESQUsXKEo5/87D4hXz42siZm45jD0opH8AkBYUVYEzaELWBxDEZ9YMy4D8e+u9ulUp2UN+delv7gyXKp2uYrqsdn/Kdnz2bjpX05nl7nss0b6mxybuxKHw6Uhd+vqSM3YwA=) format("woff2"); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
#app { position: fixed; inset: 0; overflow: hidden; }

.screen { position: absolute; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px; text-align: center; }
.screen.active { display: flex; }

/* Portrait-only gate. Touch devices in landscape get an opaque "rotate" overlay
   over everything. Scoped to coarse pointers so desktop landscape (testing) is
   unaffected. Output is portrait regardless; this only fixes the on-screen UX. */
.rotate-prompt { display: none; }
@media (orientation: landscape) and (pointer: coarse) {
  .rotate-prompt { position: fixed; inset: 0; z-index: 100; display: flex;
    flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: var(--bg); color: var(--fg); text-align: center; padding: 24px; }
  .rotate-prompt p { color: var(--fg); font-weight: 600; font-size: 1.2rem; }
}

h1 { font-size: 2.6rem; margin: 0 0 12px; letter-spacing: 0.04em; }
h2 { font-size: 1.5rem; margin: 0 0 16px; }
p { color: var(--muted); line-height: 1.5; margin: 8px 0; }
.fine { font-size: 0.8rem; color: var(--muted); }
.error { color: var(--error); min-height: 1.2em; font-size: 0.9rem; }
.suggest { color: var(--accent); min-height: 1.2em; font-size: 0.9rem; margin: 0; }
.suggest-link { background: none; border: none; padding: 0; color: var(--accent);
  font: inherit; text-decoration: underline; cursor: pointer; }

button { font: inherit; border: none; border-radius: 999px; padding: 16px 28px;
  cursor: pointer; }
.primary { background: var(--accent); color: #042; font-weight: 700; font-size: 1.1rem; }
/* gold "energize" treatment for a primary action mid-flow (matches the landing button) */
.btn-gold { background: linear-gradient(180deg, #ffd98a 0%, #f0b64f 55%, #c98a2e 100%);
  color: #241503; font-weight: 800;
  box-shadow: 0 0 0 1px rgba(255,215,140,0.55), 0 0 24px rgba(240,182,79,0.5),
              0 6px 18px rgba(0,0,0,0.5); }
.ghost { background: transparent; color: var(--muted); }
button:active { transform: scale(0.98); }

.hero, .form, .status { max-width: 380px; width: 100%; display: flex;
  flex-direction: column; gap: 14px; align-items: center; }

input[type="email"], input[type="file"] { width: 100%; padding: 14px;
  border-radius: 12px; border: 1px solid #1d2a3d; background: #0b1320;
  color: var(--fg); font-size: 1rem; }

/* capture stage */
.stage { position: absolute; inset: 0; }
#preview { width: 100%; height: 100%; object-fit: cover; background: #000; }
#guide { position: absolute; inset: 0; width: 100%; height: 100%; }
#guide .silhouette { fill: none; stroke: rgba(120,220,255,0.85);
  stroke-width: 1.2; stroke-dasharray: 3 2; }

/* supplied beam-area guide PNG; matches the live preview's cover-crop.
   alpha comes from the PNG itself, so semi-transparency is baked into the asset. */
.align-guide { display: none; position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; }
.align-guide.show { display: block; }

/* pod framing ovals (overhead ring + floor pad); geometry from /api/guide */
.guide-oval { position: absolute; border: 2.5px dashed #78dcff; border-radius: 50%;
  pointer-events: none; filter: drop-shadow(0 0 6px rgba(120,220,255,0.7)); }
.guide-line { height: 0; border-width: 2.5px 0 0 0; border-radius: 0; }

/* --- 4:5 letterbox (body.frame-45, set by a skin) --------------------------------
   The capture window IS the recorded frame: a centred 4:5 box with bars above and
   below, so framing is what-you-see-is-what-you-get on every device, and the guides
   (percent of this box) land in the same place in every recording. */
.frame-45 #screen-capture { background: #000; }
.frame-45 .stage { inset: auto; left: 50%; top: 50%; aspect-ratio: 4 / 5;
  width: min(100vw, calc((100vh - 190px) * 0.8));
  width: min(100vw, calc((100dvh - 190px) * 0.8));
  transform: translate(-50%, -50%); }
.frame-45 .stage::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.4); }
.frame-45 .capture-hint { bottom: auto; top: calc(100% + 14px); padding: 0 12px; }
.frame-45 .rec-indicator { top: auto; bottom: calc(100% + 14px); }

.capture-hint { position: absolute; bottom: 38%; left: 0; right: 0;
  color: #fff; text-shadow: 0 1px 4px #000; font-weight: 600; padding: 0 24px;
  line-height: 1.4; }
.capture-hint .hint-important { color: #ffd166; font-weight: 800;
  letter-spacing: 0.12em; }

/* full-stage tap target: anywhere on the preview starts the countdown */
.tap-start { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tap-start span { color: rgba(255,255,255,0.55); font-size: 1.9rem; font-weight: 800;
  letter-spacing: 0.18em; text-shadow: 0 2px 12px rgba(0,0,0,0.8);
  animation: tap-pulse 2.2s ease-in-out infinite; }
.tap-start.hidden { display: none; }
@keyframes tap-pulse { 50% { opacity: 0.45; } }

/* pre-roll "get ready" countdown — big number with a steadiness caption below */
.countdown.getready { position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  color: #fff; background: rgba(0,0,0,0.35); text-shadow: 0 2px 16px #000; }
.countdown.getready .cd-num { font-family: "Orbitron", ui-monospace, "SF Mono", monospace;
  font-size: 6rem; font-weight: 800; line-height: 1; letter-spacing: 0.06em;
  text-shadow: 0 0 18px rgba(120,220,255,0.65), 0 0 44px rgba(120,220,255,0.35), 0 2px 8px #000; }
.countdown.getready .cd-cap { font-size: 1.05rem; font-weight: 600; max-width: 78%;
  text-align: center; line-height: 1.35; text-shadow: 0 1px 6px #000; }

/* recording indicator + bottom progress bar (shown only while recording) */
.rec-indicator { position: absolute; top: 24px; left: 0; right: 0; text-align: center;
  color: #fff; font-weight: 700; letter-spacing: 0.1em; display: none;
  text-shadow: 0 1px 4px #000; }
.rec-indicator.show { display: block; }
.rec-indicator .dot { color: #ff3b3b; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

.rec-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 8px;
  background: rgba(255,255,255,0.18); display: none; }
.rec-progress.show { display: block; }
.rec-progress-fill { height: 100%; width: 0%; background: #ff3b3b; }

/* upload + done */
.bar { width: 100%; height: 8px; background: #142235; border-radius: 999px; overflow: hidden; }
.bar-fill { width: 0%; height: 100%; background: #f0b64f; transition: width 0.2s;
  box-shadow: 0 0 10px rgba(240,182,79,0.85); }
.spinner { width: 46px; height: 46px; border: 4px solid #2a2213;
  border-top-color: #f0b64f; border-radius: 50%; animation: spin 0.9s linear infinite;
  filter: drop-shadow(0 0 8px rgba(240,182,79,0.75)); }
@keyframes spin { to { transform: rotate(360deg); } }
.check { width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(180deg, #ffd98a 0%, #f0b64f 55%, #c98a2e 100%);
  color: #241503; font-size: 2rem; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 26px rgba(240,182,79,0.8), 0 0 0 1px rgba(255,215,140,0.5); }

/* event gate */
.blocked-icon { font-size: 3rem; }


/* --- show-feel scenes (landing / done / blocked): transporter-room backdrop --- */
.scene { background:
    linear-gradient(180deg, rgba(3,6,12,0.35) 0%, rgba(3,6,12,0.55) 55%, rgba(3,6,12,0.82) 100%),
    url("bg_room.jpg") center / cover no-repeat #05080f; }
.brand { width: min(78%, 420px); height: auto; margin-bottom: 6px;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.6)); }
.brand-sm { width: min(60%, 300px); }
.kicker:empty { display: none; }
/* Done-screen restart (shown only when a skin turns it on: SKIN.restart) */
.restart { margin-top: 18px; }
.restart.hidden { display: none; }
.restart-note:empty { display: none; }
.tagline { color: #cfe6f5; font-size: 0.95rem; letter-spacing: 0.14em;
  text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,0.8); }

/* --- ENERGIZE button: gold core, pulsing halo, shimmer sweep, tactile press --- */
.energize { position: relative; overflow: hidden; border: none; cursor: pointer;
  margin-top: 10px; padding: 18px 54px; border-radius: 999px;
  background: linear-gradient(180deg, #ffd98a 0%, #f0b64f 55%, #c98a2e 100%);
  box-shadow: 0 0 0 1px rgba(255,215,140,0.55), 0 0 24px rgba(240,182,79,0.45),
              0 6px 22px rgba(0,0,0,0.55);
  animation: energize-pulse 2.4s ease-in-out infinite;
  transition: transform 0.08s ease, filter 0.08s ease;
  -webkit-tap-highlight-color: transparent; }
.energize span { position: relative; z-index: 2; color: #241503; font-weight: 800;
  font-size: 1.15rem; letter-spacing: 0.22em; text-transform: uppercase; }
.energize::after { content: ""; position: absolute; top: 0; bottom: 0;
  left: -80%; width: 55%; z-index: 1; transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: energize-shimmer 2.8s ease-in-out infinite; }
.energize:active { transform: scale(0.95); filter: brightness(1.25); }
.energize:disabled { opacity: 0.6; animation: none; }
@keyframes energize-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,215,140,0.55), 0 0 22px rgba(240,182,79,0.4),
             0 6px 22px rgba(0,0,0,0.55); }
  50% { box-shadow: 0 0 0 1px rgba(255,225,160,0.9), 0 0 44px rgba(240,182,79,0.75),
        0 6px 22px rgba(0,0,0,0.55); } }
@keyframes energize-shimmer {
  0%, 55% { left: -80%; } 90%, 100% { left: 130%; } }