/* عالم شبلول — browser slice.
   Dominant decision: the world fills the viewport like a game, not a page with a
   canvas in a card. Chrome is two thin bars that float over it. */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden;
  font-family: Tajawal, system-ui, sans-serif;
  font-size: 15px;                      /* Arabic joins break below ~13px */
  background: #67c6f2;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ---- stage --------------------------------------------------------------- */
/* The world is a fixed 1280x760 design box scaled to fit. Every position below
   is a % of the WORLD, never of the viewport — otherwise props drift away from
   the floor on a phone (they did). Letterbox is filled with sky so it reads as
   sky, not as bars. */
#stage {
  position: fixed; inset: 0; overflow: hidden; cursor: pointer;
  background: linear-gradient(#8fd8f7 0%, #63c3ef 55%, #3fa9dc 100%);
}
#world {
  position: absolute; left: 50%; top: 50%;
  width: 1280px; height: 760px;
  transform: translate(-50%, -50%) scale(var(--fit, 1));
  transform-origin: center;
}
#world img { position: absolute; pointer-events: none; }

#sky   { left: 0; top: 0; width: 100%; height: 62%; object-fit: cover; }
#floor { left: 50%; top: 56%; width: 118%; transform: translate(-50%, -46%); }

#clouds .cloud { top: 6%; width: 16%; opacity: .9; animation: drift linear infinite; }
.c1 { left: -20%; animation-duration: 90s; }
.c2 { left: -20%; width: 11%; top: 15%; animation-duration: 130s; animation-delay: -40s; opacity: .75; }
.c3 { left: -20%; width: 20%; top: 2%;  animation-duration: 170s; animation-delay: -90s; opacity: .6; }
@keyframes drift { to { transform: translateX(calc(100vw + 30%)); } }

/* Props join the same depth sort as actors: z-index = the prop's ground line,
   in the same units (world y% * 10). Without this the stall painted over a child
   standing in front of it. */
.prop { transform-origin: bottom center; }
.volcano { z-index: 420; left: 4%;  top: 20%; width: 26%; }
.hill    { z-index: 480; right: 2%; top: 33%; width: 30%; opacity: .95; }
.fartree { z-index: 400; left: 34%; top: 32%; width: 6%;  opacity: .9; }
.hut     { z-index: 620; left: 12%; top: 40%; width: 21%; }
.palm    { z-index: 600; right: 9%; top: 26%; width: 17%; }
.tree    { z-index: 465; right: 35%; top: 31%; width: 6.5%; }
.stall   { z-index: 655; left: 33%; top: 46%; width: 11%; }
.fence   { z-index: 860; left: 50%; top: 74%; width: 34%; transform: translateX(-50%); opacity: .95; }
.rocks   { z-index: 735; right: 20%; top: 68%; width: 10%; }
.rocks2  { z-index: 755; left: 16%;  top: 71%; width: 8%; }
.pine    { z-index: 715; left: 41%;  top: 64%; width: 3.4%; }

