/* ============================================================
   ratgame.site Design System — 「MIDNIGHT CELLAR」 v1.1
   夜のドット絵世界 × クリーム紙面
   仕様書: DesignSystem/デザインシステム提案書.html（変更時はそちらも更新）
   使用フォント: DotGothic16 / Pixelify Sans（Google Fonts。読み込みは各ページ側で）
   ============================================================ */

:root{
  /* Color */
  --night-deep:#171921;
  --night:#262a34;
  --night-soft:#3a4150;
  --star:#edeff4;
  --dawn:#f2a54f;   /* 地平の灯（実写の天の川参考 7162452277 由来。控えめに使う） */
  --moon:#f2c94c;
  --moon-deep:#c79a2a;
  --wine:#a0284a;
  --wine-bright:#e05a83;
  --wine-deep:#6e1b34;
  --leaf:#3f9d5a;
  --paper:#fdf9f3;
  --paper-line:#e8dcc8;
  --ink:#33283a;
  --sub:#7d7168;
  /* Spacing（8pxグリッド） */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px; --s12:96px;
  /* Shadow（ぼかさない硬い落ち影のみ） */
  --shadow-hard:0 4px 0 rgba(23,25,33,.3);
  --shadow-hard-sm:0 2px 0 rgba(23,25,33,.3);
  /* 夜空上の淡色テキスト */
  --night-muted:#b6bdcb;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,sans-serif;
  background:var(--night);
  background-image:linear-gradient(180deg,#333947 0%,var(--night) 42%,var(--night-deep) 100%);
  background-attachment:fixed;
  color:var(--ink); line-height:1.85; font-size:15px;
}
.pix{font-family:"DotGothic16",sans-serif}
.pixen{font-family:"Pixelify Sans",sans-serif}
.wrap{max-width:920px;margin:0 auto;padding:0 16px}

/* ---------- 世界：星空・彗星・月・地面 ---------- */
.sky{position:relative;overflow:hidden}
.stars,.stars2,.stars3,.stars4{position:absolute;inset:0;pointer-events:none}
.stars{background-image:
  radial-gradient(1.5px 1.5px at 8% 22%, var(--star) 50%, transparent 51%),
  radial-gradient(2px 2px at 23% 64%, var(--star) 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 37% 15%, var(--star) 50%, transparent 51%),
  radial-gradient(2px 2px at 52% 48%, var(--star) 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 66% 12%, var(--star) 50%, transparent 51%),
  radial-gradient(2px 2px at 78% 58%, var(--star) 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 43% 71%, var(--star) 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 90% 30%, var(--star) 50%, transparent 51%);
  animation:twinkle 2.4s steps(2) infinite}
.stars2{background-image:
  radial-gradient(1.5px 1.5px at 14% 76%, var(--star) 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 31% 38%, var(--star) 50%, transparent 51%),
  radial-gradient(2px 2px at 45% 82%, var(--star) 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 60% 26%, var(--star) 50%, transparent 51%),
  radial-gradient(2px 2px at 71% 84%, var(--star) 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 85% 66%, var(--star) 50%, transparent 51%),
  radial-gradient(1.5px 1.5px at 5% 52%, var(--star) 50%, transparent 51%),
  radial-gradient(2px 2px at 95% 12%, var(--star) 50%, transparent 51%);
  animation:twinkle 3.1s steps(2) infinite reverse}
.stars3{opacity:.5;background-image:
  radial-gradient(1px 1px at 4% 12%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 11% 58%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 18% 30%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 27% 80%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 33% 8%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 41% 44%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 49% 18%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 56% 66%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 63% 36%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 70% 9%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 76% 74%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 83% 46%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 89% 88%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 96% 55%, var(--star) 50%, transparent 51%)}
.stars4{opacity:.4;background-image:
  radial-gradient(1px 1px at 2% 26%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 7% 68%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 13% 14%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 17% 48%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 22% 86%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 26% 33%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 30% 61%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 35% 22%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 39% 78%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 44% 52%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 48% 8%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 53% 38%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 57% 90%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 61% 58%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 65% 20%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 69% 72%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 74% 42%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 79% 16%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 83% 82%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 87% 50%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 92% 28%, var(--star) 50%, transparent 51%),
  radial-gradient(1px 1px at 97% 70%, var(--star) 50%, transparent 51%)}
@keyframes twinkle{50%{opacity:.25}}

.comet{position:absolute;top:64px;left:12%;width:110px;height:3px;pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(237,239,244,.75));
  transform:rotate(-18deg)}
