/* Dungeon Dive Crawler — 紹介ページ(CSP: style-src 'self' のため外部CSSのみ) */
@font-face{font-family:'DotGothic16';
  src:url('play/assets/fonts/DotGothic16.ttf') format('truetype'); font-display:swap;}
:root{
  --bg:#0b0a12; --panel:#1b1727; --line:#3b3458; --txt:#efeaf8; --dim:#a39ac0;
  --acc:#ffd36b; --acc2:#ff9d5c;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; color:var(--txt); background:var(--bg); line-height:1.75;
  font-family:'DotGothic16','Segoe UI','Hiragino Sans','Noto Sans JP','PingFang SC','Microsoft YaHei',sans-serif;
  -webkit-text-size-adjust:100%;}
a{color:var(--acc);}
img{max-width:100%; height:auto; image-rendering:pixelated;}
.wrap{max-width:1040px; margin:0 auto; padding:0 16px;}

/* ヘッダー */
.top{display:flex; align-items:center; gap:12px; padding:12px 0; flex-wrap:wrap;}
.top .brand{font-weight:800; letter-spacing:.06em; color:var(--txt); text-decoration:none; font-size:14px;}
.top .brand span{color:var(--acc);}
.langs{margin-left:auto; display:flex; gap:6px; flex-wrap:wrap;}
.langs a{font-size:12px; color:var(--dim); text-decoration:none; padding:3px 10px;
  border:1px solid var(--line); border-radius:12px;}
.langs a:hover{color:var(--txt); border-color:var(--acc);}
.langs a.on{color:var(--acc); border-color:var(--acc);}

/* ヒーロー */
.hero{position:relative; border-radius:14px; overflow:hidden; margin:6px 0 28px;
  border:3px solid #b8903166; box-shadow:0 0 0 1px #000, 0 20px 60px #000c;}
.hero img.bg{display:block; width:100%; aspect-ratio:16/9; object-fit:cover;}
.hero .ov{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; text-align:center; padding:16px;
  background:radial-gradient(70% 70% at 50% 50%, rgba(5,3,10,.25), rgba(5,3,10,.82));}
h1{margin:0; font-size:clamp(30px,6.4vw,64px); line-height:1.05; letter-spacing:.06em;
  background:linear-gradient(180deg,#ffe9a8 15%,var(--acc) 45%,var(--acc2) 85%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 0 #3d2c05) drop-shadow(0 6px 16px #000d);}
.tagline{margin:0; max-width:640px; font-size:clamp(13px,2.2vw,17px); text-shadow:0 2px 6px #000;}
.cta{display:inline-block; margin-top:8px; padding:14px 42px; font-size:clamp(17px,2.6vw,22px);
  color:var(--acc); text-decoration:none; letter-spacing:.1em; font-weight:800;
  background:linear-gradient(180deg,#5c4a17,#362b08);
  border:10px solid transparent; border-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAj0lEQVR4nGNgGOmAEYvYf3raycQwwIAR3ef/X66grYXiESh2MzEMMGDBJbFzeSdVLXKPLMcqzsQwWEMABlrnXGGgBFSn6OCVZ2IY7CEAA4ev/MZWZuAEtjqsRJUnTAwDDJhGHcAwGgUDDJhGHcAwGgVDpS6wJbJsH34hUE2gPh/yIcDIMNJbxYwMI71nNAoAg5AWt/6L8ZoAAAAASUVORK5CYII=') 10 round;
  image-rendering:pixelated; box-shadow:0 8px 24px #000c;
  animation:pulse 1.8s ease-in-out infinite;}
.cta:hover{filter:brightness(1.25);}
@keyframes pulse{0%,100%{box-shadow:0 8px 24px #000c, 0 0 14px #ffd36b22;}
  50%{box-shadow:0 8px 24px #000c, 0 0 32px #ffd36b66;}}
.cta-sub{font-size:12px; color:var(--dim); text-shadow:0 1px 3px #000;}

/* セクション */
section{margin:0 0 36px;}
h2{font-size:22px; margin:0 0 14px; display:flex; align-items:center; gap:10px; color:var(--acc);}
h2::before{content:""; width:4px; height:20px; border-radius:2px;
  background:linear-gradient(180deg,var(--acc),var(--acc2)); box-shadow:0 0 8px #ffd36b66;}
.panel{background:var(--panel); padding:18px 20px;
  border:10px solid transparent; border-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAkklEQVR4nGNgGOmAEYvYf3raycQwwIAR3efXdlXQ1EIttw4Uu5kYBhiw4JLYsnETVS3y8ffDKs7EMFhDAAaW7HjAQAmI8VDAK8/EMNhDAAYu3f2GrczACfSUuYgqT5gYBhgwjTqAYTQKBhgwjTqAYTQKhkpdoEdk2T78QiCGQH0+fEPAB0cbbtiFACPDSO8ZjQIACGUTSVDMHAYAAAAASUVORK5CYII=') 10 round;
  image-rendering:pixelated;}
.panel p{margin:0;}
.feats{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:14px;}
.feat{display:flex; gap:14px; align-items:flex-start; background:var(--panel); padding:14px;
  border:8px solid transparent; border-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAkklEQVR4nGNgGOmAEYvYf3raycQwwIAR3efXdlXQ1EIttw4Uu5kYBhiw4JLYsnETVS3y8ffDKs7EMFhDAAaW7HjAQAmI8VDAK8/EMNhDAAYu3f2GrczACfSUuYgqT5gYBhgwjTqAYTQKBhgwjTqAYTQKhkpdoEdk2T78QiCGQH0+fEPAB0cbbtiFACPDSO8ZjQIACGUTSVDMHAYAAAAASUVORK5CYII=') 10 round;
  image-rendering:pixelated;}
.feat img{width:52px; height:52px; flex:none; object-fit:contain;}
.feat h3{margin:0 0 4px; font-size:16px;}
.feat p{margin:0; font-size:13px; color:#d6d0e6;}
.shots{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px;}
.shots figure{margin:0;}
.shots img{display:block; width:100%; border:3px solid #3b3458; border-radius:8px;}
.shots figcaption{font-size:12px; color:var(--dim); margin-top:6px;}
ol.how{margin:0; padding-left:22px;}
ol.how li{margin:4px 0;}
.faq dt{font-weight:800; color:var(--txt); margin-top:10px;}
.faq dd{margin:2px 0 0; color:#d6d0e6;}
.cta-bottom{text-align:center; margin:10px 0 40px;}
footer{border-top:1px solid #2a2440; padding:18px 0 30px; font-size:12px; color:var(--dim);
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
footer a{color:var(--dim);}
@media (prefers-reduced-motion:reduce){ .cta{animation:none;} }

/* ランキング */
.lb ol{margin:0; padding:0; list-style:none; counter-reset:none;}
.lb li{display:flex; gap:12px; align-items:center; padding:6px 6px; border-bottom:1px dashed #2f2947;
  font-size:14px;}
.lb li:last-child{border-bottom:none;}
.lb .rn{width:28px; text-align:right; color:var(--dim);}
.lb li:nth-child(-n+3) .rn{color:var(--acc); font-weight:800;}
.lb .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lb .fl{color:var(--acc); min-width:52px; text-align:right;}
.lb .lv{color:var(--dim); min-width:46px; text-align:right;}
.lb .kl{color:var(--dim); min-width:40px; text-align:right;}
.lb .kl::before{content:"☠ ";}
.lb li.empty{justify-content:center; color:var(--dim); border:none;}
.lb .lbnote{margin:8px 0 0; font-size:12px; color:var(--dim);}