/* ═══════════════════════════════════
   女性向けエロゲー ティアリスト
   カラーテーマ: 上品なプラム × グレー
═══════════════════════════════════ */
#wtl{
  --bg:     #f0eef2;
  --surf:   #ffffff;
  --surf2:  #f7f5f9;
  --surf3:  #eeecf0;
  --hd-bg:  #3b1f5e;
  --tab-bg: #4a2870;
  --fb-bg:  #f5f3f7;
  --bdr:    rgba(80,40,100,.12);
  --bdr2:   rgba(80,40,100,.20);
  --txt:    #1a1020;
  --muted:  #7a6888;
  --s5:     #be1060;
  --s4:     #7c3ec0;
  --s-c:    #1a6aa0;
  --a-c:    #3d7a50;
  --acc:    #be1060;
  --new:    #e05800;
  font-family:'Noto Sans JP',sans-serif;
  font-size:14px;color:var(--txt);
  background:var(--bg);
  border-radius:10px;overflow:hidden;
  border:1px solid var(--bdr2);
  -webkit-font-smoothing:antialiased;
}

/* HEADER */
#wtl .wt-hd{
  padding:16px 20px 14px;
  background:var(--hd-bg);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  border-bottom:2px solid rgba(255,255,255,.1);
  position:relative;overflow:hidden;
}
#wtl .wt-hd::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 80% 50%,rgba(255,120,200,.08) 0%,transparent 60%);
  pointer-events:none;
}
#wtl .wt-badge{
  font-size:.55rem;font-weight:900;letter-spacing:.1em;
  color:var(--hd-bg);background:#f0c0e0;
  padding:3px 8px;border-radius:2px;white-space:nowrap;
}
#wtl .wt-ttl{
  font-family:'Noto Serif JP',serif;
  font-size:1.05rem;font-weight:900;color:#fff;letter-spacing:.04em;
}
#wtl .wt-sub{font-size:.58rem;color:rgba(255,255,255,.6);margin-left:auto;}

/* TAB BAR */
#wtl .wt-tabs{
  display:flex;border-bottom:1px solid var(--bdr2);
  background:var(--tab-bg);padding:0 16px;
}
#wtl .wt-tab{
  padding:10px 14px;font-size:.7rem;font-weight:900;
  border:none;background:none;cursor:pointer;color:rgba(255,255,255,.55);
  border-bottom:3px solid transparent;margin-bottom:-1px;
  transition:color .14s,border-color .14s;letter-spacing:.06em;white-space:nowrap;
}
#wtl .wt-tab:hover{color:rgba(255,255,255,.85);}
#wtl .wt-tab.active{color:#fff;border-bottom-color:#f0c0e0;}
#wtl .wt-tab[data-tab="S5"].active{border-bottom-color:var(--s5);}
#wtl .wt-tab[data-tab="S4"].active{border-bottom-color:#c090ff;}
#wtl .wt-tab[data-tab="S"].active{border-bottom-color:#80c0ff;}
#wtl .wt-tab[data-tab="A"].active{border-bottom-color:#80d090;}

/* FILTER BAR */
#wtl .wt-fbar{
  padding:11px 18px;border-bottom:2px solid var(--bdr2);
  display:flex;flex-direction:column;gap:8px;
  background:var(--fb-bg);
}
#wtl .wt-frow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:2px 0;}
#wtl .wt-frow+.wt-frow{border-top:1px solid rgba(80,40,100,.07);padding-top:7px;}
#wtl .wt-flabel{
  font-size:.58rem;font-weight:900;color:#fff;
  background:#6030a0;padding:2px 7px;border-radius:2px;
  min-width:44px;text-align:center;flex-shrink:0;letter-spacing:.06em;
}
#wtl .wt-chip{
  font-size:.68rem;font-weight:700;padding:4px 12px;border-radius:20px;
  cursor:pointer;border:1.5px solid rgba(80,40,100,.22);
  color:#604880;background:#fff;transition:all .13s;white-space:nowrap;
}
#wtl .wt-chip:hover{border-color:rgba(80,40,100,.45);color:#3a2060;}
#wtl .wt-chip.on{
  background:#8030b0;border-color:#8030b0;color:#fff;font-weight:900;
  box-shadow:0 2px 7px rgba(128,48,176,.25);
}
#wtl .wt-chip.new-chip{border-color:rgba(224,88,0,.4);color:var(--new);}
#wtl .wt-chip.new-chip.on{background:var(--new);border-color:var(--new);color:#fff;}
#wtl .wt-clr{
  font-size:.66rem;font-weight:700;padding:4px 12px;border-radius:20px;
  cursor:pointer;border:1.5px solid rgba(80,40,100,.16);
  color:var(--muted);background:transparent;
  transition:all .13s;white-space:nowrap;margin-left:auto;
}
#wtl .wt-clr:hover{border-color:rgba(80,40,100,.4);color:#3a2060;}
#wtl .wt-finfo{
  display:none;font-size:.6rem;color:#8030b0;font-weight:700;
  padding:4px 18px;border-bottom:1px solid rgba(128,48,176,.12);
  background:rgba(128,48,176,.05);letter-spacing:.04em;
}
#wtl.filtered .wt-finfo{display:block;}

