@import url("https://fonts.googleapis.com/css2?family=Special+Elite&display=swap");

:root{--bg:#f5f5f1;--card:#fff;--text:#161616;--muted:#6e6e68;--line:#dadad4;--good:#4f8a45;--present:#c4a83b;--absent:#777a7d}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}header{max-width:980px;margin:auto;padding:24px 20px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:end}.brand small{font-weight:800;letter-spacing:.12em;color:var(--muted)}.brand h1{margin:4px 0 0;font-size:30px}main{max-width:980px;margin:auto;padding:28px 20px 50px}.hero h2{font-size:38px;margin:0}.hero p{color:var(--muted);font-size:17px}.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}.game-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;justify-content:space-between;gap:14px;align-items:center}.game-card h3{margin:0 0 5px}.game-card p{margin:0;color:var(--muted)}button{border:0;border-radius:9px;background:#171717;color:white;padding:10px 14px;font:inherit;font-weight:750;cursor:pointer}button.secondary{background:white;color:#171717;border:1px solid var(--line)}#fivePanel{margin-top:26px;background:white;border:1px solid var(--line);border-radius:18px;padding:22px}.five-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.word-grid{display:grid;grid-template-columns:repeat(5,52px);gap:7px;justify-content:center;margin:24px 0}.tile{width:52px;height:52px;border:2px solid #c8c8c2;display:grid;place-items:center;font-size:24px;font-weight:900;text-transform:uppercase;background:white}.tile.good{background:var(--good);border-color:var(--good);color:white}.tile.present{background:var(--present);border-color:var(--present);color:white}.tile.absent{background:var(--absent);border-color:var(--absent);color:white}.keyboard{display:grid;gap:6px;max-width:590px;margin:auto}.key-row{display:flex;gap:5px;justify-content:center}.key{background:#d7d7d1;color:#111;min-width:36px;padding:10px 8px}.result{margin-top:18px;padding:16px;border-radius:12px;background:#efefe9;text-align:center}.ad{margin-top:28px;border:1px dashed #bdbdb7;border-radius:14px;min-height:110px;display:grid;place-items:center;color:#8b8b85;text-align:center}.status-pill{display:inline-block;padding:5px 8px;border-radius:999px;background:#eeeeea;color:#555;font-size:12px;font-weight:800}@media(max-width:700px){.game-grid{grid-template-columns:1fr}.word-grid{grid-template-columns:repeat(5,44px)}.tile{width:44px;height:44px}}

.date-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.five-options{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hard-toggle{font-size:13px;font-weight:700;display:flex;align-items:center;gap:6px}
.invalid-msg,.hard-msg{margin:10px auto 0;max-width:520px;text-align:center;font-weight:750}
.invalid-msg{color:#a11}
.hard-msg{color:#8a5d00}
@media(max-width:700px){
  header{align-items:flex-start;gap:14px;flex-direction:column}
  .date-tools{justify-content:flex-start}
}

.game-panel{
  margin-top:26px;
  background:white;
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
}
.quads-solved{display:grid;gap:8px;margin:22px auto 8px;max-width:680px}
.quads-solved-row{
  border-radius:12px;
  padding:14px;
  text-align:center;
  font-weight:800;
}
.quads-solved-row .label{font-size:14px;letter-spacing:.02em;text-transform:uppercase}
.quads-solved-row .words{font-size:13px;margin-top:5px;font-weight:700}
.quads-easy{background:#e98268}
.quads-medium{background:#55b7ae}
.quads-hard{background:#eea34f}
.quads-very-hard{background:#b84f74}
.quads-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  max-width:680px;
  margin:10px auto 18px;
}
.quads-tile{
  min-height:74px;
  border:0;
  border-radius:10px;
  background:#efefe9;
  color:#181818;
  font-weight:850;
  padding:10px 8px;
  display:grid;
  place-items:center;
  text-align:center;
}
.quads-tile.selected{
  background:#565b61;
  color:white;
}
.quads-footer{display:grid;gap:12px;justify-items:center}
.mistakes{font-size:14px;color:var(--muted);font-weight:700}
.mistake-dot{display:inline-block;width:11px;height:11px;border-radius:999px;background:#3a3a38;margin-left:5px}
.quads-message{margin:10px auto;max-width:520px;text-align:center;font-weight:800}
.quads-message.warn{color:#8a5d00}
.quads-message.bad{color:#a11}
.quads-message.good{color:#2e7d32}
@media(max-width:700px){
  .quads-grid{gap:6px}
  .quads-tile{min-height:62px;font-size:13px;padding:8px 6px}
}

.game-hidden{display:none !important}
.game-visible{display:block !important}
.quads-tile.solve-flash{
  animation:quadsPulse .28s ease;
}
.quads-solved-row.enter{
  animation:solvedRowIn .34s ease both;
}
.quads-grid.reflow{
  animation:quadsReflow .28s ease;
}
@keyframes quadsPulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.035);background:#d8efd3}
  100%{transform:scale(1)}
}
@keyframes solvedRowIn{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes quadsReflow{
  from{opacity:.65;transform:translateY(5px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .quads-tile.solve-flash,.quads-solved-row.enter,.quads-grid.reflow{animation:none}
}
.completion-note{
  margin:12px auto 0;
  max-width:520px;
  text-align:center;
  color:var(--muted);
  font-size:14px;
  font-weight:700;
}

.wordtrail-theme{
  text-align:center;
  margin:18px auto 10px;
}
.wordtrail-theme-text{
  font-size:22px;
  font-weight:850;
  margin-top:3px;
}
.wordtrail-board-wrap{
  position:relative;
  width:272px;
  height:364px;
  margin:18px auto 10px;
}
.wordtrail-player-grid{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(6,42px);
  grid-template-rows:repeat(8,42px);
  gap:4px;
  z-index:2;
  touch-action:none;
}
.wordtrail-player-cell{
  width:42px;height:42px;
  border:1px solid #d6d6d0;
  border-radius:10px;
  background:#f4f4ef;
  color:#171717;
  display:grid;
  place-items:center;
  font-weight:900;
  user-select:none;
  -webkit-user-select:none;
  cursor:pointer;
}
.wordtrail-player-cell.active{
  background:#41464d;
  color:white;
  border-color:#41464d;
}
.wordtrail-player-cell.found{
  background:#cfe4c8;
  border-color:#8db081;
}
.wordtrail-player-cell.theme-word{
  background:#d4c5ea;
  border-color:#9a82bf;
}
.wordtrail-player-cell.hint{
  outline:3px solid #d69e2e;
  outline-offset:-3px;
}
.wordtrail-live-svg{
  position:absolute;
  inset:0;
  width:272px;
  height:364px;
  z-index:1;
  overflow:visible;
}
.wordtrail-live-svg polyline{
  fill:none;
  stroke:#4b5563;
  stroke-width:8;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.5;
}
.wordtrail-live-svg polyline.found-line{stroke:#5f8f56;opacity:.5}
.wordtrail-live-svg polyline.theme-line{stroke:#7f62a9;opacity:.55}
.wordtrail-current{
  min-height:28px;
  text-align:center;
  font-size:20px;
  font-weight:850;
  letter-spacing:.06em;
}
.wordtrail-controls{
  display:grid;
  justify-items:center;
  gap:8px;
}
.wordtrail-found{
  max-width:620px;
  margin:18px auto 0;
  display:grid;
  gap:8px;
}
.wordtrail-found-row{
  padding:10px 12px;
  border-radius:10px;
  background:#eef5ec;
  text-align:center;
  font-weight:800;
}
.wordtrail-found-row.theme{
  background:#eee7f7;
}
.wordtrail-message{
  text-align:center;
  font-weight:800;
  margin:8px auto;
}
.wordtrail-message.good{color:#2e7d32}
.wordtrail-message.warn{color:#8a5d00}
.wordtrail-message.bad{color:#a11}

#wordTrailStatus{
  min-height:34px;
  display:grid;
  align-items:center;
}
#wordTrailCurrentWord{
  min-height:32px;
}

#miniStatus{min-height:34px;display:grid;place-items:center}
.mini-layout{
  display:grid;
  grid-template-columns:minmax(320px,420px) minmax(280px,1fr);
  gap:26px;
  align-items:start;
  margin-top:18px;
}
.mini-active-clue{
  min-height:50px;
  padding:11px 12px;
  border-radius:10px;
  background:#f3f3ee;
  font-weight:800;
  margin-bottom:10px;
}
.mini-player-grid{
  display:grid;
  grid-template-columns:repeat(6,52px);
  grid-template-rows:repeat(6,52px);
  width:max-content;
  border:2px solid #222;
}
.mini-cell{position:relative;width:52px;height:52px;border:1px solid #222;background:white}
.mini-cell.black{background:#222}
.mini-cell.word-highlight{background:#cfe3f7}
.mini-cell.active{background:#f5d56a}
.mini-cell input{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;outline:0;background:transparent;text-align:center;
  font-size:28px;font-weight:850;text-transform:uppercase;padding:8px 3px 2px
}
.mini-number{position:absolute;left:3px;top:1px;font-size:10px;line-height:1;font-weight:800;z-index:2}
.mini-clues{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mini-clues h3{margin:0 0 8px}
.mini-clue{width:100%;border:0;background:transparent;color:var(--text);text-align:left;padding:7px 8px;border-radius:7px;font:inherit;cursor:pointer}
.mini-clue:hover{background:#f2f2ee}
.mini-clue.active{background:#dceaf8;font-weight:800}
.mini-actions{margin-top:12px;display:flex;justify-content:center}
.reveal-wrap{position:relative}
.reveal-menu{
  position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  width:170px;background:white;border:1px solid var(--line);border-radius:10px;
  padding:6px;z-index:10;box-shadow:0 10px 24px rgba(0,0,0,.12)
}
.reveal-menu button{display:block;width:100%;background:white;color:#171717;text-align:left;border:0;padding:9px 10px}
.reveal-menu button:hover{background:#f2f2ee}
.mini-message{min-height:34px;display:grid;place-items:center;text-align:center;font-weight:800}
.mini-message.good{color:#2e7d32}
.mini-message.warn{color:#8a5d00}
@media(max-width:820px){.mini-layout{grid-template-columns:1fr}.mini-clues{grid-template-columns:1fr 1fr}}
@media(max-width:520px){
  .mini-player-grid{grid-template-columns:repeat(6,44px);grid-template-rows:repeat(6,44px)}
  .mini-cell{width:44px;height:44px}
  .mini-cell input{font-size:23px}
  .mini-clues{grid-template-columns:1fr}
}

/* Mini V2 dynamic 5x5 / 6x6 */
.mini-player-grid{
  --mini-cols:6;
  --mini-rows:6;
  display:grid;
  grid-template-columns:repeat(var(--mini-cols),52px);
  grid-template-rows:repeat(var(--mini-rows),52px);
  width:max-content;
  border:2px solid #222;
}
.mini-cell{
  position:relative;
  width:52px;height:52px;
  border:1px solid #222;
  border-radius:0;
  background:white;
  color:#171717;
  padding:0;
  display:block;
}
.mini-cell.black{background:#222;border-color:#222}


.mini-letter{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding-top:5px;
  font-size:28px;
  font-weight:850;
  text-transform:uppercase;
}
.mini-number{
  position:absolute;
  left:3px;top:2px;
  font-size:10px;
  line-height:1;
  font-weight:800;
  z-index:2;
}
@media(max-width:520px){
  .mini-player-grid{
    grid-template-columns:repeat(var(--mini-cols),44px);
    grid-template-rows:repeat(var(--mini-rows),44px);
  }
  .mini-cell{width:44px;height:44px}
  .mini-letter{font-size:23px}
}

/* =========================================================
   A+ VISUAL SYSTEM — public site design pass 01
   White foundation · Lato · clear-elevation tiles · natural accents
   ========================================================= */
:root{
  --bg:#ffffff;
  --card:#ffffff;
  --text:#202322;
  --muted:#707772;
  --line:#e7e9e6;
  --surface-soft:#f8faf8;
  --shadow-1:0 2px 5px rgba(28,36,31,.10),0 1px 2px rgba(28,36,31,.06);
  --shadow-2:0 5px 12px rgba(28,36,31,.13),0 2px 4px rgba(28,36,31,.08);
  --quads:#6f9f78;
  --quads-hover:#f0f7f1;
  --quads-selected:#c6dfca;
  --success:#4f8a61;
  --error:#c96f62;
}
body{font-family:Lato,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#fff;color:var(--text);letter-spacing:.002em}
header{max-width:1040px;padding:24px 24px 19px;border-bottom:1px solid var(--line);align-items:center}
.brand small{font-weight:900;letter-spacing:.14em;color:#7b817d}.brand h1{font-size:29px;letter-spacing:-.025em;font-weight:900;color:#202322}
main{max-width:1040px;padding:34px 24px 56px}.hero h2{font-size:40px;letter-spacing:-.035em;font-weight:900}.hero p{color:var(--muted);font-size:17px;margin-top:8px}
.status-pill{background:#f4f6f4;color:#626963;padding:6px 10px;font-weight:900;letter-spacing:.02em}
button{border-radius:10px;background:#315f48;color:#fff;padding:10px 15px;font-family:inherit;font-weight:900;transition:transform .14s ease,box-shadow .14s ease,background .14s ease,opacity .14s ease}
button:hover:not(:disabled){transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.42;cursor:default;transform:none}
button.secondary{background:#fff;color:#303532;border:1px solid #dfe3df;box-shadow:none}button.secondary:hover:not(:disabled){background:#f7f9f7}
.game-grid{gap:16px;margin-top:26px}.game-card{border:0;border-radius:16px;padding:19px 20px;box-shadow:var(--shadow-1);background:#fff;transition:transform .16s ease,box-shadow .16s ease}.game-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}.game-card h3{font-size:20px;font-weight:900;letter-spacing:-.015em}.game-card p{color:var(--muted);line-height:1.4}.game-card-copy{display:flex;align-items:center;gap:15px;min-width:0}
.game-icon{width:46px;height:46px;display:grid;flex:0 0 auto;position:relative}.game-icon.small{width:24px;height:24px}.game-kicker{display:flex;align-items:center;gap:9px}.game-kicker small{font-weight:900;letter-spacing:.12em;color:#747b76}
.game-icon-quads{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;padding:3px;border-radius:11px;background:#eef4ef}.game-icon-quads i{display:block;border-radius:4px}.game-icon-quads i:nth-child(1){background:#91b493}.game-icon-quads i:nth-child(2){background:#66a89b}.game-icon-quads i:nth-child(3){background:#d68470}.game-icon-quads i:nth-child(4){background:#81739d}.game-icon-quads.small{border-radius:7px;padding:2px;gap:1px}.game-icon-quads.small i{border-radius:2px}
.game-icon-five{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px}.game-icon-five i{background:#edf0ed;border-radius:4px;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:12px}.game-icon-five i:nth-child(1){grid-column:2;grid-row:1}.game-icon-five i:nth-child(2){grid-column:1;grid-row:2}.game-icon-five i:nth-child(3){grid-column:2;grid-row:2;background:#5e956b;color:#fff}.game-icon-five i:nth-child(4){grid-column:3;grid-row:2}.game-icon-five i:nth-child(5){grid-column:2;grid-row:3}
.game-icon-mini{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3px;padding:2px}.game-icon-mini i{background:#fff;border-radius:3px;box-shadow:0 1px 3px rgba(25,35,30,.18)}.game-icon-mini i.dark{background:#3b4640}
.game-icon-trail svg{width:100%;height:100%;overflow:visible}.game-icon-trail path{fill:none;stroke:#75689a;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.game-icon-trail polygon{fill:#dfe2df}.game-icon-trail polygon.end{fill:#75689a}

/* Quads reference implementation */
#quadsPanel{border:0;box-shadow:none;padding:26px 0 10px;background:#fff}.game-panel{border-color:var(--line)}
#quadsPanel .five-head{max-width:760px;margin:0 auto;padding:0 6px}#quadsPanel h2{font-size:30px;letter-spacing:-.025em;font-weight:900;color:#202322}
.quads-solved{gap:10px;max-width:720px;margin-top:24px}.quads-solved-row{border-radius:12px;padding:15px 16px;box-shadow:none}.quads-solved-row .label{font-size:13px;letter-spacing:.06em;font-weight:900}.quads-solved-row .words{font-size:14px;margin-top:6px;font-weight:700}
.quads-easy{background:#e98268;color:#252522}.quads-medium{background:#55b7ae;color:#252522}.quads-hard{background:#eea34f;color:#252522}.quads-very-hard{background:#b84f74;color:#fff}
.quads-grid{gap:10px;max-width:720px;margin:12px auto 22px}.quads-tile{min-height:76px;border:0;border-radius:11px;background:#fbfcfb;color:#202322;font-family:inherit;font-weight:900;letter-spacing:.015em;padding:11px 8px;box-shadow:var(--shadow-1);transition:background .13s ease,box-shadow .13s ease,transform .13s ease;color .13s ease}.quads-tile:hover:not(:disabled):not(.selected){background:var(--quads-hover);transform:translateY(-1px);box-shadow:var(--shadow-1)}.quads-tile:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 2px rgba(28,36,31,.09)}.quads-tile.selected{background:var(--quads-selected);color:#182019;transform:translateY(-2px);box-shadow:var(--shadow-2)}
#quadsSubmitBtn{background:var(--quads);box-shadow:0 2px 5px rgba(62,101,72,.20)}#quadsSubmitBtn:hover:not(:disabled){background:#638f6c}.quads-footer{gap:14px}.mistakes{color:#6c736e}.mistake-dot{width:10px;height:10px;background:#5e6962;margin-left:6px}.action-row{gap:9px}.quads-message.bad{color:var(--error)}.quads-message.good{color:var(--success)}
.ad{border-color:#d9ddd9;color:#929892;background:#fcfdfc}
@media(max-width:700px){main{padding-left:18px;padding-right:18px}.hero h2{font-size:34px}.game-card{padding:16px}.game-icon{width:42px;height:42px}.quads-grid{gap:8px}.quads-tile{min-height:64px;font-size:13px;padding:8px 5px}#quadsPanel h2{font-size:26px}}
@media(prefers-reduced-motion:reduce){button,.game-card,.quads-tile{transition:none!important}}

/* =========================================================
   DESIGN PASS 02 — compact ribbon navigation / no-scroll desktop shell
   ========================================================= */
header{
  max-width:1040px;
  min-height:66px;
  padding:12px 24px 10px;
  align-items:center;
  gap:18px;
}
.brand small{display:none}
.brand h1{margin:0;font-size:23px;white-space:nowrap}
.date-tools{gap:6px;flex-wrap:nowrap}
.date-tools button{padding:7px 10px;font-size:13px;border-radius:8px}
.date-tools .status-pill{padding:5px 8px;font-size:11px;white-space:nowrap}
main{max-width:1040px;padding:0 24px 24px}
.hero,.game-grid{display:none!important}
.game-ribbon{
  display:flex;
  align-items:stretch;
  gap:0;
  border-bottom:1px solid var(--line);
  margin:0 0 10px;
  min-height:58px;
  overflow-x:auto;
  scrollbar-width:none;
}
.game-ribbon::-webkit-scrollbar{display:none}
.game-tab{
  appearance:none;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:145px;
  min-height:57px;
  padding:8px 18px 10px;
  background:transparent;
  color:#555c57;
  border:0;
  border-radius:0;
  box-shadow:none;
  font-size:14px;
  font-weight:900;
  white-space:nowrap;
  transition:background .14s ease,color .14s ease;
}
.game-tab:hover:not(:disabled){transform:none;background:#fafbfa;color:#282d2a}
.game-tab:active:not(:disabled){transform:none;background:#f5f7f5}
.game-tab::after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:-1px;
  height:3px;
  border-radius:3px 3px 0 0;
  background:transparent;
}
.game-tab.active{color:#202322;background:#fff}
.game-tab.active::after{background:#6f9f78}
.game-tab[data-game="five"].active::after{background:#5e956b}
.game-tab[data-game="quads"].active::after{background:#6f9f78}
.game-tab[data-game="mini"].active::after{background:#596a62}
.game-tab[data-game="trail"].active::after{background:#75689a}
.game-icon.nav-icon{width:27px;height:27px}
.game-icon-five.nav-icon i{border-radius:3px;font-size:8px}
.game-icon-quads.nav-icon{border-radius:7px;padding:2px;gap:1px}
.game-icon-quads.nav-icon i{border-radius:2px}
.game-icon-mini.nav-icon{gap:2px;padding:1px}
.game-icon-trail.nav-icon path{stroke-width:6}

#playArea{min-height:0}
#fivePanel,#quadsPanel,#wordTrailPanel,#miniPanel{
  margin-top:0!important;
}
#fivePanel{
  border:0;
  border-radius:0;
  padding:10px 0 0;
}
#quadsPanel{padding:10px 0 0}
.game-panel{padding-top:10px}
.five-head{min-height:48px}
.five-head small{font-size:10px;letter-spacing:.10em}
#quadsPanel h2,.five-head h2{font-size:25px!important;line-height:1.1}
#quadsPanel .five-head{max-width:760px}
#quadsStatus,#fiveStatus,#wordTrailStatus,#miniStatus{min-height:22px}
.quads-solved{margin-top:8px;gap:7px}
.quads-grid{margin:8px auto 12px;gap:8px}
.quads-tile{min-height:64px;padding:8px 7px}
.quads-footer{gap:8px}
.word-grid{margin:12px 0;gap:6px}
.tile{width:48px;height:48px;font-size:22px}
.keyboard{gap:5px}
.key{padding:8px 7px}
.wordtrail-theme{margin-top:8px}
.wordtrail-board-wrap{margin:8px auto 6px}
.wordtrail-found{margin-top:8px}
.mini-layout{margin-top:8px;gap:18px}
.mini-active-clue{min-height:42px;margin-bottom:7px;padding:8px 10px}
.ad{display:none}

@media(max-width:850px){
  header{align-items:flex-start;flex-direction:column;gap:8px;padding:12px 18px 10px}
  .date-tools{width:100%;overflow-x:auto;justify-content:flex-start;padding-bottom:2px}
  main{padding:0 18px 22px}
  .game-tab{min-width:125px;padding-left:12px;padding-right:12px}
}
@media(max-width:520px){
  .brand h1{font-size:21px}
  .game-ribbon{margin-left:-18px;margin-right:-18px;padding-left:6px}
  .game-tab{min-width:112px;font-size:13px}
  .game-icon.nav-icon{width:24px;height:24px}
}

/* SIX TO FIVE — A+ visual-system implementation */
:root{--sixfive:#5e956b;--sixfive-hover:#f1f7f2;--sixfive-correct:#4f8a61;--sixfive-present:#7f9fb4;--sixfive-absent:#e7ebe8;--sixfive-key:#f0f2f0}
#fivePanel{max-width:760px;margin-left:auto!important;margin-right:auto!important;background:#fff}
#fivePanel .five-head{padding:0 6px}#fivePanel .game-icon-five.small{width:24px;height:24px;gap:1px}#fivePanel .game-icon-five.small i{border-radius:3px;font-size:8px}
#fivePanel h2{color:#202322;font-weight:900;letter-spacing:-.025em}.hard-toggle{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:9px;background:#fff;border:1px solid #dfe3df;color:#454b47;font-size:13px;font-weight:700}.hard-toggle input{accent-color:var(--sixfive);width:15px;height:15px}
#fivePanel .word-grid{grid-template-columns:repeat(5,54px);gap:8px;margin:12px 0 14px}
#fivePanel .tile{width:54px;height:54px;border:0;border-radius:10px;background:#fbfcfb;color:#202322;box-shadow:var(--shadow-1);font-family:Lato,system-ui,sans-serif;font-size:23px;font-weight:900;letter-spacing:.02em}
#fivePanel .tile:not(:empty){background:#f7faf7}#fivePanel .tile.good{background:var(--sixfive-correct);color:#fff;box-shadow:none}#fivePanel .tile.present{background:var(--sixfive-present);color:#14212c;box-shadow:none}#fivePanel .tile.absent{background:var(--sixfive-absent);color:#626964;box-shadow:none}
#fivePanel .keyboard{max-width:570px;gap:6px;margin-top:2px}#fivePanel .key-row{gap:6px}#fivePanel .key{min-width:38px;min-height:42px;padding:8px 7px;border:0;border-radius:9px;background:var(--sixfive-key);color:#242926;box-shadow:0 1px 3px rgba(28,36,31,.10);font-size:13px;font-weight:900}
#fivePanel .key:hover:not(:disabled){background:var(--sixfive-hover);transform:translateY(-1px)}#fivePanel .key:active:not(:disabled){transform:translateY(1px);box-shadow:none}
#fivePanel .key.good{background:var(--sixfive-correct);color:#fff}#fivePanel .key.present{background:var(--sixfive-present);color:#14212c}#fivePanel .key.absent{background:var(--sixfive-absent);color:#626964;box-shadow:none}#fivePanel .key-action{background:#e9eeea;color:#27302a}
#fivePanel .result{max-width:420px;margin:8px auto 10px;padding:11px 14px;border-radius:11px;background:#f4f7f4;color:#313733}
#fivePanel .invalid-msg,#fivePanel .hard-msg{max-width:420px;margin:4px auto 6px;border-radius:9px;padding:7px 10px;text-align:center;font-weight:700}#fivePanel .invalid-msg{background:#fbefed;color:#9d5147}#fivePanel .hard-msg{background:#f6f1df;color:#806b27}
@media(max-width:700px){#fivePanel .word-grid{grid-template-columns:repeat(5,47px);gap:7px}#fivePanel .tile{width:47px;height:47px;font-size:21px}#fivePanel .key{min-width:31px;min-height:40px;padding:7px 5px}}

/* V20 Six to Five feedback contrast refinement */
#fivePanel .tile.present,
#fivePanel .key.present { background: var(--sixfive-present); color:#fff; }
#fivePanel .tile.absent,
#fivePanel .key.absent { background:#111; color:#fff; }

/* V21 Six to Five refinements */
#fivePanel .tile:not(.good):not(.present):not(.absent){
  box-shadow:0 5px 12px rgba(31,42,35,.18), 0 1px 3px rgba(31,42,35,.13);
}

/* V22 Six to Five tile shadow: same darkness, tighter spread */
#fivePanel .tile:not(.good):not(.present):not(.absent){
  box-shadow:0 4px 9px rgba(31,42,35,.18), 0 1px 2px rgba(31,42,35,.13);
}


/* V27 Short & Cross size increase */
.mini-player-grid{
  grid-template-columns:repeat(var(--mini-cols),94px);
  grid-template-rows:repeat(var(--mini-rows),94px);
}
.mini-cell{
  width:94px;
  height:94px;
}
.mini-letter{
  font-size:44px;
  padding-top:8px;
}
.mini-number{
  left:5px;
  top:4px;
  font-size:13px;
}
.mini-active-clue{
  font-size:18px;
  min-height:58px;
}

@media(max-width:760px){
  .mini-player-grid{
    grid-template-columns:repeat(var(--mini-cols),68px);
    grid-template-rows:repeat(var(--mini-rows),68px);
  }
  .mini-cell{
    width:68px;
    height:68px;
  }
  .mini-letter{
    font-size:34px;
  }
  .mini-number{
    font-size:11px;
  }
}
@media(max-width:480px){
  .mini-player-grid{
    grid-template-columns:repeat(var(--mini-cols),52px);
    grid-template-rows:repeat(var(--mini-rows),52px);
  }
  .mini-cell{
    width:52px;
    height:52px;
  }
  .mini-letter{
    font-size:27px;
  }
}


/* V28 Short & Cross layout refinement */
.mini-layout{
  display:grid;
  grid-template-columns:max-content minmax(320px, 440px);
  gap:40px;
  align-items:start;
  justify-content:center;
  width:100%;
  margin:18px auto 0;
}

.mini-player-grid{
  grid-template-columns:repeat(var(--mini-cols),75px);
  grid-template-rows:repeat(var(--mini-rows),75px);
}
.mini-cell{
  width:75px;
  height:75px;
}
.mini-letter{
  font-size:38px;
  padding-top:6px;
}
.mini-number{
  left:4px;
  top:3px;
  font-size:12px;
}

.mini-clues{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  min-width:0;
}

.mini-clues section{
  min-width:0;
}

.mini-clue{
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Medium widths: keep grid and clues side by side but scale slightly */
@media(max-width:980px){
  .mini-layout{
    grid-template-columns:max-content minmax(280px, 380px);
    gap:28px;
  }
  .mini-player-grid{
    grid-template-columns:repeat(var(--mini-cols),64px);
    grid-template-rows:repeat(var(--mini-rows),64px);
  }
  .mini-cell{
    width:64px;
    height:64px;
  }
  .mini-letter{
    font-size:32px;
  }
}

/* Narrow layouts: stack instead of ever overlapping */
@media(max-width:760px){
  .mini-layout{
    grid-template-columns:1fr;
    justify-items:center;
    gap:24px;
  }
  .mini-clues{
    width:min(100%, 620px);
  }
  .mini-player-grid{
    grid-template-columns:repeat(var(--mini-cols),56px);
    grid-template-rows:repeat(var(--mini-rows),56px);
  }
  .mini-cell{
    width:56px;
    height:56px;
  }
  .mini-letter{
    font-size:29px;
  }
}

@media(max-width:480px){
  .mini-player-grid{
    grid-template-columns:repeat(var(--mini-cols),48px);
    grid-template-rows:repeat(var(--mini-rows),48px);
  }
  .mini-cell{
    width:48px;
    height:48px;
  }
  .mini-letter{
    font-size:25px;
  }
  .mini-clues{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V31 — ON THE RIGHT TRACK visual / interaction pass
   ========================================================= */
:root{
  --ort-accent:#7359a3;
  --ort-accent-soft:#eee9f6;
  --ort-accent-mid:#d8cdea;
  --ort-success:#5e956b;
  --ort-tile:#fbfcfb;
  --ort-text:#202322;
  --ort-shadow:rgba(31,42,35,.16);
}

/* Slightly more compact ORT header to preserve viewport space */
#wordTrailPanel{
  max-width:820px;
  margin-left:auto!important;
  margin-right:auto!important;
  background:#fff;
}
#wordTrailPanel .five-head{
  padding:0 4px;
}
#wordTrailPanel h2{
  color:var(--ort-text);
  font-weight:900;
  letter-spacing:-.02em;
}

/* Board: same 42px touch target, more breathing room between cells */
.wordtrail-board-wrap{
  width:292px;
  height:392px;
  margin:12px auto 8px;
}
.wordtrail-player-grid{
  width:292px;
  height:392px;
  grid-template-columns:repeat(6,42px);
  grid-template-rows:repeat(8,42px);
  gap:8px;
}
.wordtrail-live-svg{
  width:292px;
  height:392px;
}

/* Borderless octagonal floating tiles */
.wordtrail-player-cell{
  width:42px;
  height:42px;
  border:0!important;
  border-radius:0;
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);
  background:var(--ort-tile);
  color:var(--ort-text);
  font-family:Lato,system-ui,sans-serif;
  font-size:16px;
  font-weight:900;
  filter:drop-shadow(0 3px 3px var(--ort-shadow));
  transition:background .13s ease,filter .13s ease,transform .13s ease,color .13s ease;
}
@media (hover:hover) and (pointer:fine){
  .wordtrail-player-cell:hover{
    background:#f4f0f8;
    transform:translateY(-1px);
    filter:drop-shadow(0 4px 4px rgba(31,42,35,.18));
  }
}
.wordtrail-player-cell:active{
  transform:translateY(1px);
  filter:drop-shadow(0 1px 2px rgba(31,42,35,.13));
}
.wordtrail-player-cell.active{
  background:var(--ort-accent-mid);
  color:#1f2020;
  filter:drop-shadow(0 4px 4px rgba(63,48,86,.22));
}
.wordtrail-player-cell.found{
  background:var(--ort-success);
  color:#fff;
  filter:drop-shadow(0 1px 2px rgba(31,42,35,.12));
}
.wordtrail-player-cell.theme-word{
  background:var(--ort-accent);
  color:#fff;
  filter:drop-shadow(0 1px 2px rgba(31,42,35,.12));
}
.wordtrail-player-cell.hint{
  outline:0;
  background:#f0e6bf;
  color:#29271f;
  filter:drop-shadow(0 4px 4px rgba(92,75,25,.20));
}

/* Path is strong enough to read through the wider gaps */
.wordtrail-live-svg polyline{
  stroke:var(--ort-accent);
  stroke-width:9;
  opacity:.52;
}
.wordtrail-live-svg polyline.found-line{
  stroke:var(--ort-success);
  opacity:.42;
}
.wordtrail-live-svg polyline.theme-line{
  stroke:var(--ort-accent);
  opacity:.48;
}

.wordtrail-theme{margin:10px auto 6px}
.wordtrail-theme-text{font-size:21px}
#wordTrailStatus{min-height:28px}
#wordTrailCurrentWord{min-height:28px}
.wordtrail-current{
  font-size:19px;
  color:var(--ort-text);
}

/* Hybrid button hierarchy from the site style guide */
#wordTrailPanel .action-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  flex-wrap:wrap;
}
#wordTrailClearBtn{
  background:#fff;
  color:#3e4540;
  border:1px solid #dde2dd;
  box-shadow:none;
}
#wordTrailSubmitBtn{
  background:var(--ort-accent);
  color:#fff;
  border:0;
  box-shadow:0 2px 5px rgba(67,49,94,.18);
}
#wordTrailHintBtn{
  background:var(--ort-accent-soft);
  color:#49366b;
  border:0;
  box-shadow:none;
}
#wordTrailPanel .action-row button{
  border-radius:9px;
  padding:9px 13px;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
#wordTrailPanel .action-row button:hover:not(:disabled){
  transform:translateY(-1px);
}
#wordTrailPanel .action-row button:active:not(:disabled){
  transform:translateY(1px);
  box-shadow:none;
}
#wordTrailPanel .action-row button:disabled{
  opacity:.42;
  cursor:default;
  transform:none;
}

/* 3-piece hint token -> hint bank */
.wordtrail-hint-system{
  width:min(100%,520px);
  margin:4px auto 0;
}
.ort-hint-flow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:54px;
  color:#606760;
}
.ort-hint-builder,
.ort-hint-bank{
  display:flex;
  align-items:center;
  gap:9px;
}
.ort-hint-label{
  font-size:11px;
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
  color:#7a817b;
  white-space:nowrap;
}
.ort-hint-token{
  width:42px;
  height:42px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  grid-template-rows:repeat(2,1fr);
  gap:2px;
  overflow:hidden;
  background:#fff;
  border-radius:11px;
  filter:drop-shadow(0 2px 3px rgba(31,42,35,.14));
}
.ort-hint-piece{
  display:block;
  background:#e5e8e5;
  transition:background .2s ease;
}
.ort-hint-piece.filled{
  background:var(--ort-accent);
}
.ort-hint-count{
  min-width:24px;
  font-size:13px;
  font-weight:900;
  color:#4c544e;
}
.ort-hint-arrow{
  color:#a2a8a3;
  font-weight:900;
  font-size:18px;
}
.ort-hint-bank-icons{
  display:flex;
  align-items:center;
  gap:4px;
  min-width:42px;
}
.ort-hint-bank-token{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:var(--ort-accent);
  color:#fff;
  font-size:13px;
  font-weight:900;
  filter:drop-shadow(0 1px 2px rgba(31,42,35,.13));
}
.ort-hint-bank-empty{
  width:28px;
  height:28px;
  border-radius:8px;
  background:#eceeec;
}

.wordtrail-controls{gap:6px}
.wordtrail-found{margin-top:12px}

@media(max-width:700px){
  .wordtrail-board-wrap{margin-top:10px}
  .ort-hint-flow{gap:8px}
  .ort-hint-label{font-size:10px}
  #wordTrailPanel .action-row{gap:7px}
  #wordTrailPanel .action-row button{padding:8px 11px;font-size:13px}
}


/* V32 — ORT selection state always wins visually while tracing */
.wordtrail-player-cell.active,
.wordtrail-player-cell.active.found,
.wordtrail-player-cell.active.theme-word,
.wordtrail-player-cell.active.hint,
.wordtrail-player-cell.active.found.hint,
.wordtrail-player-cell.active.theme-word.hint{
  background:var(--ort-accent-mid)!important;
  color:#1f2020!important;
  filter:drop-shadow(0 4px 4px rgba(63,48,86,.24))!important;
  transform:translateY(-1px);
}

/* Keep active path legible over all underlying tile states */
.wordtrail-player-cell.active::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* V33 Every Last Letter */
.game-icon-ell{display:grid;grid-template-columns:repeat(2,14px);gap:2px}
.game-icon-ell i{width:14px;height:14px;border-radius:3px;background:#f1eee5;border:1px solid #d2ccbf;display:grid;place-items:center;font-size:8px;font-style:normal;font-weight:900}
.ell-player{display:grid;justify-items:center;gap:14px;margin-top:18px}
.ell-grid{display:grid;grid-template-columns:repeat(5,64px);gap:7px}
.ell-tile{width:64px;height:64px;border:0;border-radius:10px;background:#faf9f4;color:#171717;font-size:30px;font-weight:900;box-shadow:0 3px 8px rgba(0,0,0,.14);cursor:pointer;position:relative}
.ell-tile.selected{background:#f2d26b;transform:translateY(-2px)}
.ell-tile.selected::after{content:attr(data-order);position:absolute;right:4px;bottom:2px;font-size:10px}
.ell-tile.empty{visibility:hidden}
.ell-current-word{min-height:38px;font-size:27px;font-weight:900;letter-spacing:.08em}
.ell-progress{font-weight:800}
.ell-completed{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;max-width:650px}
.ell-completed-word{border:1px solid #d4cec0;background:#f5f2ea;border-radius:8px;padding:8px 11px;font-weight:900;letter-spacing:.08em}
.ell-completed-word.reclaim-selected{outline:3px solid #d4a23a;background:#fff7dd}
@media(max-width:520px){.ell-grid{grid-template-columns:repeat(5,52px);gap:5px}.ell-tile{width:52px;height:52px;font-size:25px}}

.ell-tile.ended{opacity:.6;cursor:default}

/* V43 ELL scoring */
.ell-stats-row{
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.ell-score{
  font-weight:900;
  font-size:18px;
}
.ell-completed-word{
  display:flex;
  align-items:center;
  gap:7px;
}
.ell-completed-word small{
  font-size:11px;
  opacity:.7;
}

/* V44 ELL submitted-word readability */
.ell-completed-word,
.ell-completed-word span,
.ell-completed-word small{
  color:#111 !important;
}


/* V45 ELL end-game presentation */
.ell-endgame{
  width:min(100%,560px);
  box-sizing:border-box;
  margin:14px auto 4px;
  padding:26px 28px 22px;
  border-radius:16px;
  background:#f7f4eb;
  box-shadow:0 8px 24px rgba(0,0,0,.12);
  text-align:center;
  display:grid;
  justify-items:center;
  gap:8px;
}
.ell-endgame-title{
  font-size:30px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.02em;
}
.ell-endgame-summary{
  margin-top:5px;
  font-size:18px;
}
.ell-endgame-score{
  font-size:20px;
}
.ell-endgame-score strong{
  font-size:26px;
}
.ell-try-again{
  appearance:none;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:4px 2px !important;
  margin-top:8px;
  color:inherit !important;
  font:inherit;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
}
.ell-try-again:hover{
  text-decoration:underline;
  transform:translateY(-1px);
}
.ell-try-again:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
  border-radius:3px;
}
.ell-endgame-win{
  background:#eef6ea;
}


/* =========================================================
   V46 — EVERY LAST LETTER premium tile visual pass
   ========================================================= */
:root{
  --ell-tile-face-top:#fffdf7;
  --ell-tile-face-bottom:#f3efe4;
  --ell-tile-text:#161817;
  --ell-tile-shadow:rgba(48,42,31,.24);
  --ell-tile-edge:rgba(110,94,65,.18);
  --ell-select:#d9e7df;
  --ell-select-shadow:rgba(65,86,73,.28);
}

/* Give ELL tiles a restrained premium tabletop-piece feel */
#ellPanel .ell-tile,
#everyLastLetterPanel .ell-tile,
.ell-board .ell-tile,
.ell-grid .ell-tile{
  position:relative;
  border:0!important;
  border-radius:8px!important;
  color:var(--ell-tile-text)!important;
  background:
    linear-gradient(180deg,var(--ell-tile-face-top) 0%,#fbf8ef 58%,var(--ell-tile-face-bottom) 100%)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -2px 0 var(--ell-tile-edge) inset,
    0 4px 7px var(--ell-tile-shadow)!important;
  font-family:Lato,system-ui,sans-serif!important;
  font-weight:900!important;
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background .12s ease,
    color .12s ease!important;
}

/* A faint top-plane highlight helps the pieces read as physical without looking glossy */
#ellPanel .ell-tile::before,
#everyLastLetterPanel .ell-tile::before,
.ell-board .ell-tile::before,
.ell-grid .ell-tile::before{
  content:"";
  position:absolute;
  inset:1px 4px auto 4px;
  height:1px;
  border-radius:50%;
  background:rgba(255,255,255,.78);
  pointer-events:none;
}

@media (hover:hover) and (pointer:fine){
  #ellPanel .ell-tile:hover:not(.used):not(.empty),
  #everyLastLetterPanel .ell-tile:hover:not(.used):not(.empty),
  .ell-board .ell-tile:hover:not(.used):not(.empty),
  .ell-grid .ell-tile:hover:not(.used):not(.empty){
    background:
      linear-gradient(180deg,#fffefb 0%,#fcfaf3 58%,#f5f1e7 100%)!important;
    transform:translateY(-1px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.98) inset,
      0 -2px 0 rgba(110,94,65,.17) inset,
      0 5px 8px rgba(48,42,31,.25)!important;
  }
}

/* Selection is the most visibly elevated state */
#ellPanel .ell-tile.selected,
#everyLastLetterPanel .ell-tile.selected,
.ell-board .ell-tile.selected,
.ell-grid .ell-tile.selected{
  background:
    linear-gradient(180deg,#eaf3ee 0%,var(--ell-select) 100%)!important;
  color:#18201b!important;
  transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -2px 0 rgba(74,101,84,.16) inset,
    0 6px 9px var(--ell-select-shadow)!important;
}

/* Pressed/tapped tile settles slightly, reinforcing the physical piece metaphor */
#ellPanel .ell-tile:active:not(.used):not(.empty),
#everyLastLetterPanel .ell-tile:active:not(.used):not(.empty),
.ell-board .ell-tile:active:not(.used):not(.empty),
.ell-grid .ell-tile:active:not(.used):not(.empty){
  transform:translateY(1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.88) inset,
    0 -1px 0 rgba(110,94,65,.15) inset,
    0 2px 4px rgba(48,42,31,.21)!important;
}

/* Used/removed pieces should remain visually absent rather than retaining a raised surface */
#ellPanel .ell-tile.used,
#ellPanel .ell-tile.empty,
#everyLastLetterPanel .ell-tile.used,
#everyLastLetterPanel .ell-tile.empty,
.ell-board .ell-tile.used,
.ell-board .ell-tile.empty,
.ell-grid .ell-tile.used,
.ell-grid .ell-tile.empty{
  background:transparent!important;
  box-shadow:none!important;
  color:transparent!important;
  transform:none!important;
}
#ellPanel .ell-tile.used::before,
#ellPanel .ell-tile.empty::before,
#everyLastLetterPanel .ell-tile.used::before,
#everyLastLetterPanel .ell-tile.empty::before,
.ell-board .ell-tile.used::before,
.ell-board .ell-tile.empty::before,
.ell-grid .ell-tile.used::before,
.ell-grid .ell-tile.empty::before{
  display:none!important;
}


/* =========================================================
   V47 — EVERY LAST LETTER soft resin tile refinement
   Cleaner, cooler, more contemporary than V46
   ========================================================= */
:root{
  --ell-resin-face:#f5f7f7;
  --ell-resin-face-hover:#fafbfb;
  --ell-resin-bottom:#e8eceb;
  --ell-resin-text:#141817;
  --ell-resin-shadow:rgba(24,31,28,.20);
  --ell-resin-shadow-hover:rgba(24,31,28,.23);
  --ell-resin-edge:rgba(74,84,79,.13);
  --ell-resin-select:#dcebe3;
  --ell-resin-select-edge:rgba(72,101,84,.15);
  --ell-resin-select-shadow:rgba(51,77,62,.24);
}

#ellPanel .ell-tile,
#everyLastLetterPanel .ell-tile,
.ell-board .ell-tile,
.ell-grid .ell-tile{
  border:0!important;
  border-radius:8px!important;
  color:var(--ell-resin-text)!important;
  background:var(--ell-resin-face)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 -1px 0 var(--ell-resin-edge) inset,
    0 4px 6px var(--ell-resin-shadow)!important;
  font-family:Lato,system-ui,sans-serif!important;
  font-weight:900!important;
  letter-spacing:.01em;
}

/* Minimal top-plane highlight only — no obvious gradient/bevel */
#ellPanel .ell-tile::before,
#everyLastLetterPanel .ell-tile::before,
.ell-board .ell-tile::before,
.ell-grid .ell-tile::before{
  content:"";
  position:absolute;
  inset:1px 5px auto 5px;
  height:1px;
  border-radius:50%;
  background:rgba(255,255,255,.70);
  pointer-events:none;
}

@media (hover:hover) and (pointer:fine){
  #ellPanel .ell-tile:hover:not(.used):not(.empty),
  #everyLastLetterPanel .ell-tile:hover:not(.used):not(.empty),
  .ell-board .ell-tile:hover:not(.used):not(.empty),
  .ell-grid .ell-tile:hover:not(.used):not(.empty){
    background:var(--ell-resin-face-hover)!important;
    transform:translateY(-1px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.98) inset,
      0 -1px 0 rgba(74,84,79,.12) inset,
      0 5px 7px var(--ell-resin-shadow-hover)!important;
  }
}

#ellPanel .ell-tile.selected,
#everyLastLetterPanel .ell-tile.selected,
.ell-board .ell-tile.selected,
.ell-grid .ell-tile.selected{
  background:var(--ell-resin-select)!important;
  color:#17201b!important;
  transform:translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,
    0 -1px 0 var(--ell-resin-select-edge) inset,
    0 6px 8px var(--ell-resin-select-shadow)!important;
}

#ellPanel .ell-tile:active:not(.used):not(.empty),
#everyLastLetterPanel .ell-tile:active:not(.used):not(.empty),
.ell-board .ell-tile:active:not(.used):not(.empty),
.ell-grid .ell-tile:active:not(.used):not(.empty){
  transform:translateY(1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.88) inset,
    0 -1px 0 rgba(74,84,79,.11) inset,
    0 2px 3px rgba(24,31,28,.18)!important;
}


/* V47.2 — ELL tile spacing refinement
   Increase desktop and mobile gaps by 3px from the existing values. */
.ell-grid{
  gap:10px;
}
@media(max-width:700px){
  .ell-grid{
    gap:8px;
  }
}


/* =========================================================
   V48 — SHORT & CROSS editorial visual pass
   Distinct slate selection system; crisp continuous crossword grid
   ========================================================= */
:root{
  --sc-ink:#202526;
  --sc-block:#24292a;
  --sc-grid:#343a3b;
  --sc-accent:#647f92;
  --sc-accent-soft:#e8eef2;
  --sc-accent-mid:#b8cad5;
  --sc-clue-active:#eef3f6;
  --sc-muted:#6f7779;
}

/* Crisp continuous grid: no floating-cell treatment */
#miniPanel .mini-player-grid{
  gap:0!important;
  border:2px solid var(--sc-grid);
  background:var(--sc-grid);
  box-shadow:none!important;
}
#miniPanel .mini-cell{
  box-sizing:border-box;
  border:0!important;
  border-right:1px solid var(--sc-grid)!important;
  border-bottom:1px solid var(--sc-grid)!important;
  border-radius:0!important;
  background:#fff;
  color:var(--sc-ink);
  box-shadow:none!important;
  transition:background .10s ease,color .10s ease;
}
#miniPanel .mini-cell.black{
  background:var(--sc-block)!important;
  border-color:var(--sc-grid)!important;
}
#miniPanel .mini-cell.word-highlight{
  background:var(--sc-accent-soft)!important;
}
#miniPanel .mini-cell.active,
#miniPanel .mini-cell.active.word-highlight{
  background:var(--sc-accent-mid)!important;
  color:#172126!important;
}

/* Letters dominate; clue numbers recede */
#miniPanel .mini-letter,
#miniPanel .mini-cell input{
  color:var(--sc-ink);
  font-family:Lato,system-ui,sans-serif;
  font-weight:900;
  letter-spacing:.01em;
}
#miniPanel .mini-number{
  left:3px;
  top:2px;
  color:var(--sc-muted);
  font-size:9px;
  line-height:1;
  font-weight:700;
}

/* Current clue gets a clean editorial callout */
#miniPanel .mini-active-clue{
  border:0!important;
  border-left:3px solid var(--sc-accent)!important;
  border-radius:7px!important;
  background:var(--sc-clue-active)!important;
  color:var(--sc-ink)!important;
  box-shadow:none!important;
  padding:9px 11px!important;
  font-weight:700;
}

/* Clue lists: quieter default, unmistakable active clue */
#miniPanel .mini-clues h3{
  color:var(--sc-ink);
  font-weight:900;
  letter-spacing:.01em;
}
#miniPanel .mini-clue{
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#353c3e!important;
  padding:7px 9px!important;
  line-height:1.35;
  font-weight:400;
}
@media (hover:hover) and (pointer:fine){
  #miniPanel .mini-clue:hover:not(.active){
    background:#f4f6f6!important;
  }
}
#miniPanel .mini-clue.active{
  background:var(--sc-clue-active)!important;
  color:var(--sc-ink)!important;
  box-shadow:inset 3px 0 0 var(--sc-accent);
  font-weight:800!important;
}

/* Keep the action area consistent with the global hybrid control system */
#miniPanel .mini-actions button{
  border-radius:9px;
  font-family:Lato,system-ui,sans-serif;
  font-weight:800;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
@media (hover:hover) and (pointer:fine){
  #miniPanel .mini-actions button:hover:not(:disabled){
    transform:translateY(-1px);
  }
}
#miniPanel .mini-actions button:active:not(:disabled){
  transform:translateY(1px);
  box-shadow:none;
}


/* =========================================================
   V49 — SITE GAME COLOUR IDENTITY PASS
   More chroma at the navigation/identity layer; play areas stay restrained.
   ========================================================= */
:root{
  --game-five:#4f9164;
  --game-five-soft:#edf6f0;

  --game-ell:#268d89;
  --game-ell-soft:#e9f5f4;

  --game-quads:#c66f58;
  --game-quads-soft:#faefeb;

  --game-mini:#587e9b;
  --game-mini-soft:#edf3f7;

  --game-trail:#7359a3;
  --game-trail-soft:#f1edf7;
}

/* Ribbon: colour becomes the site's strongest recurring identity cue */
.game-tab{
  color:#4d5551;
  transition:background .14s ease,color .14s ease;
}
.game-tab::after{
  height:3px;
}
.game-tab[data-game="five"].active{
  background:var(--game-five-soft);
  color:#234a30;
}
.game-tab[data-game="five"].active::after{background:var(--game-five)}

.game-tab[data-game="ell"].active{
  background:var(--game-ell-soft);
  color:#185a57;
}
.game-tab[data-game="ell"].active::after{background:var(--game-ell)}

.game-tab[data-game="quads"].active{
  background:var(--game-quads-soft);
  color:#704033;
}
.game-tab[data-game="quads"].active::after{background:var(--game-quads)}

.game-tab[data-game="mini"].active{
  background:var(--game-mini-soft);
  color:#31536a;
}
.game-tab[data-game="mini"].active::after{background:var(--game-mini)}

.game-tab[data-game="trail"].active{
  background:var(--game-trail-soft);
  color:#49366b;
}
.game-tab[data-game="trail"].active::after{background:var(--game-trail)}

@media (hover:hover) and (pointer:fine){
  .game-tab[data-game="five"]:hover:not(.active){background:#f5faf6}
  .game-tab[data-game="ell"]:hover:not(.active){background:#f4faf9}
  .game-tab[data-game="quads"]:hover:not(.active){background:#fcf6f4}
  .game-tab[data-game="mini"]:hover:not(.active){background:#f5f8fa}
  .game-tab[data-game="trail"]:hover:not(.active){background:#f7f5fa}
}

/* Six to Five icon: richer green focal tile */
.game-icon-five i:nth-child(3){
  background:var(--game-five)!important;
  color:#fff;
}
.game-tab[data-game="five"] .game-icon-five i:not(:nth-child(3)){
  background:#e5eee7;
}

/* Every Last Letter icon: clean teal identity, no vintage beige */
.game-icon-ell i{
  background:#e6f1f0!important;
  border-color:#b9d6d3!important;
  color:#226c68;
}
.game-icon-ell i:nth-child(1),
.game-icon-ell i:nth-child(3){
  background:var(--game-ell)!important;
  border-color:var(--game-ell)!important;
  color:#fff;
}

/* Quads retains its multicolour meaning, but coral becomes the surrounding identity */
.game-icon-quads{
  background:var(--game-quads-soft)!important;
}
.game-icon-quads i:nth-child(3){
  background:var(--game-quads)!important;
}

/* Short & Cross icon gets an unmistakable slate-blue signature */
.game-icon-mini{
  background:var(--game-mini-soft);
  border-radius:7px;
}
.game-icon-mini i{
  background:#fff;
}
.game-icon-mini i.dark{
  background:var(--game-mini)!important;
}

/* ORT trail/endpoints gain a richer violet */
.game-icon-trail path{
  stroke:var(--game-trail)!important;
}
.game-icon-trail polygon{
  fill:#ded8e9!important;
}
.game-icon-trail polygon.end{
  fill:var(--game-trail)!important;
}

/* Small game labels/icons in headers carry identity colour without colouring titles */
#fivePanel .game-kicker small{color:var(--game-five)}
#quadsPanel .game-kicker small{color:var(--game-quads)}
#miniPanel .game-kicker small,
#miniPanel .five-head small{color:var(--game-mini)}
#wordTrailPanel .game-kicker small,
#wordTrailPanel .five-head small{color:var(--game-trail)}
#ellPanel .five-head small{color:var(--game-ell)}

/* Primary actions inherit game identity. Secondary actions stay neutral. */
#fivePanel button:not(.secondary):not(.key),
#fivePanel .primary{
  background:var(--game-five);
  color:#fff;
}
#ellPanel #ellSubmitBtn{
  background:var(--game-ell)!important;
  color:#fff!important;
  border-color:var(--game-ell)!important;
}
#quadsPanel button:not(.secondary){
  accent-color:var(--game-quads);
}
#miniPanel .mini-actions button:not(.secondary){
  background:var(--game-mini);
  color:#fff;
  border-color:var(--game-mini);
}
#wordTrailSubmitBtn{
  background:var(--game-trail)!important;
}
#wordTrailHintBtn{
  background:var(--game-trail-soft)!important;
  color:#49366b!important;
}

/* Short & Cross selection gets slightly more chroma now that it is the game's identity. */
#miniPanel{
  --sc-accent:var(--game-mini);
  --sc-accent-soft:#e6eff4;
  --sc-accent-mid:#a9c3d3;
  --sc-clue-active:#edf4f7;
}

/* ELL selection harmonizes with its new teal identity while preserving resin tiles. */
#ellPanel .ell-tile.selected,
#everyLastLetterPanel .ell-tile.selected,
.ell-board .ell-tile.selected,
.ell-grid .ell-tile.selected{
  background:#d8ece9!important;
  color:#153f3d!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,
    0 -1px 0 rgba(38,141,137,.16) inset,
    0 6px 8px rgba(38,110,106,.24)!important;
}


/* =========================================================
   V50 — One and the Same
   ========================================================= */
:root{
  --game-same:#a66b2b;
  --game-same-soft:#fbf2e7;
}
.game-tab[data-game="same"].active{
  background:var(--game-same-soft);
  color:#704214;
}
.game-tab[data-game="same"].active::after{background:var(--game-same)}
@media (hover:hover) and (pointer:fine){
  .game-tab[data-game="same"]:hover:not(.active){background:#fcf7f0}
}
.game-icon-same{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.game-icon-same i{
  width:13px;height:20px;
  display:grid;place-items:center;
  border-radius:4px;
  background:#f3e5d5;
  color:#80501e;
  font-style:normal;
  font-size:10px;
  font-weight:900;
  line-height:1;
}
.game-icon-same i:nth-child(2){
  background:var(--game-same);
  color:#fff;
}
.game-icon-same.small i{width:11px;height:17px;font-size:8px}
#samePanel .game-kicker small{color:var(--game-same)}
#sameGuessBtn{background:var(--game-same)!important;color:#fff!important}

#samePanel{
  margin-top:26px;
  background:white;
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
}
.same-game{
  max-width:760px;
  margin:26px auto 8px;
}
.same-history{
  display:grid;
  gap:8px;
  margin:0 0 24px;
}
.same-history-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(120px,190px);
  column-gap:48px;
  align-items:start;
  padding:8px 2px;
  border-bottom:1px solid #ece9e2;
}
.same-history-clue{
  min-width:0;
  text-align:left;
  color:#55534d;
  font-size:15px;
  line-height:1.42;
  overflow-wrap:anywhere;
}
.same-history-index{
  display:inline-block;
  min-width:22px;
  margin-right:6px;
  color:#9a958a;
  font-size:11px;
  font-weight:900;
}
.same-history-guess{
  min-width:0;
  text-align:right;
  font-size:15px;
  font-weight:800;
  color:#777169;
  text-decoration-line:line-through;
  text-decoration-thickness:2px;
  overflow-wrap:anywhere;
}
.same-active-area{
  display:grid;
  justify-items:center;
  text-align:center;
}
.same-clue-number{
  color:var(--game-same);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  margin-bottom:8px;
}
.same-current-clue{
  width:100%;
  font-size:clamp(28px,4vw,42px);
  line-height:1.14;
  font-weight:900;
  letter-spacing:-.02em;
  text-wrap:balance;
  margin:0 auto 24px;
}
.same-guess-area{
  width:min(100%,600px);
  display:grid;
  justify-items:center;
  gap:12px;
}
.same-guess-input{
  width:100%;
  min-height:62px;
  border:2px solid #cbc5bb;
  border-radius:12px;
  background:#fff;
  color:#171717;
  padding:10px 16px;
  font:900 27px/1.2 Lato,system-ui,sans-serif;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.05em;
  outline:none;
}
.same-guess-input:focus{
  border-color:var(--game-same);
  box-shadow:0 0 0 3px rgba(166,107,43,.12);
}
.same-guess-btn{
  min-width:150px;
  padding:12px 24px;
  letter-spacing:.08em;
}
.same-status{margin-top:20px}
.same-hidden{display:none!important}
.same-result{
  width:min(100%,600px);
  margin:18px auto 0;
  padding:28px 24px;
  border-radius:16px;
  text-align:center;
  background:var(--game-same-soft);
  box-shadow:0 8px 24px rgba(75,52,25,.10);
}
.same-result-kicker{
  color:#8a6033;
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
}
.same-result-title{
  margin-top:5px;
  font-size:clamp(34px,6vw,54px);
  line-height:1;
  font-weight:900;
  letter-spacing:.04em;
}
.same-result-copy{margin-top:12px;font-size:18px}
.same-result-loss{background:#f3f0eb}
.same-input-nudge{animation:sameNudge .18s ease-in-out 0s 2}
@keyframes sameNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

@media(max-width:620px){
  .same-history-row{
    grid-template-columns:minmax(0,1fr) minmax(90px,34%);
    column-gap:22px;
  }
  .same-current-clue{font-size:30px}
  .same-guess-input{font-size:23px}
}


/* V52 — One and the Same visual polish */
.same-history{
  min-height:174px;
  align-content:end;
}
@media(max-width:620px){
  .same-history{
    min-height:156px;
  }
}

.same-history-clue{
  font-size:17px !important;
}
.same-history-guess{
  font-size:17px !important;
}

.same-guess-input{
  border:0 !important;
  border-radius:999px !important;
  box-shadow:0 5px 16px rgba(0,0,0,.16) !important;
  padding-left:24px !important;
  padding-right:24px !important;
}
.same-guess-input:focus{
  border:0 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.20), 0 0 0 3px rgba(166,107,43,.10) !important;
}

.same-guess-btn{
  font-size:18px !important;
}


/* V53 — One and the Same spacing refinement */
.same-guess-btn{
  margin-top:10px !important;
  font-size:22px !important; /* +4px from V52 */
  line-height:1 !important;
  min-height:0 !important;
}

/* Keep the visible button footprint unchanged while enlarging the label. */
.same-guess-btn{
  padding-top:12px !important;
  padding-bottom:12px !important;
}

/* Balance the reserved clue-history whitespace above with breathing room below. */
#samePanel{
  padding-bottom:170px !important;
}
@media(max-width:620px){
  #samePanel{
    padding-bottom:152px !important;
  }
}

/* V55 — One and the Same result-copy refinement */
.same-result-kicker{line-height:1.35}
.same-result-loss .same-result-kicker{max-width:360px;margin:0 auto}


/* V56 — Six to Five sharp tiles + active-row brackets */
#fiveGrid .tile{
  border-radius:0 !important;
}
#fiveGrid .tile.active-five-row{
  position:relative;
}
#fiveGrid .tile.active-five-row-start::before,
#fiveGrid .tile.active-five-row-end::after{
  content:"";
  position:absolute;
  top:-2px;
  bottom:-2px;
  width:3px;
  background:#252525;
  border-radius:0;
  pointer-events:none;
}
#fiveGrid .tile.active-five-row-start::before{
  left:-12px;
}
#fiveGrid .tile.active-five-row-end::after{
  right:-12px;
}
@media(max-width:700px){
  #fiveGrid .tile.active-five-row-start::before{left:-9px}
  #fiveGrid .tile.active-five-row-end::after{right:-9px}
}


/* V57 — Six to Five tighter/heavier active-row brackets */
#fiveGrid .tile.active-five-row-start::before,
#fiveGrid .tile.active-five-row-end::after{
  width:5px !important;
}
#fiveGrid .tile.active-five-row-start::before{
  left:-5px !important;
}
#fiveGrid .tile.active-five-row-end::after{
  right:-5px !important;
}
@media(max-width:700px){
  #fiveGrid .tile.active-five-row-start::before{left:-5px !important}
  #fiveGrid .tile.active-five-row-end::after{right:-5px !important}
}
/* V60 Six to Five premium end-game */
.five-endgame-overlay[hidden]{display:none!important}
.five-endgame-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:22px;background:rgba(17,21,19,.46);backdrop-filter:blur(2px);animation:fiveOverlayIn .18s ease-out}
.five-endgame-card{position:relative;width:min(500px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:hidden;background:#fff;border-radius:18px;box-shadow:0 18px 48px rgba(16,22,18,.18);padding:27px 34px 25px;animation:fiveCardIn .22s cubic-bezier(.2,.75,.25,1)}
.five-endgame-close{position:absolute;top:14px;right:15px;width:32px;height:32px;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;color:#7c837f!important;font:400 25px/1 Lato,system-ui,sans-serif!important;cursor:pointer}.five-endgame-close:hover{background:#f3f5f3!important;color:#252a27!important;transform:none!important}
.five-endgame-content{text-align:center}.five-endgame-kicker{color:#767d78;font-size:10px;font-weight:900;letter-spacing:.19em}
.five-endgame-mini-grid{display:grid;grid-template-columns:repeat(5,31px);gap:4px;justify-content:center;margin:15px auto 21px}.five-endgame-mini-tile{width:31px;height:31px;display:grid;place-items:center;border-radius:6px;background:#eceeec;color:#1f2321;font-size:13px;font-weight:900;box-shadow:0 1px 3px rgba(28,34,30,.09)}.five-endgame-mini-tile.good{background:#4f9164;color:#fff}.five-endgame-mini-tile.present{background:#7f95a7;color:#fff}.five-endgame-mini-tile.absent{background:#252927;color:#fff}
.five-endgame-content h2{margin:0;color:#171b19;font-size:39px;line-height:1.04;font-weight:900;letter-spacing:-.03em}.five-endgame-message{margin:7px auto 0;color:#6f7772;font-size:17px;line-height:1.35}.five-endgame-answer{margin:8px auto 0;color:#626a65;font-size:16px}.five-endgame-answer strong{color:#202322;font-weight:900;letter-spacing:.05em}
.five-endgame-art{display:block;width:78px;height:78px;object-fit:contain;margin:9px auto 5px}.five-endgame-stats{display:grid;grid-template-columns:repeat(2,minmax(0,128px));justify-content:center;margin:9px auto 19px}.five-endgame-stats>div{padding:1px 18px}.five-endgame-stats>div+div{border-left:1px solid #e8eae8}.five-endgame-stats strong{display:block;color:#171b19;font-size:23px;line-height:1.12;font-weight:900}.five-endgame-stats span{display:block;margin-top:4px;color:#858c87;font-size:9px;font-weight:900;letter-spacing:.14em}
.five-endgame-share-section{margin-top:0}.five-endgame-primary-share{width:min(350px,100%);padding:13px 20px!important;border:0!important;border-radius:10px!important;background:#4f9164!important;color:#fff!important;box-shadow:none!important;font:900 14px Lato,system-ui,sans-serif!important}.five-endgame-primary-share:hover{background:#438157!important;transform:none!important}.five-endgame-primary-share span{margin-left:6px}.five-endgame-copy{margin-top:7px!important;padding:4px 6px!important;border:0!important;background:transparent!important;box-shadow:none!important;color:#777f7a!important;font:700 11px Lato,system-ui,sans-serif!important}.five-endgame-copy:hover{color:#315a3d!important;text-decoration:underline;transform:none!important}.five-endgame-result-line{margin-top:4px;color:#929893;font-size:10px}
.five-endgame-next{display:flex!important;align-items:center;justify-content:center;gap:8px;width:100%;margin:18px 0 0!important;padding:14px 0 0!important;border:0!important;border-top:1px solid #eceeec!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#5e6862!important;font:800 12px Lato,system-ui,sans-serif!important;cursor:pointer}.five-endgame-next strong{color:#4f9164;font-size:15px}.five-endgame-next:hover{color:#2f5f3d!important;transform:none!important}
@keyframes fiveOverlayIn{from{opacity:0}to{opacity:1}}@keyframes fiveCardIn{from{opacity:0;transform:scale(.985) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}
@media(max-width:560px){.five-endgame-overlay{padding:12px}.five-endgame-card{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:23px 18px 19px;border-radius:16px}.five-endgame-close{top:9px;right:9px}.five-endgame-mini-grid{grid-template-columns:repeat(5,27px);gap:4px;margin:12px auto 17px}.five-endgame-mini-tile{width:27px;height:27px;border-radius:5px;font-size:11px}.five-endgame-content h2{font-size:32px}.five-endgame-message{font-size:15px;margin-top:6px}.five-endgame-art{width:66px;height:66px;margin:7px auto 3px}.five-endgame-stats{margin:7px auto 15px}.five-endgame-stats strong{font-size:20px}.five-endgame-primary-share{padding:12px 18px!important}.five-endgame-copy{display:none!important}.five-endgame-result-line{margin-top:7px}.five-endgame-next{margin-top:15px!important;padding-top:12px!important}}
@media(max-height:700px){.five-endgame-card{padding-top:19px;padding-bottom:15px}.five-endgame-mini-grid{margin:8px auto 12px}.five-endgame-content h2{font-size:29px}.five-endgame-message{font-size:14px}.five-endgame-art{width:56px;height:56px;margin:4px auto 2px}.five-endgame-stats{margin:5px auto 11px}.five-endgame-primary-share{padding:10px 16px!important}.five-endgame-next{margin-top:10px!important;padding-top:9px!important}.five-endgame-result-line{margin-top:4px}}


/* V64 — Six to Five three-a-day archive play */
.five-endgame-daily-line{margin:16px 0 0;padding-top:13px;border-top:1px solid #eceeec;color:#929893;font-size:10px;font-weight:800;letter-spacing:.035em}
.five-endgame-daily-line+.five-endgame-next{margin-top:4px!important;padding-top:7px!important;border-top:0!important}
.five-endgame-next:disabled{cursor:default!important;color:#929893!important;opacity:1}.five-endgame-next:disabled:hover{color:#929893!important}
@media(max-width:560px){.five-endgame-daily-line{margin-top:13px;padding-top:11px}.five-endgame-daily-line+.five-endgame-next{margin-top:2px!important;padding-top:6px!important}}
@media(max-height:700px){.five-endgame-daily-line{margin-top:9px;padding-top:8px}.five-endgame-daily-line+.five-endgame-next{margin-top:1px!important;padding-top:4px!important}}


/* =========================================================
   V66 — FRONT PAGE + MOBILE SITE SHELL
   Phase 1 intentionally changes the site shell only. Individual game
   layouts retain their existing responsive rules for later tuning.
   ========================================================= */
.brand-home{
  appearance:none;background:transparent!important;color:inherit!important;border:0!important;
  padding:0!important;border-radius:0!important;box-shadow:none!important;text-align:left;
}
.brand-home:hover,.brand-home:active{transform:none!important;background:transparent!important;box-shadow:none!important}
.mobile-menu-btn,.mobile-site-menu{display:none}
.home-tab-icon{font-size:22px;line-height:1;color:#59615c}

/* Front page */
.front-page{padding:28px 0 8px}
.front-page-hidden{display:none!important}
.play-area-hidden{display:none!important}
.front-page-intro{max-width:760px;margin:0 auto 20px;text-align:center}
.front-page-intro small{font-size:11px;font-weight:900;letter-spacing:.14em;color:#777f7a}
.front-page-intro h2{font-size:34px;letter-spacing:-.035em;margin:5px 0 0;color:#202322}
.front-game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:900px;margin:0 auto}
.front-game-card{
  min-height:150px;padding:20px 18px;border:0;border-radius:18px;box-shadow:var(--shadow-1);
  display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:1fr;gap:14px;align-items:center;
  text-align:left;color:#202322;background:#fff;transition:transform .16s ease,box-shadow .16s ease;
}
.front-game-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.front-game-card:active{transform:translateY(0)}
.front-game-icon{width:52px;height:52px;flex:0 0 auto}
.front-game-copy{display:flex;flex-direction:column;gap:5px;min-width:0}
.front-game-copy strong{font-size:19px;line-height:1.08;font-weight:900;letter-spacing:-.02em}
.front-game-copy>span{font-size:13px;line-height:1.35;color:#5f6762;font-weight:600}
.front-card-arrow{font-size:22px;color:#6d756f;align-self:center}
.front-five{background:var(--game-five-soft)}
.front-quads{background:var(--game-quads-soft)}
.front-mini{background:var(--game-mini-soft)}
.front-trail{background:var(--game-trail-soft)}
.front-ell{background:var(--game-ell-soft)}
.front-same{background:var(--game-same-soft)}

@media(max-width:700px){
  /* The mobile site shell is a single compact bar. */
  body{background:#f7f8f6}
  .site-header{
    position:relative;z-index:100;max-width:none;min-height:50px;height:50px;margin:0;padding:0 14px;
    display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;
    background:#fff;border-bottom:1px solid #e1e4e1;
  }
  .brand-home{height:50px;display:flex;align-items:center}
  .brand h1{font-size:20px!important;line-height:1;margin:0!important;letter-spacing:-.025em}
  .desktop-site-tools{display:none!important}
  .game-ribbon{display:none!important}
  main{padding:0 12px 22px!important;max-width:none}
  .mobile-menu-btn{
    display:flex;width:40px;height:40px;padding:9px!important;border:0!important;border-radius:9px!important;
    background:transparent!important;box-shadow:none!important;flex-direction:column;justify-content:center;gap:4px;
  }
  .mobile-menu-btn span{display:block;width:21px;height:2px;border-radius:2px;background:#252a27;margin:0 auto}
  .mobile-site-menu[hidden]{display:none!important}
  .mobile-site-menu{
    display:block;position:absolute;top:48px;right:10px;width:min(310px,calc(100vw - 20px));
    padding:10px;background:#fff;border:1px solid #e1e4e1;border-radius:14px;box-shadow:0 14px 34px rgba(25,32,28,.16);
  }
  .mobile-site-nav{display:grid;grid-template-columns:1fr 1fr;gap:5px}
  .mobile-site-nav button{
    min-height:40px;padding:8px 10px;border-radius:8px;background:#f5f6f4;color:#242926;text-align:left;font-size:13px;font-weight:800;
  }
  .mobile-date-tools{margin-top:9px;padding-top:9px;border-top:1px solid #e6e8e5}
  .mobile-date-row{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:7px}
  .mobile-date-row #mobileTodayLabel{text-align:center;font-size:12px;font-weight:900;color:#535b56}
  .mobile-icon-action{min-height:36px;padding:5px!important;border-radius:8px!important;background:#eef0ed!important;color:#252a27!important}
  .mobile-reset-action{width:100%;margin-top:7px;min-height:36px;padding:7px 10px!important;background:#fff!important;color:#4d5550!important;border:1px solid #e0e3df!important;font-size:12px}

  /* Mobile Front Page: deliberately 2 × 3, not a narrow one-column list. */
  .front-page{padding:16px 0 4px}
  .front-page-intro{margin:0 2px 12px;text-align:left}
  .front-page-intro small{font-size:9px;letter-spacing:.12em}
  .front-page-intro h2{font-size:24px;margin-top:3px}
  .front-game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;max-width:none}
  .front-game-card{
    min-height:132px;padding:13px 11px;border-radius:14px;display:flex;flex-direction:column;align-items:flex-start;
    justify-content:flex-start;gap:8px;position:relative;
  }
  .front-game-icon{width:40px;height:40px}
  .front-game-copy{gap:3px;padding-right:8px}
  .front-game-copy strong{font-size:15px;line-height:1.1}
  .front-game-copy>span{font-size:11px;line-height:1.28;font-weight:600}
  .front-card-arrow{position:absolute;right:10px;bottom:9px;font-size:18px}
  .front-game-card:hover{transform:none;box-shadow:var(--shadow-1)}
}

@media(max-width:360px){
  .front-game-card{min-height:128px;padding:11px 9px}
  .front-game-copy strong{font-size:14px}
  .front-game-copy>span{font-size:10.5px}
}


/* =========================================================
   V67 — MOBILE GAME PASS 01
   Six to Five + InCommon only
   ========================================================= */

.game-clean-head{
  width:100%;
  max-width:760px;
  min-height:46px;
  margin:0 auto;
  padding:0 6px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.game-name-title{
  margin:0;
  color:#202322;
  font:900 25px/1.1 Lato,system-ui,sans-serif;
  letter-spacing:-.025em;
}
.game-head-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.simple-instructions{
  width:100%;
  margin:8px auto 10px;
  padding:0 8px;
  text-align:center;
  color:#59615c;
  font:700 14px/1.35 Lato,system-ui,sans-serif;
}

/* Six to Five */
#fivePanel .five-board-stage{
  width:100%;
}
#fivePanel .word-grid{
  position:relative;
}
#fivePanel .hard-toggle{
  white-space:nowrap;
}

/* InCommon */
#quadsPanel .simple-instructions{
  max-width:720px;
}
#quadsPanel .quads-footer{
  margin-top:0;
}
#quadsPanel .mistakes{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.life-stars{
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.mistake-star{
  display:inline-block;
  color:#59645d;
  font-size:15px;
  line-height:1;
}

@media(max-width:700px){
  /* ---------- Six to Five ---------- */
  #fivePanel{
    position:relative;
    max-width:none!important;
    min-height:calc(100dvh - 50px);
    margin:0 -12px!important;
    padding:8px 12px calc(164px + env(safe-area-inset-bottom))!important;
    border:0!important;
    background:#fff;
    display:flex;
    flex-direction:column;
  }
  #fivePanel.game-hidden{display:none!important}

  #fivePanel .game-clean-head{
    min-height:40px;
    padding:0 8px;
  }
  #fivePanel .game-name-title{
    font-size:21px;
  }
  #fivePanel .game-head-actions{
    gap:7px;
  }
  #fivePanel .status-pill{
    flex:0 0 auto;
    font-size:10px;
    padding:5px 7px;
  }
  #fivePanel .hard-toggle{
    gap:4px;
    padding:5px 7px;
    font-size:11px;
    border-radius:8px;
  }
  #fivePanel .hard-toggle input{
    width:13px;
    height:13px;
  }
  #fivePanel .simple-instructions{
    margin:8px auto 2px;
    padding:0 20px;
    font-size:13px;
  }
  #fivePanel #fiveStatus{
    min-height:20px;
  }

  /* The board stage consumes the remaining space above the fixed keyboard,
     allowing the puzzle itself to settle near the vertical centre. */
  #fivePanel .five-board-stage{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6px 0 10px;
  }
  #fivePanel .word-grid{
    width:calc(100vw - 40px);
    max-width:410px;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:7px!important;
    margin:0 auto!important;
  }
  #fivePanel .tile{
    width:100%!important;
    height:auto!important;
    aspect-ratio:1/1;
    min-width:0;
    font-size:clamp(22px,6.5vw,29px);
  }

  /* Full-width keyboard fixed to the bottom of the actual mobile viewport. */
  #fivePanel .keyboard{
    position:fixed;
    z-index:80;
    left:0;
    right:0;
    bottom:0;
    width:100vw;
    max-width:none!important;
    margin:0!important;
    padding:8px 5px calc(8px + env(safe-area-inset-bottom));
    gap:6px!important;
    background:#fff;
    border-top:1px solid #e2e5e2;
    box-shadow:0 -5px 16px rgba(25,32,28,.06);
  }
  #fivePanel .key-row{
    width:100%;
    gap:4px!important;
    padding:0;
  }
  #fivePanel .key{
    flex:1 1 0;
    min-width:0!important;
    min-height:44px!important;
    padding:7px 2px!important;
    border-radius:7px!important;
    font-size:13px!important;
  }
  #fivePanel .key-action{
    flex:1.55 1 0;
    font-size:11px!important;
  }

  /* ---------- InCommon ---------- */
  #quadsPanel{
    width:calc(100vw - 10px);
    max-width:none;
    margin-left:-7px!important;
    margin-right:-7px!important;
    padding:8px 0 12px!important;
  }
  #quadsPanel .game-clean-head{
    min-height:40px;
    padding:0 5px;
  }
  #quadsPanel .game-name-title{
    font-size:21px;
  }
  #quadsPanel .status-pill{
    font-size:10px;
    padding:5px 7px;
  }
  #quadsPanel .simple-instructions{
    margin:8px auto 8px;
    padding:0 10px;
    font-size:13px;
  }
  #quadsPanel #quadsStatus{
    min-height:18px;
  }
  #quadsPanel .quads-solved,
  #quadsPanel .quads-grid{
    width:100%;
    max-width:none;
  }
  #quadsPanel .quads-grid{
    gap:8px;
    margin:6px auto 5px;
  }
  #quadsPanel .quads-tile{
    min-height:74px; /* +10px over prior mobile 64px */
    padding:9px 5px;
    font-size:13px;
  }
  #quadsPanel .quads-footer{
    gap:18px;
    padding-top:0;
  }
  #quadsPanel .mistakes{
    min-height:20px;
    font-size:14px;
  }
  #quadsPanel .mistake-star{
    font-size:16px;
  }
  #quadsPanel .action-row{
    margin-top:0;
  }
}


/* =========================================================
   V68 — MOBILE GAME PASS 01 REFINEMENT
   Six to Five + InCommon
   ========================================================= */

@media(max-width:700px){

  /* Shared simple-instruction positioning */
  #fivePanel .simple-instructions,
  #quadsPanel .simple-instructions{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto !important;
    min-height:44px;
  }

  /* ---------- Six to Five ---------- */
  #fivePanel{
    padding-bottom:calc(154px + env(safe-area-inset-bottom)) !important;
  }

  #fivePanel .five-clean-head{
    flex:0 0 auto;
  }

  #fivePanel .simple-instructions{
    flex:0 0 44px;
  }

  #fivePanel #fiveStatus{
    flex:0 0 auto;
  }

  #fivePanel .five-board-stage{
    flex:1 1 auto;
    min-height:0;
    overflow:hidden;
    padding:0 20px 8px;
    box-sizing:border-box;
  }

  #fivePanel .word-grid{
    gap:6px !important;
    width:min(
      calc(100vw - 40px),
      calc((100dvh - 50px - 40px - 44px - 20px - 154px) * 5 / 6)
    ) !important;
    max-width:410px;
    max-height:100%;
    aspect-ratio:5 / 6;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    grid-template-rows:repeat(6,minmax(0,1fr)) !important;
    margin:auto !important;
  }

  #fivePanel .tile{
    aspect-ratio:auto !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    font-size:clamp(18px,6vw,29px) !important;
  }

  @media(max-height:680px){
    #fivePanel{
      padding-top:4px !important;
      padding-bottom:calc(148px + env(safe-area-inset-bottom)) !important;
    }
    #fivePanel .game-clean-head{
      min-height:34px;
    }
    #fivePanel .game-name-title{
      font-size:19px;
    }
    #fivePanel .simple-instructions{
      flex-basis:34px;
      min-height:34px;
      padding:0 12px;
      font-size:12px;
    }
    #fivePanel #fiveStatus{
      min-height:10px;
    }
    #fivePanel .five-board-stage{
      padding-bottom:4px;
    }
    #fivePanel .word-grid{
      width:min(
        calc(100vw - 40px),
        calc((100dvh - 50px - 34px - 34px - 10px - 148px) * 5 / 6)
      ) !important;
    }
    #fivePanel .key{
      min-height:40px !important;
    }
  }

  /* ---------- InCommon ---------- */
  #quadsPanel{
    min-height:calc(100dvh - 50px);
    display:flex;
    flex-direction:column;
    padding-bottom:10px !important;
  }

  #quadsPanel.game-hidden{
    display:none !important;
  }

  #quadsPanel .game-clean-head{
    flex:0 0 auto;
  }

  #quadsPanel .simple-instructions{
    flex:0 0 44px;
  }

  #quadsPanel #quadsStatus{
    flex:0 0 auto;
  }

  #quadsPanel .quads-solved,
  #quadsPanel .quads-grid{
    flex:0 0 auto;
  }

  #quadsPanel .mistakes{
    margin-top:10px !important;
  }

  #quadsPanel .quads-footer{
    margin-top:auto !important;
    padding-top:0 !important;
    padding-bottom:10px !important;
  }

  #quadsPanel .action-row{
    margin-top:14px !important;
    margin-bottom:0 !important;
  }
}


