/* css/style.css - Jump Typing Game styles */

.jtg-wrapper {
    max-width: 900px;
    margin: 18px auto;
    background: linear-gradient(180deg,#ffffff,#f6f8fb);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(20,30,60,0.08);
    padding: 14px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color: #1e293b;
}

.jtg-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 12px;
}
.jtg-title {
    font-size:18px;
    margin:0;
    display:flex;
    align-items:center;
    gap:8px;
}
.jtg-info {
    display:flex;
    gap:12px;
    align-items:center;
}
.jtg-score, .jtg-lives { font-weight:600; background:#fff; padding:6px 10px; border-radius:8px; box-shadow:inset 0 -1px 0 rgba(0,0,0,0.03); }

.jtg-btn { background:#111827; color:#fff; border:none; padding:6px 10px; border-radius:8px; cursor:pointer; display:inline-flex; gap:8px; align-items:center; }
.jtg-btn:hover { opacity:0.95; }

.jtg-game-area { display:flex; gap:16px; padding:12px; align-items:flex-start; flex-wrap:wrap; }
.jtg-playfield {
    position:relative;
    flex:1 1 560px;
    height:260px;
    background:linear-gradient(180deg,#e6f0ff,#ffffff);
    border-radius:10px;
    overflow:hidden;
    border:1px solid rgba(20,30,60,0.04);
}

/* Ground line */
.jtg-playfield::after {
    content: "";
    position:absolute;
    left:0; right:0; bottom:60px;
    height:6px;
    background:linear-gradient(90deg,#dfeeff,#c6ddff);
    box-shadow:0 6px 12px rgba(10,30,60,0.04) inset;
}

/* Characters */
.jtg-character {
    position:absolute;
    bottom:64px;
    width:96px;
    height:100px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    transition: transform 0.18s ease;
    will-change: transform;
    transform-origin: center bottom;
}
.jtg-char-left { left:70px; }
.jtg-char-right { left:180px; }

/* Jump animation */
.jtg-character.jumping {
    animation: jtg-jump 640ms ease;
}
@keyframes jtg-jump {
    0% { transform: translateY(0); }
    25% { transform: translateY(-110px); }
    60% { transform: translateY(-60px); }
    100% { transform: translateY(0); }
}

/* Hit flash */
.jtg-character.jtg-hit { animation: jtg-hit 380ms ease; }
@keyframes jtg-hit {
    0% { filter: saturate(1); transform: translateY(0); }
    50% { filter: saturate(0.2) hue-rotate(-20deg); transform: translateY(0); }
    100% { filter: none; transform: translateY(0); }
}

/* Obstacles */
.jtg-obstacle {
    position:absolute;
    bottom:66px;
    right:-60px;
    width:36px;
    height:36px;
    border-radius:6px;
    background: linear-gradient(180deg,#2c3e50,#1f2a38);
    box-shadow: 0 6px 12px rgba(10,20,40,0.18);
}

/* Controls */
.jtg-controls {
    width:320px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.jtg-word-box { background:#fff; padding:12px; border-radius:10px; box-shadow:0 4px 10px rgba(10,20,40,0.04); }
.jtg-label { display:block; font-size:13px; margin-bottom:8px; color:#334155; }
.jtg-current-word { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; font-size:20px; padding:6px 8px; border-radius:6px; background:#f8fafc; border:1px solid #eef2ff; min-height:42px; display:flex; align-items:center; gap:8px; }
.jtg-input { margin-top:8px; width:100%; padding:10px 12px; border-radius:8px; border:1px solid #e6eef8; font-size:16px; box-sizing:border-box; }
.jtg-input:focus { outline:none; box-shadow:0 6px 18px rgba(66,153,225,0.12); }

/* typed highlight */
.jtg-typed { color:#0f172a; font-weight:700; }

/* wrong input feedback */
.jtg-input-wrong { animation: jtg-shake 220ms ease; border-color:#fca5a5; }
@keyframes jtg-shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    50% { transform: translateX(6px); }
    75% { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}

/* footer */
.jtg-footer { padding:8px 12px; color:#64748b; font-size:12px; text-align:center; }

/* responsive */
@media (max-width:880px) {
    .jtg-controls { width:100%; order:2; }
    .jtg-playfield { flex-basis:100%; order:1; height:220px; }
    .jtg-char-left { left:36px; }
    .jtg-char-right { left:140px; }
}