/* OPTIONAL — full styles for Codecraft CSS tab */

@import url('https://fonts.googleapis.com/css2?family=Dangrek&family=Caveat:wght@500;600&family=Nunito:wght@400;500;600;700&display=swap');

/* ========== DESIGN TOKENS (palette) ========== */
:root{
  --oat:#ECE4D5; --paper:#F7F2E9; --walnut:#8A6A4F; --amber:#E0A24E;
  --sienna:#C06B3A; --green:#66734F; --blue:#5E7C89; --pink:#A85E67; --ink:#34302A;
  --cork:#C7A26B;
  /* Knobs for the check-in screen layout */
  --chip-gap: 0.6rem;
  --chip-pad: 0.8rem 1rem;
}

/* ========== RESET ========== */
*{ margin:0; padding:0; box-sizing:border-box; }

/* ========== STAGE (centers the phone; flexbox per assignment) ========== */
#stage{
  font-family:'Nunito', system-ui, sans-serif;
  background:var(--oat);
  height:100vh; height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:0;
  overflow:hidden;
}
#phone-scaler{
  transform:scale(var(--fit));
  transform-origin:center center;
}
:root{ --fit:0.95; }
@media (min-height: 42rem){ :root{ --fit:0.86; } }
@media (min-height: 46rem){ :root{ --fit:0.94; } }
@media (min-height: 50rem){ :root{ --fit:1.00; } }
@media (min-height: 54rem){ :root{ --fit:1.06; } }
@media (min-height: 60rem){ :root{ --fit:1.14; } }
@media (max-height: 40rem){ :root{ --fit:0.80; } }
@media (max-height: 34rem){ :root{ --fit:0.68; } }

/* ========== PHONE FRAME (rem-based, not px) ========== */
#phone{
  width:22.5rem; height:48.75rem;
  background:
    radial-gradient(circle at 50% 20%, rgba(224,162,78,0.22) 0%, rgba(224,162,78,0) 46%),
    radial-gradient(circle at 12% 90%, rgba(192,107,58,0.18) 0%, rgba(192,107,58,0) 44%),
    radial-gradient(circle at 90% 80%, rgba(78,110,106,0.16) 0%, rgba(78,110,106,0) 46%),
    linear-gradient(160deg, #EFE6D6 0%, #E4D8C3 100%);
  border-radius:2.75rem; border:0.56rem solid var(--ink);
  overflow:hidden; position:relative; display:flex; flex-direction:column;
  box-shadow:0 1.1rem 2.5rem rgba(52,48,42,0.35);
}
#glow{
  position:absolute; top:0; left:0; right:0; height:7.5rem;
  background:radial-gradient(circle at 50% 0%, rgba(224,162,78,0.20) 0%, rgba(224,162,78,0) 75%);
  pointer-events:none; z-index:0;
}