.comet::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 8px, rgba(23,25,33,.55) 8px 11px)}
.comet::after{content:"";position:absolute;right:-3px;top:-2px;width:7px;height:7px;background:#fff;
  box-shadow:-2px 2px 0 rgba(237,239,244,.4)}

/* ドット絵の月（8×8ピクセル・1ドット=8px。要素の右下角が月の右上角） */
.pixmoon{position:absolute;width:8px;height:8px;background:transparent;pointer-events:none;
  box-shadow:
    -40px 0 0 var(--moon), -32px 0 0 var(--moon), -24px 0 0 var(--moon), -16px 0 0 var(--moon),
    -48px 8px 0 var(--moon), -40px 8px 0 var(--moon), -32px 8px 0 var(--moon), -24px 8px 0 var(--moon), -16px 8px 0 var(--moon), -8px 8px 0 var(--moon-deep),
    -56px 16px 0 var(--moon), -48px 16px 0 var(--moon), -40px 16px 0 var(--moon), -32px 16px 0 var(--moon-deep), -24px 16px 0 var(--moon), -16px 16px 0 var(--moon), -8px 16px 0 var(--moon), 0 16px 0 var(--moon-deep),
    -56px 24px 0 var(--moon), -48px 24px 0 var(--moon), -40px 24px 0 var(--moon), -32px 24px 0 var(--moon), -24px 24px 0 var(--moon), -16px 24px 0 var(--moon), -8px 24px 0 var(--moon), 0 24px 0 var(--moon-deep),
    -56px 32px 0 var(--moon), -48px 32px 0 var(--moon), -40px 32px 0 var(--moon-deep), -32px 32px 0 var(--moon), -24px 32px 0 var(--moon), -16px 32px 0 var(--moon), -8px 32px 0 var(--moon), 0 32px 0 var(--moon-deep),
    -56px 40px 0 var(--moon), -48px 40px 0 var(--moon), -40px 40px 0 var(--moon), -32px 40px 0 var(--moon), -24px 40px 0 var(--moon-deep), -16px 40px 0 var(--moon), -8px 40px 0 var(--moon-deep), 0 40px 0 var(--moon-deep),
    -48px 48px 0 var(--moon), -40px 48px 0 var(--moon), -32px 48px 0 var(--moon), -24px 48px 0 var(--moon), -16px 48px 0 var(--moon-deep), -8px 48px 0 var(--moon-deep),
    -40px 56px 0 var(--moon-deep), -32px 56px 0 var(--moon-deep), -24px 56px 0 var(--moon-deep), -16px 56px 0 var(--moon-deep)}

/* 地面帯（ぶどうの茂み＋レンガ）— ドット絵タイル（24×16px単位・1ドット=4px）
   上4段=角ばった茂み（ぶどうの実の紫入り）、下12段=段違いレンガ3トーン＋目地 */
