:root{
  --cream:#fdf6ec;
  --warm-orange:#e8722c;
  --deep-maroon:#7a2e2e;
  --leaf-green:#5a7d4f;
  --gold:#d9a441;
  --text:#3a2c25;
  --card-bg:#ffffff;
  --radius:14px;
  --shadow:0 4px 14px rgba(0,0,0,0.08);
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Segoe UI',Roboto,Arial,sans-serif;
  background:var(--cream);
  color:var(--text);
}
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--deep-maroon);color:#fff;padding:14px 20px;flex-wrap:wrap;gap:10px;
}
.brand{color:#fff;font-size:1.3rem;font-weight:700;text-decoration:none;}
.nav a{color:#fff;text-decoration:none;margin-left:16px;font-size:0.95rem;}
.nav a:hover{text-decoration:underline;}
.container{max-width:1100px;margin:0 auto;padding:20px;}
.footer{text-align:center;padding:20px;color:#8a7a6e;font-size:0.85rem;}

h1,h2,h3{color:var(--deep-maroon);}

.btn{
  display:inline-block;background:var(--warm-orange);color:#fff;border:none;
  padding:12px 20px;border-radius:10px;font-size:1rem;cursor:pointer;text-decoration:none;
  font-weight:600;
}
.btn:hover{background:#d4621c;}
.btn.secondary{background:var(--leaf-green);}
.btn.disabled{background:#ccc;color:#888;cursor:not-allowed;pointer-events:none;}
.btn.small{padding:8px 14px;font-size:0.85rem;}

.card{
  background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px;margin-bottom:16px;
}

.grid{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}

.group-type-grid{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;
}
.group-type-card{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  border:2px solid #ddd;border-radius:12px;padding:12px 16px;cursor:pointer;
  flex:1;min-width:80px;text-align:center;transition:border-color 0.15s;
}
.group-type-card input[type=radio]{display:none;}
.group-type-card:has(input:checked){border-color:var(--warm-orange);background:#fff7f2;}
.gt-icon{font-size:1.6rem;}
.gt-label{font-size:0.8rem;font-weight:600;color:var(--deep-maroon);}

.game-card{
  text-align:center;padding:24px 16px;
}
.game-card .icon{font-size:2.6rem;}
.game-card p{font-size:0.9rem;color:#6b5d52;min-height:40px;}
.hint{font-size:0.8rem;color:#a36a3c;margin-top:6px;}

.member-card{
  text-align:center;
}
.member-card img{
  width:90px;height:90px;border-radius:50%;object-fit:cover;border:3px solid var(--gold);
}
.member-card.deceased img{filter:grayscale(60%);opacity:0.85;border-color:#999;}
.member-card.deceased .badge{color:#888;font-size:0.75rem;}

form input, form select, form textarea{
  width:100%;padding:10px;margin-bottom:12px;border:1px solid #ddd;border-radius:8px;font-size:1rem;
}
form label{font-weight:600;font-size:0.9rem;display:block;margin-bottom:4px;}

.tag{
  display:inline-block;background:#f1e4cf;color:var(--deep-maroon);
  padding:4px 10px;border-radius:20px;font-size:0.8rem;margin:2px;
}

.tree-wrap{overflow-x:auto;padding:10px 0;}
.tree-gen{display:flex;gap:24px;justify-content:center;margin-bottom:30px;flex-wrap:wrap;}

/* ---------- Visual generational tree (left-to-right, indented style) ---------- */
.tree-scroll{overflow-x:auto;padding:20px 10px;}

.org-tree, .org-tree ul{
  list-style:none;margin:0;padding:0;
}
.org-tree{padding-left:0;}
.org-tree ul{
  padding-left:30px;position:relative;
}

.org-tree li{position:relative;margin-bottom:14px;display:flex;align-items:flex-start;}

.tn-self{flex-shrink:0;}

/* connecting lines drawn by assets/js/tree-lines.js via SVG overlay */
.org-tree ul > li{padding-left:30px;}

/* root-level li has no parent — no indent needed */
.org-tree > li{padding-left:0;}

/* couple stacked vertically (since horizontal space now represents generations,
   not siblings within a couple), joined by a short vertical connecting line */
.tn-couple{
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
}
.tn-divider{
  position:relative;
  width:1px;height:14px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  margin-left:22px;
}
.tn-divider::before{
  content:'';
  position:absolute;top:-5px;bottom:-5px;left:0;
  border-left:2px solid var(--gold);
}
.tn-divider .ring-icon{
  position:relative;z-index:1;background:var(--cream);
  font-size:0.8rem;line-height:1;padding:1px 0;border-radius:50%;
}

.tn{
  background:var(--card-bg);border-radius:12px;box-shadow:var(--shadow);
  padding:6px 10px;position:relative;display:inline-flex;align-items:center;gap:8px;
}
.tn-photo-link{display:block;flex-shrink:0;}
.tn-photo{
  width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--gold);
}
.tn.deceased .tn-photo{filter:grayscale(60%);opacity:0.85;border-color:#999;}
.tn-info{display:flex;flex-direction:column;align-items:flex-start;gap:1px;}
.tn-name{font-weight:700;font-size:0.82rem;color:var(--deep-maroon);line-height:1.2;white-space:nowrap;}
.tn-relation{font-size:0.65rem;color:#8a7a6e;white-space:nowrap;}
.tn-memory{font-size:0.7rem;}
.tn-actions{
  display:flex;gap:3px;margin-top:2px;
}
.tn-actions a{
  text-decoration:none;font-size:0.62rem;background:#f1e4cf;border-radius:6px;padding:1px 4px;
}

.tn-add-spouse{
  display:inline-block;font-size:0.7rem;color:var(--warm-orange);text-decoration:none;
  border:1px dashed var(--warm-orange);border-radius:20px;padding:4px 10px;white-space:nowrap;
  margin-top:4px;
}
.tn-add-child-row{margin-top:6px;}
.tn-add-child{
  display:inline-block;font-size:0.66rem;color:var(--leaf-green);text-decoration:none;
  border:1px dashed var(--leaf-green);border-radius:20px;padding:3px 8px;
}

@media (max-width:600px){
  .tn{padding:5px 8px;gap:6px;}
  .tn-photo{width:36px;height:36px;}
  .tn-name{font-size:0.74rem;}
  .org-tree ul{padding-left:20px;}
  .org-tree ul > li{padding-left:18px;}
}


.quiz-option{
  display:block;width:100%;text-align:left;padding:12px;margin:6px 0;
  border:2px solid #ddd;border-radius:10px;background:#fff;cursor:pointer;font-size:1rem;
}
.quiz-option.correct{border-color:var(--leaf-green);background:#eaf3e6;}
.quiz-option.wrong{border-color:#c0392b;background:#fbeae8;}

.clue-card{
  background:linear-gradient(135deg,#fff7e8,#fff);
  border:2px dashed var(--gold);border-radius:16px;padding:30px;text-align:center;font-size:1.3rem;
}

.host-mode{
  text-align:center;
}
.host-mode img{max-width:100%;border-radius:12px;max-height:320px;object-fit:contain;}
.host-controls{margin-top:20px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap;}

.nose-crop-frame{
  position:relative;display:inline-block;
}
.nose-mask{
  position:absolute;background:var(--cream);
}

.jigsaw-board{
  display:grid;gap:2px;margin:0 auto;max-width:360px;
}
.jigsaw-piece{
  width:100%;aspect-ratio:1;background-size:cover;border:1px solid #ccc;cursor:grab;
}
.jigsaw-slot{
  width:100%;aspect-ratio:1;border:1px dashed #aaa;background:#f4f4f4;
}

@media (max-width:600px){
  .nav a{margin-left:10px;font-size:0.85rem;}
  .container{padding:14px;}
  .clue-card{font-size:1.1rem;padding:20px;}
}