/* Minimal beta patch: only styles new layout + daily challenge box.
   It avoids touching .board, .headers, .cell, .tile, .modal, .btn, or your game colors. */



.daily-challenge-box{
  background:#ffffff;
  border:1px solid #dbe3f0;
  border-radius:16px;
  padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

.daily-challenge-kicker{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#4f46e5;
  margin-bottom:12px;
}

.daily-challenge-label{
  font-size:.82rem;
  color:#64748b;
  margin-bottom:6px;
}

.daily-challenge-word{
  display:block;
  width:100%;
  border:1px solid #c7d2fe;
  background:#eef2ff;
  color:#312e81;
  font-size:1.8rem;
  font-weight:900;
  letter-spacing:.04em;
  text-align:left;
  padding:14px 16px;
  border-radius:14px;
  cursor:pointer;
  margin-bottom:14px;
}

.daily-challenge-word:hover{
  background:#e0e7ff;
}

.daily-challenge-stats{
  display:grid;
  gap:10px;
  margin-bottom:14px;
}

.daily-stat{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:12px 14px;
}

.daily-stat-label{
  display:block;
  font-size:.8rem;
  color:#64748b;
  margin-bottom:4px;
}

.daily-submit-btn{
  width:100%;
  border:0;
  border-radius:12px;
  padding:12px 14px;
  font-weight:800;
  background:#4f46e5;
  color:#fff;
  cursor:pointer;
}

.daily-submit-btn:hover{
  background:#4338ca;
}

.board-section{
  min-width:0;
}

@media (max-width: 900px){
  .game-layout{
    grid-template-columns:1fr;
  }

  .daily-challenge-box{
    order:-1;
  }
}
.daily-challenge-box .daily-stat{
  background:#fff;
  border:1px solid #dbe3f0;
  border-radius:12px;
  padding:12px 14px;
}

.daily-challenge-box .daily-stat-label{
  display:block;
  font-size:.8rem;
  color:#64748b;
  margin-bottom:4px;
}

.daily-challenge-box .daily-stat-value,
.daily-challenge-box #highScoreVal,
.daily-challenge-box #dailyHighScore,
.daily-challenge-box #highScoreDisplay{
  display:block;
  font-size:1.35rem;
  font-weight:900;
  color:#312e81 !important;
  opacity:1 !important;
}
.daily-challenge-box .daily-stat strong,
#dailyHighText{
  display:block;
  font-size:1.35rem;
  font-weight:900;
  color:#312e81 !important;
  opacity:1 !important;
  visibility:visible !important;
}
.daily-challenge-box .daily-stat{
  background:#ffffff;
  border:1px solid #dbe3f0;
  border-radius:12px;
  padding:12px 14px;
}

.daily-challenge-box .daily-stat-label{
  display:block;
  font-size:.8rem;
  color:#64748b;
  margin-bottom:4px;
}
.game-layout{
  display:block !important;
}

.daily-challenge-box{
  display:block;
  width:auto !important;
  max-width:none !important;
  margin:0 0 16px 0 !important;
}

.board-section{
  display:block;
  width:100% !important;
  min-width:0;
}
.daily-challenge-stats-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin:12px 0 14px 0;
}

.daily-stat-inline{
  display:flex;
  flex-direction:column;
}

.daily-stat-inline.right{
  text-align:right;
  margin-left:auto;
}

.daily-stat-label{
  font-size:.8rem;
  color:#64748b;
  margin-bottom:4px;
}

.daily-stat-inline strong{
  font-size:1.2rem;
  font-weight:900;
  color:#312e81;
}

/* Cohesive responsive skin */
:root{
  --pm-bg:#f4f7fb;
  --pm-surface:#ffffff;
  --pm-surface-2:#eef4f8;
  --pm-ink:#172033;
  --pm-muted:#637083;
  --pm-line:#cfd9e6;
  --pm-accent:#246b73;
  --pm-accent-strong:#174e55;
  --pm-warm:#f1c766;
  --pm-shadow:0 10px 28px rgba(23,32,51,.10);
  --pm-radius:10px;
}

