/* ============================================================
   OrdJagt v0.3.24 — STRICT TEMPLATE LAYOUT
   This stylesheet is loaded AFTER ordjagt-game.css.
   It deliberately owns the final geometry for:
   - Desktop / landscape canvas: 16:9
   - Mobile portrait canvas: 9:16
   The game scales as one canvas and every zone is clipped to its slot.
   ============================================================ */

#ordjagt-game-root,
#ordjagt-game-root *,
#ordjagt-game-root *::before,
#ordjagt-game-root *::after {
  box-sizing: border-box !important;
}

#ordjagt-game-root {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #020806 !important;
  position: relative !important;
}

#ordjagt-game-root .ordjagt-app-wrap {
  width: 100% !important;
  height: var(--oj-avail-h, 100dvh) !important;
  min-height: var(--oj-avail-h, 100dvh) !important;
  max-height: var(--oj-avail-h, 100dvh) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}

#ordjagt-game-root .ordjagt-app.ordjagt-blueprint-canvas {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-position: center center !important;
  background-size: cover !important;
}

#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app.ordjagt-blueprint-canvas {
  width: min(var(--oj-avail-w, 100vw), calc(var(--oj-avail-h, 100dvh) * 16 / 9)) !important;
  height: min(var(--oj-avail-h, 100dvh), calc(var(--oj-avail-w, 100vw) * 9 / 16)) !important;
  aspect-ratio: 16 / 9 !important;
}

#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app.ordjagt-blueprint-canvas {
  width: min(var(--oj-avail-w, 100vw), calc(var(--oj-avail-h, 100dvh) * 9 / 16)) !important;
  height: min(var(--oj-avail-h, 100dvh), calc(var(--oj-avail-w, 100vw) * 16 / 9)) !important;
  aspect-ratio: 9 / 16 !important;
}

/* The app canvas is the only positioning context. */
#ordjagt-game-root .ordjagt-app-hud {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  z-index: 60 !important;
}
#ordjagt-game-root .ordjagt-app-hud > * { pointer-events: auto !important; }
#ordjagt-game-root .ordjagt-app-frame,
#ordjagt-game-root .ordjagt-board-title { display: none !important; }
#ordjagt-game-root .ordjagt-app-vignette {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: .30 !important;
  z-index: 1 !important;
}

/* Strict board containment. JS calculates the exact cell size for this slot. */
#ordjagt-game-root .ordjagt-playfield {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: var(--oj-board-inset, 6px) !important;
  margin: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
  contain: layout paint !important;
}
#ordjagt-game-root .ordjagt-board {
  position: static !important;
  inset: auto !important;
  display: grid !important;
  grid-template-columns: repeat(var(--grid-cols), var(--oj-cell)) !important;
  grid-template-rows: repeat(var(--grid-rows), var(--oj-cell)) !important;
  grid-auto-columns: unset !important;
  grid-auto-rows: unset !important;
  gap: var(--oj-board-gap, 3px) !important;
  width: max-content !important;
  height: max-content !important;
  max-width: 100% !important;
  max-height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  justify-content: center !important;
  align-content: center !important;
  flex: 0 0 auto !important;
}
#ordjagt-game-root .ordjagt-cell {
  width: var(--oj-cell) !important;
  height: var(--oj-cell) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  font-size: calc(var(--oj-cell) * .56) !important;
}
#ordjagt-game-root .ordjagt-cell.empty {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Shared slot safety. */
#ordjagt-game-root .ordjagt-slot,
#ordjagt-game-root .ordjagt-clue-zone,
#ordjagt-game-root .ordjagt-control-zone,
#ordjagt-game-root .ordjagt-bank-zone,
#ordjagt-game-root .ordjagt-word-display {
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
}
#ordjagt-game-root .ordjagt-clue-zone,
#ordjagt-game-root .ordjagt-control-zone,
#ordjagt-game-root .ordjagt-bank-zone {
  overflow: hidden !important;
}
#ordjagt-game-root .ordjagt-clue,
#ordjagt-game-root .ordjagt-bank,
#ordjagt-game-root .ordjagt-control-zone > * {
  max-width: 100% !important;
  max-height: 100% !important;
}

