@font-face {
  font-family: 'Jersey10';
  src: url('../assets/Jersey10.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: 'OldGameFatty';
  src: url('../assets/OldGameFatty.ttf') format('truetype');
  font-display: swap;
}

:root {
  
  --body-bg: #080808;
  --light-primary: #212121;   
  --lighter-primary: #2e2e2e; 
  --dark-primary: #0c0c0c;    
  --border-light: #3a3a3a;    
  --border-dark: #000000;     
  --text: #d8ded3;
  --text-dim: #888888;
  --secondary: #F0B43F;       
  --link: #e03644;            
  --selection: #96892D;
  --flash: #2a2a2a;
  --op: #6680a0;

  --pixel: 'Jersey10', 'Trebuchet MS', Verdana, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
html { scrollbar-color: var(--light-primary) var(--dark-primary);
  -webkit-text-size-adjust: 100%;    }
body {
  background: var(--body-bg);
  color: var(--text);
  font-family: var(--pixel);
  font-size: 17px;               
  overscroll-behavior: none;
  line-height: 1.25;
}
::selection { background: var(--selection); color: #fff; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2 { color: var(--secondary); }
h1 { font-size: 26px; letter-spacing: 1px; }
h2 { font-size: 21px; }
hr { margin: 10px 0; border: none; height: 1px; background: var(--dark-primary); }
img { image-rendering: auto; }


::-webkit-scrollbar, ::-webkit-scrollbar-corner { width: 17px; background: var(--lighter-primary); }
::-webkit-scrollbar-track { background: var(--dark-primary); border-left: 1px solid #000; }
::-webkit-scrollbar-thumb {
  background: var(--light-primary);
  border-top: 2px solid var(--border-light); border-left: 2px solid var(--border-light);
  border-bottom: 2px solid #000; border-right: 2px solid #000;
}
::-webkit-scrollbar-button:vertical:start, ::-webkit-scrollbar-button:vertical:end {
  display: block; height: 16px; background: var(--light-primary);
  border-top: 2px solid var(--border-light); border-left: 2px solid var(--border-light);
  border-bottom: 2px solid #000; border-right: 2px solid #000;
}
::-webkit-scrollbar-button:active { border-top: 2px solid #000; border-left: 2px solid #000;
  border-bottom: 2px solid var(--border-light); border-right: 2px solid var(--border-light); }
@media (pointer: coarse) {
  ::-webkit-scrollbar, ::-webkit-scrollbar-corner { width: 4px; background: transparent; }
  ::-webkit-scrollbar-thumb { background: #ffffff40; border: none; }
}


.window, .box {
  background: var(--light-primary); padding: 10px;
  border-top: 1px solid var(--border-light); border-left: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-dark); border-right: 1px solid var(--border-dark);
}
.inset {
  background: var(--dark-primary);
  border-top: 1px solid var(--border-dark); border-left: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-light); border-right: 1px solid var(--border-light);
}
.titlebar {
  text-transform: uppercase; letter-spacing: 2px; font-size: 15px; color: #fff;
  font-weight: 700; padding: 5px 9px; margin: -10px -10px 10px;
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(180deg, #2a2a2a, #161616);
  border-bottom: 1px solid var(--border-dark);
}
.titlebar .spacer { margin-left: auto; }
.paid-panel > .titlebar {
  background: linear-gradient(180deg, #a12626, #641010);
  border-bottom-color: #3a0505;
}


.btn {
  color: #fff; background: var(--light-primary); min-height: 30px; min-width: 75px;
  cursor: pointer; font-family: inherit; font-size: 16px; padding: 4px 14px;
  border-top: 1px solid var(--border-light); border-left: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-dark); border-right: 1px solid var(--border-dark);
}
.btn:active {
  border-top: 1px solid var(--border-dark); border-left: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-light); border-right: 1px solid var(--border-light);
}
.btn:focus { outline: 1px dashed var(--border-light); outline-offset: -4px; }
.btn.primary { background: var(--secondary); color: #1a1a1a; font-weight: 700; }
.btn.plus-btn { font-weight: 400; }
.btn.block { width: 100%; }
.btn.danger { background: #8b2020; }
.btn.small { min-width: 0; min-height: 26px; padding: 2px 9px; font-size: 14px; }

.btn.primary.friend-btn   { background: #1d6b32; color: #f2fff5; font-weight: 400; }
.btn.primary.friend-btn:hover   { background: #237a3a; }
.btn.primary.unfriend-btn { background: #e8888f; color: #2a0d10; font-weight: 400; }
.btn.primary.unfriend-btn:hover { background: #f09aa0; }

.btn.tiny { min-width: 0; min-height: 19px; padding: 1px 7px; font-size: 12px; }

.row-left { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }


.btn-apple  { background: #1a1a1a; color: #fff; border: 2px solid; border-color: #3a3a3a #000 #000 #3a3a3a; width: 100%; min-height: 46px; font-size: 18px; }
.btn-anon   { background: #3a7a2e; color: #fff; border: 2px solid; border-color: #489038 #2e6422 #26581c #2e6422; width: 100%; min-height: 42px; }
.btn-signout{ background: #8b2020; color: #fff; border: 2px solid; border-color: #a83030 #6a1818 #551010 #6a1818; }
.btn-apple:active, .btn-anon:active, .btn-signout:active { box-shadow: inset 0 2px 4px #0006; }


.input, select.input, textarea.input {
  border-top: 1px solid var(--border-dark); border-left: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-light); border-right: 1px solid var(--border-light);
  color: inherit; background: var(--dark-primary); padding: 7px 9px;
  font-family: inherit; font-size: 16px; outline: none; width: 100%;
}
.input:focus { outline: 1px dotted var(--border-light); outline-offset: -3px; }
.input::placeholder { color: var(--text-dim); }
textarea.input { resize: vertical; min-height: 90px; line-height: 1.4; }

input[type=checkbox] {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px;
  background: var(--dark-primary);
  border-top: 1px solid var(--border-dark); border-left: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-light); border-right: 1px solid var(--border-light);
  cursor: pointer; vertical-align: middle; flex: 0 0 18px;
}
input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M3 7l3 4 6-8' stroke='%23F0B43F' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain; background-position: center; background-repeat: no-repeat;
}


.switch { position: relative; width: 44px; height: 22px; flex: 0 0 44px; cursor: pointer;
  background: var(--dark-primary);
  border-top: 1px solid var(--border-dark); border-left: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-light); border-right: 1px solid var(--border-light); }
.switch .knob { position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; background: var(--light-primary);
  border-top: 1px solid var(--border-light); border-left: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-dark); border-right: 1px solid var(--border-dark); transition: left .1s; }
.switch.on { background: var(--secondary); }
.switch.on .knob { left: 23px; }


.menubar {
  background: var(--light-primary); padding: 5px 9px; display: flex; align-items: center; gap: 6px;
  border-top: 1px solid var(--border-light); border-left: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-dark); border-right: 1px solid var(--border-dark);
}
.menu-btn { color: var(--text); background: transparent; border: 1px solid transparent; padding: 4px 10px;
  cursor: pointer; font-family: inherit; font-size: 16px; text-transform: uppercase; letter-spacing: 1px; }
.menu-btn:hover { background: var(--flash); }
.menu-btn.active { background: var(--lighter-primary); border-top-color: var(--border-light); border-left-color: var(--border-light);
  border-bottom-color: var(--border-dark); border-right-color: var(--border-dark); color: var(--secondary); }

@keyframes donaterainbow {
  0%   { color: #ff3b3b; }
  17%  { color: #ff9f1c; }
  34%  { color: #ffe600; }
  50%  { color: #2ecc40; }
  67%  { color: #0099ff; }
  84%  { color: #a970ff; }
  100% { color: #ff3b3b; }
}
.donate-btn { animation: donaterainbow 9s linear infinite; }
.donate-btn:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .donate-btn { animation: none; color: var(--secondary); } }


.row-item {
  background: var(--light-primary); border: 1px solid var(--border-dark);
  border-left: 3px solid var(--secondary); padding: 9px 11px; cursor: pointer; margin-bottom: 3px;
}
.row-item:hover { background: var(--lighter-primary); }
.row-item.dim { opacity: .5; }

.xchat-unlock {
  border: 1px solid var(--border-dark); background: var(--light-primary);
  padding: 14px 18px; margin: 6px auto 10px; max-width: 360px; text-align: center;
}

.card.dim { opacity: .5; }


.tag { display: inline-block; font-weight: 700; text-transform: uppercase; border: 1px solid;
  font-size: 11px; padding: 1px 5px; letter-spacing: .5px; }
.tag.gold { color: var(--secondary); border-color: var(--secondary); }
.tag.dim { color: var(--text-dim); border-color: var(--border-light); }
.tag.mod { color: #2ecc40; border-color: #2ecc40; }
.tag.plus { color: var(--secondary); border-color: var(--secondary); }


.comment {
  background: var(--dark-primary);
  border-top: 1px solid var(--border-dark); border-left: 3px solid var(--border-light);
  border-bottom: 1px solid var(--border-light); border-right: 1px solid var(--border-light);
  padding: 7px 9px; margin-bottom: 3px;
}
.comment.op { border-left-color: var(--secondary); }


.app { max-width: 900px; margin: 0 auto; padding: 12px; min-height: 100vh; display: flex; flex-direction: column; gap: 10px; position: relative; }
.brand { display: flex; align-items: flex-end; gap: 12px; }


.tri3d { --s: 34px; width: 44px; height: 40px; perspective: 240px; flex: 0 0 44px;
  display: flex; align-items: center; justify-content: center; overflow: visible; }
.tetra { position: relative; width: var(--s); height: calc(var(--s) * 0.866);
  transform-style: preserve-3d;
  animation: tetraspin 8s linear infinite; }
.tetra .face { position: absolute; left: 0; top: 0; width: var(--s); height: calc(var(--s) * 0.866);
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%); transform-origin: 50% 0%; backface-visibility: visible; }
.tetra .f1 { transform: rotateY(0deg)   rotateX(19.47deg); background: #ffffff; }
.tetra .f2 { transform: rotateY(120deg) rotateX(19.47deg); background: #ffffff; }
.tetra .f3 { transform: rotateY(240deg) rotateX(19.47deg); background: #ffffff; }

.tetra .f4 { clip-path: polygon(50% 100%, 0% 0%, 100% 0%); transform-origin: 50% 0%;
  transform: translateY(calc(var(--s) * 0.8165)) translateZ(calc(var(--s) * 0.2887)) rotateX(-90deg);
  background: #ffffff; }
@keyframes tetraspin { from { transform: rotateX(-12deg) rotateY(0deg); }
                       to   { transform: rotateX(-12deg) rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) { .tetra { animation: none; transform: rotateX(-12deg) rotateY(-28deg); } }

html.ios .tetra { animation: none; transform: none; }
html.ios .tetra .f1 { transform: none; }
html.ios .tetra .f2, html.ios .tetra .f3, html.ios .tetra .f4 { display: none; }
.brand h1 { font-family: 'OldGameFatty', var(--pixel); color: #fff; font-size: 30px; letter-spacing: 1px; line-height: 1; margin-bottom: -4px; }

.brand-word { display: flex; flex-direction: column; }
.brand-sub {
  margin: 0 0 -6px 26px;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--secondary);
  opacity: .62;
  white-space: nowrap;
}
.seat-count {
  position: absolute;
  top: 46px;
  right: 20px;
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .4px;
  opacity: 1;
  white-space: nowrap;
  pointer-events: none;
}
.stack { display: flex; flex-direction: column; gap: 10px; }
.rowflex { display: flex; align-items: center; gap: 10px; }
.grow { flex: 1; }
.muted { color: var(--text-dim); }
.small { font-size: 14px; }
.section-label { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim);
  border-bottom: 1px solid var(--dark-primary); padding-bottom: 5px; margin-bottom: 8px; }
.setting-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #141414; }
.setting-row:last-child { border-bottom: none; }
.setting-row .label { flex: 1; }
.setting-row .sub { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.stepper { display: flex; align-items: center; gap: 14px; }
.stepper .val { min-width: 60px; text-align: center; }


.card { background: var(--light-primary); border: 1px solid var(--border-dark); padding: 9px 11px; margin-bottom: 6px; }
.card .card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.card .src { font-size: 13px; font-weight: 400; text-transform: uppercase; letter-spacing: .5px; color: #fff; }
.card .handle { font-size: 13px; color: #fff; }
.card .time { font-size: 13px; color: var(--text-dim); margin-left: auto; }
.card .thumb { width: 100%; max-height: 260px; object-fit: cover; display: block; margin-bottom: 8px;
  border: 1px solid var(--border-dark); background: var(--dark-primary); }

.card .post-img {
  width: 25%; height: auto; max-height: 320px; object-fit: contain;
  display: block; margin: 0 auto 8px 0;
  border: 1px solid var(--border-dark); background: var(--dark-primary);
  cursor: zoom-in;
}

@media (max-width: 620px) {
  .card .post-img { width: 50%; }
}

.thread-view .card .post-img { width: 50%; max-height: 460px; }
@media (max-width: 620px) {
  .thread-view .card .post-img { width: 75%; }
}

.card .card-body { display: flex; gap: 10px; align-items: flex-start; }
.card .card-body .title { margin-bottom: 0; flex: 1; min-width: 0; }
.card .thumb-sq {
  width: 104px; height: 104px; flex: 0 0 104px;
  object-fit: cover; object-position: center; display: block;
  border: 1px solid var(--border-dark); background: var(--dark-primary);
}
@media (max-width: 620px) {
  .card .thumb-sq { width: 78px; height: 78px; flex-basis: 78px; }
}

.card .title { display: block; font-size: 17px; line-height: 1.35; color: var(--text); margin-bottom: 8px;
  overflow-wrap: anywhere; }

.card.card-tap { cursor: pointer; }
.card.card-tap:hover { background: var(--lighter-primary); }
.card.card-tap:active { background: var(--flash); }

.card.card-tap button { cursor: pointer; }

.repost-link { cursor: pointer; }
.repost-link:hover { background: var(--lighter-primary); }


.contact-line {
  position: fixed; top: 5px; right: 12px; z-index: 80;
  font-size: 11px; line-height: 1.2; color: var(--text-dim);
  white-space: nowrap;
  display: none;                 
}
.contact-line.on { display: block; }
.contact-line a { color: #ffffff; text-decoration: none; }
.contact-line a:hover { text-decoration: underline; }

@media (max-width: 860px) { .contact-line { display: none; } }


.dev-badge {
  position: fixed; left: 8px; bottom: 6px; z-index: 99;
  font-size: 11px; letter-spacing: 1px; color: var(--accent, #F0B43F);
  opacity: 0.85; pointer-events: none; text-transform: lowercase;
}


.alt-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.alt-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; font-family: inherit; font-size: 13px;
  color: var(--text); background: var(--light-primary); cursor: pointer;
  border-top: 1px solid var(--border-light); border-left: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-dark); border-right: 1px solid var(--border-dark);
}
.alt-btn:hover { background: var(--lighter-primary); }

.alt-btn.locked { opacity: .45; }
.alt-btn.locked::after { content: '+'; color: var(--secondary); font-weight: 700; margin-left: 2px; }


.kofi-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; text-decoration: none;
  background: #000000; color: #ffffff;
  font-family: inherit; font-size: 15px;
  border-top: 1px solid #3a3a3a; border-left: 1px solid #3a3a3a;
  border-bottom: 1px solid #000000; border-right: 1px solid #000000;
}

.kofi-btn, .kofi-btn:hover, .kofi-btn:focus, .kofi-btn:active {
  text-decoration: none; color: #ffffff;
}
.kofi-btn { cursor: pointer; user-select: none; }
.kofi-btn:hover { background: #1a1a1a; }
.kofi-btn:active {
  border-top-color: #000000; border-left-color: #000000;
  border-bottom-color: #3a3a3a; border-right-color: #3a3a3a;
}
.kofi-btn .kofi-cup { font-size: 17px; line-height: 1; }
.alt-btn.on {
  background: var(--secondary); color: #1a1a1a;
  border-top-color: var(--border-dark); border-left-color: var(--border-dark);
  border-bottom-color: var(--border-light); border-right-color: var(--border-light);
}
.card .body { font-size: 17px; line-height: 1.4; margin-bottom: 8px; white-space: pre-wrap; word-break: break-word; }

.card.nexus { border: 2px solid rgba(240, 180, 63, 0.55); }
.bio { white-space: pre-wrap; word-break: break-word; margin-top: 6px; }

.card .card-head { align-items: flex-start; }
.who-btn { align-items: center; padding: 4px 8px; background: #3d3d3d; align-self: flex-start;
  border-top: 1px solid #565656; border-left: 1px solid #565656;
  border-bottom: 1px solid var(--border-dark); border-right: 1px solid var(--border-dark); }
.who-btn:hover { background: #4a4a4a; }
.facetab { font-weight: 400; font-size: 15px; }

.profile-posts .card { margin-bottom: 14px; }
.profile-posts .card.nexus { border: 1px solid var(--border-light); }

.thread-view .card.nexus { border: 1px solid var(--border-light); }
.thread-view .section-label { border-bottom: none; padding-bottom: 0; }

.thread-view .card .title { white-space: pre-wrap; }


.thread-view > .card,
.thread-view .reply-row > .card { margin-bottom: 10px; }

.thread-view .section-label { margin-top: 4px; }


.card .hero {
  width: 50%; height: auto; max-height: 460px; object-fit: contain; display: block;
  margin: 0 auto 8px 0; background: var(--dark-primary);
  border: 1px solid var(--border-dark);
}
@media (max-width: 620px) {
  .card .hero { width: 75%; }
}
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.95);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }

.greentext { color: #789922; }
.quotelink { color: var(--secondary); }




.skin-imgbrd .chanpost, .skin-vichan .chanpost {
  
  display: block; width: fit-content; max-width: 100%; clear: both;
  padding: 6px 9px; margin-bottom: 4px;
}
.skin-imgbrd .card-head, .skin-vichan .card-head { gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.skin-imgbrd .chan-name, .skin-vichan .chan-name { font-weight: 700; }
.skin-imgbrd .chan-no, .skin-vichan .chan-no { color: var(--text-dim); font-size: 14px; }
.skin-imgbrd .time, .skin-vichan .time { margin-left: 0; }
.skin-imgbrd .chan-body, .skin-vichan .chan-body { overflow: hidden; }
.skin-imgbrd .chan-img, .skin-vichan .chan-img {
  float: left; margin: 2px 12px 6px 0; max-width: 160px; max-height: 160px;
  border: 1px solid var(--border-dark);
}
.skin-imgbrd .body, .skin-vichan .body { white-space: pre-wrap; }

.skin-imgbrd .reply-row, .skin-vichan .reply-row { margin-left: 0 !important; }


.tcap { min-height: 20px; }
.tcap-task {
  margin-top: 6px; padding: 6px;
  border: 1px solid var(--border-dark); background: #fff;
  color-scheme: light;
}
.tcap-inst-img { max-width: 180px; display: block; }
.tcap-strip {
  display: flex; gap: 4px; overflow-x: auto; margin-top: 4px;
  scroll-behavior: smooth; white-space: nowrap;
}
.tcap-item { height: 90px; width: auto; flex: 0 0 auto; image-rendering: pixelated; }
.tcap-slider { width: 100%; max-width: 340px; margin-top: 4px; }


.skin-reddit .reply-row > .card,
.skin-hackernews .reply-row > .card,
.skin-lobsters .reply-row > .card,
.skin-lemmy .reply-row > .card {
  border-left: 2px solid var(--border-light);
}

.skin-hackernews .card { padding: 5px 9px; }
.skin-hackernews .card .body { margin-bottom: 0; }


.skin-bluesky .reply-row, .skin-mastodon .reply-row { margin-left: 0 !important; }


.profile-box { position: relative; overflow: hidden; }
.profile-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.profile-bg img { width: 100%; height: 100%; object-fit: fill; display: block; }
.profile-bg .tint { position: absolute; inset: 0; }

.profile-box > *:not(.profile-bg):not(.badge-strip) { position: relative; z-index: 1; }
.profile-box { overflow: hidden; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch {
  width: 30px; height: 30px; cursor: pointer;
  border-top: 1px solid var(--border-light); border-left: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-dark); border-right: 1px solid var(--border-dark);
}
.swatch.on { outline: 2px solid var(--secondary); outline-offset: -2px; }
.bg-preview {
  position: relative; overflow: hidden; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--dark-primary);
  border-top: 1px solid var(--border-dark); border-left: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-light); border-right: 1px solid var(--border-light);
}
.bg-preview-t { position: relative; z-index: 1; color: var(--text); }

.card .meta { display: flex; gap: 16px; align-items: center; margin-top: 10px; }
.chip { font-size: 14px; color: var(--text-dim); background: none; border: none; cursor: pointer; font-family: inherit; padding: 0;
  display: inline-flex; align-items: center; gap: 5px; }
.chip.on { color: var(--secondary); }
.chip.right { margin-left: auto; }

.picon { display: inline-block; vertical-align: -3px; }
.chip .picon { flex: 0 0 auto; }
.chip:hover { color: var(--text); }
.chip.on:hover { color: var(--secondary); }

.vicon { display: inline-flex; }
.chip.vote-up.on,   .chip.vote-up.on:hover   { color: #44EE88; }
.chip.vote-down.on, .chip.vote-down.on:hover { color: #FF4455; }


.chip.pin-chip { margin-left: 0; padding: 0; }
.chip.pin-chip.on, .chip.pin-chip.on:hover { color: var(--secondary); }


.tabs { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; cursor: grab; scrollbar-width: thin; -ms-overflow-style: none; }
.tabs:active { cursor: grabbing; }
.tabs::-webkit-scrollbar { height: 5px; }
.tab { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 42px; min-height: 32px;
  background: var(--light-primary); color: var(--text); padding: 5px 10px; cursor: pointer; font-family: inherit; font-size: 15px; user-select: none;
  border-top: 1px solid var(--border-light); border-left: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-dark); border-right: 1px solid var(--border-dark); }
.tab.active { background: var(--lighter-primary); color: var(--secondary); }

.tab.divided { border-width: 2px; border-style: solid; }
.tab img, .tab svg { pointer-events: none; }
.tletter { font-weight: 700; font-size: 15px; line-height: 1; }


.loadbar { display: flex; justify-content: center; align-items: center; margin: 12px 0; min-height: 4px; }
.loadsvg { display: none; }
.loadbar.active .loadsvg { display: block; }
.snake { stroke-dasharray: 96; stroke-dashoffset: 96; animation: loaddraw 1.2s linear infinite; }
@keyframes loaddraw { to { stroke-dashoffset: 0; } }

.empty { text-align: center; color: var(--text-dim); padding: 50px 16px; }
.avatar { width: 40px; height: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: #0a0a0a; background: var(--secondary);
  border-top: 1px solid #ffffff55; border-left: 1px solid #ffffff55;
  border-bottom: 1px solid #00000088; border-right: 1px solid #00000088; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }


.avatar.avatar-free { background: #3a3a3a; color: #7d7d7d; font-weight: 700; }


.profile-body { position: relative; }
.badge-strip {
  position: absolute; top: 0; right: 0; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end;
  width: fit-content; max-width: 60%;
  margin: 0; padding: 3px 4px;
  background: var(--lighter-primary);
  border-top: 1px solid var(--border-light); border-left: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-dark); border-right: 1px solid var(--border-dark);
}
.badge-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; font-size: 11px; line-height: 16px;
  color: var(--text); background: var(--light-primary);
  border-top: 1px solid var(--border-light); border-left: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-dark); border-right: 1px solid var(--border-dark);
}
.badge-chip .badge-glyph { color: var(--secondary); font-size: 10px; }


.badge-chip.badge-img-chip { padding: 1px; }
.badge-img {
  display: block; height: 16px; width: auto;
  image-rendering: pixelated;   
}


.badge-chip[data-tip] { position: relative; }
.badge-chip[data-tip]::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 5px); right: 0;
  padding: 3px 7px; white-space: nowrap;
  font-size: 11px; line-height: 15px; color: var(--text);
  background: var(--light-primary);
  border-top: 1px solid var(--border-light); border-left: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-dark); border-right: 1px solid var(--border-dark);
  opacity: 0; pointer-events: none; z-index: 5;
}
.badge-chip[data-tip]:hover::after { opacity: 1; }


.pinned-wrap { margin-bottom: 10px; }
.pinned-tag {
  display: inline-block; margin-bottom: 3px; padding: 0 5px;
  font-size: 11px; line-height: 15px; color: #0a0a0a;
  background: var(--secondary);
}


.rules li { margin: 0 0 7px 18px; line-height: 1.4; }
.terms-row { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; cursor: pointer; }
.terms-row .t { flex: 1; font-size: 14px; color: var(--text-dim); line-height: 1.4; }


.segtabs { display: flex; border: 1px solid var(--border-dark); margin-bottom: 4px; }
.segtab { flex: 1; text-align: center; padding: 10px; cursor: pointer; font-size: 15px;
  text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); background: var(--dark-primary); }
.segtab + .segtab { border-left: 1px solid var(--border-dark); }
.segtab:hover { color: var(--text); background: var(--flash); }
.segtab.active { background: #39FF14; color: #0a0a0a; font-weight: 700; }
.segtab.disabled { opacity: .45; cursor: not-allowed; }
.segtab.disabled:hover { color: var(--text-dim); background: var(--dark-primary); }
.field { display: flex; flex-direction: column; gap: 5px; }
.flabel { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); }
.form-err { color: var(--link); min-height: 6px; }

.form-err-hard {
  color: #ff4d4d; font-weight: 700;
  border-left: 3px solid #ff4d4d; padding: 5px 8px; margin-top: 4px;
  background: rgba(255, 77, 77, .08);
}
details.other { margin-top: 4px; }
details.other summary { cursor: pointer; color: var(--text-dim); font-size: 14px; padding: 4px 0; list-style: none; }
details.other summary::-webkit-details-marker { display: none; }
details.other summary:hover { color: var(--text); }
details.other[open] summary { color: var(--secondary); }


.qm-bar { position: fixed; left: 8px; top: 50%; transform: translateY(-50%); z-index: 60;
  display: flex; flex-direction: column; gap: 4px; padding: 4px; background: #161616;
  border-top: 2px solid var(--border-light); border-left: 2px solid var(--border-light);
  border-bottom: 2px solid #000; border-right: 2px solid #000; }
.qm-btn { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text); background: var(--light-primary);
  border-top: 2px solid var(--border-light); border-left: 2px solid var(--border-light);
  border-bottom: 2px solid #000; border-right: 2px solid #000; }
.qm-btn:hover { color: var(--secondary); background: var(--lighter-primary); }
.qm-btn:active { border-top: 2px solid #000; border-left: 2px solid #000;
  border-bottom: 2px solid var(--border-light); border-right: 2px solid var(--border-light); }
@media (max-width: 720px) { .qm-bar { top: auto; bottom: calc(10px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); flex-direction: row; } }

.qm-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,0.55);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 14px; overflow-y: auto; }
.qm-modal { max-width: 460px; width: 100%; }


.orb {
  position: fixed; z-index: 65;
  width: 56px; height: 56px; padding: 0;
  border: none; border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #3a2708;
  background: radial-gradient(circle at 34% 28%,
    #fff4d6 0%, #f8d375 14%, #f0b43f 38%, #c98d26 62%, #8a5d12 84%, #4d3207 100%);
  box-shadow:
    inset -5px -7px 13px rgba(0,0,0,.55),      
    inset  4px  5px 11px rgba(255,255,255,.30), 
    inset  0   -3px  4px rgba(245,200,106,.55), 
    0 8px 16px rgba(0,0,0,.60);                 
}
.orb::after {
  content: ''; position: absolute;
  top: 13%; left: 22%; width: 30%; height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 72%);
  pointer-events: none;
}
.orb .picon, .orb-glyph { position: relative; z-index: 1; }
.orb-glyph { font-size: 30px; font-weight: 700; line-height: 1; }

.orb {
  transition: box-shadow .07s ease-out, transform .07s ease-out;
}
.orb:active {
  transform: translateY(1px) scale(.97);
  background: radial-gradient(circle at 34% 28%,
    #f3e0b4 0%, #e8c266 14%, #d79f34 38%, #a9741f 62%, #6f4a0e 84%, #3c2705 100%);
  box-shadow:
    inset  5px  7px 14px rgba(0,0,0,.62),       
    inset -4px -5px 10px rgba(255,255,255,.16), 
    inset  0    2px  4px rgba(0,0,0,.35),       
    0 2px 5px rgba(0,0,0,.55);                  
}
.orb:active::after { top: 20%; left: 30%; opacity: .35; }
@media (prefers-reduced-motion: reduce) {
  .orb { transition: none; }
  .orb:active { transform: none; }
}
.orb-compose { right: 20px; bottom: 20px; }
.orb-notif   { left: 20px;  bottom: 20px; }

.orb-bug {
  right: 20px;
  top: 20px;
  width: 45px; height: 45px;
  color: #031a0a;
  background: radial-gradient(circle at 34% 28%,
    #d6ffc4 0%, #7dff6e 14%, #2fe04a 38%, #0fb536 62%, #067d25 84%, #024514 100%);
  box-shadow:
    inset -4px -6px 10px rgba(0,0,0,.55),
    inset  3px  4px  9px rgba(255,255,255,.30),
    inset  0   -3px  4px rgba(125,255,110,.55),
    0 7px 14px rgba(0,0,0,.60);
}
.orb-bug:active {
  background: radial-gradient(circle at 34% 28%,
    #c2f5ae 0%, #5be354 14%, #22c33c 38%, #0b9c2e 62%, #056b1f 84%, #023a10 100%);
}
@media (max-width: 720px) {
  
  .orb-bug { top: calc(50px + env(safe-area-inset-top)); right: 12px; }
}

.bugmenu {
  position: fixed; right: 20px; z-index: 80;
  top: calc(20px + 45px + 12px);
  width: 270px; padding: 14px;
  background: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.65);
}
.bugmenu-title { font-family: var(--pixel); font-size: 15px; color: #7fe39c; margin-bottom: 8px; }
.bugmenu-text {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 70px;
  background: #2a2a2a; color: var(--text); border: 1px solid #3a3a3a;
  border-radius: 8px; padding: 8px; font-family: inherit; font-size: 13px;
}
.bugmenu-text:focus { outline: none; border-color: #43bd6b; }
.bugmenu-err { color: var(--link); font-size: 12px; min-height: 14px; margin-bottom: 6px; }
.bugmenu-actions { display: flex; gap: 8px; justify-content: flex-end; }

.btn.primary.bug-send   { background: #178038; color: #eafff0; font-weight: 400; }
.btn.primary.bug-send:hover   { background: #1d9440; }
@media (max-width: 720px) {
  .bugmenu { top: calc(50px + 45px + 12px + env(safe-area-inset-top)); right: 12px; }
}

.btn.cat-btn { background: #178038; color: #eafff0; }
.btn.cat-btn:hover { background: #1d9440; }
.btn.small.cat-picked { background: #178038; color: #eafff0; }
.cat-chip { display: inline-flex; align-items: center; gap: 4px; margin: 2px 8px 2px 0; }
.cat-chip-n { color: var(--text-dim); font-size: 11px; }
.btn.tiny.cat-x { padding: 0 4px; font-size: 12px; line-height: 14px; }
.cat-mini { margin-right: 6px; flex-shrink: 0; }

.btn.tiny.dm-del { color: #b84040; padding: 2px 5px; line-height: 0; flex-shrink: 0; }
.btn.tiny.dm-del svg { display: block; }
.btn.tiny.dm-del.armed { background: #8b2020; color: #fff; }

.btn.tiny.xp-more { background: #000; color: #fff; }
.catbar { margin: 10px 0 14px; }
.cat-letter { width: 52px; text-align: center; flex-shrink: 0; }
.cat-swatches { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cat-sw { width: 18px; height: 18px; cursor: pointer; border: 2px solid transparent; box-sizing: border-box; }
.cat-sw.on { border-color: #fff; }
.orb-badge {
  position: absolute; top: -2px; right: -2px; z-index: 2;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--link); color: #fff;
  font-family: var(--pixel); font-size: 13px; line-height: 20px; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.6);
}

@media (max-width: 720px) {
  .orb-compose, .orb-notif { bottom: calc(76px + env(safe-area-inset-bottom)); }
}


.mention { color: var(--secondary); text-decoration: none; }
.mention:hover { text-decoration: underline; }


.help-btn { position: fixed; left: 12px; top: 12px; z-index: 65; width: 30px; height: 30px;
  background: var(--light-primary); color: var(--text); font-family: var(--pixel); font-size: 20px; cursor: pointer;
  image-rendering: pixelated; border: 1px solid #000; display: flex; align-items: center; justify-content: center; }
.help-btn:hover { color: var(--secondary); }
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.btn:hover { text-decoration: none; }
.about-page { position: fixed; inset: 0; z-index: 80; background: #000; display: flex; flex-direction: column; padding: 40px 24px; }
.about-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 620px; margin: 0 auto; }
.about-p { color: #d8ded3; line-height: 1.7; font-size: 16px; text-align: left; text-indent: 24px; }

.about-gif {
  display: block; margin: 0 auto 18px;
  width: 140px; height: 140px;
  object-fit: contain;
  image-rendering: pixelated;
}
.about-inner .about-gif:last-child { margin: 18px auto 0; }
.about-links { display: flex; gap: 10px; justify-content: center; }


.ext-title { color: var(--secondary); font-size: 26px; margin: 0 0 14px; text-align: center; }
.ext-lead { color: #d8ded3; line-height: 1.7; font-size: 16px; margin: 0 0 18px; }
.ext-steps { color: #d8ded3; line-height: 1.7; font-size: 16px; margin: 0 0 18px; padding-left: 26px; }
.ext-steps li { margin-bottom: 8px; }
.ext-steps li::marker { color: var(--secondary); }
.ext-down { color: #e05555; }
.btn.xp-connect { background: #2e7d32; color: #eafff0; }
.btn.xp-connect:active { background: #245f27; }
.btn.xp-toggle { background: #1e4d7b; color: #eaf3ff; }
.btn.xp-toggle:active { background: #173d61; }

.btn.upd-close { background: #5a5a5a; color: #f0f0f0; }
.btn.upd-close:active { background: #484848; }
a.upd-link, a.upd-link:hover { text-decoration: none; }

input[type=checkbox].xp-all-check:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M3 7l3 4 6-8' stroke='%231e4d7b' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


body.landing .brand,
body.landing .seat-count,
body.landing .menubar,
body.landing .contact-line,
body.landing .qm-bar,
body.landing .help-btn,
body.landing .orb { display: none; }

.landing { max-width: 640px; margin: 0 auto; padding: 20px 18px 80px; }
.landing-top { position: fixed; top: 18px; right: 18px; z-index: 10; }


.landing .btn {
  position: relative; overflow: hidden;
  border-radius: 999px;
  border: none;
  font-weight: 400;
  
  background: radial-gradient(150px 70px at 30% -25%,
    #fff4d6 0%, #f8d375 28%, var(--secondary) 58%, #c98d26 88%, #8a5d12 115%);
  color: #3a2708;
  box-shadow:
    inset -4px -6px 10px rgba(0,0,0,.38),
    inset  3px  4px  9px rgba(255,255,255,.30),
    inset  0   -2px  3px rgba(245,200,106,.45);
}

.landing .btn:hover { text-decoration: none; }
.landing .btn:focus { outline: none; }
.landing .btn:active {
  transform: translateY(1px);
  background: radial-gradient(150px 70px at 30% -25%,
    #f3e0b4 0%, #e8c266 28%, #d79f34 58%, #a9741f 88%, #6f4a0e 115%);
  box-shadow:
    inset  4px  6px 12px rgba(0,0,0,.5),
    inset -3px -4px  8px rgba(255,255,255,.14);
}

.landing .btn:not(.primary) { 
  background: radial-gradient(150px 70px at 30% -25%,
    #4a4a4a 0%, #2a2a2a 45%, #101010 85%, #000 115%);
  color: var(--secondary); text-shadow: none;
  box-shadow:
    inset -4px -6px 10px rgba(0,0,0,.6),
    inset  3px  4px  9px rgba(255,255,255,.14);
}

.landing-hero { margin: 80px 0 22px; text-align: center; }

@font-face {
  font-family: 'BubbleOne';
  src: url('../assets/GFSCUS1D.ttf') format('truetype');
  font-display: swap;
}

.landing-title {
  position: relative; display: inline-block;
  font-family: 'BubbleOne', var(--pixel);
  font-size: 110px; letter-spacing: 2px; line-height: 1;
  
  background: radial-gradient(ellipse 140% 170% at 34% 8%,
    #fff4d6 0%, #ffe9ad 22%, #f8d375 45%, #f0b43f 72%, #c98d26 96%, #8a5d12 118%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  
  text-shadow:
    0 1px 0 #e8b04a,
    0 2px 0 #d19c33,
    0 3px 0 #b57e1e,
    0 4px 0 #8a5d12;
}

.landing-title::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 70% at 30% 4%,
    rgba(255,255,255,.85) 0%, rgba(255,255,255,.28) 45%, rgba(255,255,255,0) 72%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; text-shadow: none;
  pointer-events: none;
}
.landing-tag { color: var(--link); font-size: 20px; margin-top: 36px; font-style: italic; }


.landing-manifesto { position: relative; }
.lm-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.landing-manifesto-in { position: relative; padding: 46px 48px; }

.landing-p {
  position: relative; margin: 0 0 18px;
  color: #4a3208; font-size: 18px; line-height: 1.55;
  text-shadow: 0 1px 0 rgba(255,238,190,.55), 0 -1px 0 rgba(70,45,0,.35);
}
.landing-p:last-child { margin-bottom: 0; }

.landing-links { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }
.landing-links .btn { padding: 10px 22px; font-size: 17px; }

@media (max-width: 620px) {
  .landing-title { font-size: 56px; }
  .landing-hero { margin: 46px 0 30px; }
  .landing-manifesto-in { padding: 26px 24px; }
}


.landing-updates {
  position: fixed; left: 16px; top: 120px; width: 190px;
  background: #000; border: 2px solid var(--secondary);
  padding: 12px 14px; z-index: 5;
}
.landing-updates h4 { margin: 0 0 6px; color: #fff; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.landing-updates p { margin: 0; color: #fff; font-size: 12px; line-height: 1.5; }
.landing-updates ul { margin: 0; padding-left: 16px; color: #fff; font-size: 12px; line-height: 1.5; }
.landing-updates ul li { margin-bottom: 4px; }
.landing-updates-sep { border: none; border-top: 2px solid var(--secondary); margin: 12px -14px; }


.landing-pyri {
  position: fixed; left: 95px; top: 34px; width: 128px; max-width: 40vw; height: auto;
  z-index: 6; pointer-events: none;
}
@media (max-width: 980px) {
  .landing-updates, .landing-pyri { display: none; }
}


.donate-box { position: relative; }
.donate-pyri { position: absolute; right: -10px; bottom: -10px; width: 120px; height: auto; pointer-events: none; z-index: 2; }


.oops-page {
  position: fixed; inset: 0; z-index: 80; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
}
.oops-pyri { width: 220px; max-width: 55vw; height: auto; }
.oops-text { color: #fff; font-size: 42px; letter-spacing: 1px; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--light-primary); border: 1px solid var(--border-light); padding: 10px 16px;
  opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 100; }
.toast.show { opacity: 1; }

.site-notice { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: min(92vw, 460px);
  background: var(--light-primary); padding: 10px 12px; z-index: 100;
  border-top: 1px solid var(--border-light); border-left: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-dark); border-right: 1px solid var(--border-dark);
  font-size: 13px; }
.site-notice .btn { flex-shrink: 0; }

@media (max-width: 620px) {
  body { font-size: 16px; }
  .app { padding: 8px; }
}


.setting-row .src-icon { flex: 0 0 20px; }
.setting-row .divide-dot {
  width: 10px; height: 10px; flex: 0 0 10px;
  border: 1px solid var(--border-dark);
}


.video-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  margin-bottom: 8px; background: #000;
  border: 1px solid var(--border-dark);
}
.video-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.video-wrap.tiktok-wrap { aspect-ratio: 9 / 14; max-width: 340px; margin-left: auto; margin-right: auto; }
video.video-frame { object-fit: contain; background: #000; }


.connect-group { margin-top: 12px; }
.connect-group.sep { margin-top: 30px; }


.view-settings .section-label { border-bottom: none; padding-bottom: 0; }
.view-settings .setting-row { border-bottom: none; }


.popout {
  position: fixed; z-index: 80; width: 320px;
  background: #161616;
  border-top: 2px solid var(--border-light); border-left: 2px solid var(--border-light);
  border-bottom: 2px solid #000; border-right: 2px solid #000;
  box-shadow: 0 6px 18px rgba(0,0,0,.65);
}
.popout-bar {
  display: flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 2px 0 6px;
  background: var(--light-primary);
  cursor: move; touch-action: none; user-select: none;
}
.popout-title {
  flex: 1; min-width: 0; color: var(--text);
  font-size: 12px; line-height: 22px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.popout-x {
  flex: 0 0 auto; width: 18px; height: 18px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--light-primary); color: var(--text);
  font-family: inherit; font-size: 15px; line-height: 1; cursor: pointer;
  border-top: 1px solid var(--border-light); border-left: 1px solid var(--border-light);
  border-bottom: 1px solid #000; border-right: 1px solid #000;
}
.popout-x:hover { color: #fff; background: #8b2020; }
.popout-body { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.popout-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.popout-shield { position: fixed; inset: 0; z-index: 79; cursor: move; }

@media (max-width: 720px) { .popout { width: 220px; } }


.video-wrap.video-loading::after {
  content: 'loading video';
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  color: var(--muted); font-size: 12px; pointer-events: none;
}



@media (max-width: 720px) {
  
  .app { padding-bottom: calc(150px + env(safe-area-inset-bottom));
    
    min-height: 100dvh; }

  
  .menubar { position: sticky; top: 0; z-index: 55;
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .menubar::-webkit-scrollbar { display: none; }
  .menubar .menu-btn { flex: 0 0 auto; }
  .seat-count { top: 40px; right: 14px; }

  
  .help-btn { left: auto; right: 10px; top: calc(10px + env(safe-area-inset-top)); }

  
  .toast { bottom: calc(120px + env(safe-area-inset-bottom)); }

  
  .qm-overlay { padding: 12px 8px calc(24px + env(safe-area-inset-bottom)); }

  .landing { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

@media (pointer: coarse) {
  
  .btn.tiny { min-height: 30px; padding: 4px 11px; font-size: 14px; }
  .btn.small { min-height: 32px; padding: 4px 12px; font-size: 15px; }
  .menu-btn { padding: 7px 12px; }
  .tab { min-height: 38px; padding: 0 14px; }
  .chip { padding: 7px 2px; }
  .row-item { padding: 12px 11px; }
  .setting-row { padding: 12px 0; }
  .terms-row { padding: 6px 0; }
  input[type=checkbox] { width: 22px; height: 22px; flex-basis: 22px; }
  .swatch { width: 34px; height: 34px; }
}


.dm-line { display: flex; margin: 3px 0; }
.dm-line.me { justify-content: flex-end; }
.dm-avi { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; overflow: hidden;
  background: var(--lighter-primary); color: var(--text-dim); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin: 16px 7px 0 0; }
.dm-avi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-col { max-width: 76%; min-width: 0; display: flex; flex-direction: column; }
.dm-line.me .dm-col { align-items: flex-end; }
.dm-who { margin: 0 0 1px 6px; }
.dm-when { opacity: .55; margin: 1px 8px 0; font-size: 10.5px; }
.dm-bub { padding: 8px 13px; border-radius: 17px 17px 17px 5px; width: fit-content; max-width: 100%;
  background: var(--lighter-primary); border: 1px solid var(--border-dark);
  white-space: pre-wrap; word-break: break-word; }
.dm-bub.me { border-radius: 17px 17px 5px 17px; background: #1d9bf0; color: #fff;
  border-color: #00000066; }
.dm-bub.dm-tap { cursor: pointer; }
.dm-bub.dm-tap:hover { filter: brightness(1.12); }