/* Educating Edgar shared styles */
@font-face {
  font-family: "EduFoundation";
  src: url("fonts/EduNSWACTFoundation.woff2") format("woff2");
  font-weight: 400 700; font-display: block;
}
:root {
  --bg: #FFF4E0; --bg2: #FFE7C2; --ink: #4A3B32; --orange: #FF9F43; --coral: #FF7B6B;
  --teal: #2EC4B6; --sun: #FFD166; --grape: #9B7BE5; --leaf: #7BC96F; --sky: #5DB7E8;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; width: 100%; overflow: hidden; position: fixed; inset: 0;
  overscroll-behavior: none; background: var(--bg); color: var(--ink);
  font-family: "EduFoundation", "Andika", "Comic Sans MS", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: none; -webkit-text-size-adjust: 100%;
}
img, svg { -webkit-user-drag: none; user-select: none; pointer-events: none; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; touch-action: none; }
.screen {
  position: absolute; inset: 0;
  padding: calc(var(--safe-t) + 16px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px);
  background: radial-gradient(circle at 20% 10%, #FFF9EE 0, var(--bg) 40%, var(--bg2) 100%);
}
/* Big round icon buttons (home etc.) */
.round-btn {
  width: 96px; height: 96px; border-radius: 50%; background: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 0 rgba(74,59,50,.18), 0 10px 24px rgba(74,59,50,.12); transition: transform .12s;
}
.round-btn:active { transform: translateY(4px) scale(.96); box-shadow: 0 2px 0 rgba(74,59,50,.18); }
.round-btn svg { width: 60px; height: 60px; }
.home-btn { position: absolute; z-index: 20; top: calc(var(--safe-t) + 16px); left: calc(var(--safe-l) + 16px); }
.hidden { display: none !important; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes wiggle { 0%,100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-12px) rotate(-6deg); } 40% { transform: translateX(10px) rotate(5deg); } 60% { transform: translateX(-8px) rotate(-3deg); } 80% { transform: translateX(5px) rotate(2deg); } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.wiggle { animation: wiggle .5s ease-in-out; }
.pop { animation: pop .45s ease-out; }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
@media (prefers-reduced-motion: reduce) { .float { animation: none !important; } }

/* shared game chrome (used by games via Edgar.gameButtons) */
#game-view .again-btn { position: absolute; z-index: 20; top: calc(var(--safe-t) + 16px); right: calc(var(--safe-r) + 16px); }
#game-view .stars { position: absolute; top: calc(var(--safe-t) + 30px); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; height: 64px; z-index: 5; pointer-events: none; }
#game-view .stars svg { width: 56px; height: 56px; }

/* ---------- Phones (iPhone portrait, and landscape with a short screen). iPads and desktops never match. ---------- */
@media (max-width: 600px), (max-height: 540px) {
  .round-btn { width: 72px; height: 72px; } .round-btn svg { width: 44px; height: 44px; }
  .home-btn { top: calc(var(--safe-t) + 12px); left: calc(var(--safe-l) + 12px); }
  #game-view .again-btn { top: calc(var(--safe-t) + 12px); right: calc(var(--safe-r) + 12px); }
  #game-view .stars { top: calc(var(--safe-t) + 28px); gap: 4px; height: 36px; }
  #game-view .stars svg { width: 32px; height: 32px; }
  #game-view .stars svg:nth-last-child(n+6) { display: none; }   /* only the latest 5 stars fit between the buttons */
}
@media (max-height: 540px) and (orientation: landscape) {
  /* short landscape: the stars stack under the home button, the play area sits between the corner buttons */
  #game-view .stars { top: calc(var(--safe-t) + 96px); left: calc(var(--safe-l) + 48px); flex-direction: column; height: auto; }
}