/* KanGouLya Theme */
@font-face { font-family: 'angels'; src: url('fonts/angels.ttf') format('truetype'); }
@font-face { font-family: 'source_sans_proregular'; src: url('fonts/sourcesanspro-regular-webfont.ttf') format('truetype'); }
@font-face { font-family: 'source_sans_probold'; src: url('fonts/sourcesanspro-bold-webfont.ttf') format('truetype'); }

* { box-sizing: border-box; margin: 0; padding: 0; }
::-webkit-scrollbar { width: 0; height: 0; }
html, body { height: 100%; width: 100%; overflow: hidden; font-family: angels, sans-serif; line-height: 1.4; background: #060807; }
a { text-decoration: none; }

.element-invisible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.logo { position: fixed; bottom: 16px; right: 16px; width: 4.5em; height: 4.5em; background-image: url('./logo.png'); background-size: contain; background-repeat: no-repeat; z-index: 0; opacity: 0.86; }
.user-portal { background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.78)), url('background.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center; }

.content { position: fixed; inset: 0; display: flex; flex-direction: column; }
#header { text-align: center; padding: .4em .6em 0; flex-shrink: 0; }
#nian { width: 242px; max-width: 54vw; max-height: 18vh; opacity: 0.9; border-radius: 8px; box-shadow: 0 0 24px rgba(0, 255, 148, 0.16); }

#text-angels {
  width: min(92vw, 760px);
  margin: .4em auto 0;
  padding: .58em .72em;
  border: 1px solid rgba(102, 255, 171, 0.45);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.52);
  color: #a7ffd2;
  font: 500 15px/1.35 'Courier New', Courier, monospace;
  outline: none;
}
#text-angels:focus { border-color: rgba(130, 255, 186, 0.9); box-shadow: 0 0 0 2px rgba(0, 255, 170, 0.16); }
#text-angels::placeholder { color: rgba(141, 255, 198, 0.65); }

#main { flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: stretch; padding: .3em .6em .6em; }
#angels-response {
  width: min(92vw, 760px);
  margin: 0 auto;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid rgba(98, 255, 175, 0.28);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.52));
  box-shadow: inset 0 0 26px rgba(0, 255, 127, 0.08), 0 10px 22px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(2px);
  padding: .7em .75em;
  font: 500 14px/1.45 'Courier New', Courier, monospace;
  color: #93ffbd;
}

.angels-console { display: flex; flex-direction: column; gap: .45em; }
.angels-line {
  border-left: 2px solid rgba(111, 255, 184, 0.25);
  padding: .2em .55em;
  color: #adffd0;
  background: rgba(0, 0, 0, 0.2);
  white-space: pre-wrap;
  word-break: break-word;
}
.angels-line .angels-meta { color: #67d89a; margin-right: .42em; }
.angels-line.system { border-left-color: rgba(255, 219, 113, 0.35); color: #ffd98f; }
.angels-line.user { border-left-color: rgba(116, 184, 255, 0.35); color: #b9dbff; }
.angels-line.error { border-left-color: rgba(255, 122, 122, 0.45); color: #ffadad; }

#apps { flex-shrink: 0; padding-top: 8px; }
.carousel { display: flex; width: max-content; cursor: grab; user-select: none; padding: 8px 0; }
.carousel:active { cursor: grabbing; }
.carousel ul { display: flex; gap: 2em; padding: 0; margin: 0; flex-shrink: 0; }
.carousel ul:first-child { margin-right: 2em; }
.carousel li { list-style: none; box-shadow: 2px 2px 3px rgba(0, 0, 0, .4), -2px -2px 3px 0 rgba(0, 0, 0, .7) inset; }
.carousel a { display: block; position: relative; padding: .2em; width: 2.7em; height: 2.7em; background: rgba(255, 255, 255, .26); color: #0d1a12; font-size: 4em; top: 0; left: 0; transition: all .3s ease; font-family: source_sans_probold, sans-serif; }
.carousel a:hover, .carousel a:focus { left: -10px; top: -10px; box-shadow: none; color: #fff !important; }
.carousel a:hover:before, .carousel a:focus:before { height: 10px; }
.carousel a:hover:after, .carousel a:focus:after { width: 10px; }
.carousel a:hover:before, .carousel a:focus:before, .carousel a:hover:after, .carousel a:focus:after { background: rgba(51, 51, 51, .4); }
.carousel a:before, .carousel a:after { content: ''; position: absolute; transition: all .3s ease; }
.carousel a:before { width: 100%; height: 0; left: 5px; top: 100%; box-shadow: 0 5px 10px rgba(0, 0, 0, .4); transform: skew(45deg, 0deg); }
.carousel a:after { width: 0; height: 100%; left: 100%; top: 5px; box-shadow: 5px 0 10px rgba(0, 0, 0, .4); transform: skew(0deg, 45deg); }
.carousel span { display: block; margin: -1.2em 0 0 .2em; }
.carousel .first-letter { margin: 0; display: inline-block; font-family: source_sans_probold, sans-serif; }
.carousel .first-letter::before { content: attr(data-first-letter); }
.carousel .name { font-family: source_sans_proregular, sans-serif; font-size: .3em; }
.app-tile { background-color: rgba(196, 255, 228, 0.22) !important; color: #08140f !important; }

audio { max-width: min(92vw, 760px); display: block; margin: 0 auto; padding: 0; filter: saturate(0.8) contrast(1.1); }
#StreamTITLE { display: none; }

@media (max-width: 680px) {
  #nian { max-width: 66vw; }
  #text-angels { font-size: 14px; }
  #angels-response { font-size: 13px; padding: .65em .6em; }
  .logo { width: 4em; height: 4em; bottom: 12px; right: 12px; }
}