@font-face{font-family:HTRDisplay;src:url('/Assets/fonts/Bangers-Regular.ttf') format('truetype');font-display:swap}
:root{--db-ink:#5d341c;--db-brown:#7c4824;--db-orange:#e95f08;--db-gold:#ffc14e;--db-cream:#fff3d4;--db-edge:#a66b32}
html{scroll-behavior:smooth;scroll-padding-top:100px}body.comic-theme{background:#71cee8;color:var(--db-ink);font-family:'Be Vietnam Pro',Arial,sans-serif}.htr-header a,.db-main a,.db-footer a{text-decoration:none;color:inherit}.htr-header{position:sticky;top:0;z-index:10001;min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:22px;padding:14px max(24px,calc((100vw - 1280px)/2));background:linear-gradient(#173b48f5,#133c44e8);border-bottom:3px solid #dfaa53;box-shadow:0 4px 15px #173b4830}.htr-brand{display:flex;align-items:center;gap:12px;font-weight:900;font-size:17px;letter-spacing:-.7px;line-height:1.2;color:#ffd258!important;text-shadow:2px 2px #743e1a}.htr-brand small{display:block;font-size:8px;font-weight:700;letter-spacing:2px;color:#faefcf;margin-top:7px;text-shadow:none}.htr-ball{display:grid;place-items:center;width:47px;height:47px;flex-shrink:0;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff7ad,#ffc43f 33%,#ef8816 66%,#b84f05);border:2px solid #ffc65e;box-shadow:0 0 0 2px #783a13,0 0 25px #ffb33c30;color:#dc461a;font-size:25px;text-shadow:none}.htr-nav{display:flex;align-items:center;gap:27px;font-size:12px;font-weight:800;text-transform:uppercase;color:#f9e4b7}.htr-nav a:hover,.htr-account a:hover{color:#ffc459}.htr-nav i{display:none}.htr-account{display:flex;align-items:center;gap:15px;font-size:11px;font-weight:700;color:#fff3d8}.htr-account i{margin-right:5px}.htr-topup{padding:12px 18px;color:#fff9dd!important;background:linear-gradient(#fa9b28,#da5709);border:2px solid #eeb963;border-radius:7px;box-shadow:0 3px #753617}.htr-menu-button{display:none;background:none;border:0;color:#ffe5ab;font-size:26px;padding:8px}.mobile-side-menu{background:#173f47!important;z-index:10000!important;top:88px!important}.mobile-side-menu .menu-inner a{color:#fff0c8!important}.mobile-side-menu .menu-inner a:hover{background:#315d5a!important}.mobile-menu-overlay{z-index:9999!important}
.db-main *,.db-footer *{box-sizing:border-box}.db-main h1,.db-main h2,.db-main h3{font-family:'Be Vietnam Pro',Arial,sans-serif;text-shadow:none;text-transform:none}.db-main p{margin:0}.db-main [hidden]{display:none!important}.db-hero{height:690px;position:relative;isolation:isolate;display:flex;align-items:center;background:#78cfe9 url('/Assets/images/dragon-landscape.png') center 47%/cover no-repeat;overflow:hidden;border-bottom:0}.db-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#e8fbff40,transparent 65%);z-index:-1}.db-hero:after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:80px;background:linear-gradient(transparent,#65b996);pointer-events:none}.db-hero-title{position:relative;z-index:2;text-align:center;width:52%;max-width:770px;margin-left:max(15px,calc((100vw - 1300px)/2));padding:20px 0 70px}.db-hero-title>p{font-size:11px;letter-spacing:2.2px;font-weight:900;color:#285c55;margin-bottom:18px;text-shadow:0 1px #fff}.db-hero h1{margin:0;font-size:clamp(44px,5.7vw,83px);font-weight:1000;line-height:1.06;letter-spacing:-3px;transform:rotate(-4deg);filter:drop-shadow(0 7px 0 #58251a)}.db-hero h1 span,.db-hero h1 strong{display:block;-webkit-text-stroke:2px #623016;paint-order:stroke fill;text-shadow:3px 3px #623016;font-weight:1000}.db-hero h1 span{color:#ffe67f;font-size:.82em}.db-hero h1 strong{color:#ff9e12}.db-hero-ribbon{margin:25px auto 0;display:inline-block;background:linear-gradient(#fff4d8,#ecd298);border:2px solid #a96b31;border-radius:4px;padding:10px 22px;box-shadow:0 4px #754b29;font-size:10px;font-weight:900;letter-spacing:1.1px;color:#7e421e}.db-begin{display:block;width:max-content;margin:28px auto 0;font-size:11px;font-weight:900;color:#315950!important;text-shadow:0 1px #fff}.db-begin span{display:block;font-size:26px;line-height:1.3}.db-age{position:absolute;right:28px;top:20px;font-size:22px;font-weight:900;color:#fff;background:#294b4d90;padding:7px 12px;border:1px solid #fff8;border-radius:6px;z-index:3;text-align:center}.db-age small{display:block;font-size:7px;font-weight:500}.db-hero-poster{position:absolute;right:max(35px,calc((100vw - 1290px)/2));top:45px;width:41%;max-width:540px;aspect-ratio:1;border:6px solid #ffe9aa;outline:2px solid #9a652f;border-radius:12px;box-shadow:0 20px 40px #27412f50;transform:rotate(3deg);z-index:1;overflow:hidden}.db-hero-poster img{display:block;width:100%;height:100%;object-fit:cover}
.db-world{position:relative;background:linear-gradient(#65b996 0,#9bdbd5 400px,#b5e5e3 900px,#75c2ba 1800px,#afddcf 2600px,#d0e9ca 100%);padding:0 24px 30px}.db-world:before{content:'';position:absolute;inset:0;opacity:.15;background-image:radial-gradient(#226844 1px,transparent 1px);background-size:12px 12px;pointer-events:none}.db-world>section{position:relative;max-width:1180px;margin-left:auto;margin-right:auto}.db-parchment{background:radial-gradient(ellipse at 25% 15%,#fff7df88,transparent 60%),linear-gradient(105deg,#e9c88e,#fff1cf 13%,#f7e6be 80%,#e7c48a);border:3px solid #9e682f;border-radius:18px 10px 23px 9px;box-shadow:inset 0 0 0 3px #e9c695,inset 0 0 34px #9d652a33,0 6px 0 #704621,0 14px 30px #1f5c5c20;color:var(--db-ink)}.db-scroll-title{position:relative;margin:-39px auto 0;width:max-content;max-width:95%;text-align:center;padding:17px 45px 19px;background:linear-gradient(100deg,#e4bf81,#fff0c6 18%,#f8e0aa 80%,#d5a96e);border:2px solid #ad7a41;border-radius:7px 14px 6px 12px;box-shadow:inset 0 0 0 3px #f9e6bc,0 4px 0 #805b30;font-size:27px;font-weight:900!important;letter-spacing:-1px;line-height:1.25;color:#875021!important;filter:drop-shadow(0 2px 2px #815d3440)}.db-scroll-title:before,.db-scroll-title:after{content:'✦';font-size:19px;color:#bb8b4d;position:absolute;top:21px}.db-scroll-title:before{left:15px}.db-scroll-title:after{right:15px}.db-download{margin-top:-75px;padding:0 40px 22px;z-index:5}.db-download>p{text-align:center;font-weight:600;font-size:12px;padding:20px 0;color:#946537}.db-download-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.db-download-button{display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 12px;border-radius:8px;border:2px solid #fff5;box-shadow:0 0 0 1px #70502660,0 4px 0 #75411e;color:#fff!important;min-height:77px;transition:filter .2s,transform .2s}.db-download-button:hover{filter:brightness(1.12);transform:translateY(-2px)}.db-download-button>i:first-child{font-size:29px}.db-download-button>i:last-child{font-size:12px;opacity:.8;margin-left:auto}.db-download-button small{display:block;font-size:8px;letter-spacing:1.5px}.db-download-button b{display:block;font-size:15px;line-height:1.5;white-space:nowrap}.db-download-pc{background:linear-gradient(#71a641,#438725)}.db-download-android{background:linear-gradient(#e47a17,#bd4a07)}.db-download-ios{background:linear-gradient(#354555,#15232d)}.db-register{background:linear-gradient(#258c9c,#17606c)}.db-download-bottom{display:flex;justify-content:center;gap:20px;align-items:center;padding-top:21px;font-size:10px;font-weight:600;color:#966c43}.db-download-bottom>span{color:#bd8c4a}.db-download-bottom i{margin-right:5px}
.db-news{margin-top:105px;padding:0 32px 30px}.db-news-tabs{display:flex;gap:9px;justify-content:center;margin:26px auto 26px}.db-news-tabs button{border:1px solid #b8864c;border-radius:5px;background:#ead3a5;color:#915d30;font:800 12px "Be Vietnam Pro",Arial;padding:12px 30px;cursor:pointer;box-shadow:inset 0 0 0 2px #f6e6c7}.db-news-tabs button[aria-selected=true]{background:linear-gradient(#f69026,#d75908);border-color:#b54b0c;color:#fff9e9;box-shadow:inset 0 0 0 2px #ffb455}.db-news-content{display:grid;grid-template-columns:1fr 1.15fr;gap:35px}.db-news-poster{position:relative;display:block;min-width:0;height:360px;border:3px solid #b47d3d;border-radius:6px;overflow:hidden;background:#f8b32f}.db-news-poster img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%}.db-news-poster>span{position:absolute;bottom:0;left:0;right:0;padding:16px 20px;background:#38230edf;color:#fff3cd;font-size:12px;font-weight:700;display:flex;justify-content:space-between;gap:10px}.db-list-kicker{font-size:9px;letter-spacing:1.2px;font-weight:800;color:#a4743b;margin:0 0 15px!important}.db-news-list{padding:8px 0}.db-news-lead{display:block;padding:0 0 17px;border-bottom:1px dashed #b88b534d}.db-news-lead>span{font-size:8px;display:inline-block;padding:4px 8px;background:#e9bd76;color:#874b19;border-radius:3px;font-weight:800}.db-news-lead h3{font-size:19px;line-height:1.6;margin:10px 0 6px;font-weight:900;color:#74401c}.db-news-lead p{font-size:11px;color:#9b754a;line-height:1.9}.db-news-row{display:flex;align-items:center;gap:9px;padding:16px 0;border-bottom:1px dashed #b88b5355;font-size:11px;font-weight:600;line-height:1.7}.db-news-row>span{font-size:7px;color:#b76422;font-weight:800;border:1px solid #cba36d;padding:2px 5px;flex-shrink:0}.db-news-row>b{margin-left:auto;font-size:18px;color:#b76f25}.db-all{display:flex;align-items:center;gap:20px;justify-content:flex-end;font-size:10px;font-weight:800;color:#a0581c!important;margin:17px 0 0}.db-all:hover,.db-news-row:hover,.db-news-lead:hover{color:#db5b07!important}
.db-activities{margin-top:75px}.db-section-title{text-align:center;font-size:31px;letter-spacing:-1px;line-height:1.4;font-weight:900;color:#426137!important;text-shadow:0 2px #e9f7d2!important;margin:0}.db-section-title>span{font-size:19px;vertical-align:middle;color:#bc8738;margin:0 18px}.db-section-subtitle{text-align:center;font-size:11px;font-weight:500;color:#487d64;margin-top:12px!important}.db-activity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px}.db-activity{display:block;border:3px solid #a47739;border-radius:12px;overflow:hidden;background:#fbebc6;box-shadow:0 4px #79542a,0 7px 18px #27524020;transition:transform .2s}.db-activity:hover{transform:translateY(-5px)}.db-activity-image{height:190px;overflow:hidden;border-bottom:3px solid #ad783b}.db-activity-image img{width:100%;height:100%;object-fit:cover;display:block}.db-activity-land img{object-position:20% 40%;transform:scale(1.6)}.db-activity-fight img{object-position:85% 18%}.db-activity-team img{object-position:75% 60%;transform:scale(1.8)}.db-activity>div:last-child{padding:22px 21px}.db-activity>div>span{font-size:8px;letter-spacing:1px;font-weight:800;color:#b77b37}.db-activity h3{font-size:19px;font-weight:900;color:#7c491e;margin:9px 0}.db-activity p{font-size:11px;line-height:1.9;color:#997345;min-height:45px}.db-activity b{display:block;font-size:10px;color:#c86913;margin-top:15px}
.db-intro{margin-top:110px;padding:0 35px 35px}.db-intro-layout{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:35px;padding-top:35px}.db-gameplay{display:block;border:3px solid #a6753a;border-radius:9px;padding:0;overflow:hidden;background:#233d31;position:relative;cursor:zoom-in;aspect-ratio:16/10}.db-gameplay img{display:block;width:100%;height:100%;object-fit:cover}.db-gameplay>span{position:absolute;bottom:0;left:0;right:0;background:#163c39cd;padding:16px;color:#fff8dd;font:800 11px 'Be Vietnam Pro',Arial;letter-spacing:1px}.db-gameplay>span i{margin-right:8px}.db-intro-copy h3{font-size:30px;font-weight:900;letter-spacing:-1px;color:#8c4d1f;line-height:1.2;margin:0 0 16px}.db-intro-copy h3 em{font-style:normal;color:#d77914;font-size:20px;letter-spacing:6px}.db-intro-copy>p:not(.db-list-kicker){font-size:11px;color:#916b40;line-height:1.95;margin-bottom:12px}.db-gold-button{display:inline-flex;align-items:center;justify-content:center;gap:20px;background:linear-gradient(#ffc65e,#ed901f);border:2px solid #aa611c;box-shadow:inset 0 0 0 2px #ffe298,0 3px #805224;border-radius:6px;padding:12px 23px;font-size:11px;font-weight:900;color:#7a3d16!important;transition:filter .2s}.db-gold-button:hover{filter:brightness(1.1)}
.db-end-cta{text-align:center;padding:65px 0 25px}.db-end-cta>p{font-size:10px;letter-spacing:3px;font-weight:800;color:#648150}.db-end-cta h2{font-size:32px;color:#426137;margin:13px 0 23px;font-weight:900;letter-spacing:-1px;text-shadow:0 2px #fff3bc}.db-end-cta .db-gold-button{padding:16px 40px;font-size:13px}.db-dragonballs{display:flex;justify-content:center;gap:12px;margin-top:35px}.db-dragonballs>span{display:grid;place-items:center;width:35px;height:35px;line-height:1;letter-spacing:-1px;font-size:6px;border-radius:50%;color:#cf4b13;background:radial-gradient(circle at 30% 25%,#fff7ab,#ffca47 30%,#ed8f1c 70%);border:1px solid #d18d25;box-shadow:0 2px #a56b17}.db-footer{background:#173d3e;border-top:4px solid #a78748;display:flex;align-items:center;justify-content:space-between;gap:25px;padding:35px max(24px,calc((100vw - 1180px)/2));color:#bad4c1}.db-footer>p,.db-footer nav{font-size:10px}.db-footer nav{display:flex;gap:20px}.htr-home .dragon-end{display:none}.htr-home .site-disclaimer{background:#173d3e;color:#9db8aa!important;font-size:9px!important;line-height:1.9!important;margin:0!important;max-width:none!important;padding:0 20px 25px!important;text-align:center}
.htr-lightbox{border:2px solid #b58b4a;background:#173d3e;padding:10px;max-width:95vw;max-height:95vh;margin:auto;border-radius:9px;overflow:auto}.htr-lightbox::backdrop{background:#12281be8}.htr-lightbox img{display:block;width:100%;max-height:84vh;object-fit:contain}.htr-lightbox>button{display:block;margin:0 0 8px auto;border:1px solid #ffe6ac;background:#294b43;color:#ffe6ac;font-size:25px;width:38px;height:38px;border-radius:50%;cursor:pointer}.game-notice-overlay .game-notice{background:linear-gradient(115deg,#edcf96,#fff1d2);border:3px solid #af7d3a;border-radius:18px;color:#764b27}.game-notice-overlay .notice-icon{display:none}.game-notice-overlay .notice-label{color:#955222}.game-notice-overlay .game-notice>p{color:#8c6a3e}.game-notice-overlay .notice-close{color:#8a5425;background:#f2daaa}.game-notice-overlay .notice-btn{border-radius:7px}.htr-download-empty{font-size:12px;line-height:1.8;color:#8b643d}a:focus-visible,button:focus-visible{outline:3px solid #ef8b19;outline-offset:5px}
@media(min-width:769px){.mobile-side-menu,.mobile-menu-overlay{display:none!important}}
@media(max-width:1100px){.htr-brand{font-size:14px}.htr-nav{gap:16px;font-size:10px}.htr-account{font-size:10px;gap:10px}.htr-header{gap:15px}.db-hero{height:590px}.db-hero-poster{top:60px;right:25px}.db-download{padding-left:25px;padding-right:25px}.db-download-grid{gap:11px}.db-download-button{gap:8px;padding:12px 9px}.db-download-button b{font-size:12px}.db-download-button>i:first-child{font-size:25px}.db-download-button>i:last-child{display:none}.db-news-poster{height:345px}.db-news-content{gap:25px}.db-intro-layout{gap:25px}}
@media(max-width:768px){.htr-header{min-height:76px;padding:13px 20px}.htr-brand{font-size:16px}.htr-nav,.htr-account{display:none}.htr-menu-button{display:block}.mobile-side-menu{top:76px!important}.db-hero{height:800px;align-items:flex-start;background-position:center}.db-hero-title{width:100%;max-width:none;margin:0;padding:35px 16px 0}.db-hero-title>p{font-size:8px;letter-spacing:1.5px;margin-bottom:13px}.db-hero h1{font-size:56px;letter-spacing:-2px}.db-hero-ribbon{margin-top:20px;font-size:8px;padding:9px 16px}.db-begin{display:none}.db-hero-poster{top:310px;right:50%;transform:translateX(50%) rotate(2deg);width:380px;max-width:79%;border-width:4px}.db-age{font-size:16px;right:12px;top:13px;padding:5px 8px}.db-age small{display:none}.db-world{padding:0 17px 25px}.db-download{margin-top:-90px;padding:0 20px 20px}.db-scroll-title{font-size:21px;padding:15px 35px;margin-top:-30px;letter-spacing:-.6px}.db-scroll-title:before,.db-scroll-title:after{top:18px;font-size:14px}.db-scroll-title:before{left:10px}.db-scroll-title:after{right:10px}.db-download>p{font-size:10px;line-height:1.8;padding:18px 0 15px}.db-download-grid{grid-template-columns:repeat(2,1fr);gap:13px}.db-download-button{min-height:70px;gap:10px}.db-download-button b{font-size:12px}.db-download-button small{font-size:7px;letter-spacing:.5px}.db-download-bottom{gap:11px;font-size:8px;flex-wrap:wrap}.db-news{margin-top:85px;padding:0 20px 25px}.db-news-tabs{margin:25px 0 20px;gap:7px}.db-news-tabs button{padding:11px 17px;font-size:9px;flex:1;white-space:nowrap}.db-news-content{grid-template-columns:1fr;gap:24px}.db-news-poster{height:auto;aspect-ratio:1.15}.db-news-list{padding:0}.db-news-lead h3{font-size:17px}.db-news-row{font-size:10px;gap:8px;padding:14px 0}.db-news-row>span{font-size:6px}.db-activities{margin-top:50px}.db-section-title{font-size:24px;letter-spacing:-.8px}.db-section-title>span{font-size:14px;margin:0 6px}.db-section-subtitle{font-size:10px;padding:0 18px;line-height:1.9}.db-activity-grid{grid-template-columns:1fr;gap:20px;margin-top:24px}.db-activity{display:grid;grid-template-columns:38% 1fr}.db-activity-image{height:100%;min-height:170px;border-bottom:0;border-right:2px solid #ad783b}.db-activity>div:last-child{padding:17px}.db-activity h3{font-size:16px;line-height:1.5}.db-activity p{font-size:10px;min-height:0}.db-activity b{font-size:9px;margin-top:12px}.db-activity>div>span{font-size:6px}.db-intro{margin-top:85px;padding:0 20px 25px}.db-intro-layout{grid-template-columns:1fr;padding-top:25px;gap:25px}.db-intro-copy h3{font-size:28px}.db-intro-copy>p:not(.db-list-kicker){font-size:11px}.db-end-cta{padding:48px 0 15px}.db-end-cta h2{font-size:24px;line-height:1.5}.db-footer{flex-direction:column;padding:25px 20px;gap:20px;text-align:center}.db-dragonballs{gap:9px}.db-dragonballs>span{width:31px;height:31px;font-size:5px}}
@media(max-width:390px){.db-hero h1{font-size:47px}.db-hero{height:730px}.db-hero-poster{top:285px}.htr-brand{font-size:13px}.db-scroll-title{font-size:18px}.db-news-tabs button{padding:11px 10px}.db-download-button{gap:7px}.db-download-button>i:first-child{font-size:20px}.db-download-button b{font-size:10px}.db-section-title{font-size:21px}.db-activity h3{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
/* Character artwork floats directly above the landscape, as on the reference. */
.db-hero-poster{top:0;right:max(15px,calc((100vw - 1270px)/2));width:51%;max-width:670px;height:690px;aspect-ratio:auto;border:0;outline:0;border-radius:0;box-shadow:none;transform:none;overflow:visible;filter:drop-shadow(0 12px 10px #23452e44)}.db-hero-poster img{object-fit:contain}
@media(max-width:1100px) and (min-width:769px){.db-hero-poster{height:590px;right:5px;top:0;width:51%}}
@media(max-width:768px){.db-hero-poster{top:238px;right:50%;transform:translateX(50%);width:95%;max-width:550px;height:505px;border:0}.db-hero-title{z-index:2}}
@media(max-width:390px){.db-hero-poster{top:222px;height:450px}}

/* Official Huyen Thoai Rong branding. */
.htr-header{padding-top:10px;padding-bottom:10px}.htr-brand-logo{display:block;width:150px;height:70px;object-fit:contain}.db-footer .htr-brand-logo{width:175px;height:auto}.db-hero h1{transform:none;filter:drop-shadow(0 5px 3px #42301940)}.db-hero-logo{display:block;width:100%;max-width:520px;height:auto;max-height:270px;object-fit:contain;margin:0 auto}.game-notice-overlay .notice-icon{display:block;width:180px;height:auto;margin:0 auto 18px;background:none;border:0;box-shadow:none;border-radius:0}.game-notice-overlay .notice-icon img{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:768px){.htr-header{padding-top:8px;padding-bottom:8px}.htr-brand-logo{width:128px;height:60px}.db-hero-logo{max-height:145px;max-width:320px}.db-hero-title{padding-top:22px}.db-footer .htr-brand-logo{width:165px;height:auto}}

/* Five-point stars arranged inside each Dragon Ball. */
.db-dragonballs>span{overflow:hidden;box-shadow:inset -2px -3px 5px #c86a1038,inset 2px 2px 4px #fff6b060,0 2px #a56b17}.db-dragonballs>span svg{display:block;width:100%;height:100%;fill:#c94313;filter:drop-shadow(0 .5px .3px #92310e30)}

/* Keep the closing notice full width so the page background cannot show beside it. */
body.htr-home{background-color:#173d3e}.htr-home .site-disclaimer{width:100%;box-sizing:border-box}

/* Show the supplied gameplay screenshots without the old zoom crops. */
.db-activity-grid .db-activity-image{background:#f4dfb6}.db-activity-grid .db-activity-image img{transform:none;object-fit:contain;object-position:center}.db-intro .db-gameplay{aspect-ratio:1279/718}.db-intro .db-gameplay img{object-fit:contain}

/* Compact mobile hero: the download panel overlaps the character at the waist. */
@media(max-width:768px){
 .db-hero{height:580px}
 .db-hero-poster{top:180px;height:600px}
 .db-hero-poster img{object-position:center top}
}
@media(max-width:390px){
 .db-hero{height:540px}
 .db-hero-poster{top:165px;height:560px}
}