/* =========================================================
   V69 — MOBILE GAME PASS 02
   Daily Crossword + Unscrumble
   ========================================================= */

.mini-keyboard{
  display:none;
}

@media(max-width:700px){
  /* ---------- Daily Crossword ---------- */
  #miniPanel{
    width:100%;
    max-width:none;
    min-height:calc(100dvh - 50px);
    margin:0!important;
    padding:8px 0 calc(154px + env(safe-area-inset-bottom))!important;
    border:0!important;
    display:flex;
    flex-direction:column;
  }
  #miniPanel.game-hidden{display:none!important}

  #miniPanel .game-clean-head{
    min-height:40px;
    padding:0 15px;
  }
  #miniPanel .game-name-title{
    font-size:21px;
  }
  #miniPanel .status-pill{
    font-size:10px;
    padding:5px 7px;
  }
  #miniPanel #miniStatus{
    min-height:16px;
  }
  #miniPanel .mini-layout{
    display:block!important;
    width:100%;
    max-width:none!important;
    margin:0!important;
  }
  #miniPanel .mini-layout>div:first-child{
    width:100%;
  }
  #miniPanel .mini-active-clue{
    width:calc(100vw - 30px);
    max-width:none;
    margin:8px auto 10px;
  }
  #miniPanel .mini-player-grid{
    width:calc(100vw - 30px)!important;
    height:auto!important;
    max-width:none!important;
    aspect-ratio:var(--mini-cols) / var(--mini-rows);
    margin:0 auto!important;
  }
  #miniPanel .mini-cell{
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
  }
  #miniPanel .mini-clues{
    display:none!important;
  }
  #miniPanel .mini-actions{
    width:calc(100vw - 30px);
    margin:10px auto 0;
  }
  #miniPanel .mini-keyboard{
    display:block;
    position:fixed;
    z-index:80;
    left:0;
    right:0;
    bottom:0;
    width:100vw;
    max-width:none!important;
    margin:0!important;
    padding:8px 5px calc(8px + env(safe-area-inset-bottom));
    background:#fff;
    border-top:1px solid #e2e5e2;
    box-shadow:0 -5px 16px rgba(25,32,28,.06);
  }
  #miniPanel .mini-keyboard .key-row{
    width:100%;
    gap:4px!important;
    padding:0;
  }
  #miniPanel .mini-keyboard .key{
    flex:1 1 0;
    min-width:0!important;
    min-height:44px!important;
    padding:7px 2px!important;
    border-radius:7px!important;
    font-size:13px!important;
  }
  #miniPanel .mini-keyboard .key-action{
    flex:1.55 1 0;
    font-size:11px!important;
  }

  /* ---------- Unscrumble ---------- */
  #wordTrailPanel{
    width:100%;
    max-width:none;
    margin:0!important;
    padding:8px 0 14px!important;
  }
  #wordTrailPanel .game-clean-head{
    min-height:40px;
    padding:0 20px;
  }
  #wordTrailPanel .game-name-title{
    font-size:21px;
  }
  #wordTrailPanel .status-pill{
    font-size:10px;
    padding:5px 7px;
  }
  #wordTrailPanel .wordtrail-theme{
    margin-top:6px;
  }
  #wordTrailPanel .wordtrail-board-wrap{
    width:calc(100vw - 40px)!important;
    max-width:none!important;
    height:auto!important;
    aspect-ratio:292 / 392;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  #wordTrailPanel .wordtrail-player-grid{
    width:100%!important;
    height:100%!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    grid-template-rows:repeat(8,minmax(0,1fr))!important;
    gap:8px!important;
  }
  #wordTrailPanel .wordtrail-player-cell{
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    font-size:clamp(16px,5vw,24px)!important;
  }
  #wordTrailPanel .wordtrail-live-svg{
    width:100%!important;
    height:100%!important;
  }
  #wordTrailPanel .wordtrail-controls .action-row{
    gap:10px!important;
  }
  #wordTrailPanel .wordtrail-controls .action-row button{
    transform:scale(1.2);
    transform-origin:center;
    margin:5px 6px;
  }
}

