/* Dark theme, pink links */
:root {
  --bg: #0f0f12;
  --card: #18181c;
  --text: #e6e6ea;
  --muted: #a8a8b3;
  --accent: #ff4da6;
  --border: #2a2a31;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.header { position: sticky; top:0; z-index:100; background: rgba(15,15,18,.9); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); }
.header-inner { max-width: 1100px; margin: 0 auto; padding: 12px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.brand { font-weight: 700; letter-spacing: .5px; }

.searchbar { flex: 1; display: flex; gap: 8px; align-items: center; }
.searchbar input { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); }
@media (min-width: 769px){ .searchbar input { width: 50%; } }
.searchbar button.searchbtn { background: var(--accent); color: #0a0a0c; border: none; padding: 10px 16px; border-radius: 10px; font-weight: 800; cursor: pointer; }
.searchbar button.searchbtn:active { transform: translateY(1px) scale(.99); }

.container { max-width: 1100px; margin: 16px auto; padding: 0 16px; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1024px){ .grid{ grid-template-columns: repeat(3, 1fr);}}
@media (max-width: 768px){ .grid{ grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 480px){ .grid{ grid-template-columns: 1fr;}}

.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.img-wrap { position: relative; width: 100%; background: #333; overflow: hidden; }
.img-wrap::before { content: ""; display: block; padding-top: 100%; } /* fallback for older browsers */
.img-wrap > a, .img-wrap > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Maintain compatibility if some pages still target .card img */
.card img { width: 100%; height: 100%; object-fit: cover; background: #333; }
.card-body { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.card-title { font-weight: 700; line-height: 1.2; }
.card-title a { color: var(--text); }
.furigana { color: var(--muted); font-size: 12px; margin-top: -4px; }
.meta { font-size: 12px; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { padding: 4px 8px; border-radius: 999px; background: #22222a; border: 1px solid var(--border); font-size: 12px; }
.tag a { color: var(--accent); }

.section { margin: 24px 0; }
.section h2 { margin: 0 0 8px; font-size: 20px; }
.section .desc { color: var(--muted); }

.details { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0; }
.detail-item { background: #141419; border: 1px solid var(--border); border-radius: 12px; padding: 10px; }
.detail-key { color: var(--muted); font-size: 12px; }
.detail-val { font-weight: 600; }

/* similar section padding */
.section.padded-strong { padding-left: 16px; padding-right: 16px; }
.similar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding-left: 8px; padding-right: 8px; }
@media (max-width: 900px){ .similar-grid{ grid-template-columns: repeat(3,1fr);}}
@media (max-width: 600px){ .similar-grid{ grid-template-columns: repeat(2,1fr);}}
.similar-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.similar-card img { width: 100%; height: 140px; object-fit: cover; }
.similar-card .name { display: block; padding: 8px; font-size: 13px; }

.like-box { display: flex; align-items: center; gap: 12px; margin-top: 8px; justify-content: center; }
.like-btn { background: var(--accent); color: black; border: none; padding: 16px 48px; border-radius: 999px; font-weight: 800; font-size: 20px; cursor: pointer; }
.heart-burst { position: fixed; pointer-events: none; font-size: 24px; animation: rise .9s ease-out forwards; }
@keyframes rise { 0%{ transform: translateY(0) scale(1); opacity:1 } 100%{ transform: translateY(-60px) scale(1.6); opacity:0 } }

.footer { color: var(--muted); text-align: center; padding: 24px; border-top: 1px solid var(--border); }

/* hero overlay with shadow */
.hero { position: relative; width: 100%; height: 360px; overflow: hidden; }
@media (max-width: 600px){ .hero{ height: 300px; } }
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-desc { position: absolute; left:0; right:0; bottom:0; padding: 16px; background: linear-gradient(transparent, rgba(0,0,0,.45) 35%, rgba(0,0,0,.65)); }
.hero-desc-inner { color: #fff; font-size: 14px; line-height: 1.6; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

.like-box { display:flex; align-items:center; justify-content:center; gap:8px; flex-direction:column; }


/* 2ch-like thread styles */
.thread-list { display: block; }
.thread-post {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.thread-line1 {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.thread-body {
  white-space: pre-wrap;
  line-height: 1.6;
}
.thread-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
}
.thread-children {
  margin-left: 16px;
  border-left: 2px solid #2a2a31;
  padding-left: 10px;
}
.thread-replying {
  color: var(--muted);
}


/* 2ch-like board (thread-based) */
.board-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.board-title { font-size: 18px; font-weight: 700; }
.ch-threadlist { border: 1px solid var(--border); border-radius: 12px; overflow:hidden; }
.ch-threadlist .th-item { padding: 10px 12px; border-bottom: 1px solid var(--border); display:flex; justify-content:space-between; gap:12px; }
.ch-threadlist .th-item:last-child { border-bottom: none; }
.th-title a { color: #ffd84a; }
.th-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }

.thread-form { display:flex; flex-direction:column; gap:8px; padding:12px; border: 1px solid var(--border); border-radius: 12px; margin-top:12px; }
.thread-form input, .thread-form textarea { padding:10px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--text); }
.thread-form .actions { display:flex; gap:8px; align-items:center; }

/* Thread view (レス表示) */
.thread-wrap { border: 1px solid var(--border); border-radius: 12px; overflow:hidden; }
.thread-head { padding: 12px; border-bottom:1px solid var(--border); font-weight:700; }
.res { padding: 10px 12px; border-bottom: 1px solid var(--border); }
.res .line1 { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.res .body { white-space: pre-wrap; line-height: 1.6; }
.res .actions { display: flex; gap: 8px; margin-top: 6px; font-size: 12px; }
.res-children { margin-left: 16px; border-left: 2px solid #2a2a31; padding-left: 10px; }

.post-form { display:flex; flex-direction:column; gap:8px; padding:12px; border: 1px solid var(--border); border-radius: 12px; margin-top:12px; }
.post-form .replying { color: var(--muted); }


/* Board table */
.ch-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ch-table th, .ch-table td { border-bottom: 1px solid var(--border); padding: 2px 6px; vertical-align: top; }
.ch-table tr:last-child td { border-bottom: none; }
.ch-td-no { width: 90px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.ch-td-body { line-height: 1.6; white-space: pre-wrap; }
.ch-td-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ch-number { cursor: pointer; color: var(--accent); }
.ch-children { margin-top: 8px; padding-left: 12px; border-left: 2px solid #2a2a31; }


/* Board single content area */
.board-box { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.board-box .ch-threadlist { border: none; border-radius: 8px; }
.board-box .th-item { background: transparent; }
.board-box .thread-form, .board-box .post-form { border: none; padding: 0; }


/* --- Modal popup for thread creation --- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: none; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal {
  width: min(680px, 92vw);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  padding: 16px;
}
.modal-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.modal-title { font-size: 18px; font-weight: 800; }
.modal-close { background: transparent; border: none; color: var(--text); font-size: 22px; cursor: pointer; }
.modal-body { display:flex; flex-direction:column; gap:10px; }
.modal-footer { display:flex; justify-content:flex-end; gap:8px; margin-top: 8px; }

/* Button bar & buttons */
.btn { background: var(--accent); color: #0a0a0c; border: none; padding: 10px 16px; border-radius: 10px; font-weight: 800; cursor: pointer; }
.btn.secondary { background: #23232a; color: var(--text); border: 1px solid var(--border); }
.btn:focus { outline: 2px solid #fff2; outline-offset: 2px; }

/* Board usability tweaks */
.board-box .toolbar { display:flex; align-items:center; gap: 8px; margin-bottom: 10px; }
.board-box .toolbar .spacer { flex: 1; }
.board-box input[type="text"], .board-box textarea {
  padding: 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--card); color: var(--text);
}
@media (max-width: 480px) {
  .modal { padding: 12px; border-radius: 14px; }
}


/* Headings */
.board-heading, .thread-head, .board-box .board-header {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.board-box .board-header { border: 1px solid var(--border); border-radius: 10px; }

/* Readability enhancements */
.ch-table { border-radius: 12px; overflow: hidden; }
.ch-table tr:nth-child(odd) td { background: rgba(255,255,255,0.02); }
.ch-meta-line { color: var(--muted); font-size: 12px; margin: 0; }
.ch-body { white-space: pre-wrap; line-height: 1.30; font-size: 29px; margin: 0; }


/* Anchor links (>>n) */
a.anchor { color: var(--accent); text-decoration: none; cursor: pointer; }
a.anchor:hover { text-decoration: underline; }
tr.anchored td { outline: 2px solid var(--accent); outline-offset: -2px; background: rgba(255, 77, 166, 0.06); }
.ch-meta-line { color: var(--muted); font-size: 12px; margin: 0; }
.ch-body { white-space: pre-wrap; line-height: 1.30; font-size: 29px; margin: 0; }


/* v25 overrides to remove gaps */
.ch-meta-line { margin: 0 !important; }
.ch-body { margin: 0 !important; }


/* === Balanced layout (v8) === */
.ch-body {
  padding-left: 14px !important;
  padding-right: 14px !important;
  margin-top: 3px !important;
  margin-bottom: 3px !important;
  font-size: 15px !important; /* 少し小さく */
  line-height: 1.5 !important;
}
.ch-meta-line {
  padding-left: 14px !important;
  padding-right: 14px !important;
  margin-top: 2px !important;
  margin-bottom: 1px !important;
  line-height: 1.3 !important;
}
.ch-table td, .ch-table th {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}


/* === Board v9 overrides === */
.ch-body {
  padding-left: 14px !important;
  padding-right: 14px !important;
  margin-top: 3px !important;
  margin-bottom: 3px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}
.ch-meta-line {
  padding-left: 14px !important;
  padding-right: 14px !important;
  margin-top: 2px !important;
  margin-bottom: 1px !important;
  line-height: 1.25 !important;
}
.ch-table td, .ch-table th {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}


/* === Board v10 system compact === */
/* kill zebra striping and thick borders that create band-like gaps */
.ch-table tr:nth-child(odd) td { background: transparent !important; }
.ch-table th, .ch-table td { border-bottom: none !important; padding: 1px 4px !important; vertical-align: top; }
/* remove extra box edges */
.board-box .board-header { border: none !important; }
/* compact meta/body stack */
.ch-meta-line { margin: 0 !important; padding: 0 10px !important; line-height: 1.2 !important; }
.ch-body { margin: 0 !important; padding: 0 10px !important; line-height: 1.35 !important; font-size: 15px !important; }
/* tighten thread view container if any */
#th-view, .board-box { padding-top: 4px !important; padding-bottom: 4px !important; }
/* zero out row height artifacts */
.ch-table tr { height: auto !important; }


/* === Board v11 root-cause fix === */
.ch-td-body { white-space: normal !important; line-height: 1.2 !important; padding: 0 !important; margin: 0 !important; }
.ch-body { white-space: pre-wrap !important; }
.ch-table th, .ch-table td { padding-top: 0 !important; padding-bottom: 0 !important; }


/* === v12: Readable BBS layout === */
.board-header {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  margin-bottom: 10px !important;
}
.board-title { font-weight: 800 !important; }

.ch-table { border-collapse: collapse !important; width: 100%; }
.ch-table td, .ch-table th {
  border: none !important;
  padding: 6px 8px !important;
  vertical-align: top;
}
.ch-table tr + tr td { border-top: 1px solid var(--border) !important; }

.ch-meta-line {
  margin: 0 !important;
  padding: 0 10px 2px 10px !important;
  line-height: 1.25 !important;
}
.ch-body {
  margin: 0 !important;
  padding: 0 10px 6px 10px !important;
  line-height: 1.4 !important;
  font-size: 15px !important;
}


/* === v13: Pink gradient header + text shadow + active thread highlight === */
.board-header {
  background: linear-gradient(135deg, rgba(255,105,180,0.20), rgba(255,77,166,0.24)) !important;
  border: 1px solid rgba(255,105,180,0.35) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 1px 0 rgba(255,105,180,0.25) inset;
}
.board-header .board-title,
.board-header #th-title {
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}
.ch-threadlist .th-item.th-active {
  background: linear-gradient(135deg, rgba(255,105,180,0.14), rgba(255,77,166,0.16)) !important;
  border-left: 3px solid rgba(255,105,180,0.85) !important;
}
.ch-threadlist .th-item .th-title a { color: #ffd84a; }
.ch-threadlist .th-item.th-active .th-title a { font-weight: 800; }

/* === v14 additions: thread icon + stronger active highlight === */
.ch-threadlist .th-item { display:flex; align-items:center; gap:10px; }
.ch-threadlist .th-item .th-icon { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; opacity:0.85; }
.ch-threadlist .th-item .th-title { flex:1; }
.ch-threadlist .th-item.th-active {
  background: linear-gradient(135deg, rgba(255,105,180,0.18), rgba(255,77,166,0.20)) !important;
  border-left: 4px solid rgba(255,105,180,0.95) !important;
}


/* === v18: robust thread icons + active highlight === */
.ch-threadlist .th-item { display:flex; align-items:center; gap:10px; padding:4px 6px; border-radius:8px; }
.ch-threadlist .th-item .th-title { flex:1; }
.ch-threadlist .th-item .th-icon { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; opacity:.9; }
.ch-threadlist .th-item.th-active { background: rgba(255,105,180,.18); border-left: 4px solid rgba(255,105,180,.95); }
.ch-threadlist .th-item .th-title a { text-decoration: none; }

/* === v19: color tweaks + row-wide click === */
/* Active thread: dark yellow-ish */
.ch-threadlist .th-item.th-active {
  background: rgba(180, 140, 0, 0.22) !important;
  border-left: 4px solid rgba(200, 160, 0, 0.95) !important;
}

/* Thread title header in view: purple gradient */
#th-view .board-header {
  background: linear-gradient(135deg, rgba(128, 90, 213, 0.28), rgba(107, 70, 193, 0.34)) !important; /* indigo/violet */
  border: 1px solid rgba(128, 90, 213, 0.45) !important;
}

/* Make each list row feel clickable */
#th-list .th-item { cursor: pointer; }
#th-list .th-item .th-title a { display: inline-block; width: 100%; }

/* === v20: form readability (textarea background) === */
.post-form textarea,
.thread-form textarea {
  background: #181a20 !important;
  color: #f1f3f5 !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
}
.post-form textarea::placeholder,
.thread-form textarea::placeholder {
  color: rgba(240,240,245,0.55) !important;
}
.post-form input[type="text"],
.thread-form input[type="text"] {
  background: #14161b !important;
  color: #eceef2 !important;
  border: 1px solid rgba(255,255,255,0.16) !important;
  border-radius: 8px !important;
  padding: 8px 10px !important;
}

/* === v23: Like button pleasant animation & disabled state === */
.like-btn {
  transition: transform 0.15s ease, background-color 0.25s ease, opacity 0.25s ease;
  will-change: transform, opacity;
}
.like-btn:active {
  transform: scale(0.94);
}
.like-btn.liked {
  animation: like-pop .45s ease;
}
@keyframes like-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  70% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
.like-btn[disabled], .like-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.5);
}

/* v29: 強調表示 - スレッド内最初のレス */
.thread .post:first-of-type {
    font-size: 1.25em;
    font-weight: bold;
    background-color: #f6f6f6;
    border-left: 4px solid #ffc8c8;
    padding: 6px 8px;
}

/* ===== Pagination ===== */
.pagination{
  margin: 24px auto 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: min(980px, 92vw);
  padding: 6px 8px;
}
.page-btn{
  display: inline-block;
  min-width: 40px;
  padding: 8px 12px;
  border: 1px solid #d0d0d0;
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  user-select: none;
  transition: transform .05s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
.page-btn:hover, .page-btn:focus{
  background: #f2f2f2;
  border-color: #bdbdbd;
  outline: none;
}
.page-btn:active{
  transform: translateY(1px);
}
.page-btn--active{
  background: #222;
  color: #fff;
  border-color: #222;
  cursor: default;
}
.page-btn--nav{
  font-weight: 600;
}
.page-ellipsis{
  padding: 0 2px;
  color: #888;
}

/* Mobile tweaks */
@media (max-width: 640px){
  .page-btn{
    min-width: 44px;         /* touch target */
    padding: 10px 14px;      /* larger tap area */
  }
  .pagination{
    gap: 8px;
    margin-top: 20px;
  }
}

/* Very narrow */
@media (max-width: 360px){
  .page-btn{ min-width: 38px; padding: 9px 10px; }
}


/* --- Board post input (single-line) --- */
.post-form .post-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
}
.post-form .post-input:focus {
  outline: 2px solid var(--accent);
}

/* --- Large, easy-to-tap primary button --- */
.btn-primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px 18px;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  width: 100%;
  max-width: 240px;
  align-self: flex-end;
}
.btn-primary:active {
  transform: translateY(1px) scale(.99);
}
@media (max-width: 520px) {
  .btn-primary { width: 100%; }
}


/* Improved touch target for post submit button */
.post-form .btn-primary {
  min-height: 48px;
  font-size: 18px;
  padding: 14px 20px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* Input field tweaks for single-line posting */
.post-form .post-input {
  height: 48px;
  line-height: 48px;
  font-size: 16px;
}

/* Make action area sticky on mobile so the button is easy to tap */
@media (max-width: 640px) {
  .post-form .actions {
    position: sticky;
    bottom: 8px;
    background: var(--bg);
    padding: 8px 0;
  }
}


/* === Rating UI (good/bad gauge) === */
.rating-wrap { margin-top: 8px; }
.rate-controls { display: flex; align-items: center; gap: 10px; }
.rate-btn { background: #23232a; color: var(--text); border: 1px solid var(--border); padding: 6px 10px; border-radius: 999px; cursor: pointer; font-size: 14px; }
.rate-btn:hover { background: #2a2a33; }
.rate-gauge { position: relative; flex: 1; height: 10px; background: #1a1a1f; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; min-width: 120px;  min-width:120px; flex:0 0 50%; width:50%; position:relative; height:10px; overflow:hidden; border-radius:999px; }
.rate-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg, #4caf50, #6fdc6f); }
.rate-meta { font-size: 12px; color: var(--muted); margin-top: 4px; }

.rate-fill-good{position:absolute;left:0;top:0;bottom:0;width:0%;background:#2ecc71;}

.rate-fill-bad{position:absolute;right:0;top:0;bottom:0;width:0%;background:#e74c3c;}


/* === Rating UI: enhanced for clarity & accessibility === */
.rating-wrap { margin-top: 10px; padding: 10px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 12px; }
.rate-controls { display: flex; align-items: center; gap: 12px; }
.rate-btn { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: #23232a; font-weight: 700; line-height: 1; }
.rate-btn .icon { margin-right: 6px; }
.rate-btn[disabled], .rate-disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.2); }
.rate-btn.rate-good { border-color: #1f8f5b22; }
.rate-btn.rate-bad  { border-color: #a3322822; }
.rate-btn.rate-good:hover { background: #1f3329; }
.rate-btn.rate-bad:hover  { background: #341e1e; }

.rate-gauge { position: relative; flex: 1; height: 12px; background: #1a1a1f; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.rate-fill-good { position:absolute; left:0; top:0; bottom:0; width:0%; background: linear-gradient(90deg, #00c46a, #2ecc71); }
.rate-fill-bad  { position:absolute; right:0; top:0; bottom:0; width:0%; background: linear-gradient(90deg, #ff4b4b, #e74c3c); }

.rating-wrap.voted-good { box-shadow: 0 0 0 2px rgba(0,196,106,.25) inset; }
.rating-wrap.voted-bad  { box-shadow: 0 0 0 2px rgba(231,76,60,.25) inset; }

.rate-meta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.rate-chip { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: #15151a; font-weight: 700; }
.rate-chip.good { color: #7ee2a8; border-color: #1f8f5b22; }
.rate-chip.bad  { color: #ff9a9a; border-color: #a3322822; }


/* === Compact gauge & rated state === */
.rate-controls { gap: 10px; }
.rate-gauge { flex: 0 1 40%; min-width: 160px; } /* was flex:1; now compact (~40%) */
@media (max-width: 640px){
  .rate-gauge { flex-basis: 55%; min-width: 120px; } /* a bit wider on very small screens for usability */
}
.rating-wrap.rated { opacity: .5; transition: opacity .2s; }
.rating-wrap.rated .rate-btn { cursor: not-allowed; }


/* === Added: highlight for character name in question === */
.charname-highlight{
  color:#ff2e88;
  font-weight:800;
  font-size:1.2em;
  text-shadow: 0 0 6px rgba(255,46,136,.35);
}
/* === Added: celebratory rate effects === */
.rate-effect-burst{
  position: fixed;
  left:0; top:0;
  pointer-events:none;
  width:100vw; height:100vh;
  overflow:visible;
  z-index: 9999;
}
.rate-pop {
  position:absolute;
  font-size:22px;
  user-select:none;
  transform: translate(-50%, -50%) scale(0.8);
  opacity:1;
  animation: popfade 800ms ease-out forwards;
}
@keyframes popfade {
  0%   { transform: translate(-50%,-50%) scale(0.6) rotate(0deg); opacity:1; }
  60%  { transform: translate(-50%,-60%) scale(1.2) rotate(10deg); opacity:1; }
  100% { transform: translate(-50%,-120%) scale(0.9) rotate(-10deg); opacity:0; }
}
.rate-spark {
  position:absolute;
  width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle, #fff, #ffd54f);
  box-shadow: 0 0 8px rgba(255,215,64,.7);
  animation: sparkmove 900ms ease-out forwards;
  opacity:.95;
}
@keyframes sparkmove {
  from { transform: translate(0,0) scale(1); opacity:1; }
  to   { transform: translate(var(--dx), var(--dy)) scale(0.1); opacity:0; }
}
/* emphasize buttons briefly on click */
.rate-btn:active{ transform: scale(0.95); }
.rate-btn.glow {
  box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7);
  animation: btnGlow 800ms ease-out;
}
@keyframes btnGlow {
  from { box-shadow: 0 0 0 12px rgba(255, 193, 7, 0.35); }
  to   { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
}


/* === Added: like button ripple === */
.like-btn{
  position: relative;
  overflow: hidden;
}
.like-btn .like-ripple{
  position:absolute;
  left:50%; top:50%;
  width:10px; height:10px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(255,82,150,0.8), rgba(255,82,150,0.0) 60%);
  transform: translate(-50%,-50%) scale(0.2);
  animation: likerip 620ms ease-out forwards;
}
@keyframes likerip {
  to { transform: translate(-50%,-50%) scale(12); opacity: 0; }
}


/* ===== Custom: Glass Header & Description Bar (2025-10-22) ===== */
.site-header{
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(20, 20, 28, 0.45) !important; /* subtle dark glass */
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}
.site-header .site-desc-bar{
  width: 100%;
  background: #7d1f49; /* 暗いピンク系 */
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .03em;
  padding: 4px 10px;
  border-radius: 10px; /* soften the pill look inside the glass header */
  margin: 6px 0 4px 0;
  opacity: 0.95;
}
.site-header .site-desc-bar p{
  margin: 0;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ensure the header layout stacks the desc bar above search row on narrow screens */
@media (max-width: 768px){
  .site-header{ gap: 8px !important; }
}
/* ===== End Custom ===== */


/* ===== Custom: Ensure header layout if inline styles are absent ===== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
}
.site-header .brand{ display:flex; align-items:center; gap:12px; }
.site-header form.search{ display:flex; align-items:center; gap:6px; flex:1; max-width:560px; margin:0 12px; }
.site-header .search input{ border-radius: 12px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #eee; outline:none; }
.site-header .search button.searchbtn{ border-radius: 10px; border:1px solid rgba(255,255,255,.16); background:#ff2a6d; color:#fff; cursor:pointer; padding:8px 12px; }
.site-header .topnav a{ color:#ddd; text-decoration:none; }
.site-header .topnav a:hover{ text-decoration:underline; }
/* ===== End ===== */

.site-header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(20, 20, 28, 0.45) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  position: sticky;
  top: 30px; /* leave space for top bar */
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* ===== End Topmost Bar ===== */


/* ==== Speech bubbles on hero image ==== */
.hero .bubble-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bubble {
  position: absolute;
  background: rgba(24,24,28,0.85);
  color: #fff;
  padding: 10px 12px;
  border-radius: 16px;
  line-height: 1.35;
  box-shadow: 0 6px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,0.06);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transform-origin: center;
  animation: bubbleFloat ease-in-out infinite;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -8px;
  border: 8px solid transparent;
  border-top-color: rgba(24,24,28,0.85);
  filter: drop-shadow(0 -1px 0 rgba(255,255,255,0.06));
}
/* color variants */
.bubble.default{}
.bubble.muted{ opacity: .9; }
.bubble.accent{ background: rgba(255,77,166,0.9); color:#0a0a0c; }
.bubble.accent::after{ border-top-color: rgba(255,77,166,0.9); }

@keyframes bubbleFloat {
  0%   { transform: translateY(0px) }
  50%  { transform: translateY(-6px) }
  100% { transform: translateY(0px) }
}


/* ==== Bubble title/body pair ==== */
.bubble .th-title{
  font-size: 12px;
  line-height: 1.2;
  opacity: .85;
  margin-bottom: 6px;
  letter-spacing: .2px;
  font-weight: 600;
  color: rgba(255,255,255,.8);
}
.bubble.accent .th-title{
  color: rgba(10,10,12,.8);
}
.bubble .th-body{
  font-size: 1em;
  line-height: 1.4;
  white-space: normal;
  word-break: break-word;
}
@media (max-width: 480px){
  .bubble .th-title{ font-size: 11px; margin-bottom: 4px; }
}


/* ==== Bubble visual refresh (glass black, unified) ==== */
.bubble {
  background: rgba(10,10,12,0.68);
  color: #ECECF3; /* body text color */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.bubble::after {
  border-top-color: rgba(10,10,12,0.68);
}

/* Title vs Body colors */
.bubble .th-title{
  color: #A7C0FF; /* soft blue for titles */
}
.bubble .th-body{
  color: #F5F5FB; /* slightly brighter body */
}

/* Remove old variant color differences by neutralizing them */
.bubble.accent, .bubble.muted, .bubble.default { background: rgba(10,10,12,0.68); color: #ECECF3; }
.bubble.accent::after, .bubble.muted::after, .bubble.default::after { border-top-color: rgba(10,10,12,0.68); }
.bubble.accent .th-title, .bubble.muted .th-title, .bubble.default .th-title { color: #A7C0FF; }

/* Enter animation (ふわっと出現) */
@keyframes bubbleEnter {
  0%   { opacity: 0; transform: translateY(10px) scale(0.98); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Keep gentle float after enter */
@keyframes bubbleFloat {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}


/* ==== Bubbles: no tail, clickable, pop effect ==== */
.hero .bubble-layer{ pointer-events: none; }
.bubble{
  pointer-events: auto;   /* allow clicking even if parent blocks */
  cursor: pointer;
}
/* Remove tail */
.bubble::after{ display: none !important; }

/* Pop effect on click */
@keyframes bubblePop {
  0%   { transform: translateY(0) scale(1); opacity: 1; filter: blur(0px); }
  70%  { transform: translateY(-4px) scale(1.08); opacity: .9; filter: blur(0.5px); }
  100% { transform: translateY(-12px) scale(0.9); opacity: 0; filter: blur(1px); }
}
.bubble.pop{
  animation: bubblePop 0.35s ease-out forwards;
}


/* === Mobile tweaks for speech bubbles === */
@media (max-width: 640px){
  .bubble{
    padding: 6px 8px;
    font-size: 12px;
    line-height: 1.3;
    border-radius: 12px;
    max-width: 60vw;
  }
  .bubble .th-title{
    font-size: 11px;
  }
}



/* === Mini bubble over index cards === */
.img-wrap{ position: relative; display:block; width:100%; aspect-ratio: 1 / 1; overflow:hidden; border-radius:10px; }
.img-wrap > a > img{ display:block; width:100%; height:100%; object-fit:cover; }

.mini-bubble{
  position:absolute;
  left:8px;
  bottom:8px;
  max-width: calc(100% - 16px);
  background: rgba(255,255,255,0.92);
  color:#111;
  border-radius: 12px;
  padding:6px 10px;
  font-size:13px;
  line-height:1.25;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transform-origin: left bottom;
  opacity:0.95;
  z-index:3;
  pointer-events: none; /* click-through */
}
.mini-bubble:after{
  content:'';
  position:absolute;
  left:10px; bottom:100%;
  border:6px solid transparent;
  border-bottom-color: rgba(255,255,255,0.92);
}
.mini-bubble .mini-title{
  display:block;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.mini-bubble .mini-body{
  display:block;
  white-space:normal;
  word-break:break-word;
}
@media (max-width:640px){
  .mini-bubble{ left:6px; bottom:6px; padding:4px 8px; font-size:12px; border-radius:10px; max-width: calc(100% - 12px); }
  .mini-bubble:after{ left:8px; border-width:5px; }
}

/* === Card image: no blur === */
.grid .card .img-wrap > a > img{
  filter: none;
  transform: none;
}


/* Mobile: 2 columns grid */
@media (max-width: 640px){
  .grid { grid-template-columns: repeat(2, 1fr); }
}


/* Mini-bubbles container to allow up to 2 stacked bubbles */
.img-wrap { position: relative; }
.mini-bubbles{
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: calc(100% - 16px);
  pointer-events: none;
  z-index: 3;
}
.mini-bubbles .mini-bubble{ position: static; }
@media (max-width:640px){
  .mini-bubbles{ left:6px; bottom:6px; gap:4px; max-width: calc(100% - 12px); }
}


/* === Mobile header & hamburger (right) === */
@media (max-width: 768px) {
  .site-header .topnav { display: none !important; }

  .site-header.mobile {
    position: sticky; top: 0; z-index: 100;
    background: rgba(15,15,18,.88);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border);
    padding: 8px 10px;
  }
  .site-header.mobile .brand-row {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .site-header.mobile .brand {
    color:#ff2a6d; font-weight:800; text-decoration:none; font-size:18px;
  }
  .site-header.mobile .hamburger {
    display:inline-flex; flex-direction:column; justify-content:center; gap:4px;
    width:42px; height:36px; padding:0;
    background:#1c1c22; border:1px solid var(--border); color:#eee; border-radius:10px;
  }
  .site-header.mobile .hamburger .bar {
    display:block; width:22px; height:2px; background:#eee; margin:0 auto; border-radius:2px;
  }

  .site-header.mobile .search { display:flex; gap:8px; margin-top:8px; }
  .site-header.mobile .search input {
    flex:1; padding:10px; border:1px solid var(--border); background:#0c0c0c; color:#eee; border-radius:10px;
  }
  .site-header.mobile .search .searchbtn {
    padding:10px 14px; border:1px solid var(--border); background:#ff2a6d; color:#fff; border-radius:10px;
  }

  /* Overlay behind the drawer */
  .mobile-menu-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 110;
  }

  /* Right slide-in menu drawer; since header is sticky at top, drawer is fixed below it to "stick" visually */
  nav.mobile-menu {
    position: fixed; right: 0; top: 56px; /* approximate header height */
    height: calc(100vh - 56px);
    width: min(80vw, 320px);
    background: #141418; border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 111;
    display: flex; flex-direction: column; overflow-y: auto;
    box-shadow: -8px 0 16px rgba(0,0,0,.4);
  }
  body.menu-open nav.mobile-menu { transform: translateX(0); }

  nav.mobile-menu .menu-header {
    padding: 14px 16px; font-weight:700; color:#fff;
    background: linear-gradient(90deg, #ff2a6d 0%, #7a2aff 100%);
  }
  nav.mobile-menu .menu-item {
    display:flex; align-items:center; gap:10px;
    padding: 14px 16px;
    color:#eaeaf0; text-decoration:none;
    background: #191920;
    border-bottom: 1px solid #202028;
  }
  nav.mobile-menu .menu-item:hover {
    background:#22222a;
  }
}

@media (max-width: 768px) {
  .site-header.mobile .search.with-burger { display:flex; gap:8px; align-items:center; }
  .site-header.mobile .search.with-burger .hamburger {
    display:inline-flex; flex-direction:column; justify-content:center; gap:4px;
    width:42px; height:36px; padding:0;
    background:#1c1c22; border:1px solid var(--border); color:#eee; border-radius:10px;
  }
  .site-header.mobile .search.with-burger .hamburger .bar {
    display:block; width:22px; height:2px; background:#eee; margin:0 auto; border-radius:2px;
  }
}

/* ===== Big Sort Bar (outside header) ===== */
.sortbar-deck { margin: 12px 0 16px; padding: 12px; background: #141418; border: 1px solid var(--border); border-radius: 12px; }
.sortbar-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 768px){ .sortbar-wrap { grid-template-columns: repeat(2, 1fr); } }
.sortbtn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 10px; border-radius: 12px; border: 1px solid var(--border);
  background: #1c1c22; color: #eee; text-decoration: none; font-weight: 700; font-size: 14px;
  min-height: 44px; /* comfortable touch target */
}
.sortbtn:active { transform: translateY(1px) scale(.99); }
.sortbar-note { margin: 8px 2px 0; font-size: 12px; color: var(--muted); }
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,1px,1px); border:0; }

/* ===== Sort bar (outside header) ===== */
.sortbar.outside-header {
  margin: 12px 0 16px 0;
}
.sortbar .sort-buttons {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sortbar .sort-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 140px; min-height: 44px; padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #1c1c22; color: #eee; font-weight: 800; font-size: 14px;
  cursor: pointer;
}
.sortbar .sort-btn:hover { filter: brightness(1.1); }
.sortbar .sort-btn:active { transform: translateY(1px) scale(.99); }
.sortbar .sort-btn.active {
  background: var(--accent); color: #0a0a0c; border-color: var(--accent);
}
@media (max-width: 520px){
  .sortbar .sort-btn { min-width: calc(50% - 4px); }
}

/* ==== FORCE SQUARE CARD IMAGES & COMPACT CARD BODY (override) ==== */
.grid .card .img-wrap,
.card .img-wrap,
.img-wrap {
  aspect-ratio: 1 / 1 !important;
}
/* Disable legacy padding-top hack to avoid double-height */
.img-wrap::before {
  display: none !important;
  padding-top: 0 !important;
}
/* Ensure the image fills the square neatly */
.img-wrap > a, .img-wrap > img, .img-wrap > a > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Make cards shorter */
.card-body { padding: 8px !important; gap: 4px !important; }
.card-title { line-height: 1.2 !important; }
.meta { font-size: 12px !important; }


/* Auto thread thumbs */
.ch-thumb img{ border-radius:8px; box-shadow:0 1px 3px rgba(0,0,0,.15); }