/* ============================================================
   የዜማ ጨዋታ — tibeb layer + the game picker
   Ethiopian weave drawn in ink on the soft neumorphic ground.
   ============================================================ */

/* the page itself carries a faint woven cloth texture */
body{
  background-color:var(--bg);
  background-image:
    repeating-linear-gradient(45deg,rgba(19,18,16,.035) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(-45deg,rgba(19,18,16,.035) 0 1px,transparent 1px 22px);
  background-attachment:fixed;
}

/* ---------- top bar ---------- */
.topbar{position:relative}
.topbar::after{
  content:"";
  position:absolute;left:4px;right:4px;bottom:0;height:6px;
  opacity:.22;
  background-image:
    repeating-linear-gradient(45deg,var(--ink) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(-45deg,var(--ink) 0 1px,transparent 1px 6px);
  mask-image:linear-gradient(90deg,black,transparent 55%);
}

/* ---------- home artwork ---------- */
.home-art{
  position:relative;overflow:hidden;isolation:isolate;cursor:pointer;
  transition:box-shadow .35s ease,transform .35s ease;
}
.home-art::before{
  content:"";position:absolute;inset:20px;
  border-radius:24px;pointer-events:none;opacity:.3;
  background-image:
    repeating-linear-gradient(45deg,var(--ink) 0 1px,transparent 1px 10px),
    repeating-linear-gradient(-45deg,var(--ink) 0 1px,transparent 1px 10px);
  mask-image:linear-gradient(180deg,black 0 7%,transparent 7% 93%,black 93%);
}
.home-art:hover,.home-art.is-active{transform:translateY(-4px);box-shadow:var(--nm-3)}
.home-art .art-title{position:relative;z-index:3;animation:logoFloat 5s ease-in-out infinite}
.home-art .music{position:relative;z-index:3}
.home-art .floating-note{
  position:absolute;z-index:2;font-size:clamp(16px,2.6vw,26px);
  color:var(--ink);opacity:.12;pointer-events:none;
  animation:noteFloat 7s ease-in-out infinite;
}
.home-art .n1{left:12%;top:18%}
.home-art .n2{right:12%;top:34%;animation-delay:-1.9s}
.home-art .n3{left:19%;bottom:16%;animation-delay:-3.4s}
.home-art .n4{right:19%;bottom:26%;animation-delay:-4.8s}
.home-art .record-ring{
  position:absolute;width:52%;aspect-ratio:1;border-radius:50%;
  box-shadow:var(--nm-in);z-index:1;
}
.home-art .spark{display:none}

/* ---------- lyric card ornament ---------- */
.game-page .question{position:relative;isolation:isolate;overflow:hidden}
.card-rail{
  position:absolute;top:8%;bottom:8%;width:7px;
  opacity:.3;z-index:3;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,var(--ink) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(-45deg,var(--ink) 0 1px,transparent 1px 6px);
  mask-image:linear-gradient(180deg,transparent,black 15%,black 85%,transparent);
}
.card-rail span{display:none}
.rail-left{left:14px}
.rail-right{right:14px}
.card-glow{display:none}
.game-page .answer::before{display:none}

/* ============================================================
   GAME PICKER
   ============================================================ */
.mode-home{
  min-height:100svh;
  box-sizing:border-box;
  padding:clamp(22px,4vh,54px) 18px clamp(18px,3vh,32px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;position:relative;overflow:hidden;
}
.mode-pattern,.mode-orbit{display:none}

.mode-brand-mark{
  position:relative;z-index:1;
  width:74px;height:74px;
  display:grid;place-items:center;
  border-radius:26px;
  background:var(--surface);
  box-shadow:var(--nm-2);
  animation:logoFloat 5s ease-in-out infinite;
}
.mode-brand-mark img{display:block;width:52px;height:52px;pointer-events:none}
.mode-home .eyebrow{margin-top:20px;z-index:1}
.mode-home h1{
  font-size:clamp(30px,6.4vw,64px);
  margin:12px 0 0;z-index:1;
}
.mode-intro{color:var(--muted);font-size:clamp(13px,1.8vw,17px);margin:10px 0 26px;z-index:1}

.mode-grid{
  width:min(1000px,100%);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;z-index:2;
}
.mode-card{
  appearance:none;text-align:left;cursor:pointer;
  display:flex;flex-direction:column;
  border-radius:var(--r-lg);
  padding:28px 26px 24px;
  color:var(--ink);
  background:var(--surface);
  box-shadow:var(--nm-2);
  transition:box-shadow .3s ease,transform .3s cubic-bezier(.2,.7,.3,1);
  position:relative;overflow:hidden;
}
/* a tibeb selvedge down the leading edge of each card */
.mode-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:12px;
  opacity:.2;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,var(--ink) 0 1px,transparent 1px 6px),
    repeating-linear-gradient(-45deg,var(--ink) 0 1px,transparent 1px 6px);
  mask-image:linear-gradient(180deg,transparent,black 18%,black 82%,transparent);
}
.mode-card:hover{transform:translateY(-5px);box-shadow:var(--nm-3)}
.mode-card:active{transform:translateY(0);box-shadow:var(--nm-in)}

.mode-icon{
  width:58px;height:58px;
  display:grid;place-items:center;
  border-radius:19px;font-size:27px;
  background:var(--surface);
  box-shadow:var(--nm-in);
  filter:grayscale(1);
  margin-bottom:16px;
}
.mode-kicker{font-size:10px;letter-spacing:.2em;color:var(--muted);font-weight:900}
.mode-card h2{font-size:clamp(20px,2.6vw,28px);margin:8px 0 10px}
.mode-card p{color:var(--muted);line-height:1.55;font-size:13.5px;margin:0 0 18px;flex:1}
.mode-points{
  display:flex;gap:6px 14px;align-items:center;flex-wrap:wrap;
  color:var(--muted);font-size:11px;
  padding:12px 14px;border-radius:14px;
  background:var(--surface);box-shadow:var(--nm-in);
}
.mode-points span{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
.mode-points b{font-family:var(--display);font-size:16px;color:var(--ink)}
.mode-cta{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:18px;font-family:var(--display);font-weight:800;font-size:13.5px;letter-spacing:.05em;
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.mode-card:hover .mode-cta{transform:translateX(6px)}
.mode-footer{
  margin-top:26px;color:var(--muted);
  font-size:9.5px;letter-spacing:.2em;z-index:1;
  display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;
}
.mode-privacy{color:inherit;text-decoration-color:var(--line);text-underline-offset:3px}
.mode-privacy:hover{color:var(--ink)}

/* ---------- keyframes ---------- */
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes noteFloat{0%,100%{transform:translate3d(0,8px,0) rotate(-8deg);opacity:.08}50%{transform:translate3d(8px,-12px,0) rotate(8deg);opacity:.2}}

/* ============================================================
   PHONE — the picker has to show both games without scrolling,
   so each card collapses to a compact row.
   ============================================================ */
@media(max-width:760px){
  .mode-home{justify-content:center;padding-top:clamp(16px,3vh,30px)}
  .mode-brand-mark{width:56px;height:56px;border-radius:20px}
  .mode-brand-mark img{width:40px;height:40px}
  .mode-home .eyebrow{margin-top:14px;font-size:9px;letter-spacing:.16em}
  .mode-home h1{font-size:clamp(26px,7.6vw,36px)}
  .mode-intro{font-size:12.5px;margin:8px 0 18px}

  .mode-grid{grid-template-columns:1fr;grid-auto-rows:1fr;gap:14px}
  .mode-card{
    display:grid;
    grid-template-columns:54px minmax(0,1fr);
    grid-template-areas:
      "icon kicker"
      "icon title"
      "desc desc"
      "foot foot";
    column-gap:14px;row-gap:2px;
    align-items:center;
    padding:16px 18px;
    border-radius:24px;
  }
  .mode-icon{grid-area:icon;width:54px;height:54px;font-size:24px;border-radius:17px;margin:0}
  .mode-kicker{grid-area:kicker;align-self:end}
  .mode-card h2{grid-area:title;align-self:start;font-size:19px;margin:2px 0 0}
  .mode-card p{
    grid-area:desc;margin:10px 0 0;font-size:12.5px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .mode-points{
    grid-area:foot;justify-self:start;align-self:center;
    margin-top:12px;padding:8px 11px;font-size:9.5px;gap:3px 10px;
  }
  .mode-points b{font-size:13px}
  .mode-cta{grid-area:foot;justify-self:end;align-self:center;margin-top:12px;font-size:12px}
  .mode-footer{margin-top:18px;font-size:8.5px}
  .card-rail{display:none}
}

/* very short viewports — drop the descriptions rather than the games */
@media(max-width:760px) and (max-height:700px){
  .mode-card p{display:none}
  .mode-intro{display:none}
  .mode-home h1{font-size:26px}
}