/* Scroll inside the VK frame even when the surrounding page is fixed. */
html.vk-embedded{height:100%;overflow:hidden}
html.vk-embedded body{height:100vh;height:100dvh;min-height:0;overflow-y:auto;overflow-x:clip;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#42a4d8 #d7dfea}
.trends{padding:22px}
.trends .section-heading{margin-bottom:20px}
.trend-line{gap:16px}
.people{gap:14px;min-width:0}
.trend-person{flex-basis:122px;height:146px}
.trend-person .person{height:100%;width:100%}
.announce{flex-basis:106px;font-size:17px}
.announce img{width:56px;height:56px;margin-bottom:8px}
@media(min-width:851px) and (max-width:1180px){
  .header{min-height:118px;padding:12px 16px}
  main{padding:20px}
  .floating{height:100px}
  .floating button{font-size:24px}
  .main-grid{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}
  .main-grid>div,.spotlight-copy{min-width:0}
  .game{padding:18px}
  .game-top{grid-template-columns:140px minmax(0,1fr);gap:14px}
  .online{padding:16px 10px 12px}
  .online>span{font-size:15px}
  .online strong{font-size:36px;margin:6px 0 14px}
  .gender-stats{font-size:11px}
  .gender-stats span{padding:8px 3px}
  .question-wrap,.question-wrap textarea{min-height:160px}
  .question-wrap textarea{height:160px;padding:16px 18px 28px;font-size:16px}
  .game-actions{margin-top:14px;gap:10px}
  .game-actions>span{font-size:12px}
  .suggest{width:48px;height:42px;font-size:28px}
  .play{min-width:130px;padding:10px 18px;font-size:17px}
  .game-caption{margin-top:12px;font-size:10px}
  .spotlight{padding:14px}
  .spotlight-top{height:180px;grid-template-columns:minmax(0,1fr) 96px;gap:10px}
  .spotlight-copy .spotlight-text{padding:12px 10px;font-size:14px;line-height:1.35;overflow-wrap:normal;overflow-y:auto}
  .spotlight-actions{margin-top:12px;gap:6px}
  .spotlight-actions .primary{padding:10px 8px;font-size:15px;min-width:0}
  .spotlight-actions .arrow{width:34px;height:40px;font-size:28px;flex-shrink:0}
  .spotlight-buy{padding:10px 14px;font-size:16px}
  .help-links{margin-top:20px}
}
@media(max-width:850px){
  .trends{padding:16px}
  .trend-person{flex-basis:104px;height:128px}
  .announce{flex-basis:84px;font-size:14px}
  .announce img{width:44px;height:44px}
  .trend-line,.people{gap:12px}
}

@font-face{font-family:Montserrat;src:url('assets/fonts/Montserrat-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:Montserrat;src:url('assets/fonts/Montserrat-SemiBold.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:Montserrat;src:url('assets/fonts/Montserrat-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
.gender-stats span{white-space:nowrap;font-size:14px}
.game-actions>span{font-weight:700}
@media(min-width:701px){
 .spotlight{padding:12px}
 .spotlight-top{height:200px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
 .spotlight-copy{position:relative;gap:0}
 .spotlight-copy>b{position:absolute;top:8px;left:10px;right:8px;font-size:11px;padding:0}
 .spotlight-copy .spotlight-text{height:200px;padding:30px 12px 12px;font-size:14px;line-height:1.4;overflow-wrap:break-word;overflow-y:auto}
 .spotlight-photo{height:200px}
 .spotlight-actions{margin-top:12px;gap:10px}
 .spotlight-actions .primary{padding:10px 8px;font-size:15px;min-width:0}
 .spotlight-actions .arrow{width:38px;height:38px;font-size:28px;flex-shrink:0}
 .spotlight-position{margin-top:4px}
 .spotlight-buy{margin-top:8px;padding:10px;font-size:16px}
 body.game-active>.header,body.game-active>footer{display:none}
 body.game-active main{padding:12px;max-width:1100px}
 body.game-active #game-room{padding-top:0}
 .room-toolbar{margin-bottom:12px}
 .room-grid{grid-template-columns:minmax(110px,1fr) minmax(270px,1.7fr) minmax(110px,1fr);gap:18px}
 .roster{gap:12px}
 .gamer-photo{height:clamp(95px,calc((100dvh - 110px)/3),150px)}
 .gamer{border-width:3px;border-radius:14px}
 .gamer-caption{font-size:11px;padding:6px 4px;gap:1px}
 .gamer-caption>span{font-size:9px}
 .round-banner{padding:10px;margin-bottom:12px;font-size:18px}
 .round-question{padding:12px;min-height:0;max-height:230px;overflow-y:auto}
 .round-question h2{font-size:17px;margin-bottom:10px}
 .question-bubble{padding:12px;font-size:14px;line-height:1.4}
 .previous-answer{font-size:11px;margin:8px 0!important}
 .sample-answers{margin-top:8px;font-size:10px}
 .question-rating{margin:10px 4px;font-size:11px}
 #answer-form textarea{height:66px;min-height:66px;resize:none;padding:12px;font-size:14px}
 #answer-form button{font-size:15px;padding:10px 18px}
 .round-progress{margin:8px 0;font-size:10px}
 .next-round{padding:8px;font-size:12px}
 .room-hint{margin:8px 0;font-size:10px}
 .choice-panel{padding-top:12px}
 .choice-panel h2{font-size:18px;margin-bottom:14px}
 .choose-person{padding:12px;margin-bottom:12px;font-size:16px}
 .dialog-paper{min-height:0}
 .dialog-messages{height:clamp(180px,calc(100dvh - 440px),330px)}
 .dialog-layout{margin-top:16px}
 .edit-modal{padding:16px;width:min(880px,calc(100vw - 24px))}
 .edit-modal .modal-heading{margin-bottom:12px}
 .profile-notice{padding:10px 14px;margin-bottom:12px;font-size:12px}
 .edit-layout{grid-template-columns:180px minmax(0,1fr)}
 .edit-layout.first-entry{display:block}
 #profile-form{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;align-items:start}
 #profile-form .form-block{margin:0}
 #profile-form .form-block h3{font-size:12px;margin-bottom:6px}
 #profile-form input:not([type=checkbox]),#profile-form select{min-height:34px;padding:8px;font-size:12px;margin-bottom:4px}
 .profile-photo-upload,.profile-form-actions{grid-column:1/-1}
 .photo-upload-row>img{width:55px;height:64px}
 .photo-upload-label{padding:7px 12px;font-size:12px}
 .profile-photo-upload #photo-upload-status{margin:4px 0;font-size:10px}
 .profile-photo-upload small{font-size:9px}
 .edit-sidebar .profile-photo{height:210px}
 .edit-menu{padding:10px;margin-top:12px}
 .edit-menu button{padding:7px 0;font-size:11px}
 .form-options{gap:8px}
 .form-options .outline{font-size:11px;padding:7px}
 .profile-form-actions{margin-top:4px}
 .profile-form-actions button{padding:9px 16px;font-size:14px}
}
@media(max-width:700px){
 body.game-active>.header,body.game-active>footer{display:none}
 body.game-active main{padding:10px}
 body.game-active #game-room{padding-top:0}
 .room-toolbar{margin-bottom:10px}
 .gamer-photo{height:78px}
 .roster{gap:5px}
 .room-grid{gap:10px}
 .round-banner{padding:10px;margin-bottom:10px;font-size:17px}
 .round-question{min-height:0;padding:12px}
 .round-question h2{font-size:16px;margin-bottom:8px}
 .question-bubble{padding:10px;font-size:14px}
 .question-rating{margin:8px 0}
 #answer-form textarea{min-height:60px;height:60px;resize:none;padding:12px}
 .round-progress,.room-hint{margin:7px 0}
 .dialog-paper{min-height:0}
 .dialog-messages{height:240px}
}

/* Home dimensions supplied by the designer, shared across VK widths. */
@font-face{font-family:Montserrat;src:url('assets/fonts/Montserrat-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
.header{min-height:100px;padding:12px 18px;gap:16px}
.header nav{gap:14px}
.nav-item{position:relative;font-size:13px;font-weight:500;gap:6px;padding:0 4px}
.nav-item img{width:52px;height:52px}
.account{min-width:250px;padding:10px}
.account-title{font-size:17px}
.balances{font-size:13px}
main{padding-top:20px}
.trends{height:200px;padding:16px 20px}
.trends .section-heading{height:28px;margin-bottom:18px}
.trends .section-heading h1{font-size:16px}
.trend-line{height:120px;gap:14px}
.trend-person{flex:0 0 100px;height:120px}
.trend-person .person{width:100px;height:120px}
.announce{flex:0 0 85px;height:120px;font-size:13px;border-radius:16px}
.announce img{width:40px;height:40px;margin:4px auto 8px}
.people{gap:14px}
.trends .arrow{width:36px;height:28px;font-size:25px}
.floating{height:85px}
.floating button{font-size:20px}
.online>span{font-size:15px}
.online strong{font-size:32px}
.gender-stats span{font-size:13px}
.question-wrap textarea{font-size:13px}
.spotlight-copy .spotlight-text{font-size:13px}
.primary{font-size:14px;padding:9px 16px;border-radius:20px}
.play{font-size:14px;min-width:120px;padding:9px 16px}
.suggest{width:42px;height:36px;font-size:25px}
.game-actions>span{font-size:13px;font-weight:700}
.spotlight-actions .primary,.spotlight-buy{font-size:13px;padding:9px 10px}
.spotlight-actions .arrow{width:32px;height:34px;font-size:24px}
.help-links button,footer button{font-size:12px;padding:6px 10px}
.nav-badge{position:absolute;top:0;right:0;min-width:27px;height:27px;padding:0 4px;border-radius:50%;display:grid;place-items:center;background:#b7e4f7;color:#247ba4;font-size:16px;font-weight:500;line-height:1}
#vk-verified{cursor:pointer}
#likes-room .outline{font-size:13px;padding:8px 14px}
.likes-pagination button{min-width:130px}
.likes-pagination{margin:24px 0 14px;gap:12px}
.likes-pagination .outline{min-height:36px}
.likes-grid{margin-top:24px;gap:16px}
.like-card-bottom p{font-size:16px}
.like-actions button{width:40px;height:40px}
.like-actions{gap:12px}
.likes-title,.dialog-placeholder h1{font-size:22px}
.dialog-placeholder p{font-size:13px}
.dialog-empty{font-size:13px;padding:16px}
.dialog-tabs button{font-size:13px}
@media(max-width:850px){
 .header{min-height:0}
 .header nav{gap:8px}
 .account{min-width:0}
 .nav-item{font-size:13px}
 .nav-item img{width:52px;height:52px}
}
@media(max-width:500px){
 .trends{padding:16px 12px}
 .trends .section-heading h1{font-size:16px}
 .header nav{gap:12px;justify-content:flex-start}
 .nav-item{flex-shrink:0}
 .likes-pagination button{min-width:0}
}

/* Header: 527 px menu + 36 px gap + 300 px account at 911 px. */
@media(min-width:864px){
 .header{height:100px;min-height:100px;padding:12px 24px;border:0;gap:36px;flex-direction:row;align-items:center}
 .header nav{height:72px;flex:1 1 527px;max-width:527px;min-width:480px;gap:0;justify-content:space-between;overflow:visible}
 .nav-item{width:80px;height:72px;flex:0 0 80px;padding:0;gap:4px;align-content:center;font-size:13px;line-height:16px}
 .nav-item img{width:52px;height:52px}
 .account{width:300px;min-width:300px;height:76px;flex:0 0 300px;padding:8px;border:0;outline:1px solid #eee;border-radius:20px}
 .account-title{height:28px;gap:8px;font-size:16px;line-height:20px}
 .account-title>img{width:28px;height:28px;flex-shrink:0}
 .account-title>img.verified{width:20px;height:20px}
 .account-title b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .balances{height:24px;margin-top:8px;gap:4px;font-size:13px;line-height:18px}
 .balances>span{width:140px;flex:0 0 140px;height:24px;padding:0 6px;gap:4px;border-radius:10px;white-space:nowrap}
 .balances img{width:18px;height:18px;flex-shrink:0}
}
@media(max-width:863px){
 .header{height:auto;min-height:0;flex-direction:column-reverse;align-items:stretch;padding:12px;gap:12px}
 .header nav{height:72px;gap:8px;justify-content:flex-start;overflow-x:auto}
 .nav-item{width:80px;height:72px;flex:0 0 80px;padding:0;gap:4px;align-content:center;font-size:13px;line-height:16px}
 .account{width:min(300px,100%);min-width:0;align-self:flex-end;padding:8px}
 .account-title{font-size:16px}
 .account-title>img{width:28px;height:28px}
 .account-title>img.verified{width:20px;height:20px}
 .balances{font-size:13px;gap:4px;margin-top:8px}
 .balances>span{min-width:0;height:24px;padding:0 5px;gap:4px;white-space:nowrap}
 .balances img{width:18px;height:18px}
}

/* Game reference: full-sized on tall screens, fitted on short desktop frames. */
body.game-active>.header{display:flex}
body.game-active>footer{display:flex;margin-top:24px}
body.game-active main{max-width:1100px;padding:40px}
body.game-active #game-room{padding:0}
.game-active .room-toolbar{margin-bottom:12px;font-size:12px}
.game-active .room-grid{grid-template-columns:220px minmax(0,300px) 220px;justify-content:space-between;gap:45px}
.game-active .roster{gap:48px}
.game-active .gamer{width:220px;height:220px;border:4px solid white;border-radius:18px}
.game-active .gamer-photo{width:100%;height:100%}
.game-active .gamer-caption{font-size:13px;padding:10px 6px;gap:2px}
.game-active .gamer-caption>span{font-size:12px}
.game-active .gamer.selected{outline:0;box-shadow:0 0 0 5px #b5e5f255,0 0 30px #42a4d866}
.game-active .gamer.female.selected{box-shadow:0 0 0 5px #e68ba766,0 0 32px #e65d9477}
.game-active .round-banner{height:49px;display:flex;align-items:center;justify-content:center;gap:4px;padding:10px 8px;font-size:16px;white-space:nowrap;margin-bottom:45px}
.game-active .round-question{min-height:260px;max-height:none;padding:16px}
.game-active .round-question h2{font-size:17px}
.game-active .question-bubble{font-size:13px;line-height:1.45}
.game-active .answer-history,.game-active .previous-answer,.game-active .sample-answers,.game-active .room-hint,.game-active .round-progress{font-size:12px}
.game-active .question-rating{font-size:12px;margin:20px 0}
.gamer-presence{position:absolute;top:10px;left:10px;width:17px;height:17px;border:2px solid white;border-radius:50%;background:#00bc98;pointer-events:none}
.gamer-presence.offline{background:#e25068}
.game-active .gamer-info,.gamer-gift{position:absolute;top:8px;width:24px;height:24px;border:0;border-radius:50%;background:white;padding:3px;color:#42a4d8}
.game-active .gamer-info{right:38px}
.gamer-gift{right:8px}
.gamer-info img,.gamer-gift img{width:100%;height:100%;display:block}
.room-profile{display:flex;align-items:center;gap:20px}
.room-profile>img{width:160px;height:180px;object-fit:cover;border-radius:16px}
@media(min-width:701px) and (max-height:950px){
 body.game-active main{padding:20px 40px 12px}
 body.game-active>footer{display:none}
 .game-active .room-grid{grid-template-columns:minmax(110px,220px) minmax(270px,300px) minmax(110px,220px);gap:28px}
 .game-active .roster{gap:clamp(10px,calc((100dvh - 540px)/5),48px)}
 .game-active .gamer{width:100%;height:clamp(95px,calc((100dvh - 210px)/3.7),220px)}
 .game-active .round-banner{margin-bottom:clamp(12px,calc((100dvh - 600px)/5),45px)}
 .game-active .round-question{min-height:150px;max-height:210px;overflow-y:auto;padding:12px}
 .game-active .question-rating{margin:10px 0}
 .game-active #answer-form textarea{min-height:56px;height:56px;font-size:13px}
 .game-active .room-hint{margin:6px 0}
}
@media(max-width:700px){
 body.game-active main{padding:12px}
 body.game-active>footer{display:none}
 .game-active .room-grid{grid-template-columns:1fr 1fr;gap:12px}
 .game-active .roster{gap:5px}
 .game-active .gamer{width:100%;height:85px;border-width:2px}
 .game-active .gamer-caption{font-size:9px;padding:5px 2px}
 .game-active .round-banner{height:42px;margin-bottom:12px;font-size:15px}
 .game-active .round-question{min-height:0}
 .game-active .gamer-info,.gamer-gift{width:18px;height:18px;top:4px;padding:2px}
 .game-active .gamer-info{right:24px}
 .gamer-gift{right:4px}
 .gamer-presence{width:12px;height:12px;top:5px;left:5px}
}
@media(min-width:701px) and (max-height:950px){
 .game-active .gamer{width:clamp(95px,calc((100dvh - 210px)/3.7),220px);height:clamp(95px,calc((100dvh - 210px)/3.7),220px)}
 .game-active .roster.women .gamer{justify-self:end}
}
body.game-active>footer{display:none}
.game-active .room-toolbar{display:none}
@media(min-width:701px) and (min-height:951px){.game-active .round-question{min-height:290px}}

/* Desktop game photos keep the exact designer-specified size at every height. */
@media(min-width:701px){
 .game-active .room-grid{grid-template-columns:220px 300px 220px;gap:45px}
 .game-active .gamer{width:220px;height:220px}
 .game-active .gamer-photo{width:100%;height:100%}
 .game-active .roster{gap:48px}
 .game-active .round-banner{margin-bottom:45px}
}

/* Compact round layout: exact photos, tighter gutters, readable question. */
@media(min-width:701px){
 .game-active .room-grid{grid-template-columns:220px 300px 220px;gap:20px;justify-content:center}
 .game-active .roster{gap:16px}
 .game-active .round-banner{margin-bottom:24px}
 .game-active .round-question{width:300px;min-height:291px;height:auto;max-height:none;overflow:visible;padding:16px}
}
.game-active #answer-form{position:relative;gap:0;padding-bottom:18px}
.game-active #answer-form textarea{min-height:88px;height:88px;padding:16px 16px 30px;font-size:13px}
.game-active #answer-form button{position:relative;margin-top:-18px;min-height:36px;font-size:14px;padding:8px 16px}
.game-active .question-rating>span{line-height:1.5}
.game-active .question-rating small{display:block;font-size:12px}

.result-visual{max-width:780px;margin:0 auto}
.result-visual h1{font-size:24px;margin:0 0 12px}
.result-visual .choice-legend{display:flex;justify-content:center;gap:20px;font-size:12px;margin:0 0 20px}
.choice-legend span:first-child{color:#597ac2}.choice-legend span:last-child{color:#ba4778}
.result-board{position:relative;display:grid;grid-template-columns:220fr 340fr 220fr;align-items:start;width:100%}
.result-side{display:grid;gap:16px}
.game-active .result-person{width:100%;height:auto;aspect-ratio:1;min-width:0}
.choice-arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.choice-line{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:choice-reveal .9s ease-out forwards}
.choice-line.blue{stroke:#7995d9}.choice-line.pink{stroke:#d96796}
.result-center{position:relative;padding:12px 16px;color:#6a7185;font-size:12px;pointer-events:none}
.result-center strong{display:block;color:#cf5487;margin-top:12px;font-size:16px}
.result-visual .result-help{font-size:13px;line-height:1.5;margin:20px 0}
.result-visual>#result-private{margin:20px 12px 0 0}
@keyframes choice-reveal{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.choice-line{animation:none;stroke-dashoffset:0}}
@media(max-width:700px){
 .result-side{gap:calc((100vw - 24px)*16/780)}
 .result-center{font-size:10px;padding:4px 8px}
 .result-visual h1{font-size:20px}
 .result-visual .choice-legend{font-size:10px;gap:10px}
 .game-active .result-person .gamer-caption{font-size:10px}
 .game-active .result-person .gamer-caption>span{display:block;font-size:9px}
}
/* Match reveal and compact conversation. */
.choice-line{animation-duration:3s}
.match-screen{max-width:620px;margin:0 auto;text-align:center;position:relative;animation:match-appear .45s ease-out}
.match-screen h1{font-size:24px;margin:0 0 24px}
.match-screen .match-photos{max-width:456px;gap:16px;position:relative}
.match-screen .match-photos>div{height:260px}
.match-screen .match-photos:before{content:'♥';position:absolute;font-size:440px;line-height:1;color:#d66d9a33;left:50%;top:50%;transform:translate(-50%,-45%);pointer-events:none}
.match-screen .match-photos span{font-size:14px;padding:12px}
.match-screen>p{font-size:14px;line-height:1.5;margin:20px 0}
.match-screen #first-message{margin:16px auto;gap:12px}
.match-screen #first-message input{font-size:13px;padding:12px 16px}
.match-screen #first-message button{font-size:14px;padding:12px 24px}
.match-screen>.outline{font-size:12px;padding:8px 12px;margin:8px 4px}
.game-active .chat-panel{height:500px;max-height:calc(100dvh - 140px);min-height:280px;grid-template-columns:minmax(0,1fr) 210px;gap:16px;padding:16px;margin:0;overflow:hidden}
.game-active .chat-conversation{min-height:0;height:100%;overflow:hidden}
.game-active .chat-title{padding:0 0 12px;flex-wrap:wrap;align-items:center;gap:8px}
.game-active .chat-title h2{font-size:15px;margin:0}
.game-active .chat-title>.outline{font-size:12px;line-height:16px;padding:6px 10px;border-radius:14px;min-height:30px}
.game-active .chat-messages{height:auto;min-height:0;flex:1;overflow-y:auto;padding:12px;box-shadow:none}
.game-active .chat-message{font-size:13px;line-height:1.45;padding:9px 12px}
.game-active .chat-empty{font-size:12px}
.game-active #chat-form{margin-top:10px;gap:8px;flex-shrink:0}
.game-active #chat-input{font-size:13px;padding:10px 12px;border-radius:14px}
.game-active #chat-form .primary{font-size:20px;padding:6px 14px}
.game-active .chat-sidebar{overflow-y:auto;min-height:0}
.game-active .chat-contact{font-size:13px;padding:10px;margin:12px 0}
.game-active .chat-tabs{gap:12px;margin:0 0 12px}
.game-active .chat-tabs button{font-size:12px}
.game-active .chat-sidebar>.room-hint{font-size:11px;line-height:1.45}
@keyframes match-appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){
 .game-active .chat-panel{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);height:500px;max-height:calc(100dvh - 200px);padding:12px;gap:8px}
 .game-active .chat-sidebar{grid-row:1;max-height:90px;overflow:auto}
 .game-active .chat-conversation{grid-row:2}
 .game-active .chat-contact{margin:0;padding:6px}
 .match-screen h1{font-size:20px}
 .match-screen .match-photos>div{height:220px}
 .match-screen #first-message{flex-direction:row}
 .match-screen #first-message button{padding:10px 14px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.choice-line{animation:none}.match-screen{animation:none}}
body.game-active #game-room .chat-title .outline{font-size:12px!important;line-height:16px;padding:6px 10px;min-height:30px}
body.game-active #game-room .chat-message{font-size:13px!important;line-height:1.45;padding:9px 12px;border-radius:14px}
@media(max-width:700px){
 body.game-active #game-room .chat-panel{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
 body.game-active #game-room .chat-sidebar{grid-column:1;grid-row:1}
 body.game-active #game-room .chat-conversation{grid-column:1;grid-row:2;padding:12px}
}
/* Home names recede through the open space behind the cards. */
main{isolation:isolate}
main>.trends,main>.main-grid,main>.demo-note{position:relative;z-index:1}
main>.main-grid{margin-top:85px}
#floating{position:absolute;left:0;right:0;bottom:0;height:auto;min-height:200px;overflow:hidden;z-index:0;pointer-events:none}
#floating button{pointer-events:auto;font-size:38px;font-weight:500;white-space:nowrap;padding:4px;background:none;transform-origin:center;animation:name-recede var(--name-duration,10s) linear infinite;will-change:transform,opacity}
#floating button:hover,#floating button:focus-visible{animation-play-state:paused}
@keyframes name-recede{0%{opacity:0;transform:translate(0,20px) scale(1)}12%{opacity:.8;transform:translate(0,8px) scale(.95)}75%{opacity:.35;transform:translate(var(--name-drift),-28px) scale(.35)}100%{opacity:0;transform:translate(var(--name-drift),-42px) scale(.05)}}
body.game-active #game-room .chat-title{justify-content:flex-start;column-gap:4px}
body.game-active #game-room .chat-title>span{margin-right:auto}
body.game-active #game-room .chat-title .outline{margin:0}
.dialog-heading{column-gap:4px}
@media(max-width:700px){#floating button{font-size:32px}main>.main-grid{margin-top:64px}}
@media(prefers-reduced-motion:reduce){#floating button{opacity:.6;transform:none;font-size:20px}#floating button:nth-child(n+7){display:none}}
body.no-motion #floating button{opacity:.6;transform:none;font-size:20px}
body.no-motion #floating button:nth-child(n+7){display:none}

/* Компактное меню профиля */
.profile-modal .profile-menu {
    padding: 12px !important;
    gap: 4px !important;
}

.profile-modal .profile-menu-button {
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    min-height: 28px !important;
    padding: 4px 0 !important;
    gap: 8px !important;
    margin: 0 !important;
}

.profile-modal .profile-menu-button > img {
    width: 20px !important;
    height: 20px !important;
}

.profile-modal .photo-panel {
    margin-bottom: 12px !important;
}

.profile-modal .profile-details {
    padding: 12px !important;
    margin-top: 12px !important;
}

.profile-modal .profile-details p {
    font-size: 12px !important;
    line-height: 18px !important;
    margin-bottom: 8px !important;
}

.profile-modal .profile-details p:last-child {
    margin-bottom: 0 !important;
}

.profile-modal .profile-menu-button > svg.profile-menu-icon {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px;
    display: block;
}

#modal .profile-menu {
    padding: 12px !important;
    gap: 4px !important;
}

#modal .profile-menu .profile-menu-button {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    min-height: 28px !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
}

#modal .profile-menu .profile-menu-button > span {
    font-size: 12px !important;
    line-height: 18px !important;
}

#modal .profile-menu .profile-menu-button > img,
#modal .profile-menu .profile-menu-button > svg {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
}

#modal .edit-menu {
    padding: 12px !important;
    margin-top: 12px !important;
}

#modal .edit-menu p {
    font-size: 12px !important;
    font-weight: 600;
    margin: 0 0 4px !important;
}

#modal .edit-menu button {
    font-family: inherit !important;
    font-size: 12px !important;
    line-height: 18px !important;
    padding: 6px 0 !important;
}

#modal .photo-upload-row button,
#modal .photo-upload-row label,
#modal .photo-upload-row input {
    font-family: inherit !important;
    font-size: 12px !important;
}

#modal .photo-upload-row p,
#modal .photo-upload-row small {
    font-family: inherit !important;
    font-size: 11px !important;
    line-height: 16px !important;
}

/* Футер внизу страницы рейтинга */
body:has(#top-room:not([hidden])) {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}
body:has(#top-room:not([hidden])) > .header {
    flex-shrink: 0;
}
body:has(#top-room:not([hidden])) > main {
    flex: 1 0 auto;
    width: 100%;
}
body:has(#top-room:not([hidden])) > footer {
    margin-top: auto;
    flex-shrink: 0;
}

/* Loove: ready star fix */
#suggest {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    line-height: 1;
}
#suggest img {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain;
}

/* Loove star outline v2 */
button#suggest,
button#suggest:hover,
button#suggest:active {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid #d9dce8 !important;
    box-shadow: none !important;
}