html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  .checkbox-wrapper-14 input[type=checkbox] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .3);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 21px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
  }
  .checkbox-wrapper-14 input[type=checkbox]:after {
    content: "";
    display: block;
    left: 0;
    top: 0;
    position: absolute;
    transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
  }
  .checkbox-wrapper-14 input[type=checkbox]:checked {
    --b: var(--active);
    --bc: var(--active);
    --d-o: .3s;
    --d-t: .6s;
    --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
  }
  .checkbox-wrapper-14 input[type=checkbox]:disabled {
    --b: var(--disabled);
    cursor: not-allowed;
    opacity: 0.9;
  }
  .checkbox-wrapper-14 input[type=checkbox]:disabled:checked {
    --b: var(--disabled-inner);
    --bc: var(--border);
  }
  .checkbox-wrapper-14 input[type=checkbox]:disabled + label {
    cursor: not-allowed;
  }
  .checkbox-wrapper-14 input[type=checkbox]:hover:not(:checked):not(:disabled) {
    --bc: var(--border-hover);
  }
  .checkbox-wrapper-14 input[type=checkbox]:focus {
    box-shadow: 0 0 0 var(--focus);
  }
  .checkbox-wrapper-14 input[type=checkbox]:not(.switch) {
    width: 21px;
  }
  .checkbox-wrapper-14 input[type=checkbox]:not(.switch):after {
    opacity: var(--o, 0);
  }
  .checkbox-wrapper-14 input[type=checkbox]:not(.switch):checked {
    --o: 1;
  }
  .checkbox-wrapper-14 {
    display: flex;
    align-items: flex-start;
    gap: 4px;
  }
  .checkbox-wrapper-14 input[type=checkbox] + label {
    display: inline-block;
    cursor: pointer;
    flex: 1;
    line-height: 1.4;
  }

  .checkbox-wrapper-14 input[type=checkbox]:not(.switch) {
    border-radius: 7px;
  }
  .checkbox-wrapper-14 input[type=checkbox]:not(.switch):after {
    width: 5px;
    height: 9px;
    border: 2px solid var(--active-inner);
    border-top: 0;
    border-left: 0;
    left: 7px;
    top: 4px;
    transform: rotate(var(--r, 20deg));
  }
  .checkbox-wrapper-14 input[type=checkbox]:not(.switch):checked {
    --r: 43deg;
  }
  .checkbox-wrapper-14 input[type=checkbox].switch {
    width: 38px;
    border-radius: 11px;
  }
  .checkbox-wrapper-14 input[type=checkbox].switch:after {
    left: 2px;
    top: 2px;
    border-radius: 50%;
    width: 17px;
    height: 17px;
    background: var(--ab, var(--border));
    transform: translateX(var(--x, 0));
  }
  .checkbox-wrapper-14 input[type=checkbox].switch:checked {
    --ab: var(--active-inner);
    --x: 17px;
  }
  .checkbox-wrapper-14 input[type=checkbox].switch:disabled:not(:checked):after {
    opacity: 0.6;
  }
}

.checkbox-wrapper-14 * {
  box-sizing: inherit;
}
.checkbox-wrapper-14 *:before,
.checkbox-wrapper-14 *:after {
  box-sizing: inherit;
}
  
  #astral-toggle-btn {
   filter: invert(100%);
}

.chat_message pre {
  margin-right: 5%;
}

/* Profile audio/video volume control — floats as a glass pill over the
   hero (cover image / einzwei video, or the solid theme header when there is
   no cover). Colours are background-independent (light on a dark scrim) so it
   stays legible over arbitrary cover art and on every theme. */
#profile-player {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 12;
	box-sizing: border-box;
	width: 188px;
	height: 34px;
	padding: 0 14px 0 32px;
	display: flex;
	align-items: center;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.2);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
	overflow: hidden;
	cursor: pointer;
	transition: width 0.24s ease, padding 0.24s ease, border-radius 0.24s ease;

	i {
		position: absolute;
		/* 13px (not the geometric ~10px) optically centres the glyph in the 34px
		   collapsed circle: the speaker cone is a solid heavy mass on the left
		   while the sound waves are thin/light on the right, so the eye anchors on
		   the speaker — verified by rendering the real FA5 fa-volume-up glyph. */
		left: 10px;
		top: 50%;
		margin-top: -7px;
		font-size: 13px;
		color: rgba(255, 255, 255, 0.9);
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
		pointer-events: none;
	}
}

/* Collapsed: a small circle showing only the volume icon. The icon stays at
   left:11px and the pill grows/shrinks rightward, so it reads as centred when
   collapsed and left-aligned when open — no icon repositioning to animate. */
#profile-player.collapsed {
	width: 34px;
	padding: 0;
	border-radius: 50%;
}

