/* Activity Styles v1.2 – honors the Activity Scroll rules */

/* Colors */

:root{
  --panel:#f9f6e9;
  --panel-grad:#fffdf4;
  --text:#474b4e;
  --blue:#205b87;
  --gold:#8a5a00;
  --pale1:#deddb6;/*Bottom Color*/
  --pale2:#fcffed;/*Top Color*/
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: linear-gradient(180deg, var(--pale2), var(--pale1));
  color:var(--text);
  font-family: "Sora","Playfair Display",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
}
h1,h2{font-family:"Space Grotesk","Sora",system-ui;-webkit-font-smoothing:antialiased}
h1{font-size:clamp(1.25rem, 1.8vw + 0.5rem, 2rem); color:var(--blue); margin:0; text-align:center}
h2{font-size:clamp(1.1rem, 1.6vw + 0.4rem, 1.6rem); color:var(--blue); margin:0 0 8px}

#activity-root{
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:10px; /* push from top so LilBit never touches screen top */
  padding-bottom:3rem; /* Added: To create space at bottom */
  background: linear-gradient(180deg, var(--pale2), var(--pale1));/* Added: Gradient same as body as activity root is defacto body */
}

/* Activity Box */
.activity-box{
  position:relative;
  width:min(60vw, 980px); /* Desktop max-width 60% of viewport */
  max-width:98vw;
  height:100vh; /* Important: total target height */
  margin:auto;
  display:flex;
  flex-direction:column;
  background: linear-gradient(180deg, var(--panel), var(--panel-grad));
  border:1px solid rgba(0,0,0,0.05);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  overflow:hidden;
}

/* CA logo top-right with 20px margins */
.ca-logo{
  position:absolute;
  top:20px;
  right:20px;
  width:min(70px, 12vw);
  height:auto;
}

/* LilBit Composite */
.lilbit-composite{
  position:relative;
  align-self:flex-start;
  margin-left:16px;
  margin-top:10px; /* LilBit top = 10px lower than activity box top */
  display:flex;
  align-items:flex-start;
  gap:12px;
}
#lilbit-img{
  display:block;
  height:auto;
  width:auto; /* show at natural width */
  max-height:28vh; /* heuristic guard so layout stays sane */
}
#speech-bubble{
  position:relative;
  background:#ffffff;
  border:2px solid rgba(0,0,0,0.08);
  padding:10px 12px;
  border-radius:12px;
  font-size:clamp(0.85rem, 1vw + 0.25rem, 1rem);
  max-height:70%; /* temporarily; JS will set to 70% of LilBit height */
  display:inline-block;
  /* Clamp width between 40%–70% of Content Box width; JS will set accurately */
  width:45%;
  max-width:70%;
  min-width:40%;
  line-height:1.25;
  box-shadow:0 8px 20px rgba(0,0,0,0.06);
}
/* bubble tail */
#speech-bubble::after{
  content:"";
  position:absolute;
  left:-10px;
  top:18px;
  border-width:10px;
  border-style:solid;
  border-color:transparent #ffffff transparent transparent;
  filter: drop-shadow(-1px 1px 0 rgba(0,0,0,0.08));
}

/* Content Box */
.content-box{
  display:flex;
  flex-direction:column;
  gap:20px; /* Space out content from title bar by 20px */
  padding:0 16px 16px;
  margin-top:0;

}

/* Title Bar (height = 50% of LilBit Composite height; applied via JS) */
#title-bar{
  background:linear-gradient(180deg, var(--pale2), var(--pale1));
  border:1px solid rgba(0,0,0,0.07);
  border-radius:5px; /* Rounded slightly, <=5px */
  display:flex;
  align-items:center; /* vertical align text */
  justify-content:center;
  padding:6px 10px;
  min-height:44px; /* guard */
}

/* Activity Area */
#activity-area{
  flex:1;
  display:flex;
  flex-direction:column;
}

.panel{
  background: linear-gradient(180deg, var(--panel), var(--panel-grad));
  border:1px solid rgba(0,0,0,0.07);
  border-radius:12px;
  padding:16px;
  min-height:calc(100% - 0px);
}
.hidden{display:none !important}

.intro{margin:0 0 12px; text-align:center}

.btn-group{
  display:flex;
  gap:12px;
}
.btn-group.center{
  justify-content:center;
  align-items:center;
}
.btn-group.center.spaced-top{ margin-top:20px } /* Space out buttons by 20px from content */

.btn{
  border:none;
  padding:12px 18px;
  border-radius:999px;
  font-weight:600;
  cursor:pointer;
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn.gold{
  background: linear-gradient(180deg, #f5d082, var(--gold));
  color:#3b2a00;
  box-shadow:0 6px 16px rgba(138,90,0,.25);
}
.btn.gold:hover{ transform: translateY(-1px); box-shadow:0 10px 22px rgba(138,90,0,.28) }
.btn.gold:active{ transform: translateY(0); box-shadow:0 4px 12px rgba(138,90,0,.2) }

.btn.subtle{
  background:#eef4f8;
  color:#234;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
}
.btn[disabled]{ opacity:.5; cursor:not-allowed }

.question{ font-family:"Space Grotesk"; font-weight:600; font-size:clamp(1rem, 1.2vw + 0.6rem, 1.4rem); margin:8px 0 12px }
.options{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.options li{ margin:0 }
.option-btn{
  width:100%;
  text-align:left;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.06);
  background:#fff;
  font-size:1rem;
}
.option-btn:hover{ box-shadow:0 6px 16px rgba(0,0,0,.08) }
.option-btn.selected{ outline:3px solid var(--blue); }

.label-chip{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(180deg, var(--pale2), var(--pale1));
  border:1px solid rgba(0,0,0,0.08);
  font-size:.9rem;
}

.result-title{ text-align:center }
.score-line{ text-align:center; font-weight:700; margin:8px 0 }
.feedback{ text-align:center }

.credit{
  position:absolute;
  bottom:8px;
  right:12px;
  font-size:.8rem;
}
.credit a{ color:var(--blue); text-decoration:none }
.credit a:hover{ text-decoration:underline }

/* Breakpoints */
/* Medium: <=1025px */
@media (max-width:1025px){
  .activity-box{ width:min(70vw, 900px) }
  #lilbit-img{ max-height:26vh }
}

/* Small: <=768px */
@media (max-width:768px){
  .activity-box{ width:min(90vw, 620px) } /* Small screens max-width 90% of viewport */
  .lilbit-composite{ margin-left:10px; gap:8px }
  #speech-bubble{ font-size:0.95rem }
  #title-bar h1{ font-size:1.05rem }
  .btn{ padding:11px 16px }
  .panel{ padding:14px }
}