/* GeoGames — Rota Kur (oyuna özel stiller; ortak parçalar /shared/gs-game.css) */

:root { --gs-a: #059669; --gs-b: #0284c7; }

#login-screen.gg-intro .rk-diff-note {
    margin: 0 !important;
    font: 700 12px/1.3 var(--ui) !important;
    color: var(--gg-muted) !important;
}

.rk-stage {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr minmax(290px, 32%);
    gap: 14px;
    padding: 14px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* ---------- Harita ---------- */
.rk-map-panel {
    position: relative;
    min-height: 0;
    border-radius: 26px;
    overflow: hidden;
    background: linear-gradient(180deg, #bae6fd 0%, #7dd3fc 100%);
    border: 4px solid rgba(255, 255, 255, .85);
    box-shadow: 0 16px 36px -14px rgba(2, 20, 60, .6);
}
.rk-map { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; }

.rk-prov {
    fill: #fefce8;
    stroke: #64748b;
    stroke-width: 1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    cursor: pointer;
    transition: fill .25s;
}
.rk-prov:hover { fill: #fde68a; }
.rk-prov.is-avoid { fill: #e2e8f0; stroke: #94a3b8; }
.rk-prov.is-next { fill: #bbf7d0; stroke: #15803d; stroke-width: 1.6; }
.rk-prov.is-next:hover { fill: #86efac; }
.rk-prov.on-path { fill: #a78bfa; stroke: #4c1d95; stroke-width: 1.8; }
.rk-prov.is-via { fill: #fcd34d; stroke: #b45309; stroke-width: 2; }
.rk-prov.is-start { fill: #34d399; stroke: #065f46; stroke-width: 2; }
.rk-prov.is-target { fill: #f87171; stroke: #7f1d1d; stroke-width: 2; }
.rk-prov.is-hint { fill: #fde047; stroke: #a16207; stroke-width: 2.2; animation: hintPulse 1s ease-in-out infinite; }
@keyframes hintPulse { 50% { fill: #facc15; } }
.rk-prov.shake { fill: #fca5a5; animation: provShake .4s; }
@keyframes provShake {
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

.rk-route-line, .rk-best {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}
.rk-route-line { stroke: #4c1d95; stroke-width: 4; }
.rk-best { stroke: #16a34a; stroke-width: 3; stroke-dasharray: 8 6; }

.rk-label {
    font: 800 13px var(--ui);
    fill: var(--navy);
    text-anchor: middle;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 4px;
    stroke-linejoin: round;
    pointer-events: none;
}
.rk-label.start { fill: #065f46; }
.rk-label.target { fill: #991b1b; }
.rk-label.next { fill: #15803d; font-weight: 700; font-size: 11.5px; }
.rk-label.via { fill: #b45309; }
.rk-label.best { fill: #15803d; font-size: 11.5px; }

#walker { pointer-events: none; transition: x .35s, y .35s; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }

.rk-zoom { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.rk-zoom-btn {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, .92);
    font-size: 18px;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}

/* ---------- Yan panel ---------- */
.rk-side {
    position: relative;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding: 2px 2px 4px;
}

.rk-task, .rk-now {
    padding: 12px 14px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 5px 0 rgba(11, 42, 91, .22);
}
.rk-route { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rk-pin {
    padding: 5px 12px;
    border-radius: 12px;
    font: 700 17px/1.15 var(--display);
    color: #fff;
}
.rk-start { background: #059669; }
.rk-target { background: #dc2626; }
.rk-arrow { font-size: 20px; color: var(--muted); }
.rk-rule {
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 12px;
    background: #fef3c7;
    color: #92400e;
    font-weight: 800;
    font-size: 13.5px;
}
.rk-rule[hidden] { display: none; }
.rk-steps { display: flex; justify-content: space-between; margin-top: 8px; font-weight: 800; color: var(--navy); font-size: 14px; }
.rk-optimal { color: var(--muted); }

.rk-now-label { font-weight: 800; color: var(--muted); font-size: 13.5px; margin-bottom: 8px; }
.rk-now-label b { color: var(--navy); font-size: 15px; }
.rk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rk-chips[hidden] { display: none; }
.rk-chip {
    padding: 8px 12px;
    border: 2px solid #bbf7d0;
    border-radius: 12px;
    background: #f0fdf4;
    color: #14532d;
    font-weight: 900;
    font-size: 14px;
    touch-action: manipulation;
    transition: transform .12s, background .12s;
}
.rk-chip:hover { background: #dcfce7; transform: translateY(-1px); }
.rk-chip.visited { opacity: .45; }
.rk-chip.target { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }
.rk-chip.hint { border-color: #facc15; background: #fef9c3; }
.rk-chip.blocked { border-color: #e2e8f0; background: #f1f5f9; color: #94a3b8; text-decoration: line-through; }
.rk-chip-note { font-size: 13px; font-weight: 700; color: var(--muted); }
.rk-chip-note[hidden] { display: none; }

.rk-path { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 2px; }
.rk-step {
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
}
.rk-step + .rk-step::before { content: '› '; opacity: .7; }
.rk-step.first { background: #059669; }
.rk-step.last { background: #dc2626; }

.rk-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: auto; }
.rk-btn {
    height: 46px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: var(--navy);
    font-weight: 900;
    font-size: 13.5px;
    box-shadow: 0 4px 0 rgba(11, 42, 91, .25);
}
.rk-btn small { color: #b91c1c; font-size: 11px; }
.rk-btn:disabled { opacity: .5; }
.rk-btn-ghost { background: rgba(255, 255, 255, .75); }

.rk-side .gs-round-end { position: sticky; bottom: 0; }

/* ---------- Duyarlı düzen ---------- */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
    .rk-stage {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(210px, 46dvh) 1fr;
        gap: 10px;
        padding: 10px;
    }
    .rk-map-panel { border-radius: 22px; }
}

@media (max-width: 560px) {
    .rk-pin { font-size: 15px; padding: 4px 10px; }
    .rk-chip { padding: 7px 10px; font-size: 13px; }
    .rk-btn { height: 42px; font-size: 12.5px; }
    .rk-task, .rk-now { padding: 10px 12px; }
}

@media (max-height: 520px) and (orientation: landscape) {
    .rk-stage { grid-template-columns: 1fr 40%; grid-template-rows: none; gap: 8px; padding: 8px; }
    .rk-task, .rk-now { padding: 8px 10px; }
    .rk-btn { height: 38px; }
}