/* Mahjong Snowlight: the game's name and its button across the top, and under them the round's
   own area, which mahjong-snowlight.js lays the board out in. The panel's size is
   game-layout.css's (data-ideal); the stage fills it. Behind everything is a winter dusk with hills
   of snow along the bottom, in ::before, and snow falling over it (.mjl-snow). */

/* No `inset` in this file: iOS before 14.5 drops it, and the stage then has no size. */
.game-root[data-game="mahjong-snowlight"] {
  position: relative; display: block; padding: 0; overflow: hidden; text-align: left;
  background: #3a4c8c;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.game-root[data-game="mahjong-snowlight"]::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background:
    radial-gradient(ellipse 70% 16% at 18% 100%, #f2f8fd 0 60%, rgba(242, 248, 253, 0) 61%),
    radial-gradient(ellipse 60% 13% at 82% 100%, #e6effa 0 60%, rgba(230, 239, 250, 0) 61%),
    radial-gradient(ellipse 90% 20% at 50% 104%, #d8e4f3 0 60%, rgba(216, 228, 243, 0) 61%),
    radial-gradient(circle at 20% 12%, rgba(255, 244, 214, .6) 0 2.2%, rgba(255, 244, 214, 0) 7%),
    linear-gradient(180deg, #27356f 0%, #47569a 42%, #8f8fc4 74%, #e7c3b4 100%);
}
.mjl-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* Snow falling behind the board, on the duration and delay mahjong-snowlight.js sets on each
   flake. Only the transform moves; no var() inside the keyframes, which older Safari drops. */
.mjl-snow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; }
.mjl-snow i {
  position: absolute; top: -12px; border-radius: 50%; background: #fff; opacity: .75;
  animation: mjl-fall0 12s linear infinite;
}
.mjl-snow .mjl-f1 { animation-name: mjl-fall1; }
.mjl-snow .mjl-f2 { animation-name: mjl-fall2; }
@keyframes mjl-fall0 { 0% { transform: translate(0, 0); } 25% { transform: translate(14px, 28vh); } 50% { transform: translate(0, 56vh); } 75% { transform: translate(-14px, 84vh); } 100% { transform: translate(0, 112vh); } }
@keyframes mjl-fall1 { 0% { transform: translate(0, 0); } 25% { transform: translate(-22px, 28vh); } 50% { transform: translate(0, 56vh); } 75% { transform: translate(22px, 84vh); } 100% { transform: translate(0, 112vh); } }
@keyframes mjl-fall2 { 0% { transform: translate(0, 0); } 25% { transform: translate(30px, 28vh); } 50% { transform: translate(0, 56vh); } 75% { transform: translate(-30px, 84vh); } 100% { transform: translate(0, 112vh); } }

/* --- the top row: the game's name at the left, its button at the right ------------------------ */
.mjl-top {
  position: absolute; top: 14px; left: 18px; right: 18px; z-index: 2;
  display: flex; align-items: baseline; gap: 10px; pointer-events: none; text-align: left;
}
.mjl-game { font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(10, 30, 70, .5); }
.mjl-tools { position: absolute; top: 12px; right: 14px; z-index: 4; display: flex; gap: 8px; }
.mjl-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 999px;
  background: rgba(255, 255, 255, .86); color: #2b4a73;
  font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap;
}
.mjl-pill:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-text); }
.mjl-pill .mjl-icon { width: 16px; height: 16px; }

