:root{
  --accent:#4ac56d;
  --accent-dark:#184b18;
  --card:#fffdf0;
  --muted:#666;
  --bg-1:#e9f7ee;
  --bg-2:#f7fff9;
  --max-width:1100px;
  --radius:12px;
  --gap:20px;
  
  font-family: "Comic Sans MS", "Comic Neue", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html,body{
  height:100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
  font-family: "Comic Sans MS", "Comic Neue", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #ff0; 
  color: #000;
  padding-top: 0;
}


body {
  font-style: normal;
}


.gif-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  text-align: center;
}

.tsundere-gif {
  display: block;
  margin: 0 auto;
}


.content {
  padding: 20px;
  max-width: var(--max-width);
  width: 100%;
  box-sizing: border-box;
  display:flex;
  gap:18px;
  align-items:flex-start;
}


.left-panel, .main, .chat-list, .chat-form {
  background: #ffffff;
  border: 4px solid rgba(26,104,26,0.06);
  border-radius: 8px;
  padding:14px;
  box-shadow: 0 8px 24px rgba(19,41,19,0.04);
}


.left-panel {
  width: 320px;
  flex: 0 0 320px;
}


.main {
  flex: 1 1 auto;
  min-width:0;
}


.baby-content {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
}

.baby-content h1 { margin:0 0 8px; color:var(--accent-dark); font-size:1.6rem; }
.baby-content img { max-width:420px; width:100%; height:auto; border-radius:10px; border:2px solid rgba(26,85,26,0.06); box-shadow:0 8px 18px rgba(10,20,10,0.06); }


a, .youtube-link, .baby-link, .back-main-button {
  color: #4ac56d; 
  text-decoration: none;
  transition: color .12s ease, transform .12s ease;
}

a:hover, .youtube-link:hover, .baby-link:hover, .back-main-button:hover {
  color: #26681e; 
  transform: translateY(-2px);
}


.lang-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;
    background-color: #b8b8b8;
    margin: 0;
    box-shadow: 0 2px 4px rgba(155,155,155,0.1);
}
.lang-button {
    background-color: #4ac56d;
    color: white;
    border: 4px solid #26681e;
    transition: background-color 0.3s;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 6px;
}
.lang-button:hover { transform: translateY(-2px); }
.lang-button.active { background-color: #26681e; border-color: #0f3f0f; }
.lang-button.playing {
  background-color: #26681e;
  border-color: #0f3f0f;
  box-shadow: 0 6px 14px rgba(10,20,10,0.06);
  transform: translateY(-2px);
}


.guest-list {
  max-height:60vh;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  background: linear-gradient(180deg,#fff,#fffef6);
  border-radius:8px;
  border:2px solid rgba(26,104,26,0.04);
}

.guest-entry {
  background: #fffdf0;
  border-left: 6px solid #4ac56d;
  padding:10px;
  border-radius:8px;
  word-break:break-word;
}
.guest-entry .name { font-weight:800; color:#184b18; margin-bottom:6px; }
.guest-entry .time { font-size:0.75rem; color:#666; margin-top:6px; }


input[type="text"], textarea, #guest-username, #guest-message {
    border:2px solid rgba(24,75,24,0.08);
    padding:8px 10px;
    border-radius:8px;
    width:100%;
    font:inherit;
    box-sizing:border-box;
    background:#fffefc;
}

#guest-form {
  display:flex;
  flex-direction:column;
  gap:10px;
}


.guest-submit, #guest-form button {
  display:inline-block;
  background:#4ac56d;
  color:#fff;
  border:4px solid #26681e;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  font-weight:700;
}


@media (max-width:900px){
  .content { flex-direction:column; padding:12px; }
  .left-panel { width:100%; flex:0 0 auto; }
  .main { width:100%; }
}


button:focus, a:focus, input:focus, textarea:focus { outline:3px solid rgba(74,197,109,0.12); outline-offset:2px; }


#guest-list { visibility:visible !important; display:flex !important; flex-direction:column !important; }


body.home {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0; 
}


body.home .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
}


body.home .corner-links {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 8px;
  z-index: 9999;
}


body.home .corner-links .baby-link {
  border-radius: 8px;
  padding: 8px 10px;
  background: #fffdf0;
  border: 3px solid rgba(26,104,26,0.06);
  box-shadow: 0 6px 14px rgba(10,20,10,0.04);
  color: #184b18;
}


@media (max-width:480px) {
  body.home .corner-links { flex-direction: column; right: 12px; bottom: 12px; }
}


:root { --langbar-height: 64px; }

.lang-buttons {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--langbar-height);
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  background-color: #b8b8b8;
  padding: 8px 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  z-index: 9999;
  box-sizing: border-box;
}


body {
  padding-top: var(--langbar-height);
}


@media (max-width:420px) {
  :root { --langbar-height: 56px; }
  .lang-buttons { height: var(--langbar-height); padding: 6px; }
  body { padding-top: var(--langbar-height); }
}


.back-main-corner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10010; 
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.back-main-button {
  display: inline-block;
  background: #fffdf0;
  color: #184b18;
  border: 3px solid rgba(26,104,26,0.08);
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 6px 14px rgba(10,20,10,0.04);
}

.back-main-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(10,20,10,0.06);
}


@media (max-width:480px) {
  .back-main-corner { right: 10px; bottom: 10px; }
  .back-main-button { padding: 7px 10px; font-size: 0.95rem; }
}


body.home h1,
.baby-content h1 {
  font-size: 2.4rem; 
  line-height: 1.05;
  margin: 0 0 10px;
  font-weight: 700;
}


@media (min-width: 900px) {
  body.home h1,
  .baby-content h1 {
    font-size: 3.4rem;
  }
}


.gif-caption {
  font-style: italic;
}


.content p {
  text-align: center;
}


.content p a,
.content p .youtube-link {
  display: inline-block;
  margin: 6px 0;
}

.banger-button {
  background-color: #4ac56d;
  color: white;
  border: 4px solid #26681e;
  transition: background-color 0.18s, transform 0.12s;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 6px;
  font-weight: 700;
  display: inline-block;
}
.banger-button:hover { transform: translateY(-2px); }

.banger-button.playing {
  background-color: #26681e;
  border-color: #0f3f0f;
  box-shadow: 0 6px 14px rgba(10,20,10,0.06);
  transform: translateY(-2px);
}

.corner-links .baby-link,
.corner-links .baby-link strong {
  font-weight: 700 !important;
}