/* herocrawl.ru — the landing. Ported from the design canvas «Лендинг Hero Crawl» (21.10): same colours, type and art. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#140d08;color:#f2e4c4;font-family:'Alegreya Sans',system-ui,sans-serif;-webkit-text-size-adjust:100%}
img{max-width:100%}
a{color:#ecc56f}a:hover{color:#f8dc9c}
h1,h2,h3,h4,h5,p{margin:0}
.page{container-type:inline-size;overflow:hidden}
.rel{position:relative}
.wm{font-family:'Alegreya SC',serif;font-weight:800;letter-spacing:.03em;color:#ecc56f;text-shadow:0 2px 0 #4a2a0c,0 4px 22px rgba(0,0,0,.85)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 28px;border-radius:10px;font-family:'Alegreya SC',serif;font-weight:800;font-size:20px;letter-spacing:.03em;text-decoration:none;border:2px solid #1a0f08;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 2px #a9772e,0 8px 20px rgba(0,0,0,.55);cursor:pointer}
.btn-red{background:linear-gradient(#c8352a,#86190f);color:#fbe7b5}.btn-red:hover{background:linear-gradient(#d9442f,#9a2015);color:#fff4d6}
.btn-stone{background:linear-gradient(#5f5851,#38322d);color:#f2e4c4}.btn-stone:hover{background:linear-gradient(#6d655d,#433c36);color:#fff}
.btn-sm{min-height:44px;font-size:17px;padding:0 20px}
.btn-md{align-self:flex-start;min-height:46px;font-size:18px;padding:0 22px;margin-top:auto}
.btn-lg{align-self:flex-start;min-height:54px;font-size:20px;padding:0 28px;margin-top:6px}
.btn-xl{min-height:64px;font-size:26px;padding:0 64px}

/* hero */
.masthead{position:relative;min-height:clamp(620px,60cqi,880px);display:flex;flex-direction:column;overflow:hidden;background:#0f0905}
.masthead>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-wide{object-position:50% 0%}
.hero-sq{display:none;object-position:50% 0%}
.shade-hero{position:absolute;inset:0;background:radial-gradient(ellipse 42% 26% at 50% 16%,rgba(10,6,12,.6) 0%,rgba(10,6,12,0) 100%),linear-gradient(180deg,rgba(10,6,12,.88) 0%,rgba(10,6,12,.45) 16%,rgba(10,6,12,0) 34%,rgba(10,6,12,0) 62%,rgba(10,6,4,.72) 82%,rgba(10,6,4,.96) 100%)}
.nav{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px clamp(16px,4cqi,48px)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand .wm{font-size:22px}
.navlinks{display:flex;gap:28px;font-size:17px;font-weight:500}
.nl{color:#f2e4c4;text-decoration:none;padding:10px 0}.nl:hover{color:#ecc56f}
.hero-title{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:clamp(8px,2cqi,32px) 16px 0}
.hero-title h1{font-size:clamp(56px,8cqi,112px);line-height:.9}
.hero-title p{max-width:680px;font-size:clamp(17px,1.6cqi,22px);line-height:1.4;text-shadow:0 2px 12px rgba(0,0,0,.95)}
.hero-gap{flex:1;min-height:240px}
.hero-cta{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 16px clamp(32px,4cqi,56px)}
.row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px}
.btn-daily{min-height:64px;padding:0 24px 0 14px;gap:12px;text-align:left}
.btn-daily .col{display:flex;flex-direction:column;gap:2px;line-height:1.1}
.btn-daily .t{font-size:20px}
.btn-daily .s{font-family:'Alegreya Sans',sans-serif;font-weight:500;font-size:14px;letter-spacing:0;color:#d9c6a0}
.muted-line{font-size:16px;letter-spacing:.05em;color:#eadab6;text-shadow:0 1px 8px rgba(0,0,0,.9)}

.stats{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 56px;padding:26px clamp(16px,4cqi,48px);background:#21160e;border-top:2px solid #6b5537;border-bottom:2px solid #33251a}
.stats div{display:flex;align-items:baseline;gap:10px}
.stats b{font-family:'Alegreya SC',serif;font-weight:800;font-size:34px;color:#ecc56f}
.stats span{font-size:18px;color:#d9c6a0}

/* sections */
.sec{position:relative;padding:clamp(56px,6cqi,88px) clamp(16px,5cqi,64px)}
.sec.alt{background:#19100a;border-top:2px solid #33251a}
.wrap{max-width:1200px;margin:0 auto;display:flex;flex-direction:column}
.gap64{gap:64px}.gap36{gap:36px}.gap32{display:flex;flex-direction:column;gap:32px}.gap28{display:flex;flex-direction:column;gap:28px}
.wrap.gap32{gap:32px}.wrap.gap28{gap:28px}
.head{display:flex;flex-direction:column;gap:14px}
.eyebrow{font-family:'Alegreya SC',serif;font-weight:700;font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:#c99a4b}
.eyebrow.small{font-size:14px;letter-spacing:.14em}
.head h2{font-family:'Alegreya SC',serif;font-weight:800;font-size:clamp(32px,4cqi,52px);line-height:1.05;color:#f2e4c4}
.lead{max-width:660px;font-size:clamp(17px,1.4cqi,20px);line-height:1.5;color:#d4c09a}
.chap-row{display:flex;align-items:center;gap:16px}
.chap-row>div{display:flex;flex-direction:column;gap:4px}
.chap-row h3{font-family:'Alegreya SC',serif;font-weight:800;font-size:28px;color:#ecc56f}
.chap-row p{font-size:17px;color:#c8b28a}
.chap{flex:none;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#1c140e;border:2px solid #e3b960;color:#f6e3b4;font-family:'Alegreya SC',serif;font-weight:800;font-size:22px}
.split{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.split.center{gap:40px 48px}
.shot-wrap{position:relative;flex:1 1 560px;min-width:0}
.cut-goblin{position:absolute;right:7%;top:-126px;width:200px;z-index:2}
.frame{border:3px solid #6a6259;border-radius:6px;box-shadow:inset 0 0 0 2px #2a221b,0 0 0 2px #241b14,0 18px 40px rgba(0,0,0,.6)}
.shot{position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:#000}
.shot img{display:block;width:100%;height:100%;object-fit:cover}
.steps{flex:1 1 360px;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px}
.steps li,.daily-facts li{display:flex;gap:16px;align-items:flex-start}
.steps li>div,.daily-facts li>div{display:flex;flex-direction:column;gap:4px}
.steps h4,.daily-facts h4{font-family:'Alegreya SC',serif;font-weight:800;font-size:22px;color:#f2e4c4}
.steps p,.daily-facts p{font-size:17px;line-height:1.5;color:#d4c09a}
.stepn{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#1c140e;border:2px solid #a9772e;color:#f6e3b4;font-family:'Alegreya SC',serif;font-weight:800;font-size:19px}

.pwood{background:#1a110b url(img/9bc11e4b.webp) center/cover}
.pwood-dim{position:absolute;inset:0;background:rgba(16,10,6,.74);border-radius:inherit}
.pwood-dim.flat{border-radius:0}
.panel{position:relative;border-radius:10px;border:1px solid #3a2a1c;padding:clamp(24px,3.4cqi,44px)}
.combos{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:36px 30px}
.combo{display:flex;flex-direction:column;align-items:center;gap:12px}
.combo-name{display:flex;align-items:center;gap:10px}
.combo-name>span:first-child{font-family:'Alegreya SC',serif;font-weight:800;font-size:22px;color:#f2e4c4}
.combo-name.gold>span:first-child{color:#ecc56f}
.note{text-align:center;font-size:15px;color:#b9a37d}
.card{position:relative;flex:none;width:var(--cw,76px);aspect-ratio:3/4;border-radius:8px;overflow:hidden;border:3px solid #3a67c9;background:#1d1510;box-shadow:0 8px 18px rgba(0,0,0,.55)}
.card img{display:block;width:100%;height:100%;object-fit:cover}
.card .num{position:absolute;top:5%;left:6%;width:36%;aspect-ratio:1;border-radius:50%;background:#1c140e;border:2px solid #e3b960;color:#f6e3b4;font-family:'Alegreya SC',serif;font-weight:800;font-size:calc(var(--cw,76px)*.22);display:flex;align-items:center;justify-content:center;line-height:1}
.s-g{border-color:#5f9e33}.s-r{border-color:#b8322a}.s-b{border-color:#3a67c9}
.card.hero{box-shadow:0 0 0 2px #e3b960,0 0 16px rgba(227,185,96,.5),0 8px 18px rgba(0,0,0,.55)}
.card.boss{border-color:#e3b960;box-shadow:0 0 0 2px #7a1712,0 0 20px rgba(210,50,30,.6),0 8px 18px rgba(0,0,0,.55)}
.card.elite{border-color:#d0281c;box-shadow:0 0 0 2px #ff6a48,0 0 24px rgba(255,80,40,.6),0 8px 18px rgba(0,0,0,.55)}
.card .grey{position:absolute;inset:0;background:rgba(40,40,40,.45)}
.fan{display:flex;align-items:flex-end}
.fan>.card+.card{margin-left:calc(var(--cw,76px)*-.42)}
.bonus{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:999px;background:#3b2a12;border:1px solid #a9772e;color:#f6dca0;font-weight:700;font-size:16px}
.banners{display:flex;flex-wrap:wrap;gap:16px}
.ban{flex:1 1 250px;display:flex;gap:14px;align-items:center;padding:14px 16px;background:#1d130c;border:1px solid #3a2a1c;border-radius:8px}
.ban img{flex:none}
.ban>div{display:flex;flex-direction:column;gap:4px}
.ban h4{font-family:'Alegreya SC',serif;font-weight:800;font-size:19px;color:#ecc56f}
.ban p{font-size:15px;line-height:1.4;color:#cdb995}
.foes{position:relative;display:flex;flex-direction:column;gap:28px;padding:clamp(24px,3.4cqi,44px);border-radius:10px;border:1px solid #3a2a1c;background:#1a100b}
.cut-imp{position:absolute;right:4%;top:-62px;width:160px;z-index:3}
.foes-row{display:flex;flex-wrap:wrap;gap:28px 40px}
.elite-col{flex:1 1 300px;display:flex;flex-direction:column;gap:16px}
.lords-col{flex:2 1 560px;display:flex;flex-direction:column;gap:16px}
.foes h4{font-family:'Alegreya SC',serif;font-weight:800;font-size:21px;color:#f2e4c4}
.elite-col>p{font-size:16px;line-height:1.5;color:#d4c09a}
.elite-pairs{display:flex;flex-wrap:wrap;gap:18px}
.pair{display:flex;align-items:center;gap:6px}
.lords{display:flex;flex-wrap:wrap;gap:16px}
.lords article{flex:1 1 180px;display:flex;flex-direction:column;gap:8px}
.lord{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:6px;border:3px solid}
.lords .tag{font-family:'Alegreya SC',serif;font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.lords h5{font-family:'Alegreya SC',serif;font-weight:800;font-size:19px;color:#f2e4c4}
.lords .tip{font-size:15px;line-height:1.45;color:#ecc56f}

/* modes */
.modes{display:flex;flex-wrap:wrap;gap:20px}
.mode{position:relative;flex:1 1 260px;display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:10px;min-height:300px;background-color:#22170f;background-repeat:no-repeat;background-size:cover;border:1px solid #4a3626}
.mode>*{position:relative}
.mode>.mode-dim,.mode>.deal{position:absolute}
.mode-dim{inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(22,14,9,.97) 0%,rgba(22,14,9,.9) 42%,rgba(22,14,9,.5) 70%,rgba(22,14,9,.15) 100%)}
.mode-main{border:2px solid #e3b960;box-shadow:0 0 0 1px #5a3d16,0 0 30px rgba(227,185,96,.22)}
.mode-main .mode-dim{background:linear-gradient(180deg,rgba(38,24,12,.96) 0%,rgba(30,19,10,.86) 42%,rgba(20,12,6,.35) 72%,rgba(20,12,6,0) 100%)}
.mode p{font-size:16px;line-height:1.5;color:#e0cda6;text-shadow:0 1px 2px rgba(0,0,0,.8)}
.mode p.dim{color:#cdb995}
.mode h3,.ngp h3{margin-top:4px;font-family:'Alegreya SC',serif;font-weight:800;font-size:24px;color:#f2e4c4}
.m-camp{background-image:url(img/d38e2441.webp);background-position:22% 78%}
.m-deal{background-image:url(img/9bc11e4b.webp);background-position:center;overflow:hidden}
.m-hall{background-image:url(img/2a542353.webp);background-position:50% 100%}
.m-tut{background-image:url(img/e0a7c4de.webp);background-size:auto 80%;background-position:12% 100%}
.ribbon{position:absolute!important;top:-15px;left:20px;display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:6px;background:linear-gradient(#c8352a,#86190f);border:1px solid #e3b960;box-shadow:0 4px 10px rgba(0,0,0,.5);font-family:'Alegreya SC',serif;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#fbe7b5}
.mode-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.time{display:flex;align-items:flex-end}
.time p,.inf{font-family:'Alegreya SC',serif!important;font-weight:800;font-size:40px!important;line-height:1!important;color:#ecc56f!important}
.time small,.inf .sm{font-size:20px}
.mode-ico{flex:none;width:60px;height:60px;margin:-10px -4px 0 0}
.candle{flex:none;display:block;width:46px;height:auto;margin:-14px 2px -2px -6px}
.deal{left:0;right:0;bottom:20px;display:flex;justify-content:center;align-items:flex-end;gap:6px;pointer-events:none;--cw:66px}
.ngp-bg{background:#140b10 url(img/8adc4366.webp) center 25%/cover}
.ngp{position:relative;flex:2 1 560px;min-width:0;border-radius:10px;border:1px solid #6b3a2a;overflow:hidden}
.ngp-dim{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(16,9,8,.95) 0%,rgba(16,9,8,.82) 50%,rgba(16,9,8,.6) 100%)}
.ngp-in{position:relative;display:flex;flex-wrap:wrap;gap:28px 36px;align-items:flex-start;padding:24px}
.ngp-text{flex:1 1 280px;display:flex;flex-direction:column;gap:10px}
.ngp-text>p{font-size:17px;line-height:1.5;color:#e0cda6}
.ngp-text>p.small{font-size:15px;color:#c8b28a}
.inf{display:flex;align-items:baseline;gap:10px}
.inf .candle{align-self:flex-end}
.inf .big{font-size:56px;line-height:40px}
.medallions{flex:1 1 260px;align-self:center;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:340px}
.medallion{display:block;width:100%;aspect-ratio:1;border-radius:50%;border:3px solid #b8743a;object-fit:cover;box-shadow:0 4px 12px rgba(0,0,0,.6)}
.t-1{border-color:#b8743a}.t-2{border-color:#c9ccd1}.t-3{border-color:#e8bf4f}.t-4{border-color:#e3b960;box-shadow:0 0 0 2px #7a1712,0 0 14px rgba(220,60,30,.55)}

/* daily */
.daily-sec{padding-bottom:clamp(120px,12cqi,170px);border-top:2px solid #33251a}
.daily-card{position:relative;background:#22170f;padding:clamp(20px,3cqi,36px)}
.cut-skel{position:absolute;left:6%;top:calc(100% - 4px);width:140px;z-index:3}
.daily-row{display:flex;flex-wrap:wrap;gap:32px 44px}
.daily-main{flex:1 1 300px;display:flex;flex-direction:column;gap:14px}
.daily-main h3{font-family:'Alegreya SC',serif;font-weight:800;font-size:40px;line-height:1;color:#f2e4c4}
.daily-main .lead{font-size:17px}
.daily-main .score{font-size:16px;color:#c8b28a}
.daily-facts{flex:2 1 480px;min-width:0;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.medals{display:flex;flex-wrap:wrap;gap:8px}
.medals[hidden],.score[hidden]{display:none}
.medal{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;background:#2a1d13;border:1px solid #4a3626;color:#f2e4c4;font-weight:700;font-size:16px}
.dot{display:inline-block;flex:none;width:14px;height:14px;border-radius:50%;background:#3a2a1c;border:1px solid #5a4632}
.d-b{background:#b8743a;border-color:#d79457}.d-s{background:#c9ccd1;border-color:#eef0f2}.d-g{background:#e8bf4f;border-color:#ffe08a}

/* news */
.news{display:flex;flex-wrap:wrap;gap:24px}
.news article{flex:1 1 300px;display:flex;flex-direction:column;background:#1d130c;border:1px solid #3a2a1c;border-radius:10px;overflow:hidden}
.news article>img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.news article>div{display:flex;flex-direction:column;gap:8px;padding:20px}
.news .date{font-size:14px;color:#b9a37d}
.news h3{font-family:'Alegreya SC',serif;font-weight:800;font-size:22px;color:#f2e4c4}
.news article>div>p:last-child{font-size:16px;line-height:1.5;color:#cdb995}

/* platforms */
.phone-wrap{flex:1 1 480px;min-width:0;display:flex;justify-content:center}
.phone{width:100%;max-width:620px;padding:12px;border-radius:34px;background:#0b0806;box-shadow:0 0 0 2px #3a2a1c,0 24px 50px rgba(0,0,0,.6)}
.phone img{display:block;width:100%;aspect-ratio:844/390;object-fit:cover;border-radius:22px}
.plats{flex:1 1 480px;display:flex;flex-wrap:wrap;gap:16px}
.plat{flex:1 1 240px;display:flex;flex-direction:column;gap:10px;padding:20px;background:#22170f;border:1px solid #3a2a1c;border-radius:10px}
.plat h3{font-family:'Alegreya SC',serif;font-weight:800;font-size:21px;color:#f2e4c4}
.plat p{font-size:15px;line-height:1.45;color:#cdb995}
.plat .btn{margin-top:4px;min-height:46px;font-size:17px;padding:0 20px}

/* faq */
.faq{flex-direction:row;flex-wrap:wrap;gap:32px 64px}
.faq-head{flex:1 1 300px}
.faq-list{flex:999 1 560px;min-width:0;display:flex;flex-direction:column}
details{border-bottom:1px solid #3d2c1f;padding:18px 0}
summary{cursor:pointer;font-family:'Alegreya SC',serif;font-weight:700;font-size:21px;color:#f2e4c4}
summary::marker{color:#c99a4b}
details p{margin:12px 0 0;font-size:17px;line-height:1.55;color:#d4c09a}

/* camp */
.camp{position:relative;min-height:560px;display:flex;align-items:center;padding:clamp(56px,6cqi,88px) clamp(16px,5cqi,64px);overflow:hidden;border-top:2px solid #33251a}
.camp-bg{background:#0b0d18 url(img/d38e2441.webp) center 70%/cover}
.camp-dim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,14,.2) 0%,rgba(8,8,14,.55) 45%,rgba(8,8,14,.85) 100%)}
.camp-hero{position:absolute;left:clamp(0px,6cqi,120px);bottom:0;height:92%;z-index:1}
.camp-in{position:relative;z-index:2;margin-left:auto;max-width:560px;display:flex;flex-direction:column;gap:18px}
.camp-in h2{font-size:clamp(40px,5cqi,68px);line-height:1}
.camp-in p{font-size:clamp(17px,1.5cqi,21px);line-height:1.5;color:#eadab6}
.camp-in .btn-xl{min-height:60px;font-size:24px;padding:0 52px;margin-top:6px}

.foot{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:center;justify-content:space-between;padding:28px clamp(16px,5cqi,64px);background:#0f0905;border-top:2px solid #33251a}
.foot .wm{font-size:18px}
.foot .ver{font-size:15px;color:#a8936f}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 28px;font-size:16px}
.foot-links a{padding:10px 0}

@container (max-width:860px){.navlinks{display:none}.hide-sm{display:none}.cut-goblin{width:150px;top:-95px}.cut-imp{width:120px;top:-50px}.cut-skel{width:110px}}
@container (max-width:960px){.m-tut{background-size:cover}}
@container (max-width:700px){.hero-wide{display:none}.hero-sq{display:block}.btn-xl{padding:0 44px}}
@container (max-width:600px){.ban{flex-basis:150px}.split,.shot-wrap,.steps,.phone-wrap,.plats,.lords-col,.daily-facts{flex-basis:100%}.cut-goblin,.cut-imp{display:none}.lords .tag{font-size:10px;letter-spacing:.04em;overflow-wrap:anywhere}.combo{margin-bottom:0!important}.combos{gap:28px 20px}.lords{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.lords h5{font-size:15px}.lords .tip{font-size:13px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* the beta key dialog (landing.ts): «Играть» and every link into the game open it */
.keydlg{width:min(480px,calc(100vw - 32px));padding:0;border:3px solid #6a6259;border-radius:8px;background:#22170f;color:#f2e4c4;box-shadow:inset 0 0 0 2px #2a221b,0 24px 60px rgba(0,0,0,.7)}
.keydlg::backdrop{background:rgba(10,6,4,.78)}
.keyform{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px clamp(18px,5vw,32px)}
.keyform h2{font-size:32px;line-height:1.1}
.keytext{font-size:17px;line-height:1.5;color:#e0cda6}
.keylabel{font-weight:700;margin-top:4px}
.keybox{display:flex;align-items:center;min-height:52px;border-radius:10px;border:1px solid #5a4632;background:#1d130c}
.keybox:focus-within{outline:2px solid #e3b960;outline-offset:2px}
.keybox .pre{padding-left:14px;font:700 clamp(16px,4.6vw,20px)/1 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.06em;color:#8f7a5a}
.keybox input{flex:1;min-width:0;min-height:50px;padding:0 12px 0 4px;border:0;background:transparent;color:#f6e3b4;font:700 clamp(16px,4.6vw,20px)/1 'Alegreya Sans',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.keybox input:focus{outline:none}
.keyhint{font-size:15px;line-height:1.45;color:#b9a37d}
.keyerr{min-height:1.4em;color:#ff9b85;font-weight:700}
.keyrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.keyrow .btn[disabled]{opacity:.6;cursor:wait}
.keyx{position:absolute;top:8px;right:10px;width:40px;height:40px;border:0;background:none;color:#b9a37d;font-size:30px;line-height:1;cursor:pointer}
.keyx:hover{color:#f2e4c4}

/* 21.10 phase 2: the day's rating under the daily card (landing.ts fills it from <play>/api/daily) */
.daily-top{position:relative;margin-top:24px;padding-top:20px;border-top:1px solid rgba(201,154,75,.3);display:flex;flex-direction:column;gap:10px}
.daily-top ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-width:560px}
.daily-top li{display:grid;grid-template-columns:2em 1fr auto 18px;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;background:rgba(0,0,0,.28);font-size:17px}
.daily-top li .rk{color:#b9a37d;text-align:right;font-variant-numeric:tabular-nums}
.daily-top li .nk{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.daily-top li.bot .nk{color:#c9b48c}
.daily-top li .sc{font-weight:700;color:#ecc56f;font-variant-numeric:tabular-nums}
.daily-top li .dot{width:16px;height:16px}
.daily-top li .dot.d-n{background:rgba(255,255,255,.08);border-radius:50%}
.daily-top-foot{font-size:14px;color:#b9a37d}