@CHARSET "ISO-8859-1";


.checkboxErrorUnchecked{
	
}
.ui-widget-overlay
{
  /* Overlay modal for games - visible but clean when closing */
  opacity: 0.5 !important;
  background: rgba(0,0,0,0.5) !important;
}

.sounds:hover {
	cursor: pointer;
	cursor: hand;
}

.btnNavAmmi {
	z-index: 1000;
	cursor: pointer;
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	transition: transform 0.15s ease, background 0.15s ease;
	font-size: 0;
	position: relative;
	float: right;
	top: 0;
}
.btnNavAmmi::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 20px;
	color: #555;
}
.btnNavAmmi:hover { transform: scale(1.1); background: white; }
.btnNavAmmi:disabled { opacity: 0.4; cursor: default; transform: none; }
.btnNavAmmi.prev::before { content: "\f053"; }
.btnNavAmmi.next::before { content: "\f054"; }
.btnNavAmmi.closeAmmi::before { content: "\f00d"; color: #e74c3c; font-size: 22px; }
.btnNavAmmi.closeAmmi:hover { background: #fee; }


.prevAmmi {
	z-index: 6;
	cursor: pointer;
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	transition: transform 0.15s ease, background 0.15s ease;
	font-size: 0;
	position: relative;
}
.prevAmmi::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f053";
	font-size: 20px;
	color: #555;
	-webkit-font-smoothing: antialiased;
}
.prevAmmi:hover { transform: scale(1.1); background: white; }
.prevAmmi:disabled { opacity: 0.4; cursor: default; transform: none; }

.nextAmmi {
	z-index: 6;
	cursor: pointer;
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	transition: transform 0.15s ease, background 0.15s ease;
	font-size: 0;
	position: relative;
	margin-left: 3px;
	margin-right: 3px;
}
.nextAmmi::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f054";
	font-size: 20px;
	color: #555;
	-webkit-font-smoothing: antialiased;
}
.nextAmmi:hover { transform: scale(1.1); background: white; }
.nextAmmi:disabled { opacity: 0.4; cursor: default; transform: none; }

#headerGame .close {
	z-index: 6;
	cursor: pointer;
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	transition: transform 0.15s ease, background 0.15s ease;
	font-size: 0;
	position: relative;
}
#headerGame .close::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f00d";
	font-size: 22px;
	color: #e74c3c;
	-webkit-font-smoothing: antialiased;
}
#headerGame .close:hover { transform: scale(1.1); background: #fee; }
#headerGame .close:disabled { opacity: 0.4; cursor: default; transform: none; }

#headerGame .close.WindowHelp{
	position:absolute;
	top:0px;
	right:0px;
}

#headerGame .close.WindowVideo{
	position:absolute;
	top:-20px;
	right:-20px;
}


