/* ---------- ÐÅÉÒÈÍÃ ---------- */

.orating {
    margin-left: 2px;
    padding: 3px 9px;
    min-width: 80px;
    height: 22px;
    background: var(--ratingnull) !important;  /* áàçîâûé ôîí (0) */
    border-radius: 999px;
    position: relative;
    text-align: center;
    float: right;
    top: -42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

/* çíà÷åíèå ðåéòèíãà (â öåíòðå) */
a.orating_res,
span.orating_res {
    order: 2;
    font: bold 12px/12px 'Trebuchet MS';
    color: #fff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
    display: inline-block;
    min-width: 32px;
}

a.orating_res:hover {
    color: #f0f0f0;
}

/* êíîïêè-îá¸ðòêè äëÿ ïàëüöåâ */
a.orating_p,
a.orating_m {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-shadow:
        0 1px 1px rgba(0, 0, 0, 0.55),
        0 1px 3px rgba(0, 0, 0, 0.45);
    transition:
        transform 0.15s ease,
        text-shadow 0.15s ease,
        opacity 0.15s ease;
}

/* ñàìè SVG-ýìîäçè âíóòðè ðåéòèíãà */
.orating img.emoji {
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle;
    filter:
        drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55))
        drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45));
    transition:
        transform 0.15s ease,
        filter 0.15s ease,
        opacity 0.15s ease;
}

.orating img.emoji:hover {
    transform: translateY(-1px);
    filter:
        drop-shadow(0 2px 2px rgba(0, 0, 0, 0.65))
        drop-shadow(0 3px 4px rgba(0, 0, 0, 0.55));
}

a.orating_p { order: 1; }  /* ëàéê ñëåâà */
a.orating_m { order: 3; }  /* äèçëàéê ñïðàâà */

a.orating_m:hover,
a.orating_p:hover {
    transform: translateY(-1px);
    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.65),
        0 3px 4px rgba(0, 0, 0, 0.55);
}

/* óæå ïðîãîëîñîâàë – çàòåìíÿåì ïàëåö */
a.orating_m.orated,
a.orating_p.orated {
    opacity: 0.45;
    transform: none;
}

/* ---------- ÑÎÑÒÎßÍÈß ÖÂÅÒÀ ÁÝÄÆÀ ---------- */

