/* ===============================================================
   game-page-v2.css - Junkyard Animations
   Styles extracted from the geoffreys_quest_full.html mockup.
   This is the source of truth for individual game page layout.
   Skips the global header/nav/footer styles (those live in style.css).
   =============================================================== */

/* -- BREADCRUMB ---------------------------------------------- */
.ja-breadcrumb { background: #060e20; padding: 8px 0; border-bottom: 1px solid #1a3a6a; }
.ja-breadcrumb .ja-wrap { max-width: 1100px; margin: 0 auto; padding: 0 12px; }
.ja-breadcrumb a { font-family: 'Boogaloo', sans-serif; font-size: 13px; color: #4db8e8; text-decoration: none; }
.ja-breadcrumb a:hover { text-decoration: underline; }
.ja-breadcrumb span { color: #2a5aaa; font-size: 13px; margin: 0 4px; }
.ja-breadcrumb .current { color: #f5d020; font-family: 'Boogaloo', sans-serif; font-size: 13px; }

/* -- PAGE LAYOUT --------------------------------------------- */
.ja-game-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 12px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 18px;
  box-sizing: border-box;
}

/* -- MAIN COLUMN --------------------------------------------- */
.ja-game-main {}
.ja-game-title { font-family: 'Lilita One', cursive; font-size: 26px; color: #f5d020; margin-bottom: 10px; }
.ja-game-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ja-game-tag { background: #1a3a6a; color: #4db8e8; font-family: 'Lilita One', cursive; font-size: 12px; padding: 3px 10px; border-radius: 6px; }
.ja-game-tag.gold { background: #f5d020; color: #0a1535; }
.ja-game-views { font-family: 'Boogaloo', sans-serif; font-size: 13px; color: #4a6a9a; }

/* -- PLAYER -------------------------------------------------- */
.ja-player {
  width: 100%;
  aspect-ratio: 4/3;
  background: #060e20;
  border: 3px solid #4d8fd4;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  max-height: 480px;
}
.ja-ruffle-credit {
  font-family: 'Boogaloo', sans-serif;
  font-size: 11px;
  color: #1a3a6a;
  text-align: right;
  margin-top: 3px;
}

/* -- ACTIONS (Favourite, Share, Walkthrough) ----------------- */
.ja-game-actions { display: flex; align-items: center; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.ja-fav-btn { background: #0d2152; border: 2px solid #2a5aaa; color: #4db8e8; font-family: 'Lilita One', cursive; font-size: 13px; padding: 6px 14px; cursor: pointer; border-radius: 3px; transition: all 0.15s; }
.ja-fav-btn:hover { background: #1a3a7a; border-color: #4d8fd4; }
.ja-fav-btn .ja-inline-icon path { fill: #e24b4a; }
.ja-fav-btn.faved .ja-inline-icon path { fill: #f5d020; }
.ja-fav-btn.faved { background: #cc0000; border-color: #f5d020; color: #f5d020; }
.ja-share-btn2 { background: #f5d020; border: none; color: #0a1535; font-family: 'Lilita One', cursive; font-size: 13px; padding: 6px 14px; cursor: pointer; border-radius: 3px; }
.ja-inline-icon { width: 17px; height: 17px; vertical-align: -3px; margin-right: 4px; display: inline-block; }
.ja-game-tag .ja-inline-icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.ja-game-desc .ja-inline-icon { width: 42px; height: 42px; vertical-align: -12px; margin-right: 8px; }
.ja-book-line { stroke: #060e20; stroke-width: 1; fill: none; }
.ja-fav-count-text { font-family: 'Boogaloo', sans-serif; color: #c8dff8; font-size: 15px; }
.ja-walk-btn { background: #0d2152; border: 2px solid #2a5aaa; color: #4db8e8; font-family: 'Lilita One', cursive; font-size: 13px; padding: 6px 14px; cursor: pointer; border-radius: 3px; transition: all 0.15s; text-decoration: none; display: inline-block; }
.ja-walk-btn:hover { background: #1a3a7a; border-color: #4d8fd4; }

/* -- DESCRIPTION --------------------------------------------- */
.ja-game-desc { background: #060e20; border: 1px solid #1a3a6a; border-radius: 4px; padding: 14px; margin: 14px 0; }
.ja-game-desc p { font-family: 'Boogaloo', sans-serif; font-size: 15px; line-height: 1.6; color: #a0c0e0; }

/* Gold description panel — cartoon pages only (both modes) */
.ja-desc-gold { background: #f5d020; border: 2px solid #11294d; border-radius: 6px; }
.ja-desc-gold p { color: #0d2a5e; }
.ja-desc-gold .ja-inline-icon { color: #1f5bb0; }
.ja-desc-gold .ja-book-line { stroke: #f5d020; }
.ja-desc-gold .ja-tv-screen { fill: #f5d020; }

/* -- STAR RATING --------------------------------------------- */
.ja-rate-block { background: #060e20; border: 1px solid #1a3a6a; border-radius: 4px; padding: 12px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ja-rate-label { font-family: 'Lilita One', cursive; font-size: 14px; color: #a0c0e0; }
.ja-rate-stars { display: flex; gap: 6px; }
.ja-rate-stars span {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
  color: #7a828e;
}
.ja-rate-stars span svg { width: 100%; height: 100%; fill: currentColor; }
.ja-rate-stars span .ja-bin-slat { fill: #060e20; }
.ja-rate-stars span.lit {
  /* Lit cans glow gold */
  color: #f5d020;
  filter: drop-shadow(0 0 4px rgba(245,208,32,0.6));
  transform: scale(1.05);
}
.ja-rate-stars span.hover-lit {
  /* Hover preview - same glow, slight extra bounce */
  color: #f5d020;
  filter: drop-shadow(0 0 6px rgba(245,208,32,0.8));
  transform: scale(1.15);
}
.ja-rate-avg { font-family: 'Lilita One', cursive; font-size: 13px; color: #4a6a9a; }
.ja-rate-label-txt { font-family: 'Lilita One', cursive; font-size: 13px; color: #f5d020; min-width: 100px; }
.ja-rate-trophy {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 3px;
}

/* -- COMMENTS SECTION ---------------------------------------- */
.ja-comments-section { margin-top: 4px; }
.ja-sec { font-family: 'Lilita One', cursive; font-size: 15px; color: #fff; background: #1a3a7a; padding: 6px 10px; border-radius: 3px 3px 0 0; margin-bottom: 0; }

.ja-write-comment { background: #060e20; border: 1px solid #1a3a6a; border-top: none; padding: 14px; margin-bottom: 14px; }
.ja-write-comment textarea { width: 100%; background: #0a1a3a; border: 1px solid #2a5aaa; color: #c8dff8; font-family: 'Boogaloo', sans-serif; font-size: 14px; padding: 8px 10px; border-radius: 3px; resize: vertical; min-height: 70px; box-sizing: border-box; }
.ja-write-comment textarea::placeholder { color: #2a5aaa; }
.ja-write-comment textarea:disabled { opacity: 0.6; cursor: not-allowed; }
.ja-submit-btn { background: #f5d020; border: 1px solid #1a3a7a; color: #1a3a7a; font-family: 'Lilita One', cursive; font-size: 14px; padding: 7px 18px; cursor: pointer; border-radius: 4px; margin-top: 8px; box-shadow: 3px 3px 0 #1a3a7a; transition: all 0.15s; }
.ja-submit-btn:hover:not(:disabled) { background: #ffe040; }
.ja-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ja-write-status { font-family: 'Boogaloo', sans-serif; font-size: 12px; color: #2a5aaa; }
.ja-write-status strong { color: #4db8e8; }
.ja-write-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

/* -- COMMENT CARDS ------------------------------------------- */
.ja-comment-list { display: flex; flex-direction: column; gap: 0; }
.ja-comment { background: #060e20; border: 1px solid #0d2152; border-top: none; padding: 10px 12px; transition: background 0.15s; }
.ja-comment:hover { background: #070f22; }
.ja-comment-header { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.ja-comment-num { font-family: 'Lilita One', cursive; font-size: 11px; color: #2a5aaa; min-width: 24px; }
.ja-comment-user { font-family: 'Lilita One', cursive; font-size: 16px; color: #4db8e8; cursor: pointer; }
.ja-comment-user:hover { text-decoration: underline; }
.ja-comment-date { font-family: 'Boogaloo', sans-serif; font-size: 12px; color: #2a5aaa; margin-left: auto; }
.ja-comment-text { font-family: 'Boogaloo', sans-serif; font-size: 16px; color: #c8dff8; line-height: 1.55; padding-left: 24px; margin-bottom: 6px; }
.ja-comment-footer { display: flex; align-items: center; gap: 8px; padding-left: 24px; }

/* -- RANK BADGES --------------------------------------------- */
/* Rank badge colours now live ONLY in style.css so header, profile, and
   these sidebar badges can never disagree. This file just keeps the sidebar
   badge sizing; .ja-rank + .r-* from style.css supply the colours. */
.ja-rank-badge { font-size: 12px; padding: 2px 9px; }
.ja-og-badge { font-size: 11px; }

.ja-agree-btn { background: #f5d020; border: 1px solid #1a3a7a; color: #1a3a7a; font-family: 'Boogaloo', sans-serif; font-weight: 600; font-size: 13px; padding: 5px 12px; cursor: pointer; border-radius: 4px; transition: all 0.15s; box-shadow: 3px 3px 0 #1a3a7a; }
.ja-agree-btn:hover { background: #ffe040; }
.ja-agree-btn.agreed { background: #1a3a7a; border-color: #f5d020; color: #f5d020; box-shadow: 3px 3px 0 #f5d020; }
.ja-agree-count { font-family: 'Lilita One', cursive; font-size: 13px; color: #2a5aaa; }

.ja-load-more { width: 100%; background: #0d2152; border: 1px solid #2a5aaa; border-top: none; color: #4db8e8; font-family: 'Lilita One', cursive; font-size: 14px; padding: 10px; cursor: pointer; transition: background 0.15s; }
.ja-load-more:hover { background: #1a3a7a; }

/* -- SIDEBAR ------------------------------------------------- */
.ja-game-sidebar {}
.ja-sidebar-box { background: #060e20; border: 1px solid #1a3a6a; border-radius: 4px; margin-bottom: 14px; overflow: hidden; }
.ja-sidebar-title { font-family: 'Lilita One', cursive; font-size: 18px; color: #f5d020; background: #1a3a7a; padding: 8px 12px; }
.ja-sidebar-title .ja-inline-icon { width: 24px; height: 24px; vertical-align: -5px; }
.ja-sidebar-title .ja-controller-icon { width: 36px; height: 36px; vertical-align: -11px; }

/* Game Info box gets a yellow header (it's always the first sidebar box) */
.ja-game-sidebar .ja-sidebar-box:first-child .ja-sidebar-title {
  background: #f5d020;
  color: #0a1535;
}
.ja-sidebar-body { padding: 10px; }
.ja-info-row { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid #0d2152; font-family: 'Boogaloo', sans-serif; font-size: 13px; gap: 10px; }
.ja-info-row:last-child { border-bottom: none; }
.ja-info-label { color: #4a6a9a; flex-shrink: 0; }
.ja-info-val { color: #c8dff8; font-family: 'Lilita One', cursive; font-size: 12px; text-align: right; }
.ja-info-val a { color: #4db8e8; text-decoration: none; }
.ja-info-val a:hover { text-decoration: underline; }

/* -- SIDEBAR CRITIQUES --------------------------------------- */
.ja-sc { padding: 9px 10px; border-bottom: 1px solid #0d2152; }
.ja-sc:last-child { border-bottom: none; }
.ja-sc-top { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; flex-wrap: wrap; }
.ja-sc-user { font-family: 'Lilita One', cursive; font-size: 14px; color: #f5d020; }
.ja-sc-on { font-family: 'Boogaloo', sans-serif; font-size: 11px; color: #2a5aaa; }
.ja-sc-on a { color: inherit; text-decoration: underline; }
.ja-sc-text { font-family: 'Boogaloo', sans-serif; font-size: 13px; color: #a0c0e0; line-height: 1.4; margin-bottom: 4px; }
.ja-sc-agree { font-family: 'Lilita One', cursive; font-size: 10px; color: #2a5aaa; cursor: pointer; border: 1px solid #1a3a6a; background: transparent; border-radius: 8px; padding: 1px 8px; transition: all 0.15s; }
.ja-sc-agree:hover { color: #4db8e8; border-color: #4db8e8; }

/* -- RELATED GAMES ------------------------------------------- */
.ja-related { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.ja-related-item { display: flex; flex-direction: column; gap: 5px; cursor: pointer; text-decoration: none; }
.ja-related-item:hover .ja-related-thumb { border-color: #4d8fd4; }
.ja-related-item:hover .ja-related-title { color: #ffe040; }
.ja-related-thumb {
  width: 100%;
  aspect-ratio: 4/3;
  background-color: #0d2152;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 3px solid #2a5aaa;
  border-radius: 3px;
  transition: border-color 0.15s;
  min-height: 140px;
  display: block;
}
.ja-related-title { font-family: 'Lilita One', cursive; font-size: 14px; color: #f5d020; text-align: center; line-height: 1.2; }
.ja-related-type { font-family: 'Boogaloo', sans-serif; font-size: 12px; color: #2a5aaa; text-align: center; }

/* -- STATS BOX ----------------------------------------------- */
.ja-stats-box { padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ja-stat-item { text-align: center; padding: 8px; background: #0a1535; border-radius: 3px; }
.ja-stat-n { font-family: 'Lilita One', cursive; font-size: 20px; color: #f5d020; }
.ja-stat-l { font-family: 'Boogaloo', sans-serif; font-size: 11px; color: #4db8e8; }

/* -- RESPONSIVE ---------------------------------------------- */
@media (max-width: 900px) {
  .ja-game-page { grid-template-columns: 1fr; }
}


/* ===============================================================
   LIGHT MODE OVERRIDES - matches the original 2007 site palette
   Pastel blue surfaces with dark navy text.
   =============================================================== */

/* -- BREADCRUMB ---------------------------------------------- */
#jaBody.light .ja-breadcrumb { background: #b8d0f0; border-bottom: 1px solid #6a9ad4; }
#jaBody.light .ja-breadcrumb a { color: #1a3a8a; }
#jaBody.light .ja-breadcrumb span { color: #4a6a9a; }
#jaBody.light .ja-breadcrumb .current { color: #1a3a8a; font-weight: bold; }

/* -- MAIN COLUMN --------------------------------------------- */
body#jaBody.light .ja-game-title,
html[data-theme="light"] .ja-game-title { color: #1a3a8a !important; }
#jaBody.light .ja-game-tag { background: #d4e3f7; color: #1a3a8a; }
#jaBody.light .ja-game-tag.gold { background: #f5d020; color: #0a1535; }
#jaBody.light .ja-game-views { color: #4a6a9a; }

/* -- PLAYER -------------------------------------------------- */
#jaBody.light .ja-player { background: #d4e3f7; border-color: #6a9ad4; }
#jaBody.light .ja-ruffle-credit { color: #6a9ad4; }

/* -- ACTIONS ------------------------------------------------- */
#jaBody.light .ja-fav-btn { background: #ffffff; border-color: #6a9ad4; color: #1a3a8a; }
#jaBody.light .ja-fav-btn:hover { background: #e8f0fc; border-color: #1a3a8a; }
#jaBody.light .ja-fav-btn.faved { background: #cc0000; border-color: #f5d020; color: #f5d020; }
#jaBody.light .ja-fav-count-text { color: #4a6a9a; }
#jaBody.light .ja-book-line { stroke: #3d63ab; }
#jaBody.light .ja-walk-btn { background: #ffffff; border-color: #6a9ad4; color: #1a3a8a; }
#jaBody.light .ja-walk-btn:hover { background: #e8f0fc; border-color: #1a3a8a; }

/* -- DESCRIPTION --------------------------------------------- */
#jaBody.light .ja-game-desc { background: #3d63ab; border-color: #1a3a7a; }
#jaBody.light .ja-game-desc p { color: #ffffff; }

/* Light mode: gold desc panel takes the disclaimer's navy look */
#jaBody.light .ja-desc-gold { background: #102e5e; border: 1px solid #1a3a6a; border-left: 4px solid #f5d020; border-radius: 6px; }
#jaBody.light .ja-desc-gold p { color: #f5d020; }
#jaBody.light .ja-desc-gold .ja-inline-icon { color: #f5d020; }
#jaBody.light .ja-desc-gold .ja-tv-screen { fill: #102e5e; }
#jaBody.light .ja-desc-gold .ja-book-line { stroke: #102e5e; }

/* -- STAR RATING --------------------------------------------- */
#jaBody.light .ja-rate-block { background: #3d63ab; border-color: #1a3a7a; }
#jaBody.light .ja-rate-label { color: #ffffff; }
#jaBody.light .ja-rate-avg { color: #dce8f8; }
#jaBody.light .ja-rate-label-txt { color: #ffe680; }
#jaBody.light .ja-rate-stars span { color: #adc2e6; }
#jaBody.light .ja-rate-stars span .ja-bin-slat { fill: #3d63ab; }

/* -- COMMENTS SECTION ---------------------------------------- */
#jaBody.light .ja-sec { background: #1a3a8a; color: #ffffff; }

#jaBody.light .ja-write-comment { background: #dfe9f7; border-color: #6a9ad4; }
#jaBody.light .ja-write-comment textarea { background: #ffffff; border-color: #6a9ad4; color: #0a1535; }
#jaBody.light .ja-write-comment textarea::placeholder { color: #6a9ad4; }
#jaBody.light .ja-write-status { color: #4a6a9a; }
#jaBody.light .ja-write-status strong { color: #1a3a8a; }

/* -- COMMENT CARDS ------------------------------------------- */
#jaBody.light .ja-comment { background: #dfe9f7; border-color: #c0d4ed; }
#jaBody.light .ja-comment:hover { background: #e8f0fc; }
#jaBody.light .ja-comment-num { color: #4a6a9a; }
#jaBody.light .ja-comment-user { color: #1a3a8a; }
#jaBody.light .ja-comment-date { color: #6a9ad4; }
#jaBody.light .ja-comment-text { color: #0a1535; }

/* Override pavel's inline gold to a darker gold readable on light bg */

/* -- AGREE BUTTON -------------------------------------------- */
#jaBody.light .ja-agree-btn { background: #f5d020; border-color: #0d1e3a; color: #0d1e3a; }
#jaBody.light .ja-agree-btn:hover { background: #ffe040; }
#jaBody.light .ja-agree-btn.agreed { background: #1a3a7a; border-color: #f5d020; color: #f5d020; }
#jaBody.light .ja-submit-btn { background: #f5d020; border-color: #0d1e3a; color: #0d1e3a; box-shadow: 3px 3px 0 #0d1e3a; }
#jaBody.light .ja-submit-btn:hover:not(:disabled) { background: #ffe040; }
#jaBody.light .ja-agree-count { color: #4a6a9a; }

/* -- LOAD MORE ----------------------------------------------- */
#jaBody.light .ja-load-more { background: #ffffff; border-color: #6a9ad4; color: #1a3a8a; }
#jaBody.light .ja-load-more:hover { background: #e8f0fc; }

/* -- SIDEBAR ------------------------------------------------- */
#jaBody.light .ja-sidebar-box { background: #dfe9f7; border-color: #6a9ad4; }
#jaBody.light .ja-sidebar-title { background: #1a3a8a; color: #f5d020; }
#jaBody.light .ja-info-row { border-bottom-color: #c0d4ed; }
#jaBody.light .ja-info-label { color: #4a6a9a; }
#jaBody.light .ja-info-val { color: #0a1535; }
#jaBody.light .ja-info-val a { color: #1a3a8a; }

/* -- SIDEBAR CRITIQUES --------------------------------------- */
#jaBody.light .ja-sc { border-bottom-color: #c0d4ed; }
#jaBody.light .ja-sc-user { color: #a67c00; }
#jaBody.light .ja-sc-on { color: #4a6a9a; }
#jaBody.light .ja-sc-text { color: #0a1535; }
#jaBody.light .ja-sc-agree { color: #4a6a9a; border-color: #6a9ad4; }
#jaBody.light .ja-sc-agree:hover { color: #1a3a8a; border-color: #1a3a8a; }

/* -- RELATED ------------------------------------------------- */
#jaBody.light .ja-related-item:hover .ja-related-thumb { border-color: #1a3a8a; }
#jaBody.light .ja-related-item:hover .ja-related-title { color: #c8960c; }
#jaBody.light .ja-related-thumb { background-color: #c0d4ed; border-color: #6a9ad4; }
#jaBody.light .ja-related-title { color: #f5d020; }
#jaBody.light .ja-related-type { color: #4a6a9a; }

/* -- STATS BOX ----------------------------------------------- */
#jaBody.light .ja-stat-item { background: #ffffff; }
#jaBody.light .ja-stat-n { color: #c8960c; }
#jaBody.light .ja-stat-l { color: #1a3a8a; }