.acasa, .ajutor, .repeta, .verifica {
	z-index: 6;
	cursor: pointer;
	width: 60px; height: 60px;
	margin: 0 8px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 3px solid var(--btn-interactive_activity_controls-bg, #fbbf24);
	border-radius: 50%;
	background-color: var(--btn-interactive_activity_controls-bg, #fbbf24);
	color: var(--btn-interactive_activity_controls-color, #000);
	background-image: none !important;
	background-size: 0 !important;
	box-shadow: 0 3px 10px rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.1);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	font-size: 24px;
	position: relative;
	line-height: 1;
}
.acasa i, .ajutor i, .repeta i, .verifica i {
	font-size: 26px !important;
	color: inherit !important;
	font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif !important;
	font-weight: 900 !important;
	display: inline-block !important;
	visibility: visible !important;
	opacity: 1 !important;
	-webkit-font-smoothing: antialiased;
}

.acasa:hover, .ajutor:hover, .repeta:hover, .verifica:hover {
	transform: scale(1.1);
	box-shadow: 0 5px 15px rgba(0,0,0,0.2), 0 2px 5px rgba(0,0,0,0.12);
}
.acasa:active, .ajutor:active, .repeta:active, .verifica:active {
	transform: scale(0.95);
	box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.acasa:disabled, .ajutor:disabled, .repeta:disabled, .verifica:disabled {
	cursor: default;
	opacity: 0.4;
	transform: none;
	box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
/* Transcript and task sound (GameTranscript, GameTaskAudio): in the top bar, left of the
   navigation and close buttons, with their look. On the phone they also carry .btnNavAmmi. */
#headerGame { white-space: nowrap; }
.gameTopBtn {
	z-index: 6;
	cursor: pointer;
	width: 44px; height: 44px;
	margin: 0 3px 0 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: top;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	transition: transform 0.15s ease, background 0.15s ease;
	color: #555;
	position: relative;
	line-height: 1;
}
.btnNavAmmi.gameTopBtn { margin: 0; }
.gameTopBtn i {
	font-size: 19px;
	color: inherit;
	-webkit-font-smoothing: antialiased;
}
.gameTopBtn:hover { transform: scale(1.1); background: white; }
/* "Only after Check" transcript: still focusable, a click explains why it stays closed. */
.gameTopBtn.is-locked,
.gameTopBtn.is-locked:hover {
	cursor: default;
	opacity: 0.4;
	transform: none;
}

/* Accessible version: confirmation before the last Check (GameA11y.confirmFinalCheck) */
.game-confirm-backdrop {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.45);
}
.game-confirm {
	width: 100%;
	max-width: 420px;
	padding: 22px 24px;
	background: #ffffff;
	color: #1f2937;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	font-family: Arial, sans-serif;
	text-align: left;
}
.game-confirm-title {
	margin: 0 0 10px;
	font-size: 20px;
	line-height: 1.3;
	color: #111827;
}
.game-confirm-text {
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.5;
}
.game-confirm-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}
.game-confirm-actions button {
	margin: 4px 0 4px 10px;
	padding: 10px 18px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
}
.game-confirm-cancel {
	background: #ffffff;
	color: #1f2937;
	border: 2px solid #6b7280;
}
.game-confirm-ok {
	background: #2563eb;
	color: #ffffff;
	border: 2px solid #2563eb;
}
.game-confirm-actions button:focus {
	outline: 3px solid #1e3a8a;
	outline-offset: 2px;
}

/* Evaluation result (evaluation-runner.js): total score and each game's score, over the book */
.evaluation-summary-backdrop {
	position: fixed;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.45);
}
.evaluation-summary {
	box-sizing: border-box;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 22px 24px;
	background: #ffffff;
	color: #1f2937;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
	font-family: Arial, sans-serif;
	text-align: left;
}
.evaluation-summary-title {
	margin: 0 0 10px;
	font-size: 20px;
	line-height: 1.3;
	color: #111827;
}
.evaluation-summary-score {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	color: #2563eb;
}
.evaluation-summary-list {
	margin: 0 0 20px;
	padding: 0 0 0 22px;
	font-size: 16px;
	line-height: 1.5;
}
.evaluation-summary-item {
	padding: 4px 0;
	border-bottom: 1px solid #e5e7eb;
}
.evaluation-summary-head::after {
	content: "";
	display: table;
	clear: both;
}
/* The author's explanations for the wrong questions of the game */
.evaluation-summary-explanations {
	margin: 6px 0 4px;
	padding: 0 0 0 18px;
	list-style: disc;
	font-size: 15px;
	line-height: 1.45;
	color: #374151;
}
.evaluation-summary-explanation {
	margin: 2px 0;
}
.evaluation-summary-question {
	display: block;
	font-weight: 600;
}
.evaluation-summary-name {
	margin-right: 12px;
}
.evaluation-summary-points {
	float: right;
	font-weight: 600;
	white-space: nowrap;
}
.evaluation-summary-actions {
	text-align: right;
}
.evaluation-summary-close {
	padding: 10px 18px;
	border-radius: 6px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	background: #2563eb;
	color: #ffffff;
	border: 2px solid #2563eb;
}
.evaluation-summary-close:focus {
	outline: 3px solid #1e3a8a;
	outline-offset: 2px;
}

/* Game pictures still loading (GameImageWait in games-engine.js): the game waits hidden, without
   changing its layout; the top bar and the footer stay. The card sits on <body>, like .game-message. */
#gameStage.game-images-loading > :not(#headerGame):not(#footerGame) {
	opacity: 0 !important;
	pointer-events: none !important;
}
.game-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 20001;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	/* left: 50% leaves only half the screen for an auto width: the text wrapped on phones */
	width: max-content;
	max-width: calc(100vw - 32px);
	padding: 22px 28px;
	background: #ffffff;
	color: #1f2937;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	text-align: center;
	transform: translate(-50%, -50%);
	pointer-events: none;
	/* Pictures that come in quickly: the card does not flash */
	animation: game-loading-in 0.2s ease-out 0.3s both;
}
.game-loading-spinner {
	width: 44px;
	height: 44px;
	margin-bottom: 12px;
	box-sizing: border-box;
	border: 5px solid #e5e7eb;
	border-top-color: var(--ui-accent, #2563eb);
	border-radius: 50%;
	animation: game-loading-spin 0.9s linear infinite;
}
@keyframes game-loading-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes game-loading-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.game-loading { animation-duration: 0.01s; }
	.game-loading-spinner { animation-duration: 2.4s; }
}



