/* Bhai Dooj in 3D (storage/gifts/bhai-dooj-3d.html). Theme colours come from bd3-app.js. */
:root{--b3-bg:#14080B;--b3-accent:#F2B84B;--b3-deep:#7A1F2B;--b3-ink:#FFF3DD;--b3-glass:rgba(28,10,12,.62)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--b3-bg);color:var(--b3-ink);font-family:'DM Sans',system-ui,sans-serif;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
#b3Stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
button{font:inherit;color:inherit}

.b3-load{position:fixed;inset:0;display:grid;place-items:center;background:var(--b3-bg);z-index:30;transition:opacity .5s}
.b3-load[hidden]{display:none}
.b3-load-in{text-align:center;opacity:.85}
.b3-load svg{width:54px;height:54px;fill:var(--b3-accent);animation:b3flick 1.2s ease-in-out infinite}
.b3-load p{margin:10px 0 0;font-size:14px;letter-spacing:.04em}
@keyframes b3flick{50%{transform:scale(1.06) translateY(-2px);opacity:.75}}

.b3-gate{position:fixed;inset:0;z-index:25;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center;background:radial-gradient(120% 80% at 50% 70%,rgba(242,184,75,.16),transparent 60%),linear-gradient(180deg,rgba(20,8,11,.35),rgba(20,8,11,.82));transition:opacity .6s,transform .6s}
.b3-gate[hidden]{display:none}
.b3-gate.is-gone{opacity:0;transform:scale(1.04);pointer-events:none}
.b3-gate-tag{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--b3-accent);border:1px solid color-mix(in srgb,var(--b3-accent) 50%,transparent);padding:6px 12px;border-radius:99px}
.b3-gate small{margin-top:14px;font-size:15px;opacity:.8}
.b3-gate h1{margin:0;font:600 clamp(40px,11vw,76px)/1.02 'Playfair Display',serif;font-style:italic;text-shadow:0 0 30px rgba(242,184,75,.35)}
.b3-gate p{margin:4px 0 18px;font:600 24px 'Caveat',cursive;color:var(--b3-accent)}
.b3-gate button{border:0;border-radius:99px;padding:15px 28px;font-weight:700;font-size:16px;background:linear-gradient(180deg,#FFD884,var(--b3-accent));color:#3A1408;box-shadow:0 10px 30px rgba(242,184,75,.35),inset 0 -2px 0 rgba(0,0,0,.15);cursor:pointer;animation:b3pulse 2.2s ease-in-out infinite}
.b3-gate em{font-size:12px;opacity:.6;margin-top:10px;font-style:normal}
@keyframes b3pulse{50%{box-shadow:0 10px 44px rgba(242,184,75,.6),inset 0 -2px 0 rgba(0,0,0,.15)}}

.b3-top{position:fixed;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;display:flex;align-items:center;gap:8px;z-index:10;pointer-events:none}
.b3-top>*{pointer-events:auto}
.b3-dots{flex:1;display:flex;gap:5px;align-items:center;pointer-events:none}
.b3-dots i{flex:1;max-width:34px;height:3px;border-radius:3px;background:rgba(255,243,221,.22);transition:background .4s}
.b3-dots i.on{background:var(--b3-accent)}
.b3-ic{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,243,221,.18);background:var(--b3-glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;cursor:pointer;padding:0}
.b3-ic svg{width:19px;height:19px;fill:currentColor}
.b3-ic.is-off{opacity:.5}

.b3-card{position:fixed;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(440px,calc(100% - 24px));z-index:10;padding:16px 16px 14px;border-radius:22px;background:var(--b3-glass);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,243,221,.14);box-shadow:0 18px 50px rgba(0,0,0,.35);text-align:center;transition:opacity .35s,transform .35s}
.b3-card.is-swap{opacity:0;transform:translateX(-50%) translateY(8px)}
.b3-card[hidden]{display:none}
.b3-card small{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--b3-accent);margin-bottom:4px}
.b3-card h2{margin:0;font:600 23px/1.18 'Playfair Display',serif}
.b3-card p{margin:7px 0 0;font-size:14.5px;line-height:1.5;opacity:.9;white-space:pre-line;max-height:32vh;overflow:auto}
.b3-card p:empty{display:none}
.b3-row{display:flex;gap:8px;margin-top:13px}
.b3-back{flex:none;width:46px;border-radius:14px;border:1px solid rgba(255,243,221,.18);background:transparent;display:grid;place-items:center;cursor:pointer}
.b3-back svg{width:18px;height:18px;fill:currentColor}
.b3-back[hidden]{display:none}
.b3-act{flex:1;border:0;border-radius:14px;padding:13px 16px;font-weight:700;font-size:15.5px;cursor:pointer;background:linear-gradient(180deg,#FFD884,var(--b3-accent));color:#3A1408;box-shadow:0 8px 22px rgba(242,184,75,.28)}
.b3-act.is-next{background:rgba(255,243,221,.12);color:var(--b3-ink);box-shadow:none;border:1px solid rgba(255,243,221,.22)}
.b3-act:disabled{opacity:.55}
.b3-hint{position:fixed;left:0;right:0;top:calc(max(12px,env(safe-area-inset-top)) + 54px);text-align:center;margin:0;font-size:12.5px;opacity:0;transition:opacity .5s;z-index:9;pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.b3-hint.on{opacity:.85}

.b3-view{position:fixed;inset:0;z-index:20;background:rgba(10,4,6,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 18px 30px;gap:14px}
.b3-view[hidden]{display:none}
.b3-view figure{margin:0;background:#FBF6EC;padding:12px 12px 16px;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.5);max-width:min(92vw,520px);transform:rotate(-1.2deg)}
.b3-view img{display:block;max-width:100%;max-height:62vh;object-fit:contain}
.b3-view figcaption{font:600 26px 'Caveat',cursive;color:#5A2A1C;text-align:center;margin-top:8px}
.b3-view figcaption:empty{display:none}
.b3-view-x{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px}
.b3-view-n{display:flex;align-items:center;gap:16px}
.b3-view-n em{font-style:normal;font-size:13px;opacity:.7}

.b3-letter{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(10,4,6,.72)}
.b3-letter[hidden]{display:none}
.b3-paper{width:min(520px,100%);max-height:calc(100% - 20px);overflow:auto;padding:30px 24px 22px;border-radius:6px;color:#4A2416;background:radial-gradient(120% 90% at 50% 0%,#FFF8E8,#F3E2C0);box-shadow:0 30px 80px rgba(0,0,0,.5),inset 0 0 0 1px rgba(122,31,43,.12),inset 0 0 60px rgba(160,100,40,.18);animation:b3unroll .7s cubic-bezier(.2,.8,.2,1)}
@keyframes b3unroll{from{transform:scaleY(.08);opacity:.3}}
.b3-letter-to{font:600 30px 'Caveat',cursive;margin:0 0 10px;color:var(--b3-deep)}
.b3-letter-body{font:500 16.5px/1.65 'DM Sans',sans-serif;white-space:pre-line;margin:0}
.b3-letter-from{font:600 28px 'Caveat',cursive;text-align:right;margin:16px 0 0;color:var(--b3-deep)}
.b3-paper button{display:block;margin:20px auto 0;border:0;border-radius:99px;padding:11px 22px;font-weight:700;background:var(--b3-deep);color:#FFF3DD;cursor:pointer}

.b3-flat{position:fixed;inset:0;overflow:auto;padding:30px 18px 60px;text-align:center}
.b3-flat h1{font:600 34px 'Playfair Display',serif;font-style:italic}
.b3-flat img{width:min(420px,100%);border-radius:8px;margin:10px auto;display:block}
.b3-flat p{max-width:520px;margin:12px auto;line-height:1.6;white-space:pre-line}

@media (min-width:900px){
    .b3-card{left:auto;right:28px;bottom:28px;transform:none;width:400px;text-align:left}
    .b3-card.is-swap{transform:translateY(8px)}
    .b3-top{left:28px;right:28px;top:22px}
    .b3-dots{max-width:360px}
}