/* --- the round's own area -------------------------------------------------------------------- */
.mjl {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 52px 6px 6px; box-sizing: border-box; overflow: hidden; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.mjl > .mjl-hud, .mjl > .mjl-cap, .mjl > .mjl-ctrl { flex: none; }

/* The level, a bar of how much of it is taken, and how many tiles are left. --bw is the board's
   width and --slack the space left over above, both set by mahjong-snowlight.js. The row's height
   is fixed: the board is laid out in what it leaves. */
.mjl-hud {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: max(var(--bw, 100%), min(100%, 304px)); max-width: 100%; height: 1.84rem; margin-top: var(--slack, 0px); padding: 0 8px; box-sizing: border-box;
}
.mjl-lv { flex: none; color: #fff; font-size: 1rem; font-weight: 800; line-height: 1; text-shadow: 0 1px 2px rgba(10, 30, 70, .6); white-space: nowrap; }
.mjl-bar {
  flex: 1 1 220px; max-width: 240px; min-width: 0; height: 14px; box-sizing: border-box; overflow: hidden;
  border: 2px solid #fff; border-radius: 999px; background: rgba(10, 30, 70, .38);
  box-shadow: 0 1px 2px rgba(10, 30, 70, .35);
}
.mjl-bar-fill {
  display: block; width: 0; height: 100%; border-radius: 999px;
  background: linear-gradient(180deg, #fff6df 0 40%, #f3c26b 40% 100%); transition: width .28s ease-out;
}
.mjl-bar.is-bump { animation: mjl-bump .28s ease-out; }
@keyframes mjl-bump { 40% { transform: scale(1.08); } }
.mjl-left {
  flex: none; min-width: 2.2em; padding: 2px 8px; box-sizing: border-box; border-radius: 999px; text-align: center;
  background: rgba(10, 30, 70, .38); color: #fff; font-size: .9rem; font-weight: 800; line-height: 1.2;
  text-shadow: 0 1px 2px rgba(10, 30, 70, .6);
}

.mjl-fit { flex: 1 1 0; min-height: 0; width: 100%; display: grid; place-items: start center; }
.mjl-board { position: relative; }
/* A tile acts on a tap, so a finger's up-and-down move still scrolls the page. */
.mjl-canvas {
  display: block; width: 100%; height: 100%; cursor: pointer; touch-action: pan-y;
  user-select: none; -webkit-user-select: none;
}

.mjl-cap {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 3em; overflow: hidden; line-height: 1.5; margin: 0; width: 100%; max-width: 560px; padding: 0 8px;
  color: #fff; font-size: .86rem; font-weight: 700; text-align: center;
  text-shadow: 0 1px 2px rgba(10, 30, 70, .8), 0 0 8px rgba(10, 30, 70, .55);
}

/* Undo and Hint side by side on the left house, Refresh on the right one, each with how many are
   left at its upper corner. */
.mjl-aid {
  position: absolute; bottom: 4%; z-index: 3; transform: translateX(-50%);
  display: grid; place-items: center; box-sizing: border-box; padding: 0;
  width: clamp(46px, calc(var(--bw, 320px) * .14), 74px); aspect-ratio: 3 / 2;
  border: 3px solid #fff; border-radius: 14px; background: linear-gradient(180deg, #6fd0ff, #2fa3ee); color: #fff; cursor: pointer;
  box-shadow: 0 3px 0 #1a72bb;
}
.mjl-aid-undo { left: 14%; }
.mjl-aid-hint { left: 33%; }
.mjl-aid-mix { left: 77%; }
.mjl-aid:hover:not(:disabled) { background: linear-gradient(180deg, #8adbff, #44b1f5); }
/* Off, or none left: a duller blue, never see-through. One with none left is still pressed, to be
   told why. */
.mjl-aid:disabled, .mjl-aid.is-empty, .mjl-aid.is-empty:hover { background: linear-gradient(180deg, #b4d2e4, #8eb3cb); box-shadow: 0 3px 0 #6a8da5; }
.mjl-aid:disabled { cursor: default; }
.mjl-aid .mjl-icon {
  width: 64%; height: auto; aspect-ratio: 1; max-width: 40px; stroke-width: 2.9;
  filter: drop-shadow(0 1.5px 0 rgba(12, 76, 134, .6));
}
/* iOS before 15 has no aspect-ratio: the key's width and its icon's, taken again as heights. */
@supports not (aspect-ratio: 1) {
  .mjl-aid { height: calc(clamp(46px, calc(var(--bw, 320px) * .14), 74px) * 2 / 3); }
  .mjl-aid .mjl-icon { height: min(40px, calc((clamp(46px, calc(var(--bw, 320px) * .14), 74px) - 6px) * .64)); }
}
.mjl-count {
  position: absolute; top: -8px; right: -8px;
  display: grid; place-items: center; box-sizing: border-box; min-width: 20px; height: 20px; padding: 0 4px;
  border: 2px solid #fff; border-radius: 999px; background: #3fae6a; color: #fff;
  font-size: .72rem; font-weight: 800; line-height: 1;
}
.mjl-aid:disabled .mjl-count, .mjl-aid.is-empty .mjl-count { background: #8a97a3; }
.mjl-count.is-pop { animation: mjl-count-pop .45s ease-out; }
@keyframes mjl-count-pop { 35% { transform: scale(1.55); } }

/* Start over, on the right house over Refresh, sized by the board's width so it stays on it: its
   bottom adds .mjl-aid's height (its width's 2/3) to Refresh's, so the two change together. */
.mjl-box.mjl-restart {
  position: absolute; bottom: calc(4% + clamp(46px, calc(var(--bw, 320px) * .14), 74px) * 2 / 3 + 12px); left: 77%; z-index: 3; transform: translateX(-50%);
  height: clamp(28px, calc(var(--bw, 320px) * .085), 38px); padding: 0 10px 0 8px; gap: 5px;
  background: #fff; font-size: clamp(.66rem, calc(var(--bw, 320px) * .03), .88rem);
}
.mjl-box.mjl-restart:disabled { opacity: 1; background: #e3ebf2; color: #98a6b4; }

/* Under the board, a row as wide as it: the room the level's arrows and the speaker stand in
   where there is none beside the board. */
.mjl-ctrl {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: flex-start;
  width: max(var(--bw, 100%), min(100%, 304px)); max-width: 100%; min-height: 40px; padding: 0 8px; box-sizing: border-box;
}
.mjl-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, 255, 255, .86); color: #2b4a73; cursor: pointer;
  font: inherit; font-size: .86rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 2px 0 rgba(10, 40, 80, .28);
}
.mjl-box:hover:not(:disabled) { background: #fff; color: #163257; }
.mjl-box:disabled { opacity: .5; cursor: default; }
.mjl-box .mjl-icon { width: 18px; height: 18px; stroke-width: 2.4; }

/* At the stage's two sides, halfway down; under the card's panel (z-index 5). One that cannot be
   pressed is hidden by mahjong-snowlight.js and keeps its place. */
.mjl-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, 255, 255, .7); color: #2b4a73; cursor: pointer;
  box-shadow: 0 1px 4px rgba(10, 30, 70, .25);
}
.mjl-prev { left: 6px; }
.mjl-next { right: 6px; }
.mjl-arrow:hover:not(:disabled) { background: #fff; color: #163257; }
.mjl-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: #2b3a4d;
  box-shadow: 0 1px 4px rgba(10, 30, 70, .18); font-size: .8rem; font-weight: 600; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .12s ease;
}
.mjl-prev::after { left: calc(100% + 4px); }
.mjl-next::after { right: calc(100% + 4px); }
.mjl-arrow:hover::after, .mjl-arrow:focus-visible::after { opacity: 1; }
.mjl-arrow .mjl-icon { width: 28px; height: 28px; }
/* No room beside the board (mahjong-snowlight.js sets the class): the two sit together in the
   middle of the bottom row. */
.mjl-tight .mjl-arrow { top: auto; bottom: 9px; transform: none; width: 34px; height: 34px; }
.mjl-tight .mjl-prev { left: calc(50% - 10px); }
.mjl-tight .mjl-next { left: calc(50% + 30px); right: auto; }
.mjl-tight .mjl-arrow::after { display: none; }
.mjl-tight .mjl-arrow .mjl-icon { width: 24px; height: 24px; }

/* The speaker, and the dots beside it that open the menu, which opens upward. */
.mjl-round {
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .7); color: #2b3a4d; cursor: pointer;
  box-shadow: 0 1px 4px rgba(10, 30, 70, .2);
}
.mjl-round:hover { background: #fff; }
.mjl-round .mjl-sicon { width: 22px; height: 22px; }
.mjl-audio { position: absolute; right: 12px; bottom: 7px; z-index: 3; display: flex; align-items: center; }
.mjl-more {
  display: grid; place-items: center; width: 0; height: 38px; padding: 0; overflow: hidden;
  border: 0; background: none; color: rgba(255, 255, 255, .8); cursor: pointer; opacity: 0;
  transition: opacity .15s ease;
}
.mjl-audio:hover .mjl-more, .mjl-audio:focus-within .mjl-more, .mjl-audio.is-open .mjl-more { width: 30px; opacity: 1; }
@media (hover: none) { .mjl-more { width: 26px; opacity: .6; } }
.mjl-more .mjl-sicon { width: 22px; height: 22px; }
.mjl-ellipsis { stroke-width: 3.4; }
.mjl-menu {
  position: absolute; right: 0; bottom: 46px; min-width: 200px; padding: 6px; box-sizing: border-box;
  border: 1px solid rgba(43, 58, 77, .18); border-radius: 12px; background: #fbfdff;
  box-shadow: 0 6px 20px rgba(10, 30, 60, .2);
}
.mjl-menu[hidden] { display: none; }
.mjl-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: #2b3a4d; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; text-align: left;
}
.mjl-opt:hover, .mjl-opt:focus-visible { background: rgba(43, 58, 77, .07); }
.mjl-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: rgba(43, 58, 77, .22); transition: background .15s ease; }
.mjl-sw::after {
  content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s ease;
}
.mjl-opt[aria-checked="true"] .mjl-sw { background: #4fb878; }
.mjl-opt[aria-checked="true"] .mjl-sw::after { transform: translateX(14px); }
.mjl-sicon { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mjl-cone { fill: currentColor; stroke: none; }
.mjl-sound.off .mjl-waves { display: none; }
.mjl-sound:not(.off) .mjl-slash { display: none; }
.mjl-icon { width: 18px; height: 18px; flex: none; }

/* Rails (mahjong-snowlight.js sets the class where there is room for them beside the board): the
   level's row and the caption stand at the board's left, the empty row under the board goes, and
   the board takes the stage's whole height. The padding here is RAIL_PAD in mahjong-snowlight.js;
   the two change together. */
.mjl-rails .mjl { padding: 8px 6px; }
.mjl-rails .mjl-fit { place-items: end center; }
.mjl-rails .mjl-hud, .mjl-rails .mjl-cap {
  position: absolute; left: 18px; width: calc((100% - var(--bw, 0px)) / 2 - 36px); max-width: 300px; margin: 0; padding: 0;
}
.mjl-rails .mjl-hud { top: 48px; }
.mjl-rails .mjl-cap { top: 84px; height: auto; min-height: 3em; justify-content: flex-start; text-align: left; }
.mjl-rails .mjl-ctrl { display: none; }

/* --- over the stage: the panel dims it, and a sheet in its middle holds the card -------------- */
.mjl-win { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; }
.mjl-win:empty { pointer-events: none; }
.mjl-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(24, 32, 76, .6);
  animation: mjl-in .35s ease-out;
}
@keyframes mjl-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. */
.mjl-panel > * { flex: none; }
.mjl-panel > :first-child { margin-top: auto; margin-bottom: auto; }
.mjl-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: #fbfdff;
  box-shadow: 0 10px 0 rgba(20, 50, 90, .1);
}
.mjl-sheet .mjl-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: #22364f; }
.mjl-word { white-space: nowrap; }
.mjl-ch { display: inline-block; animation: mjl-wave .5s ease-in-out both; }
@keyframes mjl-wave { 40% { transform: translateY(-.35em); } }
.mjl-view { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.mjl-view p { margin: 0; }
.mjl-view-title { font-weight: 800; color: #22364f; }
.mjl-view-line { color: #33475f; }
.mjl-view-small { font-size: .8rem; color: #8695a6; }
.mjl-new { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #22364f; font-weight: 700; }
.mjl-new p { margin: 0; }
.mjl-new-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mjl-new-tile {
  flex: none; display: grid; place-items: center; width: 36px; height: 48px; box-sizing: border-box;
  border-radius: 6px; background: linear-gradient(135deg, #fffefa, #efe6d2); box-shadow: 0 3px 0 #86c3e8, 0 4px 0 #2f6aa0;
  animation: mjl-badge-in .55s cubic-bezier(.2, .9, .3, 1.35) .5s both;
}
.mjl-new-tile img { display: block; width: 30px; height: 40px; object-fit: contain; }
.mjl-ask { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #3d5068; }
.mjl-ask p { margin: 0; }
.mjl-moods { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mjl-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;
}
.mjl-mood:hover { border-color: var(--c-primary); }
.mjl-mood.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.mjl-mood .mjl-icon { width: 22px; height: 22px; }
.mjl-ask .mjl-note { min-height: 1.3em; margin: 0; font-size: .9rem; color: var(--c-text-soft); }
.mjl-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);
}
.mjl-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mjl-choices .btn { display: inline-flex; align-items: center; gap: 8px; }
.mjl-choices .mjl-icon { stroke-width: 2.2; }
.mjl-badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 7px 18px 7px 13px; border-radius: 999px;
  background: #dff3e6; border: 1.5px solid #8fd3a9;
  color: #237a4a; font-size: 1.12rem; font-weight: 800;
  animation: mjl-badge-in .55s cubic-bezier(.2, .9, .3, 1.35) .15s both;
}
.mjl-cap-icon { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mjl-cap-top { fill: currentColor; }
@keyframes mjl-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. */
.mjl-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;
}
.mjl-review select, .mjl-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.mjl-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.mjl-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 .mjl-top > * + * { margin-left: 10px; }
  #game-root .mjl-tools > * + *, #game-root .mjl-mood > * + *, #game-root .mjl-choices .btn > * + *, #game-root .mjl-badge > * + * { margin-left: 8px; }
  #game-root .mjl-pill > * + * { margin-left: 6px; }
  #game-root .mjl-hud > * + * { margin-left: 12px; }
  #game-root .mjl-box > * + * { margin-left: 7px; }
  #game-root .mjl-box.mjl-restart > * + * { margin-left: 5px; }
  #game-root .mjl-opt > * + * { margin-left: 16px; }
  #game-root .mjl > * + * { margin-top: 6px; }
  #game-root .mjl-panel > * + * { margin-top: 18px; }
  #game-root .mjl-sheet > * + * { margin-top: 14px; }
  #game-root .mjl-view > * + * { margin-top: 4px; }
  #game-root .mjl-new > * + * { margin-top: 8px; }
  #game-root .mjl-new-row > * { margin: 3px; }
  #game-root .mjl-ask > * + * { margin-top: 10px; }
  #game-root .mjl-moods > * { margin: 5px; }
  #game-root .mjl-choices > * { margin: 6px; }
}