/* Seek and Find: the game's name and its buttons across the top, and under them the round's own
   area: the clock, the table the pile lies on, and the list under it, which seek-and-find.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="seek-and-find"] {
  position: relative; display: block; padding: 0; overflow: hidden; text-align: left;
  background: #6eb982;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.skf-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 ----------------------- */
.skf-top {
  position: absolute; top: 14px; left: 18px; right: 18px; z-index: 2;
  display: flex; align-items: baseline; pointer-events: none; text-align: left;
}
.skf-game { font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(15, 60, 30, .45); white-space: nowrap; }
.skf-tools { position: absolute; top: 10px; right: 14px; z-index: 4; display: flex; align-items: center; gap: 8px; }
.skf-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);
}
.skf-pill:hover:not(:disabled) { background: #fff; }
.skf-pill .skf-icon { width: 16px; height: 16px; }

/* --- the round's own area --------------------------------------------------------------------
   The top padding clears the row above. */
.skf {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 52px 6px 4px; box-sizing: border-box; overflow: hidden; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.skf > .skf-hud, .skf > .skf-cap, .skf > .skf-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 seek-and-find.js. */
.skf-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. seek-and-find.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. */
.skf-clock { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; max-width: 300px; margin: 0; color: #fff; }
.skf-clock .skf-icon { width: 20px; height: 20px; stroke-width: 2.4; filter: drop-shadow(0 1px 1px rgba(15, 60, 30, .45)); }
.skf-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);
}
.skf-fill {
  position: absolute; top: 0; left: 0; height: 100%; width: 100%;
  background: linear-gradient(#ff8d9b, #e8445a); transition: width .2s linear;
}
.skf-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 (seek-and-find.js sets the class): the bar beats once a second. */
.skf-clock.is-low .skf-bar { animation: skf-low 1s ease-in-out infinite; }
@keyframes skf-low { 50% { transform: scale(1.06); } }
.skf-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 thing it asks for, its picture and how many are still to find. One
   row; seek-and-find.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(). */
.skf-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; }
.skf-list.is-wrap { flex-wrap: wrap; }
.skf-want {
  display: inline-flex; flex: none; align-items: center; gap: 4px; height: 40px; padding: 0 12px 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);
}
.skf-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); }
.skf-wpic.skf-emoji { display: grid; place-items: center; font-size: 24px; line-height: 1; }
.skf-num { display: inline-flex; align-items: center; min-width: 1.3em; }
.skf-list.is-small .skf-want { height: 34px; padding: 0 8px 0 3px; font-size: .9rem; }
.skf-list.is-small .skf-wpic { width: 28px; height: 28px; }
.skf-num .skf-icon { width: 20px; height: 20px; stroke-width: 3; color: #2f9e57; }
.skf-want.is-done { background: rgba(255, 255, 255, .6); }
.skf-want.is-done .skf-wpic { opacity: .55; }
.skf-want.is-bump { animation: skf-bump .32s ease-out; }
@keyframes skf-bump { 40% { transform: scale(1.15); } }
/* The first level's lesson: the list's first thing breathes until the first find. */
.skf-want.is-invite { animation: skf-nudge 1.6s ease-in-out infinite; }
@keyframes skf-nudge { 50% { transform: scale(1.1); } }

/* A row's picture and the question mark that stands in for it face down (is-blank). The picture
   keeps its box when hidden: a find flies to it. */
.skf-wslot { position: relative; display: block; flex: none; }
.skf-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;
}
.skf-ask .skf-icon { width: 20px; height: 20px; stroke-width: 2.6; }
.skf-want.is-blank .skf-wpic { visibility: hidden; }
.skf-want.is-blank .skf-ask { display: grid; }
.skf-list.is-memo .skf-want.is-blank { cursor: pointer; }
.skf-want.is-flip .skf-wslot { animation: skf-flip .3s ease-in-out; }
@keyframes skf-flip { 50% { transform: scaleX(0); } }
/* Shadows on the list: each row a silhouette until it is done. */
.skf-list.is-shadow .skf-want:not(.is-done) .skf-wpic { filter: brightness(0); opacity: .5; }
/* `small`: the list shows its things small. `flip`: its question marks stand on their heads. */
.skf-list.is-tiny .skf-wpic { transform: scale(.6); }
.skf-list.is-upside .skf-ask .skf-icon { transform: rotate(180deg); }
/* One row at a time: the row to find ringed, the rows after it dimmed. */
.skf-want.is-now { box-shadow: 0 0 0 3px #ffd84d, 0 1px 4px rgba(15, 60, 30, .22); }
.skf-want.is-later { opacity: .45; }

.skf-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.
   seek-and-find.js sizes it and places, sizes, turns and stacks each thing (.skf-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. */
.skf-pile {
  position: relative; z-index: 0; overflow: hidden;
  cursor: pointer; touch-action: manipulation;
}
.skf-item { position: absolute; display: block; pointer-events: none; }
/* A pile with no colour. On the table, not on each thing: a thing taken gets its colour back as
   it flies off the table to the list. */
.skf-pile.is-gray { filter: grayscale(1); }
/* `dark`: the night seek-and-find.js paints over the pile, above every thing's z-index. */
.skf-dark {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1000;
  pointer-events: none; opacity: 0; transition: opacity .9s ease;
}
.skf-dark.is-on { opacity: 1; }
/* `twin`: the line between the two halves, down the middle of seek-and-find.js's TWIN_GAP. */
.skf-pile.is-twin::after {
  content: ''; position: absolute; left: 50%; top: 2%; height: 96%; width: 2px; margin-left: -1px; z-index: 999;
  border-radius: 1px; background: rgba(255, 255, 255, .6); pointer-events: none;
}
/* Before a gust the pile trembles; in the gust each thing glides to its new place. 0.8s is
   GUST_MS in seek-and-find.js. */
.skf-pile.is-breeze .skf-pic { animation: skf-sway .3s ease-in-out infinite alternate; }
@keyframes skf-sway {
  from { transform: rotate(-6deg) translateX(-3%); }
  to { transform: rotate(6deg) translateX(3%); }
}
.skf-pile.is-gust .skf-item {
  transition: left .8s cubic-bezier(.5, 0, .3, 1), top .8s cubic-bezier(.5, 0, .3, 1), transform .8s cubic-bezier(.5, 0, .3, 1);
}
/* The pictures are shown muted: the filter is the whole of it, the files stay as drawn. */
.skf-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); }
.skf-pic.skf-emoji { display: grid; place-items: center; line-height: 1; }

