Refactoring, auslagerung der Spielsets, dynamisches CSS

www/spielsets/spielset1/css/spielset.css

@@ -0,0 +1,174 @@
+/* Hingrundbild */
+.scroll-content {
+    background: url("../images/background.svg");
+    background-size: cover;
+    color: #333;
+    font: 100% Arial, Sans Serif;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+}
+
+/* Bildgrößen für Tierkarten */
+.imagesizebig{
+  width:128px;
+  height:128px;
+}
+
+.imagesizemedium{
+  width:96px;
+  height:96px;
+}
+
+/* Runder Rahmen für Tierkarten*/
+.myborder{
+    display: inline-block;
+    border-radius: 6px;
+    color: black;
+    border-style: solid;
+    border-color: black;
+    border-width: 2px;
+ }
+
+/* Rahmen für Elemente am unteren Rand, Mentorenhilfe, timer, Punkte */
+.statusbar{
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+  height: 64px;
+  overflow: hidden; 
+  text-align: center;
+}
+
+/* Neon Effekt für Spieltimer */
+ .neon {
+    font-family: sans-serif;
+    text-transform: uppercase;
+    font-size: 60px;
+    font-weight: bold;
+    font-style: italic;
+    letter-spacing: .1em;
+    color: white;
+    text-shadow: 0 0 5px white,
+                 0 0 10px white,
+                 0 0 20px yellow,
+                 0 0 40px yellow,
+                 0 0 60px yellow,
+                 0 0 90px yellow,
+                 0 0 120px yellow,
+                 0 0 160px yellow;
+}
+
+.spieltimer {
+    font-family: sans-serif;
+    text-transform: uppercase;
+    font-size: 40px;
+    font-weight: bold;
+    font-style: italic;
+    letter-spacing: .1em;
+    color: white;
+    text-shadow: 0 0 5px white,
+                 0 0 10px white,
+                 0 0 20px yellow,
+                 0 0 40px yellow,
+                 0 0 60px yellow,
+                 0 0 90px yellow,
+                 0 0 120px yellow,
+                 0 0 160px yellow;
+}
+
+
+.spieltimerdiv {
+  position: absolute;  
+  bottom:0px;
+  left:0px;  
+  width: 100%;
+  height: 50px;
+  overflow: hidden;
+}
+
+.punktestand {
+  position: absolute;  
+  bottom:-15px;
+  right:0px;  
+  width: 100%;
+  height: 50px;
+  font-family: sans-serif;
+  text-transform: uppercase;
+  font-size: 30px;
+  font-weight: bold;
+  font-style: italic;
+  letter-spacing: .1em;
+  color:white;
+  text-align: right;
+  overflow: hidden;
+}
+
+/* Roter Rahmen für Spielauflösung, noch ungenutzt */
+ .redborder{
+    display: inline-block;
+    border-radius: 6px;
+    color: black;
+    border-style: solid;
+    border-color: red;
+    border-width: 2px;
+ }
+
+
+/* Standbild-Mentor in Statusbar */
+.mentorhilfe {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 64px;
+  height: 64px;
+  overflow: hidden;
+  background:  url('../images/Mentor/mentorhelp_64px.png');
+}
+
+/* Animierter-Mentor in Statusbar */
+.mentorborder {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 64px;
+  height: 64px;
+  overflow: hidden;
+  background:  url('../images/Mentor/mentorhelp_64px.png');
+}
+
+.mentor {
+  width: 64px;
+  height: 640px;
+  background:  url('../images/Mentor/mentor_64px.png') left center;
+  -webkit-animation: mentorsprite 4s steps(10) infinite;
+}
+
+@-webkit-keyframes mentorsprite {
+    100% { background-position: 0 -640px; }
+}
+
+/* Grosser Mentor bei Erfolg */
+.mentorborderbravo {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 256px;
+  height: 256px;
+  margin-left: -128px;
+  margin-top: -128px;
+  overflow: hidden;
+}
+
+.mentorbravo {
+  width: 256px;
+  height: 1024px;
+  background:  url('../images/Mentor/mentor_bravo.png') left center;
+  -webkit-animation: mentorspritebravo 2.8s steps(4) infinite;
+}
+
+@-webkit-keyframes mentorspritebravo {
+    100% { background-position: 0 -1024px; }
+}