/* Premium unified game UI + restrained micro-interactions
   Keeps each game's mechanics intact while making the collection feel like one product. */
:root{
  --game-surface:#ffffff;
  --game-surface-soft:#f7f9fc;
  --game-border:#dfe6ee;
  --game-border-strong:#cfd9e5;
  --game-ink:#132033;
  --game-muted:#6b7890;
  --game-green:#5db84e;
  --game-green-dark:#45983c;
  --game-key:#dfe6f1;
  --game-key-hover:#d5deeb;
  --game-radius:20px;
  --game-shadow:0 16px 42px rgba(23,42,65,.075);
  --game-shadow-soft:0 8px 22px rgba(23,42,65,.055);
}

/* Shared game shell */
.mini-game,
.app-shell{
  --ui-ease:cubic-bezier(.2,.75,.25,1);
}
.mini-game{width:min(720px,calc(100% - 24px))!important}
.mg-bar{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:center!important;
  gap:8px!important;
  padding:10px 14px!important;
  border:1px solid var(--game-border)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:var(--game-shadow-soft)!important;
}
.mg-stat{min-width:0;padding:4px 8px;border-radius:11px;transition:background .2s ease,transform .2s ease}
.mg-stat:hover{background:#f5f8fb}
.mg-stat b{color:var(--game-green)!important;font-size:23px!important;font-weight:900!important;letter-spacing:-.02em}
.mg-stat span{color:var(--game-muted)!important;font-size:10px!important;font-weight:850!important;letter-spacing:.075em!important}
.mg-card{
  border:1px solid var(--game-border)!important;
  border-radius:var(--game-radius)!important;
  background:var(--game-surface)!important;
  box-shadow:var(--game-shadow)!important;
  padding:26px 24px!important;
}

/* Shared game actions */
.mg-btn,
.start-game-btn,
.copy-btn,
.share-btn{
  min-height:42px;
  border-radius:11px!important;
  font-weight:850!important;
  letter-spacing:.005em;
  box-shadow:0 5px 12px rgba(58,128,51,.14);
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease,background-color .14s ease!important;
}
.mg-btn:hover:not(:disabled),
.start-game-btn:hover:not(:disabled),
.copy-btn:hover:not(:disabled),
.share-btn:hover:not(:disabled){transform:translateY(-2px)!important;box-shadow:0 8px 18px rgba(58,128,51,.18)}
.mg-btn:active:not(:disabled),
.start-game-btn:active:not(:disabled),
.copy-btn:active:not(:disabled),
.share-btn:active:not(:disabled){transform:translateY(0) scale(.985)!important;box-shadow:0 3px 8px rgba(58,128,51,.14)}
.mg-btn:disabled{opacity:.48;cursor:not-allowed;box-shadow:none}
.mg-btn-ghost{background:#eef2f7!important;color:var(--game-ink)!important;box-shadow:none!important}
.mg-btn-ghost:hover:not(:disabled){background:#e5ebf3!important}
.mg-feedback,.cw-msg{
  color:var(--game-muted);
  font-size:14px;
  line-height:1.45;
  transition:color .18s ease;
}
.mg-feedback.good,.cw-msg.good{color:#348c2e!important}
.mg-feedback.bad,.cw-msg.bad{color:#c8463f!important}

/* Shared keyboard language */
.key,.hm-key,.qw-key,.cw-kb button{
  border:1px solid rgba(97,117,145,.08)!important;
  background:var(--game-key)!important;
  color:#1e2e44!important;
  box-shadow:0 2px 0 rgba(41,57,78,.08)!important;
  font-weight:850!important;
  transition:transform .1s ease,background-color .14s ease,filter .14s ease,box-shadow .14s ease!important;
  -webkit-tap-highlight-color:transparent;
}
.key:hover,.hm-key:hover:not(:disabled),.qw-key:hover,.cw-kb button:hover{background:var(--game-key-hover)!important;filter:none!important}
.key:active,.hm-key:active:not(:disabled),.qw-key:active,.cw-kb button:active,.wt-key-press{
  transform:translateY(2px) scale(.985)!important;
  box-shadow:0 0 0 rgba(41,57,78,0)!important;
}
.key.correct,.hm-key.hit,.qw-key .qw-g,.cw-kb button.correct{background:var(--game-green)!important;color:#fff!important}
.hm-key.miss,.key.absent,.cw-kb button.absent{background:#9aa5b4!important;color:#fff!important}
.key.present,.cw-kb button.present{background:var(--yellow,#d6ad35)!important;color:#fff!important}

/* Shared focus treatment */
.mini-game button:focus-visible,.app-shell button:focus-visible,.mini-game input:focus-visible,.app-shell input:focus-visible{
  outline:0!important;
  box-shadow:0 0 0 3px rgba(93,184,78,.22)!important;
}

/* Main Wordle / Phoodle / Kids */
.app-shell{max-width:700px!important;margin:0 auto!important;padding-top:2px!important}
.game-header{
  width:min(600px,100%);
  margin:0 auto 8px!important;
  padding:5px 6px 7px!important;
}
.small-btn{
  min-width:36px!important;
  height:36px!important;
  border:1px solid var(--game-border)!important;
  border-radius:10px!important;
  background:#f1f4f8!important;
  color:#5e6c82!important;
  box-shadow:0 3px 10px rgba(28,45,66,.04)!important;
  transition:transform .14s ease,background .14s ease,color .14s ease,border-color .14s ease!important;
}
.small-btn:hover{transform:translateY(-1px);background:#e8eef5!important;color:#27384f!important;border-color:#d4deea!important}
.board .tile{
  border-radius:7px!important;
  border-color:#d9e1eb!important;
  box-shadow:inset 0 -1px 0 rgba(31,48,68,.035);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.board .tile.filled{border-color:#9aa9bb!important;box-shadow:0 2px 8px rgba(33,49,68,.05)}
.keyboard{gap:6px!important}
.key-row{gap:5px!important}
.key{border-radius:7px!important;height:46px!important}
.panel:not(.hidden),.start-overlay:not(.hidden){animation:wtFadeIn .18s ease both}
.panel:not(.hidden) .panel-body,.panel:not(.hidden) .panel-head,.start-overlay:not(.hidden) .start-card{animation:wtModalIn .24s var(--ui-ease) both}
.panel,.start-card{border-radius:18px!important}

/* Hangman */
#hmGame .mg-card{max-width:660px;margin:0 auto}
.hm-figure svg{filter:drop-shadow(0 8px 16px rgba(26,43,63,.06))}
.hm-slot{width:36px;height:44px;border-bottom-width:3px!important;border-bottom-color:#33435a!important;font-size:28px!important;transition:border-color .2s ease,color .2s ease}
.hm-slot.filled{border-bottom-color:var(--game-green)!important}
.hm-keys{max-width:560px!important;gap:7px!important;margin-top:18px!important}
.hm-key{width:42px!important;height:43px!important;border-radius:8px!important}

/* Quordle */
.qw-game{width:min(780px,calc(100% - 20px))!important}
.qw-board{transition:transform .22s ease,box-shadow .22s ease,opacity .22s ease}
.qw-board.qw-solved{transform:translateY(-2px);box-shadow:0 0 0 2px rgba(93,184,78,.18)!important}
.qw-tile{border-color:#dce4ee!important;background:#fff;box-shadow:inset 0 -1px 0 rgba(31,48,68,.025)}
.qw-tile.qw-fill{border-color:#a8b5c5!important}
.qw-keyboard{border:1px solid #e4e9ef;box-shadow:var(--game-shadow-soft)!important}
.qw-key{border-radius:7px!important}

/* Connections */
.cn-card{max-width:590px!important}
.cn-grid{gap:8px!important}
.cn-tile{
  border:1px solid #e0e6ed!important;
  border-radius:10px!important;
  background:#eef1f5!important;
  color:#24344a!important;
  box-shadow:0 2px 0 rgba(31,48,68,.04);
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease,border-color .14s ease!important;
}
.cn-tile:hover{background:#e7ebf1!important;border-color:#d3dce7!important;transform:translateY(-1px)}
.cn-tile.cn-sel{background:#26364c!important;border-color:#26364c!important;color:#fff!important;box-shadow:0 5px 12px rgba(24,42,65,.16)}
.cn-band{border-radius:10px!important;box-shadow:0 5px 14px rgba(24,42,65,.08)}
.cn-dots i{box-shadow:0 0 0 2px rgba(93,184,78,.1)}

/* Letter Boxed */
.lb-card{max-width:520px!important}
.lb-box{filter:drop-shadow(0 10px 18px rgba(26,43,63,.055))}
.lb-node circle{stroke:#33435a!important;stroke-width:2.2!important;transition:fill .16s ease,stroke .16s ease,transform .16s ease!important;transform-box:fill-box;transform-origin:center}
.lb-node:hover circle{fill:#eef4f9!important;transform:scale(1.06)}
.lb-node.lb-active circle{stroke:var(--game-green)!important;stroke-width:4!important;filter:drop-shadow(0 0 4px rgba(93,184,78,.22))}
.lb-word{border:1px solid #dfe6ee;background:#f1f4f8!important;border-radius:8px!important}
.lb-link{color:#65748a!important;text-decoration:none!important}
.lb-link:hover{color:var(--game-green)!important}

/* Spelling Bee */
.sb-card{max-width:720px!important}
.sb-progress-track{height:7px!important;background:#edf1f5!important}
.sb-progress-fill{box-shadow:0 0 12px rgba(214,173,53,.18)}
.sb-found-panel{border-color:var(--game-border)!important;border-radius:15px!important;background:#fbfcfd;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.sb-cell{filter:drop-shadow(0 4px 5px rgba(26,43,63,.055));transition:transform .12s ease,filter .12s ease!important}
.sb-cell:hover{filter:drop-shadow(0 7px 8px rgba(26,43,63,.09)) brightness(.985)!important}
.sb-fword{border:1px solid #e2e8ee;background:#f2f5f8!important}

/* Mini Crossword */
.mc-card{max-width:720px!important}
.mc-clue-bar{border:1px solid #dae6f2!important;background:#f0f6fc!important;border-radius:11px!important}
.mc-grid{border-radius:9px!important;box-shadow:0 9px 20px rgba(20,34,52,.12)}
.mc-cell{transition:background-color .14s ease,transform .14s ease}
.mc-cell.mc-sel{box-shadow:inset 0 0 0 2px rgba(33,101,169,.28)}
.mc-cell.mc-ok{animation:wtCellGood .28s ease both}
.mc-cell.mc-bad{animation:wtCellBad .28s ease both}
.mc-clue{border:1px solid transparent!important;transition:background .14s ease,border-color .14s ease,transform .14s ease}
.mc-clue:hover{transform:translateX(2px);background:#f2f6fa!important}
.mc-clue.on{border-color:#d7e3ef!important;background:#eaf2fb!important}

/* Word Scramble */
.scram-letters{gap:8px!important}
.scram-tile{border:1px solid #cfe0cb!important;border-radius:10px!important;background:#eef7eb!important;box-shadow:0 5px 12px rgba(45,84,43,.06)}
.scram-input{border:1.5px solid #cfd9e4!important;border-radius:11px!important;background:#fbfcfd!important;box-shadow:inset 0 1px 2px rgba(28,45,66,.035)}
.scram-input:focus{border-color:var(--game-green)!important}
.mg-gameover{animation:wtModalIn .28s var(--ui-ease) both}

/* Cowordle (its page carries inline CSS, so intentional !important overrides) */
.cw-game{max-width:680px!important;width:min(680px,calc(100% - 20px))!important;padding:0!important}
.cw-setup{padding:24px!important;border:1px solid var(--game-border)!important;border-radius:var(--game-radius)!important;background:#fff!important;box-shadow:var(--game-shadow)!important}
.cw-mode{background:#eef2f7!important;border:1px solid #e0e6ed!important;padding:4px!important}
.cw-mode button{transition:background .14s ease,color .14s ease,box-shadow .14s ease!important}
.cw-mode button.on{box-shadow:0 3px 10px rgba(31,48,68,.09)!important}
.cw-player{border:1px solid var(--game-border)!important;border-radius:12px!important;box-shadow:0 3px 10px rgba(31,48,68,.035)!important}
.cw-player.cw-active{border-color:#9fd596!important;box-shadow:0 0 0 3px rgba(93,184,78,.09)!important}
.cw-tile{border-color:#dbe2eb!important;border-radius:7px!important;box-shadow:inset 0 -1px 0 rgba(31,48,68,.035)!important}
.cw-kb{padding:8px!important;border:1px solid #e4e9ef!important;border-radius:15px!important;background:#fff!important;box-shadow:var(--game-shadow-soft)!important}
.cw-kb button{border-radius:7px!important}
.cw-modal-overlay{backdrop-filter:blur(6px)!important;animation:wtFadeIn .18s ease both!important}
.cw-modal{border:1px solid rgba(255,255,255,.35)!important;border-radius:18px!important;box-shadow:0 30px 80px rgba(15,24,36,.28)!important;animation:wtModalIn .24s var(--ui-ease) both!important}
.cw-modal-head{padding:15px 18px!important}
.cw-name,.cw-invite input{border:1.5px solid #cfd9e4!important;border-radius:10px!important;box-shadow:inset 0 1px 2px rgba(28,45,66,.035)!important}
.cw-time-opts button{border:1px solid #e0e6ed!important;background:#eef2f7!important;transition:transform .12s ease,background .14s ease!important}
.cw-time-opts button:hover{transform:translateY(-1px)}

/* Restrained motion classes injected by premium-game-ui.js */
.wt-pop{animation:wtPop .16s var(--ui-ease) both!important}
.wt-reveal{animation:wtReveal .34s var(--ui-ease) both!important}
.wt-feedback-in{animation:wtFeedback .22s var(--ui-ease) both!important}
.wt-solve-pulse{animation:wtSolvePulse .72s var(--ui-ease) both!important}
.wt-new-item{animation:wtItemIn .26s var(--ui-ease) both!important}

@keyframes wtPop{0%{transform:scale(.88);opacity:.7}70%{transform:scale(1.045)}100%{transform:scale(1);opacity:1}}
@keyframes wtReveal{0%{transform:rotateX(0)}48%{transform:rotateX(82deg)}100%{transform:rotateX(0)}}
@keyframes wtFeedback{0%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
@keyframes wtSolvePulse{0%{filter:none}35%{filter:drop-shadow(0 0 10px rgba(93,184,78,.22))}100%{filter:none}}
@keyframes wtItemIn{0%{opacity:0;transform:translateY(7px) scale(.985)}100%{opacity:1;transform:none}}
@keyframes wtModalIn{0%{opacity:0;transform:translateY(10px) scale(.975)}100%{opacity:1;transform:none}}
@keyframes wtFadeIn{from{opacity:0}to{opacity:1}}
@keyframes wtCellGood{50%{transform:scale(1.05);background:#d8f1d3}100%{transform:scale(1)}}
@keyframes wtCellBad{25%,75%{transform:translateX(-2px)}50%{transform:translateX(2px)}100%{transform:none}}

/* Dark mode */
body.dark .mg-bar,body.dark .mg-card,body.dark .qw-keyboard,body.dark .cw-kb,body.dark .cw-setup{background:#182235!important;border-color:#344158!important}
body.dark .mg-stat:hover{background:#202c42}
body.dark .small-btn{background:#202c42!important;border-color:#344158!important;color:#c3cede!important}
body.dark .key,body.dark .hm-key,body.dark .qw-key,body.dark .cw-kb button{background:#2d3950!important;color:#eef3f9!important;border-color:#35445d!important}
body.dark .board .tile,body.dark .qw-tile{background:#141e30;border-color:#35445a!important}
body.dark .cn-tile{background:#273348!important;border-color:#35445a!important;color:#eef3f9!important}
body.dark .sb-found-panel{background:#151f31!important;border-color:#344158!important}
body.dark .sb-fword,body.dark .lb-word{background:#243147!important;border-color:#344158!important;color:#e9eef6!important}
body.dark .cw-setup,body.dark .cw-kb{color:#eef3f9!important}

@media(max-width:640px){
  .mini-game{width:calc(100% - 16px)!important}
  .mg-bar{padding:8px 8px!important;gap:3px!important;border-radius:14px!important}
  .mg-stat{padding:3px 2px!important}
  .mg-stat b{font-size:20px!important}
  .mg-stat span{font-size:8.8px!important;letter-spacing:.055em!important}
  .mg-card{padding:20px 14px!important;border-radius:17px!important}
  .mg-btn{min-height:40px;padding:10px 17px!important;font-size:14px!important}
  .hm-key{width:calc((100vw - 78px)/7)!important;max-width:40px!important;height:40px!important}
  .cw-setup{padding:18px 12px!important}
}

@media(prefers-reduced-motion:reduce){
  .wt-pop,.wt-reveal,.wt-feedback-in,.wt-solve-pulse,.wt-new-item,
  .panel:not(.hidden),.panel:not(.hidden) .panel-body,.panel:not(.hidden) .panel-head,
  .start-overlay:not(.hidden),.start-overlay:not(.hidden) .start-card,.cw-modal-overlay,.cw-modal,.mg-gameover{
    animation:none!important;
  }
  .mini-game *,.app-shell *{scroll-behavior:auto!important}
}

/* Preserve game-state colours in dark mode after the shared dark surfaces above. */
body.dark .board .tile.correct,body.dark .key.correct,
body.dark .hm-key.hit,
body.dark .qw-tile.qw-g,
body.dark .cw-tile.correct,body.dark .cw-kb button.correct{
  background:var(--game-green)!important;border-color:var(--game-green)!important;color:#fff!important;
}
body.dark .board .tile.present,body.dark .key.present,
body.dark .qw-tile.qw-y,
body.dark .cw-tile.present,body.dark .cw-kb button.present{
  background:var(--yellow,#d6ad35)!important;border-color:var(--yellow,#d6ad35)!important;color:#fff!important;
}
body.dark .board .tile.absent,body.dark .key.absent,
body.dark .hm-key.miss,
body.dark .qw-tile.qw-x,
body.dark .cw-tile.absent,body.dark .cw-kb button.absent{
  background:#747f8d!important;border-color:#747f8d!important;color:#fff!important;
}
body.dark .cn-tile.cn-sel{background:#3a4661!important;border-color:#53627c!important;color:#fff!important}

/* Final unified-game polish: Montserrat, compact Cowordle, clear selected states. */
.mini-game,.app-shell,
.mini-game button,.mini-game input,.mini-game select,.mini-game textarea,
.app-shell button,.app-shell input,.app-shell select,.app-shell textarea{
  font-family:'Montserrat',Arial,sans-serif!important;
}

/* Cowordle was visually wider than the rest of its setup content. */
.cw-game{
  max-width:620px!important;
  width:min(620px,calc(100% - 24px))!important;
}
.cw-setup{
  padding:28px 26px 30px!important;
}
.cw-mode{
  margin-top:2px!important;
  margin-bottom:22px!important;
}
.cw-setup #cwInviteLead,
.cw-setup #cwPassBox>p{
  max-width:500px;
  margin:0 auto 18px!important;
  line-height:1.52;
  color:#243249;
}
.cw-time{
  margin:18px 0 14px!important;
}
.cw-time-label{
  margin-bottom:10px!important;
  color:#162136!important;
}
.cw-time-opts{
  gap:8px!important;
}
.cw-time-opts button{
  min-width:54px!important;
  min-height:42px!important;
  padding:9px 14px!important;
  color:#253249!important;
  font-weight:800!important;
}
.cw-time-opts button.on,
.cw-time-opts button[aria-pressed="true"]{
  background:var(--game-green)!important;
  border-color:var(--game-green)!important;
  color:#fff!important;
  box-shadow:0 5px 13px rgba(69,152,60,.18)!important;
}
.cw-time-opts button.on:hover{
  background:var(--game-green-dark)!important;
}
.cw-setup>.mg-btn,
#cwInviteBox>.mg-btn,
#cwPassBox>.mg-btn{
  margin-top:6px!important;
}

@media(max-width:640px){
  .cw-game{width:calc(100% - 20px)!important}
  .cw-setup{padding:24px 18px 26px!important}
  .cw-mode{margin-bottom:18px!important}
  .cw-time-opts{gap:6px!important}
  .cw-time-opts button{min-width:48px!important;padding:8px 10px!important}
}


/* Low-height laptop fit: keep the full board + keyboard visible without forcing a page scroll. */
@media (min-width:761px) and (max-height:760px){
  .app-shell .key{height:clamp(30px,5.1vh,38px)!important;font-size:12px!important;}
  .app-shell .keyboard{gap:4px!important;}
  .app-shell .key-row{gap:4px!important;}
}
@media (min-width:761px) and (max-height:620px){
  .app-shell .key{height:30px!important;font-size:11px!important;}
  .app-shell .keyboard{gap:3px!important;}
  .app-shell .key-row{gap:3px!important;}
}


/* Cowordle dark-mode contrast — final override after compact setup rules. */
body.dark .cw-mode{
  background:#202c42!important;
  border-color:#344158!important;
}
body.dark .cw-mode button{color:#b8c3d3!important;}
body.dark .cw-mode button.on{
  background:#2d3950!important;
  color:#f8fafc!important;
  box-shadow:0 3px 10px rgba(0,0,0,.18)!important;
}
body.dark .cw-setup #cwInviteLead,
body.dark .cw-setup #cwPassBox>p,
body.dark .cw-time-label,
body.dark .cw-join-title{
  color:#e5ebf5!important;
}
body.dark .cw-time-opts button{
  background:#2d3950!important;
  border-color:#3b4a63!important;
  color:#eef3f9!important;
}
body.dark .cw-time-opts button.on,
body.dark .cw-time-opts button[aria-pressed="true"]{
  background:var(--game-green)!important;
  border-color:var(--game-green)!important;
  color:#fff!important;
}
body.dark .cw-invite input,
body.dark .cw-name{
  background:#111a2b!important;
  border-color:#3b4a63!important;
  color:#eef3fb!important;
}
body.dark .cw-player b{color:#f7f9fc!important;}
body.dark .cw-player span,
body.dark .cw-owner{color:#aeb8ca!important;}
body.dark .cw-vs{color:#aeb8ca!important;}