/* ===== Base ===== */
:root {
  --card-width-sm: 400px;
  --card-width-md: 420px;
  --card-width-lg: 460px;
  --card-width-research: 700px; 
  --card-width-blog: 600px;
  --card-width-photo: 600px;
  --shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  --font: 'Merriweather', Arial, serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; 
  font-family: var(--font);
  
  background: url("https://kate0115.net/pic/pattern.png") repeat;
  background-color: gray !important;
}


/* 2. 顶层 (#bg-layer)：预先反色好的黑背景，默认看不见 */
#bg-layer {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  
  background: url("https://kate0115.net/pic/pattern.png") repeat;
  
  filter: invert(100%);
  opacity: 0; 
  
  z-index: 0; 
  
  pointer-events: none;
}



#copyright {
  width: 100%; color: grey; text-align: center; font-family: var(--font);
}

/* Links */
a:link, a:visited { color: black; text-decoration: none; }
.a-hover:hover { color: white; background: pink; border-radius: 5px; }

/* Hide Mastodon identity link */
#mastodon { visibility: hidden; }

/* Buttons / Inputs */
button { background: transparent; border: none; padding: 0; cursor: pointer; }
input {
  border: none; outline: none; font-size: 16px; font-family: var(--font); background: transparent;
}

/* Marker blink target */
#marker { color: black; font-size: 13px; }

/* Guess text */
#guess {
  width: 460px; height: 25px; text-align: center; margin: 0 auto;
  color: pink; font-size: 16px; font-family: var(--font);
}

/* ===== Flip card container ===== */
/* 关键：轴心在中心 + 3D 视距在中心；宽度按场景切换 */
.flip-container {
  position: absolute;
  top: 60px;
  left: calc(50% - (var(--card-width-lg) / 2));
  width: var(--card-width-lg);
  perspective: 1000px;
  perspective-origin: 50% 50%;
  z-index: 10;
}
.flip-container.show-research {
  width: var(--card-width-research);
  /* 注意：left/top 会被 JS 改写以保持中心不动 */
}

.flip-container.show-blog {
  width: var(--card-width-blog);
}

.flipper {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  transform-origin: 50% 50%;
}

.flip-container.flipped .flipper { transform: rotateY(180deg); }

/* 三个面严格中心旋转 */
.front, .back {
  position: absolute;
  width: 100%;
  border-radius: 20px;
  box-shadow: var(--shadow);
  backface-visibility: hidden;
  background: white;
  transform-origin: 50% 50%;
}
.front { z-index: 0; }
.back  { transform: rotateY(180deg); box-sizing: border-box; }

/* 哪个背面显示 */
.back { display: none; }
.flip-container.show-poem .back-poem { display: block; }
.flip-container.show-research .back-research { display: block; }
.flip-container.show-blog .back-blog { display: block; }

/* Front content wrapper (draggable handle) */
#block-wrapper {
  width: 100%;
  background: white;
  border-radius: 20px;
  box-shadow: var(--shadow);
  cursor: move;
  z-index: 0;
}

#block-wrapper img {
  user-drag: none;
  -webkit-user-drag: none;
  pointer-events: auto;
}

#text { width: 100%; margin: 0 auto; text-align: left; font-size: 18px; }
#text #cat { text-align: center; margin: 0 auto; }

/* Menu/Terminal */
#menu { width: 400px; margin: 0 auto; }
#terminal { margin: 0 auto; }

/* Poem */
.text-poem { padding: 20px; }

