:root{
  --accent:#ff0050;
  --accent2:#3da5ff;
  --bg0:#0e0e0e;
  --bg1:#0b0b0b;
  --panel:#1e1e1e;
  --text:#fff;
  --muted:#aaa;
  --border:#222;
  --border2:#2a2a2a;
  --scroll-track:#111;
  --scroll-thumb:#ff0050;
  --scroll-thumb2:#3da5ff;
  --yandex-bottom-overlay: 0px;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif;-webkit-tap-highlight-color:transparent}

/* Корень игры: убираем подсветку тапов */
#game, #game *{
  -webkit-tap-highlight-color: transparent;
}

/* Запрещаем выделение/коллаут/drag именно на поле игры */
#game{
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;

  -webkit-touch-callout: none; /* iOS long-press menu */
  -webkit-user-drag: none;     /* Safari drag */
  touch-action: manipulation;  /* не убивает клики, но гасит лишние жесты */
}

#game{
  -webkit-touch-callout: none; /* iOS “сохранить/искать картинку” */
}

#game img, #game canvas, #game .sprite, #game .sprite-layer{
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

html, body, #app, .game, .screen, .panel, .sprite, .bottom-bar, .main-actions,
button, .fab-btn, .hold-record, #recordHoldBtn {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; 
}
.hold-record, #recordHoldBtn, .fab-btn, button {
  touch-action: manipulation;
}

html, body{
  width: 100%;
  height: 100%;
  overflow: hidden;                 
  overscroll-behavior: none;   
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;     
}


body{
  background:var(--bg0);
  display:flex;
  justify-content:center;
  align-items:center;
  height:100svh;
  color:var(--text);
  overflow: hidden;
  overscroll-behavior: none;
}

.video-list,
.shop-list,
.music-list,
.comments-list,
.quests-list,
.rank-list,
.stream-chat-list,
.video-detail-body,
.settings-body,
.stream-stats{
  overscroll-behavior: contain;
}

#game{
  width:min(620px,100vw);
  height:min(980px,100svh);
  background-image:url("assets/images/background.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  border-radius:16px;
}

@media (max-width:460px){
  #game{
    border-radius:0;
    width:100vw;
    height:100svh;
  }
  :root{
    --yandex-bottom-overlay: 120px; /* можешь поставить 120-140 если ещё цепляет */
  }
}


.top-bar{
  display:grid;
  grid-template-columns: 1fr minmax(160px, 1.2fr) 1fr;
  align-items:center;
  gap:10px;

  padding:12px;
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-left: calc(12px + env(safe-area-inset-left));
  padding-right: calc(12px + env(safe-area-inset-right));

  background:var(--panel);
}

.stat{
  min-width:0;              /* ✅ важно для мобилок */
}

.rank-badge{
  min-width:0;              /* ✅ убираем принудительное раздувание */
  max-width:100%;
  justify-self:center;
}

.rank-name,
.rank-sub,
.rank-next{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.stat-subs{justify-self:start}
.stat-coins{justify-self:end}

@media (max-width:424px){
  .top-bar{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "subs coins"
      "rank rank";
  }
  .stat-subs{grid-area:subs}
  .stat-coins{grid-area:coins}
  .rank-badge{grid-area:rank}
}
.stat{
  text-align:center;
  border:1px solid var(--text);
  padding:10px;
  border-radius:10px;
  min-width:92px;
}

.label{font-size:12px;color:var(--muted)}

.main{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
}

.character{
  width:min(390px,90%);
  height:min(490px,100%);
  display:flex;
  justify-content:center;
  align-items:center;
}

.bottom-bar{
  padding:12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px) + var(--yandex-bottom-overlay));
  padding-left: calc(12px + env(safe-area-inset-left, 0px));
  padding-right: calc(12px + env(safe-area-inset-right, 0px));
  background:var(--panel);
  margin-bottom: 0;
}
button{
  width:100%;
  padding:14px;
  background:var(--accent);
  border:none;
  border-radius:10px;
  color:var(--text);
  font-size:16px;
  cursor:pointer;
  touch-action:manipulation;
}

