:root{--bk:#0b1026;--gold:#d4af37;--parch:#e8d5a3;--cream:#fbf3e4;--vio:#6b4fa0;--coral:#ff7f61}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 50% -20%,#3a2a6b,var(--bk) 60%);color:var(--cream);font-family:Georgia,serif;min-height:100vh}
header{display:flex;gap:10px;align-items:center;padding:14px 18px;color:var(--gold);font-size:20px}header select{margin-left:auto;background:#111;color:var(--gold);border:1px solid var(--gold);border-radius:8px}
main{max-width:620px;margin:auto;padding:16px}footer{text-align:center;padding:30px;font-size:13px}a{color:var(--gold)}
.card{background:#14121cdd;border:1px solid #d4af3755;border-radius:16px;padding:18px;margin-bottom:14px}
input,textarea,select.f{width:100%;padding:12px;margin:6px 0 12px;background:#0d0c14;color:var(--cream);border:1px solid #444;border-radius:10px;font:inherit}textarea{min-height:160px}
button{background:linear-gradient(#e6c55a,var(--gold));color:#1a1405;border:0;border-radius:12px;padding:13px 18px;font:bold 16px Georgia;width:100%;margin:6px 0;cursor:pointer}button.sec{background:#1d1a28;color:var(--gold);border:1px solid var(--gold)}
.row{display:flex;gap:8px}.row>*{flex:1}.price{font-size:28px;color:var(--gold)}.code{font:22px monospace;letter-spacing:2px;color:var(--gold);word-break:break-all;background:#000;padding:12px;border-radius:10px}
.count{font-size:40px;text-align:center;color:var(--gold)}.muted{opacity:.7;font-size:14px}
/* ceremony */
.stage{position:relative;height:440px;perspective:900px;display:flex;justify-content:center;align-items:flex-end}
.env{position:absolute;bottom:20px;width:300px;height:190px;background:#c9a54a;border-radius:6px;box-shadow:0 20px 50px #000}
.flap{position:absolute;top:0;left:0;width:0;height:0;border-left:150px solid transparent;border-right:150px solid transparent;border-top:110px solid #b38f35;transform-origin:top;transition:transform 2.5s ease;z-index:3}
.open .flap{transform:rotateX(180deg);z-index:0}
.seal{position:absolute;left:125px;top:85px;width:50px;height:50px;border-radius:50%;background:#7a1f2b;z-index:4;transition:opacity 1s}.open .seal{opacity:0}
.scroll{position:absolute;bottom:60px;width:270px;background:var(--parch);color:#3b2a10;border-radius:6px;max-height:0;overflow:hidden;transition:max-height 4s ease 2.5s,bottom 2s ease 2.5s;z-index:2;padding:0 18px;box-shadow:0 0 30px #d4af3788}
.open .scroll{max-height:380px;bottom:120px}
.tele{height:330px;overflow:hidden;font-size:19px;line-height:1.6;padding:16px 0}.tele span{opacity:0;transition:opacity .4s}.tele span.on{opacity:1}
.cinema{position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:20;flex-direction:column}
.cinema .n{font:160px monospace;color:#eee;border:6px solid #eee;border-radius:50%;width:240px;height:240px;display:flex;align-items:center;justify-content:center;animation:spin 1s linear infinite}
@keyframes spin{from{box-shadow:inset 0 0 0 0 #777}to{box-shadow:inset 0 0 0 120px #7770}}
.rec{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#c00;color:#fff;padding:6px 12px;border-radius:20px;font:13px sans-serif;z-index:30;animation:bl 1s infinite}@keyframes bl{50%{opacity:.5}}
#msg{background:repeating-linear-gradient(#fbf3e4 0 31px,#d9c79b 32px);color:#3b2a10;font-family:'Segoe Script','Brush Script MT',cursive;font-size:18px;line-height:32px}
.card{background:#141a3add}