:root {
    /* === 和色（明るめ） === */
    --bg: #2A2927;          /* 淡墨：背景 少し明るく */
    --fg: #F7F3EB;          /* 胡粉 */
    --muted: #C1B8AE;       /* 柔らかい灰みベージュ */
    --card: #262522;        /* 黒鳶：パネル色 */
    --accent: #BA3F3F;      /* 紅殻 */
    --accent-soft: rgba(186,63,63,0.25);
  
    --radius: 16px;
    --shadow: 0 6px 22px rgba(186,63,63,.23);
    --gap: 14px;
  }
  
  
  html,body{height:100%;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--fg);
    font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP", Helvetica, Arial;
  }
  
  /* -----------------------------------
     Header
  ----------------------------------- */
  header{
    position:sticky; top:0; z-index:5;
    backdrop-filter: blur(10px);
    background: linear-gradient(
        180deg,
        rgba(26,26,24,0.9),
        rgba(26,26,24,0.65)
    );
    border-bottom: 1px solid rgba(183,40,46,0.25);
  }
  
  .wrap{
    max-width:1200px; margin:0 auto;
    padding:12px 18px;
  }
  
  .toolbar{
    display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  }
  
  h1{
    font-size:clamp(18px, 2.6vw, 28px);
    margin:0 8px 0 0;
    color:var(--fg);
    letter-spacing:0.03em;
  }
  
  .spacer{flex:1}
  
  /* -----------------------------------
     Button
  ----------------------------------- */
  .btn{
    appearance:none;
    border:1px solid rgba(183,40,46,0.4);
    background:var(--card);
    color:var(--fg);
    padding:10px 14px;
    border-radius:12px;
    cursor:pointer;
    box-shadow:var(--shadow);
    transition:transform .08s ease, opacity .2s, background .25s;
  }
  .btn:hover{
    background: rgba(183,40,46,0.25);
  }
  .btn:active{
    transform: translateY(1px) scale(.99);
  }
  .btn[disabled]{
    opacity:.5; pointer-events:none;
  }
  
  /* -----------------------------------
     Slider container
  ----------------------------------- */
  .field{
    display:flex; align-items:center; gap:8px;
    padding:8px 10px;
    background:var(--card);
    border:1px solid rgba(183,40,46,0.3);
    border-radius:12px;
  }
  .field label{
    font-size:13px; color:var(--muted);
  }
  
  /* -----------------------------------
     Masonry
  ----------------------------------- */
  main{padding:22px 18px 60px}
  
  .masonry{
    column-gap: var(--gap);
    column-count: 4;
  }
  @media(max-width:1024px){ .masonry{ column-count: 2; } }
  @media(max-width:720px){  .masonry{ column-count: 2; } }
  @media(max-width:480px){  .masonry{ column-count: 1; } }
  
  /* -----------------------------------
     Tile
  ----------------------------------- */
  .tile{
    break-inside: avoid;
    margin-bottom: var(--gap);
    position:relative;
    border-radius: var(--radius);
    overflow:hidden;
    background: var(--card);
    border:1px solid rgba(183,40,46,0.22);
    box-shadow: var(--shadow);
  }
  
  .tile img{
    width:100%; height:auto; display:block;
    object-fit:cover;
    opacity:0;
    transform: scale(1.02);
    transition: opacity .5s ease, transform .5s ease, filter .4s ease;
  }
  .tile.loaded img{
    opacity:1;
    transform:none;
  }
  
  .tile figcaption{
    position:absolute;
    inset:auto 0 0 0;
    color:var(--fg);
    background: linear-gradient(180deg, rgba(0,0,0,0), rgba(26,26,24,.7));
    padding: 40px 14px 12px;
    font-size:14px;
    opacity:0;
    transition:opacity .25s;
  }
  .tile:hover figcaption{ opacity:1; }
  
  /* -----------------------------------
     badge（playing UIを既に和風化）
  ----------------------------------- */
  .badge{
    position:absolute; top:8px; right:8px;
    width:34px; height:34px;
    border-radius:50%;
    background:var(--accent-soft);
    border:1px solid var(--accent);
    display:flex;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(6px);
  }
  .badge::before{
    content:"◯";
    font-size:16px;
    color:var(--fg);
  }
  .tile.playing .badge::before{
    content:"●";
  }
  
  /* -----------------------------------
     和の波 / pulse
  ----------------------------------- */
  .tile.playing{
    animation:washin 2.4s ease-in-out infinite;
    border-color:rgba(183,40,46,0.6);
  }
  @keyframes washin{
    0%{ box-shadow:0 0 4px 1px var(--accent-soft); }
    50%{ box-shadow:0 0 16px 6px rgba(183,40,46,0.45); }
    100%{ box-shadow:0 0 4px 1px var(--accent-soft); }
  }
  
  .wave{
    position:absolute;
    top:46px; right:14px;
    width:22px; height:14px;
    display:none; gap:3px;
  }
  .tile.playing .wave{
    display:flex;
  }
  
  .wave span{
    flex:1;
    background:var(--fg);
    opacity:.65;
    animation:take 1.6s ease-in-out infinite;
    border-radius:1px;
  }
  .wave span:nth-child(2){ animation-delay:.2s }
  .wave span:nth-child(3){ animation-delay:.4s }
  
  @keyframes take{
    0%,100%{ transform:scaleY(.4); }
    50%{ transform:scaleY(.9); }
  }
  
  /* -----------------------------------
     footer
  ----------------------------------- */
  footer{
    color:var(--muted);
    text-align:center;
    padding:20px 0 40px;
    border-top:1px solid rgba(183,40,46,0.2);
  }
  
  
 /* --------------------------------
   playing UI 
-------------------------------- */

