/* ============================================================
   link styling
   ============================================================ */
a:link {
  text-decoration: none;
  color: white;
}

a:visited {
  text-decoration: none;
  color: white;
}

a:hover {
  text-decoration: none;
  font-style: italic;
  color: #FFFFFF;
  font-weight: bold;
}

a:active {
  text-decoration: none;
  color: white;
}

/* ============================================================
   base
   ============================================================ */
body {
  font-family: ms gothic;
  font-size: 14px;
  color: #5D5D5D;
  background-color: #000;
  background-image: url("");
  background-size: cover;
  background-attachment: fixed;
  padding: 10px;
  overflow: auto;
}

/* ============================================================
   layout (flex)
   ============================================================ */

/* the mother container: just centers the frame, 900px wide */
.container {
  width: 900px;
  min-height: 800px;
  margin: auto;
  padding: 0px;
  position: relative;
}

/* eyes */
#eyes {
  position: absolute;
  top: 90px;
  left: -25px;
  pointer-events: none;
}

.eyes-trigger {
  position: absolute;
  top: 50px;
  left: 100px;
  width: 80%;
  height: 150px;
  pointer-events: auto;
}

/* the inner frame: header / ticker on full width,
   sidebar + main side by side, footer on full width.
   600px = 4/6 of the 900px container (the grille left 1 empty
   column on each side), centered. */
.frame {
  display: flex;
  flex-wrap: wrap;
  width: 600px;
  margin: 0 auto;
}

/* header (was .우유) — hauteur reprise de la grille (1.9fr = 262px) */
.header {
  width: 100%;
  box-sizing: border-box;
  height: 262px;
  border: 1px solid black;
  border-bottom: none;
  background-color: black;
  background-image: url("");
}

.header-banner
{
  position: absolute;
  width: 25%;
  right: 150px;
  top: 190px;
}

.inline-gif {
  vertical-align: middle;
  height: 1.2em;
  margin: -2em -3px -2em 0;  /* ajout de -3px à droite pour compenser le "left" */
  position: relative;
  z-index: 1;
  top: -2px;
  left: -3px;
}

/* news ticker under the header (was .딸기) */
.ticker {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid black;
  padding: 1px;
  background-color: black;
  text-align: center;
}

/* sidebar = navigation column (was .수박) */
.sidebar {
  width: 26.66%;
  box-sizing: border-box;
  border: 1px solid black;
  border-top: none;
  border-right: none;
  border-bottom: none;
  background-color: black;
  padding: 0px 0px 5px 0px;
}

/* main content (was .복숭이) — flex interne */
.main {
  width: 73.34%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  border: 1px solid black;
  border-top: none;
  border-bottom: none;
  background-color: black;
  padding: 5px;
}

.top {
  display: flex; 
}

/* intro: left text block (was .포도)
   grid d'origine: intro sur colonnes 1fr+0.7fr, aside sur 1.3fr
   => intro 1.7/3 ≈ 56.66%, aside 1.3/3 ≈ 43.33% */
.intro {
  flex: 1 1 56.66%;
  box-sizing: border-box;
  padding: 5px;
  line-height: 110%;
}

.intro:last-child {
  flex: 1 1;
}

.journal {
  border: 2px solid #333;
  padding: 16px 18px;
  margin-bottom: 16px;
} 

.journal .ligne {
  border-top: 1px solid #333;
  margin: 0 -18px;
  padding: 12px 18px 0;
}

/* aside: small-joys column (index only) (was .ㅠㅠ) */
.aside {
  flex: 1 1 43.34%;
  box-sizing: border-box;
}

/* small-joys notebook on the right (was .ㅠㅠ .notebook) */
.aside .notebook {
  background-color: white;
  padding: 14px 0px 14px 18px;   /* haut | droite(8) | bas | gauche(18) */
  box-sizing: border-box;
  float: right;
  background-image: url(paper-black.png);
}

.small-joys-background {
  background-color: black;
  padding: 14px 0px 14px 18px;   /* haut | droite(8) | bas | gauche(18) */
  box-sizing: border-box;
  float: right;
  background-image: url();
}

/* small-joys list: fixed spacing instead of the browser default */
.small-joys {
  margin: 0;
  padding-left: 1.6em;
}

