:root{
  --teal: #96f2ee;
  --note-yellow: #fffb7d;
  --note-shadow: rgba(0,0,0,0.18);
}
*{box-sizing:border-box}
html,body,#root{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
.home{
  min-height:100vh;
  background:var(--teal);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:40px;
}
.faces{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  font-size: clamp(28px, 8vw, 72px);
  font-weight:700;
  color:#000;
  text-align:center;
  margin:0;
  /* keep faces visually behind notes and overlays */
  z-index:200;
  pointer-events: none;
}
.clocks{
  position:fixed;
  bottom:12px;
  right:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#000; /* black color as requested */
  font-size:12px;
  line-height:1;
  background:transparent;
  z-index:9999;
}
.clocks .clock{opacity:0.95}
.clocks .label{font-weight:700;margin-right:6px}
.notes-area{
  /* slightly larger workspace (clamped for mobile) so visitors can place notes across a bigger canvas */
  width: min(1600px, 95vw);
  background:transparent;
  margin: 0 auto;
  padding: 24px 12px 120px; /* leave room at bottom for CTA */
}
.note-form{
  display:flex;
  gap:12px;
  margin-bottom:12px;
}
.note-form textarea{
  flex:1;
  min-height:56px;
  padding:10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.12);
  resize:vertical;
}
.note-form button{
  background:#333;
  color:white;
  border:none;
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
}
.notes{
  position:relative;
  /* larger vertical workspace (85% of viewport) while still respecting max-width */
  min-height:85vh;
  border-radius:8px;
  /* ensure notes render above the faces */
  z-index:1000;
}

/* floating add button */
.add-btn{
  position:fixed;
  left:12px;
  top:12px;
  width:48px;
  height:48px;
  border-radius:50%;
  background: #ffffff;
  color: #0a0a0a;
  border: 1px solid rgba(0,0,0,0.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:28px; /* fallback spacing */
  line-height:1;
  cursor:pointer;
  z-index:10000;
  box-shadow: 0 6px 18px rgba(10,10,10,0.08);
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 120ms;
}

/* bottom CTA button */
.bottom-cta {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  z-index: 35; /* above clocks, below add button */
  pointer-events: none; /* let child control interaction */
}
.bottom-cta__link {
  pointer-events: auto;
  display: inline-block;
  background: #222;
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
  transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
  opacity: 0.98;
}
.bottom-cta__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}

.add-btn:hover{ transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(10,10,10,0.12); }
.add-btn:active{ transform: translateY(0) scale(0.99); }
.add-btn:focus{ outline: none; box-shadow: 0 0 0 4px rgba(100,200,190,0.18); }
/* SVG plus icon inside add button */
.add-btn svg{ width:22px; height:22px; display:block }
.add-btn svg line{ stroke: #96f2ee; }

/* overlay that appears when modal is open */
.overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.28);
  display:none;
  z-index: 9998; /* below modal but above most content */
}
.overlay[aria-hidden="false"], .overlay.open{ display:block }

/* modal for adding notes (hidden by default) */
.note-modal{
  position:fixed;
  left:12px;
  top:64px;
  width:320px;
  max-width:90%;
  background:rgba(255,255,255,0.96);
  border-radius:10px;
  padding:12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  display:none;
  z-index:9999;
}
.note-modal[aria-hidden="false"], .note-modal.open{ display:block }

.note-modal .note-form{
  display:flex;
  flex-direction:column;
}
.note-modal .note-form textarea{
  min-height:100px;
  resize:vertical;
  margin-bottom:8px;
}
.note-modal .controls{ display:flex; gap:8px; align-items:center }
.note-modal .controls .cancel{ background:transparent; border:1px solid rgba(0,0,0,0.08); padding:6px 10px; border-radius:8px; color:#222 }

/* sticky note styling (single, cleaned block) */
.note{
  width:200px;
  min-height:140px;
  padding:16px 14px 20px 14px;
  border-radius:10px;
  position:absolute;
  font-size:15px;
  overflow:hidden;
  white-space:pre-wrap;
  cursor:grab;
  touch-action:none;
  user-select:none;
  /* paper look */
  background: var(--note-yellow);
  background-image: linear-gradient(rgba(255,255,255,0.06), rgba(0,0,0,0.03));
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 8px 10px 24px var(--note-shadow), inset 0 -4px 8px rgba(0,0,0,0.04);
  transform: rotate(var(--rotate, 0deg));
  transform-origin: top left;
  transition: box-shadow 120ms, transform 120ms;
  font-family: 'Segoe Print', 'Comic Sans MS', 'Bradley Hand', cursive;
}

.note.dragging{
  cursor:grabbing;
  transform: rotate(var(--rotate, 0deg)) scale(1.02);
  box-shadow: 12px 14px 34px rgba(0,0,0,0.28);
}

/* simpler paper look: remove folded corner, keep classic sticky look */
.note{
  /* gentle paper grain + subtle hole shadow (first layer) */
  background-image:
    radial-gradient(circle at 50% 8%, rgba(0,0,0,0.14) 0, rgba(0,0,0,0.06) 18%, rgba(0,0,0,0) 30%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.02)),
    radial-gradient(circle at 10% 10%, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0) 18%);
  background-repeat: no-repeat, repeat, repeat;
  background-position: 50% 6px, center top, left top;
  background-size: 36px 20px, cover, 200px 200px;
}

/* minimalist pin: small circular head only (no stem) */
/* pin element (clickable) - replaced pseudo-element with real element for interactivity */
.note .pin{
  position: absolute;
  left: 50%;
  top: 3px; /* moved 2px lower */
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  z-index: 20;
  cursor: pointer;
  background-image: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.6) 0 18%, rgba(255,255,255,0) 20%), linear-gradient(var(--pin-color, #ff5b5b), var(--pin-color, #c33));
  background-repeat: no-repeat, no-repeat;
  background-size: 9px 9px, 9px 9px;
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
  display: inline-block;
  pointer-events: auto;
}

/* slightly darker edge to mimic paper */
.note p, .note div { position:relative }

/* bring-to-front and small drop animation when released */
.note.dropped{
  animation: dropbounce 260ms ease-out;
}
@keyframes dropbounce{
  0% { transform: rotate(var(--rotate, 0deg)) scale(1.03); }
  60% { transform: rotate(var(--rotate, 0deg)) scale(0.98); }
  100% { transform: rotate(var(--rotate, 0deg)) scale(1); }
}

.note .meta{
  position:absolute;
  bottom:6px;
  left:8px;
  font-size:11px;
  color:rgba(0,0,0,0.6);
}
.status{margin-left:8px;color:#333}

@media (max-width:520px){
  .home{ padding:16px }
  .faces{ font-size: clamp(20px, 12vw, 48px); top:45%; opacity:0.95 }
  .note-modal{ left:8px; right:8px; top:80px; width:calc(100% - 16px); }
  .notes{ min-height: calc(100vh - 220px); }
  /* make notes a bit more spacious on small screens */
  .note{ width:48%; min-height:120px; padding:12px }
  /* lift CTA above fixed controls on small screens */
  .bottom-cta { bottom: 76px; }
  .bottom-cta__link { padding: 8px 14px; font-size:14px }
}