body,
td,
ol,
ul,
li,
p       {font-size: 10pt; font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif;}

body {margin: 0px; padding: 0px; background-color: #dedede; margin-left: 5px;}

H3      {color: #8f0000; font-family: arial; font-size: 12pt; font-weight: bold; text-align: center;}
H4      {color: #8f0000; font-family: Arial; font-size: 11pt; font-weight: bold; margin-bottom: 5px;}
H5      {color: #4f0000; font-family: Arial; font-size: 11pt; font-weight: bold; margin-bottom: 0px; margin-top: 0px;}
fieldset    {border-bottom: 3px double #ffffff; border-left: 3px double #ffffff; border-right: 3px double #ffffff; border-top: 2px groove #ffffff; border-radius: 5px; padding: 5px;}
legend    {color: #770d05;}
.anketa    {background-color: #f2f0f0; border: #000000 1px solid; color: black; font-family: verdana; font-size: 11px;}
.err    {font-size: 11px;}
.nav    {cursor: pointer;}
.pH3    {color: #8f0000; font-family: Arial; font-size: 12pt; font-weight: bold;}
.header,
.usually,
.usually14,
.small         {font-family: Tahoma; font-size: 13px;}
.usuallyb  {font-family: Tahoma; font-size: 13px; color: #354463;}
a                     {font-family: verdana; font-size: 13px; text-decoration: none; color: white; font-weight: bold;}
a:hover       {color: #dcdcdc;}
.us                {font-family: verdana; font-size: 13px; text-decoration: none; color: #D50000; font-weight: bold;}
.us:hover  {color: red;}
.us2              {font-family: verdana; font-size: 13px; text-decoration: none; color: #000000; font-weight: bold;}
.us2:hover,
.us3:hover  {color: #8A8A8A;}
.us3    {font-family: verdana; font-size: 13px; text-decoration: none; color: #000099; font-weight: bold;}
.who    {font-size: 12px; color: #354463;}
.inv    {background-color: #dcdcdc; color: #354463; font-family: verdana; font-size: 10pt; border: 1pt solid #000000;}
.new    {color: #354463; font-family: verdana; font-size: 8pt; border: 1pt solid #000000; font-weight: bold;}
.but,
.b                      {color: #000000; font-family: verdana; font-size: 8pt; border: 1pt solid #000000; font-weight: bold; background-color: #cccccc; cursor: pointer;}
.ad                    {border-bottom: #000000 1px solid; border-left: #000000 1px solid; border-right: #000000 1px solid; border-top: #000000 1px solid;}
.nick                {font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif; font-weight: bold; font-size: 10pt; color: #003388; text-decoration: none; cursor: pointer;}
.nick:hover  {color: #0066FF;}
.sys,
.sys2    {font-family: Courier; font-weight: normal; font-size: 8pt; color: #B00000; text-decoration: none;}
.p1      {font-family: verdana; font-weight: bold; font-size: 10pt; color: #991111; text-decoration: none;}
.p1:hover  {font-family: verdana; font-weight: bold; font-size: 10pt; color: #0066FF; text-decoration: none;}
.p2      {font-family: verdana; font-weight: bold; font-size: 10pt; color: #121180; text-decoration: none;}
.t      {font-family: verdana; font-weight: bold; font-size: 10pt; color: #552255; text-decoration: none;}
.hitted    {font-family: verdana; font-weight: bold; font-size: 10pt; color: #0080C0;}
.krit    {font-family: verdana; font-weight: bold; font-size: 10pt; color: #990000;}
.magic    {font-family: verdana; font-weight: bold; font-size: 10pt; color: red;}
.navik     {font-family: verdana; font-size: 10pt; font-weight: normal;}
.sysMain  {font-family: verdana; font-weight: bold; font-size: 8pt; color: #990000;}
.btn    {border: #817a63 1px double; font-size: 7.5pt; color: #dfddd3; font-family: verdana, arial, helvetica, sans-serif; background-color: #2b2b18;}
.btn2    {border: 1px double #9a9996; font-size: 12px; color: #dfdfdf; background-color: #504F4C; cursor: pointer;}
.date    {font-family: Courier; font-size: 8pt; text-decoration:none; font-weight:normal; color: #007000;}
.date2    {font-family: Courier; font-size: 8pt; text-decoration:none; font-weight:normal; color: #007000; background-color: #00FFAA;}
select,
textarea,
input         {border: solid 1pt #B0B0B0; font-family: MS Sans Serif; font-size: 10px; color: #191970; margin-bottom: 2px; margin-top: 1px;}
.m            {background: #99CCCC; text-align: center;}
.s            {background: #BBDDDD; text-align: center;}
.active        {cursor: pointer;}
.nonactive {opacity: 0.3; cursor: default;}
.show     {border: 0px; background-color: #dedede; font-weight: bold; width: 40px; text-align: right; font-size: 10pt; font-family: Verdana; margin: 0px; padding: 0px; cursor: default; color: black;}
img.skill   {border: 0px; cursor: pointer;}
td.skill       {font-weight: bold;}

#hint3    {width: 240px; font-family: MS Sans Serif; font-size: 8px; text-decoration: none; color: #000080; z-index: 99; position: fixed; display: none;}

.tzS    {font-weight: bold; color: #000000; background: #CCCCCC; text-align: center; cursor: default; width: 150px;}
.notz    {font-weight: bold; color: #003388; background: #CCCCCC; text-align: center; cursor: default;}
.tz      {font-weight: bold; color: #003388; background: #CCCCCC; text-align: center; cursor: pointer; width: 150px;}
.tzOver    {background: #C0C0C0;}
.tzSet    {background: #A6B1C6; cursor: default;}
.dtz    {display: none;}

.posit    {border-top: 1px solid #FFFFFF; border-right: 1px solid #666666; border-bottom: 1px solid #666666; border-left: 1px solid #FFFFFF; padding: 2px;}
.style_desc  {padding-left: 25px; color: green; display: none;}
.style_best  {position: absolute; left: 100px; top: 132px; display: none;}
.broken    {background-color: transparent;}
.anketabg  {background-color: #D3D2D0;}

.buttons_under    {white-space: nowrap; padding-left: 3px; padding-right: 3px; height: 10px;}
a.passage      {font-weight: bold; font-size: 10px; text-decoration: none; color: #3B3936;}
a.passage:hover    {color: #76726b;}
a.dis_passage,
a.dis_passage:hover  {opacity: 0.5; color: gray; text-shadow: 0.1em 0.1em white;}

.help    {background: #A9AFC0;}

.shape     {background: black; width: 120px; height: 220px; border-right: 25px solid #dedede; border-bottom: 2px solid #dedede;}
.dis_shape {background: grey;}

#mmoves    {border: #666666 1px solid; padding: 2px; visibility: hidden; overflow: visible; white-space: nowrap; position: absolute; left: 0px; top: 0px; background-color: #ffffcc; z-index: 200; text-align: left;}

#help          {z-index: 112; position: fixed; width: 700px; height: 300px; border-bottom: 3px double #ffffff; border-left: 3px double #ffffff; border-right: 3px double #ffffff; border-top: 2px groove #ffffff; border-radius: 5px; padding: 5px; display: none; overflow-y: auto; background-color: #D5D5D5;}
#help_bg   {z-index: 111; position: fixed; background-color: #000000; opacity: 0.5; display: none; top: 0px; left: 0px;}
.but_close {cursor: pointer; position: absolute; top: 0px; right: 0px;}
.loadbar      {width: 40px; height: 5px; padding-right: 10px; display: none;}

/* --- FORM DESIGN --- */
.form-container {
    max-width: 800px;
    margin: 20px auto;
    background: #f9f9f9;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    font-family: 'Gabriela', serif;
}

.form-header {
    background: #e6e6e6;
    padding: 15px 20px;
    border-bottom: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-header h3 {
    margin: 0;
    color: #8f0000;
    font-size: 18px;
    text-transform: uppercase;
    font-family: 'Gabriela', serif;
}

.form-body {
    padding: 20px;
}

.form-row {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
    border-bottom: 1px dashed #eee;
    padding-bottom: 15px;
}

.form-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.form-label {
    width: 200px;
    font-weight: bold;
    color: #333;
    font-size: 14px;
}

.form-input {
    flex-grow: 1;
}

.form-input input[type="text"],
.form-input input[type="password"],
.form-input input[type="email"],
.form-input select,
.form-input textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    font-family: 'Gabriela', serif;
}

.form-input input[type="text"]:focus,
.form-input input[type="password"]:focus,
.form-input input[type="email"]:focus,
.form-input select:focus,
.form-input textarea:focus {
    border-color: #8f0000;
    outline: none;
    box-shadow: 0 0 5px rgba(143, 0, 0, 0.2);
}

.form-note {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
    display: block;
}

.form-actions {
    padding: 20px;
    background: #f0f0f0;
    text-align: center;
    border-top: 1px solid #ccc;
}

.form-select-group {
    display: flex;
    gap: 10px;
}

.form-select-group select {
    width: auto !important;
    min-width: 70px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #555;
    margin-top: 5px;
}
.shapes-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 10px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.shape-card {
    position: relative;
    width: 100%;
    aspect-ratio: 120 / 220;
    background: #1a1a1a;
    border: 2px solid #4a4a4a;
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.shape-card:hover {
    transform: translateY(-5px) scale(1.05);
    border-color: #ffd700;
    box-shadow: 0 8px 12px rgba(0,0,0,0.5);
    z-index: 10;
}

.shape-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: #000;
}

.shape-card .shape-req {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 9px;
    padding: 2px 0;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    line-height: 1.2;
}

.shape-card:hover .shape-req {
    opacity: 1;
}

.shape-card.disabled {
    filter: grayscale(100%);
    opacity: 0.6;
    cursor: not-allowed;
    border-color: #333;
}

.shape-card.disabled:hover {
    transform: none;
    border-color: #333;
}

/* Shapes Header & Buttons */
.shapes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #e6e6e6;
    border-bottom: 1px solid #ccc;
    border-radius: 5px 5px 0 0;
    flex-wrap: wrap;
    gap: 10px;
}

.shapes-filters {
    display: flex;
    gap: 5px;
}

.shapes-title {
    flex-grow: 1;
    text-align: center;
}

.shapes-title h3 {
    margin: 0;
    font-size: 16px;
    color: #8f0000;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Gabriela', serif;
}

.shapes-actions {
    display: flex;
    gap: 10px;
}

.btn-filter, .btn-action {
    padding: 8px 16px;
    border: 1px solid #817a63;
    background: #2b2b18;
    color: #dfddd3;
    font-family: 'Gabriela', serif;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    text-shadow: 1px 1px 0 #000;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2);
}

.btn-filter:hover, .btn-action:hover {
    background: #4a4a2a;
    color: #fff;
    border-color: #a09880;
    transform: translateY(-1px);
    box-shadow: 0 4px 5px rgba(0,0,0,0.3);
}

.btn-filter:active, .btn-action:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}