/*
 * GEOGRAPHY GAMES -- Type the States, Type the Countries, Type the Capitals
 * (includes/geoGame.php + js/geoGame.js), and the hub (geography-games.php).
 *
 * The games are Type the Flags' markup, styled by its own css/_y_tfg.css
 * (loaded alongside this): hint button, letters, controls and score tables
 * come from there. Laid out differently here: the map fills the whole panel
 * and everything else floats over it (THE GAME PANEL below). Plus the hub.
 */

/* The site's `* {margin:0 auto}` turns every flex child's side margins into
   auto, which shares out all the spare room between them. Zeroed in every
   flex row here. */
#geoPrompt > *, .geo-family > *, .geo-hub-grid > *,
#geoTools > *, #geoBottom > *, #geoHud > *, #geoHud #wrapStats > *, #geoHud #thirdRow > *, #geoHud #difficultySelectDropDown > *{margin-left:0; margin-right:0;}

/* ---- THE GAME PANEL: the map fills it, edge to edge, and everything else
   floats over it -- the help link top left; Learn and the overlay's switch
   top right (#geoTools); the title, for a moment as the page opens; the
   flag-and-name overlay top left; at the bottom the letters and a two-row
   strip of stats and controls (#geoBottom). js/geoGame.js frames each place in the clear part
   between (measure()), told the bottom's height through --geo-pad-bot. ---- */
#centerEntryModule.geo-module{height:650px; padding:0; background:#0f2342;}
.geo-module .flag-container{position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; height:auto; margin:0; display:block;}
#centerEntryModule.geo-module #geoMap.flag-img{position:absolute; top:0; left:0; width:100%; height:100%; max-width:none; max-height:none; padding:0; margin:0;
	overflow:hidden; cursor:text; border:0; border-radius:0; box-shadow:none;
	background:radial-gradient(ellipse at 50% 45%, #1d3b66 0%, #0f2342 75%, #0a1830 100%);}   /* space, round the globe when it is all in view */
.geo-module #gameLogo{display:none;}

/* the help link, top left; the overlay sits just right of it until a
   round starts and the link goes (.geo-nohelp) */
.geo-module .topLeftLink{z-index:20; left:12px; top:12px;}
.geo-module .topLeftLink a, .geo-module .topLeftLink a:hover{background:none; text-decoration:none;}

/* the title: slides down into place as the page opens, holds a moment,
   then fades away for good -- at once if a round starts first (js/geoGame.js
   start: .geo-started). In a box of the panel's old blue, a little see-through. */
#centerEntryModule.geo-module h1#geoTitle{position:absolute; z-index:14; top:72px; left:50%; right:auto; width:max-content; max-width:calc(100% - 24px); margin:0;
	padding:8px 24px 12px; border-radius:14px; background:rgb(115 199 255 / 80%); box-shadow:0 4px 16px -6px rgb(0 40 80 / 55%);
	font-size:1.8em; pointer-events:none; transform:translateX(-50%); animation:geoTitleInOut 4.2s ease forwards;}
@keyframes geoTitleInOut{
	0%{opacity:0; transform:translate(-50%, -36px);}
	16%{opacity:1; transform:translate(-50%, 0);}
	72%{opacity:1; transform:translate(-50%, 0);}
	100%{opacity:0; transform:translate(-50%, 0); visibility:hidden;}
}
#centerEntryModule.geo-module.geo-started h1#geoTitle{animation:none; opacity:0; visibility:hidden;}
@media (prefers-reduced-motion: reduce){
	@keyframes geoTitleInOut{0%{opacity:0; transform:translate(-50%, 0);} 16%{opacity:1; transform:translate(-50%, 0);} 72%{opacity:1; transform:translate(-50%, 0);} 100%{opacity:0; transform:translate(-50%, 0); visibility:hidden;}}
}
.geo-module #mainTitle{word-spacing:12px; letter-spacing:2px;}
.geo-module #mainTitle.geo-long{word-spacing:8px; letter-spacing:1px; white-space:nowrap;}   /* "Type the US State Capitals": one line, like the others */

/* the hint's shortcut, over the map just above the bulb: in with the title, and
   up until the first key of the first round (#geoTabTip, .geo-started) */
#geoTabTip{position:absolute; z-index:14; left:10px; bottom:calc(var(--geo-pad-bot, 150px) + 12px); padding:6px 12px 7px; border-radius:10px;
	background:rgb(18 105 163 / 90%); color:#fff; font:700 14px/1.2 'Open Sans', Arial, sans-serif; white-space:nowrap; pointer-events:none;
	box-shadow:0 4px 14px -4px rgb(0 20 50 / 60%); animation:geoTipIn .7s ease .1s backwards;}
#geoTabTip::after{content:''; position:absolute; top:100%; left:26px; border:7px solid transparent; border-top-color:rgb(18 105 163 / 90%);}   /* pointing down at the bulb */
#geoTabTip kbd{display:inline-block; margin-right:6px; padding:1px 7px 2px; border-radius:5px; background:#fff; color:#1d2a4d;
	border-bottom:2px solid #9aa6c0; font:800 12px/1.3 'Open Sans', Arial, sans-serif;}
@keyframes geoTipIn{
	from{opacity:0; transform:translateY(10px);}
}
.geo-started #geoTabTip{animation:none; opacity:0; visibility:hidden;}
/* what to do -- "What US State is this?" -- over the middle of the letters, for
   anyone new to the game: in with the title, gone at the first key, as above.
   Centred on the letters box, which sits right of the middle by half the bulb's
   room (#centerContent's padding: (80 - 18) / 2) */
#geoAskTip{position:absolute; z-index:14; left:calc(50% + 31px); bottom:calc(var(--geo-pad-bot, 150px) + 12px); transform:translateX(-50%); padding:7px 16px 8px; border-radius:10px;
	background:rgb(18 105 163 / 90%); color:#fff; font:800 16px/1.2 'Open Sans', Arial, sans-serif; white-space:nowrap; pointer-events:none;
	box-shadow:0 4px 14px -4px rgb(0 20 50 / 60%); animation:geoAskIn .7s ease .1s backwards;}
#geoAskTip::after{content:''; position:absolute; top:100%; left:50%; margin-left:-7px; border:7px solid transparent; border-top-color:rgb(18 105 163 / 90%);}   /* pointing down at the letters */
@keyframes geoAskIn{
	from{opacity:0; transform:translate(-50%, 10px);}
}
.geo-started #geoAskTip{animation:none; opacity:0; visibility:hidden;}

/* the bottom: the letters, then the strip */
#geoBottom{position:absolute; z-index:12; left:0; right:0; bottom:0; display:flex; flex-direction:column;}
.geo-module #geoBottom #centerContent{position:relative; width:auto; height:auto; margin:0; padding:0 18px 10px 80px; border-radius:0;}
.geo-module #geoBottom #hintButton{top:calc(50% - 5px); left:16px; transform:translateY(-50%);}
.geo-module #geoBottom #hintButton:active{transform:translateY(-50%) scale(.9);}
.geo-module #geoBottom #blockDivContainer{width:auto; height:76px; margin:0; left:0; padding:4px 7px 4px 12px; box-shadow:0 4px 22px -4px rgb(0 20 50 / 70%);}
.geo-module #geoBottom div.blockLines{height:58px; line-height:58px; margin-top:2px;}
.geo-module #geoBottom div.blockLines span:last-child{height:46px; top:6px;}
.geo-module #geoBottom #divCover{top:0; left:80px; right:18px; bottom:10px; width:auto; height:auto; margin:0; border-radius:8px;}
/* the strip, on two rows: the four stats spread across the top; Difficulty,
   then Reset dead centre, then Big Brain, across the bottom */
#geoHud{display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:8px 20px 10px;
	background:rgb(13 30 58 / 86%); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-top:1px solid rgb(255 255 255 / 14%); color:#e6f2ff;}
