*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--orange: #f97316;--orange-dark: #ea6b0a;--bg: #fafaf8;--card-bg: #ffffff;--border: #e7e5e4;--text: #1c1917;--muted: #a8a29e}body{background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;padding:0 16px 48px;max-width:480px;margin:0 auto;-webkit-font-smoothing:antialiased}.header{text-align:center;padding:32px 0 8px}.title{font-size:24px;font-weight:800;color:var(--text);letter-spacing:-.5px}.subtitle{font-size:14px;color:var(--muted);margin-top:6px}.clips-list{display:flex;flex-direction:column;gap:10px;margin-top:24px}.clip-card{background:#2a2a2a;background-image:linear-gradient(to bottom,#303030,#1e1e1e);border:1px solid #111;border-radius:8px;padding:14px 16px;display:flex;align-items:center;gap:16px;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:0 4px 12px #00000026,inset 0 1px 1px #ffffff14;transition:transform .1s ease}.clip-card:active{transform:scale(.98)}.play-btn{width:52px;height:48px;border-radius:4px;background:linear-gradient(155deg,#ff8c30,#f07018 28%,#d45c0a 62%,#b84808);color:#fff;border:1px solid #8c3605;border-top-color:#ffb585;border-left-color:#ec7c27;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px;pointer-events:none;box-shadow:0 6px #732a02,0 7px 5px #0000004d,inset 0 1px 2px #ffffff4d;text-shadow:0 -1px 0 rgba(0,0,0,.4);position:relative;transform:translateY(-3px);transition:transform .05s ease,box-shadow .05s ease,background .05s ease}.clip-card:active .play-btn,.clip-card.playing .play-btn{transform:translateY(3px);box-shadow:0 0 #732a02,0 1px 2px #0006,inset 0 2px 4px #0000004d;background:linear-gradient(155deg,#f07018,#d45c0a 40%,#a83b00);border-top-color:#d45c0a}.clip-info{flex:1;min-width:0;background:#0a0a0a;background:linear-gradient(to bottom,#050505,#141414);padding:10px 14px;border-radius:6px;border:1px solid #000;box-shadow:inset 0 2px 8px #0009,0 1px #ffffff14;position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:64px}.clip-info:before{content:"";position:absolute;top:14px;right:14px;width:8px;height:8px;border-radius:50%;background:#1a1a1a;box-shadow:inset 0 1px 2px #000,0 1px #ffffff0d;transition:all .2s ease}.clip-card.playing .clip-info:before{background:#f40;box-shadow:inset 0 1px 2px #fff6,0 0 6px #f40,0 0 12px #f409}.clip-number{font-size:15px;font-weight:700;font-family:Courier New,monospace;color:#f0f0f0;text-transform:uppercase;letter-spacing:.5px;line-height:1.2}.clip-game{font-size:13px;font-weight:700;color:#ff9142;text-shadow:0 0 4px rgba(255,145,66,.3);line-height:1.2;opacity:0;transition:opacity .5s ease;margin-top:4px;min-height:16px}.clip-game.revealed{opacity:1}.clip-hint{font-size:11px;font-family:Courier New,monospace;color:#777;margin-top:4px;text-transform:uppercase;letter-spacing:.5px}.padlock-wrap{display:flex;flex-direction:column;align-items:center;padding:8px 0 20px}.shackle-outer{width:100px;height:70px;flex-shrink:0}.shackle-svg{width:100%;height:100%;overflow:visible}#shackleG{transform-origin:65px 90px;transition:transform .55s cubic-bezier(.34,1.56,.64,1)}#shackleG.open{transform:rotate(-38deg) translate(-18px) translateY(-10px)}.lock-body{border-radius:24px;padding:16px 18px 18px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 32% 22%,rgba(255,255,255,.28) 0%,transparent 52%),linear-gradient(155deg,#ff8c30,#f07018 28%,#d45c0a 62%,#b84808);box-shadow:0 20px 44px #b4460052,0 4px 10px #0003}.lock-casing-overlay{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;z-index:20;box-shadow:inset 0 1px #ffffff6b,inset 0 -5px #0003,inset -3px 0 #0000001a,inset 3px 0 #ffffff1a}.lock-body:before{content:"";position:absolute;top:0;left:0;right:0;height:52%;border-radius:24px 24px 50% 50%;background:linear-gradient(to bottom,rgba(255,255,255,.3) 0%,rgba(255,255,255,.1) 50%,transparent 100%);pointer-events:none;z-index:10}.lock-body:after{content:"";position:absolute;top:15%;left:4px;width:4px;height:50%;background:linear-gradient(to bottom,transparent,rgba(255,230,120,.55) 25%,rgba(160,210,255,.45) 50%,rgba(200,150,255,.4) 75%,transparent);border-radius:3px;filter:blur(1.5px);z-index:11;pointer-events:none}.wheels-row{display:flex;gap:0;justify-content:center;position:relative;z-index:5;background:linear-gradient(to bottom,#00000070,#0000004d);border-radius:12px;overflow:hidden;padding:0 6px;box-shadow:inset 0 3px 10px #0000008c,inset 0 -1px #ffffff12,0 1px #ffffff1a}.wheel-sep{width:.5px;align-self:stretch;margin:8px 0;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.14),transparent);flex-shrink:0}.wheel{width:44px;height:108px;position:relative;overflow:hidden;cursor:ns-resize;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.wheel-strip{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:0;will-change:transform}.wheel-digit{height:44px;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:700;font-family:Courier New,monospace;color:#fff;flex-shrink:0;letter-spacing:-1px}.wheel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to bottom,rgba(0,0,0,.82) 0%,rgba(0,0,0,.28) 24%,transparent 40%,transparent 60%,rgba(0,0,0,.28) 76%,rgba(0,0,0,.82) 100%);z-index:2;pointer-events:none}.wheel:after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px;background:linear-gradient(to bottom,#ffffff0f,#ffffff05);border-top:.5px solid rgba(255,255,255,.28);border-bottom:.5px solid rgba(255,255,255,.28);z-index:3;pointer-events:none}.wheel-gloss{position:absolute;left:3px;top:20%;bottom:20%;width:5px;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.2),transparent);border-radius:3px;z-index:4;pointer-events:none}.padlock-hint{font-size:11px;color:#d2823cbf;margin-top:10px;text-align:center;letter-spacing:.3px}.loading,.error{text-align:center;padding:48px 0;font-size:14px}.loading{color:var(--muted)}.error{color:#dc2626}