/* Duotrigordle (/duotrigordle, bundle /vars/duotrigordle, its CSS scoped to #root by .build/patch_legacy_b.js):
 * the game fills the viewport below the site header (--wp-duo-top is set by js/legacy-duotrigordle.js), boards scroll
 * inside, keyboard stays on screen. Home look: white bordered cells, light rounded keys, green/yellow, pill buttons. */
#root{height:auto!important}
#root .game{height:calc(100vh - var(--wp-duo-top,64px));height:calc(100dvh - var(--wp-duo-top,64px));min-height:480px;max-height:1000px;padding:0 4px;background:transparent!important;color:#14181f;font-family:Nunito,sans-serif}
#root .game.win .header{background:#dcfce7;border-radius:14px}
#root .game.lose .header{background:#fee2e2;border-radius:14px}
#root .game button{font-family:inherit}

#root .header{padding:4px 2px 6px}
#root .row-1{align-items:center}
#root .mode-switch{height:32px;padding:0 14px!important;border:1px solid #dbe1ee!important;border-radius:999px!important;background:#fff!important;font-size:14px!important;font-weight:700;color:#14181f!important}
#root .mode-switch:hover{background:#eef1f7!important}
#root .title{font-size:18px!important;font-weight:900;color:#14181f!important;white-space:nowrap}
#root .row-1 .icon{width:34px;height:34px;border:1px solid #dbe1ee!important;border-radius:10px!important;background:#fff!important}
#root .row-1 .icon:hover{background:#eef1f7!important}
#root .row-1 .icon img{width:20px!important}
#root .row-2{margin-top:4px;font-size:13px;font-weight:700;color:#55606f}
#root .row-2 .cannot-win{color:#dc2626}

#root .boards{scrollbar-width:thin}
#root .board{gap:2px!important;padding:0!important;background:transparent!important}
#root .cell{border:1px solid #dbe1ee;border-radius:4px;background:#fff!important;color:#14181f;font-weight:800}
#root .cell:not(.green):not(.yellow):has(.letter:not(:empty)){border-color:#e2e7f0;background:#eef1f7!important}
#root .cell.green{border-color:#16a34a;background:#16a34a!important;color:#fff}
#root .cell.yellow{border-color:#eab308;background:#eab308!important;color:#fff}
#root .game.color-blind .cell.green{border-color:#fb923c;background:#fb923c!important}
#root .game.color-blind .cell.yellow{border-color:#60a5fa;background:#60a5fa!important}
#root .cell.text-red{color:#dc2626}
#root .game:not(.hide-completed-boards) .board.complete{filter:none!important;opacity:.38}

#root .keyboard{gap:5px!important;padding:6px 0 4px!important}
#root .key{border:0!important;border-radius:8px!important;background-color:#e7ebf3;box-shadow:0 2px 0 rgba(15,23,42,.10);color:#000;font-weight:800;padding:0!important}
#root .key.enter-1,#root .key.enter-2,#root .key.enter-3{background:#d7e3f6!important}
#root .key.enter-1{border-radius:8px 8px 0 0!important;margin-bottom:-5px;box-shadow:none}
#root .key.enter-2{border-radius:8px 0 0 8px!important;margin-right:-5px}
#root .key.enter-3{border-radius:0 0 8px 0!important}

#root .popup-wrapper{z-index:50;padding:16px}
#root .popup{max-height:calc(100vh - 32px);border:0;border-radius:18px;box-shadow:0 18px 50px rgba(15,23,42,.25);color:#14181f}
#root .popup button{border:0!important;border-radius:999px!important;background:#e7ebf3!important;font-weight:800}
#root .popup button.close{background:#16a34a!important;color:#fff!important}
#root .result{border-radius:14px}
#root .result button{border:0!important;border-radius:999px!important;background:#16a34a!important;color:#fff!important;font-weight:800}
#root .text{border-radius:10px}
#root .stats-chart .bar{background:#16a34a}

#root .header,#root .row-1,#root .boards,#root .keyboard{min-width:0;max-width:100%}
#root .game{min-width:0;max-width:min(100%,600px)}
#root .game.wide{max-width:min(100%,1200px)}
#root .row-1 .title{overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){
  #root .row-1{column-gap:4px}
  #root .mode-switch{height:30px;padding:0 9px!important;font-size:12px!important}
  #root .title{font-size:14px!important}
  #root .row-1 .icon{width:30px;height:30px}
  #root .row-1 .icon img{width:17px!important}
}

#wp-duo-hint{margin:6px auto 2px}
#wp-duo-hint .wp-legacy-hint__word .wp-hint-tile{width:20px;height:22px;font-size:12px}