button:active{transform:scale(0.98)}
button:disabled{opacity:0.6;cursor:default}
.btn-secondary{background:#2a2a2a}

.btn-inline{
  width:auto !important;
  padding:10px 12px !important;
  font-size:13px !important;
  border-radius:10px !important;
  background:#2a2a2a !important;
  color:var(--text) !important;
}

.shop-btn{
  position:absolute;
  right:10px;
  top:70px;
  padding:10px;
  background:#2a2a2a;
  color:var(--text);
  border:none;
  border-radius:12px;
  font-size:12px;
  width:78px;
  height:78px;
}

.rank-badge{
  min-width:170px;
  border:1px solid var(--text);
  padding:10px;
  border-radius:12px;
  cursor:pointer;
  background:rgba(0,0,0,0.15);
  user-select:none;
}

.rank-name{font-weight:800;font-size:13px}
.rank-sub{font-size:11px;color:var(--muted);margin-top:2px}
.rank-progress{
  height:6px;
  background:#222;
  border-radius:99px;
  margin-top:8px;
  overflow:hidden;
}
.rank-progress-fill{height:100%;width:0%;background:var(--accent2)}
.rank-next{margin-top:6px;font-size:11px;color:var(--muted)}

.toast{
  position:absolute;
  left:50%;
  bottom:86px;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.75);
  border:1px solid #333;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  color:var(--text);
  max-width:92%;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
  z-index:200;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(-4px);
}

.overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.75);
  display:none;
}
.overlay.active{
  display:flex;
  justify-content:center;
  align-items:center;
}

#phoneOverlay{z-index:20}
#shopOverlay{z-index:30}
#rankOverlay{z-index:30}
#settingsOverlay{z-index:35}
#recordOverlay{z-index:40}
#musicOverlay{z-index:50}
#questsOverlay{z-index:55}
#streamOverlay{z-index:55}
#videoDetailOverlay{z-index:58}
#commentsOverlay{z-index:60}

.frame{
  width:min(560px,100%);
  height:min(880px,100%);
  background:var(--bg1);
  border-radius:26px;
  padding:12px;
  box-shadow:0 0 40px rgba(0,0,0,0.85);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  position:relative;
}

.frame-header{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:10px;
  padding:6px;
}
.frame-header span{text-align:center;font-weight:800}
.header-spacer{width:44px}

.icon-btn{
  width:44px !important;
  height:44px !important;
  padding:0 !important;
  border-radius:12px;
  background:#2a2a2a;
  font-size:18px;
}

.frame-summary{
  padding:8px 6px;
  color:#bbb;
  font-size:13px;
  border-bottom:1px solid #1f1f1f;
}

.video-list,
.shop-list,
.music-list,
.comments-list,
.quests-list,
.rank-list,
.stream-chat-list,
.video-detail-body{
  scrollbar-width:thin;
  scrollbar-color:var(--scroll-thumb) var(--scroll-track);
}

.video-list::-webkit-scrollbar,
.shop-list::-webkit-scrollbar,
.music-list::-webkit-scrollbar,
.comments-list::-webkit-scrollbar,
.quests-list::-webkit-scrollbar,
.rank-list::-webkit-scrollbar,
.stream-chat-list::-webkit-scrollbar,
.video-detail-body::-webkit-scrollbar{
  width:8px;
}
.video-list::-webkit-scrollbar-track,
.shop-list::-webkit-scrollbar-track,
.music-list::-webkit-scrollbar-track,
.comments-list::-webkit-scrollbar-track,
.quests-list::-webkit-scrollbar-track,
.rank-list::-webkit-scrollbar-track,
.stream-chat-list::-webkit-scrollbar-track,
.video-detail-body::-webkit-scrollbar-track{
  background:var(--scroll-track);
  border-radius:999px;
}
.video-list::-webkit-scrollbar-thumb,
.shop-list::-webkit-scrollbar-thumb,
.music-list::-webkit-scrollbar-thumb,
.comments-list::-webkit-scrollbar-thumb,
.quests-list::-webkit-scrollbar-thumb,
.rank-list::-webkit-scrollbar-thumb,
.stream-chat-list::-webkit-scrollbar-thumb,
.video-detail-body::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);
  border-radius:999px;
  border:2px solid var(--scroll-track);
}
.video-list::-webkit-scrollbar-thumb:hover,
.shop-list::-webkit-scrollbar-thumb:hover,
.music-list::-webkit-scrollbar-thumb:hover,
.comments-list::-webkit-scrollbar-thumb:hover,
.quests-list::-webkit-scrollbar-thumb:hover,
.rank-list::-webkit-scrollbar-thumb:hover,
.stream-chat-list::-webkit-scrollbar-thumb:hover,
.video-detail-body::-webkit-scrollbar-thumb:hover{
  background:var(--scroll-thumb2);
}

