@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');

* {
  font-family: "Kiwi Maru", serif;
  border: none;
  box-sizing: border-box;
}

body {
  background: linear-gradient(to bottom, #4A148C, #FFC0CB);
  background-attachment: fixed;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
  line-height: 1.3;
  color: #000000;
}

span, div {
  text-shadow: none;
}

p {
  font-size: 1.1em;
  margin-bottom: 1em;
}

a {
  color: #FF69B4;
  text-decoration: underline;
  text-shadow: 0 0 8px rgba(255, 105, 180, 0.6);
}

a:hover {
  color: #E04090;
}

table, th, td {
  border-collapse: collapse;
  border: none !important;
}

button, input, select, textarea {
  border: none;
  outline: none;
}

.sikbox, .usmbox, .hbcbox, .akgbox {
  max-width: 960px;
  margin: 40px auto;
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}

.sikbox {
  box-shadow: 8px 8px 15px rgba(74, 20, 140, 0.4);
  text-shadow: 0 0 10px rgba(74, 20, 140, 0.7);
}

.usmbox {
  box-shadow: 8px 8px 15px rgba(255, 193, 0, 0.4);
  text-shadow: 0 0 10px rgba(255, 193, 0, 0.7);
}

.hbcbox {
  box-shadow: 8px 8px 15px rgba(115, 194, 251, 0.4);
  text-shadow: 0 0 10px rgba(115, 194, 251, 0.7);
}

.akgbox {
  box-shadow: 8px 8px 15px rgba(254, 140, 184, 0.4);
  text-shadow: 0 0 10px rgba(254, 140, 184, 0.7);
}

.sikbox a, .usmbox a, .hbcbox a, .akgbox a,
.chat a {
  color: #FF69B4;
  text-decoration: underline;
  text-shadow: 0 0 8px rgba(255, 105, 180, 0.6);
}
.sikbox a:hover, .usmbox a:hover, .hbcbox a:hover, .akgbox a:hover,
.chat a:hover {
  color: #E04090;
}

.chat {
    width: 100%;
    max-width: 250px;
    margin: 40px auto;
    padding: 10px 15px;
    border: 1px #ddd solid;
    background: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    color: #333;
    line-height: 1.4;
    height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: none;
    text-shadow: none;
    border-radius: 10px;
}

.chat span.datetime,
.chat p.date,
.chat .timestamp {
    display: none !important;
}

.chat p,
.chat .bks {
    text-shadow: none;
    white-space: normal;
    overflow: visible;
}
.chat .now span {
    display: inline-block;
    animation: scrollText 15s linear infinite;
}

.chat > div:last-of-type {
    margin-bottom: 20px;
}

.siksip, .sikns, .akgsip, .akgns, .akgsip-r, .akgns-r,
.hsrbsip, .hsrbns, .kyngsip, .kyngns, 
.usmsip, .usmns, .usmsip-r, .usmns-r {
    position: relative;
    display: inline-block;
    max-width: 150px;
    margin: 1px 10px 6px;
    padding: 9px 14px;
    border-radius: 19px;
    overflow-wrap: break-word;
    clear: both;
    box-sizing: content-box;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.5;
}

.siksip, .sikns {
    float: right;
    background-color: #8C4664;
    color: #FFFFFF;
    margin-left: auto;
}

.akgsip, .akgns {
    float: left;
    background-color: #FF8C9B;
    color: #FFFFFF;
}

.akgsip-r, .akgns-r {
    float: right;
    background-color: #FF8C9B;
    color: #FFFFFF;
    margin-left: auto;
}

.hsrbsip, .hsrbns {
    float: left;
    background-color: #A58CDC;
    color: #FFFFFF;
}

.kyngsip, .kyngns {
    float: left;
    background-color: #5A5FAA;
    color: #FFFFFF;
}

.usmsip, .usmns {
    float: left;
    background-color: #FFC100;
    color: #FFFFFF;
}

.usmsip-r, .usmns-r {
    float: right;
    background-color: #FFC100;
    color: #FFFFFF;
    margin-left: auto;
}

.sikns, .akgns, .akgns-r, .hsrbns, .kyngns, .usmns, .usmns-r {
    margin-bottom: 0;
}

.siksip::after, .akgsip::after, .akgsip-r::after, .hsrbsip::after, .kyngsip::after, .usmsip::after, .usmsip-r::after {
    position: absolute;
    content: "";
    width: 17px;
    height: 17px;
    bottom: 0;
}

.siksip::after {
    right: -6px;
    border-radius: 0px 0 0 17px/ 0px 0 0 13px;
    box-shadow: 14px 2px 0 -3px #8C4664 inset;
}

.akgsip::after {
    left: -6px;
    border-radius: 0px 0 17px 0px/ 0px 0 13px 0;
    box-shadow: -14px 2px 0 -3px #FF8C9B inset;
}

.akgsip-r::after {
    right: -6px;
    border-radius: 0px 0 0 17px/ 0px 0 0 13px;
    box-shadow: 14px 2px 0 -3px #FF8C9B inset;
}

.hsrbsip::after {
    left: -6px;
    border-radius: 0px 0 17px 0px/ 0px 0 13px 0;
    box-shadow: -14px 2px 0 -3px #A58CDC inset;
}

.kyngsip::after {
    left: -6px;
    border-radius: 0px 0 17px 0px/ 0px 0 13px 0;
    box-shadow: -14px 2px 0 -3px #5A5FAA inset;
}

.usmsip::after {
    left: -6px;
    border-radius: 0px 0 17px 0px/ 0px 0 13px 0;
    box-shadow: -14px 2px 0 -3px #FFC100 inset;
}

.usmsip-r::after {
    right: -6px;
    border-radius: 0px 0 0 17px/ 0px 0 0 13px;
    box-shadow: 14px 2px 0 -3px #FFC100 inset;
}

.bks {
  color: transparent;
  text-shadow: 0 0 8px #000000;
}

.now {
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.now span {
  display: inline-block;
  animation: scrollText 15s linear infinite;
}

@keyframes neon-blink {
  from {
    text-shadow: 0 0 8px #FFD1DC;
  }
  to {
    text-shadow: 0 0 15px #FFD1DC;
  }
}

.sikluv {
  fill: #5F0099;
}

.akgluv {
  fill: #FF69B4;
}

.mrsk {
  color: #5F0099;
}

.skr {
  color: #FF69B4;
  margin: 0;
  padding: 0;
  font-size: 1em;
  line-height: 1.2;
}

details {
  max-width: 960px;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
  color: #000000;
  overflow: hidden;
}

summary {
  color: #FFFFFF;
  cursor: pointer;
  padding: 5px 20px;
  font-size: 1em;
  outline: none;
  user-select: none;
  transition: none;
  border-radius: 0;
  position: relative;
  box-shadow: none;
  margin-bottom: 0;
  background-color: transparent;
  list-style: none;
  text-align: left;
}

summary::-webkit-details-marker {
  display: none;
}
summary::marker {
  display: none;
}

summary::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  margin-right: 10px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M512%20240c0%20132.5-114.6%20240-256%20240-37.1%200-72.3-7.4-104.1-20.7L33.5%20510.1c-9.4%204-20.2%201.7-27.1-5.8S-2%20485.8%202.8%20476.8l48.8-92.2C19.2%20344.3%200%20294.3%200%20240%200%20107.5%20114.6%200%20256%200S512%20107.5%20512%20240z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;

  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M512%20240c0%20132.5-114.6%20240-256%20240-37.1%200-72.3-7.4-104.1-20.7L33.5%20510.1c-9.4%204-20.2%201.7-27.1-5.8S-2%20485.8%202.8%20476.8l48.8-92.2C19.2%20344.3%200%20294.3%200%20240%200%20107.5%20114.6%200%20256%200S512%20107.5%20512%20240z%22%2F%3E%3C%2Fsvg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  background-color: #FFFFFF;

  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 0.2s ease-in-out;
}

details[open] > summary::before {
  transform: rotate(90deg);
}

details a {
  color: #FF69B4;
  text-decoration: underline;
  text-shadow: 0 0 8px rgba(255, 105, 180, 0.6);
}

details a:hover {
  color: #E04090;
}

details > p,
details > ul,
details > div {
  padding: 0 20px;
  color: #000000;
}

details p a,
details ul a,
details div a {
    color: #FF69B4;
    text-shadow: 0 0 8px rgba(255, 105, 180, 0.6);
}

details p a:hover,
details ul a:hover,
details div a:hover {
    color: #E04090;
}

details [open] > *:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

textarea.hako {
  display: block;
  max-width: 450px;
  width: 100%;
  margin: 8px auto;
  padding: 8px;
  height: 30px;
  border: 1px solid #AAA;
  border-radius: 4px;
  background-color: #FFF;
  color: #333;
  font-size: 0.95em;
  resize: vertical;
}

textarea.hako:focus {
  border-color: #4A148C;
  outline: none;
}

.hako-label {
    display: block;
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.1em;
    font-weight: bold;
    color: #444444;
    text-shadow: 2px 2px 4px #000000;
}

.sikluv-heart {
  fill: #5F0099;
}

.akgluv-heart {
  fill: #FF69B4;
}

.ongk {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  animation: scrollOngk 8s linear infinite;
}

@keyframes scrollOngk {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}