body{
  background:
    linear-gradient(180deg, #eaf1f7 0%, var(--pm-bg) 260px, #f8fafc 100%) !important;
  color:var(--pm-ink) !important;
}

.topbar{
  background:var(--pm-surface) !important;
  color:var(--pm-ink) !important;
  border-bottom:1px solid var(--pm-line) !important;
  box-shadow:0 2px 14px rgba(23,32,51,.06);
  padding:14px clamp(14px, 3vw, 28px) !important;
}

.brand{
  font-size:clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight:900 !important;
  color:var(--pm-accent-strong);
  margin:0 0 10px 0 !important;
}

.controls{
  gap:10px 12px !important;
  color:var(--pm-muted);
}

.control-panel{
  display:flex !important;
  align-items:stretch !important;
  gap:10px !important;
  flex-wrap:wrap;
}

.control-group,
.score-panel{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  padding:10px;
  border:1px solid var(--pm-line);
  border-radius:var(--pm-radius);
  background:var(--pm-surface-2);
}

.game-specs{
  flex:2 1 430px;
}

.room-controls{
  flex:1.2 1 290px;
}

.tool-controls{
  flex:0.9 1 230px;
}

.control-title,
.score-label{
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pm-accent-strong);
}

.control-row{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-width:0;
}

.field{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1 1 82px;
  min-width:74px;
  font-size:.78rem;
  color:var(--pm-muted) !important;
}

.words-field{
  flex:2 1 190px;
}

.field select,
.control-row input{
  width:100%;
}

.button-row{
  align-items:stretch;
}

.control-panel .spacer{
  display:none;
}

.room-controls .mp-input{
  max-width:none;
}

.room-controls .mp-status{
  min-width:0;
  color:var(--pm-muted);
  font-size:.82rem;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.button-row button,
.tool-controls button,
.tool-controls .toggle{
  flex:1 1 auto;
}

.score-panel{
  flex:0 0 104px;
  justify-content:center;
  align-items:flex-start;
  background:#fff;
}

.score-panel #score{
  font-size:1.65rem;
  font-weight:950;
  line-height:1;
  color:var(--pm-ink);
}

.controls label,
.score{
  font-weight:750;
  color:var(--pm-ink);
}

select,
button,
.btn{
  min-height:38px;
  border-radius:8px !important;
  border:1px solid var(--pm-line) !important;
  font-weight:800;
}

select{
  background:#fff;
  color:var(--pm-ink);
  padding:7px 30px 7px 10px;
}

button,
.btn{
  background:var(--pm-accent) !important;
  color:#fff !important;
  box-shadow:none !important;
}

button:hover,
.btn:hover{
  background:var(--pm-accent-strong) !important;
  filter:none !important;
}

.toggle{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:0 10px;
  border:1px solid var(--pm-line);
  border-radius:8px;
  background:#fff;
}

.container{
  width:min(1180px, 100%);
  max-width:none !important;
  padding:clamp(12px, 2.6vw, 24px) !important;
}

.game-layout{
  display:grid !important;
  grid-template-columns:minmax(230px, 280px) minmax(0, 1fr);
  gap:clamp(12px, 2vw, 20px);
  align-items:start;
}

.daily-challenge-box{
  background:#ecf8ed !important;
  border:1px solid #9bcf9f !important;
  border-radius:var(--pm-radius) !important;
  box-shadow:0 12px 28px rgba(33, 96, 48, .12) !important;
  padding:16px !important;
  margin:0 !important;
  color:var(--pm-ink);
}

.daily-challenge-kicker{
  color:var(--pm-accent-strong) !important;
  letter-spacing:.06em !important;
}

.daily-challenge-label,
.daily-stat-label{
  color:var(--pm-muted) !important;
}

.daily-challenge-word{
  background:#f7fff8 !important;
  color:#216030 !important;
  border:1px solid #9bcf9f !important;
  border-radius:8px !important;
  text-decoration:none !important;
  letter-spacing:0 !important;
}

.daily-challenge-word:hover{
  background:#dff3e1 !important;
}