@media(max-width:380px){
  #wordTrailPanel .wordtrail-controls .action-row{
    gap:5px!important;
  }
  #wordTrailPanel .wordtrail-controls .action-row button{
    transform:scale(1.12);
    margin:4px 2px;
  }
}


/* =========================================================
   V70 — DAILY CROSSWORD MOBILE REFINEMENT
   ========================================================= */

#miniPanel .mini-header-reveal{
  position:relative;
}

#miniPanel .mini-header-reveal .reveal-menu{
  right:0;
  left:auto;
  z-index:120;
}

#miniPanel .mini-active-clue{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

@media(max-width:700px){

  #miniPanel{
    padding:8px 0 calc(160px + env(safe-area-inset-bottom))!important;
  }

  #miniPanel .game-clean-head{
    padding:0 15px;
  }

  #miniPanel .game-head-actions{
    gap:7px;
  }

  #miniPanel .mini-header-reveal #miniRevealBtn{
    padding:5px 8px;
    font-size:11px;
    min-height:auto;
  }

  #miniPanel .mini-header-reveal .reveal-menu{
    top:calc(100% + 5px);
  }

  #miniPanel .mini-layout{
    flex:1 1 auto;
    min-height:0;
  }

  #miniPanel .mini-play-column{
    width:100%;
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column;
  }

  /*
    Grid stage owns the available visual area between header/status and
    clue/keyboard. The crossword itself is a true square sized from BOTH
    viewport width and available viewport height, so all rows/columns and
    borders scale together.
  */
  #miniPanel .mini-grid-stage{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4px 15px 8px;
    overflow:hidden;
  }

  #miniPanel .mini-player-grid{
    width:min(
      calc(100vw - 30px),
      calc(100dvh - 50px - 40px - 16px - 64px - 160px - 24px)
    )!important;
    height:auto!important;
    aspect-ratio:1 / 1!important;
    max-width:none!important;
    max-height:100%!important;
    margin:0 auto!important;

    display:grid!important;
    grid-template-columns:repeat(var(--mini-cols),minmax(0,1fr))!important;
    grid-template-rows:repeat(var(--mini-rows),minmax(0,1fr))!important;
  }

  #miniPanel .mini-cell{
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    box-sizing:border-box!important;
  }

  #miniPanel .mini-letter{
    font-size:clamp(18px,7vw,30px)!important;
  }

  #miniPanel .mini-number{
    font-size:clamp(8px,2.2vw,11px)!important;
  }

  /* Active clue now lives below the puzzle and is vertically centred. */
  #miniPanel .mini-active-clue{
    flex:0 0 64px;
    width:calc(100vw - 30px);
    min-height:64px;
    margin:0 auto 8px!important;
    padding:10px 12px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    box-sizing:border-box;
  }

  #miniPanel .mini-keyboard{
    row-gap:7px!important;
  }

  #miniPanel .mini-keyboard .key-row{
    margin-top:0!important;
    margin-bottom:7px!important;
  }

  #miniPanel .mini-keyboard .key-row:last-child{
    margin-bottom:0!important;
  }

  /* Extra-short phones: reduce clue band and keyboard footprint slightly. */
  @media(max-height:680px){
    #miniPanel{
      padding-bottom:calc(150px + env(safe-area-inset-bottom))!important;
    }

    #miniPanel .mini-active-clue{
      flex-basis:54px;
      min-height:54px;
      font-size:13px;
      margin-bottom:5px!important;
    }

    #miniPanel .mini-player-grid{
      width:min(
        calc(100vw - 30px),
        calc(100dvh - 50px - 36px - 12px - 54px - 150px - 18px)
      )!important;
    }

    #miniPanel .mini-keyboard .key-row{
      margin-bottom:5px!important;
    }

    #miniPanel .mini-keyboard .key{
      min-height:40px!important;
    }
  }
}


/* =========================================================
   V71 — DAILY CROSSWORD CLUE POSITION + FORMAT
   ========================================================= */

#miniPanel .mini-active-clue-line{
  display:inline;
}

@media(max-width:700px){
  /*
    The clue is anchored immediately above the fixed keyboard rather than
    floating with the grid. Reserve its footprint in the panel so the grid
    can never disappear underneath it.
  */
  #miniPanel{
    padding-bottom:calc(224px + env(safe-area-inset-bottom))!important;
  }

  #miniPanel .mini-active-clue{
    position:fixed;
    z-index:79;
    left:15px;
    right:15px;
    bottom:calc(160px + env(safe-area-inset-bottom));
    width:auto!important;
    min-height:56px;
    height:56px;
    margin:0!important;
    padding:9px 12px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    box-sizing:border-box;
  }

  /*
    Keep ID + hyphen attached to the opening of the clue as one flowing
    text line. The clue wraps naturally after that point rather than the
    identifier occupying its own layout column/space.
  */
  #miniPanel .mini-active-clue-line{
    display:inline;
    width:100%;
    line-height:1.35;
  }

  #miniPanel .mini-active-clue-line strong{
    display:inline;
    white-space:nowrap;
  }

  /* Recalculate the square using the newly reserved clue footprint. */
  #miniPanel .mini-player-grid{
    width:min(
      calc(100vw - 30px),
      calc(100dvh - 50px - 40px - 16px - 224px - 20px)
    )!important;
  }

  @media(max-height:680px){
    #miniPanel{
      padding-bottom:calc(205px + env(safe-area-inset-bottom))!important;
    }

    #miniPanel .mini-active-clue{
      bottom:calc(150px + env(safe-area-inset-bottom));
      min-height:50px;
      height:50px;
      font-size:13px;
      padding:7px 10px;
    }

    #miniPanel .mini-player-grid{
      width:min(
        calc(100vw - 30px),
        calc(100dvh - 50px - 36px - 12px - 205px - 14px)
      )!important;
    }
  }
}


/* =========================================================
   V72 — UNSCRUMBLE HINT BANK + MOBILE VIEWPORT LAYOUT
   ========================================================= */

.ort-hint-flow{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:38px;
}

.ort-hint-column{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  min-width:105px;
}

.ort-hint-builder,
.ort-hint-bank{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.ort-hint-token{
  width:38px;
  height:38px;
  margin:0 auto;
}

.ort-hint-bank-icons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:0;
}

.ort-hint-bank-slot{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#eceeec;
  border-radius:8px;
  filter:drop-shadow(0 1px 2px rgba(31,42,35,.13));
}

.ort-hint-bank-slot.filled{
  background:var(--ort-accent);
}

.ort-hint-count,
.ort-hint-arrow,
.ort-hint-bank-token,
.ort-hint-bank-empty{
  display:none!important;
}

@media(max-width:700px){
  #wordTrailPanel{
    min-height:auto!important;
    padding:8px 0 0!important;
  }

  #wordTrailPanel .game-clean-head{
    padding:0 20px;
  }

  #wordTrailPanel .wordtrail-gameplay{
    min-height:calc(100dvh - 50px - 48px);
    display:flex;
    flex-direction:column;
    min-width:0;
  }

  #wordTrailPanel .wordtrail-theme{
    flex:0 0 auto;
    margin:5px auto 4px!important;
  }

  #wordTrailPanel .wordtrail-theme-text{
    font-size:20px;
  }

  #wordTrailPanel #wordTrailStatus{
    flex:0 0 auto;
    min-height:24px;
  }

  #wordTrailPanel .wordtrail-board-stage{
    flex:1 1 auto;
    min-height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    padding:2px 20px 4px;
  }

  #wordTrailPanel .wordtrail-board-wrap{
    flex:0 0 auto;
    width:auto!important;
    height:auto!important;
    max-width:calc(100vw - 40px)!important;
    margin:0 auto!important;
    aspect-ratio:292 / 392;
  }

  #wordTrailPanel .wordtrail-player-grid{
    width:100%!important;
    height:100%!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    grid-template-rows:repeat(8,minmax(0,1fr))!important;
    gap:var(--wordtrail-grid-gap,clamp(3px,1.5vw,8px))!important;
  }

  #wordTrailPanel .wordtrail-player-cell{
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    /* V104.6: follow the JS-sized board rather than viewport width. On very
       short screens the board can shrink because of height while vw stays
       relatively large, which previously left letters oversized. */
    font-size:var(--wordtrail-cell-font-size,clamp(14px,4.7vw,23px))!important;
  }

  #wordTrailPanel .wordtrail-live-svg{
    width:100%!important;
    height:100%!important;
  }

  #wordTrailPanel #wordTrailCurrentWord{
    flex:0 0 auto;
    min-height:24px;
    font-size:17px;
  }

  /*
    This dock is the bottom edge of the gameplay viewport. Because it is
    sticky inside .wordtrail-gameplay (which ends before the found-word
    list), it stays at the bottom during play but naturally scrolls away
    once the player moves down into the list of found theme words.
  */
  #wordTrailPanel .wordtrail-mobile-dock{
    position:sticky;
    z-index:60;
    bottom:0;
    flex:0 0 auto;
    width:100%;
    box-sizing:border-box;
    padding:7px 10px calc(8px + env(safe-area-inset-bottom));
    margin-top:auto;
    background:#fff;
    border-top:1px solid #e6e8e6;
    box-shadow:0 -4px 12px rgba(31,42,35,.05);
    gap:5px!important;
  }

  #wordTrailPanel #wordTrailProgress{
    line-height:1.15;
    font-size:12px;
  }

  #wordTrailPanel .wordtrail-controls .action-row{
    gap:7px!important;
    margin:2px 0!important;
  }

  #wordTrailPanel .wordtrail-controls .action-row button{
    transform:none!important;
    margin:0!important;
    padding:10px 14px!important;
    font-size:14px!important;
    min-height:40px;
  }

  #wordTrailPanel .wordtrail-hint-system{
    width:100%;
    margin:1px auto 0;
  }

  #wordTrailPanel .ort-hint-flow{
    gap:32px;
    min-height:52px;
  }

  #wordTrailPanel .ort-hint-column{
    gap:4px;
    min-width:100px;
  }

  #wordTrailPanel .ort-hint-label{
    font-size:10px;
  }

  #wordTrailPanel .ort-hint-token{
    width:34px;
    height:34px;
  }

  #wordTrailPanel .ort-hint-bank-slot{
    width:25px;
    height:25px;
  }

  #wordTrailPanel .wordtrail-found{
    position:relative;
    z-index:1;
    width:calc(100% - 24px);
    margin:14px auto 24px;
    padding-bottom:12px;
  }
}

@media(max-width:380px), (max-height:680px){
  #wordTrailPanel .wordtrail-gameplay{
    min-height:calc(100dvh - 50px - 44px);
  }

  #wordTrailPanel .wordtrail-theme{
    margin:2px auto 2px!important;
  }

  #wordTrailPanel .wordtrail-theme-text{
    font-size:18px;
  }

  #wordTrailPanel #wordTrailStatus{
    min-height:18px;
  }

  #wordTrailPanel .wordtrail-board-stage{
    min-height:125px;
    padding-top:0;
    padding-bottom:2px;
  }

  #wordTrailPanel #wordTrailCurrentWord{
    min-height:18px;
    font-size:15px;
  }

  #wordTrailPanel .wordtrail-mobile-dock{
    padding-top:5px;
    padding-bottom:calc(6px + env(safe-area-inset-bottom));
    gap:3px!important;
  }

  #wordTrailPanel .wordtrail-controls .action-row button{
    padding:8px 10px!important;
    min-height:36px;
    font-size:12px!important;
  }

  #wordTrailPanel .ort-hint-flow{
    min-height:46px;
    gap:24px;
  }

  #wordTrailPanel .ort-hint-token{
    width:31px;
    height:31px;
  }

  #wordTrailPanel .ort-hint-bank-slot{
    width:23px;
    height:23px;
  }
}


/* =========================================================
   V73 — UNSCRUMBLE GRID EXPANSION + CORRECT HINT BANK ICONS
   ========================================================= */

.ort-hint-bank-slot{
  display:block!important;
  width:28px;
  height:28px;
  background:#e5e8e5;
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);
  filter:drop-shadow(0 1px 2px rgba(31,42,35,.13));
}

.ort-hint-bank-slot.filled{
  background:var(--ort-accent);
}

/* Bank icons are whole octagons. Only Next Hint uses three visible pieces. */
.ort-hint-bank-slot > span{
  display:none!important;
}

@media(max-width:700px){
  #wordTrailPanel .wordtrail-board-stage{
    width:100%;
    min-height:0!important;
  }

  #wordTrailPanel .wordtrail-board-wrap{
    /* JS sets the actual maximized dimensions after the panel becomes visible. */
    max-width:calc(100vw - 40px)!important;
    max-height:100%!important;
    margin:auto!important;
  }

  #wordTrailPanel .ort-hint-bank-slot{
    width:25px;
    height:25px;
  }
}

@media(max-width:380px), (max-height:680px){
  #wordTrailPanel .ort-hint-bank-slot{
    width:23px;
    height:23px;
  }
}


/* =========================================================
   V74 — UNSCRUMBLE FULL GRID VISIBILITY ON SHORT MOBILE SCREENS
   ========================================================= */

@media(max-width:700px){
  #wordTrailPanel .wordtrail-board-stage{
    box-sizing:border-box;
    overflow:hidden!important;
    min-height:0!important;
  }

  #wordTrailPanel .wordtrail-board-wrap{
    flex:0 0 auto;
    align-self:center;
    max-width:calc(100vw - 40px)!important;
    max-height:100%!important;
  }

  #wordTrailPanel #wordTrailCurrentWord{
    flex-shrink:0;
  }

  #wordTrailPanel .wordtrail-mobile-dock{
    flex-shrink:0;
  }
}


/* =========================================================
   V75 — UNSCRUMBLE PREMIUM MOTION
   ========================================================= */

.wordtrail-player-cell{
  transition:
    transform 130ms cubic-bezier(.2,.8,.2,1),
    background-color 150ms ease-out,
    box-shadow 150ms ease-out,
    color 120ms ease-out,
    filter 150ms ease-out;
  will-change:transform;
}

.wordtrail-player-cell.active{
  transform:translateY(-2px) scale(1.035);
  box-shadow:0 5px 11px rgba(28,39,32,.17);
}

.wordtrail-player-cell.motion-select{
  animation:wtTileLift 180ms cubic-bezier(.18,.86,.28,1);
}

@keyframes wtTileLift{
  0%{transform:translateY(0) scale(.98)}
  55%{transform:translateY(-3px) scale(1.055)}
  100%{transform:translateY(-2px) scale(1.035)}
}

.wordtrail-live-svg polyline.active-line.motion-path{
  stroke-dasharray:900;
  stroke-dashoffset:900;
  animation:wtPathDraw 190ms ease-out forwards;
}

@keyframes wtPathDraw{
  to{stroke-dashoffset:0}
}

.wordtrail-player-cell.motion-correct{
  animation:wtCorrectSweep 420ms cubic-bezier(.2,.75,.2,1) var(--wt-motion-delay,0ms) both;
}

@keyframes wtCorrectSweep{
  0%{transform:translateY(-2px) scale(1.035);filter:brightness(1)}
  45%{transform:translateY(-4px) scale(1.075);filter:brightness(1.12)}
  100%{transform:translateY(-1px) scale(1.015);filter:brightness(1)}
}

.ort-hint-piece{
  transition:background-color 180ms ease-out, transform 180ms ease-out, filter 180ms ease-out;
}

.ort-hint-piece.motion-earned{
  animation:wtHintPieceEarn 360ms cubic-bezier(.18,.85,.25,1);
}

@keyframes wtHintPieceEarn{
  0%{transform:scale(.72);filter:brightness(1)}
  55%{transform:scale(1.14);filter:brightness(1.18)}
  100%{transform:scale(1);filter:brightness(1)}
}

.ort-hint-token:has(.motion-earned){
  animation:wtHintTokenPulse 360ms ease-out;
}

@keyframes wtHintTokenPulse{
  0%,100%{transform:scale(1)}
  55%{transform:scale(1.07)}
}

.ort-hint-bank-slot{
  transition:background-color 180ms ease-out,transform 180ms ease-out,filter 180ms ease-out,opacity 180ms ease-out;
}

.ort-hint-bank-slot.motion-bank-earned{
  animation:wtBankEarn 420ms cubic-bezier(.16,.9,.25,1);
}

@keyframes wtBankEarn{
  0%{transform:scale(.65);opacity:.35}
  55%{transform:scale(1.12);opacity:1;filter:brightness(1.14) drop-shadow(0 2px 4px rgba(31,42,35,.16))}
  100%{transform:scale(1);opacity:1}
}

.ort-hint-bank-slot.motion-bank-spent{
  animation:wtBankSpend 240ms ease-in forwards;
}

@keyframes wtBankSpend{
  0%{transform:scale(1);opacity:1;filter:brightness(1)}
  45%{transform:scale(1.08);filter:brightness(1.18)}
  100%{transform:scale(.55);opacity:.15}
}

.wordtrail-player-cell.motion-hint-reveal{
  animation:wtHintReveal 440ms cubic-bezier(.2,.75,.2,1) var(--wt-hint-delay,0ms) both;
}

@keyframes wtHintReveal{
  0%{transform:scale(.96);filter:brightness(1)}
  45%{transform:scale(1.07);filter:brightness(1.18)}
  100%{transform:scale(1);filter:brightness(1)}
}

@media(prefers-reduced-motion:reduce){
  .wordtrail-player-cell,
  .ort-hint-piece,
  .ort-hint-bank-slot{
    transition:none!important;
  }
  .wordtrail-player-cell.motion-select,
  .wordtrail-player-cell.motion-correct,
  .wordtrail-player-cell.motion-hint-reveal,
  .wordtrail-live-svg polyline.motion-path,
  .ort-hint-piece.motion-earned,
  .ort-hint-token:has(.motion-earned),
  .ort-hint-bank-slot.motion-bank-earned,
  .ort-hint-bank-slot.motion-bank-spent{
    animation:none!important;
  }
}


/* =========================================================
   V76 — UNSCRUMBLE SMOOTH LIVE TRACING
   ========================================================= */

/*
  The active path is rebuilt as the pointer enters each new tile. Animating
  the full polyline's stroke-dash on every rebuild made all existing segments
  restart their animation and visibly flicker. The live path now stays solid
  and stable; tactile tile motion remains the tracing feedback.
*/
.wordtrail-live-svg polyline.active-line{
  stroke-dasharray:none!important;
  stroke-dashoffset:0!important;
  animation:none!important;
  opacity:.56;
}

/* Keep previously found and theme paths equally stable during live tracing. */
.wordtrail-live-svg polyline.found-line,
.wordtrail-live-svg polyline.theme-line{
  animation:none!important;
}


/* =========================================================
   V77 — EVERY LAST LETTER MOBILE / HEADER REFINEMENT
   ========================================================= */

#ellPanel{
  max-width:760px;
  margin-left:auto!important;
  margin-right:auto!important;
}

#ellPanel .ell-clean-head{
  width:100%;
}

#ellPanel .ell-player{
  margin-top:10px;
}

#ellPanel .ell-score{
  width:100%;
  text-align:center;
  font-size:18px;
  font-weight:900;
  line-height:1.2;
  margin-bottom:1px;
}

/* Keep the four game controls on one row on normal phone widths. */
#ellPanel .ell-action-row{
  width:min(100%,430px);
  display:flex;
  flex-wrap:nowrap;
  justify-content:center;
  align-items:stretch;
  gap:7px;
  margin-left:auto;
  margin-right:auto;
}

#ellPanel .ell-action-row button{
  flex:1 1 0;
  min-width:0;
  padding-left:6px;
  padding-right:6px;
  white-space:nowrap;
  font-size:clamp(10px,3.15vw,14px);
  line-height:1.15;
}

/* Only permit wrapping once the screen is genuinely too narrow to keep
   four readable controls side by side at the 10px floor. */
@media(max-width:285px){
  #ellPanel .ell-action-row{
    flex-wrap:wrap;
  }
  #ellPanel .ell-action-row button{
    flex:1 1 calc(50% - 4px);
  }
}

@media(max-width:700px){
  #ellPanel{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  #ellPanel .ell-clean-head{
    padding-left:4px;
    padding-right:4px;
  }

  #ellPanel .simple-instructions{
    margin-top:7px;
    margin-bottom:7px;
  }

  #ellPanel .ell-player{
    gap:11px;
    margin-top:6px;
  }

  #ellPanel .ell-action-row{
    width:100%;
    max-width:430px;
  }
}


/* =========================================================
   V78 — EVERY LAST LETTER PREMIUM TACTILE MOTION
   ========================================================= */

/* Resting tiles remain physical; selected tiles rise and float above the board. */
#ellPanel .ell-tile{
  transform:translateY(0) scale(1);
  transform-origin:center;
  will-change:transform,box-shadow,opacity;
}
#ellPanel .ell-tile.selected{
  transform:translateY(-3px) scale(1.018)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,
    0 -2px 0 rgba(74,101,84,.14) inset,
    0 8px 13px rgba(45,67,53,.25)!important;
  animation:ellSelectRise 190ms cubic-bezier(.18,.82,.24,1);
}
#ellPanel .ell-tile.motion-pressed,
#ellPanel .ell-tile.selected.motion-pressed{
  transform:translateY(2px) scale(.972)!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.72) inset,
    0 -1px 0 rgba(74,84,79,.10) inset,
    0 1px 2px rgba(24,31,28,.16)!important;
  transition:transform 75ms ease-out,box-shadow 75ms ease-out!important;
}
@keyframes ellSelectRise{
  0%{transform:translateY(2px) scale(.972)}
  62%{transform:translateY(-4px) scale(1.032)}
  100%{transform:translateY(-3px) scale(1.018)}
}

/* A valid word acknowledges each selected tile in reading/selection order. */
#ellPanel .ell-tile.motion-submit{
  animation:ellSubmitTile 330ms cubic-bezier(.2,.75,.2,1) var(--ell-submit-delay,0ms) both!important;
}
@keyframes ellSubmitTile{
  0%{transform:translateY(-3px) scale(1.018);filter:brightness(1)}
  48%{transform:translateY(-7px) scale(1.07);filter:brightness(1.09)}
  100%{transform:translateY(2px) scale(.92);filter:brightness(1);opacity:.72}
}

/* Reclaimed letters rise back into their board positions. */
#ellPanel .ell-tile.motion-return{
  animation:ellTileReturn 390ms cubic-bezier(.16,.88,.25,1) var(--ell-return-delay,0ms) both!important;
}
@keyframes ellTileReturn{
  0%{opacity:0;transform:translateY(7px) scale(.78);box-shadow:none}
  62%{opacity:1;transform:translateY(-3px) scale(1.035)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* Completed words are earned objects, not generic tags. */
#ellPanel .ell-completed{
  width:min(100%,650px);
  display:block;
  margin-top:2px;
}
#ellPanel .ell-words-made-heading{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:5px;
  margin:2px 0 9px;
  color:#69706c;
  font-size:11px;
  font-weight:900;
  letter-spacing:.11em;
}
#ellPanel .ell-words-made-heading small{
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
}
#ellPanel .ell-word-collection{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}
#ellPanel .ell-completed-word{
  appearance:none;
  min-height:38px;
  padding:8px 11px 8px 13px;
  border:0!important;
  border-radius:8px;
  background:#f7f6f1!important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.92) inset,
    0 3px 7px rgba(39,43,40,.13)!important;
  color:#202322!important;
  display:inline-flex;
  align-items:center;
  gap:11px;
  letter-spacing:0;
  transform:translateY(0);
  transition:transform 140ms ease,box-shadow 140ms ease,background 140ms ease!important;
}
#ellPanel .ell-made-word{
  font-size:14px;
  font-weight:900;
  letter-spacing:.075em;
}
#ellPanel .ell-made-score{
  font-size:11px;
  font-weight:900;
  color:#737b76!important;
  opacity:.82;
  letter-spacing:0;
}
#ellPanel .ell-completed-word.motion-arrive{
  animation:ellWordArrive 430ms cubic-bezier(.18,.82,.25,1) both;
}
@keyframes ellWordArrive{
  0%{opacity:0;transform:translateY(-11px) scale(.92)}
  62%{opacity:1;transform:translateY(2px) scale(1.025)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
#ellPanel .ell-made-score.motion-score{
  animation:ellScoreArrive 360ms ease-out 100ms both;
}
@keyframes ellScoreArrive{
  0%{opacity:0;transform:translateX(-3px) scale(.8)}
  65%{opacity:1;transform:translateX(0) scale(1.08)}
  100%{opacity:.82;transform:translateX(0) scale(1)}
}

/* First tap lifts a completed word; second tap returns its tiles. */
#ellPanel .ell-completed-word.reclaim-selected{
  outline:none!important;
  background:#eef3ef!important;
  transform:translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.94) inset,
    0 7px 12px rgba(43,63,50,.20)!important;
}
#ellPanel .ell-completed-word.motion-reclaim{
  animation:ellWordReclaim 220ms ease-in both!important;
}
@keyframes ellWordReclaim{
  0%{opacity:1;transform:translateY(-3px) scale(1)}
  100%{opacity:0;transform:translateY(5px) scale(.86)}
}

@media (hover:hover) and (pointer:fine){
  #ellPanel .ell-completed-word:hover{
    transform:translateY(-1px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.94) inset,
      0 5px 9px rgba(39,43,40,.16)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #ellPanel .ell-tile.selected,
  #ellPanel .ell-tile.motion-submit,
  #ellPanel .ell-tile.motion-return,
  #ellPanel .ell-completed-word.motion-arrive,
  #ellPanel .ell-made-score.motion-score,
  #ellPanel .ell-completed-word.motion-reclaim{
    animation:none!important;
  }
}


/* =========================================================
   V79 — ELL CONTROL ICONS + REWARDED SCORE SCALE
   ========================================================= */
#ellPanel .ell-action-row button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}
#ellPanel .ell-control-icon{
  width:15px;height:15px;flex:0 0 15px;
  display:inline-flex;align-items:center;justify-content:center;
}
#ellPanel .ell-control-icon svg{
  width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible;
}
#ellPanel .ell-control-label{min-width:0;}
#ellPanel .ell-score.motion-score-total{
  animation:ellScoreTotalPop 220ms cubic-bezier(.2,.8,.2,1);
}
@keyframes ellScoreTotalPop{
  0%{transform:scale(1)}
  48%{transform:scale(1.045)}
  100%{transform:scale(1)}
}
@media(max-width:700px){
  #ellPanel .ell-control-icon{width:14px;height:14px;flex-basis:14px;}
  #ellPanel .ell-action-row button{gap:4px;}
}
@media(prefers-reduced-motion:reduce){
  #ellPanel .ell-score.motion-score-total{animation:none!important;}
}


/* =========================================================
   V80 — ONE AND THE SAME MOBILE KEYBOARD + SHARED HEADER
   ========================================================= */

#samePanel{
  max-width:760px;
  margin-left:auto!important;
  margin-right:auto!important;
}
#samePanel .same-clean-head{
  width:100%;
}

/* The dedicated keyboard is mobile-only; desktop keeps the physical keyboard. */
#samePanel .same-keyboard{
  display:none;
}

/* Refined clue/answer feedback. */
#samePanel .same-current-clue.same-clue-enter{
  animation:sameClueEnter 260ms cubic-bezier(.2,.78,.2,1);
}
@keyframes sameClueEnter{
  0%{opacity:0;transform:translateY(7px)}
  100%{opacity:1;transform:translateY(0)}
}
#samePanel .same-guess-input.same-input-correct{
  animation:sameInputCorrect 260ms cubic-bezier(.2,.8,.2,1);
}
@keyframes sameInputCorrect{
  0%{transform:scale(1);box-shadow:0 5px 16px rgba(0,0,0,.16)}
  48%{transform:scale(1.025);box-shadow:0 8px 20px rgba(63,107,77,.23),0 0 0 4px rgba(86,143,103,.13)}
  100%{transform:scale(1);box-shadow:0 5px 16px rgba(0,0,0,.16)}
}

