:root{
  --ddvg-uc-surface-msg: #0b0b12;
  --ddvg-uc-surface-profile: #111111;

  --header-h: clamp(3rem, 6vmin, 4rem);

  --border: 0.125rem solid #000020;
  --bg: #000066;
  --panel: rgba(0,0,60,0.35);
  --panel2: rgba(0,0,80,0.55);
  --accent: #ff4fd8;
  --text: #fefbff;
  --muted: #c7c2ff;


  --pad-x: clamp(0.6rem, 2.2vmin, 1rem);
  --pad-y: clamp(0.45rem, 1.8vmin, 0.85rem);

  --r-sm: 0.375rem;
  --r-md: 0.5rem;
  --r-lg: 1rem;
}


*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%}


html{
  font-size: clamp(1rem, 2.1vmin, 1.125rem);
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
}


body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100%;
  height:100%;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  background-color:#000066;
  background-image:url(images/glow.png),url(images/bg.png);
  background-size:200vh,auto;
  background-position:center,center;
  background-repeat:no-repeat,repeat;
  color:var(--text);
}


.wrap{
  min-height:100vh;
  min-height:100dvh;
  min-height:100svh;
  height:100vh;
  height:100dvh;
  height:100svh;
  display:flex;
  flex-direction:column;
  background:transparent;
}



header{
  flex:0 0 auto;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 var(--pad-x);
  border-bottom:var(--border);
  background:linear-gradient(180deg,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,0.1) 100%);
  box-shadow:0 0 0.375rem 0.125rem rgba(0, 0, 0, 0.8);
  z-index:50;
}

header h1{
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
  cursor:pointer;
  color:#ffffff;
  text-shadow:0 0 0.375rem rgba(0,0,0,0.9);
}

.header-right{
  display:flex;
  align-items:center;
  gap:0.625rem;
  font-size:0.85rem;
  color:var(--muted);
  text-shadow:0 0 0.25rem rgba(0,0,0,0.9);
}


.btn{
  border-radius:999rem;
  border:0.05rem solid #000001;
  padding:0.45rem 1rem;
  font:inherit;
  font-size:0.85rem;
  font-weight:800;
  cursor:pointer;
  text-align:center;
  color:#ffffff;
  background:linear-gradient(to bottom,#7f3199 5%,#cf5fe6 100%);
  box-shadow:0 0.1rem 0.2rem 0 #000000,inset 0 0 0.2rem 0 #ff7af0;
  text-shadow:0.05rem 0.05rem rgba(0,0,0,0.5),0 0 0.15rem #000;
}
.btn:hover{
  border-color:#ffffff;
  background:#f4a3ff;
  color:#ffffff;
  box-shadow:0 0 0.4rem 0 #ffffff,inset 0 0 0.5rem 0 #ffffff;
  text-shadow:0.05rem 0.05rem rgba(0,0,0,0.5),0 0 0.15rem #000;
}



main{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:transparent;
}



.stream{

  display:grid;
  grid-template-rows:auto auto auto;
  background:var(--panel);
  border-bottom:var(--border);
  box-shadow:0 0 1.125rem rgba(0,0,0,0.75);
  min-width:0;
  min-height:0;
}


.slot{

  background:rgba(0,0,0,0.65);
  min-width:0;
  min-height:0;
}

.screen{

  width:100%;
  max-width:100%;
  aspect-ratio:16/9;
  background:#000;
  border-radius:var(--r-sm);
  overflow:hidden;
  box-shadow:0 0 0 0.1875rem #000,0 0 1.125rem rgba(0,0,0,1);
  position:relative;
  min-width:0;
  min-height:0;
}

video{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  background:#000;
  transition: filter 160ms ease;
}



.bar-top{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:space-between;
  gap:0.5rem;
  min-width:0;
  overflow:hidden;
  padding:calc(var(--pad-y) * 0.9) var(--pad-x);
  border-top:var(--border);
  z-index:50;
  font-size:0.9rem;
  text-shadow:0.125rem 0.125rem 0.125rem #000;
  background:linear-gradient(180deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,0.1) 100%);}

.title{
  flex:1 1 auto;
  min-width:0;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#ffffff;
}

.viewers{
  flex:0 0 auto;
  color:var(--muted);
  white-space:nowrap;
  font-weight:700;
}


.bar-top > :not(.title){
  flex:0 0 auto;
  white-space:nowrap;
}


#btnSettings{
  font-size:1.15em !important;
  line-height:1 !important;
}


#unmuteOverlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background: radial-gradient(circle at center, rgba(27, 19, 87, 0.91) 0%, rgba(9, 0, 72, 0.75) 55%, rgba(0, 0, 0, 1) 100% );
  color:#ffffff;
  font-size:1.125rem;
  font-weight:700;
  cursor:pointer;
  z-index:10;
  box-shadow: inset 0 0.0625rem 4rem #000;
  text-shadow: 0 0 0.125rem #FFF, 0.125rem 0.125rem 0.125rem #000;
  flex-direction:column;
  gap:0.75rem;
  text-align:center;
  padding:1.5rem;
}

#unmuteOverlay .unmuteSpeaker{
  width:clamp(96px, 22vw, 180px);
  height:clamp(96px, 22vw, 180px);
  background-image:url("images/mutespeaker.png");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

#unmuteOverlay .unmuteLabel{
  line-height:1.2;
}


.bar-actions{
  display:flex;
  flex-wrap:wrap;
  gap:0.35rem;
  padding:calc(var(--pad-y) * 0.9) 0.35rem;
  border-top:var(--border);
  background:transparent;
  box-shadow:none;
  background: linear-gradient(180deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,0.1) 100%);
}

