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

:root { --gs-a: #0891b2; --gs-b: #e11d48; --hand: 'Caveat', 'Segoe Print', cursive; }

.gs-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.gn-stage {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
    gap: 16px;
    padding: 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    overflow-y: auto;
}

/* ---------- Kartpostal ---------- */
.gn-postcard {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 190px;
    gap: 18px;
    align-self: start;
    padding: 22px 22px 26px;
    border-radius: 10px;
    background:
        repeating-linear-gradient(0deg, transparent 0 33px, rgba(8, 145, 178, .12) 33px 34px),
        linear-gradient(135deg, #fffdf5 0%, #fef3c7 100%);
    box-shadow: 0 2px 0 #e7d9b5, 0 22px 44px -18px rgba(2, 20, 60, .7);
    transform: rotate(-.6deg);
}
.gn-postcard::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 3px dashed rgba(225, 29, 72, .35);
    border-radius: 6px;
    pointer-events: none;
}
.gn-postcard.arrive { animation: arrive .55s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes arrive { from { transform: translateY(-40px) rotate(-6deg); opacity: 0; } to { transform: rotate(-.6deg); opacity: 1; } }

.gn-postcard-left { position: relative; min-width: 0; border-right: 2px solid rgba(8, 145, 178, .25); padding-right: 16px; }
.gn-greeting, .gn-sign { font: 700 24px/1.2 var(--hand); color: #0e7490; }
.gn-sign { margin-top: 10px; text-align: right; }
.gn-clues { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.gn-clues li {
    font: 700 21px/1.3 var(--hand);
    color: #1e293b;
}
.gn-clues li::marker { font-family: var(--display); font-size: 15px; color: #e11d48; }
.gn-clues li.new { animation: write .6s ease-out; }
@keyframes write { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }

.gn-postcard-right { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.gn-stamp {
    display: grid;
    place-items: center;
    width: 132px;
    height: 100px;
    padding: 8px;
    background: #fff;
    border: 3px dashed #fda4af;
    border-radius: 4px;
    box-shadow: 0 0 0 4px #fff, 0 3px 10px 4px rgba(0, 0, 0, .15);
    transform: rotate(3deg);
}
.gn-stamp img { width: 100%; height: 100%; object-fit: contain; animation: popIn .4s ease-out; }
.gn-stamp img[hidden] { display: none; }
.gn-stamp-q { font: 700 52px/1 var(--display); color: #e11d48; }
.gn-stamp-q[hidden] { display: none; }
.gn-postmark {
    align-self: flex-start;
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    margin-top: -40px;
    border: 3px double rgba(8, 145, 178, .55);
    border-radius: 50%;
    font: 900 12px/1.2 var(--ui);
    letter-spacing: .12em;
    text-align: center;
    color: rgba(8, 145, 178, .7);
    transform: rotate(-14deg);
}
.gn-address { display: grid; gap: 2px; width: 100%; margin-top: auto; font: 700 20px/1.2 var(--hand); color: #334155; }
.gn-address span:first-child { font-size: 16px; color: var(--muted); }
.gn-address b { border-bottom: 2px solid #cbd5e1; font-weight: 700; }
.gn-address span:last-child { border-bottom: 2px solid #cbd5e1; }

.gn-mascot {
    position: absolute;
    left: -34px;
    bottom: -40px;
    width: 104px;
    height: auto;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .3));
    animation: sway 3.6s ease-in-out infinite;
    pointer-events: none;
}

/* ---------- Tahmin paneli ---------- */
.gn-panel { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.gn-meter {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .95);
    color: var(--navy);
    font-weight: 800;
    font-size: 14px;
}
.gn-meter b { font-family: var(--display); font-size: 17px; color: #be123c; }
.gn-guess { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.gn-guess input {
    min-width: 0;
    height: 52px;
    padding: 0 16px;
    border: 3px solid #a5f3fc;
    border-radius: 16px;
    background: #fff;
    font: 800 17px var(--ui);
    color: var(--navy);
}
.gn-guess input:focus { outline: none; border-color: #0891b2; }
.gn-guess input.shake { animation: inputShake .35s; border-color: #fb7185; }
@keyframes inputShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.gn-go {
    height: 52px;
    padding: 0 18px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--gs-a), var(--gs-b));
    color: #fff;
    font: 700 17px var(--display);
    box-shadow: 0 4px 0 #881337;
}
.gn-go:active { transform: translateY(3px); box-shadow: 0 1px 0 #881337; }
.gn-msg { min-height: 0; color: #fecdd3; font-weight: 800; font-size: 13.5px; }
.gn-msg:empty { display: none; }
.gn-wrong { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.gn-wrong:empty { display: none; }
.gn-chip { padding: 5px 10px; border-radius: 999px; background: #ffe4e6; color: #9f1239; font-weight: 800; font-size: 13px; animation: popIn .3s ease-out; }
.gn-more {
    align-self: flex-start;
    padding: 9px 14px;
    border: 2px dashed rgba(255, 255, 255, .6);
    border-radius: 14px;
    background: transparent;
    color: #fff;
    font-weight: 900;
    font-size: 14px;
}
.gn-more:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.gn-more:disabled { opacity: .4; }
.gn-panel .gs-round-end { position: relative; margin-top: 4px; }

/* ---------- Duyarlı düzen ---------- */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) {
    .gn-stage { grid-template-columns: 1fr; padding: 12px; gap: 12px; }
    .gn-mascot { left: auto; right: -8px; bottom: -34px; width: 84px; }
}

@media (max-width: 560px) {
    .gn-postcard { grid-template-columns: 1fr; padding: 16px 16px 22px; gap: 10px; }
    .gn-postcard-left { border-right: 0; padding-right: 0; order: 2; }
    .gn-postcard-right { flex-direction: row; align-items: center; justify-content: space-between; order: 1; }
    .gn-postmark { display: none; }
    .gn-address { width: auto; font-size: 17px; }
    .gn-stamp { width: 110px; height: 82px; }
    .gn-greeting, .gn-sign { font-size: 21px; }
    .gn-clues li { font-size: 19px; }
    .gn-meter { font-size: 13px; }
    .gn-go { padding: 0 14px; font-size: 15px; }
}