article { width: 94%; padding: 1em 3%; overflow: hidden; background-image: linear-gradient(0deg, rgba(246, 230, 207, 0.75), rgba(239, 217, 182, 0.75)), url(../images/bg.webp); display: block;}
section {width:100%; overflow:hidden;}
section p, section li, .slova, label { color: #3b5755; font-size: 19px; font-family: SlateProBook, Arial, Helvetica, sans-serif; font-weight: 550; line-height: 1.4;}
input[type=text] { padding:8px 6px; border:1px solid #3b5755; background:#fff; border-radius:5px; font-size:18px;}
button { border:none; padding:8px 20px; color:#fff; background:#3b5755; border-radius:6px; cursor:pointer; font-size:17px;}
button:hover {background:#2b4735;}
h1 { font-family: SlateProBook, Arial, sans-serif; font-weight: normal; font-size: clamp(clamp(0em, 2.5em, 12vw), 5vw, 3em); margin:1em 0 .5em 0;}
header { background:#e7b401;}
.mnu { text-align:center; margin:0; padding:1em; background:#3e4f3e; font-size:22px;} /* 294b8b  872048 */
.mnu a { text-decoration:none; display:inline-block; padding:2px; margin-right:.8em; text-decoration:none;color:#fff;font-family: SlatePro-Thin, Arial, sans-serif;}
.mnu a:before { content:"\276F";color:#fcde72; margin-right:.5em;}
.mnu a:last-child{ margin-right:0;}
.mnu a:hover { text-decoration:underline; }

.bg { width:92%; padding:1em 4% ; overflow:hidden; background-image: linear-gradient(0deg, rgba(246, 230, 207, 0.75), rgba(239, 217, 182, 0.75)), url(../images/bg.webp);}
h1 { margin:1em 0 .3em 0; color:#3b5755; letter-spacing:1px;}
h2 { font-size:30px;font-family: SlateProBook, Arial, sans-serif; font-weight:400; margin:1.2em 0; color:#5f3b1f; text-align:center; }
h2 span {display:inline-block;box-sizing:border-box;width:32px;height:32px;text-align:center;margin-right:.5em;border-radius:50%;background:#e7b401;font-size:28px;color:#fff;padding-right:1px;}
h3 { font-size:1.4em;font-family: SlateProBook, Arial, sans-serif; font-weight:400; margin:1em 0 1em 0; text-align:center; color:#413140; padding:.35em;
 border-top:1px solid #413140;  border-bottom:1px solid #413140; }

.title { margin:10px 0 10px 0;}
.title .c1 { width:30%; margin-left:5%; overflow:hidden; float:left;} .title .c1 img { width:100%;}
.title .c2 { width:45%; margin-right:10%; overflow:hidden; float:right;}
/* .title img {float: left; width: 41%; margin: 0 5% 0 0; display: block;} */
.title p, .title li { font-size:18px;text-align: justify;font-style: italic;padding: 0px .5em 0px 0px;}
.title h4 { font-size:1.55em;font-family: SlatePro-Thin, Arial, sans-serif; font-weight:400; margin:.6em 0 .3em 0; text-align:center; color:#3b5755; }
.title .k    { width:100%; height:auto; overflow:visible; position:relative; text-align:center; }
.title .k a  { display: inline-flex; float: none; align-items: center; margin: 0 1em; }
.title .k .b { width:142px; height:70px;                    background: url(../images/shops/bux.png); background-size:cover; }
.title .k .m { width:82px;  height:70px;                    background: url(../images/shops/martinus.png); background-size:cover; }
.title .k .g { width:112px; height:56px; margin-bottom:4px; background: url(../images/shops/gorila.png); background-size:cover; }
.title .k .p { width:98px;  height:70px;                    background: url(../images/shops/panta-rhei.png); background-size:cover; }
.title ul { list-style-type:none; padding-inline-start:0;} .title li { margin-bottom:.5em;}
.title li:before {content:"●"; color:#d6900b; margin-right:10px; font-size:1.3em; }

.title .zz { width:100%; overflow:hidden; text-align:center;}
.title .zz div { width:13%; height:74px; vertical-align:middle; margin:10px .6428%; float:left;font-family: SlateProBook, Arial, sans-serif; font-size:20px; text-align:center; box-sizing:border-box; padding-top:21px; line-height:1.1; border-radius:12px; cursor:pointer;}
.title .zz div:nth-child(1) { background-color:#C2CBB7;border:4px solid #C2CBB7;padding-top:11px;}
.title .zz div:nth-child(2) { background-color:#FAD2E1;border:4px solid #FAD2E1;}
.title .zz div:nth-child(3) { background-color:#E1D7C6;border:4px solid #E1D7C6;}
.title .zz div:nth-child(4) { background-color:#C7CEEA;border:4px solid #C7CEEA;padding-top:11px;}
.title .zz div:nth-child(5) { background-color:#CFE2FE;border:4px solid #CFE2FE;}
.title .zz div:nth-child(6) { background-color:#FFEE93;border:4px solid #FFEE93;}
.title .zz div:nth-child(7) { background-color:#A0E7E5;border:4px solid #A0E7E5;}
.title .zz div.a { border:4px solid #e7b401;}

.title .zk { width:100%; overflow:hidden;}
.title .zk div { width:98.71%; padding:20px 0; overflow:hidden; margin:2px auto;border-radius:12px; text-align:center; display:none;} .title .zk div.a { display:block;}
.title #zk1 { background-color:#C2CBB7;}
.title #zk2 { background-color:#FAD2E1;}
.title #zk3 { background-color:#E1D7C6;}
.title #zk4 { background-color:#C7CEEA;}
.title #zk5 { background-color:#CFE2FE;}
.title #zk6 { background-color:#FFEE93;}
.title #zk7 { background-color:#A0E7E5;}

.zk a { text-decoration:none; display:inline-block; width:19.5%; height:382px; overflow:hidden; margin:3px 0 8px 0; position:relative; text-align:center; }	
.zk a .i { display:block; width:100%; height:304px; overflow:hidden; position:relative; font-style:normal;}
.zk a .i img { width:78%; height:auto; transition:all ease-in-out .6s; display:block; position:absolute; left:11%; bottom:18px; }
.zk a:hover .i img { width:84%; left:8%; bottom:12px;}
.zk a .i img.m { width:90%;left:5%;  } .zk a:hover .i img.m { width:98%;left:1%;}
.zk a .i img.v { width:80%;left:10%; } .zk a:hover .i img.v { width:84%;left:8%;}
.zk a .i img.x { width:68%;left:16%; } .zk a:hover .i img.x { width:74%;left:13%;}
.zk a h3 { font-size:17px; color:#000; font-family: SlatePro-Bold, Arial, sans-serif; margin:4px 0 0 0; padding:0; border:none;}
.zk a h3 span {color: #00a5d4; text-transform:uppercase;}
.zk a p { color:#000; font-family: SlatePro-Bold, Arial, sans-serif; margin:1px 0;}
.zk a u { width:36px;height:36px;border-radius:50%;color:#fff;background:#147a99;font-size:24px;text-align:center;font-family:SlateProBook, Arial, sans-serif; position:absolute; 
 right:14%; top:2px; text-decoration:none; line-height:35px; text-indent:1px;}

#ks, #zk, #vk { display:none;} #ks.a, #zk.a, #vk.a { display:block;}
#vk h3 { margin-top:0;}
#k { text-align:center;}
#k a { background:#fff; border-radius:12px; padding-top:10px; margin: 3px 0 16px 0;}

#ok, #pokyny.h { display:none;} #ok.a { display:block; text-align:center; margin-bottom:2em;}
#ok h3 { font-size:25px;color:#3b5755;font-family: SlateProBook, Arial, sans-serif; font-weight:400; margin:2em 0 10px 0;}
#err.a { width:94%; padding:12px 3%; overflow:hidden; background:#c00; color:#fff; font-size:17px; font-family: SlateProBook, Arial, sans-serif; font-weight:bold; border-radius:5px;}

.statut article { background:#fff;}
.statut h1, .statut h2, .statut h3 { text-align:center;}
.statut h2, .statut h3 { color:#a25e0e;font-family: SlateProBook, Arial, sans-serif; font-weight:400;}
.statut h1 { font-size:42px;}
.statut h2 { font-size:32px; margin:.5em 0 1em 0; }
.statut h3 { font-size:24px; margin:1em 0 .3em 0; }
.statut p, .statut li, .statut td {font-family: SlateProLight, Arial, sans-serif; font-size:18px; line-height:1.4;}
.statut p { margin-left:1em;}
.statut ol.a {list-style-type: lower-latin;}
.statut ol li::marker {color:#5f3b1f;}
.statut li { text-indent:.2em;}
.statut table { width:100%; max-width:800px; margin:25px auto 5px auto;}
.statut td { text-align:center;}

#rg { width:450px; margin:0 auto 2em auto; overflow:hidden; } #rg.h { display:none;}
#rg label { margin-right:.5em; cursor:pointer;}
#rg p { font-size: 17px; line-height: 1.5; margin-bottom:.5em;}
#rg p em { display:inline-block; font-size:19px;font-style:normal;color:#fff;background:#d6900b; padding:2px 3px;width:26px;text-align:center;margin-right:8px;border-radius:5px;}
#rg .item { width:100%; overflow:hidden; margin:10px 0;} #rg .item.vo { margin-top:8px;}
#rg .item label { display:inline-block; padding:1px 0; color: #3b5755;font-size:17px;font-family: SlateProBook, Arial, Helvetica, sans-serif;font-weight: 550;line-height: 1.2;}
#rg .item a {color:#5f3b1f; font-weight:600;}
#rg .item input[type=text] { margin-right:2%;}
#rg .buttons { text-align:center;}
#rg button { margin-top:6px;}
#rg input[type=text] { padding:8px 2%; box-sizing:border-box; width:46%; }

.wheel {text-align: center;display: flex;flex-direction: column;align-items: center;}
.wheel-wrap { position: relative; width: min(420px, 90vw); height: min(420px, 90vw); user-select:none;}
.pointer{
  position:absolute;
  top: -10px;
  left: 50%;
  width: 34px;
  height: 40px;
  margin-left: -17px;
  z-index: 3;
  pointer-events:none;
  background-color: #fff;
  -webkit-mask-image: url('../images/sutaz2026/strelka.webp');
  mask-image: url('../images/sutaz2026/strelka.webp');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));
}
.wheel-launch{ position:absolute; inset:0; will-change: transform, opacity;}
.wheel-disc{ rotate: -18deg; position:absolute;inset:0;border-radius:50%;cursor:pointer !important;will-change:transform;transform: rotate(0deg);box-shadow: 0 10px 30px rgba(0,0,0,.18);}
.wheel-disc img{ width:100%; height:100%; display:block; pointer-events:none; cursor:pointer !important;}
.wheel-disc:active{ filter: brightness(0.97);}
#hint{ font-size: 20px; color:#3b5755; text-align:center; margin-top:1em;  font-family: SlatePro-Bold, Arial, sans-serif; }
.result{  font-size: 20px;  font-weight: 600;  color: #fff;  min-height: 1.4em;}
.result .num{  color: #fff;  font-size: 28px;}
 
@media (max-width: 1000px) {
.title .c1 { width:40%; margin:0 auto; float:none;}
.title .c2 { width:80%; margin:0 auto; float:none;}
.title .zz div { width:26%; display:inline-block; float:none;}
.zk a { width:24.5%; height:392px; }	
}

@media (max-width: 800px) {
.zk a { width:31.2%; height:382px; }	
}

@media (max-width: 600px) {
.zk a { width:48%; height:402px; }	
.zk a .i { height:344px;}
#rg { width:100%; } 
}

@media (max-width: 400px) {
.title .c1 { width:60%; }
.title .c2 { width:96%;}
.title .zz div { width:45%;}
.zk a {height:81vw; }	
.zk a .i { height:58vw;}
#k a { width:45%;}	
#rg label {margin-right:0;}
#rg input[type=text] { padding:8px 2%; box-sizing:border-box; width:100%; margin-bottom:4px;}
}