/*
 * 図鑑「寝顔図鑑」タブ(js/dreamFaceRewardList.js)専用のスタイル。
 * 寝顔1件=カード1枚(きのみ備蓄タブのレシピカード.stock-cardと同じ大きさ感)で、
 * カード内の情報構成はフィールド最終枠一覧(field-table.htmlの.final-slot-cell)の
 * アイコン+★レア度バッジ+名称+NPという積み方を踏襲する。
 */

:root{
  --dfr-reward-exp:#4588FB;
  --dfr-reward-shards:#C2410C;
  --dfr-reward-event:#E4578B;
}
:root[data-theme="dark"]{
  --dfr-reward-exp:#AFCBFF;
  --dfr-reward-shards:#FFB26B;
  --dfr-reward-event:#F0A2C6;
}
:root[data-theme="dark-blue"]{
  --dfr-reward-exp:#B8D5FF;
  --dfr-reward-shards:#FFC38A;
  --dfr-reward-event:#F3A8CC;
}

.dfr-tool{ padding:12px 0 0; }

.dfr-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-bottom:8px;
}
.dfr-search{
  flex:1 1 160px;
  min-width:0;
  font:inherit;
  font-size:var(--fs-base);
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  color:var(--ink);
}

.dfr-sort-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
}
.dfr-sort-label{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
}

.dfr-exclusive-row,
.dfr-switch-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
}
.dfr-exclusive-row{
  margin-bottom:10px;
}
.dfr-switch-label{
  min-width:0;
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
}

.dfr-filter-toggle{
  margin-bottom:10px;
  font-size:var(--fs-xs);
}
.dfr-filter-toggle > summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:var(--fs-sm);
  font-weight:800;
  color:var(--navy);
  padding:5px 2px;
  border-bottom:1px dashed var(--line);
}
.dfr-filter-active-summary{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:var(--fs-xs);
  font-weight:600;
  color:var(--ink-soft);
}
.dfr-filter-toggle > summary::-webkit-details-marker{ display:none; }
.dfr-filter-toggle-icon{ display:inline-flex; }
.dfr-filter-toggle-icon svg{ width:15px; height:15px; }
.dfr-filter-toggle > summary::after{
  content:"›";
  margin-left:2px;
  font-size:1.15em;
  line-height:1;
  color:var(--ink-soft);
  transition:transform .15s ease;
}
.dfr-filter-toggle[open] > summary::after{ transform:rotate(90deg); }
.dfr-filter-cat{
  margin-top:8px;
  padding-top:8px;
  border-top:1px dashed var(--line);
}
.dfr-filter-cat:first-of-type{ margin-top:10px; }
.dfr-filter-pair{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:16px;
  margin-top:10px;
  padding-top:8px;
  border-top:1px dashed var(--line);
}
.dfr-filter-pair > .dfr-filter-cat{
  min-width:0;
  margin-top:0;
  padding-top:0;
  border-top:0;
}
.dfr-filter-cat-label{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
  margin-bottom:6px;
}
.dfr-filter-note{
  margin-top:6px;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.dfr-filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.dfr-filter-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font:inherit;
  font-size:var(--fs-xs);
  padding:5px 9px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--paper);
  color:var(--ink-soft);
  cursor:pointer;
  box-sizing:border-box;
  transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.dfr-filter-chip-icon{ flex:none; }
.dfr-filter-chip-icon svg{ width:13px; height:13px; }
.dfr-filter-chip:hover{ background:var(--paper-dim); }
.dfr-filter-chip.active{
  background:var(--selected-soft-bg);
  border:3px solid var(--selected-strong-border);
  color:var(--selected-soft-ink);
  font-weight:700;
}

