html, body { margin: 0; padding: 0; height: 100%; background-color: #eef; }
body { overflow: hidden; }
svg { display: block; user-select: none; margin: 0 auto; }
* { user-select: none; }
h1, h2, h3 { font-family: Arial; }

.tile { cursor: pointer; opacity: 0.5; transition: transform 0.3s, opacity 0.3s; }
.not_touch .tile:hover { transform: scale(1.2); }
.tile.hover { transform: scale(1.2); }
.selected { opacity: 1; }
.weak { opacity: 0.15; }
.cell { transition: transform 0.3s, opacity 0.3s; }

.level { transition: transform 0.2s; }
.level.done { cursor: pointer; }
.not_touch .level.done:hover { transform: scale(1.15); }

.frames { position: relative; width: 100%; height: 100%; }
.frame { position: absolute; display: inline-flex; width: 100%; height: 100%; transition: opacity 0.3s; opacity: 0; flex-direction: column; }
.visible { opacity: 1; z-index: 2; }
.hidden { display: none; }
.clickable { cursor: pointer; }

.top-panel { background-color: #ddf; display: flex; }
.bottom-panel { flex: 1; background-color: #ddf; }
.bottom-panel { display: none; }
.mid-panel { display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #eef; }

.field { background-color: #eef; }

@media screen and (orientation: landscape) { 
  .mid-panel { flex: 6; }
  .mid-panel h2 { margin: 4vmin 0; }
  table.buttons td { padding: 3vmin 2vmin; }
}
@media screen and (orientation: portrait) { 
  .mid-panel { flex: 4; }
  .mid-panel h2 { margin: 0 0 12vmin 0; }
  table.buttons td { padding: 5vmin 2vmin; }
}

.mid-panel h2 { color: #555; text-align: center; font-size: 6vmin; }

.back { position: absolute; display: inline-block; cursor: pointer; transition: background-color 0.3s; stroke: #aaa; transition: stroke 0.3s; }
.not_touch .back:hover { stroke: #333; }
.frame-icon { position: absolute; display: inline-block; }
.info-label { position: absolute; }

img.award { height: 80%; max-width: 90%; } 
table.awards { width: 100%; height: 100%; max-width: 100vmin; }
.awards tr { height: 33%; }
.awards td { width: 33%; text-align: center; position: relative; }
.awards td > div { height: 100%; display: flex; align-items: center; justify-content: center; /*padding: 15%;*/ }
.badge { position: absolute; width: 5vmin; height: 5vmin; color: white; background-color: red; border-radius: 50%; border: 0.5vmin solid white;
  right: 20%; top: 20%; display: flex; font: bold normal 2.5vmin Tahoma; align-items: center; justify-content: center; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); }

table.buttons { font: normal 3vmin Tahoma; width: 90vmin; margin: 0 auto; }
table.buttons button { font: bold 3vmin Tahoma; padding: 2vmin; border-width: 5px; border-style: solid; border-radius: 1.5vmin; width: 25vmin; color: white; }

.blue button { border-color: blue; cursor: pointer; background-color: #88f; }
.blue td { color: blue; }

.red button { border-color: red; cursor: pointer; background-color: #f88; }
.red td { color: red; }

.green button { border-color: green; cursor: pointer; background-color: #6f6; }
.green td { color: green; }

tr.blue, tr.red, tr.green { cursor: pointer; }
tr.blue:hover, tr.red:hover, tr.green:hover { background-color: #ddf; }

#multiplayer-type td:first-child { border-radius: 2vmin 0 0 2vmin; }
#multiplayer-type td:last-child { border-radius: 0 2vmin 2vmin 0; }

#multiplayer button { width: 500px; padding: 2vmin; border-radius: 15px; font: normal 4vmin 'Tahoma'; color: white; cursor: pointer; }
#multiplayer button.blue { background-color: #88f; border: 3px solid blue; }
#multiplayer button.red { background-color: #f88; border: 3px solid red; }
#multiplayer button.green { background-color: #6f6; border: 3px solid green; }
#multiplayer button:disabled, #multiplayer button[disabled] { background-color: #ddd; border-color: silver; }

#multiplayer input { width: 500px; padding: 2vmin; border-radius: 5px; font: normal 4vmin 'Tahoma'; box-sizing: border-box; color: #444; }
#multiplayer input::placeholder { color: #ccc; }
#multiplayer hr { width: 200px; height: 1px; border: none; background-color: silver; }

svg.share use { transition: transform 0.12s ease; }
svg.share use:hover { transform: scale(1.2); }

#app { display: flex; /*width: 100%;*/ height: 100%; align-items: center; justify-content: center; }

#log { position: fixed; top: 0; font: normal 12px 'Courier New'; }
#hand { position: absolute; top: 100px; left: 100px; }
#instruction .tile.hover { transform: scale(1.2); }

#game-title-2 { max-width: 80%; max-height: 100%; }

#prize { position: absolute; height: 50vmin; /*left: calc(50% - 25vmin);*/ top: calc(50% - 25vmin); opacity: 0; }

#hint { cursor: pointer; transition: opacity 1.5s ease; }