/* ═══════════════════════════════════════════════════════════════
   Grüntal Farm – Game & Auth Styles (aus game.php ausgelagert)
   ═══════════════════════════════════════════════════════════════ */

[x-cloak]{display:none!important}
*{box-sizing:border-box}body{font-family:'Nunito',sans-serif}
#game-canvas canvas{image-rendering:pixelated}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:#1a3a0a}::-webkit-scrollbar-thumb{background:#7bc142;border-radius:3px}
.hud{background:rgba(15,35,8,.93);border:1.5px solid rgba(123,193,66,.35);backdrop-filter:blur(6px)}
.tool-btn{transition:all .18s}
.tool-btn.active{background:#7bc142!important;color:#1a3a0a!important;transform:scale(1.08);box-shadow:0 0 12px rgba(123,193,66,.5)}
.tab-btn{transition:all .15s;border-bottom:2px solid transparent}
.tab-btn.active{color:#7bc142;border-color:#7bc142}
.card{background:rgba(255,255,255,.05);border:1px solid rgba(123,193,66,.2);border-radius:12px;transition:border-color .2s}
.card:hover{border-color:rgba(123,193,66,.45)}
.inv-row:hover{background:rgba(123,193,66,.12)}
.shop-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.4)}
.modal-bg{backdrop-filter:blur(8px)}
@keyframes toastIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes toastOut{to{opacity:0;transform:translateY(-12px)}}
.toast-in{animation:toastIn .28s ease}
@keyframes pulseGold{0%,100%{box-shadow:0 0 0 0 rgba(244,194,61,.5)}50%{box-shadow:0 0 0 8px rgba(244,194,61,0)}}
.pulse-gold{animation:pulseGold 2.5s infinite}
@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:spin 1s linear infinite}
.weather-badge{font-size:.75rem;padding:.2rem .7rem;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.15)}
.friendship-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.1)}
.friendship-fill{height:4px;border-radius:2px;background:#f4c23d;transition:width .4s}

/* ══ AUTH – Enterprise Design ═══════════════════════════════ */
.auth-bg{background:
    radial-gradient(ellipse 70% 55% at 20% 0%, rgba(244,194,61,.1) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 85% 90%, rgba(123,193,66,.08) 0%, transparent 55%),
    linear-gradient(160deg,#060f04 0%,#0d1f0a 55%,#132e0f 100%)}
.auth-panel{
    position:relative;overflow:hidden;border-radius:24px;
    background:linear-gradient(155deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
    border:1px solid rgba(123,193,66,.18);
    box-shadow:0 32px 80px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
.auth-panel::before{content:'';position:absolute;inset:0 0 auto 0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(244,194,61,.5),transparent)}
.icon-tile{width:44px;height:44px;border-radius:13px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(145deg,rgba(244,194,61,.14),rgba(123,193,66,.1));
    border:1px solid rgba(244,194,61,.25);color:#f4c23d;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.icon-tile svg{width:1.25rem;height:1.25rem}
.benefit-row{display:flex;gap:1rem;align-items:flex-start}
.benefit-row b{display:block;color:rgba(255,255,255,.9);font-size:.92rem;margin-bottom:.2rem;font-weight:800}
.benefit-row span{color:rgba(255,255,255,.42);font-size:.82rem;line-height:1.65}
.auth-seg{display:flex;background:rgba(0,0,0,.35);border:1px solid rgba(123,193,66,.15);border-radius:14px;padding:4px;gap:4px}
.auth-seg button{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
    padding:.6rem;border-radius:10px;font-weight:800;font-size:.82rem;
    color:rgba(255,255,255,.4);transition:all .2s}
.auth-seg button svg{width:.95rem;height:.95rem}
.auth-seg button.active{background:linear-gradient(135deg,#f4c23d,#e8a820);color:#0d1f0a;
    box-shadow:0 4px 14px rgba(244,194,61,.25)}
.auth-label{display:block;font-size:.66rem;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:rgba(123,193,66,.75);margin-bottom:.4rem}
.auth-field{position:relative}
.auth-field>svg{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);
    width:1rem;height:1rem;color:rgba(123,193,66,.5);pointer-events:none;transition:color .2s}
.auth-field:focus-within>svg{color:#f4c23d}
.auth-input{width:100%;background:rgba(0,0,0,.35);border:1px solid rgba(123,193,66,.22);
    color:#fff;border-radius:12px;padding:.8rem 1rem .8rem 2.7rem;font-size:.88rem;
    transition:border-color .2s,box-shadow .2s}
.auth-input::placeholder{color:rgba(255,255,255,.25)}
.auth-input:focus{outline:none;border-color:rgba(244,194,61,.55);box-shadow:0 0 0 3px rgba(244,194,61,.1)}
.pw-toggle{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);
    padding:.4rem;border-radius:8px;color:rgba(255,255,255,.3);transition:all .2s}
.pw-toggle:hover{color:#f4c23d;background:rgba(244,194,61,.08)}
.pw-toggle svg{width:1rem;height:1rem;display:block}
.pw-check{display:flex;align-items:center;gap:.45rem;font-size:.72rem;color:rgba(255,255,255,.3);transition:color .2s}
.pw-check svg{width:.85rem;height:.85rem}
.pw-check.ok{color:#7bc142}
.auth-submit{width:100%;display:flex;align-items:center;justify-content:center;gap:.6rem;
    background:linear-gradient(135deg,#f4c23d,#e8a820);color:#0d1f0a;
    font-weight:900;font-size:.9rem;padding:.85rem;border-radius:13px;
    transition:all .22s;box-shadow:0 6px 20px rgba(244,194,61,.2)}
.auth-submit svg{width:1rem;height:1rem}
.auth-submit:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}
.auth-submit:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.auth-note{display:flex;gap:.6rem;align-items:flex-start;border-radius:11px;
    padding:.7rem .9rem;font-size:.74rem;line-height:1.6}
.auth-note svg{width:.95rem;height:.95rem;flex-shrink:0;margin-top:.1rem}
.auth-note.err{background:rgba(180,40,40,.15);border:1px solid rgba(240,90,90,.4);color:#f5a3a3}
.auth-note.ok{background:rgba(60,140,50,.15);border:1px solid rgba(123,193,66,.4);color:#a8d97f}
.sec-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:700;
    color:rgba(255,255,255,.35)}
.sec-chip svg{width:.8rem;height:.8rem;color:rgba(123,193,66,.6)}
.brand-stat{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .85rem;
    border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
    font-size:.72rem;font-weight:700;color:rgba(255,255,255,.5)}
.brand-stat svg{width:.85rem;height:.85rem;color:#f4c23d}