/* ── Game page scoped styles ── */
.gp-wrap { max-width: 1240px; margin: 0 auto; padding: 20px 22px 40px; }
.gp-layout { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
@media(max-width:1000px){ .gp-layout{ grid-template-columns:1fr; } }

/* ── Player card ── */
.gp-player-card {
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #e8eaf2);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 18px rgba(92,110,248,.07);
}
.gp-player-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 16px 18px 14px; flex-wrap: wrap;
}
.gp-game-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 900; font-size: 22px;
  color: var(--text, #1a1d3b); line-height: 1.2; margin: 0;
}
.gp-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 5px; }
.gp-cat-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 20px;
  background: rgba(92,110,248,.1); color: var(--accent, #5c6ef8);
  font-size: 12px; font-weight: 700; text-decoration: none;
  border: 1px solid rgba(92,110,248,.2);
  transition: background .16s;
}
.gp-cat-tag:hover { background: rgba(92,110,248,.18); }
.gp-views-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 20px;
  background: var(--surface2, #f0f2f8); color: var(--text2, #6b7094);
  font-size: 12px; font-weight: 600;
  border: 1px solid var(--border, #e8eaf2);
}
.gp-head-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.gp-fav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: 40px;
  border: 1.5px solid var(--border, #e8eaf2);
  background: var(--surface, #fff);
  color: var(--text2, #6b7094); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .16s; text-decoration: none;
}
.gp-fav-btn:hover { border-color: #ff6b6b; color: #ff6b6b; background: rgba(255,107,107,.05); }
.gp-fav-btn.is-active { border-color: #ff6b6b; color: #ff6b6b; background: rgba(255,107,107,.08); }

/* ── Player area ── */
.gp-player-body { padding: 0 16px 16px; }
.gp-player-wrap {
  position: relative;
  border-radius: 12px; overflow: hidden;
  background: #0b1020;
  box-shadow: 0 4px 24px rgba(0,0,0,.18);
}
.gp-player-wrap iframe {
  width: 100%; height: min(72vh, 680px);
  border: 0; display: block;
}
.gp-player-wrap .gp-player-host{ width:100%; min-height:min(72vh, 680px); }
.gp-player-gate{ position:absolute; inset:0; z-index:15; display:flex; align-items:center; justify-content:center; padding:18px; background:linear-gradient(180deg, rgba(7,10,24,.76), rgba(11,16,32,.94)); }
.gp-player-gate[hidden]{ display:none !important; }
.gp-player-gate-card{ width:min(920px, calc(100vw - 36px)); max-height:calc(100vh - 36px); background:rgba(255,255,255,.98); color:#1a1d3b; border-radius:18px; box-shadow:0 26px 70px rgba(0,0,0,.34); overflow:auto; }
.gp-player-gate-card.is-video{ width:min(720px, calc(100vw - 44px)); }
.gp-player-gate-body{ padding:18px; }
.gp-player-gate-kicker{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:rgba(92,110,248,.10); color:#5c6ef8; font-size:11px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.gp-player-gate-title{ margin:12px 0 8px; font-size:1.45rem; line-height:1.2; font-weight:900; }
.gp-player-gate-desc{ margin:0 0 14px; color:#61678a; line-height:1.65; font-size:.98rem; }
.gp-player-gate-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px; }
.gp-player-gate-btn{ display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 18px; border-radius:999px; border:1px solid #dbe1f0; background:#5c6ef8; color:#fff; font-weight:800; cursor:pointer; }
.gp-player-gate-btn[disabled]{ opacity:.7; cursor:not-allowed; }
.gp-player-gate-skip{ background:#fff; color:#1a1d3b; }
.gp-player-gate-meta{ font-size:.83rem; color:#7a81a6; }
.gp-ad-banner{ display:flex; align-items:center; justify-content:center; width:100%; min-height:220px; max-height:min(60vh, 560px); border-radius:16px; overflow:hidden; border:1px solid #edf0f7; background:#0b1020; }
.gp-ad-banner img{ width:100%; height:100%; max-height:min(60vh, 560px); display:block; object-fit:contain; object-position:center; }
.gp-ad-video-wrap{ width:100%; max-width:640px; margin:0 auto; padding:8px 0; display:flex; align-items:center; justify-content:center; }
.gp-ad-video{ width:100%; display:block; max-width:640px; aspect-ratio:16 / 9; height:auto; max-height:min(38vh, 300px); background:#000; border-radius:16px; object-fit:contain; box-shadow:0 6px 24px rgba(0,0,0,.14); }
.gp-ad-code{ border-radius:16px; background:#f7f8fd; border:1px solid #edf0f7; padding:12px; overflow:auto; }
@media(max-width:768px){ .gp-player-gate-body{ padding:14px; } .gp-player-gate-title{ font-size:1.2rem; } .gp-player-gate-card{ width:min(100%, calc(100vw - 24px)); max-height:calc(100vh - 24px); } .gp-player-gate-card.is-video{ width:min(100%, calc(100vw - 24px)); } .gp-ad-banner{ min-height:160px; } .gp-ad-video-wrap{ max-width:100%; } .gp-ad-video{ max-width:100%; max-height:min(28vh, 220px); } }
.gp-fs-btn {
  position: absolute; top: 10px; right: 10px; z-index: 10;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 20px;
  background: rgba(10,12,35,.78); color: rgba(255,255,255,.9);
  border: 1px solid rgba(255,255,255,.15);
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: background .16s;
}
.gp-fs-btn:hover { background: rgba(10,12,35,.95); }
.gp-player-wrap.is-fs,
.gp-player-wrap:fullscreen,
.gp-player-wrap:-webkit-full-screen {
  width:100vw!important; height:100vh!important; min-height:100vh!important; max-height:none!important;
  border-radius:0!important; margin:0!important; inset:0!important; background:#000!important;
}
.gp-player-wrap.is-fs .gp-player-host,
.gp-player-wrap:fullscreen .gp-player-host,
.gp-player-wrap:-webkit-full-screen .gp-player-host,
.gp-player-wrap.is-fs iframe,
.gp-player-wrap:fullscreen iframe,
.gp-player-wrap:-webkit-full-screen iframe {
  width:100%!important; height:100vh!important; min-height:100vh!important; max-height:none!important;
}
.gp-player-wrap.is-fs .gp-fs-btn,
.gp-player-wrap:fullscreen .gp-fs-btn,
.gp-player-wrap:-webkit-full-screen .gp-fs-btn { z-index:40; }
html.gp-lock-scroll, body.gp-lock-scroll { overflow:hidden!important; height:100%!important; }
@media(max-width:768px){ .gp-player-wrap iframe{ height: min(56vw, 320px); } }

/* ── Below-player row ── */
.gp-below-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 0 4px;
}

/* ── Share box ── */
.gp-share {
  background: var(--surface2, #f0f2f8);
  border: 1.5px solid var(--border, #e8eaf2);
  border-radius: 14px; padding: 16px 18px; margin-top: 16px;
}
.gp-share-title { font-weight: 800; font-size: 14px; color: var(--text, #1a1d3b); margin-bottom: 10px; }
.gp-share-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.gp-share-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; border-radius: 20px;
  font-size: 12.5px; font-weight: 700; cursor: pointer;
  border: 1px solid rgba(0,0,0,.08); text-decoration: none;
  transition: transform .12s, opacity .12s;
}
.gp-share-btn:hover { transform: translateY(-1px); opacity: .9; }
.gp-share-btn.tw { background: linear-gradient(90deg,rgba(29,161,242,.15),rgba(29,161,242,.04)); color: #1a8cd8; }
.gp-share-btn.fb { background: linear-gradient(90deg,rgba(24,119,242,.15),rgba(24,119,242,.04)); color: #1877f2; }
.gp-share-btn.wa { background: linear-gradient(90deg,rgba(37,211,102,.15),rgba(37,211,102,.04)); color: #25d366; }
.gp-share-btn.tg { background: linear-gradient(90deg,rgba(34,158,217,.15),rgba(34,158,217,.04)); color: #229ED9; }
.gp-share-btn.rd { background: linear-gradient(90deg,rgba(255,69,0,.15),rgba(255,69,0,.04)); color: #ff4500; }
.gp-share-btn.cp { background: linear-gradient(90deg,rgba(92,110,248,.15),rgba(92,110,248,.04)); color: var(--accent, #5c6ef8); }
.gp-share-link-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface, #fff); border: 1.5px solid var(--border, #e8eaf2);
  border-radius: 10px; padding: 8px 12px;
}
.gp-share-link-row code {
  flex: 1; font-size: 12px; color: var(--text2, #6b7094);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: transparent; padding: 0;
}

/* ── Info section ── */
.gp-info-card {
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #e8eaf2);
  border-radius: 16px; overflow: hidden; margin-top: 16px;
  box-shadow: 0 2px 14px rgba(92,110,248,.05);
}
.gp-info-tabs {
  display: flex; border-bottom: 1.5px solid var(--border, #e8eaf2);
  padding: 0 18px; gap: 0;
}
.gp-info-tab {
  height: 44px; padding: 0 16px; border: none; background: transparent;
  font-family: 'Outfit', sans-serif; font-size: 13.5px; font-weight: 700;
  color: var(--text2, #6b7094); cursor: pointer; border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px; transition: color .16s, border-color .16s;
}
.gp-info-tab.active { color: var(--accent, #5c6ef8); border-bottom-color: var(--accent, #5c6ef8); }
.gp-info-pane { padding: 18px 20px; display: none; }
.gp-info-pane.active { display: block; }
.gp-info-text { color: var(--text2, #6b7094); font-size: 14px; line-height: 1.7; }
.gp-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.gp-tag-cloud a {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: 20px;
  background: var(--surface2, #f0f2f8);
  border: 1.5px solid var(--border, #e8eaf2);
  color: var(--text2, #6b7094); font-size: 12.5px; font-weight: 700;
  text-decoration: none; transition: all .16s;
}
.gp-tag-cloud a:hover { border-color: var(--accent, #5c6ef8); color: var(--accent, #5c6ef8); background: rgba(92,110,248,.06); }

/* ── Rating card ── */
.gp-rating-card {
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #e8eaf2);
  border-radius: 16px; padding: 18px 20px; margin-top: 16px;
  box-shadow: 0 2px 14px rgba(92,110,248,.05);
}
.gp-rating-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.gp-rating-score-block { display: flex; align-items: flex-end; gap: 10px; }
.gp-rating-big { font-family:'Nunito',sans-serif; font-weight:900; font-size:36px; line-height:1; color:var(--text,#1a1d3b); }
.gp-rating-stars-static { color:#f59e0b; font-size:16px; letter-spacing:-.5px; line-height:1; }
.gp-rating-count { font-size:11.5px; color:var(--text3,#9497b5); font-weight:600; margin-top:2px; }
.gp-stars-row { display:flex; gap:6px; flex-wrap:wrap; }
.gp-stars-row button {
  width: 44px; height: 44px; border-radius: 10px;
  border: 1.5px solid var(--border,#e8eaf2);
  background: var(--surface2,#f0f2f8);
  color: var(--text3,#9497b5); font-size: 18px; cursor: pointer;
  transition: all .16s; display: flex; align-items: center; justify-content: center;
}
.gp-stars-row button:hover,
.gp-stars-row button.is-active { background: #f59e0b; color: #fff; border-color: #f59e0b; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(245,158,11,.3); }
.gp-rating-bars { display: grid; gap: 6px; }
.gp-rating-row { display: grid; grid-template-columns: 42px 1fr 32px; gap: 8px; align-items: center; }
.gp-rating-track { height: 8px; border-radius: 999px; background: var(--surface2,#f0f2f8); overflow: hidden; }
.gp-rating-track i { display: block; height: 100%; background: linear-gradient(90deg,#fbbf24,#f59e0b); }
.gp-rating-note { font-size: 12px; color: var(--text3,#9497b5); margin-top: 10px; }

/* ── Comments ── */
.gp-comments { margin-top: 16px; }
.gp-comment-card {
  background: var(--surface,#fff); border:1.5px solid var(--border,#e8eaf2);
  border-radius:16px; padding:18px 20px;
  box-shadow:0 2px 14px rgba(92,110,248,.05);
}
.gp-comment-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:10px; }
@media(max-width:600px){ .gp-comment-form-grid{ grid-template-columns:1fr; } }
.gp-comment-input {
  width:100%; height:40px; background:var(--surface2,#f0f2f8);
  border:1.5px solid var(--border,#e8eaf2); border-radius:10px;
  padding:0 14px; font-family:'Outfit',sans-serif; font-size:14px; color:var(--text,#1a1d3b);
  outline:none; transition:border-color .16s,box-shadow .16s;
}
.gp-comment-input:focus { border-color:var(--accent,#5c6ef8); box-shadow:0 0 0 3px rgba(92,110,248,.12); }
.gp-comment-textarea {
  width:100%; min-height:90px; background:var(--surface2,#f0f2f8);
  border:1.5px solid var(--border,#e8eaf2); border-radius:10px;
  padding:12px 14px; font-family:'Outfit',sans-serif; font-size:14px; color:var(--text,#1a1d3b);
  outline:none; resize:vertical; transition:border-color .16s,box-shadow .16s;
}
.gp-comment-textarea:focus { border-color:var(--accent,#5c6ef8); box-shadow:0 0 0 3px rgba(92,110,248,.12); }
.gp-btn-primary {
  height:40px; padding:0 20px; border-radius:40px;
  background:linear-gradient(135deg,var(--accent,#5c6ef8),#7c8ff8);
  color:#fff; border:none; font-family:'Outfit',sans-serif;
  font-size:13.5px; font-weight:700; cursor:pointer;
  transition:all .16s; box-shadow:0 4px 14px rgba(92,110,248,.28);
}
.gp-btn-primary:hover { transform:translateY(-1px); box-shadow:0 6px 18px rgba(92,110,248,.38); }
.gp-comment-item {
  display:flex; gap:12px; padding:14px 0;
  border-bottom:1.5px solid var(--border,#e8eaf2);
}
.gp-comment-item:last-child { border-bottom:none; }
.gp-comment-avatar {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--accent,#5c6ef8),#a78bfa);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:800; color:#fff;
}
.gp-comment-name { font-size:13.5px; font-weight:700; color:var(--text,#1a1d3b); }
.gp-comment-date { font-size:11.5px; color:var(--text3,#9497b5); margin-left:8px; }
.gp-comment-body { font-size:13.5px; color:var(--text2,#6b7094); margin-top:4px; line-height:1.6; }

/* ── Related grid ── */
.gp-related { margin-top:16px; }
.gp-related-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
@media(max-width:1100px){ .gp-related-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:700px){ .gp-related-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.gp-related-card {
  background:var(--surface,#fff); border:1.5px solid var(--border,#e8eaf2);
  border-radius:12px; overflow:hidden; transition:all .16s;
}
.gp-related-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(92,110,248,.12); border-color:rgba(92,110,248,.25); }
.gp-related-thumb { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; transition:transform .3s; }
.gp-related-card:hover .gp-related-thumb { transform:scale(1.04); }
.gp-related-body { padding:10px 11px 12px; }
.gp-related-name { font-size:13px; font-weight:700; color:var(--text,#1a1d3b); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gp-related-meta { font-size:11px; color:var(--text3,#9497b5); font-weight:600; display:flex; align-items:center; justify-content:space-between; }
.gp-related-play {
  display:inline-flex; align-items:center; gap:4px;
  margin-top:8px; height:30px; padding:0 12px; border-radius:20px;
  background:var(--accent,#5c6ef8); color:#fff;
  font-size:12px; font-weight:700; text-decoration:none;
  transition:all .16s;
}
.gp-related-play:hover { background:#4a5ce0; }

/* ── Sidebar ── */
.gp-sidebar { display:flex; flex-direction:column; gap:16px; }
.gp-sticky { position:sticky; top:80px; }
.gp-sidebar-card {
  background:var(--surface,#fff); border:1.5px solid var(--border,#e8eaf2);
  border-radius:16px; overflow:hidden;
  box-shadow:0 2px 14px rgba(92,110,248,.05);
}
.gp-sidebar-card-head {
  padding:14px 16px 12px; border-bottom:1.5px solid var(--border,#e8eaf2);
  font-family:'Nunito',sans-serif; font-weight:900; font-size:14px; color:var(--text,#1a1d3b);
  display:flex; align-items:center; gap:7px;
}
.gp-sidebar-card-body { padding:14px 16px; }

/* Trending */
.gp-trend-item {
  display:flex; gap:10px; align-items:center;
  padding:9px 0; border-bottom:1px solid var(--border,#e8eaf2);
}
.gp-trend-item:last-child { border-bottom:none; }
.gp-trend-rank {
  width:22px; height:22px; border-radius:6px; flex-shrink:0;
  background:var(--surface2,#f0f2f8); display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:var(--text3,#9497b5);
}
.gp-trend-rank.r1 { background:rgba(245,166,35,.15); color:#f5a623; }
.gp-trend-rank.r2 { background:rgba(155,163,181,.15); color:#9ba3b5; }
.gp-trend-rank.r3 { background:rgba(192,120,80,.15); color:#c07850; }
.gp-trend-thumb {
  width:50px; height:36px; object-fit:cover;
  border-radius:8px; flex-shrink:0;
  border:1px solid var(--border,#e8eaf2);
}
.gp-trend-info { flex:1; min-width:0; }
.gp-trend-name { font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gp-trend-name a { color:var(--text,#1a1d3b); text-decoration:none; }
.gp-trend-name a:hover { color:var(--accent,#5c6ef8); }
.gp-trend-bar { height:4px; border-radius:999px; background:var(--surface2,#f0f2f8); overflow:hidden; margin-top:5px; }
.gp-trend-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--accent,#5c6ef8),#a78bfa); }

/* ── Dark mode overrides ── */
html[data-theme="dark"] .gp-player-card,
html[data-theme="dark"] .gp-info-card,
html[data-theme="dark"] .gp-rating-card,
html[data-theme="dark"] .gp-comment-card,
html[data-theme="dark"] .gp-sidebar-card,
html[data-theme="dark"] .gp-related-card { background:var(--surface,#171d3b); border-color:var(--border,#293157); }
html[data-theme="dark"] .gp-share { background:rgba(255,255,255,.04); border-color:var(--border,#293157); }
html[data-theme="dark"] .gp-share-link-row { background:rgba(255,255,255,.04); border-color:var(--border,#293157); }
html[data-theme="dark"] .gp-comment-input,
html[data-theme="dark"] .gp-comment-textarea { background:var(--surface2,#20284d); border-color:var(--border,#293157); color:var(--text,#f3f6ff); }
html[data-theme="dark"] .gp-tag-cloud a { background:var(--surface2,#20284d); border-color:var(--border,#293157); color:var(--text2,#b7c0e4); }
html[data-theme="dark"] .gp-stars-row button { background:var(--surface2,#20284d); border-color:var(--border,#293157); color:var(--text3,#818ab1); }
html[data-theme="dark"] .gp-related-name a { color:var(--text,#f3f6ff); }

/* GameSense v3 mobile player fix: centered responsive landscape player, no right-scroll */
.gp-main-col,.gp-player-card,.gp-player-body,.gp-player-wrap,.gp-player-host{min-width:0;max-width:100%;}
.gp-player-host{overflow:hidden;background:#0b1020;display:block;}
.gp-player-host > iframe,.gp-player-host > canvas,.gp-player-host > object,.gp-player-host > embed{max-width:100%!important;}
@media(max-width:768px){
  .gp-wrap{width:100%;max-width:100%;padding:10px 10px 28px;overflow:hidden;margin:0 auto;}
  .gp-layout{display:block;width:100%;max-width:100%;}
  .gp-player-card{border-radius:14px;margin-inline:auto;overflow:hidden;}
  .gp-player-head{padding:12px;align-items:flex-start;}
  .gp-game-title{font-size:18px;}
  .gp-player-body{padding:0 8px 10px;}
/* ===== 遊戲播放器 ===== */

.gp-player-wrap{
  width:100%;
  margin:auto;
  border-radius:12px;
  overflow:hidden;
  background:#000;
  position:relative;
}

/* 橫版遊戲 */
.gp-player-wrap.landscape{
  aspect-ratio:16/9;
}

/* 豎版遊戲 */
.gp-player-wrap.portrait{
  aspect-ratio:9/16;
  max-width:500px;
}

/* 遊戲容器 */
.gp-player-host{
  width:100%;
  height:100%;
}

/* iframe */
.gp-player-wrap iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* 手機版 */
@media(max-width:768px){

  .gp-player-wrap.portrait{
    max-width:100%;
  }

}
  .gp-player-wrap:not(.is-fs) .gp-player-gate{position:absolute;inset:0;}
  .gp-sidebar{margin-top:16px;}
  .gp-related-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gp-comment-form-grid,.gp-rating-card [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}
}
@media(max-width:420px){.gp-wrap{padding-inline:8px}.gp-related-grid{gap:8px}.gp-fs-btn{top:8px;right:8px;height:30px;padding:0 10px;font-size:11px}}