@media(max-width:700px){
  #samePanel{
    width:100%;
    max-width:none;
    min-height:calc(100dvh - 50px);
    margin:0!important;
    padding:8px 10px calc(164px + env(safe-area-inset-bottom))!important;
    border:0!important;
  }
  #samePanel.game-hidden{display:none!important}

  #samePanel .same-clean-head{
    min-height:40px;
    padding:0 4px;
  }
  #samePanel .game-name-title{
    font-size:21px;
  }
  #samePanel .status-pill{
    font-size:10px;
    padding:5px 7px;
  }

  #samePanel .same-game{
    width:100%;
    max-width:none;
    margin:8px auto 0;
  }

  /* History grows upward in normal document flow while the keyboard never moves. */
  #samePanel .same-history{
    min-height:0;
    margin-bottom:14px;
    gap:5px;
  }
  #samePanel .same-history-row{
    grid-template-columns:minmax(0,1fr) minmax(82px,34%);
    column-gap:16px;
    padding:6px 2px;
  }
  #samePanel .same-history-clue,
  #samePanel .same-history-guess{
    font-size:14px!important;
    line-height:1.28;
  }

  #samePanel .same-current-clue{
    font-size:clamp(25px,7.8vw,31px);
    line-height:1.12;
    margin-bottom:16px;
  }
  #samePanel .same-clue-number{
    margin-bottom:6px;
  }
  #samePanel .same-guess-area{
    width:100%;
    gap:8px;
  }
  #samePanel .same-guess-input{
    width:min(100%,560px);
    min-height:54px;
    font-size:22px!important;
    padding:9px 18px!important;
    cursor:default;
    caret-color:transparent;
  }

  /* The standalone Guess button is replaced by the keyboard action key on mobile. */
  #samePanel .same-guess-btn{
    display:none!important;
  }

  #samePanel .same-keyboard{
    display:block;
    position:fixed;
    z-index:80;
    left:0;
    right:0;
    bottom:0;
    width:100vw;
    max-width:none!important;
    margin:0!important;
    padding:8px 5px calc(8px + env(safe-area-inset-bottom));
    background:#fff;
    border-top:1px solid #e2e5e2;
    box-shadow:0 -5px 16px rgba(25,32,28,.07);
  }
  #samePanel .same-keyboard .key-row{
    width:100%;
    display:flex;
    justify-content:center;
    gap:4px!important;
    padding:0;
    margin:0 0 5px;
  }
  #samePanel .same-keyboard .key-row:last-child{
    margin-bottom:0;
  }
  #samePanel .same-keyboard .key{
    flex:1 1 0;
    min-width:0!important;
    min-height:44px!important;
    padding:7px 2px!important;
    border-radius:7px!important;
    font-size:13px!important;
  }
  #samePanel .same-keyboard .key-action{
    flex:1.55 1 0;
    font-size:10px!important;
    letter-spacing:0!important;
  }
  #samePanel .same-keyboard .same-key-guess{
    background:var(--game-same)!important;
    color:#fff!important;
  }

  #samePanel .same-status{
    margin-top:14px;
  }
}

@media(prefers-reduced-motion:reduce){
  #samePanel .same-current-clue.same-clue-enter,
  #samePanel .same-guess-input.same-input-correct{
    animation:none!important;
  }
}


/* =========================================================
   V81 — ONE AND THE SAME HISTORY HANGING INDENT
   ========================================================= */

/* Keep wrapped clue lines aligned with the clue text instead of the number. */
#samePanel .same-history-clue{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  column-gap:.35em;
}

#samePanel .same-history-index{
  display:block;
  min-width:0;
  margin-right:0;
  padding-top:.13em;
}

#samePanel .same-history-clue-text{
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
}


/* =========================================================
   V82 — ONE AND THE SAME WRONG-GUESS "FILE AWAY" MOTION
   ========================================================= */

/* The live clue/guess compresses subtly before being filed into history. */
#samePanel .same-active-area.same-filing-out{
  animation:sameFilingOut 145ms cubic-bezier(.3,.1,.7,.2) both;
}
@keyframes sameFilingOut{
  0%{opacity:1;transform:translateY(0) scale(1)}
  100%{opacity:.18;transform:translateY(-5px) scale(.975)}
}

/* Temporary moving history row. It uses the exact history typography/layout. */
.same-history-flight{
  position:fixed;
  z-index:120;
  pointer-events:none;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(82px,34%);
  column-gap:16px;
  align-items:start;
  padding:6px 2px;
  border-bottom:1px solid #ece9e2;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 22px rgba(42,37,31,.08);
  transform-origin:center;
}
.same-history-flight .same-history-clue{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  column-gap:.35em;
  min-width:0;
  text-align:left;
  color:#55534d;
  font-size:14px;
  line-height:1.28;
}
.same-history-flight .same-history-index{
  display:block;
  min-width:0;
  margin-right:0;
  padding-top:.13em;
  color:#9a958a;
  font-size:11px;
  font-weight:900;
}
.same-history-flight .same-history-clue-text{
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
}
.same-history-flight .same-history-guess{
  min-width:0;
  text-align:right;
  font-size:14px;
  line-height:1.28;
  font-weight:800;
  color:#777169;
  overflow-wrap:anywhere;
}

/* Hide the destination until the moving copy lands. */
#samePanel .same-history-row.same-history-row-pending{
  opacity:0;
}

/* A soft settle gives the new history entry a physical arrival without bounce. */
#samePanel .same-history-row.same-history-row-settle{
  animation:sameHistorySettle 255ms cubic-bezier(.18,.82,.25,1) both;
}
@keyframes sameHistorySettle{
  0%{opacity:.55;transform:translateY(-3px);background:rgba(166,107,43,.06)}
  58%{opacity:1;transform:translateY(1px);background:rgba(166,107,43,.035)}
  100%{opacity:1;transform:translateY(0);background:transparent}
}

/* Let the strike-through appear only after the row has landed. */
#samePanel .same-history-guess.same-history-strike-in{
  text-decoration:none!important;
  position:relative;
}
#samePanel .same-history-guess.same-history-strike-in::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:52%;
  height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  animation:sameStrikeIn 179ms ease-out 47ms forwards;
}
@keyframes sameStrikeIn{
  to{transform:scaleX(1)}
}

@media(prefers-reduced-motion:reduce){
  #samePanel .same-active-area.same-filing-out,
  #samePanel .same-history-row.same-history-row-settle,
  #samePanel .same-history-guess.same-history-strike-in::after{
    animation:none!important;
  }
}


/* =========================================================
   V83 — ONE AND THE SAME TRANSITION FIXES
   ========================================================= */

/* Keep the strike line exactly over the guessed word, not the full right column. */
#samePanel .same-history-guess-text,
.same-history-flight .same-history-guess-text{
  position:relative;
  display:inline-block;
}

/* Disable the V82 full-column strike pseudo-element. */
#samePanel .same-history-guess.same-history-strike-in::after{
  content:none!important;
}

/* Draw the animated strike from the first letter to the last letter only. */
#samePanel .same-history-guess.same-history-strike-in .same-history-guess-text{
  text-decoration:none!important;
}
#samePanel .same-history-guess.same-history-strike-in .same-history-guess-text::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:52%;
  height:2px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  animation:sameStrikeIn 179ms ease-out 47ms forwards;
}

@media(prefers-reduced-motion:reduce){
  #samePanel .same-history-guess.same-history-strike-in .same-history-guess-text::after{
    animation:none!important;
    transform:scaleX(1);
  }
}


/* =========================================================
   V84 — ONE AND THE SAME PERSISTENT WRONG-GUESS STRIKE
   ========================================================= */

/* Persist the strike on the exact word after the arrival animation finishes. */
#samePanel .same-history-guess .same-history-guess-text{
  text-decoration-line:line-through;
  text-decoration-thickness:2px;
}

/* During the draw-in animation, hide the native strike so only the animated
   line is visible. Removing this class restores the persistent strike above. */



/* =========================================================
   V85 — ONE AND THE SAME CLUE POP TIMING
   ========================================================= */

/* The next clue stays still until the wrong-guess strike finishes, then
   pops into the active position with a restrained scale/lift. */
#samePanel .same-current-clue.same-clue-pop{
  animation:sameCluePop 221ms cubic-bezier(.18,.86,.24,1) both;
}
@keyframes sameCluePop{
  0%{
    opacity:0;
    transform:translateY(10px) scale(.94);
  }
  62%{
    opacity:1;
    transform:translateY(-1px) scale(1.018);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@media(prefers-reduced-motion:reduce){
  #samePanel .same-current-clue.same-clue-pop{
    animation:none!important;
    opacity:1;
    transform:none;
  }
}


/* =========================================================
   V86 — ONE AND THE SAME DEFERRED CLUE ADVANCE
   ========================================================= */

/* Temporary history row reserves the exact landing position while game state
   remains on the current clue. It is replaced by the real row only after the
   strike animation has completed and the state is committed. */
#samePanel .same-history-row.same-history-row-temp{
  pointer-events:none;
}


/* =========================================================
   V87 — ONE AND THE SAME FASTER + DESKTOP MOTION
   ========================================================= */

/* Match the moving row to desktop history typography when the same transition
   is used with a mouse/physical keyboard. */
@media(min-width:701px){
  .same-history-flight{
    grid-template-columns:minmax(0,1fr) minmax(120px,190px);
    column-gap:48px;
    padding:8px 2px;
  }
  .same-history-flight .same-history-clue,
  .same-history-flight .same-history-guess{
    font-size:17px;
    line-height:1.42;
  }
}


/* =========================================================
   V88 — SIX TO FIVE PREMIUM MOTION
   ========================================================= */

#fiveGrid .tile{
  will-change:transform,opacity;
}

/* Typed letters feel like they press into and spring out of the floating tile. */
#fiveGrid .tile.five-letter-pop{
  animation:fiveLetterPop 125ms cubic-bezier(.2,.82,.25,1);
}
@keyframes fiveLetterPop{
  0%{transform:scale(.90)}
  62%{transform:scale(1.045)}
  100%{transform:scale(1)}
}

/* Delete is the inverse: the occupied tile retreats before the redraw removes it. */
#fiveGrid .tile.five-letter-delete{
  animation:fiveLetterDelete 90ms ease-in forwards;
}
@keyframes fiveLetterDelete{
  to{transform:scale(.86);opacity:.25}
}

/* Invalid / Clue Lock submissions nudge the complete active row as one unit. */
#fiveGrid .tile.five-row-nudge{
  animation:fiveRowNudge 230ms ease-in-out;
}
@keyframes fiveRowNudge{
  0%,100%{transform:translateX(0)}
  24%{transform:translateX(-5px)}
  52%{transform:translateX(5px)}
  76%{transform:translateX(-2px)}
}

/* Submitted tiles start visually neutral, then reveal left-to-right without a Wordle flip. */
#fiveGrid .tile.five-reveal-pending{
  background:#f7faf7!important;
  color:#202322!important;
  box-shadow:0 4px 9px rgba(31,42,35,.18),0 1px 2px rgba(31,42,35,.13)!important;
}
#fiveGrid .tile.five-tile-reveal{
  animation:fiveTileReveal 190ms cubic-bezier(.2,.78,.24,1);
}
@keyframes fiveTileReveal{
  0%{transform:scaleX(1) scaleY(1)}
  42%{transform:scaleX(.94) scaleY(.76)}
  72%{transform:scaleX(1.025) scaleY(1.04)}
  100%{transform:scale(1)}
}
#fivePanel .key.five-key-reveal{
  animation:fiveKeyReveal 165ms cubic-bezier(.2,.8,.25,1);
}
@keyframes fiveKeyReveal{
  0%{transform:scale(.92)}
  65%{transform:scale(1.045)}
  100%{transform:scale(1)}
}

/* The existing active-row brackets become a moving cursor between attempts. */
#fiveGrid .tile.five-brackets-slide.active-five-row-start::before,
#fiveGrid .tile.five-brackets-slide.active-five-row-end::after{
  animation:fiveBracketSlide 250ms cubic-bezier(.18,.78,.22,1);
}
@keyframes fiveBracketSlide{
  0%{transform:translateY(calc(-1 * var(--five-row-step)));opacity:.78}
  78%{transform:translateY(2px);opacity:1}
  100%{transform:translateY(0);opacity:1}
}
#fiveGrid{--five-row-step:62px}
@media(max-width:700px){
  #fiveGrid{--five-row-step:54px}
}

/* Correct row gets one restrained lift before the result modal. */
#fiveGrid .tile.five-solved-lift{
  animation:fiveSolvedLift 270ms cubic-bezier(.18,.82,.24,1);
}
@keyframes fiveSolvedLift{
  0%,100%{transform:translateY(0) scale(1)}
  52%{transform:translateY(-4px) scale(1.025)}
}

/* On the winning row the brackets subtly release outward rather than moving down. */
#fiveGrid .tile.five-solved-lift.active-five-row-start::before{
  animation:fiveBracketReleaseLeft 240ms ease-out forwards;
}
#fiveGrid .tile.five-solved-lift.active-five-row-end::after{
  animation:fiveBracketReleaseRight 240ms ease-out forwards;
}
@keyframes fiveBracketReleaseLeft{
  to{transform:translateX(-5px);opacity:0}
}
@keyframes fiveBracketReleaseRight{
  to{transform:translateX(5px);opacity:0}
}

@media(prefers-reduced-motion:reduce){
  #fiveGrid .tile.five-letter-pop,
  #fiveGrid .tile.five-letter-delete,
  #fiveGrid .tile.five-row-nudge,
  #fiveGrid .tile.five-tile-reveal,
  #fiveGrid .tile.five-brackets-slide.active-five-row-start::before,
  #fiveGrid .tile.five-brackets-slide.active-five-row-end::after,
  #fiveGrid .tile.five-solved-lift,
  #fivePanel .key.five-key-reveal{
    animation:none!important;
  }
}


/* =========================================================
   V89 — SIX TO FIVE BRACKET TIMING REFINEMENT
   ========================================================= */

/* The next-row brackets are rendered for layout/state purposes but remain
   invisible until all five submitted tiles have finished revealing. */
#fiveGrid.five-brackets-held .tile.active-five-row-start::before,
#fiveGrid.five-brackets-held .tile.active-five-row-end::after{
  opacity:0!important;
}

/* The release animation begins only after the reveal sequence is complete.
   `both` keeps the brackets at the animation's first frame before the first
   paint and at the final frame afterward, preventing any snap/jump. */
#fiveGrid .tile.five-brackets-slide.active-five-row-start::before,
#fiveGrid .tile.five-brackets-slide.active-five-row-end::after{
  animation:fiveBracketSlideV89 235ms cubic-bezier(.18,.82,.22,1) both!important;
}
@keyframes fiveBracketSlideV89{
  0%{
    transform:translateY(calc(-1 * var(--five-row-step)));
    opacity:0;
  }
  18%{opacity:1}
  82%{transform:translateY(1px);opacity:1}
  100%{transform:translateY(0);opacity:1}
}

/* ========================================================= V90 GLOBAL PUBLIC POLISH ========================================================= */
@media(min-width:701px){#playArea>#fivePanel,#playArea>#quadsPanel,#playArea>#wordTrailPanel,#playArea>#miniPanel,#playArea>#ellPanel,#playArea>#samePanel{width:100%!important;max-width:760px!important;margin:0 auto!important;padding:18px 22px 22px!important;background:#fff!important;border:1px solid #e1e4df!important;border-radius:18px!important;box-shadow:0 8px 24px rgba(31,39,34,.045)!important}#playArea .game-clean-head{min-height:46px;padding-left:4px!important;padding-right:4px!important}}
@media(max-width:700px){#playArea>#fivePanel,#playArea>#quadsPanel,#playArea>#wordTrailPanel,#playArea>#miniPanel,#playArea>#ellPanel,#playArea>#samePanel{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:10px!important;padding-right:10px!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}#playArea .game-clean-head{padding-left:4px!important;padding-right:4px!important}}
@media(min-width:701px){#fivePanel .key{min-height:48px!important;padding-top:10px!important;padding-bottom:10px!important}}
@media(max-width:700px){#fivePanel .key,#miniPanel .mini-keyboard .key,#samePanel .same-keyboard .key{min-height:51px!important}#fivePanel{padding-bottom:calc(184px + env(safe-area-inset-bottom))!important}#miniPanel{padding-bottom:calc(174px + env(safe-area-inset-bottom))!important}#samePanel{padding-bottom:calc(184px + env(safe-area-inset-bottom))!important}}
.global-endgame-overlay[hidden]{display:none!important}.global-endgame-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:22px;background:rgba(17,21,19,.46);backdrop-filter:blur(2px);animation:globalOverlayIn .18s ease-out}.global-endgame-card{position:relative;width:min(500px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:#fff;border-radius:18px;box-shadow:0 18px 48px rgba(16,22,18,.18);padding:27px 34px 25px;animation:globalCardIn .22s cubic-bezier(.2,.75,.25,1)}.global-endgame-close{position:absolute;top:14px;right:15px;width:32px;height:32px;padding:0!important;border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;color:#7c837f!important;font:400 25px/1 Lato,system-ui,sans-serif!important}.global-endgame-content{text-align:center}.global-endgame-kicker{color:#767d78;font-size:10px;font-weight:900;letter-spacing:.19em}.global-endgame-visual{min-height:76px;display:grid;place-items:center;margin:15px auto 17px}.global-endgame-sticker{display:block;width:auto;height:auto;max-width:min(238px,68vw);max-height:205px;object-fit:contain}.global-endgame-content h2{margin:0;color:#1f2421;font:900 30px/1.1 Lato,system-ui,sans-serif;letter-spacing:-.025em}.global-endgame-answer{margin-top:8px;color:#424844;font-size:15px}.global-endgame-message{min-height:24px;margin:10px 0 16px;color:#59605c;font-size:15px;font-weight:700}.global-endgame-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:1px;overflow:hidden;margin:0 auto 18px;border:1px solid #e7e9e6;border-radius:12px;background:#e7e9e6}.global-endgame-stats>div{min-height:68px;display:grid;place-items:center;align-content:center;gap:4px;background:#fff;padding:9px 6px}.global-endgame-stats strong{color:#222723;font-size:22px;font-weight:900;line-height:1.05;overflow-wrap:anywhere}.global-endgame-stats span{color:#858b87;font-size:9px;font-weight:900;letter-spacing:.12em}.global-endgame-share-section{display:grid;grid-template-columns:1fr auto;gap:8px}.global-endgame-primary-share,.global-endgame-copy{min-height:44px!important;border-radius:10px!important;font-size:13px!important;font-weight:900!important}.global-endgame-primary-share{background:#2f684f!important;color:#fff!important}.global-endgame-copy{background:#f2f4f2!important;color:#313733!important;border:1px solid #e2e5e2!important}.global-endgame-result-line{grid-column:1/-1;margin:3px 0 2px;color:#8a8f8c;font-size:11px;font-weight:700}.global-endgame-next{width:100%;margin-top:12px;display:flex;align-items:center;justify-content:space-between;min-height:44px;background:transparent!important;border:1px solid #e2e5e2!important;color:#313733!important;box-shadow:none!important;border-radius:10px!important;padding:10px 13px!important;font-size:13px!important}.global-emblem{width:72px;height:72px}.global-emblem-quads{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:7px;border-radius:17px;background:#f5f4ef}.global-emblem-quads i{border-radius:6px}.global-emblem-quads i:nth-child(1){background:#8db7a1}.global-emblem-quads i:nth-child(2){background:#7e9eb5}.global-emblem-quads i:nth-child(3){background:#bd7158}.global-emblem-quads i:nth-child(4){background:#8c77a4}.global-emblem-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:7px;border-radius:16px;background:#f2f5f3}.global-emblem-mini i{background:#fff;border-radius:4px;box-shadow:0 1px 4px rgba(20,30,24,.12)}.global-emblem-mini i.dark{background:#6284a0}.global-emblem-trail{display:grid;place-items:center;border-radius:20px;background:#eee9f6;color:#7765a0;font-size:40px;font-weight:900}.global-emblem-ell{display:grid;grid-template-columns:1fr 1fr;gap:4px}.global-emblem-ell i{display:grid;place-items:center;border-radius:6px;background:#3c8d88;color:#fff;font-style:normal;font-weight:900}.global-emblem-ell i:last-child{background:#eef2ef}.global-emblem-same{width:auto;height:auto;display:flex;align-items:center;gap:5px}.global-emblem-same i{display:grid;place-items:center;width:29px;height:40px;border-radius:8px;background:#e7c898;color:#594123;font-style:normal;font-weight:900;font-size:18px}.global-emblem-same i:nth-child(2){background:#a8703d;color:#fff}.global-quads-result{width:min(330px,100%);display:grid;gap:4px}.global-quads-result span{display:block;padding:6px 10px;border-radius:7px;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.045em}.global-mini-result{display:grid;grid-template-columns:repeat(var(--ge-cols),22px);gap:2px;padding:7px;border-radius:9px;background:#e6eae7}.global-mini-result i{width:22px;height:22px;display:grid;place-items:center;background:#fff;color:#222;font-style:normal;font-size:10px;font-weight:900}.global-mini-result i.black{background:#232624}@keyframes globalOverlayIn{from{opacity:0}to{opacity:1}}@keyframes globalCardIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@media(max-width:700px){.global-endgame-overlay{padding:16px}.global-endgame-card{width:min(460px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:24px 20px 20px}.global-endgame-content h2{font-size:27px}.global-endgame-stats strong{font-size:19px}}@media(prefers-reduced-motion:reduce){.global-endgame-overlay,.global-endgame-card{animation:none!important}}


/* =========================================================
   V91 — GLOBAL CONTAINER + MOBILE HEADER REFINEMENT
   ========================================================= */

/* 1) Desktop game container: 30% wider than V90 (760px -> 988px). */
@media(min-width:701px){
  #playArea > #fivePanel,
  #playArea > #quadsPanel,
  #playArea > #wordTrailPanel,
  #playArea > #miniPanel,
  #playArea > #ellPanel,
  #playArea > #samePanel{
    max-width:988px!important;
  }
}

/* 2) Mobile game headers: consistent typography and vertical rhythm. */
@media(max-width:700px){
  #playArea .game-clean-head,
  #playArea .five-clean-head,
  #playArea .ell-clean-head,
  #playArea .same-clean-head{
    min-height:44px!important;
    margin:0!important;
    padding:0 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
  }

  #playArea .game-name-title{
    margin:0!important;
    font-size:21px!important;
    line-height:1.08!important;
    font-weight:900!important;
    letter-spacing:-0.02em!important;
  }

  #playArea .game-clean-head .status-pill,
  #playArea .game-head-actions .status-pill{
    font-size:11px!important;
    line-height:1!important;
    min-height:24px!important;
    padding:6px 9px!important;
    white-space:nowrap!important;
  }

  #playArea .game-head-actions{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }

  #fivePanel .hard-toggle{
    font-size:12px!important;
    line-height:1!important;
  }
}

/* 3) Mobile containers span the full viewport width.
      Individual puzzles keep their own internal spacing. */
@media(max-width:700px){
  main{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  #playArea{
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  #playArea > #fivePanel,
  #playArea > #quadsPanel,
  #playArea > #wordTrailPanel,
  #playArea > #miniPanel,
  #playArea > #ellPanel,
  #playArea > #samePanel{
    box-sizing:border-box!important;
    width:100vw!important;
    max-width:100vw!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  /* Restore intentional inner breathing room below the shared header,
     without shrinking the outer game container itself. */
  #fivePanel > .simple-instructions,
  #fivePanel > #fiveStatus,
  #fivePanel > .five-board-stage,
  #fivePanel > #keyboard,
  #quadsPanel > .simple-instructions,
  #quadsPanel > #quadsStatus,
  #quadsPanel > #quadsSolved,
  #quadsPanel > #quadsGrid,
  #quadsPanel > .quads-footer,
  #wordTrailPanel > #wordTrailGameplay,
  #wordTrailPanel > #wordTrailFound,
  #miniPanel > #miniStatus,
  #miniPanel > .mini-layout,
  #ellPanel > .simple-instructions,
  #ellPanel > #ellStatus,
  #ellPanel > .ell-player,
  #samePanel > #sameGame{
    margin-left:10px!important;
    margin-right:10px!important;
  }
}

/* 4) Every Last Letter: remove any extra top gap on mobile. */
@media(max-width:700px){
  #ellPanel{
    margin-top:0!important;
    padding-top:0!important;
  }
  #ellPanel > .ell-clean-head{
    margin-top:0!important;
  }
}


/* =========================================================
   V92 — MOBILE FULL-WIDTH OVERFLOW FIX
   V91 used viewport-width panels plus child margins. On real phones,
   several 100%-wide game elements therefore became wider than the
   viewport and appeared shifted/cropped on the right.
   ========================================================= */
@media(max-width:700px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  main,
  #playArea{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  /* The container itself spans the screen; breathing room belongs
     inside the container rather than being added as child margins. */
  #playArea > #fivePanel,
  #playArea > #quadsPanel,
  #playArea > #wordTrailPanel,
  #playArea > #miniPanel,
  #playArea > #ellPanel,
  #playArea > #samePanel{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  /* Undo V91's child-side margins. Width:100% children plus those
     margins were the source of the right-side overflow. */
  #fivePanel > .simple-instructions,
  #fivePanel > #fiveStatus,
  #fivePanel > .five-board-stage,
  #fivePanel > #keyboard,
  #quadsPanel > .simple-instructions,
  #quadsPanel > #quadsStatus,
  #quadsPanel > #quadsSolved,
  #quadsPanel > #quadsGrid,
  #quadsPanel > .quads-footer,
  #wordTrailPanel > #wordTrailGameplay,
  #wordTrailPanel > #wordTrailFound,
  #miniPanel > #miniStatus,
  #miniPanel > .mini-layout,
  #ellPanel > .simple-instructions,
  #ellPanel > #ellStatus,
  #ellPanel > .ell-player,
  #samePanel > #sameGame{
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Fixed keyboards should be viewport anchored, not participate in
     the panel's inner padding or margins. */
  #fivePanel > #keyboard,
  #miniPanel .mini-keyboard,
  #samePanel .same-keyboard{
    box-sizing:border-box!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }
}


/* =========================================================
   V93 — MOBILE HEIGHT RECALIBRATION
   - Recalibrate Six to Five + Crossword for taller keyboards
   - Lock Crossword clue box to keyboard top edge
   - Add One and the Same inner side margins
   ========================================================= */

@media(max-width:700px){

  /* Shared reference height for the taller mobile keyboards. */
  :root{
    --mobile-word-keyboard-height: 184px;
  }

  /* -------------------------------------------------------
     1) SIX TO FIVE
     Short-screen scaling now accounts for the taller keyboard.
     ------------------------------------------------------- */
  #fivePanel{
    min-height:calc(100dvh - 50px)!important;
    padding-bottom:calc(var(--mobile-word-keyboard-height) + env(safe-area-inset-bottom))!important;
  }

  #fivePanel .five-board-stage{
    max-height:calc(100dvh - var(--mobile-word-keyboard-height) - 166px)!important;
    overflow:visible!important;
  }

  @media(max-height:760px){
    #fivePanel .five-board-stage{
      transform:scale(.94);
      transform-origin:top center;
      margin-bottom:-18px!important;
    }
  }

  @media(max-height:700px){
    #fivePanel .five-board-stage{
      transform:scale(.88);
      margin-bottom:-34px!important;
    }
    #fivePanel .simple-instructions{
      margin-top:2px!important;
      margin-bottom:4px!important;
      font-size:13px!important;
      line-height:1.2!important;
    }
    #fivePanel .game-clean-head{
      min-height:40px!important;
    }
  }

  @media(max-height:640px){
    #fivePanel .five-board-stage{
      transform:scale(.82);
      margin-bottom:-52px!important;
    }
  }

  /* -------------------------------------------------------
     2) DAILY CROSSWORD
     Reserve exact keyboard space and attach active clue directly
     to the keyboard's top edge.
     ------------------------------------------------------- */
  #miniPanel{
    min-height:calc(100dvh - 50px)!important;
    padding-bottom:calc(var(--mobile-word-keyboard-height) + env(safe-area-inset-bottom))!important;
  }

  #miniPanel .mini-play-column{
    min-height:0!important;
  }

  #miniPanel .mini-grid-stage{
    max-height:calc(100dvh - var(--mobile-word-keyboard-height) - 174px)!important;
  }

  #miniPanel .mini-active-clue{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:calc(var(--mobile-word-keyboard-height) + env(safe-area-inset-bottom))!important;
    z-index:88!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    border-radius:0!important;
  }

  #miniPanel .mini-keyboard{
    height:var(--mobile-word-keyboard-height)!important;
    min-height:var(--mobile-word-keyboard-height)!important;
    max-height:var(--mobile-word-keyboard-height)!important;
    bottom:0!important;
  }

  @media(max-height:760px){
    #miniPanel .mini-grid-stage{
      transform:scale(.94);
      transform-origin:top center;
      margin-bottom:-18px!important;
    }
  }

  @media(max-height:700px){
    #miniPanel .mini-grid-stage{
      transform:scale(.88);
      margin-bottom:-34px!important;
    }
    #miniPanel .game-clean-head{
      min-height:40px!important;
    }
  }

  @media(max-height:640px){
    #miniPanel .mini-grid-stage{
      transform:scale(.82);
      margin-bottom:-50px!important;
    }
  }

  /* -------------------------------------------------------
     3) ONE AND THE SAME
     Keep the full-width outer container, but give the game itself
     consistent inner side breathing room.
     ------------------------------------------------------- */
  #samePanel > #sameGame{
    margin-left:15px!important;
    margin-right:15px!important;
  }
}


/* =========================================================
   V94 — MOBILE CROSSWORD CLIPPING + ONE AND THE SAME WIDTH FIX
   ========================================================= */

@media(max-width:700px){

  /* -------------------------------------------------------
     DAILY CROSSWORD
     V93 scaled the stage with transform while its parent still clipped
     the stage's original layout box. On short screens that made the
     crossword's top/bottom border disappear under white clipping.
     Size the grid itself instead of transforming it.
     ------------------------------------------------------- */

  #miniPanel .mini-grid-stage{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    transform:none!important;
    margin-bottom:0!important;
    padding:4px 15px 8px!important;
  }

  #miniPanel .mini-player-grid{
    /*
      50px  = site header
      44px  = game header
      16px  = status allowance
      56px  = fixed active clue
      184px = taller keyboard
      28px  = stage/panel breathing room
      The clamp prevents pathological tiny sizing while keeping the
      entire square—including its outer borders—inside the free space.
    */
    width:min(
      calc(100vw - 30px),
      clamp(150px, calc(100dvh - 378px - env(safe-area-inset-bottom)), 520px)
    )!important;
    height:auto!important;
    max-height:none!important;
    aspect-ratio:1 / 1!important;
    transform:none!important;
    margin:0 auto!important;
  }

  /* The clue remains physically attached to the keyboard top. */
  #miniPanel .mini-active-clue{
    bottom:calc(var(--mobile-word-keyboard-height) + env(safe-area-inset-bottom))!important;
    height:56px!important;
    min-height:56px!important;
  }

  /* Remove the V93 transform-based short-screen rules entirely. */
  @media(max-height:760px){
    #miniPanel .mini-grid-stage{
      transform:none!important;
      margin-bottom:0!important;
    }
  }
  @media(max-height:700px){
    #miniPanel .mini-grid-stage{
      transform:none!important;
      margin-bottom:0!important;
    }
  }
  @media(max-height:640px){
    #miniPanel .mini-grid-stage{
      transform:none!important;
      margin-bottom:0!important;
    }
  }

  /* -------------------------------------------------------
     ONE AND THE SAME
     V93 added 15px side margins to a 100%-wide game element.
     That recreated the same width-overflow pattern fixed in V92.
     Keep the outer game at 100% and create the requested breathing
     room with internal padding instead.
     ------------------------------------------------------- */

  #samePanel > #sameGame{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:15px!important;
    padding-right:15px!important;
  }

  #samePanel .same-active-area,
  #samePanel .same-history,
  #samePanel .same-guess-area{
    box-sizing:border-box!important;
    max-width:100%!important;
  }

  #samePanel .same-guess-input{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  #samePanel .same-history-row{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  #samePanel .same-history-clue,
  #samePanel .same-history-guess,
  #samePanel .same-history-guess-text{
    min-width:0!important;
    max-width:100%!important;
  }

  #samePanel .same-history-guess{
    overflow:hidden!important;
  }

  #samePanel .same-history-guess-text{
    overflow-wrap:anywhere!important;
    word-break:break-word;
  }
}


/* =========================================================
   V95 — SIX TO FIVE MOBILE HEIGHT CLEANUP
   Match the Daily Crossword V94 approach:
   size the board from real available viewport height instead of
   shrinking its stage with CSS transforms.
   ========================================================= */

@media(max-width:700px){

  #fivePanel .five-board-stage{
    max-height:none!important;
    overflow:visible!important;
    transform:none!important;
    margin-bottom:0!important;
    padding-top:4px!important;
    padding-bottom:8px!important;
  }

  /*
    Directly scale the Six to Five board from available viewport height.
    This keeps the full top/bottom edges visible and avoids transform
    clipping/jumping on short mobile screens.

    Approximate reserved vertical space:
      50px  site header
      44px  game header
      34px  instructions/status allowance
      184px taller keyboard
      34px  panel/stage breathing room
  */
  #fivePanel #fiveGrid{
    --five-mobile-max:
      min(
        calc(100vw - 30px),
        clamp(220px, calc(100dvh - 346px - env(safe-area-inset-bottom)), 440px)
      );

    width:var(--five-mobile-max)!important;
    max-width:var(--five-mobile-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    transform:none!important;
  }

  /* Remove V93's transform-based short-screen scaling. */
  @media(max-height:760px){
    #fivePanel .five-board-stage{
      transform:none!important;
      margin-bottom:0!important;
    }
  }

  @media(max-height:700px){
    #fivePanel .five-board-stage{
      transform:none!important;
      margin-bottom:0!important;
    }
  }

  @media(max-height:640px){
    #fivePanel .five-board-stage{
      transform:none!important;
      margin-bottom:0!important;
    }
  }
}


/* =========================================================
   V96 — SIX TO FIVE TRUE DYNAMIC MOBILE HEIGHT
   The board width is now supplied from measured free vertical space
   between the board stage and the actual keyboard top.
   ========================================================= */
@media(max-width:700px){
  #fivePanel .five-board-stage{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:center!important;
    overflow:visible!important;
    transform:none!important;
    margin-bottom:0!important;
    padding:4px 0 14px!important;
  }

  #fivePanel #fiveGrid{
    width:var(--five-dynamic-width, min(410px, calc(100vw - 40px)))!important;
    max-width:var(--five-dynamic-width, min(410px, calc(100vw - 40px)))!important;
    margin:0 auto!important;
    transform:none!important;
  }

  /* V93/V95 short-screen transform rules remain neutralized. */
  @media(max-height:760px){
    #fivePanel .five-board-stage{
      transform:none!important;
      margin-bottom:0!important;
    }
  }
  @media(max-height:700px){
    #fivePanel .five-board-stage{
      transform:none!important;
      margin-bottom:0!important;
    }
  }
  @media(max-height:640px){
    #fivePanel .five-board-stage{
      transform:none!important;
      margin-bottom:0!important;
    }
  }
}

/* =========================================================
   V97 — PREMIUM DAILY PUZZLE HOMEPAGE
   ========================================================= */
