/* PuzzleMania games — shared styles (plain CSS, no external resources) */

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/roboto-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/roboto-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --teal: #4ecdc4;
  --teal-dark: #1a535c;
  --teal-soft: rgba(78, 205, 196, .3);
  --teal-pale: #caf0ed;
  --gray: #adb3bc;
  --list: #f1f1f2;
  --list-alt: #e4e5e8;
  --dock: #d8d9dd;
  --muted: rgba(60, 60, 67, .6);
  --key-shadow: 0 1px 0 #898a8d;
  --dock-h: 0px;
  --top-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.2;
  color: #000;
  background: #808080 url(../img/bg.png) 50% / cover no-repeat fixed;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; }
[hidden] { display: none !important; }

/* ---------- page ---------- */
.pm-page { min-height: 100%; display: flex; flex-direction: column; }
.pm-stage {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1174px;
  margin: 0 auto;
  padding: 60px 10px;
}
body[data-game="sudoku"] .pm-stage { justify-content: center; }

/* ---------- progress ---------- */
.pm-progress { width: 100%; max-width: 414px; padding: 30px 0; }
.pm-bar { padding: 1px; border-radius: 10px; background: rgba(78, 205, 196, .5); }
.pm-bar__track { position: relative; height: 6px; overflow: hidden; border-radius: 10px; }
.pm-bar__fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 0; border-radius: 10px; background: var(--teal);
  transition: width .5s ease;
}

/* ---------- card + buttons ---------- */
.pm-card { position: relative; max-width: 100%; background: #fff; border-radius: 20px; padding: 20px; }
.pm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 30px 0 0; }
.pm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 11px 20px;
  color: #fff; font-size: 14px; font-weight: 500; text-align: center;
  background: var(--teal); border: 1px solid var(--teal); border-radius: 10px;
  transition: background-color .2s, border-color .2s;
}
.pm-btn:hover, .pm-btn:focus-visible { background: var(--teal-dark); border-color: var(--teal-dark); outline: none; }
.pm-btn--wide { width: 100%; max-width: 354px; padding: 19px 0; }