/* The deal: each thing grows in, its delay set by seek-and-find.js; 0.38s is POP_MS there. */
.skf-item.is-in .skf-pic { animation: skf-in .38s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes skf-in {
  from { opacity: 0; transform: scale(.2) rotate(-12deg); }
  to { opacity: 1; transform: none; }
}
/* A tap on a thing not on the list: it shakes, rimmed in red. */
.skf-item.is-wrong .skf-pic { animation: skf-shake .42s ease-in-out; }
@keyframes skf-shake {
  0% { filter: saturate(.45) brightness(1.05) contrast(.92) drop-shadow(0 0 0 #ff4d6d); }
  15% { transform: translateX(-8%) rotate(-5deg); filter: saturate(.45) brightness(1.05) contrast(.92) drop-shadow(0 0 4px #ff4d6d); }
  35% { transform: translateX(7%) rotate(4deg); }
  55% { transform: translateX(-4%); }
  75% { transform: translateX(2%); filter: saturate(.45) brightness(1.05) contrast(.92) drop-shadow(0 0 4px #ff4d6d); }
  100% { filter: saturate(.45) brightness(1.05) contrast(.92) drop-shadow(0 0 0 #ff4d6d); }
}
/* The lesson's pointer: a soft glow round one thing the list asks for. */
.skf-item.is-hint .skf-pic { animation: skf-hint 1.3s ease-in-out infinite; }
@keyframes skf-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 lesson's hand, over the pile and under the card. seek-and-find.js puts its fingertip
   (34.4% 5.9% of it, TIP_X / TIP_Y) on the thing; 46px wide is HAND_W. The press lands on the
   1.3s beat of skf-hint, and a ring spreads from the fingertip as it does. */
.skf-hand {
  position: absolute; left: 0; top: 0; z-index: 4; width: 46px; height: 48.875px; pointer-events: none;
  animation: skf-hand-in .35s ease-out;
}
.skf-hand[hidden] { display: none; }
.skf-hand svg {
  position: relative; display: block; width: 100%; height: 100%; transform-origin: 34.4% 5.9%;
  filter: drop-shadow(0 2px 3px rgba(15, 60, 30, .35));
  animation: skf-press 1.3s ease-in-out infinite;
}
.skf-tap {
  position: absolute; left: 34.4%; top: 5.9%; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 3px solid #fff; border-radius: 50%; box-sizing: border-box; opacity: 0;
  animation: skf-ring 1.3s ease-out infinite;
}
@keyframes skf-hand-in { from { opacity: 0; } }
@keyframes skf-press {
  0%, 100% { transform: translate(6px, 10px); }
  45%, 60% { transform: translate(0, 0) scale(.92); }
}
@keyframes skf-ring {
  0%, 48% { opacity: 0; transform: scale(.3); }
  52% { opacity: .95; transform: scale(.45); }
  100% { opacity: 0; transform: scale(1.5); }
}
/* The level cleared: what is left hops, its delay set by seek-and-find.js. */
.skf-item.is-cheer .skf-pic { animation: skf-hop .6s ease-in-out both; }
@keyframes skf-hop {
  40% { transform: translateY(-16%) scale(1.06); }
  70% { transform: translateY(3%) scale(.98); }
}

/* Over the stage: a thing on its way to the list, and the stars it throws. seek-and-find.js puts
   each at its start (left, top) and takes it away when it has played. */
.skf-fx { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: hidden; }
.skf-fly { position: absolute; display: block; z-index: 2; }
.skf-fly .skf-pic { filter: saturate(.45) brightness(1.05) contrast(.92) drop-shadow(0 4px 6px rgba(15, 60, 30, .35)); }
.skf-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: skf-star .65s ease-out forwards;
}
.skf-star.is-white { background: #fff; }
/* A gust's streaks of air, each crossing the table from its left edge (left, top, width and --run
   set by seek-and-find.js). */
.skf-gust {
  position: absolute; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .75);
  opacity: 0; animation: skf-gust .75s ease-in forwards;
}
@keyframes skf-gust {
  from { opacity: 0; transform: translateX(0); }
  25% { opacity: .9; }
  to { opacity: 0; transform: translateX(var(--run, 300px)); }
}
@keyframes skf-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); }
}

/* Two lines tall whatever it says, empty included: the table is laid out in what this leaves. */
.skf-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);
}
.skf-cap.is-new { animation: skf-say .4s ease-out; }
@keyframes skf-say { from { opacity: 0; transform: translateY(4px); } }
/* The row under the table: the list at its left, in its middle Start over with an arrow each side
   of it, and the speaker at its right. Where the list does not fit beside them (seek-and-find.js
   sets is-stack), the list and the speaker share the first line and Start over takes the second,
   in its middle. Both ways the buttons stand 8px above the stage's bottom: .skf's 4px padding
   and 4px under them (the grid row centres 40px in 44, the stacked row's 2px margin and 2px
   padding). The speaker stands 12px in from the stage's right: .skf's 6px padding and its own 6. */
.skf-foot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  width: max(var(--bw, 100%), min(100%, 320px)); max-width: 100%; min-height: 44px; box-sizing: border-box;
}
.skf-foot > * { margin-top: 2px; margin-bottom: 2px; }
.skf-ctrl { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.skf-foot > .skf-audio { justify-self: end; margin-right: 6px; }
.skf-foot.is-stack { display: flex; flex-wrap: wrap; padding-bottom: 2px; }
.skf-foot.is-stack > .skf-list { flex: 1 1 0; }
/* As wide as with the dots shown, so showing them on hover does not narrow the list. */
.skf-foot.is-stack > .skf-audio { flex: none; justify-content: flex-end; min-width: 66px; margin-left: 8px; }
.skf-foot.is-stack > .skf-ctrl { order: 1; flex: 1 0 100%; }
.skf-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);
}
.skf-arrow:hover { background: #fff; }
.skf-arrow .skf-icon { width: 24px; height: 24px; stroke-width: 2.6; opacity: .55; }
.skf-arrow:hover .skf-icon { opacity: 1; }
/* An arrow with no level that way keeps its place, so Start over does not move. */
.skf-arrow[hidden] { display: block; visibility: hidden; }

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

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

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

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