/* Mahjong Stack Up: one canvas covers the stage (the sky, the town, the table and the tower), and
   the game's name, its button, the level's row and the caption lie over its top, the restart and
   the speaker over its bottom corners. The panel's size is game-layout.css's (data-ideal); the
   stage fills it. */

/* No `inset` in this file: iOS before 14.5 drops it, and the stage then has no size. */
.game-root[data-game="mahjong-stack-up"] {
  position: relative; display: block; padding: 0; overflow: hidden; text-align: left;
  background: #f4dcb0;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.msu-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-tap-highlight-color: transparent; }
/* A meld goes on a tap, so a finger's up-and-down move still scrolls the page. */
.msu-canvas {
  position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;
  cursor: pointer; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}

/* --- the top: the game's name at the left, its button at the right ----------------------------- */
.msu-top {
  position: absolute; top: 14px; left: 18px; right: 160px; z-index: 3;
  display: flex; align-items: baseline; pointer-events: none; text-align: left;
}
.msu-game { font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(70, 30, 10, .55); white-space: nowrap; }
.msu-tools { position: absolute; top: 12px; right: 14px; z-index: 4; display: flex; gap: 8px; }
.msu-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px;
  background: rgba(255, 252, 244, .9); color: #7a3418;
  font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap;
}
.msu-pill:hover:not(:disabled) { border-color: #d6322a; color: #4a1d0b; }
.msu-pill .msu-icon { width: 16px; height: 16px; }

/* The level, a bar of the floors built with the count on it, and the melds that may still slip.
   The row's height is fixed: mahjong-stack-up.js starts the play area under the caption. */
.msu-hud {
  position: absolute; top: 46px; left: 50%; z-index: 3; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: min(440px, calc(100% - 24px)); height: 1.9rem; box-sizing: border-box; pointer-events: none;
}
.msu-lv { flex: none; color: #fff; font-size: 1rem; font-weight: 800; line-height: 1; text-shadow: 0 1px 2px rgba(70, 30, 10, .6); white-space: nowrap; }
.msu-bar {
  position: relative; flex: 1 1 220px; min-width: 0; max-width: 240px; height: 20px; box-sizing: border-box; overflow: hidden;
  border: 2px solid #fff; border-radius: 999px; background: rgba(90, 30, 10, .4);
  box-shadow: 0 1px 2px rgba(70, 30, 10, .35);
}
.msu-bar-fill {
  display: block; width: 0; height: 100%; border-radius: 999px;
  background: linear-gradient(180deg, #ffe9a6 0 40%, #f2a93b 40% 100%); transition: width .28s ease-out;
}
.msu-count {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .74rem; font-weight: 800; line-height: 1; text-shadow: 0 1px 2px rgba(70, 30, 10, .8);
}
.msu-bar.is-bump { animation: msu-bump .28s ease-out; }
@keyframes msu-bump { 40% { transform: scale(1.08); } }
.msu-lives { flex: none; display: flex; gap: 4px; }
.msu-lives[hidden] { display: none; }
.msu-life { display: block; width: 20px; height: 20px; }
.msu-heart {
  display: block; width: 100%; height: 100%;
  fill: #e8402f; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round;
  filter: drop-shadow(0 1px 1.5px rgba(70, 30, 10, .45));
}
.msu-life.is-gone .msu-heart { fill: rgba(255, 255, 255, .22); stroke: rgba(255, 255, 255, .7); }
.msu-life.is-hit { animation: msu-hit .5s ease-out; }
.msu-life.is-back { animation: msu-back .55s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes msu-hit { 20% { transform: translateY(-4px) rotate(-14deg); } 50% { transform: translateY(2px) rotate(10deg); } }
@keyframes msu-back { from { transform: scale(.3); } }

/* Under the level's row, two lines tall whatever it says, empty included: the play area starts
   under it, so a caption that changed height would move the board as words come and go. */
.msu-cap {
  position: absolute; top: 80px; left: 50%; z-index: 3; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 3em; overflow: hidden; line-height: 1.5; margin: 0; width: min(560px, 100%); padding: 0 12px;
  color: #fff; font-size: .86rem; font-weight: 700; text-align: center; pointer-events: none;
  text-shadow: 0 1px 2px rgba(70, 30, 10, .85), 0 0 8px rgba(70, 30, 10, .55);
}

/* The lesson's hand, placed by mahjong-stack-up.js; it taps. */
.msu-hand {
  position: absolute; z-index: 3; width: 54px; height: 54px; margin: -6px 0 0 -14px; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(60, 20, 0, .45));
  animation: msu-tap 1.1s ease-in-out infinite;
}
.msu-hand[hidden] { display: none; }
.msu-hand .msu-icon { width: 100%; height: 100%; color: #7a3418; stroke-width: 1.4; }
@keyframes msu-tap { 0%, 100% { transform: translateY(0) scale(1); } 45% { transform: translateY(-8px) scale(1.04); } 60% { transform: translateY(2px) scale(.94); } }

/* --- the bottom corners: start over at the left, the speaker at the right --------------------- */
.msu-ctrl { position: absolute; left: 12px; bottom: 9px; z-index: 3; display: flex; align-items: center; }
.msu-box {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px 0 12px; box-sizing: border-box;
  border: 2px solid #fff; border-radius: 14px; background: rgba(255, 252, 244, .9); color: #7a3418; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 2px 0 rgba(90, 40, 10, .3);
}
.msu-box:hover:not(:disabled) { background: #fff; color: #4a1d0b; }
.msu-box:disabled { opacity: .55; cursor: default; }
.msu-box .msu-icon { width: 18px; height: 18px; stroke-width: 2.4; }

/* At the stage's two sides, halfway down, faint until hovered; under the card's panel (z-index 5). */
.msu-arrow {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 252, 244, .3); color: rgba(122, 52, 24, .55); cursor: pointer;
}
.msu-prev { left: 6px; }
.msu-next { right: 6px; }
.msu-arrow:hover:not(:disabled) { background: rgba(255, 252, 244, .92); color: #7a3418; box-shadow: 0 1px 4px rgba(70, 30, 10, .25); }
.msu-arrow[hidden] { display: none; }
.msu-arrow::after {
  content: attr(data-tip); position: absolute; top: 50%; transform: translateY(-50%);
  padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .95); color: #3d2a1d;
  box-shadow: 0 1px 4px rgba(70, 30, 10, .18); font-size: .8rem; font-weight: 600; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.msu-prev::after { left: calc(100% + 4px); }
.msu-next::after { right: calc(100% + 4px); }
.msu-arrow:hover::after, .msu-arrow:focus-visible::after { opacity: 1; }
.msu-arrow .msu-icon { width: 28px; height: 28px; }
@media (hover: none) { .msu-arrow::after { display: none; } }

/* The speaker, and the dots beside it that open the menu. The dots take no room until shown
   (hover, focus, or the menu open); a screen that cannot hover shows them always, dimmer. */
.msu-round {
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255, 252, 244, .8); color: #3d2a1d; cursor: pointer;
  box-shadow: 0 1px 4px rgba(70, 30, 10, .2);
}
.msu-round:hover { background: #fff; }
.msu-round .msu-sicon { width: 22px; height: 22px; }
.msu-audio { position: absolute; right: 12px; bottom: 9px; z-index: 3; display: flex; align-items: center; }
.msu-more {
  display: grid; place-items: center; width: 0; height: 38px; padding: 0; overflow: hidden;
  border: 0; background: none; color: rgba(255, 255, 255, .9); cursor: pointer; opacity: 0;
  transition: opacity .15s ease;
}
.msu-audio:hover .msu-more, .msu-audio:focus-within .msu-more, .msu-audio.is-open .msu-more { width: 30px; opacity: 1; }
@media (hover: none) { .msu-more { width: 26px; opacity: .7; } }
.msu-more .msu-sicon { width: 22px; height: 22px; }
.msu-ellipsis { stroke-width: 3.4; }
.msu-menu {
  position: absolute; right: 0; bottom: 46px; min-width: 200px; padding: 6px; box-sizing: border-box;
  border: 1px solid rgba(61, 42, 29, .18); border-radius: 12px; background: #fffdf8;
  box-shadow: 0 6px 20px rgba(60, 30, 10, .2);
}
.msu-menu[hidden] { display: none; }
.msu-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 9px 10px;
  border: 0; border-radius: 8px; background: none; color: #3d2a1d; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; text-align: left;
}
.msu-opt:hover, .msu-opt:focus-visible { background: rgba(61, 42, 29, .07); }
.msu-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: rgba(61, 42, 29, .22); transition: background .15s ease; }
.msu-sw::after {
  content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s ease;
}
.msu-opt[aria-checked="true"] .msu-sw { background: #4fb878; }
.msu-opt[aria-checked="true"] .msu-sw::after { transform: translateX(14px); }
.msu-sicon { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.msu-cone { fill: currentColor; stroke: none; }
.msu-sound.off .msu-waves { display: none; }
.msu-sound:not(.off) .msu-slash { display: none; }
.msu-icon { width: 18px; height: 18px; flex: none; }

/* --- over the stage: the panel dims it, and a sheet in its middle holds the card -------------- */
.msu-win { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; }
.msu-win:empty { pointer-events: none; }
.msu-panel {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 20px; text-align: center; overflow-y: auto;
  background: rgba(60, 24, 10, .45);
  animation: msu-in .35s ease-out;
}
@keyframes msu-in { from { opacity: 0; } }
/* Centred with auto margins rather than justify-content: a sheet taller than the stage scrolls
   from its top instead of losing it. */
.msu-panel > * { flex: none; }
.msu-panel > :first-child { margin-top: auto; margin-bottom: auto; }
.msu-sheet {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(440px, 100%); box-sizing: border-box;
  padding: 26px 18px; border-radius: 20px; background: #fffdf8;
  box-shadow: 0 10px 0 rgba(90, 40, 10, .12);
}
.msu-sheet .msu-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: #4a1d0b; }
.msu-word { white-space: nowrap; }
.msu-ch { display: inline-block; animation: msu-wave .5s ease-in-out both; }
@keyframes msu-wave { 40% { transform: translateY(-.35em); } }
.msu-view { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.msu-view p { margin: 0; }
.msu-view-title { font-weight: 800; color: #4a1d0b; }
.msu-view-line { color: #5e3b26; }
.msu-view-small { font-size: .8rem; color: #9a8676; }
.msu-ask { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #5e3b26; }
.msu-ask p { margin: 0; }
.msu-moods { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.msu-mood {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 1px solid var(--c-border); border-radius: 999px; background: #fff; color: var(--c-text);
  font: inherit; cursor: pointer;
}
.msu-mood:hover { border-color: var(--c-primary); }
.msu-mood.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.msu-mood .msu-icon { width: 22px; height: 22px; }
.msu-ask .msu-note { min-height: 1.3em; margin: 0; font-size: .9rem; color: var(--c-text-soft); }
.msu-kbd {
  display: inline-block; min-width: 1.6em; padding: 1px 6px; margin: 0 1px;
  border: 1px solid #c9ced8; border-bottom-width: 2px; border-radius: 5px; background: #fff;
  font: inherit; font-size: .85em; font-weight: 700; line-height: 1.4; text-align: center; color: var(--c-text);
}
.msu-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.msu-choices .btn { display: inline-flex; align-items: center; gap: 8px; }
.msu-choices .msu-icon { stroke-width: 2.2; }
.msu-badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 7px 18px 7px 13px; border-radius: 999px;
  background: #fff1cc; border: 1.5px solid #f0c25a;
  color: #8a5300; font-size: 1.12rem; font-weight: 800;
  animation: msu-badge-in .55s cubic-bezier(.2, .9, .3, 1.35) .15s both;
}
.msu-cap-icon { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.msu-cap-top { fill: currentColor; }
@keyframes msu-badge-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

/* The review build's tools, under the game panel and outside it. */
.msu-review {
  display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap;
  margin: 10px auto 0; padding: 8px; font-size: .85rem; color: #4a5766;
}
.msu-review select, .msu-review button { font: inherit; padding: 4px 8px; border-radius: 8px; border: 1px solid #ccc; background: #fff; }

/* #game-root itself is the element that goes full screen; these same rules are the
   fixed-position fallback for a browser without the Fullscreen API. game-layout.css gives a
   [data-ideal] panel an explicit width and height, which would beat the fallback's inset. */
#game-root.msu-fs {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200; margin: 0; padding: 0;
  width: auto; height: auto; max-width: none;
  border: 0; border-radius: 0; box-shadow: none; min-height: 0; overflow: hidden;
}
body.msu-locked { overflow: hidden; }

/* iOS before 14.5 ignores `gap` on a flex box, and `inset` came in the same release, so this
   reaches only those browsers. The margins stand in for each gap above, and must change with it.
   #game-root lifts them over the `margin: 0` the children set. */
@supports not (inset: 0) {
  #game-root .msu-tools > * + *, #game-root .msu-mood > * + *, #game-root .msu-choices .btn > * + *, #game-root .msu-badge > * + * { margin-left: 8px; }
  #game-root .msu-pill > * + * { margin-left: 6px; }
  #game-root .msu-hud > * + * { margin-left: 12px; }
  #game-root .msu-lives > * + * { margin-left: 4px; }
  #game-root .msu-box > * + * { margin-left: 7px; }
  #game-root .msu-opt > * + * { margin-left: 16px; }
  #game-root .msu-panel > * + * { margin-top: 18px; }
  #game-root .msu-sheet > * + * { margin-top: 14px; }
  #game-root .msu-view > * + * { margin-top: 4px; }
  #game-root .msu-ask > * + * { margin-top: 10px; }
  #game-root .msu-moods > * { margin: 5px; }
  #game-root .msu-choices > * { margin: 6px; }
}