.gameBoard{align-items:center;flex-grow:1;justify-content:center}.gameBoard,.inputRowsContainer{display:flex;flex-direction:column}.inputRowsContainer{max-height:20vh;max-width:500px;overflow:auto;width:100%}.inputRowsContainer::-webkit-scrollbar{display:none}.inputRowsContainer{-ms-overflow-style:none;scrollbar-width:none}.inputRowsContainer .row:not(:nth-last-child(2)){padding-bottom:10px}.inputRowsEndElement{clear:"both";float:"left"}.row{display:flex;justify-content:center}.startWordRowContainer{padding-bottom:20px;padding-top:10px;width:100%}.endWordRowContainer{padding-top:15px;width:100%}.block{align-items:center;border:2px solid var(--tile-background);border-radius:5px;display:inline-flex;font-size:2rem;font-weight:700;height:60px;justify-content:center;text-transform:uppercase;width:60px}.row .block:not(:last-child){margin-right:10px}.filledBlock{color:var(--text-color)}.currentBlock{border-color:var(--tile-border)}.correctBlock{background-color:var(--correct-tile)}.endWordBlock,.startWordBlock{background-color:var(--tile-background);color:var(--text-color)}.endWordBlockComplete{background-color:var(--correct-tile);border-color:var(--correct-tile);color:var(--text-color)}.exampleWordBlock{background-color:var(--tile-background);color:var(--text-color)}.bouncingBlock{-webkit-animation:bounce 2s infinite;animation:bounce 2s infinite}.endWordRow .bouncingBlock:first-child{-webkit-animation-delay:50ms;animation-delay:50ms}.endWordRow .bouncingBlock:nth-child(2){-webkit-animation-delay:.1s;animation-delay:.1s}.endWordRow .bouncingBlock:nth-child(3){-webkit-animation-delay:.15s;animation-delay:.15s}.endWordRow .bouncingBlock:nth-child(4){-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes bounce{0%{-webkit-transform:translateY(0);transform:translateY(0)}10%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}20%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounce{0%{-webkit-transform:translateY(0);transform:translateY(0)}10%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}20%{-webkit-transform:translateY(0);transform:translateY(0)}to{-webkit-transform:translateY(0);transform:translateY(0)}}.clearBoardButton{background:none;border:none;color:var(--text-color);cursor:pointer;font-size:1rem;margin-top:10px}.gameHeader{align-items:center;border-bottom:1px solid var(--tile-background);display:flex;flex-direction:row;height:var(--header-height);justify-content:space-between;padding:0 14px;position:relative}.gameHeaderLeftGroup{display:flex;flex-direction:row;justify-content:flex-start;width:70px}.gameHeaderRightGroup{display:flex;flex-direction:row;justify-content:flex-end;width:70px}.yesterdayButton{background:none;border:none;cursor:pointer;padding:0}.yesterdayButton svg{fill:var(--icon-color);height:20px;width:20px}.userStatsButton{background:none;border:none;cursor:pointer;padding:0}.userStatsButton svg{fill:var(--icon-color);height:24px;width:24px}.howToPlayButton{background:none;border:none;cursor:pointer;padding:0}.howToPlayButton svg{fill:var(--icon-color);height:24px;width:24px}.settingsButton{background:none;border:none;cursor:pointer;padding:0}.settingsButton svg{fill:var(--icon-color);height:20px;width:20px}.refreshWordsButton{background:none;border:none;cursor:pointer;padding:0}.refreshWordsButton svg{fill:var(--icon-color);height:20px;width:20px}.logoContainer{align-items:center;display:flex;justify-content:center}.logoDaily{height:18px}.logoDaily,.logoUnlimited{fill:var(--icon-color);overflow:visible}.logoUnlimited{height:28px}@media screen and (min-width:501px){.refreshWordsButton svg,.settingsButton svg{height:24px;width:24px}.howToPlayButton svg,.userStatsButton svg{height:28px;width:28px}.yesterdayButton svg{height:24px;width:24px}}.overlay{align-items:center;background-color:rgba(0,0,0,.5);display:none;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%;z-index:1000}.overlayOpen{display:flex}.overlayContent{display:flex;height:100%;justify-content:center;width:100%}.modal{align-items:center;align-self:center;background-color:var(--modal-background);border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.25);display:flex;flex-direction:column;max-height:90%;max-width:var(--max-game-width);overflow:auto;position:relative;width:90%;z-index:2000}.modalContent{overflow:auto;width:100%}.modalHeaderRow{display:flex;flex-direction:row;justify-content:space-between;padding-bottom:10px;padding-top:10px;width:100%}.modalTitle{font-size:1.5rem;font-weight:700;justify-self:center}.dummyLeftItem{width:50px}.closeModalButton{align-self:start;background:none;border:none;cursor:pointer;width:50px}.closeModalButton svg{fill:var(--icon-color);height:24px;width:24px}#nextGameCountdownText{font-size:2rem}#gameStatsModalContent{align-items:center;display:flex;flex-direction:column;padding-bottom:25px;padding-top:15px}.historicalUserStatsRow,.todayUserStatsRow{display:flex;flex-direction:row;margin-bottom:10px}.nextGameCountdownRow{display:flex;flex-direction:row}.nextGameCountdownContainer,.userStat{align-items:center;display:flex;flex-direction:column}.userStat{width:100px}.userStatsBlock{background-color:var(--tile-background);color:var(--text-color);font-size:2.2rem;border-radius:14px;padding:10px 0;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}.successUserStatsBlock{background-color:var(--correct-tile);border-color:var(--correct-tile);color:var(--text-color)}.userStatLabel{font-size:1rem;max-width:80px;padding-top:4px;text-align:center}.shareTodaysScoreButtonContainer{display:flex;flex-direction:column;height:60px;justify-content:center}.shareTodaysScoreButton{fill:#fff;align-items:center;background:#f1f5f9;border:none;border-radius:12px;color:#0f172a;cursor:pointer;display:flex;flex-direction:row;font-size:1rem;font-weight:600;height:40px;justify-content:center;width:120px;box-shadow:0 6px 16px rgba(0,0,0,.12)}.copied{background:rgba(15,23,42,.85)}.shareButtonText{margin-right:4px}.shareTodaysScoreButton svg{height:24px;width:24px}.shareTodaysScoreButtonCounterDummyDiv{height:50px;width:100px}.stats-sharebar-container{align-items:center;display:flex;flex-direction:column;justify-content:center;padding-bottom:10px;padding-top:10px;text-align:center}.sharebar-icons-container{display:flex;margin-top:10px}.sharebar-icon{height:3.2rem;margin:5px}.moreActionContainer{padding-bottom:10px;padding-top:10px}.moreActionButton{fill:#fff;align-items:center;background-color:#0d8ed9;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;flex-direction:row;font-size:1rem;font-weight:700;height:40px;justify-content:center;width:160px}body.dark .moreActionButton{background-color:#8a2be2}#howToPlayModalContent{display:flex;flex-direction:column;padding:0 10px}.howToPlayHistorySection{padding-bottom:5px}.howToPlaySentenceBlock{padding:0 10px 5px}.howToPlayExampleTitle{font-size:1.2rem;font-weight:700;padding-bottom:5px;text-align:center;margin-bottom:6px}.howToPlayExampleSection{padding-bottom:15px}.howToPlayExampleSection .howToPlaySentenceBlock{padding:5px 0;text-align:center}.howToPlayExampleGameRow .block{font-size:1.5rem;height:40px;width:40px}.yesterdayModalContentContainer{align-items:center;display:flex;flex-direction:column;width:100%}.yesterdayOptimalText{color:gray;font-size:1rem;margin-bottom:10px;text-align:center}.yesterdayGameBoardContainer{width:100%}.yesterdayGameBoardContainer .yesterdayGameBoardRow:not(:last-child){padding-bottom:10px}.yesterdayExplanation{color:gray;font-size:1rem;margin-top:10px;padding-bottom:25px;text-align:center}.settings-module{align-items:center;border-bottom:1px solid var(--settings-border);display:flex;justify-content:space-between;margin:10px}.settings-module-text{padding-right:8px}.settings-module-title{font-size:18px}.settings-module-description{color:gray;font-size:12px;padding-bottom:10px}.switch-module{display:flex;justify-content:space-between}.switch-module-switch{background:#878a8c;border:none;border-radius:999px;cursor:pointer;display:block;height:20px;position:relative;width:32px}.switch-module-knob{background:#fff;border-radius:8px;display:block;height:calc(100% - 4px);left:2px;position:absolute;top:2px;-webkit-transform:translateX(0);transform:translateX(0);transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;width:50%}.switch-module-checked .switch-module-switch{background:#6aaa64}.switch-module-checked .switch-module-knob{-webkit-transform:translateX(calc(100% - 4px));transform:translateX(calc(100% - 4px))}.settings-module-footnote{align-items:center;display:flex;flex-direction:column;justify-content:center;margin-top:15px;padding-bottom:15px;text-align:center}.footnote-phrase{font-size:16px;padding-top:10px}.footnote-mail{color:#0d8ed9;padding-bottom:10px;padding-top:10px}body.dark .footnote-mail{color:#8a2be2}.footnote-copyright{padding-bottom:10px;padding-top:10px}body,html{display:flex;flex-direction:column;height:100%}body{--max-game-width:500px;--header-height:50px;--tile-background:#d3d6da;--tile-border:#000;--correct-tile:#6aaa64;--modal-background:#fff;--icon-color:#000;--background-color:#fff;--text-color:#000;--selection-outline:#000;--button-background:#d3d6da;--settings-border:#d3d6da;--toast-background:#000;--toast-text:#fff;background-color:var(--background-color);color:var(--text-color);font-family:Montserrat,sans-serif;margin:0;min-height:100%;padding:0}@supports (-webkit-touch-callout:none){body{height:-webkit-fill-available}}body.dark{--tile-background:#3a3a3c;--tile-border:#fff;--correct-tile:#538d4e;--modal-background:#121213;--icon-color:#fff;--background-color:#121213;--text-color:#fff;--selection-outline:#fff;--button-background:#818384;--settings-border:#3a3a3c;--toast-background:#fff;--toast-text:#000}#root{height:100%}#root,.game{display:flex;flex-direction:column}.game{height:calc(100% - var(--header-height));margin:0 auto;max-width:var(--max-game-width);width:100%}.keyboard{align-items:center;flex-direction:column;padding:10px 5px 5px}.keyboard,.keyboardRow{display:flex;justify-content:center}.keyboardRow{flex-direction:row;width:100%}.keyboard .keyboardRow:not(:last-child){margin-bottom:5px}.button{background-color:var(--button-background);border:0;border-radius:10px;color:var(--text-color);cursor:pointer;font-family:inherit;font-weight:700;height:60px;justify-content:center;text-transform:uppercase;display:flex;align-items:center;white-space:nowrap;line-height:1;padding:0 10px;box-shadow:0 2px 0 rgba(0,0,0,.15),0 6px 12px rgba(0,0,0,.12);transition:transform .08s ease,box-shadow .08s ease,background-color .15s ease}.keyboardRow .button:not(:last-child){margin-right:5px}.characterButton,.keyboardSpacer{width:42px}.deleteButton,.enterButton{width:84px}.deleteButton svg{fill:var(--icon-color);height:24px;width:24px}.toast{border-radius:5px;display:none;left:50%;padding:5px;pointer-events:none;position:absolute;text-align:center;-webkit-transform:translate(-50%);transform:translate(-50%);z-index:2000}.aboveKeyboardToast{bottom:205px}#error-toast{background-color:#b22222;color:#fff}#success-toast{background-color:green;color:#fff}#generic-toast{background-color:var(--toast-background);color:var(--toast-text)}.belowHeaderToast{top:80px}#special-message-toast{background-color:var(--toast-background);color:var(--toast-text)}.fakeSharebar{background-color:blue;bottom:0;display:none;height:40px;left:0;position:fixed;right:0;top:auto;width:100%;z-index:94034}@media screen and (max-width:1026px){#root{margin-bottom:30px}.fakeSharebar{display:block}}a,a:active,a:hover,a:visited{color:inherit;text-decoration:none}*{box-sizing:border-box}.ad__container{display:flex;justify-content:center}