.cta{
  flex:1 1 8rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999rem;
  border:0.05rem solid #000001;
  background:linear-gradient(to bottom,#7f3199 5%,#cf5fe6 100%);
  color:#ffffff;
  font:inherit;
  font-size:0.9rem;
  font-weight:800;
  cursor:pointer;
  text-align:center;
  padding:0.45rem 0.9rem;
  box-shadow:0 0.1rem 0.2rem 0 #000000,inset 0 0 0.2rem 0 #ff7af0;
  text-shadow:0.05rem 0.05rem rgba(0,0,0,0.5),0 0 0.15rem #000;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.cta:hover{
  border-color:#ffffff;
  background:#f4a3ff;
  color:#ffffff;
  box-shadow:0 0 0.4rem 0 #ffffff,inset 0 0 0.5rem 0 #ffffff;
  text-shadow:0.05rem 0.05rem rgba(0,0,0,0.5),0 0 0.15rem #000;
}

.cta-donate{
background: linear-gradient(to bottom,#418004 5%,#9fd147 100%);
  box-shadow: 0 0.1rem 0.2rem 0 #000000,inset 0 0 0.25rem 0 #afff00;
  color: #ffffff;
  text-shadow: 0.05rem 0.05rem rgba(0,0,0,0.5),0 0 0.15rem #000;
}
.cta-donate:hover{
  background:linear-gradient(to bottom,#aadd99 5%,#aadd99 100%);
  border-color:#ffffff;
  box-shadow:0 0 0.4rem 0 #ffffff,inset 0 0 0.5rem 0 #ffffff;
  text-shadow:0.05rem 0.05rem rgba(0,0,0,0.5),0 0 0.15rem #000;
}

.chat{

  flex:1 1 0;
  display:flex;
  flex-direction:column;
  background:transparent;
  min-height:0;
  box-shadow:none;
  min-width:0;
}

.chat-header{
  padding:0.35rem var(--pad-x);
  background: linear-gradient(180deg,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,0.1) 100%);
  border-bottom:var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:0.82rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#ffffff;
  text-shadow:0 0 0.25rem rgba(0,0,0,0.9);
}

.chat-header span{
  color:var(--muted);
  font-weight:500;
  font-size:0.8rem;
}


.chat-popout-btn{
  padding:0.18rem 0.55rem;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:0.6rem;
  border:0.05rem solid rgba(255,255,255,0.25);
  background:rgba(0,0,0,0.35);
  box-shadow:none;
  text-shadow:none;
  color:#ffffff;
  line-height:1.1;
}

.chat-popout-btn::before{
  content:"↗";
  display:inline-block;
  margin-right:0.35rem;
  font-weight:900;
  opacity:0.9;
}

.chat-popout-btn:hover{
  background:rgba(0,0,0,0.55);
  border-color:rgba(255,255,255,0.35);
}

.chat-popout-btn:active{
  transform:translateY(0.05rem);
}



.chat-messages{
  flex:1 1 auto;
  min-height:0;
  padding:calc(var(--pad-y) * 0.9) var(--pad-x);
  overflow-y:auto;
  font-size:0.85rem;
  scrollbar-gutter:stable both-edges;
}


.chat-messages::-webkit-scrollbar{ width:0.75rem; }
.chat-messages::-webkit-scrollbar-track{ background:#000; }
.chat-messages::-webkit-scrollbar-thumb{ background:purple; border-radius:0.375rem; }
.chat-messages::-webkit-scrollbar-thumb:hover{ background:#8f3aa8; }

.chat-messages{
  padding-top:0.625rem;scrollbar-width: auto;
  scrollbar-color: #9cd337 #063100;
}


.msg{
  margin-bottom:0.5rem;
  padding:0.55rem 0.6rem;
  border-radius:var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.05) 100%);
  display:grid;
  grid-template-columns:var(--avatar-col,2.65rem) 1fr;
  column-gap:0.65rem;
  align-items:start;
  border:0.0625rem solid rgba(92, 97, 172, 0.5);
  box-shadow: inset 0 0 0.375rem 0.0625rem rgba(28, 52, 147, 0.5);
  cursor:pointer;
}
.msg:hover{
  background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 50%, rgba(128,128,255,0.4) 100%);
  border:0.0625rem solid rgba(255,255,255,0.5);
}


.msg.msg-system{
  cursor:default;
  background: rgba(0,0,0,0.55);
  border:0.0625rem solid rgba(159,230,255,0.35);
  box-shadow: inset 0 0 0.375rem 0.0625rem rgba(0, 0, 0, 0.55);
}
.msg.msg-system:hover{
  background: rgba(0,0,0,0.55);
  border:0.0625rem solid rgba(159,230,255,0.35);
}
.msg.msg-system .msg-user{ color:#9fe6ff; }
.msg.msg-system .msg-text{ color:#eeeeee; }

.msg-avatar{
  width:var(--avatar-sz,2.75rem);
  height:var(--avatar-sz,2.75rem);
  border-radius:999rem;
  object-fit:cover;
  align-self:start;
  box-shadow:
    inset 0.125rem 0.125rem 0.25rem rgba(255,255,255,0.25),
    inset -0.1875rem -0.1875rem 0.375rem rgba(0,0,0,0.65),
    0 0.125rem 0.1875rem rgba(0,0,0,0.65);
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.08) 26%, rgba(120,110,255,0.14) 60%, rgba(0,0,0,0.0) 100%);
}

.msg-body{min-width:0}
.msg-line{
  display:block;
  min-width:0;
}
.msg-user{
  display:block;
  font-weight:700;
  color:#ffec66;
  text-shadow:0 0 0.1875rem #000;
  line-height:1.1;
}
.msg-text{
  display:block;
  color:#e8e5ff;
  word-wrap:break-word;
  overflow-wrap:anywhere;
  min-width:0;
  margin-top:0.12rem;
}


.chat-messages{ position:relative; }

.chat-profile{
  margin:0;
  border-radius:0.65rem;
  background:#111111;
  border: 0.15rem solid #4f4f4f;
  box-shadow: 0 0 0.25rem rgba(0,0,0,0.9), inset 0 0 1rem 0.0725rem rgb(72, 72, 72);
  position:absolute;
  left:0.65rem;
  right:0.65rem;
  z-index:50;
  background-image: url('images/win_bg.png');
  overflow:hidden;


  --prof-pad: 0.9rem;
  --prof-avatar: clamp(4.75rem, 10vmin, 5.75rem);
  --prof-gap: 0.75rem;
}

.chat-profile[hidden]{display:none}

.chat-profile-head{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0.75rem;


  padding:0.55rem var(--prof-pad) 0.1rem;
  padding-left: calc(var(--prof-pad) + var(--prof-avatar) + var(--prof-gap));
}


.chat-profile-head-left{
  display:block;
  min-width:0;
}




.chat-profile[hidden]{display:none}

.chat-profile-avatar{
  width:var(--prof-avatar);
  height:var(--prof-avatar);
  position:absolute;
  top:0.4rem;
  left:var(--prof-pad);

  border-radius:0.75rem;
  object-fit:cover;
  border:0.1875rem solid rgba(96,96,96,1);
  box-shadow: 0.35rem 0.35rem 0 rgb(0, 0, 0);
}



.chat-profile-name{
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1.05;
  color: #ffec66;
  text-shadow: 0 0 0.25rem rgba(0,0,0,0.95);
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

.chat-profile-sub{
  margin-top:0.1rem;

  font-size:0.95rem;
  color:#e8e5ff;


  padding:0.1rem var(--prof-pad) 0.85rem;
  padding-left: calc(var(--prof-pad) + var(--prof-avatar) + var(--prof-gap));
}


.chat-profile-close{
  position:absolute;
  top:0.35rem;
  right:0.35rem;
  width:1.6rem;
  height:1.6rem;
  border-radius:999rem;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:1rem;
  line-height:1;
}

.chat-profile-sub .chat-prof-wrap{
  display:flex;
  flex-direction:column;
  gap:0.55rem;
}
.chat-profile-sub .chat-prof-grid{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}
.chat-profile-sub .chat-prof-left{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
}
.chat-profile-sub .chat-prof-line{
  color:#eeeeee;
}
.chat-profile-sub .chat-prof-score{
  color:#b9d7ff;
}
.chat-profile-sub .chat-prof-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0.35rem;
  min-width:10rem;
}
.chat-profile-sub .chat-prof-level{
  font-weight:900;
  color:#ffffff;
  letter-spacing:0.02em;
}
.chat-profile-sub .chat-prof-expbar{
  width:10rem;
  height:1.05rem;
  border-radius:0.25rem;
  background:#0b0b0b;
  border:0.125rem solid #eeeeee;
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
}
.chat-profile-sub .chat-prof-expfill{
  height:100%;
  width:0%;
  background:#ff9a2f;
}
.chat-profile-sub .chat-prof-exptxt{
  position:absolute;
  right:0.45rem;
  top:50%;
  transform:translateY(-50%);
  font-size:0.85rem;
  font-weight:800;
  color:#eeeeee;
  text-shadow:0 0 0.2rem #000;
  pointer-events:none;
  white-space:nowrap;
}


.chat-input{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0.2rem;

  padding:calc(var(--pad-y) * 0.55) calc(var(--pad-x) * 0.65);
  border-top:var(--border);
  background: linear-gradient(180deg,rgba(255,255,255,0.2) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0) 75%,rgba(255,255,255,0.1) 100%);
  box-shadow:0 -0.1875rem 0.5rem rgba(0,0,0,0.75);
}

.chat-input textarea,
.chat-input .chat-editor,
.chat-input input{
  flex:1 1 auto;
  min-width:0;
  border-radius:999rem;
  border:0.125rem solid #7f6cff;
  background:#050036;
  color:#f9f5ff;
  padding:0.3rem 0.55rem;
  font:inherit;
  font-size:0.82rem;
  box-shadow:inset 0 0 0.3rem rgba(0,0,0,0.9);

  resize:none;
  line-height:1.2;
  max-height:calc(1.2em * 3 + 0.6rem);
  overflow-y:hidden;
}

.chat-input input::placeholder,
.chat-input textarea::placeholder{ color: rgba(96,107,100,0.66); }
.chat-input button{ padding:0 0.8rem; }
.chat-input-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.3rem;
  padding:0.1rem 0.2rem;
}

.chat-count{
  font:inherit;
  font-size:0.72rem;
  color:var(--muted);
  white-space:nowrap;
}

.chat-input-bar .btn{
  padding:0.28rem 0.7rem;
  font-size:0.8rem;
  line-height:1;
}

.chat-input-bar .btn:disabled,
.chat-input-bar .btn.is-cooldown{
  background:#4a4a4a;
  border-color:#1a1a1a;
  box-shadow:inset 0 0 0.2rem rgba(0,0,0,0.85);
  color:#c9c9c9;
  cursor:not-allowed;
  text-shadow:none;
  filter:saturate(0.35);
  opacity:0.95;
}

#chatSend{ position:relative; }
#chatSend .chat-send-timer{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  font-weight:900;
  letter-spacing:0.02em;
  text-shadow:0 0 0.2rem rgba(0,0,0,0.9);
}




#chatSend .send-label{display:inline-block;}
#chatSend.is-cooldown .send-label{opacity:0;}
#chatSend .chat-send-timer{color:#ffffff;}

.msg-text .emote{display:inline-block;height:100%;width:auto;vertical-align:middle;margin:0 0.08em}




@media (orientation:landscape){
  main{
    flex-direction:row;
    height:calc(100vh - var(--header-h));
    height:calc(100dvh - var(--header-h));
    height:calc(100svh - var(--header-h));
  }
  .stream{
    flex:2 1 0;
    border-right:var(--border);
    grid-template-rows:minmax(0,1fr) auto auto;
    min-height:0;
  }
  .slot{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:0;
  }
  .screen{
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    max-height:100%;
    min-height:0;
  }
  video{ width:100%; height:100%; }
  .chat{
    flex:1 1 18rem;
    min-width:16rem;
    max-width:30rem;
    border-bottom:none;
    min-height:0;
  }
  .chat-header{ border-top:none; }
}


@media (orientation:landscape) and (max-height:30rem){
  .btn{ font-size:0.8rem; padding:0.35rem 0.8rem; }
  .bar-top{ padding:0.45rem 0.8rem; font-size:0.85rem; }
  .cta{ font-size:0.8rem; padding:0.4rem 0.75rem; }
  .chat-header{ font-size:0.85rem; }
  .chat-messages{ font-size:0.8rem; }
}



.modal{
  position:fixed;
  inset:0;
  display:none;
  background:radial-gradient(circle at center, rgba(0, 0, 64, 0.9) 0%, rgba(0, 0, 25, 0.7) 75%, rgba(0, 0, 0, 0.9) 100% );
  z-index:9999;
  align-items:center;
  justify-content:center;
}
.modal[open]{display:flex}


@font-face{
  font-family:FontFamm1;
  src:url("./fonts/font1.ttf");
}

.modal-box{
  width:min(26rem, 94vw);
  max-height:90vh;
  padding:0.9rem 1rem 1rem;
  display:flex;
  flex-direction:column;
  gap:0.65rem;
  overflow:auto;

  border-radius:var(--r-lg);
  border:0.2rem solid #3e8a97;
  box-shadow:
    inset 0 0 1rem 0 #3e9793,
    0 0.2rem 1rem 0.2rem rgba(0,0,0,0.4);

  background-color:#0b1225;
  background-image:url("images/modal_bg.png");
  background-size:cover;
  background-position:center;

  color:#ffffff;
  font-size:1rem;
  text-shadow:0.05rem 0.05rem #000;
}


.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.5rem;
  font-weight:800;
  font-size:1.1rem;
  margin-bottom:0.25rem;
}

.modal-head span{
  display:flex;
  align-items:center;
  font-family:FontFamm1,system-ui,sans-serif;
  font-size:1.3rem;
  line-height:1;
  padding-left:2.2rem;
  padding-right:0.25rem;
  padding-top:0;
  min-height:2.4rem;
  background-image:url("images/fishbone_topper.png");
  background-repeat:no-repeat;
  background-size:auto 85%;
  background-position:left center;
  border-bottom:0.05rem solid rgba(62,138,151,0.33);
  font-weight:800;
}