.dfr-filter-chip[data-sleep-type="うとうと"]{ --dfr-sleep-bg:var(--sleep-dozing-cell); }
.dfr-filter-chip[data-sleep-type="すやすや"]{ --dfr-sleep-bg:var(--sleep-snoozing-cell); }
.dfr-filter-chip[data-sleep-type="ぐっすり"]{ --dfr-sleep-bg:var(--sleep-slumbering-cell); }
.dfr-filter-chip[data-sleep-type]{
  background:var(--dfr-sleep-bg);
  color:var(--ink);
}
.dfr-filter-chip[data-sleep-type]:hover{
  background:color-mix(in srgb, var(--dfr-sleep-bg) 85%, var(--ink) 15%);
}
.dfr-filter-chip[data-sleep-type].active{
  background:var(--dfr-sleep-bg);
  color:var(--selected-soft-ink);
}

/* シミュ条件のフィールドプリセットと同じ画像・黒レイヤー・白文字。 */
.dfr-filter-field-chip,
.dfr-filter-field-chip:hover,
.dfr-filter-field-chip.active{
  background-image:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),var(--dfr-field-image);
  background-size:cover;
  background-position:center;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.dfr-filter-field-chip:not(.active){ border-color:transparent; }

/* 表示項目の排他選択も、EXP計算の選択状態と同じ「薄い背景+太い枠」に揃える。 */
.dfr-filter-toggle[data-dfr-display-toggle] .segmented button{
  box-sizing:border-box;
  border:1px solid var(--line);
  background:var(--paper);
  transition:background-color .12s ease, border-color .12s ease, color .12s ease;
}
.dfr-filter-toggle[data-dfr-display-toggle] .segmented button:hover{
  background:var(--paper-dim);
}
.dfr-filter-toggle[data-dfr-display-toggle] .segmented button.active{
  background:var(--selected-soft-bg);
  border:3px solid var(--selected-strong-border);
  color:var(--selected-soft-ink);
}

.dfr-summary-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.dfr-summary{
  font-size:var(--fs-xs);
  font-weight:700;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}

/* ---- カードグリッド(きのみ備蓄タブの.stock-cardと同じ大きさ感) ---- */
.dfr-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
  gap:8px;
}
.dfr-grid.dfr-hide-exp .dfr-reward-exp{ display:none; }
.dfr-grid.dfr-hide-shards .dfr-reward-shards{ display:none; }
.dfr-grid.dfr-hide-candy .dfr-reward-candy{ display:none; }
.dfr-grid.dfr-hide-expShardSum .dfr-reward-expShardSum{ display:none; }
.dfr-grid.dfr-hide-eventItem .dfr-event-item{ display:none; }