.nerdMode #geoHud{background:rgb(22 30 120 / 88%);}
.passed #geoHud{background:rgb(50 88 4 / 90%);}
.failed #geoHud{background:rgb(125 18 18 / 90%);}
#geoHud #wrapStats{position:static; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); align-items:center; gap:12px; width:auto; height:auto; margin:0; font-size:1em; z-index:auto;}
#geoHud #wrapStats #timerDiv{position:relative !important;}   /* (the penalty's pill is placed in it) */
#geoHud #timerDiv, #geoHud #wpmDiv, #geoHud #flagCountDiv, #geoHud #scoreDiv{position:static !important; width:auto; margin:0; text-align:center !important; display:flex; flex-direction:column; align-items:center; line-height:1.05;}
#geoHud #timerText, #geoHud #wpmText, #geoHud #flagCountText, #geoHud #scoreText{font:700 12px/1.25 'Open Sans', Arial, sans-serif; text-transform:uppercase; letter-spacing:.7px; opacity:.78; white-space:nowrap;}
#geoHud .statsText{font-size:28px; color:#fff; white-space:nowrap;}
#geoHud .statsText .dg{display:inline-block; width:.56em; padding:0; font-size:inherit; text-align:center;}   /* every digit one width, so the clock doesn't wobble (js/geoGame.js evenDigits); the stat's own size, not _y_tfg.css's 18px #timerDiv span */
#geoHud #tpgHighScore{min-width:0;}
/* Fastest Time with its Clear Scores button beside it -- or under it, where
   the two don't fit side by side (a narrow window, a time over 100 seconds) */
#geoHud #scoreDiv{display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; column-gap:8px; row-gap:3px;}
#geoHud #scoreText{flex:0 0 100%;}
#geoHud #clearDataBtn{top:0; left:0; margin:0;}
#geoHud #clearDataBtn input{padding:2px 8px; font-size:11px; border-radius:6px;}
#geoHud #thirdRow{position:static; display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:12px; z-index:auto;}
#geoHud #difficultySelectDropDown{position:static; grid-column:1; justify-self:start; display:flex; align-items:center; gap:8px;}
#geoHud #difficultySelectDropDown .boldFont{position:static; margin:0; font-size:15px; opacity:.85;}
#geoHud #difficultySelectDropDown .ui-selectmenu-button{width:180px !important;}
#geoHud #buttonWrapper{grid-column:2; grid-row:1;}
#geoHud #nerdModeSelectContainer{position:static; grid-column:3; grid-row:1; justify-self:end;}
#geoHud #nerdModeSelectContainer label{font-size:1.1em; white-space:nowrap;}
#geoHud #nerdModeSelectContainer .ui-button-text{padding:.25em .9em;}
#geoHud #nerdModeSelectContainer .brainIcon{height:28px; width:auto; padding:0; margin:0; vertical-align:middle;}
#geoHud #buttonWrapper, #geoHud #resetBtnWrap, #geoHud #resetBtnDiv{position:static; margin:0;}
#geoHud #resetBtn{top:0; left:0; height:auto; margin:0; padding:6px 30px; font-size:19px; border-radius:9px;}
#geoMap svg{display:block; width:100%; height:100%;}
#geoMap .geo-map-err{margin:0; padding:120px 20px 0; text-align:center; font:700 18px/1.4 'Open Sans', Arial, sans-serif; color:#424a7b;}   /* a map file failed (js/geoGame.js) */
/* the cut to the next place: in from faint, quickly enough not to slow anyone down */
#geoMap svg.geo-flash{animation:geoFlash .16s ease-out;}
@keyframes geoFlash{from{opacity:.35;}}
#geoMap .geo-sphere{fill:#8ec5e8;}                                       /* the sea: a clear blue, a step deeper than the land's pastels */
#geoMap .geo-grat{fill:none; stroke:#ffffff; stroke-opacity:.55; stroke-width:.6;}
#geoMap path.geo-x, #geoMap path.geo-t{fill:#f2cfdc; stroke:#949ba2; stroke-width:.7; stroke-linejoin:round;}   /* borders and coasts: grey */
#geoMap .geo-lakes path{fill:#8ec5e8; stroke:#949ba2; stroke-width:.7; stroke-linejoin:round; pointer-events:none;}   /* the big lakes: the sea's blue, over the land */
#geoMap .geo-lakes.geo-under path{stroke:none;}                         /* Type the States: under the states, which draw their own shores */
/* an atlas's soft colours, no two neighbours alike (js/geoGame.js colours them) */
#geoMap path.geo-k0{fill:#f2cfdc;}   /* rose (was a neutral sand, too close to the greyed-out land) */
#geoMap path.geo-k1{fill:#d5e3c1;}   /* sage */
#geoMap path.geo-k2{fill:#f1d9cb;}   /* peach */
#geoMap path.geo-k3{fill:#dcd7ec;}   /* lavender */
#geoMap path.geo-k4{fill:#ece4b3;}   /* butter */
#geoMap .geo-bg path{fill:#dcd7c8; stroke:#949ba2; stroke-width:.7; stroke-linejoin:round;}   /* Type the States: the world round the US -- a muted stone, quieter than the states */
/* the UK's nations: drawn over the UK, unseen until asked or done; their
   borders a faint dashed line (js/geoGame.js nationMesh) */
#geoMap path.geo-t.geo-nation{fill:none; stroke:none;}
#geoMap .geo-nation-mesh{fill:none; stroke:#8a929a; stroke-width:.8; stroke-dasharray:3 2; pointer-events:none;}
#geoMap path.geo-t.geo-done{fill:#6fbf4f; stroke:#24561a; stroke-width:1.2;}   /* guessed: green, with a dark green edge */
#geoMap path.geo-t.geo-cur{fill:#ff8505; stroke:#7a2e00; stroke-width:1.3;}
/* the bordering countries' names */
/* a name moved off its place, and the line back to it */
#geoMap .geo-lbl-line{stroke:#3d4a54; stroke-width:1; stroke-opacity:.75; pointer-events:none;}
#geoMap .geo-lbl-dot{fill:#3d4a54; pointer-events:none;}
#geoMap .geo-lbl{font-family:'Open Sans', Arial, sans-serif; font-size:12px; font-weight:700; fill:#3d4a54; text-anchor:middle; dominant-baseline:middle;
	stroke:#fff; stroke-width:3px; stroke-opacity:.85; paint-order:stroke; pointer-events:none; letter-spacing:.2px;}
/* Type the States' West: Alaska and Hawaii in boxes of their own, bottom left (js/geoGame.js drawInsets) */
#geoMap .geo-inset-box{fill:#8ec5e8; stroke:#5d6b78; stroke-width:1.2;}
#geoMap .geo-inset-bg{fill:#dcd7c8; stroke:#949ba2; stroke-width:.7; stroke-linejoin:round;}
#geoMap.geo-focus-only .geo-insets{display:none;}
/* ...and in a region's view, the places outside the region and the land round them a cool grey, well apart from the region's warm pastels */
#geoMap.geo-region path.geo-t:not(.geo-in):not(.geo-cur):not(.geo-done), #geoMap.geo-region path.geo-x, #geoMap.geo-region .geo-bg path{fill:#c4c6c8; stroke:#a3a9ae;}
#geoMap .geo-star{fill:#ffe600; stroke:#6b4300; stroke-width:1.4; stroke-linejoin:round; filter:drop-shadow(0 1px 2px rgb(0 0 0 / 45%));}
#geoMap .geo-dot{fill:#ff8505; stroke:#7a2e00; stroke-width:1.5; pointer-events:none;}   /* a region's map: each island of a country that is only specks of land */
#geoMap .geo-ring{fill:none; stroke:#ff3d00; stroke-width:2.5; animation:geoRing 1.1s ease-in-out infinite;}
@keyframes geoRing{50%{stroke-opacity:.3;}}
/* Big Brain: the place being asked and nothing else -- no sea, no lines, no
   neighbours. */
#geoMap.geo-focus-only .geo-sphere, #geoMap.geo-focus-only .geo-grat, #geoMap.geo-focus-only .geo-bg, #geoMap.geo-focus-only .geo-labels, #geoMap.geo-focus-only .geo-lakes, #geoMap.geo-focus-only .geo-nation-mesh,
#geoMap.geo-focus-only path.geo-x, #geoMap.geo-focus-only path.geo-t:not(.geo-cur){display:none;}