body.home-view{background:#f7f8f6}
body.home-view .game-ribbon{display:none!important}
body.home-view .desktop-site-tools{display:none!important}
body.home-view .mobile-menu-btn{display:flex!important}
body.home-view .site-header{max-width:1180px;border-bottom:0;padding-top:8px;padding-bottom:8px}
body.home-view main{max-width:1180px}

.front-page{padding:30px 12px 48px}
.home-today{
  max-width:1080px;margin:0 auto 22px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
}
.home-eyebrow{font:900 10px/1 Lato,system-ui,sans-serif;letter-spacing:.15em;color:#7b837e;margin-bottom:7px}
.home-today h2{margin:0;color:#1e2320;font:900 35px/1.02 Lato,system-ui,sans-serif;letter-spacing:-.035em}
.home-date{margin-top:7px;color:#68706b;font:700 13px/1.2 Lato,system-ui,sans-serif}
.home-progress{min-width:142px;padding-bottom:3px;text-align:right;color:#68706b;font:800 12px/1.2 Lato,system-ui,sans-serif}
.home-progress-track{display:block;width:142px;height:4px;margin-top:8px;border-radius:99px;background:#e1e5e1;overflow:hidden}
.home-progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:#536f60;transition:width .25s ease}

.front-game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:1080px;margin:0 auto}
.front-game-card{
  position:relative;min-height:258px;padding:20px 21px 18px;border:0!important;border-radius:17px!important;
  display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;text-align:left;
  background:#fff!important;color:#202322;box-shadow:0 3px 12px rgba(31,39,34,.085),0 1px 2px rgba(31,39,34,.05);
  overflow:hidden;cursor:pointer;transition:transform .17s ease,box-shadow .17s ease;
}
@media(hover:hover) and (pointer:fine){
  .front-game-card:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(31,39,34,.13),0 2px 5px rgba(31,39,34,.06)}
}
.front-game-card:active{transform:translateY(-1px)}
.front-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.front-card-top strong{font:900 20px/1.1 Lato,system-ui,sans-serif;letter-spacing:-.02em}
.front-complete-mark{
  display:none;width:24px;height:24px;border-radius:50%;place-items:center;background:#e7f1ea;color:#3e7650;font-size:13px;font-weight:900;
}
.front-game-card.is-complete .front-complete-mark{display:grid}
.front-card-sub{margin-top:13px;color:#68706b;font:700 12.5px/1.3 Lato,system-ui,sans-serif}
.front-preview{
  flex:1;min-height:160px;border-radius:12px;background:#f8f9f7;display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

/* Six to Five preview */
.five-preview{flex-direction:column;gap:7px;background:#f8faf8}
.fp-five-row{display:flex;gap:6px}
.fp-five-row i{
  width:35px;height:35px;border-radius:5px;display:grid;place-items:center;background:#fff;color:#202322;
  box-shadow:0 2px 5px rgba(30,38,33,.14);font:900 15px/1 Lato;font-style:normal;
}
.fp-five-row i.good{background:#5d946b;color:#fff}.fp-five-row i.present{background:#718ca2;color:#fff}.fp-five-row i.absent{background:#252827;color:#fff}

/* One and the Same preview */
.same-preview{position:relative;flex-direction:column;align-items:stretch;justify-content:center;gap:7px;padding:18px 24px;background:#faf9f6}
.same-preview>span:not(.same-answer){padding:8px 10px;border-radius:8px;background:#fff;box-shadow:0 1px 4px rgba(32,35,33,.08);font:700 11px/1.2 Lato;color:#525954}
.same-preview b{display:inline-grid;place-items:center;width:17px;height:17px;margin-right:6px;border-radius:50%;background:#ede7d8;color:#625a48;font-size:9px}
.same-preview .same-answer{position:absolute;right:17px;bottom:13px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#b58b3e;color:#fff;font-weight:900}

/* InCommon preview */
.quads-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:15px;background:#faf9f8}
.quads-preview>i{min-width:0;height:34px;padding:0 4px;border-radius:6px;display:grid;place-items:center;background:#fff;box-shadow:0 1px 4px rgba(35,31,29,.09);font:900 8.5px/1 Lato;font-style:normal;color:#3e403e}
.quads-preview>i:nth-child(-n+4){background:#f0ded6}.quads-preview>i:nth-child(n+5):nth-child(-n+8){background:#e5ece0}

/* Crossword preview */
.mini-preview{background:#f7f9fa}
.fp-cross-grid{width:156px;height:156px;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);border:2px solid #343a3b;background:#343a3b;gap:1px}
.fp-cross-grid i{position:relative;display:grid;place-items:center;background:#fff;color:#202526;font:900 13px/1 Lato;font-style:normal}
.fp-cross-grid i.block{background:#24292a}.fp-cross-grid i.word{background:#e6eff4}.fp-cross-grid i.active{background:#a9c3d3}
.fp-cross-grid small{position:absolute;left:2px;top:2px;font-size:6px;line-height:1;color:#697174}

/* Unscrumble preview */
.trail-preview{background:#f8f6fb}
.trail-preview svg{width:90%;height:90%}.trail-preview path{fill:none;stroke:#7359a3;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.trail-preview polygon{fill:#fbfcfb;filter:drop-shadow(0 3px 2px rgba(31,42,35,.16))}
.trail-preview text{text-anchor:middle;font:900 13px Lato;fill:#282b29}

/* ELL preview */
.ell-preview{background:#f8faf9}
.fp-ell-grid{display:grid;grid-template-columns:repeat(5,29px);gap:6px}
.fp-ell-grid i{height:29px;border-radius:6px;display:grid;place-items:center;background:#f5f7f7;color:#171a18;box-shadow:0 3px 4px rgba(24,31,28,.18);font:900 11px/1 Lato;font-style:normal}
.fp-ell-grid i.selected{background:#d8ece9;color:#153f3d;transform:translateY(-1px)}

.home-after{max-width:1080px;margin:30px auto 0;padding-top:22px;border-top:1px solid #e1e4e1}
.home-archive{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;color:#303632;font:800 14px Lato}
.home-archive a{color:#486b57;text-decoration:none}.home-archive a:hover{text-decoration:underline}
.home-after p{margin:10px 0 0;color:#858c87;font:700 11px/1.4 Lato}

@media(max-width:850px) and (min-width:701px){
  .front-game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  body.home-view .site-header{height:54px;min-height:54px;padding:0 14px}
  .front-page{padding:19px 2px 34px}
  .home-today{margin:0 2px 15px;align-items:flex-end}
  .home-eyebrow{font-size:9px;margin-bottom:5px}
  .home-today h2{font-size:27px}
  .home-date{font-size:11px;margin-top:5px}
  .home-progress{min-width:102px;font-size:10.5px}
  .home-progress-track{width:102px;height:3px;margin-top:6px}
  .front-game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .front-game-card{min-height:200px;padding:13px 11px 12px;border-radius:13px!important}
  .front-card-top{margin-bottom:9px}
  .front-card-top strong{font-size:15px}
  .front-complete-mark{width:20px;height:20px;font-size:11px}
  .front-preview{min-height:122px;border-radius:9px}
  .front-card-sub{font-size:10px;margin-top:8px}
  .fp-five-row{gap:4px}.fp-five-row i{width:25px;height:25px;font-size:11px}
  .same-preview{padding:10px 8px;gap:4px}.same-preview>span:not(.same-answer){padding:5px 6px;font-size:8px}.same-preview b{width:13px;height:13px;font-size:7px}
  .quads-preview{gap:3px;padding:7px}.quads-preview>i{height:25px;font-size:6px;border-radius:4px}
  .fp-cross-grid{width:116px;height:116px}.fp-cross-grid i{font-size:10px}
  .fp-ell-grid{grid-template-columns:repeat(5,21px);gap:4px}.fp-ell-grid i{height:21px;font-size:8px;border-radius:4px}
  .home-after{margin-top:22px;padding:18px 2px 0}
}
@media(max-width:370px){
  .front-game-card{min-height:188px;padding:11px 9px}
  .front-card-top strong{font-size:14px}
  .front-card-sub{font-size:9.5px}
}


/* =========================================================
   V98 — PUZZLENOOK UNIVERSAL SHELL + COMPLETION STATES
   ========================================================= */
body{font-family:Lato,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.site-header,body.home-view .site-header{
  position:relative;z-index:120;max-width:none;width:100%;height:62px;min-height:62px;margin:0;padding:0 max(18px,calc((100vw - 1180px)/2));
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:18px;background:#fff;border-bottom:1px solid #e5e8e5;
}
.site-brand-wrap{display:flex;align-items:baseline;gap:13px;min-width:0}
.brand-home{height:auto!important;display:block!important;appearance:none;background:transparent!important;color:#202322!important;border:0!important;padding:0!important;border-radius:0!important;box-shadow:none!important;text-align:left!important;cursor:pointer}
.brand-home:hover,.brand-home:focus,.brand-home:active{background:transparent!important;color:#202322!important;box-shadow:none!important;transform:none!important;text-decoration:none!important}
.site-name{font:900 23px/1 Lato,system-ui,sans-serif;letter-spacing:-.035em;white-space:nowrap}
.site-tagline{font:italic 400 14px/1.1 Lato,system-ui,sans-serif;color:#737b76;white-space:nowrap}
.mobile-menu-btn,body.home-view .mobile-menu-btn{
  display:flex!important;width:40px;height:40px;padding:9px!important;border:0!important;border-radius:9px!important;background:transparent!important;color:#252a27!important;box-shadow:none!important;flex-direction:column;justify-content:center;gap:4px;
}
.mobile-menu-btn:hover,.mobile-menu-btn:active{transform:none!important;background:transparent!important;box-shadow:none!important}
.mobile-menu-btn span{display:block;width:21px;height:2px;border-radius:2px;background:#252a27;margin:0 auto}
.mobile-site-menu[hidden]{display:none!important}
.mobile-site-menu:not([hidden]){
  display:block;position:absolute;top:54px;right:max(14px,calc((100vw - 1180px)/2));width:min(330px,calc(100vw - 28px));padding:10px;background:#fff;border:1px solid #e1e4e1;border-radius:14px;box-shadow:0 14px 34px rgba(25,32,28,.16);
}
.mobile-site-nav{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.mobile-site-nav button{min-height:40px;padding:8px 10px;border-radius:8px;background:#f5f6f4;color:#242926;text-align:left;font-size:13px;font-weight:800}
.mobile-site-nav button:hover{transform:none;background:#ecefeb}
.mobile-date-tools{display:none}

/* Desktop puzzle switcher: light, text-led, and separate from the site header. */
.game-ribbon,body.home-view .game-ribbon{
  display:flex;align-items:center;justify-content:center;gap:4px;width:min(930px,100%);min-height:0;margin:15px auto 10px;padding:5px;border:0;border-radius:14px;background:#fff;box-shadow:0 2px 10px rgba(28,36,31,.075);overflow:visible;
}

.game-tab{
  position:relative;flex:1 1 0;min-width:0;min-height:42px;padding:9px 10px;border:0!important;border-radius:10px!important;background:transparent!important;color:#717974!important;box-shadow:none!important;font:800 12.5px/1.12 Lato,system-ui,sans-serif;white-space:nowrap;transition:background .14s ease,color .14s ease;
}
.game-tab:hover:not(:disabled){transform:none!important;background:#f7f8f6!important;color:#303632!important}
.game-tab.active{background:#f2f4f1!important;color:#202522!important}
.game-tab::after{left:50%;right:auto;bottom:4px;width:22px;height:2px;transform:translateX(-50%);border-radius:99px;background:transparent}
.game-tab[data-game="five"].active::after{background:#4f9164}
.game-tab[data-game="same"].active::after{background:#b58b3e}
.game-tab[data-game="quads"].active::after{background:#c66f58}
.game-tab[data-game="mini"].active::after{background:#587e9b}
.game-tab[data-game="trail"].active::after{background:#7359a3}
.game-tab[data-game="ell"].active::after{background:#268d89}

/* Developer controls live outside the consumer game surface on desktop. */
.desktop-test-palette{display:none}
@media(min-width:1180px){
  body:not(.home-view) .desktop-test-palette{
    display:block;position:fixed;z-index:40;top:132px;left:calc(50% + 430px);width:176px;padding:12px;border-radius:13px;background:rgba(255,255,255,.96);box-shadow:0 4px 16px rgba(27,34,30,.10);border:1px solid #e6e9e6;
  }
  .desktop-test-palette .test-palette-label{margin:0 0 8px;color:#929993;font:900 9px/1 Lato;letter-spacing:.15em}
  .desktop-test-palette .date-tools{display:flex;flex-direction:column;align-items:stretch;gap:6px;width:100%}
  .desktop-test-palette .date-tools button,.desktop-test-palette .date-tools .status-pill{width:100%;text-align:center;white-space:normal}
}
@media(min-width:701px) and (max-width:1179px){
  body:not(.home-view) .desktop-test-palette{display:flex;justify-content:flex-end;width:min(930px,100%);margin:0 auto 8px}
  .desktop-test-palette .test-palette-label{display:none}
  .desktop-test-palette .date-tools{display:flex;justify-content:flex-end;gap:5px;padding:7px;border-radius:11px;background:#fff;box-shadow:0 2px 9px rgba(28,36,31,.07)}
}

/* Homepage display type: editorial warmth, used strategically. */
.home-today h2{font-family:"DM Serif Display",Georgia,serif!important;font-weight:400!important;letter-spacing:-.02em!important;font-size:39px}

/* Every card starts with an empty completion ring. Completion fills it. */
.front-complete-mark{
  display:grid!important;width:24px;height:24px;border:1.5px solid #c9ceca;border-radius:50%;place-items:center;background:transparent;color:transparent;font-size:13px;font-weight:900;transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.front-game-card.is-complete .front-complete-mark{display:grid;background:#4f9164;border-color:#4f9164;color:#fff}
.front-card-sub{min-height:17px}
.front-game-card.is-complete .front-card-sub{color:#467252;font-weight:900}

@media(max-width:700px){
  .site-header,body.home-view .site-header{height:50px;min-height:50px;padding:0 14px;border-bottom:1px solid #e1e4e1}
  .site-brand-wrap{gap:9px}
  .site-name{font-size:20px}
  .site-tagline{font-size:11.5px}
  .mobile-site-menu:not([hidden]){top:48px;right:10px}
  .mobile-date-tools{display:block;margin-top:9px;padding-top:9px;border-top:1px solid #e6e8e5}
  .mobile-date-row{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:7px}
  .mobile-date-row #mobileTodayLabel{text-align:center;font-size:12px;font-weight:900;color:#535b56}
  .mobile-icon-action{min-height:36px;padding:5px!important;border-radius:8px!important;background:#eef0ed!important;color:#252a27!important}
  .mobile-reset-action{width:100%;margin-top:7px;min-height:36px;padding:7px 10px!important;background:#fff!important;color:#4d5550!important;border:1px solid #e0e3df!important;font-size:12px}
  .game-ribbon{display:none!important}
  .desktop-test-palette{display:none!important}
  .home-today h2{font-size:30px}
  .front-complete-mark{width:20px;height:20px;font-size:11px}
}
@media(max-width:390px){.site-tagline{display:none}}

/* =========================================================
   V99 — PUZZLENOOK SHELL CORRECTIONS
   ========================================================= */

/* Universal shell: same core header everywhere, visually integrated with the page. */
.site-header,
body.home-view .site-header{
  width:100%;
  max-width:none;
  height:62px;
  min-height:62px;
  margin:0;
  padding-left:max(20px,calc((100vw - 1080px)/2));
  padding-right:max(20px,calc((100vw - 1080px)/2));
  background:transparent;
  border-bottom:0;
  box-shadow:none;
}
body.home-view .site-header{background:#f7f8f6}
.site-brand-wrap{display:flex;align-items:baseline;gap:14px}
.site-name{font-weight:900}
.site-tagline{
  display:inline-block;
  font-family:Lato,system-ui,sans-serif;
  font-size:14px;
  line-height:1.1;
  font-style:italic!important;
  font-weight:400!important;
  color:#747c77;
}

/* Make the homepage heading an unmistakable editorial display face. */
.home-today h2{
  font-family:"DM Serif Display",Georgia,"Times New Roman",serif!important;
  font-style:normal!important;
  font-weight:400!important;
  letter-spacing:-.025em!important;
  font-size:40px!important;
  line-height:1.02!important;
}

/* Testing tools are temporary developer chrome, physically outside the product surface. */
.desktop-test-palette{display:none!important}
@media(min-width:1280px){
  body:not(.home-view) .desktop-test-palette{
    display:block!important;
    position:fixed!important;
    z-index:45;
    top:152px;
    right:18px;
    left:auto!important;
    width:184px;
    margin:0!important;
    padding:12px;
    border:1px solid #e3e7e3;
    border-radius:15px;
    background:#fff;
    box-shadow:0 10px 28px rgba(28,36,31,.12),0 2px 5px rgba(28,36,31,.05);
  }
  body:not(.home-view) .desktop-test-palette .date-tools{
    display:flex!important;
    width:100%;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:7px!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body:not(.home-view) .desktop-test-palette .date-tools button,
  body:not(.home-view) .desktop-test-palette .date-tools .status-pill{
    width:100%;
    min-width:0;
    margin:0;
    text-align:center;
    white-space:normal;
  }
}
/* If there is not enough side room, desktop test chrome disappears rather than crowding the game. */
@media(min-width:701px) and (max-width:1279px){
  body:not(.home-view) .desktop-test-palette{display:none!important}
}

/* Mobile: only PuzzleNook + hamburger in the header. */
@media(max-width:700px){
  .site-header,
  body.home-view .site-header{
    height:50px!important;
    min-height:50px!important;
    padding:0 14px!important;
    background:#fff;
    border-bottom:1px solid #e4e7e4;
  }
  body.home-view .site-header{background:#f7f8f6;border-bottom-color:transparent}
  .site-tagline{display:none!important}
  .site-name{font-size:20px}
}


/* =========================================================
   V100 — HOMEPAGE ART PREVIEWS + COMPLETED CARD FOOTER
   ========================================================= */
.front-preview{
  padding:0!important;
  background:transparent!important;
}
.front-preview img{
  display:block;
  width:100%;
  height:100%;
  min-height:160px;
  object-fit:cover;
  object-position:center;
}
.front-game-card.is-complete .front-card-sub{
  margin:13px -21px -18px!important;
  min-height:42px;
  padding:11px 14px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#4f9164;
  color:#fff!important;
  font-weight:900;
  border-radius:0;
}
@media(max-width:700px){
  .front-preview img{min-height:122px}
  .front-game-card.is-complete .front-card-sub{
    margin:8px -11px -12px!important;
    min-height:34px;
    padding:8px 8px 9px;
    font-size:10px;
  }
}
@media(max-width:370px){
  .front-game-card.is-complete .front-card-sub{margin-left:-9px!important;margin-right:-9px!important}
}

/* =========================================================
   V100.1 — HOMEPAGE ART PREVIEW LAYOUT FIX
   Prevent legacy per-game preview layouts from constraining
   the new single-image homepage artwork.
   ========================================================= */
.front-game-card .front-preview.home-card-art,
.front-game-card .front-preview:has(> img.home-card-art-img){
  display:block!important;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
}
.front-game-card .front-preview > img.home-card-art-img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* V100.1 selector correction: current V100 artwork markup */
.front-game-card .front-preview:has(> img){
  display:block!important;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
}
.front-game-card .front-preview > img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* =========================================================
   V100.2 — MOBILE HOMEPAGE CONTENT GUTTER
   Header remains unchanged; only homepage content below it
   receives additional breathing room from screen edges.
   ========================================================= */
@media(max-width:700px){
  body.home-view main{
    padding-left:20px!important;
    padding-right:20px!important;
  }
}
@media(max-width:360px){
  body.home-view main{
    padding-left:16px!important;
    padding-right:16px!important;
  }
}

/* V100.3 — mobile homepage gutter + responsive single-line title */
@media(max-width:700px){
  body.home-view main{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  body.home-view .home-today h2{
    white-space:nowrap!important;
    font-size:clamp(29px,10vw,40px)!important;
    letter-spacing:-.03em!important;
  }
}
@media(max-width:360px){
  body.home-view main{
    padding-left:8px!important;
    padding-right:8px!important;
  }
}

/* =========================================================
   V100.4 — MOBILE HOME TITLE / PROGRESS LOCKUP
   Progress stays fixed on the right; title yields and scales.
   ========================================================= */
@media(max-width:700px){
  body.home-view .home-today{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:10px!important;
    width:auto!important;
  }

  body.home-view .home-today > div:first-child{
    flex:1 1 auto!important;
    min-width:0!important;
  }

  body.home-view .home-progress{
    flex:0 0 102px!important;
    width:102px!important;
    min-width:102px!important;
    max-width:102px!important;
    margin-left:auto!important;
    text-align:right!important;
    visibility:visible!important;
    opacity:1!important;
  }

  body.home-view .home-progress-track{
    width:102px!important;
    min-width:102px!important;
    max-width:102px!important;
    margin-left:auto!important;
  }

  body.home-view .home-today h2{
    display:block!important;
    max-width:100%!important;
    min-width:0!important;
    white-space:nowrap!important;
    overflow:visible!important;
    font-size:clamp(18px,8.3vw,40px)!important;
    line-height:1.02!important;
  }
}

/* =========================================================
   V100.5 — DESKTOP GAME CONTAINER BOTTOM SPACING
   Additional interior space below each requested game.
   Mobile/tablet layouts remain unchanged.
   ========================================================= */
@media(min-width:701px){
  #fivePanel{padding-bottom:calc(22px + 100px)!important;}
  #samePanel{padding-bottom:calc(22px + 300px)!important;}
  #quadsPanel{padding-bottom:calc(22px + 100px)!important;}
  #miniPanel{padding-bottom:calc(22px + 50px)!important;}
  #ellPanel{padding-bottom:calc(22px + 50px)!important;}
}

/* =========================================================
   V100.6 — DESKTOP GAME PANEL RESERVED BOTTOM SPACE
   Corrects V100.5: extend the bordered white panel below the
   playable content without moving the existing game content.
   ========================================================= */
@media(min-width:701px){
  #fivePanel,
  #samePanel,
  #quadsPanel,
  #miniPanel,
  #ellPanel{
    padding-bottom:22px!important;
  }

  #fivePanel::after,
  #samePanel::after,
  #quadsPanel::after,
  #miniPanel::after,
  #ellPanel::after{
    content:"";
    display:block;
    width:100%;
    flex:0 0 auto;
    pointer-events:none;
  }

  #fivePanel::after{height:100px;}
  #samePanel::after{height:300px;}
  #quadsPanel::after{height:100px;}
  #miniPanel::after{height:50px;}
  #ellPanel::after{height:50px;}
}

/* V100.7 — refined desktop game panel bottom space */
@media(min-width:701px){
  #fivePanel::after{height:50px!important;}
  #samePanel::after{height:225px!important;}
  #quadsPanel::after{height:80px!important;}
  #wordTrailPanel::after{
    content:"";
    display:block;
    width:100%;
    height:30px!important;
    flex:0 0 auto;
    pointer-events:none;
  }
}

/* =========================================================
   V100.9 — INCOMMON SATISFACTION PASS
   Rich PuzzleNook palette + tactile selection + distinct miss,
   one-away, solve, and shuffle/reflow motion.
   ========================================================= */
:root{
  --incommon-coral:#c66f58;
  --incommon-coral-deep:#a95745;
  --incommon-ivory:#fbfaf6;
  --incommon-ink:#272523;
  --incommon-easy:#e98268;
  --incommon-medium:#55b7ae;
  --incommon-hard:#eea34f;
  --incommon-very-hard:#b84f74;
}
#quadsPanel .quads-tile{
  background:var(--incommon-ivory)!important;
  color:var(--incommon-ink)!important;
  border:1px solid rgba(72,61,51,.045)!important;
  box-shadow:0 3px 7px rgba(42,35,29,.105),0 1px 2px rgba(42,35,29,.06)!important;
  transition:background .16s ease,color .16s ease,transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .16s ease!important;
  will-change:transform;
}
#quadsPanel .quads-tile:hover:not(:disabled):not(.selected){
  background:#fffdf8!important;
  transform:translateY(-2px)!important;
  box-shadow:0 5px 12px rgba(42,35,29,.12),0 2px 4px rgba(42,35,29,.07)!important;
}
#quadsPanel .quads-tile.selected{
  background:var(--incommon-coral)!important;
  color:#fff!important;
  border-color:transparent!important;
  transform:translateY(-3px) scale(1.015)!important;
  box-shadow:0 7px 15px rgba(126,64,49,.23),0 2px 4px rgba(42,35,29,.10)!important;
}
#quadsPanel .quads-tile.select-pop{animation:incommonSelectPop .24s cubic-bezier(.2,.9,.25,1.25)!important}
#quadsPanel .quads-tile.deselect-drop{animation:incommonDeselect .18s ease-out!important}
#quadsPanel .quads-tile.solve-merge{animation:incommonSolveMerge .62s cubic-bezier(.2,.75,.25,1) both!important}
#quadsPanel .quads-grid.wrong-motion{animation:incommonWrongGroup .44s cubic-bezier(.36,.07,.19,.97)!important}
#quadsPanel .quads-grid.one-away-motion{animation:incommonOneAwayGroup .60s cubic-bezier(.2,.75,.25,1)!important}
#quadsPanel .quads-grid.one-away-motion .quads-tile.one-away-tile:nth-of-type(4n){animation:incommonOddKick .60s ease!important}

#quadsPanel .quads-solved-row{
  color:#252522!important;
  box-shadow:0 3px 8px rgba(42,35,29,.09)!important;
}
#quadsPanel .quads-solved-row.quads-easy{background:var(--incommon-easy)!important}
#quadsPanel .quads-solved-row.quads-medium{background:var(--incommon-medium)!important}
#quadsPanel .quads-solved-row.quads-hard{background:var(--incommon-hard)!important;color:#252522!important}
#quadsPanel .quads-solved-row.quads-very-hard{background:var(--incommon-very-hard)!important;color:#fff!important}
#quadsPanel .quads-solved-row.enter{animation:incommonSolvedLand .48s cubic-bezier(.18,.9,.25,1.18) both!important}
#quadsPanel .quads-grid.reflow{animation:incommonReflow .34s cubic-bezier(.2,.75,.25,1) both!important}
#quadsPanel .quads-message{
  min-height:22px;
  letter-spacing:.015em;
}
#quadsPanel .quads-message.warn{
  color:var(--incommon-coral-deep)!important;
}
#quadsPanel .quads-message.warn:first-letter{}
#quadsPanel .life-stars{color:var(--incommon-coral-deep)}

@keyframes incommonSelectPop{
  0%{transform:translateY(0) scale(1)}
  38%{transform:translateY(1px) scale(.94)}
  72%{transform:translateY(-4px) scale(1.045)}
  100%{transform:translateY(-3px) scale(1.015)}
}
@keyframes incommonDeselect{
  0%{transform:translateY(-3px) scale(1.015)}
  55%{transform:translateY(2px) scale(.985)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes incommonWrongGroup{
  0%,100%{transform:translateX(0)}
  18%{transform:translateX(-7px)}
  36%{transform:translateX(6px)}
  54%{transform:translateX(-4px)}
  72%{transform:translateX(3px)}
  88%{transform:translateX(-1px)}
}
@keyframes incommonOneAwayGroup{
  0%,100%{transform:scale(1)}
  24%{transform:scale(.985)}
  48%{transform:scale(.972)}
  66%{transform:scale(.972)}
  82%{transform:scale(1.008)}
}
@keyframes incommonOddKick{
  0%,48%,100%{transform:translateY(-3px) scale(1.015)}
  65%{transform:translate(9px,-3px) rotate(1.5deg) scale(1.015)}
  80%{transform:translate(-2px,-3px) scale(1.015)}
}
@keyframes incommonSolveMerge{
  0%{transform:translateY(-3px) scale(1.015)}
  28%{transform:translateY(-4px) scale(1.04)}
  58%{transform:translateY(-4px) scale(.97);filter:brightness(1.06)}
  78%{transform:translateY(-8px) scale(.92);opacity:.88}
  100%{transform:translateY(-12px) scale(.86);opacity:0}
}
@keyframes incommonSolvedLand{
  0%{opacity:0;transform:translateY(14px) scale(.965)}
  62%{opacity:1;transform:translateY(-3px) scale(1.012)}
  82%{transform:translateY(1px) scale(.997)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes incommonReflow{
  0%{opacity:.72;transform:translateY(7px) scale(.992)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  #quadsPanel .quads-tile.select-pop,
  #quadsPanel .quads-tile.deselect-drop,
  #quadsPanel .quads-tile.solve-merge,
  #quadsPanel .quads-grid.wrong-motion,
  #quadsPanel .quads-grid.one-away-motion,
  #quadsPanel .quads-grid.one-away-motion .quads-tile.one-away-tile,
  #quadsPanel .quads-solved-row.enter,
  #quadsPanel .quads-grid.reflow{animation:none!important}
}

/* =========================================================
   V100.10 — INCOMMON FEEL TUNING
   Make ONE AWAY unmistakable and increase solved-row bounce ~30%.
   ========================================================= */
#quadsPanel .quads-grid.one-away-motion{
  animation:incommonOneAwayGroupV2 .64s cubic-bezier(.2,.75,.25,1)!important;
}
#quadsPanel .quads-grid.one-away-motion .quads-tile.one-away-tile{
  animation:incommonOneAwayTileV2 .64s cubic-bezier(.2,.75,.25,1)!important;
}
#quadsPanel .quads-grid.one-away-motion .quads-tile.one-away-kick{
  animation:incommonOneAwayKickV2 .64s cubic-bezier(.2,.75,.25,1)!important;
}
#quadsPanel .quads-solved-row.enter{
  animation:incommonSolvedLandV2 .50s cubic-bezier(.18,.9,.25,1.18) both!important;
}

@keyframes incommonOneAwayGroupV2{
  0%,100%{transform:scale(1)}
  22%{transform:scale(.972)}
  48%{transform:scale(.955)}
  64%{transform:scale(.955)}
  82%{transform:scale(1.012)}
}
@keyframes incommonOneAwayTileV2{
  0%,100%{transform:translateY(-3px) scale(1.015)}
  25%{transform:translateY(-3px) scale(1.045)}
  50%{transform:translateY(-3px) scale(1.025)}
  72%{transform:translateY(-3px) scale(1.025)}
}
@keyframes incommonOneAwayKickV2{
  0%{transform:translateY(-3px) scale(1.015)}
  24%{transform:translateY(-3px) scale(1.045)}
  48%{transform:translateY(-3px) scale(1.025)}
  64%{transform:translate(16px,-3px) rotate(2.2deg) scale(1.025)}
  80%{transform:translate(-4px,-3px) rotate(-.7deg) scale(1.025)}
  100%{transform:translateY(-3px) scale(1.015)}
}
@keyframes incommonSolvedLandV2{
  0%{opacity:0;transform:translateY(18px) scale(.955)}
  58%{opacity:1;transform:translateY(-4px) scale(1.016)}
  80%{transform:translateY(1.3px) scale(.996)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  #quadsPanel .quads-grid.one-away-motion,
  #quadsPanel .quads-grid.one-away-motion .quads-tile.one-away-tile,
  #quadsPanel .quads-grid.one-away-motion .quads-tile.one-away-kick,
  #quadsPanel .quads-solved-row.enter{animation:none!important}
}

/* =========================================================
   V100.11 — INCOMMON RESULT CLARITY + WRONG BLINK
   ========================================================= */

/* Completed group category: stronger hierarchy; words remain unchanged. */
#quadsPanel .quads-solved-row .label{
  font-size:15px!important;
  font-weight:900!important;
}

/* Wrong answer: no shake. Selected tiles give two quick visual error pulses. */
#quadsPanel .quads-tile.wrong-blink{
  animation:incommonWrongBlink .52s ease-out both!important;
}

@keyframes incommonWrongBlink{
  0%,100%{
    background:var(--incommon-coral)!important;
    color:#fff!important;
    box-shadow:0 7px 15px rgba(126,64,49,.23),0 2px 4px rgba(42,35,29,.10)!important;
    filter:none;
  }
  18%{
    background:#f3d8d0!important;
    color:#7f3f32!important;
    box-shadow:0 0 0 3px rgba(198,111,88,.16),0 3px 8px rgba(42,35,29,.08)!important;
    filter:brightness(1.03);
  }
  34%{
    background:var(--incommon-coral)!important;
    color:#fff!important;
    box-shadow:0 7px 15px rgba(126,64,49,.23),0 2px 4px rgba(42,35,29,.10)!important;
    filter:none;
  }
  57%{
    background:#f3d8d0!important;
    color:#7f3f32!important;
    box-shadow:0 0 0 3px rgba(198,111,88,.16),0 3px 8px rgba(42,35,29,.08)!important;
    filter:brightness(1.03);
  }
  76%{
    background:var(--incommon-coral)!important;
    color:#fff!important;
    box-shadow:0 7px 15px rgba(126,64,49,.23),0 2px 4px rgba(42,35,29,.10)!important;
    filter:none;
  }
}

@media(prefers-reduced-motion:reduce){
  #quadsPanel .quads-tile.wrong-blink{
    animation:none!important;
    background:#f3d8d0!important;
    color:#7f3f32!important;
  }
}

/* =========================================================
   V100.12 — INCOMMON TYPOGRAPHY CONTRAST + STRONGER WRONG FEEDBACK
   ========================================================= */

/* Stronger distinction between category and its four words. */
#quadsPanel .quads-solved-row .label{
  font-size:17px!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
  line-height:1.12!important;
}
#quadsPanel .quads-solved-row .words{
  font-size:14px!important;
  font-weight:400!important;
  letter-spacing:.005em!important;
  line-height:1.25!important;
  opacity:.92;
}

/* Wrong answer: intentionally unmistakable without using a Connections-style shake. */
#quadsPanel .quads-tile.wrong-blink{
  animation:incommonWrongBlinkV2 .72s cubic-bezier(.22,.72,.22,1) both!important;
  transform-origin:center!important;
}

@keyframes incommonWrongBlinkV2{
  0%,100%{
    background:var(--incommon-coral)!important;
    color:#fff!important;
    transform:translateY(-3px) scale(1.015)!important;
    box-shadow:0 7px 15px rgba(126,64,49,.23),0 2px 4px rgba(42,35,29,.10)!important;
    filter:none;
  }

  10%{
    background:#8f3f32!important;
    color:#fff!important;
    transform:translateY(-3px) scale(.94)!important;
    box-shadow:0 0 0 5px rgba(143,63,50,.20),0 3px 9px rgba(87,34,26,.20)!important;
    filter:brightness(.9);
  }
  20%{
    background:#ffd9d0!important;
    color:#7b342a!important;
    transform:translateY(-3px) scale(1.055)!important;
    box-shadow:0 0 0 6px rgba(198,111,88,.22),0 7px 18px rgba(126,64,49,.20)!important;
    filter:brightness(1.08);
  }

  34%{
    background:#8f3f32!important;
    color:#fff!important;
    transform:translateY(-3px) scale(.95)!important;
    box-shadow:0 0 0 5px rgba(143,63,50,.20),0 3px 9px rgba(87,34,26,.20)!important;
    filter:brightness(.9);
  }
  44%{
    background:#ffd9d0!important;
    color:#7b342a!important;
    transform:translateY(-3px) scale(1.05)!important;
    box-shadow:0 0 0 6px rgba(198,111,88,.22),0 7px 18px rgba(126,64,49,.20)!important;
    filter:brightness(1.08);
  }

  58%{
    background:#8f3f32!important;
    color:#fff!important;
    transform:translateY(-3px) scale(.96)!important;
    box-shadow:0 0 0 4px rgba(143,63,50,.18),0 3px 9px rgba(87,34,26,.18)!important;
    filter:brightness(.92);
  }
  70%{
    background:#ffd9d0!important;
    color:#7b342a!important;
    transform:translateY(-3px) scale(1.04)!important;
    box-shadow:0 0 0 5px rgba(198,111,88,.18),0 6px 15px rgba(126,64,49,.16)!important;
    filter:brightness(1.06);
  }
  84%{
    background:var(--incommon-coral)!important;
    color:#fff!important;
    transform:translateY(-3px) scale(1.01)!important;
    box-shadow:0 7px 15px rgba(126,64,49,.23),0 2px 4px rgba(42,35,29,.10)!important;
    filter:none;
  }
}

@media(prefers-reduced-motion:reduce){
  #quadsPanel .quads-tile.wrong-blink{
    animation:none!important;
    background:#8f3f32!important;
    color:#fff!important;
    box-shadow:0 0 0 5px rgba(143,63,50,.20)!important;
  }
}

/* =========================================================
   V100.15 — INCOMMON MISTAKE RHYTHM + LIFE-STAR EXIT
   ========================================================= */

/* Keep the overall mistake duration, but slow the blink cadence ~30%. */
#quadsPanel .quads-tile.wrong-blink{
  animation:incommonWrongBlinkV3 .72s cubic-bezier(.22,.72,.22,1) both!important;
}
@keyframes incommonWrongBlinkV3{
  0%,100%{
    background:var(--incommon-coral)!important;
    color:#fff!important;
    transform:translateY(-3px) scale(1.015)!important;
    box-shadow:0 7px 15px rgba(126,64,49,.23),0 2px 4px rgba(42,35,29,.10)!important;
    filter:none;
  }
  16%{
    background:#8f3f32!important;
    color:#fff!important;
    transform:translateY(-3px) scale(.94)!important;
    box-shadow:0 0 0 5px rgba(143,63,50,.20),0 3px 9px rgba(87,34,26,.20)!important;
    filter:brightness(.9);
  }
  32%{
    background:#ffd9d0!important;
    color:#7b342a!important;
    transform:translateY(-3px) scale(1.055)!important;
    box-shadow:0 0 0 6px rgba(198,111,88,.22),0 7px 18px rgba(126,64,49,.20)!important;
    filter:brightness(1.08);
  }
  50%{
    background:var(--incommon-coral)!important;
    color:#fff!important;
    transform:translateY(-3px) scale(1.005)!important;
    box-shadow:0 7px 15px rgba(126,64,49,.23),0 2px 4px rgba(42,35,29,.10)!important;
    filter:none;
  }
  68%{
    background:#8f3f32!important;
    color:#fff!important;
    transform:translateY(-3px) scale(.95)!important;
    box-shadow:0 0 0 5px rgba(143,63,50,.20),0 3px 9px rgba(87,34,26,.20)!important;
    filter:brightness(.9);
  }
  84%{
    background:#ffd9d0!important;
    color:#7b342a!important;
    transform:translateY(-3px) scale(1.05)!important;
    box-shadow:0 0 0 6px rgba(198,111,88,.22),0 7px 18px rgba(126,64,49,.20)!important;
    filter:brightness(1.08);
  }
}

/* A spent life reacts only after the tile feedback finishes. */
#quadsPanel .mistake-star{
  display:inline-block;
  transform-origin:center;
}
#quadsPanel .mistake-star.life-lost{
  animation:incommonLifeLost .36s cubic-bezier(.22,.72,.28,1) both!important;
}
@keyframes incommonLifeLost{
  0%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
  34%{
    opacity:1;
    transform:translateY(-7px) scale(1.10);
  }
  58%{
    opacity:.98;
    transform:translateY(-2px) scale(1.02);
  }
  100%{
    opacity:0;
    transform:translateY(11px) scale(.78);
  }
}

@media(prefers-reduced-motion:reduce){
  #quadsPanel .mistake-star.life-lost{
    animation:none!important;
    opacity:0!important;
  }
}

/* =========================================================
   V100.17 — INCOMMON FIXED LIFE METER
   Keep "Lives left" and all remaining stars spatially locked.
   ========================================================= */
#quadsPanel #quadsMistakes{
  white-space:nowrap;
}
#quadsPanel .life-stars{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  width:72px;
  min-width:72px;
  gap:5px;
  vertical-align:middle;
}
#quadsPanel .mistake-star{
  width:14px;
  min-width:14px;
  margin-left:0!important;
  text-align:center;
}
#quadsPanel .mistake-star.spent-life{
  visibility:hidden;
}
#quadsPanel .mistake-star.life-lost{
  visibility:visible!important;
}

/* =========================================================
   V100.18 — INCOMMON CORRECT-SOLVE SEQUENCE
   Positive blink -> upward exit -> solved-category bounce.
   ========================================================= */

#quadsPanel .quads-tile.correct-blink{
  /* Override the selected coral immediately, before the first animation frame. */
  background:#34a85e!important;
  color:#fff!important;
  animation:incommonCorrectBlinkV3 .60s cubic-bezier(.22,.72,.22,1) both!important;
  transform-origin:center!important;
}

@keyframes incommonCorrectBlinkV3{
  0%{
    background:#34a85e!important;
    color:#fff!important;
    transform:translateY(-3px) scale(1.015)!important;
    box-shadow:0 7px 15px rgba(35,138,74,.24),0 2px 4px rgba(42,35,29,.10)!important;
    filter:none;
  }
  14%{
    background:#238a4a!important;
    color:#fff!important;
    transform:translateY(-3px) scale(.94)!important;
    box-shadow:0 0 0 5px rgba(35,138,74,.22),0 3px 9px rgba(25,91,51,.20)!important;
    filter:brightness(.96);
  }
  28%{
    background:#7ee29d!important;
    color:#123d22!important;
    transform:translateY(-3px) scale(1.055)!important;
    box-shadow:0 0 0 6px rgba(72,190,111,.24),0 7px 18px rgba(35,138,74,.22)!important;
    filter:brightness(1.08);
  }
  44%{
    background:#34a85e!important;
    color:#fff!important;
    transform:translateY(-3px) scale(1.005)!important;
    box-shadow:0 7px 15px rgba(35,138,74,.24),0 2px 4px rgba(42,35,29,.10)!important;
    filter:none;
  }
  60%{
    background:#238a4a!important;
    color:#fff!important;
    transform:translateY(-3px) scale(.95)!important;
    box-shadow:0 0 0 5px rgba(35,138,74,.22),0 3px 9px rgba(25,91,51,.20)!important;
    filter:brightness(.96);
  }
  76%{
    background:#7ee29d!important;
    color:#123d22!important;
    transform:translateY(-3px) scale(1.05)!important;
    box-shadow:0 0 0 6px rgba(72,190,111,.24),0 7px 18px rgba(35,138,74,.22)!important;
    filter:brightness(1.08);
  }
  100%{
    background:#34a85e!important;
    color:#fff!important;
    transform:translateY(-3px) scale(1.02)!important;
    box-shadow:0 7px 17px rgba(35,138,74,.28),0 2px 4px rgba(42,35,29,.10)!important;
    filter:none;
  }
}

#quadsPanel .quads-tile.correct-lift{
  /* Keep the success state green after .correct-blink is removed.
     This must override the still-present .selected coral !important rule. */
  background:#34a85e!important;
  color:#fff!important;
  box-shadow:0 7px 17px rgba(35,138,74,.28),0 2px 4px rgba(42,35,29,.10)!important;
  animation:incommonCorrectLiftV2 .30s cubic-bezier(.2,.75,.25,1) both!important;
}

@keyframes incommonCorrectLiftV2{
  0%{
    opacity:1;
    background:#34a85e!important;
    color:#fff!important;
    transform:translateY(-3px) scale(1.02);
  }
  45%{
    opacity:1;
    background:#34a85e!important;
    color:#fff!important;
    transform:translateY(-9px) scale(1.025);
  }
  100%{
    opacity:0;
    background:#34a85e!important;
    color:#fff!important;
    transform:translateY(-26px) scale(.94);
  }
}

@media(prefers-reduced-motion:reduce){
  #quadsPanel .quads-tile.correct-blink,
  #quadsPanel .quads-tile.correct-lift{
    animation:none!important;
  }
}

/* =========================================================
   V100.22 — INCOMMON COMPLETION POLISH
   One-time solved-row bounce + top-right solved stamp.
   ========================================================= */

#quadsPanel{
  position:relative;
}

/* Successful completion becomes a compact rubber-stamp style badge rather
   than another quiet status line in the normal flow. */
#quadsPanel #quadsStatus:has(.quads-solved-stamp){
  min-height:0!important;
  margin:0!important;
}

#quadsPanel .quads-solved-stamp{
  position:absolute;
  z-index:8;
  top:58px;
  right:4px;
  width:auto;
  max-width:none;
  margin:0;
  padding:7px 11px 6px;
  border:2px solid #3f8f5d;
  border-radius:7px;
  color:#3f8f5d;
  background:rgba(255,255,255,.94);
  box-shadow:
    inset 0 0 0 2px rgba(63,143,93,.12),
    0 2px 6px rgba(34,70,46,.08);
  text-align:center;
  text-transform:uppercase;
  transform:rotate(-4deg);
  pointer-events:none;
  line-height:1;
}

#quadsPanel .quads-solved-stamp strong{
  display:block;
  font-size:20px;
  line-height:.95;
  font-weight:900;
  letter-spacing:.115em;
}

#quadsPanel .quads-solved-stamp span{
  display:block;
  margin-top:5px;
  font-size:8px;
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
  white-space:nowrap;
}

@media(max-width:700px){
  #quadsPanel .quads-solved-stamp{
    top:55px;
    right:0;
    padding:6px 8px 5px;
    transform:rotate(-3deg) scale(.90);
    transform-origin:top right;
  }
  #quadsPanel .quads-solved-stamp strong{
    font-size:18px;
  }
  #quadsPanel .quads-solved-stamp span{
    font-size:7px;
  }
}

/* =========================================================
   V100.23 — INCOMMON SOLVED STAMP POSITION + SCALE
   ========================================================= */
#quadsPanel .quads-solved-stamp{
  /* Move left by approximately one full stamp width, enlarge 50%,
     and rotate 35 degrees clockwise. */
  right:118px!important;
  transform:rotate(35deg) scale(1.5)!important;
  transform-origin:top right!important;
}

@media(max-width:700px){
  #quadsPanel .quads-solved-stamp{
    right:92px!important;
    transform:rotate(35deg) scale(1.35)!important;
    transform-origin:top right!important;
  }
}

/* =========================================================
   V100.24 — INCOMMON SOLVED STAMP FINAL POSITION TUNING
   ========================================================= */
#quadsPanel .quads-solved-stamp{
  top:158px!important;
  transform:rotate(35deg) scale(1.35)!important;
}

@media(max-width:700px){
  #quadsPanel .quads-solved-stamp{
    top:155px!important;
    transform:rotate(35deg) scale(1.215)!important;
  }
}

/* =========================================================
   V100.25 — INCOMMON SOLVED STAMP TRANSPARENCY + POSITION
   ========================================================= */
#quadsPanel .quads-solved-stamp{
  top:178px!important;
  /* Previous fill opacity was .94. Reduce opacity by 60% => .376. */
  background:rgba(255,255,255,.376)!important;
}

@media(max-width:700px){
  #quadsPanel .quads-solved-stamp{
    top:175px!important;
  }
}

/* =========================================================
   V100.26 — INCOMMON SOLVED STAMP TYPE
   ========================================================= */
#quadsPanel .quads-solved-stamp{
  background:transparent!important;
}

#quadsPanel .quads-solved-stamp strong{
  font-family:"Special Elite","Courier New",monospace!important;
  font-weight:400!important;
}

/* =========================================================
   V100.27 — INCOMMON FINAL WIN SEQUENCE
   Final category bounce -> four-group celebration -> stamp -> modal.
   ========================================================= */

/* Stamp typography and ink. Supporting copy intentionally remains unchanged. */
#quadsPanel .quads-solved-stamp{
  border-color:#111!important;
  color:#111!important;
  box-shadow:
    inset 0 0 0 2px rgba(17,17,17,.10),
    0 2px 6px rgba(0,0,0,.06)!important;
}
#quadsPanel .quads-solved-stamp strong{
  font-size:24px!important; /* +4px from V100.26 */
}

/* All four completed groups make one restrained collective "victory" motion. */
#quadsPanel .quads-solved-row.all-groups-celebrate{
  animation:incommonAllGroupsCelebrate .62s cubic-bezier(.18,.88,.24,1.16) both!important;
}
@keyframes incommonAllGroupsCelebrate{
  0%{transform:translateY(0) scale(1);filter:brightness(1)}
  26%{transform:translateY(-5px) scale(1.012);filter:brightness(1.055)}
  50%{transform:translateY(1.5px) scale(.996);filter:brightness(1.02)}
  72%{transform:translateY(-2px) scale(1.006);filter:brightness(1.035)}
  100%{transform:translateY(0) scale(1);filter:brightness(1)}
}

/* The stamp arrives as the final punctuation mark before the modal. */
#quadsPanel .quads-solved-stamp.stamp-enter{
  animation:incommonStampLand .62s cubic-bezier(.16,.9,.24,1.18) both!important;
}
@keyframes incommonStampLand{
  0%{opacity:0;transform:rotate(35deg) scale(1.78)}
  48%{opacity:1;transform:rotate(35deg) scale(1.24)}
  70%{transform:rotate(35deg) scale(1.41)}
  86%{transform:rotate(35deg) scale(1.32)}
  100%{opacity:1;transform:rotate(35deg) scale(1.35)}
}

@media(max-width:700px){
  #quadsPanel .quads-solved-stamp strong{
    font-size:22px!important;
  }
  @keyframes incommonStampLand{
    0%{opacity:0;transform:rotate(35deg) scale(1.60)}
    48%{opacity:1;transform:rotate(35deg) scale(1.11)}
    70%{transform:rotate(35deg) scale(1.27)}
    86%{transform:rotate(35deg) scale(1.19)}
    100%{opacity:1;transform:rotate(35deg) scale(1.215)}
  }
}

@media(prefers-reduced-motion:reduce){
  #quadsPanel .quads-solved-row.all-groups-celebrate,
  #quadsPanel .quads-solved-stamp.stamp-enter{
    animation:none!important;
  }
}

/* =========================================================
   V100.28 — INCOMMON FINAL-SEQUENCE LAYOUT + STAMP MOTION FIX
   ========================================================= */

/* Hold the status area at its true completed-game geometry before the fourth
   category lands. This means the category boxes animate exactly where they
   will remain after the sequence instead of jumping when the stamp appears. */
#quadsPanel #quadsStatus.quads-final-sequence{
  min-height:0!important;
  margin:0!important;
}

/* V100.27's transform animation was being defeated by the stamp's existing
   transform !important rules. Animate the independent translate/scale
   properties instead, so the whole physical stamp visibly lands while
   preserving its 35-degree rotation and final positioned transform. */
#quadsPanel .quads-solved-stamp.stamp-enter{
  animation:incommonStampLandV2 .68s cubic-bezier(.15,.86,.22,1.18) both!important;
  transform:rotate(35deg) scale(1.35)!important;
  transform-origin:center!important;
}

@keyframes incommonStampLandV2{
  0%{
    opacity:0;
    translate:0 -34px;
    scale:1.42;
    filter:blur(1.2px);
  }
  42%{
    opacity:1;
    translate:0 5px;
    scale:.92;
    filter:blur(0);
  }
  62%{
    translate:0 -3px;
    scale:1.06;
  }
  80%{
    translate:0 1px;
    scale:.98;
  }
  100%{
    opacity:1;
    translate:0 0;
    scale:1;
    filter:none;
  }
}

@media(max-width:700px){
  #quadsPanel .quads-solved-stamp.stamp-enter{
    transform:rotate(35deg) scale(1.215)!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #quadsPanel .quads-solved-stamp.stamp-enter{
    animation:none!important;
    opacity:1!important;
    translate:0 0!important;
    scale:1!important;
    filter:none!important;
  }
}

/* =========================================================
   V100.29 — INCOMMON STAMP RESTING-POSITION + MODAL FIX
   ========================================================= */

/* Keep the stamp at its exact final coordinates for every animation frame.
   The prior motion changed its apparent location because translate/scale were
   animated independently around the rotated element. */
#quadsPanel .quads-solved-stamp.stamp-enter{
  transform:rotate(35deg) scale(1.35)!important;
  transform-origin:top right!important;
  translate:none!important;
  scale:none!important;
  animation:incommonStampInkReveal .68s cubic-bezier(.2,.8,.2,1) both!important;
}

@keyframes incommonStampInkReveal{
  0%{
    opacity:0;
    clip-path:inset(48% 46% 48% 46%);
    filter:blur(1.3px) contrast(1.15);
    box-shadow:
      inset 0 0 0 2px rgba(17,17,17,.02),
      0 0 0 0 rgba(17,17,17,0)!important;
  }
  34%{
    opacity:1;
    clip-path:inset(5% 4% 5% 4%);
    filter:blur(0) contrast(1.2);
    box-shadow:
      inset 0 0 0 2px rgba(17,17,17,.16),
      0 0 0 5px rgba(17,17,17,.11)!important;
  }
  56%{
    clip-path:inset(0);
    filter:contrast(1.05);
    box-shadow:
      inset 0 0 0 2px rgba(17,17,17,.12),
      0 0 0 2px rgba(17,17,17,.05)!important;
  }
  76%{
    filter:contrast(1.12);
    box-shadow:
      inset 0 0 0 2px rgba(17,17,17,.13),
      0 0 0 4px rgba(17,17,17,.08)!important;
  }
  100%{
    opacity:1;
    clip-path:inset(0);
    filter:none;
    box-shadow:
      inset 0 0 0 2px rgba(17,17,17,.10),
      0 2px 6px rgba(0,0,0,.06)!important;
  }
}

@media(max-width:700px){
  #quadsPanel .quads-solved-stamp.stamp-enter{
    transform:rotate(35deg) scale(1.215)!important;
    transform-origin:top right!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #quadsPanel .quads-solved-stamp.stamp-enter{
    animation:none!important;
    opacity:1!important;
    clip-path:none!important;
    filter:none!important;
  }
}

/* =========================================================
   V100.30 — INCOMMON END RESULT IN INSTRUCTION LINE
   ========================================================= */
#quadsPanel #quadsInstructions.quads-end-result{
  font-size:20px!important;
  line-height:1.2!important;
  font-weight:900!important;
  color:#202322!important;
}

@media(max-width:700px){
  #quadsPanel #quadsInstructions.quads-end-result{
    font-size:18px!important;
  }
}

/* =========================================================
   V100.31 — INCOMMON RESULT TYPE + SPACING
   ========================================================= */
#quadsPanel #quadsInstructions.quads-end-result{
  font-family:"Special Elite","Courier New",monospace!important;
  margin-bottom:-20px!important;
}

