/* Mahjong Petalsong's board and result, as lib/petalsong-board.js builds them: the game and its
   review page (/manager/mahjong-path) both load this, so the two look the same. The panel's size
   is each page's own. */
.pt { position: relative; color: #efe6cf; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.pt-screen { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; }
.pt-screen[hidden] { display: none; }

.pt-top { display: flex; align-items: center; gap: 12px; flex: none; min-height: 54px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.pt-back { flex: none; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; background: none; color: inherit; font: inherit; font-size: .88rem; cursor: pointer; }
.pt-back:hover { background: rgba(255, 255, 255, .08); }
.pt-title { flex: 1; min-width: 0; overflow: hidden; font: 700 1.15rem Georgia, serif; color: #f6ecd2; text-overflow: ellipsis; white-space: nowrap; }
/* .pt turns selection off for the board; the level's name can be selected. */
.pt .pt-title { user-select: text; -webkit-user-select: text; }
.pt-side { flex: none; color: #c4d0bf; font-size: .86rem; font-weight: 600; }
/* A theme that needs its sound: a card in the middle of the felt before its first level shows. */
.pt-sound {
  position: absolute; left: 50%; top: 50%; z-index: 9000; display: flex; flex-direction: column; align-items: center; gap: 12px;
  width: min(92%, 340px); padding: 22px 22px 20px; transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; background: rgba(16, 34, 28, .92); color: #efe6cf;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45); text-align: center;
}
.pt-sound[hidden] { display: none; }
.pt .mj-board.pt-veiled { visibility: hidden; }
.pt-sound .pt-icon { width: 2.2rem; height: 2.2rem; color: #e8b86a; }
.pt-sound p { margin: 0; color: #f6ecd2; font: 1.1rem/1.45 Georgia, serif; }
.pt-sound .btn { display: inline-flex; }
.pt-ctl { padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .08); color: #f6ecd2; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.pt-ctl:hover { background: rgba(255, 255, 255, .16); }
.pt-icon { display: block; flex: none; width: 1.1em; height: 1.1em; }
.pt-back, .pt-ctl, .pt-win .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pt-back { gap: 2px; padding-left: 8px; }

/* Previews: the game's tile bodies, shrunk, faces blank, each tile half see-through so where
   tiles stack they build up and the pile reads in depth. */
.pt-mini-frame { display: grid; place-items: center; flex: none; border-radius: 10px; background: rgba(0, 0, 0, .18); }
.mj-board.pt-mini { pointer-events: none; }
.pt-mini .mj-tile { opacity: .55; }
.pt-mini .mj-tile .mj-face::after { display: none; }
/* The game's 7px corners are for full-size tiles; on a 9px tile they turn it into a pill. */
.pt-mini .mj-body, .pt-mini .mj-face { border-radius: calc(var(--tw) * .14); }

/* Playing. */
.pt-felt {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 16px; flex: 1; min-height: 0; padding: 12px; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 20%, #2f5547 0%, #22423a 60%, #1a332c 100%);
}
.pt-felt.pt-col { flex-direction: column; gap: 12px; }
/* site.css centres .mj-board with auto margins, which in this flex row push the letter to the
   far edge of the felt. */
.pt-felt > .mj-board { margin: 0; }
.pt-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px 14px; flex: none; min-height: 58px; padding: 8px 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.pt-teach { color: #c4d0bf; font: italic .86rem Georgia, serif; }
.pt-controls { display: flex; gap: 8px; }
.pt-msg { justify-self: end; color: #e8b86a; font-size: .84rem; text-align: right; }
/* The message row keeps its height when empty: a row that comes and goes resizes the felt, and
   the board is laid out again under the player's finger. */
@media (max-width: 640px) {
  .pt-foot { grid-template-columns: 1fr; justify-items: center; }
  .pt-teach { text-align: center; }
  .pt-controls { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .pt-controls .pt-ctl { padding-inline: 8px; }
  .pt-msg { justify-self: stretch; min-height: 1.3em; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
}
/* Four flashes of 1s: the hint's removal timer in petalsong-board.js waits them out. */
.pt .mj-tile.hint .mj-face { animation-duration: 1s; }
/* A feel theme's particles, over the board and under the win card. */
.pt-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 8000; pointer-events: none; }
.mp-ink { display: block; flex: none; border-radius: 4px; }
/* The painting sits under the floor layer (the board is its own stacking context). */
.pt .mp-pic { position: absolute; z-index: -1; border-radius: 3px; background: center / cover no-repeat; }
.mp-pic-thumb { flex: none; border-radius: 4px; background: center / cover no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
/* The letter: every word is laid out from the start and fades in when its pair is matched,
   so the text never reflows as it is written. */
.pt .mp-letter {
  flex: none; align-self: center; width: 250px; max-height: 100%; overflow-y: auto; padding: 18px 20px; border-radius: 4px;
  background: linear-gradient(#fbf5e6, #f2e6c9); color: #3d2f1f; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transform: rotate(.6deg);
  font: italic 15px/1.55 Georgia, serif;
}
.pt .pt-col .mp-letter { width: min(100%, 460px); max-height: 38%; padding: 12px 16px; font-size: 14px; transform: none; }
.pt .mp-letter[hidden] { display: none; }
.mp-letter p { margin: 0; }
.mp-letter-to { margin-bottom: 8px !important; font-weight: 700; }
.mp-letter-body span, .mp-letter-sig { opacity: 0; transition: opacity .6s ease; }
.mp-letter-body span.on, .mp-letter-sig.on { opacity: 1; }
.mp-letter-sig { margin-top: 10px !important; text-align: right; font-weight: 700; }

/* The result. */
.pt-win {
  position: absolute; left: 50%; top: 50%; z-index: 9000; width: min(92%, 380px); max-height: calc(100% - 16px); overflow-y: auto;
  transform: translate(-50%, -50%); padding: 20px 22px; border-radius: 16px; background: #fffdf6; color: #2d3436;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45); text-align: center; animation: pt-win-in .35s cubic-bezier(.2, .9, .3, 1.2);
}
.pt-win[hidden] { display: none; }
.pt-win h2 { margin: 10px 0 6px; font-family: Georgia, serif; font-size: 1.45rem; }
.pt-win-kicker { margin: 0 0 10px; color: #8e5fb3; font-size: .8rem; font-weight: 700; }
.pt-win-art { display: flex; justify-content: center; }
.pt-win-art:empty { display: none; }
.pt-win-art canvas { max-width: 100%; height: auto; }
.pt-win-line { margin: 0 0 16px; color: #636e72; font: italic 1rem/1.5 Georgia, serif; }
.pt-win-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* .pt-win .btn sets display, which outranks the hidden attribute's own rule. */
.pt-win .btn[hidden] { display: none; }

/* A theme that made something: the thing stays on the felt, and the result is a strip under it. */
.pt-felt.pt-won-strip { padding-bottom: 128px; }
.pt .pt-won-strip .mp-letter { max-height: 100%; }
.pt-showpiece canvas { display: block; border-radius: 4px; box-shadow: 0 14px 34px rgba(0, 0, 0, .4); }
.pt-win.pt-win-strip {
  top: auto; bottom: 14px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 20px;
  width: min(calc(100% - 24px), 760px); padding: 14px 18px; transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, .12); background: rgba(16, 34, 28, .92); color: #efe6cf; text-align: left;
  animation: pt-strip-in .35s cubic-bezier(.2, .9, .3, 1.1);
}
.pt-win-strip .pt-win-kicker { grid-column: 1; margin: 0 0 3px; color: #e8b86a; }
.pt-win-strip h2 { grid-column: 1; margin: 0; color: #f6ecd2; font-size: 1.3rem; }
.pt-win-strip .pt-win-line { grid-column: 1; margin: 3px 0 0; color: #c4d0bf; font-size: .92rem; }
.pt-win-strip .pt-win-btns { grid-column: 2; grid-row: 1 / span 4; }
@media (max-width: 640px) {
  .pt-felt.pt-won-strip { padding-bottom: 200px; }
  .pt-win.pt-win-strip { grid-template-columns: minmax(0, 1fr); }
  .pt-win-strip .pt-win-btns { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 12px; }
}
@keyframes pt-win-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.94); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes pt-strip-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } }