/* Pac-man Turtle - everything is scoped to .pmt-game so it never clashes with the theme.
   Colours, font and size are set from the plugin settings as CSS variables on the .pmt-game element;
   the fallbacks below are the defaults. */
.pmt-game {
  --pmt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  max-width: 660px;
  margin: 0 auto 1.5em;
  padding: 14px;
  font-family: var(--pmt-font);
  font-size: var(--pmt-size, 16px);
  line-height: 1.4;
  font-weight: 400;
  color: var(--pmt-frame-text, #073b4c);
  text-align: left;
  background: linear-gradient(160deg, var(--pmt-frame-1, #3ad0c9), var(--pmt-frame-2, #1f9bd6));
  border-radius: 20px;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.pmt-game *,
.pmt-game *::before,
.pmt-game *::after {
  box-sizing: border-box;
  font-family: inherit;
}
.pmt-game .pmt-hidden { display: none !important; }

/* HUD */
.pmt-game .pmt-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 10px;
  font-weight: 700;
}
.pmt-game .pmt-box {
  background: var(--pmt-hud-bg, #fff);
  color: var(--pmt-hud-text, #073b4c);
  padding: 0.4em 0.9em;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
}
.pmt-game .pmt-box.pmt-goal {
  flex: 1 1 100%;
  text-align: center;
  white-space: normal;
}
/* Menu icon (three bars) in the top bar */
.pmt-game .pmt-menubtn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22em;
  width: 2.2em;
  height: 2.2em;
  font-size: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--pmt-hud-text, #073b4c);
  background: var(--pmt-hud-bg, #fff);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 0.08s ease;
}
.pmt-game .pmt-menubtn:hover { color: var(--pmt-hud-text, #073b4c); background: var(--pmt-hud-bg, #fff); }
.pmt-game .pmt-menubtn:active { transform: translateY(2px); }
.pmt-game .pmt-menubtn:focus-visible { outline: 3px solid var(--pmt-frame-text, #073b4c); outline-offset: 2px; }
.pmt-game .pmt-menubtn .pmt-bar {
  display: block;
  width: 1.1em;
  height: 0.16em;
  border-radius: 2px;
  background: currentColor;
}

.pmt-game .pmt-lbl { margin-right: 0.4em; }
.pmt-game .pmt-heart { color: #e63946; font-size: 1.15em; line-height: 1; }
.pmt-game .pmt-heart.pmt-lost { color: #c9d6dc; }

/* Stage + canvas */
.pmt-game .pmt-stage { position: relative; width: 100%; }
.pmt-game canvas.pmt-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #b7f5ee;
  touch-action: none;
}

/* Overlays (start / reward / not enough points / game over) */
.pmt-game .pmt-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75em;
  padding: 1.1em;
  overflow: auto;
  text-align: center;
  color: var(--pmt-screen-text, #fff);
  background: linear-gradient(160deg, var(--pmt-screen-1, rgba(28, 141, 192, 0.95)), var(--pmt-screen-2, rgba(9, 60, 85, 0.97)));
  border-radius: 12px;
}
/* The menu sits on top of the other screens, so it is fully opaque */
.pmt-game .pmt-overlay.pmt-menu {
  background: linear-gradient(160deg, var(--pmt-screen-solid-1, #1c8dc0), var(--pmt-screen-solid-2, #11546f));
}
.pmt-game .pmt-overlay > :first-child { margin-top: auto; }
.pmt-game .pmt-overlay > :last-child { margin-bottom: auto; }
.pmt-game .pmt-title {
  margin: 0;
  padding: 0;
  font-size: 1.75em;
  line-height: 1.15;
  font-weight: 800;
  color: var(--pmt-screen-text, #fff);
  text-transform: none;
  letter-spacing: 0;
}
.pmt-game .pmt-text {
  margin: 0;
  max-width: 26em;
  font-size: 1em;
  color: var(--pmt-screen-text, #fff);
  white-space: pre-line;
}
.pmt-game .pmt-final { margin: 0; font-size: 1.15em; font-weight: 800; color: var(--pmt-accent, #ffd23f); }
.pmt-game .pmt-note { margin: 0; max-width: 30em; font-size: 0.8em; opacity: 0.85; color: var(--pmt-screen-text, #fff); }

/* Buttons - explicit resets so themes cannot deform them */
.pmt-game .pmt-btn,
.pmt-game .pmt-diffbtn,
.pmt-game .pmt-padbtn {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  min-height: 0;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  text-shadow: none;
  cursor: pointer;
}
.pmt-game .pmt-btn {
  display: inline-block;
  border: 0;
  padding: 0.65em 1.7em;
  font: 800 1.1em/1.2 var(--pmt-font);
  text-align: center;
  color: var(--pmt-btn-text, #073b4c);
  background: var(--pmt-btn-bg, #ffd23f);
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--pmt-btn-shadow, #c99a00);
  transition: transform 0.08s ease, background 0.15s ease;
}
.pmt-game .pmt-btn:hover,
.pmt-game .pmt-btn:focus,
.pmt-game .pmt-btn:visited { color: var(--pmt-btn-text, #073b4c); text-decoration: none; }
.pmt-game .pmt-btn:hover { background: var(--pmt-btn-hover, #ffdf6b); }
.pmt-game .pmt-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--pmt-btn-shadow, #c99a00); }
.pmt-game .pmt-btn.pmt-alt {
  background: transparent;
  color: var(--pmt-screen-text, #fff);
  box-shadow: none;
  border: 2px solid var(--pmt-screen-text, #fff);
  padding: calc(0.65em - 2px) calc(1.7em - 2px);
}
.pmt-game .pmt-btn.pmt-alt:hover,
.pmt-game .pmt-btn.pmt-alt:focus { background: rgba(255, 255, 255, 0.15); color: var(--pmt-screen-text, #fff); }
.pmt-game .pmt-btn:focus-visible,
.pmt-game .pmt-diffbtn:focus-visible,
.pmt-game .pmt-padbtn:focus-visible { outline: 3px solid var(--pmt-screen-text, #fff); outline-offset: 2px; }

.pmt-game .pmt-diff { display: flex; flex-wrap: wrap; gap: 0.5em; justify-content: center; }
.pmt-game .pmt-diffbtn {
  border: 2px solid transparent;
  padding: 0.5em 1em;
  font: 700 0.95em/1.2 var(--pmt-font);
  color: var(--pmt-screen-text, #fff);
  background: rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  box-shadow: none;
}
.pmt-game .pmt-diffbtn:hover { background: rgba(255, 255, 255, 0.28); color: var(--pmt-screen-text, #fff); }
.pmt-game .pmt-diffbtn.pmt-sel { border-color: var(--pmt-accent, #ffd23f); background: rgba(255, 255, 255, 0.28); }

/* On-screen arrows */
.pmt-game .pmt-pad {
  display: none;
  grid-template-columns: repeat(3, 58px);
  grid-template-rows: repeat(3, 58px);
  gap: 6px;
  justify-content: center;
  margin: 12px auto 2px;
}
.pmt-game .pmt-padbtn {
  padding: 0;
  border: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: rgba(7, 59, 76, 0.45);
  border-radius: 14px;
  box-shadow: none;
  touch-action: none;
}
.pmt-game .pmt-padbtn:active { background: var(--pmt-btn-bg, #ffd23f); color: var(--pmt-btn-text, #073b4c); }
.pmt-game .pmt-u { grid-area: 1 / 2; }
.pmt-game .pmt-l { grid-area: 2 / 1; }
.pmt-game .pmt-r { grid-area: 2 / 3; }
.pmt-game .pmt-d { grid-area: 3 / 2; }
.pmt-game.pmt-dpad-always .pmt-pad { display: grid; }
.pmt-game.pmt-dpad-never .pmt-pad { display: none; }
@media (pointer: coarse) {
  .pmt-game.pmt-dpad-auto .pmt-pad { display: grid; }
}

.pmt-game .pmt-hint {
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.8em;
  opacity: 0.85;
}

/* Small screens: compact overlays so everything fits on the maze */
@media (max-width: 520px) {
  .pmt-game { padding: 10px; border-radius: 16px; }
  .pmt-game .pmt-box { padding: 0.3em 0.75em; font-size: 0.9em; }
  .pmt-game .pmt-menubtn { width: 2.2em; height: 2.2em; font-size: 0.9em; }
  .pmt-game .pmt-overlay { gap: 0.5em; padding: 0.75em; }
  .pmt-game .pmt-title { font-size: 1.25em; }
  .pmt-game .pmt-text { font-size: 0.82em; }
  .pmt-game .pmt-note { display: none; }
  .pmt-game .pmt-btn { padding: 0.5em 1.4em; font-size: 1em; }
  .pmt-game .pmt-btn.pmt-alt { padding: calc(0.5em - 2px) calc(1.4em - 2px); }
  .pmt-game .pmt-diffbtn { padding: 0.35em 0.8em; font-size: 0.82em; }
}