.btn_stopPlayer {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/stop1.png")no-repeat;
 cursor:pointer;
}

.btn_stopPlayer:hover {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/stop2.png")no-repeat;
 cursor:pointer;
}

.btn_stopPlayer:disabled {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/stop2.png")no-repeat;
}

.btn_playPlayer {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/play1.png")no-repeat;
 cursor:pointer;
	
}


.btn_playPlayer:hover {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/play2.png")no-repeat;
 cursor:pointer;
}

.btn_playPlayer:disabled {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/play2.png")no-repeat;
}

.btn_pausePlayer {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/pause1.png")no-repeat;
 cursor:pointer;
}


.btn_pausePlayer:hover {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/pause2.png")no-repeat;
 cursor:pointer;		
}

.btn_pausePlayer:disabled {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/pause2.png")no-repeat;
}

.starPlayer {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/starPlayer.png")no-repeat;
}
 /* .ui-slider .ui-slider-handle{
    background:url("../images/ico/pen.png") no-repeat;  background-size:cover;
} */

span.up { position:relative;cursor: pointer;font-size:3.6vw; width:50px;height:45px;align:left;color:grey; }
span.down {padding-right:10px;border-radius:50%;border-color:blue;border-style:solid; }

img.up { cursor: pointer;font-size:50px; width:150px;height:145px; }
img.down { padding-bottom:10px;border-radius:50% 50% 50% 50%;border-color:blue;border-style:solid; }
img.down[data-shape="pencil"] { 
 padding-bottom:10px;border-radius:80% 0% 80% 0%;border-color:blue;border-style:solid;
}

.image-checkbox {
    cursor: pointer;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 3px solid transparent;
    box-shadow: 0 0 4px #ccc;
    outline: 0;
    margin: 4px;
    border-radius: 12px;
}

.image-checkbox-checked {
    border-color: #2196f3;
}
 #obj1 { list-style-type: none; margin: 0; padding: 0; width: 450px; }
  #obj1 div { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
  
.image-checkbox-checked-another {
    border-color: yellow;
}
/*
img {
    border-radius: 8px;
    max-height: 160px !important;
    max-width: -webkit-fill-available;
}*/

.image-checkbox i {
    display: none;
    color: #2196f3;
}

.image-checkbox-checked {
    position: relative;
}

.image-checkbox-checked i {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
}

/* Footer positioning as in the old application - slightly below the stage */
#footerGame { margin-top: 15px; }

@CHARSET "ISO-8859-1";


.checkboxErrorUnchecked{
	
}
.ui-widget-overlay
{
  opacity: .50 !important; /* Make sure to change both of these, as IE only sees the second one */
  filter: Alpha(Opacity=50) !important;

  background: rgb(50, 50, 50) !important; /* This will make it darker */
}

.sounds:hover {
	cursor: pointer;
	cursor: hand;
}

