/*
Theme Name: ハメFuns
Theme URI: https://xxxhamefuns.com/
Author: oh-Yesman
Description: MGS作品レビュー用のダークテーマ。記事ページ・トップ（人気ランキング＋一覧）・関連作品・スマホ追従バー・ライトボックスを内蔵。差し色は購入動線のみ。記事本文のmgs-クラスをそのまま整形する。
Version: 0.6
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: hamefuns
*/

:root{
  --bg:#14161a;--surface:#1c1f25;--surface2:#23272e;--line:#2e333b;
  --text:#e9e7e2;--muted:#969ca5;--badge-fg:#d9c8a4;--badge-line:#473f2e;
  --accent:#ff7a1a;--accent-press:#c75e08;--pink:#e6005a;--star:#ffb020;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--text);
  font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN",sans-serif;
  font-size:15px;line-height:1.85;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;-webkit-user-drag:none;-webkit-touch-callout:none;}
a{color:inherit;text-decoration:none;}

/* 共通ヘッダー */
.site-head{position:sticky;top:0;z-index:50;background:rgba(16,18,21,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.site-head .inner{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:10px;padding:11px 16px;}
.logo{font-weight:900;font-size:20px;letter-spacing:.04em;color:var(--text);}
.logo .sub{font-weight:500;font-size:11px;color:var(--muted);margin-left:6px;letter-spacing:.08em;}
.site-head .search{margin-left:auto;display:flex;align-items:center;gap:6px;
  background:var(--surface2);border:1px solid var(--line);border-radius:20px;padding:6px 12px;}
.site-head .search input{background:none;border:none;outline:none;color:var(--text);font-size:13px;width:108px;}
.site-head .search input::placeholder{color:#6f757d;}
.site-head .search button{background:none;border:none;color:#6f757d;cursor:pointer;font-size:13px;padding:0;line-height:1;}

.wrap{max-width:680px;margin:0 auto;padding:18px 16px 40px;}
.wrap-wide{max-width:760px;margin:0 auto;padding:16px 14px 48px;}

/* 記事見出し */
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px;letter-spacing:.06em;margin-bottom:10px;}
.eyebrow .cat{color:var(--accent);font-weight:700;}
h1.entry-title{font-size:21px;line-height:1.5;font-weight:700;margin:0 0 16px;letter-spacing:.01em;}

/* 記事本文 mgs- クラス */
.mgs-pr{font-size:12px;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:7px 11px;margin:0 0 16px;}
.mgs-badges{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px;}
.mgs-badge{font-size:12px;color:var(--badge-fg);border:1px solid var(--badge-line);background:#211d16;border-radius:4px;padding:4px 11px;letter-spacing:.02em;}
.mgs-badge:hover{background:#2c2618;}

/* 動画ボタン：中央に赤丸▶だけ。サイズ固定で巨大化を矯正、文字は隠す */
.mgs-video-btn{position:relative;display:block;width:100%;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#0e1013;line-height:0;margin:0 auto 20px;max-width:560px;}
.mgs-video-btn img{display:block;width:100%;height:auto;}
.mgs-play-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.mgs-play-circle{box-sizing:border-box;width:70px;height:70px;min-width:70px;max-width:70px;border-radius:50%;
  background:var(--pink);border:3px solid rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.45);transition:transform .15s,background .2s;}
.mgs-play-circle::before{content:"";display:block;width:0;height:0;margin-left:5px;
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;}
.mgs-video-btn:hover .mgs-play-circle{transform:scale(1.06);background:#ff1f72;}
.mgs-play-label{display:none;}

.mgs-body{margin:0 0 22px;font-size:15px;line-height:1.95;color:#dcdad4;}
.mgs-body p{margin:0 0 1em;}
.mgs-memo{border-left:3px solid var(--accent);background:var(--surface);border-radius:0 8px 8px 0;padding:12px 14px;margin:0 0 22px;font-size:13.5px;color:#c9cdd3;}
.mgs-memo b{color:#ffe9a0;font-weight:700;}

.mgs-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 24px;}
.mgs-thumb{aspect-ratio:16/10;border-radius:6px;overflow:hidden;cursor:zoom-in;border:1px solid var(--line);background:#171a1f;display:block;}
.mgs-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .15s;}
.mgs-thumb:hover img{transform:scale(1.05);}

.mgs-info{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 26px;border:1px solid var(--line);border-radius:8px;overflow:hidden;}
.mgs-info tr+tr{border-top:1px solid var(--line);}
.mgs-info th{text-align:left;color:var(--muted);background:var(--surface);padding:10px 12px;width:84px;white-space:nowrap;vertical-align:top;font-weight:500;}
.mgs-info td{padding:10px 12px;color:var(--text);}

.mgs-buy{display:block;text-align:center;background:var(--accent);color:#fff;font-weight:700;font-size:16px;padding:15px;border-radius:10px;letter-spacing:.02em;box-shadow:0 3px 0 var(--accent-press);margin:18px 0;}
.mgs-buy:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-press);}
.mgs-buy .small{display:block;font-size:11px;font-weight:500;opacity:.9;margin-top:2px;}

.mgs-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(14,15,18,.96);border-top:1px solid var(--line);padding:9px 14px;display:none;}
.mgs-sticky a{display:block;max-width:680px;margin:0 auto;text-align:center;background:var(--pink);color:#fff;font-weight:700;padding:13px;border-radius:9px;font-size:15px;}
@media(max-width:768px){.mgs-sticky{display:block;}body.single-post{padding-bottom:72px;}}

/* 関連作品 */
.related{margin:34px 0 0;}
.related h2{font-size:16px;font-weight:700;margin:0 0 4px;}
.related .lead{font-size:12.5px;color:var(--muted);margin:0 0 14px;}
.rgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.rcard{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:block;transition:border-color .15s,transform .15s;}
.rcard:hover{border-color:#454c57;transform:translateY(-2px);}
.rcard .ph{aspect-ratio:16/10;background:#171a1f;display:flex;align-items:center;justify-content:center;color:#5b626c;font-size:11px;}
.rcard .ph img{width:100%;height:100%;object-fit:cover;}
.rcard .meta{padding:9px 10px 11px;}
.rcard .rt{font-size:12.5px;line-height:1.5;color:var(--text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 6px;height:2.95em;}
.rcard .rb{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--muted);}
.rcard .rstar{color:var(--star);}

/* トップ／一覧 */
.sec-head{display:flex;align-items:baseline;gap:10px;margin:26px 2px 14px;}
.sec-head h2{font-size:17px;font-weight:700;margin:0;letter-spacing:.02em;}
.sec-head .en{font-size:11px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;}
.sec-head .more{margin-left:auto;font-size:12px;color:var(--muted);}

.rank{display:flex;flex-direction:column;gap:10px;}
.rank-item{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;transition:border-color .15s,transform .15s;}
.rank-item:hover{border-color:#454c57;transform:translateY(-1px);}
.rank-no{flex:none;width:30px;text-align:center;font-weight:900;font-size:20px;font-style:italic;color:#4b515b;line-height:1;}
.rank-item:nth-child(1) .rank-no{color:var(--accent);}
.rank-item:nth-child(2) .rank-no{color:#d8b15a;}
.rank-item:nth-child(3) .rank-no{color:#b07a4a;}
.rank-thumb{flex:none;width:104px;aspect-ratio:16/10;border-radius:6px;overflow:hidden;background:#171a1f;}
.rank-thumb img{width:100%;height:100%;object-fit:cover;}
.rank-meta{min-width:0;}
.rank-meta .rt{font-size:13.5px;line-height:1.45;margin:0 0 5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.rank-meta .rb{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--muted);}
.rank-meta .rstar{color:var(--star);}
.rank-meta .tag{color:var(--badge-fg);border:1px solid var(--badge-line);background:#211d16;border-radius:3px;padding:1px 7px;font-size:10.5px;}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:9px;overflow:hidden;transition:border-color .15s,transform .15s;}
.card:hover{border-color:#454c57;transform:translateY(-2px);}
.card .ph{aspect-ratio:16/11;background:#171a1f;position:relative;}
.card .ph img{width:100%;height:100%;object-fit:cover;}
.card .ph .score{position:absolute;left:6px;top:6px;background:rgba(10,11,13,.7);color:var(--star);font-size:10.5px;padding:2px 6px;border-radius:4px;border:1px solid var(--line);}
.card .meta{padding:8px 9px 10px;}
.card .ct{font-size:12px;line-height:1.45;margin:0 0 6px;height:2.9em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card .cb{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;color:var(--muted);}
.card .cb .num{color:#7b818a;}

.pagenav{text-align:center;margin:24px 0 0;}
.pagenav a,.pagenav span{display:inline-block;background:var(--surface2);border:1px solid var(--line);color:var(--text);padding:9px 14px;border-radius:9px;font-size:14px;margin:4px;}
.pagenav .current{background:var(--accent);border-color:var(--accent);color:#fff;}

.page-title{font-size:18px;font-weight:700;margin:8px 2px 4px;}
.page-title .en{font-size:11px;color:var(--muted);letter-spacing:.14em;margin-left:8px;}
.empty-note{color:var(--muted);font-size:13.5px;text-align:center;padding:30px 10px;border:1px dashed var(--line);border-radius:10px;margin:14px 0;}

/* フッター */
.foot{border-top:1px solid var(--line);margin-top:40px;padding:22px 0 8px;text-align:center;color:var(--muted);font-size:12px;}
.foot .l{display:flex;gap:16px;justify-content:center;margin-bottom:10px;flex-wrap:wrap;}
.foot .age{font-size:11px;color:#6b7178;margin-top:4px;}

/* ライトボックス */
.lb{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.94);display:none;align-items:center;justify-content:center;}
.lb.open{display:flex;}
.lb img{max-width:92vw;max-height:88vh;width:auto;height:auto;border-radius:6px;}
.lb .x{position:absolute;top:14px;right:18px;color:#fff;font-size:32px;line-height:1;background:none;border:none;cursor:pointer;}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:34px;background:rgba(0,0,0,.3);border:none;cursor:pointer;padding:10px 15px;border-radius:8px;}
.lb .prev{left:10px;}.lb .next{right:10px;}
.lb .count{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#cfd3d8;font-size:13px;}

@media(max-width:480px){
  .mgs-thumbs{grid-template-columns:repeat(2,1fr);}
  .grid{gap:7px;}
  h1.entry-title{font-size:19px;}
  .rank-thumb{width:88px;}
}

/* ===== サンプル画像グリッドの強制（他CSS/キャッシュ/旧プラグインに勝たせる） ===== */
.entry-content .mgs-thumbs,
.mgs-product .mgs-thumbs{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:8px !important;
}
.entry-content .mgs-thumb,
.mgs-product .mgs-thumb{
  width:auto !important;
  aspect-ratio:16/10 !important;
  height:auto !important;
  overflow:hidden !important;
  border-radius:6px;
  display:block !important;
}
.entry-content .mgs-thumb img,
.mgs-product .mgs-thumb img{
  width:100% !important;
  height:100% !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  display:block !important;
}
@media(max-width:480px){
  .entry-content .mgs-thumbs,
  .mgs-product .mgs-thumbs{grid-template-columns:repeat(2,1fr) !important;}
}

/* ===== 追従バーの中に紛れ込んだ画像/動画を消す・巨大化を防ぐ ===== */
.mgs-sticky img,
.mgs-sticky video,
.mgs-sticky iframe,
.mgs-sticky .wp-video,
.mgs-sticky [class*="video"]{display:none !important;}
.mgs-sticky{max-height:64px !important;overflow:hidden !important;}
.mgs-sticky a{display:block !important;max-height:48px !important;line-height:1.4 !important;}

/* 本文中、追従バー以外でも“動画化プラグインの残骸”が巨大表示されるのを抑える保険 */
.entry-content [class*="video-responsive"],
.entry-content [class*="sacg"]{max-width:560px !important;margin:0 auto !important;}

/* ===== 動画ボタンのオーバーレイをスマホでも絶対に巨大化させない（青化防止の決定版） ===== */
.mgs-video-btn{position:relative !important;max-width:560px !important;margin:0 auto 20px !important;}
.mgs-video-btn .mgs-play-overlay{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  background:none !important;pointer-events:none !important;}
.mgs-video-btn .mgs-play-circle{
  width:70px !important;height:70px !important;min-width:70px !important;max-width:70px !important;
  min-height:70px !important;max-height:70px !important;flex:0 0 70px !important;
  border-radius:50% !important;background:var(--pink) !important;border:3px solid rgba(255,255,255,.92) !important;}
.mgs-video-btn .mgs-play-overlay img,
.mgs-video-btn .mgs-play-circle img{display:none !important;}
.mgs-play-label{display:none !important;}

/* ===== サンプルグリッド 最終強制（.entry-content .mgs-product 経由でも確実に効かせる） ===== */
.entry-content .mgs-product .mgs-thumbs,
.single-post .mgs-thumbs{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:8px !important;
  align-items:start !important;
}
.entry-content .mgs-product .mgs-thumb,
.single-post .mgs-thumb{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  float:none !important;
  aspect-ratio:16/10 !important;
  height:auto !important;
  overflow:hidden !important;
  display:block !important;
}
.entry-content .mgs-product .mgs-thumb img,
.single-post .mgs-thumb img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  aspect-ratio:auto !important;
  object-fit:cover !important;
  display:block !important;
}
@media(max-width:480px){
  .entry-content .mgs-product .mgs-thumbs,
  .single-post .mgs-thumbs{grid-template-columns:repeat(2,1fr) !important;}
}

/* ===== サンプル img の縦横比をこちらが完全に奪う（lazy/auto-sizes/最適化プラグイン対策の決定版） ===== */
.mgs-thumbs{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:8px !important;align-items:stretch !important;}
.mgs-thumbs > .mgs-thumb{position:relative !important;width:100% !important;max-width:100% !important;
  padding-top:62.5% !important;        /* 16:10 の高さを padding で固定（aspect-ratio非対応・上書き対策） */
  height:0 !important;overflow:hidden !important;display:block !important;float:none !important;
  border:1px solid var(--line) !important;border-radius:6px !important;}
.mgs-thumbs > .mgs-thumb > img{position:absolute !important;top:0 !important;left:0 !important;
  width:100% !important;height:100% !important;max-width:100% !important;min-width:0 !important;
  object-fit:cover !important;aspect-ratio:auto !important;contain-intrinsic-size:auto !important;
  display:block !important;margin:0 !important;}
@media(max-width:480px){.mgs-thumbs{grid-template-columns:repeat(2,1fr) !important;}}