/* 0 / íåéòðàëüíûé */
.ogray {
    box-shadow: inset 0 1px var(--rating-bg-neutral, #e6e2e2);
    background: var(--rating-bg-neutral, #e6e2e2) !important;
}

/* ïëþñ */
.oplus {
    box-shadow: inset 0 1px var(--ratinggreen);
    background: var(--ratinggreen) !important;
}

/* ìàëåíüêèé ìèíóñ – ìÿãêèé, íå ñðàçó êðàñíûé */
.ominus {
    box-shadow: inset 0 1px var(--rating-minus-soft, #d5b8b8);
    background: var(--rating-minus-soft, #d5b8b8) !important;
}

/* áîëüøîé ïëþñ (çîëîòî) */
.ogold {
    box-shadow: inset 0 1px var(--ratingyellow);
    background: var(--ratingyellow) !important;
}

/* áîëüøîé ìèíóñ – ÿðêî-êðàñíûé */
.oblack {
    box-shadow: inset 0 1px var(--rating-minus-strong, #fd7979);
    background: var(--rating-minus-strong, #fd7979) !important;
}

.oload {
    cursor: progress !important;
}

/* ---------- ÏÅÐÅÌÅÍÍÛÅ ÄËß ÒÅÌ ---------- */

/* ñâåòëàÿ òåìà ïî óìîë÷àíèþ */
:root {
    --rating-bg-neutral: #e6e2e2;    /* ôîí ïðè 0 */
    --rating-minus-soft: #d5b8b8;    /* íåáîëüøîé ìèíóñ */
    --rating-minus-strong: #fd7979;  /* ñèëüíûé ìèíóñ */
}

/* ò¸ìíàÿ òåìà */
.theme-dark {
    --rating-bg-neutral: #4a4f59;    /* íåéòðàëüíûé íà ò¸ìíîì ôîíå */
    --rating-minus-soft: #6a5050;    /* ñïîêîéíûé ìèíóñ */
    --rating-minus-strong: #d86565;  /* ñèëüíûé ìèíóñ */
}

/* ---------- ÄÀËÜØÅ ÂѨ ÊÀÊ ÁÛËÎ ---------- */

.ocomm {
    float: right;
    width: 60px;
    height: 12px;
    padding: 3px 5px;
    background: #d8d8d8;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    color: #fff;
    position: relative;
    text-align: center;
}

a.ocomm_res {
    font: bold 10px/12px Tahoma;
    color: #fff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

a.ocomm_res:hover {
    color: #f0f0f0;
}

.comm_hide {
    padding: 10px 20px;
    font: normal 12px Arial;
    color: #666;
}

.comm_hide a {
    display: inline-block;
    margin-left: 10px;
    padding: 0 2px;
    color: #07d;
    text-decoration: underline;
    font-style: italic;
}

.comm_hide a:hover {
    color: #000;
    border: 0;
}

.ostats {
    display: none;
    background: var(--statsarea);
    background: rgba(0, 0, 0, 0.15);
    width: 270px;
    padding: 10px;
    border-radius: 5px;
    position: absolute;
    z-index: 999;
}

.ostats h4 {
    text-align: left;
    padding: 0 0 0 17px;
    margin: 0;
    border-bottom: 1px solid var(--statsborder);
    background: var(--statsarea);
    border-radius: 3px 3px 0 0;
    height: 35px;
    font: normal 13px/35px Tahoma, Arial;
    color: #999;
    cursor: move;
}

.ostats_area {
    background: var(--statsarea);
    border-radius: 3px;
    padding-bottom: 1px;
}

.oclose {
    width: 22px;
    height: 22px;
    background: url('../dleimages/oclose.png') no-repeat;
    float: right;
    margin: -3px -3px;
    border: 0;
    text-decoration: none;
}

.oclose:hover {
    background-position: 0 -22px;
}

.oclose:active {
    background-position: 0 -44px;
}

.ostats ul {
    list-style: none;
    margin: 0;
    padding: 0;
    float: none;
    height: auto;
}

.ostats ul li {
    display: block;
    background: url('../dleimages/oarrow.png') no-repeat 10px 0;
    border-bottom: 1px dotted var(--statsborder);
    padding: 0 10px 0 32px;
    float: none;
    height: 22px;
    font: normal 14px/22px 'Trebuchet MS', Tahoma;
    position: relative;
    overflow: hidden;
}

.ostats ul li.onoentry {
    background: none;
    text-align: center;
    color: #999;
    padding: 0 5px;
}

.ostats ul li:hover {
    background-color: var(--statsuserhover);
}

.ostats ul li a:hover {
    text-decoration: underline;
}

.ostats ul li.ostat-none {
    background-image: none;
}

.ostats ul li.ostat-none a {
    color: #888;
}

.ostats ul li.ostat-none:hover a {
    color: #555;
}

.ostats ul li.ostat-plus {}

.ostats ul li.ostat-plus a {
    color: #82ac34;
}

.ostats ul li.ostat-plus:hover {
    background-position: 10px -22px;
}

.ostats ul li.ostat-plus:hover a {
    color: #546338;
}

.ostats ul li.ostat-minus {
    background-position: 10px -44px;
}

.ostats ul li.ostat-minus a {
    color: #ab3935;
}

.ostats ul li.ostat-minus:hover {
    background-position: 10px -66px;
}

.ostats ul li.ostat-minus:hover a {
    color: #522726;
}

.ostats ul li span {
    float: right;
    font-family: Arial;
    color: #ccc;
}

.ostats ul li:hover span {
    color: #777;
}

#ostats-userinfo {
    position: absolute;
    height: 22px;
    background: rgba(88, 88, 88, 0.88);
    left: 0;
    top: 0;
    display: none;
    width: 100%;
    text-align: center;
}

#ostats-userinfo a {
    display: inline-block;
    padding: 0 15px;
    color: #e3e5e7;
    font: bold 10px/21px Tahoma;
    height: 21px;
    text-decoration: none;
}

#ostats-userinfo a:hover {
    text-decoration: underline;
    color: #fff;
    background: #000;
}

#ostats-userinfo a.close {
    float: right;
}

#okarma {
    float: left;
    height: 20px;
    color: #fff;
    text-align: center;
    padding: 0 10px;
}

.ostats-uservotes {
    width: 880px;
}

.ostats-uservotes-area {
    margin-right: 610px;
}

#ostats-user-ratings {
    float: right;
    width: 600px;
    background: #fafafa;
    border-radius: 4px;
    padding-bottom: 5px;
}

#ostats-user-ratings ul {
    overflow: auto;
}