.modal-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  cursor:pointer;
  background-color:#000;
  color:#ffffff;
  border:0.15rem solid #3e8a97;
  border-radius:999rem;
  box-shadow:0 0 0.4rem 0.2rem rgba(14,29,47,1), inset 0 0 0.2rem 0.02rem #3e8a97;
  position:absolute;
  top:0.125rem;
  right:0.125rem;
}
.modal-close:hover{
  background:#000000;
  border-color:#ff0000;
  color:#ff0000;
  box-shadow:0 0 0.5rem 0.2rem rgba(255,0,0,1);
}


.field{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
  margin-top:0.25rem;
  padding-bottom:0.15rem;
}

.field label{
  font-size:0.95rem;
  font-weight:600;
}

.field input{
  border-radius:0.5rem;
border: 0.15rem solid #3e8a97;
  background:#000000;
  color:#ffffff;
  padding:0.45rem 0.75rem;
  font:inherit;
  font-size:0.95rem;
  box-shadow:inset 0 0 0.2rem #3e9793;
  text-align:left;
}

.modal-actions{
  margin-top:0.5rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:0.45rem;
}


.modal .btn{ text-transform:uppercase; }


#logo.logo{
  margin:0;
  font-size:0;
  line-height:0;
}

#logo .logo-link{
  display:block;
  height:calc(var(--header-h) - 0.75rem);
  min-height:2.75rem;
  max-height:3.375rem;

  width:min(20rem,52vw);
  background-image:url("images/livePageHeaderOFF.png");
  background-repeat:no-repeat;
  background-position:left center;
  background-size:contain;

  cursor:pointer;
  filter:drop-shadow(0 0 0.375rem rgba(0,0,0,0.9));
}

#logo .logo-link:hover{ filter:brightness(1.5) drop-shadow(0 0 0.9rem rgba(255,255,255,0.5)) drop-shadow(0 0 0.375rem rgba(0,0,0,0.9)); }
#logo .logo-link:focus-visible{ filter:brightness(1.5) drop-shadow(0 0 0.9rem rgba(255,255,255,0.5)) drop-shadow(0 0 0.375rem rgba(0,0,0,0.9)); }



html.is-live #logo .logo-link{ background-image:url("images/livePageHeaderON.png"); }

#logo .logo-link:focus-visible{
  outline:0.125rem solid #fff;
  outline-offset:0.1875rem;
  border-radius:var(--r-sm);
}


.sr-only{
  position:absolute;
  width:0.0625rem;height:0.0625rem;
  padding:0;margin:-0.0625rem;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}


@media (orientation:landscape) and (max-height:30rem){
  #logo .logo-link{
    height:2.375rem;
    width:min(16.25rem,46vw);
  }
}


.screen.is-locked video{
  filter: blur(0.375rem);
  transform: scale(1.02);
}



@media (orientation:landscape) and (hover:none) and (pointer:coarse){

  :root{ --header-h:56px; }


  body, .wrap, main{ overflow:hidden; }


  .stream, .chat{
    height:100%;
    max-height:100%;
    min-height:0;
  }
  .chat-messages{ min-height:0; }


  @supports (height: 100svh){
    main{
      height:calc(100svh - var(--header-h));
      max-height:calc(100svh - var(--header-h));
    }
  }

  @supports (height: 100dvh){
    main{
      height:calc(100dvh - var(--header-h));
      max-height:calc(100dvh - var(--header-h));
    }
  }
}


@media (orientation:landscape) and (max-height:520px){
  .modal{
    --modal-pad:clamp(0.4rem, 2.2vmin, 0.9rem);
    padding:var(--modal-pad);
    box-sizing:border-box;
  }
  .modal-box{
    box-sizing:border-box;
    max-height:min(
      calc(100svh - (2 * var(--modal-pad))),
      calc(100dvh - (2 * var(--modal-pad)))
    );
    overflow:auto;
  }
}


@supports (-moz-appearance:none){
  @media (orientation:landscape) and (hover:none) and (pointer:coarse){


    :root{
      --header-h: clamp(2.6rem, 6vmin, 3.2rem);
    }


    #logo .logo-link{
      height: calc(var(--header-h) - 1rem);
      width: min(16rem, 44vw);
    }
    header .btn{
      font-size: clamp(0.75rem, 2.2vmin, 0.85rem);
      padding: 0.35rem 0.8rem;
    }


    .modal{
      --modal-pad: clamp(0.35rem, 2vmin, 0.8rem);
      padding: var(--modal-pad);
      box-sizing: border-box;
      align-items: center;
      justify-content: center;
    }

    .modal-box{
      width: min(24rem, 92vw);
      max-height: calc(100svh - (2 * var(--modal-pad)));
      max-height: calc(100dvh - (2 * var(--modal-pad)));
      overflow: auto;
      padding: 0.75rem 0.85rem 0.75rem;
    }


    .modal-head{
      gap: 0.4rem;
      font-size: clamp(0.95rem, 2.6vmin, 1.05rem);
    }
    .modal-head span{
      font-size: clamp(1rem, 3vmin, 1.12rem);
      min-height: clamp(1.85rem, 5vmin, 2.15rem);
      padding-left: 2rem;
      padding-top: 0.15rem;


      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;


      background-size: auto 72%;
    }


    .modal-actions{
  margin-top:0.5rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:0.45rem;
}


    .field label{
      font-size: clamp(0.82rem, 2.4vmin, 0.92rem);
    }
    .field input{
      font-size: clamp(0.82rem, 2.4vmin, 0.92rem);
      padding: 0.35rem 0.6rem;
    }
  }
}