/* ================================
   Integrated UI improvements (clean)
   ================================ */

/* ----------------
   Header
   Goal:
   - Mobile: logo centered between left & right icon groups (not screen-center)
   - Desktop: logo screen-centered
   - Keep comfortable icon spacing (no clustering)
----------------- */

/* Make icon groups size naturally and add spacing */
.gameHeaderLeftGroup,
.gameHeaderRightGroup{
  width:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

/* Hit-area + hover feedback */
.gameHeaderLeftGroup button,
.gameHeaderRightGroup button{
  width:38px;
  height:38px;
  border-radius:10px;
  display:grid;
  place-items:center;
  transition: background-color .15s ease, transform .08s ease;
}
.gameHeaderLeftGroup button:hover,
.gameHeaderRightGroup button:hover{background-color:rgba(0,0,0,.06)}
body.dark .gameHeaderLeftGroup button:hover,
body.dark .gameHeaderRightGroup button:hover{background-color:rgba(255,255,255,.08)}
.gameHeaderLeftGroup button:active,
.gameHeaderRightGroup button:active{transform:translateY(1px)}
.gameHeaderLeftGroup button svg,
.gameHeaderRightGroup button svg{width:22px;height:22px}

/* Mobile-first header layout:
   columns: [left auto] [center flexible] [right auto]
   Logo is centered within the flexible space => centered between groups. */
.gameHeader{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  justify-content:initial;
}

/* Ensure logo centers within middle column */
.logoContainer{
  justify-content:center;
}

/* Desktop: true screen center for logo */
@media screen and (min-width:501px){
  .gameHeader{
    grid-template-columns:1fr auto 1fr;
  }
  .logoContainer{justify-content:center}
  .gameHeaderLeftGroup{gap:10px}
  .gameHeaderRightGroup{gap:10px}
  .gameHeaderLeftGroup button svg,
  .gameHeaderRightGroup button svg{width:24px;height:24px}
}

/* ----------------
   Keyboard
----------------- */
.button{
  background-color:var(--button-background);
  border:0;
  border-radius:10px;
  color:var(--text-color);
  cursor:pointer;
  font-family:inherit;
  font-weight:700;
  height:60px;
  justify-content:center;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  white-space:nowrap;
  line-height:1;
  padding:0 10px;
  box-shadow:0 2px 0 rgba(0,0,0,.15),0 6px 12px rgba(0,0,0,.12);
  transition:transform .08s ease,box-shadow .08s ease,background-color .15s ease;
}
.button:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 rgba(0,0,0,.2),0 3px 6px rgba(0,0,0,.18);
}
.button:focus-visible{outline:2px solid var(--selection-outline);outline-offset:2px}

