@font-face {
font-family:'gamefont';
font-style:'normal';
font-weight:'normal';
src:url(/pelit/AutourOne-Regular.ttf);
}
@font-face {
font-family:'icomoon';
font-style:'normal';
font-weight:'normal';
src:url(/pelit/korttipelit/icomoon/fonts/icomoon.ttf);
}

body {position:static;width:100%;max-width:100%;color:#000;background:#3992d2 url(img/bg-transparent-1.png);font:1em/1.4 gamefont,sans-serif;padding:0;margin:0;overflow-y:scroll;overflow-x:hidden;}

#wait {position:fixed;width:64px;height:64px;top:50%;left:50%;margin:-32px 0 0 -32px;border-radius:7px;background:#000;border:2px solid #DA5700;z-index:1000;box-shadow:0 0 8px #000;}
#wait img {margin:8px;}
.wait_bgnd {position:fixed;top:0;left:0;width:100%;height:100%;background:url(/pelit/img/empty64.gif);}

.div-body {margin:0;padding:0 1.5em 0 2em;box-sizing:border-box;max-width:100%;overflow:hidden;}
.hidden {visibility:hidden;position:absolute;top:-100000px;left:-10000px;}

h1,h2,h3,h4 {}
h1 {font-size:2em;font-weight:bold;color:#fff;text-shadow:0 0 1px #000,2px 2px 4px rgba(0,0,0,0.35);letter-spacing:1px;margin:0;}
h2 {font-size:1.8em;}
h3 {font-size:1.3em;}
h4 {font-size:1.125em;}
p {max-height:99999px;} /* this prevents chrome's stupid font-size encreasing */
.right {float:right;}
.help-con {font-size:1.125em;}
.help-pile {position:relative;}
.help-pile p {margin:0;position:absolute;left:0;}
.help-pile p img {box-shadow:0 0 6px rgba(0,0,0,0.25);border-radius:0.4rem;}
.help-card {margin:0.25em;}
.help-small {padding:1em;font-size:0.875em;text-align:center;}

.indexlink {display:block;}

a {text-decoration:none;}
.lnk {margin-left:0.5em;color:yellow;}
.lnk::before {content:"\2691\A0";color:#fff;}
#rules-con a:hover {text-decoration:underline;}

.wiki {background:url(/img/wiki-lnk.gif) 0 center no-repeat;padding-left:20px;}
.w100 {box-sizing:border-box;width:100%;}
.icomoon {font-family:icomoon;}
.max100 {max-width:100%;}

.menu-btn {position:absolute;top:50%;right:1.5em;font:2em/1.5 icomoon;transform:translateY(-50%);background:#000;color:#fff;padding:0 0.25em;cursor:pointer;}
.mitem {display:inline-block;margin:0.5em 1em;padding:0.25em 1em;border-radius:0.5em;background:#DFEAEC;border:2px solid transparent;color:#000;cursor:pointer;}
.mitem span {display:block;color:#4169E1;font-size:0.8125em;}
.mitem:hover {color:#0033cc;border-color:#B0C4DE;}
.mitem.disabled {color:#777!important;text-shadow:1px 1px 0 #fff;pointer-events:none;}

.game-reset-item {margin:0;padding:0.25em 0.5em;cursor:pointer;}
.game-reset-item:hover {background:coral;}
.game-reset-item.deleted {color:red;}


input,button,a {cursor:pointer;font:inherit;}
#create {position:absolute;top:-500px;left:-500px;}
#table {position:relative;z-index:1;opacity:0;transition:opacity 1s, height 0.3s ease-in-out;height:400px;box-sizing:content-box;cursor:default;user-select:none;}
#table.rounded {margin-left:2em;border-radius:2rem;border:3px solid #fff;box-shadow:0 0 16px rgba(0,0,0,0.5);}
#table.wide {border-top:3px solid #fff;border-bottom:3px solid #fff;max-width:100%;overflow:visible;}
#table.none {}
.cloth-green {background:url(img/bg-cloth-green.jpg) #38901F;}
.cloth-red {background:url(img/bg-cloth-red.jpg) #be1713;color:#fff;}
.laguna {background:url(img/bg-laguna.jpg) center bottom / cover;}
.bora {background:url(img/bg-bora.jpg) center center / cover;}
.winter {background:url(img/bg-winter.jpg) center top / cover;}
.talvi-1 {background:url(img/bg-talvimaisema-1.jpg) center top / cover;}
.campo {background:url(img/bg-campo.jpg) center top / cover;}
.egypt {background:url(img/bg-egypt.jpg) center center / cover;}
.desert {background:url(img/bg-desert.jpg) right bottom / cover;}
.isla {background:url(img/bg-isla.jpg) right top / cover;}
.sea {background:url(img/bg-sea.jpg) center center / cover;}
.mystery-scene {background:url(img/bg-mystery-scene.jpg) center center / cover;}
.splash {background:url(img/bg-splash.jpg) center center / cover;}
.underwater {background:url(img/bg-underwater.jpg) center center / cover;}
.coral {background:url(img/bg-coral.jpg) center center / cover;}
.geometry-a {background:url(img/bg-geometry-a.jpg) center center / cover;}
.magic-valley {background:url(img/bg-magic-valley.jpg) center center / cover;}
.purple-matrix {background:url(img/bg-purple-matrix.jpg) center center / cover;color:#fff;}
.red-alert {background:url(img/bg-red-alert.jpg) center center / cover;color:#fff;}
.kimi-alfa-romeo {background:url(img/bg-kimi-alfa-romeo.jpg) center center / cover;color:#fff;}
.hki-hameen-tulli {color:#fff;background:url(img/bg-transparent-2.png) 0 0 repeat,url(img/bg-helsinki-hameen-tulli.jpg) center center no-repeat;background-size:512px 512px,cover;}
.hki-hameen-tulli .topcolor {color:#000;}
.hki-katajanokka {color:#000;background:url(img/bg-transparent-2.png) 0 0 repeat,url(img/bg-helsinki-katajanokka.jpg) center center no-repeat;background-size:512px 512px,cover;}
.hki-kruunuhaka {background:url(img/bg-helsinki-kruunuhaka.jpg) center center / cover;}
.saimaa {background:url(img/bg-saimaa.jpg) center center / cover;}
.nginx {background:url(img/bg-nginx.jpg) right center / cover;}
.world-orbits {background:url(img/bg-world-orbits.jpg) center center / cover;}
.test {background:url() center center / cover;color:#fff;}

.biga a {color:#99FF33;text-shadow:2px 2px 8px #000;}

.card {position:absolute;border-radius:0px;transform:translate3d(0,0,0);will-change:left,top;backface-visibility:hidden;}
.card.rotate1 {transform:perspective(30rem) rotateY(90deg);transition:transform 0.2s;}
.card.rotate2 {transform:rotateY(-90deg);}
.card.rotate3 {transform:perspective(30rem) rotateY(0deg);transition:transform 0.2s;}
.card.dropzone {box-shadow:0 0 2rem #fff;filter:saturate(150%);}
.card.blocked {filter:blur(1px) invert(0.3);pointer-events:none;}

.shadow {box-shadow:0 0 0.75em rgba(0,0,0,0.7);}
.shadowlite {box-shadow:0 0 0.5em rgba(0,0,0,0.5);}
.shadowheavy {box-shadow:0 0 0.5em #000;}
.hilite {box-shadow:0 0 2em #fff;filter:saturate(200%);}

.base {border-radius:0.625em;}
.cardbase {background:rgba(0,0,0,0.1);border-radius:0.625em;}
.cardbase.dropzone {background-color:rgba(0,200,0,0.3)!important;box-shadow:0 0 2em #fff;}
.cardbase.darker {background-color:rgba(0,0,0,0.3);}
.cardbase.border {border:0.125em solid #000;margin:-0.125em 0 0 -0.125em;}
.cardbase div {position:absolute;text-align:center;padding:0.5em;box-sizing:border-box;top:50%;transform:translateY(-50%);width:100%;}
.cardbase.textur div {font-size:1.25em;color:#000;opacity:0.65;text-shadow:-1px -1px 0 rgba(255,255,255,0.5),1px 1px 0 rgba(255,255,255,0.5)}
.cardbase.bigger div {font-size:1.25em;color:#000;text-shadow:-1px -1px 0 rgba(255,255,255,0.5),1px 1px 0 rgba(255,255,255,0.5);}
.game-status {border:0.143em solid;font-size:0.875em;background:rgba(255,255,255,0.2);box-sizing:border-box;padding:0.5em;border-radius:0.5em;overflow:auto;}
.game-status div {margin:0.25em 0 0 0;clear:both;}
.game-status div span {float:right;padding-left:1em;}
.game-status span {font-family:monospace;}
.game-box {margin-top:1em;clear:both;overflow:auto;}
.transelem {transition:top 0.3s ease;}

.next-card-tag {box-sizing:border-box;font-size:0.875em;padding:0.15em 0.35em 0 0.25em;border-radius:0.25em;color:#000;background:yellow;text-align:center;border:0.125em solid #000;}

.btn {color:#fff;text-shadow:0 1px 0 #000;background:rgba(0,0,0,0.5);border:0.143em solid #000;border-radius:0.3em;padding:0.3em 1em 0 1em;font-size:0.875em;font-weight:700;white-space:nowrap;cursor:pointer;margin:0 0 1em 0;outline:none;box-shadow:0 0 0.125em #fff;}
.btn + button {margin-left:2em;}
.btn:hover {color:#fff;box-shadow:0 0 8px rgba(255,255,255,0.5);border-color:rgba(0,0,0,0.8);}
.btn.block {display:block;margin-left:0;}
.btn:disabled {opacity:0.75;color:rgba(255,255,255,0.5);text-shadow:none;pointer-events:none;}
.winner {color:#fff;text-shadow:4px 4px 32px #000;}
.white {color:#fff;text-shadow:1px 1px 1px #000;}
.white-shadow {text-shadow:1px 1px 0 rgba(255,255,255,0.5);}
.white-bgnd {background-color:rgba(255,255,255,0.3);}
.rounded-box {border:0.125em solid #000;border-radius:0.5em;padding:0.5em;box-sizing:border-box;}
.raster {background-image:url(img/bg-raster-1.png)}
.recycle-bw {background:rgba(0,0,0,0.1) url(img/bg-recycle.png) center center no-repeat;cursor:pointer;}
.center {text-align:center;}
.gameover {background:rgba(255,0,0,0.75);color:#fff;border-radius:0.25em;border:2px solid #CC0000;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,0.35);letter-spacing:1px;text-align:center;box-shadow:0 0 32px rgba(0,0,0,0.5);transition:0.5s;}
.selected {background:#33FF00;}
.scale-show {transform:scale(0.5);opacity:0;}
.font15 {font-size:1.5em;}
.font20 {font-size:2em;}
.iinfo {display:inline-block;line-height:1.4em;width:1.4em;text-align:center;border-radius:50%;color:#fff;background:#00B1CD;}

button {font:inherit;cursor:pointer;outline:none;user-select:none;}
.boton {padding:0.3em 1em 0.25em 1em;color:#fff;margin:0 0.5em 0 0;border-radius:0.25em;border:2px solid rgba(255,255,255,0.25);background:none;}
.boton.green {background-color:#36B056;}
.boton.pink {background-color:#FF00CC;}

.cardbase .icon {font-size:1.6em;}
.icon::before {font-family:icomoon;}
.icon.heart::before {content:"\e9da";color:red;}
.icon.spade::before {content:"\e917";color:#000;}
.icon.diamond::before {content:"\e919";color:red;}
.icon.club::before {content:"\e918";color:#000;}
.icon.happy::before {content:"\e9e0";border-radius:50%;background:#000;}
.icon.sad::before {content:"\e9e6";border-radius:50%;background:#000;}
.icon.loop::before {content:"\ea2e";}
.icon.cloud::before {content:"\e9c1";}
.icon.blocked::before {content:"\ea0e";}
.icon.yellow::before {color:#FFD700;}
.mini {background:#fff;color:#000;border-radius:0.25em;padding:0.125em 0.25em 0 0.25em;margin:0 0.25em;white-space:nowrap;}

#json {position:absolute;right:0;top:0;background:rgba(0,0,0,0.3);color:#fff;font:0.72rem monospace;margin:0;padding:3px;white-space:pre-wrap;}


/*   E F F E C T S   */

.rotatecard { transform:perspective(336px) rotateY(90deg);transition:1s;}

@keyframes ef_shake {25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}100%{transform:rotate(0deg)}}
.effect_shake {animation:ef_shake 0.3s linear 2;}
@keyframes ef_zoom {25%{transform:scale(1.1)}75%{transform:scale(0.9)}100%{transform:scale(1)}}
.effect_zoom {background-color:rgba(255,255,255,0.5);animation:ef_zoom 0.3s linear 2;}
@keyframes efx_circle {25%{transform:top 50px}75%{transform:top 60px}100%{transform:top 8px}}

.ex_circle {position:absolute;border-radius:50%;display:none;z-index:19999;opacity:0;}
@keyframes ef_circle {0%{transform:scale(0.1);opacity:1}100%{transform:scale(1);opacity:0}}
.effect_circle {display:block;animation:ef_circle 0.3s ease-out 2;}

.ex_flash {position:absolute;display:none;z-index:19999;opacity:0;}
@keyframes ef_flash {0%{opacity:0}50%{opacity:0.7}100%{opacity:0}}
.effect_flash {display:block;animation:ef_flash 0.5s ease-out 2;}


.fly-text {position:absolute;font-size:2em;font-weight:700;min-width:4em;text-align:center;-webkit-text-stroke:1px #000;transition:0.5s, top 0.3s, transform 0.6s;}
.fly-text.white {-webkit-text-fill-color:white;}
.fly-text.yellow {-webkit-text-fill-color:#ffff00;}
.fly-text.red {-webkit-text-fill-color:#FF4500;}
.fly-text.blue {-webkit-text-fill-color:#1E90FF;}
.fly-text.green {-webkit-text-fill-color:#00FF7F;}
.fly-text.start {transform:scale(2,2);letter-spacing:0.15em;}
.fly-text.big {transform:scale(3,3);letter-spacing:0.15em;}
.fly-text.end {opacity:0;text-shadow:0 0 1em #fff;}


/* for custom checkbox & radio
	<label><input type="checkbox" name="cbox1"><b></b>Text here</label>
*/
label {margin-right:1em;line-height:1.25;cursor:pointer;display:inline-block;}
label input {display:none;}
label b {position:relative;display:inline-block;top:0.125em;width:1em;height:1em;background:rgba(0,0,0,0.25);margin:0 0.5em 0 0;box-shadow:0 0 0.125em #fff;}
label b.lite {background:rgba(255,255,255,0.25);}
label input[type="checkbox"]+b {border-radius:0.125em;}
label input[type="checkbox"]:checked+b {background:#0033ff;}
label input[type="checkbox"]:checked+b::after {content:" ";position:absolute;width:0.25em;height:0.5em;left:0;bottom:0.1875em;border-bottom:0.1875em solid #fff;border-right:0.1875em solid #fff;transform-origin:bottom right;transform:rotate(45deg);border-radius:0.125em;}
label input[type="radio"]+b {border-radius:50%;box-sizing:border-box;}
label input[type="radio"]:checked+b {background:#fff;border:0.25em solid #0033ff;}
label.disabled {opacity:0.5;pointer-events:none;filter:blur(1px) sepia(100%);}

/* tää on vähän erilainen, muista! tehty uudenpaan dialog.js (ei dialog-2.js) */
.kill-bgnd {position:fixed;top:0;left:0;right:0;bottom:0;opacity:0;background:rgba(0,0,90,0.3);transition:opacity 0.35s;}
.dialog {background:#eff5f5;box-shadow:0 0 2em rgba(0,0,0,0.5);overflow:hidden;cursor:default;transition:0.35s;opacity:0;max-width:90%; }
.dialog.trans {transform:scale(0.9) translate(-55%,-55%);}
.dialog.show {opacity:1;}
.dialog.trans.show {transform:scale(1) translate(-50%,-50%);}
.dialog .head {position:relative;font-size:1.125em;padding:0.25em 8px 0.2em 40px;background:url(img/ico-suits-32.png) 8px center no-repeat, linear-gradient(#2F74FF,#004DB3);background-size: 24px 24px,auto;color:#fff;letter-spacing:1px;}
.dialog .outer {position:absolute;left:0;top:0;right:0;bottom:0;color:#333;visibility:hidden;opacity:0;}
.dialog .outer.show {visibility:visible;transition:opacity 0.35s;opacity:1;}
.dialog .inner {position:absolute;top:0;left:0;right:0;bottom:0;overflow:auto;user-select:text;}
.dialog .inner a {color:#0033CC;}
.dialog .inner iframe {border:none;background:transparent;width:100%;height:100%;}
.close {float:right;margin:-0.25em 0 0 0.5em;width:42px;height:16px;background:url(../img/close_nad.png);cursor:pointer;}
.close:hover {background-position: -42px 0;box-shadow:0 0 16px #fff;}
.close:active {background-position: -84px 0;}
.dialog .statusbar {position:absolute;left:0;right:0;background:#6699ff;color:#fff;text-align:center;border-top:1px solid #3377ff;}
.dialog .buttons {position:absolute;left:0;right:0;background:#dfeaec;text-align:center;border-top:2px solid #afcbcf;}
.dialog .buttons button {background:#fff;margin:0.5em;min-width:100px;border:0.125em solid #afcbcf;border-radius:0.25em;}
.dialog .buttons button:hover {border-color:#70a2a9;}

.dlg-toast {position:fixed;left:50%;bottom:20%;max-width:50%;text-align:center;transform:translateX(-50%);padding:0.25em 1em 0.25em 1em;background:#000;color:#fff;box-shadow:0 0 1em #000;transition:opacity 0.5s;overflow:hidden;}

/* tää on vähän erilainen, muista! tehty uudenpaan dialog.js (ei dialog-2.js) */
.dlgs {padding:1.5em 64px 1em 64px;color:#222;}
.dlgs a {color:#0000ff;}
.dlgi {position:absolute;left:8px;top:8px;width:60px;height:56px;background:url(/img/dlg-icons.png) no-repeat;}
.dlgi.err {background-position: 0 0;}
.dlgi.info {background-position: -60px 0;}
.dlgi.ok {background-position: -120px 0;}
.dlgi.yesno {background-position: -180px 0;}
.dlgi.alert {background-position: -240px 0;}
.dlgi.not {background-position: -310px 0;}
.dlgi.stop {background-position: -370px 0;}
.dlgi.remark {background-position: -430px 0;}
.dlgi.add {background-position: -495px 0;}
.dlgi.edit {background-position: -556px 0;}
.dlgi.swap {background-position: -684px 0;}
.dlgi.new {background-position: -747px 0;}
.dlgi.prompt {background-position: -808px 0;}
.dlgi.mar {margin:0 -24px 0 0;}
.dlgs_btn {background:#e2e6e9;padding:0.5em 0 0.5em 0;text-align:center;border-top:1px solid #BFC8CE;}
.dlgs_btn button {margin:0 1em 0 1em;width:100px;}

form,video,iframe {padding:0;margin:0;display:block;max-width:100%;}
.form {box-sizing:border-box;position:relative;}
.form .inp {font:bold 16px/1.4 monospace;padding:0.25em 0.5em 0.2em 0.5em;border:2px solid #BFC8CE;border-radius:4px;color:#483D8B;background-color:#fff;outline:none;box-sizing:border-box;}



.youtube {padding:0 0 0 28px;background:url(/img/youtube-icon.png) 2px center no-repeat;}

.other-game {display:inline-block;padding:0.25em 1em;border-radius:1em; background:rgba(255,255,255,0.75); color:#0033FF;margin:0.5em;}
.other-game.disabled {color:#777!important;text-shadow:1px 1px 0 #fff;pointer-events:none;}
.stat {font:1em/1.5 monospace;white-space:nowrap;margin:2em 0;}
.stat table {width:fit-content;margin:1em auto;border-spacing:0;background:rgba(255,255,255,0.5);box-shadow:0 0 1em rgba(0,0,0,0.5);}
.stat table .hed {font-weight:700;background:rgba(0,0,0,0.2);}
.stat table td {padding:0 1em;border-top:1px solid rgba(0,0,0,0.1);}
.stat table td.rite {text-align:right;}
.stat .link {cursor:pointer;color:#0033ff;}
.stat .link:hover {background:#ffff00;}
.stat .link::after {content:"\25C2";float:right;margin-right:-0.75em;}
.stat2 {}
.stat2 table {font:1em/1.5 sans-serif;width:fit-content;border-spacing:0;margin:0 auto;}
.stat2 table tr {vertical-align:top;}
.stat2 table tr.hed {font-weight:700;}
.stat2 table td {padding:0.15em 1em 0 1em;border-bottom:1px dashed #c8c8c8;}
.stat2 table td.rite {text-align:right;}
.credit {margin-top:0;padding:0.25em 1.5rem 0.25em 2rem;line-height:2em;background:rgba(0,0,0,0.5);color:#E0FFFF;}
.credit p {float:right;}


@media (max-width:400px) {
	/* kapea Mobile */
	.credit {text-align:center;}
	.credit p {float:none;}
}