/* Spot the Difference: the game's name and its buttons across the top, and under them the round's
   own area: the clock, the table with its two halves, and the list under it, which
   spot-the-difference.js lays out. The panel's size is game-layout.css's (data-ideal); the stage
   fills it, on plain green. */

/* No `inset` in this file: iOS before 14.5 drops it, and the stage then has no size. */
.game-root[data-game="spot-the-difference"] {
  position: relative; display: block; padding: 0; overflow: hidden; text-align: left;
  background: #6eb982;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.spd-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 ----------------------- */
.spd-top {
  position: absolute; top: 14px; left: 18px; right: 18px; z-index: 2;
  display: flex; align-items: baseline; pointer-events: none; text-align: left;
}
.spd-game { font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(15, 60, 30, .45); white-space: nowrap; }
.spd-tools { position: absolute; top: 10px; right: 14px; z-index: 4; display: flex; align-items: center; gap: 8px; }
.spd-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px;
  background: rgba(255, 255, 255, .85); color: #1f5e34;
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(15, 60, 30, .2);
}
.spd-pill:hover:not(:disabled) { background: #fff; }
.spd-pill .spd-icon { width: 16px; height: 16px; }
/* The topic page's How to play button, moved into the tools row by the game's script. No
   `display` here: common.css hides it with .topic-howto[hidden], which this would outrank. */
.spd-tools .topic-howto {
  position: static; height: auto; margin: 0; gap: 0;
  padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 999px;
  background: rgba(255, 255, 255, .85); color: #1f5e34; box-shadow: 0 1px 4px rgba(15, 60, 30, .2);
  font-size: .85rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.spd-tools .topic-howto:hover { background: #fff; color: #1f5e34; }
.spd-tools .topic-howto-text { margin-left: 5px; }

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

/* The clock at the table's left edge and the level at its right. --bw is the table's width, set
   by spot-the-difference.js. */
.spd-hud {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: max(var(--bw, 100%), min(100%, 330px)); max-width: 100%; height: 2rem; padding: 0 2px; box-sizing: border-box;
}
/* The clock: a bar that drains as the time runs, the seconds left on it. spot-the-difference.js
   sets the fill's width. The fill is sized by width, not a transform: iOS before 15 does not clip
   a transformed child to its parent's rounded corners. */
.spd-clock { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; max-width: 300px; margin: 0; color: #fff; }
.spd-clock .spd-icon { width: 20px; height: 20px; stroke-width: 2.4; filter: drop-shadow(0 1px 1px rgba(15, 60, 30, .45)); }
.spd-bar {
  position: relative; flex: 1 1 auto; min-width: 0; height: 18px; box-sizing: border-box; overflow: hidden;
  border: 2px solid #fff; border-radius: 999px; background: rgba(15, 60, 30, .35);
  box-shadow: 0 1px 3px rgba(15, 60, 30, .3);
}
.spd-fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 100%;
  background: linear-gradient(#ff8d9b, #e8445a); transition: width .2s linear;
}
.spd-time {
  position: relative; display: block; text-align: center; line-height: 14px;
  font-size: .75rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff;
  text-shadow: 0 1px 1px rgba(90, 10, 20, .55);
}
/* The last seconds (spot-the-difference.js sets the class): the bar beats once a second. */
.spd-clock.is-low .spd-bar { animation: spd-low 1s ease-in-out infinite; }
@keyframes spd-low { 50% { transform: scale(1.06); } }
.spd-level {
  flex: none; margin: 0; white-space: nowrap;
  color: #fff; font-size: .9rem; font-weight: 800; text-shadow: 0 1px 2px rgba(15, 60, 30, .45);
}

/* The list: a chip for each difference, a question mark until it is found and then the thing
   found with a tick. One row; spot-the-difference.js makes the chips smaller (is-small) when they
   do not fit, and lets them wrap (is-wrap) only when the smaller ones do not either. The 6px gap
   is also in fitList(). */
.spd-list { display: flex; flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 6px; min-width: 0; min-height: 40px; }
.spd-list.is-wrap { flex-wrap: wrap; }
.spd-want {
  display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 8px 0 5px; box-sizing: border-box;
  border-radius: 999px; background: rgba(255, 255, 255, .92); color: #1f5e34;
  font-size: 1rem; font-weight: 800; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(15, 60, 30, .22);
}
.spd-wpic { display: block; width: 32px; height: 32px; object-fit: contain; pointer-events: none; -webkit-user-drag: none; filter: saturate(.45) brightness(1.05) contrast(.92); }
.spd-wpic.spd-emoji { display: grid; place-items: center; font-size: 24px; line-height: 1; }
.spd-num { display: inline-flex; align-items: center; }
.spd-list.is-small .spd-want { height: 34px; padding: 0 5px 0 3px; font-size: .9rem; }
.spd-list.is-small .spd-wpic { width: 28px; height: 28px; }
.spd-num .spd-icon { width: 20px; height: 20px; stroke-width: 3; color: #2f9e57; }
.spd-want.is-blank { padding-right: 5px; }
.spd-want.is-done { background: rgba(255, 255, 255, .7); }
.spd-want.is-bump { animation: spd-bump .32s ease-out; }
@keyframes spd-bump { 40% { transform: scale(1.15); } }

/* A chip's picture and the question mark that stands in for it until it is found (is-blank). The
   picture keeps its box hidden: a find flies to it. */
.spd-wslot { position: relative; display: block; flex: none; }
.spd-ask {
  position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; display: none; place-items: center;
  border-radius: 50%; background: rgba(31, 94, 52, .12); color: #1f5e34;
}
.spd-ask .spd-icon { width: 20px; height: 20px; stroke-width: 2.6; }
.spd-want.is-blank .spd-wpic { visibility: hidden; }
.spd-want.is-blank .spd-ask { display: grid; }
.spd-want.is-flip .spd-wslot { animation: spd-flip .3s ease-in-out; }
@keyframes spd-flip { 50% { transform: scaleX(0); } }

.spd-fit { flex: 1 1 0; min-height: 0; width: 100%; display: grid; place-items: start center; }

/* --- the table and the pile on it ------------------------------------------------------------
   The table is only the area the things lie in, on the stage's own green, with nothing drawn but
   the line between its halves. spot-the-difference.js sizes it and places, sizes, turns and
   stacks each thing (.spd-item); a tap is read off the table, so nothing on it takes the
   pointer. The table's own z-index keeps the pile's stacking inside it, under the card and the
   things in flight. */
.spd-pile {
  position: relative; z-index: 0; overflow: hidden;
  cursor: pointer; touch-action: manipulation;
}
.spd-item { position: absolute; display: block; pointer-events: none; }
/* The line between the halves, down the middle of spot-the-difference.js's GAP, above the pile
   (whose z-index runs one a thing) and under the rings. */
.spd-pile::after {
  content: ''; position: absolute; z-index: 9998; border-radius: 1px; background: rgba(255, 255, 255, .7); pointer-events: none;
}
.spd-pile.is-x::after { left: 50%; top: 2%; height: 96%; width: 2px; margin-left: -1px; }
.spd-pile.is-y::after { top: 50%; left: 2%; width: 96%; height: 2px; margin-top: -1px; }
/* A difference found: a ring on each half, drawn on as it lands. */
.spd-ring {
  position: absolute; z-index: 9999; box-sizing: border-box; pointer-events: none;
  border: 3px solid #ffd84d; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), inset 0 0 0 2px rgba(255, 255, 255, .85), 0 0 10px rgba(255, 216, 77, .8);
  animation: spd-ring .45s cubic-bezier(.2, .9, .3, 1.3) both;
}
@keyframes spd-ring { from { opacity: 0; transform: scale(1.8); } }
/* The pictures are shown muted: the filter is the whole of it, the files stay as drawn. */
.spd-pic { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; filter: saturate(.45) brightness(1.05) contrast(.92); }
.spd-pic.spd-emoji { display: grid; place-items: center; line-height: 1; }
/* A pile with no colour. On the pictures, not the table: the rings keep theirs. */
.spd-pile.is-gray .spd-pic { filter: grayscale(1) brightness(1.05) contrast(.92); }

/* The deal: each thing grows in, its delay set by spot-the-difference.js; 0.38s is POP_MS there. */
.spd-item.is-in .spd-pic { animation: spd-in .38s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes spd-in {
  from { opacity: 0; transform: scale(.2) rotate(-12deg); }
  to { opacity: 1; transform: none; }
}
/* A tap on a thing the halves share: it shakes, rimmed in red. */
.spd-item.is-wrong .spd-pic { animation: spd-shake .42s ease-in-out; }
@keyframes spd-shake {
  15% { transform: translateX(-8%) rotate(-5deg); }
  35% { transform: translateX(7%) rotate(4deg); }
  55% { transform: translateX(-4%); }
  75% { transform: translateX(2%); }
}
.spd-item.is-wrong { animation: spd-rim .42s ease-in-out; }
@keyframes spd-rim { 15%, 75% { filter: drop-shadow(0 0 4px #ff4d6d); } }
/* The lesson's pointer: a soft glow round a difference. */
.spd-item.is-hint .spd-pic { animation: spd-hint 1.3s ease-in-out infinite; }
@keyframes spd-hint {
  0%, 100% { transform: scale(1); filter: saturate(.45) brightness(1.05) contrast(.92) drop-shadow(0 0 0 #fff4b0); }
  50% { transform: scale(1.12); filter: saturate(.45) brightness(1.15) contrast(.92) drop-shadow(0 0 7px #ffd84d); }
}
/* The level cleared: the pile hops, its delay set by spot-the-difference.js. */
.spd-item.is-cheer .spd-pic { animation: spd-hop .6s ease-in-out both; }
@keyframes spd-hop {
  40% { transform: translateY(-16%) scale(1.06); }
  70% { transform: translateY(3%) scale(.98); }
}

/* Over the stage: a copy of a thing found on its way to the list, the stars it throws, and the
   seconds a wrong tap costs. spot-the-difference.js puts each at its start (left, top) and takes
   it away when it has played. */
.spd-fx { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: hidden; }
.spd-fly { position: absolute; display: block; z-index: 2; }
.spd-fly .spd-pic { filter: saturate(.45) brightness(1.05) contrast(.92) drop-shadow(0 4px 6px rgba(15, 60, 30, .35)); }
.spd-star {
  position: absolute; width: var(--sz, 10px); height: var(--sz, 10px);
  margin: calc(var(--sz, 10px) / -2) 0 0 calc(var(--sz, 10px) / -2);
  background: #ffc93c;
  -webkit-clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%);
  clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%);
  animation: spd-star .65s ease-out forwards;
}
.spd-star.is-white { background: #fff; }
@keyframes spd-star {
  from { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0); }
  70% { opacity: 1; }
  to { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(1) rotate(160deg); }
}
.spd-cost {
  position: absolute; z-index: 3; transform: translate(-50%, -100%);
  color: #fff; font-size: 1.05rem; font-weight: 900; white-space: nowrap;
  text-shadow: 0 0 3px #c8213b, 0 1px 2px rgba(90, 10, 20, .8);
  animation: spd-cost 1s ease-out forwards;
}
@keyframes spd-cost {
  from { opacity: 0; transform: translate(-50%, -60%) scale(.7); }
  20% { opacity: 1; transform: translate(-50%, -110%) scale(1.1); }
  to { opacity: 0; transform: translate(-50%, -220%) scale(1); }
}

/* Two lines tall whatever it says, empty included: the table is laid out in what this leaves. */
.spd-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(15, 60, 30, .5);
}
.spd-cap.is-new { animation: spd-say .4s ease-out; }
@keyframes spd-say { from { opacity: 0; transform: translateY(4px); } }
/* The row under the table: the list at its left, and at its right Start over with an arrow each
   side of it. Where the two do not fit side by side, Start over wraps under the list. */
.spd-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  width: max(var(--bw, 100%), min(100%, 320px)); max-width: 100%; min-height: 44px; box-sizing: border-box;
}
.spd-foot > * { margin-top: 2px; margin-bottom: 2px; }
.spd-ctrl { display: flex; flex: none; align-items: center; margin-left: auto; }
.spd-arrow {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: 0 8px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .62); color: #1f5e34; cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 60, 30, .2);
}
.spd-arrow:hover { background: #fff; }
.spd-arrow .spd-icon { width: 24px; height: 24px; stroke-width: 2.6; opacity: .55; }
.spd-arrow:hover .spd-icon { opacity: 1; }
/* An arrow with no level that way keeps its place, so Start over does not move. */
.spd-arrow[hidden] { display: block; visibility: hidden; }

/* The speaker beside Full screen, 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. */
.spd-round {
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .7); color: #1f5e34; cursor: pointer;
  box-shadow: 0 1px 4px rgba(15, 60, 30, .18);
}
.spd-round:hover { background: #fff; }
.spd-round .spd-sicon { width: 22px; height: 22px; }
.spd-audio { position: relative; display: flex; align-items: center; }
.spd-more {
  display: grid; place-items: center; width: 0; height: 36px; padding: 0; overflow: hidden;
  border: 0; background: none; color: rgba(255, 255, 255, .85); cursor: pointer; opacity: 0;
  transition: opacity .15s ease;
}
.spd-audio:hover .spd-more, .spd-audio:focus-within .spd-more, .spd-audio.is-open .spd-more { width: 30px; opacity: 1; }
@media (hover: none) { .spd-more { width: 26px; opacity: .7; } }
.spd-more .spd-sicon { width: 22px; height: 22px; }
.spd-ellipsis { stroke-width: 3.4; }
.spd-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);
}
.spd-menu[hidden] { display: none; }
.spd-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;
}
.spd-opt:hover, .spd-opt:focus-visible { background: rgba(77, 64, 49, .07); }
.spd-sw { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: rgba(77, 64, 49, .22); transition: background .15s ease; }
.spd-sw::after {
  content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: transform .15s ease;
}
.spd-opt[aria-checked="true"] .spd-sw { background: #4fb878; }
.spd-opt[aria-checked="true"] .spd-sw::after { transform: translateX(14px); }
.spd-sicon { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spd-cone { fill: currentColor; stroke: none; }
.spd-sound.off .spd-waves { display: none; }
.spd-sound:not(.off) .spd-slash { display: none; }
.spd-icon { width: 18px; height: 18px; flex: none; }

/* A stage too narrow for the game's name beside the buttons (spot-the-difference.js sets the class). */
.spd-tight .spd-game { visibility: hidden; }

/* --- over the stage: the panel dims it, and a sheet in its middle holds the card -------------- */
.spd-win { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; }
.spd-win:empty { pointer-events: none; }
.spd-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(15, 60, 30, .55);
  animation: spd-fade .35s ease-out;
}
@keyframes spd-fade { 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. */
.spd-panel > * { flex: none; }
.spd-panel > :first-child { margin-top: auto; margin-bottom: auto; }
.spd-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(77, 64, 49, .08);
}
.spd-sheet .spd-title { margin: 0; font-size: 1.6rem; font-weight: 700; color: #4d4031; }
/* Each letter's delay is set by spot-the-difference.js. */
.spd-word { white-space: nowrap; }
.spd-ch { display: inline-block; animation: spd-wave .5s ease-in-out both; }
@keyframes spd-wave { 40% { transform: translateY(-.35em); } }
.spd-sheet > p { margin: 0; }
.spd-line { color: #4d4031; }
.spd-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.spd-choices .btn { display: inline-flex; align-items: center; gap: 8px; }
.spd-choices .spd-icon { stroke-width: 2.2; }

/* The review build's tools, under the game panel and outside it. */
.spd-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;
}
.spd-review select, .spd-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.spd-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.spd-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 .spd-tools > * + * { margin-left: 8px; }
  #game-root .spd-pill > * + * { margin-left: 6px; }
  #game-root .spd > * + * { margin-top: 6px; }
  #game-root .spd-hud > * + * { margin-left: 10px; }
  #game-root .spd-clock > * + * { margin-left: 6px; }
  #game-root .spd-list > * { margin: 0 3px 6px; }
  #game-root .spd-want > * + * { margin-left: 4px; }
  #game-root .spd-opt > * + * { margin-left: 16px; }
  #game-root .spd-panel > * + * { margin-top: 18px; }
  #game-root .spd-sheet > * + * { margin-top: 14px; }
  #game-root .spd-choices > * { margin: 6px 6px; }
  #game-root .spd-choices .btn > * + * { margin-left: 8px; }
  #game-root .spd-review > * { margin: 4px 4px; }
}