/* The Keeper's Mosaic — an unlisted view reached only from the cloud sigil on
   the Tree of Life dashboard. Every selector is scoped to #mosaic so the trial
   keeps its own palette and serif voice without touching the rest of Eden. */

#mosaic{
  --gold:#d9ad4d;
  --gold-light:#f5dc8d;
  --gold-dark:#76551d;
  --cream:#f3e8c5;
  --muted:#c6b98e;
  --danger:#a84c3c;

  padding:clamp(20px,4vw,44px) clamp(12px,3vw,28px);
  border:1px solid rgba(217,173,77,.3);
  border-radius:18px;
  color:var(--cream);
  font-family:Georgia,"Times New Roman",serif;
  background:
    radial-gradient(circle at 50% 0%,var(--bg-glow),transparent 35%),
    radial-gradient(circle at 50% 50%,rgba(var(--accent-rgb),.20),transparent 60%),
    linear-gradient(180deg,var(--panel) 0%,var(--surface) 48%,var(--bg-bottom) 100%);
}

#mosaic .page{width:min(100%,980px);margin:0 auto}

#mosaic .mosaic-back{
  display:inline-block;margin-bottom:14px;color:var(--muted);
  font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none
}
#mosaic .mosaic-back:hover{color:var(--gold-light)}

#mosaic .site-header{margin-bottom:18px;text-align:center}

#mosaic .eden-mark{
  margin:0 0 8px;color:var(--muted);font-size:.78rem;
  letter-spacing:.28em;text-transform:uppercase
}

#mosaic h1{
  margin:0;
  color:var(--gold-light);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,8vw,4.8rem);
  font-weight:500;
  letter-spacing:.04em;
  line-height:.98;
  text-transform:uppercase;
  text-shadow:0 3px 0 #3f2c0e,0 8px 20px rgba(0,0,0,.8)
}

#mosaic .subtitle{
  width:min(100%,720px);margin:14px auto 0;color:var(--muted);
  font-size:clamp(.95rem,2.8vw,1.15rem);line-height:1.55
}

#mosaic .trial-panel{
  padding:clamp(14px,3vw,24px);
  border:1px solid rgba(217,173,77,.45);
  border-radius:16px;
  background:linear-gradient(180deg,var(--card-top),var(--card-bottom));
  box-shadow:0 22px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05)
}

#mosaic .status-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;margin-bottom:14px
}

#mosaic .status-card{
  padding:11px 8px;
  border:1px solid rgba(217,173,77,.32);
  border-radius:10px;
  text-align:center;
  background:rgba(0,0,0,.28);
  box-shadow:none
}

#mosaic .status-label{
  display:block;margin-bottom:3px;color:var(--muted);
  font-size:.7rem;letter-spacing:.13em;text-transform:uppercase
}

#mosaic .status-value{
  display:block;color:var(--gold-light);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1rem,4vw,1.5rem);font-weight:bold
}

#mosaic .board-frame{
  position:relative;
  width:min(100%,820px);
  margin:0 auto;
  padding:clamp(4px,1.2vw,8px);
  border:2px solid var(--gold);
  border-radius:10px;
  background:#000;
  box-shadow:0 0 0 3px rgba(62,43,14,.9),0 14px 38px rgba(0,0,0,.7)
}

#mosaicBoard{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#000;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none
}

#mosaic .puzzle-piece{
  position:relative;
  display:block;
  width:100%;height:100%;
  min-width:0;min-height:0;
  margin:0;padding:0;
  overflow:hidden;
  border:clamp(.25px,.15vw,1px) solid rgba(245,220,141,.38);
  border-radius:0;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  background-image:var(--puzzle-image);
  background-repeat:no-repeat;
  background-size:800% 800%;
  transition:filter 120ms ease,transform 120ms ease,outline 120ms ease
}

#mosaic .puzzle-piece:hover:not(:disabled){z-index:2;filter:brightness(1.14)}
#mosaic .puzzle-piece:focus-visible{z-index:4;outline:3px solid #fff;outline-offset:-3px}

#mosaic .puzzle-piece.selected{
  z-index:5;
  outline:clamp(2px,.5vw,5px) solid var(--gold-light);
  outline-offset:calc(clamp(2px,.5vw,5px) * -1);
  filter:brightness(1.34);
  transform:scale(.9)
}