/* la liste updates : même look small-joys (papier + puces gif),
   mais hauteur fixe + scroll */
.updates-list {
  height: 170px;
  overflow-y: scroll;
  box-sizing: border-box;
  padding-right: 6px;   /* éloigne le texte de la barre, sans bouger la barre */
}

.updates-list li {
  padding-right: 15px;
}

.updates-list::-webkit-scrollbar {
  width: 8px;
}
.updates-list::-webkit-scrollbar-track {
  background: transparent;   /* laisse voir le papier derrière */
}
.updates-list::-webkit-scrollbar-thumb {
  background: #444;
}

/* outro: bottom text block, always full width (was .씨발) */
.outro {
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
  line-height: 110%;
  margin-top: 7px;  /* ajuste cette valeur selon l'écart voulu */
}

/* footer (was .사과) */
.footer {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid black;
  text-align: center;
  padding: 1px;
  background-color: black;
  padding-top: 15px;
}

/* ============================================================
   navigation items (was .떡)
   ============================================================ */
.nav-item {
  background-color: #000;
  background-image: url("");
  border: 1px solid black;
  border-left: none;
  border-right: none;
  border-radius: 0px;
  color: #FFF;
  padding: 5px;
  text-align: center;
}

.nav-item:hover {
  background-color: transparent;
  background-image: url("");
  border: 1px solid black;
  border-left: none;
  border-right: none;
  border-radius: 0px;
  font-style: italic;
  color: #5D5D5D;
  font-weight: bold;
  padding: 5px;
  text-align: center;
}

/* music player index */
#wx-player { width:100% !important; box-sizing:border-box !important; padding:8px 6px !important; margin-top:16px !important; background:#000 !important; font-family:'MS Gothic','Courier New',monospace !important; -webkit-user-select:none !important; -moz-user-select:none !important; user-select:none !important; }
#wx-player #wx-title { color:#fff !important; font-size:14px !important; letter-spacing:0.3px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
#wx-player #wx-sep { margin:6px -5px 8px !important; height:8px !important; overflow:hidden !important; width:calc(100% + 12px) !important; }
#wx-player #wx-sep img { width:100% !important; height:auto !important; display:block !important; max-width:none !important; }
#wx-player #wx-controls { display:flex !important; align-items:center !important; gap:4px !important; }
#wx-player img.btn { height:13px !important; width:auto !important; cursor:pointer !important; display:block !important; max-width:none !important; }
#wx-player #wx-vol { flex:1 !important; display:flex !important; align-items:center !important; margin-left:3px !important; }
#wx-player .vol-wrap { position:relative !important; width:100% !important; height:13px !important; display:flex !important; align-items:center !important; cursor:pointer !important; }
#wx-player .vol-bar { width:100% !important; height:auto !important; display:block !important; max-width:none !important; pointer-events:none !important; }
#wx-player .vol-cursor { height:11px !important; width:auto !important; position:absolute !important; left:70%; transform:translateX(-50%) !important; cursor:pointer !important; max-width:none !important; pointer-events:none !important; }
#wx-player #wx-time { color:#888 !important; font-size:10px !important; min-width:26px !important; text-align:right !important; margin-left:3px !important; }