@media (orientation:landscape){

  :root{

    --stream-chrome-h: 6.5rem;


    --chat-min: 25rem;


    --chat-normal: clamp(var(--chat-min), 26vw, 30rem);


    --stream-min: 16rem;


    --main-h: calc(100vh - var(--header-h));


    --stream-h: calc(var(--main-h) - var(--stream-chrome-h));
    --stream-h-safe: max(0px, var(--stream-h));


    --need-w: calc(var(--stream-h-safe) * 16 / 9);


    --chat-max: max(var(--chat-min), calc(100vw - var(--stream-min)));
    --chat-w: clamp(var(--chat-min), max(var(--chat-normal), calc(100vw - var(--need-w))), var(--chat-max));
  }


  @supports (height: 100dvh){
    :root{ --main-h: calc(100dvh - var(--header-h)); }
  }
  @supports (height: 100svh){
    :root{ --main-h: calc(100svh - var(--header-h)); }
  }


  main{
    display:grid;
    grid-template-columns: minmax(0, 1fr) var(--chat-w);
    grid-template-rows: 1fr;
    height: var(--main-h);
    max-width:100vw;
    overflow:hidden;
    isolation:isolate;
  }

  .stream,.chat{
    min-width:0;
    min-height:0;
    box-sizing:border-box;
  }


  .stream{
    border-right: var(--border);
    grid-template-rows: minmax(0,1fr) auto auto;
    overflow:hidden;
  }

  .slot{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:0;
    min-width:0;
    overflow:hidden;
  }


  .screen{
    width:100%;
    height:auto;
    max-height:100%;
    aspect-ratio:16/9;
    min-height:0;
    min-width:0;
  }


  .screen > video#player{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    background:#000;
  }


  .chat{
    width:var(--chat-w);
    min-width:var(--chat-min);
    max-width:var(--chat-w);
    overflow:hidden;
    container-type:inline-size;
    container-name:chatpanel;
  }


  .chat{ font-size: clamp(0.78rem, 1.1vw, 1rem); }


  .msg{
    --avatar-col: 2.4rem;
    --avatar-sz: 2rem;
    grid-template-columns: var(--avatar-col) 1fr;
    column-gap:0.65rem;
  }
  .msg-avatar{ width:var(--avatar-sz); height:var(--avatar-sz); }


  @container chatpanel (max-width: 26rem){
    .chat{ font-size: 0.92rem; }

    .msg{ --avatar-col: 2.5rem; --avatar-sz: 2.5rem; column-gap:0.65rem; }
    .chat-input input, .chat-input .btn{ font-size: 0.95em; }
  }

  @container chatpanel (max-width: 22rem){
    .chat{ font-size: 0.85rem; }
    .msg{ --avatar-col: 1.95rem; --avatar-sz: 1.6rem; column-gap:0.5rem; }
    .chat-input{ padding: calc(var(--pad-y) * 0.75) calc(var(--pad-x) * 0.7); }
    .chat-input input, .chat-input .btn{ font-size: 0.93em; }
    .chat-input .btn{ padding:0.55rem 0.85rem; }
  }

  @container chatpanel (max-width: 19rem){
    .chat{ font-size: 0.8rem; }
    .msg{ --avatar-col: 1.75rem; --avatar-sz: 1.45rem; column-gap:0.45rem; }
    .chat-header{ padding: calc(var(--pad-y) * 0.7) calc(var(--pad-x) * 0.8); }
  }
}


@media (orientation:landscape) and (any-hover:none){
  html{ font-size:16px; }
}



#btnSettings{display:none !important;}


html .bar-top{ transition: filter 120ms linear, box-shadow 120ms linear, background 120ms linear; }
html .bar-top.nowplaying-clickable{ cursor:pointer !important; user-select:none; -webkit-user-select:none; pointer-events:auto; }
html .bar-top.nowplaying-clickable *{ cursor:pointer !important; }


html .bar-top.nowplaying-clickable:hover,
html .bar-top.nowplaying-clickable:active,
html .bar-top.nowplaying-clickable:focus-within{
  background: rgba(255,255,255,0.25) !important;
  filter: brightness(1.12) !important;
  box-shadow: inset 0 0 0.5rem 0.1rem rgba(255,255,255,0.75) !important;
}





html .bar-top{ transition:none !important; }


html .bar-top.nowplaying-clickable{ cursor:pointer !important; user-select:none; -webkit-user-select:none; pointer-events:auto; }
html .bar-top.nowplaying-clickable *{ cursor:pointer !important; }
html .bar-top.nowplaying-clickable:hover,
html .bar-top.nowplaying-clickable:active,
html .bar-top.nowplaying-clickable:focus-within{
  background: rgba(255,255,255,0.25) !important;
  filter: brightness(1.12) !important;
  box-shadow: inset 0 0 0.5rem 0.1rem rgba(255,255,255,0.75) !important;
}


.btn:hover{
  border-color:#ffffff;

  filter: brightness(1.14) saturate(1.10);
  box-shadow:
    0 0 0.4rem 0 rgba(255,255,255,0.95),
    inset 0 0 0.55rem 0 rgba(255,255,255,0.90),
    0 0.1rem 0.2rem 0 #000000;

  color: inherit;
}

.cta:hover{
  border-color:#ffffff;
  filter: brightness(1.14) saturate(1.10);
  box-shadow:
    0 0 0.4rem 0 rgba(255,255,255,0.95),
    inset 0 0 0.55rem 0 rgba(255,255,255,0.90),
    0 0.1rem 0.2rem 0 #000000;
  color: inherit;
}

.cta-donate:hover{
  border-color:#ffffff;
  filter: brightness(1.10) saturate(1.06);
  box-shadow:
    0 0 0.4rem 0 rgba(255,226,142,0.95),
    inset 0 0 0.55rem 0 rgba(255,255,255,0.85),
    0 0.1rem 0.2rem 0 #000000;
  color: inherit;
}


.cta-rules{ color:#ffffff; }
.cta-rules:hover{ color:inherit; }


.modal-actions{
  margin-top:0.5rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:0.45rem;
}


.modal-box .nowplaying-name ~ .modal-actions{
  margin-top:0.5rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:0.45rem;
}

.nowplaying-name{
  font-weight:800;
  font-size:0.95rem;
  letter-spacing:.02em;
  margin-top:0.15rem;
}

.nowplaying-desc{
  font-size:0.9rem;
  line-height:1.35;
  margin-top:0.35rem;
  margin-bottom:0.15rem;
  color:#e8e5ff;
}


.nowplaying-thumb-wrap{
  margin:0.5rem 0;
}


.nowplaying-thumb-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background-color:#25292e;
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:0 0 0 0.125rem #000, inset 0 0 0.25rem rgba(255,255,255,0.12);
  background-image: url('images/nothumb.png');
  background-size: cover;
}
img.nowplaying-thumb{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  display:block;
  object-fit:cover;
}

.nowplaying-thumb-wrap .nowplaying-thumb{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}



.modal{
  display:flex !important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
}
.modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition: opacity 220ms ease;
}
.modal.is-closing{
  opacity:0;
  visibility:visible;
  pointer-events:none;
}


.modal .modal-box{
  opacity:0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 220ms ease, transform 220ms ease;
}
.modal.is-open .modal-box{
  opacity:1;
  transform:none;
}
.modal.is-closing .modal-box{
  opacity:0;
  transform: translateY(10px) scale(0.985);
}

@media (prefers-reduced-motion: reduce){
  .modal, .modal .modal-box{ transition:none !important; }
}


.modal-box a.btn,
.modal-box a.cta,
.modal-box .modal-actions a{
  text-decoration:none !important;
}
.modal-box a.btn:hover,
.modal-box a.btn:focus-visible,
.modal-box .modal-actions a:hover,
.modal-box .modal-actions a:focus-visible{
  text-decoration:none !important;
}