.btnNavAmmi {
	z-index: 1000;
	cursor: pointer;
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	transition: transform 0.15s ease, background 0.15s ease;
	font-size: 0;
	position: relative;
	float: right;
	top: 0;
}
.btnNavAmmi::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 20px;
	color: #555;
}
.btnNavAmmi:hover { transform: scale(1.1); background: white; }
.btnNavAmmi:disabled { opacity: 0.4; cursor: default; transform: none; }
.btnNavAmmi.prev::before { content: "\f053"; }
.btnNavAmmi.next::before { content: "\f054"; }
.btnNavAmmi.closeAmmi::before { content: "\f00d"; color: #e74c3c; font-size: 22px; }
.btnNavAmmi.closeAmmi:hover { background: #fee; }

/* The second set removed - CSS-only styles are defined above */



.btn_stopPlayer {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/stop1.png")no-repeat;
 cursor:pointer;
}

.btn_stopPlayer:hover {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/stop2.png")no-repeat;
 cursor:pointer;
}

.btn_stopPlayer:disabled {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/stop2.png")no-repeat;
}

.btn_playPlayer {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/play1.png")no-repeat;
 cursor:pointer;
	
}


.btn_playPlayer:hover {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/play2.png")no-repeat;
 cursor:pointer;
}

.btn_playPlayer:disabled {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/play2.png")no-repeat;
}

.btn_pausePlayer {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/pause1.png")no-repeat;
 cursor:pointer;
}


.btn_pausePlayer:hover {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/pause2.png")no-repeat;
 cursor:pointer;		
}

.btn_pausePlayer:disabled {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/pause2.png")no-repeat;
}

.starPlayer {
 z-index:6;
 position:absolute;
 background-size:cover;
 background: url("../images/videoPlayer/starPlayer.png")no-repeat;
}
 /* .ui-slider .ui-slider-handle{
    background:url("../images/ico/pen.png") no-repeat;  background-size:cover;
} */

span.up { position:relative;cursor: pointer;font-size:3.6vw; width:50px;height:45px;align:left;color:grey; }
span.down {padding-right:10px;border-radius:50%;border-color:blue;border-style:solid; }

img.up { cursor: pointer;font-size:50px; width:150px;height:145px; }
img.down { padding-bottom:10px;border-radius:50% 50% 50% 50%;border-color:blue;border-style:solid; }
img.down[data-shape="pencil"] { 
 padding-bottom:10px;border-radius:80% 0% 80% 0%;border-color:blue;border-style:solid;
}

.image-checkbox {
    cursor: pointer;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 3px solid transparent;
    box-shadow: 0 0 4px #ccc;
    outline: 0;
    margin: 4px;
    border-radius: 12px;
}

.image-checkbox-checked {
    border-color: #2196f3;
}
 #obj1 { list-style-type: none; margin: 0; padding: 0; width: 450px; }
  #obj1 div { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; }
  
.image-checkbox-checked-another {
    border-color: yellow;
}
/*
img {
    border-radius: 8px;
    max-height: 160px !important;
    max-width: -webkit-fill-available;
}*/

.image-checkbox i {
    display: none;
    color: #2196f3;
}

.image-checkbox-checked {
    position: relative;
}

.image-checkbox-checked i {
    display: block;
    position: absolute;
    top: 10px;
    right: 10px;
}

/* The dotted baseline stays visible while typing and after validation. */
#gameStage input.text-input-dotted-gap {
    border: 0 !important;
    border-bottom: 2px dotted currentColor !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: inherit;
    cursor: text !important;
}
#gameStage input.text-input-dotted-gap:placeholder-shown {
    background: transparent !important;
}
#gameStage input.text-input-dotted-gap::placeholder {
    color: currentColor;
    opacity: 1;
}
/* : focus, not: focus-visible: the text fields are the same thing, and Safari under 15.4
   does not know: focus-visible and would show the default contour. */
#gameStage input.text-input-dotted-gap:focus {
    outline: none;
}

/* Placing place on your phone. The interrupted quenary is seen all the time:
   he's an empty box and doesn't understand that you can shoot there. How long
   Pull a piece, the free zones light up, and the one under your finger thickens. */
#gameStage .pm-mobile-drop-zone {
    box-sizing: border-box;
    border: 2px dashed #9aa7b8;
    border-radius: 12px;
    background-color: rgba(148, 163, 184, 0.10);
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

#gameStage .pm-mobile-drop-zone.pm-drop-ready {
    border-color: #38bdf8;
    background-color: rgba(56, 189, 248, 0.12);
}

#gameStage .pm-mobile-drop-zone.pm-drop-over {
    border-color: #0284c7;
    border-style: solid;
    background-color: rgba(56, 189, 248, 0.22);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

/* The full area is no longer receiving parts: it remains extinguished while firing. */
#gameStage .pm-mobile-drop-zone.pm-drop-full {
    border-color: #cbd5e1;
    background-color: rgba(203, 213, 225, 0.12);
}

