:root {
  --leaf: #2f6b2a;
  --leaf-deep: #1f3d1c;
  --cream: #fff7e3;
  --sun: #ffc93c;
  --sun-deep: #e89a1c;
  --berry: #e9546b;
  --ink: #2b2118;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--leaf-deep); overflow: hidden; touch-action: none; -webkit-tap-highlight-color: transparent; }
body { font-family: "Fredoka", system-ui, sans-serif; color: var(--cream); }

#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 90% at 50% 100%, #3d7a33 0%, var(--leaf-deep) 70%); }
/* The game is portrait: on wide screens it sits in a phone-shaped column, full height. */
#unity-canvas { width: 100%; height: 100%; max-width: calc(100vh * 0.5625); display: block; outline: none; background: #000; }
@supports (height: 100dvh) { #unity-canvas { max-width: calc(100dvh * 0.5625); } }
@media (max-aspect-ratio: 10/16) { #unity-canvas { max-width: none; } }

#loader, #oops { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; transition: opacity .6s ease, transform .6s ease; }
#loader.is-done { opacity: 0; transform: scale(1.04); pointer-events: none; }
#oops { background: var(--leaf-deep); }
.loader__sky { position: absolute; inset: 0; background: url("ch-berryburrow.webp") center / cover no-repeat; filter: saturate(1.1) brightness(.62); animation: drift 24s ease-in-out infinite alternate; }
.loader__glow { position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 60%, rgba(255, 201, 60, .28), transparent 70%), linear-gradient(180deg, rgba(31, 61, 28, .2), rgba(31, 61, 28, .85)); }
.loader__card { position: relative; width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.loader__logo { width: min(320px, 78vw); height: auto; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45)); animation: pop .9s cubic-bezier(.2, 1.6, .4, 1) both; }
.loader__mascot { width: 128px; height: auto; margin-top: -6px; filter: drop-shadow(0 0 22px rgba(255, 214, 102, .65)); animation: bob 2.4s ease-in-out infinite; }
.loader__bar { position: relative; width: 100%; height: 18px; border-radius: 999px; background: rgba(255, 247, 227, .18); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35), 0 0 0 2px rgba(255, 247, 227, .35); overflow: visible; }
.loader__fill { height: 100%; width: 4%; border-radius: 999px; background: linear-gradient(90deg, #7ccf4f, #b6e35a 60%, var(--sun)); box-shadow: 0 0 14px rgba(182, 227, 90, .7); transition: width .35s ease; }
.loader__seed { position: absolute; top: 50%; left: 4%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3b0, var(--sun) 45%, var(--sun-deep)); box-shadow: 0 0 16px rgba(255, 201, 60, .9); transition: left .35s ease; animation: spin 3s linear infinite; }
.loader__text { margin: 4px 0 0; font-size: 18px; font-weight: 600; letter-spacing: .2px; text-shadow: 0 2px 6px rgba(0, 0, 0, .5); min-height: 1.4em; }
.btn { font: 600 18px "Fredoka", sans-serif; color: var(--ink); background: linear-gradient(180deg, #ffe07a, var(--sun)); border: 0; border-radius: 999px; padding: 14px 30px; box-shadow: 0 5px 0 var(--sun-deep), 0 10px 22px rgba(0, 0, 0, .35); cursor: pointer; }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--sun-deep); }
.link { color: var(--cream); opacity: .8; font-size: 15px; }

@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: scale(1.06) translateX(-1.5%); } to { transform: scale(1.12) translateX(1.5%); } }
@media (prefers-reduced-motion: reduce) { .loader__sky, .loader__mascot, .loader__seed, .loader__logo { animation: none; } }