@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');

*, *:after, *:before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

html { background: hsl(0deg 0% 6%); }

body {
    background-color: #141414;
    color: hsl(63deg 32% 85%);
    text-shadow: hsl(0deg 0% 28%) 0 -1px 1px;
    font-size: 14px;
    max-width: 460px;
    min-height: 100vh;
    padding: 0 10px;
    margin: 0 auto;
    line-height: 1.4;
    font-family: 'PT Sans', sans-serif;
    box-shadow: 0 0 55px -6px rgb(0 0 0 / 31%) inset;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
body { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px) * 1.5) !important; }

.star-rating-css { display: inline-flex; gap: 4px; }

.character-wrap {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    width: 100%;
}
.character-wrap .character-sprite { flex: 0 0 auto; position: relative; }

.items {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 45px;
    background: hsl(0deg 0% 6%);
    border: 1px groove hsl(43deg 9% 15%);
    border-radius: 4px;
    box-shadow: 0 0 20px 0 hsl(0deg 0% 0%) inset;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    overflow: visible !important;
}
.items img,
.foot_items .items img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    border-radius: inherit;
    position: static !important;
    top: 0 !important;
    margin: 0;
    padding: 0;
}
.foot_items .items img { vertical-align: revert; }

.items > span:not(.count_f) {
    position: absolute !important;
    top: -6px !important;
    right: -6px !important;
    left: auto !important;
    bottom: auto !important;
    width: 18px;
    height: 18px;
    display: block;
    z-index: 5;
    pointer-events: none;
}
.items > span:not(.count_f) img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.items > .count_f {
    position: absolute !important;
    left: -6px !important;
    bottom: -6px !important;
    top: auto !important;
    right: auto !important;
    padding: 0;
    margin: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #e0c878;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    z-index: 6;
    pointer-events: none;
    text-shadow: 0 0 4px #000, 0 1px 2px #000, -1px 0 2px #000, 1px 0 2px #000;
}
span.count_f {
    position: absolute;
    left: -9px;
    top: 31px;
    color: hsl(38deg 48% 76%);
    text-shadow: 1px 1px 5px hsl(35deg 53% 47%);
}
a.items.zoll {
    width: 45px;
    height: 45px;
    border-radius: 4px;
    border: 1px groove hsl(50deg 65% 44%);
}

