html, body {color: #222; font-size: 10pt; font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif; background-color: #dedede;}
img {border: 0}
a, a:visited {text-decoration: none; font-weight: bold; color: #003388;}
a:active, a:hover {color: #0066FF}
.ttl_css {position: absolute; padding: 7px; background-color: #DCDCDC; text-align: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset; border-radius: 4px; font-size: 13px; line-height: 15px; transform: scale(0.95); transition: transform 0.05s ease;}
.inf-wrapper {display: flex; width: 100%; gap: 10px; justify-content: space-between; align-items: flex-start;}
.inf-left {width: 246px;}
.inf-left-content {display: flex; flex-direction: column; gap: 6px; text-align: center;}
.inf-locked-msg, .inf-delete-warning {margin-top: 5px; padding: 5px 0; width: 100%; color: #ff0000; font-size: 12px; font-weight: bold; background-color: #FAE0E0;}
.inf-links {margin: 0; padding: 2px 12px 8px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; border: 1px solid #a2a2a2; box-shadow: inset 0 0 0 1px #f6f6f6, inset 1px 1px 2px rgba(0, 0, 0, 0.1); text-align: left;}
.inf-links legend {margin: 0; padding: 0 4px; background-color: #dedede; font-weight: bold; text-align: center;}
.inf-mods-wrapper {max-height: 300px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin-top: 6px; background: #f9f9f9; text-align: left;}
.inf-center {flex: 1;}
.inf-center-stats {margin-top: 25px; display: flex; flex-direction: column; font-size: 13px; line-height: 1.3;}
.inf-clan-head {color: #008080; font-weight: bold;}
.inf-copies-login {display: flex; align-items: center;}
.inf-battle-stats-middle {display: flex; align-items: center; gap: 6px;}
.inf-battle-stats-quantity {display: flex; align-items: center;}
.inf-battle-stats-quantity img {width: 7px; height: 7px; margin-left: 6px;}
.inf-center-extras {display: flex; flex-direction: column; gap: 12px;}
.inf-center-limitations, .inf-center-achievements {display: flex; flex-direction: column; gap: 6px;}
.inf-badges .inf-subtitle {margin-bottom: 4px;}
.inf-achievements-grid, .inf-badges-grid, .inf-icons-grid {display: flex; flex-wrap: wrap; align-items: center;}
.inf-achievements-grid img, .inf-icons-grid img {height: 33px;}
.inf-badges-grid img {height: 26px;}
.inf-achievements-grid img, .inf-badges-grid img, .inf-icons-grid img {object-fit: contain; display: block;}
.inf-limitation-item {display: flex; align-items: center; gap: 4px;}
.inf-limitation-item img {width: 24px; height: 15px; object-fit: contain;}
.inf-limitation-msg {padding: 5px; color: #ff0000; font-weight: bold; background: #FAE0E0; border-left: 3px solid #ff0000;}
.inf-right {width: 100px; display: flex; flex-direction: column; align-items: center; gap: 12px;}
.inf-zodiac img {width: 100px; height: 99px;} 
.inf-news img {width: 100px; height: 94px;}
.inf-character-profile {font-size: 13px; line-height: 1.3;}
.inf-header {margin-bottom: 6px; color: #8f0000; font-size: 16px; font-weight: bold; text-align: center;}
.inf-subitems-list {margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center;}
.inf-subitems-list li {width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-left: 1px solid #ffffff; border-top: 1px solid #ffffff; border-right: 1px solid #000000; border-bottom: 1px solid #000000;}
.inf-subitem-img {max-width: 40px; max-height: 40px; object-fit: contain; cursor: pointer;}
.inf-gift-block {position: relative; display: flex; flex-direction: column; gap: 4px;}
.inf-gift-list {display: flex; flex-wrap: wrap;}
.gift-img {width: 60px; height: 60px; object-fit: contain; cursor: pointer;}
.gift-arrow {width: 58px; height: 58px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; border-left: 1px solid #fff; border-top: 1px solid #fff; border-right: 1px solid #000; border-bottom: 1px solid #000;}
.gift-arrow::before {content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid #000;}
.gift-arrow-up::before {border-top: none; border-bottom: 12px solid #000;}
.gifin {position: fixed; z-index: 9999; max-width: 320px; min-width: 160px; font-size: 12px; background-color: #DCDCDC; box-shadow: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inset; border-radius: 4px; display: none;}
.gifin-body {padding: 12px; display: flex; flex-direction: column; gap: 6px;}
.gifin-header {font-weight: bold; display: flex; justify-content: space-between; align-items: center; gap: 6px;}
.gifin-header img {width: 12px; height: 12px; padding-bottom: 2px; cursor: pointer;}
.gifin-img {display: flex; justify-content: center; align-items: center;}
.gifin-img img {width: 60px; height: 60px;}
.inf-center-moderators {display: flex; flex-direction: column; gap: 6px;}
.inpline, .oupline {width: calc(100% - 2px); height: 1px; margin: 8px 0 6px; background: #e8e8e8;}
.inpline {border: 1px inset #f5f5f5;}
.oupline {border: 1px outset #f5f5f5;}
.inpline.mwm, .oupline.mwm {max-width: 360px;}

/* Адаптация для экранов до 768px: планшеты в портретной ориентации и телефоны */

@media (max-width: 768px) {
    .inf-wrapper {flex-direction: column;}
    .inf-left {order: 1; width: 100%; display: flex; justify-content: center;}
    .inf-center {order: 3; width: 100%;}
    .inf-right {order: 2; width: 100%; height: 102px; flex-direction: row; justify-content: center;}
    .inf-center-stats {margin-top: 0;}
    .inf-center-achievements {text-align: center; gap: 12px;}
    .inf-achievements-grid, .inf-badges-grid, .inf-icons-grid {justify-content: center;}
    .inf-badges-grid {gap: 4px 0;}
    .inf-gift-list {justify-content: center;}
    .inf-gift-block {align-items: center;}
    .gift-img {width: 40px; height: 40px;}
    .gift-arrow {width: 38px; height: 38px;}
    .inf-subitems-list {justify-content: center;}
    .inf-subitems-list li {width: 40px; height: 40px;}
}

* {scrollbar-width: thin; scrollbar-color: rgba(80, 80, 80, 0.4) transparent;}
*::-webkit-scrollbar {width: 8px; height: 8px;}
*::-webkit-scrollbar-track {background: rgba(0, 0, 0, 0.05);}
*::-webkit-scrollbar-thumb {background: linear-gradient(180deg, rgba(120, 120, 120, 0.4), rgba(80, 80, 80, 0.6)); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; transition: background-color 0.2s ease, box-shadow 0.2s ease;}
*::-webkit-scrollbar-thumb:hover {background: linear-gradient(180deg, rgba(80, 80, 80, 0.6), rgba(50, 50, 50, 0.8)); box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);}