/* ══════════════════════════════════════════════
   РЫБАЛКА — fishing v4
   ══════════════════════════════════════════════ */

#fishing-drag-handle { cursor: grab; user-select: none; }

/* ── Баннер «можно рыбачить» на локации (стиль как event-banner) ─── */
.fishing-banner {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(30,100,200,.08) 0%, rgba(0,50,120,.06) 100%);
    border: 1px solid rgba(60,140,230,.22);
    border-radius: var(--radius-sm, 6px);
    font-size: .82em;
    margin: 6px 0 0;
    position: relative;
    overflow: hidden;
    animation: fishing-banner-in .4s ease;
}
.fishing-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(80,160,255,.45), transparent);
}
.fishing-banner.hidden { display: none; }

.fishing-banner-top {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fishing-banner-icon { font-size: 1.3em; flex-shrink: 0; line-height: 1.2; }
.fishing-banner-message {
    flex: 1;
    line-height: 1.45;
    color: var(--color-text, rgba(200,225,255,.9));
    font-weight: 600;
}
.fishing-banner-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.fishing-zone-tag {
    padding: 2px 8px;
    background: rgba(30,100,200,.12);
    border: 1px solid rgba(60,140,230,.28);
    border-radius: 4px;
    font-size: .82em;
    font-weight: 700;
    color: rgba(100,185,255,.95);
    white-space: nowrap;
}
.fishing-zone-action {
    cursor: pointer;
    transition: background .15s;
}
.fishing-zone-action:hover {
    background: rgba(30,100,200,.24);
}
@keyframes fishing-banner-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Сцена (фаза заброса / ожидания) ───── */
.fish-scene {
    position: relative;
    height: 90px;
    border-radius: 8px;
    overflow: hidden;
    background: linear-gradient(180deg, #1b2d3a 0%, #0e1c28 50%, #0a2010 100%);
    border: 1px solid rgba(40,120,180,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.fish-scene::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(20,80,140,.6), rgba(8,40,90,.85));
    border-top: 1px solid rgba(80,150,220,.2);
}

.fish-rod-emoji {
    position: relative;
    font-size: 2rem;
    animation: fishRodIdle 3s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
@keyframes fishRodIdle {
    0%,100% { transform: rotate(-6deg); }
    50%      { transform: rotate(-13deg); }
}
.fish-rod-emoji.casting {
    animation: fishRodCast .4s ease-out forwards;
}
@keyframes fishRodCast {
    0%   { transform: rotate(-6deg); }
    35%  { transform: rotate(22deg); }
    100% { transform: rotate(-10deg); }
}

.fish-float-emoji {
    position: relative;
    font-size: 1.6rem;
    animation: fishBob 1.5s ease-in-out infinite;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.5));
}
@keyframes fishBob {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.fish-float-emoji.biting {
    animation: fishBite .25s ease-in-out 3;
}
@keyframes fishBite {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(9px); }
}

.fish-scene-status {
    position: relative;
    font-size: .8rem;
    color: rgba(160,210,255,.9);
    text-shadow: 0 1px 3px rgba(0,0,0,.7);
}

/* ── Кнопка заброса ─────────────────────── */
.fish-btn {
    width: 100%;
    margin-top: 8px;
    padding: 9px 14px;
    background: linear-gradient(180deg, #4a7c3f, #2a4e22);
    border: 1px solid rgba(90,170,70,.45);
    border-radius: 7px;
    color: rgba(215,255,205,.95);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    box-shadow: 0 3px 8px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.1);
    transition: opacity .15s, transform .1s;
}
.fish-btn:hover  { opacity: .88; }
.fish-btn:active { transform: scale(.97); }
.fish-btn:disabled { opacity: .4; cursor: default; }

/* ── Подсказка ──────────────────────────── */
.fish-hint {
    margin-top: 6px;
    font-size: .75rem;
    color: var(--color-text-muted, #888);
    text-align: center;
}

/* ════════════════════════════════════════════
   МИНИ-ИГРА ЛОВЛИ (Stardew-style)
   ════════════════════════════════════════════ */
.fish-game-area {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    height: 220px;
    padding: 0 20px;
}

/* Основная вертикальная шкала */
.fish-track {
    position: relative;
    width: 56px;
    height: 220px;
    border-radius: 10px;
    background: linear-gradient(180deg, #1a1208, #0f0b04);
    border: 2px solid rgba(160,120,40,.45);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.5),
                0 4px 14px rgba(0,0,0,.5);
    overflow: hidden;
    flex-shrink: 0;
}

/* Внутренняя «вода» */
.fish-track::after {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: 8px;
    background: linear-gradient(180deg, #0c2840, #071520);
    box-shadow: inset 0 0 8px rgba(0,0,0,.6);
    pointer-events: none;
    z-index: 0;
}

/* Зелёная зона игрока */
.fish-zone {
    position: absolute;
    left: 6px; right: 6px;
    height: 50px;
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(120,230,110,.95), rgba(45,165,65,.9));
    border: 1px solid rgba(0,0,0,.2);
    box-shadow: 0 2px 8px rgba(0,0,0,.3),
                0 0 14px rgba(70,200,70,.35),
                inset 0 1px 0 rgba(255,255,255,.2);
    z-index: 1;
}

/* Рыба */
.fish-target {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    z-index: 2;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.65));
}

/* Шкала прогресса (правее) */
.fish-progress-bar {
    position: relative;
    width: 20px;
    height: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.fish-progress-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    bottom: 20px;
    border-radius: 8px;
    background: linear-gradient(180deg, #1a1208, #0f0b04);
    border: 2px solid rgba(160,120,40,.35);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
}
.fish-progress-fill {
    position: absolute;
    left: 2px; right: 2px; bottom: 22px;
    background: linear-gradient(to top, #2ecc71, #a8f07f);
    box-shadow: 0 -2px 8px rgba(46,204,113,.6);
    border-radius: 0 0 6px 6px;
    transition: height .05s linear;
}
.fish-progress-label {
    position: absolute;
    bottom: 2px;
    font-size: .62rem;
    color: var(--color-text-muted, #888);
    white-space: nowrap;
    transform: rotate(-90deg);
    transform-origin: center center;
    letter-spacing: .04em;
}

/* ── Шкала натяжения лески ──────────────── */
.fish-tension-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    padding: 0 2px;
}
.fish-tension-label {
    font-size: .72rem;
    color: rgba(190,160,90,.85);
    white-space: nowrap;
    flex-shrink: 0;
}
.fish-tension-track {
    flex: 1;
    height: 7px;
    border-radius: 4px;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(160,110,30,.3);
    overflow: hidden;
}
.fish-tension-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #c8960a, #e04010);
    transition: width .08s linear, background .3s;
}
.fish-tension-fill.critical {
    background: linear-gradient(90deg, #e04010, #c00020);
    animation: tensionPulse .35s ease-in-out infinite;
}
@keyframes tensionPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .55; }
}