/* GeoGames — Episantr Avcısı (oyuna özel stiller; ortak parçalar /shared/gs-game.css) */

:root {
    --gs-a: #b91c1c;
    --gs-b: #f59e0b;
    --st0: #7c3aed;
    --st1: #0891b2;
    --st2: #16a34a;
}

.ea-game {
    background:
        radial-gradient(circle at 90% 0%, rgba(251, 191, 36, .2), transparent 40%),
        linear-gradient(160deg, #1c1917 0%, #44403c 55%, #7f1d1d 100%);
}

.ea-main {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    align-content: start;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 12px;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
}
@media (max-width: 900px) {
    .ea-main { grid-template-columns: 1fr; padding: 8px; gap: 8px; }
}

.ea-map-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}
@media (min-width: 901px) {
    .ea-map-card { position: sticky; top: 0; }
}

.ea-step {
    padding: 10px 12px;
    border-radius: 14px;
    background: #fef3c7;
    color: #78350f;
    font-weight: 800;
    font-size: 14.5px;
    line-height: 1.35;
}
.ea-step.shake { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.ea-count { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 999px; background: #fff; font-size: 12px; }

.ea-map-wrap { position: relative; border-radius: 16px; overflow: hidden; background: #e0f2fe; }
.ea-map { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: manipulation; }
.ea-prov { fill: #fafaf9; stroke: #cbd5e1; stroke-width: .8; }
.ea-fault { fill: none; stroke: #dc2626; stroke-width: 1.3; stroke-opacity: .55; stroke-linecap: round; }
.ea-st { stroke: #fff; stroke-width: 1.5; }
.ea-st.st0, .ea-circle.st0 { fill: var(--st0); stroke: var(--st0); }
.ea-st.st1, .ea-circle.st1 { fill: var(--st1); stroke: var(--st1); }
.ea-st.st2, .ea-circle.st2 { fill: var(--st2); stroke: var(--st2); }
.ea-st { stroke: #fff !important; }
.ea-st-label { font: 900 12px var(--ui); fill: #0f172a; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.ea-circle { fill-opacity: .07 !important; stroke-width: 2.4; stroke-dasharray: 7 4; }
.ea-guess { fill: #f97316; stroke: #fff; stroke-width: 3; }
.ea-err { stroke: #0f172a; stroke-width: 2; stroke-dasharray: 4 3; }
.ea-epi { fill: #dc2626; stroke: #fff; stroke-width: 2; animation: popIn .5s cubic-bezier(.2, 1.4, .5, 1); transform-box: fill-box; transform-origin: center; }

.ea-legend {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .88);
    font-size: 11px;
    font-weight: 800;
    color: #475569;
}
.ea-legend span { display: inline-flex; align-items: center; gap: 4px; }
.ea-legend span::before { content: ''; display: inline-block; }
.ea-lg-fault::before { width: 14px; height: 2px; background: #dc2626; }
.ea-lg-st::before { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--st0); }
.ea-lg-guess::before { width: 9px; height: 9px; border-radius: 50%; background: #f97316; }
.ea-lg-epi::before { content: '★' !important; color: #dc2626; font-size: 13px; line-height: 1; }

.ea-actions { display: flex; }
.ea-confirm {
    flex: 1;
    height: 50px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #dc2626, #f97316);
    color: #fff;
    font-weight: 900;
    font-size: 17px;
    box-shadow: 0 4px 0 #991b1b;
}
.ea-confirm:disabled { opacity: .45; box-shadow: none; }
.ea-confirm[hidden] { display: none; }
.ea-confirm:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #991b1b; }

.ea-reveal { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: #fff7ed; border: 2px solid #fed7aa; animation: popIn .4s ease; }
.ea-reveal[hidden] { display: none; }
.ea-reveal-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.ea-mag { padding: 8px 10px; border-radius: 12px; background: #dc2626; color: #fff; font: 700 18px var(--display); white-space: nowrap; }
.ea-reveal-eyebrow { font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--orange); }
.ea-reveal h3 { font: 700 18px/1.2 var(--display); color: var(--navy); }
.ea-points { font: 700 24px var(--display); color: #16a34a; }
.ea-points.zero { color: #94a3b8; }
.ea-reveal-text { font-size: 14px; font-weight: 700; color: #334155; line-height: 1.5; }

/* ---------- Sismogramlar ---------- */
.ea-seismos { display: grid; gap: 10px; }
.ea-card {
    padding: 10px 12px;
    border-radius: 18px;
    background: #fff;
    border-left: 6px solid var(--c);
    box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}
.ea-card.st0 { --c: var(--st0); }
.ea-card.st1 { --c: var(--st1); }
.ea-card.st2 { --c: var(--st2); }
.ea-card.ready { box-shadow: 0 0 0 3px #86efac, 0 10px 26px rgba(0, 0, 0, .3); }
.ea-card header { display: flex; align-items: center; gap: 8px; }
.ea-code { padding: 2px 8px; border-radius: 8px; background: var(--c); color: #fff; font-weight: 900; font-size: 13px; }
.ea-st-name { flex: 1; min-width: 0; font-weight: 900; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ea-chips { display: flex; gap: 6px; }
.ea-chip {
    padding: 4px 10px;
    border-radius: 999px;
    border: 2px solid #e2e8f0;
    background: #f8fafc;
    font-weight: 900;
    font-size: 13px;
}
.ea-chip i { font-style: normal; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.ea-chip.p.active { border-color: #2563eb; background: #dbeafe; color: #1d4ed8; }
.ea-chip.s.active { border-color: #dc2626; background: #fee2e2; color: #b91c1c; }
.ea-chip.locked { cursor: default; opacity: .8; }
.ea-canvas {
    display: block;
    width: 100%;
    height: 118px;
    margin: 8px 0 4px;
    border-radius: 10px;
    background: #fffdf7;
    cursor: col-resize;
    touch-action: manipulation;
}
.ea-read { font-size: 13.5px; font-weight: 700; color: #475569; }
.ea-read b { color: var(--navy); }