.modal-box a,
.modal-box a:visited,
.modal-box a:hover,
.modal-box a:active,
.modal-box a:focus,
.modal-box a:focus-visible{
  text-decoration: none !important;
  text-decoration-line: none !important;
}


a.btn, a.cta, a.cta-donate, .btn, .cta, .cta-donate{
  text-decoration: none;
}





.chat{ position:relative; }

.chat-messages{ position:relative; }

[hidden]{ display:none !important; }

.chat-input{ position:relative; }

.chat-entry-wrap{
  position:relative;
  width:100%;
}

.chat-entry-wrap textarea#chatInput{
  width:100%;
  position:relative;
  z-index:1;
}

.chat-entry-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:999rem;
  padding:0.3rem 0.55rem;
  font:inherit;
  font-size:0.82rem;
  line-height:1.2;
  color:#f9f5ff;
  white-space:pre-wrap;
  word-wrap:break-word;
  overflow:hidden;
  pointer-events:none;
}

.chat-entry-wrap.has-overlay textarea#chatInput{
  color:transparent !important;
  caret-color:#f9f5ff;
}
.chat-entry-wrap.has-overlay textarea#chatInput::placeholder{
  color:transparent;
}

.chat-entry-overlay .emote{
  display:inline-block;
  height:1.25em;
  width:auto;
  vertical-align:middle;
  margin:0 0.08em;
}

.chat-input-bar{
  display:flex;
  align-items:center;
  gap:0.3rem;
}

.chat-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:0.3rem;
}

.chat-emote-btn{
  padding:0.28rem 0.6rem;
  min-width:2.2rem;
}

.emote-picker{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  z-index:90;
  width: 98%;
  border-radius:var(--r-md);
  background:rgba(0,0,0,0.78);
  border:0.0625rem solid rgba(92, 97, 172, 0.7);
  box-shadow: inset 0 0 0.375rem 0.0625rem rgba(28, 52, 147, 0.5), 0 0.5rem 1rem rgba(0,0,0,0.65);
  backdrop-filter: blur(6px);
}

.emote-picker-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.5rem;
  padding:0.35rem 0.45rem;
  border-bottom:0.0625rem solid rgba(92, 97, 172, 0.55);
}
.emote-picker-title{
  font-weight:800;
  font-size:0.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#ffffff;
}
.emote-picker-close{
  padding:0.18rem 0.55rem;
  line-height:1;
}

.emote-picker-grid{
  padding:0.5rem;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(2.2rem, 1fr));
  gap:0.35rem;
  overflow:auto;
}

.emote-picker-grid button{
  appearance:none;
  border:none;
  background:transparent;
  padding: 0.35rem;
  border-radius:0.4rem;
  cursor:pointer;
}
.emote-picker-grid button:hover{
  background:rgba(255,255,255,0.12);
}
.emote-picker-grid img{
  height:auto;
  display:block;
}


.chat-profile{
  position:absolute;
  z-index:95;


  left:0.65rem;
  right:0.65rem;
  margin:0;


  border:0.125rem solid #000020;
  border-radius:0.9rem;
  box-shadow:
    0 0 0.25rem rgba(0,0,0,0.9),
    inset 0 0 0.4rem 0.0625rem rgba(28, 52, 147, 0.6);
  overflow:hidden;


  --prof-pad: 0.9rem;
  --prof-avatar: clamp(4.75rem, 10vmin, 5.75rem);
  --prof-gap: 0.75rem;
}

.chat-profile[hidden]{display:none}

.chat-profile-head{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:0.75rem;


  padding:0.55rem var(--prof-pad) 0.1rem;
  padding-left: calc(var(--prof-pad) + var(--prof-avatar) + var(--prof-gap));

  background:transparent;
  border-bottom:none;
}


.chat-profile-head-left{
  display:block;
  min-width:0;
}


.chat-profile-avatar{
  width:var(--prof-avatar);
  height:var(--prof-avatar);
  position:absolute;
  top:0.4rem;
  left:var(--prof-pad);

  border-radius:0.75rem;
  object-fit:cover;

  border:0.1875rem solid rgba(165,155,255,0.55);
  box-shadow:0 0 0.35rem rgba(0,0,0,0.85);
}


.chat-profile-close{
  position:absolute;
  top:0.45rem;
  right:0.45rem;

  width:2rem;
  height:2rem;
  border-radius:999rem;

  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size:1.25rem;
  line-height:1;

  background:rgba(0,0,0,0.25);
  border:0.125rem solid rgba(255,255,255,0.35);
  box-shadow:none;
  text-shadow:none;
}
.chat-profile-close:hover{
  background:rgba(0,0,0,0.35);
  border-color:rgba(255,255,255,0.5);
}


.chat-profile-sub{
  margin-top:0.1rem;


  padding:0.1rem var(--prof-pad) 0.85rem;
  padding-left: calc(var(--prof-pad) + var(--prof-avatar) + var(--prof-gap));

  font-size:0.95rem;
  color:#e8e5ff;
}


.chat-profile-sub .chat-prof-wrap{
  display:flex;
  flex-direction:column;
  gap:0.25rem;
}

.chat-profile-sub .chat-prof-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
}

.chat-profile-sub .chat-prof-age{
  color:#eeeeee;
  font-size:0.95rem;
  line-height:1.15;
}

.chat-profile-sub .chat-prof-score{
  color:#b9d7ff;
  font-size:0.95rem;
  line-height:1.15;
  margin-top:0.25rem;
}


.chat-profile-sub .chat-prof-levelwrap{
  flex:0 0 auto;
  min-width:10.5rem;
  text-align:right;

  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0.2rem;
}

.chat-profile-sub .chat-prof-level{
  font-weight:900;
  color:#ffffff;
  letter-spacing:0.02em;
}

.chat-profile-sub .chat-prof-levelbar{
  position:relative;
  width:10.5rem;
  height:1.1rem;
  background:#0b0b0b;
  border:0.125rem solid rgba(238,238,238,0.95);
  border-radius:0.12rem;
  overflow:hidden;
  box-shadow: inset 0 0 0.25rem rgba(0,0,0,0.85);
}

.chat-profile-sub .chat-prof-levelbar-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  background:#ff9a2a;
}

.chat-profile-sub .chat-prof-levelbar-label{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding-right:0.45rem;

  font-weight:800;
  font-size:0.78rem;
  color:#eeeeee;
  text-shadow:0 0 0.25rem rgba(0,0,0,0.95);
  pointer-events:none;
  white-space:nowrap;
}


.chat-profile-sub .chat-prof-expnums{ display:none; }

