.game-frame {
		box-sizing:border-box;
		position:relative;
		margin:0px auto;
		padding:0px;
		max-width:min(80vh,90vw);
		--fnt-unit:clamp(3px,1cqi,8px);
		transition:0.2s;
}

.game-area {
		box-sizing:border-box;
		position:relative;
		margin:0px;
		padding:0px;
		background-color:#999999;
		width:100%;
		transition:0.2s;
}

.game-field {
		display:grid;
  		grid-template-columns: repeat(8, 1fr);
  		grid-gap:0px;
		--col-water:#336699;
		transition:0.2s;
}

.game-field > div {
		position:relative;
		box-sizing:border-box;
		background-size:cover;
		aspect-ratio:4/3;
		border:1px solid #666666;
		background-color:var(--col-water);
}

.game-field.is-locked > div {
		border:1px solid #336666;
}


.game-area div.actor {
		aspect-ratio:4/3;
		background-color:transparent;
		background-position:center center;
		background-size:cover;
		margin:0px;
		padding:0px;
}

.game-area > div.actor {
		position:absolute;
		width:12.5%;
		z-index:+48;
}

.game-area .game-field > div > div.actor {
		width:100%;
		height:100%;
		left:0px;
		top:0px;
}

.game-area div.actor > span {
		display:block;
		position:absolute;
		left:0px;right:0px;top:0px;bottom:0px;
		z-index:+2;
		background-color:transparent;
		background-position:center center;
		background-size:cover;
		background-repeat:no-repeat;
}

.game-area div.actor > abbr {
		display:block;
		position:absolute;
		right:6px;
		top:6px;
		z-index:+4;
		width:15%;
		aspect-ratio:1;
		opacity:0.5;
		border-radius:50%;
		background-color:#669999;
		color:#FFFFFF;
		transition:0.2s;
		text-decoration:none;
		cursor:help;
}

.game-area div.actor.ac-hunter > abbr {
		background-color:#990033;
}


@media screen and (max-width:719px) {
		.game-area div.actor > abbr {display:none;}
}

.game-area div.actor > abbr:hover {
		background-color:#3366CC;
		color:#FFFFFF;
		text-decoration:none;
		opacity:1.0;
}

.game-area div.actor.ac-hunter > abbr:hover {
		background-color:#CC0033;
}

.game-area div.actor > abbr::after {
		display:block;
		position:absolute;
		left:50%;top:50%;
		font-size:13px;
		z-index:+4;
		content:'i';
		font-family:Georgia,Helvetica,Serif;
		font-weight:normal;
		font-style:normal;
		transform:translate(-50%,-50%);
}

.game-area .game-field > div.can-select {
		cursor:pointer;
		border:1px dashed #66CC99;
		opacity:0.8;
}

.game-area .game-field .is-selectable {
		cursor:pointer;
		border:1px dashed #66CC99;
		opacity:0.8;
}

.game-area .game-field .is-selected {
		cursor:pointer;
		border:1px solid #FF9933;
		opacity:0.8;
}

.game-area div.actor.tr-left span {transform:scaleX(-1);}




