/* Mahjong Snowsong: the game's name and its button across the top, and under them the round's own
   area, which mahjong-snowsong.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 evening sky with hills of snow
   along the bottom, in ::before, and snow falling over it (.igl-snow). */

/* No `inset` in this file: iOS before 14.5 drops it, and the stage then has no size. */
.game-root[data-game="mahjong-snowsong"] {
  position: relative; display: block; padding: 0; overflow: hidden; text-align: left;
  background: #3b5f97;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.game-root[data-game="mahjong-snowsong"]::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%, #e3eff9 0 60%, rgba(227, 239, 249, 0) 61%),
    radial-gradient(ellipse 90% 20% at 50% 104%, #d5e6f4 0 60%, rgba(213, 230, 244, 0) 61%),
    radial-gradient(circle at 78% 14%, rgba(255, 250, 225, .55) 0 2.2%, rgba(255, 250, 225, 0) 7%),
    linear-gradient(180deg, #2b4a80 0%, #4a72b0 45%, #8fb3dd 78%, #c2d8ee 100%);
}
.igl-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* Snow falling behind the board: each flake falls past the window's height, swaying one of three
   widths as it goes, on the duration and delay mahjong-snowsong.js sets on it. Only the transform
   moves, so falling costs no layout and no paint; no var() inside the keyframes, which older
   Safari drops. */
.igl-snow { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; }
.igl-snow i {
  position: absolute; top: -12px; border-radius: 50%; background: #fff; opacity: .75;
  animation: igl-fall0 12s linear infinite;
}
.igl-snow .igl-f1 { animation-name: igl-fall1; }
.igl-snow .igl-f2 { animation-name: igl-fall2; }
@keyframes igl-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 igl-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 igl-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 ------------------------ */
.igl-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;
}
.igl-game { font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(10, 30, 70, .5); }
.igl-tools { position: absolute; top: 12px; right: 14px; z-index: 4; display: flex; gap: 8px; }
.igl-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;
}
.igl-pill:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-text); }
.igl-pill .igl-icon { width: 16px; height: 16px; }

/* --- the round's own area --------------------------------------------------------------------
   The top padding clears the row above. */
.igl {
  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;
}
.igl > .igl-hud, .igl > .igl-cap, .igl > .igl-ctrl { flex: none; }

/* The level at the board's left edge and, at its right, a bar of how much of the level's tiles
   are taken. --bw is the board's width and --slack the space left over above, both set by
   mahjong-snowsong.js. The row's height is fixed: the board is laid out in what it leaves. The row
   is as wide as the board, and 304px where the board is narrower than that and the stage is not. */
.igl-hud {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  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;
}
.igl-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; }
.igl-bar {
  flex: 0 1 220px; 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);
}
.igl-bar-fill {
  display: block; width: 0; height: 100%; border-radius: 999px;
  background: linear-gradient(180deg, #e9fbff 0 40%, #6cc8f2 40% 100%); transition: width .28s ease-out;
}
.igl-bar.is-bump { animation: igl-bump .28s ease-out; }
@keyframes igl-bump { 40% { transform: scale(1.08); } }

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

/* Between the level's row and the board. Two lines tall whatever it says, empty included: the
   board is laid out in what this leaves, so a caption that changed height would move the board
   as words come and go. */
.igl-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);
}

/* The two keys, on the board at each side of the basket: the hint at the left, the refresh at the
   right, each with how many are left at its upper corner. --bw is the board's width. */
