/*
  Crossword by Umami — Crossword Master reference UI lock
  --------------------------------------------------------
  Purpose: match the proven visual composition of Easybrain's Crossword Master
  gameplay without copying proprietary artwork/branding. This layer changes
  presentation only. Geometry, scoring, rack authority, API/server contracts,
  puzzle data and Phase-3 interaction logic remain authoritative and unchanged.
*/
:root{
  --cm-blue:#2f93ea;
  --cm-blue-strong:#2189e6;
  --cm-blue-soft:#eef7ff;
  --cm-clue:#dcebf6;
  --cm-grid:#aebbc7;
  --cm-ink:#20252d;
  --cm-muted:#7b828c;
  --cm-wall:#f2f5f7;
  --cm-answer:#ffffff;
  --cm-lane:#e9f5df;
  --cm-tile:#fff2d7;
  --cm-tile-edge:#e1c896;
}

/* Gameplay sits on one uninterrupted white surface, including desktop side space. */
html.mobile-game-active,html.mobile-game-active body{background:#fff!important}

/* The game surface is deliberately plain and light. Crossword Master makes the
   grid the product; it does not put the grid inside a decorative dark arena. */
.cm-reference-ui{
  width:100%!important;
  max-width:none!important;
  height:var(--vvh,100dvh)!important;
  min-height:0!important;
  max-height:var(--vvh,100dvh)!important;
  margin:0!important;
  padding:max(3px,var(--native-top,0px)) max(8px,var(--native-right,0px)) max(6px,var(--native-bottom,0px)) max(8px,var(--native-left,0px))!important;
  grid-template-rows:48px 48px minmax(0,1fr) 108px!important;
  gap:0!important;
  overflow:hidden!important;
  background:#fff!important;
  color:var(--cm-ink)!important;
  isolation:isolate;
}
.cm-reference-ui:before,.cm-reference-ui:after{display:none!important;content:none!important}

/* Simple native-like top bar: back, centered puzzle title, quiet utility area. */
.cm-reference-ui .duel-compact-top{
  width:min(760px,100%)!important;
  height:48px!important;min-height:48px!important;
  margin:0 auto!important;padding:0!important;
  display:grid!important;grid-template-columns:44px 1fr 44px!important;align-items:center!important;gap:0!important;
  position:relative!important;top:auto!important;
  background:#fff!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;
}
.cm-reference-ui .duel-compact-top:after{display:none!important;content:none!important}
.cm-reference-ui .duel-compact-top .back{
  width:40px!important;height:40px!important;min-width:40px!important;
  border:0!important;border-radius:50%!important;background:transparent!important;box-shadow:none!important;color:var(--cm-blue)!important;
}
.cm-reference-ui .duel-compact-top .back .ui-icon{width:24px!important;height:24px!important;stroke-width:2!important}
.cm-reference-ui .duel-title{align-items:center!important;text-align:center!important;justify-content:center!important;line-height:1.05!important}
.cm-reference-ui .duel-title b{font-size:15px!important;line-height:1!important;color:#1d2229!important;font-weight:760!important;letter-spacing:-.012em!important}
.cm-reference-ui .duel-title small{margin-top:4px!important;font-size:8px!important;line-height:1!important;color:#a0a5ad!important;font-weight:600!important;letter-spacing:.04em!important;text-transform:none!important}
.cm-reference-ui:not(.friend-arrowword) .duel-bag{visibility:hidden!important;width:40px!important;min-width:40px!important;height:40px!important;padding:0!important}
.cm-reference-ui .friend-top-actions{width:44px!important;justify-content:flex-end!important;gap:1px!important}
.cm-reference-ui .friend-deadline{display:none!important}
.cm-reference-ui .friend-resign.compact{width:40px!important;height:40px!important;background:transparent!important;color:#8c939c!important;border-radius:50%!important;font-size:21px!important}

/* Crossword Master's battle HUD is essentially one clean line: You [score] vs [score] Opponent. */
.cm-reference-ui .aw-scorebar{
  position:relative!important;
  width:min(760px,100%)!important;height:48px!important;min-height:48px!important;
  margin:0 auto!important;padding:2px 12px 7px!important;
  display:grid!important;grid-template-columns:1fr 50px 1fr!important;align-items:center!important;
  overflow:visible!important;background:#fff!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--cm-ink)!important;
}
.cm-reference-ui .aw-scorebar:before,.cm-reference-ui .aw-scorebar:after{display:none!important;content:none!important}
.cm-reference-ui .duelist{
  min-width:0!important;display:flex!important;align-items:center!important;gap:8px!important;padding:0!important;border-radius:0!important;
  filter:none!important;transform:none!important;transition:none!important;
}
.cm-reference-ui .duelist.ai{justify-content:flex-end!important}
.cm-reference-ui .duelist.active{filter:none!important;transform:none!important}
.cm-reference-ui .duelist.active:after{display:none!important;content:none!important}
.cm-reference-ui .duelist .avatar{
  width:auto!important;height:auto!important;min-width:0!important;padding:0!important;border:0!important;border-radius:0!important;
  display:block!important;background:transparent!important;box-shadow:none!important;color:#353b43!important;font-size:13px!important;font-weight:520!important;letter-spacing:0!important;text-transform:none!important;
}
.cm-reference-ui .duelist .avatar.player,
.cm-reference-ui .duelist .avatar.ai,
.cm-reference-ui .duelist .avatar.friend{background:transparent!important;border:0!important;box-shadow:none!important;color:#353b43!important}
.cm-reference-ui .duelist.ai .avatar{max-width:110px!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;text-align:right!important}
.cm-reference-ui .duelist>div{display:flex!important;align-items:center!important;gap:5px!important;min-width:0!important}
.cm-reference-ui .duelist small{display:none!important}
.cm-reference-ui .duelist b{
  min-width:39px!important;height:30px!important;padding:0 9px!important;border-radius:7px!important;
  display:grid!important;place-items:center!important;background:#f4f5f7!important;color:#9a9fa6!important;
  font-size:18px!important;font-weight:730!important;line-height:1!important;text-shadow:none!important;box-shadow:none!important;
}
.cm-reference-ui .duelist.active b{background:var(--cm-blue-soft)!important;color:var(--cm-blue)!important}
.cm-reference-ui .duel-vs{display:grid!important;place-items:center!important;position:relative!important;min-width:0!important;height:100%!important}
.cm-reference-ui .duel-vs>span{font-size:12px!important;color:#969ca5!important;font-weight:600!important;letter-spacing:0!important;text-transform:lowercase!important}
.cm-reference-ui .duel-vs>i,.cm-reference-ui .duel-vs>strong,.cm-reference-ui .duel-vs>.duel-phase-cue{display:none!important}

/* Board: thin square grid, pale-blue embedded clues, white answers, no dark chamber. */
.cm-reference-ui .duel-board-stage{
  align-self:center!important;justify-self:center!important;
  width:100%!important;height:100%!important;max-width:1000px!important;min-height:0!important;
  margin:0 auto!important;padding:1px!important;border:0!important;border-radius:0!important;
  display:grid!important;place-items:center!important;overflow:hidden!important;background:#fff!important;box-shadow:none!important;backdrop-filter:none!important;
}
.cm-reference-ui .duel-board-stage:before,.cm-reference-ui .duel-board-stage:after{display:none!important;content:none!important}
.cm-reference-ui .aw-scroller{
  width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;
  margin:0!important;padding:0!important;display:grid!important;place-items:center!important;overflow:hidden!important;
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
}
.cm-reference-ui .aw-grid{
  gap:1px!important;padding:1px!important;margin:auto!important;
  max-width:100%!important;max-height:100%!important;
  background:var(--cm-grid)!important;border:1px solid #8fa0ae!important;border-radius:0!important;
  box-shadow:none!important;filter:none!important;transform:none!important;
}
.cm-reference-ui .aw-cell{border-radius:0!important;box-shadow:none!important}
.cm-reference-ui .true-arrowword-grid .aw-wall{
  background:var(--cm-wall)!important;
  box-shadow:none!important;
}
.cm-reference-ui .true-arrowword-grid .aw-clue{
  padding:3px 3px 12px!important;
  background:var(--cm-clue)!important;color:#283039!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  text-align:left!important;filter:none!important;
}
.cm-reference-ui .true-arrowword-grid .aw-clue.complete{background:var(--cm-clue)!important}
.cm-reference-ui .true-arrowword-grid .aw-clue.active{
  background:#d9eaf7!important;
  box-shadow:inset 0 0 0 2px var(--cm-blue)!important;filter:none!important;z-index:3!important;
}
.cm-reference-ui .aw-clue-copy b{
  font-size:clamp(6.5px,calc(var(--aw-cell)*.145),11px)!important;line-height:1.02!important;font-weight:650!important;letter-spacing:-.02em!important;
  -webkit-line-clamp:4!important;
}
.cm-reference-ui .aw-clue.emoji{padding:2px 2px 11px!important}
.cm-reference-ui .aw-clue .aw-emoji{font-size:calc(var(--aw-cell)*.50)!important}
.cm-reference-ui .aw-directions{right:2px!important;bottom:1px!important;gap:0!important}
.cm-reference-ui .aw-directions i{
  width:12px!important;height:12px!important;border-radius:0!important;background:transparent!important;color:#687580!important;
  font-size:10px!important;font-weight:800!important;filter:none!important;
}
.cm-reference-ui .aw-directions i.on{background:transparent!important;color:#485a67!important;filter:none!important}
.cm-reference-ui .aw-clue em{display:none!important}
.cm-reference-ui .true-arrowword-grid .aw-answer{
  background:var(--cm-answer)!important;color:#252b32!important;border:0!important;border-radius:0!important;
  font-size:calc(var(--aw-cell)*.47)!important;font-weight:720!important;box-shadow:none!important;
}
.cm-reference-ui .true-arrowword-grid .aw-answer.locked{background:#fff!important;color:#252b32!important;box-shadow:none!important}
.cm-reference-ui .true-arrowword-grid .aw-answer.lane{
  background:var(--cm-lane)!important;
  box-shadow:none!important;
}
.cm-reference-ui .true-arrowword-grid .aw-answer.lane-open{
  background:var(--cm-lane)!important;
  box-shadow:inset 0 0 0 2px rgba(47,147,234,.65)!important;
  animation:none!important;
}
.cm-reference-ui .true-arrowword-grid .aw-answer.buffered{
  background:#fff0d3!important;color:#252b32!important;
  box-shadow:inset 0 0 0 2px var(--cm-blue)!important;
  animation:cm-tile-place .17s ease-out!important;
}
.cm-reference-ui .true-arrowword-grid .aw-answer.buffered .aw-return{color:#8c7343!important}
.cm-reference-ui .true-arrowword-grid .aw-answer.ai-preview{
  background:#e9f5df!important;color:#252b32!important;
  box-shadow:inset 0 0 0 2px #8acb69!important;
  animation:cm-tile-place .20s ease-out both!important;
}
.cm-reference-ui .true-arrowword-grid .aw-answer.recent-move{animation:cm-score-cell .35s ease-out!important}
.cm-reference-ui .aw-answer.drag-target{background:#edf7ff!important;box-shadow:inset 0 0 0 2px var(--cm-blue)!important;transform:none!important}

/* Rack: five warm paper/wood tiles floating directly beneath the board. */
.cm-reference-ui .aw-dock{
  width:min(760px,100%)!important;height:108px!important;min-height:108px!important;
  margin:0 auto!important;padding:4px 0 2px!important;border:0!important;border-radius:0!important;
  display:grid!important;grid-template-rows:59px 45px!important;gap:0!important;overflow:visible!important;
  background:#fff!important;box-shadow:none!important;backdrop-filter:none!important;filter:none!important;
}
.cm-reference-ui .aw-rack{
  height:59px!important;padding:0!important;gap:clamp(6px,1.6vw,10px)!important;align-items:center!important;justify-content:center!important;overflow:visible!important;
}
.cm-reference-ui .aw-tile{
  width:clamp(47px,8vw,56px)!important;height:55px!important;min-width:47px!important;min-height:55px!important;
  margin:0!important;border:1px solid #ead7ae!important;border-radius:7px!important;
  background:linear-gradient(180deg,#fff6e4,#ffefd0)!important;color:#222830!important;
  box-shadow:0 3px 0 var(--cm-tile-edge),0 5px 9px rgba(59,49,27,.10)!important;
  transform:none!important;transition:transform .12s ease,box-shadow .12s ease!important;
}
.cm-reference-ui .aw-tile span{font-size:21px!important;font-weight:760!important}
.cm-reference-ui .aw-tile small{display:none!important}
.cm-reference-ui .aw-tile.selected{
  transform:translateY(-4px)!important;color:#222830!important;background:linear-gradient(180deg,#fff7e7,#ffefd0)!important;
  border-color:#e0bd79!important;box-shadow:0 3px 0 #d6b66f,0 7px 11px rgba(63,50,24,.12),0 0 0 2px rgba(47,147,234,.28)!important;
}
.cm-reference-ui .aw-tile.used{opacity:.26!important;filter:grayscale(.35)!important;box-shadow:0 2px 0 #ddd2bd!important}

/* Crossword Master action grammar: one circular utility on each side and a single
   large central Pass/Submit control. The dormant alternate central action remains
   in the DOM so existing authority bindings and regression hooks are preserved. */
.cm-reference-ui .cm-actions{
  height:45px!important;margin:0 auto!important;padding:0 4px!important;
  display:grid!important;grid-template-columns:56px minmax(150px,280px) 56px!important;justify-content:center!important;align-items:center!important;gap:20px!important;
}
.cm-reference-ui .cm-action-hidden{display:none!important}
.cm-reference-ui .aw-action{
  height:42px!important;min-height:42px!important;padding:0!important;border:0!important;border-radius:21px!important;
  background:transparent!important;color:#6e7984!important;box-shadow:none!important;filter:none!important;
}
.cm-reference-ui .cm-side-action{width:46px!important;min-width:46px!important;justify-self:center!important;display:grid!important;place-items:center!important;position:relative!important}
.cm-reference-ui .cm-side-action>span{font-size:20px!important;line-height:1!important}
.cm-reference-ui .cm-side-action>b{position:absolute!important;top:35px!important;font-size:7px!important;font-weight:600!important;color:#9aa1a9!important;white-space:nowrap!important}
.cm-reference-ui .cm-main-action{
  width:100%!important;max-width:280px!important;justify-self:center!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  background:var(--cm-blue)!important;color:#fff!important;border:0!important;border-radius:22px!important;
  box-shadow:0 2px 3px rgba(27,113,185,.15)!important;
  font-size:15px!important;font-weight:700!important;
}
.cm-reference-ui .cm-main-action:not(:disabled):active{transform:scale(.985)!important;background:var(--cm-blue-strong)!important}
.cm-reference-ui .cm-main-action:disabled{opacity:.42!important;background:#c8dff2!important;color:#fff!important}
.cm-reference-ui .cm-main-action .cm-action-icon{font-size:14px!important}
.cm-reference-ui .cm-main-action b{font-size:14px!important;font-weight:700!important}
.cm-reference-ui .cm-main-action em{right:9px!important;top:50%!important;transform:translateY(-50%)!important;background:rgba(255,255,255,.22)!important;color:#fff!important}
.cm-reference-ui .cm-legacy-label{display:none!important}

/* Remove Phase-4 decorative motion that visually contradicts the reference. Keep
   tactile tile/score feedback only. */
.cm-reference-ui[data-motion-state="composing"] .aw-action.primary:not(:disabled){animation:none!important}
.cm-reference-ui[data-motion-state="checking"] .aw-grid{filter:none!important;transform:none!important}
.cm-reference-ui[data-motion-state="opponent-thinking"] .duel-board-stage:after{display:none!important}

@keyframes cm-tile-place{0%{transform:scale(.82);opacity:.45}100%{transform:none;opacity:1}}
@keyframes cm-score-cell{0%{background:#d8f5c8}100%{background:#fff}}

/* Desktop/tablet: scale the actual crossword, not the chrome around it. */
@media(min-width:521px){
  .cm-reference-ui{grid-template-rows:44px 44px minmax(0,1fr) 100px!important;padding-left:18px!important;padding-right:18px!important}
  .cm-reference-ui .duel-compact-top,.cm-reference-ui .aw-scorebar,.cm-reference-ui .aw-dock{width:min(820px,100%)!important}
  .cm-reference-ui .duel-compact-top{height:44px!important;min-height:44px!important}
  .cm-reference-ui .aw-scorebar{height:44px!important;min-height:44px!important;padding-top:1px!important;padding-bottom:4px!important}
  .cm-reference-ui .aw-dock{height:100px!important;min-height:100px!important;grid-template-rows:55px 43px!important;padding-top:1px!important}
  .cm-reference-ui .aw-rack{height:55px!important}
  .cm-reference-ui .aw-tile{height:52px!important;min-height:52px!important}
  .cm-reference-ui .duel-title b{font-size:16px!important}
  .cm-reference-ui .duelist .avatar{font-size:15px!important}
  .cm-reference-ui .duelist b{min-width:46px!important;height:31px!important;font-size:19px!important}
  .cm-reference-ui .cm-actions{height:43px!important;grid-template-columns:60px minmax(190px,310px) 60px!important;gap:28px!important}
  .cm-reference-ui .cm-main-action{height:40px!important;min-height:40px!important;max-width:310px!important}
}

/* Phone tuning mirrors the reference's dense one-screen composition. */
@media(max-width:520px){
  .cm-reference-ui{padding-left:max(3px,var(--native-left,0px))!important;padding-right:max(3px,var(--native-right,0px))!important;grid-template-rows:44px 44px minmax(0,1fr) 102px!important}
  .cm-reference-ui .duel-compact-top{height:44px!important;min-height:44px!important;grid-template-columns:40px 1fr 40px!important}
  .cm-reference-ui .duel-compact-top .back{width:36px!important;height:36px!important;min-width:36px!important}
  .cm-reference-ui .duel-title b{font-size:14px!important}.cm-reference-ui .duel-title small{font-size:7px!important;margin-top:3px!important}
  .cm-reference-ui .aw-scorebar{height:44px!important;min-height:44px!important;padding:1px 10px 5px!important;grid-template-columns:1fr 42px 1fr!important}
  .cm-reference-ui .duelist{gap:5px!important}.cm-reference-ui .duelist .avatar{font-size:12px!important}.cm-reference-ui .duelist b{min-width:35px!important;height:28px!important;font-size:16px!important;padding:0 7px!important}
  .cm-reference-ui .duel-vs>span{font-size:11px!important}
  .cm-reference-ui .aw-dock{height:102px!important;min-height:102px!important;grid-template-rows:56px 44px!important;padding-top:2px!important}
  .cm-reference-ui .aw-rack{height:56px!important;gap:6px!important}
  .cm-reference-ui .aw-tile{width:clamp(43px,13vw,51px)!important;height:51px!important;min-width:43px!important;min-height:51px!important;border-radius:6px!important}
  .cm-reference-ui .aw-tile span{font-size:20px!important}
  .cm-reference-ui .cm-actions{height:44px!important;grid-template-columns:48px minmax(132px,230px) 48px!important;gap:12px!important;padding:0 2px!important}
  .cm-reference-ui .cm-main-action{height:40px!important;min-height:40px!important;max-width:230px!important;border-radius:20px!important}
  .cm-reference-ui .cm-main-action b{font-size:13px!important}
  .cm-reference-ui .cm-side-action{width:42px!important;min-width:42px!important}
  .cm-reference-ui .cm-side-action>b{display:none!important}
  .cm-reference-ui .aw-grid{gap:1px!important}
  .cm-reference-ui .true-arrowword-grid .aw-clue{padding:2px 2px 10px!important}
}

@media(max-height:650px) and (max-width:520px){
  .cm-reference-ui{grid-template-rows:40px 40px minmax(0,1fr) 94px!important}
  .cm-reference-ui .duel-compact-top{height:40px!important;min-height:40px!important}
  .cm-reference-ui .aw-scorebar{height:40px!important;min-height:40px!important}
  .cm-reference-ui .aw-dock{height:94px!important;min-height:94px!important;grid-template-rows:52px 40px!important}
  .cm-reference-ui .aw-rack{height:52px!important}.cm-reference-ui .aw-tile{height:47px!important;min-height:47px!important}
  .cm-reference-ui .cm-actions{height:40px!important}.cm-reference-ui .cm-main-action{height:38px!important;min-height:38px!important}
}

/* Respect existing accessibility switches. */
.reduced-motion .cm-reference-ui *{animation:none!important;transition:none!important}
.high-contrast .cm-reference-ui .aw-grid{border-color:#000!important;background:#000!important}
.high-contrast .cm-reference-ui .true-arrowword-grid .aw-clue{background:#dcecff!important;color:#000!important}
.high-contrast .cm-reference-ui .true-arrowword-grid .aw-answer{background:#fff!important;color:#000!important}
.high-contrast .cm-reference-ui .true-arrowword-grid .aw-wall{background:#eee!important}
.high-contrast .cm-reference-ui .cm-main-action{background:#005bd7!important;color:#fff!important}