*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    --bg:#1a1a2e;
    --surface:#16213e;
    --primary:#0f3460;
    --accent:#e94560;
    --text:#eee;
    --text-muted:#999;
    --radius:8px;
}

body{
    font-family:'Segoe UI','Hiragino Sans',sans-serif;
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

#app{position:relative;width:100%;max-width:420px;min-height:100vh}

/* ── Screens ── */
.screen{display:none;padding:24px 16px}
.screen.active{display:block}

.container{
    background:var(--surface);
    border-radius:var(--radius);
    padding:32px 24px;
    box-shadow:0 4px 24px rgba(0,0,0,.4);
}

h1{text-align:center;margin-bottom:8px;font-size:1.8rem}
.subtitle{text-align:center;color:var(--text-muted);margin-bottom:24px}

/* ── Form ── */
.field{margin-bottom:16px}
.field label{display:block;margin-bottom:4px;font-size:.85rem;color:var(--text-muted)}
.field input{
    width:100%;padding:10px 12px;
    border:1px solid #333;border-radius:var(--radius);
    background:#111;color:var(--text);font-size:1rem;
}
.field input:focus{outline:none;border-color:var(--accent)}

/* ── Buttons ── */
.btn{
    display:inline-block;width:100%;padding:12px;
    border:none;border-radius:var(--radius);
    font-size:1rem;cursor:pointer;
    background:var(--primary);color:var(--text);
    transition:background .2s;
}
.btn:hover{background:#1a4a7a}
.btn.primary{background:var(--accent)}
.btn.primary:hover{background:#c33a50}
.btn.danger{background:#6e1020;margin-top:8px}
.btn.danger:hover{background:#8a1428}

.actions{margin-top:24px}
.actions .btn+.btn{margin-top:8px}

/* ── Misc ── */
.error{background:#6e1020;padding:10px 12px;border-radius:var(--radius);margin-bottom:16px;font-size:.9rem}
.hidden{display:none}

.link-text{text-align:center;margin-top:16px;font-size:.85rem;color:var(--text-muted)}
.link-text a{color:var(--accent);text-decoration:none}
.link-text a:hover{text-decoration:underline}

#user-info{margin-bottom:20px}
#user-info p{margin-bottom:4px}
.meta{font-size:.82rem;color:var(--text-muted)}

#game-data-section h2{font-size:1rem;margin-bottom:8px;color:var(--text-muted)}
#game-data-view{
    background:#111;padding:12px;border-radius:var(--radius);
    font-size:.82rem;overflow-x:auto;max-height:200px;white-space:pre-wrap;
}

/* ── Spinner ── */
.spinner{
    width:36px;height:36px;margin:20px auto;
    border:4px solid #333;border-top-color:var(--accent);
    border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════
   Farm Game
   ══════════════════════════════════════ */

.farm-container{
    padding:8px 4px;
    max-width:420px;
    margin:0 auto;
}

/* ── HUD ── */
#farm-hud{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:8px 12px;
    background:var(--surface);
    border-radius:var(--radius);
    margin-bottom:8px;
    font-size:.85rem;
}
#farm-user{color:var(--text)}
#farm-gold-wrap{color:#ffd700;font-weight:bold}
#farm-harvest-wrap{color:#8bc34a}

/* ── Grid ── */
#farm-grid{
    display:grid;
    grid-template-columns:repeat(11, 1fr);
    gap:2px;
    margin:0 auto 8px;
    max-width:400px;
    aspect-ratio:1;
}

.farm-cell{
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:min(3.2vw, 18px);
    border-radius:3px;
    cursor:default;
    user-select:none;
    transition:transform .1s, background .2s;
    line-height:1;
}

.farm-cell.empty{
    background:transparent;
}

.farm-cell.soil{
    background:#3e2723;
    cursor:pointer;
    border:1px solid #5d4037;
}
.farm-cell.soil:hover{
    background:#4e342e;
    transform:scale(1.08);
}

.farm-cell.growing{
    animation:sway 2s ease-in-out infinite;
}
.farm-cell.harvestable{
    animation:bounce .6s ease-in-out infinite alternate;
    filter:drop-shadow(0 0 4px #ffd700);
}

@keyframes sway{
    0%,100%{transform:rotate(0deg)}
    25%{transform:rotate(3deg)}
    75%{transform:rotate(-3deg)}
}
@keyframes bounce{
    from{transform:scale(1)}
    to{transform:scale(1.15)}
}

/* ── Seed bar ── */
#seed-bar{
    display:flex;
    justify-content:center;
    gap:6px;
    margin-bottom:8px;
    flex-wrap:wrap;
}
.seed-btn{
    width:48px;height:48px;
    border:2px solid #555;
    border-radius:var(--radius);
    background:var(--surface);
    font-size:1.3rem;
    cursor:pointer;
    position:relative;
    transition:border-color .2s, background .2s;
}
.seed-btn:hover:not(:disabled){border-color:var(--accent)}
.seed-btn.selected{
    border-color:#ffd700;
    background:#2e2200;
    box-shadow:0 0 8px rgba(255,215,0,.4);
}
.seed-btn:disabled{opacity:.35;cursor:not-allowed}
.seed-count{
    position:absolute;
    bottom:1px;right:3px;
    font-size:.6rem;
    color:var(--text-muted);
    font-weight:bold;
}

/* ── Farm action buttons ── */
.farm-actions{
    display:flex;
    gap:6px;
    justify-content:center;
}
.btn-farm{
    padding:8px 16px;
    border:none;
    border-radius:var(--radius);
    background:var(--primary);
    color:var(--text);
    font-size:.85rem;
    cursor:pointer;
    transition:background .2s;
}
.btn-farm:hover{background:#1a4a7a}
.btn-farm-danger{background:#6e1020}
.btn-farm-danger:hover{background:#8a1428}

/* ── Toast ── */
#farm-toast{
    position:fixed;
    top:20px;left:50%;
    transform:translateX(-50%);
    background:#333;
    color:#ffd700;
    padding:8px 20px;
    border-radius:20px;
    font-size:.9rem;
    font-weight:bold;
    z-index:1000;
    opacity:0;
    transition:opacity .3s;
    pointer-events:none;
}
#farm-toast.show{opacity:1}

/* ── Shop modal ── */
.shop-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    z-index:900;
}
.shop-content{
    position:fixed;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    background:var(--surface);
    border-radius:var(--radius);
    padding:24px;
    z-index:901;
    min-width:280px;
    max-width:360px;
    box-shadow:0 8px 32px rgba(0,0,0,.6);
}
.shop-content h2{
    text-align:center;
    margin-bottom:16px;
    font-size:1.2rem;
}
.shop-item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 0;
    border-bottom:1px solid #333;
}
.shop-icon{font-size:1.4rem}
.shop-name{flex:1;font-size:.9rem}
.shop-price{color:#ffd700;font-weight:bold;font-size:.85rem;min-width:40px;text-align:right}
.btn-shop-buy{
    padding:4px 12px;
    border:none;
    border-radius:var(--radius);
    background:var(--accent);
    color:#fff;
    font-size:.8rem;
    cursor:pointer;
    transition:background .2s;
}
.btn-shop-buy:hover:not(:disabled){background:#c33a50}
.btn-shop-buy:disabled{opacity:.4;cursor:not-allowed}