#profile-player.collapsed #profile-volume {
	opacity: 0;
	pointer-events: none;
}

#profile-volume {
	position: relative;
	flex: 1;
	margin: 0;
	min-width: 0;
	height: 5px;
	background: rgba(255, 255, 255, 0.28) !important;
	border-radius: 15px;
	transition: opacity 0.18s ease;

	/* The track is only 5px tall, which is a tiny mouse target. This invisible
	   overlay widens the clickable/draggable zone vertically without changing the
	   visuals — clicks on a pseudo-element report the host (#profile-volume) as the
	   event target, so jQuery UI's click-to-set and drag still work. */
	&::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 50%;
		height: 24px;
		transform: translateY(-50%);
	}

	.ui-slider-range-min {
		height: 5px;
		position: absolute;
		background: rgba(255, 255, 255, 0.92) !important;
		border: none;
		border-radius: 10px;
		outline: none;
	}

	.ui-slider-handle {
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background: #fff !important;
		position: absolute;
		margin-left: -7px;
		/* Centre the handle on the 5px track. top:50% sits at the track's mid-line
		   and -7.5px (half the handle height) pulls it up onto centre — overriding
		   jQuery UI's default top:-3px, which left the handle riding too high. */
		top: 50%;
		margin-top: -7.5px;
		cursor: pointer;
		outline: none;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
	}
}

/* Guarantee the hero is tall enough to host the pill when the user has music
   but no cover/video (the avatar alone gives ~170px; this is just a floor). */
.my_profile_top.has-volume {
	min-height: 150px;
}

/* No cover/video: the avatar sits at the top-left, so shift the pill to the
   right of the avatar column so it never covers it. */
.my_profile_top:not(.has-bg) #profile-player {
	left: 160px;
}

/* einzwei profile video: cover the hero like the cover image does
   (background-size: cover). Without this, a <video> defaults to letterbox
   (object-fit: contain): on narrow/mobile viewports the landscape clip leaves
   black bars top & bottom, and the volume pill ends up sitting in the top bar
   so it reads as an extension of the header. cover fills the hero on every
   viewport, so the pill floats over the video the same as on desktop. */
#einzwei {
	object-fit: cover;
}


.vpn_zone p {
  padding-top: 10px;
}

.vpn_zone img {
  max-width: 300px;
}

.vpn_zone .img {
  text-align: center;
}

.tab_menu ul li {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700
}


#astral_container {
  /* display: flex; */
  width: 100%;
  position: relative;
  overflow: auto;

  border: 1px solid lightgray;
}
@media only screen and (min-width: 768px) {
  #astral_container {
    /* height: 30%; */
  }
}

.brelative { position:relative; }
.record-circle {
    color:#ff0000!important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.counter_text {
/*    left: 14px;
    top: 6px;*/
    font-size:10px;
    font-weight: bold;
    color: #ffffff;
    position: absolute;
}

#astral_icon {
   width: 24px;
   padding-top: 8px;
}
.ranking_lm {
    display: table-cell;
    vertical-align: middle;
    width: 30px;
    text-align: center;
    font-weight: bold;
    font-size: 17px;
}

.ulist_item {
    width: 100%;
    height: auto;
    table-layout: fixed;
    display: table;
    padding: 5px;
}

.score_lm {
    display: table-cell;
    vertical-align: middle;
    width: 70px;
    text-align: right;
    font-weight: bold;
    padding: 0 5px;
}

.th{
  /* Transparent text, should work on any background colour */
  color: rgba(0,0,0,0); 
  font-size: 0;
}

/* Profile "About me" — an editorial pull-quote instead of a labelled field
   row. No label at all: an oversized serif quote glyph bleeds off the top
   corner as a watermark so the user's words read as a personal statement.
   Theme-agnostic by design: the tint, accent bar and quote glyph all derive
   from neutral rgba / currentColor, so it adapts to all 15 themes (light &
   dark) with no per-theme overrides. */
