:root{color-scheme:dark;--bg:#09111c;--paper:#0f1c2c;--paper2:#132237;--line:#344355;--gold:#e6bf83;--gold2:#a98b5a;--white:#f0f1f2;--dim:#9eacbe;font-family:Inter,"Pretendard","Malgun Gothic",system-ui,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 80% -15%,#1e354d 0,transparent 50%),#08111b;color:var(--white);min-width:280px}button,a{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer}
.top-rule{height:4px;background:linear-gradient(90deg,#77603e 0%,#e6c68f 50%,#77603e 100%)}
.sitehead{max-width:1440px;padding:17px clamp(18px,4vw,70px);margin:auto;display:flex;justify-content:space-between;align-items:center;gap:24px}
.identity{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.18em;font-weight:800}.identity img{object-fit:contain;border:1px solid #695939;background:#0d1624}.identity small{display:block;margin-top:7px;color:var(--gold);font-size:10px;letter-spacing:.24em}.nav{display:flex;gap:24px;font-size:12px;color:#b7c2ce;white-space:nowrap}.nav a:hover,.nav a:focus-visible,.nav [aria-current]{color:var(--gold)}.nav [aria-current]{border-bottom:1px solid var(--gold);padding-bottom:6px}
main{max-width:1330px;margin:auto;padding:0 clamp(14px,3.2vw,48px)}
.hero{position:relative;overflow:hidden;border:1px solid #313c4a;min-height:470px;background:linear-gradient(112deg,#0e1b2d 5%,#142338 55%,#0a1321 100%);display:grid;grid-template-columns:1.24fr .76fr;isolation:isolate}
.hero:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(119deg,transparent 0px,transparent 109px,#c8a46c08 110px,#c8a46c08 111px);pointer-events:none;z-index:-1}
.hero-copy{padding:clamp(27px,5vw,68px);position:relative;z-index:1}.eyebrow{margin:0;color:var(--gold);letter-spacing:.22em;font-size:11px;font-weight:750}.line{display:inline-block;width:22px;border-top:1px solid var(--gold);vertical-align:middle;margin-right:7px}
.hero h1{font:500 clamp(48px,6.9vw,91px)/.98 Georgia,"Times New Roman",serif;letter-spacing:-.065em;margin:30px 0 13px}.hero em,.tiers-explained em{color:#ebc990;font-weight:400}.kr-head{font-size:19px;margin:0 0 15px;font-weight:600;letter-spacing:-.03em}.lead{max-width:520px;font-size:13px;line-height:2;color:#adbbca;margin:0}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}.hero-buttons a{display:inline-flex;gap:25px;align-items:center;justify-content:center;min-height:44px;padding:12px 20px;border:1px solid #bd975f;font-size:12px;font-weight:750}.primary-btn{background:#dfbc83;color:#132034}.primary-btn:hover{background:#f2d9a6}.ghost-btn{color:#e4c290}.ghost-btn:hover{background:#e4c29016}
.hero-showcase{position:relative;display:grid;place-items:center;min-height:360px}.hero-showcase:before{content:"";position:absolute;inset:-25%;background:radial-gradient(ellipse at center,#d2a35823 0%,transparent 53%)}.halo{position:absolute;width:320px;height:320px;border-radius:50%;border:1px solid #af8d5960;box-shadow:0 0 50px #dbb37520,inset 0 0 50px #dbb3750c}.halo:before{content:"";position:absolute;inset:24px;border:1px solid #d5b77f2a;border-radius:50%}
.tier-emblem,.hero-medal,.mini-medal,.modal-medal{display:block;aspect-ratio:1;background-image:url('/dfc-tier-emblems-premium-v2.png');background-repeat:no-repeat;background-size:800% 200%;background-position:var(--x,0%) var(--y,0%);flex-shrink:0}
.hero-medal{width:min(75%,265px);filter:drop-shadow(0 12px 24px #030a14) drop-shadow(0 0 28px #f1d49352);transform:rotate(-8deg)}
.mini-medal{position:absolute;right:6%;bottom:18%;width:93px;filter:drop-shadow(0 0 20px #ecb96b77);transform:rotate(14deg)}
.showcase-caption{position:absolute;left:10%;bottom:10%;font:11px Georgia,serif;letter-spacing:.12em;color:var(--gold);display:grid;gap:5px}.showcase-caption span{font:9px system-ui,sans-serif;color:var(--dim);letter-spacing:.21em}
.highlights{display:grid;grid-template-columns:repeat(3,1fr) 2.4fr;border:1px solid #26394c;border-top:0;background:#101d2e;align-items:center}.highlights>div{padding:20px 22px;border-right:1px solid #293749}.highlights strong{display:block;color:#e4c58e;font:34px Georgia,serif}.highlights span{font-size:10px;letter-spacing:.11em;color:#9aafc0}.highlights .guide-note{border:0;font-size:12px;line-height:1.8;color:#c0c9d2}.guide-note b{color:#e6c795}
.collection{padding:73px 0 12px;scroll-margin-top:30px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:26px}.section-head h2{font-size:clamp(26px,3.5vw,42px);font-weight:660;letter-spacing:-.03em;margin:11px 0}.section-head h2 span{color:#a7b7c6;font:italic 400 .62em Georgia,serif;margin-left:9px}.section-head p:last-child{color:#9caab9;font-size:12px;margin:0}.section-stamp{border:1px solid #a68a5a75;padding:10px 14px;color:#edcc91;font:10px Georgia,serif;letter-spacing:.18em;white-space:nowrap}
.emblem-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.emblem-card{position:relative;display:grid;justify-items:center;text-align:center;min-width:0;min-height:282px;padding:24px 12px 21px;border:1px solid #394b5f;background:linear-gradient(155deg,#15263b,#0d1726 80%);color:inherit;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}.emblem-card:before{content:"";position:absolute;width:185px;height:150px;top:4px;background:radial-gradient(ellipse,#f0c58b10 5%,transparent 67%)}.emblem-card:hover,.emblem-card:focus-visible{transform:translateY(-3px);border-color:#d7b77d;box-shadow:0 14px 32px #04080f80}.emblem-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}.emblem-card.elite{background:linear-gradient(157deg,#203148,#0d1726 81%);border-color:#886c4660}.emblem-card.apex{background:linear-gradient(152deg,#342d30,#0d1726 78%);border-color:#b89a60}.emblem-card .tier-emblem{width:min(100%,156px);filter:drop-shadow(0 9px 13px #0009)}.emblem-label{margin-top:9px;font:600 12px Georgia,serif;letter-spacing:.18em;color:#e3c393}.emblem-card .caption{margin-top:7px;color:#aebbc9;font-size:12px;font-weight:630}.emblem-card .level{margin-top:6px;color:#93a2b2;font-size:10px}.emblem-card .open-icon{position:absolute;right:13px;top:11px;font-size:17px;font-weight:300;color:#cbb185;opacity:.8}
.team-collection{padding-top:68px}.team-collection .emblem-card{background:linear-gradient(160deg,#112338,#101821 78%)}.team-collection .emblem-card.apex{background:linear-gradient(145deg,#302b36,#111725)}
.tiers-explained{margin-top:72px;padding:clamp(23px,4vw,52px);display:grid;grid-template-columns:1fr 1.25fr;gap:55px;border:1px solid #5c503b;background:linear-gradient(130deg,#15263a,#0c1725)}.tiers-explained h2{font:500 clamp(30px,4vw,46px)/1.18 Georgia,serif;margin:20px 0}.tiers-explained>div>p:last-child{color:#adbbca;font-size:12px;line-height:2;max-width:450px}.conditions{background:#0a1524;border:1px solid #334458;padding:20px 22px}.conditions h3{font-size:13px;color:#e4c289;letter-spacing:.08em;margin:0 0 13px}.condition{display:flex;gap:19px;align-items:center;border-top:1px solid #26364b;padding:14px 0}.condition>span{font:28px Georgia,serif;color:#c4a474;min-width:45px}.condition p{margin:0}.condition b{font-size:13px}.condition small{display:block;color:#9baec0;font-size:11px;line-height:1.7;margin-top:5px}.condition.special{border:1px solid #ad875b;margin:0 -9px;padding:12px 9px;background:linear-gradient(90deg,#9e704216,transparent)}.conditions .small-print{color:#8fa3b5;font-size:10px;line-height:1.8;margin:12px 0 0}
.endline{margin:48px 0 20px;display:flex;align-items:center;gap:11px;border-top:1px solid #35465a;padding:22px 0;font-size:10px;letter-spacing:.12em;color:#8fa0af}.endline img{object-fit:contain}.endline a{margin-left:auto;color:#e6c58c;font-size:12px;letter-spacing:0}footer{border-top:1px solid #344153;padding:18px clamp(18px,4vw,70px);display:flex;justify-content:space-between;gap:12px;color:#8799ac;font-size:10px;line-height:1.8}
.emblem-modal{border:1px solid #bd9b65;background:linear-gradient(155deg,#172941,#091421);color:#f8f1e9;text-align:center;width:min(440px,calc(100% - 30px));padding:42px 27px 32px;box-shadow:0 30px 100px #000b}.emblem-modal::backdrop{background:#02060be8;backdrop-filter:blur(4px)}.modal-close{position:absolute;top:8px;right:12px;width:40px;height:40px;color:#ebc98c;border:0;background:transparent;font-size:28px}.modal-medal{width:min(75%,260px);margin:auto;filter:drop-shadow(0 0 25px #e0b67933)}#modal-kicker{letter-spacing:.18em;font-size:10px;color:#bfa477}#modal-title{margin:15px 0 8px;font:26px Georgia,serif}#modal-text{font-size:12px;color:#a8b7c7;line-height:1.8;margin-bottom:0}
.noscript{padding:18px;max-width:1240px;margin:auto}
@media(max-width:1020px){.highlights{grid-template-columns:repeat(3,1fr)}.highlights .guide-note{grid-column:1/-1;border-top:1px solid #28384b}.emblem-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.emblem-card{min-height:245px;padding:18px 9px}.emblem-card .tier-emblem{width:min(100%,130px)}}
@media(max-width:700px){.sitehead{flex-wrap:wrap;justify-content:center;padding:13px 12px;gap:14px}.identity{font-size:10px}.identity small{font-size:8px}.nav{width:100%;justify-content:center;gap:19px;font-size:11px}.hero{grid-template-columns:1fr}.hero-copy{padding:35px 23px 9px}.hero h1{font-size:clamp(45px,10vw,65px);margin-top:23px}.hero-showcase{min-height:230px}.halo{width:204px;height:204px}.halo:before{inset:16px}.hero-medal{width:190px}.mini-medal{width:67px;right:17%;bottom:14%}.showcase-caption{left:7%;bottom:12%;font-size:9px}.highlights>div{padding:13px 10px}.highlights strong{font-size:27px}.highlights span{font-size:8px}.highlights .guide-note{font-size:11px}.collection{padding-top:45px}.section-head h2{font-size:29px}.section-head{align-items:center}.section-stamp{display:none}.emblem-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.emblem-card{min-height:229px;padding:13px 7px}.emblem-card .tier-emblem{width:min(95%,128px)}.emblem-label{font-size:11px}.emblem-card .caption{font-size:11px}.tiers-explained{grid-template-columns:1fr;gap:24px;padding:23px 16px;margin-top:48px}.conditions{padding:12px}.condition{gap:7px}.condition small{font-size:10px}.endline{flex-wrap:wrap;font-size:9px}.endline a{margin-left:auto}footer{display:block;font-size:10px}footer span{display:block;margin-top:7px}}
@media(max-width:350px){.emblem-card{min-height:200px}.emblem-card .tier-emblem{width:109px}.nav{gap:12px}.hero h1{font-size:41px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Production 3D-finish upgrade, clear jewel emblems at every screen size */
.emblem-card .tier-emblem{width:min(100%,175px);filter:drop-shadow(0 9px 13px #000d) drop-shadow(0 0 14px #d6ab5535);transition:transform .22s ease}
.emblem-card:hover .tier-emblem{transform:scale(1.085)}
.hero-medal{filter:drop-shadow(0 22px 31px #000e) drop-shadow(0 0 29px #d9a05a69)}
.mini-medal{filter:drop-shadow(0 0 14px #d9ac5c71)}
.emblem-card.apex{background:radial-gradient(ellipse at 50% 30%,#702a272a 0,#0d1726 78%)}
.emblem-card.elite{border-color:#99774f7d}
@media(max-width:700px){.emblem-card .tier-emblem{width:min(100%,145px)}}