:root{color-scheme:dark;--ink:#090c13;--silver:#e6eef8;--blue:#81c9ff;--gold:#e5b57d}
    *{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--ink)}body{font-family:"Segoe UI",Arial,sans-serif;color:var(--silver)}a{color:inherit}a:focus-visible{outline:3px solid #fff;outline-offset:-9px}
    .portal{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;min-height:660px;height:100svh;overflow:hidden;background:#10131b url('bellatrix-portal-background-v2.png') center/cover no-repeat}
    .portal:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,9,16,.12),transparent 38%,rgba(3,6,12,.20) 60%,rgba(3,6,12,.94))}
    .gate{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0;padding:0 28px max(72px,9vh);text-align:center;text-decoration:none;transition:background .4s ease;overflow:hidden}
    .gate:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}.metin:before{background:linear-gradient(0deg,rgba(42,131,216,.20),transparent 65%)}.fivem:before{background:linear-gradient(0deg,rgba(226,143,68,.20),transparent 65%)}.gate:hover:before,.gate:focus-visible:before{opacity:1}
    .game-brand{position:absolute;top:5.8vh;left:50%;transform:translateX(-50%);width:clamp(210px,25vw,360px);min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;filter:drop-shadow(0 5px 16px #000)}
    .game-brand img{width:100%;height:auto;display:block}.five-wordmark{margin-top:20px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,3.2vw,48px);letter-spacing:.11em;line-height:1.2;color:#f3dcc1}.five-subtitle{margin-top:12px;font-size:12px;letter-spacing:.6em;color:var(--gold);padding-left:.6em}
    .game-copy{position:relative;z-index:1;max-width:410px;text-shadow:0 2px 16px #000;transition:transform .35s ease}.gate:hover .game-copy{transform:translateY(-5px)}
    .game-copy h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(35px,4vw,60px);font-weight:400;letter-spacing:.16em;margin:0 0 10px;padding-left:.16em;line-height:1.05}.metin h2{color:#e9f5ff}.fivem h2{color:#fae6ce}.game-copy p{font-size:13px;letter-spacing:.045em;color:#c6cbd3;line-height:1.6;margin:0 0 26px}
    .enter{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:16px 28px;min-width:230px;border:1px solid rgba(129,201,255,.55);background:linear-gradient(130deg,rgba(32,62,98,.8),rgba(10,20,36,.9));font-size:12px;font-weight:600;letter-spacing:.12em;box-shadow:0 6px 30px #0008,inset 0 0 20px #70b8fa0a;transition:border-color .3s,box-shadow .3s;backdrop-filter:blur(8px)}.fivem .enter{border-color:#bc885780;background:linear-gradient(130deg,#553a27cf,#1a1410e8)}.enter b{font-size:21px;line-height:12px;font-weight:400}.gate:hover .enter{border-color:var(--blue);box-shadow:0 0 30px #60b8ff25}.fivem:hover .enter{border-color:var(--gold);box-shadow:0 0 30px #e6a25125}
    .community-brand{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:clamp(210px,25vw,370px);z-index:3;text-align:center;pointer-events:none;text-shadow:0 3px 12px #000,0 0 35px #000,0 0 65px #000}
    .community-brand:before{content:"";position:absolute;inset:-55px -30px;z-index:-1;background:radial-gradient(ellipse,#060a11d9 0%,#060a118a 40%,transparent 72%)}.ornament{display:flex;align-items:center;gap:14px;justify-content:center;color:#e0ba84;margin-bottom:18px}.ornament:before,.ornament:after{content:"";display:block;width:70px;height:1px;background:linear-gradient(90deg,transparent,#c29c67)}.ornament:after{transform:rotate(180deg)}.ornament span{font-size:13px}.community-brand h1{margin:0;font-family:Georgia,"Times New Roman",serif;font-weight:400;line-height:1.15}.community-brand .community{display:block;font-size:clamp(15px,1.5vw,22px);letter-spacing:.15em;color:#dbcdbb;margin-bottom:9px}.community-brand .bellatrix{display:block;font-size:clamp(30px,3.1vw,48px);letter-spacing:.08em;color:#fff3e2}.community-brand p{font-size:10px;letter-spacing:.15em;color:#c4bdaf;margin:19px 0 0}
    .community-footer{position:absolute;bottom:19px;left:0;right:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:24px;font-size:10px;letter-spacing:.08em;color:#a3a4ab}.community-footer a{text-decoration:none;border-bottom:1px solid #636570;padding:7px 2px}.community-footer a:hover{color:white;border-color:white}.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}
    @media(max-width:700px){
      .portal{height:auto;min-height:100svh;grid-template-columns:1fr;grid-template-rows:minmax(430px,52svh) 110px minmax(430px,52svh);background-image:none;padding-bottom:55px;overflow:visible}.portal:before{display:none}.gate{padding:0 20px 32px;background-repeat:no-repeat;background-size:auto 100%;background-color:#11151d}.metin{grid-row:1;background-image:linear-gradient(0deg,#050b15f2,transparent 70%),url('bellatrix-portal-background-v2.png');background-position:left center}.fivem{grid-row:3;background-image:linear-gradient(0deg,#130d08ed,transparent 70%),url('bellatrix-portal-background-v2.png');background-position:right center}.game-brand{top:15px;width:210px;min-height:65px}.five-wordmark{font-size:30px;margin-top:15px}.five-subtitle{font-size:10px;margin-top:8px}.game-copy h2{font-size:34px;margin-bottom:5px}.game-copy p{font-size:12px;margin-bottom:18px}.enter{padding:14px 24px;min-width:220px;font-size:11px}.community-brand{grid-row:2;position:relative;left:auto;top:auto;transform:none;width:auto;align-self:center;margin:0;pointer-events:auto}.community-brand:before{display:none}.ornament{display:none}.community-brand .community{font-size:12px;margin-bottom:4px}.community-brand .bellatrix{font-size:29px}.community-brand p{margin-top:8px;font-size:9px}.community-footer{bottom:12px;gap:17px;font-size:9px}
    }
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}.gate:hover .game-copy{transform:none}}

.duel{position:absolute;inset:16vh 0 21vh;pointer-events:none;z-index:0;overflow:visible}
.fighter{position:absolute;inset:0;background:url('bellatrix-portal-duel-sprites.png') center/contain no-repeat;will-change:transform;transform-origin:50% 85%;filter:drop-shadow(0 12px 15px #0009)}
.warrior{clip-path:polygon(0 0,66.3% 0,66.3% 100%,0 100%);transform:translateX(-6vw)}
.gunner{clip-path:polygon(66.5% 0,100% 0,100% 100%,66.5% 100%)}
.portal:has(.metin:hover) .warrior,.portal:has(.metin:focus-visible) .warrior{animation:thrust 1.65s ease-in-out infinite}
.portal:has(.fivem:hover) .gunner,.portal:has(.fivem:focus-visible) .gunner{animation:recoil 1.45s ease-out infinite}
.portal:has(.metin:hover) .gunner,.portal:has(.metin:focus-visible) .gunner{animation:hit-right 1.65s ease-out infinite}
.portal:has(.fivem:hover) .warrior,.portal:has(.fivem:focus-visible) .warrior{animation:hit-left 1.45s ease-out infinite}
.shot,.impact,.spear-trail{position:absolute;opacity:0;pointer-events:none}
.shot{left:30%;right:26%;top:26%;height:2px;background:linear-gradient(90deg,transparent,#ffd799,#fff5d5);box-shadow:0 0 14px #ffb654;transform-origin:right}
.impact{left:29%;top:24%;width:40px;height:40px;background:radial-gradient(ellipse,#fff8d9,transparent 68%);border-radius:50%;box-shadow:0 0 35px #ffc76a}
.spear-trail{left:48%;right:17%;top:39%;height:4px;background:linear-gradient(90deg,transparent,#6bd9ff,#fff);box-shadow:0 0 24px #28a9ff;transform-origin:left}
.portal:has(.fivem:hover) .shot,.portal:has(.fivem:focus-visible) .shot{animation:shot 1.45s linear infinite}
.portal:has(.fivem:hover) .impact,.portal:has(.fivem:focus-visible) .impact{animation:impact 1.45s linear infinite}
.portal:has(.metin:hover) .spear-trail,.portal:has(.metin:focus-visible) .spear-trail{animation:slash 1.65s ease-out infinite}
.community-brand{top:27%;width:260px}.community-brand .community{font-size:15px}.community-brand .bellatrix{font-size:34px}.community-brand p{margin-top:10px}.ornament{margin-bottom:10px}
.game-copy{z-index:2}.game-brand{z-index:2}
@keyframes thrust{0%,25%,100%{transform:translateX(-6vw) rotate(0)}40%,48%{transform:translateX(6vw) rotate(-2deg)}65%{transform:translateX(-7vw) rotate(1deg)}}
@keyframes recoil{0%,20%,40%,100%{transform:translateX(0) rotate(0)}23%,43%{transform:translateX(10px) rotate(1.2deg)}30%,50%{transform:translateX(0) rotate(0)}}
@keyframes hit-right{0%,48%,100%{transform:translateX(0)}52%{transform:translateX(18px) rotate(2deg)}65%{transform:translateX(0)}}
@keyframes hit-left{0%,24%,44%,100%{transform:translateX(-6vw)}27%,47%{transform:translateX(calc(-6vw - 12px)) rotate(-1deg)}35%,55%{transform:translateX(-6vw)}}
@keyframes shot{0%,20%,25%,40%,45%,100%{opacity:0;transform:scaleX(.1)}22%,42%{opacity:1;transform:scaleX(1)}}
@keyframes impact{0%,25%,31%,45%,51%,100%{opacity:0;transform:scale(.2)}27%,47%{opacity:.9;transform:scale(1)}}
@keyframes slash{0%,36%,58%,100%{opacity:0;transform:scaleX(.1)}43%,47%{opacity:.95;transform:scaleX(1)}}
@media(max-width:700px){.duel{display:none}.metin{background-image:linear-gradient(0deg,#050b15f2,transparent 70%),url('bellatrix-community-portal-v1.png')}.fivem{background-image:linear-gradient(0deg,#130d08ed,transparent 70%),url('bellatrix-community-portal-v1.png')}.community-brand{top:auto;width:auto}.community-brand .community{font-size:12px}.community-brand .bellatrix{font-size:29px}}
@media(prefers-reduced-motion:reduce){.fighter,.shot,.impact,.spear-trail{animation:none!important}.shot,.impact,.spear-trail{display:none}}
  
.fighter{inset:0 auto 0 50%;height:100%;width:auto;aspect-ratio:1672/941;translate:-50% 0}.gunner{clip-path:polygon(66.3% 0,100% 0,100% 100%,66.3% 100%)}

.fighter{inset:0 auto 0 50%;height:100%;width:auto;aspect-ratio:1672/941;translate:-50% 0}.warrior{clip-path:polygon(0 0,66.3% 0,66.3% 50%,60% 50%,60% 100%,0 100%)}.gunner{clip-path:polygon(66.3% 0,100% 0,100% 100%,60% 100%,60% 50%,66.3% 50%)}.shot{right:39%;top:32%}.impact{top:30%}