.characterButton{width:42px}
.deleteButton,.enterButton{width:84px}
@media screen and (max-width:420px){
  .deleteButton,.enterButton{width:74px}
  .characterButton{width:38px}
}

.enterButton{background-color:#dbeafe}
.deleteButton{background-color:#fee2e2}
body.dark .enterButton{background-color:#1e3a8a}
body.dark .deleteButton{background-color:#7f1d1d}

/* ----------------
   Modal / Stats
----------------- */
.modal{border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.modalHeaderRow{padding:14px 16px}
.modalTitle{font-size:1.6rem}
.closeModalButton{width:44px;height:44px;border-radius:10px}
.closeModalButton:hover{background:rgba(0,0,0,.06)}
body.dark .closeModalButton:hover{background:rgba(255,255,255,.08)}
@keyframes modalIn{from{transform:translateY(10px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.modal.modalAnimIn{animation:modalIn .16s ease-out both}

.userStat{width:110px}
.userStatsBlock{
  background-color:var(--tile-background);
  color:var(--text-color);
  font-size:2.2rem;
  border-radius:14px;
  padding:10px 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
.successUserStatsBlock{border-radius:14px}
.userStatLabel{font-size:13px;color:#6b7280;max-width:100px;margin-top:4px;text-align:center}
body.dark .userStatLabel{color:#9ca3af}
.todayUserStatsRow .userStatsBlock{background:linear-gradient(135deg,#e0f2fe,#f8fafc)}
body.dark .todayUserStatsRow .userStatsBlock{background:linear-gradient(135deg,#1e293b,#0f172a)}

.shareTodaysScoreButton{
  align-items:center;
  background:#f1f5f9;
  border:none;
  border-radius:12px;
  color:#0f172a;
  cursor:pointer;
  display:flex;
  flex-direction:row;
  font-size:1rem;
  font-weight:600;
  height:40px;
  justify-content:center;
  width:120px;
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.shareTodaysScoreButton svg{height:24px;width:24px;fill:#0f172a}
.shareTodaysScoreButton:hover{background:#e2e8f0}
body.dark .shareTodaysScoreButton{background:#1f2933;color:#fff}
body.dark .shareTodaysScoreButton svg{fill:#fff}
.copied{background:rgba(15,23,42,.85)}

#nextGameCountdownText{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size:28px;
  letter-spacing:1px;
}

/* Play Unlimited spacing inside stats modal */
.moreActionContainer{
  padding-top:24px;
  padding-bottom:24px;
  display:flex;
  justify-content:center;
}
.moreActionButton{margin-top:12px}

/* ----------------
   Mobile: pin keyboard to bottom using dynamic viewport height
----------------- */
@media (max-width:900px){
  html,body,#root{height:100dvh}
  body{min-height:100dvh}
  .game{
    height:calc(100dvh - var(--header-height));
    min-height:0;
  }
  .gameBoard{flex:1 1 auto;min-height:0}
  .inputRowsContainer{flex:1 1 auto;min-height:0;max-height:none;overflow:auto}
  .keyboard{
    margin-top:auto;
    padding-bottom:calc(env(safe-area-inset-bottom) + 8px);
  }
}