#mosaic .puzzle-piece:disabled{cursor:default}

#mosaic .start-screen,
#mosaic .completion-screen{
  position:absolute;
  inset:clamp(4px,1.2vw,8px);
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  text-align:center;
  background:radial-gradient(circle at top,var(--card-lift-top),var(--card-bottom) 68%)
}

#mosaic .start-screen.hidden,
#mosaic .completion-screen.hidden{display:none}

#mosaic .overlay-content{
  width:min(100%,580px);
  padding:clamp(18px,4vw,34px);
  border:2px solid var(--gold);
  border-radius:14px;
  background:var(--card-bottom);
  box-shadow:0 16px 45px rgba(0,0,0,.78)
}

#mosaic .overlay-kicker{
  margin:0 0 8px;color:var(--muted);font-size:.75rem;
  letter-spacing:.18em;text-transform:uppercase
}

#mosaic .overlay-content h2{
  margin:0 0 13px;
  color:var(--gold-light);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.65rem,6vw,3.2rem);
  font-weight:500;
  line-height:1.05;
  text-transform:uppercase
}

#mosaic .overlay-content p{
  margin:0 auto 18px;color:var(--cream);
  font-size:clamp(.9rem,2.8vw,1.08rem);line-height:1.55;max-width:none
}

#mosaic .final-time{
  margin:6px 0 16px;color:var(--gold-light);
  font-size:clamp(2rem,9vw,4rem);font-weight:bold;letter-spacing:.05em
}

#mosaic .controls{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px
}

#mosaic .eden-button{
  min-width:170px;
  padding:12px 20px;
  border:1px solid var(--gold-light);
  border-radius:8px;
  color:#181105;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:bold;
  cursor:pointer;
  background:linear-gradient(180deg,#f4dc8e 0%,#d2a13d 58%,#98681f 100%);
  box-shadow:0 4px 0 #51370f,0 8px 16px rgba(0,0,0,.42);
  transition:transform 120ms ease,filter 120ms ease,box-shadow 120ms ease
}

#mosaic .eden-button:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
#mosaic .eden-button:active:not(:disabled){
  transform:translateY(2px);
  box-shadow:0 2px 0 #51370f,0 4px 10px rgba(0,0,0,.42)
}

#mosaic .eden-button.secondary{
  color:var(--cream);
  background:linear-gradient(var(--card-lift-top),var(--card-lift-bottom));
  box-shadow:0 4px 0 rgba(0,0,0,.55),0 8px 16px rgba(0,0,0,.42)
}

#mosaic .eden-button:disabled{cursor:not-allowed;filter:grayscale(1);opacity:.46}

#mosaic .instructions{
  width:min(100%,760px);
  margin:18px auto 0;
  padding:14px 16px;
  border-left:3px solid var(--gold);
  border-radius:6px;
  color:var(--muted);
  font-size:.95rem;
  line-height:1.55;
  background:rgba(0,0,0,.25)
}

#mosaic .instructions strong{color:var(--gold-light)}

#mosaic .site-footer{
  margin-top:20px;color:rgba(198,185,142,.7);font-size:.74rem;
  letter-spacing:.12em;text-align:center;text-transform:uppercase
}

@media (max-width:600px){
  #mosaic{padding:14px 10px}
  #mosaic .status-grid{gap:6px}
  #mosaic .status-card{padding:8px 4px}
  #mosaic .trial-panel{padding:10px;border-radius:10px}
  #mosaic .eden-button{width:100%;min-width:0}
  #mosaic .start-screen,
  #mosaic .completion-screen{padding:8px}
  #mosaic .overlay-content{padding:16px 12px}
}

@media (prefers-reduced-motion:reduce){
  #mosaic *,
  #mosaic *::before,
  #mosaic *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important
  }
}

/* The cloud reading on the dashboard is the only way in. It has to stay
   pixel-identical to the three readings beside it, so the button is stripped
   back to the bare glyph. */
.cloud-sigil{
  display:block;margin:0 auto;padding:0;border:0;
  background:none;color:inherit;font:inherit;line-height:inherit
}
.cloud-sigil:focus-visible{outline:2px solid #d7ef61;outline-offset:2px;border-radius:4px}