/*─────────────────────────────────────────────────────────────── bg3.css — Lyrae site, BG3-themed page (refactor) Scope: only affects Note: all scenes share .bg3-scene styles (no per-ID CSS needed) ───────────────────────────────────────────────────────────────*/ /* ===== Fonts ===== */ @import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap"); /* ===================== TOKENS ===================== */ .bg3-page{ --moss:#0a1b18; --moss-2:#1b2a27; --violet:#5e5260; --violet-2:#3f3542; --gold:#e0c97a; --gold-soft:#d9c282; --cream:#f6f1e7; --ink:#0c0f12; --glass:rgba(20,26,26,.72); --glass-2:rgba(24,30,32,.86); --edge:rgba(224,201,122,.18); --edge-strong:rgba(224,201,122,.28); --ring:12px; --card-r:16px; --pad:1.25rem; --gap:18px; --maxw:1000px; /* dialogue & dice accents */ --dlg-bg:rgba(18,20,22,.86); --dlg-edge:rgba(224,201,122,.22); --dlg-acc:rgba(224,201,122,.35); --dlg-focus:rgba(224,201,122,.55); --success:#7ad47a; --fail:#ff7777; --dur:.18s; } /* Night flavor (cooler) */ .bg3-page.night{ --glass:rgba(10,14,18,.70); --glass-2:rgba(10,14,18,.88); --dlg-bg:rgba(8,10,14,.92); --edge:rgba(174,160,110,.18); --edge-strong:rgba(174,160,110,.28); --dlg-edge:rgba(174,160,110,.22); --dlg-acc:rgba(174,160,110,.32); --dlg-focus:rgba(191,175,122,.58); } /* ===================== BASE / RESET ===================== */ .bg3-page, .bg3-page *{ box-sizing:border-box; } .bg3-page{ margin:0; color:var(--cream); background:#0b0d12 url("/images/fandom/bg3_bg.webp") center/cover fixed no-repeat; } .bg3-page a{ color:var(--gold); text-decoration:none; } .bg3-page a:hover{ color:#bfa7e4; } .bg3-page img{ max-width:100%; display:block; } /* subtle vignette */ .bg3-page::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(1400px 800px at 50% 0%, rgba(255,247,220,.15), transparent 60%), radial-gradient(1400px 800px at 60% 90%, rgba(60,40,20,.22), transparent 70%); mix-blend-mode:soft-light; } /* Content shell */ .bg3-page main.page{ width:min(var(--maxw),92vw); margin:clamp(16px,4vh,40px) auto 64px; position:relative; z-index:1; } .bg3-page .prose p{ margin:.35rem 0 .8rem; } .bg3-page .prose ul{ margin:.35rem 0 .9rem 1rem; } .bg3-page .prose .dash{ list-style:none; padding-left:0; } .bg3-page .prose .dash li::before{ content:"— "; color:var(--gold); } /* Headings — ember glow */ @keyframes emberGlow{ 0%,100%{ text-shadow:0 0 2px rgba(224,201,122,.5),0 0 6px rgba(224,201,122,.35) } 50%{ text-shadow:0 0 4px rgba(224,201,122,.8),0 0 12px rgba(224,201,122,.45) } } .bg3-page .hero h1{ font-family:"EB Garamond","Georgia",serif; text-align:center; font-size:clamp(34px,6.5vw,64px); margin:0 0 .6rem; color:var(--cream); animation:emberGlow 3s ease-in-out infinite alternate; } .bg3-page .tagline{ font-family:"Tagesschrift",system-ui; color:var(--gold); font-size:1.15rem; } /* Chips */ .bg3-page .chips{ list-style:none; display:flex; gap:10px; flex-wrap:wrap; margin:.6rem 0 0; padding:0; } .bg3-page .chips li{ font-family:"Tagesschrift",system-ui; color:var(--cream); background:linear-gradient(180deg, rgba(224,201,122,.15), rgba(224,201,122,.08)); border:1px solid var(--edge-strong); border-radius:10px; padding:.24rem .6rem; box-shadow:0 6px 20px #0005, inset 0 1px 0 rgba(255,255,255,.05); } /* ===================== NAV ===================== */ .bg3-page .bg3-nav{ width:min(var(--maxw),92vw); margin:clamp(10px,3vh,24px) auto 10px; display:inline-flex; gap:14px; flex-wrap:wrap; justify-content:center; text-align:center; padding:10px 16px; border-radius:999px; } .bg3-page .bg3-nav a{ padding:.34rem .7rem; border-radius:8px; position:relative; font-family:"Tagesschrift",system-ui; letter-spacing:.02em; } .bg3-page .bg3-nav a + a::before{ content:""; position:absolute; left:-9px; top:50%; transform:translateY(-50%); width:6px; height:6px; border-radius:50%; background:radial-gradient(circle, rgba(224,201,122,.9), rgba(224,201,122,0) 70%); filter:drop-shadow(0 0 6px rgba(224,201,122,.35)); } .bg3-page .bg3-nav a:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; box-shadow:0 0 0 3px rgba(224,201,122,.25); } /* ===================== CARDS ===================== */ .bg3-page .card{ position:relative; overflow:hidden; background:linear-gradient(180deg, var(--glass), var(--glass-2)); border:1px solid var(--edge); border-radius:var(--card-r); padding:var(--pad); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 60px rgba(0,0,0,.55); backdrop-filter:blur(4px) saturate(110%); margin-bottom:1.2rem; } .bg3-page .card::before{ content:""; position:absolute; inset:10px; border-radius:calc(var(--card-r) - 8px); background: linear-gradient(rgba(224,201,122,.20) 1px, transparent 1px) 0 0/26px 26px, linear-gradient(90deg, rgba(224,201,122,.20) 1px, transparent 1px) 0 0/26px 26px; mix-blend-mode:soft-light; opacity:.16; pointer-events:none; } .bg3-page .card h2{ font-family:"EB Garamond","Georgia",serif; margin:.1rem 0 .5rem; color:var(--cream); text-shadow:0 0 10px rgba(224,201,122,.25); } .bg3-page .card h3{ font-family:"EB Garamond","Georgia",serif; margin:1rem 0 .3rem; color:#e9dcc5; } .bg3-page .hud-corners{ position:relative; } .bg3-page .hud-corners::after{ content:""; position:absolute; inset:6px; pointer-events:none; border-radius:12px; border:1px dashed rgba(224,201,122,.25); } /* Grid helper */ .bg3-page .grid.auto{ list-style:none; padding:0; margin:.4rem 0 0; display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); } .bg3-page .grid.auto li{ background:linear-gradient(180deg, rgba(224,201,122,.10), rgba(224,201,122,.06)); border:1px solid var(--edge); border-radius:12px; padding:.75rem .9rem; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); } .bg3-page .small{ font-size:.95rem; opacity:.95; } /* ===================== BG3 DIALOGUE BAR (HUD) ===================== */ #bg3-ui{ position:fixed; left:0; right:0; bottom:0; z-index:5; pointer-events:none; display:none; } #bg3-ui.show{ display:block; animation:bg3-pop .16s ease-out; } @keyframes bg3-pop{ from{ transform:translateY(6px); opacity:.6 } to{ transform:none; opacity:1 } } .bg3-page .bg3-dialogue{ width:min(1100px,96vw); margin:0 auto 12px; background:linear-gradient(180deg, rgba(255,255,255,.02), transparent), linear-gradient(180deg, var(--dlg-bg), rgba(0,0,0,.9)); border:1px solid var(--dlg-edge); border-radius:16px; box-shadow:0 24px 80px #0009, 0 0 18px rgba(224,201,122,.12), inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(6px) saturate(110%); padding:10px 12px 12px; display:grid; grid-template-columns:68px 1fr; gap:12px; pointer-events:auto; } .bg3-dialogue[hidden]{ display:none !important; } .bg3-page .bg3-dialogue .portrait{ width:64px; height:64px; border-radius:10px; overflow:hidden; margin:2px 0 0; border:1px solid var(--dlg-acc); box-shadow:0 6px 18px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.04); } .bg3-page .bg3-dialogue .portrait img{ width:100%; height:100%; object-fit:cover; } .bg3-page .bg3-dialogue .line{ align-self:center; } .bg3-page .bg3-dialogue .speaker{ font-family:"Tagesschrift",system-ui; letter-spacing:.06em; color:var(--gold); font-size:.95rem; opacity:.95; margin-bottom:2px; } .bg3-page .bg3-dialogue .subtitle{ font-family:"EB Garamond","Georgia",serif; font-size:clamp(16px,2.2vw,20px); line-height:1.4; text-align: center; } .bg3-page .bg3-dialogue .choices{ grid-column:1 / -1; list-style:none; margin:6px 0 0; padding:0; counter-reset:choice; } .bg3-page .bg3-dialogue .choices li{ margin:6px 0; } .bg3-page .choice{ width:100%; text-align:left; cursor:pointer; background:linear-gradient(180deg, rgba(224,201,122,.10), rgba(224,201,122,.06)); border:1px solid var(--dlg-acc); border-radius:12px; padding:.55rem .75rem .55rem 2.1rem; color:var(--cream); font-family:"EB Garamond","Georgia",serif; font-size:clamp(16px,2.4vw,19px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); position:relative; transition:transform var(--dur) ease, box-shadow var(--dur) ease, border-color var(--dur) ease; } .bg3-page .choice::before{ counter-increment:choice; content:counter(choice) "."; position:absolute; left:.7rem; top:50%; transform:translateY(-50%); font-family:"Tagesschrift",system-ui; color:var(--gold); opacity:.95; } .bg3-page .choice:hover{ transform:translateY(-1px); border-color:var(--dlg-focus); box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 12px rgba(224,201,122,.18); } .bg3-page .choice:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; box-shadow:0 0 0 3px rgba(224,201,122,.25); } /* ===================== TOASTS ===================== */ .bg3-page .toast-stack{ position:fixed; right:16px; top:16px; z-index:6; display:grid; gap:10px; pointer-events:none; } .bg3-page .bg3-toast{ display:flex; align-items:center; gap:.5rem; pointer-events:auto; background:linear-gradient(180deg, var(--dlg-bg), rgba(0,0,0,.9)); color:var(--cream); border:1px solid var(--dlg-edge); border-radius:12px; padding:.4rem .6rem; transform:translateY(-8px); opacity:0; transition:opacity .2s ease, transform .2s ease; box-shadow:0 10px 26px rgba(0,0,0,.45); } .bg3-page .bg3-toast.on{ transform:none; opacity:1; } .bg3-page .bg3-toast .icon{ width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 8px rgba(224,201,122,.6); } .bg3-page .bg3-toast.approve .icon{ background:var(--success); box-shadow:0 0 8px rgba(122,212,122,.7); } .bg3-page .bg3-toast.disapprove .icon{ background:var(--fail); box-shadow:0 0 8px rgba(255,119,119,.7); } /* ===================== ACCESSIBILITY + misc ===================== */ .bg3-page h2 .talk-link{ appearance:none; border:0; background:transparent; cursor:pointer; font:inherit; color:inherit; padding:0; margin:0; text-align:left; line-height:1.1; } .bg3-page h2 .talk-link:hover, .bg3-page h2 .talk-link:focus-visible{ text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:.08em; text-underline-offset:.14em; } .bg3-page h2 .talk-link:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:6px; } .bg3-page h2{ display:inline-block; } /* Party grid responsiveness */ #party .grid.auto{ grid-template-columns:repeat(3, minmax(260px, 1fr)); gap:var(--gap); } @media (max-width:1200px){ #party .grid.auto{ grid-template-columns:repeat(2, minmax(280px, 1fr)); } } @media (max-width:720px){ #party .grid.auto{ grid-template-columns:1fr; } } /* ===================== DICE MODAL (image-chrome version) ===================== */ #dice{ display:none !important; } /* hide the legacy modal */ .bg3-dice-modal{ border:0; padding:0; width:min(560px,92vw); max-width:640px; position:relative; overflow:hidden; background:transparent; } .bg3-dice-modal::backdrop{ background:radial-gradient(1200px 800px at 50% 30%, rgba(0,0,0,.65), rgba(0,0,0,.82)); } .bg3-dice-modal .panel{ position:relative; z-index:2; display:grid; grid-template-rows:auto auto 1fr auto auto; row-gap:8px; --pad-top:16%; --pad-x:10%; --pad-btm:14%; padding:var(--pad-top) var(--pad-x) var(--pad-btm); } .bg3-dice-modal .title{ position:relative; height:210px; text-align:center; color:#fff1e1; font-family:"EB Garamond","Georgia",serif; text-shadow:0 2px 0 #000, 0 0 24px rgba(255,240,200,.18); } .bg3-dice-modal .title h2{ position:absolute; left:50%; transform:translateX(-50%); top:18px; margin:0; font-weight:700; font-size:clamp(36px,6vw,64px); line-height:1; } .bg3-dice-modal .title .dc-label{ position:absolute; left:50%; transform:translateX(-50%); top:92px; font:600 12px/1.05 "Cinzel",serif; letter-spacing:.14em; color:#e9d8b7; opacity:.95; filter:drop-shadow(0 1px 0 #000); } .bg3-dice-modal .title .dc-value{ position:absolute; left:50%; transform:translateX(-50%); top:126px; font:700 clamp(34px,5.2vw,52px)/1 "Cinzel",serif; color:#fff7ea; text-shadow:0 1px 0 #000, 0 0 14px rgba(255,235,190,.25); } .bg3-dice-modal .rails{ display:none; } .bg3-dice-modal .dice-zone{ position:relative; display:grid; place-items:center; gap:10px; margin:6px 0 12px; padding:.25rem 0 .5rem; border-radius:0; background:transparent !important; box-shadow:none !important; border:0 !important; } .bg3-dice-modal .dice-zone::before{ content:""; position:absolute; inset:0; width:190px; height:190px; margin:auto; border-radius:50%; background:radial-gradient(60% 60% at 50% 45%, rgba(255,255,255,.08), rgba(0,0,0,0) 70%); filter:blur(1px); pointer-events:none; z-index:0; } .bg3-dice-modal .d20{ appearance:none; border:0; background:none; cursor:pointer; width:128px; height:128px; display:grid; place-items:center; position:relative; z-index:1; } .bg3-dice-modal .d20 .sprite{ --x:0%; --y:0%; width:120px; height:120px; display:block; border-radius:10px; background-image:url("/images/d20.webp"); background-size:500% 400%; background-position:var(--x) var(--y); filter:drop-shadow(0 10px 20px rgba(0,0,0,.55)); transition:transform .2s ease; will-change:background-position, transform; } .bg3-dice-modal .d20:active .sprite{ transform:scale(.96); } .bg3-dice-modal .d20.rolling .sprite{ animation:d20-spin 900ms cubic-bezier(.2,.6,.2,1) infinite; } @keyframes d20-spin{ 0%{ transform:rotate(0) scale(1) } 50%{ transform:rotate(180deg) scale(1.08) } 100%{ transform:rotate(360deg) scale(1) } } #bg3-skillcheck .d20.flaring::after{ content:""; position:absolute; inset:-8px; border-radius:14px; pointer-events:none; background:radial-gradient(180px 140px at 50% 50%, rgba(235,210,140,.55), rgba(235,210,140,.25) 35%, rgba(235,210,140,0) 70%); filter:blur(2px) drop-shadow(0 0 10px rgba(235,210,140,.55)); animation:bg3-flare 480ms ease-out forwards; } @keyframes bg3-flare{ 0%{opacity:0; transform:scale(.92)} 20%{opacity:1; transform:scale(1.02)} 60%{opacity:.65} 100%{opacity:0; transform:scale(1.06)} } #bg3-skillcheck .d20.shake .sprite{ animation:bg3-shake .3s ease; } @keyframes bg3-shake{ 0%{transform:translateX(0) rotate(0)} 25%{transform:translateX(-2px) rotate(-1deg)} 50%{transform:translateX(2px) rotate(1deg)} 75%{transform:translateX(-1px) rotate(-.5deg)} 100%{transform:translateX(0) rotate(0)} } .bg3-dice-modal .cta{ font-family:"Tagesschrift",system-ui; color:#f9eccc; background:linear-gradient(180deg, rgba(217,191,122,.4), rgba(217,191,122,.18)); border:1px solid rgba(217,191,122,.6); border-radius:10px; padding:.35rem .7rem; box-shadow:0 0 18px rgba(217,191,122,.18), inset 0 1px 0 rgba(255,255,255,.35); } /* Optional legacy controls/result/close */ .bg3-dice-modal .controls{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; align-content:start; padding:0 18px; } .bg3-dice-modal .controls label{ display:grid; gap:6px; color:#fff1e1; font-family:"EB Garamond","Georgia",serif; font-weight:700; } .bg3-dice-modal input[type="number"], .bg3-dice-modal input[type="text"]{ background:rgba(0,0,0,.35); color:#f6f1e7; border:1px solid rgba(217,191,122,.5); border-radius:10px; padding:.5rem .6rem; font-family:inherit; } .bg3-dice-modal .adv{ grid-column:1 / -1; display:flex; gap:16px; align-items:center; padding-top:6px; color:#f6f1e7; border-top:1px solid rgba(217,191,122,.25); } .bg3-dice-modal .result{ margin:10px 18px 0; border-radius:12px; padding:.6rem .8rem; text-align:center; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.2)); border:1px solid rgba(217,191,122,.45); color:#fff1e1; font-family:"EB Garamond","Georgia",serif; font-weight:700; } .bg3-dice-modal .result.success{ border-color:#74d274; color:#e8ffe8; } .bg3-dice-modal .result.fail{ border-color:#ff7a7a; color:#ffe3e3; } .bg3-dice-modal .actions{ display:flex; justify-content:flex-end; padding:10px 18px 16px; } .bg3-dice-modal .close{ appearance:none; border:1px solid rgba(217,191,122,.6); background:transparent; color:#f6f1e7; border-radius:10px; padding:.4rem .7rem; cursor:pointer; font-family:"Tagesschrift",system-ui; } /* Dice chrome (under/overlays) */ .bg3-dice-modal .chrome-img{ position:absolute; inset:0; z-index:0; pointer-events:none; } .bg3-dice-modal .chrome-img::before{ content:""; position:absolute; inset:0; background: url("/images/frame_better.webp") center / contain no-repeat; mix-blend-mode: multiply; filter: drop-shadow(0 26px 80px rgba(0,0,0,.55)); opacity:.5; } .bg3-dice-modal .chrome-img::after{ content:""; position:absolute; inset:0; background: url("/images/frame.webp") center / contain no-repeat; filter: drop-shadow(0 26px 80px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(215,184,115,.28)); } /* ========== FULLSCREEN BG3 DIALOGUE SCENES (generic) ========== */ .bg3-scene{ position: fixed; inset: 0; width: 100vw; height: 100dvh; min-height:100vh; margin: 0; padding: 0; border: 0; background: transparent; max-width: none; overflow: clip; z-index: 1000; } .bg3-scene::backdrop{ background: radial-gradient(1400px 800px at 50% 30%, rgba(0,0,0,.45), rgba(0,0,0,.85)); } .bg3-scene .scene{ position:absolute; inset:0; display:grid; grid-template-rows:1fr auto; align-content:end; } /* Background image layer */ .bg3-scene .scene-bg{ position:absolute; inset:0; background: center / cover no-repeat; filter:saturate(105%) contrast(102%); box-shadow: inset 0 0 400px rgba(0,0,0,.55); z-index:0; } /* NPC */ .bg3-scene .npc{ position:absolute; bottom: env(safe-area-inset-bottom, 0); right:6%; z-index:1; height:80vh; max-width:48vw; object-fit:contain; pointer-events:none; filter: drop-shadow(0 22px 60px rgba(0,0,0,.55)) saturate(.94) contrast(.98) brightness(.86) sepia(.06) hue-rotate(-8deg); -webkit-mask-image: linear-gradient(to bottom, #000 92%, transparent 100%); mask-image: linear-gradient(to bottom, #000 92%, transparent 100%); opacity:.98; isolation:isolate; } .bg3-scene .npc::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(60% 45% at 78% 18%, rgba(255,220,150,.10), transparent 65%), linear-gradient(to bottom, transparent 70%, rgba(0,0,0,.30)); mix-blend-mode:soft-light; } /* Dialogue rail */ .bg3-scene .dlg{ grid-row:2; width:min(1100px,96vw); margin:0 auto env(safe-area-inset-bottom,0); padding:18px 22px 22px; background: linear-gradient(180deg, rgba(10,12,14,0), rgba(0,0,0,0)); border: 0 solid rgba(255,255,255,.06); box-shadow: 0 0 0 rgba(0,0,0,0); backdrop-filter: blur(0px); z-index: 2; /* higher than .npc's 1 */ } /* Line + choices (game-like) */ .bg3-scene .subtitle{ margin:0 0 .4rem; text-align:center; font-family:"EB Garamond","Georgia",serif; font-size:clamp(18px,2.2vw,22px); line-height:1.35; color:#fff; text-shadow:0 1px 0 #000, 0 0 2px #000, 0 0 4px #000; } .bg3-scene .choices{ list-style:none; margin:6px 0 0; padding:0; counter-reset:choice; } .bg3-scene .choices li{ margin:.28rem 0; } .bg3-scene .choice{ appearance:none; border:0; background:transparent; padding:.24rem 0 .24rem 2rem; width:100%; text-align:left; cursor:pointer; font-family:"EB Garamond","Georgia",serif; font-size:clamp(17px,2.2vw,20px); line-height:1.25; color:#fff; text-shadow:0 1px 0 #000, 0 0 2px #000, 0 0 6px rgba(0,0,0,.7); transition: transform .12s ease, filter .12s ease; position:relative; border-radius:8px; } .bg3-scene .choice::before{ counter-increment:choice; content:counter(choice) "."; position:absolute; left:.6rem; top:50%; transform:translateY(-50%); font-family:"Tagesschrift",system-ui; color:#fff; text-shadow:0 1px 0 #000, 0 0 2px #000; opacity:.95; } .bg3-scene .choice:hover{ transform:translateY(-1px); filter:drop-shadow(0 0 8px rgba(255,255,255,.18)); } .bg3-scene .choice:focus-visible{ outline:2px solid rgba(255,255,255,.75); outline-offset:2px; border-radius:6px; } .bg3-scene .choice .tag{ font-family:"Tagesschrift",system-ui; letter-spacing:.04em; } /* Mobile tweaks */ @media (max-width: 840px){ .bg3-scene .npc{ right:2%; height:58vh; max-width:60vw; } .bg3-scene .dlg{ padding:14px 14px 18px; } } @media (max-width: 520px){ .bg3-scene .npc{ right:-4%; height:52vh; max-width:68vw; } } /* When any scene is open, stop page scroll + hide body vignette */ .bg3-page.scene-open { overflow: hidden; } .bg3-page.scene-open::before { display: none; } /* ===================== APPROVAL STACK ===================== */ .bg3-page .bg3-approval-stack{ position: fixed; top:14px; left:14px; z-index:120; display:grid; gap:6px; pointer-events:none; } .bg3-page .bg3-approval{ display:inline-flex; align-items:center; gap:10px; opacity:0; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease; filter:drop-shadow(0 1px 0 #000) drop-shadow(0 0 6px rgba(0,0,0,.55)); font-size:1em; line-height:1.25; } .bg3-page .bg3-approval.on{ opacity:1; transform:none; } .bg3-page .bg3-approval .face{ width:1.6em; height:1.6em; flex:0 0 1.6em; position:relative; transform:rotate(45deg); border-radius:5px; overflow:hidden; background:#000; box-shadow:0 0 10px rgba(224,201,122,.22), inset 0 0 0 1px rgba(0,0,0,.6); } .bg3-page .bg3-approval .face::after{ content:""; position:absolute; inset:-1px; border:1px solid rgba(224,201,122,.55); border-radius:6px; pointer-events:none; } .bg3-page .bg3-approval .face img{ position:absolute; inset:-18%; width:136%; height:136%; object-fit:cover; object-position:50% 32%; transform:rotate(-45deg); filter:saturate(105%) contrast(102%); } .bg3-page .bg3-approval .text{ color:#fff; -webkit-text-stroke:.35px #000; text-shadow:0 1px 0 #000, 0 0 2px #000; white-space:nowrap; } .bg3-page .bg3-approval.approve .text{ text-shadow:0 1px 0 #000, 0 0 6px rgba(122,212,122,.45); } .bg3-page .bg3-approval.disapprove .text{ text-shadow:0 1px 0 #000, 0 0 6px rgba(255,119,119,.45); } .bg3-page .bg3-approval.leaving{ opacity:0; transform:translateY(-6px); } @media (max-width:520px){ .bg3-page .bg3-approval-stack{ top:10px; left:10px; gap:5px; } .bg3-page .bg3-approval .face{ width:1.5em; height:1.5em; flex-basis:1.5em; } } /* ===================== FLOATING MEMORY NOTES (Bottle / Watch) ===================== */ .card-anchor{ position:relative; margin-bottom:1.2rem; } /* position context for notes */ /* Base note */ .mnote{ position:absolute; left:2.2vw; top:var(--top,20vh); width:28px; height:56px; color:var(--gold); transform-origin:50% 80%; opacity:0; pointer-events:auto; text-decoration:none; filter:drop-shadow(0 0 6px rgba(224,201,122,.55)) drop-shadow(0 0 12px rgba(224,201,122,.30)); transform:translateX(0) translateY(0) rotate(var(--rot,0deg)) scale(var(--scale,.66)); animation: note-rise var(--dur,20s) linear infinite var(--delay,0s), note-sway 6s ease-in-out infinite calc(var(--delay,0s)/2), note-glow 3.4s ease-in-out infinite calc(var(--delay,0s)/3); } .mnote:hover{ filter:drop-shadow(0 0 12px rgba(224,201,122,.95)) drop-shadow(0 0 22px rgba(224,201,122,.65)); } .mnote img{ width:100%; height:100%; object-fit:contain; display:block; clip-path:none; } @keyframes note-rise{ 0% { opacity:0; transform:translateY(12px) rotate(var(--rot)) scale(var(--scale)); } 10% { opacity:.95; } 50% { opacity:1; transform:translateY(-60px) rotate(calc(var(--rot)+1deg)) scale(var(--scale)); } 90% { opacity:.85; } 100%{ opacity:0; transform:translateY(-120px) rotate(calc(var(--rot)+2deg)) scale(var(--scale)); } } @keyframes note-sway{ 0%,100%{ transform:translateX(0) rotate(var(--rot)) scale(var(--scale)); } 50% { transform:translateX(7px) rotate(calc(var(--rot) - 2deg)) scale(var(--scale)); } } @keyframes note-glow{ 0%,100%{ filter:drop-shadow(0 0 6px rgba(224,201,122,.55)) drop-shadow(0 0 12px rgba(224,201,122,.30)); } 50% { filter:drop-shadow(0 0 9px rgba(224,201,122,.9)) drop-shadow(0 0 16px rgba(224,201,122,.55)); } } /* Right-anchored (bottle) */ .mnote--bottle{ position:absolute; right:-72px; left:auto; bottom:10px; width:72px; height:144px; pointer-events:auto; z-index:2; } @media (max-width:900px){ .mnote--bottle{ right:-56px; width:60px; height:120px; } } @media (max-width:640px){ .mnote--bottle{ right:-44px; width:52px; height:104px; } } /* Left-anchored (watch) */ .mnote--watch{ position:absolute; left:-72px; right:auto; bottom:10px; width:72px; height:144px; pointer-events:auto; z-index:2; } @media (max-width:900px){ .mnote--watch{ left:-56px; width:60px; height:120px; } } @media (max-width:640px){ .mnote--watch{ left:-44px; width:52px; height:104px; } } /* ===================== RESPONSIVE (HUD) ===================== */ @media (max-width:840px){ .bg3-page main.page{ width:min(96vw,var(--maxw)); } .bg3-page .bg3-dialogue{ grid-template-columns:56px 1fr; } .bg3-page .bg3-dialogue .portrait{ width:54px; height:54px; } } @media (max-width:680px){ .bg3-page .bg3-nav{ gap:8px; padding:8px 10px; } .bg3-page .bg3-nav a{ padding:.28rem .5rem; } .bg3-page .chips li{ font-size:.95rem; border-radius:8px; padding:.18rem .48rem; } .bg3-page .bg3-dialogue{ border-radius:14px; } .bg3-page .choice{ font-size:clamp(15px,4.4vw,18px); } } @media (max-width:420px){ .bg3-page .bg3-dialogue{ padding:8px 8px 10px; } .bg3-page .choice{ padding-left:1.8rem; } } /* ===================== REDUCED MOTION ===================== */ @media (prefers-reduced-motion:reduce){ .bg3-page *{ animation:none !important; transition:none !important; } } /* ===================== Custom cursor ===================== */ .bg3-page, .bg3-page *{ cursor:url("/images/cursors/hand.png"), auto; } .bg3-page.is-pressed, .bg3-page.is-pressed *{ cursor:url("/images/cursors/hand-click.png"), auto; }