/* Bruns Family Gift Exchange — elegant, cozy, grown-up */
:root{
  --burgundy:#7a1626; --burgundy-l:#a3243a; --forest:#1d3b2a; --forest-l:#2c5640;
  --gold:#c9a45c; --gold-l:#e6cf98; --cream:#f6eedf; --cream-d:#d9cdb6;
  --glass:rgba(22,14,10,.62); --line:rgba(201,164,92,.45);
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:Inter,Nunito,system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{background:#140c08}
html,body{margin:0}
body{
  font-family:var(--sans);color:var(--cream);min-height:100vh;padding-bottom:96px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* Photo background. Replace images/hero.jpg to use your own picture. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(20,10,6,.35) 0%,rgba(20,10,6,.55) 55%,rgba(14,8,5,.9) 100%),
    url("images/hero.jpg") center/cover no-repeat;
}
[hidden]{display:none!important}
.display{font-family:var(--serif);font-weight:700;letter-spacing:.2px}
.eyebrow{margin:0;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold-l);font-weight:600}
#snow{position:fixed;inset:0;pointer-events:none;z-index:50}

/* Glass cards with a fine gold edge (the subtle 90s bevel lives in the inner highlight) */
.glass{
  background:var(--glass);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--line);border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,235,190,.18),0 20px 50px rgba(0,0,0,.45);
}
.btn{
  font:600 .95rem var(--sans);cursor:pointer;color:var(--cream);padding:.72em 1.3em;border-radius:10px;
  border:1px solid rgba(230,207,152,.5);background:linear-gradient(180deg,var(--forest-l),var(--forest));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -2px 0 rgba(0,0,0,.25),0 4px 12px rgba(0,0,0,.3);
  transition:transform .1s,filter .2s;white-space:nowrap;letter-spacing:.02em;
}
.btn:hover{filter:brightness(1.12)} .btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-red{background:linear-gradient(180deg,var(--burgundy-l),var(--burgundy))}
.btn-green{background:linear-gradient(180deg,var(--forest-l),var(--forest))}
.btn-gold{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#2a1a10;border-color:rgba(255,240,200,.6)}
.btn-small{padding:.42em .8em;font-size:.82rem}
input{
  font:500 1rem var(--sans);padding:.78em 1em;border-radius:10px;border:1px solid var(--line);
  background:rgba(255,248,235,.08);width:100%;color:var(--cream);
}
input::placeholder{color:rgba(246,238,223,.55)}
input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,164,92,.25)}
.msg{min-height:1.2em;margin:.5em 0 0;font-weight:500;color:#f0b9b0}

/* Gate */
.gate{position:fixed;inset:0;display:grid;place-items:center;padding:20px;z-index:10}
.gate-card{max-width:420px;width:100%;padding:36px 30px;text-align:center;display:grid;gap:14px}
.gate-card h1{margin:0;color:var(--cream);font-size:2.1rem;line-height:1.15}
.gate-card p{margin:0;color:var(--cream-d)}

/* Header */
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;
  background:linear-gradient(180deg,rgba(20,10,6,.75),rgba(20,10,6,.35));border-bottom:1px solid var(--line)}