/* =========================================================
   V100.32 — INCOMMON RESULT BOX + MOBILE TILE TEXT FIT
   ========================================================= */

/* The ordinary instruction is untouched. These styles apply only after
   the puzzle has ended. */
#quadsPanel #quadsInstructions.quads-end-result{
  box-sizing:border-box;
  width:fit-content;
  max-width:100%;
  min-height:0!important;
  padding:9px 14px 8px!important;
  border:4px solid #111!important;
  border-radius:12px!important;
  color:#fff!important;
  text-align:center;
}

#quadsPanel #quadsInstructions.quads-end-result.quads-win-result{
  background:#3f8f5d!important;
}

#quadsPanel #quadsInstructions.quads-end-result.quads-loss-result{
  background:#b7473d!important;
}

/* InCommon tile text must stay inside narrow mobile cards.
   Phrases may wrap at their spaces; long single words stay on one line
   and step down in size only when needed. */
#quadsPanel .quads-tile{
  min-width:0;
  overflow:hidden;
  text-align:center;
}

#quadsPanel .quads-tile.quads-tile-phrase{
  white-space:normal!important;
  overflow-wrap:normal;
  word-break:normal;
  line-height:1.12;
}

@media(max-width:700px){
  #quadsPanel .quads-tile.quads-tile-long{
    font-size:clamp(10px,3.25vw,13px)!important;
    white-space:nowrap!important;
  }

  #quadsPanel .quads-tile.quads-tile-very-long{
    font-size:clamp(8.5px,2.85vw,12px)!important;
    letter-spacing:-.015em;
    white-space:nowrap!important;
  }

  #quadsPanel .quads-tile.quads-tile-phrase{
    font-size:clamp(10px,3.35vw,13px)!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }

  #quadsPanel #quadsInstructions.quads-end-result{
    padding:8px 11px 7px!important;
    border-width:4px!important;
    border-radius:11px!important;
  }
}

@media(max-width:360px){
  #quadsPanel .quads-tile.quads-tile-long{
    font-size:10px!important;
  }
  #quadsPanel .quads-tile.quads-tile-very-long{
    font-size:8.5px!important;
  }
  #quadsPanel .quads-tile.quads-tile-phrase{
    font-size:10px!important;
  }
}

/* =========================================================
   V100.33 — INCOMMON INTEGRATED RESULT ROW
   ========================================================= */

/* Replace the heavy bordered alert treatment with a result surface that
   belongs to the same visual family as the solved category rows. */
#quadsPanel #quadsInstructions.quads-end-result{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
  min-height:58px!important;
  margin:0 0 0!important;
  padding:10px 14px 9px!important;
  border:0!important;
  border-radius:12px!important;
  color:#fff!important;
  text-align:center!important;
  box-shadow:
    0 5px 12px rgba(35,43,38,.12),
    0 1px 3px rgba(35,43,38,.08)!important;
  animation:incommonResultRowEnter .22s cubic-bezier(.2,.8,.25,1) both;
}

#quadsPanel #quadsInstructions.quads-end-result.quads-win-result{
  background:#4f9164!important;
}

#quadsPanel #quadsInstructions.quads-end-result.quads-loss-result{
  background:#a95f52!important;
}

#quadsPanel #quadsInstructions.quads-end-result strong{
  display:block;
  margin:0;
  font-family:"Special Elite","Courier New",monospace!important;
  font-size:24px!important;
  line-height:1!important;
  font-weight:400!important;
  letter-spacing:.04em!important;
  color:#fff!important;
}

#quadsPanel #quadsInstructions.quads-end-result span{
  display:block;
  margin-top:4px;
  font-family:Lato,system-ui,sans-serif!important;
  font-size:13px!important;
  line-height:1.15!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
  color:rgba(255,255,255,.96)!important;
}

@keyframes incommonResultRowEnter{
  0%{opacity:0;transform:translateY(4px)}
  100%{opacity:1;transform:translateY(0)}
}

@media(max-width:700px){
  #quadsPanel #quadsInstructions.quads-end-result{
    min-height:54px!important;
    padding:9px 12px 8px!important;
    border-radius:11px!important;
  }

  #quadsPanel #quadsInstructions.quads-end-result strong{
    font-size:21px!important;
  }

  #quadsPanel #quadsInstructions.quads-end-result span{
    font-size:12px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #quadsPanel #quadsInstructions.quads-end-result{
    animation:none!important;
  }
}

/* =========================================================
   V100.34 — INCOMMON COMPACT RESULT BANNER
   ========================================================= */

/* Size the result surface to its content instead of the solved-row width.
   Keep 20px of horizontal breathing room around the longest text line. */
#quadsPanel #quadsInstructions.quads-end-result{
  width:fit-content!important;
  max-width:calc(100% - 16px)!important;
  align-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:20px!important;
  padding-right:20px!important;
}

@media(max-width:700px){
  #quadsPanel #quadsInstructions.quads-end-result{
    width:fit-content!important;
    max-width:calc(100% - 12px)!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }
}

/* =========================================================
   V100.35 — INCOMMON RESULT BANNER SIDE PADDING
   ========================================================= */

/* V100.34 used 20px per side. Add 100px more to each side. */
#quadsPanel #quadsInstructions.quads-end-result{
  padding-left:120px!important;
  padding-right:120px!important;
}

@media(max-width:700px){
  #quadsPanel #quadsInstructions.quads-end-result{
    padding-left:120px!important;
    padding-right:120px!important;
  }
}

/* =========================================================
   V100.36 — INCOMMON RESULT BANNER GAP
   ========================================================= */

/* Explicit final spacing between the completion banner and solved puzzle. */
#quadsPanel #quadsInstructions.quads-end-result{
  margin-bottom:15px!important;
}

/* =========================================================
   V100.37 — INCOMMON RESULT BANNER CLOSER SPACING
   ========================================================= */

/* The surrounding layout already contributes vertical spacing.
   Use a negative margin to reduce that existing gap rather than add to it. */
#quadsPanel #quadsInstructions.quads-end-result{
  margin-bottom:-15px!important;
}

/* =========================================================
   V100.38 — INCOMMON END-STATE BLOCK POSITION
   ========================================================= */

/* Move the completion banner and all content below it down together,
   without changing the approved banner-to-finished-puzzle spacing. */
#quadsPanel #quadsInstructions.quads-end-result{
  margin-top:20px!important;
}

/* V100.39 — universal game timer */
.puzzle-timer-row{box-sizing:border-box;width:100%;min-height:18px;margin:2px 0;padding:0 2px;display:flex;justify-content:flex-end;align-items:center;pointer-events:none}
.puzzle-live-timer{font-family:Lato,system-ui,sans-serif;font-size:15px;line-height:18px;font-weight:600;color:#646b67;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;letter-spacing:.01em}
.puzzle-live-timer.timer-complete{color:#4f5652}
@media(max-width:700px){.puzzle-timer-row{min-height:17px;margin:1px 0 2px;padding:0 1px}.puzzle-live-timer{font-size:14px;line-height:17px}}

/* =========================================================
   V100.40 — TIMER VISIBILITY TOGGLE + ELL COMPLETION BONUS
   ========================================================= */

.puzzle-live-timer{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  margin:0;
  padding:0 2px;
  min-width:34px;
  min-height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  cursor:pointer;
  border-radius:8px;
}
.puzzle-live-timer:hover{
  background:rgba(50,58,53,.055);
}
.puzzle-live-timer:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}
.puzzle-live-timer.timer-hidden{
  justify-content:center;
}
.puzzle-timer-clock{
  position:relative;
  display:block;
  width:16px;
  height:16px;
  box-sizing:border-box;
  border:1.8px solid #646b67;
  border-radius:50%;
}
.puzzle-timer-clock::before{
  content:"";
  position:absolute;
  left:6.25px;
  top:3px;
  width:1.6px;
  height:4.2px;
  border-radius:1px;
  background:#646b67;
  transform-origin:50% 100%;
}
.puzzle-timer-clock::after{
  content:"";
  position:absolute;
  left:6.25px;
  top:6.5px;
  width:4px;
  height:1.6px;
  border-radius:1px;
  background:#646b67;
  transform-origin:0 50%;
  transform:rotate(24deg);
}
.ell-score-bonus{
  font-size:.9em;
  font-weight:600;
  opacity:.76;
  white-space:nowrap;
}
@media(max-width:700px){
  .puzzle-live-timer{
    min-width:32px;
    min-height:28px;
  }
}
@media(hover:none){
  .puzzle-live-timer:hover{background:transparent}
}

/* =========================================================
   V100.41 — TIMER TOGGLE FIX + METADATA ALIGNMENT
   ========================================================= */

/* Shared header/timer geometry. The game title keeps a stable left edge;
   the metadata column and timer share the same right edge. */
#fivePanel,
#samePanel,
#quadsPanel,
#wordTrailPanel,
#ellPanel{
  --game-meta-width: 620px;
}

#miniPanel{
  --game-meta-width: 820px;
}

/* Let each clean header use the same adaptive width as its timer row. */
#fivePanel .game-clean-head,
#samePanel .game-clean-head,
#quadsPanel .game-clean-head,
#wordTrailPanel .game-clean-head,
#ellPanel .game-clean-head,
#miniPanel .game-clean-head{
  width:min(100%,var(--game-meta-width))!important;
  max-width:var(--game-meta-width)!important;
  box-sizing:border-box!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Keep the title visually anchored in the same left position while allowing
   Daily Crossword's metadata to extend farther right. */
#miniPanel .game-clean-head{
  --game-title-shared-left:0px;
}

/* Timer occupies its own row, but exactly matches the header width/right edge. */
.puzzle-timer-row{
  width:min(100%,var(--game-meta-width,620px))!important;
  max-width:var(--game-meta-width,620px)!important;
  margin:1px auto 2px!important;
  padding:0!important;
  min-height:28px!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  box-sizing:border-box!important;
  pointer-events:auto!important;
}

/* Bare icon/time: remove browser/button box treatment completely. */
.puzzle-live-timer{
  -webkit-appearance:none!important;
  appearance:none!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0!important;
  min-width:32px!important;
  min-height:28px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  border-radius:0!important;
  cursor:pointer!important;
  color:#646b67!important;
  font-family:Lato,system-ui,sans-serif!important;
  font-size:15px!important;
  line-height:18px!important;
  font-weight:600!important;
  font-variant-numeric:tabular-nums!important;
  font-feature-settings:"tnum" 1!important;
  letter-spacing:.01em!important;
}
.puzzle-live-timer:hover,
.puzzle-live-timer:active{
  background:transparent!important;
  box-shadow:none!important;
}
.puzzle-live-timer:focus-visible{
  outline:1.5px solid #8a918d!important;
  outline-offset:3px!important;
  border-radius:4px!important;
}
.puzzle-live-timer.timer-hidden{
  justify-content:flex-end!important;
}

.puzzle-timer-clock::before{
  content:"";
  position:absolute;
  left:6.25px;
  top:3px;
  width:1.6px;
  height:4.2px;
  border-radius:1px;
  background:#646b67;
}


/* Daily Crossword gets the wider header/timer frame so the metadata belongs
   visually to the wide crossword area instead of appearing stranded inward. */
@media(min-width:701px){
  #miniPanel{
    --game-meta-width:860px;
  }
}

/* Mobile: all games collapse to available width while retaining shared right alignment. */
@media(max-width:700px){
  #fivePanel,
  #samePanel,
  #quadsPanel,
  #wordTrailPanel,
  #ellPanel,
  #miniPanel{
    --game-meta-width:100%;
  }

  #fivePanel .game-clean-head,
  #samePanel .game-clean-head,
  #quadsPanel .game-clean-head,
  #wordTrailPanel .game-clean-head,
  #ellPanel .game-clean-head,
  #miniPanel .game-clean-head,
  .puzzle-timer-row{
    width:100%!important;
    max-width:100%!important;
  }

  .puzzle-live-timer{
    font-size:14px!important;
  }
}

/* =========================================================
   V100.42 — TIMER / PUZZLE META RIGHT-EDGE MICRO ALIGNMENT
   ========================================================= */

/* The timer's glyph/text was visually extending about one character farther
   right than the puzzle ID/date above it. Pull the timer inward slightly so
   their perceived right edges line up. */
.puzzle-live-timer{
  margin-right:8px!important;
}

/* =========================================================
   V100.43 — INCOMMON HEADER WIDTH MATCH
   ========================================================= */

/* InCommon uses a wider puzzle surface, so let its header/timer frame
   extend to the puzzle width just like Daily Crossword. */
@media(min-width:701px){
  #quadsPanel{
    --game-meta-width:860px;
  }
}

/* =========================================================
   V100.44 — MOBILE HEADER WIDTH + INCOMMON EXACT WIDTH
   ========================================================= */

/* MOBILE
   Use the full game-content width for the clean header and timer row.
   The prior 100% frame was still inheriting horizontal positioning that
   made the title feel inset. These rules align both rows to the same
   content gutters and make the title/metadata feel properly spread. */
@media(max-width:700px){
  #fivePanel .game-clean-head,
  #samePanel .game-clean-head,
  #quadsPanel .game-clean-head,
  #wordTrailPanel .game-clean-head,
  #ellPanel .game-clean-head,
  #miniPanel .game-clean-head,
  #fivePanel .puzzle-timer-row,
  #samePanel .puzzle-timer-row,
  #quadsPanel .puzzle-timer-row,
  #wordTrailPanel .puzzle-timer-row,
  #ellPanel .puzzle-timer-row,
  #miniPanel .puzzle-timer-row{
    width:calc(100% + 16px)!important;
    max-width:calc(100% + 16px)!important;
    margin-left:-8px!important;
    margin-right:-8px!important;
    box-sizing:border-box!important;
  }

  /* Pull the game name back toward the left edge without disturbing
     the fixed right-side metadata position. */
  #fivePanel .game-clean-head > :first-child,
  #samePanel .game-clean-head > :first-child,
  #quadsPanel .game-clean-head > :first-child,
  #wordTrailPanel .game-clean-head > :first-child,
  #ellPanel .game-clean-head > :first-child,
  #miniPanel .game-clean-head > :first-child{
    margin-left:0!important;
  }

  /* Match timer right edge to puzzle ID/date on mobile.
     Desktop keeps the 8px optical correction from V100.42. */
  .puzzle-live-timer{
    margin-right:0!important;
  }
}

/* DESKTOP INCOMMON
   Match its header/timer frame to the actual InCommon board width,
   rather than the broader Daily Crossword frame. */
@media(min-width:701px){
  #quadsPanel{
    --game-meta-width:720px;
  }
}

/* =========================================================
   V100.45 — MOBILE TIMER RIGHT-EDGE ALIGNMENT
   ========================================================= */

/* V100.44 widened the mobile header frame by 8px per side.
   The header's own metadata retains an internal right inset, while the
   separate timer row did not. Give the timer the same optical inset so
   the clock/time ends exactly under the Puzzle ID/date instead of at
   the viewport edge. */
@media(max-width:700px){
  .puzzle-live-timer{
    margin-right:8px!important;
  }
}

/* V100.46 — mobile timer optical alignment: one more character left */
@media(max-width:700px){
  .puzzle-live-timer{
    margin-right:16px!important;
  }
}

/* =========================================================
   V100.47 — DAILY CROSSWORD UNIFIED 5x5 / 6x6 FOOTPRINT
   ========================================================= */

/* Desktop: both crossword sizes occupy the same board footprint.
   The 6x6 therefore uses smaller cells rather than making the overall
   crossword wider/taller. This keeps the header geometry stable when
   navigating between 5x5 and 6x6 puzzles. */
@media(min-width:701px){
  #miniPanel .mini-grid{
    width:420px!important;
    height:420px!important;
    max-width:420px!important;
    max-height:420px!important;
    aspect-ratio:1 / 1!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  #miniPanel .mini-cell{
    min-width:0!important;
    min-height:0!important;
  }
}

/* =========================================================
   V100.49 — DAILY CROSSWORD TRUE SHARED FOOTPRINT
   ========================================================= */

/* Desktop only. The Daily Crossword header is 860px wide.
   The complete crossword composition — grid + gap + clues — now uses
   that same 860px footprint for BOTH puzzle formats.

   Importantly, the grid is NOT stretched with width/height overrides.
   Its actual CSS tracks/cells are sized directly, keeping borders and
   cell geometry crisp. */
@media(min-width:701px){

  #miniPanel{
    --game-meta-width:860px;
    --mini-board-cell:75px;
  }

  #miniPanel.mini-size-6{
    --mini-board-cell:62.5px;
  }

  #miniPanel .mini-layout{
    width:min(100%,860px)!important;
    max-width:860px!important;
    grid-template-columns:
      max-content
      minmax(0,445px)!important;
    gap:40px!important;
    justify-content:center!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  #miniPanel .mini-player-grid{
    width:auto!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    grid-template-columns:
      repeat(var(--mini-cols),var(--mini-board-cell))!important;
    grid-template-rows:
      repeat(var(--mini-rows),var(--mini-board-cell))!important;
    box-sizing:content-box!important;
  }

  #miniPanel .mini-cell{
    width:var(--mini-board-cell)!important;
    height:var(--mini-board-cell)!important;
    min-width:var(--mini-board-cell)!important;
    min-height:var(--mini-board-cell)!important;
    box-sizing:border-box!important;
  }

  #miniPanel.mini-size-5 .mini-letter{
    font-size:38px!important;
  }

  #miniPanel.mini-size-6 .mini-letter{
    font-size:32px!important;
    padding-top:5px!important;
  }

  #miniPanel .mini-clues{
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}

/* Slightly narrower desktop windows: preserve the same relationship
   without allowing the crossword composition to spill past the panel. */
@media(min-width:701px) and (max-width:920px){
  #miniPanel .mini-layout{
    width:100%!important;
    grid-template-columns:max-content minmax(0,1fr)!important;
    gap:28px!important;
  }
}


/* =========================================================
   V100.50 — MOBILE INITIAL SIX-TO-FIVE FIT + CROSSWORD NUDGE
   ========================================================= */

@media(max-width:700px){
  /* Move the Daily Crossword grid itself upward by 6px without changing
     its dimensions, clue placement, keyboard position, or layout footprint. */
  #miniPanel .mini-player-grid{
    position:relative!important;
    top:-6px!important;
  }
}


/* =========================================================
   V100.51 — DESKTOP SCROLLBAR-GUTTER STABILITY
   ========================================================= */

/* Reserve vertical scrollbar space consistently on desktop so switching
   between games cannot cause the centered header, navigation, or game
   container to shift horizontally when page height crosses the scrollbar
   threshold. Mobile is left unchanged. */
@media(min-width:701px){
  html{
    scrollbar-gutter:stable;
  }
}


/* =========================================================
   V100.52 — SITE-HEADER HOW-TO-PLAY BUTTON + DYNAMIC PANEL
   ========================================================= */

.site-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:3px;
  margin-left:auto;
}

.game-instructions-btn{
  appearance:none;
  -webkit-appearance:none;
  width:40px;
  height:40px;
  min-width:40px;
  padding:8px!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#4e5651!important;
  box-shadow:none!important;
  cursor:pointer;
}
.game-instructions-btn[hidden]{display:none!important}
.game-instructions-btn:hover,
.game-instructions-btn:active{
  transform:none!important;
  background:rgba(50,58,53,.055)!important;
  box-shadow:none!important;
}
.game-instructions-btn:focus-visible{
  outline:2px solid #747c77;
  outline-offset:1px;
}
.game-instructions-icon{
  display:block;
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}
.game-instructions-icon .info-dot{
  fill:currentColor;
  stroke:none;
}

.game-instructions-overlay[hidden]{display:none!important}
.game-instructions-overlay{
  position:fixed;
  inset:0;
  z-index:220;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  padding:24px;
  background:rgba(24,29,26,.34);
}
.game-instructions-card{
  position:relative;
  box-sizing:border-box;
  width:min(560px,100%);
  max-height:min(720px,calc(100dvh - 48px));
  overflow:auto;
  padding:0;
  border:0;
  border-radius:18px;
  background:#fff;
  box-shadow:0 20px 60px rgba(24,30,26,.20),0 3px 10px rgba(24,30,26,.08);
}
.game-instructions-content{
  padding:30px 34px 32px;
}
.game-instructions-close{
  position:absolute;
  z-index:2;
  top:13px;
  right:14px;
  width:36px;
  height:36px;
  padding:0!important;
  display:grid;
  place-items:center;
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  color:#5b625e!important;
  box-shadow:none!important;
  font:400 28px/1 Lato,system-ui,sans-serif!important;
  cursor:pointer;
}
.game-instructions-close:hover,
.game-instructions-close:active{
  transform:none!important;
  background:#f1f3f0!important;
  box-shadow:none!important;
}
.game-instructions-kicker{
  margin:0 44px 7px 0;
  color:#7b837e;
  font:900 11px/1.2 Lato,system-ui,sans-serif;
  letter-spacing:.12em;
}
.game-instructions-content h2{
  margin:0 44px 20px 0;
  color:#242926;
  font:900 27px/1.12 Lato,system-ui,sans-serif;
  letter-spacing:-.025em;
}
.game-instructions-body{
  color:#414844;
  font:400 15px/1.55 Lato,system-ui,sans-serif;
}
.game-instructions-body p{
  margin:0 0 15px;
}
.game-instructions-body p:last-child{margin-bottom:0}
.game-instructions-body strong{font-weight:900;color:#2e3430}
.instructions-goal{
  margin-top:20px!important;
  padding-top:16px;
  border-top:1px solid #e7e9e6;
}
.instructions-legend{
  display:grid;
  gap:8px;
  margin:2px 0 17px;
}
.instructions-legend-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.instructions-swatch{
  flex:0 0 auto;
  width:23px;
  height:23px;
  border-radius:6px;
  box-shadow:0 1px 3px rgba(31,38,33,.12);
}
.instructions-swatch.five-correct{background:#4f9164}
.instructions-swatch.five-present{background:#6f8fa8}
.instructions-swatch.five-absent{background:#252a27}
.instructions-swatch.quads-easy{background:#e98268}
.instructions-swatch.quads-medium{background:#55b7ae}
.instructions-swatch.quads-hard{background:#eea34f}
.instructions-swatch.quads-very-hard{background:#b84f74}
body.instructions-open{overflow:hidden}

@media(max-width:700px){
  .site-header-actions{gap:0}
  .game-instructions-btn{
    width:38px;
    height:38px;
    min-width:38px;
    padding:8px!important;
  }
  .game-instructions-icon{width:20px;height:20px}
  .game-instructions-overlay{
    align-items:flex-end;
    padding:12px 10px max(12px,env(safe-area-inset-bottom));
  }
  .game-instructions-card{
    width:100%;
    max-height:calc(100dvh - 24px - env(safe-area-inset-bottom));
    border-radius:18px 18px 14px 14px;
  }
  .game-instructions-content{
    padding:26px 24px 28px;
  }
  .game-instructions-content h2{
    margin-bottom:17px;
    font-size:24px;
  }
  .game-instructions-body{
    font-size:14.5px;
    line-height:1.5;
  }
  .game-instructions-body p{margin-bottom:13px}
  .instructions-goal{margin-top:17px!important;padding-top:14px}
}


/* =========================================================
   V100.55 — HOMEPAGE TIME STATS + INCOMMON BANNER REFINEMENT
   ========================================================= */

/* Reduce the approved 120px horizontal padding by 25px per side.
   Use square corners and a compact, darker floating shadow. */
#quadsPanel #quadsInstructions.quads-end-result{
  padding-left:95px!important;
  padding-right:95px!important;
  border-radius:0!important;
  box-shadow:0 4px 7px rgba(20,24,22,.32)!important;
}

@media(max-width:700px){
  #quadsPanel #quadsInstructions.quads-end-result{
    padding-left:95px!important;
    padding-right:95px!important;
    border-radius:0!important;
    box-shadow:0 4px 7px rgba(20,24,22,.32)!important;
  }
}


/* =========================================================
   V100.56 — INCOMMON PILL RESULT BANNER
   ========================================================= */

/* Single-line completion pill: retain the darker V100.55 shadow,
   restore rounded geometry, and enlarge the result word by 4px. */
#quadsPanel #quadsInstructions.quads-end-result{
  min-height:0!important;
  padding-top:9px!important;
  padding-bottom:8px!important;
  border-radius:999px!important;
}

#quadsPanel #quadsInstructions.quads-end-result strong{
  font-size:28px!important;
  line-height:1!important;
  font-weight:900!important;
}

#quadsPanel #quadsInstructions.quads-end-result span{
  display:none!important;
}

@media(max-width:700px){
  #quadsPanel #quadsInstructions.quads-end-result{
    min-height:0!important;
    padding-top:9px!important;
    padding-bottom:8px!important;
    border-radius:999px!important;
  }

  #quadsPanel #quadsInstructions.quads-end-result strong{
    font-size:25px!important;
    font-weight:900!important;
  }
}


/* =========================================================
   V100.57 — INCOMMON LATO BLACK PILL
   ========================================================= */

#quadsPanel #quadsInstructions.quads-end-result{
  padding-left:72px!important;
  padding-right:72px!important;
}

#quadsPanel #quadsInstructions.quads-end-result strong{
  font-family:Lato,system-ui,sans-serif!important;
  font-size:28px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  font-style:normal!important;
}