.dfr-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:8px;
  border:2px solid var(--line);
  border-radius:8px;
  background:var(--paper);
  min-width:0;
}
.dfr-card.dfr-clickable{
  cursor:pointer;
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.dfr-card.dfr-clickable:hover{
  border-color:var(--accent);
  box-shadow:0 3px 10px rgba(0,0,0,.1);
  transform:translateY(-1px);
}
.dfr-card.dfr-clickable:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}
.dfr-card-head{
  display:flex;
  align-items:flex-start;
  gap:7px;
  min-width:0;
}
.dfr-card-icon-wrap{
  position:relative;
  flex:0 0 34px;
  width:34px;
  height:34px;
}
.dfr-card-icon{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.dfr-card-star{
  position:absolute;
  top:-4px;
  right:-6px;
  min-width:20px;
  padding:1px 4px;
  border:1px solid rgba(150,105,0,.5);
  border-radius:999px;
  background:rgba(255,250,225,.94);
  color:#6B4C00;
  font-size:10px;
  font-weight:900;
  line-height:1.35;
  text-align:center;
  white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
}
.dfr-card-copy{
  flex:1 1 auto;
  min-width:0;
}
.dfr-card-name-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
}
.dfr-card-pokemon-name{
  font-size:var(--fs-sm);
  font-weight:700;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:100%;
}
.dfr-card-sleep-badge{
  flex:none;
  padding:1px 6px;
  border-radius:999px;
  font-size:9px;
  font-weight:700;
  color:var(--ink);
}
.dfr-card-sleep-badge[data-sleep-type="うとうと"]{ background:var(--sleep-dozing-cell); }
.dfr-card-sleep-badge[data-sleep-type="すやすや"]{ background:var(--sleep-snoozing-cell); }
.dfr-card-sleep-badge[data-sleep-type="ぐっすり"]{ background:var(--sleep-slumbering-cell); }
.dfr-card-face-name{
  display:block;
  margin-top:1px;
  font-size:var(--fs-xs);
  color:var(--ink-soft);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.dfr-field-list{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  gap:5px;
}
.dfr-field-badge{
  display:inline-flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:3px 6px;
  max-width:100%;
  padding:4px 7px;
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--paper-dim);
  color:var(--ink);
  font-size:var(--fs-2xs);
  line-height:1.35;
}
.dfr-field-badge-ex{
  border-color:var(--selected-border);
  background:var(--selected-bg);
  color:var(--selected-ink);
}
.dfr-field-label{
  font-weight:800;
  color:var(--navy);
}
.dfr-field-badge-ex .dfr-field-label{
  color:var(--selected-ink);
}
.dfr-field-np{
  font-weight:800;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.dfr-reward{
  display:flex;
  flex-direction:column;
  flex-basis:100%;
  gap:1px;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
}
.dfr-reward-item{
  display:inline-flex;
  align-items:center;
  gap:3px;
}
.dfr-reward-exp{ color:var(--dfr-reward-exp); }
.dfr-reward-shards{ color:var(--dfr-reward-shards); }
.dfr-reward-icon{ flex:none; }
.dfr-reward-icon svg{ width:12px; height:12px; }
/* アメ→(EXP・かけら)→合算の3段区切り。EXP・かけらは横並びの1段にまとめる。 */
.dfr-reward-row-primary{
  display:flex;
  align-items:center;
  gap:8px;
  border-top:1px dashed var(--line);
  margin-top:2px;
  padding-top:2px;
}
.dfr-grid.dfr-hide-exp.dfr-hide-shards .dfr-reward-row-primary{ display:none; }
.dfr-reward-expShardSum{
  border-top:1px dashed var(--line);
  margin-top:2px;
  padding-top:2px;
}
.dfr-field-badge-ex .dfr-reward{
  color:var(--selected-ink);
  opacity:.85;
}
.dfr-no-field{
  padding:4px 0;
  font-size:var(--fs-2xs);
  color:var(--ink-soft);
}
.dfr-event-item{
  margin-top:4px;
  padding-top:4px;
  border-top:1px dashed var(--line);
  color:var(--ink-soft);
  font-size:var(--fs-2xs);
  line-height:1.5;
}
.dfr-event-item-value{
  display:inline-flex;
  color:var(--dfr-reward-event);
}
.dfr-empty{
  padding:28px 16px;
  border:1px dashed var(--line);
  border-radius:var(--radius-md);
  background:var(--paper);
  color:var(--ink-soft);
  text-align:center;
}
.dfr-empty-icon{
  display:inline-flex;
  margin-bottom:4px;
  color:var(--ink-soft);
}
.dfr-empty p{ margin:0; font-size:var(--fs-sm); }

/* ---- カードを押したときの寝顔とねむけパワー表 ---- */
.overlay-modal .dfr-face-detail-card{
  max-width:900px;
  padding:18px;
}
.dfr-face-detail-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:2px 36px 12px 2px;
  border-bottom:1px solid var(--line);
}
.dfr-face-detail-icon{
  width:56px;
  height:56px;
  object-fit:contain;
  flex:none;
}
.dfr-face-detail-title-wrap{ min-width:0; }
.dfr-face-detail-title{
  margin:0;
  color:var(--ink);
  font-size:var(--fs-lg);
  font-weight:800;
  line-height:1.35;
}
.dfr-face-detail-subtitle{
  margin:3px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-xs);
  line-height:1.5;
}
.dfr-face-detail-empty{
  margin:16px 0 0;
  color:var(--ink-soft);
  font-size:var(--fs-sm);
}

@media (max-width:640px){
  .dfr-grid{ grid-template-columns:repeat(auto-fill, minmax(128px, 1fr)); }
  .dfr-face-detail-head{ padding-right:30px; }
  .dfr-face-detail-icon{ width:52px; height:52px; }
}