:root{--navy:#08214b;--blue:#1688e8;--teal:#20c9d2;--green:#82c91e;--gold:#f7b718;--line:#dce8f1;--muted:#52677a;--soft:#f5f9fc;--shadow:0 16px 40px rgba(8,33,75,.12)}
*{box-sizing:border-box}body{margin:0;background:white;color:#071827;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}
.wrap{max-width:1240px;margin:auto;padding:14px 18px 34px}.site-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0 18px}.brand img{height:54px;max-width:360px;object-fit:contain}.nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.nav a,.btn,button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.78rem 1rem;font-weight:950;border:2px solid var(--line);background:white;color:var(--navy);box-shadow:0 6px 16px rgba(8,33,75,.06);cursor:pointer}.nav a.active,.btn.primary,button.primary{background:linear-gradient(135deg,var(--teal),var(--blue));color:white;border-color:transparent}.login{background:linear-gradient(135deg,var(--gold),#ffd86d)!important;color:#2b1700!important;border-color:transparent!important}.account,.upload,.admin{display:none}body.logged .login{display:none}body.logged .account,body.logged .upload{display:inline-flex}body.admin-on .admin{display:inline-flex}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 260px;align-items:center;gap:18px;margin:8px auto 22px;max-width:1120px;text-align:center}.hero-logo{width:100%;max-width:880px;display:block;margin:auto}.hero-lumi{width:100%;max-width:250px;display:block;margin:auto}.actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:12px 0}.tagline{font-weight:950;color:var(--muted);text-align:center;margin:4px 0 0}.image-header{text-align:center;margin:10px auto 26px}.image-header img{max-width:min(1050px,96vw);width:100%;height:auto;display:block;margin:auto}
.section-title{display:flex;justify-content:space-between;align-items:end;gap:12px;margin:26px 0 12px}.section-title h2{font-size:2rem;margin:0;color:var(--navy)}.section-title p{margin:4px 0 0;color:var(--muted);font-weight:850}
.grid{display:grid;gap:16px}.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:white;border:2px solid var(--line);border-radius:28px;box-shadow:var(--shadow);overflow:hidden}.pad{padding:20px}.card h3{color:var(--navy);margin:.2rem 0}.card p{color:var(--muted);font-weight:800}.kicker{display:inline-flex;border:2px solid #b7eef4;background:#e6fbff;color:#086c75;border-radius:999px;padding:.25rem .6rem;font-weight:1000;font-size:.8rem}
.lab{min-height:260px;display:flex;flex-direction:column;transition:.16s}.lab:hover,.card-link:hover .card{transform:translateY(-3px)}.lab-art{height:160px;display:grid;place-items:center;border-bottom:2px solid var(--line)}.lab:nth-child(1) .lab-art{background:#e6fbff}.lab:nth-child(2) .lab-art{background:#e8fff8}.lab:nth-child(3) .lab-art{background:#f3e8ff}.lab:nth-child(4) .lab-art{background:#fff7ed}.lab-info{padding:16px}.chips{display:flex;gap:8px;flex-wrap:wrap}.chip,.mini{display:inline-flex;border:2px solid var(--line);background:var(--soft);border-radius:999px;padding:.24rem .55rem;font-weight:950;font-size:.8rem;color:var(--navy)}
.icon{width:110px;height:110px;position:relative}.zone{border:13px solid var(--navy);border-radius:47% 53% 42% 58%;transform:rotate(-10deg)}.zone:after{content:"";position:absolute;width:24px;height:24px;border-radius:8px;background:var(--gold);left:40px;top:38px}.link:before,.link:after{content:"";position:absolute;width:66px;height:92px;border:12px solid var(--navy);border-radius:38px;top:8px}.link:before{left:8px;transform:rotate(-25deg)}.link:after{right:8px;transform:rotate(25deg)}.capture:before{content:"";position:absolute;width:44px;height:76px;border-radius:18px;background:var(--gold);left:33px;top:14px}.capture:after{content:"";position:absolute;width:105px;height:70px;border:12px solid var(--navy);border-top-color:transparent;border-radius:50%;left:2px;top:38px}.knot:before{content:"";position:absolute;inset:10px;border:13px solid var(--navy);border-radius:50% 42% 55% 45%;transform:rotate(25deg)}.knot:after{content:"NOT?";position:absolute;left:12px;top:42px;background:var(--blue);color:white;border-radius:999px;padding:.2rem .4rem;font-weight:1000}
.thumb{height:235px;background:#f8fafc;border-bottom:2px solid var(--line);overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover}.body{padding:18px}.body h3{margin:0 0 8px}.meta{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.card-link{display:block}.card-link .card{height:100%;transition:.16s}.filters{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:12px;align-items:end}label{display:block;font-size:.85rem;font-weight:1000;color:var(--navy);margin-bottom:6px}input,select,textarea{width:100%;border:2px solid var(--line);border-radius:16px;background:white;padding:.82rem;color:#071827}
.puzzle{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);gap:18px;align-items:start}.mediaBox{border:2px solid var(--line);border-radius:28px 28px 0 0;overflow:hidden;box-shadow:var(--shadow);cursor:pointer;position:relative}.mediaBox img{display:block;width:100%;height:auto;max-height:calc(100vh - 215px);object-fit:contain;background:white}.mediaBox:after{content:"Click to enlarge";position:absolute;right:12px;bottom:12px;background:rgba(8,33,75,.85);color:white;border-radius:999px;padding:.36rem .6rem;font-size:.78rem;font-weight:950}.image-stats{display:flex;gap:7px;flex-wrap:wrap;background:var(--soft);border:2px solid var(--line);border-top:0;border-radius:0 0 22px 22px;padding:8px 10px;font-size:.86rem}.panel{position:sticky;top:12px}.answers{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.answer{min-height:68px;background:white;color:var(--navy);border:2px solid var(--line);box-shadow:none;font-size:1.15rem}.answer.selected{background:#fde68a;color:#261600}.answer.correct{background:#d9f99d;color:#162600}.answer.incorrect{background:#fecdd3;color:#33020a}.notice{background:#fffbeb;border:2px solid #fde68a;color:#854d0e;border-radius:20px;padding:12px;font-weight:850}.good{background:#f0fdf4;border:2px solid #bbf7d0;color:#166534;border-radius:20px;padding:12px;font-weight:850}.reveal{display:none;margin-top:12px}.reveal.show{display:block}.video{border:2px solid var(--line);border-radius:22px;overflow:hidden}.video video{width:100%;display:block;max-height:330px}.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;padding:18px;z-index:999}.lightbox.show{display:flex}.lightbox img{max-width:96vw;max-height:92vh;object-fit:contain;background:white;border-radius:18px}.lightbox button{position:absolute;top:18px;right:18px;width:48px;height:48px;padding:0;font-size:1.7rem}.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.check{display:flex;gap:10px;background:var(--soft);border:2px solid var(--line);border-radius:16px;padding:10px;font-weight:800;color:var(--navy)}.check input{width:auto}.loginbox{max-width:540px;margin:40px auto}.hidden{display:none !important}
footer{text-align:center;color:var(--muted);font-weight:850;padding:30px 0 8px}
@media(max-width:1000px){.hero,.puzzle{grid-template-columns:1fr}.panel{position:static}.grid4{grid-template-columns:repeat(2,1fr)}.filters{grid-template-columns:1fr}.mediaBox img{max-height:60vh}}
@media(max-width:760px){.site-header{flex-direction:column;align-items:flex-start}.nav{justify-content:flex-start}.account-area{justify-content:flex-start}.grid3,.grid4,.formgrid{grid-template-columns:1fr}.brand img{max-width:275px;height:auto}.hero-lumi{max-width:210px}.mediaBox img{max-height:52vh}}


.rating-box{
  margin-top:12px;
  padding:12px;
  border:2px solid var(--line);
  border-radius:18px;
  background:var(--soft);
}
.rating-label{
  color:var(--navy);
  font-weight:950;
  margin-bottom:6px;
}
.stars{
  display:flex;
  gap:4px;
}
.stars button{
  width:38px;
  height:38px;
  padding:0;
  border-radius:10px;
  background:white;
  color:#cbd5e1;
  border:2px solid var(--line);
  box-shadow:none;
  font-size:1.35rem;
  line-height:1;
}
.stars button:hover,
.stars button.chosen{
  color:#f7b718;
  background:#fffbeb;
  border-color:#f7b718;
}
.rating-thanks{
  margin-top:6px;
  color:var(--muted);
  font-weight:850;
  font-size:.9rem;
}

/* Homepage clarity update */
.home-hero{
  display:block;
  text-align:center;
  max-width:960px;
  margin:8px auto 10px;
}
.home-hero .hero-logo{
  max-width:min(860px, 96vw);
}
.home-tagline{
  margin:4px 0 8px;
  font-size:clamp(1.35rem, 3vw, 2.1rem);
  font-weight:1000;
  color:var(--navy);
  letter-spacing:.2px;
}
.simple-title{
  justify-content:center;
  text-align:center;
  margin-top:22px;
}
.simple-title h2{
  font-size:clamp(2rem, 4vw, 3rem);
}
.puzzle-types-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  max-width:820px;
  margin:0 auto;
}
@media(max-width:760px){
  .puzzle-types-grid{
    grid-template-columns:1fr;
  }
}

/* Homepage clarity update */
.home-hero{
  display:block;
  text-align:center;
  max-width:960px;
  margin:8px auto 10px;
}
.home-hero .hero-logo{
  max-width:min(860px, 96vw);
}
.home-tagline{
  margin:4px 0 8px;
  font-size:clamp(1.35rem, 3vw, 2.1rem);
  font-weight:1000;
  color:var(--navy);
  letter-spacing:.2px;
}
.simple-title{
  justify-content:center;
  text-align:center;
  margin-top:22px;
}
.simple-title h2{
  font-size:clamp(2rem, 4vw, 3rem);
}
.puzzle-types-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  max-width:820px;
  margin:0 auto;
}
@media(max-width:760px){
  .puzzle-types-grid{
    grid-template-columns:1fr;
  }
}

/* Smaller plain-text top navigation */
.nav a{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:.25rem .38rem !important;
  font-size:.72rem !important;
  font-weight:850 !important;
  color:var(--navy) !important;
}
.nav a.active{
  background:transparent !important;
  border:0 !important;
  color:var(--blue) !important;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Smaller Puzzle Types heading */
.simple-title h2{
  font-size:clamp(1.1rem, 2vw, 1.5rem) !important;
}

/* Login/Account should look like the other top text links */
.account-area .login,
.account-area .account{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:.25rem .38rem !important;
  font-size:.72rem !important;
  font-weight:850 !important;
  color:var(--navy) !important;
}

.account-area .login:hover,
.account-area .account:hover,
.nav a:hover{
  color:var(--blue) !important;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Compact one-screen homepage */
.home-hero{
  margin:0 auto 4px !important;
  padding:0 !important;
}

.home-hero .hero-logo{
  max-width:min(520px, 82vw) !important;
  width:100% !important;
}

.home-tagline{
  margin:0 0 6px !important;
  font-size:clamp(1.05rem, 2.2vw, 1.55rem) !important;
}

.home-hero .actions{
  margin:6px 0 6px !important;
}

.home-hero .actions .btn,
.home-hero .actions button{
  padding:.58rem .85rem !important;
  font-size:.9rem !important;
}

.simple-title{
  margin:6px 0 8px !important;
}

.simple-title h2{
  font-size:clamp(1rem, 1.8vw, 1.35rem) !important;
}

.puzzle-types-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  max-width:680px !important;
  gap:10px !important;
}

.puzzle-types-grid .lab{
  min-height:190px !important;
}

.puzzle-types-grid .lab-art{
  height:105px !important;
  min-height:105px !important;
  padding:8px !important;
}

.puzzle-types-grid .icon{
  width:72px !important;
  height:72px !important;
  transform:scale(.62);
}

.puzzle-types-grid .lab-info{
  padding:10px !important;
  gap:5px !important;
}

.puzzle-types-grid .lab-info h3{
  font-size:1.05rem !important;
  margin:0 !important;
}

.puzzle-types-grid .lab-info p{
  font-size:.78rem !important;
  line-height:1.2 !important;
}

.puzzle-types-grid .chip{
  font-size:.68rem !important;
  padding:.16rem .4rem !important;
}

@media(max-height:740px){
  .site-header{
    padding:4px 0 8px !important;
  }

  .brand img{
    height:38px !important;
  }

  .home-hero .hero-logo{
    max-width:min(430px, 76vw) !important;
  }

  .puzzle-types-grid .lab{
    min-height:165px !important;
  }

  .puzzle-types-grid .lab-art{
    height:88px !important;
    min-height:88px !important;
  }

  .puzzle-types-grid .icon{
    transform:scale(.52);
  }
}

@media(max-width:640px){
  .puzzle-types-grid{
    grid-template-columns:1fr !important;
    max-width:360px !important;
  }
}

/* Clean top menu: text only, small, no ovals */
.nav a,
.nav .login-account{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:.18rem .34rem !important;
  font-size:.72rem !important;
  font-weight:850 !important;
  color:var(--navy) !important;
}

.nav a:hover,
.nav .login-account:hover,
.nav a.active{
  color:var(--blue) !important;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* Hide logged-in-only links unless logged in */
.nav .upload,
.nav .admin{
  display:none !important;
}

body.logged .nav .upload{
  display:inline-flex !important;
}

body.admin-on .nav .admin{
  display:inline-flex !important;
}

/* Compact one-screen homepage */
.home-hero{
  display:block !important;
  text-align:center !important;
  max-width:620px !important;
  margin:0 auto 2px !important;
  padding:0 !important;
}

.home-hero .hero-logo{
  max-width:min(380px, 72vw) !important;
  width:100% !important;
}

.home-tagline{
  margin:0 0 4px !important;
  font-size:clamp(.95rem, 1.8vw, 1.25rem) !important;
  font-weight:1000 !important;
}

.home-hero .actions{
  margin:4px 0 4px !important;
  gap:8px !important;
}

.home-hero .actions .btn,
.home-hero .actions button{
  padding:.46rem .72rem !important;
  font-size:.82rem !important;
}

.simple-title{
  margin:4px 0 6px !important;
  justify-content:center !important;
  text-align:center !important;
}

.simple-title h2{
  font-size:clamp(.95rem, 1.6vw, 1.2rem) !important;
}

.puzzle-types-grid{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  max-width:560px !important;
  gap:8px !important;
  margin:0 auto !important;
}

.puzzle-types-grid .lab{
  min-height:132px !important;
}

.puzzle-types-grid .lab-art{
  height:66px !important;
  min-height:66px !important;
  padding:2px !important;
}

.puzzle-types-grid .icon{
  width:58px !important;
  height:58px !important;
  transform:scale(.48) !important;
}

.puzzle-types-grid .lab-info{
  padding:7px !important;
  gap:3px !important;
}

.puzzle-types-grid .lab-info h3{
  font-size:.9rem !important;
  margin:0 !important;
}

.puzzle-types-grid .lab-info p{
  display:none !important;
}

.puzzle-types-grid .chips{
  gap:4px !important;
}

.puzzle-types-grid .chip{
  font-size:.58rem !important;
  padding:.1rem .32rem !important;
  border-width:1px !important;
}

@media(max-height:720px){
  .site-header{
    padding:2px 0 4px !important;
  }

  .brand img{
    height:34px !important;
  }

  .home-hero .hero-logo{
    max-width:min(310px, 66vw) !important;
  }

  .puzzle-types-grid{
    max-width:500px !important;
  }

  .puzzle-types-grid .lab{
    min-height:112px !important;
  }

  .puzzle-types-grid .lab-art{
    height:52px !important;
    min-height:52px !important;
  }

  .puzzle-types-grid .icon{
    transform:scale(.38) !important;
  }
}

@media(max-width:640px){
  .puzzle-types-grid{
    grid-template-columns:1fr !important;
    max-width:320px !important;
  }
}

/* Fix homepage puzzle type cards */
.puzzle-types-grid{
  max-width:720px !important;
  gap:12px !important;
}

.puzzle-types-grid .lab{
  min-height:155px !important;
  border-radius:26px !important;
}

.puzzle-types-grid .lab-art{
  height:92px !important;
  min-height:92px !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

.puzzle-types-grid .icon{
  position:relative !important;
  width:86px !important;
  height:86px !important;
  transform:none !important;
}

/* Rebuild the homepage mini icons so they stay centered */
.puzzle-types-grid .zone{
  width:72px !important;
  height:72px !important;
  border:10px solid var(--navy) !important;
  border-radius:48% 52% 42% 58% !important;
  transform:rotate(-10deg) !important;
}
.puzzle-types-grid .zone:after{
  width:16px !important;
  height:16px !important;
  left:46px !important;
  top:48px !important;
  border-radius:5px !important;
}

.puzzle-types-grid .link:before,
.puzzle-types-grid .link:after{
  width:46px !important;
  height:66px !important;
  border:9px solid var(--navy) !important;
  border-radius:32px !important;
  top:10px !important;
}
.puzzle-types-grid .link:before{
  left:13px !important;
  transform:rotate(-25deg) !important;
}
.puzzle-types-grid .link:after{
  right:13px !important;
  transform:rotate(25deg) !important;
}

.puzzle-types-grid .capture:before{
  width:28px !important;
  height:52px !important;
  border-radius:14px !important;
  left:29px !important;
  top:10px !important;
}
.puzzle-types-grid .capture:after{
  width:74px !important;
  height:48px !important;
  border:9px solid var(--navy) !important;
  border-top-color:transparent !important;
  border-radius:50% !important;
  left:6px !important;
  top:30px !important;
}

.puzzle-types-grid .knot:before{
  inset:10px !important;
  border:9px solid var(--navy) !important;
  border-radius:50% 42% 55% 45% !important;
  transform:rotate(25deg) !important;
}
.puzzle-types-grid .knot:after{
  left:22px !important;
  top:33px !important;
  font-size:.58rem !important;
  padding:.12rem .28rem !important;
}

.puzzle-types-grid .lab-info{
  padding:9px 12px 10px !important;
}

.puzzle-types-grid .lab-info h3{
  font-size:1.1rem !important;
  line-height:1.05 !important;
}

.puzzle-types-grid .chips{
  margin-top:3px !important;
}

.puzzle-types-grid .chip{
  font-size:.68rem !important;
  padding:.13rem .38rem !important;
}

/* Slightly tighten footer on homepage */
footer{
  padding-top:18px !important;
}


/* Puzzle type art cards */
.puzzle-types-grid{
  max-width:760px !important;
  gap:14px !important;
}

.puzzle-types-grid .art-lab-card{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  min-height:172px !important;
  padding:12px !important;
  border-radius:28px !important;
  background:white !important;
  overflow:hidden !important;
}

.art-lab-icon-wrap{
  height:88px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:4px;
}

.art-lab-icon{
  max-height:88px;
  max-width:92%;
  object-fit:contain;
  display:block;
}

.art-lab-text-wrap{
  height:38px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.art-lab-text{
  max-height:42px;
  max-width:92%;
  object-fit:contain;
  display:block;
}

.art-lab-chips{
  display:flex;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:5px;
}

.puzzle-types-grid .art-lab-card .chip{
  font-size:.62rem !important;
  padding:.1rem .34rem !important;
  border-width:1px !important;
}

/* Hide the old CSS-drawn icon parts */
.puzzle-types-grid .lab-art,
.puzzle-types-grid .lab-info,
.puzzle-types-grid .icon{
  display:none !important;
}

@media(max-height:720px){
  .puzzle-types-grid .art-lab-card{
    min-height:142px !important;
    padding:8px !important;
  }
  .art-lab-icon-wrap{
    height:70px;
  }
  .art-lab-icon{
    max-height:70px;
  }
  .art-lab-text-wrap{
    height:30px;
  }
  .art-lab-text{
    max-height:32px;
  }
}

@media(max-width:640px){
  .puzzle-types-grid{
    grid-template-columns:1fr !important;
    max-width:340px !important;
  }
}

/* Remove answer chips from homepage puzzle type boxes */
.puzzle-types-grid .art-lab-chips{
  display:none !important;
}

/* Give each puzzle type card its own LoopLab color theme */
.puzzle-types-grid .art-lab-card:nth-child(1){
  border-color:#16a6e8 !important;
  box-shadow:0 14px 34px rgba(22,166,232,.20) !important;
  background:linear-gradient(180deg,#ffffff 0%,#eefaff 100%) !important;
}

.puzzle-types-grid .art-lab-card:nth-child(2){
  border-color:#84c91e !important;
  box-shadow:0 14px 34px rgba(132,201,30,.20) !important;
  background:linear-gradient(180deg,#ffffff 0%,#f2ffe8 100%) !important;
}

.puzzle-types-grid .art-lab-card:nth-child(3){
  border-color:#8b4de8 !important;
  box-shadow:0 14px 34px rgba(139,77,232,.20) !important;
  background:linear-gradient(180deg,#ffffff 0%,#f5efff 100%) !important;
}

.puzzle-types-grid .art-lab-card:nth-child(4){
  border-color:#f7a51b !important;
  box-shadow:0 14px 34px rgba(247,165,27,.22) !important;
  background:linear-gradient(180deg,#ffffff 0%,#fff6e8 100%) !important;
}

/* Slightly enlarge the artwork now that chips are gone */
.puzzle-types-grid .art-lab-card{
  min-height:158px !important;
}

.art-lab-icon-wrap{
  height:92px !important;
  margin-bottom:2px !important;
}

.art-lab-icon{
  max-height:92px !important;
}

.art-lab-text-wrap{
  height:44px !important;
}

.art-lab-text{
  max-height:46px !important;
}

/* Puzzle page polish: rope-font puzzle type logo and guest play rules */
.puzzle-type-logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:-4px 0 8px;
}

.puzzle-type-logo{
  max-width:220px;
  max-height:72px;
  width:auto;
  height:auto;
  object-fit:contain;
}

.guest-play-message{
  margin:10px 0 2px;
  padding:10px 12px;
  border:2px solid #d9e8f7;
  border-radius:14px;
  background:#f5fbff;
  color:#31566f;
  font-weight:900;
  text-align:center;
  font-size:.92rem;
}

.answer.guest-locked{
  opacity:.55;
  cursor:not-allowed;
  filter:grayscale(.15);
}

.answer.guest-locked:hover{
  transform:none !important;
}

/* Played puzzle card banner */
.card{
  position:relative;
}

.played-card{
  opacity:.78;
}

.played-banner{
  position:absolute;
  top:16px;
  left:-34px;
  width:150px;
  transform:rotate(-24deg);
  z-index:5;
  background:#08214b;
  color:white;
  border:3px solid white;
  box-shadow:0 8px 18px rgba(8,33,75,.22);
  text-align:center;
  font-weight:1000;
  letter-spacing:.08em;
  padding:6px 0;
  border-radius:10px;
  pointer-events:none;
}

/* Played puzzle page lock */
.played-title-banner{
  display:block;
  background:#08214b;
  color:white;
  border:3px solid white;
  box-shadow:0 8px 18px rgba(8,33,75,.22);
  text-align:center;
  font-weight:1000;
  letter-spacing:.12em;
  padding:8px 10px;
  border-radius:14px;
  margin:0 0 12px;
}

.answer.played-locked{
  opacity:.55;
  cursor:not-allowed;
  filter:grayscale(.35);
}

.answer.played-locked:hover{
  transform:none !important;
}

/* Locked one-time rating stars */
.stars button.rating-locked{
  opacity:.65;
  cursor:not-allowed;
  transform:none !important;
}

/* ZoodleBug powered-by badge for shared login pages */
.zoodle-powered-badge{
  display:flex;
  align-items:center;
  gap:10px;
  width:fit-content;
  max-width:100%;
  margin:12px 0 18px;
  padding:8px 12px;
  border:2px solid #111;
  border-radius:999px;
  background:#fff;
  color:#111;
  font-weight:900;
  box-shadow:0 4px 0 rgba(0,0,0,.18);
}

.zoodle-powered-badge img{
  width:34px;
  height:34px;
  object-fit:contain;
  display:block;
}

.zoodle-powered-badge span{
  line-height:1.1;
}


/* Mobile hamburger navigation */
.mobile-menu-toggle{
  display:none;
  background:white !important;
  color:var(--navy) !important;
  border:2px solid var(--line) !important;
  box-shadow:0 4px 0 rgba(0,0,0,.12) !important;
  border-radius:999px !important;
  padding:.55rem .85rem !important;
  font-size:.9rem !important;
  font-weight:950 !important;
}

@media(max-width:760px){
  .site-header{
    flex-direction:row !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }

  .mobile-menu-toggle{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .site-header .nav{
    display:none !important;
    width:100% !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:6px !important;
    padding:10px 0 4px !important;
  }

  body.mobile-menu-open .site-header .nav{
    display:flex !important;
  }

  .site-header .nav a,
  .site-header .nav .login-account{
    width:100% !important;
    justify-content:flex-start !important;
    padding:.72rem .85rem !important;
    font-size:.92rem !important;
    border:1px solid #dce8f1 !important;
    border-radius:14px !important;
    background:#fff !important;
    text-decoration:none !important;
  }

  .site-header .brand img{
    max-width:220px !important;
    height:auto !important;
  }
}