@media(max-width:700px){
  #quadsPanel #quadsInstructions.quads-end-result{
    padding-left:58px!important;
    padding-right:58px!important;
  }

  #quadsPanel #quadsInstructions.quads-end-result strong{
    font-family:Lato,system-ui,sans-serif!important;
    font-size:25px!important;
    font-weight:900!important;
    letter-spacing:.04em!important;
    font-style:normal!important;
  }
}


/* =========================================================
   V100.58 — INCOMMON PILL 1PX BORDER
   ========================================================= */

#quadsPanel #quadsInstructions.quads-end-result{
  border:1px solid #555d58!important;
}


/* =========================================================
   V100.59 — INCOMMON PILL 2PX TINTED BORDER
   ========================================================= */

/* Border uses the result fill hue at 15% opacity. */
#quadsPanel #quadsInstructions.quads-end-result{
  border-width:2px!important;
  border-style:solid!important;
}

#quadsPanel #quadsInstructions.quads-end-result.quads-win-result{
  border-color:rgba(79,145,100,.15)!important;
}

#quadsPanel #quadsInstructions.quads-end-result.quads-loss-result{
  border-color:rgba(169,95,82,.15)!important;
}


/* =========================================================
   V100.60 — INCOMMON ARIAL BLACK RESULT PILL
   ========================================================= */

#quadsPanel #quadsInstructions.quads-end-result strong{
  font-family:"Arial Black",Arial,sans-serif!important;
  font-weight:900!important;
  font-style:normal!important;
  letter-spacing:.025em!important;
}

@media(max-width:700px){
  #quadsPanel #quadsInstructions.quads-end-result strong{
    font-family:"Arial Black",Arial,sans-serif!important;
    font-weight:900!important;
    font-style:normal!important;
    letter-spacing:.025em!important;
  }
}


/* =========================================================
   V100.61 — PUZZLE ARCHIVE HOMEPAGE FEATURE
   ========================================================= */

.home-after{
  margin-top:28px!important;
}
.home-archive-feature{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(260px,.75fr);
  overflow:hidden;
  border-radius:18px;
  background:#fff;
  color:#252a27;
  text-decoration:none;
  box-shadow:0 5px 18px rgba(42,47,43,.09),0 1px 3px rgba(42,47,43,.06);
  transition:transform .18s ease,box-shadow .18s ease;
}
.home-archive-feature:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(42,47,43,.12),0 2px 5px rgba(42,47,43,.07);
}
.home-archive-feature:focus-visible{
  outline:3px solid rgba(79,145,100,.42);
  outline-offset:3px;
}
.home-archive-art{
  min-width:0;
  aspect-ratio:2/1;
  overflow:hidden;
  background:#e8e0d1;
}
.home-archive-art img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.home-archive-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:28px 30px;
}
.home-archive-eyebrow{
  margin-bottom:8px;
  font:900 11px/1 Lato,system-ui,sans-serif;
  letter-spacing:.13em;
  color:#6e776f;
}
.home-archive-copy strong{
  margin-bottom:8px;
  font:900 24px/1.08 Lato,system-ui,sans-serif;
  color:#28352d;
}
.home-archive-copy>span:not(.home-archive-eyebrow):not(.home-archive-cta){
  font:400 14px/1.45 Lato,system-ui,sans-serif;
  color:#68706b;
}
.home-archive-cta{
  margin-top:17px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font:900 14px/1 Lato,system-ui,sans-serif;
  color:#486b57;
}
.home-archive-cta b{
  transition:transform .18s ease;
}
.home-archive-feature:hover .home-archive-cta b{
  transform:translateX(3px);
}
@media(max-width:700px){
  .home-after{margin-top:20px!important}
  .home-archive-feature{
    display:block;
    border-radius:15px;
  }
  .home-archive-art{
    display:block;
    width:100%;
    aspect-ratio:2/1;
  }
  .home-archive-copy{
    padding:18px 18px 19px;
  }
  .home-archive-copy strong{
    font-size:21px;
  }
  .home-archive-cta{
    margin-top:13px;
  }
}


/* =========================================================
   V100.62 — SHORTER HOMEPAGE ARCHIVE FEATURE
   ========================================================= */

@media(min-width:701px){
  .home-archive-feature{
    height:160px;
    grid-template-columns:minmax(0,1.55fr) minmax(260px,.75fr);
  }
  .home-archive-art{
    height:100%;
    aspect-ratio:auto;
  }
  .home-archive-copy{
    padding:18px 26px;
  }
  .home-archive-copy strong{
    font-size:22px;
  }
  .home-archive-cta{
    margin-top:11px;
  }
}

@media(max-width:700px){
  .home-archive-art{
    height:92px;
    aspect-ratio:auto;
  }
  .home-archive-copy{
    padding:14px 16px 15px;
  }
  .home-archive-copy strong{
    margin-bottom:5px;
    font-size:19px;
  }
  .home-archive-copy>span:not(.home-archive-eyebrow):not(.home-archive-cta){
    font-size:13px;
    line-height:1.35;
  }
  .home-archive-eyebrow{
    margin-bottom:6px;
  }
  .home-archive-cta{
    margin-top:10px;
  }
}


/* V100.63 — date navigation restores completed puzzles silently.
   No visual changes in this release. */


/* =========================================================
   V100.64 — HEADER ARCHIVE CALENDAR BUTTON
   ========================================================= */

.archive-header-btn{
  appearance:none;
  -webkit-appearance:none;
  width:40px;
  height:40px;
  min-width:40px;
  padding:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#4e5651;
  text-decoration:none;
  box-shadow:none;
  cursor:pointer;
}
.archive-header-btn:hover,
.archive-header-btn:active{
  transform:none;
  background:rgba(50,58,53,.055);
  box-shadow:none;
}
.archive-header-btn:focus-visible{
  outline:2px solid #747c77;
  outline-offset:1px;
}
.archive-header-icon{
  display:block;
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
@media(max-width:700px){
  .archive-header-btn{
    width:38px;
    height:38px;
    min-width:38px;
    padding:8px;
  }
  .archive-header-icon{
    width:20px;
    height:20px;
  }
}


/* =========================================================
   V100.65 — INCOMMON STATUS BANNER REFINEMENT
   Borrowed only the requested visual ingredients:
   brighter solved green, clean system UI typography, checkmark.
   Existing PuzzleNook pill/banner geometry is preserved.
   ========================================================= */

#quadsPanel #quadsInstructions.quads-end-result.quads-win-result{
  background:#10b981!important;
  border-color:rgba(16,185,129,.15)!important;
}

#quadsPanel #quadsInstructions.quads-end-result strong{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-weight:700!important;
  letter-spacing:.05em!important;
}

#quadsPanel #quadsInstructions.quads-end-result .quads-status-label{
  display:inline!important;
  margin:0!important;
  font:inherit!important;
  letter-spacing:inherit!important;
  color:inherit!important;
}

#quadsPanel #quadsInstructions.quads-end-result .quads-status-check{
  display:block!important;
  width:16px!important;
  height:16px!important;
  flex:0 0 auto!important;
  margin:0!important;
  overflow:visible;
  color:#fff;
}

@media(max-width:700px){
  #quadsPanel #quadsInstructions.quads-end-result strong{
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
    font-weight:700!important;
    letter-spacing:.05em!important;
  }
  #quadsPanel #quadsInstructions.quads-end-result .quads-status-check{
    width:15px!important;
    height:15px!important;
  }
}


/* =========================================================
   V100.66 — INCOMMON SMALLER STATUS PILL
   ========================================================= */

/* Roughly 20% smaller overall footprint than V100.65. */
#quadsPanel #quadsInstructions.quads-end-result{
  padding-left:58px!important;
  padding-right:58px!important;
  padding-top:7px!important;
  padding-bottom:6px!important;
}

#quadsPanel #quadsInstructions.quads-end-result strong{
  font-size:25px!important; /* 28px -> 25px */
}

#quadsPanel #quadsInstructions.quads-end-result .quads-status-check{
  width:13px!important;
  height:13px!important;
}

@media(max-width:700px){
  #quadsPanel #quadsInstructions.quads-end-result{
    padding-left:46px!important;
    padding-right:46px!important;
    padding-top:7px!important;
    padding-bottom:6px!important;
  }
  #quadsPanel #quadsInstructions.quads-end-result strong{
    font-size:22px!important; /* 25px -> 22px */
  }
  #quadsPanel #quadsInstructions.quads-end-result .quads-status-check{
    width:12px!important;
    height:12px!important;
  }
}


/* =========================================================
   V100.67 — INCOMMON CENTERED + THINNER STATUS PILL
   ========================================================= */

#quadsPanel #quadsInstructions.quads-end-result{
  padding-top:5px!important;
  padding-bottom:4px!important;
  line-height:1!important;
}

#quadsPanel #quadsInstructions.quads-end-result strong{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  margin:0!important;
}

#quadsPanel #quadsInstructions.quads-end-result .quads-status-label{
  display:inline-flex!important;
  align-items:center!important;
  line-height:1!important;
  margin:0!important;
}

@media(max-width:700px){
  #quadsPanel #quadsInstructions.quads-end-result{
    padding-top:5px!important;
    padding-bottom:4px!important;
  }
}


/* =========================================================
   V100.68 — INCOMMON DARK GREEN SOLVED TEXT
   ========================================================= */

#quadsPanel #quadsInstructions.quads-end-result.quads-win-result,
#quadsPanel #quadsInstructions.quads-end-result.quads-win-result strong,
#quadsPanel #quadsInstructions.quads-end-result.quads-win-result .quads-status-label,
#quadsPanel #quadsInstructions.quads-end-result.quads-win-result .quads-status-check{
  color:#064e3b!important;
}


/* =========================================================
   V100.69 — INCOMMON SOLVED BORDER + 60% BACKFILL
   ========================================================= */

#quadsPanel #quadsInstructions.quads-end-result.quads-win-result{
  background:rgba(16,185,129,.60)!important;
  border:2px solid #064e3b!important;
}


/* =========================================================
   V100.70 — INCOMMON SOLVED BORDER 7% TRANSPARENCY
   ========================================================= */

#quadsPanel #quadsInstructions.quads-end-result.quads-win-result{
  border-color:rgba(6,78,59,.93)!important;
}


/* =========================================================
   V100.71 — INCOMMON SOLVED INK AT 55% OPACITY
   ========================================================= */

#quadsPanel #quadsInstructions.quads-end-result.quads-win-result{
  border-color:rgba(6,78,59,.55)!important;
}

#quadsPanel #quadsInstructions.quads-end-result.quads-win-result,
#quadsPanel #quadsInstructions.quads-end-result.quads-win-result strong,
#quadsPanel #quadsInstructions.quads-end-result.quads-win-result .quads-status-label,
#quadsPanel #quadsInstructions.quads-end-result.quads-win-result .quads-status-check{
  color:rgba(6,78,59,.55)!important;
}


/* =========================================================
   V100.72 — INCOMMON SOLVED INK AT 65% OPACITY
   ========================================================= */

#quadsPanel #quadsInstructions.quads-end-result.quads-win-result{
  border-color:rgba(6,78,59,.65)!important;
}

#quadsPanel #quadsInstructions.quads-end-result.quads-win-result,
#quadsPanel #quadsInstructions.quads-end-result.quads-win-result strong,
#quadsPanel #quadsInstructions.quads-end-result.quads-win-result .quads-status-label,
#quadsPanel #quadsInstructions.quads-end-result.quads-win-result .quads-status-check{
  color:rgba(6,78,59,.65)!important;
}


/* =========================================================
   V100.73 — INCOMMON STATUS PILL: NO DROP SHADOW
   ========================================================= */

#quadsPanel #quadsInstructions.quads-end-result{
  box-shadow:none!important;
}


/* =========================================================
   V100.74 — INCOMMON STATUS PILL: ARCHIVE BADGE STYLE
   ========================================================= */

/* Match the visual language of the Archive "COMPLETED" badges:
   pale tinted fill, subtle 1px border, darkened game-color ink,
   compact uppercase type, and no drop shadow. */
#quadsPanel #quadsInstructions.quads-end-result.quads-win-result{
  --status-color:#10b981;
  background:color-mix(in srgb,var(--status-color) 10%,white)!important;
  border:1px solid color-mix(in srgb,var(--status-color) 34%,transparent)!important;
  color:color-mix(in srgb,var(--status-color) 74%,#26302a)!important;
  box-shadow:none!important;
}

#quadsPanel #quadsInstructions.quads-end-result.quads-win-result strong,
#quadsPanel #quadsInstructions.quads-end-result.quads-win-result .quads-status-label,
#quadsPanel #quadsInstructions.quads-end-result.quads-win-result .quads-status-check{
  color:color-mix(in srgb,var(--status-color) 74%,#26302a)!important;
}

#quadsPanel #quadsInstructions.quads-end-result{
  padding:5px 14px 4px!important;
  border-radius:999px!important;
  min-height:0!important;
}

#quadsPanel #quadsInstructions.quads-end-result strong{
  gap:5px!important;
  font-family:Lato,system-ui,sans-serif!important;
  font-size:16px!important;
  line-height:1!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
}



@media(max-width:700px){
  #quadsPanel #quadsInstructions.quads-end-result{
    padding:5px 13px 4px!important;
  }
  #quadsPanel #quadsInstructions.quads-end-result strong{
    font-family:Lato,system-ui,sans-serif!important;
    font-size:15px!important;
    font-weight:900!important;
    letter-spacing:.08em!important;
  }
  #quadsPanel #quadsInstructions.quads-end-result .quads-status-check{
    width:12px!important;
    height:12px!important;
  }
}

@supports not (color:color-mix(in srgb,black,white)){
  #quadsPanel #quadsInstructions.quads-end-result.quads-win-result{
    background:#e8f7f1!important;
    border-color:#a9dec9!important;
    color:#1f6b57!important;
  }
  #quadsPanel #quadsInstructions.quads-end-result.quads-win-result strong,
  #quadsPanel #quadsInstructions.quads-end-result.quads-win-result .quads-status-label,
  #quadsPanel #quadsInstructions.quads-end-result.quads-win-result .quads-status-check{
    color:#1f6b57!important;
  }
}


/* =========================================================
   V100.75 — INCOMMON NOT-SOLVED ARCHIVE BADGE STYLE
   ========================================================= */

/* Mirror the approved SOLVED treatment using the existing
   PuzzleNook loss red as the status color. */
#quadsPanel #quadsInstructions.quads-end-result.quads-loss-result{
  --status-color:#a95f52;
  background:color-mix(in srgb,var(--status-color) 10%,white)!important;
  border:1px solid color-mix(in srgb,var(--status-color) 34%,transparent)!important;
  color:color-mix(in srgb,var(--status-color) 74%,#26302a)!important;
  box-shadow:none!important;
}

#quadsPanel #quadsInstructions.quads-end-result.quads-loss-result strong,
#quadsPanel #quadsInstructions.quads-end-result.quads-loss-result .quads-status-label{
  color:color-mix(in srgb,var(--status-color) 74%,#26302a)!important;
}

@supports not (color:color-mix(in srgb,black,white)){
  #quadsPanel #quadsInstructions.quads-end-result.quads-loss-result{
    background:#f7edeb!important;
    border-color:#dfc0bb!important;
    color:#7c4b43!important;
  }
  #quadsPanel #quadsInstructions.quads-end-result.quads-loss-result strong,
  #quadsPanel #quadsInstructions.quads-end-result.quads-loss-result .quads-status-label{
    color:#7c4b43!important;
  }
}


/* =========================================================
   V100.76 — INCOMMON NOT-SOLVED PROHIBITED ICON
   ========================================================= */
#quadsPanel #quadsInstructions.quads-end-result .quads-status-not-solved-icon{
  display:block!important;
  width:13px!important;
  height:13px!important;
  flex:0 0 auto!important;
  margin:0!important;
  overflow:visible;
  color:inherit!important;
}
#quadsPanel #quadsInstructions.quads-end-result.quads-loss-result .quads-status-not-solved-icon{
  color:color-mix(in srgb,var(--status-color) 74%,#26302a)!important;
}
@media(max-width:700px){
  #quadsPanel #quadsInstructions.quads-end-result .quads-status-not-solved-icon{
    width:12px!important;
    height:12px!important;
  }
}
@supports not (color:color-mix(in srgb,black,white)){
  #quadsPanel #quadsInstructions.quads-end-result.quads-loss-result .quads-status-not-solved-icon{
    color:#7c4b43!important;
  }
}


/* =========================================================
   V100.77 — UNIVERSAL PUZZLE STATUS BADGES
   ========================================================= */
.puzzle-end-status{
  --puzzle-status-color:#4f9164;
  width:max-content;
  max-width:calc(100% - 24px);
  margin:8px auto 12px;
  padding:5px 14px 4px;
  border:1px solid color-mix(in srgb,var(--puzzle-status-color) 34%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--puzzle-status-color) 10%,white);
  color:color-mix(in srgb,var(--puzzle-status-color) 74%,#26302a);
  box-shadow:none;
  line-height:1;
}
.puzzle-end-status[hidden]{display:none!important;}
.puzzle-end-status strong{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;margin:0;
  color:inherit;font-family:Lato,system-ui,sans-serif;font-size:16px;
  line-height:1;font-weight:900;letter-spacing:.08em;
}
.puzzle-end-status .puzzle-status-icon{
  display:block;width:13px;height:13px;flex:0 0 auto;margin:0;overflow:visible;color:inherit;
}
.puzzle-end-status.is-not-solved{--puzzle-status-color:#a95f52!important;}
#fivePuzzleStatus{--puzzle-status-color:#4f9164;}
#samePuzzleStatus{--puzzle-status-color:#b58b3e;}
#miniPuzzleStatus{--puzzle-status-color:#587e9b;}
#wordTrailPuzzleStatus{--puzzle-status-color:#7359a3;}
#ellPuzzleStatus{--puzzle-status-color:#268d89;}
#fivePanel.has-puzzle-end-status>.simple-instructions,
#ellPanel.has-puzzle-end-status>.simple-instructions{display:none!important;}
@media(max-width:700px){
  .puzzle-end-status{margin-top:7px;margin-bottom:10px;padding:5px 13px 4px;}
  .puzzle-end-status strong{font-size:15px;}
  .puzzle-end-status .puzzle-status-icon{width:12px;height:12px;}
}
@supports not (color:color-mix(in srgb,black,white)){
  .puzzle-end-status{background:#eef4ef;border-color:#bfd0c2;color:#355d3f;}
  .puzzle-end-status.is-not-solved{background:#f7edeb;border-color:#dfc0bb;color:#7c4b43;}
}


/* =========================================================
   V100.78 — STATUS BADGE IN TIMER ROW
   ========================================================= */

/* The timer row becomes a three-position lane: the status badge is centered
   on the game footprint while the clock/time remains anchored to the right. */
.puzzle-timer-row{
  position:relative!important;
  justify-content:flex-end!important;
}

.puzzle-timer-row>.puzzle-end-status{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
  z-index:1;
  pointer-events:none;
}

/* Preserve the approved compact Archive-badge dimensions in the tighter row. */
.puzzle-timer-row>.puzzle-end-status{
  padding:5px 14px 4px!important;
}
@media(max-width:700px){
  .puzzle-timer-row>.puzzle-end-status{
    padding:5px 13px 4px!important;
  }
}

/* Each game's SOLVED / terminal state replaces simple gameplay instructions.
   InCommon's own JS also hides its instruction node so its previous end-state
   banner cannot appear redundantly. */
#fivePanel.has-puzzle-end-status>.simple-instructions,
#quadsPanel.has-puzzle-end-status>#quadsInstructions,
#ellPanel.has-puzzle-end-status>.simple-instructions{
  display:none!important;
}

/* InCommon now uses the same universal badge treatment as every other game. */
#quadsPuzzleStatus{--puzzle-status-color:#c66f58;}


/* =========================================================
   V100.79 — SIX TO FIVE + INCOMMON INSTRUCTIONS IN TIMER ROW
   ========================================================= */

.puzzle-timer-row>.timer-row-instructions{
  position:absolute!important;
  left:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  margin:0!important;
  padding:0!important;
  max-width:calc(50% - 18px)!important;
  text-align:left!important;
  line-height:1.25!important;
  pointer-events:none;
}

#fivePanel.has-puzzle-end-status .timer-row-instructions,
#quadsPanel.has-puzzle-end-status .timer-row-instructions{
  display:none!important;
}

/* These instruction nodes now live inside the timer row, so prevent older
   block-level spacing rules from affecting the row layout. */
#fivePanel .puzzle-timer-row>.simple-instructions,
#quadsPanel .puzzle-timer-row>.simple-instructions{
  width:auto!important;
  min-height:0!important;
}

/* On narrower screens, preserve the same three-lane arrangement while
   keeping the instruction copy compact enough not to collide with status/timer. */
@media(max-width:700px){
  .puzzle-timer-row>.timer-row-instructions{
    max-width:calc(50% - 12px)!important;
    font-size:12px!important;
    line-height:1.2!important;
  }
}


/* =========================================================
   V100.82 — UNSCRUMBLE INTERACTION STABILITY
   ========================================================= */
#wordTrailPanel .wordtrail-board-stage,
#wordTrailPanel .wordtrail-board-wrap{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
#wordTrailPanel .wordtrail-player-grid{
  touch-action:none!important;
  overscroll-behavior:contain;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

/* The board's containing geometry must not animate while tracing. Individual
   tile feedback may animate, but the 6×8 board itself remains fixed. */
#wordTrailPanel .wordtrail-board-stage,
#wordTrailPanel .wordtrail-board-wrap,
#wordTrailPanel .wordtrail-player-grid{
  transition:none!important;
  animation:none!important;
}


/* =========================================================
   V100.83 — UNSCRUMBLE FIXED MESSAGE LANE
   ========================================================= */

/*
  Gameplay messages used to add/remove vertical margin inside #wordTrailStatus.
  Because the board stage is part of the same flex column, that changed the
  board's vertical position whenever a warning appeared or cleared. Reserve a
  fixed message lane instead, so message state never changes grid geometry.
*/
#wordTrailPanel #wordTrailStatus{
  box-sizing:border-box!important;
  height:28px!important;
  min-height:28px!important;
  max-height:28px!important;
  flex:0 0 28px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible;
}

#wordTrailPanel #wordTrailStatus .wordtrail-message{
  margin:0 auto!important;
  padding:0!important;
  line-height:1.2!important;
}

@media(max-width:700px){
  #wordTrailPanel #wordTrailStatus{
    height:24px!important;
    min-height:24px!important;
    max-height:24px!important;
    flex-basis:24px!important;
  }
  #wordTrailPanel #wordTrailStatus .wordtrail-message{
    font-size:12px!important;
  }
}

@media(max-width:380px), (max-height:680px){
  #wordTrailPanel #wordTrailStatus{
    height:18px!important;
    min-height:18px!important;
    max-height:18px!important;
    flex-basis:18px!important;
  }
  #wordTrailPanel #wordTrailStatus .wordtrail-message{
    font-size:11px!important;
    line-height:1.1!important;
  }
}


/* V100.85 — restrained consumer site menu */
.restrained-site-nav{grid-template-columns:1fr!important;}
.restrained-site-nav a{display:flex;align-items:center;min-height:40px;padding:8px 10px;border-radius:8px;background:#f5f6f4;color:#242926;text-align:left;font-size:13px;font-weight:800;text-decoration:none;}
.restrained-site-nav a:hover{background:#ecefeb;}


/* =========================================================
   V101.1 — QA refinement: headers, controls, crossword entry
   ========================================================= */

/* One and the Same: its played-state history/game footprint is 760px wide.
   Match the clean header and timer row to that true desktop width. */
@media(min-width:701px){
  #samePanel{--game-meta-width:760px;}
}

/* Shared left-aligned instruction treatment when an instruction is moved into
   the timer row. The timer remains pinned to the right. */
.puzzle-timer-row .timer-row-instructions{
  flex:1 1 auto!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  padding:0 12px 0 0!important;
  text-align:left!important;
  align-self:center!important;
}
#ellPanel .puzzle-timer-row .timer-row-instructions{
  color:#59615c!important;
  font:700 14px/1.35 Lato,system-ui,sans-serif!important;
}

/* Daily Crossword Hint control: compact plain button, no arrow. */
#miniPanel .mini-header-reveal #miniRevealBtn{
  min-height:0!important;
  padding:5px 10px!important;
  border-radius:7px!important;
  font-size:12px!important;
  line-height:1.2!important;
}
#miniPanel .mini-header-reveal .reveal-menu{
  padding:0!important;
  overflow:hidden!important;
}
#miniPanel .mini-header-reveal .reveal-menu button{
  border-radius:0!important;
  padding:10px 12px!important;
}
#miniPanel .mini-header-reveal .reveal-menu button + button{
  border-top:1px solid var(--line)!important;
}
@media(max-width:700px){
  #miniPanel .mini-header-reveal #miniRevealBtn{
    padding:4px 8px!important;
    font-size:11px!important;
  }
}

/* Six to Five Clue Lock: compact pressable control rather than checkbox. */
#fivePanel .hard-mode-button{
  -webkit-appearance:none;
  appearance:none;
  min-height:0!important;
  padding:5px 10px!important;
  border:1px solid #c9cec9!important;
  border-radius:7px!important;
  background:#fff!important;
  color:#3e4541!important;
  box-shadow:none!important;
  font:800 12px/1.2 Lato,system-ui,sans-serif!important;
  white-space:nowrap;
}
#fivePanel .hard-mode-button:hover{background:#f2f4f1!important;}
#fivePanel .hard-mode-button[aria-pressed="true"],
#fivePanel .hard-mode-button.is-active{
  background:#252a27!important;
  border-color:#252a27!important;
  color:#fff!important;
}
#fivePanel .hard-mode-button:focus-visible{
  outline:2px solid #78817b!important;
  outline-offset:2px!important;
}


/* =========================================================
   V101.2 — MOBILE CLEARANCE + CONTROL ALIGNMENT
   ========================================================= */

/* Center the Daily Crossword Hint menu on the Hint control itself. */
#miniPanel .mini-header-reveal .reveal-menu{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
}

@media(max-width:700px){
  /* Give short mobile viewports a little more room above the fixed clue/
     keyboard dock. This reduces the grid ceiling by 12px versus V94. */
  #miniPanel .mini-player-grid{
    width:min(
      calc(100vw - 30px),
      clamp(150px, calc(100dvh - 390px - env(safe-area-inset-bottom)), 520px)
    )!important;
  }

  /* Keep Every Last Letter's white game surface extending through the
     visible mobile viewport, including phones taller than its content. */
  #ellPanel{
    min-height:calc(100dvh - 50px)!important;
    padding-bottom:calc(24px + env(safe-area-inset-bottom))!important;
  }

  /* Timer-row instructions share the game-title/header left inset rather
     than starting at the timer row's expanded outer edge. */
  #fivePanel .puzzle-timer-row > .timer-row-instructions,
  #quadsPanel .puzzle-timer-row > .timer-row-instructions,
  #ellPanel .puzzle-timer-row > .timer-row-instructions{
    left:12px!important;
  }
}

/* =========================================================
   V101.3 — QA REFINEMENTS
   - ELL mobile board +7%
   - ELL end-state summary floats over the board
   ========================================================= */

/* The board and its end-state card now share one positioning stage so the
   summary never consumes vertical flow space between the timer and score. */
#ellPanel .ell-grid-stage{
  position:relative;
  display:grid;
  place-items:center;
}

#ellPanel .ell-grid-overlay{
  position:absolute;
  inset:0;
  z-index:20;
  display:grid;
  place-items:center;
  pointer-events:none;
}

#ellPanel .ell-grid-overlay:empty{
  display:none;
}

#ellPanel .ell-grid-overlay .ell-endgame{
  width:min(calc(100% - 20px), 440px);
  margin:0;
  pointer-events:auto;
  box-shadow:0 12px 32px rgba(0,0,0,.20);
}

/* Increase the actual mobile board footprint by 7% rather than visually
   scaling it, so layout, hit targets and overlay geometry all remain true. */
@media(min-width:521px) and (max-width:700px){
  #ellPanel .ell-grid{
    grid-template-columns:repeat(5,68.48px);
    gap:8.56px;
  }
  #ellPanel .ell-tile{
    width:68.48px;
    height:68.48px;
    font-size:32.1px;
  }
}

@media(max-width:520px){
  #ellPanel .ell-grid{
    grid-template-columns:repeat(5,55.64px);
    gap:8.56px;
  }
  #ellPanel .ell-tile{
    width:55.64px;
    height:55.64px;
    font-size:26.75px;
  }
}

/* Preserve fit on the very narrowest supported phones. */
@media(max-width:330px){
  #ellPanel .ell-grid{
    grid-template-columns:repeat(5,min(55.64px,calc((100vw - 60px)/5)));
    gap:min(8.56px,1.8vw);
  }
  #ellPanel .ell-tile{
    width:min(55.64px,calc((100vw - 60px)/5));
    height:min(55.64px,calc((100vw - 60px)/5));
    font-size:clamp(22px,8vw,26.75px);
  }
}


/* V102.2 — ELL validation/stability + in-game confirmations */
.ell-current-word.is-invalid{
  color:#9a433b;
  font-size:clamp(13px,2.2vw,16px);
  font-weight:800;
  letter-spacing:0;
  text-transform:none;
}
.ell-grid.interaction-locked .ell-tile:not(.empty){
  cursor:default;
}
.ell-confirm-overlay[hidden]{display:none!important}
.ell-confirm-overlay{
  position:fixed;
  inset:0;
  z-index:1100;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(17,21,19,.46);
  backdrop-filter:blur(2px);
  animation:globalOverlayIn .18s ease-out;
}
.ell-confirm-card{
  width:min(410px,calc(100vw - 32px));
  background:#fff;
  border-radius:18px;
  box-shadow:0 18px 48px rgba(16,22,18,.18);
  padding:27px 28px 24px;
  text-align:center;
  animation:globalCardIn .22s cubic-bezier(.2,.75,.25,1);
}
.ell-confirm-kicker{
  color:#767d78;
  font-size:10px;
  font-weight:900;
  letter-spacing:.19em;
}
.ell-confirm-card h2{
  margin:8px 0 0;
  color:#1f2421;
  font:900 28px/1.1 Lato,system-ui,sans-serif;
  letter-spacing:-.025em;
}
.ell-confirm-card p{
  margin:11px auto 20px;
  max-width:330px;
  color:#59605c;
  font-size:14px;
  line-height:1.45;
  font-weight:700;
}
.ell-confirm-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.ell-confirm-actions button{
  min-height:44px;
  border-radius:10px!important;
  font-size:13px!important;
  font-weight:900!important;
}
#ellConfirmPrimary{
  background:#2f684f!important;
  color:#fff!important;
}
@media(max-width:560px){
  .ell-confirm-overlay{padding:12px}
  .ell-confirm-card{
    width:calc(100vw - 24px);
    padding:24px 19px 20px;
    border-radius:16px;
  }
  .ell-confirm-card h2{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
  .ell-confirm-overlay,.ell-confirm-card{animation:none!important}
}

/* V102.3 — archived-day context + per-game free-play indicators */
.game-title-with-plays{display:flex;align-items:center;gap:0;min-width:0}.game-title-with-plays .game-name-title{margin:0}
.play-dots{display:inline-flex;gap:4px;align-items:center;vertical-align:middle;margin-left:1ch}.play-dots i{display:block;width:7px;height:7px;border-radius:50%;border:1.5px solid #1d1d1f;background:transparent;box-sizing:border-box}.play-dots i.is-filled{background:#1d1d1f}
.front-card-top .play-dots{margin-left:1ch;margin-right:auto}.front-card-top strong+.play-dots+.front-complete-mark{margin-left:auto}
.home-today{position:relative;isolation:isolate}
.front-page.is-archived .home-today::before{content:"";position:absolute;z-index:-1;top:-3px;bottom:-3px;left:-5px;right:-5px;background:#f1eee8;border:0;border-radius:0;box-shadow:none;pointer-events:none}
.front-page.is-archived .home-eyebrow{color:#111;font-weight:900;letter-spacing:.12em}.front-page.is-archived #homeTitle{font-weight:900}
.home-progress-row{display:flex;align-items:center;justify-content:flex-end;min-height:30px}
.status-pill.puzzle-date-link{cursor:pointer;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}.status-pill.puzzle-date-link:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,.12)}.status-pill.is-archived-puzzle{background:#111!important;color:#fff!important;border-color:#111!important}
.play-limit-overlay{position:fixed;inset:0;z-index:9999;background:rgba(20,20,20,.38);display:grid;place-items:center;padding:20px}.play-limit-overlay[hidden]{display:none}.play-limit-card{width:min(390px,100%);background:#fff;border-radius:20px;padding:26px;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.24)}.play-limit-kicker{font-size:11px;font-weight:900;letter-spacing:.14em}.play-limit-card h2{margin:8px 0}.play-limit-card p{color:#555;line-height:1.5}.play-limit-card button{margin-top:8px}
@media(max-width:700px){.play-dots i{width:6px;height:6px}.game-title-with-plays{gap:0}.front-page.is-archived .home-today::before{left:50%;right:auto;width:calc(100vw + 10px);transform:translateX(-50%)}}


/* V102.8 — Main Page Date Header overlay navigation fix */
.main-date-nav{
  position:absolute!important;
  top:-3px;
  bottom:-3px;
  z-index:3;
  width:15%;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#111;
  cursor:pointer;
  overflow:hidden;
  opacity:1;
  appearance:none;
  -webkit-appearance:none;
}
.main-date-nav-prev{left:-5px!important;right:auto!important}
.main-date-nav-next{right:-5px!important;left:auto!important}
.main-date-nav span{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font:400 42px/1 Lato,system-ui,sans-serif;
  opacity:0;
  visibility:hidden;
  background:rgba(255,255,255,.42);
  transition:opacity .16s ease,background .16s ease,visibility 0s linear .16s;
  pointer-events:none;
}
.main-date-nav:disabled{display:none!important}
@media(hover:hover) and (pointer:fine){
  .main-date-nav:not(:disabled):hover span,
  .main-date-nav:not(:disabled):focus-visible span{
    opacity:1;
    visibility:visible;
    background:rgba(255,255,255,.46);
    transition-delay:0s;
  }
}
@media(max-width:700px){
  .main-date-nav{width:25%;}
  .main-date-nav span{display:none!important}
  .front-page.is-archived .main-date-nav-prev{left:calc(50% - 50vw - 5px)!important}
  .front-page.is-archived .main-date-nav-next{right:calc(50% - 50vw - 5px)!important}
}


/* V102.9 — mobile homepage play dots overlay */
.front-preview-play-dots{display:none}
@media(max-width:700px){
  .front-card-top>.play-dots{display:none}
  .front-card-top{gap:6px}
  .front-card-top strong{white-space:nowrap;min-width:0}
  .front-preview{position:relative}
  .front-preview-play-dots{
    display:inline-flex;position:absolute;z-index:3;top:7px;left:7px;
    margin:0!important;padding:4px 5px;border-radius:999px;gap:4px;
    background:rgba(255,255,255,.78);box-shadow:0 1px 4px rgba(0,0,0,.08);
    pointer-events:none;
  }
}

/* V103.0 menu + pending UI refinements */
#fivePanel .key.submit-action{background:#4f9164!important;color:#fff!important}
#miniPanel .mini-keyboard .key.submit-action{background:#587e9b!important;color:#fff!important}
@media(min-width:701px){.home-archive-art img{object-position:calc(50% - 30px) calc(50% + 10px)}}
@media(max-width:700px){
 .home-archive-art img{object-position:50% calc(50% + 10px)}
}
.mobile-site-nav{grid-template-columns:1fr!important}
.mobile-site-nav a,.mobile-site-nav button{display:flex;align-items:center;width:100%;min-height:42px;padding:9px 11px;border:0;border-radius:8px;background:#f5f6f4;color:#242926;text-decoration:none;text-align:left;font:800 13px/1.2 Lato,system-ui,sans-serif}
.mobile-site-nav a:hover,.mobile-site-nav button:hover{background:#ecefeb;color:#242926;transform:none}
.site-utility-overlay[hidden]{display:none!important}.site-utility-overlay{position:fixed;z-index:230;inset:0;display:grid;place-items:center;padding:20px;background:rgba(20,24,21,.42);backdrop-filter:blur(3px)}
.site-utility-card{position:relative;width:min(560px,calc(100vw - 28px));max-height:min(760px,calc(100dvh - 28px));overflow:auto;padding:28px;border-radius:18px;background:#fff;color:#252a27;box-shadow:0 22px 60px rgba(19,24,20,.24)}
.site-utility-close{position:absolute;top:12px;right:12px;width:36px;height:36px;padding:0!important;border-radius:50%!important;background:#f0f2ef!important;color:#343a36!important;font-size:24px}
.site-utility-kicker{margin:0 44px 7px 0;color:#788078;font:900 10px/1 Lato,sans-serif;letter-spacing:.14em}.site-utility-card h2{margin:0 42px 20px 0;font:900 27px/1.1 Lato,sans-serif}
.site-utility-body p{font:400 14px/1.5 Lato,sans-serif;color:#555e58}.utility-choice-list{display:grid;gap:8px}.utility-choice{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 15px!important;border:1px solid #e3e6e2!important;border-radius:11px!important;background:#f8f9f7!important;color:#252a27!important;text-align:left}.utility-choice:hover{background:#f0f3ef!important;transform:none!important}.utility-choice strong{font:900 14px/1.2 Lato,sans-serif}.utility-choice span{font:400 12.5px/1.35 Lato,sans-serif;color:#707871}
.feedback-form{display:grid;gap:14px}.feedback-form label{display:grid;gap:6px;color:#404742;font:800 12px/1.2 Lato,sans-serif}.feedback-form input,.feedback-form textarea{width:100%;padding:10px 11px;border:1px solid #d8ddd8;border-radius:9px;background:#fff;color:#252a27;font:400 14px/1.4 Lato,sans-serif;resize:vertical}.feedback-context{color:#7a827c;font:700 11px/1.3 Lato,sans-serif}.feedback-submit{justify-self:start;background:#28352d!important;color:#fff!important}.feedback-dev-note{margin:0!important;font-size:10.5px!important;color:#8a918c!important}body.site-utility-open{overflow:hidden}
@media(max-width:700px){.site-utility-overlay{padding:10px}.site-utility-card{width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:23px 18px 20px;border-radius:15px}.site-utility-card h2{font-size:24px}}

/* V103.1 — InCommon mobile play-counter root fix.
   Legacy InCommon preview tile rules now target only direct preview-cell <i> elements,
   so the shared play-dot <i> elements inherit the same sizing as every other game card. */


/* =========================================================
   V103.9 — ONE AND THE SAME CORRECT-GUESS SUMMARY
   ========================================================= */

/* Wrong guesses keep the established strike-through treatment. The accepted
   winning guess is explicitly exempt, including from any animated strike
   pseudo-element inherited from the wrong-guess presentation rules. */
#samePanel .same-history-row-correct .same-history-guess-text,
#samePanel .same-history-guess-correct .same-history-guess-text{
  text-decoration:none!important;
  text-decoration-line:none!important;
  color:#3f7651;
  font-weight:900;
}
#samePanel .same-history-row-correct .same-history-guess-text::after,
#samePanel .same-history-guess-correct .same-history-guess-text::after{
  content:none!important;
  display:none!important;
}
#samePanel .same-history-row-correct .same-history-guess,
#samePanel .same-history-guess-correct{
  color:#3f7651;
}
#samePanel .same-history-row-revealed .same-history-clue{
  color:#55534d;
}
#samePanel .same-history-guess-empty{
  min-height:1.28em;
}


/* =========================================================
   V103.11 — UNSCRUMBLE INTERACTION MOTION PASS
   ========================================================= */

/* Draw the active connector quickly as the path is extended. */
#wordTrailPanel .wordtrail-live-svg polyline.active-line.motion-path-draw{
  stroke-dasharray:var(--wt-path-length,900);
  stroke-dashoffset:0;
  animation:wtPathDrawIn 105ms ease-out both;
}
@keyframes wtPathDrawIn{
  from{stroke-dashoffset:var(--wt-path-length,900);}
  to{stroke-dashoffset:0;}
}

/* Valid non-theme word: one restrained whole-path success pulse. */
#wordTrailPanel .wordtrail-player-cell.motion-bonus-valid{
  animation:wtBonusValidPulse 240ms cubic-bezier(.2,.75,.25,1) both!important;
}
@keyframes wtBonusValidPulse{
  0%{transform:translateY(-2px) scale(1.035);filter:brightness(1);}
  48%{transform:translateY(-2px) scale(1.055);filter:brightness(1.14);}
  100%{transform:translateY(-2px) scale(1.035);filter:brightness(1);}
}
#wordTrailPanel:has(.motion-bonus-valid) .wordtrail-live-svg polyline.active-line{
  animation:wtBonusLinePulse 240ms ease-out both;
}
@keyframes wtBonusLinePulse{
  0%,100%{opacity:.52;filter:brightness(1);}
  50%{opacity:.82;filter:brightness(1.25);}
}

/* Invalid response is intentionally local: only selected letters nudge. */
#wordTrailPanel .wordtrail-player-cell.motion-invalid{
  animation:wtInvalidNudge 210ms ease-in-out both!important;
}
@keyframes wtInvalidNudge{
  0%,100%{transform:translateY(-2px) translateX(0) scale(1.035);}
  24%{transform:translateY(-2px) translateX(-2px) scale(1.035);}
  52%{transform:translateY(-2px) translateX(2px) scale(1.035);}
  76%{transform:translateY(-2px) translateX(-1px) scale(1.035);}
}

/* Existing hint-piece state now reads as an earned reward rather than a
   simple state change; the destination bank slot follows with its own pop. */
#wordTrailPanel .ort-hint-piece.motion-earned{
  animation:wtHintPieceEarn 380ms cubic-bezier(.18,.82,.22,1.15) both!important;
}
@keyframes wtHintPieceEarn{
  0%{transform:translateY(6px) scale(.55);opacity:0;}
  45%{transform:translateY(-3px) scale(1.16);opacity:1;}
  72%{transform:translateY(1px) scale(.96);opacity:1;}
  100%{transform:translateY(0) scale(1);opacity:1;}
}
#wordTrailPanel .ort-hint-bank-slot.motion-bank-earned{
  animation:wtHintBankReceive 420ms cubic-bezier(.18,.82,.22,1.15) both!important;
}
@keyframes wtHintBankReceive{
  0%{transform:scale(.72);filter:brightness(1.2);}
  42%{transform:scale(1.18);filter:brightness(1.18);}
  72%{transform:scale(.96);filter:brightness(1.05);}
  100%{transform:scale(1);filter:brightness(1);}
}

