/* Mobile canvas, selectable display type and deterministic GTAVC UI symbols. */
html{
  min-height:100%;
  background:#0e0d1b;
  color-scheme:dark;
  overflow-x:hidden;
  overflow-x:clip;
}
body{
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  background-color:#100f22;
}
footer{
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:#0e0d1b;
}
.toast{bottom:calc(25px + env(safe-area-inset-bottom,0px))}

/* A full line box leaves space for Lithuanian accents and selection painting.
   Keep the text selectable: do not hide this issue with user-select:none. */
.hero h1{
  line-height:1.12;
  letter-spacing:-.025em;
}
.section-intro h2,.categories-section h2,.server-copy h2,.last-cta h2{
  line-height:1.16;
  letter-spacing:-.018em;
}
.side-panel h3,.dialog-header h2,.auth-hero strong{line-height:1.12}
.last-cta h2{
  filter:none;
  text-shadow:0 4px 14px #180e3245;
}
.hero h1 em,.section-intro h2 em,.categories-section h2 em,
.server-copy h2 em,.last-cta h2 em{
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
::selection{
  color:#24182f;
  background:#f7bbcf;
  text-shadow:none;
}
.hero h1::selection,.hero h1 em::selection,
.section-intro h2::selection,.section-intro h2 em::selection,
.categories-section h2::selection,.categories-section h2 em::selection,
.server-copy h2::selection,.server-copy h2 em::selection,
.last-cta h2::selection,.last-cta h2 em::selection{
  color:#24182f;
  -webkit-text-fill-color:#24182f;
  background:#f7bbcf;
  text-shadow:none;
}
.chat-heading h2::selection,.chat-heading h2 em::selection{
  color:#24182f;-webkit-text-fill-color:#24182f;background:#f7bbcf;text-shadow:none;
}
.detail-toolbar button.liked .ui-icon{fill:currentColor}

/* SVG symbol references replace emoji, so iOS cannot substitute green or blue
   system glyphs. The sprite stays in the document without occupying a row. */
.icon-sprite{
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
  pointer-events:none;
}
.ui-icon{
  display:inline-block;
  width:20px;
  height:20px;
  flex:none;
  vertical-align:-.18em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  pointer-events:none;
}
.ui-icon.is-filled{fill:currentColor}
.btn>span,.person-dot,.search>span,.announcement-sep,.crosshair{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.btn .ui-icon,.hero-mobile-join .ui-icon,.side-cta .ui-icon{width:19px;height:19px}
.user-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.person-dot{margin-right:0}
.user-btn .ui-icon{width:18px;height:18px}
.menu-btn .ui-icon{width:26px;height:26px}
.announcement-sep .ui-icon{width:12px;height:12px;stroke-width:1.5}
.crosshair .ui-icon{width:19px;height:19px;color:#f7b9ce}
.stat-icon{display:inline-flex;align-items:center}
.stat-icon .ui-icon{width:28px;height:28px;color:#f7b9ce;stroke-width:1.6}
.stat-invite button{display:inline-flex;align-items:center;gap:8px}
.stat-invite button .ui-icon{width:16px;height:16px}
.search .ui-icon{width:19px;height:19px;color:#c5acd7}
.search>span{line-height:1}
.pagination button,.close-dialog{display:inline-grid;place-items:center;padding:0}
.pagination .ui-icon{width:17px;height:17px}
.close-dialog .ui-icon{width:21px;height:21px}
.orbit{display:inline-flex;align-items:center;justify-content:center}
.orbit .ui-icon{width:37px;height:37px;color:#f6b5c8;stroke-width:1.25}
.category-arrow .ui-icon{width:23px;height:23px}
.topic-info>span{display:inline-flex;align-items:center;gap:2px}
.topic-info .ui-icon{width:15px;height:15px;stroke-width:1.6}
.topic-next .ui-icon{width:19px;height:19px}
.detail-toolbar button,.auth-provider{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.detail-toolbar .ui-icon{width:16px;height:16px}
.my-topics .ui-icon{width:16px;height:16px;margin-left:7px}
.empty-state .empty-illustration{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  color:#f6b5c8;
}
.empty-illustration .ui-icon{width:86px;height:86px;stroke-width:1.1}
.empty-illustration img{
  display:block;
  width:104px;
  height:104px;
  object-fit:contain;
  border:1px solid #c49fc05c;
  border-radius:12px;
  box-shadow:0 9px 24px #08061766;
}
.footer-bottom>span:last-child{display:inline-flex;align-items:center;gap:7px}
.footer-bottom .ui-icon{width:16px;height:16px;color:#f4b2cd;stroke-width:1.6}

@media(max-width:650px){
  .hero h1{line-height:1.12}
  .section-intro h2{font-size:clamp(42px,13.2vw,66px)}
  .last-cta h2{line-height:1.17}
  .user-btn .person-dot{display:none}
  .stat-icon .ui-icon{width:21px;height:21px}
  .orbit .ui-icon{width:32px;height:32px}
  .category-arrow .ui-icon{width:19px;height:19px}
  .empty-illustration img{width:92px;height:92px}
  .toast{bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:360px){
  .hero h1{font-size:16vw}
  .last-cta h2{font-size:14vw}
}