/* Learn mode's letters, waiting in the slots to be typed over */
#blockDivContainer span.plainText.learnHint{color:#a9a9a9;}
#blockDivContainer span.nxtLetter.learnHint{color:#fff;}

/* ---- the prompt (flag and capital), top left of the map, and the result line, bottom centre ----
   (the map is 94% of .flag-container, centred, with a 4px border: 3% + 4px in, then 10px more) */
#geoPrompt{display:none; position:absolute; z-index:11; top:8px; left:46px; align-items:center; gap:10px; white-space:nowrap; transition:left .35s ease;
	padding:5px 16px 5px 6px; border-radius:10px; background:rgb(255 255 255 / 88%); box-shadow:0 2px 10px rgb(0 40 80 / 25%); font-size:1.15em; color:#424a7b;}
#geoPrompt > span:first-child{margin-left:10px;}                         /* no flag in front (the state capitals) */
#geoPrompt .geo-flag{height:34px; width:auto; border-radius:4px; box-shadow:0 1px 4px rgb(0 0 0 / 35%);}
#geoPrompt .geo-name{font-family:'Suez One', 'Open Sans', sans-serif; font-weight:400; font-size:1.25em; letter-spacing:.5px; white-space:normal; line-height:1.15;}
#geoPrompt:not(.geo-result){max-width:calc(100% - 300px);}               /* clear of the buttons top right: a long name (Saint Vincent and the Grenadines) wraps */
.geo-nohelp #geoPrompt{left:12px;}
#geoPrompt.geo-words-only{padding-left:6px;}
#geoPrompt .geo-capname{position:relative; margin-left:22px;}           /* 32px from the flag in all (the gap's 10 + 22), room for the star */
#geoPrompt .geo-cap-star{position:absolute; left:-14px; top:0px; width:12px; height:12px; fill:#ffe600; stroke:#6b4300; stroke-width:1.4; stroke-linejoin:round; filter:drop-shadow(0 1px 2px rgb(0 0 0 / 45%));}   /* Type the Countries: the capital, as on the capitals map -- on the name's top left corner, taking no room */
#geoPrompt.geo-flag-only{padding:5px 6px;}                                /* Type the Countries, a place with no capital: the flag alone */
/* a territory's status ("British Overseas Territory"), bottom left of the map */
#geoStatus{display:none; position:absolute; z-index:11; left:12px; bottom:calc(var(--geo-pad-bot, 150px) + 8px); max-width:60%; padding:4px 12px; border-radius:12px;
	background:rgb(29 42 77 / 88%); color:#fff; font:700 13px/1.3 'Open Sans', Arial, sans-serif; box-shadow:0 2px 8px rgb(0 0 0 / 30%); pointer-events:none;}
#geoStatus.geo-ast{padding:0 11px; font-size:22px; line-height:1.25; pointer-events:auto; cursor:help;}   /* Big Brain: just an asterisk */
#geoPrompt.geo-result{top:auto; bottom:calc(var(--geo-pad-bot, 150px) + 10px); left:50%; transform:translateX(-50%); padding:6px 16px; font-weight:800; font-size:1.05em;
	max-width:calc(100% - 16px); box-sizing:border-box; flex-wrap:wrap; justify-content:center; white-space:normal; text-align:center;}   /* (a narrow screen: wraps, the Share button under the time) */

/* ---- top right: the overlay's on/off switch (js/geoGame.js setPrompt), then Learn ---- */
#geoTools{position:absolute; z-index:20; top:8px; right:10px; display:flex; align-items:flex-start; gap:8px;}
#promptToggleWrap{position:relative;}
/* one button, four modes: each part bright when it shows, faint and struck
   through when it doesn't; green while anything shows */
#promptBtn{display:inline-flex; align-items:center; gap:8px; margin:0; padding:.4em .85em; font-size:1.05em; line-height:1.3; cursor:pointer;}
#promptBtn .fa-solid{font-size:1.05em;}
#promptBtn .pm-words{font:800 1em/1 'Open Sans', Arial, sans-serif; letter-spacing:-.5px;}
#promptBtn .pm-flag, #promptBtn .pm-words{position:relative; transition:opacity .15s;}
#promptBtn.pm-no-flag .pm-flag, #promptBtn.pm-no-words .pm-words{opacity:.4;}
#promptBtn.pm-no-flag .pm-flag::after, #promptBtn.pm-no-words .pm-words::after{content:''; position:absolute; left:-3px; right:-3px; top:50%; border-top:2px solid currentColor; transform:rotate(-30deg);}
#promptBtn .pm-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
#centerEntryModule #promptBtn:hover{filter:brightness(1.12);}
#centerEntryModule #promptToggleWrap .ui-state-active{background:#2e9b3e; color:#fff; border-color:#145a1f; box-shadow:inset 0 0 5px #b6ff9e;}
.nerdMode #promptToggleWrap{display:none;}                               /* Big Brain has no overlay */

/* ---- Learn mode: its toggle top right, as Big Brain's is in the controls (Type the
   Flags); in the map games it sits in the top-right group (#geoTools) ---- */
#learnModeContainer{position:absolute; z-index:20; top:9px; right:17px;}
.geo-module #learnModeContainer{position:relative; z-index:auto; top:auto; right:auto;}
#learnModeContainer label{font-size:1.05em;}
#learnModeContainer .ui-button-text > span{vertical-align:middle;}
#learnModeContainer .fa{vertical-align:middle; font-size:1.3em; margin-right:4px;}
#learnModeContainer .toggleText .fa-solid{vertical-align:middle; font-size:1.1em; margin-right:3px;}
#centerEntryModule #learnModeContainer .ui-state-active{background:#2e9b3e; color:#fff; border-color:#145a1f; box-shadow:inset 0 0 5px #b6ff9e;}
/* its levels, under the toggle while it is on */
#learnLevels{display:none; margin-top:5px; text-align:right;}
.learnMode #learnLevels{display:block;}
#learnLevels .ui-button{margin:0;}
#learnLevels .ui-button-text{padding:.15em .75em; font-weight:800;}
#centerEntryModule #learnLevels .ui-state-active{background:#2e9b3e; color:#fff; border-color:#145a1f;}
#geoLearnNote{display:none; position:absolute; z-index:11; right:6%; bottom:10px; padding:3px 12px; border-radius:10px; background:#2e9b3e; color:#fff; font-weight:700; font-size:.9em;}
.learnMode #geoLearnNote{display:block;}
.geo-module #geoLearnNote{right:12px; bottom:calc(var(--geo-pad-bot, 150px) + 8px);}   /* the map games: just above the letters */

/* ---- the real input, invisible over the flags game's letter row ---- */
#blockDivContainer #geoInput{position:absolute; inset:0; z-index:2; width:100%; height:100%; opacity:0; border:0; padding:0; margin:0; font-size:16px; /* 16px: no iOS zoom */
	background:transparent; color:transparent; caret-color:transparent; cursor:text;}

/* ---- the score tables' difficulty column ---- */
#highScoreContainer td.shortCol span{white-space:nowrap;}