.phone-frame{background:#111}
.phone-ui{
  width:100%;
  height:100%;
  background:#000;
  border-radius:24px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
}

.phone-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px;
  flex:0 0 auto;
}

.profile-body{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0 0 6px 0;
}

.profile-top{
  display:flex;
  gap:12px;
  padding:0 14px;
  align-items:center;
}

.avatar{
  width:72px;
  height:72px;
  border-radius:50%;
  background-image:url("assets/images/avatar.png");
  background-size:cover;
  background-position:center;
  border:2px solid #444;
  flex:0 0 auto;
}

.profile-top-right{flex:1;min-width:0}

.current-phone,.current-gear{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.profile-stats{
  display:flex;
  gap:24px;
  margin-top:8px;
  text-align:center;
}

.span-stats{color:var(--muted);font-size:12px}

.phone-footer{
  flex:0 0 auto;
  padding:12px;
  background:#000;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.record-cooldown{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.record-cooldown-bar{
  height:8px;
  background:#141414;
  border:1px solid #222;
  border-radius:999px;
  overflow:hidden;
}

.sprite, .sprite-layer {
  pointer-events: none;
}

.main-actions {
  position: relative;
  z-index: 1000;
}

.record-cooldown-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .2s ease;
}

#tutorialHint.tutorial-hint {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  bottom: auto;      /* на всякий */
  right: auto;       /* на всякий */
  z-index: 2147483647;

  /* опционально, чтобы красиво */
  max-width: min(520px, calc(100vw - 24px));
}

.record-cooldown-text{
  text-align:center;
  font-size:12px;
  color:var(--muted);
}

.collab-status{
  margin:0 14px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #1f1f1f;
  background:var(--bg1);
  color:#bbb;
  font-size:12px;
  text-align:center;
}

.profile-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  padding:0 14px;
}

.profile-actions .btn-inline{
  width:100% !important;
  padding:10px !important;
  font-size:12px !important;
  text-align:center;
}

.video-list-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:0 14px;
  margin-top:2px;
}

.video-list-title{font-weight:800;font-size:13px}

.video-list{
  width:100%;
  padding:0 14px 10px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow-y:auto;
  flex:1 1 auto;
  min-height:0;
  align-self:stretch;
  -webkit-overflow-scrolling:touch;
}

.video-card{
  display:flex;
  gap:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--border2);
  background:rgba(0,0,0,0.35);
}

.video-thumb{
  width:54px;
  height:54px;
  border-radius:12px;
  background:#111;
  border:1px solid #222;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  flex:0 0 auto;
}

