@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700;800&display=swap');

:root{
  --ink:#0f2419;
  --paper:#f4f1e8;
  --court:#1c5c4a;
  --court-line:#f4f1e8;
  --accent:#e8b34a;
  --p1:#3f8ef0;
  --p2:#f0553f;
  --shadow:0 20px 48px rgba(15,36,25,.35);
}

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

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%, #1f4a3c 0%, var(--ink) 60%);
  color:var(--paper);
  font-family:'Rubik', system-ui, sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 16px 40px;
}

.wrap{
  width:100%;
  max-width:1000px;
  margin:0 auto;
}

.top{
  text-align:center;
  margin-bottom:18px;
}
.top h1{
  font-size:clamp(1.6rem,4vw,2.4rem);
  margin:0 0 4px;
  letter-spacing:-.01em;
}
.egg{
  display:inline-flex;
  vertical-align:middle;
  margin-left:2px;
  cursor:pointer;
  opacity:.55;
  animation:egg-pulse 2.4s ease-in-out infinite;
  transition:opacity .2s ease, transform .2s ease;
}
.egg svg{display:block;}
.egg:hover{opacity:1;transform:scale(1.25) rotate(10deg);}
@keyframes egg-pulse{
  0%,100%{opacity:.4;}
  50%{opacity:.85;}
}

.egg-toast{
  position:fixed;
  left:50%;
  top:18px;
  transform:translate(-50%,-140%);
  background:#0c1f17;
  color:#f4f1e8;
  border:1px solid rgba(244,241,232,.2);
  border-radius:10px;
  padding:10px 18px;
  font-size:.9rem;
  font-weight:600;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  z-index:50;
  pointer-events:none;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .4s ease;
  opacity:0;
}
.egg-toast.show{
  transform:translate(-50%,0);
  opacity:1;
}

.egg-particle{
  position:fixed;
  top:-40px;
  font-size:22px;
  pointer-events:none;
  z-index:49;
  animation:egg-fall linear forwards;
}
@keyframes egg-fall{
  from{transform:translateY(0) rotate(0deg);opacity:1;}
  to{transform:translateY(105vh) rotate(360deg);opacity:.9;}
}
.subtitle{
  margin:0;
  color:rgba(244,241,232,.65);
  font-size:.95rem;
}

.stage{
  width:100%;
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid rgba(244,241,232,.12);
  background:#0c1f17;
  touch-action:none;
}

canvas{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:960/540;
}

.controls-info{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:20px;
}
.controls-col{
  background:rgba(244,241,232,.06);
  border:1px solid rgba(244,241,232,.12);
  border-radius:10px;
  padding:14px 16px;
}
.controls-col h2{
  margin:0 0 8px;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--accent);
}
.controls-col p{
  margin:0 0 4px;
  font-size:.86rem;
  color:rgba(244,241,232,.85);
  line-height:1.7;
}

kbd{
  display:inline-block;
  min-width:1.6em;
  padding:2px 7px;
  margin:0 2px;
  background:rgba(244,241,232,.12);
  border:1px solid rgba(244,241,232,.25);
  border-bottom-width:2px;
  border-radius:5px;
  font-family:inherit;
  font-size:.82em;
  text-align:center;
}

.touch-note{
  display:none;
  text-align:center;
  margin:16px 0 0;
  font-size:.82rem;
  color:rgba(244,241,232,.55);
}

@media (max-width:760px){
  .controls-info{grid-template-columns:1fr;}
}
@media (hover:none) and (pointer:coarse){
  .touch-note{display:block;}
}