/* ========== SCREEN SWITCHING ========== */
.screen{ display:none; flex:1; flex-direction:column; position:relative; z-index:1; height:100%; }
.active-screen{ display:flex; animation:fadeIn 0.35s ease; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* ========== SHARED CHROME (status bar, branding, menu) ========== */
.statusbar{
  height:1.5rem; display:flex; align-items:center; justify-content:space-between;
  padding:0.6rem 1.4rem 0; font-size:0.7rem; font-weight:600; color:var(--ink);
  position:relative; z-index:1;
}
.branding-row{ display:flex; align-items:center; justify-content:space-between; padding:0 1.05rem; position:relative; z-index:1; }
.branding-row .branding{ flex:1; padding:0; }
.branding{ text-align:center; padding:0 1.25rem; position:relative; z-index:1; }
.appname{ font-family:'Dangrek', system-ui, sans-serif; font-size:0.9rem; color:#A02020; letter-spacing:0.04em; line-height:1; }
.tagline{ font-family:'Caveat', cursive; font-size:1.05rem; color:#2C3E4A; font-weight:600; line-height:1.3; }

.navarrow{ background:none; border:none; padding:0; width:1.2rem; height:1.2rem;
  font-size:1rem; line-height:1; color:var(--walnut); opacity:0.55; cursor:pointer; flex-shrink:0; }
.navarrow:hover{ opacity:0.9; }
.navarrow.right{ text-align:right; }

.menurow{ display:flex; justify-content:space-between; align-items:center; padding:0 1.15rem; margin-top:-0.3rem; position:relative; z-index:2; }
.hamburger{ font-size:1.15rem; color:var(--ink); cursor:pointer; background:none; border:none; }
.journalbtn{ display:flex; align-items:center; gap:0.25rem; background:none; border:none; cursor:pointer;
  color:var(--walnut); font-family:'Nunito', system-ui, sans-serif; font-size:0.68rem; font-weight:700; }
.journalbtn .jicon{ font-size:0.95rem; }

.pagetitle{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.4rem; font-weight:400; color:var(--ink);
  text-align:center; padding:0.25rem 1rem 0.1rem; line-height:1.15; }
.quote{ font-family:'Caveat', cursive; font-size:1rem; color:var(--sienna); font-weight:600;
  text-align:center; padding:0 1.9rem 0.4rem; }

/* ========== SHARED COMPANION BAR (bottom of every screen) ========== */
.companion{ background:var(--ink); color:var(--paper); border-radius:1.13rem;
  margin:0.75rem 0.9rem 0.9rem; padding:1rem 1.13rem; display:flex; align-items:center; gap:0.6rem;
  min-height:4rem; box-shadow:0 0.4rem 1rem rgba(52,48,42,0.4); position:relative; z-index:1; cursor:pointer; }
.companion::before{ content:""; position:absolute; top:0; left:1rem; right:1rem; height:0.13rem; background:var(--walnut); border-radius:0.13rem; }
.companion input{ flex:1; min-width:0; border:none; background:transparent; color:var(--paper);
  font-family:'Nunito', system-ui, sans-serif; font-size:1rem; outline:none; line-height:1.4; height:1.5rem; padding:0; }
.companion input::placeholder{ color:#c9c2b6; }
.companion .sendbtn{ background:var(--sienna); color:var(--paper); border:none; border-radius:0.63rem;
  padding:0.56rem 1rem; font-size:0.8rem; font-weight:700; cursor:pointer; }

.content{ flex:1; overflow-y:auto; padding:0.4rem 0.9rem 0; display:flex; flex-direction:column; gap:1rem; position:relative; z-index:1; }

#phone.on-welcome .statusbar{ display:none; }

/* The new seamless soft wash that applies to the whole phone during the intro flow */
#phone.on-intro-flow::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 0% 0%, rgba(168,94,103,0.18) 0%, transparent 60%),
    radial-gradient(circle at 100% 0%, rgba(224,162,78,0.22) 0%, transparent 60%),
    radial-gradient(circle at 0% 100%, rgba(224,162,78,0.22) 0%, transparent 60%),
    radial-gradient(circle at 100% 100%, rgba(168,94,103,0.18) 0%, transparent 60%);
  opacity: 1;
  transition: background 0.3s ease;
}

/* ========== WELCOME / SPLASH SCREEN ========== */
#screen-welcome{ justify-content:center; align-items:center; padding:1.5rem 1.5rem 2rem; text-align:center; gap:1rem; position:relative; overflow:hidden; }
.spotlights{ position:absolute; inset:0; top:-2.5rem; pointer-events:none; z-index:0; }
.spotlights span{ position:absolute; width:95%; height:85%; filter:blur(22px); }
.spotlights .c-tl{ top:-16%; left:-20%;  background:radial-gradient(circle at 0% 0%, var(--pink) 0%, rgba(168,94,103,0.5) 34%, transparent 68%); }
.spotlights .c-tr{ top:-16%; right:-20%; background:radial-gradient(circle at 100% 0%, var(--amber) 0%, rgba(224,162,78,0.5) 34%, transparent 68%); }
.spotlights .c-bl{ bottom:-16%; left:-20%; background:radial-gradient(circle at 0% 100%, var(--amber) 0%, rgba(224,162,78,0.5) 34%, transparent 68%); }
.spotlights .c-br{ bottom:-16%; right:-20%;background:radial-gradient(circle at 100% 100%, var(--pink) 0%, rgba(168,94,103,0.5) 34%, transparent 68%); }
.spotlights .top-wash{ top:0; left:0; width:100%; height:100%;
  background:linear-gradient(135deg, rgba(168,94,103,0.35), rgba(224,162,78,0.28) 50%, rgba(168,94,103,0.35)); filter:blur(30px); }
.welcome-couch{ width:96%; max-width:23rem; height:auto; position:relative; z-index:1;
  filter:drop-shadow(0 0.8rem 1.6rem rgba(52,48,42,0.4)); }
.welcome-hook{
  --l1-x: 17%;
  --l2-x: 15%;
  --l3-x: 15%;
  --hook-y: -3rem;
  --step-gap: 0.5rem;
  font-family:'Dangrek', system-ui, sans-serif; font-size:1.35rem; font-weight:400; color:black;
  line-height:1.6; position:relative; z-index:1; text-shadow:0 0.06rem 0.3rem rgba(247,242,233,0.6);
  margin-top:calc(0.5rem + var(--hook-y)); display:flex; flex-direction:column; align-items:stretch;
  text-align:left; width:100%; max-width:20rem; gap:var(--step-gap);
}
.welcome-hook .l1{ margin-left:var(--l1-x); }
.welcome-hook .l2{ margin-left:var(--l2-x); }
.welcome-hook .l3{ margin-left:var(--l3-x); font-size:1.5rem; color:black; line-height:1.5; white-space:nowrap; }
.welcome-hook .opt{ color:#A02020; }
.welcome-hook em{ font-style:italic; color:black; font-size:1.35rem; }
.welcome-hook .dots{ font-size:1.9rem; letter-spacing:0.1em; color:black; }
.welcome-hook .edots{ font-size:1.35rem; letter-spacing:0.1em; color:black; font-style:italic; }
.welcome-sub{ font-family:'Caveat', cursive; font-size:1.5rem; color:#2C3E4A; font-weight:600; z-index:1; text-shadow:0 0.06rem 0.3rem rgba(247,242,233,0.7); position:absolute; top:1.8rem; left:0; right:0; }

/* ========== CHEERLEADER INTRO SCREEN ========== */
#screen-cheer-intro{
  justify-content:space-between; position:relative; overflow:hidden;
}
#screen-cheer-intro > *{ position:relative; z-index:1; }

.cheer-content{
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-start; padding:1.5rem 2rem 1rem; gap:0.85rem; text-align:center;
  overflow-y:auto;
}
.cheer-couch{
  width:38%; max-width:9rem; height:auto;
  filter:drop-shadow(0 0.6rem 1.2rem rgba(52,48,42,0.3));
  margin-bottom:0.1rem;
}
.cheer-title{
  font-family:'Dangrek', system-ui, sans-serif; font-size:1.7rem; font-weight:400;
  color:var(--ink); line-height:1.3; max-width:17rem;
}
.cheer-sub{
  font-family:'Nunito', system-ui, sans-serif; font-size:0.92rem; color:var(--ink);
  line-height:1.5; opacity:0.85; max-width:16rem;
}
.cheer-caveat{
  font-family:'Caveat', cursive; font-size:1.3rem; color:var(--green);
  font-weight:600; margin-top:0.15rem;
}
.cheer-name-input{
  width:14.5rem; margin-top:0.3rem; border:0.13rem solid var(--green);
  border-radius:62.4rem; background:var(--paper); padding:0.7rem 1.1rem;
  font-family:'Nunito', system-ui, sans-serif; font-size:1rem; color:var(--ink);
  text-align:center; outline:none; box-shadow:0 0.2rem 0.5rem rgba(52,48,42,0.15);
}
.cheer-name-input::placeholder{ color:var(--walnut); opacity:0.8; }
.cheer-name-input:focus{ border-color:var(--sienna); }

.intro-actions{ display:flex; flex-direction:column; align-items:center; padding:0 1.9rem 2.75rem; }
.intro-actions button{ width:14.5rem; border:none; border-radius:62.4rem; padding:0.88rem 0;
  font-family:'Nunito', system-ui, sans-serif; font-size:1.06rem; font-weight:600; cursor:pointer; letter-spacing:0.02em; }
.intro-actions .share{ background:var(--sienna); color:var(--paper); box-shadow:0 0.4rem 1rem rgba(192,107,58,0.32); }

/* ========== POSITIVE CHECK-IN SCREEN ========== */
.quiet-exit {
  background: transparent;
  border: none;
  color: var(--walnut);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 0.5rem;
  opacity: 0.8;
}

#screen-checkin {
  justify-content: flex-start;
  position: relative;
  overflow: hidden;
}
#screen-checkin > * { position: relative; z-index: 1; }

.checkin-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 2rem 0;
  text-align: center;
  gap: 1rem;
}
.cheer-opener-title{
  font-family:'Dangrek', system-ui, sans-serif; font-size:2.2rem; font-weight:400;
  color:var(--ink); line-height:1.3; max-width:17rem;
}

.intention-chips {
  display: flex;
  flex-direction: column;
  gap: var(--chip-gap);
  width: 100%;
  max-width: 16rem;
  margin-top: 0.5rem;
}

.ichip {
  background: var(--paper);
  border: 0.13rem solid #ddd2bd;
  border-radius: 0.75rem;
  padding: var(--chip-pad);
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 0.15rem 0.4rem rgba(52,48,42,0.1);
  transition: transform 0.1s, border-color 0.2s;
}
.ichip:active { transform: scale(0.98); }
.ichip:hover { border-color: var(--green); }

/* Fixed Accessibility Contrast */
.jot-input {
  width: 100%;
  max-width: 16rem;
  margin-top: 0.8rem;
  border: none;
  border-bottom: 0.13rem dashed var(--ink); 
  background: transparent;
  padding: 0.5rem 0.2rem;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  outline: none;
}
.jot-input::placeholder { color: var(--ink); opacity: 0.7; font-weight: 500; }
.jot-input:focus { border-bottom-style: solid; opacity: 1; }

/* ========== HOME SCREEN ========== */
.mapbox{ height:11.25rem; flex-shrink:0; border-radius:0.75rem; border:0.13rem solid var(--ink); overflow:hidden;
  box-shadow:0 0.2rem 0.6rem rgba(52,48,42,0.22); position:relative; cursor:pointer; }
.mapbox img{ width:100%; height:100%; object-fit:cover; display:block; }
.map-tap{ position:absolute; bottom:0.5rem; right:0.5rem; background:rgba(52,48,42,0.8); color:var(--paper);
  font-family:'Nunito', system-ui, sans-serif; font-size:0.6rem; font-weight:700; padding:0.2rem 0.5rem; border-radius:0.75rem; }
.highlights-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0.4rem; }
.highlight{ background:var(--paper); border-radius:0.5rem; box-shadow:0 0.13rem 0.4rem rgba(52,48,42,0.18);
  border-left:0.19rem solid var(--green); font-size:0.56rem; font-weight:600; color:var(--ink); padding:0.4rem; line-height:1.2;
  height:2.6rem; display:flex; align-items:center; }
.highlight.b{ border-left-color:var(--blue); }
.highlight.p{ border-left-color:var(--pink); }
.divider{ height:0.13rem; background:var(--walnut); opacity:0.35; border-radius:0.13rem; margin:0.13rem 0.4rem; }
.subheader{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.06rem; font-weight:400; color:var(--ink); text-align:center; }
.navlinks{ display:flex; justify-content:space-around; gap:0.5rem; }
.navlink{ display:flex; flex-direction:column; align-items:center; gap:0.4rem; cursor:pointer; }
.navlink span{ font-size:0.63rem; font-weight:700; color:var(--ink); text-align:center; }
.shape{ width:4rem; height:4rem; background-size:cover; background-position:center; box-shadow:0 0.25rem 0.6rem rgba(52,48,42,0.28); }
.shape.circle{ border-radius:50%; border:0.13rem solid var(--ink); }
.shape.squircle{ border-radius:1.4rem; border:0.13rem solid var(--ink); }
.shape.blob{ border:0.13rem solid var(--ink); border-radius:58% 42% 63% 37% / 41% 46% 54% 59%; }

/* ========== MIND / BODY SCREEN ========== */
.hero{ height:11.25rem; border-radius:0.75rem; border:0.13rem solid var(--ink); overflow:hidden; box-shadow:0 0.2rem 0.6rem rgba(52,48,42,0.22); }
.hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.listwrap{ position:relative; }
.optionlist{ background:var(--paper); border-radius:0.75rem; border:0.13rem solid var(--ink);
  box-shadow:0 0.2rem 0.6rem rgba(52,48,42,0.22); overflow-y:auto; max-height:14rem; }
.optionrow{ display:flex; align-items:center; justify-content:space-between; padding:0.94rem 1rem;
  min-height:3rem; border-bottom:0.06rem solid var(--oat); cursor:pointer; }
.optionrow:last-child{ border-bottom:none; }
.optionrow .label{ font-size:0.94rem; font-weight:700; color:var(--ink); }
.optionrow .chevron{ font-size:1rem; color:var(--sienna); font-weight:700; }

/* ========== ACTIVITY DETAIL POPUP (Mind/Body — corkboard-card style) ========== */
#activity-modal, #filter-modal, #share-modal{
  position:absolute; inset:0; z-index:100;
  display:none; align-items:center; justify-content:center;
  padding:1.5rem;
}
#activity-modal.open, #filter-modal.open, #share-modal.open{ display:flex; }
.activity-backdrop, .filter-backdrop, .share-backdrop{
  position:absolute; inset:0; background:rgba(52,48,42,0.45);
}
.activity-card, .filter-card, .share-card{
  position:relative; z-index:1;
  width:100%; max-width:16.5rem; max-height:85%; overflow-y:auto;
  background:var(--paper);
  border-radius:0.5rem;
  border:0.13rem solid var(--ink);
  box-shadow:0 0.6rem 1.4rem rgba(52,48,42,0.4);
  padding:1.4rem 1.15rem 1.15rem;
  display:flex; flex-direction:column;
  animation:popIn 0.25s ease;
}
@keyframes popIn{ from{ opacity:0; transform:scale(0.94); } to{ opacity:1; transform:scale(1); } }
/* pushpin dot, echoing the corkboard cards on the Knowledge Hub */
.activity-card::before, .filter-card::before, .share-card::before{
  content:""; position:absolute; top:-0.45rem; left:50%; transform:translateX(-50%);
  width:0.9rem; height:0.9rem; border-radius:50%;
  box-shadow:0 0.13rem 0.19rem rgba(0,0,0,0.4);
}
.activity-card::before{ background:radial-gradient(circle at 35% 35%, #8fc98f, #4a7d4a); }
.filter-card::before{ background:radial-gradient(circle at 35% 35%, #f0c078, #d69022); }
.share-card::before{ background:radial-gradient(circle at 35% 35%, #8fb0c9, #3f6f89); }

.activity-close, .filter-close, .share-close{
  position:absolute; top:0.4rem; right:0.6rem;
  background:none; border:none; font-size:1.25rem; color:var(--ink);
  cursor:pointer; line-height:1; z-index:2;
}
.activity-tag, .filter-modal-tag, .share-modal-tag{
  align-self:flex-start;
  font-size:0.55rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  padding:0.15rem 0.45rem; border-radius:0.25rem;
  margin-bottom:0.5rem;
}
.activity-tag{ background:#dbe6d2; color:#3b6d11; }
.filter-modal-tag{ background:#efe0c0; color:#854f0b; }
.share-modal-tag{ background:#d5e2ea; color:#185fa5; }

.activity-name, .filter-modal-title, .share-modal-title{
  font-family:'Dangrek', system-ui, sans-serif; font-weight:400;
  font-size:1.45rem; color:var(--ink); line-height:1.2;
  margin-bottom:0.5rem;
}
.activity-body{
  font-family:'Nunito', system-ui, sans-serif;
  font-size:0.82rem; color:var(--ink); line-height:1.5;
  margin-bottom:0.75rem;
}
.activity-why{
  background:var(--oat); border-radius:0.5rem;
  padding:0.6rem 0.7rem; margin-bottom:1rem;
}
.activity-why-label{
  display:block;
  font-family:'Caveat', cursive; font-size:1.05rem; color:var(--green); font-weight:600;
  margin-bottom:0.1rem;
}
.activity-why-text{
  font-family:'Nunito', system-ui, sans-serif;
  font-size:0.75rem; color:var(--ink); line-height:1.4;
}
.activity-action{
  align-self:stretch;
  background:var(--sienna); color:var(--paper);
  border:none; border-radius:62.4rem;
  padding:0.7rem 0; font-family:'Nunito', system-ui, sans-serif;
  font-size:0.95rem; font-weight:700; cursor:pointer;
  box-shadow:0 0.3rem 0.8rem rgba(192,107,58,0.3);
}
.activity-action:active{ transform:scale(0.98); }

/* ========== CHAT ROOMS SCREEN ========== */
.roomstab{ display:flex; align-items:center; gap:0.3rem; background:var(--blue); color:var(--paper);
  border:none; border-radius:62.4rem; padding:0.3rem 0.7rem; font-size:0.7rem; font-weight:700; cursor:pointer;
  box-shadow:0 0.13rem 0.4rem rgba(52,48,42,0.25); }
.campfire{ display:flex; align-items:center; gap:0.6rem; color:var(--paper); border-radius:0.75rem;
  border:0.13rem solid var(--ink); padding:1rem; cursor:pointer; box-shadow:0 0.2rem 0.6rem rgba(52,48,42,0.25);
  position:relative; overflow:hidden; min-height:5.75rem; }
.campfire .cf-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.campfire::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(52,48,42,0.72) 0%, rgba(52,48,42,0.45) 55%, rgba(52,48,42,0.25) 100%); }
.campfire .cf-text{ flex:1; position:relative; z-index:2; }
.campfire .cf-title{ font-size:1.06rem; font-weight:700; line-height:1.1; text-shadow:0 0.06rem 0.25rem rgba(0,0,0,0.5); }
.campfire .cf-sub{ font-family:'Caveat', cursive; font-size:0.94rem; color:#f6e3d4; text-shadow:0 0.06rem 0.25rem rgba(0,0,0,0.5); }
.campfire .cf-go{ font-size:1.13rem; font-weight:700; position:relative; z-index:2; text-shadow:0 0.06rem 0.25rem rgba(0,0,0,0.5); }
.feedlabel{ font-family:'Dangrek', system-ui, sans-serif; font-size:0.9rem; color:var(--ink); padding-left:0.13rem; }

.post.meetup{ border:0.13rem solid var(--green); background:#f2f5ec; }
.meetup-tag{ display:inline-block; background:var(--green); color:var(--paper); font-family:'Nunito', system-ui, sans-serif;
  font-size:0.6rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; padding:0.15rem 0.5rem; border-radius:0.4rem; margin-bottom:0.4rem; }
.meetup-title{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.1rem; color:var(--ink); margin-bottom:0.3rem; }
.meetup-foot{ display:flex; justify-content:space-between; align-items:center; margin-top:0.5rem; font-family:'Nunito', system-ui, sans-serif; font-size:0.72rem; color:var(--walnut); font-weight:600; }
.meetup-join{ background:var(--green); color:var(--paper); padding:0.3rem 0.7rem; border-radius:0.6rem; cursor:pointer; }

.dog-photo{ background:linear-gradient(160deg,#bcd3e0,#9fbccb); position:relative; }
.dog{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:5.5rem; height:5rem; }
.dog-ear{ position:absolute; top:1rem; width:1.6rem; height:2.6rem; background:#8a5a3c; border-radius:50% 50% 45% 45%; }
.dog-ear.l{ left:0.1rem; transform:rotate(-16deg); }
.dog-ear.r{ right:0.1rem; transform:rotate(16deg); }
.dog-face{ position:absolute; top:0.8rem; left:50%; transform:translateX(-50%); width:3.6rem; height:3.8rem; background:#a9713f; border-radius:48% 48% 45% 45%; }
.dog-eye{ position:absolute; top:1.1rem; width:0.5rem; height:0.5rem; background:#34302A; border-radius:50%; }
.dog-eye.l{ left:0.8rem; } .dog-eye.r{ right:0.8rem; }
.dog-snout{ position:absolute; bottom:0.5rem; left:50%; transform:translateX(-50%); width:1.5rem; height:1.2rem; background:#c99a6a; border-radius:50%; }
.dog-snout::after{ content:""; position:absolute; top:0.15rem; left:50%; transform:translateX(-50%); width:0.6rem; height:0.45rem; background:#34302A; border-radius:50%; }
.post{ background:var(--paper); border-radius:0.75rem; border:0.09rem solid #ddd2bd; box-shadow:0 0.13rem 0.45rem rgba(52,48,42,0.12); padding:0.7rem 0.8rem; }
.post-head{ display:flex; align-items:center; gap:0.5rem; margin-bottom:0.4rem; }
.avatar{ width:1.6rem; height:1.6rem; border-radius:50%; flex-shrink:0; }
.a1{ background:var(--green); } .a2{ background:var(--pink); } .a3{ background:var(--blue); }
.post-user{ font-size:0.75rem; font-weight:700; color:var(--ink); }
.post-time{ font-size:0.63rem; color:#9c9384; }
.post-body{ font-size:0.78rem; color:var(--ink); line-height:1.4; }
.post-img{ margin-top:0.5rem; height:7.5rem; border-radius:0.5rem; overflow:hidden; background:#cdbfa6; display:flex; align-items:center; justify-content:center; }
.post-img img{ width:100%; height:100%; object-fit:cover; }
.post-actions{ display:flex; gap:1rem; margin-top:0.5rem; }
.post-actions span{ font-size:0.7rem; color:var(--walnut); font-weight:600; }

/* ========== KNOWLEDGE HUB SCREEN ========== */
#screen-knowledge .menurow{ margin-top:1rem; }
#screen-knowledge .pagetitle{ margin-top:0.6rem; }
#screen-knowledge .quote{ margin-bottom:0.4rem; }
#screen-knowledge .companion{ margin-bottom:3rem; }
.sharebtn{ background:var(--green); color:var(--paper); border:none; border-radius:62.4rem;
  padding:0.3rem 0.75rem; font-size:0.7rem; font-weight:700; cursor:pointer; box-shadow:0 0.13rem 0.4rem rgba(52,48,42,0.25); }
.board{ height:30rem; flex-shrink:0; overflow-y:auto; margin:0rem 0.75rem 0; border-radius:0.75rem; border:0.19rem solid #6f4f2e;
  background-color:var(--cork);
  background-image:
    radial-gradient(rgba(120,85,40,0.35) 0.06rem, transparent 0.1rem),
    radial-gradient(rgba(160,120,70,0.30) 0.06rem, transparent 0.1rem);
  background-size:0.56rem 0.56rem, 0.81rem 0.81rem; background-position:0 0, 0.3rem 0.4rem;
  box-shadow:inset 0 0.13rem 0.6rem rgba(80,55,25,0.4);
  padding:0.75rem 0.6rem; display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; align-content:start; }
.kcard{ background:var(--paper); border-radius:0.38rem; padding:0.56rem 0.56rem 0.6rem; position:relative;
  box-shadow:0 0.2rem 0.5rem rgba(52,48,42,0.3); min-height:6rem; display:flex; flex-direction:column; }
.kcard::before{ content:""; position:absolute; top:-0.3rem; left:50%; transform:translateX(-50%);
  width:0.75rem; height:0.75rem; border-radius:50%; background:radial-gradient(circle at 35% 35%, #f08a8a, #c0392b); box-shadow:0 0.13rem 0.19rem rgba(0,0,0,0.4); }
.kcard:nth-child(3n)::before{ background:radial-gradient(circle at 35% 35%, #7fb3e0, #2c6ca3); }
.kcard:nth-child(3n+1)::before{ background:radial-gradient(circle at 35% 35%, #8fc98f, #4a7d4a); }
.ktype{ font-size:0.53rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:0.13rem 0.4rem; border-radius:0.25rem; align-self:flex-start; margin-bottom:0.4rem; }
.t-video{ background:#f3d9cf; color:#993c1d; } .t-read{ background:#dbe6d2; color:#3b6d11; }
.t-link{ background:#d5e2ea; color:#185fa5; } .t-audio{ background:#efe0c0; color:#854f0b; }
.t-support{ background:#f4cdd3; color:#993556; }
.kthumb{ height:2.5rem; border-radius:0.25rem; margin-bottom:0.4rem; background:linear-gradient(135deg,#cdbfa6,#b7a68a); display:flex; align-items:center; justify-content:center; font-size:1rem; }
.ktitle{ font-size:0.7rem; font-weight:700; color:var(--ink); line-height:1.25; }
.kmeta{ font-size:0.56rem; color:#9c9384; margin-top:auto; }
.kcard.support{ background:#fbeef0; border:0.09rem solid var(--pink); grid-column:1 / -1; min-height:auto; }
.kcard.support::before{ background:radial-gradient(circle at 35% 35%, #e88f9a, #a83a4a); }
.kcard.support .ktitle{ font-size:0.75rem; }
.kcard.support .kline{ font-size:0.63rem; color:var(--ink); margin-top:0.19rem; }
.kcard.support .kline strong{ color:var(--pink); }

/* ========== COMPANION CHAT SCREEN ========== */
.msg.bot.greeting-msg{
  background:var(--green);
  color:var(--paper);
  border-color:var(--green);
}
.loose-bubbles{
  flex-shrink:0;
  padding:0.75rem 1.1rem 0;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}
.chathead{ display:flex; align-items:center; gap:0.6rem; padding:1.2rem 1.15rem 0.4rem; position:relative; z-index:1; } 
.chathead .cavatar{ width:2.75rem; height:2.75rem; border-radius:50%; object-fit:cover; border:0.13rem solid var(--ink); background:var(--paper); }
.chathead .cname{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.25rem; color:var(--ink); line-height:1; }
.chathead .cstatus{ font-family:'Caveat', cursive; font-size:1rem; color:var(--green); }
.thread{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:0.75rem;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  position:relative;
  z-index:1;
  margin:0.5rem 0.9rem 0;
  background:var(--paper);
  border:0.13rem solid var(--ink);
  border-radius:0.75rem;
  box-shadow:0 0.25rem 0.5rem rgba(52,48,42,0.15);
}
.msg{ max-width:76%; padding:0.63rem 0.8rem; font-size:0.8rem; line-height:1.4; box-shadow:0 0.13rem 0.4rem rgba(52,48,42,0.15); font-family:'Nunito', system-ui, sans-serif; }
.msg.bot{ align-self:flex-start; background:var(--paper); color:var(--ink); border-radius:0.88rem 0.88rem 0.88rem 0.25rem; border:0.06rem solid #e0d5c0; }
.msg.you{ align-self:flex-end; background:var(--sienna); color:var(--paper); border-radius:0.88rem 0.88rem 0.25rem 0.88rem; }
.msgrow{ display:flex; align-items:flex-end; gap:0.44rem; max-width:100%; align-self:flex-start; }
.msgrow .mini{ width:1.6rem; height:1.6rem; border-radius:50%; object-fit:cover; border:0.09rem solid var(--ink); background:var(--paper); flex-shrink:0; }

/* feeling chips */
.feelings{ display:flex; flex-wrap:wrap; gap:0.4rem; padding:0.1rem 0 0.2rem; }
.fchip{ background:var(--paper); border:0.09rem solid #ddd2bd; border-radius:1.3rem; padding:0.4rem 0.75rem;
  font-family:'Nunito', system-ui, sans-serif; font-size:0.7rem; font-weight:700; color:var(--ink); cursor:pointer; }
.fchip.pos{ border:0.13rem solid var(--green); color:#3b6d11; }
.fchip.other{ background:var(--oat); border:0.09rem dashed var(--walnut); color:var(--walnut); }

/* ========== LEFT DRAWER (app menu) ========== */
#scrim{ position:absolute; inset:0; background:rgba(52,48,42,0.45); opacity:0; pointer-events:none; transition:opacity 0.25s; z-index:5; }
#scrim.open{ opacity:1; pointer-events:auto; }
#menu-drawer{ position:absolute; top:0; left:0; height:100%; width:13.75rem; background:var(--paper);
  border-right:0.19rem solid var(--ink); transform:translateX(-100%); transition:transform 0.25s; z-index:6;
  display:flex; flex-direction:column; padding:1.5rem 1rem; box-shadow:0.5rem 0 1.5rem rgba(52,48,42,0.3); }
#menu-drawer.open{ transform:translateX(0); }
#menu-drawer h3{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.25rem; color:#A02020; margin-bottom:0.25rem; }
#menu-drawer .dsub{ font-family:'Caveat', cursive; font-size:1.2rem; color:#2C3E4A; margin-bottom:1rem; }
.navitem{ display:flex; align-items:center; gap:0.6rem; padding:0.8rem 0.5rem; border-radius:0.5rem; cursor:pointer; font-size:0.9rem; font-weight:600; color:var(--ink); border-bottom:0.06rem solid var(--oat); }
.navitem:last-child{ border-bottom:none; }
.navitem .ndot{ width:0.6rem; height:0.6rem; border-radius:50%; flex-shrink:0; }

/* ========== RIGHT DRAWER (topic rooms) ========== */
#rooms-drawer{ position:absolute; top:0; right:0; height:100%; width:13.13rem; background:var(--paper);
  border-left:0.19rem solid var(--ink); transform:translateX(100%); transition:transform 0.25s; z-index:6;
  display:flex; flex-direction:column; padding:1.25rem 0.9rem; box-shadow:-0.5rem 0 1.5rem rgba(52,48,42,0.3); overflow-y:auto; }
#rooms-drawer.open{ transform:translateX(0); }
#rooms-drawer h3{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.06rem; color:var(--ink); margin-bottom:0.25rem; }
#rooms-drawer .dsub{ font-family:'Caveat', cursive; font-size:1.2rem; color:var(--sienna); margin-bottom:0.9rem; }
.roomrow{ display:flex; align-items:center; gap:0.5rem; padding:0.7rem 0.5rem; border-radius:0.5rem; cursor:pointer; }
.roomrow .roomdot{ width:0.56rem; height:0.56rem; border-radius:50%; flex-shrink:0; }
.roomrow .rn{ font-size:0.8rem; font-weight:600; color:var(--ink); }
.drawer-close{ position:absolute; top:0.9rem; right:0.9rem; font-size:1.13rem; color:var(--ink); cursor:pointer; background:none; border:none; }

/* ========== JOURNAL PANEL ========== */
#journal-panel{ position:absolute; left:0; right:0; bottom:0; height:78%; background:var(--paper);
  border-top:0.19rem solid var(--ink); border-radius:1.4rem 1.4rem 0 0; transform:translateY(100%);
  transition:transform 0.28s; z-index:6; display:flex; flex-direction:column; padding:1.1rem 1.15rem;
  box-shadow:0 -0.5rem 1.5rem rgba(52,48,42,0.3); }
#journal-panel.open{ transform:translateY(0); }
.journal-head{ display:flex; justify-content:space-between; align-items:flex-start; }
.journal-head h3{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.1rem; color:var(--ink); }
.journal-sub{ font-family:'Caveat', cursive; font-size:1rem; color:var(--green); font-weight:600; margin-top:-0.2rem; }
.journal-entries{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:0.5rem; margin:0.5rem 0; }
.jentry{ background:#fff; border:0.06rem solid #e0d5c0; border-radius:0.63rem; padding:0.5rem 0.63rem; }
.jentry-top{ display:flex; justify-content:space-between; font-size:0.63rem; color:#9c9384; }
.jentry-feeling{ font-weight:700; }
.jentry-feeling.pos{ color:#3b6d11; }
.jentry-feeling.neu{ color:var(--sienna); }
.jentry-note{ font-size:0.7rem; color:var(--ink); margin-top:0.19rem; }
.journal-compose{ border-top:0.06rem solid #ddd2bd; padding-top:0.63rem; display:flex; flex-direction:column; gap:0.4rem; }
.journal-compose label{ font-size:0.7rem; color:var(--walnut); font-weight:600; }
.journal-compose textarea{ width:100%; border:0.06rem solid #ddd2bd; border-radius:0.63rem; padding:0.5rem 0.63rem;
  font-family:'Nunito', system-ui, sans-serif; font-size:0.7rem; color:var(--ink); resize:none; }
.journal-savebtn{ align-self:flex-end; background:var(--sienna); color:var(--paper); border:none; border-radius:0.5rem;
  padding:0.4rem 0.9rem; font-size:0.68rem; font-weight:700; cursor:pointer; }

/* ===== per-screen spacing tuning ===== */
#screen-chatrooms .content{ gap:0.85rem; padding-bottom:0; }
#screen-chatrooms .companion{ margin-top:0.35rem; margin-bottom:2.5rem; }

#screen-companion{ --header-drop:0rem; --thread-top:0.9rem; --chat-bottom:3rem; --compose-height:10rem; } 
#screen-companion .menurow{ margin-top:var(--header-drop); }
#screen-companion .thread{ padding-top:var(--thread-top); }
#screen-companion .companion{ min-height:10rem; padding:1.3rem 1.4rem; border-radius:1.5rem; flex-direction:column; align-items:stretch; gap:0.6rem; margin:0.75rem 0.9rem 3rem; }
#screen-companion .companion textarea{ flex:1; width:100%; border:none; background:transparent; color:var(--paper);
  font-family:'Nunito', system-ui, sans-serif; font-size:1.3rem; outline:none; resize:none; line-height:1.4; }
#screen-companion .companion textarea::placeholder{ color:#c9c2b6; }
#screen-companion .companion::before{ display:none; }
#screen-companion .companion .sendbtn{ padding:0.9rem 1.7rem; font-size:1.05rem; align-self:flex-end; }

#screen-home .content{ gap:1.15rem; }
#screen-home .divider{ margin-top:0.7rem; }

#screen-mindbody .optionlist{ max-height:19rem; }

@media (max-width: 600px){
  #stage{ padding:0; }
  #phone-scaler{ transform:none; width:100%; height:100dvh; }
  #phone{
    width:100%; height:100dvh;
    border:none; border-radius:0;
    box-shadow:none;
  }
  .statusbar{ padding-top:0.4rem; }
}

#chat-output{
  flex:1;
  min-height:0;
  overflow-y:auto;
  margin:0.6rem 0.9rem 0;
  padding:0.75rem;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  background:var(--paper);
  border:0.13rem solid var(--ink);
  border-radius:0.75rem;
}

/* ========== OPTIONS NEAR BY — events list, filter + share ========== */
.events-head{ display:flex; align-items:center; justify-content:space-between; gap:0.5rem; flex-wrap:wrap; }
.events-label{ font-family:'Caveat', cursive; font-size:1.6rem; font-weight:600; color:var(--ink); }
.events-head-right{ display:flex; align-items:center; gap:0.4rem; position:relative; z-index:10; }
.filter-btn{ display:inline-flex; align-items:center; gap:0.3rem; background:var(--walnut); color:var(--paper);
  border:none; border-radius:62.4rem; padding:0.25rem 0.6rem; font-family:'Nunito', system-ui, sans-serif;
  font-size:0.65rem; font-weight:700; cursor:pointer; box-shadow:0 0.13rem 0.4rem rgba(52,48,42,0.25); }
.filter-btn .filter-icon{ display:inline-flex; align-items:center; margin-top:-0.05rem; }
.active-filter{ display:none; align-items:center; gap:0.3rem; background:var(--amber); color:var(--ink);
  border-radius:62.4rem; padding:0.25rem 0.6rem; font-size:0.68rem; font-weight:700; cursor:pointer; }
.active-filter .af-x{ font-size:0.85rem; }

.events-list{ display:flex; flex-direction:column; gap:0.5rem; max-height:16rem; overflow-y:auto; 
  padding:0.5rem; border:0.13rem solid var(--ink); border-radius:0.75rem; background:#faf7f2; }
.event-card{ display:flex; align-items:center; justify-content:space-between; gap:0.6rem;
  background:var(--paper); border:0.09rem solid #ddd2bd; border-left:0.25rem solid var(--green);
  border-radius:0.6rem; padding:0.6rem 0.7rem; box-shadow:0 0.13rem 0.45rem rgba(52,48,42,0.12); cursor:pointer; }
.event-card:nth-child(3n+2){ border-left-color:var(--blue); }
.event-card:nth-child(3n){ border-left-color:var(--pink); }
.event-card .ev-name{ font-size:0.85rem; font-weight:700; color:var(--ink); line-height:1.2; }
.event-card .ev-meta{ font-size:0.66rem; color:#9c9384; margin-top:0.15rem; }
.ev-tags{ display:flex; flex-direction:column; align-items:flex-end; gap:0.22rem; flex-shrink:0; }
.ev-tag{ font-size:0.53rem; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  padding:0.13rem 0.4rem; border-radius:0.25rem; background:#e7ecdd; color:#3b6d11; white-space:nowrap; }
.ev-tag.price{ background:#efe0c0; color:#854f0b; }

.events-empty{ display:none; flex-direction:column; align-items:center; gap:0.7rem; text-align:center;
  padding:1.6rem 1rem; background:var(--paper); border:0.13rem solid var(--ink); border-radius:0.75rem; }
.empty-line{ font-family:'Nunito', system-ui, sans-serif; font-size:0.9rem; font-weight:600; color:var(--ink); line-height:1.4; }
.empty-add{ background:var(--sienna); color:var(--paper); border:none; border-radius:62.4rem;
  padding:0.5rem 1.15rem; font-family:'Nunito', system-ui, sans-serif; font-size:0.8rem; font-weight:700; cursor:pointer;
  box-shadow:0 0.3rem 0.8rem rgba(192,107,58,0.3); }

/* --- filter window (activity-modal pattern) --- */
.filter-group{ margin-bottom:0.7rem; }
.filter-group-label{ display:block; font-family:'Caveat', cursive; font-size:1.05rem; color:var(--green); font-weight:600; margin-bottom:0.3rem; }
.filter-chips{ display:flex; flex-wrap:wrap; gap:0.35rem; }
.filter-chip{ background:var(--paper); border:0.09rem solid #ddd2bd; border-radius:1.3rem; padding:0.35rem 0.7rem;
  font-family:'Nunito', system-ui, sans-serif; font-size:0.72rem; font-weight:700; color:var(--ink); cursor:pointer; }
.filter-chip.all{ background:var(--oat); }
.filter-chip.active{ background:var(--green); color:var(--paper); border-color:var(--green); }

/* --- share window form --- */
.share-modal-sub{ font-family:'Nunito', system-ui, sans-serif; font-size:0.75rem; color:var(--ink); opacity:0.8; margin-bottom:0.8rem; }
.share-label{ display:block; font-family:'Nunito', system-ui, sans-serif; font-size:0.7rem; font-weight:700; color:var(--walnut); margin-bottom:0.25rem; }
.share-field{ width:100%; border:0.09rem solid #ddd2bd; border-radius:0.5rem; background:#fff; padding:0.5rem 0.6rem;
  font-family:'Nunito', system-ui, sans-serif; font-size:0.8rem; color:var(--ink); outline:none; margin-bottom:0.7rem; resize:none; }
.share-field:focus{ border-color:var(--sienna); }
.share-vibes{ display:flex; flex-wrap:wrap; gap:0.35rem; margin-bottom:0.7rem; }
.share-vibe{ background:var(--paper); border:0.09rem solid #ddd2bd; border-radius:1.3rem; padding:0.3rem 0.65rem;
  font-family:'Nunito', system-ui, sans-serif; font-size:0.7rem; font-weight:700; color:var(--ink); cursor:pointer; }
.share-vibe.selected{ background:var(--green); color:var(--paper); border-color:var(--green); }
.share-submit{ align-self:stretch; background:var(--sienna); color:var(--paper); border:none; border-radius:62.4rem;
  padding:0.7rem 0; font-family:'Nunito', system-ui, sans-serif; font-size:0.95rem; font-weight:700; cursor:pointer;
  box-shadow:0 0.3rem 0.8rem rgba(192,107,58,0.3); margin-top:0.2rem; }
.share-submit:active{ transform:scale(0.98); }
#share-thanks{ display:none; text-align:center; padding:0.5rem 0.3rem; }
.share-thanks-title{ font-family:'Dangrek', system-ui, sans-serif; font-size:1.5rem; color:var(--green); margin-bottom:0.4rem; }
.share-thanks-text{ font-family:'Nunito', system-ui, sans-serif; font-size:0.8rem; color:var(--ink); line-height:1.45; margin-bottom:0.9rem; }