.daily-stat-inline strong,
#dailyHighText,
#dailyScoreText{
  color:var(--pm-ink) !important;
}

.daily-submit-btn{
  background:var(--pm-accent) !important;
  border-color:var(--pm-accent) !important;
}

.daily-challenge-box.daily-disabled{
  opacity:.72;
}

.daily-challenge-box.daily-disabled::after{
  content:"Unavailable during room play";
  display:block;
  margin-top:10px;
  padding:7px 9px;
  border:1px solid var(--pm-line);
  border-radius:8px;
  background:#fff;
  color:var(--pm-muted);
  font-size:.82rem;
  font-weight:800;
}

.daily-challenge-word:disabled,
.daily-submit-btn:disabled{
  cursor:not-allowed;
  filter:grayscale(.25);
  opacity:.7;
}

.board-section{
  background:var(--pm-surface) !important;
  border:1px solid var(--pm-line);
  border-radius:var(--pm-radius);
  box-shadow:var(--pm-shadow);
  padding:clamp(10px, 1.8vw, 16px);
  overflow:auto;
}

.headers,
.board{
  gap:clamp(6px, 1vw, 9px) !important;
}

.headers{
  margin-bottom:clamp(6px, 1vw, 9px);
}

.hcell{
  background:#dfe9ee !important;
  color:var(--pm-ink) !important;
  border:1px solid #c6d3dd;
  border-radius:8px !important;
  min-height:46px;
  padding:9px 8px !important;
  letter-spacing:0 !important;
  box-shadow:inset 0 -1px 0 rgba(23,32,51,.06);
}

.hcell .ipa{
  color:var(--pm-ink) !important;
  font-size:clamp(20px, 2.6vw, 34px) !important;
  font-weight:900 !important;
  line-height:1 !important;
}

.hcell .ipa::after{
  content:none !important;
}

.speak-col{
  color:var(--pm-accent-strong);
  opacity:.8 !important;
}

.cell{
  border-radius:8px !important;
  border:2px solid rgba(23,32,51,.28);
  box-shadow:
    inset 0 -2px 0 rgba(23,32,51,.10),
    0 2px 5px rgba(23,32,51,.08);
}

.cell.empty{
  background:#fbfdff !important;
}

.board .cell.cell-owned{
  outline:4px solid var(--owner-color, #2563eb);
  outline-offset:-4px;
}

.cell.cell-blocked{
  background:#e5e7eb !important;
  color:#64748b !important;
  box-shadow:inset 0 0 0 2px #cbd5e1 !important;
}

.cell.cell-blocked input{
  cursor:not-allowed;
  color:#64748b !important;
  -webkit-text-fill-color:#64748b !important;
}

.cell input{
  font-size:clamp(20px, 2.7vw, 30px) !important;
  font-weight:900 !important;
  line-height:1 !important;
  height:auto !important;
  min-height:1.1em !important;
  padding:0 !important;
  min-width:0 !important;
}

.modal-content,
.modal-card{
  background:var(--pm-surface) !important;
  color:var(--pm-ink) !important;
  border-radius:10px !important;
  border:1px solid var(--pm-line) !important;
  box-shadow:0 18px 44px rgba(23,32,51,.22) !important;
}

.modal-header{
  color:var(--pm-ink) !important;
  border-bottom:1px solid var(--pm-line);
}

.modal-title,
.modal-header h3{
  color:var(--pm-ink) !important;
}

.modal-body,
#defBody{
  color:var(--pm-ink) !important;
}

.modal-body p,
.modal-body li,
.modal-body h4,
#defBody p,
#defBody li,
#defBody em{
  color:var(--pm-ink) !important;
}

.modal-close,
.close{
  background:transparent !important;
  color:var(--pm-ink) !important;
  border:1px solid var(--pm-line) !important;
  box-shadow:none !important;
}

.muted,
#hintInfo{
  color:var(--pm-muted) !important;
}

.hint-item{
  border:1px solid var(--pm-line) !important;
  border-radius:8px !important;
  background:#fff;
  color:var(--pm-ink);
}