/* 再生中：写真をほんのり墨で落とす */
.tile.playing img{
    filter: brightness(0.85) contrast(1.05);
  }
  
  /* badge を「茜色の円相」に */
  .badge{
    position:absolute;
    top:8px; right:8px;
    width:34px; height:34px;
    border-radius:50%;
    background:rgba(183,40,46,0.35);   /* 茜・透明感 */
    border:1px solid rgba(183,40,46,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(4px);
  }
  
  /* ▶ → ■ の代わりに、墨の● / ◯ に */
  .badge::before{
    content:"◯";      /* idle */
    font-size:16px;
    color: #EEE6D6;   /* 生成 */
    line-height:1;
  }
  .tile.playing .badge::before{
    content:"●";      /* playing */
    color:#EEE6D6;
  }
  
  /* 枠線を淡い茜に滲ませる */
  .tile.playing{
    animation:washin 2.4s ease-in-out infinite;
    box-shadow:0 0 12px 4px rgba(183,40,46,0.25);
    border-color:rgba(183,40,46,0.6);
  }
  @keyframes washin{
    0%{ box-shadow:0 0 4px 1px rgba(183,40,46,0.20);}
    50%{ box-shadow:0 0 16px 6px rgba(183,40,46,0.45);}
    100%{ box-shadow:0 0 4px 1px rgba(183,40,46,0.20);}
  }
  
  /* 「竹」のような静かな波形 */
  .wave{
    position:absolute;
    top:46px; right:14px;
    width:22px; height:14px;
    display:none; gap:3px;
  }
  .wave span{
    flex:1;
    background:#EEE6D6;   /* 生成色 */
    opacity:.65;
    animation:take 1.6s ease-in-out infinite;
    border-radius:1px;
  }
  .wave span:nth-child(2){ animation-delay:.2s }
  .wave span:nth-child(3){ animation-delay:.4s }
  
  @keyframes take{
    0%,100%{ transform:scaleY(.4); }
    50%{ transform:scaleY(.9); }
  }
  
  /* 再生中はキャプションを少し浮かせる */
  .tile.playing figcaption{
    opacity:1;
    background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.5));
  }

  /* -----------------------------------
   Masonry（常に2列）
----------------------------------- */
.masonry {
  column-gap: var(--gap);
  column-count: 2 !important;
}

/* スマホでも2列のままにするなら以下も追加 */
@media(max-width:480px){
  .masonry {
    column-count: 2 !important;
  }
}

/* ==========================
   写真拡大用ライトボックス
========================== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.lightbox-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-inner {
  max-width: min(90vw, 1100px);
  max-height: 90vh;
  background: rgba(20,20,18,0.9);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lightbox-image {
  max-width: 100%;
  max-height: 70vh;
  border-radius: calc(var(--radius) - 4px);
  object-fit: contain;
}

.lightbox-caption {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}