/* Safety fallback for games without text under images: the parts placed
   They get their size from the Piese InArea, which beats those rules. */
#gameStage .pm-mobile-drop-zone > img {
    max-width: 100%;
    top: 0;
    left: 0;
}

#gameStage .pm-mobile-zone-card {
    margin: 0;
}

/* The finger pulls the piece, not the page (finger pulling: js / games / TouchDrag.js). */
#gameStage .pm-mobile-drop-zone > img,
#gameStage #objs img[data-K-index],
#gameStage .ui-draggable,
#gameStage .ui-sortable-handle {
    touch-action: none;
}

/* Book: an area with pieces on its picture shows the picture faded, behind the pieces
   (PuzzleMatcher._updateAreaFade). Size and place stay those of the area's own background. */
#gameStage .pm-area-faded {
    background-image: none !important;
}

#gameStage .pm-area-faded::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
    background-image: var(--pm-area-image);
    background-size: inherit;
    background-position: inherit;
    background-repeat: no-repeat;
    opacity: .3;
}

/* These rectangles already include their border in the saved scene dimensions. */
#gameStage .game-selection-checkbox[data-a-index] {
    box-sizing: border-box;
    padding: 0 !important;
    margin: 0;
    min-width: 0;
    min-height: 0;
}

#gameStage .word-gap-feedback {
    display: inline-block;
    white-space: nowrap;
}
#gameStage img.word-gap-feedback-marker {
    width: 23px !important;
    height: 23px !important;
    min-width: 23px;
    max-width: 23px !important;
    max-height: 23px !important;
    object-fit: contain;
}

/* Short Message from Check (window.GameMessage from games-engine.js).
   It sits on <body>, not in #gameStage: that one is scaled into book mode. */
.game-message {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20001;
    max-width: min(90vw, 560px);
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 18px;
    line-height: 1.35;
    text-align: center;
    color: #fff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
    pointer-events: none;
    animation: game-message-in .18s ease-out;
}
.game-message.is-warn { background: #b45309; }
.game-message.is-ok   { background: #15803d; }
.game-message.is-err  { background: #b91c1c; }
@keyframes game-message-in {
    from { opacity: 0; transform: translate(-50%, -10px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .game-message { animation: none; }
}

/* ===================================================================
   The feedback written by the author on questions (js / games / EducationalFeedback.js).
   Card on <body>, as.game- message (the scene is scaled with transformed into mode
   book); close with × or disappear at the next check.
   =================================================================== */
#eduPanel {
    position: fixed;
    z-index: 20000;
    top: 88px;
    right: 24px;
    width: min(380px, calc(100vw - 32px));
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    color: #1f2937;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .08);
    font-size: 16px;
    line-height: 1.5;
    text-align: left;
    animation: edu-panel-in .18s ease-out;
}
#eduPanel .edu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 16px;
    border-bottom: 1px solid #eef1f4;
}
#eduPanel .edu-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ui-primary, #13989d);
    color: #fff;
    font-size: 15px;
}
#eduPanel .edu-title {
    flex: 1 1 auto;
    font-size: 17px;
    font-weight: 700;
    color: var(--ui-primary, #13989d);
}
#eduPanel .edu-close {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f1f3f5;
    color: #4b5563;
    font-size: 16px;
    cursor: pointer;
}
#eduPanel .edu-close:hover { background: #e3e7eb; color: #111827; }
#eduPanel .edu-close:focus-visible { outline: 2px solid var(--ui-primary, #13989d); outline-offset: 2px; }
/* Only the body removes, and only when the text really doesn't fit. */
#eduPanel .edu-content {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding: 14px 16px 16px;
}
/* The ad for the screen reader: up, so that the card does not extend. */
#eduPanel .edu-live {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
#eduPanel .edu-entry + .edu-entry {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eef1f4;
}
#eduPanel .edu-entry-title { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #374151; }
#eduPanel .edu-entry-line { margin: 0; }
#eduPanel .edu-entry-explanation {
    margin-top: 10px;
    padding: 10px 12px;
    background: #f5f7f9;
    border-radius: 10px;
}
#eduPanel .edu-entry-explanation-label {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ui-primary, #13989d);
}
@keyframes edu-panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    #eduPanel { animation: none; }
}
/* Narrow screen: the card sits down, all across the width. */
@media (max-width: 768px) {
    #eduPanel {
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
    }
    #eduPanel .edu-content { max-height: 40vh; }
}

