:root{--joy: #ffc16f;--change: #9da489;--pride: #a8878a;--culture: #c06a4f;--roots: #52493f;--joy-s: #eee0d2;--change-s: #ebe2cc;--pride-s: #e8c4c3;--culture-s: #dad1c5;--roots-s: #dcb68f;--bg-dark: var(--roots);--bg-darker: #3a342c;--bg-cream: var(--joy-s);--text-light: var(--joy-s);--text-muted: rgba(238, 224, 210, .65);--accent: var(--joy);--accent-deep: var(--culture)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%;width:100%;overflow:hidden;background:var(--roots);font-family:Noto Kufi Arabic,Helvetica Neue,sans-serif;overscroll-behavior:none;touch-action:none}body{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 20%,rgba(255,193,111,.1),transparent 40%),radial-gradient(circle at 70% 80%,rgba(192,106,79,.08),transparent 40%),radial-gradient(circle at 50% 50%,rgba(157,164,137,.05),transparent 60%),var(--bg-darker)}#root{position:relative;width:100%;height:100dvh;max-width:420px;max-height:100dvh;overflow:hidden;background:#000;box-shadow:0 0 0 0 transparent}@media (min-width: 480px) and (min-height: 700px){#root{height:min(100dvh,900px);border-radius:32px;box-shadow:0 30px 80px #0009,0 0 0 6px var(--roots),0 0 0 8px var(--joy)}}canvas{display:block;width:100%!important;height:100%!important}.video-stage{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:#000;overflow:hidden}.video-stage-el{width:100%;height:100%;object-fit:cover;display:block}.video-stage-vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}.vcs-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:25;pointer-events:none}.vcs-spot{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;cursor:pointer;background:transparent;border:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:inherit;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.85),0 0 4px rgba(0,0,0,.9);transition:transform .18s ease,filter .18s ease}.vcs-spot:after{content:"";position:absolute;left:50%;top:100%;width:38vw;max-width:380px;height:70vh;transform:translate(-50%);border-radius:24px;background:radial-gradient(ellipse at center top,rgba(255,193,111,.18) 0%,rgba(255,193,111,.06) 30%,transparent 70%);opacity:0;transition:opacity .2s ease;pointer-events:auto}.vcs-spot:hover,.vcs-spot:focus-visible{transform:translate(-50%,-100%) scale(1.05);filter:drop-shadow(0 0 10px rgba(255,193,111,.55));outline:none}.vcs-spot:hover:after,.vcs-spot:focus-visible:after{opacity:1}.vcs-name{font-size:clamp(22px,4vw,36px);font-weight:900;letter-spacing:.5px;background:linear-gradient(180deg,#fff3d2,#ffc16f);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 8px rgba(0,0,0,.7))}.vcs-sub{font-size:clamp(12px,1.6vw,15px);font-weight:600;opacity:.92}.vcs-tap{margin-top:4px;font-size:12px;font-weight:700;padding:6px 14px;border-radius:999px;background:#0000008c;border:1px solid rgba(255,193,111,.55);color:#ffc16f;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.celebration{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;pointer-events:none;overflow:hidden}.celebration-particle{position:absolute;top:-10vh;display:inline-block;will-change:transform,opacity;filter:drop-shadow(0 2px 4px rgba(0,0,0,.45));animation-name:celebration-fall;animation-timing-function:linear;animation-iteration-count:infinite;opacity:0}@keyframes celebration-fall{0%{transform:translate3d(0,-10vh,0) rotate(0);opacity:0}10%{opacity:1}to{transform:translate3d(var(--drift, 0),110vh,0) rotate(var(--rotate, 360deg));opacity:0}}.loading{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 40%,rgba(255,193,111,.18),transparent 60%),linear-gradient(180deg,var(--roots) 0%,#2a241d 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200;transition:opacity .7s}.loading.hide{opacity:0;pointer-events:none}.loading-logo{width:200px;max-width:60%;height:auto;margin-bottom:14px;filter:drop-shadow(0 4px 20px rgba(255,193,111,.25))}.loading h1{font-size:30px;font-weight:900;color:var(--joy-s);margin-bottom:6px;text-shadow:0 2px 20px rgba(255,193,111,.35)}.loading p{font-size:12px;color:var(--joy);letter-spacing:2px;margin-bottom:32px}.l-bar{width:160px;height:2px;background:#eee0d226;border-radius:2px;overflow:hidden}.l-fill{height:100%;background:linear-gradient(90deg,var(--culture),var(--joy),var(--change));width:0;transition:width .3s}.opening{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 30%,rgba(255,193,111,.28),transparent 60%),linear-gradient(180deg,#3a342c,#1f1c17);display:flex;align-items:center;justify-content:center;z-index:150;padding:28px;animation:fadeIn .6s ease-out}.opening-card{width:100%;max-width:360px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;animation:fadeUpStatic .8s ease-out}.opening-logo{width:240px;max-width:75%;height:auto;margin-bottom:4px;filter:drop-shadow(0 4px 24px rgba(255,193,111,.3))}.opening-title{font-size:38px;font-weight:900;color:var(--joy-s);letter-spacing:1px;margin-bottom:4px;text-shadow:0 2px 20px rgba(255,193,111,.45)}.opening-line{font-size:15px;color:#eee0d2f2;line-height:1.9;font-weight:600}.opening-line+.opening-line{color:#eee0d2b3;font-size:13px;font-weight:400}.opening-cta{margin-top:14px;background:linear-gradient(135deg,var(--joy),#e89a3c);color:#2a1a00;border:none;border-radius:14px;padding:16px 28px;font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;letter-spacing:1px;min-height:52px;min-width:200px;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 8px 24px #ffc16f59;transition:transform .15s,box-shadow .15s}.opening-cta:active{transform:scale(.97);box-shadow:0 4px 14px #ffc16f33}@keyframes fadeUpStatic{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.ui{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:20}.title{position:absolute;top:max(24px,env(safe-area-inset-top,24px));left:50%;transform:translate(-50%);text-align:center;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2px}.title-logo{height:28px;width:auto;filter:drop-shadow(0 2px 12px rgba(0,0,0,.7))}.title h1{font-size:22px;font-weight:900;color:var(--joy-s);text-shadow:0 2px 16px rgba(0,0,0,.7)}.title p{font-size:10px;color:var(--joy);letter-spacing:2.5px;margin-top:2px}.keys{position:absolute;top:max(20px,env(safe-area-inset-top,20px));left:14px;display:flex;flex-direction:column;gap:5px;pointer-events:none}.key{display:flex;align-items:center;gap:6px;background:#3a342cc7;border:1px solid rgba(238,224,210,.18);border-radius:16px;padding:4px 10px;font-size:10px;color:#eee0d259;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .6s;white-space:nowrap}.key.earned{border-color:var(--joy);color:var(--joy);background:#ffc16f2e;font-weight:700;animation:keyPop .5s ease-out;box-shadow:0 0 14px #ffc16f59}@keyframes keyPop{0%{transform:scale(1.6)}to{transform:scale(1)}}.location{position:absolute;top:max(24px,env(safe-area-inset-top,24px));right:14px;background:#3a342cd1;border:1px solid rgba(255,193,111,.4);border-radius:8px;padding:6px 12px;font-size:10px;color:var(--joy);letter-spacing:1px;font-weight:600;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;animation:locFlash 3.5s ease-out forwards}@keyframes locFlash{0%,to{opacity:0}10%,85%{opacity:1}}.char-select{position:absolute;bottom:max(32px,env(safe-area-inset-bottom,32px));left:50%;transform:translate(-50%);display:flex;gap:12px;pointer-events:all;width:calc(100% - 28px);max-width:380px;animation:fadeUp .6s ease-out}.cs-card{flex:1;background:#3a342ceb;border:1.5px solid rgba(255,193,111,.4);border-radius:14px;padding:16px 12px;text-align:center;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .2s;font-family:inherit;color:var(--joy-s);min-height:130px}.cs-card:active{border-color:var(--joy);background:#ffc16f2e;transform:scale(.97)}.cs-card .cs-emoji{font-size:30px;display:block;margin-bottom:8px}.cs-card .cs-name{font-size:14px;font-weight:700;color:var(--joy-s)}.cs-card .cs-sub{font-size:10px;color:#eee0d280;margin-top:3px}.cs-card .cs-tap{font-size:9px;color:var(--joy);margin-top:10px;font-weight:600;letter-spacing:1px}.dialogue{position:absolute;bottom:max(24px,env(safe-area-inset-bottom,24px));left:50%;transform:translate(-50%);width:calc(100% - 24px);max-width:400px;background:#3a342cf2;border:1px solid rgba(255,193,111,.45);border-radius:14px;padding:16px 16px 14px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:all;animation:fadeUp .4s ease-out;box-shadow:0 8px 24px #00000080,inset 0 0 0 1px #ffc16f14}.dlg-speaker{font-size:9px;font-weight:700;color:var(--joy);letter-spacing:2px;margin-bottom:6px}.dlg-text{font-size:13px;color:var(--joy-s);line-height:1.8;margin-bottom:12px;white-space:pre-wrap}.dlg-choices{display:flex;flex-direction:column;gap:8px}.dlg-btn{display:flex;align-items:center;gap:10px;background:#9da48947;border:1px solid rgba(157,164,137,.6);color:var(--joy-s);padding:12px 14px;border-radius:10px;font-family:inherit;font-size:12.5px;cursor:pointer;text-align:right;transition:all .15s;min-height:44px}.dlg-btn:active{background:#9da4898c;border-color:var(--joy);transform:scale(.98)}.dlg-btn .bi{font-size:17px;flex-shrink:0;align-self:flex-start;margin-top:1px;color:var(--joy)}.dlg-btn-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.dlg-btn-main{font-size:12.5px;font-weight:700;line-height:1.4}.dlg-btn-sub{font-size:10.5px;color:#eee0d299;line-height:1.5;font-weight:400}.dlg-continue{display:flex;align-items:center;gap:5px;background:none;border:none;color:var(--joy);font-size:11px;font-family:inherit;cursor:pointer;margin-top:8px;margin-left:auto;padding:6px 4px;animation:blink 1.8s ease-in-out infinite;min-height:32px}@keyframes blink{0%,to{opacity:.5}50%{opacity:1}}@keyframes fadeUp{0%{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%)}}.win{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 40%,rgba(255,193,111,.18),transparent 60%),#1f1c17f2;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:50;text-align:center;padding:24px;pointer-events:all;animation:fadeIn .8s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.win .w-logo{width:180px;max-width:60%;margin-bottom:14px;filter:drop-shadow(0 4px 20px rgba(255,193,111,.3))}.win .w-icon{font-size:64px;margin-bottom:12px;animation:float 3s ease-in-out infinite}.win .w-title{font-size:22px;font-weight:900;color:var(--joy-s);line-height:1.6;margin-bottom:10px}.win .w-title em{color:var(--joy);font-style:normal}.win .w-sub{font-size:12px;color:#eee0d2a6;line-height:1.8;max-width:300px;margin-bottom:24px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.w-btn{width:100%;max-width:320px;padding:14px;border-radius:10px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;border:none;margin-bottom:9px;transition:all .15s;min-height:48px}.w-btn:active{transform:scale(.97)}.w-btn-gold{background:linear-gradient(135deg,var(--joy),#e89a3c);color:#2a1a00}.w-btn-green{background:var(--change);color:var(--roots)}.w-btn-ghost{background:#eee0d214;color:#eee0d2b3}