/* Digger Dig v2 (Kit). Fixed 1600x900 stage scaled as one unit; game.js positions
   the patches and the digger in stage pixels. Controls live outside the stage. */
:root { --navy:#1f4f8f; --sun:#ffd23f; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; touch-action:none; overscroll-behavior:none; position:fixed; inset:0; }
body { font-family:"Comic Sans MS","Segoe Print","Chalkboard SE",sans-serif; background:#e8c37b; }

.frame { position:fixed; inset:0; }
.stage { touch-action:none; position:absolute; left:50%; top:50%; width:1600px; height:900px; transform-origin:center; user-select:none; overflow:hidden; }

/* --- the beach --- */
.sky { position:absolute; inset:0 0 66%; background:linear-gradient(#8ecdf6,#d9f0ff); }
.sun { position:absolute; right:120px; top:50px; width:110px; height:110px; border-radius:50%; background:#ffe36c; box-shadow:0 0 0 20px rgba(255,237,139,.28); }
.cloud { position:absolute; height:46px; width:150px; border-radius:999px; background:#fff; opacity:.9; }
.cloud.c1 { left:220px; top:70px; } .cloud.c2 { left:700px; top:130px; width:110px; }
.sea { position:absolute; left:0; right:0; top:34%; height:9%; background:linear-gradient(#57b7e8,#3f9ed2); }
.sea::after { content:""; position:absolute; left:0; right:0; top:-12px; height:14px; background:radial-gradient(circle at 10px 14px, #fff 5px, transparent 6px) 0 0/60px 14px repeat-x; opacity:.7; }
.sand { position:absolute; left:0; right:0; top:43%; bottom:0; background:linear-gradient(#f6dfa0,#e9c87a 70%,#dfba69); }
#bucket { left:1430px; top:360px; width:150px; }

/* --- patches, holes, finds --- */
#patches { position:absolute; inset:0; }
.patch { position:absolute; width:270px; height:140px; }
.hole { position:absolute; left:50%; bottom:8px; width:190px; height:58px; margin-left:-95px; border-radius:50%;
        background:radial-gradient(ellipse at center, #7a5a33 0 55%, #a07a45 75%, transparent 76%);
        opacity:0; transform:scale(.4); transition:opacity .18s, transform .25s; }
.patch.dug .hole { opacity:1; transform:scale(1); }
.find { position:absolute; left:50%; bottom:26px; width:150px; margin-left:-75px; opacity:0; transform:translateY(50px) scale(.5); cursor:pointer;
        filter:drop-shadow(0 4px 3px rgba(90,55,20,.25)); }
.patch.dug .find { animation:rise .5s cubic-bezier(.2,1.4,.5,1) forwards; }
.find.jiggle { animation:jiggle .45s ease !important; opacity:1; transform:none; }
.spray { position:absolute; left:50%; bottom:30px; width:8px; height:8px; margin-left:-4px; pointer-events:none; }
.spray i { position:absolute; width:12px; height:12px; border-radius:50%; background:#e0b96b; animation:grain .5s ease-out forwards; }

/* --- digger and dino --- */
.spr { position:absolute; pointer-events:none; }
#digger { left:120px; top:560px; width:330px; transition:left .35s ease, top .35s ease; cursor:grab; pointer-events:auto; touch-action:none; }
#digger.flip { transform:scaleX(-1); }
#digger.dragging { transition:none; cursor:grabbing; }
#digger.wiggle { animation:wiggle .6s ease 2; }
#dinoRise { left:0; top:900px; width:330px; transition:top .5s cubic-bezier(.2,.9,.3,1.05); }
#dinoRise img { width:100%; }
#dinoRise.show { top:430px; animation:bob 1s ease-in-out .5s 2 alternate; }

#fx { position:absolute; inset:0; pointer-events:none; }
.star { position:absolute; color:#fff26a; font-size:52px; text-shadow:0 3px 0 #df8e25; animation:star .85s ease-out forwards; }

/* --- controls (real screen pixels) --- */
.topbar { position:fixed; top:max(10px,env(safe-area-inset-top)); left:max(14px,env(safe-area-inset-left)); right:max(14px,env(safe-area-inset-right)); display:flex; justify-content:space-between; z-index:50; pointer-events:none; }
.pill, .round { pointer-events:auto; border:0; color:#fff; background:rgba(31,79,143,.92); box-shadow:0 4px 10px rgba(0,0,0,.2); cursor:pointer; font:inherit; }
.pill { display:grid; place-items:center; min-height:64px; padding:0 22px; border-radius:999px; text-decoration:none; font-size:19px; }
.round { width:64px; height:64px; border-radius:50%; font-size:27px; display:grid; place-items:center; }
.reset { position:fixed; right:max(14px,env(safe-area-inset-right)); bottom:max(12px,env(safe-area-inset-bottom)); background:var(--sun); color:#563d00; font-size:38px; z-index:50; }
.pill:hover, .round:hover { filter:brightness(1.12); }

.rotate { display:none; position:fixed; inset:0; z-index:100; place-items:center; text-align:center; padding:28px; color:#fff; background:#1a2a44; font-size:clamp(20px,6vw,32px); }
@media (orientation:portrait) { .rotate { display:grid; } .frame, .topbar, .reset { display:none; } }

@keyframes rise { to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes jiggle { 0%,100% { rotate:0deg; scale:1; } 30% { rotate:-8deg; scale:1.1; } 70% { rotate:6deg; scale:1.05; } }
@keyframes grain { to { transform:translate(var(--gx),var(--gy)) scale(.3); opacity:0; } }
@keyframes wiggle { 0%,100% { rotate:0deg; } 30% { rotate:-4deg; } 70% { rotate:4deg; } }
@keyframes bob { from { transform:translateY(0); } to { transform:translateY(-26px); } }
@keyframes star { from { transform:translate(-50%,-50%) rotate(0) translateX(8px) scale(.3); opacity:1; } to { transform:translate(-50%,-50%) rotate(var(--a)) translateX(var(--d)) scale(1.1); opacity:0; } }

@media (prefers-reduced-motion:reduce) {
  .star { animation-duration:.4s; }
  #dinoRise.show { animation:none; }
  #digger.wiggle { animation-duration:.3s; }
}