.chat-profile-sub .chat-prof-modhint{
  margin-top:0.45rem;
  padding-top:0.45rem;
  border-top:0.0625rem solid rgba(255,255,255,0.15);
  color:rgba(199,194,255,0.75);
  font-size:0.8rem;
}


.chat-profile.no-avatar .chat-profile-sub{
  padding-left:0.9rem;
}

.chat-input .chat-editor{
  overflow-y:auto;
  outline:none;
  white-space:pre-wrap;
  overflow-wrap:break-word;
  cursor: text;
  line-height:1.5;
  min-height:calc(1.5em + 1.0rem);
  padding:0.55rem 0.75rem;
}
.chat-input .chat-editor:empty:before{
  content:attr(data-placeholder);
  color:var(--muted);
}
.chat-input .chat-editor .emote{



  vertical-align:middle;
  object-fit:contain;
}
.chat-input .chat-editor .emote-token{
  display:inline-flex;
  align-items:center;
  vertical-align:middle;

}


.chat-profile-sub{ margin-top:0.1rem; }
.chat-profile-sub .chat-prof-grid{ align-items:flex-start; }
.chat-profile-sub .chat-prof-age{ color:#eeeeee; }
.chat-profile-sub .chat-prof-score{ color:#b9d7ff; }
.chat-profile-sub .chat-prof-level{ font-weight:900; font-size:1.05rem; }
.chat-profile-sub .chat-prof-expbar{ width:11rem; height:1.15rem; border-radius:0.25rem; }
.chat-profile-sub .chat-prof-exptxt{ font-size:0.82rem; font-weight:800; }




.field input,
.field textarea,
.field select,
.chat-input input,
.chat-input textarea{
  font-style: normal;
}

.field input::placeholder,
.field textarea::placeholder,
.chat-input input::placeholder,
.chat-input textarea::placeholder{
  font-style: italic;

  opacity: 1;
  color: rgba(96,107,100,0.66);
}


.field input[type="checkbox"],
.field input[type="radio"]{
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}


.field:has(> input[type="checkbox"]),
.field:has(> input[type="radio"]){
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}


.field:has(> #acct-theme){
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;

.btn.modal-close:focus,.btn.modal-close:focus-visible,.modal-close:focus,.modal-close:focus-visible,.chat-profile-close:focus,.chat-profile-close:focus-visible{outline:none;}
}

.field:has(> #acct-theme) > label{
  flex: 0 0 auto;
  min-width: 5.25rem;
  margin: 0;
  text-align: left;
}



.btn.modal-close{
  background:#000 !important;
  background-color:#000 !important;
  background-image:none !important;
  color:#ffffff !important;
  border:0.15rem solid #3e8a97 !important;
  box-shadow:0 0 0.4rem 0.2rem rgba(14,29,47,1), inset 0 0 0.2rem 0.02rem #3e8a97 !important;
  filter:none !important;
  text-shadow:none !important;
}
.btn.modal-close:hover{
  background:#000000 !important;
  border-color:#ff0000 !important;
  color:#ff0000 !important;
  box-shadow:0 0 0.5rem 0.2rem rgba(255,0,0,1) !important;
  filter:none !important;
}


.chat-profile-close{
  background:#000 !important;
  background-color:#000 !important;
  background-image:none !important;
  color:#ffffff !important;
  border:0.15rem solid #3e8a97 !important;
  box-shadow:0 0 0.4rem 0.2rem rgba(14,29,47,1), inset 0 0 0.2rem 0.02rem #3e8a97 !important;
  filter:none !important;
  text-shadow:none !important;
}
.chat-profile-close:hover{
  background:#000000 !important;
  border-color:#ff0000 !important;
  color:#ff0000 !important;
  box-shadow:0 0 0.5rem 0.2rem rgba(255,0,0,1) !important;
  filter:none !important;
}

.field:has(> #acct-theme) > select{
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0.9rem;
  background-color: #000;
  border: 0.15rem solid #3e8a97;
  border-radius: 0.5rem;
  color: #FFF;
}


.chat-profile{

  padding-bottom: 0.55rem;
  min-height: calc(var(--prof-avatar) + 1.25rem);
}

.chat-profile-head{
  padding-bottom: 0.2rem;
}

.chat-profile-sub{

  padding-bottom: 1rem;
}

.chat-profile-sub .chat-prof-grid,
.chat-profile-sub .chat-prof-row{
  flex-wrap: wrap;
}

.chat-profile-sub .chat-prof-left{
  flex: 1 1 9rem;
  min-width: 0;
}

.chat-profile-sub .chat-prof-right,
.chat-profile-sub .chat-prof-levelwrap{

  flex: 0 1 11rem;
  max-width: 48%;
  min-width: 0 !important;
}

.chat-profile-sub .chat-prof-expbar,
.chat-profile-sub .chat-prof-levelbar{
  width: 100% !important;
  max-width: 11rem;
}

.chat-profile-sub .chat-prof-age,
.chat-profile-sub .chat-prof-score{
  white-space: nowrap;
}

.chat-profile-sub .chat-prof-exptxt,
.chat-profile-sub .chat-prof-levelbar-label{
  font-size: 0.78rem;
}


@container chatpanel (max-width: 22rem){
  .chat-profile-sub .chat-prof-right,
  .chat-profile-sub .chat-prof-levelwrap{
    flex-basis: 100%;
    max-width: 100%;
    align-items: flex-start;
    text-align: left;
  }

  .chat-profile-sub .chat-prof-levelbar-label{
    justify-content: flex-start;
    padding-left: 0.45rem;
    padding-right: 0.45rem;
  }
}




.chat-profile-sub .chat-prof-grid{
  flex-wrap:nowrap;
  min-width:0;
}

.chat-profile-sub .chat-prof-left{
  flex:1 1 auto;
  min-width:0;
}

.chat-profile-sub .chat-prof-right,
.chat-profile-sub .chat-prof-levelwrap{

  min-width:0 !important;
  flex:0 1 auto;
  max-width:9.25rem;
}


.chat-profile-sub .chat-prof-expbar,
.chat-profile-sub .chat-prof-levelbar{
  width:clamp(7.25rem, 28vw, 9rem) !important;
  max-width:9rem;
}


.chat-profile-sub .chat-prof-left,
.chat-profile-sub .chat-prof-right,
.chat-profile-sub .chat-prof-levelwrap{
  gap:0.35rem;
}


@container chatpanel (max-width: 22rem){
  .chat-profile-sub .chat-prof-right,
  .chat-profile-sub .chat-prof-levelwrap{
    flex-basis:auto;
    max-width:9rem;
    align-items:flex-end;
    text-align:right;
  }

  .chat-profile-sub .chat-prof-levelbar-label{
    justify-content:flex-end;
  }
}


.chat-profile{
  --prof-avat-pad: 0.45rem;

  min-height: calc(var(--prof-avatar) + (2 * var(--prof-avat-pad)));
}

.chat-profile-avatar{
  top: 50% !important;
  transform: translateY(-50%);
}


.chat-profile{
  --prof-avat-top: 0.4rem;
  --prof-avat-bottom: var(--prof-avat-top);

  padding-bottom: 0 !important;


  min-height: calc(var(--prof-avatar) + var(--prof-avat-top) + var(--prof-avat-bottom)) !important;
}


.chat-profile-avatar{
  top: var(--prof-avat-top) !important;
  transform: none !important;
}


.chat-profile{

  --prof-avat-top: 0.4rem;
  --prof-avat-shadow-y: 0.35rem;


  --prof-avat-bottom: calc(var(--prof-avat-top) + var(--prof-avat-shadow-y));


  min-height: calc(var(--prof-avatar) + var(--prof-avat-top) + var(--prof-avat-bottom)) !important;


  padding-bottom: 0.05rem !important;
}

.chat-profile-avatar{
  top: var(--prof-avat-top) !important;
  transform: none !important;
}


.chat-profile{
  --prof-avat-top: 0.4rem;
  --prof-avat-shadow-y: 0.35rem;
  --prof-avat-bottom: calc(var(--prof-avat-top) + var(--prof-avat-shadow-y));


  min-height: calc(var(--prof-avatar) + var(--prof-avat-top) + var(--prof-avat-bottom)) !important;


  padding-bottom: 0 !important;
}

.chat-profile-avatar{
  top: var(--prof-avat-top) !important;
  transform: none !important;
}




  .modal{display:flex !important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility 0s linear .16s}
  .modal.is-open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .16s ease}
  .modal-box{transform:translateY(6px);transition:transform .16s ease}
  .modal.is-open .modal-box{transform:translateY(0)}


.userbtn{
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  box-shadow:none;
  text-shadow:none;
  border-radius:0;
  min-width:0;
  width:calc(var(--header-h) - 0.75rem);
  height:calc(var(--header-h) - 0.75rem);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.userbtn:hover{ background:transparent; box-shadow:none; }
.userbtn:focus{ outline:none; }
.userbtn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.userbtn .user-avatar{
  width:100%;
  height:100%;
  border-radius:999px;
  display:block;
  object-fit:cover;
}

.userbtn:hover .user-avatar{ filter:brightness(1.5); box-shadow:0 0 1rem rgba(255,255,255,0.5); }
.userbtn:focus-visible .user-avatar{ filter:brightness(1.5); box-shadow:0 0 1rem rgba(255,255,255,0.5); }



.header-right{ position:relative; }


.userbtn{ position:relative; z-index:60; }

.user-menu{
  position:absolute;
  right:-8px;
  top:-8px;

  min-width:280px;
  max-width:min(92vw, 360px);

  padding:10px;
  padding-top:calc((var(--header-h) - 0.75rem) + 14px);

  color:#fff;


  background-image:url('images/win_bg.png');
  background-repeat:repeat;
  background-color:#0b0c20;

  border:0.125rem solid #000020;
  border-radius:0.9rem;
  box-shadow:
    0 0 0.25rem rgba(0,0,0,0.9),
    0 12px 28px rgba(0,0,0,0.22),
    inset 0 0 0.4rem 0.0625rem rgba(28, 52, 147, 0.6);

  z-index:50;
}

.user-menu[hidden]{ display:none !important; }


.user-menu .um-head{
  position:absolute;
  left:10px;
  right:10px;
  top:10px;
  height:calc(var(--header-h) - 0.75rem);

  display:flex;
  align-items:center;
  justify-content:center;


  padding-right:calc((var(--header-h) - 0.75rem) + 10px);
  pointer-events:none;
  overflow:visible;
}

.user-menu .um-username{
  font-weight:900;
  font-size:1.35rem;
  line-height:1.25;
  color:#ffec66;
  text-shadow:0 0 0.25rem rgba(0,0,0,0.95);

  padding-bottom:3px;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.user-menu .um-item{
  width:100%;
  text-align:left;

  display:flex;
  align-items:center;

  background:transparent;
  border:0;
  color:#fff;

  min-height:44px;
  padding:0 14px;
  border-radius:0.75rem;

  cursor:pointer;
  font:inherit;
  font-weight:800;
  line-height:1.3;

  box-sizing:border-box;
}

.user-menu .um-item:hover,
.user-menu .um-item:focus-visible{
  background:rgba(255,255,255,0.14);
  box-shadow:0 0 0.55rem rgba(255,255,255,0.22);
  outline:none;
}

.user-menu .um-item:active{
  background:rgba(255,255,255,0.20);
  box-shadow:0 0 0.75rem rgba(255,255,255,0.28);
}

.user-menu .um-sep{
  height:1px;
  background:rgba(255,255,255,0.35);
  margin:8px 6px;
}

.user-menu .um-sep.um-sep-top{
  margin-top:2px;
  margin-bottom:10px;
}




@media (orientation:landscape) and (max-aspect-ratio:5/4){
  :root{
    --chat-min: 25rem;
  }
}

@media (max-width: 420px){
  .user-menu{
    right:-6px;
    top:-6px;
    min-width:min(92vw, 320px);
    max-width:92vw;
  }
}
@media (orientation: landscape) {
  .msg-avatar {
    width: 100%;
    height: 100%;
    max-height: 2.6rem;
  }
}


.user-menu .um-username.um-profile-trigger{
  padding:6px 10px;
  border-radius:0.5rem;
  outline:none;
}
.user-menu .um-username.um-profile-trigger:hover,
.user-menu .um-username.um-profile-trigger:focus,
.user-menu .um-username.um-profile-trigger:focus-visible{
  background:rgba(255,255,255,0.14)!important;
  box-shadow:0 0 0.55rem rgba(255,255,255,0.22)!important;
  outline:none!important;
}

.ddvg-xpbar{
  margin-top:8px;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,0.14)!important;
  border:1px solid rgba(255,255,255,0.10)!important;
}
.ddvg-xpbar-fill{
  height:100%;
  background:#ff9a2f!important;
}


.msg-mention-tag{display:inline-block;padding:0 .22rem;border-radius:.38rem;font-weight:800;color:#dff8ff;background:rgba(80,177,255,.18)}
.msg-mention-tag.msg-mention-me{color:#ffffff;background:rgba(80,177,255,.30);box-shadow:0 0 0 .0625rem rgba(223,248,255,.22) inset}
.msg.msg-mention-target{border-color:#73d6ff!important;box-shadow:0 0 0 .125rem rgba(115,214,255,.34), inset 0 0 0 .0625rem rgba(223,248,255,.14)!important}