/* Activity Scroll — Styles following the provided rule-book (v1.3) */
/*      */
/* #f9f6e9 #fffdf4   */
:root{
  --panel: #d6e0d5; /* Pale Green*/
  --panel-grad:#8ead8f; /* Dark Pale Green */
  --text: #474b4e;
  --blue: #205b87;
  --honey: #8a5a00;
  --pale-mid: #deddb6;
  --pale-light: #fcffed;
}

*{ box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: linear-gradient(180deg, var(--panel-grad), var(--panel));
  color: var(--text);
  font-family: "Sora", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#activity-root{
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
    padding-bottom:3rem; /* Added: To create space at bottom */
  background: linear-gradient(180deg, var(--panel-grad), var(--panel));/* Added: Gradient same as body as activity root is defacto body */
}

#activity-box{
  position: relative;
  width: min(60vw, 1100px);
  max-width: 60vw; /* Desktop rule */
  height: 90vh;    /* Important per rules */
  margin-top: 40px; /* Push ~40px from top */
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  background: linear-gradient(180deg, var(--panel), var(--panel-grad));
  overflow: hidden; /* safety */
}

/* Small screens rule: max-width 90% */
@media (max-width: 768px) {
  #activity-box{ max-width: 90vw; width: 90vw; }
}

/* CA logo */

#ca-logo{
  position: absolute;
  top: 20px;
  right: 20px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.28));
  /* Render at natural size; no forced scaling */
}


/* === LilBit composite with centered logo + visible speech bubble === */
#lilbit-composite{
  position: relative;
  display: block;                  /* span full width so we can center the logo */
  margin: 10px 20px 0 16px;        /* keep your left margin */
  height: var(--lilbit-height, 140px);
}

/* Centered HR logo at top of the composite */
#hr-logo{
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 120px;                   /* your requested size */
  width: auto;
  pointer-events: none;            /* decorative */
  z-index: 1;                      /* sits behind LilBit + bubble */
}

/* LilBit + bubble stay anchored bottom-left */
.lb-wrap{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
}

#lilbit{
  display: block;
  max-height: 22vh;
  height: auto;
  width: auto;
}

/* Speech bubble — on top, with solid white fill */
#speech-bubble{
  position: absolute;
  top: 0;                          /* aligned with LilBit’s top */
  left: calc(100% + 12px);         /* to the right of LilBit */
 background: rgba(255, 255, 255, 0.6);              /* make the box visible */
  color: var(--text);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: clamp(14px, 2.2vh, 18px);
  line-height: 1.25;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.08));
  width: clamp(100px, 26vw, 100px);/* prevents collapse */
  z-index: 3;                      /* above LilBit and logo */
}

/* Bubble tail */
#speech-bubble::after{
  content: "";
  position: absolute;
  left: -20px;
  top: 18px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent rgba(255, 255, 255, 0.6) transparent transparent;
}




/* Content Box */
#content-box{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px; /* leave space for credit line */
  top: calc(10px + var(--lilbit-height, 140px)); /* LilBit bottom touches title bar top */
  display: flex;
  flex-direction: column;
  padding: 0 20px 20px 20px;
}

#title-bar{
  height: var(--title-bar-height, 80px); /* JS syncs to 50% of LilBit height */
  background: linear-gradient(180deg, var(--label-from, var(--pale-light)), var(--label-to, var(--pale-mid)));
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 5px; /* slight rounding not more than 5px */
  display: flex;
  align-items: center; /* vertical align text */
  padding: 0 16px;
}

#title-bar h1{
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial;
  color: var(--blue);
  font-weight: 700;
  
  font-size: clamp(18px, 2.2vh, 28px);
  margin: 0;
  line-height: 1.1;
}

/* Space below title bar */
#content-inner{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: calc(100% - var(--title-bar-height, 80px) - 20px);
}

#top-info{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}

