main{display:flex;}
	#gameplay{width:100%;background-size:cover;background-position:center;background-attachment:fixed;}
	#gameplay > div{height:100%;background-color:rgba(0, 0, 0, 0.33);}
	#gameplay h1{text-align:center;padding-bottom:30px;font-size:46px;line-height:54px;}
	#main_content{height:100%;padding:40px;background:#fff;box-sizing:border-box;}
	.gameplay_error{background:#fff;border-radius:10px;padding-left:10px;padding-right:10px;}
	
	#frames{position:relative;overflow:hidden;border-radius:10px;}
	.frame{
		display:none;background:#fff;position:absolute;z-index:0;opacity:0;top:0;left:0;
		transform:translateX(100%);pointer-events:none;transition:transform 1s ease, opacity 1s ease;
	}
	.frame.active{display:block !important;position:relative;z-index:50;opacity:1;transform:translateX(0%);pointer-events:auto;}
	
	.frame p[data-delay], div[data-delay]{opacity:0;transform:translateY(10px);transition: opacity 2s ease, transform 0.8s ease;}
	.frame .visible {opacity:1 !important;transform: translateY(0) !important;}
	.frame .api_message{color:red;}
	
	/* ----- Infoboard frame ------ */
	.infoboard.frame {
		background: #f5f5f5;border: 15px solid #333;border-radius: 16px;padding: 20px;text-align:left;
		box-shadow: 0 0 20px rgba(0,0,0,0.5), inset 0 0 10px #111;font-family: 'Segoe UI', sans-serif;
	}
	.infoboard .frame_content *{text-align:left;}
	.infoboard h2{
		font-size:1.5rem;font-weight:bold;color:#333;text-transform:uppercase;margin-bottom:10px;border-bottom:2px solid #666;padding-bottom:6px;
		text-align:center !important;.
	}
	
	/* ----- Completed frame ------ */
	.frame.completed{background-color:#f0fdf4;border:1px solid #bbf7d0;border-left:6px solid #22c55e;border-radius:12px;box-shadow:0 2px 10px rgba(0, 0, 0, 0.05);color:#064e3b;padding:20px;}
	.frame.completed h2{text-align:center;font-size:34px;line-height:40px;}
	
	/* ----- Map frame ------ */
	.svgmap.frame{
		background: #fdf2d4;border: 7px solid #f6eccd;border-radius:7px;touch-action:none;overflow:hidden;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15),0 1px 3px rgba(0, 0, 0, 0.1);
	}
	.svgmap .zoom-buttons{ position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;gap:10px; }
    .svgmap .zoom-buttons button {
		width: 40px;height: 40px;font-size: 24px;font-weight: bold;background-color: rgba(255, 255, 255, 0.8);
		border: 1px solid #ccc;border-radius: 6px;cursor: pointer;user-select: none;
    }
    .svgmap .zoom-buttons button:active { background-color: #ddd;}
	
	.svgmap svg {width:100%;height: 100%;transform-origin:center center;transform: scale(2.9);position: relative;}
	.svgmap svg:active {cursor:grab;}
	.svgmap path{fill:#66bb6a;pointer-events:visiblePainted;}
	.svgmap text{font-size:120px;fill:#fff;paint-order: stroke;stroke: black;stroke-width: 12;pointer-events:none;}
	.svgmap .locked path{fill:#d3d3d3 !important;}
	.svgmap path:hover{cursor:pointer;fill:#1b5e20;}
	.svgmap .water{fill:#c7eafb;}
	.svgmap .water:hover{fill:#119ecb;}
	
	.svgmap .loader{display:none;padding:50px 0;text-align:center;}
	.svgmap.loading svg{display:none;}
	.svgmap.loading .zoom-buttons{display:none;}
	.svgmap.loading .loader{display:block;}
	
	
	/* ----- Book frames ------ */
	.book.frame{
		box-shadow:0 10px 40px rgba(0,0,0,0.3);padding:10px;
		background: url(images/p4.webp) right center no-repeat #fff1d9;background-size:cover;background-blend-mode:multiply;box-sizing:border-box;
	}
	.book .border{border:1px solid #777;}
	.book .b1{padding:10px;}
	.book .b2{padding:20px;}
	
	.book h2{margin-bottom:40px;padding-bottom:35px;background:url(images/bookh.png) no-repeat center bottom;}
	.book p{padding-bottom:15px;}
	.book p.title{font-size:26px;line-height:32px;font-weight:bold;}
	.book .line-with-text::before, .book .line-with-text::after {border-bottom: 1px solid #999;}
	.book .pssymb{position:absolute;z-index:1;animation: anips 15s infinite ease-in-out;opacity:0;}
	.book .pssymb:nth-child(3n){animation-delay:4s}
	.book .pssymb:nth-child(3n+1){animation-delay:8s}
	@keyframes anips { 0%, 70%{opacity: 0;}85%{opacity: 0.3;}}
	
	.book #box-review h3{border-color:#333 !important;}
	.book #box-review .star{color:#aaa;}
	.book #box-review .star.hovered{color:#aaa;}
	
	/* ----- Frame content ------ */
	
	.frames_nav{padding-bottom:20px;}
	.frames_nav .btn{padding:15px 14px;background:url(images/buttons.png) no-repeat 13px 0 #66bb6a;margin-left:5px;}
	.frames_nav .btn:first-child{margin-left:0;}
	.frames_nav .book{background-position-y:-50px;padding-left:50px;}
	.frames_nav .map{background-position-y:-100px;padding-left:52px;}
	
	.frame_scene{position:relative;overflow:hidden;}

	.frame_30_70{display:flex;}
	.frame_30_70 .frame_30{flex:0 0 30%;min-width:100px;padding:0 30px;vertical-align:top;text-align:right;}
	.frame_30_70 .frame_30 img{max-width:200px;max-height:400px;}
	.frame_30_70 > div{flex:1;padding:0;}
	
	.frame_picture{position:relative;overflow:hidden;text-align:center;}
	.frame_picture img{max-width:100%;}
	.frame_picture video{width:100%;}
	.frame_picture .char{position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;}
	.frame_picture .char img{max-height:100%;}
	
	.frame_countdown {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:48px;color:#66bb6a;padding:50px;background:white;border-radius:50%;}
	
	.frame_character{position:absolute;right:20%;bottom:0;width:25%;}
	.frame_character img{width:100%;}
	
	.frame_attr{text-align:center;font-size:13px;}
	
	.frame_text{padding: 20px 15px 0;}
	.frame_text.al p{text-align:left;}
	.frame_text p{padding-bottom:15px;font-size:17px;}
	.frame_text p:last-child{padding-bottom:0;}
	.frame_text h3{margin-bottom:10px;}
	.frame_text img{max-width:min(100%,500px);max-height:500px;}
	.frame_text audio{max-width:100%;width:300px;}
	.frame_text img.icon{width:auto;max-width:100px;float:left;margin:0 10px 10px 0;}
	.frame_text *{text-align:center;}
	.frame_text ul, ol{list-style-position:outside;margin-top:1em;padding-bottom:1em;margin-left:40px;padding-left:0;}
	.frame_text li {margin:0;padding:0;text-align:left;}
	.frame_text ul {list-style-type:disc;}
	.frame_text ol {list-style-type:decimal;}
	
	.frame_timeout{position:relative;margin-top:20px;padding-top:20px;text-align:center;}
	.frame_timeout > div{position:absolute;top:0;left:0;width:100%;height:10px;background:#66bb6a;border-radius:10px;}
	.frame_timeout > span{font-size:24px;line-height:24px;}
	
	.frame_actions{padding:20px 0;text-align:center;clear:both;display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center;}
	.frame_actions.multi .btn{margin:5px 0;display:inline-flex;justify-content:center;}
	.frame_actions.fixed .btn{width:40%;min-width:120px;}
	.frame_actions .btn{max-width:95%;box-sizing:border-box;}
	
	.frame_success h2, .frame_fail h2{color:white;text-align:center;box-shadow:0 8px 20px rgba(0, 0, 0, 0.1);padding:20px;margin:0;}
	.frame_success h2{background:#66bb6a;}
	.frame_fail h2{background:#e53935;}
	
	.shake{animation: shake 3s linear infinite;animation-duration:6s;}
	@keyframes shake {
	  0% { transform: translate(0); }
	  2% { transform: translate(-5px, 0); }
	  4% { transform: translate(5px, 0); }
	  6% { transform: translate(-5px, 0); }
	  8% { transform: translate(5px, 0); }
	  10% { transform: translate(-5px, 0); }
	  12% { transform: translate(0); }
	}
	
	/* ------ dices ------- */
	.frame_dices{padding:15px 15px 0;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;gap:15px;}
	.dice{width:100px;height:100px;position:relative;transform-style:preserve-3d;transition:transform 2s ease-out;display:inline-block;}
    .dice-face {position:absolute;width:100px;height:100px;background:white;border:2px solid #333;box-sizing:border-box;}
    .dice-front { transform: rotateY(0deg) translateZ(50px); }
    .dice-front span { font-size: 3rem;font-weight: bold;color: black;display: flex;justify-content: center; align-items: center;width: 100%;height: 100%; }
    .dice-back { transform: rotateY(180deg) translateZ(50px); }
    .dice-right { transform: rotateY(90deg) translateZ(50px); }
    .dice-left { transform: rotateY(-90deg) translateZ(50px); }
    .dice-top { transform: rotateX(90deg) translateZ(50px); }
    .dice-bottom { transform: rotateX(-90deg) translateZ(50px); }
	
	/* ------ Answer map form ------- */
	#map-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:white;z-index:9999;display:none;flex-direction:column;}
	#map-close{
		position:absolute;top:10px;right:10px;width:40px;height:40px;border:none;background:white;font-size:23px;
		border-radius:50%;z-index:10000;box-shadow:0 2px 5px rgba(0,0,0,0.2);cursor:pointer;
	}
	#map{height:100%;}
	
	/* ------ Answer ------- */
	#success_content h2{text-align:center;margin:0 0 10px;}
	#success_content a{text-decoration:underline;}
	#success_content .img{text-align:center;margin-bottom:20px;}
	#success_content img{max-width:100%;max-height:300px;}
	#success_content ul{margin-top:0;}
	
	/* ------ Hints ------- */
	#challenge_hints {margin-top:20px;_background: #f7f7f7;_border:1px solid #eeeeee;padding:0 20px 20px;}
	#challenge_hints .hint-row{padding-top:20px;}
	#challenge_hints p{font-size:17px;padding-bottom:7px;}
	#challenge_hints *{text-align:center;}
	#challenge_hints .hint_content{padding-top:10px;}
	#challenge_hints .hint_content img{max-width:500px;width:100%;}
	#challenge_hints .hint_actions {padding-top:10px;}
	#err-hints{margin-top:20px;display:none;}
	
	/* ------ Answer ------- */
	.grid-details-h{}
	.grid-details-h .box-grid{float:left;}
	
	.box-grid{display:grid;gap:2px;margin:0 auto;min-width:310px;max-width:500px;width:90%;margin-left:auto;margin-right:auto;}
	.grid-ctn{
		width:100%;display:grid;gap:2px;grid-template-columns:repeat(var(--grid-size), 1fr);_grid-template-rows:repeat(var(--grid-size), 1fr);
		user-select: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;
	}
	.square .grid-ctn{aspect-ratio:1/1;}
	.grid-ctn .cell{display:flex;align-items:center;justify-content:center;font-size:0.8rem;color:black;background-color:white;border:1px solid #ccc;}
	.grid-ctn .active{background-color:black;color:#fff;}
	.grid-ctn .nobr{background-color:white !important;color:black !important;border:0 none;}
	
	/* ------ Answer ------- */
	#box-answer{text-align:center;margin-top:40px;position:relative;padding-bottom:15px;}
	#box-answer.disabled .answer_block{display:none;}
	#box-answer.loading .actions,
	#box-answer.loading .frame_actions,
	#box-answer.loading .frame_timeout{display:none;}
	#box-answer.loading .loader{display:block;}
	.mappatt{background:url(images/mappatt.jpg) no-repeat center top;background-size:100%;margin-top:30px;padding-left:15px;padding-right:15px;}
	
	.answer-error{color:red;font-size:17px;line-height:23px;padding-bottom:10px;display:none;}
	.answer{}
	.answer .correct{border-color:#66bb6a;}
	.answer .incorrect{animation: shake 0.3s ease;border-color:red;}
	
	.answer_gps{display:inline-block;}
	.answer_gps input{width:110px !important;}
	.answer_gps .btn{padding:12px 50px !important;width:auto !important;}
	
	.answer_table{display:inline-block;}
	.answer table{}
	.answer th{text-align:right;vertical-align:middle;}
	.answer th, .answer td{padding:5px;}
	.answer select{
		display:inline-block;padding:6px 12px;height:44px;border:1px solid #ced4da;border-radius:5px;
		background:#fff;font-size:16px;line-height:42px;color:#495057;width:270px;box-sizing:border-box;
	}
	.answer input{
		display:inline-block;padding:6px 12px;height:44px;border:1px solid #ced4da;border-radius:5px;
		background:#fff;font-size:16px;line-height:42px;color:#495057;width:270px;box-sizing:border-box;
		transition:border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	}
	
	#box-answer .actions{margin:20px 0 0;min-height:44px;}
	#box-answer .actions p{text-align:center;font-style:italic;padding-top:7px;}
	#box-answer .btn{width:270px;text-align:center;padding:12px 0;}
	
	
	/* ---- Loader plane ------- */
	
	.plane{position:relative;height:30px;padding-top:20px;}
	.plane .progress-bar{width:0%;}
	.plane_icon{position:absolute;top:0;left:0%;}
	.plane_icon img{width:50px;}
	.plane .flag{position:absolute;top:40px;left:0;}
	.plane .flagto{position:absolute;top:40px;left:auto;right:0;}
	.plane .flag img{height:24px;border:1px solid #e6e6e6}
	
	.loading .progress-bar{animation: aniProgress 3s forwards;}
	.loading .plane_icon{animation: aniFly 3s forwards;}
	@keyframes aniProgress{from{width:0%;} to{width: 100%;}}
    @keyframes aniFly{from{left:0%;transform:translateX(0%)} to{left:100%;transform:translateX(-100%)}}
	
	/* ---- Loader dots ------- */
	
	#box-answer .loader{margin:20px;display:none;}
	.loader .dot{width: 16px;height: 16px;border-radius:50%;background-color: #eee;display:inline-block;margin:0 3px;}
	.loading .dota{animation: changeColorA 6s infinite;}
	.loading .dotb{animation: changeColorB 6s infinite;}
	.loading .dotc{animation: changeColorC 6s infinite;}
    @keyframes changeColorA{0%, 16.6% {background-color: #eee; } 16.7%, 66.6% { background-color: #66bb6a;}  66.7%, 100% {background-color: #eee;} }
    @keyframes changeColorB{0%, 33.3% {background-color: #eee; } 33.4%, 83.3% { background-color: #66bb6a;}  83.4%, 100% {background-color: #eee;} }
    @keyframes changeColorC{0%, 49.9% {background-color: #eee; } 50%, 100% { background-color: #66bb6a;} }

	/* ----- Particles ------ */

	.particle{
		position: absolute;z-index:1;width:10px;height:10px;border-radius:50%;background: rgba(102, 187, 106,1);transform: translate(-50%, -50%);
		box-shadow: 0 0 20px rgba(134,255,0,1), 0 0 40px rgba(134,255,0,1), 0 0 60px rgba(134,255,0,1), 0 0 80px rgba(134,255,0,1), 0 0 0 3px rgba(134,255,0,.1);
    }
    .particle.p1 {animation: move1 8s infinite linear alternate; }
    .particle.p3 {animation: move3 7s infinite linear alternate;}
    .particle.p5 {animation: move5 9s infinite linear alternate;}

    /* Unique keyframes for each particle */
    @keyframes move1 {
      0%   { filter: hue-rotate(0deg);width: 10px;height: 10px;top: 10%; left: 10%;opacity:0.8; }
      50%  { top: 80%; left: 30%; width: 3px;height: 3px;opacity:0.3;}
      100% { filter: hue-rotate(360deg);width: 10px;height: 10px;top: 20%; left: 90%;opacity:0.8; }
    }

    @keyframes move3 {
      0%   { filter: hue-rotate(0deg);width: 10px;height: 10px;top: 80%; left: 20%;opacity:0.8; }
      50%  { width: 5px;height: 5px;top: 40%; left: 60%;opacity:0.3; }
      100% { filter: hue-rotate(360deg);width: 10px;height: 10px;top: 10%; left: 30%;opacity:0.8; }
    }

    @keyframes move5 {
      0%   { filter: hue-rotate(0deg);width: 10px;height: 10px;top: 60%; left: 10%; }
      50%  {  width: 7px;height: 7px;top: 30%; left: 90%; }
      100% {filter: hue-rotate(360deg);width: 10px;height: 10px;top: 80%; left: 50%; }
    }

	/* ----- Tasks ------ */
	.tasks{}
	.tasks .task{display:flex;align-items:flex-start;background:url(images/task.png) no-repeat 0 -95px;line-height:24px;padding:5px 0 5px 33px;}
	.tasks .completed{text-decoration:line-through;background-position:0 5px;}
	
	
	/* ----- GPS ------ */
	
	#gpsettings{
		display:none;position:fixed;z-index:20000;bottom:0;left:0;font-size:14px;background:#f7f7f7;overflow:auto;
		width:100%;height:100%;box-sizing:border-box;padding:35px 20px 80px;border:1px solid #eee;
	}
	
	#gpsettings .close{
		position:absolute;top:10px;right:10px;width:40px;border:none;padding:0;
		z-index:20001;cursor:pointer;text-align:center;font-size:33px;line-height:40px;
	}
	
	#gpsettings > div{padding:12px 0;border-bottom:1px solid #eee;}
	#gpsettings .icon{float:left;margin:0 10px 0 0;}
	#gpsettings .icon img{height:20px;}
	#gpsettings .meta-highlight{color:#66bb6a;}
	#gpsettings p{line-height:20px;}
	#gpsettings ul{list-style-position:outside;list-style-type:disc;margin:0;padding:0 0 0 15px;}
	#gpsettings li{color:#555;font-size:14px;line-height:18px;padding:5px 0;}
	
	/* ----- Responsive ------ */
	
	@media (max-width: 576px) {
		#main_content{padding-left:15px;padding-right:15px;width:100%;}
		#box-answer .btn{width:205px;}
		.answer input{width:205px;}
		.frame_actions.fixed .btn{width:100%;}
	}

	@media (max-width: 768px){
		h1 {color:#fff;}
		#main_content {background:none;}
		#frames {background:none;}
		#gpmeta {display: none;}
		.book{padding:7px;}
		.book .b1{padding:6px;}
		.frame_timeout > div{width:calc(100% - 40px);margin-left:20px;}
		#box-answer{margin-top:20px;}
		.frame_text.inl_blocks > div{display:block;}
		.frame_text ul, ol{margin-left:30px;}
		.frame_text img{max-height:300px;}
		
		.frame_30_70{display:block;padding-left:15px;padding-right:15px;}
		.frame_30_70 .frame_30{padding:20px 0;text-align:center;}
		.frame_30_70 .frame_30 img{max-width:150px;}
		.frame_30_70 > div{flex: 0 1 auto;}
	}

	@media (min-width: 769px) {
		.frame_success > div{border:2px solid #66bb6a;border-radius:0 0 10px 10px;}
		.frame_scene .frame_text{position:absolute;left:3%;bottom:3%;width:94%;background:rgba(0,0,0,0.5);color:#fff;padding:15px;box-sizing:border-box;}
		#success_content .img{max-width:33%;float:left;margin:0 30px 20px 0;}
	}