﻿/* Styles for game cards or game pages. Keep existing responsive layout and artwork.
   2026-10-18: scoped text/control contrast and the reporting widget. */
/* Shared game controls and responsive layout. Scoped to game pages only. */
.ghDesktopGame,.ghMobileGame {box-sizing:border-box;}
.ghDesktopGame *,.ghMobileGame * {box-sizing:border-box;}
.ghDesktopGame {margin:0;background:#152045 url('../Images/System/Mystical-Forest-BG.webp') center/cover fixed no-repeat;color:#eff6ff;font-family:Fredoka,Arial,sans-serif;}
.ghDesktopGame form {max-width:1880px;margin:auto;padding:12px 20px 28px;}
.ghDesktopGame #header {position:relative;width:100%;height:auto;margin:0 0 20px;z-index:10;}
.ghDesktopGame #pnlang {display:flex;direction:ltr;justify-content:flex-start;gap:10px;min-height:42px;}
.ghDesktopGame #pnlang input {width:72px!important;height:auto!important;object-fit:contain;}
.ghHeaderRow {display:flex;align-items:center;gap:clamp(16px,2vw,36px);text-align:start;}
.ghHeaderLogo {flex:0 0 auto;}
.ghDesktopGame #imgLogo {width:clamp(112px,11vw,180px);height:auto;aspect-ratio:5/4;object-fit:contain;}
.ghDesktopGame #headerTableCenter-Right {display:flex;align-items:center;justify-content:center;flex:0 1 570px;min-width:220px;gap:8px;}
.ghDesktopGame #imgGamesHouseBanner {width:clamp(220px,21vw,300px);max-width:100%;height:auto;}
.ghDesktopGame #headerTableCenter-Right img[id^='balloon'] {width:clamp(32px,4vw,65px);height:auto;}
.ghDesktopGame #headerTableCenter-Left {flex:1 1 340px;min-width:0;}
.ghDesktopGame #gameHeadline {font-size:clamp(30px,2.7vw,42px);line-height:1.15;margin:4px 0;overflow-wrap:anywhere;}
.ghDesktopGame #gameSubHeadline {font-size:clamp(22px,1.8vw,28px);line-height:1.3;margin:4px 0;}
.ghDesktopGame #headerTableCenter-Left .ghBreadcrumb {white-space:normal;overflow-wrap:anywhere;}
.ghDesktopGame #aniBoxDesktopWrap {flex:0 1 100px;max-width:100px;overflow:hidden;}
.ghDesktopGame #body {position:relative;display:grid;direction:ltr;grid-template-columns:minmax(220px,300px) minmax(0,1fr) 160px;grid-template-areas:'related game ads' 'related info ads' 'footer footer footer';align-items:start;gap:22px;min-height:0;width:100%;background:none;overflow:visible;}
.ghDesktopGame #body::before {display:none;}
.ghDesktopGame #body>*,.ghDesktopGame #divGameSection>* {min-width:0;}
.ghDesktopGame[dir='rtl'] #body>* {direction:rtl;}
.ghDesktopGame[dir='ltr'] #body>* {direction:ltr;}
.ghDesktopGame #divGameSection {grid-area:game;display:block;position:relative;inset:auto;width:100%;height:auto;min-height:0;overflow:visible;z-index:1;}
.ghDesktopGame #ghGameCategories {margin:0 0 12px;}
.ghDesktopGame #divOtherGamesPanel {grid-area:related;position:static;width:100%;height:auto;}
.ghDesktopGame .ghAdColumn {grid-area:ads;min-width:0;overflow:hidden;}
.ghDesktopGame #section1SideCommercial {position:static;width:160px;min-width:0;height:auto;min-height:600px;overflow:hidden;}
.ghDesktopGame #divPopularUnderAd {position:static;width:100%;height:auto;margin-top:16px;}
.ghDesktopGame #divLowerParts {grid-area:info;position:static;width:100%;margin:0;padding:18px 8px;background:rgba(15,25,56,.78);border:1px solid rgba(208,229,255,.2);border-radius:14px;}
.ghDesktopGame #divLowerParts main {width:auto;}
.ghDesktopGame #divLowerParts2 {grid-area:footer;position:static;inset:auto;width:100%;margin:8px 0 0;padding:20px 10px;background:rgba(15,25,56,.68);border-radius:14px;}
.ghDesktopGame #divLowerParts2 table {width:100%;table-layout:fixed;}
.ghDesktopGame #divLowerParts2 td {overflow-wrap:anywhere;vertical-align:top;}
.ghDesktopGame #gameStatsUnderRecommended {width:100%;padding:14px;margin-top:14px;background:rgba(15,25,56,.88);border:1px solid rgba(208,229,255,.2);border-radius:14px;}
.ghDesktopGame #spnBelowGame {display:block;position:static;margin:14px 0 0;line-height:1.5;font-size:18px;text-shadow:0 1px 3px #000;}
.ghDesktopGame .literals,.ghDesktopGame .labels,.ghDesktopGame .cat-anchors {text-shadow:0 1px 3px rgba(0,0,0,.8);line-height:1.55;}
.ghDesktopGame .labels {font-size:20px;}
.ghDesktopGame .literals,.ghDesktopGame .cat-anchors {font-size:22px;}
.ghDesktopGame #divLowerParts .labels {white-space:pre-line;}
.ghDesktopGame #gameSubHeadline {animation:none;}
.ghGameMessage {line-height:1.5;margin:4px 0 12px;text-align:center;}
.ghGameMessage [id$='spnComSpan'] {position:static!important;display:block!important;font-size:18px!important;line-height:1.5!important;}
/* The viewport alone enters fullscreen, so only the game is visible. */
.ghGameViewport {position:relative;display:block;isolation:isolate;width:100%;max-width:800px;height:600px;margin:0 auto;overflow:auto;background:#101521;border:2px solid #7c224d;border-radius:12px;}
.ghGameViewport #divGame {display:block;position:relative;min-height:100%;width:100%;height:100%;margin:0;border:0;border-radius:0;overflow:hidden;backdrop-filter:none;background:#fff;}
.ghGameViewport [id$='pnlGame'],.ghGameViewport [id$='divFlashGame'] {width:100%;height:100%;}
.ghGameViewport [id$='divFlashGame']:empty {display:none;}
.ghGameViewport #gameIFrame {border:0;max-width:none;transform-origin:top left;}
.ghGameViewport #loadingTimeCommercial {position:absolute;inset:0;z-index:5;width:100%;height:100%;min-height:0;margin:0;overflow:auto;border-radius:0;}
.ghDesktopGame .ghGameViewport #loadingTimeCommercial {background:rgba(249,250,255,.96);}
.ghDesktopGame .startPanelInner {padding:24px 16px;}
.ghDesktopGame .startPanelAd {min-height:90px;overflow:hidden;max-width:100%;}
.ghDesktopGame .startPanelText {max-width:100%;}
.ghDesktopGame #btnLoadingTimeCommercial {max-width:100%;}
.ghGameViewport:fullscreen,.ghGameViewport:-webkit-full-screen {width:100vw!important;max-width:none!important;height:100dvh!important;margin:0!important;border:0;border-radius:0;background:#000;overflow:hidden;}
.ghGameViewport:fullscreen #divGame,.ghGameViewport:-webkit-full-screen #divGame {margin:auto;}
.ghGameTools {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:10px;margin:6px 0 0;border:1px solid #bdcce5;border-radius:12px;background:#f4f8ff;color:#24345f;font:16px/1.35 Arial,sans-serif;text-shadow:none;}
.ghGameTools button,.ghGameTools select {min-height:42px;padding:8px 12px;border:1px solid #aebfdd;border-radius:9px;background:#fff;color:#24345f;font:inherit;cursor:pointer;}
.ghGameTools button:hover {background:#e6efff;border-color:#6182bc;}
.ghGameTools button[aria-pressed='true'] {background:#fff2cc;border-color:#aa822a;}
.ghGameTools button:disabled {opacity:.5;cursor:default;}
.ghGameTools output {min-width:46px;font-size:14px;direction:ltr;}
.ghGameTools select {max-width:170px;padding:7px;}
.ghActionStatus {margin:5px 0 10px;min-height:1.4em;font:15px/1.4 Arial,sans-serif;text-align:center;color:inherit;}
.ghPersonalGames {margin:16px auto;padding:14px;border:1px solid #c7d4e8;border-radius:14px;background:#f4f8ff;color:#24345f;text-align:start;font:16px/1.5 Arial,sans-serif;max-width:960px;}
.ghPersonalGames h2 {font-size:19px;margin:0 0 10px;}
.ghPersonalGames h3 {font-size:16px;margin:14px 0 7px;}
.ghPersonalGames ul {padding:0;margin:0;list-style:none;}
.ghPersonalGames li {display:flex;align-items:center;gap:8px;border-top:1px solid #dce5f2;padding:7px 0;}
.ghPersonalGames a {flex:1;min-width:0;color:#173a75;text-decoration:underline;overflow-wrap:anywhere;}
.ghPersonalGames button {min-height:36px;min-width:36px;border:1px solid #c7d4e8;border-radius:7px;background:#fff;color:#24345f;cursor:pointer;font-size:16px;}
.ghPersonalGames .ghShelfNote {font-size:13px;margin:12px 0 0;}
.ghPersonalGames[hidden] {display:none;}
.ghDesktopGame :is(button,input,a,select):focus-visible,.ghMobileGame :is(button,input,a,select):focus-visible {outline:3px solid #e8af28;outline-offset:3px;}
.ghMobileGame #divGameSection {display:block;position:relative;max-width:960px;width:calc(100% - 12px);height:auto;min-height:0;aspect-ratio:auto;overflow:visible;}
.ghMobileGame #divGameSection.gameStarted {aspect-ratio:auto;min-height:0;}
.ghMobileGame .ghGameViewport {max-width:none;height:clamp(190px,60vw,320px);}
.ghMobileGame .ghGameTools {font-size:14px;gap:6px;padding:8px;}
.ghMobileGame .ghGameTools button {padding:7px 9px;}
.ghMobileGame .ghActionStatus {color:#24345f;}
.ghMobileGame .ghPersonalGames {width:94%;}
.ghMobileGame #lblDescription,.ghMobileGame [id$='lblPitInstruction'] {white-space:pre-line;}
.ghMobileGame .literals {font-size:clamp(20px,5vw,28px);}
.ghMobileGame .labels,.ghMobileGame .cat-anchors {font-size:clamp(18px,4.5vw,25px);line-height:1.5;}
@media(min-width:1600px) {.ghDesktopGame #body {grid-template-columns:340px minmax(0,1fr) 160px;}}
@media(max-width:1500px) {.ghDesktopGame #aniBoxDesktopWrap {display:none;}}
@media(max-width:1280px) {
 .ghDesktopGame #body {grid-template-columns:250px minmax(0,1fr);grid-template-areas:'related game' 'related info' 'ads ads' 'footer footer';}
 .ghDesktopGame .ghAdColumn {display:flex;justify-content:center;gap:24px;}
 .ghDesktopGame #section1SideCommercial {min-height:0;}
 .ghDesktopGame #divPopularUnderAd {max-width:240px;}
 .ghDesktopGame #headerTableCenter-Right img[id^='balloon'] {display:none;}
}
@media(max-width:980px) {
 .ghDesktopGame form {padding:10px 12px 20px;}
 .ghDesktopGame #body {grid-template-columns:minmax(0,1fr);grid-template-areas:'game' 'info' 'related' 'ads' 'footer';gap:16px;}
 .ghDesktopGame #divOtherGamesPanel {display:grid;grid-template-columns:1fr 1fr;gap:16px;}
 .ghDesktopGame #divOtherGamesPanel .ghPersonalGames {grid-column:1/-1;width:100%;}
 .ghDesktopGame .ghHeaderRow {flex-wrap:wrap;gap:14px;}
 .ghDesktopGame #headerTableCenter-Right {flex:1;}
 .ghDesktopGame #headerTableCenter-Left {flex-basis:100%;text-align:center;}
 .ghDesktopGame #headerTableCenter-Left .ghGameBreadcrumbHost {max-width:none;}
 .ghDesktopGame #gameStatsUnderRecommended {margin:0;}
}
@media(max-width:600px) {
 .ghDesktopGame #divOtherGamesPanel {display:block;}
 .ghDesktopGame #gameStatsUnderRecommended {margin-top:14px;}
 .ghDesktopGame #divLowerParts2 table,.ghDesktopGame #divLowerParts2 tbody,.ghDesktopGame #divLowerParts2 tr,.ghDesktopGame #divLowerParts2 td {display:block;width:100%;}
 .ghDesktopGame #divLowerParts2 td:empty {display:none;}
 .ghDesktopGame #divLowerParts2 .jokesbox-wrap {margin:12px 0;}
 .ghDesktopGame .lowerCommercialDivs {height:auto;min-height:100px;}
 .ghDesktopGame .startPanelAd {min-height:0;max-height:90px;}
 .ghDesktopGame .startPanelText {font-size:18px!important;padding:10px!important;}
 .ghDesktopGame #btnLoadingTimeCommercial {font-size:24px;height:64px;}
}
@media(prefers-reduced-motion:reduce) {
 .ghDesktopGame #gameHeadline,.ghDesktopGame #gameSubHeadline {animation:none!important;}
 .ghGameTools * {transition:none!important;}
}
.ghDesktopGame #divLowerParts2>table>tbody>tr {display:grid;grid-template-columns:minmax(130px,.8fr) minmax(210px,1fr) minmax(280px,2fr);gap:20px;}
.ghDesktopGame #divLowerParts2>table>tbody>tr>td {display:block;width:100%;min-width:0;}
.ghDesktopGame #divLowerParts2>table>tbody>tr>td:nth-child(1),
.ghDesktopGame #divLowerParts2>table>tbody>tr>td:nth-child(4),
.ghDesktopGame #divLowerParts2>table>tbody>tr>td:nth-child(6) {display:none;}
.ghGameViewport:fullscreen,.ghGameViewport:-webkit-full-screen {display:flex;align-items:center;justify-content:center;}
@media(max-width:760px) {.ghDesktopGame #divLowerParts2>table>tbody>tr {display:block;} .ghDesktopGame #divLowerParts2>table>tbody>tr>td {margin:14px 0;}}
.ghDesktopGame #aniBoxDesktopWrap {transform:none;}
.ghDesktopGame .ghAdColumn {overflow:visible;}
.ghDesktopGame #divPopularUnderAd {min-width:0;}
.ghDesktopGame #divPopularUnderAd .ghCatDropWrap {width:100%;max-width:220px;}
.ghDesktopGame #divPopularUnderAd .imgGame {max-width:100%;height:auto;aspect-ratio:6/5;}
/* 20261017-3: quieter controls, centered game titles and menu-style language links. */
.ghDesktopGame #headerTableCenter-Left {order:2;text-align:center;flex:1 1 420px;}
.ghDesktopGame .ghHeaderLogo {order:1;}
.ghDesktopGame #headerTableCenter-Right {order:3;flex-basis:440px;}
.ghDesktopGame #aniBoxDesktopWrap {order:4;}
.ghDesktopGame #headerTableCenter-Left .ghGameBreadcrumbHost {margin:8px auto 0;}
.ghDesktopGame #headerTableCenter-Left .ghBreadcrumb {text-align:center;background:rgba(9,17,43,.28);}
.ghLanguageLinks {display:flex;align-items:center;justify-content:flex-start;gap:8px;}
.ghLanguageLinks .ghLangButton {display:inline-block;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.42);border-radius:999px;padding:0 14px;font:700 16px/30px Arial,sans-serif;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,.6);}
.ghLanguageLinks .ghLangButton:hover {background:rgba(255,255,255,.29);}
.ghMobileGame .langAreaTopBar {padding:7px 12px;justify-content:flex-start;}
.ghMobileGame .ghLanguageLinks .ghLangButton {color:#24345f;border-color:#b3c4de;background:rgba(255,255,255,.8);text-shadow:none;font-size:14px;line-height:30px;padding:0 12px;}
.ghGameTools {max-width:800px;margin:6px auto 0;padding:5px 7px;gap:5px;border:1px solid rgba(202,219,247,.2);border-radius:9px;background:rgba(16,28,57,.48);color:#e3ebfb;font-size:13px;line-height:1.25;box-shadow:none;}
.ghGameTools button,.ghGameTools select {min-height:30px;padding:4px 8px;border-radius:6px;border:1px solid rgba(196,214,243,.24);background:rgba(255,255,255,.055);color:inherit;font:inherit;box-shadow:none;}
.ghGameTools button:hover {background:rgba(255,255,255,.13);border-color:rgba(210,230,255,.5);}
.ghGameTools button[aria-pressed='true'] {color:#ffe4a7;background:rgba(177,137,48,.15);border-color:rgba(221,186,100,.5);}
.ghGameTools [data-gh-action='smaller'],.ghGameTools [data-gh-action='larger'] {width:30px;padding:4px;font-size:18px;line-height:1;}
.ghGameTools [data-gh-action='smaller'] .ghActionLabel,.ghGameTools [data-gh-action='larger'] .ghActionLabel {position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.ghGameTools output {font-size:12px;min-width:40px;}
.ghGameTools select {max-width:137px;padding:3px 5px;}
.ghGameTools select option {background:#f4f8ff;color:#24345f;}
.ghActionStatus {font-size:13px;line-height:1.4;margin:3px 0 7px;min-height:0;}
.ghActionStatus:empty {display:none;}
.ghDesktopGame .jokesbox-wrap,.ghDesktopGame .jokesbox-body,.ghDesktopGame .jokesbox-body [id$='lblJoke'] {color:#24345f;text-shadow:none;}
.ghDesktopGame .jokesbox-body [id$='lblJoke'] {display:block;}
.ghDesktopGame .jokesbox-btn {color:#24345f;background:#e8edf7;font-size:14px;font-weight:600;}
.ghDesktopGame #divLowerParts .lowerCommercialDivs {height:auto;min-height:120px;}
@media(max-width:980px) {
 .ghDesktopGame #headerTableCenter-Right {order:2;flex-basis:300px;}
 .ghDesktopGame #headerTableCenter-Left {order:3;flex-basis:100%;}
}
@media(max-width:600px) {
 .ghGameTools {justify-content:center;}
 .ghGameTools button {min-height:36px;}
}
.ghMobileGame .ghGameTools {padding:5px 6px;gap:5px;font-size:12px;background:#edf2fa;border-color:#c9d5e6;color:#24345f;}
.ghMobileGame .ghGameTools button,.ghMobileGame .ghGameTools select {padding:5px 7px;min-height:36px;background:rgba(255,255,255,.8);border-color:#c5d1e3;}
.ghMobileGame .ghGameTools [data-gh-action='smaller'],.ghMobileGame .ghGameTools [data-gh-action='larger'] {width:32px;padding:4px;}
.ghDesktopGame #about {padding:18px;background:linear-gradient(135deg,rgba(33,36,83,.91),rgba(23,48,72,.91));color:#e7edf7;line-height:1.6;border:1px solid rgba(205,221,250,.2);}
.ghDesktopGame #about h2 {color:#ffe0a3!important;text-shadow:none;}
.ghDesktopGame #about a {color:#bdeaff!important;text-shadow:none;}

/* HTML5 and Flash are alternative layers, never two stacked full-height blocks.
   WebForms emits whitespace in an empty Panel, so :empty alone is not sufficient. */
.ghGameViewport [id$='pnlGame'],.ghGameViewport [id$='divFlashGame'] {position:absolute;inset:0;width:100%;height:100%;margin:0;}
.ghGameViewport #flashGameHost {display:block;max-width:100%;margin:0 auto;}
.ghGameViewport .ghFlashMessage {padding:24px 18px 12px;margin:0;color:#24345f;background:#fff;font:18px/1.6 Arial,sans-serif;text-align:center;text-shadow:none;}
.ghGameViewport .ghFlashRetry {display:block;margin:8px auto;padding:9px 18px;border:1px solid #aebfdd;border-radius:8px;background:#edf2fa;color:#24345f;font:16px Arial,sans-serif;cursor:pointer;}

/* Keep the original transparent banner beside the game titles. */
.ghDesktopGame .ghHeaderRow {display:grid;direction:ltr;grid-template-columns:200px minmax(220px,1fr) minmax(300px,440px) 200px;grid-template-areas:'logo brand title animation';gap:24px;align-items:center;}
.ghDesktopGame[dir='rtl'] .ghHeaderRow {grid-template-areas:'animation title brand logo';}
.ghDesktopGame[dir='ltr'] .ghHeaderRow {grid-template-columns:200px minmax(300px,440px) minmax(220px,1fr) 200px;}
.ghDesktopGame .ghHeaderLogo {grid-area:logo;justify-self:center;}
.ghDesktopGame #headerTableCenter-Right {grid-area:brand;justify-self:center;min-width:0;width:100%;gap:8px;}
.ghDesktopGame #imgGamesHouseBanner {flex:0 1 300px;min-width:0;width:300px;max-width:100%;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;}
.ghDesktopGame #headerTableCenter-Left {grid-area:title;min-width:0;text-align:center;}
.ghDesktopGame #aniBoxDesktopWrap {grid-area:animation;display:flex;width:200px;max-width:200px;min-width:0;justify-content:center;align-items:center;justify-self:center;overflow:visible;transform:none;}
.ghDesktopGame #aniBoxDesktopWrap>* {max-width:100%;margin-inline:auto;}
.ghDesktopGame #aniBoxDesktopWrap img {max-width:100%;height:auto;object-fit:contain;}
@media(max-width:1100px) {
 .ghDesktopGame .ghHeaderRow {grid-template-columns:150px minmax(180px,1fr) minmax(260px,320px) 150px;gap:16px;}
 .ghDesktopGame[dir='ltr'] .ghHeaderRow {grid-template-columns:150px minmax(260px,320px) minmax(180px,1fr) 150px;}
 .ghDesktopGame #aniBoxDesktopWrap {width:150px;max-width:150px;}
}
@media(max-width:850px) {
 .ghDesktopGame .ghHeaderRow,.ghDesktopGame[dir='ltr'] .ghHeaderRow {grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'brand title' 'logo animation';gap:16px;}
 .ghDesktopGame[dir='rtl'] .ghHeaderRow {grid-template-areas:'title brand' 'animation logo';}
}
@media(max-width:500px) {
 .ghDesktopGame .ghHeaderRow,.ghDesktopGame[dir='ltr'] .ghHeaderRow {grid-template-areas:'brand brand' 'title title' 'logo animation';}
 .ghDesktopGame[dir='rtl'] .ghHeaderRow {grid-template-areas:'brand brand' 'title title' 'animation logo';}
}

/* 2026-10-18: contrast correction only; keep existing toolbar sizing and layout. */
.ghDesktopGame .ghGameTools {background:rgba(13,25,54,.94);color:#fff;}
.ghDesktopGame .ghGameTools button {background:#293c60;border-color:#9aacc9;color:#fff;}
.ghDesktopGame .ghGameTools button:hover {background:#3a5079;}
.ghGameTools button:focus-visible {outline:3px solid #ffdb65;outline-offset:2px;}
/* Reporting stays outside the playback frame and never submits the main form. */
.ghIssueReport {max-width:800px;box-sizing:border-box;margin:10px auto;padding:8px 12px;border:1px solid #9dabc6;border-radius:8px;background:#f0f4fb;color:#20324e;text-shadow:none;font:15px/1.5 Arial,sans-serif;text-align:start;}
.ghIssueReport summary {cursor:pointer;font-weight:600;}
.ghIssueReport label {display:block;margin:8px 0 3px;}
.ghIssueReport select,.ghIssueReport textarea {box-sizing:border-box;max-width:100%;font:inherit;color:#20324e;background:#fff;border:1px solid #9dabc6;border-radius:5px;padding:6px;}
.ghIssueReport textarea {display:block;width:100%;min-height:70px;resize:vertical;}
.ghIssueReport button {margin-top:8px;font:inherit;padding:5px 12px;background:#243e6c;color:white;border:0;border-radius:5px;cursor:pointer;}
.ghIssueReport [role=status] {display:block;margin-top:6px;}
.ghIssueReport [hidden] {display:none !important;}