#timer{
  color: var(--blue);
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(18px, 2.2vh, 28px);
}

#score{
  color: var(--text);
  font-size: clamp(14px, 2vh, 20px);
}

#activity-area{
  position: relative;
  flex: 1;
  overflow: hidden;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.9) 0 2px, transparent 3px),
    radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,0.9) 0 1.5px, transparent 3px),
    radial-gradient(1.2px 1.2px at 40% 80%, rgba(255,255,255,0.8) 0 1.2px, transparent 3px),
    radial-gradient(1px 1px at 85% 25%, rgba(255,255,255,0.8) 0 1px, transparent 2px),
    linear-gradient(180deg, #0b1220, #131a2a);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 12px;
}

/* Centered buttons per rule */
.centered-row, #start-group{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

#start-group{
  height: 100%;
  flex-direction: column;
}

.cta{
  background: linear-gradient(180deg, #f8d58c, var(--honey));
  color: white;
  border: none;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(138,90,0,0.25);
  transition: transform 0.08s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.cta:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(138,90,0,0.3); }
.cta:active{ transform: translateY(0); }

.cta.secondary{
  background: linear-gradient(180deg, #e1e1e1, #bcbcbc);
  color: #222;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
}

.hint{
  margin: 0;
  font-size: 0.9rem;
    color: #fff;
  opacity: 0.7;
}

/* Falling labels */
.label{
  transform-origin: center center;
  position: absolute;
  top: 0; /* start at the top edge of the content box */
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--label-from, var(--pale-light)), var(--label-to, var(--pale-mid)));
  border: 1px solid rgba(0,0,0,0.08);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  pointer-events: auto;
  user-select: none;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
  transform: translateX(0) translateY(0) rotate(0deg);
  animation-name: fall, sway, tiny-tilt;
  animation-duration: 6s, 3.6s, 2.8s;
  animation-timing-function: linear, ease-in-out, ease-in-out;
  animation-iteration-count: 1, infinite, infinite;
}

@keyframes fall{
  from{ transform: translateY(var(--start-offset, -24px)); }
  to{   transform: translateY(var(--fall-distance, 120%)); }
}
  to{ transform: translateY(var(--fall-distance, 120%)); }
}

@keyframes sway{
  0%{ left: var(--x-start, 0%); }
  50%{ left: calc(var(--x-start, 0%) + var(--x-sway, 12%)); }
  100%{ left: var(--x-start, 0%); }
}

@keyframes tiny-tilt{
  0%{ rotate: -5deg; }
  50%{ rotate: 5deg; }
  100%{ rotate: -5deg; }
}

/* Click pop-out */
.pop-out{
  animation: pop 300ms ease forwards;
}
@keyframes pop{
  0%{ transform: scale(1); opacity: 1; }
  100%{ transform: scale(0); opacity: 0; }
}

/* End screen */
#end-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  color: white;
  text-align: center;
  padding: 20px;
}
#end-card{
  background: linear-gradient(180deg, var(--panel), var(--panel-grad));
  color: var(--text);
  border-radius: 14px;
  padding: 22px;
  width: min(420px, 90%);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  border: 1px solid rgba(0,0,0,0.1);
}
#end-card h2{
  margin: 0 0 8px 0;
  font-family: "Space Grotesk", sans-serif;
  color: var(--blue);
}
#end-card p{ margin: 6px 0; }

/* Credit line */
#credit-line{
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 10px;
  text-align: center;
  font-size: 12px;
  opacity: 0.7;
}
#credit-line a{ color: inherit; text-decoration: none; }

/* Responsiveness breakpoints */
@media (max-width: 1025px){
  #activity-box{ border-radius: 14px; }
}

@media (max-width: 768px){
  #lilbit{ max-height: 18vh; }
  #speech-bubble{ font-size: clamp(12px, 2vh, 16px); display:none; }
}

/* Accessibility focus */
button:focus-visible{
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}