/* ---------- pause layer ---------- */
.pm-pause {
  position: fixed; inset: 0; z-index: 90;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px; background: rgba(0, 0, 0, .8);
  opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s;
}
.pm-pause[data-open="true"] { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.pm-pause__img { width: 45px; margin-bottom: 20px; }
.pm-pause__title { max-width: 250px; color: #fff; text-align: center; line-height: 19px; }
.pm-pause .pm-btn { margin-top: 30px; }

/* ---------- modal ---------- */
.pm-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; padding: 10px; overflow-y: auto;
  background: rgba(0, 0, 0, .8);
  opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s linear .4s;
}
.pm-modal[data-open="true"] { opacity: 1; visibility: visible; transition: opacity .4s ease; }
.pm-modal__card {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 394px; margin: auto; padding: 20px;
  background: #fff; border-radius: 20px;
  transform: translateY(10px); transition: transform .2s linear;
}
.pm-modal[data-open="true"] .pm-modal__card { transform: none; }
.pm-modal__card--lg { max-width: 560px; }
.pm-modal__icon { width: 20px; margin: 0 auto; }
.pm-modal__title { padding: 0 20px 20px; font-weight: 700; text-align: center; }
.pm-modal__icon + .pm-modal__title { padding: 0; margin: 10px 0 5px; }
.pm-modal__text { color: var(--gray); text-align: center; line-height: 19px; }
.pm-modal__text--full {
  align-self: stretch; margin: 0 -20px; padding: 10px 20px;
  color: #000; text-align: left; background: rgba(116, 116, 128, .1);
}
.pm-modal__text--full p + p { margin-top: 8px; }
.pm-modal__agree { width: 100%; max-width: none; margin-top: 20px; padding: 15px 20px; }
.pm-modal__cancel { margin-top: 20px; color: var(--muted); font-size: 14px; line-height: 19px; }
.pm-modal__cancel:hover { color: #000; }

/* ---------- mobile dock (keyboard) ---------- */
.pm-dock {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--dock);
}
.pm-switch {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 58px; padding: 0 12px; color: #fff; background: var(--teal);
}
.pm-switch__arrow { flex: 0 0 32px; height: 44px; background: url(../img/chevron-left.svg) 50% / 9px 16px no-repeat; }
.pm-switch__arrow[data-dir="next"] { background-image: url(../img/chevron-right.svg); }
.pm-switch__text {
  flex: 1; min-width: 0; text-align: center; font-size: 15px; line-height: 18px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pm-switch[data-tap="true"] .pm-switch__text { cursor: pointer; }

.pm-keys { position: relative; max-width: 671px; margin: 0 auto; padding: 5px 3px 0; }
.pm-keys__row { display: flex; justify-content: center; margin: 0 -2.5px; }
.pm-key {
  position: relative; flex: 0 0 calc(10% - 5px);
  display: flex; align-items: center; justify-content: center;
  height: clamp(40px, 11vw, 54px); margin: 0 2.5px 5px;
  font-size: 22px; text-transform: uppercase; color: #000;
  background: #fff; border-radius: 5px; box-shadow: var(--key-shadow);
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.pm-key:active { background: #eaeaea; }
.pm-key--wide { flex-basis: calc(15% - 5px); }
.pm-key--gray { background-color: var(--gray); }
.pm-key--gray:active { background-color: #9aa1ab; }
.pm-key--back { background: var(--gray) url(../img/backspace.svg) 50% / 20px 15px no-repeat; }
.pm-key--menu { flex-direction: column; gap: 5px; }
.pm-key--menu span { display: block; width: 20px; height: 1px; background: #000; }

/* number keypad */
.pm-numpad { display: flex; gap: 5px; max-width: 671px; margin: 0 auto; padding: 5px 3px; }
.pm-numpad__side { flex: 0 0 calc(9.09% - 5px); display: flex; }
.pm-numpad__side .pm-key { flex: 1; height: auto; margin: 0; }
.pm-numpad__grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.pm-numpad__grid .pm-key { margin: 0; height: clamp(36px, 6.2vh, 46px); font-size: 18px; box-shadow: none; }

/* menu over the keyboard */
.pm-nav {
  position: absolute; left: 0; right: 0; bottom: 0; top: 58px; z-index: 2;
  display: flex; gap: 5px; padding: 5px 3px calc(5px + env(safe-area-inset-bottom));
  background: var(--dock);
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s;
}
.pm-dock--numbers .pm-nav { top: 0; }
.pm-nav[data-open="true"] { opacity: 1; visibility: visible; transition: opacity .3s ease; }
.pm-nav__side {
  flex: 0 0 calc(9.09% - 5px); min-width: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gray); border-radius: 5px; box-shadow: var(--key-shadow);
}
.pm-nav__side img { width: 60%; max-width: 20px; }
.pm-nav__side--question img { width: 32%; max-width: 11px; }
.pm-nav__center { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.pm-nav__btn {
  position: relative; flex: 1; min-height: 40px;
  font-size: 18px; background: #fcfcfe; border-radius: 5px; box-shadow: var(--key-shadow);
}
.pm-nav__btn img { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 20px; }

/* ---------- mobile layout ---------- */
@media (max-width: 1024px) {
  .pm-dock { display: block; }
  .pm-actions { display: none; }
  .pm-stage { padding: 30px 10px calc(var(--dock-h) + 20px); }
  body[data-kind="letters"] .pm-stage { padding: var(--top-h) 0 calc(var(--dock-h) + 10px); justify-content: flex-start; }
  body[data-kind="letters"] .pm-progress {
    position: fixed; top: 0; left: 0; right: 0; z-index: 40;
    max-width: none; padding: 10px; background: var(--teal-dark);
  }
  body[data-kind="letters"] .pm-card { width: 100%; padding: 0; border-radius: 0; display: flex; justify-content: center; }
}
@media (max-width: 361px) {
  .pm-key { font-size: 16px; }
}