:root{color-scheme:dark;--bg: #070707;--panel: rgba(17, 17, 19, .92);--panel-strong: rgba(28, 28, 31, .98);--gold: #d4ad5d;--gold-soft: #f5d88c;--blue: #76a8ff;--text: #f3efe7;--muted: #b7b0a3;--line: rgba(212, 173, 93, .24);--shadow: 0 28px 90px rgba(0, 0, 0, .55)}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;background:radial-gradient(circle at top,rgba(212,173,93,.14),transparent 32%),linear-gradient(180deg,#0f0d0b,#050505);font-family:Georgia,Times New Roman,serif;color:var(--text)}button{font:inherit}.app-shell{width:100%;height:100%;min-height:100%;display:grid;place-items:center;background:linear-gradient(90deg,#000000c7,#00000029,#000000c7),radial-gradient(circle at 50% 0%,rgba(212,173,93,.18),transparent 36%),#060505}.screen{width:min(100vw,56.25vh);height:min(100vh,177.777vw);padding:clamp(18px,3.2vh,34px);display:flex;align-items:stretch;overflow:hidden;position:relative;border-left:1px solid rgba(245,216,140,.42);border-right:1px solid rgba(245,216,140,.42);background:linear-gradient(180deg,#00000014,#000000d6),radial-gradient(circle at 50% 76%,rgba(212,173,93,.16),transparent 24%),#050505}.screen:before,.screen:after{content:"";position:absolute;top:0;bottom:0;width:3px;background:linear-gradient(180deg,transparent,rgba(245,216,140,.95),transparent);box-shadow:0 0 18px #f5d88c8c;pointer-events:none;z-index:3}.screen:before{left:12px}.screen:after{right:12px}.screen-home{justify-content:center;flex-direction:column;gap:20px}.brand-row{display:flex;justify-content:space-between;align-items:center}.brand{font-size:20px;letter-spacing:.08em;color:var(--gold-soft)}.brand-sub,.eyebrow,.lead,.hat-card p,.qr-copy p{font-family:Arial,Helvetica,sans-serif}.brand-sub,.eyebrow{text-transform:uppercase;letter-spacing:.18em;color:#f5d88ccc;font-size:12px}.hero-card,.panel,.result-shell{width:100%;margin:auto;background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}.hero-card h1{margin:18px 0 12px;font-size:clamp(38px,6vh,58px);line-height:.95;color:var(--gold-soft)}.lead{max-width:58ch;color:var(--muted);font-size:18px;line-height:1.6}.primary-button,.secondary-button,.capture-button,.share-button{border:0;border-radius:999px;padding:16px 28px;cursor:pointer;transition:transform .16s ease,opacity .16s ease,box-shadow .16s ease}.primary-button{background:linear-gradient(135deg,#f3d98b,#b88a2e);color:#0b0b0b;font-weight:700;box-shadow:0 18px 35px #d4ad5d40}.secondary-button{background:#ffffff0a;color:var(--text);border:1px solid rgba(255,255,255,.1)}.capture-button{background:linear-gradient(135deg,#fff,#d4ad5d);color:#070707;font-weight:700}.share-button{background:linear-gradient(135deg,#76a8ff,#4a7ce8);color:#fff;font-weight:700;box-shadow:0 18px 35px #76a8ff40}.primary-button:hover,.secondary-button:hover,.capture-button:hover,.share-button:hover{transform:translateY(-1px)}.primary-button:disabled,.secondary-button:disabled,.capture-button:disabled,.share-button:disabled{cursor:not-allowed;opacity:.5;transform:none}.screen-select{align-items:center}.panel h2,.result-copy h2{margin:8px 0;font-size:clamp(28px,4.5vh,42px);color:var(--gold-soft)}.hat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0 22px}.hat-card{text-align:left;background:#08080acc;border:1px solid rgba(255,255,255,.08);color:var(--text);padding:10px;border-radius:8px;min-height:220px}.hat-card.active{border-color:#f5d88cbf;box-shadow:0 0 0 2px #f5d88c1f inset}.hat-image{width:100%;height:96px;object-fit:contain;display:block;margin-bottom:14px;filter:drop-shadow(0 14px 28px rgba(0,0,0,.45))}.hat-label{display:inline-block;margin-bottom:8px;color:var(--gold);text-transform:uppercase;letter-spacing:.12em;font-size:12px}.actions-row{display:flex;justify-content:space-between;gap:12px;margin-top:14px}.screen-camera{padding:0;background:#050505}.camera-stage{position:relative;width:100%;height:100%;overflow:hidden;border:0}.camera-canvas,.camera-overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.camera-canvas{object-fit:fill}.hidden-video{display:none}.camera-overlay{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,3vh,30px);background:linear-gradient(180deg,rgba(0,0,0,.24),transparent 18%,transparent 72%,rgba(0,0,0,.45)),radial-gradient(circle at center,transparent 20%,rgba(0,0,0,.12) 100%);z-index:2}.camera-topbar,.camera-footer{display:flex;justify-content:space-between;align-items:center}.camera-topbar span{font-family:Arial,Helvetica,sans-serif;font-size:18px;letter-spacing:.12em;text-transform:uppercase}.camera-instructions{max-width:320px;align-self:center;margin-top:auto;margin-bottom:15vh;text-align:center;padding:12px 16px;border-radius:8px;background:linear-gradient(180deg,#00000047,#00000014)}.camera-instructions h3{font-size:clamp(26px,4.8vh,42px);line-height:1.05;color:var(--gold-soft);margin-bottom:8px}.countdown{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:180px;height:180px;border-radius:50%;background:#0000008c;border:2px solid rgba(245,216,140,.8);display:grid;place-items:center;font-size:84px;color:#fff;box-shadow:0 0 50px #d4ad5d38}.camera-footer{position:absolute;left:clamp(18px,3vh,30px);right:clamp(18px,3vh,30px);bottom:clamp(18px,3vh,30px);gap:12px;justify-content:center;z-index:4}.camera-footer .secondary-button,.camera-footer .capture-button{min-width:0;white-space:nowrap}.camera-footer .secondary-button{position:absolute;left:0;padding-inline:18px}.camera-footer .capture-button{padding-inline:22px;min-width:148px}.screen-result{overflow-y:auto;align-items:flex-start;padding-top:clamp(42px,8vh,78px)}.result-shell{display:grid;gap:20px;align-content:start}.result-copy{text-align:center}.result-copy .eyebrow{display:none}.result-copy .lead{margin:0 auto;font-size:18px;color:#fff3db}.result-card{width:min(100%,330px);aspect-ratio:9 / 16;justify-self:center;overflow:hidden;border-radius:8px;border:2px solid rgba(245,216,140,.95);background:#00000059;box-shadow:0 0 0 3px #000000a6,0 0 24px #f5d88c2e}.result-image{width:100%;height:100%;object-fit:cover;display:block}.qr-panel{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:6px}.qr-box{width:132px;height:132px;border-radius:4px;display:grid;place-items:center;background:#fff;border:3px solid rgba(245,216,140,.95);color:#111;font-weight:700;font-size:32px;overflow:visible;padding:6px}.qr-box img{width:100%;height:100%;object-fit:contain;display:block}.qr-copy{min-width:164px;padding:14px 16px;border:1px solid rgba(245,216,140,.72);border-radius:8px;background:linear-gradient(135deg,#000000a3,#d4ad5d29);color:#fff}.qr-copy strong{display:block;margin-bottom:4px;word-break:normal;color:#fff;font-size:15px}.qr-copy p{margin:0;color:#fff0ca;font-size:13px;line-height:1.35}.error{margin-top:12px;color:#ffb4b4;font-family:Arial,Helvetica,sans-serif}@media (max-width: 900px){.screen{padding:clamp(16px,3vh,28px)}.actions-row,.camera-topbar,.qr-panel{flex-direction:column;align-items:stretch}}