@media(prefers-reduced-motion:reduce){
  #wordTrailPanel .wordtrail-live-svg polyline.active-line.motion-path-draw,
  #wordTrailPanel .wordtrail-player-cell.motion-bonus-valid,
  #wordTrailPanel .wordtrail-player-cell.motion-invalid,
  #wordTrailPanel .ort-hint-piece.motion-earned,
  #wordTrailPanel .ort-hint-bank-slot.motion-bank-earned{
    animation:none!important;
  }
}


/* =========================================================
   V103.12 — UNSCRUMBLE MOTION REFINEMENT
   ========================================================= */


  65%{transform:translateY(.5px) scale(.99);filter:brightness(1);}
  100%{transform:translateY(0) scale(1);filter:brightness(1);}
}

/* Make the valid bonus-word response unmistakable: two rhythmic pulses
   while keeping all movement local to the selected path. */
#wordTrailPanel .wordtrail-player-cell.motion-bonus-valid{
  animation:wtBonusValidDoublePulse 320ms cubic-bezier(.2,.72,.25,1) both!important;
}
@keyframes wtBonusValidDoublePulse{
  0%,100%{transform:translateY(-.5px) scale(1.012);filter:brightness(1);}
  20%{transform:translateY(-2px) scale(1.075);filter:brightness(1.22);}
  40%{transform:translateY(-.5px) scale(1.02);filter:brightness(1.04);}
  67%{transform:translateY(-2px) scale(1.07);filter:brightness(1.2);}
  86%{transform:translateY(-.5px) scale(1.02);filter:brightness(1.04);}
}
#wordTrailPanel:has(.motion-bonus-valid) .wordtrail-live-svg polyline.active-line{
  animation:wtBonusLineDoublePulse 320ms ease-out both!important;
}
@keyframes wtBonusLineDoublePulse{
  0%,100%{opacity:.52;filter:brightness(1);}
  20%{opacity:.94;filter:brightness(1.38);}
  40%{opacity:.62;filter:brightness(1.06);}
  67%{opacity:.92;filter:brightness(1.34);}
  86%{opacity:.62;filter:brightness(1.06);}
}

/* Hint-piece reward is deliberately stronger than V103.11: larger entrance,
   higher rise, overshoot and a brief glow so the earned piece is noticed. */
#wordTrailPanel .ort-hint-piece.motion-earned{
  animation:wtHintPieceEarnStrong 520ms cubic-bezier(.16,.86,.2,1.18) both!important;
  filter:drop-shadow(0 3px 5px rgba(115,89,163,.28));
}
@keyframes wtHintPieceEarnStrong{
  0%{transform:translateY(14px) scale(.25) rotate(-8deg);opacity:0;filter:brightness(1.45);}
  36%{transform:translateY(-7px) scale(1.38) rotate(3deg);opacity:1;filter:brightness(1.28);}
  58%{transform:translateY(2px) scale(.9) rotate(-1deg);opacity:1;filter:brightness(1.08);}
  78%{transform:translateY(-2px) scale(1.12) rotate(0);opacity:1;filter:brightness(1.12);}
  100%{transform:translateY(0) scale(1) rotate(0);opacity:1;filter:brightness(1);}
}
#wordTrailPanel .ort-hint-bank-slot.motion-bank-earned{
  animation:wtHintBankReceiveStrong 520ms cubic-bezier(.16,.86,.2,1.18) both!important;
  filter:drop-shadow(0 3px 6px rgba(115,89,163,.25));
}
@keyframes wtHintBankReceiveStrong{
  0%{transform:scale(.55);filter:brightness(1.35);}
  34%{transform:scale(1.32);filter:brightness(1.28);}
  58%{transform:scale(.88);filter:brightness(1.08);}
  78%{transform:scale(1.12);filter:brightness(1.12);}
  100%{transform:scale(1);filter:brightness(1);}
}

@media(prefers-reduced-motion:reduce){
  #wordTrailPanel .wordtrail-player-cell.motion-bonus-valid,
  #wordTrailPanel .ort-hint-piece.motion-earned,
  #wordTrailPanel .ort-hint-bank-slot.motion-bank-earned{
    animation:none!important;
  }
}


/* =========================================================
   V103.14 — UNSCRUMBLE MODERN SQUIRCLE BOARD
   =========================================================
   Visual-only board refresh. Gameplay, tile-selection bounce,
   backtracking behavior, and V103.13 motion timing are unchanged.
   ========================================================= */

#wordTrailPanel .wordtrail-player-cell{
  /* Replace the octagonal/clip-path silhouette with a soft squircle. */
  clip-path:none!important;
  border-radius:14px!important;

  /* Cleaner floating surface: still tactile, but less game-piece-like. */
  background:#fbfbfa;
  border:0!important;
  box-shadow:
    0 2px 5px rgba(31,42,35,.105),
    0 1px 1px rgba(31,42,35,.055);
  filter:none!important;

  /* Slightly calmer lettering lets the path and selection state lead. */
  font-size:16px;
  font-weight:850;
}

/* Keep hover restrained so the board reads as one quiet field. */
@media (hover:hover) and (pointer:fine){
  #wordTrailPanel .wordtrail-player-cell:hover{
    background:#f7f4fa;
    transform:translateY(-1px);
    box-shadow:
      0 4px 8px rgba(31,42,35,.12),
      0 1px 2px rgba(31,42,35,.06);
    filter:none!important;
  }
}

/* Preserve the satisfying V103.13 selection lift, now with a cleaner surface. */
#wordTrailPanel .wordtrail-player-cell.active,
#wordTrailPanel .wordtrail-player-cell.active.found,
#wordTrailPanel .wordtrail-player-cell.active.theme-word,
#wordTrailPanel .wordtrail-player-cell.active.hint,
#wordTrailPanel .wordtrail-player-cell.active.found.hint,
#wordTrailPanel .wordtrail-player-cell.active.theme-word.hint{
  background:#d8cdea!important;
  color:#25212b!important;
  box-shadow:
    0 6px 13px rgba(63,48,86,.17),
    0 2px 4px rgba(63,48,86,.09)!important;
  filter:none!important;
}

/* Found states remain distinctive but a little softer and less plastic. */
#wordTrailPanel .wordtrail-player-cell.found{
  background:#679b73;
  color:#fff;
  box-shadow:0 2px 5px rgba(42,76,50,.13);
  filter:none!important;
}
#wordTrailPanel .wordtrail-player-cell.theme-word{
  background:#7359a3;
  color:#fff;
  box-shadow:0 2px 5px rgba(63,48,86,.14);
  filter:none!important;
}
#wordTrailPanel .wordtrail-player-cell.hint{
  background:#f2e7bd;
  color:#2d2a20;
  box-shadow:
    0 3px 7px rgba(92,75,25,.13),
    inset 0 0 0 1px rgba(181,139,62,.12);
  filter:none!important;
}

/* The connector becomes a rounded ribbon underneath the floating tiles.
   The shape remains unmistakably PuzzleNook rather than a field of circles. */
#wordTrailPanel .wordtrail-live-svg polyline{
  stroke-width:10px;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#wordTrailPanel .wordtrail-live-svg polyline.active-line{
  opacity:.43;
}
#wordTrailPanel .wordtrail-live-svg polyline.found-line{
  opacity:.34;
}
#wordTrailPanel .wordtrail-live-svg polyline.theme-line{
  opacity:.38;
}

/* Motion classes inherit the new shadow language instead of drop-shadow. */
#wordTrailPanel .wordtrail-player-cell.motion-select{
  filter:none!important;
}
#wordTrailPanel .wordtrail-player-cell.motion-correct,
#wordTrailPanel .wordtrail-player-cell.motion-bonus-valid,
#wordTrailPanel .wordtrail-player-cell.motion-invalid,
#wordTrailPanel .wordtrail-player-cell.motion-hint-reveal{
  filter:none;
}


/* =========================================================
   V103.15 — SIX TO FIVE SOFTENED BOARD
   =========================================================
   Visual-only refinement: preserve board geometry, scoring colors,
   gameplay and reveal motion while softening the rigid square/bracket look.
   ========================================================= */

/* Slightly rounded letter tiles: still unmistakably square, but less severe. */
#fivePanel .tile{
  border-radius:6px!important;
  box-shadow:
    0 2px 5px rgba(28,34,30,.105),
    0 1px 1px rgba(28,34,30,.05)!important;
}

/* Keep feedback colors authoritative while using the refined physical depth. */
#fivePanel .tile.correct,
#fivePanel .tile.present,
#fivePanel .tile.absent,
#fivePanel .tile.reveal-correct,
#fivePanel .tile.reveal-present,
#fivePanel .tile.reveal-absent{
  box-shadow:
    0 2px 5px rgba(28,34,30,.12),
    0 1px 1px rgba(28,34,30,.055)!important;
}

/* Soften bracket-like framing wherever the existing Six to Five board
   implements it through pseudo-elements/borders. */
#fivePanel .five-board::before,
#fivePanel .five-board::after,
#fivePanel .board::before,
#fivePanel .board::after,
#fivePanel .guess-grid::before,
#fivePanel .guess-grid::after{
  border-color:#3f423f!important;
  border-width:2px!important;
  border-radius:12px!important;
  opacity:.82;
}

/* Common bracket classes retained by earlier Six to Five layouts. */
#fivePanel .five-bracket,
#fivePanel .five-bracket-left,
#fivePanel .five-bracket-right,
#fivePanel .board-bracket,
#fivePanel .board-bracket-left,
#fivePanel .board-bracket-right{
  border-color:#3f423f!important;
  border-width:2px!important;
  border-radius:12px!important;
  opacity:.82;
}

/* If the bracket arms are individual line elements, round their endpoints. */
#fivePanel .five-bracket-line,
#fivePanel .board-bracket-line{
  background:#3f423f!important;
  border-radius:999px!important;
  opacity:.82;
}


/* =========================================================
   V103.16 — SIX TO FIVE ACTUAL ACTIVE-ROW BRACKET REFINEMENT
   =========================================================
   V103.15 targeted generic bracket selectors, but Six to Five's real
   brackets are the ::before/::after rails on the first/last active tiles.
   These selectors intentionally override the older V56/V57 rules.
   ========================================================= */

#fiveGrid .tile.active-five-row-start::before,
#fiveGrid .tile.active-five-row-end::after{
  /* slimmer charcoal rails instead of heavy near-black bars */
  width:3px!important;
  background:#454945!important;
  border-radius:999px!important;
  opacity:.72;

  /* shorten them slightly so they feel like soft markers, not a rigid frame */
  top:4px!important;
  bottom:4px!important;

  /* subtle depth, kept much quieter than the tiles */
  box-shadow:0 1px 2px rgba(27,33,29,.08);
}

/* Restore some breathing room that V57 had removed. */
#fiveGrid .tile.active-five-row-start::before{
  left:-9px!important;
}
#fiveGrid .tile.active-five-row-end::after{
  right:-9px!important;
}

@media(max-width:700px){
  #fiveGrid .tile.active-five-row-start::before{
    left:-8px!important;
  }
  #fiveGrid .tile.active-five-row-end::after{
    right:-8px!important;
  }
}


/* =========================================================
   V103.17 — ONE AND THE SAME EDITORIAL ANSWER REVEAL
   =========================================================
   Reframes the completed-puzzle result as an integrated editorial reveal
   rather than a conventional floating result card. The completed clue
   history remains the game's natural four-to-one visual story.
   ========================================================= */

#samePanel .same-result{
  position:relative;
  width:min(100%,620px);
  box-sizing:border-box;
  margin:24px auto 0;
  padding:24px 18px 10px;
  border-radius:0;
  text-align:center;
  background:transparent!important;
  box-shadow:none!important;
}

/* Quiet editorial divider between the completed clues and answer reveal. */
#samePanel .same-result::before{
  content:"";
  display:block;
  width:min(100%,520px);
  height:1px;
  margin:0 auto 22px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(181,139,62,.18) 12%,
    rgba(181,139,62,.52) 50%,
    rgba(181,139,62,.18) 88%,
    transparent 100%
  );
}

#samePanel .same-result-kicker{
  margin:0;
  color:#8b7047;
  font:900 11px/1.25 Lato,system-ui,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* The answer becomes the visual payoff. DM Serif Display is already part
   of PuzzleNook's established typography, but is used here sparingly. */
#samePanel .same-result-title{
  margin:7px auto 0;
  max-width:100%;
  color:#292821;
  font-family:"DM Serif Display",Georgia,serif;
  font-size:clamp(46px,7vw,68px);
  font-weight:400;
  line-height:.98;
  letter-spacing:.015em;
  overflow-wrap:anywhere;
}

/* Supporting result language intentionally recedes behind the answer. */
#samePanel .same-result-copy{
  margin:15px auto 0;
  color:#5e605b;
  font:700 15px/1.45 Lato,system-ui,sans-serif;
  letter-spacing:.005em;
}
#samePanel .same-result-copy strong{
  color:#393b37;
  font-weight:900;
}

/* Loss uses the same dignified reveal rather than a gray failure card. */
#samePanel .same-result-loss .same-result-kicker{
  max-width:none;
  color:#756f65;
}
#samePanel .same-result-loss .same-result-title{
  color:#34332e;
}

/* Give the completed clue history a slightly quieter relationship to the
   large answer reveal without changing its layout or guess/strike logic. */
#samePanel:has(.same-result) .same-history{
  margin-bottom:0;
}
#samePanel:has(.same-result) .same-history-row{
  transition:opacity 180ms ease-out;
}

@media(max-width:620px){
  #samePanel .same-result{
    margin-top:16px;
    padding:16px 10px 8px;
  }
  #samePanel .same-result::before{
    margin-bottom:17px;
  }
  #samePanel .same-result-title{
    font-size:clamp(42px,14vw,58px);
  }
  #samePanel .same-result-copy{
    margin-top:12px;
    font-size:14px;
  }
}

@media(prefers-reduced-motion:reduce){
  #samePanel:has(.same-result) .same-history-row{
    transition:none;
  }
}


/* =========================================================
   V103.19 — UNSCRUMBLE LAYOUT CORRECTION
   =========================================================
   Corrects the actual universal timer-row behavior from V103.18:
   - theme is truly pinned to the left edge
   - timer keeps its original top/right position
   - x/X + visual progress occupy a second left-aligned line
   - traced-word pill is made clearly visible above the board
   ========================================================= */

/* Do not vertically recenter the timer inside the taller two-line info row.
   Pin all pieces explicitly so the timer stays where it was before V103.18. */
#wordTrailPanel .puzzle-timer-row-trail{
  position:relative!important;
  display:block!important;
  width:min(100%,var(--game-meta-width,620px))!important;
  max-width:var(--game-meta-width,620px)!important;
  height:40px!important;
  min-height:40px!important;
  margin:1px auto 2px!important;
  padding:0!important;
  box-sizing:border-box!important;
}

/* Left block: first line theme, second line exact progress + bar. */
#wordTrailPanel .puzzle-timer-row-trail>.wordtrail-theme{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:min(360px,calc(100% - 92px))!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  text-align:left!important;
  pointer-events:none!important;
}

#wordTrailPanel .wordtrail-theme-text{
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  color:#353832!important;
  font:850 15px/18px Lato,system-ui,sans-serif!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* x/X is deliberately the FIRST thing on line two. */
#wordTrailPanel .wordtrail-theme-progress{
  width:100%!important;
  height:14px!important;
  margin:3px 0 0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  text-align:left!important;
}
#wordTrailPanel .wordtrail-progress-count{
  order:-1!important;
  flex:0 0 auto!important;
  min-width:28px!important;
  margin:0!important;
  color:#74766f!important;
  font:800 11px/12px Lato,system-ui,sans-serif!important;
  font-variant-numeric:tabular-nums!important;
  text-align:left!important;
}
#wordTrailPanel .wordtrail-progress-track{
  flex:0 1 190px!important;
  width:min(190px,calc(100% - 40px))!important;
  min-width:72px!important;
  height:6px!important;
  margin:0!important;
  display:flex!important;
  gap:3px!important;
}

/* Preserve the universal status badge behavior without using it to lay out
   the timer during normal play. */
#wordTrailPanel .puzzle-timer-row-trail>.puzzle-end-status{
  position:absolute!important;
  left:50%!important;
  top:0!important;
  transform:translateX(-50%)!important;
  margin:0!important;
  z-index:1!important;
}

/* Most important correction: timer is independently pinned to the same
   upper-right location rather than being vertically centered in 40px. */
#wordTrailPanel .puzzle-timer-row-trail>.puzzle-live-timer{
  position:absolute!important;
  top:0!important;
  right:0!important;
  margin:0 8px 0 0!important;
  min-height:28px!important;
  height:28px!important;
  align-items:center!important;
}

/* Make the traced-word field unmistakably visible even when empty. */
#wordTrailPanel #wordTrailCurrentWord{
  position:relative!important;
  z-index:3!important;
  box-sizing:border-box!important;
  width:min(360px,calc(100% - 40px))!important;
  height:46px!important;
  min-height:46px!important;
  margin:4px auto 12px!important;
  padding:0 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(54,60,55,.075)!important;
  border-radius:999px!important;
  background:#fff!important;
  color:#302c36!important;
  box-shadow:
    0 6px 18px rgba(31,42,35,.13),
    0 2px 5px rgba(31,42,35,.07)!important;
  font:900 18px/1 Lato,system-ui,sans-serif!important;
  letter-spacing:.08em!important;
  text-align:center!important;
  visibility:visible!important;
  opacity:1!important;
}

/* Maintain the requested small message gap immediately above the pill. */
#wordTrailPanel #wordTrailStatus{
  margin-top:4px!important;
  margin-bottom:4px!important;
}

@media(max-width:700px){
  #wordTrailPanel .puzzle-timer-row-trail{
    width:calc(100% + 16px)!important;
    max-width:calc(100% + 16px)!important;
    margin-left:-8px!important;
    margin-right:-8px!important;
    height:38px!important;
    min-height:38px!important;
  }
  #wordTrailPanel .puzzle-timer-row-trail>.wordtrail-theme{
    left:8px!important;
    width:calc(100% - 82px)!important;
  }
  #wordTrailPanel .wordtrail-theme-text{
    font-size:13px!important;
    line-height:17px!important;
  }
  #wordTrailPanel .wordtrail-theme-progress{
    margin-top:2px!important;
    gap:6px!important;
  }
  #wordTrailPanel .wordtrail-progress-count{
    min-width:25px!important;
    font-size:10px!important;
  }
  #wordTrailPanel .wordtrail-progress-track{
    flex-basis:150px!important;
    width:min(150px,calc(100% - 34px))!important;
    height:5px!important;
    gap:2px!important;
  }
  #wordTrailPanel .wordtrail-progress-segment{height:5px!important}
  #wordTrailPanel .puzzle-timer-row-trail>.puzzle-live-timer{
    right:8px!important;
    margin:0!important;
  }
  #wordTrailPanel #wordTrailCurrentWord{
    width:min(330px,calc(100% - 34px))!important;
    height:42px!important;
    min-height:42px!important;
    margin:3px auto 9px!important;
    font-size:17px!important;
  }
}

@media(max-width:380px), (max-height:680px){
  #wordTrailPanel .puzzle-timer-row-trail{
    height:36px!important;
    min-height:36px!important;
  }
  #wordTrailPanel #wordTrailCurrentWord{
    height:38px!important;
    min-height:38px!important;
    margin-bottom:7px!important;
    font-size:16px!important;
  }
}


/* =========================================================
   V103.20 — UNSCRUMBLE ALIGNMENT + GRID-WIDTH ENTRY PILL
   ========================================================= */

/* Nudge the left-side theme/progress inward to visually align with the
   game-title text, and pull the timer inward by roughly one character. */
#wordTrailPanel .puzzle-timer-row-trail>.wordtrail-theme{
  left:8px!important;
}
#wordTrailPanel .puzzle-timer-row-trail>.puzzle-live-timer{
  right:8px!important;
  margin-right:8px!important;
}

/* Desktop board is 292px wide. The traced-word pill now matches it exactly. */
#wordTrailPanel #wordTrailCurrentWord{
  width:292px!important;
  max-width:calc(100% - 40px)!important;
}

/* Maintain a clean visual break between the bottom edge of the puzzle grid
   and the controls/hint area. */
#wordTrailPanel #wordTrailBoardStage{
  margin-bottom:10px!important;
}

@media(max-width:700px){
  /* The mobile timer row extends 8px beyond the normal content frame on each
     side. These offsets compensate for that and add the requested inset. */
  #wordTrailPanel .puzzle-timer-row-trail>.wordtrail-theme{
    left:16px!important;
    width:calc(100% - 98px)!important;
  }
  #wordTrailPanel .puzzle-timer-row-trail>.puzzle-live-timer{
    right:16px!important;
    margin-right:0!important;
  }

  /* JS sets the pill width to the exact dynamically sized board width.
     These declarations only provide a safe fallback before sizing runs. */
  #wordTrailPanel #wordTrailCurrentWord{
    width:min(292px,calc(100% - 40px))!important;
    max-width:calc(100% - 40px)!important;
  }

  #wordTrailPanel #wordTrailBoardStage{
    margin-bottom:10px!important;
  }
}


/* =========================================================
   V103.23 — UNSCRUMBLE VERIFIED FLOW FIX
   ========================================================= */

/* Theme/progress primitives (the V103.18 copy was accidentally serialized
   with literal \n characters and therefore never parsed by the browser). */
#wordTrailPanel .wordtrail-theme-text{
  color:#353832!important;
  font:850 15px/18px Lato,system-ui,sans-serif!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#wordTrailPanel .wordtrail-theme-progress{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  margin-top:3px!important;
  text-align:left!important;
}
#wordTrailPanel .wordtrail-progress-count{
  order:-1!important;
  min-width:28px!important;
  color:#74766f!important;
  font:800 11px/12px Lato,system-ui,sans-serif!important;
  font-variant-numeric:tabular-nums!important;
  text-align:left!important;
}
#wordTrailPanel .wordtrail-progress-track{
  flex:0 1 190px!important;
  height:6px!important;
  display:flex!important;
  gap:3px!important;
}
#wordTrailPanel .wordtrail-progress-segment{
  flex:1 1 0!important;
  min-width:5px!important;
  height:6px!important;
  border-radius:999px!important;
  background:#e5e2e8!important;
}
#wordTrailPanel .wordtrail-progress-segment.is-found{
  background:#7359a3!important;
}

/* No pill: traced letters sit directly on the page above the grid. */
#wordTrailPanel #wordTrailCurrentWord{
  width:auto!important;
  max-width:none!important;
  height:28px!important;
  min-height:28px!important;
  margin:0 auto 5px!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#302c36!important;
  font:900 18px/28px Lato,system-ui,sans-serif!important;
  letter-spacing:.08em!important;
}

/* The 10px grid-to-controls gap is enforced by the mobile sizing reserve in
   app.js rather than a flex-stage margin that can disappear visually. */
#wordTrailPanel #wordTrailBoardStage{
  margin-bottom:0!important;
}
#wordTrailPanel .wordtrail-board-wrap{
  margin-bottom:0!important;
}

@media(max-width:700px){
  #wordTrailPanel .wordtrail-theme-text{
    font-size:13px!important;
    line-height:17px!important;
  }
  #wordTrailPanel .wordtrail-theme-progress{
    gap:6px!important;
    margin-top:2px!important;
  }
  #wordTrailPanel .wordtrail-progress-count{
    min-width:25px!important;
    font-size:10px!important;
  }
  #wordTrailPanel .wordtrail-progress-track{
    flex-basis:150px!important;
    height:5px!important;
    gap:2px!important;
  }
  #wordTrailPanel .wordtrail-progress-segment{height:5px!important}

  #wordTrailPanel #wordTrailCurrentWord{
    height:24px!important;
    min-height:24px!important;
    margin:0 auto 3px!important;
    font-size:17px!important;
    line-height:24px!important;
  }

  /* Restore the proven V103.14/V103.20 mobile structure: the stage flexes to
     the available viewport and the complete controls + hint dock stays at the
     bottom of the gameplay area, visible on initial load. */
  #wordTrailPanel .wordtrail-board-stage{
    flex:1 1 auto!important;
    min-height:125px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    padding:0 20px!important;
  }
  #wordTrailPanel .wordtrail-mobile-dock{
    position:sticky!important;
    z-index:60!important;
    bottom:0!important;
    flex:0 0 auto!important;
    width:100%!important;
    box-sizing:border-box!important;
    margin-top:auto!important;
    padding:7px 10px calc(8px + env(safe-area-inset-bottom))!important;
    background:#fff!important;
    border-top:1px solid #e6e8e6!important;
    box-shadow:0 -4px 12px rgba(31,42,35,.05)!important;
    gap:5px!important;
  }
}

@media(max-width:380px), (max-height:680px){
  #wordTrailPanel #wordTrailCurrentWord{
    height:21px!important;
    min-height:21px!important;
    margin-bottom:2px!important;
    font-size:15px!important;
    line-height:21px!important;
  }
  #wordTrailPanel .wordtrail-mobile-dock{
    padding-top:5px!important;
    padding-bottom:calc(6px + env(safe-area-inset-bottom))!important;
    gap:3px!important;
  }
}


/* =========================================================
   V103.24 — UNSCRUMBLE PROGRESS + MOBILE BOTTOM DOCK
   ========================================================= */
#wordTrailPanel .wordtrail-progress-count{display:none!important}
#wordTrailPanel .wordtrail-progress-track{
  flex:0 1 218px!important;
  width:min(218px,100%)!important;
}
#wordTrailPanel .wordtrail-progress-segment.is-found{
  background:#5f8f56!important;
}

/* Real white space after the grid, before controls. */
#wordTrailPanel #wordTrailBoardStage{
  padding-bottom:10px!important;
  box-sizing:border-box!important;
}

@media(max-width:700px){
  #wordTrailPanel .wordtrail-gameplay{
    min-height:calc(100dvh - 50px - 48px)!important;
    display:flex!important;
    flex-direction:column!important;
  }
  #wordTrailPanel #wordTrailBoardStage{
    flex:1 1 auto!important;
    min-height:0!important;
    padding:0 20px 10px!important;
    box-sizing:border-box!important;
    align-items:flex-start!important;
    overflow:hidden!important;
  }
  #wordTrailPanel .wordtrail-board-wrap{
    margin:0 auto!important;
  }
  #wordTrailPanel .wordtrail-mobile-dock{
    position:sticky!important;
    bottom:0!important;
    flex:0 0 auto!important;
    margin-top:auto!important;
    overflow:visible!important;
  }
  #wordTrailPanel .wordtrail-hint-system,
  #wordTrailPanel .ort-hint-flow,
  #wordTrailPanel .ort-hint-column,
  #wordTrailPanel .ort-hint-token,
  #wordTrailPanel .ort-hint-bank-icons,
  #wordTrailPanel .ort-hint-bank-slot{
    visibility:visible!important;
    opacity:1!important;
  }
  #wordTrailPanel .ort-hint-flow{min-height:52px!important}
  #wordTrailPanel .wordtrail-progress-track{
    flex-basis:185px!important;
    width:min(185px,100%)!important;
  }
}
@media(max-width:380px), (max-height:680px){
  #wordTrailPanel #wordTrailBoardStage{padding-bottom:10px!important}
  #wordTrailPanel .ort-hint-flow{min-height:46px!important}
}


/* =========================================================
   V103.25 — UNSCRUMBLE MOBILE VIEWPORT FIT
   ========================================================= */
@media(max-width:700px){
  /* JS now gives gameplay the exact remaining viewport height. */
  #wordTrailPanel .wordtrail-gameplay{
    min-height:0!important;
  }

  /* Keep the traced word close to the grid on mobile. The board stage must
     start immediately after the word rather than using leftover flex space
     as visual separation. */
  #wordTrailPanel #wordTrailCurrentWord{
    height:22px!important;
    min-height:22px!important;
    margin:0 auto 2px!important;
    line-height:22px!important;
  }
  #wordTrailPanel #wordTrailBoardStage{
    justify-content:flex-start!important;
    align-items:flex-start!important;
    padding-top:0!important;
  }
  #wordTrailPanel .wordtrail-board-wrap{
    margin-top:0!important;
  }

  /* Keep the complete control + hint-token block together at the bottom of
     the visible gameplay viewport. */
  #wordTrailPanel .wordtrail-mobile-dock{
    margin-top:auto!important;
    flex-shrink:0!important;
    padding-bottom:calc(5px + env(safe-area-inset-bottom))!important;
  }
  #wordTrailPanel #wordTrailHintProgress{
    display:block!important;
    overflow:visible!important;
  }
  #wordTrailPanel .ort-hint-flow{
    display:flex!important;
    min-height:52px!important;
    margin-bottom:0!important;
    overflow:visible!important;
  }
}
@media(max-width:380px), (max-height:680px){
  #wordTrailPanel #wordTrailCurrentWord{
    height:20px!important;
    min-height:20px!important;
    margin-bottom:1px!important;
    line-height:20px!important;
  }
}


/* V103.26 — Unscrumble mobile active-word type */
@media(max-width:700px){
  #wordTrailPanel #wordTrailCurrentWord{
    font-size:20px!important;
  }
}
@media(max-width:380px), (max-height:680px){
  #wordTrailPanel #wordTrailCurrentWord{
    font-size:18px!important;
  }
}


/* =========================================================
   V103.27 — GAME-TITLE ARCHIVE NAV + UNSCRUMBLE CENTERING
   ========================================================= */

/* The game name and its remaining-play dots act as one quiet navigation
   target. Preserve the existing header layout; only add affordance. */
.game-title-with-plays.game-title-archive-link{
  cursor:pointer;
  border-radius:7px;
}
.game-title-with-plays.game-title-archive-link:focus-visible{
  outline:2px solid #787d78;
  outline-offset:4px;
}

/* V103.25 intentionally top-aligned the mobile board vertically, but also
   changed justify-content to flex-start. Because this stage is a row-flex
   container, that moved the JS-sized grid toward the left/right content
   edge on narrow phones. Keep vertical top alignment while restoring true
   horizontal centering. */
@media(max-width:700px){
  #wordTrailPanel #wordTrailBoardStage{
    justify-content:center!important;
    align-items:flex-start!important;
  }
  #wordTrailPanel .wordtrail-board-wrap{
    margin-left:auto!important;
    margin-right:auto!important;
    align-self:flex-start!important;
  }
}


/* =========================================================
   V103.29 — GAME-TITLE ARCHIVE NAVIGATION REFINEMENT
   ========================================================= */

/* The title remains clickable but should look exactly like the normal game
   heading on hover. */
.game-title-with-plays.game-title-archive-link:hover .game-name-title,
.game-title-with-plays.game-title-archive-link:active .game-name-title{
  text-decoration:none!important;
  color:inherit!important;
}

/* Use the exact Every Last Letter confirmation presentation for the
   "different day" navigation prompt. */
#gameTitleArchiveConfirmOverlay.ell-confirm-overlay[hidden]{
  display:none!important;
}

/* V103.31 — standardized end-game Next Options */
.endgame-next-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:12px}
.endgame-next-options .five-endgame-next,.endgame-next-options .global-endgame-next{margin:0!important;min-height:44px!important;padding:10px 13px!important;border:1px solid #e2e5e2!important;border-radius:10px!important;background:transparent!important;box-shadow:none!important;color:#313733!important;font:800 13px Lato,system-ui,sans-serif!important}
.endgame-next-options .five-endgame-next:hover,.endgame-next-options .global-endgame-next:hover{background:#f5f7f5!important;color:#2f5f3d!important}
.endgame-next-options [hidden]{display:none!important}
@media(max-width:420px){.endgame-next-options{grid-template-columns:1fr}}


/* =========================================================
   V103.36 — UNSCRUMBLE MOBILE BOARD FRAME FIT
   ========================================================= */
@media(max-width:700px){
  /* Treat the stage as the board's framed area. The JS sizes the board to the
     largest 292:392 rectangle that fits completely inside this area. */
  #wordTrailPanel #wordTrailBoardStage{
    box-sizing:border-box!important;
    justify-content:center!important;
    align-items:center!important;
    overflow:hidden!important;
    padding:4px 20px 10px!important;
  }
  #wordTrailPanel .wordtrail-board-wrap{
    flex:0 0 auto!important;
    align-self:center!important;
    margin:auto!important;
    aspect-ratio:292 / 392!important;
  }
}
@media(max-width:380px), (max-height:680px){
  #wordTrailPanel #wordTrailBoardStage{
    padding:3px 20px 7px!important;
  }
}

/* V104.10 — unified end-game sharing controls (ELL pattern) */
.five-endgame-share-section{display:grid!important;grid-template-columns:1fr auto!important;gap:8px!important;margin-top:0!important}
.five-endgame-primary-share,.five-endgame-copy{width:auto!important;margin:0!important;min-height:44px!important;border-radius:10px!important;font-size:13px!important;font-weight:900!important}
.five-endgame-copy{display:block!important}
.five-endgame-primary-share{background:#2f684f!important;color:#fff!important;padding:0 20px!important}
.five-endgame-primary-share:hover{background:#2f684f!important;text-decoration:none!important}
.five-endgame-copy{background:#f2f4f2!important;color:#313733!important;border:1px solid #e2e5e2!important;padding:0 13px!important}
.five-endgame-copy:hover{color:#313733!important;text-decoration:none!important}
.five-endgame-result-line{grid-column:1/-1!important;margin:3px 0 2px!important;color:#8a8f8c!important;font-size:11px!important;font-weight:700!important}

/* =========================================================
   V104.18 — UNSCRUMBLE HINT BANK SQUIRCLES
   =========================================================
   Stored Hint tokens now use the same soft rounded-square visual language
   as the current Unscrumble board tiles. This overrides the legacy octagon.
   ========================================================= */
#wordTrailPanel .ort-hint-bank-slot{
  clip-path:none!important;
  border-radius:9px!important;
  filter:none!important;
  box-shadow:
    0 2px 5px rgba(31,42,35,.105),
    0 1px 1px rgba(31,42,35,.055)!important;
}
@media(max-width:700px){
  #wordTrailPanel .ort-hint-bank-slot{
    border-radius:8px!important;
  }
}