/* RANK SECTION */
#wtl .wt-rank{border-bottom:1px solid var(--bdr);background:var(--bg);}
#wtl .wt-rank:last-child{border-bottom:none;}
#wtl .wt-rank-hd{
  display:flex;align-items:center;gap:11px;padding:11px 18px;
  cursor:pointer;background:var(--surf);border-bottom:1px solid var(--bdr);
  transition:background .13s;user-select:none;
}
#wtl .wt-rank-hd:hover{background:#f8f5fb;}
#wtl .wt-rank[data-rank="S5"] .wt-rank-hd{border-left:4px solid var(--s5);}
#wtl .wt-rank[data-rank="S4"] .wt-rank-hd{border-left:4px solid var(--s4);}
#wtl .wt-rank[data-rank="S"]  .wt-rank-hd{border-left:4px solid var(--s-c);}
#wtl .wt-rank[data-rank="A"]  .wt-rank-hd{border-left:4px solid var(--a-c);}
#wtl .wt-rank-label{font-family:'Noto Serif JP',serif;font-size:.88rem;font-weight:900;letter-spacing:.08em;min-width:26px;}
#wtl .wt-rank[data-rank="S5"] .wt-rank-label{color:var(--s5);}
#wtl .wt-rank[data-rank="S4"] .wt-rank-label{color:var(--s4);}
#wtl .wt-rank[data-rank="S"]  .wt-rank-label{color:var(--s-c);}
#wtl .wt-rank[data-rank="A"]  .wt-rank-label{color:var(--a-c);}
#wtl .wt-rank-desc{font-size:.63rem;color:var(--muted);font-weight:700;flex:1;}
#wtl .wt-rank-cnt{font-size:.58rem;color:var(--muted);font-weight:700;background:var(--surf3);padding:1px 7px;border-radius:3px;border:1px solid var(--bdr);}
#wtl .wt-rank-tog{font-size:.48rem;color:var(--muted);transition:transform .2s;margin-left:4px;}
#wtl .wt-rank.collapsed .wt-rank-tog{transform:rotate(-90deg);}
#wtl .wt-rank.collapsed .wt-grid{display:none;}

/* GRID 4列 */
#wtl .wt-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;padding:12px 14px 14px;background:var(--bg);
}

/* CARD */
#wtl .wt-card{
  position:relative;cursor:pointer;border-radius:6px;overflow:hidden;
  background:var(--surf);border:1px solid var(--bdr);
  box-shadow:0 1px 5px rgba(80,40,100,.08);
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
#wtl .wt-card:hover{
  transform:translateY(-4px);border-color:rgba(128,48,176,.3);
  box-shadow:0 8px 22px rgba(80,40,100,.16);
}
#wtl .wt-card.dim{display:none;}

/* カバー 2:3 */
#wtl .wt-cover{width:100%;aspect-ratio:2/3;overflow:hidden;background:#e8e0f0;position:relative;}
#wtl .wt-cover img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;opacity:0;transition:opacity .4s;}

/* NEWバッジ */
#wtl .wt-new{
  position:absolute;top:6px;right:6px;
  background:var(--new);color:#fff;
  font-size:.48rem;font-weight:900;
  padding:2px 5px;border-radius:2px;letter-spacing:.06em;
}