.ground{position:relative;height:80px;image-rendering:pixelated;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20' shape-rendering='crispEdges'%3E%3Crect x='0' y='8' width='24' height='12' fill='%235b3a1a'/%3E%3Crect x='0' y='8' width='5' height='2' fill='%238a5a2b'/%3E%3Crect x='6' y='8' width='5' height='2' fill='%237a4e24'/%3E%3Crect x='12' y='8' width='5' height='2' fill='%2395653a'/%3E%3Crect x='18' y='8' width='5' height='2' fill='%238a5a2b'/%3E%3Crect x='-3' y='11' width='5' height='2' fill='%237a4e24'/%3E%3Crect x='3' y='11' width='5' height='2' fill='%2395653a'/%3E%3Crect x='9' y='11' width='5' height='2' fill='%238a5a2b'/%3E%3Crect x='15' y='11' width='5' height='2' fill='%237a4e24'/%3E%3Crect x='21' y='11' width='5' height='2' fill='%238a5a2b'/%3E%3Crect x='0' y='14' width='5' height='2' fill='%2395653a'/%3E%3Crect x='6' y='14' width='5' height='2' fill='%238a5a2b'/%3E%3Crect x='12' y='14' width='5' height='2' fill='%237a4e24'/%3E%3Crect x='18' y='14' width='5' height='2' fill='%2395653a'/%3E%3Crect x='-3' y='17' width='5' height='2' fill='%238a5a2b'/%3E%3Crect x='3' y='17' width='5' height='2' fill='%237a4e24'/%3E%3Crect x='9' y='17' width='5' height='2' fill='%2395653a'/%3E%3Crect x='15' y='17' width='5' height='2' fill='%238a5a2b'/%3E%3Crect x='21' y='17' width='5' height='2' fill='%237a4e24'/%3E%3Crect x='0' y='7' width='24' height='1' fill='%232c7a44'/%3E%3Crect x='2' y='3' width='4' height='1' fill='%234fb56b'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%234fb56b'/%3E%3Crect x='0' y='5' width='9' height='1' fill='%233f9d5a'/%3E%3Crect x='0' y='6' width='10' height='1' fill='%233f9d5a'/%3E%3Crect x='6' y='4' width='2' height='1' fill='%233f9d5a'/%3E%3Crect x='7' y='5' width='2' height='1' fill='%232c7a44'/%3E%3Crect x='8' y='6' width='2' height='1' fill='%232c7a44'/%3E%3Crect x='4' y='4' width='1' height='1' fill='%23a05ab5'/%3E%3Crect x='2' y='6' width='1' height='1' fill='%238a4a9a'/%3E%3Crect x='13' y='2' width='4' height='1' fill='%234fb56b'/%3E%3Crect x='12' y='3' width='7' height='1' fill='%234fb56b'/%3E%3Crect x='11' y='4' width='9' height='1' fill='%233f9d5a'/%3E%3Crect x='11' y='5' width='10' height='1' fill='%233f9d5a'/%3E%3Crect x='11' y='6' width='11' height='1' fill='%232c7a44'/%3E%3Crect x='17' y='3' width='2' height='1' fill='%233f9d5a'/%3E%3Crect x='18' y='4' width='2' height='1' fill='%232c7a44'/%3E%3Crect x='19' y='5' width='2' height='1' fill='%232c7a44'/%3E%3Crect x='15' y='3' width='1' height='1' fill='%23a05ab5'/%3E%3Crect x='13' y='5' width='1' height='1' fill='%238a4a9a'/%3E%3Crect x='16' y='5' width='1' height='1' fill='%238a4a9a'/%3E%3Crect x='22' y='5' width='2' height='1' fill='%234fb56b'/%3E%3Crect x='22' y='6' width='2' height='1' fill='%233f9d5a'/%3E%3C/svg%3E") repeat-x bottom / 96px 80px}

/* ---------- ナビ ---------- */
.site-nav{position:relative;z-index:20;background:var(--night-deep);border-bottom:2px solid #000}
.site-nav .in{max-width:920px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:4px;
  overflow-x:auto;white-space:nowrap}
.site-nav .logo{font-family:"DotGothic16";color:var(--star);font-size:14.5px;letter-spacing:.08em;
  margin-right:auto;text-decoration:none}
.site-nav .logo .m{color:var(--moon)}
.site-nav a.item{font-family:"DotGothic16";font-size:12.5px;color:var(--night-muted);text-decoration:none;
  padding:4px 11px;letter-spacing:.06em}
.site-nav a.item:hover{color:var(--star)}
.site-nav a.item.active{color:var(--moon);box-shadow:0 3px 0 var(--moon)}

/* ---------- ヒーロー ---------- */
.hero{position:relative;text-align:center;padding:72px 18px 0;color:var(--star)}
.hero .en{font-family:"Pixelify Sans";letter-spacing:.3em;font-size:13px;color:var(--wine-bright)}
.hero h1{font-family:"DotGothic16";font-size:clamp(26px,5vw,40px);letter-spacing:.1em;margin:10px 0 12px;
  text-shadow:3px 3px 0 var(--night-deep)}
.hero .desc{font-size:13.5px;color:var(--night-muted);margin-bottom:26px}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:52px;position:relative;z-index:1}
.hero .pixmoon{top:30px;right:min(9vw,120px)}
.blink{display:inline-block;animation:blink 1.1s steps(1) infinite;color:var(--moon)}
@keyframes blink{50%{opacity:0}}

/* ---------- ボタン ---------- */
.btn{display:inline-block;text-decoration:none;font-family:"DotGothic16";font-size:14px;
  letter-spacing:.12em;padding:10px 26px;border-radius:2px;cursor:pointer;
  transition:transform .1s, box-shadow .1s;border:2px solid var(--night-deep)}
.btn-primary{background:var(--moon);color:var(--night-deep);box-shadow:0 4px 0 var(--moon-deep)}
.btn-primary:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--moon-deep)}
.btn-wine{background:var(--wine);color:var(--paper);border-color:var(--wine-deep);box-shadow:0 4px 0 var(--wine-deep)}
.btn-wine:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--wine-deep)}
.btn-ghost-dark{background:transparent;color:var(--star);border-color:var(--star);box-shadow:none}
.btn-ghost-dark:hover{background:rgba(237,239,244,.14)}
.btn-ghost{background:#fff;color:var(--wine);border-color:var(--wine);box-shadow:var(--shadow-hard-sm)}
.btn-ghost:hover{background:var(--wine);color:#fff}

/* ---------- 紙面パネル ---------- */
.panel{background:var(--paper);border:3px solid var(--night-deep);border-radius:4px;
  box-shadow:var(--shadow-hard);padding:var(--s4);margin-bottom:var(--s6);
  position:relative;z-index:1}
.sec-title{font-family:"DotGothic16";font-size:20px;color:var(--wine);letter-spacing:.06em;
  padding-bottom:10px;border-bottom:3px solid var(--paper-line);margin-bottom:var(--s2);scroll-margin-top:70px}
.sec-lead{font-size:13px;color:var(--sub);margin-bottom:var(--s2)}
.sec-sub{font-family:"DotGothic16";font-size:15.5px;color:var(--night);letter-spacing:.04em;margin:var(--s4) 0 12px;
  display:flex;align-items:center;gap:8px;scroll-margin-top:120px}
.sec-sub .bar{flex:1;height:2px;background:var(--paper-line)}

/* ---------- カード ---------- */
.card{display:block;background:#fff;border:2px solid var(--night-deep);border-radius:2px;
  box-shadow:var(--shadow-hard-sm);padding:14px 18px;text-decoration:none;color:inherit;
  transition:transform .1s, box-shadow .1s}
.card:hover{transform:translateY(-2px);box-shadow:0 4px 0 rgba(23,25,33,.3)}
.tag{display:inline-block;font-family:"DotGothic16";font-size:11px;letter-spacing:.08em;
  background:var(--wine);color:#fff;padding:1px 9px;border-radius:2px}

/* ---------- 記事本文 ----------
   紙面パネルの中で使う。長文の可読性が最優先（ピクセルフォントは見出しのみ） */
.article{max-width:36em}
.article-head{margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:3px solid var(--paper-line)}
.article-head h1{font-family:"DotGothic16";font-size:clamp(20px,3.4vw,28px);color:var(--wine);
  letter-spacing:.05em;line-height:1.55}
.article-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;
  font-size:12px;color:var(--sub)}
.article h2{font-family:"DotGothic16";font-size:17px;color:var(--night);letter-spacing:.04em;
  margin:var(--s6) 0 12px;scroll-margin-top:70px}
.article h2::before{content:"▶ ";color:var(--wine-bright);font-size:.8em}
.article h3{font-family:"DotGothic16";font-size:15px;color:var(--night);margin:var(--s4) 0 10px}
.article p{margin:0 0 var(--s2)}
.article strong{color:var(--wine-deep);font-weight:700}
.article a{color:var(--wine);text-decoration:underline;text-underline-offset:2px}
.article a:hover{color:var(--wine-bright)}
.article ul,.article ol{margin:0 0 var(--s2) 1.4em}
.article li{margin-bottom:6px}

/* 引用：ワイン色の太い縦罫＋硬い影 */
.article blockquote{margin:var(--s3) 0;padding:14px 18px;background:#fbecf1;
  border:2px solid var(--wine);border-left-width:6px;border-radius:2px;
  box-shadow:var(--shadow-hard-sm);color:var(--wine-deep);font-size:14.5px}

/* 図版：実写は必ずこの「額縁」に入れる（角丸なし・硬い影） */
.figure{margin:var(--s3) 0}
.figure img{display:block;width:100%;border:2px solid var(--night-deep);border-radius:2px;
  box-shadow:var(--shadow-hard)}
.figure figcaption{font-size:11.5px;color:var(--sub);margin-top:8px}
.figure-placeholder{display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:160px;padding:var(--s3);margin:var(--s3) 0;font-size:12.5px;color:var(--sub);
  background:#f6efe2;border:2px dashed #cbbfa6;border-radius:2px}

/* 記事下のナビ */
.back-link{display:inline-block;font-family:"DotGothic16";font-size:12.5px;letter-spacing:.06em;
  color:var(--wine);text-decoration:none}
.back-link:hover{color:var(--wine-bright)}
.article-foot{margin-top:var(--s6);padding-top:var(--s3);border-top:3px solid var(--paper-line)}

/* ---------- チップ・フォーム ---------- */
.chip{font-family:"DotGothic16";font-size:12px;letter-spacing:.04em;text-decoration:none;
  color:var(--night);background:#fff;border:2px solid var(--night-deep);border-radius:2px;
  padding:3px 11px;white-space:nowrap;box-shadow:var(--shadow-hard-sm);
  transition:transform .1s, box-shadow .1s;display:inline-block}
.chip:hover{background:var(--moon);border-color:var(--moon-deep);transform:translateY(1px);
  box-shadow:0 1px 0 rgba(23,25,33,.3)}
.input{width:100%;font-size:14px;font-family:inherit;padding:10px 16px;
  border:2px solid var(--night-deep);border-radius:2px;background:#fff;color:var(--ink);
  outline:none;box-shadow:var(--shadow-hard-sm)}
.input:focus{border-color:var(--wine);box-shadow:0 2px 0 var(--wine-deep)}
/* 検索欄の中に虫めがねを置く */
.search-wrap{position:relative}
.search-wrap .pi{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none}
.search-wrap .input{padding-left:36px}

/* アイコンと文字の間 */
.chip .pi,.sec-sub .pi,.site-nav .logo .pi{margin-right:2px}
.sec-sub .pi{margin-right:6px}

/* ---------- フッター ---------- */
.site-footer{position:relative;text-align:center;padding:40px 16px 30px;color:#8d95a6;font-size:12px}
.site-footer .pix{color:var(--star);letter-spacing:.1em}

/* ---------- レスポンシブ／モーション ---------- */
@media (max-width:640px){
  .panel{padding:var(--s3) var(--s2)}
  .hero{padding-top:56px}
  .hero .cta{margin-bottom:40px}
  .hero .comet{top:30px;left:2%;width:70px}
  .hero .pixmoon{top:16px;right:12px;transform:scale(.6);transform-origin:top right}
  .ground{height:32px;background-size:48px 32px}
}
@media (prefers-reduced-motion:reduce){
  .stars,.stars2,.blink{animation:none !important}
}