:root{
  --home:#f5f5f3;
  --ink:#111;
  --muted:#666;
  --purple:#9b8be8;
  --purple-dark:#8875dc;
  --red:#d94b45;
  --orange:#ef963d;
  --centre:#7c3fc4;
  --yellow:#f2d43d;
  --blue:#35bdf2;
  --line:#dddddd;
  --soft:#f4f4f4;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--ink)}
button,input{font:inherit}
button{cursor:pointer}
.view{display:none;min-height:100vh}
.view.active{display:block}

/* HOME */
#homeView{background:var(--home)}
.home-page{width:min(1120px,100%);margin:auto;padding:28px 24px 70px}
.brand{display:flex;justify-content:center;align-items:center;gap:16px;margin:8px 0 36px}
.brand-mark{
  width:46px;height:46px;border-radius:50%;background:#111;color:#fff;
  display:grid;place-items:center;font:italic 1.9rem Georgia,serif
}
.brand-divider{width:1px;height:48px;background:#444}
.brand-title{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:900;letter-spacing:-.04em}
.home-content{max-width:920px;margin:auto}
.home-card{
  width:100%;border:0;border-radius:28px;padding:34px;min-height:350px;
  background:var(--purple);color:#111;text-align:left;
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  transition:background .12s ease
}
.home-card:hover{background:#9382e4}
.home-card:active{background:var(--purple-dark)}
.home-card:focus-visible{outline:4px solid #111;outline-offset:4px}
.home-copy h1{margin:0 0 8px;font:700 clamp(2.5rem,5vw,4.2rem)/.95 Georgia,serif;letter-spacing:-.035em}
.home-copy p{margin:0;color:#352f48;font-size:clamp(1rem,2vw,1.3rem);line-height:1.35}
.home-date{margin-top:58px;font-weight:800;font-size:1.08rem}

/* SHARED LOGO */
.grid-logo{display:grid;grid-template-columns:repeat(3,34px);gap:6px;padding:18px;border-radius:18px;background:rgba(255,255,255,.22)}
.grid-logo i{width:34px;height:34px;border-radius:7px}
.grid-logo i:nth-child(1),.grid-logo i:nth-child(3),.grid-logo i:nth-child(7),.grid-logo i:nth-child(9){background:var(--red)}
.grid-logo i:nth-child(2),.grid-logo i:nth-child(4),.grid-logo i:nth-child(6),.grid-logo i:nth-child(8){background:var(--orange)}
.grid-logo i:nth-child(5){background:var(--centre)}

/* INTRO */
#introView{background:var(--purple);position:relative}
#introView.active{display:grid;place-items:center}
.intro-back{position:absolute;left:22px;top:22px;border:0;background:transparent;font-weight:800}
.intro-panel{text-align:center;max-width:560px;padding:24px}
.intro-panel .grid-logo{display:inline-grid;margin-bottom:28px}
.intro-panel h2{margin:0;font:700 clamp(3rem,8vw,5rem)/.95 Georgia,serif;letter-spacing:-.04em}
.intro-panel p{font-size:1.2rem;color:#302940;margin:18px auto 30px}
.play-btn{border:0;border-radius:999px;background:#111;color:#fff;padding:15px 38px;font-weight:900;font-size:1.05rem}

/* GAME */
#gameView{background:#fff}
.game-page{
  min-height:100vh;
  width:min(1180px,100%);
  margin:auto;
  padding:18px 24px 24px;
}
.game-top{
  display:flex;justify-content:flex-start;align-items:center;margin-bottom:8px
}
.game-top button{border:0;background:transparent;padding:0;color:#555;font-weight:800}
.game-top strong{font-size:.9rem}
.game-layout{
  display:grid;
  grid-template-columns:minmax(360px,500px) minmax(390px,1fr);
  gap:42px;
  align-items:start;
}
.game-left h1{
  margin:0 0 5px;
  font-size:clamp(2.2rem,4vw,3.4rem);
  letter-spacing:-.045em;
}
.game-sub{margin:0 0 14px;color:var(--muted);line-height:1.4;font-size:.95rem}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.stat{background:var(--soft);border-radius:14px;padding:12px;text-align:center}
.stat b{display:block;font-size:1.2rem}
.stat span{display:block;color:var(--muted);font-size:.76rem;margin-top:3px}

/* BIG VISIBLE GRID */
.grid{
  width:min(100%,470px);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  position:relative;
  border-radius:24px;
  transition:.3s ease
}
.tile{
  aspect-ratio:1;
  border-radius:20px;
  display:grid;
  place-items:center;
  position:relative;
  background:#eef1f5;
  color:#172033;
  font-weight:950;
  font-size:clamp(3rem,7vw,5.6rem);
  box-shadow:inset 0 -7px 0 rgba(15,23,42,.11);
  transition:.2s ease
}
.tile .uses{
  position:absolute;right:8px;top:7px;
  min-width:23px;height:23px;padding:0 6px;border-radius:999px;
  display:none;place-items:center;background:rgba(0,0,0,.25);color:#fff;font-size:.72rem
}
.tile.used .uses{display:grid}
.tile.level1{background:linear-gradient(145deg,#fde047,#eab308);color:#422006}
.tile.level2{background:linear-gradient(145deg,#fb923c,#ea580c);color:#fff}
.tile.level3{background:linear-gradient(145deg,#ef4444,#b91c1c);color:#fff}
.tile.level4{background:linear-gradient(145deg,#a855f7,#6b21a8);color:#fff}
.tile.preview{
  outline:5px solid #22c8ee;
  outline-offset:-6px;
  box-shadow:0 0 0 4px rgba(34,200,238,.2),inset 0 0 0 3px rgba(255,255,255,.45)
}
.grid.complete{
  padding:10px;
  background:linear-gradient(145deg,rgba(250,204,21,.16),rgba(168,85,247,.16));
  box-shadow:0 0 0 6px rgba(250,204,21,.20)
}
.grid.complete::after{
  content:"ALL 8 LINES SOLVED";
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-5deg);
  padding:10px 16px;border-radius:999px;background:rgba(17,17,17,.94);
  color:#fde68a;border:2px solid rgba(250,204,21,.8);
  font-size:.78rem;font-weight:950;letter-spacing:.12em;white-space:nowrap;
  z-index:10;
  pointer-events:none
}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;color:#666;font-size:.78rem}
.key{display:flex;align-items:center;gap:5px}
.dot{width:11px;height:11px;border-radius:4px}
.y{background:#f2d43d}.o{background:#ef963d}.r{background:#d94b45}.p{background:#7c3fc4}

/* RIGHT SIDE */
.game-right{padding-top:4px}
.word-label{display:block;color:#6b7280;font-size:.82rem;margin-bottom:6px}
.word-row{display:grid;grid-template-columns:1fr auto;gap:10px}
.word-input{
  width:100%;min-width:0;border:1px solid #cfcfcf;border-radius:14px;
  padding:14px 15px;background:#fff;color:#111;
  font-weight:800;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase
}
.word-input:focus{outline:2px solid #8adcf2;border-color:#22b9df}
.submit{border:0;border-radius:14px;padding:0 18px;background:#111;color:#fff;font-weight:850}
.feedback{min-height:27px;margin:10px 0;text-align:center;font-weight:800}
.feedback.good{color:#15803d}.feedback.bad{color:#b42318}
.controls{display:flex;justify-content:center;margin-bottom:12px}
.give-up{border:0;border-radius:12px;background:#ececec;color:#111;padding:10px 18px;font-weight:800}

.accepted{margin-top:12px;border-top:1px solid var(--line);padding-top:13px}
.accepted h3{font-size:1rem;margin:0 0 9px}
.chips{display:flex;gap:7px;flex-wrap:wrap;min-height:28px}
.chip{padding:5px 9px;border-radius:999px;background:#eef4fa;color:#234;font-size:.78rem;font-weight:800}
.none{color:#9aa3b2;font-size:.9rem}
.solutions{display:none;margin-top:14px;border-top:1px solid var(--line);padding-top:13px}
.solutions.show{display:block}
.solution-row{background:#f5f5f5;border-radius:10px;padding:9px 10px;margin-top:7px}
.solution-row b{display:block;margin-bottom:3px;font-size:.83rem}
.solution-row span{font-size:.8rem;color:#666}
.end-actions{display:none;margin-top:14px;gap:8px}
.end-actions.show{display:flex}
.end-actions button{border:0;border-radius:12px;padding:10px 14px;font-weight:800}
.again{background:#111;color:#fff}.home-again{background:#ececec;color:#111}




/* A gentle travelling wiggle moves along one unfinished line. */
.tile.line-wiggle{
  animation:tileRippleWiggle .42s ease-in-out 1 !important;
  transform-origin:50% 55%;
  z-index:4;
}
@keyframes tileRippleWiggle{
  0%,100%{transform:translateX(0) rotate(0deg)}
  25%{transform:translateX(-2.4px) rotate(-.7deg)}
  50%{transform:translateX(2.4px) rotate(.7deg)}
  75%{transform:translateX(-1.2px) rotate(-.35deg)}
}
@media (prefers-reduced-motion: reduce){
  .tile.line-wiggle{animation:none !important}
}
@media(max-width:560px){
  .home-page{padding:18px 14px 50px}
  .brand{gap:12px;margin-bottom:26px}
  .brand-mark{width:38px;height:38px;font-size:1.55rem}
  .brand-divider{height:40px}
  .brand-title{font-size:2.15rem}
  .home-card{padding:24px 18px;min-height:325px;gap:14px}
  .home-copy h1{font-size:2.25rem}
  .home-copy p{font-size:.93rem;max-width:185px}
  .home-date{margin-top:52px;font-size:.93rem}
  .grid-logo{grid-template-columns:repeat(3,26px);gap:5px;padding:14px}
  .grid-logo i{width:26px;height:26px}

  .game-page{padding:12px 14px 24px}
  .game-layout{gap:18px}
  .game-left h1{font-size:2rem}
  .grid{width:min(100%,350px);gap:8px}
  .tile{border-radius:15px;font-size:clamp(2.6rem,18vw,4.2rem)}
  .word-row{grid-template-columns:1fr}
  .submit{min-height:45px}
}

.mobile-keyboard{display:none}

@media(max-width:700px){
  body{overflow-x:hidden}
  #gameView{min-height:100vh}
  .game-page{min-height:100vh;padding:7px 9px 8px}
  .game-top{margin-bottom:2px;min-height:22px}
  .game-top button{font-size:.74rem}
  .game-layout{display:flex;flex-direction:column;gap:6px}
  .game-left h1{font-size:1.48rem;margin:0 0 2px;text-align:center}
  .game-sub{display:none}
  .stats{grid-template-columns:1fr 1fr;gap:6px;margin:0 auto 5px;width:min(100%,360px)}
  .stat{padding:6px 8px;border-radius:9px}
  .stat b{font-size:.96rem}
  .stat span{font-size:.63rem}
  .grid{width:min(76vw,310px);gap:6px;margin:0 auto}
  .tile{border-radius:13px;font-size:clamp(2.3rem,13vw,3.8rem);box-shadow:inset 0 -4px 0 rgba(15,23,42,.10)}
  .tile .uses{right:5px;top:4px;min-width:19px;height:19px;font-size:.62rem}
  .legend{display:none}
  .game-right{padding:0;display:flex;flex-direction:column;gap:6px}
  .word-label{display:none}
  .word-row{display:grid;grid-template-columns:1fr auto;gap:6px;width:min(100%,420px);margin:0 auto}
  .word-input{min-height:40px;padding:8px 10px;border-radius:9px;font-size:.96rem;text-align:center}
  .submit{min-height:40px;padding:0 12px;border-radius:9px;font-size:.78rem}
  .feedback{min-height:17px;margin:0;font-size:.74rem;line-height:1.2}
  .controls{margin:0;order:6}
  .give-up{padding:5px 10px;border-radius:9px;font-size:.72rem}
  .accepted{order:2;margin:0;border-top:0;padding-top:0;width:min(100%,420px);margin-inline:auto}
  .accepted h3{font-size:.8rem;margin:0 0 4px}
  .chips{min-height:24px;gap:4px;max-height:52px;overflow:auto}
  .chip{padding:4px 7px;font-size:.68rem}
  .solutions{order:5;margin-top:0;padding-top:6px}
  .solutions h3{font-size:.78rem}
  .solution-row{padding:6px 7px;margin-top:4px}
  .end-actions{order:5;margin-top:0;justify-content:center}
  .end-actions button{padding:6px 9px;font-size:.72rem}

  .mobile-keyboard{
    display:block;order:4;width:100%;max-width:480px;margin:1px auto 0;
    user-select:none;-webkit-user-select:none;touch-action:manipulation
  }
  .key-row{display:flex;justify-content:center;gap:3px;margin-bottom:4px}
  .key{
    flex:1 1 0;min-width:0;height:42px;padding:0;border:0;border-radius:6px;
    background:#d9d9d9;color:#111;font-size:.76rem;font-weight:800
  }
  .key:active{background:#bfc2c7;transform:translateY(1px)}
  .key-wide{flex:1.5 1 0;font-size:.64rem}
  .key-spacer{flex:.5 1 0}

  @media(max-height:760px){
    .game-page{padding-top:4px}
    .game-left h1{font-size:1.3rem}
    .grid{width:min(68vw,280px)}
    .tile{font-size:clamp(2rem,11vw,3.3rem)}
    .key{height:37px}
    .stats{margin-bottom:3px}
  }
}


/* Mobile alignment polish */
@media(max-width:700px){
  .game-page,
  .game-layout,
  .game-left,
  .game-right{
    text-align:center;
  }

  .game-left,
  .game-right{
    width:100%;
    margin-left:auto;
    margin-right:auto;
  }

  .word-row,
  .accepted,
  .mobile-keyboard,
  .stats{
    margin-left:auto;
    margin-right:auto;
  }

  .accepted h3{
    text-align:center;
  }

  .chips{
    justify-content:center;
  }

  .feedback,
  .controls,
  .solutions,
  .end-actions{
    text-align:center;
  }

  .key-row{
    align-items:center;
  }

  .key{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1;
  }

  .key-wide{
    text-align:center;
  }
}


/* Fixed mobile keyboard */
@media(max-width:700px){
  .game-page{
    padding-bottom:168px;
  }

  .mobile-keyboard{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:50;
    width:100%;
    max-width:none;
    margin:0;
    padding:7px 7px calc(7px + env(safe-area-inset-bottom));
    background:#ffffff;
    border-top:1px solid #d9d9d9;
  }

  .mobile-keyboard .key-row{
    width:min(100%,480px);
    margin-left:auto;
    margin-right:auto;
  }

  .accepted .chips{
    max-height:70px;
    overflow:auto;
  }

  @media(max-height:760px){
    .game-page{
      padding-bottom:150px;
    }
  }
}


/* Mobile: submit with the built-in ENTER key; hide desktop Play Word button */
@media(max-width:700px){
  .word-row{
    grid-template-columns:1fr;
  }

  .submit{
    display:none !important;
  }

  .word-input{
    width:100%;
  }

  .key[data-key="ENTER"]{
    background:#111;
    color:#fff;
  }

  .key[data-key="ENTER"]:active{
    background:#2a2a2a;
  }
}


/* Follow the player's operating-system/browser light or dark preference. */
:root{color-scheme:light dark}

@media(prefers-color-scheme:dark){
  html,body{
    background:#17181b;
    color:#f4f4f2;
  }

  #homeView,
  #gameView,
  .game-page{
    background:#17181b;
    color:#f4f4f2;
  }

  .game-left,
  .game-right,
  .accepted,
  .solutions{
    color:#f4f4f2;
  }

  .game-sub,
  .word-label,
  .accepted h3,
  .solutions h3,
  .stat span{
    color:#b9bbc1;
  }

  .stat{
    background:#24262b;
    border-color:#373a40;
    color:#f4f4f2;
  }

  .word-input{
    background:#22242a;
    border-color:#50535a;
    color:#fff;
    caret-color:#fff;
  }

  .word-input::placeholder{
    color:#8e929a;
  }

  .feedback{
    color:#d5d7dc;
  }

  .chip{
    background:#292c31;
    border-color:#42464d;
    color:#f2f2f2;
  }

  .solution-row{
    background:#22242a;
    border-color:#3e4249;
    color:#f4f4f2;
  }

  .game-top button,
  .give-up,
  .end-actions button{
    color:#ececef;
  }

  /* Keep the semantic game colours recognisable in both modes. */
  .tile{
    border-color:rgba(255,255,255,.18);
  }

  /* Desktop action button */
  .submit{
    background:#f0f0ef;
    color:#17181b;
  }

  @media(max-width:700px){
    .mobile-keyboard{
      background:#17181b;
      border-top-color:#34363b;
    }

    .key{
      background:#3a3d43;
      color:#f7f7f7;
    }

    .key:active{
      background:#50545b;
    }

    .key[data-key="ENTER"]{
      background:#f0f0ef;
      color:#17181b;
    }

    .key[data-key="ENTER"]:active{
      background:#d7d7d5;
    }
  }
}


/* Theme polish */
@media(prefers-color-scheme:dark){
  /* Intro/lander text should follow the dark configuration */
  #introView,
  #introView .intro-panel,
  #introView .intro-panel h2,
  #introView .intro-panel p,
  #introView .intro-back{
    color:#f4f4f2 !important;
  }

  /* Keep Play button intentionally black with white text */
  #introView .play-btn{
    background:#111 !important;
    color:#fff !important;
  }

  /* Give Up: light button, dark text in dark mode */
  .give-up{
    background:#ececec !important;
    color:#111 !important;
  }
}

@media(prefers-color-scheme:light){
  /* Intro/lander text should follow the light configuration */
  #introView,
  #introView .intro-panel,
  #introView .intro-panel h2,
  #introView .intro-panel p,
  #introView .intro-back{
    color:#111 !important;
  }

  /* Give Up: dark text on light-grey button */
  .give-up{
    background:#ececec !important;
    color:#111 !important;
  }
}

/* Mobile: save vertical space by removing the repeated game title */
@media(max-width:700px){
  .game-left h1{
    display:none !important;
  }
}


/* Ensure mobile keyboard remains visible and fixed after theme overrides */
@media(max-width:700px){
  .mobile-keyboard{
    display:block !important;
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    z-index:100 !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:7px 7px calc(7px + env(safe-area-inset-bottom)) !important;
    border-top:1px solid #d9d9d9;
    background:#fff;
  }

  .mobile-keyboard .key-row{
    display:flex !important;
    width:min(100%,480px);
    margin-left:auto;
    margin-right:auto;
  }

  .key{
    display:flex !important;
    align-items:center;
    justify-content:center;
  }

  .game-page{
    padding-bottom:168px !important;
  }
}

@media(max-width:700px) and (prefers-color-scheme:dark){
  .mobile-keyboard{
    background:#17181b !important;
    border-top-color:#34363b !important;
  }

  .key{
    background:#3a3d43 !important;
    color:#f7f7f7 !important;
  }

  .key[data-key="ENTER"]{
    background:#f0f0ef !important;
    color:#17181b !important;
  }
}


@media(prefers-color-scheme:dark){
  .end-actions .again,
  .end-actions .home-again{
    background:#ececec !important;
    color:#111 !important;
    border-color:#ececec !important;
  }
}


/* How to Play */
.help-btn{
  width:34px;height:34px;border:2px solid currentColor !important;
  border-radius:50% !important;background:transparent !important;
  display:grid;place-items:center;padding:0 !important;
  font-weight:900;font-size:1rem;line-height:1;
}
.how-overlay{
  position:fixed;inset:0;z-index:200;
  display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(0,0,0,.58);
}
.how-overlay.open{display:flex}
.how-card{
  position:relative;width:min(720px,100%);
  max-height:min(88vh,760px);overflow:auto;
  border-radius:20px;padding:28px;
  background:#fff;color:#111;
  box-shadow:0 24px 70px rgba(0,0,0,.25);
}
.how-close{
  position:absolute;right:15px;top:12px;
  width:36px;height:36px;border:0;background:transparent;
  color:inherit;font-size:2rem;line-height:1;display:grid;place-items:center
}
.how-page{display:none}
.how-page.active{display:block}
.how-card h2{
  margin:0 40px 22px;text-align:center;
  font-size:1.55rem
}
.how-lead{text-align:center;font-weight:850;margin:0 0 22px}
.how-rule{
  display:grid;grid-template-columns:40px 1fr;gap:12px;
  align-items:start;margin:14px 0
}
.how-rule p{margin:0;line-height:1.5}
.how-icon{
  width:34px;height:34px;border:2px solid #8a4be0;border-radius:50%;
  color:#8a4be0;display:grid;place-items:center;font-weight:900
}
.how-example{
  margin:24px auto 4px;padding-top:20px;border-top:1px solid #ddd;
  text-align:center;max-width:360px
}
.example-label{font-size:.7rem;font-weight:900;letter-spacing:.08em;margin-bottom:9px}
.example-letters{display:flex;justify-content:center;gap:5px;margin-bottom:12px}
.example-letters span{
  width:48px;height:48px;border-radius:8px;display:grid;place-items:center;
  font-size:1.35rem;font-weight:900
}
.example-letters span:nth-child(1){background:#f2d43d}
.example-letters span:nth-child(2){background:#ef963d}
.example-letters span:nth-child(3){background:#d94b45;color:#fff}
.example-word{
  width:min(220px,90%);margin:9px auto 2px;
  border-radius:9px;padding:9px 12px;background:#dcefc9;font-weight:900
}
.example-word b{float:right}
.how-example small{display:block;color:#666;margin-bottom:8px}
.how-grid-wrap{display:grid;place-items:center;margin:28px 0}
.how-mini-grid{
  position:relative;width:240px;height:240px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:4px
}
.how-mini-grid span{
  position:relative;z-index:2;background:#f5f5f5;border:1px solid #cfcfcf;
  display:grid;place-items:center;font-size:1.35rem;font-weight:900
}
.route{position:absolute;z-index:3;pointer-events:none;background:#ef963d;border-radius:99px}
.route.r1,.route.r2,.route.r3{left:-10%;width:120%;height:3px}
.route.r1{top:16.6%}.route.r2{top:50%}.route.r3{top:83.3%}
.route.c1,.route.c2,.route.c3{top:-10%;height:120%;width:3px}
.route.c1{left:16.6%}.route.c2{left:50%}.route.c3{left:83.3%}
.route.d1,.route.d2{
  left:50%;top:50%;width:145%;height:3px;transform-origin:center;
  background:#8a4be0
}
.route.d1{transform:translate(-50%,-50%) rotate(45deg)}
.route.d2{transform:translate(-50%,-50%) rotate(-45deg)}
.how-finish{text-align:center;font-weight:900;margin:22px 0 8px}
.how-dots{display:flex;justify-content:center;gap:9px;margin-top:20px}
.how-dot{width:9px;height:9px;border:0;border-radius:50%;padding:0;background:#aaa}
.how-dot.active{background:#8a4be0}

@media(max-width:700px){
  .game-top{justify-content:space-between !important}
  .help-btn{width:31px;height:31px;font-size:.9rem}
  .how-overlay{padding:8px;align-items:stretch}
  .how-card{
    margin:auto;width:min(100%,430px);max-height:calc(100vh - 16px);
    border-radius:18px;padding:24px 18px 18px
  }
  .how-card h2{font-size:1.35rem;margin-bottom:18px}
  .how-rule{grid-template-columns:34px 1fr;gap:9px;margin:12px 0;text-align:left}
  .how-icon{width:30px;height:30px;font-size:.85rem}
  .how-rule p{font-size:.9rem}
  .how-mini-grid{width:210px;height:210px}
  .how-example{margin-top:18px;padding-top:16px}
  .example-letters span{width:44px;height:44px}
}

@media(prefers-color-scheme:dark){
  .how-card{background:#17181b;color:#f4f4f2;border:1px solid #33363d}
  .how-example{border-top-color:#383b42}
  .how-example small{color:#b9bbc1}
  .how-mini-grid span{background:#22242a;border-color:#474a51;color:#fff}
  .example-word{background:#405b31;color:#fff}
  .how-dot{background:#6f7278}
  .how-dot.active{background:#9b5de5}
}


/* Fix How to Play button position on desktop and mobile */
.game-top{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
.help-btn{
  margin-left:auto !important;
  flex:0 0 auto !important;
}


/* Top-right actions */
.top-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.stats-btn{
  width:34px;height:34px;border:2px solid currentColor !important;
  border-radius:50% !important;background:transparent !important;
  display:flex;align-items:flex-end;justify-content:center;
  gap:2px;padding:7px 7px 6px !important;color:inherit;
}
.stats-btn .bar{
  width:4px;background:currentColor;border-radius:2px 2px 0 0;
}
.stats-btn .b1{height:7px}
.stats-btn .b2{height:13px}
.stats-btn .b3{height:19px}

/* Statistics overlay */
.stats-overlay{
  position:fixed;inset:0;z-index:210;
  display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(0,0,0,.58);
}
.stats-overlay.open{display:flex}
.stats-card{
  position:relative;width:min(520px,100%);
  border-radius:20px;padding:28px 24px 24px;
  background:#fff;color:#111;
  box-shadow:0 24px 70px rgba(0,0,0,.25);
}
.stats-close{
  position:absolute;right:15px;top:12px;
  width:36px;height:36px;border:0;background:transparent;
  color:inherit;font-size:2rem;line-height:1;display:grid;place-items:center
}
.stats-card h2{
  margin:0 40px 24px;text-align:center;font-size:1.55rem
}
.stats-grid-panel{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.stats-metric{
  text-align:center;
  padding:14px 8px;
}
.stats-metric strong{
  display:block;
  font-size:2rem;
  line-height:1;
  margin-bottom:8px;
}
.stats-metric span{
  display:block;
  font-size:.78rem;
  line-height:1.2;
  color:#666;
}
.stats-note{
  margin:22px 0 0;
  text-align:center;
  color:#666;
  font-size:.82rem;
  line-height:1.45;
}

@media(max-width:700px){
  .top-actions{gap:6px}
  .stats-btn,.help-btn{width:31px;height:31px}
  .stats-btn{padding:6px !important}
  .stats-card{
    width:min(100%,430px);
    padding:24px 16px 20px;
  }
  .stats-grid-panel{gap:2px}
  .stats-metric{padding:10px 3px}
  .stats-metric strong{font-size:1.65rem}
  .stats-metric span{font-size:.69rem}
}

@media(prefers-color-scheme:dark){
  .stats-card{
    background:#17181b;color:#f4f4f2;border:1px solid #33363d
  }
  .stats-metric span,
  .stats-note{
    color:#b9bbc1;
  }
}


.fastest-panel{
  margin:8px auto 22px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-size:.9rem;
}
.fastest-panel span{color:#666}
.fastest-panel strong{font-size:1.3rem}

.distribution-panel{
  border-top:1px solid #e3e3e3;
  padding-top:18px;
  margin-top:8px;
}
.distribution-panel h3{
  text-align:center;
  margin:0 0 4px;
  font-size:1rem;
}
.distribution-panel > p{
  margin:0 0 14px;
  text-align:center;
  color:#777;
  font-size:.75rem;
}
.distribution-chart{
  display:grid;
  gap:6px;
}
.dist-row{
  display:grid;
  grid-template-columns:20px 1fr;
  align-items:center;
  gap:8px;
}
.dist-label{
  text-align:right;
  font-size:.78rem;
  font-weight:800;
}
.dist-track{
  min-height:24px;
  display:flex;
  align-items:center;
}
.dist-bar{
  min-width:28px;
  height:24px;
  padding:0 7px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  border-radius:4px;
  background:#8a4be0;
  color:#fff;
  font-size:.72rem;
  font-weight:900;
  transition:width .25s ease;
}
.dist-bar.zero{
  background:#c9c9c9;
}

@media(max-width:700px){
  .fastest-panel{margin-bottom:16px}
  .distribution-panel{padding-top:14px}
  .dist-row{gap:6px}
  .dist-track{min-height:21px}
  .dist-bar{height:21px;min-width:25px;font-size:.68rem}
}

@media(prefers-color-scheme:dark){
  .fastest-panel span,
  .distribution-panel > p{
    color:#b9bbc1;
  }
  .distribution-panel{
    border-top-color:#383b42;
  }
  .dist-bar.zero{
    background:#555960;
  }
}


/* Eight Lines splash: keep copy black regardless of device colour scheme */
#introView,
#introView .intro-panel,
#introView .intro-panel h1,
#introView .intro-panel h2,
#introView .intro-panel p,
#introView .intro-back,
#introView button.intro-back{
  color:#111 !important;
}

/* Play remains the strong black/white action */
#introView .play-btn,
#introView #playBtn{
  background:#111 !important;
  color:#fff !important;
}


.stats-reset-wrap{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid #e3e3e3;
  text-align:center;
}
.reset-stats-btn{
  border:0;
  background:transparent;
  color:#777;
  text-decoration:underline;
  font-size:.8rem;
  cursor:pointer;
}
.reset-confirm{
  margin-top:12px;
  padding:14px;
  border-radius:12px;
  background:#f5f5f5;
}
.reset-confirm p{
  margin:0 0 12px;
  font-size:.82rem;
  line-height:1.45;
  color:#555;
}
.reset-actions{
  display:flex;
  justify-content:center;
  gap:8px;
}
.reset-actions button{
  border:0;
  border-radius:10px;
  padding:8px 13px;
  font-weight:800;
  cursor:pointer;
  background:#e8e8e8;
  color:#111;
}
.reset-actions .danger{
  background:#b42318;
  color:#fff;
}
@media(prefers-color-scheme:dark){
  .stats-reset-wrap{border-top-color:#383b42}
  .reset-stats-btn{color:#b9bbc1}
  .reset-confirm{background:#22242a}
  .reset-confirm p{color:#d3d5da}
  .reset-actions button{background:#3a3d43;color:#fff}
  .reset-actions .danger{background:#c43b31;color:#fff}
}


/* Mobile keyboard comfort improvements */
@media(max-width:700px){
  .mobile-keyboard{
    padding:8px 4px calc(9px + env(safe-area-inset-bottom)) !important;
  }

  .mobile-keyboard .key-row{
    width:min(100%,520px) !important;
    gap:2px !important;
    margin-bottom:5px !important;
  }

  .key{
    height:50px !important;
    border-radius:7px !important;
    font-size:.86rem !important;
    font-weight:850 !important;
    padding:0 !important;
    min-width:0 !important;
    touch-action:manipulation;
  }

  .key-wide{
    flex:1.7 1 0 !important;
    font-size:.7rem !important;
  }

  .key-spacer{
    flex:.28 1 0 !important;
  }

  .game-page{
    padding-bottom:192px !important;
  }

  @media(max-height:760px){
    .key{
      height:46px !important;
    }

    .game-page{
      padding-bottom:180px !important;
    }
  }
}


#giveUpBtn{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  text-decoration:underline;text-underline-offset:3px;font-size:.8rem !important;
  font-weight:650 !important;opacity:.66;padding:7px 10px !important;min-height:32px !important;
}
#giveUpBtn:hover{opacity:1}
.giveup-overlay{
  position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.45)
}
.giveup-overlay.show{display:flex}
.giveup-dialog{
  width:min(360px,calc(100vw - 32px));background:#fff;color:#111;
  border:1px solid #d7d7d7;border-radius:18px;padding:22px;text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.24)
}
.giveup-dialog h2{margin:0 0 8px;font-size:1.15rem}
.giveup-dialog p{margin:0 0 20px;line-height:1.4;opacity:.72;font-size:.9rem}
.giveup-actions{display:flex;gap:10px}
.giveup-actions button{flex:1;min-height:46px;border-radius:10px;border:1px solid #bbb;font-weight:800}
#cancelGiveUp{background:#111;color:#fff}
#confirmGiveUp{background:transparent;color:#111}
@media(max-width:700px){
  #giveUpBtn{display:block;margin:5px auto 0 !important;font-size:.76rem !important}
}
@media(prefers-color-scheme:dark){
  .giveup-dialog{background:#1b1c20;color:#f5f5f5;border-color:#444}
  #cancelGiveUp{background:#f5f5f5;color:#111}
  #confirmGiveUp{color:#f5f5f5;border-color:#666}
}


/* Risk & Bank */
.run-chip{
  width:max-content;
  max-width:100%;
  margin:3px auto 7px;
  padding:7px 12px;
  border:1px solid rgba(120,120,120,.35);
  border-radius:999px;
  text-align:center;
  font-size:.78rem;
  font-weight:850;
}
.run-overlay{
  position:fixed;inset:0;z-index:1200;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(0,0,0,.5)
}
.run-overlay.show{display:flex}
.run-dialog{
  width:min(390px,calc(100vw - 28px));
  background:#fff;color:#111;border-radius:20px;
  padding:24px;text-align:center;
  box-shadow:0 22px 60px rgba(0,0,0,.28)
}
.run-kicker{font-size:.72rem;font-weight:900;letter-spacing:.12em;opacity:.56}
.run-score{font-size:3.1rem;font-weight:950;line-height:1;margin:8px 0}
.run-detail{font-size:.9rem;line-height:1.5;opacity:.78;margin:8px 0 20px}
.run-actions{display:grid;gap:9px}
.run-actions button{
  min-height:50px;border-radius:11px;border:1px solid #bbb;
  font-weight:900;font-size:.94rem
}
#riskRunBtn{background:#111;color:#fff}
#bankRunBtn{background:transparent;color:#111}
.run-small{margin-top:11px;font-size:.75rem;line-height:1.4;opacity:.62}

.bank-stats-panel{
  border-top:1px solid #e3e3e3;
  padding-top:18px;margin-top:18px
}
.bank-stats-panel h3{text-align:center;margin:0 0 13px;font-size:1rem}
.bank-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.bank-stats-grid div{text-align:center;padding:8px 4px}
.bank-stats-grid strong{display:block;font-size:1.45rem;margin-bottom:5px}
.bank-stats-grid span{font-size:.7rem;line-height:1.2;color:#666}

@media(max-width:700px){
  /* Timer is gone, so Lines Found owns the stats row. */
  .stats{grid-template-columns:1fr !important;width:min(100%,240px) !important}
  /* Keep the larger mobile keyboard. */
  .mobile-keyboard{padding:8px 4px calc(9px + env(safe-area-inset-bottom)) !important}
  .mobile-keyboard .key-row{
    width:min(100%,520px) !important;gap:2px !important;margin-bottom:5px !important
  }
  .key{
    height:50px !important;border-radius:7px !important;font-size:.86rem !important;
    font-weight:850 !important;padding:0 !important;min-width:0 !important
  }
  .key-wide{flex:1.7 1 0 !important;font-size:.7rem !important}
  .key-spacer{flex:.28 1 0 !important}
  .game-page{padding-bottom:192px !important}
}
@media(max-width:700px) and (max-height:760px){
  .key{height:46px !important}
  .game-page{padding-bottom:180px !important}
}
@media(prefers-color-scheme:dark){
  .run-dialog{background:#1b1c20;color:#f5f5f5}
  #riskRunBtn{background:#f5f5f5;color:#111}
  #bankRunBtn{color:#f5f5f5;border-color:#666}
  .bank-stats-panel{border-top-color:#383b42}
  .bank-stats-grid span{color:#b9bbc1}
}




#giveUpBtn{
  display:inline-block;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:.8rem !important;
  font-weight:650 !important;
  opacity:.68;
  padding:7px 10px !important;
}
#giveUpBtn:hover{opacity:1}


#timeStat,#timer,#timerStat,.timer,.time-stat{display:none !important}


.stats-grid-panel{
  grid-template-columns:repeat(2,1fr) !important;
  max-width:320px;
  margin:0 auto;
}


}


.accepted-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:5px;
}
.accepted-head h3{margin:0 !important}
.accepted-head #giveUpBtn{
  display:inline-block;
  margin:0 !important;
  padding:2px 0 !important;
  min-height:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:inherit !important;
  font-size:.74rem !important;
  font-weight:650 !important;
  opacity:.62 !important;
  text-decoration:underline !important;
  text-underline-offset:3px;
}
.accepted-head #giveUpBtn:hover{opacity:1 !important}

@media(max-width:700px){
  .accepted-head{
    width:100%;
    max-width:420px;
    margin-left:auto;
    margin-right:auto;
  }
}


.giveup-overlay{display:none !important}

/* Lines Found progression */
#lineStat{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  padding:4px 9px;
  border-radius:999px;
  transition:background .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease;
}
#lineStat.lines-0{background:transparent;color:inherit}
#lineStat.lines-1,#lineStat.lines-2{background:#f2d43d;color:#111}
#lineStat.lines-3,#lineStat.lines-4{background:#ef963d;color:#111}
#lineStat.lines-5,#lineStat.lines-6{background:#d94b45;color:#fff}
#lineStat.lines-7{background:#8a4be0;color:#fff}
#lineStat.lines-8{
  background:#d4af37;
  color:#111;
  box-shadow:0 0 0 0 rgba(212,175,55,.55);
}
#lineStat.gold-burst{
  animation:goldBurst .9s ease-out 1;
}
@keyframes goldBurst{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(212,175,55,.75)}
  32%{transform:scale(1.26);box-shadow:0 0 0 14px rgba(212,175,55,.34),0 0 30px 10px rgba(255,210,70,.45)}
  62%{transform:scale(.96);box-shadow:0 0 0 22px rgba(212,175,55,0),0 0 42px 18px rgba(255,210,70,.16)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(212,175,55,0)}
}
@media(prefers-reduced-motion:reduce){
  #lineStat.gold-burst{animation:none}
}


.give-up-below{
  display:flex;
  justify-content:center;
  width:100%;
  margin:9px 0 1px;
}
.give-up-below #giveUpBtn{
  display:inline-block !important;
  margin:0 !important;
  padding:3px 5px !important;
  min-height:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:inherit !important;
  font-size:.74rem !important;
  font-weight:650 !important;
  opacity:.62 !important;
  text-decoration:underline !important;
  text-underline-offset:3px;
}


.tie-example .example-letters{
  display:flex;
  justify-content:center;
  gap:7px;
  margin:9px 0 12px;
}
.tie-example .example-letters span{
  display:inline-flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border:2px solid currentColor;
  border-radius:7px;
  font-weight:900;
  font-size:1.05rem;
}
.tie-example .example-word{
  margin:6px 0;
}


/* How-to: highlight T-I-E inside ACTIVE and EIGHT */
.tie-t,.tie-i,.tie-e{display:inline-block;min-width:1.05em;text-align:center;border-radius:4px;margin:0 1px;font-weight:950}
.tie-t{background:#f2d43d;color:#111}
.tie-i{background:#ef963d;color:#111}
.tie-e{background:#d94b45;color:#fff}


/* Qube card on Worderful Games home */
.home-content{
  gap:14px;
}
.qube-card{
  background:#bfe7f7 !important;
  border-color:#8fcde8 !important;
  color:#111 !important;
  text-decoration:none !important;
}
.qube-card:hover{
  background:#afe0f4 !important;
  border-color:#72c0e0 !important;
}
.qube-card .home-copy,
.qube-card .home-copy h1,
.qube-card .home-copy p,
.qube-card .home-date{
  color:#111 !important;
}
.qube-card-mark{
  position:relative;
  width:76px;
  height:100px;
  flex:0 0 76px;
}
.qube-card-mark i{
  position:absolute;
  width:22px;
  height:22px;
  border:1px solid rgba(17,17,17,.55);
  background:rgba(255,255,255,.32);
  border-radius:3px;
}
.qube-card-mark .q1{left:27px;top:1px}
.qube-card-mark .q2{left:27px;top:25px}
.qube-card-mark .q3{left:51px;top:25px}
.qube-card-mark .q4{left:27px;top:49px}
.qube-card-mark .q5{left:3px;top:49px}
.qube-card-mark .q6{left:27px;top:73px}

@media(prefers-color-scheme:dark){
  .qube-card{
    background:#9fd7f2 !important;
    border-color:#72c0e0 !important;
    color:#111 !important;
  }
}


/* Compact Worderful game cards */
.home-content{gap:10px !important}
.home-card{min-height:0 !important;padding-top:14px !important;padding-bottom:14px !important}
.home-card .home-copy h1{margin-bottom:4px !important}
.home-card .home-copy p{margin-top:0 !important;margin-bottom:6px !important}
@media(max-width:700px){
  .home-content{gap:8px !important}
  .home-card{padding:11px 14px !important;min-height:104px !important}
  .home-card .home-copy h1{font-size:1.65rem !important;line-height:1.05 !important}
  .home-card .home-copy p{font-size:.82rem !important;line-height:1.25 !important}
  .grid-logo,.qube-card-mark{transform:scale(.88);transform-origin:center}
}


/* v1.9 definitive Games home spacing */
.home-content{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}
.home-card{margin:0 !important}
.qube-card .home-copy h1{
  display:flex;
  align-items:center;
  gap:8px;
}
.qube-beta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 6px;
  border-radius:999px;
  font-size:.55rem;
  line-height:1;
  letter-spacing:.08em;
  font-weight:950;
  background:rgba(17,17,17,.12);
  color:#111;
}
@media(max-width:700px){
  .home-content{gap:10px !important}
  .home-card{
    min-height:96px !important;
    padding:10px 14px !important;
  }
}

.home-content{gap:12px!important}
.qube-card-mark{width:100px!important;height:100px!important;flex:0 0 100px!important;border:1px solid rgba(17,17,17,.22)!important;border-radius:12px!important;background:rgba(255,255,255,.22)!important;position:relative!important;transform:none!important}
.qube-card-mark i{width:20px!important;height:20px!important}
.qube-card-mark .q1{left:7px!important;top:40px!important}.qube-card-mark .q2{left:29px!important;top:40px!important}.qube-card-mark .q3{left:29px!important;top:18px!important}.qube-card-mark .q4{left:51px!important;top:40px!important}.qube-card-mark .q5{left:51px!important;top:62px!important}.qube-card-mark .q6{left:73px!important;top:40px!important}
@media(max-width:700px){.qube-card-mark{width:84px!important;height:84px!important;flex-basis:84px!important}.qube-card-mark i{width:17px!important;height:17px!important}.qube-card-mark .q1{left:5px!important;top:33px!important}.qube-card-mark .q2{left:24px!important;top:33px!important}.qube-card-mark .q3{left:24px!important;top:14px!important}.qube-card-mark .q4{left:43px!important;top:33px!important}.qube-card-mark .q5{left:43px!important;top:52px!important}.qube-card-mark .q6{left:62px!important;top:33px!important}}

/* v2.1 Qube logo exactly matches Activ8 logo footprint */
.qube-card-mark{
  width:150px!important;height:150px!important;flex:0 0 150px!important;
  border-radius:16px!important;
  display:block!important;
}
.qube-card-mark i{width:34px!important;height:34px!important}
.qube-card-mark .q1{left:8px!important;top:58px!important}
.qube-card-mark .q2{left:46px!important;top:58px!important}
.qube-card-mark .q3{left:46px!important;top:20px!important}
.qube-card-mark .q4{left:84px!important;top:58px!important}
.qube-card-mark .q5{left:84px!important;top:96px!important}
.qube-card-mark .q6{left:122px!important;top:58px!important}
@media(max-width:700px){
 .qube-card-mark{width:120px!important;height:120px!important;flex-basis:120px!important}
 .qube-card-mark i{width:27px!important;height:27px!important}
 .qube-card-mark .q1{left:7px!important;top:46px!important}.qube-card-mark .q2{left:37px!important;top:46px!important}.qube-card-mark .q3{left:37px!important;top:16px!important}.qube-card-mark .q4{left:67px!important;top:46px!important}.qube-card-mark .q5{left:67px!important;top:76px!important}.qube-card-mark .q6{left:97px!important;top:46px!important}
}

/* v2.2 — wider Qube home logo frame */
.qube-card-mark{
  width:170px!important;
  flex-basis:170px!important;
}
@media(max-width:700px){
  .qube-card-mark{
    width:138px!important;
    flex-basis:138px!important;
  }
}


/* v6.6.72 — Qube icon matched to Activ8 logo footprint and background treatment */
.qube-card-icon-frame{
  width:150px;height:150px;flex:0 0 150px;
  display:grid;place-items:center;box-sizing:border-box;
  padding:10px;border:0;border-radius:18px;
  background:rgba(255,255,255,.22);overflow:hidden;
}
.qube-card-icon{display:block;width:100%;height:100%;object-fit:contain;}
@media(max-width:700px){
  .qube-card-icon-frame{width:116px;height:116px;flex-basis:116px;padding:10px;}
}

/* v6.6.72: preserve the complete cube silhouette inside its frame. */
.qube-card-icon{object-fit:contain;max-width:100%;max-height:100%;}