/* ===================================================================
   Transcript of the task sound (window.GameTranscript in games-engine.js).
   Card on <body>, like #eduPanel; it does not block the game, so it stays
   open while the pupil answers. Wide screens: moved by its title bar.
   =================================================================== */
#gameTranscript {
    position: fixed;
    /* Above the game window (20000), whatever order the two have in <body>. */
    z-index: 20002;
    top: 88px;
    left: 24px;
    width: min(400px, calc(100vw - 32px));
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    color: #1f2937;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, .22), 0 2px 8px rgba(15, 23, 42, .08);
    font-size: 16px;
    line-height: 1.55;
    text-align: left;
    animation: edu-panel-in .18s ease-out;
}
#gameTranscript:focus { outline: none; }
#gameTranscript .gt-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px 12px 16px;
    border-bottom: 1px solid #eef1f4;
    cursor: move;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
#gameTranscript .gt-head-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--ui-primary, #13989d);
    color: #fff;
    font-size: 15px;
}
#gameTranscript .gt-title {
    flex: 1 1 auto;
    font-size: 17px;
    font-weight: 700;
    color: var(--ui-primary, #13989d);
}
#gameTranscript .gt-close {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f1f3f5;
    color: #4b5563;
    font-size: 16px;
    cursor: pointer;
}
#gameTranscript .gt-close:hover { background: #e3e7eb; color: #111827; }
#gameTranscript .gt-close:focus-visible { outline: 2px solid var(--ui-primary, #13989d); outline-offset: 2px; }
#gameTranscript .gt-content {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    padding: 14px 16px 16px;
}
#gameTranscript .gt-entry + .gt-entry {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eef1f4;
}
#gameTranscript .gt-play {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--ui-primary, #13989d);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
#gameTranscript .gt-play:hover { filter: brightness(1.08); }
#gameTranscript .gt-play:focus-visible { outline: 2px solid var(--ui-primary, #13989d); outline-offset: 2px; }
#gameTranscript .gt-text {
    margin: 12px 0 0;
    white-space: pre-line;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
@media (prefers-reduced-motion: reduce) {
    #gameTranscript { animation: none; }
}
/* Narrow screen: across the width, under the game's top buttons; #eduPanel sits at the bottom. */
@media (max-width: 768px) {
    #gameTranscript {
        top: 64px;
        right: 12px;
        left: 12px;
        width: auto;
    }
    #gameTranscript .gt-head { cursor: default; touch-action: auto; }
    #gameTranscript .gt-content { max-height: 40vh; }
}

/* ===================================================================
   Feedback next to every question ("Settings game" → Next to every question).
   The icon stands in the game scene (in the text, in the corner of an item or next to it);
   Its size puts it on the script, so the screen has ~ 28px on any scaling.
   Tooltip stands on <body>, as.game- message, above game dialogue.
   =================================================================== */
button.edu-tip-btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--ui-primary, #13989d);
    color: #fff;
    font-size: 14px;
    font-style: normal;
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .3);
    transition: transform .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
