@import "https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Quicksand:wght@400;500;600&display=swap";:root{--bg-color:#050811;--gold:#f4c466;--gold-glow:#f4c46673;--paper-red:#d93829;--moon-silver:#d7e8ff;--text-primary:#f0f4fc}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body{background-color:var(--bg-color);width:100%;height:100%;color:var(--text-primary);font-family:Playfair Display,Georgia,serif;overflow:hidden}#canvas-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.letterbox{z-index:10;pointer-events:none;background:linear-gradient(#03050af2,#03050a00);width:100%;height:48px;transition:opacity 2.5s;position:absolute;left:0}.letterbox.bottom{background:linear-gradient(#03050a00,#03050af2);bottom:0}@media (height>=800px){.letterbox{height:70px}}.film-grain-overlay{z-index:12;pointer-events:none;opacity:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.12'/%3E%3C/svg%3E");width:100%;height:100%;transition:opacity 1.8s;position:absolute;top:0;left:0}.film-grain-overlay.active{opacity:1}.sepia-vignette{z-index:11;pointer-events:none;opacity:0;background:radial-gradient(circle,#a06e3c1f 0%,#23160a80 75%,#0a0805f2 100%);width:100%;height:100%;transition:opacity 2s;position:absolute;top:0;left:0}.sepia-vignette.active{opacity:1}.audio-toggle-btn{width:44px;height:44px;color:var(--gold);cursor:pointer;z-index:20;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#12192aa6;border:1px solid #f4c46659;border-radius:50%;justify-content:center;align-items:center;transition:all .3s;display:flex;position:absolute;top:24px;right:24px}.audio-toggle-btn:hover{border-color:var(--gold);background:#f4c46633;transform:scale(1.06)}.cinematic-title-box{text-align:center;z-index:15;opacity:0;pointer-events:none;width:90%;max-width:680px;transition:opacity 1.5s ease-in-out;position:absolute;top:16%;left:50%;transform:translate(-50%)}.cinematic-title-box.visible{opacity:1;pointer-events:auto}.cinematic-main-title{letter-spacing:.18em;color:var(--moon-silver);text-shadow:0 0 25px #d7e8ffb3;margin-bottom:8px;font-family:Cinzel,serif;font-size:2.2rem}.cinematic-sub-title{color:#a4b5cf;letter-spacing:.06em;font-size:1.05rem;font-style:italic}.cinematic-subtitle-box{text-align:center;z-index:15;pointer-events:none;width:90%;max-width:720px;position:absolute;bottom:160px;left:50%;transform:translate(-50%)}.cinematic-subtitle-text{color:#fffaf0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:0 2px 8px #000000e6;opacity:0;background:#080c16a6;border:1px solid #f4c46633;border-radius:20px;padding:8px 24px;font-size:1.15rem;font-weight:400;line-height:1.6;transition:opacity .6s ease-in-out;display:inline-block}.cinematic-action-box{z-index:30;position:absolute;bottom:42px;left:50%;transform:translate(-50%)}.cinematic-btn{cursor:pointer;border:1px solid var(--gold);color:#fff;box-shadow:0 0 20px var(--gold-glow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);letter-spacing:.05em;background:linear-gradient(135deg,#f4c46640,#d9382940);border-radius:40px;padding:14px 34px;font-family:Quicksand,sans-serif;font-size:1.05rem;font-weight:600;transition:all .3s}.cinematic-btn:hover{background:linear-gradient(135deg,#f4c46673,#d9382973);transform:translateY(-2px);box-shadow:0 0 30px #f4c466b3}.crafting-ui-container{z-index:25;flex-direction:column;align-items:center;gap:12px;width:95%;max-width:820px;transition:opacity .6s;display:flex;position:absolute;bottom:30px;left:50%;transform:translate(-50%)}.crafting-prompt-text{letter-spacing:.05em;color:#f7d288;text-shadow:0 2px 6px #000000e6;font-family:Quicksand,sans-serif;font-size:.95rem}.crafting-tray{flex-wrap:wrap;justify-content:center;gap:12px;width:100%;display:flex}.craft-card{cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0e1422bf;border:1px solid #f4c46640;border-radius:12px;flex:170px;align-items:center;gap:10px;max-width:195px;padding:12px 14px;transition:all .3s;display:flex;position:relative}.craft-card.locked{opacity:.4;cursor:not-allowed;filter:grayscale(.8)}.craft-card.active{border-color:var(--gold);box-shadow:0 0 18px var(--gold-glow);background:#232d4bd9;animation:2s ease-in-out infinite pulseCard;transform:translateY(-4px)}@keyframes pulseCard{0%,to{box-shadow:0 0 12px var(--gold-glow)}50%{box-shadow:0 0 24px #f4c466cc}}.craft-card.completed{opacity:.85;background:#0f2319bf;border-color:#4ade80}.craft-icon{font-size:1.6rem}.craft-info{flex-direction:column;display:flex}.craft-title{color:#fff;font-family:Quicksand,sans-serif;font-size:.85rem;font-weight:600}.craft-desc{color:#9cb1d4;margin-top:2px;font-size:.72rem}.craft-check{color:#4ade80;font-weight:700;display:none;position:absolute;top:8px;right:10px}.craft-card.completed .craft-check{display:block}.fade-in{opacity:1}.fade-out{opacity:0;pointer-events:none}