/* ══════════════════════════════════
   アニメーションエロゲー ティアリスト
   カラーテーマ: 深みのある朱赤 × グレー
══════════════════════════════════ */
#atl{
  --bg:     #ebebed;
  --surf:   #ffffff;
  --surf2:  #f6f6f8;
  --surf3:  #eeeeef;
  --hd-bg:  #1a1a22;
  --tab-bg: #232330;
  --fb-bg:  #f0f0f3;
  --bdr:    rgba(0,0,0,.11);
  --bdr2:   rgba(0,0,0,.18);
  --txt:    #181818;
  --muted:  #606068;
  --s5:     #d4210a;
  --s4:     #c27800;
  --s-c:    #1a7a40;
  --a-c:    #1452a0;
  --b-c:    #4a4a60;
  --acc:    #d4210a;
  --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 */
#atl .at-hd{
  padding:16px 20px 14px;
  background:var(--hd-bg);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  border-bottom:2px solid rgba(212,33,10,.4);
  position:relative;overflow:hidden;
}
#atl .at-hd::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 85% 50%,rgba(212,33,10,.08) 0%,transparent 60%);
  pointer-events:none;
}
#atl .at-badge{
  font-size:.55rem;font-weight:900;letter-spacing:.1em;
  color:var(--hd-bg);background:#ff8060;
  padding:3px 8px;border-radius:2px;white-space:nowrap;
}
#atl .at-ttl{
  font-family:'Noto Serif JP',serif;
  font-size:1.05rem;font-weight:900;color:#fff;letter-spacing:.04em;
}
#atl .at-sub{font-size:.58rem;color:rgba(255,255,255,.5);margin-left:auto;}
 
/* TAB BAR */
#atl .at-tabs{
  display:flex;border-bottom:1px solid var(--bdr2);
  background:var(--tab-bg);padding:0 16px;
}
#atl .at-tab{
  padding:10px 14px;font-size:.7rem;font-weight:900;
  border:none;background:none;cursor:pointer;color:rgba(255,255,255,.45);
  border-bottom:3px solid transparent;margin-bottom:-1px;
  transition:color .14s,border-color .14s;letter-spacing:.06em;white-space:nowrap;
}
#atl .at-tab:hover{color:rgba(255,255,255,.75);}
#atl .at-tab.active{color:#fff;border-bottom-color:var(--acc);}
#atl .at-tab[data-tab="S5"].active{color:#ff8060;border-bottom-color:var(--s5);}
#atl .at-tab[data-tab="S4"].active{color:#ffc040;border-bottom-color:var(--s4);}
#atl .at-tab[data-tab="S"].active{color:#60e090;border-bottom-color:var(--s-c);}
#atl .at-tab[data-tab="A"].active{color:#80b0ff;border-bottom-color:var(--a-c);}
#atl .at-tab[data-tab="B"].active{color:#aaaacc;border-bottom-color:var(--b-c);}
 
/* FILTER BAR */
#atl .at-fbar{
  padding:11px 18px;border-bottom:2px solid var(--bdr2);
  display:flex;flex-direction:column;gap:8px;
  background:var(--fb-bg);
}
#atl .at-frow{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:2px 0;}
#atl .at-frow+.at-frow{border-top:1px solid rgba(0,0,0,.07);padding-top:7px;}
#atl .at-flabel{
  font-size:.58rem;font-weight:900;color:#fff;
  background:#3a1a10;padding:2px 7px;border-radius:2px;
  min-width:44px;text-align:center;flex-shrink:0;letter-spacing:.06em;
}
#atl .at-chip{
  font-size:.68rem;font-weight:700;padding:4px 12px;border-radius:20px;
  cursor:pointer;border:1.5px solid rgba(0,0,0,.2);
  color:#555;background:#fff;transition:all .13s;white-space:nowrap;
}
#atl .at-chip:hover{border-color:rgba(0,0,0,.42);color:#111;}
#atl .at-chip.on{
  background:#c01a08;border-color:#c01a08;color:#fff;font-weight:900;
  box-shadow:0 2px 7px rgba(192,26,8,.22);
}
#atl .at-chip.new-chip{border-color:rgba(224,88,0,.4);color:var(--new);}
#atl .at-chip.new-chip.on{background:var(--new);border-color:var(--new);color:#fff;}
#atl .at-clr{
  font-size:.66rem;font-weight:700;padding:4px 12px;border-radius:20px;
  cursor:pointer;border:1.5px solid rgba(0,0,0,.14);
  color:var(--muted);background:transparent;
  transition:all .13s;white-space:nowrap;margin-left:auto;
}
#atl .at-clr:hover{border-color:rgba(0,0,0,.36);color:#222;}
#atl .at-finfo{
  display:none;font-size:.6rem;color:#a01008;font-weight:700;
  padding:4px 18px;border-bottom:1px solid rgba(192,26,8,.12);
  background:rgba(192,26,8,.04);letter-spacing:.04em;
}
#atl.filtered .at-finfo{display:block;}
 