.tg-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.tg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #1a1710 0%, #221f14 100%);
    border: 1px solid #2a2412;
    border-radius: 8px;
    text-decoration: none;
    color: #e0d8b8;
    box-shadow: inset 0 1px 0 rgba(245,197,66,.08), 0 1px 2px rgba(0,0,0,.6);
    transition: filter .15s, border-color .15s;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.tg-row:hover { filter: brightness(1.12); border-color: #4a3f1c; }
.tg-row:active { transform: scale(.995); }

.tg-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tg-label { font-size: 14px; font-weight: bold; color: #f0e6c8; text-shadow: 0 1px 2px #000; }
.tg-value { font-size: 12px; color: #a89860; text-shadow: 0 1px 2px #000; }
.tg-value.on  { color: #7ec87e; }
.tg-value.off { color: #c87e7e; }

.tg-switch {
    position: relative;
    width: 46px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 12px;
    background: linear-gradient(180deg, #0a0a07 0%, #1a1508 100%);
    border: 1px solid #3a2f14;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.8), 0 1px 0 rgba(245,197,66,.08);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.tg-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(180deg, #dcd0a8 0%, #8a7a48 100%);
    box-shadow: 0 1px 3px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.4);
    transition: left .25s cubic-bezier(.4,.1,.4,1), background .25s ease;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.tg-switch.on {
    background: linear-gradient(180deg, #1e3a1e 0%, #2c6a2c 100%);
    border-color: #4a9a4a;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.6), 0 0 8px rgba(80,200,80,.4);
}
.tg-switch.on::after {
    left: 22px;
    background: linear-gradient(180deg, #d0f0d0 0%, #7ec87e 100%);
    box-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 6px rgba(126,200,126,.7), inset 0 1px 0 rgba(255,255,255,.6);
}
.tg-switch.off {
    background: linear-gradient(180deg, #2a0f0f 0%, #4a1818 100%);
    border-color: #6a2626;
}
.tg-switch.off::after { background: linear-gradient(180deg, #f0c0c0 0%, #c87e7e 100%); }

.hud-spacer { height: 61px; }

.hud {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50%, 0, 0);
    width: 100%;
    max-width: 460px;
    z-index: 1000;
    user-select: none;
    padding: 4px 8px 0;
    background: linear-gradient(180deg, #1e1c13 0%, #262218 50%, #1a1710 100%);
    border-bottom: 1px solid #2a2412;
    box-shadow: 0 3px 14px rgba(0,0,0,.9), inset 0 1px 0 rgba(245,197,66,.18);
    box-sizing: border-box;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.hud * { box-sizing: border-box; }
.hud::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(245,197,66,.5) 15%, rgba(245,197,66,.9) 50%, rgba(245,197,66,.5) 85%, transparent 100%);
    pointer-events: none;
}

.hud-row { display: flex; align-items: center; gap: 6px; height: 44px; }

.hud-avatar { position: relative; width: 38px; height: 38px; flex-shrink: 0; }
.hud-avatar__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(from 180deg, #4a3a12 0%, #a08030 20%, #c8a850 30%, #a08030 40%, #4a3a12 60%, #8a6e26 80%, #4a3a12 100%);
    box-shadow: 0 0 5px rgba(0,0,0,.9), inset 0 0 3px rgba(0,0,0,.6);
}
.hud-avatar__inner {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    overflow: hidden;
    background: #0a0a0a;
    border: 1px solid rgba(0,0,0,.9);
}
.hud-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.hud-avatar__lvl {
    position: absolute;
    left: -4px;
    bottom: -3px;
    min-width: 18px;
    height: 14px;
    padding: 0 4px;
    background: linear-gradient(180deg, #2a2416 0%, #12100a 100%);
    border: 1px solid #6a5626;
    border-radius: 3px;
    color: #b8a06a;
    font-size: 9px;
    font-weight: 600;
    text-align: center;
    line-height: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.9);
    z-index: 2;
    letter-spacing: -.2px;
}

.hud-actions { display: flex; gap: 4px; flex-shrink: 0; }
.hud-btn {
    position: relative;
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: linear-gradient(180deg, #2a2418 0%, #0d0b07 100%);
    border: 1px solid #3a2f14;
    box-shadow: inset 0 1px 0 rgba(245,197,66,.15), inset 0 -1px 0 rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.7);
    transition: filter .15s, transform .1s;
    text-decoration: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.hud-btn:hover { filter: brightness(1.3); }
.hud-btn:active { transform: scale(.94); }
.hud-btn img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 15px;
    object-fit: contain;
    filter: drop-shadow(0 1px 1px #000);
    display: block;
}
.hud-btn--active {
    border-color: #6b1a1a;
    box-shadow: inset 0 1px 0 rgba(255,120,120,.15), inset 0 -1px 0 rgba(0,0,0,.7), 0 0 6px rgba(220,50,50,.5);
}
.hud-btn--active::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #ff5050 0%, #a81818 100%);
    box-shadow: 0 0 5px #ff3838, 0 0 10px rgba(255,56,56,.7);
    animation: hudPulse 1.6s ease-in-out infinite;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
@keyframes hudPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .65; transform: scale(.8); }
}

.hud-res {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    margin-left: auto;
}
.hud-res span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: bold;
    color: #e0d8b8;
    text-shadow: 0 1px 2px #000;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}
.hud-res img { width: 13px; height: 13px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 1px 1px #000); }
.hud-res .r-energy { color: #b8e0a8; }
.hud-res .r-energy img { width: 14px; height: 14px; }
.hud-res .r-silver { color: #d8d8d8; }
.hud-res .r-gold   { color: #FDD463; }
.hud-res .r-dia    { color: #ff9090; }
.hud-res .r-ore    { color: #8eb8ff; }

.hud-xp {
    position: relative;
    height: 8px;
    margin: 4px -8px 0;
    background: linear-gradient(180deg, #1a1710 0%, #221e14 100%);
    border-top: 1px solid #2a2412;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.7);
}
.hud-xp__fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: linear-gradient(180deg, #ffe9a0 0%, #f5c542 30%, #d4a843 50%, #8a6318 100%);
    box-shadow: 0 0 8px rgba(245,197,66,.7), inset 0 1px 0 rgba(255,255,255,.5);
}
.hud-xp__text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px #000, 0 0 3px #000;
    letter-spacing: .5px;
    z-index: 2;
}

.fon-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 4px 6px; }
.fon-item {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #2a2412;
    box-shadow: 0 0 12px 0 rgba(0,0,0,.8) inset;
    background: #0d0d0d;
    transition: transform .15s ease, border-color .15s ease;
}
.fon-item:hover { transform: scale(1.04); border-color: #6a5a2a; }
.fon-item img { width: 100%; height: 100%; object-fit: cover; display: block; position: static !important; top: 0 !important; }
.fon-item--active {
    border-color: #ffcc00;
    box-shadow: 0 0 10px rgba(255,204,0,.6), 0 0 18px rgba(255,204,0,.35), 0 0 12px 0 rgba(0,0,0,.8) inset;
}
.fon-item--active img { opacity: .85; }
.fon-item__check {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffcc00;
    color: #141414;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    text-align: center;
    z-index: 2;
    box-shadow: 0 0 8px rgba(255,204,0,.9);
}

.character-pet {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    position: relative;
    z-index: 2;
    margin-bottom: 170px;
    margin-left: -35px;
}
.character-pet img { display: block; width: 80px; height: auto; image-rendering: pixelated; }

.css-star {
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
    line-height: 1;
    position: relative;
    display: inline-block;
    user-select: none;
}
.css-star::before { content: "★"; }
.css-star.full { color: #ffcc00; -webkit-text-stroke: 0.5px #ffcc00; }
.css-star.empty { color: transparent; -webkit-text-stroke: 0.5px #ffcc00; }
.css-star.half { color: transparent; -webkit-text-stroke: 0.5px #ffcc00; }
.css-star.half::after {
    content: "★";
    position: absolute;
    top: 0;
    left: 0;
    color: #ffcc00;
    -webkit-text-stroke: 0.5px #ffcc00;
    clip-path: inset(0 50% 0 0);
}

.daily-camp-row {
    background: linear-gradient(90deg, rgba(240,192,96,0.18) 0%, rgba(240,192,96,0.05) 100%);
    border-left: 3px solid #f0c060;
    border-radius: 6px;
}
.camp-highlight { color: #f0c060 !important; font-weight: 600; text-shadow: 0 0 8px rgba(240,192,96,0.4); }

.hero {
    position: relative;
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
    padding: 0 0 4px;
    isolation: isolate;
    overflow: clip;
}
.hero__bg {
    position: absolute;
    inset: 0 0 -40px 0;
    background-image: var(--hero-bg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
}
.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,8,6,.95) 0%, rgba(0,0,0,.25) 15%, rgba(0,0,0,.45) 70%, rgba(0,0,0,.85) 100%);
}
.hero__nick {
    text-align: center;
    font-size: 16px;
    margin-bottom: 5px;
    padding-top: 5px;
    text-shadow: 0 0 12px #000, 0 2px 4px #000;
}
.hero__nick img { display: inline-block; vertical-align: middle; }
.hero__nick-clan { display: block; font-size: 13px; color: #d8b06a; margin-top: 1px; }
.hero__nick-clan img { display: inline-block; vertical-align: middle; margin-right: 3px; }
.hero__grid {
    display: grid;
    grid-template-columns: 52px 1fr 52px;
    align-items: stretch;
    justify-items: center;
    padding: 0 4px;
    overflow: visible;
}
.slots {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch;
    height: 100%;
    padding: 6px 0;
    gap: 20px;
    position: relative;
    z-index: 3;
}
.slot {
    width: 48px;
    height: 48px;
    background: #0d0d0d;
    border: 1px solid #2a2412;
    border-radius: 4px;
    box-shadow: 0 0 20px 0 rgba(0,0,0,.8) inset;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    flex-shrink: 0;
}
.slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    position: static !important;
    top: 0 !important;
    margin: 0;
    padding: 0;
}
.slot span {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 16px;
    z-index: 2;
    pointer-events: none;
    display: block;
}
.slot span img { width: 100%; height: 100%; object-fit: contain; }
.slot--empty { pointer-events: none; }

.stage {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    height: 340px;
    padding: 0;
    overflow: visible;
}
.hero--no-pet .stage { height: 340px; justify-content: center; }
.hero--no-pet .sprite { height: 230px; margin-left: 0; margin-right: 0; transition: none; }
.sprite {
    flex-shrink: 0;
    align-self: flex-end;
    height: clamp(86px, calc(230px - var(--pet-level, 1) * 1.8px), 230px);
    z-index: 2;
    filter: drop-shadow(0 10px 22px rgba(0,0,0,.7));
    transition: height .3s ease;
    position: relative;
    margin-left: 5px;
    display: block;
    text-decoration: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.sprite img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
    object-position: bottom left;
    position: static !important;
    top: 0 !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.pet {
    flex-shrink: 0;
    align-self: flex-end;
    width: calc(45% + var(--pet-level, 1) * 1%);
    max-width: 110%;
    margin-right: clamp(-90px, calc(60px - var(--pet-level, 1) * 1.65px), 60px);
    position: relative;
    z-index: 1;
    pointer-events: none;
    transition: width .3s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
.pet img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: bottom right;
    image-rendering: pixelated;
    transform: scaleX(var(--pet-flip, 1));
    transform-origin: bottom center;
    transition: transform .3s ease;
    position: static !important;
    top: 0 !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.stars {
    text-align: center;
    padding: 6px 0 0;
    font-size: 18px;
    color: #ffcc00;
    letter-spacing: 2px;
    text-shadow: 0 0 6px rgba(255,204,0,.5);
}

.users_character .character-sprite {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 380px;
    top: -160px;
    vertical-align: top;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,0.6));
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.users_character .character-sprite img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
}

.dt-mult-box {
    background: #0f0f16;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 12px 10px;
    margin: 10px 0;
    text-align: center;
}
.dt-mult-title { color: #c9c9d4; font-size: 12px; margin-bottom: 6px; }
.dt-mult-title b { color: #f0c060; }
.dt-mult-row { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 8px 0; }
.dt-mult-current, .dt-mult-next {
    font-family: 'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif;
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    -webkit-text-stroke: 1px rgba(0,0,0,.55);
    paint-order: stroke fill;
}
.dt-mult-current {
    color: #f0c060;
    background: linear-gradient(180deg, #fff0b0 0%, #f0c060 45%, #a87818 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 12px rgba(240,192,96,.5), 0 2px 4px rgba(0,0,0,.7);
}
.dt-mult-next {
    color: #8a8a98;
    background: linear-gradient(180deg, #d8d8de 0%, #9898a6 45%, #5a5a68 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: .8;
}
.dt-mult-arrow { font-size: 20px; color: #5a5a68; font-weight: 700; }
.dt-mult-max { color: #f0c060; font-size: 18px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
.dt-mult-progress { color: #c0c0c0; font-size: 12px; margin-top: 6px; }
.dt-mult-progress b { color: #f0e68c; }
.dt-mult-bar { width: 100%; height: 10px; margin-top: 6px; }

.dt-task-title { text-align: center; font-weight: 700; margin-bottom: 6px; }
.dt-task-info { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.dt-task-text { font-size: 13px; line-height: 1.55; color: #b8b8c4; text-align: left; }
.dt-task-text img.icons { vertical-align: middle; }
.dt-task-mult {
    font-family: 'Trebuchet MS', 'Segoe UI', Tahoma, sans-serif;
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -2px;
    -webkit-text-stroke: 1px rgba(0,0,0,.6);
    paint-order: stroke fill;
    color: #f0c060;
    background: linear-gradient(180deg, #fff0b0 0%, #f0c060 45%, #a87818 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 12px rgba(240,192,96,.45), 0 2px 4px rgba(0,0,0,.7);
    user-select: none;
    flex-shrink: 0;
    margin-right: 4px;
}
.dt-task-claimed { color: #4caf50; font-size: 13px; }

.transition-fade { transition: opacity 0.1s ease-in-out; opacity: 1; }
html.is-animating .transition-fade { opacity: 0; }

#dailyModal .dc-list {
    background: #100d07;
    border: 1px solid #6b5a2a;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.7);
}
#dailyModal .dc-list-head {
    padding: 10px 12px;
    background: linear-gradient(180deg, #3a2f1a, #241b0c);
    border-bottom: 2px solid #6b5a2a;
    color: #FDD463;
    font-weight: bold;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-shadow: 0 0 8px rgba(253,212,99,0.7), 0 1px 2px #000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(253,212,99,0.2);
}
#dailyModal .dc-list-head .cnt {
    font-size: 11px;
    font-weight: bold;
    color: #ffd97a;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px rgba(253,212,99,0.6);
}
#dailyModal .dc-grid { display: grid; grid-template-columns: repeat(5, 1fr); }
#dailyModal .dc-cell {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border-right: 1px solid #2a2214;
    border-bottom: 1px solid #2a2214;
    padding: 9px 2px 6px;
    position: relative;
    text-decoration: none;
    background: linear-gradient(180deg, #221c11, #14110a);
    overflow: hidden;
    transition: transform 0.12s ease;
}
#dailyModal .dc-cell:nth-child(5n) { border-right: none; }
#dailyModal .dc-cell:nth-child(n+26) { border-bottom: none; }
#dailyModal .dc-cell .n {
    position: absolute;
    top: 3px;
    left: 5px;
    font-size: 10px;
    color: #a89060;
    font-weight: bold;
    line-height: 1;
    z-index: 2;
    text-shadow: 0 1px 2px #000;
}
#dailyModal .dc-cell .i {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.9));
    position: relative;
    z-index: 1;
}
#dailyModal .dc-cell .a {
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1;
    text-shadow: 0 1px 2px #000;
    position: relative;
    z-index: 1;
}
#dailyModal .dc-cell::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -65%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.75;
}
#dailyModal .c-ser::before { background: radial-gradient(circle, hsla(0deg 0% 90% / .7) 0%, transparent 70%); }
#dailyModal .c-ore::before { background: radial-gradient(circle, hsla(219deg 90% 70% / .85) 0%, transparent 70%); }
#dailyModal .c-dia::before { background: radial-gradient(circle, hsla(0deg 75% 65% / .85) 0%, transparent 70%); }
#dailyModal .c-zol::before { background: radial-gradient(circle, hsla(53deg 100% 60% / .9) 0%, transparent 70%); }
#dailyModal .c-ser .a { color: #e0e0e0; }
#dailyModal .c-ore .a { color: #8eb8ff; }
#dailyModal .c-dia .a { color: #ff9090; }
#dailyModal .c-zol .a { color: #ffd97a; }
#dailyModal .dc-cell.done { background: linear-gradient(180deg, #16361a, #0a1c0c); border-color: #2a5a30; }
#dailyModal .dc-cell.done::before { opacity: .2; }
#dailyModal .dc-cell.done .i { filter: grayscale(.5) drop-shadow(0 1px 3px rgba(0,0,0,.9)); }
#dailyModal .dc-cell.done .a { color: #7cc47c !important; }
#dailyModal .dc-cell.done::after {
    content: '✓';
    position: absolute;
    top: 3px;
    right: 4px;
    color: #6dd46d;
    font-weight: bold;
    font-size: 11px;
    text-shadow: 0 0 8px rgba(109,212,109,1);
    z-index: 3;
}
#dailyModal .dc-cell.missed {
    background: linear-gradient(180deg, #3a0a0a, #1a0606);
    border-color: #8a2020;
    box-shadow: inset 0 0 14px rgba(255,60,60,0.25);
}
#dailyModal .dc-cell.missed::before { opacity: .5; background: radial-gradient(circle, hsla(0deg 90% 55% / .8) 0%, transparent 70%); }
#dailyModal .dc-cell.missed .i { filter: grayscale(.6) drop-shadow(0 1px 3px rgba(0,0,0,.9)); }
#dailyModal .dc-cell.missed .n { color: #ff7070; }
#dailyModal .dc-cell.missed .a { color: #ff7070 !important; text-shadow: 0 0 8px rgba(255,80,80,0.8), 0 1px 2px #000; }
#dailyModal .dc-cell.missed::after {
    content: '✕';
    position: absolute;
    top: 3px;
    right: 4px;
    color: #ff5252;
    font-weight: bold;
    font-size: 11px;
    text-shadow: 0 0 8px rgba(255,82,82,1);
    z-index: 3;
}
#dailyModal .dc-cell.now {
    background: linear-gradient(180deg, #4a3a14, #2a200a);
    border: 2px solid #FDD463;
    box-shadow: 0 0 24px rgba(253,212,99,0.9), 0 0 40px rgba(253,212,99,0.5), inset 0 0 24px rgba(253,212,99,0.3);
    animation: dcPulse 1.6s ease-in-out infinite;
    cursor: pointer;
    z-index: 2;
    will-change: box-shadow;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
#dailyModal .dc-cell.now .n { color: #FDD463; font-size: 11px; text-shadow: 0 0 8px rgba(253,212,99,0.9); }
#dailyModal .dc-cell.now::before { opacity: 1; width: 46px; height: 46px; }
#dailyModal .dc-cell.now .i { width: 22px; height: 22px; filter: drop-shadow(0 0 12px rgba(253,212,99,1)); }
#dailyModal .dc-cell.now .a { font-size: 14px; color: #fff !important; text-shadow: 0 0 12px rgba(253,212,99,1), 0 1px 2px #000; }
#dailyModal .dc-cell.now:hover { filter: brightness(1.2); }
#dailyModal .dc-cell.now:active { transform: scale(.97); }
@keyframes dcPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(253,212,99,.7), 0 0 36px rgba(253,212,99,.35), inset 0 0 22px rgba(253,212,99,.25); }
    50%      { box-shadow: 0 0 34px rgba(253,212,99,1), 0 0 56px rgba(253,212,99,.6), inset 0 0 32px rgba(253,212,99,.4); }
}
#dailyModal .dc-cell.future { opacity: .75; background: linear-gradient(180deg, #1c1810, #100e08); }
#dailyModal .dc-cell.future .i { filter: grayscale(.7) drop-shadow(0 1px 3px rgba(0,0,0,.9)); opacity: .7; }
#dailyModal .dc-cell.future::before { opacity: .35; }
#dailyModal .dc-cell.future .a { color: #7a6a48; }
#dailyModal .dc-cell.final {
    background: linear-gradient(180deg, #4a2a10, #241205);
    border-top: 2px solid #FDD463;
    box-shadow: inset 0 0 20px rgba(253,212,99,.5), 0 0 14px rgba(253,212,99,.4);
}
#dailyModal .dc-cell.final .n { color: #FDD463; text-shadow: 0 0 8px rgba(253,212,99,.9); }
#dailyModal .dc-cell.final .a { color: #FDD463 !important; text-shadow: 0 0 10px rgba(253,212,99,.9), 0 1px 2px #000; }

.flying-swit {
    position: fixed;
    z-index: 100000;
    pointer-events: none;
    width: 40px;
    height: 40px;
    transition:
        transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity   0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        top       0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        left      0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: drop-shadow(0 0 10px rgba(255, 200, 0, 0.8));
}
.flying-swit.active {
    transform: scale(1.3) rotate(360deg);
    filter: drop-shadow(0 0 20px rgba(255, 100, 0, 1));
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.shake-animation { animation: shake 0.5s ease-in-out; }

.levelup-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10vh 20px 20px;
    box-sizing: border-box;
    z-index: 99999;
    overflow-y: auto;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.levelup-modal-content {
    border: none;
    border-radius: 12px;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    animation: modalPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #ffffff;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 16px;
    box-sizing: border-box;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.levelup-modal-content::-webkit-scrollbar { display: none; }
@keyframes modalPopIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.daily-box {
    background: hsl(53deg 20% 7%) !important;
    border: 1px solid hsl(53deg 35% 20%) !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5) !important;
    padding: 0 !important;
    overflow: hidden !important;
    margin: 11px 0 !important;
}
.daily-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 12px !important;
    background: hsl(53deg 25% 10%) !important;
    border-bottom: 1px solid hsl(53deg 35% 18%) !important;
    color: #b89a4a !important;
    font-weight: bold !important;
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 1px #000 !important;
}
.daily-head .close-x {
    color: #666 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    padding: 0 4px !important;
    text-decoration: none !important;
}
.daily-head .close-x:hover { color: #ffcc00 !important; }
.daily-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 22px 7px 10px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid hsl(53deg 20% 12%) !important;
    text-decoration: none !important;
    color: hsl(46deg 25% 65%) !important;
    font-size: 11.5px !important;
    line-height: 1.2 !important;
    position: relative !important;
    transition: background 0.15s !important;
    text-shadow: 0 1px 1px #000 !important;
}
.daily-row:last-child { border-bottom: none !important; }
.daily-row:hover { background: hsla(53deg 60% 30% / 0.12) !important; }
.daily-row::after {
    content: "›" !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 16px !important;
    color: hsl(53deg 40% 38%) !important;
    line-height: 1 !important;
    font-weight: normal !important;
}
.daily-row:hover::after { color: #ffcc00 !important; }
.daily-row img.daily-ico {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    position: static !important;
    top: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    object-fit: contain !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.9)) !important;
}
.daily-row u { color: #d4b86a !important; text-decoration: underline !important; text-underline-offset: 2px !important; }
.daily-row .grey-text { color: hsl(0deg 0% 50%) !important; }

.bare-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px 6px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 8px 0 !important;
    margin: 11px 0 !important;
    overflow: visible !important;
}
.bare-grid a,
.bare-grid a:nth-child(2n) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: bold !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: 0 1px 2px #000, 0 0 6px #000 !important;
    letter-spacing: 0.3px !important;
    transition: transform 0.15s !important;
    position: relative !important;
    box-shadow: none !important;
}
.bare-grid a:hover,
.bare-grid a:active { transform: scale(1.06) !important; }
.bare-grid a img {
    width: 54px !important;
    height: 54px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    object-fit: cover !important;
    margin: 0 !important;
    position: static !important;
    top: 0 !important;
    background: hsl(0deg 0% 6%) !important;
    border: 1px solid hsl(53deg 60% 45%) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 20px 0 hsl(0deg 0% 0%) inset, 0 0 8px rgba(255,200,80,0.35) !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.9)) !important;
}
.bare-grid a.green-frame { position: relative !important; }
.bare-grid a.green-frame::before {
    content: "" !important;
    position: absolute !important;
    top: -14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-top: 14px solid #3dd13d !important;
    filter: drop-shadow(0 0 4px rgba(80,255,80,0.9)) !important;
    animation: greenArrow 1.2s ease-in-out infinite !important;
    pointer-events: none !important;
    z-index: 5 !important;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
@keyframes greenArrow {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
    50%      { transform: translateX(-50%) translateY(4px); opacity: 0.7; }
}
.bare-grid a.red-frame img {
    border-color: hsl(0deg 60% 50%) !important;
    box-shadow: 0 0 20px 0 hsl(0deg 0% 0%) inset, 0 0 8px rgba(255,80,80,0.45) !important;
}
.bare-grid a.red-frame:hover img,
.bare-grid a.red-frame:active img {
    border-color: hsl(0deg 80% 60%) !important;
    box-shadow: 0 0 20px 0 hsl(0deg 0% 0%) inset, 0 0 14px rgba(255,100,100,0.7) !important;
}
.bare-grid a.green-frame img {
    border-color: hsl(120deg 55% 45%) !important;
    box-shadow: 0 0 20px 0 hsl(0deg 0% 0%) inset, 0 0 8px rgba(80,255,80,0.5) !important;
}
.bare-grid a.green-frame:hover img,
.bare-grid a.green-frame:active img {
    border-color: hsl(120deg 75% 55%) !important;
    box-shadow: 0 0 20px 0 hsl(0deg 0% 0%) inset, 0 0 14px rgba(100,255,100,0.8) !important;
}
.bare-grid a .b-title {
    display: block !important;
    font-size: 11.5px !important;
    color: #fff !important;
    text-shadow: 0 1px 2px #000, 0 0 6px #000, 0 0 10px #000 !important;
}

.bottom-nav {
    min-height: 70px !important;
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    max-width: 450px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    background: linear-gradient(180deg, #17150e 0%, #1e1b12 50%, #13110b 100%) !important;
    border-top: 1px solid #2a2412 !important;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)) 8px !important;
    z-index: 500 !important;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.85), inset 0 1px 0 rgba(245,197,66,0.18) !important;
    box-sizing: content-box !important;
}
.bottom-nav a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 4px !important;
    color: hsl(53deg 25% 60%) !important;
    font-size: 10px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    text-shadow: 0 1px 2px #000 !important;
    transition: color 0.15s !important;
    letter-spacing: 0.3px !important;
}
.bottom-nav a img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    opacity: 0.85 !important;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.7)) !important;
    margin: 0 !important;
}
.bottom-nav a:hover, .bottom-nav a:active { color: #ffcc00 !important; }
.bottom-nav a:hover img { opacity: 1 !important; filter: drop-shadow(0 0 8px rgba(255,200,80,0.6)) !important; }

.top-nav { display: flex; justify-content: space-between; align-items: center; margin: 0 -2px; }
.top-nav > a {
    flex: 1;
    display: inline-flex;
    text-align: center;
    background-color: rgb(19, 18, 11);
    padding: 5px;
    border-top: 0 !important;
    border-bottom: 0 !important;
    height: 30px;
    line-height: 20px;
    justify-content: space-evenly;
}
.top-nav > a.active { background-color: rgb(46, 39, 0); border: 1px groove rgb(66, 57, 0); }
.top-nav > a + a { border-left: 0; }
.top-nav > a:first-child { border-top-left-radius: 5px; }
.top-nav > a:last-child { border-top-right-radius: 5px; }

.putana-flex { display: flex; justify-content: space-around; align-items: center; }
.putana-flex > .putana-inline { width: 100%; margin: 5px; }
.putana-flex > .putana-inline > #--name,
.putana-flex > .putana-inline > #--image { text-align: center !important; }
.putana-flex > .putana-inline + .putana-inline { margin-left: 80px; }
.putana-flex > .putana-parameters { position: relative; width: 360px; height: 76px; }
.putana-flex > .putana-parameters > .pp_absolute {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 25px);
}
.putana-flex > .putana-parameters > .pp_absolute > #--data { display: flex; justify-content: space-evenly; position: relative; }
.putana-flex > .putana-parameters > .pp_absolute > #--data > span > img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
[class*="putana-button__"] #--text { position: relative; z-index: 2; }

.divider {
    display: inline-block;
    width: 100%;
    height: 1px;
    margin: 3px 0;
    background: linear-gradient(to right, #555 50%, transparent 50%) repeat-x;
    background-size: 5px 1px;
}

.putana-button__red, .putana-button__gray {
    display: block;
    text-align: center;
    padding: 6px 10px;
    color: #fff;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.putana-button__red { background: linear-gradient(to bottom, rgb(204, 0, 0), rgb(63, 0, 0)); }
.putana-button__gray { background: linear-gradient(to top, rgb(10, 10, 10), rgb(50, 50, 50)); }

.notifications { position: fixed; max-width: inherit; z-index: 10; animation: bottomShow .25s ease; }
.notifications--bottom { bottom: 7rem; display: flex; flex-direction: column; align-items: center; }
.error, .success, .default {
    padding: .75rem 0.875rem;
    background: url(/assets/img/gradient_blocks.webp) center bottom repeat-x;
    background-color: hsl(0deg 61.81% 30.66%);
    border-radius: .15rem;
    border: 1px solid hsl(0deg 30.41% 16.91%);
    color: hsl(0deg 100% 95.95%);
}
.greeting {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 99999;
    overflow: hidden;
    background: hsl(40deg 21.78% 22.75%);
    color: hsl(40deg 79.53% 81.49%);
    border: 1px solid hsl(0deg 30.41% 16.91%);
    border-radius: .5rem;
    font-size: 14px;
    box-shadow: 0 1rem 1.5rem -.875rem hsl(36deg 26.43% 44.96%);
    width: max-content;
    min-width: 320px;
    padding: 8px 20px;
    animation: toastShow .35s ease forwards;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.greeting.success {
    background: hsl(140, 70%, 21%);
    border-color: hsl(140deg 40% 35%);
    color: hsl(137, 33%, 88%);
    box-shadow: 0 1rem 1.5rem -.875rem hsl(140deg 30% 20%);
}
.greeting.error {
    background: hsl(0, 88%, 20%);
    border-color: hsl(0, 37%, 48%);
    color: hsl(0, 60%, 84%);
    box-shadow: 0 1rem 1.5rem -.875rem hsl(0deg 40% 25%);
}
.success {
    background-color: hsl(82.38deg 35.38% 34.9%);
    border: 1px solid hsl(76.98deg 33.03% 22.49%);
    color: hsl(94.67deg 100% 95.95%);
}
.default { background-color: #000; border-color: hsl(27.27deg 6.42% 12.72%); }
.notifications__hide { animation: bottomHide .25s ease; }
.toast__bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background-color: hsl(41, 83%, 52%);
    border-radius: 0 0 .5rem .5rem;
    pointer-events: none;
}
@keyframes toastShow {
    0% { opacity: 0; transform: translateY(.75rem); }
    100% { opacity: 1; transform: translateY(0); }
}
.toast--hide { animation: toastHide .35s ease forwards; }
@keyframes toastHide {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(.75rem); }
}
@keyframes fillAnimation {
    0% { width: 0; }
    100% { width: 100%; }
}

.putana-buttons { display: flex; justify-content: space-around; margin: -3px; }
.putana-buttons > #--button {
    display: block;
    border: 1px solid rgb(72, 72, 72);
    background: linear-gradient(to top, rgb(10, 10, 10), rgb(50, 50, 50));
    width: 100%;
    margin: 3px;
    padding: 5px;
    text-align: center;
}
.putana-buttons > #--button:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
.putana-buttons > #--button:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.putana-buttons > #--button + #--button { margin-left: -1px; }

progress {
    display: block;
    background: black;
    border: 0;
    height: 5px;
    width: 100%;
    margin-top: 0 !important;
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 0 0 12px -3px #950000;
}
progress::-webkit-progress-value {
    background: #32cd32;
    border: 3px #32cd32;
    box-shadow: 0 0 1rem 0.5rem #280e0b;
}
progress::-webkit-progress-bar {
    background: #27292a;
    border: 1px ridge #686868;
    border-radius: 2px;
}

.button_smallOur a, .button_blueB a, .button_redR a {
    display: block;
    padding: 4px 11px;
    font-size: 13px;
    border: groove hsl(0deg 0% 39%);
    border-width: 0 0 1px 0;
    margin-top: 4px;
    margin-bottom: 4px;
    border-radius: 2px;
}
.button_smallOur a {
    background: linear-gradient(180deg, #2e5e21 0%, #1d3615 50%, #213e18 51%, #175c0a 100%);
    color: #dcca8f;
    border-color: #636363;
}
.button_blueB a {
    background: linear-gradient(180deg, hsl(224deg 68% 18%) 0%, hsl(225deg 58% 21%) 50%, hsl(230deg 63% 15%) 51%, hsl(220deg 55% 13%) 100%);
    color: hsl(46deg 52% 71%);
}
.button_redR a {
    background: linear-gradient(180deg, hsl(0deg 68% 10%) 0%, hsl(0deg 55% 18%) 50%, hsl(0deg 59% 10%) 51%, hsl(0deg 55% 13%) 100%);
    color: hsl(46deg 52% 71%);
}

.ot { margin: 6px; }
.ot2 { margin-top: 10px; }

img { vertical-align: middle; position: relative; top: -2px; }
a { color: hsl(48deg 15% 52%); text-decoration: none; }

.bflex { display: flex; flex-wrap: wrap; align-items: center; }
.bflex2 { display: flex; flex-wrap: wrap; align-items: flex-start; }

.form_radio { margin-bottom: 5px; }
.form_radio input[type=radio] { display: none; }
.form_radio label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 0;
    line-height: 18px;
    user-select: none;
}

.header { border: 1px solid hsl(0deg 0% 9%); border-top: 0; padding: 0 0 5px 0; margin: 0 -10px; }
.header .block_city {
    width: calc(100% - 28%);
    text-align: center;
    padding: 5px 0 0 0;
    font-size: 12px;
    color: hsl(52deg 22% 44%);
}
.block_city .city_color_one { color: hsl(64deg 34% 54%); }
.block_city .city_color_two { color: hsl(187deg 34% 54%); }
.block_city .city_color_three, .block_city .city_color_fo { color: hsl(0deg 80% 69%); }

.poster_city_one, .poster_city_two, .poster_city_three, .poster_city_fo,
.poster_c1, .poster_c2, .poster_c3, .poster_c4, .poster_c5, .poster_c6,
.poster_c7, .poster_c8, .poster_c9, .poster_c10, .poster_c11 {
    background-image: url(/css/img/city_one.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 220px;
    width: auto;
    margin: 0 -10px -150px -10px;
    border: 2px solid #222222;
}
.poster_city_two { background-image: url(/css/img/city_two.png); }
.poster_city_three { background-image: url(/css/img/city_three.png); }
.poster_city_fo { background-image: url(/css/img/city_4.png); }
.poster_c1 { background-image: url(/css/img/fortress/1.jpg); }
.poster_c2 { background-image: url(/css/img/fortress/2.jpg); }
.poster_c3 { background-image: url(/css/img/fortress/3.jpg); }
.poster_c4 { background-image: url(/css/img/fortress/4.jpg); }
.poster_c5 { background-image: url(/css/img/fortress/5.jpg); }
.poster_c6 { background-image: url(/css/img/fortress/6.jpg); }
.poster_c7 { background-image: url(/css/img/fortress/7.jpg); }
.poster_c8 { background-image: url(/css/img/fortress/8.jpg); }
.poster_c9 { background-image: url(/css/img/fortress/9.jpg); }
.poster_c10 { background-image: url(/css/img/fortress/10.jpg); }
.poster_c11 { background-image: url(/css/img/fortress/11.jpg); }

.header .block_notifications, .header .block_mail {
    width: 14%;
    height: 30px;
    padding: 5px 8px;
    text-align: center;
    display: inline-block;
    margin: 5px 0 0 0;
}
.header .block_mail { background: url(/css/img/mail.png) no-repeat center 3px; }
.header .block_notifications { background: url(/css/img/notifications.png) no-repeat center 3px; }
.header .mail_o, .header .notifications_o {
    display: block;
    width: 100%;
    height: inherit;
    position: relative;
    top: -9px;
    animation: flash 2.5s infinite both;
    will-change: opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.header .mail_o { background: url(/css/img/mail_o.png) no-repeat center 3px; }
.header .notifications_o { background: url(/css/img/notifications_o.png) no-repeat center 3px; }
@keyframes flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

.block_information { width: auto; text-align: center; margin: 0 -10px; }
.block_information .wrapper_progress {
    background: url(/css/img/line_up.png) center rgb(34 35 36);
    border: 1px groove #333333;
    display: block;
    overflow: hidden;
    position: relative;
    height: 14px;
}
.block_information .progress {
    position: absolute;
    background: url(/css/img/line_up_xp.png) center hsl(5deg 78% 49%);
    filter: hue-rotate(84deg);
    height: 100%;
    top: 0;
    left: 0;
}
.block_information .text {
    position: absolute;
    font-size: 9px;
    line-height: 0;
    z-index: 2;
    top: 6px;
    left: 47%;
    color: hsl(0deg 4% 89%);
}

.oh { float: left; padding: 6px; margin-top: 1.5px; }

.links {
    margin: 11px 0;
    border: 1px groove hsl(53deg 55% 11%);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.clear_header_line { position: relative; width: auto; margin: 0 -11px; }
.clear_header_line .header_line_ogranka {
    background: url(/css/img/obvo.png) center/contain no-repeat;
    height: 43px;
    width: 101%;
    position: absolute;
    top: -7px;
    left: -1px;
}
.links a, .links a:nth-child(2n) {
    display: block;
    color: hsl(46deg 52% 71%);
    padding: 7px 10px;
    font-size: 14px;
    border: groove hsl(0deg 0% 39%);
    border-width: 0;
}
.links a {
    background: linear-gradient(180deg, hsl(0deg 0% 9%) 0%, hsl(0deg 0% 10%) 50%, hsl(0deg 0% 7%) 51%, hsl(0deg 0% 9%) 100%);
}
.links a:nth-child(2n) {
    background: linear-gradient(180deg, hsl(53deg 43% 8%) 0%, hsl(51deg 56% 8%) 50%, hsl(51deg 52% 6%) 51%, hsl(55deg 29% 8%) 100%);
    border-color: hsl(55deg 53% 27%);
}
.links a:last-child { border-bottom: none; }
.links a:hover {
    background: linear-gradient(180deg, hsl(0deg 0% 9%) 0%, hsl(0deg 0% 13%) 50%, hsl(0deg 0% 9%) 51%, hsl(0deg 0% 8%) 100%);
}
.links a:nth-child(2n):hover {
    background: linear-gradient(180deg, hsl(53deg 43% 8%) 0%, hsl(49deg 10% 14%) 50%, hsl(54deg 16% 10%) 51%, hsl(55deg 29% 8%) 100%);
}
.horizontal a { width: calc(100% / 3); border-right: 0; }
.links .plus_text, .links a:nth-child(2n).plus_text {
    color: hsl(38deg 100% 63%);
    text-shadow: hsl(46deg 100% 18%) 0 -1px 1px;
}
.links .plus {
    color: hsl(46deg 100% 62%);
    display: inline-block;
    animation: pulsate 3.5s linear infinite;
    margin: -1px 0 0 3px;
    font-size: 17px;
    line-height: 17px;
    vertical-align: middle;
    will-change: text-shadow;
}
@keyframes pulsate {
    50% { text-shadow: 0 -1px hsl(57deg 100% 50% / 30%), 0 0 5px hsl(60deg 100% 50%), 0 0 8px hsl(24deg 100% 50%); }
}
.links .annotations { font-size: 12px; display: block; margin: 2px 0 0 0; color: hsl(52deg 12% 64%); }

.line { background: url(/css/img/line.png) center/contain no-repeat; height: 7px; display: block; width: auto; margin: 7px; }

.footer { text-align: center; padding: 0 0 calc(15px + env(safe-area-inset-bottom, 0px)) 0; }
.footer .block_character {
    background: hsl(54deg 3% 10%);
    box-shadow: 0 0 20px 0 hsl(54deg 89% 10%) inset;
    border: groove hsl(48deg 28% 41%);
    border-width: 0;
    margin: 0 -10px;
    padding: 3px;
}
.footer .block_nickname, .footer .block_money {
    width: 50%;
    padding: 8px 10px;
    text-align: start;
    font-size: 13px;
}
.footer .block_money { text-align: end; }
.footer .block_money span:nth-child(1) { color: hsl(49deg 85% 38%); }
.footer .block_money span:nth-child(2) { color: hsl(0deg 0% 67%); }
.footer .block_money span:nth-child(3) { color: hsl(69deg 11% 50%); }
.footer .block_stat { width: 100%; padding: 0 8px 8px 8px; font-size: 13px; }
.footer .block_stat span:nth-child(1) { color: hsl(201deg 93% 85%); }
.footer .block_stat span:nth-child(2) { color: hsl(38deg 42% 68%); }
.footer .block_stat span:nth-child(3) { color: hsl(0deg 29% 71%); }
.footer .links_small { padding: 10px 8px 0 8px; font-size: 13px; }
.footer .links_small a { color: hsl(45deg 40% 68%); padding: 0 7px; border-left: 1px solid hsl(62deg 9% 20%); }
.footer .links_little { font-size: 12px; }
.footer .links_little a { color: hsl(46deg 20% 66%); padding: 0 7px; border-left: 1px solid hsl(67deg 9% 19%); }
.footer .links_small a:first-child, .footer .links_little a:first-child { border: none; }
.footer .text { padding: 5px 10px; font-size: 13px; }
.footer .text a { color: hsl(38deg 27% 59%); }
.footer .links_menu_user { margin: 15px 0; }
.footer .links_menu_user a { color: hsl(41deg 100% 74%); font-size: 13px; }
.footer .links_menu_user span { display: block; }
.footer .icons_big { height: 59px; width: 65px; object-fit: contain; }

hr.trip_line {
    border: 0;
    height: 1px;
    margin: 0 -10px;
    background-image: linear-gradient(to right, hsl(290deg 16% 3% / 0%), hsl(314deg 100% 50%), hsl(290deg 16% 3% / 0%));
    box-shadow: -2px 4px 10px 0 hsl(341deg 100% 50%), 0 0 6px 0 hsl(306deg 100% 50%), 0 -6px 17px 0 hsl(316deg 100% 50%);
}

.event_go {
    background: hsl(315deg 57% 10%) url(/css/img/gold_event.png);
    background-repeat: no-repeat;
    background-size: contain;
    padding: 15px;
    text-align: end;
    margin: 0 -10px;
    font-size: 16px;
    color: hsl(45deg 100% 82%);
    text-shadow: 2px 2px 4px hsl(0deg 0% 0%), -2px -1px 13px hsl(49deg 100% 50%), 2px 0 14px hsl(327deg 100% 50%);
}
.event_go span { display: block; font-size: 13px; color: hsl(0deg 0% 76%); }

.splash_login {
    background: url(/css/img/splash.png) no-repeat 0 -60px/cover;
    margin: 0 -10px -270px -10px;
    width: auto;
    height: 440px;
}

.block_login, .block_text {
    background: hsl(52deg 29% 4%);
    padding: 5px 10px;
    margin: 11px 0;
    border: .1rem groove hsl(53deg 88.93% 16.67% / 55%);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 1px 31px 2px hsl(50deg 79% 4%) inset;
}

.text_go { text-align: center; color: hsl(49deg 58% 51%); margin: 6px 0 15px 0; font-size: 13px; }

.logo {
    background: url(/css/img/logo.png) no-repeat center/140px;
    height: 55px;
    width: 100%;
    position: relative;
    margin: 0 0 -55px 0;
}

.start_game {
    position: relative;
    margin: 20px auto 25px auto;
    display: block;
    text-align: center;
    padding: 9px 15px;
    border: 2px groove hsl(108deg 44% 29%);
    color: #fff;
    text-shadow: hsl(94deg 67% 9%) -2px -1px 2px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
    line-height: 15px;
    background: linear-gradient(13deg, rgb(64 156 1) 0%, rgb(0 71 11) 47%, rgb(49 79 28) 100%);
    border-radius: 4px;
    box-shadow: 0 0 7px 2px rgb(131 166 24 / 68%) inset, 0 0 13px 4px rgb(72 153 41 / 68%);
    font-family: 'PT Sans', sans-serif;
    cursor: pointer;
    transition: .5s;
}
.start_game:hover {
    border-color: hsl(108deg 74% 33%);
    box-shadow: 0 0 7px 2px rgb(114 182 55 / 68%) inset, 0 0 13px 4px rgb(80 180 41 / 86%);
}

select { width: 100%; }
input, textarea, select {
    padding: 4px 10px;
    border-radius: 4px;
    display: block;
    margin: 0 0 10px 0;
    font-size: 14px;
    line-height: 14px;
    background: hsl(50deg 13% 17%);
    border: 2px groove hsl(49deg 32% 26%);
    box-shadow: 0 1px 10px 0 hsl(50deg 30% 4%) inset;
    color: hsl(49deg 14% 46%);
    font-family: 'PT Sans', sans-serif;
    outline: none;
}
textarea { min-width: 100%; max-width: 100%; min-height: 75px; margin: 6px 0 12px 0; }
input[type="submit"] {
    background: hsl(40deg 58% 26%);
    color: hsl(40deg 84% 79%);
    box-shadow: 0 1px 10px 0 hsl(50deg 43% 2%) inset;
    padding: 6px 14px;
    cursor: pointer;
    transition: .5s;
}
.vf { display: inline-block; }
input[type="submit"]:hover {
    background: hsl(40deg 69% 29%);
    color: hsl(40deg 59% 87%);
    box-shadow: 0 1px 10px 0 hsl(50deg 77% 8%) inset;
}

.login_form { text-align: center; }
.login_form .login_repass { display: inline-block; margin: 0 0 5px 0; font-size: 13px; }

.title_login {
    display: block;
    margin: -8px 0 14px 0;
    text-align: center;
    color: hsl(40deg 13% 57%);
    position: relative;
}
.title_login:after {
    content: "";
    background: linear-gradient(90deg, hsl(41deg 38% 31%) 0, rgba(151,21,21,0) 80%);
    height: 2px;
    width: 32px;
    position: absolute;
    margin: 9px 0 0 8px;
}
.title_login:before {
    content: "";
    background: linear-gradient(270deg, hsl(41deg 38% 31%) 0, rgba(151,21,21,0) 80%);
    height: 2px;
    width: 32px;
    position: absolute;
    top: 9px;
    margin: 0 0 0 -40px;
}
.title_login.margin_top { margin: 10px 0 0 0; }

.users_character { position: relative; text-align: center; height: 160px; top: -60px; }
.avatars {
    width: 125px;
    height: 125px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px groove hsl(0deg 0% 54%);
    margin: 17px 0 0 0;
}

.foot_items .items { margin: -1px 2px; }
.foot_items { position: absolute; bottom: -120px; width: 100%; }
.left_items { position: absolute; display: flex; flex-direction: column; left: 18px; top: 2px; }
.right_items { position: absolute; display: flex; flex-direction: column; right: 18px; top: 2px; }

.red_1 { border: 1px groove hsl(43deg 49% 42%) !important; }
.red_2 { border: 1px groove hsl(86deg 49% 42%) !important; }
.red_3 { border: 1px groove hsl(202deg 49% 42%) !important; }
.red_4 { border: 1px groove hsl(326deg 49% 47%) !important; }
.red_5 { border: 1px groove hsl(0deg 71% 52%) !important; }
.red_6 { border: 1px groove hsl(0deg 100% 94%) !important; }

.infonel_user {
    position: absolute;
    top: -42px;
    left: 25%;
    right: 25%;
    text-align: center;
    font-size: 16px;
    text-shadow: 1px 0 4px black, 1px 0 2px black, 1px 0 12px black, -2px 0 12px black;
}
.infonel_user span { display: block; font-size: 14px; color: hsl(38deg 64% 67%); margin: 1px 0 0 0; }

.block_text span { color: hsl(44deg 97% 69%); }

.user_city1o, .user_city2o, .user_city3o, .user_city4o {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 -60px;
    margin: 0 -10px -325px -10px;
    width: auto;
    height: 440px;
}
.user_city1o { background-image: url(/css/img/user_city1o.png); opacity: .2; }
.user_city2o { background-image: url(/css/img/user_city2o.png); opacity: .1; }
.user_city3o { background-image: url(/css/img/user_city3o.png); opacity: .15; }
.user_city4o { background-image: url(/css/img/user_city4o.png); opacity: .15; }

.cashe_box { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }
.cashe { width: 40px; height: 40px; margin: 5px; }
.cashe img { width: 100%; object-fit: contain; }

.links.margin_top { margin: -14px 0 11px 0; }
.go_cashe_box { margin: 5px 0; color: hsl(54deg 100% 89%); }

.head_users_text .otv_chat {
    font-size: 13px;
    background: hsl(52deg 39% 8%);
    border-radius: 4px;
    line-height: 13px;
    padding: 2px 5px 4px 5px;
    display: inline-block;
    float: right;
}
.head_users_text { margin: 0 0 2px 0; }
.block_text .me { color: hsl(44deg 97% 69%); }
.p0 { padding: 0; }

.block_text_go { word-wrap: break-word; margin: 0 -10px; padding: 10px 20px; border-bottom: 1px solid hsl(52deg 16% 14%); }

.smile { display: inline-block; margin: 0 0 0 5px; }
.small_flex { padding: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
.small_flex .smile { width: calc(10% - 5px); box-sizing: border-box; margin: 5px 0 0 5px; }

.pagin { padding: 0 0 10px 0; text-align: center; }
.pagin a {
    display: inline-block;
    padding: 2px 8px;
    background: hsl(50deg 26% 6%);
    border: 1px groove hsl(49deg 83% 10%);
    border-radius: 4px;
    color: hsl(52deg 29% 45%);
    margin: 2px;
}
.pagin .yes { background: hsl(52deg 100% 11%); border-color: hsl(52deg 87% 16%); }

.us_ff { width: 100%; text-align: center; }
.block_text_go:nth-child(2n) { background: hsl(52deg 41% 6%); }

span.time { display: inline-block; font-size: 11px; position: relative; left: 5px; color: hsl(44deg 10% 40%); }
.time.new { color: hsl(102deg 32% 57%); }
.block_text.center { text-align: center; }
.title_cashe_mail { display: block; margin: 3px 0 5px 0; }

.fcs {
    display: inline-block;
    width: calc(33.333% - 8px);
    background: hsl(51deg 48% 8%);
    border: 1px groove #262108;
    padding: 0 4px 3px 4px;
    border-radius: 4px;
    margin: 4px;
    box-sizing: border-box;
    cursor: pointer;
}

.horizontal_two a { width: 50%; text-align: center; cursor: pointer; }
.sme { margin: 0 0 15px 0; }
.clear_header_line.margin_title { margin-top: 5px; margin-bottom: 16px; }
a.zakrep { color: hsl(30deg 100% 60%) !important; font-weight: 600; }

.red_block {
    display: block;
    width: calc(16.666% - 10px);
    margin: 5px;
    background: hsl(53deg 49% 10%);
    border: 1px groove hsl(53deg 57% 15%);
    border-radius: 3px;
    text-align: center;
    padding: 3px 2px 0 0;
    cursor: pointer;
}

.box_items_s {
    width: calc(33.333% - 10px);
    margin: 5px;
    text-align: center;
    background: hsl(0deg 0% 10%);
    border-radius: 4px;
    border: 1px groove hsl(0deg 0% 17%);
    font-size: 13px;
    padding: 9px;
}

.bflex.items_shop { margin: 0 -6px 7px -3px; }

.name_items_s { display: block; margin: 5px 0 0 0; font-size: 13px; color: hsl(0deg 0% 76%); }

.box_items_f, .box_items_fm {
    width: 100%;
    text-align: start;
    background: hsl(0deg 0% 10%);
    border-radius: 4px;
    border: 1px groove hsl(0deg 0% 17%);
    font-size: 13px;
    padding: 9px;
}
.box_items_f { margin: 0 0 5px 0; }
.box_items_fm { margin: 10px 0; background: hsl(0deg 4% 10%); border-color: hsl(0deg 2% 15%); }
.box_items_fm .links { width: 100%; text-align: center; }
.box_items_fm .links a {
    background: linear-gradient(180deg, hsl(54deg 71% 22%) 0%, hsl(54deg 41% 11%) 50%, hsl(53deg 41% 9%) 51%, hsl(51deg 81% 12%) 100%);
    color: hsl(52deg 87% 77%);
    border: 1px groove hsl(53deg 81% 34%);
}

.rm { border: 1px solid #131313; }

.block_info_red .name_items_s { font-size: 14px; color: hsl(48deg 49% 63%); margin: 0 0 3px 0; }
.cl_red .red_1, .cl_red .red_2, .cl_red .red_3, .cl_red .red_4, .cl_red .red_5, .cl_red .red_6 {
    border: none !important;
    color: hsl(51deg 14% 42%);
    box-shadow: 0 0 !important;
}
.cl_red .red_2 { color: hsl(94deg 69% 41%); }
.cl_red .red_3 { color: hsl(201deg 65% 62%); }
.cl_red .red_4 { color: hsl(320deg 67% 66%); }
.cl_red .red_5 { color: hsl(0deg 100% 71%); }
.cl_red .red_6 { color: hsl(0deg 0% 63%); text-shadow: 0 0 9px hsl(0deg 100% 50%); }
.block_info_red { width: calc(100% - 55px); margin: 0 0 0 5px; }

.box_items_z { width: 33.333%; text-align: center; margin: 0 0 10px -15px; }
.items_z { margin: 15px 0 10px 0; }

.craf_zone {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.box_items_zc { width: 33.333%; }
.go_craft { margin: 0 -12px; }
.go_craft img { width: 30px; }

.notifi { margin: 0 -10px; }
.notifi .err_n, .notifi .suc_n, .notifi .sucerr_n, .notifi .new_n { display: block; padding: 7px; border: 1px groove; }
.notifi .err_n {
    background: hsl(0deg 57% 30%);
    color: hsl(0deg 100% 93%);
    box-shadow: 0 0 14px 5px rgb(54 8 8 / 60%) inset;
    border-color: hsl(0deg 40% 50%);
}
.notifi .suc_n {
    background: hsl(102deg 41% 27%);
    color: hsl(126deg 100% 93%);
    box-shadow: 0 0 14px 5px rgb(26 56 13) inset;
    border-color: hsl(102deg 32% 47%);
}
.notifi .sucerr_n {
    background: hsl(102deg 5% 18%);
    color: hsl(0deg 0% 46%);
    box-shadow: 0 0 14px 5px rgb(27 31 26) inset;
    border-color: hsl(0deg 0% 51%);
}
.notifi .new_n {
    background: hsl(38deg 60% 40%);
    color: hsl(38deg 100% 84%);
    box-shadow: 0 0 14px 5px rgb(70 50 17) inset;
    border-color: hsl(38deg 18% 55%);
}

.pad { padding: 0 3% 2px; }

.skill-container { text-align: center; display: flex; flex-wrap: wrap; }
.skill-container > .item { flex: 0 0 25%; max-width: 25%; }

.hero__status {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    padding: 0 12px;
    position: relative;
    z-index: 100 !important;
    isolation: auto !important;
}
.hero__status-inner {
    display: inline-block;
    max-width: 100%;
    padding: 6px 14px;
    background: hsla(52, 29%, 4%, 0.75);
    border: 1px groove hsla(53, 88%, 25%, 0.65);
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5), 0 1px 20px 2px hsla(50, 79%, 4%, 0.7) inset, 0 2px 6px rgba(0, 0, 0, 0.5);
    color: hsl(46deg 40% 72%);
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
    text-shadow: 0 1px 2px #000;
    word-wrap: break-word;
    position: relative;
    z-index: 101 !important;
}
.hero__status-inner::before {
    content: "";
    position: absolute;
    top: 0; left: 8%;
    width: 84%; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(245, 197, 66, 0.35) 50%, transparent 100%);
    pointer-events: none;
}
.hero__status-inner::after {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 8px solid hsla(53, 88%, 25%, 0.55);
    filter: drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.35));
    pointer-events: none;
}
.hero__status-inner > .hero__status-tail {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 7px solid hsla(52, 29%, 4%, 0.55);
    pointer-events: none;
}

.vz-chat,
.vz-chat * { box-sizing: border-box; }

.vz-chat {
    width: 100%;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 175px);
    height: calc(100dvh - 175px);
    min-height: 320px;
}
.vz-box {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #2b2519 0%, #241f14 100%);
    border: 1px solid rgba(196,158,80,0.18);
    border-top-color: rgba(196,158,80,0.32);
    border-radius: 0;
    overflow: hidden;
}
.vz-top {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 14px;
    background: #1e1a11;
    border-bottom: 1px solid rgba(196,158,80,0.15);
}
.vz-top-title { font-size: 14px; font-weight: 600; color: #d6b266; letter-spacing: 0.4px; }
.vz-top-link {
    font-size: 12px;
    color: #c9a55c;
    text-decoration: none;
    padding: 4px 11px;
    border: 1px solid rgba(196,158,80,0.25);
    border-radius: 14px;
    transition: .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.vz-top-link::before { content: "‹"; font-size: 15px; line-height: 1; transition: transform .15s; }
.vz-top-link:hover { color: #fff5dd; background: rgba(196,158,80,0.12); border-color: rgba(196,158,80,0.45); }
.vz-top-link:hover::before { transform: translateX(-2px); }

.vz-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(196,158,80,0.25) transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.vz-scroll::-webkit-scrollbar { width: 8px; }
.vz-scroll::-webkit-scrollbar-track { background: transparent; }
.vz-scroll::-webkit-scrollbar-thumb { background: rgba(196,158,80,0.35); border-radius: 0; }
.vz-scroll::-webkit-scrollbar-thumb:hover { background: rgba(196,158,80,0.6); }

.vz-list { display: flex; flex-direction: column; gap: 0; margin-top: auto; }

.vz-msg {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    max-width: 560px;
    width: fit-content;
    padding: 10px 0;
    border-bottom: 1px solid rgba(70,55,25,0.5);
}
.vz-msg:last-child { border-bottom: 0; }
.vz-other { align-self: flex-start; }
.vz-mine {
    align-self: flex-end;
    margin-left: auto;
    flex-direction: row-reverse;
    justify-content: flex-start;
}
.vz-mine .vz-head { justify-content: flex-end; }
.vz-mine .vz-name { color: #e6c77a; }
.vz-mine .vz-body { text-align: left; max-width: 320px; }
.vz-mine .vz-text { color: #fff5dd; }
.vz-mine .vz-actions { justify-content: flex-end; }

.vz-ava {
    --sz: 32px;
    width: var(--sz);
    height: var(--sz);
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
    position: relative;
    background: #3a3220;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    line-height: 0;
    font-size: 0;
    text-decoration: none;
    vertical-align: middle;
    transition: opacity .15s;
    box-shadow: none;
}
.vz-ava:hover { opacity: .85; }
.vz-ava > img {
    display: block !important;
    width: var(--sz) !important;
    height: var(--sz) !important;
    min-width: var(--sz) !important;
    min-height: var(--sz) !important;
    max-width: var(--sz) !important;
    max-height: var(--sz) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center center !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    background: #3a3220;
    box-shadow: inset 0 0 0 1px rgba(196,158,80,0.35);
}

.vz-body { min-width: 0; max-width: 100%; }

.vz-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 1px;
    font-size: 11px;
}
.vz-name { color: #d6b266; font-weight: 600; font-size: 12px; text-decoration: none; }
.vz-name:hover { text-decoration: underline; }

.vz-text {
    font-size: 14px;
    line-height: 1.35;
    color: #ece3cf;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.vz-quote {
    display: block;
    border-left: 2px solid #c49e50;
    padding: 3px 8px;
    margin: 3px 0 5px;
    background: rgba(196,158,80,0.08);
    font-size: 12px;
    line-height: 1.35;
    max-width: 100%;
    text-align: left;
    cursor: pointer;
}
.vz-quote:hover { background: rgba(196,158,80,0.16); }
.vz-quote-name { color: #d6b266; font-weight: 600; margin-right: 5px; }
.vz-quote-text { color: #a89670; }

.vz-actions { display: flex; gap: 12px; font-size: 11px; margin-top: 4px; }
.vz-actions a { color: #c9a55c; text-decoration: none; cursor: pointer; }
.vz-actions a:hover { text-decoration: underline; }
.vz-actions .del-btn { color: #c47a7a; }

.vz-msg-highlight { background: rgba(255,209,102,0.10); transition: background .3s; }

.vz-reply-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(196,158,80,0.10);
    border-top: 1px solid rgba(196,158,80,0.2);
    border-left: 3px solid #c49e50;
    font-size: 12px;
    flex-shrink: 0;
}
.vz-rb-name { color: #d6b266; font-weight: 600; flex-shrink: 0; }
.vz-rb-text { color: #a89670; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-rb-x { color: #c47a7a; text-decoration: none; font-size: 18px; line-height: 1; padding: 0 4px; cursor: pointer; flex-shrink: 0; }

.vz-form {
    display: flex !important;
    align-items: flex-end !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    background: #1e1a11 !important;
    border: none !important;
    border-top: 1px solid rgba(196,158,80,0.15) !important;
    border-radius: 0 !important;
    flex-shrink: 0;
    position: relative;
}
.vz-form textarea {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    resize: none !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #ece3cf !important;
    font-family: inherit !important;
    font-size: 16px !important;
    line-height: 20px !important;
    padding: 7px 6px !important;
    margin: 0 !important;
    max-height: 80px !important;
    min-height: 20px !important;
    overflow-y: auto !important;
}
.vz-form textarea::placeholder { color: #7a6a48 !important; }

.vz-emoji,
.vz-send {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    cursor: pointer;
    border-radius: 50% !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.vz-emoji { background: transparent !important; color: #c9a55c !important; font-size: 16px !important; }
.vz-emoji:hover { background: rgba(196,158,80,0.12) !important; }
.vz-send { background: #8a6a2a !important; color: #fff5dd !important; font-size: 13px !important; padding-left: 1px !important; }
.vz-send:hover { background: #a37e36 !important; }
.vz-send:disabled { opacity: .5; cursor: default; }

.vz-picker {
    position: absolute;
    bottom: 46px;
    left: 8px;
    width: 288px;
    max-height: 200px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 8px;
    background: #1e1a11;
    border: 1px solid rgba(196,158,80,0.25);
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
    z-index: 30;
    scrollbar-width: thin;
}
.vz-picker button { background: transparent; border: none; cursor: pointer; font-size: 17px; padding: 3px; line-height: 1; }
.vz-picker button:hover { background: rgba(196,158,80,0.15); }

.vz-form-blocked {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 10px !important;
    background: #1e1a11 !important;
    border: none !important;
    border-top: 1px solid rgba(196,158,80,0.15) !important;
    border-radius: 0 !important;
    flex-shrink: 0;
    font-size: 13px;
    color: #c9a55c;
    text-align: center;
    letter-spacing: 0.3px;
}

.vz-black-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    background: #1e1a11;
    border-top: 1px solid rgba(196,158,80,0.15);
    font-size: 12px;
}
.vz-black-bar a {
    color: #c9a55c;
    text-decoration: none;
    padding: 4px 11px;
    border: 1px solid rgba(196,158,80,0.25);
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: .15s;
}
.vz-black-bar a:hover { color: #fff5dd; background: rgba(196,158,80,0.12); border-color: rgba(196,158,80,0.45); }
.vz-black-bar img.icons { width: 14px; height: 14px; display: inline-block; }

.vz-toast {
    position: fixed;
    left: 50%;
    bottom: 210px;
    transform: translate(-50%, 20px);
    padding: 10px 18px;
    background: #1e1a11;
    color: #d6b266;
    border: 1px solid rgba(196,158,80,0.35);
    border-radius: 20px;
    font-size: 13px;
    font-family: inherit;
    box-shadow: 0 6px 22px rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .25s;
    z-index: 9999;
    white-space: nowrap;
}
.vz-toast.vz-toast-show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 600px) {
    .vz-chat { margin: 6px 0 0; height: calc(100vh - 160px); height: calc(100dvh - 160px); }
    .vz-scroll { padding: 10px 10px 4px; }
    .vz-msg { max-width: 90%; }
    .vz-top { padding: 7px 10px; }
    .vz-top-link { padding: 4px 9px; font-size: 11px; }
    .vz-form { padding: 5px 8px !important; }
    .vz-form-blocked { padding: 12px 8px !important; font-size: 12px; }
    .vz-picker { width: 252px; grid-template-columns: repeat(7, 1fr); }
}

@media screen and (max-width: 480px) {
    html, body { overflow-x: clip !important; }
    body { max-width: 100%; }
    .hero { overflow: visible; }
    .hero__bg { width: 100vw; left: 50%; right: auto; transform: translateX(-50%); }
    .hero__grid { padding: 0 -10px; }
    .slots--right { margin-right: 10px !important; }
}

@media (hover: none) {
    .tg-row:hover { filter: none; border-color: #2a2412; }
    .fon-item:hover { transform: none; border-color: #2a2412; }
    .hud-btn:hover { filter: none; }

    .bare-grid a:hover,
    .bare-grid a:active { transform: none !important; }
    .bare-grid a.red-frame:hover img,
    .bare-grid a.red-frame:active img {
        box-shadow: 0 0 20px 0 hsl(0 0% 0%) inset, 0 0 8px rgba(255,80,80,.45) !important;
    }
    .bare-grid a.green-frame:hover img,
    .bare-grid a.green-frame:active img {
        box-shadow: 0 0 20px 0 hsl(0 0% 0%) inset, 0 0 8px rgba(80,255,80,.5) !important;
    }

    .bottom-nav a:hover { color: hsl(53deg 25% 60%) !important; }
    .bottom-nav a:hover img { opacity: .85 !important; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)) !important; }

    .daily-row:hover { background: transparent !important; }
    .daily-row:hover::after { color: hsl(53deg 40% 38%) !important; }

    #dailyModal .dc-cell.now:hover { filter: none; }

    .links a:hover {
        background: linear-gradient(180deg, hsl(0deg 0% 9%) 0%, hsl(0deg 0% 10%) 50%, hsl(0deg 0% 7%) 51%, hsl(0deg 0% 9%) 100%);
    }
    .links a:nth-child(2n):hover {
        background: linear-gradient(180deg, hsl(53deg 43% 8%) 0%, hsl(51deg 56% 8%) 50%, hsl(51deg 52% 6%) 51%, hsl(55deg 29% 8%) 100%);
    }

    .start_game:hover {
        border-color: hsl(108deg 44% 29%);
        box-shadow: 0 0 7px 2px rgb(131 166 24 / 68%) inset, 0 0 13px 4px rgb(72 153 41 / 68%);
    }
    input[type="submit"]:hover {
        background: hsl(40deg 58% 26%);
        color: hsl(40deg 84% 79%);
        box-shadow: 0 1px 10px 0 hsl(50deg 43% 2%) inset;
    }
}