/* ============================================================
   Family Gathering Word Search — theme
   Palette drawn from a classic ivory + navy + gold invitation.
   ============================================================ */
:root{
  --paper:      #f7f1e1;   /* warm ivory page            */
  --paper-2:    #fbf7ea;   /* lighter card fill          */
  --ink:        #23324f;   /* deep navy — headings/text  */
  --ink-soft:   #45536e;
  --green:      #2b4a37;   /* forest green — subtitle    */
  --gold:       #b98b2f;   /* gilt accents / frame       */
  --gold-soft:  #d8bd7e;
  --wine:       #7e2f3b;   /* maroon — bullets, found    */
  --navy-rose:  #2f3f66;
  --grid-line:  #d9cba6;
  --shadow:     0 18px 40px -22px rgba(35,50,79,.55);
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  font-family:"Cormorant Garamond", Georgia, serif;
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 50% -10%, #fdfaf0 0%, var(--paper) 55%, #f0e7cf 100%) fixed;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  font-size:18px;
  line-height:1.4;
}

/* ---------- Ornamental frame around the whole page ---------- */
.frame{
  position:relative;
  max-width:640px;
  margin:14px auto;
  padding:26px 18px 30px;
  background:linear-gradient(180deg,var(--paper-2),#f6efdd);
  border:1px solid var(--gold-soft);
  outline:1px solid var(--gold);
  outline-offset:5px;
  border-radius:6px;
  box-shadow:var(--shadow);
}
.corner{ position:absolute; width:78px; height:78px; opacity:.9; pointer-events:none; color:var(--green); }
.corner.tl{ top:6px;  left:6px; }
.corner.tr{ top:6px;  right:6px;  transform:scaleX(-1); }
.corner.bl{ bottom:6px; left:6px; transform:scaleY(-1); }
.corner.br{ bottom:6px; right:6px; transform:scale(-1,-1); }

/* ---------- Masthead ---------- */
.masthead{ text-align:center; margin:4px 0 10px; }
.masthead h1{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:800;
  color:var(--ink);
  font-size:clamp(30px,9vw,46px);
  line-height:.98;
  margin:0;
  letter-spacing:.5px;
}
.masthead h2{
  font-family:"Playfair Display", Georgia, serif;
  font-weight:700; font-style:italic;
  color:var(--green);
  font-size:clamp(22px,6.5vw,32px);
  margin:2px 0 0;
}
.divider{
  display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--gold); margin:12px 0 6px; font-size:14px; letter-spacing:.3em;
}
.divider::before,.divider::after{
  content:""; height:1px; width:56px;
  background:linear-gradient(90deg,transparent,var(--gold));
}
.divider::after{ background:linear-gradient(90deg,var(--gold),transparent); }
.heart{ color:var(--wine); font-size:15px; }

.ribbon{
  text-align:center; text-transform:uppercase; letter-spacing:.12em;
  font-family:"Cormorant Garamond",serif; font-weight:600;
  color:var(--ink-soft); font-size:14px;
  background:#efe6cd; border:1px solid var(--gold-soft);
  border-radius:4px; padding:9px 12px; margin:6px 2px 18px;
}

/* ---------- Buttons + inputs ---------- */
.field{ display:block; width:100%; text-align:center;
  font-family:"Cormorant Garamond",serif; font-size:22px; color:var(--ink);
  padding:14px 16px; margin:8px 0 4px;
  background:var(--paper-2); border:1px solid var(--gold-soft);
  border-radius:8px; outline:none;
}
.field:focus{ border-color:var(--gold); box-shadow:0 0 0 3px rgba(185,139,47,.18); }

