*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}
.pogo-body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#1a1a2e}

.pogo-app{position:fixed;inset:0;overflow:hidden}
.hidden{display:none!important}

/* Loading */
.pogo-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:linear-gradient(180deg,#5bc8f5 0%,#7ed56f 65%,#4a9e3f 100%);color:#fff;font-weight:700;font-size:1.1rem}
.pogo-loading-ball{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0%,#e3350d 45%,#c62828 100%);border:3px solid #222;animation:pogo-bounce 0.8s ease-in-out infinite}
@keyframes pogo-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}

/* Encounter scene */
.pogo-encounter{position:absolute;inset:0}
.pogo-scene{position:absolute;inset:0;z-index:0}
.pogo-sky{position:absolute;inset:0;background:linear-gradient(180deg,#6ecff6 0%,#a8e6ff 45%,#c8f0d8 100%)}
.pogo-horizon{position:absolute;left:0;right:0;top:42%;height:12%;background:linear-gradient(180deg,transparent,#6dba5a)}
.pogo-grass{position:absolute;left:0;right:0;bottom:0;height:48%;background:linear-gradient(180deg,#6dba5a 0%,#4a9e3f 40%,#3d8b34 100%)}
.pogo-grass-detail{position:absolute;left:0;right:0;bottom:0;height:30%;background:repeating-linear-gradient(90deg,transparent,transparent 18px,rgba(0,0,0,.04) 18px,rgba(0,0,0,.04) 20px);opacity:.5}

/* HUD */
.pogo-hud-top{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:flex-start;justify-content:space-between;padding:max(12px,env(safe-area-inset-top)) 16px 0;gap:10px}
.pogo-run-btn{width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:rgba(0,0,0,.35);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(4px);transition:transform .15s}
.pogo-run-btn:active{transform:scale(.92)}
.pogo-mon-info{flex:1;text-align:center;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.pogo-mon-name{display:block;font-size:1.35rem;font-weight:800;letter-spacing:.02em}
.pogo-mon-cp{display:block;font-size:1rem;font-weight:700;opacity:.95;margin-top:2px}
.pogo-balls-count{min-width:48px;text-align:right;color:#fff;font-weight:800;font-size:.9rem;text-shadow:0 2px 4px rgba(0,0,0,.4);padding-top:12px}

/* Wild announcement */
.pogo-announce{position:absolute;top:22%;left:50%;transform:translateX(-50%);z-index:25;background:rgba(0,0,0,.55);color:#fff;padding:12px 24px;border-radius:999px;font-weight:800;font-size:1rem;white-space:nowrap;animation:pogo-fade-in .4s ease}
@keyframes pogo-fade-in{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* Arena */
.pogo-arena{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:10;width:min(280px,72vw);height:min(280px,72vw)}
.pogo-mon-wrap{position:relative;width:100%;height:100%;display:grid;place-items:center}
.pogo-target-base{position:absolute;width:58%;height:58%;border-radius:50%;border:3px solid rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.15);pointer-events:none}
.pogo-target-ring{position:absolute;width:58%;height:58%;border-radius:50%;border:4px solid #22c55e;box-shadow:0 0 12px rgba(34,197,94,.4);pointer-events:none;transform:scale(1);will-change:transform}
.pogo-target-ring.diff-medium{border-color:#eab308;box-shadow:0 0 12px rgba(234,179,8,.4)}
.pogo-target-ring.diff-hard{border-color:#f97316;box-shadow:0 0 12px rgba(249,115,22,.4)}
.pogo-target-ring.diff-extreme{border-color:#ef4444;box-shadow:0 0 12px rgba(239,68,68,.4)}
.pogo-mon-sprite{width:72%;height:72%;object-fit:contain;image-rendering:pixelated;z-index:2;animation:pogo-mon-idle 2s ease-in-out infinite;filter:drop-shadow(0 8px 12px rgba(0,0,0,.25))}
@keyframes pogo-mon-idle{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.02)}}
.pogo-mon-wrap.attacking .pogo-mon-sprite{animation:pogo-mon-attack .5s ease}
@keyframes pogo-mon-attack{0%{transform:translateY(0)}30%{transform:translateY(-30px) scale(1.1)}100%{transform:translateY(0)}}

/* Throw hint */
.pogo-throw-label{position:absolute;bottom:calc(130px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:15;color:rgba(255,255,255,.9);font-size:.85rem;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.5);pointer-events:none}

/* Ball tray */
.pogo-ball-tray{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:30;width:80px;height:80px;display:grid;place-items:center}
.pogo-ball{width:72px;height:72px;cursor:grab;touch-action:none;transition:transform .1s}
.pogo-ball:active{cursor:grabbing}
.pogo-ball.dragging{transition:none}
.pogo-ball-svg{width:100%;height:100%;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}

/* Thrown ball */
.pogo-thrown-ball{position:fixed;width:48px;height:48px;z-index:40;pointer-events:none}
.pogo-thrown-ball .pogo-ball-svg{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}

/* Feedback (Excellent etc.) */
.pogo-feedback{position:absolute;top:30%;left:50%;transform:translateX(-50%);z-index:35;font-size:1.6rem;font-weight:900;color:#fff;text-shadow:0 3px 8px rgba(0,0,0,.6);letter-spacing:.04em;animation:pogo-feedback-pop .6s ease}
.pogo-feedback.excellent{color:#fbbf24}
.pogo-feedback.great{color:#34d399}
.pogo-feedback.nice{color:#60a5fa}
@keyframes pogo-feedback-pop{0%{opacity:0;transform:translateX(-50%) scale(.5)}40%{opacity:1;transform:translateX(-50%) scale(1.15)}100%{opacity:1;transform:translateX(-50%) scale(1)}}

/* Catch flash */
.pogo-catch-flash{position:absolute;inset:0;z-index:45;background:radial-gradient(circle,rgba(255,255,255,.7) 0%,transparent 70%);animation:pogo-flash .5s ease forwards}
@keyframes pogo-flash{from{opacity:1}to{opacity:0}}

/* Shake on ball hit */
.pogo-mon-wrap.shake .pogo-mon-sprite{animation:pogo-shake .4s ease}
@keyframes pogo-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* Result screen */
.pogo-result{position:absolute;inset:0;z-index:50;background:rgba(10,14,30,.75);display:grid;place-items:center;padding:20px;backdrop-filter:blur(6px)}
.pogo-result-card{background:linear-gradient(160deg,#fff 0%,#f0f4ff 100%);border-radius:20px;padding:28px 24px;text-align:center;max-width:340px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.pogo-result-icon{font-size:3rem;margin-bottom:8px}
.pogo-result-card h2{font-size:1.4rem;color:#1e3a5f;margin-bottom:8px}
.pogo-result-card p{color:#64748b;font-size:.95rem;line-height:1.5;margin-bottom:16px}
.pogo-result-sprite{width:140px;height:140px;object-fit:contain;image-rendering:pixelated;margin:0 auto 20px}
.pogo-result-actions{display:flex;flex-direction:column;gap:10px}
.pogo-btn{padding:14px 20px;border-radius:12px;border:none;font-size:1rem;font-weight:800;cursor:pointer;transition:transform .15s,opacity .15s}
.pogo-btn:active{transform:scale(.97)}
.pogo-btn-primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;box-shadow:0 4px 14px rgba(37,99,235,.35)}
.pogo-btn-secondary{background:#e2e8f0;color:#475569}

@media(min-width:600px){
    .pogo-arena{width:320px;height:320px}
    .pogo-mon-name{font-size:1.5rem}
}