.hint-item:hover{
  background:var(--pm-surface-2) !important;
}

.help-tabs{
  display:flex;
  gap:8px;
  margin:0 0 14px;
  padding:3px;
  border:1px solid var(--pm-line);
  border-radius:8px;
  background:var(--pm-surface-2);
}

.help-tab{
  flex:1 1 0;
  min-height:34px;
  padding:7px 10px;
  border:0 !important;
  border-radius:6px !important;
  background:transparent !important;
  color:var(--pm-muted) !important;
  box-shadow:none !important;
}

.help-tab.active{
  background:var(--pm-surface) !important;
  color:var(--pm-ink) !important;
  box-shadow:0 1px 4px rgba(23,32,51,.10) !important;
}

.help-page{
  display:none;
}

.help-page.active{
  display:block;
}

.sound-example-list strong{
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size:1.04em;
}

.ipa-help-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
  gap:7px;
  margin:8px 0 14px;
}

.ipa-help-grid div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  min-width:0;
  padding:7px 9px;
  border:1px solid var(--pm-line);
  border-radius:7px;
  background:#fff;
}

.ipa-help-grid strong{
  flex:0 0 auto;
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size:1.05em;
  color:var(--pm-accent-strong);
}

.ipa-help-grid span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--pm-muted);
  font-size:.92em;
}

@media (max-width: 900px){
  .game-layout{
    grid-template-columns:1fr;
  }

  .daily-challenge-box{
    order:0;
  }

  .daily-challenge-stats-row{
    max-width:520px;
  }
}

@media (max-width: 640px){
  .topbar{
    padding:12px !important;
  }

  .controls{
    align-items:stretch !important;
  }

  .control-panel{
    display:grid !important;
    grid-template-columns:1fr;
    gap:8px !important;
  }

  .control-group,
  .score-panel{
    padding:9px;
  }

  .control-row{
    gap:7px;
  }

  .control-group .field,
  .control-group button,
  .control-group .btn,
  .control-group .toggle,
  .control-group input{
    flex:1 1 calc(50% - 8px);
  }

  .game-specs #newBtn,
  .words-field{
    flex-basis:100%;
  }

  .score-panel{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }

  .score-panel #score{
    font-size:1.35rem;
  }

  .spacer{
    display:none;
  }

  .container{
    padding:10px !important;
  }

  .board-section{
    padding:8px;
  }

  .hcell{
    min-height:40px;
    font-size:14px !important;
    padding:7px 4px !important;
  }

  .hcell .ipa{
    font-size:clamp(18px, 6vw, 26px) !important;
  }

  .speak-col{
    margin-left:4px !important;
  }

  .daily-challenge-word{
    font-size:1.35rem !important;
    padding:11px 12px !important;
  }

  .board .cell.cell-current-turn{
    overflow:visible;
    z-index:4;
  }

  .cell-pass-btn{
    top:-8px !important;
    right:-6px !important;
    bottom:auto !important;
    min-width:0 !important;
    min-height:18px !important;
    padding:2px 5px !important;
    border:0 !important;
    border-radius:999px !important;
    background:#0f766e !important;
    color:#ecfeff !important;
    font-size:9px !important;
    line-height:1 !important;
    box-shadow:0 1px 5px rgba(15,23,42,.28) !important;
  }
}

/* Cell content layout: keep score, word, and phonetics in their own lanes. */
.board .cell .cell-wrap{
  position:relative !important;
  display:grid !important;
  place-items:center !important;
  width:100% !important;
  height:100% !important;
  gap:0 !important;
  padding:clamp(18px, 2.2vw, 26px) 6px clamp(18px, 2vw, 24px) 6px;
}

.board .cell input{
  position:relative;
  z-index:1;
  align-self:center;
  justify-self:center;
  max-width:100%;
}

.board .cell .score-stack{
  top:4px !important;
  right:4px !important;
  left:auto !important;
  z-index:4;
  align-items:flex-end;
  max-width:calc(100% - 8px);
  font-size:clamp(11px, 1.35vw, 15px);
  font-weight:900;
  line-height:1;
  text-align:right;
}

