/* Scroll B v1.5 – Math Monarch v1.6 (two-column layout) */
:root{
  --panel-1:#c5d8e6;
  --panel-1-hi:#7da8c7;
  --text:#474b4e;
  --heading:#205b87;
  --honey:#8a5a00;
  --pale-1:#deddb6;
  --pale-2:#fcffed;
  --white-80: rgba(255,255,255,.8);
  --shadow: 0 12px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
  --correct:#1f8f5f;
  --wrong:#c0392b;
  --good-bg: rgba(31,143,95,.10);
  --bad-bg: rgba(192,57,43,.10);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;color:var(--text);font-family:'Sora',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(180deg,#fffdf4 0%,#f9f6e9 100%)}
h1,h2,h3{font-family:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--heading);margin:0;line-height:1.2}

#viewport-safe{
min-height:100vh;
display:flex;
align-items:
flex-start;
justify-content:center;
padding-top:20px;
padding-bottom:3rem; /* Added: To create space at bottom */
background:linear-gradient(180deg,#fffdf4 0%,#f9f6e9 100%);/* Added: Gradient same as body as activity root is defacto body */
}

#mother-box{position:relative;width:min(60vw,1100px);max-width:90vw;background:linear-gradient(180deg,var(--panel-1),var(--panel-1-hi));border-radius:16px;box-shadow:var(--shadow);padding:10px 14px 34px;display:flex;flex-direction:column;gap:10px;max-height:95vh}
#lilbit-composite{position:relative;display:flex;align-items:flex-start;gap:0px;padding-top:5px;padding-right:80px;width:100%}
#lilbit{margin-left:10px;align-self:flex-start;max-height:22vh;height:auto}
#speech-bubble{align-self:flex-start;position:relative;min-width:70px;width:fit-content;max-width:50%;background:var(--white-80);border-radius:12px;padding:10px 6px}
#speech-bubble::after{content:"";position:absolute;left:-18px;top:12px;border-width:10px;border-style:solid;border-color:transparent var(--white-80) transparent transparent}
#speech-text{margin:0;font-weight:600}
#activity-logo{align-self:center;height:auto;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.08))}
#ca-logo{position:absolute;top:10px;right:10px;height:auto;width:auto;max-height:20vh}
#content-box{background:linear-gradient(180deg,var(--white-80),rgba(255,255,255,0.9));border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:20px;padding:14px;overflow:hidden}
#title-bar{background:linear-gradient(180deg,var(--panel-1-hi),var(--panel-1));border-radius:5px;padding:10px 14px}
#title-text{font-weight:700}
#activity-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}

.card{width:min(900px,96%);background:linear-gradient(180deg,var(--pale-1),var(--pale-2));border:1px dashed rgba(32,91,135,.35);border-radius:12px;padding:16px 18px}
#header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
#progress{font-weight:700;color:var(--heading)}
#score-pill{font-weight:600;padding:.2rem .6rem;border-radius:999px;background:rgba(32,91,135,.10)}

#qa-row{display:flex;align-items:flex-start;gap:16px}
#left-col{width:60%}
#right-col{width:40%}

.stem{display:flex;align-items:flex-start;gap:8px;font-weight:600;margin-top:4px}
.q-icon{display:inline-flex;transform:translateY(2px)}

/* Options left column */
.options{margin:12px 0;display:grid;gap:10px}
.option{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid rgba(32,91,135,.25);border-radius:10px;padding:10px 12px}
.option input{transform:translateY(2px)}
.option label{cursor:pointer;display:block}

/* Feedback right column */
.feedback-panel{background:#fff;border:1px dashed rgba(32,91,135,.35);border-radius:10px;padding:12px;min-height:140px;box-shadow:var(--shadow)}
#feedback-title{font-weight:700;margin-bottom:6px;color:var(--heading)}
#feedback-text{min-height:1.5em}
.feedback-good{border-color:var(--correct);background:var(--good-bg)}
.feedback-bad{border-color:var(--wrong);background:var(--bad-bg)}

/* Controls */
.nav-row{display:flex;justify-content:right;align-items:center;gap:12px;min-height:44px;margin-top:8px}
.btn{appearance:none;border:none;padding:10px 18px;border-radius:999px;font-weight:700;cursor:pointer;background:linear-gradient(180deg,#f2d49f,#d9b36c);box-shadow:0 2px 0 rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.6);color:#3b2a00;transition:.12s transform,.12s box-shadow,.2s opacity}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.6)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.hidden{display:none}

/* Fixed credit line */
#credit-line{position:absolute;left:50%;transform:translateX(-50%);bottom:8px;margin:0;font-size:12px;opacity:.85;pointer-events:none}
#credit-line a{pointer-events:auto;color:var(--heading);text-decoration:none;border-bottom:1px dotted rgba(32,91,135,.4)}
#credit-line a:hover{text-decoration:underline}


/* === PATCH: Lilbit composite alignment (center logo, keep pairs intact) === */
#lilbit-composite{ position: relative; } /* already set earlier, restated for clarity */

/* Center the activity logo perfectly inside the composite (both axes) */
#activity-logo{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* true center */
  height: auto;
  object-fit: contain;
  /* pointer-events: none; */ /* uncomment if the logo ever blocks clicks beneath */
}

/* CA logo stays right-aligned (already positioned in your CSS; here just to lock intent) */
#ca-logo{
  position: absolute;
  right: 10px;
  top: 10px;
}



@media (max-width:900px){
  #qa-row{flex-direction:column}
  #left-col,#right-col{width:100%}
}
@media (max-width:1025px){#mother-box{width:min(70vw,1000px)}}
@media (max-width:768px){#mother-box{width:90vw}#activity-logo{align-self:center}}
img{max-width:100%;height:auto}



/* === MOBILE PATCH v5: true center logo (natural size) + crest pinned right === */
@media (pointer: coarse){
  /* keep the bubble hidden on phones */
  #speech-bubble{ 
    display: none !important;
  }

  /* three-column stage; also anchor for absolute crest */
  #lilbit-composite{
    display: grid !important;
    grid-template-columns: auto 1fr auto; /* left | center | right */
    align-items: center;
    column-gap: clamp(8px, 2vw, 20px);
    width: 100% !important;
    min-height: 22vh;
    position: relative; /* <— crest will anchor to this */
  }

  /* 1) Li'l Bit: left, vertically centered */
  #lilbit{
    grid-column: 1;
    justify-self: start;
    align-self: center;
    position: relative;
    z-index: 1;
  }

  /* 2) Activity logo: perfectly centered AND at intrinsic size */
  #activity-logo{
    grid-column: 2;
    justify-self: center;
    align-self: center;

    /* neutralize any earlier positioning */
    position: static !important;
    transform: none !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    float: none !important; margin: 0 auto !important;

    /* defeat global img shrink like img{max-width:100%} */
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain;
    z-index: 2;
  }

  /* 3) CA crest: pin to top-right of the composite (ignore grid gaps) */
  #ca-logo{
    position: absolute !important;
    top: clamp(8px, 2vw, 14px);
    right: clamp(8px, 2vw, 14px);
    /* grid alignment no longer needed when absolute */
    grid-column: auto;
    justify-self: auto; 
    align-self: auto;

    /* ensure it also ignores global img shrink */
    width: auto !important;
    max-width: none !important;
    height: auto !important;

    margin: 0;
    z-index: 3;
  }
}

/* === MOBILE PATCH: let the mother-box grow; unhide content; stack columns === */
@media (pointer: coarse){
  /* 1) The cap was clipping the lower UI on phones */
  #mother-box{
    max-height: none !important;  /* remove 95vh ceiling */
    height: auto !important;      /* let content decide the height */
    padding-bottom: 3.5rem;       /* room so the credit line never overlaps */
  }

  /* 2) Allow inner content to flow instead of being cropped */
  #content-box{
    overflow: visible !important; /* was hidden; reveals right-col + buttons */
  }

  /* 3) Don’t center the activity area vertically on small screens */
  #activity-area{
    justify-content: flex-start !important; /* natural top flow */
  }

  /* 4) Ensure a single-column question layout on handhelds */
  #qa-row{
    flex-direction: column !important;
  }
  #left-col, #right-col{
    width: 100% !important;
  }
}