.brand{color:var(--gold-l);font-size:1.35rem}
.sync{font-size:.75rem;font-weight:600;color:var(--cream);background:rgba(0,0,0,.35);padding:4px 10px;border-radius:99px;border:1px solid rgba(255,255,255,.1)}
.sync.ok{color:#9fd8a8} .sync.bad{color:#f0b0b0}

/* Hero */
.hero{max-width:1100px;margin:0 auto;padding:min(14vh,120px) 16px 28px;display:flex;justify-content:center}
.hero-text{padding:34px 30px;text-align:center;max-width:760px;width:100%}
.hero-text h1{color:var(--cream);font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;margin:8px 0 10px;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.lede{color:var(--cream-d);max-width:560px;margin:0 auto;font-size:1.02rem}
.countdowns{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.cd{border-top:1px solid var(--line);padding-top:16px}
.cd h3{margin:0 0 10px;font:500 .78rem var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-l)}
.cd-time{display:flex;justify-content:center;gap:4px}
.cd-time span{display:flex;flex-direction:column;min-width:54px;padding:2px 4px}
.cd-time span+span{border-left:1px solid rgba(201,164,92,.25)}
.cd-time b{font:500 clamp(1.7rem,4vw,2.5rem) var(--serif);line-height:1.05;color:var(--cream);font-variant-numeric:tabular-nums}
.cd-time i{font-style:normal;font-size:.62rem;letter-spacing:.18em;opacity:.7;text-transform:uppercase;margin-top:4px}
.cd small{display:block;margin-top:8px;color:var(--cream-d);font-size:.8rem}
.done{font:500 1.5rem var(--serif)}

/* Lists */
.lists{max-width:960px;margin:12px auto 20px;padding:24px}
/* All 7 names visible at once: wrapping grid, no horizontal scroll */
.tabs{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.tab{min-width:0;font:600 .92rem var(--sans);cursor:pointer;padding:.6em .4em;border-radius:99px;
  border:1px solid var(--line);background:rgba(255,248,235,.06);color:var(--cream);
  display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;transition:background .2s,border-color .2s}
.tab:hover{background:rgba(255,248,235,.12)}
.tab.active{background:linear-gradient(180deg,var(--burgundy-l),var(--burgundy));border-color:var(--gold);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 18px rgba(201,164,92,.25)}
.count{background:rgba(0,0,0,.3);border-radius:99px;padding:0 6px;font-size:.72em;line-height:1.6}
.limit{margin:18px 0 4px;padding:10px 14px;border-radius:10px;background:rgba(201,164,92,.1);border:1px solid var(--line);color:var(--gold-l);font-size:.92rem}
.limit strong{color:var(--cream)}
.lists h2{color:var(--cream);font-size:1.9rem;margin:14px 0 12px}
.add{display:grid;grid-template-columns:1.3fr 1fr auto;gap:10px}
.items{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.item{display:grid;grid-template-columns:68px 1fr auto;gap:14px;align-items:center;padding:10px;border-radius:12px;background:rgba(255,248,235,.06);border:1px solid rgba(201,164,92,.25)}
.thumb{width:68px;height:68px;border-radius:8px;background:rgba(255,248,235,.9);display:grid;place-items:center;font-size:1.8rem;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:contain;background:#fff}
.info{min-width:0;display:grid;gap:4px}
.info .t{font-weight:600;overflow-wrap:anywhere}
.info a{color:var(--gold-l);font-size:.85rem;text-decoration:none}
.info a:hover{text-decoration:underline}
.item input{padding:.5em .7em}
.acts{display:flex;gap:6px}
.empty{text-align:center;padding:26px;color:var(--cream-d);font-style:italic;font-family:var(--serif)}
.foot{text-align:center;color:var(--gold-l);opacity:.75;padding:20px;font-size:.85rem;letter-spacing:.08em}

/* Player */
.player{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;background:rgba(20,12,8,.82);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:calc(100vw - 20px)}
.player .btn{padding:.4em .7em;border-radius:99px;font-size:.9rem}
.now{color:var(--cream);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.songlist{position:absolute;bottom:calc(100% + 8px);left:0;right:0;min-width:240px;margin:0;padding:8px 8px 8px 30px;background:rgba(20,12,8,.95);color:var(--cream);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.songlist li{padding:6px;cursor:pointer;border-radius:6px;font-size:.9rem}
.songlist li:hover,.songlist li.on{color:var(--gold-l);background:rgba(201,164,92,.12)}
/* YouTube player kept tiny and out of sight (it must exist for audio to play) */
/* YouTube refuses to play embeds smaller than 200x200, so keep it full size but invisible and behind everything. */
.yt,.yt iframe{position:fixed;width:200px;height:200px;left:0;bottom:0;opacity:.01;pointer-events:none;z-index:-1;border:0}
.tap-music{position:fixed;right:14px;bottom:calc(74px + env(safe-area-inset-bottom));z-index:61;font:600 .85rem var(--sans);
  color:#2a1a10;background:linear-gradient(180deg,var(--gold-l),var(--gold));border:1px solid rgba(255,240,200,.6);
  border-radius:99px;padding:.55em 1em;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.4);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(201,164,92,.18),0 6px 20px rgba(0,0,0,.4)}}

@media (max-width:760px){
  .tabs{grid-template-columns:repeat(4,1fr)}      /* 4 + 3 on phones */
}
@media (max-width:600px){
  .hero{padding-top:56px}
  .hero-text{padding:26px 18px}
  .add{grid-template-columns:1fr}
  .countdowns{grid-template-columns:1fr;gap:12px}
  .item{grid-template-columns:56px 1fr}
  .thumb{width:56px;height:56px}
  .acts{grid-column:1/-1;justify-content:flex-end}
  .lists{padding:16px;margin:12px 10px}
  .tabs{gap:6px}
  .tab{font-size:.8rem;padding:.55em .15em;gap:3px}
  .count{padding:0 4px}
  .brand{font-size:1.1rem}
  .now{max-width:130px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* v3 */
.top-r{display:flex;align-items:center;gap:12px}
.signout{color:var(--cream);font-size:.78rem;opacity:.8;text-decoration:underline;padding:8px 2px}
.btn-act{min-height:44px;min-width:44px;padding:.5em .9em;font-size:.88rem;white-space:nowrap}
.info .t{font-size:1.08rem;line-height:1.3}
.info a.lnk{font-size:.8rem;opacity:.9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.add{grid-template-columns:1.2fr 1fr auto}
@media (max-width:700px){.add{grid-template-columns:1fr}.acts .btn-act{flex:1}}

/* In-page confirm modal */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(20,8,4,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.modal-card{max-width:360px;width:100%;padding:24px;text-align:center;border-radius:16px}
.modal-card h3{margin:0 0 8px;font-size:1.4rem}
.modal-card p{margin:0 0 18px;word-break:break-word}
.modal-acts{display:flex;gap:10px;justify-content:center}
.modal-acts .btn{flex:1;min-height:44px}

/* v5: song name on its own line under the buttons */
.player{flex-wrap:wrap;justify-content:center;border-radius:22px;padding:8px 14px 10px;width:max-content}
.player .now{flex-basis:100%;order:10;text-align:center;white-space:normal;max-width:min(320px,calc(100vw - 50px));font-size:.88rem;line-height:1.3}
@media (max-width:600px){.player .now{max-width:calc(100vw - 50px)}}