.onavi {
    padding: 10px 0 0;
    position: relative;
    width: 100%;
}

.onavi .opages {
    margin: 0 15px;
    text-align: center;
}

.onavi .opages * {
    padding: 0 5px;
    font: normal 11px/22px Arial;
    height: 22px;
    margin: 0 3px 5px;
    display: inline-block;
    border-radius: 4px;
    border-left: 1px solid var(--statsborder);
    border-right: 1px solid var(--statsborder);
}

.onavi .opages a {
    color: #82ac34;
    text-decoration: none;
}

.onavi .opages a:hover {
    color: #fff;
    background-color: var(--statsnumbgkhover);
}

.onavi .opages span {
    color: var(--colortxtgray);
    background-color: var(--statsnumbgk);
    cursor: default;
}

.usernavistart,
.usernaviend {
    background: url('../dleimages/ostats.png') no-repeat;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 50%;
    margin-top: -11px;
    display: block;
    height: 22px;
    width: 22px;
    border: 0;
}

.usernavistart {
    left: -10px;
}

a.usernavistart:hover {
    background-position: 0 -22px;
}

a.usernavistart:active {
    background-position: 0 -44px;
}

span.usernavistart {
    background-position: 0 -66px;
}

.usernaviend {
    right: -10px;
    background-position: -22px 0;
}

a.usernaviend:hover {
    background-position: -22px -22px;
}

a.usernaviend:active {
    background-position: -22px -44px;
}

span.usernaviend {
    background-position: -22px -66px;
}

#orating-bar {
    padding: 1px 0 1px 1px;
    background: var(--statsum);
    border-radius: 4px;
    position: relative;
    margin: 5px 2px;
    height: 17px;
}

#orating-bar div {
    float: left;
    height: 15px;
    overflow: hidden;
}

#orating-bar div p {
    font: bold 10px/15px Tahoma;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    text-align: center;
    margin: 0;
    padding: 0;
}

#orating-bar-oplus {
    border-top: 1px solid var(--greenstatstop);
    border-bottom: 1px solid var(--greenstatsbottom);
    background-color: var(--greenstatsbgk);
    border-radius: 4px 0 0 4px;
}

#orating-bar-ominus {
    border-top: 1px solid var(--redstatstop);
    border-bottom: 1px solid var(--redstatsbottom);
    background-color: var(--redstatsbgk);
    border-radius: 0 4px 4px 0;
}

/* ---------- ÌÎÁÈËÊÀ: öåíòð è îòñòóï îò ïîñòåðà ---------- */
@media (max-width: 768px) {
    .orating {
        float: none;                 /* óáèðàåì float ñïðàâà */
        top: 0;                      /* íå ïðèïîäíèìàåì */
        margin: 14px auto 14px;      /* ñâåðõó 10px, ñíèçó 14px îò ïîñòåðà */
        width: auto;
        max-width: 80px;
        justify-content: center;     /* ñîäåðæèìîå ïî öåíòðó */
    }

    /* íà âñÿêèé ñëó÷àé öåíòðèðóåì ignore-select, åñëè êëàññ åñòü */
    .orating.ignore-select {
        margin-left: auto;
        margin-right: auto;
    }
}