.igl-aid {
  position: absolute; bottom: 6%; z-index: 3;
  display: grid; place-items: center; box-sizing: border-box; padding: 0;
  width: clamp(54px, calc(var(--bw, 320px) * .2), 92px); aspect-ratio: 3 / 2;
  border: 3px solid #fff; border-radius: 16px; background: linear-gradient(180deg, #6fd0ff, #2fa3ee); color: #fff; cursor: pointer;
  box-shadow: 0 3px 0 #1a72bb;
}
.igl-aid[hidden] { display: none; }
.igl-aid-hint { left: 15.5%; transform: translateX(-50%); }
.igl-aid-mix { right: 15.5%; transform: translateX(50%); }
.igl-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 when the next comes. */
.igl-aid:disabled, .igl-aid.is-empty, .igl-aid.is-empty:hover { background: linear-gradient(180deg, #b4d2e4, #8eb3cb); box-shadow: 0 3px 0 #6a8da5; }
.igl-aid:disabled { cursor: default; }
.igl-aid .igl-icon {
  width: 68%; height: auto; aspect-ratio: 1; max-width: 46px; 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) {
  .igl-aid { height: calc(clamp(54px, calc(var(--bw, 320px) * .2), 92px) * 2 / 3); }
  .igl-aid .igl-icon { height: min(46px, calc((clamp(54px, calc(var(--bw, 320px) * .2), 92px) - 6px) * .68)); }
}
.igl-count {
  position: absolute; top: -8px; right: -8px;
  display: grid; place-items: center; box-sizing: border-box; min-width: 22px; height: 22px; padding: 0 5px;
  border: 2px solid #fff; border-radius: 999px; background: #3fae6a; color: #fff;
  font-size: .78rem; font-weight: 800; line-height: 1;
}
.igl-aid:disabled .igl-count, .igl-aid.is-empty .igl-count { background: #8a97a3; }
.igl-count.is-pop { animation: igl-count-pop .45s ease-out; }
@keyframes igl-count-pop { 35% { transform: scale(1.55); } }

/* Start over, on the board: on the right igloo, level with the count on the left one
   (--igl-row, from mahjong-snowsong.js), and sized by the board's width so it stays on the igloo. */
.igl-box.igl-restart {
  position: absolute; top: var(--igl-row, 77%); right: 18%; z-index: 3; transform: translate(50%, -50%);
  height: clamp(28px, calc(var(--bw, 320px) * .1), 40px); padding: 0 10px 0 8px; gap: 5px;
  background: #fff; font-size: clamp(.66rem, calc(var(--bw, 320px) * .035), .9rem);
}
.igl-box.igl-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. */
.igl-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;
}
.igl-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);
}
.igl-box:hover:not(:disabled) { background: #fff; color: #163257; }
.igl-box:disabled { opacity: .5; cursor: default; }
.igl-box .igl-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). */
.igl-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);
}
.igl-prev { left: 6px; }
.igl-next { right: 6px; }
.igl-arrow:hover:not(:disabled) { background: #fff; color: #163257; }
/* Faint on the icon, not the button: an opacity on the button would fade its tip with it. */
.igl-arrow:disabled { cursor: default; }
.igl-arrow:disabled .igl-icon { opacity: .12; }
.igl-arrow[hidden] { display: none; }
/* Where a press goes, beside the arrow on hover. */
.igl-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;
}
.igl-prev::after { left: calc(100% + 4px); }
.igl-next::after { right: calc(100% + 4px); }
.igl-arrow:hover::after, .igl-arrow:focus-visible::after { opacity: 1; }
.igl-arrow .igl-icon { width: 28px; height: 28px; }
/* No room beside the board (mahjong-snowsong.js sets the class): halfway down, the arrows would lie
   over its outer columns, so the two sit together in the middle of the bottom row, between Start
   over and the speaker. */
.igl-tight .igl-arrow { top: auto; bottom: 9px; transform: none; width: 34px; height: 34px; }
.igl-tight .igl-prev { left: calc(50% - 10px); }
.igl-tight .igl-next { left: calc(50% + 30px); right: auto; }
.igl-tight .igl-arrow::after { display: none; }
.igl-tight .igl-arrow .igl-icon { width: 24px; height: 24px; }

/* 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. The
   menu opens upward. */