.btn{
  display:block; width:100%; cursor:pointer;
  font-family:"Playfair Display",serif; font-weight:700; letter-spacing:.02em;
  font-size:20px; color:#fbf7ea;
  background:linear-gradient(180deg,#2c3f63,var(--ink));
  border:1px solid #1a2740; border-radius:10px;
  padding:15px 18px; margin-top:14px;
  box-shadow:0 10px 22px -12px rgba(35,50,79,.8);
  transition:transform .06s ease, filter .15s ease;
}
.btn:hover{ filter:brightness(1.07); }
.btn:active{ transform:translateY(1px); }
.btn.gold{ background:linear-gradient(180deg,#d8bd7e,#b98b2f); border-color:#9a7527; color:#3a2c0d; }
.btn.ghost{
  background:transparent; color:var(--ink); border:1px solid var(--gold);
  box-shadow:none; font-size:17px; padding:11px;
}

.note{ text-align:center; color:var(--ink-soft); font-size:16px; margin:14px 4px 0; }
.small{ font-size:14px; color:var(--ink-soft); }
a{ color:var(--wine); }

/* ---------- Timer / status bar (game) ---------- */
.statusbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#efe6cd; border:1px solid var(--gold-soft); border-radius:10px;
  padding:8px 12px; margin-bottom:12px;
}
.stat{ text-align:center; line-height:1; }
.stat .k{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); }
.stat .v{ font-family:"Playfair Display",serif; font-weight:800; font-size:26px; color:var(--ink); }
#timer.v{ font-variant-numeric:tabular-nums; }
.statusbar.low #timer.v{ color:var(--wine); }
.player-tag{ font-style:italic; color:var(--green); font-size:16px; max-width:40%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- The letter grid ---------- */
.grid-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.grid{
  display:grid; gap:3px; margin:2px auto; width:100%;
  background:var(--grid-line); padding:6px; border-radius:10px;
  border:1px solid var(--gold-soft);
  touch-action:manipulation;
}
.cell{
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  background:var(--paper-2); color:var(--ink);
  font-family:"Spectral", Georgia, serif; font-weight:600;
  font-size:clamp(13px,3.6vw,20px);
  border-radius:5px; user-select:none; cursor:pointer;
  transition:background .1s ease, color .1s ease, transform .05s ease;
}
.cell.pick{ background:var(--gold); color:#fff; transform:scale(1.04); }
.cell.found{ background:#dfe9df; color:var(--green); }
.cell.flash-bad{ background:#f0d5d5; }

/* ---------- Word list ---------- */
.wordlist-title{ text-align:center; font-family:"Playfair Display",serif;
  font-style:italic; color:var(--green); margin:16px 0 8px; font-size:20px; }
.wordlist{ list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:6px 14px; }
.wordlist li{ display:flex; align-items:center; gap:8px;
  font-size:18px; color:var(--ink); }
.wordlist li::before{ content:"•"; color:var(--wine); font-size:20px; line-height:1; }
.wordlist li.done{ color:#8a9a8a; }
.wordlist li.done .w{ text-decoration:line-through; }
.wordlist li.done::before{ content:"✓"; color:var(--green); font-size:15px; }
@media (min-width:520px){ .wordlist{ grid-template-columns:repeat(3,1fr); } }

/* ---------- Results / leaderboard ---------- */
.result-card{
  text-align:center; background:#efe6cd; border:1px solid var(--gold-soft);
  border-radius:12px; padding:18px; margin:6px 0 18px;
}
.result-card .big{ font-family:"Playfair Display",serif; font-weight:800;
  font-size:46px; color:var(--ink); line-height:1; }
.result-card .big span{ color:var(--wine); }
.table{ width:100%; border-collapse:collapse; margin-top:6px; }
.table th,.table td{ padding:9px 8px; text-align:left; border-bottom:1px solid var(--gold-soft); }
.table th{ font-family:"Cormorant Garamond",serif; text-transform:uppercase;
  letter-spacing:.08em; font-size:13px; color:var(--ink-soft); }
.table td.num,.table th.num{ text-align:center; font-variant-numeric:tabular-nums; }
.table tr.me{ background:#f6ecd0; }
.rank{ font-family:"Playfair Display",serif; font-weight:800; color:var(--gold); }
.rank.top{ color:var(--wine); }

.footer-note{ text-align:center; margin-top:18px; }

@media (max-width:430px){
  .frame{ padding-left:12px; padding-right:12px; margin:8px auto; }
  .grid{ gap:2px; padding:5px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}

/* ============================================================
   Additions: difficulty picker, daily/badges, tabs, profile
   ============================================================ */

/* ---------- Difficulty segmented control (start screen) ---------- */
.picker-label{ text-align:center; font-family:"Playfair Display",serif; font-style:italic;
  color:var(--green); font-size:18px; margin:18px 0 6px; }
.segmented{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.seg{ position:relative; cursor:pointer; }
.seg input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.seg span{ display:flex; flex-direction:column; align-items:center; gap:1px;
  padding:10px 6px; border:1px solid var(--gold-soft); border-radius:10px;
  background:var(--paper-2); color:var(--ink); transition:all .12s ease; }
.seg span strong{ font-family:"Playfair Display",serif; font-size:18px; }
.seg span em{ font-style:normal; font-size:12px; color:var(--ink-soft); letter-spacing:.04em; }
.seg input:checked + span{ background:linear-gradient(180deg,#2c3f63,var(--ink));
  border-color:#1a2740; color:#fbf7ea; box-shadow:0 8px 18px -10px rgba(35,50,79,.8); }
.seg input:checked + span em{ color:var(--gold-soft); }
.seg input:focus-visible + span{ box-shadow:0 0 0 3px rgba(185,139,47,.35); }
.picker-hint{ text-align:center; margin:8px 2px 0; }

/* ---------- Mode / difficulty chips (game screen) ---------- */
.mode-tags{ display:flex; gap:8px; justify-content:center; margin:0 0 12px; flex-wrap:wrap; }
.chip{ font-family:"Cormorant Garamond",serif; font-weight:600; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; padding:4px 12px; border-radius:999px;
  border:1px solid var(--gold-soft); background:#efe6cd; color:var(--ink-soft); }
.chip-hard{ background:#f0d9dc; border-color:#d8a7ae; color:var(--wine); }
.chip-medium{ background:#e7ecdf; border-color:#bcc9a8; color:var(--green); }
.chip-easy{ background:#e6ecf3; border-color:#a9bdd6; color:var(--navy-rose); }
.chip-daily{ background:linear-gradient(180deg,#d8bd7e,#b98b2f); border-color:#9a7527; color:#3a2c0d; }

/* score stat sits in the existing .statusbar flex row */
.statusbar{ flex-wrap:wrap; row-gap:6px; }
#scoreVal.v{ color:var(--wine); font-variant-numeric:tabular-nums; }

/* ---------- Tabs (scoreboard) ---------- */
.tabs{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap;
  margin:4px 0 14px; }
.tab{ text-decoration:none; font-family:"Cormorant Garamond",serif; font-weight:600;
  font-size:15px; letter-spacing:.04em; color:var(--ink-soft);
  padding:7px 14px; border:1px solid var(--gold-soft); border-radius:999px;
  background:var(--paper-2); }
.tab.on{ background:linear-gradient(180deg,#2c3f63,var(--ink)); color:#fbf7ea; border-color:#1a2740; }
.tab-note{ text-align:center; margin:0 4px 10px; color:var(--ink-soft); }

/* table niceties */
.table td.strong{ font-family:"Playfair Display",serif; font-weight:800; color:var(--ink); }
.table td.nowrap, .nowrap{ white-space:nowrap; }
.diff-tag{ display:inline-block; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-soft); background:#efe6cd; border:1px solid var(--gold-soft);
  border-radius:6px; padding:0 6px; margin-left:4px; vertical-align:1px; }
.when-line{ margin-top:4px; color:var(--ink-soft); }

/* ---------- Badges ---------- */
.badge-row{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:12px; }
.badge{ display:inline-flex; align-items:center; gap:5px; font-size:13px;
  font-family:"Cormorant Garamond",serif; font-weight:600;
  padding:5px 11px; border-radius:999px; border:1px solid var(--gold);
  background:#fbf3dd; color:var(--ink); }
.badge.locked{ opacity:.4; filter:grayscale(1); border-color:var(--grid-line); }
.badge.earned{ box-shadow:0 6px 14px -10px rgba(185,139,47,.9); }

/* ---------- Profile (Me tab) ---------- */
.profile{ background:#efe6cd; border:1px solid var(--gold-soft); border-radius:12px;
  padding:16px; margin:2px 0 16px; text-align:center; }
.profile-name{ font-family:"Playfair Display",serif; font-weight:800; font-style:italic;
  color:var(--green); font-size:22px; margin-bottom:10px; }
.profile-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.pstat{ display:flex; flex-direction:column; align-items:center; }
.pstat .pv{ font-family:"Playfair Display",serif; font-weight:800; font-size:30px;
  color:var(--ink); line-height:1; }
.pstat .pk{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.badge-wall{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }

/* ---------- Photo gallery (start page) ---------- */
.gallery{ margin:22px 0 6px; }
.gallery-title{ text-align:center; font-family:"Playfair Display",serif; font-style:italic;
  color:var(--green); font-size:20px; margin:0 0 12px;
  display:flex; align-items:center; justify-content:center; gap:10px; }
.gallery-title::before,.gallery-title::after{
  content:""; height:1px; width:34px; background:linear-gradient(90deg,transparent,var(--gold)); }
.gallery-title::after{ background:linear-gradient(90deg,var(--gold),transparent); }

.photo-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr));
  gap:8px; }
@media (min-width:460px){ .photo-grid{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); } }
.photo{ padding:0; border:none; background:none; cursor:pointer; display:block;
  border-radius:10px; overflow:hidden; aspect-ratio:1/1;
  border:1px solid var(--gold-soft); box-shadow:0 8px 18px -14px rgba(35,50,79,.7);
  transition:transform .1s ease, filter .15s ease; }
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo:hover{ transform:translateY(-2px) scale(1.02); filter:brightness(1.04); }
.photo:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---------- Lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,26,40,.86); padding:24px; }
.lightbox[hidden]{ display:none; }
.lb-img{ max-width:92vw; max-height:84vh; border-radius:8px;
  border:2px solid var(--gold-soft); box-shadow:0 30px 60px -20px rgba(0,0,0,.7);
  background:var(--paper-2); }
.lb-btn{ position:absolute; cursor:pointer; color:#fbf7ea;
  background:rgba(35,50,79,.55); border:1px solid rgba(216,189,126,.5);
  font-family:"Playfair Display",serif; line-height:1;
  display:flex; align-items:center; justify-content:center; }
.lb-close{ top:16px; right:16px; width:44px; height:44px; border-radius:50%; font-size:26px; }
.lb-prev,.lb-next{ top:50%; transform:translateY(-50%);
  width:50px; height:64px; border-radius:10px; font-size:40px; }
.lb-prev{ left:10px; } .lb-next{ right:10px; }
.lb-btn:hover{ background:rgba(35,50,79,.8); }