@import url('./assets/main-C9BnXgY9-match.css');
.demo-backdrop{position:fixed;inset:0;background:radial-gradient(ellipse at 75% 48%,#1b2921 0,#101716 29%,#090c0d 65%);pointer-events:none;z-index:-1}
.demo-backdrop:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:70px 70px;mask-image:linear-gradient(90deg,transparent,#000)}
.demo-panel{position:fixed;left:clamp(32px,7.5vw,144px);top:50%;transform:translateY(-50%);width:440px;max-width:40vw;color:#f3f5f1;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;z-index:4;pointer-events:auto}
.demo-brand{color:#f5f7f3;text-decoration:none;font-size:21px;font-weight:900;letter-spacing:-1px;display:inline-flex;gap:5px;align-items:baseline}.demo-brand span{color:#b6ff3b}.demo-brand .demo-brand-dot{font-size:10px;align-self:flex-start;letter-spacing:0;margin:2px 0 0 0}
.demo-status{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:1.8px;font-weight:700;color:#b5beb3;margin-top:54px}.demo-status>span{height:6px;width:6px;background:#b6ff3b;border-radius:50%;box-shadow:0 0 12px #b6ff3b66}.demo-status b{letter-spacing:.3px;color:#7a887c;border:1px solid #ffffff18;border-radius:4px;padding:3px 5px;margin-left:3px;font-weight:500}
.demo-panel h1{font-size:clamp(54px,5.6vw,88px);line-height:1.02;letter-spacing:-5px;margin:23px 0 22px;font-weight:750}.demo-panel h1 em{font-style:normal;color:#b6ff3b}.demo-intro{font-size:16px;color:#a1aaa3;line-height:1.65;letter-spacing:-.15px}

.demo-tools{display:flex;align-items:center;gap:16px}.demo-tools button{border:0;background:none;padding:8px 0;font-size:11px;color:#89968d;cursor:pointer}.demo-tools #demo-open{color:#d7e1d7}.demo-tools button:hover{color:#b6ff3b}.demo-tools select{background:#111813;border:1px solid #ffffff16;color:#b2bfb6;padding:6px 22px 6px 9px;border-radius:6px;font-size:10px;max-width:100px;color-scheme:dark;cursor:pointer}.demo-language{margin-left:auto}
.demo-note{max-width:350px;font-size:10px;line-height:1.7;color:#647269;margin:18px 0 22px}.demo-docs{font-size:11px;color:#98a69b;text-decoration:none;border-bottom:1px solid #ffffff17;padding-bottom:6px;display:inline-flex;gap:40px}.demo-docs:hover{color:#b6ff3b}
.demo-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:#1b251f;border:1px solid #b6ff3b35;border-radius:12px;color:#deeadf;padding:13px 19px;font:12px/1.4 Inter,"Segoe UI",sans-serif;z-index:999999;transition:.2s;max-width:min(500px,90vw)}.demo-toast.visible{opacity:1;transform:translate(-50%,0)}
.demo-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
html body #root .phone-dismiss-area{justify-content:center;align-items:center;padding:24px 24px 24px min(43vw,660px);pointer-events:none}
html body #root .phone-scale-stage{pointer-events:none;transform-origin:center}
html body #root .phone-shell{pointer-events:auto;box-shadow:0 30px 120px #0008;max-height:none;max-width:none}
html body #root .phone-shell.phone-model-classic:not(.camera-landscape){height:874px!important;max-height:none!important;max-width:none!important}
html body #root .phone-shell.phone-model-fold{--fold-height:720px;max-width:none!important}
html body #root .phone-shell.phone-model-android{--android-height:820px;max-width:none!important}
html body #root .phone-scale-stage{zoom:var(--demo-scale,.88)!important}
@media(max-height:850px) and (min-width:901px){.demo-status{margin-top:30px}.demo-panel h1{font-size:64px}html body #root .phone-scale-stage{zoom:var(--demo-scale,.75)!important}}
@media(max-width:900px){.demo-panel{left:20px;top:19px;transform:none;width:calc(100% - 40px);max-width:none;display:flex;align-items:center;gap:14px;flex-wrap:wrap}.demo-brand{font-size:16px}.demo-status{margin:0 0 0 auto;font-size:8px;letter-spacing:1px}.demo-panel h1,.demo-intro,.demo-note,.demo-docs{display:none}.demo-tools{order:4;gap:10px}.demo-tools button,.demo-tools select{font-size:9px}.demo-tools #demo-open{display:none}.demo-language{margin:0}.demo-panel:after{content:"Interactive demo · simulated game services";display:block;width:100%;font-size:9px;color:#79867d;order:5}html body #root .phone-dismiss-area{padding:120px 10px 14px}.demo-toast{bottom:9px;font-size:10px}}

.demo-tools{margin-top:28px}@media(max-width:900px){.demo-tools{margin-top:0;margin-left:auto}}