/* ============================================================
   DESKTOP / LANDSCAPE TEMPLATE — FIXED 16:9
   ============================================================ */
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-logo-block {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 70 !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-logo-block .ordjagt-app-logo {
  position: absolute !important;
  left: 1.4% !important;
  top: 1.2% !important;
  width: 15.8% !important;
  height: 13.2% !important;
  margin: 0 !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-logo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left top !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-level-pill.ordjagt-level-badge {
  position: absolute !important;
  left: 17.7% !important;
  top: 1.4% !important;
  width: 8.8% !important;
  height: 12.6% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-level-badge-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-stats {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
  z-index: 72 !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-stats .ordjagt-status {
  position: absolute !important;
  top: 2.1% !important;
  height: 6.6% !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-status-timer { left: 42.0% !important; width: 14.0% !important; height: 7.0% !important; }
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-status-coins { left: 59.0% !important; width: 10.2% !important; }
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-status-energy { left: 69.8% !important; width: 10.5% !important; }
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-status-gems { left: 80.9% !important; width: 9.6% !important; }
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-status b { font-size: clamp(9px, .86vw, 18px) !important; }
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-mini-plus { right: 0 !important; height: 70% !important; width: auto !important; }

#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-icons {
  position: absolute !important;
  right: 1.0% !important;
  left: auto !important;
  top: 1.4% !important;
  width: 7.6% !important;
  height: 7.2% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 3% !important;
  overflow: hidden !important;
  z-index: 74 !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-icons .ordjagt-icon-btn {
  width: 31% !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  min-width: 0 !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-mobile-menu-toggle { display: none !important; }

/* Main content slots. The grid and clue never share pixels. */
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-playfield {
  position: absolute !important;
  left: 10.0% !important;
  top: 17.0% !important;
  width: 51.0% !important;
  height: 56.5% !important;
  z-index: 20 !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue-zone {
  position: absolute !important;
  left: 64.0% !important;
  top: 17.0% !important;
  width: 28.0% !important;
  height: 44.0% !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 32 !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue {
  width: 100% !important;
  height: 100% !important;
  padding: 15% 9% 9% !important;
  overflow: hidden !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue span { font-size: clamp(10px, 1.08vw, 21px) !important; }
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue p {
  max-width: 100% !important;
  font-size: clamp(13px, 1.38vw, 27px) !important;
  line-height: 1.22 !important;
  overflow-wrap: anywhere !important;
}

#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-control-zone,
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-control-zone.ordjagt-control-row {
  position: absolute !important;
  left: 64.0% !important;
  top: 63.0% !important;
  bottom: auto !important;
  width: 28.0% !important;
  height: 9.5% !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1.15fr .9fr !important;
  gap: 1.2% !important;
  padding: 0 !important;
  margin: 0 !important;
  z-index: 35 !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-control-zone .ordjagt-big-action,
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-control-zone .ordjagt-small-action {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: .25em !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-control-zone .ordjagt-big-action span,
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-control-zone .ordjagt-small-action {
  font-size: clamp(8px, .86vw, 17px) !important;
  white-space: nowrap !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-control-zone .ordjagt-big-action em { display: none !important; }

#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-word-display {
  position: absolute !important;
  left: 10.0% !important;
  top: 73.8% !important;
  bottom: auto !important;
  width: 51.0% !important;
  height: 7.0% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: clamp(22px, 2.6vw, 52px) !important;
  z-index: 38 !important;
  overflow: hidden !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-bank-zone,
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-bank-zone[style] {
  position: absolute !important;
  left: 17.0% !important;
  bottom: 2.0% !important;
  width: 66.0% !important;
  height: 11.8% !important;
  padding: 1.0% 1.6% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, rgba(76,38,12,.92), rgba(28,15,7,.94)) !important;
  border: 2px solid rgba(183,128,47,.92) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.42) !important;
  z-index: 36 !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-typed.ordjagt-bank-title { display: none !important; }
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-bank {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 1.3% !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-letter {
  flex: 0 1 min(11.8%, 112px) !important;
  width: min(11.8%, 112px) !important;
  max-width: 112px !important;
  height: 86% !important;
  aspect-ratio: 1 !important;
  font-size: clamp(20px, 2.45vw, 48px) !important;
}

#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-side-zone.ordjagt-side-dropdown-shell {
  position: absolute !important;
  right: .7% !important;
  left: auto !important;
  top: 20% !important;
  width: 5.7% !important;
  height: 42% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 44 !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-mascot-tip { display: none !important; }

/* ============================================================
   MOBILE PORTRAIT TEMPLATE — FIXED 9:16
   v0.3.24 follows the approved mobile reference:
   top HUD -> timer -> centered crossword -> full-width clue ->
   action row -> letter tray. No side-by-side clue/grid split.
   ============================================================ */
#ordjagt-game-root.ordjagt-blueprint-mobile,
body.ordjagt-mobile-app-active #ordjagt-game-root.ordjagt-blueprint-mobile {
  height: var(--oj-avail-h, 100dvh) !important;
  min-height: var(--oj-avail-h, 100dvh) !important;
  max-height: var(--oj-avail-h, 100dvh) !important;
  overflow: hidden !important;
}

/* Branding row. */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-logo-block {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 70 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-logo-block .ordjagt-app-logo {
  position: absolute !important;
  left: 2.0% !important;
  top: 1.0% !important;
  width: 25.5% !important;
  height: 11.5% !important;
  margin: 0 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-logo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left top !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-level-pill.ordjagt-level-badge {
  position: absolute !important;
  left: 29.0% !important;
  top: 4.5% !important;
  width: 11.5% !important;
  height: 7.2% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-level-badge-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Resources use fixed reference positions; width/height are overridden by
   saved template settings so the backend controls remain the source of truth. */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
  z-index: 72 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status {
  position: absolute !important;
  margin: 0 !important;
  transform: none !important;
  overflow: visible !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-coins { left: 41.3% !important; top: 5.9% !important; width: 16.5% !important; height: 4.8% !important; }
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-energy { left: 58.7% !important; top: 5.9% !important; width: 15.9% !important; height: 4.8% !important; }
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-gems { left: 75.2% !important; top: 5.9% !important; width: 13.6% !important; height: 4.8% !important; }
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-timer { left: 38.5% !important; top: 13.4% !important; width: 26.0% !important; height: 4.0% !important; }
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-status b {
  font-size: clamp(9px, 2.85vw, 17px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-mini-plus {
  right: -1% !important;
  width: auto !important;
  height: 66% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-icons { display: none !important; }
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-mobile-menu-toggle {
  display: flex !important;
  position: absolute !important;
  right: 1.8% !important;
  left: auto !important;
  top: 5.7% !important;
  width: 8.2% !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  z-index: 92 !important;
}

/* Crossword: one centered full-width zone, matching the approved reference. */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-playfield {
  position: absolute !important;
  left: 8.5% !important;
  top: 20.2% !important;
  width: 83.0% !important;
  height: 39.0% !important;
  z-index: 20 !important;
}

/* Full-width clue card below the crossword. */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue-zone {
  position: absolute !important;
  left: 14.0% !important;
  top: 62.3% !important;
  width: 72.0% !important;
  height: 13.6% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  z-index: 32 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue {
  width: 100% !important;
  height: 100% !important;
  padding: 10.5% 7% 5.5% !important;
  overflow: visible !important;
  border-radius: 16px !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue span {
  top: -13% !important;
  width: 46% !important;
  height: 27% !important;
  font-size: clamp(10px, 3.0vw, 18px) !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue p {
  max-width: 100% !important;
  margin: 0 !important;
  font-size: clamp(14px, 4.05vw, 24px) !important;
  line-height: 1.2 !important;
  overflow-wrap: anywhere !important;
  text-align: center !important;
}

/* Typed word is kept inside a reserved gap and is invisible when empty. */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-word-display {
  position: absolute !important;
  left: 14.0% !important;
  top: 75.8% !important;
  bottom: auto !important;
  width: 72.0% !important;
  height: 1.5% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  font-size: clamp(12px, 3.4vw, 20px) !important;
  line-height: 1 !important;
  overflow: hidden !important;
  z-index: 38 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-word-display:empty { opacity: 0 !important; }

/* Action row and letter tray follow the reference bottom stack. */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone.ordjagt-control-row {
  position: absolute !important;
  left: 5.2% !important;
  top: 77.7% !important;
  bottom: auto !important;
  width: 89.6% !important;
  height: 5.8% !important;
  display: grid !important;
  grid-template-columns: 1fr 1.15fr 1.22fr .95fr !important;
  gap: 1.4% !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  z-index: 35 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone .ordjagt-big-action,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone .ordjagt-small-action {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 .15em !important;
  margin: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone .ordjagt-big-action span,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone .ordjagt-small-action {
  font-size: clamp(8px, 2.65vw, 16px) !important;
  white-space: nowrap !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone .ordjagt-big-action b { font-size: clamp(7px, 2.2vw, 12px) !important; }
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone .ordjagt-big-action em { display: none !important; }

#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-bank-zone,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-bank-zone[style] {
  position: absolute !important;
  left: 5.0% !important;
  top: 85.0% !important;
  bottom: auto !important;
  width: 90.0% !important;
  height: 8.3% !important;
  padding: .8% 1.1% !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, rgba(255,242,201,.97), rgba(229,190,111,.95)) !important;
  border: 2px solid rgba(139,87,27,.84) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.32) !important;
  z-index: 36 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-typed.ordjagt-bank-title { display: none !important; }
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-bank {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1.0% !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-letter {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 91% !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 10px !important;
  font-size: clamp(18px, 6.0vw, 36px) !important;
  line-height: 1 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-side-zone.ordjagt-side-dropdown-shell,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-mascot-tip { display: none !important; }

/* Preview-only diagnostics. */
#ordjagt-game-root.ordjagt-template-preview-root::after {
  content: 'GRID ' attr(data-oj-grid-fit) ' · ' attr(data-oj-grid-size);
  position: absolute !important;
  right: 1.2% !important;
  bottom: .8% !important;
  z-index: 999 !important;
  padding: .28em .55em !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.68) !important;
  color: #fff !important;
  font: 700 clamp(8px, .75vw, 12px)/1.2 system-ui, sans-serif !important;
  letter-spacing: .03em !important;
  pointer-events: none !important;
}
#ordjagt-game-root.ordjagt-template-preview-root[data-oj-grid-fit="overflow"]::after {
  background: rgba(168, 29, 29, .92) !important;
}

/* ============================================================
   OrdJagt v0.3.25 — POLISHED REFERENCE LAYOUT
   Final geometry pass based on the approved 16:9 and 9:16 artwork.
   These rules intentionally override every earlier legacy breakpoint.
   ============================================================ */

#ordjagt-game-root .ordjagt-topbar-frame {
  position: absolute !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  background: transparent center / 100% 100% no-repeat !important;
  background-image: var(--oj-asset) !important;
  filter: drop-shadow(0 5px 9px rgba(0,0,0,.46)) !important;
  z-index: 66 !important;
}

#ordjagt-game-root .ordjagt-experience {
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  gap: 4% !important;
  padding: 4% 5% !important;
  color: #fff8dc !important;
  background: linear-gradient(180deg, rgba(62,31,12,.96), rgba(25,14,7,.96)) !important;
  border: 2px solid #c8892d !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 0 2px rgba(255,214,112,.15), 0 5px 12px rgba(0,0,0,.42) !important;
  overflow: hidden !important;
  z-index: 76 !important;
}
#ordjagt-game-root .ordjagt-experience-star {
  flex: 0 0 auto !important;
  color: #ffd04f !important;
  font-size: clamp(16px, 2.0vw, 38px) !important;
  line-height: 1 !important;
  text-shadow: 0 2px 0 #8c4d00, 0 0 7px rgba(255,203,59,.65) !important;
}
#ordjagt-game-root .ordjagt-experience-copy {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 5% !important;
  row-gap: 7% !important;
}
#ordjagt-game-root .ordjagt-experience-copy b,
#ordjagt-game-root .ordjagt-experience-copy span {
  font-size: clamp(8px, .78vw, 15px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 2px rgba(0,0,0,.9) !important;
}
#ordjagt-game-root .ordjagt-experience-copy i {
  grid-column: 1 / -1 !important;
  display: block !important;
  height: clamp(4px, .55vw, 10px) !important;
  overflow: hidden !important;
  background: #2e2515 !important;
  border: 1px solid #a8792d !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.7) !important;
}
#ordjagt-game-root .ordjagt-experience-copy i em {
  display: block !important;
  height: 100% !important;
  background: linear-gradient(180deg,#9df33f,#38a719) !important;
  border-radius: inherit !important;
  box-shadow: 0 0 7px rgba(91,224,43,.55) !important;
}

#ordjagt-game-root .ordjagt-clue {
  position: relative !important;
  background: linear-gradient(180deg, rgba(255,242,202,.98), rgba(246,204,119,.98)) !important;
  border: 3px solid #9a5b1e !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.50), 0 10px 18px rgba(0,0,0,.36) !important;
  color: #2d1609 !important;
}
#ordjagt-game-root .ordjagt-clue > span {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  place-items: center !important;
  color: #fff8dc !important;
  text-transform: uppercase !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  background: linear-gradient(180deg,#53a71e,#216d10) !important;
  border: 2px solid #8b571e !important;
  box-shadow: inset 0 0 0 1px rgba(255,240,150,.6), 0 5px 10px rgba(0,0,0,.33) !important;
  border-radius: 10px !important;
  z-index: 3 !important;
}
#ordjagt-game-root .ordjagt-clue-ornament {
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: #27791f !important;
  font-family: Georgia, serif !important;
  line-height: 1 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.65) !important;
  z-index: 2 !important;
}
#ordjagt-game-root .ordjagt-clue-ornament::before,
#ordjagt-game-root .ordjagt-clue-ornament::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  width: 330% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(121,83,39,.6)) !important;
}
#ordjagt-game-root .ordjagt-clue-ornament::before { right: 150% !important; }
#ordjagt-game-root .ordjagt-clue-ornament::after { left: 150% !important; transform: scaleX(-1) !important; }
#ordjagt-game-root .ordjagt-clue p {
  color: #2b160b !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55) !important;
}
#ordjagt-game-root .ordjagt-clue-category {
  position: absolute !important;
  left: 12% !important;
  right: 12% !important;
  bottom: 5.5% !important;
  height: 18% !important;
  display: grid !important;
  place-items: center !important;
  color: #fff9dc !important;
  background: linear-gradient(180deg,#2d8b1a,#13580c) !important;
  border: 2px solid #8b571e !important;
  border-radius: 9px !important;
  box-shadow: inset 0 0 0 1px rgba(255,236,137,.45), 0 4px 8px rgba(0,0,0,.28) !important;
  text-transform: uppercase !important;
  overflow: visible !important;
}
#ordjagt-game-root .ordjagt-clue-category small {
  position: absolute !important;
  top: -45% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: .2em 1.2em !important;
  border-radius: 999px !important;
  background: #4c2b13 !important;
  border: 1px solid #b98232 !important;
  color: #fff2c9 !important;
  font-weight: 800 !important;
  font-size: .62em !important;
  white-space: nowrap !important;
}
#ordjagt-game-root .ordjagt-clue-category b {
  font-size: .76em !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 88% !important;
}

#ordjagt-game-root .ordjagt-control-zone .ordjagt-inline-action {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2% !important;
  font-weight: 900 !important;
  color: #fffbe3 !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 2px rgba(0,0,0,.85) !important;
  border: 2px solid #d39a38 !important;
  box-shadow: inset 0 0 0 2px rgba(255,231,141,.12), 0 7px 12px rgba(0,0,0,.32) !important;
}
#ordjagt-game-root .ordjagt-control-zone .ordjagt-inline-action.hint { background: linear-gradient(180deg,#168bc1,#075b8c) !important; }
#ordjagt-game-root .ordjagt-control-zone .ordjagt-inline-action.shuffle { background: linear-gradient(180deg,#1699ad,#087282) !important; }
#ordjagt-game-root .ordjagt-control-zone .ordjagt-inline-action.submit { background: linear-gradient(180deg,#4eaf19,#247b0e) !important; }
#ordjagt-game-root .ordjagt-control-zone .ordjagt-inline-action.clear { background: linear-gradient(180deg,#a66014,#60350b) !important; }
#ordjagt-game-root .ordjagt-control-zone .ordjagt-inline-action i {
  display: block !important;
  font-style: normal !important;
  font-weight: 900 !important;
  line-height: .9 !important;
  color: #ffe9a4 !important;
  text-shadow: 0 2px 2px rgba(0,0,0,.72) !important;
}
#ordjagt-game-root .ordjagt-control-zone .ordjagt-inline-action b {
  position: absolute !important;
  right: 5% !important;
  bottom: 5% !important;
  display: grid !important;
  place-items: center !important;
  min-width: 1.55em !important;
  height: 1.55em !important;
  padding: 0 .22em !important;
  border-radius: 999px !important;
  background: #43a51b !important;
  border: 1px solid #e5ce66 !important;
  color: #fff !important;
  font-size: .55em !important;
}

/* ---------- Desktop 16:9 reference geometry ---------- */
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-topbar-frame {
  left: 25.0% !important;
  top: 3.6% !important;
  width: 64.8% !important;
  height: 10.2% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-logo-block .ordjagt-app-logo {
  left: 1.2% !important;
  top: .8% !important;
  width: 16.6% !important;
  height: 17.0% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-level-pill.ordjagt-level-badge {
  left: 17.7% !important;
  top: .7% !important;
  width: 8.3% !important;
  height: 15.2% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-experience {
  left: 26.2% !important;
  top: 4.6% !important;
  width: 14.1% !important;
  height: 8.5% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-stats .ordjagt-status {
  top: 4.6% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-stats .ordjagt-status.ordjagt-status-timer {
  left: 42.1% !important;
  width: 14.8% !important;
  height: 8.2% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-stats .ordjagt-status.ordjagt-status-coins {
  left: 58.6% !important;
  width: 10.7% !important;
  height: 7.6% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-stats .ordjagt-status.ordjagt-status-energy {
  left: 69.6% !important;
  width: 10.9% !important;
  height: 7.6% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-stats .ordjagt-status.ordjagt-status-gems {
  left: 80.8% !important;
  width: 9.4% !important;
  height: 7.6% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-status b {
  font-size: clamp(11px, 1.15vw, 22px) !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-icons {
  right: 4.2% !important;
  top: 4.1% !important;
  width: 4.7% !important;
  height: 8.6% !important;
  overflow: visible !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-icons .ordjagt-icon-btn { display: none !important; }
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-icons .ordjagt-icon-btn:last-child {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-mobile-menu-toggle {
  display: flex !important;
  position: absolute !important;
  right: .9% !important;
  top: 4.0% !important;
  width: 4.6% !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  z-index: 93 !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-playfield {
  left: 14.0% !important;
  top: 18.1% !important;
  width: 46.2% !important;
  height: 56.3% !important;
  --oj-board-inset: 4px !important;
  --oj-board-gap: clamp(2px,.25vw,5px) !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue-zone {
  left: 62.7% !important;
  top: 17.1% !important;
  width: 29.8% !important;
  height: 46.8% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue {
  padding: 22% 10% 24% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue > span {
  top: -1.2% !important;
  width: 61% !important;
  height: 15.5% !important;
  font-size: clamp(13px, 1.3vw, 25px) !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue-ornament {
  top: 23% !important;
  font-size: clamp(24px,2.2vw,42px) !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue p {
  margin: 18% auto 0 !important;
  font-size: clamp(16px, 1.62vw, 31px) !important;
  line-height: 1.2 !important;
  text-align: center !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-control-zone,
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-control-zone.ordjagt-control-row {
  left: 62.7% !important;
  top: 65.2% !important;
  width: 29.8% !important;
  height: 13.0% !important;
  gap: 1.4% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-control-zone .ordjagt-inline-action i {
  font-size: clamp(18px, 2.0vw, 38px) !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-control-zone .ordjagt-inline-action span {
  font-size: clamp(9px, 1.0vw, 19px) !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-word-display { display: none !important; }
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-bank-zone,
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-bank-zone[style] {
  left: 13.5% !important;
  bottom: 1.8% !important;
  width: 70.5% !important;
  height: 15.8% !important;
  padding: 1.4% 2.8% !important;
  background: linear-gradient(180deg, rgba(73,37,13,.97), rgba(27,14,6,.98)) !important;
  border-width: 3px !important;
  border-radius: 18px !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-letter {
  flex: 0 1 13.2% !important;
  width: 13.2% !important;
  max-width: none !important;
  height: 94% !important;
  border-radius: 12px !important;
  font-size: clamp(26px, 3.0vw, 58px) !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-side-zone.ordjagt-side-dropdown-shell { display: none !important; }

/* ---------- Mobile 9:16 reference geometry ---------- */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-topbar-frame {
  left: 39.0% !important;
  top: 4.35% !important;
  width: 50.5% !important;
  height: 6.8% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-logo-block .ordjagt-app-logo {
  left: 1.8% !important;
  top: .6% !important;
  width: 25.8% !important;
  height: 11.8% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-level-pill.ordjagt-level-badge {
  left: 28.8% !important;
  top: 3.2% !important;
  width: 10.8% !important;
  height: 8.6% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-experience { display: none !important; }
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status {
  top: 4.65% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-coins {
  left: 40.6% !important;
  width: 17.2% !important;
  height: 5.9% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-energy {
  left: 57.9% !important;
  width: 16.2% !important;
  height: 5.9% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-gems {
  left: 74.0% !important;
  width: 14.4% !important;
  height: 5.9% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-timer {
  left: 38.4% !important;
  top: 13.15% !important;
  width: 23.8% !important;
  height: 4.35% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-status b {
  font-size: clamp(10px, 3.25vw, 19px) !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-mobile-menu-toggle {
  right: 1.7% !important;
  top: 4.5% !important;
  width: 8.9% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-playfield {
  left: 10.5% !important;
  top: 20.3% !important;
  width: 79.0% !important;
  height: 38.6% !important;
  --oj-board-inset: 3px !important;
  --oj-board-gap: clamp(2px,.62vw,5px) !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue-zone {
  left: 13.5% !important;
  top: 61.4% !important;
  width: 73.0% !important;
  height: 13.9% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue {
  padding: 14% 8% 7% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue > span {
  top: -12.5% !important;
  width: 43% !important;
  height: 26% !important;
  font-size: clamp(11px, 3.3vw, 19px) !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue-ornament,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue-category { display: none !important; }
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue p {
  margin: 0 !important;
  font-size: clamp(15px, 4.4vw, 26px) !important;
  line-height: 1.18 !important;
  text-align: center !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-word-display { display: none !important; }
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone.ordjagt-control-row {
  left: 5.4% !important;
  top: 77.35% !important;
  width: 89.2% !important;
  height: 5.8% !important;
  grid-template-columns: 1.05fr 1.15fr 1.28fr .95fr !important;
  gap: 1.4% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone .ordjagt-inline-action {
  flex-direction: row !important;
  gap: 6% !important;
  border-radius: 10px !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone .ordjagt-inline-action i {
  font-size: clamp(15px, 4.3vw, 25px) !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone .ordjagt-inline-action span {
  font-size: clamp(8px, 2.65vw, 15px) !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-bank-zone,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-bank-zone[style] {
  left: 5.2% !important;
  top: 84.45% !important;
  width: 89.6% !important;
  height: 8.45% !important;
  padding: .65% .9% !important;
  border-width: 3px !important;
  border-radius: 14px !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-letter {
  height: 94% !important;
  border-radius: 11px !important;
  font-size: clamp(21px, 6.8vw, 40px) !important;
}

/* The template preview diagnostics must stay unobtrusive. */
#ordjagt-game-root.ordjagt-template-preview-root::after {
  right: .7% !important;
  bottom: .45% !important;
  opacity: .78 !important;
}

/* v0.3.25 geometry calibration from measured reference grid bounds. */
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-playfield {
  left: 10.5% !important;
  top: 19.0% !important;
  width: 46.9% !important;
  height: 58.0% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-bank-zone,
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-bank-zone[style] {
  bottom: 2.0% !important;
  height: 18.4% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-playfield {
  left: 3.2% !important;
  top: 19.7% !important;
  width: 90.0% !important;
  height: 39.6% !important;
}

/* ============================================================
   OrdJagt v0.3.26 — PREMIUM GRAPHICS + RATIO-LOCKED PLACEMENT
   All new image assets keep their native proportions. Containers may scale
   by percentage, but images are never stretched on either axis.
   ============================================================ */

/* The old continuous topbar frame conflicts with the new standalone holders. */
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-topbar-frame,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-topbar-frame {
  display: none !important;
}

/* Native-form branding. */
#ordjagt-game-root .ordjagt-app-logo-block .ordjagt-app-logo {
  height: auto !important;
  aspect-ratio: 1390 / 989 !important;
  overflow: visible !important;
}
#ordjagt-game-root .ordjagt-app-logo-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}
#ordjagt-game-root .ordjagt-level-pill.ordjagt-level-badge {
  height: auto !important;
  aspect-ratio: 935 / 976 !important;
  overflow: visible !important;
}
#ordjagt-game-root .ordjagt-level-badge-img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  z-index: 1 !important;
}
#ordjagt-game-root .ordjagt-level-number {
  position: absolute !important;
  left: 50% !important;
  top: 57% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
  color: #fff3c2 !important;
  font-weight: 950 !important;
  font-size: clamp(17px, 2.6vw, 46px) !important;
  line-height: 1 !important;
  text-shadow: 0 3px 0 #4b2608, 0 0 7px rgba(255,209,75,.5) !important;
  pointer-events: none !important;
}

/* Premium standalone resource holders. The source image ratio is preserved. */
#ordjagt-game-root .ordjagt-app-stats .ordjagt-status.ordjagt-status-asset {
  box-sizing: border-box !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent center / contain no-repeat !important;
  background-image: var(--oj-asset) !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 17% 0 29% !important;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.32)) !important;
}
#ordjagt-game-root .ordjagt-app-stats .ordjagt-status.ordjagt-status-timer {
  padding: 0 7% 0 34% !important;
}
#ordjagt-game-root .ordjagt-status b {
  position: relative !important;
  z-index: 3 !important;
  color: #fff7dd !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 2px rgba(0,0,0,.92) !important;
}
/* New holders already contain the visible + button. Keep the click target only. */
#ordjagt-game-root .ordjagt-mini-plus {
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 23% !important;
  height: 100% !important;
  opacity: 0 !important;
  background: none !important;
  border: 0 !important;
  z-index: 5 !important;
}

/* Menu image is a real 1:1 asset; the old CSS hamburger is hidden. */
#ordjagt-game-root .ordjagt-mobile-menu-toggle {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent center / contain no-repeat !important;
  background-image: var(--oj-asset) !important;
  aspect-ratio: 1073 / 1070 !important;
  height: auto !important;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.38)) !important;
}
#ordjagt-game-root .ordjagt-mobile-menu-toggle > span { display: none !important; }

/* Desktop XP panel: use the premium image as frame, but cover its sample text
   and bar with dynamic game data so real XP always remains truthful. */
#ordjagt-game-root .ordjagt-experience.ordjagt-experience-asset {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent center / contain no-repeat !important;
  background-image: var(--oj-asset) !important;
  padding: 0 !important;
  overflow: visible !important;
}
#ordjagt-game-root .ordjagt-experience.ordjagt-experience-asset::after {
  content: '' !important;
  position: absolute !important;
  left: 29% !important;
  top: 17% !important;
  width: 61% !important;
  height: 70% !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(64,34,15,.98), rgba(35,18,8,.98)) !important;
  box-shadow: inset 0 0 0 1px rgba(212,157,66,.35) !important;
  z-index: 1 !important;
}
#ordjagt-game-root .ordjagt-experience-asset .ordjagt-experience-star { display: none !important; }
#ordjagt-game-root .ordjagt-experience-asset .ordjagt-experience-copy {
  position: absolute !important;
  left: 32% !important;
  top: 17% !important;
  width: 55% !important;
  height: 68% !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto 1fr !important;
  gap: 5% 4% !important;
  align-items: center !important;
}
#ordjagt-game-root .ordjagt-experience-asset .ordjagt-experience-copy b,
#ordjagt-game-root .ordjagt-experience-asset .ordjagt-experience-copy span {
  font-size: clamp(8px, .76vw, 15px) !important;
}
#ordjagt-game-root .ordjagt-experience-asset .ordjagt-experience-copy i {
  grid-column: 1 / -1 !important;
  align-self: end !important;
  height: 23% !important;
  min-height: 5px !important;
}

/* Desktop clue panel uses the full new artwork in its original proportion.
   Dynamic text sits over the parchment; dynamic category covers sample copy. */
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue-zone {
  overflow: visible !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent center / contain no-repeat !important;
  background-image: var(--oj-clue-desktop) !important;
  overflow: visible !important;
  padding: 0 !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue > span,
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue-ornament {
  display: none !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue p {
  position: absolute !important;
  left: 16% !important;
  right: 16% !important;
  top: 29% !important;
  margin: 0 !important;
  font-size: clamp(14px, 1.35vw, 27px) !important;
  line-height: 1.22 !important;
  text-align: center !important;
  z-index: 3 !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue-category {
  left: 24% !important;
  right: 24% !important;
  bottom: 8.5% !important;
  height: 13.5% !important;
  background: linear-gradient(180deg, rgba(37,125,20,.98), rgba(17,78,9,.99)) !important;
  border: 1px solid rgba(255,213,103,.75) !important;
  border-radius: 8px !important;
  z-index: 4 !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue-category small { display: none !important; }
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue-category b {
  font-size: clamp(10px, .95vw, 19px) !important;
}

/* Mobile keeps the proven wide horizontal clue geometry. The new premium
   header artwork is used without deforming the generated tall source panel. */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue {
  position: relative !important;
  border: 2px solid #a76a26 !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255,245,215,.99), rgba(244,206,132,.99)) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.42), 0 8px 16px rgba(0,0,0,.28) !important;
  overflow: visible !important;
  padding: 0 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: -28% !important;
  width: 49% !important;
  aspect-ratio: 1001 / 295 !important;
  transform: translateX(-50%) !important;
  background: transparent center / contain no-repeat !important;
  background-image: var(--oj-clue-mobile-header) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue > span,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue-ornament,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue-category {
  display: none !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue p {
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  top: 50% !important;
  transform: translateY(-42%) !important;
  margin: 0 !important;
  text-align: center !important;
  font-size: clamp(14px, 4.0vw, 24px) !important;
  line-height: 1.18 !important;
}

/* Premium action buttons. Backgrounds preserve their cropped source form. */
#ordjagt-game-root .ordjagt-control-zone .ordjagt-premium-action {
  position: relative !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent center / contain no-repeat !important;
  background-image: var(--oj-asset) !important;
  overflow: visible !important;
  padding: 0 !important;
  filter: drop-shadow(0 4px 5px rgba(0,0,0,.30)) !important;
}
/* Text is baked into the new button art. Keep DOM copy for accessibility only. */
#ordjagt-game-root .ordjagt-control-zone .ordjagt-premium-action > span {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
#ordjagt-game-root .ordjagt-premium-action-icon {
  position: absolute !important;
  left: 2.5% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 23% !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  background: transparent center / contain no-repeat !important;
  background-image: var(--oj-asset) !important;
  z-index: 4 !important;
  pointer-events: none !important;
}
#ordjagt-game-root .ordjagt-control-zone .ordjagt-premium-action > em {
  display: none !important;
}
#ordjagt-game-root .ordjagt-control-zone .ordjagt-premium-action > b {
  right: 2% !important;
  bottom: 4% !important;
  z-index: 6 !important;
}

/* New tray and tiles are rendered as images with contain scaling. */
#ordjagt-game-root .ordjagt-bank-zone,
#ordjagt-game-root .ordjagt-bank-zone[style] {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent center / contain no-repeat !important;
  background-image: var(--oj-letter-tray) !important;
  overflow: visible !important;
}
#ordjagt-game-root .ordjagt-bank-title { display: none !important; }
#ordjagt-game-root .ordjagt-letter {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent center / contain no-repeat !important;
  background-image: var(--oj-asset) !important;
  color: #2a1608 !important;
  font-weight: 950 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.55) !important;
}

/* ---------- Desktop 16:9 placement pass ---------- */
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-logo-block .ordjagt-app-logo {
  left: 1.2% !important;
  top: .6% !important;
  width: 15.6% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-level-pill.ordjagt-level-badge {
  left: 17.1% !important;
  top: 1.1% !important;
  width: 8.6% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-experience {
  left: 26.4% !important;
  top: 3.6% !important;
  width: 15.0% !important;
  height: auto !important;
  aspect-ratio: 1990 / 557 !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-stats .ordjagt-status.ordjagt-status-timer {
  left: 42.2% !important;
  top: 4.2% !important;
  width: 10.6% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-stats .ordjagt-status.ordjagt-status-coins {
  left: 58.0% !important;
  top: 4.1% !important;
  width: 12.2% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-stats .ordjagt-status.ordjagt-status-energy {
  left: 68.9% !important;
  top: 4.1% !important;
  width: 12.1% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-stats .ordjagt-status.ordjagt-status-gems {
  left: 79.8% !important;
  top: 4.1% !important;
  width: 11.1% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-status b {
  font-size: clamp(10px, .9vw, 18px) !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-icons {
  right: 5.4% !important;
  top: 3.7% !important;
  width: 4.3% !important;
  height: 8.0% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-mobile-menu-toggle {
  right: .8% !important;
  top: 3.55% !important;
  width: 4.6% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-playfield {
  left: 16.0% !important;
  top: 18.4% !important;
  width: 43.8% !important;
  height: 55.5% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue-zone {
  left: 62.8% !important;
  top: 15.8% !important;
  width: 30.2% !important;
  height: 49.0% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-control-zone,
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-control-zone.ordjagt-control-row {
  left: 62.7% !important;
  top: 65.0% !important;
  width: 30.0% !important;
  height: 11.8% !important;
  gap: .7% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-control-zone .ordjagt-premium-action {
  min-width: 0 !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-bank-zone,
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-bank-zone[style] {
  left: 14.0% !important;
  bottom: 1.5% !important;
  width: 72.0% !important;
  height: 17.2% !important;
  padding: 2.0% 4.2% !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-bank {
  height: 100% !important;
  align-items: center !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-letter {
  height: 82% !important;
  flex-basis: 12.6% !important;
  width: 12.6% !important;
  font-size: clamp(24px, 2.5vw, 50px) !important;
}

/* ---------- Mobile 9:16 placement pass ---------- */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-logo-block .ordjagt-app-logo {
  left: 1.8% !important;
  top: .65% !important;
  width: 26.2% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-level-pill.ordjagt-level-badge {
  left: 28.7% !important;
  top: 2.8% !important;
  width: 11.7% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-level-number {
  font-size: clamp(15px, 5.0vw, 29px) !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-coins {
  left: 38.0% !important;
  top: 3.35% !important;
  width: 19.0% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-energy {
  left: 55.6% !important;
  top: 3.35% !important;
  width: 18.8% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-gems {
  left: 72.6% !important;
  top: 3.35% !important;
  width: 17.2% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-timer {
  left: 35.2% !important;
  top: 12.1% !important;
  width: 21.7% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-status b {
  font-size: clamp(9px, 2.8vw, 17px) !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-mobile-menu-toggle {
  right: 1.4% !important;
  top: 3.1% !important;
  width: 9.5% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-playfield {
  left: 7.0% !important;
  top: 18.2% !important;
  width: 86.0% !important;
  height: 36.8% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue-zone {
  left: 12.0% !important;
  top: 56.5% !important;
  width: 76.0% !important;
  height: 12.8% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone.ordjagt-control-row {
  left: 4.6% !important;
  top: 70.2% !important;
  width: 90.8% !important;
  height: 6.2% !important;
  grid-template-columns: 1fr 1fr 1.18fr .9fr !important;
  gap: .45% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-premium-action-icon {
  width: 21% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-bank-zone,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-bank-zone[style] {
  left: 4.0% !important;
  top: 77.2% !important;
  width: 92.0% !important;
  height: 10.2% !important;
  padding: 1.0% 1.6% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-bank {
  height: 100% !important;
  align-items: center !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-letter {
  height: 88% !important;
  font-size: clamp(20px, 6.2vw, 38px) !important;
}

/* Ensure no legacy transform can distort the new art. */
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-logo,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-logo,
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-level-badge,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-level-badge,
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-status,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-status,
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-mobile-menu-toggle,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-mobile-menu-toggle {
  transform: none !important;
}


/* ============================================================
   OrdJagt v0.3.27 — INTERACTION / LETTER INPUT HOTFIX
   Full-canvas HUD wrappers are visual positioning layers only. In v0.3.26
   the generic direct-child rule made those wrappers hit-testable, so the
   invisible resource layer could sit above the letter tray and swallow taps.
   Keep wrappers click-through and explicitly re-enable real controls.
   ============================================================ */
#ordjagt-game-root .ordjagt-topbar-frame,
#ordjagt-game-root .ordjagt-app-logo-block,
#ordjagt-game-root .ordjagt-app-stats,
#ordjagt-game-root .ordjagt-app-icons,
#ordjagt-game-root .ordjagt-experience,
#ordjagt-game-root .ordjagt-status {
  pointer-events: none !important;
}

#ordjagt-game-root button,
#ordjagt-game-root .ordjagt-letter,
#ordjagt-game-root .ordjagt-mini-plus,
#ordjagt-game-root .ordjagt-icon-btn,
#ordjagt-game-root .ordjagt-mobile-menu-toggle,
#ordjagt-game-root [data-action],
#ordjagt-game-root [data-letter-index],
#ordjagt-game-root [data-level-index],
#ordjagt-game-root [data-side-panel] {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

#ordjagt-game-root .ordjagt-bank-zone,
#ordjagt-game-root .ordjagt-bank {
  pointer-events: auto !important;
}
#ordjagt-game-root .ordjagt-letter {
  position: relative !important;
  z-index: 2 !important;
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}
#ordjagt-game-root .ordjagt-letter:disabled {
  cursor: default !important;
  pointer-events: none !important;
}

/* ============================================================
   OrdJagt v0.3.28 — MOBILE TOP HUD COMPOSITION
   Reference layout: logo + level on the first row, menu isolated at the
   upper-right, then one evenly spaced resource row underneath.
   Resource artwork keeps its original ratio; scaling is width-only.
   ============================================================ */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-logo-block .ordjagt-app-logo {
  left: 18.0% !important;
  top: .55% !important;
  width: 39.5% !important;
  height: auto !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-level-pill.ordjagt-level-badge {
  left: 58.2% !important;
  top: 4.2% !important;
  width: 17.0% !important;
  height: auto !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-level-number {
  font-size: clamp(18px, 5.7vw, 34px) !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-mobile-menu-toggle {
  right: 1.8% !important;
  top: 2.0% !important;
  width: 9.4% !important;
  height: auto !important;
}

/* Resource row: flex layout prevents holders from crowding or overlapping. */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats {
  position: absolute !important;
  left: 4.0% !important;
  right: auto !important;
  top: 17.3% !important;
  width: 92.0% !important;
  height: 7.2% !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.25% !important;
  overflow: visible !important;
  z-index: 72 !important;
  pointer-events: none !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  transform: none !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-coins,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-energy,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-gems,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-timer {
  left: auto !important;
  top: auto !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-status b {
  font-size: clamp(10px, 2.7vw, 16px) !important;
}

/* Content is moved down just enough to respect the new two-row header. */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-playfield {
  left: 7.0% !important;
  top: 25.5% !important;
  width: 86.0% !important;
  height: 36.4% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue-zone {
  left: 12.0% !important;
  top: 63.8% !important;
  width: 76.0% !important;
  height: 13.2% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone.ordjagt-control-row {
  left: 4.6% !important;
  top: 79.0% !important;
  width: 90.8% !important;
  height: 6.2% !important;
  grid-template-columns: 1fr 1fr 1.18fr .9fr !important;
  gap: .7% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-bank-zone,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-bank-zone[style] {
  left: 4.0% !important;
  top: 87.0% !important;
  width: 92.0% !important;
  height: 9.6% !important;
  padding: .9% 1.5% !important;
}


/* ============================================================
   OrdJagt v0.3.29 — MOBILE HUD / CLUE / INPUT POLISH
   - Fixes the v0.3.28 inset shorthand that cancelled top/left placement.
   - Keeps resource artwork in original proportions with explicit ratios.
   - Restores the visible typed word and gives bottom icons usable scale.
   ============================================================ */

/* Top resource row: the former `inset:auto` shorthand reset top/left and
   pushed the row into the logo area. Re-assert the real second-row geometry. */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats {
  position: absolute !important;
  left: 2.0% !important;
  right: auto !important;
  top: 16.9% !important;
  bottom: auto !important;
  width: 96.0% !important;
  height: 6.8% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .25% !important;
  overflow: visible !important;
  z-index: 78 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  transform: none !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-coins {
  width: 24.0% !important;
  height: auto !important;
  aspect-ratio: 1906 / 506 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-energy {
  width: 23.0% !important;
  height: auto !important;
  aspect-ratio: 1626 / 496 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-gems {
  width: 22.0% !important;
  height: auto !important;
  aspect-ratio: 1910 / 498 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-timer {
  width: 18.8% !important;
  height: auto !important;
  aspect-ratio: 650 / 187 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-status b {
  font-size: clamp(11px, 3.15vw, 19px) !important;
  line-height: 1 !important;
}

/* Mobile clue: use the clean title-only crop and keep it outside the parchment
   body, instead of showing the lower parchment fragment from the source art. */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue-zone {
  left: 10.5% !important;
  top: 63.0% !important;
  width: 79.0% !important;
  height: 13.4% !important;
  overflow: visible !important;
  z-index: 44 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  border: 2px solid #aa6b27 !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 88% 82%, rgba(95,143,42,.15), transparent 25%),
    linear-gradient(180deg, rgba(255,248,223,.995), rgba(246,210,139,.995)) !important;
  box-shadow:
    inset 0 0 0 3px rgba(255,255,255,.48),
    inset 0 -10px 20px rgba(170,105,32,.08),
    0 8px 18px rgba(0,0,0,.28) !important;
  overflow: visible !important;
  padding: 0 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: -20% !important;
  width: 42% !important;
  height: auto !important;
  aspect-ratio: 989 / 229 !important;
  transform: translateX(-50%) !important;
  background: transparent center / contain no-repeat !important;
  background-image: var(--oj-clue-mobile-header) !important;
  z-index: 6 !important;
  pointer-events: none !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue p {
  position: absolute !important;
  left: 7.5% !important;
  right: 7.5% !important;
  top: 56% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  max-height: 68% !important;
  overflow: hidden !important;
  text-align: center !important;
  font-size: clamp(15px, 4.25vw, 25px) !important;
  line-height: 1.17 !important;
  font-weight: 850 !important;
  z-index: 3 !important;
}

/* The selected word was intentionally hidden by older reference CSS.
   Restore it as a dedicated, high-z-index pill above the action row. */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-word-display {
  display: flex !important;
  position: absolute !important;
  left: 21% !important;
  top: 76.8% !important;
  width: 58% !important;
  height: 3.35% !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 3% !important;
  border: 2px solid rgba(255,211,103,.92) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(46,102,22,.98), rgba(18,65,14,.99)) !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.26) !important;
  color: #fff7d5 !important;
  font-size: clamp(14px, 4.2vw, 25px) !important;
  font-weight: 950 !important;
  letter-spacing: .16em !important;
  line-height: 1 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  z-index: 86 !important;
  pointer-events: none !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-word-display:empty {
  display: none !important;
}

/* Give the typed-word pill real space instead of layering it behind controls. */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone.ordjagt-control-row {
  left: 4.0% !important;
  top: 80.6% !important;
  width: 92.0% !important;
  height: 6.4% !important;
  grid-template-columns: 1fr 1fr 1.18fr .92fr !important;
  gap: .55% !important;
  z-index: 62 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-bank-zone,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-bank-zone[style] {
  left: 3.5% !important;
  top: 88.0% !important;
  width: 93.0% !important;
  height: 9.7% !important;
  padding: .8% 1.35% !important;
  z-index: 58 !important;
}

/* Bottom icons: size from height, not width, so their original icon form is
   preserved and they remain legible on narrow phones. */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-premium-action-icon {
  left: 4.0% !important;
  top: 50% !important;
  width: auto !important;
  height: 58% !important;
  aspect-ratio: 551 / 477 !important;
  transform: translateY(-50%) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  z-index: 7 !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone .ordjagt-premium-action > b {
  right: 3% !important;
  bottom: 5% !important;
  min-width: 1.45em !important;
  min-height: 1.45em !important;
  font-size: clamp(9px, 2.5vw, 14px) !important;
}

/* ============================================================
   OrdJagt v0.3.32 — drag/drop authority + clue/category/word/XP fixes
   ============================================================ */

/* The drag/drop editor is now the single authority for resource size and
   position. Neutralize the old mobile flex-row constraints so a percentage
   change produces a smooth, predictable size change for Energy and every
   other HUD holder. Saved/live inline layout rules provide left/top/width. */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats,
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-stats {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status,
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-stats .ordjagt-status {
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  flex: none !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}

/* Clean desktop clue panel. The new asset contains no baked-in category, so
   category can genuinely be moved, resized or disabled independently. */
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue-zone {
  overflow: visible !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue-zone .ordjagt-clue {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent center / contain no-repeat !important;
  background-image: var(--oj-clue-desktop) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue > span,
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue-ornament {
  display: none !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue p {
  position: absolute !important;
  left: 22% !important;
  right: 22% !important;
  top: 22% !important;
  bottom: 10% !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  color: #2b160b !important;
  font-size: clamp(13px, 1.28vw, 26px) !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.6) !important;
  z-index: 4 !important;
}

/* Mobile clue copy remains safely inside its parchment body at any drag/drop
   size. The title artwork is separate and never pushes the copy outside. */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue-zone .ordjagt-clue {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-clue p {
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  top: 22% !important;
  bottom: 10% !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  font-size: clamp(13px, 4vw, 24px) !important;
  line-height: 1.18 !important;
  z-index: 4 !important;
}

/* Category is a real independent top-level drag/drop element. */
#ordjagt-game-root .ordjagt-category-zone {
  position: absolute !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  z-index: 73 !important;
  pointer-events: none !important;
}
#ordjagt-game-root .ordjagt-category-card {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .45em !important;
  padding: .35em .85em !important;
  box-sizing: border-box !important;
  border: 2px solid rgba(244,205,91,.92) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(49,139,27,.98), rgba(20,82,12,.99)) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.13), 0 5px 12px rgba(0,0,0,.32) !important;
  color: #fff6d0 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
#ordjagt-game-root .ordjagt-category-card small {
  opacity: .82 !important;
  font-size: .58em !important;
  font-weight: 800 !important;
}
#ordjagt-game-root .ordjagt-category-card b {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: .82em !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
}

/* Selected word must be a visible, movable component on both templates once
   it contains letters. In editor mode an empty placeholder is always shown. */
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-word-display,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-word-display {
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  z-index: 86 !important;
}
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-word-display:not(:empty),
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-word-display:not(:empty) {
  display: flex !important;
}
#ordjagt-game-root.ordjagt-layout-edit-mode.ordjagt-blueprint-desktop .ordjagt-word-display:empty,
#ordjagt-game-root.ordjagt-layout-edit-mode.ordjagt-blueprint-mobile .ordjagt-word-display:empty {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 48px !important;
  min-height: 24px !important;
}
#ordjagt-game-root.ordjagt-layout-edit-mode .ordjagt-word-display:empty::before {
  content: attr(data-empty-label) !important;
  display: block !important;
  opacity: .78 !important;
}

/* XP is no longer hard-disabled on mobile. Visibility and exact placement are
   controlled by the saved/live drag/drop template. */
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-experience {
  max-width: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}


/* ============================================================
   OrdJagt v0.3.33 — visible selected word + star flight + icon-only actions
   ============================================================ */

/* The selected word is always a real frontend component. Earlier legacy rules
   hid it with display:none; this final layer intentionally wins. */
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-word-display,
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-word-display {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: center !important;
  justify-content: center !important;
  padding: .35% .7% !important;
  overflow: visible !important;
  pointer-events: none !important;
  z-index: 128 !important;
  border: 1px solid rgba(238,190,72,.72) !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, rgba(34,76,28,.96), rgba(12,42,18,.97)) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 5px 16px rgba(0,0,0,.34) !important;
}
#ordjagt-game-root .ordjagt-word-slots {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(2px, .38vw, 7px) !important;
  min-width: 0 !important;
}
#ordjagt-game-root .ordjagt-word-letter-slot {
  flex: 1 1 0 !important;
  max-width: 2.35em !important;
  min-width: 0 !important;
  height: 82% !important;
  aspect-ratio: 1 / 1 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(255,219,112,.65) !important;
  border-radius: 22% !important;
  background: linear-gradient(180deg, rgba(255,244,199,.20), rgba(103,76,24,.18)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
  color: #fff4c2 !important;
  font-weight: 950 !important;
  font-size: clamp(12px, 1.55vw, 30px) !important;
  line-height: 1 !important;
  text-shadow: 0 2px 2px rgba(0,0,0,.72) !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-word-letter-slot {
  font-size: clamp(12px, 4.2vw, 25px) !important;
}
#ordjagt-game-root .ordjagt-word-letter-slot.is-filled {
  border-color: rgba(255,224,120,.96) !important;
  background: linear-gradient(180deg, #fff0b3, #e5a93c) !important;
  color: #2b1607 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.65) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 2px 6px rgba(0,0,0,.26) !important;
}
#ordjagt-game-root .ordjagt-word-letter-slot.is-arriving {
  animation: ordjagt-word-slot-arrive .5s cubic-bezier(.2,.9,.22,1.18) both !important;
}
@keyframes ordjagt-word-slot-arrive {
  0% { transform: scale(.55); filter: brightness(1.8); }
  55% { transform: scale(1.28); filter: brightness(1.35); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Flying selected letter. The ghost uses the clicked tile artwork when present. */
.ordjagt-letter-flight {
  position: fixed !important;
  z-index: 2147483000 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: none !important;
  border-radius: 18% !important;
  background-color: #efbd57 !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  color: #2b1607 !important;
  font: 950 clamp(18px, 4vw, 34px)/1 system-ui, sans-serif !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.8) !important;
  filter: drop-shadow(0 7px 9px rgba(0,0,0,.34)) !important;
  will-change: transform, opacity !important;
}
.ordjagt-star-particle {
  --oj-star-dx: 0px;
  --oj-star-dy: -18px;
  position: fixed !important;
  z-index: 2147482999 !important;
  width: 7px !important;
  height: 7px !important;
  pointer-events: none !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, #fffbd2 0 18%, #ffd84a 24% 48%, rgba(255,170,0,.35) 58%, transparent 72%) !important;
  box-shadow: 0 0 7px #ffd84a, 0 0 14px rgba(255,202,44,.7) !important;
  transform: translate(-50%,-50%) scale(.2) !important;
  opacity: 0;
  animation-name: ordjagt-star-dust !important;
  animation-timing-function: ease-out !important;
  animation-fill-mode: both !important;
}
@keyframes ordjagt-star-dust {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.15) rotate(0deg); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--oj-star-dx)), calc(-50% + var(--oj-star-dy))) scale(1.8) rotate(150deg); }
}

/* Action artwork is now icon-only. The old coloured rectangular image behind
   each icon is deliberately removed; the transparent button remains as the
   generous click/touch target. */
#ordjagt-game-root .ordjagt-control-zone .ordjagt-premium-action,
#ordjagt-game-root .ordjagt-control-zone .ordjagt-icon-only-action {
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
  padding: 0 !important;
}
#ordjagt-game-root .ordjagt-control-zone .ordjagt-premium-action:hover:not(:disabled) .ordjagt-premium-action-icon {
  filter: brightness(1.1) drop-shadow(0 6px 8px rgba(0,0,0,.34)) !important;
}
#ordjagt-game-root .ordjagt-control-zone .ordjagt-premium-action:active:not(:disabled) .ordjagt-premium-action-icon {
  filter: brightness(.96) drop-shadow(0 3px 5px rgba(0,0,0,.28)) !important;
}
#ordjagt-game-root .ordjagt-control-zone .ordjagt-premium-action-icon {
  background-color: transparent !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  pointer-events: none !important;
  z-index: 8 !important;
}
#ordjagt-game-root .ordjagt-control-zone .ordjagt-premium-action > b {
  z-index: 12 !important;
}

@media (prefers-reduced-motion: reduce) {
  .ordjagt-letter-flight,
  .ordjagt-star-particle,
  #ordjagt-game-root .ordjagt-word-letter-slot.is-arriving {
    animation: none !important;
    transition: none !important;
  }
}


/* ============================================================
   OrdJagt v0.3.34 — resource scaling, responsive bank, feedback and icon purity
   ============================================================ */

/* 1) Resource holders are true absolute drag/drop objects. The stronger
   selector intentionally defeats all historical flex-row and fixed-width
   passes, so 1% and 100% produce genuinely different sizes. */
html body #ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-hud .ordjagt-app-stats,
html body #ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-hud .ordjagt-app-stats {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: visible !important;
  pointer-events: none !important;
}
html body #ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-hud .ordjagt-app-stats > .ordjagt-status,
html body #ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-hud .ordjagt-app-stats > .ordjagt-status {
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  min-width: 0 !important;
  min-inline-size: 0 !important;
  max-width: none !important;
  max-inline-size: none !important;
  flex: none !important;
  flex-basis: auto !important;
  transform: none !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}
html body #ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-hud .ordjagt-app-stats > .ordjagt-status.ordjagt-status-energy,
html body #ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-hud .ordjagt-app-stats > .ordjagt-status.ordjagt-status-energy {
  aspect-ratio: 1626 / 496 !important;
  height: auto !important;
  block-size: auto !important;
}

/* 2) The letter bank is a clipping-safe viewport. JavaScript calculates the
   largest proportional tile size that fits both its live width and height. */
html body #ordjagt-game-root .ordjagt-bank-zone,
html body #ordjagt-game-root .ordjagt-bank-zone[style] {
  box-sizing: border-box !important;
  overflow: hidden !important;
}
html body #ordjagt-game-root .ordjagt-bank {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  flex-wrap: nowrap !important;
}
html body #ordjagt-game-root .ordjagt-bank > .ordjagt-letter {
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  line-height: 1 !important;
}

/* 3) Correct/wrong/system feedback always sits in front of the selected-word
   field and every draggable gameplay slot. */
html body #ordjagt-game-root .ordjagt-toast {
  z-index: 520 !important;
  pointer-events: none !important;
  isolation: isolate !important;
  opacity: 1 !important;
  border: 2px solid rgba(255,220,116,.95) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

/* 4) Action controls expose only the standalone icon artwork. Old blue,
   turquoise, green and brown rectangles — including pseudo layers — are
   removed even when legacy blueprint rules have higher specificity. */
html body #ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-control-zone.ordjagt-control-row > button.ordjagt-premium-action,
html body #ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-control-zone.ordjagt-control-row > button.ordjagt-premium-action,
html body #ordjagt-game-root .ordjagt-control-zone.ordjagt-control-row > button.ordjagt-icon-only-action {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
  padding: 0 !important;
}
html body #ordjagt-game-root .ordjagt-control-zone.ordjagt-control-row > button.ordjagt-premium-action::before,
html body #ordjagt-game-root .ordjagt-control-zone.ordjagt-control-row > button.ordjagt-premium-action::after,
html body #ordjagt-game-root .ordjagt-control-zone.ordjagt-control-row > button.ordjagt-icon-only-action::before,
html body #ordjagt-game-root .ordjagt-control-zone.ordjagt-control-row > button.ordjagt-icon-only-action::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}
html body #ordjagt-game-root .ordjagt-control-zone.ordjagt-control-row > button.ordjagt-premium-action > span,
html body #ordjagt-game-root .ordjagt-control-zone.ordjagt-control-row > button.ordjagt-premium-action > em,
html body #ordjagt-game-root .ordjagt-control-zone.ordjagt-control-row > button.ordjagt-premium-action > b {
  display: none !important;
}
html body #ordjagt-game-root .ordjagt-control-zone.ordjagt-control-row > button.ordjagt-premium-action > .ordjagt-premium-action-icon {
  display: block !important;
  background-color: transparent !important;
  background-image: var(--oj-asset) !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow: none !important;
}


/* ============================================================
   OrdJagt v0.3.35 — rebuilt Energy widget + preview-safe scaling
   ============================================================ */

/* Energy is no longer a generic .ordjagt-status element. This clean widget
   represents current/max energy and keeps the refill click action while being
   completely independent from historical status-holder sizing rules. */
html body #ordjagt-game-root .ordjagt-app-hud .ordjagt-app-stats > .ordjagt-energy-widget {
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  flex: none !important;
  box-sizing: border-box !important;
  aspect-ratio: 1626 / 496 !important;
  background-image: var(--oj-asset) !important;
  background-color: transparent !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  overflow: visible !important;
  pointer-events: auto !important;
  z-index: 78 !important;
}

html body #ordjagt-game-root .ordjagt-energy-widget .ordjagt-energy-fallback {
  display: none !important;
}
html body #ordjagt-game-root .ordjagt-energy-widget.ordjagt-energy-no-asset {
  background-image: none !important;
  background: linear-gradient(180deg, rgba(69,48,24,.96), rgba(30,20,10,.96)) !important;
  border: 2px solid #d8a335 !important;
  border-radius: 999px !important;
}
html body #ordjagt-game-root .ordjagt-energy-widget.ordjagt-energy-no-asset .ordjagt-energy-fallback {
  display: grid !important;
  place-items: center !important;
  position: absolute !important;
  left: 3% !important;
  top: 8% !important;
  width: 26% !important;
  height: 84% !important;
  font-size: clamp(10px, 2vw, 30px) !important;
  color: #7fd9ff !important;
  text-shadow: 0 2px 4px #000 !important;
}
html body #ordjagt-game-root .ordjagt-energy-widget .ordjagt-energy-value {
  position: absolute !important;
  left: 36% !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 43% !important;
  margin: 0 !important;
  color: #fff !important;
  font-weight: 950 !important;
  font-size: clamp(7px, 1.05vw, 22px) !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.9) !important;
  pointer-events: none !important;
}
html body #ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-energy-widget .ordjagt-energy-value {
  font-size: clamp(6px, 2.7vw, 18px) !important;
}
html body #ordjagt-game-root .ordjagt-energy-widget .ordjagt-energy-refill {
  position: absolute !important;
  right: 1.5% !important;
  top: 11% !important;
  width: 22% !important;
  height: 78% !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}
html body #ordjagt-game-root .ordjagt-energy-widget .ordjagt-energy-refill:focus-visible {
  outline: 2px solid #ffe082 !important;
  outline-offset: 2px !important;
  border-radius: 50% !important;
}

/* Keep any obsolete generic Energy holder hidden if stale cached markup is
   ever mixed with the new script. */
html body #ordjagt-game-root .ordjagt-app-stats > .ordjagt-status-energy {
  display: none !important;
}

/* ============================================================
   OrdJagt v0.3.37 — feedback scale, clue containment, effects and working menus
   ============================================================ */

/* Correct/wrong feedback is intentionally twice the previous visual size. */
html body #ordjagt-game-root .ordjagt-toast.is-correct,
html body #ordjagt-game-root .ordjagt-toast.is-wrong {
  min-width: min(78%, 620px) !important;
  padding: .42em .8em !important;
  font-size: clamp(24px, 3.2vw, 54px) !important;
  line-height: 1.02 !important;
  font-weight: 950 !important;
  text-align: center !important;
  letter-spacing: .01em !important;
  z-index: 980 !important;
}
html body #ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-toast.is-correct,
html body #ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-toast.is-wrong {
  min-width: 72% !important;
  font-size: clamp(26px, 7.2vw, 48px) !important;
}
html body #ordjagt-game-root .ordjagt-toast.is-correct {
  color: #fff8cf !important;
  background: linear-gradient(180deg, rgba(28,113,35,.97), rgba(10,65,20,.97)) !important;
}
html body #ordjagt-game-root .ordjagt-toast.is-wrong {
  color: #fff5ea !important;
  background: linear-gradient(180deg, rgba(151,54,25,.97), rgba(83,25,15,.97)) !important;
}

/* Desktop clue artwork and copy are contained by the draggable template slot. */
html body #ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue-zone {
  box-sizing: border-box !important;
  overflow: hidden !important;
  contain: layout paint !important;
  isolation: isolate !important;
  max-width: 100% !important;
  max-height: 100% !important;
}
html body #ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue-zone .ordjagt-clue {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background-size: contain !important;
  background-position: center !important;
}
html body #ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue-zone .ordjagt-clue p {
  left: 20% !important;
  right: 20% !important;
  top: 20% !important;
  bottom: 12% !important;
  max-width: 60% !important;
  max-height: 68% !important;
  margin: auto !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Settings and burger menu must stay clickable above every draggable slot. */
html body #ordjagt-game-root .ordjagt-mobile-menu-toggle,
html body #ordjagt-game-root .ordjagt-app-icons,
html body #ordjagt-game-root .ordjagt-icon-btn {
  pointer-events: auto !important;
}
html body #ordjagt-game-root .ordjagt-mobile-menu-toggle {
  z-index: 940 !important;
}
html body #ordjagt-game-root .ordjagt-mobile-drawer {
  z-index: 960 !important;
  pointer-events: auto !important;
}
html body #ordjagt-game-root .ordjagt-mobile-drawer[hidden] {
  display: none !important;
}
html body #ordjagt-game-root .ordjagt-mobile-drawer.is-open {
  display: block !important;
}

/* Real in-game settings modal. */
#ordjagt-game-root .ordjagt-settings-modal {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1200 !important;
  display: grid !important;
  place-items: center !important;
  pointer-events: auto !important;
}
#ordjagt-game-root .ordjagt-settings-backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  background: rgba(2,10,5,.72) !important;
  backdrop-filter: blur(3px) !important;
}
#ordjagt-game-root .ordjagt-settings-card {
  position: relative !important;
  z-index: 1 !important;
  width: min(78%, 520px) !important;
  padding: clamp(16px, 2.4vw, 30px) !important;
  border: clamp(2px, .28vw, 4px) solid #e2b64f !important;
  border-radius: clamp(16px, 2vw, 28px) !important;
  color: #fff8d9 !important;
  background: linear-gradient(180deg,#315e28,#173a1d) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.14) !important;
}
#ordjagt-game-root .ordjagt-settings-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  font-size: clamp(20px, 2.2vw, 34px) !important;
}
#ordjagt-game-root .ordjagt-settings-head button {
  width: 2em !important;
  height: 2em !important;
  border-radius: 50% !important;
  border: 1px solid #e2b64f !important;
  background: #482b15 !important;
  color: #fff !important;
  cursor: pointer !important;
}
#ordjagt-game-root .ordjagt-settings-card > label {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 12px 0 !important;
  border-top: 1px solid rgba(255,255,255,.14) !important;
  font-size: clamp(15px, 1.5vw, 22px) !important;
}
#ordjagt-game-root .ordjagt-setting-toggle {
  min-width: 76px !important;
  padding: .5em .8em !important;
  border: 2px solid #c99b3a !important;
  border-radius: 999px !important;
  background: #5b2f1a !important;
  color: #fff !important;
  cursor: pointer !important;
}
#ordjagt-game-root .ordjagt-setting-toggle.is-on {
  background: #4e9e26 !important;
}
#ordjagt-game-root .ordjagt-settings-card small {
  display: block !important;
  margin-top: 14px !important;
  opacity: .8 !important;
}

/* Celebration effect layer. */
#ordjagt-game-root .ordjagt-effects-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1100 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
#ordjagt-game-root .ordjagt-fx-star,
#ordjagt-game-root .ordjagt-fx-gold,
#ordjagt-game-root .ordjagt-fx-leaf {
  position: absolute !important;
  display: block !important;
  pointer-events: none !important;
  will-change: transform, opacity !important;
}
#ordjagt-game-root .ordjagt-fx-star {
  color: #ffe86a !important;
  font-size: clamp(14px, 2vw, 34px) !important;
  text-shadow: 0 0 6px #fff8bd, 0 0 14px #ffb300 !important;
  animation: ordjagtFxBurst both cubic-bezier(.16,.75,.28,1) !important;
}
#ordjagt-game-root .ordjagt-fx-gold {
  width: clamp(5px, .55vw, 11px) !important;
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  background: radial-gradient(circle,#fffbd2 0 18%,#ffd23f 30%,#e89500 70%,transparent 72%) !important;
  box-shadow: 0 0 12px #ffc400 !important;
  animation: ordjagtFxBurst both ease-out !important;
}
#ordjagt-game-root .ordjagt-fx-leaf {
  color: #86c940 !important;
  font-size: clamp(16px, 2.2vw, 34px) !important;
  text-shadow: 0 2px 3px rgba(0,0,0,.42) !important;
  animation: ordjagtFxLeaf both linear !important;
}
#ordjagt-game-root .ordjagt-app.ordjagt-effect-screen-glow::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1090 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at 50% 45%,rgba(255,244,107,.34),rgba(91,190,50,.18) 36%,transparent 70%) !important;
  animation: ordjagtFxGlow 1s ease-out both !important;
}
#ordjagt-game-root .ordjagt-toast.ordjagt-effect-wrong-shake {
  animation: ordjagtWrongShake .48s ease both !important;
}
@keyframes ordjagtFxBurst {
  0% { transform: translate(-50%,-50%) translate(0,0) scale(.25) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(-50%,-50%) translate(var(--oj-fx-tx),var(--oj-fx-ty)) scale(1.05) rotate(210deg); opacity: 0; }
}
@keyframes ordjagtFxLeaf {
  0% { transform: translate(-50%,-50%) translate(0,0) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translate(-50%,-50%) translate(var(--oj-fx-tx),var(--oj-fx-ty)) rotate(540deg); opacity: 0; }
}
@keyframes ordjagtFxGlow {
  0% { opacity: 0; }
  28% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes ordjagtWrongShake {
  0%,100% { transform: translateX(0); }
  18% { transform: translateX(-6px); }
  36% { transform: translateX(5px); }
  54% { transform: translateX(-4px); }
  72% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
  #ordjagt-game-root .ordjagt-fx-star,
  #ordjagt-game-root .ordjagt-fx-gold,
  #ordjagt-game-root .ordjagt-fx-leaf,
  #ordjagt-game-root .ordjagt-app.ordjagt-effect-screen-glow::after,
  #ordjagt-game-root .ordjagt-toast.ordjagt-effect-wrong-shake {
    animation: none !important;
  }
}

/* ============================================================
   OrdJagt v0.3.38 — safe desktop clue copy area
   The actual text is also fitted by JS after every resize/render.
   ============================================================ */
html body #ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue-zone .ordjagt-clue {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
}
html body #ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-clue-zone .ordjagt-clue p {
  position: absolute !important;
  left: 18% !important;
  right: 18% !important;
  top: 25% !important;
  bottom: 18% !important;
  width: 64% !important;
  height: 57% !important;
  max-width: 64% !important;
  max-height: 57% !important;
  margin: 0 !important;
  padding: 4% 5% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  overflow: hidden !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  line-height: 1.24 !important;
  z-index: 5 !important;
}


/* ============================================================
   OrdJagt v0.3.47 — compact timer holder supplied by user
   650×187 alpha artwork; shorter writing field, ratio locked.
   ============================================================ */
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-stats .ordjagt-status.ordjagt-status-timer {
  width: 10.6% !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats .ordjagt-status.ordjagt-status-timer {
  width: 18.8% !important;
}
#ordjagt-game-root .ordjagt-app-stats .ordjagt-status.ordjagt-status-timer {
  height: auto !important;
  aspect-ratio: 650 / 187 !important;
  padding-left: 34% !important;
  padding-right: 7% !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}


/* ============================================================
   OrdJagt v0.3.48 — dedicated compact timer widget
   The timer no longer inherits generic .ordjagt-status dimensions.
   Saved drag/drop CSS remains authoritative for x/y/scale.
   ============================================================ */
#ordjagt-game-root .ordjagt-app-stats > .ordjagt-timer-widget {
  position: absolute !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  inline-size: auto;
  block-size: auto;
  aspect-ratio: 650 / 187 !important;
  background: transparent center / contain no-repeat !important;
  background-image: var(--oj-asset) !important;
  overflow: visible !important;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.32)) !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  container-type: inline-size;
  pointer-events: auto !important;
}

/* Static fallback only. Saved/live drag-drop CSS is appended after the file and
   overrides these widths with baseWidth × scale/100. */
#ordjagt-game-root.ordjagt-blueprint-desktop .ordjagt-app-stats > .ordjagt-timer-widget {
  left: 42.2% !important;
  top: 4.2% !important;
  width: 10.6% !important;
  height: auto !important;
}
#ordjagt-game-root.ordjagt-blueprint-mobile .ordjagt-app-stats > .ordjagt-timer-widget {
  left: 73.1% !important;
  top: 17.1% !important;
  width: 18.8% !important;
  height: auto !important;
}

#ordjagt-game-root .ordjagt-timer-widget .ordjagt-timer-fallback {
  display: none !important;
}

#ordjagt-game-root .ordjagt-timer-widget .ordjagt-timer-value {
  position: absolute !important;
  left: 34% !important;
  right: 8% !important;
  top: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  color: #fff7dd !important;
  font-family: inherit !important;
  font-size: clamp(7px, 1vw, 20px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-align: center !important;
  text-shadow: 0 2px 2px rgba(0,0,0,.92) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* Modern browsers: make the digits scale with the actual widget width, so a
   50% timer also gets proportionally smaller text. */
@supports (font-size: 1cqw) {
  #ordjagt-game-root .ordjagt-timer-widget .ordjagt-timer-value {
    font-size: clamp(7px, 8.5cqw, 24px) !important;
  }
}

#ordjagt-game-root .ordjagt-timer-widget.ordjagt-timer-no-asset {
  background: linear-gradient(180deg, #654019, #2e1909) !important;
  border: 2px solid #d8ad43 !important;
  border-radius: 999px !important;
}
#ordjagt-game-root .ordjagt-timer-widget.ordjagt-timer-no-asset .ordjagt-timer-fallback {
  display: grid !important;
  position: absolute !important;
  left: 3% !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 28% !important;
  place-items: center !important;
  font-size: 8cqw !important;
}


/* v0.3.63 — template preview: selected-word slot is thick and readable */
#ordjagt-game-root.ordjagt-layout-edit-mode .ordjagt-word-display {
  height: clamp(36px, 5vw, 82px) !important;
  min-height: clamp(36px, 5vw, 82px) !important;
  padding: clamp(4px, .55vw, 10px) clamp(9px, 1vw, 18px) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}
#ordjagt-game-root.ordjagt-layout-edit-mode .ordjagt-word-slots {
  height: 100% !important;
  align-items: stretch !important;
}
#ordjagt-game-root.ordjagt-layout-edit-mode .ordjagt-word-letter-slot {
  height: 100% !important;
  min-height: clamp(30px, 3.8vw, 66px) !important;
  flex: 0 1 clamp(30px, 4vw, 72px) !important;
  max-width: clamp(32px, 4.4vw, 78px) !important;
  aspect-ratio: 1.22 / 1 !important;
  box-sizing: border-box !important;
}
#ordjagt-game-root.ordjagt-layout-edit-mode .ordjagt-word-letter-slot > span {
  display:grid !important;
  place-items:center !important;
  width:100% !important;
  height:100% !important;
  font-size: clamp(18px, 2.3vw, 42px) !important;
  line-height:.9 !important;
  font-weight:1000 !important;
  overflow:hidden !important;
}