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;
    }
}

/* --- 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;
}