/* Title screen: the town art stays bright and drifts slowly; a paper plaque in the game's own
   panel style holds the title (inside a cartouche, the oval that framed names in Egypt) and Play. */
#welcome {
  --sand: #e8c98f;
  position: fixed;
  inset: 0;
  isolation: isolate;
  display: grid;
  align-items: center;
  justify-items: start;
  padding: max(24px, env(safe-area-inset-top)) max(24px, 6vw) max(24px, env(safe-area-inset-bottom));
  overflow: auto;
  background: var(--sand);
  color: var(--ink);
}

.welcome-art {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.welcome-art::after {
  /* A soft warm light from the plaque's side, so the art never turns muddy. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f3dcae99 0, #f3dcae33 34%, transparent 58%);
}
.welcome-scene {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 34% 50%;
  transform-origin: 62% 55%;
  animation: welcome-drift 38s ease-in-out infinite alternate;
}
@keyframes welcome-drift {
  from { transform: scale(1.04) translate(0, 0); }
  to { transform: scale(1.12) translate(-1.5%, -1%); }
}

.welcome-card {
  width: min(420px, 100%);
  padding: 30px 30px 18px;
  border: 1px solid var(--edge);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: 0 2px 0 #d9c39b, 0 24px 60px #4a321440;
  text-align: center;
  animation: welcome-rise 0.6s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes welcome-rise {
  from { opacity: 0; transform: translateY(14px); }
}

.welcome-kicker {
  margin: 0 0 14px;
  color: var(--river);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* The cartouche: a rounded double frame with the tie bar at its foot. */
#welcomeTitle {
  position: relative;
  margin: 0 auto 18px;
  padding: 6px;
  width: fit-content;
  border: 2px solid var(--river);
  border-radius: 999px;
  font: 700 clamp(44px, 7vw, 58px)/1 Georgia, 'Times New Roman', serif;
  letter-spacing: -0.02em;
  color: var(--river-dark);
}
#welcomeTitle span {
  display: block;
  padding: 10px 30px 14px;
  border: 1px solid #245e5a80;
  border-radius: 999px;
  background: #fffaf0;
}
#welcomeTitle::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 56%;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 3px;
  background: var(--river);
}

.welcome-tagline {
  max-width: 34ch;
  margin: 26px auto 22px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}

.welcome-play {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 12px 20px;
  border: 1px solid var(--river-dark);
  border-radius: 12px;
  background: var(--river);
  color: #fff8e8;
  box-shadow: 0 3px 0 var(--river-dark), 0 10px 22px #17454140;
  cursor: pointer;
  font: 700 17px/1.2 "Trebuchet MS", "Avenir Next", sans-serif;
  transition: background 0.16s, transform 0.16s, box-shadow 0.16s;
}
.welcome-play svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.welcome-play:hover:not(:disabled) { background: #2b6d68; transform: translateY(-1px); box-shadow: 0 4px 0 var(--river-dark), 0 14px 26px #17454155; }
.welcome-play:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--river-dark); }
.welcome-play:disabled { opacity: 0.75; cursor: wait; }
#welcome :focus-visible { outline: 3px solid var(--river); outline-offset: 3px; }

.welcome-status { margin: 0; color: #8a3a22; font-size: 13px; }
.welcome-status:not(:empty) { margin-top: 12px; }
#welcome noscript p { margin: 12px 0 0; color: var(--muted); }

.welcome-meta {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid #e4d3b7;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.welcome-meta span::after { content: '·'; margin-left: 8px; }
.welcome-meta a { color: var(--river); text-underline-offset: 3px; }

@media (max-width: 700px) {
  /* The art takes the top of the screen, framed on the town; the plaque rests on the sand below. */
  #welcome { align-items: end; justify-items: center; padding-inline: max(14px, env(safe-area-inset-left)); }
  .welcome-art { bottom: auto; height: 62svh; }
  .welcome-art::after { background: linear-gradient(0deg, var(--sand) 0, #e8c98f00 30%); }
  .welcome-scene { object-position: 47% 58%; transform-origin: 50% 58%; }
  .welcome-card { padding: 22px 20px 12px; }
  .welcome-tagline { margin: 22px auto 18px; font-size: 14px; }
}

@media (max-width: 700px) and (max-height: 680px) {
  .welcome-card { padding: 16px 18px 10px; }
  .welcome-kicker { margin-bottom: 10px; }
  #welcomeTitle { font-size: 40px; }
  .welcome-tagline { margin: 18px auto 14px; }
  .welcome-play { min-height: 48px; }
  .welcome-meta { margin-top: 12px; padding-top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-scene, .welcome-card { animation: none; }
  .welcome-play { transition: none; }
}