/* TAKTIK game styles (ported from taktik2.php v0.41) */

/* ---- Base: the parts of W3.CSS 4.10 (incl. its normalize.css extract) the game relies on ---- */
html {box-sizing: border-box; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; overflow-x: hidden;}
*, *:before, *:after {box-sizing: inherit;}
html, body {font-family: Verdana, sans-serif; font-size: 15px; line-height: 1.5;}
body {margin: 0;}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {display: block;}
audio:not([controls]) {display: none; height: 0;}
[hidden], template {display: none;}
a {background-color: transparent; color: inherit;}
small {font-size: 80%;}
img {border-style: none; vertical-align: middle;}
button, input, select, textarea {font: inherit; margin: 0;}
button, input {overflow: visible;}
button, select {text-transform: none;}
button, [type=button], [type=reset], [type=submit] {-webkit-appearance: button;}
textarea {overflow: auto;}
::placeholder {color: inherit; opacity: 0.54;}
[type=checkbox], [type=radio] {padding: 0;}
h1 {font-size: 36px;}
h2 {font-size: 30px;}
h3 {font-size: 24px;}
h4 {font-size: 20px;}
h5 {font-size: 18px;}
h6 {font-size: 16px;}
h1, h2, h3, h4, h5, h6 {font-family: "Segoe UI", Arial, sans-serif; font-weight: 400; margin: 10px 0;}
hr {box-sizing: content-box; height: 0; overflow: visible; border: 0; border-top: 1px solid #eee; margin: 20px 0;}

/* ---- Game ---- */
:root {
  --titleSize: max(6vh,4vw);
  --textSize: max(18px, calc(5px + 1.5vw));
  --buttonSize: calc(0.75 * var(--titleSize));
  --cellWidth: max(9vw,75px);

  --size-dancer: 100px;
  --jumpHeight: -6vh;

  --mainPaddingWidth: max(0.5vw, calc(18vw - 123px));
  --statsWidth: min(99vw, calc(64vw + 246px));
}

html {
  --global-background-color: #faf0e6;
  --box-background-color: #ffe7d4;
  --grid-background-color: #fadbbd;
  --global-text-color: #eb5c36;
  --border-color: #eb5c36;
  --focus-color: #fbd7b7;
  --focus-border-color: #f9ccb3;
  --rule-background-color: #ffffff;
  --input-background-color: #ffffff;
  --expandable-color: #fcf0e3;
  --correct-background-color: rgba(250, 219, 189, 0.3); /*#fadfc4; grid-background-color @ 30% opacity*/
  --wrong-background-color: #f5d4c9;
  --key-background-color: #555555;
  --key-color: #ffffff;
}
html[data-theme='blue'] {
  --global-background-color: #eaeefc;
  --box-background-color: #cfdefc;
  --grid-background-color: #becbf6;
  --correct-background-color: rgba(190, 203, 246, 0.3);
  --wrong-background-color: #f5d4c9;
}
html[data-theme='green'] {
  --global-background-color: #f2fdf8;
  --box-background-color: #ddfdee;
  --grid-background-color: #cef6e6;
  --correct-background-color: rgba(206, 246, 230, 0.3);
  --wrong-background-color: #f5d4c9;
}
html[data-theme='dark'] {
  --global-background-color: #48331d;
  --box-background-color: #683d1b;
  --grid-background-color: #754a21;
  --global-text-color: #f8663f;
  --correct-background-color: rgba(250, 219, 189, 0.3); /*#fadfc4; grid-background-color @ 30% opacity*/
  --wrong-background-color: #f5d4c9;
  --border-color: #f8663f;
  --focus-color: #836448;
  --focus-border-color: #f8663f;
  --rule-background-color: #7e5933;
  --input-background-color: #feb77e;
  --expandable-color: #b6492c;
}
.shape1 {background-image: url("../media/Mini/shape1.png")}
.shape2 {background-image: url("../media/Mini/shape2.png")}
.shape3 {background-image: url("../media/Mini/shape3.png")}
.shape4 {background-image: url("../media/Mini/shape4.png")}
.shape5 {background-image: url("../media/Mini/shape5.png")}
.shape6 {background-image: url("../media/Mini/shape6.png")}
.shape7 {background-image: url("../media/Mini/shape7.png")}
.shape8 {background-image: url("../media/Mini/shape8.png")}
.shape9 {background-image: url("../media/Mini/shape9.png")}
.shapeC {background-image: url("../media/Mini/shapeC.png")}
.shapeT {background-image: url("../media/Mini/shapeT.png")}
.shapeS {background-image: url("../media/Mini/shapeS.png")}
.shapeR {background-image: url("../media/Mini/shapeR.png")}
.shapeY {background-image: url("../media/Mini/shapeY.png")}
.shapeB {background-image: url("../media/Mini/shapeB.png")}
.shapeK {background-image: url("../media/Mini/shapeK.png")}
.shapeM {background-image: url("../media/Mini/shapeM.png")}
.shapeX {background-image: url("../media/Mini/shapeX.png")}
.shapeW {background-image: url("../media/Mini/shapeW.png")}
.shapeQ {background-image: url("../media/Mini/shapeQ.png")}
/* torus halo over the Taktiker of a rule that wraps around (genius) */
/* lying rule (genius): crossed out when it is known (!) or hidden (Q card), and the hidden one once the stage is won */
.rule-false::after, .liar-revealed::after {content: ""; position: absolute; inset: 6% 3%; z-index: 1; pointer-events: none;	/* over the card's Taktiker (z 1, earlier), under the win panels (z 1, later) and a dragged Taktiker (z 10) */
	background: linear-gradient(to top right, transparent calc(50% - 2px), #e05d33 calc(50% - 2px), #e05d33 calc(50% + 2px), transparent calc(50% + 2px));}
.liar-revealed::after {animation: liar-cross 0.8s ease-out;}
@keyframes liar-cross {from {clip-path: inset(0 100% 0 0);} to {clip-path: inset(0 0 0 0);}}
.example-subject {position: relative;}	/* the halo of an instruction example */
.rule-halo {position: absolute; left: 0; top: -8%; width: 100%; aspect-ratio: 3; z-index: 1; pointer-events: none; background: url("../media/Mini/shapeU.png") no-repeat center / contain; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));}
[class*="shape"] {background-repeat: no-repeat; background-size: contain; background-position: center; width: 100%; height: 100%; border-radius: 10px;}
.shape- {text-align: center;}
.shape-::before {content: "="; font-size: var(--titleSize);}
* {box-sizing: border-box; color: var(--global-text-color)}
@font-face {font-family: ComoBold; src: url(../media/Como-Bold.ttf);}
@font-face {font-family: Como; src: url(../media/Como-Medium.ttf);}
body {-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
body,h1,h2,h3,h4,h5 {font-family: ComoBold, sans-serif; font-style: normal;}
body {font-size: var(--textSize); background-color: var(--global-background-color); height: 100vh;}
h1 {font-size: var(--titleSize); margin: auto; line-height: 0; padding-top: calc(var(--titleSize) / 2.25);}
button  {padding: 0 0.4em;}
.font-regular {font-family: Como, sans-serif; font-style: normal;}
body > .debug-info {position: fixed; bottom: 10px; top: unset; left: 40px;}
.debug-info {position: absolute; top: 2px; left: 2px; z-index: 1; font-size: 10px; color: black}
.debug-info div {position: absolute; transform: translate(-100%,0); color: blue; padding-right: 2px;}
#br {position: fixed; bottom: 0; right: 0; width: 0; height: 0;}

#scroll {position:fixed;bottom:0;right:40vw;z-index:99;color:black;font-size:10px}
#version {position:fixed;bottom:0;right:10px;z-index:99;color:black;font-size:10px}
#version {width:40px;height:20px;padding-top:8px;padding-right: 2px; text-align:right}
#intro {position:absolute; z-index:19; top:0; left:0; width: 100vw; height: 100vh; text-align: center; background-color:var(--global-background-color); transition: opacity 0.7s;}
#speaker {position:absolute; top: 4vh; left: 6vw; cursor:pointer}
#soundOff, .muted #soundOn {display:none}
.muted #soundOff {display:block}
#intro h1 {font-size: 10vh; height: 8vh; margin: 6vh auto; padding: 0; line-height: 1;}
.stage {margin: 25vh auto 0; width: 40vh; height: 16vh; padding-top: 5vh;}
.motto {ont-size: 3vh; margin: 0 auto 3vh; width: 40vh;}
.stage img {width: 10vh; height: 10vh; margin: 1vh}
.dancer {animation-iteration-count: infinite; height: var(--size-dancer); width: var(--size-dancer); margin: 0 auto 0 auto; transform-origin: bottom;}
.bounce {animation-name: bounce; animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);}
.delay1 {animation-duration: 1.9s;}
.delay2 {animation-duration: 1.95s;}
.delay3 {animation-duration: 2s;}
@keyframes bounce {
    0%   { transform: scale(1,1)      translateY(0); }
    10%  { transform: scale(1.1,.9)   translateY(0); }
    30%  { transform: scale(.9,1.1)   translateY(var(--jumpHeight)); }
    50%  { transform: scale(1.05,.95) translateY(0); }
    57%  { transform: scale(1,1)      translateY(-7px); }
    64%  { transform: scale(1,1)      translateY(0); }
    100% { transform: scale(1,1)      translateY(0); }
}
.button-play {font-size: 4vh; opacity:0; animation: appear 2s 2s forwards;}
.button-play button {width: 16vh}
@keyframes appear {from {opacity:0;} to {opacity:1;}}

#score, #level {font-size: var(--textSize)}

#btnInstr, #btnRestart, #btnMenu {width: var(--buttonSize); height: var(--buttonSize); font-size: calc(var(--buttonSize) * 0.8); line-height: 1.3; text-align: center; cursor:pointer}
#btnInstr, #btnRestart {border-radius: var(--buttonSize); display: inline-block;}
#btnMenu {position: absolute; top: 0; right: 0; z-index: 3}
#nav {position: absolute; top: 0; left: 0; margin: 0; z-index: 3; text-align: left}
#btnMenu {border-radius: 5px}
#nav img, #btnMenu img {width:100%}
#btnRestart {float:right; text-align: center; margin-left: calc(max(8.6vw,74px) - 2 * var(--buttonSize)); line-height: 1.1; display:none; padding-top: 1px; position:relative}
#btnRestartInfo {position: absolute; top: var(--buttonSize); left: calc(var(--buttonSize) * 1.6); width: calc(var(--buttonSize) * 2); font-size: calc(var(--textSize) * 0.8); text-align: right; color: black; background-color: var(--global-background-color); border-radius: 10px; display: none; opacity: 0; transition: opacity 0.5s;}
#btnRestartInfo img	{position: absolute; left: calc(-1 * var(--buttonSize)); top: calc(-0.3 * var(--buttonSize));}
#title {margin-bottom: calc(38vh - 13.5vw);} /*# calc((100vh - 27vw) / 2 - 12vh);}*/
.dev-label {position: fixed; top: 0; right: 50%; font-size: calc(var(--titleSize) / 4); color: black}
#score {margin: 0.15vw;}
#counters {height: calc(1vh + 5vw); position: relative;}
#level div:nth-child(3) {text-align:right}
.btn-selected, .btn-link {background-color: var(--box-background-color); text-align: center;}
.btn-link {position: absolute; top: calc(10px - var(--buttonSize)); left: 0; width: var(--buttonSize); height: var(--buttonSize);}

table {width:99%; margin:auto; border-collapse: collapse;}
header, footer {z-index:3!important}
.main {width: 100%; padding: 6vh 6vw;}
.header-div {width:100%; position: relative}
.info-frame-container {max-width: 550px; margin:auto; padding: 20vh 20px 0;}
.info-frame {background-color: var(--box-background-color); position: relative; border-radius:10px; margin:auto; padding: 10px; max-width: 500px; /*font-size: 22px;*/ text-align:center}
/*.info-frame h1 {font-size: 44px}*/
.info-frame h1 {font-size: calc(2 * var(--textSize));}
.input-frame {font-family: Como, sans-serif;}
.input-frame label {display:none}
.input-frame input {background-color: var(--rule-background-color); border: 2px solid var(--rule-background-color); border-radius:8px; width: 80%; margin: 8px 10%; padding: 6px 16px; font-size:16px;}
.input-frame input:focus {outline: none; background-color: var(--focus-color); border: 2px solid var(--focus-border-color)}
.radio-frame {position: relative; display: inline-block; width: 100px; margin: 0 15px;}
.radio-frame input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.radio-frame label {display:block; background-color: var(--input-background-color); border: 3px solid var(--input-background-color); border-radius:8px; width: 100%; padding: 10px 0; font-size:15px; cursor: pointer;}
.radio-frame label div {margin-bottom: 15px; height: 70px;}
.radio-frame input:checked ~ label {outline: none; background-color: var(--focus-color); border: 3px solid var(--focus-border-color)}
.radio-frame input:disabled ~ label {opacity: 0.7; cursor: not-allowed;}
.button-frame {text-align:right; padding-top: 16px; width: 80%; margin-left: 10%;}
.t-button, #lifeDelay {background-color:inherit; border: 2px solid; border-radius: 30px;}
.t-button:hover {background-color: var(--focus-color); cursor:pointer}
.t-button:focus {outline: none; background-color: var(--focus-color); border-style: dotted;}
.t-button:disabled {cursor: not-allowed; opacity: 0.3;}
.disabled {cursor: not-allowed; opacity: 0.3; pointer-events:none;}
.disabled-clickable {cursor: not-allowed; opacity: 0.3;}
#pLink {font-size:16px;}
/*#btnNew, #btnBack {float: left; font-size: small; margin-top: 10px; padding: 1px 8px;}*/
#btnNew, #btnBack {float: left;}
.icon-left {position: absolute; top: -25px; left: -25px; width: 80px; height: 70px; -ms-transform: rotate(-15deg); transform: rotate(-15deg);}
.icon-right {position: absolute; top: -25px; right: -25px; width: 80px; height: 70px; -ms-transform: rotate(15deg); transform: rotate(15deg);}
.message {position: absolute; top: -30px; left:0; width: calc(95% - 80px); margin-left: 80px; max-height: 55px; background-color:white; border-radius:5px; font-size: 12px; overflow-x: hidden; animation: slideIn 1.5s; transition: opacity 1s;}
.message div {width:100%}
@keyframes slideIn {from {margin-left:0px; width:0%;} to {margin-left:80px; width: calc(95% - 80px);}}

#instructions {display: none; position: absolute; z-index: 2; background-color: var(--box-background-color); height: calc(86vh - var(--buttonSize)); width: calc(25px + max(42vw, 356px)); top: calc(1vh + var(--buttonSize)); border-radius: 10px;}
#instructions h3 {height: 4vh; margin: 1vh;}
.instructions-container {overflow: hidden; padding: 5px; height: calc(86vh - var(--buttonSize))}
#instructionDiv {overflow-y: auto; height: calc(80vh - 10px - var(--buttonSize));}
ul {text-align:left}

#menuItems {display: none; position: absolute; right: 0; z-index: 2; background-color: var(--box-background-color); width: max(33vw, 180px); top: calc(1vh + var(--buttonSize)); border-radius: 10px; text-align: left}
#menuLink {right: 0; left: unset;}
.menu-item {margin: 2vh 2vw; padding: 0}
.menu-item div {display: inline-block; border-bottom: 2px solid transparent}
.menu-item:hover div {border-bottom: 2px solid}
.menu-item.disabled-clickable:hover div {border-bottom: 2px solid transparent!important}

#stats {width: 88vw; background-color: var(--global-background-color); position: absolute; z-index: 1; top: 20vh; left: 6vw; height: 79vh;}
#stats > div {position: relative; height: max(60vh, 400px);}
/*#stats > div > div {font-family: Como, sans-serif; font-size: max(11px, calc(4.5px + 0.6vw)); position: absolute; min-width: 100%; height: calc(100% - 8vh); bottom: 0;}*/
.stats-panel {font-family: Como, sans-serif; font-size: max(14px, calc(9px + 0.45vw)); position: absolute; min-width: 100%; height: calc(100% - 8vh); top: 8vh;}
/*#myStats {width: max(590px, 55vw); height: 100%; float: left;}*/
#myStats {width: calc(var(--statsWidth) - 10px - max(260px, 22vw)); height: 100%; float: left;}
#btnLScroll, #btnRScroll  {position: absolute; top: -0.5em; padding: 0.5em 1em; font-family: ComoBold, sans-serif; font-size: max(20px, calc(11px + 0.6vw)); display:none}

.stat-frame {width: 100%; overflow: hidden; scroll-behavior: smooth;}
/*.stat-container {line-height: 0; overflow: auto}*/
.stat-container {overflow: hidden; width: calc(5 * (max(110px, 10vw) + 2vw));}
/*.stat-level {display: inline-block; width: max(590px, calc(10px + 53vw))}*/
/*.stat-level {display: inline-block; width: calc(max(110px, 10vw) + 6px); float: left;}*/
.stat-level {display: inline-block; width: max(116px, calc(10.1vw + 6px)); float: left;}
.stat-level header {font-family: ComoBold, sans-serif; font-size: max(14px, calc(7px + 0.6vw)); width: 100%!important; height: max(28px, 1.9vw); padding: 3px}
/*.stat-level header div {position: absolute; text-align: center; -ms-transform: rotate(-90deg); transform: rotate(-90deg); width: max(55px, 3.5vw); height: 0; top: 50%; left: -125%;}*/
.stat-cell {border-radius: 10px; margin: 1px; padding: 3px 5px; width: max(55px, 5vw); height: max(max(55px, 3.8vw), 6.89vh); line-height: 1.15; float: left; background-color: var(--grid-background-color); cursor:pointer;}
.stat-cell:hover {border: 1px solid}
.stat-cell div:first-child {text-align: right; font-size: 0.75em; opacity: 0.75;}
.stat-pts {font-family: ComoBold, sans-serif; font-size: 1.1em;}
.stat-bon {font-size: 0.9em;}
.stats-legend {clear: both; padding-top: 8px; font-size: 0.85em; opacity: 0.8;}
.no-stat {background-color: var(--box-background-color);}
#worldStats {width: max(260px, 22vw); height: 100%; float: right;}
#worldStats > div {border-radius: 10px; padding: 5px; overflow: auto; background-color: var(--grid-background-color);}
#worldStats table {border-collapse: separate; border-spacing: 1px calc(2vh - 13px);}
#worldStats th {text-align: left; padding-bottom: 8px;}
#worldStats th:nth-child(4), #worldStats td:nth-child(4) {text-align: right}
#worldStats td {max-width: calc(max(260px, 22vw) * 0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; padding-right: 0.6em;}
#worldStats td:last-child, #worldStats th:last-child {padding-right: 0;}
#worldStats .my-score td {font-family: ComoBold, sans-serif; font-weight: bold; font-size: 1.07em; padding: 4px 0}
#worldStats .last-score td {padding-top: 7px}
.score {animation-name: alternate1;}
.level-stage {animation-name: alternate2; position: absolute; top: 0.2em; font-size: smaller; opacity: 0;}
.my-score .level-stage {top: calc(0.2em + 3px);}
.score, .level-stage {animation-duration: 5s; animation-iteration-count: infinite; animation-direction: alternate;}
@keyframes alternate1 {
	0%   { opacity: 1; }
	60%  { opacity: 1; }
	80%  { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes alternate2 {
	0%   { opacity: 0; }
	60%  { opacity: 0; }
	80%  { opacity: 1; }
	100% { opacity: 1; }
}
.clues {position: relative; width: max(42vw, 356px); float: left;}
.board-holder {width: max(27vw, 234px); float: right;}
.board-cell, .clues-div, .example-div {margin: 0.15vw; height: calc(var(--cellWidth) - 0.3vw); float: left; border-radius: 10px; transition: background 0.3s; position: relative;}
.clues-div {width: max(calc(33% - 0.2vw),116px); background-color: var(--rule-background-color)}
.example-div {width: max(31%,110px); background-color: var(--box-background-color)}
.board-cell {width: calc(var(--cellWidth) - 0.3vw); background-color: var(--grid-background-color)}
.clue-cell {width: 23px; height: 23px; margin-top: 2px; margin-left: 2px; float: left; border-radius: 2px; background: var(--grid-background-color);}
.cell {margin: 0.15vw; width: max(8.7vw,75px); display: inline-block; text-align: left;}
.half {display: inline-block; width: 40%; padding: max(1.5vw,13px) 0;}
#btnDemo, #yourTurn {position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); display: none; transition: opacity 0.3s;}
#btnDemo {width: calc(var(--cellWidth) - 0.3vw);}
#yourTurn {border-radius: 10px; line-height: 1.4; padding: 0 1vw;}
#fingerDiv {position: absolute;z-index: 11; width: var(--cellWidth); display: none; opacity: 0; transition: opacity 0.3s;}
#finger {width: 100%; margin-top: 35%; margin-left: 25%;}

.example-table {display: inline-block; float: none; max-width: 100%;}
.clue {width: 31%; display: inline-block; margin: 0 1%}
.clue-table {width: 90%; height: var(--cellWidth); border-radius: 10px;}
.clue-table td {width: 50%; position: relative; vertical-align: middle;}
.clue-table table {margin: 0; border-collapse: separate; border-spacing: 0px;}
.sol {background-color: transparent!important}
.clue-image {width:max(6.5vw, 52px); height:max(6.5vw, 52px); background-repeat: no-repeat; background-size: contain; background-position: center; transition: opacity 0.3s;}
.opaque	{opacity: 0.1}
.clue-grid {width:80%; /*max-width: 68px;*/ transition: opacity 0.3s;}
.clue-grid td {border: 1px solid var(--rule-background-color); border-radius:4px; width: 33%; min-width: 17px; padding: 16.5% 0; background-color: var(--grid-background-color)}
.example-div .clue-grid {border: 4px solid var(--rule-background-color); border-radius: 4px;}	/* a frame: the small grids of the instructions show in every theme */
.example-div .clue-grid td {border: 1px solid var(--rule-background-color)}
.clue-used {opacity: 0.5}
.grid-inner {position: absolute; left: 0; transform: translate(0,-50%) scale(0.9);}
.clue-inner {position: absolute;transform: translate(-50%,-30%) scale(0.9);}
.invisible {border:none!important; background-color: transparent!important}
.semi-invisible {opacity: 0.3}
.grey {background-color: #ddd!important}
.movable {position: absolute; z-index: 1;}
.expandable {border: 2px solid var(--expandable-color); /*background-color: var(--expandable-color)*/}
.expandable div:nth-child(1) {position: absolute; bottom: -2px; right: 4px;}
#remains {border: 2px solid var(--grid-background-color); border-radius: 10px; background-color: var(--global-background-color); position: absolute; z-index:2; display:none}
#remains div {position:relative}
.shake-text {animation-name: shaketext; animation-duration: 0.1s; animation-iteration-count: 8; animation-direction: alternate;}
.shake-icon {animation-name: shakeicon; animation-duration: 0.1s; animation-iteration-count: 9; animation-direction: alternate;}
.shape1.shake-win,.shape3.shake-win,.shape5.shake-win,.shape7.shake-win,.shape9.shake-win {animation-name: shakewin1; animation-duration: 0.1s; animation-iteration-count: 9; animation-direction: alternate;}
.shape2.shake-win,.shape4.shake-win,.shape6.shake-win,.shape8.shake-win {animation-name: shakewin2; animation-duration: 0.1s; animation-iteration-count: 9; animation-direction: alternate;}
@keyframes shaketext {from {margin-left:18px; margin-right:0;} to {margin-left:10px; margin-right:8px; text-shadow: 2px 2px yellow, -2px -2px yellow, 2px -2px yellow, -2px 2px yellow;}}
@keyframes shakeicon {from {-ms-transform: rotate(-10deg); transform: rotate(-10deg)} to {-ms-transform: rotate(-20deg); transform: rotate(-20deg)}}
@keyframes shakewin1 {from {-ms-transform: rotate(-10deg); transform: rotate(-10deg)} to {-ms-transform: rotate(10deg); transform: rotate(10deg)}}
@keyframes shakewin2 {from {-ms-transform: rotate(10deg); transform:  rotate(10deg)} to {-ms-transform: rotate(-10deg); transform: rotate(-10deg)}}
.shape1.shape-wrong,.shape3.shape-wrong,.shape5.shape-wrong,.shape7.shape-wrong,.shape9.shape-wrong {-ms-transform: scale(0.6) rotate(-450deg); transform: scale(0.6) rotate(-450deg)}
.shape2.shape-wrong,.shape4.shape-wrong,.shape6.shape-wrong,.shape8.shape-wrong {-ms-transform: scale(0.6) rotate(450deg); transform: scale(0.6) rotate(450deg)}

.win-lost {position: absolute!important; z-index:1; height: calc(3 * var(--cellWidth)); max-width: 100%; transition: opacity 1s; display: none}
#over {overflow: hidden; transition: height 1s;}
.win-lost p {font-size: var(--titleSize); margin: 1.5vw auto; white-space: nowrap;}
#winLevel p, #winDifficulty p {margin: 1vw auto; white-space: unset; line-height: 1;}
.win-jumper {opacity: 1!important; z-index: 5; position: absolute; top: calc((var(--cellWidth) - max(6.5vw, 52px)) / 2);}
.win-jumper {animation-iteration-count:3; animation-name: bounce; animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1); animation-duration: 2s;}
/*@keyframes jump-level {
    0%   { transform: scale(1,1)      translateY(0); }
    10%  { transform: scale(1.1,.9)   translateY(0); }
    30%  { transform: scale(.9,1.1)   translateY(var(--jumpHeight)); }
    50%  { transform: scale(1.05,.95) translateY(0); }
    57%  { transform: scale(1,1)      translateY(-7px); }
    64%  { transform: scale(1,1)      translateY(0); }
    100% { transform: scale(1,1)      translateY(0); }
}*/
#lost p {font-size: calc(2vw + 16px);}
.win-div {font-size: max(2vw, 18px); text-align: center; margin: auto; display: inline; position: absolute; top: 10vw; -ms-transform: translate(-50%,0); transform: translate(-50%,0);}
#winLevel .win-div {top: 10vw;}
#winDifficulty .win-div {top: 10vw; position: unset;}
.become-intermediate {position: absolute; z-index: 1; bottom: calc(0.1 * var(--cellWidth)); left: calc(0.1 * var(--cellWidth));}
.move-intermediate0 {animation: moveIntermediate0  5s 1 forwards;}
.move-intermediate1 {animation: moveIntermediate1  5s 1 forwards;}
@keyframes moveIntermediate0 {
	0%	 {left: calc(0.1 * var(--cellWidth)); opacity: 1}
	45%	 {left: calc(1.6 * var(--cellWidth)); opacity: 1}
	55%	 {left: calc(2.1 * var(--cellWidth)); opacity: 0}
	100% {left: calc(3.8 * var(--cellWidth)); opacity: 0}
}
@keyframes moveIntermediate1 {
	0%	 {left: calc(0.1 * var(--cellWidth)); opacity: 0}
	45%	 {left: calc(1.6 * var(--cellWidth)); opacity: 0}
	55%	 {left: calc(2.1 * var(--cellWidth)); opacity: 1}
	100% {left: calc(3.8 * var(--cellWidth)); opacity: 1}
}
#lost .win-div {width: 80%; display: inline-block; text-align: left; top: calc(8vw - 10px);}
.win-div div {display: table-cell; height: 90px; vertical-align: middle; }
#lost .win-div div {height: 150px}
#addLife, #gainMsg {display: none}
.button-nextLevel {position: absolute; bottom: 2.5vw; left: 0; width: 80%; margin-left: 10%;}
.t-button.left {float: left}
.t-button.right {float: right}
#lost .t-button {min-width: 60px;}
#over .t-button {min-width: 120px;}
#lifeDelay {width: 100%; overflow: hidden; background: url(../media/pxel1.png); background-size: 0 110%; background-repeat: no-repeat; transition: background-size 9s;}
#lifeDelay.run {background-size: 100% 110%}
#bugForm {width: 88vw;}
#bugForm .win-div {top: 8vw;}
#bugForm textarea {width: 100%;}
#bugSaved {display: none}

.clue-holder {width: 77px; height: 77px; border-radius: 3px; margin: auto; position: relative; background: var(--global-background-color)}
.correct {background-color: var(--correct-background-color)}
.wrong {background-color: var(--wrong-background-color)}

.align-center{text-align:center!important}

.shape-base {position: relative; margin: max(1.15vw, 9.6px);}
.shape-tray {position: absolute; z-index: 1;}
.shape-in-place {z-index:1; transition: transform 1s;}
.key {position:absolute!important; left:5%; top:0; font-size: calc(0.4 * var(--textSize));/*8px;*/ border-radius:2px; padding: 0 2px; line-height: 1; background-color: var(--key-background-color); color: var(--key-color);}
.key.num {top: 5%; left: 50%;}
.off {display: none}
.level {position: fixed; bottom: 30px; left:0; width: 100%}

#lvlPrev {position: absolute; left:0; top: -20px;}
#lvlNext {position: absolute; right:0; top: -20px;}

.arrow {border: solid; border-width: 0 3px 3px 0; display: inline-block; padding: 3px;}
.down {transform: rotate(45deg); -webkit-transform: rotate(45deg);}

::-webkit-scrollbar {width: 4px; height: 4px}
::-webkit-scrollbar-track {background: var(--box-background-color);}
::-webkit-scrollbar-thumb {background: var(--global-text-color); border-radius: 4px;}
::-webkit-scrollbar-thumb:hover {background: var(--focus-border-color)}
::-webkit-scrollbar-corner {background: var(--box-background-color);}

@media only screen and (max-width:1023px) and (orientation: landscape) {
	.main {padding: 6vh var(--mainPaddingWidth);}
	#stats {width: var(--statsWidth); left: var(--mainPaddingWidth);}
	.stat-frame {width: calc(var(--statsWidth) - 280px);}
}
/*@media (max-width:675px) {
	.main {padding: 6vh calc(54vw - 324px);}
}*/
@media only screen and (max-width:945px) /*and (orientation: landscape)*/ {
	#btnRScroll {left: -1em;}
	#btnLScroll {left: calc(4 * (max(110px, 10vw) + 2vw) - 4vw + 0.5em); display: block;}
	.stat-frame {width: calc(4 * (max(110px, 10vw) + 2vw)); margin-left: 1em;}
	.stat-level {width: calc(max(110px, 10vw) + 2vw)};
}

@media only screen and (max-width:835px) /*and (orientation: landscape)*/ {
	#btnLScroll {left: calc(3 * (max(110px, 10vw) + 2vw) - 4vw + 0.4em); display: block;}
	.stat-frame {width: calc(3 * (max(110px, 10vw) + 2vw))}
}

@media only screen and (max-width:655px) /*and (orientation: landscape)*/ {
	#btnLScroll {left: calc(2 * (max(110px, 10vw) + 2vw) - 4vw + 0.3em); display: block;}
	.stat-frame {width: calc(2 * (max(110px, 10vw) + 2vw))}
}

@media only screen and (max-width:600px) {
	body {overflow: auto;}
	.main {width: 600px;}
	.main header {width: 99vw; margin-left: 0.5vw; /*overflow: hidden;*/}
}

@media only screen and (max-width:460px) {
	.input-frame input {width: 90%; margin: 4px 5%;}
	.button-frame {width: 90%; margin-left: 5%;}
	.radio-frame {display: block; margin: 6px auto; width: 180px}
	.radio-frame label {text-align: left; padding: 15px 5px}
	.radio-frame label div {width: 50px; height: 50px; float: left; margin: -14px 8px 0 0;}
}

@media only screen and (orientation: portrait) {
	* {touch-action: none;}
	body {overflow: hidden;}
	ul {margin-left: -2vw;}
	.main {width:100vw; padding: 2vh 0.5vw;}
	.stage {margin-top: 22vh;}
	.info-frame-higher {margin-top: -4vh;}
	.stat-frame {margin-left: 1em;}
	#instructions {max-width: 100%; height: calc(93vh - var(--buttonSize));}
	.instructions-container {padding: 0; height: calc(93vh - var(--buttonSize))}
	#instructionDiv {height: calc(87vh - 4px - var(--buttonSize)); width: 100%}
	#title {margin-bottom: 5vh; width: 99.5%;}
	#stats {width: 100vw; top: 10vh;  height: 90vh; left: 0; padding: 3vh 8vw;}
	#stats > div > div {display: none}
	#stats span {cursor:pointer; opacity: 0.6}
	#stats span:hover {opacity:0.9}
	#stats .selected span {border-bottom: 2px solid; opacity:1}
	/*#stats .selected div {display: block}*/
	#stats .selected .stats-panel {display: block}
	#myStats {width: 84vw}
	.stat-container {height: auto!important; top: 8vh; bottom: unset!important; max-height: 70vh; width: calc(5 * (110px + 6vw));}
	/*.stat-level {width: calc(110px + 6vw);}*/
	#worldStats {width: 0;white-space: nowrap;}
	#worldStats span {float: right}
	#worldStats > div {width: 80vw!important; right: 0; min-height: calc(100% - 19vh)!important; height: auto!important; top: 8vh; bottom: unset!important;}
	#worldStats table {border-spacing: 1px calc(3vh - 15.5px);}
	
	#counters {height: 8vh;  line-height: 1.2; padding: 0 3px;}
	#score {width: 40vw;}
	#level {width: 55vw; text-align: right;}	
	.clues {width: 98vw; margin-left: 1vw;}
	.example-table.clues {width: 96vw; max-width: 370px;}
	#clues, .win-lost {position: absolute; bottom: 3vh; left: 0}
	.clues-div {width: 33%;}
	.example-table .clues-div {width: 33vw; max-width: 120px;}
	.example-div {width: 31vw; max-width: 120px;}
	.clue-table td:nth-child(1) {max-width: 15vw;}
	.example-div .clue-table td:nth-child(1) {max-width: 14vw;}
	#holder {float: none; margin: 2vh auto;}
	.cell {text-align: right;}
	.win-div {top: 70px;}
	#winLevel .win-div {top: 85px;}
	#lost .win-div {top: calc(10px + 5vw)}
	.win-lost p {font-size: 42px; margin: 8px auto -8px}
	#lost p {font-size: 28px;}
	.button-nextLevel {bottom: 20px;}
	#bugForm {width: 98vw; height: 80vh}
	#bugForm .win-div {top: 20vh; width: 90%;}
	#bugForm textarea {width: 100%;}
}

@media only screen and (orientation: landscape) and (max-height:630px) {
	#stats {top: calc(27vh - 42px); min-height: max(80vh, 400px);}
}
@media only screen and (orientation: portrait) and (max-height:630px) {
	#counters {margin-top: -2vh;}
	#clues, .win-lost {bottom: 1vh;}
	#holder {margin-top: 0;}
}
@media only screen and (orientation: portrait) and (max-width:350px) {
	.btn-smaller {font-size: smaller; margin-top: 0.3em;}
	#winDifficulty p {font-size: 38px;}
}
@media only screen and (orientation: portrait) and (max-width:330px) {
	:root {
		--cellWidth: 72px;
	}
	#btnRestart {margin-left: 0;}
	.board-holder {width:216px;}
	.cell {width: 72px}
	.clue-image {width:48px; height:48px;}
	.win-jumper {top: 12px;}
}