/* ---- the admin checker (?admin=1) ---- */
.geo-admin{max-width:1100px; margin:18px auto 0; padding:12px 14px 14px; border:3px dashed #9e47ff; border-radius:12px; background:#fff; color:#1f2a30; font-size:14px;}
.geo-admin .ga-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px;}
.geo-admin .ga-head strong{font-size:1.15em; color:#4b008d;}
.geo-admin .ga-only{padding:1px 8px; border-radius:9px; background:#efe2ff; color:#4b008d; font-size:.8em; font-weight:700;}
.geo-admin .ga-links{margin-left:auto;}
.geo-admin .ga-bar{display:flex; align-items:center; gap:12px; margin:10px 0 4px;}
.geo-admin .ga-bar button{padding:6px 14px; border:1px solid #4b008d; border-radius:6px; background:#ba6cff; color:#2e0057; font-weight:700; cursor:pointer;}
.geo-admin .ga-bar button:hover{background:#cb91ff;}
.geo-admin .ga-now{flex:1; text-align:center;}
.geo-admin .ga-modes{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 2px;}
.geo-admin .ga-modes > *{margin:0;}
.geo-admin .ga-mode{padding:4px 10px; border:1px solid #c9b3ee; border-radius:14px; background:#f6f0ff; color:#3d1a70; font-weight:700; font-size:.9em; cursor:pointer;}
.geo-admin .ga-mode span{color:#7a64a8; font-weight:400;}
.geo-admin .ga-mode:hover{background:#ecdfff;}
.geo-admin .ga-mode.ga-on{background:#ba6cff; border-color:#4b008d; color:#2e0057;}
.geo-admin .ga-mode.ga-on span{color:#2e0057;}
.geo-admin .ga-tip{margin:4px 0 8px; color:#555; font-size:.9em;}
.geo-admin .ga-scroll{max-height:420px; overflow:auto; border:1px solid #ddd; border-radius:6px; position:relative;}
.geo-admin table{width:100%; border-collapse:collapse;}
.geo-admin th{position:sticky; top:0; background:#f4ecff; color:#4b008d; text-align:left; padding:6px 8px; font-size:.85em;}
.geo-admin td{padding:5px 8px; border-top:1px solid #eee; vertical-align:top; color:#1f2a30;}
.geo-admin .ga-row{cursor:pointer;}
.geo-admin .ga-row:hover td{background:#faf6ff;}
.geo-admin .ga-row.ga-cur td{background:#ffe9cf;}
.geo-admin .ga-row.ga-warn td:first-child{box-shadow:inset 4px 0 0 #e06a00;}
.geo-admin .ga-alt{color:#777; font-size:.85em;}
.geo-admin .ga-w{color:#b44a00; font-size:.85em;}
.geo-admin .ga-flag{height:16px; width:auto; border:1px solid #ccc; vertical-align:middle;}

/* ---- the geography games, linked under each game (includes/geoFamily.php) ----
   The Typing Games menu's tiles (includes/menuStyles.php .nm-geo), in its
   colours (--nm-*, which follow the site's theme): United States beside
   World, each tile with its round badge, the game being played marked, the
   hub across the bottom. */
.geo-family{display:grid; grid-template-columns:2fr 3fr; gap:10px 16px; max-width:860px; margin:26px auto 34px; padding:12px 14px 14px; box-sizing:border-box;
	border:1.5px solid var(--nm-line); border-radius:16px; background:var(--nm-bg); box-shadow:var(--nm-shadow); color:var(--nm-ink);
	font-family:'Open Sans', Arial, sans-serif; text-align:left;}
.geo-family .gf-group{display:grid; gap:6px; align-content:start;}
.geo-family .gf-n2{grid-template-columns:repeat(2, minmax(0, 1fr));}
.geo-family .gf-n3{grid-template-columns:repeat(3, minmax(0, 1fr));}
.geo-family .gf-group > *, .geo-family .gf-tile > *, .geo-family .gf-txt > *, .geo-family .gf-hub > *, .geo-family .gf-head > *{margin-left:0; margin-right:0;}
.geo-family .gf-head{grid-column:1 / -1; display:flex; align-items:center; gap:6px; margin:0 0 0 2px;
	font:800 10.5px/1.3 'Open Sans', Arial, sans-serif; letter-spacing:.7px; text-transform:uppercase; color:var(--nm-muted);}
.geo-family .gf-head::after{content:''; flex:1; height:1px; background:color-mix(in srgb, var(--nm-line) 55%, transparent);}
.geo-family .gf-tile{position:relative; display:flex; align-items:center; gap:10px; margin:0; padding:7px 9px; border-radius:12px;
	background:var(--nm-tile); color:var(--nm-ink); text-decoration:none; line-height:1.15; transition:background .12s, transform .12s;}
.geo-family a.gf-tile:hover, .geo-family a.gf-tile:focus-visible{background:var(--nm-hover); color:var(--nm-ink); transform:translateY(-1px); outline:none;}
.geo-family .gf-tile.current{background:var(--nm-current); box-shadow:inset 3px 0 0 var(--nm-accent);}
/* the round badges, as the menu's: the US flag, the globe; a star or a red flag on the corner */
.geo-family .gf-art{position:relative; flex:0 0 38px; width:38px; height:38px; border-radius:50%;}
.geo-family .gf-us{background:#bf0d3e url(/images/flags/us.svg) 22% 50% / cover no-repeat; box-shadow:0 0 0 1px rgb(0 33 71 / 18%);}
.geo-family .gf-globe{background:url(/images/menu-globe.svg?v=2) center / 100% 100% no-repeat;}
.geo-family .gf-star, .geo-family .gf-flag{position:absolute; z-index:2; right:-8px; bottom:-8px; width:26px; height:26px; overflow:visible;}
.geo-family .gf-star{fill:#ffd600; stroke:#6b4300; stroke-width:2.4; stroke-linejoin:round; paint-order:stroke; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35));}   /* (the outline under the fill: half of it shows) */
.geo-family .gf-txt{display:flex; flex-direction:column; min-width:0; font-size:13.5px; font-weight:700;}
.geo-family .gf-txt small{font-size:10.5px; font-weight:600; color:var(--nm-muted); line-height:1.2;}
.geo-family .gf-tile.current .gf-txt small{color:color-mix(in srgb, var(--nm-accent) 70%, var(--nm-ink));}   /* "Playing now", the accent darkened to read on the tile */
.geo-family .gf-hub{grid-column:1 / -1; display:flex; align-items:center; gap:9px; margin:0; padding:8px 12px; border:1.5px dashed var(--nm-line); border-radius:12px;
	color:var(--nm-ink); font-size:13.5px; font-weight:700; text-decoration:none;}
.geo-family .gf-hub:hover, .geo-family .gf-hub:focus-visible{background:var(--nm-hover); border-style:solid; color:var(--nm-ink); outline:none;}
.geo-family .gf-hub .fa{font-size:1.25em; color:#1460c0;}
.geo-family .gf-go{margin-left:auto; transition:transform .12s;}
.geo-family .gf-hub:hover .gf-go{transform:translateX(3px);}
@media only screen and (max-width:760px){
	.geo-family{grid-template-columns:1fr; width:calc(100% - 24px);}
}
@media only screen and (max-width:480px){
	.geo-family .gf-n3{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (prefers-reduced-motion: reduce){
	.geo-family .gf-tile, .geo-family .gf-go{transition:none;}
	.geo-family a.gf-tile:hover, .geo-family .gf-hub:hover .gf-go{transform:none;}
}

/* ---- "Practice your misses" (includes/geoPractice.php, js/geoPractice.js) ----
   under each game, in the menu's colours like the links panel above it */
.geo-practice{max-width:860px; margin:26px auto 0; padding:14px 16px 12px; box-sizing:border-box;
	border:1.5px solid var(--nm-line); border-radius:16px; background:var(--nm-bg); box-shadow:var(--nm-shadow); color:var(--nm-ink);
	font-family:'Open Sans', Arial, sans-serif; text-align:left;}
.geo-practice + .geo-family{margin-top:16px;}
.geo-practice .gp-head, .geo-practice .gp-bar, .geo-practice .gp-go, .geo-practice .gp-item, .geo-practice .gp-add,
.geo-practice .gp-head > *, .geo-practice .gp-bar > *, .geo-practice .gp-go > *, .geo-practice .gp-item > *, .geo-practice .gp-add > *{margin-left:0; margin-right:0;}
.geo-practice .gp-head{display:flex; align-items:flex-start; gap:12px;}
.geo-practice .gp-ico{flex:0 0 40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--nm-accent); color:#fff; font-size:19px;}
.geo-practice h2{margin:2px 0 3px; padding:0; font:800 17px/1.25 'Open Sans', Arial, sans-serif; color:var(--nm-ink); text-align:left;}
.geo-practice .gp-head p{margin:0; font-size:13px; line-height:1.45; color:var(--nm-muted); max-width:none;}
.geo-practice .gp-body{margin-top:12px;}
.geo-practice .gp-empty{margin:4px 0 8px; padding:10px 12px; border-radius:10px; background:var(--nm-tile); font-size:13.5px; line-height:1.45; max-width:none;}
.geo-practice .gp-empty a{font-weight:700;}
.geo-practice .gp-bar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; margin-bottom:8px;}
.geo-practice .gp-count{font-size:13.5px;}
.geo-practice .gp-go{display:flex; flex-wrap:wrap; gap:6px;}
.geo-practice .gp-btn{margin:0; padding:6px 12px; border:1.5px solid var(--nm-line); border-radius:9px; background:var(--nm-tile); color:var(--nm-ink);
	font:700 13px/1.2 'Open Sans', Arial, sans-serif; cursor:pointer;}
.geo-practice .gp-btn:hover, .geo-practice .gp-btn:focus-visible{background:var(--nm-hover); outline:none;}
.geo-practice .gp-btn-main{border-color:#e07400; background:var(--nm-accent); color:#fff;}
.geo-practice .gp-btn-main:hover, .geo-practice .gp-btn-main:focus-visible{background:#ff9a2e;}
.geo-practice ul.gp-list{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 10px; margin:0; padding:0; list-style:none; max-height:420px; overflow:auto;}
.geo-practice li.gp-item{display:flex; align-items:center; gap:8px; margin:0; padding:6px 8px; border-radius:10px; background:var(--nm-tile); color:var(--nm-ink); border-left:3px solid transparent; list-style:none;}
.geo-practice li.gp-item.gp-p1{border-left-color:var(--nm-accent);}
.geo-practice li.gp-item.gp-p3{opacity:.78;}
.geo-practice .gp-flag{flex:0 0 auto; width:28px; height:auto; border-radius:3px; box-shadow:0 0 0 1px rgb(0 0 0 / 15%);}
.geo-practice .gp-name{flex:1 1 auto; min-width:0; color:var(--nm-ink); font-size:13.5px; font-weight:700; line-height:1.2; overflow:hidden; text-overflow:ellipsis;}
.geo-practice .gp-name small{display:block; font-size:11px; font-weight:600; color:var(--nm-muted);}
.geo-practice .gp-miss{flex:0 0 auto; min-width:24px; font-size:12px; font-weight:800; color:#c0392b; text-align:right;}
.geo-practice .gp-run{flex:0 0 auto; display:flex; gap:3px;}
.geo-practice .gp-run i{width:7px; height:7px; border-radius:50%; background:color-mix(in srgb, var(--nm-ink) 22%, transparent);}
.geo-practice .gp-run i.gp-on{background:#2fa84f;}
.geo-practice .gp-pri{flex:0 0 auto; display:flex; border:1px solid var(--nm-line); border-radius:7px; overflow:hidden;}
.geo-practice .gp-pri button{margin:0; padding:2px 6px; border:0; background:transparent; color:var(--nm-muted); font:700 10.5px/1.3 'Open Sans', Arial, sans-serif; cursor:pointer;}
.geo-practice .gp-pri button + button{border-left:1px solid var(--nm-line);}
.geo-practice .gp-pri button[aria-pressed="true"]{background:var(--nm-ink); color:var(--nm-bg);}
.geo-practice .gp-pri button[data-p="1"][aria-pressed="true"]{background:var(--nm-accent); color:#fff;}
.geo-practice .gp-del{flex:0 0 auto; margin:0; padding:2px 6px; border:0; border-radius:6px; background:transparent; color:var(--nm-muted); font-size:14px; cursor:pointer;}
.geo-practice .gp-del:hover, .geo-practice .gp-del:focus-visible{background:var(--nm-hover); color:#c0392b; outline:none;}
.geo-practice .gp-add{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-top:10px; padding-top:10px; border-top:1px solid color-mix(in srgb, var(--nm-line) 55%, transparent);}
.geo-practice .gp-add label{font-size:13px; font-weight:700;}
.geo-practice .gp-add input{flex:0 1 240px; min-width:0; margin:0; padding:6px 9px; border:1.5px solid var(--nm-line); border-radius:9px; background:#fff; color:#1f2a30; font:600 13.5px/1.2 'Open Sans', Arial, sans-serif;}
.geo-practice .gp-clear{margin:0 0 0 auto; padding:4px 6px; border:0; background:transparent; color:var(--nm-muted); font:600 12px/1.2 'Open Sans', Arial, sans-serif; text-decoration:underline; cursor:pointer;}
.geo-practice .gp-note{min-height:0; margin:0; color:var(--nm-ink); max-height:0; overflow:hidden; font-size:13px; transition:max-height .25s, margin .25s; max-width:none;}
.geo-practice .gp-note.gp-show{max-height:60px; margin-top:8px;}
.geo-practice .gp-note .fa-check-circle{color:#2fa84f;}
/* the tag on the game during a practice round */
#gpPill{position:absolute; z-index:21; top:8px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:5px 6px 5px 12px; border-radius:20px;
	background:rgb(13 30 58 / 88%); color:#fff; font:700 13px/1.2 'Open Sans', Arial, sans-serif; white-space:nowrap; box-shadow:0 4px 14px -4px rgb(0 20 50 / 60%);}
#gpPill .fa-bullseye{color:var(--nm-accent);}
/* Daily Geography: today's round already on the board (includes/geoDailyPanel.php) */
#gdDone{position:absolute; z-index:21; top:8px; left:50%; transform:translateX(-50%); padding:5px 12px; border-radius:20px;
	background:rgb(13 30 58 / 88%); color:#fff; font:700 13px/1.2 'Open Sans', Arial, sans-serif; white-space:nowrap; box-shadow:0 4px 14px -4px rgb(0 20 50 / 60%); pointer-events:none;}
#gdDone .fa-check-circle{color:#6fdc6f;}
#gpPill button{margin:0; padding:3px 10px; border:0; border-radius:12px; background:#fff; color:#1d2a4d; font:800 12px/1.2 'Open Sans', Arial, sans-serif; cursor:pointer;}
@media only screen and (max-width:760px){
	.geo-practice{width:calc(100% - 24px);}
	.geo-practice ul.gp-list{grid-template-columns:1fr;}
	#gpPill, #gdDone{top:auto; bottom:calc(var(--geo-pad-bot, 150px) + 8px); font-size:11.5px;}
}

@media only screen and (max-width:575px){
	#centerEntryModule.geo-module{display:block; height:460px;}
	#centerEntryModule.geo-module h1#geoTitle{font-size:1.15em; top:62px; padding:6px 14px 8px;}
	.geo-module #mainTitle{word-spacing:6px; letter-spacing:1px;}
	.geo-module #mainTitle.geo-long{font-size:1.22em; word-spacing:5px; letter-spacing:.5px;}   /* "Type the US State Capitals": still one line on a phone */
	.geo-module .topLeftLink{left:8px; top:6px;}
	#geoTools{top:6px; right:8px; gap:6px; transform:scale(.8); transform-origin:top right;}
	#learnModeContainer{transform:scale(.8); transform-origin:top right; right:8px;}   /* Type the Flags */
	.geo-module #learnModeContainer{transform:none; right:auto;}   /* (the map games scale their whole group) */
	#geoPrompt{font-size:.9em; top:6px; left:38px;}
	#geoPrompt:not(.geo-result){max-width:calc(100% - 180px);}
	.geo-nohelp #geoPrompt{left:8px;}
	#geoPrompt .geo-flag{height:24px;}
	#geoTabTip{left:4px; font-size:12px; padding:4px 9px 5px;}
	#geoAskTip{left:calc(50% + 22px); bottom:calc(var(--geo-pad-bot, 150px) + 48px); font-size:13.5px; padding:5px 11px 6px;}   /* (a phone: above the Tab tip, which takes the left of the same row) */
	#geoTabTip::after{left:18px;}
	#geoTabTip kbd{font-size:11px;}
	#geoPrompt .geo-capname{margin-left:20px;}
	#geoPrompt .geo-cap-star{width:11px; height:11px; left:-13px; top:-1px;}   /* the star as above, scaled to the smaller overlay */
	.geo-module #geoBottom #centerContent{padding:0 8px 6px 52px;}
	.geo-module #geoBottom #hintButton{left:8px; width:36px; height:36px;}
	.geo-module #geoBottom #hintButton i{font-size:24px;}
	.geo-module #geoBottom #blockDivContainer{height:46px; padding:3px 5px 3px 8px;}
	.geo-module #geoBottom div.blockLines{height:34px; line-height:34px; margin:0;}
	.geo-module #geoBottom div.blockLines span:last-child{height:28px; top:3px;}
	.geo-module #geoBottom #divCover{left:52px; right:8px; bottom:6px;}
	#geoHud{padding:5px 8px 7px; gap:5px;}
	#geoHud #wrapStats{gap:8px;}
	#geoHud .statsText{font-size:19px;}
	#geoHud #timerText, #geoHud #wpmText, #geoHud #flagCountText, #geoHud #scoreText{font-size:9px; letter-spacing:.3px;}
	#geoHud #thirdRow{transform:none; gap:8px;}
	#geoHud #nerdModeSelectContainer label{font-size:1em;}
	#geoHud #difficultySelectDropDown .boldFont{display:none;}
	#geoHud #difficultySelectDropDown .ui-selectmenu-button{width:112px !important;}
	#geoHud #nerdModeSelectContainer .brainIcon{height:20px;}
	#geoHud #resetBtn{padding:4px 12px; font-size:14px;}
}

/* ---- narrow screens (the geography games and Type the Flags) ----
   _y_tfg.css pins the right-hand ad at a fixed distance from the page's foot
   and fixes the How To's height to match -- which no longer added up: the ad
   ended above the top of the page and the How To ran over the footer. The ad
   goes in the flow under the game instead, and the How To is as tall as its
   text. */
@media only screen and (max-width:930px){
	body .stoFancyList{height:auto;}
	.responsiveCols .rightCol{position:static; float:none; clear:both; margin:12px auto 0; left:auto; bottom:auto; width:auto; text-align:center;}
}

/* ---- the hub (geography-games.php) ----
   Big cards, each with its game in miniature (js/geoMini.js .geoMini: the
   maps from css/_q_typingGames.css, bigger here), under the Typing Games
   menu's group names: United States, then World. */
.geo-hub{max-width:1100px; margin:0 auto; padding:6px 18px 36px;}
/* (#container: the page's own `#container li` gives every li a 30px bottom margin) */
#container .geo-hub-perks{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px; max-width:780px; margin:14px auto 4px; padding:0; list-style:none;}
#container .geo-hub-perks li{display:inline-flex; align-items:center; gap:7px; margin:0; padding:6px 13px; border:1.5px solid var(--nm-line); border-radius:20px;
	background:var(--nm-bg); color:var(--nm-ink); font:700 13.5px/1.2 'Open Sans', Arial, sans-serif;}
.geo-hub-perks li > *{margin:0;}
/* the group names: the menu's, larger -- not the page's boxed h2 */
.geo-hub h2.geo-hub-head{display:flex; align-items:center; gap:12px; margin:30px 2px 14px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; text-shadow:none;
	font:800 15px/1.2 'Open Sans', Arial, sans-serif; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-primary, #2a3a44); text-align:left;}   /* (the theme's text colour, as the page's paragraphs) */
.geo-hub h2.geo-hub-head::after{content:''; flex:1; height:2px; border-radius:2px; background:color-mix(in srgb, var(--nm-line) 70%, transparent);}
.geo-hub h2.geo-hub-head:hover{background:none; border:0;}
.geo-hub-grid{display:grid; gap:22px;}
.geo-hub-n2{grid-template-columns:repeat(2, minmax(0, 1fr));}
.geo-hub-n3{grid-template-columns:repeat(3, minmax(0, 1fr));}
.geo-card{display:flex; flex-direction:column; margin:0; border:4px solid #424a7b; border-radius:18px; overflow:hidden; background:#fff; color:#1f2a30; text-decoration:none; text-align:left;
	box-shadow:0 12px 28px -16px rgb(2 40 60 / 70%); transition:transform .15s, box-shadow .15s;}
.geo-card:hover, .geo-card:focus-visible{transform:translateY(-4px); box-shadow:0 20px 34px -16px rgb(2 40 60 / 80%); outline:none;}
.geo-card > *{margin-left:0; margin-right:0;}
/* the miniature: the whole top of the card */
.geo-card .geoMini{position:relative; display:block; margin:0; aspect-ratio:600 / 440; overflow:hidden; background:#8fd0f7; border-bottom:4px solid #424a7b;}
.geo-hub-n2 .geoMini .gm-name{bottom:14px; font-size:22px; padding:3px 12px;}
.geo-card .gm-play{font-size:72px;}
/* Type the Flags' miniature: a flag at a time, on the flags game's blue */
.geo-card .gm-flags{background:radial-gradient(ellipse at 50% 38%, #9ad9ff 0%, #73c7ff 55%, #4fa9e6 100%);}
.geo-card .gm-flagimg{position:absolute; left:50%; top:42%; height:50%; width:auto; max-width:80%; margin:0; border:3px solid #0e82cf; border-radius:6px;
	box-shadow:0 9px 15px 2px #0062b39e; opacity:0; transform:translate(-50%, -50%) scale(.9); transition:opacity .25s ease, transform .3s ease;}
.geo-card .gm-flagimg.gm-in{opacity:1; transform:translate(-50%, -50%) scale(1);}
.geo-card-body{display:flex; flex-direction:column; gap:8px; flex:1; padding:16px 20px 18px;}
.geo-card-body > *{margin-left:0; margin-right:0;}
/* white cards in every theme, so their text is set here rather than left to the theme's */
.geo-card .geo-card-body h3{margin:0; padding:0; font-family:'Suez One', 'Open Sans', sans-serif; font-weight:400; font-size:1.55em; line-height:1.15; color:#424a7b;}
.geo-card .geo-card-body p{margin:0; line-height:1.5; color:#2a3a44;}
#container .geo-card-facts{display:flex; flex-wrap:wrap; gap:6px; max-width:none; margin:2px 0 0; padding:0; list-style:none;}
#container .geo-card-facts li{margin:0; padding:3px 10px; border-radius:12px; background:#eef3fa; color:#2c3e66; font:700 12.5px/1.35 'Open Sans', Arial, sans-serif;}
.geo-card-play{align-self:flex-start; margin:auto 0 0; padding:8px 20px; border-radius:10px; background:#ff8505; color:#fff; font:800 15px/1.2 'Open Sans', Arial, sans-serif;
	box-shadow:0 4px 0 #c25e00; transition:background .12s;}
.geo-card-play .fa{margin-left:6px; transition:transform .12s;}
.geo-card:hover .geo-card-play{background:#ff9a2e;}
.geo-card:hover .geo-card-play .fa{transform:translateX(3px);}
.geo-card-new{display:inline-block; margin-left:10px; padding:2px 9px; border-radius:10px; background:#e07b00; color:#fff; font:800 .45em/1.4 'Open Sans', sans-serif; vertical-align:middle; text-transform:uppercase; letter-spacing:.06em;}
.geo-hub-more{margin:34px 0 0; text-align:center;}
/* why these games teach (.geo-sell), a way to learn with them (.geo-learn),
   who they suit (.geo-who), and a last nudge (.geo-cta). White cards like
   the game cards, in every theme. */
.geo-hub .geo-sell, .geo-hub .geo-learn, .geo-hub .geo-who{margin:44px 0 0;}
.geo-sell-lead{max-width:760px; margin:0 auto 18px; font-size:1.12em; line-height:1.55; text-align:center;}
.geo-feats{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px;}
.geo-feat.geo-feat-wide{grid-column:1 / -1;}                              /* the last one, the practice list: the whole row */
.geo-feat, .geo-who-card{position:relative; margin:0; padding:16px 18px 16px; border:3px solid #424a7b; border-radius:16px; background:#fff; color:#2a3a44; text-align:left;
	box-shadow:0 10px 24px -16px rgb(2 40 60 / 70%);}
.geo-feat > *, .geo-who-card > *, .geo-steps li > *, .geo-steps li div > *{margin-left:0; margin-right:0;}
.geo-feat .geo-feat-ico{display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 8px; margin:0 0 8px; border-radius:12px;
	background:#eef3fa; font-size:22px; line-height:1; letter-spacing:-2px;}
.geo-hub .geo-feat h3, .geo-hub .geo-who-card h3, .geo-hub .geo-steps h3{margin:0 0 6px; padding:0; font-family:'Suez One', 'Open Sans', sans-serif; font-weight:400; font-size:1.25em; line-height:1.2; color:#424a7b;}
.geo-hub .geo-feat p, .geo-hub .geo-who-card p, .geo-hub .geo-steps p{margin:0; line-height:1.5; color:#2a3a44;}
.geo-hub .geo-feat strong{color:#1f2a52;}
/* the learning path: numbered steps, a line joining them */
#container .geo-steps{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; max-width:none; margin:0; padding:0; list-style:none; counter-reset:none;}
#container .geo-steps li{display:flex; gap:12px; align-items:flex-start; margin:0; padding:16px 16px 16px 14px; border-radius:16px; background:#fff; border:3px solid #424a7b;
	box-shadow:0 10px 24px -16px rgb(2 40 60 / 70%); text-align:left; clear:none;}
.geo-steps .geo-step-n{flex:0 0 38px; width:38px; height:38px; margin:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
	background:#ff8505; color:#fff; font:800 18px/1 'Open Sans', Arial, sans-serif; box-shadow:0 3px 0 #c25e00;}
.geo-who-grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px;}
.geo-who-card{padding-top:20px; border-color:#ff8505;}
.geo-who-card .geo-who-ico{display:block; margin:0 0 6px; font-size:34px; line-height:1;}
.geo-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 14px; margin:40px 0 0; padding:22px 20px; border-radius:18px;
	background:linear-gradient(135deg, #1d3b66, #2b5f9e); color:#fff; text-align:center; box-shadow:0 14px 30px -16px rgb(2 30 60 / 80%);}
.geo-cta > *{margin:0;}
.geo-hub .geo-cta p{flex:1 1 100%; margin:0 0 4px; color:#fff; font-size:1.15em; font-weight:700;}
.geo-cta .geo-card-play{align-self:center; text-decoration:none;}
html body .geo-cta a.geo-card-play, html body .geo-cta a.geo-card-play:visited{color:#fff;}   /* (not the site's visited-link blue, once the game has been played) */
.geo-cta .geo-card-play:hover{background:#ff9a2e; color:#fff;}
@media only screen and (max-width:980px){
	.geo-feats, #container .geo-steps, .geo-who-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media only screen and (max-width:640px){
	.geo-feats, #container .geo-steps, .geo-who-grid{grid-template-columns:1fr;}
}
@media only screen and (max-width:980px){
	.geo-hub-n3{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media only screen and (max-width:640px){
	.geo-hub-n2, .geo-hub-n3{grid-template-columns:1fr;}
	.geo-hub-n2 .geoMini .gm-name{font-size:18px;}
}
@media (prefers-reduced-motion: reduce){
	.geo-card, .geo-card-play .fa, .geo-card .gm-flagimg{transition:none;}
	.geo-card:hover{transform:none;}
}

/* ---- sharing a result (js/geoShare.js): the button in the result, and its menu ---- */
.geo-share-btn{margin:0 0 0 10px; padding:4px 12px; border:0; border-radius:14px; background:#ff8a1d; color:#fff; font:800 13px/1.3 'Open Sans', Arial, sans-serif; cursor:pointer; white-space:nowrap; box-shadow:0 2px 6px -2px rgb(0 0 0 / 40%);}
.geo-share-btn:hover, .geo-share-btn:focus-visible{background:#ff9a2e; outline:none;}
.geo-share-btn .fa{margin-right:4px;}
.geo-share-menu{position:absolute; z-index:10050; width:330px; max-width:calc(100vw - 16px); box-sizing:border-box; padding:12px; border-radius:14px; background:var(--nm-bg, #e8f4fc); color:var(--nm-ink, #024a61);
	border:1.5px solid var(--nm-line, #6aaacb); box-shadow:0 18px 40px -12px rgb(2 40 60 / 55%); font-family:'Open Sans', Arial, sans-serif; text-align:left;}
.geo-share-menu > *{margin-left:0; margin-right:0;}
.geo-share-prev{min-height:60px; margin:0 0 10px; border-radius:8px; overflow:hidden; background:#0b3a6b; display:flex; align-items:center; justify-content:center; color:#d6ecff; font-size:13px;}
.geo-share-prev img{display:block; width:100%; height:auto;}
.geo-share-acts{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.geo-share-acts > *{margin:0; display:flex; align-items:center; justify-content:center; gap:6px; padding:7px 8px; border:1.5px solid var(--nm-line, #6aaacb); border-radius:9px;
	background:var(--nm-tile, rgba(2,74,97,.08)); color:var(--nm-ink, #024a61); font:700 13px/1.2 'Open Sans', Arial, sans-serif; text-decoration:none; cursor:pointer;}
.geo-share-acts > *:hover, .geo-share-acts > *:focus-visible{background:var(--nm-hover, rgba(2,74,97,.15)); color:var(--nm-ink, #024a61); outline:none;}
.geo-share-acts [data-a="native"]{grid-column:1 / -1; border-color:#e07400; background:#ff8a1d; color:#fff;}
.geo-share-acts [data-a="native"]:hover{background:#ff9a2e; color:#fff;}
.geo-share-acts button:disabled{opacity:.5; cursor:default;}
.geo-share-x{position:absolute; top:2px; right:6px; margin:0; padding:0 4px; border:0; background:transparent; color:var(--nm-muted, #4b7a8c); font-size:20px; line-height:1; cursor:pointer;}
.geo-share-menu .geo-share-x{margin:0;}
/* Type the Flags: a saved round's time and its Share button, on the game (js/ttf.js TimeEnd) */
#ttfShare{position:absolute; z-index:21; top:8px; left:50%; transform:translateX(-50%); display:flex; align-items:center; padding:5px 6px 5px 14px; border-radius:20px;
	background:rgb(13 30 58 / 88%); color:#fff; font:800 15px/1.2 'Open Sans', Arial, sans-serif; white-space:nowrap; box-shadow:0 4px 14px -4px rgb(0 20 50 / 60%);}
#ttfShare > *{margin-left:0; margin-right:0;}
#ttfShare .geo-share-btn{margin-left:10px;}

/* ---- Daily Geography (games/daily-geography.php, includes/geoDailyPanel.php) ----
   the day's game with no mode, Learn, Big Brain or overlay switch (the same
   round for everyone), and its panel under it in the menu's colours */
.geo-daily #difficultySelectDropDown, .geo-daily #nerdModeSelectContainer, .geo-daily #learnModeContainer, .geo-daily #promptToggleWrap{display:none !important;}
.geo-daily #scoreDiv{visibility:hidden;}
.gd-panel{max-width:860px; margin:26px auto 0; padding:14px 16px 12px; box-sizing:border-box; border:1.5px solid var(--nm-line); border-radius:16px;
	background:var(--nm-bg); box-shadow:var(--nm-shadow); color:var(--nm-ink); font-family:'Open Sans', Arial, sans-serif; text-align:left;}
.gd-panel + .geo-practice{margin-top:16px;}
.gd-panel .gd-head, .gd-panel .gd-grid, .gd-panel .gd-foot, .gd-panel .gd-head > *, .gd-panel .gd-grid > *, .gd-panel .gd-foot > *, .gd-panel .gd-list li > *, .gd-panel .gd-streak > *{margin-left:0; margin-right:0;}
.gd-panel .gd-head{display:flex; align-items:flex-start; gap:12px;}
.gd-panel .gd-num{flex:0 0 auto; min-width:44px; height:44px; padding:0 8px; box-sizing:border-box; border-radius:12px; display:flex; align-items:center; justify-content:center;
	background:var(--nm-accent); color:#fff; font:800 17px/1 'Open Sans', Arial, sans-serif;}
.gd-panel h2{margin:2px 0 3px; padding:0; font:800 18px/1.25 'Open Sans', Arial, sans-serif; color:var(--nm-ink); text-align:left;}
.gd-panel .gd-head p{margin:0; font-size:13px; line-height:1.45; color:var(--nm-muted); max-width:none;}
.gd-panel .gd-head p b{color:var(--nm-ink);}
.gd-panel .gd-grid{display:grid; grid-template-columns:2fr 3fr; gap:12px; margin-top:12px;}
.gd-panel .gd-you, .gd-panel .gd-board{padding:10px 12px; border-radius:12px; background:var(--nm-tile);}
.gd-panel h3{margin:0 0 6px; padding:0; font:800 11px/1.3 'Open Sans', Arial, sans-serif; letter-spacing:.7px; text-transform:uppercase; color:var(--nm-muted); text-align:left;}
.gd-panel p{max-width:none; color:var(--nm-ink);}
.gd-panel .gd-time{margin:0; font:800 34px/1.1 'Open Sans', Arial, sans-serif;}
.gd-panel .gd-marks{margin:4px 0 0; font-size:20px; letter-spacing:2px;}
.gd-panel .gd-place, .gd-panel .gd-saved{margin:4px 0 0; font-size:13px; font-weight:700;}
.gd-panel .gd-saved{color:#2fa84f;}
.gd-panel .gd-quiet{margin:0; font-size:13.5px; line-height:1.45;}
.gd-panel .gd-streak{display:flex; flex-wrap:wrap; gap:4px 14px; margin:10px 0 0; font-size:13px;}
.gd-panel .gd-key{margin:8px 0 0; font-size:11.5px; color:var(--nm-muted);}
.gd-panel ol.gd-list{margin:0; padding:0; list-style:none; max-height:340px; overflow:auto;}
.gd-panel ol.gd-list li{display:flex; align-items:center; gap:8px; margin:0; padding:4px 2px; list-style:none; color:var(--nm-ink); font-size:13.5px; border-bottom:1px solid color-mix(in srgb, var(--nm-line) 30%, transparent);}
.gd-panel ol.gd-list li:last-child{border-bottom:0;}
.gd-panel .gd-rank{flex:0 0 22px; font-weight:800; color:var(--nm-muted); text-align:right;}
.gd-panel .gd-user{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; color:var(--nm-ink); text-decoration:none;}
.gd-panel .gd-row{flex:0 0 auto; font-size:12px; letter-spacing:1px;}
.gd-panel .gd-ms{flex:0 0 auto; min-width:58px; font-weight:800; text-align:right;}
.gd-panel .gd-none{color:var(--nm-muted);}
.gd-panel .gd-foot{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:6px 14px; margin-top:10px; font-size:13px;}
.gd-panel .gd-days a{display:inline-block; margin:0 2px; padding:2px 7px; border-radius:8px; background:var(--nm-tile); color:var(--nm-ink); font-weight:700; text-decoration:none;}
.gd-panel .gd-days a:hover{background:var(--nm-hover);}
.gd-panel .gd-days a.gd-cur{background:var(--nm-accent); color:#fff;}
@media only screen and (max-width:760px){
	.gd-panel{width:calc(100% - 24px);}
	.gd-panel .gd-grid{grid-template-columns:1fr;}
}
/* the hub's Daily Geography banner (geography-games.php), and its link under each game (includes/geoFamily.php) */
.geo-daily-banner{display:flex; align-items:center; gap:14px; max-width:1100px; margin:18px auto 6px; padding:12px 16px; box-sizing:border-box; border-radius:16px;
	background:linear-gradient(135deg, #1070c4, #0a3a70); color:#fff; text-decoration:none; text-align:left; box-shadow:0 12px 26px -14px rgb(2 40 60 / 70%);}
.geo-daily-banner > *{margin-left:0; margin-right:0;}
html body .geo-daily-banner, html body .geo-daily-banner:visited, html body .geo-daily-banner:hover{color:#fff; text-decoration:none;}
.geo-daily-banner .gdb-num{flex:0 0 auto; min-width:52px; height:52px; padding:0 8px; box-sizing:border-box; border-radius:14px; display:flex; align-items:center; justify-content:center; background:#ff8a1d; font:800 20px/1 'Open Sans', Arial, sans-serif;}
.geo-daily-banner .gdb-txt{flex:1 1 auto; font:800 19px/1.25 'Open Sans', Arial, sans-serif;}
.geo-daily-banner .gdb-txt small{display:block; font-size:13.5px; font-weight:600; color:#d6ecff;}
.geo-daily-banner .gdb-go{flex:0 0 auto; padding:8px 14px; border-radius:10px; background:#fff; color:#0a3a70; font:800 14px/1.2 'Open Sans', Arial, sans-serif; white-space:nowrap;}
.geo-daily-banner:hover .gdb-go{background:#ffe9d2;}
@media only screen and (max-width:640px){
	.geo-daily-banner{flex-wrap:wrap; width:calc(100% - 24px);}
	.geo-daily-banner .gdb-go{margin-left:66px;}
}
.geo-family .gf-daily{border-style:solid; border-color:var(--nm-accent);}

/* ---- a mode's own page (includes/geoLandingSection.php): its quiz, its places, the others ---- */
.geo-land{max-width:860px; margin:26px auto 0; padding:14px 18px 14px; box-sizing:border-box; border:1.5px solid var(--nm-line); border-radius:16px;
	background:var(--nm-bg); box-shadow:var(--nm-shadow); color:var(--nm-ink); font-family:'Open Sans', Arial, sans-serif; text-align:left;}
.geo-land + .gd-panel, .geo-land + .geo-practice{margin-top:16px;}
.geo-land h2{margin:0 0 6px; padding:0; font:800 21px/1.25 'Open Sans', Arial, sans-serif; color:var(--nm-ink); text-align:left;}
.geo-land .geo-land-intro{margin:0 0 10px; font-size:14px; line-height:1.5; color:var(--nm-ink); max-width:none;}
.geo-land .geo-land-sub{margin:12px 0 6px; padding:0; font:800 11px/1.3 'Open Sans', Arial, sans-serif; letter-spacing:.7px; text-transform:uppercase; color:var(--nm-muted); text-align:left;}
.geo-land ul.geo-land-list{margin:0; padding:0; list-style:none; columns:4 150px; column-gap:16px;}
.geo-land ul.geo-land-list li{margin:0; padding:2px 0; list-style:none; break-inside:avoid; font-size:13.5px; color:var(--nm-ink);}
.geo-land .geo-land-more{display:flex; flex-wrap:wrap; gap:6px; margin:0;}
.geo-land .geo-land-more h3{flex:0 0 100%;}
.geo-land .geo-land-more a{margin:0; padding:4px 10px; border-radius:9px; background:var(--nm-tile); color:var(--nm-ink); font-size:12.5px; font-weight:700; text-decoration:none;}
.geo-land .geo-land-more a:hover{background:var(--nm-hover);}
.geo-land .geo-land-more a[aria-current="page"]{background:var(--nm-accent); color:#fff;}
@media only screen and (max-width:760px){
	.geo-land{width:calc(100% - 24px);}
}

/* ---- the practice list's button, top left of the game (in place of How to Play): the
   place being asked, onto the list or off it (js/geoPractice.js paintToggle) ---- */
#gpToggle{position:absolute; z-index:20; left:17px; top:7px; width:36px; height:36px; margin:0; padding:0; display:flex; align-items:center; justify-content:center;
	border:2px solid #005289; border-radius:50%; background:rgb(255 255 255 / 92%); color:#005289; font-size:17px; line-height:1; cursor:pointer;
	box-shadow:0 2px 6px -2px rgb(0 0 0 / 40%); transition:transform .12s, background .12s;}
.geo-module #gpToggle{left:10px; top:10px;}
#gpToggle:hover:not(:disabled), #gpToggle:focus-visible{transform:scale(1.08); outline:none;}
#gpToggle.gp-on{border-color:#e07400; background:#ff8a1d; color:#fff;}
#gpToggle:disabled{opacity:.45; cursor:default;}
@media only screen and (max-width:575px){
	.geo-module #gpToggle{left:6px; top:6px; width:30px; height:30px; font-size:14px;}
}
@media (prefers-reduced-motion: reduce){ #gpToggle{transition:none;} }
/* the overlay, clear of the button beside it */
.geo-module #gpToggle ~ .flag-container #geoPrompt:not(.geo-result){left:54px;}
@media only screen and (max-width:575px){
	.geo-module #gpToggle ~ .flag-container #geoPrompt:not(.geo-result){left:42px;}
}