/* ---- actors -------------------------------------------------------------- */
#actors { position: absolute; inset: 0; }
.actor {
  position: absolute; width: 0; height: 0;
  transition: none;                       /* server drives position; no CSS lag */
  /* No z-index here on purpose: it would make .actor a stacking context and trap
     the speech bubble behind scenery. Depth lives on .figure; text floats above. */
}
.actor .figure {
  position: absolute; left: 0; bottom: 0; width: 0; height: 0;
  z-index: var(--z, 500);                 /* same scale as .prop z-index */
  transform: scale(var(--s, 1)); transform-origin: bottom center;
}
.actor .body {
  position: absolute; left: 50%; bottom: 0;
  height: 104px; width: auto;
  transform: translateX(-50%);
  transform-origin: bottom center;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.28));
}
.actor.walking .body { animation: bob .42s ease-in-out infinite; }
@keyframes bob {
  0%,100% { transform: translateX(-50%) translateY(0)    rotate(0deg); }
  25%     { transform: translateX(-50%) translateY(-4px) rotate(-2.5deg); }
  75%     { transform: translateX(-50%) translateY(-4px) rotate(2.5deg); }
}
.actor .shadow {
  position: absolute; left: 50%; bottom: -3px; width: 58px; height: 14px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,.30), rgba(0,0,0,0) 70%);
}
.actor .tag {
  z-index: 9000;
  position: absolute; left: 50%; bottom: calc(var(--h, 104px) + 5px);
  transform: translateX(-50%);
  font-size: 13px; font-weight: 700; color: #17384a; white-space: nowrap;
  background: var(--hue, rgba(255,255,255,.9)); border-radius: 999px; padding: 2px 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,.28);
}
.actor.me .tag { background: #ffd84d; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 1px 3px rgba(0,0,0,.3); }

/* their chat bubble (art/418) rebuilt in CSS so it fits any text length */
.actor .bubble {
  z-index: 9500;
  position: absolute; left: 50%; bottom: calc(var(--h, 104px) + 32px);
  transform: translateX(-50%) scale(.6);
  opacity: 0; transform-origin: bottom center;
  max-width: 15rem; width: max-content;
  background: #fff; color: #16323f; border: 2.5px solid #6ec0e8;
  border-radius: 14px; padding: 7px 13px;
  font-size: 15px; font-weight: 500; line-height: 1.5; text-align: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.actor .bubble.show { animation: pop .34s cubic-bezier(.18,1.5,.5,1) forwards; }
.actor .bubble::after {
  content: ''; position: absolute; bottom: -13px; inset-inline-start: 50%;
  translate: -50% 0;
  border: 9px solid transparent; border-top-color: #6ec0e8; border-bottom: 0;
}
.actor .bubble::before {
  content: ''; position: absolute; bottom: -8px; inset-inline-start: 50%;
  translate: -50% 0; z-index: 1;
  border: 7px solid transparent; border-top-color: #fff; border-bottom: 0;
}
@keyframes pop { to { opacity: 1; transform: translateX(-50%) scale(1); } }

#marker {
  position: absolute; width: 34px; height: 16px; margin: -8px 0 0 -17px;
  border: 3px solid #ffd84d; border-radius: 50%;
  animation: ping .55s ease-out forwards; pointer-events: none;
}
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* ---- chrome -------------------------------------------------------------- */
#hud, #bar {
  position: fixed; inset-inline: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: 10px clamp(12px, 3vw, 28px);
  background: linear-gradient(rgba(4,32,48,.72), rgba(4,32,48,.34));
  backdrop-filter: blur(7px); color: #fff;
}
#hud { top: 0; justify-content: space-between; }
#bar { bottom: 0; flex-wrap: wrap; background: linear-gradient(rgba(4,32,48,.34), rgba(4,32,48,.78)); }

.brand { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.logo { font-size: clamp(19px, 2.6vw, 27px); font-weight: 800; letter-spacing: 0; }
.tag  { font-size: 13px; opacity: .82; font-weight: 500; }

.stats { display: flex; gap: 8px; flex-shrink: 0; }
.stat {
  font-size: 13px; font-weight: 500; background: rgba(255,255,255,.14);
  border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.stat b { font-weight: 800; font-size: 15px; }
#stat-link.on  { background: rgba(88,214,141,.28); }
#stat-link.off { background: rgba(231,76,60,.34); }

.namebox { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.namebox input {
  font: inherit; font-weight: 500; font-size: 15px;
  border: 0; border-radius: 999px; padding: 7px 14px; width: 9.5rem;
  background: rgba(255,255,255,.94); color: #133042;
}
.namebox input:focus-visible { outline: 3px solid #ffd84d; outline-offset: 1px; }

#phrases { display: flex; flex-wrap: wrap; gap: 7px; flex: 1; }
#phrases button {
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  border: 0; border-radius: 999px; padding: 7px 15px;
  background: #ffd84d; color: #2a2205;
  box-shadow: 0 2px 0 #d9ae1d; transition: transform .1s, box-shadow .1s;
}
#phrases button:hover  { transform: translateY(-1px); box-shadow: 0 3px 0 #d9ae1d; }
#phrases button:active { transform: translateY(1px);  box-shadow: 0 1px 0 #d9ae1d; }
#phrases button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#phrases button[disabled] { opacity: .5; cursor: default; }

.hint { flex-basis: 100%; margin: 0; font-size: 12.5px; opacity: .72; font-weight: 500; }

#boot {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: #67c6f2; transition: opacity .45s;
}
#boot.gone { opacity: 0; pointer-events: none; }
.boot-in { text-align: center; color: #06364d; font-weight: 700; }
.spin {
  display: block; width: 42px; height: 42px; margin: 0 auto 14px;
  border: 5px solid rgba(255,255,255,.55); border-top-color: #fff;
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .cloud, .actor.walking .body, .spin { animation: none !important; }
}
@media (max-width: 640px) {
  .brand .tag { display: none; }
  #phrases button { font-size: 13px; padding: 6px 11px; }
  #bar { gap: 8px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .namebox input { width: 7rem; }
  .hint { font-size: 11.5px; }
}