.igl-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);
}
.igl-round:hover { background: #fff; }
.igl-round .igl-sicon { width: 22px; height: 22px; }
.igl-audio { position: absolute; right: 12px; bottom: 7px; z-index: 3; display: flex; align-items: center; }
.igl-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;
}
.igl-audio:hover .igl-more, .igl-audio:focus-within .igl-more, .igl-audio.is-open .igl-more { width: 30px; opacity: 1; }
@media (hover: none) { .igl-more { width: 26px; opacity: .6; } }
.igl-more .igl-sicon { width: 22px; height: 22px; }
.igl-ellipsis { stroke-width: 3.4; }
.igl-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);
}
.igl-menu[hidden] { display: none; }
.igl-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;
}
.igl-opt:hover, .igl-opt:focus-visible { background: rgba(43, 58, 77, .07); }
.igl-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: rgba(43, 58, 77, .22); transition: background .15s ease; }
.igl-sw::after {
  content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s ease;
}
.igl-opt[aria-checked="true"] .igl-sw { background: #4fb878; }
.igl-opt[aria-checked="true"] .igl-sw::after { transform: translateX(14px); }
.igl-sicon { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.igl-cone { fill: currentColor; stroke: none; }
.igl-sound.off .igl-waves { display: none; }
.igl-sound:not(.off) .igl-slash { display: none; }
.igl-icon { width: 18px; height: 18px; flex: none; }

/* Rails (mahjong-snowsong.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, under the game's name, the empty row
   under the board goes, and the board takes the stage's whole height, standing on its bottom
   edge. The padding here is RAIL_PAD in mahjong-snowsong.js; the two change together. */
.igl-rails .igl { padding: 8px 6px; }
.igl-rails .igl-fit { place-items: end center; }
.igl-rails .igl-hud, .igl-rails .igl-cap {
  position: absolute; left: 18px; width: calc((100% - var(--bw, 0px)) / 2 - 36px); max-width: 300px; margin: 0; padding: 0;
}
.igl-rails .igl-hud { top: 48px; }
.igl-rails .igl-cap { top: 84px; height: auto; min-height: 3em; justify-content: flex-start; text-align: left; }
.igl-rails .igl-ctrl { display: none; }

/* --- over the stage: the panel dims it, and a sheet in its middle holds the card -------------- */
.igl-win { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; }
.igl-win:empty { pointer-events: none; }
.igl-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(20, 40, 76, .6);
  animation: igl-in .35s ease-out;
}
@keyframes igl-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. */
.igl-panel > * { flex: none; }
.igl-panel > :first-child { margin-top: auto; margin-bottom: auto; }
.igl-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);
}
.igl-sheet .igl-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: #22364f; }
/* Each letter's delay is set by mahjong-snowsong.js. */
.igl-word { white-space: nowrap; }
.igl-ch { display: inline-block; animation: igl-wave .5s ease-in-out both; }
@keyframes igl-wave { 40% { transform: translateY(-.35em); } }
.igl-view { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.igl-view p { margin: 0; }
.igl-view-title { font-weight: 800; color: #22364f; }
.igl-view-line { color: #33475f; }
.igl-view-small { font-size: .8rem; color: #8695a6; }
/* The tiles the next level adds. */
.igl-new { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #22364f; font-weight: 700; }
.igl-new p { margin: 0; }
.igl-new-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.igl-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, #efe7d4); box-shadow: 0 3px 0 #7cc0e6, 0 4px 0 #2f78a8;
  animation: igl-badge-in .55s cubic-bezier(.2, .9, .3, 1.35) .5s both;
}
.igl-new-tile img { display: block; width: 30px; height: 40px; object-fit: contain; }
.igl-ask { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #3d5068; }
.igl-ask p { margin: 0; }
.igl-moods { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.igl-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;
}
.igl-mood:hover { border-color: var(--c-primary); }
.igl-mood.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.igl-mood .igl-icon { width: 22px; height: 22px; }
.igl-ask .igl-note { min-height: 1.3em; margin: 0; font-size: .9rem; color: var(--c-text-soft); }
.igl-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);
}
.igl-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.igl-choices .btn { display: inline-flex; align-items: center; gap: 8px; }
.igl-choices .igl-icon { stroke-width: 2.2; }
/* The last level's award: a green badge that pops in. */
.igl-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: igl-badge-in .55s cubic-bezier(.2, .9, .3, 1.35) .15s both;
}
.igl-cap-icon { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.igl-cap-top { fill: currentColor; }
@keyframes igl-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. */
.igl-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;
}
.igl-review select, .igl-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.igl-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.igl-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 .igl-top > * + * { margin-left: 10px; }
  #game-root .igl-tools > * + *, #game-root .igl-mood > * + *, #game-root .igl-choices .btn > * + *, #game-root .igl-badge > * + * { margin-left: 8px; }
  #game-root .igl-pill > * + * { margin-left: 6px; }
  #game-root .igl-hud > * + * { margin-left: 14px; }
  #game-root .igl-box > * + * { margin-left: 7px; }
  #game-root .igl-box.igl-restart > * + * { margin-left: 5px; }
  #game-root .igl-opt > * + * { margin-left: 16px; }
  #game-root .igl > * + * { margin-top: 6px; }
  #game-root .igl-panel > * + * { margin-top: 18px; }
  #game-root .igl-sheet > * + * { margin-top: 14px; }
  #game-root .igl-view > * + * { margin-top: 4px; }
  #game-root .igl-new > * + * { margin-top: 8px; }
  #game-root .igl-new-row > * { margin: 3px; }
  #game-root .igl-ask > * + * { margin-top: 10px; }
  #game-root .igl-moods > * { margin: 5px; }
  #game-root .igl-choices > * { margin: 6px; }
}