button.edu-tip-btn:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(15, 23, 42, .35); }
button.edu-tip-btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
button.edu-tip-btn.is-open { background: #1f2937; }
button.edu-tip-btn.is-new { animation: edu-tip-pulse 1.1s ease-out 2; }
.edu-tip-btn.edu-tip-inline { margin-left: .3em; }
.edu-tip-btn.edu-tip-float { position: absolute; z-index: 20500; }
.edu-tip-btn.edu-tip-badge { position: absolute; top: 0; right: 0; z-index: 6; transform: translate(40%, -40%); }
.edu-tip-btn.edu-tip-badge:hover { transform: translate(40%, -40%) scale(1.08); }
@keyframes edu-tip-pulse {
    from { box-shadow: 0 0 0 0 rgba(19, 152, 157, .6), 0 2px 6px rgba(15, 23, 42, .3); }
    to   { box-shadow: 0 0 0 14px rgba(19, 152, 157, 0), 0 2px 6px rgba(15, 23, 42, .3); }
}

.edu-tip {
    position: fixed;
    z-index: 20000;
    box-sizing: border-box;
    width: max-content;
    min-width: 180px;
    max-width: 340px;
    padding: 12px 40px 12px 14px;
    background: #fff;
    color: #1f2937;
    border: 1px solid rgba(15, 23, 42, .1);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .24), 0 2px 6px rgba(15, 23, 42, .08);
    font-size: 16px;
    line-height: 1.45;
    text-align: left;
    animation: edu-tip-in .15s ease-out;
}
.edu-tip.is-above { animation-name: edu-tip-in-above; }
/* Arrow to icon: a square rotated with the edge of the slide on two sides. */
.edu-tip-arrow {
    position: absolute;
    top: -7px;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: #fff;
    border-left: 1px solid rgba(15, 23, 42, .1);
    border-top: 1px solid rgba(15, 23, 42, .1);
    transform: rotate(45deg);
}
.edu-tip.is-above .edu-tip-arrow { top: auto; bottom: -7px; transform: rotate(225deg); }
.edu-tip-close {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
}
.edu-tip-close:hover { background: #f1f3f5; color: #111827; }
.edu-tip-close:focus-visible { outline: 2px solid var(--ui-primary, #13989d); outline-offset: 1px; }
.edu-tip-body .edu-entry-line { margin: 0; }
.edu-tip-body .edu-entry-explanation {
    margin-top: 8px;
    padding: 8px 10px;
    background: #f5f7f9;
    border-radius: 8px;
}
.edu-tip-body .edu-entry-explanation-label {
    display: block;
    margin-bottom: 2px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ui-primary, #13989d);
}
.edu-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
@keyframes edu-tip-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
@keyframes edu-tip-in-above {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    button.edu-tip-btn.is-new, .edu-tip { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   VIRTUAL KEYBOARD  (#vk-host)
   Common container for simple-keyboard and MathLive.
   z- index 21000: above the game dialogue (20000).
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --keyboard-zindex: 21000;
}
#vk-host {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--keyboard-zindex);
    background: #f8f9fa;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.15);
    /* Visibility is controlled exclusively from JS (inline display). */
}
#vk-host .simple-keyboard {
    max-width: 900px;
    margin: 0 auto;
}
/* MathLive keyboard */
#vk-host .ML__keyboard {
    z-index: var(--keyboard-zindex) !important;
}

/* mathfield in the game scene */
#gameStage math-field {
    --caret-color: #333;
    font-size: inherit;
    border: 2px solid #1b8950;
    border-radius: 4px;
    padding: 2px 4px;
    background: #fff;
    outline: none;
    box-shadow: 0 0 10px #1b8950;
}
#gameStage math-field:focus-within {
    border-color: #13989d;
    box-shadow: 0 0 10px #13989d;
}
/* Hide the keyboard icon in the mathfield (the keyboard is controlled by VK) */
#gameStage math-field::part(virtual-keyboard-toggle) {
    display: none !important;
}

/* ─── Accessibility: keyboard focus and text read only by screen readers ─── */
.game-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* "Alege" options: the ring shows for the keyboard only. Separate rules: Safari under
   15.4 does not know :focus-visible and would drop the whole rule (it then shows the ring
   on click too). */
#gameStage [data-kb-option]:focus {
    outline: 3px solid #2563eb !important;
    outline-offset: 2px;
}
#gameStage [data-kb-option]:focus:not(:focus-visible) {
    outline: none !important;
}
/* Text fields: the caret alone is too weak a sign of focus. */
#gameStage input[id*="CidInput"]:focus {
    outline: 2px solid #2563eb !important;
    outline-offset: 2px;
}
/* The dotted gap keeps its line: it turns solid blue, with a light background. */
#gameStage input.text-input-dotted-gap:focus {
    outline: none !important;
    border-bottom: 2px solid #2563eb !important;
    background-color: rgba(37, 99, 235, 0.10) !important;
}
#gameStage [data-rebus-cell]:focus {
    box-shadow: inset 0 0 0 3px #2563eb;
}
/* Crossword: the boxes of the word being written (CrosswordBuilder._activate). A tint over
   the background colour, so a coloured key column keeps its colour. */
#gameStage .rebus-active {
    background-image: linear-gradient(rgba(37, 99, 235, 0.16), rgba(37, 99, 235, 0.16));
}
/* Phone crossword: the clue of that word in the lists, with the same tint
   (CrosswordBuilder._showActiveClue). */
