:root{--gold:#d9b45a;--red:#c8372d;--panel:rgba(20,14,16,.8);--line:rgba(217,180,90,.22);--text:#ece6d8;--mute:#a79f8f;--fs:17px}
    *{box-sizing:border-box;margin:0}
    html,body{min-height:100%}
    body{background:#070506;color:var(--text);font-family:'Be Vietnam Pro','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:var(--fs);line-height:1.75;overflow-x:hidden}
    body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 50% -10%,#3a1214 0,#120a0c 45%,#050304 100%);z-index:-1}
    h1,h2,.serif{font-family:'Playfair Display','Times New Roman',serif}
    button{font-family:inherit;cursor:pointer}
    svg text:not([font-family]){font-family:'Be Vietnam Pro','Segoe UI',Arial,sans-serif}
    #app{max-width:980px;margin:0 auto;padding:14px}
    #bar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--panel);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(8px);margin-bottom:12px}
    #logo{font-family:'Playfair Display',serif;font-weight:800;color:var(--gold);letter-spacing:1px;font-size:1.05rem;white-space:nowrap}
    #hud{flex:1;text-align:center;font-size:.8rem;color:var(--mute);display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
    #hud b{color:var(--text);font-weight:600}
    .ib{background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);width:38px;height:38px;border-radius:10px;font-size:1rem;transition:.2s}
    .ib:hover{background:rgba(217,180,90,.18);border-color:var(--gold)}
    #scene{position:relative;height:clamp(200px,40vh,380px);border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 60px rgba(0,0,0,.7),0 0 50px rgba(200,55,45,.12)}
    #scene.shake{animation:sh .45s}
    @keyframes sh{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
    #sv,#sv svg{position:absolute;inset:0;width:100%;height:100%;display:block}
    #sv svg{animation:kb 26s ease-in-out infinite alternate,fd .8s}
    @keyframes kb{from{transform:scale(1)}to{transform:scale(1.07)}}
    @keyframes fd{from{opacity:0;filter:brightness(2.4)}}
    .vig{position:absolute;inset:0;box-shadow:inset 0 0 130px #000,inset 0 -60px 80px rgba(0,0,0,.7);pointer-events:none}
    .grain{position:absolute;inset:-50%;opacity:.13;mix-blend-mode:overlay;pointer-events:none;animation:gr .5s steps(4) infinite;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
    body.nograin .grain{display:none}
    @keyframes gr{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(3%,3%)}}
    #cap{position:absolute;left:18px;bottom:12px;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);text-shadow:0 2px 8px #000}
    #obj{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Be Vietnam Pro',sans-serif;font-weight:800;font-size:clamp(36px,8vw,76px);letter-spacing:.08em;color:#fff;text-shadow:5px 5px 0 var(--red),0 0 30px rgba(200,55,45,.8);opacity:0;pointer-events:none}
    #obj.pop{animation:pop 1.1s}
    @keyframes pop{0%{opacity:0;transform:scale(2.4) rotate(-8deg)}15%{opacity:1;transform:scale(1) rotate(-6deg)}80%{opacity:1}100%{opacity:0}}
    #tm{height:8px;margin:10px 2px 0;background:rgba(255,255,255,.08);border-radius:6px;overflow:hidden;visibility:hidden}
    #tm i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--red),#f39c12);transition:width .25s linear}
    #tm.danger i{animation:pl .5s infinite alternate}
    @keyframes pl{to{filter:brightness(1.8)}}
    #card{margin-top:14px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px 28px;backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.5);cursor:default}
    #ch{color:var(--red);font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600}
    #tt{font-family:'Playfair Display','Times New Roman',serif;font-weight:800;font-size:clamp(1.5rem,4.2vw,2.15rem);line-height:1.25;margin:4px 0 12px;text-shadow:0 0 22px rgba(200,55,45,.45)}
    #tx{border-left:3px solid var(--red);padding:2px 0 2px 18px;font-size:1em}
    #tx i{color:#f3e7c8}
    #tx b{color:var(--gold);font-weight:600}
    .pre{background:rgba(217,180,90,.1);border:1px solid var(--line);color:var(--gold);padding:10px 14px;border-radius:10px;margin-bottom:14px;font-size:.9em}
    .stat{margin-top:16px;padding-top:12px;border-top:1px dashed var(--line);color:var(--mute);font-size:.82em}
    #op{display:grid;gap:10px;margin:16px 0 50px}
    .ch{display:flex;align-items:center;gap:14px;text-align:left;font-size:.95em;line-height:1.5;color:var(--text);background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--line);padding:13px 16px;border-radius:12px;transition:.2s;animation:up .5s both}
    @keyframes up{from{opacity:0;transform:translateY(10px)}}
    .ch:hover{border-color:var(--gold);background:rgba(217,180,90,.1);transform:translateX(6px);box-shadow:0 6px 26px rgba(0,0,0,.45)}
    .ch .n{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.8em;background:rgba(217,180,90,.14);color:var(--gold);border:1px solid var(--line)}
    .ch.ev{border-color:rgba(217,180,90,.55);color:var(--gold);background:rgba(217,180,90,.07)}
    .sm{background:linear-gradient(180deg,#e2bd62,#b8903a);color:#1a1205;border:0;border-radius:10px;padding:0 22px;font-weight:600;font-size:.95em}
    .kp{background:rgba(0,0,0,.5);color:var(--gold);border:1px solid var(--line);border-radius:10px;padding:10px;font:600 1.5rem monospace;letter-spacing:.5em;width:190px;text-align:center}
    .row2{display:flex;gap:10px;flex-wrap:wrap}
    .ov{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);z-index:30;padding:14px}
    .hide{display:none!important}
    .box{width:min(640px,100%);max-height:88vh;overflow:auto;background:#150e10;border:1px solid var(--line);border-radius:18px;box-shadow:0 30px 90px #000}
    .mh{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#150e10;z-index:2}
    .mh h2{font-size:1.3rem;color:var(--gold)}
    .mb{padding:8px 22px 22px}
    .mb h3{font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--red);margin:20px 0 6px}
    .row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.92rem}
    .row label{color:var(--text)}
    .sl{display:flex;align-items:center;gap:10px}
    .sl input{width:170px;accent-color:var(--gold)}
    .sl span{width:34px;text-align:right;color:var(--mute);font-size:.85em}
    .sw{width:48px;height:26px;border-radius:20px;border:1px solid var(--line);background:#2a2022;position:relative;transition:.2s;padding:0}
    .sw::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#888;transition:.2s}
    .sw.on{background:rgba(217,180,90,.35);border-color:var(--gold)}
    .sw.on::after{left:24px;background:var(--gold)}
    .seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
    .seg button{background:transparent;border:0;color:var(--mute);padding:7px 12px;font-size:.82rem;border-right:1px solid var(--line)}
    .seg button:last-child{border:0}
    .seg button.on{background:rgba(217,180,90,.22);color:var(--gold);font-weight:600}
    .btn{display:block;width:100%;padding:13px 18px;margin-top:10px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--text);font-size:.98rem;transition:.2s;text-align:center}
    .btn:hover{border-color:var(--gold);background:rgba(217,180,90,.12);transform:translateY(-1px)}
    .btn.pri{background:linear-gradient(180deg,#e2bd62,#b8903a);color:#1a1205;font-weight:600;border:0}
    .btn.dng{color:#e57b72;border-color:rgba(200,55,45,.4)}
    .cl{padding:12px 14px;margin-top:10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)}
    .cl b{color:var(--gold)}.cl p{font-size:.9rem;color:#d8d0bf;margin-top:2px}
    .cl.lock{opacity:.4}
    #menu{z-index:20;background:#050304;flex-direction:column;overflow:hidden}
    #menuart{position:absolute;inset:0;opacity:.5;filter:blur(1.5px)}
    #menuart svg{width:100%;height:100%}
    #menu::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(5,3,4,.2),rgba(5,3,4,.92));pointer-events:none}
    #mc{position:relative;z-index:2;text-align:center;width:min(360px,92vw)}
    #mc .sub{letter-spacing:.4em;font-size:.7rem;color:var(--red);text-transform:uppercase;font-weight:600}
    #mc h1{font-size:clamp(2.2rem,8vw,3.6rem);line-height:1.1;margin:10px 0 6px;color:#f3e7c8;text-shadow:0 0 40px rgba(200,55,45,.7)}
    #mc .tag{color:var(--mute);font-size:.9rem;margin-bottom:26px}
    #mc .ft{margin-top:26px;font-size:.75rem;color:var(--mute)}
    #fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}
    #fl{position:fixed;inset:0;background:#cfe0ff;opacity:0;pointer-events:none;z-index:24}
    #fl.on{animation:f 1s}
    @keyframes f{0%{opacity:0}8%{opacity:.5}18%{opacity:.05}30%{opacity:.35}100%{opacity:0}}
    #toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:#e2bd62;color:#1a1205;padding:11px 20px;border-radius:12px;opacity:0;transition:.35s;pointer-events:none;max-width:92%;font-size:.88rem;z-index:40;font-weight:500}
    #toast.on{opacity:1;transform:translateX(-50%)}
    @media(max-width:600px){#card{padding:18px}#logo{display:none}.sl input{width:110px}}