/* music player music page */
.mp-player { width:200px !important; box-sizing:border-box !important; padding:8px 6px !important; margin-bottom:20px !important; background:#000 !important; font-family:'MS Gothic','Courier New',monospace !important; -webkit-user-select:none !important; -moz-user-select:none !important; user-select:none !important; }
.mp-player .mp-title { color:#fff !important; font-size:14px !important; letter-spacing:0.3px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
.mp-player .mp-sep { margin:6px -5px 8px !important; height:8px !important; overflow:hidden !important; width:calc(100% + 12px) !important; }
.mp-player .mp-sep img { width:85% !important; height:auto !important; display:block !important; max-width:none !important; }
.mp-player .mp-controls { display:flex !important; align-items:center !important; gap:4px !important; }
.mp-player img.mp-toggle { height:13px !important; width:auto !important; cursor:pointer !important; display:block !important; max-width:none !important; }
.mp-player .mp-vol { width:70px !important; display:flex !important; align-items:center !important; margin-left:3px !important; }
.mp-player .mp-vol-wrap { position:relative !important; width:100% !important; height:13px !important; display:flex !important; align-items:center !important; cursor:pointer !important; }
.mp-player .mp-vol-bar { width:100% !important; height:auto !important; display:block !important; max-width:none !important; pointer-events:none !important; }
.mp-player .mp-vol-cursor { height:11px !important; width:auto !important; position:absolute !important; left:50%; top:50% !important; transform:translate(-50%,-50%) !important; cursor:pointer !important; max-width:none !important; pointer-events:none !important; }
.mp-player .mp-time { color:#888 !important; font-size:10px !important; min-width:26px !important; text-align:right !important; margin-left:3px !important; }

/* little note under the navigation (was .ㅅㅂ) */
.sidebar-note {
  padding: 5px;
}

/* lyrics box pages */
.lyrics-box {
  font-family: "MS Gothic", monospace;
  color: #5D5D5D;
  background-color: #000000;
  font-size: 14px;
  border: 0px solid;
  width: 90%;
  max-width: 500px;
  margin: 0.5em auto;
  margin-top: 40px;
  padding: 10px 3% 10px 3%;
}

.lyrics-header {
  background-image: none;
  text-align: center;
  max-width: 100%;
  height: auto;
}

.joys-box {
  list-style-image: url("button.gif");
  padding: 25px;
  box-sizing: border-box;
  float: right;
}

  .site-button-block {
    width: 100%;
    box-sizing: border-box;
    font-family: "MS Gothic", "MS PGothic", monospace;
    color: #5D5D5D;
    text-align: center;
    border: 1px dashed #5D5D5D;
  }
 
  .site-button-slot {
    width: 88px;
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px auto;
    border: 1px dashed #5D5D5D;
    color: #5D5D5D;
    font-size: 9px;
    margin-top: 16px;
  }
 
  .site-button-block p {
    font-size: 11px;
    color: #5D5D5D;
    margin: 0 auto 10px auto;
    max-width: 200px;
  }
 
  .site-button-code {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
  box-sizing: border-box;
  background: #0a0a0a;
  color: #5D5D5D;
  font-size: 9px;
  padding: 8px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word;
  text-align: left;
  user-select: all;
  cursor: text;
  }

/* small-joys list bullets */
.small-joys li {
  list-style-image: url("button.gif");
}

/* ============================================================
   profile page blocks
   ============================================================ */

/* current mood */
.mood-box {
  border: 1px dashed #5D5D5D;
  box-sizing: border-box;
  padding: 12px;
  margin-bottom: 12px;
  text-align: center;
}

.mood-box .mood-label {
  margin: 0 0 6px 0;
  font-size: 14px;
  text-transform: uppercase;
  color: #5D5D5D;
}

.mood-box .mood-value {
  color: #FFFFFF;
  font-weight: bold;
  font-size: 15px;
}

.mood-box .mood-gif {
  display: block;
  margin: 8px auto 0 auto;
  height: 75px;
  width: auto;
}

/* small joys — version profile, différente de celle de l'index */
.profile-joys-box {
  border: 1px dashed #5D5D5D;
  box-sizing: border-box;
  padding: 12px 14px;
  margin: 0;
}

.profile-joys-box .joys-label {
  margin: 0 0 8px 0;
  font-size: 14px;
  text-transform: uppercase;
  color: #5D5D5D;
}

.profile-joys-box ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-joys-box li {
  color: #FFFFFF;
  margin-bottom: 5px;
  padding-left: 14px;
  position: relative;
}

.profile-joys-box li::before {
  content: "♡";
  color: #5D5D5D;
  position: absolute;
  left: 0;
}

/* stamps */
.stamps-block {
  width: 100%;
  box-sizing: border-box;
  border: 1px dashed #5D5D5D;
  padding: 14px;
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.stamps-block .stamps-label {
  width: 100%;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  color: #5D5D5D;
  margin: 0 0 10px 0;
}

.stamps-block img {
  width: 88px;
  height: 31px;
  display: block;
}

.lang-flag {
  position: absolute;
  top: 160px;
  right: 150px;
  width: 30px;
  height: auto;
  cursor: pointer;
}