/* Popsaic: the game's name and its buttons across the top, and under them the round's own
   area, which popsaic.js lays the heap and the tray out in. The panel's size is
   game-layout.css's (data-ideal); the stage fills it. Behind everything is a scene, in ::before:
   --maj-sky is its picture, set by popsaic.js; it keeps its scenery along the bottom edge, so
   it is fitted from the bottom, and the colour with it is what shows until it arrives. */

/* No `inset` in this file: iOS before 14.5 drops it, and the stage then has no size. */
.game-root[data-game="popsaic"] {
  position: relative; display: block; padding: 0; overflow: hidden; text-align: left;
  background: #5fb9d7;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.game-root[data-game="popsaic"]::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: #3d9bf5 var(--maj-sky, none) center bottom / cover no-repeat;
  filter: saturate(.75) brightness(1.04);
}
.game-root[data-game="popsaic"][data-scene="backdrop-stars"]::before { background-color: #232f9e; }
.game-root[data-game="popsaic"][data-scene="backdrop-ocean"]::before { background-color: #1583d6; }
.game-root[data-game="popsaic"][data-scene="backdrop-meadow"]::before { background-color: #94a3f6; }
.game-root[data-game="popsaic"][data-scene="backdrop-sea"]::before { background-color: #12a4dc; }
.maj-stage { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

/* --- the top row: the game's name at the left, its buttons at the right ----------------------- */
.maj-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;
}
.maj-game { font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(12, 62, 122, .35); }
.maj-tools { position: absolute; top: 10px; right: 12px; z-index: 4; display: flex; align-items: center; gap: 6px; }
.maj-pill {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px;
  background: #fff; color: #33506e;
  font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap;
  box-shadow: 0 2px 0 rgba(12, 62, 122, .18);
}
.maj-pill:hover:not(:disabled) { border-color: var(--c-primary); color: var(--c-text); }
.maj-pill:disabled { cursor: default; color: #9aa9b8; background: #e8eef3; }
.maj-pill .maj-icon { width: 17px; height: 17px; }

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

/* Which level, and the fruit still to clear; as wide as the board (--bw), and no narrower than
   the level's name needs while the stage has the room. */
.maj-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: max(var(--bw, 100%), min(100%, 440px)); max-width: 100%; height: 30px; padding: 0 4px; box-sizing: border-box;
  color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(12, 62, 122, .45);
}
.maj-which { min-width: 0; overflow: hidden; font-size: 1rem; white-space: nowrap; text-overflow: ellipsis; }
.maj-count {
  flex: none; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .88); color: #31506b; text-shadow: none; font-size: .9rem; white-space: nowrap;
}

.maj-fit { flex: 1 1 0; min-height: 0; width: 100%; display: grid; place-items: center; }
.maj-board { position: relative; }
/* Taps only: a finger dragged over the board still scrolls the page. */
.maj-canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; user-select: none; -webkit-user-select: none; }

/* Two lines tall whatever it says, empty included: the board is laid out in what this leaves.
   Dark words with a white halo read over any scene. */
.maj-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: #0f3d6b; font-size: .86rem; font-weight: 700; text-align: center;
  text-shadow: 0 0 2px #fff, 0 0 6px rgba(255, 255, 255, .95), 0 0 10px rgba(255, 255, 255, .8);
}

/* Take out, undo, shuffle and start over between the level arrows; the badge says what is left
   of each this round. Start over keeps only its icon on a narrow stage, and asks again in amber.
   The helps wrap to a second row before they push the arrows off the ends. */
.maj-ctrl {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  width: var(--bw, 100%); max-width: 100%; min-height: 44px;
}
.maj-helps { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.maj-ctrl .maj-pill { padding: 8px 13px; }
/* The level arrows: at the two ends of the row, or, where popsaic.js finds room
   (.maj-navside), beside the board's middle at the positions it sets. One with no level that way
   keeps its place unseen. */
.maj-nav {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 0; border-radius: 50%; background: none; color: rgba(255, 255, 255, .8); cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(12, 62, 122, .45));
}
.maj-nav:hover:not(:disabled), .maj-nav:focus-visible { background: rgba(255, 255, 255, .92); color: #33506e; }
.maj-nav .maj-icon { width: 28px; height: 28px; stroke-width: 2.4; }
.maj-nav.is-none { visibility: hidden; }
.maj-navside .maj-ctrl { justify-content: center; }
.maj-navside .maj-nav { position: absolute; z-index: 3; top: var(--maj-nav-top); }
.maj-navside .maj-prev { left: var(--maj-prev-x); }
.maj-navside .maj-next { left: var(--maj-next-x); }
.maj-badge {
  position: absolute; top: -7px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
  border-radius: 999px; background: #4fb878; color: #fff; font-size: .72rem; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px #fff;
}
.maj-badge.is-used { background: #a6b3bf; }
.maj-pill.is-spent { color: #8496a7; }
.maj-restart.is-sure { background: #ffcf4a; border-color: #fff; color: #5a3b00; }
/* A computer's stage is wide and the board is tall, so height is what limits it: the level's
   row moves up into the middle of the top row, and the helps' row may run wider than the board
   so it never takes two lines. */
@media (min-width: 1000px) {
  .maj { padding-top: 14px; }
  .maj-strip { height: 36px; }
  .maj-ctrl { width: max(var(--bw, 100%), min(100%, 560px)); }
}
/* On a phone the level's name alone: its number is on the arrows and the card. */
@media (max-width: 520px) {
  .maj-lvno { display: none; }
  .maj-which { font-size: .9rem; }
  .maj-count { padding: 3px 10px; font-size: .8rem; }
  .maj-helps { gap: 6px; }
  .maj-ctrl .maj-pill { padding: 8px 10px; font-size: .8rem; gap: 4px; }
  .maj-restart:not(.is-sure) .maj-restart-word { display: none; }
  .maj-nav { width: 36px; height: 36px; }
  .maj-nav .maj-icon { width: 24px; height: 24px; }
}
@media (max-width: 370px) {
  .maj-helps { gap: 4px; }
  .maj-ctrl .maj-pill { padding: 8px 8px; font-size: .76rem; }
}

/* 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 downward. */
.maj-audio { position: relative; display: flex; align-items: center; }
.maj-round {
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .82); color: #4d4031; cursor: pointer;
  box-shadow: 0 1px 4px rgba(40, 30, 20, .18);
}
.maj-round:hover { background: #fff; }
.maj-round .maj-sicon { width: 21px; height: 21px; }
.maj-more {
  display: grid; place-items: center; width: 0; height: 36px; padding: 0; overflow: hidden;
  border: 0; background: none; color: rgba(255, 255, 255, .9); cursor: pointer; opacity: 0;
  transition: opacity .15s ease;
}
.maj-audio:hover .maj-more, .maj-audio:focus-within .maj-more, .maj-audio.is-open .maj-more { width: 28px; opacity: 1; }
@media (hover: none) { .maj-more { width: 24px; opacity: .7; } }
.maj-more .maj-sicon { width: 22px; height: 22px; }
.maj-ellipsis { stroke-width: 3.4; }
.maj-menu {
  position: absolute; right: 0; top: 44px; min-width: 200px; padding: 6px; box-sizing: border-box;
  border: 1px solid rgba(77, 64, 49, .18); border-radius: 12px; background: #fffdf8;
  box-shadow: 0 6px 20px rgba(50, 40, 20, .18);
}
.maj-menu[hidden] { display: none; }
.maj-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: #4d4031; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; text-align: left;
}
.maj-opt:hover, .maj-opt:focus-visible { background: rgba(77, 64, 49, .07); }
.maj-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: rgba(77, 64, 49, .22); transition: background .15s ease; }
.maj-sw::after {
  content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s ease;
}
.maj-opt[aria-checked="true"] .maj-sw { background: #4fb878; }
.maj-opt[aria-checked="true"] .maj-sw::after { transform: translateX(14px); }
.maj-sicon { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.maj-cone { fill: currentColor; stroke: none; }
.maj-sound.off .maj-waves { display: none; }
.maj-sound:not(.off) .maj-slash { display: none; }
.maj-icon { width: 18px; height: 18px; flex: none; }
/* On a narrow stage the full screen button keeps only its icon. */
@media (max-width: 420px) {
  .maj-full span { display: none; }
  .maj-full { padding: 7px 10px; }
}

/* --- over the stage: the panel dims it, and a sheet in its middle holds the card -------------- */
.maj-win { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; }
.maj-win:empty { pointer-events: none; }
.maj-panel {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 20px 12px; text-align: center; overflow-y: auto;
  background: rgba(20, 84, 156, .6);
  animation: maj-in .35s ease-out;
}
@keyframes maj-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. */
.maj-panel > * { flex: none; }
.maj-panel > :first-child { margin-top: auto; margin-bottom: auto; }
.maj-sheet {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(440px, 100%); box-sizing: border-box;
  padding: 24px 14px; border-radius: 20px; background: #fffdf8;
  box-shadow: 0 10px 0 rgba(77, 64, 49, .08);
}
.maj-kicker { margin: 0 0 -8px; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9a8c78; }
.maj-sheet .maj-title { margin: 0; font-size: 1.55rem; font-weight: 700; color: #4d4031; }
.maj-word { white-space: nowrap; }
.maj-ch { display: inline-block; animation: maj-wave .5s ease-in-out both; }
@keyframes maj-wave { 40% { transform: translateY(-.35em); } }
.maj-view { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.maj-view p { margin: 0; }
.maj-view-line { color: #4d4031; font-weight: 600; }
.maj-view-small { font-size: .8rem; color: #9a8c78; }
.maj-soon { color: #2f7d4f; }
.maj-ask { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #6a5a44; }
.maj-ask p { margin: 0; }
.maj-moods { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.maj-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;
}
.maj-mood:hover { border-color: var(--c-primary); }
.maj-mood.on { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.maj-mood .maj-icon { width: 22px; height: 22px; }
.maj-ask .maj-note { min-height: 1.3em; margin: 0; font-size: .9rem; color: var(--c-text-soft); }
.maj-key {
  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);
}
.maj-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.maj-choices .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: .9rem; }
.maj-choices .maj-icon { stroke-width: 2.2; }

/* The review build's tools, under the game panel and outside it. */
.maj-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;
}
.maj-review button, .maj-review select { 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.maj-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.maj-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 .maj-top > * + * { margin-left: 10px; }
  #game-root .maj-tools > * + * { margin-left: 6px; }
  #game-root .maj-pill > * + * { margin-left: 6px; }
  #game-root .maj > * + * { margin-top: 6px; }
  #game-root .maj-strip > * + * { margin-left: 10px; }
  #game-root .maj-helps { margin-top: -4px; margin-bottom: -4px; }
  #game-root .maj-helps > * { margin: 4px; }
  @media (max-width: 520px) {
    #game-root .maj-helps { margin-top: -3px; margin-bottom: -3px; }
    #game-root .maj-helps > * { margin: 3px; }
    #game-root .maj-ctrl .maj-pill > * + * { margin-left: 4px; }
  }
  @media (max-width: 370px) {
    #game-root .maj-helps { margin-top: -2px; margin-bottom: -2px; }
    #game-root .maj-helps > * { margin: 2px; }
  }
  #game-root .maj-opt > * + * { margin-left: 16px; }
  #game-root .maj-panel > * + * { margin-top: 18px; }
  #game-root .maj-sheet > * + * { margin-top: 14px; }
  #game-root .maj-view > * + * { margin-top: 6px; }
  #game-root .maj-ask > * + * { margin-top: 10px; }
  #game-root .maj-moods > * { margin: 5px 5px; }
  #game-root .maj-mood > * + * { margin-left: 8px; }
  #game-root .maj-choices > * { margin: 4px 4px; }
  #game-root .maj-choices .btn > * + * { margin-left: 8px; }
  #game-root .maj-review > * { margin: 4px 4px; }
}