.profile_about_card {
  position: relative;
  margin: 2px 0 16px;
  padding: 13px 16px 15px 18px;
  border-radius: 10px;
  background: rgba(128, 128, 128, 0.09);
  border-left: 3px solid rgba(128, 128, 128, 0.4);
  overflow: hidden;
  animation: about-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Oversized opening quote as a watermark; clipped by the card's overflow so it
   bleeds off the top-right edge. currentColor keeps it tinted to each theme. */
.profile_about_card::before {
  content: "\201C";
  position: absolute;
  top: -34px;
  right: 8px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 120px;
  line-height: 1;
  color: currentColor;
  opacity: 0.08;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.profile_about_body {
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@keyframes about-rise {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

@keyframes rainbow {
  100% { filter: hue-rotate(360deg); }
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100%   { transform: rotate(360deg); }
}

@keyframes grow {
  0%   { font-size: none; }
  100%   { font-size: 80pt; }
}

@keyframes growback {
  0%   { font-size: none; }
  50%   { font-size: 30pt; }
  100%   { font-size: none; }
}

@keyframes blur {
  0%   { filter: blur(5px); }
  50%   { filter: blur(0px); }
  100%   { filter: blur(5px); }
}

@keyframes scale {
  0%   { transform: scale(1); }
  50%   { transform: scale(3); }
  100%   { transform: scale(1); }
}


@keyframes scale2x {
  0%   { transform: scale(1); }
  50%   { transform: scale(2); }
  100%   { transform: scale(1); }
}

/* spin & scale */
@keyframes spinscale {
  0%   { transform: rotate(0deg) scale(1); }
  50%   { transform: rotate(180deg) scale(3); }
  100%   { transform: rotate(360deg) scale(1); }
}

/* rainbow & blur */ 
@keyframes rainblur {
  0%   { filter: blur(0px); }
  50%   { filter: blur(5px); }
  100%   { filter: blur(0px) hue-rotate(360deg); }
}

@keyframes bounce {
  0% {
    transform: scale(1, 1) translateY(0);
  }
  10% {
    transform: scale(var(--fa-bounce-start-scale-x, 1.1), var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
  }
  30% {
    transform: scale(var(--fa-bounce-jump-scale-x, 0.9), var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
  }
  50% {
    transform: scale(var(--fa-bounce-land-scale-x, 1.05), var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
  }
  57% {
    transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
  }
  64% {
    transform: scale(1, 1) translateY(0);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}

.expand-button {
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    background-size: contain;

    display: inline-block;
    margin-right: 6px;
    vertical-align: top !important;
    padding: 0px;
    cursor: pointer;
}

.expand-button.expanded {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgdmlld0JveD0iMCAwIDIzIDIzIj4KCTxjaXJjbGUgY3g9IjExLjUiIGN5PSIxMS41IiByPSIxMS41IiBmaWxsPSJyZ2IoMjA0LCAyMDQsIDIwMSkiIC8+Cgk8ZwoJCXN0cm9rZT0id2hpdGUiCgkJc3Ryb2tlLXdpZHRoPSIzLjI1IgoJCXN0cm9rZS1saW5lY2FwPSJyb3VuZCIKCT4KCQk8bGluZSB4MT0iNy41IiB5MT0iNy41IiB4Mj0iMTUuNSIgeTI9IjE1LjUiIC8+CgkJPGxpbmUgeDE9IjE1LjUiIHkxPSI3LjUiIHgyPSI3LjUiIHkyPSIxNS41IiAvPgoJPC9nPgo8L3N2Zz4=);
}

.expand-button.expanded:hover {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgdmlld0JveD0iMCAwIDIzIDIzIj4KCTxjaXJjbGUgY3g9IjExLjUiIGN5PSIxMS41IiByPSIxMS41IiBmaWxsPSJyZ2IoNzAsIDEwMSwgMTUzKSIgLz4KCTxnCgkJc3Ryb2tlPSJ3aGl0ZSIKCQlzdHJva2Utd2lkdGg9IjMuMjUiCgkJc3Ryb2tlLWxpbmVjYXA9InJvdW5kIgoJPgoJCTxsaW5lIHgxPSI3LjUiIHkxPSI3LjUiIHgyPSIxNS41IiB5Mj0iMTUuNSIgLz4KCQk8bGluZSB4MT0iMTUuNSIgeTE9IjcuNSIgeDI9IjcuNSIgeTI9IjE1LjUiIC8+Cgk8L2c+Cjwvc3ZnPg==);
}


.expand-button.collapsed {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgdmlld0JveD0iMCAwIDIzIDIzIj4KCTxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgcng9IjIuNSIgcnk9IjIuNSIgZmlsbD0icmdiKDIwNCwgMjA0LCAyMDEpIiAvPgoJPGcgZmlsbD0id2hpdGUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CgkJPHBhdGgKCQkJZD0iCgkJCQlNNCw1IGwxLC0uNSBoMiBsMSwuNSBoMSBsMSwtMSBoMyBsMiwyIGgyCgkJCQl2OCBoLTEzegoJCQkJTTUsNiBoMiB2MSBoLTIgdi0xegoJCQkJTSAxMS41IDkuNSBtIC0zLjUsIDAgYSAzLjUsMy41IDAgMSwwIDcsMCBhIDMuNSwzLjUgMCAxLDAgLTcsMAoJCQkJTSAxMS41IDkuNSBtIC0yLjUsIDAgYSAyLjUsMi41IDAgMSwwIDUsMCBhIDIuNSwyLjUgMCAxLDAgLTUsMAoJCQkiCgkJLz4KCTwvZz4KCTxnIHN0cm9rZT0id2hpdGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiPgoJCTxsaW5lIHgxPSIxOC43NSIgeTE9IjE2LjUiIHgyPSIxOC43NSIgeTI9IjIxIiAvPgoJCTxsaW5lIHgxPSIxNi41IiB5MT0iMTguNzUiIHgyPSIyMSIgeTI9IjE4Ljc1IiAvPgoJPC9nPgo8L3N2Zz4=);
}

.expand-button.collapsed:hover {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgdmlld0JveD0iMCAwIDIzIDIzIj4KCTxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyIgcng9IjIuNSIgcnk9IjIuNSIgZmlsbD0icmdiKDcwLCAxMDEsIDE1MykiIC8+Cgk8ZyBmaWxsPSJ3aGl0ZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KCQk8cGF0aAoJCQlkPSIKCQkJCU00LDUgbDEsLS41IGgyIGwxLC41IGgxIGwxLC0xIGgzIGwyLDIgaDIKCQkJCXY4IGgtMTN6CgkJCQlNNSw2IGgyIHYxIGgtMiB2LTF6CgkJCQlNIDExLjUgOS41IG0gLTMuNSwgMCBhIDMuNSwzLjUgMCAxLDAgNywwIGEgMy41LDMuNSAwIDEsMCAtNywwCgkJCQlNIDExLjUgOS41IG0gLTIuNSwgMCBhIDIuNSwyLjUgMCAxLDAgNSwwIGEgMi41LDIuNSAwIDEsMCAtNSwwCgkJCSIKCQkvPgoJPC9nPgoJPGcgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+CgkJPGxpbmUgeDE9IjE4Ljc1IiB5MT0iMTYuNSIgeDI9IjE4Ljc1IiB5Mj0iMjEiIC8+CgkJPGxpbmUgeDE9IjE2LjUiIHkxPSIxOC43NSIgeDI9IjIxIiB5Mj0iMTguNzUiIC8+Cgk8L2c+Cjwvc3ZnPg==);

}

img {
    image-orientation: from-image;
}

.bustate {
    font-size: 12px;
    height: 20px;
}
.bellips {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.rcorners {
    border-radius: 10px;
    border: 1px solid;
    padding: 5px;
}

.mafia_btn {
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 95px; 
  white-space: nowrap;
  border: 1px solid grey;
}

.akinator_btn {
  text-overflow: ellipsis;
  overflow: hidden; 
  width: 95px; 
  white-space: nowrap;
  border: 1px solid grey;
}

.mafia-username { 
  border-bottom: 1px dotted; 
  /*text-decoration: none; */
  cursor: pointer; 
}

.astral-join { 
  border-bottom: 1px dotted; 
  /*text-decoration: none; */
  cursor: pointer; 
}

.testing123 {

  text-shadow: 0 0 10px #ffffff,
             0 0 20px  #ffffff,
             0 0 30px  #ffffff,
             0 0 40px  #228DFF,
             0 0 70px  #228DFF,
             0 0 80px  #228DFF,
             0 0 100px #228DFF,
             0 0 150px #228DFF;

             
}

.tribute-container {
  position: absolute;
  max-height: 300px;
  max-width: 500px;
  overflow: auto;
  display: block;
  z-index: 999999; 
}

.tribute-container ul {
  margin: 0;
  margin-top: 2px;
  padding: 0;
  list-style: none;
  background: #efefef; 
}

.tribute-container li {
  padding: 10px 10px;
  cursor: pointer; 
}
.tribute-container li.highlight, .tribute-container li:hover {
    background: #ddd; 
}
.tribute-container li span {
    font-weight: bold; 
}
.tribute-container li.no-match {
    cursor: default; 
}
.tribute-container .menu-highlighted {
  font-weight: bold; 
}


.product{display:flex;flex-flow:column wrap;padding:.2rem}
.text_title{display:flex;justify-content:space-between;padding:.1rem;align-items:center}
.sub_text{padding:.5rem}
.bought{font-size:.85rem;color:#096}
hr{border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(224,224,224,.1)}
.gradient-text { -webkit-background-clip: text !important;-webkit-text-fill-color: transparent !important;  } 
.user_lm_data .gradient-text { display: inline !important; }

.lightrope{text-align:center;white-space:nowrap;overflow:hidden;position:absolute;z-index:1;margin:-20px 0;padding:0;pointer-events:none;width:100%;top:0;left:0;right:0}
.lightrope li{position:relative;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;list-style:none;padding:0;width:12px;height:28px;border-radius:50%;margin:20px;display:inline-block;background:#00f7a5;box-shadow:0 4.67px 24px 3px #00f7a5;-webkit-animation-name:flash-1;animation-name:flash-1;-webkit-animation-duration:2s;animation-duration:2s}
.lightrope li:after,.lightrope li:before{content:"";position:absolute}
.lightrope li:nth-child(2n+1){background:#0ff;box-shadow:0 4.67px 24px 3px rgba(0,255,255,.5);-webkit-animation-name:flash-2;animation-name:flash-2;-webkit-animation-duration:.4s;animation-duration:.4s}
.lightrope li:nth-child(4n+2){background:#f70094;box-shadow:0 4.67px 24px 3px #f70094;-webkit-animation-name:flash-3;animation-name:flash-3;-webkit-animation-duration:1.1s;animation-duration:1.1s}
.lightrope li:nth-child(odd){-webkit-animation-duration:1.8s;animation-duration:1.8s}
.lightrope li:nth-child(3n+1){-webkit-animation-duration:1.4s;animation-duration:1.4s}
.lightrope li:before{background:#222;width:10px;height:9.33px;border-radius:3px;top:-4.67px;left:1px}
.lightrope li:after{top:-14px;left:9px;width:52px;height:18.67px;border-bottom:solid #222 2px;border-radius:50%}
.lightrope li:last-child:after{content:none}
.lightrope li:first-child{margin-left:-40px}
@-webkit-keyframes flash-1{0%,100%{background:#00f7a5;box-shadow:0 4.67px 24px 3px #00f7a5}50%{background:rgba(0,247,165,.4);box-shadow:0 4.67px 24px 3px rgba(0,247,165,.2)}}
@keyframes flash-1{0%,100%{background:#00f7a5;box-shadow:0 4.67px 24px 3px #00f7a5}50%{background:rgba(0,247,165,.4);box-shadow:0 4.67px 24px 3px rgba(0,247,165,.2)}}
@-webkit-keyframes flash-2{0%,100%{background:#0ff;box-shadow:0 4.67px 24px 3px #0ff}50%{background:rgba(0,255,255,.4);box-shadow:0 4.67px 24px 3px rgba(0,255,255,.2)}}
@keyframes flash-2{0%,100%{background:#0ff;box-shadow:0 4.67px 24px 3px #0ff}50%{background:rgba(0,255,255,.4);box-shadow:0 4.67px 24px 3px rgba(0,255,255,.2)}}
@-webkit-keyframes flash-3{0%,100%{background:#f70094;box-shadow:0 4.67px 24px 3px #f70094}50%{background:rgba(247,0,148,.4);box-shadow:0 4.67px 24px 3px rgba(247,0,148,.2)}}
@keyframes flash-3{0%,100%{background:#f70094;box-shadow:0 4.67px 24px 3px #f70094}50%{background:rgba(247,0,148,.4);box-shadow:0 4.67px 24px 3px rgba(247,0,148,.2)}}


.giftbox,.viewbox,.sendbox {
    width: 100%;
    /*display: inline-block;*/
    justify-content: center;
    text-align: center;
}
.giftbox-gift,.viewbox-gift {
    width: 100px;
    text-align: center;
    padding: 20px 0;
    vertical-align: top;
    margin: 0 5px 10px 5px;
    border-radius: 4px;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    display: inline-block;
}

.giftbox-gift-img,.viewbox-gift-img {
    max-width: 96px;
    min-width: 48px;
    height: 96px;
    display: inline-block;
    line-height: 10px;
    white-space: nowrap;
    overflow: hidden;
    color: #b3b3b3;
    font-size: 0;
    background: none;

}

.sendbox-gift {
    width: 256px;
    text-align: center;
    padding: 20px 0;
    vertical-align: top;
    margin: 0 5px 10px 5px;
    border-radius: 4px;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    display: inline-block;
    border-radius: 4px;
}

.timer {
    border-radius: 15px;
    color: white;
    background-color: black;
    width: 150px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 3em;
}

#lotto_rules li, #parrot_settings li {
  padding: .5em;
}
#lotto_rules li .sub {
  padding-left: 2em;
}
#lotto_geeks li .sub {
  padding-top: .2em;
  padding-left: 2em;
}
.lotto_input {
  padding: 2px;
  width: 14%;
  display: inline-block;
  font-size: 1.6em;
  font-weight: bold;
  border: 1px solid;
  border-radius: 3px;

  margin-right: 4px;
  /*margin-top: 2px;*/
}
.ticket {
  padding-top: 4px;
  padding-bottom: 10px;
}
.center {
  text-align: center;
}

.lotto_ticket_number {
  display: inline-block;
  font-weight: bold;
  width: 22%;
}

.bold {
  font-weight: bold;
}

.lotto_winning_number {
  color: red;
}


/*BLACKJACK*/

.trow { display:table-row; }
.tcell { vertical-align:middle; display: table-cell;  padding-top: 4px; }

.suit {
font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol;
}


#bj_header, #bj_table {
    width: 100%;
    height: 210px;
    position: relative;
    display: table;
    table-layout: fixed;
    z-index: 99;

    /*border-bottom: 1px solid #ededed; */
}

#bj_header_content {
    display: table-row;
    text-align: center;
    width: 100%;
    height: 100%;
}

.bj_card_block {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
}

.bj_control_element {
  padding-bottom: 2px;
  padding-top: 2px;
  width: 100%;
}

.bj_btn {
  width: 100%;
}

#bj_game_controls, #spinner, #bj_insurance_block, #bj_result_box {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 120px;
}

#bj_start_controls {
    text-align: center;
    padding-top: 40px;
    display: inline-block;
    width: 200px;
}

.bj_block_text {
    padding-top: 10px;
}

.spinner_text {
    font-weight: bold;
}

.score {
    font-size: 1.0em;
}

#spectator_action {
  display: none;
  position: relative;
  top: 12px;
  height: 36px;
  font-size: 1.2em;
  font-weight: bold;
  /*color: green;*/
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 32px;
}
.lds-ellipsis div {
  position: absolute;
  top: 12px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #D3D3D3;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(19px, 0);
  }
}

/* ============================================================
   Quote / Reply
   ------------------------------------------------------------
   Theme-agnostic by construction: everything is built from
   currentColor + translucent neutral grays (the same trick the
   chat already uses, e.g. .mention_avatar's rgba(127,127,127,…)),
   so it reads correctly on all 15 themes without per-theme rules.
   A single --quote-accent hook lets a theme retint the accent
   bar/author later without touching markup.
   ============================================================ */
/* Defined on .my_text (the quote block's parent), NOT .chat_message: the quote is
   rendered as a sibling BEFORE .chat_message so it doesn't inherit the sender's
   text colour/bold (the bcolorN/bolded classes that live on .chat_message). Here
   currentColor resolves to the default message colour. */
.my_text { --quote-accent: currentColor; }

/* --- Quoted block rendered above a message (sibling before .chat_message) --- */
.chat_quote {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 1px 0 6px;
    padding: 4px 10px 5px;
    max-width: 100%;
    border-left: 3px solid var(--quote-accent, currentColor); /* fallback: solid accent */
    border-left-color: color-mix(in srgb, var(--quote-accent, currentColor) 40%, transparent);
    border-radius: 3px 8px 8px 3px;
    background: rgba(127, 127, 127, .05);
    cursor: pointer;
    overflow: hidden;
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.chat_quote:hover {
    background: rgba(127, 127, 127, .10);
    transform: translateX(1px);
    box-shadow: 0 1px 7px rgba(0, 0, 0, .10);
}
.chat_quote .quote_author {
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: .2px;
    color: var(--quote-accent, currentColor);
    opacity: .95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat_quote .quote_snippet {
    font-size: 12px;
    line-height: 20px;
    opacity: .62;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Embedded media (emoticons, stickers, image/video thumbs) survive in the
   preview — sized down to the one-line height. The whole quote/bar stays a
   single click target, so inner links/players never hijack jump-to-original. */
.chat_quote .quote_snippet img,
#reply_bar .rb_snippet img {
    height: 18px;
    width: auto;
    max-width: 110px;
    object-fit: cover;
    vertical-align: middle;
    border-radius: 2px;
    margin: 0 1px;
}
.chat_quote .quote_snippet .mention,
#reply_bar .rb_snippet .mention { font-size: 12px; }
.chat_quote .quote_snippet a,
.chat_quote .quote_snippet img,
.chat_quote .quote_snippet video,
#reply_bar .rb_snippet a,
#reply_bar .rb_snippet img,
#reply_bar .rb_snippet video { pointer-events: none; }

/* Every non-image embed (video, YouTube, SoundCloud, audio, file, …) collapses
   to a compact labelled icon chip that stays inline on the single preview line.
   Theme-agnostic (translucent gray), like the rest of the feature. */
.chat_quote .quote_snippet .quote_embed,
#reply_bar .rb_snippet .quote_embed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
    margin: 0 2px;
    padding: 1px 6px;
    border-radius: 9px;
    background: rgba(127, 127, 127, .22);
    font-size: 11px;
    line-height: 16px;
    white-space: nowrap;
}
.chat_quote .quote_snippet .quote_embed .fa,
#reply_bar .rb_snippet .quote_embed .fa { font-size: 9px; opacity: .85; }
/* Original no longer exists — non-interactive, muted. */
.chat_quote.quote_deleted { cursor: default; }
.chat_quote.quote_deleted:hover {
    transform: none;
    box-shadow: none;
    background: rgba(127, 127, 127, .10);
}
.chat_quote.quote_deleted .quote_snippet { font-style: italic; opacity: .5; }

/* --- Compact reply bar above the input (built in JS as #reply_bar) --- */
#reply_bar {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 6px;
    padding: 6px 8px 6px 10px;
    border-left: 3px solid var(--quote-accent, currentColor);
    border-radius: 4px 8px 8px 4px;
    background: rgba(127, 127, 127, .12);
    font-size: 13px;
    line-height: 1.3;
    animation: replyBarIn .18s cubic-bezier(.2, .8, .2, 1);
}
#reply_bar .rb_icon { flex: 0 0 auto; opacity: .7; }
#reply_bar .rb_body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
#reply_bar .rb_author {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#reply_bar .rb_snippet {
    opacity: .6;
    font-size: 12px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#reply_bar .rb_cancel {
    flex: 0 0 auto;
    cursor: pointer;
    padding: 4px 7px;
    border-radius: 50%;
    opacity: .6;
    transition: opacity .15s ease, background .15s ease;
}
#reply_bar .rb_cancel:hover { opacity: 1; background: rgba(127, 127, 127, .25); }
@keyframes replyBarIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --- Message context menu (right-click / long-press): reply + delete/report.
   Reuses .sub_menu (themed per-theme) for the background/hover/shadow, like
   #av_menu; this only positions the popover and sizes the rows for touch. --- */
#msg_menu {
    position: absolute;
    left: -5000px;
    top: 0;
    z-index: 9999;
    min-width: 170px;
    border-radius: 2px;
    overflow: hidden;
}
#msg_menu .sub_menu li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    min-height: 44px;          /* comfortable tap target on every platform */
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
}
#msg_menu .sub_menu li .fa { width: 16px; text-align: center; }
#msg_menu .sub_menu li.mm_hide { display: none !important; }
#msg_menu .mm_delete.danger { color: #e2483d; }

/* Suppress the native long-press callout/selection on touch only, so the
   custom menu can take over. Desktop text selection/copy stays untouched. */
@media (pointer: coarse) {
    #show_chat .ch_logs {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        touch-action: pan-y;   /* horizontal swipe-to-reply is JS-owned; only vertical scrolls */
    }
}

/* --- Swipe-to-reply arrow (single shared element, built in JS as #swipe_reply).
   Lives outside the swiped row — .ch_logs is overflow:hidden, so an arrow inside
   it would be clipped and would slide along with the bubble. It's positioned per
   frame from the active row's bounding rect; opacity + scale are driven inline by
   the drag. Colour comes from the .theme_color class (set in JS), so the arrow
   matches each skin's accent — falling back to the theme's text colour on skins
   that leave .theme_color unset. .armed (past the commit threshold) tints the
   circle with that same accent. Note: no `color` is set here by id, so the
   .theme_color class isn't out-specified. --- */
#swipe_reply {
    position: fixed;
    z-index: 9990;
    width: 34px;
    height: 34px;
    margin-top: -17px;                 /* centre on the row's vertical midpoint */
    display: none;                     /* flipped to flex by JS while swiping */
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(127, 127, 127, .16);
    opacity: 0;
    pointer-events: none;
    transform: scale(.5);
    transition: background .15s ease;
}
/* Tint the circle with the theme accent (currentColor = the .theme_color value).
   Translucent so the full-strength accent arrow stays legible over it, and so it
   reads on both light and dark skins without a hard-coded fill. */
#swipe_reply.armed {
    background: color-mix(in srgb, currentColor 22%, transparent);
}

/* --- Flash when jumping to a quoted message's original --- */
@keyframes quoteFlash {
    0%   { background: rgba(127, 127, 127, 0); }
    18%  { background: rgba(255, 196, 0, .30); }
    100% { background: rgba(127, 127, 127, 0); }
}
.ch_logs.quote-flash { animation: quoteFlash 1.25s ease-out; border-radius: 4px; }

/* --- Delete-message confirmation preview (echoes .chat_quote styling) --- */
.del_confirm_preview {
    margin: 13px 0 3px;
    padding: 9px 12px;
    border-left: 3px solid rgba(127, 127, 127, .45);
    border-radius: 3px 8px 8px 3px;
    background: rgba(127, 127, 127, .10);
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    word-break: break-word;
    opacity: .82;
    max-height: 4.4em;
    overflow: hidden;
}
.del_confirm_preview img {
    max-height: 36px;
    width: auto;
    vertical-align: middle;
    border-radius: 4px;
}
.del_confirm_preview .quote_media,
.del_confirm_preview .quote_embed {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* =====================================================================
   Profile-CSS perk — premium "developer console" editor + live preview.
   The console is a deliberate self-contained dark surface (a code-editing
   identity for the flagship 67676-credit item); everything else is built
   from neutral rgba / currentColor so it sits well on all 15 themes.
   ===================================================================== */

.profile_css_setting { padding-top: 10px; }

/* Warning line — amber, theme-neutral, with a soft tinted plate. */
.profile_css_warn {
    margin: 2px 0 12px;
    padding: 9px 12px 9px 13px;
    border-radius: 9px;
    border-left: 3px solid rgba(224, 162, 58, 0.8);
    background: rgba(224, 162, 58, 0.10);
    font-size: 12.5px;
    line-height: 1.5;
    color: inherit;
    opacity: 0.92;
}
.profile_css_warn i { color: #e0a23a; margin-right: 5px; }
.profile_css_warn b { color: #e0a23a; }

/* The code surface. Dark indigo-slate regardless of theme. */
.profile_css_console {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #161826;
    border: 1px solid rgba(128, 128, 128, 0.22);
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Title bar: faux traffic-lights, filename, and a live validity pill. */
.profile_css_bar {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 12px;
}
.profile_css_glyph {
    font-family: ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: -1px;
    color: #7ee0d6;
    opacity: 0.85;
}
.profile_css_title {
    font-family: ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
    color: #c7cce0;
    opacity: 0.7;
    letter-spacing: 0.3px;
}
.profile_css_status {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    transition: color 0.25s, background 0.25s, border-color 0.25s;
    border: 1px solid transparent;
}
.profile_css_status i { font-size: 7px; }
.profile_css_status.is_ok  { color: #4cd07d; background: rgba(76, 208, 125, 0.12); border-color: rgba(76, 208, 125, 0.3); }
.profile_css_status.is_err { color: #ff6b6b; background: rgba(255, 107, 107, 0.12); border-color: rgba(255, 107, 107, 0.3); }
.profile_css_status.is_ok i { animation: pcss-pulse 1.8s ease-in-out infinite; }
@keyframes pcss-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Fallback textarea (only shown if CodeMirror fails to load). */
#set_profile_css {
    font-family: ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
    font-size: 13px;
    min-height: 180px;
    background: #161826 !important;
    color: #e6e9f5 !important;
    border: none !important;
    border-radius: 0 !important;
}

/* --- CodeMirror "shikme" theme: token palette tuned for CSS authoring --- */
.profile_css_console .CodeMirror {
    height: 210px;
    background: #161826;
    color: #e6e9f5;
    font-family: ui-monospace, "JetBrains Mono", "Fira Code", "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
    transition: box-shadow 0.25s ease;
}
.profile_css_console .CodeMirror-focused { box-shadow: inset 0 0 0 1px rgba(126, 224, 214, 0.45); }
.cm-s-shikme .CodeMirror-gutters { background: #12131f; border-right: 1px solid rgba(255, 255, 255, 0.05); }
.cm-s-shikme .CodeMirror-linenumber { color: rgba(199, 204, 224, 0.32); }
.cm-s-shikme .CodeMirror-cursor { border-left: 2px solid #7ee0d6; }
.cm-s-shikme .CodeMirror-selected { background: rgba(126, 224, 214, 0.16); }
.cm-s-shikme .CodeMirror-activeline-background { background: rgba(255, 255, 255, 0.03); }
.cm-s-shikme .CodeMirror-matchingbracket { color: #7ee0d6 !important; text-decoration: underline; }
.cm-s-shikme .cm-comment  { color: #6b7194; font-style: italic; }
.cm-s-shikme .cm-tag,
.cm-s-shikme .cm-qualifier { color: #ff7eb6; }            /* element / .class selectors */
.cm-s-shikme .cm-builtin   { color: #ffb86c; }            /* #id selectors            */
.cm-s-shikme .cm-property  { color: #7ee0d6; }            /* declarations             */
.cm-s-shikme .cm-keyword,
.cm-s-shikme .cm-atom      { color: #c792ea; }            /* keyword values           */
.cm-s-shikme .cm-number    { color: #f2c879; }            /* numbers / units          */
.cm-s-shikme .cm-string    { color: #a6e05f; }
.cm-s-shikme .cm-variable,
.cm-s-shikme .cm-variable-2 { color: #e6e9f5; }
.cm-s-shikme .cm-def,
.cm-s-shikme .cm-meta      { color: #82aaff; }            /* @media / at-rules        */
.cm-s-shikme .cm-operator  { color: #c7cce0; }
.cm-s-shikme .cm-error     { color: #ff6b6b; border-bottom: 1px dotted #ff6b6b; }