.game-water-field > div[data-row="8"] { --col-water:#F0F0FF;}
.game-water-field > div[data-row="7"] { --col-water:#E0F0FF;background:#E0F0FF url(../img/modern/water.png) no-repeat center center;background-size:cover;}
.game-water-field > div[data-row="6"] { --col-water:#006699;}
.game-water-field > div[data-row="5"] { --col-water:#004466;}
.game-water-field > div[data-row="4"] { --col-water:#002266;}
.game-water-field > div[data-row="3"] { --col-water:#002266;}
.game-water-field > div[data-row="2"] { --col-water:#002266;}
.game-water-field > div[data-row="1"] { --col-water:#224400;}

.game-air-field > div[data-row="8"] { --col-water:#F0F0FF;}
.game-air-field > div[data-row="7"] { --col-water:#F0F0FF;}
.game-air-field > div[data-row="6"] { --col-water:#F0F0FF;}
.game-air-field > div[data-row="5"] { --col-water:#F0F0FF;}
.game-air-field > div[data-row="4"] { --col-water:#E0E0FF;}
.game-air-field > div[data-row="3"] { --col-water:#E0E0FF;}
.game-air-field > div[data-row="2"] { --col-water:#E0E0FF;}
.game-air-field > div[data-row="1"] { --col-water:#339900;}


.game-area .ac-duck span {background-image:url(../img/modern/duck.png);}
.game-area .ac-lich span {background-image:url(../img/modern/lichinka.png);}
.game-area .ac-bug span {background-image:url(../img/modern/bug.png);}
.game-area .ac-fish span {background-image:url(../img/modern/fish.png);}

.game-area .ac-motyl span {background-image:url(../img/modern/motyl.png);}
.game-area .ac-kuk span {background-image:url(../img/modern/kukolka.png);}

.game-area .ac-window span,
.game-area .ac-door span,
.game-area .ac-house span {background:#990033 url(../img/modern/window.png) no-repeat center center; background-size:cover;}

.game-area .ac-windowgrid span {background-image:url(../img/modern/window-grid.png);}
.game-area .ac-window span {background-image:url(../img/modern/window-opn.png);}
.game-area .ac-door span {background-image:url(../img/modern/door.png);}

.game-area .ac-human span {background-image:url(../img/modern/human.png);}
.game-area .ac-dragonfly span {background-image:url(../img/modern/dragonfly.png);}
.game-area .ac-bat span {background-image:url(../img/modern/bat.png);}
.game-area .ac-koz span {background-image:url(../img/modern/kozodoy.png);}
.game-area .ac-last span {background-image:url(../img/modern/lastochka.png);}

.game-area .ac-komar span {background-image:url(../img/modern/komar.png);}
.game-area .ac-berserk span {background-image:url(../img/modern/berserk.png);}

.game-area .game-water-field .ac-komar span {background-image:url(../img/modern/komar-water.png);}

.for-classic {display:none;}

/* classic scheme */

.game-frame-classic .game-area .game-field > div.can-select { border-color: #3366CC; }
.game-frame-classic .game-area .game-field .is-selectable { border-color:#3399CC;}
.game-frame-classic .game-area .game-field .is-selected { border-color:#3399CC;}

.game-frame-classic .game-area div.actor > span { background-size:contain; }

.game-frame-classic .game-area div.actor > abbr { background-color:#336699; }
.game-frame-classic .game-area div.actor.ac-hunter > abbr { background-color:#990033; }
.game-frame-classic .game-area div.actor > abbr:hover { background-color:#6699CC; }
.game-frame-classic .game-area div.actor.ac-hunter > abbr:hover { background-color:#FF0033; }

.game-frame-classic .for-classic {display:block;}
.game-frame-classic .for-modern {display:none;}

.game-frame-classic .game-water-field > div[data-row] {background-color:#CCCCCC;background-repeat:no-repeat;background-position:center center;background-size:cover;}

.game-frame-classic .game-water-field > div[data-row="8"] { --col-water:#F0F0FF;background-image:url(../img/classic/air.png);}
.game-frame-classic .game-water-field > div[data-row="7"] { --col-water:#E0F0FF;background-image:url(../img/classic/water.png);}
.game-frame-classic .game-water-field > div[data-row="6"] { --col-water:#006699;background-image:url(../img/classic/water-prev.png);}
.game-frame-classic .game-water-field > div[data-row="5"] { --col-water:#004466;background-image:url(../img/classic/water-middle.png);}
.game-frame-classic .game-water-field > div[data-row="4"], 
.game-frame-classic .game-water-field > div[data-row="3"], 
.game-frame-classic .game-water-field > div[data-row="2"] { --col-water:#002266;background-image:url(../img/classic/water-deep.png);}
.game-frame-classic .game-water-field > div[data-row="1"] { --col-water:#224400;background-image:url(../img/classic/bottom.png);}

.game-frame-classic .game-air-field > div[data-row="8"] { --col-water:#F0F0FF;}
.game-frame-classic .game-air-field > div[data-row="7"] { --col-water:#F0F0FF;}
.game-frame-classic .game-air-field > div[data-row="6"] { --col-water:#F0F0FF;}
.game-frame-classic .game-air-field > div[data-row="5"] { --col-water:#F0F0FF;}
.game-frame-classic .game-air-field > div[data-row="4"] { --col-water:#E0E0FF;}
.game-frame-classic .game-air-field > div[data-row="3"] { --col-water:#E0E0FF;}
.game-frame-classic .game-air-field > div[data-row="2"] { --col-water:#E0E0FF;}
.game-frame-classic .game-air-field > div[data-row="1"] { --col-water:#339900;}

.game-frame-classic .game-area .ac-duck span {background-image:url(../img/classic/duck.png);}
.game-frame-classic .game-area .ac-lich span {background-image:url(../img/classic/lichinka.png);}
.game-frame-classic .game-area .ac-bug span {background-image:url(../img/classic/bug.png);}
.game-frame-classic .game-area .ac-fish span {background-image:url(../img/classic/fish.png);}

.game-frame-classic .game-area .ac-motyl span {background-image:url(../img/classic/motyl.png);}
.game-frame-classic .game-area .ac-kuk span {background-image:url(../img/classic/kukolka.png);}

.game-frame-classic .game-area .ac-window span,
.game-frame-classic .game-area .ac-door span,
.game-frame-classic .game-area .ac-house span {background:#990033 url(../img/classic/window.png) no-repeat center center; background-size:cover;}

.game-frame-classic .game-area .ac-windowgrid span {background-image:url(../img/classic/window-grid.png);}
.game-frame-classic .game-area .ac-window span {background-image:url(../img/classic/window-opn.png);}
.game-frame-classic .game-area .ac-door span {background-image:url(../img/classic/door.png);}

.game-frame-classic .game-area .ac-human span {background-image:url(../img/classic/human.png);}
.game-frame-classic .game-area .ac-dragonfly span {background-image:url(../img/classic/dragonfly.png);}
.game-frame-classic .game-area .ac-bat span {background-image:url(../img/classic/bat.png);}
.game-frame-classic .game-area .ac-koz span {background-image:url(../img/classic/kozodoy.png);}
.game-frame-classic .game-area .ac-last span {background-image:url(../img/classic/lastochka.png);}

.game-frame-classic .game-area .ac-komar span {background-image:url(../img/classic/komar.png);}
.game-frame-classic .game-area .ac-berserk span {background-image:url(../img/classic/berserk.png);}

.game-frame-classic .game-area .game-water-field .ac-komar span {background-image:url(../img/classic/komar-water.png);}


/* retro scheme */

.game-frame-retro {
	padding:12px;
	background:#B9645F url(../img/retro/back.png);
}

.game-frame-retro .game-field {background-position:center center;background-repeat:no-repeat;background-size:100% 100%;}

.game-frame-retro .game-water-field {background-image:url(../img/retro/water-board.png);}

.game-frame-retro .game-air-field {background-image:url(../img/retro/air-board-light.png);}

.game-frame-retro .game-air-field[data-win="1"] {background-image:url(../img/retro/air-board-g-light.png);}
.game-frame-retro .game-air-field[data-win="1"][data-grid="0"] {background-image:url(../img/retro/air-board-light.png);}

.game-frame-retro .game-air-field[data-win="2"] {background-image:url(../img/retro/air-board-wg-light.png);}
.game-frame-retro .game-air-field[data-win="2"][data-grid="0"] {background-image:url(../img/retro/air-board-w-light.png);}

.game-frame-retro .game-area .game-field > div {border-width:1px;border-color:#996633;}

.game-frame-retro .game-area .game-field > div.can-select { border-color: #996600; }
.game-frame-retro .game-area .game-field .is-selectable { border-color:#336699;}
.game-frame-retro .game-area .game-field .is-selected { border-color:#3366CC;}

.game-frame-retro .game-area div.actor > span { background-size:contain; }

.game-frame-retro .game-area div.actor > abbr { background-color:#336699; }
.game-frame-retro .game-area div.actor.ac-hunter > abbr { background-color:#990033; }
.game-frame-retro .game-area div.actor > abbr:hover { background-color:#6699CC; }
.game-frame-retro .game-area div.actor.ac-hunter > abbr:hover { background-color:#FF0033; }


.game-frame-retro .for-classic {display:block;}
.game-frame-retro .for-modern {display:none;}

.game-frame-retro .game-air-field > div[data-row],
.game-frame-retro .game-water-field > div[data-row] {background-color:transparent;background-image:none;background-repeat:no-repeat;background-position:center center;background-size:cover;}

.game-frame-retro .game-air-field > div[data-row="8"] { --col-water:#F0F0FF;}
.game-frame-retro .game-air-field > div[data-row="7"] { --col-water:#F0F0FF;}
.game-frame-retro .game-air-field > div[data-row="6"] { --col-water:#F0F0FF;}
.game-frame-retro .game-air-field > div[data-row="5"] { --col-water:#F0F0FF;}
.game-frame-retro .game-air-field > div[data-row="4"] { --col-water:#E0E0FF;}
.game-frame-retro .game-air-field > div[data-row="3"] { --col-water:#E0E0FF;}
.game-frame-retro .game-air-field > div[data-row="2"] { --col-water:#E0E0FF;}
.game-frame-retro .game-air-field > div[data-row="1"] { --col-water:#339900;}

.game-frame-retro .game-area .ac-duck span {background-image:url(../img/retro/duck.png);}
.game-frame-retro .game-area .ac-lich span {background-image:url(../img/retro/lichinka.png);}
.game-frame-retro .game-area .ac-bug span {background-image:url(../img/retro/bug.png);}
.game-frame-retro .game-area .ac-fish span {background-image:url(../img/retro/fish.png);}

.game-frame-retro .game-area .ac-motyl span {background-image:url(../img/retro/motyl.png);}
.game-frame-retro .game-area .ac-kuk span {background-image:url(../img/retro/kukolka.png);}

/*
.game-frame-retro .game-area .ac-window span,
.game-frame-retro .game-area .ac-door span,
.game-frame-retro .game-area .ac-house span {background:#990033 url(../img/classic/window.png) no-repeat center center; background-size:cover;}
*/

.game-frame-retro .game-area .ac-windowgrid span,
.game-frame-retro .game-area .ac-window span,
.game-frame-retro .game-area .ac-door span,
.game-frame-retro .game-area .ac-window span,
.game-frame-retro .game-area .ac-door span,
.game-frame-retro .game-area .ac-house span {background:none;}

/*
.game-frame-retro .game-area .ac-windowgrid span {background-image:url(../img/classic/window-grid.png);}
.game-frame-retro .game-area .ac-window span {background-image:url(../img/classic/window-opn.png);}
.game-frame-retro .game-area .ac-door span {background-image:url(../img/classic/door.png);}
*/

.game-frame-retro .game-area .ac-human span {background-image:url(../img/retro/human.png);}
.game-frame-retro .game-area .ac-dragonfly span {background-image:url(../img/retro/dragonfly.png);}
.game-frame-retro .game-area .ac-bat span {background-image:url(../img/retro/bat.png);}
.game-frame-retro .game-area .ac-koz span {background-image:url(../img/retro/kozodoy.png);}
.game-frame-retro .game-area .ac-last span {background-image:url(../img/retro/lastochka.png);}

.game-frame-retro .game-area .ac-komar span {background-image:url(../img/retro/komar.png);}
.game-frame-retro .game-area .ac-berserk span {background-image:url(../img/retro/berserk.png);}

.game-frame-retro .game-area .game-water-field .ac-komar span {background-image:url(../img/classic/komar-water.png);}



.game-tablo {
		display:grid; 
		background-color:#E0E0E0;
		padding:6px;
		gap:8px;
		transition:0.2s;
		grid-template-columns: repeat(5, 1fr);
		align-items: stretch;
		grid-template-areas:	"hp ht cs pt pp"
					"hp hs bt ps pp"
					"hp hs ts ps pp";
}

.game-frame-retro .game-tablo {background-color:#CFCC99;}


.game-tablo > div {
	display:flex;
	position:relative;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	text-align:center;
}

.game-tablo .current-step {
	display:none;
	grid-area:cs;
	color:#CC0033;
}

.game-tablo .classic-title {
	grid-area:ct;
	text-align:left;
}

.game-tablo .modern-title {
	grid-area:mt;
	text-align:right;
}

.game-tablo .theme-switch {
	grid-area:ts;
	font-size:calc(2 * var(--fnt-unit));
	display:grid;
	grid-gap:4px;
	grid-template-columns:1fr 2fr 1fr;
}

.game-tablo .theme-switch > div {
	text-align:center;
}

.game-tablo .theme-switch img {
	min-width:24px;
	max-width:100%;
	cursor:pointer;
}

.game-tablo .theme-switch img.modern {
	filter: invert(21%) sepia(99%) saturate(1500%) hue-rotate(240deg) brightness(104%) contrast(105%);
}

.game-tablo .theme-switch img.classic {
	filter: invert(21%) sepia(99%) saturate(1500%) hue-rotate(60deg) brightness(104%) contrast(105%);
}

.game-tablo .current-step > div {
	font-size:90%;
	font-size:calc(3 * var(--fnt-unit));
	text-align:center;
	margin-bottom:6px;
}

.game-tablo .current-step > span {
	display:inline-block;
	position:relative;
	width:calc(4.5 * var(--fnt-unit));
	height:calc(4.5 * var(--fnt-unit));
	text-align:center;
	border-radius:50%;
	color:white;
	transition:0.4s;
	background-color:#006699;
}

.game-tablo .current-step > span::after {
	content: "\25B6";
	font-size:calc(3 * var(--fnt-unit));
	position:absolute;
	left:55%;top:50%;
	z-index:+4;
	color:white;
	transform:translate(-50%,-50%);
}

.game-tablo[data-step="H"] .current-step,
.game-tablo[data-step="P"] .current-step {
	display:flex;
}

.game-tablo[data-step="H"] .current-step > span {
	background-color:#CC0033;
	transform:scaleX(-1);
}

.game-tablo .hunter-title {
	grid-area:ht;
	color:#CC0033;
}

.game-tablo .prey-title {
	grid-area:pt;
	color:#006699;
}

.game-tablo .hunter-title,
.game-tablo .prey-title {
	font-size:calc(3 * var(--fnt-unit));
	text-align:center;
}

.game-tablo .hunter {
	grid-area: hs;
	color:#CC0033;
}

.game-tablo .prey {
	grid-area: ps;
	color:#006699;
}

.game-tablo .hunter,
.game-tablo .prey {
	font-size:calc(6 * var(--fnt-unit));
	font-weight:bold;
}

.game-tablo .prey-pic {
	grid-area: pp;
	text-align:center;
}

.game-tablo .hunter-pic {
	grid-area: hp;
	text-align:center;
}

.game-tablo .prey-pic img,
.game-tablo .hunter-pic img {
	width:100%;
	border-radius:8px;
	filter: grayscale(100%);
	transform:scale(0.9);
	transition:0.4s;
	min-width:24px;
}

.game-tablo[data-step="H"] .hunter-pic img,
.game-tablo[data-step="P"] .prey-pic img {
		filter:none;
		transform:scale(1);
		width:100%;
}

.game-tablo .game-button {
	grid-area:bt;
	text-align:center;
}

.game-tablo .game-button input {
	display:inline-block;
	border:none;
	background-color:#336699;
	margin:var(--fnt-unit);
	border-radius:var(--fnt-unit);
	font-size:calc(2.5 * var(--fnt-unit));
	padding:calc(1 * var(--fnt-unit)) calc(2 * var(--fnt-unit));
	color:white;
}

.game-frame-retro .game-tablo .game-button input {
	background-color:#993300;
}

.game-tablo .game-button input.game-finish,
.game-tablo.can-finish .game-button input {
	display:none;
}

.game-tablo.can-finish .game-button input.game-finish {
	background-color:#339966;
	display:inline-block;
}

@media screen and (max-width:729px) {
	font-size:12px;
}


.centmodal {
 		display:none;
}

.centmodal:has(.centdlg[open]) {
 		position:fixed;
 		left:0px;right:0px;top:0px;bottom:0px;
		z-index:+64;
		display:block;
}
.centmodal:has(.centdlg[open])::before {
		content:'';
		display:block;
 		position:fixed;
 		left:0px;right:0px;top:0px;bottom:0px;
 		background-color:#003366;
 		opacity:0.5;
}

.centdlg {
		box-sizing:border-box;
		position:fixed;
		border:0;
		border-radius:24px;
		padding:24px;
		box-shadow:0px 0px 10px #003366;
		margin:0px auto;
		top:50dvh;
		transform:translateY(-50%);
		max-width:90dvw;
		max-height:90dvh;
		overflow-y:auto;
}


.tt-actors {
		display:none;
		box-sizing:border-box;
		position:fixed;
		left:0;top:0;
		z-index:+128;
		width:auto;
		max-width:450px;
		padding:8px;
		border-radius:4px;
		background-color:#FFFFFF;
		color:#336699;
		opacity:0.9;
		transition:0.4s;
		box-shadow:0px 0px 10px #666666;
}


.tt-actors > div {display:none;top:48px;opacity:0.0;transition:0.4s;}

.tt-actors:has(.t-show),
.tt-actors > div.t-show {display:block;}

.tt-actors > div.t-show {top:0px;opacity:0.8;}

.tt-actors > div .main {
		font-size:15px;
}

.tt-actors > div .detail {
		font-size:12px;
}