:root{
  --bg:#ffffff;
  --card:#f2efe9;
  --ink:#1c1a17;
  --muted:#9b9387;
  --line:#e4ded4;
  --gold:#b98a4b;
  --gap:7px;
  --radius:12px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}

.stage{height:100vh;display:flex;flex-direction:row;position:relative;overflow:hidden}

/* ---------- LEFT PANEL ---------- */
.panel{
  width:clamp(280px,26vw,400px);
  flex:0 0 auto;
  height:100vh;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:46px 40px 34px;
  z-index:30;
}
.panel__name{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;font-size:clamp(52px,5.4vw,92px);
  line-height:.96;letter-spacing:.005em;
  margin:0;
}
.panel__logo{
  display:block;width:100%;max-width:300px;height:auto;
  margin-left:0;overflow:visible;
}
.logo-word{
  font-family:'Italiana',serif;font-weight:400;
  font-size:74px;letter-spacing:1px;
}
.panel__meta{
  margin-top:18px;
  font-variant:small-caps;letter-spacing:.06em;
  font-size:14px;color:var(--ink);
}
.panel__parents{
  margin-top:10px;
  font-size:14px;color:var(--muted);letter-spacing:.01em;
}
.panel__bottom{display:flex;flex-direction:column;gap:14px}
.hint{
  font-size:12px;letter-spacing:.07em;color:var(--muted);
  font-variant:small-caps;transition:opacity .6s var(--ease);
}
.panel__links{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.lnk{
  font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--ink);
  position:relative;padding-bottom:1px;transition:color .3s;
}
.lnk::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.lnk:hover::after{transform:scaleX(1)}
.copyright{font-size:11px;letter-spacing:.04em;color:var(--muted);margin-top:6px}

/* ---------- REELS ---------- */
.reels{
  flex:1;display:flex;gap:0;padding:0;position:relative;z-index:10;
  min-height:0;height:100vh;background:var(--bg);
}
.reel{
  flex:1;position:relative;overflow:hidden;
  touch-action:none;cursor:grab;background:var(--bg);
  user-select:none;
}
.reel:active{cursor:grabbing}
.reel::before,.reel::after{
  content:"";position:absolute;left:0;right:0;height:26%;z-index:6;pointer-events:none;
}
.reel::before{top:0;background:linear-gradient(var(--bg),rgba(255,255,255,0))}
.reel::after{bottom:0;background:linear-gradient(rgba(255,255,255,0),var(--bg))}

.reel-track{position:absolute;left:0;right:0;top:0;will-change:transform}

/* each tile holds one inset, rounded card on a white gutter */
.tile{position:absolute;left:0;right:0;padding:var(--gap)}
.tile img,.tile .ltr{
  width:100%;height:100%;display:block;
  border-radius:var(--radius);
  box-shadow:0 1px 4px rgba(28,26,23,.10),0 0 0 1px rgba(28,26,23,.04);
}
.tile img{
  object-fit:cover;
  filter:grayscale(.10) brightness(.94);transition:filter .5s var(--ease);
}
.tile .ltr{
  display:grid;place-items:center;background:var(--card);
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(34px,4.6vw,92px);color:var(--muted);
  transition:color .45s var(--ease),text-shadow .45s var(--ease),background .45s var(--ease);
}

/* center slot frame (rounded, matches the inset card) */
.slot{ display:none; }
.reel.matched .slot{
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(185,138,75,.5),0 0 26px rgba(185,138,75,.20);
}
.reel.matched .tile .ltr{
  color:var(--gold);background:#fbf6ee;text-shadow:0 0 22px rgba(185,138,75,.40);
}

.guide{position:absolute;left:0;right:0;top:50%;height:0;z-index:20;pointer-events:none}

/* ---------- DONE BANNER ---------- */
.done{
  position:absolute;inset:0;z-index:40;display:none;
  align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 45%,rgba(255,255,255,.88),rgba(255,255,255,.97));
  backdrop-filter:blur(2px);
}
.stage.complete .done{display:flex;animation:fadein .8s var(--ease)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.done__inner{text-align:center}
.done__name{
  font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(56px,11vw,140px);line-height:1;color:var(--ink);
}
.done__sub{margin-top:10px;font-size:13px;letter-spacing:.14em;color:var(--muted);font-variant:small-caps}
.done__btn{
  margin-top:30px;border:1px solid var(--line);border-radius:40px;
  padding:12px 28px;font-size:12px;letter-spacing:.14em;text-transform:lowercase;
  color:var(--ink);transition:.35s var(--ease);
}
.done__btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:760px){
  .stage{flex-direction:column}
  .panel{
    width:100%;height:auto;flex:0 0 auto;
    flex-direction:column;align-items:center;text-align:center;justify-content:flex-start;
    gap:4px;padding:14px 14px 10px;border-bottom:1px solid var(--line);
  }
  .panel__name{font-size:clamp(30px,9vw,44px);line-height:1}
  .panel__logo{max-width:200px;margin:0 auto}
  .panel__meta{margin-top:2px;font-size:12px}
  .panel__parents{margin-top:0;font-size:12px}
  .panel__bottom{
    flex-direction:row;align-items:center;gap:14px;width:100%;
    justify-content:center;margin-top:8px;flex-wrap:wrap;
  }
  .panel__links{flex-direction:row;gap:16px}
  .lnk{font-size:15px}
  .copyright{display:none}
  .hint{order:-1;width:100%}
  .reels{height:auto;flex:1;min-height:0}
}
@media(max-width:420px){
  .panel__name{font-size:34px}
  .panel__parents{font-size:11px}
  .hint{font-size:11px}
}