:root{--sky:#86d8ff;--ground:#3b7;--text:#1b1b1b;--card:#ffffffcc}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;background:linear-gradient(#bfe7ff,#86d8ff)}
#game{position:fixed;inset:0;background:linear-gradient(#86d8ff,#c2f2ff);overflow:hidden;touch-action:manipulation}
.layer{position:absolute;inset:0;pointer-events:none}
.clouds{z-index:1;opacity:0.98}
.ground{position:absolute;left:0;right:0;bottom:0;height:160px;z-index:6;overflow:hidden}
.ground .seamless{position:absolute;left:0;right:0;bottom:0;height:100%;background:linear-gradient(180deg,var(--ground),#2a5);box-shadow:inset 0 6px 18px rgba(0,0,0,0.06)}
/* player: round face, eyes positioned responsively */
#player{position:absolute; left:84px; bottom:180px; width:92px; height:92px; z-index:20; transform-origin:50% 80%; pointer-events:none; will-change:transform,bottom}
.face{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 30% 20%, #fff 0%, #fff8d8 50%, #fff0c8 100%);box-shadow:0 10px 0 rgba(0,0,0,0.12),inset 0 -8px 14px rgba(0,0,0,0.04);position:relative;overflow:visible}
/* eyes: use percentage positions with min separation; transform centers them so they scale well */
.eye{position:absolute;width:14px;height:14px;background:#111;border-radius:50%;top:34%;transform:translateX(-50%);box-shadow:0 3px 0 rgba(0,0,0,0.05)}
.eye.left{left:36%}
.eye.right{left:64%}
/* When viewport is narrow, force a larger separation to avoid overlap */
@media (max-width:420px){
  .eye.left{left:30%}
  .eye.right{left:70%}
}
/* fallback: ensure minimum pixel gap via an additional transform when really tiny */
@media (max-width:340px){
  .eye{width:12px;height:12px}
  .eye.left{left:28%}
  .eye.right{left:72%}
}
.cheeks{position:absolute;width:18px;height:10px;background:rgba(255,120,80,0.14);border-radius:10px;bottom:34px;left:18px}
.cheeks.right{left:auto;right:18px}

/* obstacles */
.ob{position:absolute; bottom:160px; z-index:18; transition:opacity 160ms, transform 220ms;}
.bldg{height:100%;width:100%;border-radius:6px;box-shadow:0 6px 12px rgba(0,0,0,0.12);position:relative;overflow:hidden}
.windows{position:absolute;left:6px;right:6px;top:10px;display:flex;flex-wrap:wrap;gap:6px}
.win{width:10px;height:12px;background:#ffd;border-radius:2px}

/* UI */
#ui{position:absolute;z-index:30;left:14px;top:12px;color:var(--text);display:flex;gap:12px;align-items:center}
.panel{background:var(--card);padding:8px 12px;border-radius:10px;box-shadow:0 4px 12px rgba(0,0,0,0.06);font-weight:700}
#controls{position:absolute;right:14px;top:12px;z-index:30;display:flex;gap:8px;align-items:center}
button{background:linear-gradient(180deg,#fff,#f0f0f0);border:0;padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:800;box-shadow:0 6px 12px rgba(0,0,0,0.08)}
#overlay{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;pointer-events:none}
#card{pointer-events:auto;background:linear-gradient(180deg,#fff,#fffbec);padding:22px;border-radius:12px;box-shadow:0 18px 40px rgba(10,30,60,0.18);text-align:center;min-width:260px}
#card.hidden{opacity:0;transform:translateY(10px) scale(0.98);pointer-events:none}
.hurt{animation:flash 220ms linear 0s 2}
@keyframes flash{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}
@media (max-width:720px){ #player{left:64px;width:76px;height:76px;bottom:140px} .ground{height:120px} }