/* RANK SECTION */
#atl .at-rank{border-bottom:1px solid var(--bdr);background:var(--bg);}
#atl .at-rank:last-child{border-bottom:none;}
#atl .at-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;
}
#atl .at-rank-hd:hover{background:#f4f4f6;}
#atl .at-rank[data-rank="S5"] .at-rank-hd{border-left:4px solid var(--s5);}
#atl .at-rank[data-rank="S4"] .at-rank-hd{border-left:4px solid var(--s4);}
#atl .at-rank[data-rank="S"]  .at-rank-hd{border-left:4px solid var(--s-c);}
#atl .at-rank[data-rank="A"]  .at-rank-hd{border-left:4px solid var(--a-c);}
#atl .at-rank[data-rank="B"]  .at-rank-hd{border-left:4px solid var(--b-c);}
#atl .at-rank-label{font-family:'Noto Serif JP',serif;font-size:.88rem;font-weight:900;letter-spacing:.08em;min-width:26px;}
#atl .at-rank[data-rank="S5"] .at-rank-label{color:var(--s5);}
#atl .at-rank[data-rank="S4"] .at-rank-label{color:var(--s4);}
#atl .at-rank[data-rank="S"]  .at-rank-label{color:var(--s-c);}
#atl .at-rank[data-rank="A"]  .at-rank-label{color:var(--a-c);}
#atl .at-rank[data-rank="B"]  .at-rank-label{color:var(--b-c);}
#atl .at-rank-desc{font-size:.63rem;color:var(--muted);font-weight:700;flex:1;}
#atl .at-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);}
#atl .at-rank-tog{font-size:.48rem;color:var(--muted);transition:transform .2s;margin-left:4px;}
#atl .at-rank.collapsed .at-rank-tog{transform:rotate(-90deg);}
#atl .at-rank.collapsed .at-grid{display:none;}
 
/* GRID 4列 */
#atl .at-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;padding:12px 14px 14px;background:var(--bg);
}
 
/* CARD */
#atl .at-card{
  position:relative;cursor:pointer;border-radius:6px;overflow:hidden;
  background:var(--surf);border:1px solid var(--bdr);
  box-shadow:0 1px 5px rgba(0,0,0,.08);
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
#atl .at-card:hover{
  transform:translateY(-4px);border-color:rgba(212,33,10,.3);
  box-shadow:0 8px 22px rgba(0,0,0,.15);
}
#atl .at-card.dim{display:none;}
 
/* カバー 2:3 */
#atl .at-cover{width:100%;aspect-ratio:16/9;overflow:hidden;background:#e0e0e2;position:relative;}
#atl .at-cover img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;opacity:0;transition:opacity .4s;}
 
/* NEWバッジ */
#atl .at-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;
}
 
/* ジャンルバッジ */
#atl .at-gbadges{
  position:absolute;bottom:5px;left:5px;
  display:flex;gap:3px;flex-wrap:wrap;max-width:92%;
}
#atl .at-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);
}
#atl .at-gb-puzzle    {background:rgba(20,120,60,.85);}
#atl .at-gb-sim       {background:rgba(80,40,160,.85);}
#atl .at-gb-maid      {background:rgba(180,40,100,.85);}
#atl .at-gb-live2d    {background:rgba(200,60,20,.88);}
#atl .at-gb-rpg       {background:rgba(20,80,180,.85);}
#atl .at-gb-action    {background:rgba(160,30,20,.85);}
#atl .at-gb-chokyo    {background:rgba(40,10,10,.92);border:1px solid rgba(255,80,40,.3);}
#atl .at-gb-adv       {background:rgba(20,60,140,.85);}
#atl .at-gb-cosplay   {background:rgba(160,80,160,.85);}
#atl .at-gb-fantasy   {background:rgba(80,20,140,.85);}
#atl .at-gb-harem     {background:rgba(180,100,20,.85);}
#atl .at-gb-imouto    {background:rgba(200,40,120,.85);}
#atl .at-gb-romance   {background:rgba(160,30,60,.85);}
#atl .at-gb-school    {background:rgba(20,100,40,.85);}
#atl .at-gb-voyeur    {background:rgba(30,30,50,.92);border:1px solid rgba(255,255,255,.12);}
#atl .at-gb-3dcg      {background:rgba(0,100,160,.85);}
#atl .at-gb-charakuri {background:rgba(0,80,120,.85);}
#atl .at-gb-video     {background:rgba(40,40,40,.90);}
#atl .at-gb-sisters   {background:rgba(140,40,80,.85);}
#atl .at-gb-mahjong   {background:rgba(120,80,0,.85);}
#atl .at-gb-strip     {background:rgba(160,60,20,.85);}
#atl .at-gb-comedy    {background:rgba(20,120,80,.85);}
 
/* カード情報 */
#atl .at-cinfo{padding:6px 8px 8px;background:var(--surf2);border-top:1px solid var(--bdr);}
#atl .at-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;}
#atl .at-cmeta{display:flex;align-items:center;gap:4px;font-size:.5rem;margin-bottom:2px;}
#atl .at-brand{color:var(--muted);font-weight:700;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
#atl .at-score{font-weight:900;font-size:.62rem;color:var(--s5);font-family:'Noto Serif JP',serif;}
#atl .at-cprice{font-size:.54rem;font-weight:700;color:#a01008;}
 
/* FOOTER */
#atl .at-footer{padding:8px 18px;border-top:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;background:var(--surf);}
#atl .at-info{font-size:.6rem;color:var(--muted);font-weight:700;letter-spacing:.04em;}
 
/* TOOLTIP */
#atl-tip{
  position:fixed;z-index:9999;pointer-events:none;
  background:#fff;border:1px solid rgba(0,0,0,.14);
  border-radius:8px;width:220px;padding:12px 14px;
  font-size:.63rem;line-height:1.6;
  box-shadow:0 8px 26px rgba(0,0,0,.16);
  opacity:0;transition:opacity .12s;
}
#atl-tip.show{opacity:1;}
#atl-tip .tt-title{font-family:'Noto Serif JP',serif;font-weight:900;font-size:.74rem;color:#181818;margin-bottom:5px;line-height:1.3;}
#atl-tip .tt-row{color:#666;margin:2px 0;}
#atl-tip .tt-row b{color:#c01a08;}
#atl-tip .tt-desc{color:#444;margin-top:5px;line-height:1.5;font-size:.6rem;}
#atl-tip .tt-cta{margin-top:7px;padding-top:5px;border-top:1px solid rgba(0,0,0,.08);color:#c01a08;font-size:.56rem;font-weight:700;letter-spacing:.04em;}
 
@media(max-width:600px){
  #atl .at-grid{grid-template-columns:repeat(2,1fr);gap:7px;}
  #atl .at-tab{padding:8px 8px;font-size:.62rem;}
  #atl .at-chip{font-size:.62rem;padding:3px 9px;}
}
@keyframes at-rip{to{transform:translate(-50%,-50%) scale(4);opacity:0;}}