#gameStage .rebus-clue-active {
    background-color: rgba(37, 99, 235, 0.16);
}
/* "Cuvinte ascunse": the letter with the keyboard focus (one Tab stop, the arrows move inside);
   "Memory": the card. Separate :not(:focus-visible) rules for Safari under 15.4 (see above). */
#gameStage #wordPickerGrid .wp-cell:focus {
    outline: 3px solid #1e3a8a;
    outline-offset: -3px;
    z-index: 2;
}
#gameStage #wordPickerGrid .wp-cell:focus:not(:focus-visible) {
    outline: none;
}
#gameStage .memory-card[role="button"]:focus {
    outline: 3px solid #2563eb;
    outline-offset: 3px;
    border-radius: 10px;
}
#gameStage .memory-card[role="button"]:focus:not(:focus-visible) {
    outline: none;
}
/* "Trage cuvintele" by keyboard / click: the chosen word is lifted and ringed (its own
   box-shadow is inline, hence !important); while one is chosen, the empty gaps light up. */
#gameStage [data-K-index].wp-selected,
#gameStage [data-K-index].pm-selected,
#gameStage [data-K-index].ss-selected {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #2563eb !important;
    transform: translateY(-2px);
}
#gameStage.wp-choosing [data-response][data-A-index]:not(.wp-filled) {
    background-color: rgba(37, 99, 235, 0.12);
    border-bottom-color: #2563eb !important;
}
#gameStage [data-K-index][role="button"]:focus,
#gameStage [data-response][data-A-index][role="button"]:focus {
    outline: 3px dashed #1e3a8a !important;
    outline-offset: 3px;
}
#gameStage [data-K-index][role="button"]:focus:not(:focus-visible) {
    outline: none !important;
}
/* After a click, tap or drag (jQuery UI focuses the word by script): no keyboard ring. */
#gameStage.wp-pointer [data-K-index]:focus {
    outline: none !important;
}
#gameStage [data-response][data-A-index][role="button"]:focus:not(:focus-visible) {
    outline: none !important;
}
/* "Puzzle" by keyboard / click (pieces: the rules above). A zone's keyboard target is an
   invisible button right before it, so the zone shows that button's focus; only the keyboard
   reaches it, hence :focus. While a piece is chosen, the zones that take it light up: on the
   phone with the drag colors (.pm-mobile-drop-zone above), in the book with an inner ring
   (the zone's inline background would cover a color). ShapeSorter (ss-) looks the same. */
#gameStage .pm-zone-key:focus + [data-Karea-index],
#gameStage .ss-zone-key:focus + [data-Karea-index] {
    outline: 3px dashed #1e3a8a !important;
    outline-offset: 3px;
}
/* The phone card's name sits right under the box: the ring stays inside it. */
#gameStage .pm-zone-key:focus + .pm-mobile-drop-zone {
    outline-offset: -4px;
}
#gameStage.pm-choosing [data-Karea-index].pm-drop-ready:not(.pm-mobile-drop-zone),
#gameStage.ss-choosing [data-Karea-index].ss-drop-ready {
    box-shadow: inset 0 0 0 3px #38bdf8, 0 0 0 2px rgba(56, 189, 248, 0.35);
}
#gameStage.pm-pointer [data-K-index]:focus,
#gameStage.ss-pointer [data-K-index]:focus {
    outline: none !important;
}

/* Accessible version: a verified inline answer shows its result as a sign, not only as the glow colour (QuizSelector._markResult) */
body.a11y-mode [data-qs-result]::after {
	margin-left: 4px;
	font-weight: 700;
}
body.a11y-mode [data-qs-result="correct"]::after {
	content: "\2713";
	color: #15803d;
}
body.a11y-mode [data-qs-result="wrong"]::after {
	content: "\2717";
	color: #b91c1c;
}
/* Boxes (questionType3): the sign sits just right of the box instead of inside it */
body.a11y-mode [data-qs-result]:not([data-tick-type])::after {
	position: absolute;
	left: 100%;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 6px;
	font-size: 22px;
	line-height: 1;
}
body.a11y-mode [data-qs-result="missed"]::after {
	content: "!";
	color: #b45309;
}