/* Research back */
.research-wrap { padding: 20px; }
.research-title { margin: 0 0 8px 0; font-size: 22px; }
.research-intro { margin: 0 0 12px 0; color: #444; }
.research-links { margin: 0 0 10px 18px; }
.research-links li { margin: 6px 0; }
.research-note { color: #888; font-size: 14px; }

/* Cursor change on image hover */
#cat-pic:hover {
  cursor: url("https://kate0115.net/pic/cursor_grey.gif"), url("https://kate0115.net/pic/cursor.cur"), default;
}

/* ===== Portrait: Small phones (<=600px) ===== */
@media only screen and (max-width: 600px) and (orientation: portrait) {
  #guess { width: 400px; height: 30px; }

  .flip-container {
    width: var(--card-width-sm);
    left: calc(50% - (var(--card-width-sm) / 2));
    z-index: 10;
  }

  /* 小屏依旧隐藏背面 */
  .back { visibility: hidden; }

  html, body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ===== Portrait: >=601px ===== */
@media only screen and (min-width: 601px) and (orientation: portrait) {
  #guess { width: 420px; height: 20px; }

  .flip-container {
    width: var(--card-width-md);
    left: calc(50% - (var(--card-width-md) / 2));
    z-index: 10;
  }

  /* 竖屏隐藏背面 */
  .back { visibility: hidden; }
}

/* ===== Landscape: >=900px ===== */
@media only screen and (min-width: 900px) and (orientation: landscape) {
  #guess { width: 460px; height: 25px; }

  .flip-container {
    width: var(--card-width-lg);
    left: calc(50% - (var(--card-width-lg) / 2));
    z-index: 0;
  }
}

/* ===== Landscape: <900px ===== */
@media only screen and (max-width: 899px) and (orientation: landscape) {
  #guess { width: 460px; height: 25px; }

  .flip-container {
    width: var(--card-width-lg);
    left: calc(50% - (var(--card-width-lg) / 2));
    z-index: -1;
  }

  .front { z-index: -1; }
}


/* === Mobile: restore padding for the command box === */
@media only screen and (max-width: 600px) and (orientation: portrait) {
  #terminal {
    padding: 12px 16px;        /* 恢复内边距 */
    border-radius: 12px;       /* 可选：更柔和一点 */
    background: white;         /* 可选：避免贴边时透出底纹 */
  }
}

@media only screen and (min-width: 601px) and (max-width: 820px) and (orientation: portrait) {
  #terminal {
    padding: 12px 20px;
    border-radius: 12px;       /* 可选 */
    background: white;         /* 可选 */
  }
}

/* 小屏横屏也补一下（可选） */
@media only screen and (max-width: 899px) and (orientation: landscape) {
  #terminal {
    padding: 10px 16px;
    border-radius: 12px;       /* 可选 */
    background: white;         /* 可选 */
  }
}


/* 1. 使用通配符 *，不管滚动条长在哪个元素上，统统生效 */
*::-webkit-scrollbar {
  width: 6px !important;
  height: 6px !important;
  background: transparent !important; /* 关键：防止浏览器默认的灰色背景 */
}

/* 2. 轨道强制透明 */
*::-webkit-scrollbar-track {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 3. 滑块样式 (半透明黑) */
*::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.15) !important; 
  border-radius: 10px !important;
  background-clip: content-box !important;
  border: 1px solid transparent !important; /* 让滑块稍微细一点 */
}

/* 4. 鼠标悬停 */
*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.35) !important;
}

/* 5. 针对 Firefox 的修正 */
section, article, main {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  background: gray;
}



/* 1. 按钮本身的样式 */
.return-btn {
  position: absolute;
  top: 7px;      /* 距离顶部 15px */
  left: 20px;     /* 距离左边 20px */
  z-index: 200;   /* 必须比 iframe 高，否则点不到 */
  cursor: pointer;
  font-family: var(--font);
  font-size: 16px;
  color: #dcdcde;    /* 灰色文字 */
  font-weight: bold;
  transition: color 0.3s;
}

.return-btn:hover {
  color: #4f94d4;
}

/* 3. 调整 Blog 容器，给按钮腾出空间 */
#blog-wrapper {
  /* 也就是把原来的 height: 80vh 改小一点，把上面空出来 */
  margin-top: 35px !important;
  background-color: #2c2c2c !important;
  height: calc(80vh - 35px) !important;
}

#back-blog {
  background-color: #3c434a;
}


.flip-container.show-photo {
  width: var(--card-width-photo);
}

/* 翻转时显示 Photo 背面 */
.flip-container.show-photo .back-photo {
  display: block;
}

#photo-wrapper {
  background: transparent !important;
  background-color: transparent !important;

  /* 2. 核心：背景模糊滤镜 (磨砂效果) */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* 这里的样式是为了适配布局，和你之前的 inline style 保持一致 */
  margin-top: 35px !important; 
  height: calc(90vh - 35px) !important;
  overflow: hidden; 
  border-radius: 20px;
}



.back-photo {
  background-color: rgba(220, 220, 220, 0.4);

  border-radius: 20px;
  overflow: hidden;

  box-shadow: 0px -4px 8px rgba(0, 0, 0, 0.25);
}


.google-logo {
    font-size: 100px; /* Logo 大小 */
    font-weight: bold;
    letter-spacing: -4px; /* 字母间距稍微紧凑一点，更像原版 */
    user-select: none; /* 防止被选中，像图片一样 */
  }

  /* 颜色定义 - 使用 Google 官方 Hex 色值 */
  .blue {
    color: #4285F4;
  }

  .red {
    color: #EA4335;
  }

  .yellow {
    color: #FBBC05;
  }

  .green {
    color: #34A853;
  }