/* トップページ専用スタイル（style.cssの変数を継承） */

body.top-page{
  display: block;
  overflow-y: auto;
}

/* ===== サイトヘッダー ===== */
.site-header{
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.brand{
  display: flex; align-items: center; gap: 10px;
  font-weight: bold;
}
.brand-mark{
  font-size: 22px;
  color: var(--accent);
}
.brand-name{ font-size: 16px; color: var(--text); }
.site-nav{
  display: flex; gap: 14px; align-items: center;
}
.site-nav .nav-link{
  text-decoration: none;
  color: var(--text-2);
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.site-nav .nav-link.active{
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: bold;
}
.btn-text.big{
  padding: 10px 20px;
  font-size: 14px;
}
.btn-text.primary.big{ font-weight: bold; }

/* ===== ヒーロー ===== */
.hero{
  padding: 60px 24px 40px;
  text-align: center;
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
.hero h1{
  font-size: 32px;
  margin: 0 0 16px;
  color: var(--text);
}
.hero h1 strong{ color: var(--accent); }
.hero p{
  color: var(--text-2);
  font-size: 15px;
  margin: 0 auto 24px;
  max-width: 540px;
  line-height: 1.7;
}
.hero-actions{
  display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap;
}
.hero-actions .btn-text{
  text-decoration: none;
  display: inline-flex; align-items: center;
}

/* ===== コントロール ===== */
.deck-controls{
  max-width: 1100px;
  margin: 30px auto 12px;
  padding: 0 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.controls-row{
  display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap;
}
.controls-row .search-wrap{
  flex: 1; min-width: 240px;
}
.controls-row .search-wrap input{
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
}
.controls-row select{
  width: auto; min-width: 130px;
  padding: 10px 12px;
}
.chip-row{
  display: flex; gap: 6px; flex-wrap: wrap;
}
.chip-row .chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
}
.house-dot{
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
}
.house-dot.gryffindor{ background: var(--gryffindor); }
.house-dot.slytherin{  background: var(--slytherin); }
.house-dot.hufflepuff{ background: var(--hufflepuff); }
.house-dot.ravenclaw{  background: var(--ravenclaw); }

/* ===== デッキギャラリー ===== */
.deck-gallery{
  max-width: 1100px;
  margin: 0 auto 60px;
  padding: 16px 24px;
}
.deck-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

/* デッキカード（1件ぶん） */
.deck-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  display: flex; flex-direction: column;
}
.deck-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(20,30,60,.18);
  border-color: var(--accent);
}

/* ===== サムネ（パートナー大 + メインデッキ並べ） ===== */
.deck-card .thumb{
  position: relative;
  padding: 8px;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 6px;
  min-height: 168px;
  overflow: hidden;
}
/* 寮ごとの背景 */
.deck-card .thumb-gryffindor{ background: linear-gradient(135deg, #2a0708 0%, #6e0001 100%); }
.deck-card .thumb-slytherin { background: linear-gradient(135deg, #06180e 0%, #133b21 100%); }
.deck-card .thumb-hufflepuff{ background: linear-gradient(135deg, #4a3a07 0%, #c79b1f 100%); }
.deck-card .thumb-ravenclaw { background: linear-gradient(135deg, #04081a 0%, #0e1a40 100%); }
.deck-card .thumb-none      { background: linear-gradient(135deg, #1a1d2e 0%, #2c2d3d 100%); }

/* パートナー（左の縦長カード） */
.deck-card .thumb-partner{
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 5 / 7;
  background: rgba(255,255,255,.08);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.18);
}
.deck-card .thumb-partner img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.deck-card .thumb-partner img.failed{ display: none; }
/* 画像なし時のフォールバック */
.deck-card .thumb-card-gryffindor{ background-color: #ae0001; }
.deck-card .thumb-card-slytherin { background-color: #1a472a; }
.deck-card .thumb-card-hufflepuff{ background-color: #ecb939; }
.deck-card .thumb-card-ravenclaw { background-color: #0e1a40; }
.deck-card .thumb-card-none      { background-color: #555770; }
.deck-card .thumb-partner-name{
  position: absolute;
  left: 4px; right: 4px; bottom: 4px;
  background: rgba(0,0,0,.7);
  color: #fff;
  font-size: 9px;
  text-align: center;
  padding: 2px 3px;
  border-radius: 2px;
  line-height: 1.2;
  z-index: 2;
}
.deck-card .thumb-partner-empty{
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4);
  font-size: 10px;
  letter-spacing: 1px;
}

/* メインデッキのミニグリッド */
.deck-card .thumb-main{
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-auto-rows: min-content;
  gap: 1px;
  align-content: start;
}
.deck-card .thumb-mini{
  aspect-ratio: 5 / 7;
  border-radius: 1px;
  position: relative;
  overflow: hidden;
  border: 0.5px solid rgba(0,0,0,.2);
}
.deck-card .thumb-mini img{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.deck-card .thumb-mini img.failed{ display: none; }
.deck-card .thumb-main-empty{
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5);
  font-size: 11px;
}
.deck-card .body{
  padding: 14px;
  flex: 1;
  display: flex; flex-direction: column;
}
.deck-card h3{
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.deck-card .author{
  font-size: 11px; color: var(--muted);
  margin: 0 0 10px;
}
.deck-card .balance{
  display: flex; height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin: 0 0 8px;
  background: var(--panel-2);
}
.deck-card .balance-seg{ height: 100%; }
.deck-card .balance-seg.gryffindor{ background: var(--gryffindor); }
.deck-card .balance-seg.slytherin{  background: var(--slytherin); }
.deck-card .balance-seg.hufflepuff{ background: var(--hufflepuff); }
.deck-card .balance-seg.ravenclaw{  background: var(--ravenclaw); }
.deck-card .balance-seg.none{       background: var(--no-house); }
.deck-card .balance-legend{
  display: flex; gap: 8px; flex-wrap: wrap;
  font-size: 10px; color: var(--muted);
  margin-bottom: 10px;
}
.deck-card .balance-legend .leg{
  display: inline-flex; align-items: center; gap: 4px;
}
.deck-card .balance-legend .dot{
  width: 8px; height: 8px; border-radius: 50%;
}
.deck-card .balance-legend .dot.gryffindor{ background: var(--gryffindor); }
.deck-card .balance-legend .dot.slytherin{  background: var(--slytherin); }
.deck-card .balance-legend .dot.hufflepuff{ background: var(--hufflepuff); }
.deck-card .balance-legend .dot.ravenclaw{  background: var(--ravenclaw); }
.deck-card .balance-legend .dot.none{       background: var(--no-house); }
.deck-card .stats{
  margin-top: auto;
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.deck-card .stats .likes{ color: var(--accent); font-weight: bold; }

.empty-msg{
  text-align: center;
  color: var(--muted);
  padding: 40px;
}

/* ===== フッター ===== */
.site-footer{
  border-top: 1px solid var(--line);
  padding: 24px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  background: var(--panel);
}

/* ===== デッキ詳細モーダル ===== */
.deck-detail{
  width: 90%;
  max-width: 720px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  position: relative;
  padding: 0;
  overflow: hidden;
}
.modal-close-btn{
  position: absolute;
  top: 10px; right: 14px;
  background: transparent;
  border: none;
  font-size: 22px;
  color: var(--muted);
  cursor: pointer;
  z-index: 2;
  padding: 4px 8px;
}
.modal-close-btn:hover{ color: var(--accent); }
.detail-header{
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.detail-header h2{
  margin: 0 0 6px;
  font-size: 20px;
  color: var(--text);
  padding-right: 30px;
}
.detail-meta{
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
}
.d-stats{ margin-left: auto; }
.detail-summary{
  padding: 16px 24px;
  background: var(--panel-2);
  font-size: 13px;
  color: var(--text-2);
}
.detail-cards{
  padding: 16px 24px;
  overflow-y: auto;
  flex: 1;
}
.detail-cards h3{
  font-size: 13px;
  color: var(--accent);
  margin: 16px 0 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  display: flex; align-items: center; justify-content: space-between;
}
.detail-cards h3:first-child{ margin-top: 0; }
.detail-cards .cnt{
  font-size: 11px; color: var(--muted);
  font-weight: normal;
}
.mini-cards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px;
}
.mini-card{
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--panel-2);
  border-radius: 4px;
  font-size: 12px;
  border-left: 3px solid var(--no-house);
}
.mini-card.gryffindor{ border-left-color: var(--gryffindor); }
.mini-card.slytherin{  border-left-color: var(--slytherin); }
.mini-card.hufflepuff{ border-left-color: var(--hufflepuff); }
.mini-card.ravenclaw{  border-left-color: var(--ravenclaw); }
.mini-card .num{
  font-size: 10px; color: var(--muted);
  min-width: 50px;
}
.mini-card .name{
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-card .qty{
  font-weight: bold;
  color: var(--accent);
  flex-shrink: 0;
}

.detail-actions{
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  display: flex; gap: 10px; justify-content: flex-end;
  background: var(--panel);
}
.detail-actions .btn-text{
  text-decoration: none;
  display: inline-flex; align-items: center;
}

/* builder.htmlの戻るボタン */
.btn-back{
  text-decoration: none;
  display: inline-flex; align-items: center;
  font-size: 13px;
}

/* ===== デッキカードのリンク（SEO用 a タグラップ） ===== */
.deck-card-link{
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column;
  height: 100%;
}
.deck-card-link:hover{ text-decoration: none; }

/* ===== パンくず ===== */
.hpdb-breadcrumbs{
  padding: 12px 24px;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.hpdb-breadcrumbs a{
  color: var(--text-2);
  text-decoration: none;
}
.hpdb-breadcrumbs a:hover{ color: var(--accent); text-decoration: underline; }
.hpdb-breadcrumbs .sep{ margin: 0 6px; color: var(--line-strong); }

/* ===== 単一デッキページ ===== */
.hpdb-single-deck{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 60px;
}
.deck-detail-page{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin: 20px 24px;
  overflow: hidden;
}
.deck-detail-header{
  position: relative;
  padding: 32px 28px 24px;
  color: #fff;
}
.deck-detail-header.thumb-gryffindor{ background: linear-gradient(135deg, #2a0708 0%, #6e0001 100%); }
.deck-detail-header.thumb-slytherin { background: linear-gradient(135deg, #06180e 0%, #133b21 100%); }
.deck-detail-header.thumb-hufflepuff{ background: linear-gradient(135deg, #4a3a07 0%, #c79b1f 100%); }
.deck-detail-header.thumb-ravenclaw { background: linear-gradient(135deg, #04081a 0%, #0e1a40 100%); }
.deck-detail-header.thumb-none      { background: linear-gradient(135deg, #1a1d2e 0%, #2c2d3d 100%); }
.deck-detail-header h1{ margin: 0 0 8px; font-size: 28px; color: #fff; }
.ddh-meta{ font-size: 13px; opacity: .85; margin: 0 0 6px; }
.ddh-meta .sep{ margin: 0 4px; opacity: .5; }
.ddh-house{ font-size: 12px; margin: 0; opacity: .9; display: inline-flex; align-items: center; gap: 6px; }

.deck-detail-cards{ padding: 28px; }
.deck-detail-cards h2{
  font-size: 16px; color: var(--accent);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin: 0 0 12px;
}
.deck-detail-cards h2 small{ font-weight: normal; color: var(--muted); margin-left: 8px; font-size: 12px; }
.dd-grid{
  display: grid;
  gap: 8px;
  margin-bottom: 28px;
}
.dd-grid-large{
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  max-width: 320px;
}
.dd-grid-small{
  grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
}
.dd-card{
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.dd-card-art{
  position: relative;
  aspect-ratio: 5 / 7;
  overflow: hidden;
}
.dd-card-art img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.dd-card-qty{
  position: absolute;
  bottom: 4px; right: 4px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.dd-card-name{
  font-size: 11px;
  padding: 4px 6px 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-card-num{
  font-size: 10px;
  padding: 0 6px 4px;
  color: var(--muted);
}

.deck-detail-summary{
  padding: 0 28px 28px;
}
.deck-detail-summary h2{
  font-size: 14px; color: var(--accent);
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin: 0 0 12px;
}
.house-breakdown{
  list-style: none; padding: 0; margin: 0;
}
.house-breakdown li{
  display: grid;
  grid-template-columns: 16px 100px 1fr 60px;
  gap: 8px; align-items: center;
  padding: 4px 0;
  font-size: 13px;
}
.hb-bar{
  height: 8px;
  background: var(--panel-2);
  border-radius: 4px;
  overflow: hidden;
}
.hb-fill{ display: block; height: 100%; }
.hb-fill.gryffindor{ background: var(--gryffindor); }
.hb-fill.slytherin{  background: var(--slytherin); }
.hb-fill.hufflepuff{ background: var(--hufflepuff); }
.hb-fill.ravenclaw{  background: var(--ravenclaw); }
.hb-fill.none{       background: var(--no-house); }
.hb-num{ text-align: right; font-weight: bold; }

.deck-detail-footer{
  padding: 20px 28px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  display: flex; gap: 14px; align-items: center;
  flex-wrap: wrap;
}
.deck-code-box{ flex: 1; min-width: 240px; }
.deck-code-box label{
  display: block; font-size: 11px; color: var(--muted);
  margin-bottom: 4px;
}
.deck-code-row{ display: flex; gap: 6px; }
.deck-code-row input{ flex: 1; font-family: monospace; font-size: 11px; }

/* ===== アーカイブ ===== */
.archive-header{
  text-align: center;
  padding: 40px 24px 28px;
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--line);
}
.archive-header h1{ font-size: 26px; margin: 0 0 8px; }
.archive-header p{ color: var(--text-2); margin: 0 0 18px; }
.house-filter-nav{
  display: flex; gap: 6px; flex-wrap: wrap;
  justify-content: center;
}
.house-filter-nav .chip{
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}

.pagination{
  text-align: center;
  margin-top: 30px;
  padding: 0 24px;
}
.pagination .page-numbers{
  display: inline-block;
  padding: 8px 14px;
  margin: 0 2px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  text-decoration: none;
  color: var(--text);
}
.pagination .page-numbers.current{
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ===== モバイル ===== */
@media (max-width: 600px){
  .site-header{
    padding: 10px 14px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .brand-name{ font-size: 14px; }
  .site-nav{ gap: 8px; }
  .site-nav .nav-link{ font-size: 13px; }
  .hero{ padding: 36px 16px 28px; }
  .hero h1{ font-size: 22px; }
  .hero p{ font-size: 13px; }
  .deck-controls{ padding: 0 16px; }
  .deck-gallery{ padding: 12px 16px; }
  .deck-grid{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .deck-card .thumb{ height: 100px; }
  .deck-card .partner-mini{ padding: 6px 8px; }
  .deck-card .partner-mini .name{ font-size: 11px; }
  .deck-card h3{ font-size: 13px; }
  .deck-card .body{ padding: 10px; }
}

@media (max-width: 380px){
  .deck-grid{ grid-template-columns: 1fr; }
}