.board .cell .score-stack .chip{
  display:flex;
  gap:3px;
  justify-content:flex-end;
  padding:3px 6px;
  border-radius:6px;
  max-width:100%;
  box-shadow:0 1px 2px rgba(23,32,51,.12);
}

.board .cell .cell-ipa{
  position:absolute;
  left:50%;
  bottom:4px;
  transform:translateX(-50%);
  z-index:3;
  width:calc(100% - 10px);
  max-width:calc(100% - 10px);
  margin:0 !important;
  font-size:clamp(13px, 1.7vw, 19px) !important;
  font-weight:800;
  line-height:1.05;
  text-align:center;
  max-height:2.2em;
}

.board .cell .hint-penalty-badge{
  position:absolute !important;
  left:5px !important;
  top:5px !important;
  right:auto !important;
  z-index:6;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px !important;
  height:24px !important;
  min-width:24px;
  padding:0 !important;
  border:2px solid #fff;
  border-radius:50% !important;
  background:#b91c1c !important;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  font-size:11px !important;
  font-weight:950 !important;
  line-height:1 !important;
  letter-spacing:0;
  box-shadow:0 2px 6px rgba(15,23,42,.34);
  pointer-events:none;
}

.board .cell .hint-penalty-flash{
  left:auto !important;
  right:5px !important;
  top:5px !important;
  opacity:1;
  transition:opacity .35s ease;
}

.board .cell.cell-bonus-combo,
.board .cell.cell-anag.cell-bonus-combo,
.board .cell.cell-anag-word.cell-bonus-combo,
.board .cell.cell-anag-col.cell-bonus-combo{
  color:#111 !important;
}

.board .cell.cell-bonus-combo .score-stack,
.board .cell.cell-bonus-combo .score-stack .chip,
.board .cell.cell-bonus-combo .cell-ipa{
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
}

.board .cell.cell-bonus-combo input:not(.freq-top500):not(.freq-top5000){
  color:#111 !important;
  -webkit-text-fill-color:#111 !important;
}

@media (max-width: 640px){
  .board .cell .cell-wrap{
    padding:16px 4px 15px 4px;
  }

  .board .cell input{
    font-size:clamp(15px, 5.2vw, 22px) !important;
    max-height:1.15em;
  }

  .board .cell .score-stack{
    top:2px !important;
    right:2px !important;
    gap:1px;
    font-size:clamp(8px, 2.35vw, 10px) !important;
    line-height:1 !important;
    max-width:72%;
    max-height:32px;
    overflow:hidden;
  }

  .board .cell .score-stack .chip{
    min-width:0;
    padding:1px 3px;
    border-radius:4px;
    gap:2px;
  }

  .board .cell .score-stack .chip-label{
    display:inline;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .board .cell .score-stack .chip-value{
    display:inline;
    min-width:0;
  }

  .board .cell .cell-ipa{
    bottom:2px;
    width:calc(100% - 8px);
    max-width:calc(100% - 8px);
    font-size:clamp(9px, 2.8vw, 12px) !important;
    line-height:1 !important;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
    max-height:1.1em;
  }

  .board .cell .hint-penalty-badge{
    left:3px !important;
    top:3px !important;
    width:20px !important;
    height:20px !important;
    min-width:20px;
    border-width:1px;
    font-size:9px !important;
  }

  .board .cell .hint-penalty-flash{
    left:auto !important;
    right:3px !important;
    top:3px !important;
  }
}

@media (max-width: 430px) and (orientation: portrait){
  .board .cell .cell-wrap{
    padding:14px 3px 13px 3px;
  }

  .headers,
  .board{
    gap:5px !important;
  }

  .board .cell .score-stack{
    font-size:8px !important;
    max-width:74%;
    max-height:28px;
  }

  .board .cell .score-stack .chip{
    padding:1px 2px;
  }

  .board .cell .cell-ipa{
    font-size:clamp(8px, 2.45vw, 10px) !important;
  }
}