:root{--bg:#f5f5f3;--ink:#111;--muted:#707070;--panel:#fff;--edge:#d7d8dc;--you:#f2d43d;--cpu:#d94b45;--shared:#ef963d}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,sans-serif}button,input{font:inherit}
.app{max-width:940px;margin:auto;padding:18px 20px 125px;min-height:100vh}.top{display:flex;justify-content:space-between;align-items:center}.brand{font-weight:900}
h1{text-align:center;font-size:38px;margin:15px 0 2px}.tag{text-align:center;color:var(--muted);font-size:13px;margin:0 0 20px}
.scoreboard{display:grid;grid-template-columns:1fr 100px 1fr;gap:10px;align-items:center;max-width:620px;margin:0 auto 18px}
.pcard{background:var(--panel);border:1px solid var(--edge);border-radius:14px;padding:10px 13px}.pcard.cpu{text-align:right}.pcard.active{outline:3px solid currentColor;outline-offset:2px}.you.active{color:var(--you)}.cpu.active{color:var(--cpu)}
.name{font-size:11px;font-weight:900;letter-spacing:.08em}.score{font-size:30px;font-weight:950}.clockwrap{text-align:center}.clock{font-size:34px;font-weight:950}
.layout{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start}.boardwrap{display:grid;place-items:center}.grid{position:relative;display:grid;grid-template-columns:repeat(3,88px);grid-template-rows:repeat(3,88px);gap:9px}
.tile{position:relative;background:var(--panel);border:2px solid var(--edge);border-radius:13px;display:grid;place-items:center;box-shadow:0 4px 0 #cfd1d4}.letter{font-size:34px;font-weight:950}.val{position:absolute;right:7px;bottom:5px;font-size:11px;font-weight:900;opacity:.7}
.overlay,.mark{display:none!important}
.side{background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:16px}.side h2{margin:0 0 6px;font-size:17px}.side p{margin:0 0 12px;font-size:13px;line-height:1.45;color:var(--muted)}
.entry{display:grid;gap:8px}.word{width:100%;padding:11px;border:1px solid #bbb;border-radius:10px;text-transform:uppercase;font-weight:900}.play{min-height:44px;border:0;border-radius:10px;background:#111;color:#fff;font-weight:900}
.feedback{min-height:42px;margin-top:10px;font-size:13px;font-weight:850;line-height:1.4}.breakdown{border-top:1px solid #e5e5e5;padding-top:11px;font-size:12px;line-height:1.5;color:var(--muted)}
.history{margin-top:12px;display:grid;gap:5px;max-height:220px;overflow:auto}.move{display:flex;justify-content:space-between;gap:8px;padding:7px 8px;border-radius:8px;background:#f1f2f4;font-size:12px}.move.you{border-left:4px solid var(--you)}.move.cpu{border-left:4px solid var(--cpu)}
.end{display:none;text-align:center;margin:18px auto 0;max-width:620px;background:var(--panel);border:1px solid var(--edge);border-radius:14px;padding:18px}.end.show{display:block}.end button{border:0;border-radius:10px;background:#111;color:#fff;padding:10px 15px;font-weight:900}
.keyboard{display:none}
@media(max-width:720px){.app{padding:10px 8px 190px;max-width:500px}h1{font-size:27px;margin-top:8px}.tag{font-size:11px}.scoreboard{grid-template-columns:1fr 78px 1fr;gap:6px;margin-bottom:11px}.pcard{padding:7px 8px}.score{font-size:22px}.clock{font-size:27px}.layout{display:block}.grid{grid-template-columns:repeat(3,76px);grid-template-rows:repeat(3,76px);gap:7px}.letter{font-size:29px}.side{margin-top:13px;padding:12px}.play{display:block}.keyboard{display:block;position:fixed;left:0;right:0;bottom:0;background:#d8dade;padding:7px 4px max(8px,env(safe-area-inset-bottom));z-index:50}.keys{display:flex;justify-content:center;gap:3px;margin:4px 0}.key{height:47px;flex:1 1 0;max-width:44px;border:0;border-radius:6px;background:#fff;font-weight:850}.wide{max-width:68px;flex:1.55 1 0;font-size:10px}}
@media(prefers-color-scheme:dark){:root{--bg:#111216;--ink:#f4f4f4;--muted:#b8bac0;--panel:#1b1d22;--edge:#3b3e45}.tile{box-shadow:0 4px 0 #090a0c}.word{background:#25272d;color:#fff;border-color:#484b53}.move{background:#292b30}.breakdown{border-top-color:#393c42}@media(max-width:720px){.keyboard{background:#292b30}.key{background:#4a4d53;color:#fff}}}






}


.tile.owner-you{background:var(--you)!important;color:#111!important;border-color:#d5ba2f!important}
.tile.owner-cpu{background:var(--cpu)!important;color:#fff!important;border-color:#b73834!important}
.tile.owner-you .letter,.tile.owner-cpu .letter{color:inherit!important}
.tile.owner-you .val,.tile.owner-cpu .val{color:inherit!important;opacity:.8}




@media(prefers-color-scheme:dark){}


/* Ownership colours */
.tile.owner-you{
  background:#f2d43d !important;
  color:#111 !important;
  border-color:#d5ba2f !important;
}
.tile.owner-cpu{
  background:#d94b45 !important;
  color:#fff !important;
  border-color:#b73834 !important;
}
.tile.owner-you .letter,
.tile.owner-you .val,
.tile.owner-you 
.tile.owner-cpu .letter,
.tile.owner-cpu .val,
.tile.owner-cpu 


.score-table{
  width:100%;
  max-width:430px;
  margin:14px auto 0;
  border-collapse:collapse;
  font-size:.9rem;
}
.score-table th,.score-table td{
  padding:8px 10px;
  border-bottom:1px solid rgba(128,128,128,.28);
  text-align:right;
}
.score-table th:first-child,.score-table td:first-child{text-align:left}
.score-table thead th{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;opacity:.7}
.score-table .final-row td{font-weight:950;font-size:1rem;border-bottom:0;padding-top:11px}




@media(max-width:720px){
  .entry{
    grid-template-columns:1fr auto;
    align-items:center;
  }
  .word{grid-column:1 / -1}
  .play{
    display:block !important;
    min-height:42px;
    padding:0 14px;
  }
}


.move{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border-radius:10px;
  font-size:12px;
  border:0 !important;
}
.move.you{
  background:#f2d43d !important;
  color:#111 !important;
}
.move.cpu{
  background:#d94b45 !important;
  color:#fff !important;
}
.move b:last-child{
  font-size:1rem;
  font-weight:950;
}


.final-score-burst{
  display:inline-block;
  animation:scoreBurst 1s ease-out 1;
  border-radius:999px;
}
@keyframes scoreBurst{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(212,175,55,.8)}
  28%{transform:scale(1.28);box-shadow:0 0 0 12px rgba(212,175,55,.42),0 0 28px 10px rgba(255,215,70,.55)}
  60%{transform:scale(.96);box-shadow:0 0 0 24px rgba(212,175,55,0),0 0 40px 16px rgba(255,215,70,.18)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(212,175,55,0)}
}
@media(prefers-reduced-motion:reduce){.final-score-burst{animation:none}}


.tile.preview-match{
  outline:4px solid #111;
  outline-offset:2px;
  transform:translateY(-2px) scale(1.025);
  box-shadow:0 5px 0 rgba(0,0,0,.18),0 0 0 4px rgba(255,255,255,.55);
}
@media(prefers-color-scheme:dark){
  .tile.preview-match{
    outline-color:#fff;
    box-shadow:0 5px 0 rgba(0,0,0,.28),0 0 0 4px rgba(255,255,255,.16);
  }
}


/* Scrabble-style letter values */
.tile .val{
  right:7px !important;
  bottom:5px !important;
  font-size:.78rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  opacity:.9 !important;
}


.tile .letter{
  font-size:34px !important;
  line-height:1 !important;
  font-weight:950 !important;
}
@media(max-width:720px){
  .tile .letter{font-size:29px !important}
}


.tile{
  overflow:hidden;
}
.tile .val{
  position:absolute !important;
  right:6px !important;
  bottom:5px !important;
  width:14px !important;
  height:14px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:.76rem !important;
  line-height:1 !important;
  font-weight:900 !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  white-space:nowrap !important;
}


/* v19: lock the main letter to the geometric centre of every tile */
.tile{
  position:relative !important;
}
.tile .letter,
.tile.owner-you .letter,
.tile.owner-cpu .letter,
.tile.exhausted .letter,
.tile.owner-you.exhausted .letter,
.tile.owner-cpu.exhausted .letter{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  margin:0 !important;
  padding:0 !important;
  transform:translate(-50%,-50%) !important;
  width:auto !important;
  height:auto !important;
  display:block !important;
  text-align:center !important;
  line-height:1 !important;
  font-size:34px !important;
  font-weight:950 !important;
}
@media(max-width:720px){
  .tile .letter,
  .tile.owner-you .letter,
  .tile.owner-cpu .letter,
  .tile.exhausted .letter,
  .tile.owner-you.exhausted .letter,
  .tile.owner-cpu.exhausted .letter{
    font-size:29px !important;
  }
}

/* Keep Scrabble value independently pinned bottom-right */
.tile .val,
.tile.owner-you .val,
.tile.owner-cpu .val,
.tile.exhausted .val{
  position:absolute !important;
  right:6px !important;
  bottom:5px !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
}


/* Exhausted letters flip away; tile colour/value remain visible */
.tile .letter{
  transform-style:preserve-3d;
  backface-visibility:hidden;
  transition:transform .36s ease, opacity .18s ease .14s;
}
.tile.exhausted .letter{
  transform:translate(-50%,-50%) rotateY(90deg) !important;
  opacity:0;
}

/* During final reveal, all letters flip back into view */
.tile.reveal-letter .letter{
  transform:translate(-50%,-50%) rotateY(0deg) !important;
  opacity:1 !important;
}

@media(prefers-reduced-motion:reduce){
  .tile .letter{transition:none}
}


/* Qube match UI */
.scoreboard{grid-template-columns:1fr 220px 1fr !important}
.clockwrap{display:flex !important;gap:8px;align-items:center;justify-content:center}
.player-clock{
  flex:1 1 0;
  min-width:0;
  text-align:center;
  padding:6px 8px;
  border:1px solid var(--edge);
  border-radius:10px;
  background:var(--panel);
}
.player-clock small{display:block;font-size:9px;font-weight:900;letter-spacing:.06em;opacity:.65}
.player-clock strong{display:block;font-size:1.45rem;font-weight:950;line-height:1.05;margin-top:2px}
.player-clock.you.active{background:#f2d43d;color:#111}
.player-clock.cpu.active{background:#d94b45;color:#fff}
.qube-meta{display:flex;align-items:center;justify-content:center;gap:12px;margin:-5px 0 7px;font-size:12px;font-weight:900}
.face-dots{display:flex;gap:5px}
.face-dot{width:8px;height:8px;border-radius:50%;border:1px solid currentColor;opacity:.3}
.face-dot.done{background:currentColor;opacity:.45}
.face-dot.current{background:currentColor;opacity:1;transform:scale(1.25)}
.face-banner{text-align:center;min-height:19px;margin-bottom:2px;font-size:12px;font-weight:900}
.boardwrap{
  transform-style:preserve-3d;
  transform:rotateY(0deg);
  opacity:1;
  transition:transform .58s cubic-bezier(.25,.7,.25,1),opacity .42s ease;
}
.boardwrap.qube-out{transform:rotateY(-90deg) scale(.94);opacity:.18}
.boardwrap.qube-instant-in{transition:none;transform:rotateY(90deg) scale(.94);opacity:.18}
@media(max-width:720px){
  .scoreboard{grid-template-columns:1fr 150px 1fr !important}
  .clockwrap{gap:5px}
  .player-clock{padding:5px 4px}
  .player-clock strong{font-size:1.08rem}
  .player-clock small{font-size:7px}
  .qube-meta{margin-top:-2px}
}

/* Qube v1 deliberately has no exhausted/lock/disappearing-square state. */
.tile.exhausted{border-width:2px !important}
.tile.exhausted .letter,
.tile.reveal-letter .letter{
  transform:translate(-50%,-50%) !important;
  opacity:1 !important;
}


.boardwrap.qube-final-spin{
  animation:qubeFinalSpin 3.2s cubic-bezier(.2,.65,.2,1) forwards;
  transform-style:preserve-3d;
  will-change:transform;
}
@keyframes qubeFinalSpin{
  0%{transform:rotateX(0) rotateY(0) scale(1)}
  18%{transform:rotateX(-12deg) rotateY(110deg) scale(.95)}
  36%{transform:rotateX(10deg) rotateY(220deg) scale(.92)}
  56%{transform:rotateX(-8deg) rotateY(360deg) scale(.94)}
  76%{transform:rotateX(8deg) rotateY(540deg) scale(.97)}
  100%{transform:rotateX(0) rotateY(720deg) scale(1)}
}
@media(prefers-reduced-motion:reduce){.boardwrap.qube-final-spin{animation:none}}


.face-dots{display:none!important}.boardwrap.qube-final-spin{animation:none!important}
.qube-net{--n:26px;display:grid;grid-template-columns:repeat(3,var(--n));grid-template-rows:repeat(4,var(--n));gap:3px;width:max-content;margin:2px auto 10px}
.net-face{position:relative;border:1px solid var(--edge);border-radius:4px;background:var(--panel);overflow:hidden;opacity:.4;transition:.25s}
.net-face.current{opacity:1;transform:scale(1.08);box-shadow:0 0 0 2px currentColor}.net-face.done{opacity:.9}
.net-face[data-face="1"]{grid-column:2;grid-row:1}.net-face[data-face="2"]{grid-column:2;grid-row:2}.net-face[data-face="3"]{grid-column:3;grid-row:2}
.net-face[data-face="4"]{grid-column:2;grid-row:3}.net-face[data-face="5"]{grid-column:1;grid-row:3}.net-face[data-face="6"]{grid-column:2;grid-row:4}
.net-mini{display:grid;grid-template-columns:repeat(3,1fr);width:100%;height:100%}.net-mini i{border:.25px solid rgba(128,128,128,.15)}
.net-mini i.you{background:#f2d43d}.net-mini i.cpu{background:#d94b45}.net-num{position:absolute;inset:0;display:grid;place-items:center;font-size:9px;font-weight:950}.net-face.done .net-num{display:none}
.boardwrap{transition:transform .72s cubic-bezier(.25,.7,.25,1),opacity .55s ease!important}
.boardwrap.slide-up-out{transform:translateY(-115%)!important;opacity:.08!important}.boardwrap.slide-down-in{transition:none!important;transform:translateY(115%)!important;opacity:.08!important}
.boardwrap.slide-left-out{transform:translateX(-115%)!important;opacity:.08!important}.boardwrap.slide-right-in{transition:none!important;transform:translateX(115%)!important;opacity:.08!important}
.boardwrap.slide-right-out{transform:translateX(115%)!important;opacity:.08!important}.boardwrap.slide-left-in{transition:none!important;transform:translateX(-115%)!important;opacity:.08!important}

.qube-home-link{
  color:inherit;
  text-decoration:none;
}


@media(max-width:720px){
  /* Keep mobile Qube compact: the game itself should dominate the screen. */
  .app > h1,
  .app > .tag{
    display:none !important;
  }

  .top{
    min-height:32px;
    margin-bottom:2px;
  }

  .scoreboard{
    margin-top:4px !important;
    margin-bottom:6px !important;
  }

  .qube-meta{
    margin:2px 0 3px !important;
    font-size:10px !important;
  }

  .face-banner{
    min-height:14px !important;
    margin-bottom:2px !important;
    font-size:10px !important;
  }

  .side{
    margin-top:8px !important;
  }

  /* Native keyboard stays suppressed; custom keyboard owns mobile entry. */
  #wordInput{
    caret-color:transparent;
  }
}


@media(max-width:720px){
  .qube-net{
    --n:22px !important;
    grid-template-columns:repeat(4,var(--n)) !important;
    grid-template-rows:repeat(3,var(--n)) !important;
    gap:2px !important;
    margin:1px auto 5px !important;
  }
  .net-face[data-face="1"]{grid-column:3 !important;grid-row:1 !important}
  .net-face[data-face="2"]{grid-column:3 !important;grid-row:2 !important}
  .net-face[data-face="3"]{grid-column:4 !important;grid-row:2 !important}
  .net-face[data-face="4"]{grid-column:2 !important;grid-row:2 !important}
  .net-face[data-face="5"]{grid-column:1 !important;grid-row:2 !important}
  .net-face[data-face="6"]{grid-column:3 !important;grid-row:3 !important}
}


.qube-top-actions{display:flex;gap:7px;align-items:center}
.stats-circle{display:grid;place-items:center}
.mini-bars{display:flex;align-items:end;gap:2px;height:13px}
.mini-bars i{display:block;width:3px;background:currentColor;border-radius:2px}
.mini-bars i:nth-child(1){height:6px}.mini-bars i:nth-child(2){height:10px}.mini-bars i:nth-child(3){height:13px}

.qube-overlay{
  position:fixed;inset:0;z-index:300;
  display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(0,0,0,.52);
}
.qube-overlay.show{display:flex}
.qube-dialog{
  position:relative;
  width:min(480px,calc(100vw - 28px));
  max-height:84vh;overflow:auto;
  background:var(--panel);color:var(--ink);
  border:1px solid var(--edge);border-radius:18px;
  padding:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.qube-dialog h2{margin:0 32px 8px 0}
.dialog-lead{margin:0 0 16px;color:var(--muted)}
.dialog-close{
  position:absolute;right:12px;top:10px;
  border:0;background:transparent;color:inherit;
  font-size:1.6rem;line-height:1;cursor:pointer;
}
.rule{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;margin:12px 0}
.rule b{
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;background:#bfe7f7;color:#111;
  font-size:.8rem;
}
.rule span{font-size:.88rem;line-height:1.45}

.qube-stats-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:8px;margin-top:16px
}
.qube-stats-grid div{
  text-align:center;padding:12px 6px;
  border:1px solid var(--edge);border-radius:12px
}
.qube-stats-grid strong{display:block;font-size:1.55rem}
.qube-stats-grid span{display:block;margin-top:4px;font-size:.68rem;color:var(--muted);line-height:1.2}

@media(max-width:720px){
  .app > h1,.app > .tag{display:none!important}
  .top{min-height:32px;margin-bottom:2px}
  .scoreboard{margin-top:4px!important;margin-bottom:6px!important}
  .qube-meta{margin:2px 0 3px!important;font-size:10px!important}
  .face-banner{min-height:14px!important;margin-bottom:2px!important;font-size:10px!important}
  .side{margin-top:8px!important}

  .qube-net{
    --n:22px!important;
    grid-template-columns:repeat(4,var(--n))!important;
    grid-template-rows:repeat(3,var(--n))!important;
    gap:2px!important;margin:1px auto 5px!important;
  }
  .net-face[data-face="1"]{grid-column:3!important;grid-row:1!important}
  .net-face[data-face="2"]{grid-column:3!important;grid-row:2!important}
  .net-face[data-face="3"]{grid-column:4!important;grid-row:2!important}
  .net-face[data-face="4"]{grid-column:2!important;grid-row:2!important}
  .net-face[data-face="5"]{grid-column:1!important;grid-row:2!important}
  .net-face[data-face="6"]{grid-column:3!important;grid-row:3!important}

  #wordInput{caret-color:transparent}
  .qube-dialog{padding:18px;max-height:88vh}
  .qube-stats-grid{grid-template-columns:repeat(2,1fr)}
}


/* v1.4 definitive Qube mobile compaction — MUST remain at end of file */
@media screen and (max-width: 820px){
  .qube-game-title,
  h1.qube-game-title,
  .tag{
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  /* Rotate the cube-net concept onto its side:
         5
     6  4  2  1
         3
     This is the original net rotated 90 degrees, only 3 rows high.
  */
  #qubeNet.qube-net,
  .qube-net{
    --n:22px !important;
    display:grid !important;
    grid-template-columns:repeat(4,var(--n)) !important;
    grid-template-rows:repeat(3,var(--n)) !important;
    width:calc(var(--n) * 4 + 6px) !important;
    height:calc(var(--n) * 3 + 4px) !important;
    gap:2px !important;
    margin:1px auto 5px !important;
  }
  #qubeNet .net-face[data-face="1"]{grid-column:4 !important;grid-row:2 !important}
  #qubeNet .net-face[data-face="2"]{grid-column:3 !important;grid-row:2 !important}
  #qubeNet .net-face[data-face="3"]{grid-column:3 !important;grid-row:3 !important}
  #qubeNet .net-face[data-face="4"]{grid-column:2 !important;grid-row:2 !important}
  #qubeNet .net-face[data-face="5"]{grid-column:2 !important;grid-row:1 !important}
  #qubeNet .net-face[data-face="6"]{grid-column:1 !important;grid-row:2 !important}

  .qube-meta{margin:0 0 1px !important}
  .face-banner{margin:0 !important;min-height:12px !important}
}


/* v1.5 Qube net orientation — identical on desktop and mobile
          [3]
      [1][2][4][6]
          [5]
*/
#qubeNet.qube-net,
.qube-net{
  --n:26px !important;
  display:grid !important;
  grid-template-columns:repeat(4,var(--n)) !important;
  grid-template-rows:repeat(3,var(--n)) !important;
  width:calc(var(--n) * 4 + 9px) !important;
  height:calc(var(--n) * 3 + 6px) !important;
  gap:3px !important;
  margin:2px auto 8px !important;
}
#qubeNet .net-face[data-face="1"]{grid-column:1 !important;grid-row:2 !important}
#qubeNet .net-face[data-face="2"]{grid-column:2 !important;grid-row:2 !important}
#qubeNet .net-face[data-face="3"]{grid-column:2 !important;grid-row:1 !important}
#qubeNet .net-face[data-face="4"]{grid-column:3 !important;grid-row:2 !important}
#qubeNet .net-face[data-face="5"]{grid-column:3 !important;grid-row:3 !important}
#qubeNet .net-face[data-face="6"]{grid-column:4 !important;grid-row:2 !important}

@media(max-width:820px){
  #qubeNet.qube-net,
  .qube-net{
    --n:22px !important;
    width:calc(var(--n) * 4 + 6px) !important;
    height:calc(var(--n) * 3 + 4px) !important;
    gap:2px !important;
    margin:1px auto 5px !important;
  }
}

/* Directional slide classes aligned to the rotated net */
.boardwrap.move-left-out{transform:translateX(-115%) !important;opacity:.08 !important}
.boardwrap.move-right-in{transition:none !important;transform:translateX(115%) !important;opacity:.08 !important}
.boardwrap.move-right-out{transform:translateX(115%) !important;opacity:.08 !important}
.boardwrap.move-left-in{transition:none !important;transform:translateX(-115%) !important;opacity:.08 !important}
.boardwrap.move-up-out{transform:translateY(-115%) !important;opacity:.08 !important}
.boardwrap.move-down-in{transition:none !important;transform:translateY(115%) !important;opacity:.08 !important}
.boardwrap.move-down-out{transform:translateY(115%) !important;opacity:.08 !important}
.boardwrap.move-up-in{transition:none !important;transform:translateY(-115%) !important;opacity:.08 !important}

/* Activ8-matched top controls */
.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}
.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;
}

.qube-top-actions{display:contents !important}


/* v1.7 colourful How To Play, matching Activ8's visual language */
.qube-how-dialog .how-rule{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:12px;
  align-items:start;
  margin:12px 0;
}
.qube-how-dialog .how-rule p{
  margin:2px 0 0;
  font-size:.88rem;
  line-height:1.45;
}
.qube-how-dialog .how-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-weight:950;
  font-size:.78rem;
  color:#111;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);
}
.qube-how-dialog .q-blue .how-icon{background:#9fd7f2}
.qube-how-dialog .q-yellow .how-icon{background:#f2d43d}
.qube-how-dialog .q-orange .how-icon{background:#ef963d}
.qube-how-dialog .q-red .how-icon{background:#d94b45;color:#fff}
.qube-how-dialog .q-purple .how-icon{background:#8a4be0;color:#fff}
.qube-how-dialog .q-gold .how-icon{background:#d4af37}

.qube-example{
  margin:15px 0;
  padding:14px;
  border-radius:14px;
  background:rgba(159,215,242,.22);
  border:1px solid rgba(120,190,220,.38);
  text-align:center;
}
.qube-example .example-label{
  font-size:.66rem;
  font-weight:950;
  letter-spacing:.12em;
  opacity:.7;
  margin-bottom:10px;
}
.ownership-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.owner-chip{
  min-width:92px;
  padding:8px 12px;
  border-radius:10px;
  font-weight:950;
  font-size:.8rem;
}
.owner-chip.owner-you{background:#f2d43d;color:#111}
.owner-chip.owner-cpu{background:#d94b45;color:#fff}
.owner-arrow{font-size:1.15rem;font-weight:950;opacity:.55}
.qube-example p{
  margin:9px 0 0;
  font-size:.78rem;
  color:var(--muted);
}

@media(max-width:720px){
  .qube-how-dialog .how-rule{
    grid-template-columns:36px 1fr;
    gap:10px;
    margin:10px 0;
  }
  .qube-how-dialog .how-icon{
    width:32px;
    height:32px;
    font-size:.7rem;
  }
}


/* v1.8 definitive Activ8-matched Qube top controls */
.top-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.stats-btn,
.help-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  border:2px solid currentColor !important;
  border-radius:50% !important;
  background:transparent !important;
  color:inherit !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
}
.help-btn{
  font-size:1rem !important;
  font-weight:900 !important;
  line-height:1 !important;
}
.stats-btn{
  gap:2px !important;
}
.stats-btn .bar{
  display:block !important;
  width:3px !important;
  background:currentColor !important;
  border-radius:2px !important;
}
.stats-btn .b1{height:7px !important}
.stats-btn .b2{height:12px !important}
.stats-btn .b3{height:16px !important}

@media(max-width:820px){
  .stats-btn,
  .help-btn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }
}


/* v1.9 Qube intro screen */
.qube-intro-view{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:18px 22px;
}
.qube-intro-view .intro-back{
  align-self:flex-start;
  color:inherit;
  text-decoration:none;
  font-size:.82rem;
  font-weight:800;
}
.qube-intro-panel{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
}
.qube-intro-panel h2{margin:8px 0 0;font-size:2rem}
.qube-intro-panel p{margin:0;color:var(--muted);font-size:.9rem}
.qube-play-btn{
  margin-top:4px;
  min-width:130px;
  min-height:46px;
  border:0;
  border-radius:12px;
  background:#111;
  color:#fff;
  font-weight:950;
}
.qube-intro-net{
  position:relative;
  width:110px;
  height:82px;
}
.qube-intro-net i{
  position:absolute;
  width:24px;height:24px;
  border:1px solid rgba(17,17,17,.45);
  border-radius:4px;
  background:#bfe7f7;
}
.qube-intro-net .f1{left:0;top:29px}
.qube-intro-net .f2{left:27px;top:29px}
.qube-intro-net .f3{left:27px;top:2px}
.qube-intro-net .f4{left:54px;top:29px}
.qube-intro-net .f5{left:54px;top:56px}
.qube-intro-net .f6{left:81px;top:29px}

/* Compact Qube game header/score area */
.scoreboard{
  max-width:560px !important;
  margin-top:8px !important;
}
.pcard{
  padding:7px 10px !important;
}
.score{font-size:1.65rem !important}
.name{font-size:.66rem !important}
.player-clock{
  min-width:72px !important;
  padding:4px 6px !important;
}
.player-clock strong{font-size:1.05rem !important}
.player-clock small{font-size:.42rem !important}

/* Hide Play Word on mobile; custom keyboard ENTER is enough */
@media(max-width:820px){
  .qube-intro-view{padding:12px 10px}
  .qube-intro-view .intro-back{
    font-size:.74rem !important;
  }

  .top .brand,
  .qube-home-link{
    font-size:.74rem !important;
  }

  .scoreboard{
    grid-template-columns:1fr 132px 1fr !important;
    gap:5px !important;
    margin:4px auto 5px !important;
  }
  .pcard{
    padding:5px 6px !important;
    border-radius:10px !important;
  }
  .score{font-size:1.28rem !important}
  .name{font-size:.52rem !important}
  .player-clock{
    min-width:58px !important;
    padding:3px 4px !important;
  }
  .player-clock strong{font-size:.88rem !important}
  .player-clock small{font-size:.36rem !important}

  #submitBtn{
    display:none !important;
  }
}

.qube-intro-view{position:fixed!important;inset:0!important;z-index:250!important;min-height:100dvh!important;box-sizing:border-box!important;padding:18px 22px!important;background:#bfe7f7!important;color:#111!important}
.qube-intro-view .intro-back{position:absolute!important;left:22px!important;top:18px!important;color:#111!important;text-decoration:none!important;font-size:.78rem!important;font-weight:800!important}
.qube-intro-panel{min-height:calc(100dvh - 36px)!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;gap:8px!important;text-align:center!important}
.qube-intro-panel h1{display:block!important;height:auto!important;margin:8px 0 0!important;padding:0!important;font-size:2rem!important;line-height:1!important;color:#111!important}
.qube-intro-panel p{margin:0 0 10px!important;font-size:.86rem!important;color:rgba(17,17,17,.7)!important}
.qube-intro-logo{width:110px;height:110px;border:1px solid rgba(17,17,17,.2);border-radius:14px;background:rgba(255,255,255,.25);display:grid;place-items:center}
.qube-intro-net{position:relative!important;width:92px!important;height:70px!important}
.qube-intro-net i{position:absolute!important;width:20px!important;height:20px!important;border:1px solid rgba(17,17,17,.45)!important;border-radius:3px!important;background:rgba(255,255,255,.38)!important}
.qube-intro-net .f1{left:0!important;top:25px!important}.qube-intro-net .f2{left:23px!important;top:25px!important}.qube-intro-net .f3{left:23px!important;top:2px!important}.qube-intro-net .f4{left:46px!important;top:25px!important}.qube-intro-net .f5{left:46px!important;top:48px!important}.qube-intro-net .f6{left:69px!important;top:25px!important}
.qube-play-btn{min-width:132px!important;min-height:44px!important;padding:0 24px!important;border-radius:10px!important;font-size:.9rem!important}
@media(max-width:820px){.qube-intro-view{padding:12px 14px!important}.qube-intro-view .intro-back{left:14px!important;top:12px!important;font-size:.72rem!important}.qube-intro-panel{min-height:calc(100dvh - 24px)!important}.qube-intro-logo{width:100px;height:100px}.qube-intro-panel h1{font-size:1.85rem!important}.qube-intro-panel p{font-size:.78rem!important}}
.reset-stats-btn{display:block;margin:16px auto 0;border:0;background:transparent;color:var(--muted);font:inherit;font-size:.75rem;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* v2.1 pre-game proportions matched to Activ8 */
.qube-intro-logo{
 width:150px!important;height:150px!important;border-radius:16px!important;
}
.qube-intro-net{width:136px!important;height:108px!important}
.qube-intro-net i{width:34px!important;height:34px!important}
.qube-intro-net .f1{left:0!important;top:37px!important}
.qube-intro-net .f2{left:38px!important;top:37px!important}
.qube-intro-net .f3{left:38px!important;top:0!important}
.qube-intro-net .f4{left:76px!important;top:37px!important}
.qube-intro-net .f5{left:76px!important;top:74px!important}
.qube-intro-net .f6{left:114px!important;top:37px!important}
.qube-intro-panel h1{
 font-family:Georgia,"Times New Roman",serif!important;
 font-size:4.4rem!important;font-weight:700!important;line-height:1!important;
 margin:18px 0 8px!important;
}
.qube-intro-panel p{
 font-size:1.1rem!important;line-height:1.35!important;margin:0 0 18px!important;
}
.qube-play-btn{
 width:116px!important;min-width:116px!important;height:52px!important;min-height:52px!important;
 border-radius:26px!important;font-size:1rem!important;font-weight:900!important;
}
@media(max-width:820px){
 .qube-intro-logo{width:132px!important;height:132px!important}
 .qube-intro-net{transform:scale(.88);transform-origin:center}
 .qube-intro-panel h1{font-size:3.6rem!important}
 .qube-intro-panel p{font-size:1rem!important}
}

/* v2.3 — pre-game Qube logo frame matches the corrected home-page proportions */
.qube-intro-logo{
  width:170px !important;
  height:150px !important;
}
@media(max-width:820px){
  .qube-intro-logo{
    width:150px !important;
    height:132px !important;
  }
}

/* v2.4 — mathematically centred Qube pre-game icon */
.qube-intro-logo{
  width:170px !important;
  height:150px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  padding:0 !important;
}
.qube-intro-net{
  position:relative !important;
  width:136px !important;
  height:108px !important;
  margin:0 !important;
  transform:none !important;
  flex:0 0 136px !important;
}
@media(max-width:820px){
  .qube-intro-logo{
    width:150px !important;
    height:132px !important;
  }
  .qube-intro-net{
    width:120px !important;
    height:95px !important;
    flex-basis:120px !important;
    transform:scale(.88235) !important;
    transform-origin:center center !important;
  }
}


/* v2.7 — activated-line connecting rods; jiggle retired */
.boardwrap{position:relative!important}
.boardwrap .grid{position:relative;z-index:2}
.line-rods{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.line-rod{stroke-width:8;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))}
.line-rod.you{stroke:#f2d43d}
.line-rod.cpu{stroke:#d94b45}



/* v2.8 — Scrabble-style Qube tiles with muted player colours */
:root{
  --qube-you:#b85c5c;
  --qube-cpu:#5f7fa8;
  --qube-tile:#eee7d9;
  --qube-tile-edge:#d5cbb9;
  --qube-tile-shadow:#c6baa6;
}

.tile{
  background:var(--qube-tile) !important;
  color:#171717 !important;
  border-color:var(--qube-tile-edge) !important;
  box-shadow:0 4px 0 var(--qube-tile-shadow) !important;
}
.tile .letter,.tile .val{color:#171717 !important}

.tile.owner-you{
  background:var(--qube-tile) !important;
  border-color:var(--qube-you) !important;
  box-shadow:inset 0 0 0 3px rgba(184,92,92,.22),0 4px 0 var(--qube-tile-shadow) !important;
}
.tile.owner-cpu{
  background:var(--qube-tile) !important;
  border-color:var(--qube-cpu) !important;
  box-shadow:inset 0 0 0 3px rgba(95,127,168,.22),0 4px 0 var(--qube-tile-shadow) !important;
}
.tile.owner-you .letter,.tile.owner-you .val,
.tile.owner-cpu .letter,.tile.owner-cpu .val{color:#171717 !important}

.pcard.you.active,.player-clock.you.active{background:var(--qube-you) !important;color:#fff !important}
.pcard.cpu.active,.player-clock.cpu.active{background:var(--qube-cpu) !important;color:#fff !important}
.move.you{background:var(--qube-you) !important;color:#fff !important}
.move.cpu{background:var(--qube-cpu) !important;color:#fff !important}

.line-rod.you{stroke:var(--qube-you) !important}
.line-rod.cpu{stroke:var(--qube-cpu) !important}
.net-mini i.you{background:var(--qube-you) !important}
.net-mini i.cpu{background:var(--qube-cpu) !important}

/* v2.9 — full muted ownership colours and paused face reveal */
:root{--qube-you:#b85f62;--qube-cpu:#4f79a8}
.tile.owner-you{background:var(--qube-you)!important;border-color:#8e4d50!important;color:#fff!important;box-shadow:0 4px 0 #754144!important}
.tile.owner-cpu{background:var(--qube-cpu)!important;border-color:#506985!important;color:#fff!important;box-shadow:0 4px 0 #40566f!important}
.tile.owner-you .letter,.tile.owner-you .val,.tile.owner-cpu .letter,.tile.owner-cpu .val{color:#fff!important}
.boardwrap.face-waiting .grid,.boardwrap.face-waiting .line-rods{filter:blur(13px);opacity:.42;pointer-events:none;user-select:none}
.boardwrap .grid,.boardwrap .line-rods{transition:filter .38s ease,opacity .38s ease}
.face-ready{position:absolute;inset:0;z-index:8;display:none;place-items:center;pointer-events:none}
.face-ready.show{display:grid}
.face-ready button{pointer-events:auto;min-width:128px;padding:12px 20px 13px;border:1px solid rgba(255,255,255,.3);border-radius:15px;background:#b9dfef;color:#111;box-shadow:0 8px 24px rgba(0,0,0,.22);cursor:pointer;font:inherit}
.face-ready button span{display:block;font-size:.68rem;font-weight:900;letter-spacing:.1em;margin-bottom:2px}
.face-ready button strong{display:block;font-size:1.12rem;font-weight:950}
.face-ready button:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.boardwrap .grid,.boardwrap .line-rods{transition:none}}

/* v3.0 — ownership palette swap */
:root{
  --qube-you:#4f79a8; /* Player 1 — muted blue */
  --qube-cpu:#b85f62; /* Computer — muted red */
}
.tile.owner-you{
  border-color:#506985 !important;
  box-shadow:0 4px 0 #40566f !important;
}
.tile.owner-cpu{
  border-color:#8e4d50 !important;
  box-shadow:0 4px 0 #754144 !important;
}


/* v3.1 — How To Play ownership colours follow gameplay */
.owner-chip.owner-you{
  background:var(--qube-you) !important;
  color:#fff !important;
}
.owner-chip.owner-cpu{
  background:var(--qube-cpu) !important;
  color:#fff !important;
}

/* Keep explanatory colour accents consistent with the new ownership scheme. */
.qube-how-dialog .q-blue .how-icon{
  background:var(--qube-you) !important;
  color:#fff !important;
}
.qube-how-dialog .q-red .how-icon{
  background:var(--qube-cpu) !important;
  color:#fff !important;
}


/* v3.2 — softer player/computer handover */
.pcard,
.player-clock{
  transition:
    background-color .34s ease,
    color .34s ease,
    border-color .34s ease,
    box-shadow .34s ease,
    transform .34s ease,
    opacity .34s ease !important;
}

.pcard.active,
.player-clock.active{ transform:none; }

.pcard:not(.active),
.player-clock:not(.active){
  transform:scale(1);
}

/* Soften the change in turn messaging too. */
.feedback,
.breakdown{
  transition:opacity .22s ease !important;
}

/* Keep reduced-motion users comfortable. */
@media(prefers-reduced-motion:reduce){
  .pcard,
  .player-clock,
  .feedback,
  .breakdown{
    transition:none !important;
  }
  .pcard.active,
  .player-clock.active{
    transform:none !important;
  }
}

/* v3.3 — exact pre-game icon centring, matching the home-card net */
.qube-intro-logo{
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
}
.qube-intro-net{
  --intro-face:34px;
  --intro-gap:4px;
  position:relative !important;
  width:calc(var(--intro-face) * 4 + var(--intro-gap) * 3) !important;
  height:calc(var(--intro-face) * 3 + var(--intro-gap) * 2) !important;
  flex:none !important;
  margin:0 !important;
  transform:none !important;
}
.qube-intro-net i{
  width:var(--intro-face) !important;
  height:var(--intro-face) !important;
}
.qube-intro-net .f1{left:0 !important;top:calc(var(--intro-face) + var(--intro-gap)) !important}
.qube-intro-net .f2{left:calc(var(--intro-face) + var(--intro-gap)) !important;top:calc(var(--intro-face) + var(--intro-gap)) !important}
.qube-intro-net .f3{left:calc(var(--intro-face) + var(--intro-gap)) !important;top:0 !important}
.qube-intro-net .f4{left:calc((var(--intro-face) + var(--intro-gap)) * 2) !important;top:calc(var(--intro-face) + var(--intro-gap)) !important}
.qube-intro-net .f5{left:calc((var(--intro-face) + var(--intro-gap)) * 2) !important;top:calc((var(--intro-face) + var(--intro-gap)) * 2) !important}
.qube-intro-net .f6{left:calc((var(--intro-face) + var(--intro-gap)) * 3) !important;top:calc(var(--intro-face) + var(--intro-gap)) !important}
@media(max-width:820px){
  .qube-intro-net{
    --intro-face:30px;
    --intro-gap:4px;
    transform:none !important;
  }
}

/* v3.5 — cleaner mobile score/timer spacing */
@media(max-width:820px){
  .scoreboard{
    grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr) !important;
    gap:8px !important;
    max-width:100% !important;
    padding:0 6px !important;
    box-sizing:border-box !important;
  }
  .pcard{
    min-width:0 !important;
    padding:5px 5px !important;
  }
  .player-clock{
    min-width:0 !important;
    width:100% !important;
    padding:4px 4px !important;
    box-sizing:border-box !important;
  }
  .score{font-size:1.18rem !important}
  .name{font-size:.5rem !important}
  .player-clock strong{font-size:.98rem !important}
}
@media(max-width:380px){
  .scoreboard{
    grid-template-columns:minmax(0,1fr) 102px minmax(0,1fr) !important;
    gap:6px !important;
  }
  .score{font-size:1.08rem !important}
}

/* v3.7 — remove redundant Face X of 6 label completely */
#faceLabel,
.face-label{
  display:none !important;
}

/* v3.9 — pre-game one/two-player selector */
.qube-mode-picker{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  width:min(286px,82vw);
  margin-top:8px;
}
.qube-mode-btn{
  min-height:42px;
  border:1px solid rgba(17,17,17,.26);
  border-radius:11px;
  background:rgba(255,255,255,.36);
  color:#111;
  font-size:.72rem;
  font-weight:950;
  letter-spacing:.055em;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.qube-mode-btn.selected{
  background:#111;
  color:#fff;
  border-color:#111;
}
.qube-mode-btn:active{transform:scale(.98)}

/* v4.0 — no positional movement when the active player changes */
.pcard,
.player-clock{
  transform:none !important;
  transform-origin:center !important;
}
.pcard.active,
.player-clock.active{
  transform:none !important;
}

/* v4.1 — lock horizontal geometry during play */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}

.qube-game-shell,
.qube-game-shell .top,
.qube-game-shell .scoreboard,
.qube-game-shell .qube-net,
.qube-game-shell .layout{
  width:100%;
  box-sizing:border-box;
}

.qube-game-shell{
  margin-left:auto !important;
  margin-right:auto !important;
}

.scoreboard{
  min-width:0 !important;
}

.scoreboard > *{
  min-width:0 !important;
}

.pcard,
.player-clock{
  box-sizing:border-box !important;
}

.pcard .name,
.player-clock small,
.score{
  white-space:nowrap;
}

/* Reserve a stable amount of room for changing feedback/history content so
   the page does not gain/lose width as the first moves are added. */
.side,
.entry,
.feedback,
.breakdown,
.history{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  overflow-wrap:anywhere;
}

/* Keep mobile geometry fixed to the viewport, irrespective of dynamic text. */
@media(max-width:820px){
  .qube-game-shell{
    width:100vw !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
  }

  .scoreboard{
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .layout,
  .boardwrap,
  .side{
    width:100% !important;
    max-width:100% !important;
  }
}

/* v4.2 — reserve first-move geometry before any move is played */
.boardwrap{
  width:max-content !important;
  max-width:100% !important;
  justify-self:center !important;
}
.line-rods{
  box-sizing:border-box !important;
  contain:layout paint !important;
}

/* The history no longer changes the side panel's initial geometry when its
   first entries are inserted. */
.history{
  width:100% !important;
  min-height:74px !important;
  scrollbar-gutter:stable !important;
}

/* Score figures and clocks use fixed-width numerals, avoiding any optical or
   actual width change when 0 becomes a two-digit score or 2:00 becomes 1:59. */
.score,
.player-clock strong{
  font-variant-numeric:tabular-nums !important;
  font-feature-settings:"tnum" 1 !important;
}

@media(max-width:820px){
  .boardwrap{
    width:max-content !important;
    max-width:100% !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .history{
    min-height:74px !important;
  }
}


/* v4.6 — six-face territory-count finale */
.tile.territory-flash-you,
.tile.territory-flash-cpu{
  position:relative;
  z-index:8;
}
.tile.territory-flash-you{
  animation:territoryFlashYou .34s ease both;
}
.tile.territory-flash-cpu{
  animation:territoryFlashCpu .34s ease both;
}
@keyframes territoryFlashYou{
  0%{transform:scale(1);filter:brightness(1)}
  45%{transform:scale(1.12);filter:brightness(1.34);box-shadow:0 0 0 5px rgba(79,121,168,.24),0 7px 18px rgba(0,0,0,.24)!important}
  100%{transform:scale(1);filter:brightness(1)}
}
@keyframes territoryFlashCpu{
  0%{transform:scale(1);filter:brightness(1)}
  45%{transform:scale(1.12);filter:brightness(1.34);box-shadow:0 0 0 5px rgba(184,95,98,.24),0 7px 18px rgba(0,0,0,.24)!important}
  100%{transform:scale(1);filter:brightness(1)}
}
@media(prefers-reduced-motion:reduce){
  .tile.territory-flash-you,
  .tile.territory-flash-cpu{animation-duration:.01ms!important}
}


/* v4.7 — celebratory flash on the winning final total */
.final-score-burst{
  display:inline-block;
  font-weight:950;
  animation:winnerTotalFlash 1.45s ease-in-out 2;
}
@keyframes winnerTotalFlash{
  0%,100%{transform:scale(1);filter:brightness(1);text-shadow:none}
  28%{transform:scale(1.22);filter:brightness(1.28);text-shadow:0 0 14px currentColor}
  52%{transform:scale(1.08);filter:brightness(1.08);text-shadow:0 0 6px currentColor}
  74%{transform:scale(1.18);filter:brightness(1.22);text-shadow:0 0 12px currentColor}
}
@media(prefers-reduced-motion:reduce){
  .final-score-burst{animation-duration:.01ms!important;animation-iteration-count:1!important}
}


/* v4.8 — keep the winning final score visibly highlighted after the flash */
.score-table .final-score-burst{
  padding:.16em .42em;
  border-radius:.42em;
  outline:2px solid currentColor;
  outline-offset:2px;
  background:rgba(255,255,255,.72);
  box-shadow:0 0 0 4px rgba(255,255,255,.34), 0 4px 14px rgba(0,0,0,.16);
}


/* v5.0 — neutral scoreboard while territory is being counted */
.pcard:not(.active){
  box-shadow:none !important;
  outline:none !important;
}

/* The winner is revealed only after all six territory counts are complete. */
.score-table td.winning-total{
  background:#f2cf4a !important;
  color:#171717 !important;
  border-radius:8px;
  font-weight:950;
  box-shadow:0 0 0 2px rgba(242,207,74,.34);
}
.score-table .final-score-burst{
  color:#171717 !important;
  background:transparent !important;
  outline:none !important;
  box-shadow:none !important;
  animation:winnerYellowFlash 1.15s ease-in-out 2 !important;
}
@keyframes winnerYellowFlash{
  0%,100%{transform:scale(1);filter:brightness(1);text-shadow:none}
  30%{transform:scale(1.24);filter:brightness(1.22);text-shadow:0 0 15px #f2cf4a}
  58%{transform:scale(1.08);filter:brightness(1.05);text-shadow:0 0 5px #f2cf4a}
  80%{transform:scale(1.18);filter:brightness(1.16);text-shadow:0 0 11px #f2cf4a}
}


/* v5.4 — restrained sound control + winner running-score celebration */
.sound-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  border:2px solid currentColor !important;
  border-radius:50% !important;
  background:transparent !important;
  color:inherit !important;
  padding:0 !important;
  margin:0 !important;
  box-shadow:none !important;
  cursor:pointer;
}
.sound-btn svg{width:19px;height:19px;overflow:visible}
.sound-btn .sound-speaker{fill:currentColor;stroke:none}
.sound-btn .sound-wave,
.sound-btn .sound-slash{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sound-btn .sound-slash{display:none;stroke-width:2.2}
.sound-btn.muted .sound-wave{display:none}
.sound-btn.muted .sound-slash{display:block}
.sound-btn:focus-visible{outline:3px solid rgba(17,17,17,.22);outline-offset:2px}
@media(max-width:820px){
  .sound-btn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
  }
}

.pcard.winner-running{
  background:#f2cf4a !important;
  color:#171717 !important;
  border-color:#d5ad24 !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(242,207,74,.28),0 5px 18px rgba(0,0,0,.16) !important;
  animation:winnerRunningFlash 1.15s ease-in-out 2;
}
@keyframes winnerRunningFlash{
  0%,100%{filter:brightness(1);box-shadow:0 0 0 3px rgba(242,207,74,.28),0 5px 18px rgba(0,0,0,.16)}
  32%{filter:brightness(1.18);box-shadow:0 0 0 7px rgba(242,207,74,.34),0 6px 22px rgba(0,0,0,.2)}
  64%{filter:brightness(1.04);box-shadow:0 0 0 4px rgba(242,207,74,.25),0 5px 18px rgba(0,0,0,.16)}
}
@media(prefers-reduced-motion:reduce){
  .pcard.winner-running{animation-duration:.01ms!important;animation-iteration-count:1!important}
}


/* v5.6 — submitted moves count onto the board tile-by-tile. */
.tile.move-score-pop{z-index:3;animation:moveScorePop .24s ease-out}
@keyframes moveScorePop{0%{transform:scale(1)}42%{transform:scale(1.09)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.tile.move-score-pop{animation:none}}


/* v5.7 — settings and explicit computer difficulty */
.settings-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;min-width:36px;border:2px solid currentColor;
  border-radius:50%;background:transparent;color:inherit;padding:0;cursor:pointer;
}
.settings-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linejoin:round}
.settings-btn:focus-visible{outline:3px solid rgba(17,17,17,.22);outline-offset:2px}
.settings-dialog{max-width:480px}
.settings-section h3{margin:4px 0 2px;font-size:1rem}
.settings-note{margin:0 0 12px;color:var(--muted);font-size:.8rem}
.difficulty-options{display:grid;gap:8px}
.difficulty-options button{
  width:100%;text-align:left;border:1.5px solid rgba(17,17,17,.18);border-radius:12px;
  background:rgba(255,255,255,.55);padding:11px 13px;color:inherit;cursor:pointer;
  display:grid;gap:2px;font:inherit;
}
.difficulty-options button strong{font-size:.92rem}
.difficulty-options button span{font-size:.76rem;color:var(--muted);line-height:1.3}
.difficulty-options button.selected{background:#171717;color:#fff;border-color:#171717}
.difficulty-options button.selected span{color:rgba(255,255,255,.72)}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;padding-top:16px;border-top:1px solid rgba(17,17,17,.12)}
.settings-row>div{display:grid;gap:2px}
.settings-row>div strong{font-size:.92rem}
.settings-row>div span{font-size:.76rem;color:var(--muted)}
.settings-toggle{min-width:58px;border:1.5px solid #171717;border-radius:999px;background:transparent;padding:7px 12px;font:inherit;font-weight:800;cursor:pointer}
.settings-toggle.selected{background:#171717;color:#fff}
@media(max-width:820px){.settings-btn{width:34px;height:34px;min-width:34px}}

.stats-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:12px 0 18px}.stats-tabs button{border:1px solid rgba(20,20,20,.18);background:transparent;border-radius:999px;padding:7px 4px;font:inherit;font-size:.66rem;cursor:pointer}.stats-tabs button.selected{background:#171717;color:#fff}.stats-section{margin:0 0 20px}.stats-section h3{font-size:.7rem;letter-spacing:.14em;opacity:.5}#statsBody .stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}#statsBody .stats-grid>div{padding:9px 5px;border:1px solid rgba(20,20,20,.11);border-radius:10px;text-align:center}#statsBody .stats-grid b,#statsBody .stats-grid span{display:block}#statsBody .stats-grid span{font-size:.65rem;opacity:.62}#statsBody .stats-grid .wide{grid-column:span 2}@media(max-width:520px){.stats-tabs{grid-template-columns:repeat(2,1fr)}#statsBody .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* v6.0 — first-play interactive Learn Qube tutorial */
.tutorial-dialog{max-width:430px;text-align:center}
.tutorial-kicker{font-size:.68rem;letter-spacing:.18em;opacity:.5;margin-bottom:5px}
.tutorial-dialog h2{margin:0 0 7px}
.tutorial-dialog p{min-height:48px;margin:0 auto 14px;max-width:350px;line-height:1.4}
.tutorial-board{width:min(270px,72vw);aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:8px auto 12px}
.tutorial-tile{position:relative;border-radius:10px;background:#f4edda;border:1px solid rgba(20,20,20,.14);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.55rem;transition:.28s ease}
.tutorial-tile small{position:absolute;right:6px;bottom:4px;font-size:.55rem;font-weight:600;opacity:.65}
.tutorial-tile.blue{background:#4F79A8;color:white}.tutorial-tile.red{background:#B85F62;color:white}
.tutorial-tile.yellow{box-shadow:inset 0 0 0 4px #f2cf4a}
.tutorial-tile.pulse{animation:tutorialPulse .45s ease}
.tutorial-board::after{content:"";pointer-events:none}
.tutorial-word{height:25px;font-weight:800;letter-spacing:.08em;margin:2px 0 4px}
.tutorial-score-row{display:flex;justify-content:center;gap:28px;font-size:.75rem;margin:6px 0 13px}
.tutorial-score-row b{font-size:1rem;margin-left:4px}
.tutorial-dots{display:flex;justify-content:center;gap:5px;margin:7px 0 13px}
.tutorial-dots i{width:6px;height:6px;border-radius:50%;background:rgba(20,20,20,.18)}
.tutorial-dots i.on{background:#171717}
.tutorial-actions{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tutorial-actions button,.settings-action{border:0;border-radius:999px;padding:10px 15px;font:inherit;font-size:.72rem;font-weight:800;cursor:pointer}
#tutorialNext{background:#171717;color:white;min-width:90px}
#tutorialSkipText{background:transparent;opacity:.55}
.settings-action{background:#171717;color:white}
@keyframes tutorialPulse{50%{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.tutorial-tile.pulse{animation:none}}

/* v6.1 — scripted tutorial board */
.tutorial-board{position:relative;overflow:visible}
.tutorial-tile{z-index:2}
.tutorial-tile.focus{box-shadow:inset 0 0 0 3px rgba(242,207,74,.9)}
.tutorial-tile.locked{box-shadow:inset 0 0 0 4px #f2cf4a,0 0 0 3px rgba(184,95,98,.18)}
.tutorial-tile em{position:absolute;left:50%;bottom:-17px;transform:translateX(-50%);font-style:normal;font-size:.48rem;letter-spacing:.08em;color:#B85F62;font-weight:900;white-space:nowrap}
.tutorial-rods{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:visible}
.tutorial-rods line{stroke-width:3.2;stroke-linecap:round;opacity:.92}
.tutorial-rods line.you{stroke:#4F79A8}.tutorial-rods line.cpu{stroke:#B85F62}
.tutorial-word{display:flex;align-items:center;justify-content:center;gap:2px;min-height:34px;font-size:1.08rem;letter-spacing:0;margin:7px 0 5px}
.tutorial-word>span{min-width:18px;padding:4px 2px;border-radius:5px}
.tutorial-word-hit{color:#fff;font-weight:900;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.tutorial-word-hit.you{background:#4F79A8}.tutorial-word-hit.cpu{background:#B85F62}
.tutorial-gain{margin-left:8px;border-radius:999px;padding:4px 7px;color:#fff;font-size:.72rem}
.tutorial-gain.you{background:#4F79A8}.tutorial-gain.cpu{background:#B85F62}

/* v6.2 — four difficulty levels + ALL statistics */
.stats-tabs{grid-template-columns:repeat(5,1fr)}
@media(max-width:520px){.stats-tabs{grid-template-columns:repeat(3,1fr)}}

/* v6.3 — continuous 1–10 computer difficulty */
.difficulty-scale{padding:4px 2px 2px}
.difficulty-readout{display:flex;align-items:baseline;justify-content:space-between;margin:5px 0 8px}
.difficulty-readout strong{font-size:.78rem;letter-spacing:.08em}.difficulty-readout b{font-size:1.35rem}
#difficultySlider{width:100%;accent-color:#171717}
.difficulty-ends,.stats-level-key{display:flex;justify-content:space-between;font-size:.58rem;font-weight:800;letter-spacing:.08em;opacity:.55}
.difficulty-numbers{display:grid;grid-template-columns:repeat(10,1fr);font-size:.62rem;text-align:center;margin-top:6px;opacity:.62}
.difficulty-copy{margin-top:12px!important}
.stats-tabs.level-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.stats-level-key{margin:4px 3px 12px}
@media(max-width:520px){.stats-tabs.level-stats{grid-template-columns:repeat(6,1fr)}}

/* v6.4 — full How To Play rulebook */
.qube-rulebook{max-width:680px;max-height:min(88vh,900px);overflow-y:auto;overscroll-behavior:contain;padding:30px 30px 34px;scrollbar-gutter:stable}
.rulebook-head{padding:4px 42px 20px 0;border-bottom:1px solid rgba(25,25,25,.12)}
.rulebook-kicker{font-size:.65rem;font-weight:900;letter-spacing:.16em;opacity:.5}
.rulebook-head h2{font-family:Georgia,serif;font-size:2rem;margin:5px 0 4px}
.rulebook-head p{margin:0;opacity:.68}
.rulebook-section{padding:23px 0;border-bottom:1px solid rgba(25,25,25,.1)}
.rulebook-section h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:1.02rem}
.rulebook-section h3>span{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 7px;border-radius:10px;background:#f2d76e;font-size:.78rem;font-weight:900}
.rulebook-section:nth-of-type(3n+1) h3>span{background:#bfe7f7}.rulebook-section:nth-of-type(3n+2) h3>span{background:#f3bd7c}
.rulebook-section p{margin:8px 0;line-height:1.55}.rulebook-section strong{font-weight:850}
.rule-visual{margin:15px 0;padding:16px;border-radius:16px;background:rgba(255,255,255,.55)}
.mini-grid,.route-grid{display:grid;grid-template-columns:repeat(3,42px);gap:5px;width:max-content;margin:auto}
.mini-grid i,.route-grid i{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:#f5eddc;border:1px solid #cdbf9f;font-style:normal;font-weight:850;box-sizing:border-box}
.line-count{text-align:center;margin-top:10px;font-size:.72rem;word-spacing:4px;opacity:.72}
.rows-lit i:nth-child(-n+6){background:#4F79A8;color:white;border-color:#4F79A8}
.word-demo{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px;margin:14px 0;padding:13px;border-radius:14px;background:#f7f3e9;font-size:1.35rem;font-weight:800;text-transform:uppercase}
.word-demo b{display:inline-flex;align-items:center;justify-content:center;width:29px;height:31px;border-radius:7px;background:#4F79A8;color:white}
.word-demo span{text-transform:lowercase;opacity:.62}.word-demo em{width:100%;margin-top:7px;font-size:.67rem;font-style:normal;font-weight:650;text-transform:none;text-align:center;opacity:.6}
.word-demo.reverse b{background:#f0c34f;color:#171717}.word-demo.compact{margin:12px 0 0;background:transparent;padding:0}
.score-equation,.ownership-demo,.lock-callout,.bonus-demo{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin:15px 0;padding:15px;border-radius:14px;background:#f7f3e9}
.score-equation b{font-size:1.15rem}.score-equation small,.bonus-demo small,.lock-callout small{font-size:.55em;vertical-align:top;margin-left:1px}
.text-you{color:#4F79A8}.text-cpu{color:#B85F62}
.ownership-demo i,.bonus-demo i,.lock-callout b{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:9px;font-style:normal;font-weight:900;color:#fff}
.ownership-demo i.you,.bonus-demo i.you{background:#4F79A8}.ownership-demo i.cpu{background:#B85F62}.ownership-demo span{font-size:.7rem;opacity:.65}
.route-grid i{position:relative}.route-grid i::after{content:attr(data-n);font-style:normal;font-weight:900;font-size:1rem}.route-grid i:nth-child(5){background:#e7c5e9}.route-grid i:nth-child(2n){background:#bfe7f7}
.lock-callout b{background:#B85F62;outline:3px solid #e0b83f;outline-offset:2px}.lock-callout span{font-size:.78rem}
.bonus-demo strong{font-size:1.3rem;color:#4F79A8}.bonus-demo span{font-size:.76rem;opacity:.65}
.quick-rules ul{margin:10px 0 0;padding-left:21px}.quick-rules li{margin:7px 0;line-height:1.4}
.rule-difficulty{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px 0;padding:13px;border-radius:13px;background:#f7f3e9;font-size:.68rem}.rule-difficulty span{font-weight:800;letter-spacing:.04em;text-align:center}
.rulebook-done{display:block;margin:28px auto 0;padding:12px 24px;border:0;border-radius:999px;background:#171717;color:white;font-weight:850;letter-spacing:.05em;cursor:pointer}
@media(max-width:600px){
 .qube-rulebook{width:calc(100vw - 24px);max-height:90vh;padding:24px 18px 28px;border-radius:20px}
 .rulebook-head h2{font-size:1.65rem}.rulebook-section{padding:19px 0}
 .rule-difficulty{align-items:flex-start}.rule-difficulty span{font-size:.61rem}
}

/* v6.5 — appearance + unlimited timer */
.settings-choice-row{align-items:flex-start;gap:14px}
.settings-segmented{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.settings-segmented button{border:1px solid var(--edge);background:transparent;color:inherit;border-radius:999px;padding:7px 10px;font-size:.68rem;font-weight:800;cursor:pointer}
.settings-segmented button.selected{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.timer-choice{min-width:176px}
.timer-unlimited .clockwrap{display:none}
.timer-unlimited .scoreboard{grid-template-columns:1fr 1fr;max-width:520px}
@media(max-width:720px){.settings-choice-row{display:block}.settings-choice-row>div:first-child{margin-bottom:10px}.settings-segmented{justify-content:flex-start}.timer-unlimited .scoreboard{grid-template-columns:1fr 1fr}}

/* Manual theme overrides come after prefers-color-scheme rules. */
html[data-qube-theme="light"]{--bg:#f5f5f3;--ink:#111;--muted:#707070;--panel:#fff;--edge:#d7d8dc}
html[data-qube-theme="light"] body{background:var(--bg);color:var(--ink)}
html[data-qube-theme="light"] .tile{box-shadow:0 4px 0 #cfd1d4}
html[data-qube-theme="light"] .word{background:#fff;color:#111;border-color:#bbb}
html[data-qube-theme="light"] .move{background:#f1f2f4}
html[data-qube-theme="light"] .breakdown{border-top-color:#e5e5e5}
@media(max-width:720px){html[data-qube-theme="light"] .keyboard{background:#d8dade}html[data-qube-theme="light"] .key{background:#fff;color:#111}}

html[data-qube-theme="dark"]{--bg:#111216;--ink:#f4f4f4;--muted:#b8bac0;--panel:#1b1d22;--edge:#3b3e45}
html[data-qube-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-qube-theme="dark"] .tile{box-shadow:0 4px 0 #090a0c}
html[data-qube-theme="dark"] .word{background:#25272d;color:#fff;border-color:#484b53}
html[data-qube-theme="dark"] .move{background:#292b30}
html[data-qube-theme="dark"] .breakdown{border-top-color:#393c42}
@media(max-width:720px){html[data-qube-theme="dark"] .keyboard{background:#292b30}html[data-qube-theme="dark"] .key{background:#4a4d53;color:#fff}}

/* Rulebook illustrations use explicit colours so neither theme can erase content. */
.qube-rulebook .rule-visual,.qube-rulebook .word-demo,.qube-rulebook .score-equation,.qube-rulebook .ownership-demo,.qube-rulebook .lock-callout,.qube-rulebook .bonus-demo,.qube-rulebook .rule-difficulty{color:#171717}
.qube-rulebook .mini-grid i{color:#171717}
.qube-rulebook .word-demo span{color:#4a4a4a;opacity:1}
.qube-rulebook .word-demo b{color:#fff}
.qube-rulebook .word-demo.reverse b{color:#171717}
.qube-rulebook .word-demo em,.qube-rulebook .line-count,.qube-rulebook .ownership-demo span,.qube-rulebook .bonus-demo span{color:#555;opacity:1}
.qube-rulebook .rows-lit i:nth-child(-n+6){color:#fff}
.qube-rulebook .route-grid i{color:#171717}

/* v6.5.1 — visible difficulty thumb in both themes */
#difficultySlider{
  appearance:none;
  -webkit-appearance:none;
  height:8px;
  border-radius:999px;
  background:#ededed;
  border:1px solid rgba(0,0,0,.18);
  outline:none;
}
#difficultySlider::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:#171717;
  border:2px solid #171717;
  box-shadow:0 1px 4px rgba(0,0,0,.28);
}
#difficultySlider::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:#171717;
  border:2px solid #171717;
  box-shadow:0 1px 4px rgba(0,0,0,.28);
}
html[data-qube-theme="dark"] #difficultySlider{background:#f2f2f2;border-color:#5b5d63}
@media(prefers-color-scheme:dark){
  html:not([data-qube-theme]) #difficultySlider{background:#f2f2f2;border-color:#5b5d63}
}
html[data-qube-theme="dark"] #difficultySlider::-webkit-slider-thumb{background:#fff;border-color:#fff}
html[data-qube-theme="dark"] #difficultySlider::-moz-range-thumb{background:#fff;border-color:#fff}
@media(prefers-color-scheme:dark){
  html:not([data-qube-theme]) #difficultySlider::-webkit-slider-thumb{background:#fff;border-color:#fff}
  html:not([data-qube-theme]) #difficultySlider::-moz-range-thumb{background:#fff;border-color:#fff}
}

/* v6.6 — fuller stealing example + end-of-match best plays */
.ownership-grid i.you{background:var(--qube-you);border-color:#506985;color:#fff}
.ownership-grid i.cpu{background:var(--qube-cpu);border-color:#8e4d50;color:#fff}
.steal-word b{background:var(--qube-cpu)!important;color:#fff!important}
.steal-visual .ownership-grid{margin-bottom:14px}

.history.final-best-plays{
  max-height:none;
  min-height:0;
  overflow:visible;
  display:block;
  margin-top:14px;
  padding:14px;
  border:1px solid var(--edge);
  border-radius:14px;
  background:var(--panel);
}
.best-plays-title{
  margin-bottom:10px;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.12em;
  text-align:center;
  opacity:.55;
}
.best-plays-columns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.best-plays{min-width:0}
.best-plays h3{margin:0 0 7px;font-size:.67rem;letter-spacing:.08em}
.best-plays.you h3{color:var(--qube-you)}
.best-plays.cpu h3{color:var(--qube-cpu)}
.best-play-row{
  display:grid;
  grid-template-columns:18px minmax(0,1fr) auto auto;
  gap:6px;
  align-items:center;
  padding:7px 5px;
  border-top:1px solid var(--edge);
  font-size:.7rem;
}
.best-play-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.best-play-row>span:nth-of-type(2){font-size:.62rem;color:var(--muted);white-space:nowrap}
.best-play-row>b{font-size:.78rem}
.best-rank{opacity:.45;font-weight:900}
.best-play-empty{padding:8px 4px;border-top:1px solid var(--edge);font-size:.68rem;color:var(--muted)}
@media(max-width:520px){
  .best-plays-columns{grid-template-columns:1fr}
  .best-plays.cpu{margin-top:7px}
}

/* v6.6.1 — stronger live word-match preview in Light mode */
html[data-qube-theme="light"] .tile.preview-match{
  outline:4px solid var(--qube-you);
  outline-offset:2px;
  background:#dceaf6 !important;
  border-color:var(--qube-you) !important;
  color:#17283a !important;
  box-shadow:0 5px 0 rgba(79,121,168,.28),0 0 0 5px rgba(79,121,168,.20) !important;
}
html[data-qube-theme="light"] .tile.preview-match .letter,
html[data-qube-theme="light"] .tile.preview-match .val{color:#17283a !important}

@media(prefers-color-scheme:light){
  html:not([data-qube-theme]) .tile.preview-match{
    outline:4px solid var(--qube-you);
    outline-offset:2px;
    background:#dceaf6 !important;
    border-color:var(--qube-you) !important;
    color:#17283a !important;
    box-shadow:0 5px 0 rgba(79,121,168,.28),0 0 0 5px rgba(79,121,168,.20) !important;
  }
  html:not([data-qube-theme]) .tile.preview-match .letter,
  html:not([data-qube-theme]) .tile.preview-match .val{color:#17283a !important}
}

/* Keep the existing high-contrast white preview in Dark mode. */
html[data-qube-theme="dark"] .tile.preview-match{
  outline-color:#fff;
  box-shadow:0 5px 0 rgba(0,0,0,.28),0 0 0 4px rgba(255,255,255,.16) !important;
}

/* v6.6.4 — owner-coloured live word previews in both Light and Dark */
.tile.preview-match.preview-you{
  outline:4px solid var(--qube-you) !important;
  outline-offset:2px;
  background:#dceaf6 !important;
  border-color:var(--qube-you) !important;
  color:#17283a !important;
  box-shadow:0 5px 0 rgba(79,121,168,.28),0 0 0 5px rgba(79,121,168,.22) !important;
}
.tile.preview-match.preview-you .letter,
.tile.preview-match.preview-you .val{color:#17283a !important}

.tile.preview-match.preview-cpu{
  outline:4px solid var(--qube-cpu) !important;
  outline-offset:2px;
  background:#ead4d5 !important;
  border-color:var(--qube-cpu) !important;
  color:#4c2022 !important;
  box-shadow:0 5px 0 rgba(184,95,98,.28),0 0 0 5px rgba(184,95,98,.22) !important;
}
.tile.preview-match.preview-cpu .letter,
.tile.preview-match.preview-cpu .val{color:#4c2022 !important}


/* v6.6.5 — mobile keyboard stability + tactile key behaviour */
@media(max-width:720px){
  #wordInput{
    font-size:max(16px,1rem) !important;
    touch-action:manipulation;
  }
  .keyboard,
  .key{
    touch-action:none;
    overscroll-behavior:contain;
    -webkit-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  .key:focus{outline:none}
}


/* v6.6.6 — gestures starting on the game keyboard must never pan the page */
@media(max-width:720px){
  .keyboard,
  .keyboard .key{
    touch-action:none !important;
    overscroll-behavior:contain;
  }
}


/* v6.6.7 — celebrate strategically special multi-line plays */
.multi-line-celebration{
  position:absolute;
  left:50%;top:50%;
  z-index:12;
  transform:translate(-50%,-50%) scale(.58) rotate(-2deg);
  opacity:0;
  pointer-events:none;
  display:grid;
  place-items:center;
  gap:2px;
  min-width:170px;
  padding:14px 22px 12px;
  border:3px solid currentColor;
  border-radius:18px;
  background:rgba(246,243,233,.94);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  font-family:inherit;
  text-align:center;
  will-change:transform,opacity;
}
.multi-line-celebration strong{
  font-size:clamp(1.65rem,7vw,2.55rem);
  line-height:.95;
  font-weight:1000;
  letter-spacing:-.045em;
  white-space:nowrap;
}
.multi-line-celebration span{
  margin-top:5px;
  font-size:.7rem;
  line-height:1;
  font-weight:950;
  letter-spacing:.16em;
}
.multi-line-celebration.you{color:#4F79A8}
.multi-line-celebration.cpu{color:#B85F62}
.multi-line-celebration.show{
  animation:multiLineBurst .86s cubic-bezier(.18,.9,.25,1) forwards;
}
.multi-line-celebration.lines-4.show{
  animation-duration:1.06s;
}
@keyframes multiLineBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-3deg)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.13) rotate(1.5deg)}
  34%{opacity:1;transform:translate(-50%,-50%) scale(.98) rotate(-.5deg)}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
  100%{opacity:0;transform:translate(-50%,-57%) scale(.94) rotate(0)}
}
html[data-qube-theme="dark"] .multi-line-celebration{
  background:rgba(31,31,31,.94);
  box-shadow:0 10px 34px rgba(0,0,0,.48);
}
@media(prefers-color-scheme:dark){
  html:not([data-qube-theme]) .multi-line-celebration{
    background:rgba(31,31,31,.94);
    box-shadow:0 10px 34px rgba(0,0,0,.48);
  }
}
@media(prefers-reduced-motion:reduce){
  .multi-line-celebration.show{animation:multiLineFade .7s ease forwards}
  @keyframes multiLineFade{0%,15%{opacity:1}100%{opacity:0}}
}


/* v6.6.10 — endgame line ripple: one unfinished line, one tile at a time */
.tile.line-jiggle{
  z-index:3;
  transform-origin:center;
  animation:lineRippleJiggle .39s cubic-bezier(.34,.05,.35,1);
}
@keyframes lineRippleJiggle{
  0%,100%{transform:translateY(0) rotate(0) scale(1)}
  26%{transform:translateY(-4px) rotate(-1.1deg) scale(1.025)}
  54%{transform:translateY(1.5px) rotate(.8deg) scale(1.01)}
  76%{transform:translateY(-1.3px) rotate(-.35deg) scale(1.012)}
}
@media(prefers-reduced-motion:reduce){
  .tile.line-jiggle{animation:none}
}


/* v6.6.11 — final-line and final-face theatre */
#faceStartBtn #faceStartSub{
  display:none;
  margin:4px 0 2px;
  font-style:normal;
  font-size:.7rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.18em;
  opacity:.72;
}
.face-ready.final-face #faceStartBtn #faceStartSub{display:block}
.face-ready.final-face #faceStartBtn{
  transform:scale(1.025);
}
.tile.line-jiggle.last-line-ripple{
  animation:lastLineRipple .46s cubic-bezier(.25,.05,.3,1);
}
@keyframes lastLineRipple{
  0%,100%{transform:translateY(0) rotate(0) scale(1)}
  24%{transform:translateY(-5px) rotate(-1.25deg) scale(1.035)}
  52%{transform:translateY(2px) rotate(.85deg) scale(1.015)}
  75%{transform:translateY(-1.5px) rotate(-.4deg) scale(1.018)}
}
@media(prefers-reduced-motion:reduce){
  .tile.line-jiggle.last-line-ripple{animation:none}
}


/* v6.6.12 — physically connected rods */
.line-rods{
  z-index:1 !important;
  overflow:visible;
}
.boardwrap .grid{
  position:relative;
  z-index:2;
}
.line-rod{
  fill:none;
  vector-effect:non-scaling-stroke;
  stroke-linecap:round;
  pointer-events:none;
}
.line-rod.rod-shadow{
  stroke:#101820 !important;
  stroke-width:11 !important;
  opacity:.34;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.30));
}
.line-rod.rod-main{
  stroke-width:7 !important;
  opacity:1;
  filter:none;
}
.line-rod.rod-highlight{
  stroke:#fff !important;
  stroke-width:2 !important;
  opacity:.18;
  filter:none;
  transform:translateY(-1px);
}
.line-rod.rod-main.you{stroke:var(--qube-you) !important}
.line-rod.rod-main.cpu{stroke:var(--qube-cpu) !important}

/* A newly completed connection grows out from its first tile. */
.line-rod.rod-new{
  stroke-dasharray:var(--rod-len) var(--rod-len);
  stroke-dashoffset:var(--rod-len);
  animation:rodBridgeDraw .30s cubic-bezier(.28,.72,.28,1) forwards;
}
.line-rod.rod-new.rod-highlight{animation-delay:.025s}
@keyframes rodBridgeDraw{
  to{stroke-dashoffset:0}
}
@media(prefers-reduced-motion:reduce){
  .line-rod.rod-new{
    animation:none;
    stroke-dashoffset:0;
  }
}

/* v6.6.17 — resumable Unlimited matches + locked match conditions */
.qube-continue-meta{margin:-7px 0 10px;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.62}
.qube-play-btn.secondary-new-game{background:transparent;color:inherit;border:1px solid currentColor;margin-top:4px}
.difficulty-lock-note{padding:8px 10px;border-radius:9px;background:rgba(79,121,168,.10);font-weight:700}
#difficultySlider:disabled{opacity:.48;cursor:not-allowed}
.settings-segmented button:disabled{opacity:.48;cursor:not-allowed}

/* v6.6.20 — ensure Continue visibility follows the hidden attribute */
[hidden]{display:none!important}

/* v6.6.23 — face handoff colour + tactile Pass button */
.face-ready{--face-starter:#b9dfef}
.face-ready.starter-you{--face-starter:var(--qube-you)}
.face-ready.starter-cpu{--face-starter:var(--qube-cpu)}
.face-ready button{
  background:var(--face-starter)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.42)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.22),0 0 0 3px color-mix(in srgb,var(--face-starter) 23%, transparent)!important;
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;
}
.face-ready button:hover{filter:brightness(1.045)}
.face-ready button:active{transform:translateY(2px) scale(.985)}
.face-ready button span,
.face-ready button strong,
.face-ready button em{color:#fff!important}

@media(prefers-reduced-motion:reduce){.face-ready button{transition:none}}

/* v6.6.24 — Pass is now empty ENTER; reclaim mobile vertical/side space */
@media(max-width:720px){
  .entry{grid-template-columns:1fr}
  .word,.play{grid-column:1}
  .play{width:100%}
}

/* v6.6.25 — mobile play area: keep recent moves above the keyboard */
@media(max-width:720px){
  .side{
    margin-top:6px!important;
    padding:7px 10px 8px!important;
    border-radius:14px!important;
  }
  .entry{gap:0!important}
  #wordInput{
    min-height:42px!important;
    height:42px!important;
    padding:7px 10px!important;
    border-radius:10px!important;
  }
  .feedback{
    min-height:0!important;
    margin:5px 0 0!important;
    font-size:12px!important;
    line-height:1.2!important;
  }
  .feedback:empty{display:none!important}
  .breakdown{
    margin:4px 0 0!important;
    padding:4px 0 0!important;
    font-size:11px!important;
    line-height:1.25!important;
  }
  .breakdown:empty{
    display:none!important;
    border-top:0!important;
    padding:0!important;
    margin:0!important;
  }
  .history{
    margin-top:6px!important;
    min-height:0!important;
    max-height:104px!important;
    gap:4px!important;
  }
  .history:empty{display:none!important}
  .move{
    padding:6px 8px!important;
    min-height:0!important;
  }
}

/* v6.6.26 — decisive mobile compaction: status lives inside the word box */
@media(max-width:720px){
  .side{
    margin-top:4px!important;
    padding:5px 8px 6px!important;
    border-radius:12px!important;
  }
  .entry{
    display:block!important;
    margin:0!important;
    padding:0!important;
  }
  #wordInput{
    display:block!important;
    width:100%!important;
    min-height:38px!important;
    height:38px!important;
    margin:0!important;
    padding:6px 10px!important;
    font-size:16px!important;
  }
  #wordInput::placeholder{
    color:var(--muted)!important;
    opacity:.72!important;
    font-weight:700!important;
  }
  .feedback:empty,
  .breakdown:empty{
    display:none!important;
    min-height:0!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  .feedback:not(:empty){
    margin:4px 2px 0!important;
    min-height:0!important;
    padding:0!important;
    font-size:11px!important;
    line-height:1.2!important;
  }
  .breakdown:not(:empty){
    margin:4px 2px 0!important;
    padding:4px 0 0!important;
    font-size:10px!important;
    line-height:1.2!important;
  }
  .history{
    margin-top:4px!important;
    min-height:0!important;
    max-height:118px!important;
  }
  .history:empty{
    display:none!important;
    min-height:0!important;
    height:0!important;
  }
  .move{
    padding:5px 7px!important;
    font-size:11px!important;
  }
}

/* v6.6.29 — hard fallback for compact mobile status/history layout */
@media(max-width:720px){
  .side{
    margin-top:4px!important;
    padding:5px 8px 6px!important;
  }
  .feedback:empty,
  .breakdown:empty{
    display:none!important;
    min-height:0!important;
    height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  .history{
    margin-top:4px!important;
    min-height:0!important;
  }
  #wordInput{
    min-height:38px!important;
    height:38px!important;
  }
}

/* v6.6.30 — simple mobile status/history flow */
@media(max-width:720px){
  .side{
    margin-top:4px!important;
    padding:6px 8px 7px!important;
  }
  #wordInput{
    min-height:40px!important;
    height:40px!important;
    margin:0!important;
  }
  .feedback{
    min-height:0!important;
    height:auto!important;
    margin:5px 2px 0!important;
    padding:0!important;
    font-size:12px!important;
    line-height:1.2!important;
    font-weight:850!important;
  }
  .feedback:empty{
    display:none!important;
    margin:0!important;
  }
  .breakdown{
    min-height:0!important;
    height:auto!important;
    margin:3px 2px 0!important;
    padding:0!important;
    border-top:0!important;
    font-size:10px!important;
    line-height:1.2!important;
  }
  .breakdown:empty{
    display:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  .history{
    margin-top:5px!important;
    min-height:0!important;
    max-height:118px!important;
    padding-top:0!important;
    border-top:0!important;
  }
  .history:empty{
    display:none!important;
    min-height:0!important;
    height:0!important;
    margin:0!important;
  }
  .move{
    padding:5px 7px!important;
    font-size:11px!important;
  }
}

/* v6.6.32 — final results: never clip BEST PLAYS */
.history.final-best-plays{max-height:none!important;height:auto!important;overflow:visible!important}
@media(max-width:720px){
 .history.final-best-plays{display:block!important;max-height:none!important;height:auto!important;overflow:visible!important;margin-top:6px!important;padding-bottom:8px!important}
 .history.final-best-plays .best-plays-group{height:auto!important;max-height:none!important;overflow:visible!important}
 .history.final-best-plays .move{min-height:0!important}
}

/* v6.6.34 — physical Qube face-to-face rotation positioning fix */
.boardwrap{position:relative}
.boardwrap.cube-transitioning{isolation:isolate}
.qube-cube-transition{
  position:absolute;inset:0;z-index:20;display:grid;place-items:center;
  perspective:900px;pointer-events:none;
}
.qube-cube-transition-object{
  --cube-depth:calc(min(100%, 300px) / 2);
  position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transform:rotateX(0deg) rotateY(0deg);
  transition:transform .88s cubic-bezier(.2,.72,.18,1);
}
.qube-cube-transition-face{
  position:absolute;inset:0;transform-style:preserve-3d;backface-visibility:hidden;
  background:var(--bg,#f7f4ee);
}
.qube-cube-transition-inner{position:absolute;inset:0;display:grid;place-items:center}
.qube-cube-transition-inner>.grid{position:relative;z-index:2}
.qube-cube-transition-inner>.line-rods{position:absolute;inset:0;z-index:3}
.qube-cube-transition.axis-right .outgoing{transform:translateZ(var(--cube-depth))}
.qube-cube-transition.axis-right .incoming{transform:rotateY(90deg) translateZ(var(--cube-depth))}
.qube-cube-transition.axis-right.turn .qube-cube-transition-object{transform:rotateY(-90deg)}
.qube-cube-transition.axis-up .outgoing{transform:translateZ(var(--cube-depth))}
.qube-cube-transition.axis-up .incoming{transform:rotateX(-90deg) translateZ(var(--cube-depth))}
.qube-cube-transition.axis-up.turn .qube-cube-transition-object{transform:rotateX(90deg)}
.boardwrap.cube-transitioning>.grid,
.boardwrap.cube-transitioning>#lineRods{visibility:hidden}
.qube-cube-transition .grid,.qube-cube-transition .line-rods{filter:none!important;opacity:1!important}
@media(prefers-reduced-motion:reduce){
  .qube-cube-transition-object{transition:opacity .18s ease!important;transform:none!important}
  .qube-cube-transition .incoming{transform:none!important;opacity:0}
  .qube-cube-transition.turn .outgoing{opacity:0}
  .qube-cube-transition.turn .incoming{opacity:1}
}

/* v6.6.35 — one physical face rotates out while the next face rotates in */
.qube-cube-transition{
  inset:auto!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%);
  overflow:visible;
}
.qube-cube-transition-object{
  --cube-depth:inherit;
  width:100%!important;
  height:100%!important;
}
.qube-cube-transition-face{
  background:var(--panel,#f7f4ee)!important;
  border:1px solid color-mix(in srgb,var(--edge) 78%,transparent);
  box-shadow:inset 0 0 18px rgba(0,0,0,.035);
}
/* Waiting blur is only for the initial Face 1 START gate (and resumed games). */
.boardwrap.cube-transitioning>.grid,
.boardwrap.cube-transitioning>#lineRods{filter:none!important;opacity:1!important}


/* v6.6.36 — stable-size physical rotation + permanently pressed exhausted tiles */
/* Keep the active cube face on the same visual plane as the normal 2D board.
   The cube centre sits half a face behind that plane; rotation therefore turns
   around the physical cube centre without the front face jumping toward camera. */
.qube-cube-transition-object{
  transform:translateZ(calc(-1 * var(--cube-depth))) rotateX(0deg) rotateY(0deg);
}
.qube-cube-transition.axis-right.turn .qube-cube-transition-object{
  transform:translateZ(calc(-1 * var(--cube-depth))) rotateY(-90deg);
}
.qube-cube-transition.axis-up.turn .qube-cube-transition-object{
  transform:translateZ(calc(-1 * var(--cube-depth))) rotateX(90deg);
}

/* Exhausted means every line through this cell is complete. Keep ownership and
   lettering intact; only the tactile height changes so the tile reads as used up. */
.tile.exhausted{
  transform:translateY(4px);
  box-shadow:0 1px 0 color-mix(in srgb,var(--edge,#777) 68%,transparent)!important;
  filter:saturate(.92) brightness(.985);
}
.tile.exhausted .letter,.tile.exhausted .val{opacity:.9}
@media(max-width:720px){.tile.exhausted{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.tile.exhausted{transition:none!important}}

/* v6.6.37 — make exhausted tiles read as physically latched-down keys.
   Ownership colour and lettering stay intact; the smaller/lower cap, exposed
   dark socket rim and inset top shade provide the depth cue from straight on. */
.tile.exhausted{
  transform:translateY(6px) scale(.955) !important;
  transform-origin:50% 50% !important;
  border-color:color-mix(in srgb,currentColor 18%,var(--edge,#777) 82%) !important;
  box-shadow:
    0 0 0 3px rgba(0,0,0,.18),
    inset 0 5px 6px rgba(0,0,0,.24),
    inset 0 -1px 0 rgba(255,255,255,.16) !important;
  filter:saturate(.94) brightness(.96) !important;
}
.tile.exhausted .letter,
.tile.exhausted .val{
  opacity:1 !important;
}
@media(max-width:720px){
  .tile.exhausted{
    transform:translateY(5px) scale(.95) !important;
    box-shadow:
      0 0 0 3px rgba(0,0,0,.2),
      inset 0 5px 6px rgba(0,0,0,.25),
      inset 0 -1px 0 rgba(255,255,255,.14) !important;
  }
}
@media(prefers-reduced-motion:reduce){.tile.exhausted{transition:none!important}}

/* v6.6.39 — embossed active letters / engraved exhausted letters.
   Exhaustion stays a physical state: the key remains ownership-coloured and
   latched down, while its glyph changes from raised print to a cut-in mark. */
.tile.owner-you:not(.exhausted) .letter,
.tile.owner-cpu:not(.exhausted) .letter{
  text-shadow:
    0 2px 0 rgba(0,0,0,.24),
    0 -1px 0 rgba(255,255,255,.28),
    0 3px 4px rgba(0,0,0,.18) !important;
}
.tile.exhausted .letter{
  /* Override the legacy exhausted-letter flip: exhausted glyphs now stay put. */
  transform:translate(-50%,-50%) !important;
  opacity:1 !important;
  color:rgba(35,29,29,.72) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.30),
    0 -1px 1px rgba(0,0,0,.58),
    1px 0 1px rgba(0,0,0,.20) !important;
}
.tile.exhausted .val{
  color:rgba(35,29,29,.72) !important;
  opacity:.92 !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.24),
    0 -1px 0 rgba(0,0,0,.38) !important;
}
.tile.exhausted.reveal-letter .letter{
  transform:translate(-50%,-50%) !important;
  opacity:1 !important;
}
@media(prefers-color-scheme:dark){
  .tile.exhausted .letter,
  .tile.exhausted .val{color:rgba(25,22,22,.78) !important}
}

/* v6.6.39 — exhausted glyphs become an imprint rather than a dark filled letter.
   The transparent centre lets the ownership colour show through; a fine dark
   edge plus opposing highlight/shadow reads as a letter pressed into the cap. */
.tile.exhausted .letter{
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  -webkit-text-stroke:1.35px rgba(34,27,27,.68) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.30),
    0 -1px 0 rgba(0,0,0,.34) !important;
}
.tile.exhausted .val{
  /* Keep the score value solid and legible; the main glyph carries exhaustion. */
  color:rgba(35,29,29,.68) !important;
  -webkit-text-fill-color:rgba(35,29,29,.68) !important;
  -webkit-text-stroke:0 !important;
  opacity:.9 !important;
}
.tile.exhausted.reveal-letter .letter{
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  -webkit-text-stroke:1.35px rgba(34,27,27,.68) !important;
}
@media(max-width:720px){
  .tile.exhausted .letter,
  .tile.exhausted.reveal-letter .letter{
    -webkit-text-stroke:1.15px rgba(34,27,27,.70) !important;
  }
}
@media(prefers-color-scheme:dark){
  .tile.exhausted .letter,
  .tile.exhausted.reveal-letter .letter{
    color:transparent !important;
    -webkit-text-fill-color:transparent !important;
    -webkit-text-stroke-color:rgba(24,20,20,.72) !important;
  }
  .tile.exhausted .val{
    color:rgba(28,24,24,.72) !important;
    -webkit-text-fill-color:rgba(28,24,24,.72) !important;
  }
}


/* v6.6.41 — compact face progress replaces the persistent 2D cube net */
.qube-face-progress{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  margin:1px auto 9px;
  min-height:18px;
}
.face-progress-step{
  width:13px;
  height:13px;
  box-sizing:border-box;
  display:grid;
  place-items:center;
  border:1.5px solid color-mix(in srgb,var(--edge) 72%,transparent);
  border-radius:4px;
  background:transparent;
  opacity:.55;
  transition:transform .2s ease,opacity .2s ease,background .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.face-progress-step span{
  font-size:0;
  line-height:1;
}
.face-progress-step.done{
  background:color-mix(in srgb,var(--ink) 62%,var(--panel));
  border-color:transparent;
  opacity:.52;
}
.face-progress-step.current{
  width:16px;
  height:16px;
  opacity:1;
  background:var(--panel);
  border:2px solid var(--ink);
  transform:scale(1.04);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--panel) 70%,transparent),0 1px 4px rgba(0,0,0,.16);
}
.face-progress-step.current span{
  font-size:9px;
  font-weight:950;
  color:var(--ink);
}
.face-progress-step.upcoming{opacity:.32}
@media(max-width:620px){
  .qube-face-progress{gap:6px;margin:0 auto 6px;min-height:16px}
  .face-progress-step{width:11px;height:11px;border-radius:3px}
  .face-progress-step.current{width:14px;height:14px}
  .face-progress-step.current span{font-size:8px}
}

/* v6.6.42 — six clearly readable face boxes, refined imprint, reverse-cube finale */
.qube-face-progress{
  gap:7px;
  margin:2px auto 10px;
  min-height:30px;
}
.face-progress-step,
.face-progress-step.current{
  width:28px;
  height:28px;
  border-radius:7px;
  transform:none;
}
.face-progress-step{
  border:2px solid color-mix(in srgb,var(--edge) 78%,transparent);
  background:color-mix(in srgb,var(--panel) 42%,transparent);
  opacity:.62;
}
.face-progress-step span,
.face-progress-step.current span{
  display:block;
  font-size:13px;
  line-height:1;
  font-weight:900;
  color:color-mix(in srgb,var(--ink) 72%,transparent);
}
.face-progress-step.done{
  background:color-mix(in srgb,var(--ink) 16%,var(--panel));
  border-color:color-mix(in srgb,var(--edge) 88%,transparent);
  opacity:.78;
}
.face-progress-step.done span{color:color-mix(in srgb,var(--ink) 84%,transparent)}
.face-progress-step.current{
  opacity:1;
  background:var(--panel);
  border:3px solid var(--ink);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--panel) 78%,transparent),0 2px 7px rgba(0,0,0,.18);
}
.face-progress-step.current span{
  font-size:15px;
  color:var(--ink);
}
.face-progress-step.upcoming{opacity:.48}
@media(max-width:620px){
  .qube-face-progress{gap:6px;margin:1px auto 8px;min-height:29px}
  .face-progress-step,
  .face-progress-step.current{width:27px;height:27px;border-radius:7px}
  .face-progress-step span{font-size:12px}
  .face-progress-step.current span{font-size:14px}
}

/* A lighter-weight hollow glyph avoids the doubled-stem look on letters such
   as P/B/R while opposing edge light/shade makes the outline read as an imprint. */
.tile.exhausted .letter,
.tile.exhausted.reveal-letter .letter{
  font-weight:800 !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  -webkit-text-stroke:1px rgba(28,25,25,.72) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.44),
    0 -1px 0 rgba(0,0,0,.46),
    1px 0 0 rgba(255,255,255,.10),
    -1px 0 0 rgba(0,0,0,.14) !important;
  filter:none !important;
}
@media(max-width:720px){
  .tile.exhausted .letter,
  .tile.exhausted.reveal-letter .letter{
    -webkit-text-stroke:.9px rgba(28,25,25,.74) !important;
  }
}

/* Reverse sides for the Colour Bonus journey.  The outgoing face has already
   been reset; the previous completed face is mounted on the adjacent side and
   turns in as part of the same physical cube. */
.qube-cube-transition.axis-left .outgoing{transform:translateZ(var(--cube-depth))}
.qube-cube-transition.axis-left .incoming{transform:rotateY(-90deg) translateZ(var(--cube-depth))}
.qube-cube-transition.axis-left.turn .qube-cube-transition-object{
  transform:translateZ(calc(-1 * var(--cube-depth))) rotateY(90deg);
}
.qube-cube-transition.axis-down .outgoing{transform:translateZ(var(--cube-depth))}
.qube-cube-transition.axis-down .incoming{transform:rotateX(90deg) translateZ(var(--cube-depth))}
.qube-cube-transition.axis-down.turn .qube-cube-transition-object{
  transform:translateZ(calc(-1 * var(--cube-depth))) rotateX(-90deg);
}
@media(prefers-reduced-motion:reduce){
  .qube-cube-transition.axis-left .incoming,
  .qube-cube-transition.axis-down .incoming{transform:none!important;opacity:0}
}

/* Each Colour Bonus tile visibly returns to the original raised neutral key. */
.tile.territory-restored{
  animation:qube-territory-restore .30s cubic-bezier(.2,.75,.2,1);
}
@keyframes qube-territory-restore{
  0%{transform:translateY(3px) scale(.94);filter:brightness(1.14)}
  62%{transform:translateY(-1px) scale(1.015);filter:brightness(1.05)}
  100%{transform:none;filter:none}
}
@media(prefers-reduced-motion:reduce){
  .tile.territory-restored{animation:none}
}

/* v6.6.43 — faster competitive Colour Bonus race */
.finale-race{
  width:min(520px,94%);
  margin:0 auto 9px;
  padding:7px 10px 8px;
  border:1px solid color-mix(in srgb,var(--edge) 62%,transparent);
  border-radius:12px;
  background:color-mix(in srgb,var(--panel) 88%,transparent);
}
.finale-race[hidden]{display:none!important}
.finale-race-head,.finale-race-scores{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:8px;
  font-variant-numeric:tabular-nums;
}
.finale-race-head{font-size:10px;font-weight:850;letter-spacing:.055em;color:var(--muted)}
.finale-race-head span:last-child,.finale-race-scores strong:last-child{text-align:right}
.finale-race-head strong{text-align:center;font-size:10px;letter-spacing:0;color:var(--ink);font-weight:850}
.finale-race-scores{margin-top:3px}
.finale-race-scores strong{font-size:20px;line-height:1;font-weight:950;color:var(--ink)}
.finale-race-scores span{text-align:center;font-size:10px;font-weight:800;color:var(--muted)}
.finale-race-track{
  position:relative;
  height:9px;
  margin-top:5px;
  overflow:hidden;
  border-radius:999px;
  background:color-mix(in srgb,var(--edge) 16%,transparent);
}
.finale-race-centre{position:absolute;left:50%;top:0;bottom:0;width:1px;background:color-mix(in srgb,var(--ink) 52%,transparent);z-index:3}
.finale-race-fill{position:absolute;top:0;bottom:0;max-width:50%;transition:width .16s cubic-bezier(.2,.8,.2,1),filter .16s ease}
.finale-race-fill.you{right:50%;background:var(--qube-you)}
.finale-race-fill.cpu{left:50%;background:var(--qube-cpu)}
.finale-race.counting-you .finale-race-fill.cpu,.finale-race.counting-cpu .finale-race-fill.you{filter:saturate(.55) brightness(.78)}
.finale-race.overtake-you .finale-race-scores strong:first-child,
.finale-race.overtake-cpu .finale-race-scores strong:last-child{animation:qubeOvertake .38s ease}
@keyframes qubeOvertake{0%{transform:scale(1)}45%{transform:scale(1.24)}100%{transform:scale(1)}}
.pcard.finale-counting{transform:translateY(-1px) scale(1.025);opacity:1!important;transition:transform .14s ease,opacity .14s ease}
.pcard.finale-waiting{opacity:.48!important;transition:opacity .14s ease}
@media(max-width:620px){
  .finale-race{width:min(430px,94%);padding:6px 9px 7px;margin-bottom:7px}
  .finale-race-scores strong{font-size:18px}
  .finale-race-head,.finale-race-head strong,.finale-race-scores span{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  .finale-race-fill,.pcard.finale-counting,.pcard.finale-waiting{transition:none!important}
  .finale-race.overtake-you .finale-race-scores strong:first-child,
  .finale-race.overtake-cpu .finale-race-scores strong:last-child{animation:none!important}
}


/* v6.6.44 — exhaustion is now communicated by the glyph only.
   The tile keeps its normal ownership height, colour, edge and shadow; only
   the exhausted LETTER becomes a clean hollow imprint. */
.tile.exhausted,
.tile.owner-you.exhausted,
.tile.owner-cpu.exhausted{
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
}
.tile.owner-you.exhausted{
  border-color:#506985 !important;
  box-shadow:0 4px 0 #40566f !important;
}
.tile.owner-cpu.exhausted{
  border-color:#8e4d50 !important;
  box-shadow:0 4px 0 #754144 !important;
}
.tile.exhausted .letter,
.tile.exhausted.reveal-letter .letter{
  transform:translate(-50%,-50%) !important;
  opacity:1 !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  -webkit-text-stroke:1.2px rgba(255,255,255,.92) !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.48),
    -1px -1px 0 rgba(255,255,255,.14) !important;
  filter:none !important;
}
.tile.exhausted .val{
  opacity:.9 !important;
  -webkit-text-stroke:0 !important;
  text-shadow:none !important;
}
.tile.owner-you.exhausted .val,
.tile.owner-cpu.exhausted .val{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
@media(max-width:720px){
  .tile.exhausted,
  .tile.owner-you.exhausted,
  .tile.owner-cpu.exhausted{transform:none !important}
  .tile.exhausted .letter,
  .tile.exhausted.reveal-letter .letter{
    -webkit-text-stroke:1.1px rgba(255,255,255,.94) !important;
  }
}

/* Keep the Colour Bonus race easy to find when the finale begins on mobile. */
.finale-race{scroll-margin-top:8px}


/* v6.6.45 — simplify exhausted glyphs and declutter the Colour Bonus finale.
   Exhaustion remains a logical state only: lettering uses the normal tile
   treatment. During the final ownership count, rods are hidden everywhere,
   including on the temporary cube faces used while rotating back through 6→1. */
.tile.exhausted .letter,
.tile.exhausted.reveal-letter .letter{
  transform:translate(-50%,-50%) !important;
  opacity:1 !important;
  -webkit-text-stroke:0 !important;
  filter:none !important;
}
.tile.owner-you.exhausted .letter,
.tile.owner-cpu.exhausted .letter{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:
    0 2px 0 rgba(0,0,0,.24),
    0 -1px 0 rgba(255,255,255,.28),
    0 3px 4px rgba(0,0,0,.18) !important;
}
.tile:not(.owner-you):not(.owner-cpu).exhausted .letter{
  color:#171717 !important;
  -webkit-text-fill-color:#171717 !important;
  text-shadow:none !important;
}
.tile.owner-you.exhausted .val,
.tile.owner-cpu.exhausted .val{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  -webkit-text-stroke:0 !important;
}
.boardwrap.territory-finale .line-rods{
  display:none !important;
}

/* v6.6.46 — theme-aware exhausted-letter state.
   Light: neutral black -> owned/live white -> owned/exhausted black.
   Dark:  neutral light -> owned/live dark  -> owned/exhausted light.
   Ownership remains encoded by the blue/red tile surface. */
html[data-qube-theme="light"] .tile.owner-you:not(.exhausted) .letter,
html[data-qube-theme="light"] .tile.owner-cpu:not(.exhausted) .letter,
html[data-qube-theme="light"] .tile.owner-you:not(.exhausted) .val,
html[data-qube-theme="light"] .tile.owner-cpu:not(.exhausted) .val{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
html[data-qube-theme="light"] .tile.owner-you.exhausted .letter,
html[data-qube-theme="light"] .tile.owner-cpu.exhausted .letter{
  color:#171717 !important;
  -webkit-text-fill-color:#171717 !important;
  text-shadow:none !important;
}
html[data-qube-theme="dark"] .tile:not(.owner-you):not(.owner-cpu) .letter,
html[data-qube-theme="dark"] .tile:not(.owner-you):not(.owner-cpu) .val{
  color:#f4f4f4 !important;
  -webkit-text-fill-color:#f4f4f4 !important;
}
html[data-qube-theme="dark"] .tile.owner-you:not(.exhausted) .letter,
html[data-qube-theme="dark"] .tile.owner-cpu:not(.exhausted) .letter,
html[data-qube-theme="dark"] .tile.owner-you:not(.exhausted) .val,
html[data-qube-theme="dark"] .tile.owner-cpu:not(.exhausted) .val{
  color:#171717 !important;
  -webkit-text-fill-color:#171717 !important;
  text-shadow:none !important;
}
html[data-qube-theme="dark"] .tile.owner-you.exhausted .letter,
html[data-qube-theme="dark"] .tile.owner-cpu.exhausted .letter{
  color:#f4f4f4 !important;
  -webkit-text-fill-color:#f4f4f4 !important;
  text-shadow:none !important;
}
@media(prefers-color-scheme:light){
  html:not([data-qube-theme]) .tile.owner-you:not(.exhausted) .letter,
  html:not([data-qube-theme]) .tile.owner-cpu:not(.exhausted) .letter,
  html:not([data-qube-theme]) .tile.owner-you:not(.exhausted) .val,
  html:not([data-qube-theme]) .tile.owner-cpu:not(.exhausted) .val{color:#fff !important;-webkit-text-fill-color:#fff !important}
  html:not([data-qube-theme]) .tile.owner-you.exhausted .letter,
  html:not([data-qube-theme]) .tile.owner-cpu.exhausted .letter{color:#171717 !important;-webkit-text-fill-color:#171717 !important;text-shadow:none !important}
}
@media(prefers-color-scheme:dark){
  html:not([data-qube-theme]) .tile:not(.owner-you):not(.owner-cpu) .letter,
  html:not([data-qube-theme]) .tile:not(.owner-you):not(.owner-cpu) .val{color:#f4f4f4 !important;-webkit-text-fill-color:#f4f4f4 !important}
  html:not([data-qube-theme]) .tile.owner-you:not(.exhausted) .letter,
  html:not([data-qube-theme]) .tile.owner-cpu:not(.exhausted) .letter,
  html:not([data-qube-theme]) .tile.owner-you:not(.exhausted) .val,
  html:not([data-qube-theme]) .tile.owner-cpu:not(.exhausted) .val{color:#171717 !important;-webkit-text-fill-color:#171717 !important;text-shadow:none !important}
  html:not([data-qube-theme]) .tile.owner-you.exhausted .letter,
  html:not([data-qube-theme]) .tile.owner-cpu.exhausted .letter{color:#f4f4f4 !important;-webkit-text-fill-color:#f4f4f4 !important;text-shadow:none !important}
}

/* v6.6.47 — tile lettering follows the tile surface, not the page theme.
   Neutral cream tiles always use dark text. Owned/live blue or red tiles use
   white text. Once an owned tile is exhausted, its text returns to dark while
   the ownership colour remains in place. */
.tile:not(.owner-you):not(.owner-cpu) .letter,
.tile:not(.owner-you):not(.owner-cpu) .val,
html[data-qube-theme="dark"] .tile:not(.owner-you):not(.owner-cpu) .letter,
html[data-qube-theme="dark"] .tile:not(.owner-you):not(.owner-cpu) .val,
html[data-qube-theme="light"] .tile:not(.owner-you):not(.owner-cpu) .letter,
html[data-qube-theme="light"] .tile:not(.owner-you):not(.owner-cpu) .val{
  color:#171717 !important;
  -webkit-text-fill-color:#171717 !important;
  text-shadow:none !important;
}
.tile.owner-you:not(.exhausted) .letter,
.tile.owner-cpu:not(.exhausted) .letter,
.tile.owner-you:not(.exhausted) .val,
.tile.owner-cpu:not(.exhausted) .val,
html[data-qube-theme="dark"] .tile.owner-you:not(.exhausted) .letter,
html[data-qube-theme="dark"] .tile.owner-cpu:not(.exhausted) .letter,
html[data-qube-theme="dark"] .tile.owner-you:not(.exhausted) .val,
html[data-qube-theme="dark"] .tile.owner-cpu:not(.exhausted) .val,
html[data-qube-theme="light"] .tile.owner-you:not(.exhausted) .letter,
html[data-qube-theme="light"] .tile.owner-cpu:not(.exhausted) .letter,
html[data-qube-theme="light"] .tile.owner-you:not(.exhausted) .val,
html[data-qube-theme="light"] .tile.owner-cpu:not(.exhausted) .val{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.tile.owner-you.exhausted .letter,
.tile.owner-cpu.exhausted .letter,
.tile.owner-you.exhausted .val,
.tile.owner-cpu.exhausted .val,
html[data-qube-theme="dark"] .tile.owner-you.exhausted .letter,
html[data-qube-theme="dark"] .tile.owner-cpu.exhausted .letter,
html[data-qube-theme="dark"] .tile.owner-you.exhausted .val,
html[data-qube-theme="dark"] .tile.owner-cpu.exhausted .val,
html[data-qube-theme="light"] .tile.owner-you.exhausted .letter,
html[data-qube-theme="light"] .tile.owner-cpu.exhausted .letter,
html[data-qube-theme="light"] .tile.owner-you.exhausted .val,
html[data-qube-theme="light"] .tile.owner-cpu.exhausted .val{
  color:#171717 !important;
  -webkit-text-fill-color:#171717 !important;
  text-shadow:none !important;
}
@media(prefers-color-scheme:dark){
  html:not([data-qube-theme]) .tile:not(.owner-you):not(.owner-cpu) .letter,
  html:not([data-qube-theme]) .tile:not(.owner-you):not(.owner-cpu) .val{color:#171717 !important;-webkit-text-fill-color:#171717 !important;text-shadow:none !important}
  html:not([data-qube-theme]) .tile.owner-you:not(.exhausted) .letter,
  html:not([data-qube-theme]) .tile.owner-cpu:not(.exhausted) .letter,
  html:not([data-qube-theme]) .tile.owner-you:not(.exhausted) .val,
  html:not([data-qube-theme]) .tile.owner-cpu:not(.exhausted) .val{color:#fff !important;-webkit-text-fill-color:#fff !important}
  html:not([data-qube-theme]) .tile.owner-you.exhausted .letter,
  html:not([data-qube-theme]) .tile.owner-cpu.exhausted .letter,
  html:not([data-qube-theme]) .tile.owner-you.exhausted .val,
  html:not([data-qube-theme]) .tile.owner-cpu.exhausted .val{color:#171717 !important;-webkit-text-fill-color:#171717 !important;text-shadow:none !important}
}


/* v6.6.48 — approved Exhausted A treatment.
   Ownership remains blue/red and lettering remains identical to a live owned tile.
   Exhaustion is communicated only by the key locking slightly lower into its socket. */
.tile.owner-you.exhausted,
.tile.owner-cpu.exhausted{
  transform:translateY(2px) scale(.965) !important;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.22),
             inset 0 4px 6px rgba(0,0,0,.22),
             0 1px 0 rgba(0,0,0,.34) !important;
}
.tile.owner-you.exhausted .letter,
.tile.owner-cpu.exhausted .letter,
.tile.owner-you.exhausted .val,
.tile.owner-cpu.exhausted .val,
html[data-qube-theme="light"] .tile.owner-you.exhausted .letter,
html[data-qube-theme="light"] .tile.owner-cpu.exhausted .letter,
html[data-qube-theme="light"] .tile.owner-you.exhausted .val,
html[data-qube-theme="light"] .tile.owner-cpu.exhausted .val,
html[data-qube-theme="dark"] .tile.owner-you.exhausted .letter,
html[data-qube-theme="dark"] .tile.owner-cpu.exhausted .letter,
html[data-qube-theme="dark"] .tile.owner-you.exhausted .val,
html[data-qube-theme="dark"] .tile.owner-cpu.exhausted .val{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}
.tile.owner-you.exhausted .letter,
.tile.owner-cpu.exhausted .letter{
  text-shadow:0 2px 0 rgba(0,0,0,.24),0 -1px 0 rgba(255,255,255,.28),0 3px 4px rgba(0,0,0,.18) !important;
}
.tile.owner-you.exhausted .val,
.tile.owner-cpu.exhausted .val{
  text-shadow:none !important;
}
@media(prefers-color-scheme:dark){
  html:not([data-qube-theme]) .tile.owner-you.exhausted .letter,
  html:not([data-qube-theme]) .tile.owner-cpu.exhausted .letter,
  html:not([data-qube-theme]) .tile.owner-you.exhausted .val,
  html:not([data-qube-theme]) .tile.owner-cpu.exhausted .val{
    color:#fff !important;-webkit-text-fill-color:#fff !important;
  }
}
@media(prefers-reduced-motion:reduce){
  .tile.owner-you.exhausted,.tile.owner-cpu.exhausted{transition:none !important}
}
/* The experimental tug-of-war/race bar has been retired. */
.finale-race{display:none !important}

/* v6.6.51 — final winner card uses the same yellow as the winning total. */
.pcard.you.winner-running,
.pcard.cpu.winner-running,
.pcard.winner-running{
  background:#f2cf4a !important;
  background-color:#f2cf4a !important;
  color:#171717 !important;
  border-color:#d5ad24 !important;
  outline:none !important;
  box-shadow:0 0 0 2px rgba(242,207,74,.34),0 5px 18px rgba(0,0,0,.16) !important;
}

/* v6.6.54 — Play a Friend */
.qube-mode-picker{grid-template-columns:1fr 1fr 1.18fr;width:min(410px,92vw)}
.qube-mode-online{letter-spacing:.035em}
.qube-online-lobby[hidden]{display:none!important}
.qube-online-lobby{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:18px;background:rgba(17,17,17,.32);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.qube-online-card{position:relative;width:min(420px,92vw);border:1px solid rgba(17,17,17,.2);border-radius:22px;background:#eee7d9;color:#171717;box-shadow:0 24px 70px rgba(0,0,0,.28);padding:28px 24px 22px;text-align:center}
.qube-online-card h2{margin:3px 0 7px;font-size:1.8rem;line-height:1}
.online-kicker{font-size:.67rem;font-weight:950;letter-spacing:.14em;color:rgba(17,17,17,.56)}
.online-lead{margin:0 auto 20px;max-width:310px;color:rgba(17,17,17,.68);font-size:.9rem;line-height:1.4}
.online-choice{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.online-primary,.online-secondary{min-height:48px;border-radius:12px;font-weight:950;letter-spacing:.055em;font-size:.74rem}
.online-primary{border:1px solid #171717;background:#171717;color:#fff}
.online-secondary{border:1px solid rgba(17,17,17,.28);background:rgba(255,255,255,.45);color:#171717}
.online-join{display:grid;gap:9px;max-width:260px;margin:0 auto}
.online-join label,.online-code-label{font-size:.64rem;font-weight:950;letter-spacing:.14em;color:rgba(17,17,17,.55)}
#onlineCodeInput{width:100%;box-sizing:border-box;height:58px;border:2px solid rgba(17,17,17,.24);border-radius:12px;background:#fffaf0;color:#171717;text-align:center;font-size:1.55rem;font-weight:950;letter-spacing:.18em;text-transform:uppercase;outline:none}
#onlineCodeInput:focus{border-color:#171717;box-shadow:0 0 0 3px rgba(17,17,17,.08)}
.online-text-btn{border:0;background:transparent;color:rgba(17,17,17,.68);font-weight:850;font-size:.74rem;text-decoration:underline;text-underline-offset:3px;padding:8px}
.online-wait{display:grid;justify-items:center;gap:7px}
.online-room-code{font-size:2.15rem;letter-spacing:.12em;line-height:1.1;background:#fffaf0;border:2px dashed rgba(17,17,17,.28);border-radius:14px;padding:12px 15px;min-width:190px}
.online-wait p{margin:2px 0 0;color:rgba(17,17,17,.68);font-size:.88rem}
.online-status{min-height:21px;margin-top:14px;font-size:.8rem;font-weight:760;color:rgba(17,17,17,.72)}
.online-status.error{color:#8d3438}
.online-alpha-note{margin:7px 0 0!important;font-size:.68rem!important;color:rgba(17,17,17,.48)!important}
html[data-qube-theme="dark"] .qube-online-card{background:#242321;color:#f6f1e7;border-color:rgba(255,255,255,.16)}
html[data-qube-theme="dark"] .online-kicker,html[data-qube-theme="dark"] .online-lead,html[data-qube-theme="dark"] .online-code-label,html[data-qube-theme="dark"] .online-join label,html[data-qube-theme="dark"] .online-wait p,html[data-qube-theme="dark"] .online-status,html[data-qube-theme="dark"] .online-text-btn{color:rgba(246,241,231,.68)}
html[data-qube-theme="dark"] #onlineCodeInput,html[data-qube-theme="dark"] .online-room-code{background:#171715;color:#f6f1e7;border-color:rgba(255,255,255,.24)}
html[data-qube-theme="dark"] .online-secondary{background:rgba(255,255,255,.07);color:#f6f1e7;border-color:rgba(255,255,255,.22)}
@media(prefers-color-scheme:dark){html:not([data-qube-theme]) .qube-online-card{background:#242321;color:#f6f1e7;border-color:rgba(255,255,255,.16)}html:not([data-qube-theme]) .online-kicker,html:not([data-qube-theme]) .online-lead,html:not([data-qube-theme]) .online-code-label,html:not([data-qube-theme]) .online-join label,html:not([data-qube-theme]) .online-wait p,html:not([data-qube-theme]) .online-status,html:not([data-qube-theme]) .online-text-btn{color:rgba(246,241,231,.68)}html:not([data-qube-theme]) #onlineCodeInput,html:not([data-qube-theme]) .online-room-code{background:#171715;color:#f6f1e7;border-color:rgba(255,255,255,.24)}html:not([data-qube-theme]) .online-secondary{background:rgba(255,255,255,.07);color:#f6f1e7;border-color:rgba(255,255,255,.22)}}
@media(max-width:620px){.qube-mode-picker{grid-template-columns:1fr 1fr;width:min(300px,88vw)}.qube-mode-online{grid-column:1/-1}.qube-online-card{padding:26px 18px 20px}.online-choice{grid-template-columns:1fr}.online-room-code{font-size:1.9rem}}
.qube-online-finished .keyboard{display:none!important}


/* v6.6.57 — face winners and a cleaner ownership finale */
.face-progress-step.face-winner-you,
.face-progress-step.face-winner-cpu,
.face-progress-step.face-winner-draw{
  opacity:1;
  border-color:transparent;
}
.face-progress-step.face-winner-you{
  background:var(--qube-you) !important;
}
.face-progress-step.face-winner-cpu{
  background:var(--qube-cpu) !important;
}
.face-progress-step.face-winner-draw{
  background:linear-gradient(90deg,var(--qube-you) 0 50%,var(--qube-cpu) 50% 100%) !important;
}
.face-progress-step.face-winner-you span,
.face-progress-step.face-winner-cpu span,
.face-progress-step.face-winner-draw span{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.25);
}
.face-progress-step.current.face-winner-you,
.face-progress-step.current.face-winner-cpu,
.face-progress-step.current.face-winner-draw{
  border:3px solid var(--ink) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--panel) 78%,transparent),0 2px 7px rgba(0,0,0,.18);
}

/* No redundant finale heading: the reverse face counter and live result card
   make the stage of the count clear. */
.qube-game-shell.finale-active .face-banner{
  display:none !important;
}
.qube-game-shell.finale-active .side .entry,
.qube-game-shell.finale-active .side .feedback,
.qube-game-shell.finale-active .side .breakdown,
.qube-game-shell.finale-active .side .history{
  display:none !important;
}
.finale-face-result{
  width:100%;
  box-sizing:border-box;
  min-height:150px;
  border:1px solid var(--edge);
  border-radius:14px;
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  padding:12px 14px;
  font-variant-numeric:tabular-nums;
}
.finale-face-title{
  text-align:center;
  font-size:15px;
  line-height:1.2;
  font-weight:950;
  margin:0 0 9px;
}
.finale-result-head,
.finale-result-row{
  display:grid;
  grid-template-columns:minmax(90px,1.25fr) minmax(58px,.7fr) minmax(58px,.7fr);
  gap:8px;
  align-items:center;
}
.finale-result-head{
  padding:0 0 5px;
  font-size:10px;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:right;
}
.finale-result-row{
  padding:7px 0;
  border-top:1px solid color-mix(in srgb,var(--edge) 70%,transparent);
  font-size:12px;
}
.finale-result-row strong{text-align:right;font-size:16px}
.finale-result-row.bonus strong{transition:transform .12s ease}
.finale-result-row.total{
  font-weight:900;
}
.finale-result-row.total strong{font-size:20px}
.finale-face-result.you #finaleYouTotal{color:var(--qube-you)}
.finale-face-result.cpu #finaleCpuTotal{color:var(--qube-cpu)}
.finale-face-result.draw #finaleYouTotal,
.finale-face-result.draw #finaleCpuTotal{color:var(--ink)}
.finale-face-outcome{
  min-height:20px;
  margin-top:7px;
  text-align:center;
  font-size:12px;
  font-weight:950;
}
.finale-face-result.complete .finale-face-outcome{
  animation:finaleResultSettle .28s ease-out both;
}
@keyframes finaleResultSettle{
  from{opacity:0;transform:translateY(3px)}
  to{opacity:1;transform:translateY(0)}
}
@media(max-width:720px){
  .qube-game-shell.finale-active .side{
    margin-top:6px !important;
    padding:6px 8px !important;
  }
  .finale-face-result{
    min-height:132px;
    padding:9px 11px;
    border-radius:12px;
  }
  .finale-face-title{font-size:13px;margin-bottom:6px}
  .finale-result-head,
  .finale-result-row{
    grid-template-columns:minmax(82px,1.2fr) minmax(50px,.7fr) minmax(50px,.7fr);
    gap:6px;
  }
  .finale-result-row{padding:5px 0;font-size:11px}
  .finale-result-row strong{font-size:14px}
  .finale-result-row.total strong{font-size:18px}
  .finale-face-outcome{font-size:11px;margin-top:5px}
}


/* v6.6.58 — post-game face review */
.qube-face-progress.review-enabled .face-progress-step{
  cursor:pointer;
}
.qube-face-progress.review-enabled .face-progress-step:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
}
.face-progress-step.review-selected{
  border:3px solid var(--ink) !important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--panel) 78%,transparent),0 2px 8px rgba(0,0,0,.2) !important;
  transform:translateY(-1px) !important;
}
.qube-game-shell.postgame-review-active .side .entry,
.qube-game-shell.postgame-review-active .side .feedback,
.qube-game-shell.postgame-review-active .side .breakdown,
.qube-game-shell.postgame-review-active .side .history,
.qube-game-shell.postgame-review-active .finale-face-result{
  display:none !important;
}
.qube-game-shell.postgame-review-active + .keyboard,
.qube-game-shell.postgame-review-active ~ .keyboard{
  display:none !important;
}
.postgame-face-review{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--edge);
  border-radius:14px;
  background:var(--panel);
  padding:12px 14px;
  font-variant-numeric:tabular-nums;
}
.review-face-title{
  text-align:center;
  font-size:16px;
  font-weight:950;
  margin:0 0 9px;
}
.review-score-head,
.review-score-row{
  display:grid;
  grid-template-columns:minmax(92px,1.25fr) minmax(58px,.7fr) minmax(58px,.7fr);
  gap:8px;
  align-items:center;
}
.review-score-head{
  padding-bottom:5px;
  text-align:right;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.055em;
  color:var(--muted);
}
.review-score-row{
  padding:6px 0;
  border-top:1px solid color-mix(in srgb,var(--edge) 72%,transparent);
  font-size:12px;
}
.review-score-row strong{text-align:right;font-size:15px}
.review-score-row.total{font-weight:900}
.review-score-row.total strong{font-size:19px}
.review-face-winner{
  min-height:20px;
  margin:7px 0 10px;
  text-align:center;
  font-size:12px;
  font-weight:950;
}
.review-words-title{
  padding-top:9px;
  border-top:1px solid var(--edge);
  font-size:10px;
  font-weight:950;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}
.review-word-list{
  display:grid;
  gap:5px;
  margin-top:7px;
  max-height:190px;
  overflow:auto;
  scrollbar-gutter:stable;
}
.review-move{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 8px;
  border-radius:8px;
  background:color-mix(in srgb,var(--panel) 84%,var(--edge));
  font-size:11px;
}
.review-move.you{border-left:4px solid var(--qube-you)}
.review-move.cpu{border-left:4px solid var(--qube-cpu)}
.review-move strong{font-size:12px}
.review-empty{
  padding:12px 4px;
  text-align:center;
  color:var(--muted);
  font-size:11px;
}
@media(max-width:720px){
  .qube-game-shell.postgame-review-active .side{
    margin-top:6px !important;
    padding:6px 8px !important;
  }
  .postgame-face-review{
    padding:9px 11px;
    border-radius:12px;
  }
  .review-face-title{font-size:14px;margin-bottom:6px}
  .review-score-head,
  .review-score-row{
    grid-template-columns:minmax(82px,1.2fr) minmax(50px,.7fr) minmax(50px,.7fr);
    gap:6px;
  }
  .review-score-row{padding:5px 0;font-size:11px}
  .review-score-row strong{font-size:14px}
  .review-score-row.total strong{font-size:17px}
  .review-face-winner{font-size:11px;margin:5px 0 8px}
  .review-word-list{max-height:132px}
  .review-move{padding:5px 7px;font-size:10px}
}

/* v6.6.59 — rulebook examples */
.rulebook-board{display:grid;grid-template-columns:repeat(3,48px);gap:6px;justify-content:center;margin:14px auto}
.rulebook-tile,.rulebook-route-board>div{position:relative;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--edge);border-radius:9px;background:var(--panel);font-size:23px;font-weight:900}
.rulebook-tile small{position:absolute;right:4px;bottom:2px;font-size:9px;opacity:.7}
.rulebook-tile.rulebook-you{background:#4f79a8;color:#fff}
.rulebook-tile.rulebook-cpu{background:#b85f62;color:#fff}
.rulebook-tile.rulebook-highlight{outline:2px solid var(--ink);outline-offset:1px}
.rulebook-word{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:9px 0;padding:9px 11px;border-radius:9px;background:var(--panel);border:1px solid var(--edge);font-size:12px}
.rulebook-word strong{font-size:14px;letter-spacing:.05em}
.rulebook-score-example{text-align:center;margin:12px 0;padding:12px;border-radius:9px;background:var(--panel);font-weight:800}
@media(max-width:420px){.rulebook-board{grid-template-columns:repeat(3,42px)}.rulebook-tile,.rulebook-route-board>div{width:42px;height:42px}.rulebook-word{flex-wrap:wrap}}

/* v6.6.60 — uncluttered rulebook headings and connecting rods */
.rulebook-section h3{display:block}
.rulebook-rod-board{position:relative;grid-template-columns:repeat(3,48px);gap:32px;width:max-content;margin:18px auto;padding:0}
.rulebook-rod-board .rulebook-rods{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.rulebook-rod-board .rulebook-tile{z-index:1}
.rulebook-rods .rulebook-rod{stroke:#a99e8d;stroke-width:5;stroke-linecap:round;opacity:.65}
.rulebook-rods .rulebook-rod.is-complete{stroke:#776d5f;stroke-width:7;opacity:1}
.rulebook-rods .rulebook-rod.rulebook-rod-you{stroke:#4f79a8;stroke-width:7;opacity:1}
.rulebook-rods .rulebook-rod.rulebook-rod-cpu{stroke:#b85f62;stroke-width:7;opacity:1}
@media(max-width:420px){.rulebook-rod-board{grid-template-columns:repeat(3,42px);gap:26px}.rulebook-rod-board .rulebook-rods{inset:0}}

.rulebook-rod-board{grid-template-columns:repeat(3,48px);gap:32px;width:208px;height:208px}
.rulebook-rod-board .rulebook-rods{inset:-16px;width:240px;height:240px}
@media(max-width:420px){.rulebook-rod-board{grid-template-columns:repeat(3,42px);gap:26px;width:178px;height:178px}.rulebook-rod-board .rulebook-rods{inset:-31px;width:240px;height:240px}}

@media(max-width:420px){.rulebook-rod-board .rulebook-rods{inset:-19px;width:216px;height:216px}}


/* v6.6.62: post-match face review swipe navigation. Horizontal swipes move
   one completed face at a time; vertical page scrolling remains available. */
.qube-game-shell.postgame-review-active .boardwrap{
  touch-action:pan-y;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}
.qube-game-shell.postgame-review-active .boardwrap.review-swiping{cursor:grabbing}

/* Explicit online match exit */
.online-exit-btn{border:1px solid currentColor;border-radius:8px;padding:7px 11px;background:transparent;color:inherit;font:inherit;cursor:pointer;font-size:13px}.online-exit-btn[hidden]{display:none!important}.online-exit-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:20px}.online-exit-actions button{border:1px solid #888;border-radius:8px;padding:10px 14px;font:inherit;cursor:pointer;background:#eee;color:#222}.online-exit-actions #onlineExitConfirm{background:#9e4147;color:white;border-color:#9e4147}.online-exit-actions button:disabled{opacity:.5}.qube-online-lobby[hidden]{display:none!important}#onlineExitError{min-height:1.4em;color:#b85f62;font-size:14px}#onlineExitDialog{z-index:10000}


/* v6.6.72 — cleaner scoreboard and safer online resignation placement. */
.pcard.active{outline:none !important;outline-offset:0 !important;}
.online-resign-setting[hidden]{display:none !important;}
.settings-resign{
  border:1px solid #9e4147;
  border-radius:999px;
  background:transparent;
  color:#9e4147;
  padding:8px 12px;
  font:inherit;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.035em;
  cursor:pointer;
}
.settings-resign:hover{background:rgba(158,65,71,.08);}
.settings-resign:focus-visible{outline:3px solid rgba(158,65,71,.22);outline-offset:2px;}

/* v6.6.72 — closed Qube icon replaces the legacy opened-out net on the pre-game screen */
.qube-intro-logo{
  width:150px!important;height:150px!important;
  display:grid!important;place-items:center!important;box-sizing:border-box!important;
  padding:10px!important;border:0!important;border-radius:18px!important;
  background:rgba(255,255,255,.22)!important;overflow:hidden!important;
}
.qube-intro-icon{display:block;width:100%;height:100%;object-fit:contain;}
@media(max-width:820px){
  .qube-intro-logo{width:132px!important;height:132px!important;padding:8px!important;}
}

/* v6.6.72: identical compact board spacing during play and face results. */
.qube-game-shell .qube-face-progress{margin-bottom:4px!important;}
.qube-game-shell .face-banner{display:none!important;min-height:0!important;margin:0!important;padding:0!important;}
.qube-game-shell .layout{margin-top:0!important;padding-top:0!important;}
.qube-game-shell .boardwrap{margin-top:0!important;}


/* v6.6.72 — make owned-tile text deterministic on iOS Safari/WebKit.
   Live owned tiles are white; exhausted owned tiles retain the existing
   theme-aware treatment. Neutral tiles are unchanged. */
.tile.owner-you:not(.exhausted) .letter,
.tile.owner-you:not(.exhausted) .val,
.tile.owner-cpu:not(.exhausted) .letter,
.tile.owner-cpu:not(.exhausted) .val{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}