.video-info{flex:1;min-width:0}
.video-title{font-weight:800;margin-bottom:6px;font-size:13px}
.video-meta{font-size:12px;color:var(--muted);line-height:1.35}
.video-meta .row{display:flex;gap:10px;flex-wrap:wrap}
.video-status{margin-top:6px;font-size:12px;font-weight:800}
.video-status.ok{color:var(--accent2)}
.video-status.bad{color:#ff5a5a}

.video-actions{
  margin-top:8px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.video-comment-row{
  margin-top:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:var(--muted);
}

.video-detail-body{
  flex:1;
  overflow-y:auto;
  padding:10px 6px;
  display:flex;
  flex-direction:column;
  gap:10px;
  -webkit-overflow-scrolling:touch;
}
.detail-card{
  border:1px solid var(--border);
  background:#111;
  border-radius:14px;
  padding:12px;
  font-size:13px;
  color:#ddd;
}
.detail-title{font-weight:800;margin-bottom:6px}
.detail-meta{font-size:12px;color:var(--muted);line-height:1.4}

.shop-list{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:6px;
}
.shop-section-title{font-size:14px;color:var(--muted);margin-top:8px}
.shop-item{
  border:1px solid #333;
  border-radius:14px;
  padding:12px;
  background:var(--bg1);
}
.shop-item-title{font-weight:800;margin-bottom:6px}
.shop-item-meta{font-size:12px;color:var(--muted);line-height:1.4}

.hidden{display:none !important}

.record-top{
  display:grid;
  grid-template-columns:44px 1fr auto;
  align-items:center;
  gap:10px;
  padding:8px;
}

.record-progress{
  height:8px;
  background:#1b1b1b;
  border-radius:999px;
  overflow:hidden;
  border:1px solid #222;
}

.record-progress-fill{height:100%;width:0%;background:var(--accent2)}
.record-timer{font-size:12px;color:var(--muted);min-width:64px;text-align:right}

.record-preview{
  flex:1;
  border-radius:18px;
  border:1px solid #1f1f1f;
  margin:8px;
  background:#090909;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.record-bottom{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.music-picker{display:flex;align-items:center;gap:10px}

.music-label{
  flex:1;
  font-size:13px;
  color:#bbb;
  padding:10px 12px;
  background:#111;
  border:1px solid #2a2a2a;
  border-radius:12px;
}

.action-picker{display:flex;align-items:center;gap:10px}
.picker-label{font-size:12px;color:var(--muted);width:80px}

.action-select{
  flex:1;
  width:100%;
  padding:12px;
  border-radius:12px;
  background:#111;
  border:1px solid #2a2a2a;
  color:#fff;
  font-size:14px;
  outline:none;
}

.hold-row{display:flex;justify-content:center}

.hold-record{
  width:86px;
  height:86px;
  border-radius:50%;
  background:#1f1f1f;
  border:4px solid #ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:none;
  user-select:none;
}
.hold-dot{
  width:16px;
  height:16px;
  border-radius:50%;
  background:#ffffff;
}
.hold-record.recording{background:var(--accent);transform:scale(1.03)}
.record-hint{text-align:center;font-size:12px;color:var(--muted)}

.post-top{
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:10px;
  padding:8px;
}
.post-title{text-align:center;font-weight:800}

.post-preview{
  flex:1;
  margin:8px;
  border-radius:18px;
  border:1px solid #1f1f1f;
  background:#090909;
  padding:12px;
  display:flex;
  align-items:flex-start;
}
.post-info{font-size:12px;color:var(--muted);line-height:1.4}

.post-bottom{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.post-bottom input{
  width:100%;
  padding:12px;
  border-radius:12px;
  background:#111;
  border:1px solid #2a2a2a;
  color:#fff;
  font-size:14px;
  outline:none;
}

.comments-list{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:6px;
  -webkit-overflow-scrolling:touch;
}

.comment-item{
  border:1px solid #222;
  background:#111;
  border-radius:14px;
  padding:10px;
  color:#ddd;
  font-size:13px;
}
.comment-meta{font-size:11px;color:#888;margin-bottom:6px}
.comment-hint{font-size:12px;color:#888;text-align:center;padding:8px 0}

.music-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:6px;
  min-height:0;
}
.music-search{
  width:100%;
  padding:12px;
  border-radius:12px;
  background:#111;
  border:1px solid #2a2a2a;
  color:#fff;
  font-size:14px;
  outline:none;
}
.music-list{
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  -webkit-overflow-scrolling:touch;
}
.music-item{
  border:1px solid #222;
  background:#111;
  border-radius:14px;
  padding:10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.music-item-title{flex:1;color:#ddd;font-size:13px}
.music-item-actions{display:flex;gap:8px}

.quests-list{
  flex:1;
  overflow-y:auto;
  padding:10px 6px;
  display:flex;
  flex-direction:column;
  gap:10px;
  -webkit-overflow-scrolling:touch;
}

.quest-item{
  border:1px solid #222;
  background:#111;
  border-radius:14px;
  padding:12px;
}
.quest-title{font-weight:800;margin-bottom:6px}
.quest-meta{font-size:12px;color:var(--muted);line-height:1.4}
.quest-progress{
  height:8px;
  background:#1b1b1b;
  border-radius:999px;
  overflow:hidden;
  border:1px solid #222;
  margin-top:10px;
}
.quest-progress-fill{height:100%;width:0%;background:var(--accent2)}

.stream-body{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px 6px;
  overflow:hidden;
}

.stream-progress{
  height:8px;
  background:#1b1b1b;
  border-radius:999px;
  overflow:hidden;
  border:1px solid #222;
}
.stream-progress-fill{height:100%;width:0%;background:var(--accent2)}

.stream-timer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  color:var(--muted);
}

.stream-preview{
  height:min(240px,28vh);
  border-radius:18px;
  border:1px solid #1f1f1f;
  background:#090909;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

#streamCharacterSprite{
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.stream-hud{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
}
.stream-hype-row{display:flex;align-items:center;gap:10px}
.stream-hypebar{
  flex:1;
  height:8px;
  background:#1b1b1b;
  border-radius:999px;
  overflow:hidden;
  border:1px solid #222;
}
.stream-hypebar-fill{height:100%;width:0%;background:var(--accent)}

.stream-stats{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid #1f1f1f;
  background:var(--bg1);
  font-size:12px;
  max-height:56px;
  overflow:auto;
}

.stream-chat{
  flex:1 1 0;
  min-height:160px;
  border:1px solid #1f1f1f;
  border-radius:14px;
  background:var(--bg1);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.stream-chat-header{
  padding:10px 12px;
  border-bottom:1px solid #1f1f1f;
  font-weight:800;
  font-size:12px;
}
.stream-chat-list{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  -webkit-overflow-scrolling:touch;
}
.stream-msg{
  border:1px solid #222;
  background:#111;
  border-radius:12px;
  padding:10px;
  font-size:12px;
  color:#ddd;
}
.stream-msg .meta{font-size:11px;color:#888;margin-bottom:6px}

.stream-quick-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.stream-quick-actions .btn-inline{
  width:100% !important;
  padding:12px !important;
  font-size:14px !important;
  text-align:center;
}

.stream-actions{display:flex;gap:10px}
.stream-actions button{flex:1}

.rank-list{
  flex:1;
  overflow-y:auto;
  padding:8px 6px;
  display:flex;
  flex-direction:column;
  gap:10px;
  -webkit-overflow-scrolling:touch;
}
.rank-item{
  border:1px solid #222;
  background:#111;
  border-radius:14px;
  padding:10px;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.rank-item b{color:#fff}
.rank-item .muted{color:#888;font-size:12px}
.rank-item.current{
  border-color:var(--accent2);
  box-shadow:0 0 0 1px rgba(47,124,255,0.2);
}

.muted{color:var(--muted)}

.record-page,.post-page{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.sprite{
  position:relative;
  width: min(300px, 72vw);
  aspect-ratio: 300 / 380;
  height: auto;
  border-radius:18px;
  overflow:hidden;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.35));
  background:transparent;
  touch-action: none;            /* именно тут, не на всём #game */
  -webkit-touch-callout: none;
}

#recordCharacterSprite{
  width: min(240px, 72vw);
  aspect-ratio: 240 / 340;
  height: auto;
  max-width:100%;
  max-height:100%;
  filter:none;
}

.sprite-layer{
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:0;
  transform:scale(0.985);
  transition:opacity 220ms ease, transform 220ms ease; 
  will-change:opacity, transform;
  pointer-events: none;
}

.sprite-layer.on{
  opacity:1;
  transform:scale(1);
}

.main-actions{
  position:absolute;
  right:10px;
  top: calc(env(safe-area-inset-top) + 12px);
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:5;
}

.fab-btn{
  width:56px !important;
  height:56px !important;
  padding:0 !important;
  border-radius:16px !important;
  background:rgba(0,0,0,0.55) !important;
  border:1px solid rgba(255,255,255,0.18) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px !important;
  backdrop-filter: blur(8px);
}
.fab-btn:active{transform:scale(0.98)}

.shop-btn{display:none}

.settings-body{
  flex:1;
  overflow-y:auto;
  padding:10px 8px;
  display:flex;
  flex-direction:column;
  gap:12px;
  -webkit-overflow-scrolling:touch;
}

.settings-section{
  border:1px solid #222;
  background:#111;
  border-radius:14px;
  padding:12px;
}

.settings-title{
  font-weight:800;
  margin-bottom:8px;
}

.settings-row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.settings-select{
  width:100%;
  padding:12px;
  border-radius:12px;
  background:#0d0d0d;
  border:1px solid #2a2a2a;
  color:#fff;
  font-size:14px;
  outline:none;
}

.settings-note{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
}

.help-box{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid #2a2a2a;
  background:#0d0d0d;
  color:#ddd;
  font-size:13px;
  line-height:1.4;
}

.help-email{
  display:inline-block;
  margin-top:6px;
  color:var(--accent2);
  text-decoration:none;
  font-weight:800;
}

.settings-footer{
  padding:10px 8px 0 8px;
  font-size:12px;
  color:var(--muted);
  text-align:center;
}

#loadingScreen{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.92);
  backdrop-filter: blur(4px);
  padding:18px;
}

#loadingScreen.active{display:flex}

.loading-card{
  width:min(420px,92vw);
  background:rgba(10,10,10,0.92);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:20px;
  padding:18px;
  box-shadow:0 0 40px rgba(0,0,0,0.85);
}

.loading-title{
  font-weight:900;
  font-size:22px;
  text-align:center;
  margin-bottom:10px;
}

.loading-text{
  text-align:center;
  color:var(--muted);
  font-size:13px;
  margin-bottom:12px;
}

.loading-bar{
  height:10px;
  background:#171717;
  border:1px solid #2a2a2a;
  border-radius:999px;
  overflow:hidden;
}

.loading-bar-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .18s ease;
}

.loading-percent{
  margin-top:10px;
  text-align:center;
  color:#ddd;
  font-size:12px;
}

.tutorial-hint{
  position:absolute;
  left:50%;
  bottom:180px;
  transform:translateX(-50%);
  width:min(520px,92%);
  background:rgba(0,0,0,1);
  border:5px solid rgba(167, 167, 167, 0.16);
  border-radius:16px;
  padding:12px 14px;
  color:var(--text);
  font-size:13px;
  line-height:1.35;
  z-index:500;
  box-shadow:0 0 28px rgba(0,0,0,0.55);
  pointer-events:none;
}

.tutorial-hint .title{
  font-weight:900;
  margin-bottom:6px;
}

.tutorial-hint .small{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
}

.tutorial-highlight{
  position:relative;
  outline:2px solid rgba(255,255,255,0.85);
  outline-offset:2px;
  animation:tutorialPulse 1.15s ease-in-out infinite;
}

@keyframes tutorialPulse{
  0%,100%{
    box-shadow:
      0 0 0 0 rgba(255,0,80,0.00),
      0 0 0 0 rgba(61,165,255,0.00);
  }
  50%{
    box-shadow:
      0 0 0 4px rgba(255,0,80,0.28),
      0 0 18px 6px rgba(61,165,255,0.22);
  }
}

@media (max-height: 520px){
  .top-bar{ gap:8px; }
  .stat{ padding:8px; min-width:80px; }
  .label{ font-size:11px; }

  button{
    padding:10px;
    font-size:14px;
  }

  .fab-btn{
    width:44px !important;
    height:44px !important;
    border-radius:14px !important;
    font-size:18px !important;
  }

  .hold-record{
    width:72px;
    height:72px;
  }
}

body{
  height: 100vh;  
  height: 100svh;  
}
#game{
  height: min(980px, 100vh);  
  height: min(980px, 100svh); 
}


@media (max-width: 460px){
  .overlay.active{
    align-items: stretch;
    justify-content: stretch;
  }

  .frame{
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 10px;
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-left: calc(10px + env(safe-area-inset-left));
    padding-right: calc(10px + env(safe-area-inset-right));
  }

  #phoneOverlay .phone-frame.frame{
    padding: 0;
    border-radius: 0;
  }
  #phoneOverlay .phone-ui{
    border-radius: 0;
  }

  #phoneOverlay .phone-header{
    padding-top: calc(12px + env(safe-area-inset-top));
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
  }
  #phoneOverlay .phone-footer{
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
  }

  /* 1.2) Плавающие кнопки справа уезжали вниз из-за safe-area "второй раз" */
  .main-actions{
    top: 10px;
    right: calc(10px + env(safe-area-inset-right));
  }
  .fab-btn{
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    font-size: 20px !important;
  }
}


@media (max-width: 424px){
  .top-bar{
    padding: 8px;
    padding-top: calc(8px + env(safe-area-inset-top));
    gap: 8px;
  }

  .stat{
    padding: 8px;
    min-width: 0;
  }

  .label{
    font-size: 11px;
  }

  .rank-badge{
    min-width: 0;
    width: 100%;
    padding: 8px;
  }

  .rank-name{ font-size: 12px; }
  .rank-sub,
  .rank-next{ font-size: 10px; }
  .rank-progress{ margin-top: 6px; }
}

@media (max-width: 500px){
  .profile-top{
    flex-direction: column;
    align-items: flex-start;
  }
  .profile-stats{
    gap: 16px;
  }
  .video-list-header{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}