: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));
}

.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;}

.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;}
}