/* ジャンルバッジ */
#wtl .wt-gbadges{
  position:absolute;bottom:5px;left:5px;
  display:flex;gap:3px;flex-wrap:wrap;max-width:92%;
}
#wtl .wt-gbadge{
  font-size:.44rem;padding:2px 5px;border-radius:2px;
  font-weight:900;color:rgba(255,255,255,.95);
  white-space:nowrap;backdrop-filter:blur(3px);
}
#wtl .wt-gb-chat      {background:rgba(180,20,100,.85);}
#wtl .wt-gb-romance   {background:rgba(160,30,130,.85);}
#wtl .wt-gb-bl        {background:rgba(80,30,160,.85);}
#wtl .wt-gb-adv       {background:rgba(20,80,160,.85);}
#wtl .wt-gb-dark      {background:rgba(30,20,40,.90);border:1px solid rgba(255,255,255,.15);}
#wtl .wt-gb-cyberpunk {background:rgba(20,100,180,.85);}
#wtl .wt-gb-fantasy   {background:rgba(100,20,160,.85);}
#wtl .wt-gb-horror    {background:rgba(40,0,0,.92);border:1px solid rgba(255,80,80,.2);}
#wtl .wt-gb-dungeon   {background:rgba(60,20,10,.90);border:1px solid rgba(255,255,255,.1);}
#wtl .wt-gb-idol      {background:rgba(200,80,20,.85);}
#wtl .wt-gb-action    {background:rgba(160,40,20,.85);}
#wtl .wt-gb-bar       {background:rgba(80,60,20,.85);}
#wtl .wt-gb-school    {background:rgba(20,120,60,.85);}
#wtl .wt-gb-wagei     {background:rgba(120,60,0,.85);}

/* カード情報 */
#wtl .wt-cinfo{padding:6px 8px 8px;background:var(--surf2);border-top:1px solid var(--bdr);}
#wtl .wt-ctitle{font-size:clamp(.58rem,.95vw,.7rem);font-weight:700;line-height:1.4;color:var(--txt);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.4em;margin-bottom:3px;}
#wtl .wt-cmeta{display:flex;align-items:center;gap:4px;font-size:.5rem;margin-bottom:2px;}
#wtl .wt-brand{color:var(--muted);font-weight:700;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
#wtl .wt-score{font-weight:900;font-size:.62rem;color:var(--s5);font-family:'Noto Serif JP',serif;}
#wtl .wt-cprice{font-size:.54rem;font-weight:700;color:#8030b0;}

/* FOOTER */
#wtl .wt-footer{padding:8px 18px;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;background:var(--surf);}
#wtl .wt-info{font-size:.6rem;color:var(--muted);font-weight:700;letter-spacing:.04em;}

/* TOOLTIP */
#wtl-tip{
  position:fixed;z-index:9999;pointer-events:none;
  background:#fff;border:1px solid rgba(80,40,100,.18);
  border-radius:8px;width:220px;padding:12px 14px;
  font-size:.63rem;line-height:1.6;
  box-shadow:0 8px 26px rgba(80,40,100,.18);
  opacity:0;transition:opacity .12s;
  font-family:'Noto Sans JP',sans-serif;
}
#wtl-tip.show{opacity:1;}
#wtl-tip .tt-title{font-family:'Noto Serif JP',serif;font-weight:900;font-size:.74rem;color:#1a1020;margin-bottom:5px;line-height:1.3;}
#wtl-tip .tt-row{color:#7a6888;margin:2px 0;}
#wtl-tip .tt-row b{color:#8030b0;}
#wtl-tip .tt-desc{color:#504060;margin-top:5px;line-height:1.5;font-size:.6rem;}
#wtl-tip .tt-cta{margin-top:7px;padding-top:5px;border-top:1px solid rgba(80,40,100,.1);color:#8030b0;font-size:.56rem;font-weight:700;letter-spacing:.04em;}

@media(max-width:600px){
  #wtl .wt-grid{grid-template-columns:repeat(2,1fr);gap:7px;}
  #wtl .wt-tab{padding:8px 8px;font-size:.62rem;}
  #wtl .wt-chip{font-size:.62rem;padding:3px 9px;}
}
@keyframes wt-rip{to{transform:translate(-50%,-50%) scale(4);opacity:0;}}