/* ============================================================
   AQUARIUM CHANNEL — Japanese personal site CSS
   ✨ THE ULTIMATE FRUTIGER AERO & WIN7 LIQUID GLASS EDITION ✨
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* ── RESET + BASE ─────────────────────────────────────────── */
* {
  margin: 0;
  padding: 10;
  box-sizing: border-box;
}

#bg-video {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.6;
}

body {
  font-family: 'MS PGothic', 'Noto Sans JP', 'Osaka', sans-serif;
  font-size: 12px;
  background-color: #aae0fa;
  background-image:
    url('bg.png'),
    radial-gradient(ellipse 60% 40% at 15% 10%,  #fde0f5 0%, transparent 60%),
    radial-gradient(ellipse 50% 45% at 85% 15%, #bbf0ff 0%, transparent 60%),
    radial-gradient(circle 40% at 50% 50%, #e3f7ff 0%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 90%, #dcd0ff 0%, transparent 60%);
  background-size: cover, auto, auto, auto, auto;
  background-attachment: fixed, scroll, scroll, scroll, scroll;
  background-position: center, 0 0, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat;
  color: #1e293b;
  min-height: 100vh;
  padding: 10px;
  overflow-x: hidden;
}

a {
  color: #2b52cd;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  color: #c92fa3;
}

/* ── PAGE WRAPPER ─────────────────────────────────────────── */
.page-wrap {
  width: 73%;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── MARQUEE INFO STRIP ───────────────────────────────────── */
.info-strip {
  background: linear-gradient(to bottom, rgba(255,255,255,0.7), rgba(215,240,255,0.6));
  border: 1px solid rgba(130, 190, 230, 0.6);
  border-bottom: none;
  padding: 4px 8px;
  font-size: 10px;
  color: #4a5da5;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  backdrop-filter: blur(5px);
}

/* ── HEADER (True Aero Glass Gloss) ───────────────────────── */
header {
  background: linear-gradient(135deg, rgba(230, 247, 255, 0.5) 0%, rgba(190, 225, 255, 0.35) 100%);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top: 2px solid rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(130, 170, 220, 0.6);
  box-shadow:
    0 6px 20px rgba(100, 150, 210, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 12px -10px rgba(255, 255, 255, 0.5) inset;
  padding: 16px 18px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #ffbdf1, #ffe0b3, #fdfdb3, #bdfdec, #bdf3ff, #cbd2ff, #ffbdf3, #ffbdf1);
  background-size: 200% 100%;
  animation: shimmer-bar 4s linear infinite;
  opacity: 0.9;
}

@keyframes shimmer-bar {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

header h1 {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #034e73;
  line-height: 1.2;
  filter: drop-shadow(0px 1px 1px rgba(255,255,255,0.8));
}

header .tagline {
  font-size: 10px;
  color: #5557a3;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* ── NAV BAR ──────────────────────────────────────────────── */
nav {
  background: linear-gradient(to bottom, #eff8ff 0%, #cfeaff 100%);
  border: 1px solid #8cbce6;
  border-top: none;
  padding: 6px 8px;
  display: flex;
  gap: 3px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 11px;
  box-shadow: 0 4px 10px rgba(110, 150, 190, 0.2);
}

nav .sep {
  color: #99baed;
  padding: 0 3px;
  user-select: none;
}

nav a {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #2b3bb0;
  background: linear-gradient(to bottom, #ffffff 0%, #e0d5ff 40%, #c3b2fa 50%, #e2daff 100%);
  border: 1px solid #a38ee6;
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 1px 2px rgba(90,70,160,0.3);
  transition: all 0.15s ease;
}

nav a:hover {
  background: linear-gradient(to bottom, #ffffff 0%, #f1ebff 40%, #d9cfff 50%, #f0ebff 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 3px 6px rgba(90,70,160,0.4);
  text-decoration: none;
  color: #b52093;
}

/* ── TWO-COLUMN MASONRY LAYOUT (Sized for Jellies) ───────── */
.layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 60px; /* Wide side channel for jellyfish passage */
  align-items: start;
  padding: 10px 6px;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 30px; /* Vertical swimming spaces in sidebar */
}

.main-col {
  column-count: 2;
  column-gap: 60px; /* Wide center channel for jellyfish passage */
}

/* Masonry containers */
.mc-welcome, .mc-ramblings, .mc-oracle, .mc-reads,
.mc-now, .mc-button, .mc-cat {
  break-inside: avoid;
  margin-bottom: 33px; /* Opened up horizontal tracks for jellies */
  display: inline-block;
  width: 100%;
}

.mc-welcome { 
  column-span: all; 
  transform: none !important;
  z-index: 10;
}

/* ── ULTRAGLASS BOX SHELL (Liquid Acrylic Skeuomorphism) ─── */
.box {
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  overflow: hidden;
  position: relative;
  box-shadow: 
    0 8px 20px rgba(90, 130, 180, 0.25),
    0 2px 5px rgba(90, 130, 180, 0.15);
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease-in-out;
}

.sidebar .box { font-size: 11px; }
.main-col .box { font-size: 12px; }

.box-title {
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 5px;
  position: relative;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 50.1%, rgba(0,0,0,0.03) 100%);
}

.box-body {
  padding: 9px 10px;
  line-height: 1.7;
}
.main-col .box-body p { color: #233547; line-height: 1.75; }

/* ── FRUTIGER AERO LIQUID PALETTE CHROMES ──────────────────── */
.box-aqua, .box-pink, .box-purple, .box-sea, .box-dream, .box-gold, .box-mint {
  outline: 1px solid rgba(255, 255, 255, 0.6); 
  outline-offset: -2px;
}
.box-aqua .box-title, .box-pink .box-title, .box-purple .box-title, 
.box-sea .box-title, .box-dream .box-title, .box-gold .box-title, .box-mint .box-title {
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

.box-aqua { background: linear-gradient(135deg, rgba(225,246,255,0.75) 0%, rgba(180,228,255,0.65) 100%); border-color: #89cff0; }
.box-aqua .box-title { background-color: #a3e0ff; color: #005580; }

.box-pink { background: linear-gradient(135deg, rgba(255,235,247,0.75) 0%, rgba(255,203,237,0.65) 100%); border-color: #fca6df; }
.box-pink .box-title { background-color: #ffbde7; color: #801a59; }

.box-purple { background: linear-gradient(135deg, rgba(243,233,255,0.75) 0%, rgba(222,198,255,0.65) 100%); border-color: #c9a3ff; }
.box-purple .box-title { background-color: #dcb3ff; color: #471a80; }

.box-sea { background: linear-gradient(135deg, rgba(218,245,255,0.8) 0%, rgba(163,222,253,0.7) 100%); border-color: #79caec; outline-color: rgba(255,255,255,0.7); }
.box-sea .box-title { background-color: #8ed6ff; color: #00507d; }

.box-dream { background: linear-gradient(135deg, rgba(240,230,255,0.8) 0%, rgba(214,189,255,0.7) 100%); border-color: #bc93ff; outline-color: rgba(255,255,255,0.7); }
.box-dream .box-title { background-color: #ca9eff; color: #3b0094; }

.box-gold { background: linear-gradient(135deg, rgba(255,249,230,0.8) 0%, rgba(255,231,179,0.7) 100%); border-color: #eec167; }
.box-gold .box-title { background-color: #ffd885; color: #704c00; }

.box-mint { background: linear-gradient(135deg, rgba(230,252,243,0.8) 0%, rgba(184,245,219,0.7) 100%); border-color: #6ed6a9; }
.box-mint .box-title { background-color: #92ecbe; color: #005931; }

/* ── GENTLE JUMBLED MASONRY EFFECTS ───────────────────────── */
.main-col > div:nth-of-type(3n+1) { transform: rotate(-0.5deg) translate(-1px, 2px); z-index: 1; }
.main-col > div:nth-of-type(3n+2) { transform: rotate(0.6deg) translate(2px, -1px); z-index: 2; }
.main-col > div:nth-of-type(4n+3) { transform: rotate(-0.3deg) translate(-2px, -2px); z-index: 3; }
.main-col > div:nth-of-type(5n+4) { transform: rotate(0.8deg) translate(1px, 3px); z-index: 1; }

.main-col .box:hover {
  transform: scale(1.01) rotate(0deg) translate(0, 0) !important;
  box-shadow: 0 12px 28px rgba(70, 110, 170, 0.45);
  z-index: 999;
  position: relative;
}

/* ── SIDEBAR INTERNAL ELEMENTS ────────────────────────────── */
.box-body ul { list-style: none; }
.box-body ul li::before { content: '・'; color: #7987cb; }
.box-body ul li a { color: #3f4da8; }

.small-text  { font-size: 10px; color: #4b5894; line-height: 1.65; }
.em-text     { font-size: 13px; font-weight: 700; color: #1d2b78; }

.pixel-bar {
  height: 4px;
  margin: 6px 0;
  background: repeating-linear-gradient(90deg, #99d6ff 0px, #99d6ff 2px, #c4b2ff 2px, #c4b2ff 4px, #ffb8ed 4px, #ffb8ed 6px, transparent 6px, transparent 8px);
  border: none;
}

.counter {
  font-family: 'Courier New', monospace;
  font-size: 13px;
  font-weight: 700;
  color: #5527b3;
  letter-spacing: 0.1em;
  background: rgba(255,255,255,0.4);
  padding: 1px 4px;
  border-radius: 3px;
  display: inline-block;
}

/* ── DIARY ENTRIES ────────────────────────────────────────── */
.entry {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #b2bfeb;
}
.entry:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.entry-date { font-size: 10px; color: #727db3; font-weight: 700; letter-spacing: 0.06em; }
.entry-cat {
  display: inline-block;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 4px;
  background: linear-gradient(to bottom, #ffffff, #dbebff);
  border: 1px solid #99b6f0;
  color: #4354b0;
  font-weight: 700;
}
.entry p { margin-top: 3px; font-size: 11px; color: #2c3e50; line-height: 1.65; }

.ornament { text-align: center; font-size: 10px; color: #9cb0eb; letter-spacing: 0.2em; padding: 3px 0; user-select: none; }

/* ── CHATBOX — Windows 7 Premium Glass ────────────────────── */
#chatbox {
  background: linear-gradient(135deg, rgba(238, 232, 255, 0.45) 0%, rgba(206, 192, 255, 0.3) 100%);
  backdrop-filter: blur(16px) saturate(1.5);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-top: 1.5px solid rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(150, 130, 220, 0.5);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(130, 110, 210, 0.25), 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 10px -8px rgba(255, 255, 255, 0.4) inset;
  padding: 12px 14px;
  text-align: center;
  outline: 1px dashed rgba(160, 120, 220, 0.4);
  outline-offset: -4px;
}
#chatbox p { font-style: italic; font-size: 11px; color: #55359c; line-height: 1.7; }
#chatbox a { color: #722ccd; font-weight: 700; border-bottom: 1px solid #ba92ee; }
#chatbox a:hover { color: #cc2da0; border-color: #ee7ec8; text-decoration: none; }

/* ── 88×31 BUTTONS & THUMBS (Gel Variants) ────────────────── */
.btn-gallery { display: flex; flex-wrap: wrap; gap: 4px; }

.site-btn {
  display: inline-block;
  width: 88px;
  height: 31px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  line-height: 29px;
  text-decoration: none;
  border: 1px solid;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.04) 50.1%, rgba(0,0,0,0) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.85) inset, 0 2px 4px rgba(0,0,0,0.1);
  transition: all 0.1s ease;
  white-space: nowrap;
  overflow: hidden;
}
.site-btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 4px 8px rgba(0,0,0,0.15); text-decoration: none; }

.btn-jelly  { background-color: #b3e7ff; border-color: #69baed; color: #005ba1; }
.btn-dream  { background-color: #dac7ff; border-color: #aa89ed; color: #4612a1; }
.btn-bloom  { background-color: #ffcaea; border-color: #ed87ca; color: #a11467; }
.btn-void   { background-color: #bcd5ff; border-color: #7da5ed; color: #1240a1; }

.thumb-grid { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.thumb {
  width: 80px;
  height: 60px;
  border: 1px solid #89bede;
  background: linear-gradient(135deg, #ffffff 0%, #caedff 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.thumb:hover { border-color: #8b79eb; box-shadow: 0 0 5px rgba(139,121,235,0.5); }

/* ── FOOTER ───────────────────────────────────────────────── */
hr.rainbow-rule {
  height: 3px;
  border: none;
  background: repeating-linear-gradient(90deg, #ffbdf1, #ffe0b3, #fdfdb3, #bdfdec, #bdf3ff, #cbd2ff, #ffbdf3, #ffbdf1);
  background-size: 200% 100%;
  animation: shimmer-bar 4s linear infinite;
  margin: 10px 0 0;
}

footer {
  background: linear-gradient(to bottom, #e3f3fd 0%, #cce6f8 100%);
  border: 1px solid #94bed9;
  border-top: none;
  border-radius: 0 0 6px 6px;
  padding: 10px 12px;
  text-align: center;
  font-size: 10px;
  color: #5c6799;
  line-height: 1.9;
  box-shadow: 0 4px 12px rgba(90,130,170,0.2);
}
footer a { color: #4949bd; }
footer a:hover { color: #cc2da0; text-decoration: underline; }
.fine-print { color: #8b92bd; font-size: 9px; margin-top: 2px; }